:root {
    /* ===== Палитра VeltGame 2026 =====
       Фон — глубокий синий 01040D, «серый» слой карточек — 111111,
       вместо чистого белого везде E6EDFF, акцент — диагональный градиент
       0851B1 → 3C90FF. Токены держим здесь: цвет меняется в одном месте. */
    --bg: #01040D;
    --bg-grad-1: #01040D;
    --bg-grad-2: #050B18;
    --card: #111111;
    --card2: #111111;
    --line: rgba(230,237,255,.14);
    --btn: #111111;
    --btn-hover: #171C27;

    --white: #E6EDFF;
    --silver: #E6EDFF;
    --text: #E6EDFF;
    --muted: rgba(230,237,255,.55);
    --muted2: rgba(230,237,255,.42);

    /* Акцент: диагональный градиент + его свечение */
    --brand-1: #0851B1;
    --brand-2: #3C90FF;
    --brand: #0152FF;
    --brand-grad: linear-gradient(135deg, #0851B1 0%, #3C90FF 100%);
    --brand-glow: 0 0 30px rgba(1,82,255,.30);
    --hairline: rgba(230,237,255,.22);

    --glow: 0 0 0 1px rgba(230,237,255,.08), 0 8px 30px rgba(0,0,0,.55);
    --glow-active: 0 0 18px rgba(60,144,255,.28), 0 0 0 1px rgba(230,237,255,.22);
    --radius: 16px;
    --ease: cubic-bezier(.22,.61,.36,1);
    --font: "Inter Tight", "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

body {
    background: var(--bg);
    /* Текстура перекрашена под палитру 2026 (tools_recolor_bg.py). Старый
       BG.png был серо-чёрным (#0C0C0E) и перекрывал заданный цвет фона. */
    background-image: url("/images/BG-2026.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    /* -3% межбуквенного как в макете (Inter Tight сжат по трекингу). */
    letter-spacing: -0.03em;
    padding-bottom: 96px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ===== Анимации ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.tab:not(.hidden) { animation: fadeUp .28s var(--ease); }

/* ===== Верхняя панель ===== */
/* Все размеры в шапке подобраны так, чтобы блок целиком влезал в 360px без
   сжатия: логотип + стрелка + капсула баланса + аватарка. Раньше элементы были
   крупнее, флекс начинал их сжимать, и баланс обрезался в «6...», а слово
   «Velts» уезжало под кнопку «Пополнить». */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 11px;
    position: sticky;
    top: 0;
    background: rgba(1,4,13,0.82);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    z-index: 30;
    border-bottom: 1px solid rgba(230,237,255,.07);
    gap: 8px;
    flex-wrap: nowrap;
}
/* Слева: логотип с онлайном + стрелка меню */
.hdr-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.logo-wrap { display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
.logo-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Логотип-ассет из Figma: «Velt» градиентом, «Game» цветом E6EDFF. */
.logo-mark { display: block; height: 16px; width: auto; }
.online {
    display: flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 400; letter-spacing: -0.03em;
    color: rgba(230,237,255,.50); white-space: nowrap;
}
.online b { color: rgba(230,237,255,.88); font-weight: 600; }
.dot { width: 4px; height: 4px; flex: none; border-radius: 50%; background: var(--brand-2);
    box-shadow: 0 0 8px rgba(60,144,255,.9); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Стрелка-меню: квадрат 111111 @55% с обводкой E6EDFF @22% (ассет «Стрелка в меню») */
.hdr-menu-btn {
    flex: none; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
    display: grid; place-items: center;
    background: rgba(17,17,17,.55);
    border: 2px solid rgba(230,237,255,.22);
    color: rgba(230,237,255,.85); opacity: .8;
    transition: transform .16s var(--ease), border-color .16s var(--ease), opacity .16s var(--ease);
}
.hdr-menu-btn:active { transform: scale(.92); }
.hdr-menu-btn:hover, .hdr-menu-btn.is-hover { opacity: 1; border-color: rgba(230,237,255,.34); }

/* Правая часть не сжимается: сумма и кнопка важнее логотипа, поэтому при
   нехватке места уступает левая половина, а не эта. */
.top-right { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }

/* Баланс + «Пополнить» — одна капсула: слева тёмная плашка, справа градиент.
   Кнопка стоит ВПЛОТНУЮ к плашке, без наезда. Раньше у неё был
   margin-left: -14px, и она заезжала на плашку, перекрывая слово «Velts». */
.balance-group {
    display: flex; align-items: stretch; flex: 0 0 auto;
    border: 1.5px solid rgba(230,237,255,.22);
    border-radius: 999px;
    background: #111111;
    overflow: hidden;
}
.balance-chip {
    background: transparent;
    border: none; border-radius: 0;
    color: var(--white); padding: 5px 9px 5px 12px;
    display: flex; align-items: baseline; gap: 4px;
    /* Ширину не ограничиваем: обрезка приводила к «6...» вместо суммы.
       Размеры подобраны так, чтобы вся шапка влезала на 360px без сжатия. */
    white-space: nowrap;
    /* Цифра баланса: Inter Tight Medium, трекинг -3% как в макете. */
    font-weight: 500; font-size: 14px; letter-spacing: -0.03em; line-height: 1.5;
}
.balance-chip #topBalance { white-space: nowrap; }
.balance-chip .vc { font-size: 10px; font-weight: 500; color: var(--white); opacity: .55; }
.topup-btn {
    flex: none; cursor: pointer; border-radius: 999px;
    padding: 0 12px; margin: 0;
    background: var(--brand-grad);
    border: none;
    color: var(--white); font-family: var(--font);
    font-weight: 600; font-size: 12.5px; letter-spacing: -0.03em; white-space: nowrap;
    box-shadow: none;
    transition: transform .16s var(--ease), filter .16s var(--ease);
}
.topup-btn:active { transform: scale(.95); }
.topup-btn:hover, .topup-btn.is-hover { filter: brightness(1.08); }

.avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: var(--card2); border: 1px solid rgba(230,237,255,.14);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    overflow: hidden;
}

/* Узкие экраны. Размеры выше рассчитаны на 390px и шире; ниже уступаем по
   шагам, начиная с самого дешёвого — подписи «Velts». Валюта в мини-аппе одна,
   и без слова сумма читается однозначно, зато освобождается около 30px. */
@media (max-width: 380px) {
    .topbar { padding: 11px 10px; }
    .logo-mark { height: 15px; }
    .hdr-menu-btn { width: 24px; height: 24px; }
    .balance-chip { font-size: 13.5px; }
    .balance-chip .vc { display: none; }
    .avatar { width: 28px; height: 28px; }
}
/* Совсем узкие (iPhone SE первого поколения). */
@media (max-width: 340px) {
    .logo-mark { height: 14px; }
    .online { font-size: 9.5px; }
    .hdr-menu-btn { width: 22px; height: 22px; }
    .balance-chip { font-size: 13px; padding: 5px 8px 5px 10px; }
    .topup-btn { padding: 0 10px; font-size: 12px; }
    .avatar { width: 26px; height: 26px; }
    /* Семизначный баланс здесь уже не влезает — обрезаем его, а не ломаем ряд. */
    .balance-chip #topBalance { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== Контент ===== */
/* Отступы по бокам уменьшены: в мини-аппе ширина и так небольшая, а 18px с
   каждой стороны заметно ужимали обложки. */
#content { padding: 20px 14px; }
/* Заголовки крупнее: в вебвью Telegram 15px читались мелко. */
.section-title { font-size: 19px; margin: 26px 0 14px; font-weight: 600; color: var(--text);
    letter-spacing: -0.03em; }
/* Заголовок с ассетом-иконкой (геймпад и т.п.) */
.sec-titled { display: flex; align-items: center; gap: 10px; }
.sec-ic { display: block; height: 26px; width: auto; flex: none; }
.hidden { display: none; }
.hint { color: var(--muted2); font-size: 12px; margin-top: 16px; text-align: center; line-height: 1.5; }

/* ===== Баннеры ===== */
.banners-wrap { position: relative; margin-bottom: 4px; }
/* Стрелок под каруселью больше нет — запас снизу не нужен, листаем свайпом. */
.banners { display: flex; gap: 12px; overflow-x: auto; padding: 2px; scrollbar-width: none; scroll-behavior: smooth; }
.banners::-webkit-scrollbar { display: none; }
.banner {
    min-width: 80%; min-height: 132px; border-radius: 20px; padding: 20px;
    display: flex; align-items: center; position: relative; overflow: hidden;
    border: 1px solid rgba(230,237,255,.08);
    box-shadow: var(--glow);
}
/* Баннер-картинка: арт уже содержит текст, поэтому паддинги убираем и даём
   изображению заполнить всю плашку без обрезки по краям. */
.banner-art { padding: 0; cursor: pointer; background: #111111; aspect-ratio: 16 / 9; min-height: 0; }
.banner-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-art:active { transform: scale(.985); }
.banner-fair { background: linear-gradient(140deg, #101828 0%, #05080F 100%); }
.banner-news { background: linear-gradient(140deg, #101828 0%, #05080F 100%); }
.banner-pvp { background: linear-gradient(140deg, #101828 0%, #05080F 100%); }
.banner-welcome { background: linear-gradient(140deg, #10203A 0%, #05080F 100%); border: 1px solid rgba(60,144,255,.20); cursor: pointer; }
.banner-welcome:active { transform: scale(.985); }
.banner-title { font-size: 18px; font-weight: 700; color: var(--white); }
.banner-sub { font-size: 12px; color: var(--muted); margin-top: 5px; }
.banner-cta {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 11px;
    padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--white);
    background: rgba(170,150,255,.18); border: 1px solid rgba(170,150,255,.38);
}
.banner-cta .bc-arrow { transition: transform .3s var(--ease); }
.banner-welcome:hover .banner-cta .bc-arrow,
.banner-welcome:active .banner-cta .bc-arrow { transform: translateX(4px); }
.banner-arrow {
    position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%);
    background: rgba(17,17,17,.7); border: 1px solid rgba(230,237,255,.18);
    color: rgba(230,237,255,.7); width: 26px; height: 26px; border-radius: 50%;
    font-size: 16px; font-weight: 700; cursor: pointer; z-index: 5;
    transition: all .2s var(--ease); display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: inherit;
}
.banner-arrow:active { background: rgba(60,144,255,.25); transform: translateX(-50%) scale(.85); }
.banner-arrow.left { margin-left: -20px; }
.banner-arrow.right { margin-left: 20px; }

/* ===== Лента «Последние Выигрыши» ===== */
.live-head {
    display: flex; align-items: center; gap: 10px; margin: 26px 0 12px;
}
.live-crown { display: flex; flex: none; filter: drop-shadow(0 0 10px rgba(60,144,255,.55)); }
.live-crown svg { display: block; }
/* Заголовок: Inter Tight SemiBold, трекинг -3% (как в макете). */
.live-title {
    font-weight: 600; font-size: 19px; letter-spacing: -0.03em; color: var(--white);
}
@keyframes livePulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(60,144,255,.6); }
    50% { transform: scale(1.25); opacity: .75; box-shadow: 0 0 0 6px rgba(60,144,255,0); }
}
/* Лента лежит на одной тёмной подложке — как единый блок в макете. */
.live-wrap {
    position: relative; margin-bottom: 6px;
    background: #111111;
    border: 1px solid rgba(230,237,255,.12);
    border-radius: 20px; padding: 12px;
}
/* align-items: stretch — чтобы разделители между записями были одной высоты. */
.live-strip { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.live-strip::-webkit-scrollbar { display: none; }
/* Запись ленты: обложка -> VeltID -> сумма -> «Velts», строго столбиком по
   центру. Своей рамки у записи нет — вместо неё тонкая вертикальная линия
   слева, поэтому лента читается как единый блок с разделителями, а не как
   набор отдельных карточек. */
.live-item {
    position: relative; flex: 0 0 auto;
    width: 100px; padding: 2px 10px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center;
    transition: transform .18s var(--ease);
}
.live-item + .live-item { border-left: 1px solid rgba(230,237,255,.10); }
.live-item.is-hover, .live-item:active { transform: translateY(-2px); }
/* Обложка игры. Внутри лежит эмодзи-заглушка, а картинка ложится поверх; если
   она не загрузилась, onerror её удаляет и заглушка снова видна.
   Размер задан в пикселях, а не через aspect-ratio: в вебвью Telegram он
   поддерживается не везде, и там обложки разъезжались по высоте — из-за этого
   лента выглядела кривой. Ширина записи 100px минус отступы 2x10 = 80px. */
.li-cover {
    position: relative; display: block; flex: none;
    width: 80px; height: 80px;
    border-radius: 12px; overflow: hidden;
    background: radial-gradient(120% 120% at 50% 20%, #12233d, #0a1220);
    border: 1px solid rgba(230,237,255,.12);
}
.li-cover-fb {
    position: absolute; inset: 0;
    display: grid; place-items: center; font-size: 26px;
}
.li-cover img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Текстовым строкам заданы жёсткие высоты: тогда все записи одинаковой высоты,
   подписи и суммы стоят на одной линии, а разделители получаются равными. */
.li-user {
    max-width: 100%; height: 13px; line-height: 13px;
    font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
    color: rgba(230,237,255,.45);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Сумма — крупным E6EDFF, «Velts» отдельной строкой акцентным синим. */
.li-amount {
    max-width: 100%; height: 18px; line-height: 18px;
    font-size: 15px; font-weight: 600; letter-spacing: -0.03em;
    color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.li-cur {
    height: 12px; line-height: 12px;
    font-size: 10.5px; font-weight: 600; color: var(--brand-2);
    letter-spacing: -0.02em;
}

@media (max-width: 380px) {
    .live-item { width: 90px; padding: 2px 8px; }
    .li-cover { width: 74px; height: 74px; }
    .li-amount { font-size: 14px; }
}
.live-arrow {
    position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
    background: rgba(17,17,17,.7); border: 1px solid rgba(230,237,255,.18);
    color: rgba(230,237,255,.7); width: 26px; height: 26px; border-radius: 50%;
    font-size: 16px; font-weight: 700; cursor: pointer; z-index: 5;
    transition: all .2s var(--ease); display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: inherit;
}
.live-arrow:active { background: rgba(60,144,255,.25); transform: translateX(-50%) scale(.85); }
.live-arrow.left { margin-left: -20px; }
.live-arrow.right { margin-left: 20px; }

/* ===== Игры ===== */
/* Два столбца с меньшим зазором — обложки становятся ощутимо крупнее, а сетка
   по-прежнему не вылезает за края даже на узких экранах. */
.games-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }

/* ===== Горизонтальный ряд раздела =====
   Три обложки в видимой части, остальное листается свайпом. Стрелок нет
   намеренно: в вебвью Telegram палец справляется лучше, а кнопки съедали
   место у заголовка. scroll-snap выравнивает ряд по карточке, чтобы после
   свайпа обложки не замирали разрезанными посередине. */
.games-rail {
    display: grid;
    grid-auto-flow: column;
    /* 3 карточки в ширину контейнера с учётом двух зазоров. */
    grid-auto-columns: calc((100% - 2 * 9px) / 3);
    gap: 9px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* Запас снизу — под тень и подъём карточки при нажатии. */
    padding: 2px 2px 6px;
}
.games-rail::-webkit-scrollbar { display: none; }
/* Пустое состояние («Пока пусто…»): ряд на время становится обычным блоком,
   иначе текст сжимается в колонку шириной в одну карточку. */
.games-rail.is-plain { display: block; overflow: visible; }
.games-rail > .cover-card { scroll-snap-align: start; }
/* Обложки провайдеров вертикальные, у наших слотов — тоже. Держим одну
   пропорцию, иначе ряд «прыгает» по высоте от раздела к разделу. */
.games-rail > .cover-card { aspect-ratio: 1 / 1; }

/* Строка заголовка раздела: название слева, «Все» справа. */
.rail-head {
    display: flex; align-items: center; gap: 10px;
    margin: 26px 0 12px;
}
.rail-head .section-title { margin: 0; flex: 1 1 auto; min-width: 0; }
.rail-head.hidden { display: none; }
.rail-all {
    flex: 0 0 auto; cursor: pointer;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(230,237,255,.06);
    border: 1px solid rgba(230,237,255,.14);
    color: var(--white); font-family: var(--font);
    font-size: 13px; font-weight: 600; letter-spacing: -0.03em;
    transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.rail-all:hover { border-color: rgba(60,144,255,.45); background: rgba(60,144,255,.12); }
.rail-all:active { transform: scale(.94); }
.rail-all.hidden { display: none; }

/* Карточка-обложка (только картинка, вся кликабельна) */
.cover-card {
    position: relative;
    border-radius: 20px; overflow: hidden; cursor: pointer;
    background: var(--card); box-shadow: var(--glow);
    transition: transform .15s var(--ease), box-shadow .2s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
/* RTP слева сверху: правый угол занят сердечком «в избранное» — так же, как в
   витринах, с которых брали образец. */
.rtp-badge {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    background: #ffffff; color: #14141a;
    font-size: 10px; font-weight: 800; letter-spacing: -0.2px;
    padding: 3px 8px; border-radius: 9px; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* ===== Сердечко «в избранное» прямо на обложке =====
   Правый верхний угол — общий для всех витрин (слоты, мини-игры, провайдеры,
   окно «Все»). RTP-бейдж и значок «i» из этого угла убраны в левый, чтобы не
   налезали. Клик по сердечку не открывает игру: обработчики карточек делают
   ранний выход по .fav-toggle. */
.cover-card .fav-toggle {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    width: 30px; height: 30px; border-radius: 50%; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(10,10,14,.55); border: 1px solid rgba(255,255,255,.28);
    color: #fff; font-size: 15px; line-height: 1;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s var(--ease), background .18s var(--ease),
                color .18s var(--ease), border-color .18s var(--ease);
}
.cover-card .fav-toggle:active { transform: scale(.82); }
.cover-card .fav-toggle.on {
    color: #ff6b81; background: rgba(255,107,129,.18);
    border-color: rgba(255,107,129,.62);
}
/* Наведение не должно раздувать сердечко вместе с карточкой (класс .is-hover
   вешается на .cover-card): оставляем кнопке свой лёгкий отклик. */
.cover-card.is-hover .fav-toggle { transform: none; }
/* В горизонтальных рядах обложки втрое меньше — и кнопку ужимаем. */
.games-rail .cover-card .fav-toggle {
    width: 26px; height: 26px; font-size: 13px; top: 6px; right: 6px;
}
.cover-card img {
    width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 20px;
}
.game-card {
    background: var(--card); border: 1px solid rgba(255,255,255,.05);
    border-radius: var(--radius); padding: 22px 16px; text-align: center;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
    position: relative; overflow: hidden; box-shadow: var(--glow);
    display: flex; flex-direction: column;
}
.game-emoji { font-size: 40px; filter: grayscale(.15); }
.game-name { margin-top: 10px; font-weight: 700; font-size: 15px; color: var(--text); }
.game-desc { color: var(--muted2); font-size: 11px; margin-top: 4px; min-height: 28px; line-height: 1.4; }
.game-mult { display: inline-block; margin-top: 8px; background: var(--card2);
    color: var(--silver); border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px; padding: 4px 11px; font-size: 12px; font-weight: 700; }
.game-btn {
    margin-top: 12px; background: var(--btn); color: var(--white);
    border: 1px solid rgba(255,255,255,.08); border-radius: 11px;
    padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all .2s var(--ease); font-family: inherit;
}
.game-btn:active { background: var(--btn-hover); transform: scale(.96); }

/* Coming Soon стиль */
.game-card.coming-soon {
    opacity: 0.5;
    pointer-events: none;
}
.game-card.coming-soon .game-emoji {
    filter: grayscale(1);
}
.game-card.coming-soon .game-name,
.game-card.coming-soon .game-desc {
    color: var(--muted);
}

/* ===== СЛОТ ===== */
.slot-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    padding: 16px;
    gap: 16px;
}

.slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.slot-back-btn {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 10px 16px;
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s var(--ease);
}

.slot-back-btn:active {
    transform: scale(.95);
    background: var(--card2);
}

.slot-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--white);
}

.slot-balance {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #FFD700;
}

.slot-controls-top {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.slot-mode-controls {
    display: flex;
    gap: 8px;
}

.slot-mode-btn {
    width: 44px;
    height: 44px;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s var(--ease);
}

.slot-mode-btn:active {
    transform: scale(.9);
    background: var(--card2);
}

.slot-mode-btn.active {
    background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
    border-color: #4CAF50;
    box-shadow: 0 4px 12px rgba(76,175,80,.4);
}

.slot-mode-btn .mode-icon {
    font-size: 20px;
    filter: grayscale(1);
    transition: filter .2s;
}

.slot-mode-btn.active .mode-icon {
    filter: grayscale(0);
}

.slot-bet-control {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 8px;
}

.slot-bet-btn {
    width: 36px;
    height: 36px;
    background: var(--btn);
    border: none;
    border-radius: 10px;
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s var(--ease);
}

.slot-bet-btn:active {
    transform: scale(.9);
    background: var(--btn-hover);
}

.slot-bet-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 12px;
}

.slot-bet-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
}

.slot-bet-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
}

.slot-start-btn {
    flex: 1;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border: none;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all .2s var(--ease);
    box-shadow: 0 4px 16px rgba(255,215,0,.3);
}

.slot-start-btn:active {
    transform: scale(.96);
}

.slot-start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.slot-spin-icon {
    font-size: 24px;
}

.slot-spin-text {
    font-size: 16px;
    font-weight: 900;
    color: #000;
    letter-spacing: 1px;
}

.slot-iframe-container {
    flex: 1;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* СЕТКА СЛОТА 6x5 */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 400px;
    position: relative;
}

.slot-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.slot-cell {
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(30,30,50,.6) 0%, rgba(20,20,35,.8) 100%);
    border: 2px solid rgba(255,255,255,.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all .3s var(--ease);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
}

.slot-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, transparent 100%);
    pointer-events: none;
}

.slot-cell.winning {
    background: linear-gradient(135deg, rgba(255,215,0,.3) 0%, rgba(255,165,0,.4) 100%);
    border-color: #FFD700;
    box-shadow: 0 0 25px rgba(255,215,0,.6), inset 0 0 15px rgba(255,215,0,.3);
    animation: legacyWinPulse 0.6s ease-out infinite;
}

.slot-symbol-svg {
    width: 80%;
    height: 80%;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
    transition: transform .3s var(--ease);
    position: relative;
    z-index: 2;
}

.slot-symbol-svg svg {
    width: 100%;
    height: 100%;
}

.slot-cell.winning .slot-symbol-svg {
    transform: scale(1.15);
    animation: symbolGlow 0.8s ease-in-out infinite;
}

/* Анимация спина */
.slot-grid.spinning .slot-cell {
    animation: spinCell 0.15s ease-in-out infinite;
}

.slot-grid.spinning .slot-symbol-svg {
    animation: blurSpin 0.15s linear infinite;
}

@keyframes spinCell {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(0.95); }
}

@keyframes blurSpin {
    0%, 100% { filter: blur(0px) drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
    50% { filter: blur(3px) drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
}

/* Анимация появления символа (падение) */
@keyframes symbolDrop {
    0% {
        transform: translateY(-100px) scale(0.8);
        opacity: 0;
    }
    60% {
        transform: translateY(5px) scale(1.05);
    }
    80% {
        transform: translateY(-3px) scale(0.98);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.slot-cell.dropping {
    animation: symbolDrop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes legacyWinPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(255,215,0,.6), inset 0 0 15px rgba(255,215,0,.3); }
    50% { transform: scale(1.03); box-shadow: 0 0 35px rgba(255,215,0,.8), inset 0 0 20px rgba(255,215,0,.5); }
}

@keyframes symbolGlow {
    0%, 100% { filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)) drop-shadow(0 0 15px rgba(255,215,0,.6)); }
    50% { filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)) drop-shadow(0 0 25px rgba(255,215,0,.9)); }
}

/* Эффект исчезновения выигрышного символа */
@keyframes symbolDisappear {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.slot-cell.disappearing {
    animation: symbolDisappear 0.4s ease-out forwards;
}

/* Попап выигрыша */
.slot-win-popup {
    /* Наследует цвет активного слота (задаётся из JS), дефолт — золото */
    --win-accent: var(--slot-accent, #FFD700);
    --win-glow: var(--slot-glow, rgba(255,215,0,.5));
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3) rotate(-8deg);
    background: linear-gradient(135deg, rgba(10,10,14,.96) 0%, rgba(22,22,30,.98) 100%);
    backdrop-filter: blur(16px);
    border: 3px solid var(--win-accent);
    border-radius: 24px;
    padding: 36px 56px;
    z-index: 1000;
    opacity: 0;
    transition: all .42s cubic-bezier(.34, 1.56, .38, 1);
    text-align: center;
    box-shadow: 0 0 60px var(--win-glow), inset 0 0 30px rgba(255,255,255,.05);
}

.slot-win-popup.show {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
    animation: winShake 0.5s ease-in-out;
}

@keyframes winShake {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    25% { transform: translate(-50%, -50%) scale(1.05) rotate(2deg); }
    75% { transform: translate(-50%, -50%) scale(1.05) rotate(-2deg); }
}

.slot-win-amount {
    font-size: 54px;
    font-weight: 900;
    background: linear-gradient(135deg, #fff 0%, var(--win-accent) 55%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    animation: textGlow 1.1s ease-in-out infinite;
    filter: drop-shadow(0 0 18px var(--win-glow));
}

@keyframes textGlow {
    0%, 100% { filter: drop-shadow(0 0 16px var(--win-glow)); }
    50% { filter: drop-shadow(0 0 30px var(--win-glow)); }
}

.slot-win-label {
    font-size: 24px;
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

/* Попап множителя */
.slot-multiplier-popup {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    border: 4px solid #FFD700;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: 900;
    color: #000;
    z-index: 999;
    opacity: 0;
    transition: all .4s cubic-bezier(.68,-0.55,.27,1.55);
    box-shadow: 0 0 50px rgba(255,215,0,.9), inset 0 4px 20px rgba(255,255,255,.3);
    text-shadow: 0 2px 4px rgba(0,0,0,.3);
}

.slot-multiplier-popup.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    animation: multiplierBounce 0.6s ease-out;
}

@keyframes multiplierBounce {
    0% { transform: translate(-50%, -50%) scale(0.3); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
    70% { transform: translate(-50%, -50%) scale(0.9); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.slot-info {
    background: var(--card2);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
}

.game-live {
    position: absolute; top: 12px; right: 12px;
    background: rgba(255,255,255,.06); color: var(--silver);
    border: 1px solid rgba(255,255,255,.1);
    font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 7px; letter-spacing: .5px;
}

/* ===== Бонусы (карточки в стиле VeltGame) ===== */
.bonus-card {
    background: #111111;
    border: 1px solid rgba(230,237,255,.10);
    border-radius: 20px; padding: 18px; margin-bottom: 14px;
    display: flex; flex-direction: column; gap: 13px;
    box-shadow: var(--glow);
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.bonus-card:active { transform: scale(.995); }
.bonus-head { display: flex; align-items: center; gap: 14px; }
.bonus-ic {
    width: 46px; height: 46px; flex: none; border-radius: 50%;
    background: rgba(230,237,255,.05);
    border: 1px solid rgba(230,237,255,.14);
    display: flex; align-items: center; justify-content: center;
}
.bonus-name { font-weight: 600; font-size: 17px; color: var(--white); letter-spacing: -0.03em; }
.bonus-desc { color: var(--muted); font-size: 13.5px; font-weight: 400; line-height: 1.55; letter-spacing: -0.02em; }
/* Доступный бонус подсвечен акцентом — сразу видно, где есть что забрать. */
.active-bonus { border-color: rgba(60,144,255,.28); }
.active-bonus .bonus-ic {
    background: rgba(60,144,255,.14);
    border-color: rgba(60,144,255,.45);
    box-shadow: 0 0 18px rgba(60,144,255,.20);
}

/* Кнопка «Забрать» */
.btn-bonus {
    background: rgba(230,237,255,.05); color: var(--white); border: 1px solid rgba(230,237,255,.12);
    border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 13px; cursor: pointer;
    font-family: var(--font); letter-spacing: -0.03em;
    transition: box-shadow .2s var(--ease), background .2s var(--ease), transform .15s var(--ease), filter .2s var(--ease);
}
/* Широкая кнопка основного действия — акцентный градиент со свечением. */
.btn-bonus.full {
    width: 100%; padding: 15px; font-size: 15px; font-weight: 600; letter-spacing: -0.03em;
    background: var(--brand-grad); color: var(--white);
    border: 2px solid rgba(230,237,255,.20); box-shadow: var(--brand-glow);
    position: relative; overflow: hidden;
}
.btn-bonus.full:not(:disabled):active { transform: scale(.98); filter: brightness(.96); }
/* Недоступный бонус: без градиента и свечения, иначе кнопка зовёт нажать зря. */
.btn-bonus.full:disabled {
    background: rgba(230,237,255,.04); color: var(--muted2);
    border-color: rgba(230,237,255,.08); box-shadow: none; cursor: default;
}
.btn-bonus:not(.full):not(:disabled):active { box-shadow: var(--glow-active); background: rgba(60,144,255,.14); }
.btn-bonus:not(.full):disabled { background: rgba(230,237,255,.04); color: var(--muted2); border-color: transparent; cursor: default; }
.wager-note {
    background: #111111; border: 1px solid rgba(230,237,255,.10); color: var(--muted);
    border-radius: 14px; padding: 14px 16px; font-size: 13px; font-weight: 400;
    letter-spacing: -0.02em; margin-bottom: 14px;
}
.wager-note b { color: var(--white); font-weight: 600; }

/* Промокод */
.promo-card {
    background: #111111;
    border: 1px solid rgba(230,237,255,.10);
    border-radius: 20px; padding: 18px; margin-bottom: 16px; box-shadow: var(--glow);
}
.promo-title { font-weight: 600; margin-bottom: 14px; font-size: 16px; color: var(--white); letter-spacing: -0.03em; display: flex; align-items: center; }
.promo-row { display: flex; gap: 10px; }
.promo-input {
    flex: 1; background: var(--bg); border: 1px solid rgba(230,237,255,.12); color: var(--white);
    border-radius: 13px; padding: 15px; font-size: 15px; text-transform: uppercase;
    font-family: var(--font); font-weight: 500; letter-spacing: -0.02em;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.promo-input::placeholder { color: var(--muted2); text-transform: none; font-weight: 400; }
.promo-input:focus { outline: none; border-color: rgba(60,144,255,.50); box-shadow: 0 0 0 3px rgba(60,144,255,.14); }
.promo-btn {
    min-width: 56px; padding: 15px 20px; border-radius: 13px; cursor: pointer;
    font-weight: 600; font-size: 15px; font-family: var(--font); letter-spacing: -0.03em;
    color: var(--white);
    background: var(--brand-grad); border: 2px solid rgba(230,237,255,.20);
    box-shadow: var(--brand-glow); transition: transform .15s var(--ease), filter .2s var(--ease);
}
.promo-btn:active { transform: scale(.96); filter: brightness(.96); }
.promo-msg { margin-top: 12px; font-size: 13px; padding: 12px; border-radius: 12px; letter-spacing: -0.02em; }
.promo-msg.err { background: rgba(230,237,255,.05); color: var(--muted); border: 1px solid rgba(230,237,255,.08); }
.promo-msg.ok { background: rgba(60,144,255,.12); color: var(--white); border: 1px solid rgba(60,144,255,.38); }

/* ===== Карточка «Бот в профиле» ===== */
.nick-card { position: relative; overflow: hidden; }
.nick-card-glow {
    position: absolute; top: -80px; right: -50px; width: 200px; height: 200px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(60,144,255,.20), transparent 70%);
}
.nick-card > *:not(.nick-card-glow) { position: relative; z-index: 1; }
/* Когда игрок уже в системе — рамка акцентная, как у доступного бонуса. */
.nick-card.is-joined { border-color: rgba(60,144,255,.28); }
.nick-card .bonus-head { gap: 12px; }
.nick-card .bonus-name { flex: 1 1 auto; min-width: 0; }
.nick-pill {
    flex: 0 0 auto; padding: 4px 11px; border-radius: 999px;
    background: rgba(60,144,255,.14); border: 1px solid rgba(60,144,255,.42);
    color: var(--white); font-size: 11px; font-weight: 600; letter-spacing: -0.02em;
    white-space: nowrap;
}
/* Строка состояния: в системе игрок или нет и когда следующая награда. */
.nick-state {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 12px;
    font-size: 12.5px; font-weight: 500; letter-spacing: -0.02em;
}
.nick-state::before {
    content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
}
.nick-state.is-ok { background: rgba(60,144,255,.10); color: var(--white); }
.nick-state.is-ok::before { background: var(--brand-2); box-shadow: 0 0 8px rgba(60,144,255,.9); }
.nick-state.is-off { background: rgba(230,237,255,.05); color: var(--muted); }
.nick-state.is-off::before { background: rgba(230,237,255,.35); }
.nick-state.is-warn { background: rgba(224,85,59,.10); color: #F0A090; }
.nick-state.is-warn::before { background: #E0553B; }
.nick-state.hidden { display: none; }
/* Две кнопки в строке: инструкция слева, действие справа и шире. */
.nick-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.nick-guide-btn { width: 100%; }

/* ===== Окна «Бот в профиле» ===== */
.nickb-modal { text-align: center; max-height: min(88vh, 720px); overflow-y: auto; }
.nickb-icon, .nickb-icon-ok, .nickb-icon-err {
    display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 14px;
    border-radius: 50%;
}
.nickb-icon { background: rgba(60,144,255,.14); border: 1px solid rgba(60,144,255,.42); color: var(--brand-2); }
.nickb-icon-ok { background: var(--brand-grad); color: var(--white); box-shadow: var(--brand-glow); }
.nickb-icon-err { background: rgba(224,85,59,.14); border: 1px solid rgba(224,85,59,.45); color: #F0785F; }
/* Плашка с юзернеймом и кнопкой копирования. */
.nickb-tag {
    display: flex; align-items: center; gap: 10px; margin: 16px 0 4px;
    padding: 10px 10px 10px 14px; border-radius: 14px;
    background: rgba(230,237,255,.05); border: 1px solid rgba(230,237,255,.14);
}
.nickb-tag-name {
    flex: 1 1 auto; min-width: 0; text-align: left;
    font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--white);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nickb-copy {
    flex: 0 0 auto; cursor: pointer; padding: 8px 14px; border-radius: 10px;
    background: var(--brand-grad); border: 1px solid rgba(230,237,255,.20);
    color: var(--white); font-family: var(--font);
    font-size: 12.5px; font-weight: 600; letter-spacing: -0.03em;
}
.nickb-copy:active { filter: brightness(.95); }
/* Шаги инструкции */
.nickb-steps { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; text-align: left; }
.nickb-step {
    display: flex; gap: 10px; align-items: baseline;
    padding: 11px 13px; border-radius: 12px;
    background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.08);
}
.nickb-step-n {
    flex: 0 0 auto; color: var(--brand-2);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.nickb-step-tx { flex: 1 1 auto; color: var(--text); font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: -0.02em; }
.nickb-step-tx b { color: var(--white); font-weight: 600; }
/* Сводка: сколько, как часто, куда */
.nickb-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.nickb-fact {
    display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.08);
}
.nickb-fact span { color: var(--muted2); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.nickb-fact b { color: var(--white); font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }
.nickb-note {
    margin: 4px 0 0; color: var(--muted2);
    font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: -0.02em;
}
.nickb-hint {
    margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; text-align: left;
    background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.08);
    color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.55; letter-spacing: -0.02em;
}
.nickb-hint b { color: var(--white); font-weight: 600; }
.nickb-amount { color: var(--white); }
/* Кнопки окна: две в ряд, а в окне ошибки три — там они уже узкие. */
.nickb-btns { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-top: 18px; }
.nickb-btns-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Класс, а не :has(): в старых вебвью Telegram :has() не поддерживается,
   и окно с одной кнопкой сломалось бы на половину ширины. */
.nickb-btns-1 { grid-template-columns: 1fr; }
.nickb-btn {
    min-height: 48px; padding: 0 12px; border-radius: 14px; cursor: pointer;
    background: rgba(230,237,255,.05); border: 1px solid rgba(230,237,255,.14);
    color: var(--white); font-family: var(--font);
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.03em;
    transition: filter .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.nickb-btn:active { transform: scale(.97); }
.nickb-btn.nickb-primary {
    background: var(--brand-grad); border: 2px solid rgba(230,237,255,.20);
    box-shadow: var(--brand-glow);
}
.nickb-btns-3 .nickb-btn { font-size: 12.5px; padding: 0 6px; }

/* ===== Соцсети ===== */
.social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.social-item {
    background: #111111; border: 1px solid rgba(230,237,255,.10);
    border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
    box-shadow: var(--glow);
}
.social-item:active { transform: scale(.97); border-color: rgba(60,144,255,.38); }
.social-ic { font-size: 20px; }
.social-name { font-size: 13px; font-weight: 500; color: var(--text); letter-spacing: -0.02em; }

/* ===== Кошелёк ===== */
.wallet-balance {
    position: relative; overflow: hidden;
    background: #111111;
    border: 1px solid rgba(230,237,255,.12);
    border-radius: 22px; padding: 28px 22px; text-align: center; margin-bottom: 20px;
    box-shadow: var(--glow);
}
/* Мягкое акцентное свечение сверху — как у карточки бонуса. */
.wallet-balance::before {
    content: ""; position: absolute; top: -70px; left: 50%; transform: translateX(-50%);
    width: 240px; height: 200px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(60,144,255,.18), transparent 70%);
}
.wb-label { position: relative; color: var(--muted2); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.wb-value { position: relative; font-size: 38px; font-weight: 500; margin: 8px 0; color: var(--white); letter-spacing: -0.03em; }
.wb-usdt { position: relative; color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: -0.02em; }

.subtabs { display: flex; gap: 6px; background: #111111; border: 1px solid rgba(230,237,255,.10);
    border-radius: 14px; padding: 6px; margin-bottom: 20px; }
.subtab { flex: 1; background: none; border: none; color: rgba(230,237,255,.50); font-size: 12.5px;
    font-weight: 500; letter-spacing: -0.03em; padding: 11px 4px; border-radius: 10px; cursor: pointer; font-family: var(--font);
    transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
/* Выбранная подвкладка — акцентный градиент со свечением, как чипы каталога. */
.subtab.active { background: var(--brand-grad); color: var(--white); font-weight: 600;
    box-shadow: var(--brand-glow), inset 0 0 0 1px rgba(230,237,255,.18); }

.subpane { animation: fadeIn .25s var(--ease); }
.form-label { font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 10px; }
.amount-input {
    width: 100%; background: #111111; border: 1px solid rgba(230,237,255,.12); color: var(--white);
    border-radius: 14px; padding: 18px; font-size: 24px; font-weight: 500; text-align: center;
    letter-spacing: -0.03em;
    font-family: var(--font); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.amount-input:focus { outline: none; border-color: rgba(60,144,255,.50); box-shadow: 0 0 0 3px rgba(60,144,255,.14); }
/* Стрелки number-инпута в вебвью рисуются светлым блоком поверх тёмного поля —
   в макете их нет, поэтому убираем и вводим сумму с клавиатуры. */
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.amount-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.calc-line { text-align: center; margin: 16px 0; color: var(--muted2); font-size: 14px; }
.calc-line b { color: var(--white); font-size: 18px; }

/* Блок расчёта пополнения (к оплате / получишь) */
.pay-box {
    background: #111111; border: 1px solid rgba(230,237,255,.10);
    border-radius: 14px; padding: 6px 16px; margin: 14px 0 18px;
}
.pay-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; font-size: 14px; font-weight: 400; letter-spacing: -0.02em; color: var(--muted);
}
.pay-row + .pay-row { border-top: 1px solid rgba(230,237,255,.08); }
.pay-row b { color: var(--white); font-size: 17px; font-weight: 600; letter-spacing: -0.03em; }
.pay-row:last-child b { color: var(--white); }
.method-label { font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 10px; }
.methods { display: flex; gap: 12px; margin-bottom: 16px; }
.method { flex: 1; background: #111111; border: 1px solid rgba(230,237,255,.10); color: var(--muted);
    border-radius: 14px; padding: 16px; font-size: 14px; font-weight: 500; letter-spacing: -0.03em;
    cursor: pointer; font-family: var(--font);
    transition: all .2s var(--ease); }
/* Выбранный способ — акцентная рамка и подсветка, без заливки: внутри лежит
   цветная иконка платёжки, и градиент под ней читался бы грязно. */
.method.active { border-color: rgba(60,144,255,.55); color: var(--white); font-weight: 600;
    background: rgba(60,144,255,.10);
    box-shadow: 0 0 20px rgba(60,144,255,.20); }
.min-note { text-align: center; color: var(--muted2); font-size: 12px; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 18px; }
.min-note b { color: var(--white); font-weight: 600; }

/* Способ вывода использует те же .methods/.method, что и депозит — вид один
   в один, включая иконки платёжек. Своих правил у вывода нет. */

/* ===== Профиль ===== */
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.p-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(230,237,255,.05); border: 1px solid rgba(230,237,255,.14);
    display: flex; align-items: center; justify-content: center; font-size: 28px;
    box-shadow: var(--glow);
}
.p-name { font-size: 19px; font-weight: 600; color: var(--white); letter-spacing: -0.03em; }
.p-rank { color: var(--muted); font-size: 14px; font-weight: 500; margin-top: 3px; letter-spacing: -0.02em; }
.p-id { color: var(--muted2); font-size: 12px; font-weight: 400; margin-top: 3px; letter-spacing: -0.02em; }
.p-id b { color: var(--white); font-weight: 600; letter-spacing: .1em; }

.profile-balance {
    background: #111111; border: 1px solid rgba(230,237,255,.10); border-radius: var(--radius);
    padding: 18px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
    box-shadow: var(--glow);
}
.pb-label { color: var(--muted2); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.pb-value { font-size: 24px; font-weight: 500; margin-top: 4px; color: var(--white); letter-spacing: -0.03em; }
/* Маленький вариант: у него свой размер и обводка, поэтому толстую рамку и
   свечение большой градиентной кнопки здесь перекрываем. */
.btn-green.sm { background: var(--brand-grad); color: var(--white); border: 1px solid rgba(230,237,255,.20);
    border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 13px; letter-spacing: -0.03em;
    min-height: 0; cursor: pointer; box-shadow: 0 0 18px rgba(1,82,255,.24);
    transition: box-shadow .2s var(--ease), filter .2s var(--ease); }
.btn-green.sm:active { filter: brightness(.96); }

.rank-progress { background: #111111; border: 1px solid rgba(230,237,255,.10); border-radius: var(--radius);
    padding: 18px; margin-bottom: 16px; box-shadow: var(--glow); }
.rp-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px;
    font-weight: 400; letter-spacing: -0.02em; color: var(--muted); margin-bottom: 12px; }
.rp-head b { color: var(--white); font-weight: 600; }
.link-btn { background: none; border: none; color: var(--brand-2); font-size: 13px; cursor: pointer;
    font-weight: 600; letter-spacing: -0.03em; font-family: var(--font); }
.rp-bar { height: 8px; background: rgba(230,237,255,.08); border-radius: 6px; overflow: hidden; }
/* Полоса прогресса ранга — акцентный градиент со свечением. */
.rp-fill { height: 100%; background: var(--brand-grad);
    width: 0%; transition: width .6s var(--ease); border-radius: 6px;
    box-shadow: 0 0 12px rgba(60,144,255,.55); }
.rp-left { font-size: 12px; color: var(--muted2); font-weight: 400; margin-top: 10px; letter-spacing: -0.02em; }
.rp-left b { color: var(--white); font-weight: 600; }

.stat-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 16px; background: #111111; border: 1px solid rgba(230,237,255,.10);
    border-radius: 14px; margin-bottom: 10px; font-size: 14px; box-shadow: var(--glow);
}
.stat-row > span { color: var(--muted); font-weight: 400; letter-spacing: -0.02em; }
.stat-row b { font-weight: 600; color: var(--white); letter-spacing: -0.03em; }
.toggle-row { margin-top: 10px; }

/* Переключатель */
.switch { position: relative; display: inline-block; width: 48px; height: 27px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: rgba(230,237,255,.08);
    border: 1px solid rgba(230,237,255,.12); border-radius: 27px; transition: .25s var(--ease); }
.slider:before { content: ""; position: absolute; height: 19px; width: 19px; left: 3px; bottom: 3px;
    background: var(--muted2); border-radius: 50%; transition: .25s var(--ease); }
/* Включённый тумблер — акцентный градиент, чтобы состояние читалось сразу. */
.switch input:checked + .slider { background: var(--brand-grad); border-color: rgba(230,237,255,.22); }
.switch input:checked + .slider:before { transform: translateX(21px); background: var(--white);
    box-shadow: 0 0 10px rgba(230,237,255,.5); }

/* Реферальный блок */
.ref-block { margin-top: 20px; background: #111111; border: 1px solid rgba(230,237,255,.10);
    border-radius: var(--radius); padding: 18px; box-shadow: var(--glow); }
.ref-title { font-weight: 600; font-size: 16px; letter-spacing: -0.03em; margin-bottom: 14px; }
.ref-balance { position: relative; overflow: hidden; background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.10);
    border-radius: 14px; padding: 18px; text-align: center; margin-bottom: 14px; }
/* Заливка-индикатор: раньше была сиреневой, теперь в акцентном синем. */
.rb-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; z-index: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(60,144,255,.22), rgba(60,144,255,.02));
    transition: height .8s var(--ease); }
.ref-balance > *:not(.rb-meter) { position: relative; z-index: 1; }
.rb-label { color: var(--muted2); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.rb-value { font-size: 30px; font-weight: 500; color: var(--white); margin-top: 6px; letter-spacing: -0.03em; }
.rb-tier { display: inline-block; margin-top: 9px; padding: 3px 11px; border-radius: 999px;
    font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--white);
    background: rgba(60,144,255,.14); border: 1px solid rgba(60,144,255,.42); }
.ref-stats { display: flex; gap: 12px; margin-bottom: 14px; }
.rs-item { position: relative; overflow: hidden; flex: 1; background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.08);
    border-radius: 14px; padding: 14px; text-align: center; }
.rs-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; z-index: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(60,144,255,.18), rgba(60,144,255,.01));
    transition: height .8s var(--ease); }
.rs-item > *:not(.rs-meter) { position: relative; z-index: 1; }
.rs-num { font-size: 22px; font-weight: 500; color: var(--white); letter-spacing: -0.03em; }
.rs-lbl { color: var(--muted2); font-size: 12px; font-weight: 400; margin-top: 3px; letter-spacing: -0.02em; }
.rs-bar { height: 6px; margin-top: 10px; background: rgba(230,237,255,.08); border-radius: 6px; overflow: hidden; }
.rs-fill { height: 100%; width: 0%; border-radius: 6px;
    background: var(--brand-grad); transition: width .8s var(--ease);
    box-shadow: 0 0 10px rgba(60,144,255,.5); }
.rs-goal { margin-top: 7px; font-size: 10px; font-weight: 600; letter-spacing: .05em;
    color: var(--muted2); text-transform: uppercase; }
.ref-how { margin-top: 16px; font-size: 13px; color: var(--muted2); font-weight: 400; line-height: 1.8; letter-spacing: -0.02em; }
.ref-how b { color: var(--white); font-weight: 600; display: block; margin-bottom: 8px; }
/* В реферальном блоке главное действие — «Вывести на баланс» (.btn-purple):
   на переведённую сумму накладывается вагер, и отменить это нельзя. Поэтому
   «Поделиться» и «Копировать» держим второстепенными — три градиентные кнопки
   подряд спорили бы друг с другом, и акцент потерялся бы. */
.ref-block .btn-green {
    background: rgba(230,237,255,.05);
    border: 1px solid rgba(230,237,255,.12);
    box-shadow: none;
}

/* ===== Чат ===== */
.chat-hero { background: #111111;
    border: 1px solid rgba(230,237,255,.10);
    border-radius: 22px; padding: 30px 22px; text-align: center; margin-bottom: 20px; box-shadow: var(--glow); }
.chat-emoji { font-size: 46px; color: var(--brand-2); filter: drop-shadow(0 0 14px rgba(60,144,255,.45)); }
/* Значок-герой чата — готовая картинка из макета (images/Чат.svg). У неё свой
   круглый фон с градиентом, поэтому размер задаём явно, а не через font-size
   родителя. display: block убирает зазор от базовой линии под картинкой. */
.chat-emoji img { display: block; width: 64px; height: 64px; margin: 0 auto; }
.chat-title { font-size: 21px; font-weight: 600; margin: 12px 0 8px; color: var(--white); letter-spacing: -0.03em; }
.chat-sub { color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.55; margin-bottom: 20px; letter-spacing: -0.02em; }
.chat-feats { display: flex; flex-direction: column; gap: 12px; }
.feat { display: flex; gap: 14px; align-items: flex-start; background: #111111;
    border: 1px solid rgba(230,237,255,.10); border-radius: 14px; padding: 16px; box-shadow: var(--glow); }
/* grayscale здесь глушил акцентный цвет иконки в кружке — не нужен. */
.feat span { font-size: 22px; }
.feat b { font-size: 14px; font-weight: 600; color: var(--white); letter-spacing: -0.03em; }
.feat p { color: var(--muted2); font-size: 12px; font-weight: 400; margin-top: 3px; line-height: 1.4; letter-spacing: -0.02em; }

/* ===== Кнопки ===== */
.btn { border: 1px solid rgba(230,237,255,.12); border-radius: 14px; font-size: 15px;
    font-weight: 600; letter-spacing: -0.03em; cursor: pointer; flex: 1; color: var(--white);
    min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: box-shadow .22s var(--ease), background .22s var(--ease), transform .15s var(--ease);
    font-family: var(--font); }
.btn:active { transform: scale(.98); }
/* Главное действие раздела (создать счёт / вывести) — акцентный градиент. */
.btn-green { background: var(--brand-grad); color: var(--white);
    border: 2px solid rgba(230,237,255,.20); box-shadow: var(--brand-glow); }
.btn-green:active { filter: brightness(.96); }
/* Второстепенное действие (проверить оплату) — тёмная плашка. */
.btn-dark { background: #111111; color: var(--text); }
.btn-dark:active { border-color: rgba(60,144,255,.42); }
/* Сиреневый вариант остался с прошлого оформления — теперь тот же акцент.
   Точные значения задаёт правило ниже в файле, здесь база. */
.btn-purple { 
    background: var(--brand-grad); 
    color: var(--white); 
    border: 1px solid rgba(230,237,255,.20);
}
.btn-purple:active { 
    filter: brightness(1.06);
}
/* Единственный потребитель — главная кнопка окна «Пополнение через NFT
   подарки». Раньше она была белой плашкой из прошлого оформления и в новой
   палитре выглядела чужеродно. */
.btn-light {
    background: var(--brand-grad);
    color: var(--white);
    border: 2px solid rgba(230,237,255,.20);
    box-shadow: var(--brand-glow);
}
.btn-light:active {
    box-shadow: 0 0 18px rgba(1,82,255,.40);
    filter: brightness(.96);
}
.btn.full { width: 100%; margin-top: 10px; }

/* ===== Нижняя навигация ===== */
.tabbar {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex;
    background: rgba(1,4,13,0.88);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-top: 1px solid rgba(230,237,255,.07);
    padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
    z-index: 40;
}
.tabbtn {
    flex: 1; background: none; border: none; color: rgba(230,237,255,.42);
    font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 7px 0; cursor: pointer; font-family: var(--font); font-weight: 500;
    letter-spacing: -0.03em;
    transition: color .22s var(--ease);
    position: relative;
}
/* Иконки берут цвет от кнопки (currentColor), поэтому grayscale здесь не нужен —
   раньше он глушил и активную иконку, из-за чего она оставалась серой. */
.tabbtn span { font-size: 20px; opacity: .85; transition: opacity .22s var(--ease), filter .22s var(--ease); }
/* Выбранная вкладка светится акцентом: иконка и подпись в E6EDFF,
   полоска сверху — тот же диагональный градиент. */
.tabbtn.active { color: var(--white); font-weight: 600; }
.tabbtn.active span { opacity: 1; filter: drop-shadow(0 0 9px rgba(60,144,255,.65)); }
.tabbtn.active::after {
    content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px; border-radius: 3px; background: var(--brand-grad);
    box-shadow: 0 0 14px rgba(60,144,255,.85);
}
/* Мягкая подсветка под выбранной вкладкой. z-index держим ниже содержимого,
   иначе градиент лёг бы поверх иконки и притушил её. */
.tabbtn.active::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 56px; height: 40px; border-radius: 50%; pointer-events: none; z-index: -1;
    background: radial-gradient(60% 60% at 50% 0%, rgba(60,144,255,.28), transparent 70%);
}


/* ===== Игровой экран ===== */
.game-screen {
    min-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
}
.game-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}
.back-btn {
    background: var(--btn);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--white);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}
.back-btn:active { background: var(--btn-hover); transform: scale(.96); }
.game-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
}
.game-info {
    padding: 18px;
    background: var(--card);
    border-radius: var(--radius);
    margin: 18px;
}
.balance-row {
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 8px;
}
.balance-row b {
    color: var(--white);
    font-size: 18px;
}
.bet-limits {
    font-size: 12px;
    color: var(--muted2);
}
.game-step {
    padding: 22px 18px;
}
.game-step h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
}
.game-outcomes {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.outcome-btn {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.07);
    color: var(--white);
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}
.outcome-btn:active {
    background: var(--btn-hover);
    transform: scale(.96);
    box-shadow: var(--glow-active);
}
#gameBetInput {
    width: 100%;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--white);
    padding: 16px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    font-family: inherit;
    margin-bottom: 12px;
}
#gameBetInput:focus {
    outline: none;
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.quick-bets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.quick-bets button {
    background: var(--card2);
    border: 1px solid rgba(255,255,255,.07);
    color: var(--silver);
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
}
.quick-bets button:active {
    background: var(--btn);
    transform: scale(.94);
}
.play-btn, .play-again-btn {
    width: 100%;
    background: var(--btn);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--white);
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s var(--ease);
    font-family: inherit;
    margin-bottom: 12px;
}
.play-btn:active, .play-again-btn:active {
    background: var(--btn-hover);
    transform: scale(.98);
    box-shadow: var(--glow-active);
}
.play-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Успешный итог на неактивной кнопке (например «Забрал 2.14x» в Crash):
   кнопка нажатию уже не подлежит, но результат должен читаться как победа. */
.play-btn.ok {
    border-color: rgba(63,203,99,.5);
    color: #9FE7C0;
    background: rgba(63,203,99,.14);
}
.play-btn.ok:disabled { opacity: .9; }
.result-card {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    box-shadow: var(--glow);
    margin-bottom: 20px;
}
.result-card.win {
    border-color: rgba(255,255,255,.12);
    background: linear-gradient(180deg, var(--card) 0%, rgba(76, 175, 80, 0.08) 100%);
}
.result-card.loss {
    background: linear-gradient(180deg, var(--card) 0%, rgba(244, 67, 54, 0.06) 100%);
}
.result-emoji {
    font-size: 64px;
    margin-bottom: 12px;
    animation: bounce .5s ease;
}
@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.result-card h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 16px;
}
.result-display {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 16px;
    line-height: 1.5;
}
.result-profit {
    font-size: 28px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 12px;
}
.result-balance {
    font-size: 14px;
    color: var(--muted2);
}
.result-balance b {
    color: var(--silver);
}


/* ============================================================
   СЛОТЫ v2 — компактный дизайн в стиле VeltGame (Pragmatic-like)
   ============================================================ */

.slot-screen {
    /* Пер-слотовый акцент/шрифт (задаётся из JS). Дефолт — фирменное золото Velt */
    --slot-accent: #FFC24B;
    --slot-accent2: #FF8A3D;
    --slot-glow: rgba(255, 194, 75, .45);
    --slot-glow2: rgba(255, 138, 61, .4);
    --slot-font: 'Fredoka', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 12px 22px;
    min-height: calc(100vh - 60px);
    max-width: 520px;
    margin: 0 auto;
    position: relative;
    /* Фирменный фон под тему слота — заполняет пустую область цветом слота */
    background:
        radial-gradient(120% 45% at 50% -6%, var(--slot-glow) 0%, transparent 58%),
        radial-gradient(120% 42% at 50% 106%, var(--slot-glow2) 0%, transparent 58%),
        radial-gradient(90% 60% at 50% 50%, color-mix(in srgb, var(--slot-accent) 6%, transparent) 0%, transparent 70%);
    animation: slotEnter .45s cubic-bezier(.22, .61, .36, 1);
    transition: background .5s var(--ease);
}
/* Тонкая сетка-текстура поверх фона для глубины */
.slot-screen::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--slot-accent) 8%, transparent) 0, transparent 40%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--slot-accent2) 8%, transparent) 0, transparent 40%);
    pointer-events: none;
}
@keyframes slotEnter {
    from { opacity: 0; transform: translateY(14px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Топбар */
.slot-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.slot-back {
    width: 42px; height: 42px; flex: 0 0 42px;
    background: var(--card); border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; color: var(--white); font-size: 20px; font-weight: 700;
    cursor: pointer; transition: all .2s var(--ease);
    display: flex; align-items: center; justify-content: center;
}
.slot-back:active { transform: scale(.9); background: var(--card2); }
.slot-name {
    flex: 1; text-align: center; font-size: 20px; font-weight: 700;
    color: var(--white); letter-spacing: .5px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--slot-font, 'Fredoka', sans-serif);
    text-shadow: 0 0 14px var(--slot-glow);
}
.slot-title-ic { width: 24px; height: 24px; display: inline-flex; flex: none; }
.slot-title-ic svg { width: 100%; height: 100%; filter: drop-shadow(0 0 6px var(--slot-glow)); }
.slot-bal {
    background: var(--card2); border: 1px solid var(--slot-accent);
    border-radius: 12px; padding: 9px 13px; font-size: 13px; font-weight: 800;
    color: var(--slot-accent); white-space: nowrap;
    transition: color .4s var(--ease), border-color .4s var(--ease);
}

/* Баннер фриспинов */
.slot-fs-banner {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--slot-accent) 22%, transparent), color-mix(in srgb, var(--slot-accent2) 14%, transparent));
    border: 1px solid var(--slot-accent);
    border-radius: 14px; padding: 11px 14px; font-size: 13px; font-weight: 700;
    color: #fff; animation: fsPulse 1.4s ease-in-out infinite;
}
.slot-fs-banner b { color: #fff; }
.slot-fs-banner .fs-ic { width: 17px; height: 17px; display: inline-flex; color: var(--slot-accent); }
.slot-fs-banner .fs-ic .uic { width: 17px; height: 17px; }
.slot-fs-banner .fs-sep { opacity: .4; }
@keyframes fsPulse {
    0%,100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { box-shadow: 0 0 24px var(--slot-glow); }
}

/* Барабаны */
.slot-machine {
    background: radial-gradient(130% 110% at 50% -5%, color-mix(in srgb, var(--slot-accent) 14%, #1b1d33) 0%, #14162b 55%, #0c0d1a 100%);
    border: 2px solid color-mix(in srgb, var(--slot-accent) 40%, rgba(255,255,255,.1));
    border-radius: 22px;
    padding: 13px;
    box-shadow: 0 14px 40px rgba(0,0,0,.55), inset 0 2px 14px rgba(0,0,0,.45),
                0 0 26px color-mix(in srgb, var(--slot-glow) 40%, transparent);
    position: relative;
    overflow: hidden;
    transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.slot-machine::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, transparent 24%);
    pointer-events: none;
}
/* Бегущий блик по верху автомата */
.slot-machine::after {
    content: ''; position: absolute; top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.05), transparent);
    transform: skewX(-18deg);
    animation: machineSheen 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes machineSheen {
    0%, 70% { left: -60%; }
    100% { left: 130%; }
}

/* Сетка (кол-во колонок задаётся из JS через inline style) */
#slotGrid.slot-grid {
    display: grid;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.slot-screen .slot-column { display: flex; flex-direction: column; gap: 5px; }

.slot-screen .slot-cell {
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(40,42,72,.7) 0%, rgba(22,24,44,.85) 100%);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    transition: all .25s var(--ease);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}
.slot-symbol {
    width: 84%;
    height: 84%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
    transition: transform .25s var(--ease);
    user-select: none;
}
.slot-symbol svg {
    width: 100%;
    height: 100%;
    display: block;
}
.slot-screen .slot-cell.winning {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--slot-accent) 40%, transparent) 0%,
        color-mix(in srgb, var(--slot-accent2) 48%, transparent) 100%);
    border-color: var(--slot-accent);
    box-shadow: 0 0 22px var(--slot-glow), inset 0 0 14px color-mix(in srgb, var(--slot-accent) 35%, transparent);
    animation: slotWinPulse .7s cubic-bezier(.4,0,.2,1) infinite;
    z-index: 2;
}
.slot-screen .slot-cell.winning .slot-symbol {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px var(--slot-glow)) drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
@keyframes slotWinPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Спин-анимация для эмодзи */
.slot-grid.spinning .slot-symbol { animation: blurSpinEmoji .15s linear infinite; }
@keyframes blurSpinEmoji {
    0%,100% { filter: blur(0) drop-shadow(0 2px 4px rgba(0,0,0,.5)); transform: translateY(0); }
    50% { filter: blur(2px) drop-shadow(0 2px 4px rgba(0,0,0,.5)); transform: translateY(-5px); }
}

/* Панель ставки + спин */
.slot-panel {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.slot-bet-row {
    display: flex; align-items: center; gap: 6px;
    background: var(--card); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 6px;
}
.slot-bet-btn {
    width: 40px; height: 100%; min-height: 44px;
    background: var(--btn); border: none; border-radius: 10px;
    color: var(--white); font-size: 22px; font-weight: 700; cursor: pointer;
    transition: all .15s var(--ease);
}
.slot-bet-btn:active { transform: scale(.88); background: var(--btn-hover); }
.slot-bet-display { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0 6px; min-width: 92px; }
.slot-bet-label { font-size: 9px; color: var(--muted2); letter-spacing: .5px; }
.slot-bet-value { display: flex; align-items: baseline; justify-content: center; gap: 4px; font-size: 15px; font-weight: 800; color: var(--white); }
.slot-bet-input {
    width: 62px; min-width: 40px; max-width: 96px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px; padding: 3px 4px;
    color: var(--white); font-size: 16px; font-weight: 800; text-align: center;
    font-family: inherit; -moz-appearance: textfield;
}
.slot-bet-input::-webkit-outer-spin-button,
.slot-bet-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.slot-bet-input:focus { outline: none; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); }
.slot-bet-cur { font-size: 13px; font-weight: 700; color: var(--silver); }

.slot-spin-btn {
    flex: 1;
    background: linear-gradient(135deg, var(--slot-accent) 0%, var(--slot-accent2) 100%);
    border: none; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    cursor: pointer; transition: transform .18s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
    box-shadow: 0 6px 20px var(--slot-glow);
    padding: 8px;
    position: relative; overflow: hidden;
}
.slot-spin-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%);
    pointer-events: none;
}
.slot-spin-btn:active { transform: scale(.96); }
.slot-spin-btn:disabled { opacity: .6; }
.slot-spin-btn.spinning { animation: spinBtnGlow .7s ease-in-out infinite; }
@keyframes spinBtnGlow {
    0%,100% { box-shadow: 0 6px 20px var(--slot-glow); filter: brightness(1); }
    50% { box-shadow: 0 6px 32px var(--slot-glow); filter: brightness(1.12); }
}
.slot-spin-text { font-size: 16px; font-weight: 900; color: #14140f; letter-spacing: 1px; position: relative; }
.slot-spin-cost { font-size: 11px; font-weight: 700; color: rgba(0,0,0,.55); position: relative; }

/* Чипы автоплея */
.slot-auto-chips {
    display: flex; gap: 8px; justify-content: center;
    animation: fadeUp .2s var(--ease);
}
.auto-chip {
    flex: 1; max-width: 70px;
    background: var(--card); border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px; padding: 11px 4px; color: var(--white);
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: all .15s var(--ease);
}
.auto-chip:active { transform: scale(.92); background: var(--btn); }

/* Кнопки действий */
.slot-actions { display: flex; gap: 10px; }
.slot-action-btn {
    flex: 1;
    background: var(--card); border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px; padding: 11px 6px; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--text); font-size: 13px; font-weight: 700;
    transition: all .18s var(--ease);
}
.slot-action-btn:active { transform: scale(.95); background: var(--card2); }
.slot-action-btn .a-ic { font-size: 16px; }
.slot-action-btn.active {
    background: linear-gradient(135deg, #4CAF50 0%, #3d9142 100%);
    border-color: #4CAF50; color: #fff;
    box-shadow: 0 4px 12px rgba(76,175,80,.35);
}
.slot-action-btn.buy-bonus {
    background: linear-gradient(135deg, rgba(255,215,0,.15), rgba(255,140,0,.1));
    border-color: rgba(255,215,0,.35); color: #FFD54F;
}
.slot-action-btn.buy-bonus:active { background: rgba(255,215,0,.25); }
.auto-count { font-size: 11px; font-weight: 800; color: #8BE38F; }

.slot-hint {
    text-align: center; font-size: 11px; color: var(--muted2);
    line-height: 1.5; margin-top: 2px;
}

/* Бейдж RTP на карточке слота */
.slot-card { position: relative; }
.slot-rtp {
    position: absolute; top: 10px; left: 10px;
    background: rgba(76,175,80,.15); color: #8BE38F;
    border: 1px solid rgba(76,175,80,.3);
    font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 7px;
    letter-spacing: .3px;
}


/* ============================================================
   ИГРОВОЙ ЭКРАН v2 — единый стиль с VeltGame
   ============================================================ */
#tab-game .game-screen {
    padding: 14px 14px 28px;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: auto;
}
#tab-game .game-header {
    display: flex; align-items: center; gap: 10px;
}
#tab-game .back-btn {
    background: var(--card); border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; padding: 10px 14px; color: var(--white);
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: all .2s var(--ease);
}
#tab-game .back-btn:active { transform: scale(.94); background: var(--card2); }
#tab-game .game-title {
    flex: 1; text-align: center; font-size: 20px; font-weight: 800; color: var(--white);
}

#tab-game .game-info {
    background: linear-gradient(150deg, var(--card2), var(--card));
    border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
    padding: 16px 18px; text-align: center; box-shadow: var(--glow);
}
#tab-game .balance-row { font-size: 15px; color: var(--text); }
#tab-game .balance-row b { color: var(--silver); font-weight: 800; }
#tab-game .bet-limits { font-size: 12px; color: var(--muted2); margin-top: 6px; }

#tab-game .game-step h3 {
    font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; text-align: center;
}
#tab-game .game-outcomes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;
}
#tab-game .outcome-btn {
    background: var(--card); border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px; padding: 18px 12px; color: var(--white);
    font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: all .18s var(--ease); box-shadow: var(--glow);
}
#tab-game .outcome-btn:active,
#tab-game .outcome-btn.selected {
    transform: scale(.95);
    background: linear-gradient(135deg, #F2F2F5 0%, #C2C2CC 100%); color: #16161c;
    border-color: rgba(255,255,255,.35);
}

#tab-game #gameBetInput {
    width: 100%; background: var(--card); border: 1px solid rgba(255,255,255,.09);
    color: var(--white); border-radius: 14px; padding: 18px; font-size: 26px;
    font-weight: 800; text-align: center; font-family: inherit; margin-bottom: 14px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
#tab-game #gameBetInput:focus { outline: none; border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
#tab-game .quick-bets { display: flex; gap: 10px; margin-bottom: 16px; }
#tab-game .quick-bets button {
    flex: 1; background: var(--card); border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px; padding: 12px 4px; color: var(--white); font-size: 14px;
    font-weight: 700; cursor: pointer; font-family: inherit; transition: all .15s var(--ease);
}
#tab-game .quick-bets button:active { transform: scale(.92); background: var(--btn); }

#tab-game .play-btn, #tab-game .play-again-btn {
    width: 100%; border: none; border-radius: 14px; padding: 17px;
    font-size: 17px; font-weight: 900; letter-spacing: 1px; cursor: pointer;
    font-family: inherit; margin-bottom: 12px; color: #16161c;
    background: linear-gradient(135deg, #F2F2F5 0%, #C2C2CC 100%);
    box-shadow: 0 6px 18px rgba(0,0,0,.45); transition: all .18s var(--ease);
    position: relative; overflow: hidden;
}
#tab-game .play-btn::after, #tab-game .play-again-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.5), transparent 55%); pointer-events: none;
}
#tab-game .play-btn:active, #tab-game .play-again-btn:active { transform: scale(.97); filter: brightness(.96); }
#tab-game .play-btn:disabled { opacity: .55; }

#tab-game .result-card {
    background: var(--card); border: 2px solid rgba(255,255,255,.08);
    border-radius: 20px; padding: 28px 20px; text-align: center; box-shadow: var(--glow);
    animation: fadeUp .3s var(--ease);
}
#tab-game .result-card.win {
    border-color: rgba(255,255,255,.4);
    background: linear-gradient(180deg, var(--card) 0%, rgba(216,216,216,0.12) 100%);
    box-shadow: 0 0 30px rgba(255,255,255,.18);
}
#tab-game .result-card.loss {
    border-color: rgba(120,130,140,.3);
    background: linear-gradient(180deg, var(--card) 0%, rgba(120,130,140,0.08) 100%);
}
#tab-game .result-emoji { font-size: 52px; }
#tab-game .result-card h2 { font-size: 26px; font-weight: 900; margin: 6px 0 12px; color: var(--white); }
#tab-game .result-display { font-size: 15px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
#tab-game .result-profit {
    font-size: 32px; font-weight: 900; margin-bottom: 10px;
    background: linear-gradient(135deg, #FFFFFF, #C2C2CC);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
#tab-game .result-card.loss .result-profit {
    background: none; -webkit-text-fill-color: initial; color: #90A4AE;
}
#tab-game .result-balance { font-size: 14px; color: var(--muted); }
#tab-game .result-balance b { color: var(--silver); }


/* ============================================================
   UI-ИКОНКИ (монохром, наследуют цвет текста)
   ============================================================ */
.ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    vertical-align: -0.15em;
}
.uic {
    width: 1em;
    height: 1em;
    display: block;
    flex: none;
}
/* Инлайн-иконка перед текстом (заголовки, кнопки, строки) */
.ic-inline { width: 1.05em; height: 1.05em; margin-right: 7px; vertical-align: -0.16em; color: var(--silver); }

/* Иконки нижней навигации */
.tabbtn .ic { font-size: 22px; margin: 0; color: inherit; }

/* Иконки в заголовках секций — акцентные, в тон короне и геймпаду на главной */
.section-title .ic {
    font-size: 18px; margin-right: 8px; color: var(--brand-2);
    filter: drop-shadow(0 0 8px rgba(60,144,255,.45));
}

/* Иконки бонус-карточек / фич */
.bonus-ic .ic { font-size: 22px; color: var(--muted); }
.bonus-ic .ic .uic { width: 22px; height: 22px; }
/* Готовые значки из макета (images/*.svg) в круглой подложке бонус-карточки.
   Заливка у файлов зашита своя (#E6EDFF), поэтому акцентный синий активного
   бонуса на них не действует — подсветку держит сама подложка. */
.bonus-ic img { display: block; width: 24px; height: 24px; }
/* У доступного бонуса иконка акцентная — поддерживает подсветку карточки. */
.active-bonus .bonus-ic .ic { color: var(--brand-2); }
.feat > span .ic { font-size: 26px; color: var(--brand-2); }

/* Иконки в строках статистики */
.stat-row .ic, .toggle-row .ic { font-size: 17px; margin-right: 8px; color: var(--muted); }


/* Иконки/символы в карточках игр и слотов */
.game-emoji.ic { display: flex; align-items: center; justify-content: center; }
.game-emoji.ic .uic { width: 40px; height: 40px; color: var(--silver); filter: none; }
.game-emoji.slot-card-sym { display: flex; align-items: center; justify-content: center; filter: none; }
.game-emoji.slot-card-sym svg { width: 48px; height: 48px; }
/* Соцсети — иконки серебром */
.social-ic.ic .uic { width: 20px; height: 20px; color: var(--silver); }
/* Соцкнопки с готовым значком из макета: размер тот же, что у глифов, чтобы
   строки не разъезжались по высоте. */
.social-ic-img { display: inline-flex; flex: none; align-items: center; }
.social-ic-img img { display: block; width: 20px; height: 20px; }
/* Иконка результата игры */
#tab-game .result-emoji .uic { width: 48px; height: 48px; color: var(--silver); }
#tab-game .result-card.win .result-emoji .uic { color: var(--white); }
/* Иконка-герой в чате */
/* Иконка-герой чата: цвет задаётся тут, поэтому акцент указываем и здесь —
   правило на .chat-emoji до вложенного .uic не достаёт. */
.chat-emoji .uic { width: 1em; height: 1em; color: var(--brand-2); }


/* ============================================================
   ПРОКРУТКА БАРАБАНОВ (как в реальном автомате)
   ============================================================ */
.slot-screen .slot-cell { overflow: visible; }

/* Непрерывная лента барабана — крутится строго внутри окна колонки */
.slot-column.reel-spinning { position: relative; overflow: hidden; }
.reel-strip {
    position: absolute; left: 0; right: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: stretch;
    animation: reelRoll var(--reel-dur, 0.9s) linear infinite;
    will-change: transform; pointer-events: none;
    /* Прокрутка теперь медленнее, поэтому смаз слабее — символы читаются на ходу. */
    filter: blur(.45px) brightness(1.04);
}
@keyframes reelRoll {
    from { transform: translateY(0); }
    to   { transform: translateY(var(--reel-dist, 100px)); }
}
.reel-tile { display: flex; align-items: center; justify-content: center; }
.reel-tile .slot-symbol {
    width: 82%; height: 82%; display: flex; align-items: center; justify-content: center;
}
.reel-tile .sym-img { width: 100%; height: 100%; object-fit: contain; }

/* Барабан остановился — упругий отскок */
.slot-column.reel-stop .slot-symbol {
    animation: reelStop var(--reel-stop-dur, .52s) cubic-bezier(.16, 1.42, .35, 1);
}
@keyframes reelStopLegacy {
    0%   { transform: translateY(-45%); filter: blur(1px); }
    50%  { transform: translateY(12%); filter: blur(0); }
    72%  { transform: translateY(-5%); }
    100% { transform: translateY(0); }
}
/* Мягкое появление символа в каскаде */
.slot-screen .slot-cell.dropping .slot-symbol {
    animation: cellDrop var(--drop-dur, .58s) cubic-bezier(.16, 1.32, .35, 1) var(--drop-delay, 0ms) both;
}
@keyframes cellDropLegacy {
    0%   { transform: translateY(-88%) scale(.82); opacity: 0; }
    52%  { transform: translateY(5%) scaleX(1.09) scaleY(.9); opacity: 1; }   /* удар о ячейку — сквош */
    70%  { transform: translateY(-6%) scaleX(.94) scaleY(1.07); }             /* отскок — растяжение */
    86%  { transform: translateY(2%) scale(1); }
    100% { transform: translateY(0) scale(1); }
}

/* ============================================================
   ЕДИНЫЙ ПРЕМИУМ-СТИЛЬ МЕНЮ (Кошелёк / Профиль / Чат)
   — приводим к виду карточек Бонусов
   ============================================================ */

/* Единая подложка карточек: плоский #111111 с тонкой обводкой E6EDFF.
   Раньше здесь стоял серый градиент через !important, и он перебивал цвета
   разделов — именно из-за него кошелёк оставался серым. */
.stat-row,
.method,
.pay-box,
.profile-balance,
.rank-progress,
.ref-block,
.feat,
.subtabs,
.wallet-balance,
.profile-head {
    background: #111111;
    border: 1px solid rgba(230,237,255,.10);
}

/* Строки статистики — чуть крупнее, мягкий тап */
.stat-row {
    border-radius: 16px !important;
    padding: 16px 18px !important;
    transition: transform .18s var(--ease);
}
.stat-row:active { transform: scale(.995); }

/* Профиль: шапку оформляем карточкой */
.profile-head {
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: var(--glow);
}

/* Иконки-кружки в чат-фичах (как .bonus-ic) */
.feat { align-items: center; border-radius: 16px; }
.feat > span {
    width: 46px; height: 46px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(230,237,255,.05);
    border: 1px solid rgba(230,237,255,.14);
    filter: none;
}
.feat > span .ic { font-size: 22px; color: var(--brand-2); }
.feat > span .ic .uic { width: 22px; height: 22px; color: var(--brand-2); }

/* Способы оплаты — акцентная рамка и подсветка у выбранного. Заливку градиентом
   не даём: внутри лежит цветная иконка платёжки, под градиентом она грязнит. */
.method { border-radius: 16px; }
.method.active {
    border-color: rgba(60,144,255,.55);
    background: rgba(60,144,255,.10);
    color: var(--white);
    box-shadow: 0 0 20px rgba(60,144,255,.20);
}

/* Аватар профиля — кружок в новой обводке */
.p-avatar {
    border: 1px solid rgba(230,237,255,.16);
    box-shadow: var(--glow);
}

/* Баланс кошелька — чуть выразительнее */
.wallet-balance { box-shadow: var(--glow); }

/* ============================================================
   ПРЕМИУМ-МИКРОАНИМАЦИИ (тонко, без зашквара)
   ============================================================ */

@keyframes itemIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    /* Карточки вкладки плавно выезжают снизу каскадом.
       fill: backwards — чтобы после анимации hover-трансформы работали. */
    .tab:not(.hidden) { animation: none; }
    .tab:not(.hidden) > * { animation: itemIn .40s var(--ease) backwards; }
    .tab:not(.hidden) > *:nth-child(1) { animation-delay: .02s; }
    .tab:not(.hidden) > *:nth-child(2) { animation-delay: .06s; }
    .tab:not(.hidden) > *:nth-child(3) { animation-delay: .10s; }
    .tab:not(.hidden) > *:nth-child(4) { animation-delay: .14s; }
    .tab:not(.hidden) > *:nth-child(5) { animation-delay: .18s; }
    .tab:not(.hidden) > *:nth-child(6) { animation-delay: .22s; }
    .tab:not(.hidden) > *:nth-child(7) { animation-delay: .26s; }
    .tab:not(.hidden) > *:nth-child(n+8) { animation-delay: .30s; }

    /* Обложки игр/слотов — мягкий каскад появления (backwards, чтобы hover-зум работал) */
    .games-grid > * { animation: itemIn .40s var(--ease) backwards; }
    .games-grid > *:nth-child(2) { animation-delay: .04s; }
    .games-grid > *:nth-child(3) { animation-delay: .07s; }
    .games-grid > *:nth-child(4) { animation-delay: .10s; }
    .games-grid > *:nth-child(5) { animation-delay: .13s; }
    .games-grid > *:nth-child(6) { animation-delay: .16s; }
    .games-grid > *:nth-child(n+7) { animation-delay: .19s; }
}

/* ============================================================
   ИНТЕРАКТИВ: наведение (десктоп) + касание (телефон) — единый стиль
   ============================================================ */

/* Плавные переходы на всём интерактивном */
.btn, .btn-bonus, .btn-green, .btn-dark, .btn-purple, .btn-green.sm,
.method, .subtab, .social-item, .cover-card, .banner,
.promo-btn, .slot-action-btn, .link-btn, [data-goto], .tabbtn {
    transition: transform .18s var(--ease), box-shadow .2s var(--ease),
                background .2s var(--ease), filter .18s var(--ease), color .2s var(--ease);
    cursor: pointer;
}

/* ---------- ОБЛОЖКИ СЛОТОВ / ИГР — приближаются ----------
   Без media-фильтров: работает и на наведении (десктоп), и на касании (телефон).
   Telegram-вебвью часто не сообщает pointer:fine, из-за чего @media hover не применялся. */
.cover-card:hover,
.cover-card:active,
.cover-card.is-hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 18px 44px rgba(0,0,0,.6);
    z-index: 2;
}

/* ---------- КНОПКИ — подсветка своим цветом (наведение/касание) ---------- */
.btn:hover, .btn:active, .btn.is-hover,
.btn-bonus:hover, .btn-bonus:active, .btn-bonus.is-hover,
.btn-green:hover, .btn-green:active, .btn-green.is-hover,
.btn-dark:hover, .btn-dark:active, .btn-dark.is-hover,
.btn-purple:hover, .btn-purple:active, .btn-purple.is-hover,
.btn-green.sm:hover, .btn-green.sm:active, .btn-green.sm.is-hover,
.promo-btn:hover, .promo-btn:active, .promo-btn.is-hover,
.slot-action-btn:hover, .slot-action-btn:active, .slot-action-btn.is-hover,
[data-goto]:hover, [data-goto]:active, [data-goto].is-hover,
.banner:hover, .banner:active, .banner.is-hover {
    filter: brightness(1.12);
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
/* Лёгкое поджатие именно при нажатии */
.btn:active, .btn-bonus:active, .btn-green:active, .btn-dark:active, .btn-purple:active, .btn-green.sm:active,
.promo-btn:active, .slot-action-btn:active, [data-goto]:active, .banner:active {
    transform: scale(.97);
}

/* Способы/подвкладки/соц — мягкая заливка своим оттенком */
.method:not(.active):hover, .method:not(.active):active, .method:not(.active).is-hover,
.subtab:not(.active):hover, .subtab:not(.active):active, .subtab:not(.active).is-hover,
.social-item:hover, .social-item:active, .social-item.is-hover {
    background: rgba(60,144,255,.12); color: var(--white);
}

/* Нижняя навигация */
.tabbtn.active { transform: translateY(-1px); }
.tabbtn:not(.active):hover, .tabbtn:not(.active):active, .tabbtn:not(.active).is-hover { color: var(--text); }
.tabbtn:active { transform: scale(.9); }
.link-btn:hover, .link-btn:active, .link-btn.is-hover { color: var(--white); }

/* Поля ввода — акцентная рамка и мягкое свечение при фокусе */
.amount-input:focus, .promo-input:focus, input[type="text"]:focus, input[type="number"]:focus {
    outline: none;
    border-color: rgba(60,144,255,.55) !important;
    box-shadow: 0 0 0 3px rgba(60,144,255,.14);
}

/* Переключатели (язык/звук) — плавный слайдер */
.switch .slider, .switch .slider:before { transition: all .25s var(--ease); }

/* ============================================================
   ПЕРЕВОДЫ И МУЛЬТИ-ЧЕКИ (в кошельке) — единый премиум-стиль
   ============================================================ */

/* 5 подвкладок в ряд: чуть компактнее, при нехватке места — горизонтальный скролл */
.subtabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
    flex: 1 0 auto;
    white-space: nowrap;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.subtab .ic-inline .uic { width: 15px; height: 15px; }

/* Список чеков */
.checks-list { margin-top: 18px; }
.checks-title {
    font-size: 13px; color: var(--muted); margin-bottom: 10px; font-weight: 600;
}
.check-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #111111; border: 1px solid rgba(230,237,255,.10);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
    box-shadow: var(--glow);
}
.check-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.check-amount { color: var(--white); font-size: 15px; font-weight: 600; letter-spacing: -0.03em; }
.check-left { color: var(--muted); font-size: 12px; letter-spacing: -0.02em; }
.check-share {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #3a3a44 0%, #22222a 100%);
    color: var(--white); border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px; padding: 9px 13px; font-size: 12px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.check-share .ic-inline .uic { width: 15px; height: 15px; }

/* ============================================================
   МИНИ-ИГРЫ: полировка + режим PvP (тёмный/серебристый стиль)
   ============================================================ */

/* Иконка игры в заголовке — в кружке */
#tab-game .game-title-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; margin-right: 8px;
    background: radial-gradient(circle at 35% 28%, #3c3c46, #1a1a20);
    border: 1px solid rgba(255,255,255,.12); vertical-align: middle;
}
#tab-game .game-title-ic .uic { width: 18px; height: 18px; color: var(--silver); }
#tab-game .back-btn.wide { width: 100%; text-align: center; }

/* Переключатель режимов Соло / PvP - ПОЛНОСТЬЮ ОТКЛЮЧЁН */
.mode-toggle {
    display: none !important; /* PvP режим отключён навсегда */
}
.mode-pill {
    display: none !important; /* PvP режим отключён навсегда */
}
.mode-pill .ic-inline .uic { width: 15px; height: 15px; }
.mode-pill.active {
    background: linear-gradient(135deg, #3a3a44 0%, #22222a 100%);
    color: var(--white); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* PvP - КОНТЕЙНЕР СКРЫТ */
#pvpWrap {
    display: none !important; /* PvP режим отключён полностью */
}
.pvp-note {
    background: var(--card2); border: 1px solid rgba(255,255,255,.07); color: var(--muted);
    border-radius: 14px; padding: 12px 14px; font-size: 12.5px; line-height: 1.45; margin-bottom: 4px;
}
#pvpBody h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; text-align: center; }
#pvpBody #pvpBetInput {
    width: 100%; background: var(--card); border: 1px solid rgba(255,255,255,.09);
    color: var(--white); border-radius: 14px; padding: 18px; font-size: 26px;
    font-weight: 800; text-align: center; font-family: inherit; margin-bottom: 14px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
#pvpBody #pvpBetInput:focus { outline: none; border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }

.pvp-lobbies-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 22px 0 12px; color: var(--muted); font-size: 13px; font-weight: 700;
}
.pvp-refresh {
    background: var(--card); border: 1px solid rgba(255,255,255,.08); color: var(--silver);
    border-radius: 10px; padding: 7px 10px; cursor: pointer; font-family: inherit;
}
.pvp-refresh .ic-inline .uic { width: 16px; height: 16px; }
.pvp-refresh:active { transform: scale(.92); }

.pvp-empty { color: var(--muted2); font-size: 13px; text-align: center; padding: 18px 10px; }

.pvp-lobby {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--card); border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--glow);
}
.pvp-lobby-bet { color: var(--white); font-size: 16px; font-weight: 800; }
.pvp-lobby-prize { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pvp-join-btn {
    flex: none; border: none; border-radius: 11px; padding: 11px 20px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 800; color: #16161c;
    background: linear-gradient(135deg, #F2F2F5 0%, #C2C2CC 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.pvp-join-btn:active { transform: scale(.95); filter: brightness(.96); }

/* Ожидание соперника */
.pvp-wait {
    text-align: center; padding: 26px 18px;
    background: var(--card); border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px; box-shadow: var(--glow); animation: fadeUp .3s var(--ease);
}
.pvp-wait h2 { font-size: 20px; font-weight: 800; color: var(--white); margin: 14px 0 8px; }
.pvp-wait-sub { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.pvp-wait-sub b { color: var(--silver); }
.pvp-wait-hint { color: var(--muted2); font-size: 12.5px; line-height: 1.5; margin-bottom: 20px; }
.pvp-spinner {
    width: 46px; height: 46px; margin: 0 auto; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.12); border-top-color: var(--silver);
    animation: pvpSpin .8s linear infinite;
}
@keyframes pvpSpin { to { transform: rotate(360deg); } }

/* ============================================================
   ЧЕКИ: действия (поделиться/удалить) + окно «Чек получен»
   ============================================================ */
.check-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.check-share {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #3a3a44 0%, #22222a 100%);
    color: var(--white); border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px; padding: 9px 13px; font-size: 12px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.check-share .ic-inline .uic { width: 15px; height: 15px; }
.check-share:active { transform: scale(.95); filter: brightness(1.08); }
.check-del {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 38px; flex: none;
    background: var(--card2); border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px; color: var(--muted); cursor: pointer; font-family: inherit;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.check-del .ic-inline { margin: 0; vertical-align: middle; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; }
.check-del .ic-inline .uic { width: 17px; height: 17px; }
.check-del:active { transform: scale(.92); }
.check-del:hover, .check-del:active { color: #E0796B; background: #2a2024; }

/* Модальное окно в стиле VeltGame (например «Чек получен») */
.velt-modal-overlay {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(1,4,13,.78); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .25s var(--ease);
}
.velt-modal-overlay.show { opacity: 1; }
.velt-modal {
    width: 100%; max-width: 340px; text-align: center;
    background: var(--card);
    border: 1px solid rgba(230,237,255,.12); border-radius: 24px;
    padding: 30px 24px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.6);
    font-family: var(--font); letter-spacing: -0.03em; color: var(--white);
    transform: translateY(16px) scale(.96); transition: transform .28s var(--ease);
}
.velt-modal-overlay.show .velt-modal { transform: translateY(0) scale(1); }
.vm-icon {
    width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(230,237,255,.05);
    border: 1px solid rgba(60,144,255,.40);
    box-shadow: 0 0 22px rgba(1,82,255,.22);
}
.vm-icon .uic { width: 34px; height: 34px; color: var(--brand-2); }
.velt-modal h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--white); margin-bottom: 10px; }
.vm-amount {
    font-size: 40px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 6px;
    color: var(--white);
}
.vm-sub { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.vm-balance { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.vm-balance b { color: var(--white); font-weight: 600; }
.velt-modal .btn-bonus.full { border-radius: 14px; }

/* Модалка успешного вывода */
.withdrawal-modal { max-width: 360px; }
.withdrawal-modal .wm-icon {
    width: 80px; height: 80px; margin: 0 auto 18px; border-radius: 50%;
    background: rgba(230,237,255,.05);
    border: 2px solid rgba(60,144,255,.42);
    box-shadow: 0 0 26px rgba(1,82,255,.25);
    display: flex; align-items: center; justify-content: center;
}
.withdrawal-modal .wm-icon svg {
    color: var(--brand-2);
    filter: drop-shadow(0 2px 8px rgba(60,144,255,.45));
}
.withdrawal-modal h2 {
    font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--white);
    margin-bottom: 20px; line-height: 1.3;
}
.wm-details {
    background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.10);
    border-radius: 16px; padding: 16px; margin-bottom: 18px;
}
.wm-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0;
}
.wm-row:not(:last-child) {
    border-bottom: 1px solid rgba(230,237,255,.08);
    padding-bottom: 12px; margin-bottom: 4px;
}
.wm-row span { color: var(--muted); font-size: 14px; }
.wm-row b { color: var(--white); font-size: 15px; font-weight: 600; letter-spacing: -0.03em; }
.wm-message {
    color: var(--muted); font-size: 14px; line-height: 1.6;
    margin-bottom: 24px; padding: 14px; border-radius: 12px;
    background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.10);
}
.wm-close-btn {
    width: 100%; min-height: 50px; border: 2px solid rgba(230,237,255,.20); border-radius: 14px;
    background: var(--brand-grad);
    color: var(--white); font-family: var(--font); font-weight: 600; font-size: 15px;
    letter-spacing: -0.03em;
    cursor: pointer; transition: transform .15s var(--ease), filter .2s var(--ease);
    box-shadow: var(--brand-glow);
}
.wm-close-btn:active { transform: scale(.97); filter: brightness(.96); }

/* ============================================================
   CRASH — ракета с множителем
   ============================================================ */
.crash-stage {
    position: relative; width: 100%; height: 300px; border-radius: 20px;
    overflow: hidden; margin-bottom: 4px;
    background: radial-gradient(120% 90% at 15% 100%, #1d1d26 0%, #101016 55%, #0b0b0f 100%);
    border: 1px solid rgba(255,255,255,.08); box-shadow: var(--glow);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.crash-grid {
    position: absolute; inset: -40px 0; opacity: .5;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 34px 34px;
}
/* Звёзды-параллакс (летят вниз при полёте → чувство набора высоты) */
.crash-stars {
    position: absolute; inset: -60% 0 0 0; z-index: 1; opacity: 0; pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 30px 40px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 120px 90px, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 70px 170px, rgba(255,255,255,.6), transparent),
        radial-gradient(2px 2px at 190px 210px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 230px 60px, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 20px 240px, rgba(255,255,255,.5), transparent);
    background-size: 260px 280px;
    transition: opacity .3s var(--ease);
}
.crash-stage.flying .crash-stars { opacity: .9; animation: crashStarFall .9s linear infinite; }
.crash-stage.flying .crash-grid { animation: crashGridFall 1.5s linear infinite; opacity: .35; }
@keyframes crashStarFall { from { background-position: 0 0; } to { background-position: 0 280px; } }
@keyframes crashGridFall { from { background-position: 0 0; } to { background-position: 0 34px; } }
.crash-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; padding-top: 30px;
    z-index: 2; pointer-events: none;
}
.crash-mult {
    font-size: 62px; font-weight: 900; letter-spacing: -1px; color: var(--white);
    text-shadow: 0 0 26px rgba(255,255,255,.25); font-variant-numeric: tabular-nums;
    transition: color .2s var(--ease), transform .2s var(--ease);
}
.crash-stage.flying .crash-mult { color: #fff; }
.crash-mult.win { color: #EFEFF2; text-shadow: 0 0 34px rgba(255,255,255,.5); }
.crash-mult.loss { color: #E0553B; text-shadow: 0 0 30px rgba(224,85,59,.55); }
.crash-sub { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.crash-stage.won .crash-sub { color: var(--silver); }
.crash-stage.crashed .crash-sub { color: #E0796B; }
.crash-stage.crashed { border-color: rgba(224,85,59,.4); box-shadow: 0 0 30px rgba(224,85,59,.2); }
.crash-stage.won { border-color: rgba(255,255,255,.3); box-shadow: 0 0 30px rgba(255,255,255,.18); }

/* Ракета сидит на кончике кривой: left/bottom ставит JS в процентах поля,
   поэтому центр элемента нужно сдвинуть в саму точку. */
.crash-rocket {
    position: absolute; left: 6%; bottom: 9%; z-index: 3;
    transform: translate(-50%, 50%);
}
/* Тело ракеты повёрнуто носом вверх-вправо; пламя трубит из хвоста (вниз-влево) */
.cr-body { position: relative; transform: rotate(45deg); transform-origin: center; }
.cr-body .uic { width: 46px; height: 46px; display: block; color: #fff; position: relative; z-index: 2;
    filter: drop-shadow(0 0 12px rgba(255,255,255,.6)); }
.crash-stage.flying .cr-body .uic { filter: drop-shadow(0 0 16px rgba(120,180,255,.85)); }
/* Пламя-выхлоп */
.cr-flame {
    position: absolute; z-index: 1; left: 50%; top: 92%; transform: translateX(-50%);
    width: 20px; height: 44px; opacity: 0;
    background: linear-gradient(to bottom, #fff 0%, #FFE27A 22%, #FF9A3D 52%, #FF5A2E 78%, rgba(255,80,40,0) 100%);
    border-radius: 50% 50% 50% 50% / 32% 32% 68% 68%;
    filter: blur(.5px);
}
.crash-stage.flying .cr-flame { opacity: 1; animation: crashFlame .09s ease-in-out infinite alternate; }
@keyframes crashFlame {
    from { transform: translateX(-50%) scale(.85, .8); opacity: .8; }
    to   { transform: translateX(-50%) scale(1.15, 1.35); opacity: 1; }
}
.crash-stage.crashed .cr-body { animation: crashShake .35s var(--ease); }
.crash-stage.crashed .cr-body .uic { color: #E0553B; filter: drop-shadow(0 0 14px rgba(224,85,59,.7)); }
.crash-stage.crashed .cr-flame { opacity: 0; }
@keyframes crashShake {
    0%,100% { transform: rotate(45deg); }
    25% { transform: rotate(28deg) scale(1.05); }
    75% { transform: rotate(62deg) scale(.95); }
}

.crash-bet-input {
    width: 100%; background: var(--card); border: 1px solid rgba(255,255,255,.09);
    color: var(--white); border-radius: 14px; padding: 16px; font-size: 24px;
    font-weight: 800; text-align: center; font-family: inherit; margin-bottom: 12px;
    -moz-appearance: textfield;
}
.crash-bet-input::-webkit-outer-spin-button,
.crash-bet-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.crash-bet-input:focus { outline: none; border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }

.crash-cashout-btn {
    width: 100%; border: none; border-radius: 16px; padding: 16px; cursor: pointer;
    font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: linear-gradient(135deg, #F2F2F5 0%, #C2C2CC 100%); color: #16161c;
    box-shadow: 0 6px 22px rgba(0,0,0,.5); position: relative; overflow: hidden;
    animation: crashPulse 1s var(--ease) infinite;
}
.crash-cashout-btn span { font-size: 18px; font-weight: 900; letter-spacing: 1px; }
.crash-cashout-btn b { font-size: 14px; font-weight: 800; opacity: .85; }
.crash-cashout-btn:active { transform: scale(.97); filter: brightness(.96); }
.crash-cashout-btn:disabled { opacity: .6; animation: none; }
@keyframes crashPulse {
    0%,100% { box-shadow: 0 6px 22px rgba(0,0,0,.5); }
    50% { box-shadow: 0 6px 30px rgba(255,255,255,.35); }
}

/* ============================================================
   CRASH — ОБЩИЙ РАУНД: лента иксов, кривая полёта, лента ставок
   Раунд один на всех, поэтому у экрана появились две ленты: сверху иксы
   прошлых раундов, рядом с полем — ставки текущего. Обе живут на сервере,
   здесь только оформление.
   ============================================================ */
/* Лента иксов прошлых раундов. Свежий слева, цвет по величине — так игрок
   читает историю не вглядываясь в цифры. */
.crash-history {
    display: flex; gap: 5px; overflow-x: auto; padding: 8px 2px 10px;
    margin-bottom: 2px; scrollbar-width: none;
}
.crash-history::-webkit-scrollbar { display: none; }
.ch-chip {
    flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 4px 8px;
    border-radius: 8px; font-variant-numeric: tabular-nums; letter-spacing: .2px;
    border: 1px solid transparent; background: rgba(255,255,255,.05); color: var(--muted);
}
.ch-chip.ch-bust { color: #FF9A8A; border-color: rgba(224,85,59,.45); background: rgba(224,85,59,.14); }
.ch-chip.ch-low  { color: #9FE7C0; border-color: rgba(63,203,99,.28); background: rgba(63,203,99,.10); }
.ch-chip.ch-mid  { color: #5BE38C; border-color: rgba(63,203,99,.5);  background: rgba(63,203,99,.16); }
.ch-chip.ch-high { color: #FFD666; border-color: rgba(240,194,74,.6); background: rgba(240,194,74,.18); }

/* На телефоне поле сверху, лента ставок под ним; на широком экране лента
   уезжает влево от поля, как в референсе. */
.crash-layout { display: flex; flex-direction: column-reverse; gap: 8px; }
.crash-layout .crash-stage { flex: 1 1 auto; margin-bottom: 0; }
.crash-feed-box {
    background: var(--card); border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px; overflow: hidden;
}
.crash-feed-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; font-size: 11px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: var(--muted2);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.crash-feed-head b { color: var(--white); font-size: 12px; }
.crash-feed { max-height: 168px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.crash-feed-empty { padding: 16px 12px; text-align: center; font-size: 12px; color: var(--muted2); }
.crash-feed-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
    font-size: 12px; animation: crashFeedIn .22s var(--ease);
}
.crash-feed-row:last-child { border-bottom: none; }
@keyframes crashFeedIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.cf-name {
    color: var(--muted); font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 62%;
}
.cf-val { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.cf-bet { color: var(--white); font-weight: 800; }
.cf-mult { color: #5BE38C; font-weight: 800; }
.cf-win { color: #5BE38C; font-weight: 800; }
/* Забрал — зелёный, не успел — красный, летит — без цвета. Цвет тут несёт
   смысл, поэтому у забравших ещё и множитель с суммой, а не только ставка. */
.crash-feed-row.cashed { background: rgba(63,203,99,.10); }
.crash-feed-row.cashed .cf-name { color: #9FE7C0; }
.crash-feed-row.lost { background: rgba(224,85,59,.10); }
.crash-feed-row.lost .cf-name,
.crash-feed-row.lost .cf-bet { color: #FF9A8A; }
.crash-feed-row.me { box-shadow: inset 3px 0 0 var(--white); }
.crash-feed-row.me .cf-name { color: var(--white); font-weight: 800; }

/* Кривая полёта под ракетой: заливка + линия, обе в процентах поля, поэтому
   растягиваются под любой размер сцены (preserveAspectRatio="none"). */
.crash-curve { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cc-line {
    fill: none; stroke: #7FD6FF; stroke-width: 1.1; vector-effect: non-scaling-stroke;
    stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(127,214,255,.75));
}
.cc-fill { fill: rgba(127,214,255,.14); stroke: none; }
.crash-stage.crashed .cc-line { stroke: #E0553B; filter: drop-shadow(0 0 6px rgba(224,85,59,.8)); }
.crash-stage.crashed .cc-fill { fill: rgba(224,85,59,.14); }

/* Номер раунда — чтобы игрок видел, что раунды идут сами, без его участия */
.crash-round-no {
    position: absolute; top: 8px; right: 10px; z-index: 4;
    font-size: 10px; font-weight: 800; color: var(--muted2);
    background: rgba(12,12,16,.55); border-radius: 8px; padding: 3px 7px;
    letter-spacing: .5px; pointer-events: none;
}

@media (min-width: 720px) {
    .crash-layout { flex-direction: row; align-items: stretch; }
    .crash-feed-box { flex: 0 0 240px; }
    .crash-feed { max-height: none; height: calc(100% - 34px); }
}

.crash-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 18px; }
.crash-wait-txt { color: var(--muted); font-size: 14px; font-weight: 600; text-align: center; }
.crash-wait-txt.big { font-size: 18px; color: var(--white); font-weight: 800; padding: 18px 0; }

/* ============================================================
   DICE CLASH — 2 кубика против казино
   ============================================================ */
.dice-arena {
    display: flex; flex-direction: column; gap: 0; margin-bottom: 16px;
    background: radial-gradient(120% 90% at 50% 0%, #1d1d26 0%, #131319 60%, #0e0e13 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 18px 16px;
    box-shadow: var(--glow); position: relative; overflow: hidden;
}
.dice-side {
    display: flex; flex-direction: column; gap: 12px; padding: 10px 6px;
    border-radius: 14px; transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.dice-side-label { display: flex; align-items: center; justify-content: space-between; }
.dice-side-label span { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .3px; }
.dice-side-label b {
    font-size: 22px; font-weight: 900; color: var(--white); min-width: 28px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.dice-side.winner { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.dice-side.winner .dice-side-label b { color: #fff; text-shadow: 0 0 16px rgba(255,255,255,.5); }
.dice-side.loser { opacity: .55; }
.dice-pair { display: flex; gap: 14px; }

.dice-vs {
    display: flex; align-items: center; justify-content: center; margin: 4px 0;
}
.dice-vs span {
    font-size: 12px; font-weight: 900; letter-spacing: 1px; color: var(--muted2);
    background: var(--card2); border: 1px solid rgba(255,255,255,.1);
    padding: 3px 12px; border-radius: 20px;
}

/* Кубик с точками */
.die {
    width: 58px; height: 58px; flex: none; border-radius: 13px;
    background: linear-gradient(150deg, #2b2b33 0%, #17171d 100%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 2px 6px rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.45);
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    padding: 9px; gap: 2px;
}
.die .pip { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.die .pip.on::after {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #c2c2cc);
    box-shadow: 0 0 6px rgba(255,255,255,.4);
}
.die-blank { opacity: .5; }
.dice-pair.rolling .die { animation: dieShake .16s var(--ease) infinite; }
@keyframes dieShake {
    0%,100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-3px) rotate(-6deg); }
    75% { transform: translateY(3px) rotate(6deg); }
}

.dice-hint { font-size: 12px; color: var(--muted2); text-align: center; margin-top: 10px; }
.dice-outcome {
    margin-top: 14px; text-align: center; border-radius: 16px; padding: 16px;
    background: var(--card); border: 1px solid rgba(255,255,255,.08); animation: fadeUp .3s var(--ease);
}
.dice-outcome-title { font-size: 17px; font-weight: 800; color: var(--white); margin-bottom: 4px; }
.dice-outcome-profit {
    font-size: 26px; font-weight: 900;
    background: linear-gradient(135deg, #FFFFFF, #C2C2CC);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.dice-outcome.win { border-color: rgba(255,255,255,.32); box-shadow: 0 0 26px rgba(255,255,255,.15); }
.dice-outcome.lose .dice-outcome-profit { background: none; -webkit-text-fill-color: initial; color: #E0553B; }
.dice-outcome.lose { border-color: rgba(224,85,59,.35); }
.dice-outcome.push .dice-outcome-profit { background: none; -webkit-text-fill-color: initial; color: var(--silver); }

/* ============================================================
   ИТОГ МИНИ-ИГРЫ ПОСЕРЕДИНЕ АРЕНЫ
   Табличка встаёт по центру сцены, где игрок и так смотрит анимацию, а не
   уезжает под экран. Позиция fixed и координаты из getBoundingClientRect:
   так вёрстка самих сцен не трогается вообще. Акцент задаёт игра через
   --mo-accent, поэтому у каждой мини-игры свой цвет победы.
   ============================================================ */
.mini-outcome {
    /* Цвет игры приходит из JS двумя видами: готовым и каналами для rgba().
       color-mix() не берём — в старых WebView его нет, и рамка пропадала бы. */
    --mo-accent: #E6EDFF;
    --mo-rgb: 230, 237, 255;
    position: fixed; z-index: 60; margin: 0;
    min-width: 152px; max-width: min(78vw, 260px);
    padding: 14px 18px 15px; border-radius: 18px; text-align: center;
    pointer-events: none; transform: translate(-50%, -50%) scale(.9); opacity: 0;
    background: rgba(17,17,17,.97);
    border: 1px solid rgba(var(--mo-rgb), .42);
    box-shadow: 0 18px 44px rgba(0,0,0,.55),
                0 0 26px rgba(var(--mo-rgb), .22);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: none;
    transition: opacity .18s var(--ease), transform .22s var(--ease);
}
/* Два класса в селекторе обязательны: у .dice-outcome.win / .lose своя рамка
   и тень, и по специфичности они перебили бы одноклассовое правило выше. */
.mini-outcome.win, .mini-outcome.lose, .mini-outcome.push {
    border-color: rgba(var(--mo-rgb), .42);
    box-shadow: 0 18px 44px rgba(0,0,0,.55),
                0 0 26px rgba(var(--mo-rgb), .22);
}
.mini-outcome.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mini-outcome .mo-ic {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%;
    color: var(--mo-accent);
    background: rgba(var(--mo-rgb), .14);
    border: 1px solid rgba(var(--mo-rgb), .38);
}
.mini-outcome .mo-title {
    display: block; font-size: 13px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--mo-accent);
}
.mini-outcome .mo-sum {
    display: block; margin-top: 5px; font-size: 22px; font-weight: 600;
    letter-spacing: -0.03em; line-height: 1.1; color: var(--white);
}
.mini-outcome.lose .mo-sum { color: #E0553B; }
.mini-outcome.push .mo-sum { color: var(--white); }
.mini-outcome .mo-note {
    display: block; margin-top: 5px; font-size: 11px; line-height: 1.35;
    color: var(--muted2);
}
@media (prefers-reduced-motion: reduce) {
    .mini-outcome { transition: opacity .12s linear; }
    .mini-outcome.show { transform: translate(-50%, -50%) scale(1); }
}

/* ============================================================
   DARTS — мишень
   ============================================================ */
.dart-board {
    position: relative; width: 100%; max-width: 340px; margin: 0 auto 16px;
    aspect-ratio: 1 / 1; border-radius: 50%;
    box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 0 6px #14141a, 0 0 0 7px rgba(255,255,255,.06);
}
.dartboard-svg { width: 100%; height: 100%; display: block; }
.dart-num { fill: #EDEDF0; font-size: 20px; font-weight: 800; font-family: "Inter", sans-serif; }
.dart-marks { position: absolute; inset: 0; pointer-events: none; }
.dart-board.aiming { animation: dartAim .5s var(--ease); }
@keyframes dartAim {
    0% { transform: scale(1) rotate(0); }
    50% { transform: scale(1.02) rotate(1.5deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Дротик-отметка */
.dart-hit {
    position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%);
    z-index: 3; animation: dartLand .4s var(--ease) both;
}
.dart-hit::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #C2C2CC);
    border: 2px solid #16161c; box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.dart-hit::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 22px;
    background: linear-gradient(#C2C2CC, #6E6E78); transform: translate(-50%, -6px) rotate(38deg);
    transform-origin: top center; border-radius: 2px; z-index: -1;
}
.dart-hit.opp::before { background: radial-gradient(circle at 35% 30%, #E0796B, #B23A2E); }
@keyframes dartLand {
    0% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* PvP-счёт дартс */
.dart-scores { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
.dart-score-card {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--card); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 12px; box-shadow: var(--glow);
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.dart-score-card span { font-size: 12px; color: var(--muted); font-weight: 700; }
.dart-score-card b { font-size: 26px; color: var(--white); font-weight: 900; }
.dart-score-card.winner { border-color: rgba(255,255,255,.35); box-shadow: 0 0 22px rgba(255,255,255,.18); }
.dart-score-card.winner b { text-shadow: 0 0 16px rgba(255,255,255,.5); }
.dart-score-card.loser { opacity: .55; }
.dart-vs { font-size: 12px; font-weight: 900; color: var(--muted2); letter-spacing: 1px;
    background: var(--card2); border: 1px solid rgba(255,255,255,.1); padding: 3px 10px; border-radius: 20px; }

/* Ставки дартс (чёт/нечёт/малые/большие/сектор) */
.dart-bets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.dbet {
    flex: 1 1 0; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--card); border: 1px solid rgba(255,255,255,.09); color: var(--white);
    border-radius: 12px; padding: 9px 4px; font-size: 13px; font-weight: 800; cursor: pointer;
    font-family: inherit; transition: all .18s var(--ease);
}
.dbet b { font-size: 11px; font-weight: 800; color: var(--muted2); }
.dbet.active {
    background: linear-gradient(135deg, #F2F2F5 0%, #C2C2CC 100%); color: #16161c;
    border-color: rgba(255,255,255,.35);
}
.dbet.active b { color: #3a3a44; }
.dbet:active { transform: scale(.95); }
/* Выбор точного сектора 1-20 (показывается ТОЛЬКО для ставки «Сектор») */
.dart-sectors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.dart-sectors.hidden { display: none; }
.dsec {
    background: var(--card); border: 1px solid rgba(255,255,255,.09); color: var(--white);
    border-radius: 10px; padding: 9px 0; font-size: 14px; font-weight: 800; cursor: pointer;
    font-family: inherit; transition: all .15s var(--ease);
}
.dsec.active {
    background: linear-gradient(135deg, #F2F2F5 0%, #C2C2CC 100%); color: #16161c;
    border-color: rgba(255,255,255,.35);
}
.dsec:active { transform: scale(.9); }

/* ============================================================
   SOCCER — пенальти
   ============================================================ */
.soccer-field {
    position: relative; width: 100%; margin-bottom: 14px;
    background: radial-gradient(120% 100% at 50% 0%, #1a2a1e 0%, #14201a 45%, #0e0e13 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 22px 16px 18px;
    box-shadow: var(--glow); overflow: hidden;
}
.soccer-field::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 20px, transparent 20px 40px);
}
.soccer-goal {
    position: relative; width: 100%; max-width: 320px; margin: 0 auto; height: 170px;
}
.goal-frame {
    position: absolute; inset: 0 0 22px 0; border: 6px solid #EDEDF0;
    border-bottom: none; border-radius: 8px 8px 0 0;
    box-shadow: 0 0 18px rgba(255,255,255,.2);
}
.goal-net {
    position: absolute; inset: 6px 6px 22px 6px; opacity: .5;
    background-image:
        linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: 16px 16px;
}
.keeper {
    position: absolute; bottom: 22px; left: 50%; width: 52px; height: 76px;
    transform: translateX(-50%); transition: left .42s var(--ease), transform .42s var(--ease);
    background: linear-gradient(180deg, #3a3a44, #22222a);
    border: 1px solid rgba(255,255,255,.14); border-radius: 16px 16px 8px 8px; z-index: 3;
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.keeper::before {
    content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4a54, #26262e);
    border: 1px solid rgba(255,255,255,.14);
}
.keeper .glove { position: absolute; top: 8px; width: 15px; height: 15px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #C2C2CC); }
.keeper .glove.l { left: -8px; } .keeper .glove.r { right: -8px; }
.soccer-ball {
    position: absolute; left: 50%; top: 88%; width: 26px; height: 26px; border-radius: 50%;
    transform: translate(-50%, -50%); z-index: 4;
    background: radial-gradient(circle at 34% 28%, #fff 0%, #d8d8dc 70%, #a8a8b0 100%);
    box-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.08);
    transition: left .5s var(--ease), top .5s cubic-bezier(.3,.8,.4,1), transform .5s var(--ease);
}
.soccer-msg {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
    font-size: 32px; font-weight: 900; letter-spacing: 1px; z-index: 5; pointer-events: none;
    opacity: 0; transition: opacity .2s var(--ease);
}
.soccer-msg.goal, .soccer-msg.save { opacity: 1; animation: socPop .35s var(--ease); }
.soccer-msg.goal { color: #fff; text-shadow: 0 0 22px rgba(255,255,255,.6); }
.soccer-msg.save { color: #E0553B; text-shadow: 0 0 22px rgba(224,85,59,.6); }
@keyframes socPop { 0% { transform: translate(-50%,-50%) scale(.4); } 100% { transform: translate(-50%,-50%) scale(1); } }
.soccer-goal.goal-in .goal-net { animation: netShake .4s var(--ease); }
@keyframes netShake { 0%,100% { transform: none; } 30% { transform: translateY(3px); } 60% { transform: translateY(-2px); } }

.soccer-pick { display: flex; gap: 8px; margin-bottom: 14px; }
.szone-btn {
    flex: 1; background: var(--card); border: 1px solid rgba(255,255,255,.09); color: var(--white);
    border-radius: 12px; padding: 13px 4px; font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: all .18s var(--ease);
}
.szone-btn.active {
    background: linear-gradient(135deg, #F2F2F5 0%, #C2C2CC 100%); color: #16161c;
    border-color: rgba(255,255,255,.35);
}
.szone-btn:active { transform: scale(.95); }

/* PvP серия пенальти */
.soccer-shootout { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.soc-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 12px 14px; box-shadow: var(--glow);
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.soc-row.winner { border-color: rgba(255,255,255,.35); box-shadow: 0 0 20px rgba(255,255,255,.16); }
.soc-row.loser { opacity: .55; }
.soc-name { font-size: 13px; font-weight: 700; color: var(--muted); min-width: 64px; }
.soc-score { margin-left: auto; font-size: 22px; font-weight: 900; color: var(--white); }
.kicks { display: flex; gap: 6px; }
.kick { width: 15px; height: 15px; border-radius: 50%; opacity: 0; animation: kickIn .3s var(--ease) forwards; }
.kick.goal { background: radial-gradient(circle at 34% 28%, #fff, #C2C2CC); box-shadow: 0 0 8px rgba(255,255,255,.4); }
.kick.miss { background: var(--card2); border: 1px solid rgba(224,85,59,.5); }
@keyframes kickIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* ============================================================
   BASKETBALL — бросок в кольцо
   ============================================================ */
.basket-field {
    position: relative; width: 100%; margin-bottom: 14px;
    background: radial-gradient(120% 100% at 50% 0%, #2a2018 0%, #1c1712 45%, #0e0e13 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 20px 16px;
    box-shadow: var(--glow); overflow: hidden;
}
.basket-court { position: relative; width: 100%; max-width: 300px; margin: 0 auto; height: 230px; }
.bb-backboard {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 150px; height: 96px; border: 4px solid #EDEDF0; border-radius: 6px;
    background: rgba(255,255,255,.04); box-shadow: 0 0 16px rgba(255,255,255,.15);
}
.bb-square { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    width: 58px; height: 42px; border: 3px solid #E0553B; border-radius: 3px; }
.bb-rim {
    position: absolute; top: 100px; left: 50%; transform: translateX(-50%);
    width: 74px; height: 16px; border: 4px solid #E07B3B; border-radius: 50%;
    box-shadow: 0 0 14px rgba(224,123,59,.5); z-index: 3;
}
.bb-net {
    position: absolute; top: 112px; left: 50%; transform: translateX(-50%);
    width: 64px; height: 46px; z-index: 2;
    background:
        repeating-linear-gradient(58deg, rgba(255,255,255,.35) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-58deg, rgba(255,255,255,.35) 0 1px, transparent 1px 9px);
    clip-path: polygon(6% 0, 94% 0, 78% 100%, 22% 100%);
}
.bb-ball {
    position: absolute; left: 50%; bottom: 6px; width: 30px; height: 30px; border-radius: 50%;
    transform: translateX(-50%); z-index: 4;
    background: radial-gradient(circle at 34% 28%, #F0A65A 0%, #E07B3B 60%, #B85A28 100%);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.5);
}
.bb-ball::before, .bb-ball::after {
    content: ""; position: absolute; background: rgba(0,0,0,.35);
}
.bb-ball::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.bb-ball::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
.bb-ball.arc-score { animation: bbArcScore .78s cubic-bezier(.4,.05,.5,1) forwards; }
.bb-ball.arc-miss { animation: bbArcMiss .78s cubic-bezier(.4,.05,.5,1) forwards; }
@keyframes bbArcScore {
    0% { bottom: 6px; transform: translateX(-50%) scale(1); }
    50% { bottom: 190px; transform: translateX(-50%) scale(.72); }
    72% { bottom: 118px; transform: translateX(-50%) scale(.6); }
    100% { bottom: 30px; transform: translateX(-50%) scale(.5); opacity: .85; }
}
@keyframes bbArcMiss {
    0% { bottom: 6px; transform: translateX(-50%) scale(1); }
    50% { bottom: 190px; transform: translateX(-52%) scale(.72); }
    70% { bottom: 132px; transform: translateX(-30%) scale(.62); }
    100% { bottom: 40px; transform: translateX(60%) scale(.7); opacity: .8; }
}
.bb-msg {
    position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
    font-size: 34px; font-weight: 900; z-index: 5; opacity: 0; pointer-events: none;
}
.bb-msg.score, .bb-msg.miss { opacity: 1; animation: socPop .35s var(--ease); }
.bb-msg.score { color: #fff; text-shadow: 0 0 22px rgba(255,255,255,.6); }
.bb-msg.miss { color: #E0553B; text-shadow: 0 0 22px rgba(224,85,59,.6); }
.basket-court.scored .bb-rim { box-shadow: 0 0 22px rgba(255,255,255,.7); border-color: #fff; }
.basket-court.scored .bb-net { animation: bbNetShake .5s var(--ease); }
.basket-court.missed .bb-rim { animation: bbRimShake .32s var(--ease); }
/* Тряска сетки/кольца — СОХРАНЯЕМ базовый translateX(-50%), иначе элемент
   уезжает вправо (баг с общим netShake, который сбрасывал transform в none). */
@keyframes bbNetShake {
    0%   { transform: translateX(-50%) translateY(0) scaleY(1); }
    25%  { transform: translateX(-50%) translateY(5px) scaleY(1.12); }
    50%  { transform: translateX(-50%) translateY(-2px) scaleY(.95); }
    75%  { transform: translateX(-50%) translateY(3px) scaleY(1.04); }
    100% { transform: translateX(-50%) translateY(0) scaleY(1); }
}
@keyframes bbRimShake {
    0%,100% { transform: translateX(-50%) translateY(0); }
    30%     { transform: translateX(-52%) translateY(2px); }
    60%     { transform: translateX(-48%) translateY(-1px); }
}

/* ============================================================
   BOX — лут-бокс / кейс (лента множителей)
   ============================================================ */
.box-reel-viewport {
    position: relative; width: 100%; height: 100px; overflow: hidden;
    background: radial-gradient(120% 100% at 50% 50%, #20202a 0%, #131319 70%, #0e0e13 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 16px; margin-bottom: 16px;
    box-shadow: var(--glow);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.box-pointer {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, #fff, transparent); z-index: 5;
    box-shadow: 0 0 12px rgba(255,255,255,.7);
}
.box-pointer::before, .box-pointer::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.box-pointer::before { top: 0; border-top: 8px solid #fff; }
.box-pointer::after { bottom: 0; border-bottom: 8px solid #fff; }
.box-reel { position: absolute; top: 12px; left: 0; height: 76px; display: flex; will-change: transform; }
.box-cell {
    width: 84px; height: 76px; margin-right: 8px; flex: none; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 900; border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(150deg, #26262e, #17171d); color: var(--muted);
}
.box-cell.zero { color: #6a6a72; }
.box-cell.low { color: var(--muted); }
.box-cell.mid { color: var(--silver); }
.box-cell.good { color: #fff; border-color: rgba(255,255,255,.2); }
.box-cell.top { color: #fff; border-color: rgba(255,255,255,.45);
    background: linear-gradient(150deg, #45454f, #24242c); box-shadow: inset 0 0 14px rgba(255,255,255,.15); }
.box-cell.won { animation: boxWonPulse 1s var(--ease) infinite; }
@keyframes boxWonPulse {
    0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
    50% { box-shadow: 0 0 20px rgba(255,255,255,.5); }
}

/* PvP box */
.box-duel { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
.box-open-card {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--card); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 16px 10px; box-shadow: var(--glow);
    animation: boxReveal .4s var(--ease);
}
.box-open-card span { font-size: 12px; color: var(--muted); font-weight: 700; }
.box-open-card b { font-size: 30px; font-weight: 900; }
.box-open-card.winner { border-color: rgba(255,255,255,.35); box-shadow: 0 0 22px rgba(255,255,255,.18); }
.box-open-card.loser { opacity: .55; }
@keyframes boxReveal { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================================
   TRADER — график вверх/вниз (трейдинг)
   ============================================================ */
.trader-wrap { margin-bottom: 14px; }
.trader-chart {
    position: relative; width: 100%; border-radius: 16px; overflow: hidden;
    background: radial-gradient(130% 110% at 50% 0%, #1c1c26 0%, #131319 60%, #0d0d12 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 0 40px rgba(0,0,0,.5);
}
.trader-svg { display: block; width: 100%; height: 160px; }
.tgrid line { stroke: rgba(255,255,255,.045); stroke-width: 1; }
/* Линия графика */
.trader-line {
    fill: none; stroke: var(--silver); stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
}
.trader-chart.up .trader-line { stroke: #2ee27f; filter: drop-shadow(0 0 8px rgba(46,226,127,.7)); }
.trader-chart.down .trader-line { stroke: #ff5a44; filter: drop-shadow(0 0 8px rgba(255,90,68,.7)); }
/* Заливка-область под линией (градиент) */
.trader-area { opacity: 0; }
.tg-stop0 { stop-color: #B9BCC7; stop-opacity: .30; }
.tg-stop1 { stop-color: #B9BCC7; stop-opacity: 0; }
.trader-chart.up .tg-stop0 { stop-color: #2ee27f; stop-opacity: .34; }
.trader-chart.up .tg-stop1 { stop-color: #2ee27f; stop-opacity: 0; }
.trader-chart.down .tg-stop0 { stop-color: #ff5a44; stop-opacity: .32; }
.trader-chart.down .tg-stop1 { stop-color: #ff5a44; stop-opacity: 0; }
/* Точка на конце + пульс */
.trader-dot { fill: #fff; transition: cx 1.4s cubic-bezier(.35,.1,.2,1), cy 1.4s cubic-bezier(.35,.1,.2,1); filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); }
.trader-chart.up .trader-dot { fill: #6cff9f; }
.trader-chart.down .trader-dot { fill: #ff8272; }
.trader-dot-pulse { fill: none; stroke: #fff; stroke-width: 1.5; opacity: 0;
    transition: cx 1.4s cubic-bezier(.35,.1,.2,1), cy 1.4s cubic-bezier(.35,.1,.2,1); }
.trader-chart.up .trader-dot-pulse { stroke: #2ee27f; }
.trader-chart.down .trader-dot-pulse { stroke: #ff5a44; }
.trader-chart.up .trader-dot-pulse, .trader-chart.down .trader-dot-pulse { animation: tgPulse 1.3s ease-out 1.4s infinite; }
@keyframes tgPulse {
    0% { opacity: .8; r: 4; }
    100% { opacity: 0; r: 16; }
}
.trader-pct {
    position: absolute; top: 10px; right: 12px;
    font-size: 20px; font-weight: 900; letter-spacing: .3px;
    color: var(--muted2); font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.trader-pct.up { color: #35D07F; }
.trader-pct.down { color: #E0553B; }

/* PvP — две котировки рядом */
.trader-duel { display: flex; gap: 10px; margin-bottom: 6px; }
.trader-duel-side { flex: 1; min-width: 0; border-radius: 16px; padding: 8px; transition: all .25s var(--ease); }
.trader-duel-side .trader-chart { border-radius: 12px; }
.trader-duel-side .trader-svg { height: 120px; }
.trader-duel-side.winner { background: rgba(255,255,255,.05); box-shadow: 0 0 22px rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); }
.trader-duel-side.loser { opacity: .62; border: 1px solid rgba(255,255,255,.05); }
.tds-name {
    text-align: center; font-size: 13px; font-weight: 800; color: var(--white);
    margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   ROULETTE — револьвер / русская рулетка
   ============================================================ */
.rl-wrap { display: flex; justify-content: center; margin: 6px 0 16px; }
.rl-stage { position: relative; width: 230px; height: 230px; }
.rl-svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Ствол-указатель сверху */
.rl-pointer {
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; z-index: 3;
    border-left: 11px solid transparent; border-right: 11px solid transparent;
    border-top: 20px solid var(--silver);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.rl-body { fill: #14141b; stroke: rgba(255,255,255,.10); stroke-width: 2; }
.rl-body2 { fill: #1b1b23; stroke: rgba(255,255,255,.06); stroke-width: 1; }
.rl-cyl { transform-origin: 100px 100px; }
.rl-hub { fill: #2a2a34; stroke: rgba(255,255,255,.12); stroke-width: 2; }
.rl-hole {
    fill: #0c0c11; stroke: rgba(255,255,255,.14); stroke-width: 2.5;
    transition: stroke .2s, fill .2s;
}
.rl-bullet { fill: #E0553B; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 0 4px rgba(224,85,59,.6)); }
.rl-chamber.loaded .rl-bullet { opacity: 1; }
.rl-chamber.safe .rl-hole { stroke: #35D07F; fill: rgba(53,208,127,.14); filter: drop-shadow(0 0 8px rgba(53,208,127,.55)); }
.rl-chamber.fired .rl-hole { stroke: #E0553B; fill: rgba(224,85,59,.22); filter: drop-shadow(0 0 12px rgba(224,85,59,.7)); }
@keyframes rlShake {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-5px, 3px); }
    40% { transform: translate(5px, -3px); }
    60% { transform: translate(-4px, -2px); }
    80% { transform: translate(4px, 2px); }
}
.rl-stage.bang { animation: rlShake .4s var(--ease); }

/* Выбор риска (пули) */
.rl-risk-lbl { text-align: center; font-size: 12px; color: var(--muted2); margin-bottom: 8px; }
.rl-risk { display: flex; gap: 7px; margin-bottom: 14px; }
.rl-risk-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--card); border: 1px solid rgba(255,255,255,.09); color: var(--white);
    border-radius: 12px; padding: 9px 2px; cursor: pointer; font-family: inherit;
    transition: all .18s var(--ease);
}
.rl-rb-n { font-size: 16px; font-weight: 900; }
.rl-rb-x { font-size: 11px; color: var(--muted2); font-weight: 700; }
.rl-risk-btn.active {
    background: linear-gradient(135deg, #F2F2F5 0%, #C2C2CC 100%); color: #16161c;
    border-color: rgba(255,255,255,.35);
}
.rl-risk-btn.active .rl-rb-x { color: #3a3a44; }
.rl-risk-btn:active { transform: scale(.94); }

/* PvP — дуэль */
.rl-duel { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rl-duel-side {
    flex: 1; min-width: 0; border-radius: 16px; padding: 16px 8px; text-align: center;
    background: var(--card); border: 1px solid rgba(255,255,255,.07); transition: all .25s var(--ease);
}
.rl-duel-side.winner { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.3); box-shadow: 0 0 22px rgba(255,255,255,.14); }
.rl-duel-side.loser { opacity: .6; }
.rl-shots {
    font-size: 40px; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, #FFFFFF, #C2C2CC);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.rl-duel-side.loser .rl-shots { background: none; -webkit-text-fill-color: initial; color: var(--muted2); }
.rl-shots-lbl { font-size: 11px; color: var(--muted2); margin-top: 4px; }
.rl-vs { font-size: 14px; font-weight: 800; color: var(--muted2); flex: none; }

/* ============================================================
   EGG — драконьи яйца
   ============================================================ */
.egg-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin: 6px 0 16px;
}
.egg-cell {
    position: relative; background: none; border: none; cursor: pointer; padding: 6px 0;
    font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 96px; border-radius: 16px; transition: background .2s;
}
.egg-cell:active { transform: scale(.96); }
.egg-shell { position: relative; width: 60px; height: 76px; transition: opacity .2s; }
.egg-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.egg-svg path {
    fill: #2a2a36;
    stroke: rgba(255,255,255,.14); stroke-width: 2;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.egg-cell .egg-shell::after {
    /* блик на яйце */
    content: ""; position: absolute; top: 14px; left: 16px; width: 14px; height: 20px;
    border-radius: 50%; background: rgba(255,255,255,.18); filter: blur(2px);
}
.egg-q {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 22px; font-weight: 900; color: rgba(255,255,255,.55);
}
@keyframes eggShake {
    0%,100% { transform: rotate(0); }
    25% { transform: rotate(-9deg); }
    50% { transform: rotate(9deg); }
    75% { transform: rotate(-6deg); }
}
.egg-cell.shaking .egg-shell { animation: eggShake .18s linear infinite; }
.egg-prize {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0);
    display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0;
    transition: transform .3s var(--ease), opacity .3s;
}
.egg-ic { font-size: 30px; line-height: 1; }
.egg-x { font-size: 13px; font-weight: 900; color: var(--white); }
.egg-cell.cracked .egg-shell { opacity: 0; }
.egg-cell.cracked .egg-q { opacity: 0; }
.egg-cell.cracked .egg-prize { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.egg-cell.chosen { background: rgba(255,255,255,.06); box-shadow: 0 0 20px rgba(255,255,255,.14); }
.egg-cell.bad { opacity: .55; }
.egg-cell.chosen.bad { opacity: 1; }
.egg-cell.dragon { background: radial-gradient(circle, rgba(224,85,59,.22), transparent 70%); }
.egg-cell.dragon .egg-x { color: #E0553B; }
.egg-cell.dragon .egg-ic { filter: drop-shadow(0 0 10px rgba(224,85,59,.7)); animation: dragonPulse .8s var(--ease) infinite alternate; }
@keyframes dragonPulse { from { transform: scale(1); } to { transform: scale(1.15); } }

/* PvP — иконка + множитель (переиспользуем .rl-duel) */
.egg-duel-ic { font-size: 42px; line-height: 1; margin: 4px 0 2px; }
.egg-duel-x {
    font-size: 22px; font-weight: 900;
    background: linear-gradient(135deg, #FFFFFF, #C2C2CC);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.rl-duel-side.loser .egg-duel-x { background: none; -webkit-text-fill-color: initial; color: var(--muted2); }

/* ============================================================
   HAMMER — найди золотой кирпич
   ============================================================ */
.ham-stage {
    position: relative; height: 180px; margin: 6px 0 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px; overflow: hidden;
    background: radial-gradient(130% 110% at 50% 20%, #1c1c26 0%, #131319 65%, #0d0d12 100%);
    border: 1px solid rgba(255,255,255,.08);
}
.ham-hammer {
    position: absolute; top: 8px; left: 50%; z-index: 4; font-size: 46px;
    transform: translateX(-10%) rotate(-58deg); transform-origin: 80% 80%;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
    transition: transform .18s var(--ease);
}
.ham-brick {
    position: relative; width: 118px; height: 74px; border-radius: 8px;
    background: linear-gradient(160deg, #b5563b 0%, #8f3f2b 55%, #6e2f20 100%);
    border: 1px solid rgba(0,0,0,.35);
    box-shadow: inset 0 2px 4px rgba(255,255,255,.18), inset 0 -6px 10px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.5);
    transition: transform .1s, opacity .3s;
}
.ham-brick-line { position: absolute; left: 6px; right: 6px; height: 2px; background: rgba(0,0,0,.28); border-radius: 2px; }
.ham-brick-line:nth-child(1) { top: 24px; }
.ham-brick-line:nth-child(2) { top: 48px; }
.ham-brick-line:nth-child(3) { top: 36px; left: 50%; width: 2px; height: 24px; }
.ham-prize {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0);
    z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0;
    transition: transform .35s var(--ease), opacity .3s;
}
.ham-ic { font-size: 44px; line-height: 1; }
.ham-x { font-size: 15px; font-weight: 900; color: var(--white); }
.ham-dust {
    position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.6); opacity: 0; z-index: 3;
}

/* Замах */
.ham-stage.swing .ham-hammer { transform: translateX(-10%) rotate(24deg); }
/* Удар */
@keyframes hamShake {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-6px, 4px); }
    40% { transform: translate(6px, -3px); }
    60% { transform: translate(-5px, -2px); }
    80% { transform: translate(4px, 3px); }
}
@keyframes hamDust {
    0% { opacity: .9; transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(6); box-shadow: 0 0 0 30px rgba(255,255,255,0); }
}
.ham-stage.smashed { animation: hamShake .4s var(--ease); }
.ham-stage.smashed .ham-brick { opacity: 0; transform: scale(.7); }
.ham-stage.smashed .ham-hammer { opacity: 0; transition: opacity .3s; }
.ham-stage.smashed .ham-prize { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.ham-stage.smashed .ham-dust { animation: hamDust .6s ease-out forwards; }
/* Итог удара — полоской по низу сцены, а не блоком под кнопкой.
   Так сумма видна сразу после удара (взгляд и так на кирпиче), и раскладка не
   прыгает: полоска лежит поверх сцены и ничего не сдвигает. */
.dice-outcome.ham-outcome {
    position: absolute;
    left: 10px; right: 10px; bottom: 8px;
    margin: 0;
    padding: 7px 12px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(10,10,14,.82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 6;
    text-align: left;
}
.dice-outcome.ham-outcome .dice-outcome-title {
    font-size: 13px;
    margin: 0;
    color: var(--silver);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dice-outcome.ham-outcome .dice-outcome-profit {
    font-size: 19px;
    line-height: 1;
    white-space: nowrap;
}
.ham-stage.jackpot { background: radial-gradient(circle at 50% 45%, rgba(232,187,74,.28), #131319 70%); }
.ham-stage.jackpot .ham-ic { filter: drop-shadow(0 0 14px rgba(232,187,74,.85)); animation: dragonPulse .8s var(--ease) infinite alternate; }
.ham-stage.jackpot .ham-x { color: #E8BB4A; }

/* ============================================================
   KING — стань королём горы
   ============================================================ */
.king-mountain {
    display: flex; flex-direction: column; gap: 6px; margin: 6px 0 16px;
    padding: 14px 12px; border-radius: 18px;
    background: radial-gradient(130% 120% at 70% 0%, #1c1c26 0%, #131319 60%, #0d0d12 100%);
    border: 1px solid rgba(255,255,255,.08);
}
.king-step {
    position: relative; height: 34px; border-radius: 10px;
    display: flex; align-items: center; padding: 0 10px;
    background: var(--card); border: 1px solid rgba(255,255,255,.07);
    transition: all .2s var(--ease); min-width: 90px; width: max-content;
}
.king-step.target { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); }
.king-step.climbed { background: rgba(232,187,74,.14); border-color: rgba(232,187,74,.4); }
.king-plate { font-size: 12px; color: var(--muted2); font-weight: 700; }
.king-plate b { color: var(--white); margin-left: 6px; font-weight: 900; }
.king-throne { font-size: 20px; margin-left: 4px; }
.king-figure {
    font-size: 22px; margin-right: 6px; opacity: 0; transform: translateY(4px) scale(.6);
    transition: opacity .18s, transform .18s var(--ease);
}
.king-step.king-on .king-figure { opacity: 1; transform: translateY(0) scale(1); }
.king-step.crowned {
    background: radial-gradient(circle at 30% 50%, rgba(232,187,74,.32), rgba(232,187,74,.08));
    border-color: rgba(232,187,74,.6); box-shadow: 0 0 22px rgba(232,187,74,.4);
}
.king-step.crowned .king-figure { animation: dragonPulse .8s var(--ease) infinite alternate; }
.king-step.crowned .king-plate b { color: #E8BB4A; }
@keyframes kingFall {
    0%,100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-6px) rotate(-12deg); }
    75% { transform: translateX(6px) rotate(12deg); }
}
.king-step.fell { background: rgba(224,85,59,.16); border-color: rgba(224,85,59,.45); }
.king-step.fell .king-figure { animation: kingFall .4s var(--ease); }

.king-risk { display: flex; gap: 7px; margin-bottom: 14px; }

/* ============================================================
   FAIR PLAY (Provably Fair) — модалка с кодом
   ============================================================ */
.banner-fair { cursor: pointer; }
.fp-modal {
    max-width: 440px; width: calc(100% - 28px); text-align: left;
    max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.fp-modal h2 { text-align: center; }
.fp-shield { font-size: 38px; }
.fp-desc { font-size: 13px; line-height: 1.5; color: var(--muted2); margin: 6px 0 14px; text-align: center; }
.fp-code {
    background: #01040D; border: 1px solid rgba(230,237,255,.10); border-radius: 12px;
    padding: 12px; margin: 0 0 12px; max-width: 100%; box-sizing: border-box;
    overflow-x: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px; line-height: 1.5; color: rgba(230,237,255,.78);
    white-space: pre-wrap; word-break: break-word;
    box-shadow: inset 0 0 30px rgba(0,0,0,.5);
}
/* Подсветка кода держится в синей гамме бренда, чтобы не спорить с палитрой. */
.fp-code .fp-k { color: #6FA8FF; }   /* keyword */
.fp-code .fp-f { color: #3C90FF; }   /* function */
.fp-code .fp-s { color: #9CC4FF; }   /* string */
.fp-code .fp-c { color: rgba(230,237,255,.34); font-style: italic; } /* comment */
.fp-seeds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.fp-seed {
    background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.10); border-radius: 10px;
    padding: 8px 10px; display: flex; flex-direction: column; gap: 3px;
}
.fp-seed span { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted2); }
.fp-seed code {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--white);
    word-break: break-all; line-height: 1.4;
}
.fp-note { font-size: 12px; color: var(--muted2); text-align: center; margin: 0 0 14px; }

/* ============================================================
   АРТ-ПАКЕТ СЛОТА (картиночные символы, фон, вывеска) — VeltWest и др.
   ============================================================ */
/* Картиночный символ вместо SVG */
.sym-img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    pointer-events: none; user-select: none;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.55));
}
/* Generic feature-symbol contract: JSON symbols.type автоматически делает
   Wild/Scatter/Bonus/Multiplier крупнее и заметнее в текущих и будущих арт-паках. */
.sym-special {
    transform: scale(1.12); transform-origin: center; position: relative; z-index: 2;
}
.sym-scatter, .sym-bonus {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.6))
            drop-shadow(0 0 10px color-mix(in srgb, var(--slot-accent, #ffd24b) 72%, transparent));
}
.sym-wild, .sym-multiplier {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.62))
            drop-shadow(0 0 12px color-mix(in srgb, var(--slot-accent2, #ffb74d) 78%, transparent));
}
.reel-tile .sym-special { transform: scale(1.1); }
.cbomb-cell { width: 112%; height: 112%; margin: -6%; }

/* Размытый фон-слой на весь экран слота (z-index -1: строго ЗА контентом,
   иначе fixed-слой перекрывал панель ставок и кнопки) */
.slot-art-bg {
    position: fixed; inset: 0; z-index: -1;
    background-size: cover; background-position: center;
    display: none;
}
.slot-art-bg::after {
    /* затемняющая вуаль для читаемости UI поверх фона */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,16,.55) 0%, rgba(10,10,16,.72) 55%, rgba(8,8,12,.9) 100%);
}
/* Контент экрана — поверх фона */
.slot-screen { position: relative; z-index: 1; }

/* Вывеска (название слота) над барабаном */
.slot-signboard {
    display: none; width: min(52%, 290px); height: auto; margin: -20px auto 2px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
    animation: signIn .5s var(--ease);
    position: relative; z-index: 2;
}
@keyframes signIn {
    from { opacity: 0; transform: translateY(-10px) scale(.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* В теме с артом прячем текстовый заголовок в топбаре (его заменяет вывеска) */
.slot-screen.themed-art .slot-name { visibility: hidden; }

/* Барабан с картиночным фоном: арт показывается в натуральных пропорциях (aspect),
   сетка кладётся АБСОЛЮТНО ровно во внутреннюю (синюю) игровую область рамки. */
.slot-machine.has-art {
    position: relative;
    aspect-ratio: var(--reel-ar, 1000 / 750);   /* пропорции арта — рамка не искажается */
    width: 100%;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
    box-shadow: none;
}
.slot-machine.has-art::before,
.slot-machine.has-art::after { display: none !important; }  /* убираем блики поверх арта */

/* Сетку вписываем в игровую зону арта (замерено по картинке рамки) */
.slot-machine.has-art #slotGrid.slot-grid {
    position: absolute;
    left: var(--ri-left, 5.7%); right: var(--ri-right, 6%);
    top: var(--ri-top, 18%); bottom: var(--ri-bottom, 17.5%);
    width: auto; height: auto; margin: 0;
    gap: 2px;
    /* Символы крутятся/падают строго ВНУТРИ окна барабана — ничего не вылазит
       за верх/низ рамки. Окно = игровая зона арта (по инсетам). */
    overflow: hidden;
}
/* Колонки тоже режем по окну, чтобы вертикальная прокрутка не выходила за край */
.slot-screen.themed-art .slot-column { overflow: hidden; }
.slot-screen.themed-art .slot-column { height: 100%; gap: 0; justify-content: space-between; }
/* Ячейки растягиваются под зону (прямоугольные), символ вписан по центру */
.slot-screen.themed-art .slot-cell {
    aspect-ratio: auto !important;
    flex: 1 1 0; height: auto; min-height: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.slot-screen.themed-art .slot-cell::before,
.slot-screen.themed-art .slot-cell::after { display: none !important; content: none !important; }
/* Никакой подсветки выигрышных ячеек — выигрыш показываем линиями поверх (как у Pragmatic) */
.slot-screen.themed-art .slot-cell.winning {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
}
.slot-screen.themed-art .slot-cell.winning .slot-symbol { transform: none !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.slot-screen.themed-art .slot-symbol { width: 88%; height: 88%; }
/* Вайлд с множителем — только лёгкое свечение самой картинки, без рамки-обводки ячейки */
.slot-screen.themed-art .slot-cell.wild-glow {
    background: transparent !important; border: none !important; box-shadow: none !important; animation: none !important;
}
.slot-screen.themed-art .sym-img.wild-mult { filter: drop-shadow(0 0 10px rgba(255,196,60,.9)); }

/* ===== Линии выплат поверх символов (тонкие, по одной, как у Pragmatic) ===== */
.payline-overlay {
    position: absolute;
    left: var(--ri-left, 5.7%); right: var(--ri-right, 6%);
    top: var(--ri-top, 18%); bottom: var(--ri-bottom, 17.5%);
    width: auto; height: auto;
    pointer-events: none; z-index: 6; overflow: hidden;
}
.payline-overlay .pl-line {
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    stroke-width: 4; vector-effect: non-scaling-stroke;   /* всегда 4px, без искажений */
    filter: drop-shadow(0 0 4px currentColor);
    animation: plFlash .9s ease-in-out;
}
@keyframes plFlash {
    0% { opacity: 0; }
    18% { opacity: 1; }
    82% { opacity: 1; }
    100% { opacity: 0; }
}

/* ===== Вайлды с множителем (Wild x2-x5) ===== */
.sym-img.wild-mult { filter: drop-shadow(0 0 8px rgba(255,196,60,.85)) drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.slot-screen .slot-cell.wild-glow {
    background: radial-gradient(circle, rgba(255,196,60,.28), transparent 70%) !important;
    border-color: rgba(255,196,60,.6) !important;
    box-shadow: 0 0 20px rgba(255,196,60,.55) !important;
    animation: wildGlowPulse 1s var(--ease) infinite alternate;
}
@keyframes wildGlowPulse {
    from { box-shadow: 0 0 12px rgba(255,196,60,.4); }
    to   { box-shadow: 0 0 26px rgba(255,196,60,.8); }
}

/* ===== Плашки крупных выигрышей (WIN / BIG WIN / MEGA WIN) ===== */
.slot-win-popup.has-plaque {
    background: none !important; box-shadow: none !important; border: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    display: flex; align-items: center; justify-content: center; padding: 0 !important;
}
/* Вся плашка (картинка + сумма) масштабируется вместе — сумма приклеена к свитку */
.plaque-wrap {
    position: relative; display: inline-block; line-height: 0;
    transform: scale(.4) rotate(-5deg); opacity: 0;
    transition: transform .5s cubic-bezier(.16,1.5,.3,1), opacity .35s;
}
.slot-win-popup.has-plaque.show .plaque-wrap { transform: scale(1) rotate(0); opacity: 1; }
.slot-win-plaque {
    width: min(84vw, 440px); height: auto; display: block;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.65));
}
/* Сумма — поверх нижнего «свитка» плашки (позиция свитка замерена по каждой плашке) */
.plaque-amount {
    position: absolute; left: 6%; right: 6%; top: 76%;
    transform: translateY(-50%);
    text-align: center; line-height: 1;
    font-family: 'Fredoka', 'Oswald', sans-serif; font-weight: 800; letter-spacing: .5px;
    font-size: clamp(28px, 9.5vw, 52px);
    color: #FFF6D8;
    text-shadow: 0 3px 4px rgba(140,20,70,.95), 0 1px 0 rgba(0,0,0,.5), 0 0 16px rgba(255,196,60,.6);
    white-space: nowrap;
}

/* ===== Анимация выигрышных символов (прыжок + свечение в цвет слота) ===== */
.slot-screen.themed-art .slot-cell.sym-win {
    background: radial-gradient(circle, color-mix(in srgb, var(--slot-accent) 45%, transparent) 0%, transparent 66%) !important;
    border-radius: 14px;
    z-index: 3;
    animation: cellWinPulse .55s ease-in-out 3;
}
.slot-screen.themed-art .slot-cell.sym-win .slot-symbol {
    animation: symBounce .55s cubic-bezier(.3,1.4,.5,1) 3;
    filter: drop-shadow(0 0 12px var(--slot-glow)) drop-shadow(0 2px 4px rgba(0,0,0,.5)) !important;
}
@keyframes symBounce {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.22); }
}
@keyframes cellWinPulse {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}
/* Позиция свитка у каждой плашки своя (замерено по картинкам) */
.slot-win-popup.has-plaque.big .plaque-amount { top: 82.5%; font-size: clamp(30px, 10vw, 56px); }
.slot-win-popup.has-plaque.mega .plaque-amount { top: 88%; font-size: clamp(32px, 10.5vw, 60px); }
.slot-win-popup.has-plaque.big.show .plaque-wrap { animation: plaqueFloat 1.6s ease-in-out .5s infinite; }
.slot-win-popup.has-plaque.mega.show .plaque-wrap { animation: plaqueMega 1.2s ease-in-out .5s infinite; }
@keyframes plaqueFloat {
    0%,100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.03) translateY(-5px); }
}
@keyframes plaqueMega {
    0%,100% { transform: scale(1.02) rotate(-1.5deg); filter: drop-shadow(0 10px 26px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(255,196,60,.7)); }
    50% { transform: scale(1.08) rotate(1.5deg); filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(255,196,60,.95)); }
}

/* ===== Множители-бомбы (VeltCandy) ===== */
/* Бомба живёт ВНУТРИ ячейки барабана (как обычный символ) — падает вместе со
   всеми, режется окном барабана, ничего не всплывает поверх. */
.cbomb-cell {
    width: 112%; height: 112%; margin: -6%; object-fit: contain; display: block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,60,160,.7));
    /* Вторая анимация — покой: бомба лежит на поле до сбора множителей, и без
       него выглядела мёртвой. Стартует ровно там, где кончается падение, и
       дальше владеет transform (в списке она последняя). */
    animation: bombDropIn .45s cubic-bezier(.2,1.35,.4,1) both,
               bombFuseIdle 1.9s ease-in-out .45s infinite;
    transition: opacity .3s;
    will-change: transform, opacity;
}
@keyframes bombDropIn {
    0%   { transform: translateY(-115%) scale(.6) rotate(-10deg); opacity: 0; }
    65%  { transform: translateY(6%) scale(1.06) rotate(3deg); opacity: 1; }
    100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
/* Тлеющий фитиль: бомба чуть покачивается и «дышит». Только transform,
   без filter — иначе телефон перерисовывает тень каждый кадр. */
@keyframes bombFuseIdle {
    0%, 100% { transform: translateY(0) scale(1) rotate(-3.5deg); }
    28%      { transform: translateY(-3%) scale(1.045) rotate(0deg); }
    56%      { transform: translateY(0) scale(1) rotate(3.5deg); }
    80%      { transform: translateY(-2%) scale(1.03) rotate(0deg); }
}
/* ===== Рождение бомбы: заряд символа -> взрыв -> бомба из вспышки =====

   Раньше бомба просто ПОДМЕНЯЛА символ: один кадр — и на поле уже икс, взяться
   ему было неоткуда. Позиции бомб приходят с сервера вместе со спином, то есть
   клиент знает их заранее, и это можно отыграть.

   Все слои заряда лежат в отдельном элементе .bomb-fx внутри ячейки, а НЕ на её
   псевдоэлементах: у слотов с артом ::before/::after ячейки отключены
   принудительно, и заряд не показался бы ровно там, где нужен.

   Сам символ анимируется ТОЛЬКО через transform — свечение берёт на себя
   .bf-glow (opacity), поэтому телефон не перерисовывает filter каждый кадр. */
.slot-cell.bomb-charge .slot-symbol > :not(.cbomb-cell) {
    animation: bombChargeSym var(--bomb-charge-ms, 640ms) cubic-bezier(.35,.02,.5,1)
               var(--bomb-delay, 0ms) both;
    transform-origin: 50% 58%;
}
/* Дрожь НАРАСТАЕТ: символ понимает, что сейчас рванёт. Ближе к концу он ещё и
   поджимается — как будто его втягивает в будущую бомбу. */
@keyframes bombChargeSym {
    0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    22%  { transform: translate3d(-1%, -2%, 0) scale(1.05) rotate(-2deg); }
    40%  { transform: translate3d(1.5%, -3%, 0) scale(1.08) rotate(3deg); }
    56%  { transform: translate3d(-2.5%, -4%, 0) scale(1.1) rotate(-5deg); }
    68%  { transform: translate3d(2.5%, -4%, 0) scale(1.07) rotate(5deg); }
    78%  { transform: translate3d(-3%, -3%, 0) scale(1.02) rotate(-7deg); }
    86%  { transform: translate3d(3%, -2%, 0) scale(.96) rotate(7deg); }
    93%  { transform: translate3d(-2%, -1%, 0) scale(.9) rotate(-5deg); }
    100% { transform: translate3d(0, 0, 0) scale(.84) rotate(0deg); }
}
/* Взрыв символа: резко раздувается и гаснет. Бомбу (.cbomb-cell) селектор
   исключает — она появляется в этой же ячейке и своей анимацией живёт сама. */
.slot-cell.bomb-pop .slot-symbol > :not(.cbomb-cell) {
    animation: bombPopSym var(--bomb-pop-ms, 300ms) cubic-bezier(.2,.9,.3,1) both;
    transform-origin: 50% 55%;
}
@keyframes bombPopSym {
    0%   { transform: translate3d(0, 0, 0) scale(.84) rotate(0deg); opacity: 1; }
    38%  { transform: translate3d(0, -4%, 0) scale(1.42) rotate(6deg); opacity: 1; }
    100% { transform: translate3d(0, 2%, 0) scale(.18) rotate(-14deg); opacity: 0; }
}

/* Слой заряда внутри ячейки */
.bomb-fx {
    position: absolute;
    inset: -14%;
    z-index: 3;
    pointer-events: none;
    display: block;
}
.bomb-fx > i {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    pointer-events: none;
}
/* Свечение: карамельное ядро наливается под символом. mix-blend-mode: screen —
   свет ложится НА символ, не закрывая его, отсюда и «необычное» свечение. */
.bomb-fx .bf-glow {
    width: 116%;
    height: 116%;
    border-radius: 50%;
    mix-blend-mode: screen;
    background: radial-gradient(circle,
        rgba(255,255,255,.95) 0%,
        color-mix(in srgb, var(--slot-accent, #FF5FA2) 85%, transparent) 34%,
        color-mix(in srgb, var(--slot-glow, #B15CFF) 55%, transparent) 62%,
        transparent 78%);
    opacity: 0;
    animation: bombGlowUp var(--bomb-charge-ms, 640ms) ease-in var(--bomb-delay, 0ms) both;
}
@keyframes bombGlowUp {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.35); }
    45%  { opacity: .55; transform: translate3d(-50%, -50%, 0) scale(.8); }
    72%  { opacity: .8; transform: translate3d(-50%, -50%, 0) scale(1); }
    88%  { opacity: .55; transform: translate3d(-50%, -50%, 0) scale(.92); }
    100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.06); }
}
/* Кольцо СТЯГИВАЕТСЯ к центру: читается как «здесь сейчас соберётся бомба». */
.bomb-fx .bf-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--slot-accent, #FF5FA2) 90%, #FFFFFF);
    box-shadow: 0 0 10px color-mix(in srgb, var(--slot-glow, #B15CFF) 80%, transparent);
    opacity: 0;
    animation: bombRingIn var(--bomb-charge-ms, 640ms) cubic-bezier(.3,.1,.2,1)
               var(--bomb-delay, 0ms) both;
}
@keyframes bombRingIn {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.85) rotate(0deg); }
    30%  { opacity: .9; transform: translate3d(-50%, -50%, 0) scale(1.3) rotate(60deg); }
    75%  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(.72) rotate(150deg); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.42) rotate(220deg); }
}
/* Сахарная воронка: пунктирное кольцо крутится в другую сторону — вместе с
   .bf-ring даёт эффект закручивания, характерный для сладкого пака. */
.bomb-fx .bf-swirl {
    width: 132%;
    height: 132%;
    border-radius: 50%;
    border: 3px dashed color-mix(in srgb, var(--slot-glow, #B15CFF) 75%, transparent);
    opacity: 0;
    animation: bombSwirl var(--bomb-charge-ms, 640ms) linear var(--bomb-delay, 0ms) both;
}
@keyframes bombSwirl {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.1) rotate(0deg); }
    35%  { opacity: .7; transform: translate3d(-50%, -50%, 0) scale(1) rotate(-130deg); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.6) rotate(-330deg); }
}
/* Крупинки сахара затягиваются к центру по своим углам. */
.bomb-fx .bf-spark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 0%,
        color-mix(in srgb, var(--slot-accent, #FF5FA2) 80%, transparent) 70%, transparent 100%);
    opacity: 0;
    animation: bombSparkIn var(--bomb-charge-ms, 640ms) cubic-bezier(.4,.05,.3,1)
               calc(var(--bomb-delay, 0ms) + var(--s-d, 0) * 70ms) both;
}
@keyframes bombSparkIn {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(var(--s-a, 0deg)) translateY(-150%) scale(.5); }
    30%  { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(var(--s-a, 0deg)) translateY(-110%) scale(1); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(var(--s-a, 0deg)) translateY(0%) scale(.3); }
}

/* На взрыве заряд уходит ПЛАВНО, а не снимается рывком вместе с элементом:
   бомба должна появиться уже на чистой ячейке. DOM подчищает js после подмены. */
.slot-cell.bomb-pop .bomb-fx {
    animation: bombFxOut var(--bomb-pop-ms, 300ms) ease-out both;
}
@keyframes bombFxOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* Всё поле чуть подсвечивается изнутри, пока идёт заряд: сигнал «сейчас будет
   икс» до того, как игрок разглядит конкретные клетки. Только box-shadow —
   раскладка не двигается. */
#slotGrid.bombs-incoming {
    animation: bombFieldTense 1.05s ease-in-out infinite;
}
@keyframes bombFieldTense {
    0%, 100% { box-shadow: inset 0 0 0 rgba(0,0,0,0); }
    50%      { box-shadow: inset 0 0 38px color-mix(in srgb, var(--slot-glow, #B15CFF) 40%, transparent); }
}

/* Вспышка рождения: ударная волна, ядро и осколки карамели. */
.cbomb-spawn {
    position: fixed;
    width: 1px;
    height: 1px;
    z-index: 5004;
    pointer-events: none;
}
.cbomb-spawn > i {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}
.cbomb-spawn .bs-flash {
    width: calc(var(--bomb-size, 60px) * .5);
    height: calc(var(--bomb-size, 60px) * .5);
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 0%,
        color-mix(in srgb, var(--bomb-acc, #FF5FA2) 80%, transparent) 45%, transparent 72%);
    animation: bombSpawnFlash .42s ease-out forwards;
}
@keyframes bombSpawnFlash {
    0%   { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(.3); }
    45%  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(2.1); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(3.1); }
}
.cbomb-spawn .bs-wave {
    width: calc(var(--bomb-size, 60px) * .42);
    height: calc(var(--bomb-size, 60px) * .42);
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--bomb-glow, #B15CFF) 88%, #FFFFFF);
    animation: bombSpawnWave .58s cubic-bezier(.2,.75,.25,1) forwards;
}
@keyframes bombSpawnWave {
    0%   { opacity: .95; transform: translate3d(-50%, -50%, 0) scale(.25); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(2.9); }
}
.cbomb-spawn .bs-shard {
    width: 7px;
    height: 13px;
    border-radius: 7px;
    background: linear-gradient(#FFFFFF, var(--c, #FF5FA2));
    box-shadow: 0 0 8px var(--c, #FF5FA2);
    transform-origin: 50% 0;
    animation: bombSpawnShard .64s cubic-bezier(.12,.7,.25,1) forwards;
}
@keyframes bombSpawnShard {
    0%   { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(var(--a, 0deg)) translateY(0) scale(1); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(var(--a, 0deg)) translateY(calc(var(--d, 60px) * -1)) scale(.2); }
}

/* Бомба выходит ИЗ ВСПЫШКИ, а не падает сверху: падать ей теперь неоткуда.
   Задержка — та же лесенка, что у заряда, поэтому каждая бомба появляется
   ровно после своего взрыва. Дальше владеет покой (bombFuseIdle). */
.cbomb-cell.from-burst {
    animation: bombMaterialize var(--bomb-reveal-ms, 420ms) cubic-bezier(.16,1.5,.36,1) both,
               bombFuseIdle 1.9s ease-in-out var(--bomb-reveal-ms, 420ms) infinite;
}
@keyframes bombMaterialize {
    0%   { transform: scale(0) rotate(-120deg); opacity: 0; }
    30%  { transform: scale(1.34) rotate(-24deg); opacity: 1; }
    58%  { transform: scale(.92) rotate(9deg); opacity: 1; }
    80%  { transform: scale(1.06) rotate(-4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    /* Заряд и взрыв — чистая подача: при отключённых анимациях бомба просто
       появляется на месте, как было до правки. */
    .bomb-fx, .cbomb-spawn { display: none !important; }
    .slot-cell.bomb-charge .slot-symbol > :not(.cbomb-cell),
    .slot-cell.bomb-pop .slot-symbol > :not(.cbomb-cell) { animation: none !important; }
    #slotGrid.bombs-incoming { animation: none !important; }
    .cbomb-cell.from-burst { animation: none !important; opacity: 1; transform: none; }
}

.cbomb-cell.collect { animation: bombCollect .44s ease-in-out; }
/* Гасим покой на детонации, иначе бегущая анимация перебивала бы scale ниже
   и бомба исчезала без «хлопка», который тут и задуман. */
.cbomb-cell.detonate { animation: none; opacity: 0; transform: scale(1.5); }
@media (prefers-reduced-motion: reduce) {
    .cbomb-cell { animation: none !important; transform: none; opacity: 1; }
    .cbomb-cell.detonate { opacity: 0; }
}
@keyframes bombCollect {
    0%,100% { transform: translate(0,0) scale(1) rotate(0); filter: drop-shadow(0 0 12px rgba(255,60,160,.7)); }
    18% { transform: translate(-5px,2px) scale(1.12) rotate(-9deg); }
    36% { transform: translate(5px,-2px) scale(1.2) rotate(8deg); }
    56% { transform: translate(-4px,1px) scale(1.28) rotate(-6deg); filter: brightness(1.5) drop-shadow(0 0 28px rgba(255,140,220,1)); }
    76% { transform: translate(4px,-1px) scale(1.36) rotate(5deg); }
}
.cbomb-fly {
    position: fixed; z-index: 5005; pointer-events: none; object-fit: contain;
    transform-origin: center; will-change: transform, opacity;
    filter: drop-shadow(0 8px 13px rgba(0,0,0,.58))
            drop-shadow(0 0 22px var(--tw-glow, #ff5fa2));
}
.cbomb-burst {
    position: fixed; width: 1px; height: 1px; z-index: 5004; pointer-events: none;
}
.cbomb-burst::before {
    content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px;
    border-radius: 50%; transform: translate(-50%,-50%);
    background: #fff; box-shadow: 0 0 12px 6px var(--bomb-glow, #ff5fa2);
    animation: cbombFlash .52s ease-out forwards;
}
.cbomb-burst i {
    position: absolute; left: 0; top: 0; width: 7px; height: 14px; border-radius: 8px;
    background: linear-gradient(#fff, var(--bomb-glow, #ff5fa2));
    box-shadow: 0 0 8px var(--bomb-glow, #ff5fa2);
    transform-origin: 50% 0;
    animation: cbombParticle .65s cubic-bezier(.1,.68,.25,1) forwards;
}
@keyframes cbombFlash {
    0% { transform: translate(-50%,-50%) scale(.2); opacity: 1; }
    55% { transform: translate(-50%,-50%) scale(2.4); opacity: .9; }
    100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
}
@keyframes cbombParticle {
    0% { transform: translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
    100% { transform: translate(-50%,-50%) rotate(var(--a)) translateY(-62px) scale(.12); opacity: 0; }
}
.tumble-win-bar.collecting-mults .tw-box {
    filter: brightness(1.16) drop-shadow(0 0 14px var(--tw-glow));
}

/* Плашка-табло собранного множителя */
.mult-plate {
    position: absolute; left: 50%; top: 40%;
    transform: translate(-50%, -50%) scale(.55) rotate(-4deg);
    opacity: 0; z-index: 9; pointer-events: none;
    transition: transform .45s cubic-bezier(.16,1.5,.3,1), opacity .35s;
    line-height: 0;
}
.mult-plate.show { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
.mult-plate.big  { transform: translate(-50%, -50%) scale(1.14) rotate(0); }
.mult-plate-img {
    width: min(72vw, 380px); height: auto; display: block;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.6));
}
.mult-plate-val, .mult-plate-fallback {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    text-align: center; line-height: 1;
    font-family: 'Fredoka', 'Oswald', sans-serif; font-weight: 800;
    font-size: clamp(34px, 11vw, 68px);
    color: #FFE9F4;
    text-shadow: 0 3px 4px rgba(180,20,90,.9), 0 0 18px rgba(255,80,170,.9), 0 1px 0 #C21E6E;
    white-space: nowrap;
}
.mult-plate-fallback {
    position: static; transform: none;
    padding: 14px 34px; border-radius: 22px;
    background: linear-gradient(180deg, #FF5FA2, #C21E6E);
    box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.mult-plate.pulse .mult-plate-val { animation: multPop .28s ease-out; }
@keyframes multPop {
    0% { transform: translateY(-50%) scale(1); }
    45% { transform: translateY(-50%) scale(1.35); color: #FFF; }
    100% { transform: translateY(-50%) scale(1); }
}

/* ============================================================
   МОДАЛКИ СЛОТА: покупка бонуса + выигрыш фриспинов (тема слота)
   Цвета берутся из активного слота через --m-acc / --m-glow.
   ============================================================ */
.vg-modal {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 40%, rgba(20,6,30,.72), rgba(6,4,12,.9));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .28s ease;
}
.vg-modal.show { opacity: 1; }

/* Каркас .vg-modal изначально сделан под слоты, поэтому подложка у него
   с сиреневым отливом. Окна вне слотов (кошелёк, ошибки, правила мини-игр,
   Gifts) живут в общей палитре — им подложка #01040D. Слотовые окна
   (paytable, ante, покупка бонуса, фриспины, выбор ставки) здесь не
   перечислены и остаются со своей темой. */
.vg-modal.error-modal,
.vg-modal.success-modal,
.vg-modal.confirm-modal,
.vg-modal.card-dep-modal,
.vg-modal.gifts-deposit-modal,
.vg-modal.gameinfo:not(.anteinfo) {
    background: rgba(1,4,13,.78);
}

.vg-modal-card {
    position: relative; width: 100%; max-width: 380px;
    padding: 26px 24px 24px; text-align: center;
    font-family: var(--m-font, 'Fredoka', sans-serif);
    border-radius: 28px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--m-glow) 26%, #1a0f24) 0%,
                                 color-mix(in srgb, var(--m-glow) 12%, #140b1c) 100%);
    border: 3px solid var(--m-acc);
    box-shadow: 0 0 0 4px rgba(0,0,0,.35),
                0 22px 60px rgba(0,0,0,.7),
                0 0 40px color-mix(in srgb, var(--m-acc) 55%, transparent),
                inset 0 2px 18px rgba(255,255,255,.12);
    transform: scale(.7) translateY(14px); opacity: 0;
    transition: transform .42s cubic-bezier(.16,1.5,.3,1), opacity .3s;
}
.vg-modal.show .vg-modal-card { transform: scale(1) translateY(0); opacity: 1; }
/* Верхний блик */
.vg-modal-deco {
    position: absolute; top: 8px; left: 8px; right: 8px; height: 40%;
    border-radius: 22px 22px 40% 40%;
    background: linear-gradient(180deg, rgba(255,255,255,.16), transparent);
    pointer-events: none;
}

/* ---- Покупка бонуса ---- */
.vg-bb-top {
    font-size: 20px; font-weight: 800; letter-spacing: 2px;
    color: #EAF6FF; text-shadow: 0 2px 4px rgba(0,0,0,.6); margin-bottom: 2px;
}
.vg-bb-main {
    font-size: clamp(22px, 7vw, 30px); font-weight: 800; line-height: 1.12;
    color: #EAF6FF; text-shadow: 0 2px 4px rgba(0,0,0,.6);
    text-transform: uppercase; letter-spacing: .5px;
}
.vg-bb-num {
    color: #FFD24B; font-size: 1.35em;
    text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 0 16px rgba(255,196,60,.7);
}
.vg-bb-sub {
    margin-top: 8px; font-size: 13px; color: color-mix(in srgb, var(--m-acc) 30%, #fff);
    opacity: .92; font-weight: 600;
}
.vg-bb-cost {
    margin: 16px 0 20px; font-size: clamp(28px, 9vw, 40px); font-weight: 800;
    color: #FFD24B; text-shadow: 0 3px 5px rgba(0,0,0,.7), 0 0 20px rgba(255,196,60,.6);
}
.vg-bb-cost span { font-size: .5em; color: #EAF6FF; opacity: .8; }
.vg-bb-btns { display: flex; gap: 14px; justify-content: center; }
.vg-btn {
    flex: 1; max-width: 140px; padding: 14px 0; border: none; border-radius: 16px;
    font-family: inherit; font-size: 20px; font-weight: 800; letter-spacing: 1px;
    color: #fff; cursor: pointer; text-shadow: 0 2px 3px rgba(0,0,0,.5);
    box-shadow: 0 6px 0 rgba(0,0,0,.35), inset 0 2px 6px rgba(255,255,255,.35);
    transition: transform .12s ease, box-shadow .12s ease;
}
.vg-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 2px 6px rgba(255,255,255,.3); }
.vg-btn.no  { background: linear-gradient(180deg, #FF6B6B, #C42B2B); }
.vg-btn.yes { background: linear-gradient(180deg, #67E06B, #2E9E33); }

/* ---- Выигрыш фриспинов ---- */
.vg-fs-congrats {
    font-size: clamp(26px, 8.5vw, 38px); font-weight: 800; letter-spacing: 1px;
    background: linear-gradient(180deg, #FFE98A 0%, #FFB63C 55%, #FF8A1E 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); text-transform: uppercase;
    animation: vgFsPulse 1.4s ease-in-out infinite;
}
.vg-fs-won {
    margin-top: 6px; font-size: clamp(18px, 6vw, 24px); font-weight: 800; letter-spacing: 2px;
    color: color-mix(in srgb, var(--m-acc) 35%, #EAF6FF); text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.vg-fs-pill {
    margin: 14px auto; width: 62%; max-width: 210px; height: 84px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 60px;
    background: radial-gradient(circle at 50% 30%,
        color-mix(in srgb, var(--m-acc) 88%, #fff) 0%,
        var(--m-acc) 55%,
        color-mix(in srgb, var(--m-acc) 60%, #000) 100%);
    box-shadow: 0 8px 22px rgba(0,0,0,.5), inset 0 3px 10px rgba(255,255,255,.5),
                0 0 30px color-mix(in srgb, var(--m-acc) 70%, transparent);
    animation: vgFsBounce 1s cubic-bezier(.5,1.6,.4,1) both;
}
.vg-fs-pill span {
    font-size: 56px; font-weight: 800; color: #FFD24B;
    text-shadow: 0 3px 4px rgba(120,20,10,.8), 0 0 14px rgba(255,255,255,.5);
}
.vg-fs-label {
    font-size: clamp(18px, 6vw, 24px); font-weight: 800; letter-spacing: 2px;
    color: color-mix(in srgb, var(--m-acc) 35%, #EAF6FF); text-shadow: 0 2px 4px rgba(0,0,0,.6);
    text-transform: uppercase;
}
.vg-fs-tap {
    margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.65); font-weight: 600;
    letter-spacing: .5px; animation: vgTapBlink 1.3s ease-in-out infinite;
}
@keyframes vgFsPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes vgFsBounce { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes vgTapBlink { 0%,100% { opacity: .45; } 50% { opacity: .95; } }

/* ============================================================
   TUMBLE-эффекты выигрыша (едины для всех слотов)
   ============================================================ */
/* Символ трясётся когда сыграл.
   Длительность приходит из JS (--fx-shake-ms): она обязана совпадать с
   winFxDelay, иначе код переключает символ на взрыв посреди тряски и та
   обрывается рывком. Значение по умолчанию — на случай вызова без переменной. */
.slot-cell.sym-shake .slot-symbol {
    animation: symShakeFx var(--fx-shake-ms, .4s) ease-in-out; transform-origin: center;
    /* выигрышные символы «загораются» перед взрывом */
    filter: drop-shadow(0 0 11px var(--slot-glow, #fff)) brightness(1.28);
}
@keyframes symShakeFx {
    0%,100% { transform: rotate(0) scale(1); }
    18% { transform: rotate(-9deg) scale(1.12, .88); }
    38% { transform: rotate(8deg)  scale(.88, 1.12); }
    58% { transform: rotate(-6deg) scale(1.08, .93); }
    78% { transform: rotate(4deg)  scale(.96, 1.05); }
}
/* Символ пульсирует и взрывается в частицы (для tumble-слотов).
   Длительность тоже из JS (--fx-burst-ms) и равна winBurst: раньше анимация
   шла 460 мс, а код снимал класс на 425-й — взрыв обрывался на 92%, и символ
   рывком возвращался из opacity:0 в полную видимость прямо перед тем, как на
   его место падал новый. Именно это и выглядело как «подсветились не те». */
.slot-cell.sym-burst .slot-symbol {
    animation: symBurstFx var(--fx-burst-ms, .46s) cubic-bezier(.3,1.25,.5,1) forwards;
}
/* Взрыв доигран: символа уже нет, но ячейку ещё не перезаполнили. Держим её
   пустой БЕЗ анимации и без свечения — так между каскадами не может мелькнуть
   ни старый символ, ни его подсветка. Класс снимает animateTumble в тот же
   кадр, когда пишет новый символ. */
.slot-cell.sym-cleared .slot-symbol {
    opacity: 0;
    animation: none !important;
    filter: none !important;
}
@keyframes symBurstFx {
    0%   { transform: scale(1); opacity: 1; filter: brightness(1); }
    28%  { transform: scale(1.38) rotate(-3deg); opacity: 1; filter: brightness(1.9) drop-shadow(0 0 20px var(--slot-glow, #fff)); }
    52%  { transform: scale(1.16); opacity: 1; filter: brightness(1.6) drop-shadow(0 0 14px var(--slot-glow, #fff)); }
    100% { transform: scale(.08) translateY(10%); opacity: 0; filter: brightness(2.3); }
}

/* Вылетающая сумма за падение */
.tumble-float {
    position: fixed; transform: translate(-50%,-50%); z-index: 30; pointer-events: none;
    font-family: 'Fredoka', 'Oswald', sans-serif; font-weight: 800;
    font-size: clamp(20px, 6vw, 34px); color: #FFE9A8;
    text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 0 14px var(--tw-acc, #fff);
    animation: tFloat 1.05s ease-out forwards; white-space: nowrap;
}
@keyframes tFloat {
    0%   { transform: translate(-50%,-40%) scale(.6); opacity: 0; }
    22%  { transform: translate(-50%,-85%) scale(1.14); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translate(-50%,-175%) scale(1); opacity: 0; }
}

/* Плашка «ВЫИГРЫШ ЗА ПАДЕНИЯ» — В ПОТОКЕ прямо над барабаном (видна всегда) */
.tumble-win-bar {
    position: relative; margin: 4px auto 2px; z-index: 12;   /* плашка опущена и не липнет к барабану */
    pointer-events: none; text-align: center;
    display: flex; flex-direction: column; align-items: center;
    opacity: 0; transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
    font-family: var(--tw-font, 'Fredoka', sans-serif);
}
.tumble-win-bar.show { opacity: 1; transform: translateY(0); }
/* Подпись — НАД плашкой, опущена ближе к ней (в прозрачную зону арта, не на рамку) */
.tw-label {
    font-family: var(--tw-font, 'Fredoka', sans-serif);
    font-size: clamp(11px, 3vw, 15px); font-weight: 800; letter-spacing: 2.5px;
    text-transform: uppercase; line-height: 1;
    position: relative; z-index: 2; margin-bottom: 4px;   /* подпись больше не перекрывается плашкой */
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tw-acc) 55%, #ffffff) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.7))
            drop-shadow(0 0 7px color-mix(in srgb, var(--tw-acc) 65%, transparent));
}
/* Коробка со значением */
.tw-box { display: flex; align-items: center; justify-content: center; }
/* Арт-плашка (VeltCandy — «плашка для иксовок»), крупнее */
.tumble-win-bar.has-plate .tw-box {
    width: 62vw; max-width: 300px; aspect-ratio: 720 / 250;
    background: var(--tw-plate) center / 100% 100% no-repeat;
    padding-bottom: 2%;
}
/* Тематическая пилюля (остальные слоты) */
.tumble-win-bar:not(.has-plate) .tw-box {
    min-width: 46%; padding: 6px 30px 8px; border-radius: 30px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tw-glow) 55%, #170d20),
        color-mix(in srgb, var(--tw-glow) 28%, #100913));
    border: 2px solid var(--tw-acc);
    box-shadow: 0 6px 18px rgba(0,0,0,.5),
                0 0 18px color-mix(in srgb, var(--tw-acc) 45%, transparent),
                inset 0 2px 8px rgba(255,255,255,.16);
}
.tw-amount {
    font-size: clamp(18px, 5.6vw, 30px); font-weight: 800; line-height: 1;
    color: #FFD24B;
    text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 0 10px color-mix(in srgb, var(--tw-glow) 70%, transparent);
}
.tumble-win-bar.pop .tw-amount { animation: twPop .3s ease-out; }
@keyframes twPop { 0% { transform: scale(1); } 45% { transform: scale(1.28); color: #fff; } 100% { transform: scale(1); } }

/* ===== Значок «i» на обложке мини-игры (как RTP-бейдж у слотов) =====
   Слева сверху: правый угол отдан сердечку «в избранное». */
.cover-card .info-badge {
    position: absolute; top: 8px; left: 8px; z-index: 4;
    width: 26px; height: 26px; border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 800;
    font-size: 15px; line-height: 1; color: #14141a;
    background: #ffffff; border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
    cursor: pointer; transition: transform .12s var(--ease);
}
.cover-card .info-badge:active { transform: scale(.85); }

/* ===== Модалка правил игры ===== */
.vg-modal.gameinfo .vg-modal-card {
    max-width: 360px; text-align: left; padding: 22px 22px 20px;
    font-family: var(--font); letter-spacing: -0.03em;
    background: var(--card);
    border: 1px solid rgba(230,237,255,.12);
    box-shadow: 0 22px 60px rgba(0,0,0,.65);
}
.vg-modal.gameinfo .vg-modal-deco { display: none; }
.gi-head { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 10px; }
.gi-emoji { font-size: 30px; }
.gi-name {
    font-size: clamp(24px, 7vw, 32px); font-weight: 600; letter-spacing: -0.03em;
    color: var(--white);
}
.gi-point {
    text-align: center; font-size: 14px; font-weight: 500; line-height: 1.35;
    color: var(--text); margin-bottom: 16px;
}
.gi-sec {
    background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.10);
    border-radius: 14px; padding: 11px 14px; margin-bottom: 10px;
}
.gi-sec-t {
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    color: var(--white); text-transform: uppercase; margin-bottom: 4px;
    display: flex; align-items: center; gap: 6px;
}
/* Маркер заголовка — точка акцентного градиента вместо белой. */
.gi-sec-t::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand-grad); box-shadow: 0 0 8px rgba(60,144,255,.7);
}
.gi-sec-b { font-size: 13px; line-height: 1.45; color: var(--muted); }
.gi-close {
    display: block; width: 100%; max-width: none; margin-top: 8px;
    background: var(--brand-grad); color: var(--white);
    border: 2px solid rgba(230,237,255,.20);
    font-family: var(--font); font-weight: 600;
    font-size: 16px; letter-spacing: -0.03em;
    box-shadow: var(--brand-glow);
    /* Кнопка носит и класс .vg-btn из темы слотов, оттуда приходила тёмная
       тень под текстом. В плоском оформлении она не нужна. */
    text-shadow: none;
}
/* Нажатие: без этого правила отрабатывало .vg-btn:active из темы слотов — оно
   специфичнее одноклассового .gi-close и на кадр возвращало белую вставку и
   проседание на 4px. Окно Ante не задеваем, там слотовое поведение оставлено. */
.vg-modal.gameinfo:not(.anteinfo) .gi-close:active {
    transform: scale(.97);
    box-shadow: 0 0 18px rgba(1,82,255,.40);
    filter: brightness(.96);
}
/* Крестик в углу окна Gifts. Своих правил у него не было вообще — браузер
   рисовал стандартную серую кнопку поверх карточки. */
.modal-close-btn {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 30px; height: 30px; padding: 0; flex: 0 0 30px;
    display: grid; place-items: center;
    border: 1px solid rgba(230,237,255,.12); border-radius: 50%;
    background: rgba(230,237,255,.05); color: var(--muted);
    font-family: var(--font); font-size: 17px; line-height: 1; cursor: pointer;
    transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.modal-close-btn:hover { color: var(--white); border-color: rgba(60,144,255,.45); }
.modal-close-btn:active { transform: scale(.9); }

/* ===== Модалка Gifts (пополнение через NFT подарки) ===== */
.vg-modal.gifts-deposit-modal .vg-modal-card {
    max-width: 360px;
    padding: 32px 24px 24px;
    font-family: var(--font); letter-spacing: -0.03em;
    background: var(--card);
    border: 1px solid rgba(230,237,255,.12);
    box-shadow: 0 22px 60px rgba(0,0,0,.65);
}
.vg-modal.gifts-deposit-modal .vg-modal-deco { display: none; }
.info-modal-title {
    font-size: clamp(20px, 6vw, 26px);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--white);
    margin-bottom: 16px;
    line-height: 1.25;
}
.info-modal-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--muted);
    margin-bottom: 20px;
    text-align: center;
}
.gifts-deposit-modal .btn {
    margin-bottom: 10px;
}
.gifts-deposit-modal .btn:last-of-type {
    margin-bottom: 0;
}

/* ============================================================
   FIGMA SLOT CONTROLS — shared by every slot
   Scoped overrides keep the reel art/clipping untouched.
   ============================================================ */
.slot-screen {
    overflow-x: clip;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.slot-screen .slot-art-btn {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .14s ease, filter .18s ease, opacity .18s ease;
}
.slot-screen .slot-art-btn > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 5px 8px rgba(0,0,0,.48));
}
.slot-screen .slot-art-btn:active:not(:disabled) { transform: translateY(2px) scale(.94); }
.slot-screen .slot-art-btn:focus-visible { filter: drop-shadow(0 0 8px var(--slot-accent)); }
.slot-screen .slot-art-btn:disabled { opacity: .48; filter: grayscale(.35); cursor: default; }
.slot-control-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Back + balance use the supplied PNGs at their original proportions. */
.slot-screen .slot-topbar {
    display: grid;
    grid-template-columns: clamp(42px, 12vw, 54px) minmax(0, 1fr) clamp(92px, 26vw, 120px);
    align-items: center;
    gap: clamp(5px, 2vw, 10px);
    min-width: 0;
    position: relative;
    z-index: 20;
}
.slot-screen .slot-back {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    flex: none;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.slot-screen .slot-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(15px, 4.6vw, 20px);
}
.slot-balance-plate {
    position: relative;
    width: 100%;
    aspect-ratio: 192 / 88;
    min-width: 0;
}
.slot-balance-plate > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px rgba(0,0,0,.48));
}
.slot-screen .slot-balance-plate .slot-bal {
    position: absolute;
    inset: 11% 7% 9%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff4ca;
    font-family: var(--slot-font, 'Fredoka', sans-serif);
    font-size: clamp(9px, 2.8vw, 13px);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 3px #000, 0 0 8px var(--slot-glow);
    overflow: hidden;
    white-space: nowrap;
}

/* There is no Free Spins bitmap in images/Кнопки, so this plate follows each slot theme. */
.slot-screen .slot-fs-banner {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1px minmax(0, auto);
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 2vw, 12px);
    width: min(100%, 410px);
    min-height: 42px;
    margin: 0 auto;
    padding: 8px clamp(10px, 3vw, 18px);
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--slot-accent) 80%, #fff);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), transparent 43%),
        linear-gradient(135deg, color-mix(in srgb, var(--slot-accent) 42%, #171020), color-mix(in srgb, var(--slot-accent2) 32%, #100b18));
    box-shadow: inset 0 1px 8px rgba(255,255,255,.16), 0 5px 16px rgba(0,0,0,.45), 0 0 20px var(--slot-glow);
    font-family: var(--slot-font, 'Fredoka', sans-serif);
}
.slot-screen .slot-fs-banner::before,
.slot-screen .slot-fs-banner::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff4b5;
    box-shadow: 0 0 10px var(--slot-accent);
    transform: translateY(-50%);
}
.slot-screen .slot-fs-banner::before { left: 8px; }
.slot-screen .slot-fs-banner::after { right: 8px; }
.slot-screen .slot-fs-banner .fs-title { color: #fff4b5; font-size: clamp(10px, 3vw, 13px); font-weight: 900; letter-spacing: .7px; }
.slot-screen .slot-fs-banner .fs-stat { min-width: 0; color: #fff; font-size: clamp(9px, 2.7vw, 12px); font-weight: 700; white-space: nowrap; }
.slot-screen .slot-fs-banner b { color: #fff4b5; font-size: 1.12em; }
.slot-screen .slot-fs-banner .fs-sep { width: 1px; height: 20px; background: rgba(255,255,255,.28); }

/* Controls stay in normal document flow, with a deliberate gap below the reels. */
.slot-controls-art {
    position: relative;
    z-index: 18;
    display: flex;
    flex-direction: column;
    gap: clamp(9px, 2.5vw, 13px);
    width: 100%;
    min-width: 0;
    margin-top: clamp(5px, 1.8vw, 10px);
    isolation: isolate;
}
.slot-primary-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(84px, 25vw, 112px);
    align-items: center;
    gap: clamp(8px, 2.8vw, 16px);
    width: min(100%, 405px);
    min-width: 0;
    margin: 0 auto;
}
.slot-bet-control-art {
    display: grid;
    grid-template-columns: minmax(42px, 1fr) minmax(66px, 1.42fr) minmax(42px, 1fr);
    align-items: center;
    gap: clamp(3px, 1.2vw, 7px);
    min-width: 0;
    padding-bottom: 8px;
}
.slot-screen .slot-step-btn { width: 100%; aspect-ratio: 113 / 88; }
.slot-screen .slot-bet-art { width: 100%; aspect-ratio: 161 / 88; overflow: visible; }
.slot-bet-amount {
    position: absolute;
    left: 50%;
    bottom: -8px;
    z-index: 2;
    min-width: 72%;
    padding: 2px 20px 2px 7px;
    border: 1px solid color-mix(in srgb, var(--slot-accent) 70%, #fff);
    border-radius: 999px;
    background: rgba(10,8,18,.9);
    color: #fff4bd;
    font-family: var(--slot-font, 'Fredoka', sans-serif);
    font-size: clamp(9px, 2.8vw, 12px);
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 8px var(--slot-glow);
    white-space: nowrap;
}
.slot-bet-unit {
    position: absolute;
    right: 8%;
    bottom: -4px;
    z-index: 3;
    color: rgba(255,255,255,.72);
    font-size: clamp(6px, 1.8vw, 8px);
    font-weight: 700;
    pointer-events: none;
}
.slot-screen .slot-spin-art {
    width: 100%;
    max-width: 112px;
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 50%;
}
.slot-screen .slot-spin-art:not(:disabled):hover { filter: brightness(1.06) drop-shadow(0 0 9px var(--slot-glow)); }
.slot-screen .slot-spin-art.spinning > img { animation: slotArtSpin .82s linear infinite; }
.slot-screen .slot-spin-art.auto-stop::after {
    content: '';
    position: absolute;
    width: 21%;
    aspect-ratio: 1;
    border-radius: 3px;
    background: #fff1b0;
    box-shadow: 0 1px 4px #000, 0 0 9px var(--slot-accent);
}
@keyframes slotArtSpin { to { transform: rotate(360deg); } }

.slot-actions-art {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 1.8vw, 9px);
    width: min(100%, 420px);
    min-width: 0;
    margin: 0 auto;
}
.slot-screen .slot-action-art { flex: 1 1 0; min-width: 0; aspect-ratio: 161 / 88; }
.slot-screen .slot-bonus-art { flex-grow: 1.48; aspect-ratio: 239 / 96; }
.slot-screen .slot-action-art.active > img {
    filter: brightness(1.18) saturate(1.2) drop-shadow(0 0 10px var(--slot-accent)) drop-shadow(0 5px 8px rgba(0,0,0,.48));
}
.slot-screen .slot-action-art.active::after {
    content: '';
    position: absolute;
    inset: 10% 7%;
    border: 2px solid #8dff9a;
    border-radius: 12px;
    box-shadow: 0 0 10px #4cff65;
    pointer-events: none;
}
.slot-screen .auto-count {
    position: absolute;
    top: -2px;
    right: -1px;
    z-index: 3;
    min-width: 22px;
    padding: 3px 5px;
    border-radius: 999px;
    background: #15351c;
    color: #a9ffb4;
    border: 1px solid #63e974;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    box-shadow: 0 0 8px rgba(76,255,101,.5);
}
.slot-screen .auto-count:empty { display: none; }
.slot-action-ante {
    order: 4;
    flex: 0 1 55%;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--slot-accent) 58%, rgba(255,255,255,.2));
    border-radius: 999px;
    background: rgba(12,10,20,.82);
    color: #fff;
    font-family: var(--slot-font, 'Fredoka', sans-serif);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.slot-action-ante.active { color: #152015; background: #8dff9a; border-color: #c6ffcd; box-shadow: 0 0 12px rgba(76,255,101,.5); }

/* BET and AUTO modal content. */
.vg-modal.slot-choice { padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px)); }
.vg-modal.slot-choice .slot-choice-card {
    max-width: 400px;
    max-height: min(92vh, 650px);
    overflow: auto;
    padding: 24px clamp(15px, 5vw, 24px) 20px;
    scrollbar-width: none;
}
.vg-modal.slot-choice .slot-choice-card::-webkit-scrollbar { display: none; }
.slot-choice-close {
    position: absolute;
    top: 9px;
    right: 11px;
    z-index: 3;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background: rgba(0,0,0,.32);
    color: #fff;
    font: 700 22px/1 var(--m-font, sans-serif);
    cursor: pointer;
}
.slot-choice-kicker {
    position: relative;
    z-index: 1;
    color: #fff3b0;
    font-size: clamp(25px, 8vw, 36px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px #000, 0 0 18px var(--m-acc);
}
.slot-choice-title {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    color: #fff;
    font-size: clamp(13px, 4vw, 17px);
    font-weight: 800;
    letter-spacing: .8px;
}
.slot-choice-balance { margin: 10px 0 12px; color: rgba(255,255,255,.72); font-size: 12px; }
.slot-choice-balance b { color: #fff3b0; }
.slot-manual-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.slot-bet-modal-input {
    width: 100%;
    min-width: 0;
    padding: 12px 10px;
    border: 2px solid color-mix(in srgb, var(--m-acc) 70%, rgba(255,255,255,.2));
    border-radius: 13px;
    outline: none;
    background: rgba(3,3,10,.62);
    color: #fff;
    font-family: var(--m-font, sans-serif);
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.45);
    -moz-appearance: textfield;
}
.slot-bet-modal-input::-webkit-outer-spin-button,
.slot-bet-modal-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.slot-bet-modal-input:focus { border-color: #fff3b0; box-shadow: 0 0 14px color-mix(in srgb, var(--m-acc) 55%, transparent); }
.slot-choice-apply {
    padding: 0 13px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--m-acc) 80%, #fff), var(--m-acc));
    color: #16101b;
    font-family: var(--m-font, sans-serif);
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--m-acc) 45%, #000);
}
.slot-choice-apply:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--m-acc) 45%, #000); }
.slot-choice-section { margin: 16px 0 7px; color: rgba(255,255,255,.76); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.slot-choice-grid { display: grid; gap: 7px; }
.slot-choice-grid.fixed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slot-choice-grid.percent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slot-choice-grid.auto-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; }
.slot-choice-grid button {
    min-width: 0;
    min-height: 43px;
    padding: 8px 3px;
    border: 1px solid color-mix(in srgb, var(--m-acc) 58%, rgba(255,255,255,.18));
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.25));
    color: #fff;
    font-family: var(--m-font, sans-serif);
    font-size: clamp(11px, 3.3vw, 14px);
    font-weight: 900;
    cursor: pointer;
    box-shadow: inset 0 1px 3px rgba(255,255,255,.12), 0 3px 7px rgba(0,0,0,.3);
}
.slot-choice-grid button:active:not(:disabled) { transform: scale(.94); background: color-mix(in srgb, var(--m-acc) 32%, #16101d); }
.slot-choice-grid button:disabled { opacity: .35; cursor: default; }
.slot-choice-grid button small { display: block; margin-top: 2px; color: rgba(255,255,255,.65); font-size: 8px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-choice-grid button b { color: #fff3b0; }
.slot-choice-grid.auto-grid button:last-child { color: #fff3b0; font-size: 24px; }
.slot-choice-limits { margin-top: 13px; color: rgba(255,255,255,.55); font-size: 10px; line-height: 1.35; }

@media (max-width: 360px) {
    .slot-screen { gap: 7px; padding-left: 8px; padding-right: 8px; }
    .slot-primary-controls { grid-template-columns: minmax(0, 1fr) clamp(76px, 24vw, 88px); gap: 6px; }
    .slot-bet-control-art { gap: 2px; }
    .slot-actions-art { gap: 4px; }
    .slot-choice-grid.fixed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .slot-choice-grid.auto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-height: 620px) and (orientation: landscape) {
    .vg-modal.slot-choice .slot-choice-card { max-height: 94vh; }
}

/* Keep two-button layouts from stretching the original artwork. */
.slot-screen .slot-actions-art .slot-action-art { max-width: 130px; }
.slot-screen .slot-actions-art .slot-bonus-art { max-width: 175px; }

/* ============================================================
   SLOT CONTROLS SIZE/PACKING PASS — tuned from in-app screenshot
   ============================================================ */
.slot-screen .slot-topbar {
    grid-template-columns: clamp(58px, 16vw, 72px) minmax(0, 1fr) clamp(142px, 39vw, 190px);
    gap: clamp(3px, 1.2vw, 7px);
    margin-inline: -2px;
}
.slot-screen .slot-back {
    width: clamp(58px, 16vw, 72px);
    justify-self: start;
}
.slot-balance-plate {
    width: clamp(142px, 39vw, 190px);
    justify-self: end;
}
.slot-screen .slot-balance-plate .slot-bal {
    inset: 10% 5% 9%;
    font-size: clamp(10px, 2.8vw, 13px);
    letter-spacing: -.25px;
}

.slot-controls-art {
    gap: clamp(4px, 1.2vw, 7px);
    margin-top: 1px;
}
.slot-primary-controls {
    grid-template-columns: minmax(0, 1fr) clamp(84px, 25vw, 112px);
    gap: 0;
    width: min(100%, 470px);
}
.slot-bet-control-art {
    grid-template-columns: minmax(54px, .92fr) minmax(82px, 1.28fr) minmax(54px, .92fr);
    gap: 0;
    width: min(100%, 292px);
    justify-self: end;
    padding: 0 1px 8px;
}
.slot-screen .slot-step-btn > img {
    transform: scale(1.18);
    filter: drop-shadow(0 6px 9px rgba(0,0,0,.58));
}
.slot-screen .slot-bet-art > img {
    transform: scale(1.13);
    filter: drop-shadow(0 6px 9px rgba(0,0,0,.58));
}
.slot-screen .slot-step-btn:active:not(:disabled) > img,
.slot-screen .slot-bet-art:active:not(:disabled) > img { transform: scale(1.04); }
.slot-bet-amount { bottom: -5px; }
.slot-bet-unit { bottom: -1px; }

.slot-actions-art {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr);
    align-items: center;
    gap: clamp(3px, 1vw, 6px);
    width: min(100%, 455px);
    margin-top: -2px;
}
.slot-screen .slot-actions-art .slot-action-art,
.slot-screen .slot-actions-art .slot-bonus-art {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: none;
}
.slot-screen .slot-actions-art .slot-action-art > img {
    transform: scale(1.12);
    filter: drop-shadow(0 5px 8px rgba(0,0,0,.52));
}
.slot-screen .slot-actions-art .slot-bonus-art > img { transform: scale(1.1); }
.slot-screen .slot-actions-art .slot-action-art:active:not(:disabled) > img { transform: scale(1.01); }
.slot-action-ante {
    grid-column: 1 / -1;
    order: initial;
    justify-self: center;
    width: min(68%, 275px);
    min-height: 39px;
    margin-top: -1px;
    padding: 7px 14px;
    flex: none;
    font-size: clamp(11px, 3vw, 13px);
}
.slot-screen .slot-hint { margin-top: -1px; }

/* Slots without Bonus keep Turbo and Auto centered and full-sized. */
.slot-actions-art:has(.slot-bonus-art[style*="display: none"]) {
    grid-template-columns: repeat(2, minmax(0, 130px));
}

@media (max-width: 360px) {
    .slot-screen .slot-topbar {
        grid-template-columns: 56px minmax(0, 1fr) minmax(132px, 42vw);
        gap: 2px;
    }
    .slot-screen .slot-back { width: 56px; }
    .slot-balance-plate { width: min(100%, 146px); }
    .slot-primary-controls { grid-template-columns: minmax(0, 1fr) clamp(78px, 24vw, 88px); }
    .slot-bet-control-art {
        grid-template-columns: minmax(48px, .92fr) minmax(72px, 1.25fr) minmax(48px, .92fr);
        width: 100%;
    }
    .slot-actions-art { gap: 2px; width: 100%; }
    .slot-action-ante { width: min(74%, 245px); min-height: 36px; }
}

/* ============================================================
   FINAL DESIGNER LAYOUT — iPhone reference: − / SPIN / +,
   then Turbo / Auto / Bet, then full-width feature controls.
   ============================================================ */
.slot-screen .slot-topbar {
    grid-template-columns: clamp(68px, 18vw, 82px) minmax(0, 1fr) clamp(165px, 43vw, 218px);
    gap: 2px;
    min-height: clamp(68px, 18vw, 82px);
    margin-inline: -5px;
}
.slot-screen .slot-back {
    width: clamp(68px, 18vw, 82px);
    height: clamp(68px, 18vw, 82px);
    overflow: hidden;
    border-radius: 50%;
}
.slot-screen .slot-back > img {
    width: 100%;
    height: 100%;
    transform: scale(1.34);
}
.slot-balance-plate {
    width: clamp(165px, 43vw, 218px);
    overflow: hidden;
    border-radius: 999px;
}
.slot-balance-plate > img {
    transform: scale(1.22);
    transform-origin: center;
}
.slot-screen .slot-balance-plate .slot-bal {
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 12%;
    justify-content: center;
    text-align: center;
    font-size: clamp(10px, 3vw, 14px);
    line-height: 1;
    letter-spacing: -.35px;
    font-variant-numeric: tabular-nums;
    transform: translateY(-1px);
    text-overflow: clip;
}

.slot-controls-art {
    width: min(100%, 480px);
    gap: clamp(7px, 1.9vw, 10px);
    margin: 0 auto;
}
.slot-primary-controls {
    display: grid;
    grid-template-columns: clamp(76px, 23vw, 104px) clamp(126px, 36vw, 158px) clamp(76px, 23vw, 104px);
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 1.5vw, 9px);
    width: 100%;
    margin: 0 auto;
}
.slot-screen .slot-primary-controls .slot-step-btn {
    width: 100%;
    aspect-ratio: 113 / 88;
    overflow: hidden;
    border-radius: clamp(14px, 4vw, 20px);
}
.slot-screen .slot-primary-controls .slot-step-btn > img {
    width: 100%;
    height: 100%;
    transform: scale(1.46);
    filter: drop-shadow(0 6px 9px rgba(0,0,0,.62));
}
.slot-screen .slot-primary-controls .slot-step-btn:active:not(:disabled) > img { transform: scale(1.32); }
.slot-screen .slot-primary-controls .slot-spin-art {
    width: 100%;
    max-width: 158px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
}
.slot-screen .slot-primary-controls .slot-spin-art > img { transform: scale(1.08); }
.slot-screen .slot-primary-controls .slot-spin-art.spinning > img { animation: slotArtSpinLarge .82s linear infinite; }
@keyframes slotArtSpinLarge { to { transform: scale(1.08) rotate(360deg); } }

.slot-actions-art {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    column-gap: clamp(3px, 1.2vw, 7px);
    row-gap: clamp(10px, 2.8vw, 15px);
    width: min(100%, 465px);
    margin: -2px auto 0;
}
.slot-screen .slot-actions-art .slot-action-art {
    grid-column: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: 161 / 88;
    overflow: hidden;
    border-radius: clamp(13px, 3.8vw, 19px);
}
.slot-screen .slot-actions-art .slot-action-art > img {
    width: 100%;
    height: 100%;
    transform: scale(1.34);
    filter: drop-shadow(0 5px 8px rgba(0,0,0,.58));
}
.slot-screen .slot-actions-art .slot-action-art:active:not(:disabled) > img { transform: scale(1.22); }
.slot-screen .slot-actions-art .slot-bet-art {
    overflow: visible;
    border-radius: 0;
}
.slot-screen .slot-actions-art .slot-bet-art > img { transform: scale(1.34); }
.slot-screen .slot-actions-art .slot-bet-art:active:not(:disabled) > img { transform: scale(1.22); }
.slot-screen .slot-actions-art .slot-bet-art .slot-bet-amount {
    bottom: -5px;
    min-width: 74%;
    padding: 3px 22px 3px 8px;
    font-size: clamp(10px, 3vw, 13px);
}
.slot-screen .slot-actions-art .slot-bet-art .slot-bet-unit {
    right: 7%;
    bottom: 0;
    font-size: clamp(7px, 1.9vw, 9px);
}
.slot-action-ante {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: center;
    width: min(82%, 360px);
    min-height: clamp(52px, 14vw, 68px);
    margin: -1px auto 0;
    padding: 9px 18px;
    border-width: 2px;
    font-size: clamp(16px, 4.8vw, 22px);
    letter-spacing: .2px;
}
.slot-screen .slot-actions-art .slot-bonus-art {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(65%, 300px);
    max-width: 300px;
    aspect-ratio: 239 / 96;
    overflow: hidden;
    border-radius: clamp(16px, 4.8vw, 24px);
}
.slot-screen .slot-actions-art .slot-bonus-art > img { transform: scale(1.24); }
.slot-screen .slot-actions-art .slot-bonus-art:active:not(:disabled) > img { transform: scale(1.13); }
.slot-screen .slot-hint {
    margin-top: 0;
    font-size: clamp(11px, 3vw, 13px);
}

/* No Bonus/Ante: keep the three main controls in the same fixed designer row. */
.slot-actions-art:has(.slot-bonus-art[style*="display: none"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 360px) {
    .slot-screen .slot-topbar {
        grid-template-columns: 62px minmax(0, 1fr) minmax(150px, 44vw);
        min-height: 62px;
        margin-inline: -4px;
    }
    .slot-screen .slot-back { width: 62px; height: 62px; }
    .slot-balance-plate { width: min(100%, 165px); }
    .slot-screen .slot-balance-plate .slot-bal { padding-inline: 10%; font-size: 10px; }
    .slot-primary-controls {
        grid-template-columns: minmax(68px, 23vw) minmax(116px, 36vw) minmax(68px, 23vw);
        gap: 1px;
    }
    .slot-actions-art { column-gap: 1px; row-gap: 9px; }
    .slot-screen .slot-actions-art .slot-action-art > img { transform: scale(1.4); }
    .slot-action-ante { width: 88%; min-height: 50px; }
    .slot-screen .slot-actions-art .slot-bonus-art { width: 72%; }
}

/* ============================================================
   VELTRUSH / SUGAR-RUSH DESIGNER ART PACK (7x7)
   ============================================================ */
.slot-screen[data-slot="sugar-rush"] .slot-art-bg {
    background-position: center top;
}
.slot-screen[data-slot="sugar-rush"] .slot-art-bg::after {
    background: linear-gradient(180deg, rgba(9,3,22,.22) 0%, rgba(16,2,31,.34) 54%, rgba(10,3,22,.72) 100%);
}
.slot-screen[data-slot="sugar-rush"] .slot-signboard {
    width: min(64%, 340px);
    margin: 0 auto 6px;
    filter: drop-shadow(0 7px 15px rgba(20,0,38,.7)) drop-shadow(0 0 10px rgba(255,91,210,.38));
}
.slot-screen[data-slot="sugar-rush"] .slot-machine.has-art {
    aspect-ratio: 1 / 1;
    max-width: 500px;
    margin-inline: auto;
}
.slot-screen[data-slot="sugar-rush"] .slot-machine.has-art #slotGrid.slot-grid {
    gap: 0;
    border-radius: 4px;
    contain: layout paint;
}
.slot-screen[data-slot="sugar-rush"] .slot-column { gap: 0; }
.slot-screen[data-slot="sugar-rush"] .slot-cell { padding: 1.2%; }
.slot-screen[data-slot="sugar-rush"] .slot-symbol {
    width: 96%;
    height: 96%;
    filter: drop-shadow(0 2px 3px rgba(12,0,28,.52));
}
.slot-screen[data-slot="sugar-rush"] .sym-img {
    object-fit: contain;
    transform-origin: center;
}
.slot-screen[data-slot="sugar-rush"] .sym-scatter {
    transform: scale(1.06);
    filter: drop-shadow(0 3px 5px rgba(20,0,35,.65)) drop-shadow(0 0 9px rgba(255,203,50,.8));
}
.slot-screen[data-slot="sugar-rush"] .slot-cell.sym-win .slot-symbol {
    animation: rushSymBounce .55s cubic-bezier(.3,1.25,.5,1) 3;
}
@keyframes rushSymBounce {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.12); }
}

/* Real server-side Free Spins multiplier, clipped to the inner reel window. */
.rush-mult-layer {
    position: absolute;
    left: var(--ri-left, 6.6%);
    right: var(--ri-right, 6.9%);
    top: var(--ri-top, 6.6%);
    bottom: var(--ri-bottom, 7.3%);
    z-index: 9;
    overflow: hidden;
    pointer-events: none;
    border-radius: 4px;
}
/* Анимацию задают ТОЛЬКО фазовые классы .mult-landing / .mult-playing
   (см. блок «ДВЕ ФАЗЫ ИКСА» в конце файла). Здесь — только внешний вид,
   иначе икс успевал мигнуть до того как им начнут управлять. */
.rush-feature-mult {
    position: absolute;
    width: clamp(54px, 15vw, 86px);
    height: auto;
    object-fit: contain;
    transform: translate(-50%, -50%) scale(.3) rotate(-8deg);
    opacity: 0;
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.68)) drop-shadow(0 0 12px rgba(244,91,255,.78));
}

.slot-win-popup.has-plaque[data-slot="sugar-rush"] .slot-win-plaque {
    width: min(88vw, 480px);
}
.slot-win-popup.has-plaque[data-slot="sugar-rush"] .plaque-amount {
    color: #fff7ff;
    font-size: clamp(24px, 8vw, 45px);
    text-shadow: 0 3px 4px rgba(63,0,91,.95), 0 0 14px rgba(233,62,255,.85);
}

/* ============================================================
   CLEAN SHARED SLOT UI — cropped Figma canvases, all 10 slots
   ============================================================ */
.slot-screen .slot-art-btn,
.slot-screen .slot-art-btn > img,
.slot-balance-plate > img {
    filter: none !important;
    box-shadow: none !important;
}
.slot-screen .slot-art-btn:focus-visible { filter: none !important; }
.slot-screen .slot-art-btn > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform: none !important;
}
.slot-screen .slot-art-btn:active:not(:disabled) > img { transform: none !important; }
.slot-screen .slot-action-art.active > img { filter: brightness(1.13) !important; }
.slot-screen .slot-action-art.active::after { box-shadow: none !important; }

.slot-screen .slot-topbar {
    grid-template-columns: clamp(68px, 18vw, 78px) minmax(0, 1fr) clamp(180px, 46vw, 225px);
    min-height: clamp(68px, 18vw, 78px);
    gap: clamp(2px, .8vw, 4px);
    margin-inline: -2px;
}
.slot-screen .slot-back {
    width: clamp(68px, 18vw, 78px);
    height: clamp(68px, 18vw, 78px);
    aspect-ratio: 1;
    overflow: visible;
}
.slot-screen .slot-back > img { transform: none !important; }
.slot-balance-plate {
    width: clamp(180px, 46vw, 225px);
    aspect-ratio: 142 / 38;
    overflow: visible;
    border-radius: 0;
}
.slot-balance-plate > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform: none !important;
}
.slot-screen .slot-balance-plate .slot-bal {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 7%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #fff7d2;
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.35px;
    text-align: center;
    transform: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.85);
}

.slot-controls-art {
    width: min(100%, 448px);
    gap: clamp(3px, 1vw, 6px);
    margin: 0 auto;
}
.slot-primary-controls {
    grid-template-columns: clamp(76px, 23vw, 102px) clamp(124px, 35vw, 154px) clamp(76px, 23vw, 102px);
    gap: clamp(0px, .6vw, 3px);
    width: min(100%, 366px);
    justify-content: center;
}
.slot-screen .slot-primary-controls .slot-step-btn {
    width: 100%;
    aspect-ratio: 63 / 38;
    overflow: visible;
    border-radius: 0;
}
.slot-screen .slot-primary-controls .slot-spin-art {
    width: 100%;
    max-width: 154px;
    aspect-ratio: 1;
    overflow: visible;
}
.slot-screen .slot-primary-controls .slot-spin-art.spinning > img {
    animation: cleanSlotSpin .82s linear infinite !important;
}
@keyframes cleanSlotSpin { to { transform: rotate(360deg) !important; } }

.slot-actions-art {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1px, .6vw, 3px);
    row-gap: clamp(4px, 1.2vw, 7px);
    width: min(100%, 440px);
    margin: -1px auto 0;
}
.slot-screen .slot-actions-art .slot-action-art,
.slot-screen .slot-actions-art .slot-bet-art {
    width: 100%;
    aspect-ratio: 110 / 38;
    overflow: visible;
    border-radius: 0;
}
.slot-screen .slot-actions-art .slot-bonus-art {
    width: min(72%, 315px);
    max-width: 315px;
    aspect-ratio: 157 / 46;
    overflow: visible;
    border-radius: 0;
}
.slot-bet-amount,
.slot-bet-unit {
    display: none !important;
}
.slot-action-ante {
    width: min(82%, 350px);
    min-height: clamp(48px, 12vw, 62px);
    margin-top: 0;
    font-size: clamp(16px, 4.5vw, 21px);
    box-shadow: none !important;
}
.slot-screen .slot-hint {
    margin-top: 2px;
    color: rgba(255,255,255,.82);
    font-size: clamp(15px, 4vw, 18px);
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 2px 4px rgba(0,0,0,.78);
}

@media (max-width: 360px) {
    .slot-screen .slot-topbar {
        grid-template-columns: 62px minmax(0, 1fr) minmax(160px, 46vw);
        min-height: 62px;
    }
    .slot-screen .slot-back { width: 62px; height: 62px; }
    .slot-balance-plate { width: min(100%, 170px); }
    .slot-screen .slot-balance-plate .slot-bal { padding-inline: 5%; font-size: 12px; }
    .slot-primary-controls {
        grid-template-columns: minmax(68px, 23vw) minmax(112px, 35vw) minmax(68px, 23vw);
        width: 100%;
        gap: 0;
    }
    .slot-actions-art { width: 100%; column-gap: 1px; row-gap: 4px; }
    .slot-screen .slot-actions-art .slot-bonus-art { width: 76%; }
    .slot-action-ante { width: 86%; }
}

/* ============================================================
   VELTGAME 2026 — загрузчики, лидеры недели, поиск и инфо-зоны
   ============================================================ */
body.app-booting { overflow: hidden; }
body.app-booting > .topbar,
body.app-booting > #content,
body.app-booting > .tabbar { opacity: 0; visibility: hidden; pointer-events: none; }
/* ============================================================
   ЗАГРУЗОЧНЫЙ ЭКРАН НА ВИДЕО
   Видео 672x1064 (портрет) кроем по экрану, поверх — приветствие с ником.
   Раньше здесь были аватарка в орбитах и подпись «Загружаем удачу…».
   ============================================================ */
.app-splash {
    position: fixed; inset: 0; z-index: 10000; display: block; overflow: hidden;
    background: #01040D;
    opacity: 1;
    /* Уход дольше появления: на затемнении глаз успевает переключиться на
       главную, и переход не выглядит рывком. */
    transition: opacity .72s ease, visibility .72s ease;
}
/* Видео кроет весь экран. object-fit: cover обрезает по бокам, но чёрные поля
   из исходника уже вырезаны, так что режется только фон, не композиция. */
.splash-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block; border: none; background: #01040D;
    /* Плавное проявление первого кадра, чтобы видео не «вспыхивало». */
    opacity: 0; animation: splashVideoIn .6s ease .05s forwards;
}
/* Затемнение снизу и сверху: под ним читается текст на любом кадре видео. */
.splash-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(1,4,13,.55) 0%, transparent 26%),
        linear-gradient(0deg, rgba(1,4,13,.88) 0%, rgba(1,4,13,.35) 28%, transparent 52%);
}
/* Приветствие внизу экрана — на видео сверху обычно основная композиция. */
.splash-copy {
    position: absolute; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0 24px; text-align: center; pointer-events: none;
}
.splash-hi {
    font-family: var(--font); font-size: 15px; font-weight: 500;
    letter-spacing: -0.02em; color: rgba(230,237,255,.72);
    text-shadow: 0 2px 10px rgba(0,0,0,.8);
    opacity: 0; animation: splashCopyIn .7s var(--ease) .5s forwards;
}
.splash-name {
    font-family: var(--font); font-size: 30px; font-weight: 600;
    letter-spacing: -0.03em; color: var(--white); line-height: 1.15;
    text-shadow: 0 3px 16px rgba(0,0,0,.85), 0 0 30px rgba(1,82,255,.35);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0; animation: splashCopyIn .7s var(--ease) .68s forwards;
}
/* Полоса прогресса вместо текстовой подписи. */
.splash-bar {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(34px + env(safe-area-inset-bottom));
    width: 122px; height: 3px; border-radius: 999px;
    background: rgba(230,237,255,.12); overflow: hidden;
}
.splash-bar i {
    display: block; width: 30%; height: 100%; border-radius: 999px;
    background: var(--brand-grad); box-shadow: 0 0 12px rgba(60,144,255,.8);
    animation: splashBarSlide 1.25s var(--ease) infinite;
}
@keyframes splashVideoIn { to { opacity: 1; } }
@keyframes splashCopyIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes splashBarSlide {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(440%); }
}
.app-splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* Финальное затемнение перед показом главной: класс ставит JS за полсекунды до
   скрытия, поэтому видео гаснет раньше самого экрана, а не одновременно с ним. */
.app-splash.is-dimming .splash-video { opacity: 0; transition: opacity .55s ease; animation: none; }
.app-splash.is-dimming .splash-copy,
.app-splash.is-dimming .splash-bar { opacity: 0; transition: opacity .35s ease; }
.loader-stage { position: relative; display: grid; place-items: center; flex: none; }
.loader-stage-large { width: 178px; height: 178px; }
.loader-stage-small { width: 92px; height: 92px; }
/* Ассет avatar-round.png — круг с прозрачным фоном, поэтому радиус 50%:
   при скруглении квадратом по краям вылезала светлая подложка. */
.loader-logo {
    position: relative; z-index: 3; width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(230,237,255,.22); box-shadow: 0 14px 45px rgba(0,0,0,.7), 0 0 26px rgba(60,144,255,.35);
    animation: logoFloat 2s ease-in-out infinite;
}
.loader-stage-small .loader-logo { width: 43px; height: 43px; border-radius: 50%; }
.loader-orbit { position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgba(230,237,255,.10); }
.loader-stage-small .loader-orbit { inset: 4px; }
/* Точки на орбитах — акцентные, они и дают ощущение «загружается». */
.loader-orbit i { position: absolute; display: block; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 12px rgba(60,144,255,.9); }
.orbit-a { animation: orbitSpin 2.1s linear infinite; }
.orbit-b { inset: 27px; border-style: dashed; animation: orbitSpinBack 1.55s linear infinite; }
.loader-stage-small .orbit-b { inset: 15px; }
.orbit-a i { width: 7px; height: 7px; }
.orbit-b i { width: 4px; height: 4px; opacity: .7; }
.orbit-a i:nth-child(1) { top: -4px; left: 50%; }
.orbit-a i:nth-child(2) { right: 5px; bottom: 18%; }
.orbit-a i:nth-child(3) { left: 4px; bottom: 22%; }
.orbit-b i:nth-child(1) { top: 4px; left: 12%; }
.orbit-b i:nth-child(2) { top: 16%; right: 2px; }
.orbit-b i:nth-child(3) { right: 15%; bottom: 2px; }
.orbit-b i:nth-child(4) { left: -2px; bottom: 23%; }
/* «VELT» градиентом, «GAME» цветом текста — как в логотипе шапки. */
.loader-wordmark {
    margin-top: 20px; font-family: var(--font);
    font-size: 26px; font-weight: 700; letter-spacing: .12em;
    background: var(--brand-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.loader-wordmark span {
    -webkit-text-fill-color: var(--white); color: var(--white);
    background: none;
}
/* .loader-caption остаётся для загрузчика игры (gl-*), на стартовом экране
   подписи больше нет. */
.loader-caption {
    margin-top: 9px; color: var(--muted); font-family: var(--font);
    font-size: 12.5px; font-weight: 400; letter-spacing: -0.02em;
}
.app-route-loader {
    position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
    background: rgba(1,4,13,.80); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease;
}
.app-route-loader.show { opacity: 1; visibility: visible; pointer-events: auto; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitSpinBack { to { transform: rotate(-360deg); } }
@keyframes logoFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.025); } }
@keyframes splashBreath { 0%,100% { transform: scale(.96); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } }

/* ===== Лидеры недели — заголовок сверху, мини-постер по центру ===== */
.weekly-picks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 0 0 20px; }
.weekly-card {
    position: relative; display: flex; flex-direction: column; align-items: center;
    min-height: 214px; padding: 18px 14px 16px; overflow: hidden; cursor: pointer;
    border: 1px solid rgba(255,255,255,.08); border-radius: 22px;
    background: radial-gradient(120% 80% at 50% 0%, #23232c 0%, #17171d 46%, #101015 100%);
    box-shadow: 0 16px 34px rgba(0,0,0,.4); font-family: inherit; color: #fff;
    transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.weekly-card:active { transform: scale(.975); border-color: rgba(255,255,255,.2); }
/* декоративные «горы» снизу как в референсе, но в нашем монохроме */
.weekly-deco {
    position: absolute; left: 0; right: 0; bottom: 0; height: 62px; z-index: 0;
    background:
        linear-gradient(135deg, transparent 42%, rgba(255,255,255,.05) 42%, rgba(255,255,255,.05) 56%, transparent 56%),
        linear-gradient(-135deg, transparent 42%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.04) 58%, transparent 58%);
    background-size: 120px 62px, 150px 62px; background-position: bottom left, bottom right; background-repeat: no-repeat;
    opacity: .8; pointer-events: none;
}
.weekly-title { position: relative; z-index: 2; color: #fff; font-size: 17px; font-weight: 900; letter-spacing: .2px; text-align: center; line-height: 1.15; }
.weekly-poster {
    position: relative; z-index: 2; width: 94px; height: 94px; margin: 14px 0 12px; flex: none;
    border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12);
    background: #0e0e12; box-shadow: 0 12px 26px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
}
.weekly-poster img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.1) brightness(1.08) contrast(1.03); }
.weekly-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.16), transparent 40%); pointer-events: none; }
.weekly-meta { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; margin-top: auto; }
.weekly-meta b { overflow: hidden; max-width: 100%; color: #fff; font-size: 15px; font-weight: 900; white-space: nowrap; text-overflow: ellipsis; }
.weekly-meta em { margin-top: 4px; color: #8f909b; font-size: 10px; font-style: normal; font-weight: 600; text-align: center; }

/* ===== Панель фильтра: квадрат поиска + сегмент All/Popular ===== */
/* Зазор совпадает с зазором между чипами: поиск читается как первая пилюля
   в том же ряду, а не как отдельно приставленный блок. */
.catalog-tools { position: relative; z-index: 18; display: flex; align-items: stretch; gap: 10px; margin-bottom: 26px; }
/* Квадрат поиска: та же высота и радиус, что у чипов — стоят в одну линию. */
.search-square {
    flex: none; width: 52px; height: 52px; display: grid; place-items: center;
    border: 1px solid rgba(230,237,255,.12); border-radius: 18px; background: #111111;
    color: rgba(230,237,255,.55); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.search-square:active, .search-square.active { color: var(--white); border-color: rgba(60,144,255,.45); background: #141c2b; }
/* Ряд чипов. Своей подложки у ряда НЕТ: по макету каждый чип — отдельная
   пилюля с собственной обводкой, а не элемент внутри общей тёмной коробки.
   Поэтому здесь только зазоры.

   overflow НЕ ставим: раньше тут был горизонтальный скролл под четыре чипа
   (Все игры / Популярное / Слоты / Мини-игры), но их заменили кнопкой выбора
   провайдера, и остался единственный чип «Все игры». При наведении он слегка
   увеличивается и светится (см. .catalog-seg:hover) — а overflow обрезал этот
   зум и свечение по левому краю контейнера, из-за чего кнопка «пряталась за
   барьер». Скроллить нечего, поэтому оставляем overflow: visible. */
.catalog-segments {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
/* Чип — самостоятельная пилюля с обводкой. */
.catalog-seg {
    flex: 0 0 auto;
    min-width: fit-content;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 7px; 
    height: 52px;
    padding: 0 22px;
    border: 1px solid rgba(230,237,255,.12);
    border-radius: 18px; 
    background: #111111; 
    color: rgba(230,237,255,.50); 
    font-family: var(--font);
    font-size: 14px; 
    font-weight: 500; 
    letter-spacing: -0.03em;
    cursor: pointer; 
    white-space: nowrap;
    transition: color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease),
                box-shadow .2s var(--ease), border-color .2s var(--ease);
}
/* Активный чип — акцентный градиент со свечением, как в макете. */
.catalog-seg.active {
    background: var(--brand-grad); color: var(--white); font-weight: 600;
    border-color: rgba(230,237,255,.20);
    box-shadow: var(--brand-glow);
}
/* Иконок в чипах по макету нет — только текст. Разметку не трогаем, чтобы не
   ломать обработчики фильтров, поэтому просто убираем иконки из потока. */
.seg-grid, .seg-icon { display: none; }
/* «Недавние» — та же логика подсветки, что у остальных сегментов: свой цвет
   иконки и подсветка в активном состоянии. */
#segRecent .seg-icon {
    color: #6ea8fe;
}
#segRecent.active .seg-icon {
    color: #8fc0ff;
    filter: drop-shadow(0 0 8px rgba(110, 168, 254, 0.5));
}
/* Пустая история недавних: подсказка вместо голой сетки. */
.catalog-empty {
    grid-column: 1 / -1;
    padding: 26px 18px;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: var(--radius);
    background: rgba(255,255,255,.02);
    color: var(--muted2);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}
#segPopular .seg-icon {
    color: #ff6b35;
}
#segPopular.active .seg-icon {
    color: #ff8c5a;
    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.5));
}
#segSlots .seg-icon {
    color: #7c3aed;
}
#segSlots.active .seg-icon {
    color: #9f7aea;
    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.5));
}
#segMini .seg-icon {
    color: #10b981;
}
#segMini.active .seg-icon {
    color: #34d399;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}
.search-panel {
    position: absolute; top: 60px; left: 0; right: 0; z-index: 30; padding: 10px;
    border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(20,20,26,.98);
    box-shadow: 0 22px 48px rgba(0,0,0,.6); backdrop-filter: blur(16px);
}
.search-panel input {
    width: 100%; height: 44px; padding: 0 14px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px; outline: none; background: #17171d; color: #fff; font: 600 13px/1 inherit; font-family: inherit; -webkit-appearance: none;
}
.search-panel input::placeholder { color: #70717b; }
.search-results { max-height: 300px; overflow-y: auto; }
.search-results:empty { display: none; }
.search-result { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: transparent; color: #fff; text-align: left; font-family: inherit; cursor: pointer; }
.search-result:active, .search-result.active { background: rgba(255,255,255,.08); }
.search-result img { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 11px; }
.search-result span { display: flex; flex-direction: column; min-width: 0; }
.search-result b { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.search-result small { margin-top: 3px; color: #868893; font-size: 10px; }
.search-empty { padding: 18px 12px; color: #858792; font-size: 12px; text-align: center; }

/* ===== Футер главной страницы ===== */
.vg-footer { margin: 40px -2px 6px; padding: 22px 18px; border: 1px solid rgba(230,237,255,.09); border-radius: 24px; background: #111111; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; border: 1px solid rgba(230,237,255,.13); }
.footer-word { color: #fff; font-size: 22px; font-weight: 900; letter-spacing: .3px; }
.footer-word b { color: #8f919b; font-weight: 900; }
.footer-rights { margin-top: 12px; color: #6c6e78; font-size: 11px; }
/* Иконки слева больше нет — текст стоит строго по центру, поэтому gap убран
   и добавлено justify-content. */
.footer-tg-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; padding: 12px 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: #1c1c23; color: #fff; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; text-align: center; }
.footer-tg-btn:active { background: #24242d; }
.footer-tg-btn .ic { width: 17px; height: 17px; }
.footer-divider { height: 1px; margin: 20px 0; background: rgba(255,255,255,.07); }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; }
.footer-col h4 { margin: 0 0 12px; color: #fff; font-size: 14px; font-weight: 800; }
.footer-col button { display: block; width: 100%; margin-bottom: 11px; padding: 0; border: 0; background: none; color: #83858f; font-family: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: color .18s var(--ease); }
.footer-col button:last-child { margin-bottom: 0; }
.footer-col button:active { color: #fff; }
.footer-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-pill { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: #17171d; color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.pay-pill:active { background: #20202a; }
.pay-pill i { font-size: 20px; font-style: normal; }
.pay-ic { width: 30px; height: 30px; flex: none; object-fit: cover; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); }
.method-ic { width: 22px; height: 22px; flex: none; object-fit: cover; border-radius: 6px; margin-right: 8px; vertical-align: middle; border: 1px solid rgba(255,255,255,.1); }
.footer-support-card {
    position: relative; overflow: hidden; margin-top: 20px; padding: 20px; border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px; background: linear-gradient(135deg,#20202a 0%,#141419 70%);
}
.fsc-deco { position: absolute; right: -18px; bottom: -22px; width: 128px; height: 128px; object-fit: cover; border-radius: 50%; opacity: .12; filter: grayscale(1); transform: rotate(-8deg); pointer-events: none; }
.fsc-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.fsc-head b { color: #fff; font-size: 21px; font-weight: 900; }
.fsc-badge { display: inline-grid; place-items: center; height: 26px; padding: 0 12px; border-radius: 20px; background: #f2f2f4; color: #111116; font-size: 13px; font-weight: 900; }
.fsc-write { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 18px 11px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 14px; font-weight: 800; }
.fsc-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(255,255,255,.1); font-size: 15px; }

.settings-premium-row {
    display: flex; align-items: center; width: 100%; min-height: 68px; margin: 10px 0; padding: 11px 14px;
    border: 1px solid rgba(230,237,255,.10); border-radius: 16px; background: #111111;
    box-shadow: var(--glow); color: var(--white); text-align: left; font-family: var(--font); cursor: pointer;
}
.settings-row-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: none; border: 1px solid rgba(230,237,255,.14); border-radius: 12px; background: rgba(230,237,255,.05); color: var(--white); font-size: 16px; font-weight: 600; }
/* Строка «Язык приложения»: вместо иероглифа 文 в подложке лежит готовый значок
   глобуса (images/язык.png). font-size: 0 гасит перенос строки внутри grid-ячейки,
   иначе картинка вставала бы не по центру подложки. */
.settings-row-icon.lang-ic { font-size: 0; line-height: 0; overflow: hidden; }
.settings-row-icon.lang-ic img {
    width: 64%; height: 64%; max-width: 26px; max-height: 26px;
    object-fit: contain; transition: transform .18s var(--ease), filter .18s var(--ease);
}
.settings-premium-row:hover .lang-ic img {
    transform: scale(1.12);
    filter: drop-shadow(0 3px 7px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(60,144,255,.7));
}
@media (prefers-reduced-motion: reduce) {
    .settings-premium-row:hover .lang-ic img { transform: none; }
}
.settings-row-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; margin-left: 12px; }
.settings-row-copy b { color: var(--white); font-size: 14px; font-weight: 600; letter-spacing: -0.03em; }
.settings-row-copy small { margin-top: 4px; color: var(--muted2); font-size: 10px; font-weight: 400; letter-spacing: -0.02em; }
.language-current { display: flex; align-items: center; gap: 10px; }
.lang-badge {
    display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px;
    border: 1px solid rgba(230,237,255,.18); border-radius: 9px; background: rgba(230,237,255,.05);
    color: var(--white); font-size: 11px; font-weight: 600; letter-spacing: .05em;
}
.lang-badge.lg { min-width: 44px; height: 42px; margin-right: 12px; border-radius: 12px; font-size: 14px; }
.language-current strong, .settings-row-arrow { color: rgba(230,237,255,.45); font-size: 23px; font-weight: 400; }
.sound-settings-row { min-height: 62px; margin-top: 10px; }
.support-settings-row { margin-bottom: 0; }
/* Строки настроек кликабельны, поэтому реагируют так же, как карточки. */
.settings-premium-row { transition: border-color .18s var(--ease), background .18s var(--ease), transform .15s var(--ease); }
.settings-premium-row:hover { border-color: rgba(60,144,255,.38); }
.settings-premium-row:active { transform: scale(.99); background: rgba(60,144,255,.08); }

.info-modal, .language-modal { max-height: min(82vh,680px); overflow-y: auto; text-align: left; }
.info-modal h2, .language-modal h2 { text-align: left; }
.info-modal .vm-sub { line-height: 1.6; text-align: left; }
.info-list { display: flex; flex-direction: column; gap: 8px; margin: 15px 0 20px; }
.info-list-item { padding: 11px 12px; border: 1px solid rgba(230,237,255,.10); border-radius: 12px; background: rgba(230,237,255,.04); }
.info-list-item b { display: block; color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: -0.03em; }
.info-list-item span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.info-modal-close { width: 100%; min-height: 47px; border: 2px solid rgba(230,237,255,.20); border-radius: 13px; background: var(--brand-grad); color: var(--white); font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: -0.03em; box-shadow: var(--brand-glow); cursor: pointer; }
.language-options { display: flex; flex-direction: column; gap: 9px; margin: 17px 0; }
.language-option { display: flex; align-items: center; width: 100%; padding: 13px; border: 1px solid rgba(230,237,255,.10); border-radius: 14px; background: rgba(230,237,255,.04); color: var(--white); font-family: var(--font); letter-spacing: -0.03em; text-align: left; cursor: pointer; }
/* Выбранный язык — акцентный градиент, как активные чипы каталога. */
.language-option.active { border-color: rgba(230,237,255,.20); background: var(--brand-grad); box-shadow: var(--brand-glow); }
.language-option .flag { margin-right: 12px; font-size: 25px; }
.language-option .lang-flag { display: grid; place-items: center; width: 44px; height: 44px; margin-right: 13px; flex: none; border-radius: 50%; overflow: hidden; background: rgba(1,4,13,.55); border: 1px solid rgba(230,237,255,.14); font-size: 24px; line-height: 1; }
.language-option .check { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; background: rgba(230,237,255,.16); color: var(--white); font-size: 14px; opacity: 0; }
.language-option.active .check { opacity: 1; }
.language-option .lang-copy { display: flex; flex: 1; flex-direction: column; }
.language-option .lang-copy b { font-size: 14px; font-weight: 600; letter-spacing: -0.03em; }
.language-option .lang-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.language-option.active .lang-copy small { color: rgba(230,237,255,.72); }
.language-option .check { color: var(--white); font-size: 18px; opacity: 0; }
.language-option.active .check { opacity: 1; }

@media (max-width: 360px) {
    .weekly-picks { gap: 8px; }
    .weekly-card { height: 124px; border-radius: 16px; }
    .weekly-copy { left: 10px; right: 25px; bottom: 9px; }
    .weekly-copy b { font-size: 14px; }
    .catalog-pill { padding: 0 13px; }
    .catalog-search.open { width: calc(100vw - 121px); }
    .vg-footer { padding: 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .loader-orbit, .loader-logo { animation-duration: 5s !important; }
}

/* ===== Приветственный бонус на первый депозит ===== */
.welcome-bonus {
    position: relative; overflow: hidden; margin-bottom: 16px; padding: 22px 20px 20px;
    border: 1px solid rgba(230,237,255,.12); border-radius: 22px;
    background: #111111;
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
/* Подсветка угла — акцентным синим вместо белого пятна. */
.wb-glow { position: absolute; top: -60px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(60,144,255,.22), transparent 70%); pointer-events: none; }
.wb-head { position: relative; z-index: 2; }
.wb-title { color: var(--white); font-size: 21px; font-weight: 600; letter-spacing: -0.03em; }
.wb-sub { margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.45; max-width: 88%; letter-spacing: -0.02em; }
/* Процент — акцентным градиентом, а не белой плашкой. */
.wb-percent {
    position: relative; z-index: 2; display: inline-block; margin: 16px 0 4px; padding: 6px 18px;
    border-radius: 14px; background: var(--brand-grad); color: var(--white);
    font-size: 26px; font-weight: 600; letter-spacing: -0.03em;
    border: 2px solid rgba(230,237,255,.20); box-shadow: var(--brand-glow);
}
.wb-steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 18px 0 20px; }
.wb-steps::before { content: ""; position: absolute; top: 21px; left: 12%; right: 12%; height: 2px; background: rgba(230,237,255,.10); }
.wb-step { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wb-dot {
    position: relative; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: rgba(230,237,255,.05); border: 1px solid rgba(230,237,255,.12);
}
.wb-step.done .wb-dot { border-color: rgba(60,144,255,.55); background: rgba(60,144,255,.14); box-shadow: 0 0 0 4px rgba(60,144,255,.10), 0 6px 16px rgba(0,0,0,.45); }
.wb-dot img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.wb-dot i { font-size: 15px; font-style: normal; opacity: .6; }
.wb-step-val { color: var(--muted); font-size: 11px; font-weight: 500; text-align: center; letter-spacing: -0.02em; }
.wb-step.done .wb-step-val { color: var(--white); font-weight: 600; }
.wb-actions { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; }
.wb-btn { height: 52px; border-radius: 15px; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -0.03em; cursor: pointer; transition: transform .15s var(--ease), background .2s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease); }
.wb-btn:active { transform: scale(.97); }
.wb-details { border: 1px solid rgba(230,237,255,.14); background: rgba(230,237,255,.04); color: var(--white); }
.wb-details:active { background: rgba(60,144,255,.12); }
/* Основное действие — градиент со свечением, как «Пополнить» в шапке. */
.wb-use { border: 2px solid rgba(230,237,255,.20); background: var(--brand-grad); color: var(--white); box-shadow: var(--brand-glow); }
.wb-use:active { filter: brightness(.95); }

/* ===== Буква-заглушка аватара ===== */
.avatar-letter {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(120% 120% at 30% 20%, #2f2f39, #16161c);
    color: #eceef4; font-weight: 900; font-size: 20px; letter-spacing: .5px;
    border: 1px solid rgba(255,255,255,.12);
}
#pAvatar .avatar-letter { font-size: 30px; }

/* ===== Экран-превью игры (Play / Demo / избранное) ===== */
.play-preview { max-width: 340px; padding: 22px 20px 20px; text-align: center; }
.pp-fav {
    position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.05);
    color: #6f717b; font-size: 20px; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease);
}
.pp-fav.on { color: #ff6b81; background: rgba(255,107,129,.12); border-color: rgba(255,107,129,.4); }
.pp-poster {
    width: 132px; height: 132px; margin: 4px auto 16px; border-radius: 20px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 32px rgba(0,0,0,.55);
}
.pp-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-name { color: #fff; font-size: 22px; font-weight: 900; letter-spacing: -.2px; }
.pp-provider { margin-top: 5px; color: #8f909b; font-size: 13px; font-weight: 600; }
.pp-actions { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; margin-top: 20px; }
.pp-btn { height: 54px; border-radius: 15px; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: transform .15s var(--ease), filter .2s var(--ease), background .2s var(--ease); }
.pp-btn:active { transform: scale(.97); }
.pp-play { border: none; background: linear-gradient(135deg,#f2f2f5,#c2c2cc); color: #14141a; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.pp-play:active { filter: brightness(.95); }
.pp-demo { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #dfe0e6; }
.pp-demo:active { background: rgba(255,255,255,.1); }

/* ===== Сегмент-табы (Big wins / Best today, Последние / Мои) ===== */
.seg-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: #141419; }
.seg-tab { padding: 0 16px; height: 40px; border: 0; border-radius: 11px; background: transparent; color: #8b8c96; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease); }
.seg-tab.active { background: linear-gradient(180deg,#2b2b34,#212129); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06); }

/* ===== Подиум лидеров ===== */
.leaders-block { margin: 34px 0 8px; }
.leaders-block .seg-tabs { margin-bottom: 16px; }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 10px; padding: 16px 12px 0; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; background: radial-gradient(120% 90% at 50% 0%, #1c1c24, #101014 70%); }
.pod-col { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; width: 100%; }
.pod-ava { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #20202a; display: grid; place-items: center; }
.pod-col.first .pod-ava { width: 64px; height: 64px; border-color: rgba(255,215,120,.6); box-shadow: 0 0 18px rgba(255,205,90,.25); }
.pod-ava img { width: 100%; height: 100%; object-fit: cover; }
.pod-ava .avatar-letter { font-size: 22px; }
.pod-name { margin-top: 7px; max-width: 100%; overflow: hidden; color: #cfd0d7; font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.pod-win { margin-top: 4px; color: #fff; font-size: 16px; font-weight: 900; }
.pod-mult { margin-top: 4px; padding: 2px 9px; border-radius: 8px; background: rgba(255,255,255,.06); color: #9a9ba5; font-size: 11px; font-weight: 800; }
.pod-stand { position: relative; width: 100%; margin-top: 10px; display: grid; place-items: center; border-radius: 12px 12px 0 0; background: linear-gradient(180deg,#2a2a34,#191920); border: 1px solid rgba(255,255,255,.06); border-bottom: 0; color: #fff; font-weight: 900; font-size: 26px; }
.pod-col.first .pod-stand { height: 96px; }
.pod-col.second .pod-stand { height: 74px; }
.pod-col.third .pod-stand { height: 58px; }
.pod-col.first .pod-stand { color: #ffcf5a; }
.pod-col.second .pod-stand { color: #c9cbd6; }
.pod-col.third .pod-stand { color: #e0885f; }
.pod-stand::before { content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 4px; border-radius: 3px; background: currentColor; opacity: .85; }
.pod-empty { grid-column: 1 / -1; padding: 26px 12px; color: #7f818c; font-size: 13px; text-align: center; }

/* ===== Таблица ставок ===== */
.bets-block { margin: 30px 0 8px; }
.bets-block .section-title { margin-bottom: 14px; }
.bets-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bets-count { position: relative; }
.bets-count-btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: #17171d; color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.bets-count-btn i { font-style: normal; color: #8f909b; }
.bets-count-menu { position: absolute; top: 56px; right: 0; z-index: 30; width: 96px; padding: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(20,20,26,.98); box-shadow: 0 18px 40px rgba(0,0,0,.55); backdrop-filter: blur(14px); }
.bets-count-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: #cfd0d7; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.bets-count-opt:active, .bets-count-opt.active { background: rgba(255,255,255,.08); color: #fff; }
.bets-count-opt .radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #565863; flex: none; display: grid; place-items: center; }
.bets-count-opt.active .radio { border-color: #fff; }
.bets-count-opt.active .radio::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.bets-head { display: flex; justify-content: space-between; padding: 0 14px 8px; color: #7f818c; font-size: 12px; font-weight: 800; }
.bets-list { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.06); border-radius: 16px; overflow: hidden; background: #131318; }
.bet-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.045); }
.bet-row:last-child { border-bottom: 0; }
.bet-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; background: #20202a; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); }
.bet-ic img { width: 100%; height: 100%; object-fit: cover; }
.bet-ic .avatar-letter { font-size: 14px; }
.bet-game { flex: 1; min-width: 0; overflow: hidden; color: #eceef4; font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.bet-pay { color: #57c983; font-size: 14px; font-weight: 800; white-space: nowrap; }
.bets-empty { padding: 22px 12px; color: #7f818c; font-size: 13px; text-align: center; }

/* ===== Профиль: редактирование ника и аватара ===== */
.p-avatar-wrap { position: relative; flex: none; }
/* Кнопка смены аватара сидит на самом фото, поэтому она акцентная — на любой
   картинке её видно, в отличие от полупрозрачной плашки. */
.p-avatar-edit { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid #01040D; border-radius: 50%; background: var(--brand-grad); color: var(--white); cursor: pointer; box-shadow: 0 0 14px rgba(1,82,255,.45); }
.p-name-row { display: flex; align-items: center; gap: 8px; }
.p-name-edit { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(230,237,255,.16); border-radius: 8px; background: rgba(230,237,255,.05); color: rgba(230,237,255,.7); cursor: pointer; flex: none; }
.p-name-edit:active { background: rgba(60,144,255,.16); color: var(--white); }

/* ===== Модалка смены ника ===== */
.nick-modal input { width: 100%; height: 50px; margin: 6px 0 16px; padding: 0 14px; border: 1px solid rgba(230,237,255,.14); border-radius: 13px; outline: none; background: #01040D; color: var(--white); font-family: var(--font); font-size: 16px; font-weight: 600; letter-spacing: -0.03em; text-align: center; -webkit-appearance: none; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.nick-modal input:focus { border-color: rgba(60,144,255,.55); box-shadow: 0 0 0 3px rgba(1,82,255,.16); }
.nick-modal .nick-hint { color: var(--muted); font-size: 11px; margin-bottom: 14px; }

/* ===== Хаб игры: превью-карточка + своя статистика ===== */
#tab-gamehub { padding-top: 6px; }
.hub-back { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: #17171d; color: #cfd0d7; cursor: pointer; }
.hub-back:active { background: #20202a; }
.hub-card { position: relative; display: flex; gap: 16px; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: radial-gradient(120% 120% at 12% 0%, #23232c, #16161c 60%, #101015 100%); box-shadow: 0 16px 34px rgba(0,0,0,.4); }
.hub-fav { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.05); color: #6f717b; font-size: 20px; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease); }
.hub-fav.on { color: #ff6b81; background: rgba(255,107,129,.12); border-color: rgba(255,107,129,.4); }
.hub-poster { width: 108px; height: 108px; flex: none; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 24px rgba(0,0,0,.5); background: #0e0e12; }
.hub-poster img { width: 100%; height: 100%; object-fit: cover; }
.hub-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hub-name { color: #fff; font-size: 21px; font-weight: 900; letter-spacing: -.2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hub-provider { margin-top: 4px; color: #8f909b; font-size: 13px; font-weight: 600; }
.hub-actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; margin-top: auto; padding-top: 16px; }
.hub-actions .pp-btn { height: 48px; }
#tab-gamehub .leaders-block { margin-top: 26px; }

/* ============================================================
   SLOT MOTION LIFECYCLE 2026 — transform/opacity only
   ============================================================ */
.slot-grid.spin-collapse .slot-symbol {
    animation: slotSymbolCollapse var(--collapse-dur, 145ms) cubic-bezier(.4,0,.8,.25) both !important;
    will-change: transform, opacity;
}
@keyframes slotSymbolCollapse {
    0% { transform: translate3d(0,0,0) scale(1); opacity: 1; }
    100% { transform: translate3d(0,22%,0) scale(.72,.28); opacity: 0; }
}
.reel-strip,
.slot-column.reel-stop .slot-symbol,
.slot-screen .slot-cell.dropping .slot-symbol,
.slot-cell.sym-shake .slot-symbol,
.slot-cell.sym-burst .slot-symbol { will-change: transform, opacity; }
.slot-column.reel-stop .slot-symbol {
    animation-timing-function: cubic-bezier(.18,1.2,.32,1);
}
@keyframes reelStop {
    0% { transform: translate3d(0,-42%,0) scaleY(1.04); opacity: .72; filter: blur(.8px); }
    48% { transform: translate3d(0,9%,0) scaleY(.93); opacity: 1; filter: blur(0); }
    72% { transform: translate3d(0,-3.5%,0) scaleY(1.025); }
    100% { transform: translate3d(0,0,0) scale(1); opacity: 1; }
}
@keyframes cellDrop {
    0% { transform: translate3d(0,-118%,0) scale(.86,1.06); opacity: 0; }
    54% { transform: translate3d(0,5%,0) scale(1.07,.91); opacity: 1; }
    72% { transform: translate3d(0,-4%,0) scale(.96,1.05); }
    88% { transform: translate3d(0,1.5%,0) scale(1.01,.99); }
    100% { transform: translate3d(0,0,0) scale(1); opacity: 1; }
}

/* Idle effects apply only to symbol metadata that actually marks a feature. */
.slot-cell:not(.scatter-trigger) .sym-scatter,
.slot-cell:not(.scatter-trigger) .sym-bonus {
    animation: slotScatterIdle 1.9s ease-in-out infinite;
}
.slot-cell .sym-multiplier { animation: slotMultiplierIdle 1.65s ease-in-out infinite; }
.reel-strip .sym-scatter, .reel-strip .sym-bonus, .reel-strip .sym-multiplier { animation: none; }
@keyframes slotScatterIdle {
    0%,100% { transform: scale(1.08); filter: brightness(1) drop-shadow(0 0 7px var(--slot-glow)); }
    50% { transform: scale(1.13); filter: brightness(1.16) drop-shadow(0 0 15px var(--slot-glow)); }
}
@keyframes slotMultiplierIdle {
    0%,100% { transform: scale(1.08) rotate(-1deg); }
    50% { transform: scale(1.14) rotate(1deg); filter: brightness(1.16) drop-shadow(0 0 12px var(--slot-glow)); }
}
.slot-cell.scatter-trigger { z-index: 8; }
.slot-cell.scatter-trigger .sym-scatter,
.slot-cell.scatter-trigger .sym-bonus {
    animation: scatterTriggerBurst .62s cubic-bezier(.2,1.25,.35,1) both !important;
}
@keyframes scatterTriggerBurst {
    0%,100% { transform: scale(1.08); filter: brightness(1) drop-shadow(0 0 8px var(--slot-glow)); }
    38% { transform: scale(1.42) rotate(-3deg); filter: brightness(1.9) drop-shadow(0 0 30px #fff) drop-shadow(0 0 26px var(--slot-glow)); }
    68% { transform: scale(1.2) rotate(2deg); filter: brightness(1.45) drop-shadow(0 0 20px var(--slot-glow)); }
}
.slot-grid.fs-mode { animation: fsGridBreath 3.4s ease-in-out infinite; }
@keyframes fsGridBreath { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.075) saturate(1.06); } }
.slot-fs-banner { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.slot-fs-banner.updating { transform: scale(1.035); }
.slot-fs-banner.last-spin {
    border-color: #fff3a3;
    box-shadow: 0 0 24px var(--slot-glow);
    animation: fsLastSpin .72s ease-in-out infinite;
}
.slot-fs-banner.last-spin .fs-title { color: #fff3a3; }
@keyframes fsLastSpin { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* Small wins stay compact below the reels; big tiers own the viewport briefly. */
.slot-win-popup .slot-win-content { position: relative; z-index: 3; text-align: center; }
.slot-win-popup.compact-win {
    top: auto; bottom: max(18%, 118px); left: 50%;
    width: min(88vw, 360px); padding: 13px 20px;
    transform: translate3d(-50%,18px,0) scale(.9); border-width: 1px; border-radius: 18px;
    background: rgba(10,10,15,.92); backdrop-filter: blur(10px);
    transition: transform .22s cubic-bezier(.2,1.2,.3,1), opacity .18s ease;
}
.slot-win-popup.compact-win.show { transform: translate3d(-50%,0,0) scale(1); animation: none; }
.slot-win-popup.compact-win .slot-win-label { font-size: 11px; letter-spacing: 2px; opacity: .78; }
.slot-win-popup.compact-win .slot-win-amount { margin: 3px 0 0; font-size: clamp(24px,7vw,36px); }
.slot-win-popup.compact-win.has-plaque {
    top: auto !important; bottom: max(12%, 82px); left: 50%; right: auto; width: min(78vw,340px); height: auto;
    transform: translate3d(-50%,16px,0) scale(.88); display: block !important;
}
.slot-win-popup.compact-win.has-plaque.show { transform: translate3d(-50%,0,0) scale(1); }
.slot-win-popup.compact-win .slot-win-plaque { width: min(76vw,340px); }

.slot-win-popup.rich-win {
    inset: 0; width: auto; height: auto; padding: 22px;
    display: grid !important; place-items: center;
    transform: scale(.96); border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
    overflow: hidden; transition: opacity .22s ease, transform .28s cubic-bezier(.2,1.12,.3,1);
}
.slot-win-popup.rich-win.show { transform: scale(1); animation: none; }
.win-dim { position: absolute; inset: 0; z-index: 0; background: rgba(3,3,8,.76); backdrop-filter: blur(2px); }
.win-rays {
    position: absolute; left: 50%; top: 50%; z-index: 1; width: min(130vw,760px); aspect-ratio: 1;
    transform: translate(-50%,-50%); opacity: .48;
    background: repeating-conic-gradient(from 0deg, transparent 0 10deg, color-mix(in srgb,var(--slot-accent,#ffd24b) 38%,transparent) 11deg 15deg, transparent 16deg 27deg);
    -webkit-mask: radial-gradient(circle, #000 0 12%, transparent 64%); mask: radial-gradient(circle, #000 0 12%, transparent 64%);
    animation: winRaysTurn 9s linear infinite;
}
.slot-win-popup.mega .win-rays { opacity: .72; animation-duration: 5.5s; }
@keyframes winRaysTurn { to { transform: translate(-50%,-50%) rotate(360deg); } }
.slot-win-popup.rich-win .slot-win-label {
    font-size: clamp(24px,8vw,48px); font-weight: 900; letter-spacing: 2px;
    color: #fff; text-shadow: 0 4px 12px #000,0 0 28px var(--slot-glow);
    animation: richWinTitle .52s cubic-bezier(.16,1.4,.3,1) both;
}
.slot-win-popup.mega .slot-win-label { font-size: clamp(31px,10vw,62px); color: #fff3b0; }
.slot-win-popup.rich-win .slot-win-amount { margin-top: 12px; font-size: clamp(38px,12vw,74px); }
.slot-win-summary-sub { margin-top: 9px; color: rgba(255,255,255,.76); font-size: 13px; font-weight: 800; letter-spacing: 1.4px; }
@keyframes richWinTitle { from { transform: scale(.42); opacity: 0; } 68% { transform: scale(1.1); opacity: 1; } to { transform: scale(1); opacity: 1; } }
.win-coins { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.win-coins i {
    position: absolute; left: var(--coin-x); top: -9%; width: 13px; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 35% 32%,#fff8b8 0 10%,#ffd24b 24%,#b56b12 72%);
    box-shadow: 0 0 7px rgba(255,210,75,.6);
    animation: winCoinFall 1.7s cubic-bezier(.25,.55,.45,1) calc(var(--coin-i) * -73ms) infinite;
}
@keyframes winCoinFall { from { transform: translate3d(0,-10vh,0) rotateY(0); } to { transform: translate3d(var(--coin-dx),115vh,0) rotateY(720deg); } }
.slot-win-popup.fs-summary .win-dim { background: radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--slot-accent) 18%,#08070d),rgba(3,3,8,.88) 64%); }

/* PNG controls compress in place; grid geometry never shifts on press. */
.slot-screen .slot-step-btn:active,
.slot-screen .slot-spin-art:active,
.slot-screen .slot-action-art:active,
.slot-screen .slot-bet-art:active { transform: scale(.93); transform-origin: center; }
.slot-screen .slot-step-btn,
.slot-screen .slot-spin-art,
.slot-screen .slot-action-art,
.slot-screen .slot-bet-art { transition: transform .1s ease, filter .14s ease; }

@media (prefers-reduced-motion: reduce) {
    .slot-grid.spin-collapse .slot-symbol,
    .slot-column.reel-stop .slot-symbol,
    .slot-screen .slot-cell.dropping .slot-symbol,
    .slot-cell.sym-shake .slot-symbol,
    .slot-cell.sym-burst .slot-symbol,
    .slot-cell .sym-scatter,
    .slot-cell .sym-bonus,
    .slot-cell .sym-multiplier,
    .slot-grid.fs-mode,
    .slot-fs-banner,
    .win-rays,
    .win-coins i { animation-duration: .08s !important; animation-iteration-count: 1 !important; }
    .reel-strip { filter: none; animation-duration: .18s !important; }
    .win-coins, .win-rays { display: none !important; }
    .slot-win-popup, .vg-modal, .vg-modal-card { transition-duration: .08s !important; }
}

/* ===== Authoritative slot feature overlays ===== */
.slot-screen .slot-cell.dropping { animation: none !important; }
.wild-mult-fallback { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.wild-mult-fallback > .sym-img, .wild-mult-fallback > svg { width: 100%; height: 100%; }
.wild-mult-badge {
    position: absolute; right: 2%; bottom: 4%; min-width: 1.65em; padding: .08em .28em;
    border: 1px solid var(--slot-accent, #ddd); border-radius: 999px; background: rgba(8,8,12,.9);
    color: #fff; font: 900 clamp(9px,2.8vw,16px)/1.25 var(--slot-font, sans-serif); text-align: center;
    box-shadow: 0 0 12px var(--slot-glow, rgba(255,255,255,.35)); transform: translateZ(0);
}
.slot-feature-overlay {
    position: fixed; z-index: 5010; inset: clamp(72px,12vh,120px) 12px clamp(145px,22vh,210px);
    display: grid; place-items: center; pointer-events: none; opacity: 0; transform: scale(.96) translateY(12px);
    transition: opacity .2s ease, transform .28s cubic-bezier(.2,1.15,.3,1);
}
.slot-feature-overlay.show { opacity: 1; transform: scale(1) translateY(0); }
.slot-feature-card {
    width: min(92vw,460px); max-height: 100%; overflow: auto; padding: clamp(16px,4vw,26px);
    color: #fff; text-align: center; border: 1px solid var(--slot-accent, #ddd); border-radius: 22px;
    background: linear-gradient(145deg,rgba(8,8,12,.97),rgba(25,25,31,.96));
    box-shadow: 0 0 32px var(--slot-glow,rgba(255,255,255,.3));
}
.feature-kicker { color: var(--slot-accent,#ddd); font: 900 clamp(20px,6vw,34px)/1 var(--slot-font,sans-serif); letter-spacing: .08em; }
.feature-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 18px 0 14px; }
.feature-value {
    min-width: 46px; padding: 8px 9px; border: 1px solid color-mix(in srgb,var(--slot-accent,#ddd) 55%,transparent);
    border-radius: 10px; background: rgba(255,255,255,.055); font-weight: 900; animation: featureValueIn .24s ease both;
}
.feature-value.new { color: var(--slot-accent,#fff); box-shadow: 0 0 14px var(--slot-glow); }
.feature-status { color: rgba(255,255,255,.72); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.feature-total { margin-top: 10px; font-size: clamp(18px,5vw,28px); font-weight: 900; }
.feature-extra { margin-top: 12px; color: var(--slot-accent,#fff); font-weight: 900; }
.slot-feature-overlay.complete .slot-feature-card { transform: scale(1.025); }
.slot-retrigger-notice {
    position: fixed; z-index: 5020; left: 50%; top: 24%; display: flex; flex-direction: column; align-items: center;
    padding: 12px 22px; border: 1px solid var(--slot-accent,#ddd); border-radius: 16px; background: rgba(8,8,12,.94);
    color: #fff; opacity: 0; transform: translate(-50%,18px) scale(.86); transition: opacity .18s ease,transform .24s ease;
    box-shadow: 0 0 24px var(--slot-glow); pointer-events: none;
}
.slot-retrigger-notice.show { opacity: 1; transform: translate(-50%,0) scale(1); }
.slot-retrigger-notice b { color: var(--slot-accent,#fff); font-size: clamp(28px,9vw,48px); line-height: 1; }
.slot-retrigger-notice span { margin-top: 5px; font-size: 11px; font-weight: 900; letter-spacing: .11em; white-space: nowrap; }
@keyframes featureValueIn { from { opacity: 0; transform: translateY(-8px) scale(.88); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-height: 620px) { .slot-feature-overlay { inset: 58px 8px 118px; } .slot-feature-card { padding: 12px; } .feature-grid { margin: 10px 0; } }
@media (prefers-reduced-motion: reduce) {
    .slot-feature-overlay, .slot-retrigger-notice, .slot-feature-card { transition-duration: .08s !important; }
    .feature-value { animation-duration: .08s !important; }
}

/* ===== FINAL: crisp Bonus button + perfectly centered designer win plaques ===== */
.slot-screen .slot-actions-art .slot-bonus-art {
    /* Чуть меньше нативных 157px: запас по резкости на экранах с DPR 3 и
       воздух по бокам. Ниже — не опускаться, иначе текст на плашке замылится. */
    width: min(38vw, 140px) !important;
    max-width: 140px !important;
    min-width: 0;
    aspect-ratio: 157 / 46;
    justify-self: center;
}
.slot-screen .slot-actions-art .slot-bonus-art > img {
    width: 100%; height: 100%; object-fit: contain;
    image-rendering: auto;
}

/* Кнопки ± тоже уменьшаем: их PNG всего 63×38, а колонка растягивала их до
   102px — это 1.6× вверх от нативного размера, отсюда и мыло. 86px дают 1.37×,
   на глаз кнопка та же, а края заметно чище.
   object-fit: contain вместо fill из общего слоя: пропорции не поплывут ни при
   какой ширине колонки, даже если размеры PNG однажды поменяют. */
.slot-primary-controls {
    grid-template-columns: clamp(64px, 19vw, 86px) clamp(124px, 35vw, 154px) clamp(64px, 19vw, 86px);
}
.slot-screen .slot-primary-controls .slot-step-btn > img {
    object-fit: contain;
}
/* Подпись стала длиннее («BONUSBOOST +89%» против «Ante +89%»), поэтому шрифт
   чуть мельче, перенос запрещён, а боковые поля резервируют место под значок
   «i»: текст отцентрован и не должен наезжать на него на узких экранах. */
.slot-action-ante {
    padding-inline: clamp(28px, 8vw, 42px);
    font-size: clamp(14px, 4vw, 19px);
    white-space: nowrap;
}

/* WIN, BIG WIN and MEGA WIN now use one viewport-centered coordinate system. */
.slot-win-popup.compact-win.has-plaque,
.slot-win-popup.rich-win.has-plaque {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: clamp(10px, 4vw, 22px) !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box;
    overflow: hidden;
    transform: scale(.94) !important;
    transform-origin: 50% 50%;
    animation: none !important;
}
.slot-win-popup.compact-win.has-plaque.show,
.slot-win-popup.rich-win.has-plaque.show {
    transform: scale(1) !important;
    animation: none !important;
}
.slot-win-popup.has-plaque .slot-win-content {
    --plaque-optical-y: -8px;
    width: 100%;
    display: grid;
    place-items: center;
    transform: translate3d(0, var(--plaque-optical-y), 0);
}
.slot-win-popup.has-plaque .plaque-wrap { max-width: 100%; }
.slot-win-popup.has-plaque .slot-win-plaque { width: min(82vw, 430px); max-width: 100%; }
.slot-win-popup.has-plaque[data-slot="sugar-rush"] .slot-win-plaque { width: min(84vw, 440px); }

/* Optical Y calibration from the visible (non-transparent) artwork, not PNG canvas. */
.slot-win-popup.has-plaque[data-slot="sweet-bonanza"].win .slot-win-content { --plaque-optical-y: -9px; }
.slot-win-popup.has-plaque[data-slot="sweet-bonanza"].big .slot-win-content { --plaque-optical-y: -5px; }
.slot-win-popup.has-plaque[data-slot="sweet-bonanza"].mega .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="sugar-rush"].win .slot-win-content { --plaque-optical-y: -8px; }
.slot-win-popup.has-plaque[data-slot="sugar-rush"].big .slot-win-content { --plaque-optical-y: -11px; }
.slot-win-popup.has-plaque[data-slot="sugar-rush"].mega .slot-win-content { --plaque-optical-y: -10px; }
.slot-win-popup.has-plaque[data-slot="wild-west-gold"].win .slot-win-content { --plaque-optical-y: -2px; }
.slot-win-popup.has-plaque[data-slot="wild-west-gold"].big .slot-win-content { --plaque-optical-y: -12px; }
.slot-win-popup.has-plaque[data-slot="wild-west-gold"].mega .slot-win-content { --plaque-optical-y: -10px; }

/* Keep premium motion without tilting or pushing a centered plaque off-axis. */
.slot-win-popup.has-plaque.big.show .plaque-wrap {
    animation: plaqueCenteredFloat 1.6s ease-in-out .5s infinite;
}
.slot-win-popup.has-plaque.mega.show .plaque-wrap {
    animation: plaqueCenteredMega 1.2s ease-in-out .5s infinite;
}
@keyframes plaqueCenteredFloat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}
@keyframes plaqueCenteredMega {
    0%, 100% { transform: scale(1.02); filter: drop-shadow(0 10px 26px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(255,196,60,.7)); }
    50% { transform: scale(1.065); filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(255,196,60,.95)); }
}

@media (max-width: 360px) {
    .slot-screen .slot-actions-art .slot-bonus-art {
        width: min(40vw, 134px) !important;
        max-width: 134px !important;
    }
    /* Повторяем здесь: правило выше идёт позже в файле и иначе перебило бы
       узкий раскрой (медиазапрос не добавляет веса селектору). */
    .slot-primary-controls {
        grid-template-columns: minmax(60px, 19vw) minmax(112px, 35vw) minmax(60px, 19vw);
    }
    .slot-action-ante { padding-inline: 26px; font-size: 14px; }
    .slot-win-popup.has-plaque .slot-win-plaque { width: min(80vw, 420px); }
    .slot-win-popup.has-plaque[data-slot="sugar-rush"] .slot-win-plaque { width: min(82vw, 430px); }
}

/* ===== Брендированный загрузчик игры (~7с) ===== */
.game-loader {
    position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 50% 40%, rgba(60,144,255,.20), transparent 32%),
        radial-gradient(circle at 20% 12%, rgba(60,144,255,.07), transparent 34%),
        #01040D;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}
.game-loader.show { opacity: 1; visibility: visible; pointer-events: auto; }
.gl-inner { display: flex; flex-direction: column; align-items: center; width: min(86vw, 420px); }
.gl-game {
    margin-top: 10px; color: var(--muted); font-family: var(--font);
    font-size: 13.5px; font-weight: 500; letter-spacing: -0.02em; text-align: center;
}
.gl-bar {
    margin-top: 22px; width: 100%; height: 8px; border-radius: 6px; overflow: hidden;
    background: rgba(230,237,255,.08); border: 1px solid rgba(230,237,255,.10);
}
.gl-fill {
    height: 100%; width: 0%; border-radius: 6px;
    background: var(--brand-grad);
    box-shadow: 0 0 14px rgba(60,144,255,.65);
    transition: width .12s linear;
}
.gl-pct {
    margin-top: 10px; color: var(--white); font-family: var(--font);
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em;
}
@media (prefers-reduced-motion: reduce) { .gl-fill { transition: none; } }

/* ===== Рейтинг-таблица заработков за неделю ===== */
.rating-block {
    margin-top: 20px; background: #111111; border: 1px solid rgba(230,237,255,.10);
    border-radius: var(--radius); padding: 18px; box-shadow: var(--glow);
}
.rating-title { font-weight: 600; font-size: 16px; letter-spacing: -0.03em; margin-bottom: 14px; }
.rating-seg { margin-bottom: 14px; }
.rating-table { border: 1px solid rgba(230,237,255,.10); border-radius: 14px; overflow: hidden; background: rgba(230,237,255,.03); }
.rating-head {
    display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;
    padding: 13px 16px; background: rgba(230,237,255,.05);
    color: var(--white); font-size: 13px; font-weight: 600; letter-spacing: -0.02em;
    border-bottom: 1px solid rgba(230,237,255,.10);
}
.rating-head span:last-child { text-align: right; }
.rating-rows { display: flex; flex-direction: column; }
.rating-row {
    display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;
    padding: 13px 16px; border-bottom: 1px solid rgba(230,237,255,.07);
}
.rating-row:last-child { border-bottom: none; }
.rt-place { color: var(--muted2); font-size: 15px; font-weight: 600; }
.rt-name {
    color: var(--white); font-size: 14px; font-weight: 500; letter-spacing: -0.02em; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rt-earn { color: var(--white); font-size: 15px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; text-align: right; }
.rating-empty { padding: 22px 16px; text-align: center; color: var(--muted2); font-size: 13px; }

/* ===== Избранное ===== */
.fav-section { margin-bottom: 8px; }
.fav-heart { color: #ff6b81; font-size: 18px; line-height: 1; }
.cover-card .fav-remove {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    width: 28px; height: 28px; border-radius: 50%; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(10,10,14,.72); border: 1px solid rgba(255,107,129,.5);
    color: #ff6b81; font-size: 14px; line-height: 1;
    transition: transform .12s var(--ease);
}
.cover-card .fav-remove:active { transform: scale(.85); }

/* ===== Обложки: мягче и меньше, чтобы скрыть шум исходников ===== */
.weekly-poster { width: 78px; height: 78px; margin: 12px 0 10px; }
.weekly-poster img { filter: saturate(1.04); }
.hub-poster { width: 92px; height: 92px; }
.hub-poster img, .weekly-poster img, .cover-card img { image-rendering: auto; }

/* ===== Кнопка-гамбургер в шапке ===== */
.topbar-menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 42px; padding: 0 11px; flex: none; cursor: pointer;
    border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
    background: var(--card2, #17171d); transition: background .18s var(--ease), transform .12s var(--ease);
}
.topbar-menu-btn span { display: block; height: 2px; border-radius: 2px; background: #cfd0d7; transition: background .18s var(--ease); }
.topbar-menu-btn:active { transform: scale(.92); background: #20202a; }
.topbar-menu-btn.is-hover span { background: #fff; }

/* ===== Выдвижное меню навигации ===== */
.nav-drawer { position: fixed; inset: 0; z-index: 8000; visibility: hidden; pointer-events: none; }
.nav-drawer.show { visibility: visible; pointer-events: auto; }
.nav-scrim {
    position: absolute; inset: 0; background: rgba(6,6,9,.62);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .3s ease;
}
.nav-drawer.show .nav-scrim { opacity: 1; }
.nav-panel {
    position: absolute; top: 0; left: 0; height: 100%; width: min(84vw, 320px);
    display: flex; flex-direction: column; gap: 6px; padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #14141a 0%, #0d0d10 100%);
    border-right: 1px solid rgba(255,255,255,.08); box-shadow: 24px 0 60px rgba(0,0,0,.5);
    transform: translateX(-104%); transition: transform .32s cubic-bezier(.22,1,.3,1);
    overflow-y: auto; scrollbar-width: none;
}
.nav-panel::-webkit-scrollbar { display: none; }
.nav-drawer.show .nav-panel { transform: translateX(0); }

.nav-brand { display: flex; align-items: center; gap: 11px; padding: 2px 4px 14px; }
.nav-brand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(230,237,255,.14); }
.nav-brand-text { font-size: 19px; font-weight: 800; color: #eceef4; letter-spacing: .2px; }
.nav-brand-text b { color: var(--silver, #b9bbc6); font-weight: 800; }
.nav-close {
    margin-left: auto; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);
    color: #9a9ba6; font-size: 15px; line-height: 1; transition: background .18s var(--ease);
}
.nav-close:active { background: rgba(255,255,255,.1); }

.nav-search {
    display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 8px;
    padding: 12px 14px; cursor: pointer; text-align: left;
    border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
    background: rgba(255,255,255,.04); color: #9a9ba6; font-size: 15px; font-weight: 600;
    font-family: inherit; transition: border-color .18s var(--ease), background .18s var(--ease);
}
.nav-search:active { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.nav-search svg { flex: none; color: #8a8b96; }

.nav-group { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }
.nav-group-title { padding: 2px 8px 8px; color: #6f717b; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.nav-item {
    display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 14px; cursor: pointer;
    border: 1px solid transparent; border-radius: 14px; background: none;
    color: #b6b8c2; font-size: 15px; font-weight: 700; font-family: inherit; text-align: left;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.nav-item svg { flex: none; color: rgba(230,237,255,.5); transition: color .18s var(--ease); }
.nav-item:active { background: rgba(60,144,255,.10); }
/* Активный пункт — акцентный градиент со свечением, как в макете. */
.nav-item.active {
    background: var(--brand-grad);
    border-color: rgba(230,237,255,.18); color: var(--white);
    box-shadow: var(--brand-glow);
}
.nav-item.active svg { color: var(--white); }
@media (prefers-reduced-motion: reduce) {
    .nav-panel, .nav-scrim { transition-duration: .12s; }
}

/* ===== Кликабельный логотип-шапка (возврат на главную) — только зум, без подложки ===== */
.logo-wrap {
    cursor: pointer; transform-origin: left center;
    transition: transform .18s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.logo-wrap:hover, .logo-wrap.is-hover { transform: scale(1.06); background: none; }
.logo-wrap:active { transform: scale(.96); }
.logo-wrap:focus-visible { outline: none; }

/* ===== Аватарка в шапке = кнопка профиля (зум при наведении) ===== */
.avatar { cursor: pointer; transition: transform .18s var(--ease), border-color .18s var(--ease); }
.avatar:hover, .avatar.is-hover { transform: scale(1.1); border-color: rgba(255,255,255,.28); }
.avatar:active { transform: scale(.94); }
.avatar:focus-visible { outline: none; }

/* Отдельного приветственного экрана больше нет: «Добро пожаловать» и ник лежат
   поверх видео загрузки (см. блок ЗАГРУЗОЧНЫЙ ЭКРАН НА ВИДЕО выше).
   Прежние правила .welcome-* удалены вместе с разметкой. */
@media (prefers-reduced-motion: reduce) {
    .splash-hi, .splash-name { animation-duration: .2s; }
    .splash-bar i { animation: none; width: 100%; }
}

/* ===== Кнопка «наверх» ===== */
.scroll-top-btn {
    position: fixed; left: 16px; bottom: calc(104px + env(safe-area-inset-bottom)); z-index: 45;
    width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
    border: 1px solid rgba(230,237,255,.18); border-radius: 15px;
    background: rgba(17,17,17,.92);
    color: rgba(230,237,255,.85); box-shadow: 0 10px 26px rgba(0,0,0,.6), inset 0 1px 0 rgba(230,237,255,.06);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); pointer-events: none;
    transition: opacity .24s var(--ease), transform .28s cubic-bezier(.2,1.2,.3,1), visibility .24s;
}
.scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.scroll-top-btn:hover { color: var(--white); border-color: rgba(60,144,255,.45); box-shadow: 0 10px 26px rgba(0,0,0,.6), var(--brand-glow); }
.scroll-top-btn:active { transform: translateY(0) scale(.9); }

/* ===== Кастомный скроллбар в стиле VeltGame ===== */
html { scrollbar-width: thin; scrollbar-color: rgba(120,120,138,.55) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #43434e, #23232b);
    border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #55555f, #2d2d36); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, #63636e, #33333d); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
    .scroll-top-btn { transition-duration: .1s; }
}

/* ===== Зум при наведении: баланс, гамбургер, карточки недели ===== */
/* Плашка баланса живёт в одной капсуле с «Пополнить», поэтому не масштабируем
   её отдельно — иначе шов между плашкой и кнопкой расходится. */
.balance-chip { cursor: pointer; transition: border-color .18s var(--ease); }
.balance-chip:hover, .balance-chip.is-hover { border-color: rgba(230,237,255,.34); }
.balance-chip:focus-visible { outline: none; }

.topbar-menu-btn:hover, .topbar-menu-btn.is-hover { transform: scale(1.08); border-color: rgba(255,255,255,.2); }
.topbar-menu-btn:hover span, .topbar-menu-btn.is-hover span { background: #fff; }

.weekly-card:hover, .weekly-card.is-hover {
    transform: translateY(-3px) scale(1.03);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 22px 44px rgba(0,0,0,.5);
}

/* ===== Баннеры: снап по одной карточке, без обрезки краёв ===== */
.banners {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    padding-inline: 2px;
}
.banner {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

/* ============================================================
   VELTWILD / WOLF-GOLD DESIGNER ART PACK
   ============================================================ */
.slot-screen[data-slot="wolf-gold"] .slot-art-bg { background-position: center top; }
.slot-screen[data-slot="wolf-gold"] .slot-art-bg::after {
    background: linear-gradient(180deg, rgba(4,13,8,.18) 0%, rgba(3,15,9,.38) 55%, rgba(3,8,5,.82) 100%);
}
.slot-screen[data-slot="wolf-gold"] .slot-signboard {
    width: min(54%, 310px);
    margin: 0 auto 7px;
    filter: drop-shadow(0 7px 14px rgba(0,0,0,.78)) drop-shadow(0 0 10px rgba(216,166,58,.34));
}
.slot-screen[data-slot="wolf-gold"] .slot-machine.has-art {
    aspect-ratio: 4732 / 3154;
    max-width: 500px;
    margin-inline: auto;
}
.slot-screen[data-slot="wolf-gold"] .slot-machine.has-art #slotGrid.slot-grid {
    gap: 0;
    border-radius: 2px;
    contain: layout paint;
}
.slot-screen[data-slot="wolf-gold"] .slot-column { gap: 0; }
.slot-screen[data-slot="wolf-gold"] .slot-cell { padding: 1.8%; }
.slot-screen[data-slot="wolf-gold"] .slot-symbol {
    width: 91%; height: 91%;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.7));
}
.slot-screen[data-slot="wolf-gold"] .sym-scatter {
    transform: scale(1.08);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.72)) drop-shadow(0 0 12px rgba(255,190,54,.72));
}
.slot-screen[data-slot="wolf-gold"] .sym-wild {
    transform: scale(1.08);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.72)) drop-shadow(0 0 12px rgba(62,149,104,.72));
}
.slot-screen[data-slot="wolf-gold"] .slot-cell.sym-win .slot-symbol {
    animation: wolfSymbolWin .58s cubic-bezier(.2,1.25,.35,1) 3;
}
@keyframes wolfSymbolWin {
    0%,100% { transform: scale(1); filter: brightness(1) drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
    46% { transform: scale(1.12); filter: brightness(1.18) drop-shadow(0 0 13px rgba(255,194,66,.9)); }
}
.slot-win-popup.has-plaque[data-slot="wolf-gold"] .slot-win-plaque { width: min(88vw, 470px); }
.slot-win-popup.has-plaque[data-slot="wolf-gold"] .plaque-amount {
    /* Поле у плашки широкое (≈79%), поэтому сумма крупнее, но с запасом до краёв. */
    left: 11%; right: 11%;
    color: #f8ffd9;
    font-size: clamp(30px, 9.6vw, 58px);
    line-height: 1;
    text-shadow: 0 3px 4px rgba(17,39,18,.96), 0 0 13px rgba(92,184,103,.8);
}
.slot-win-popup.has-plaque[data-slot="wolf-gold"].mega .plaque-amount { font-size: clamp(27px, 8.6vw, 52px); }
.slot-win-popup.has-plaque[data-slot="wolf-gold"].win .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="wolf-gold"].big .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="wolf-gold"].mega .slot-win-content { --plaque-optical-y: 0px; }

.money-respin-overlay[data-slot="wolf-gold"] { inset: clamp(58px,8vh,88px) 8px clamp(100px,15vh,145px); }
.money-respin-overlay[data-slot="wolf-gold"] .slot-feature-card {
    width: min(96vw, 500px);
    padding: clamp(13px,3vw,20px);
    overflow: hidden;
    border: 2px solid #c99a36;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(3,18,10,.72), rgba(2,9,5,.94)),
        url('/static/slots/veltwild/bg_blur.jpg') center 38% / cover;
    box-shadow: 0 18px 48px rgba(0,0,0,.78), 0 0 28px rgba(216,166,58,.38), inset 0 0 22px rgba(62,149,104,.24);
}
.money-respin-overlay[data-slot="wolf-gold"] .feature-kicker {
    color: #f4d477;
    font-family: 'Cinzel', serif;
    font-size: clamp(20px,6vw,32px);
    text-shadow: 0 3px 3px #020603, 0 0 13px rgba(216,166,58,.62);
}
.money-respin-overlay[data-slot="wolf-gold"] .feature-jackpot {
    height: clamp(34px,9vw,52px);
    display: grid; place-items: center;
    margin: 2px 0 4px;
}
.money-respin-overlay[data-slot="wolf-gold"] .feature-jackpot:empty { height: 8px; }
.money-respin-overlay[data-slot="wolf-gold"] .feature-jackpot img {
    width: min(48%, 205px); max-height: 100%; object-fit: contain;
    filter: drop-shadow(0 5px 7px rgba(0,0,0,.72)) drop-shadow(0 0 10px rgba(216,166,58,.54));
    animation: wolfJackpotIn .45s cubic-bezier(.2,1.25,.35,1) both;
}
.money-respin-overlay[data-slot="wolf-gold"] .feature-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(3px,1vw,6px);
    margin: 7px auto 10px;
    width: min(100%, 440px);
    padding: clamp(6px,1.8vw,10px);
    border: 2px solid rgba(201,154,54,.82);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(7,32,18,.96), rgba(3,17,9,.96));
    box-shadow: inset 0 0 20px rgba(0,0,0,.82), 0 0 17px rgba(216,166,58,.18);
}
.money-respin-overlay[data-slot="wolf-gold"] .feature-value {
    min-width: 0; padding: 0; aspect-ratio: 1;
    border: 1px solid rgba(181,135,47,.5);
    border-radius: 7px;
    background: rgba(4,20,10,.76);
}
.money-respin-overlay[data-slot="wolf-gold"] .money-coin {
    position: relative; display: grid; place-items: center;
    border: 0; background: transparent; box-shadow: none;
}
.money-respin-overlay[data-slot="wolf-gold"] .money-coin img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.74));
}
.money-respin-overlay[data-slot="wolf-gold"] .money-coin b {
    position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
    color: #fff4bd; font: 900 clamp(10px,3.2vw,17px)/1 'Cinzel', serif;
    text-shadow: 0 2px 2px #271401, 0 0 5px #6f3b06;
}
/* Монеты одной партии падают ПО ОЧЕРЕДИ (--mc-i приходит из featureValueMarkup).
   Раньше все прилетали в один кадр, и при трёх-четырёх монетах за респин игрок
   видел просто мгновенное изменение поля. Задержку ждёт и JS: он добавляет
   landed * coinStagger к паузе респина, поэтому кадр не уезжает раньше монет. */
.money-respin-overlay[data-slot="wolf-gold"] .money-coin.new img {
    animation: wolfCoinLand .52s cubic-bezier(.18,1.42,.28,1)
               calc(var(--mc-i, 0) * var(--mc-step, 170ms)) both;
}
/* Респин случился: рамка поля коротко наливается золотом. Нужно именно на
   каждом респине, включая пустой — иначе кадр без монет не читается вообще. */
.money-respin-overlay[data-slot="wolf-gold"] .feature-grid.respinning {
    animation: wolfRespinPulse .62s ease-out;
}
@keyframes wolfRespinPulse {
    0%   { box-shadow: inset 0 0 20px rgba(0,0,0,.82), 0 0 17px rgba(216,166,58,.18); }
    30%  { box-shadow: inset 0 0 20px rgba(0,0,0,.82), 0 0 34px rgba(216,166,58,.8); }
    100% { box-shadow: inset 0 0 20px rgba(0,0,0,.82), 0 0 17px rgba(216,166,58,.18); }
}
.money-respin-overlay[data-slot="wolf-gold"] .money-empty { box-shadow: inset 0 0 10px rgba(0,0,0,.5); }
.money-respin-overlay[data-slot="wolf-gold"] .feature-status { color: rgba(244,225,174,.82); }
.money-respin-overlay[data-slot="wolf-gold"] .feature-total { color: #f8ffd9; text-shadow: 0 2px 3px #000, 0 0 10px rgba(62,149,104,.72); }
@keyframes wolfCoinLand {
    0% { opacity: 0; transform: translateY(-35%) scale(.35) rotate(-16deg); }
    58% { opacity: 1; transform: translateY(3%) scale(1.16) rotate(3deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes wolfJackpotIn {
    from { opacity: 0; transform: translateY(-8px) scale(.72); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-height: 650px) {
    .money-respin-overlay[data-slot="wolf-gold"] { inset: 48px 6px 82px; }
    .money-respin-overlay[data-slot="wolf-gold"] .feature-jackpot { height: 28px; }
    .money-respin-overlay[data-slot="wolf-gold"] .feature-grid { width: min(92%, 390px); margin-block: 4px 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .slot-screen[data-slot="wolf-gold"] .slot-cell.sym-win .slot-symbol,
    .money-respin-overlay[data-slot="wolf-gold"] .money-coin.new img,
    .money-respin-overlay[data-slot="wolf-gold"] .feature-jackpot img { animation-duration: .08s !important; animation-iteration-count: 1 !important; }
    /* Без анимаций монеты не ждут очереди и поле не мигает: фича должна просто
       показать результат. Паузы в JS при этом остаются — их держит slotDelay. */
    .money-respin-overlay[data-slot="wolf-gold"] .money-coin.new img { animation-delay: 0ms !important; }
    .money-respin-overlay[data-slot="wolf-gold"] .feature-grid.respinning { animation: none !important; }
}

/* ============================================================
   ИТОГ ФРИСПИНОВ — ждёт тапа, монетки льются непрерывно
   ============================================================ */
.slot-win-popup.fs-summary { cursor: pointer; }
.slot-win-popup.fs-summary.awaiting-tap { pointer-events: auto; }

/* Подпись «нажмите чтобы продолжить» */
.slot-win-tap {
    margin-top: 16px;
    color: rgba(255,255,255,.9);
    font-size: clamp(11px, 3.2vw, 14px);
    font-weight: 900;
    letter-spacing: 2.2px;
    text-shadow: 0 2px 4px #000, 0 0 12px var(--slot-glow, rgba(255,215,0,.5));
    opacity: 0;
}
.slot-win-popup.fs-summary.awaiting-tap .slot-win-tap {
    animation: fsTapBlink 1.45s ease-in-out infinite;
}
@keyframes fsTapBlink {
    0%, 100% { opacity: .45; transform: scale(.97); }
    50% { opacity: 1; transform: scale(1.04); }
}

/* Текст итога плавно зумится туда-обратно, пока игрок не тапнул */
.slot-win-popup.fs-summary .slot-win-content {
    animation: fsSummaryBreath 2.05s ease-in-out infinite;
    transform-origin: center;
}
@keyframes fsSummaryBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.065); }
}
.slot-win-popup.fs-summary .slot-win-amount {
    animation: fsSummaryAmount 2.05s ease-in-out infinite;
}
@keyframes fsSummaryAmount {
    0%, 100% { text-shadow: 0 4px 10px #000, 0 0 18px var(--slot-glow, rgba(255,215,0,.5)); }
    50% { text-shadow: 0 4px 12px #000, 0 0 34px var(--slot-glow, rgba(255,215,0,.5)); }
}

/* Непрерывный поток монет: разный размер, скорость и снос по горизонтали */
.win-coins i {
    width: var(--coin-size, 13px);
    animation-duration: var(--coin-dur, 1.7s);
}
.slot-win-popup.fs-summary .win-coins i {
    animation-name: fsCoinFall;
    animation-timing-function: linear;
    animation-delay: calc(var(--coin-i) * -119ms);
}
@keyframes fsCoinFall {
    0% { transform: translate3d(0,-14vh,0) rotateY(0) rotateZ(0); opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translate3d(var(--coin-dx),118vh,0) rotateY(900deg) rotateZ(240deg); opacity: 0; }
}
/* Лучи за текстом крутятся всё время ожидания */
.slot-win-popup.fs-summary .win-rays { opacity: .6; animation-duration: 7s; }

@media (prefers-reduced-motion: reduce) {
    .slot-win-popup.fs-summary .slot-win-content,
    .slot-win-popup.fs-summary .slot-win-amount,
    .slot-win-popup.fs-summary.awaiting-tap .slot-win-tap { animation: none !important; }
    .slot-win-popup.fs-summary.awaiting-tap .slot-win-tap { opacity: 1; }
}

/* ============================================================
   БОКОВОЕ МЕНЮ — зум и подсветка при наведении/нажатии
   ============================================================ */
.nav-item, .nav-search, .nav-close, .nav-brand {
    transform: translateZ(0);
    transition: background .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), transform .18s var(--ease),
                box-shadow .18s var(--ease);
}
/* Пункты навигации */
.nav-item:hover {
    background: rgba(60,144,255,.14);
    border-color: rgba(60,144,255,.32);
    color: var(--white);
    transform: scale(1.035);
    box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 14px rgba(60,144,255,.18);
}
.nav-item:hover svg { color: var(--white); filter: drop-shadow(0 0 7px rgba(60,144,255,.6)); }
.nav-item:active { transform: scale(.985); }
.nav-item.active:hover { transform: scale(1.045); }
/* Поиск */
.nav-search:hover {
    background: rgba(255,255,255,.085);
    border-color: rgba(255,255,255,.24);
    color: #e6e7ee;
    transform: scale(1.025);
    box-shadow: 0 6px 18px rgba(0,0,0,.42), 0 0 14px rgba(255,255,255,.07);
}
.nav-search:hover svg { color: #fff; filter: drop-shadow(0 0 7px rgba(255,255,255,.5)); }
.nav-search:active { transform: scale(.99); }
/* Крестик закрытия */
.nav-close:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.26);
    color: #fff;
    transform: scale(1.12) rotate(90deg);
    box-shadow: 0 0 14px rgba(255,255,255,.14);
}
.nav-close:active { transform: scale(.96) rotate(90deg); }
/* Логотип-бренд в шапке меню */
.nav-brand img { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.nav-brand:hover img {
    transform: scale(1.07);
    box-shadow: 0 0 16px rgba(255,255,255,.16);
}
@media (prefers-reduced-motion: reduce) {
    .nav-item:hover, .nav-search:hover, .nav-close:hover, .nav-brand:hover img { transform: none; }
}

/* ============================================================
   ПЛАШКИ ВЫИГРЫША ВО ВСЕХ СЛОТАХ — ждут тапа и продолжают анимироваться
   ============================================================ */
.slot-win-popup.tap-to-close { cursor: pointer; }
/* Ловим тап по всему экрану, даже если сама плашка небольшая и снизу */
.win-tap-catcher { position: fixed; inset: 0; z-index: 1; background: transparent; }
.slot-win-popup.tap-to-close.awaiting-tap .win-tap-catcher { pointer-events: auto; }
.slot-win-popup.tap-to-close:not(.awaiting-tap) .win-tap-catcher { pointer-events: none; }

/* Подпись «нажмите чтобы продолжить» под плашкой */
.slot-win-popup.tap-to-close .slot-win-tap {
    position: relative; z-index: 3;
    margin-top: 12px;
    opacity: 0;
    white-space: nowrap;
}
.slot-win-popup.tap-to-close.awaiting-tap .slot-win-tap {
    animation: fsTapBlink 1.45s ease-in-out infinite;
}
.slot-win-popup.compact-win.tap-to-close .slot-win-tap {
    margin-top: 9px;
    font-size: clamp(9px, 2.7vw, 12px);
    letter-spacing: 1.6px;
}
/* Плашка продолжает жить: мягкое плавание и дыхание свечения до тапа */
.slot-win-popup.has-plaque.tap-to-close.win.show .plaque-wrap {
    animation: plaqueCenteredFloat 2s ease-in-out .45s infinite;
}
.slot-win-popup.has-plaque.tap-to-close.show .slot-win-plaque {
    animation: plaqueGlowBreath 2.1s ease-in-out infinite;
}
@keyframes plaqueGlowBreath {
    0%, 100% { filter: drop-shadow(0 12px 30px rgba(0,0,0,.65)); }
    50% { filter: drop-shadow(0 12px 30px rgba(0,0,0,.65)) drop-shadow(0 0 22px var(--slot-glow, rgba(255,215,0,.5))); }
}
/* Сумма внутри плашки остаётся в центре поля и дышит вместе с ней */
.slot-win-popup.has-plaque.tap-to-close.show .plaque-amount {
    animation: plaqueAmountBreath 2.1s ease-in-out infinite;
}
@keyframes plaqueAmountBreath {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.06); }
}
/* Текстовый попап (слоты без PNG-плашек) тоже пульсирует до тапа */
.slot-win-popup.tap-to-close:not(.has-plaque).show .slot-win-amount {
    animation: winAmountBreath 2.05s ease-in-out infinite;
}
@keyframes winAmountBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .slot-win-popup.tap-to-close.awaiting-tap .slot-win-tap { animation: none !important; opacity: 1; }
    .slot-win-popup.has-plaque.tap-to-close.show .plaque-wrap,
    .slot-win-popup.has-plaque.tap-to-close.show .slot-win-plaque,
    .slot-win-popup.has-plaque.tap-to-close.show .plaque-amount,
    .slot-win-popup.tap-to-close:not(.has-plaque).show .slot-win-amount { animation: none !important; }
}

/* ============================================================
   ЕДИНЫЙ HOVER: зум + подсветка (как в боковом меню)
   Баннеры, табы каталога, поиск, футер, оплата, поддержка
   ============================================================ */
.banner,
.catalog-seg,
.seg-tab,
.search-square,
.footer-tg-btn,
.pay-pill,
.footer-col button,
.footer-support-card,
.fsc-write,
.banner-cta {
    transform: translateZ(0);
    transition: background .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), transform .18s var(--ease),
                box-shadow .18s var(--ease);
}

/* Баннеры-карусель (25% новичку, Честная игра, Бонусы, PvP) */
.banner:hover {
    transform: scale(1.022);
    box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 18px rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
}
.banner:hover .banner-title { color: #fff; text-shadow: 0 0 12px rgba(255,255,255,.28); }
.banner:active { transform: scale(.995); }
/* CTA внутри баннера подсвечивается сильнее */
.banner-welcome:hover .banner-cta {
    background: rgba(170,150,255,.3);
    border-color: rgba(180,162,255,.65);
    box-shadow: 0 0 16px rgba(150,128,255,.4);
    transform: scale(1.045);
}

/* Сегменты каталога «Все игры / Популярное» и таб-переключатели */
.catalog-seg:hover,
.seg-tab:hover {
    color: var(--white);
    border-color: rgba(60,144,255,.42);
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0,0,0,.38), 0 0 12px rgba(60,144,255,.16);
}
/* У активного чипа градиент не гасим наведением. */
.catalog-seg.active:hover { border-color: rgba(230,237,255,.24); }
.catalog-seg.active:hover,
.seg-tab.active:hover { transform: scale(1.055); }
.catalog-seg:active,
.seg-tab:active { transform: scale(.985); }

/* Квадрат поиска */
.search-square:hover {
    color: var(--white);
    background: #141c2b;
    border-color: rgba(60,144,255,.42);
    transform: scale(1.075);
    box-shadow: 0 6px 18px rgba(0,0,0,.42), 0 0 14px rgba(60,144,255,.22);
}
.search-square:hover svg { filter: drop-shadow(0 0 7px rgba(60,144,255,.6)); }
.search-square:active { transform: scale(.96); }

/* Кнопка Telegram-канал */
.footer-tg-btn:hover {
    background: #26262f;
    border-color: rgba(255,255,255,.24);
    transform: scale(1.04);
    box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 16px rgba(255,255,255,.09);
}
.footer-tg-btn:hover .ic { filter: drop-shadow(0 0 7px rgba(255,255,255,.55)); }
.footer-tg-btn:active { transform: scale(.985); }

/* Платёжные пилюли CryptoBot / xRocket */
.pay-pill:hover {
    background: #22222c;
    border-color: rgba(255,255,255,.22);
    transform: scale(1.035);
    box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 15px rgba(255,255,255,.08);
}
.pay-pill:hover .pay-ic {
    transform: scale(1.09);
    box-shadow: 0 0 13px rgba(255,255,255,.3);
}
.pay-ic { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.pay-pill:active { transform: scale(.99); }

/* Ссылки-колонки футера */
.footer-col button:hover {
    color: #fff;
    transform: translateX(3px) scale(1.03);
    text-shadow: 0 0 10px rgba(255,255,255,.24);
}

/* Карточка поддержки и кнопка «Написать» */
.footer-support-card:hover {
    transform: scale(1.018);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 16px rgba(255,255,255,.07);
}
.footer-support-card:hover .fsc-write,
.fsc-write:hover {
    background: rgba(255,255,255,.12);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255,255,255,.16);
}
.footer-support-card:hover .fsc-arrow { filter: drop-shadow(0 0 7px rgba(255,255,255,.55)); }
.fsc-arrow { transition: filter .18s var(--ease); }

@media (prefers-reduced-motion: reduce) {
    .banner:hover, .catalog-seg:hover, .seg-tab:hover, .search-square:hover,
    .footer-tg-btn:hover, .pay-pill:hover, .footer-col button:hover,
    .footer-support-card:hover, .fsc-write:hover,
    .banner-welcome:hover .banner-cta, .pay-pill:hover .pay-ic { transform: none; }
}

/* ============================================================
   БОНУС-ЦЕПОЧКА: монета Velts вместо лого и замочков
   ============================================================ */
/* Монета занимает весь кружок: подложка и рамка больше не нужны */
.wb-dot { overflow: visible; background: transparent; border: none; padding: 0; }
.wb-dot .wb-coin {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: contain;
    display: block;
    transition: transform .2s var(--ease), filter .2s var(--ease), opacity .2s var(--ease);
}
/* Активный шаг — монета яркая, с золотым свечением */
.wb-step.done .wb-dot {
    background: transparent;
    border: none;
    box-shadow: none;
}
.wb-step.done .wb-coin {
    filter: drop-shadow(0 3px 7px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(60,144,255,.65));
}
/* Заблокированные шаги — та же монета, но притушённая */
.wb-step.locked .wb-coin {
    opacity: .42;
    filter: grayscale(.55) brightness(.72) drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
/* Наведение — монета зумится и подсвечивается, как остальные элементы */
.wb-step:hover .wb-coin {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 9px rgba(0,0,0,.65)) drop-shadow(0 0 15px rgba(60,144,255,.75));
}
.wb-step.locked:hover .wb-coin { opacity: .68; }
@media (prefers-reduced-motion: reduce) {
    .wb-step:hover .wb-coin { transform: none; }
}

/* ============================================================
   ФЛАГИ ЯЗЫКА: круглые SVG вместо текстовых RU / GB
   ============================================================ */
.flag-svg { width: 100%; height: 100%; display: block; }

/* Бейдж в строке настроек «Язык приложения» */
.lang-badge.is-flag {
    min-width: 30px; width: 30px; height: 30px; padding: 0;
    border: none; border-radius: 50%; background: transparent;
    overflow: hidden;
    box-shadow: 0 2px 7px rgba(0,0,0,.45);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.settings-row:hover .lang-badge.is-flag {
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 12px rgba(255,255,255,.22);
}
.lang-badge.lg.is-flag { min-width: 42px; width: 42px; height: 42px; margin-right: 12px; border-radius: 50%; }

/* Круглый флаг в модалке выбора языка */
.language-option .lang-flag {
    padding: 0;
    background: #01040D;
    border-color: rgba(230,237,255,.16);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.language-option.active .lang-flag {
    border-color: rgba(230,237,255,.42);
    box-shadow: 0 3px 11px rgba(0,0,0,.55), 0 0 14px rgba(1,82,255,.35);
}
/* Наведение — как у остальных элементов: зум и подсветка.
   Выбранный пункт из наведения исключён: у него акцентный градиент, и
   полупрозрачная заливка ховера его перебивала (правило идёт ниже в файле). */
.language-option { transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.language-option:hover:not(.active) {
    transform: scale(1.02);
    border-color: rgba(60,144,255,.34);
    background: rgba(60,144,255,.08);
    box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 15px rgba(1,82,255,.14);
}
.language-option:hover .lang-flag {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0,0,0,.6), 0 0 15px rgba(1,82,255,.3);
}
.language-option:active { transform: scale(.995); }
@media (prefers-reduced-motion: reduce) {
    .language-option:hover, .language-option:hover .lang-flag,
    .settings-row:hover .lang-badge.is-flag { transform: none; }
}

/* ============================================================
   СТАРТ ПРОКРУТКИ: ни одного кадра со старыми символами под лентой
   ============================================================ */
/* visibility на ячейке с will-change обновляется композитором с задержкой,
   поэтому гасим ещё opacity и любые идущие анимации — это применяется сразу. */
/* ВАЖНО: только прямые ячейки колонки. Символы внутри .reel-strip трогать нельзя,
   иначе сама лента станет невидимой и барабан будет крутиться «пустым». */
.slot-column.reel-hidden > .slot-cell,
.slot-column.reel-hidden > .slot-cell .slot-symbol {
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
    transition: none !important;
}
/* Лента всегда рисуется выше остатков предыдущей сетки */
.slot-column.reel-spinning > .reel-strip { z-index: 3; }
.slot-column.reel-hidden > .slot-cell { will-change: auto; }

/* ============================================================
   ЗНАЧОК TELEGRAM вместо стрелки «Написать» и вопросика «Поддержка»
   ============================================================ */
.tg-ic {
    display: inline-grid; place-items: center;
    overflow: visible;
    font-size: 0; line-height: 0;
}
.tg-ic img {
    width: 62%; height: 62%;
    max-width: 24px; max-height: 24px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
    transition: transform .18s var(--ease), filter .18s var(--ease);
}
/* Кнопка «Написать» — иконка чуть меньше подложки, аккуратно по центру */
.fsc-write .tg-ic img { width: 70%; height: 70%; max-width: 21px; max-height: 21px; }
.footer-support-card:hover .tg-ic img,
.fsc-write:hover .tg-ic img {
    transform: scale(1.14);
    filter: drop-shadow(0 3px 7px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(64,168,226,.75));
}
/* Строка «Поддержка» в настройках */
.settings-premium-row .tg-ic img { width: 60%; height: 60%; max-width: 25px; max-height: 25px; }
.settings-premium-row:hover .tg-ic img {
    transform: scale(1.12);
    filter: drop-shadow(0 3px 7px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(64,168,226,.75));
}

/* ============================================================
   КАРТОЧКИ ЛЕНТЫ ВЫИГРЫШЕЙ — зум и подсветка при наведении
   ============================================================ */
.live-item {
    transform: translateZ(0);
    transition: background .18s var(--ease), border-color .18s var(--ease),
                transform .18s var(--ease), box-shadow .18s var(--ease);
}
/* Совмещаем с существующим подъёмом карточки, чтобы эффекты не конфликтовали */
/* Наведение: приподнимаем обложку и подсвечиваем сумму. Рамку записи не
   трогаем — её нет, разделителем служит линия слева. */
.live-item:hover .li-cover {
    transform: scale(1.05);
    border-color: rgba(60,144,255,.42);
    box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 16px rgba(60,144,255,.22);
}
.live-item:hover .li-amount { text-shadow: 0 0 12px rgba(60,144,255,.35); }
.live-item:hover .li-user { color: rgba(230,237,255,.7); }
.li-cover, .li-amount, .li-user {
    transition: transform .18s var(--ease), box-shadow .18s var(--ease),
                border-color .18s var(--ease),
                color .18s var(--ease), text-shadow .18s var(--ease);
}
.live-item:active { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
    .live-item:hover, .live-item:hover .li-cover,
    .footer-support-card:hover .tg-ic img, .fsc-write:hover .tg-ic img,
    .settings-premium-row:hover .tg-ic img { transform: none; }
}

/* ============================================================
   ОКНО ПОВЫШЕНИЯ РАНГА
   Тот же каркас, что у окна награды (.velt-modal + .reward-glow), но свечение
   холодное серебряное, а не золотое: ранг — это статус, а не выплата, и путать
   его с начислением монет игрок не должен.
   ============================================================ */
.rankup-modal {
    position: relative;
    overflow: hidden;
    padding-top: 26px;
    border-color: rgba(230,237,255,.16);
    box-shadow: 0 24px 60px rgba(0,0,0,.72), 0 0 42px rgba(1,82,255,.20);
}
.rankup-modal .reward-glow {
    background: radial-gradient(circle, rgba(60,144,255,.26) 0%, rgba(8,81,177,.10) 44%, transparent 72%);
}
.rankup-modal h2,
.rankup-modal .ru-rank,
.rankup-modal .ru-from,
.rankup-modal .ru-perk,
.rankup-modal .btn { position: relative; z-index: 2; }

/* Значок ранга: эмодзи ранга в кольце */
.ru-badge {
    position: relative; z-index: 2;
    width: 84px; height: 84px; margin: 0 auto 15px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(230,237,255,.05);
    border: 1px solid rgba(60,144,255,.42);
    box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 26px rgba(1,82,255,.28);
    animation: ruBadgeIn .62s cubic-bezier(.16,1.5,.3,1) both;
}
/* Внутри значка теперь стрелка вверх (SVG), а не эмодзи ранга. */
.ru-badge svg {
    width: 38px; height: 38px; display: block;
    color: var(--brand-2);
    filter: drop-shadow(0 0 10px rgba(60,144,255,.55));
    animation: ruBadgeFloat 2.8s ease-in-out .62s infinite;
}
@keyframes ruBadgeIn {
    0% { opacity: 0; transform: translateY(-16px) scale(.55) rotate(-16deg); }
    60% { opacity: 1; transform: translateY(0) scale(1.1) rotate(5deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes ruBadgeFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.03); }
}

/* Название нового ранга — крупно, тем же градиентом, что суммы наград */
.ru-rank {
    font-size: 30px; font-weight: 600; letter-spacing: -0.03em;
    margin-bottom: 6px;
    background: var(--brand-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: ruRankIn .5s cubic-bezier(.2,1.4,.3,1) .12s both;
}
@keyframes ruRankIn {
    from { opacity: 0; transform: translateY(9px) scale(.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ru-from { color: var(--muted2); font-size: 13px; margin-bottom: 16px; }

/* Плашка выгоды: что именно дал новый ранг */
.ru-perk {
    display: flex; align-items: center; gap: 10px; text-align: left;
    margin: 0 0 20px; padding: 12px 13px;
    border: 1px solid rgba(230,237,255,.10); border-radius: 14px;
    background: rgba(230,237,255,.04);
    color: var(--muted); font-size: 13px; line-height: 1.45;
}
.ru-perk b { color: var(--white); font-size: 15px; font-weight: 600; letter-spacing: -0.03em; }
.ru-perk-ic {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(60,144,255,.14); border: 1px solid rgba(60,144,255,.40);
    color: var(--brand-2);
}
.ru-perk-ic .uic { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
    .rankup-modal .reward-glow, .ru-badge, .ru-badge svg, .ru-rank { animation: none !important; }
}

/* ============================================================
   ОКНО НАГРАДЫ: ежедневный бонус, кэшбэк, промокод
   ============================================================ */
.reward-modal {
    position: relative;
    overflow: hidden;
    padding-top: 26px;
    border-color: rgba(230,237,255,.16);
    box-shadow: 0 24px 60px rgba(0,0,0,.72), 0 0 40px rgba(1,82,255,.18);
}
/* Мягкое свечение за монетой. Монета в ассете монохромная, поэтому тёплое
   золотое свечение здесь было чужим — переводим на акцент бренда. */
.reward-glow {
    position: absolute; top: -70px; left: 50%; width: 320px; height: 320px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(60,144,255,.24) 0%, rgba(8,81,177,.09) 42%, transparent 70%);
    pointer-events: none;
    animation: rewardGlowPulse 2.6s ease-in-out infinite;
}
@keyframes rewardGlowPulse {
    0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.07); }
}
/* Монета Velts вместо обычной иконки */
.reward-coin-badge {
    position: relative; z-index: 2;
    width: 82px; height: 82px; margin: 0 auto 14px;
    animation: rewardCoinIn .62s cubic-bezier(.16,1.5,.3,1) both;
}
.reward-coin-badge img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(60,144,255,.55));
    animation: rewardCoinFloat 2.8s ease-in-out .62s infinite;
}
@keyframes rewardCoinIn {
    0% { opacity: 0; transform: translateY(-18px) scale(.5) rotate(-20deg); }
    60% { opacity: 1; transform: translateY(0) scale(1.12) rotate(6deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes rewardCoinFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.03); }
}
/* Сумма крупная и дышит */
.reward-modal .vm-amount {
    position: relative; z-index: 2;
    animation: rewardAmountIn .5s cubic-bezier(.2,1.4,.3,1) .12s both;
}
@keyframes rewardAmountIn {
    from { opacity: 0; transform: translateY(9px) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.reward-modal h2 { position: relative; z-index: 2; }
.reward-modal .vm-sub,
.reward-modal .vm-balance { position: relative; z-index: 2; }
/* Сам промокод */
.vm-code {
    position: relative; z-index: 2;
    display: inline-block; margin: 2px auto 10px; padding: 6px 15px;
    border: 1px dashed rgba(60,144,255,.45); border-radius: 10px;
    background: rgba(60,144,255,.10);
    color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: .08em;
}
/* Монетки сыплются сверху */
.reward-coins { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.reward-coins i {
    position: absolute; top: -14%; left: var(--rc-x); width: 11px; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #CFE2FF 0 12%, #3C90FF 26%, #0851B1 74%);
    box-shadow: 0 0 7px rgba(60,144,255,.6);
    animation: rewardCoinFall 2.3s linear var(--rc-d, 0ms) infinite;
}
@keyframes rewardCoinFall {
    0% { transform: translateY(0) rotate(0); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(360px) rotate(520deg); opacity: 0; }
}
.reward-modal .btn { position: relative; z-index: 2; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .reward-glow, .reward-coin-badge, .reward-coin-badge img,
    .reward-modal .vm-amount { animation: none !important; }
    .reward-coins { display: none !important; }
}

/* ============================================================
   РАЗНИЦА МЕЖДУ WIN / BIG WIN / MEGA WIN
   Раньше все тиры выглядели одинаково: и 200, и 20 000.
   ============================================================ */
/* Размер плашки растёт вместе с тиром */
.slot-win-popup.has-plaque.win .slot-win-plaque   { width: min(74vw, 380px); }
.slot-win-popup.has-plaque.big .slot-win-plaque   { width: min(86vw, 450px); }
.slot-win-popup.has-plaque.mega .slot-win-plaque  { width: min(96vw, 520px); }
.slot-win-popup.has-plaque[data-slot="sugar-rush"].mega .slot-win-plaque { width: min(96vw, 520px); }
.slot-win-popup.has-plaque[data-slot="wolf-gold"].mega .slot-win-plaque { width: min(96vw, 510px); }

/* Вылет плашки: чем крупнее тир, тем мощнее замах */
.slot-win-popup.has-plaque.win.show .plaque-wrap  { animation: plaquePopWin .5s cubic-bezier(.16,1.5,.3,1) both; }
.slot-win-popup.has-plaque.big.show .plaque-wrap  { animation: plaquePopBig .62s cubic-bezier(.16,1.62,.3,1) both, plaqueCenteredFloat 1.9s ease-in-out .62s infinite; }
.slot-win-popup.has-plaque.mega.show .plaque-wrap { animation: plaquePopMega .78s cubic-bezier(.14,1.7,.28,1) both, plaqueCenteredMega 1.5s ease-in-out .78s infinite; }
@keyframes plaquePopWin {
    0% { opacity: 0; transform: scale(.62); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes plaquePopBig {
    0% { opacity: 0; transform: scale(.42) rotate(-5deg); }
    58% { opacity: 1; transform: scale(1.1) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes plaquePopMega {
    0% { opacity: 0; transform: scale(.3) rotate(-9deg); }
    42% { opacity: 1; transform: scale(1.2) rotate(4deg); }
    68% { transform: scale(.96) rotate(-2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Свечение вокруг плашки по тиру */
.slot-win-popup.has-plaque.big.show .slot-win-plaque {
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.65)) drop-shadow(0 0 22px var(--slot-glow, rgba(255,215,0,.5)));
}
.slot-win-popup.has-plaque.mega.show .slot-win-plaque {
    filter: drop-shadow(0 14px 34px rgba(0,0,0,.7))
            drop-shadow(0 0 30px var(--slot-glow, rgba(255,215,0,.6)))
            drop-shadow(0 0 60px var(--slot-glow, rgba(255,215,0,.35)));
}
/* Лучи за MEGA заметно активнее */
.slot-win-popup.big .win-rays  { opacity: .58; animation-duration: 7s; }
.slot-win-popup.mega .win-rays { opacity: .8; animation-duration: 4.5s; }

/* Короткая тряска экрана только на MEGA WIN */
.slot-screen.mega-shake { animation: megaShake .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes megaShake {
    0%, 100% { transform: translate3d(0,0,0); }
    12% { transform: translate3d(-6px,2px,0); }
    28% { transform: translate3d(5px,-3px,0); }
    46% { transform: translate3d(-4px,-2px,0); }
    64% { transform: translate3d(3px,2px,0); }
    82% { transform: translate3d(-2px,1px,0); }
}

@media (prefers-reduced-motion: reduce) {
    .slot-win-popup.has-plaque.win.show .plaque-wrap,
    .slot-win-popup.has-plaque.big.show .plaque-wrap,
    .slot-win-popup.has-plaque.mega.show .plaque-wrap { animation: none !important; opacity: 1; transform: none; }
    .slot-screen.mega-shake { animation: none !important; }
}

/* ============================================================
   ПРАЗДНИК ПОБЕДЫ: вспышка, ударные волны, искры, конфетти, блик
   ============================================================ */
/* Короткая вспышка в момент появления — «удар» по глазам */
.win-flash {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(circle at 50% 46%,
        color-mix(in srgb, var(--slot-accent, #ffd24b) 65%, #fff) 0%,
        color-mix(in srgb, var(--slot-accent, #ffd24b) 22%, transparent) 34%,
        transparent 62%);
    opacity: 0;
}
.slot-win-popup.show .win-flash { animation: winFlash .58s ease-out both; }
.slot-win-popup.mega.show .win-flash,
.slot-win-popup.fs-summary.show .win-flash { animation-duration: .78s; }
@keyframes winFlash {
    0% { opacity: 0; transform: scale(.5); }
    18% { opacity: .95; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* Ударные волны-кольца, расходятся от центра */
.win-rings { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.win-rings i {
    position: absolute; left: 50%; top: 46%;
    width: 120px; aspect-ratio: 1; margin: -60px 0 0 -60px;
    border: 2px solid color-mix(in srgb, var(--slot-accent, #ffd24b) 72%, #fff);
    border-radius: 50%;
    opacity: 0;
}
.slot-win-popup.show .win-rings i { animation: winRing 1.15s cubic-bezier(.2,.7,.3,1) both; }
.slot-win-popup.show .win-rings i:nth-child(2) { animation-delay: .16s; }
.slot-win-popup.show .win-rings i:nth-child(3) { animation-delay: .32s; }
.slot-win-popup.mega.show .win-rings i,
.slot-win-popup.fs-summary.show .win-rings i { animation-iteration-count: 3; }
@keyframes winRing {
    0% { opacity: .85; transform: scale(.25); border-width: 4px; }
    70% { opacity: .25; }
    100% { opacity: 0; transform: scale(3.6); border-width: 1px; }
}

/* Искры разлетаются по кругу */
.win-sparks { position: absolute; left: 50%; top: 46%; z-index: 3; pointer-events: none; }
.win-sparks i {
    position: absolute; left: 0; top: 0;
    width: var(--sp-size, 5px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff 0 30%,
        color-mix(in srgb, var(--slot-accent, #ffd24b) 85%, #fff) 60%, transparent 75%);
    box-shadow: 0 0 10px color-mix(in srgb, var(--slot-accent, #ffd24b) 80%, transparent);
    opacity: 0;
    transform: rotate(var(--sp-a)) translateX(0);
}
.slot-win-popup.show .win-sparks i {
    animation: winSpark 1.05s cubic-bezier(.18,.72,.3,1) var(--sp-delay, 0ms) both;
}
.slot-win-popup.mega.show .win-sparks i,
.slot-win-popup.fs-summary.show .win-sparks i {
    animation: winSpark 1.35s cubic-bezier(.18,.72,.3,1) var(--sp-delay, 0ms) infinite;
}
@keyframes winSpark {
    0% { opacity: 0; transform: rotate(var(--sp-a)) translateX(6px) scale(.5); }
    16% { opacity: 1; transform: rotate(var(--sp-a)) translateX(calc(var(--sp-d) * .35)) scale(1.1); }
    100% { opacity: 0; transform: rotate(var(--sp-a)) translateX(var(--sp-d)) scale(.35); }
}

/* Конфетти сыплется сверху — только на MEGA и итоге фриспинов */
.win-confetti { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.win-confetti i {
    position: absolute; top: -12%; left: var(--cf-x);
    width: var(--cf-w, 7px); height: var(--cf-h, 12px);
    border-radius: 2px;
    background: var(--cf-c, #ffd24b);
    box-shadow: 0 0 8px color-mix(in srgb, var(--cf-c, #ffd24b) 60%, transparent);
    opacity: 0;
    animation: winConfetti var(--cf-dur, 2.4s) linear var(--cf-delay, 0ms) infinite;
}
@keyframes winConfetti {
    0% { opacity: 0; transform: translateY(0) rotate(0) scale(1); }
    10% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; transform: translateY(118vh) rotate(var(--cf-rot, 480deg)) scale(.85); }
}

/* Заголовок: градиент + бегущий блик */
.slot-win-popup.rich-win .slot-win-label {
    position: relative;
    background: linear-gradient(100deg,
        #fff 0%,
        color-mix(in srgb, var(--slot-accent, #ffd24b) 55%, #fff) 38%,
        #fff 52%,
        color-mix(in srgb, var(--slot-accent, #ffd24b) 65%, #fff) 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.75))
            drop-shadow(0 0 22px var(--slot-glow, rgba(255,215,0,.5)));
    animation: richWinTitle .52s cubic-bezier(.16,1.4,.3,1) both,
               winLabelShine 2.6s linear .52s infinite;
}
@keyframes winLabelShine {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* Сумма пульсирует и «дышит» свечением */
.slot-win-popup.rich-win .slot-win-amount {
    animation: richAmountIn .55s cubic-bezier(.16,1.55,.3,1) .1s both,
               winAmountGlow 2.2s ease-in-out .65s infinite;
}
@keyframes richAmountIn {
    0% { opacity: 0; transform: scale(.55) translateY(14px); }
    62% { opacity: 1; transform: scale(1.14) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes winAmountGlow {
    0%, 100% { text-shadow: 0 4px 10px rgba(0,0,0,.8), 0 0 18px var(--slot-glow, rgba(255,215,0,.5)); transform: scale(1); }
    50% { text-shadow: 0 4px 12px rgba(0,0,0,.85), 0 0 40px var(--slot-glow, rgba(255,215,0,.75)); transform: scale(1.045); }
}

/* Подзаголовок и подпись плавно проявляются по очереди */
.slot-win-popup.fs-summary .slot-win-summary-sub {
    animation: winSubIn .45s ease-out .32s both;
}
@keyframes winSubIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: .78; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .win-flash, .win-rings, .win-sparks, .win-confetti { display: none !important; }
    .slot-win-popup.rich-win .slot-win-label,
    .slot-win-popup.rich-win .slot-win-amount,
    .slot-win-popup.fs-summary .slot-win-summary-sub { animation: none !important; }
    .slot-win-popup.rich-win .slot-win-label { -webkit-text-fill-color: #fff; color: #fff; }
}

/* ============================================================
   ДАРТС: модель дротика, полёт, удар и цветовые варианты
   ============================================================ */
.dart-model {
    --dart-c1: #ffd76a;
    --dart-c2: #b8860b;
    position: absolute;
    width: 46px; height: 10px;
    margin: -5px 0 0 -40px;           /* острие приходится точно в точку попадания */
    transform-origin: 100% 50%;
    transform: rotate(var(--dart-tilt, -38deg));
    pointer-events: none;
    z-index: 4;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.6));
}
/* Наконечник — тонкая игла в точке попадания */
.dart-model .dart-tip {
    position: absolute; right: -5px; top: 50%;
    width: 7px; height: 2px; margin-top: -1px;
    background: linear-gradient(90deg, #9aa0aa, #e9edf3);
    border-radius: 0 2px 2px 0;
}
/* Ствол — металлический, с блеском */
.dart-model .dart-barrel {
    position: absolute; right: 2px; top: 50%;
    width: 17px; height: 7px; margin-top: -3.5px;
    border-radius: 3px 2px 2px 3px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.55) 0 22%, transparent 46%),
        linear-gradient(90deg, var(--dart-c2), var(--dart-c1) 55%, var(--dart-c2));
    box-shadow: inset 0 0 3px rgba(0,0,0,.4);
}
/* Хвостовик */
.dart-model .dart-shaft {
    position: absolute; right: 18px; top: 50%;
    width: 13px; height: 3.4px; margin-top: -1.7px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2a2c33, #4a4d57);
}
/* Оперение — две лопасти */
.dart-model .dart-flight {
    position: absolute; right: 29px; top: 50%;
    width: 15px; height: 16px; margin-top: -8px;
}
.dart-model .dart-flight i {
    position: absolute; left: 0; width: 15px; height: 8px;
    background: linear-gradient(90deg, var(--dart-c1), color-mix(in srgb, var(--dart-c1) 45%, #fff));
    opacity: .95;
}
.dart-model .dart-flight i:first-child { top: 0; clip-path: polygon(0 0, 100% 55%, 100% 100%, 0 100%); }
.dart-model .dart-flight i:last-child { bottom: 0; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 100%); }

/* Цветовые варианты */
.dart-model.skin-gold    { --dart-c1: #ffd76a; --dart-c2: #a9761a; }
.dart-model.skin-crimson { --dart-c1: #ff6b7e; --dart-c2: #9c1f31; }
.dart-model.skin-azure   { --dart-c1: #6fd0ff; --dart-c2: #1a6c9c; }
.dart-model.skin-emerald { --dart-c1: #74f0a8; --dart-c2: #16794a; }
.dart-model.skin-violet  { --dart-c1: #c99bff; --dart-c2: #5d2a9c; }
.dart-model.skin-amber   { --dart-c1: #ffb15c; --dart-c2: #a85a12; }

/* Полёт: дротик прилетает со стороны игрока и вонзается */
.dart-model.flying {
    animation: dartFly .43s cubic-bezier(.24,.72,.32,1) both;
}
@keyframes dartFly {
    0% {
        opacity: 0;
        transform: translate3d(var(--dart-from-x, 46px), var(--dart-from-y, 220px), 0)
                   rotate(calc(var(--dart-tilt, -38deg) - 22deg)) scale(.55);
    }
    28% { opacity: 1; }
    100% {
        opacity: 1;
        transform: translate3d(0,0,0) rotate(var(--dart-tilt, -38deg)) scale(1);
    }
}
/* Приземление: короткое дрожание древка */
.dart-model.landed { animation: dartSettle .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes dartSettle {
    0%, 100% { transform: rotate(var(--dart-tilt, -38deg)); }
    25% { transform: rotate(calc(var(--dart-tilt, -38deg) + 5deg)); }
    55% { transform: rotate(calc(var(--dart-tilt, -38deg) - 3deg)); }
    80% { transform: rotate(calc(var(--dart-tilt, -38deg) + 1.5deg)); }
}
/* Вспышка удара */
.dart-impact {
    position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border-radius: 50%; pointer-events: none; z-index: 3;
    background: radial-gradient(circle, rgba(255,255,255,.9) 0 18%, rgba(255,215,110,.5) 42%, transparent 70%);
    animation: dartImpact .6s ease-out forwards;
}
.dart-impact.skin-crimson { background: radial-gradient(circle, rgba(255,255,255,.9) 0 18%, rgba(255,107,126,.5) 42%, transparent 70%); }
.dart-impact.skin-azure   { background: radial-gradient(circle, rgba(255,255,255,.9) 0 18%, rgba(111,208,255,.5) 42%, transparent 70%); }
.dart-impact.skin-emerald { background: radial-gradient(circle, rgba(255,255,255,.9) 0 18%, rgba(116,240,168,.5) 42%, transparent 70%); }
.dart-impact.skin-violet  { background: radial-gradient(circle, rgba(255,255,255,.9) 0 18%, rgba(201,155,255,.5) 42%, transparent 70%); }
.dart-impact.skin-amber   { background: radial-gradient(circle, rgba(255,255,255,.9) 0 18%, rgba(255,177,92,.5) 42%, transparent 70%); }
@keyframes dartImpact {
    0% { opacity: 0; transform: scale(.3); }
    22% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(2.1); }
}

/* Выбор цвета дротика */
.dart-skins { display: flex; justify-content: center; gap: 9px; margin: 12px 0 10px; }
.dart-skin {
    width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
    border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: #17171d;
    transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.dart-skin i { width: 16px; height: 6px; border-radius: 2px; display: block; }
.dart-skin.skin-gold i    { background: linear-gradient(90deg, #a9761a, #ffd76a); }
.dart-skin.skin-crimson i { background: linear-gradient(90deg, #9c1f31, #ff6b7e); }
.dart-skin.skin-azure i   { background: linear-gradient(90deg, #1a6c9c, #6fd0ff); }
.dart-skin.skin-emerald i { background: linear-gradient(90deg, #16794a, #74f0a8); }
.dart-skin.skin-violet i  { background: linear-gradient(90deg, #5d2a9c, #c99bff); }
.dart-skin.skin-amber i   { background: linear-gradient(90deg, #a85a12, #ffb15c); }
.dart-skin:hover { transform: scale(1.1); border-color: rgba(255,255,255,.26); box-shadow: 0 0 12px rgba(255,255,255,.12); }
.dart-skin.active { border-color: rgba(255,255,255,.5); box-shadow: 0 0 14px rgba(255,255,255,.2); transform: scale(1.06); }

/* Кнопка броска с таймером авто-броска */
.dart-throw-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }
.dart-timer {
    display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px;
    border-radius: 999px; background: rgba(0,0,0,.22); color: inherit;
    font-size: 13px; font-weight: 900;
    animation: dartTimerPulse 1s ease-in-out infinite;
}
@keyframes dartTimerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
/* Счёт проявляется вместе с попаданием */
.dart-score-card b { transition: transform .2s var(--ease), color .2s var(--ease); }
.dart-score-card.revealed b { transform: scale(1.18); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .dart-model.flying, .dart-model.landed, .dart-impact, .dart-timer { animation: none !important; }
    .dart-model.flying { opacity: 1; }
}

/* ============================================================
   VELTPAWS / DOG-HOUSE DESIGNER ART PACK (5x3)
   ============================================================ */
.slot-screen[data-slot="dog-house"] .slot-art-bg { background-position: center top; }
.slot-screen[data-slot="dog-house"] .slot-art-bg::after {
    background: linear-gradient(180deg, rgba(6,18,8,.16) 0%, rgba(5,20,10,.36) 55%, rgba(4,12,6,.8) 100%);
}
.slot-screen[data-slot="dog-house"] .slot-signboard {
    width: min(58%, 330px);
    margin: 0 auto 7px;
    filter: drop-shadow(0 7px 14px rgba(0,0,0,.7)) drop-shadow(0 0 11px rgba(255,194,75,.34));
}
.slot-screen[data-slot="dog-house"] .slot-machine.has-art {
    aspect-ratio: 3236 / 2158;
    max-width: 500px;
    margin-inline: auto;
}
.slot-screen[data-slot="dog-house"] .slot-machine.has-art #slotGrid.slot-grid {
    gap: 0;
    border-radius: 3px;
    contain: layout paint;
}
.slot-screen[data-slot="dog-house"] .slot-column { gap: 0; }
.slot-screen[data-slot="dog-house"] .slot-cell { padding: 1.4%; }
.slot-screen[data-slot="dog-house"] .slot-symbol {
    width: 94%; height: 94%;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
/* Скаттер-будка и вайлды заметнее остальных символов */
.slot-screen[data-slot="dog-house"] .sym-scatter {
    transform: scale(1.07);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(255,204,80,.8));
}
.slot-screen[data-slot="dog-house"] .sym-wild {
    transform: scale(1.07);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(122,203,79,.78));
}
/* Победный символ пружинит, как в остальных дизайнерских слотах */
.slot-screen[data-slot="dog-house"] .slot-cell.sym-win .slot-symbol {
    animation: pawsSymbolWin .56s cubic-bezier(.24,1.3,.35,1) 3;
}
@keyframes pawsSymbolWin {
    0%,100% { transform: scale(1); filter: brightness(1) drop-shadow(0 3px 4px rgba(0,0,0,.55)); }
    45% { transform: scale(1.13) rotate(-2deg); filter: brightness(1.2) drop-shadow(0 0 14px rgba(255,204,80,.92)); }
}
/* Вайлд с множителем мягко пульсирует — видно, что он «липкий» и жирный */
.slot-screen[data-slot="dog-house"] .slot-cell .wild-mult {
    animation: pawsWildIdle 1.9s ease-in-out infinite;
}
@keyframes pawsWildIdle {
    0%,100% { transform: scale(1.07); filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(122,203,79,.6)); }
    50% { transform: scale(1.13); filter: drop-shadow(0 3px 6px rgba(0,0,0,.62)) drop-shadow(0 0 18px rgba(255,204,80,.85)); }
}

/* Плашки выигрыша: надпись занимает всю табличку, поэтому сумма идёт
   строго по центру под ней на собственной подложке — ничего не перекрывается. */
.slot-win-popup.has-plaque[data-slot="dog-house"] .slot-win-plaque { width: min(84vw, 430px); }
/* margin (а не padding) — чтобы % позиция суммы считалась от самой плашки,
   при этом место под капсулу в потоке зарезервировано и текст «нажмите» не налезает */
.slot-win-popup.has-plaque[data-slot="dog-house"] .plaque-wrap { margin-bottom: 74px; }
.slot-win-popup.has-plaque[data-slot="dog-house"] .plaque-amount {
    top: 100%; bottom: auto;
    left: 50%; right: auto;
    margin-top: 12px;
    transform: translate(-50%, 0);
    min-width: 52%;
    padding: 7px 26px 8px;
    border: 2px solid rgba(255,204,80,.85);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(28,60,26,.96), rgba(14,34,14,.96));
    box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 20px rgba(255,204,80,.35),
                inset 0 2px 8px rgba(255,255,255,.14);
    color: #fff6d2;
    font-size: clamp(22px, 7.2vw, 40px);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 0 12px rgba(255,204,80,.7);
}
.slot-win-popup.has-plaque[data-slot="dog-house"].mega .plaque-amount { font-size: clamp(21px, 6.8vw, 38px); }
/* Плавание плашки не должно сбивать центровку суммы */
.slot-win-popup.has-plaque[data-slot="dog-house"].show .plaque-amount {
    animation: pawsAmountBreath 2.1s ease-in-out infinite;
}
@keyframes pawsAmountBreath {
    0%,100% { transform: translate(-50%, 0) scale(1); }
    50% { transform: translate(-50%, 0) scale(1.05); }
}
.slot-win-popup.has-plaque[data-slot="dog-house"].win .slot-win-content { --plaque-optical-y: -4px; }
.slot-win-popup.has-plaque[data-slot="dog-house"].big .slot-win-content { --plaque-optical-y: -6px; }
.slot-win-popup.has-plaque[data-slot="dog-house"].mega .slot-win-content { --plaque-optical-y: -6px; }

@media (prefers-reduced-motion: reduce) {
    .slot-screen[data-slot="dog-house"] .slot-cell.sym-win .slot-symbol,
    .slot-screen[data-slot="dog-house"] .slot-cell .wild-mult,
    .slot-win-popup.has-plaque[data-slot="dog-house"].show .plaque-amount { animation: none !important; }
    .slot-win-popup.has-plaque[data-slot="dog-house"].show .plaque-amount { transform: translate(-50%, 0); }
}

/* ============================================================
   ГЕЙТ ПОДПИСКИ НА КАНАЛ — окно первого входа
   Полноэкранный слой поверх всего: закрыть его можно только
   подтверждённой подпиской (проверка серверная).
   ============================================================ */
.subgate {
    position: fixed; inset: 0; z-index: 30000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    opacity: 0; transition: opacity .34s var(--ease);
    overflow-y: auto;
}
.subgate.show { opacity: 1; }
.subgate-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 12%, rgba(255,255,255,.10) 0%, transparent 46%),
        radial-gradient(circle at 50% 100%, rgba(90,140,255,.12) 0%, transparent 55%),
        linear-gradient(180deg, rgba(9,9,12,.96) 0%, rgba(7,7,10,.99) 100%);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
/* Медленные искры на фоне — тот же приём, что в сплэше и окнах наград */
.subgate-sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.subgate-sparks i {
    position: absolute; left: var(--sg-x); bottom: -12px;
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(255,255,255,.65);
    box-shadow: 0 0 10px rgba(255,255,255,.55);
    animation: sgSpark var(--sg-t, 7s) linear var(--sg-d, 0ms) infinite;
    opacity: 0;
}
@keyframes sgSpark {
    0% { transform: translateY(0) scale(.6); opacity: 0; }
    12% { opacity: .9; }
    100% { transform: translateY(-104vh) scale(1); opacity: 0; }
}

.subgate-card {
    position: relative; z-index: 2;
    width: 100%; max-width: 390px; margin: auto;
    background: linear-gradient(170deg, var(--card) 0%, #15151a 100%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    padding: 26px 20px 20px;
    text-align: center;
    box-shadow: 0 26px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
    transform: translateY(18px) scale(.94);
    opacity: 0;
    transition: transform .46s cubic-bezier(.18,1.24,.32,1), opacity .34s var(--ease);
}
.subgate.show .subgate-card { transform: translateY(0) scale(1); opacity: 1; }
/* Дышащее кольцо за логотипом */
.subgate-ring {
    position: absolute; top: -60px; left: 50%; width: 220px; height: 220px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 62%);
    animation: sgRing 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes sgRing {
    0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); }
    50% { opacity: .95; transform: translateX(-50%) scale(1.1); }
}

.subgate-logo { position: relative; width: 84px; height: 84px; margin: 0 auto 12px; }
.subgate-logo img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    border-radius: 50%;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.6));
    animation: sgLogo 4.2s ease-in-out infinite;
}
@keyframes sgLogo {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-5px) rotate(-1.5deg); }
}
/* Замочек — визуальная метафора «доступ закрыт» */
.subgate-lock {
    position: absolute; right: -6px; bottom: -6px;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #F2F2F5, #B9B9C4);
    color: #16161c;
    box-shadow: 0 6px 14px rgba(0,0,0,.55);
    animation: sgLockPulse 2.4s ease-in-out infinite;
}
.subgate-lock .uic { width: 18px; height: 18px; stroke-width: 2.1; }
@keyframes sgLockPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 14px rgba(0,0,0,.55); }
    50% { transform: scale(1.08); box-shadow: 0 6px 20px rgba(255,255,255,.28); }
}
.subgate-card.is-ok .subgate-lock {
    background: linear-gradient(160deg, #7DFFA6, #2FBF62);
    animation: none;
}

.subgate-word {
    font-family: "Inter", sans-serif; font-weight: 900; font-size: 17px;
    letter-spacing: 3px; color: var(--muted2); margin-bottom: 14px;
}
.subgate-word span { color: var(--white); }
.subgate-title {
    font-size: 21px; font-weight: 800; color: var(--white); margin-bottom: 8px;
    letter-spacing: -.3px;
}
.subgate-text {
    font-size: 14px; line-height: 1.5; color: var(--muted); margin-bottom: 18px;
    padding: 0 4px;
}

/* Список каналов: их два (новости и выплаты), расстояние держим здесь, а не
   инлайновыми отступами в JS. */
.subgate-channels { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

/* Карточка канала — кликабельна целиком */
.subgate-channel {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; text-align: left;
    background: var(--card2); border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px; padding: 12px 14px;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.subgate-channel:hover, .subgate-channel:active {
    transform: translateY(-2px) scale(1.015);
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 18px rgba(255,255,255,.10);
}
.sgc-ava {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #2AABEE, #229ED9);
    box-shadow: 0 4px 12px rgba(34,158,217,.4);
}
.sgc-ava img { width: 26px; height: 26px; object-fit: contain; display: block; }
.sgc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sgc-meta b {
    font-size: 15px; font-weight: 700; color: var(--white);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sgc-meta i {
    font-style: normal; font-size: 12.5px; color: var(--muted2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sgc-go { color: var(--muted2); display: flex; align-items: center; }
.sgc-go .uic { width: 20px; height: 20px; }
.subgate-channel:hover .sgc-go { color: var(--white); }

/* Зачтённый канал: вместо стрелки зелёная галочка. Каналов два, и игрок должен
   видеть, какой уже засчитан, а не общее «подписка не найдена». */
.sgc-ok {
    display: none; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
    background: rgba(125,255,166,.16); color: #7DFFA6;
}
.sgc-ok .uic { width: 15px; height: 15px; stroke-width: 2.6; }
.subgate-channel.is-done { border-color: rgba(125,255,166,.34); background: rgba(125,255,166,.07); }
.subgate-channel.is-done .sgc-go { display: none; }
.subgate-channel.is-done .sgc-ok { display: flex; }
.subgate-channel.is-done .sgc-meta b { color: #CFFFE0; }

.subgate-perks { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; }
.subgate-perks li {
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px; color: var(--silver); padding: 5px 2px;
}
.subgate-perks li span {
    width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(125,255,166,.14); color: #7DFFA6;
}
.subgate-perks li span .uic { width: 13px; height: 13px; stroke-width: 2.6; }

/* «Подписаться» — светлая, главная кнопка окна: ведёт в первый непройденный
   канал. У базового .btn фона нет, поэтому задаём его здесь. */
.subgate-card .subgate-sub {
    margin-top: 0; min-height: 52px;
    background: linear-gradient(180deg, #FFFFFF, #E7E9EE);
    border-color: rgba(255,255,255,.5); color: #10131A;
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.subgate-card .subgate-sub:active { background: linear-gradient(180deg, #F2F3F6, #D8DBE2); }
.subgate-card .subgate-check { margin-top: 10px; min-height: 50px; font-size: 14px; }
.subgate-check.is-loading { color: transparent; position: relative; pointer-events: none; }
.subgate-check.is-loading::after {
    content: ''; position: absolute; width: 20px; height: 20px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,.25);
    border-top-color: var(--white);
    animation: sgSpin .7s linear infinite;
}
@keyframes sgSpin { to { transform: rotate(360deg); } }

.subgate-status {
    min-height: 18px; margin-top: 12px;
    font-size: 12.5px; line-height: 1.45; color: var(--muted2);
    transition: color .2s var(--ease);
}
.subgate-status.hint { color: var(--muted); }
.subgate-status.err { color: #FF8A8A; }
.subgate-status.ok { color: #7DFFA6; }

/* Отказ — карточка коротко трясётся, без системного алерта */
.subgate-card.is-deny { animation: sgDeny .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes sgDeny {
    10%, 90% { transform: translateX(-3px); }
    20%, 80% { transform: translateX(5px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}
/* Успех — карточка выдыхает и уезжает */
.subgate-card.is-ok {
    border-color: rgba(125,255,166,.4);
    box-shadow: 0 26px 60px rgba(0,0,0,.7), 0 0 30px rgba(125,255,166,.22);
    animation: sgOk .6s cubic-bezier(.18,1.3,.32,1);
}
@keyframes sgOk {
    0% { transform: scale(1); }
    45% { transform: scale(1.035); }
    100% { transform: scale(1); }
}

@media (max-width: 380px) {
    .subgate-card { padding: 22px 16px 18px; border-radius: 20px; }
    .subgate-logo { width: 72px; height: 72px; }
    .subgate-title { font-size: 19px; }
    .subgate-perks li { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .subgate-sparks { display: none; }
    .subgate-ring, .subgate-logo img, .subgate-lock,
    .subgate-card.is-deny, .subgate-card.is-ok { animation: none !important; }
    .subgate-card { transition: opacity .2s linear; transform: none; }
    .subgate.show .subgate-card { transform: none; }
}

/* ============================================================
   ОКНО «ОСТАЛИСЬ НЕПРОКРУЧЕННЫЕ ФРИСПИНЫ»
   Наследует акцент/свечение/шрифт активного слота (--m-acc, --m-glow,
   --m-font), поэтому у каждого слота выглядит в его собственном стиле.
   Отличается от интро более спокойной подачей: не «поздравляем»,
   а «продолжим с того места, где остановились».
   ============================================================ */
.fsresume .vg-fs-congrats {
    font-size: clamp(15px, 4.6vw, 20px);
    letter-spacing: 3px;
    background: linear-gradient(180deg, #FFFFFF 0%, #D6D6E0 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: none;
    opacity: .92;
}
.fsresume .vg-fs-won {
    margin-top: 10px;
    font-size: clamp(20px, 6.4vw, 27px);
}
/* Счётчик остатка — крупный акцент окна */
.fsresume .vg-fs-pill {
    animation: fsrPop .68s cubic-bezier(.16,1.62,.3,1) both,
               fsrBreath 2.3s ease-in-out .68s infinite;
}
@keyframes fsrPop {
    0% { transform: scale(.34) rotate(-10deg); opacity: 0; }
    62% { transform: scale(1.14) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}
@keyframes fsrBreath {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(0,0,0,.5),
        inset 0 3px 10px rgba(255,255,255,.5),
        0 0 30px color-mix(in srgb, var(--m-acc) 70%, transparent); }
    50% { transform: scale(1.045); box-shadow: 0 10px 28px rgba(0,0,0,.55),
        inset 0 3px 12px rgba(255,255,255,.6),
        0 0 46px color-mix(in srgb, var(--m-acc) 90%, transparent); }
}
/* Длинная подпись в две строки не должна ломать вёрстку карточки */
.fsresume .vg-fs-label {
    font-size: clamp(13px, 4vw, 17px);
    letter-spacing: 1.4px;
    line-height: 1.35;
    max-width: 300px;
    margin: 0 auto;
}
.fsresume .vg-fs-tap {
    margin-top: 20px;
    font-size: 13px;
    color: rgba(255,255,255,.8);
}
/* Кольцо-подсветка за карточкой в цвете слота */
.fsresume .vg-modal-card::before {
    content: '';
    position: absolute; inset: -30% -12%;
    background: radial-gradient(circle at 50% 42%,
        color-mix(in srgb, var(--m-glow) 34%, transparent) 0%, transparent 62%);
    pointer-events: none;
    animation: fsrHalo 3.4s ease-in-out infinite;
    z-index: -1;
}
@keyframes fsrHalo {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .fsresume .vg-fs-pill,
    .fsresume .vg-modal-card::before,
    .fsresume .vg-fs-tap { animation: none !important; }
}

/* Баннер FREE SPINS не скрывался: общий `.hidden { display: none }` (0,1,0)
   проигрывал по специфичности правилу `.slot-screen .slot-fs-banner`
   с `display: grid` (0,2,0). Из-за этого плашка висела во всех слотах,
   показывая остаток фриспинов от предыдущего слота. */
.slot-screen .slot-fs-banner.hidden { display: none !important; }

/* ============================================================
   VELTFISH / BIG-BASS-BONANZA — ДИЗАЙНЕРСКИЙ АРТ-ПАК (5x3)
   Всё scoped через [data-slot="big-bass-bonanza"], чтобы не задеть
   остальные слоты. Геометрия сетки замерена по прозрачным окнам
   рамки 1843x1107 (окна x 41..1800, y 27..1050).
   ============================================================ */
.slot-screen[data-slot="big-bass-bonanza"] .slot-art-bg { background-position: center top; }
.slot-screen[data-slot="big-bass-bonanza"] .slot-art-bg::after {
    /* Затемнение к низу: барабан и кнопки читаются поверх светлого озера */
    background: linear-gradient(180deg, rgba(6,20,16,.18) 0%, rgba(5,22,26,.40) 55%, rgba(3,12,14,.82) 100%);
}
.slot-screen[data-slot="big-bass-bonanza"] .slot-signboard {
    width: min(54%, 300px);
    margin: 0 auto 8px;
    filter: drop-shadow(0 7px 14px rgba(0,0,0,.72)) drop-shadow(0 0 12px rgba(239,182,60,.34));
}
.slot-screen[data-slot="big-bass-bonanza"] .slot-machine.has-art {
    aspect-ratio: 1843 / 1107;
    max-width: 510px;
    margin-inline: auto;
}
.slot-screen[data-slot="big-bass-bonanza"] .slot-machine.has-art #slotGrid.slot-grid {
    gap: 0;
    border-radius: 4px;
    contain: layout paint;
}
.slot-screen[data-slot="big-bass-bonanza"] .slot-column { gap: 0; }
.slot-screen[data-slot="big-bass-bonanza"] .slot-cell { padding: 1.1%; }
.slot-screen[data-slot="big-bass-bonanza"] .slot-symbol {
    /* Символы — круглые медальоны, поэтому занимают ячейку почти целиком */
    width: 96%; height: 96%;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.6));
}
/* Крючок-скаттер и рыбак-вайлд выделены сильнее прочих символов */
.slot-screen[data-slot="big-bass-bonanza"] .sym-scatter {
    transform: scale(1.05);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.62)) drop-shadow(0 0 13px rgba(239,182,60,.85));
}
.slot-screen[data-slot="big-bass-bonanza"] .sym-wild {
    transform: scale(1.05);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.62)) drop-shadow(0 0 13px rgba(44,159,196,.82));
}
/* Победный символ качается на волне — рыбацкий характер вместо простого прыжка */
.slot-screen[data-slot="big-bass-bonanza"] .slot-cell.sym-win .slot-symbol {
    animation: fishSymbolWin .62s cubic-bezier(.24,1.28,.35,1) 3;
}
@keyframes fishSymbolWin {
    0%,100% { transform: scale(1) rotate(0); filter: brightness(1) drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
    35% { transform: scale(1.12) rotate(-3.5deg); filter: brightness(1.2) drop-shadow(0 0 15px rgba(239,182,60,.95)); }
    70% { transform: scale(1.08) rotate(3deg); filter: brightness(1.14) drop-shadow(0 0 12px rgba(44,159,196,.9)); }
}
/* Рыбак с множителем в бонусе «дышит» — видно, что он соберёт рыбу */
.slot-screen[data-slot="big-bass-bonanza"] .slot-cell .wild-mult {
    animation: fishWildIdle 2s ease-in-out infinite;
}
@keyframes fishWildIdle {
    0%,100% { transform: scale(1.05); filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(44,159,196,.6)); }
    50% { transform: scale(1.12); filter: drop-shadow(0 3px 6px rgba(0,0,0,.64)) drop-shadow(0 0 18px rgba(239,182,60,.9)); }
}

/* ---- Плашки WIN / BIG WIN / MEGA WIN ----
   Плашки нарисованы под слот, окно суммы у всех тиров на одной высоте
   (73.9%), поэтому сумма всегда строго по центру окна и не задевает надпись. */
.slot-win-popup.has-plaque[data-slot="big-bass-bonanza"] .slot-win-plaque { width: min(92vw, 500px); }
.slot-win-popup.has-plaque[data-slot="big-bass-bonanza"] .plaque-amount {
    /* Деревянное окно занимает 8.7%..91% ширины и 26..39% высоты плашки
       (замерено по пикселям), поэтому цифру можно ставить крупной. */
    left: 11%; right: 11%;
    font-family: 'Oswald', 'Fredoka', sans-serif;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: clamp(38px, 12.4vw, 72px);
    line-height: 1;
    color: #FFF6DC;
    /* Тёплая тень под дерево + золотое свечение = цифра «лежит» в окне */
    text-shadow:
        0 3px 0 rgba(46,20,4,.85),
        0 5px 10px rgba(18,8,2,.75),
        0 0 20px rgba(239,182,60,.75),
        0 0 42px rgba(239,182,60,.4);
}
.slot-win-popup.has-plaque[data-slot="big-bass-bonanza"].big .plaque-amount { font-size: clamp(34px, 11.2vw, 65px); }
.slot-win-popup.has-plaque[data-slot="big-bass-bonanza"].mega .plaque-amount { font-size: clamp(31px, 10.2vw, 59px); }
.slot-win-popup.has-plaque[data-slot="big-bass-bonanza"].win .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="big-bass-bonanza"].big .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="big-bass-bonanza"].mega .slot-win-content { --plaque-optical-y: 0px; }

/* ---- Фича «сбор рыбы»: косяк рыб с номиналами + рыбак ---- */
.fish-collect-overlay.has-art .fish-shoal {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(6px, 2.4vw, 14px);
    margin: 6px 0 12px;
    min-height: 76px;
}
.fish-collect-overlay.has-art .fish-one {
    position: relative;
    width: clamp(58px, 17vw, 78px);
    display: grid; place-items: center;
    animation: fishPop .46s cubic-bezier(.18,1.5,.32,1) both;
    animation-delay: calc(var(--fi, 0) * 90ms);
    transition: transform .42s cubic-bezier(.4,0,.6,1), opacity .42s ease;
}
.fish-collect-overlay.has-art .fish-one img {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
.fish-collect-overlay.has-art .fish-one b {
    position: absolute; left: 50%; bottom: 4px;
    transform: translateX(-50%);
    padding: 1px 8px 2px;
    border-radius: 999px;
    background: rgba(6,20,24,.88);
    border: 1.5px solid rgba(239,182,60,.9);
    color: #FFE9A8;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(11px, 3.2vw, 14px);
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
@keyframes fishPop {
    0% { opacity: 0; transform: scale(.4) translateY(14px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Рыбак подсёк — рыбы улетают к нему вниз и гаснут */
.fish-collect-overlay.has-art .fish-one.caught {
    transform: translateY(58px) scale(.34) rotate(12deg);
    opacity: 0;
}
.fish-collect-overlay.has-art .fish-collectors {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
.fish-collect-overlay.has-art .fish-collectors img {
    width: clamp(56px, 16vw, 76px); height: auto; display: block;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.66)) drop-shadow(0 0 12px rgba(44,159,196,.6));
    animation: fishCollectorBob 1.5s ease-in-out infinite;
    animation-delay: calc(var(--ci, 0) * 180ms);
}
@keyframes fishCollectorBob {
    0%,100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
}
.fish-collect-overlay.has-art .fish-mult {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(22px, 7vw, 34px);
    font-weight: 700;
    color: #FFE9A8;
    text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 0 16px rgba(239,182,60,.85);
    animation: fishMultPulse 1.2s ease-in-out infinite;
}
@keyframes fishMultPulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .slot-screen[data-slot="big-bass-bonanza"] .slot-cell.sym-win .slot-symbol,
    .slot-screen[data-slot="big-bass-bonanza"] .slot-cell .wild-mult,
    .fish-collect-overlay.has-art .fish-one,
    .fish-collect-overlay.has-art .fish-collectors img,
    .fish-collect-overlay.has-art .fish-mult { animation: none !important; }
    .fish-collect-overlay.has-art .fish-one { opacity: 1; transform: none; }
}

/* Баннер фриспинов: чистая деревянно-золотая подложка под тему слота.
   «Панель при бонуске» из пака сюда НЕ ставим — это лента с рыбаками-вайлдами,
   а не декоративная полоса: растянутая под баннер она перебивала текст. */
.slot-screen[data-slot="big-bass-bonanza"] .slot-fs-banner {
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.14), transparent 46%),
        linear-gradient(135deg, rgba(74,44,18,.96), rgba(30,18,8,.97));
    border-color: rgba(239,182,60,.9);
    box-shadow: inset 0 1px 8px rgba(255,255,255,.18), 0 5px 16px rgba(0,0,0,.5),
                0 0 20px rgba(239,182,60,.35);
}
.slot-screen[data-slot="big-bass-bonanza"] .slot-fs-banner .fs-title { color: #FFE9A8; }
.slot-screen[data-slot="big-bass-bonanza"] .slot-fs-banner b { color: #FFE9A8; }

/* ============================================================
   ТОРЖЕСТВО ПОСЛЕ СЧЁТА СУММЫ
   Класс .counted навешивается, когда цифра добежала до итога.
   До этого момента сумма спокойно считается, после — плашка и число
   получают усиленную реакцию: удар масштабом, свечение, блик.
   Работает для всех слотов (и для текстового варианта без плашки).
   ============================================================ */
/* Базовый transform суммы у слотов разный (у VeltPaws сумма центрируется по X),
   поэтому анимация масштабирует поверх него через переменную. */
.slot-win-popup .plaque-amount { --amount-base: translateY(-50%); }
.slot-win-popup[data-slot="dog-house"] .plaque-amount { --amount-base: translate(-50%, 0); }
.slot-win-popup .slot-win-amount { --amount-base: translateY(0); }
/* !important нужен: у существующих «дыханий» суммы специфичность выше
   (tap-to-close и per-slot селекторы), а торжество должно их перебивать. */
.slot-win-popup.counted .plaque-amount,
.slot-win-popup.counted .slot-win-amount {
    animation: winAmountCelebrate .72s cubic-bezier(.18,1.5,.3,1) both,
               winAmountGlow 1.5s ease-in-out .72s infinite !important;
}
@keyframes winAmountCelebrate {
    0% { transform: var(--amount-base, translateY(-50%)) scale(1); }
    38% { transform: var(--amount-base, translateY(-50%)) scale(1.28); }
    62% { transform: var(--amount-base, translateY(-50%)) scale(.96); }
    100% { transform: var(--amount-base, translateY(-50%)) scale(1.06); }
}
@keyframes winAmountGlow {
    0%,100% { filter: brightness(1); }
    50% { filter: brightness(1.22) drop-shadow(0 0 14px rgba(255,231,154,.9)); }
}
/* Сама плашка коротко «ухает» вместе с цифрой */
.slot-win-popup.counted.has-plaque .plaque-wrap {
    animation: plaqueCelebrate .62s cubic-bezier(.2,1.45,.3,1) both !important;
}
@keyframes plaqueCelebrate {
    0% { transform: scale(1); }
    40% { transform: scale(1.07); }
    100% { transform: scale(1.02); }
}
/* Пробегающий блик по плашке — «золото сверкнуло».
   Блик обрезается по картинке, поэтому включаем его только там, где сумма
   лежит ВНУТРИ плашки. У VeltPaws сумма выводится под плашкой, и overflow
   её бы срезал — поэтому этот слот из блика исключён. */
.slot-win-popup.counted.has-plaque:not([data-slot="dog-house"]) .plaque-wrap {
    overflow: hidden;
    border-radius: 18px;
}
.slot-win-popup.counted.has-plaque:not([data-slot="dog-house"]) .plaque-wrap::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.5) 50%, transparent 66%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: plaqueShine .82s ease-out .1s 2;
}
@keyframes plaqueShine {
    0% { transform: translateX(-115%); opacity: 0; }
    22% { opacity: 1; }
    100% { transform: translateX(115%); opacity: 0; }
}
/* На MEGA торжество ещё заметнее */
.slot-win-popup.counted.mega .plaque-amount,
.slot-win-popup.counted.mega .slot-win-amount {
    animation: winAmountCelebrateMega .86s cubic-bezier(.16,1.62,.28,1) both,
               winAmountGlow 1.2s ease-in-out .86s infinite !important;
}
@keyframes winAmountCelebrateMega {
    0% { transform: var(--amount-base, translateY(-50%)) scale(1); }
    32% { transform: var(--amount-base, translateY(-50%)) scale(1.42); }
    56% { transform: var(--amount-base, translateY(-50%)) scale(.93); }
    78% { transform: var(--amount-base, translateY(-50%)) scale(1.16); }
    100% { transform: var(--amount-base, translateY(-50%)) scale(1.09); }
}

@media (prefers-reduced-motion: reduce) {
    .slot-win-popup.counted .plaque-amount,
    .slot-win-popup.counted .slot-win-amount,
    .slot-win-popup.counted.has-plaque .plaque-wrap,
    .slot-win-popup.counted.has-plaque .plaque-wrap::after { animation: none !important; }
}

/* Вывеска VeltWest: у слота не было своего правила, поэтому работало базовое
   с margin-top -20px и она задиралась под топбар. Опускаем в поток и делаем
   крупнее — по размеру как у VeltPaws. */
.slot-screen[data-slot="wild-west-gold"] .slot-signboard {
    /* Крупнее и вплотную к барабану — как у VeltPaws / VeltFish */
    width: min(72%, 400px);
    margin: 2px auto 2px;
    filter: drop-shadow(0 7px 15px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(255,183,77,.3));
}

/* ============================================================
   ТАБЛО ДЖЕКПОТОВ НАД БАРАБАНОМ (MINI / MAJOR / MEGA)
   Плашки из дизайн-пака слота, суммы считаются от текущей ставки.
   Лежит в потоке между вывеской и барабаном — ничего не перекрывает.
   ============================================================ */
.slot-jackpot-bar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(4px, 1.6vw, 10px);
    width: min(100%, 470px);
    margin: 0 auto 6px;
    padding: 0 2px;
}
.slot-jackpot-bar .sjp {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: block;
    line-height: 0;
    transition: transform .22s var(--ease), filter .22s var(--ease);
}
.slot-jackpot-bar .sjp img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 9px rgba(0,0,0,.6));
}
/* MEGA чуть крупнее — визуальная иерархия как в оригинале */
.slot-jackpot-bar .sjp-mega { flex-grow: 1.1; }
.slot-jackpot-bar .sjp-mini { flex-grow: .95; }
/* Сумма — в нижнем окне плашки, строго по центру */
.slot-jackpot-bar .sjp-val {
    position: absolute;
    /* Бордовое окно замерено по плашкам: центр 80.8% (mini), 78.6% (major),
       79.5% (mega); по ширине окно почти во всю плашку, берём отступы с запасом. */
    left: 12%; right: 12%;
    top: 79.5%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 1;
    font-family: 'Cinzel', 'Oswald', serif;
    font-weight: 700;
    font-size: clamp(9px, 2.9vw, 14px);
    letter-spacing: .2px;
    color: #FFF3CE;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(255,214,120,.75);
}
.slot-jackpot-bar .sjp-mini .sjp-val { top: 80.8%; }
.slot-jackpot-bar .sjp-major .sjp-val { top: 78.6%; }
.slot-jackpot-bar .sjp-mega .sjp-val { top: 79.5%; }
/* Мягкое дыхание золота — табло не выглядит статичной картинкой */
.slot-jackpot-bar .sjp-mega img { animation: jackpotBreath 3.1s ease-in-out infinite; }
.slot-jackpot-bar .sjp-major img { animation: jackpotBreath 3.1s ease-in-out .35s infinite; }
.slot-jackpot-bar .sjp-mini img { animation: jackpotBreath 3.1s ease-in-out .7s infinite; }
@keyframes jackpotBreath {
    0%, 100% { filter: drop-shadow(0 4px 9px rgba(0,0,0,.6)) brightness(1); }
    50% { filter: drop-shadow(0 4px 12px rgba(0,0,0,.62)) brightness(1.12)
                  drop-shadow(0 0 10px rgba(255,206,102,.5)); }
}
.slot-jackpot-bar .sjp:hover,
.slot-jackpot-bar .sjp.is-hover {
    transform: translateY(-2px) scale(1.035);
    filter: drop-shadow(0 0 12px rgba(255,206,102,.55));
}
/* На узких экранах подпись не должна вылезать из окна плашки */
@media (max-width: 360px) {
    .slot-jackpot-bar { gap: 3px; }
    .slot-jackpot-bar .sjp-val { font-size: 9px; left: 6%; right: 6%; }
}
@media (prefers-reduced-motion: reduce) {
    .slot-jackpot-bar .sjp img { animation: none !important; }
}

/* ============================================================
   ФИКС ЗАЛИПАНИЯ ПЛАШКИ + ЕДИНЫЙ КРУПНЫЙ РАЗМЕР
   ============================================================ */

/* 1) Залипание. Торжество (.counted) стояло с animation-fill-mode: both,
   поэтому после проигрыша плашка ЗАСТЫВАЛА в конечном кадре и выглядела
   «зависшей». Теперь после удара сразу подхватывается бесконечное парение,
   а сумма продолжает дышать — картинка всегда живая. */
/* Движение самой плашки задаётся ниже, в блоке «ЕДИНАЯ ПЛАВНАЯ АНИМАЦИЯ»
   (plaqueCheer + plaqueRestWarm). Здесь остаётся только поведение суммы. */

/* Сумма: после подскока переходит в бесконечное дыхание, а не встаёт колом */
.slot-win-popup.counted .plaque-amount,
.slot-win-popup.counted .slot-win-amount {
    animation: winAmountCelebrate .72s cubic-bezier(.18,1.5,.3,1) both,
               winAmountAlive 1.8s ease-in-out .72s infinite !important;
}
@keyframes winAmountAlive {
    0%, 100% { transform: var(--amount-base, translateY(-50%)) scale(1.04);
               filter: brightness(1); }
    50% { transform: var(--amount-base, translateY(-50%)) scale(1.11);
          filter: brightness(1.2) drop-shadow(0 0 15px rgba(255,231,154,.95)); }
}
.slot-win-popup.counted.mega .plaque-amount,
.slot-win-popup.counted.mega .slot-win-amount {
    animation: winAmountCelebrateMega .86s cubic-bezier(.16,1.62,.28,1) both,
               winAmountAlive 1.35s ease-in-out .86s infinite !important;
}
/* Блик пробегает бесконечно, с паузой — «золото поблёскивает» */
.slot-win-popup.counted.has-plaque:not([data-slot="dog-house"]) .plaque-wrap::after {
    animation: plaqueShine 2.6s ease-out .1s infinite;
}

/* 2) Размер. Для тира WIN плашка получала класс compact-win (340px), поэтому
   у VeltCandy / VeltRush / VeltWild / VeltWest она была заметно мельче, чем
   у VeltPaws и VeltFish, где есть свои правила. Выравниваем все арт-слоты
   на крупный размер. Селекторы пер-слотовые: у них выше специфичность,
   иначе старые правила перебили бы новые. */
.slot-win-popup.has-plaque[data-slot="sweet-bonanza"] .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="sugar-rush"] .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="wolf-gold"] .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="wild-west-gold"] .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="dog-house"] .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="big-bass-bonanza"] .slot-win-plaque {
    width: min(94vw, 520px);
}
.slot-win-popup.has-plaque[data-slot="sweet-bonanza"].big .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="sugar-rush"].big .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="wolf-gold"].big .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="wild-west-gold"].big .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="dog-house"].big .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="big-bass-bonanza"].big .slot-win-plaque {
    width: min(96vw, 545px);
}
.slot-win-popup.has-plaque[data-slot="sweet-bonanza"].mega .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="sugar-rush"].mega .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="wolf-gold"].mega .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="wild-west-gold"].mega .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="dog-house"].mega .slot-win-plaque,
.slot-win-popup.has-plaque[data-slot="big-bass-bonanza"].mega .slot-win-plaque {
    width: min(99vw, 580px);
}
/* compact-win больше не должен зажимать плашку арт-слотов */
.slot-win-popup.compact-win.has-plaque .plaque-wrap { max-width: 100%; }

/* ============================================================
   СПЕЦ-СИМВОЛЫ НА БАРАБАНЕ (wild / scatter / bonus / multiplier)
   Крупнее обычных символов и с собственным «дыханием», чтобы игрок
   сразу видел, что упало что-то важное. Классы sym-special / sym-wild /
   sym-scatter / sym-bonus / sym-multiplier ставит renderSymbol(),
   поэтому правило работает во ВСЕХ слотах сразу.
   ============================================================ */
.slot-screen .slot-cell .sym-special {
    /* Базовый размер спец-символа: заметно крупнее рядового */
    transform: scale(1.12);
    transform-origin: center;
    z-index: 2;
    /* «Прилёт»: одноразовый удар при появлении в ячейке */
    animation: specLand .5s cubic-bezier(.22,1.42,.35,1) both;
}
/* Прилёт играет первым, затем — вечное «дыхание» своего типа.
   Последняя анимация в списке перекрывает предыдущую по transform/filter,
   поэтому кадры состыкованы: specLand заканчивается на scale(1.12),
   с которого начинается каждый *Pulse — стыка не видно. */
.slot-screen .slot-cell .sym-wild,
.slot-screen .slot-cell .wild-mult {
    animation: specLand .5s cubic-bezier(.22,1.42,.35,1) both,
               specWildPulse 1.75s ease-in-out .5s infinite;
}
.slot-screen .slot-cell .sym-scatter {
    animation: specLand .54s cubic-bezier(.2,1.5,.34,1) both,
               specScatterPulse 1.55s ease-in-out .54s infinite;
}
.slot-screen .slot-cell .sym-bonus,
.slot-screen .slot-cell .sym-multiplier {
    animation: specLand .52s cubic-bezier(.22,1.45,.35,1) both,
               specBonusPulse 1.65s ease-in-out .52s infinite;
}
/* Удар при посадке: символ влетает крупнее нормы и вспыхивает,
   затем упруго садится на свой рабочий масштаб */
@keyframes specLand {
    0%   { transform: scale(.78); opacity: .5;
           filter: brightness(1.75) drop-shadow(0 0 0 rgba(0,0,0,0)); }
    38%  { transform: scale(1.27); opacity: 1;
           filter: brightness(1.34)
                   drop-shadow(0 0 26px var(--slot-accent, #FFD24B)); }
    66%  { transform: scale(1.06);
           filter: brightness(1.08)
                   drop-shadow(0 0 14px var(--slot-glow, rgba(255,210,90,.6))); }
    100% { transform: scale(1.12); opacity: 1;
           filter: brightness(1) drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
}
/* Вайлд: дышит и подсвечивается акцентом слота */
@keyframes specWildPulse {
    0%, 100% { transform: scale(1.12);
               filter: drop-shadow(0 2px 4px rgba(0,0,0,.55))
                       drop-shadow(0 0 8px var(--slot-glow, rgba(255,210,90,.5))); }
    50% { transform: scale(1.22);
          filter: drop-shadow(0 3px 6px rgba(0,0,0,.6))
                  drop-shadow(0 0 20px var(--slot-accent, #FFD24B))
                  brightness(1.14); }
}
/* Скаттер — самый «дорогой» символ, реакция сильнее и чуть с покачиванием */
@keyframes specScatterPulse {
    0%, 100% { transform: scale(1.12) rotate(0);
               filter: drop-shadow(0 2px 4px rgba(0,0,0,.55))
                       drop-shadow(0 0 9px var(--slot-glow, rgba(255,210,90,.55))); }
    45% { transform: scale(1.26) rotate(-2.5deg);
          filter: drop-shadow(0 3px 7px rgba(0,0,0,.6))
                  drop-shadow(0 0 24px var(--slot-accent, #FFD24B))
                  brightness(1.2); }
    75% { transform: scale(1.18) rotate(2deg); }
}
@keyframes specBonusPulse {
    0%, 100% { transform: scale(1.12);
               filter: drop-shadow(0 2px 4px rgba(0,0,0,.55))
                       drop-shadow(0 0 9px var(--slot-accent2, rgba(255,160,90,.5))); }
    50% { transform: scale(1.23);
          filter: drop-shadow(0 3px 6px rgba(0,0,0,.6))
                  drop-shadow(0 0 22px var(--slot-accent2, #FF9A4B))
                  brightness(1.16); }
}
/* ---- Аура под спец-символом ----------------------------------------
   Элемент <i class="spec-aura"> ставит renderSymbol() первым внутри
   .slot-symbol, поэтому он рисуется ПОД картинкой и не влияет на поток.
   Вне ячеек барабана (заголовок слота, сводка) он скрыт.               */
.spec-aura { display: none; }
.slot-screen .slot-cell .slot-symbol { position: relative; }
.slot-screen .slot-cell .slot-symbol > .spec-aura {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    width: 104%; aspect-ratio: 1 / 1; max-height: 104%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--spec-col, #FFD24B) 44%, transparent) 0%,
        color-mix(in srgb, var(--spec-col, #FFD24B) 16%, transparent) 46%,
        transparent 70%);
    opacity: 0;
    animation: specAuraIn .5s ease-out both,
               specAuraBreath 1.75s ease-in-out .5s infinite;
    will-change: transform, opacity;
}
/* Расходящееся кольцо — один раз, в момент посадки */
.slot-screen .slot-cell .slot-symbol > .spec-aura::after {
    content: '';
    position: absolute; inset: 14%;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--spec-col, #FFD24B) 80%, transparent);
    opacity: 0;
    animation: specRing .62s cubic-bezier(.2,.7,.3,1) both;
}
/* Цвет ауры по типу символа: вайлд — акцент слота, бонус/иксы — второй акцент,
   скаттер — самый горячий, поэтому чуть светлее акцента */
.spec-aura-wild       { --spec-col: var(--slot-accent, #FFD24B); }
.spec-aura-scatter    { --spec-col: var(--slot-glow, #FFE38A); }
.spec-aura-bonus,
.spec-aura-multiplier { --spec-col: var(--slot-accent2, #FF9A4B); }
@keyframes specAuraIn {
    0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.45); }
    45%  { opacity: .95; transform: translate(-50%, -50%) scale(1.16); }
    100% { opacity: .46;  transform: translate(-50%, -50%) scale(1); }
}
@keyframes specAuraBreath {
    0%, 100% { opacity: .42; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: .78; transform: translate(-50%, -50%) scale(1.13); }
}
@keyframes specRing {
    0%   { opacity: 0;   transform: scale(.5); }
    22%  { opacity: .85; }
    100% { opacity: 0;   transform: scale(1.55); }
}

/* Пока барабан крутится, спец-подсветка не нужна — иначе лента мигает */
.slot-grid.spinning .slot-cell .sym-special,
.slot-column.reel-spin .slot-cell .sym-special,
.reel-tile .sym-special { animation: none !important; transform: scale(1.08); }
.slot-grid.spinning .slot-cell .spec-aura,
.slot-column.reel-spin .slot-cell .spec-aura,
.reel-tile .spec-aura { display: none !important; }
/* Победивший спец-символ: пер-слотовая анимация выигрыша важнее «дыхания» */
.slot-cell.sym-win .sym-special { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    .slot-screen .slot-cell .sym-special { animation: none !important; transform: scale(1.1); }
    .slot-screen .slot-cell .slot-symbol > .spec-aura {
        animation: none !important; opacity: .4;
    }
    .slot-screen .slot-cell .slot-symbol > .spec-aura::after { animation: none !important; opacity: 0; }
}

/* ============================================================
   ИКСЫ VELTRUSH — крупнее, ярче и дольше на экране
   Раньше они успевали только мигнуть: мелкие и жизнь 1.25с.
   Теперь заметный вылет, покачивание с подсветкой и медленный уход.
   ============================================================ */
/* Только размер и свечение. Движение здесь больше НЕ задаётся: раньше это
   правило (специфичнее общего) перебивало фазовые классы, и икс продолжал
   улетать одной анимацией, не дожидаясь выигрыша. */
.slot-screen[data-slot="sugar-rush"] .rush-feature-mult {
    width: clamp(84px, 24vw, 138px);
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.72))
            drop-shadow(0 0 20px rgba(244,91,255,.9));
    z-index: 3;
}
/* Икс крупнее ячейки, поэтому не обрезаем его рамкой окна барабана */
.slot-screen[data-slot="sugar-rush"] .rush-mult-layer { overflow: visible; }

/* Панель бонуса над барабаном (лента рыбаков VeltFish) — только во фриспинах */
.slot-fs-panel {
    display: block;
    width: min(100%, 470px);
    height: auto;
    margin: 0 auto 4px;
    opacity: 0;
    transform: translateY(-8px) scaleX(.9);
    transition: opacity .34s var(--ease), transform .42s cubic-bezier(.18,1.4,.3,1);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
    pointer-events: none;
}
.slot-fs-panel.show {
    opacity: 1;
    transform: translateY(0) scaleX(1);
    animation: fsPanelGlow 2.6s ease-in-out .5s infinite;
}
@keyframes fsPanelGlow {
    0%, 100% { filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)) brightness(1); }
    50% { filter: drop-shadow(0 4px 14px rgba(0,0,0,.62)) brightness(1.15)
                  drop-shadow(0 0 12px var(--slot-glow, rgba(239,182,60,.5))); }
}
@media (prefers-reduced-motion: reduce) {
    .slot-fs-panel.show { animation: none !important; }
}

/* ============================================================
   ПЛАШКИ ВЫИГРЫША — ЕДИНАЯ ПЛАВНАЯ АНИМАЦИЯ (источник истины)
   ============================================================
   Раньше на .plaque-wrap одновременно висели transition и шесть разных
   правил animation из разных мест файла (plaquePop*, plaqueFloat,
   plaqueCentered*, plaqueAlive*). Браузер смешивал transition с animation
   и переключался между несостыкованными кадрами — отсюда рывки и ощущение
   «залипания». Ниже одна цепочка: вход -> покой -> торжество -> покой,
   где конец каждой анимации совпадает с началом следующей.
   ============================================================ */

/* transition убираем полностью: анимациями управляем только keyframes */
.slot-win-popup.has-plaque .plaque-wrap {
    transition: none !important;
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
/* Никакой обрезки: overflow:hidden резал плашку по прямоугольнику, из-за чего
   её мягкая тень обрубалась и вокруг арта была видна рамка-«фон». Блик теперь
   ограничен маской по самой картинке (--plaque-img задаётся из JS). */
.slot-win-popup.has-plaque .plaque-wrap { overflow: visible; border-radius: 0; }

/* Длительности по тиру: чем крупнее выигрыш, тем солиднее выезд */
.slot-win-popup.has-plaque.win.show { --pl-in: 460ms; --pl-idle: 3.2s; }
.slot-win-popup.has-plaque.big.show { --pl-in: 560ms; --pl-idle: 2.8s; }
.slot-win-popup.has-plaque.mega.show { --pl-in: 660ms; --pl-idle: 2.4s; }

/* Вход: мягкий разгон с лёгким перелётом, без поворота — картинка читается
   чётко, без смазанных наклонных кадров. */
.slot-win-popup.has-plaque.show .plaque-wrap {
    animation: plaqueEnter var(--pl-in, 500ms) cubic-bezier(.21,1.04,.26,1) both,
               plaqueRest var(--pl-idle, 3s) ease-in-out var(--pl-in, 500ms) infinite !important;
}
@keyframes plaqueEnter {
    0% { opacity: 0; transform: translate3d(0,14px,0) scale(.84); }
    58% { opacity: 1; transform: translate3d(0,0,0) scale(1.032); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes plaqueRest {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(0,-4px,0) scale(1.016); }
}

/* Торжество (после того как сумма добежала). Начинается ровно со scale(1) —
   стык с покоем незаметен, дальше снова бесконечный покой, но «тёплый». */
.slot-win-popup.counted.has-plaque .plaque-wrap {
    animation: plaqueCheer 580ms cubic-bezier(.2,1.22,.3,1) both,
               plaqueRestWarm 2.6s ease-in-out 580ms infinite !important;
}
.slot-win-popup.counted.mega.has-plaque .plaque-wrap {
    animation: plaqueCheer 640ms cubic-bezier(.18,1.3,.28,1) both,
               plaqueRestWarm 2.1s ease-in-out 640ms infinite !important;
}
@keyframes plaqueCheer {
    0% { transform: translate3d(0,0,0) scale(1); }
    46% { transform: translate3d(0,-6px,0) scale(1.072); }
    100% { transform: translate3d(0,0,0) scale(1.02); }
}
@keyframes plaqueRestWarm {
    0%, 100% { transform: translate3d(0,0,0) scale(1.02); }
    50% { transform: translate3d(0,-5px,0) scale(1.038); }
}

/* Сумма появляется мягким проявлением, а не выскакивает вместе с плашкой */
.slot-win-popup.has-plaque .plaque-amount {
    opacity: 0;
    will-change: transform, opacity;
}
.slot-win-popup.has-plaque.show .plaque-amount {
    animation: plaqueAmountIn 380ms ease-out calc(var(--pl-in, 500ms) * .55) both;
}
@keyframes plaqueAmountIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* После счёта сумма получает свой ритм, но opacity уже 1 — без мигания */
.slot-win-popup.counted.has-plaque .plaque-amount { opacity: 1; }

/* Блик реже и мягче + строго по силуэту плашки, без прямоугольных краёв */
.slot-win-popup.counted.has-plaque:not([data-slot="dog-house"]) .plaque-wrap::after {
    background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
    animation: plaqueShine 4.6s ease-in-out .35s infinite;
    -webkit-mask-image: var(--plaque-img, none);
    mask-image: var(--plaque-img, none);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
/* Если маска почему-то недоступна — блик просто не показываем, чем портить кадр */
@supports not (mask-image: url("")) {
    .slot-win-popup.counted.has-plaque .plaque-wrap::after { display: none; }
}

/* MEGA: свечение статичное. Анимация filter заставляла браузер перерисовывать
   тень каждый кадр — именно она давала подтормаживание на телефонах. */
.slot-win-popup.has-plaque.mega .slot-win-plaque {
    filter: drop-shadow(0 10px 26px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(255,196,60,.8));
}

@media (prefers-reduced-motion: reduce) {
    .slot-win-popup.has-plaque.show .plaque-wrap,
    .slot-win-popup.counted.has-plaque .plaque-wrap {
        animation: plaqueAmountIn 160ms linear both !important;
        transform: none !important;
    }
    .slot-win-popup.has-plaque.show .plaque-amount { animation: none; opacity: 1; }
    .slot-win-popup.counted.has-plaque:not([data-slot="dog-house"]) .plaque-wrap::after {
        animation: none !important;
    }
}

/* Контейнер попапа: раньше стоял transition: all — браузер плавно тянул
   ещё и backdrop-filter, box-shadow и border, а это самые дорогие свойства.
   Плюс поверх перехода играла тряска winShake, и оба спорили за transform.
   Оставляем переход только по transform/opacity, а у плашечных попапов
   тряску убираем: масштаб и подъём уже делает сама плашка. */
.slot-win-popup {
    transition: transform .42s cubic-bezier(.24,1.18,.32,1), opacity .3s ease-out;
}
.slot-win-popup.has-plaque.show { animation: none !important; }
.slot-win-popup.has-plaque {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* ============================================================
   БАННЕРЫ ГЛАВНОЙ — готовые картинки из дизайна
   Исходники 3600x1920 = ровно 15:8, что совпадает с формой карточки,
   поэтому содержимое не обрезается и не растягивается. Текст и графика
   уже внутри картинки, поэтому HTML-подписи прячем визуально, но
   оставляем в разметке для скринридеров и поиска.
   ============================================================ */
.banner.banner-welcome,
.banner.banner-fair,
.banner.banner-news,
.banner.banner-pvp {
    /* Форма как у исходников — картинка ложится пиксель в пиксель */
    aspect-ratio: 15 / 8;
    min-height: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    /* Скругление и обрезка уже есть у .banner (radius 20px, overflow hidden) */
}
.banner.banner-welcome { background-image: url("/static/banners/welcome.webp"); }
.banner.banner-fair    { background-image: url("/static/banners/fair.webp"); }
.banner.banner-news    { background-image: url("/static/banners/bonus.webp"); }
.banner.banner-pvp     { background-image: url("/static/banners/pvp.webp"); }

/* Подписи скрыты визуально, но доступны ассистивным технологиям */
.banner.banner-welcome .banner-txt,
.banner.banner-fair .banner-txt,
.banner.banner-news .banner-txt,
.banner.banner-pvp .banner-txt {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* Мягкая подсветка рамкой при наведении вместо прежнего фона */
.banner.banner-welcome,
.banner.banner-fair,
.banner.banner-news,
.banner.banner-pvp {
    box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
    transition: transform .24s var(--ease), box-shadow .24s var(--ease);
    cursor: pointer;
}
.banner.banner-welcome:hover, .banner.banner-welcome.is-hover,
.banner.banner-fair:hover, .banner.banner-fair.is-hover,
.banner.banner-news:hover, .banner.banner-news.is-hover,
.banner.banner-pvp:hover, .banner.banner-pvp.is-hover {
    transform: translateY(-3px) scale(1.012);
    box-shadow: 0 14px 30px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.14),
                0 0 22px rgba(140,120,255,.22);
}
.banner.banner-welcome:active, .banner.banner-fair:active,
.banner.banner-news:active, .banner.banner-pvp:active {
    transform: scale(.985);
}

@media (prefers-reduced-motion: reduce) {
    .banner.banner-welcome, .banner.banner-fair,
    .banner.banner-news, .banner.banner-pvp { transition: none; }
    .banner.banner-welcome:hover, .banner.banner-fair:hover,
    .banner.banner-news:hover, .banner.banner-pvp:hover { transform: none; }
}

/* ============================================================
   VELTGODS / GATES-OF-OLYMPUS — ДИЗАЙНЕРСКИЙ АРТ-ПАК (6x5)
   Всё scoped через [data-slot="gates-of-olympus"].
   Рамка барабана в паке появилась позже остальных ассетов (Барабан-1.png,
   2128x1774): её окна замерены профилями яркости — по X ровно 6 полос, по Y
   ровно 5, что совпало с сеткой слота. Инсеты сетки лежат в SLOT_ART.
   Класс .no-reel-art остался запасным: если у пака рамки нет, барабан
   получает лёгкую тёмную подложку вместо картинки.
   ============================================================ */
.slot-screen[data-slot="gates-of-olympus"] .slot-art-bg { background-position: center top; }
.slot-screen[data-slot="gates-of-olympus"] .slot-art-bg::after {
    /* Небо светлое сверху — притемняем к низу, чтобы кнопки читались */
    background: linear-gradient(180deg, rgba(8,10,26,.20) 0%, rgba(10,12,30,.42) 55%, rgba(4,5,16,.84) 100%);
}
.slot-screen[data-slot="gates-of-olympus"] .slot-signboard {
    width: min(64%, 356px);
    margin: 2px auto 6px;
    filter: drop-shadow(0 7px 15px rgba(0,0,0,.72)) drop-shadow(0 0 14px rgba(240,190,60,.36));
}
/* Барабан без рамки: лёгкая тёмная подложка, чтобы символы не терялись на небе */
.slot-machine.has-art.no-reel-art {
    background-image: none;
    background-color: rgba(6,8,22,.34);
    border-radius: 18px;
    box-shadow: inset 0 0 30px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.slot-screen[data-slot="gates-of-olympus"] .slot-machine.has-art {
    /* Ровно пропорции арта рамки (2128x1774 = 1.19955), а не «примерно 6/5»:
       инсеты сетки замерены в пикселях этого арта и при другом соотношении
       поле уехало бы из окон. */
    aspect-ratio: 2128 / 1774;
    max-width: 520px;
    margin-inline: auto;
    /* Медальон икса свисает ниже рамки на 9% её высоты — оставляем ему место,
       иначе он уходил бы под кнопки (у них z-index выше). */
    margin-bottom: clamp(16px, 6.5vw, 32px);
}
.slot-screen[data-slot="gates-of-olympus"] .slot-machine.has-art #slotGrid.slot-grid {
    gap: 0;
    contain: layout paint;
}
.slot-screen[data-slot="gates-of-olympus"] .slot-column { gap: 0; }
.slot-screen[data-slot="gates-of-olympus"] .slot-cell { padding: 1.6%; }
.slot-screen[data-slot="gates-of-olympus"] .slot-symbol {
    /* Символы — круглые медальоны, занимают ячейку почти целиком */
    width: 95%; height: 95%;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.62));
}
/* Зевс-скаттер сияет заметно сильнее остальных */
.slot-screen[data-slot="gates-of-olympus"] .sym-scatter {
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.66)) drop-shadow(0 0 16px rgba(240,190,60,.92));
}
/* Победный символ вспыхивает золотом с лёгким разворотом */
.slot-screen[data-slot="gates-of-olympus"] .slot-cell.sym-win .slot-symbol {
    animation: godsSymbolWin .6s cubic-bezier(.24,1.3,.35,1) 3;
}
@keyframes godsSymbolWin {
    0%,100% { transform: scale(1) rotate(0); filter: brightness(1) drop-shadow(0 3px 5px rgba(0,0,0,.62)); }
    40% { transform: scale(1.16) rotate(-3deg);
          filter: brightness(1.26) drop-shadow(0 0 18px rgba(240,190,60,.98)); }
    72% { transform: scale(1.08) rotate(2deg);
          filter: brightness(1.14) drop-shadow(0 0 13px rgba(108,123,255,.85)); }
}

/* ---- Плашки WIN / BIG WIN / MEGA WIN ----
   Центр тёмного поля замерен по каждой плашке (win 69.9%, big 66.1%,
   mega 66.7%), поле занимает ~82% ширины — сумма с запасом внутри. */
.slot-win-popup.has-plaque[data-slot="gates-of-olympus"] .plaque-amount {
    left: 12%; right: 12%;
    font-family: 'Cinzel', 'Oswald', serif;
    font-weight: 700;
    font-size: clamp(30px, 10vw, 58px);
    line-height: 1;
    color: #FFF3D2;
    text-shadow:
        0 3px 0 rgba(52,30,4,.85),
        0 5px 10px rgba(14,8,2,.72),
        0 0 20px rgba(240,190,60,.8),
        0 0 44px rgba(240,190,60,.42);
}
.slot-win-popup.has-plaque[data-slot="gates-of-olympus"].big .plaque-amount { font-size: clamp(28px, 9.4vw, 54px); }
.slot-win-popup.has-plaque[data-slot="gates-of-olympus"].mega .plaque-amount { font-size: clamp(26px, 8.8vw, 50px); }
.slot-win-popup.has-plaque[data-slot="gates-of-olympus"].win .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="gates-of-olympus"].big .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="gates-of-olympus"].mega .slot-win-content { --plaque-optical-y: 0px; }

/* ---- Сферы-множители (главная приколюха слота) ---- */
.gods-mult-layer {
    position: absolute;
    inset: var(--ri-top, 1%) var(--ri-right, 2%) var(--ri-bottom, 1%) var(--ri-left, 2%);
    z-index: 9;
    pointer-events: none;
    overflow: visible;
}
/* Как и у иксов VeltRush, движением сферы управляют только фазовые классы
   .mult-landing / .mult-playing — здесь остаётся один внешний вид. */
.gods-mult {
    position: absolute;
    width: clamp(72px, 21vw, 118px);
    height: auto;
    transform: translate(-50%, -50%) scale(.2);
    opacity: 0;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.7))
            drop-shadow(0 0 22px rgba(240,190,60,.85));
}

@media (prefers-reduced-motion: reduce) {
    .slot-screen[data-slot="gates-of-olympus"] .slot-cell.sym-win .slot-symbol { animation: none !important; }
}

/* ============================================================
   ТИХИЙ ПОКАЗ МЕЛКОГО ВЫИГРЫША
   Вместо плашки на весь экран — короткая пилюля над барабаном.
   Наследует акцент активного слота, поэтому выглядит частью слота.
   ============================================================ */
.slot-quiet-win {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: min(92%, 340px);
    margin: 0 auto 6px;
    padding: 6px 16px 7px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--slot-accent, #FFD24B) 70%, transparent);
    background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 55%),
                linear-gradient(135deg, rgba(16,16,24,.92), rgba(10,10,16,.95));
    box-shadow: 0 4px 14px rgba(0,0,0,.5),
                0 0 16px color-mix(in srgb, var(--slot-accent, #FFD24B) 30%, transparent);
    font-family: var(--slot-font, 'Fredoka', sans-serif);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px) scale(.94);
    transition: opacity .2s ease-out, transform .28s cubic-bezier(.2,1.3,.3,1);
    pointer-events: none;
}
.slot-quiet-win.show { opacity: 1; transform: translateY(0) scale(1); }
.slot-quiet-win .qw-label {
    font-size: clamp(9px, 2.6vw, 11px);
    font-weight: 800;
    letter-spacing: 1.4px;
    color: color-mix(in srgb, var(--slot-accent, #FFD24B) 55%, #FFFFFF);
    opacity: .9;
}
.slot-quiet-win .qw-amount {
    font-size: clamp(15px, 4.6vw, 20px);
    font-weight: 800;
    color: #FFF6DA;
    text-shadow: 0 1px 2px rgba(0,0,0,.85),
                 0 0 10px color-mix(in srgb, var(--slot-accent, #FFD24B) 60%, transparent);
}
.slot-quiet-win .qw-cur {
    font-size: clamp(9px, 2.6vw, 11px);
    font-weight: 700;
    color: rgba(255,255,255,.6);
}
@media (prefers-reduced-motion: reduce) {
    .slot-quiet-win { transition: opacity .12s linear; transform: none; }
    .slot-quiet-win.show { transform: none; }
}

/* ============================================================
   БАРАБАН КРУПНЕЕ У VELTPAWS И VELTWEST
   Тестер отметил, что у этих двух слотов поле выглядит мелким.
   Поднимаем предельную ширину и слегка увеличиваем сами символы,
   не трогая отступы сетки — геометрия рамки замерена и остаётся
   прежней, поэтому символы по-прежнему стоят в своих ячейках.
   ============================================================ */
.slot-screen[data-slot="dog-house"] .slot-machine.has-art,
.slot-screen[data-slot="wild-west-gold"] .slot-machine.has-art {
    max-width: min(100%, 580px);
    width: 100%;
}
/* Символы занимают ячейку плотнее — но с зазором, чтобы не слипались */
.slot-screen[data-slot="dog-house"] .slot-cell { padding: 1.0%; }
.slot-screen[data-slot="dog-house"] .slot-symbol { width: 97%; height: 97%; }
.slot-screen[data-slot="wild-west-gold"] .slot-cell { padding: 1.0%; }
.slot-screen[data-slot="wild-west-gold"] .slot-symbol { width: 97%; height: 97%; }
/* Вывеска подтягивается под увеличенное поле, чтобы пропорции не поехали */
.slot-screen[data-slot="dog-house"] .slot-signboard { width: min(66%, 380px); }
.slot-screen[data-slot="wild-west-gold"] .slot-signboard { width: min(76%, 424px); }

/* ============================================================
   СВОДКА ПО СЛОТУ (таблица выплат)
   ============================================================ */
.pp-btn.pp-info {
    background: var(--card2);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.12);
}
.pp-btn.pp-info:hover, .pp-btn.pp-info.is-hover {
    background: var(--btn-hover);
    border-color: rgba(255,255,255,.24);
}
/* Таблица выплат — окно слота, его вид не меняем вместе с остальными модалками.
   База .velt-modal переехала на новую палитру, поэтому старый вид закрепляем
   здесь явно. */
.paytable-overlay { background: rgba(0,0,0,.62); }
.paytable-modal {
    max-width: 460px;
    width: calc(100% - 24px);
    text-align: left;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    max-height: min(86vh, 720px);
    background: linear-gradient(180deg, #202027 0%, #141418 100%);
    border-color: rgba(255,255,255,.1);
}
.paytable-modal h2 { font-weight: 900; }
.pt-loading { padding: 26px 6px; text-align: center; color: var(--muted); font-size: 14px; }
.pt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pt-title {
    flex: 1; min-width: 0;
    font-size: 19px; font-weight: 800; color: var(--white);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-close {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
    background: var(--card2); color: var(--muted);
    font-size: 15px; cursor: pointer; line-height: 1;
    transition: transform .2s var(--ease), color .2s var(--ease);
}
.pt-close:hover { color: var(--white); transform: rotate(90deg); }
/* Факты о слоте: три пункта в ряд, чтобы ничего не наезжало на узких экранах */
.pt-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}
.pt-facts span {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 10px;
    border-radius: 12px;
    background: var(--card2);
    font-size: 13px; font-weight: 700; color: var(--white);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-facts span i {
    font-style: normal; font-size: 10px; font-weight: 600;
    letter-spacing: .4px; color: var(--muted2); text-transform: uppercase;
}
.pt-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.pt-section {
    margin: 14px 0 6px;
    font-size: 12px; font-weight: 800; letter-spacing: 1px;
    color: var(--slot-accent, #FFD24B); text-transform: uppercase;
}
.pt-section:first-child { margin-top: 0; }
.pt-note { font-size: 11.5px; color: var(--muted2); line-height: 1.45; margin-bottom: 8px; }
.pt-rows { display: flex; flex-direction: column; gap: 6px; }
.pt-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.05);
}
.pt-sym { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; }
.pt-sym img, .pt-sym svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.pt-sym-body { flex: 1; min-width: 0; }
.pt-sym-name {
    font-size: 12.5px; font-weight: 700; color: var(--silver);
    text-transform: capitalize;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-pays { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; }
.pt-pays span {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-size: 12px; font-weight: 700; color: var(--white);
}
.pt-pays span i {
    font-style: normal;
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    font-size: 10.5px; font-weight: 800; color: var(--muted);
    text-align: center;
}
.pt-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.pt-list li { font-size: 12.5px; line-height: 1.5; color: var(--silver); }
.pt-list li b { color: var(--white); }
.paytable-modal .btn.btn-bonus.full { margin-top: 12px; flex: 0 0 auto; }

@media (max-width: 380px) {
    .pt-facts { grid-template-columns: 1fr 1fr; }
    .pt-facts span:last-child { grid-column: span 2; }
    .pt-sym { width: 36px; height: 36px; flex: 0 0 36px; }
    .pt-pays span { font-size: 11px; }
}

/* ============================================================
   VELTFRUIT / FRUIT-PARTY — ДИЗАЙНЕРСКИЙ АРТ-ПАК (6 колонок × 7 рядов)
   Всё scoped через [data-slot="fruit-party"] — другие слоты не задеты.
   Геометрия поля замерена по разделителям ячеек рамки 2026×2026:
   5 вертикальных линий (шаг 274.25) = 6 колонок,
   6 горизонтальных (шаг 239.2) = 7 рядов.
   ============================================================ */
.slot-screen[data-slot="fruit-party"] .slot-art-bg { background-position: center top; }
.slot-screen[data-slot="fruit-party"] .slot-art-bg::after {
    /* Фон вверху яркий алый — притемняем к низу, чтобы кнопки читались */
    background: linear-gradient(180deg, rgba(26,2,6,.20) 0%, rgba(30,3,8,.40) 55%, rgba(12,1,4,.84) 100%);
}
.slot-screen[data-slot="fruit-party"] .slot-signboard {
    width: min(70%, 400px);
    margin: 2px auto 4px;
    filter: drop-shadow(0 7px 15px rgba(30,0,6,.72)) drop-shadow(0 0 14px rgba(245,194,74,.38));
}
.slot-screen[data-slot="fruit-party"] .slot-machine.has-art {
    /* Рамка пака квадратная (2026×2026) */
    aspect-ratio: 1 / 1;
    max-width: 520px;
    margin-inline: auto;
}
.slot-screen[data-slot="fruit-party"] .slot-machine.has-art #slotGrid.slot-grid {
    gap: 0;
    border-radius: 4px;
    contain: layout paint;
}
.slot-screen[data-slot="fruit-party"] .slot-column { gap: 0; }
/* Ячейка шире, чем выше (274×239), поэтому отступ небольшой —
   фрукт вписывается по короткой стороне и не наезжает на соседей */
.slot-screen[data-slot="fruit-party"] .slot-cell { padding: 1.3%; }
.slot-screen[data-slot="fruit-party"] .slot-symbol {
    width: 95%; height: 95%;
    filter: drop-shadow(0 3px 4px rgba(28,0,6,.58));
}
.slot-screen[data-slot="fruit-party"] .sym-img {
    object-fit: contain;
    transform-origin: center;
}
/* Golden Fruit — единственный спец-символ слота, сияет золотом пака */
.slot-screen[data-slot="fruit-party"] .sym-scatter {
    filter: drop-shadow(0 3px 6px rgba(28,0,6,.6)) drop-shadow(0 0 16px rgba(245,194,74,.92));
}
/* Выигравший фрукт наливается соком: короткое сжатие и вспышка,
   в характере каскадных слотов (как rushSymBounce у VeltRush) */
.slot-screen[data-slot="fruit-party"] .slot-cell.sym-win .slot-symbol {
    animation: fruitSymPop .56s cubic-bezier(.26,1.3,.4,1) 3;
}
@keyframes fruitSymPop {
    0%, 100% { transform: scale(1) rotate(0);
               filter: drop-shadow(0 3px 4px rgba(28,0,6,.58)); }
    38%      { transform: scale(1.14) rotate(-2.5deg);
               filter: drop-shadow(0 4px 7px rgba(28,0,6,.66))
                       drop-shadow(0 0 14px rgba(245,194,74,.85)) brightness(1.14); }
    68%      { transform: scale(.97) rotate(1.5deg); }
}

/* Иксы фриспинов (×2 / ×4) — слой общий с VeltRush, перекрашиваем под пак */
.slot-screen[data-slot="fruit-party"] .rush-feature-mult {
    width: clamp(58px, 17vw, 96px);
    filter: drop-shadow(0 5px 9px rgba(28,0,6,.72))
            drop-shadow(0 0 18px rgba(245,194,74,.85));
}

/* ---- Плашки VeltFruit ----------------------------------------------
   Размеры как у остальных арт-слотов, чтобы плашка не была мельче.
   Сумма ложится в тёмную табличку: её центр замерен по каждой картинке
   (win 61.4%, big 65.6%, mega 69.2%), табличка занимает ~95% ширины —
   поэтому цифру можно ставить крупной, она заведомо внутри поля.        */
.slot-win-popup.has-plaque[data-slot="fruit-party"] .slot-win-plaque { width: min(94vw, 520px); }
.slot-win-popup.has-plaque[data-slot="fruit-party"].big .slot-win-plaque { width: min(96vw, 545px); }
.slot-win-popup.has-plaque[data-slot="fruit-party"].mega .slot-win-plaque { width: min(99vw, 580px); }
.slot-win-popup.has-plaque[data-slot="fruit-party"] .plaque-amount {
    left: 8%; right: 8%;
    font-family: 'Fredoka', 'Manrope', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 10.2vw, 60px);
    letter-spacing: .5px;
    color: #FFF4D2;
    text-shadow:
        0 2px 0 rgba(120,12,22,.95),
        0 4px 8px rgba(40,0,8,.9),
        0 0 18px rgba(245,194,74,.72),
        0 0 40px rgba(232,64,74,.42);
}
.slot-win-popup.has-plaque[data-slot="fruit-party"].big .plaque-amount { font-size: clamp(28px, 9.4vw, 55px); }
.slot-win-popup.has-plaque[data-slot="fruit-party"].mega .plaque-amount { font-size: clamp(26px, 8.8vw, 51px); }
/* Геометрия суммы задана замером — оптическая поправка не нужна */
.slot-win-popup.has-plaque[data-slot="fruit-party"].win .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="fruit-party"].big .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="fruit-party"].mega .slot-win-content { --plaque-optical-y: 0px; }

@media (prefers-reduced-motion: reduce) {
    .slot-screen[data-slot="fruit-party"] .slot-cell.sym-win .slot-symbol { animation: none !important; }
}

/* ============================================================
   VELTGEMS / AZTEC-GEMS — ДИЗАЙНЕРСКИЙ АРТ-ПАК (3×3 + 4-й барабан иксов)
   Всё scoped через [data-slot="aztec-gems"].
   Поле замерено по тёмным окнам рамки 3434×3434: три окна по X
   (центры 839.5 / 1716.5 / 2588, шаг 874.25) и три по Y
   (833 / 1684 / 2547.5, шаг 857.25).
   Справа от поля стоит отдельная узкая рамка «Барабан для иксов» из пака:
   её ширина ровно половина основной, а высота равна ей — поэтому пара
   центрируется через margin-right, равный ширине этого барабана.
   ============================================================ */
.slot-screen[data-slot="aztec-gems"] .slot-art-bg { background-position: center top; }
.slot-screen[data-slot="aztec-gems"] .slot-art-bg::after {
    background: linear-gradient(180deg, rgba(2,14,8,.20) 0%, rgba(3,16,9,.42) 55%, rgba(1,8,5,.86) 100%);
}
.slot-screen[data-slot="aztec-gems"] .slot-signboard {
    width: min(68%, 380px);
    margin: 2px auto 6px;
    filter: drop-shadow(0 7px 15px rgba(0,10,4,.75)) drop-shadow(0 0 14px rgba(240,194,74,.38));
}
.slot-screen[data-slot="aztec-gems"] .slot-machine.has-art {
    aspect-ratio: 1 / 1;
    /* Пара «поле + барабан иксов» = 1.5 ширины поля. Правый отступ ровно
       равен ширине барабана, поэтому auto слева центрирует пару целиком. */
    width: min(62vw, 330px);
    max-width: min(62vw, 330px);
    margin-left: auto;
    margin-right: min(31vw, 165px);
    overflow: visible;
}
.slot-screen[data-slot="aztec-gems"] .slot-machine.has-art #slotGrid.slot-grid {
    gap: 0;
    contain: layout paint;
}
.slot-screen[data-slot="aztec-gems"] .slot-column { gap: 0; }
.slot-screen[data-slot="aztec-gems"] .slot-cell { padding: 2.2%; }
.slot-screen[data-slot="aztec-gems"] .slot-symbol {
    /* Ячейки крупные (поле всего 3×3) — камень занимает почти всю */
    width: 93%; height: 93%;
    filter: drop-shadow(0 3px 5px rgba(0,12,5,.62));
}
.slot-screen[data-slot="aztec-gems"] .sym-img {
    object-fit: contain;
    transform-origin: center;
}
/* Золотой вайлд — единственный спец-символ слота, светится заметно сильнее */
.slot-screen[data-slot="aztec-gems"] .sym-wild {
    filter: drop-shadow(0 3px 6px rgba(0,12,5,.66)) drop-shadow(0 0 18px rgba(240,194,74,.95));
}
/* Камень ЛОВИТ СВЕТ ГРАНЯМИ: сыгравший символ доворачивается на оси Y, как
   настоящий гранёный камень под лампой, и на повороте вспыхивает.
   Раньше здесь был плоский scale+rotate — то же движение, что у остальных
   слотов, только в золоте. У пака с камнями движение обязано быть своим. */
.slot-screen[data-slot="aztec-gems"] .slot-cell.sym-win .slot-symbol {
    animation: gemsSymbolWin .64s cubic-bezier(.24,1.3,.38,1) 3;
}
@keyframes gemsSymbolWin {
    0%   { transform: perspective(520px) rotate3d(0,1,0,0deg) scale(1);
           filter: drop-shadow(0 3px 5px rgba(0,12,5,.62)); }
    26%  { transform: perspective(520px) rotate3d(0,1,0,-30deg) scale(1.16);
           filter: drop-shadow(0 4px 9px rgba(0,12,5,.72))
                   drop-shadow(0 0 20px rgba(255,248,220,.95)) brightness(1.34); }
    52%  { transform: perspective(520px) rotate3d(0,1,0,24deg) scale(1.1);
           filter: drop-shadow(0 4px 8px rgba(0,12,5,.7))
                   drop-shadow(0 0 16px rgba(240,194,74,.92)) brightness(1.2); }
    76%  { transform: perspective(520px) rotate3d(0,1,0,-9deg) scale(.98);
           filter: drop-shadow(0 3px 6px rgba(0,12,5,.66)) brightness(1.06); }
    100% { transform: perspective(520px) rotate3d(0,1,0,0deg) scale(1);
           filter: drop-shadow(0 3px 5px rgba(0,12,5,.62)); }
}

/* ---- ОГРАНКА НА СЫГРОВКЕ: слой поверх поля -------------------------------
   Через поле один раз проходит призматическая полоса, и от неё в каждом
   сыгравшем камне раскрывается гранёная звезда, бьёт блик-крест и уходит
   золотое кольцо. Порядок именно такой: свет сначала, грани следом — поэтому
   у камней задержка лесенкой (--gc-delay ставит JS), а не общая вспышка.
   Слой обрезан по рамке поля, чтобы полоса не выезжала на страницу. */
.gems-cut-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: 12px;
    overflow: hidden;
    pointer-events: none;
}
.gem-prism {
    position: absolute;
    top: -30%; left: -52%;
    width: 40%; height: 160%;
    pointer-events: none;
    opacity: 0;
    filter: blur(2px);
    mix-blend-mode: screen;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--slot-glow, #3FCB63) 42%, transparent) 24%,
        rgba(255,255,255,.94) 50%,
        color-mix(in srgb, var(--slot-accent, #F0C24A) 55%, transparent) 76%,
        transparent);
    animation: gemPrismSweep var(--gc-ms, 760ms) cubic-bezier(.3,.65,.3,1) both;
}
@keyframes gemPrismSweep {
    0%   { opacity: 0;  transform: translate3d(0, 0, 0) rotate(17deg); }
    16%  { opacity: 1;  transform: translate3d(90%, 0, 0) rotate(17deg); }
    84%  { opacity: .9; transform: translate3d(300%, 0, 0) rotate(17deg); }
    100% { opacity: 0;  transform: translate3d(360%, 0, 0) rotate(17deg); }
}
/* Точка стоит в центре сыгравшей ячейки, слои растут из неё в обе стороны */
.gem-cut { position: absolute; width: 0; height: 0; pointer-events: none; }
.gem-cut > b {
    position: absolute;
    left: 0; top: 0;
    display: block;
    pointer-events: none;
    opacity: 0;
}
/* Грани: шесть лучей огранки, расходятся и гаснут по краям через маску */
.gc-shards {
    width: 104px; height: 104px;
    mix-blend-mode: screen;
    background: conic-gradient(from 90deg,
        rgba(255,248,220,.95) 0 2.6%, transparent 2.6% 16.7%,
        color-mix(in srgb, var(--slot-glow, #3FCB63) 92%, transparent) 16.7% 19.3%, transparent 19.3% 33.3%,
        rgba(255,248,220,.95) 33.3% 35.9%, transparent 35.9% 50%,
        color-mix(in srgb, var(--slot-accent, #F0C24A) 92%, transparent) 50% 52.6%, transparent 52.6% 66.7%,
        rgba(255,248,220,.95) 66.7% 69.3%, transparent 69.3% 83.3%,
        color-mix(in srgb, var(--slot-accent, #F0C24A) 92%, transparent) 83.3% 85.9%, transparent 85.9% 100%);
    -webkit-mask: radial-gradient(circle, #000 10%, rgba(0,0,0,.7) 42%, transparent 72%);
            mask: radial-gradient(circle, #000 10%, rgba(0,0,0,.7) 42%, transparent 72%);
    animation: gemShards var(--gc-ms, 760ms) cubic-bezier(.2,.75,.3,1) var(--gc-delay, 0ms) both;
}
@keyframes gemShards {
    0%   { opacity: 0;  transform: translate3d(-50%,-50%,0) scale(.25) rotate(-30deg); }
    22%  { opacity: 1;  transform: translate3d(-50%,-50%,0) scale(1) rotate(0deg); }
    62%  { opacity: .7; transform: translate3d(-50%,-50%,0) scale(1.32) rotate(22deg); }
    100% { opacity: 0;  transform: translate3d(-50%,-50%,0) scale(1.75) rotate(38deg); }
}
/* Блик-крест: короткая белая искра, как отблеск от полированной грани */
.gc-glint {
    width: 116px; height: 116px;
    mix-blend-mode: screen;
    background:
        linear-gradient(90deg, transparent 47%, rgba(255,253,242,.98) 50%, transparent 53%),
        linear-gradient(0deg,  transparent 47%, rgba(255,253,242,.98) 50%, transparent 53%);
    -webkit-mask: radial-gradient(circle, #000 2%, rgba(0,0,0,.55) 26%, transparent 60%);
            mask: radial-gradient(circle, #000 2%, rgba(0,0,0,.55) 26%, transparent 60%);
    animation: gemGlint var(--gc-ms, 760ms) cubic-bezier(.15,.9,.25,1) var(--gc-delay, 0ms) both;
}
@keyframes gemGlint {
    0%   { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.15) rotate(0deg); }
    18%  { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.08) rotate(24deg); }
    46%  { opacity: .5; transform: translate3d(-50%,-50%,0) scale(.9) rotate(38deg); }
    100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.7) rotate(46deg); }
}
/* Кольцо: волна золота от камня, отделяет вспышку от фона */
.gc-ring {
    width: 62px; height: 62px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--slot-accent, #F0C24A) 88%, transparent);
    animation: gemRing var(--gc-ms, 760ms) cubic-bezier(.2,.7,.3,1) var(--gc-delay, 0ms) both;
}
@keyframes gemRing {
    0%   { opacity: 0;  transform: translate3d(-50%,-50%,0) scale(.3); }
    20%  { opacity: .95; transform: translate3d(-50%,-50%,0) scale(.85); }
    100% { opacity: 0;  transform: translate3d(-50%,-50%,0) scale(2.4); }
}

/* ---- 4-й барабан с иксами -------------------------------------------
   Арт 1717×3434 = ровно 1:2, поэтому при высоте 100% и ширине 50% от поля
   картинка ложится без искажений. Окно ячеек задано замеренными отступами. */
.mult-reel {
    position: absolute;
    left: 100%; top: 0;
    width: 50%; height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 4;
    transition: filter .25s var(--ease);
}
.mr-window {
    position: absolute;
    top: var(--mr-top, 6.6%);
    right: var(--mr-right, 28.5%);
    bottom: var(--mr-bottom, 8%);
    left: var(--mr-left, 27.3%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mr-cell {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mr-cell img {
    max-width: 94%;
    max-height: 86%;
    object-fit: contain;
    /* Соседние позиции барабана приглушены — работает только середина */
    opacity: .3;
    filter: grayscale(.4) brightness(.62);
    transform: scale(.9);
    transition: opacity .22s var(--ease), filter .22s var(--ease), transform .22s var(--ease);
}
.mr-cell.active img {
    opacity: 1;
    filter: drop-shadow(0 3px 6px rgba(0,12,5,.7)) drop-shadow(0 0 14px rgba(240,194,74,.9));
    transform: scale(1.06);
}
/* Рабочая позиция барабана — середина. Помечаем её всегда, чтобы игрок не
   принимал соседние позиции за результат (они после остановки пустые). */
.mr-cell.centre::before,
.mr-cell.centre::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 46%;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--slot-accent, #F0C24A) 85%, transparent), transparent);
    opacity: .5;
    pointer-events: none;
}
.mr-cell { position: relative; }
.mr-cell.centre::before { top: 4%; }
.mr-cell.centre::after { bottom: 4%; }
.mult-reel.landed .mr-cell.centre::before,
.mult-reel.landed .mr-cell.centre::after { opacity: 1; }
/* Пока барабан крутится — мельтешение без резких скачков яркости */
.mr-window.spinning .mr-cell img {
    opacity: .55;
    filter: blur(1px) brightness(.85);
    transform: scale(.94);
    transition: none;
}
/* Икс встал: рамка барабана вспыхивает золотом, сам икс подпрыгивает */
.mult-reel.landed { filter: drop-shadow(0 0 20px rgba(240,194,74,.72)); }
.mult-reel.landed .mr-cell.active img {
    animation: mrLand .62s cubic-bezier(.2,1.45,.32,1);
}
/* Икс на барабане — гранёный камень, поэтому он не просто подпрыгивает,
   а ПОВОРАЧИВАЕТСЯ гранью к игроку: заходит почти с ребра и доворачивается
   лицом. Конечный кадр совпадает с покоем .mr-cell.active img (scale 1.06),
   иначе после анимации был бы заметный щелчок. */
@keyframes mrLand {
    0%   { transform: perspective(440px) rotateY(-94deg) scale(.78); opacity: .35; }
    36%  { transform: perspective(440px) rotateY(16deg) scale(1.26); opacity: 1; }
    60%  { transform: perspective(440px) rotateY(-9deg) scale(1.0); opacity: 1; }
    82%  { transform: perspective(440px) rotateY(5deg) scale(1.12); opacity: 1; }
    100% { transform: perspective(440px) rotateY(0deg) scale(1.06); opacity: 1; }
}

/* ---- ЗАРЯД БАРАБАНА ИКСОВ -------------------------------------------------
   Барабан стоит справа, отдельно от поля, и раньше просто вставал: момент
   «сейчас будет икс» поймать было нельзя. Теперь рамка раскаляется, пока лента
   ещё крутится, и барабан мелко дрожит. Пустая позиция заряда не получает —
   иначе он обещал бы множитель каждый спин и перестал что-либо значить. */
.mr-charge {
    position: absolute;
    inset: 3%;
    border-radius: 16px;
    pointer-events: none;
    opacity: 0;
    box-shadow:
        inset 0 0 16px color-mix(in srgb, var(--slot-accent, #F0C24A) 65%, transparent),
        inset 0 0 46px color-mix(in srgb, var(--slot-glow, #3FCB63) 38%, transparent),
        0 0 22px color-mix(in srgb, var(--slot-accent, #F0C24A) 45%, transparent);
}
.mult-reel.charging .mr-charge {
    animation: mrCharge var(--mr-charge-ms, 150ms) ease-in-out infinite alternate;
}
@keyframes mrCharge {
    from { opacity: .1; }
    to   { opacity: 1; }
}
.mult-reel.charging {
    animation: mrShiver var(--mr-charge-ms, 150ms) ease-in-out infinite alternate;
}
@keyframes mrShiver {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-1.6px, .8px, 0); }
}

/* ---- ПОСАДКА: вспышка и ударная волна из рабочей ячейки -------------------
   Точка (--mr-cx/--mr-cy) и размер ячейки (--mr-cw) приходят из JS: окно
   ячеек задано процентными отступами замеренного арта, и повторить его
   середину в CSS можно только продублировав те же проценты. Слои лежат ВНЕ
   .mr-window, у которого overflow: hidden — внутри волну обрезало бы. */
.mr-flash, .mr-wave, .mr-beam {
    position: absolute;
    left: var(--mr-cx, 50%);
    top: var(--mr-cy, 50%);
    pointer-events: none;
    opacity: 0;
}
.mr-flash {
    width: calc(var(--mr-cw, 42px) * 2.4);
    height: calc(var(--mr-cw, 42px) * 2.4);
    border-radius: 50%;
    mix-blend-mode: screen;
    background: radial-gradient(circle, #FFFFFF 6%,
        color-mix(in srgb, var(--slot-accent, #F0C24A) 72%, transparent) 34%,
        color-mix(in srgb, var(--slot-glow, #3FCB63) 30%, transparent) 58%, transparent 74%);
}
.mult-reel.landed .mr-flash { animation: mrFlash var(--mr-ms, 560ms) ease-out both; }
@keyframes mrFlash {
    0%   { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.2); }
    20%  { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1); }
    100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(1.65); }
}
.mr-wave {
    width: calc(var(--mr-cw, 42px) * 1.1);
    height: calc(var(--mr-cw, 42px) * 1.1);
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--slot-accent, #F0C24A) 90%, transparent);
}
.mult-reel.landed .mr-wave { animation: mrWave var(--mr-ms, 560ms) cubic-bezier(.2,.7,.3,1) both; }
@keyframes mrWave {
    0%   { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.3); }
    16%  { opacity: 1; transform: translate3d(-50%,-50%,0) scale(.8); }
    100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(2.9); }
}
/* Крупный икс — крупнее и вспышка: величина множителя читается движением
   раньше, чем игрок разглядит цифру. */
.mult-reel.t-beam .mr-flash   { width: calc(var(--mr-cw, 42px) * 2.9); height: calc(var(--mr-cw, 42px) * 2.9); }
.mult-reel.t-ritual .mr-flash { width: calc(var(--mr-cw, 42px) * 3.6); height: calc(var(--mr-cw, 42px) * 3.6); }
.mult-reel.t-ritual .mr-wave  { border-width: 3px; }
/* Отдача: барабан физически вздрагивает от посадки. Без неё вспышка выглядела
   как наложенная картинка, а не как удар по самому барабану. У x25 отдача
   заметно сильнее — это половина ощущения от редкого икса. */
.mult-reel.landed:not(.quiet) {
    animation: mrRecoil var(--mr-ms, 560ms) cubic-bezier(.2,1.5,.3,1) both;
}
@keyframes mrRecoil {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    18%  { transform: translate3d(3px, 0, 0) scale(1.045); }
    46%  { transform: translate3d(-1px, 0, 0) scale(.99); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
.mult-reel.t-ritual.landed:not(.quiet) { animation-name: mrRecoilBig; }
@keyframes mrRecoilBig {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    14%  { transform: translate3d(6px, 0, 0) scale(1.09); }
    40%  { transform: translate3d(-3px, 0, 0) scale(.975); }
    68%  { transform: translate3d(2px, 0, 0) scale(1.03); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ---- ЛУЧ В ПОЛЕ ----------------------------------------------------------
   Икс работает не на барабане, а на всём выигрыше спина. Барабан стоит
   отдельно от символов, и по одной посадке не видно, что именно он умножил —
   поэтому с рабочей ячейки в сетку уходит луч. Ширина 230% от барабана: сам
   барабан ровно вдвое уже поля, так что луч перекрывает все три колонки.
   Растёт от правого края (transform-origin), поэтому и выглядит как выстрел
   от барабана к камням, а не как появившаяся полоса. */
.mr-beam {
    width: 230%;
    height: calc(var(--mr-cw, 42px) * .46);
    border-radius: 999px;
    transform-origin: right center;
    mix-blend-mode: screen;
    filter: blur(1px);
    background: linear-gradient(270deg,
        rgba(255,255,255,.95),
        color-mix(in srgb, var(--slot-accent, #F0C24A) 78%, transparent) 30%,
        color-mix(in srgb, var(--slot-glow, #3FCB63) 42%, transparent) 70%,
        transparent);
}
.mult-reel.firing .mr-beam { animation: mrBeam var(--mr-beam-ms, 360ms) cubic-bezier(.2,.8,.25,1) both; }
@keyframes mrBeam {
    0%   { opacity: 0;  transform: translate3d(-100%,-50%,0) scaleX(.02) scaleY(.35); }
    24%  { opacity: 1;  transform: translate3d(-100%,-50%,0) scaleX(1) scaleY(1); }
    66%  { opacity: .85; transform: translate3d(-100%,-50%,0) scaleX(1) scaleY(.66); }
    100% { opacity: 0;  transform: translate3d(-100%,-50%,0) scaleX(1) scaleY(.18); }
}

/* ---- ВОЛНА ПО ПОЛЮ -------------------------------------------------------
   Луч дошёл — по игровой зоне идёт золотое свечение, а камни пульсируют
   лесенкой ОТ БАРАБАНА (правая колонка первой): видно, что множитель
   «прошёл» через поле, а не просто мигнул где-то. */
.gems-field-hit {
    position: absolute;
    inset: -6px;
    z-index: 6;
    border-radius: 18px;
    pointer-events: none;
    opacity: 0;
    box-shadow:
        inset 0 0 30px color-mix(in srgb, var(--slot-accent, #F0C24A) 62%, transparent),
        inset 0 0 78px color-mix(in srgb, var(--slot-glow, #3FCB63) 40%, transparent);
    animation: gemsFieldHit var(--gf-ms, 360ms) ease-out both;
}
.gems-field-hit.t-ritual {
    box-shadow:
        inset 0 0 44px color-mix(in srgb, var(--slot-accent, #F0C24A) 80%, transparent),
        inset 0 0 112px color-mix(in srgb, var(--slot-glow, #3FCB63) 55%, transparent),
        0 0 40px color-mix(in srgb, var(--slot-accent, #F0C24A) 45%, transparent);
}
@keyframes gemsFieldHit {
    0%   { opacity: 0; }
    28%  { opacity: 1; }
    100% { opacity: 0; }
}
.slot-screen[data-slot="aztec-gems"] #slotGrid.gems-mult-hit .slot-cell:not(.sym-win) .slot-symbol {
    animation: gemsMultPulse var(--gf-ms, 360ms) ease-out both;
}
.slot-screen[data-slot="aztec-gems"] #slotGrid.gems-mult-hit .slot-column:nth-child(3) .slot-symbol { animation-delay: 0ms; }
.slot-screen[data-slot="aztec-gems"] #slotGrid.gems-mult-hit .slot-column:nth-child(2) .slot-symbol { animation-delay: 55ms; }
.slot-screen[data-slot="aztec-gems"] #slotGrid.gems-mult-hit .slot-column:nth-child(1) .slot-symbol { animation-delay: 110ms; }
@keyframes gemsMultPulse {
    0%   { transform: scale(1);
           filter: drop-shadow(0 3px 5px rgba(0,12,5,.62)); }
    34%  { transform: scale(1.13);
           filter: drop-shadow(0 4px 9px rgba(0,12,5,.7))
                   drop-shadow(0 0 18px rgba(240,194,74,.95)) brightness(1.5); }
    100% { transform: scale(1);
           filter: drop-shadow(0 3px 5px rgba(0,12,5,.62)); }
}

/* ---- ИКС БЕЗ ВЫИГРЫША ----------------------------------------------------
   Множитель приходит от сервера независимо от выигрыша, и на пустом спине он
   не умножает ничего. Праздновать его нельзя — это ровно та жалоба «упал икс,
   а сумма не изменилась». Поэтому такой икс встаёт тихо и приглушённо: он
   виден, но не притворяется победой. Правила идут ПОСЛЕ .landed, поэтому
   перебивают золотую засветку при равной специфичности. */
.mult-reel.quiet { filter: none; }
.mult-reel.quiet .mr-flash,
.mult-reel.quiet .mr-wave,
.mult-reel.quiet .mr-beam { display: none; }
.mult-reel.quiet .mr-cell.active img {
    opacity: .62;
    filter: grayscale(.5) brightness(.82);
    transform: scale(.98);
}
.mult-reel.quiet.landed .mr-cell.centre::before,
.mult-reel.quiet.landed .mr-cell.centre::after { opacity: .45; }

@media (max-width: 380px) {
    /* На узких экранах пара «поле + барабан» не должна упираться в края */
    .slot-screen[data-slot="aztec-gems"] .slot-machine.has-art {
        width: min(60vw, 300px);
        max-width: min(60vw, 300px);
        margin-right: min(30vw, 150px);
    }
}

/* ---- Плашки VeltGems ------------------------------------------------
   Центр свободного тёмного поля замерен по каждой картинке:
   win 73.3%, big 71.8%, mega 71.2% высоты; поле занимает 94–96% ширины. */
.slot-win-popup.has-plaque[data-slot="aztec-gems"] .slot-win-plaque { width: min(94vw, 520px); }
.slot-win-popup.has-plaque[data-slot="aztec-gems"].big .slot-win-plaque { width: min(96vw, 545px); }
.slot-win-popup.has-plaque[data-slot="aztec-gems"].mega .slot-win-plaque { width: min(99vw, 580px); }
.slot-win-popup.has-plaque[data-slot="aztec-gems"] .plaque-amount {
    left: 8%; right: 8%;
    font-family: 'Cinzel', 'Oswald', serif;
    font-weight: 700;
    /* Поле невысокое (около четверти плашки), поэтому кегль подобран так,
       чтобы строка гарантированно уместилась внутри тёмной вставки. */
    font-size: clamp(24px, 8.4vw, 48px);
    letter-spacing: .5px;
    color: #FFF6DA;
    text-shadow:
        0 2px 0 rgba(20,60,28,.95),
        0 4px 8px rgba(0,14,6,.9),
        0 0 18px rgba(240,194,74,.7),
        0 0 40px rgba(63,203,99,.38);
}
.slot-win-popup.has-plaque[data-slot="aztec-gems"].big .plaque-amount { font-size: clamp(25px, 8.6vw, 50px); }
.slot-win-popup.has-plaque[data-slot="aztec-gems"].mega .plaque-amount { font-size: clamp(26px, 8.8vw, 52px); }
.slot-win-popup.has-plaque[data-slot="aztec-gems"].win .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="aztec-gems"].big .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="aztec-gems"].mega .slot-win-content { --plaque-optical-y: 0px; }

@media (prefers-reduced-motion: reduce) {
    .slot-screen[data-slot="aztec-gems"] .slot-cell.sym-win .slot-symbol { animation: none !important; }
    .mult-reel.landed .mr-cell.active img { animation: none !important; }
    /* Праздник иксов и огранка — чистая декорация: при отключённых анимациях
       снимаем целиком, значение икса всё равно видно на барабане. */
    .gems-cut-layer,
    .gems-field-hit,
    .mr-charge, .mr-flash, .mr-wave, .mr-beam { display: none !important; }
    .mult-reel.charging,
    .mult-reel.landed { animation: none !important; }
    .slot-screen[data-slot="aztec-gems"] #slotGrid.gems-mult-hit .slot-cell .slot-symbol {
        animation: none !important;
    }
}

/* ============================================================
   ЛИПКИЕ ВАЙЛДЫ В БОНУСЕ (VeltPaws, VeltWest)
   Сервер держит их сам, здесь только визуал: ячейка с закреплённым
   вайлдом остаётся на месте поверх крутящейся ленты, а не прокручивается
   вместе с колонкой. Класс .reel-hold ставится на время прокрута,
   .sticky-wild живёт до конца раунда.
   ============================================================ */
/* Правило, которое гасит ячейки под лентой, липкую ячейку не касается.
   Специфичность выше исходного (.slot-column.reel-hidden > .slot-cell),
   плюс !important — там оно тоже стоит. */
.slot-column.reel-hidden > .slot-cell.reel-hold,
.slot-column.reel-hidden > .slot-cell.reel-hold .slot-symbol {
    visibility: visible !important;
    opacity: 1 !important;
}
/* Лента идёт с z-index 3 — держим вайлд выше неё */
.slot-column.reel-spinning > .slot-cell.reel-hold { z-index: 5; }

/* ===== Гигантский символ 3x3 (VeltWild, фриспины) =====
   Движок кладёт в блок девять одинаковых символов, и раньше барабан так их и
   рисовал — девятью отдельными плитками. Клетки блока остаются на месте (рамка
   поля не должна разъезжаться), но их символы скрыты: вместо них лежит один
   большой поверх. visibility, а не display: клетка сохраняет размеры, и
   геометрия блока считается по ней же. */
.slot-cell.giant-part .slot-symbol { visibility: hidden; }

.giant-symbol {
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: giantSymbolIn .36s cubic-bezier(.2, 1.28, .4, 1) both;
}
/* Символ занимает почти весь блок, оставляя воздух по краям — так же, как
   обычный символ занимает 84% своей клетки. */
.giant-symbol > * {
    width: 86%;
    height: 86%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6))
            drop-shadow(0 0 18px var(--slot-glow, rgba(255, 194, 60, .5)));
}
.giant-symbol svg,
.giant-symbol img { width: 100%; height: 100%; object-fit: contain; }
/* Текстовые символы (A, K, Q) масштабируем шрифтом: на блоке 3x3 обычный
   размер выглядел бы потерянной мелкой буквой в центре пустого места. */
.giant-symbol { font-size: clamp(48px, 22vw, 132px); line-height: 1; }

@keyframes giantSymbolIn {
    from { transform: scale(.82); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .giant-symbol { animation-duration: .01s; }
}

/* Закреплённый вайлд подсвечен, чтобы игрок видел: он останется на месте */
.slot-grid.fs-mode .slot-cell.sticky-wild .slot-symbol {
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.6))
            drop-shadow(0 0 14px var(--slot-accent, #FFC24B));
}
.slot-grid.fs-mode .slot-cell.sticky-wild::after {
    content: '';
    position: absolute;
    inset: 6%;
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--slot-accent, #FFC24B) 78%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--slot-accent, #FFC24B) 55%, transparent),
                inset 0 0 14px color-mix(in srgb, var(--slot-accent, #FFC24B) 22%, transparent);
    pointer-events: none;
    z-index: 1;
    animation: stickyWildFrame 2.1s ease-in-out infinite;
}
/* У арт-слотов псевдоэлементы ячеек погашены общим правилом — возвращаем
   рамку только для липкого вайлда и только в бонусе. */
.slot-screen.themed-art .slot-grid.fs-mode .slot-cell.sticky-wild::after {
    display: block !important;
    content: '' !important;
}
@keyframes stickyWildFrame {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.03); }
}
/* Пока колонка «доезжает», липкий вайлд не должен подпрыгивать вместе с ней */
.slot-column.reel-stop .slot-cell.sticky-wild .slot-symbol { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    .slot-grid.fs-mode .slot-cell.sticky-wild::after { animation: none !important; opacity: .8; }
}

/* ============================================================
   VELTSTARS / STARLIGHT-PRINCESS — ДИЗАЙНЕРСКИЙ АРТ-ПАК (6 колонок × 5 рядов)
   Всё scoped через [data-slot="starlight-princess"].
   Поле замерено по тёмным окнам рамки 1976×1460: 6 окон по X (шаг 272.2)
   и 5 по Y (шаг 269.2) — отсюда inset в SLOT_ART.
   Особенность плашек: поле под сумму СВЕТЛОЕ (замеренный цвет #F9E0E0),
   поэтому цифры здесь тёмные, в отличие от остальных слотов.
   ============================================================ */
.slot-screen[data-slot="starlight-princess"] .slot-art-bg { background-position: center top; }
.slot-screen[data-slot="starlight-princess"] .slot-art-bg::after {
    background: linear-gradient(180deg, rgba(14,4,30,.20) 0%, rgba(18,5,38,.42) 55%, rgba(8,2,20,.86) 100%);
}
.slot-screen[data-slot="starlight-princess"] .slot-signboard {
    width: min(70%, 400px);
    margin: 2px auto 4px;
    filter: drop-shadow(0 7px 15px rgba(16,0,34,.72)) drop-shadow(0 0 14px rgba(255,143,208,.4));
}
.slot-screen[data-slot="starlight-princess"] .slot-machine.has-art {
    aspect-ratio: 1976 / 1460;
    max-width: 540px;
    margin-inline: auto;
}
.slot-screen[data-slot="starlight-princess"] .slot-machine.has-art #slotGrid.slot-grid {
    gap: 0;
    contain: layout paint;
}
.slot-screen[data-slot="starlight-princess"] .slot-column { gap: 0; }
.slot-screen[data-slot="starlight-princess"] .slot-cell { padding: 1.4%; }
.slot-screen[data-slot="starlight-princess"] .slot-symbol {
    /* Ячейка почти квадратная (272×269), символы — округлые самоцветы */
    width: 95%; height: 95%;
    filter: drop-shadow(0 3px 5px rgba(10,0,24,.6));
}
.slot-screen[data-slot="starlight-princess"] .sym-img {
    object-fit: contain;
    transform-origin: center;
}
/* Принцесса-скаттер сияет заметно сильнее самоцветов */
.slot-screen[data-slot="starlight-princess"] .sym-scatter {
    filter: drop-shadow(0 3px 6px rgba(10,0,24,.66)) drop-shadow(0 0 18px rgba(255,143,208,.95));
}
/* Выигравший самоцвет вспыхивает и мягко разворачивается — «звёздный» характер */
.slot-screen[data-slot="starlight-princess"] .slot-cell.sym-win .slot-symbol {
    animation: starsSymbolWin .6s cubic-bezier(.24,1.3,.38,1) 3;
}
@keyframes starsSymbolWin {
    0%, 100% { transform: scale(1) rotate(0);
               filter: drop-shadow(0 3px 5px rgba(10,0,24,.6)); }
    42%      { transform: scale(1.16) rotate(-3deg);
               filter: drop-shadow(0 4px 8px rgba(10,0,24,.7))
                       drop-shadow(0 0 18px rgba(255,143,208,.9)) brightness(1.18); }
    72%      { transform: scale(.97) rotate(2deg); }
}
/* Сферы-иксы в бонусе: слой общий с VeltGods, перекрашиваем под пак */
.slot-screen[data-slot="starlight-princess"] .gods-mult {
    filter: drop-shadow(0 5px 10px rgba(10,0,24,.72))
            drop-shadow(0 0 20px rgba(255,143,208,.85));
}

/* ---- Плашки VeltStars -----------------------------------------------
   Сумма ложится на светлую ленту: её центр замерен по каждой картинке
   (win 69.3%, big 68.3%, mega 69.0%), лента занимает 94–97% ширины и
   23–31% высоты. Цифры тёмно-фиолетовые со светлой обводкой — на розовом
   фоне белый текст был бы нечитаем.                                     */
.slot-win-popup.has-plaque[data-slot="starlight-princess"] .slot-win-plaque { width: min(94vw, 520px); }
.slot-win-popup.has-plaque[data-slot="starlight-princess"].big .slot-win-plaque { width: min(96vw, 545px); }
.slot-win-popup.has-plaque[data-slot="starlight-princess"].mega .slot-win-plaque { width: min(99vw, 580px); }
.slot-win-popup.has-plaque[data-slot="starlight-princess"] .plaque-amount {
    left: 9%; right: 9%;
    font-family: 'Cinzel', 'Manrope', serif;
    font-weight: 800;
    font-size: clamp(28px, 9.6vw, 56px);
    letter-spacing: .5px;
    color: #4A1046;
    text-shadow:
        0 1px 0 rgba(255,255,255,.85),
        0 2px 4px rgba(120,40,110,.35),
        0 0 16px rgba(255,143,208,.45);
}
.slot-win-popup.has-plaque[data-slot="starlight-princess"].big .plaque-amount { font-size: clamp(27px, 9.2vw, 54px); }
.slot-win-popup.has-plaque[data-slot="starlight-princess"].mega .plaque-amount { font-size: clamp(25px, 8.6vw, 50px); }
.slot-win-popup.has-plaque[data-slot="starlight-princess"].win .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="starlight-princess"].big .slot-win-content { --plaque-optical-y: 0px; }
.slot-win-popup.has-plaque[data-slot="starlight-princess"].mega .slot-win-content { --plaque-optical-y: 0px; }

@media (prefers-reduced-motion: reduce) {
    .slot-screen[data-slot="starlight-princess"] .slot-cell.sym-win .slot-symbol { animation: none !important; }
}

/* ============================================================
   ТИРЫ ПЛАШЕК: у WIN / BIG WIN / MEGA WIN свой набор эффектов
   ------------------------------------------------------------
   Порог тира теперь считается только от множителя ставки
   (SLOT_WIN_TIERS в js), а состав слоёв — из SLOT_TIER_FX.
   Здесь докручиваем то, что отвечает за «ощущение размера»:
   WIN — аккуратно и без затемнения, BIG — золотое гало и лучи,
   MEGA — пульсирующее гало, широкие кольца и живые искры.
   ============================================================ */

/* WIN без арт-плашки живёт компактной пилюлей над барабаном. Слой монет
   у неё обрезался рамкой пилюли (у .win-coins свой overflow: hidden),
   и монеты падали внутри маленькой коробки. Растягиваем на весь экран. */
.slot-win-popup.compact-win:not(.has-plaque) .win-coins { position: fixed; inset: 0; }
/* Кольцо и искры у компактной плашки бьют из её центра, а не из центра экрана. */
.slot-win-popup.compact-win:not(.has-plaque) .win-rings,
.slot-win-popup.compact-win:not(.has-plaque) .win-sparks { top: 50%; }

/* Гало за плашкой: размер и живость строго по тиру. Кладём внутрь
   .slot-win-content (у него свой stacking context), поэтому z-index:-1
   уводит гало под текст/арт, но оставляет над затемнением. */
.slot-win-popup .slot-win-content::before {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: var(--tier-halo, 0px); aspect-ratio: 1;
    margin: 0; transform: translate(-50%,-50%);
    border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--slot-glow, #ffd24b) 42%, transparent) 0 26%,
        color-mix(in srgb, var(--slot-accent, #ffd24b) 22%, transparent) 46%,
        transparent 72%);
    opacity: 0;
}
.slot-win-popup.win  .slot-win-content::before { --tier-halo: min(72vw, 320px); }
.slot-win-popup.big  .slot-win-content::before { --tier-halo: min(104vw, 520px); }
.slot-win-popup.mega .slot-win-content::before,
.slot-win-popup.fs-summary .slot-win-content::before { --tier-halo: min(126vw, 680px); }
.slot-win-popup.win.show  .slot-win-content::before { animation: tierHaloSoft 1.1s ease-out both; }
.slot-win-popup.big.show  .slot-win-content::before { animation: tierHaloPulse 2.4s ease-in-out .1s infinite; }
.slot-win-popup.mega.show .slot-win-content::before,
.slot-win-popup.fs-summary.show .slot-win-content::before { animation: tierHaloPulse 1.55s ease-in-out infinite; }

@keyframes tierHaloSoft {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
    45%  { opacity: .5; transform: translate(-50%,-50%) scale(1); }
    100% { opacity: .28; transform: translate(-50%,-50%) scale(1); }
}
@keyframes tierHaloPulse {
    0%,100% { opacity: .42; transform: translate(-50%,-50%) scale(.94); }
    50%     { opacity: .82; transform: translate(-50%,-50%) scale(1.06); }
}

/* Кольца: у WIN одно тонкое и короткое, у BIG — толще, у MEGA — широкие
   и повторяющиеся (повтор уже задан выше через animation-iteration-count). */
.slot-win-popup.win .win-rings i {
    width: 92px; margin: -46px 0 0 -46px; border-width: 2px;
    animation-duration: .82s !important;
}
.slot-win-popup.big .win-rings i { width: 132px; margin: -66px 0 0 -66px; border-width: 3px; }
.slot-win-popup.mega .win-rings i,
.slot-win-popup.fs-summary .win-rings i { width: 160px; margin: -80px 0 0 -80px; border-width: 5px; }

/* Затемнение: BIG приглушает экран мягче, MEGA — плотнее и с цветом слота,
   чтобы разница читалась мгновенно, ещё до того как добежит сумма. */
.slot-win-popup.big .win-dim { background: rgba(3,3,8,.66); }
.slot-win-popup.mega .win-dim {
    background: radial-gradient(circle at 50% 46%,
        color-mix(in srgb, var(--slot-accent, #ffd24b) 14%, rgba(3,3,8,.82)),
        rgba(2,2,6,.9) 66%);
}

/* Подпись тира: свой масштаб и своё «дыхание» на каждый тир (слоты без
   арт-плашек рисуют текстом, поэтому разницу надо дать именно тексту). */
.slot-win-popup.big .slot-win-label  { letter-spacing: 4px; }
.slot-win-popup.mega .slot-win-label { letter-spacing: 5px; }
.slot-win-popup.mega.show .slot-win-amount,
.slot-win-popup.fs-summary.show .slot-win-amount { animation: tierMegaAmount 1.15s ease-in-out infinite; }
.slot-win-popup.big.show .slot-win-amount { animation: tierBigAmount 1.9s ease-in-out infinite; }
@keyframes tierMegaAmount {
    0%,100% { transform: scale(1); filter: drop-shadow(0 0 6px var(--slot-glow, #ffd24b)); }
    50%     { transform: scale(1.045); filter: drop-shadow(0 0 18px var(--slot-glow, #ffd24b)); }
}
@keyframes tierBigAmount {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.022); }
}

/* Арт-плашка MEGA слегка «дышит» после того как сумма добежала. */
.slot-win-popup.mega.has-plaque.counted .slot-win-plaque,
.slot-win-popup.fs-summary.has-plaque.counted .slot-win-plaque {
    animation: tierPlaqueBreath 1.7s ease-in-out infinite;
}
@keyframes tierPlaqueBreath {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.018); }
}

@media (prefers-reduced-motion: reduce) {
    .slot-win-popup .slot-win-content::before,
    .slot-win-popup .slot-win-plaque,
    .slot-win-popup .slot-win-amount { animation: none !important; }
    .slot-win-popup .slot-win-content::before { opacity: .3; }
}

/* ============================================================
   ДВЕ ФАЗЫ ИКСА: СНАЧАЛА САДИТСЯ, ПОТОМ ИГРАЕТ
   ------------------------------------------------------------
   Жалоба тестера: «падает икс — непонятно откуда он, специальных
   символов на барабане не было». Причина была в порядке: сферы и
   иксы рисовались одновременно с подсветкой выигрыша, то есть уже
   после того как спин отыграл.
   Теперь js сначала ставит .mult-landing (икс падает в свою ячейку
   вместе с символами и ОСТАЁТСЯ стоять), и только когда начинается
   подсветка выигрыша — меняет класс на .mult-playing.
   Длительности приходят из js в --mult-land / --mult-play, чтобы
   турбо-режим не рассинхронился с анимацией.
   Селекторы из двух классов специально: перебивают базовые правила
   .gods-mult / .rush-feature-mult при любом порядке в файле.
   ============================================================ */

/* Фаза 1 — посадка. Икс падает сверху в ячейку и замирает на ней. */
@keyframes multDropLand {
    0%   { transform: translate(-50%, -215%) scale(.42) rotate(-16deg); opacity: 0; }
    58%  { transform: translate(-50%, -50%) scale(1.36) rotate(6deg); opacity: 1; }
    76%  { transform: translate(-50%, -47%) scale(.98) rotate(-3deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.08) rotate(0); opacity: 1; }
}
/* Фаза 2 — игра. Вспышка вместе с подсветкой выигрыша и уход вверх. */
@keyframes multDropPlay {
    0%   { transform: translate(-50%, -50%) scale(1.08) rotate(0); opacity: 1; }
    14%  { transform: translate(-50%, -56%) scale(1.48) rotate(5deg); opacity: 1; }
    30%  { transform: translate(-50%, -50%) scale(1.12) rotate(-3deg); }
    46%  { transform: translate(-50%, -54%) scale(1.34) rotate(2deg); }
    62%  { transform: translate(-50%, -50%) scale(1.16) rotate(0); opacity: 1; }
    78%  { transform: translate(-50%, -54%) scale(1.22) rotate(-1.5deg); opacity: 1; }
    100% { transform: translate(-50%, -106%) scale(.9) rotate(4deg); opacity: 0; }
}

.gods-mult.mult-landing,
.rush-feature-mult.mult-landing {
    animation: multDropLand var(--mult-land, 540ms) cubic-bezier(.2,1.42,.3,1)
               var(--mult-delay, 0ms) both;
}
.gods-mult.mult-playing,
.rush-feature-mult.mult-playing {
    animation: multDropPlay var(--mult-play, 1150ms) cubic-bezier(.24,.92,.3,1)
               var(--mult-delay, 0ms) both;
}

/* ------------------------------------------------------------
   СВОЯ МИКРО-АНИМАЦИЯ ИКСА НА КАЖДЫЙ СЛОТ
   Общие кадры выше — это база для слота без своего характера.
   Ниже каждый пак получает своё движение, чтобы икс читался как
   часть именно этого слота, а не как общий значок.
   Приём с двумя анимациями в списке: первая (посадка) держит кадр
   через both, вторая (покой) стартует с задержкой ровно на её
   длительность и дальше владеет transform — так икс не выглядит
   замороженным, пока ждёт подсветки выигрыша.
   Все кадры внутри одной анимации держат ОДИНАКОВЫЙ набор функций
   (translate + scale + rotate), иначе браузер интерполирует через
   матрицу и движение начинает дёргаться.
   Только transform и opacity: анимация filter заставляла телефоны
   перерисовывать тень каждый кадр.
   --mult-idle-at = когда включается покой = задержка + посадка.
   ------------------------------------------------------------ */
.gods-mult.mult-landing,
.rush-feature-mult.mult-landing {
    --mult-idle-at: calc(var(--mult-delay, 0ms) + var(--mult-land, 540ms));
}

/* ===== VeltGods: икс нарисован колесом, значит крутим его колесом
   фортуны — раскручивается на подлёте и ЗАМЕДЛЯЯСЬ встаёт. Специально
   не быстро: важен момент остановки, а не сама скорость. ===== */
@keyframes godsWheelLand {
    0%   { transform: translate(-50%,-235%) scale(.38) rotate(-680deg); opacity: 0; }
    20%  { transform: translate(-50%,-52%) scale(1.32) rotate(-330deg); opacity: 1; }
    44%  { transform: translate(-50%,-46%) scale(1.02) rotate(-132deg); opacity: 1; }
    66%  { transform: translate(-50%,-51%) scale(1.16) rotate(-44deg); opacity: 1; }
    86%  { transform: translate(-50%,-50%) scale(1.05) rotate(-9deg); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1.08) rotate(0deg); opacity: 1; }
}
/* Колесо встало на приз и чуть покачивается, как стрелка на упоре */
@keyframes godsWheelIdle {
    0%, 100% { transform: translate(-50%,-50%) scale(1.08) rotate(-2.4deg); }
    50%      { transform: translate(-50%,-50%) scale(1.09) rotate(2.4deg); }
}
@keyframes godsWheelPlay {
    0%   { transform: translate(-50%,-50%) scale(1.08) rotate(0deg); opacity: 1; }
    16%  { transform: translate(-50%,-58%) scale(1.52) rotate(30deg); opacity: 1; }
    34%  { transform: translate(-50%,-50%) scale(1.14) rotate(66deg); opacity: 1; }
    54%  { transform: translate(-50%,-54%) scale(1.36) rotate(106deg); opacity: 1; }
    74%  { transform: translate(-50%,-50%) scale(1.18) rotate(140deg); opacity: 1; }
    100% { transform: translate(-50%,-110%) scale(.9) rotate(198deg); opacity: 0; }
}
.slot-screen[data-slot="gates-of-olympus"] .gods-mult.mult-landing {
    animation: godsWheelLand var(--mult-land, 780ms) cubic-bezier(.14,.68,.18,1)
                   var(--mult-delay, 0ms) both,
               godsWheelIdle 2.1s ease-in-out var(--mult-idle-at, 780ms) infinite;
}
.slot-screen[data-slot="gates-of-olympus"] .gods-mult.mult-playing {
    animation: godsWheelPlay var(--mult-play, 1250ms) cubic-bezier(.26,.9,.3,1)
               var(--mult-delay, 0ms) both;
}

/* ===== VeltStars: сфера заходит по диагонали как падающая звезда,
   потом левитирует и уносится в небо, уменьшаясь. ===== */
@keyframes starsOrbLand {
    0%   { transform: translate(-128%,-268%) scale(.3) rotate(-30deg); opacity: 0; }
    38%  { transform: translate(-50%,-50%) scale(1.36) rotate(10deg); opacity: 1; }
    56%  { transform: translate(-52%,-45%) scale(.98) rotate(-6deg); opacity: 1; }
    76%  { transform: translate(-49%,-53%) scale(1.17) rotate(4deg); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1.08) rotate(0deg); opacity: 1; }
}
@keyframes starsOrbIdle {
    0%, 100% { transform: translate(-50%,-50%) scale(1.08) rotate(0deg); }
    34%      { transform: translate(-50%,-55%) scale(1.11) rotate(-2.5deg); }
    68%      { transform: translate(-50%,-46%) scale(1.05) rotate(2.5deg); }
}
@keyframes starsOrbPlay {
    0%   { transform: translate(-50%,-50%) scale(1.08) rotate(0deg); opacity: 1; }
    14%  { transform: translate(-50%,-59%) scale(1.54) rotate(-9deg); opacity: 1; }
    32%  { transform: translate(-50%,-50%) scale(1.12) rotate(7deg); opacity: 1; }
    52%  { transform: translate(-50%,-56%) scale(1.36) rotate(-5deg); opacity: 1; }
    72%  { transform: translate(-50%,-50%) scale(1.16) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%,-142%) scale(.58) rotate(16deg); opacity: 0; }
}
.slot-screen[data-slot="starlight-princess"] .gods-mult.mult-landing {
    animation: starsOrbLand var(--mult-land, 700ms) cubic-bezier(.18,.9,.24,1)
                   var(--mult-delay, 0ms) both,
               starsOrbIdle 2.6s ease-in-out var(--mult-idle-at, 700ms) infinite;
}
.slot-screen[data-slot="starlight-princess"] .gods-mult.mult-playing {
    animation: starsOrbPlay var(--mult-play, 1300ms) cubic-bezier(.3,.86,.28,1)
               var(--mult-delay, 0ms) both;
}

/* ===== VeltRush: слот про желейные конфеты, поэтому икс шлёпается и
   расплющивается, а потом трясётся как желе. scale3d держим во ВСЕХ
   кадрах этой анимации — иначе интерполяция уйдёт в матрицу. ===== */
@keyframes rushJellyLand {
    0%   { transform: translate(-50%,-225%) scale3d(.66,1.34,1) rotate(-7deg); opacity: 0; }
    42%  { transform: translate(-50%,-41%) scale3d(1.46,.62,1) rotate(0deg); opacity: 1; }
    58%  { transform: translate(-50%,-58%) scale3d(.84,1.28,1) rotate(2deg); opacity: 1; }
    72%  { transform: translate(-50%,-47%) scale3d(1.2,.88,1) rotate(-1deg); opacity: 1; }
    86%  { transform: translate(-50%,-52%) scale3d(.98,1.16,1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale3d(1.08,1.08,1) rotate(0deg); opacity: 1; }
}
@keyframes rushJellyIdle {
    0%, 100% { transform: translate(-50%,-50%) scale3d(1.08,1.08,1) rotate(0deg); }
    50%      { transform: translate(-50%,-50%) scale3d(1.16,1.0,1) rotate(0deg); }
}
@keyframes rushJellyPlay {
    0%   { transform: translate(-50%,-50%) scale3d(1.08,1.08,1) rotate(0deg); opacity: 1; }
    14%  { transform: translate(-50%,-55%) scale3d(1.54,1.3,1) rotate(3deg); opacity: 1; }
    30%  { transform: translate(-50%,-47%) scale3d(1.0,1.24,1) rotate(-3deg); opacity: 1; }
    46%  { transform: translate(-50%,-54%) scale3d(1.38,.96,1) rotate(2deg); opacity: 1; }
    62%  { transform: translate(-50%,-48%) scale3d(1.08,1.2,1) rotate(-1deg); opacity: 1; }
    78%  { transform: translate(-50%,-52%) scale3d(1.24,1.04,1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%,-116%) scale3d(.8,1.18,1) rotate(5deg); opacity: 0; }
}
.slot-screen[data-slot="sugar-rush"] .rush-feature-mult.mult-landing {
    animation: rushJellyLand var(--mult-land, 580ms) cubic-bezier(.22,1.1,.3,1)
                   var(--mult-delay, 0ms) both,
               rushJellyIdle 1.5s ease-in-out var(--mult-idle-at, 580ms) infinite;
}
.slot-screen[data-slot="sugar-rush"] .rush-feature-mult.mult-playing {
    animation: rushJellyPlay var(--mult-play, 1100ms) cubic-bezier(.26,.92,.3,1)
               var(--mult-delay, 0ms) both;
}

/* ===== VeltFruit: икс падает как фрукт на стол — два отскока,
   потом «стряхивает сок» и улетает с закруткой. ===== */
@keyframes fruitBounceLand {
    0%   { transform: translate(-50%,-245%) scale(.46) rotate(-20deg); opacity: 0; }
    32%  { transform: translate(-50%,-43%) scale(1.3) rotate(7deg); opacity: 1; }
    46%  { transform: translate(-50%,-88%) scale(1.02) rotate(-9deg); opacity: 1; }
    62%  { transform: translate(-50%,-45%) scale(1.18) rotate(6deg); opacity: 1; }
    76%  { transform: translate(-50%,-66%) scale(1.04) rotate(-4deg); opacity: 1; }
    90%  { transform: translate(-50%,-48%) scale(1.11) rotate(2deg); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1.08) rotate(0deg); opacity: 1; }
}
@keyframes fruitBounceIdle {
    0%, 100% { transform: translate(-50%,-50%) scale(1.08) rotate(-3.5deg); }
    50%      { transform: translate(-50%,-52%) scale(1.1) rotate(3.5deg); }
}
@keyframes fruitBouncePlay {
    0%   { transform: translate(-50%,-50%) scale(1.08) rotate(0deg); opacity: 1; }
    12%  { transform: translate(-50%,-57%) scale(1.48) rotate(-10deg); opacity: 1; }
    26%  { transform: translate(-50%,-50%) scale(1.16) rotate(9deg); opacity: 1; }
    40%  { transform: translate(-50%,-55%) scale(1.36) rotate(-7deg); opacity: 1; }
    54%  { transform: translate(-50%,-50%) scale(1.18) rotate(6deg); opacity: 1; }
    72%  { transform: translate(-50%,-53%) scale(1.26) rotate(-2deg); opacity: 1; }
    100% { transform: translate(-50%,-114%) scale(.86) rotate(26deg); opacity: 0; }
}
.slot-screen[data-slot="fruit-party"] .rush-feature-mult.mult-landing {
    animation: fruitBounceLand var(--mult-land, 660ms) cubic-bezier(.2,.9,.26,1)
                   var(--mult-delay, 0ms) both,
               fruitBounceIdle 1.9s ease-in-out var(--mult-idle-at, 660ms) infinite;
}
.slot-screen[data-slot="fruit-party"] .rush-feature-mult.mult-playing {
    animation: fruitBouncePlay var(--mult-play, 1120ms) cubic-bezier(.26,.9,.3,1)
               var(--mult-delay, 0ms) both;
}

/* Икс крупнее ячейки — у VeltFruit его тоже не режем рамкой окна */
.slot-screen[data-slot="fruit-party"] .rush-mult-layer { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
    .gods-mult.mult-landing, .gods-mult.mult-playing,
    .rush-feature-mult.mult-landing, .rush-feature-mult.mult-playing {
        animation: none !important;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ------------------------------------------------------------
   БАРАБАН ИКСОВ VELTGEMS: горит, пока считается сумма
   Раньше подсветка снималась через 0.66с после посадки, и к моменту
   показа выигрыша на экране оставался тусклый значок — связь
   «икс -> сумма» не читалась. Теперь после посадки барабан переходит
   в состояние .holding и спокойно дышит до следующего спина.
   Только transform/opacity — filter в кадрах давал перерисовку тени
   каждый кадр и подтормаживание на телефонах.
   ------------------------------------------------------------ */
.mult-reel.holding .mr-cell.active img {
    animation: mrHold 1.75s ease-in-out infinite;
}
/* Покой: камень медленно ловит свет гранями — лёгкий доворот вправо-влево.
   Тот же набор функций, что в mrLand, чтобы переход был бесшовным. */
@keyframes mrHold {
    0%, 100% { transform: perspective(440px) rotateY(-10deg) scale(1.04); }
    50%      { transform: perspective(440px) rotateY(10deg) scale(1.09); }
}
/* Золотые направляющие середины продолжают гореть вместе с иксом */
.mult-reel.holding .mr-cell.centre::before,
.mult-reel.holding .mr-cell.centre::after { opacity: 1; }
.mult-reel.holding { filter: drop-shadow(0 0 15px rgba(240,194,74,.6)); }

@media (prefers-reduced-motion: reduce) {
    .mult-reel.holding .mr-cell.active img { animation: none !important; }
}

/* ============================================================
   СТРОКА ПОД КНОПКАМИ = АКТУАЛЬНАЯ СТАВКА ЗА ПРОКРУТ
   ------------------------------------------------------------
   Раньше на этом месте висел статичный «Макс. выигрыш ×5000».
   Информация разовая, она есть в сводке слота, а вот ставку игрок
   меняет постоянно — теперь её видно прямо на экране игры.
   Цифра берёт акцент активного слота, поэтому строка выглядит
   частью пака, а не служебной подписью.
   ============================================================ */
.slot-screen .slot-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 7px;
}
.slot-screen .slot-hint .sh-label {
    font-size: clamp(9px, 2.6vw, 11px);
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.62);
    text-transform: uppercase;
}
.slot-screen .slot-hint .sh-bet {
    font-size: clamp(17px, 4.8vw, 22px);
    font-weight: 900;
    line-height: 1;
    color: var(--slot-accent, #ffd24b);
    text-shadow: 0 2px 5px rgba(0,0,0,.8);
    /* Цифра меняется от нажатия ±: короткий отклик, чтобы правка ставки
       читалась даже боковым зрением. */
    transition: transform .16s cubic-bezier(.2,1.3,.3,1);
}
.slot-screen .slot-hint .sh-cur {
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 800;
    color: rgba(255,255,255,.7);
}
/* Ante Bet делает прокрут дороже — молчать об этом нельзя, поэтому
   надбавка стоит прямо рядом с суммой. */
.slot-screen .slot-hint .sh-note {
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--slot-glow, #ffd24b) 55%, transparent);
    background: color-mix(in srgb, var(--slot-accent, #ffd24b) 16%, transparent);
    color: #fff;
    font-size: clamp(9px, 2.5vw, 11px);
    font-weight: 800;
    letter-spacing: .6px;
}

@media (max-width: 360px) {
    .slot-screen .slot-hint { gap: 3px 5px; }
    .slot-screen .slot-hint .sh-label { letter-spacing: 1px; }
}

/* ============================================================
   МНОЖИТЕЛИ-КЛЕТКИ VELTRUSH (multiplier spots)
   ------------------------------------------------------------
   Клетка, на которой сыграл кластер, заливается жёлтым. Второе
   попадание превращает её в ×2, дальше удваивается. Кластер,
   накрывший такие клетки, умножается.
   Рисуем отдельным слоем над сеткой, а не фоном ячейки: во время
   прокрута ячейки скрыты (поверх них лента), и метки пропадали бы
   ровно тогда, когда игрок на них смотрит.
   Заливка нарочно полупрозрачная — символы должны читаться сквозь неё.
   ============================================================ */
.mspot-layer {
    position: absolute;
    inset: var(--ri-top, 1%) var(--ri-right, 2%) var(--ri-bottom, 1%) var(--ri-left, 2%);
    z-index: 3;
    pointer-events: none;
    overflow: visible;
    /* Скорость анимаций клеток: 1 обычно, .5 в турбо (ставит JS) */
    --mspot-speed: 1;
}
.mspot {
    position: absolute;
    display: block;
    border-radius: 12%;
    /* Тон по умолчанию — жёлтый «просто сыгравшей» клетки (икса на ней ещё нет).
       Для клетки с множителем JS подставляет цвета её собственного арта:
       --ms-hot / --ms-lite / --ms-deep замерены по mult_x*.png, а --ms-power
       (0…1) — место числа в лестнице ×2…×32. Всё оформление считается от них,
       поэтому добавить ×64 = дописать одну строку в замеренную таблицу. */
    --ms-hot: #ffbe28;
    --ms-lite: #ffe478;
    --ms-deep: #b06a00;
    --ms-power: 0;
    /* Заливка нарочно лёгкая: клетка должна читаться как подсветка поля, а не
       закрашивать символ. Границу держим рамкой — она очерчивает клетку, не
       пряча то, что на неё падает.
       Плотность снижена ещё примерно на 40% против прежней: жалоба была именно
       «не видно символы, которые играют», а вместе с артом икса заливка и
       давала непрозрачное пятно. */
    background:
        radial-gradient(circle at 50% 42%, rgba(255,228,120,.15), rgba(255,190,40,.07) 62%, transparent 78%),
        linear-gradient(180deg, rgba(255,214,72,.1), rgba(255,160,30,.06));
    box-shadow:
        inset 0 0 0 2px rgba(255,226,120,.72),
        inset 0 0 14px rgba(255,196,60,.28),
        0 0 12px rgba(255,190,50,.26);
    /* Плавно, чтобы повышение множителя не мигало скачком */
    transition: box-shadow .22s var(--ease), background .22s var(--ease);
    will-change: transform;
}
/* Клетка с рабочим множителем: цвет — её арта, накал — от места в лестнице.
   Оттенок не годится в шкалу «жирности»: по замеру ×4 и ×32 почти одного
   красного тона. Поэтому растёт именно накал — прозрачность заливки, толщина
   рамки и радиус свечения. ×2 читается как метка, ×32 — как раскалённая клетка. */
.mspot.has-mult {
    /* Плотность заливки снижена ещё раз (примерно на 40%): даже раскалённая
       ×32 не должна прятать символ, который на неё падает. Накал по-прежнему
       растёт с --ms-power, но за счёт свечения и рамки, а не за счёт
       закрашивания клетки. Предельная плотность у самой жирной клетки теперь
       25% света вместо 42% — символ читается на любом номинале. */
    background:
        radial-gradient(circle at 50% 40%,
            color-mix(in srgb, var(--ms-lite) calc(15% + 10% * var(--ms-power)), transparent),
            color-mix(in srgb, var(--ms-hot) calc(8% + 9% * var(--ms-power)), transparent) 60%,
            transparent 80%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ms-lite) calc(9% + 7% * var(--ms-power)), transparent),
            color-mix(in srgb, var(--ms-deep) calc(6% + 7% * var(--ms-power)), transparent));
    box-shadow:
        inset 0 0 0 calc(2px + 1.4px * var(--ms-power))
            color-mix(in srgb, var(--ms-lite) calc(72% + 26% * var(--ms-power)), transparent),
        inset 0 0 calc(14px + 12px * var(--ms-power))
            color-mix(in srgb, var(--ms-hot) calc(42% + 30% * var(--ms-power)), transparent),
        0 0 calc(14px + 16px * var(--ms-power))
            color-mix(in srgb, var(--ms-hot) calc(36% + 32% * var(--ms-power)), transparent);
}
/* Сам икс: арт из пака VeltRush, поэтому вписываем по центру клетки.
   Полупрозрачный сознательно: икс закрывает символ под собой, а игроку нужно
   видеть, ЧТО падает на эту клетку. Читаемость числа держим не плотностью, а
   тенью и свечением — они дают контраст на любом фоне.

   Числа ЗАМЕРЕНЫ по альфа-каналу арта (mult_x*.png, девять картинок): в среднем
   66.3% пикселей арта непрозрачны. При прежних opacity .74 и размере 82% икс
   закрывал 33.2% площади клетки, и символ под ним действительно не читался.
   Стало: 72% * 72% * 66.3% * .50 = 17.2% — ровно вдвое меньше. Число при этом
   остаётся читаемым за счёт тени и свечения, а в момент сыгровки икс всё равно
   выходит на полную силу (см. .mspot.firing.applied ниже). */
.mspot-x {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72%;
    height: auto;
    max-height: 72%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    opacity: .5;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.62))
            drop-shadow(0 0 12px rgba(255,196,60,.9));
    transition: opacity .18s var(--ease), width .18s var(--ease);
}
/* Клетка, которая реально умножила сыгровку — показываем её в полную силу:
   в этот момент важнее прочитать число, чем символ под ним. Икс возвращается к
   полной непрозрачности и прежнему размеру, то есть тускнее он только пока
   ждёт своей сыгровки. */
.mspot.firing.applied .mspot-x {
    opacity: 1;
    width: 82%;
    max-height: 82%;
}

/* Появление новой метки: тот же «желейный» характер, что у иксов слота.
   scale3d во всех кадрах — иначе интерполяция уходит в матрицу и дёргается. */
@keyframes mspotPop {
    0%   { transform: scale3d(.2,.2,1); opacity: 0; }
    46%  { transform: scale3d(1.28,.78,1); opacity: 1; }
    68%  { transform: scale3d(.9,1.14,1); opacity: 1; }
    86%  { transform: scale3d(1.06,.96,1); opacity: 1; }
    100% { transform: scale3d(1,1,1); opacity: 1; }
}
/* Повышение множителя: клетка «разбухает» и оседает — видно, что стало больше.
   Замах растёт вместе с --ms-power: переход ×2→×4 подпрыгивает скромно, а
   ×16→×32 разносит клетку. --ms-power на время анимации не меняется, поэтому
   calc внутри scale3d считается один раз и интерполяция остаётся честной. */
@keyframes mspotGrow {
    0%   { transform: scale3d(1,1,1); }
    30%  { transform: scale3d(calc(1.3 + .18 * var(--ms-power)),
                              calc(1.3 + .18 * var(--ms-power)), 1); }
    52%  { transform: scale3d(calc(.95 - .05 * var(--ms-power)),
                              calc(1.08 + .07 * var(--ms-power)), 1); }
    74%  { transform: scale3d(calc(1.1 + .05 * var(--ms-power)),
                              calc(.97 - .03 * var(--ms-power)), 1); }
    100% { transform: scale3d(1,1,1); }
}
/* --mspot-speed ставит JS на слое: 1 в обычном режиме, .5 в турбо. Раньше турбо
   просто срезал анимацию на середине — теперь она честно проигрывается быстрее. */
.mspot.pop {
    animation: mspotPop calc(.46s * var(--mspot-speed))
               cubic-bezier(.22,1.24,.3,1) var(--mspot-delay, 0ms) both;
}
.mspot.grow {
    animation: mspotGrow calc((.5s + .1s * var(--ms-power)) * var(--mspot-speed))
               cubic-bezier(.24,1.2,.3,1) var(--mspot-delay, 0ms) both;
}

/* Сыгровку умножает только САМАЯ ЖИРНАЯ накрытая клетка (combine=max), поэтому
   пульсирует ровно она — .applied. Остальные накрытые (.covered) лишь слегка
   подсвечены: они в кластере, но денег не добавили. Раньше пульсировали все, и
   картинка обещала сложение, которого в движке нет. */
.mspot.firing.applied {
    /* Чем жирнее клетка, тем быстрее и злее пульс: ×2 дышит, ×32 колотится */
    animation: mspotFire calc(.72s - .2s * var(--ms-power)) ease-in-out infinite;
    z-index: 2;
}
@keyframes mspotFire {
    0%, 100% { transform: scale3d(1,1,1); }
    50%      { transform: scale3d(1.14,1.14,1); }
}
.mspot.firing.applied.has-mult {
    box-shadow:
        inset 0 0 0 calc(3px + 1px * var(--ms-power)) #fff,
        inset 0 0 calc(20px + 12px * var(--ms-power))
            color-mix(in srgb, var(--ms-lite) 82%, transparent),
        0 0 calc(24px + 18px * var(--ms-power))
            color-mix(in srgb, var(--ms-hot) 78%, transparent);
}
/* Зацепило кластером, но не применилась: приглушаем, чтобы не спорила с главной */
.mspot.firing.covered {
    opacity: .62;
    animation: none;
}

/* Всплывающий ×N над решающей клеткой: игрок должен прочитать число, которое
   реально умножило эту сыгровку, а не искать его глазами по полю. */
.mspot-hit {
    position: absolute;
    left: 50%;
    bottom: 92%;
    transform: translate(-50%, 0);
    padding: 2px 8px 3px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--ms-lite) 85%, transparent);
    background: linear-gradient(180deg, rgba(18,14,26,.95), rgba(8,6,14,.97));
    color: var(--ms-lite);
    font-family: var(--slot-font, 'Cinzel', serif);
    font-size: clamp(11px, 3.1vw, 15px);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0,0,0,.9);
    box-shadow: 0 3px 10px rgba(0,0,0,.6),
                0 0 14px color-mix(in srgb, var(--ms-hot) 55%, transparent);
    pointer-events: none;
    animation: mspotHit .5s cubic-bezier(.2,1.42,.3,1) both;
}
@keyframes mspotHit {
    0%   { transform: translate3d(-50%, 8px, 0) scale(.6); opacity: 0; }
    58%  { transform: translate3d(-50%, -2px, 0) scale(1.12); opacity: 1; }
    100% { transform: translate3d(-50%, 0, 0) scale(1); opacity: 1; }
}
/* Верхний ряд: у автомата overflow: hidden, над полем подпись обрезало бы */
.mspot-hit.below {
    bottom: auto;
    top: 92%;
    animation-name: mspotHitDown;
}
@keyframes mspotHitDown {
    0%   { transform: translate3d(-50%, -8px, 0) scale(.6); opacity: 0; }
    58%  { transform: translate3d(-50%, 2px, 0) scale(1.12); opacity: 1; }
    100% { transform: translate3d(-50%, 0, 0) scale(1); opacity: 1; }
}

/* Табло «лучшая клетка» описано ниже, рядом с табло сфер VeltGods: у них общая
   раскладка, и правило-переопределение обязано идти ПОСЛЕ общего. */

@media (prefers-reduced-motion: reduce) {
    .mspot, .mspot.pop, .mspot.grow, .mspot.firing, .mspot.firing.applied, .mspot-hit {
        animation: none !important;
        transform: none;
        transition: none;
    }
    .mspot-hit { transform: translate(-50%, 0); opacity: 1; }
}

/* ============================================================
   ПРАЗДНИК НА ПЛАШКАХ: СВОЯ ЭМОЦИЯ КАЖДОМУ СЛОТУ И КАЖДОМУ ТИРУ
   ------------------------------------------------------------
   Просьба тестера: «при вине нормальном типо как конфети на экран».
   Разложено по трём слоям, и каждый включается своим тиром
   (SLOT_TIER_FX в js):
     WIN      — небольшая порция конфетти;
     BIG WIN  — конфетти плотнее + залпы хлопушек из нижних углов;
     MEGA WIN — плюс ленты серпантина, которые качаются при падении.
   Форма частиц берётся из темы пака (класс shape-*), цвета — из
   SLOT_THEME, то есть замеренные по арту цвета самого слота.
   Всё движение только на transform/opacity: анимация filter или
   clip-path заставляла бы телефон перерисовывать каждый кадр.
   ============================================================ */

/* ---- Формы частиц под тему пака -------------------------------
   Форма задаётся статично (border-radius / clip-path), не анимируется. */
.win-confetti i, .win-cannons i, .qw-fx i { border-radius: 1px; }

/* VeltCandy — леденцы-капсулы */
.shape-candy i { border-radius: 999px; }
/* VeltRush — желейные кубики со скруглением */
.shape-jelly i { border-radius: 30%; }
/* VeltGods — осколки молний */
.shape-shard i { clip-path: polygon(50% 0, 100% 38%, 62% 100%, 0 62%); border-radius: 0; }
/* VeltStars — четырёхлучевые звёзды */
.shape-star i {
    clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
    border-radius: 0;
}
/* VeltWest / WolfGold — золотые монеты */
.shape-coin i {
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.28);
}
/* VeltPaws — косточки */
.shape-bone i { border-radius: 45% / 30%; }
/* VeltFish — пузыри */
.shape-bubble i {
    border-radius: 50%;
    opacity: .85;
    box-shadow: inset -1px -1px 2px rgba(255,255,255,.6);
}
/* VeltFruit — ломтики */
.shape-slice i { border-radius: 50% 50% 8% 8%; }
/* VeltGems — гранёные камни */
.shape-gem i { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; }

/* ---- Залпы хлопушек из нижних углов (BIG WIN и выше) ---- */
.win-cannons { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.wc-side { position: absolute; bottom: 4%; width: 0; height: 0; }
.wc-l { left: 6%; }
.wc-r { right: 6%; }
/* Кувырка у частицы залпа нарочно нет: у форм через clip-path область
   обрезки поворачивается вместе с элементом, и вращение резало бы фигуру
   на глазах. Полёт веером и затухание читаются и без него. */
.win-cannons i {
    position: absolute;
    left: 0; top: 0;
    width: var(--wc-w, 7px);
    height: var(--wc-h, 11px);
    background: var(--wc-c, #ffd24b);
    opacity: 0;
    /* Ось «вылета» задаём поворотом, а дальность — сдвигом по этой оси:
       так один набор кадров работает для любого угла веера. */
    transform: rotate(var(--wc-a, -45deg)) translateX(0) scale(.6);
}
.slot-win-popup.show .win-cannons i {
    animation: winCannon var(--wc-dur, 1.25s) cubic-bezier(.14,.72,.3,1) var(--wc-delay, 0ms) both;
}
@keyframes winCannon {
    0%   { opacity: 0; transform: rotate(var(--wc-a)) translateX(0) scale(.5); }
    12%  { opacity: 1; }
    62%  { opacity: 1; transform: rotate(var(--wc-a)) translateX(var(--wc-d, 50vmin)) scale(1); }
    100% { opacity: 0; transform: rotate(var(--wc-a)) translateX(calc(var(--wc-d, 50vmin) * 1.12)) scale(.86); }
}


/* ---- Ленты серпантина (только MEGA и итог фриспинов) ---- */
.win-streamers { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.win-streamers i {
    position: absolute;
    left: var(--st-x, 50%);
    top: -14%;
    width: var(--st-w, 5px);
    height: var(--st-h, 46px);
    border-radius: 999px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--st-c, #ffd24b) 90%, #ffffff),
        var(--st-c, #ffd24b));
    opacity: 0;
}
.slot-win-popup.show .win-streamers i {
    animation: winStreamer var(--st-dur, 2.6s) linear var(--st-delay, 0ms) both;
}
@keyframes winStreamer {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(6deg); }
    10%  { opacity: .95; }
    35%  { transform: translate3d(var(--st-sway, 18px), 42vh, 0) rotate(-10deg); }
    65%  { transform: translate3d(calc(var(--st-sway, 18px) * -1), 78vh, 0) rotate(12deg); }
    90%  { opacity: .9; }
    100% { opacity: 0; transform: translate3d(var(--st-sway, 18px), 122vh, 0) rotate(-6deg); }
}

/* Компактная плашка WIN — маленькая пилюля, её рамка обрезала бы конфетти.
   Растягиваем слой на весь экран, как уже сделано для монет. */
.slot-win-popup.compact-win:not(.has-plaque) .win-confetti { position: fixed; inset: 0; }

@media (prefers-reduced-motion: reduce) {
    .win-cannons, .win-streamers { display: none !important; }
}

/* ============================================================
   ТИХАЯ СТРОКА ВЫИГРЫША: ПЛАВНЫЙ ЗАХОД И УХОД
   ------------------------------------------------------------
   Раньше пилюля просто появлялась и гасла на месте. Теперь она
   выезжает снизу с мягким доводом, по ней проезжает блик, сумма
   набегает счётчиком, из-под неё вылетают искры в форме и цвете
   пака, а уходит она вверх с растворением.
   Padding перенесён на .qw-body: у тела скрыт overflow (по нему
   едет блик), а искры при этом свободно вылетают за края пилюли.
   ============================================================ */
.slot-quiet-win {
    position: relative;
    padding: 0;
    overflow: visible;
    transform: translate3d(0, 12px, 0) scale(.9);
    transition: opacity .2s ease-out, transform .32s cubic-bezier(.2,1.36,.3,1);
}
.slot-quiet-win.show { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
/* Уход вверх, а не гашение на месте */
.slot-quiet-win.out {
    opacity: 0;
    transform: translate3d(0, -14px, 0) scale(.96);
    transition: opacity .24s ease-in, transform .26s ease-in;
}
.slot-quiet-win .qw-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px 7px;
    border-radius: inherit;
    overflow: hidden;
}
/* Блик проезжает по пилюле один раз на появлении */
.slot-quiet-win .qw-shine {
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent,
        color-mix(in srgb, var(--slot-accent, #FFD24B) 40%, rgba(255,255,255,.85)),
        transparent);
    opacity: 0;
    transform: skewX(-16deg);
}
.slot-quiet-win.show .qw-shine { animation: qwShine .72s cubic-bezier(.3,.7,.3,1) .1s both; }
@keyframes qwShine {
    0%   { opacity: 0; transform: translate3d(0,0,0) skewX(-16deg); }
    18%  { opacity: .9; }
    100% { opacity: 0; transform: translate3d(340%, 0, 0) skewX(-16deg); }
}
/* Сумма чуть «дышит», пока набегает — цифра выглядит живой */
.slot-quiet-win.show .qw-amount { animation: qwAmount .5s cubic-bezier(.2,1.5,.3,1) both; }
@keyframes qwAmount {
    0%   { transform: scale(.72); }
    58%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
/* Искры: летят из центра пилюли, форма и цвет — из пака */
.slot-quiet-win .qw-fx {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    pointer-events: none;
}
.slot-quiet-win .qw-spark {
    position: absolute;
    left: 0; top: 0;
    width: var(--qs-size, 5px);
    height: var(--qs-size, 5px);
    margin: calc(var(--qs-size, 5px) / -2) 0 0 calc(var(--qs-size, 5px) / -2);
    background: var(--qs-c, #ffd24b);
    opacity: 0;
    transform: rotate(var(--qs-a, 0deg)) translateX(0) scale(.5);
}
.slot-quiet-win.show .qw-spark {
    animation: qwSpark .82s cubic-bezier(.18,.74,.3,1) var(--qs-delay, 0ms) both;
}
@keyframes qwSpark {
    0%   { opacity: 0; transform: rotate(var(--qs-a)) translateX(0) scale(.4); }
    22%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--qs-a)) translateX(var(--qs-d, 36px)) scale(.7); }
}

@media (prefers-reduced-motion: reduce) {
    .slot-quiet-win { transform: none; transition: opacity .12s linear; }
    .slot-quiet-win.show, .slot-quiet-win.out { transform: none; }
    .slot-quiet-win .qw-shine, .slot-quiet-win .qw-fx { display: none !important; }
    .slot-quiet-win.show .qw-amount { animation: none !important; }
}

/* ============================================================
   КАСКАД: ПОЛЕ НЕ ТЕЛЕПОРТИРУЕТСЯ, А ЗАПОЛНЯЕТСЯ
   ------------------------------------------------------------
   Раньше на каждом каскаде переписывались все ячейки и все падали
   на одну клетку — выглядело как мгновенная смена всего поля.
   Теперь js считает, кто куда съезжает, и кладёт в ячейку точную
   дистанцию в пикселях (--tf-from). Символы, под которыми ничего
   не сыграло, класса не получают и стоят неподвижно.
   Двигаем .slot-symbol, а не саму ячейку: гнездо и рамка ячейки
   обязаны остаться на месте.
   ============================================================ */
.slot-screen .slot-cell.tumble-fall .slot-symbol {
    animation: tumbleFall var(--tf-dur, .48s) cubic-bezier(.24,.86,.3,1)
               var(--tf-delay, 0ms) both;
    will-change: transform, opacity;
}
/* Ячейка при каскаде не двигается сама — только её символ */
.slot-screen .slot-cell.tumble-fall { animation: none !important; }

@keyframes tumbleFall {
    0%   { transform: translate3d(0, var(--tf-from, -118%), 0) scale(.96, 1.05);
           opacity: var(--tf-op0, 1); }
    16%  { opacity: 1; }
    /* Удар о гнездо: короткий сквош, дальше выравнивание */
    74%  { transform: translate3d(0, 4%, 0) scale(1.06, .93); opacity: 1; }
    100% { transform: translate3d(0, 0, 0) scale(1, 1); opacity: 1; }
}

/* Пока идёт каскад, колонка режет свой верхний край: свежие символы должны
   приезжать из-за рамки поля, а не появляться поверх панелей над барабаном.
   У арт-слотов колонки и так обрезаны, это правило добавляет то же остальным. */
.slot-column.tumbling { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .slot-screen .slot-cell.tumble-fall .slot-symbol { animation: none !important; }
}

/* ============================================================
   ЗНАЧОК «i» НА КНОПКЕ ANTE + ОКОШКО ПРО ANTE
   ------------------------------------------------------------
   Тот же значок, что на обложках мини-игр, только посажен в правый
   верхний угол кнопки Ante. Кнопка Ante дорогая, поэтому значок
   обязан быть заметным и при этом не ловить случайный тап по самой
   кнопке — клик по нему js останавливает.
   ============================================================ */
.slot-action-ante { position: relative; }
.slot-action-ante .info-badge.ante-info {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    z-index: 4;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    color: #14141a;
    background: #ffffff;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
    cursor: pointer;
    transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.slot-action-ante .info-badge.ante-info:active {
    transform: translateY(-50%) scale(.84);
}
.slot-action-ante .info-badge.ante-info:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
/* Когда Ante включён, кнопка становится светло-зелёной — значок на ней
   должен остаться читаемым, поэтому затемняем его подложку. */
.slot-action-ante.active .info-badge.ante-info {
    background: #14251a;
    color: #eaffef;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* На узких экранах кнопка ниже — значок соразмерно меньше */
@media (max-width: 360px) {
    .slot-action-ante .info-badge.ante-info { width: 19px; height: 19px; font-size: 11px; right: 7px; }
}

/* Окошко про Ante: та же карточка, что у правил мини-игр, плюс плашка
   с реальной надбавкой в заголовке и акцент активного слота. */
.vg-modal.anteinfo .ante-card { border-color: color-mix(in srgb, var(--slot-accent, #FFD24B) 45%, transparent); }
.vg-modal.anteinfo .gi-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.vg-modal.anteinfo .ante-pill {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--slot-glow, #FFD24B) 60%, transparent);
    background: color-mix(in srgb, var(--slot-accent, #FFD24B) 18%, transparent);
    color: #fff;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 900;
    letter-spacing: .6px;
    white-space: nowrap;
}

/* Окошко Ante держим маленьким: раньше пять карточек-абзацев не влезали
   в экран телефона и приходилось листать, чтобы дойти до кнопки. Теперь
   компактный список «параметр — значение» и одна сноска.
   Карточка ограничена по высоте и скроллится внутри себя, а не растёт
   на весь экран: кнопка «ПОНЯТНО» всегда достижима. */
.vg-modal.anteinfo .vg-modal-card {
    max-width: 320px;
    padding: 16px 16px 14px;
    max-height: 86vh;
    overflow-y: auto;
}
.vg-modal.anteinfo .gi-head { margin-bottom: 6px; gap: 8px; }
.vg-modal.anteinfo .gi-name { font-size: clamp(19px, 5.4vw, 24px); }
.vg-modal.anteinfo .gi-point {
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 12px;
}
.ante-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.07);
    margin-bottom: 11px;
}
.ante-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(22,20,30,.96), rgba(15,14,22,.96));
}
.ante-k {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
}
.ante-v {
    font-size: 13px;
    line-height: 1.25;
    color: var(--muted);
    text-align: right;
}
.ante-v b { color: var(--white); font-weight: 900; }
.ante-note {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255,255,255,.5);
    margin-bottom: 12px;
}
.vg-modal.anteinfo .gi-close {
    margin-top: 0;
    font-size: 14px;
    padding: 11px 14px;
}
/* Ante — окно внутри слота, оно живёт в теме слота, а не в общей палитре
   мини-аппа. Общие .gi-* переехали на новые цвета, поэтому здесь возвращаем
   прежний вид: иначе кнопка и заголовок выбивались бы из темы пака. */
.vg-modal.anteinfo .vg-modal-card {
    background: linear-gradient(160deg, #17171c 0%, #111111 100%);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.7),
                inset 0 1px 0 rgba(255,255,255,.08);
}
.vg-modal.anteinfo .gi-name { font-weight: 800; }
.vg-modal.anteinfo .gi-point { font-weight: 600; }
.vg-modal.anteinfo .gi-close {
    background: linear-gradient(180deg, #FFFFFF, #D3D3D8); color: #14141a;
    border: none; letter-spacing: 1px; font-weight: 900;
    box-shadow: 0 6px 0 rgba(0,0,0,.3), inset 0 2px 4px rgba(255,255,255,.6);
}

/* ============================================================
   НАКОПИТЕЛЬНЫЕ СФЕРЫ VELTGODS
   ------------------------------------------------------------
   Сфера падает на клетку и ОСТАЁТСЯ там до конца бонуски, все
   упавшие складываются. Слой отдельный, поверх сетки: во время
   прокрута ячейки скрыты лентой, а сферы обязаны остаться на
   экране — в этом весь смысл «остались на месте».
   Ниже слоя одноразовых иксов (z-index 9), чтобы не спорить с ним.
   ============================================================ */
.orb-layer {
    position: absolute;
    inset: var(--ri-top, 1%) var(--ri-right, 2%) var(--ri-bottom, 1%) var(--ri-left, 2%);
    z-index: 8;
    pointer-events: none;
    overflow: visible;
}
.round-orb {
    position: absolute;
    height: auto;
    object-fit: contain;
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.72))
            drop-shadow(0 0 18px rgba(240,190,60,.8));
    /* Пока не прилетела и не «села» — не показываем, иначе мигнёт на месте */
    opacity: 0;
}
/* Прилёт: то же колесо фортуны, что у одиночных иксов слота — сфера
   раскручивается и, ЗАМЕДЛЯЯСЬ, встаёт на клетку. */
.round-orb.dropping {
    animation: roundOrbLand .82s cubic-bezier(.2,.7,.24,1) var(--orb-delay, 0ms) both;
}
/* Сфера выходит из вспышки удара и оседает на клетку. Раньше она наматывала
   -680° и дважды прыгала на 1.34 и 1.14 — на глаз это был рывок, а не посадка.
   Теперь оборот один, а гасящих подскоков два и они мельче: движение читается
   как вес, а не как дрожь. Длительность .82s НЕ меняем — её же ждёт landMs
   в applyRoundOrbs, и рассинхрон снова показал бы сумму раньше икса. */
@keyframes roundOrbLand {
    0%   { transform: translate(-50%, -232%) scale(.44) rotate(-236deg); opacity: 0; }
    14%  { transform: translate(-50%, -170%) scale(.7) rotate(-168deg); opacity: 1; }
    40%  { transform: translate(-50%, -43%) scale(1.16) rotate(-58deg); opacity: 1; }
    56%  { transform: translate(-50%, -57%) scale(1.01) rotate(-22deg); opacity: 1; }
    72%  { transform: translate(-50%, -47%) scale(1.08) rotate(-8deg); opacity: 1; }
    87%  { transform: translate(-50%, -51%) scale(1.005) rotate(-2deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}
/* Села: висит до конца раунда и спокойно «дышит», чтобы не выглядела
   приклеенной картинкой. Только transform — filter в кадрах заставлял бы
   телефон перерисовывать тень каждый кадр. */
.round-orb.landed {
    opacity: 1;
    animation: roundOrbIdle 3.2s ease-in-out infinite;
}
@keyframes roundOrbIdle {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
    50%      { transform: translate(-50%, -50%) scale(1.035) rotate(2deg); }
}

/* Табло над барабаном. Общая раскладка для двух табло:
   .orb-total  — накопленная сумма сфер VeltGods (без него не видно, что сферы
                 складываются, и зачем они висят на поле);
   .mspot-best — самая жирная клетка-множитель VeltRush (именно она умножает
                 сыгровку, поэтому это единственное честное число). */
.orb-total, .mspot-best {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: min(94%, 340px);
    margin: 0 auto 5px;
    padding: 5px 15px 6px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--slot-accent, #F0BE3C) 75%, transparent);
    background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 55%),
                linear-gradient(135deg, rgba(16,14,26,.94), rgba(9,8,16,.96));
    box-shadow: 0 4px 14px rgba(0,0,0,.5),
                0 0 18px color-mix(in srgb, var(--slot-accent, #F0BE3C) 34%, transparent);
    font-family: var(--slot-font, 'Cinzel', serif);
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(.94);
    transition: opacity .2s ease-out, transform .3s cubic-bezier(.2,1.32,.3,1);
    pointer-events: none;
}
.orb-total.show, .mspot-best.show { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.orb-total .ot-label, .mspot-best .ot-label {
    font-size: clamp(8px, 2.4vw, 10px);
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.62);
    text-transform: uppercase;
}
.orb-total .ot-value, .mspot-best .ot-value {
    font-size: clamp(17px, 4.8vw, 22px);
    font-weight: 900;
    line-height: 1;
    color: var(--slot-accent, #F0BE3C);
    text-shadow: 0 2px 5px rgba(0,0,0,.85);
}
/* Множитель вырос — табло коротко подпрыгивает, это видно боковым зрением */
.orb-total.bump, .mspot-best.bump { animation: orbTotalBump .52s cubic-bezier(.2,1.5,.3,1); }
@keyframes orbTotalBump {
    0%   { transform: translate3d(0,0,0) scale(1); }
    38%  { transform: translate3d(0,0,0) scale(1.16); }
    100% { transform: translate3d(0,0,0) scale(1); }
}

/* ============================================================
   ОКНО «ДОКРУТИ БОНУСКУ»
   ------------------------------------------------------------
   Заменяет системный alert Telegram: тот выглядел чужой серой плашкой поверх
   слота и не говорил, сколько спинов осталось. Акцент, свечение и шрифт берём
   у активного слота (--m-acc / --m-glow / --m-font), поэтому окно выглядит
   частью игры, а не системным сообщением.
   ============================================================ */
.vg-modal.bonuspending .vg-modal-card.bp-card {
    max-width: 330px;
    padding: 20px 20px 16px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--m-acc, #FF5FA2) 55%, transparent);
    background: linear-gradient(165deg, rgba(26,22,38,.98), rgba(13,11,20,.99));
    box-shadow: 0 24px 60px rgba(0,0,0,.7),
                0 0 34px color-mix(in srgb, var(--m-glow, #B15CFF) 30%, transparent),
                inset 0 1px 0 rgba(255,255,255,.08);
}
.bp-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--m-acc, #FF5FA2) 85%, #fff);
    margin-bottom: 4px;
}
.bp-title {
    font-family: var(--m-font, 'Fredoka', sans-serif);
    font-size: clamp(20px, 5.6vw, 26px);
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.7),
                 0 0 22px color-mix(in srgb, var(--m-glow, #B15CFF) 55%, transparent);
    margin-bottom: 14px;
}
.bp-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--m-acc, #FF5FA2) 22%, transparent);
    margin-bottom: 12px;
    text-align: left;
}
.bp-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 13px;
    background: linear-gradient(180deg, rgba(24,20,34,.96), rgba(15,13,22,.96));
}
.bp-k {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}
.bp-v { font-size: 13px; color: var(--muted); white-space: nowrap; }
.bp-v b {
    font-size: 17px;
    font-weight: 900;
    color: color-mix(in srgb, var(--m-acc, #FF5FA2) 70%, #fff);
}
.bp-note {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255,255,255,.62);
    margin-bottom: 10px;
}
.bp-note b { color: #fff; }
/* Раунд принадлежит другому слоту — говорим прямо, иначе тап «докрутить»
   выглядел бы как «кнопка не работает». */
.bp-where {
    font-size: 12px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--m-acc, #FF5FA2) 78%, #fff);
    background: color-mix(in srgb, var(--m-acc, #FF5FA2) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-acc, #FF5FA2) 35%, transparent);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 12px;
}
.vg-modal.bonuspending .bp-go {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    font-family: var(--m-font, 'Fredoka', sans-serif);
    font-size: 16px;
    letter-spacing: 1.2px;
    color: #14141a;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--m-acc, #FF5FA2) 30%, #fff),
        color-mix(in srgb, var(--m-acc, #FF5FA2) 70%, #fff));
    box-shadow: 0 6px 0 color-mix(in srgb, var(--m-glow, #B15CFF) 45%, #000),
                0 10px 24px rgba(0,0,0,.5),
                inset 0 2px 4px rgba(255,255,255,.6);
}
.bp-later {
    display: block;
    width: 100%;
    margin-top: 9px;
    padding: 7px;
    border: none;
    background: none;
    color: rgba(255,255,255,.45);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.bp-later:active { color: rgba(255,255,255,.75); }

/* Табло VeltRush: раскладка общая, а цвет — из арта текущего икса, и накал
   растёт вместе с ним. Идёт после общего правила, иначе рамка и свечение
   вернулись бы к дефолтному акценту слота. */
.mspot-best {
    --ms-hot: #ffbe28;
    --ms-lite: #ffe478;
    --ms-power: 0;
    border-color: color-mix(in srgb, var(--ms-hot) 78%, transparent);
    box-shadow: 0 4px 14px rgba(0,0,0,.5),
                0 0 calc(16px + 14px * var(--ms-power))
                    color-mix(in srgb, var(--ms-hot) calc(30% + 26% * var(--ms-power)), transparent);
}
.mspot-best .ot-value { color: var(--ms-lite); }

/* ============================================================
   МЕДАЛЬОН НАКОПЛЕННОГО ИКСА (VeltGods)
   ------------------------------------------------------------
   В арт-паке есть «Пустой X для бонуски» — круглый медальон, который в макете
   висит у правого нижнего угла рамки барабана. Это родное место для
   накопленного множителя раунда, поэтому текстовое табло .orb-total у таких
   слотов не рисуется вовсе (иначе одно и то же число в двух местах).

   Геометрия ЗАМЕРЕНА, не на глаз:
   - рамка 2128x1774, игровое поле y 213..1593 -> низ поля на 89.80% высоты;
   - медальон 240x240, круг = 79.6% ширины арта, центр круга совпадает с
     центром картинки (замер по альфа-каналу) -> число ставим ровно по центру.
   При width 17% ширины барабана высота медальона = 20.4% высоты барабана, и
   при bottom -9% его верх приходится на 88.6% — то есть он садится ровно под
   угол поля, задевая его на 1.2% (меньше десятой ячейки) и свисая ниже рамки,
   как в макете. Свисающую часть компенсирует margin-bottom самого барабана.
   ============================================================ */
.mult-medal {
    position: absolute;
    right: 3.4%;
    bottom: -9%;
    width: 17%;
    aspect-ratio: 1 / 1;
    z-index: 12;
    pointer-events: none;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translate3d(0, 8%, 0) scale(.84);
    transition: opacity .28s var(--ease), transform .34s cubic-bezier(.2, 1.3, .3, 1);
}
.mult-medal.show { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.mm-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.62));
    /* Анимируем только transform: filter в кадрах заставлял бы телефон
       перерисовывать тень каждый кадр. */
    will-change: transform;
}
.mm-value {
    position: relative;
    z-index: 1;
    font-family: var(--slot-font, inherit);
    font-size: clamp(12px, 4.2vw, 21px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.9),
                 0 0 10px var(--slot-glow, rgba(255,210,90,.6));
    opacity: 0;
    transform: scale(.55);
    transition: opacity .16s var(--ease), transform .24s cubic-bezier(.2, 1.5, .3, 1);
}
.mult-medal.has-value .mm-value { opacity: 1; transform: scale(1); }
/* ×1000 и длиннее в кружок не влезает — сжимаем шрифт, а не обрезаем число */
.mult-medal.mm-long .mm-value { font-size: clamp(10px, 3.3vw, 17px); }
/* Пока пусто — медальон дышит: так видно, что он ждёт иксы, а не декорация */
.mult-medal:not(.has-value) .mm-art { animation: mmIdle 2.6s ease-in-out infinite; }
@keyframes mmIdle {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(0, -3%, 0) scale(1.045); }
}
/* Икс прилетел: медальон принимает удар */
.mult-medal.catch .mm-art { animation: mmCatch .44s cubic-bezier(.2, 1.4, .3, 1); }
@keyframes mmCatch {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    32%  { transform: translate3d(0, 0, 0) scale(1.22); }
    64%  { transform: translate3d(0, 0, 0) scale(.95); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
/* Число выросло — коротко подпрыгивает */
.mult-medal.bump .mm-value { animation: mmBump .5s cubic-bezier(.2, 1.5, .3, 1); }
@keyframes mmBump {
    0%   { transform: scale(1); }
    36%  { transform: scale(1.34); }
    100% { transform: scale(1); }
}
/* Копия сферы, летящая в медальон. Живёт в body поверх всего (position: fixed),
   потому что путь идёт за пределы барабана. Длительность ставит JS инлайном —
   он же считает момент «поймал», и расходиться им нельзя. */
.mm-fly {
    position: fixed;
    z-index: 4000;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
    animation: mmFly .7s cubic-bezier(.32, .06, .4, 1) both;
}
@keyframes mmFly {
    0% {
        transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    16% {
        transform: translate3d(-50%, -50%, 0)
                   translate3d(calc(var(--mm-dx, 0px) * .08), calc(var(--mm-dy, 0px) * .08 - 16px), 0)
                   scale(1.16) rotate(24deg);
        opacity: 1;
    }
    72% {
        transform: translate3d(-50%, -50%, 0)
                   translate3d(var(--mm-dx, 0px), var(--mm-dy, 0px), 0)
                   scale(var(--mm-scale, .6)) rotate(260deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(-50%, -50%, 0)
                   translate3d(var(--mm-dx, 0px), var(--mm-dy, 0px), 0)
                   scale(calc(var(--mm-scale, .6) * .46)) rotate(320deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mult-medal { transition: none; transform: none; }
    .mult-medal.show { transform: none; }
    .mult-medal .mm-art, .mult-medal .mm-value { animation: none !important; }
    .mult-medal .mm-value { transition: none; transform: none; }
    .mm-fly { display: none !important; }
    .round-orb, .round-orb.dropping, .round-orb.landed {
        animation: none !important;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .orb-total, .mspot-best { transition: none; transform: none; }
    .orb-total.show, .orb-total.bump,
    .mspot-best.show, .mspot-best.bump { transform: none; animation: none !important; }
}

/* ============================================================
   VELTFISH: ДЕНЕЖНЫЕ РЫБЫ, СБОР И ПРОГРЕСС РЫБАКОВ
   ------------------------------------------------------------
   Раньше рыбы и рыбак считались отдельно от сетки: на барабане
   могло не быть ни того, ни другого, а плашка «собрал» вылетала.
   Теперь сервер кладёт их на реальные клетки, а здесь — вид:
   номинал прямо на рыбе, вспышка рыбака, полёт номиналов к нему
   и панель прогресса рыбаков над барабаном.
   ============================================================ */

/* ---- Денежная рыба: арт + номинал прямо на символе ---- */
.money-fish {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.money-fish > .money-fish-img { width: 100%; height: 100%; object-fit: contain; }
.money-fish-badge {
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    padding: 1px 6px 2px;
    border-radius: 999px;
    border: 1px solid rgba(255,236,170,.85);
    background: linear-gradient(180deg, rgba(24,18,6,.92), rgba(12,9,3,.95));
    color: #FFE9A8;
    font-family: var(--slot-font, 'Oswald', sans-serif);
    font-size: clamp(8px, 2.4vw, 12px);
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    pointer-events: none;
}

/* ---- Момент сбора ---- */
.slot-cell.fisher-active .slot-symbol { animation: fisherPull .62s ease-in-out infinite; }
@keyframes fisherPull {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.16) rotate(-4deg); }
}
.slot-cell.fish-caught .slot-symbol { animation: fishCaught .5s ease-out both; }
@keyframes fishCaught {
    0%   { transform: scale(1); opacity: 1; }
    35%  { transform: scale(1.22); opacity: 1; }
    100% { transform: scale(.4); opacity: 0; }
}
/* Номинал летит к рыбаку — видно, куда уходят деньги */
.fish-fly {
    position: fixed;
    z-index: 5006;
    pointer-events: none;
    transform: translate(-50%, -50%);
    color: #FFE9A8;
    font-family: var(--slot-font, 'Oswald', sans-serif);
    font-size: clamp(13px, 3.6vw, 18px);
    font-weight: 900;
    text-shadow: 0 2px 5px rgba(0,0,0,.9), 0 0 12px rgba(239,182,60,.9);
    animation: fishFly .72s cubic-bezier(.3,.7,.3,1) both;
}
@keyframes fishFly {
    0%   { transform: translate(-50%, -50%) scale(.8); opacity: 0; }
    18%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--ff-dx, 0px)), calc(-50% + var(--ff-dy, 0px))) scale(.7);
           opacity: 0; }
}

/* ---- Панель прогресса рыбаков ---- */
.fisher-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: min(96%, 360px);
    margin: 0 auto 5px;
    padding: 5px 14px 6px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--slot-accent, #EFB63C) 72%, transparent);
    background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 55%),
                linear-gradient(135deg, rgba(8,18,26,.94), rgba(5,11,17,.96));
    box-shadow: 0 4px 14px rgba(0,0,0,.5),
                0 0 16px color-mix(in srgb, var(--slot-accent, #EFB63C) 30%, transparent);
    font-family: var(--slot-font, 'Oswald', sans-serif);
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(.94);
    transition: opacity .2s ease-out, transform .3s cubic-bezier(.2,1.32,.3,1);
    pointer-events: none;
}
.fisher-progress.show { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.fisher-progress .fp-label {
    font-size: clamp(8px, 2.3vw, 10px);
    font-weight: 800;
    letter-spacing: 1.4px;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
}
.fisher-progress .fp-count {
    font-size: clamp(14px, 3.9vw, 18px);
    font-weight: 900;
    line-height: 1;
    color: var(--slot-accent, #EFB63C);
    text-shadow: 0 2px 4px rgba(0,0,0,.85);
}
.fisher-progress .fp-bar {
    position: relative;
    width: clamp(52px, 17vw, 84px);
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    overflow: hidden;
}
.fisher-progress .fp-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--slot-glow, #2C9FC4) 80%, #ffffff),
        var(--slot-accent, #EFB63C));
    transition: width .35s cubic-bezier(.2,.9,.3,1);
}
.fisher-progress .fp-goal {
    font-size: clamp(8px, 2.4vw, 11px);
    font-weight: 700;
    color: rgba(255,255,255,.7);
}
.fisher-progress .fp-goal b { color: var(--slot-accent, #EFB63C); font-weight: 900; }
.fisher-progress.maxed { border-color: #ffe08a; }
.fisher-progress.bump { animation: fisherBump .5s cubic-bezier(.2,1.5,.3,1); }
@keyframes fisherBump {
    0%   { transform: translate3d(0,0,0) scale(1); }
    38%  { transform: translate3d(0,0,0) scale(1.14); }
    100% { transform: translate3d(0,0,0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .slot-cell.fisher-active .slot-symbol,
    .slot-cell.fish-caught .slot-symbol { animation: none !important; }
    .fish-fly { display: none !important; }
    .fisher-progress { transition: none; transform: none; }
    .fisher-progress.show, .fisher-progress.bump { transform: none; animation: none !important; }
    .fisher-progress .fp-fill { transition: none; }
}

/* ============================================================
   СЛОВЕСНЫЕ ПЛАШКИ: ОТЛИЧНО / СУПЕР / СЕНСАЦИЯ / НЕВЕРОЯТНО.

   Это САМОСТОЯТЕЛЬНЫЕ плашки, а не подпись к арту. На PNG-плашках уже написано
   WIN / BIG WIN / MEGA WIN, поэтому словесные ступени показываются ВМЕСТО
   картинки — у каждого слова свой диапазон иксов (см. SLOT_WIN_LADDER в JS), и
   вместе с WIN слово не вылетает никогда.

   Цвет — акцент и свечение самого пака (--slot-accent/--slot-glow), шрифт —
   его же (--slot-font): у сладких Fredoka, у эпических Cinzel, у диких Oswald.
   Отдельной «палитры слов» нет, поэтому плашка всегда выглядит частью слота.
   ============================================================ */
.slot-win-popup.word-win .slot-win-content { position: relative; z-index: 3; }
.slot-win-popup.word-win .slot-win-label {
    display: block;
    font-family: var(--slot-font, 'Inter', sans-serif);
    font-weight: 900;
    font-size: clamp(34px, 12vw, 74px);
    letter-spacing: 3px;
    line-height: 1.02;
    white-space: nowrap;
    text-shadow: none;
    background: linear-gradient(100deg,
        #FFFFFF 0%,
        var(--slot-accent, #FFD24B) 34%,
        #FFF6D0 52%,
        var(--slot-glow, #FF6BD6) 78%,
        #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Тень и свечение статичные: filter не анимируем — на телефоне это дорого. */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.7)) drop-shadow(0 0 18px var(--slot-glow, #FF6BD6));
}
/* Длинные слова (СЕНСАЦИЯ, НЕВЕРОЯТНО, SENSATIONAL) не должны вылезать за
   экран: им уменьшаем кегль и разрешаем перенос по буквам. */
.slot-win-popup.word-win[data-step="sensational"] .slot-win-label,
.slot-win-popup.word-win[data-step="incredible"] .slot-win-label {
    font-size: clamp(26px, 9.4vw, 62px);
    letter-spacing: 2px;
    white-space: normal;
    max-width: min(92vw, 620px);
    margin: 0 auto;
}
.slot-win-popup.word-win .slot-win-amount {
    margin-top: 14px;
    font-size: clamp(34px, 11vw, 68px);
}

/* Своя подача на каждый пакет слотов. Набор transform-функций во всех кадрах
   одинаковый (translate3d + scale + rotate), иначе браузер не смешает кадры. */
.slot-win-popup.word-win.wk-pop .slot-win-label {
    animation: wkPopIn .52s cubic-bezier(.16,1.62,.3,1) both,
               wkPopIdle 2.1s ease-in-out .62s infinite;
}
@keyframes wkPopIn {
    0%   { opacity: 0; transform: translate3d(0, 16px, 0) scale(.52) rotate(-6deg); }
    58%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1.12) rotate(2deg); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}
@keyframes wkPopIdle {
    0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50%      { opacity: 1; transform: translate3d(0, -5px, 0) scale(1.05) rotate(-1.5deg); }
}

.slot-win-popup.word-win.wk-epic .slot-win-label {
    animation: wkEpicIn .62s cubic-bezier(.2,.9,.24,1) both,
               wkEpicIdle 2.6s ease-in-out .7s infinite;
}
@keyframes wkEpicIn {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(1.85) rotate(0deg); }
    64%  { opacity: 1; transform: translate3d(0, 0, 0) scale(.96) rotate(0deg); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}
@keyframes wkEpicIdle {
    0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50%      { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.035) rotate(0deg); }
}

.slot-win-popup.word-win.wk-slam .slot-win-label {
    animation: wkSlamIn .5s cubic-bezier(.22,1.4,.32,1) both,
               wkSlamIdle 2.4s ease-in-out .6s infinite;
}
@keyframes wkSlamIn {
    0%   { opacity: 0; transform: translate3d(-74%, 0, 0) scale(1.1) rotate(-9deg); }
    62%  { opacity: 1; transform: translate3d(4%, 0, 0) scale(1) rotate(2deg); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}
@keyframes wkSlamIdle {
    0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50%      { opacity: 1; transform: translate3d(0, 0, 0) scale(1.04) rotate(1.5deg); }
}

/* Узкие экраны: слово мельче, межбуквенное расстояние меньше — иначе длинные
   слова упираются в края. */
@media (max-width: 380px) {
    .slot-win-popup.word-win .slot-win-label { letter-spacing: 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .slot-win-popup.word-win .slot-win-label {
        animation: none !important;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

/* ============================================================
   СПОСОБЫ ПОПОЛНЕНИЯ: сетка 2×2.

   Четыре способа в один ряд не влезали (на 390px это по 82px на кнопку —
   «CryptoBot» уже не помещается), поэтому раскладываем их в два столбика:
   слева рабочие CryptoBot / xRocket, справа анонсы Gifts / Card.
   grid-auto-flow: column заполняет сначала столбец, поэтому порядок в разметке
   остаётся логичным (рабочие способы первыми), а на экране они встают друг под
   другом. Правила ограничены #depMethods — в выводе по-прежнему две кнопки в
   строку, его вид не меняется.

   Кнопка стала вдвое шире, поэтому шрифт и иконка вернулись к нормальному
   размеру: сжимать их было нужно только из-за трёх штук в одной строке.
   ============================================================ */
#depMethods {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 10px;
}
#depMethods .method {
    position: relative;
    padding: 14px 10px;
    font-size: 13.5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
}
#depMethods .method-ic {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* Способ, которого ещё нет: кнопка видна и с обложкой, но приглушена — сразу
   понятно, что это анонс, а не рабочая кнопка. */
.method.soon { opacity: .74; }
.method.soon .method-ic { filter: grayscale(.4); }
.method-soon {
    position: absolute;
    top: -7px;
    right: 6px;
    font-style: normal;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    background: linear-gradient(160deg, #FFD76A, #FF9F45);
    color: #23180A;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}

/* Тап по недоступному способу: короткая тряска вместо системного алерта.
   Набор transform-функций во всех кадрах одинаковый. */
.method.shake { animation: methodDeny .38s cubic-bezier(.36, .07, .19, .97); }
@keyframes methodDeny {
    0%, 100% { transform: translate3d(0, 0, 0); }
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    30%, 70% { transform: translate3d(3px, 0, 0); }
    50%      { transform: translate3d(-3px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .method.shake { animation: none !important; }
}

/* ============================================================
   РОСТ ПЛАШКИ ПОКА БЕЖИТ СУММА + ПЛИТА ПОД СУММОЙ У СЛОВЕСНЫХ ПЛАШЕК.

   Пока цифра набегает, вся плашка (и арт-плашка, и словесная) плавно
   подрастает: игрок видит, что счёт ещё идёт. Длительность берётся из
   --count-ms, её ставит JS тем же числом, которым считает сумму, поэтому рост
   заканчивается ровно на последней цифре.

   Рост идёт ДО scale(1) — то есть до выверенного размера плашки, поэтому за
   экран ничего не вылезает. Анимация висит на .slot-win-content, а не на
   .plaque-wrap: у обёртки свои анимации вылета и парения, и две анимации на
   одном transform затирали бы друг друга.

   Смещение --plaque-optical-y обязано остаться в кадрах: им выверено
   оптическое положение каждой PNG-плашки (см. расчёты по арту выше).
   ============================================================ */
.slot-win-popup.counting.has-plaque .slot-win-content {
    animation: winCountGrowPlaque var(--count-ms, 860ms) cubic-bezier(.22, .68, .3, 1) both !important;
}
@keyframes winCountGrowPlaque {
    from { transform: translate3d(0, var(--plaque-optical-y, -8px), 0) scale(.86); }
    to   { transform: translate3d(0, var(--plaque-optical-y, -8px), 0) scale(1); }
}
.slot-win-popup.counting:not(.has-plaque) .slot-win-content {
    animation: winCountGrow var(--count-ms, 860ms) cubic-bezier(.22, .68, .3, 1) both !important;
}
@keyframes winCountGrow {
    from { transform: translate3d(0, 0, 0) scale(.86); }
    to   { transform: translate3d(0, 0, 0) scale(1); }
}

/* Плита под суммой у словесных плашек: у арт-плашек число лежит внутри свитка,
   а слово рисуем мы сами — без плиты цифра висела прямо на барабане и читалась
   хуже самого слова. Цвета — снова акцент и свечение пака. */
.slot-win-popup.word-win .word-plate {
    margin: 16px auto 0;
    max-width: min(88vw, 460px);
    padding: 14px 26px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(10, 10, 16, .92), rgba(28, 28, 38, .92));
    border: 2px solid color-mix(in srgb, var(--slot-accent, #FFD24B) 72%, #FFFFFF);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, .62),
        0 0 28px color-mix(in srgb, var(--slot-glow, #FF6BD6) 42%, transparent),
        inset 0 0 20px rgba(255, 255, 255, .06);
}
.slot-win-popup.word-win .word-plate .slot-win-amount {
    margin: 0;
    color: #FFF6D0;
    text-shadow: 0 3px 10px rgba(0, 0, 0, .7), 0 0 20px var(--slot-glow, #FF6BD6);
}

@media (max-width: 380px) {
    .slot-win-popup.word-win .word-plate { padding: 11px 18px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .slot-win-popup.counting.has-plaque .slot-win-content,
    .slot-win-popup.counting:not(.has-plaque) .slot-win-content {
        animation: none !important;
    }
}

/* ============================================================
   ПРЕДВЕСТИЕ ИКСА (.mult-intro)

   Зачем: у слотов с множителями нет символа, который превращается в икс —
   множитель приходит от сервера отдельным числом. Игрок видел, что икс
   «появился с нихуя». Теперь перед посадкой в клетке играет короткий заряд в
   характере пака, и икс выходит ИЗ ЕГО ВСПЫШКИ: посадка сдвинута на длину
   заряда (см. spawnMultIntro и --mult-delay / --orb-delay в JS).

   Общая механика: элемент стоит в центре целевой клетки, внутри три слоя —
   ядро (то, что бьёт или падает), шлейф и ударное кольцо. Анимации только
   transform/opacity, набор transform-функций внутри одной анимации совпадает
   во всех кадрах. Цвета — акцент и свечение самого пака.
   ============================================================ */
.mult-intro {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 7;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
}
.mult-intro b {
    position: absolute;
    display: block;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, opacity;
}
/* Ударное кольцо есть у всех зарядов: именно оно ставит точку «здесь». */
.mult-intro .mi-ring {
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    border: 2px solid var(--slot-accent, #FFD24B);
    opacity: 0;
    animation: miRing var(--mi-ms, 420ms) cubic-bezier(.2, .8, .3, 1) var(--mi-delay, 0ms) both;
}
@keyframes miRing {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.2); }
    62%  { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.3); }
    74%  { opacity: .95; transform: translate3d(-50%, -50%, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(2.5); }
}
/* Вспышка в момент удара — общая для всех стилей: из неё и выходит икс. */
.mult-intro::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, .95) 0%,
        color-mix(in srgb, var(--slot-glow, #FF6BD6) 70%, transparent) 42%,
        transparent 72%);
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.3);
    animation: miFlash var(--mi-ms, 420ms) ease-out var(--mi-delay, 0ms) both;
}
@keyframes miFlash {
    0%, 58% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.3); }
    72%     { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
    100%    { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.5); }
}

/* ---------- VeltGods: молния бьёт в клетку сверху ----------

   Раньше разряд был прямой палкой 7×190px, которая СЪЕЗЖАЛА вниз (translate
   с -190% до -100%). Из-за этого удар читался как падающий блик: у настоящей
   молнии нет ровных краёв, и она не едет — канал пробивается сверху вниз почти
   мгновенно, а потом бьёт повторно по тому же следу.

   Что даёт правдоподобие здесь:
   - форму ломаной задаёт clip-path (три излома), а не border-radius;
   - канал ПРОРАСТАЕТ вниз через scaleY от transform-origin: 50% 0, то есть от
     точки в небе к клетке, а не переезжает целиком;
   - двойной повторный удар сделан ступеньками opacity — именно мерцание читается
     глазом как электричество;
   - от канала отходит ветка (::before), которая гаснет не доходя до поля.

   clip-path и filter стоят СТАТИКОЙ, вне кадров: анимировать их на телефоне
   дорого, и в кадрах заряда по договору живут только transform и opacity. */
.mi-bolt .mi-core {
    width: 34px;
    height: 208px;
    border-radius: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--slot-glow, #6C7BFF) 55%, #FFFFFF) 0%,
        #FFFFFF 22%,
        #FFFFFF 76%,
        color-mix(in srgb, var(--slot-glow, #6C7BFF) 45%, #FFFFFF) 100%);
    /* Ломаная: вниз по левому краю, обратно вверх по правому. Кончик выведен
       к 46% по X — почти в центр клетки, куда и приходит удар. */
    clip-path: polygon(
        47% 0%, 30% 29%, 45% 40%, 25% 71%, 41% 82%, 46% 100%,
        57% 82%, 51% 71%, 71% 40%, 55% 29%, 66% 0%);
    filter: drop-shadow(0 0 5px #FFFFFF)
            drop-shadow(0 0 15px color-mix(in srgb, var(--slot-glow, #6C7BFF) 85%, transparent))
            drop-shadow(0 0 34px color-mix(in srgb, var(--slot-accent, #FFD24B) 50%, transparent));
    transform-origin: 50% 0;
    /* linear, а не ease: у мерцания не должно быть плавных разгонов. */
    animation: miBolt var(--mi-ms, 520ms) linear var(--mi-delay, 0ms) both;
}
@keyframes miBolt {
    0%   { opacity: 0; transform: translate3d(-50%, -100%, 0) scaleY(.04) skewX(-5deg); }
    42%  { opacity: 0; transform: translate3d(-50%, -100%, 0) scaleY(.04) skewX(-5deg); }
    52%  { opacity: .4; transform: translate3d(-50%, -100%, 0) scaleY(.55) skewX(-3deg); }
    62%  { opacity: .9; transform: translate3d(-50%, -100%, 0) scaleY(.93) skewX(2deg); }
    68%  { opacity: 1; transform: translate3d(-50%, -100%, 0) scaleY(1) skewX(0deg); }
    74%  { opacity: .28; transform: translate3d(-50%, -100%, 0) scaleY(1) skewX(2deg); }
    80%  { opacity: 1; transform: translate3d(-50%, -100%, 0) scaleY(1) skewX(-2deg); }
    88%  { opacity: .42; transform: translate3d(-50%, -100%, 0) scaleY(1) skewX(1deg); }
    94%  { opacity: .74; transform: translate3d(-50%, -100%, 0) scaleY(1) skewX(0deg); }
    100% { opacity: 0; transform: translate3d(-50%, -100%, 0) scaleY(1) skewX(0deg); }
}
/* Ветка канала: отходит вправо и гаснет, НЕ доходя до поля. Ветка есть у любого
   настоящего разряда, и именно она убирает ощущение нарисованной палки.
   Отдельным псевдоэлементом на .mi-bolt, а не внутри .mi-core: clip-path ядра
   обрезал бы всё, что лежит внутри него. */
.mi-bolt::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 78px;
    background: linear-gradient(180deg,
        #FFFFFF 0%,
        color-mix(in srgb, var(--slot-glow, #6C7BFF) 60%, #FFFFFF) 100%);
    clip-path: polygon(46% 0%, 20% 40%, 38% 52%, 16% 100%, 48% 48%, 30% 36%, 62% 0%);
    filter: drop-shadow(0 0 4px #FFFFFF)
            drop-shadow(0 0 13px color-mix(in srgb, var(--slot-glow, #6C7BFF) 80%, transparent));
    transform-origin: 50% 0;
    opacity: 0;
    animation: miBoltFork var(--mi-ms, 520ms) linear var(--mi-delay, 0ms) both;
}
@keyframes miBoltFork {
    0%   { opacity: 0; transform: translate3d(4px, -116px, 0) scaleY(.1) rotate(26deg); }
    50%  { opacity: 0; transform: translate3d(4px, -116px, 0) scaleY(.1) rotate(26deg); }
    60%  { opacity: .75; transform: translate3d(4px, -116px, 0) scaleY(1) rotate(26deg); }
    68%  { opacity: .22; transform: translate3d(4px, -116px, 0) scaleY(1) rotate(26deg); }
    76%  { opacity: .9; transform: translate3d(4px, -116px, 0) scaleY(1) rotate(26deg); }
    88%  { opacity: .18; transform: translate3d(4px, -116px, 0) scaleY(1) rotate(26deg); }
    100% { opacity: 0; transform: translate3d(4px, -116px, 0) scaleY(1) rotate(26deg); }
}
/* Разряд по клетке в момент удара: тонкая яркая дуга, которая расходится.
   Мерцает вместе с каналом, иначе выглядела бы отдельным эффектом. */
.mi-bolt .mi-trail {
    width: 104px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #FFFFFF 45%, #FFFFFF 55%, transparent);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--slot-glow, #6C7BFF) 90%, transparent));
    opacity: 0;
    animation: miBoltArc var(--mi-ms, 520ms) ease-out var(--mi-delay, 0ms) both;
}
@keyframes miBoltArc {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(.15) rotate(0deg); }
    64%  { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(.15) rotate(0deg); }
    70%  { opacity: .95; transform: translate3d(-50%, -50%, 0) scaleX(1) rotate(0deg); }
    78%  { opacity: .3; transform: translate3d(-50%, -50%, 0) scaleX(1.18) rotate(0deg); }
    84%  { opacity: .8; transform: translate3d(-50%, -50%, 0) scaleX(1.3) rotate(0deg); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(1.75) rotate(0deg); }
}
/* Вторая дуга под углом: удар расходится по гнезду в две стороны, а не одной
   ровной чертой. Псевдоэлемент шлейфа свободен, лишнего DOM не добавляем. */
.mi-bolt .mi-trail::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72%;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
    opacity: 0;
    animation: miBoltArcB var(--mi-ms, 520ms) ease-out var(--mi-delay, 0ms) both;
}
@keyframes miBoltArcB {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(.2) rotate(-19deg); }
    66%  { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(.2) rotate(-19deg); }
    73%  { opacity: .7; transform: translate3d(-50%, -50%, 0) scaleX(1) rotate(-19deg); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(1.5) rotate(-19deg); }
}
/* Вспышка удара у молнии белее и крупнее общей: разряд бьёт в гнездо, и из
   этой вспышки затем выходит сфера с иксом. Кадры (miFlash) общие — трогать их
   нельзя, они держат синхрон с посадкой икса у всех слотов. */
.mi-bolt::after {
    width: 108px;
    height: 108px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, .98) 0%,
        rgba(255, 255, 255, .72) 26%,
        color-mix(in srgb, var(--slot-glow, #6C7BFF) 72%, transparent) 52%,
        transparent 76%);
}

/* ---------- VeltStars: звезда падает по диагонали со шлейфом ---------- */
.mi-star .mi-core {
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 16px 6px color-mix(in srgb, var(--slot-accent, #FF8FD0) 75%, transparent);
    animation: miStar var(--mi-ms, 520ms) cubic-bezier(.32, .06, .2, 1) var(--mi-delay, 0ms) both;
}
@keyframes miStar {
    0%   { opacity: 0; transform: translate3d(-360%, -420%, 0) scale(.5); }
    22%  { opacity: 1; transform: translate3d(-280%, -320%, 0) scale(.9); }
    68%  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.15); }
    80%  { opacity: .7; transform: translate3d(-50%, -50%, 0) scale(.5); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.3); }
}
.mi-star .mi-trail {
    width: 120px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--slot-accent, #FF8FD0) 85%, #FFFFFF));
    transform-origin: 100% 50%;
    animation: miStarTrail var(--mi-ms, 520ms) cubic-bezier(.32, .06, .2, 1) var(--mi-delay, 0ms) both;
}
@keyframes miStarTrail {
    0%   { opacity: 0; transform: translate3d(-330%, -400%, 0) rotate(41deg) scaleX(.3); }
    26%  { opacity: .85; transform: translate3d(-250%, -300%, 0) rotate(41deg) scaleX(1); }
    66%  { opacity: .5; transform: translate3d(-56%, -56%, 0) rotate(41deg) scaleX(.6); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(41deg) scaleX(.2); }
}

/* ---------- VeltRush: желейная капля срывается вниз ---------- */
.mi-jelly .mi-core {
    width: 30px;
    height: 34px;
    border-radius: 50% 50% 46% 46%;
    background: radial-gradient(circle at 38% 32%, #FFFFFF 4%,
        color-mix(in srgb, var(--slot-accent, #57E0C8) 88%, transparent) 46%,
        color-mix(in srgb, var(--slot-glow, #FF7FD1) 70%, transparent) 100%);
    animation: miJelly var(--mi-ms, 390ms) cubic-bezier(.3, .9, .3, 1) var(--mi-delay, 0ms) both;
}
@keyframes miJelly {
    0%   { opacity: 0; transform: translate3d(-50%, -280%, 0) scale3d(.7, 1.3, 1); }
    46%  { opacity: 1; transform: translate3d(-50%, -110%, 0) scale3d(.85, 1.2, 1); }
    72%  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale3d(1.35, .58, 1); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale3d(1.6, .3, 1); }
}
.mi-jelly .mi-trail {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px dashed color-mix(in srgb, var(--slot-accent, #57E0C8) 80%, transparent);
    opacity: 0;
    animation: miSplat var(--mi-ms, 390ms) ease-out var(--mi-delay, 0ms) both;
}
@keyframes miSplat {
    0%, 66% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.3) rotate(0deg); }
    80%     { opacity: .8; transform: translate3d(-50%, -50%, 0) scale(1) rotate(22deg); }
    100%    { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.7) rotate(40deg); }
}

/* ---------- VeltFruit и VeltFish: брызги из центра клетки ---------- */
.mi-splash .mi-core {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 10%,
        color-mix(in srgb, var(--slot-accent, #F5C24A) 85%, transparent) 55%, transparent 78%);
    animation: miSplashCore var(--mi-ms, 410ms) cubic-bezier(.25, .9, .3, 1) var(--mi-delay, 0ms) both;
}
@keyframes miSplashCore {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.2); }
    52%  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.2); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.5); }
}
.mi-splash .mi-trail {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--slot-glow, #E8404A) 85%, transparent) 0 12%, transparent 13%),
        radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--slot-glow, #E8404A) 85%, transparent) 0 12%, transparent 13%),
        radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--slot-accent, #F5C24A) 85%, transparent) 0 12%, transparent 13%),
        radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--slot-accent, #F5C24A) 85%, transparent) 0 12%, transparent 13%);
    opacity: 0;
    animation: miSplashDrops var(--mi-ms, 410ms) cubic-bezier(.2, .8, .3, 1) var(--mi-delay, 0ms) both;
}
@keyframes miSplashDrops {
    0%, 40% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.25) rotate(0deg); }
    60%     { opacity: .95; transform: translate3d(-50%, -50%, 0) scale(1) rotate(18deg); }
    100%    { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.8) rotate(38deg); }
}

/* ---------- VeltCandy: сахарная воронка закручивается в точку ---------- */
.mi-swirl .mi-core {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--slot-accent, #FF5FA2);
    border-right-color: var(--slot-glow, #B15CFF);
    animation: miSwirl var(--mi-ms, 420ms) cubic-bezier(.3, .6, .2, 1) var(--mi-delay, 0ms) both;
}
@keyframes miSwirl {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.7) rotate(0deg); }
    40%  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(320deg); }
    72%  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(.35) rotate(560deg); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.2) rotate(640deg); }
}
.mi-swirl .mi-trail {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: color-mix(in srgb, var(--slot-accent, #FF5FA2) 80%, #FFFFFF);
    animation: miSwirlInner var(--mi-ms, 420ms) cubic-bezier(.3, .6, .2, 1) var(--mi-delay, 0ms) both;
}
@keyframes miSwirlInner {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.4) rotate(0deg); }
    46%  { opacity: .9; transform: translate3d(-50%, -50%, 0) scale(.9) rotate(-280deg); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.2) rotate(-520deg); }
}

/* ---------- VeltWest: пыльный хлопок ---------- */
.mi-dust .mi-core {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--slot-accent, #FFB74D) 70%, transparent) 0 40%,
        color-mix(in srgb, var(--slot-glow, #C2703B) 55%, transparent) 62%,
        transparent 78%);
    animation: miDust var(--mi-ms, 390ms) cubic-bezier(.2, .85, .3, 1) var(--mi-delay, 0ms) both;
}
@keyframes miDust {
    0%   { opacity: 0; transform: translate3d(-50%, -30%, 0) scale(.3); }
    48%  { opacity: .95; transform: translate3d(-50%, -50%, 0) scale(1.15); }
    100% { opacity: 0; transform: translate3d(-50%, -68%, 0) scale(1.7); }
}
.mi-dust .mi-trail {
    width: 84px;
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--slot-accent, #FFB74D) 70%, transparent), transparent);
    animation: miDustFloor var(--mi-ms, 390ms) ease-out var(--mi-delay, 0ms) both;
}
@keyframes miDustFloor {
    0%   { opacity: 0; transform: translate3d(-50%, -10%, 0) scaleX(.3); }
    50%  { opacity: .9; transform: translate3d(-50%, -10%, 0) scaleX(1); }
    100% { opacity: 0; transform: translate3d(-50%, -10%, 0) scaleX(1.8); }
}

/* ---------- VeltWild: лунный луч сверху ---------- */
.mi-moon .mi-core {
    width: 54px;
    height: 210px;
    border-radius: 50% 50% 40% 40%;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--slot-accent, #D8A63A) 55%, transparent) 0%,
        color-mix(in srgb, var(--slot-accent, #D8A63A) 22%, transparent) 60%,
        transparent 100%);
    transform-origin: 50% 0%;
    animation: miMoon var(--mi-ms, 450ms) cubic-bezier(.25, .8, .3, 1) var(--mi-delay, 0ms) both;
}
@keyframes miMoon {
    0%   { opacity: 0; transform: translate3d(-50%, -100%, 0) scaleY(.2) scaleX(.6); }
    46%  { opacity: 1; transform: translate3d(-50%, -100%, 0) scaleY(1) scaleX(1); }
    76%  { opacity: .8; transform: translate3d(-50%, -100%, 0) scaleY(1) scaleX(.8); }
    100% { opacity: 0; transform: translate3d(-50%, -100%, 0) scaleY(1) scaleX(.5); }
}
.mi-moon .mi-trail {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF6D0 10%,
        color-mix(in srgb, var(--slot-glow, #3E9568) 60%, transparent) 60%, transparent 76%);
    animation: miMoonPool var(--mi-ms, 450ms) ease-out var(--mi-delay, 0ms) both;
}
@keyframes miMoonPool {
    0%, 40% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.3); }
    70%     { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.1); }
    100%    { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.5); }
}

/* ---------- VeltPaws: отпечаток лапы вдавливается в клетку ---------- */
.mi-paw .mi-core {
    width: 34px;
    height: 30px;
    border-radius: 52% 52% 46% 46%;
    background: color-mix(in srgb, var(--slot-accent, #FFC24B) 85%, transparent);
    box-shadow:
        -15px -14px 0 -6px color-mix(in srgb, var(--slot-accent, #FFC24B) 85%, transparent),
        -5px -21px 0 -7px color-mix(in srgb, var(--slot-accent, #FFC24B) 85%, transparent),
        7px -21px 0 -7px color-mix(in srgb, var(--slot-accent, #FFC24B) 85%, transparent),
        16px -14px 0 -6px color-mix(in srgb, var(--slot-accent, #FFC24B) 85%, transparent);
    animation: miPaw var(--mi-ms, 390ms) cubic-bezier(.24, 1.3, .3, 1) var(--mi-delay, 0ms) both;
}
@keyframes miPaw {
    0%   { opacity: 0; transform: translate3d(-50%, -140%, 0) scale(1.5) rotate(-12deg); }
    54%  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg); }
    78%  { opacity: .85; transform: translate3d(-50%, -50%, 0) scale(.92) rotate(0deg); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.86) rotate(0deg); }
}
.mi-paw .mi-trail {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--slot-glow, #7ACB4F) 70%, transparent);
    opacity: 0;
    animation: miSplat var(--mi-ms, 390ms) ease-out var(--mi-delay, 0ms) both;
}

/* ---------- VeltGems: грани камня вспыхивают по очереди ---------- */
.mi-facet .mi-core {
    width: 64px;
    height: 64px;
    background: conic-gradient(from 0deg,
        color-mix(in srgb, var(--slot-accent, #F0C24A) 85%, transparent) 0 12%,
        transparent 12% 25%,
        color-mix(in srgb, var(--slot-glow, #3FCB63) 85%, transparent) 25% 37%,
        transparent 37% 50%,
        color-mix(in srgb, var(--slot-accent, #F0C24A) 85%, transparent) 50% 62%,
        transparent 62% 75%,
        color-mix(in srgb, var(--slot-glow, #3FCB63) 85%, transparent) 75% 87%,
        transparent 87% 100%);
    clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);
    animation: miFacet var(--mi-ms, 410ms) cubic-bezier(.25, .85, .3, 1) var(--mi-delay, 0ms) both;
}
@keyframes miFacet {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.6) rotate(-24deg); }
    44%  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg); }
    72%  { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(.92) rotate(14deg); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.7) rotate(26deg); }
}
.mi-facet .mi-trail {
    width: 88px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
    opacity: 0;
    animation: miFacetGleam var(--mi-ms, 410ms) ease-out var(--mi-delay, 0ms) both;
}
@keyframes miFacetGleam {
    0%, 50% { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(.2) rotate(28deg); }
    68%     { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(1) rotate(28deg); }
    100%    { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(1.5) rotate(28deg); }
}

/* ---------- Запасной вариант: слот без своего заряда ---------- */
.mi-glow .mi-core {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 6%,
        color-mix(in srgb, var(--slot-accent, #FFD24B) 70%, transparent) 52%, transparent 76%);
    animation: miSplashCore var(--mi-ms, 380ms) cubic-bezier(.25, .9, .3, 1) var(--mi-delay, 0ms) both;
}

@media (prefers-reduced-motion: reduce) {
    .mult-intro { display: none !important; }
}

/* Поле «заряжается» перед иксом: волна свечения по краю игровой зоны в цвете
   пака. Второй слой предвестия — сигнал «сейчас будет множитель» ещё до того,
   как видно, в какую клетку он придёт.

   Отдельный элемент, а не ::after барабана: там уже висит бегущий блик, и на
   слотах с артом оба псевдоэлемента отключены принудительно
   (.slot-machine.has-art::before/::after { display: none !important }) — волна
   просто не показалась бы ровно на тех слотах, где она нужна.
   Анимируется только opacity: слой лежит поверх поля и ничего не двигает. */
.mult-field-charge {
    position: absolute;
    inset: -8px;
    z-index: 6;
    border-radius: 18px;
    pointer-events: none;
    opacity: 0;
    box-shadow:
        inset 0 0 26px color-mix(in srgb, var(--slot-accent, #FFD24B) 55%, transparent),
        inset 0 0 62px color-mix(in srgb, var(--slot-glow, #FF6BD6) 35%, transparent);
    animation: multIncoming var(--mi-ms, 420ms) ease-out both;
}
@keyframes multIncoming {
    0%   { opacity: 0; }
    45%  { opacity: 1; }
    100% { opacity: 0; }
}
/* VeltGods: гроза приходит СВЕРХУ, поэтому у этого пака волна светит из верхней
   кромки поля, а не ровно по всему периметру. Разряд после такого предвестия
   читается как продолжение, а не как отдельная вспышка.
   Только box-shadow и градиент — кадры (multIncoming) общие и не меняются. */
.slot-screen[data-slot="gates-of-olympus"] .mult-field-charge {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--slot-glow, #6C7BFF) 30%, transparent) 0%,
        transparent 34%);
    box-shadow:
        inset 0 16px 30px -8px color-mix(in srgb, var(--slot-glow, #6C7BFF) 70%, transparent),
        inset 0 0 26px color-mix(in srgb, var(--slot-accent, #FFD24B) 42%, transparent),
        inset 0 0 66px color-mix(in srgb, var(--slot-glow, #6C7BFF) 32%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .mult-field-charge { display: none !important; }
}

/* ============================================================
   ВЫБОР ФИЧИ ПРИ ПОКУПКЕ БОНУСА (.vg-modal.buyfeature)

   VeltWild продаёт две фичи по отдельности: фриспины и Money Respin, у каждой
   своя цена. Игрок выбирает карточку. Цвета берём из темы слота (--m-acc /
   --m-glow ставит JS), поэтому окно выглядит частью пака.

   Карточка, на которую не хватает баланса, видна, но выключена: честнее
   показать цену и «не хватает», чем принять тап и отказать после.
   ============================================================ */
.vg-modal.buyfeature .vg-feats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 18px;
}
.vg-modal.buyfeature .vg-feat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    border-radius: 16px;
    border: 1.5px solid color-mix(in srgb, var(--m-acc, #FFD24B) 45%, transparent);
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .28));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
    transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.vg-modal.buyfeature .vg-feat:active {
    transform: scale(.98);
    border-color: var(--m-acc, #FFD24B);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5),
                0 0 22px color-mix(in srgb, var(--m-glow, #FF6BD6) 45%, transparent);
}
.vg-modal.buyfeature .vg-feat-name {
    font-family: var(--m-font, inherit);
    font-size: 16px;
    font-weight: 800;
    color: #FFF6D0;
    letter-spacing: .3px;
}
.vg-modal.buyfeature .vg-feat-desc {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(234, 246, 255, .74);
}
.vg-modal.buyfeature .vg-feat-cost {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 900;
    color: var(--m-acc, #FFD24B);
    text-shadow: 0 2px 5px rgba(0, 0, 0, .65);
}
.vg-modal.buyfeature .vg-feat-cost i {
    font-style: normal;
    font-size: .5em;
    color: #EAF6FF;
    opacity: .8;
}
.vg-modal.buyfeature .vg-feat-mult {
    font-size: 11px;
    color: rgba(234, 246, 255, .55);
    letter-spacing: .4px;
}
.vg-modal.buyfeature .vg-feat.poor {
    opacity: .55;
    cursor: default;
}
.vg-modal.buyfeature .vg-feat-poor {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #FF8A8A;
}
.vg-modal.buyfeature .vg-bb-btns { margin-top: 2px; }
.vg-modal.buyfeature .vg-btn.no { flex: 1; }

@media (max-width: 380px) {
    .vg-modal.buyfeature .vg-feat { padding: 12px 13px; }
    .vg-modal.buyfeature .vg-feat-cost { font-size: 19px; }
}

/* ============================================================
   КОЛЕСО МНОЖИТЕЛЯ (VeltFruit)

   У VeltFruit множитель не привязан ни к символу, ни к клетке — движок просто
   решает, применить его к сыгровке или нет, и икс выглядел как «упал непонятно
   откуда». Теперь перед сыгровкой над барабаном прокручивается лента граней и
   ТОРМОЗИТ на настоящем значении с сервера. На ленте только те множители,
   которые слот реально выдаёт, плюс ×1 — «не повезло».

   Механика посадки: лента едет вверх на --mw-shift шагов по --mw-step каждый,
   поэтому остановка всегда приходится ровно на середину грани. Анимируется
   только transform ленты и opacity самого колеса.
   ============================================================ */
.mult-wheel {
    --mw-step: 46px;
    position: relative;
    z-index: 8;
    width: min(74vw, 260px);
    margin: 0 auto 8px;
    padding: 8px 10px 10px;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(160deg, rgba(12, 12, 18, .92), rgba(30, 30, 40, .92));
    border: 2px solid color-mix(in srgb, var(--slot-accent, #F5C24A) 70%, #FFFFFF);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, .6),
        0 0 24px color-mix(in srgb, var(--slot-glow, #E8404A) 40%, transparent);
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(.92);
    transition: opacity .22s var(--ease), transform .28s cubic-bezier(.2, 1.3, .3, 1);
}
.mult-wheel.show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}
.mult-wheel .mw-label {
    font-family: var(--slot-font, inherit);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 246, 208, .8);
    margin-bottom: 4px;
}
/* Окно на одну грань: остальное скрыто, поэтому лента читается как колесо. */
.mult-wheel .mw-window {
    position: relative;
    height: var(--mw-step);
    overflow: hidden;
    border-radius: 10px;
    background: rgba(0, 0, 0, .35);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .6);
}
/* Полоски-указатели по краям окна: видно, где именно встанет грань. */
.mult-wheel .mw-window::before,
.mult-wheel .mw-window::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 9px;
    height: 2px;
    background: var(--slot-accent, #F5C24A);
    transform: translate3d(0, -50%, 0);
}
.mult-wheel .mw-window::before { left: 4px; }
.mult-wheel .mw-window::after { right: 4px; }

.mult-wheel .mw-strip {
    display: flex;
    flex-direction: column;
    transform: translate3d(0, 0, 0);
}
.mult-wheel .mw-face {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--mw-step);
    flex: 0 0 var(--mw-step);
    font-family: var(--slot-font, inherit);
    font-style: normal;
    font-size: 22px;
    font-weight: 900;
    color: rgba(234, 246, 255, .72);
}
/* Крупные множители заметно ярче: по ленте сразу видно, за чем следить. */
.mult-wheel .mw-face.big {
    color: #FFF6D0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .7),
                 0 0 16px var(--slot-glow, #E8404A);
}

/* Прокрут: лента едет до нужной грани и тормозит. Кадры считает JS через
   --mw-shift, поэтому посадка совпадает с ответом сервера. */
.mult-wheel.spinning .mw-strip {
    animation: mwSpin var(--mw-ms, 1150ms) cubic-bezier(.12, .62, .16, 1) both;
}
@keyframes mwSpin {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, calc(var(--mw-shift, 0) * var(--mw-step) * -1), 0); }
}
/* После остановки лента остаётся на месте: класс spinning снимается, поэтому
   держим тот же сдвиг статикой, иначе грань отпрыгнула бы в начало. */
.mult-wheel.hit .mw-strip,
.mult-wheel.miss .mw-strip {
    transform: translate3d(0, calc(var(--mw-shift, 0) * var(--mw-step) * -1), 0);
}
/* Повезло — колесо вспыхивает акцентом пака; ×1 — тускнеет. */
.mult-wheel.hit {
    border-color: #FFF6D0;
    animation: mwHit .5s cubic-bezier(.2, 1.5, .3, 1) both;
}
@keyframes mwHit {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    45%  { transform: translate3d(0, 0, 0) scale(1.09); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
.mult-wheel.miss { border-color: rgba(255, 255, 255, .18); opacity: .82; }

@media (max-width: 380px) {
    .mult-wheel { --mw-step: 40px; width: min(80vw, 230px); }
    .mult-wheel .mw-face { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .mult-wheel { display: none !important; }
}

/* ============================================================
   ШКАЛА ЗАРЯДА МНОЖИТЕЛЯ (VeltStars)

   На сыгровке над барабаном появляется звёздная шкала, заполняется сегмент за
   сегментом, и когда заполнилась — из неё выходит икс. Так у множителя есть
   понятный источник: раньше он появлялся «из ниоткуда».

   Показывается только когда множитель этой сыгровки реально есть (см.
   playMultGauge), поэтому шкала всегда доходит до конца — пустого заряда
   «может повезёт» тут не бывает.

   Цвета — темы пака (--slot-accent / --slot-glow), шрифт — его же. Анимируются
   только transform и opacity; ширину заливки не анимируем, вместо неё
   зажигаются сегменты — по ним заряд читается пошагово, как счётчик.
   ============================================================ */
.mult-gauge {
    --mg-seg: 6;
    --mg-power: 0;
    position: relative;
    z-index: 8;
    width: min(78vw, 280px);
    margin: 0 auto 8px;
    padding: 8px 12px 9px;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(160deg, rgba(12, 10, 22, .92), rgba(34, 26, 52, .92));
    border: 2px solid color-mix(in srgb, var(--slot-accent, #FF8FD0) 65%, #FFFFFF);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, .6),
        0 0 24px color-mix(in srgb, var(--slot-glow, #8E6BFF) 42%, transparent);
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(.94);
    transition: opacity .22s var(--ease), transform .3s cubic-bezier(.2, 1.3, .3, 1);
}
.mult-gauge.show { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

.mult-gauge .mg-label {
    font-family: var(--slot-font, inherit);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 246, 208, .82);
    margin-bottom: 5px;
}
.mult-gauge .mg-bar {
    position: relative;
    display: flex;
    gap: 4px;
    height: 14px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .42);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, .6);
}
.mult-gauge .mg-seg {
    flex: 1;
    border-radius: 999px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--slot-accent, #FF8FD0) 92%, #FFFFFF),
        var(--slot-glow, #8E6BFF));
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleY(.5);
}
/* Сегменты зажигаются по очереди: задержка каждого — его номер, поделённый на
   общее число, поэтому заряд заканчивается ровно к концу --mg-ms. */
.mult-gauge.charging .mg-seg {
    animation: mgSegOn calc(var(--mg-ms, 980ms) / var(--mg-seg))
               ease-out calc(var(--mg-ms, 980ms) / var(--mg-seg) * var(--mg-i)) both;
}
@keyframes mgSegOn {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scaleY(.5); }
    60%  { opacity: 1; transform: translate3d(0, 0, 0) scaleY(1.15); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scaleY(1); }
}
/* Звёздная искра едет по шкале вместе с зарядом. */
.mult-gauge .mg-spark {
    position: absolute;
    left: 3px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 20%,
        color-mix(in srgb, var(--slot-accent, #FF8FD0) 80%, transparent) 60%, transparent 78%);
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(.6);
}
.mult-gauge.charging .mg-spark {
    animation: mgSpark var(--mg-ms, 980ms) cubic-bezier(.3, .5, .5, 1) both;
}
@keyframes mgSpark {
    0%   { opacity: 0; transform: translate3d(0, -50%, 0) scale(.6); }
    12%  { opacity: 1; transform: translate3d(0, -50%, 0) scale(1); }
    88%  { opacity: 1; transform: translate3d(calc(100% * (var(--mg-seg) - 1) * 1.05), -50%, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(calc(100% * (var(--mg-seg) - 1) * 1.05), -50%, 0) scale(.7); }
}

/* Номинал появляется только когда шкала полна — до этого его не видно. */
.mult-gauge .mg-value {
    margin-top: 6px;
    font-family: var(--slot-font, inherit);
    font-size: 24px;
    font-weight: 900;
    color: #FFF6D0;
    text-shadow: 0 3px 8px rgba(0, 0, 0, .7),
                 0 0 18px var(--slot-glow, #8E6BFF);
    opacity: 0;
    transform: translate3d(0, 4px, 0) scale(.6);
}
/* Полная шкала: сегменты горят, номинал вылетает. Сила вспышки растёт с
   номиналом (--mg-power: 0 у самого мелкого икса, 1 у самого крупного). */
.mult-gauge.full .mg-seg {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleY(1);
}
.mult-gauge.full {
    border-color: #FFF6D0;
    animation: mgFull calc(360ms + 160ms * var(--mg-power)) cubic-bezier(.2, 1.5, .3, 1) both;
}
@keyframes mgFull {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    45%  { transform: translate3d(0, 0, 0) scale(calc(1.05 + .07 * var(--mg-power))); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
.mult-gauge.full .mg-value {
    animation: mgValueIn calc(380ms + 140ms * var(--mg-power))
               cubic-bezier(.16, 1.5, .3, 1) both;
}
@keyframes mgValueIn {
    0%   { opacity: 0; transform: translate3d(0, 4px, 0) scale(.6); }
    60%  { opacity: 1; transform: translate3d(0, 0, 0) scale(calc(1.12 + .1 * var(--mg-power))); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 380px) {
    .mult-gauge { width: min(84vw, 250px); padding: 7px 10px 8px; }
    .mult-gauge .mg-value { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .mult-gauge { display: none !important; }
}

/* ============================================================
   VELTWILD: БАРАБАН КРУПНЕЕ, ТАБЛО ДЖЕКПОТОВ МЕЛЬЧЕ

   Жалоба: «слот очень маленьким кажется, а надписи мажор и тд поменьше».
   Разбор, почему поле казалось мелким:
     1) экран слота имел боковые отступы 12px, а сам барабан был ещё и ограничен
        520px — на телефоне это отнимало у поля 24px ширины;
     2) рамка пака широкая и низкая (4732x3154 = 1.5), поэтому по высоте поле и
        так короткое, а сверху его поджимало табло джекпотов шириной 470px;
     3) символ занимал 91% ячейки, у которой ещё 1.8% паддинга с каждой стороны,
        то есть 0.964 * 0.91 = 87.7% ячейки.

   Что сделано (числа считаны, не подобраны):
     - боковые отступы экрана 12px -> 6px: на экране 390px поле получает 378px
       вместо 366px, это +3.3% ширины;
     - предельная ширина барабана 500px -> 580px, как у VeltPaws и VeltWest,
       чтобы на широком экране поле не упиралось в старый предел;
     - символ: паддинг ячейки 1.8% -> 1.0%, размер 91% -> 97%, итого
       0.98 * 0.97 = 95.1% ячейки против 87.7% — плюс 8.4% по стороне и +17.5%
       по площади. Геометрию рамки (инсеты сетки) НЕ трогаю: она замерена по
       арту, и от неё зависит, что символы стоят в своих окнах;
     - табло джекпотов: ширина 470px -> 348px (74% от прежней), сумма внутри
       плашки мельче на тот же коэффициент. Освободившаяся высота уходит полю.
   ============================================================ */
.slot-screen[data-slot="wolf-gold"] {
    padding-inline: 6px;
}
.slot-screen[data-slot="wolf-gold"] .slot-machine.has-art {
    max-width: min(100%, 580px);
    width: 100%;
}
/* Символы плотнее в ячейке, но с зазором — чтобы не слипались краями. */
.slot-screen[data-slot="wolf-gold"] .slot-cell { padding: 1.0%; }
.slot-screen[data-slot="wolf-gold"] .slot-symbol { width: 97%; height: 97%; }
/* Скаттер и вайлд были чуть крупнее остальных — сохраняем эту разницу. */
.slot-screen[data-slot="wolf-gold"] .sym-scatter,
.slot-screen[data-slot="wolf-gold"] .sym-wild { transform: scale(1.05); }
/* Вывеска подтягивается под увеличенное поле, чтобы пропорции не поехали. */
.slot-screen[data-slot="wolf-gold"] .slot-signboard { width: min(60%, 340px); }

/* Табло джекпотов: мельче и компактнее. Плашки остаются читаемыми, но больше
   не спорят с барабаном за место и внимание. */
.slot-screen[data-slot="wolf-gold"] .slot-jackpot-bar {
    width: min(74%, 348px);
    gap: clamp(3px, 1.1vw, 7px);
    margin-bottom: 4px;
}
.slot-screen[data-slot="wolf-gold"] .slot-jackpot-bar .sjp-val {
    font-size: clamp(7px, 2.1vw, 10px);
    letter-spacing: 0;
}
/* Тень плашек тоже уменьшаем: у мелкого элемента крупная тень выглядит грязью. */
.slot-screen[data-slot="wolf-gold"] .slot-jackpot-bar .sjp img {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
}

@media (max-width: 360px) {
    /* На узком экране табло ещё компактнее: поле важнее плашек. */
    .slot-screen[data-slot="wolf-gold"] .slot-jackpot-bar { width: min(82%, 300px); }
    .slot-screen[data-slot="wolf-gold"] .slot-jackpot-bar .sjp-val { font-size: 7px; }
}

/* ============================================================
   АКТИВНЫЕ TURBO / AUTO — подсветка вместо зелёной рамки
   Раньше активная кнопка обводилась жёсткой зелёной линией (#8dff9a): цвет не
   имел отношения к палитре слота и читался как ошибка вёрстки. Теперь кнопка
   светится акцентом своего слота — рамки нет, есть мягкий ореол.
   !important обязателен: выше в файле общий слой «чистых PNG-контролов»
   гасит filter и box-shadow у этих же кнопок.
   ============================================================ */
.slot-screen .slot-action-art.active > img {
    filter: brightness(1.14) saturate(1.06) drop-shadow(0 0 9px var(--slot-glow)) !important;
}
.slot-screen .slot-action-art.active::after {
    inset: 4% 2% !important;
    border: 0 !important;
    border-radius: clamp(11px, 3.2vw, 17px) !important;
    background: radial-gradient(66% 130% at 50% 50%, rgba(255,255,255,.13), transparent 72%) !important;
    box-shadow: 0 0 14px var(--slot-glow), 0 0 30px var(--slot-glow) !important;
    animation: slotActionGlow 1.9s ease-in-out infinite;
}
@keyframes slotActionGlow {
    0%, 100% { opacity: .72; }
    50%      { opacity: 1; }
}
/* Счётчик автоспинов был таким же кислотно-зелёным — переводим в акцент слота. */
.slot-screen .auto-count {
    background: rgba(16, 16, 21, .92);
    color: #fff;
    border: 1px solid var(--slot-accent);
    box-shadow: 0 0 10px var(--slot-glow);
}
@media (prefers-reduced-motion: reduce) {
    .slot-screen .slot-action-art.active::after { animation: none; opacity: .9; }
}

/* Кнопки ± по бокам спина: их PNG всего 63×38, а колонка тянула картинку до
   86px. Уменьшаем до 68px — рядом с круглой кнопкой спина они больше не
   выглядят крупнее неё, а края остаются резкими. */
.slot-primary-controls {
    grid-template-columns: clamp(50px, 14vw, 68px) clamp(124px, 35vw, 154px) clamp(50px, 14vw, 68px);
}

/* ============================================================
   НЕОПЛАЧЕННЫЕ СЧЁТА НА ВКЛАДКЕ ПОПОЛНЕНИЯ
   Оплата уводит игрока в кошелёк платёжки, мини-апп при этом закрывается.
   Вернувшись, он должен найти свой счёт здесь: сумма, способ, когда создан,
   и рядом обе кнопки — дойти до оплаты и проверить её.
   ============================================================ */
.invoices {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(230,237,255,.10);
    border-radius: var(--radius);
    background: #111111;
    box-shadow: var(--glow);
}
.invoices-head {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}
.invoices-list { display: flex; flex-direction: column; gap: 10px; }
.inv-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(230,237,255,.04);
    border: 1px solid rgba(230,237,255,.10);
}
.inv-sum { font-size: 20px; font-weight: 600; color: var(--white); line-height: 1.1; letter-spacing: -0.03em; }
.inv-sum .inv-cur { font-size: 12px; font-weight: 500; color: var(--muted); }
.inv-meta { margin-top: 4px; font-size: 12px; color: var(--muted2); letter-spacing: -0.02em; }
.inv-actions { display: flex; gap: 8px; }
.inv-btn {
    flex: 1;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(230,237,255,.12);
    background: rgba(230,237,255,.05);
    color: var(--white);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.03em;
    cursor: pointer;
    transition: transform .15s var(--ease), filter .2s var(--ease), background .2s var(--ease);
}
.inv-btn:active { transform: scale(.97); background: rgba(60,144,255,.14); }
.inv-btn:disabled { opacity: .6; cursor: default; }
/* Оплатить — главное действие, поэтому акцентный градиент, как у остальных
   первичных кнопок в новом оформлении. */
.inv-btn.pay {
    border: 1px solid rgba(230,237,255,.20);
    background: var(--brand-grad);
    color: var(--white);
    box-shadow: 0 0 18px rgba(1,82,255,.26);
}
.inv-btn.pay:active { filter: brightness(.96); }

/* ============================================================
   ОКНО-УВЕДОМЛЕНИЕ (showNoticeModal)
   Для случаев «нужно объяснить, а не поздравить»: остаток вагера, счёт уже
   зачислен. Опирается на общие стили .velt-modal, поэтому здесь только то,
   чем уведомление отличается от окна награды: сумма спокойнее, текст читается
   абзацем, иконка приглушена.
   ============================================================ */
.notice-modal .vm-icon {
    width: 60px; height: 60px; margin-bottom: 16px;
    background: rgba(230,237,255,.05);
    border-color: rgba(60,144,255,.34);
    box-shadow: none;
}
.notice-modal .vm-icon .uic { width: 28px; height: 28px; color: var(--brand-2); }
.notice-modal h2 { font-size: 20px; margin-bottom: 12px; }
/* Сумма здесь — справочная величина, а не выигрыш: мельче, чем в окне награды,
   и без праздничного акцента. */
.notice-modal .notice-amount {
    font-size: 30px;
    margin-bottom: 10px;
    color: var(--white);
}
.notice-modal .notice-text {
    margin-bottom: 22px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(230,237,255,.04);
    border: 1px solid rgba(230,237,255,.10);
}


/* ===== Модалка ошибки (недостаточно средств и т.п.) ===== */
.vg-modal.error-modal .vg-modal-card.error-modal-card {
    max-width: 340px;
    padding: 28px 24px 24px;
    font-family: var(--font); letter-spacing: -0.03em;
    background: var(--card);
    border: 1px solid rgba(230,237,255,.12);
    box-shadow: 0 22px 60px rgba(0,0,0,.65);
}
.vg-modal.error-modal .vg-modal-deco,
.vg-modal.success-modal .vg-modal-deco { display: none; }

.error-modal-text {
    font-size: 17px;
    line-height: 1.45;
    color: var(--white);
    margin-bottom: 22px;
    font-weight: 500;
}

.error-modal-btn {
    width: 100%;
    padding: 14px 20px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.03em;
}

/* ===== Модалка успеха (перевод отправлен, чек удалён и т.п.) ===== */
/* Успех отмечаем акцентом бренда, а не зелёным: зелёного в палитре нет. */
.vg-modal.success-modal .vg-modal-card.success-modal-card {
    max-width: 340px;
    padding: 28px 24px 24px;
    font-family: var(--font); letter-spacing: -0.03em;
    background: var(--card);
    border: 1px solid rgba(60,144,255,.32);
    box-shadow: 0 22px 60px rgba(0,0,0,.65), 0 0 34px rgba(1,82,255,.16);
}

.success-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(60,144,255,.14);
    border: 1px solid rgba(60,144,255,.42);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--brand-2);
    font-weight: 600;
}

.success-modal-text {
    font-size: 17px;
    line-height: 1.45;
    color: var(--white);
    margin-bottom: 22px;
    font-weight: 500;
    text-align: center;
}

.success-modal-btn {
    width: 100%;
    padding: 14px 20px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.03em;
}

/* ===== Слоты внешнего провайдера (Pragmatic Play через Gamble Hub) ===== */
/* Обложки провайдера приходят готовыми картинками 288x210, поэтому карточка
   повторяет геометрию наших cover-card, но с подписью: имён у провайдера
   больше сотни, и без названия игру в сетке не найти. */
.pp-card { position: relative; }
/* Название под обложкой: у провайдера сотни игр с непохожими картинками, без
   подписи нужную не найти. Бейдж провайдера убран — он теперь в заголовке
   секции, и на каждой карточке дублировался бы. */
.pp-card .pp-title {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 16px 8px 8px; font-size: 12.5px; font-weight: 600; line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--white); text-align: center;
    background: linear-gradient(to top, rgba(1,4,13,.92) 0%, rgba(1,4,13,.55) 55%, transparent 100%);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* В ряду карточка втрое меньше — длинные имена там не читаются, поэтому
   подпись компактнее. В окне «Все» размер остаётся прежним. */
.games-rail .pp-card .pp-title { padding: 14px 5px 6px; font-size: 10.5px; }

/* ===== Секция каталога (свои разделы и разделы провайдеров) ===== */
.cat-section { margin-top: 34px; }
.cat-head { display: flex; align-items: center; gap: 10px; }
.cat-head-name { flex: 0 0 auto; }
/* Логотип провайдера вместо названия. Высоту задаём фиксированно, ширина
   считается сама — логотипы разной пропорции (EGT почти квадратный,
   Play'n GO широкий), и растягивать их нельзя. */
/* Логотипы провайдеров нельзя выравнивать одной высотой: пропорции у них
   расходятся от 0,99:1 (EGT, круглая марка) до 8,28:1 (Live, длинная надпись).
   При общей высоте 30px Amusnet выходил 185px шириной, а Pragmatic — 68px,
   почти втрое мельче. Плюс у Pragmatic треть высоты занимает корона над
   надписью, поэтому буквы были ещё меньше.

   Поэтому: высота задаётся каждому своя (чтобы буквы читались одинаково),
   а общий max-width не даёт самым широким подавить остальные. height и width
   держим auto — тогда при срабатывании ограничения пропорция сохраняется. */
.cat-head-logo {
    flex: 0 0 auto; display: block;
    height: auto; width: auto;
    max-height: 32px; max-width: min(170px, 58vw);
    object-fit: contain;
}
/* Pragmatic 2,26:1 и треть высоты уходит на корону — поднимаем высоту, иначе
   надпись выглядит мельче всех. 46px даёт ширину ~104px и буквы ~30px. */
.cat-section[data-provider="Pragmatic Play"] .cat-head-logo { max-height: 46px; }
/* EGT — круглая марка, у неё ширина равна высоте, поэтому высота больше. */
.cat-section[data-provider="EGT"] .cat-head-logo { max-height: 46px; }
/* Amusnet и Live — самые широкие, их придерживает max-width, высоту не
   поднимаем, иначе они упрутся в ограничение и потеряют в буквах. */
.cat-section[data-provider="Amusnet"] .cat-head-logo { max-height: 30px; }
.cat-section[data-provider="Live"] .cat-head-logo { max-height: 24px; }
/* Счётчик игр: сразу видно объём раздела, не пролистывая его целиком. */
.cat-head-count {
    flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--muted);
    background: rgba(230,237,255,.06); border: 1px solid rgba(230,237,255,.12);
    padding: 3px 9px; border-radius: 999px; letter-spacing: -0.01em;
}
/* Тонкая линия до конца строки — тот же приём, что у остальных заголовков. */
.cat-head::after {
    content: ""; flex: 1 1 auto; height: 1px; margin-left: 2px;
    background: linear-gradient(90deg, rgba(230,237,255,.12), rgba(230,237,255,0));
}

.cat-more {
    display: block; width: 100%; margin: 16px 0 0;
    background: #111111;
    border: 1px solid rgba(230,237,255,.12);
    color: var(--text); font-family: var(--font); font-size: 13.5px; font-weight: 600;
    letter-spacing: -0.03em;
    padding: 15px; border-radius: 15px; cursor: pointer;
    transition: background .2s var(--ease), transform .12s var(--ease), border-color .2s var(--ease);
}
.cat-more:hover { border-color: rgba(60,144,255,.38); }
.cat-more:active { background: var(--btn-hover); transform: scale(.99); }
.cat-more.hidden { display: none; }

/* Плеер провайдера: игра живёт в iframe на его домене, поэтому показываем её
   поверх мини-аппа со своей полосой управления. */
.pp-player {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    background: #000;
}
.pp-player.hidden { display: none; }
.pp-player-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: rgba(13,13,15,.96);
    border-bottom: 1px solid rgba(255,255,255,.07); flex: 0 0 auto;
}
.pp-player-close {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
    background: var(--card2); border: 1px solid rgba(255,255,255,.1);
    color: var(--white); font-size: 15px; cursor: pointer; font-family: inherit;
}
.pp-player-title {
    flex: 1 1 auto; font-size: 14px; font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-player-mode {
    flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; color: var(--muted2);
}
.pp-player-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; }

/* ===== Модалка подтверждения (перевод реф. баланса и подобное) ===== */
.confirm-modal-card { text-align: center; }
.confirm-modal-title {
    font-size: 17px; font-weight: 600; color: var(--white);
    margin-bottom: 10px; letter-spacing: -0.03em;
}
.confirm-modal-text {
    font-size: 13.5px; line-height: 1.5; color: var(--muted);
    margin-bottom: 20px;
}
.confirm-modal-actions { display: flex; gap: 10px; }
.confirm-modal-actions button {
    flex: 1 1 0; margin: 0; padding: 14px 12px; border-radius: 13px;
    font-family: var(--font); font-size: 13.5px; font-weight: 600;
    letter-spacing: -0.03em; cursor: pointer;
}

/* Кнопка перевода реферального баланса. Действие необратимое — на сумму
   накладывается вагер, поэтому она остаётся самой заметной в профиле: акцентный
   градиент с усиленным свечением против тёмных «Поделиться» и «Копировать». */
.btn-purple {
    background: var(--brand-grad);
    border: 2px solid rgba(230,237,255,.22);
    color: var(--white);
    box-shadow: 0 0 34px rgba(1,82,255,.42);
}
.btn-purple:active { transform: scale(.99); filter: brightness(1.06); }

/* Кнопка «в избранное» в хабе игры должна лежать поверх названия: у игр
   провайдера имена длинные и заезжали под неё. */
.hub-fav { z-index: 5; }
/* Освобождаем под неё место, чтобы длинное имя переносилось, а не подлезало. */
.hub-name { padding-right: 46px; }

/* Обложка в результатах поиска: у части игр провайдера картинки нет, и вместо
   неё показывался значок «битое изображение». Прячем сломанные картинки. */
.search-result img { background: var(--card2); object-fit: cover; }
.search-result img.is-broken { visibility: hidden; }

/* ===== Пополнение картой / СБП =====
   ВАЖНО: базовый .vg-modal-card — это тема СЛОТОВ (фиолетовая рамка, свечение,
   шрифт пака). Кошелёк к слотам не относится, поэтому здесь всё перекрывается
   на обычную палитру приложения: карточка #111111, акцентный градиент на
   главной кнопке, E6EDFF и muted для подписей.

   Окно не закрывается тапом в фон: заявка создана и админ ждёт оплату,
   потерять её случайным касанием нельзя. */
.vg-modal.card-dep-modal .vg-modal-card,
.card-dep-card {
    width: 100%; max-width: 360px; padding: 22px 20px 20px;
    text-align: center; position: relative;
    /* Та же заливка и рамка, что у .bonus-card и .promo-card */
    background: var(--card);
    border: 1px solid rgba(230,237,255,.12);
    border-radius: 20px;
    box-shadow: 0 22px 56px rgba(0,0,0,.62);
    /* сбрасываем шрифт слота */
    font-family: var(--font); letter-spacing: -0.03em; color: var(--white);
}
/* Верхний блик из темы слота здесь не нужен: он и давал сиреневый налёт. */
.vg-modal.card-dep-modal .vg-modal-deco { display: none; }

.card-dep-body { display: flex; flex-direction: column; gap: 12px; }

.card-dep-title {
    font-size: 17px; font-weight: 600; color: var(--white); letter-spacing: -0.03em;
}
.card-dep-note { font-size: 12.5px; line-height: 1.5; color: var(--muted2); }

/* Три точки вместо крутящегося кольца: спокойнее и не намекает на прогресс,
   которого мы не знаем — ответ зависит от живого администратора. */
.card-dep-spinner { display: flex; gap: 7px; justify-content: center; padding: 6px 0 2px; }
.card-dep-spinner span {
    width: 9px; height: 9px; border-radius: 50%; background: var(--brand-2);
    animation: cardDepDot 1.25s infinite ease-in-out;
}
.card-dep-spinner span:nth-child(2) { animation-delay: .16s; }
.card-dep-spinner span:nth-child(3) { animation-delay: .32s; }
@keyframes cardDepDot {
    0%, 80%, 100% { opacity: .25; transform: scale(.85); }
    40% { opacity: 1; transform: scale(1); }
}

.card-dep-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: var(--muted2);
}
.card-dep-meta b { color: var(--text); font-weight: 600; }

.card-dep-sum {
    display: flex; justify-content: space-between; align-items: baseline;
    background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.10);
    border-radius: 13px; padding: 12px 14px; font-size: 12.5px; color: var(--muted2);
}
.card-dep-sum b { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--white); }

/* Реквизиты: тёмное поле как .promo-input, моноширинный шрифт, чтобы цифры не
   путались, и перенос по словам на случай длинного текста. Тап копирует. */
.card-dep-req {
    background: #01040D;
    border: 1px solid rgba(230,237,255,.12);
    border-radius: 13px; padding: 15px 14px; cursor: pointer;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--white);
    letter-spacing: .4px;
    word-break: break-word; white-space: pre-wrap;
    transition: transform .12s var(--ease), border-color .2s var(--ease),
                box-shadow .2s var(--ease);
}
.card-dep-req:active {
    transform: scale(.99);
    border-color: rgba(60,144,255,.55);
    box-shadow: 0 0 0 3px rgba(1,82,255,.16);
}
/* Подсказка, что реквизиты копируются тапом. */
.card-dep-copy {
    font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted2); margin-top: -6px;
}

.card-dep-steps {
    margin: 0; padding-left: 20px; text-align: left;
    font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.card-dep-steps li { margin-bottom: 6px; }
.card-dep-steps li:last-child { margin-bottom: 0; }
.card-dep-steps b { color: var(--text); }

/* Кнопки: слева тёмная второстепенная, справа светлая серебряная главная —
   ровно как «Ок» у промокода и «Забрать» в бонусах. */
.card-dep-actions { display: flex; gap: 10px; margin-top: 4px; }
.card-dep-actions button {
    flex: 1 1 0; margin: 0; padding: 14px 12px; border-radius: 13px;
    font-family: var(--font); font-size: 13.5px; font-weight: 600;
    letter-spacing: -0.03em; cursor: pointer;
    transition: transform .15s var(--ease), filter .2s var(--ease),
                background .2s var(--ease);
}
.card-dep-secondary {
    background: var(--btn); color: var(--white);
    border: 1px solid rgba(230,237,255,.10);
}
.card-dep-secondary:active { background: var(--btn-hover); transform: scale(.97); }
.card-dep-primary {
    background: var(--brand-grad);
    color: var(--white); border: 2px solid rgba(230,237,255,.20);
    box-shadow: var(--brand-glow);
}
.card-dep-primary:active { transform: scale(.97); filter: brightness(.96); }

/* Итог: плашка в палитре приложения. Успех — акцент бренда, отказ — красный:
   единственный случай, где цвет вне палитры оправдан, это отрицательный итог. */
.card-dep-icon {
    width: 52px; height: 52px; margin: 2px auto 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 25px; font-weight: 600;
}
.card-dep-icon.ok {
    background: rgba(60,144,255,.14); color: var(--brand-2);
    border: 1px solid rgba(60,144,255,.42);
}
.card-dep-icon.bad {
    background: rgba(224,85,59,.14); color: #F0785F;
    border: 1px solid rgba(224,85,59,.45);
}
.card-dep-big {
    font-size: 28px; font-weight: 600; color: var(--white); letter-spacing: -0.03em;
}

/* Подсказка поверх окна: «скопировано», «подождите администратора».
   Вынесена под карточку, а не поверх кнопок: на скриншоте она накрывала их и
   игрок не понимал, куда нажимать дальше. */
.card-dep-flash {
    position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    background: var(--card); border: 1px solid rgba(230,237,255,.12);
    border-radius: 14px; padding: 13px 14px;
    font-size: 12.5px; line-height: 1.45; color: var(--white); text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .24s var(--ease), transform .24s var(--ease);
    pointer-events: none;
}
.card-dep-flash.show { opacity: 1; transform: translateY(0); }

/* ===== Окно «Все игры раздела» (по кнопке «Показать ещё») ===== */
/* Лист поверх витрины, а не новая страница: игрок закрывает его и остаётся там
   же, где был, не теряя прокрутку каталога. */
.cat-all {
    position: fixed; inset: 0; z-index: 3200;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(1,4,13,.78);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .26s var(--ease);
}
.cat-all.show { opacity: 1; }
.cat-all.hidden { display: none; }

.cat-all-sheet {
    width: 100%; max-width: 520px; max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
    background: #01040D;
    border: 1px solid rgba(230,237,255,.12);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px rgba(0,0,0,.7);
    transform: translateY(22px);
    transition: transform .3s var(--ease);
}
.cat-all.show .cat-all-sheet { transform: translateY(0); }

/* Шапка закреплена: при сотнях плиток без неё непонятно, какой это раздел. */
.cat-all-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 16px 16px 13px;
    border-bottom: 1px solid rgba(230,237,255,.10);
    background: #111111;
}
.cat-all-title {
    flex: 1 1 auto; font-size: 17px; font-weight: 600; color: var(--white);
    letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Логотип провайдера в шапке окна — тот же ассет, что и в заголовке секции. */
/* max-height вместо height по той же причине, что и в заголовке секции:
   иначе при срабатывании max-width логотип сплющивается. */
.cat-all-logo { flex: 0 0 auto; display: block; height: auto; width: auto; max-height: 26px; max-width: 55vw; object-fit: contain; }
.cat-all-count {
    flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--muted);
    background: rgba(230,237,255,.06); border: 1px solid rgba(230,237,255,.12);
    padding: 4px 10px; border-radius: 999px;
}
.cat-all-close {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
    background: rgba(230,237,255,.06); border: 1px solid rgba(230,237,255,.14);
    color: var(--white); font-size: 14px; cursor: pointer; font-family: var(--font);
    transition: background .2s var(--ease), transform .12s var(--ease), border-color .2s var(--ease);
}
.cat-all-close:active { background: rgba(60,144,255,.16); border-color: rgba(60,144,255,.45); transform: scale(.94); }

.cat-all-scroll {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 14px 22px;
}
/* Подпись под сеткой: сколько осталось или что список закончился. */
.cat-all-end {
    margin-top: 16px; text-align: center;
    font-size: 12px; font-weight: 500; color: var(--muted2); letter-spacing: -0.02em;
}


/* ==================== МОДАЛЬНОЕ ОКНО БАНА ==================== */
.ban-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 4, 13, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.ban-overlay.show {
    opacity: 1;
}

.ban-modal {
    background: var(--card);
    border: 1px solid rgba(230,237,255,.12);
    border-radius: var(--radius);
    padding: 32px 24px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,.7);
    text-align: center;
    font-family: var(--font); letter-spacing: -0.03em; color: var(--white);
    transform: scale(0.95);
    transition: transform 0.3s var(--ease);
}

.ban-overlay.show .ban-modal {
    transform: scale(1);
}

/* Красный здесь оставляем: блокировка — единственный экран, где цвет должен
   спорить с палитрой, иначе игрок не поймёт серьёзность. */
.ban-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background: rgba(224,85,59,.16);
    border: 1px solid rgba(224,85,59,.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.ban-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
    color: var(--white);
}

.ban-reason {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 24px;
}

.ban-support-btn {
    background: var(--brand-grad);
    color: var(--white);
    border: 2px solid rgba(230,237,255,.20);
    border-radius: 12px;
    padding: 16px 32px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.03em;
    cursor: pointer;
    width: 100%;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    box-shadow: var(--brand-glow);
}

.ban-support-btn:active {
    transform: scale(0.98);
    box-shadow: 0 0 18px rgba(1, 82, 255, 0.4);
}

/* ============================================================
   КОЛЕСО ФОРТУНЫ
   ============================================================ */

/* ===== Плавающая кнопка в правом нижнем углу ===== */
.wheel-fab {
    position: fixed; right: 14px; bottom: calc(104px + env(safe-area-inset-bottom));
    z-index: 46; display: none;
}
.wheel-fab.show { display: block; }
.wheel-fab-btn {
    position: relative; display: grid; place-items: center;
    width: 68px; height: 68px; padding: 8px; cursor: pointer;
    border-radius: 20px; border: 1px solid rgba(230,237,255,.14);
    /* Синяя подложка под цветным барабаном: на чистом фоне он выглядел
       вырезанным, а градиент связывает его с остальным оформлением. */
    background: linear-gradient(160deg, rgba(60,144,255,.30), rgba(1,4,13,.92));
    box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 22px rgba(1,82,255,.30);
    animation: wheelFabFloat 3.4s ease-in-out infinite;
}
.wheel-fab-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wheel-fab-btn:active { transform: scale(.94); }
@keyframes wheelFabFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
/* Значок доступного прокрута */
.wheel-fab-badge {
    position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px;
    display: grid; place-items: center; padding: 0 5px;
    border-radius: 999px; border: 2px solid #01040D;
    background: var(--brand-grad); color: var(--white);
    font-size: 11px; font-weight: 700; letter-spacing: -0.02em;
    box-shadow: 0 0 14px rgba(1,82,255,.7);
}
.wheel-fab-badge.hidden { display: none; }
.wheel-fab-close {
    position: absolute; top: -8px; left: -8px;
    width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center;
    background: rgba(17,17,17,.95); border: 1px solid rgba(230,237,255,.20);
    color: rgba(230,237,255,.75); font-size: 11px; font-family: var(--font);
}
.wheel-fab-close:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .wheel-fab-btn { animation: none; } }

/* ===== Экран колеса =====
   Занимает весь мини-апп, а не выезжает листом снизу: барабан — главный объект
   на экране, и в невысоком листе он упирался в края, а под ним ещё оставалась
   видна витрина, из-за чего экран читался как всплывающее окно, а не как
   отдельный режим. */
.wheel-screen {
    position: fixed; inset: 0; z-index: 3300;
    display: flex; align-items: stretch; justify-content: center;
    background: #01040D;
    opacity: 0; transition: opacity .26s var(--ease);
}
.wheel-screen.show { opacity: 1; }
.wheel-screen.hidden { display: none; }
.wheel-sheet {
    position: relative;
    width: 100%; max-width: 560px; height: 100%; overflow-y: auto;
    display: flex; flex-direction: column;
    /* Поля по бокам 12px, а не 16: четыре пикселя с каждой стороны уходят
       барабану, он тут главный объект. */
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
    background: transparent;
    border: none; border-radius: 0; box-shadow: none;
    transform: none;
}
/* Мягкое синее свечение за барабаном — оно и даёт «дороже, чем плоский фон». */
.wheel-sheet::before {
    content: ""; position: absolute; left: 50%; top: 44%;
    width: min(150vw, 760px); aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(60,144,255,.20) 0%, rgba(8,81,177,.10) 38%, transparent 68%);
    pointer-events: none; z-index: 0;
}
/* Тонкая сетка карточной текстуры поверх фона — как на остальных экранах. */
.wheel-sheet > * { position: relative; z-index: 1; }

.wheel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex: 0 0 auto; }
.wheel-title {
    flex: 1 1 auto; font-size: 22px; font-weight: 600;
    letter-spacing: -0.03em; color: var(--white);
}
.wheel-close {
    flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    background: rgba(230,237,255,.06); border: 1px solid rgba(230,237,255,.14);
    color: var(--white); font-size: 14px; font-family: var(--font);
    transition: background .18s var(--ease), transform .14s var(--ease);
}
.wheel-close:active { background: rgba(60,144,255,.16); transform: scale(.94); }

/* Шкала слева, барабан справа. flex: 1 — блок забирает всю свободную высоту,
   поэтому барабан встаёт по центру экрана, а не липнет к заголовку. */
.wheel-body { display: flex; align-items: stretch; gap: 16px; flex: 1 1 auto; min-height: 0; }

/* ===== Шкала накопления ===== */
/* 28px вместо 34px: шесть пикселей ширины отдаём барабану, он тут главный. */
.wheel-meter {
    flex: 0 0 auto; width: 28px; position: relative;
    display: flex; flex-direction: column; align-items: center;
}
.wm-track {
    flex: 1 1 auto; width: 14px; margin: 18px 0;
    border-radius: 999px; overflow: hidden;
    background: rgba(230,237,255,.07);
    border: 1px solid rgba(230,237,255,.12);
    /* Заполнение идёт снизу вверх, поэтому содержимое прижато к низу. */
    display: flex; align-items: flex-end;
}
.wm-fill {
    width: 100%; height: 0%;
    border-radius: 999px;
    background: linear-gradient(0deg, #0851B1 0%, #3C90FF 100%);
    box-shadow: 0 0 14px rgba(60,144,255,.65);
    transition: height .7s var(--ease);
}
/* Полная шкала пульсирует — сигнал, что прокрут открыт. */
.wheel-meter.is-full .wm-fill { animation: wmPulse 1.6s ease-in-out infinite; }
@keyframes wmPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(60,144,255,.65); }
    50%      { box-shadow: 0 0 26px rgba(60,144,255,1); }
}
.wm-cap, .wm-now {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 9.5px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--muted2); white-space: nowrap;
}
.wm-cap { top: 0; }
.wm-now { bottom: 0; color: var(--brand-2); }

/* ===== Барабан ===== */
.wheel-stage { flex: 1 1 auto; min-width: 0; display: grid; place-items: center; }
/* Размер барабана считаем от РЕАЛЬНО свободного места, а не от доли высоты.
   Раньше стояло min(86vw, 46vh, 420px), и связывающим оказывался «46vh»:
   барабан выходил маленьким, хотя сверху и снизу оставалась пустота.

   Теперь вычитаем из высоты экрана то, что занято остальным: заголовок,
   подпись, кнопка «Крутить» и отступы — около 190px. По ширине вычитаем шкалу
   слева (28px), её отступ и поля экрана.

   max(...) снизу — предохранитель: на совсем низких экранах барабан не
   схлопнется в точку, а лист прокрутится (у .wheel-sheet есть overflow-y).
   Сторона задана одним числом, поэтому квадрат получается и там, где нет
   поддержки aspect-ratio. */
.wheel-drum-wrap {
    position: relative;
    width: max(190px, min(calc(100vw - 68px), calc(100vh - 190px), 460px));
    height: max(190px, min(calc(100vw - 68px), calc(100vh - 190px), 460px));
}
.wheel-drum {
    width: 100%; height: 100%; display: block; object-fit: contain;
    /* Вращение задаётся из JS через transform: rotate(). Плавность и остановку
       описывает transition, поэтому здесь только его параметры. */
    transform: rotate(0deg);
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.6));
}
.wheel-drum.is-spinning {
    /* Долгий разгон и мягкое торможение к нужному сектору. */
    transition: transform 5.2s cubic-bezier(.16,.84,.20,1);
}
/* Стрелка стоит сверху и не крутится: она указывает на выпавший сектор. */
.wheel-pointer {
    position: absolute; top: -6%; left: 50%; transform: translateX(-50%);
    width: 22%; pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.7));
}

.wheel-info {
    margin: 14px 0 0; text-align: center; flex: 0 0 auto;
    color: var(--muted); font-size: 13px; font-weight: 400;
    line-height: 1.5; letter-spacing: -0.02em;
}
/* Плашка с висящим процентом к депозиту */
.wheel-pending {
    margin-top: 12px; padding: 12px 14px; border-radius: 14px;
    background: rgba(60,144,255,.10); border: 1px solid rgba(60,144,255,.38);
    color: var(--white); font-size: 12.5px; font-weight: 500;
    letter-spacing: -0.02em; text-align: center; line-height: 1.5;
}
.wheel-pending.hidden { display: none; }
.wheel-pending b { font-weight: 600; }
.wheel-pending { flex: 0 0 auto; }

.wheel-spin-btn {
    width: 100%; min-height: 58px; margin-top: 14px; flex: 0 0 auto;
    border-radius: 16px; cursor: pointer;
    background: var(--brand-grad); border: 2px solid rgba(230,237,255,.20);
    color: var(--white); font-family: var(--font);
    font-size: 16px; font-weight: 600; letter-spacing: -0.03em;
    box-shadow: var(--brand-glow);
    transition: filter .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.wheel-spin-btn:not(:disabled):active { transform: scale(.98); filter: brightness(.96); }
/* Недоступный прокрут: без градиента и свечения, иначе кнопка зовёт нажать зря. */
.wheel-spin-btn:disabled {
    background: rgba(230,237,255,.04); border-color: rgba(230,237,255,.10);
    color: var(--muted2); box-shadow: none; cursor: default;
}

/* ===== Окно приза ===== */
.wheel-prize-modal { text-align: center; }
.wheel-prize-ic {
    display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 14px;
    border-radius: 50%; background: var(--brand-grad); color: var(--white);
    box-shadow: var(--brand-glow); font-size: 34px;
}
.wheel-prize-value {
    margin: 6px 0 4px; font-size: 34px; font-weight: 600;
    letter-spacing: -0.03em; color: var(--white);
}
.wheel-prize-note {
    margin-top: 12px; padding: 12px 14px; border-radius: 12px;
    background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.08);
    color: var(--muted); font-size: 12px; font-weight: 400;
    line-height: 1.55; letter-spacing: -0.02em;
}
.wheel-prize-note b { color: var(--white); font-weight: 600; }

@media (max-width: 400px) {
    .wheel-fab { right: 10px; }
    .wheel-fab-btn { width: 58px; height: 58px; }
    .wheel-title { font-size: 20px; }
}
/* Низкие экраны: поджимаем подпись и кнопку — освободившаяся высота уходит
   барабану, потому что он считается от остатка (100vh минус занятое). */
@media (max-height: 640px) {
    .wheel-info { font-size: 12px; margin-top: 8px; }
    .wheel-spin-btn { min-height: 48px; margin-top: 8px; }
    .wheel-title { font-size: 19px; }
    .wheel-drum-wrap {
        width: max(170px, min(calc(100vw - 68px), calc(100vh - 165px), 460px));
        height: max(170px, min(calc(100vw - 68px), calc(100vh - 165px), 460px));
    }
}

/* ============================================================
   ИГРА «ДЖЕКПОТ» — общий банк с рулеткой
   ============================================================ */
.jp-info-badge { margin-left: auto; position: static; }

.jp-hist { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.jp-hist::-webkit-scrollbar { display: none; }
.jp-hist-chip {
    flex: none; font-size: 11px; color: var(--muted); white-space: nowrap;
    background: rgba(230,237,255,.05); border: 1px solid rgba(230,237,255,.10);
    border-radius: 999px; padding: 5px 10px;
}
.jp-hist-chip b { color: var(--white); font-weight: 600; }

/* Круг рулетки. aspect-ratio держит идеальную окружность на любом экране. */
.jp-wheel-wrap { position: relative; width: min(70vw, 270px); aspect-ratio: 1 / 1; margin: 4px auto 14px; }
.jp-pointer {
    position: absolute; top: -3px; left: 50%; transform: translateX(-50%); z-index: 3;
    width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent;
    border-top: 18px solid var(--brand-2); filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.jp-wheel {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(230,237,255,.08) 0deg 360deg);
    box-shadow: 0 0 0 6px rgba(230,237,255,.05), 0 0 40px rgba(1,82,255,.25), inset 0 0 30px rgba(0,0,0,.45);
    transform: rotate(0deg); will-change: transform;
}
.jp-center {
    position: absolute; inset: 22%; z-index: 2; border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #0b1424, #01040D);
    border: 1px solid rgba(230,237,255,.12);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; box-shadow: inset 0 0 22px rgba(0,0,0,.6);
}
.jp-pot { font-size: 26px; font-weight: 800; color: var(--white); letter-spacing: -.03em; line-height: 1; }
.jp-pot-label { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--muted2); margin-top: 5px; }
.jp-sub { font-size: 11px; color: var(--muted); margin-top: 8px; padding: 0 10px; line-height: 1.3; }
.jp-win-you { color: var(--brand-2); font-weight: 700; }

.jp-players-box {
    background: #111111; border: 1px solid rgba(230,237,255,.10);
    border-radius: 16px; padding: 10px 14px; margin-bottom: 10px;
}
.jp-players-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.jp-players-head b { color: var(--white); }
.jp-players { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; scrollbar-width: none; }
.jp-players::-webkit-scrollbar { display: none; }
.jp-empty { color: var(--muted2); font-size: 12px; text-align: center; padding: 14px 0; }
.jp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px; border-radius: 10px; background: rgba(230,237,255,.03); }
.jp-row.me { background: rgba(60,144,255,.12); }
.jp-row.win { background: rgba(102,224,163,.14); box-shadow: inset 0 0 0 1px rgba(102,224,163,.42); }
.jp-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.jp-name { flex: 1; color: var(--white); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-pbet { color: var(--white); font-weight: 600; }
.jp-share { color: var(--muted); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }

/* Ставка в джекпоте: поле ввода на всю ширину и кнопка «В банк» под ним.
   Быстрых чипов нет — только ручной ввод. */
.jp-bet-input {
    display: block; width: 100%; box-sizing: border-box;
    background: #0b0b0b; border: 1px solid rgba(230,237,255,.14); color: var(--white);
    border-radius: 13px; padding: 13px; font-size: 16px; font-weight: 600; text-align: center; font-family: var(--font);
}
.jp-bet-input:focus { outline: none; border-color: rgba(60,144,255,.5); box-shadow: 0 0 0 3px rgba(60,144,255,.14); }
.jp-bet-btn {
    width: 100%; margin-top: 10px; background: var(--brand-grad); color: var(--white);
    border: 2px solid rgba(230,237,255,.20); box-shadow: var(--brand-glow); border-radius: 13px;
    padding: 14px; font-weight: 700; font-size: 15px; font-family: var(--font); cursor: pointer;
    transition: transform .15s var(--ease), filter .2s var(--ease);
}
.jp-bet-btn:active { transform: scale(.97); filter: brightness(.96); }
.jp-inbet, .jp-closed { text-align: center; padding: 14px; border-radius: 13px; font-size: 13.5px; }
.jp-inbet { background: rgba(60,144,255,.10); border: 1px solid rgba(60,144,255,.30); color: var(--white); }
.jp-inbet b { color: var(--brand-2); }
.jp-closed { background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.10); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    .jp-wheel { transition: none !important; }
}

/* ============================================================
   Приветственное окно «Новая игра» (показывается один раз)
   ============================================================ */
.jp-intro {
    position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(3,6,14,.86); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity .32s var(--ease);
}
.jp-intro.show { opacity: 1; }
.jp-intro-card {
    position: relative; width: 100%; max-width: 360px; border-radius: 24px; padding: 26px 22px 22px;
    text-align: center; background: linear-gradient(160deg, #0b1a3a 0%, #050b18 60%, #01040D 100%);
    border: 1px solid rgba(60,144,255,.35);
    box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(1,82,255,.35);
    transform: translateY(16px) scale(.96); transition: transform .34s var(--ease);
}
.jp-intro.show .jp-intro-card { transform: none; }
.jp-intro-badge {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand-2); background: rgba(60,144,255,.12); border: 1px solid rgba(60,144,255,.4);
    border-radius: 999px; padding: 6px 14px; margin-bottom: 16px;
}
/* Обложка игры. Файл /images/Jackpot1.png появится позже — пока при ошибке
   загрузки img удаляет себя (onerror), и включается фирменная заглушка ниже. */
.jp-intro-cover {
    width: 150px; height: 150px; margin: 0 auto 18px; border-radius: 22px; object-fit: cover; display: block;
    border: 1px solid rgba(230,237,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.5); background: rgba(230,237,255,.04);
}
.jp-intro-cover-ph {
    width: 150px; height: 150px; margin: 0 auto 18px; border-radius: 22px; display: grid; place-items: center;
    font-size: 64px; background: var(--brand-grad); box-shadow: 0 10px 30px rgba(1,82,255,.4);
}
.jp-intro-cover ~ .jp-intro-cover-ph { display: none; }   /* обложка есть — заглушка скрыта */
.jp-intro-title { font-size: 24px; font-weight: 800; color: var(--white); letter-spacing: -.03em; margin-bottom: 10px; }
.jp-intro-title b { color: var(--brand-2); }
.jp-intro-text { font-size: 14px; line-height: 1.55; color: var(--muted); margin-bottom: 22px; }
.jp-intro-text b { color: var(--white); font-weight: 600; }
.jp-intro-btn {
    width: 100%; background: var(--brand-grad); color: var(--white); border: 2px solid rgba(230,237,255,.2);
    box-shadow: var(--brand-glow); border-radius: 15px; padding: 16px; font-size: 16px; font-weight: 700;
    font-family: var(--font); cursor: pointer; transition: transform .15s var(--ease), filter .2s var(--ease);
}
.jp-intro-btn:active { transform: scale(.98); filter: brightness(.96); }
.jp-intro-skip { margin-top: 12px; background: none; border: none; color: var(--muted2); font-size: 13px; font-family: var(--font); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
    .jp-intro, .jp-intro-card { transition-duration: .12s; }
}

/* Обложка игры не загрузилась (например, /images/Jackpot1.png ещё не залит) —
   вместо битой картинки показываем фирменную плитку с эмодзи игры. */
.cover-card.cover-missing { display: grid; place-items: center; background: var(--brand-grad); }
.cover-card.cover-missing::after {
    content: attr(data-emoji); font-size: 46px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
/* Ярлык «NEW» на карточке игры-новинки в витрине. Внизу слева: сверху слева
   теперь значок «i», сверху справа — сердечко. */
.cover-card[data-new]::before {
    content: "NEW"; position: absolute; bottom: 8px; left: 8px; top: auto; z-index: 4;
    font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #fff;
    background: var(--brand-grad); border: 1px solid rgba(230,237,255,.25);
    padding: 3px 8px; border-radius: 999px; box-shadow: 0 4px 12px rgba(1,82,255,.4);
}

/* Аватар-фишка на секторе колеса «Джекпота». #jpWheel вращается — фишки едут
   с ним; контр-поворот в inline-transform держит лицо ровным в покое. */
.jp-av {
    position: absolute; top: 50%; left: 50%; width: 30px; height: 30px;
    border-radius: 50%; overflow: hidden; border: 2px solid #fff;
    background: #0b1424; box-shadow: 0 2px 6px rgba(0,0,0,.5); z-index: 2;
}
.jp-av img, .jp-av-sm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jp-av i, .jp-av-sm i {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-style: normal; font-weight: 800; color: #fff;
}
.jp-av i { font-size: 13px; }
/* Аватар игрока в списке раунда (заменил цветную точку). */
.jp-av-sm {
    position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%;
    overflow: hidden; border: 2px solid var(--brand-2); background: #0b1424;
}
.jp-av-sm i { font-size: 11px; }

/* ===== Промокод и бонус на странице пополнения ===== */
/* Строки «Бонус по промокоду» и «Итого» живут внутри .pay-box рядом с
   «Получишь», поэтому свою вёрстку не заводим — только подсветка прибавки. */
#depBonusLine b, #depTotalLine b { color: #37D67A; }

/* Плашка активного процентного промокода — в брендовых тонах. */
.dep-promo-active {
    display: flex; align-items: center; gap: 9px;
    margin: 12px 0 0;
    padding: 12px 14px;
    background: rgba(60,144,255,.12);
    border: 1px solid rgba(60,144,255,.38);
    border-radius: 12px;
    color: var(--white); font-weight: 600; font-size: 13.5px;
    letter-spacing: -0.02em; line-height: 1.4;
}

/* Блок ввода промокода на странице пополнения: сам ввод переиспользует
   .promo-row / .promo-input / .promo-btn из блока промокодов в профиле. */
.dep-promo-box { margin-top: 16px; }
/* Подпись повторяет .form-label один в один, но своим классом: элементы с
   .form-label адресуются в локализации по индексу, и лишний сбивал нумерацию. */
.dep-promo-label {
    font-size: 13px; color: var(--muted); font-weight: 400;
    letter-spacing: -0.02em; margin-bottom: 8px;
}

/* .pay-row объявлен в стилях ПОЗЖЕ утилиты .hidden и с той же специфичностью,
   поэтому display:flex перебивал скрытие — строки бонуса висели с нулями при
   пустой сумме. Двумя классами специфичность выше, скрытие работает. */
.pay-row.hidden { display: none; }

/* ============================================================
   ШИРОКИЙ ЭКРАН (ПК)
   Мини-апп верстался под телефон: сетки жёстко в 2 столбца, контент во всю
   ширину без ограничения. На узком окне это идеально, а на большом мониторе
   обложки растягивались в огромные плитки, и всё выглядело «мелко и пусто».
   Здесь раскладываем то же содержимое на широкий экран: контент центрируется с
   разумной максимальной шириной, сетки получают больше столбцов, ряды
   показывают больше карточек.
   Игровые и слотовые экраны СОЗНАТЕЛЬНО не расширяем: у них фиксированные
   пропорции арта (aspect-ratio), и растяжение сломало бы посадку барабанов.
   ============================================================ */
@media (min-width: 900px) {
    /* Шапка и контент — одна центральная колонка. */
    .topbar {
        max-width: 1280px;
        margin-inline: auto;
        width: 100%;
    }
    #content {
        max-width: 1280px;
        margin-inline: auto;
        padding: 26px 24px;
    }

    /* Обложки игр: столбцы добавляются сами по ширине окна. */
    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 16px;
    }

    /* Ряды разделов: считаем ширину карточки той же формулой, что и в мобильной
       версии, но на 6 карточек вместо 3. Через 1fr нельзя: в горизонтально
       скроллящемся грид-контейнере доля от «ширины» неоднозначна. */
    .games-rail {
        grid-auto-columns: calc((100% - 5 * 14px) / 6);
        gap: 14px;
    }

    /* Соцсети и способы оплаты — в одну строку вместо двух столбцов. */
    .social-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

    /* Заголовки на большом экране могут быть чуть крупнее. */
    .section-title { font-size: 21px; }

    /* Нижняя навигация превращается в плавающую капсулу по центру: на всю
       ширину монитора растянутая полоса смотрелась бы полосой в пустоте. */
    .tabbar {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(560px, calc(100% - 32px));
        border: 1px solid rgba(230,237,255,.09);
        border-radius: 18px;
        bottom: 16px;
        padding: 8px 6px;
        box-shadow: 0 18px 44px rgba(0,0,0,.55);
    }

    /* Кошелёк и профиль не должны растягиваться на всю ширину: поле ввода на
       1200px неудобно. Ограничиваем и ОБЯЗАТЕЛЬНО центрируем — без
       margin-inline:auto колонка прижимается к левому краю, и формы уезжали
       влево, пока карточка баланса и подвкладки оставались широкими.
       Ограничиваем секцию целиком, а не отдельные подпанели: иначе баланс и
       вкладки шире форм, и раскладка выглядит ступенькой. */
    #tab-wallet, #tab-profile {
        max-width: 720px;
        margin-inline: auto;
    }
}

/* Очень широкие мониторы: ещё столбцы, но колонка контента уже не растёт —
   иначе глазу приходится «ездить» через весь экран. */
@media (min-width: 1500px) {
    .topbar, #content { max-width: 1440px; }
    .games-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ============================================================
   БАННЕР «НЕ ЗНАЕШЬ, ЧТО ИГРАТЬ» + БЕГУЩАЯ ЛЕНТА ОБЛОЖЕК
   Стоит между секциями Play'n GO и Amusnet. Лента едет CSS-анимацией по
   дублированному ряду карточек: трек содержит набор дважды и сдвигается ровно
   на половину длины, поэтому цикл бесшовный. Карточки кликабельные —
   открывается тот же экран игры, что и из витрины.
   ============================================================ */
.rg-banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 18px 0 22px;
    padding: 18px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #0851B1 0%, #0A2A66 55%, #061733 100%);
    border: 1px solid rgba(60,144,255,.30);
    box-shadow: var(--glow);
    overflow: hidden;
}
.rg-copy { min-width: 0; }
.rg-title {
    font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--white);
    line-height: 1.2;
}
.rg-sub {
    margin-top: 5px; font-size: 13px; color: rgba(230,237,255,.72);
    letter-spacing: -0.02em;
}
.rg-btn {
    margin-top: 13px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 22px; cursor: pointer;
    background: var(--white); color: #06122A;
    border: none; border-radius: 999px;
    font-family: var(--font); font-size: 13.5px; font-weight: 700; letter-spacing: -0.02em;
    transition: transform .12s var(--ease), filter .2s var(--ease);
}
.rg-btn:active { transform: scale(.96); filter: brightness(.95); }

/* Окно ленты: за его границами карточки просто обрезаются. */
.rg-marquee {
    position: relative;
    overflow: hidden;
    /* Края растворяются, чтобы обложки не «упирались» в рамку баннера. */
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.rg-track {
    display: flex;
    gap: 10px;
    width: max-content;
    /* Половина трека — это один полный набор карточек. */
    animation: rgScroll 38s linear infinite;
}
.rg-marquee:hover .rg-track { animation-play-state: paused; }
@keyframes rgScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Карточка в ленте: фиксированная ширина, иначе flex сожмёт их в полоски. */
.rg-card {
    flex: 0 0 auto;
    width: 84px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(230,237,255,.12);
    background: #061024;
    transition: transform .16s var(--ease);
}
.rg-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-card:active { transform: scale(.94); }
/* Подпись игры в ленте не нужна — обложки узнаваемые, а текст ломал бы ритм. */
.rg-card .pp-title { display: none; }

/* На широком экране текст слева, лента справа — как на большом мониторе и
   ожидается: полоса во всю ширину с колонкой текста. */
@media (min-width: 760px) {
    .rg-banner {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
        align-items: center;
        gap: 20px;
        padding: 20px 22px;
    }
    .rg-card { width: 96px; }
    .rg-title { font-size: 22px; }
}

/* Уважаем системную настройку «меньше движения»: лента замирает. */
@media (prefers-reduced-motion: reduce) {
    .rg-track { animation: none; }
    .rg-marquee { overflow-x: auto; }
}

/* ============================================================
   КНОПКА PROVIDERS И ОКНО ВЫБОРА ПРОВАЙДЕРА
   Заменили ряд чипов над каталогом: он не влезал по ширине и листался вбок.
   Строка теперь короткая: поиск, Providers, справа «Все игры».
   ============================================================ */
/* «Все игры» уезжает вправо, между ней и Providers — свободное место. */
.catalog-tools .catalog-segments { margin-left: auto; }

.providers-btn { flex: none; }
.providers-btn .providers-caret { opacity: .6; margin-left: 2px; flex: none; }
.providers-btn.active .providers-caret { opacity: .9; }

/* Лист выбора провайдера. Опирается на .cat-all/.cat-all-sheet, поэтому
   поведение открытия и затемнение те же, что у окна «Все игры». */
.prov-sheet { max-height: 82vh; }
.prov-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }

.prov-group-title {
    margin: 12px 2px 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted2);
}

.prov-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 14px 14px;
    background: #111111; border: 1px solid rgba(230,237,255,.10);
    border-radius: 14px; cursor: pointer;
    color: var(--white); font-family: var(--font);
    font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
    text-align: left;
    transition: border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.prov-item:active { transform: scale(.985); }
.prov-item.active {
    border-color: rgba(60,144,255,.42);
    background: rgba(60,144,255,.10);
}
/* Провайдер без игр в каталоге: пункт оставляем, но видно, что он пустой. */
.prov-item.is-empty { opacity: .45; }

/* Полоса под логотип фиксированной высоты — строки не прыгают, даже когда у
   логотипов разная высота из-за множителя --lk. */
.prov-item-main { display: flex; align-items: center; min-width: 0; flex: 1; min-height: 36px; }
/* Логотип провайдера. Высота = базовая * --lk: множитель выравнивает логотипы
   по оптической массе, иначе узкий Pragmatic выглядел крошечным рядом с широким
   Amusnet (см. logoK в veltgame_app_2026.js). max-width поднят до 190px: при
   150px самый широкий логотип (Live, 8.28:1) ужимался по ширине и терял высоту. */
.prov-logo {
    height: calc(22px * var(--lk, 1));
    width: auto; max-width: 190px;
    display: block; object-fit: contain;
}
.prov-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.prov-count {
    flex: none; padding: 3px 10px; border-radius: 999px;
    background: rgba(230,237,255,.07); border: 1px solid rgba(230,237,255,.10);
    color: var(--muted); font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.prov-arrow { flex: none; opacity: .38; }
.prov-item.active .prov-arrow { opacity: .8; }

/* «Все игры» первой строкой — сброс выбранного провайдера. */
.prov-reset { background: rgba(230,237,255,.04); }

/* ============================================================
   ЛЕНТА ПРОВАЙДЕРОВ ПОД КАТАЛОГОМ
   Ряд «логотип + подпись» между «Игры VeltGame» и футером. Листается вбок так
   же, как ряды секций: та же механика, что у .games-rail, но карточки
   горизонтальные и низкие.
   ============================================================ */
.prov-rail {
    display: grid;
    grid-auto-flow: column;
    /* Две с половиной карточки в видимой части — край подсказывает, что ряд
       листается. Фиксированная ширина в px, а не доля: подписи провайдеров
       разной длины, и от долей карточки скакали бы по размеру. */
    grid-auto-columns: 132px;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 8px;
    margin-bottom: 8px;
}
.prov-rail::-webkit-scrollbar { display: none; }
.prov-rail.hidden { display: none; }

.prov-rail-card {
    scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    padding: 16px 10px;
    cursor: pointer;
    background: #111111;
    border: 1px solid rgba(230,237,255,.10);
    border-radius: 14px;
    font-family: var(--font);
    transition: border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.prov-rail-card:hover { border-color: rgba(60,144,255,.32); background: #141414; }
.prov-rail-card:active { transform: scale(.96); }

/* Область логотипа фиксированной высоты — иначе карточки прыгают, потому что
   логотипы у провайдеров разной пропорции. */
.prov-rail-art {
    height: 34px; width: 100%;
    display: flex; align-items: center; justify-content: center;
}
/* Та же нормализация по --lk, что и в окне провайдеров: без неё Pragmatic
   терялся рядом с широкими логотипами. */
.prov-rail-logo {
    height: calc(20px * var(--lk, 1));
    max-height: 100%; max-width: 100%; width: auto;
    object-fit: contain; display: block;
}
.prov-rail-name {
    font-size: 12.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--white);
    text-align: center; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* Карточка без логотипа (наши разделы): подпись занимает всю карточку. */
.prov-rail-card.no-logo .prov-rail-art { display: none; }
.prov-rail-card.no-logo { padding: 22px 10px; }
.prov-rail-card.no-logo .prov-rail-name { font-size: 14px; white-space: normal; }

/* На широком экране карточек в ряд влезает больше — делаем их крупнее. */
@media (min-width: 900px) {
    .prov-rail { grid-auto-columns: 168px; gap: 14px; }
    .prov-rail-art { height: 30px; }
}

/* ============================================================
   ПОДГОНКА ПОД ПК (полноэкранный режим Telegram Desktop)
   Всё внутри медиазапросов: мобильная вёрстка остаётся ровно такой, как была.
   Причина правок — размеры, заданные в процентах от ширины. На телефоне 80%
   ширины это ~330px, а в полноэкранном окне на мониторе — 800px, и элементы
   раздувались: баннер занимал половину экрана по высоте, а мелкие карточки
   ленты выглядели потерянными в пустоте.
   ============================================================ */
@media (min-width: 900px) {

    /* ---- Баннеры-карусель ----
       У баннера aspect-ratio 16/9 и min-width 80%: на ПК это давало высоту
       около 440px, то есть пол-экрана под одну картинку. Показываем два
       баннера в ряд — высота падает вдвое, а карусель остаётся каруселью. */
    .banner { min-width: calc(50% - 7px); }
    .banner-art { max-height: 300px; }

    /* ---- Лента «Последние выигрыши» ----
       Запись шириной 100px на широком экране смотрелась крошкой, и ряд
       не добирал до правого края. Увеличиваем запись и обложку: суммарная
       ширина снова перекрывает экран, лента выглядит заполненной. */
    .live-item { width: 132px; padding: 4px 12px; }
    .li-cover { width: 108px; height: 108px; }
    .li-amount { font-size: 17px; height: 21px; line-height: 21px; }
    .li-user { font-size: 11.5px; }
    .li-cur { font-size: 11.5px; }

    /* ---- Панель фильтров каталога ----
       На телефоне «Все игры» уводится в правый край через margin-left:auto, и
       это правильно: там мало места. На ПК тот же приём растаскивал кнопки на
       800px друг от друга — держим их рядом. */
    .catalog-tools .catalog-segments { margin-left: 14px; }

    /* ---- Загрузочный экран ----
       Видео вертикальное, а окно на ПК широкое: object-fit: cover увеличивал
       кадр в несколько раз, отсюда «пиксели» и обрезанная композиция.
       contain показывает кадр целиком в исходной пропорции. */
    .splash-video { object-fit: contain; }
    /* Затемнение снизу рассчитано на кадр во всю высоту; при contain по бокам
       появляется фон, и градиент через всю ширину смотрится грязно. */
    .splash-scrim { background: linear-gradient(0deg, rgba(1,4,13,.92) 0%, rgba(1,4,13,.45) 22%, transparent 46%); }

    /* ---- Плотность секций ----
       Отступы, подобранные под узкую колонку, на широком экране дают ощущение
       пустоты между блоками. Немного подтягиваем. */
    .live-head { margin: 22px 0 12px; }
    .section-title { margin: 22px 0 14px; }
}

/* Очень широкие мониторы: баннеров в ряд три, иначе каждый снова разрастается. */
@media (min-width: 1500px) {
    .banner { min-width: calc(33.333% - 10px); }
    .live-item { width: 148px; }
    .li-cover { width: 124px; height: 124px; }
}

/* ============================================================
   КОЛЕСО ФОРТУНЫ: БЛОК «ВОЗМОЖНЫЕ ПРИЗЫ»
   Список под кнопкой «Крутить». Состав приходит с сервера вместе со статусом
   колеса, поэтому он не может расходиться с настоящим барабаном.
   ============================================================ */
.wheel-prizes {
    margin-top: 18px;
    padding: 16px;
    background: #111111;
    border: 1px solid rgba(230,237,255,.10);
    border-radius: var(--radius);
    box-shadow: var(--glow);
}
.wheel-prizes.hidden { display: none; }

.wp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.wp-title {
    font-size: 15px; font-weight: 600; letter-spacing: -0.03em; color: var(--white);
}
/* Счётчик призов — той же капсулой, что счётчики в заголовках секций каталога. */
.wp-count {
    padding: 2px 9px; border-radius: 999px;
    background: rgba(230,237,255,.07); border: 1px solid rgba(230,237,255,.10);
    font-size: 11.5px; font-weight: 700; color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Две карточки в ряд на телефоне: подписи вида «+7% к депозиту» в одну колонку
   не влезают, а в три становятся неразборчивыми. */
.wp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

.wp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px;
    background: rgba(230,237,255,.04);
    border: 1px solid rgba(230,237,255,.09);
    border-radius: 13px;
    min-width: 0;
}
/* Процентные призы подсвечены акцентом: это самый частый и самый полезный приз,
   и глазом он должен отличаться от фиксированных Velts. */
.wp-item.is-pct {
    background: rgba(60,144,255,.10);
    border-color: rgba(60,144,255,.30);
}

.wp-art { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.wp-coin { width: 30px; height: 30px; display: block; object-fit: contain; }
.wp-badge {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand-grad); color: var(--white);
    font-size: 14px; font-weight: 800; letter-spacing: 0;
    box-shadow: 0 0 14px rgba(1,82,255,.35);
}
.wp-label {
    font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--white);
    line-height: 1.25; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
}

/* Джекпот — витринный сектор 15000: выпасть не может, но на витрине главный.
   Золотая рамка и подсветка выделяют его среди остальных призов. Растягиваем
   на всю ширину сетки, чтобы он читался как «топ», а не как рядовая карточка. */
.wp-item.is-jackpot {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(255,193,64,.16) 0%, rgba(255,140,20,.08) 100%);
    border-color: rgba(255,193,64,.5);
    box-shadow: 0 0 20px rgba(255,176,32,.18);
}
.wp-item.is-jackpot .wp-coin { filter: drop-shadow(0 0 8px rgba(255,193,64,.6)); }
.wp-item.is-jackpot .wp-label { color: #FFD98A; font-weight: 800; }
/* Ярлык «Джекпот» справа в карточке. */
.wp-tag {
    margin-left: auto; flex: none;
    padding: 3px 10px; border-radius: 999px;
    background: linear-gradient(135deg, #FFC140 0%, #FF8C14 100%);
    color: #2A1500; font-size: 11px; font-weight: 800; letter-spacing: -0.01em;
}

.wp-note {
    margin-top: 12px; color: var(--muted2); font-size: 12px; line-height: 1.45;
}
.wp-note.hidden { display: none; }

/* На широком экране лист колеса шире (см. .wheel-sheet max-width 560px), поэтому
   призы раскладываем в три колонки и увеличиваем — иначе карточки выглядят
   маленькими в пустом поле. */
@media (min-width: 900px) {
    .wheel-prizes { padding: 20px; margin-top: 22px; }
    .wp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
    .wp-item { padding: 13px 14px; gap: 12px; }
    .wp-art, .wp-coin, .wp-badge { width: 34px; height: 34px; }
    .wp-badge { font-size: 15px; }
    .wp-label { font-size: 13.5px; }
    .wp-title { font-size: 16px; }
}

/* ============================================================
   ЗАДАНИЯ (ежедневные и недельные)
   Блок между баннерами и лентой выигрышей. Палитра и шрифт — проектные.
   ============================================================ */
.quests {
    margin: 18px 0 6px;
    padding: 16px;
    background: #111111;
    border: 1px solid rgba(230,237,255,.10);
    border-radius: var(--radius);
    box-shadow: var(--glow);
}
.quests.hidden { display: none; }

.quests-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.quests-title {
    font-weight: 600; font-size: 19px; letter-spacing: -0.03em; color: var(--white);
}
/* Счётчик готовых наград: акцентная капсула — сразу видно, что есть что забрать. */
.quests-ready {
    min-width: 20px; padding: 1px 7px; border-radius: 999px;
    background: var(--brand-grad); color: var(--white);
    font-size: 12px; font-weight: 800; text-align: center;
    box-shadow: 0 0 12px rgba(1,82,255,.45);
}
.quests-ready.hidden { display: none; }

/* Переключатель периодов уходит вправо. */
.quests-tabs {
    margin-left: auto; display: flex; gap: 6px;
    background: rgba(230,237,255,.05);
    border: 1px solid rgba(230,237,255,.08);
    border-radius: 12px; padding: 3px;
}
.quest-tab {
    padding: 7px 14px; border: none; border-radius: 9px; cursor: pointer;
    background: transparent; color: var(--muted);
    font-family: var(--font); font-size: 12.5px; font-weight: 600; letter-spacing: -0.02em;
    transition: color .18s var(--ease), background .18s var(--ease);
}
.quest-tab.active { background: var(--brand-grad); color: var(--white); }

.quests-reset { margin-top: 8px; color: var(--muted2); font-size: 12px; }

.quests-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.quest-empty { padding: 22px; text-align: center; color: var(--muted2); font-size: 13px; }

.quest-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px;
    background: rgba(230,237,255,.04);
    border: 1px solid rgba(230,237,255,.09);
    border-radius: 14px;
}
/* Депозитное задание — главное в списке, подсвечено брендовым акцентом. */
.quest-item.is-deposit {
    background: rgba(60,144,255,.10);
    border-color: rgba(60,144,255,.30);
}
/* Выполненное, но не забранное — зелёная рамка: сигнал «забери награду». */
.quest-item.is-done {
    border-color: rgba(55,214,122,.42);
    background: rgba(55,214,122,.08);
}
/* Забранное гасим, чтобы взгляд шёл к незабранным. */
.quest-item.is-claimed { opacity: .55; }

.quest-main { flex: 1; min-width: 0; }
.quest-text {
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--white);
    line-height: 1.3;
}

/* Полоса прогресса. */
.quest-bar {
    margin-top: 9px; height: 6px; border-radius: 999px;
    background: rgba(230,237,255,.08); overflow: hidden;
}
.quest-bar i {
    display: block; height: 100%; border-radius: 999px;
    background: var(--brand-grad);
    transition: width .35s var(--ease);
}
.quest-item.is-done .quest-bar i,
.quest-item.is-claimed .quest-bar i {
    background: linear-gradient(135deg, #2FA85C 0%, #37D67A 100%);
}

.quest-meta {
    margin-top: 7px; display: flex; align-items: baseline; gap: 10px;
    font-size: 11.5px; color: var(--muted);
}
.quest-progress { font-variant-numeric: tabular-nums; }
.quest-prize { margin-left: auto; color: var(--brand-2); font-weight: 700; }

.quest-action { flex: none; display: flex; align-items: center; }
.quest-claim {
    padding: 10px 16px; border: none; border-radius: 11px; cursor: pointer;
    background: linear-gradient(135deg, #2FA85C 0%, #37D67A 100%);
    color: #04140A; font-family: var(--font);
    font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em;
    box-shadow: 0 0 16px rgba(55,214,122,.28);
    transition: transform .12s var(--ease), filter .2s var(--ease);
}
.quest-claim:active { transform: scale(.96); filter: brightness(.96); }
.quest-claim:disabled { filter: grayscale(.4); cursor: default; }
.quest-done { color: #37D67A; font-size: 12px; font-weight: 700; }
/* Награда до выполнения — приглушённо: это ещё не кнопка. */
.quest-reward {
    color: var(--muted2); font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Узкие экраны: награду в правой колонке не дублируем, она есть в строке меты. */
@media (max-width: 420px) {
    .quest-reward { display: none; }
    .quest-item { padding: 12px; gap: 10px; }
    .quests-tabs { margin-left: 0; width: 100%; }
    .quest-tab { flex: 1; }
}

/* ПК: список в две колонки — задания короткие, и в одну колонку остаётся
   много пустого места справа. */
@media (min-width: 900px) {
    .quests { padding: 20px; }
    .quests-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    /* Депозитное задание — на всю ширину: оно главное и с крупной наградой. */
    .quest-item.is-deposit { grid-column: 1 / -1; }
    .quest-text { font-size: 14px; }
}


/* ===================================================================
   ИСТОРИЯ ИГР — строка в профиле + окно (ставки/выигрыши по дням)
   Окно опирается на .cat-all / .cat-all-sheet (выезд снизу и затемнение),
   здесь только своё наполнение. Палитра — общая: карточки #111111, зелёный
   выигрыш #37D67A, красный проигрыш #F0785F, акцент — фирменный градиент.
   =================================================================== */
/* Кнопка «Посмотреть» в строке «История игр». */
.history-view-btn {
    flex: 0 0 auto; cursor: pointer;
    padding: 8px 16px; border-radius: 999px;
    background: var(--brand-grad); color: var(--white);
    border: 1px solid rgba(230,237,255,.20);
    font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: -0.03em;
    box-shadow: 0 0 16px rgba(1,82,255,.22);
    transition: transform .12s var(--ease), filter .2s var(--ease);
}
.history-view-btn:active { transform: scale(.95); filter: brightness(1.08); }

/* Высота окна чуть выше стандартного листа: истории бывает много. */
.history-sheet { max-height: 88vh; }

/* Навигация по дням: ‹ · дата · › */
.hist-nav {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; background: #111111;
    border-bottom: 1px solid rgba(230,237,255,.08);
}
.hist-nav-btn {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(230,237,255,.06); border: 1px solid rgba(230,237,255,.14);
    color: var(--white); font-size: 22px; line-height: 1;
    transition: background .18s var(--ease), transform .12s var(--ease), opacity .18s var(--ease);
}
.hist-nav-btn:active { transform: scale(.9); background: rgba(60,144,255,.16); }
.hist-nav-btn:disabled { opacity: .3; cursor: default; }
/* Дата по центру. Нативный выбор — через прозрачный input поверх подписи. */
.hist-date {
    position: relative; flex: 1 1 auto; text-align: center;
    padding: 10px 12px; border-radius: 12px; cursor: pointer;
    background: rgba(230,237,255,.05); border: 1px solid rgba(230,237,255,.12);
    color: var(--white); font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
}
.hist-date-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0; margin: 0; padding: 0;
    -webkit-appearance: none; appearance: none;
}

/* Сводка за день: игр · ставки · итог */
.hist-summary {
    flex: 0 0 auto; display: flex; gap: 8px; padding: 12px 16px; background: #111111;
}
.hs-item {
    flex: 1 1 0; text-align: center; padding: 10px 6px; border-radius: 14px;
    background: rgba(230,237,255,.04); border: 1px solid rgba(230,237,255,.10);
}
.hs-num { font-size: 17px; font-weight: 700; color: var(--white); letter-spacing: -0.02em; }
.hs-num.pos { color: #37D67A; }
.hs-num.neg { color: #F0785F; }
.hs-lbl { margin-top: 3px; font-size: 11px; color: var(--muted2); font-weight: 500; }

/* Список игр за день */
.hist-list { display: flex; flex-direction: column; gap: 8px; }
.hist-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    background: #111111; border: 1px solid rgba(230,237,255,.10);
    border-left-width: 3px;
}
.hist-item.win { border-left-color: #37D67A; }
.hist-item.loss { border-left-color: #F0785F; }
.hist-item.push { border-left-color: var(--muted); }
.hi-left { min-width: 0; }
.hi-name {
    font-size: 14.5px; font-weight: 600; color: var(--white); letter-spacing: -0.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hi-sub { margin-top: 3px; font-size: 12px; color: var(--muted2); font-weight: 400; }
.hi-res {
    flex: 0 0 auto; font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
    display: flex; align-items: baseline; gap: 4px; white-space: nowrap;
}
.hist-item.win .hi-res { color: #37D67A; }
.hist-item.loss .hi-res { color: #F0785F; }
.hist-item.push .hi-res { color: var(--muted); }
.hi-cur { font-size: 10px; font-weight: 500; color: var(--muted2); }

.hist-loading, .hist-empty {
    text-align: center; color: var(--muted); font-size: 14px;
    padding: 40px 16px; font-weight: 500;
}

/* ============================================================
   РАЗДЕЛ ПАРТНЁРА: СВОИ РЕФЕРАЛЫ
   Окно открывается кнопкой, которая видна только партнёрам из PARTNER_IDS.
   Список может быть длинным, поэтому карточка ограничена по высоте и скроллится
   внутри себя: без этого на невысоких экранах кнопки «Показать ещё» и «Закрыть»
   уезжали за пределы экрана и до них было не добраться.
   ============================================================ */
.partner-card {
    max-width: 460px;
    max-height: 86vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
}

/* Сводка: две строки по 3 и 2 плитки. Числа крупные — партнёр смотрит на них
   первым делом, подписи мелкие и приглушённые. */
.pt-sum {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 14px 0 0;
}
.pt-sum.pt-sum-money { grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
.pt-sum-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
}
.pt-sum-num { font-size: 17px; font-weight: 700; line-height: 1.2; }
.pt-sum-lbl { font-size: 11px; opacity: 0.55; margin-top: 3px; }
.pt-sum-money .pt-sum-num { color: #48d38a; }

/* Проверка одного игрока */
.pt-check { margin-top: 16px; }
.pt-check-title, .pt-list-title {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.7;
    margin-bottom: 8px;
}
.pt-list-title { margin-top: 18px; }
.pt-check-row { display: flex; gap: 8px; }
.pt-check-row input {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    color: inherit;
    font-size: 14px;
    outline: none;
}
.pt-check-row input:focus { border-color: rgba(255, 255, 255, 0.28); }
.pt-check-row .btn { flex: 0 0 auto; width: auto; padding: 10px 14px; }

.pt-check-yes, .pt-check-no, .pt-check-wait {
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
}
.pt-check-yes { color: #48d38a; }
.pt-check-no  { color: #ff7a7a; }
.pt-check-wait { opacity: 0.55; }

/* Строка реферала. Ника может не быть — Telegram позволяет его не иметь, тогда
   опознание идёт по VeltID, поэтому он стоит первым и всегда присутствует. */
.pt-list { display: flex; flex-direction: column; gap: 8px; }
.pt-row {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 12px;
}
.pt-row-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}
.pt-vid { font-weight: 700; letter-spacing: 0.3px; }
.pt-nick { opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-date { margin-left: auto; font-size: 11px; opacity: 0.45; flex: 0 0 auto; }
.pt-row-bot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.8;
}
.pt-comm { color: #48d38a; opacity: 1; }
.pt-empty { font-size: 13px; opacity: 0.5; padding: 10px 0; }

@media (max-width: 380px) {
    .pt-sum { gap: 6px; }
    .pt-sum-num { font-size: 15px; }
    .pt-sum-lbl { font-size: 10px; }
}

/* Подпись под сводкой партнёра: объясняет, почему сумма комиссий по строкам
   может не сойтись с итогом «начислено вам». Мелкая и приглушённая — это
   сноска, а не сообщение об ошибке. */
.pt-note {
    font-size: 11px;
    line-height: 1.45;
    opacity: 0.45;
    margin-top: 8px;
}