* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
    /* === ЖЕСТКАЯ БЛОКИРОВКА ВЫДЕЛЕНИЯ === */
    user-select: none; 
    -webkit-user-select: none; /* Фикс выделения для Safari/iOS */
    -webkit-touch-callout: none; /* Отключает всплывающее меню (копировать/вставить) при долгом нажатии */
    
    /* ИСПРАВЛЕНИЕ: touch-action: none полностью блокирует системный зум */
    touch-action: none;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* --- ФИКС ВЫСОТЫ ДЛЯ МОБИЛОК --- */
    height: 100vh; 
    height: 100dvh; 
    height: calc(var(--vh, 1vh) * 100); 
    /* ------------------------------- */

    font-family: sans-serif;
    overflow: hidden; /* Запрещаем скролл */
    
    /* === ТОТАЛЬНАЯ БЛОКИРОВКА ЗУМА === */
    touch-action: none; /* Жестко запрещает двойной тап для лупы на всем экране */
    overscroll-behavior: none; /* Отключает "резиновый" скролл браузера */
    
    /* Фоновый градиент игры */
    background: linear-gradient(180deg, #01662e 0%, #208950 50%, #0f7843 100%);
}

#game-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    
    /* === НОВОЕ: Броня от прилипания к краям === */
    /* Гарантируем минимум 15px отступа, а если на телефоне есть "челка" или "шторка" снизу - отступ автоматически станет больше! */
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    
    /* Обязательно, чтобы padding не увеличил общую высоту контейнера больше 100% */
    box-sizing: border-box; 
}

#play-area {
    width: 100%;
    /* УДАЛЕНО: flex-grow: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Минимальные отступы, чтобы поле не липло к барам вплотную */
    padding: 10px 0; 
}

/* Контейнер самой сетки */
#grid {
    display: grid;
    gap: 0;
    background-color: transparent;
    border: 2px solid #444;
    border-radius: 0;
    padding: 0;
    transition: border-color 0.4s ease; /* Плавное исчезновение внешней рамки */
}

/* Прячем внешнюю рамку при просмотре */
body.show-preview #grid {
    border-color: transparent;
}

/* Пустые слоты, куда будем класть тайлы */
.grid-slot {
    /* Делаем саму ячейку полностью прозрачной, чтобы было видно градиент поля */
    background-color: transparent;

    outline-offset: -1px;
    border-radius: 0;
    /* Убираем обычный border, который раздвигает ячейки */
    border: none; 
    /* Рисуем обводку внутри ячейки с помощью тени (1px) */
    box-shadow: inset 0 0 0 0.7px rgba(255, 255, 255, 0.1);
    /* Гарантируем, что размеры считаются строго по краям ячейки */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: outline-color 0.4s ease, background-color 0.4s ease; /* Плавность для исчезновения линий */
}

/* Прячем внутренние линии и фон ячеек при просмотре */
body.show-preview .grid-slot {
    outline-color: transparent;
    background-color: transparent;
}

/* Внешний вид тайла */
.tile {
    position: absolute;
    width: var(--std-tile-width, 80px);
    height: var(--std-tile-height, 105px);
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    
    /* ИСПРАВЛЕНИЕ КРОПА: Фон теперь строго привязан к размерам самой карточки! */
    background-size: calc(100% * var(--grid-cols, 4)) calc(100% * var(--grid-rows, 4));
    
    cursor: grab;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.2s ease, left 0.3s ease, width 0.2s ease, height 0.2s ease;
    touch-action: none;
}

.tile:active {
    cursor: grabbing;
}

/* Нижний UI */
#bottom-ui {
    width: var(--grid-width, 320px);
    
    /* === ЖЕЛЕЗОБЕТОННЫЙ ОТСТУП СНИЗУ === */
    /* Теперь бар физически не сможет опуститься к самому краю экрана */
    margin: 0 auto max(5px, env(safe-area-inset-bottom)) auto; 
    
    height: auto; 
    padding: 10px 0 15px 0; 
    display: flex;
    justify-content: space-between;
    align-items: center; 
    gap: 15px; 
    transition: width 0.3s ease;
}

/* Зона колоды карт */
#deck-area {
    display: flex;
    align-items: center;
    /* Строго прижимаем колоду вправо */
    justify-content: flex-end; 
    
    /* Отступ между открытыми картами и самой колодой */
    gap: 15px; 
}

#moves-container {
    font-family: sans-serif;
    color: white;
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.2;
}

#moves-text {
    font-size: 3rem;
    font-weight: bold;
    color: #ffcc00;
}

/* Состояние тайла, когда он стоит на сетке */
.tile.on-grid {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    
    /* === ИСПРАВЛЕНИЕ === */
    /* Убрали !important, чтобы разрешить карточке трястись! */
    transform: translateZ(0);
    
    cursor: default;
    width: 100% !important;
    height: 100% !important;
    box-shadow: none;
    z-index: 10;
}

/* Состояние тайла при перетаскивании */
.tile.dragging {
    position: absolute !important;
    /* Увеличили время до 0.9s. 
       cubic-bezier(0.1, 1, 0.2, 1) дает резкий старт и очень долгое, плавное замедление */
    transition: transform 2.0s cubic-bezier(0.1, 1, 0.2, 1), width 2.0s cubic-bezier(0.1, 1, 0.2, 1), height 2.0s cubic-bezier(0.1, 1, 0.2, 1) !important;
    z-index: 10 !important; 
    pointer-events: none;
    box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}

/* Стартовая точка для магии выезда карты из-под пальца */
.drag-start {
    transition: none !important; /* Мгновенно фиксируем стартовую точку */
}

#open-pile {
    position: relative;
    /* Ширина и высота будут задаваться в JS под размер тайла */
}

#deck-pile {
    position: relative;
    background-color: transparent;
    background-image: url('assets/game/card_shirt.webp');
    background-size: cover;
    background-position: center;
    border: 4px solid white;
    border-radius: 0;
    box-sizing: border-box;
    cursor: pointer;
    
    /* Эффект 3D-стопки. Рисуем белый объем снизу и сдвигаем саму карту вверх */
    box-shadow: 0 var(--deck-thickness, 16px) 0 0 white;
    transform: translateY(calc(-1 * var(--deck-thickness, 16px)));
    
    /* Плавное "сдувание" колоды при взятии карты */
    transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#deck-pile:active {
    transform: scale(0.95); /* Эффект нажатия на колоду */
}

#deck-count {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    color: #0a1157;
    
    /* Уменьшили размер текста и отступы */
    font-size: 20px;
    font-weight: 900;
    padding: 3px 8px;
    
    border-bottom-right-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- Состояние пустой колоды --- */
#deck-pile.deck-empty {
    background-image: none; /* Убираем скин */
    background-color: #1f7843; /* Заливаем светло зеленым */
    border: 2px solid #175932; /* Зеленая рамка, тоньше в 2 раза (была 4px) */
}

/* Когда колода пуста, растягиваем контейнер счетчика на весь блок, чтобы иконка встала по центру */
#deck-pile.deck-empty #deck-count {
    width: 100%;
    height: 100%;
    background-color: transparent; /* Убираем белый фон цифры */
    border-radius: 0; /* Убираем скругление угла */
}

/* Улучшенная бесшовная 3D анимация полета */
.tile.flipping {
    animation: flipAndFly 0.2s ease-out forwards;
    z-index: 100 !important; /* Лететь поверх всего экрана */
    pointer-events: none; /* Чтобы игрок не схватил карту в полете */
}

/* Анимация движения от колоды к месту с подкидыванием по дуге (y / 2 - 30px) */
@keyframes flipAndFly {
    /* Начинаем полет с размера розовой колоды (var(--fly-scale)) */
    0% { transform: translate(var(--fly-x), var(--fly-y)) rotateY(-180deg) scale(var(--fly-scale)); }
    /* В середине полета плавно уменьшаемся до нормального размера */
    50% { transform: translate(calc(var(--fly-x) / 2), calc(var(--fly-y) / 2)) rotateY(-90deg) scale(1.02); }
    100% { transform: translate(0, 0) rotateY(0deg) scale(1); }
}

/* Розовая рубашка, которая накладывается поверх летящей карточки */
.tile.flipping::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Убираем старый розовый цвет и ставим новый скин */
    background-color: transparent;
    background-image: url('assets/game/card_shirt.webp');
    background-size: cover;
    background-position: center;
    
    /* Добавляем белую рамку, как у колоды */
    border: 4px solid white;
    border-radius: 0;
    box-sizing: border-box;
    /* Анимация исчезает РОВНО на 50%, когда карточка повернута боком */
    animation: hidePinkBack 0.2s step-end forwards;
}

@keyframes hidePinkBack {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

/* Картинка-подсказка внутри каждого слота сетки */
.preview-tile {
    position: absolute;
    width: calc(100% + 1.5px) !important;
    height: calc(100% + 1.5px) !important;
    left: -0.75px !important;
    top: -0.75px !important;
    
    /* ИСПРАВЛЕНИЕ КРОПА ПОДЛОЖКИ */
    background-size: calc(100% * var(--grid-cols, 4)) calc(100% * var(--grid-rows, 4));
    
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

/* === МАГИЯ ПОКАЗА ПОДЛОЖКИ === */
/* Как только карточка встала на поле (и если она не трясется от ошибки), 
   мы делаем подложку яркой. Она сольется с карточкой и закроет все швы! */
.grid-slot:has(.tile.on-grid:not(.shake)) .preview-tile {
    opacity: 1 !important;
}

/* Когда нажали на глазик, показываем картинку на 100% */
body.show-preview .preview-tile {
    opacity: 1; /* Теперь картинка полностью яркая */
}

/* Состояние карточки в момент полета от подсказки */
.tile.hint-animating {
    position: absolute !important;
    transition: left 0.5s ease-in-out, top 0.5s ease-in-out, transform 0.5s ease !important;
    z-index: 1000 !important;
    box-shadow: 0 10px 20px rgba(255, 204, 0, 0.4); /* Золотистая тень во время полета */
}

/* Подсветка ячейки при наведении карточки */
.grid-slot.drag-over {
    background-color: rgba(255, 255, 255, 0.2); /* Делаем заливку светлее */
    outline-color: rgba(255, 255, 255, 0.5); /* Подсвечиваем рамку */
}

/* Анимация ошибки (тряска) */
.tile.shake {
    /* Увеличили время до 0.3с */
    animation: shakeAnim 0.3s ease-in-out !important;
    pointer-events: none; 
}

@keyframes shakeAnim {
    0%, 100% { transform: translateX(0) translateZ(0); }
    20% { transform: translateX(-5px) translateZ(0); } 
    40% { transform: translateX(5px) translateZ(0); }  
    60% { transform: translateX(-5px) translateZ(0); }
    80% { transform: translateX(5px) translateZ(0); }
}

/* Анимация подпрыгивания колоды (подсказка взять новую карту) */
.deck-jump {
    animation: jumpAnim 0.5s ease-in-out;
}

@keyframes jumpAnim {
    0%, 100% { transform: translateY(calc(-1 * var(--deck-thickness, 0px))); }
    30% { transform: translateY(calc(-15px - var(--deck-thickness, 0px))); } /* Прыжок вверх */
    50% { transform: translateY(calc(-1 * var(--deck-thickness, 0px))); }    /* Приземление на стопку */
    70% { transform: translateY(calc(-7px - var(--deck-thickness, 0px))); }  /* Отскок */
}

/* --- Главное Меню --- */
#main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/backgrounds/bg_home.webp');
    background-size: cover; /* Заполняет весь экран без искажений */
    background-position: center;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Сдвигаем всё вниз */
    align-items: center;
    /* === ИСПРАВЛЕНИЕ === */
    /* Теперь отступ всегда 15% от ВЫСОТЫ экрана, а не от ширины! Плюс защита для айфонов с полоской снизу */
    padding-bottom: max(15vh, calc(60px + env(safe-area-inset-bottom)));
    transition: opacity 0.3s ease;
}

#main-menu.hidden {
    opacity: 0;
    pointer-events: none; /* Чтобы нельзя было нажать невидимую кнопку */
}

/* === Логотип на главном экране === */
.main-menu-logo {
    position: absolute;
    /* Размещаем ниже верхней панели (баланса) */
    top: max(14vh, calc(95px + env(safe-area-inset-top)));
    /* Центрируем со сдвигом на 5px (как в прелоадере, из-за асимметрии картинки) */
    left: 50%; 
    transform: translateX(calc(-50% + 5px));
    
    /* Размеры меньше, чем в прелоадере (было 78vw и 480px) */
    width: min(65vw, 360px); 
    height: auto;
    max-height: 28vh;
    object-fit: contain;
    
    pointer-events: none; /* Чтобы клики проходили сквозь логотип, если под ним что-то будет */
    z-index: 5;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

/* Кнопка Играть */
.play-btn-wrap {
    position: relative;
    display: inline-block;
    margin: 38px 0 18px; z-index: 1;
    transition: transform 0.2s;
}
.play-btn-wrap:hover { transform: scale(1.04); }
.play-btn-wrap:active { transform: scale(0.96); }

.play-btn-level-tag {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -40%);
    width: 50vw; max-width: 190px;
    pointer-events: none; z-index: 1;
}

.play-btn-level-tag-img {
    width: 100%; height: auto; display: block;
}

.play-btn-level-tag-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center; /* Жестко центрируем по вертикали (вместо flex-start) */
    justify-content: center;
    /* Если у ленточки внизу есть "хвостик", мы чуть-чуть приподнимаем текст от математического центра */
    padding-bottom: 6%; 
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    /* Увеличили минимальный размер с 12px до 14px и порог роста (было 3.2vw, стало 4.5vw) */
    font-size: clamp(14px, 4.5vw, 19px);
    color: #3A2939;
    white-space: nowrap;
}
.play-btn {
    position: relative;
    width: 72vw; max-width: 272px;
    border: none; padding: 0;
    cursor: pointer; display: block;
    z-index: 2;
    background: none;
    min-height: 60px;
    /* Убираем синюю обводку при нажатии на мобилках */
    outline: none; 
    -webkit-tap-highlight-color: transparent; 
}

.play-btn:disabled { opacity: 0.4; cursor: default; }
.play-btn:disabled ~ * { opacity: 0.4; }
.play-btn-wrap:has(#btnPlay:disabled) { opacity: 0.4; pointer-events: none; }

.play-btn-img { width: 100%; height: auto; display: block; border-radius: 20px; }

.play-btn-label {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding-bottom: 5%;
    font-family: 'Nunito', sans-serif; font-weight: 900;
    font-size: clamp(22px, 6.4vw, 38px);
    color: #ffffff;
    -webkit-text-stroke: 2px rgba(0,0,0,0.25);
    text-shadow: 0 3px 0 rgba(0,0,0,0.2);
    paint-order: stroke fill;
    pointer-events: none;
    letter-spacing: 1px;
}

/* Класс in-menu: жестко скрываем ТОЛЬКО игровой контейнер, чтобы прелоадер и модалки работали */
body.in-menu #game-container {
    display: none !important;
}

/* --- Дизайн игрового поля (вдавленное зеленое сукно) --- */
#grid {
    display: grid;
    gap: 0; /* Жестко запрещаем любые микро-отступы между ячейками */
    padding: 0;
    
    /* === ИСПРАВЛЕНИЕ СДВИГА КАРТИНОК === */
    /* Запрещаем рамке съедать внутренний размер поля, теперь картинка совпадет 1:1 */
    box-sizing: content-box; 
    
    /* Радиальный градиент по твоим цветам */
    background: radial-gradient(circle, #1e683f 0%, #115933 100%);
    
    /* Эффект вдавленности: внутренние темные тени сверху + внешний светлый блик снизу */
    box-shadow: 
        inset 0 6px 15px rgba(0, 0, 0, 0.7), 
        inset 0 2px 4px rgba(0, 0, 0, 0.8), 
        0 1px 2px rgba(255, 255, 255, 0.15);
    
    /* Тонкая темная рамка для четкого края углубления */
    border: 3px solid #175932; 

    /* Чтобы ячейки не вылезали за скругленные края поля */
    overflow: hidden; 
}

/* --- Анимация возврата карт в колоду (с переворотом и сменой скина) --- */
.returning-to-deck {
    /* Запускаем анимацию на 0.15 секунды */
    animation: returnFlip 0.15s ease-in-out forwards !important;
    z-index: 100 !important; /* Чтобы карты летели поверх всех остальных элементов */
}

@keyframes returnFlip {
    0% { transform: translate(0, 0) rotateY(0deg) scale(1); }
    50% { transform: translate(calc(var(--fly-x) / 2), calc(var(--fly-y) / 2)) rotateY(90deg) scale(1.05); }
    100% { transform: translate(var(--fly-x), var(--fly-y)) rotateY(180deg) scale(1); }
}

/* Жесткий класс для подмены картинки, который мы повесим через JS */
.returning-to-deck.flipped-back {
    background-image: url('assets/game/card_shirt.webp') !important;
    background-size: cover !important; /* ВОТ ЭТА СТРОЧКА ИСПРАВЛЯЕТ РАСТЯГИВАНИЕ */
    background-position: center !important;
    border: 4px solid white !important;
    border-radius: 0 !important;
}

/* Жесткое скрытие колоды, перебивающее любые анимации кликов */
.force-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* --- Верхнее меню (Баланс и Настройки) --- */
.menu-top {
    display: flex; 
    align-items: center;
    justify-content: space-between;
    width: 100%; 
    padding: 12px 16px; 
    gap: 6px;
    
    /* Прибиваем меню к самому верху экрана и учитываем отступы */
    position: absolute; 
    top: 0; 
    left: 0;
    box-sizing: border-box;
}

.menu-top .balance-bar { 
    margin-left: 0; /* Баланс теперь слева */
}

@media (min-width: 768px) {
    .menu-top { padding: 14px 16px; }
}
@media (max-width: 380px) {
    .menu-top { padding: 6px 4px; gap: 4px; }
}

/* --- Стили для плашки баланса (Адаптивные - уменьшены на 30%) --- */
.balance-bar {
    position: relative; 
    display: inline-block;
    /* Уменьшили макс. ширину с 181 до 126px, высоту с 62 до 43px */
    width: min(26.6vw, 126px); 
    height: min(9.1vw, 43px); 
    overflow: visible;
    cursor: pointer; 
    border: none; 
    background: none; 
    flex-shrink: 0;
    transition: transform 0.15s;
    padding-right: min(4.9vw, 22px);
}
.balance-bar:hover { transform: scale(1.05); } 
.balance-bar:active { transform: scale(0.96); }

.balance-amount {
    position: relative; /* Изменили с absolute, так как теперь внутри flex-прямоугольника */
    display: flex; align-items: center; justify-content: center;
    font-family: 'Nunito', sans-serif; font-weight: 900; 
    font-size: min(3.8vw, 18px);
    line-height: 1; white-space: nowrap; z-index: 1;
}

/* Дополнительное масштабирование баланса для маленьких экранов */
@media (max-width: 500px) {
    .balance-bar { 
        width: min(23.8vw, 114px); 
        height: min(8.1vw, 39px); 
        padding-right: min(4.4vw, 20px); 
    }
    .balance-amount { 
        font-size: min(3vw, 14px); 
    }
    .settings-btn, .back-btn {
        width: min(8.1vw, 39px); 
        height: min(8.1vw, 39px);
    }
}

/* --- Кнопки Настройки и Назад (Уменьшены на 30%) --- */
.settings-btn, .back-btn {
    /* Было 62px, стало 43px */
    width: min(9.1vw, 43px); height: min(9.1vw, 43px);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: none; padding: 0; flex-shrink: 0; transition: transform 0.2s;
    outline: none; -webkit-tap-highlight-color: transparent;
}
.settings-btn img, .back-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.settings-btn:hover, .back-btn:hover { transform: scale(1.1); }
.settings-btn:active, .back-btn:active { transform: scale(0.95); }

/* Группа элементов слева в главном меню (Баланс + Реклама) */
.menu-top-left {
    display: flex;
    align-items: center;
    gap: 12px; /* Расстояние между монетами и иконкой рекламы */
}

/* ==========================================================
   Плавающая иконка "Без рекламы" (Слева по центру экрана) 
   ========================================================== */
.no-ads-icon-btn {
    position: absolute;
    top: 50%;
    left: 10px; /* Отступ от левого края экрана */
    transform: translateY(-50%); /* Идеальное центрирование по вертикали */
    z-index: 9999; /* Поверх всех меню и игрового стола */
    
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    
    /* Размеры увеличены ровно в 1.5 раза (было 35-45, стало 52-67) */
    width: clamp(52px, 15vw, 67px); 
    height: clamp(52px, 15vw, 67px);
    
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}

.no-ads-icon-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); /* Тень усилена для большой иконки */
}

/* Эффекты нажатия (важно сохранить translateY, чтобы кнопка не прыгала) */
.no-ads-icon-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

.no-ads-icon-btn:active {
    transform: translateY(-50%) scale(0.9);
}

.back-btn {
    width: min(13vw, 62px); height: min(13vw, 62px); /* Заменили жесткие 62px на резиновые vw */
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: none; padding: 0; flex-shrink: 0; transition: transform 0.2s;
    outline: none; -webkit-tap-highlight-color: transparent;
}
.back-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.back-btn:hover { transform: scale(1.1); }
.back-btn:active { transform: scale(0.95); }

/* --- Основа Модальных Окон --- */
.modal-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    /* Ставим огромный z-index с !important, чтобы 100% перекрыть любые фоны и меню */
    z-index: 9999 !important; 
    opacity: 0; pointer-events: none; transition: opacity .3s;
}
.modal-bg.show { opacity: 1; pointer-events: all; }

/* --- Модал: Настройки --- */
.sett-panel {
    position: relative; width: min(460px, 95vw); display: flex; flex-direction: column;
    border-radius: 29px; transform: scale(0.85); transition: transform 0.35s cubic-bezier(.22,1,.36,1);
}
.modal-bg.show .sett-panel { transform: scale(1); }
.sett-card-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: fill; z-index: 0; pointer-events: none;
}
.sett-banner {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
    padding: 0 12% 0 12%;
}
.sett-banner-img { width: 100%; display: block; }
.sett-banner-text {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'Nunito', sans-serif; font-size: clamp(18px, 7vw, 34px); font-weight: 900;
    color: #88381B; pointer-events: none;
}
.sett-close-btn {
    position: absolute; top: -3%; right: -3%; width: 10.4%; aspect-ratio: 1;
    border: none; background: none; padding: 0; cursor: pointer; z-index: 20; transition: transform 0.15s;
    outline: none; -webkit-tap-highlight-color: transparent;
}
.sett-close-btn:hover { transform: scale(1.1); }
.sett-close-btn:active { transform: scale(0.95); }
.sett-close-btn .sett-close-bg { width: 100%; height: 100%; display: block; }
.sett-body {
    position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px;
    padding: 14px 26px 44px 26px;
}
.sett-btn-img-wrap {
    position: relative; width: 100%; height: 62px; border: none; background: none; padding: 0;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s;
    outline: none; -webkit-tap-highlight-color: transparent;
}
.sett-btn-img-wrap.sett-tall { height: 81px; }
.sett-btn-img-wrap:hover { transform: scale(1.03); }
.sett-btn-img-wrap:active { transform: scale(0.97); }
.sett-btn-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; border-radius: 19px; }
.sett-btn-content { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; pointer-events: none; }
.sett-ic-28 { width: 34px; height: 34px; object-fit: contain; }
.sett-ic-32 { width: 38px; height: 38px; object-fit: contain; }
.sett-lbl-white-20 { font-family: 'Nunito', sans-serif; font-size: 24px; font-weight: 900; color: #FFFFFF; }
.sett-lbl-dark-14 { font-family: 'Nunito', sans-serif; font-size: 17px; font-weight: 800; color: #5a3e1e; }
.sett-toggle-row { display: flex; gap: 12px; width: 100%; }
.sett-toggle-btn {
    position: relative; flex: 1; height: 96px; border: none; background: none; padding: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: transform 0.15s;
    outline: none; -webkit-tap-highlight-color: transparent;
}
.sett-toggle-btn:hover { transform: scale(1.03); }
.sett-toggle-btn:active { transform: scale(0.97); }

/* --- Модал: Банк --- */
#modalBank {
    z-index: 10000 !important; /* Жестко делаем Банк поверх любых других окон (у них 9999) */
}

.bank-modal {
    position: relative; width: 96%; max-width: 680px; display: flex; flex-direction: column; align-items: center; gap: 14px;
    transform: translateY(60px) scale(0.85); opacity: 0; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
#modalBank.show .bank-modal { transform: translateY(0) scale(1); opacity: 1; }
.bank-header { display: flex; align-items: center; justify-content: flex-end; width: 100%; padding: 0 2px; }
.bank-close-btn {
    flex-shrink: 0; width: 54px; height: 54px; border: none; background: none; padding: 0;
    cursor: pointer; z-index: 20; transition: transform 0.15s; outline: none; -webkit-tap-highlight-color: transparent;
}
.bank-close-btn:hover { transform: scale(1.1); }
.bank-close-btn:active { transform: scale(0.95); }
.bank-close-btn img { width: 100%; height: 100%; display: block; }
.bank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; }
@media (max-width: 600px) {
    #modalBank { align-items: stretch; }
    
    /* Принудительно разрешаем скролл самому окну и ВСЕМ элементам (карточкам) внутри него */
    #modalBank .bank-modal,
    #modalBank .bank-modal * {
        touch-action: pan-y !important;
    }
    
    #modalBank .bank-modal { 
        width: 100%; 
        max-width: none; 
        margin: 0; 
        max-height: 100dvh; 
        overflow-y: auto; 
        padding: 20px 2% 30px; 
        box-sizing: border-box; 
        -webkit-overflow-scrolling: touch;
    }
    .bank-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }
}

/* --- Конфетти --- */
.confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 4000; overflow: hidden; }
.confetti-piece { position: absolute; top: -20px; width: 10px; height: 20px; animation: confettiFall linear forwards; }
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ======= ПРЕЛОАДЕР ЗАГРУЗКИ ======= */
#appLoader {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    background: #2a1a3e;
    /* Плавно убираем только цвет фона, а не весь блок! */
    transition: background-color 0.45s ease;
    overflow: hidden;
}

#appLoader.fade-out { 
    background-color: transparent; 
    pointer-events: none; 
}

/* Растворяем картинку фона и полоску загрузки */
#appLoader.fade-out .loader-splash,
#appLoader.fade-out .loader-box {
    opacity: 0;
    transition: opacity 0.45s ease;
}

.loader-splash {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.loader-box { 
    display: flex; flex-direction: column; align-items: center; position: relative; 
    z-index: 1; 
    margin-bottom: max(110px, calc(90px + env(safe-area-inset-bottom))); 
}

.loader-logo {
    position: absolute;
    top: max(10vh, calc(80px + env(safe-area-inset-top)));
    left: 50%; transform: translateX(calc(-50% + 5px));
    width: min(78vw, 480px); height: auto;
    max-height: 34vh; object-fit: contain;
    pointer-events: none; z-index: 2;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
    /* Добавляем плавность для анимации сжатия */
    transition: top 0.6s cubic-bezier(0.25, 1, 0.5, 1), width 0.6s cubic-bezier(0.25, 1, 0.5, 1), max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Состояние сжатого логотипа (конечная точка в главном меню) */
.loader-logo.shrunk {
    top: max(14vh, calc(95px + env(safe-area-inset-top)));
    width: min(65vw, 360px); 
    max-height: 28vh;
}

.loader-bar-track {
    width: min(60vw, 280px); height: 26px;
    background: url('assets/ui/loading/Loading%20Bar%20BG.webp') center / 100% 100% no-repeat;
    border-radius: 13px; overflow: hidden;
    padding: 4px 4px 2px;
    box-sizing: border-box;
}

.loader-bar-fill {
    height: 100%;
    width: 0%; /* Заполняется через JS */
    border-radius: 10px;
    background: url('assets/ui/loading/Loading%20Bar%20Fill.webp') center / cover no-repeat;
    transition: width 0.1s linear; /* Плавность для бегущей полоски */
}

/* --- Карточки Банка (Внутренние элементы и Анимации) --- */
.pk-card {
    position: relative;
    aspect-ratio: 310 / 360;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    transition: none;
}
#modalBank.show .pk-card {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: transform 0.4s cubic-bezier(0.25, 1.2, 0.5, 1), opacity 0.28s ease;
    will-change: transform, opacity;
}

/* Красивое поочередное появление карточек (веером) */
#modalBank.show .pk-card:nth-child(1) { transition-delay: 0.04s; }
#modalBank.show .pk-card:nth-child(2) { transition-delay: 0.09s; }
#modalBank.show .pk-card:nth-child(3) { transition-delay: 0.14s; }
#modalBank.show .pk-card:nth-child(4) { transition-delay: 0.19s; }
#modalBank.show .pk-card:nth-child(5) { transition-delay: 0.24s; }
#modalBank.show .pk-card:nth-child(6) { transition-delay: 0.29s; }

@media (hover: hover) and (pointer: fine) {
    #modalBank.show .pk-card:hover { transform: translateY(-3px); }
}
#modalBank.show .pk-card:active { transform: scale(0.97); }

.pk-card-bg {
    position: absolute; inset: -3%;
    width: 106%; height: 106%;
    object-fit: fill; display: block;
}

.pk-inner {
    position: absolute;
    left: 6.13%; top: 4.91%;
    width: 87.1%; height: 70%;
    pointer-events: none;
}

.pk-coin-amount {
    position: absolute;
    left: 3.23%; top: 4.91%;
    width: 93.5%; height: 17.7%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Nunito', sans-serif; font-weight: 900;
    font-size: clamp(14px, 7vw, 50px);
    color: #88381B;
    text-shadow: none;
    z-index: 2; pointer-events: none;
}

.pk-coin-icon {
    position: absolute;
    object-fit: contain;
    z-index: 2; pointer-events: none;
}

.pk-coin-single {
    left: 28.8%; top: 24%;
    width: 41.8%; height: auto;
}

.pk-coin-multi {
    left: 16.1%; top: 20%;
    width: 66.7%; height: auto;
}

.pk-price {
    position: absolute;
    left: 50%; top: 76%;
    transform: translateX(-50%);
    padding: 4px 10px;
    display: flex; align-items: center; justify-content: center;
    gap: 3px; z-index: 2; pointer-events: none;
    background: rgba(255,255,255,0.75);
    border-radius: 20px;
    border: 2px solid rgba(58,41,57,0.2);
    white-space: nowrap;
    max-width: 90%;
}

.pk-price-num {
    font-family: 'Nunito', sans-serif; font-weight: 900;
    font-size: clamp(15px, 4vw, 28px);
    color: #3A2939;
    text-shadow: none;
}

.pk-price-cur {
    font-family: 'Nunito', sans-serif; font-weight: 900;
    font-size: clamp(15px, 4vw, 28px);
    color: #3A2939;
    text-shadow: none;
}

/* --- Модал: Нет ходов / Покупка подсказок --- */
#modalTimeOut, #modalNoAds { align-items: center; justify-content: center; }

.buy-hint-modal {
    position: relative;
    width: min(460px, 95vw);
    background: none; border: none; overflow: visible;
    transform: scale(0.85);
    transition: transform 0.35s cubic-bezier(.22,1,.36,1);
}
.modal-bg.show .buy-hint-modal { transform: scale(1); }

.bh-card-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.bh-banner-img { position: absolute; left: 9.7%; top: 0%; width: 80.6%; height: 21.05%; pointer-events: none; z-index: 1; }

.bh-banner-text {
    position: absolute; left: 14.2%; top: 2.3%; width: 71.7%; height: 15.3%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Nunito', sans-serif; font-size: clamp(18px, 7.6vw, 37px); font-weight: 900;
    color: #88381B; text-align: center; z-index: 3; pointer-events: none;
    line-height: 0.9;
}

.bh-desc-text {
    position: absolute; left: 14.1%; top: 58.28%; width: 71.8%;
    font-family: 'Nunito', sans-serif; font-size: clamp(12px, 5.1vw, 25px); font-weight: 900;
    color: #3A2939; text-align: center; line-height: 1; pointer-events: none; z-index: 3;
}

.bh-close {
    position: absolute; left: 92%; top: -3.25%; width: 10.9%; height: 11.5%;
    border: none; background: none; padding: 0; cursor: pointer; z-index: 6;
    transition: transform 0.15s; outline: none; -webkit-tap-highlight-color: transparent;
}
.bh-close img { width: 100%; height: 100%; }
.bh-close:hover { transform: scale(1.1); }
.bh-close:active { transform: scale(0.95); }

/* Расположение элементов специально для окна "Нет Ходов" */
#modalTimeOut .bh-desc-text {
    left: 13.04%; top: 32.02%; width: 73.91%;
    font-size: clamp(14px, 5.4vw, 25px);
}

.sol-nm-buttons {
    position: absolute;
    left: 11.96%; top: 44.91%;
    width: 76.09%; height: 50.1%;
    display: flex; flex-direction: column;
    gap: 1.66%;
    z-index: 5;
}

/* Внутренние кнопки-плашки */
.nl-buy-btn {
    position: relative; flex: 1; height: 100%;
    border: none; background: none; padding: 0; cursor: pointer; transition: transform .15s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: 'Nunito', sans-serif; font-size: clamp(16px, 4.5vw, 24px); font-weight: 900;
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    outline: none; -webkit-tap-highlight-color: transparent;
}
.nl-buy-btn > img.nl-buy-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; border-radius: 16px; }
.nl-buy-label { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none;}
.nl-buy-coin { height: 1.6em; width: auto; }
.nl-buy-btn:hover { transform: scale(1.02); }
.nl-buy-btn:active { transform: scale(0.96); }

.sol-nm-buttons .nl-buy-btn {
    flex: 1 1 0; width: 100%; height: 0; min-height: 0;
    font-size: clamp(14px, 5vw, 24px);
}
.sol-nm-buttons .nl-buy-coin { height: 1.85em; width: auto; }
.sol-nm-buttons .nl-ad-icon  { height: 1.55em; width: auto; }
.sol-nm-buttons #timeoutCost { font-size: 1.17em; }

/* --- Фикс для слоев окна "Отключить рекламу" --- */
.bh-content-bg { 
    position: absolute; left: 9.7%; top: 24.69%; width: 80.6%; height: 48.9%; 
    pointer-events: none; z-index: 1; 
}
.bh-union { 
    position: absolute; left: 24.3%; top: 18.85%; width: 51.4%; height: 49.2%; 
    pointer-events: none; z-index: 2; object-fit: contain; 
}
.bh-icon { 
    position: absolute; left: 33.8%; top: 28.9%; width: 32.3%; height: 30.9%; 
    object-fit: contain; pointer-events: none; z-index: 3; 
}
.bh-buttons { 
    position: absolute; left: 12%; top: auto; width: 76%; height: 15%; 
    display: flex; gap: 3%; z-index: 5; 
}

/* --- Делаем кнопку "Отключить рекламу" по ширине текста --- */
#btnDisableAds {
    width: max-content; /* Ширина кнопки подстраивается под контент */
    margin: 0 auto; /* Центрируем кнопку */
    padding: 0 35px; /* Добавляем отступы по краям, чтобы текст не прилипал к границам */
}

#btnDisableAds .sett-btn-content {
    position: relative; 
    top: -4px; /* Сдвигаем текст чуть выше, компенсируя 3D-тень на картинке */
}

/* === НОВЫЙ БЛОК ХОДОВ (КВАДРАТНЫЙ) === */
.sol-moves-cell {
    display: flex; 
    /* Убрали align-self и transform, они больше не нужны, так как контейнер выравнивает всё сам */
}

.sol-moves-box {
    /* Синий градиент */
    background: linear-gradient(180deg, #328bf3 0%, #0f4b9b 100%);
    color: #fff;
    border-radius: 12px; 
    border: 2px solid rgba(255,255,255,.32);
    box-shadow:
        0 4px 8px rgba(45, 18, 4, .24),
        inset 0 2px 0 rgba(255,255,255,.28),
        inset 0 -4px 0 rgba(0,0,0,.22);
    text-shadow: 0 2px 2px rgba(0,0,0,.22);
    transition: background 0.3s ease;
    
    /* === УМЕНЬШИЛИ НА 15% === */
    width: clamp(53px, 20vw, 65px);
    aspect-ratio: 1; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.sol-moves-lbl {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    /* Уменьшили на 15% */
    font-size: clamp(8px, 3vw, 10px);
    line-height: 1;
    opacity: 0.9;
    text-transform: uppercase;
}

/* --- ЦВЕТА ЦИФРЫ ХОДОВ --- */
#solMovesNum {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    /* Уменьшили на 15% */
    font-size: clamp(20px, 6.8vw, 27px);
    line-height: 1;
    transition: color 0.3s ease;
}

.color-white { color: #ffffff; text-shadow: none; }
.color-yellow { color: #fee330; text-shadow: none; }
.color-red { color: #ff4c4c; text-shadow: none; 
}

/* Рисуем рамку отдельным слоем. Контуры внутри, свечение снаружи */
.tile.snap-success::after {
    content: '';
    position: absolute;
    inset: 0; 
    box-sizing: border-box;
    pointer-events: none;
    
    border: 2px solid #fffefc; 
    box-shadow: 
        inset 0 0 0 2px #fee330, 
        0 0 15px 4px rgba(254, 227, 48, 0.5); 
        
    animation: snapInnerGlow 0.5s ease-out forwards;
    
    /* === ИСПРАВЛЕНИЕ === */
    /* Вытаскиваем рамку на самый верх, чтобы 3D-карточка её не перекрывала */
    z-index: 20; 
}

@keyframes snapInnerGlow {
    0% {
        opacity: 0;
        transform: scale(1) translateZ(0); 
    }
    35% {
        opacity: 1;
        transform: scale(1) translateZ(0); 
    }
    100% {
        opacity: 0;
        transform: scale(0.93) translateZ(0); 
    }
}

/* --- Стили для частиц (сердечки, звезды, кружочки) --- */
.particle {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    will-change: transform;
    /* Увеличили время анимации до 0.9s (рамка пропадает за 0.6s) */
    animation: particleFly 0.9s ease-out forwards;
    /* Добавляем золотое свечение каждой частице */
    filter: drop-shadow(0 0 5px rgba(254, 227, 48, 0.9));
}

@keyframes particleFly {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        /* Уменьшаются в 0 без потери прозрачности */
        transform: translate(var(--dx), var(--dy)) scale(0);
    }
}

/* =========================================
   === ЭФФЕКТЫ ЭКРАНА ПОБЕДЫ (VICTORY) ===
   ========================================= */

/* 1. Класс для быстрого скрытия интерфейса */
.ui-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Добавляем плавность исчезновения для всех панелей, включая боковую */
#bottom-ui, #deck-area, #side-ui-right {
    transition: opacity 0.3s ease;
    position: relative; 
    z-index: 1; /* Чтобы UI был над обоями */
}

/* Для верхнего меню просто добавляем плавность, НЕ трогая его абсолютную позицию */
.menu-top {
    transition: opacity 0.3s ease;
    z-index: 10; 
}

#play-area { 
    position: relative; 
    z-index: 1; 
}

/* 2. Обои на фоне (На весь экран с запасом) */
body::before {
    content: ''; 
    position: fixed; /* Фиксируем, чтобы на ПК тянулось на весь экран */
    top: -20px; left: -20px; right: -20px; bottom: -20px; /* Запас за края экрана */
    pointer-events: none;
    z-index: 0; 
    
    background: repeating-linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px,
        transparent 1px, transparent 3px,
        rgba(255, 255, 255, 0.05) 3px, rgba(255, 255, 255, 0.05) 38px,
        transparent 38px, transparent 40px,
        rgba(255, 255, 255, 0.05) 40px, rgba(255, 255, 255, 0.05) 41px,
        transparent 41px, transparent 61px
    );
    opacity: 0; 
    transition: opacity 0.8s ease;
}

body.victory-wallpaper::before {
    opacity: 1;
}

/* 3. Анимация собранной картины (сетки) */
#grid {
    position: relative;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s, background 0.4s, box-shadow 0.4s;
}

/* Состояние победы для сетки */
#grid.victory {
    transform: scale(0.70); /* Уменьшаем сильнее, чтобы освободить место сверху и снизу */
    overflow: visible !important; /* ВАЖНО: Разрешаем рамке выйти за пределы сетки */
    border-color: transparent !important; /* Убираем бордер сукна */
    background: transparent !important; /* Убираем зеленое сукно, остаются только тайлы */
    box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important; /* Добавляем тень от готовой картины на стене */
}

/* Прячем внутренние линии ячеек у собранной картины */
#grid.victory .grid-slot {
    outline-color: transparent !important;
    background-color: transparent !important;
}

/* --- Плавное появление цельной оригинальной картинки поверх нарезок --- */
#grid::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Картинку будем передавать через переменную из JS */
    background-image: var(--full-bg);
    background-size: 100% 100%; /* Растягиваем точно по размеру сетки */
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 40; /* Ложится поверх карточек (у них z-index 10), но ПОД рамку (у нее z-index 50) */
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Включаем цельную картинку при победе */
#grid.victory::before {
    opacity: 1; /* Щели полностью перекрываются */
}

/* 4. Резкий прилет рамки (псевдоэлемент сетки) */
#grid::after {
    content: '';
    position: absolute;
    
    /* Уменьшили отрицательные значения, чтобы "натянуть" рамку глубже на картинку */
    inset: clamp(-18px, -3.5vmin, -4px);
    
    background: url('assets/game/ramka.webp') center / 100% 100% no-repeat;
    opacity: 0;
    transform: scale(1.4);
    pointer-events: none;
    z-index: 50;
    transition: opacity 0.2s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Рамка падает */
#grid.victory::after {
    opacity: 1;
    
    /* ВОЗВРАЩАЕМ 1: теперь резиновый inset сам математически точно обтягивает сетку! */
    transform: scale(1); 
}

/* --- ЭКРАН ПОБЕДЫ: ОБЕРТКА И ВЫРАВНИВАНИЕ --- */
.victory-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 200;
    pointer-events: none;
}

/* Верхняя зона: займет ровно всё место от верха до картинки */
.victory-top-zone {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Распорка: ровно по размеру уменьшенной картинки с рамкой (коэффициент 0.70) */
.victory-middle-spacer {
    height: calc(var(--grid-height, 400px) * 0.70);
    width: 100%;
    flex-shrink: 0;
}

/* Нижняя зона: займет ровно всё место от картинки до низа экрана */
.victory-bottom-zone {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px; 
    width: 100%;
    /* Строку pointer-events отсюда убрали! */
}

/* --- САМИ ЭЛЕМЕНТЫ ВНУТРИ ЗОН --- */
/* Текст над картинкой */
.victory-title {
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    line-height: 1.1;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.v-line1 {
    color: #ffffff;
    font-size: clamp(26px, 7vw, 36px);
    text-shadow: 0 3px 0 #000;
    text-transform: uppercase;
}
.v-line2 {
    color: #fee330;
    font-size: clamp(34px, 9vw, 46px);
    text-shadow: 0 3px 0 #000;
    text-transform: uppercase;
    margin-top: -4px;
}

/* Блок награды */
.victory-reward-box {
    background: linear-gradient(180deg, #328bf3 0%, #0f4b9b 100%);
    color: #fff;
    padding: 10px 20px 12px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.32);
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 5vw, 24px);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 12px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(0,0,0,.22);
    text-shadow: 0 2px 2px rgba(0,0,0,.22);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.v-coin {
    width: 1.3em;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}

/* Обёртка кнопки */
.victory-next-wrap {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.victory-next-btn {
    width: min(240px, 60vw);
    height: clamp(55px, 15vw, 75px);
    font-size: clamp(20px, 6vw, 28px);
}

/* --- АНИМАЦИИ ВЫЕЗДА ПРИ ПОБЕДЕ --- */
body.victory-wallpaper .victory-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}
body.victory-wallpaper .victory-reward-box {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}
body.victory-wallpaper .victory-next-wrap {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
    pointer-events: all; /* Кнопка становится кликабельной ТОЛЬКО на экране победы */
}

/* =========================================
   === ФИНАЛЬНАЯ ШАПКА (УМНЫЕ КРАЯ) ===
   ========================================= */
#top-ui {
    width: 100%;
    /* Отступы по краям для красоты, margin сверху скрипт задаст сам! */
    padding: 0 clamp(10px, 4vw, 20px); 
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 15;
    /* По умолчанию блок в потоке, чтобы на телефонах отталкивать поле вниз */
    position: relative;
    box-sizing: border-box;
    pointer-events: none; /* Защита, чтобы прозрачная часть шапки не мешала кликать по полю */
}

/* Возвращаем кликабельность самим кнопкам */
.top-group-left, .top-group-right {
    pointer-events: all;
}

.top-group-left {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 12px); 
}

.top-group-right {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 12px); 
}

/* Кнопка Назад */
#top-ui .back-btn {
    width: clamp(28px, 8.5vw, 34px) !important;
    height: clamp(28px, 8.5vw, 34px) !important;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
#top-ui .back-btn img { width: 100%; height: 100%; object-fit: contain; }
#top-ui .back-btn:active { transform: scale(0.9); }

/* Текст уровня */
.level-label {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(14px, 4.5vw, 18px);
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    white-space: nowrap;
    margin: 0; 
}

/* Квадратные кнопки (Глаз и Подсказка) */
.game-btn-square {
    position: relative;
    width: clamp(28px, 8.5vw, 34px);
    height: clamp(28px, 8.5vw, 34px);
    background-color: #135431;
    border-radius: 8px;
    box-shadow: inset 0 0 6px 2px #092E1A, inset 0 -1px 1px rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px; 
    cursor: pointer;
    transition: transform 0.15s, filter 0.3s ease, opacity 0.3s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.game-btn-square img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.game-btn-square:hover { transform: scale(1.1); }
.game-btn-square:active { transform: scale(0.9); }

/* --- ДОБАВЛЕННЫЙ БЛОК: Состояние неактивной кнопки --- */
.game-btn-square.disabled,
.game-btn-square.disabled:hover,
.game-btn-square.disabled:active {
    filter: grayscale(100%);
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
    transform: scale(1) !important; /* Жестко блокируем любое изменение размера */
}

/* Значок подсказок */
.hint-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #208950; 
    color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #135431; 
    line-height: 1;
    pointer-events: none;
    z-index: 3;
}

/* --- БАЛАНС В ИГРЕ (ЭЛАСТИЧНАЯ ВЕРСТКА) --- */
/* Убиваем старые отступы Главного меню и разрешаем блоку сжиматься! */
#top-ui .balance-bar { padding: 0 !important; margin: 0 !important; min-width: 0 !important; width: auto !important; }

.game-balance-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: clamp(28px, 8.5vw, 34px);
    cursor: pointer;
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.game-balance-wrap:hover { transform: scale(1.05); }
.game-balance-wrap:active { transform: scale(0.95); }

/* Прямоугольник (Тянется автоматически по размеру цифр, без лишнего места) */
.game-balance-rect {
    position: relative; 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90%; 
    background-color: #135431;
    border-radius: 6px;
    box-shadow: inset 0 0 6px 2px #092E1A, inset 0 -1px 1px rgba(255,255,255,0.1);
    
    /* Базовые отступы для ИГРЫ (без плюсика справа) */
    padding-left: calc(clamp(28px, 8.5vw, 34px) / 2 + 10px);
    padding-right: 24px;
    
    margin-left: calc(clamp(28px, 8.5vw, 34px) / 2);
    margin-right: 0;
    z-index: 1;
    
    min-width: 65px; 
    width: auto;
}

/* === Спец-отступы для ГЛАВНОГО МЕНЮ (симметрия под плюсик) === */
#btnBankMenu .game-balance-rect {
    padding-right: calc(clamp(28px, 8.5vw, 34px) / 2 + 10px);
    margin-right: calc(clamp(28px, 8.5vw, 34px) / 2);
}

.game-balance-rect .balance-amount {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(13px, 4vw, 15px);
    color: #ffffff;
    line-height: 1;
}

/* Монета */
.coin-icon-wrap {
    position: absolute;
    left: 0; 
    top: 50%;
    transform: translateY(-50%);
    width: clamp(28px, 8.5vw, 34px);
    height: clamp(28px, 8.5vw, 34px);
    z-index: 2;
    pointer-events: none;
}
.coin-icon { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }

/* Плюсик справа */
.coin-plus-wrap {
    position: absolute;
    right: 0; 
    top: 50%;
    transform: translateY(-50%);
    width: clamp(28px, 8.5vw, 34px);
    height: clamp(28px, 8.5vw, 34px);
    z-index: 2;
    pointer-events: none;
}
.coin-plus-icon { 
    width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); 
}

/* Анимация монет */
.flying-coin {
    position: absolute;
    z-index: 9999;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
    object-fit: contain;
}

/* =========================================
   === ЗАГЛУШКА ПРИ ПОВОРОТЕ ЭКРАНА (LANDSCAPE) ===
   ========================================= */
#rotate-screen {
    display: none;
    position: fixed;
    inset: 0;
    background: radial-gradient(circle, #1e683f 0%, #115933 100%);
    color: white;
    z-index: 9999999; /* Самый высокий индекс, поверх вообще всего */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(20px, 5vw, 28px);
    font-weight: 900;
    line-height: 1.4;
}

/* 
  Включаем экран-заглушку только если:
  1. Экран горизонтальный (landscape)
  2. Высота экрана меньше 600px (это значит, что это телефон, а не широкий монитор ПК) 
*/
@media screen and (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
    #rotate-screen {
        display: flex;
    }
}

/* --- АНИМАЦИЯ ЛЕТЯЩИХ МОНЕТ --- */
.flying-coin {
    position: absolute;
    /* Убрали жесткие размеры, так как скрипт сам задает ширину и высоту под иконку */
    z-index: 9999;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
    object-fit: contain;
}

/* =========================================
   === БОКОВАЯ ПАНЕЛЬ И УВЕЛИЧЕННЫЙ UI (ПК) ===
   ========================================= */

/* Контейнер боковых кнопок (создается скриптом) */
#side-ui-right {
    position: absolute;
    left: calc(50% + (var(--grid-width) / 2) + 20px);
    top: 50%;
    transform: translateY(-50%);
    
    display: flex;
    flex-direction: column;
    /* === ИСПРАВЛЕНИЕ: Уменьшили отступ в 1.5 раза === */
    gap: 23px; 
    
    z-index: 20;
    pointer-events: none;
}
/* Сами кнопки внутри контейнера кликабельны */
#side-ui-right > * {
    pointer-events: all; 
}

/* === УВЕЛИЧЕНИЕ РАЗМЕРОВ КНОПОК В ШИРОКОМ РЕЖИМЕ (Уменьшено на 30% до 43px) === */
body.wide-ui-mode #top-ui .back-btn,
body.wide-ui-mode .game-btn-square,
body.wide-ui-mode .coin-icon-wrap,
body.wide-ui-mode .coin-plus-wrap {
    width: 43px !important;
    height: 43px !important;
    border-radius: 12px;
}

/* Адаптируем высоту плашки баланса под новую монету 43px */
body.wide-ui-mode .game-balance-wrap {
    height: 43px;
}

body.wide-ui-mode .game-balance-rect {
    /* Отступы для ИГРЫ (без плюсика) */
    margin-left: 21px;
    margin-right: 0;
    padding-left: 35px; 
    padding-right: 28px; 
    border-radius: 10px;
    
    /* === ШИРИНА УВЕЛИЧЕНА В 2 РАЗА (Длинная плашка!) === */
    min-width: 140px; 
}

/* Спец-отступы для ГЛАВНОГО МЕНЮ на широком экране (под плюсик) */
body.wide-ui-mode #btnBankMenu .game-balance-rect {
    margin-right: 21px;
    padding-right: 35px;
}

/* Увеличиваем шрифты, но пропорционально новым кнопкам */
body.wide-ui-mode .game-balance-rect .balance-amount,
body.wide-ui-mode .level-label {
    font-size: 20px;
}

/* Увеличиваем значок подсказок */
body.wide-ui-mode .hint-badge {
    font-size: 13px;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    top: -6px;
    right: -6px;
}

/* === ТЕМА БАЛАНСА ДЛЯ ГЛАВНОГО МЕНЮ === */
.game-balance-rect.menu-theme {
    background-color: #FEEFD0 !important;
    /* Твое свечение: внутреннее, цвет #E0B867 */
    box-shadow: inset 0 0 8px 2px #E0B867;
}

.game-balance-rect.menu-theme .balance-amount {
    color: #47361A !important;
}

/* Фикс для позиционирования в меню */
#main-menu .balance-bar {
    width: auto !important;
    height: min(9.1vw, 43px) !important;
    padding: 0 !important;
}

/* === ПЛАВНЫЙ СДВИГ ПОЛЯ ПРИ ПОБЕДЕ НА ШИРОКОМ ЭКРАНЕ === */
#play-area {
    /* Добавляем плавность для любых перемещений */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Срабатывает только если включен широкий режим И уровень пройден */
body.wide-ui-mode.is-victory #play-area {
    /* Сдвигаем поле на 40px вниз и чуть-чуть уменьшаем (на 5%), чтобы низ рамки не уперся в край экрана */
    transform: translateY(40px) scale(0.95); 
}

/* === СТИЛЬ КНОПКИ ПОДСКАЗКИ === */
.hint-badge.ad-mode {
    background: #1a73e8 !important;
    border-color: #1152a3 !important;
    font-size: 10px !important;
    padding: 0 3px !important;
}

.hint-badge.empty-mode {
    background: #7a7a7a !important;
    border-color: #555555 !important;
}

.hint-badge.plus-mode {
    background: #4CAF50 !important; /* Зеленый цвет */
    border-color: #388E3C !important;
    font-size: 16px !important; /* Делаем плюс крупным и по центру */
    padding: 0 !important;
    font-weight: 900;
    line-height: 1;
}

.hint-badge.coin-mode {
    background: #FF9800 !important; /* Оранжевый цвет за монеты */
    border-color: #E65100 !important;
    font-size: 10px !important;
    padding: 0 3px !important;
}

/* ================================================================
   🎓 СТИЛИ ОБУЧЕНИЯ
   ================================================================ */
.tutorial-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Пропускает клики сквозь себя! */
    z-index: 8000;
}
.tutorial-overlay.hidden { display: none; }

.tut-banner {
    position: absolute; text-align: center; padding: 15px 25px; border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4); pointer-events: none;
    left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 400px;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
}
.tut-banner.show { opacity: 1; visibility: visible; }

.tut-beige {
    background-color: #Fdf5e6; /* Светло-бежевый */
    border: 2px solid #ffffff;
    color: #135431;
    font-size: clamp(16px, 4.5vw, 20px);
    font-weight: 800;
}

.tut-green {
    background-color: #135431;
    border: 2px solid #FFD700; /* Золотая обводка */
    color: #ffffff; font-weight: 800; font-size: clamp(16px, 4.5vw, 20px);
    top: -200px; /* Спрятан сверху для падения */
    transition: top 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}
.tut-green.show-drop { top: 40%; opacity: 1; visibility: visible; }

.tut-moves-count { font-size: 55px; color: #FFD700; line-height: 1; margin-top: 10px; }
.tut-moves-lbl { font-size: 16px; color: rgba(255,255,255,0.8); text-transform: uppercase; }

/* Палец */
.tut-hand {
    position: absolute; width: 80px; height: 80px; pointer-events: none;
    margin-left: -15px; margin-top: -10px; /* Чтобы кончик пальца бил в цель */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
    opacity: 0; visibility: hidden; transition: opacity 0.3s;
    object-fit: contain; /* <-- ДОБАВИЛИ: защита от сплющивания */
}
.tut-hand.show { opacity: 1; visibility: visible; }

/* Анимация перетаскивания (Шаг 1) */
@keyframes tutDrag {
    0% { transform: translate(0, 0); opacity: 0; }
    20% { opacity: 1; }
    70% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.anim-drag { animation: tutDrag 2s infinite ease-in-out; }

/* Анимация клика/пульса (Шаг 2) */
@keyframes tutPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.8); }
    100% { transform: scale(1); }
}
.anim-pulse { animation: tutPulse 1s infinite ease-in-out; }

/* ==========================================================
   🎮 3D CSS КНОПКИ ДЛЯ МОДАЛЬНЫХ ОКОН
   ========================================================== */

/* Общая база для всех 3D-кнопок */
.btn-3d {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* Расстояние между текстом и иконками */
    width: 100%;
    height: clamp(45px, 12vw, 55px);
    border: none;
    border-radius: 12px; /* Закругленные углы */
    color: #ffffff;
    font-size: clamp(14px, 4.5vw, 18px);
    font-weight: 900;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s, box-shadow 0.1s;
}

/* Настройка иконок внутри кнопок */
.btn-3d .btn-icon {
    height: 55%; /* Иконки занимают 55% высоты кнопки */
    object-fit: contain;
}

/* --- ЗЕЛЕНАЯ КНОПКА (За монеты) --- */
.btn-green {
    background: linear-gradient(to bottom, #7ED01F, #51A00C);
    box-shadow: 0 5px 0 #337D05; /* Нижняя 3D-грань */
}
/* Анимация вдавливания (кнопка опускается на 5px, а тень исчезает) */
.btn-green:active {
    transform: translateY(5px);
    box-shadow: 0 0px 0 #337D05; 
}

/* --- ОРАНЖЕВАЯ КНОПКА (За рекламу) --- */
.btn-orange {
    background: linear-gradient(to bottom, #FFA008, #FE760E);
    box-shadow: 0 5px 0 #C95403; /* Нижняя 3D-грань */
}
/* Анимация вдавливания */
.btn-orange:active {
    transform: translateY(5px);
    box-shadow: 0 0px 0 #C95403; 
}