html,body{height:100%;overflow:hidden;}
.screen{
  height:100vh;width:100vw;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ink-soft) 0%,var(--ink) 100%);
}

/* ---- topbar: бренд + линейка столов + live-индикатор ---- */
.topbar{
  display:flex;align-items:center;gap:16px;padding:14px 28px;
  border-bottom:1px solid var(--line);background:rgba(0,0,0,.28);flex:none;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:clamp(16px,1.6vw,22px);letter-spacing:.02em;white-space:nowrap;}
.pad{width:26px;height:18px;border-radius:5px;background:var(--accent);position:relative;flex:none;}
.pad::before{content:"";position:absolute;left:5px;top:5px;width:4px;height:8px;background:var(--ink-deep);}
.pad::after{content:"";position:absolute;right:4px;top:7px;width:8px;height:4px;background:var(--ink-deep);}
.tablestrip{display:flex;gap:10px;flex:1;overflow-x:auto;}
.ttab{
  padding:6px 12px;border-radius:8px;border:1px solid var(--line);
  font-size:clamp(11px,.85vw,13px);font-weight:800;color:var(--muted);white-space:nowrap;flex:none;
}
.ttab .sub{font-weight:700;font-size:.85em;opacity:.75;margin-left:6px;}
.ttab.on{background:var(--accent);border-color:var(--accent);color:var(--ink);}
.live{display:flex;align-items:center;gap:6px;font-size:clamp(11px,.85vw,13px);font-weight:800;letter-spacing:.08em;color:var(--live);white-space:nowrap;flex:none;}
.live .dot{width:9px;height:9px;border-radius:50%;background:var(--live);animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.25;}}

/* ---- баннер потери связи (правило 4) ---- */
.conn-banner{
  background:color-mix(in srgb, var(--live) 22%, var(--ink));
  color:color-mix(in srgb, var(--live) 35%, var(--text));border-bottom:1px solid var(--live);
  padding:10px 28px;font-size:clamp(13px,1vw,16px);font-weight:800;text-align:center;flex:none;
}
.hidden{display:none !important;}

/* ---- сцена: три колонки ---- */
.stage{flex:1;display:grid;grid-template-columns:minmax(240px,22%) 1fr minmax(260px,24%);min-height:0;}
.col{padding:18px 22px;min-width:0;overflow-y:auto;}
.col+.col{border-left:1px solid var(--line);}
.lbl{font-size:clamp(10px,.75vw,12px);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:0 0 10px;}
.lbl:not(:first-child){margin-top:20px;}

/* тотализатор матча */
.tote{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;}
.trow{display:flex;justify-content:space-between;align-items:center;font-size:clamp(13px,1vw,16px);font-weight:800;padding:3px 0;}
.trow .k{color:var(--gold);font-size:1.3em;font-weight:900;}
.tug{height:9px;border-radius:5px;overflow:hidden;display:flex;background:var(--card-hi);margin:8px 0 6px;}
.tug .l{background:var(--tug-a);}
.tug .r{background:var(--tug-b);flex:1;}
.pool{display:flex;justify-content:space-between;font-size:clamp(10px,.75vw,12px);font-weight:700;color:var(--muted);}
.pool b{color:var(--accent);font-size:1.15em;}

/* лидерборды (агенты слева, банки справа) */
.led{display:flex;flex-direction:column;gap:6px;}
.lrow{display:flex;justify-content:space-between;align-items:baseline;font-size:clamp(12px,.9vw,14px);padding:7px 10px;border-radius:8px;background:var(--card);}
.lrow:first-child{background:color-mix(in srgb, var(--gold) 13%, transparent);}
.lrow b{font-weight:800;}
.lrow .pts{color:var(--gold);font-weight:900;}
.lrow .sub{font-size:.8em;color:var(--muted);font-weight:700;margin-left:6px;}

.bank{display:flex;flex-direction:column;gap:5px;}
.brow{display:flex;flex-direction:column;gap:3px;padding:6px 10px;border-radius:8px;background:var(--card);}
.brow.me,.brow:first-child{background:color-mix(in srgb, var(--blue) 15%, transparent);}
.btop{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.btop .name{display:flex;align-items:center;gap:8px;min-width:0;}
.btop .name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.code{
  flex:none;min-width:34px;text-align:center;font-size:.7em;font-weight:900;
  background:var(--card-hi);border-radius:5px;padding:2px 4px;color:var(--muted);
}
.bpts{font-weight:900;color:var(--blue);white-space:nowrap;}
.chg{font-size:.75em;font-weight:800;margin-left:6px;}
.chg.up{color:var(--up);}.chg.dn{color:var(--live);}

.qrcard{
  background:var(--card);border:1px solid var(--accent-dim);border-radius:12px;padding:14px;
  margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
}
.qrbox{
  /* ⚠️ единственное осознанное исключение из палитры: QR обязан быть чёрным по
     белому, иначе камеры в зале его не считают. Это не цвет бренда, а требование.
     Внутренние поля — продолжение «тихой зоны»: SVG рисует спековые 4 модуля,
     эти отступы добавляют запас, без которого декодер начинает капризничать
     (замерено в dev/qr_check.py). */
  width:clamp(96px,8vw,132px);aspect-ratio:1;flex:none;background:#fff;
  border-radius:8px;padding:6px;
}
.qrbox img{width:100%;height:100%;display:block;}
.qrcap{font-size:clamp(10px,.75vw,12px);line-height:1.4;color:var(--muted);}
.qrcap b{color:var(--accent);}
.hallcode-big{grid-column:1/-1;display:flex;align-items:baseline;justify-content:center;gap:10px;
  border-top:1px solid var(--line);padding-top:10px;}
.hc-lbl{font-size:clamp(9px,.7vw,11px);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;}
/* Код набирают с последнего ряда — он должен читаться издали, как счёт на табло. */
.hc-val{font-size:clamp(22px,2.4vw,34px);font-weight:900;color:var(--gold);letter-spacing:.12em;}
.broadcast-note{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;
  margin-top:20px;font-size:clamp(11px,.8vw,13px);color:var(--muted);line-height:1.5;
}

/* центр: партия */
.col-center{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;}
.match-title{font-size:clamp(20px,2.2vw,32px);font-weight:900;margin-top:6px;}
.match-sub{font-size:clamp(12px,1vw,15px);color:var(--muted);font-weight:700;margin-top:2px;}
.countdown-big{font-size:clamp(28px,3.4vw,52px);font-weight:900;color:var(--gold);margin:10px 0;font-family:var(--font-num);}
.board-wrap{margin:14px 0;display:flex;justify-content:center;width:100%;}
.board-wrap .tv-boards{justify-content:center;}
.board-wrap .tv-cell{font-size:clamp(11px, calc(26px - var(--tv-len,1) * 3px), 26px);}
.center-odds{width:100%;max-width:520px;margin-top:10px;}
.center-empty{color:var(--muted);font-size:clamp(14px,1.2vw,18px);margin-top:60px;}

/* сетка на выбывание */
.bracket-view{padding:20px 40px;overflow:auto;height:100%;}
.br-round{margin-bottom:22px;}
.br-round .lbl{margin-top:0;}
.br-pairs{display:flex;gap:14px;flex-wrap:wrap;}
.br-pair{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:clamp(12px,1vw,15px);font-weight:700;min-width:180px;}
.br-pair .win{color:var(--up);font-weight:900;}
.br-pair .bye{color:var(--muted);font-style:italic;}

/* таблицы (полноэкранный топ) */
.tops-view{display:grid;grid-template-columns:1fr 1fr;gap:0;height:100%;}
.tops-col{padding:24px 32px;overflow-y:auto;}
.tops-col+.tops-col{border-left:1px solid var(--line);}
.tops-col .lrow,.tops-col .brow{font-size:clamp(13px,1.1vw,17px);padding:10px 14px;}

/* ---- тикер ---- */
.ticker{
  flex:none;border-top:1px solid var(--line);background:rgba(0,0,0,.35);
  padding:9px 28px;font-size:clamp(11px,.85vw,14px);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--muted);
}
.ticker b{color:var(--text);font-weight:800;}
.ticker .sep{color:var(--accent);margin:0 10px;}