: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:1040px;margin:0 auto;padding:12px 16px 80px} /* same width as the site header (sitehead.js .sbh .in) and marketing pages */
.topbar{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-t)) max(16px, calc((100% - 1040px) / 2 + 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;line-height:1.2;white-space:normal;overflow-wrap:break-word} /* long event names wrap instead of being cut */
@media(max-width:480px){.topbar .pill.code{font-size:.7rem;letter-spacing:.04em;padding:4px 7px}.topbar .pill.okdot{font-size:0;padding:0;width:10px;height:10px;min-width:10px;border-radius:50%;background:#2ecc71;flex:none}.topbar .pill.okdot.warn{background:#f39c12}.topbar .pill.okdot.bad{background:#e74c3c}.topbar .pill.okdot.off{background:#7f8c8d}}
.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)}
.clk{display:inline-block;margin-left:4px;padding:0 7px;border-radius:99px;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--panel2);color:var(--mute);white-space:nowrap;vertical-align:middle}
.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{pointer-events:none;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}
.gamepage .topbar{padding-left:16px;padding-right:16px} /* the scoreboard uses the full screen */
.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.L,.team.R{position:relative;padding-left:26px;padding-right:26px}
/* the end name runs up the outer edge of each score box (west edge on the left, east edge on the right) instead of taking a row of its own */
.team .end{position:absolute;top:50%;writing-mode:vertical-rl;max-height:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.team.L .end{left:6px;transform:translateY(-50%) rotate(180deg)}
.team.R .end{right:6px;transform:translateY(-50%)}
.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}
.topill{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:3px 10px;min-height:38px;border-radius:99px;border:2px solid var(--line,#3a3f47);background:transparent;color:var(--mute);font:inherit;font-size:.9rem;font-weight:700;white-space:nowrap}
button.topill{cursor:pointer;color:var(--text,#fff);border-color:var(--accent);background:rgba(255,255,255,.07)}
button.topill:active{transform:scale(.96)}
button.topill[disabled]{opacity:.4;pointer-events:none;border-color:var(--line,#3a3f47)}
.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}
.concbtn{text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--bad);border-color:var(--bad);margin-top:-2px}
.concbtn small{display:block;font-size:.72em;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.award{display:grid;gap:10px}
/* award buttons wait out --ld after a buzz: dim and untappable until the animation's delay passes */
.lockdelay{opacity:.35;pointer-events:none;animation:unlockbtn 0s linear var(--ld,3s) forwards}
@keyframes unlockbtn{to{opacity:1;pointer-events:auto}}
/* 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:6px}
.morectl .morehint{text-align:center}
.morectl .moregap{margin-top:min(32vh,260px)} /* the hint sits right under the controls; End game stays well away from them */
.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 .gt{display:inline-block;min-width:3.3em;font-size:.82rem;color:var(--mute);font-variant-numeric:tabular-nums}
.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}
  @page{margin:12mm}
  .round-h{margin-top:5px;font-size:8.5pt} .card.sched{padding:0 8px;margin:1px 0 0;border-radius:4px} .card.sched>.muted.small{padding:1px 0 2px!important;font-size:8.5pt}
  .game.c{padding:1px 0;font-size:10pt;line-height:1.2;background:none!important} .game.c .sc{font-size:10pt} .game.c .gt{font-size:9pt;color:#000!important}
}

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

/* countdown label ("Break time", "Game starts in"): .cd's big size applies to it too; keep it on one line on phones */
.phase.cd{font-size:clamp(20px,6.2vw,52px);white-space:nowrap;letter-spacing:.08em;line-height:1.1}
@media (max-height:480px) and (orientation:landscape){.phase.cd{font-size:7vh}}

@media(max-width:760px){.topbar.hasacts .acts{min-width:0}.topbar.hasacts .acts .btn{min-width:0;overflow:hidden;text-overflow:ellipsis}}
.dayhead{margin:22px 0 2px;padding:8px 12px;border-radius:10px;background:var(--panel2);color:var(--accent);font-weight:800;letter-spacing:.02em}
.btn.undo{background:var(--left);color:#2a0d00;border-color:var(--left)}
/* new tournament steps (Details → Teams & draw → Rules) */
.steps{display:flex;gap:6px;margin:14px 0 4px;font-size:.8rem;font-weight:700;color:var(--mute)}
.steps span,.steps button{flex:1;text-align:center;padding:7px 4px;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer}
.steps span{cursor:default}
.steps .on{color:#111;background:var(--accent);border-color:var(--accent)}
/* host: jump back to a live event from anywhere */
.livebtn{flex:none;background:#c62828;color:#fff;border:0;border-radius:999px;font-weight:800;font-size:.8rem;padding:6px 11px;cursor:pointer;white-space:nowrap}
/* phones: short live button + code chip, so the event name gets the room */
.topbar .narrow{display:none}
@media(max-width:480px){.topbar .wide{display:none}.topbar .narrow{display:inline}.topbar .t{min-width:96px}.topbar{gap:8px}}