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

/* =========================
   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(56vmin, 52vh, 540px);

    --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: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;
    height:100vh;
    height:100dvh;

    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{
    width:48px;height:48px;
    object-fit:contain;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft);
}

html[data-theme="light"] .logo{
    filter: brightness(0) saturate(100%)
    invert(12%) sepia(62%) saturate(5200%)
    hue-rotate(346deg) brightness(.95) contrast(1.06);
}

.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;
}

.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:12px;
    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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight:1000;
    letter-spacing:.10em;
    font-variant-numeric: tabular-nums;
    font-size: clamp(60px, 14vmin, 170px);
    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(54vmin, 46vh, 520px);
        --side-w: min(400px, 26vw);
    }
    .top-bar{ min-height: 56px; }
    .logo{ width:42px;height: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(54px, 12vmin, 150px); }
    .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(50vmin, 42vh, 470px);
        --side-w: min(380px, 28vw);
    }
    .timer-value{ font-size: clamp(48px, 11vmin, 132px); }
    .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(48vmin, 44vh, 480px);
    }

    .top-bar{ min-height: 56px; }
    .logo{ width:40px; height: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(52px, 11vmin, 140px); }

    .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;
        grid-template-rows: auto auto auto auto;

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

    .top-bar{
        grid-template-columns: 1fr;
        gap:10px;
        min-height:unset;
    }
    .top-left{ justify-self:start; }
    .top-center{ justify-self:start; }
    .top-right{ justify-self:start; }

    .main{
        grid-template-columns: 1fr;
        gap:12px;
        align-items:start;
    }
    .col-left, .col-right{ width:100%; }
    .col-right{ order: 3; }
    .col-center{ order: 2; }

    :root{ --timer-size: min(84vw, 420px); }

    .blinds-row{
        grid-template-columns: 1fr;
        gap:12px;
    }

    /* 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; } /* горизонтальный скролл на мобиле — нормально */
}

@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(980px, 92vw);
    padding: 22px 26px;
    border-radius: 22px;
    text-align:center;
    z-index: 80;

    background: linear-gradient(180deg, rgba(18,18,22,.82), rgba(10,10,14,.64));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 2px solid rgba(var(--accent-soft-rgb,255,80,110), .42);
    box-shadow:
            0 22px 70px rgba(0,0,0,.65),
            0 0 0 1px rgba(255,255,255,.06) inset,
            0 0 64px rgba(255, 40, 70, .26);

    opacity: 0;
    filter: saturate(1.2);
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}

.addon-banner.is-on{
    opacity: 1;
    transform: translateX(-50%) scale(1);
    overflow:hidden;
    animation:
            addonPop .65s cubic-bezier(.2,.9,.2,1) both,
            addonGlow 1.15s ease-in-out infinite;
}

/* БОЛЬШОЙ, ЧИТАЕМЫЙ заголовок */
.addon-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 14px;

    padding: 16px 26px;
    border-radius: 999px;

    font-weight: 1000;
    letter-spacing: .20em;
    text-transform: uppercase;
    font-size: clamp(18px, 2.2vw, 30px);

    color: rgba(255,255,255,.98);
    background: radial-gradient(140% 220% at 50% 0%,
    rgba(255,110,140,.75) 0%,
    rgba(255,35,70,.92) 45%,
    rgba(140,10,30,.92) 100%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
            0 16px 40px rgba(255, 40, 70, .22),
            0 0 0 1px rgba(0,0,0,.25) inset,
            0 0 34px rgba(var(--accent-rgb,255,60,90), .30);
    position: relative;
    overflow:hidden;
}

/* Подзаголовок — тоже крупнее */
.addon-sub{
    margin-top: 14px;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.25;
    color: rgba(255,255,255,.76);
    text-shadow: 0 10px 24px rgba(0,0,0,.65);
}

/* ОСТАВШЕЕСЯ ВРЕМЯ — СУПЕР КРУПНО */
#addon-left{
    display:inline-block;
    margin-left: 6px;

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

    font-size: clamp(22px, 2.4vw, 34px);
    color: rgba(255,255,255,.98);

    background: rgba(var(--accent-rgb,255,55,85), .14);
    border: 2px solid rgba(var(--accent-soft-rgb,255,70,110), .28);
    padding: 6px 14px;
    border-radius: 14px;
    box-shadow:
            0 18px 44px rgba(255, 40, 70, .18),
            0 0 28px rgba(var(--accent-rgb,255,60,90), .18);
}

/* Если последние 60 сек — прям “сирена” */
.addon-banner.is-urgent{
    border-color: rgba(var(--accent-soft-rgb,255,80,110), .70);
    box-shadow:
            0 26px 90px rgba(0,0,0,.72),
            0 0 0 1px rgba(255,255,255,.08) inset,
            0 0 96px rgba(255, 40, 70, .40);
    animation:
            addonPop .65s cubic-bezier(.2,.9,.2,1) both,
            addonGlow .65s ease-in-out infinite;
}
.addon-banner.is-urgent .addon-badge{
    animation: badgePulse .55s ease-in-out infinite;
}

/* Очень большие ТВ/проектор — ещё больше */
@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:40;

    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);
    animation:chipracePulse 2.2s ease-in-out infinite;
}

.chiprace-banner__badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    padding:12px 20px;
    border-radius:999px;

    font-size:clamp(16px, 1.3vw, 22px);
    font-weight:1000;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:rgba(255,255,255,.98);

    background:linear-gradient(180deg, rgba(var(--accent-rgb,255,60,85),.96), rgba(var(--accent-deep-rgb,180,20,40),.96));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:
            0 14px 36px rgba(255,40,70,.24),
            0 0 0 1px rgba(0,0,0,.24) inset;
}

.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__badge{
    background:linear-gradient(180deg, rgba(var(--accent-rgb,123,15,26),.96), rgba(var(--accent-deep-rgb,92,10,18),.96));
}

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