:root { 
    --neon-blue: #00f3ff; 
    --neon-pink: #ff00ff; 
    --neon-green: #00ff88; /* STRICT GREEN */
    --neon-purple: #b800ff;
    --bg-dark: #000000; 
    --gold: #ffd700; 
    --gold-dark: #b8860b;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Шрифты — одним местом, чтобы набор можно было поменять двумя строками.
       Выбор владельца (22.08): Golos Text везде, как в макете «единый редизайн».
       Два запасных набора (раскомментировать нужный, закомментировав активный):
         • полностью техно (как было на сервере):
             --font-display: Orbitron, sans-serif;
             --font-body: Rajdhani, sans-serif;
           — учтите: ни Orbitron, ни Rajdhani не содержат кириллицы, русский текст
             подставляется системным шрифтом;
         • гибрид (техно на английских ярлыках, Golos Text на текстах):
             --font-display: Orbitron, sans-serif;
             --font-body: Golos Text, sans-serif;
       Все три семейства подключены в index.html, менять там ничего не нужно. */
    --font-display: 'Golos Text', sans-serif;
    --font-body: 'Golos Text', sans-serif;
    
    /* Gift Colors */
    --color-heart: #ff0055;
    --color-spy: #ffd700;
    --color-xray: #00f3ff;

    /* Безопасные зоны устройства (тикет 18): чёлка/динамический остров сверху, полоса
       жеста «домой» снизу. Через переменные, а не env() россыпью по файлу, — так все
       отступы правятся в одном месте и их можно проверить на обычном экране, подменив
       значения. На устройствах без вырезов обе равны нулю, вид не меняется. */
    /* В полноэкранном режиме (requestFullscreen в script.js) поверх страницы висят
       собственные плавающие кнопки Telegram — Закрыть слева, меню справа.
       --tg-content-safe-area-inset-top отдаёт их высоту, чтобы шапка приложения не
       оказалась под ними. Старые клиенты этих переменных не отдают — тогда работает
       прежний env(safe-area-inset-top), как и раньше. */
    --safe-top: calc(
        var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px))
        + var(--tg-content-safe-area-inset-top, 0px)
    );
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* --- GLOBAL LAYOUT & TYPOGRAPHY --- */
body { 
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: #fff;
    /* Страховка сверх tg.disableVerticalSwipes() (script.js): протяжка внутри самого
       приложения нигде не должна долетать до нативного жеста закрытия Telegram. */
    overscroll-behavior: none;
    /* Высота реально видимой области, а не «всего экрана» (тикет 18): --app-height ставит
       script.js по visualViewport, поэтому клавиатура на Android ужимает приложение вместо
       того, чтобы задвинуть его низ под себя. 100dvh — запасной вариант до первого замера. */
    height: var(--app-height, 100dvh);
    overflow: hidden;
    display: flex; justify-content: center;
}

#app-container {
    width: 100%;
    max-width: 500px; 
    height: 100%;
    background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 50%, #000 100%);
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
}

.screen { 
    display: none; 
    flex: 1; 
    flex-direction: column; 
    width: 100%; 
    height: 100%;
    position: relative; 
}
.screen.active { display: flex; }

/* --- SCROLL FIXES --- */
.scroll-content {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    /* 120px — место под нижнюю навигацию; плюс полоса жеста, иначе последний элемент
       списка не долистывается до конца на iPhone (тикет 18) */
    padding-bottom: calc(120px + var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
    /* Протяжка за край списка не должна утягивать за собой всё мини-приложение */
    overscroll-behavior: contain;
    min-height: 0;  /* см. пояснение у .chat-area */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* старый Edge */
}
.scroll-content::-webkit-scrollbar { display: none; }  /* тот же приём, что у .pack-carousel */

/* --- LOBBY STYLES --- */
/* Шапки экранов держат кнопки («настройки», «назад»), поэтому отступ сверху отсчитывается
   от чёлки, а не от края экрана (тикет 18). Тот же приём — у .game-header и .chat-header-room. */
.header { padding: calc(60px + var(--safe-top)) 20px 20px; text-align: center; z-index: 10; position: relative; }
/* Кнопка назад на экране Правил раньше просто шла вторым блоком под заголовком (не было
   общей строки) — теперь стоит слева на той же высоте, что и центрированный заголовок,
   не трогая .header для остальных экранов (Чаты/Магазин), где кнопки назад нет. */
.header .back-btn { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
.game-subtitle { font-size: 12px; color: rgba(255, 255, 255, 0.5); letter-spacing: 2px; text-transform: uppercase; }
.online-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px;
    background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px; margin-top: 20px; backdrop-filter: blur(10px);
    font-size: 13px; font-weight: 600; color: var(--neon-green);
}
.online-dot {
    width: 8px; height: 8px; background: var(--neon-green); border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-green); animation: pulse-gold 2s infinite;
}
@keyframes pulse-gold { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.main-content { flex: 1; display: flex; align-items: center; justify-content: center; z-index: 10; width: 100%; padding-bottom: 80px; }

/* Start Button (Gold Coin) */
.start-button {
    /* 190px вместо прежних 240px: кнопка стоит внутри колец «пульта» (.launch-dial),
       на большем размере кольца и плашки Баланса/Игрового окна наезжали на неё */
    position: relative; width: 190px; height: 190px; cursor: pointer;
    border: none; background: none; transition: transform 0.1s;
}
.start-button:active { transform: scale(0.96); }
.coin {
    position: relative; width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffed4e 0%, #ffd700 30%, #daa520 60%, #8b6914 100%);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.3), 0 20px 60px rgba(0, 0, 0, 0.6), inset -5px -5px 15px rgba(0, 0, 0, 0.4), inset 5px 5px 15px rgba(255, 237, 78, 0.6);
    display: flex; align-items: center; justify-content: center;
}
.coin::before {
    content: ''; position: absolute; inset: 12px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffed4e 0%, #ffd700 50%, #daa520 100%);
    box-shadow: inset 0 2px 5px rgba(255, 237, 78, 0.8), inset 0 -2px 5px rgba(0, 0, 0, 0.3);
}
.button-text {
    position: relative; z-index: 10; font-family: var(--font-display);
    font-size: 42px; font-weight: 900; letter-spacing: 4px; color: #1a1a1a;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Состояние поиска на Лобби (тикет 01) — подменяет золотую кнопку START, пока идёт
   подбор; переключается классом is-searching на #screen-lobby из startSearching().
   По центру — голосовая разминка (тикет 02, .warmup-card), снизу — таймер/статус/отмена. */
#screen-lobby.is-searching .start-button { display: none; }
/* Кольца вокруг кнопки жили отдельно от неё самой — прятать их забыли вместе со
   START, и они продолжали светиться позади разминки (замечено владельцем). */
#screen-lobby.is-searching .dial-ring { display: none; }
/* Чипы Баланса/Игрового окна привязаны к размеру маленькой кнопки START (см. .orbit-chip
   ниже) — карточка разминки шире и выше её, поэтому чипы на время поиска просто прячутся,
   а не сдвигаются: смысла показывать их поверх разминки всё равно нет. */
#screen-lobby.is-searching .orbit-chip { display: none; }
.search-state {
    display: none; flex-direction: column; align-items: center; gap: 20px; width: 100%; padding: 0 26px;
}
#screen-lobby.is-searching .search-state { display: flex; }
/* Во время поиска внутри «пульта» не остаётся ничего из его собственного содержимого
   (кнопка, кольца и плашки скрыты выше), поэтому его фиксированные 290×290 только зря
   сжимают карточки ожидания — особенно поле ввода своего вопроса. */
#screen-lobby.is-searching .launch-dial { width: 100%; height: auto; }
.search-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* На тёплой монете эти цвета были тёмными (см. историю), но здесь текст лежит прямо
   на фоне Лобби, поэтому светлый/золотой, а не тёмный. */
.search-wait {
    font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--gold);
}
.search-stage {
    font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45); min-height: 12px; text-align: center;
}
.search-cancel {
    font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
    color: rgba(255, 255, 255, 0.6); padding: 8px 18px;
    border: 1px solid var(--glass-border); border-radius: 16px;
    background: var(--glass-bg); backdrop-filter: blur(10px);
}
.search-cancel:active { transform: scale(0.96); }

/* Голосовая разминка (тикет 02) — вариант «Карточка вопроса», выбранный владельцем
   из 5 сравненных на витрине .scratch/queue-engagement/voice-warmup-showcase.html.
   Полностью на устройстве: getUserMedia+MediaRecorder, без /audio/upload и без
   сохранения — см. warmupRecorder в script.js. */
/* Колода занятий на время ожидания: карточки листаются пальцем вбок и защёлкиваются
   по центру. Полоса прокрутки скрыта — как и на остальных экранах приложения. */
.wait-deck {
    width: 100%; display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.wait-deck::-webkit-scrollbar { display: none; }
.wait-deck > * { flex: 0 0 100%; scroll-snap-align: center; }

.deck-dots { display: flex; gap: 7px; justify-content: center; }
.deck-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.22); transition: background 0.2s;
}
.deck-dot.active { background: var(--gold); }

.warmup-card {
    width: 100%; background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 22px; padding: 22px 18px; backdrop-filter: blur(18px);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}

.suggest-card { justify-content: flex-start; }
.suggest-input {
    width: 100%; resize: none; border-radius: 14px; padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border);
    font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: #fff;
}
.suggest-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.suggest-input:focus { outline: none; border-color: rgba(255, 215, 0, 0.4); }
.suggest-btn {
    padding: 11px 30px; border: none; border-radius: 100px;
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 50%, #daa520 100%);
    font-family: var(--font-display); font-size: 13px; font-weight: 700;
    color: #201812; cursor: pointer;
}
.suggest-btn:disabled { opacity: 0.4; cursor: default; }
.suggest-note {
    font-size: 11px; letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.45);
    text-align: center; min-height: 14px;
}
.warmup-question {
    font-family: var(--font-display); font-size: 14px; color: var(--gold);
    text-align: center; line-height: 1.5;
}
.warmup-mic {
    width: 68px; height: 68px; border-radius: 50%; cursor: pointer; border: none;
    background: linear-gradient(135deg, #ffe9a6, var(--gold) 60%, #b8860b);
    display: flex; align-items: center; justify-content: center; transition: transform 0.1s;
}
.warmup-mic:active { transform: scale(0.94); }
.warmup-mic svg { width: 28px; height: 28px; fill: #1a1a1a; }
.warmup-bars { display: flex; gap: 3px; align-items: flex-end; height: 24px; opacity: 0.25; }
.warmup-bars.live { opacity: 1; }
.warmup-bars i { width: 3px; background: var(--gold); border-radius: 2px; height: 6px; display: block; }
.warmup-bars.live i { animation: warmup-bar 0.8s ease-in-out infinite; }
.warmup-bars i:nth-child(1) { animation-delay: 0s; } .warmup-bars i:nth-child(2) { animation-delay: 0.1s; }
.warmup-bars i:nth-child(3) { animation-delay: 0.2s; } .warmup-bars i:nth-child(4) { animation-delay: 0.3s; }
.warmup-bars i:nth-child(5) { animation-delay: 0.15s; } .warmup-bars i:nth-child(6) { animation-delay: 0.25s; }
.warmup-bars i:nth-child(7) { animation-delay: 0.05s; }
@keyframes warmup-bar { 0%, 100% { height: 6px; } 50% { height: 22px; } }
.warmup-actions { display: none; gap: 10px; }
.warmup-actions.show { display: flex; }
.warmup-pill {
    font-size: 12px; padding: 8px 16px; border-radius: 14px; cursor: pointer; font-weight: 700;
    color: #1a1510; background: var(--gold); border: none;
}
/* Прослушать — справа: после записи это основное действие, а right-handed палец
   тянется к правой кнопке легче (владелец, 2026-08-27). Ещё раз — второстепенное, слева. */
.warmup-pill.ghost {
    background: transparent; color: rgba(255, 255, 255, 0.7); border: 1px solid var(--glass-border);
}
.balance {
    font-family: var(--font-display); padding: 20px; text-align: center;
    /* Отступ снизу освобождает место под нижнюю навигацию, которая сама сдвинута
       на полосу жеста — иначе баланс налезал бы на неё на iPhone (тикет 18) */
    font-size: 14px; color: rgba(255, 255, 255, 0.6); z-index: 10;
    margin-bottom: calc(130px + var(--safe-bottom));
}
.balance-amount { color: #ffd700; font-weight: 700; font-size: 18px; }

/* --- ЛОББИ: шапка в строку и «пульт» запуска ---
   Композиция взята из макета «единый редизайн» (.scratch/design-variants/unified/):
   логотип и ONLINE разведены по краям, Баланс и Игровое окно — плашками по орбите
   вокруг кнопки. Перерисовано в палитре приложения; фон экрана не трогали. */
.lobby-topbar {
    padding: calc(22px + var(--safe-top)) 22px 0;
    display: flex; align-items: center; justify-content: space-between;
    z-index: 10;
}
.lobby-mark {
    position: relative; display: inline-block;
    font-family: var(--font-display); font-size: 20px; font-weight: 900; letter-spacing: 4px;
    background: linear-gradient(120deg, #ffe9a6, var(--gold) 55%, #b8860b);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    padding-bottom: 9px;
}
/* Логотип «тёплая надпись»: тонкая линия под словом с бусиной на месте шестой доли */
.lobby-mark-rule {
    position: absolute; left: 0; right: 9px; bottom: 0; height: 2px;
    background: rgba(255, 215, 0, 0.35);
}
.lobby-mark-rule::after {
    content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}
/* В шапке лобби бейдж стоит в строку с логотипом — верхний отступ из общего правила лишний */
.lobby-topbar .online-badge { margin-top: 0; }

.lobby-stage {
    flex: 1; display: flex; align-items: center; justify-content: center;
    width: 100%; z-index: 10;
    /* Место под нижнюю навигацию, которая сама сдвинута на полосу жеста (тикет 18) */
    padding-bottom: calc(90px + var(--safe-bottom));
}
.launch-dial {
    position: relative; width: 290px; height: 290px;
    display: flex; align-items: center; justify-content: center;
}
.dial-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 215, 0, 0.10); }
.dial-ring.r2 { inset: 24px; border-color: rgba(255, 215, 0, 0.14); }
.dial-ring.r3 {
    inset: -16px; border: 1px dashed rgba(255, 215, 0, 0.18);
    animation: dial-spin 40s linear infinite;
}
@keyframes dial-spin { to { transform: rotate(360deg); } }

.orbit-chip {
    position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 16px; border-radius: 18px; min-width: 92px; text-align: center;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.orbit-chip.orbit-balance { top: -6px; right: -18px; }
.orbit-chip.orbit-window { bottom: -2px; left: -20px; }
.orbit-value {
    font-family: var(--font-display); font-size: 15px; font-weight: 800; color: #ffd700;
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}
/* Время Игрового окна — красным из палитры приложения; золото на этом экране
   остаётся за кнопкой и Балансом */
.orbit-value-window { color: var(--color-heart); text-shadow: 0 0 14px rgba(255, 0, 85, 0.3); }
.orbit-label {
    font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* --- Игровое окно закрыто ---
   START остаётся на месте (видно, что именно откроется вечером), но приглушён и под замком,
   а отсчёт с кнопкой «Напомнить» уходят заметно ниже круга: вплотную они наезжали на плашку
   «GAME WINDOW», которая висит у нижнего края колец. */
.window-lock, .window-closed-info { display: none; }

#screen-lobby.is-closed .lobby-stage { flex-direction: column; }
#screen-lobby.is-closed .start-button {
    opacity: 0.25; filter: grayscale(0.8); pointer-events: none;
}
#screen-lobby.is-closed .window-lock {
    display: block; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 6; width: 44px; height: 44px;
}
.window-lock svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, 0.9); }

#screen-lobby.is-closed .window-closed-info {
    display: block; text-align: center; margin-top: 46px; padding: 0 30px;
}
.window-closed-line {
    font-family: var(--font-body); font-size: 14px; color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px; font-variant-numeric: tabular-nums;
}
.window-remind-btn {
    padding: 14px 36px; border: none; border-radius: 100px;
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 50%, #daa520 100%);
    font-family: var(--font-display); font-size: 14px; font-weight: 700;
    color: #201812; cursor: pointer;
}
.window-remind-btn.is-on {
    background: none; border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    .dial-ring.r3 { animation: none; }
}

/* --- ЭКРАН ПОДГОТОВКИ ПАРТИИ (не путать с Sync Game в Чате) ---
   Взято из макета «единый редизайн» (.scratch/design-variants/unified/):
   два огонька сходятся навстречу друг другу внутри двух колец, вращающихся
   в разные стороны. Цвета — из палитры приложения: золото и красный Подарка
   «Сердце», то есть двое, которые вот-вот встретятся. */
.sync-screen { flex: 1; position: relative; display: flex; flex-direction: column; }
.sync-stage { flex: 0 0 62%; position: relative; display: flex; align-items: center; justify-content: center; }

.sync-orb {
    position: absolute; width: 58px; height: 58px; border-radius: 50%;
    background: var(--gold); border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.45);
    animation: sync-drift-a 2.6s cubic-bezier(.45, 0, .2, 1) infinite alternate;
}
.sync-orb.b {
    background: var(--color-heart); border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 30px rgba(255, 0, 85, 0.4);
    animation-name: sync-drift-b; animation-delay: -1.3s;
}
@keyframes sync-drift-a { 0% { transform: translate(-58px, -10px) scale(1); } 100% { transform: translate(-14px, -2px) scale(1.06); } }
@keyframes sync-drift-b { 0% { transform: translate(58px, 10px) scale(1); } 100% { transform: translate(14px, 2px) scale(1.06); } }

.sync-ring {
    position: absolute; width: 150px; height: 150px; border-radius: 50%;
    border: 1px dashed rgba(255, 215, 0, 0.25);
    animation: dial-spin 18s linear infinite;
}
.sync-ring.r2 {
    width: 190px; height: 190px; border-color: rgba(255, 0, 85, 0.16);
    animation-duration: 26s; animation-direction: reverse;
}

.sync-caption { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 6px; text-align: center; }
.sync-title {
    font-family: var(--font-display); font-size: 24px; font-weight: 900; letter-spacing: 0.02em;
    color: #fff; text-shadow: 0 0 30px rgba(255, 215, 0, 0.25);
}
.sync-sub { margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; }

@media (prefers-reduced-motion: reduce) {
    .sync-orb, .sync-ring { animation: none; }
}


/* --- NAVIGATION --- */
.bottom-nav {
    /* Полоса жеста «домой» на iPhone перекрыла бы нижний ряд кнопок (тикет 18) */
    position: absolute; bottom: calc(30px + var(--safe-bottom)); width: 90%; height: 70px; left: 5%;
    /* Раньше background:transparent — прокручиваемый контент экрана (карточки, аватары)
       был виден прямо сквозь панель и сливался с иконками. Тот же приём стекла, что у
       .input-area в чате (тоже плавающая панель поверх прокрутки) */
    background: rgba(10, 10, 16, 0.55);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 2px solid rgba(255, 200, 100, 0.2);
    border-radius: 35px; display: flex; justify-content: space-around; align-items: center; z-index: 100;
}
.nav-item {
    width: 60px; height: 50px; display: flex; align-items: center; justify-content: center;
    border-radius: 25px; position: relative; overflow: hidden; cursor: pointer; transition: all 0.3s ease;
}
.nav-item.active::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
    border-radius: 25px; animation: liquidFill 0.6s ease-out forwards; z-index: 0;
}
@keyframes liquidFill { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
.nav-icon {
    width: 28px; height: 28px; fill: rgba(255, 255, 255, 0.4);
    position: relative; z-index: 1; transition: fill 0.3s ease;
}
.nav-item.active .nav-icon { fill: #1a1510; }

/* --- SEARCH & PROCESSING --- */
.spinner {
    width: 80px; height: 80px; border: 4px solid var(--neon-blue);
    border-radius: 50%; border-top-color: transparent !important;
    animation: spin 1s linear infinite; margin-bottom: 20px;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
.neon-loader {
    width: 100px; height: 100px; border: 5px solid transparent;
    border-top-color: var(--neon-blue); border-bottom-color: var(--neon-pink);
    border-radius: 50%; animation: neon-spin 1.5s linear infinite;
    box-shadow: 0 0 20px var(--neon-blue), 0 0 20px var(--neon-pink); margin-bottom: 30px;
}
@keyframes neon-spin {
    0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); }
}
.processing-text {
    font-family: var(--font-display); font-size: 18px; font-weight: 800;
    color: var(--neon-blue); letter-spacing: 2px; text-transform: uppercase;
    animation: blink 1s infinite alternate;
}
.processing-subtext { font-size: 13px; color: #666; margin-top: 10px; letter-spacing: 1px; }
@keyframes blink { from { opacity: 1; } to { opacity: 0.5; } }

/* --- GAME SCREEN HEADER --- */
.game-header {
    /* Высота растёт на чёлку, иначе отступ сверху съел бы место у вопроса Раунда (тикет 18) */
    height: calc(200px + var(--safe-top));
    display: flex; flex-direction: column;
    z-index: 10; padding: calc(20px + var(--safe-top)) 20px 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

.top-row {
    /* Grid вместо space-between: у ROUND 1 и ✖ разная ширина, поэтому space-between
       сдвигал таймер вбок — с grid-колонкой 1fr auto 1fr таймер всегда точно по центру
       строки, вровень с серединой сетки игроков под ним (тот же паддинг 20px с обеих сторон) */
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    margin-bottom: 15px;
}
.top-row .round-info { justify-self: start; }
.top-row .timer { justify-self: center; }
.top-row .mini-exit { justify-self: end; }

.timer {
    font-family: var(--font-display); font-size: 24px; font-weight: 700;
    color: #ffd700; text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.round-info {
    font-size: 12px; color: rgba(255, 255, 255, 0.4); letter-spacing: 2px;
    text-transform: uppercase;
}

.mini-exit {
    font-size: 18px; color: #666; cursor: pointer; padding: 5px;
}

.header-display-area {
    flex: 1;
    display: flex; align-items: flex-start; justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px; border: 1px solid rgba(255, 215, 0, 0.1);
    backdrop-filter: blur(5px);
    padding: 12px 15px 24px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

/* Question View */
#question-view {
    width: 100%; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.question-text-header {
    font-size: 16px; color: rgba(255, 255, 255, 0.9); font-weight: 600;
    line-height: 1.4;
    max-width: 90%; margin: 0 auto;
}

/* --- NEW STATUS TEXT (GREEN INSTRUCTIONS) --- */
.status-dynamic {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    color: var(--neon-green);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 12px;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
    animation: pulse-green 2s infinite;
}
@keyframes pulse-green { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Spotlight View */
#spotlight-view {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hidden { display: none !important; }

.spotlight-name {
    font-family: var(--font-display); font-size: 14px; color: var(--neon-blue);
    letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase;
    text-shadow: 0 0 10px var(--neon-blue);
}

#spotlight-content {
    width: 100%; display: flex; align-items: center; justify-content: center;
}

/* Waveform Animation */
.waveform-container {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    height: 40px; width: 100%;
}
.wave-bar {
    width: 6px; background: linear-gradient(180deg, var(--gold) 0%, rgba(255, 215, 0, 0.4) 100%);
    border-radius: 3px; transform: scaleY(0.4); opacity: 0.5;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.waveform-container.active .wave-bar { animation: waveJump 0.8s ease-in-out infinite alternate; }
.waveform-container.active .wave-bar:nth-child(1) { animation-delay: 0s; height: 15px; }
.waveform-container.active .wave-bar:nth-child(2) { animation-delay: 0.1s; height: 25px; }
.waveform-container.active .wave-bar:nth-child(3) { animation-delay: 0.2s; height: 35px; }
.waveform-container.active .wave-bar:nth-child(4) { animation-delay: 0.3s; height: 40px; }
.waveform-container.active .wave-bar:nth-child(5) { animation-delay: 0.4s; height: 35px; }
.waveform-container.active .wave-bar:nth-child(6) { animation-delay: 0.5s; height: 25px; }
.waveform-container.active .wave-bar:nth-child(7) { animation-delay: 0.6s; height: 15px; }
@keyframes waveJump { 0% { transform: scaleY(0.4); opacity: 0.5; } 100% { transform: scaleY(1.2); opacity: 1; } }

/* Typewriter Text */
.typewriter-text {
    font-size: 15px; font-weight: 600; color: #fff; text-align: center;
    white-space: pre-wrap; border-right: 2px solid var(--gold);
    padding-right: 5px; animation: blinkCursor 0.75s step-end infinite;
}
@keyframes blinkCursor { 50% { border-color: transparent; } }

/* Game Grid */
.arena-grid {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
    padding: 0 20px 100px; align-content: center; position: relative;
}
#connections-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.line-normal {
    /* Приглушённое золото — тот же оттенок, что уже держит весь экран игры
       (таймер, лого, бейджи), но без свечения и с низкой непрозрачностью,
       чтобы линия не спорила с яркой золотой вспышкой мэтча */
    stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-opacity: 0.4;
    opacity: 0; animation: lineFadeIn 0.3s ease-out forwards;
}
/* Взаимный Мэтч: сперва та же плавная прорисовка, что у обычной линии, затем
   отдельная золотая вспышка (тикет 20) — и только потом уходит в спокойный
   пунктир по кругу, как было раньше */
.line-match {
    stroke: #ffd700; stroke-width: 2px; stroke-linecap: round;
    filter: drop-shadow(0 0 5px var(--gold)); stroke-dasharray: 10; opacity: 0;
    animation: lineFadeInMatch 0.3s ease-out forwards,
               dash 1s linear 0.3s infinite,
               matchFlash 0.7s ease-out 0.3s;
}
@keyframes lineFadeIn { to { opacity: 0.6; } }
@keyframes lineFadeInMatch { to { opacity: 1; } }
@keyframes dash { to { stroke-dashoffset: -20; } }
@keyframes matchFlash {
    0% { stroke-width: 2px; filter: drop-shadow(0 0 5px var(--gold)); }
    45% { stroke-width: 6px; filter: drop-shadow(0 0 22px var(--gold)) drop-shadow(0 0 36px var(--gold)); }
    100% { stroke-width: 2px; filter: drop-shadow(0 0 5px var(--gold)); }
}

/* Player Card */
.player-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; transition: all 0.3s ease; z-index: 1;
}
.avatar-wrapper {
    width: 82px; height: 82px; border-radius: 20px; position: relative;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;
    /* UPDATED FOR ANIMATIONS */
    overflow: visible !important; 
}
.avatar {
    width: 100%; height: 100%; border-radius: 20px; background-size: cover; background-position: center;
    opacity: 0.7; transition: all 0.3s ease;
    /* UPDATED FOR ANIMATIONS */
    z-index: 2; position: relative;
}
.name-tag {
    margin-top: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-display);
}
.player-card.playing .avatar-wrapper {
    border-color: #ffd700; box-shadow: 0 0 25px rgba(255, 215, 0, 0.4); transform: scale(1.05);
}
.player-card.playing .avatar { opacity: 1; }
.player-card.playing .name-tag { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.avatar.blur-mask { filter: blur(6px) grayscale(0.5); }
.avatar.reveal { filter: none !important; opacity: 1 !important; }
.status-check {
    position: absolute; top: -5px; right: -5px; width: 20px; height: 20px;
    background: #000; border: 2px solid var(--neon-green); border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-green); display: flex; align-items: center; justify-content: center; z-index: 50;
}
.status-check svg { width: 12px; height: 12px; fill: none; stroke: var(--neon-green); stroke-width: 3; }
.heart-badge {
    position: absolute; bottom: -5px; left: -5px; width: 20px; height: 20px;
    background: #000; border: 2px solid var(--color-heart); border-radius: 50%;
    box-shadow: 0 0 10px var(--color-heart); display: flex; align-items: center; justify-content: center; z-index: 50;
    /* Плавное появление вместо мгновенного display:none→flex (тикет 21) —
       карточка игрока теперь не пересоздаётся каждый опрос, поэтому переход
       успевает проиграться. */
    opacity: 0; transform: scale(0.4); pointer-events: none;
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.heart-badge.shown { opacity: 1; transform: scale(1); pointer-events: auto; }
.heart-badge svg { width: 12px; height: 12px; color: var(--color-heart); }

/* Game Controls Bar */
.game-controls {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    width: 90%; height: 80px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 40px;
    display: flex; justify-content: space-evenly; align-items: center; padding: 0 10px;
    z-index: 100; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.action-btn {
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.action-btn:active { transform: scale(0.9); background: rgba(255,255,255,0.1); }
.action-btn svg { width: 20px; height: 20px; fill: rgba(255,255,255,0.7); }
.action-btn.disabled { opacity: 0.3; pointer-events: none; }

.mic-btn {
    width: 64px; height: 64px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #444 0%, #222 100%);
    border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.mic-btn.recording {
    background: radial-gradient(circle at 30% 30%, #ff0055 0%, #b80055 100%);
    border-color: #ff0055; box-shadow: 0 0 20px rgba(255, 0, 85, 0.6);
}
.mic-btn svg { width: 28px; height: 28px; fill: #fff; }

/* Gift Button */
.gift-menu-btn svg { stroke: #ffd700; fill: none; }

/* --- VERTICAL GIFT MODAL --- */
#gift-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(15px);
    z-index: 3000; display: none; align-items: center; justify-content: center;
}
#gift-modal.active { display: flex; }
.gift-modal-content {
    width: 85%; max-width: 320px; background: rgba(20, 20, 25, 0.9);
    border: 1px solid var(--gold); border-radius: 20px; padding: 25px;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
}

/* --- BUY COINS (STARS) MODAL --- */
#stars-modal {
    /* position:fixed (не absolute) + z-index выше #recap-modal (10001) — окно
       верхнего уровня открывается как из Магазина, так и поверх окна итогов
       Партии (кнопка "+ COINS" внутри #recap-modal), см. index.html. */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(15px);
    z-index: 10002; display: none; align-items: center; justify-content: center;
}
#stars-modal.active { display: flex; }

.vertical-modal { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--gold); letter-spacing: 1px; }
.modal-close { font-size: 20px; color: #666; cursor: pointer; padding: 5px; }

.vertical-list { display: flex; flex-direction: column; gap: 12px; }
.v-item { 
    display: flex; align-items: center; padding: 12px; 
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 16px; transition: 0.2s; cursor: pointer;
}
.v-item:active { background: rgba(255,255,255,0.1); transform: scale(0.98); }

.v-icon-box { 
    width: 40px; height: 40px; border-radius: 12px; border: 1px solid currentColor; 
    display: flex; align-items: center; justify-content: center; margin-right: 15px; 
    background: rgba(0,0,0,0.3); 
}
.v-icon-box svg { width: 24px; height: 24px; }

.v-info { flex: 1; display: flex; flex-direction: column; }
.v-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.v-desc { font-size: 11px; color: rgba(255,255,255,0.5); }
.v-price { font-family: var(--font-display); font-size: 14px; color: #fff; font-weight: 700; }

/* --- CHAT LIST --- */
.screen-title {
    font-family: var(--font-display); font-size: 28px; font-weight: 900;
    letter-spacing: 4px; color: #fff; text-shadow: 0 0 20px rgba(255, 215, 0, 0.3); margin-bottom: 20px;
}
.tab-container { display: flex; justify-content: center; margin-bottom: 30px; }
.tab-box {
    background: rgba(255, 255, 255, 0.05); border-radius: 30px; padding: 4px;
    display: flex; border: 1px solid rgba(255, 215, 0, 0.2); width: 90%;
}
.tab {
    flex: 1; text-align: center; padding: 10px; border-radius: 25px;
    font-family: var(--font-display); font-size: 12px; font-weight: 700;
    color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease;
}
.tab.active {
    background: linear-gradient(90deg, #ffd700 0%, #ffaa00 100%);
    color: #000; box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.chat-list {
    padding: 0 20px; display: flex; flex-direction: column; gap: 25px;
    overflow-y: auto; padding-bottom: calc(120px + var(--safe-bottom)); flex: 1;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    min-height: 0;  /* см. пояснение у .chat-area */
}
.chat-item {
    position: relative; margin-left: 30px; background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(15px); border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 20px; padding: 20px 20px 20px 50px; height: 90px;
    display: flex; align-items: center; justify-content: space-between; cursor: pointer;
}
.chat-avatar {
    position: absolute; left: -25px; top: 50%; transform: translateY(-50%);
    width: 65px; height: 65px; border-radius: 18px; background-size: cover; background-position: center;
    border: 2px solid rgba(255, 215, 0, 0.5); box-shadow: 0 5px 15px rgba(0,0,0,0.5); background-color: #000;
}
.chat-info { display: flex; flex-direction: column; width: 100%; }
.chat-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff; }
.chat-preview { font-size: 13px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.chat-restore-btn {
    background: var(--gold); border: none; border-radius: 15px; padding: 5px 10px;
    font-size: 10px; font-weight: 700; cursor: pointer;
}

/* --- CHAT ROOM --- */
.chat-header-room {
    padding: calc(40px + var(--safe-top)) 20px 15px; display: flex; align-items: center; gap: 15px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1); background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px);
}
.back-btn {
    width: 45px; height: 45px; border-radius: 50%; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.back-icon { width: 20px; height: 20px; fill: #ffd700; }
.header-avatar {
    width: 50px; height: 50px; border-radius: 50%; background-size: cover; background-position: center;
    border: 2px solid rgba(255, 215, 0, 0.5); background-color: #000;
}
.header-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.header-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #fff; }
.header-status { font-size: 12px; color: #00ff88; display: flex; align-items: center; gap: 5px; }
.status-dot { width: 8px; height: 8px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; }
.chat-area {
    flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    /* Без min-height:0 длинная переписка не даёт списку ужаться, и он выталкивает поле
       ввода за нижний край, когда клавиатура забирает половину экрана (тикет 18) */
    min-height: 0;
}
.msg-bubble { max-width: 70%; padding: 12px 16px; border-radius: 18px; position: relative; backdrop-filter: blur(5px); font-size: 15px; }
.msg-time {
    display: block; margin-top: 4px; text-align: right;
    font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.4);
}
.msg-right .msg-time { color: rgba(255, 215, 0, 0.55); }
.msg-left { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; align-self: flex-start; }
.msg-right {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 170, 0, 0.15) 100%);
    border: 1px solid rgba(255, 215, 0, 0.25); color: #ffd700; align-self: flex-end;
}
.msg-system { align-self: center; font-size: 12px; color: #888; border: 1px solid #333; padding: 5px 10px; border-radius: 10px; }
.msg-invite {
    width: 85%; max-width: 280px; background: rgba(10, 10, 16, 0.95); border: 1px solid var(--gold);
    border-radius: 16px; padding: 20px 15px; align-self: center; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.invite-title { color: var(--gold); font-weight: 800; font-size: 17px; margin-bottom: 8px; font-family: var(--font-display); }
.invite-btn {
    width: 100%; background: var(--gold); color: black; border: none; padding: 12px 0;
    border-radius: 25px; font-weight: 800; font-size: 16px; cursor: pointer; margin-top: 10px;
}
.input-area { padding: 15px 20px calc(30px + var(--safe-bottom)); background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(15px); border-top: 1px solid rgba(255, 215, 0, 0.15); }
.input-container {
    display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 30px; padding: 8px 8px 8px 15px;
}
.message-input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-body); font-size: 15px; }
.input-icon-btn { width: 35px; height: 35px; border-radius: 50%; background: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.input-icon { width: 22px; height: 22px; fill: rgba(255, 215, 0, 0.7); }
.mic-btn-small {
    width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}
.mic-btn-small .mic-icon { width: 19px; height: 19px; fill: #000; }

/* --- PROFILE --- */
/* Белый текст с золотым свечением вместо градиентной заливки (владелец сравнил 5
   вариантов на живой витрине text-and-rules-showcase.html и выбрал этот —「Д」).
   Лого SIX (.lobby-mark) осознанно НЕ трогали — только заголовки экранов. */
.page-title {
    font-family: var(--font-display); font-size: 28px; font-weight: 900; letter-spacing: 4px;
    color: #f5efe0; text-shadow: 0 0 18px rgba(255, 215, 0, 0.55);
}
/* Только SHOP — RULES использует тот же .page-title */
.page-title--shop { color: #fff; text-shadow: none; }
/* --- ПРОФИЛЬ ---
   Композиция взята из макета «единый редизайн» (.scratch/design-variants/unified/):
   большое фото-шапка с именем/городом поверх вместо кружка-аватара, Баланс/Карма и
   поля формы — стеклянными плашками (тот же приём, что у .orbit-chip в лобби).
   Цвета — из палитры приложения: gold для Баланса, neon-green для Кармы (уже
   используется в приложении для галочек «ответил»), city-suggestions и form-input
   унаследованы от прежней вёрстки без изменений. */
.profile-hero {
    position: relative; height: 420px; overflow: hidden;
    border-radius: 0 0 28px 28px;
}
.profile-hero-photo {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, #6a6a6a 0%, #4a4a4a 30%, #2a2a2a 60%, #1a1a1a 100%);
    background-size: cover; background-position: center;
}
.profile-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.75) 100%);
}
.profile-hero-btn {
    position: absolute; top: calc(18px + var(--safe-top)); left: 18px; z-index: 5;
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
}
.profile-hero-btn svg { width: 20px; height: 20px; fill: #fff; }
.profile-hero-btn--edit { left: auto; right: 18px; }
.profile-hero-btn--edit svg { fill: #ffd700; }
.profile-hero-identity {
    position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 5;
}
.profile-name-large { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: #fff; }
.profile-city-line { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }

.profile-stat-row { display: flex; gap: 12px; padding: 16px 20px 0; }
.stat-chip-tile {
    flex: 1; padding: 14px; text-align: center; border-radius: 16px;
    background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(14px);
}
.stat-chip-value { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.stat-chip-value.gold { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.stat-chip-value.green { color: var(--neon-green); text-shadow: 0 0 10px rgba(0, 255, 136, 0.4); }
.stat-chip-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.45); margin-top: 4px; }

.profile-form-bento { margin: 14px 20px calc(100px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 14px; }
.field-tile {
    padding: 12px 16px 14px; border-radius: 16px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.field-tile-row { display: flex; gap: 14px; }
.field-tile-row .field-tile { flex: 1; }
.field-tile--gender { display: flex; flex-direction: column; justify-content: center; }
.form-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.5); margin-bottom: 8px; }
.form-input {
    width: 100%; padding: 0; background: transparent; border: none;
    color: #fff; font-family: var(--font-body); font-size: 16px; outline: none;
}
.city-autocomplete { position: relative; }
.city-suggestions {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
    max-height: 220px; overflow-y: auto; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.city-suggestions.visible { display: block; }
.city-suggestion {
    padding: 12px 16px; font-family: var(--font-body); font-size: 15px; color: #e0e0e0; cursor: pointer;
}
.city-suggestion:hover, .city-suggestion.active { background: rgba(255, 255, 255, 0.08); }

.gender-tiles { display: flex; gap: 8px; }
.gender-option {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 0; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--glass-border); border-radius: 10px;
    color: rgba(255, 255, 255, 0.5); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer;
}
.gender-option svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.gender-option.active { background: rgba(255, 215, 0, 0.12); border-color: rgba(255, 215, 0, 0.4); color: #ffd700; }
.save-btn {
    width: 100%; padding: 16px; margin-top: 6px;
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 50%, #daa520 100%);
    border: none; border-radius: 100px; font-family: var(--font-display); font-size: 16px; font-weight: 700;
    color: #201812; cursor: pointer;
}

.delete-account-btn {
    width: 100%; padding: 14px; margin-top: 10px;
    background: none; border: 1px solid rgba(255,90,90,0.35); border-radius: 100px;
    font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
    color: rgba(255,90,90,0.85); cursor: pointer;
}

/* --- МАГАЗИН ---
   Композиция взята из макета «единый редизайн» (.scratch/design-variants/unified/):
   карточка приглашения как билет с отрывным краем, три пакета Монет тизером вместо
   одной кнопки, ведущей в модалку вслепую. Цвета — палитра приложения (gold),
   .glass-bg/.glass-border — те же переменные, что у плашек лобби и профиля.

   Важное отличие от макета: у бейджа «15% off» родитель — .pack-carousel с
   overflow-x:auto, а это по спецификации CSS обрезает оба измерения (не только X),
   как только overflow-x отличается от visible. Бейдж там торчит на 9px выше
   карточки и верхний паддинг всего 4px — верх бейджа срезан ровно настолько,
   насколько не хватает места. В макете это осталось незамеченным (см. скриншот
   владельца). Здесь — либо увеличить верхний паддинг .pack-carousel, либо снять
   overflow-x. Padding проще и не трогает горизонтальный скролл при 4 картах вместо 3. */
.shop-scroll { display: flex; flex-direction: column; gap: 20px; padding: 14px 20px 0; }

.ticket-card { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }
.ticket-top {
    padding: 24px 24px 14px; position: relative;
    background: linear-gradient(155deg, #201812 0%, #0a0704 60%, #201812 100%);
}
.ticket-logo { font-family: var(--font-display); font-size: 22px; font-weight: 900; letter-spacing: 0.04em; color: #ffd700; text-shadow: 0 0 12px rgba(255, 215, 0, 0.35); }
.ticket-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-top: 10px; }
.ticket-holder { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff; margin-top: 3px; }
.ticket-chip-btn {
    position: absolute; right: 20px; bottom: 18px; width: 50px; height: 38px; border-radius: 9px;
    background: linear-gradient(155deg, #ffed4e, #ffd700); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ticket-chip-btn svg { width: 20px; height: 20px; fill: #241a08; }

.ticket-tear { position: relative; height: 0; }
.ticket-tear::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px);
}
.tear-notch { position: absolute; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-dark); }
.tear-notch.left { left: -12px; }
.tear-notch.right { right: -12px; }

.ticket-bottom {
    padding: 16px 24px; display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(155deg, #0a0704 0%, #201812 100%);
}
.ticket-bonus-number { font-family: var(--font-display); font-size: 36px; font-weight: 900; color: #ffd700; text-shadow: 0 0 12px rgba(255, 215, 0, 0.35); line-height: 1; }
.ticket-bonus-label { font-size: 11px; color: rgba(255, 255, 255, 0.5); max-width: 140px; line-height: 1.4; text-align: right; }

.shop-section-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 4px; text-align: center; }
.shop-section-sub { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; text-align: center; }
.shop-see-all {
    display: block; width: 100%; margin-top: 4px; padding: 15px; border-radius: 100px; text-align: center;
    /* Зелёный вместо золота (выбор владельца) — тот же neon-green, что у Кармы
       и галочек «ответил», чтобы жёлтого на экране стало меньше */
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--neon-green); cursor: pointer;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
}
/* Отдельный отступ только у кнопки после карточек пакетов — у «Copy Invite Link»
   (тот же .shop-see-all, но сразу после билета) он не нужен, лишний увёл её вниз */
.shop-see-all--packs { margin-top: 18px; }

.pack-carousel {
    display: flex; gap: 12px; overflow-x: auto;
    /* Ровно 3 пакета всегда помещаются в ширину экрана (это тизер, не вся витрина) —
       по центру смотрится собранно, а не прижато к левому краю с пустотой справа.
       justify-content не мешает горизонтальной прокрутке, если карточек станет больше. */
    justify-content: center;
    /* 22px — не 4px, как в макете: хватает места для .pack-badge, который торчит
       на 9px выше карточки (см. пояснение к разделу выше) */
    padding: 16px 2px 8px; scroll-snap-type: x mandatory;
}
.pack-carousel::-webkit-scrollbar { display: none; }
.pack-card {
    position: relative; scroll-snap-align: start; flex: 0 0 108px; border-radius: 18px; padding: 16px 12px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    background: var(--glass-bg); border: 1px solid var(--glass-border); cursor: pointer;
}
.pack-card.best { border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 0 20px rgba(255, 215, 0, 0.15); }
.pack-badge {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    font-size: 9px; font-weight: 800; letter-spacing: 0.06em; color: #241a08; background: #ffd700;
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.pack-coins { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: #ffd700; margin-top: 6px; }
.pack-price { font-size: 12px; color: rgba(255, 255, 255, 0.5); }

/* --- RULES --- */
.rules-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
/* Раньше — цветная полоса слева (владелец сравнивал 5 цветов, выбрал красный). Автопроверка
   дизайна отметила приём как устаревший; на живом сравнении вариантов (владелец, 2026-08-27,
   .scratch/design-variants/rules-b-vs-d-live.html) выбран вариант «А» — обычная стеклянная
   карточка, как везде в приложении, без акцента сбоку. */
.rule-item {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    padding: 15px; border-radius: 12px; font-size: 16px; line-height: 1.4;
}
.rule-title { font-weight: 800; color: #ffd700; margin-bottom: 5px; display: block; font-family: var(--font-display); }

/* --- GAME BOTTOM SHEET (UPDATED GLASS DESIGN) --- */
#game-bottom-sheet {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 350px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 200;
    display: flex; flex-direction: column;
}
#game-bottom-sheet.active { transform: translateY(0); }

/* New Glass Sheet Styles */
.glass-sheet {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 30px 30px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
}

.glass-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-lives {
    font-size: 18px;
    filter: drop-shadow(0 0 5px #ff0055);
}
.glass-lives.beating { animation: heartbeat 1.5s infinite; }

.glass-round {
    font-family: var(--font-display);
    color: #fbbf24;
    font-size: 14px;
    letter-spacing: 2px;
}

.game-close { font-size: 20px; color: #666; cursor: pointer; }

.glass-body {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

.glass-question {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.4;
}

.glass-opt-btn {
    width: 100%;
    max-width: 320px;
    padding: 16px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.glass-opt-btn:active {
    background: rgba(251, 191, 36, 0.1);
    border-color: #fbbf24;
    transform: scale(0.98);
}
.glass-opt-btn.selected {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
    color: #fbbf24;
}

.sync-status { margin-top: 15px; font-size: 15px; color: rgba(255,255,255,0.5); font-style: italic; }

/* --- GLASS BUBBLE (INVITE) --- */
.glass-bubble {
    width: 85%;
    max-width: 280px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    align-self: center;
    margin: 10px 0;
}

/* Белый текст с золотым свечением вместо градиентной заливки — тот же вариант «Д»,
   что и .page-title (см. комментарий там), сравнено на одной витрине. */
.glass-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    color: #f5efe0;
    text-shadow: 0 0 18px rgba(255, 215, 0, 0.55);
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.glass-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}

.glass-btn {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(90deg, #fde047, #fbbf24, #eab308);
    color: #000;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
    transition: transform 0.2s;
    animation: pulse-gold 2s infinite;
}
.glass-btn:active { transform: scale(0.96); }

/* --- STOIC PREMIUM CARD MODAL --- */
#profile-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(15px);
    z-index: 10000; display: none; 
    align-items: center; justify-content: center;
}
#profile-modal.active { display: flex; }

/* Карточка партнёра — композиция из макета «единый редизайн»: имя/город прямо
   поверх фото (тот же приём, что уже на экране Профиля), а не отдельно над рамкой. */
.partner-card {
    width: 85%; max-width: 350px;
    border-radius: 30px;
    overflow: hidden;
    padding-bottom: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    /* Без flex+center CLOSE садится по левому краю без отступа — скруглённый угол
       (border-radius + overflow:hidden) обрезает первую букву */
    display: flex; flex-direction: column; align-items: center;
}

.partner-photo-frame {
    position: relative; width: 100%; aspect-ratio: 4/5;
    background: radial-gradient(120% 90% at 30% 20%, #3a3028, #1a1510 60%, #0a0a0a 100%);
}
.partner-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
}
.partner-identity { position: absolute; left: 22px; right: 22px; bottom: 20px; }
#stoic-name {
    font-family: var(--font-display); font-size: 24px; font-weight: 800;
    color: #fff; letter-spacing: 1px;
}
#stoic-city {
    font-family: var(--font-body); font-size: 13px; font-weight: 500;
    color: rgba(255, 255, 255, 0.6); margin-top: 2px;
}

.partner-actions {
    width: 100%; padding: 18px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.stoic-btn {
    width: 100%; padding: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.stoic-btn:active { background: rgba(255, 255, 255, 0.1); transform: scale(0.98); }

.btn-write { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgba(255, 215, 0, 0.15); }
/* Контур золотом — как в макете «единый редизайн»: панель вокруг теперь стеклянная и
   полупрозрачная (не сплошная тёмная карточка), поэтому заголовок и кнопка не сливаются
   между собой, даже оставаясь одного и того же золотого цвета */
.btn-chance { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgba(255, 215, 0, 0.15); }

.modal-close-btn {
    width: 100%; margin-top: 15px; padding-bottom: 4px; text-align: center;
    font-size: 12px; color: #666; cursor: pointer;
    font-family: var(--font-display); letter-spacing: 1px;
}

/* --- POST-GAME RECAP MODAL (2ND CHANCE) --- */
#recap-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(15px);
    z-index: 10001; display: none;
    align-items: center; justify-content: center;
}
#recap-modal.active { display: flex; }

/* Композиция и цвет взяты из макета «единый редизайн» (.scratch/design-variants/unified/):
   полупрозрачная стеклянная панель (тот же приём, что у .orbit-chip/.field-tile) вместо
   сплошной тёмной карточки, золотой светящийся заголовок, контурная (не залитая) кнопка. */
.recap-container {
    width: 85%; max-width: 350px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 30px;
    padding: 25px;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

.recap-title {
    font-family: var(--font-display); font-size: 20px; font-weight: 800;
    color: var(--gold); letter-spacing: 2px; margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

.recap-candidates { width: 100%; display: flex; flex-direction: column; gap: 12px; }

.recap-candidate-item {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 12px; background: var(--glass-bg);
    border: 1px solid var(--glass-border); border-radius: 16px;
}

.recap-candidate-avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    background-size: cover; background-position: center; background-color: #222;
    border: 1px solid var(--gold);
}

.recap-candidate-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.recap-candidate-name {
    font-family: var(--font-display); font-weight: 700; font-size: 13px;
    color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recap-candidate-hint { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }

.recap-buy-btn {
    width: auto; padding: 10px 14px; font-size: 11px; white-space: nowrap;
}

.recap-empty-msg {
    font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.5);
    text-align: center; padding: 10px 0;
}

.recap-report-sep { width: 100%; height: 1px; background: rgba(255,255,255,0.08); margin: 18px 0 14px; }
.recap-report-label {
    width: 100%; text-align: left; font-size: 11px; color: rgba(255,255,255,0.35);
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}
.recap-report-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.recap-report-item {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px;
}
.recap-report-name {
    font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recap-report-btn {
    background: none; border: none; padding: 0; margin-left: 10px; flex-shrink: 0;
    font-family: var(--font-display); font-size: 11px; letter-spacing: 0.5px;
    color: rgba(255,90,90,0.75); text-transform: uppercase; cursor: pointer;
}

.recap-timer-row {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.1);
}
/* + COINS всегда с отступом сверху — раньше это зависело от того, что перед кнопкой
   именно .recap-timer-row (.recap-timer-row + .stoic-btn), но с блоком жалобы между
   ними это условие перестало совпадать (соседний элемент в DOM теперь другой, даже
   когда блок жалобы скрыт — display:none не убирает элемент из цепочки соседей) —
   отступ сделан безусловным на самой кнопке, а не зависимым от того, что перед ней. */
.recap-container .stoic-btn.btn-chance { margin-top: 14px; }
.recap-timer-label {
    font-family: var(--font-display); font-size: 11px; color: rgba(255,255,255,0.5);
    letter-spacing: 1px;
}
/* Было var(--gold) — владелец сравнил красный и зелёный, выбрал красный */
.recap-timer {
    font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--color-heart);
}

/* --- ПАРТИЯ НАЙДЕНА (тикет 04) --- */
#match-found-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(15px);
    z-index: 10001; display: none;
    align-items: center; justify-content: center;
}
#match-found-modal.active { display: flex; }
.match-found-sub {
    font-family: var(--font-body); font-size: 14px; color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px; text-align: center;
}
/* Тот же красный, что и .recap-timer, — то же самое "время истекает" под похожим окном */
.match-found-timer {
    font-family: var(--font-display); font-size: 36px; font-weight: 900;
    color: var(--color-heart); margin-bottom: 20px;
}

/* ========================================= */
/* COMPACT GIFT BAR (UPDATED) */
/* ========================================= */

.gift-sticky-bar {
    position: absolute;
    bottom: 110px; /* Positioned above controls */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--gold);
    border-radius: 50px; /* Capsule shape */
    padding: 8px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gift-sticky-bar:not(.hidden) {
    opacity: 1;
    bottom: 120px; /* Float up effect */
    pointer-events: all;
}

.sticky-left-side { display: flex; align-items: center; gap: 10px; }

.sticky-icon {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
}
.sticky-icon svg { width: 20px; height: 20px; }

.sticky-info { display: flex; flex-direction: column; justify-content: center; }

.sticky-title {
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
}

.sticky-hint {
    font-family: var(--font-body);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    margin-top: 2px;
}

.sticky-close-btn {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    cursor: pointer;
    margin-left: 5px;
}

/* --- IMPACT ANIMATIONS (NEW) --- */

/* 1. TAP RIPPLE */
.anim-tap .avatar { animation: tapPulse 0.4s ease-out; }
.fx-ripple {
    position: absolute; inset: -5px; border: 2px solid var(--gold); border-radius: 50%;
    animation: rippleExpand 0.5s ease-out forwards; pointer-events: none; z-index: 1;
}
@keyframes rippleExpand { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes tapPulse { 50% { transform: scale(0.95); } }

/* 2. HEART — одно тёплое сердце поднимается вверх и растворяется (владелец сравнил
   3 варианта в отдельной витрине, выбрал этот — без пружинящего пульса аватара и без
   частиц-эмодзи, которые были на костылях и не в тон тёплому дизайну) */
.fx-heart-single {
    position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
    width: 26px; height: 26px; color: var(--color-heart); pointer-events: none; z-index: 10;
    animation: heartRiseSingle 1.1s ease-out forwards;
    filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.6));
}
@keyframes heartRiseSingle {
    0% { transform: translate(-50%, 10px) scale(0.3); opacity: 0; }
    25% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); }
    100% { transform: translate(-50%, -60px) scale(1); opacity: 0; }
}

/* 3. SPY — золотая диафрагма (как объектив камеры), закрывается и снова открывается;
   раньше был вращающийся зелёный радар (neon-green) — холодный цвет, не в тон */
.fx-aperture {
    position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
    animation: apertureIris 0.9s ease-in-out forwards;
}
@keyframes apertureIris {
    0% { box-shadow: inset 0 0 0 40px rgba(0, 0, 0, 0.95); }
    50% { box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.95); }
    100% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); }
}
.fx-aperture-ring {
    position: absolute; inset: -4px; border: 2px solid var(--gold); border-radius: 50%;
    opacity: 0.9; animation: apertureRingPulse 0.9s ease-out forwards; pointer-events: none;
}
@keyframes apertureRingPulse { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.15); opacity: 0; } }

/* 4. X-RAY — тёплый луч сканирования сверху вниз, волной по всем шести аватаркам разом
   (см. triggerXrayRevealAll в script.js — X-Ray и на сервере снимает Блюр у всех сразу,
   не только у того, на кого нажали, поэтому и анимация теперь честно отражает это).
   Раньше был холодный RGB-глитч (красный/синий) — на всех шести сразу превращался в
   почти сплошную цветную стену, проверено на макете перед переносом сюда. */
.anim-xray .avatar { animation: xrayBeamReveal 0.8s ease-in-out; }
@keyframes xrayBeamReveal { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5) contrast(1.15); } }
.fx-xray-beam {
    position: absolute; left: -4px; right: -4px; height: 6px; top: -10%;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    box-shadow: 0 0 12px var(--gold); pointer-events: none;
    animation: xrayBeamSweep 0.8s ease-in-out forwards;
}
@keyframes xrayBeamSweep { 0% { top: -10%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 105%; opacity: 0; } }

/* Родительский контейнер для всех VFX подарков — position:relative нужен, чтобы
   position:absolute внутри позиционировался относительно аватара, а не всей страницы. */
.avatar-wrapper,
#my-avatar-wrapper {
    position: relative !important;
    overflow: hidden;
    z-index: 1;
}