/* Базовые стили, которые будут общими */
:root
{
    --background-color: white;
    --ui-background: #f8f9fa;
    --ui-background-rgb: 248, 249, 250;
    --text-color: #333333;
    --border-color: #dddddd;
    --grid-color: #cce6ff;
    --captured-dot-color: #888888;
    --tutorial-overlay-bg: rgba(0, 0, 0, 0.3);
    --tutorial-text-color: white;
    --tutorial-text-bg: rgba(80, 80, 80, 0.8);
}

/* Темная тема - общие переменные */
.dark
{
    --background-color: #181818;
    --ui-background: #222222;
    --ui-background-rgb: 34, 34, 34;
    --text-color: #eeeeee;
    --border-color: #444444;
    --grid-color: #1a3a5c;
    --captured-dot-color: #666666;
    --tutorial-overlay-bg: rgba(255, 255, 255, 0.2);
    --tutorial-text-color: #eeeeee;
    --tutorial-text-bg: rgba(20, 20, 20, 0.85);
}

/* Палитра 1 - Синий и красный (оригинальная) */
.palette-1.light
{
    --player-color: #3498db;
    --computer-color: #e74c3c;
    --player-area-fill: rgba(52, 152, 219, 0.5);
    --computer-area-fill: rgba(231, 76, 60, 0.5);
}

.palette-1.dark
{
    --player-color: #3498db;
    --computer-color: #e74c3c;
    --player-area-fill: rgba(52, 152, 219, 0.4);
    --computer-area-fill: rgba(231, 76, 60, 0.4);
}

/* Палитра 2 - Фиолетовый и дополнительные цвета */
.palette-2.light
{
    --player-color: #9b59b6;
    --computer-color: #2ecc71;
    --player-area-fill: rgba(155, 89, 182, 0.5);
    --computer-area-fill: rgba(46, 204, 113, 0.5);
    --grid-color: #e8daef;
}

.palette-2.dark
{
    --player-color: #9b59b6;
    --computer-color: #2ecc71;
    --player-area-fill: rgba(155, 89, 182, 0.4);
    --computer-area-fill: rgba(46, 204, 113, 0.4);
    --grid-color: #3d2952;
}

/* Палитра 3 - Оранжевый и черный */
.palette-3.light
{
    --player-color: #f39c12;
    --computer-color: #2c3e50;
    --player-area-fill: rgba(243, 156, 18, 0.5);
    --computer-area-fill: rgba(44, 62, 80, 0.5);
    --grid-color: #fef5e7;
}

.palette-3.dark
{
    --player-color: #f39c12;
    --computer-color: #eeeeee;
    --player-area-fill: rgba(243, 156, 18, 0.4);
    --computer-area-fill: rgba(255, 255, 255, 0.6);
    --grid-color: #5d4012;
}

/* Палитра 4 - Зеленый и дополнительные цвета */
.palette-4.light
{
    --player-color: #27ae60;
    --computer-color: #c0392b;
    --player-area-fill: rgba(39, 174, 96, 0.5);
    --computer-area-fill: rgba(192, 57, 43, 0.5);
    --grid-color: #d5f5e3;
}

.palette-4.dark
{
    --player-color: #27ae60;
    --computer-color: #c0392b;
    --player-area-fill: rgba(39, 174, 96, 0.4);
    --computer-area-fill: rgba(192, 57, 43, 0.4);
    --grid-color: #1c4d34;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    overscroll-behavior-y: contain;
    transition: background-color 0.3s ease;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html, body
{
    overscroll-behavior-y: contain;
}

#game-container
{
    background-color: var(--background-color);
    display: none;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    gap: 10px;
    overflow: hidden;
}

#info-panel
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    background-color: var(--ui-background);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    flex-shrink: 0;
    position: relative; /* Для z-index */
    z-index: 5; /* Чтобы быть над canvas, но под оверлеем */
}

.score-box
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 15px;
    border-radius: 5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.score-box.active
{
    transform: scale(1.05);
    font-weight: bold;
    box-shadow: 0 0 8px rgba(100, 100, 255, 0.5);
}

.dark .score-box.active
{
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.6);
}


.player-indicator
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-bottom: 5px;
}

#player-indicator
{
    background-color: var(--player-color);
}

#computer-indicator
{
    background-color: var(--computer-color);
}

#turn-indicator
{
    font-weight: bold;
    margin: 0 10px;
    text-align: center;
}

#canvas-container
{
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-color);
    transition: border-color 0.3s ease;
}

#game-canvas
{
    display: block;
    cursor: pointer;
    background-color: transparent;
    user-focus: false;
    user-select: none;
}

.nav-button
{
    position: absolute;
    background-color: var(--ui-background);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s, background-color 0.3s, box-shadow 0.2s ease;
    z-index: 10; /* Над canvas */
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.nav-button:hover
{
    opacity: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 600px), (max-height: 600px)
{
    .nav-button
    {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
}

#nav-up
{
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

#nav-down
{
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

#nav-left
{
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

#nav-right
{
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

#game-message
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(var(--ui-background-rgb, 248, 249, 250), 0.9);
    color: var(--text-color);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    display: none;
    z-index: 100; /* Выше оверлея обучения */
    transition: background-color 0.3s ease;
    border: 1px solid var(--border-color);
}

.dark #game-message
{
    background-color: rgba(var(--ui-background-rgb, 34, 34, 34), 0.9);
}

:root
{
    --ui-background-rgb: 248, 249, 250;
}

.dark
{
    --ui-background-rgb: 34, 34, 34;
}

#restart-button
{
    margin-top: 15px;
    padding: 10px 20px;
    background-color: var(--player-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.1s ease;
}

#restart-button:hover
{
    background-color: #2980b9;
    transform: scale(1.03);
}

#restart-button:active
{
    transform: scale(0.98);
}

/* --- Стили для режима обучения --- */
#tutorial-overlay
{
    position: fixed; /* Поверх всего */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--tutorial-overlay-bg);
    z-index: 90; /* Высокий z-index, но ниже сообщения об окончании игры */
    display: none; /* Скрыт по умолчанию */
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Перехватывает все клики */
}

#tutorial-prompt
{
    position: absolute; /* Позиционируется JS */
    padding: 15px 20px;
    background-color: var(--tutorial-text-bg);
    color: var(--tutorial-text-color);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    text-align: center;
    font-size: 1.1em;
    max-width: 80%;
    pointer-events: none; /* Сам текст не перехватывает клики */
    transition: top 0.3s ease-out, left 0.3s ease-out; /* Плавное перемещение */
}

#tutorial-prompt span
{ /* Для эмодзи */
    display: inline-block;
    margin: 0 10px;
    font-size: 1.8em;
    vertical-align: middle;
    transform-origin: center bottom;
    /* Анимация для привлечения внимания */
    animation: bounce 1.5s infinite ease-in-out;
}

@keyframes bounce
{
    0%, 100%
    {
        transform: translateY(0);
    }
    50%
    {
        transform: translateY(-8px);
    }
}


@media (max-width: 600px)
{
    #info-panel
    {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        padding: 8px;
    }

    .score-box
    {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 8px 12px;
    }

    .score-box div:last-child
    {
        margin-left: 10px;
    }

    .player-indicator
    {
        margin-bottom: 0;
        margin-right: 10px;
    }

    #turn-indicator
    {
        margin: 5px 0;
    }

    #tutorial-prompt
    {
        font-size: 1em;
        padding: 10px 15px;
    }

    #tutorial-prompt span
    {
        font-size: 1.5em;
    }
}

.shake
{
    animation: shake 0.3s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake
{
    10%, 90%
    {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80%
    {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70%
    {
        transform: translate3d(-3px, 0, 0);
    }
    40%, 60%
    {
        transform: translate3d(3px, 0, 0);
    }
}

td.main-cell
{
    width: calc(100% - 9vh)
}

td.home-cell
{
    width: 9vh;
    text-align: center;
    font-size: 4vh;
}

/* Главный экран */

/* Основной контейнер */
.main-game-container
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; /* Используем 100vh для полной высоты вьюпорта */
    margin: 0;
    padding: 0;
    background-repeat: repeat;
    overflow: hidden; /* Скрываем контент, выходящий за пределы */
}

.light-container
{
    background-image: url("images/background-light.png");
}

.dark-container
{
    background-image: url("images/background-dark.png");
}

/* Элемент для логотипа */
div.logo
{
    position: absolute;
    top: 6vh;
    left: 50%;
    transform: translateX(-50%); /* Горизонтальное центрирование */
    height: 20vh;
    aspect-ratio: 390 / 278; /* Соотношение сторон 390x278 */
    background-size: contain; /* Масштабировать изображение, чтобы оно поместилось */
    background-repeat: no-repeat;
    background-position: center;
}

div.ru
{
    background-image: url("images/logo_ru.png");
}

div.en
{
    background-image: url("images/logo_en.png");
}

/* Блок с ромбом на 40% */
.rombus-info-block
{
    position: absolute;
    top: 30vh;
    left: 50%;
    transform: translateX(-50%); /* Горизонтальное центрирование */
    display: flex; /* Используем flex для выравнивания ромба и текста */
    align-items: center; /* Вертикальное выравнивание по центру */
    gap: 0.5vh; /* Небольшой отступ между ромбом и текстом */
}

/* Общий стиль для ромба */
.rombus
{
    width: 3.5vh;
    height: 3.5vh;
    background-image: url("images/rombus.png");
    background-size: contain; /* Точно вписать изображение */
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0; /* Запрещаем ромбу сжиматься */
}

/* Текст рядом с ромбом на 40% */
.rombus-info-block span
{
    font-size: 3.8vh;
    line-height: 1;
    padding-left: 1vh;
}

span.light-points
{
    color: #5e5e5e;
}

span.dark-points
{
    color: #c5c4c4;
}

/* Общий стиль для кнопок/блоков */
.content-block
{
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Горизонтальное центрирование */
    /* Ширина: минимум из 30vh или (ширина окна - 10vh отступов) */
    width: min(40vh, calc(100vw - 10vh));
    height: 8vh;
    border-radius: 2vh; /* Сглаженные края */
    display: flex;
    align-items: center; /* Вертикальное центрирование контента */
    padding: 0 1.5vh; /* Внутренние отступы по бокам */
    box-sizing: border-box; /* Учитывать padding в ширине/высоте */
}

/* Зеленая кнопка "Новый раунд" */
.new-round-button
{
    top: 37vh;
    background-color: #40a409;
    justify-content: center; /* Горизонтальное центрирование текста */
    color: white;
    font-size: 3vh; /* Размер шрифта в vh */
    font-weight: bold;
    cursor: pointer;
}

/* Блоки опций (общие стили) */
.option-block
{
    /* Стили наследуются от .content-block (position, transform, width, height, border-radius, display, align-items, padding, box-sizing) */
    background-color: #5997df80; /* Легкий фон для видимости блока, если нужно */
}

/* Расположение блоков опций */
.option-block.option-1
{
    top: 49vh;
}

.option-block.option-2
{
    top: 58vh;
}

.option-block.option-3
{
    top: 67vh;
}

.option-block.option-4
{
    top: 76vh;
}

/* Кружок слева */
.circle
{
    width: 4vh; /* Чуть больше для наглядности */
    height: 4vh;
    border: 0.4vh solid #40a409; /* Зеленый ободок */
    border-radius: 50%; /* Делаем круглым */
    margin-right: 1.5vh; /* Отступ справа от кружка */
    flex-shrink: 0; /* Запрещаем сжиматься */
}

/* Цвета для кружков */
.circle.color-1
{
    background-color: #3498db;
}

.circle.color-2
{
    background-color: #dd6afb;
}

.circle.color-3
{
    background-color: #f38815;
}

.circle.color-4
{
    background-color: #8af418;
}

/* Текст значения (0, 20, 80, 160) */
.option-value
{
    font-size: 3vh;
    margin-right: auto;
    padding-right: 1vh;
    flex-shrink: 0;
}

span.light-value
{
    color: #3a3a3a;
}

span.dark-value
{
    color: #d1cfcf;
}

/* Ромб внутри блока опций */
.option-block .rombus
{
    /* Стили размера и фона наследуются */
    margin-right: 1.5vh; /* Отступ справа от ромба */
}

/* Кнопка "Использовать" или контейнер для замка */
.option-action, .option-lock-container
{
    height: 6vh; /* Чуть меньше родителя для визуального отступа */
    padding: 0 1.5vh;
    border-radius: 1.5vh; /* Свой радиус, чуть меньше родительского */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2vh; /* Размер шрифта в vh */
    font-weight: bold;
    text-align: center;
    flex-shrink: 0; /* Запрещаем сжиматься */
    width: 18vh;
}

/* Состояния кнопки "Использовать" */
.option-action.selected
{
    background-color: #446781; /* Серый фон */
}

.option-action.unselected
{
    background-color: #3fa508; /* Зеленый фон */
    cursor: pointer;
}

/* Контейнер и иконка замка */
.option-lock-container
{
    /* Центрирование уже задано flex в .option-action */
    background-color: transparent; /* Без фона */
    padding: 0; /* Убираем паддинг, если не нужен */
    width: 18vh;
}

.lock-icon
{
    aspect-ratio: 1;
    height: 3vh;
    background-image: url("images/lock.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Стили для выбора языка --- */
.language-selector-container
{
    position: absolute; /* Позиционирование относительно .main-game-container */
    top: 2vh; /* Отступ сверху */
    right: 2vh; /* Отступ справа */
    z-index: 100; /* Убедимся, что он поверх других элементов */
}

.language-button
{
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный темный фон */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1vh;
    padding: 1vh 1.5vh;
    font-size: 2vh;
    cursor: pointer;
    outline: none; /* Убираем стандартный контур при фокусе */
    min-width: 15vh; /* Минимальная ширина для читаемости */
    justify-content: space-between; /* Текст слева, стрелка справа */
}

.language-button .arrow-down
{
    margin-left: 1vh;
    font-size: 1.5vh; /* Чуть меньше основного текста */
    line-height: 1; /* Для выравнивания */
    transition: transform 0.2s ease-in-out; /* Анимация стрелки */
}

/* Поворот стрелки при открытом списке */
.language-selector-container.active .language-button .arrow-down
{
    transform: rotate(180deg);
}

.language-list
{
    position: absolute;
    top: calc(100% + 0.5vh); /* Появляется под кнопкой с небольшим отступом */
    right: 0; /* Выравнивание по правому краю кнопки */
    background-color: rgba(0, 0, 0, 0.8); /* Более темный фон для списка */
    border-radius: 1vh;
    list-style: none; /* Убираем маркеры списка */
    padding: 0.5vh 0;
    margin: 0;
    min-width: 100%; /* Минимальная ширина как у кнопки */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: none; /* По умолчанию список скрыт */
    z-index: 101; /* Выше кнопки */
}

/* Показываем список, когда у контейнера есть класс 'active' */
.language-selector-container.active .language-list
{
    display: block;
}

.language-list li
{
    color: white;
    padding: 1vh 1.5vh;
    font-size: 2vh;
    cursor: pointer;
    white-space: nowrap; /* Запрещаем перенос текста */
}

.language-list li:hover
{
    background-color: rgba(255, 255, 255, 0.2); /* Подсветка при наведении */
}

.theme-selector-container {
    position: absolute; /* Позиционирование относительно .main-game-container */
    top: 2vh; /* Отступ сверху */
    left: 2vh; /* Отступ слева */
    z-index: 100; /* Убедимся, что он поверх других элементов */
}

.theme-button {
    display: flex;
    align-items: center;
    border: 1px solid rgba(128, 128, 128, 0.5); /* Серый полупрозрачный бордер */
    border-radius: 1vh;
    padding: 1vh 1.5vh;
    font-size: 2.5vh; /* Размер для эмодзи */
    cursor: pointer;
    outline: none; /* Убираем стандартный контур при фокусе */
    min-width: 10vh; /* Минимальная ширина */
    justify-content: space-between; /* Иконка слева, стрелка справа */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход цвета */
}

/* Стили для кнопки в зависимости от темы */
.theme-button.theme-button-light {
    background-color: rgba(255, 255, 255, 0.8); /* Белый полупрозрачный фон */
    color: #333; /* Темный текст/эмодзи */
}

.theme-button.theme-button-dark {
    background-color: rgba(0, 0, 0, 0.7); /* Темный полупрозрачный фон */
    color: white; /* Белый текст/эмодзи */
}


.theme-button .arrow-down {
    margin-left: 1vh;
    font-size: 1.5vh;
    line-height: 1;
    transition: transform 0.2s ease-in-out;
}

/* Поворот стрелки при открытом списке */
.theme-selector-container.active .theme-button .arrow-down {
    transform: rotate(180deg);
}

.theme-list {
    position: absolute;
    top: calc(100% + 0.5vh); /* Появляется под кнопкой с небольшим отступом */
    left: 0; /* Выравнивание по левому краю кнопки */
    background-color: rgba(50, 50, 50, 0.9); /* Фон списка */
    border-radius: 1vh;
    list-style: none;
    padding: 0.5vh 0;
    margin: 0;
    min-width: 100%; /* Минимальная ширина как у кнопки */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: none; /* По умолчанию список скрыт */
    z-index: 101; /* Выше кнопки */
}

/* Показываем список, когда у контейнера есть класс 'active' */
.theme-selector-container.active .theme-list {
    display: block;
}

.theme-list li {
    padding: 1vh 1.5vh;
    font-size: 2.5vh; /* Размер для эмодзи */
    cursor: pointer;
    text-align: center; /* Центрируем эмодзи */
    transition: background-color 0.2s ease;
}

/* Стили для элементов списка тем */
.theme-list li[data-theme="light"] {
    background-color: white;
    color: black; /* Черное солнце на белом фоне */
}

.theme-list li[data-theme="dark"] {
    background-color: black;
    color: white; /* Белая луна на черном фоне */
}


.theme-list li:hover {
    filter: brightness(0.8); /* Немного затемняем при наведении */
}