/* ═══════════════════════════════════════════════════════════════════════
   POKER MANAGER · NEXT — экран для игроков
   Стеклянные панели поверх размытого фона клуба. Один цвет текста,
   свечение вместо заливок, плавная смена цифр. Всё в vh/vw.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --bg: #05060a;
    --ink: #f4f5f8;
    --ink2: rgba(244, 245, 248, .62);
    --ink3: rgba(244, 245, 248, .38);
    --glass: linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.035) 100%);
    --edge: rgba(255, 255, 255, .11);
    --hot: #ff4d4d;
    --ok: #7fe0a4;
    --gold: #f0cf7a;
    --silver: #d6dbe2;
    --bronze: #d9a073;
    --r: clamp(14px, 2.2vh, 60px);
    --gap: clamp(8px, 1.4vh, 36px);
    --f-ui: 'Onest', ui-sans-serif, system-ui, sans-serif;
    --f-d: 'Unbounded', 'Onest', ui-sans-serif, sans-serif;
    --ease: cubic-bezier(.22, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body.tv-page { background: var(--bg); color: var(--ink); height: 100%; overflow: hidden; }
body.tv-page { font-family: var(--f-ui); -webkit-font-smoothing: antialiased; }

.scr { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: var(--bg); }

/* ── Фон ──────────────────────────────────────────────────────────────── */
.scr-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; z-index: -3;
    filter: blur(48px) saturate(1.3) brightness(.55); transform: scale(1.05); }
.aura { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
    background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(5,6,10,.25), rgba(5,6,10,.85) 80%); }
.aura::before, .aura::after {
    content: ''; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(80px); opacity: .35;
}
.aura::before { left: -20vmax; top: -25vmax; background: radial-gradient(circle, rgba(120,140,255,.55), transparent 65%); animation: drift-a 38s ease-in-out infinite alternate; }
.aura::after { right: -25vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(255,120,170,.4), transparent 65%); animation: drift-b 46s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-16vmax, -10vmax) scale(1.1); } }
.scr.is-last .aura::before, .scr.is-last .aura::after { background: radial-gradient(circle, rgba(255,60,60,.55), transparent 65%); }

/* ── Стекло ───────────────────────────────────────────────────────────── */
.glass {
    position: relative; border-radius: var(--r);
    background: var(--glass);
    border: 1px solid var(--edge);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(0,0,0,.25),
        0 20px 60px -20px rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    overflow: hidden;
}
/* глянцевый блик сверху */
.glass::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 48%; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0));
    border-radius: var(--r) var(--r) 0 0;
}
.k { font-size: clamp(10px, 1.55vh, 36px); font-weight: 500; color: var(--ink2); letter-spacing: .02em; }
.k b { font-family: var(--f-d); font-weight: 600; color: var(--ink); margin-left: .25em; }

/* ── Плавные цифры ────────────────────────────────────────────────────── */
.roll { display: inline-flex; align-items: baseline; white-space: nowrap; }
.roll > span { display: inline-block; animation: roll-in .55s var(--ease) both; }
.roll-d { width: .74em; text-align: center; }
.roll-s { width: auto; padding: 0 .02em; }
.roll-sp { width: .28em; }
/* только transform + opacity: без filter, чтобы не грузить слабые ТВ-приставки */
@keyframes roll-in { from { transform: translateY(-.45em); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Шапка ────────────────────────────────────────────────────────────── */
.top {
    flex-shrink: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    height: clamp(56px, 10vh, 240px); padding: 0 clamp(16px, 2.2vw, 88px);
}
.top-logo { height: clamp(34px, 6.4vh, 160px); display: flex; align-items: center; }
.top-logo img { height: 100%; max-width: 18vw; object-fit: contain; filter: drop-shadow(0 4px 20px rgba(0,0,0,.5)); }
.top-logo span { width: clamp(34px, 6.4vh, 160px); height: 100%; border-radius: 30%; display: grid; place-items: center;
    background: var(--glass); border: 1px solid var(--edge); font-size: 3.2vh; }
.top-title { text-align: center; min-width: 0; }
.top-name { font-family: var(--f-d); font-weight: 700; font-size: clamp(16px, 3.4vh, 84px); letter-spacing: -0.01em; line-height: 1.1;
    max-width: 52vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.phase { display: inline-flex; align-items: center; gap: .6em; margin-top: .55vh; font-size: clamp(10px, 1.6vh, 36px); color: var(--ink2); font-weight: 500; }
.phase i { width: .55em; height: .55em; border-radius: 50%; background: var(--ink3); }
.phase-registration i { background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: pulse 2s ease-in-out infinite; }
.phase-addon i { background: #9cc3ff; box-shadow: 0 0 12px #9cc3ff; animation: pulse 2s ease-in-out infinite; }
.phase b { font-family: var(--f-d); font-weight: 500; color: var(--ink); }
@keyframes pulse { 50% { opacity: .35; } }
.top-tools { display: flex; justify-content: flex-end; gap: 8px; transition: opacity .6s; }
.scr.is-idle .top-tools { opacity: 0; } /* остаются нажимаемыми: первое касание сразу срабатывает */
.tool { width: clamp(34px, 4.8vh, 108px); height: clamp(34px, 4.8vh, 108px); border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: var(--glass); border: 1px solid var(--edge); color: var(--ink2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: color .2s, background .2s; }
.tool:hover { color: var(--ink); background: rgba(255,255,255,.14); }
.tool.is-on { color: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 0 20px rgba(255,255,255,.15); }

/* ── Доска ────────────────────────────────────────────────────────────── */
.board {
    flex: 1 1 0; min-height: 0; display: grid; gap: var(--gap);
    grid-template-columns: minmax(0, 21fr) minmax(0, 58fr) minmax(0, 21fr);
    padding: 0 clamp(16px, 2.2vw, 88px) var(--gap);
}
.col { min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }

/* Левые плитки */
.tile { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(14px, 1.4vw, 60px); }
.tile .v { font-family: var(--f-d); font-weight: 600; font-size: clamp(18px, 4.6vh, 116px); letter-spacing: -0.02em; line-height: 1.1; margin-top: .35vh; }
.tile .v-sm { font-size: clamp(14px, 3.4vh, 84px); }
.tile .v.is-dim { color: var(--ink3); }
.tile .of { font-size: .55em; color: var(--ink3); font-weight: 500; margin-left: .1em; }
.tile-flat { flex: .75 1 0; }

/* Центр */
.bar { flex-shrink: 0; text-align: center; padding: clamp(8px, 1.6vh, 44px) 2vw; }
.blinds { font-family: var(--f-d); font-weight: 600; font-size: clamp(22px, 6.2vh, 164px); letter-spacing: -0.02em; line-height: 1.1; margin-top: .3vh; white-space: nowrap; }
.blinds .ante { color: var(--ink2); font-weight: 500; margin-left: .35em; }
.blinds-next { font-size: clamp(16px, 4.2vh, 108px); color: var(--ink2); font-weight: 500; }
.blinds-next .ante { color: var(--ink3); }
.blinds-word { font-family: var(--f-d); }
.dim { color: var(--ink3); }

.hero { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.4vh 2.4vw 2vh; }
.clock {
    font-family: var(--f-d); font-weight: 800;
    font-size: clamp(64px, min(30vh, 14.5vw), 760px);
    line-height: .92; letter-spacing: -0.04em;
    color: #fff;
    text-shadow: 0 1px 0 rgba(255,255,255,.4), 0 10px 50px rgba(0,0,0,.45);
    transition: opacity .6s, color .6s;
}
.clock .roll-d { width: .78em; }
.clock .roll-s { padding: 0 .02em; transform: translateY(-.05em); }
.scr.is-pause .clock { opacity: .55; }
.scr.is-last .clock { color: var(--hot); text-shadow: 0 0 60px rgba(255,77,77,.45); animation: beat 1s ease-in-out infinite; }
.scr.is-break .clock { color: var(--gold); text-shadow: 0 0 60px rgba(240,207,122,.3); }
@keyframes beat { 50% { opacity: .7; } }

.ticks { width: 92%; display: flex; justify-content: space-between; height: clamp(14px, 3vh, 76px); margin-top: clamp(10px, 2.6vh, 68px); }
.ticks i { width: clamp(2px, .22vw, 10px); border-radius: 3px; background: rgba(255,255,255,.14); transition: background .8s, box-shadow .8s; }
.ticks i.on { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.55); }
.scr.is-last .ticks i.on { background: var(--hot); box-shadow: 0 0 10px rgba(255,77,77,.7); }
.scr.is-break .ticks i.on { background: var(--gold); box-shadow: 0 0 10px rgba(240,207,122,.6); }
.hero-foot { width: 92%; display: flex; justify-content: space-between; margin-top: 1.2vh; font-size: clamp(10px, 1.5vh, 34px); color: var(--ink3); }
.run { display: inline-flex; align-items: center; gap: .55em; }
.run i { width: .55em; height: .55em; border-radius: 50%; background: var(--ink3); }
.run.on { color: var(--ink2); }
.run.on i { background: var(--ok); box-shadow: 0 0 10px var(--ok); }

.hero-note, .hero-finale { text-align: center; }
.note-t { font-family: var(--f-d); font-size: clamp(22px, 5vh, 120px); font-weight: 700; }
.note-s { color: var(--ink2); margin-top: 1vh; font-size: clamp(13px, 2vh, 44px); }

/* Подиум */
.finale-k { font-size: clamp(12px, 2vh, 44px); color: var(--ink2); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; }
.finale-t { font-family: var(--f-d); font-size: clamp(30px, 8vh, 200px); font-weight: 700; margin-top: 2vh; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 1.6vw; margin-top: 3vh; width: 100%; }
.pod { width: 28%; display: flex; flex-direction: column; align-items: center; animation: rise .9s var(--ease) both; }
.pod-1 { animation-delay: .35s; } .pod-3 { animation-delay: .15s; }
.pod-ava { width: clamp(56px, 11vh, 280px); height: clamp(56px, 11vh, 280px); font-size: 3.6vh; }
.pod-1 .pod-ava { width: clamp(72px, 15vh, 380px); height: clamp(72px, 15vh, 380px); box-shadow: 0 0 0 3px var(--gold), 0 0 60px rgba(240,207,122,.45) !important; }
.pod-2 .pod-ava { box-shadow: 0 0 0 2px var(--silver) !important; }
.pod-3 .pod-ava { box-shadow: 0 0 0 2px var(--bronze) !important; }
.pod-name { font-family: var(--f-d); font-weight: 600; font-size: clamp(13px, 2.6vh, 64px); margin: 1.4vh 0; max-width: 100%; overflow-wrap: anywhere; line-height: 1.15; }
.pod-1 .pod-name { color: var(--gold); font-size: clamp(16px, 3.4vh, 84px); }
.pod-step { width: 100%; border-radius: 18px 18px 0 0; border: 1px solid var(--edge); border-bottom: 0; display: flex; justify-content: center; padding-top: 1.6vh;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)); }
.pod-step span { font-family: var(--f-d); font-weight: 800; font-size: clamp(28px, 6.4vh, 160px); line-height: 1; }
.pod-1 .pod-step { height: 22vh; background: linear-gradient(180deg, rgba(240,207,122,.25), rgba(240,207,122,0)); border-color: rgba(240,207,122,.4); }
.pod-1 .pod-step span { color: var(--gold); }
.pod-2 .pod-step { height: 15vh; } .pod-2 .pod-step span { color: var(--silver); }
.pod-3 .pod-step { height: 11vh; } .pod-3 .pod-step span { color: var(--bronze); }

/* Правая колонка: игрок */
.spot { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2vh 1.2vw; animation: spot-in .8s var(--ease) both; }
@keyframes spot-in { from { opacity: 0; transform: translateY(12px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.spot-k { font-family: var(--f-d); font-weight: 600; font-size: clamp(11px, 2vh, 48px); letter-spacing: .01em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-photo { width: min(88%, 30vh); aspect-ratio: 1; margin: 2.2vh 0 1.8vh; border-radius: 50%; padding: 4px;
    background: conic-gradient(from 200deg, rgba(255,255,255,.9), rgba(255,255,255,.08) 35%, rgba(255,255,255,.08) 65%, rgba(255,255,255,.9));
    box-shadow: 0 20px 60px -10px rgba(0,0,0,.6); }
.spot-photo .tv-ava { width: 100%; height: 100%; font-size: 8vh; }
.spot-name { font-family: var(--f-d); font-weight: 700; font-size: clamp(16px, 3.6vh, 92px); letter-spacing: -0.02em; line-height: 1.05; max-width: 100%; overflow-wrap: anywhere; }
.spot-stats { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2vh; padding-top: 1.6vh; border-top: 1px solid var(--edge); }
.spot-stats > div { display: flex; flex-direction: column; gap: .3vh; }
.spot-stats span { font-size: clamp(9px, 1.25vh, 28px); color: var(--ink3); }
.spot-stats b { font-family: var(--f-d); font-weight: 600; font-size: clamp(13px, 2.6vh, 60px); }
.club-mark { width: 70%; aspect-ratio: 1; display: grid; place-items: center; margin: 2vh 0; }
.club-mark img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 40px rgba(0,0,0,.5)); }
.club-mark span { font-size: 16vh; opacity: .8; }
.spot-club .spot-name { font-size: clamp(14px, 2.6vh, 64px); color: var(--ink2); font-weight: 500; }

/* Финальный стол */
.ft { flex: 0 1 auto; min-height: 0; max-height: 46%; display: flex; flex-direction: column; padding: 1.6vh 1.1vw; }
.ft-list { margin-top: 1vh; overflow: hidden; display: flex; flex-direction: column; gap: .7vh; }
.ft-row { display: flex; align-items: center; gap: .7vw; font-size: clamp(11px, 1.9vh, 44px); font-weight: 600; animation: rise .6s var(--ease) both; }
.ft-ava { width: 2em; height: 2em; font-size: .6em; flex-shrink: 0; }
.ft-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Аватарка ─────────────────────────────────────────────────────────── */
.tv-ava { position: relative; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.05)); color: var(--ink); font-family: var(--f-d); font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.tv-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Вылет: всплывает поверх таймера ──────────────────────────────────── */
.tv-bust { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(8, 9, 14, .82); -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3);
    animation: bust-in .6s var(--ease) both, bust-out .5s ease-in calc(var(--dur, 7000ms) - 500ms) forwards; }
.tv-bust-card { display: flex; align-items: center; gap: 2.4vw; max-width: 92%; animation: rise .7s .1s var(--ease) both; }
.tv-bust-ava { width: clamp(80px, 22vh, 520px); height: clamp(80px, 22vh, 520px); font-size: 7vh;
    box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 0 0 5px var(--hot), 0 0 60px rgba(255,77,77,.35) !important; animation: desat 1.4s .5s both; }
@keyframes desat { to { filter: grayscale(.9); } }
.tv-bust-body { min-width: 0; text-align: left; }
.tv-bust-k { font-size: clamp(11px, 2vh, 48px); color: var(--hot); letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
.tv-bust-name { font-family: var(--f-d); font-weight: 800; font-size: clamp(24px, 7.4vh, 192px); letter-spacing: -0.03em; line-height: 1.02; margin-top: .2em; overflow-wrap: anywhere; }
.tv-bust-place { margin-top: .6em; font-size: clamp(13px, 2.8vh, 68px); color: var(--ink2); display: flex; align-items: center; gap: .8em; flex-wrap: wrap; }
.tv-bust-place b { font-family: var(--f-d); color: var(--ink); }
.tv-bust-ko { font-size: .8em; padding: .2em .7em; border-radius: 99px; border: 1px solid rgba(255,77,77,.5); color: #ff8a8a; }
.tv-bust-bar { position: absolute; left: 10%; right: 10%; bottom: 7%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.8); transform-origin: left; animation: bar var(--dur, 7000ms) linear both; }
@keyframes bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes bust-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bust-out { to { opacity: 0; } }

/* ── Победитель ───────────────────────────────────────────────────────── */
.tv-win { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden;
    background: radial-gradient(ellipse at 50% 40%, rgba(60,48,20,.94), rgba(5,6,10,.98) 70%);
    animation: bust-in .7s var(--ease) both; }
.tv-win-rays { position: absolute; inset: -50%; z-index: -1; opacity: .55;
    background: repeating-conic-gradient(from 0deg, rgba(240,207,122,.09) 0deg 6deg, transparent 6deg 18deg); animation: spin 60s linear infinite;
    -webkit-mask: radial-gradient(circle, #000, transparent 60%); mask: radial-gradient(circle, #000, transparent 60%); }
@keyframes spin { to { transform: rotate(360deg); } }
.tv-win-k { font-size: clamp(14px, 2.6vh, 60px); color: var(--gold); letter-spacing: .32em; text-transform: uppercase; font-weight: 700; animation: rise .8s .2s var(--ease) both; }
.tv-win-ava { width: clamp(120px, 32vh, 800px); height: clamp(120px, 32vh, 800px); font-size: 10vh; margin: 4vh 0 3vh;
    box-shadow: 0 0 0 5px rgba(5,6,10,.9), 0 0 0 7px var(--gold), 0 0 140px rgba(240,207,122,.45) !important; animation: rise .9s .35s var(--ease) both; }
.tv-win-name { font-family: var(--f-d); font-size: clamp(34px, 10vh, 280px); font-weight: 800; letter-spacing: -0.03em; line-height: .98; max-width: 90vw; overflow-wrap: anywhere; animation: rise .9s .5s var(--ease) both; }
.tv-win-sub { margin-top: 2.4vh; font-size: clamp(14px, 2.6vh, 60px); color: var(--ink2); animation: rise .9s .65s var(--ease) both; }

/* ── Boom pot ─────────────────────────────────────────────────────────── */
.boom { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, #ff5a3c, #b8160a 75%); animation: bust-in .35s var(--ease) both; }
.boom-k { font-size: clamp(16px, 3.6vh, 88px); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.boom-t { font-family: var(--f-d); font-size: clamp(56px, 20vh, 520px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; text-transform: uppercase; animation: shake .5s ease-in-out; text-shadow: 0 10px 60px rgba(0,0,0,.3); }
.boom-v { font-family: var(--f-d); font-size: clamp(30px, 9vh, 240px); font-weight: 600; margin-top: 1vh; animation: beat 1s ease-in-out infinite; }
@keyframes shake { 20% { transform: translateX(-1.2vw) rotate(-1deg); } 40% { transform: translateX(1.2vw) rotate(1deg); } 60% { transform: translateX(-.6vw); } 80% { transform: translateX(.6vw); } }

/* ── Бегущая строка ───────────────────────────────────────────────────── */
.ad { flex-shrink: 0; height: clamp(22px, 3.2vh, 76px); overflow: hidden; display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.25); }
.ad-track { display: flex; align-items: center; gap: 2.4em; white-space: nowrap; padding-left: 2.4em; font-size: clamp(10px, 1.35vh, 30px); color: var(--ink3); animation: marquee 70s linear infinite; }
.ad-track > span { flex-shrink: 0; }
.ad-track b { color: var(--ink2); font-weight: 600; }
.ad-brand { color: var(--ink2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .9em; }
.ad-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink3); }
@keyframes marquee { to { transform: translateX(-50%); } }

.offline { position: fixed; left: 50%; bottom: 6vh; transform: translateX(-50%); z-index: 40; padding: .7em 1.3em; border-radius: 99px;
    background: rgba(255,77,77,.9); color: #fff; font-weight: 600; font-size: clamp(12px, 1.6vh, 36px); }

/* ── Нет турнира ──────────────────────────────────────────────────────── */
.scr-empty { align-items: center; justify-content: center; text-align: center; padding: 24px; }
.empty-mark { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 30px; margin-bottom: 28px;
    background: var(--glass); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.empty-t { font-family: var(--f-d); font-size: clamp(22px, 4vh, 80px); font-weight: 700; }
.empty-s { color: var(--ink2); margin-top: 8px; }
.ws { margin-top: 24px; font-size: 13px; color: var(--ink3); display: inline-flex; align-items: center; gap: 8px; }
.ws::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f2c14b; }
.ws-ok::before { background: var(--ok); }
.ws-lost::before { background: var(--hot); }

/* ── Телефон / вертикальный экран ─────────────────────────────────────── */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
    html, body.tv-page { overflow: auto; }
    .scr { position: relative; min-height: 100%; overflow: visible; }
    .scr-bg, .aura { position: fixed; }
    .top { grid-template-columns: auto 1fr auto; gap: 12px; height: auto; padding: 14px 16px; }
    .top-title { text-align: left; }
    .top-name { max-width: none; font-size: 18px; }
    .scr.is-idle .top-tools { opacity: 1; pointer-events: auto; }
    .board { flex: none; display: flex; flex-direction: column; padding: 0 16px 16px; }
    .col-c { order: 1; }
    .col-l { order: 2; display: grid; grid-template-columns: 1fr 1fr; }
    .col-r { order: 3; }
    .tile { padding: 14px 16px; }
    .hero { min-height: 44vh; }
    .clock { font-size: 22vw; }
    .blinds { font-size: 9vw; }
    .blinds-next { font-size: 6vw; }
    .spot { padding: 24px 16px; }
    .ft { max-height: none; }
    .tv-bust-card { flex-direction: column; text-align: center; }
    .tv-bust-body { text-align: center; }
    .tv-bust-place { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Вид «Арена» (по умолчанию) — раскладка турнирной трансляции.
   Цвет полос — --ac (из ссылки ?accent=hex), панели — плотный тёмно-синий.
   ═══════════════════════════════════════════════════════════════════════ */
.ar {
    --ac: #8d6bff;
    --panel: #1b2032;
    --panel2: #23293f;
    --red: #ff3b3b;
    --f-ar: 'Montserrat', 'Onest', ui-sans-serif, sans-serif;
    position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
    background: var(--ac); color: #fff; font-family: var(--f-ar);
}
.ar-stripes {
    position: absolute; inset: -20%; z-index: -1; pointer-events: none;
    background:
        repeating-linear-gradient(118deg,
            color-mix(in srgb, var(--ac) 100%, #fff 0%) 0 9vw,
            color-mix(in srgb, var(--ac) 72%, #fff 28%) 9vw 15vw,
            color-mix(in srgb, var(--ac) 80%, #000 20%) 15vw 22vw);
    animation: ar-slide 60s linear infinite;
}
.ar-stripes::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.25)); }
@keyframes ar-slide { to { transform: translateX(22vw); } }

.ar-tools { position: absolute; right: 1.2vw; bottom: 5vh; z-index: 10; display: flex; gap: 8px; transition: opacity .6s; }
.ar.is-idle .ar-tools { opacity: 0; }

.ar-grid {
    flex: 1 1 0; min-height: 0; display: grid; gap: 1.6vh 1.2vw;
    grid-template-columns: minmax(0, 19fr) minmax(0, 59fr) minmax(0, 22fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "logoL banner logoR" "left center right";
    padding: 1.6vh 1.8vw 1.8vh;
}
.ar-logo { display: flex; align-items: center; justify-content: center; min-height: 0; }
.ar-logo-l { grid-area: logoL; } .ar-logo-r { grid-area: logoR; }
.ar-logo img { max-height: 11vh; max-width: 80%; object-fit: contain; filter: drop-shadow(0 6px 20px rgba(0,0,0,.35)); }
.ar-banner { grid-area: banner; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8vh; }
.ar-club {
    font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em;
    font-size: clamp(22px, 5.2vh, 128px); line-height: 1;
    text-shadow: 0 3px 0 rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.22);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* запас внутри блока: курсив и тень выходят за глифы — без него последняя
       буква (B, V) и края тени обрезались рамкой overflow:hidden */
    padding: .08em .22em .18em; box-sizing: border-box;
}
.ar-tname {
    background: var(--panel); border-radius: 12px; padding: .7vh 2vw; max-width: 100%;
    font-weight: 800; text-transform: uppercase; font-size: clamp(11px, 2.1vh, 52px); letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.ar-phase { color: color-mix(in srgb, var(--ac) 45%, #fff 55%); }

.ar-panel {
    position: relative; background: var(--panel); border-radius: clamp(10px, 1.8vh, 44px);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 70%, #000 30%), 0 14px 40px rgba(0,0,0,.3);
    overflow: hidden; text-align: center;
}
.ar-k { font-weight: 700; font-size: clamp(12px, 2.4vh, 60px); line-height: 1.1; }
.ar-left { grid-area: left; display: flex; flex-direction: column; gap: 1.6vh; min-height: 0; }
.ar-stat { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vh; padding: 0 .8vw; }
.ar-v { font-weight: 800; font-size: clamp(18px, 5vh, 124px); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }

.ar-center { grid-area: center; display: flex; flex-direction: column; gap: 1.6vh; min-height: 0; }
.ar-level, .ar-next { flex-shrink: 0; padding: 1.4vh 1.4vw 1.6vh; }
.ar-blinds { font-weight: 800; font-size: clamp(22px, 7vh, 180px); letter-spacing: -0.02em; line-height: 1.05; margin-top: .6vh; white-space: nowrap; }
.ar-ante { color: color-mix(in srgb, var(--ac) 45%, #fff 55%); }
.ar-blinds-next { font-size: clamp(18px, 5vh, 128px); }
.ar-timer { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1vh 2vw 2.6vh; }
.ar-clock {
    font-weight: 900; font-size: clamp(70px, min(34vh, 17vw), 880px); line-height: .9; letter-spacing: -0.05em;
    text-shadow: 0 8px 40px rgba(0,0,0,.35); transition: opacity .5s, color .5s;
}
.ar-clock .roll-d { width: .7em; }
.ar.is-pause .ar-clock { opacity: .55; }
.ar.is-last .ar-clock { color: var(--red); animation: beat 1s ease-in-out infinite; }
.ar.is-break .ar-clock { color: #ffd875; }
.ar .ticks { width: 94%; height: clamp(14px, 3.6vh, 92px); margin-top: 2vh; }
.ar .ticks i { width: clamp(2px, .28vw, 12px); background: rgba(255,59,59,.18); box-shadow: none; }
.ar .ticks i.on { background: var(--red); box-shadow: 0 0 8px rgba(255,59,59,.55); }
.ar.is-break .ticks i.on { background: #ffd875; box-shadow: 0 0 8px rgba(255,216,117,.5); }
.ar-note { font-weight: 800; font-size: 5vh; }
.ar-finale { gap: 2vh; }

.ar-right { grid-area: right; display: flex; flex-direction: column; min-height: 0; }
.ar-spot { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2vh 1vw; animation: spot-in .8s var(--ease) both; }
.ar-spot-k { font-weight: 900; font-style: italic; font-size: clamp(14px, 3.4vh, 84px); line-height: 1; color: color-mix(in srgb, var(--ac) 35%, #fff 65%); }
.ar-mt { margin-top: 3vh; }
.ar-spot-photo { width: min(90%, 32vh); aspect-ratio: 1; margin: 2.4vh 0 2vh; border-radius: 50%; padding: 4px; background: var(--ac); box-shadow: 0 0 40px color-mix(in srgb, var(--ac) 60%, transparent); }
.ar-spot-photo .tv-ava { width: 100%; height: 100%; font-size: 9vh; font-family: var(--f-ar); font-weight: 800; box-shadow: 0 0 0 4px var(--panel); }
.ar-spot-name { font-weight: 900; font-size: clamp(18px, 4.6vh, 116px); letter-spacing: -0.02em; line-height: 1.02; max-width: 100%; overflow-wrap: anywhere; }
.ar-spot-rating { margin-top: 1.6vh; display: flex; flex-direction: column; align-items: center; gap: .3vh; }
.ar-spot-rating span { font-weight: 700; font-size: clamp(11px, 2vh, 48px); color: rgba(255,255,255,.7); }
.ar-spot-rating b { font-weight: 800; font-size: clamp(18px, 4.4vh, 108px); line-height: 1; }
.ar-spot-rating em { font-style: normal; font-weight: 700; font-size: clamp(11px, 1.9vh, 44px); color: color-mix(in srgb, var(--ac) 45%, #fff 55%); }
.ar-spot-big { font-weight: 800; font-size: clamp(18px, 5vh, 124px); margin-top: 1.4vh; letter-spacing: -0.02em; }
.ar-ft { flex: 1 1 0; padding: 2vh 1.2vw; display: flex; flex-direction: column; }
.ar-ft-list { margin-top: 1.6vh; display: flex; flex-direction: column; gap: .9vh; overflow: hidden; text-align: left; }
.ar-ft-row { display: flex; align-items: center; gap: .8vw; font-weight: 700; font-size: clamp(11px, 2.1vh, 52px); white-space: nowrap; overflow: hidden; }
.ar .tv-ava { font-family: var(--f-ar); font-weight: 800; }

.ar .ad { background: rgba(0,0,0,.28); border-top: 0; }
.ar .ad-track { color: rgba(255,255,255,.6); }
.ar .ad-brand, .ar .ad-track b { color: #fff; }
.ar .ad-dot { background: rgba(255,255,255,.6); }
.ar .tv-bust { background: rgba(20, 24, 38, .94); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ar .tv-bust-name, .ar .tv-bust-place b, .ar .tv-win-name { font-family: var(--f-ar); font-weight: 900; }
.ar .pod-name, .ar .pod-step span { font-family: var(--f-ar); font-weight: 800; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
    html, body.tv-page { overflow: visible; height: auto; min-height: 100%; }
    .ar { position: relative; min-height: 100%; overflow: visible; }
    .ar-stripes { position: fixed; }
    .ar-grid { display: flex; flex-direction: column; padding: 14px; gap: 12px; flex: none; min-height: auto; }
    .ar-banner { order: 0; }
    .ar-left, .ar-center, .ar-right, .ar-qr-wide { flex: none; min-height: auto; }
    .ar-center .ar-level, .ar-center .ar-next { flex: none; }
    .ar-spot, .ar-ft { flex: none; }
    .ar-left > .ar-stat { flex: 1 1 0; min-width: 0; }
    .ar-spot { min-height: auto; padding: 22px 16px 26px; }
    .ar-spot-photo { width: min(58vw, 260px); }
    .ar-spot-k { font-size: 22px; }
    .ar-spot-name { font-size: 28px; }
    .ar-brk-list, .ar-brk-stats, .ar-brk-timer { flex: none; }
    .ar-qr { flex-direction: column; gap: 3vh; }
    .ar-qr-box { height: auto; width: min(80vw, 420px); }
    .ar-qr-text { max-width: none; }
    .ar .ad { order: 10; }
    .ar-logo { display: none; }
    .ar-left { flex-direction: row; order: 3; }
    .ar-stat { padding: 14px 6px; }
    .ar-center { order: 2; }
    .ar-right { order: 4; }
    .ar-timer { min-height: 40vh; }
    .ar-clock { font-size: 24vw; }
    .ar-blinds { font-size: 9vw; }
    .ar-v { font-size: 6vw; }
    .ar-tools { position: fixed; }
    .ar.is-idle .ar-tools { opacity: 1; pointer-events: auto; }
}
.ar-pause { margin-top: .5vh; font-weight: 700; font-size: clamp(11px, 2vh, 48px); color: #ffd875; }
/* Отсчёты времени — без анимации, цифры фиксированной ширины */
.roll.roll-still > span { animation: none; }
/* Возврат в игру / ребай */
.tv-bust.is-back .tv-bust-k { color: var(--ok); }
.tv-bust.is-back .tv-bust-ava { animation: none; filter: none;
    box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 0 0 5px var(--ok), 0 0 60px rgba(127,224,164,.35) !important; }
.tv-bust.is-back .tv-bust-bar { background: var(--ok); }

/* ── «Арена»: экран перерыва ──────────────────────────────────────────── */
.ar-brk-timer { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2vh 1vw; }
.ar-brk-clock { font-weight: 900; font-size: clamp(30px, min(11vh, 5.6vw), 280px); letter-spacing: -0.05em; line-height: 1; margin-top: 1.6vh; color: #ffd875; }
.ar-brk-clock .roll-d { width: .7em; }
.ar-brk-timer .ticks { width: 92%; height: clamp(10px, 2.4vh, 60px); margin-top: 1.6vh; }
.ar-brk-timer .ticks i { background: rgba(255,216,117,.18); }
.ar-brk-timer .ticks i.on { background: #ffd875; box-shadow: 0 0 8px rgba(255,216,117,.5); }
.ar-brk-next { font-weight: 800; font-size: clamp(16px, 4vh, 100px); letter-spacing: -0.02em; margin-top: .8vh; white-space: nowrap; }
.ar-brk-list { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 2.2vh 2vw; text-align: left; }
.ar-brk-list > .ar-spot-k { text-align: center; }
.ar-brk-rows { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 1.4vh; }
.ar-brk-row { display: flex; align-items: center; gap: 1.2vw; padding: .6vh .8vw; border-radius: 12px; font-size: clamp(12px, 2.6vh, 64px); font-weight: 700; animation: rise .6s var(--ease) both; }
.ar-brk-row:nth-child(odd) { background: var(--panel2); }
.ar-brk-rank { width: 3.2em; flex-shrink: 0; font-weight: 800; color: color-mix(in srgb, var(--ac) 40%, #fff 60%); }
.ar-brk-ava { width: 1.7em; height: 1.7em; font-size: .62em; flex-shrink: 0; }
.ar-brk-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-brk-tag { flex-shrink: 0; font-size: .6em; font-weight: 700; padding: .25em .7em; border-radius: 99px; background: rgba(127,224,164,.14); color: #8ff0b3; }
.ar-brk-pts { flex-shrink: 0; font-weight: 800; color: rgba(255,255,255,.75); font-size: .85em; }
.ar-brk-more { text-align: center; font-weight: 700; color: rgba(255,255,255,.55); font-size: clamp(11px, 2vh, 48px); }
.ar-brk-stats { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 2.2vh 1.2vw; }
.ar-brk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh 1vw; margin-top: 1.8vh; }
.ar-brk-grid > div { display: flex; flex-direction: column; gap: .3vh; }
.ar-brk-grid span { font-weight: 700; font-size: clamp(10px, 1.7vh, 40px); color: rgba(255,255,255,.65); }
.ar-brk-grid b { font-weight: 800; font-size: clamp(16px, 3.6vh, 88px); letter-spacing: -0.02em; }
.ar-brk-out { display: flex; flex-direction: column; gap: .8vh; margin-top: 1.4vh; text-align: left; }
.ar-brk-out > div { display: flex; align-items: center; gap: .8vw; font-weight: 700; font-size: clamp(11px, 2.1vh, 52px); }
.ar-brk-out b { min-width: 2em; text-align: center; padding: .15em .4em; border-radius: 8px; background: var(--panel2); font-weight: 800; }
.ar-brk-out span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── «Арена»: перелистывание на перерыве и слайд с QR ─────────────────── */
.ar-swipe { animation: ar-swipe-in .8s var(--ease) both; }
@keyframes ar-swipe-in { from { opacity: 0; transform: translateX(6vw); } to { opacity: 1; transform: none; } }
.ar-right { position: relative; }
.ar-qr-wide { grid-column: 2 / 4; grid-row: 2; position: relative; display: flex; flex-direction: column; min-height: 0; }
.ar-qr { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 4vw; padding: 3vh 3vw; text-align: left; }
.ar-qr-box { height: min(58vh, 34vw); aspect-ratio: 1; padding: 2.2vh; background: #fff; border-radius: 3vh; flex-shrink: 0;
    box-shadow: 0 0 0 6px var(--ac), 0 20px 80px color-mix(in srgb, var(--ac) 55%, transparent); animation: ar-qr-pulse 3s ease-in-out infinite; }
@keyframes ar-qr-pulse { 50% { box-shadow: 0 0 0 10px var(--ac), 0 20px 100px color-mix(in srgb, var(--ac) 75%, transparent); } }
.ar-qr-code, .ar-qr-code img, .ar-qr-code canvas { width: 100% !important; height: 100% !important; display: block; image-rendering: pixelated; }
.ar-qr-text { min-width: 0; max-width: 34vw; }
.ar-qr-title { font-weight: 900; font-size: clamp(22px, 6vh, 152px); line-height: 1.02; letter-spacing: -0.03em; margin-top: 1.6vh; }
.ar-qr-steps { margin: 3vh 0 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 1.6vh; }
.ar-qr-steps li { counter-increment: s; display: flex; align-items: center; gap: 1vw; font-weight: 700; font-size: clamp(13px, 2.8vh, 68px); }
.ar-qr-steps li::before { content: counter(s); width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: var(--ac); color: #fff; font-weight: 900; font-size: .8em; }
.ar-qr-url { margin-top: 3vh; font-weight: 700; font-size: clamp(11px, 2vh, 48px); color: rgba(255,255,255,.6); }
.ar-dots { position: absolute; left: 50%; bottom: 1.4vh; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.ar-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.3); transition: width .4s var(--ease), background .4s; }
.ar-dots i.on { width: 26px; background: #fff; }
/* перерыв: расписание (следующий перерыв, регистрация, аддоны) */
.ar-brk-sched { width: 100%; margin-top: 2.4vh; padding-top: 1.8vh; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 1.2vh; }
.ar-brk-sched > div { display: flex; flex-direction: column; align-items: center; gap: .2vh; }
.ar-brk-sched > div > span { font-weight: 700; font-size: clamp(10px, 1.6vh, 38px); color: rgba(255,255,255,.62); }
.ar-brk-sched b { font-weight: 800; font-size: clamp(14px, 3vh, 72px); letter-spacing: -0.02em; }
.ar-brk-sched > div.is-on b { color: #8ff0b3; }
.ar-brk-sched .roll-d { width: .7em; }
.ar-brk-timer { justify-content: space-evenly; }

/* Элементы с автоподгонкой занимают всю ширину своего блока — иначе в колонке
   с align-items:center они сжимаются под текст и переполнение не видно. */
.ar-v, .ar-clock, .ar-brk-next, .ar-brk-clock, .ar-spot-big, .clock, .ar-blinds { align-self: stretch; text-align: center; max-width: 100%; }
.ar-clock .roll, .ar-brk-clock .roll, .clock .roll { justify-content: center; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
    .ar .ar-brk-list, .ar .ar-brk-stats, .ar .ar-brk-timer, .ar .ar-qr { flex: none; min-height: auto; }
    .ar .ar-left > .ar-brk-timer { flex: 1 1 100%; min-width: 0; }
    .ar.is-break .ar-left { order: 1; }
    .ar.is-break .ar-center, .ar.is-break .ar-qr-wide { order: 2; }
    .ar.is-break .ar-right { order: 3; }
    .ar-brk-rows { flex: none; gap: 6px; }
    .ar-brk-row { font-size: 16px; padding: 8px 10px; }
    .ar-brk-list, .ar-brk-stats, .ar-brk-timer { padding: 18px 14px; }
    .ar-brk-clock { font-size: 64px; }
    .ar-brk-next { font-size: 28px; }
    .ar-brk-grid b { font-size: 24px; }
    .ar-brk-grid span, .ar-brk-sched > div > span { font-size: 13px; }
    .ar-brk-sched b { font-size: 22px; }
}

/* QR-слайд на телефоне / вертикальном экране: квадратный код и текст под ним по центру */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
    .ar .ar-qr { flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 22px 16px 34px; }
    .ar .ar-qr-box { width: min(72vw, 340px); height: min(72vw, 340px); padding: 14px; border-radius: 22px; flex-shrink: 0; }
    .ar .ar-qr-text { width: 100%; max-width: 420px; text-align: center; }
    .ar .ar-qr-title { font-size: 30px; margin-top: 8px; }
    .ar .ar-spot-k { font-size: 20px; }
    .ar .ar-qr-steps { align-items: flex-start; text-align: left; margin: 18px auto 0; width: fit-content; max-width: 100%; gap: 12px; }
    .ar .ar-qr-steps li { font-size: 17px; gap: 12px; }
    .ar .ar-qr-url { font-size: 14px; margin-top: 16px; }
    .ar .ar-dots { bottom: 10px; }
}
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
    /* анимация перелистывания не должна давать горизонтальную прокрутку */
    .ar { overflow-x: clip; }
}