:root {
    --background-color: #212831;
    --primary-text-color: #ffffff;
    --secondary-text-color: #a9b1bb;
    --accent-color: #007bff;
    --surface-color: #1b2127;
    --border-color: #4b5461;
    --error-color: #ff3b30;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--primary-text-color);
    height: 100%;
    overflow: hidden;
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Header */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--surface-color);
    flex-shrink: 0;
}

.balance-block {
    position: relative;
    cursor: pointer;
}

.balance-display {
    display: flex;
    align-items: center;
    background-color: var(--background-color);
    padding: 5px 12px;
    border-radius: 20px;
}

.ton-icon {
    width: 20px;
    height: 20px;
    fill: var(--accent-color);
    margin-right: 8px;
    border-radius: 50%;
}

.arrow-down {
    border: solid var(--secondary-text-color);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-left: 8px;
}

.balance-dropdown {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    background-color: var(--surface-color);
    border-radius: 8px;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.balance-dropdown.show {
    display: block;
}

.balance-dropdown button {
    background: none;
    border: none;
    color: var(--primary-text-color);
    padding: 12px 20px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.balance-dropdown button:hover {
    background-color: var(--border-color);
}

.user-block {
    display: flex;
    align-items: center;
}

#user-name {
    margin-right: 10px;
    font-weight: 500;
}

#user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #555;
}

/* Main Content */
.main-content {
    flex-grow: 1;
    overflow-y: auto;
    position: relative;
}

.view {
    display: none;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
    flex-direction: column;
}

.view.active-view {
    display: flex;
}

/* --- Стили для нового главного меню --- */
#main-menu-view h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* style.css */

/* style.css */

.game-modes-container {
    display: flex;
    /* --- НАЧАЛО: Измененные/добавленные стили --- */
    flex-direction: column; /* Располагаем элементы в столбик */
    align-items: center;    /* Центрируем их по горизонтали */
    gap: 20px;              /* Устанавливаем расстояние между ними */
    /* --- КОНЕЦ: Измененные/добавленные стили --- */
    justify-content: center;
    padding-top: 20px;
    /* flex-wrap: wrap; - это свойство больше не нужно, можно удалить */
}

/* style.css */

/* style.css */

.game-mode-card {
    display: block;
    /* --- НАЧАЛО: Измененный стиль --- */
    width: 90%; /* Возвращаем ширину, чтобы карточка занимала всю строку */
    /* --- КОНЕЦ: Измененный стиль --- */
    max-width: 350px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.game-mode-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.game-mode-card img {
    width: 100%;
    display: block;
}


/* Lobby */
.games-list-container {
    flex-grow: 1;
    overflow-y: auto;
}

.game-item {
    background-color: var(--surface-color);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-info span {
    display: block;
}

.game-info .game-type {
    font-weight: bold;
    font-size: 1.1em;
}

.game-info .game-stake {
    color: var(--accent-color);
    font-weight: 600;
}

.game-info .game-players {
    color: var(--secondary-text-color);
    font-size: 0.9em;
}

.action-button, .secondary-button {
    border: none;
    padding: 15px 25px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.action-button {
    background-color: var(--accent-color);
    color: var(--primary-text-color);
}

/* --- Стили для новой шапки лобби --- */



/* --- Корректируем стили для футера экрана создания игры --- */
.create-game-footer {
    padding-top: 15px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Create Game View */
.setting-group {
    margin-bottom: 25px;
}

.setting-group label {
    display: block;
    margin-bottom: 10px;
    color: var(--secondary-text-color);
}

.toggle-buttons {
    display: flex;
    gap: 10px;
}

.toggle-buttons button {
    flex-grow: 1;
    background-color: var(--surface-color);
    color: var(--primary-text-color);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    font-size: 15px;
}

.toggle-buttons button.active {
    border-color: var(--accent-color);
}

#stake-input {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    background-color: var(--surface-color);
    color: var(--primary-text-color);
    font-size: 16px;
    box-sizing: border-box;
}

#stake-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

#stake-input.input-error {
    border-color: var(--error-color);
}

.create-game-footer {
    margin-top: auto;
}

.secondary-button {
    background-color: var(--surface-color);
    color: var(--primary-text-color);
}

/* Стили модального окна */
.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.modal.show {
    display: flex; /* Показываем через JS */
}

.modal-content {
    background-color: var(--surface-color);
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#close-deposit-modal {
    background-color: #27333f;
}

#deposit-amount-input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    background-color: var(--background-color);
    color: var(--primary-text-color);
    font-size: 16px;
    box-sizing: border-box;
}

#cryptobot-pay-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background-color: #27333f;
    color: var(--primary-text-color);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    gap: 10px;
}

#cryptobot-pay-button img {
    width: 24px;
    height: 24px;
}

.action-button:hover,
.secondary-button:hover,
.toggle-buttons button:hover,
.balance-dropdown button:hover,
#cryptobot-pay-button:hover {
    filter: brightness(1.15); /* Делаем кнопку немного ярче */
    transition: filter 0.2s ease-in-out;
}

/* --- Стили для неактивной/загружающейся кнопки --- */
#cryptobot-pay-button.loading {
    cursor: not-allowed; /* Курсор "запрещено" */
    opacity: 0.7; /* Делаем ее полупрозрачной */
    filter: none; /* Убираем эффект hover в состоянии загрузки */
}

/* Убираем эффект для активных кнопок в toggle-группах */
.toggle-buttons button.active:hover {
    filter: none;
}

/* style.css */

/* --- Стили для игрового экрана --- */

#game-view {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0; /* Убираем стандартные отступы для view */
}

#game-players-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Этот элемент просто контейнер, стили не нужны */
}

.player-slot {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px; /* Ширина блока игрока */
    transform: translate(-50%, -50%); /* Центрируем блок по его координатам */
}

.player-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--border-color); /* Серая обводка по умолчанию */
    background-color: var(--surface-color);
}

.player-avatar.active-turn {
    border-color: #34c759; /* Зеленая обводка для ходящего */
}

.card-front img {
    pointer-events: none;
}

/* style.css, добавьте в конец файла */

#game-table-left {
    position: absolute;
    top: 50%;
    left: 0; /* Прижимаем к левому краю */
    transform: translateY(-50%);
    z-index: 5;
}



/* --- Игровая зона в центре --- */
#play-area {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 30%;
    transform: translate(-50%, -60%); /* Смещаем чуть выше центра */
    border-radius: 20px;
    border: 3px dashed transparent; /* По умолчанию рамка прозрачная */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    z-index: 1;
}

/* Стиль для подсветки, когда игрок тащит карту */
#play-area.highlight {
    border-color: rgba(0, 123, 255, 0.5);
    background-color: rgba(0, 123, 255, 0.1);
}

/* --- Уведомление о неверном ходе --- */
#action-feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background-color: rgba(255, 59, 48, 0.85); /* Красный цвет ошибки */
    color: white;
    padding: 12px 25px;
    border-radius: 15px;
    font-size: 1.1em;
    font-weight: 600;
    z-index: 200;
    opacity: 0;
    pointer-events: none; /* Не мешает кликать сквозь него */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#action-feedback.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- Стиль для перетаскиваемой карты --- */
#my-hand-container .card.dragging {
    z-index: 200 !important; /* Важно, чтобы была поверх всех карт */
    transform: scale(1.1); /* Немного увеличиваем при перетаскивании */
    transition: none; /* Отключаем плавные переходы во время перетаскивания */
}

/* --- Стили для индикатора хода --- */
#turn-indicator {
    position: absolute;
    top: 10px; /* Отступ сверху */
    left: 50%;
    transform: translateX(-50%) translateY(-150%); /* Изначально скрыт за пределами экрана */
    background-color: rgba(52, 199, 89, 0.85); /* Полупрозрачный зеленый */
    color: var(--primary-text-color);
    padding: 10px 25px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 600;
    z-index: 15; /* Должен быть выше игроков, но ниже модальных окон */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px); /* Эффект размытия для современных браузеров */
    -webkit-backdrop-filter: blur(5px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Плавный "пружинящий" переход */
}

#turn-indicator.visible {
    transform: translateX(-50%) translateY(0); /* Появление в видимой зоне */
}

.player-avatar img {
    width: 100%;
    height: 100%;
}

.player-name {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-text-color);
    white-space: nowrap;
}

.player-cards-info {
    font-size: 12px;
    color: var(--secondary-text-color);
}

#game-table-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 40%;
    /* Просто для визуализации, можно убрать */
    /* border: 1px dashed var(--border-color); */
}




/* --- Позиции игроков --- */

/* Я (текущий игрок) */
.player-pos-bottom { top: 75%; left: 50%; }

/* 2 игрока */
.player-pos-top { top: 10%; left: 50%; }

/* 3 игрока */
.player-pos-top-left { top: 75%; left: 20%; }
.player-pos-top-right { top: 15%; left: 75%; }

/* 4 игрока */
.player-pos-left { top: 50%; left: 15%; }
.player-pos-right { top: 50%; left: 85%; }

/* 5 игроков (используем позиции от 3 и 4 игроков) */

/* 6 игроков */
.player-pos-bottom-left { top: 90%; left: 20%; } /* Позиция "меня" при 6 игроках */
.player-pos-bottom-right { top: 75%; left: 85%; }


#game-status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* Скрыт по умолчанию */
    justify-content: center;
    align-items: center;
    background-color: rgba(33, 40, 49, 0.8); /* Полупрозрачный фон */
    z-index: 10;
    color: var(--primary-text-color);
}

#game-status-overlay.visible {
    display: flex; /* Показываем, когда нужно */
}

/* --- Стили для карт и игрового стола --- */

#deck-and-trump {
    position: relative;
    width: 100px; /* Уменьшаем ширину контейнера для нового расположения */
    height: 125px;
}



/* --- Стили для отдельной карты --- */
/* --- Стили для отдельной карты --- */
/* style.css, строка ~575 */
.card {
    /* --- ИЗМЕНЕНИЕ: Возвращаем старые размеры --- */
    width: 90px;
    height: 125px;
    position: absolute;
    perspective: 1000px;
    background-color: transparent;
    transition: transform 0.5s ease, left 0.4s ease, top 0.4s ease;

    /* --- НАЧАЛО ИЗМЕНЕНИЙ: Запрещаем выделение карты как текста --- */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard */
    /* --- КОНЕЦ ИЗМЕНЕНИЙ --- */
}

#play-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Расстояние между парами карт */
}

.card-pair {
    position: relative;
    width: 90px;   /* Ширина одной карты */
    height: 125px; /* Высота одной карты */
}

/* Все карты внутри пары позиционируются абсолютно */
.card-pair .card {
    position: absolute;
    top: 0;
    left: 0;
}

/* Стиль для покрывающей карты */
.card-pair .defending-card {
    /* Сдвигаем карту вправо-вниз, чтобы не закрывать атакующую карту */
    transform: translate(35px, 15px) rotate(10deg);
    z-index: 2;
}


/* --- Стили для кнопок "Беру" и "Бито" --- */
#game-actions-container {
    position: absolute;
    bottom: 160px; /* Располагаем над рукой игрока */
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

.game-action-btn {
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.game-action-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Отдельные стили для каждой кнопки */
.btn-take {
    background-color: #ff9500; /* Оранжевый */
    color: white;
}

.btn-pass {
    background-color: var(--accent-color); /* Синий */
    color: white;
}

/* ДОБАВИТЬ в конец файла style.css */

/* Контейнер для атакующей карты, чтобы на него можно было "бросать" */
.attacking-card-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 8px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Подсветка, когда карта защиты проносится над атакующей картой */
.attacking-card-container.highlight-target {
    background-color: rgba(0, 123, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.7);
}

.btn-pass:disabled {
    background-color: #555;
    cursor: not-allowed;
    transform: none;
    filter: none;
    opacity: 0.7;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d; /* УБЕДИТЕСЬ, ЧТО ЭТА СТРОКА ЕСТЬ */
}

/* ДОБАВИТЬ ЭТИ СТИЛИ В КОНЕЦ ФАЙЛА style.css */

.win-amount-animation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    color: #34c759; /* Яркий зеленый */
    font-size: 4em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(52, 199, 89, 0.8),
                 0 0 20px rgba(52, 199, 89, 0.6);
    z-index: 500;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.win-amount-animation.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.winnings-text {
    color: #34c759 !important; /* !important для переопределения существующих стилей */
    font-weight: bold;
    font-size: 18px !important; /* Делаем шрифт больше, чем у имени */
}

/* Добавляем этот класс через JS, чтобы перевернуть карту */
.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Лицевая сторона карты с изображением */
.card-front {
    background-color: white;
}

.card-front img {
    width: 100%;
    height: 100%;
}

/* Рубашка карты (как вы и просили - в черно-красных тонах) */
.card-back {
    background: linear-gradient(135deg, #1a1a1a 25%, #c82828 100%);
    border: 3px solid #111;
    transform: rotateY(180deg); /* Изначально повернута "от нас" */
}

/* Позиционирование карт в руке игрока */


/* Козырная карта под колодой */
/* Располагаем козырь горизонтально и сдвигаем наполовину за экран */
#trump-card-container .card {
    transform: rotate(90deg) translateX(-62px); /* 62px - это примерно половина высоты карты */
    transform-origin: center;
}
/* Позиционируем колоду поверх видимой части козыря */
#deck-pile {
    position: absolute;
    top: 0;
    left: 5px; /* Небольшой отступ, чтобы колода не прилипала к краю */
}

/* Карты в колоде для анимации */
#deck-pile .card {
    /* Сдвигаем каждую карту на 1px, чтобы создать эффект стопки */
    transform: translateX(var(--card-offset, 0px)) translateY(var(--card-offset, 0px));
}

/* --- Стили для нового интерфейса текущего игрока --- */
/* --- Стили для нового интерфейса текущего игрока --- */
.my-player-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    /* --- ИЗМЕНЕНИЕ: Разворачиваем порядок элементов --- */
    flex-direction: column-reverse;
    align-items: center;
}



.my-player-info-block {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Убираем фон и паддинги, они больше не нужны */
    margin-bottom: 10px;
}

.my-player-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 12px;
}

#my-player-name {
    font-weight: 600;
    font-size: 16px;
}

#my-card-count {
    color: var(--secondary-text-color);
    font-size: 14px;
}

#my-player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
}

/* --- Стили для нового интерфейса текущего игрока --- */
.my-player-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column-reverse; /* Разворачиваем порядок: инфо-блок будет ниже карт */
    align-items: center;
    padding-bottom: 5px; /* Небольшой отступ снизу */
}



/* Позиционирование карт в руке, чтобы они накладывались друг на друга */


.my-player-info-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.my-player-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#my-player-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-text-color);
}

#my-card-count {
    color: var(--secondary-text-color);
    font-size: 14px;
}

#my-player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    background-color: var(--surface-color);
}

#my-hand-container {
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Карты будут "расти" из нижней части контейнера */
    padding: 0 20px;
    margin-bottom: 10px;
    position: relative; /* ВАЖНО: Это контейнер для абсолютно спозиционированных карт */
}

/* --- Стили для анимированной летящей карты --- */
.animated-card-back {
    /* Копируем размеры и скругление от основной карты */
    width: 90px;
    height: 125px;
    border-radius: 8px;

    /* Копируем стили рубашки из .card-back */
    background: linear-gradient(135deg, #1a1a1a 25%, #c82828 100%);
    border: 3px solid #111;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);

    /* Важно для позиционирования в JS */
    position: fixed;
    z-index: 200;

    transition: left 0.35s ease-out, top 0.35s ease-out;
}
.view-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    flex-shrink: 0; /* Предотвращает сжатие заголовка, если контент не помещается */
}

/* --- Стили для отдельной карты --- */
#my-hand-container .card {
    position: absolute; /* ВАЖНО: Позволяет управлять положением через transform */
    bottom: 0; /* Прижимаем карту к низу контейнера */
    transform-origin: bottom center; /* ВАЖНО: Задает точку вращения - нижний центр карты */
    transition: transform 0.2s ease-out; /* Плавный переход для hover-эффекта */
}

/* Эффект приподнимания карты при наведении */
#my-hand-container .card:hover {
    /* Поднимаем карту на 20px вверх и немного увеличиваем */
    transform: translateY(-20px) scale(1.05);
    z-index: 100; /* Показываем поверх других карт */
}

/* Если у карты уже есть transform от веера, hover должен его учитывать */
#my-hand-container .card.fanned:hover {
    /* JS устанавливает --fan-transform, мы его здесь используем и добавляем эффект */
    transform: var(--fan-transform) translateY(-20px) scale(1.05);
}


/* --- Общая шапка для экранов (Лобби, Создание игры) --- */
.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.view-header .view-title {
    margin: 0;
    font-size: 1.2em; /* Сделаем заголовок чуть крупнее */
}

/* --- Текстовая кнопка "Назад" в шапке --- */
.header-button-text {
    background-color: var(--surface-color);
    color: var(--primary-text-color);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* --- Круглая кнопка "+" в шапке --- */
.header-button {
    background-color: var(--surface-color);
    color: var(--primary-text-color);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

/* Модификатор для синего цвета, как у кнопки "Создать игру" */
.header-button--primary {
    background-color: var(--accent-color);
}

.header-button:hover, .header-button-text:hover {
    filter: brightness(1.2);
}

/* Пустой блок для выравнивания заголовка по центру, когда справа нет кнопки */
.header-placeholder {
    width: 80px; /* Примерная ширина кнопки "Назад" */
    visibility: hidden;
}

/* --- Корректируем футер экрана создания игры --- */
.create-game-footer {
    margin-top: auto; /* Прижимает кнопку к низу */
    padding-top: 15px;
    flex-shrink: 0;
}