/**
 * wheel.css — брендовые доводки модуля «Колесо фортуны» ПОВЕРХ wheel-visual.css.
 *
 * Здесь только то, чего нет и не должно быть в визуальном компоненте:
 *   - точка входа в шапке (кнопка со счётчиком спинов) — вставляется из wheel.js;
 *   - вкладки «Колесо / История / Правила» внутри модалки;
 *   - список истории, правила, таймер до бесплатного спина.
 *
 * ⚠️ wheel-visual.css НЕ ПРАВИТЬ — он общий эталон (зона VISUAL) и копируется на
 * бренды как есть. Всё брендовое живёт здесь.
 *
 * Префикс классов — wh-, чтобы не пересечься ни с wf- (компонент), ни с легаси
 * брендов (.user/.links/.window у zabkabet, .kn-* у кассы, .account-* у krazik).
 *
 * Мобильный приоритет: базовые правила рассчитаны на 360px, десктоп — в @media
 * выше. Высоты только в dvh (100vh на iOS режет экран под адресной строкой).
 */

/* ───────────────────────── брендовая палитра ─────────────────────────
   Значения сверены с BRAND_UI в app.js: goldera — золото #E8B21D / #c99616.
   Правится ТОЛЬКО этот блок; остальное — общая часть, копия zabkabet.
   */
:root {
    --wh-accent:          #e8b21d;
    --wh-accent-ink:      #241703;
    --wh-badge-bg:        #c62828;   /* белым 11px = 5,62:1 */
    --wh-badge-ink:       #ffffff;
    --wh-badge-dot-ring:  rgba(0, 0, 0, .5);
    --wh-entry-bg:        rgba(232, 178, 29, .14);
    --wh-entry-bd:        rgba(232, 178, 29, .38);
    --wh-entry-hover:     rgba(255, 255, 255, .10);
    --wh-entry-ink:       #ffffff;
    --wh-panel-bg:        rgba(0, 0, 0, .30);
    --wh-panel-bd:        rgba(255, 255, 255, .16);
    --wh-panel-ink:       #ffffff;
    --wh-panel-dim:       rgba(255, 255, 255, .66);
}

/* ══════════════════════ точка входа (кнопка в шапке) ═══════════════════ */

/*
 * ⚠️ ТРОЙНОЙ КЛАСС — НЕ ОПЕЧАТКА, А БРОНЯ ПО СПЕЦИФИЧНОСТИ.
 *
 * Префикс защищает от совпадения ИМЁН классов, но не от селекторов по типу
 * элемента. У брендов такие есть, и они бьют одиночный .wh-entry (0,1,0):
 *   zabkabet/manix  .header .user button                      (0,2,1)
 *                   → height 48px, padding 0 24px, radius 28px, color #fff
 *   krazik          header.site-header .account-cabinet button (0,2,2)
 *                   → height auto, color inherit
 * Кнопка вырастала до ~70px вместо расчётных 46 и съедала бюджет шапки: при
 * 360px баланс схлопывался в многоточие, при 320px исчезал совсем.
 *
 * .wh-entry.wh-entry.wh-entry = (0,3,0) — перебивает оба, не привязываясь к
 * контейнеру бренда (у goldera это класс .auth-container, у остальных #id).
 * Сюда вынесено ТОЛЬКО то, что бренды переопределяют; остальное ниже.
 *
 * ⚠️ :not(.wh-entry--menu) — броня нужна ТОЛЬКО кнопке-пилюле. Пункт бокового
 * меню goldera, наоборот, обязан донашивать брендовую плитку `.bottom-menu
 * .item a` (0,2,1), а (0,3,0) её перебивала: получался прозрачный прямоугольник
 * с радиусом 999px и кеглем 14px среди плиток #1f1704 с радиусом 5.3px.
 */
.wh-entry.wh-entry.wh-entry:not(.wh-entry--menu):not(.wh-entry--guest) {
    box-sizing: border-box;
    height: 36px;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--wh-entry-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.wh-entry {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    border: 1px solid var(--wh-entry-bd);
    background: var(--wh-entry-bg);
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.wh-entry:hover  { background: var(--wh-entry-hover); border-color: var(--wh-accent); }
.wh-entry:active { transform: scale(.96); }
.wh-entry:focus-visible { outline: 2px solid var(--wh-accent); outline-offset: 2px; }

.wh-entry__ic { display: inline-flex; color: var(--wh-accent); }
.wh-entry__ic svg { display: block; width: 20px; height: 20px; }

/* Подпись прячется на узких экранах: в шапке 360px место дороже слова. */
.wh-entry__txt { display: none; }

.wh-entry__badge {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--wh-badge-bg);
    color: var(--wh-badge-ink);
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}
.wh-entry__badge[hidden] { display: none; }

/* Пульсация — только когда спины есть. Анимируем transform/opacity на
   псевдоэлементе: это композиторские свойства, layout не пересчитывается. */
.wh-entry.is-hot::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 2px solid var(--wh-accent);
    opacity: 0;
    pointer-events: none;
    animation: wh-pulse 2.2s ease-out infinite;
}
@keyframes wh-pulse {
    0%   { transform: scale(1);    opacity: .75; }
    70%  { transform: scale(1.28); opacity: 0; }
    100% { transform: scale(1.28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wh-entry.is-hot::after { animation: none; opacity: .5; }
}

/*
 * Узкие экраны: только иконка 32×32 и точка вместо цифры.
 *
 * Бюджет шапки при 320px: доступно 229px, фиксированные элементы (Kasa,
 * колокольчик, бургер, отступы) занимают ~230 — на баланс не остаётся ничего,
 * и он исчезает целиком. Кнопка-иконка стоит 36px вместо ~70 и возвращает
 * балансу место. Счётчик спинов при этом не теряется: он звучит в aria-label
 * и виден в тултипе (wheel.js:_renderCountdown).
 */
@media (max-width: 400px) {
    .wh-entry.wh-entry.wh-entry:not(.wh-entry--menu):not(.wh-entry--guest) {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
    }
    .wh-entry { margin-right: 2px; }
    .wh-entry__ic svg { width: 18px; height: 18px; }
    .wh-entry__badge {
        top: -2px;
        right: -2px;
        min-width: 9px;
        width: 9px;
        height: 9px;
        padding: 0;
        border: 1.5px solid var(--wh-badge-dot-ring, rgba(0, 0, 0, .45));
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        text-indent: -999px;
    }
}

/*
 * ⚠️ Левый отступ в шапке. У .wh-entry отступ только справа (margin: 0 4px 0 0),
 * а в мобильной шапке .ballanse обнуляет свой margin-right (@media 991 в
 * style.css) — кнопка вставала вплотную к пилюле баланса, будто приклеена.
 * Соседи справа отбиты одинаково (колокольчик margin: 0 2px, бургер
 * margin-left: 4px), поэтому зазор дублируем слева, а не возвращаем отступ
 * пилюле: он снят намеренно, ради места под сумму.
 *
 * Селектор ограничен шапкой: у goldera кнопка живёт в .bottom-menu, у krazik —
 * в .header-tools, туда правило не долетает. На десктопе (≥992) не действует —
 * там .ballanse свой margin-right сохраняет.
 */
@media (max-width: 991px) {
    .header .user .wh-entry { margin-left: 6px; }
}
@media (max-width: 400px) {
    .header .user .wh-entry { margin-left: 4px; }
}

@media (min-width: 768px) {
    .wh-entry.wh-entry.wh-entry:not(.wh-entry--menu):not(.wh-entry--guest) { height: 38px; padding: 8px 14px; font-size: 14px; }
    .wh-entry__txt { display: inline; }
}

/* ═════════════ точка входа как ПУНКТ БОКОВОГО МЕНЮ (goldera) ═══════════
 *
 * Блок живёт в общей части намеренно: `.bottom-menu` есть только у goldera
 * (проверено — на zabkabet, manix и krazik такого контейнера нет ни в разметке,
 * ни в стилях), поэтому правила просто не находят цели на других брендах, а
 * файл остаётся одинаковым везде, кроме палитры.
 *
 * Вид пункта НЕ переопределяем: <a> внутри .item уже одет правилами
 * `.bottom-menu .item a` из style.css бренда — рамка, фон, радиус, кегль,
 * ховер и active достаются даром. Здесь только гасим кнопку-пилюлю и
 * повторяем метрики <img>, которых inline-SVG не получает.                */

/*
 * Броня из шапки файла (0,3,0) должна быть перебита — берём (0,4,0).
 *
 * ⚠️ ЗДЕСЬ ТОЛЬКО РАСКЛАДКА, НИ ОДНОГО СВОЙСТВА ОФОРМЛЕНИЯ. Первая редакция
 * гасила фон, рамку и радиус «чтобы плитку нарисовал бренд» — но (0,4,0) бьёт
 * и сам `.bottom-menu .item a` (0,2,1), то есть глушила ровно то, что хотела
 * унаследовать: пункт выходил прозрачным прямоугольником без рамки среди
 * плиток #1f1704. Видно это только в браузере, расчёт специфичности такое
 * не показывает.
 *
 * Правило простое: перечисляем то, что навязывает кнопка-пилюля и чего НЕТ
 * у брендового `.bottom-menu .item a`. Всё остальное — padding, кегль, цвет,
 * фон, рамку, радиус, ховер и active — рисует бренд, и трогать это нельзя.
 */
.bottom-menu .wh-entry.wh-entry.wh-entry {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    white-space: normal;
}
.bottom-menu .wh-entry:active { transform: none; }
/* Ободок фокуса ведём по .item — у самой ссылки нулевая рамка и радиус. */
.bottom-menu .wh-entry:focus-visible { outline: none; }
.bottom-menu .wh-menuitem:focus-within { outline: 2px solid var(--wh-accent); outline-offset: 2px; }

/* Иконка: метрики <img> у соседей — 20×20, opacity .5, снизу 5px. */
.bottom-menu .wh-entry__ic {
    display: block;
    margin: 0 auto 5px;
    color: currentColor;
    opacity: .5;
    transition: opacity 200ms ease;
}
.bottom-menu .wh-entry__ic svg { width: 20px; height: 20px; display: block; margin: 0 auto; }
.bottom-menu .item:hover .wh-entry__ic,
.bottom-menu .item.active .wh-entry__ic,
.bottom-menu .wh-entry.is-hot .wh-entry__ic { opacity: 1; }

/* Подпись в меню видна всегда (в шапке она прячется до 768px). */
.bottom-menu .wh-entry__txt { display: block; }

/* Счётчик — маленький бейдж на плитке. Число в подписи не помещается:
   колонка 88px, кегль 10px, слово «Колесо» и так занимает строку целиком. */
.bottom-menu .wh-entry__badge {
    top: -6px;
    right: -6px;
    min-width: 16px;
    width: auto;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    z-index: 5;                /* .item:before/:after лежат на 4 */
    /* ⚠️ Гасим «точку» из @media (max-width:400px) общей части: там бейдж
       превращается в 9px-кружок без цифры (кнопка в шапке ужимается до иконки).
       В меню место под число есть, и цифра тут нужна. Перечислены ИМЕННО те
       свойства, что задаёт тот блок, — иначе они протекут на телефоне. */
    border: 0;
    text-indent: 0;
    overflow: visible;
}

/*
 * Пульсация в вертикальном меню — приглушённая: скачущий пункт в колонке
 * раздражает сильнее, чем кнопка в шапке. Кольцо, которое растёт вокруг
 * пилюли, здесь выключено; вместо него медленное дыхание самого бейджа.
 */
.bottom-menu .wh-entry.is-hot::after { display: none; }
.bottom-menu .wh-entry.is-hot .wh-entry__badge {
    animation: wh-breathe 3s ease-in-out infinite;
}
@keyframes wh-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
    .bottom-menu .wh-entry.is-hot .wh-entry__badge { animation: none; }
}

/* Нижняя панель на телефоне (style.css: .bottom-menu → grid auto-fit).
   Пункт — обычная ячейка сетки; следим лишь за тем, чтобы бейдж не срезался
   краем экрана у крайнего правого элемента. */
@media (max-width: 960px) {
    .bottom-menu .wh-entry__badge { top: -4px; right: -2px; }
}

/* ───── точка входа в выезжающем меню goldera (.mm-nav) ─────
 *
 * На телефоне боковое меню бренда скрыто целиком, работает drawer. Пункт
 * донашивает его же скин (`.mm-nav a`: flex, gap 14px, кегль 16, разделитель
 * снизу), поэтому здесь снова только раскладка — ничего не красим.
 */
.mm-nav .wh-entry.wh-entry.wh-entry {
    width: auto;
    height: auto;
    margin: 0;
    white-space: normal;
    /* ⚠️ Гасим фон и рамку КНОПКИ-пилюли: у `.mm-nav a` их нет, поэтому базовое
       правило .wh-entry (0,1,0) ничем не перебивалось и строка меню выходила
       подсвеченной плашкой с обводкой среди плоских соседей.
       Нижнюю границу не трогаем — это разделитель строк бренда. */
    background: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}
.mm-nav .wh-entry:hover, .mm-nav .wh-entry:focus-visible { background: none; }
.mm-nav .wh-entry:active { transform: none; }
/* Иконка встаёт на место <img>/<svg class="mm-ic"> соседей: те же 23px и
   фирменная обводка вместо заливки — иначе наш вектор выглядит инородно. */
.mm-nav .wh-entry--drawer .wh-entry__ic {
    display: inline-flex;
    /* ⚠️ flex: 0 0 auto, а не только flex-shrink. У бренда `.mm-nav a span`
       стоит flex:1 и попадает НА ВСЕ мои span-ы, включая иконку и бейдж:
       иконка растягивалась наравне с подписью, и «Колесо» уезжало в центр
       строки, тогда как соседи выровнены влево. */
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    color: var(--wh-accent);
}
.mm-nav .wh-entry--drawer .wh-entry__ic svg { width: 23px; height: 23px; }
.mm-nav .wh-entry--drawer .wh-entry__txt { display: block; flex: 1; }
/* Бейдж в строке меню — не «на иконке», а справа, как счётчик бонусов
   (.mm-badge у соседнего пункта). */
.mm-nav .wh-entry--drawer .wh-entry__badge {
    position: static;
    flex: 0 0 auto;
    min-width: 18px;
    width: auto;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    border: 0;
    text-indent: 0;
    overflow: visible;
}
.mm-nav .wh-entry--drawer.is-hot .wh-entry__badge { animation: wh-breathe 3s ease-in-out infinite; }

/* ═════════════════════ гостевая кнопка в шапке ════════════════════════
 *
 * У гостя нет спинов — нет ни счётчика, ни пульсации; остаётся обычная
 * текстовая кнопка, третья в ряду «Войти / Регистрация».
 *
 * ⚠️ РАЗМЕР НЕ ЗАДАЁМ. Класс выведен из-под брони `:not(.wh-entry--guest)`
 * выше, поэтому высоту, отступы, кегль и радиус кнопке даёт САМ БРЕНД своим
 * же правилом для кнопок шапки (zabkabet/manix — `.header .user button`:
 * 48px и радиус 28px на десктопе, 36px на ≤991px; krazik — классы
 * .btn.btn-ghost.btn-sm из карты брендов). Повтори мы их числами у себя —
 * разошлись бы при первой правке брендовой вёрстки. Здесь только то, чего
 * у брендовой кнопки нет: иконка, зазор и наш акцент.                      */
.wh-entry--guest {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--wh-entry-bd);
    background: var(--wh-entry-bg);
}
.wh-entry--guest:hover { background: var(--wh-entry-hover); border-color: var(--wh-accent); }
/* Подпись у гостя видна всегда: без счётчика голая иконка ничего не сообщает. */
.wh-entry--guest .wh-entry__txt { display: inline; }
.wh-entry--guest .wh-entry__badge { display: none; }
.wh-entry--guest.is-hot::after { display: none; }
.wh-entry--guest .wh-entry__ic svg { width: 18px; height: 18px; }

/*
 * krazik: гостевой ряд .header-auth-btns — кнопки ТЕКСТОВЫЕ, высотой по строке
 * (height:auto, line-height 1.1, кегль 13px → 32px). Наша иконка 18px выше этой
 * строки и растягивала кнопку до 36px — на 4px больше соседей. В ряду текстовых
 * кнопок наша тоже текстовая: прячем иконку и получаем точное совпадение.
 * Селектор действует только на krazik — контейнера .header-auth-btns на других
 * брендах нет.
 */
.header-auth-btns .wh-entry--guest {
    gap: 0;
    /* Соседи по ряду безрамочные (height:auto + padding), и наша рамка добавляла
       ровно 2px разницы. Отличает кнопку фоновая заливка, как .btn-ghost. */
    border: 0;
}
.header-auth-btns .wh-entry--guest .wh-entry__ic { display: none; }

/* Узкие экраны: у zabkabet/manix бюджет гостевой шапки тоже не резиновый —
   бренд там уже ужимает свои кнопки (padding 0 14px, кегль 13px), и наша
   получает то же самое. Прячем только иконку, подпись важнее. */
@media (max-width: 420px) {
    .wh-entry--guest { gap: 0; }
    .wh-entry--guest .wh-entry__ic { display: none; }
}

/* ═══════════════════ вкладки и панель внутри модалки ══════════════════ */

.wh-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    justify-content: center;
    width: 100%;
    max-width: 520px;
    margin: 2px auto 8px;
    padding: 0 8px;
    box-sizing: border-box;
}

.wh-tab {
    flex: 1 1 auto;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid var(--wh-panel-bd);
    border-radius: 999px;
    background: var(--wh-panel-bg);
    color: var(--wh-panel-dim);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .16s ease, color .16s ease;
}
.wh-tab.is-on {
    background: var(--wh-accent);
    border-color: var(--wh-accent);
    color: var(--wh-accent-ink);
}
.wh-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Светлый скин (krazik): на белом фоне тёмная подпись читается, светлая — нет. */
.wf-overlay--light .wh-tab { color: rgba(0, 0, 0, .62); background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .1); }
/*
 * ⚠️ Подпись активной вкладки НЕ прибита к белому. Раньше здесь стояло
 * `color:#fff`, и это работало ровно на krazik (белым по #0369A1 — 5,93:1).
 * Тема светлая — свойство КАМПАНИИ, а не бренда: тот же пресет на лаймовом
 * zabkabet давал 1,71:1, на золотом manix — 1,38:1. Ink берём из брендовой
 * пары --wh-accent/--wh-accent-ink, она подобрана под свой акцент:
 * zabkabet 9,49:1, manix 11,66:1, goldera 9,02:1, krazik 5,93:1.
 */
.wf-overlay--light .wh-tab.is-on { color: var(--wh-accent-ink); }

/* Панель занимает место сцены: колесо на время прячется, геометрию компонент
   восстанавливает сам через ResizeObserver (см. комментарий в wheel.js). */
.wh-panel-open .wf-stage { display: none; }
.wh-panel-open .wf-sub,
.wh-panel-open .wf-star  { display: none; }

.wh-pane {
    flex: 1 1 auto;
    width: 100%;
    max-width: 520px;
    min-height: 0;
    margin: 0 auto;
    padding: 0 10px 8px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Прокрутка не должна «протекать» на страницу под модалкой — та же грабля,
       что ловили на списке уведомлений в Android (project_bug_notifications_scroll_dvh). */
    overscroll-behavior: contain;
    text-align: left;
    color: var(--wh-panel-ink);
}
.wh-pane[hidden] { display: none; }

.wh-empty {
    padding: 28px 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--wh-panel-dim);
}

/* ─────────────────────────── история ───────────────────────────
 *
 * ⚠️ ВСЕ правила строки заскопированы в .wh-list НАМЕРЕННО. Голое имя .wh-item
 * — слишком общее для файла, который живёт рядом с чужой вёрсткой: пункт меню
 * goldera (.item) уже один раз поймал этот скин и получил тёмную коробку с
 * радиусом 12px и grid-раскладкой вместо брендовой плитки. Переименование
 * обёртки закрыло тот случай, скоуп закрывает класс случаев.                */

.wh-list { margin: 0; padding: 0; list-style: none; }

.wh-list .wh-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--wh-panel-bd);
    border-radius: 12px;
    background: var(--wh-panel-bg);
    font-size: 13px;
}
.wh-list .wh-item__date  { font-size: 11px; font-weight: 600; color: var(--wh-panel-dim); white-space: nowrap; }
.wh-list .wh-item__prize { font-weight: 800; overflow-wrap: anywhere; }
.wh-list .wh-item__st    { font-size: 11px; font-weight: 700; color: var(--wh-panel-dim); white-space: nowrap; }
.wh-list .wh-item__code  { grid-column: 1 / -1; font-size: 12px; color: var(--wh-accent); overflow-wrap: anywhere; }

.wh-list .wh-item--deferred .wh-item__st { color: #ffb020; }
.wh-list .wh-item--failed   .wh-item__st { color: #ff6b5e; }
.wh-list .wh-item--awarded  .wh-item__st { color: var(--wh-accent); }

/* Сколько записей показано из общего числа (total из ответа wheel-history). */
.wh-more {
    padding: 6px 2px 2px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--wh-panel-dim);
}

/* ──────────────────────────── правила ───────────────────────────── */

.wh-descr {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--wh-panel-ink);
    overflow-wrap: anywhere;
}

.wh-rules { margin: 0 0 10px; padding: 0; list-style: none; }
.wh-rules li {
    position: relative;
    padding: 7px 12px 7px 26px;
    margin-bottom: 5px;
    border-radius: 10px;
    background: var(--wh-panel-bg);
    font-size: 13px;
    line-height: 1.35;
}
.wh-rules li::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wh-accent);
}
.wh-rules--lim li { color: var(--wh-panel-dim); }

/* ───────────── светлый скин модалки (krazik и светлые темы кампаний) ─────────
   Тему задаёт кампания (theme_json.preset), а не бренд: светлое колесо может
   прилететь на любой сайт. Поэтому правила висят на классе компонента
   .wf-overlay--light, а не на бренде — иначе белый текст на белом фоне.        */
.wf-overlay--light .wh-pane   { color: #1d1d1f; }
.wf-overlay--light .wh-descr  { color: #1d1d1f; }
.wf-overlay--light .wh-list .wh-item,
.wf-overlay--light .wh-rules li {
    background: rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .1);
}
.wf-overlay--light .wh-list .wh-item__date,
.wf-overlay--light .wh-list .wh-item__st,
.wf-overlay--light .wh-rules--lim li,
.wf-overlay--light .wh-empty,
.wf-overlay--light .wh-more,
.wf-overlay--light .wh-timer { color: rgba(0, 0, 0, .6); }
.wf-overlay--light .wh-tab:focus-visible { outline-color: var(--wh-accent); }

/* ──────────────── таймер до бесплатного спина (подвал) ──────────────── */

.wh-timer {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wh-panel-dim);
    font-variant-numeric: tabular-nums;
}

/* Низкие экраны в альбомной ориентации: подписи съедают всю высоту. */
@media (max-height: 520px) {
    .wh-tabs  { margin-bottom: 4px; }
    .wh-tab   { min-height: 30px; padding: 6px 8px; font-size: 12px; }
    .wh-timer { font-size: 11px; }
}

@media (min-width: 768px) {
    .wh-pane { max-width: 620px; }
    .wh-list .wh-item { font-size: 14px; }
}