/* --- 1. ОПРЕДЕЛЕНИЕ ЦВЕТОВЫХ ТЕМ --- */
/* Тема по умолчанию (Оранжевая) */
@font-face {
    font-family: 'Roboto'; /* Мы будем использовать это имя в JavaScript */
    src: url('fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-display: swap; /* Улучшает производительность загрузки */
}
:root{
    --container_size: 300px;
}

html, body {
    overscroll-behavior: none; /* Предотвращает "оттягивание" страницы */
    overflow: hidden;
}

body {
    text-align: center; background: black; margin: 0; padding: 0;
    display: flex; justify-content: center; align-items: center; font-family: 'Roboto';
    color: white; user-select: none; -webkit-user-select: none; -moz-user-select: none;
    -ms-user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden;
}

body[data-theme="orange"] {
    --accent-color: orange;
    --text-color-on-accent: black;
    --secondary-button-bg: #555;
    --secondary-button-hover-bg: #777;
    --menu-hover-bg: rgba(255, 165, 0, 0.2);
}
/* Голубая тема */
body[data-theme="blue"] {
    --accent-color: #00aaff;
    --text-color-on-accent: white;
    --secondary-button-bg: #444;
    --secondary-button-hover-bg: #666;
    --menu-hover-bg: rgba(0, 170, 255, 0.2);
}
/* Красная тема */
body[data-theme="red"] {
    --accent-color: #ff4136;
    --text-color-on-accent: white;
    --secondary-button-bg: #444;
    --secondary-button-hover-bg: #666;
    --menu-hover-bg: rgba(255, 65, 54, 0.2);
}
/* Белая тема */
body[data-theme="white"] {
    --accent-color: #ffffff;
    --text-color-on-accent: black;
    --secondary-button-bg: #555;
    --secondary-button-hover-bg: #777;
    --menu-hover-bg: rgba(255, 255, 255, 0.2);
}

body.demo-active .top-left-icons,
body.demo-active .top-right-controls {
    opacity: 0;
    pointer-events: none; /* Блокируем клики по невидимым элементам */
    transition: opacity 0.3s ease-in-out;
}

/* --- 2. ИСПОЛЬЗОВАНИЕ ПЕРЕМЕННЫХ В СТИЛЯХ --- */
/* Все стили, которые зависят от цвета, теперь используют var(--accent-color) и т.д. */

body {
    text-align: center; background: black; margin: 0; padding: 0; height: 100vh;
    display: flex; justify-content: center; align-items: center; font-family: 'Roboto';
    color: white; user-select: none; -webkit-user-select: none; -moz-user-select: none;
    -ms-user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; 
}
.bigcontainer{
    position: fixed;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
/* Бейдж PRO режима */
.pro-tag {
    display: none; /* Скрыт по умолчанию */
    background-color: #ff4136; /* Насыщенный красный */
    color: white;
    font-size: 10px;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 3px;
    margin-bottom: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 5px rgba(255, 65, 54, 0.4);
}

/* Показываем индикатор только когда на body есть класс pro-mode */
body.pro-mode .pro-tag {
    display: inline-block;
}

/* Легкая пульсация яркости, чтобы индикатор был "живым" */
body.pro-mode .pro-tag {
    animation: pro-soft-blink 2s infinite ease-in-out;
}

@keyframes pro-soft-blink {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.8; filter: brightness(1.2); }
}

* {
    /* Отключаем выделение для ВСЕХ элементов по умолчанию */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Отключаем перетаскивание (drag) */
    -webkit-user-drag: none;
    
    /* ВАЖНО для iOS: Отключаем лупу и меню при долгом нажатии */
    -webkit-touch-callout: none; 
    
    /* Убираем синюю подсветку при клике на мобильных (tap highlight) */
    -webkit-tap-highlight-color: transparent;
}

/* Возвращаем возможность выделения текста только там, где это может быть нужно (опционально) */
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

a { color: white; }
/* --- Стили для игрового контейнера и холстов --- */

#gameContainer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Убираем JS-управление размерами, теперь это делает CSS */
    width: 100%;
    height: 100%;
    z-index: 0;
}

#gameCanvas, #pauseCanvas {
    position: absolute;
/*    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

#pauseCanvas {
    z-index: 100;
    pointer-events: none;
}

#languageOverlay #languageToggleContainer{
    justify-content: center;
}

/* Находим блок с languageToggle и обновляем его */
#languageToggle.three-pos .toggle-slider {
    width: calc(33.33% - 4px);
}

#languageToggle[data-current-lang="en"] .toggle-slider {
    transform: translateX(calc(100% + 2px));
}

#languageToggle[data-current-lang="es"] .toggle-slider {
    transform: translateX(calc(200% + 4px));
}

.clock { background-image: url(Images/Circle-icons-hourglass.svg); background-size: cover; width: 50px; height: 50px; display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; margin: 0; }

.sound-notice {
    display: block;
    text-align: center;
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.05); /* Очень легкая подложка */
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    padding: 12px;
    margin: 15px 0 25px 0;
    font-size: 0.9em;
    line-height: 1.4;
}

.top-left-icons { position: fixed; top: 15px; left: 15px; z-index: 101; display: flex; align-items: center; }
.top-right-icons{
    display: flex;
}
.icon-button { width: 35px; height: 35px; background-color: rgba(255, 255, 255, 0.1); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; margin-left: 10px; }
.icon-button:hover { background-color: rgba(255, 255, 255, 0.2); }

.icon-button img {
    width: 22px; /* Подберите идеальный размер */
    height: 22px;
}

.burger-menu { width: 35px; height: 30px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.burger-menu div { width: 100%; height: 5px; background-color: white; border-radius: 2px; transition: all 0.3s ease-in-out; }
.burger-menu.open div:nth-child(1) { transform: translateY(12.5px) rotate(45deg); }
.burger-menu.open div:nth-child(2) { opacity: 0; }
.burger-menu.open div:nth-child(3) { transform: translateY(-12.5px) rotate(-45deg); }

/* Палитра */
.color-palette {
    display: flex;
    align-items: center;
    margin-left: 15px;
    gap: 8px;
    position: absolute;
    right: 10px;
    top: 20px;
}
.color-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
.color-swatch.active { border-color: white; transform: scale(1.2); }
.color-swatch:hover { transform: scale(1.1); }

.side-menu { position: fixed; top: 0; left: 0; width: 350px; height: 100%; background-color: rgba(20, 20, 20, 0.95); padding-top: 55px; transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: 100; box-shadow: 3px 0 10px rgba(0,0,0,0.5); overflow-y: hidden; color: white; display: flex; flex-direction: column;}
.side-menu .custom-scroll-container {
    flex-grow: 1;
    min-height: 0;
}

.side-menu .scroll-content {
    position: relative; 
    top: auto;
    left: auto;
    padding: 0;
}

#menuCategories .scroll-content {
    padding-bottom: 25px;
}

.side-menu.open { transform: translateX(0); }
.menu-item { padding: 15px 25px; font-size: 1.2em; cursor: pointer; display: block; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background-color 0.2s; }
.menu-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.menu-item:hover { background-color: var(--menu-hover-bg); }
.menu-item-control:not(.sound-control) { padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; flex-wrap: wrap; }
.menu-item-control.sound-control{
    display: flex;
    align-items: center;
    padding: 15px;
}
.menu-item-toggle { display: flex; align-items: center; justify-content: space-between; row-gap: 5px}

.menu-item-toggle:has(#safeSoundToggle) {
    justify-content: unset;    
}
.toggle-label { font-size: 1.1em; margin-right: 10px; flex-shrink: 0; }
.toggle-switch { position: relative; display: flex; background-color: #444; border-radius: 15px; padding: 2px; cursor: pointer; width: 130px; height: 28px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
.toggle-option { flex: 1; text-align: center; font-size: 0.9em; line-height: 24px; color: #ccc; z-index: 1; transition: color 0.3s ease-in-out; user-select: none; }
.toggle-option.active { color: var(--text-color-on-accent); font-weight: bold; }
.toggle-slider { position: absolute; top: 2px; left: 2px; width: calc(50% - 2px); height: calc(100% - 4px); background-color: var(--accent-color); border-radius: 13px; transition: transform 0.3s ease-in-out; box-shadow: 0 0 5px var(--accent-color); }
.toggle-switch[data-current-mode="zen"] .toggle-slider { transform: translateX(calc(100% - 0px)); }
#languageToggle .toggle-slider { transition: transform 0.3s ease-in-out; }
#languageToggle[data-current-lang="en"] .toggle-slider { transform: translateX(calc(100% - 0px)); }

.toggle-switch.three-pos { width: 180px; }
.toggle-switch.three-pos .toggle-option { flex-basis: 33.33%; }
.toggle-switch.three-pos .toggle-slider { width: calc(33.33% - 4px); }
.toggle-switch.three-pos[data-current-level="medium"] .toggle-slider { transform: translateX(calc(100% + 2px)); }
.toggle-switch.three-pos[data-current-level="hard"] .toggle-slider { transform: translateX(calc(200% + 4px)); }

.toggle-group {
    display: flex;
    gap: 10px; /* Расстояние между тумблерами */
    justify-content: space-between;
    width: 100%;
}

/* --- Логика слайдера для нового тумблера --- */
#gameStyleToggle[data-current-style="classic"] .toggle-slider {
    transform: translateX(calc(100% - 0px));
}

#gameModeToggle.three-pos .toggle-slider {
    width: calc(33.33% - 4px);
}

/* Логика перемещения для каждого режима */
#gameModeToggle[data-current-mode="timer"] .toggle-slider { transform: translateX(0); }
#gameModeToggle[data-current-mode="zen"] .toggle-slider { transform: translateX(calc(100% + 2px)); }
#gameModeToggle[data-current-mode="pro"] .toggle-slider { transform: translateX(calc(200% + 4px)); }

.volume-label { font-size: 1.1em; flex-shrink: 0; }
#volumeSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 24px; /* Увеличили высоту для наглядности треугольника */
    background: #333; /* Фоновый цвет (пустая часть) */
    outline: none;
    cursor: pointer;
    /* ГЛАВНОЕ: Рисуем треугольник */
    clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
    position: relative;
    /* Плавный переход цвета заполнения (обновляется из JS) */
    --fill-percent: 50%; 
    background: linear-gradient(to right, var(--accent-color) var(--fill-percent), #333 var(--fill-percent));
}

.volume-status-icon {
    width: 24px;
    height: 24px;
    background-color: var(--accent-color);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    flex-shrink: 0;
    transition: mask-image 0.2s; /* Плавная смена иконки */
}

/* Состояние: Звук включен (Volume > 0) */
.volume-status-icon.sound-on {
    mask-image: url('Images/volume-on.svg');
    -webkit-mask-image: url('Images/volume-on.svg');
}

/* Состояние: Без звука (Volume = 0) */
.volume-status-icon.sound-mute {
    mask-image: url('Images/volume-mute.svg');
    -webkit-mask-image: url('Images/volume-mute.svg');
}

.volume-status-icon:hover {
    filter: brightness(1.3);
    transform: scale(1.1);
}
.volume-status-icon:active {
    transform: scale(0.95);
}

/* Стили ползунка (Thumb) — сделаем его тонкой вертикальной линией */
#volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 30px;
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    cursor: pointer;
}

#volumeSlider::-moz-range-thumb {
    width: 4px;
    height: 30px;
    background: white;
    border: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    cursor: pointer;
}
.volume-value { font-size: 1.1em; min-width: 30px; text-align: right; flex-shrink: 0; }

.overlay-base { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 110; display: none; justify-content: center; align-items: center; color: white; padding: 20px; box-sizing: border-box; }
.overlay-content-base { background-color: rgba(30, 30, 30, 0.95); padding: 30px 40px; border-radius: 15px; border: 1px solid var(--accent-color); box-shadow: 0 0 20px var(--accent-color); max-width: 600px; width: 90%; text-align: center; }
.overlay-content-base h2 { margin-top: 0; color: var(--accent-color); }
.overlay-content-base p { line-height: 1.6; margin-bottom: 15px; }
.overlay-content-base .difficulty-display {
    font-size: 0.8rem; /* Чуть меньше основного текста */
    color: rgba(255, 255, 255, 0.7); /* Сделаем его менее ярким */
    margin-top: -10px; /* Придвинем поближе к заголовку */
    margin-bottom: 25px;
    font-weight: bold;
    text-transform: uppercase; /* ЗАГЛАВНЫЕ БУКВЫ для стиля */
}
.overlay-button-base { padding: 12px 25px; font-size: 1.1em; background-color: var(--accent-color); color: var(--text-color-on-accent); border: none; border-radius: 8px; cursor: pointer; margin-top: 20px; transition: background-color 0.3s, transform 0.1s; }
.overlay-button-base:hover { filter: brightness(1.2); }
.overlay-button-base:active { transform: scale(0.98); }

.menu-categories { padding: 15px 25px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); max-height: 20vh; overflow-y: auto; padding-right: 15px; }
.categories-title { margin: 0 0 10px 0; font-size: 1.1em; font-weight: bold; color: var(--accent-color); text-align: left; }
.category-item { display: flex; align-items: center; margin-bottom: 8px; }
.category-item:last-child { margin-bottom: 0; }
.category-item input[type="checkbox"] { display: none; }
.category-item label { display: flex; align-items: center; cursor: pointer; flex-grow: 1; font-size: 1em; }
.category-item .checkbox-visual { width: 20px; height: 20px; border: 2px solid #888; border-radius: 4px; margin-right: 12px; display: inline-block; position: relative; transition: all 0.2s; flex-shrink: 0; }
.category-item .checkbox-visual::after { content: ''; position: absolute; display: none; left: 6px; top: 2px; width: 6px; height: 10px; border: solid var(--text-color-on-accent); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.category-item input[type="checkbox"]:checked + label .checkbox-visual { background-color: var(--accent-color); border-color: var(--accent-color); }
.category-item input[type="checkbox"]:checked + label .checkbox-visual::after { display: block; }

.confirm-dialog-content { max-width: 400px; }
.confirm-buttons { display: flex; justify-content: center; gap: 20px; margin-top: 25px; }
.overlay-button-base.secondary { background-color: var(--secondary-button-bg); color: white; }
.overlay-button-base.secondary:hover { background-color: var(--secondary-button-hover-bg); }
.info-dialog-content { text-align: left; max-height: 80vh; overflow-y: auto; }
.info-text-block { margin-bottom: 15px; }
.info-dialog-content hr { border: none; height: 1px; background-color: rgba(255, 255, 255, 0.2); margin: 20px 0; }

.top-right-controls { position: fixed; top: 15px; right: 15px; display: flex; align-items: flex-start; z-index: 50; }
.timer-display { background-color: rgba(0, 0, 0, 0.6); color: white; padding: 8px 15px; border-radius: 5px; font-family: 'Roboto'; min-width: 130px; text-align: center; display: flex; flex-direction: column; align-items: center; margin-left: 10px; }
#timeValue { font-size: 1.1em; display: block; }
#roundValue { font-size: 0.9em; margin-top: 2px; display: block; }

.toggle-switch.single-toggle {
    width: 80px;
}
.toggle-switch.single-toggle .toggle-slider {
    transition: transform 0.3s ease-in-out;
}
.toggle-switch.single-toggle[data-current-state="off"] .toggle-slider {
    /* Сдвигаем влево, когда выключено */
    transform: translateX(0%);
    background-color: #555; /* Серый цвет для неактивного состояния */
    box-shadow: none;
}
.toggle-switch.single-toggle[data-current-state="on"] .toggle-slider {
    /* Сдвигаем вправо, когда включено (по умолчанию) */
    transform: translateX(calc(100% - 0px));
}

/* --- НОВЫЙ СТИЛЬ: Кнопка подсказки --- */
#hintOption {
    /* Дополнительные стили, если нужны */
}

/* --- Стили для подсказки --- */
#hintPointer {
    transition: top 0.8s ease-in-out, left 0.8s ease-in-out;
    transform: scale(1);
}

.hint-press {
    animation: pressAnimation 0.4s ease-in-out; /* Длительность анимации 0.4 секунды */
}

.finger{
    position: absolute;
    width: calc(var(--container_size)*0.7);
    right: calc(var(--container_size)*-0.5);
    top: 0;
    margin: 0 auto;
    z-index: 4;
    transform: rotate(15deg);    
}

.finger img{
    width: inherit;
    transform: scale(-1, 1) rotate(45deg);
}

.top-right-controls {
    position: fixed;
    top: 15px;
    right: 15px;
    display: flex; /* <-- Важно для выравнивания */
    align-items: center; /* <-- Важно для выравнивания */
    z-index: 50;
}
.timer-display {
    /* ... (стили таймера без изменений) ... */
    margin-left: 0; /* Убираем лишний отступ */
}

/* НОВЫЙ СТИЛЬ: для отключенной иконки */
.icon-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: rgba(100, 100, 100, 0.2);
}
/* --- Стили для иконок Play/Pause --- */
#pauseResumeButton {
    /* Чтобы иконки были внутри */
    display: flex;
    justify-content: center;
    align-items: center;
}

.pause-icon {
    width: 14px; /* Ширина двух полосок вместе */
    height: 16px;
    display: flex;
    justify-content: space-between; /* Расстояние между полосками */
}
.pause-icon::before, .pause-icon::after {
    content: '';
    display: block;
    width: 4px; /* Ширина одной полоски */
    height: 16px;
    background-color: white;
}

.play-icon {
    /* CSS-треугольник */
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 16px solid white;
    margin-left: 5px; /* Небольшой сдвиг для центровки */
}

.inline-icon {
    height: 1.1em;         /* Размер чуть больше высоты шрифта */
    vertical-align: middle; /* Центрирование по вертикали относительно букв */
    margin: 0 4px;         /* Отступы по бокам */
    display: inline-block;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.5)); /* Чтобы иконка не терялась */

    /* ВАЖНО: убеждаемся, что иконка не пытается быть "умной" */
    pointer-events: none; 
    transform: none !important; 
    will-change: auto !important;
}

/* --- Логика переключения иконок --- */
/* По умолчанию показываем иконку паузы */
#pauseResumeButton .play-icon {
    display: none;
}
#pauseResumeButton .pause-icon {
    display: flex;
}

/* Когда игра на паузе (добавляем класс .paused) */
#pauseResumeButton.paused .play-icon {
    display: block;
}
#pauseResumeButton.paused .pause-icon {
    display: none;
}

.lock-indicator, .challenge-badge {
    /* font-size и color больше не нужны, но остальные стили важны */

    display: flex;
    align-items: center;
    justify-content: center;
    
    /* ... анимации ... */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
}

.challenge-badge {
    color: #fc0;
    margin-left: -10px;
    display: none;      
}
/* Стили для самого SVG-изображения внутри блока */
.lock-indicator img, .challenge-badge img {
    width: 24px;  /* Задаем нужный размер */
    height: 24px;
}

.challenge-badge.visible {
    display: flex;
}
/* Класс, который будет делать иконку видимой */
.lock-indicator.visible, .challenge-badge.visible {
    opacity: 1;
    transform: scale(1);
}

/* Делаем сам лейбл flex-контейнером, чтобы чекбокс и текст выровнялись */
.category-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-grow: 1;
    font-size: 1em;
}

.rules-content {
    /* Ограничиваем максимальную высоту, чтобы оставить место для баннеров */
    max-height: 85vh; 
    
    /* Превращаем в flex-контейнер, чтобы управлять дочерними элементами */
    display: flex;
    flex-direction: column;

    /* Убираем вертикальный padding, так как он теперь будет у scroll-content */
    padding: 0px;
}

[data-lang^="rulesLine"] {
    /* Стили применятся к rulesLine1, rulesLine2, rulesLine10 и т.д. */
    text-align: left;
}

#closeRulesButton{
    margin: 20px;
}

.rules-content .custom-scroll-container {
    /* Заставляем контейнер скролла занять все доступное место по высоте */
    flex-grow: 1;
    /* Это критически важное свойство для flex-детей с overflow */
    min-height: 0; 
}

/* Возвращаем горизонтальный padding, который был у родителя */
.rules-content .scroll-content {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px; /* Небольшой отступ сверху */
    position: relative; /* Убираем absolute, чтобы он просто скроллился */
    top: auto;
    left: auto;

    /* 1. Заставляем браузер рисовать весь блок в один слой раз и навсегда */
    contain: paint; 
    
    /* 2. Изолируем смешивание цветов, чтобы иконки не "пробивали" фон */
    isolation: isolate; 

    /* 3. Убираем субпиксельное сглаживание шрифтов, которое часто тянет за собой иконки */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* 4. Принудительно плоский рендеринг */
    transform-style: flat; 
    
    /* Стабилизация для Chrome */
    backface-visibility: hidden;
}

/* --- Стили для иконок категорий (CSS-only метод) --- */

/* 1. Добавляем padding, чтобы освободить место для иконки */
#sideMenu .category-item {
    position: relative;
    padding-right: 2.2em; 
}

/* 2. Базовый стиль для псевдо-элемента.
   Он будет пустым, пока не сработает одно из правил ниже. */
#sideMenu .category-item::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
    width: 1.2em;
    height: 1.2em;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

/* 3. Делаем иконку ярче при наведении на родителя */
.category-item:hover::after {
    opacity: 1;
}

/* 4. ГЛАВНАЯ МАГИЯ: Используем :has() для выбора нужной иконки */
/* Для каждого селектора мы говорим: "Если у .category-item есть дочерний input с таким-то id..." */

.category-item:has(> #cat-Animals)::after {
    background-color: var(--accent-color);
    mask-image: url('Images/panda-face.svg');
    -webkit-mask-image: url('Images/panda-face.svg');
}

.category-item:has(> #cat-Computer_Sci-Fi)::after {
    background-color: var(--accent-color);
    mask-image: url('Images/brand-android-robot.svg');
    -webkit-mask-image: url('Images/brand-android-robot.svg');
}

.category-item:has(> #cat-Mumbling_Characters)::after {
    background-color: var(--accent-color);
    mask-image: url('Images/simple-smile.svg');
    -webkit-mask-image: url('Images/simple-smile.svg');
}

.category-item:has(> #cat-Musical_Instruments)::after {
    background-color: var(--accent-color);
    mask-image: url('Images/music.svg');
    -webkit-mask-image: url('Images/music.svg');
}

.category-item:has(> #cat-Nature)::after {
    background-color: var(--accent-color);
    mask-image: url('Images/rainy.svg');
    -webkit-mask-image: url('Images/rainy.svg');
}

.category-item:has(> #cat-Objects)::after {
    background-color: var(--accent-color);
    mask-image: url('Images/stamp.svg');
    -webkit-mask-image: url('Images/stamp.svg');
}

.category-item:has(> #cat-People)::after {
    background-color: var(--accent-color);
    mask-image: url('Images/ui-user.svg');
    -webkit-mask-image: url('Images/ui-user.svg');
}

.category-item:has(> #cat-Transport)::after {
    background-color: var(--accent-color);
    mask-image: url('Images/bus.svg');
    -webkit-mask-image: url('Images/bus.svg');
}

/* Общие свойства для всех масок, чтобы не дублировать код */
.category-item:has(> [id^="cat-"])::after {
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

/* Стили для контейнера с текстом и подписью (остаются без изменений) */
.label-with-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Подпись (остается без изменений) */
.setting-caption {
    font-size: 0.8em;
    color: #aaa;
    font-style: italic;
    /* Убираем отступ, так как выравнивание теперь делает flexbox */
}

/* --- Стили для прогресс-бара --- */
.progress-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 120; /* Выше всех оверлеев */
    display: none; /* По умолчанию скрыт */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.progress-bar-track {
    width: 70%;
    max-width: 400px;
    height: 20px;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    width: 0%; /* Начинаем с 0 */
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 8px;
    transition: width 0.2s ease-out; /* Плавная анимация заполнения */
}

.progress-text {
    margin-top: 15px;
    font-size: 1.2em;
    font-family: 'Roboto';
    text-shadow: 1px 1px 2px black;
}

#infoDialog{
    flex-direction: column;
}

#confirmDialog{
    z-index: 111;
}

/* НОВЫЙ СТИЛЬ: Счётчик файлов */
.category-count {
    margin-left: auto; /* Прижимает счётчик к правому краю */
    color: #888;
    font-size: 0.9em;
    padding-left: 10px; /* Небольшой отступ от текста */
    display: none; /* <-- По умолчанию счётчик скрыт */
}

/* НОВЫЙ СТИЛЬ: Правило для отображения счётчика */
/* Когда у родительского контейнера .menu-categories есть класс .show-counts,
   тогда .category-count становится видимым */
.menu-categories.show-counts .category-count {
    display: inline-block;
}

.confirm-buttons.is-vertical {
    flex-wrap: wrap; /* Разрешаем перенос элементов */
    justify-content: center; /* Центрируем кнопку(и) на новой строке */
}

/* 2. Стиль для списка категорий внутри диалога */
.confirm-buttons.is-vertical .menu-categories {
    flex-basis: 100%; /* Заставляем список занять всю ширину, выталкивая кнопки вниз */
    margin-bottom: 25px; /* Добавляем отступ между списком и кнопкой */
    max-height: 150px; /* Ограничиваем высоту, чтобы не растягивать диалог */
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 10px;
    text-align: left; /* Выравниваем текст в списке по левому краю */
}

/* 3. Убираем лишний заголовок "Категории" внутри диалога */
.confirm-buttons.is-vertical .menu-categories .categories-title {
    display: none;
}

/* --- Стили для индикатора оффлайн-режима --- */

/* 1. Определяем сам псевдо-элемент со значком. */
/* Он будет применен к заголовку и к лейблу, но по умолчанию будет невидим. */
.categories-title::after,
label[for="setting-airplane-activate"]::after {
    content: '';
    
    /* НОВОЕ: Задаем цвет иконки через переменную темы */
    background-color: var(--accent-color); 
    
    /* НОВОЕ: Используем SVG как маску (трафарет) */
    mask-image: url('Images/airplane.svg');
    -webkit-mask-image: url('Images/airplane.svg'); /* Префикс для совместимости с Chrome/Safari */
    
    /* Свойства для маски, аналогичные background */
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    /* Остальные стили для позиционирования и анимации остаются без изменений */
    width: 1.2em;
    height: 1.2em;
    margin-left: 8px;
    vertical-align: middle;
    
    display: inline-block;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* 2. Определяем управляющий класс. */
/* Когда у элемента появляется класс .offline-active, его псевдо-элемент становится видимым. */
.categories-title.offline-active::after,
label[for="setting-airplane-activate"].offline-active::after {
    opacity: 1;
}

#cacheManagementContainer{
    transition: opacity 2s;
    opacity: 0;    
}

.logo-container {
    position: relative; /* Позволяет позиционировать кнопку относительно контейнера */
    margin-bottom: 20px;
}

/* Кнопка Play/Pause над логотипом */
.logo-play-pause {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Центрируем кнопку */
    z-index: 5; /* Кнопка должна быть над SVG */
    transition: opacity 0.3s ease-in-out;
}

/* Логика иконок (такая же, как у главной кнопки паузы) */
.logo-play-pause .play-icon { display: none; }
.logo-play-pause .pause-icon { display: flex; }
.logo-play-pause.paused .play-icon { display: block; }
.logo-play-pause.paused .pause-icon { display: none; }

/* Блок с информацией об авторе музыки */
.music-credit {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9em;
    color: #ccc;
}
.music-credit p {
    margin: 5px 0;
    line-height: 1.4;
}
.music-credit a {
    color: var(--accent-color);
    text-decoration: none;
}
.music-credit a:hover {
    text-decoration: underline;
}

/* Стили для текстовой части логотипа */
.logo-text {
    /* Цвет заливки будет браться из текущей темы */
    fill: var(--accent-color);
}

.logo-wave {
    fill: none;
    stroke: var(--accent-color);
    stroke-miterlimit: 10;
    stroke-width: 18px;
    transform-origin: 318px 305px;
    --logo-scale: 1;
}

.logo-wave.animation-active {
    animation: rocking 5s ease-in-out infinite;
}

/* 1. Контейнер, который будет содержать скролл */
.custom-scroll-container {
    position: relative; /* Обязательно для позиционирования дочерних элементов */
    overflow: hidden;   /* Прячем все, что выходит за границы */
    padding-right: 15px; /* Освобождаем место для скроллбара */
    height: 100%;
    min-height: 150px;
}

/* 2. Блок с контентом, который мы будем двигать */
.scroll-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-right: 15px; /* Компенсируем padding родителя, чтобы текст не прилипал */
    box-sizing: border-box;
    transition: top 0.1s ease-out; /* Плавность для тач-скролла */
    padding: 30px 40px;
    will-change: transform; /* Подготовка GPU */
    transform: translateY(0); /* Исходная позиция через трансформ */
    backface-visibility: hidden; /* Убирает мерцание в Chrome/Safari */
    -webkit-font-smoothing: antialiased; /* Делает текст четче при движении */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#offline-manager-content .scroll-content{
    padding-left: 0;
}

/* 3. "Дорожка" скроллбара */
.scrollbar-track {
    position: absolute;
    top: 0;
    right: 2px;
    width: 8px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* 4. "Бегунок" скроллбара */
.scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--accent-color);
    opacity: 0.7;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.scrollbar-thumb:hover {
    opacity: 1;
}
.scroll-content, .scrollbar-thumb {
    top: 0 !important; /* Фиксируем физический верх в 0 */
    will-change: transform;
}
/* Стиль для контейнера во время активного скроллинга */
.custom-scroll-container.is-scrolling {
    user-select: none; /* Запрещаем выделение текста во время скролла */
}

#leaderboardContainer {
    margin-top: 20px;
    max-height: 50vh;
    overflow-y: auto;
}

.lb-row {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9em;
}

.lb-rank { width: 30px; font-weight: bold; color: var(--accent-color); }
.lb-avatar { width: 32px; height: 32px; border-radius: 50%; margin: 0 10px; }
.lb-name { flex-grow: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-score { font-family: monospace; font-weight: bold; }

@keyframes pressAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2); /* Увеличиваем в середине анимации */
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rocking {
    0% {
        transform: scale(var(--logo-scale, 1)) rotate(0deg);
    }
    50% {
        transform: scale(var(--logo-scale, 1)) rotate(20deg);
    }
    100% {
        transform: scale(var(--logo-scale, 1)) rotate(0deg);
    }
}

@media (max-width: 768px) {
    body { flex-direction: column; justify-content: flex-start; align-items: center; overflow-y: auto; }
    .top-right-controls { position: relative; width: 100%; top: auto; right: auto; left: auto; padding: 5px 0; display: flex; justify-content: center; margin-bottom: 5px; box-sizing: border-box; }
    .timer-display { width: 100%; margin-left: 0; border-radius: 0; padding: 8px 10px; box-sizing: border-box; min-width: 0; }
    #gameContainer { flex-grow: 1; min-height: 0; }
    .top-right-icons{
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 101;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 480px) {

    /* 1. Задаем ширину, как вы предложили, с небольшим отступом */
    .side-menu {
        width: calc(100% - 20px);
        box-sizing: border-box;
        box-shadow: none;
        max-width: 350px;
    }

    /* 2. Немного увеличим отступы внутри меню для удобства на тач-экранах */
    .menu-item, .menu-item-control {
        padding: 18px 20px;
    }
}
/* 1. Определяем саму анимацию свечения */
@keyframes timer-flash {
    0% {
        /* Начало: нет свечения */
        text-shadow: none;
    }
    50% {
        /* Середина: яркое желтое свечение */
        text-shadow: 0 0 12px gold, 0 0 8px yellow, 0 0 5px white;
        color: white; /* Можно сделать текст ярче на пике */
    }
    100% {
        /* Конец: возвращаемся к обычному состоянию */
        text-shadow: none;
    }
}

/* 2. Создаем класс, который будет запускать эту анимацию */
.timer-flash-animation {
    /* Длительность анимации 0.6 секунды */
    animation: timer-flash 0.6s ease-in-out;
}