/* ===== BOTTOM SYSTEM BAR =========================================== */
#sysbar {
    position: fixed; left: 0; bottom: 0; width: 100%; height: 40px; z-index: var(--z-hud);
    background: linear-gradient(to top,
        rgba(var(--edge-fade-bot-rgb, var(--edge-fade-rgb)), var(--edge-fade-bot-a)) 0%,
        rgba(var(--edge-fade-bot-rgb, var(--edge-fade-rgb)), 0) 100%);
    display: flex; align-items: flex-end; padding: 0 14px 7px 30px;
    font-family: 'Inter', sans-serif; color: #6E6E73;
    /* The bar itself is a decorative fade strip — only its buttons should catch
       clicks. Without this, the transparent middle of the gradient sits above the
       bet cells (z-index 20) and eats their clicks. */
    pointer-events: none; cursor: default;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
/* ☢️ ЕДИНСТВЕННЫЙ СПИСОК ИНТЕРАКТИВНЫХ ЭЛЕМЕНТОВ СИСБАРА. Сам #sysbar —
   pointer-events:none (декоративная полоса-градиент), поэтому КАЖДЫЙ кликабельный
   потомок обязан быть перечислен ЗДЕСЬ, а не включать себе события своим
   собственным правилом где-то ниже по файлу: два места = следующий элемент снова
   молча не кликается. Ping-пилюля (div[role=button]) и её меню попали в этот
   список именно после такого инцидента — они не кликались вовсе. */
#sysbar .sys-menu,
#sysbar .sys-sound,
#sysbar .sys-stat.ping,
#sysbar .ping-region-menu { pointer-events: auto; }
#sysbar .sys-ico { display: inline-flex; line-height: 0; }
#sysbar .sys-ico svg { display: block; width: 14px; height: 14px; }
/* Menu — grey rounded pill; a round sound-toggle of the same height sits next to it. */
#sysbar .sys-menu {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 12px;
    background: var(--sys-chip); border: none; border-radius: 100px;
    cursor: pointer; color: var(--sys-ink, #3A3A3E);
    font-family: 'Inter', sans-serif; pointer-events: auto;
    transition: transform 100ms var(--ease), background .35s ease;
}
#sysbar .sys-menu:active { transform: scale(0.96); }
#sysbar .sys-sound {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 26px; width: 26px; height: 26px; margin-left: 8px; padding: 0;
    background: var(--sys-chip); border: none; border-radius: 50%;
    cursor: pointer; color: var(--sys-ink, #3A3A3E); pointer-events: auto;
    transition: transform 100ms var(--ease), background .35s ease, color .2s ease;
}
#sysbar .sys-sound:active { transform: scale(0.92); }
#sysbar .sys-sound .snd-ico { display: block; width: 17px; height: 17px; }
/* Muted (.muted) → the sound waves simply disappear (no slash). */
#sysbar .sys-sound.muted .snd-wave { display: none; }
#sysbar .sys-sound.muted { color: var(--sys-ink-muted, #8A8A8E); }
#sysbar .sys-label { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
/* Same height as the menu/sound pills (26px) → with a bottom-aligned sysbar the
   stats vertically centre on the same level as the "MENU" text. */
/* flex:1 + min-width:0 — the stats group owns ALL the width left of MENU/sound,
   and never pushes them: that remaining width is the balance's budget, which
   FitText (ui/fitText.js) reads to pick the exact vs the compact amount. */
#sysbar .sys-group { display: flex; align-items: center; height: 26px; gap: 14px; margin-left: 20px; flex: 1 1 auto; min-width: 0; }
#sysbar .ping-anchor { flex: none; }
#sysbar .sys-stat { display: inline-flex; align-items: center; gap: 5px; cursor: default; }
#sysbar .sys-val {
    font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em;
    color: #4A4A4E; white-space: nowrap;
}
/* Ping — on a translucent pill of the same green as the text/icon: a soft
   alpha fill keeps the text readable, and a dot replaces the signal bars. */
#sysbar .sys-stat.ping {
    color: var(--ok);
    gap: 6px; height: 22px; padding: 0 10px;
    background: var(--sys-ping-bg, rgba(10, 163, 58, 0.12)); border-radius: 100px;
}
/* Single source of colour: text + dot inherit the pill's `color`, which the
   base rule sets green and the `.ping-hot` rule below flips to red. */
#sysbar .sys-stat.ping .sys-val { color: inherit; }
#sysbar .sys-stat.ping .sys-ico svg { width: 9px; height: 9px; }
/* Stable width slot for the ping value so the pill never resizes as the number
   changes: min-width reserves room for the widest realistic string ("999ms") so
   1-, 2-, 3-digit values and the "--ms" placeholder all render without growing
   the pill. Deliberately NO tabular-nums / "tnum" override — the digits must use
   the SAME (default, proportional) Inter figures as the balance number so the two
   pills read with one identical typeface. */
#ping-display {
    display: inline-block;
    min-width: 5.5ch;
    text-align: left;
}
/* ===== МЕНЮ ВЫБОРА РЕГИОНА над ping-пилюлей ==========================
   Обычная белая менюшка фреймворка (белая карточка, --shadow-modal, --ink),
   как все остальные окна — а не зелёная плёнка пилюли. Раскрывается рядом
   с пилюлей; регион в самой пилюле не дублируется — он виден в меню. */
/* Якорь: пилюля и меню — соседи внутри него (см. index.html). Меню
   позиционируется от якоря и НЕ участвует в раскладке сисбара. */
#sysbar .ping-anchor { position: relative; display: inline-flex; }
#sysbar .sys-stat.ping { cursor: pointer; }
#sysbar .sys-stat.ping:focus-visible,
#sysbar .prm-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* right:0, а не центрирование: сисбар прижат вправо, и центрированное по пилюле
   меню уезжало бы за правый край вьюпорта на узком экране. */
#sysbar .ping-region-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 156px;
    /* ☢️ ШИРИНА — ПО СОДЕРЖИМОМУ, А НЕ ПО ФИКСИРОВАННОМУ ЧИСЛУ.
       С одним лишь min-width:156px длинная локаль не влезала: «Автоматически»
       (ru) / «Automaattinen» (fi) съедали строку, и МЕТКА РЕГИОНА ломалась
       переносом на «EU-» / «E». Метка — ДАННЫЕ (REGION_LABELS, растут вместе с
       terraform), резать и переносить их нельзя, поэтому раздвигается меню.
       156px остаётся полом: короткая локаль не должна давать узкий огрызок. */
    width: max-content;
    /* …но экран важнее ширины по содержимому: меню растёт ВЛЕВО от right:0, и
       без потолка длинная локаль уехала бы за левый край вьюпорта. 16px —
       тот же боковой гуттер, что у остального UI. Приоритет: «влезает в экран»
       выше, чем «во всю ширину содержимого», и ВЫШЕ обоих — «метка не рвётся»
       (её nowrap ниже), поэтому в патовом случае пунктам разрешено проехать
       горизонтально ВНУТРИ меню, а не растащить страницу. */
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    padding: 6px;
    border-radius: var(--r-field);
    background: #FFFFFF;            /* тот же белый, что у .wf-modal */
    box-shadow: var(--shadow-modal);
    letter-spacing: -0.01em;
}
/* ☢️ БЕЗ ЭТОГО ПРАВИЛА `el.hidden = true` НЕ СКРЫВАЕТ МЕНЮ (уехало на dev).
   Браузерное `[hidden] { display: none }` — правило уровня user-agent с нулевой
   специфичностью селектора по типу; авторское `#sysbar .ping-region-menu
   { display: flex }` его перебивает, и «скрытое» меню оставалось видимым
   огрызком в 14px, ломая повторное открытие. Видимостью управляет РОВНО ОДИН
   механизм — атрибут `hidden`; класса-модификатора у этого меню нет и заводить
   его нельзя: два переключателя одного состояния разойдутся. */
#sysbar .ping-region-menu[hidden] { display: none; }
#sysbar .prm-head {
    padding: 7px 10px 5px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--label);
}
/* min-height 44px — размер под палец; он НЕ наследуется от пилюли (22px),
   промахнуться по пункту меню дороже, чем по индикатору. */
#sysbar .prm-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: left;
    cursor: pointer;
}
#sysbar .prm-item.is-selected { background: var(--surface-press); }
/* ☢️ НЕДОСТУПНЫЙ ПУНКТ ГАСИТСЯ, НО НЕ ПРЯЧЕТСЯ: его наличие и есть диагностика
   («регион знаем, вот причина»), а исчезновение было неотличимо от «регионов
   нет». Выбранный, но недоступный регион фона выбора НЕ получает
   (.is-selected-off) — иначе он выглядит «выбран, а нажать нельзя». */
#sysbar .prm-item.is-unavail { opacity: 0.55; }
/* Фон «выбрано» снимается РОВНО у ненажимаемого пункта (галочка остаётся:
   выбор игрока никуда не делся, недоступна точка, а не его решение). */
#sysbar .prm-item.is-selected[aria-disabled="true"] { background: transparent; }
#sysbar .prm-item[aria-disabled="true"] { cursor: default; }
/* Код причины — ненавязчивый суффикс того же класса, что support-код на экране
   недоступного кошелька: читается на скриншоте, не кричит игроку. */
#sysbar .prm-code {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    opacity: 0.7;
}
/* Галочка у НЕвыбранных не удаляется, а гасится: иначе метки прыгали бы по
   горизонтали на каждом переключении. */
#sysbar .prm-tick { display: inline-flex; opacity: 0; flex: 0 0 auto; }
#sysbar .prm-item.is-selected .prm-tick { opacity: 1; }
/* Выбран игроком, но подключены НЕ к нему (игрок на резерве): тот же серый
   фон выбора, что у любого выбранного пункта (выбор игрока — один вид), и
   только бледная галочка. Сплошная галочка — у фактически поднятой точки. */
#sysbar .prm-item.is-wanted { background: var(--surface-press); }
#sysbar .prm-item.is-wanted .prm-tick { opacity: 0.35; }
/* ☢️ НИ ОДИН ЭЛЕМЕНТ СТРОКИ НЕ ПЕРЕНОСИТСЯ И НЕ СЖИМАЕТСЯ.
   Всё, что здесь стоит, — данные или их сокращение: название пункта, МЕТКА
   РЕГИОНА (.prm-note у «Auto»), замер (.prm-ms), трёхбуквенный код (.prm-code).
   Перенос превращал «EU-E» в «EU-» + «E», то есть в метку, которой не
   существует, а flex-сжатие суффиксов — в многоточие поверх замера. Ширину
   даёт width:max-content выше; суффиксы её забирают первыми (flex-shrink:0),
   название — последним. Формы строки две, и обе покрыты одним правилом:
   галочка+название+метка (у «Auto») и галочка+метка+замер ЛИБО код. */
#sysbar .prm-label { flex: 1 1 auto; white-space: nowrap; }
#sysbar .prm-note,
#sysbar .prm-ms,
#sysbar .prm-code { white-space: nowrap; flex: 0 0 auto; }
#sysbar .prm-note { font-size: 11px; font-weight: 700; color: var(--label-3); }
/* Цифра замера — самый тихий элемент строки; фиксированного места не занимает
   (её у точки может не быть вовсе — тогда её просто нет, а не «— ms»). */
#sysbar .prm-ms { font-size: 11px; font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
    #sysbar .prm-item:not(.is-selected):not(.is-wanted):hover { background: var(--surface-btn); }
}
@media (prefers-reduced-motion: reduce) {
    #sysbar .ping-region-menu, #sysbar .prm-item { transition: none; animation: none; }
}
/* Balance — the grey sibling of the green ping pill: same shape/height, neutral
   fill and text. The drum digits inherit the .sys-val weight/size (700 / 12.5px,
   matching the ping), the USD unit is a muted grey at a slightly smaller cap. */
#sysbar .sys-stat.balance {
    gap: 6px; height: 22px; padding: 0 10px;
    background: var(--sys-bal-bg, linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) var(--sys-chip-under));
    border-radius: 100px;
}
#sysbar .sys-stat.balance { min-width: 0; }
#sysbar .sys-stat.balance .sys-val { color: var(--sys-bal-ink, #4A4A4E); display: inline-flex; align-items: baseline; min-width: 0; }
#sysbar .sys-stat.balance .pill-num.drum { color: var(--sys-bal-ink, #4A4A4E); }
#sysbar .sys-stat.balance .pill-unit {
    margin-left: 3px; font-size: 11px; font-weight: 700;
    color: var(--sys-bal-unit, rgba(0, 0, 0, 0.38));
}
/* «+6.45» — розовая пилюля НАД капсулой баланса: выигрыш фрибетов, ещё НЕ
   доставленный кредитом оператора (ui/FreeBetWinPill.js, решение —
   core/logic/freeBetWinPill.js). Это НЕ деньги на счету, поэтому она вынесена
   из числа капсулы и не меняет её ширину (position:absolute от капсулы).
   Цвет — фирменный var(--pink) (скин snowboarder переопределяет его на голубой).
   `.is-dropping` — кредит доставлен: пилюля «падает» в капсулу и тает; время —
   --win-drop-ms из JS (WIN_PILL_DROP_MS, единственный источник).
   ☢️ НЕ ПЕРЕСЕКАЕТСЯ С #pill-freebet ПРИ ЛЮБЫХ ДЛИНАХ — геометрией, а не
   подгонкой под типичные суммы:
     • по горизонтали пилюля заперта в ширине капсулы (обёртка left/right:0,
       max-width:100%, лишнее — многоточием), поэтому соседей по сисбару
       (звук/меню/пинг) не задевает;
     • по вертикали она живёт в полосе между верхом капсулы и низом тайлов
       (#pill-freebet/#pill-bet: bottom 44px): капсула 22px в группе 26px при
       padding-bottom 7px ⇒ её верх на 7+(26−22)/2+22 = 31px от низа; пилюля
       14px заходит на капсулу на 4px (как бейдж, над внутренним отступом
       цифр) ⇒ её верх на 41px — зазор 3px до тайла (замерено в браузере).
       Меняешь высоту/отступы сисбара, капсулы или bottom тайла — пересчитай. */
#sysbar .sys-stat.balance { position: relative; }
/* Пока показана «+X», капсула не уже 88px: бюджет «+X» = ширина капсулы, а капсула
   по содержимому — при малом балансе («0.00») было ~33px ⇒ кегль «+X» 4.6px. Бюджет
   ЧИСЛА баланса от ширины капсулы не зависит (fitText._numberBudget), так что цикла
   нет; на 320px в группе ≥ 120px под капсулу (компактный сисбар выше). */
#sysbar .sys-stat.balance:has(.pill-accrued:not([hidden])) { min-width: 88px; justify-content: center; }
#sysbar .sys-stat.balance .pill-accrued-live {
    position: absolute; left: 0; right: 0; bottom: calc(100% - 4px);
    display: flex; justify-content: center;
    pointer-events: none;
}
#sysbar .sys-stat.balance .pill-accrued {
    display: block; box-sizing: border-box; max-width: 100%;
    height: 14px; padding: 0 6px; border-radius: 100px;
    background: var(--pink); color: #FFFFFF;
    box-shadow: 0 1px 4px rgba(var(--pink-rgb), 0.28);
    font-size: 10px; font-weight: 700; letter-spacing: -0.01em; line-height: 14px;
    /* Без многоточия: число не режется, а ужимается кеглем (FitText на
       .pill-accrued-num, бюджет — ширина .pill-accrued-live = ширина капсулы). */
    white-space: nowrap;
    transition: transform var(--win-drop-ms, 600ms) cubic-bezier(0.55, 0, 0.85, 0.35),
                opacity var(--win-drop-ms, 600ms) cubic-bezier(0.7, 0, 1, 1);
}
/* display:block выше перебивает UA-правило [hidden] — гасим явно. */
#sysbar .sys-stat.balance .pill-accrued[hidden] { display: none; }
#sysbar .sys-stat.balance .pill-accrued.is-dropping {
    transform: translateY(14px) scale(0.55);
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    #sysbar .sys-stat.balance .pill-accrued { transition: none; }
}
/* Weak/bad link (#ping-display gets .ping-hot at RTT ≥ threshold): recolor the
   whole pill bright-pink (tapium), not red-on-green. ☢️ Пинг-пилюля — исключение из
   тем (решение владельца): текст/точка во ВСЕХ скинах как в tapium (--brand-pink, а не
   переопределяемый темой --pink, без --sys-chip-under). Исключение 2026-09-30 (решение
   владельца, вариант 3): jetski переопределяет ТОЛЬКО подложку — --sys-ping-bg /
   --sys-ping-hot-bg = navy α0.4 (skins/jetski.css); прочие скины — fallback ниже. */
#sysbar .sys-stat.ping:has(#ping-display.ping-hot) {
    color: var(--brand-pink);
    background: var(--sys-ping-hot-bg, rgba(var(--brand-pink-rgb), 0.15));
}
/* ☢️ КОМПАКТНЫЙ СИСБАР — по ТАЧУ ИЛИ ПО ШИРИНЕ (живой Chromium 2026-09-24, 320×640).
   Раньше блок включался только по (pointer: coarse): узкое окно с мышью (и headless,
   где эмуляция pointer:coarse срабатывает не всегда) получало десктопную раскладку —
   поля 30px, отступ группы 20px, gap 14px, группа не прижата вправо — и бюджет числа
   баланса на 320px был ~21px: «1,234.56» ужимался до 4.2px, «2K» то 4.1px, то 12.5px
   в зависимости от того, какой медиазапрос сработал в прогоне. Бюджет FitText при
   этом был ЧЕСТНЫМ (ёмкость группы минус пинг/поля, без текста числа) — места не было
   в самой раскладке. Ширину, а не указатель, решает место на экране.
   Страховка: fitText.input.invariants.test.js («сисбар 320px»). */
@media (hover: none) and (pointer: coarse), (max-width: 599px) {
    /* Pull the MENU/sound cluster toward the left edge (smaller left inset) so
       there is more horizontal runway for a very large balance number, which
       grows leftward from the right-pinned stats group. */
    #sysbar { padding-left: 12px; }
    /* flex-end right-pins the stats inside the (flex:1) group; the tighter gap
       sits the balance closer to the ping pill so the pair reads as one unit and
       frees the space to its left. margin-left 8px — the minimum gutter between
       the sound button and the widest balance the group lets through (the old
       `margin-left:auto` allowed 0, i.e. a balance touching the button). */
    #sysbar .sys-group { justify-content: flex-end; gap: 7px; margin-left: 8px; }
}
/* ☢️ < 360px: MENU — только иконка (круглая, как звук; aria-label на кнопке). Надпись
   съедала 54px из 320 — это больше, чем оставалось самому числу баланса. С ней бюджет
   числа ~41px (USD), без неё ~95px: худшая сумма (2^53 центов,
   «90,071,992,547,409.91») остаётся читаемой при ужатии кегля. От 360px — как было. */
@media (max-width: 359px) {
    #sysbar .sys-label { display: none; }
    #sysbar .sys-menu { width: 26px; padding: 0; justify-content: center; }
}

/* ===== TOP FADE BAR (mirror of the bottom #sysbar) ====================
   Purely decorative fade at the top (цвет — --edge-fade-*, по умолчанию белый), matching #sysbar at the bottom but with
   the gradient pointing down. No content. position:fixed + z-index BELOW the logo
   and balance pill so it never shifts them and stays underneath. */
#topfade {
    position: fixed; left: 0; top: 0; width: 100%; height: 40px; z-index: var(--z-topfade);
    background: linear-gradient(to bottom,
        rgba(var(--edge-fade-top-rgb, var(--edge-fade-rgb)), var(--edge-fade-top-a)) 0%,
        rgba(var(--edge-fade-top-rgb, var(--edge-fade-rgb)), 0) 100%);
    pointer-events: none; user-select: none;
    transition: background .35s ease;
}

/* ===== BOTTOM CHROME DURING BONUS ====================================
   The bonus field is WHITE/light (not the old inverted black field), so
   sysbar/topfade keep their normal light look — no dark recolor here. Smooth
   transition kept so state changes stay soft. */
#sysbar { transition: background .35s ease, color .35s ease; }