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