/* style.css - Версия v3.1 */

/* ==================== ПЕРЕМЕННЫЕ ==================== */
:root {
    
    --border-radius: 20px;
    --border-radius-small: 8px;
    --border-radius-medium: 12px;
    --border-radius-large: 22px;
    
    --transition-fast: 0.1s;
    --shadow-panel: 0px 4px 15px 0px rgba(0, 1, 50, 0.1);
    --shadow-button: 0px 2px 10px rgba(0, 1, 50, 0.08);
    --shadow-button-large: 0px 2px 12px rgba(0, 1, 50, 0.1);
    
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-blur: none;
    --cheat-icon-zero-blur: 1px;
    
    --gradient-border-1: linear-gradient(105deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.0) 10%, rgba(255,255,255,0.0) 50%, rgba(255,255,255,0.0) 90%, rgba(255,255,255,0.1) 100%);
    --gradient-border-2: linear-gradient(255deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0.3) 100%);
    --gradient-fill: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 15%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 85%, rgba(255,255,255,0.04) 100%);
}

/* ==================== СБРОС ==================== */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
    transform: translateZ(0);
    backface-visibility: hidden;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    background-color: #63697B;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--app-bg-color, #63697B);
    color: var(--app-text-color, #FFFFFF);
    display: flex;
    justify-content: center;
    align-items: center;
    overscroll-behavior: none;
}

/* Short mask during mobile fullscreen/orientation transitions to hide one-frame landscape flash */
body.orientation-transition::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--app-bg-color, #63697B);
    z-index: 99999;
    pointer-events: none;
}

/* ==================== КОНТЕЙНЕРЫ ==================== */
.game-app {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

.canvas {
    width: 375px;
    height: 655px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
}

.main-menu,
.game-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--app-bg-color);
    color: white;
    z-index: 1;
}

/* ==================== ПАНЕЛИ ==================== */
.panel,
.game-panel-top,
.game-panel-bottom,
.menu-panel {
    position: absolute;
    left: 36px;
    border-radius: var(--border-radius-large);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-panel);
}

.panel { width: 303px; height: 457px; top: 36px; }
.game-panel-top { width: 303px; height: 130px; top: 36px; }
.game-panel-bottom { width: 303px; height: 303px; top: 190px; background: rgba(255,255,255,0.01); }
.menu-panel { width: 303px; height: 210px; top: 98px; }

/* Новая панель на главной странице (под основной панелью) */
.bottom-panel {
    width: 303px;
    height: 98px;
    position: absolute;
    left: 36px;
    top: 517px;
    border-radius: var(--border-radius-large);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-panel);
}

/* Новая панель в игре (под игровым полем) */
.game-panel-extra {
    width: 303px;
    height: 98px;
    position: absolute;
    left: 36px;
    top: 517px;
    border-radius: var(--border-radius-large);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-panel);
}

/* ==================== КНОПКИ НА НИЖНЕЙ ПАНЕЛИ ==================== */
.bottom-button {
    width: 63.5px;
    height: 45px;
    position: absolute;
    border-radius: 14px;
    background: transparent;
    box-shadow: var(--shadow-button-large);
    z-index: 10;
    border: none;
    cursor: pointer;
    top: 12px;
    outline: none;
}

.bottom-button-1 { left: 11px; }
.bottom-button-2 { left: 83.5px; }
.bottom-button-3 { left: 156px; }
.bottom-button-4 { left: 228.5px; }

/* Убираем фокус-стили для чит-кнопок */
.bottom-button:focus {
    outline: none;
    box-shadow: var(--shadow-button-large);
}

/* Оранжевый бордер для кнопки "Заморозить" во время таймера */
.bottom-button.freeze-cooldown {
    box-shadow: none; /* Убираем обычную тень */
    position: relative;
}

.bottom-button.freeze-cooldown::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px; /* Уменьшено с 16px на 1px */
    pointer-events: none;
    z-index: 5;
    padding: 1.1px; /* Оставляем как у обычных бордеров */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background: var(--freeze-timer-gradient, transparent);
}

/* Маленькие кнопки в правом верхнем углу над большими кнопками */
.corner-button {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    height: 17px;
    position: absolute;
    border-radius: 10px;
    background: #DEDADA;
    border: none;
    cursor: default;
    z-index: 20;
    box-shadow: var(--shadow-button-large);
    pointer-events: none;
    display: block;
}

/* Скрытие counter-button через JS (только когда ad reward уже использован) */
.corner-button.counter-hidden {
    display: none !important;
}

/* Позиции маленьких кнопок (над большими кнопками) */
.corner-button-1 { top: 7px; left: 51.5px; }
.corner-button-2 { top: 7px; left: 124px; }
.corner-button-3 { top: 7px; left: 196.5px; }
.corner-button-4 { top: 7px; left: 269px; }

/* Бордер для маленьких кнопок как у обычных кнопок */
.corner-button::before, .corner-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1.1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.corner-button::before {
    background: linear-gradient(115deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 90%, rgba(255,255,255,0.1) 100%);
}

.corner-button::after {
    background: linear-gradient(245deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0.4) 100%);
}

.corner-button:active {
    box-shadow: inset 0 0 12px rgba(0,0,0,0.15), inset 0 0 3px rgba(204, 219, 251, 0.5);
}

/* Текст внутри corner button - цвет из кнопок тем */
.corner-button-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 21;
    pointer-events: none;
}

/* Цвета цифр по темам (как цвета кнопок тем) */
body[data-theme="default"] .corner-button-text,
body[data-theme="moon-dust"] .corner-button-text { color: #63697B; }

body[data-theme="whisper-leaves"] .corner-button-text { color: #7F8B7D; }

body[data-theme="wet-stone"] .corner-button-text { color: #8B847D; }

body[data-theme="deep-space"] .corner-button-text { color: #3B3D46; }

body[data-theme="unicorn-dream"] .corner-button-text { color: #8D5A80; }

/* Для Free версии - нарисованный плюс вместо шрифтового */
body.free-version .corner-button-text {
    font-size: 0; /* Скрываем текст */
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Рисуем плюс линиями */
body.free-version .corner-button-text::before {
    content: '';
    position: absolute;
    width: 9px; /* 9 пикселей */
    height: 2px; /* Возвращаем исходную толщину */
    background-color: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Убран border-radius для ровных краев */
}

body.free-version .corner-button-text::after {
    content: '';
    position: absolute;
    width: 2px; /* Возвращаем исходную толщину */
    height: 9px; /* 9 пикселей */
    background-color: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Убран border-radius для ровных краев */
}

/* Цвета плюсов в Free версии по темам */
body[data-theme="default"].free-version .corner-button-text::before,
body[data-theme="moon-dust"].free-version .corner-button-text::before { color: #63697B; }

body[data-theme="whisper-leaves"].free-version .corner-button-text::before { color: #7F8B7D; }

body[data-theme="wet-stone"].free-version .corner-button-text::before { color: #8B847D; }

body[data-theme="deep-space"].free-version .corner-button-text::before { color: #3B3D46; }

body[data-theme="unicorn-dream"].free-version .corner-button-text::before { color: #8D5A80; }

/* Когда счетчик 0 - показываем плюс в Premium версии */
.corner-button-text.zero-as-plus {
    font-size: 0; /* Скрываем текст (ноль) */
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.corner-button-text.zero-as-plus::before {
    content: '';
    position: absolute;
    width: 9px; /* 9 пикселей */
    height: 2px; /* Возвращаем исходную толщину */
    background-color: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Убран border-radius для ровных краев */
}

.corner-button-text.zero-as-plus::after {
    content: '';
    position: absolute;
    width: 2px; /* Возвращаем исходную толщину */
    height: 9px; /* 9 пикселей */
    background-color: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Убран border-radius для ровных краев */
}

/* Цвета плюсов при счетчике 0 по темам */
body[data-theme="default"] .corner-button-text.zero-as-plus::before,
body[data-theme="moon-dust"] .corner-button-text.zero-as-plus::before { color: #63697B; }

body[data-theme="whisper-leaves"] .corner-button-text.zero-as-plus::before { color: #7F8B7D; }

body[data-theme="wet-stone"] .corner-button-text.zero-as-plus::before { color: #8B847D; }

body[data-theme="deep-space"] .corner-button-text.zero-as-plus::before { color: #3B3D46; }

body[data-theme="unicorn-dream"] .corner-button-text.zero-as-plus::before { color: #8D5A80; }

/* Подписи под чит-кнопками */
.cheat-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 11px;
    color: #F2F2F2;
    text-align: center;
    position: absolute;
    z-index: 11;
    pointer-events: none;
    white-space: nowrap;
    bottom: 20px; /* Было 28px, теперь 20px (опущено на 8px) */
}

.cheat-label-1 { bottom: 22px; left: 42.75px; transform: translateX(-50%); }
.cheat-label-2 { bottom: 22px; left: 115.25px; transform: translateX(-50%); }
.cheat-label-3 { bottom: 22px; left: 187.75px; transform: translateX(-50%); }
.cheat-label-4 { bottom: 22px; left: 260.25px; transform: translateX(-50%); }

/* Стили для заблокированных чит-кнопок */
.cheat-btn.cheat-btn-disabled {
    opacity: 0.5;
    cursor: default;
}

.cheat-btn.cheat-btn-disabled .button-fill {
    opacity: 0.3;
}

.cheat-btn.cheat-btn-disabled:active {
    box-shadow: var(--shadow-button-large); /* Убираем эффект нажатия */
}

/* Градиенты для кнопок нижней панели */
.bottom-button::before, .bottom-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1.1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.bottom-button::before {
    background: linear-gradient(115deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 90%, rgba(255,255,255,0.1) 100%);
}

.bottom-button::after {
    background: linear-gradient(245deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0.4) 100%);
}

.bottom-button > .button-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 75%, rgba(255,255,255,0.10) 100%);
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

.bottom-button:active,
.bottom-button.pressed {
    box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(204, 219, 251, 1);
}

/* Высоты модальных панелей */
.modal-main-menu { height: 378px; }
.modal-stats { height: 444px; }
.modal-themes { height: 388px; }
.modal-language { height: 444px; }
.modal-in-game { height: 500px; }
.modal-game-end { height: 256px; }
.modal-start-time { height: 166px; }
.modal-continue { height: 166px; }
.modal-cheat-info { height: 200px; }
.modal-cheat-input { height: 200px; }
.modal-yazhopka { height: 166px; }
.modal-confirm { height: 166px; }
.modal-nickname-confirm { height: 184px; }
.modal-countdown { height: 166px; }

/* Градиентные бордеры для панелей */
.panel::before, .panel::after,
.game-panel-top::before, .game-panel-top::after,
.game-panel-bottom::before, .game-panel-bottom::after,
.menu-panel::before, .menu-panel::after,
.bottom-panel::before, .bottom-panel::after,
.game-panel-extra::before, .game-panel-extra::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-large);
    padding: 1.1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.panel::before, .game-panel-top::before, .game-panel-bottom::before, .menu-panel::before,
.bottom-panel::before, .game-panel-extra::before {
    background: var(--gradient-border-1);
    z-index: 1;
}

.panel::after, .game-panel-top::after, .game-panel-bottom::after, .menu-panel::after,
.bottom-panel::after, .game-panel-extra::after {
    background: var(--gradient-border-2);
    z-index: 1;
}

.panel > .panel-fill,
.game-panel-top > .panel-fill,
.game-panel-bottom > .panel-fill,
.menu-panel > .panel-fill,
.bottom-panel > .panel-fill,
.game-panel-extra > .panel-fill {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-large);
    background: var(--gradient-fill);
    pointer-events: none;
}

/* ==================== МАЛЕНЬКИЕ КНОПКИ ==================== */
.menu-button,
.menu-button-right,
.menu-button-right-close {
    position: absolute;
    border-radius: var(--border-radius-small);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-button);
    z-index: 10;
    border: none;
    cursor: pointer;
}

.menu-button {
    width: 78px;
    height: 24px;
    top: 50px;
    left: 58px;
}

.menu-button-right {
    width: 78px;
    height: 24px;
    top: 50px;
    left: 238px;
}

.menu-button-right-close {
    width: 30px;
    height: 22px;
    top: 111px;
    right: 59px;
}

/* Градиенты для маленьких кнопок */
.menu-button::before, .menu-button::after,
.menu-button-right::before, .menu-button-right::after,
.menu-button-right-close::before, .menu-button-right-close::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-small);
    padding: 1.1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.menu-button::before, .menu-button-right::before, .menu-button-right-close::before {
    background: linear-gradient(105deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 7%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 93%, rgba(255,255,255,0.1) 100%);
    z-index: 1;
}

.menu-button::after, .menu-button-right::after, .menu-button-right-close::after {
    background: linear-gradient(255deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 7%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 93%, rgba(255,255,255,0.3) 100%);
    z-index: 1;
}

.menu-button:active,
.menu-button-right:active,
.menu-button-right-close:active {
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.25), inset 0 0 6px rgba(204, 219, 251, 1);
}

/* Бургер-иконка */
.burger-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 8px;
    background: 
        linear-gradient(#F2F2F2, #F2F2F2) 0 0/10px 1px no-repeat,
        linear-gradient(#F2F2F2, #F2F2F2) 0 50%/10px 1px no-repeat,
        linear-gradient(#F2F2F2, #F2F2F2) 0 100%/10px 1px no-repeat;
    pointer-events: none;
    z-index: 11;
}

/* Крестик закрытия */
.close-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    pointer-events: none;
    z-index: 21;
}

.close-icon::before,
.close-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: #F2F2F2;
}

.close-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Текст кнопок */
.button-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #F2F2F2;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    white-space: nowrap;
    pointer-events: none;
    z-index: 11;
}

.menu-button .button-text { left: 28px; }
.menu-button-right .button-text { left: 50%; transform: translate(-50%, -50%); }

/* Японский язык: сжатие текста кнопки меню */
html[lang="ja"] .menu-button .button-text {
    left: 24px;
    letter-spacing: -1px;
}

/* Японский язык: исправление отображения русского текста в кнопках */
html[lang="ja"] .menu-button-text,
html[lang="ko"] .menu-button-text,
html[lang="zh"] .menu-button-text {
    letter-spacing: normal;
}

/* Фиксируем font-weight для иероглифических языков чтобы все символы выглядели одинаково */
.lang-btn[data-lang="zh"] .menu-button-text,
.lang-btn[data-lang="ja"] .menu-button-text,
.lang-btn[data-lang="ko"] .menu-button-text,
.lang-btn[data-lang="ar"] .menu-button-text,
.lang-btn[data-lang="hi"] .menu-button-text {
    font-weight: 400;
}

/* Фиксация шрифта DM Sans для кнопки 'Русский' во всех языках */
.lang-btn[data-lang="ru"] .menu-button-text {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-variant-east-asian: normal;
    text-transform: none;
}

/* Строгая фиксация шрифта для японского языка */
html[lang="ja"] .lang-btn[data-lang="ru"] .menu-button-text {
    font-family: 'DM Sans', sans-serif !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

/* Плашка "Новый рекорд" */
.new-record-badge {
    width: 129px;
    height: 20px;
    top: 52px;
    left: 187px;
    box-shadow: inset 0 0 8px rgba(234, 118, 55, 0.5);
    pointer-events: none;
}

.new-record-badge::before {
    background: rgba(255, 243, 223, 1);
    opacity: 0.78;
}

.premium-badge {
    width: 74px;
    height: 20px;
    top: 52px;
    left: 238px;
    box-shadow: inset 0 0 8px rgba(234, 118, 55, 0.5);
    pointer-events: none;
    display: none !important;
}

.premium-badge::before {
    background: rgba(255, 243, 223, 1);
    opacity: 0.78;
}

.premium-badge .button-text {
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Premium badge always hidden — game is fully free */
body.premium-version .premium-badge {
    display: none !important;
}

/* ==================== БОЛЬШИЕ КНОПКИ РЕЖИМОВ ==================== */
.big-button,
.big-button-right,
.big-button-bottom,
.big-button-bottom-right {
    width: 120px;
    height: 120px;
    position: absolute;
    border-radius: var(--border-radius-large);
    background: transparent;
    box-shadow: var(--shadow-button-large);
    z-index: 10;
    border: none;
    cursor: pointer;
}

.big-button { top: 192px; left: 58px; }
.big-button-right { top: 192px; right: 58px; }
.big-button-bottom { top: 328px; left: 58px; }
.big-button-bottom-right { top: 328px; right: 58px; }

/* Градиенты для больших кнопок */
.big-button::before, .big-button::after,
.big-button-right::before, .big-button-right::after,
.big-button-bottom::before, .big-button-bottom::after,
.big-button-bottom-right::before, .big-button-bottom-right::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-large);
    padding: 1.1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.big-button::before, .big-button-right::before,
.big-button-bottom::before, .big-button-bottom-right::before {
    background: linear-gradient(115deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 90%, rgba(255,255,255,0.1) 100%);
}

.big-button::after, .big-button-right::after,
.big-button-bottom::after, .big-button-bottom-right::after {
    background: linear-gradient(245deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0.4) 100%);
}

.big-button > .button-fill,
.big-button-right > .button-fill,
.big-button-bottom > .button-fill,
.big-button-bottom-right > .button-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 75%, rgba(255,255,255,0.10) 100%);
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

/* Текст больших кнопок */
.big-button-title {
    position: absolute;
    left: 50%;
    bottom: 44px;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 38px;
    font-weight: 300;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    z-index: 3;
}

.big-button-subtitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);  
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: #F2F2F2;
    pointer-events: none;
    z-index: 3;
}

.big-button-subtitle.line1 { bottom: 32px; }
.big-button-subtitle.line2 { bottom: 17px; }

/* Нажатые состояния больших кнопок */
.big-button:active,
.big-button-right:active {
    box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(204, 219, 251, 1);
}

.big-button-bottom:active {
    box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(248, 199, 131, 1);
}

.big-button-bottom-right:active {
    box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(165, 201, 149, 1);
}

/* ==================== LOCK КНОПКИ (FREE ВЕРСИЯ) ==================== */
.lock-button {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--glass-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: var(--shadow-button);
    z-index: 20;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}

/* Позиции lock-кнопок (выходят за большую кнопку на 7px вверх и вправо) */
.lock-button-time {
    top: 321px;
    left: 155px;
}

.lock-button-zen {
    top: 321px;
    right: 51px;
}

/* Градиенты для lock-кнопки */
.lock-button::before,
.lock-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1.1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.lock-button::before {
    background: linear-gradient(105deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 7%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 93%, rgba(255,255,255,0.1) 100%);
    z-index: 1;
}

.lock-button::after {
    background: linear-gradient(255deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 7%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 93%, rgba(255,255,255,0.3) 100%);
    z-index: 1;
}

.lock-button:active {
    box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(204, 219, 251, 1) !important;
}

.lock-icon {
    width: 14px;
    height: 19px;
    z-index: 10;
    pointer-events: none;
    margin-top: 1px;
}

/* Иконки чит-кнопок */
.cheat-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

/* Размеры иконок */
.cheat-icon[alt="undo"] {
    width: 24px;
    height: 18px;
}

.cheat-icon[alt="shuffle"] {
    width: 25px;
    height: 25px;
}

.cheat-icon[alt="explode"] {
    width: 23px;
    height: 23px;
}

.cheat-icon[alt="freeze"] {
    width: 24px;
    height: 27px;
}

/* Цвет иконок читов - серый #DEDADA для всех тем */
.cheat-icon {
    filter: brightness(0) saturate(100%) invert(91%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(97%) contrast(92%);
    transition: filter 0.05s ease, transform 0.05s ease;
}

/* Анимация при нажатии на кнопку с читом - белая и увеличенная */
.cheat-btn:active .cheat-icon,
.cheat-btn.pressed .cheat-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Увеличение иконок при нажатии на 2px по высоте */
.cheat-btn:active .cheat-icon[alt="undo"],
.cheat-btn.pressed .cheat-icon[alt="undo"] {
    transform: translate(-50%, -50%) scale(1.11);
}

.cheat-btn:active .cheat-icon[alt="shuffle"],
.cheat-btn.pressed .cheat-icon[alt="shuffle"] {
    transform: translate(-50%, -50%) scale(1.08);
}

.cheat-btn:active .cheat-icon[alt="explode"],
.cheat-btn.pressed .cheat-icon[alt="explode"] {
    transform: translate(-50%, -50%) scale(1.087);
}

.cheat-btn:active .cheat-icon[alt="freeze"],
.cheat-btn.pressed .cheat-icon[alt="freeze"] {
    transform: translate(-50%, -50%) scale(1.074);
}

/* Блюр иконки когда счетчик равен нулю */
.cheat-btn.cheat-btn-disabled .cheat-icon,
.cheat-btn.cheat-needs-ad .cheat-icon {
    filter: brightness(0) saturate(100%) invert(91%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(97%) contrast(92%) blur(var(--cheat-icon-zero-blur, 1px));
}

/* Yandex: кнопка с нулевым счетчиком — готова к просмотру рекламы */
.cheat-btn.cheat-needs-ad {
    opacity: 0.7;
    cursor: pointer;
}

.cheat-btn.cheat-needs-ad .button-fill {
    opacity: 0.5;
}

/* Пульсация corner-button (счетчик) при нулевом счетчике на Яндексе */
.cheat-btn.cheat-needs-ad ~ .corner-button .corner-button-text.zero-as-plus {
    animation: pulse-ad 2s ease-in-out infinite;
}

@keyframes pulse-ad {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Размытие для заблокированных кнопок через класс locked */
.mode-btn.locked {
    pointer-events: none;
}

.mode-btn.locked .button-fill {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mode-btn.locked .big-button-title,
.mode-btn.locked .big-button-subtitle {
    filter: blur(2px);
    opacity: 0.7;
}

/* Показываем lock-кнопки в Free версии */
body.free-version .lock-button-time,
body.free-version .lock-button-zen {
    display: flex;
}

/* Премиум кнопки в Free версии - разрешаем нажатие для эффектов */
body.free-version .mode-btn[data-mode="4x4-time-decay"],
body.free-version .mode-btn[data-mode="5x5-zen"] {
    pointer-events: auto;
    cursor: pointer;
}

/* Блюр для премиум кнопок в Free версии - разный для текста и подписей */
body.free-version .mode-btn[data-mode="4x4-time-decay"] .button-fill,
body.free-version .mode-btn[data-mode="5x5-zen"] .button-fill {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Большой шрифт (цифры) - 2px блюр */
body.free-version .mode-btn[data-mode="4x4-time-decay"] .big-button-title,
body.free-version .mode-btn[data-mode="5x5-zen"] .big-button-title {
    filter: blur(2px);
    opacity: 0.7;
}

/* Подписи ("на время (исчезновение)" и "бесконечный дзен") - 1px блюр */
body.free-version .mode-btn[data-mode="4x4-time-decay"] .big-button-subtitle,
body.free-version .mode-btn[data-mode="5x5-zen"] .big-button-subtitle {
    filter: blur(1px);
    opacity: 0.7;
}

/* Оранжевая тень для премиум кнопок при нажатии в Free версии */
body.free-version .mode-btn[data-mode="4x4-time-decay"]:active,
body.free-version .mode-btn[data-mode="5x5-zen"]:active {
    box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(248, 199, 131, 1) !important;
}

/* Lock-кнопки кликабельны */
.lock-button-time,
.lock-button-zen {
    pointer-events: auto;
    cursor: pointer;
}

/* Lock-кнопки остаются кликабельными */
body.free-version .lock-button-time,
body.free-version .lock-button-zen {
    pointer-events: auto;
    cursor: pointer;
}

/* ==================== СТАТИСТИКА ГЛАВНОГО МЕНЮ ==================== */
.start-text {
    position: absolute;
    top: 118px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 15;
}

.stats-container {
    position: absolute;
    top: 56px;
    width: 100%;
    pointer-events: none;
    z-index: 15;
}

.stat-item {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.stat-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.10);
}

.stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: #F2F2F2;
}

/* ==================== ИГРОВОЕ ПОЛЕ ==================== */
.game-board-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 282px;
    height: 282px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#board {
    display: grid;
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Ячейки */
.cell {
    border-radius: var(--border-radius);
    background: transparent;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0px 4px 6px 0px rgba(0, 1, 50, 0.03);
    position: relative;
}

.cell::before,
.cell::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.cell::before {
    background: linear-gradient(125deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0) 100%);
    z-index: 1;
}

.cell::after {
    background: linear-gradient(235deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%);
    z-index: 1;
}

/* ==================== ПЛИТКИ ==================== */
.tile-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.tile-background {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* backdrop-filter removed for performance */
}

.tile {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-weight: 400;
    user-select: none;
    z-index: 2;
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: layout style paint;
}

.tile-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 4;
}

.tile-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.tile-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    z-index: 3;
}

/* Тени плиток */
.tile[data-value] { box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); }
.tile[data-value="1048576"] { box-shadow: inset 0 0 5px rgba(248, 185, 130, 1); }

/* Decay-режим: скрываем статичный цветной бордер плитки */
.decay-mode .tile-border {
    display: none;
}

/* Decay-режим: базовый белый бордер (::before) вместо цветного */
.decay-mode .tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1.4px;
    background: linear-gradient(115deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 10%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0.4) 100%);
}

/* Цветной бордер плитки с таймером (::after) - поверх базового */
.decay-mode .tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1.4px;
    background: var(--timer-gradient, transparent);
}

/* Замороженное состояние: убираем базовый бордер (::before) */
.decay-mode .tile.tile-frozen::before {
    display: none;
}

/* Размеры шрифтов плиток */
.tile[data-value="2"] .tile-number,
.tile[data-value="4"] .tile-number,
.tile[data-value="8"] .tile-number { font-size: 34px; }

.tile[data-value="16"] .tile-number,
.tile[data-value="32"] .tile-number,
.tile[data-value="64"] .tile-number { font-size: 29px; }

.tile[data-value="128"] .tile-number,
.tile[data-value="256"] .tile-number,
.tile[data-value="512"] .tile-number { font-size: 24px; }

.tile[data-value="1024"] .tile-number,
.tile[data-value="2048"] .tile-number,
.tile[data-value="4096"] .tile-number,
.tile[data-value="8192"] .tile-number { font-size: 18px; }

.tile[data-value="16384"] .tile-number,
.tile[data-value="32768"] .tile-number,
.tile[data-value="65536"] .tile-number { font-size: 15px; }

.tile[data-value="131072"] .tile-number,
.tile[data-value="262144"] .tile-number,
.tile[data-value="524288"] .tile-number { font-size: 14px; }

.tile[data-value="1048576"] .tile-number { font-size: 12px; }

/* Градиенты плиток */
.tile[data-value="2"] .tile-border { background: linear-gradient(135deg, #FFF5EB 0%, #FFE1B4 50%, #FFF0DC 75%, #FFE6C8 100%); }
.tile[data-value="4"] .tile-border { background: linear-gradient(135deg, #FFEBD2 0%, #FFC896 33%, #FFD7AA 66%, #FFE1B9 100%); }
.tile[data-value="8"] .tile-border { background: linear-gradient(135deg, #FFE1BE 0%, #FFB478 33%, #FFC88C 66%, #FFD7A5 100%); }
.tile[data-value="16"] .tile-border { background: linear-gradient(135deg, #FFEBD2 0%, #FFC896 33%, #FFD7AA 66%, #FFE1B9 100%); }
.tile[data-value="32"] .tile-border { background: linear-gradient(135deg, #FFCD96 0%, #FF8C50 33%, #FFAA6E 66%, #FFBE87 100%); }
.tile[data-value="64"] .tile-border { background: linear-gradient(135deg, #FFC38C 0%, #FF783C 33%, #FF9B5F 66%, #FFAF78 100%); }
.tile[data-value="128"] .tile-border { background: linear-gradient(135deg, #FFB982 0%, #FF6E32 33%, #FF9155 66%, #FFA56E 100%); }
.tile[data-value="256"] .tile-border { background: linear-gradient(135deg, #FFAF96 0%, #FF6450 33%, #FF8773 66%, #FF9B87 100%); }
.tile[data-value="512"] .tile-border { background: linear-gradient(135deg, #FFA5AA 0%, #FF5A6E 33%, #FF7D91 66%, #FF91A0 100%); }
.tile[data-value="1024"] .tile-border { background: linear-gradient(135deg, #FF9BBE 0%, #F0508C 33%, #F773A5 66%, #FF87B9 100%); }
.tile[data-value="2048"] .tile-border { background: linear-gradient(135deg, #E6A0DC 0%, #C850B4 33%, #D778C8 66%, #E18CD2 100%); }
.tile[data-value="4096"] .tile-border { background: linear-gradient(135deg, #C8B4F0 0%, #9664DC 33%, #AF8CE6 66%, #BEA0F0 100%); }
.tile[data-value="8192"] .tile-border { background: linear-gradient(135deg, #B4C8FA 0%, #788CE6 33%, #96AAF0 66%, #AABEFA 100%); }
.tile[data-value="16384"] .tile-border { background: linear-gradient(135deg, #A0DCFF 0%, #50A0E6 33%, #78BEF5 66%, #8CD2FF 100%); }
.tile[data-value="32768"] .tile-border { background: linear-gradient(135deg, #A0F0FF 0%, #50DCFF 33%, #8CE6FF 66%, #3CC8FF 100%); }
.tile[data-value="65536"] .tile-border { background: linear-gradient(135deg, #8CE6FF 0%, #3CB4E6 33%, #64CDF5 66%, #78DCFF 100%); }
.tile[data-value="131072"] .tile-border { background: linear-gradient(135deg, #C8FFDC 0%, #78F0B4 33%, #B4FFC8 66%, #64DCA0 100%); }
.tile[data-value="262144"] .tile-border { background: linear-gradient(135deg, #DCFFC8 0%, #8CF0A0 33%, #C8FFB4 66%, #78DC8C 100%); }
.tile[data-value="524288"] .tile-border { background: linear-gradient(135deg, #F0FFC8 0%, #A0F08C 33%, #DCFFB4 66%, #8CDC78 100%); }
.tile[data-value="1048576"] .tile-border { background: linear-gradient(135deg, #FFFFC8 0%, #C8F08C 33%, #F0FFB4 66%, #B4DC78 100%); }

/* Анимации */
@keyframes tileAppear {
    0% { 
        transform: scale(0.6); 
        opacity: 0;
    }
    40% { 
        transform: scale(1.05); 
        opacity: 0.9;
    }
    70% { 
        transform: scale(0.98); 
    }
    100% { 
        transform: scale(1); 
        opacity: 1;
    }
}

.tile.new,
.tile.merged { 
    animation: tileAppear 0.4s cubic-bezier(0.34, 1.2, 0.64, 1); 
}

/* ==================== МОДАЛЬНЫЕ ОКНА ==================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    overflow: hidden;
    background: rgba(99, 105, 123, 0.35);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}

.modal .canvas {
    width: 375px;
    height: 709px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Фоны модальных окон для разных тем */
body[data-theme="moon-dust"] .modal { background: rgba(99, 105, 123, 0.2); }
body[data-theme="whisper-leaves"] .modal { background: rgba(127, 139, 125, 0.35); }
body[data-theme="wet-stone"] .modal { background: rgba(139, 132, 125, 0.35); }
body[data-theme="deep-space"] .modal { background: rgba(59, 61, 70, 0.35); }
body[data-theme="unicorn-dream"] .modal { background: rgba(141, 90, 128, 0.35); }

/* ==================== КНОПКИ В МОДАЛЬНЫХ ОКНАХ ==================== */
.menu-button-item {
    width: 259px;
    height: 40px;
    position: absolute;
    left: 58px;
    border-radius: var(--border-radius-medium);
    background: transparent;
    box-shadow: var(--shadow-button-large);
    z-index: 10;
    border: none;
    cursor: pointer;
}

.menu-button-item::before,
.menu-button-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-medium);
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.menu-button-item::before {
    background: linear-gradient(155deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 90%, rgba(255,255,255,0.1) 100%);
    z-index: 2;
}

.menu-button-item::after {
    background: linear-gradient(205deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0.4) 100%);
    z-index: 2;
}

.menu-button-item > .button-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 75%, rgba(255,255,255,0.10) 100%);
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

.menu-button-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    z-index: 3;
    white-space: nowrap;
}

.menu-button-item:active {
    box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(204, 219, 251, 1);
}

/* ==================== ПОЗИЦИИ КНОПОК ==================== */

/* Главное меню (4 кнопки) */
.stats-button { top: 163px; }
.cheat-button { top: 219px; }
.language-button { top: 275px; }
.themes-button-main { top: 331px; }

.modal-main-menu { height: 322px; }

.cheat-button:active { box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(248, 199, 131, 1); }
.themes-button-main:active { box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(204, 219, 251, 1); }

/* Темы (5 кнопок) — оригинальное позиционирование */
.moon-dust-button { top: 163px; background-color: #63697B; }
.whisper-leaves-button { top: 219px; background-color: #7F8B7D; }
.wet-stone-button { top: 275px; background-color: #8B847D; }
.deep-space-button { top: 331px; background-color: #3B3D46; }
.unicorn-dream-button { top: 387px; background-color: #8D5A80; }

/* Игровое меню (6 кнопок) */
.restart-button { top: 163px; }
.main-menu-button-ingame { top: 219px; }
.stats-button-ingame { top: 275px; }
.cheat-button-ingame { top: 331px; }
.language-button-ingame { top: 387px; }
.themes-button-ingame { top: 443px; }

.modal-in-game { height: 444px; }

.cheat-button-ingame:active { box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(248, 199, 131, 1); }
.themes-button-ingame:active { box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(165, 201, 149, 1); }

/* ==================== СКРЫТИЕ КНОПКИ ЧИТ-КОД ДО АКТИВАЦИИ ==================== */

/* По умолчанию кнопка чит-код скрыта */
body:not(.cheat-code-unlocked) .cheat-button,
body:not(.cheat-code-unlocked) .cheat-button-ingame {
    display: none;
}

/* Главное меню: сдвиг кнопок вверх когда чит-код скрыт */
body:not(.cheat-code-unlocked) .language-button { top: 219px; }
body:not(.cheat-code-unlocked) .themes-button-main { top: 275px; }
body:not(.cheat-code-unlocked) .modal-main-menu { height: 266px; }

/* Игровое меню: сдвиг кнопок вверх когда чит-код скрыт */
body:not(.cheat-code-unlocked) .language-button-ingame { top: 331px; }
body:not(.cheat-code-unlocked) .themes-button-ingame { top: 387px; }
body:not(.cheat-code-unlocked) .modal-in-game { height: 388px; }

/* ==================== ЭФФЕКТ АКТИВАЦИИ ЧИТ-КОДА ==================== */

/* Оранжевая вспышка при активации */
.cheat-code-activated {
    animation: cheatCodeFlash 0.2s ease-out;
}

@keyframes cheatCodeFlash {
    0% {
        box-shadow: inset 0 0 0 rgba(248, 199, 131, 0);
    }
    50% {
        box-shadow: inset 0 0 100px rgba(248, 199, 131, 0.5);
    }
    100% {
        box-shadow: inset 0 0 0 rgba(248, 199, 131, 0);
    }
}

/* Серая вспышка при деактивации - цвет как у тени панели */
.cheat-code-deactivated {
    animation: cheatCodeDeactivatedFlash 0.2s ease-out;
}

@keyframes cheatCodeDeactivatedFlash {
    0% {
        box-shadow: inset 0 0 0 rgba(0, 1, 50, 0);
    }
    50% {
        box-shadow: inset 0 0 100px rgba(0, 1, 50, 0.5);
    }
    100% {
        box-shadow: inset 0 0 0 rgba(0, 1, 50, 0);
    }
}

/* Статистика */
.leaderboard-button-stats { top: 410px; }
.clear-stats-button { top: 466px; }

/* Завершение игры */
.game-end-button { top: 280px; }

/* ==================== ОКНО ЯЗЫКОВ СО СКРОЛЛОМ ==================== */
#language-modal .menu-panel {
    overflow: hidden;
}

.language-scroll-container {
    position: absolute;
    top: 163px;
    left: 58px;
    width: 275px;
    height: 336px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
    padding-right: 16px;
}

.language-scroll-container::-webkit-scrollbar {
    width: 4px;
}

.language-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.language-scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.3);
    border-radius: 2px;
}

.language-scroll-container .menu-button-item {
    position: relative;
    left: 0;
    top: auto;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.language-scroll-container .menu-button-item:last-child {
    margin-bottom: 0;
}

/* ==================== ОКНО СТАТИСТИКИ ==================== */

/* Заголовок с именем игрока — как в окне рейтинга */
.stats-player-name {
    position: absolute;
    top: 140px;
    left: 62px;
    width: 250px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    text-align: center;
    z-index: 15;
    pointer-events: none;
    cursor: pointer;
}

.stats-player-name.editable {
    pointer-events: auto;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.stats-container-modal {
    position: absolute;
    top: 175px;
    left: 62px;
    width: 250px;
    z-index: 10;
}

.stats-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    height: 24px;
}

.stats-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.stats-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
}

/* ==================== ОПИСАНИЕ И ВВОД ==================== */

/* Базовый стиль для текста описания */
.description-text {
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    z-index: 15;
    pointer-events: none;
}

/* Текст для окна начала игры на время */
#start-time-modal .description-text {
    top: 160px;
}

/* Кнопка начала игры на время */
.start-time-button {
    top: 200px;
}

/* Стиль для окна yazhopka */
#yazhopka-modal .description-text {
    top: 148px;
}

/* Стиль для окна информации о читах в главном меню */
#cheat-modal .description-text {
    top: 202px;
    transform: translate(-50%, -50%);
    width: 240px;
}

/* Поле ввода чит-кода */
.cheat-input-container {
    width: 259px;
    height: 40px;
    position: absolute;
    top: 182px;
    left: 58px;
    border-radius: var(--border-radius-medium);
    z-index: 10;
}

.cheat-input {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-medium);
    background: transparent;
    box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.20);
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px !important;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    outline: none;
}

.cheat-input::placeholder {
    color: rgba(242, 242, 242, 0.6);
    font-size: 14px;
}

.cheat-input-container::before,
.cheat-input-container::after {
    content: '';
    position: absolute;
    inset: -1.1px;
    border-radius: 13px;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.cheat-input-container::before {
    background: linear-gradient(155deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 90%, rgba(255,255,255,0.1) 100%);
    z-index: 2;
}

.cheat-input-container::after {
    background: linear-gradient(205deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0.4) 100%);
    z-index: 2;
}

/* ==================== ОКНО ПОДТВЕРЖДЕНИЯ ==================== */

/* Базовый стиль текста подтверждения */
.confirmation-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    line-height: 1.4;
    z-index: 10;
    white-space: nowrap;
}

/* Базовый стиль для горизонтальных кнопок */
.buttons-horizontal {
    position: absolute;
    left: 58px;
    width: 259px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

/* Окно подтверждения очистки статистики */
#confirm-modal .confirmation-text {
    top: 160px;
}

#confirm-modal .buttons-horizontal {
    top: 200px;
}

#confirm-modal .menu-button-item {
    width: 120px;
    position: relative;
    left: auto;
}

/* Окно продолжения игры */
#continue-game-modal .confirmation-text {
    top: 148px;
    white-space: normal;
}

#continue-game-modal .buttons-horizontal {
    top: 202px;
}

#continue-game-modal .menu-button-item {
    width: 120px;
    position: relative;
    left: auto;
}

.no-button:active { box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(248, 199, 131, 1) !important; }
.yes-button:active { box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(165, 201, 149, 1) !important; }

/* ==================== ОКНО ОБРАТНОГО ОТСЧЁТА ==================== */
#countdown-modal .countdown-text {
    top: 132px;
    white-space: normal;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.countdown-number {
    font-weight: 500;
    font-size: 28px;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    line-height: 1;
}

.cancel-countdown-button {
    top: 200px;
}

.cancel-countdown-button:active {
    box-shadow: inset 0 0 36px rgba(0,0,0,0.20), inset 0 0 6px rgba(248, 199, 131, 1) !important;
}

/* ==================== ОКНО ВВОДА ИМЕНИ ==================== */
.nickname-error {
    position: absolute;
    top: 278px;
    left: 62px;
    width: 250px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #FF6B6B;
    text-align: center;
    z-index: 15;
    min-height: 16px;
}

.nickname-hint {
    position: absolute;
    top: 236px;
    left: 62px;
    width: 250px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: rgba(242, 242, 242, 0.6);
    text-align: center;
    z-index: 15;
    line-height: 1.4;
}

.nickname-hint-line1,
.nickname-hint-line2,
.nickname-hint-line3 {
    white-space: nowrap;
}

#nickname-modal .description-text {
    top: 148px;
}

/* ==================== ОКНО ПОДТВЕРЖДЕНИЯ ИМЕНИ ==================== */
#nickname-confirm-modal .confirmation-text {
    top: 145px;
}

#nickname-confirm-modal .nickname-preview {
    position: absolute;
    top: 175px;
    left: 62px;
    width: 250px;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    z-index: 15;
    word-break: break-all;
}

#nickname-confirm-modal .buttons-horizontal {
    top: 218px;
}

#nickname-confirm-modal .menu-button-item {
    width: 120px;
    position: relative;
    left: auto;
}

/* ==================== ОКНО ЗАВЕРШЕНИЯ ИГРЫ ==================== */
.victory-title {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    z-index: 10;
    white-space: nowrap;
}

.score-number {
    position: absolute;
    top: 172px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 40px;
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.game-score-container {
    position: absolute;
    top: 240px;
    left: 58px;
    width: 256px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.game-score-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
}

.game-score-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
}

/* ==================== СТИЛИ ДЛЯ 5x5 ==================== */
.game-board-container .cell[style*="50px"] .tile[data-value="2"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="4"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="8"] .tile-number { font-size: 28px !important; }

.game-board-container .cell[style*="50px"] .tile[data-value="16"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="32"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="64"] .tile-number { font-size: 25px !important; }

.game-board-container .cell[style*="50px"] .tile[data-value="128"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="256"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="512"] .tile-number { font-size: 21px !important; }

.game-board-container .cell[style*="50px"] .tile[data-value="1024"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="2048"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="4096"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="8192"] .tile-number { font-size: 18px !important; }

.game-board-container .cell[style*="50px"] .tile[data-value="16384"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="32768"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="65536"] .tile-number { font-size: 14px !important; }

.game-board-container .cell[style*="50px"] .tile[data-value="131072"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="262144"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="524288"] .tile-number { font-size: 12px !important; }

.game-board-container .cell[style*="50px"] .tile[data-value="1048576"] .tile-number { font-size: 10px !important; }

/* ==================== МЕНЮ: КНОПКА РЕЙТИНГ ====================
   Кнопка перенесена в окно Статистики ==================== */

/* ==================== ЛИДЕРБОРД (СВАЙПЫ) ==================== */

/* Размер окна как у Языка */
.modal-leaderboard {
    height: 444px;
    overflow: hidden;
}

/* Заголовок рейтинга — по центру, ниже кнопки закрыть */
.lb-title {
    position: absolute;
    top: 140px;
    left: 62px;
    width: 250px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    text-align: center;
    z-index: 15;
    pointer-events: none;
}

/* Индикаторы страниц (dots) — внизу окна рейтинга (сохраняем отступ 74px от низа) */
.lb-dots {
    position: absolute;
    top: 518px;
    left: 62px;
    width: 250px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 15;
}

.lb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background 0.2s;
}

.lb-dot.active {
    background: rgba(255,255,255,0.8);
}

/* Область содержимого — как в окне Язык */
.lb-content {
    position: absolute;
    top: 165px;
    left: 58px;
    width: 275px;
    height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    z-index: 15;
    padding-right: 16px;
    box-sizing: border-box;
}

/* Скроллбар как в окне Язык */
.lb-content::-webkit-scrollbar {
    width: 4px;
}

.lb-content::-webkit-scrollbar-track {
    background: transparent;
}

.lb-content::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.3);
    border-radius: 2px;
}

/* Индикаторы состояния — на уровне 6-й строки таблицы */
.lb-loading,
.lb-error,
.lb-empty {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 350px;
    padding-top: 160px;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
    text-align: center;
}

/* Таблица лидерборда */
.lb-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
}

.lb-row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    border-radius: 8px;
    padding: 0 4px;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    background: transparent;
}

/* Разделитель */
.lb-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,0.4);
    letter-spacing: 2px;
}

/* Собственная строка игрока — светлое выделение */
.lb-row-me {
    background: rgba(255,255,255,0.08);
    font-weight: 500;
}

/* Колонки */
.lb-col-rank {
    width: 36px;
    min-width: 36px;
    flex-shrink: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    text-align: left;
    padding-left: 4px;
}

.lb-col-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px 0 4px;
}

.lb-col-rating {
    width: 70px;
    flex-shrink: 0;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
}

/* ===== Модальное окно бонуса за рекламу ===== */

.modal-ad-reward {
    width: 303px;
    height: 200px;
    position: absolute;
    left: 36px;
    top: 98px;
    border-radius: var(--border-radius-large);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-panel);
}

#ad-reward-modal .menu-button-right-close {
    top: 111px;
    right: 59px;
}

.ad-reward-title {
    position: absolute;
    left: 50%;
    top: 140px;
    transform: translateX(-50%);
    width: 260px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    line-height: 1.4;
    z-index: 10;
}

.ad-reward-value {
    position: absolute;
    left: 50%;
    top: 190px;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    line-height: 1;
    z-index: 10;
}

#ad-reward-modal .ad-reward-button {
    position: absolute;
    left: 58px;
    top: 234px;
    width: 259px;
}

/* Corner-button кликабельна когда показывает "+" (счётчик = 0) */
.corner-button.clickable-plus {
    pointer-events: auto;
    cursor: pointer;
}

.corner-button.clickable-plus .corner-button-text {
    pointer-events: none;
}

/* ==================== ПОДДЕРЖКА ПЛАНШЕТОВ ==================== */
/* Масштабирование canvas теперь выполняется динамически через JS (updateCanvasScale в game.js) */

/* ===== TV Mode ===== */
body.tv-mode {
    font-size: 120%;
}

body.tv-mode button,
body.tv-mode .mode-card,
body.tv-mode .cheat-btn {
    min-height: 56px;
    min-width: 56px;
    cursor: pointer;
}

/* Focus indicator for TV navigation */
body.tv-mode *:focus {
    outline: 3px solid #f5c842 !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(245, 200, 66, 0.3);
}

body.tv-mode button:focus,
body.tv-mode .mode-card:focus,
body.tv-mode .cheat-btn:focus {
    outline: 3px solid #f5c842 !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(245, 200, 66, 0.3);
    transform: scale(1.05);
    transition: transform 0.15s ease;
}

/* Larger touch targets for TV */
body.tv-mode .game-header,
body.tv-mode .score-container {
    font-size: 1.2em;
}