:root{
  --bg:#0b0f14; --panel:#141b24; --panel2:#1b2430; --line:#263244; --text:#e9eef5; --mute:#8b9bb0;
  --accent:#ffb400; --accent-ink:#1a1300; --left:#ff6b2c; --right:#22b8f0; --ok:#2ecc71; --bad:#ff4757;
  --r:14px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{min-height:100vh;padding-bottom:var(--safe-b)}
.boot{padding:calc(40px + var(--safe-t)) 40px 40px;text-align:center;color:var(--mute)}
a{color:var(--accent)}
h1,h2,h3{margin:0 0 .4em;line-height:1.2}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.wrap{max-width:900px;margin:0 auto;padding:12px 16px 80px}
.topbar{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-t)) 16px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,15,20,.95);backdrop-filter:blur(6px);z-index:20}
.topbar .acts{display:flex;gap:6px}
.topbar .acts .btn{white-space:nowrap;min-height:38px;padding:8px 12px}
@media(max-width:760px){.topbar.hasacts{flex-wrap:wrap}.topbar.hasacts .acts{order:9;flex-basis:100%}.topbar.hasacts .acts .btn{flex:1;padding:8px 4px;font-size:.82rem}}
.topbar .t{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .t small{display:block;color:var(--mute);font-weight:400;font-size:.75rem}
.iconbtn{background:none;border:0;color:var(--text);font-size:1.3rem;padding:6px 8px;cursor:pointer;border-radius:8px}
.iconbtn:active{background:var(--panel2)}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--panel2);color:var(--mute);white-space:nowrap}
.pill.ok{background:rgba(46,204,113,.15);color:var(--ok)} .pill.warn{background:rgba(255,180,0,.15);color:var(--accent)}
.pill.bad{background:rgba(255,71,87,.15);color:var(--bad)} .pill.live{background:var(--bad);color:#fff;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.55}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:12px 0}
.card.tap{cursor:pointer} .card.tap:active{background:var(--panel2)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.sb{justify-content:space-between}
.grow{flex:1;min-width:0}
.muted{color:var(--mute)} .small{font-size:.82rem}
.btn{appearance:none;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;font-weight:600;padding:12px 16px;border-radius:12px;cursor:pointer;min-height:46px;touch-action:manipulation}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn:active{transform:scale(.97)} .btn[disabled]{opacity:.35;pointer-events:none}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{background:rgba(255,71,87,.15);color:var(--bad);border-color:rgba(255,71,87,.4)}
.btn.good{background:var(--ok);color:#04220f;border-color:var(--ok)}
.btn.big{font-size:1.25rem;padding:18px 20px;min-height:64px}
.btn.sm{padding:6px 12px;min-height:34px;font-size:.88rem}
.btn.block{display:block;width:100%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
label.f{display:block;margin:10px 0 4px;font-size:.85rem;color:var(--mute)}
input,select,textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;min-height:44px}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;transform:scale(1.3);margin-right:8px}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0}
.check{display:flex;align-items:center;gap:6px;padding:8px 0}
.hint{color:var(--mute);font-size:.8rem;margin-top:3px}
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin:0 -16px;padding:0 16px;position:sticky;top:calc(55px + var(--safe-t));background:var(--bg);z-index:10}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;color:var(--mute);font:inherit;font-weight:600;padding:12px 14px;cursor:pointer;white-space:nowrap}
.tabs button.on{color:var(--accent);border-color:var(--accent)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:9px 6px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--mute);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
td.n,th.n{text-align:left} td.team{text-align:left;font-weight:700;max-width:38vw;overflow:hidden;text-overflow:ellipsis}
tr.first td{color:var(--accent)} td.pts{font-weight:800}
.scroll{overflow-x:auto;margin:0 -14px;padding:0 14px}
.game{display:grid;grid-template-columns:54px 1fr auto;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.game:last-child{border:0}
.game .tm{font-size:.8rem;color:var(--mute);line-height:1.2}
.game .vs b{display:block} .game .sc{font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.game.next{background:linear-gradient(90deg,rgba(255,180,0,.1),transparent)}
.game.live{background:linear-gradient(90deg,rgba(255,71,87,.12),transparent)}
.round-h{display:flex;justify-content:space-between;margin:18px 0 0;color:var(--mute);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.banner{background:linear-gradient(135deg,#2a2100,#14100a);border:1px solid #5a4500;border-radius:var(--r);padding:14px;margin:12px 0}
.champ{text-align:center;padding:18px;background:linear-gradient(135deg,#2a2100,#1a1300);border:1px solid #5a4500;border-radius:var(--r);margin:12px 0}
.champ b{display:block;font-size:1.8rem;color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:.82rem}
.chip.last{border-color:var(--accent);color:var(--accent)}
.toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translateX(-50%);background:#fff;color:#111;padding:12px 18px;border-radius:12px;font-weight:600;z-index:100;max-width:90vw;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:90;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden],.toast[hidden]{display:none}
.modal .sheet{background:var(--panel);border-radius:18px 18px 0 0;width:100%;max-width:560px;max-height:92vh;overflow:auto;padding:18px 16px calc(18px + var(--safe-b))}
@media(min-width:600px){.modal{align-items:center}.modal .sheet{border-radius:18px}}
.install{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#1c2a3a,#141b24);border:1px solid #2f4560;border-radius:var(--r);padding:12px 14px;margin:12px 0}
.install img{width:44px;height:44px;border-radius:10px}
.acc{border:1px solid var(--line);border-radius:12px;margin:10px 0;background:var(--panel)}
.acc summary{padding:12px 14px;font-weight:700;cursor:pointer;list-style:none}
.acc summary::after{content:"▾";float:right;color:var(--mute)} .acc[open] summary::after{content:"▴"}
.acc .in{padding:0 14px 12px}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}

/* ---------- live scoreboard ---------- */
.gamepage{display:flex;flex-direction:column;min-height:100vh}
.board{display:grid;gap:10px;padding:10px 12px 0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"mid mid" "L R"}
.mid{grid-area:mid;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.phase{font-weight:800;letter-spacing:.12em;font-size:.95rem;color:var(--mute);text-transform:uppercase}
.phase.play{color:var(--ok)} .phase.buzzed{color:var(--bad);animation:blink .7s infinite} .phase.cd{color:var(--accent)} .phase.paused{color:var(--accent)}
.clock{font-variant-numeric:tabular-nums;font-weight:800;line-height:1;font-size:clamp(56px,19vw,140px);letter-spacing:-.02em}
.clock.dim{opacity:.5}
.cd{font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(34px,11vw,80px);color:var(--accent);line-height:1.05}
.subline{color:var(--mute);font-size:.85rem;margin-top:4px}
.team{border-radius:var(--r);padding:10px 8px 12px;text-align:center;border:2px solid var(--line);background:var(--panel);min-width:0}
.team.L{grid-area:L} .team.R{grid-area:R}
/* colour belongs to the team (c0 = first-named, orange; c1 = second, blue), not to the side it stands on */
.team.c0{border-color:var(--left);background:linear-gradient(180deg,rgba(255,107,44,.16),var(--panel))}
.team.c1{border-color:var(--right);background:linear-gradient(180deg,rgba(34,184,240,.16),var(--panel))}
.team .end{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.team.c0 .end{color:var(--left)} .team.c1 .end{color:var(--right)}
.team .tn{font-size:clamp(1rem,4.5vw,1.6rem);font-weight:800;margin:2px 0;overflow-wrap:anywhere;line-height:1.15;word-break:break-word}
.team .sc{font-size:clamp(64px,24vw,170px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.team .to{font-size:.8rem;color:var(--mute);margin-top:4px}
.pip{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--accent);margin:0 3px;vertical-align:middle}
.pip.used{background:transparent;border:2px solid var(--mute)}
.swapflash{animation:swapflash 1.6s ease-out}
@keyframes swapflash{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9)}60%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.controls{padding:12px;display:flex;flex-direction:column;gap:10px}
.bz{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.bz.one{grid-template-columns:1fr}
.buzzbtn{min-height:clamp(90px,17vh,150px);font-size:clamp(1.2rem,5vw,2rem);font-weight:900;border-radius:18px;border:0;color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;touch-action:manipulation}
.buzzbtn.c0{background:var(--left)} .buzzbtn.c1{background:var(--right);color:#02202c} .buzzbtn.N{background:var(--bad)}
.buzzbtn:active{filter:brightness(1.3);transform:scale(.98)}
.buzzbtn small{display:block;font-size:.5em;opacity:.85;font-weight:700}
.award{display:grid;gap:10px}
/* End game / Overrides sit below the fold so they can't be hit by accident; scores, clock, buzzers and -10/Pause/+10 fit one screen */
.morectl{display:flex;flex-direction:column;gap:8px;margin-top:min(32vh,260px)}
.viewtag{text-align:center;color:var(--mute);font-size:.8rem;padding:6px}
.logl{max-height:220px;overflow:auto;font-size:.85rem}
.logl div{padding:4px 0;border-bottom:1px solid var(--line);color:var(--mute)}
.logl b{color:var(--text)}
@media (min-aspect-ratio:13/10) and (min-width:700px){
  .board{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"L mid R";align-items:stretch;padding-top:14px}
  .clock{font-size:clamp(56px,13vw,170px)} .team .sc{font-size:clamp(70px,17vw,230px)}
  .mid{display:flex;flex-direction:column;justify-content:center}
}
@media (max-height:480px) and (orientation:landscape){
  .board{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"L mid R";padding-top:6px}
  .clock{font-size:26vh} .team .sc{font-size:34vh} .cd{font-size:14vh}
  .buzzbtn{min-height:90px}
}

.pill.code{background:rgba(255,180,0,.14);color:var(--accent);letter-spacing:.08em;font-size:.78rem}
.gamepage .topbar .t{white-space:normal;font-size:.92rem;line-height:1.15}
td.team{border:0;border-bottom:1px solid var(--line);background:none;border-radius:0;padding:9px 6px;text-align:left}

.rec{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.rec:last-child{border:0} .rec .big{font-size:1.6rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums} .stat span{font-size:.75rem;color:var(--mute)}
.leadgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.lrow{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-variant-numeric:tabular-nums}

.printhead{display:none}
.card.sched{padding:2px 12px;margin:4px 0 0}
.game.c{grid-template-columns:1fr auto;padding:6px 0;gap:6px;line-height:1.25}
.game.c .vs b{display:inline} .game.c .sc{font-size:1rem;white-space:nowrap}
.game.c .dk{display:inline-block;font-size:.68rem;font-weight:700;color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:0 4px;margin-right:6px}
.game.c .pill{font-size:.62rem;padding:1px 7px}
.round-h{margin-top:12px}
@media print{
  html,body{background:#fff!important;color:#000!important}
  .topbar,.tabs,.btn,.noprint,.install,.toast,.modal,.banner,.iconbtn,.pill,.hint,.muted.small:empty{display:none!important}
  .printhead{display:block;margin:0 0 10px} .printhead h1{font-size:1.4rem;margin:0} 
  .wrap{max-width:none;padding:0}
  .card{background:#fff!important;border:1px solid #999!important;color:#000!important;break-inside:avoid;box-shadow:none}
  .muted,.round-h,.game .tm,td,th{color:#000!important}
  tr.first td{font-weight:800}
  .game{border-color:#bbb!important}
  *{animation:none!important}
}

.statgrid .stat[title],.rec[title],.leadgrid h3[title],.card th[title]{cursor:help}