/* /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;
    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;
    gap: var(--gap);

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

/* =========================
   TOP BAR
   ========================= */
.top-bar{
    display:grid;
    grid-template-columns: 1fr auto 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;
}

.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);
    filter: drop-shadow(var(--ring-glow));
    z-index:10;
}

.ring-bg{
    fill:none;
    stroke: var(--ring-bg);
    stroke-width: 8;
}
.ring-fg{
    fill:none;
    stroke: var(--accent);
    stroke-width: 11;
    stroke-linecap:round;
    transition: stroke-dashoffset .22s 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; }
}

/* 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;
    }

    /* Шапка на мобиле — аккуратный левый flex-столбец: логотип+название,
       затем бренд, затем чипы. Все группы выровнены ВЛЕВО с ровным отступом
       (раньше центр был по центру, а чипы жались вправо и переносились). */
    .top-bar{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        min-height:unset;
    }
    .top-left{ justify-self:start; }
    .top-center{ justify-self:start; justify-content:flex-start; flex-wrap:wrap; }
    .top-right{ justify-self:start; justify-content:flex-start; }

    .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; }    /* статистика */
    .legal-note{ order: 5; }

    :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);
    transition:width .22s 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;
    background:
        radial-gradient(38% 38% at 28% 30%, rgba(var(--accent-rgb,255,46,59),.12), transparent 70%),
        radial-gradient(42% 42% at 76% 72%, rgba(var(--accent-soft-rgb,255,86,102),.10), transparent 70%);
    filter: blur(46px);
    animation: ccDrift 26s ease-in-out infinite alternate;
}
html[data-theme="light"] body::before{
    background:
        radial-gradient(38% 38% at 28% 30%, rgba(var(--accent-rgb,123,15,26),.10), transparent 70%),
        radial-gradient(42% 42% at 76% 72%, rgba(var(--accent-rgb,123,15,26),.06), transparent 70%);
}
@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;
}
body.t-soon #cc-fx::before{
    opacity:.5;
    animation: ccVignette 1.8s ease-in-out infinite;
}
body.t-critical #cc-fx::before{
    opacity:.92;
    animation: ccVignette .8s ease-in-out infinite;
}
@keyframes ccVignette{
    0%,100%{ transform: scale(1.06); filter: saturate(1); }
    50%{ transform: scale(1); filter: saturate(1.35); }
}
/* 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) */
#timer-ring{ transition: filter .5s ease; }
body.t-running #timer-ring{ filter: drop-shadow(0 0 40px rgba(var(--accent-soft-rgb,255,86,102),.55)); }
body.t-soon     #timer-ring{ filter: drop-shadow(0 0 50px rgba(var(--accent-rgb,255,46,59),.72)); }
body.t-critical #timer-ring{ filter: drop-shadow(0 0 62px rgba(var(--accent-rgb,255,46,59),.88)); }
body.t-break    #timer-ring{ filter: drop-shadow(0 0 30px rgba(var(--accent-soft-rgb,255,86,102),.40)); }

/* level-change shockwave — double ripple radiating from the dial */
.timer-wrap{ will-change: transform; }
.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){
    .brand-word{ font-size:15px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ОБЪЯВЛЕНИЕ РАССАДКИ — полноэкранный «свап» табло
   Пересадка / финальный стол / схема столов на 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);}

/* ── СЦЕНА: СХЕМА СТОЛОВ ─────────────────────────────────────────────────── */
.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;}
}