/* ═══════════════════════════════════════════════════════════════════
   Мост между handoff-темой и реальной разметкой.

   Зачем отдельный файл, а не правки в theme.css. Тема — присланный
   дизайнером слой; она должна остаться байт в байт такой, какой пришла,
   чтобы следующую её версию можно было просто положить поверх. Всё, что
   нужно доработать под наш живой фронтенд, живёт здесь и подключается
   после неё.

   Здесь только три вида правок, и каждая объяснена:
     1) структурные мосты — тема описывает разметку, которой у нас нет
        (например `.tabbar a`, а у нас кнопки);
     2) вопросы специфичности — старые правила из styles.css перебивают
        тему, и без этого редизайн просто не проявился бы;
     3) две внутренние нестыковки самой темы.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Таббар: тема стилизует ссылки, у нас кнопки ──────────────────
   Менять кнопки на ссылки нельзя: у них обработчики переключения
   экранов, а ссылка добавила бы переход по якорю и прыжок скролла. */
.tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer;
  font: 400 9.5px var(--n-font); color: #5f6373;
  min-height: 44px;                    /* минимальная цель из handoff */
  transition: color .18s;
}
.tabbar button.on,
.tabbar button.active { color: var(--n-accent-200); font-weight: 500; }

.tabbar button .ico {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid #4a4e5d;
  transition: border-color .18s, box-shadow .18s;
}
.tabbar button.on .ico,
.tabbar button.active .ico {
  border-color: var(--n-accent-300);
  box-shadow: 0 0 12px rgba(145, 132, 217, .6);
}

/* ── 2. Специфичность: старые правила сильнее темы ───────────────────
   `.btn.primary` в styles.css — это два класса, а `button.primary` в
   теме — элемент плюс класс, то есть слабее. Золотой градиент победил бы,
   и редизайн остался бы незаметным. Возвращаем тему на место. */
.btn.btn-primary {
  border: 1px solid var(--n-accent-400);
  background: radial-gradient(ellipse at 50% 130%,
              rgba(145, 132, 217, .3), transparent 70%);
  color: var(--n-accent-100);
  box-shadow: var(--n-glow);
  text-shadow: none;
  font: 500 14px/1 var(--n-font);
}
.btn.btn-primary:active {
  background: rgba(145, 132, 217, .16);
  border-color: var(--n-accent-300);
  transform: scale(.985);
}
/* Золотой блик, бежавший по кнопке, теме противоречит. */
.btn.btn-primary::after { content: none; }

/* Обычные кнопки: убираем неоскевоморфную «подушку» из styles.css. */
.btn:not(.btn-primary) {
  background: transparent;
  border: 1px solid var(--n-line-strong);
  box-shadow: none;
  color: var(--n-text-2);
  font: 500 14px/1 var(--n-font);
}
.btn:not(.btn-primary):active {
  border-color: var(--n-accent-600);
  color: var(--n-accent-200);
  box-shadow: none;
  transform: scale(.985);
}

/* Панели: у `.neo` в styles.css своя многослойная тень, она сильнее
   темы по числу классов. Тема хочет кромку и рассеянную темноту. */
.neo.card, .neo.list, .neo.level-card {
  background: var(--n-surface);
  box-shadow: var(--n-edge);
  border-radius: var(--n-r);
}
.neo.card--lit {
  background: linear-gradient(155deg, #252840, #1b1d2b);
  box-shadow: var(--n-edge-strong);
  border-radius: 14px;
}

/* Прогресс уровня: у `.bar > i` в styles.css золотая заливка и блик. */
.bar.progress { height: 5px; background: var(--n-bg-deep); }
.bar.progress > i {
  background: linear-gradient(90deg, var(--n-accent-700), var(--n-accent-300));
  box-shadow: 0 0 14px rgba(145, 132, 217, .8);
}
.bar.progress > i::after { content: none; }

/* Сегменты: тема ждёт `.seg-opt`, у нас просто кнопки внутри `.seg`. */
.seg { background: #1a1c28; box-shadow: var(--n-edge); border-radius: var(--n-r-sm); }
.seg button {
  height: 34px; border-radius: var(--n-r-sm);
  background: transparent; color: #8b8fa0;
  font: 500 12.5px var(--n-font);
}
.seg button.on { background: var(--n-accent-900); color: var(--n-accent-100); }

/* Поля ввода: в styles.css у `.field` вдавленная тень. */
.field, input.field {
  height: 44px; border-radius: var(--n-r-sm);
  border: 1px solid var(--n-line-strong);
  background: var(--n-surface-2);
  box-shadow: none;
  color: var(--n-text);
  font: 400 13.5px var(--n-font);
}
.field::placeholder { color: var(--n-faint); }

/* ── 3. Нестыковки внутри самой темы ─────────────────────────────────

   Первая: `.game-tile .name` и `.game-tile .sub` в theme.css заданы
   одинаково — `position:absolute; left:12px; bottom:11px`, то есть
   легли бы друг на друга. По описанию в handoff название стоит над
   подписью в левом нижнем углу, поэтому поднимаем название. */
.game-tile .name { bottom: 26px; }
.game-tile .sub  { bottom: 11px; right: 12px; }

/* Вторая: у плитки в styles.css есть свои свечения через ::before и
   ::after и цветные тени под каждую игру — они спорят с ровным
   градиентом темы. */
.tile.game-tile {
  background: linear-gradient(160deg, #26283a, #191b27);
  box-shadow: var(--n-edge-strong);
  padding: 11px 12px;
  height: 84px;
  border-radius: var(--n-r);
}
.tile.game-tile::before,
.tile.game-tile::after { content: none; }
.tile.game-tile:active {
  transform: translateY(-1px);
  box-shadow: var(--n-edge-strong), var(--n-glow-soft);
}

/* Метка вместо эмодзи: старый `.ico` был крупным символом. */
.game-tile .mark {
  position: absolute; right: 14px; top: 16px;
  font-size: 0;                       /* остатки текста не должны мешать */
}
.game-tile .mark--rocket { top: 0; right: 0; }
.game-tile .mark--roulette { top: -8px; right: -18px; }

/* Метки gator и slots состоят из внутренних полос — они добавлены
   разметкой; здесь только защита от пустой метки. */
.mark--gator:empty, .mark--slots:empty { display: none; }

/* ── Мелочи, без которых новая палитра выглядит наполовину ─────────── */

/* Заголовки разделов — по типографике handoff. */
h2.section, .section-label {
  font: 600 9.5px var(--n-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--n-muted);
  margin: 16px 2px 8px;
}

/* Чип баланса в шапке. */
.balance, #balancePill {
  background: var(--n-surface-2);
  box-shadow: var(--n-edge-strong);
  border-radius: var(--n-r-pill);
  color: var(--n-text);
}
#balance { font: 600 15px var(--n-font); color: var(--n-text); }

/* Строка списка — тоже поверхность из темы. */
.item, .list-row {
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--n-line);
}

/* Денежные значения: табличные цифры по всему приложению. */
.kv b, .amount, .balance, #balance, .qz-timer, .ct-tally b {
  font-variant-numeric: tabular-nums;
}

/* ── Остатки прежней палитры, которые пробивались сквозь тему ─────────
   Их видно только на живом экране: статическая проверка классов такое
   не поймает, потому что разметка правильная, а цвет приходит из
   правила с более высокой специфичностью. */

/* Чип баланса оставался золотым: `.balance .coin` и `#balance` в
   styles.css заданы через переменную --gold. */
#balancePill, .balance { color: var(--n-text); }
#balancePill #balance, #balance, .balance b, .balance .coin {
  color: var(--n-text) !important;
}
#balancePill .coin, .balance .coin { opacity: .55; }

/* Активная вкладка: в styles.css у неё была скруглённая «подушка»
   с внутренней тенью — тема хочет плоскую панель, где акцент несёт
   только цвет подписи и свечение метки. */
.tabbar button.on, .tabbar button.active {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.tabbar { padding: 8px 10px calc(26px + env(safe-area-inset-bottom)); }

/* Сетка игр: две колонки, как в handoff. */
#gameGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* Подпись плитки в две колонки не влезала бы в одну строку — даём
   перенос и ограничиваем двумя строками, чтобы высота 84px держалась. */
.game-tile .sub {
  right: 12px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.game-tile .name { bottom: 30px; }

/* Метка не должна перекрывать название на узкой плитке. */
.game-tile .mark--koi { width: 34px; height: 34px; }
.game-tile .mark--gator { grid-template-columns: repeat(3, 7px); gap: 3px; }
.game-tile .mark--gator i { height: 7px; }
.game-tile .mark--slots i { width: 9px; height: 28px; }
.game-tile .mark--dice, .game-tile .mark--coin { width: 30px; height: 30px; }
.game-tile .mark--blackjack { width: 32px; height: 22px; }
.game-tile .mark--roulette { width: 62px; height: 62px; top: -6px; right: -14px; }

/* ── Название и подпись плитки: поток вместо абсолюта ─────────────────
   В theme.css оба блока прижаты к низу через `position:absolute`.
   На широкой плитке это работало, но в сетке 2×N подпись переносится
   на две строки и растёт вверх — прямо на название. Ставим их в
   обычный поток внутри блока, прижатого к низу: тогда они не могут
   наехать друг на друга при любой длине текста. */
.tile.game-tile {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2px;
}
.game-tile .name,
.game-tile .sub {
  position: static;
  left: auto; right: auto; bottom: auto;
  max-width: 100%;
}
.game-tile .name {
  font: 500 14px var(--n-font); color: var(--n-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-tile .sub {
  font: 400 10.5px/1.35 var(--n-font); color: var(--n-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Метка остаётся в правом верхнем углу и не занимает места в потоке. */
.game-tile .mark { position: absolute; }

/* Метка стоит в правом верхнем углу, поэтому первая строка подписи не
   должна доходить до неё вплотную — резервируем место под метку. */
.game-tile .name { padding-right: 42px; }
.game-tile .sub  { padding-right: 34px; }

/* ── Точка вместо монетки в чипе баланса ─────────────────────────────
   Handoff: «точка 9px с обводкой #b5abfc и свечением, число 600 15px».
   Эмодзи-монетки в дизайне нет ни одной: деньги — это просто число
   табличными цифрами, а принадлежность к валюте несёт эта точка. */
.coin-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 auto; display: inline-block;
  background: var(--n-accent-900);
  box-shadow: 0 0 0 1px var(--n-accent-300), 0 0 10px rgba(145, 132, 217, .7);
}

/* Кнопка закрытия листа — по handoff это кнопка назад 32px. */
.sheet-head .back {
  width: 32px; height: 32px; min-height: 32px;
  border-radius: var(--n-r-sm);
  border: 1px solid var(--n-line-strong);
  background: transparent; color: var(--n-text-3);
  font-size: 13px; padding: 0;
}

/* ── Барабан Koi Queen под .reel-cell из темы ─────────────────────────
   Тема задаёт ячейку 62px, знак 26px, кромку и градиент выигрыша.
   Здесь только то, что нужно поверх: у нас ячейка тянется переменной
   --cell (барабан подстраивается под ширину экрана), поэтому размер
   берётся из неё, а не фиксируется, — иначе на узком телефоне пять
   колонок не поместятся. Остальное отдано теме. */
.kq-cell.reel-cell {
  height: var(--cell);
  font-size: clamp(18px, calc(var(--cell) * .42), 26px);
  border-radius: 9px;
  color: var(--n-text-3);
}

/* Выигрышная ячейка: фон и свечение из темы, вспышка — наша. */
.kq-cell.reel-cell.win {
  background: linear-gradient(160deg, #3a3468, #251f47);
  color: #f3f5fe;
  box-shadow: 0 0 0 1px var(--n-accent-300), var(--n-glow-hard);
}
/* Старая золотая радиальная подсветка теме противоречит. Но гасить её
   нужно только там, где нет выигрыша: у `.lit` и `.win` одинаковая
   специфичность, и правило ниже иначе стирало бы градиент выигрыша,
   ради которого всё и делалось. Проверка это и поймала. */
.kq-cell.reel-cell.lit:not(.win) { background-image: none; }
.kq-cell.reel-cell.dim { opacity: .3; }

/* Роль символа несёт цвет, а не отдельная картинка: младшие тусклее,
   старшие ярче, особые — акцентом. Так иерархия читается без подписей. */
.reel-cell[data-sym="10"], .reel-cell[data-sym="J"],
.reel-cell[data-sym="Q"],  .reel-cell[data-sym="K"],
.reel-cell[data-sym="A"]        { color: var(--n-muted); }
.reel-cell[data-sym="coin"],
.reel-cell[data-sym="frog"],
.reel-cell[data-sym="koi"]      { color: var(--n-text-2); }
.reel-cell[data-sym="princess"] { color: var(--n-accent-200); }
.reel-cell[data-sym="wild"]     { color: var(--n-accent-300);
                                  text-shadow: 0 0 12px rgba(145,132,217,.7); }
.reel-cell[data-sym="bonus"]    { color: var(--n-accent-100);
                                  text-shadow: 0 0 16px rgba(145,132,217,.9); }

/* Рамка барабана — поверхность из темы, а не прежний тёмный неоскевоморф. */
.kq-reel {
  background: linear-gradient(160deg, #252838, #1a1c27);
  box-shadow: var(--n-edge);
}

/* ── Koi Queen: остатки золотой палитры ───────────────────────────────
   Их видно только на живом экране во время выигрыша. Статическая
   проверка классов такое не поймает: разметка правильная, а цвет
   приходит из переменной --kq-gold в koi-queen.css. */

/* Линия выплаты. Handoff: акцент — свет и линия, золота в палитре нет. */
.kq-lines path {
  stroke: var(--n-accent-300);
  filter: drop-shadow(0 0 8px rgba(145, 132, 217, .85));
}

/* Баланс в шапке игры — тот же чип, что и на главной. */
.sheet-head .balance { background: var(--n-surface-2); box-shadow: var(--n-edge-strong); }
.sheet-head .balance #sheetBalance,
#sheetBalance { color: var(--n-text) !important; font: 600 15px var(--n-font); }

/* Строка выигрыша. Handoff 1b: покой — #1a1c28 и текст #5f6373;
   выигрыш — градиент, кромка #968ae0, свечение 34px, сумма 600 22px. */
.kq-payout, .kq-result, #kqWin {
  background: #1a1c28; box-shadow: var(--n-edge); border-radius: var(--n-r);
  color: #5f6373; transition: background .25s, box-shadow .25s, color .25s;
}
.kq-payout.win, .kq-result.win, #kqWin.win {
  background: linear-gradient(120deg, #3a3468, #252840);
  box-shadow: 0 0 0 1px var(--n-accent-400), 0 0 34px rgba(145, 132, 217, .45);
  color: var(--n-accent-100);
}
/* Сумма выигрыша была зелёной — в палитре темы такого цвета нет. */
.kq-payout b, .kq-result b, #kqWin b, #kqWin .amount, .kq-amount {
  color: var(--n-accent-100) !important;
  font: 600 22px var(--n-font);
  font-variant-numeric: tabular-nums;
}

/* Переключатель «Ставка+»: pill с контуром, активный — акцент. */
.kq-ante { box-shadow: var(--n-edge); background: var(--n-surface); }
.kq-switch {
  background: #1a1c28; box-shadow: var(--n-edge-strong);
}
.kq-switch i {
  background: var(--n-text-3);
  box-shadow: none;
}
.kq-switch.on { background: var(--n-accent-900); box-shadow: 0 0 0 1px var(--n-accent-400); }
.kq-switch.on i { background: var(--n-accent-200); box-shadow: 0 0 10px rgba(145,132,217,.8); }

/* Колесо бонуса рисуется в JS с золотым обводом — перекрасить его
   правилом нельзя, поэтому обвод задан в koi-queen.js. */

/* Строка выигрыша Koi Queen — это `.kq-banner`, а не `.kq-payout`:
   я угадал имя вместо того, чтобы посмотреть, и первый заход не попал
   ни в один элемент. Handoff 1b: покой — #1a1c28 и текст #5f6373,
   выигрыш — градиент, кромка #968ae0, свечение 34px, сумма 600 22px. */
.kq-banner {
  background: #1a1c28;
  box-shadow: var(--n-edge);
  border-radius: var(--n-r);
  color: #5f6373;
  transition: background .25s, box-shadow .25s, color .25s;
}
.kq-banner.win, .kq-banner.big {
  background: linear-gradient(120deg, #3a3468, #252840);
  box-shadow: 0 0 0 1px var(--n-accent-400), 0 0 34px rgba(145, 132, 217, .45);
}
/* Зелёного в палитре темы нет — сумма выигрыша идёт акцентом. */
.kq-banner.win b, .kq-banner.big b {
  color: var(--n-accent-100);
  font: 600 22px var(--n-font);
  font-variant-numeric: tabular-nums;
}
.kq-banner span { color: var(--n-text-3); }

/* Та же замена зелёного в остальных играх: строка результата и
   «плюс» в списке операций. */
.result-line.win { color: var(--n-accent-100); }
.item .amount.plus, .amount.plus { color: var(--n-accent-300); }
.amount.minus { color: var(--n-text-3); }

/* ── Барабаны остальных слотов под .reel-cell ─────────────────────────
   Gator Gold, Олимп и Стардаст получили те же знаки из общего словаря,
   поэтому и оформление у них общее с Koi Queen: иначе четыре игры
   выглядели бы из разных приложений. */

.gg-cell.reel-cell {
  border-radius: 9px;
  color: var(--n-text-3);
  background: linear-gradient(160deg, #252838, #1a1c27);
  box-shadow: var(--n-edge);
}
.gg-cell.reel-cell.win, .gg-cell.reel-cell.lit {
  background: linear-gradient(160deg, #3a3468, #251f47);
  color: #f3f5fe;
  box-shadow: 0 0 0 1px var(--n-accent-300), var(--n-glow-hard);
}

/* Сетка Олимпа и Стардаста: те же поверхности и та же подсветка. */
.gs-cell {
  background: linear-gradient(160deg, #252838, #1a1c27);
  box-shadow: var(--n-edge);
  color: var(--n-text-3);
}
.gs-cell.gs-hit {
  background: linear-gradient(160deg, #3a3468, #251f47);
  color: #f3f5fe;
  box-shadow: 0 0 0 1px var(--n-accent-300), var(--n-glow-hard);
}
.gs-board { background: linear-gradient(170deg, #20233a, #14161f); }
.gs-overlay.gs-mult, .gs-overlay.gs-big { color: var(--n-accent-100); }

/* Роль символа цветом — общая таблица для всех слотов. */
.reel-cell[data-sym="parrot"], .reel-cell[data-sym="snake"],
.reel-cell[data-sym="monkey"], .reel-cell[data-sym="jaguar"],
.gs-cell[data-sym="ring"], .gs-cell[data-sym="cup"],
.gs-cell[data-sym="hourglass"], .gs-cell[data-sym="dust"],
.gs-cell[data-sym="comet"], .gs-cell[data-sym="moon"] { color: var(--n-muted); }

.reel-cell[data-sym="gator"], .gs-cell[data-sym="laurel"],
.gs-cell[data-sym="hole"]      { color: var(--n-accent-200); }

.reel-cell[data-sym="golden"], .reel-cell[data-sym="egg"],
.gs-cell[data-sym="zeus"], .gs-cell[data-sym="bolt"] {
  color: var(--n-accent-100);
  text-shadow: 0 0 14px rgba(145, 132, 217, .85);
}

/* ── Ракета: график вместо летящей иконки ─────────────────────────────
   Handoff 1c: высота 300, фон linear-gradient(180deg,#1b1e33,#131520),
   поверх сетка 44×40 линий rgba(255,255,255,.035), кривая stroke 2.5
   цвета #b5abfc в полёте и #75798c после взрыва, под ней заливка
   вертикальным градиентом акцента. */

.cr-sky {
  position: relative;
  height: 300px;
  border-radius: var(--n-r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #1b1e33, #131520);
  box-shadow: var(--n-edge);
}
.cr-graph { position: absolute; inset: 0; width: 100%; height: 100%; }

.cr-grid line { stroke: rgba(255, 255, 255, .035); stroke-width: 1; }

#crLine {
  fill: none;
  stroke: var(--n-accent-300);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(145, 132, 217, .7));
  transition: stroke .3s;
}
#crLine.cr-dead { stroke: var(--n-muted); filter: none; }
#crArea { transition: opacity .3s; }

/* Множитель — 62px по handoff, со свечением. */
.cr-mult {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  font: 600 clamp(38px, 15vw, 62px)/1 var(--n-font);
  letter-spacing: -.03em;
  color: var(--n-text);
  text-shadow: 0 0 40px rgba(145, 132, 217, .55);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.cr-mult.boom { color: var(--n-muted); text-shadow: none; }
.cr-mult small {
  display: block; margin-top: 8px;
  font: 400 12px var(--n-font); letter-spacing: .04em;
  color: var(--n-text-3); text-shadow: none;
}

/* Лента прошлых раундов: крупные — акцентом, прочие приглушённо. */
.cr-history span {
  background: var(--n-surface-2); color: var(--n-muted);
  box-shadow: var(--n-edge);
}
.cr-history span.high { background: var(--n-accent-900); color: var(--n-accent-300); }
.cr-history span.mid { color: var(--n-text-2); }
.cr-history span.low { color: var(--n-muted); }

/* ── «Вместе сейчас» (экран 1a) ───────────────────────────────────────
   Две карточки в ряд: что происходит прямо сейчас в общих играх.
   Активная — с акцентной кромкой и штриховой меткой справа. */

.live-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.live-card {
  position: relative; height: 70px; overflow: hidden;
  border: 0; cursor: pointer; text-align: left;
  padding: 11px 12px; border-radius: var(--n-r);
  background: linear-gradient(160deg, #26283a, #191b27);
  box-shadow: var(--n-edge-strong);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  transition: box-shadow .18s, transform .18s;
}
.live-card:active { transform: translateY(-1px); box-shadow: var(--n-edge-strong), var(--n-glow-soft); }

.live-card[data-live="rocket"] {
  background: linear-gradient(150deg, #262a60, #1a1c33);
  box-shadow: 0 0 0 1px var(--n-accent-800);
}
.live-mark {
  position: absolute; right: 0; top: 0; width: 52px; height: 100%;
  background: repeating-linear-gradient(115deg,
              rgba(181, 171, 252, .32) 0 2px, transparent 2px 9px);
}
.live-name { font: 500 14px var(--n-font); color: var(--n-text); }
.live-state {
  font: 400 10.5px var(--n-font); color: var(--n-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 44px;
}
.live-card[data-live="quiz"] .live-state { padding-right: 0; }

/* Счётчик онлайн справа от заголовка раздела. */
.live-count { float: right; color: var(--n-accent-300); letter-spacing: 0; }

/* ── Кошелёк: герой-карточка с суммой и ползунком (экран 1e) ──────────
   Handoff: сумма 600 38px, ползунок 500…60 000 с шагом 500,
   accent-color #9184d9, подписи по краям. */

.wl-hero {
  margin: 14px 0 4px; padding: 16px 14px 12px;
  border-radius: 14px;
  background: linear-gradient(155deg, #252840, #1b1d2b);
  box-shadow: var(--n-edge-strong);
}
.wl-hero-sum {
  font: 600 38px var(--n-font); letter-spacing: -.02em;
  color: var(--n-text); text-align: center;
  font-variant-numeric: tabular-nums;
}
.wl-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 16px 0 8px;
  border-radius: 999px; background: var(--n-bg-deep);
  accent-color: var(--n-accent);
  outline: none;
}
.wl-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--n-accent-200);
  box-shadow: 0 0 12px rgba(145, 132, 217, .8);
  cursor: pointer;
}
.wl-range::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: var(--n-accent-200);
  box-shadow: 0 0 12px rgba(145, 132, 217, .8);
}
.wl-hero-ends {
  display: flex; justify-content: space-between;
  font: 400 10.5px var(--n-font); color: var(--n-muted);
  font-variant-numeric: tabular-nums;
}

/* Поле остаётся для точного ввода, но уходит на второй план: главное
   здесь ползунок, а не клавиатура. */
.wl-hidden-input { margin-top: 10px; opacity: .75; }
.wl-hidden-input:focus { opacity: 1; }

.wl-preview b { color: var(--n-accent-200); }

/* ── Шаг 6: табличные цифры и остатки старой палитры ──────────────────

   Табличные цифры — не украшение. Без них в списке ставок и выплат
   каждая цифра своей ширины, столбец «пляшет», и сравнить две суммы
   глазами нельзя. Handoff требует их для всех денег и множителей. */

.balance, #balance, #sheetBalance, .amount, .money, .mult,
.stat-value, .kv b, .item .amount, .cr-mult, .cr-history span,
.qz-timer, .qz-diff, .ct-tally b, .ct-left, .wl-hero-sum,
.wl-hero-ends span, .gs-rtp, .sp-auto-badge, .level-num,
.bar-legend span, .live-state, [data-num] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Золото и зелень остались в переменных старой темы. Перекрываем их
   на уровне корня — так ни одно правило, где они использованы, не
   вернёт прежний цвет. Сами переменные не удаляю: на них завязаны
   градиенты, которые иначе схлопнутся в прозрачность. */
:root {
  --gold: var(--n-accent-300);
  --gold-lit: var(--n-accent-200);
  --gold-deep: var(--n-accent-600);
  --green: var(--n-accent-200);
  --red: #b3402f;
  --kq-gold: var(--n-accent-300);
}

/* Поверхности и текст старой темы — на палитру Nocturne. */
:root {
  --bg: var(--n-bg);
  --bg-deep: var(--n-bg-deep);
  --bg-lift: var(--n-surface);
  --surface: var(--n-surface);
  --surface-hi: var(--n-surface-3);
  --text: var(--n-text);
  --text-dim: var(--n-text-3);
  --text-mute: var(--n-muted);
  --edge: var(--n-line);
  --edge-hi: var(--n-line-strong);
}

/* Тосты, всплывающие подсказки и лист — те же поверхности. */
.toast { background: var(--n-surface); box-shadow: var(--n-edge-strong); color: var(--n-text); }
.toast.ok { box-shadow: 0 0 0 1px var(--n-accent-600), var(--n-glow-soft); }
.toast.err { box-shadow: 0 0 0 1px #b3402f; }
.sheet { background: var(--n-bg); }
.sheet-head { background: var(--n-bg-deep); box-shadow: 0 1px 0 var(--n-line); }
.note { color: var(--n-text-3); font: 400 11px/1.55 var(--n-font); }

/* Подписи по краям ползунка не должны попадать под бегунок. */
.wl-hero-ends { margin-top: 6px; }
.wl-hero-note {
  margin: 12px 0 0; text-align: center;
  font: 400 11px var(--n-font); color: var(--n-muted);
}

/* ═════════ Экраны 1f–1i: раскладка, а не только перекраска ═════════ */

/* ── 1f. Топ: подиум ──────────────────────────────────────────────────
   Три столбца разной высоты, победитель по центру и выше. Порядок в
   разметке 2-1-3 — так пьедестал читают глазами, и первое место не
   приходится искать слева. */

.podium {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end; gap: 8px;
  margin-bottom: 14px;
}
.podium-col {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 0;
}
.podium-face {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font: 500 15px var(--n-font); color: var(--n-accent-200);
  background: linear-gradient(150deg, #423a6a, #232532);
  box-shadow: 0 0 0 1px var(--n-accent-700);
}
.podium-col.first .podium-face {
  width: 54px; height: 54px; font-size: 19px;
  background: linear-gradient(180deg, #33366a, #1e2033);
  box-shadow: 0 0 0 1px var(--n-accent-700), var(--n-glow);
}
.podium-name {
  font: 500 11.5px var(--n-font); color: var(--n-text-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium-sum {
  font: 600 13px var(--n-font); color: var(--n-text);
  font-variant-numeric: tabular-nums;
}
.podium-step {
  width: 100%; margin-top: 4px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #252840, #1b1d2b);
  box-shadow: inset 0 0 0 1px var(--n-line);
  display: grid; place-items: start center; padding-top: 8px;
}
.podium-col.first .podium-step { box-shadow: inset 0 0 0 1px var(--n-accent-700); }
.podium-step span {
  font: 600 15px var(--n-font); color: var(--n-muted);
  font-variant-numeric: tabular-nums;
}
.podium-col.first .podium-step span { color: var(--n-accent-200); }
.podium-col.me .podium-name { color: var(--n-accent-200); }

.podium-rest {
  background: var(--n-surface);
  box-shadow: var(--n-edge);
  border-radius: var(--n-r);
  overflow: hidden;
}
/* Своя строка — фон и полоса слева, чтобы находить себя не читая. */
.podium-rest .item.me, .item.me {
  background: #22243a;
  box-shadow: inset 2px 0 0 var(--n-accent), inset 0 -1px 0 var(--n-line);
}

/* ── 1g. Чат: пузыри ──────────────────────────────────────────────────
   Свои справа со скруглением 12 12 4 12, чужие слева 12 12 12 4 —
   «хвостик» у нужного края заменяет подпись «это я». */

.msg {
  position: relative;
  max-width: 82%; padding: 8px 11px 6px;
  border-radius: 12px 12px 12px 4px;
  background: var(--n-surface);
  box-shadow: none;
  font: 400 13px/1.45 var(--n-font); color: var(--n-text);
  animation: riseIn .25s var(--ease-out);
}
.msg.mine {
  align-self: flex-end;
  border-radius: 12px 12px 4px 12px;
  background: var(--n-accent-900);
}
.msg .who { font: 500 10.5px var(--n-font); color: var(--n-accent-300); margin-bottom: 2px; }
.msg-at {
  display: block; margin-top: 3px; text-align: right;
  font: 400 9.5px var(--n-font); color: var(--n-faint);
  font-variant-numeric: tabular-nums;
}
.msg.house {
  align-self: center; max-width: 92%;
  background: linear-gradient(120deg, #2b2741, #20223a);
  box-shadow: 0 0 0 1px var(--n-accent-700);
  color: var(--n-text-2);
}
.msg.house .who { color: var(--n-accent-300); }
.msg.feed, .msg.system {
  align-self: center; background: transparent;
  color: var(--n-muted); font-size: 11px;
}
@keyframes riseIn { from { opacity: 0; transform: translateY(6px) } }

.chat-input { gap: 8px; }
.chat-input .field { flex: 1 1 auto; }
#chatSend {
  width: 46px; height: 46px; flex: 0 0 auto; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--n-accent-400);
  background: transparent; color: var(--n-accent-200);
  box-shadow: var(--n-glow-soft);
}

/* ── 1h. Профиль: сетка статистики 2×2 и список «Быстро» ────────────── */

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.stat-cell {
  padding: 12px 13px; border-radius: var(--n-r-sm);
  background: var(--n-bg-deep);
  box-shadow: inset 0 0 0 1px var(--n-line);
}
.stat-cell--lit {
  box-shadow: inset 0 0 0 1px var(--n-accent-800);
}
.stat-cell--lit .stat-value { color: var(--n-accent-200); }
.stat-value {
  font: 600 21px var(--n-font); color: var(--n-text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat-label {
  margin-top: 2px;
  font: 400 10.5px var(--n-font); color: var(--n-muted);
}

.quick-list {
  background: var(--n-surface); box-shadow: var(--n-edge);
  border-radius: var(--n-r); overflow: hidden;
}
.quick-row {
  position: relative; width: 100%; min-height: 52px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 10px 14px; border: 0; cursor: pointer; text-align: left;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--n-line);
  transition: background .18s;
}
.quick-row:last-child { box-shadow: none; }
.quick-row:active { background: rgba(145, 132, 217, .08); }
.quick-name { font: 500 14px var(--n-font); color: var(--n-text); }
.quick-note { font: 400 10.5px var(--n-font); color: var(--n-muted); }
.quick-badge {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--n-accent-300); color: var(--n-bg);
  font: 600 11px var(--n-font); font-variant-numeric: tabular-nums;
}

/* ── 1i. Честность: моноширинные сиды с переносом по символам ───────── */

.mono, #fServerHash, #fClientSeed {
  font: 400 11px var(--n-mono);
  color: var(--n-accent-200);
  overflow-wrap: anywhere; word-break: break-all;
  line-height: 1.5;
}

/* Вкладка активна по классу .on — его и переключает app.js. Класс .active
   из темы поддержан как синоним, но в разметке его быть не должно:
   вписанный намертво, он подсвечивал «Игры» на всех экранах сразу. */


/* ── Свои картинки на барабанах ──────────────────────────────────────
   Файл из img/symbols подставляется вместо знака. Ячейки у слотов разного
   размера, поэтому картинка не задаёт размер, а вписывается в то, что есть:
   contain, а не cover — обрезать символ нельзя, по нему читается выигрыш.

   pointer-events снят намеренно: по барабану кликают, чтобы пропустить
   анимацию, и картинка не должна перехватывать это касание. */
.sym-art {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* ── Покупка бонуса ──────────────────────────────────────────────────
   Кнопка намеренно не выглядит как главная кнопка спина: покупка стоит
   двадцать-сорок ставок, и промахнуться по ней вместо «Крутить» человек
   не должен. Контур вместо заливки и своя строка под панелью. */
.buy-bonus {
  width: 100%;
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.buy-bonus:active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.buy-note { margin-top: 6px; font-size: 12px; line-height: 1.4; }