/* /all/timer/css.css
   CHECK & CALL TIMER — PRO UI (Dark/Light) + TV safe + Mobile + Premium Admin Panel
*/

/* Локальный шрифт табло — Saira (переменный, OFL). Хостится локально, без внешних
   CDN (152-ФЗ). Один файл, все начертания 100–900 + кириллица. */
@font-face{
    font-family:'Saira';
    src:url('fonts/Saira.ttf') format('truetype');
    font-weight:100 900;
    /* У файла ДВЕ оси: wght 100-900 и wdth 50-125 (проверено fontTools). Без
       явного font-stretch Chrome зажимает ось ширины на 100%, и узкое
       начертание молча недоступно — а оно нужно, чтобы набирать имя
       рекламодателя точно по мере полосы, не растягивая буквы. */
    font-stretch:50% 125%;
    font-display:swap;
}

/* =========================
   THEME TOKENS
   ========================= */
:root{
    /* Dark */
    --bg-top:#0f0b12;
    --bg-mid:#070812;
    --bg-bottom:#040515;

    --accent:#ff2e3b;
    --accent-soft:#ff5666;

    --text:#ffffff;
    --text-muted:rgba(255,255,255,.64);

    --card:#0b0b14;
    --card-2:#0f0f1a;
    --border:rgba(255,255,255,.12);

    --radius:18px;
    --pill:999px;

    --shadow:0 18px 60px rgba(0,0,0,.65);
    --shadow-soft:0 10px 26px rgba(0,0,0,.45);

    /* Layout sizing */
    --pad-x: 22px;
    --pad-y: 16px;
    --gap: 16px;

    --side-w: min(420px, 24vw);
    --timer-size: min(62vmin, 58vh, 620px);

    --chip-bg: rgba(var(--accent-rgb,255,46,59),.12);
    --chip-br: rgba(var(--accent-rgb,255,46,59),.32);

    --ring-bg: rgba(255,255,255,.12);
    --ring-glow: 0 0 46px rgba(var(--accent-soft-rgb,255,80,110),.55);

    --legal-bg: rgba(13,13,22,.62);

    --panel-glass: rgba(15,15,26,.92);
    --panel-glass-2: rgba(10,10,18,.94);
}

html[data-theme="light"]{
    --bg-top:#ffffff;
    --bg-mid:#f6f7fb;
    --bg-bottom:#eef1f7;

    --accent:#7b0f1a;
    --accent-soft:#a41528;

    --text:#0b0e14;
    --text-muted:rgba(11,14,20,.62);

    --card:#ffffff;
    --card-2:#f7f8fd;
    --border:rgba(11,14,20,.14);

    --shadow:0 18px 60px rgba(11,14,20,.14);
    --shadow-soft:0 10px 26px rgba(11,14,20,.10);

    --chip-bg: rgba(var(--accent-rgb,123,15,26),.08);
    --chip-br: rgba(var(--accent-rgb,123,15,26),.22);

    --ring-bg: rgba(11,14,20,.12);
    --ring-glow: 0 0 26px rgba(var(--accent-rgb,123,15,26),.22);

    --legal-bg: rgba(255,255,255,.78);

    --panel-glass: rgba(255,255,255,.92);
    --panel-glass-2: rgba(248,249,253,.96);
}

/* =========================
   GLOBAL RESET
   ========================= */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
    font-family:'Saira',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--text);
    background: radial-gradient(circle at top, var(--bg-top) 0, var(--bg-mid) 40%, var(--bg-bottom) 100%);
    overflow:hidden;
}

/* =========================
   GLOBAL SCROLLBARS (PRO)
   ========================= */
/* Firefox */
*{
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) rgba(255,255,255,.06);
}
html[data-theme="light"] *{
    scrollbar-color: rgba(11,14,20,.22) rgba(11,14,20,.06);
}
/* WebKit */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{
    background: rgba(255,255,255,.05);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.16);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0);
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.24); }
html[data-theme="light"] *::-webkit-scrollbar-track{ background: rgba(11,14,20,.05); }
html[data-theme="light"] *::-webkit-scrollbar-thumb{ background: rgba(11,14,20,.20); }
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{ background: rgba(11,14,20,.28); }
*::-webkit-scrollbar-corner{ background: transparent; }

/* =========================
   ROOT LAYOUT
   ========================= */
.root{
    width:100vw;
    /* НЕ фиксируем высоту: даём раскладке расти естественно (иначе центральный
       блок фикс.размера переполняет схлопнувшийся 1fr и НАЛЕЗАЕТ на топбар и
       блайнды на ТВ с низким логич.вьюпортом/оверсканом). JS fitToScreen()
       ужимает всю доску под экран — авто-эквивалент Ctrl+«−». */
    min-height:100vh;
    min-height:100dvh;
    height:auto;

    transform-origin: top center;
    will-change: transform;

    display:grid;
    grid-template-rows: auto 1fr auto auto;
    /* Колонка ОБЯЗАНА быть minmax(0,1fr), а не auto. Авто-колонка берёт
       max-content самого широкого ребёнка — и бегущая строка рекламы (nowrap,
       текст в двух копиях) растягивала её до 2700px: доска уезжала за правый
       край на всём, что уже 4K (ноут, планшет, ТВ 1080p), а fitToScreen()
       этого не видел — он меряет offsetWidth .root, тот честные 100vw. */
    grid-template-columns: minmax(0, 1fr);

    /* Вертикальный воздух умножается на --fit-sq: когда доска не влезает по
       высоте (включили бегущую строку рекламы — это +57px на 1080p), JS
       сначала поджимает зазоры и поля, и только если не хватило — масштабирует
       доску целиком. Масштаб жмёт и ширину: экран получает чёрные поля по
       бокам, а владелец справедливо спрашивает, зачем реклама «урезала» доску
       (14.08.2026). По горизонтали ничего не жмём — там воздух не мешает. */
    --fit-sq: 1;
    gap: calc(var(--gap) * var(--fit-sq));

    padding:
            calc(var(--pad-y) * var(--fit-sq) + env(safe-area-inset-top))
            calc(var(--pad-x) + env(safe-area-inset-right))
            calc(var(--pad-y) * var(--fit-sq) + env(safe-area-inset-bottom))
            calc(var(--pad-x) + env(safe-area-inset-left));
}

/* =========================
   TOP BAR
   ========================= */
.top-bar{
    display:grid;
    /* minmax(0,...) по той же причине, что и у .root: длинное имя клуба (nowrap)
       или плита рекламодателя не должны распирать шапку шире доски. */
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-height:64px;
}

.top-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    justify-self:start;
}

.logo{
    --logo-size:48px;
    width:var(--logo-size);height:var(--logo-size);
    object-fit:contain;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft);
}

/* Только для картинки: перекраска логотипа под светлую тему. Монограмму
   (.logo-mark) этот фильтр превратил бы в чёрно-красное пятно. */
html[data-theme="light"] img.logo{
    filter: brightness(0) saturate(100%)
    invert(12%) sepia(62%) saturate(5200%)
    hue-rotate(346deg) brightness(.95) contrast(1.06);
}

/* Клуб не загрузил логотип — вместо битой картинки фирменный знак с
   монограммой (1–2 буквы названия) в акцентном цвете клуба. */
.logo-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Saira', system-ui, sans-serif;
    font-weight:900;
    font-size:calc(var(--logo-size, 48px) * .46);
    line-height:1;
    letter-spacing:.02em;
    color:#fff;
    background:
        linear-gradient(148deg,
            rgba(var(--accent-rgb,255,46,59),.62) 0%,
            rgba(var(--accent-rgb,255,46,59),.20) 58%,
            rgba(255,255,255,.05) 100%),
        var(--card, #0b0b14);
    border:1px solid rgba(var(--accent-rgb,255,46,59),.45);
    box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.16);
    text-shadow:0 2px 6px rgba(0,0,0,.55);
    user-select:none;
    overflow:hidden;
}

.logo-mark-duo{
    font-size:calc(var(--logo-size, 48px) * .33);
    letter-spacing:.01em;
}

.logo-mark-suit svg{
    width:58%;
    height:58%;
    display:block;
    opacity:.94;
}

html[data-theme="light"] .logo-mark{
    background:linear-gradient(148deg,
        rgba(var(--accent-rgb,255,46,59),.96) 0%,
        rgba(var(--accent-rgb,255,46,59),.74) 100%);
    border-color:rgba(var(--accent-rgb,255,46,59),.55);
    text-shadow:0 1px 3px rgba(0,0,0,.35);
}

.club-title{
    font-weight:900;
    font-size:clamp(18px, 2.6vw, 44px);
    letter-spacing:.18em;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}

.top-center{
    justify-self:center;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.brand-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:var(--pill);
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft);
    white-space:nowrap;
}

.brand-pill .brand-dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--accent-soft);
    box-shadow: 0 0 14px rgba(var(--accent-soft-rgb,255,86,102),.55);
}
html[data-theme="light"] .brand-pill .brand-dot{
    box-shadow: 0 0 14px rgba(var(--accent-rgb,123,15,26),.22);
}

.brand-pill .brand-text{
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:12px;
    color:var(--text);
}

.top-right{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
    min-width:0;
}

/* Дубль бренда клуба в правом углу. Уходит, когда угол занят рекламой. */
.club-mirror{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.top-bar.has-ad-logo .club-mirror{ display:none; }

.status-chip{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:var(--pill);
    background:var(--chip-bg);
    border:1px solid var(--chip-br);
    color:var(--accent-soft);
    font-weight:900;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
}
.status-chip::before{
    content:"";
    width:10px;height:10px;border-radius:50%;
    background:var(--accent-soft);
    box-shadow: 0 0 14px rgba(var(--accent-soft-rgb,255,86,102),.55);
}
html[data-theme="light"] .status-chip::before{
    box-shadow: 0 0 12px rgba(var(--accent-rgb,123,15,26),.22);
}

.status-chip.closed{
    background:rgba(255,255,255,.06);
    border-color:var(--border);
    color:var(--text-muted);
}
.status-chip.closed::before{
    background:rgba(255,255,255,.30);
    box-shadow:none;
}

.btn-top{
    padding:10px 14px;
    border-radius:var(--pill);
    border:1px solid var(--border);
    background:rgba(255,255,255,.06);
    color:var(--text-muted);
    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:var(--shadow-soft);
    z-index: 10;
}
.btn-top:hover{ color:var(--text); border-color:rgba(255,255,255,.22); }

/* =========================
   MAIN GRID
   ========================= */
.main{
    min-height:0;
    display:grid;
    grid-template-columns: var(--side-w) 1fr var(--side-w);
    align-items:center;
    gap: var(--gap);
}

.col-side{
    width:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.col-left{ justify-self:start; }
.col-right{ justify-self:end; }

.card{
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 14px 14px;
    min-width:0;
}

.kv{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

.k{
    font-size:11px;
    font-weight:900;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--text-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.v{
    font-size: clamp(18px, 2.1vw, 34px);
    font-weight:1000;
    letter-spacing:.08em;
    font-variant-numeric: tabular-nums;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.v.small{
    font-size: clamp(16px, 1.8vw, 28px);
    letter-spacing:.06em;
}

.row-split{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    min-width:0;
}
.row-split .v{ min-width:0; }

/* =========================
   TIMER CENTER
   ========================= */
.col-center{
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    /* Центральная колонка держит addon/chip-race баннеры (они absolute внутри
       .timer-wrap). Без своего стек-контекста их z-index «заперт» внутри
       .timer-wrap и боковая колонка (.col-right идёт позже в DOM) перекрывает
       баннер. Поднимаем колонку над боковыми — баннер ложится поверх карточек. */
    position:relative;
    z-index:60;
}

.timer-wrap{
    width: var(--timer-size);
    height: var(--timer-size);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

#timer-ring{
    position:absolute;
    inset:0;
    transform:rotate(-90deg);
    z-index:10;
}

/* Свечение кольца. Раньше его давал CSS-фильтр drop-shadow на самом <svg>, но
   в WebKit (iPhone) фильтр рисуется в отдельный буфер, и по границе этого
   буфера вокруг круга проступал чёрный квадрат — особенно заметный, пока табло
   не подключилось и кольцо серое. Тот же ореол даёт box-shadow на круглой
   подложке: без фильтров и без квадрата, на ТВ вид прежний. */
.ring-glow{
    position:absolute;
    inset:4%;
    border-radius:50%;
    pointer-events:none;
    z-index:5;
    box-shadow: var(--ring-glow);
    transition: box-shadow .5s ease;
}
body.t-running  .ring-glow{ box-shadow: 0 0 40px rgba(var(--accent-soft-rgb,255,86,102),.55); }
body.t-soon     .ring-glow{ box-shadow: 0 0 50px rgba(var(--accent-rgb,255,46,59),.72); }
body.t-critical .ring-glow{ box-shadow: 0 0 62px rgba(var(--accent-rgb,255,46,59),.88); }
body.t-break    .ring-glow{ box-shadow: 0 0 30px rgba(var(--accent-soft-rgb,255,86,102),.40); }
body.tv-banner-fx .ring-glow{ opacity:.5; }

.ring-bg{
    fill:none;
    stroke: var(--ring-bg);
    stroke-width: 8;
}
.ring-fg{
    fill:none;
    stroke: var(--accent);
    stroke-width: 11;
    stroke-linecap:round;
    /* js.js двигает офсет раз в секунду (чаще ТВ не тянет) — транзишен на всю
       секунду превращает шаги в непрерывный ход стрелки */
    transition: stroke-dashoffset .95s linear;
}

.timer-label{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-align:center;
    padding: 0 18px;
    z-index:20;
}

.timer-level{
    font-size:12px;
    font-weight:900;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--text-muted);
    white-space:nowrap;
}

.timer-value{
    font-family: 'Saira', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight:800;
    letter-spacing:.06em;
    font-variant-numeric: tabular-nums;
    /* Размер цифр привязан к диаметру кольца (--timer-size), чтобы «00:00»
       гарантированно помещалось внутри окружности и не залезало на кольцо.
       Геометрический предел вписанной окружности ≈ 0.286·D; берём 0.21·D —
       явный зазор до кольца с запасом даже на широкий запасной шрифт
       (если локальный Saira не подгрузился) и длинные значения. */
    font-size: clamp(46px, calc(var(--timer-size) * 0.21), 168px);
    line-height:1;
    color:var(--text);
    text-shadow: 0 0 7px rgba(0,0,0,.92), 0 0 2px rgba(0,0,0,.92); /* digit outline */
}

/* =========================
   BLINDS
   ========================= */
.bottom{ min-height:0; }

.blinds-row{
    width:100%;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    align-items:stretch;
}

.blind-card{
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border:1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--shadow);
    padding: 16px 16px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:120px;
    text-align:center;
}

.blind-card-main{
    border-color: var(--chip-br);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb,255,46,59),.14), var(--shadow);
}
html[data-theme="light"] .blind-card-main{
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb,123,15,26),.10), var(--shadow);
}

.blind-label{
    font-size:12px !important;
    font-weight:900;
    letter-spacing:.30em;
    text-transform:uppercase;
    color:var(--text-muted);
}

.blind-value{
    font-size: clamp(30px, 5.8vw, 96px) !important;
    font-weight:1000;
    letter-spacing:.08em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-soft);
    line-height:1;
}

/* =========================
   LEGAL NOTE
   ========================= */
.legal-note{
    background: var(--legal-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    padding: 10px 14px;
    text-align:center;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing:.06em;
    color: var(--text-muted);
}

/* =========================
   CONTROL PANEL (Backdrops)
   ========================= */
.panel-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.62);
    opacity:0;
    pointer-events:none;
    transition:.18s ease;
    z-index:50;
}
@supports (backdrop-filter: blur(6px)){
    .panel-backdrop{ backdrop-filter: blur(6px); }
}
.panel-backdrop.visible{opacity:1;pointer-events:auto;}
.panel-backdrop.hidden{opacity:0;pointer-events:none;}

/* =========================
   CONTROL PANEL (Base)
   ========================= */
.control-panel{
    position:fixed;
    right:14px;
    top:14px;
    bottom:14px;
    width:min(760px, 92vw);

    background: linear-gradient(180deg, var(--panel-glass), var(--panel-glass-2));
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow: var(--shadow);

    transform:translateY(16px);
    opacity:0;
    pointer-events:none;
    transition:.18s ease;
    z-index:60;

    display:flex;
    flex-direction:column;
}

.control-panel.open{transform:translateY(0);opacity:1;pointer-events:auto;z-index: 1000;}
.control-panel.hidden{opacity:0;pointer-events:none;}

.panel-inner{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:16px;
    overflow:auto;
    z-index: 1111111111111111111;
}

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

.panel-title{
    font-size:12px;
    font-weight:1000;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.panel-close{
    background:none;
    border:none;
    color:var(--text-muted);
    font-size:30px;
    cursor:pointer;
    line-height:1;
}

.panel-section{
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    border-radius: 16px;
    padding: 14px;
}
html[data-theme="light"] .panel-section{
    border-color: rgba(11,14,20,.10);
    background: rgba(11,14,20,.03);
}

.panel-section-title{
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:12px;
}

.panel-buttons{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}

.panel-btn{
    border-radius:var(--pill);
    border:1px solid var(--border);
    background:rgba(255,255,255,.06);
    padding:12px 14px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    cursor:pointer;
    color:var(--text);
}
.panel-btn:hover{ border-color: rgba(255,255,255,.22); }

.panel-btn-main{
    background: rgba(var(--accent-rgb,255,46,59),.86);
    border-color: rgba(var(--accent-rgb,255,46,59),.55);
    color:#fff;
}
html[data-theme="light"] .panel-btn-main{
    background: rgba(var(--accent-rgb,123,15,26),.90);
    border-color: rgba(var(--accent-rgb,123,15,26),.45);
}
.panel-btn-secondary{ background: rgba(255,255,255,.08); }
.panel-btn-danger{
    border-color: rgba(192,57,43,.55);
    color: rgba(255,107,107,.92);
}

.panel-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    margin-bottom:10px;
}

.panel-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:11px;
    color:var(--text-muted);
}

.panel-field input{
    border-radius:var(--pill);
    border:1px solid var(--border);
    background:rgba(255,255,255,.06);
    color:var(--text);
    padding:11px 14px;
    font-size:13px;
    outline:none;
    font-variant-numeric: tabular-nums;
    transition: .15s ease;
}

.panel-field input:focus{
    border-color: rgba(var(--accent-rgb,255,46,59),.55);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb,255,46,59),.12);
}
html[data-theme="light"] .panel-field input:focus{
    border-color: rgba(var(--accent-rgb,123,15,26),.45);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb,123,15,26),.10);
}

.panel-break-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}

.panel-note{
    font-size:11px;
    color:var(--text-muted);
    opacity:.9;
    margin-top:6px;
}

/* rating list */
.rating-rules{display:flex;flex-direction:column;gap:6px;}
.rating-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:8px 0;
    font-size:12px;
}
html[data-theme="light"] .rating-row{ border-bottom-color: rgba(11,14,20,.10); }
.rating-row:last-child{border-bottom:none;}
.rating-place{opacity:.85;}
.rating-points{color:var(--accent-soft);font-weight:900;white-space:nowrap;}

/* =========================
   LEVELS EDITOR (PRO)
   ========================= */
.levels-editor{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    box-shadow:
            0 18px 50px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.06);

    overflow: auto;
    max-height: 52vh;
    scrollbar-gutter: stable both-edges;
    padding: 6px;
}

html[data-theme="light"] .levels-editor{
    background: linear-gradient(180deg, rgba(11,14,20,.04), rgba(11,14,20,.02));
    border-color: rgba(11,14,20,.12);
    box-shadow:
            0 16px 46px rgba(11,14,20,.12),
            inset 0 1px 0 rgba(255,255,255,.7);
}

.levels-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    min-width: 520px;
    table-layout: fixed;
}

.levels-table thead th{
    position: sticky;
    top: 0;
    z-index: 5;

    padding: 12px 12px;
    text-align: left;

    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);

    background: linear-gradient(180deg, rgba(18,18,30,.92), rgba(12,12,22,.86));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.levels-table thead th:first-child{ border-top-left-radius: 12px; }
.levels-table thead th:last-child{ border-top-right-radius: 12px; }

html[data-theme="light"] .levels-table thead th{
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,249,253,.88));
    border-bottom-color: rgba(11,14,20,.10);
}

.levels-table tbody td{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    vertical-align: middle;
}
html[data-theme="light"] .levels-table tbody td{
    border-bottom-color: rgba(11,14,20,.08);
}

.levels-table tbody tr:nth-child(odd){ background: rgba(255,255,255,.02); }
.levels-table tbody tr:hover{ background: rgba(var(--accent-rgb,255,46,59),.06); }
html[data-theme="light"] .levels-table tbody tr:nth-child(odd){ background: rgba(11,14,20,.02); }
html[data-theme="light"] .levels-table tbody tr:hover{ background: rgba(var(--accent-rgb,123,15,26),.06); }

.levels-table .lvl-col{ width: 56px; font-weight:1000; letter-spacing:.06em; color: var(--text); }
.levels-table th:nth-child(2), .levels-table td:nth-child(2){ width: 130px; }
.levels-table th:nth-child(3), .levels-table td:nth-child(3){ width: 130px; }
.levels-table th:nth-child(4), .levels-table td:nth-child(4){ width: 130px; }
.levels-table th:nth-child(5), .levels-table td:nth-child(5){ width: 96px; }

.levels-table input{
    width: 100%;
    height: 38px;

    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));

    color: var(--text);
    padding: 0 12px;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;

    outline: none;
    transition: .15s ease;
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06),
            0 10px 18px rgba(0,0,0,.18);
}

.levels-table input:hover{
    border-color: rgba(255,255,255,.22);
    transform: translateY(-1px);
}

.levels-table input:focus{
    border-color: rgba(var(--accent-rgb,255,46,59),.55);
    box-shadow:
            0 0 0 4px rgba(var(--accent-rgb,255,46,59),.14),
            inset 0 1px 0 rgba(255,255,255,.08),
            0 16px 26px rgba(0,0,0,.22);
    transform: translateY(-1px);
}

html[data-theme="light"] .levels-table input{
    border-color: rgba(11,14,20,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,248,253,.96));
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.8),
            0 10px 16px rgba(11,14,20,.08);
    color: rgba(11,14,20,.92);
}
html[data-theme="light"] .levels-table input:hover{ border-color: rgba(11,14,20,.22); }
html[data-theme="light"] .levels-table input:focus{
    border-color: rgba(var(--accent-rgb,123,15,26),.45);
    box-shadow:
            0 0 0 4px rgba(var(--accent-rgb,123,15,26),.10),
            inset 0 1px 0 rgba(255,255,255,.9),
            0 14px 22px rgba(11,14,20,.10);
}

.levels-table td:last-child input{ border-color: rgba(var(--accent-rgb,255,46,59),.18); }
html[data-theme="light"] .levels-table td:last-child input{ border-color: rgba(var(--accent-rgb,123,15,26),.18); }

/* =========================
   TV / LOW HEIGHT SAFETY
   ========================= */
@media (min-width: 901px) and (max-height: 820px){
    :root{
        --gap: 12px;
        --timer-size: min(60vmin, 52vh, 600px);
        --side-w: min(400px, 26vw);
    }
    .top-bar{ min-height: 56px; }
    .logo{ --logo-size:42px; }
    .btn-top, .status-chip{ padding:8px 12px; font-size:11px; }
    .k{ font-size:10px; }
    .v{ font-size: clamp(16px, 1.9vw, 30px); }
    .timer-value{ font-size: clamp(46px, calc(var(--timer-size) * 0.21), 168px); }
    .blind-card{ min-height: 104px; padding: 14px 14px 16px; }
    .blind-label{ font-size:11px !important; }
    .blind-value{ font-size: clamp(28px, 5.0vw, 84px) !important; }
}

@media (min-width: 901px) and (max-height: 720px){
    :root{
        --gap: 10px;
        --timer-size: min(56vmin, 48vh, 550px);
        --side-w: min(380px, 28vw);
    }
    .timer-value{ font-size: clamp(46px, calc(var(--timer-size) * 0.21), 168px); }
    .blind-value{ font-size: clamp(26px, 4.6vw, 74px) !important; }
    .legal-note{ font-size:11px; }
}

/* Низкий экран (720p-ТВ, ТВ-приставки, проекторы): доску целиком ужимает
   fitToScreen, и каждый лишний пиксель колонки — это минус масштаб ВСЕЙ доски,
   то есть более мелкие цифры в зале. Поэтому на низких экранах боковые блоки
   плотнее, а оба QR (наш и рекламный) ограничены по высоте экрана. Замер на
   1280×720 с рекламой и QR: масштаб был 0.58, стал 0.82. */
@media (min-width: 901px) and (max-height: 800px){
    .col-side .card{ padding:10px 12px; }
    .col-side .card .kv{ gap:2px; }
    .tb-qr-box{
        width: calc(min(120px, 15vh) * var(--bs, 1));
        height: calc(min(120px, 15vh) * var(--bs, 1));
    }
    .card-bzone .bzone-qr{ max-width:min(100%, 20vh); padding:1vh; }
    .bzone-qr-sub{ margin-top:.5vh; font-size:clamp(11px,1.8vh,20px); }
    .legal-note{ padding:7px 12px; }
}

/* Big TV (1080p fullscreen) — reduce padding & sizes */
@media (min-width: 1400px) and (min-height: 800px){
    :root{
        --pad-x: 14px;
        --pad-y: 10px;
        --gap: 12px;

        --side-w: min(360px, 20vw);
        --timer-size: min(54vmin, 50vh, 560px);
    }

    .top-bar{ min-height: 56px; }
    .logo{ --logo-size:40px; }

    .club-title{
        font-size: clamp(16px, 1.9vw, 34px);
        letter-spacing: .14em;
    }

    .brand-pill{ padding: 8px 12px; }
    .brand-pill .brand-text{ font-size: 11px; letter-spacing: .12em; }

    .status-chip, .btn-top{
        padding: 8px 12px;
        font-size: 11px;
    }

    .card{ padding: 12px 12px; }
    .k{ font-size: 10px; }
    .v{ font-size: clamp(16px, 1.6vw, 28px); }
    .v.small{ font-size: clamp(14px, 1.4vw, 22px); }

    .timer-label{ gap: 10px; }
    .timer-level{ font-size: 11px; letter-spacing: .22em; }
    .timer-value{ font-size: clamp(46px, calc(var(--timer-size) * 0.21), 168px); }

    .blind-card{
        min-height: 98px;
        padding: 12px 12px 14px;
        gap: 8px;
    }
    .blind-label{ font-size: 11px !important; }
    .blind-value{ font-size: clamp(26px, 4.6vw, 78px) !important; }

    .legal-note{
        font-size: 11px;
        padding: 8px 12px;
    }

    .control-panel{
        width: min(820px, 92vw);
    }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 900px){
    body{ overflow:auto; }

    .root{
        height:auto;
        min-height:100vh;
        min-height:100dvh;
        /* На мобиле — простой flex-столбец: ровные отступы и свободный порядок
           блоков (таймер/блайнды наверх) без мусорных грид-разрывов. */
        display:flex;
        flex-direction:column;

        padding:
                calc(12px + env(safe-area-inset-top))
                calc(14px + env(safe-area-inset-right))
                calc(14px + env(safe-area-inset-bottom))
                calc(14px + env(safe-area-inset-left));
        gap:12px;
    }

    /* Шапка на телефоне — ОДНА строка: слева знак и имя клуба, справа бренд.
       Столбцом она занимала три строки и съедала экран, хотя всё помещается.
       Дубль имени клуба в правом углу (.club-mirror) на узком экране убран: он
       и есть третья строка, а на телефоне повторять название незачем. */
    .top-bar{
        position:relative;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        min-height:unset;
    }
    /* Бренд держим по центру ЭКРАНА, а не по остатку между блоками: слева
       знак с названием, справа только знак — при space-between надпись уезжала
       вправо от середины, и шапка читалась как перекошенная. */
    .top-center{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        justify-self:auto;
        flex:0 0 auto;
        flex-wrap:nowrap;
        justify-content:center;
    }
    /* Левому блоку — ровно половина минус бренд: длинное имя клуба ужимается
       многоточием, но под бренд не залезает. */
    .top-left{ justify-self:start; flex:0 1 auto; min-width:0; gap:8px; max-width:calc(50% - 62px); }
    .top-right{ justify-self:auto; flex:0 0 auto; justify-content:flex-end; }
    .club-title{ font-size:16px; letter-spacing:.14em; }
    /* Знак клуба в правом углу остаётся (симметрия шапки), уходит только дубль
       названия — именно он и не давал шапке уместиться в строку. */
    .club-mirror .club-title{ display:none; }
    .logo{ --logo-size:34px; }
    /* Проданная плита рекламодателя шире бренда — ей отдельная строка. */
    .top-bar.has-ad-logo{ flex-wrap:wrap; }
    .top-bar.has-ad-logo .top-right{ flex:1 0 100%; justify-content:flex-start; }
    /* Шапка на телефоне — левый столбец, поэтому и плита рекламы выключена влево.
       Строка та же, что на ТВ, только прижата к левому краю и по ширине контента:
       --side-w в мобильной раскладке не участвует. */
    .top-right .bzone-slot--logo{
        justify-content:flex-start;
        width:auto; max-width:100%;
    }
    .top-right .bzone-slot--logo img{ flex:0 1 auto; object-position:left center; }
    .top-right .bzone-slot--logo + .bzone-slot--logo{ margin-left:1.2vw; }

    .main{
        grid-template-columns: 1fr;
        gap:12px;
        align-items:start;
    }
    .col-left, .col-right{ width:100%; }
    /* Мобильная раскладка: колонки → прямые элементы .root (свободный порядок),
       таймер и блайнды выносим наверх — их смотрят чаще всего. */
    .main{ display: contents; }
    .col-center{ order: 1; }   /* таймер — первым */
    .bottom{ order: 2; }       /* блайнды — сразу под таймером */
    .col-left{ order: 3; }     /* след. уровень / перерыв / поздняя рега */
    .col-right{ order: 4; }    /* статистика */
    /* Без своего order бегущая строка (order:0) вставала СРАЗУ под шапкой,
       выше таймера. Её место — над дисклеймером, как на ТВ. */
    .bzone-ticker{ order: 5; }
    .legal-note{ order: 6; }

    :root{ --timer-size: min(78vw, 400px); }

    .blinds-row{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap:10px;
    }

    /* Mobile panel: almost fullscreen */
    .control-panel{
        left:0; right:0; top:auto; bottom:0;
        width:100vw;
        max-height: 94dvh;
        border-radius:22px 22px 0 0;
    }

    .panel-inner{
        padding:
                14px
                calc(14px + env(safe-area-inset-right))
                calc(18px + env(safe-area-inset-bottom))
                calc(14px + env(safe-area-inset-left));
        gap:14px;
    }

    /* sticky header inside panel */
    .panel-header{
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 10px 10px;
        margin: -6px -6px 8px -6px;
        border-radius: 16px;

        background: rgba(15,15,26,.88);
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    html[data-theme="light"] .panel-header{
        background: rgba(255,255,255,.88);
        border-color: rgba(11,14,20,.10);
    }

    .panel-buttons{ grid-template-columns: 1fr; }
    .panel-btn{ padding: 13px 14px; font-size: 11px; }

    .levels-editor{ max-height: 56dvh; }
    .levels-table{ min-width: 560px; } /* горизонтальный скролл на мобиле — нормально */

    /* Кнопка разблокировки звука (JS-инлайн top:18px по центру) на телефоне
       перекрывала логотип/название в шапке — уводим её вниз. */
    .cc-au-btn{
        top:auto !important;
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 420px){
    .btn-top, .status-chip{ font-size:10px; padding:8px 11px; }
    .brand-pill{ padding:8px 12px; }
    .brand-pill .brand-text{ font-size:11px; }
}
/* =========================
   ADDON BANNER (TV BIG)
   ========================= */

.addon-banner{
    position:absolute;
    left:50%;
    top: 82%;
    transform: translateX(-50%);
    width: min(1000px, 92vw);
    padding: 26px 30px 24px;
    border-radius: 26px;
    text-align:center;
    z-index: 2147483647; /* ADDON TIME — выше всех (главнее chip-race) */

    /* Цвета — из темы клуба (owner THEME_ACCENT → --accent-*). Фолбэки — red luxe. */
    background:
        radial-gradient(130% 190% at 50% -20%, rgba(var(--accent-rgb,255,46,59),.16), transparent 56%),
        linear-gradient(180deg, rgba(18,18,25,.985), rgba(9,9,14,.975));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(var(--accent-soft-rgb,255,80,110), .34);
    box-shadow:
            0 30px 90px rgba(0,0,0,.66),
            0 0 0 1px rgba(255,255,255,.05) inset,
            0 1px 0 rgba(255,255,255,.08) inset;

    opacity: 0;
    pointer-events:none;
    transition: opacity .3s ease;
}
/* тонкая акцентная линия-хайлайт по верхней кромке */
.addon-banner::before{
    content:"";
    position:absolute; left:14%; right:14%; top:0; height:2px; border-radius:2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-soft-rgb,255,80,110),.95), transparent);
    opacity:.85; pointer-events:none;
}
/* мягкий пульсирующий ореол за баннером (анимируем opacity/transform — дёшево для ТВ) */
.addon-banner::after{
    content:"";
    position:absolute; left:50%; top:44%; width:126%; height:170%;
    transform: translate(-50%,-50%);
    z-index:-1; pointer-events:none;
    background: radial-gradient(closest-side, rgba(var(--accent-rgb,255,46,59),.40), transparent 72%);
    opacity:0;
}

.addon-banner.is-on{
    opacity: 1;
    animation: addonReveal .72s cubic-bezier(.16,1,.3,1) both;
}
.addon-banner.is-on::after{
    opacity:.5; /* мягкое статичное свечение, без пульсации */
}

/* Заголовок — сдержанный luxe-чип: тёмное стекло, тонкий акцентный контур,
   белый текст с мягким акцентным свечением. Без глянца/градиента-«кнопки»
   (2010-е казино), чтобы читалось дорого и выделялось на янтарном перерыве. */
.addon-badge{
    position: relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 16px;

    padding: 15px 34px;
    border-radius: 999px;

    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: clamp(22px, 2.6vw, 42px);
    line-height: 1;

    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
        rgba(var(--accent-rgb,247,169,36), .10);
    border: 1px solid rgba(var(--accent-rgb,247,169,36), .55);
    box-shadow:
            0 0 0 1px rgba(0,0,0,.30) inset,
            0 14px 46px rgba(var(--accent-rgb,247,169,36), .14);
    text-shadow: 0 0 20px rgba(var(--accent-rgb,247,169,36), .55), 0 2px 6px rgba(0,0,0,.5);
}

/* SVG-иконка (стопка фишек) — в акцентном цвете с мягким свечением */
.addon-badge__ic{
    display:inline-flex; width:1.05em; height:1.05em; flex:0 0 auto;
    color: var(--accent, #f7a924);
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb,247,169,36), .55));
}
.addon-badge__ic svg{ width:100%; height:100%; display:block; }
.addon-badge__txt{ display:inline-block; }

/* Подзаголовок */
.addon-sub{
    margin-top: 16px;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.3;
    color: rgba(255,255,255,.78);
    text-shadow: 0 10px 24px rgba(0,0,0,.6);
}

/* ОСТАВШЕЕСЯ ВРЕМЯ — крупная пилюля в цвете темы */
#addon-left{
    display:inline-block;
    margin-left: 8px;

    font-weight: 1000;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;

    font-size: clamp(22px, 2.4vw, 34px);
    color: #fff;

    background: rgba(var(--accent-rgb,255,46,59), .16);
    border: 1px solid rgba(var(--accent-soft-rgb,255,80,110), .34);
    padding: 5px 14px;
    border-radius: 12px;
    box-shadow:
            0 10px 30px rgba(var(--accent-rgb,255,46,59), .20),
            0 0 24px rgba(var(--accent-rgb,255,46,59), .16);
}

/* Последние 60 сек — усиливаем тем же цветом темы (быстрее ореол + пульс) */
/* Последние 60 сек — только чуть ярче контур и свечение, БЕЗ пульсации */
.addon-banner.is-urgent{ border-color: rgba(var(--accent-soft-rgb,255,80,110), .62); }
.addon-banner.is-urgent.is-on::after{ opacity:.7; }

/* ===== keyframes баннера ADDON ===== */
@keyframes addonReveal{
    0%{   opacity:0; transform:translateX(-50%) translateY(26px) scale(.9); filter:blur(7px); }
    55%{  opacity:1; filter:blur(0); }
    100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); filter:blur(0); }
}
@keyframes addonAura{
    0%,100%{ opacity:.28; transform:translate(-50%,-50%) scale(.97); }
    50%{     opacity:.72; transform:translate(-50%,-50%) scale(1.04); }
}
@keyframes addonSheen{
    0%{        transform:translateX(-130%); }
    26%,100%{  transform:translateX(130%); }
}
@keyframes addonChip{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{     transform:translateY(-2.5px) rotate(-8deg); }
}
@keyframes addonLeftPulse{
    0%,100%{ transform:scale(1);    box-shadow:0 10px 30px rgba(var(--accent-rgb,255,46,59),.20), 0 0 24px rgba(var(--accent-rgb,255,46,59),.16); }
    50%{     transform:scale(1.06); box-shadow:0 10px 30px rgba(var(--accent-rgb,255,46,59),.30), 0 0 40px rgba(var(--accent-rgb,255,46,59),.36); }
}
@keyframes badgePulse{
    0%,100%{ transform:scale(1); }
    50%{     transform:scale(1.035); }
}
@media (prefers-reduced-motion: reduce){
    .addon-banner.is-on,
    .addon-banner.is-on::after,
    .addon-banner.is-on .addon-badge::after,
    .addon-banner.is-on .addon-badge__ic,
    .addon-banner.is-urgent.is-on::after,
    .addon-banner.is-urgent #addon-left,
    .addon-banner.is-urgent .addon-badge{ animation:none !important; }
    .addon-banner::after{ opacity:.4; }
}

/* Очень большие ТВ/проектор — ещё больше */
@media (min-width: 1400px){
    .addon-banner{
        top: 74%;
        width: min(1200px, 92vw);
        padding: 26px 32px;
        border-radius: 26px;
    }
    .addon-sub{ font-size: 22px; }
    #addon-left{ font-size: 36px; }
}

/* Мобила — не перекрывать всё */
@media (max-width: 520px){
    .addon-banner{
        top: 80%;
        width: 94vw;
        padding: 14px 14px;
        border-radius: 16px;
    }
}
/* =========================
   PANEL SWITCH (Addon toggle)
   ========================= */

.panel-switch{
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    cursor: pointer;
    user-select: none;
}

html[data-theme="light"] .panel-switch{
    border-color: rgba(11,14,20,.10);
    background: rgba(11,14,20,.03);
}

.panel-switch input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* “тумблер” */
.panel-switch .switch-ui{
    width: 54px;
    height: 30px;
    border-radius: 999px;
    position: relative;
    flex: 0 0 auto;

    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06),
            0 10px 18px rgba(0,0,0,.18);

    transition: .18s ease;
}

html[data-theme="light"] .panel-switch .switch-ui{
    background: rgba(11,14,20,.06);
    border-color: rgba(11,14,20,.16);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.8),
            0 10px 16px rgba(11,14,20,.08);
}

/* “кнопка” внутри */
.panel-switch .switch-ui::after{
    content:"";
    position: absolute;
    top: 50%;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    transform: translateY(-50%);

    background: rgba(255,255,255,.92);
    box-shadow:
            0 10px 18px rgba(0,0,0,.25),
            inset 0 1px 0 rgba(255,255,255,.65);

    transition: .18s ease;
}

/* подсветка как “акцент” */
.panel-switch input:checked + .switch-ui{
    background: rgba(var(--accent-rgb,255,46,59),.18);
    border-color: rgba(var(--accent-rgb,255,46,59),.42);
    box-shadow:
            0 0 0 4px rgba(var(--accent-rgb,255,46,59),.10),
            0 16px 26px rgba(0,0,0,.22);
}

html[data-theme="light"] .panel-switch input:checked + .switch-ui{
    background: rgba(var(--accent-rgb,123,15,26),.12);
    border-color: rgba(var(--accent-rgb,123,15,26),.32);
    box-shadow:
            0 0 0 4px rgba(var(--accent-rgb,123,15,26),.08),
            0 14px 22px rgba(11,14,20,.10);
}

.panel-switch input:checked + .switch-ui::after{
    left: calc(100% - 4px - 22px);
}

/* текст */
.panel-switch .switch-text{
    margin: 0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--text);
    opacity: .92;
}

/* hover/focus */
.panel-switch:hover{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
}

html[data-theme="light"] .panel-switch:hover{
    border-color: rgba(11,14,20,.16);
    background: rgba(11,14,20,.04);
}

.panel-switch:has(input:focus-visible){
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb,255,46,59),.12);
}

html[data-theme="light"] .panel-switch:has(input:focus-visible){
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb,123,15,26),.10);
}
/* =========================
   CHIPRACE BANNER (BIG SCREEN)
   ========================= */

.chiprace-banner{
    position:absolute;
    left:50%;
    top:78%;
    transform:translateX(-50%) scale(.96);
    width:min(1180px, 90vw);
    padding:34px 38px;
    border-radius:30px;
    text-align:center;
    z-index:2147483646; /* CHIP RACE — выше всего, кроме addon-баннера */

    background:
            radial-gradient(120% 180% at 50% 0%, rgba(var(--accent-rgb,255,70,90),.20) 0%, rgba(var(--accent-rgb,255,70,90),.08) 34%, rgba(12,12,18,.92) 100%),
            linear-gradient(180deg, rgba(20,20,28,.94), rgba(10,10,14,.92));

    border:1px solid rgba(255,255,255,.10);
    box-shadow:
            0 36px 120px rgba(0,0,0,.72),
            0 0 0 1px rgba(255,255,255,.04) inset,
            0 0 90px rgba(255,40,70,.22);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    opacity:0;
    pointer-events:none;
    transition:
            opacity .28s ease,
            transform .28s ease,
            box-shadow .28s ease;
}

.chiprace-banner.is-on{
    opacity:1;
    transform:translateX(-50%) scale(1);
}

/* ===== Приглушение фона при всплытии баннеров ADDON / CHIP RACE =====
   На табло много визуала (кольцо, блайнды, боковые карточки) — при всплытии
   баннера мягко уводим их назад (прозрачность + лёгкий blur), чтобы баннер
   читался сразу. Сами баннеры не трогаем. Два уровня: боковое/блайнды/легал —
   сильнее; центральный отсчёт — мягче, чтобы время перерыва осталось читаемым.
   Плавно и «чуть». Включается классом body.tv-banner-fx (js.js). */
.col-side, .blinds-row, .legal-note,
#timer-ring, .timer-level, .timer-value, .level-progress{
    transition: opacity .3s ease, filter .3s ease;
}
body.tv-banner-fx .col-side,
body.tv-banner-fx .blinds-row,
body.tv-banner-fx .legal-note{
    opacity:.24;
    filter: blur(2.5px) saturate(.85);
}
body.tv-banner-fx #timer-ring,
body.tv-banner-fx .timer-level,
body.tv-banner-fx .timer-value,
body.tv-banner-fx .level-progress{
    opacity:.5;
    filter: blur(1px) saturate(.9);
}
@media (prefers-reduced-motion: reduce){
    .col-side, .blinds-row, .legal-note,
    #timer-ring, .timer-level, .timer-value, .level-progress{ transition:none; }
}

/* Тот же luxe-чип, что у ADDON: тёмное стекло, тонкий акцентный контур,
   белый текст с мягким свечением, акцентная иконка. Без глянца-«кнопки». */
.chiprace-banner__badge{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:18px;
    padding:11px 24px;
    border-radius:999px;

    font-size:clamp(15px, 1.4vw, 22px);
    font-weight:900;
    letter-spacing:0.14em;
    text-transform:uppercase;
    line-height:1;
    color:#fff;

    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
        rgba(12,12,16,.48);
    border:1px solid rgba(var(--accent-rgb,247,169,36),.55);
    box-shadow:
            0 0 0 1px rgba(0,0,0,.30) inset,
            0 12px 40px rgba(var(--accent-rgb,247,169,36),.14);
    text-shadow:0 0 16px rgba(var(--accent-rgb,247,169,36),.45), 0 2px 5px rgba(0,0,0,.5);
}
.chiprace-banner__badge svg{
    width:1.15em; height:1.15em; flex:0 0 auto;
    color:var(--accent, #f7a924);
    filter:drop-shadow(0 0 10px rgba(var(--accent-rgb,247,169,36),.5));
}

.chiprace-banner__title{
    font-size:clamp(34px, 3.6vw, 62px);
    line-height:1.04;
    font-weight:1000;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#fff;
    text-shadow:0 12px 34px rgba(0,0,0,.60);
}

.chiprace-banner__text{
    margin-top:16px;
    font-size:clamp(18px, 1.7vw, 30px);
    line-height:1.35;
    font-weight:800;
    letter-spacing:.03em;
    color:rgba(255,255,255,.78);
    text-shadow:0 8px 24px rgba(0,0,0,.45);
}

html[data-theme="light"] .chiprace-banner{
    background:
            radial-gradient(120% 180% at 50% 0%, rgba(var(--accent-rgb,123,15,26),.12) 0%, rgba(var(--accent-rgb,123,15,26),.05) 34%, rgba(255,255,255,.96) 100%),
            linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,247,251,.95));
    border-color:rgba(11,14,20,.10);
    box-shadow:
            0 24px 80px rgba(11,14,20,.18),
            0 0 0 1px rgba(255,255,255,.65) inset,
            0 0 60px rgba(var(--accent-rgb,123,15,26),.10);
}

html[data-theme="light"] .chiprace-banner__title{
    color:rgba(11,14,20,.96);
    text-shadow:none;
}

html[data-theme="light"] .chiprace-banner__text{
    color:rgba(11,14,20,.70);
    text-shadow:none;
}

@keyframes chipracePulse{
    0%,100%{
        box-shadow:
                0 36px 120px rgba(0,0,0,.72),
                0 0 0 1px rgba(255,255,255,.04) inset,
                0 0 90px rgba(255,40,70,.18);
    }
    50%{
        box-shadow:
                0 42px 130px rgba(0,0,0,.76),
                0 0 0 1px rgba(255,255,255,.05) inset,
                0 0 120px rgba(255,40,70,.28);
    }
}

@media (min-width: 1400px){
    .chiprace-banner{
        top:76%;
        width:min(1320px, 88vw);
        padding:40px 46px;
        border-radius:34px;
    }

    .chiprace-banner__title{
        font-size:clamp(42px, 3.8vw, 72px);
    }

    .chiprace-banner__text{
        font-size:clamp(22px, 1.8vw, 34px);
    }
}

@media (max-width: 900px){
    .chiprace-banner{
        width:94vw;
        padding:22px 18px;
        border-radius:22px;
        top:82%;
    }

    .chiprace-banner__badge{
        margin-bottom:12px;
        padding:10px 14px;
        letter-spacing:.16em;
    }

    .chiprace-banner__title{
        font-size:clamp(26px, 8vw, 40px);
    }

    .chiprace-banner__text{
        margin-top:12px;
        font-size:clamp(15px, 4.2vw, 20px);
        line-height:1.3;
    }
}.panel-switch-compact{
     margin-top:8px;
     padding:10px 12px;
 }

.panel-switch-compact .switch-text{
    font-size:11px;
    letter-spacing:.08em;
}

/* =========================
   REDESIGN 2026 — main screen polish
   ========================= */

/* run-state chip (ИДЁТ / ПАУЗА / ПЕРЕРЫВ) */
.run-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:var(--pill);
    font-weight:1000;
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    white-space:nowrap;
    border:1px solid var(--border);
    background:rgba(255,255,255,.06);
    color:var(--text-muted);
    box-shadow:var(--shadow-soft);
}
.run-chip::before{
    content:"";
    width:9px;height:9px;border-radius:50%;
    background:currentColor;
    box-shadow:0 0 12px currentColor;
}
.run-chip[data-state="run"]{
    color:#27d07a;
    border-color:rgba(39,208,122,.42);
    background:rgba(39,208,122,.12);
}
.run-chip[data-state="pause"]{
    color:var(--text-muted);
    background:rgba(255,255,255,.06);
}
.run-chip[data-state="pause"]::before{ box-shadow:none; opacity:.7; }
.run-chip[data-state="break"]{
    color:var(--accent-soft);
    border-color:var(--chip-br);
    background:var(--chip-bg);
}

/* акцентная карточка текущего уровня */
.card-accent{
    border-color:var(--chip-br);
    background:
        radial-gradient(140% 120% at 0% 0%, var(--chip-bg) 0%, transparent 60%),
        linear-gradient(180deg, var(--card-2), var(--card));
}
.level-counter{
    display:inline-flex;
    align-items:baseline;
    gap:6px;
}
.level-counter #info-level-current{ color:var(--accent-soft); }
.level-counter .level-sep{ color:var(--text-muted); font-weight:800; opacity:.7; }
.level-counter #info-level-total{ color:var(--text-muted); font-size:.66em; }

/* линейный прогресс уровня под таймером */
.level-progress{
    width:min(62%, 320px);
    height:8px;
    border-radius:999px;
    background:var(--ring-bg);
    overflow:hidden;
    margin-top:2px;
    border:1px solid var(--border);
}
.level-progress #level-progress-bar{
    display:block;
    height:100%;
    width:100%;
    border-radius:999px;
    background:linear-gradient(90deg, var(--accent), var(--accent-soft));
    box-shadow:0 0 18px rgba(var(--accent-soft-rgb,255,80,110),.45);
    /* заполнение через scaleX, а не width: транзишен идёт в компоузере и не
       заставляет ТВ делать layout+paint на каждом кадре анимации */
    transform-origin:0 50%;
    transform:scaleX(1);
    transition:transform .95s linear;
}
html[data-theme="light"] .level-progress #level-progress-bar{
    box-shadow:0 0 14px rgba(var(--accent-rgb,123,15,26),.28);
}

/* центральная подпись уровня — пилюлей */
.timer-level{
    padding:6px 16px;
    border-radius:var(--pill);
    background:rgba(255,255,255,.05);
    border:1px solid var(--border);
}
html[data-theme="light"] .timer-level{ background:rgba(11,14,20,.04); }

/* блайнды — главный BB чуть выразительнее */
.blind-card-main{
    background:
        radial-gradient(120% 140% at 50% 0%, var(--chip-bg) 0%, transparent 55%),
        linear-gradient(180deg, var(--card-2), var(--card));
}
.blind-card-main .blind-label{ color:var(--accent-soft); opacity:.9; }

@media (max-width: 900px){
    .level-progress{ width:72%; }
}
/* ============================================================
   MOTION SYSTEM 2026 — premium animations (all clubs)
   Accent-driven via --accent / --accent-rgb fallbacks, so every
   club's THEME_ACCENT colours the motion automatically. Urgency
   is read through MOTION (pulse/heartbeat/shockwave), not just a
   colour switch, so it works for red, gold, blue ... clubs alike.
   ============================================================ */

:root{
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---- ambient: slow drifting accent aura behind everything ---- */
body::before{
    content:"";
    position:fixed;
    inset:-25%;
    z-index:-2;
    pointer-events:none;
    /* Мягкость даём размером самих градиентов, БЕЗ filter:blur — GPU-блюр слоя
       в полтора экрана пересчитывался на каждом кадре дрейфа и съедал память
       ТВ-браузера. Транформ-анимация без фильтра композитится бесплатно. */
    background:
        radial-gradient(52% 52% at 28% 30%, rgba(var(--accent-rgb,255,46,59),.11), transparent 68%),
        radial-gradient(56% 56% at 76% 72%, rgba(var(--accent-soft-rgb,255,86,102),.09), transparent 68%);
    will-change: transform;
    animation: ccDrift 26s ease-in-out infinite alternate;
}
html[data-theme="light"] body::before{
    background:
        radial-gradient(52% 52% at 28% 30%, rgba(var(--accent-rgb,123,15,26),.09), transparent 68%),
        radial-gradient(56% 56% at 76% 72%, rgba(var(--accent-rgb,123,15,26),.05), transparent 68%);
}
@keyframes ccDrift{
    0%{ transform: translate3d(-3%,-2%,0) scale(1.05); }
    100%{ transform: translate3d(4%,3%,0) scale(1.16); }
}

/* ---- fx overlay layer (edge vignette + level flash) ---- */
#cc-fx{
    position:fixed;
    inset:0;
    z-index:6;
    pointer-events:none;
}
#cc-fx::before,
#cc-fx::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
}
/* urgency edge vignette */
#cc-fx::before{
    background: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(var(--accent-rgb,255,46,59),.30) 100%);
    transition: opacity .5s ease;
}
/* Пульс виньетки — только opacity: анимация transform+filter на полноэкранном
   слое перерисовывала весь экран каждый кадр, opacity едет в компоузере даром */
body.t-soon #cc-fx::before{
    opacity:.5;
    animation: ccVignetteSoon 1.8s ease-in-out infinite;
}
body.t-critical #cc-fx::before{
    opacity:.92;
    animation: ccVignetteCrit .8s ease-in-out infinite;
}
@keyframes ccVignetteSoon{
    0%,100%{ opacity:.5; }
    50%{ opacity:.28; }
}
@keyframes ccVignetteCrit{
    0%,100%{ opacity:.92; }
    50%{ opacity:.58; }
}
/* level-change flash (white core + accent bloom, centred on the dial) */
#cc-fx::after{
    background:
        radial-gradient(circle at 50% 46%, rgba(255,255,255,.22), transparent 42%),
        radial-gradient(circle at 50% 46%, rgba(var(--accent-rgb,255,46,59),.30), transparent 60%);
}
body.level-flash #cc-fx::after{
    animation: ccFlash .75s ease-out;
}
@keyframes ccFlash{
    0%{ opacity:0; transform: scale(.6); }
    18%{ opacity:1; }
    100%{ opacity:0; transform: scale(1.25); }
}

/* ============================================================
   BOOT ENTRANCE — staggered rise on load
   ============================================================ */
@keyframes ccRise{
    from{ opacity:0; transform: translateY(20px) scale(.985); }
    to{ opacity:1; transform: none; }
}
@keyframes ccTimerIn{
    from{ opacity:0; transform: scale(.84); }
    to{ opacity:1; transform: none; }
}

.top-bar{ animation: ccRise .55s var(--ease-out) both; }

.col-side .card{ animation: ccRise .55s var(--ease-out) both; }
.col-left  .card:nth-child(1){ animation-delay:.04s; }
.col-left  .card:nth-child(2){ animation-delay:.10s; }
.col-left  .card:nth-child(3){ animation-delay:.16s; }
.col-left  .card:nth-child(4){ animation-delay:.22s; }
.col-right .card:nth-child(1){ animation-delay:.10s; }
.col-right .card:nth-child(2){ animation-delay:.16s; }
.col-right .card:nth-child(3){ animation-delay:.22s; }

.col-center .timer-wrap{ animation: ccTimerIn .8s var(--ease-spring) both; animation-delay:.12s; }

.blinds-row .blind-card{ animation: ccRise .6s var(--ease-out) both; }
.blinds-row .blind-card:nth-child(1){ animation-delay:.26s; }
.blinds-row .blind-card:nth-child(2){ animation-delay:.32s; }
.blinds-row .blind-card:nth-child(3){ animation-delay:.38s; }

.legal-note{ animation: ccRise .6s var(--ease-out) both; animation-delay:.42s; }

/* ============================================================
   THE RING — comet head + living glow
   ============================================================ */
.ring-fg{ will-change: stroke-dashoffset; }

.ring-head{
    fill: var(--accent-soft);
    opacity:0;
    transition: opacity .35s ease;
    filter: drop-shadow(0 0 6px rgba(var(--accent-soft-rgb,255,86,102),.95));
}
body.t-running .ring-head{ opacity:1; }
body.t-critical .ring-head{ filter: drop-shadow(0 0 12px rgba(var(--accent-rgb,255,46,59),1)); }

/* steady glow that intensifies with urgency (no pulsation) — состояния живут
   на .ring-glow (см. рядом с #timer-ring): фильтры с кольца сняты. */

/* level-change shockwave — double ripple radiating from the dial */
/* will-change:transform здесь убран: в WebKit (iPhone) он поднимает .timer-wrap
   в отдельный слой, и слой рисуется квадратом — вокруг кольца видна квадратная
   рамка, обрезающая свечение. Анимации ccTimerIn/ccHeartbeat работают и без
   подсказки, на ТВ (Chrome/Chromium) разницы нет. */
.timer-wrap::before,
.timer-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:5;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
}
.timer-wrap.level-burst::before,
.timer-wrap.level-burst::after{
    border:2px solid rgba(var(--accent-soft-rgb,255,86,102),.7);
    box-shadow: 0 0 30px rgba(var(--accent-rgb,255,46,59),.5);
    animation: ccShock .85s var(--ease-out);
}
.timer-wrap.level-burst::after{ animation-delay:.12s; }
@keyframes ccShock{
    0%{ opacity:.75; transform: scale(.92); }
    100%{ opacity:0; transform: scale(1.7); }
}

/* heartbeat of the whole dial in the final seconds */
body.t-critical .timer-wrap{ animation: ccHeartbeat .8s ease-in-out infinite; }
@keyframes ccHeartbeat{
    0%,100%{ transform: scale(1); }
    50%{ transform: scale(1.015); }
}

/* ============================================================
   TIMER DIGITS — urgency + per-second tick
   ============================================================ */
.timer-value{ will-change: transform; }
.timer-value.tick{ animation: ccTick .5s var(--ease-out); }
@keyframes ccTick{
    0%{ transform: scale(1); }
    22%{ transform: scale(1.075); }
    100%{ transform: scale(1); }
}

/* level pill — shine sweep on level change */
.timer-level{ position:relative; overflow:hidden; }
.timer-level.sweep::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.38) 50%, transparent 68%);
    transform: translateX(-120%);
    animation: ccSweep .8s ease;
}
@keyframes ccSweep{ to{ transform: translateX(120%); } }

/* level counter pop */
#info-level-current{ display:inline-block; }
#info-level-current.pop{ animation: ccPop .6s var(--ease-spring); }
@keyframes ccPop{
    0%{ transform: scale(1); }
    30%{ transform: scale(1.28); }
    100%{ transform: scale(1); }
}

/* ============================================================
   BLINDS — swap-in + accent flash on the BB card
   ============================================================ */
.blind-value{ display:inline-block; }
.blind-value.swap{ animation: ccSwap .5s var(--ease-out); }
@keyframes ccSwap{
    0%{ opacity:0; transform: translateY(.32em) scale(.9); filter: blur(3px); }
    100%{ opacity:1; transform: none; filter: blur(0); }
}
.blind-card.flash{ animation: ccCardFlash .85s var(--ease-out); }
@keyframes ccCardFlash{
    0%{ box-shadow: 0 0 0 1px rgba(var(--accent-rgb,255,46,59),0), var(--shadow); }
    28%{ box-shadow: 0 0 0 2px rgba(var(--accent-rgb,255,46,59),.7), 0 0 46px rgba(var(--accent-rgb,255,46,59),.45), var(--shadow); }
    100%{ box-shadow: 0 0 0 1px rgba(var(--accent-rgb,255,46,59),0), var(--shadow); }
}

/* ============================================================
   STATUS CHIPS + LIVE DOTS
   ============================================================ */
.run-chip, .status-chip{ transition: color .25s ease, background .25s ease, border-color .25s ease; }
.run-chip.pulse, .status-chip.pulse{ animation: ccChipPop .5s var(--ease-spring); }
@keyframes ccChipPop{
    0%{ transform: scale(1); }
    40%{ transform: scale(1.12); }
    100%{ transform: scale(1); }
}

/* ============================================================
   MICRO-INTERACTIONS — buttons + panel
   ============================================================ */
.btn-top, .panel-btn{
    transition: transform .14s var(--ease-out), border-color .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-top:hover{ transform: translateY(-1px); }
.btn-top:active{ transform: translateY(0) scale(.96); }
.panel-btn:hover{ transform: translateY(-1px); }
.panel-btn:active{ transform: translateY(0) scale(.97); }
.panel-btn-main:hover{ box-shadow: 0 10px 26px rgba(var(--accent-rgb,255,46,59),.42); }

/* springy panel slide + staggered sections */
.control-panel{ transition: transform .42s var(--ease-spring), opacity .26s ease; }
.control-panel.open .panel-section{ animation: ccRise .5s var(--ease-out) both; }
.control-panel.open .panel-section:nth-child(2){ animation-delay:.04s; }
.control-panel.open .panel-section:nth-child(3){ animation-delay:.09s; }
.control-panel.open .panel-section:nth-child(4){ animation-delay:.14s; }
.control-panel.open .panel-section:nth-child(5){ animation-delay:.19s; }
.control-panel.open .panel-section:nth-child(6){ animation-delay:.24s; }
.panel-switch .switch-ui::after{ transition: .26s var(--ease-spring); }

/* ============================================================
   REDUCED MOTION — keep it calm, kill the loops
   ============================================================ */
@media (prefers-reduced-motion: reduce){
    body::before,
    #cc-fx::before, #cc-fx::after,
    body.t-running #timer-ring, body.t-soon #timer-ring,
    body.t-critical #timer-ring, body.t-break #timer-ring,
    body.t-critical .timer-wrap,
    body.t-critical .ring-head,
    .run-chip[data-state="run"]::before, .brand-pill .brand-dot,
    .top-bar, .col-side .card, .col-center .timer-wrap,
    .blinds-row .blind-card, .legal-note,
    .control-panel.open .panel-section{
        animation: none !important;
    }
    .timer-value.tick, .timer-level.sweep::after, #info-level-current.pop,
    .blind-value.swap, .blind-card.flash, .run-chip.pulse, .status-chip.pulse,
    .timer-wrap.level-burst::before, .timer-wrap.level-burst::after{
        animation: none !important;
    }
    .ring-head{ display:none; }
}

/* ============================================================
   CHROME 2026 — QUIET CARD-ROOM LUXE  (css.css?v=15)
   Members-only board: deep matte surfaces, exact tracking,
   one disciplined gold hairline reserved for the maker's mark.
   Colour = STATE, never decoration. Accent-variable driven.
   Appended last so it wins the cascade over base chrome.
   ============================================================ */
:root{
    --cc-gold: 240,199,102;                 /* the single jewelry tone */
    --cc-surface: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    --cc-hairline: rgba(255,255,255,.090);
    --cc-hairline-strong: rgba(255,255,255,.17);
    --cc-top-light: inset 0 1px 0 rgba(255,255,255,.06);   /* depth, not bevel */
    --cc-shadow: 0 10px 30px rgba(0,0,0,.46);
    --cc-live: 92,206,150;                   /* felt-room emerald, not neon */
}
html[data-theme="light"]{
    --cc-gold: 168,128,42;
    --cc-surface: linear-gradient(180deg, rgba(11,14,20,.032), rgba(11,14,20,.014));
    --cc-hairline: rgba(11,14,20,.10);
    --cc-hairline-strong: rgba(11,14,20,.18);
    --cc-top-light: inset 0 1px 0 rgba(255,255,255,.55);
    --cc-shadow: 0 10px 26px rgba(11,14,20,.10);
    --cc-live: 22,120,76;
}

/* shared chrome language — matte, calm, one tracking system */
.brand-pill,
.run-chip,
.status-chip,
.btn-top{
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    box-shadow: var(--cc-top-light), var(--cc-shadow);
    border-radius: var(--pill);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.run-chip,
.status-chip,
.btn-top{
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.run-chip::before,
.status-chip::before{
    width: 6px; height: 6px;
    border-radius: 50%;
    box-shadow: none;
}

/* BRAND PILL — platform maker's mark; the ONLY place gold lives */
.brand-pill{
    padding: 9px 18px;
    gap: 9px;
    border-color: rgba(var(--cc-gold),.32);
    box-shadow:
        var(--cc-top-light),
        var(--cc-shadow),
        inset 0 0 0 1px rgba(var(--cc-gold),.06);
}
.brand-pill .brand-dot{
    width: 5px; height: 5px;
    background: rgb(var(--cc-gold));
    box-shadow: 0 0 9px rgba(var(--cc-gold),.60);
}
html[data-theme="light"] .brand-pill .brand-dot{ box-shadow: 0 0 6px rgba(var(--cc-gold),.40); }
.brand-pill .brand-text{
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .24em;
    color: var(--text);
    opacity: .92;
}

/* RUN CHIP — live / paused / break */
.run-chip{ color: var(--text-muted); font-weight: 600; }
.run-chip::before{ background: currentColor; }
.run-chip[data-state="run"]{
    color: rgb(var(--cc-live));
    border-color: rgba(var(--cc-live),.32);
    background: linear-gradient(180deg, rgba(var(--cc-live),.11), rgba(var(--cc-live),.05));
}
.run-chip[data-state="run"]::before{
    background: rgb(var(--cc-live));
    box-shadow: 0 0 7px rgba(var(--cc-live),.65);
    animation: ccLivePoint 2.6s ease-in-out infinite;
}
@keyframes ccLivePoint{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.run-chip[data-state="pause"]{
    color: var(--text-muted);
    border-color: var(--cc-hairline);
    background: var(--cc-surface);
}
.run-chip[data-state="pause"]::before{
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--cc-hairline-strong);
    opacity: .8;
}
.run-chip[data-state="break"]{
    color: var(--accent-soft);
    border-color: rgba(var(--accent-rgb,255,46,59),.34);
    background: linear-gradient(180deg,
        rgba(var(--accent-rgb,255,46,59),.11), rgba(var(--accent-rgb,255,46,59),.04));
}
.run-chip[data-state="break"]::before{
    background: var(--accent-soft);
    box-shadow: 0 0 7px rgba(var(--accent-soft-rgb,255,86,102),.60);
}

/* STATUS CHIP — late-reg open / closed */
.status-chip{
    color: var(--accent-soft);
    border-color: rgba(var(--accent-rgb,255,46,59),.30);
    background: linear-gradient(180deg,
        rgba(var(--accent-rgb,255,46,59),.10), rgba(var(--accent-rgb,255,46,59),.04));
}
.status-chip::before{
    background: var(--accent-soft);
    box-shadow: 0 0 7px rgba(var(--accent-soft-rgb,255,86,102),.55);
}
html[data-theme="light"] .status-chip::before{ box-shadow: 0 0 6px rgba(var(--accent-rgb,123,15,26),.30); }
.status-chip.closed{
    color: var(--text-muted);
    border-color: var(--cc-hairline);
    background: var(--cc-surface);
}
.status-chip.closed::before{
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--cc-hairline-strong);
}

/* TOP BUTTONS — quiet, matte, certain */
.btn-top{ color: var(--text-muted); }
.btn-top:hover{
    color: var(--text);
    border-color: var(--cc-hairline-strong);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
html[data-theme="light"] .btn-top:hover{
    background: linear-gradient(180deg, rgba(11,14,20,.05), rgba(11,14,20,.025));
}

/* TIMER LEVEL — centre caption plate under the dial (sweep preserved) */
.timer-level{
    padding: 5px 12px;
    max-width: 78%;                          /* никогда не подходит к кольцу */
    background: var(--cc-surface);
    border: 1px solid var(--cc-hairline);
    box-shadow: var(--cc-top-light), var(--cc-shadow);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .12em;                   /* компактнее — узкая пилюля внутри кольца */
    text-indent: .12em;                      /* optical centring for wide tracking */
}
html[data-theme="light"] .timer-level{
    background: var(--cc-surface);
    border-color: var(--cc-hairline);
}

@media (prefers-reduced-motion: reduce){
    .run-chip[data-state="run"]::before{ animation: none !important; opacity: 1; }
}

/* =========================
   BREAK MODE — на перерыве весь экран уходит в янтарь,
   чтобы состояние читалось с другого конца зала.
   Переменные заданы на body: собственное значение элемента
   бьёт унаследованный :root!important из owner-темы (THEME_ACCENT).
   ========================= */
body.t-break{
    --accent:#f7a924;
    --accent-rgb:247,169,36;
    --accent-soft:#ffc65f;
    --accent-soft-rgb:255,198,95;
    --accent-deep-rgb:150,95,12;
    --chip-bg:rgba(247,169,36,.13);
    --chip-br:rgba(247,169,36,.36);
    --ring-glow:0 0 46px rgba(255,198,95,.55);
    --bg-top:#1c1206;
    --bg-mid:#0d0a06;
    --bg-bottom:#070503;
}
html[data-theme="light"] body.t-break{
    --accent:#a86a00;
    --accent-rgb:168,106,0;
    --accent-soft:#c98508;
    --accent-soft-rgb:201,133,8;
    --accent-deep-rgb:120,76,0;
    --chip-bg:rgba(168,106,0,.10);
    --chip-br:rgba(168,106,0,.26);
    --ring-glow:0 0 26px rgba(168,106,0,.25);
    --bg-top:#fffaf0;
    --bg-mid:#f9f3e4;
    --bg-bottom:#f2ead7;
}
/* «ПЕРЕРЫВ» — янтарный и мягко дышит */
body.t-break #timer-level{
    color:var(--accent-soft);
    animation: ccBreakBreathe 2.6s ease-in-out infinite;
}
@keyframes ccBreakBreathe{
    0%,100%{ opacity:1; }
    50%{ opacity:.55; }
}
@media (prefers-reduced-motion: reduce){
    body.t-break #timer-level{ animation:none; }
}

/* ============================================================
   MAKER'S MARK — «ПокерСистема» (css.css?v=35)
   Марка платформы = чистый двухцветный логотип, БЕЗ иконок и мастей
   (спейд/чипы читаются как клише). «Покер» белым, «Система» красным
   (red luxe). Красный ФИКСИРОВАННЫЙ (#D62839), не зависит от акцента
   клуба — марка платформы едина на всех табло. Не путать с neon-акцентом
   темы. .brand-pill/.brand-dot/.brand-text/.brand-emblem не используются.
   ============================================================ */
.brand-mark{
    display:inline-flex; align-items:center; padding:0;
    background:none; border:none; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
}
.brand-word{
    display:inline-flex; align-items:baseline; white-space:nowrap;
    font-family:'Saira', system-ui, sans-serif;
    font-size:17px; line-height:1; letter-spacing:.004em; color:var(--text);
}
.brand-word .bw-1{ font-weight:800; color:var(--text); }
.brand-word .bw-2{ font-weight:800; color:#D62839; }
html[data-theme="light"] .brand-word .bw-2{ color:#C61F32; }

@media (max-width:900px){
    /* 13px: бренд стоит по центру экрана, и при 15px левому блоку
       (знак + название клуба) оставалось меньше трёх пикселей зазора. */
    .brand-word{ font-size:13px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ОБЪЯВЛЕНИЕ РАССАДКИ — полноэкранный «свап» табло
   Пересадка / финальный стол / схема столов на 15–25 секунд занимают весь
   экран: с 5–10 метров список сбоку не читался, а игроки его не замечали.
   Часы, уровень и блайнды не пропадают — уезжают в нижнюю строку-рейку.
   Всё движение — только transform/opacity: ТВ-приставки не тянут blur и
   clip-path по всему экрану.
   ═══════════════════════════════════════════════════════════════════════════ */

#cc-takeover{
    position:fixed; inset:0; z-index:990;
    display:flex; flex-direction:column;
    padding:5vh 4.2vw 0;
    color:var(--text);
    font-family:'Saira',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    overflow:hidden;
    background:
        radial-gradient(115% 74% at 50% -16%, rgba(var(--accent-rgb,255,46,59),.20), transparent 60%),
        radial-gradient(96% 58% at 50% 116%, rgba(var(--accent-rgb,255,46,59),.09), transparent 64%),
        linear-gradient(180deg,#0d0910 0%,#07070d 44%,#040409 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
html[data-theme="light"] #cc-takeover{
    background:
        radial-gradient(115% 74% at 50% -16%, rgba(var(--accent-rgb,123,15,26),.12), transparent 60%),
        linear-gradient(180deg,#ffffff 0%,#f4f5fa 100%);
    box-shadow:inset 0 0 0 1px rgba(11,14,20,.08);
}

/* Пока табло занято объявлением, центральные баннеры перерыва не должны
   торчать поверх: у них аварийный z-index, гасим их прозрачностью. */
body.is-tk-open .addon-banner,
body.is-tk-open .chiprace-banner{opacity:0 !important;transition:opacity .28s ease;}

/* ── вход/выход всего экрана ─────────────────────────────────────────────── */
#cc-takeover.is-in {animation:tk-in  .56s cubic-bezier(.16,1,.3,1) backwards;}
#cc-takeover.is-out{animation:tk-out .34s cubic-bezier(.4,0,.9,.4) both;}
@keyframes tk-in {from{opacity:0;transform:translateY(2.2%) scale(1.035);}
                  to  {opacity:1;transform:translateY(0)    scale(1);}}
@keyframes tk-out{from{opacity:1;transform:translateY(0)     scale(1);}
                  to  {opacity:0;transform:translateY(-1.2%) scale(.985);}}

/* «Луч переключения»: одна полоса проезжает по экрану — это и читается как
   свап табло. Только transform, поэтому даром достаётся даже слабому ТВ. */
.tk-sweep{position:absolute;top:-10%;bottom:-10%;left:0;width:38%;
    pointer-events:none;transform:translateX(-160%) skewX(-11deg);
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb,255,46,59),.16) 45%,rgba(255,255,255,.06) 55%,transparent);
    animation:tk-sweep 1.05s cubic-bezier(.3,0,.2,1) .06s both;}
@keyframes tk-sweep{from{transform:translateX(-160%) skewX(-11deg);}
                    to  {transform:translateX(300%)  skewX(-11deg);}}

/* Полоска жизни объявления: видно, что экран вернётся сам. */
.tk-life{position:absolute;left:0;top:0;height:3px;width:100%;
    background:linear-gradient(90deg,var(--accent),var(--accent-soft));
    box-shadow:0 0 18px rgba(var(--accent-rgb,255,46,59),.55);
    transform-origin:0 50%;transform:scaleX(1);
    animation:tk-life linear both;animation-duration:var(--life,14s);}
@keyframes tk-life{to{transform:scaleX(0);}}

/* ── шапка сцены ─────────────────────────────────────────────────────────── */
.tk-head{flex:0 0 auto;display:flex;align-items:flex-end;gap:1.4vw;
    padding-bottom:2.4vh;margin-bottom:2.6vh;
    border-bottom:1px solid rgba(255,255,255,.09);
    animation:tk-rise .5s cubic-bezier(.16,1,.3,1) .08s backwards;}
.tk-titles{min-width:0;}
.tk-kicker{display:flex;align-items:center;gap:.7vw;
    font-size:clamp(10px,1.5vh,19px);font-weight:800;letter-spacing:.28em;
    text-transform:uppercase;color:var(--accent-soft);margin-bottom:.9vh;}
.tk-kicker::before{content:"";width:clamp(22px,2.6vw,54px);height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--accent),transparent);}
.tk-title{margin:0;font-size:clamp(28px,6.2vh,82px);line-height:.98;font-weight:900;
    letter-spacing:.005em;text-transform:uppercase;color:var(--text);
    text-shadow:0 2px 30px rgba(0,0,0,.6);}
.tk-sub{margin-top:1vh;font-size:clamp(13px,2vh,27px);font-weight:500;
    color:var(--text-muted);}
.tk-count{margin-left:auto;flex:0 0 auto;text-align:right;line-height:1;}
.tk-count b{display:block;font-size:clamp(26px,5.4vh,68px);font-weight:900;
    color:var(--accent-soft);font-variant-numeric:tabular-nums;}
.tk-count span{display:block;margin-top:.5vh;font-size:clamp(10px,1.4vh,17px);
    font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);}

/* ── сцена ───────────────────────────────────────────────────────────────── */
/* overflow:hidden обязателен: при align-items:center содержимое выше контейнера
   вылезает В ОБЕ стороны и наползает на шапку и на нижнюю рейку. */
.tk-body{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
    overflow:hidden;}

/* ── СЦЕНА: ПЕРЕСАДКА ────────────────────────────────────────────────────── */
.tk-moves{list-style:none;margin:0 auto;padding:0;width:100%;
    max-width:min(1460px,94%);max-height:100%;overflow:hidden;
    display:grid;grid-template-columns:1fr;gap:clamp(8px,1.5vh,20px);
    --rs:1;}
/* Чем короче список, тем крупнее строка: одна пересадка должна читаться
   от дальнего стола, восемь — просто помещаться. */
.tk-moves.n-xs{--rs:1.28;}
.tk-moves.n-s {--rs:1.08;}
.tk-moves.n-m {--rs:.88;}
.tk-moves.n-l {--rs:.74;max-width:100%;grid-template-columns:1fr 1fr;column-gap:2vw;}
/* Полный список пересадок: две колонки по шесть строк — предел экрана. */
.tk-moves.n-xl{--rs:.58;max-width:100%;grid-template-columns:1fr 1fr;column-gap:2vw;
    gap:clamp(6px,1vh,13px);}
/* Сетка, а не флекс: ник не растягивается на пол-экрана, «куда» стоит рядом —
   глазу с десяти метров не приходится ехать через пустоту. */
.tk-move{display:grid;align-items:center;
    grid-template-columns:minmax(0,max-content) max-content minmax(clamp(40px,4vw,90px),1fr) max-content;
    gap:clamp(10px,1.5vw,30px);
    padding:calc(1.7vh * var(--rs)) clamp(14px,1.6vw,32px);
    border-radius:clamp(12px,1.5vh,20px);
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    position:relative;overflow:hidden;
    animation:tk-row .52s cubic-bezier(.16,1,.3,1) backwards;
    animation-delay:calc(.22s + var(--i,0) * .07s);}
.tk-move::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;
    border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--accent),var(--accent-soft));
    box-shadow:0 0 16px rgba(var(--accent-rgb,255,46,59),.6);}
@keyframes tk-row{from{opacity:0;transform:translateY(26px) scale(.985);}
                  to  {opacity:1;transform:translateY(0)    scale(1);}}
/* Дописанная на лету строка: въезжает сама, соседи остаются на месте. Кегль
   меняется переходом — список мельчает по мере роста, но без рывка. */
.tk-move.is-added{animation:tk-move-add .5s cubic-bezier(.16,1,.3,1) backwards;
    animation-delay:calc(var(--i,0) * .07s);}
@keyframes tk-move-add{from{opacity:0;transform:translateX(34px) scale(.97);}
                       to  {opacity:1;transform:translateX(0)    scale(1);}}
/* Игрока двинули повторно: строка та же, но должна мигнуть — иначе новое место
   подменяется незаметно. */
.tk-move.is-again{animation:tk-move-again .7s ease-out backwards;}
@keyframes tk-move-again{
    0%  {background:rgba(var(--accent-rgb,255,46,59),.30);}
    100%{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));}}
.tk-move,.tk-move-name,.tk-move-from,.tk-dest-cell,
.tk-dest-cell .l,.tk-dest-cell .v{transition:font-size .32s cubic-bezier(.16,1,.3,1),
    padding .32s cubic-bezier(.16,1,.3,1);}

.tk-move-name{min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-weight:800;color:var(--text);
    font-size:calc(clamp(18px,3.9vh,50px) * var(--rs));letter-spacing:-.005em;}
.tk-move-from{font-size:calc(clamp(11px,1.7vh,22px) * var(--rs));
    font-weight:600;color:var(--text-muted);white-space:nowrap;}

/* Путь пересадки: по линии от «откуда» к «куда» бежит световой след. Движение
   само рассказывает, что происходит, и стоит браузеру один transform. */
.tk-track{position:relative;height:2px;border-radius:2px;
    background:rgba(255,255,255,.13);overflow:hidden;}
.tk-track i{position:absolute;top:0;bottom:0;left:0;width:46%;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb,255,46,59),.35) 40%,var(--accent-soft));
    box-shadow:0 0 12px rgba(var(--accent-rgb,255,46,59),.7);
    animation:tk-comet 1.9s cubic-bezier(.55,0,.45,1) infinite;}
@keyframes tk-comet{from{transform:translateX(-110%);}to{transform:translateX(228%);}}
.tk-track::after{content:"";position:absolute;right:0;top:50%;
    width:clamp(5px,.62vh,9px);height:clamp(5px,.62vh,9px);border-radius:50%;
    margin-top:calc(clamp(5px,.62vh,9px) / -2);
    background:var(--accent-soft);box-shadow:0 0 12px rgba(var(--accent-rgb,255,46,59),.8);}

.tk-dest{display:flex;align-items:stretch;
    border-radius:clamp(9px,1.2vh,16px);overflow:hidden;
    border:1px solid rgba(var(--accent-rgb,255,46,59),.42);
    background:linear-gradient(180deg,rgba(var(--accent-rgb,255,46,59),.14),rgba(var(--accent-rgb,255,46,59),.05));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 26px rgba(var(--accent-rgb,255,46,59),.14);
    animation:tk-pop .46s cubic-bezier(.2,1.4,.35,1) backwards;
    animation-delay:calc(.42s + var(--i,0) * .07s);}
@keyframes tk-pop{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}
.tk-dest-cell{padding:calc(.7vh * var(--rs)) clamp(10px,1.1vw,22px);text-align:center;line-height:1;}
.tk-dest-cell + .tk-dest-cell{border-left:1px solid rgba(var(--accent-rgb,255,46,59),.3);}
.tk-dest-cell .l{display:block;font-size:calc(clamp(8px,1.15vh,14px) * var(--rs));
    font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
    margin-bottom:.6vh;}
.tk-dest-cell .v{display:block;font-size:calc(clamp(20px,4.2vh,54px) * var(--rs));
    font-weight:900;color:var(--accent-soft);font-variant-numeric:tabular-nums;
    text-shadow:0 0 24px rgba(var(--accent-rgb,255,46,59),.45);}
.tk-dest.is-raw{padding:calc(.9vh * var(--rs)) clamp(12px,1.2vw,24px);align-items:center;}
.tk-dest.is-raw .v{font-size:calc(clamp(16px,3vh,38px) * var(--rs));}

/* ── СЦЕНА: ФИНАЛЬНЫЙ СТОЛ ───────────────────────────────────────────────── */
/* Размер задан двумя clamp-ами, а не aspect-ratio: свойство молодое, а на
   ТВ-приставках браузеры старые — овал не должен схлопнуться в ноль. */
.tk-table{position:relative;width:min(88vw,124vh);height:min(60vh,42vw);max-height:100%;
    animation:tk-felt .6s cubic-bezier(.16,1,.3,1) .1s backwards;}
@keyframes tk-felt{from{opacity:0;transform:scale(.93);}to{opacity:1;transform:scale(1);}}
/* Сукно с бортом: без него овал читался как пустая рамка на фоне. */
.tk-felt{position:absolute;left:12%;right:12%;top:19%;bottom:19%;border-radius:999px;
    background:
        radial-gradient(72% 94% at 50% 26%, rgba(var(--accent-rgb,255,46,59),.17), transparent 72%),
        linear-gradient(180deg,#241725 0%,#160e19 52%,#0e0913 100%);
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-rgb,255,46,59),.30),
        inset 0 2px 0 rgba(255,255,255,.06),
        inset 0 -40px 90px rgba(0,0,0,.55),
        0 0 70px rgba(var(--accent-rgb,255,46,59),.10);}
.tk-felt::before{content:"";position:absolute;z-index:-1;border-radius:999px;
    inset:calc(-1 * clamp(9px,1.7vh,22px));
    background:linear-gradient(180deg,#312033 0%,#1a1220 48%,#0f0a15 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 30px 80px rgba(0,0,0,.6);}
/* Линия ставок — деталь настоящего стола, тонкая и почти незаметная. */
.tk-felt::after{content:"";position:absolute;inset:clamp(13px,2.5vh,34px);
    border-radius:999px;border:1px solid rgba(255,255,255,.04);}
.tk-felt-mark{position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:.8vh;pointer-events:none;}
.tk-felt-mark .m1{font-size:clamp(11px,1.7vh,22px);font-weight:800;letter-spacing:.42em;
    text-transform:uppercase;color:rgba(255,255,255,.30);padding-left:.42em;}
.tk-felt-mark .m2{width:clamp(40px,6vw,120px);height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb,255,46,59),.6),transparent);}

.tk-seat{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
    width:clamp(84px,11.5vw,220px);}
/* Полный стол: плашек больше, борт тот же — ужимаем, иначе соседи наезжают. */
.tk-table[data-n="11"] .tk-seat,
.tk-table[data-n="12"] .tk-seat{width:clamp(72px,9.6vw,180px);}
.tk-table[data-n="11"] .tk-seat-nk,
.tk-table[data-n="12"] .tk-seat-nk{font-size:clamp(12px,2.1vh,27px);}
.tk-seat-b{display:flex;flex-direction:column;align-items:center;gap:.7vh;
    animation:tk-seat .5s cubic-bezier(.16,1,.3,1) backwards;
    animation-delay:calc(.34s + var(--i,0) * .075s);}
/* Верхняя половина овала: имя над фишкой места, иначе оно ложится на сукно. */
.tk-seat.is-top .tk-seat-b{flex-direction:column-reverse;}
@keyframes tk-seat{from{opacity:0;transform:scale(.62);}to{opacity:1;transform:scale(1);}}
.tk-seat-n{display:grid;place-items:center;
    width:clamp(30px,4.4vh,60px);height:clamp(30px,4.4vh,60px);border-radius:50%;
    font-size:clamp(14px,2.3vh,30px);font-weight:900;font-variant-numeric:tabular-nums;
    color:var(--accent-soft);background:linear-gradient(180deg,#14101a,#0a0810);
    border:1px solid rgba(var(--accent-rgb,255,46,59),.5);
    box-shadow:0 0 22px rgba(var(--accent-rgb,255,46,59),.28),inset 0 1px 0 rgba(255,255,255,.08);}
.tk-seat-nk{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    text-align:center;font-weight:800;color:var(--text);
    font-size:clamp(13px,2.4vh,32px);text-shadow:0 2px 14px rgba(0,0,0,.8);}
.tk-seat.is-empty .tk-seat-n{color:var(--text-muted);border-color:rgba(255,255,255,.14);
    box-shadow:none;}
.tk-seat.is-empty .tk-seat-nk{color:rgba(255,255,255,.28);font-weight:600;}

/* Место дилера — снизу по центру, как на схеме столов в админке: без него стол
   читался как кольцо мест без «головы», и игроки не понимали, где раздача. */
.tk-dealer{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
    pointer-events:none;
    animation:tk-seat .5s cubic-bezier(.16,1,.3,1) .3s backwards;}
.tk-dealer-b{display:flex;align-items:center;gap:clamp(5px,.7vh,10px);
    padding:clamp(4px,.7vh,9px) clamp(9px,1.1vw,18px);border-radius:999px;
    border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#1b141f,#0d0912);
    box-shadow:0 6px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);}
.tk-dealer-b .d{display:grid;place-items:center;
    width:clamp(20px,2.9vh,38px);height:clamp(20px,2.9vh,38px);border-radius:50%;
    font-size:clamp(11px,1.7vh,22px);font-weight:900;color:#0c0810;
    background:linear-gradient(180deg,#f2f4f7,#c9ced8);}
.tk-dealer-b .l{font-size:clamp(9px,1.3vh,17px);font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(255,255,255,.55);}

/* Мест больше, чем красиво лезет на овал — раскладываем сеткой. */
.tk-grid{width:100%;display:grid;gap:clamp(8px,1.4vh,18px);
    grid-template-columns:repeat(auto-fit,minmax(clamp(180px,20vw,320px),1fr));}
.tk-grid .tk-gcell{display:flex;align-items:center;gap:clamp(8px,.9vw,18px);
    padding:clamp(8px,1.3vh,18px) clamp(12px,1.2vw,24px);border-radius:clamp(10px,1.3vh,16px);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
    border:1px solid rgba(255,255,255,.08);
    animation:tk-row .5s cubic-bezier(.16,1,.3,1) backwards;
    animation-delay:calc(.2s + var(--i,0) * .045s);}
.tk-grid .tk-seat-n{width:clamp(26px,3.6vh,48px);height:clamp(26px,3.6vh,48px);
    font-size:clamp(12px,2vh,25px);flex:0 0 auto;}
.tk-grid .tk-seat-nk{text-align:left;font-size:clamp(14px,2.6vh,34px);}

/* ── СЦЕНА: ЧИП-ЛИДЕР ────────────────────────────────────────────────────── */
/* Не карточка, а табло: акцентная планка с гравировкой во всю высоту слева,
   типографика героя по центру-слева, справа за волоском — стопка фишек и счёт.
   Цвет только через var(--accent-*) с фолбэком в исходный красный (клубная тема
   красит сцену сама); «дорогой» второй акцент — холодный металл, НЕ золото.
   Анимируем только transform/opacity: ТВ-приставка тянет ровно это. */
.tk-body.is-bleed{align-items:stretch;}
.tk-cl{
    --cl-metal:#c7ceda;                      /* холодный металл: «дорогой» блик, золото запрещено */
    position:relative;
    width:100%;display:grid;align-items:center;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:clamp(16px,3vw,64px);
}

/* Раз в семь секунд по сцене проходит широкий мягкий свет: картинка дышит даже
   когда всё уже показано. Один элемент, только transform. */
.tk-cl::after{
    content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:42%;
    pointer-events:none;z-index:-1;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.055) 45%,
        rgba(var(--accent-rgb,255,46,59),.075) 60%,transparent);
    transform:translateX(-150%) skewX(-12deg);
    animation:tk-cl-scan 7s cubic-bezier(.55,0,.45,1) 2.4s infinite;
}
@keyframes tk-cl-scan{0%{transform:translateX(-150%) skewX(-12deg);}
    42%{transform:translateX(310%) skewX(-12deg);}
    100%{transform:translateX(310%) skewX(-12deg);}}

/* ── планка с гравировкой ── */
.tk-cl-rail{
    position:relative;align-self:stretch;
    width:clamp(26px,3.4vw,64px);overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    padding-left:clamp(6px,.8vw,16px);
    animation:tk-cl-rail .6s cubic-bezier(.16,1,.3,1) backwards;
}
/* Планка — отдельным элементом: box-shadow на самой колонке подсвечивал ОБА её
   края, и справа появлялась вторая «линия из ниоткуда». */
.tk-cl-rail::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:rgba(var(--accent-rgb,255,46,59),.9);
    filter:drop-shadow(0 0 14px rgba(var(--accent-rgb,255,46,59),.75));
}
/* По планке всё время стекает светлый сгусток — сцена не «замирает». */
.tk-cl-rail::after{
    content:"";position:absolute;left:0;width:3px;height:26%;top:-30%;
    background:linear-gradient(180deg,transparent,#fff,transparent);
    opacity:.9;animation:tk-cl-flow 3.8s cubic-bezier(.55,0,.45,1) .8s infinite;
}
@keyframes tk-cl-flow{0%{transform:translateY(0);}
    70%{transform:translateY(500%);}100%{transform:translateY(500%);}}
.tk-cl-rail span{
    /* Поворот целой строки, сверху вниз — как на корешке книги: writing-mode
       ставит кириллицу столбиком по букве, а -90° заставляет читать снизу. */
    transform:rotate(90deg);transform-origin:50% 50%;white-space:nowrap;
    font-size:clamp(11px,1.9vh,26px);font-weight:900;letter-spacing:.5em;
    text-transform:uppercase;color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.42);
}
@keyframes tk-cl-rail{from{opacity:0;transform:scaleY(.2);}to{opacity:1;transform:none;}}

/* ── типографика героя ── */
.tk-cl-main{min-width:0;}
.tk-cl-kicker{
    display:flex;align-items:center;gap:.7vw;
    font-size:clamp(10px,1.6vh,21px);font-weight:800;letter-spacing:.3em;
    text-transform:uppercase;color:var(--accent-soft);
    margin-bottom:clamp(6px,1.4vh,18px);
    animation:tk-rise .5s cubic-bezier(.16,1,.3,1) .1s backwards;
}
.tk-cl-kicker::before{
    content:"";width:clamp(20px,2.4vw,52px);height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--accent),transparent);
}
/* Имя выезжает из-под маски — строка «встаёт», а не проявляется из пустоты. */
.tk-cl-mask{display:block;overflow:hidden;padding-bottom:.06em;}
.tk-cl-name-i{display:block;animation:tk-cl-name .72s cubic-bezier(.16,1,.3,1) .18s backwards;}
@keyframes tk-cl-name{from{transform:translateY(112%) skewY(3deg);opacity:.2;}
    to{transform:none;opacity:1;}}
.tk-cl-name{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-weight:900;line-height:.94;letter-spacing:-.005em;text-transform:uppercase;
    font-size:calc(clamp(34px,15vh,190px) * var(--cs,1));
    color:var(--text);
    /* холодный блик по имени: медленно проходит и затихает — «металл», не золото */
    background:linear-gradient(100deg,
        var(--text) 0%, var(--text) 38%,
        var(--cl-metal) 47%, #ffffff 50%, var(--cl-metal) 53%,
        var(--text) 62%, var(--text) 100%);
    background-size:280% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    /* цикл 5.2 с: сам блик занимает ~30% времени, остальное — пауза, иначе
       мигание надоедает за минуту показа */
    animation:tk-cl-gloss 5.2s linear .9s infinite both;
    filter:drop-shadow(0 2px 26px rgba(0,0,0,.7))
           drop-shadow(0 0 clamp(10px,2vh,30px) rgba(var(--accent-rgb,255,46,59),.4));
}
@keyframes tk-cl-gloss{
    0%  {background-position:180% 0;}
    30% {background-position:-80% 0;}
    100%{background-position:-80% 0;}
}
/* Длинный ник ужимаем ступенями: обрезать ник героя многоточием — плохо. */
.tk-cl.n-xs{--cs:1;}
.tk-cl.n-s {--cs:.84;}
.tk-cl.n-m {--cs:.66;}
.tk-cl.n-l {--cs:.5;}
.tk-cl.n-xl{--cs:.38;}

.tk-cl-hr{position:relative;margin:clamp(8px,1.6vh,20px) 0 clamp(6px,1.1vh,14px);height:2px;
    background:rgba(255,255,255,.1);overflow:hidden;}
/* Искра пробегает по волоску — цепляет глаз, но не тянет на себя внимание. */
.tk-cl-hr b{position:absolute;left:0;top:0;bottom:0;width:22%;
    background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.75;
    animation:tk-cl-spark 3.4s cubic-bezier(.5,0,.5,1) 1.5s infinite;}
@keyframes tk-cl-spark{0%{transform:translateX(-120%);}
    55%{transform:translateX(560%);}100%{transform:translateX(560%);}}
.tk-cl-hr i{display:block;height:100%;width:100%;transform-origin:0 50%;
    background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb,255,46,59),0));
    animation:tk-cl-hr .8s cubic-bezier(.16,1,.3,1) .5s backwards;}
@keyframes tk-cl-hr{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.tk-cl-meta{font-size:clamp(12px,1.9vh,26px);font-weight:500;color:var(--text-muted);
    animation:tk-rise .5s cubic-bezier(.16,1,.3,1) .62s backwards;}

/* ── правая колонка: стопка фишек + счёт ── */
.tk-cl-side{
    flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
    gap:clamp(8px,1.6vh,22px);
    padding-left:clamp(14px,2.4vw,54px);
    border-left:1px solid rgba(255,255,255,.1);
}
/* Стопка: фишки падают сверху одна за другой и слегка «доседают». */
.tk-cl-stack{position:relative;width:clamp(96px,17vh,210px);overflow:hidden;
    /* стопка чуть покачивается — фишки на столе никогда не стоят мёртво */
    animation:tk-cl-breathe 4.2s ease-in-out 1.4s infinite;}
@keyframes tk-cl-breathe{0%,100%{transform:translateY(0);}50%{transform:translateY(-2.5%);}}
/* Блик по фишкам: диагональная полоса проходит раз в ~3 с. */
.tk-cl-glint{position:absolute;top:-20%;bottom:-20%;left:0;width:46%;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:translateX(-160%) skewX(-16deg);
    animation:tk-cl-glint 3.1s cubic-bezier(.5,0,.5,1) 1.2s infinite;}
@keyframes tk-cl-glint{0%{transform:translateX(-160%) skewX(-16deg);}
    45%{transform:translateX(320%) skewX(-16deg);}
    100%{transform:translateX(320%) skewX(-16deg);}}
.tk-cl-stack svg{width:100%;height:auto;display:block;overflow:visible;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));}
.tk-cl-stack .ck{
    animation:tk-cl-chip .5s cubic-bezier(.34,1.56,.64,1) backwards;
    animation-delay:calc(.3s + var(--i,0) * .1s);
}
@keyframes tk-cl-chip{
    from{opacity:0;transform:translateY(-46px) scale(.9);}
    60% {opacity:1;}
    to  {opacity:1;transform:none;}
}
.ck-side {fill:rgba(var(--accent-rgb,255,46,59),.92);}
.ck-nick {fill:#fff;opacity:.88;}
.ck-face {fill:var(--accent-soft);}
.ck-inner{fill:rgba(0,0,0,.34);stroke:rgba(255,255,255,.55);stroke-width:1.2;}
/* Верхняя фишка светлее — на неё падает свет, стопка перестаёт быть плоской. */
.tk-cl-stack .ck:last-child .ck-face{fill:#fff;opacity:.92;}
.tk-cl-stack .ck:last-child .ck-inner{fill:rgba(var(--accent-rgb,255,46,59),.9);
    stroke:rgba(255,255,255,.9);}

/* ── фон: фишки всплывают за текстом весь показ ── */
.tk-cl-fx{position:absolute;inset:-6% 0;pointer-events:none;z-index:-1;overflow:hidden;}
.tk-cl-fx i{
    position:absolute;left:var(--x);bottom:-16%;
    width:clamp(54px,13vh,168px);aspect-ratio:1;border-radius:50%;
    /* силуэт фишки: борт + внутреннее кольцо. Мелкий узор на таком размере и
       такой прозрачности превращается в грязь, поэтому только два кольца. */
    border:.14em solid rgba(var(--accent-rgb,255,46,59),.85);
    box-shadow:inset 0 0 0 .1em rgba(255,255,255,.28),
               inset 0 0 0 .34em rgba(var(--accent-rgb,255,46,59),.4);
    opacity:0;
    animation:tk-cl-float var(--t,14s) linear var(--d,0s) infinite;
}
@keyframes tk-cl-float{
    0%  {opacity:0;   transform:translateY(0)      scale(var(--s,.3)) rotate(0deg);}
    14% {opacity:.2;}
    80% {opacity:.12;}
    100%{opacity:0;   transform:translateY(-124vh) scale(var(--s,.3)) rotate(200deg);}
}

.tk-cl-score{position:relative;text-align:center;line-height:1;}
.tk-cl-score::before{
    content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
    width:150%;height:150%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(var(--accent-rgb,255,46,59),.5),transparent 70%);
    opacity:.3;animation:tk-cl-halo 2.6s ease-in-out 1.6s infinite;}
@keyframes tk-cl-halo{0%,100%{opacity:.22;transform:translate(-50%,-50%) scale(.92);}
    50%{opacity:.55;transform:translate(-50%,-50%) scale(1.06);}}
.tk-cl-num{
    font-size:clamp(30px,8.6vh,108px);font-weight:900;font-variant-numeric:tabular-nums;
    color:var(--text);letter-spacing:-.02em;
    text-shadow:0 0 clamp(12px,2.4vh,34px) rgba(var(--accent-rgb,255,46,59),.55);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
/* Досчитал — короткий «удар»: число дошло до конца, а не просто перестало расти. */
.tk-cl-num.is-done{animation:tk-cl-hit .42s cubic-bezier(.34,1.56,.64,1);}
@keyframes tk-cl-hit{0%{transform:scale(1);}38%{transform:scale(1.14);}100%{transform:scale(1);}}
.tk-cl-cap{margin-top:.7vh;font-size:clamp(9px,1.3vh,17px);font-weight:800;
    letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);
    animation:tk-rise .5s cubic-bezier(.16,1,.3,1) .8s backwards;}

/* Телефон/узкий экран: планка и стопка съедают ширину — уводим в одну колонку. */
@media (max-width:900px){
    .tk-cl{grid-template-columns:auto minmax(0,1fr);row-gap:clamp(10px,2vh,20px);}
    .tk-cl-side{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;
        gap:clamp(10px,3vw,22px);padding-left:0;border-left:0;
        border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(8px,1.6vh,16px);}
    .tk-cl-stack{width:clamp(64px,12vh,110px);}
    .tk-cl-name{font-size:calc(clamp(28px,10vh,90px) * var(--cs,1));}
}

/* Меньше движения — оставляем только проявление: смысл сцены не в анимации. */
@media (prefers-reduced-motion: reduce){
    .tk-cl-rail,.tk-cl-kicker,.tk-cl-name-i,.tk-cl-hr i,.tk-cl-meta,
    .tk-cl-stack .ck,.tk-cl-cap{animation:none !important;}
    .tk-cl-name{animation:none !important;-webkit-text-fill-color:var(--text);
        background:none;}
    .tk-cl-num.is-done{animation:none !important;}
    .tk-cl-fx,.tk-cl-glint,.tk-cl-hr b,.tk-cl-rail::after,.tk-cl::after{display:none !important;}
    .tk-cl-stack,.tk-cl-score::before{animation:none !important;}
}

/* ── СЦЕНА: СХЕМА СТОЛОВ ─────────────────────────────────────────────────── */
.tk-tables{width:100%;max-height:100%;overflow:hidden;display:grid;
    gap:clamp(10px,1.6vw,28px);
    grid-template-columns:repeat(auto-fit,minmax(clamp(160px,15vw,260px),1fr));}
.tk-tbl{padding:clamp(10px,1.4vh,20px) clamp(12px,1.1vw,22px);
    border-radius:clamp(12px,1.5vh,20px);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
    border:1px solid rgba(255,255,255,.08);
    animation:tk-row .5s cubic-bezier(.16,1,.3,1) backwards;
    animation-delay:calc(.2s + var(--i,0) * .06s);}
.tk-tbl-h{display:flex;align-items:baseline;gap:.5em;margin-bottom:1.2vh;
    padding-bottom:.9vh;border-bottom:1px solid rgba(var(--accent-rgb,255,46,59),.3);}
.tk-tbl-h .l{font-size:clamp(9px,1.3vh,16px);font-weight:800;letter-spacing:.22em;
    text-transform:uppercase;color:var(--text-muted);}
.tk-tbl-h .n{font-size:clamp(18px,3vh,38px);font-weight:900;color:var(--accent-soft);
    font-variant-numeric:tabular-nums;line-height:1;}
.tk-tr{display:flex;align-items:center;gap:.7em;padding:.42vh 0;}
.tk-tr .s{flex:0 0 auto;min-width:1.9em;text-align:center;border-radius:6px;
    font-size:clamp(10px,1.5vh,19px);font-weight:900;font-variant-numeric:tabular-nums;
    color:var(--accent-soft);background:rgba(var(--accent-rgb,255,46,59),.13);
    border:1px solid rgba(var(--accent-rgb,255,46,59),.26);padding:.1em .3em;}
.tk-tr .nk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:clamp(12px,1.95vh,25px);font-weight:700;}
.tk-tr.is-empty .nk{color:rgba(255,255,255,.26);font-weight:500;}
.tk-tr.is-empty .s{color:var(--text-muted);background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.1);}

/* ── нижняя рейка: таймер и блайнды никуда не делись ─────────────────────── */
/* align-items:flex-end — часы в режиме финалки крупнее соседей, но все числа
   должны стоять на одной линии, иначе рейка «ступеньками». */
.tk-rail{flex:0 0 auto;display:flex;align-items:flex-end;gap:clamp(12px,2.2vw,52px);
    margin-top:2.6vh;padding:2vh 0 2.4vh;
    border-top:1px solid rgba(255,255,255,.09);
    animation:tk-rise .5s cubic-bezier(.16,1,.3,1) .16s backwards;}
@keyframes tk-rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.tk-rail-i{display:flex;flex-direction:column;gap:.55vh;line-height:1;}
.tk-rail-i .l{font-size:clamp(9px,1.25vh,15px);font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--text-muted);}
.tk-rail-i .v{font-size:clamp(16px,3.1vh,40px);font-weight:900;color:var(--text);
    font-variant-numeric:tabular-nums;}
.tk-rail-i.is-clock .v{color:var(--accent-soft);
    text-shadow:0 0 26px rgba(var(--accent-rgb,255,46,59),.4);}
.tk-rail-sep{width:1px;align-self:stretch;background:rgba(255,255,255,.1);}
/* Финалка держит экран до снятия — большого кольца на табло нет, поэтому часы
   в рейке набираем крупно: время должно читаться так же, как раньше таймер. */
#cc-takeover.is-sticky .tk-rail{padding:1.4vh 0 1.9vh;}
#cc-takeover.is-sticky .tk-rail-i .v{font-size:clamp(18px,3.7vh,48px);}
#cc-takeover.is-sticky .tk-rail-i.is-clock .v{font-size:clamp(26px,5.6vh,72px);letter-spacing:-.01em;}
.tk-rail-brand{margin-left:auto;display:flex;align-items:center;gap:.7vw;
    font-size:clamp(10px,1.4vh,18px);font-weight:800;letter-spacing:.22em;
    text-transform:uppercase;color:rgba(255,255,255,.3);}
.tk-rail-brand .dot{width:clamp(5px,.7vh,9px);height:clamp(5px,.7vh,9px);border-radius:50%;
    background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb,255,46,59),.8);
    animation:tk-blink 2.4s ease-in-out infinite;}
@keyframes tk-blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ── планшет/телефон вместо ТВ ───────────────────────────────────────────── */
@media (max-width:900px){
    #cc-takeover{padding:2.2vh 4vw 0;}
    .tk-head{padding-bottom:1.4vh;margin-bottom:1.6vh;}
    .tk-kicker{font-size:11px;letter-spacing:.18em;margin-bottom:.6vh;}
    .tk-title{font-size:clamp(22px,7vw,40px);}
    .tk-sub{margin-top:.5vh;font-size:clamp(12px,3.4vw,16px);}
    .tk-count{display:none;}
    /* мелкий экран не тянет крупную вёрстку ТВ: один столбец и мельче кегль */
    .tk-body{overflow-y:auto;align-items:flex-start;}
    .tk-moves,.tk-moves.n-xs,.tk-moves.n-s,.tk-moves.n-m,.tk-moves.n-l{
        --rs:.58;max-width:100%;grid-template-columns:1fr;}
    .tk-move{grid-template-columns:1fr auto;gap:.4em .8em;}
    .tk-move-name{grid-column:1 / -1;}
    .tk-track{display:none;}
    .tk-table{width:100%;height:min(52vh,150vw);}
    .tk-felt{left:14%;right:14%;top:13%;bottom:13%;}
    .tk-seat{width:clamp(64px,26vw,120px);}
    .tk-tables{grid-template-columns:1fr 1fr;gap:2vw;}
    .tk-rail{flex-wrap:wrap;gap:1.2vh 6vw;margin-top:1.4vh;padding:1.2vh 0 1.6vh;}
    .tk-rail-sep,.tk-rail-brand{display:none;}
}

/* ── бережный режим движения ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
    #cc-takeover.is-in{animation:tk-fade .2s linear both;}
    #cc-takeover.is-out{animation:tk-fade .2s linear reverse both;}
    @keyframes tk-fade{from{opacity:0}to{opacity:1}}
    .tk-sweep,.tk-track i{display:none;}
    .tk-head,.tk-rail,.tk-move,.tk-dest,.tk-seat-b,.tk-table,.tk-tbl,.tk-grid .tk-gcell,
    .tk-life,.tk-rail-brand .dot{animation:none !important;}
}

/* ══════════════════ РЕКЛАМНЫЕ ЗОНЫ ТАБЛО (тариф Pro Plus) ══════════════════
   Приём — «эфирная врезка»: табло не накрывается плакатом, а ПЕРЕДАЁТ эфир
   рекламе и забирает обратно, как телеканал уходит на спонсорский бампер.
   Отсюда три решения, каждое проверяемое:

   1. SQUEEZE BACK. Кадр отдан рекламе, но служебная рейка с часами, уровнем и
      блайндами остаётся внизу (формат L-Bar из live-спорта). Игрок никогда не
      теряет время до конца уровня — единственная претензия, которая убила бы
      рекламу на табло в первый же вечер.
   2. КЕГЛЬ ПО ДИСТАНЦИИ. Высота буквы (см) = дистанция (м) × 0.84. Для 6 м это
      ≈4 см = 115 px на 1080p. Прежний заголовок 78 px читался с 4.2 м и был
      МЕЛЬЧЕ цифр блайндов на том же экране, который клуб продаёт рекламодателю.
   3. ДВИЖЕНИЕ, А НЕ ЭФФЕКТЫ. Замеры DOOH (Vistar Media, 7 513 респондентов):
      статика +38% к запоминанию, full motion +41%. Разница между «чуть-чуть
      двигается» и «наверчено» — три пункта, а цена на слабой приставке
      несопоставима. Поэтому: один луч-вытеснитель, один медленный дрейф кадра,
      каскад текста по таймингам эфирных lower thirds. Всё на transform/opacity.

   Цвет — ТОЛЬКО тема клуба: rgba(var(--accent-rgb,255,46,59),…) с фолбэком =
   исходный красный. Дизайн обязан жить и на синем, и на зелёном акценте, поэтому
   никаких вторых цветов и никакого золота (прямой запрет AGENTS.md).
   Слои: #cc-bzone 985 — всегда НИЖЕ объявления рассадки (990).
   ──────────────────────────────────────────────────────────────────────────── */

/* Пока врезка на экране, гасим собственные дорогие эффекты табло: два
   полноэкранных blur-слоя разом дают на дешёвой приставке рваный кадр.
   Ровно так же поступает объявление рассадки. */
body.bzone-live::before{animation:none !important;}
body.bzone-live #cc-fx{opacity:0 !important;}
body.bzone-live .addon-banner,
body.bzone-live .chiprace-banner{opacity:0 !important;transition:opacity .28s ease;}

/* ── Полноэкранная врезка: ПОЛОСА ─────────────────────────────────────────── */
/* Табло на 12 секунд становится печатной полосой: поле, сетка, линейки, одна
   плоскость цвета и огромный набор. Радиусов нет — у полосы обрез, а не
   скругления (постоянные зоны табло свой --radius сохраняют).
   Правило, снимающее главный риск: НА АКЦЕНТЕ НЕТ ТЕКСТА. Тема клуба приезжает
   любой, включая салатовую, и белое по ней провалилось бы по контрасту. Цвет
   работает формой — линейкой и плоскостью, — а подписи всегда на почти чёрном
   или на белой плите QR. Суммарная площадь акцента в кадре ≈ 2%. */
#cc-bzone{
    position:fixed; inset:0; z-index:985;   /* ниже #cc-takeover (990) */
    overflow:hidden;
    color:#fff;
    font-family:'Saira',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    background:#05060a;
    opacity:0;
    --bz-pad-x:5vw; --bz-pad-y:5vh;
    --bz-set:cubic-bezier(.16,1,.28,1);
    --bz-rule:cubic-bezier(.2,.75,.15,1);
}
#cc-bzone.is-in { opacity:1; animation:bz-in .32s cubic-bezier(.22,1,.3,1) both; }
#cc-bzone.is-out{ opacity:0; animation:bz-out .34s steps(1,end) both; }
@keyframes bz-in { from{opacity:0; transform:translate3d(0,1.4%,0)} to{opacity:1; transform:none} }
/* Выход держим НЕПРОЗРАЧНЫМ до конца: диссолв между фотографией и насыщенным
   табло даёт грязное наложение. В эфире так не делают — там режут. */
@keyframes bz-out{ 0%,92%{opacity:1} 100%{opacity:0} }

/* Плоскость акцента проходит полосу на выходе — вместо растворения. */
#cc-bzone::after{
    content:""; position:absolute; top:-6%; bottom:-6%; left:0; width:130%;
    background:rgb(var(--accent-rgb,255,46,59));
    transform:translate3d(-101%,0,0) skewX(-9deg);
    pointer-events:none; opacity:0;
}
#cc-bzone.is-out::after{ animation:bz-sweep .34s cubic-bezier(.62,0,.2,1) both; }
@keyframes bz-sweep{
    0%  { transform:translate3d(-101%,0,0) skewX(-9deg); opacity:1; }
    100%{ transform:translate3d(101%,0,0)  skewX(-9deg); opacity:1; }
}

.bzone-card{
    position:relative; width:100%; height:100%;
    padding:var(--bz-pad-y) var(--bz-pad-x) calc(var(--bz-pad-y) + 9vh);
    display:flex; flex-direction:column;
}

/* ── Регистр полосы ───────────────────────────────────────────────────────── */
.bzone-mark{
    position:relative; z-index:3;
    display:flex; align-items:baseline; gap:1.6vw; flex:0 0 auto;
    font-size:clamp(13px,2.6vh,34px);
    letter-spacing:.18em; text-transform:uppercase; font-weight:700; line-height:1;
}
.bzone-mark-tag{ position:relative; padding-bottom:.7vh; color:#fff; }
/* Акцент — линейка ПОД словом, а не плашка за ним. */
.bzone-mark-tag::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:.55vh;
    background:rgb(var(--accent-rgb,255,46,59));
    transform:scaleX(0); transform-origin:left;
}
#cc-bzone.is-in .bzone-mark-tag::after{ animation:bz-rule .32s var(--bz-rule) .12s both; }
.bzone-mark-adv{ color:rgba(255,255,255,.62); letter-spacing:.05em; text-transform:none; font-weight:600; }
#cc-bzone.is-in .bzone-mark{ animation:bz-set .24s var(--bz-set) .16s both; }

/* ── Титул: набор в край ──────────────────────────────────────────────────── */
/* Кегль, ось ширины и трекинг проставляет js (_bzFit): строка встаёт ровно по
   мере полосы. Здесь только маска — титул выезжает ИЗ-ЗА линейки, сама маска
   при этом неподвижна (анимация mask/clip-path на ТВ даёт 6-17 fps). */
.bzone-title{
    flex:0 0 auto; margin-top:3.2vh;
    overflow:hidden; line-height:.84; font-weight:800;
    text-transform:uppercase; white-space:nowrap; color:#fff;
}
.bzone-title span{ display:block; }
#cc-bzone.is-in .bzone-title span{ animation:bz-lift .48s var(--bz-set) .26s both; }
@keyframes bz-lift{ from{transform:translate3d(0,104%,0)} to{transform:none} }

/* Линейка под титулом = полоса жизни сцены: та же, что его представила. */
.bzone-rule{
    flex:0 0 auto; margin-top:2.6vh; height:.75vh; background:rgba(255,255,255,.10);
    position:relative; overflow:hidden;
}
.bzone-rule i{
    display:block; height:100%; width:100%;
    background:rgb(var(--accent-soft-rgb,255,86,102));
    transform:scaleX(0); transform-origin:left;
}
#cc-bzone.is-in .bzone-rule i{
    animation:bz-rule .40s var(--bz-rule) .30s both,
              bz-drain var(--life,12000ms) linear .70s both;
}
@keyframes bz-rule { from{transform:scaleX(0)}  to{transform:scaleX(1)} }
@keyframes bz-drain{ from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* ── Нижняя часть полосы ──────────────────────────────────────────────────── */
/* Набор и фото начинаются С ОДНОЙ ЛИНИИ. По центру текстовая колонка висела
   в середине фото: на 1080p сверху от неё оставалось 156px пустоты и снизу
   157px, а слева между линейкой и первой строкой зияло 193px — ни одной общей
   грани у двух блоков, и полоса читалась как собранная наспех. Верхний край
   общий — глазу есть за что зацепиться, а воздух под набором работает как
   поле плаката. Фото по-прежнему тянется на всю высоту (align-self:stretch). */
.bzone-row{ flex:1 1 auto; min-height:0; display:flex; gap:4vw; align-items:flex-start; margin-top:3.4vh; }
.bzone-col{ flex:1 1 46%; min-width:0; display:flex; flex-direction:column; gap:2.4vh; }
/* Без фото равняться не на что — набор занимает полосу целиком и центруется. */
.bzone-card--poster.is-textonly .bzone-row{ align-items:center; }
.bzone-card--poster.is-textonly .bzone-col{ flex:1 1 100%; }

.bzone-offer{
    font-size:clamp(17px,7.4vh,108px); line-height:1.06; font-weight:500;
    color:rgba(255,255,255,.90); text-wrap:pretty;
}
/* CTA — набор с акцентным подчёркиванием. Ни пилюль, ни кнопок: на табло
   нечего нажимать, а текст на цветной плашке запрещён (см. выше). */
.bzone-cta{ align-self:flex-start; }
.bzone-cta span{
    position:relative; display:inline-block; padding-bottom:1vh;
    font-size:clamp(18px,7.4vh,108px); font-weight:700; line-height:1; color:#fff;
}
.bzone-cta span::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:.75vh;
    background:rgb(var(--accent-rgb,255,46,59));
    transform:scaleX(0); transform-origin:left;
}
#cc-bzone.is-in .bzone-offer{ animation:bz-set .28s cubic-bezier(.2,.8,.2,1) .56s both; }
#cc-bzone.is-in .bzone-cta  { animation:bz-set .28s cubic-bezier(.2,.8,.2,1) .64s both; }
#cc-bzone.is-in .bzone-cta span::after{ animation:bz-rule .18s var(--bz-rule) .76s both; }
@keyframes bz-set{ from{opacity:0; transform:translate3d(0,1.8vh,0)} to{opacity:1; transform:none} }

/* Фото рекламодателя стоит В ПОЛЯХ полосы. Раньше оно уходило навылет за правый
   обрез — задумывалось как кадрирование полосой, а на экране читалось просто
   как вылезшая за край картинка: марка, титул, линейка и рейка держат правое
   поле, и только фото его ломало. Вниз оно тоже не идёт: нижние 147 px
   оплаченного фото оказывались под служебной рейкой с часами, то есть мы
   закрывали своим интерфейсом то, за что заплатил рекламодатель. Нижнее поле
   карточки уже зарезервировано под рейку, поэтому фото кончается над ней. */
.bzone-media{
    flex:1 1 54%; align-self:stretch; min-width:0; position:relative;
    overflow:hidden;
}
.bzone-media img{ width:100%; height:100%; object-fit:cover; display:block; }
#cc-bzone.is-in .bzone-media{ animation:bz-set .34s var(--bz-set) .42s both; }

/* ── A. Готовый макет 16:9 ────────────────────────────────────────────────── */
.bzone-card--plate{ padding:var(--bz-pad-y) var(--bz-pad-x) calc(var(--bz-pad-y) + 9vh); }
.bzone-full{ position:absolute; inset:0; }
/* contain, а НЕ cover. На телевизоре 16:9 разницы нет — макет и так занимает
   кадр целиком. А на любом другом соотношении (окно браузера, ультраширокая
   панель, вертикальный экран) cover срезал макет по краям: в окне 1280×455
   от кадра 16:9 оставалась средняя треть, и заголовок рекламодателя уезжал
   под обрез. Резать то, за что заплатил рекламодатель, нельзя — по той же
   причине, по которой фото не заходит под служебную рейку. Пусть лучше по
   краям будет поле фона. */
.bzone-full img{ width:100%; height:100%; object-fit:contain; display:block; transform:scale(1.006); }
/* Медленный дрейф: движение важнее его интенсивности (замеры DOOH: статика
   +38% к запоминанию, full motion +41% — три пункта разницы). */
#cc-bzone.is-in .bzone-full img{
    animation:bz-reveal .30s ease-out .18s both,
              bz-drift var(--life,12000ms) linear both;
}
@keyframes bz-reveal{ from{opacity:0} to{opacity:1} }
@keyframes bz-drift { from{transform:scale(1.006) translate3d(0,0,0)}
                      to  {transform:scale(1.042) translate3d(-.5%,-.4%,0)} }
/* Шторка: непрозрачная плита уезжает и открывает макет. Настоящий броадкастный
   wipe одним transform сплошного слоя — статичная маска, дешёвое движение. */
.bzone-cover{ position:absolute; inset:0; background:#05060a; transform-origin:right; }
#cc-bzone.is-in .bzone-cover{ animation:bz-cover .46s cubic-bezier(.66,0,.16,1) .16s both; }
@keyframes bz-cover{ from{transform:translate3d(0,0,0)} to{transform:translate3d(100.5%,0,0)} }
/* Затемнение под служебными надписями — ЗАПЕЧЁННЫЙ градиент, не blur: на
   полноэкранном слое blur стоит кадров, результат тот же. */
.bzone-scrim{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(3,4,8,.88) 0%, rgba(3,4,8,.34) 15%, transparent 30%),
               linear-gradient(0deg,   rgba(3,4,8,.92) 0%, rgba(3,4,8,.46) 13%, transparent 28%);
}
.bzone-card--plate .bzone-rule{ margin-top:auto; }

/* ── C. QR ────────────────────────────────────────────────────────────────── */
/* Правило 10:1 — код ловится примерно с десяти своих размеров, значит для трёх
   метров нужно ~30 см ≈ 600px на 1080p. Прежние 340px хватало на 1.7 м. */
.bzone-card--code .bzone-row{ align-items:center; }
/* Скоуп обязателен: класс .bzone-qr живёт и в боковой карточке борда, и без
   #cc-bzone этот размер выносил код за край экрана на 74px. */
#cc-bzone .bzone-qr{
    flex:0 0 auto; width:min(56vh,620px);
    display:flex; align-items:center; justify-content:center;
    padding:2.2vh; background:#fff;
}
#cc-bzone .bzone-qr img, #cc-bzone .bzone-qr canvas, #cc-bzone .bzone-qr svg{
    display:block; width:100%; height:auto;
}
#cc-bzone.is-in .bzone-qr{ animation:bz-set .34s var(--bz-set) .44s both; }

/* ── Служебная рейка: часы не пропадают ───────────────────────────────────── */
.bzone-rail{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:0 var(--bz-pad-x) 2.4vh;
    background:linear-gradient(0deg, rgba(3,4,8,.94) 42%, rgba(3,4,8,0) 100%);
}
.bzone-rail .tk-rail{ padding-bottom:0; }
#cc-bzone.is-in .bzone-rail{ animation:bz-set .34s var(--bz-set) .20s both; }

/* Плавная подмена содержимого постоянных зон при ротации. */
.bzone-slot, .bzone-ticker, .card-bzone{ transition:opacity .22s ease; }
.bzone-slot.is-swap, .bzone-ticker.is-swap, .card-bzone.is-swap{ opacity:0; }

/* ── Плита партнёра в шапке ───────────────────────────────────────────────── */
/* Плита живёт в ПРАВОМ углу — на месте дубля названия и знака клуба. Пока она
   стояла строкой за названием слева, шапка читалась как «ЧЕК-КОЛ РЕКЛАМА З»:
   слово приклеивалось к имени клуба, а знак рядом с капителями выглядел
   случайным артефактом. Теперь углы разведены: слева бренд клуба, справа —
   рекламодатель, и между ними марка платформы.
   Внутри плиты: подпись НАД знаком, фиксированная коробка (смена рекламодателя
   не двигает шапку), выключка в свой край. */
.bzone-slot[hidden]{display:none !important;}
.bzone-slot{
    display:flex; flex-direction:column; align-items:flex-start;
    gap:.45vh; margin-left:1.8vw; flex:0 0 auto;
    /* Фиксированная коробка под словесный знак: у рекламодателей пропорции
       разные, и без фикса смена логотипа дёргала бы всю шапку. Ширина взята
       так, чтобы знак был заметен, но не спорил с названием клуба. */
    width:clamp(130px,16vh,240px);
}
.bzone-slot-tag{
    font-size:clamp(9px,1.35vh,17px); line-height:1;
    letter-spacing:.2em; text-transform:uppercase; font-weight:700;
    color:var(--text-muted); white-space:nowrap;
}
.bzone-slot img{
    display:block; width:100%; height:clamp(24px,3.6vh,52px);
    object-fit:contain; object-position:left center; opacity:.96;
}
/* Обе логотипные зоны стоят в правом углу — знаком в свой край. Размер взят
   вровень с бренд-блоком клуба напротив: плита должна читаться с зала как
   полноценный знак, а не как сноска.
   Подпись и знак стоят В ОДНУ СТРОКУ. Пока подпись висела НАД знаком, правый
   угол был на 13px выше левого: шапка росла под него, а знак рекламодателя
   садился на 9px ниже названия клуба — углы шли по разным осям, и плита
   читалась как приклеенная. В строку — оба знака на одной оптической оси.
   Плита прижата к правому краю и по ширине содержимого, а «не дёргается при
   смене рекламодателя» держит ФИКСИРОВАННАЯ коробка ЗНАКА: подпись стоит
   вплотную к знаку и не ездит. Растягивать плиту на всю боковую колонку
   нельзя — подпись отрывалась от знака на 200px и висела сама по себе. */
.top-right .bzone-slot--logo{
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:.8vw;
    margin-left:0; margin-right:0;
    width:auto;
    max-width:100%;
}
.top-right .bzone-slot--logo .bzone-slot-tag{ flex:0 0 auto; }
.top-right .bzone-slot--logo img{
    flex:0 0 auto;
    width:clamp(120px,15vh,200px);
    object-position:right center;
    height:clamp(28px,4.4vh,60px);
}
/* Куплены обе зоны — плиты стоят рядом, с воздухом между ними. */
.top-right .bzone-slot--logo + .bzone-slot--logo{ margin-left:1.6vw; }
/* Центральный — рядом с маркой платформы, по той же оси, что и углы. */
.bzone-slot--header{
    flex-direction:row; align-items:center; justify-content:center;
    gap:.8vw; margin:0; width:auto;
}
.bzone-slot--header .bzone-slot-tag{ flex:0 0 auto; }
.bzone-slot--header img{
    flex:0 1 auto; width:auto; min-width:0;
    object-position:center; height:clamp(22px,3.2vh,46px);
}

/* ── Информационная (бегущая) строка ──────────────────────────────────────── */
.bzone-ticker[hidden]{display:none !important;}
.bzone-ticker{
    /* Выключка по тем же краям, что у блайндов и дисклеймера: собственный
       --pad-x сдвигал строку на 14px внутрь, и она стояла криво между ними.
       Вертикальный ритм задаёт ТОЛЬКО сетка .root и симметричные поля. Свои
       margin 1.1vh/0.9vh давали сверху на 2px больше, чем снизу, а inline-flex
       тянул за собой базовую линию — под строкой копилось ещё 5px пустоты.
       В сумме от блайндов до текста выходило 44px, а от текста до дисклеймера
       35px: строка стояла между ними заметно не по центру. line-height:0 на
       коробке + vertical-align:top на бегунке убирают зазор базовой линии,
       высота коробки становится ровно padding+текст+padding. */
    position:relative; margin:0; padding:1.1vh 0; line-height:0;
    /* Волосяные линии с ОБЕИХ сторон: строка читается как отдельная полоса
       между блайндами и дисклеймером, а не как хвост блайндов. Заодно ровно
       добивает симметрию — сверху и снизу от текста теперь одно и то же:
       gap + линия + 1.1vh. */
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    font-size:clamp(15px,2.9vh,40px); font-weight:600; color:var(--text);
    white-space:nowrap;
    /* Строка обязана уметь быть уже своего текста: иначе её max-content
       становится шириной всей доски (см. .root). */
    min-width:0;
}
/* Растушёвка и обрезка живут на внутренней обойме, а не на самой полосе:
   маска на элементе гасила и его собственные рамки — у краёв линии уходили в
   ноль, и полоса выглядела оборванной. Ширина растушёвки 7%, а не 3%: на 3%
   это всего 50px, и текст обрубался посреди буквы — обрубок читался как
   второй, сломанный текст. */
.bzone-ticker-mask{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.bzone-ticker-run{
    display:inline-flex; align-items:center;
    vertical-align:top; line-height:1;
    /* Скорость от длины текста (--run ставит js): одна линейная скорость чтения
       для любой фразы. Фиксированные 38 с гнали короткую строку ползком. */
    animation:bzone-ticker-run var(--run,38s) linear infinite;
}
.bzone-ticker-item{display:inline-flex; align-items:center; gap:1.2vw; padding-right:6vw;}
/* Лента бесконечная: js (_adsFitTicker) размножает фразу так, чтобы ПОЛОВИНА
   ленты была не уже полосы. Тогда сдвиг на -50% подставляет вторую половину
   ровно на место первой, шов не виден, и на экране всегда есть текст — ни
   пустого хвоста справа, ни «резкого появления» следующей копии. */
.bzone-ticker-item b{
    padding:.4vh .9vw; border-radius:var(--pill);
    background:rgba(var(--accent-rgb,255,46,59),.16);
    color:rgba(var(--accent-soft-rgb,255,86,102),1);
    font-size:.6em; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
}
@keyframes bzone-ticker-run{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}

/* ── Карточка QR в боковой колонке ────────────────────────────────────────── */
.card-bzone[hidden]{display:none !important;}
/* Боковой QR масштабируется от ШИРИНЫ КАРТОЧКИ, а не от высоты экрана —
   иначе на широком борде он вылезает за колонку. */
.card-bzone .bzone-qr{
    display:flex; align-items:center; justify-content:center;
    width:100%; padding:1.4vh; margin-top:.8vh;
    /* ...но и по ВЫСОТЕ экрана тоже: колонка на 1280×720 раздувалась до 941px
       из-за одного рекламного QR, и fitToScreen ужимал всю доску до 58% —
       подписи превращались в 6px. Квадрат остаётся сканируемым (≥180px на
       720p), а доска больше не платит за него масштабом. */
    max-width:min(100%, 26vh);
    margin-left:auto; margin-right:auto;
    background:#fff; border-radius:calc(var(--radius) * .6);
}
.card-bzone .bzone-qr img, .card-bzone .bzone-qr canvas, .card-bzone .bzone-qr svg{
    display:block; width:100%; height:auto; max-width:100%;
}

.bzone-qr-sub{margin-top:1vh; font-size:clamp(13px,2.4vh,32px); color:rgba(255,255,255,.82); text-align:center;}

/* ── Служебная плашка демо-режима ─────────────────────────────────────────── */
/* ?bzdemo=1 — показать модуль клиенту за десять секунд. Видно, что это демо,
   чтобы никто не принял ускоренную ротацию за боевое поведение. */
body.bzone-demo #cc-bzone .bzone-mark::after{
    content:"демо"; margin-left:.8vw; padding:.6vh 1.1vw;
    border:1px solid rgba(255,255,255,.28); border-radius:var(--pill);
    color:rgba(255,255,255,.7); font-size:.72em; letter-spacing:.1em;
}

/* ── Уважение к системной настройке ───────────────────────────────────────── */
/* На ТВ её включают, когда движение мешает. Гасим ВСЁ, что добавили выше,
   оставляя простой кроссфейд: контент обязан оставаться видимым. */
@media (prefers-reduced-motion:reduce){
    /* Гасим ВСЁ, что добавили выше, оставляя простой кроссфейд. Контент обязан
       остаться видимым: анимации входа не должны быть единственным способом
       его показать. */
    #cc-bzone.is-in, #cc-bzone.is-out{ animation-duration:.2s; animation-timing-function:linear; }
    #cc-bzone.is-out::after{ animation:none; opacity:0; }
    #cc-bzone.is-in .bzone-mark,
    #cc-bzone.is-in .bzone-title span,
    #cc-bzone.is-in .bzone-offer,
    #cc-bzone.is-in .bzone-cta,
    #cc-bzone.is-in .bzone-media,
    #cc-bzone.is-in .bzone-qr,
    #cc-bzone.is-in .bzone-rail,
    #cc-bzone.is-in .bzone-full img{ animation:none !important; opacity:1 !important; transform:none !important; }
    #cc-bzone.is-in .bzone-cover{ animation:none !important; transform:translate3d(100.5%,0,0) !important; }
    #cc-bzone.is-in .bzone-mark-tag::after,
    #cc-bzone.is-in .bzone-cta span::after,
    #cc-bzone.is-in .bzone-rule i{ animation:none !important; transform:scaleX(1) !important; }
    .bzone-ticker-run{ animation:none; }
    .bzone-slot, .bzone-ticker, .card-bzone{ transition:none; }
}


/* =========================
   КНОПКА «ВО ВЕСЬ ЭКРАН»
   =========================
   Табло смотрят с телевизора, и адресная строка браузера остаётся висеть над
   картинкой. Со страницы её не убрать, поэтому даём вызвать Fullscreen API
   пальцем или пультом — F11 есть не у каждого телевизора.
   В покое кнопка почти не видна: это витрина зала, а не пульт. Наводка, фокус
   и касание проявляют её целиком. Ниже панели настроек по z-index — открытая
   панель её перекрывает, и промахнуться по соседней кнопке нельзя.
   Размер в vh, а не в пикселях: табло тянется под экран, и одна и та же
   кнопка на 4К-телевизоре выглядела бы вдвое мельче, чем на ноутбуке.
   Пальцу и пульту при этом есть куда попасть — зону клика расширяет ::after,
   не увеличивая сам кружок. */
.fs-btn{
    position:fixed;
    right:12px;
    bottom:12px;
    z-index:40;

    width:clamp(20px, 2.2vh, 30px);
    height:clamp(20px, 2.2vh, 30px);
    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;
    border:1px solid var(--border);
    border-radius:50%;
    background: linear-gradient(180deg, var(--panel-glass), var(--panel-glass-2));
    color: var(--text-muted);
    cursor:pointer;

    opacity:.1;
    transition:opacity .18s ease, color .18s ease, transform .18s ease;
}
.fs-btn::after{
    content:"";
    position:absolute;
    inset:-12px;
    border-radius:50%;
}
@supports (backdrop-filter: blur(6px)){
    .fs-btn{ backdrop-filter: blur(6px); }
}
.fs-btn:hover,
.fs-btn:focus-visible{
    opacity:1;
    color: var(--text);
    transform:translateY(-1px);
}
.fs-btn:focus-visible{ outline:2px solid var(--border); outline-offset:2px; }
.fs-btn:active{ transform:translateY(0); }
.fs-btn[hidden]{ display:none; }

.fs-ico{ width:62%; height:62%; display:block; }
/* Внутри полного экрана та же кнопка возвращает обратно: меняется только знак. */
.fs-btn .fs-ico-out{ display:none; }
.fs-btn.is-fs .fs-ico-in{ display:none; }
.fs-btn.is-fs .fs-ico-out{ display:block; }

@media (prefers-reduced-motion:reduce){
    .fs-btn{ transition:opacity .18s ease; }
    .fs-btn:hover, .fs-btn:focus-visible, .fs-btn:active{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ЛЁГКИЙ РЕЖИМ ДЛЯ СЛАБЫХ ТВ (html.lite ставит initLite в js.js)
   ═══════════════════════════════════════════════════════════════════════════
   Замер маячками 13-14.08.2026 (клуб «Гриндер», Hartens HTY-43F06B, Android
   11, 1 ГБ RAM, лимит кучи 242 МБ): JS-куча стояла на 10 МБ и 475 узлов, а
   рендерер вставал на минуты — до 374 с. Течёт не JS: непрерывные анимации,
   тени и блюры держат композитор и нативную память браузера, которой на 1 ГБ
   нет. На 2 и 4 ГБ в те же часы провалов ноль, поэтому гасим только на слабом
   устройстве, вид на нормальных ТВ не трогаем.

   Гасим ТОЧЕЧНО, а не «animation:none на всё». Первый вариант так и делал —
   и накрыл шторку .bzone-cover: непрозрачная плита уезжает с макета рекламы
   только анимацией, без неё реклама остаётся под чёрным. Тот же капкан у
   объявления рассадки (.tk-*) и полос scaleX(0). Правило: снимаем только
   БЕСКОНЕЧНЫЕ (декоративные) анимации, короткие «въезды» оставляем — они
   отрабатывают один раз и кадров не стоят. */

/* 1. Бесконечные анимации-украшения. Элементы остаются видимыми: у всех
      базовые стили самодостаточны, анимация лишь дышит/переливается. */
html.lite body.t-soon #cc-fx::before,
html.lite body.t-critical #cc-fx::before,
html.lite body.t-critical .timer-wrap,
html.lite .run-chip[data-state="run"]::before,
html.lite body.t-break #timer-level,
html.lite .tk-cl::after,
html.lite .tk-cl-rail::after,
html.lite .tk-cl-name,
html.lite .tk-cl-hr b,
html.lite .tk-cl-stack,
html.lite .tk-cl-glint,
html.lite .tk-cl-score::before,
html.lite .tk-rail-brand .dot{ animation:none !important; }
/* Бегущая строка рекламы НЕ трогается: она платная и без движения не читается. */

/* 2. Слои, которые существуют только ради движения: фоновый дрейф в полтора
      экрана, всплывающие фишки за чип-лидером, световой след пересадки. */
html.lite body::before,
html.lite .tk-cl-fx,
html.lite .tk-track i{ display:none !important; }

/* 3. Постоянная работа композитора: блюры, свечения, тени, лишние слои.
      Ничего не прячут — только рисуют дороже, чем стоит результат. */
html.lite *,
html.lite *::before,
html.lite *::after{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
    will-change:auto !important;
}