/* Общий фон */
body {
    background-image: url('../cards/background.jpg');
    background-size: cover;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Высота окна Telegram */
    overflow: hidden; /* Убираем скроллинг */
}

/* Таблица игры */
.game-table {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%; /* Задаем ширину как процент от экрана */
    max-width: 600px; /* Ограничиваем максимальную ширину */
    height: auto; /* Высота определяется содержимым */
    padding: 10px;
    box-sizing: border-box; /* Учитываем отступы */
}

/* Ряд карт */
.card-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Картинки переходят на следующий ряд, если не помещаются */
    margin-top: 20px;
}

/* Карты */
.card {
    width: calc(20vw); /* Карты занимают 20% ширины экрана */
    height: calc(30vw); /* Пропорциональная высота */
    max-width: 120px; /* Ограничиваем максимальный размер карт */
    max-height: 180px; /* Ограничиваем максимальный размер карт */
    cursor: pointer;
    transition: transform 0.3s;
}

/* Центральная карта */
.center-card {
    position: absolute;
    top: 50%; /* Центрируем по вертикали */
    left: 50%; /* Центрируем по горизонтали */
    transform: translate(-50%, -50%); /* Смещение для точной центровки */
    z-index: 10; /* Выше остальных элементов */
}