/* ============================================================
   BIG BOARD — a live quiz-show host console
   Aesthetic: midnight broadcast. Spotlit blue-violet stage,
   cobalt tiles, money-gold values, crimson "live" tension,
   mint for correct awards. Single file, no build, no backend.
   ============================================================ */


*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--ink);
  background:var(--bg-0);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- atmospheric background layers ---- */
.bg, .grain{position:fixed; inset:0; pointer-events:none; z-index:-2;}
.bg{
  background:
    radial-gradient(120% 90% at 50% -18%, #2a2168 0%, #150f3a 38%, #0a071e 66%, #06040f 100%),
    radial-gradient(80% 60% at 85% 110%, rgba(255,46,84,.10), transparent 60%),
    radial-gradient(70% 60% at 8% 105%, rgba(60,120,255,.12), transparent 60%);
}
.bg::after{ /* soft vignette */
  content:""; position:absolute; inset:0;
  background:radial-gradient(130% 110% at 50% 38%, transparent 52%, rgba(0,0,0,.55) 100%);
}
.grain{
  z-index:-1; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#app{position:relative; z-index:1; height:100vh; display:flex; flex-direction:column;}

/* ---------------- shared bits ---------------- */
.eyebrow{
  font-family:var(--ui); font-weight:700; letter-spacing:.34em;
  text-transform:uppercase; font-size:11px; color:var(--muted);
}
.muted{color:var(--muted);}
.kbd{
  font-family:var(--ui); font-weight:700; font-size:11px; letter-spacing:.06em;
  padding:2px 7px; border-radius:6px; border:1px solid var(--line-2);
  color:var(--muted); background:rgba(255,255,255,.03);
}

button{font-family:var(--ui); cursor:pointer; border:none; background:none; color:inherit;}

.btn{
  font-family:var(--ui); font-weight:700; letter-spacing:.04em;
  border-radius:var(--r-sm); padding:11px 18px; font-size:13px;
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
  color:var(--ink); transition:transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.08); border-color:var(--line-2);}
.btn:active{transform:translateY(0);}
.btn.gold{
  background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:#2a1c00;
  border-color:rgba(255,255,255,.5); box-shadow:0 8px 18px -14px var(--gold-deep);
  text-transform:uppercase; letter-spacing:.1em;
}
.btn.gold:hover{box-shadow:0 12px 22px -14px var(--gold-deep); filter:brightness(1.04);}
.btn.ghost{background:transparent;}
.btn.danger{color:#ffb9c6; border-color:rgba(255,46,84,.35);}
.btn.danger:hover{background:rgba(255,46,84,.12); border-color:rgba(255,46,84,.6);}
.btn.sm{padding:7px 12px; font-size:11.5px; letter-spacing:.08em;}
.icon-btn{
  width:34px; height:34px; padding:0; justify-content:center; border-radius:8px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); font-size:16px; line-height:1;
}
/* a clean CSS play triangle for the primary Present / Host actions (no glyphs) */
.ico-play{flex:0 0 auto; width:0; height:0; border-style:solid;
  border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor;}

/* Big Shoulders Display ships many weights where Anton was one heavy cut.
   Give the display face a heavy default so the board keeps its punch. */
.title-display,.title-input,.corner .big,.cathead input,.valcell input,
.bcat,.tile,.editor .ed-cat,.editor .ed-val,.ins,.ov-cat,.ov-val,
.buzzed .blab,.wrongbtn .wb-minus,.ovs-score,.score-title,.award-give .ac-give,
.board-indicator,.es-rank-big,.es-name,.es-points,.es-line-rank,.es-line-score,
.pscore,.pscore-wrap .step,.np-row button,.lobby-code,.btab.add,
.landing-title,.lz-tile{font-weight:800;}

/* ---------------- top bar ---------------- */
.topbar{
  display:flex; align-items:center; gap:18px;
  padding:18px clamp(18px,3vw,40px) 14px;
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.brand{display:flex; align-items:baseline; gap:14px; min-width:0;}
.brand .dot{width:11px; height:11px; border-radius:50%; background:var(--crimson);
  box-shadow:0 0 0 4px rgba(255,46,84,.16), 0 0 18px var(--crimson); align-self:center; flex:0 0 auto;
  animation:livepulse 1.8s ease-in-out infinite;}
.title-display{
  font-family:var(--display); font-size:clamp(26px,3.4vw,42px); line-height:.9;
  letter-spacing:.02em; text-transform:uppercase; margin:0; color:var(--gold-2);
  text-shadow:0 2px 0 rgba(0,0,0,.35); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.title-input{
  font-family:var(--display); font-size:clamp(26px,3.4vw,42px); line-height:1;
  letter-spacing:.01em; text-transform:uppercase;
  background:transparent; border:none; outline:none; color:var(--gold-2);
  border-bottom:2px dashed var(--line-2); padding:2px 6px 2px 2px; min-width:6ch; max-width:46vw;
  caret-color:var(--gold);
}
.title-input:focus{border-bottom-color:var(--gold);}
.mode-pill{
  margin-left:2px; font-family:var(--ui); font-weight:800; letter-spacing:.22em; font-size:10.5px;
  text-transform:uppercase; padding:5px 10px; border-radius:3px; color:var(--bg-0);
  background:var(--gold); align-self:center;
}
.mode-pill.live{background:var(--crimson); color:#fff; box-shadow:0 0 16px -6px var(--crimson);}
.spacer{flex:1 1 auto;}
.toolgroup{display:flex; align-items:center; gap:8px;}
.toolgroup .div{width:1px; height:26px; background:var(--line); margin:0 4px;}

/* ---------------- EDIT MODE ---------------- */
.editwrap{flex:1 1 auto; min-height:0; overflow:auto; padding:18px clamp(24px,3vw,40px) 34px;}
.edit-hint{display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:2px 0 18px;}
.edit-hint .eyebrow{color:var(--muted-2);}

.egrid{display:grid; gap:12px; position:relative;}
.ehead, .erow{display:grid; gap:12px; grid-template-columns:var(--cols);}
.ehead{position:relative;}

/* insert-here handles that appear in the gap between the two columns/rows
   the cursor is on. They live inside the cathead / valcell so the parent
   keeps :hover even while the cursor is over the handle in the gutter. */
.ins{
  position:absolute; z-index:6; opacity:0; pointer-events:none;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--gold-2);
  background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:#2a1c00;
  font-family:var(--display); font-size:18px; line-height:1;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.7);
  transition:opacity .14s ease, filter .12s ease, box-shadow .14s ease;
}
.ins:hover{filter:brightness(1.06); box-shadow:0 0 16px -2px var(--gold);}
.ins-col{top:50%;}
.ins-col.left{left:-6px; transform:translate(-50%,-50%);}
.ins-col.right{right:-6px; transform:translate(50%,-50%);}
.ins-row{left:50%;}
.ins-row.top{top:-6px; transform:translate(-50%,-50%);}
.ins-row.bottom{bottom:-6px; transform:translate(-50%,50%);}
.cathead:hover .ins-col{opacity:1; pointer-events:auto;}
.valcell:hover .ins-row{opacity:1; pointer-events:auto;}
.corner{
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  padding:10px 12px; border-radius:var(--r-md); border:1px dashed var(--line);
  color:var(--muted-2);
}
.corner .big{font-family:var(--display); font-size:20px; color:var(--muted); line-height:1;}
.cathead{
  position:relative; border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(40,55,210,.30), rgba(11,21,90,.30));
  border:1px solid var(--line-2); padding:12px 12px 12px;
  box-shadow:var(--shadow-1);
}
.cathead .lab{font-size:9.5px; letter-spacing:.28em; color:var(--muted); text-transform:uppercase; margin-bottom:6px;}
.cathead input{
  width:100%; background:transparent; border:none; outline:none; color:var(--gold-2);
  font-family:var(--display); font-size:clamp(14px,1.35vw,20px); letter-spacing:.02em;
  text-transform:uppercase; line-height:1.05;
}
.cathead input::placeholder{color:var(--muted-2);}
.cathead .colx{
  position:absolute; top:8px; right:8px; opacity:0; transition:opacity .15s ease;
  width:22px; height:22px; border-radius:6px; font-size:12px; color:#ffc2cd;
  border:1px solid rgba(255,46,84,.3); display:flex; align-items:center; justify-content:center; background:rgba(20,10,24,.6);
}
.cathead:hover .colx{opacity:1;}
/* drag handle: reorder a column, or drop it on another board's tab to move it */
.cathead .lab{padding-left:18px;}
.cgrip{
  position:absolute; top:8px; left:7px; z-index:7; width:14px; height:16px; cursor:grab;
  display:flex; flex-wrap:wrap; align-content:center; gap:3px 3px; padding:0 2px;
  opacity:0; transition:opacity .15s ease;
}
.cathead:hover .cgrip{opacity:.55;}
.cgrip:hover{opacity:1;}
.cgrip i{width:3px; height:3px; border-radius:50%; background:var(--gold-2);}
.cathead.dragging{opacity:.4;}
.cathead.drop-ok{border-color:var(--gold-deep); border-style:dashed;}
.cathead.drag-over{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold) inset;}
/* category description, shown in the board's opening */
.cathead .cat-desc{width:100%; margin-top:7px; font-family:var(--ui); font-size:12px; color:var(--muted);
  background:rgba(0,0,0,.18); border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 9px; outline:none;}
.cathead .cat-desc:focus{border-color:var(--gold-deep); color:var(--ink);}
.cathead .cat-desc::placeholder{color:var(--muted-2);}
/* the board's own name (classic editor) */
.board-name-row{display:flex; align-items:center; gap:12px; margin:2px 0 14px;}
.board-name-row .flab{flex:0 0 auto; font-family:var(--ui); font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:10.5px; color:var(--muted);}
.board-name{flex:1 1 auto; min-width:0; max-width:480px; font-family:var(--display); font-weight:800; color:var(--gold-2); font-size:22px;
  background:rgba(0,0,0,.3); border:1px solid var(--line-2); border-radius:var(--r-md); padding:8px 12px; outline:none;}
.board-name:focus{border-color:var(--gold);}
.board-name::placeholder{color:var(--muted-2); font-family:var(--ui); font-weight:700; font-size:14px;}

.valcell{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:4px;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:rgba(255,200,58,.06);
}
.valcell .rowx{
  position:absolute; top:6px; right:6px; opacity:0; transition:opacity .15s ease;
  width:20px; height:20px; border-radius:6px; font-size:11px; color:#ffc2cd;
  border:1px solid rgba(255,46,84,.3); display:flex; align-items:center; justify-content:center; background:rgba(20,10,24,.6);
}
.valcell:hover .rowx{opacity:1;}
.valcell input{
  width:100%; text-align:center; background:transparent; border:none; outline:none;
  font-family:var(--display); font-size:clamp(18px,1.9vw,28px); color:var(--gold);
  letter-spacing:.02em;
}
.cluecell{
  position:relative; text-align:left; min-height:84px; width:100%;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(32,52,214,.16), rgba(11,21,102,.20));
  padding:12px 13px; color:var(--ink); transition:transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  overflow:hidden; display:flex; flex-direction:column; gap:6px;
}
.cluecell:hover{transform:translateY(-2px); border-color:var(--tile-edge); box-shadow:0 14px 30px -18px var(--tile-glow);}
.cluecell .cc-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.cluecell .cc-q{font-family:var(--serif); font-size:13.5px; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.cluecell .cc-empty{font-family:var(--ui); font-size:12.5px; color:var(--muted-2); font-style:italic;}
.cluecell .cc-status{display:flex; gap:6px; align-items:center;}
.pip{width:7px; height:7px; border-radius:50%; background:var(--muted-2);}
.pip.on{background:var(--mint); box-shadow:0 0 8px var(--mint);}
.pip.q.on{background:var(--gold); box-shadow:0 0 8px var(--gold);}
.cluecell .editmark{font-size:10px; letter-spacing:.18em; color:var(--muted-2); text-transform:uppercase;}
.cluecell.filled{border-color:var(--line-2);}
.cluecell{cursor:grab;}
.cluecell:active{cursor:grabbing;}
.cluecell.dragging{opacity:.35; transform:scale(.97);}
.cluecell.drop-ok{border-style:dashed; border-color:var(--gold-deep); background:linear-gradient(180deg, rgba(255,200,58,.08), rgba(11,21,102,.20));}
.cluecell.drag-over{border-color:var(--gold); box-shadow:inset 0 0 0 2px var(--gold), 0 14px 30px -16px var(--gold); transform:translateY(-2px);}

.rowx-wrap{display:flex; align-items:center; gap:10px; margin-top:4px;}

/* ---------------- PRESENT MODE ---------------- */
.stage{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:16px clamp(14px,2.4vw,34px) 0;}
.board{
  flex:1 1 auto; min-height:0; display:grid; gap:clamp(7px,.7vw,12px);
  grid-template-columns:var(--cols-p);
  grid-template-rows:var(--rows-p);
}
.bcat{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px 8px; border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg, #11183f, #0a1130);
  border:1px solid var(--line-2); border-bottom:2px solid var(--gold-deep);
  font-family:var(--display); text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(11px,1.15vw,18px); line-height:1.02; color:var(--gold-2);
  text-shadow:0 1px 0 rgba(0,0,0,.5); min-height:54px;
}
.tile{
  position:relative; border:none; border-radius:6px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(120,150,255,.35), transparent 55%),
    linear-gradient(180deg, var(--tile-1), var(--tile-2));
  box-shadow:var(--shadow-tile);
  font-family:var(--display); color:var(--gold);
  font-size:clamp(24px,3.4vw,54px); letter-spacing:.02em;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
  transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
  animation:tileIn .5s cubic-bezier(.2,.9,.25,1) both;
}
.tile::before{content:""; position:absolute; inset:0; border-radius:6px;
  border:1px solid rgba(120,150,255,.35); box-shadow:inset 0 2px 0 rgba(255,255,255,.14); pointer-events:none;}
.tile:not(.spent):hover{transform:translateY(-3px) scale(1.012); filter:brightness(1.08);
  box-shadow:var(--shadow-tile), 0 0 26px -10px var(--tile-glow);}
.tile:not(.spent):active{transform:translateY(0) scale(.995);}
.tile.spent{
  background:linear-gradient(180deg,#13122b,#0c0b20); color:transparent; box-shadow:none; cursor:default;
  animation:none;
}
.tile.spent::before{border-color:var(--line);}
.tile.spent::after{content:""; position:absolute; width:40%; height:3px; border-radius:3px; background:rgba(150,140,210,.18);}
.tile .empty-mark{position:absolute; bottom:7px; right:9px; font-family:var(--ui); font-size:10px; letter-spacing:.15em;
  color:rgba(255,255,255,.35); text-transform:uppercase;}

/* ---------------- SCOREBOARD ---------------- */
.scorebar{
  position:relative;
  flex:0 0 auto; display:flex; align-items:stretch;
  padding:9px clamp(14px,2.4vw,34px) 10px; margin-top:8px;
  border-top:1px solid var(--line);
}
.sb-cards{
  flex:1 1 auto; min-width:0; display:flex; align-items:stretch; justify-content:center;
  gap:12px; flex-wrap:wrap;
}
.sb-add{
  position:absolute; right:clamp(14px,2.4vw,34px); top:9px; bottom:10px;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  width:172px; padding:12px; border-radius:var(--r-md);
  border:1px dashed var(--line-2); background:rgba(8,6,20,.6);
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.scorebar:hover .sb-add, .sb-add:focus-within{opacity:1; transform:none; pointer-events:auto;}
.sb-add .eyebrow{color:var(--muted-2);}
.np-row{display:flex; gap:7px;}
.np-row input{
  flex:1 1 auto; min-width:0; background:rgba(0,0,0,.25); border:1px solid var(--line-2);
  border-radius:8px; padding:8px 10px; color:var(--ink); font-family:var(--ui); font-size:13px; outline:none;
}
.np-row input:focus{border-color:var(--gold);}
.np-row button{flex:0 0 auto; width:38px; border-radius:8px; background:var(--gold); color:#2a1c00;
  font-family:var(--display); font-size:20px; line-height:1; border:1px solid rgba(255,255,255,.4);}

.pcard{
  flex:0 0 auto; width:212px; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 14px 8px; border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line-2); box-shadow:var(--shadow-1); position:relative;
  transition:border-color .18s ease, box-shadow .18s ease, transform .14s ease;
}
.pcard:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--team) 50%, var(--line-2));
  box-shadow:var(--shadow-1), 0 0 28px -10px var(--team);}
.pcard .accent{position:absolute; left:0; top:10px; bottom:10px; width:4px; border-radius:4px;
  background:linear-gradient(180deg, var(--team), color-mix(in srgb, var(--team) 45%, #000));}
.pcard .pname{
  background:transparent; border:none; outline:none; color:var(--ink); text-align:center;
  font-family:var(--ui); font-weight:800; font-size:15px; letter-spacing:.01em; width:100%;
  padding:1px; border-bottom:1px solid transparent; cursor:default;
}
.pcard:hover .pname{cursor:text;}
.pcard .pname:focus{border-bottom-color:var(--line-2);}
.pscore-wrap{display:flex; align-items:stretch; justify-content:center; gap:7px; width:100%;}
.pscore-wrap .step{
  width:34px; flex:0 0 auto; border-radius:8px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.04); font-family:var(--display); font-size:20px; line-height:1; color:var(--ink);
  opacity:0; transition:opacity .18s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.pcard:hover .pscore-wrap .step{opacity:1;}
.pscore-wrap .step.minus:hover{background:rgba(255,46,84,.16); border-color:rgba(255,46,84,.5); color:#ffc2cd;}
.pscore-wrap .step.plus:hover{background:rgba(31,224,138,.16); border-color:rgba(31,224,138,.5); color:#aef7d4;}
.pscore{
  flex:1 1 auto; min-width:0; text-align:center; background:transparent;
  border:1px solid transparent; border-radius:8px; color:var(--gold);
  font-family:var(--display); font-size:27px; line-height:1.2; outline:none; letter-spacing:.02em;
  padding:4px 4px 2px;
  transition:background .18s ease, border-color .18s ease;
}
.pcard:hover .pscore{background:rgba(0,0,0,.3); border-color:var(--line-2);}
.pscore:focus{border-color:var(--gold); background:rgba(0,0,0,.3);}
.pscore-wrap.pop .pscore{animation:scorepop .45s cubic-bezier(.2,1.4,.4,1);}
.pscore-wrap.pop.down .pscore{animation:scorepopDown .45s cubic-bezier(.2,1.4,.4,1);}
.pcard .premove{position:absolute; top:6px; right:6px; width:20px; height:20px; padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:11px; line-height:1;
  color:#ffc2cd; border:1px solid rgba(255,46,84,.3); background:rgba(20,10,24,.6);
  opacity:0; transition:opacity .18s ease, background .15s ease, border-color .15s ease;}
.pcard:hover .premove{opacity:.85;}
.pcard .premove:hover{opacity:1; background:rgba(255,46,84,.18); border-color:rgba(255,46,84,.6);}
.sb-empty{display:flex; align-items:center; color:var(--muted-2); font-style:italic; padding:0 10px;}

/* ---------------- CLUE EDITOR MODAL ---------------- */
.scrim{
  position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center;
  background:rgba(4,3,12,.66); backdrop-filter:blur(7px); animation:fade .2s ease both;
  padding:24px;
}
.editor{
  width:min(720px,94vw); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, #181233, #110d28);
  border:1px solid var(--line-2); box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  animation:modalIn .26s cubic-bezier(.2,.9,.25,1) both;
}
.editor .ed-head{display:flex; align-items:center; gap:14px; padding:18px 22px;
  border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(40,55,210,.18), transparent);}
.editor .ed-cat{font-family:var(--display); text-transform:uppercase; font-size:20px; color:var(--gold-2); letter-spacing:.02em;}
.editor .ed-val{font-family:var(--display); font-size:28px; color:var(--gold);}
.editor .ed-body{padding:20px 22px 8px; display:flex; flex-direction:column; gap:18px;}
.field label{display:block; margin-bottom:8px;}
.field .flab{font-family:var(--ui); font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:10.5px; color:var(--muted);}
.field .fsub{font-size:11px; color:var(--muted-2); margin-left:8px; letter-spacing:.02em; text-transform:none; font-weight:600;}
.field textarea{
  width:100%; resize:vertical; min-height:74px; border-radius:var(--r-md);
  background:rgba(0,0,0,.32); border:1px solid var(--line-2); color:var(--ink);
  font-family:var(--serif); font-size:16px; line-height:1.5; padding:13px 14px; outline:none;
}
.field.answer textarea{color:var(--gold-2);}
.field textarea:focus{border-color:var(--gold);}
.editor .ed-foot{display:flex; align-items:center; gap:10px; padding:14px 22px 20px;}

/* ---------------- THE CLUE OVERLAY (4 stages) ---------------- */
.overlay{
  position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:clamp(20px,4vw,64px); padding-bottom:clamp(96px,13vh,140px);
  background:
    radial-gradient(120% 100% at 50% -10%, #241a5e 0%, #120d33 42%, #08061b 72%, #05040f 100%);
  animation:overlayIn .34s cubic-bezier(.2,.9,.25,1) both;
  outline:none;
}
.overlay::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.6));}
/* a soft spotlight falling from above onto the clue, like a stage light */
.overlay::before{content:""; position:absolute; top:-12%; left:50%; transform:translateX(-50%);
  width:min(1040px,94%); height:96%; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,240,210,.20) 0%, rgba(255,221,150,.09) 32%,
    rgba(255,205,110,.025) 58%, transparent 76%);
  clip-path:polygon(41% 0%, 59% 0%, 97% 100%, 3% 100%);
  filter:blur(26px); animation:fade .8s ease both;}
.overlay.live::before{opacity:.45;}
/* crimson "live" tension wash for stage 2 */
.ov-livewash{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(255,46,84,.16), transparent 60%),
    inset 0 0 0 0 transparent;
  box-shadow:inset 0 0 220px 40px rgba(255,46,84,.22);}
.overlay.live .ov-livewash{opacity:1; animation:livewash 1.7s ease-in-out infinite;}

.ov-x{position:absolute; top:20px; right:22px; z-index:3; width:42px; height:42px; border-radius:11px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.05); color:var(--muted); font-size:18px;
  display:flex; align-items:center; justify-content:center;}
.ov-x:hover{background:rgba(255,46,84,.14); color:#ffc2cd; border-color:rgba(255,46,84,.5);}

.ov-steps{position:absolute; top:26px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:3;}
.ov-steps .s{display:flex; align-items:center; gap:9px;}
.ov-steps .s i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); display:block; transition:all .25s ease;}
.ov-steps .s.on i{background:var(--gold); box-shadow:0 0 12px var(--gold); transform:scale(1.25);}
.ov-steps .s.done i{background:rgba(255,200,58,.5);}

.ov-head{position:relative; z-index:2; text-align:center; margin-bottom:clamp(18px,3vh,40px);}
.ov-cat{font-family:var(--display); text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(20px,2.6vw,38px); color:var(--gold-2); line-height:1;
  text-shadow:0 2px 0 rgba(0,0,0,.4);}
.ov-val{font-family:var(--display); font-size:clamp(54px,11vw,150px); line-height:1; margin-top:6px;
  padding-top:.08em;
  background:linear-gradient(180deg,#fff 0%, var(--gold-2) 45%, var(--gold) 78%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 26px rgba(255,200,58,.28));}
.overlay.live .ov-val{filter:drop-shadow(0 8px 30px rgba(255,46,84,.4));}
/* once past the opening reveal, shrink the header so the rest fits the screen */
.overlay:not(.stage-1) .ov-head{margin-bottom:clamp(10px,2vh,22px);}
.overlay:not(.stage-1) .ov-cat{font-size:clamp(16px,2vw,28px);}
.overlay:not(.stage-1) .ov-val{font-size:max(40px, min(96px, 8vw, 12vh));}
/* long opening sequence: the worth and category arrive big and centred,
   hold, then rise to the top before the question fades in */
.overlay.intro .ov-head{animation:headReveal 2.5s cubic-bezier(.2,.85,.2,1) both;}
.overlay.intro .ov-val{animation:valGlow 2.5s ease both;}

.ov-inner{position:relative; z-index:2; width:min(1100px,92vw); text-align:center;
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;}
.overlay.stage-2 .ov-inner, .overlay.stage-4 .ov-inner{overflow:auto;}

.clue-text{font-family:var(--serif); line-height:1.2; color:var(--ink);
  font-size:clamp(30px,5vw,78px); font-weight:600; max-width:20ch;}
.clue-text.q{animation:clueIn .6s cubic-bezier(.2,.8,.25,1) both;}
.clue-text.q.intro{animation:clueIn 1.1s cubic-bezier(.2,.8,.25,1) 2.5s both;}
.clue-text.a{position:relative; color:var(--gold-2); font-size:clamp(40px,7vw,108px); line-height:1.08;
  animation:answerIn .7s cubic-bezier(.2,.85,.25,1) both;}
.ans-label{font-family:var(--ui); font-weight:800; letter-spacing:.36em; text-transform:uppercase;
  font-size:clamp(13px,1.4vw,18px); color:var(--mint); margin-bottom:clamp(16px,2.5vh,28px);
  animation:slamIn .5s cubic-bezier(.18,1.1,.3,1) both;}
.clue-text .muted{font-family:var(--ui); font-style:italic; font-size:.5em; font-weight:600;}
/* gold light sweep across the revealed answer */
.ans-sweep{position:absolute; inset:-10% -6%; pointer-events:none; overflow:hidden;}
.ans-sweep::before{content:""; position:absolute; top:0; bottom:0; width:45%; left:-60%;
  background:linear-gradient(100deg, transparent, rgba(255,227,154,.5), transparent);
  filter:blur(6px); animation:sweep 1s cubic-bezier(.4,0,.2,1) .15s 1 both; transform:skewX(-12deg);}

/* stage 2 — a team has buzzed */
.buzzed{display:flex; flex-direction:column; align-items:center; gap:12px; animation:fade .3s ease both;}
.buzzed .ring{width:58px; height:58px; border-radius:50%; position:relative; flex:0 0 auto;
  border:3px solid rgba(255,46,84,.55); box-shadow:0 0 30px rgba(255,46,84,.4);}
.buzzed .ring::after{content:""; position:absolute; inset:-3px; border-radius:50%;
  border:3px solid var(--crimson); animation:ripple 1.5s ease-out infinite;}
.buzzed .ring::before{content:""; position:absolute; inset:19px; border-radius:50%; background:var(--crimson);
  box-shadow:0 0 18px var(--crimson); animation:livepulse 1.2s ease-in-out infinite;}
.buzzed .blab{font-family:var(--display); text-transform:uppercase; letter-spacing:.22em; font-size:clamp(18px,2.4vw,30px);
  color:#ff7d93;}
.wrong-label{font-family:var(--ui); font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  font-size:11px; color:var(--muted); margin-top:6px;}
.wrong-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:2px;}
.wrongbtn{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 15px; border-radius:10px; border:1px solid rgba(255,46,84,.32);
  background:rgba(255,46,84,.07); color:#ffc2cd; font-family:var(--ui); font-weight:700;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.wrongbtn .wb-name{font-size:13.5px; letter-spacing:.02em; color:var(--ink);}
.wrongbtn .wb-minus{font-family:var(--display); font-size:18px; color:#ff7d93;}
.wrongbtn:hover{transform:translateY(-1px); background:rgba(255,46,84,.2); border-color:rgba(255,46,84,.6); color:#ffd0d9;}

/* persistent score strip on every overlay stage */
.ov-scores{position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:center; align-items:flex-end; gap:clamp(8px,1vw,14px);
  flex-wrap:wrap; padding:0 20px clamp(16px,2.2vh,24px);}
.overlay.intro .ov-scores{animation:fade .8s ease 1.2s both;}
.overlay.stage-4 .ov-scores{display:none;} /* scoring cards already show each total */
.ovs{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:108px;
  padding:7px 16px 8px; border-radius:12px; border:1px solid var(--line-2); border-top:3px solid var(--team,var(--gold));
  background:rgba(10,8,26,.55); transition:border-color .2s ease, box-shadow .2s ease;}
.ovs-name{font-family:var(--ui); font-weight:700; font-size:11.5px; letter-spacing:.05em;
  color:var(--muted); max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* team colour dot */
.cdot{display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle;
  margin-right:7px; background:var(--team,var(--gold)); box-shadow:0 0 8px -1px var(--team,var(--gold));}
.ovs-score{font-family:var(--display); font-size:clamp(22px,2.2vw,30px); color:var(--gold); line-height:1.25; padding-top:2px;}
.ovs.flash.up{animation:ovReward .5s cubic-bezier(.2,1.3,.4,1) both; border-color:var(--mint); box-shadow:0 0 26px -6px var(--mint);}
.ovs.flash.up .ovs-score{color:var(--mint);}
.ovs.flash.down{animation:ovDamage .45s ease both; border-color:var(--crimson); box-shadow:0 0 26px -6px var(--crimson);}
.ovs.flash.down .ovs-score{color:#ff7d93;}
.ovs.out{opacity:.5;}
.ovs.out .ovs-score{text-decoration:line-through;}
@keyframes ovReward{0%{transform:scale(1);}38%{transform:scale(1.16);}100%{transform:scale(1);}}
@keyframes ovDamage{0%,100%{transform:translateX(0);}16%{transform:translateX(-5px);}32%{transform:translateX(5px);}48%{transform:translateX(-4px);}64%{transform:translateX(4px);}80%{transform:translateX(-2px);}}

/* stage 4 — scoring */
.score-title{font-family:var(--display); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(22px,3vw,40px); color:var(--ink); margin-bottom:4px; animation:slamIn .4s ease both;}
.score-title b{color:var(--mint);}
.score-sub{font-family:var(--ui); color:var(--muted); font-size:13px; letter-spacing:.04em; margin-bottom:22px;}
.award-grid{display:grid; gap:13px; width:100%;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); max-width:920px;}
.award-card{position:relative; display:flex; flex-direction:column; animation:popIn .4s cubic-bezier(.2,1.1,.3,1) both;}
.award-give{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; width:100%;
  padding:15px 16px 14px; border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(31,224,138,.12), rgba(20,16,48,.6));
  border:1px solid var(--line-2); transition:all .14s ease;
}
.award-give:hover{transform:translateY(-2px); background:linear-gradient(180deg, rgba(31,224,138,.28), rgba(20,16,48,.6));
  border-color:var(--mint); box-shadow:0 16px 34px -18px var(--mint);}
.award-give.given{animation:awardGiven .6s cubic-bezier(.2,1.3,.4,1) both;
  background:linear-gradient(180deg, rgba(31,224,138,.42), rgba(20,16,48,.6)); border-color:var(--mint);
  box-shadow:0 0 0 1px var(--mint), 0 18px 42px -14px var(--mint);}
.award-give.given .ac-give{color:var(--mint); text-shadow:0 0 18px var(--mint);}
@keyframes awardGiven{0%{transform:scale(1);}40%{transform:scale(1.07);}100%{transform:scale(1.03);}}
.award-give .ac-name{font-family:var(--ui); font-weight:800; font-size:16px; max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.award-give .ac-row{display:flex; align-items:baseline; gap:10px; width:100%; justify-content:space-between; margin-top:4px;}
.award-give .ac-score{font-family:var(--ui); color:var(--muted); font-size:12.5px; letter-spacing:.05em;}
.award-give .ac-give{font-family:var(--display); color:var(--mint); font-size:26px; line-height:1;}
.award-empty{color:var(--muted); font-style:italic; font-family:var(--ui); padding:20px;}

/* overlay controls — kept lower and quieter than the question */
.ov-controls{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:clamp(34px,6vh,72px); flex-wrap:wrap;}
.overlay:not(.stage-1) .ov-controls{margin-top:clamp(16px,2.5vh,30px);}
.overlay.intro .ov-controls{animation:fade .7s ease 3s both;}
.navbtn{
  display:inline-flex; flex-direction:column; align-items:center; gap:3px;
  font-family:var(--ui); font-weight:800; letter-spacing:.06em; font-size:15px;
  padding:13px 26px; border-radius:8px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.05); color:var(--ink);
  transition:transform .14s ease, background .16s ease, box-shadow .18s ease, border-color .16s ease; min-width:150px;
}
.navbtn .hint{font-weight:700; font-size:10px; letter-spacing:.12em; color:var(--muted-2); text-transform:uppercase;}
.navbtn:hover{transform:translateY(-2px); background:rgba(255,255,255,.1);}
.navbtn.primary{background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:#2a1c00;
  border-color:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 10px 24px -16px var(--gold-deep);}
.navbtn.primary .hint{color:rgba(42,28,0,.6);}
.navbtn.primary:hover{box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 14px 28px -16px var(--gold-deep); filter:brightness(1.04);}
.navbtn.live{background:linear-gradient(180deg,#ff5d77,var(--crimson)); color:#fff; border-color:rgba(255,255,255,.45);
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 10px 24px -16px var(--crimson-deep);}
.navbtn.live .hint{color:rgba(255,255,255,.75);}
.navbtn.live:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 14px 28px -16px var(--crimson-deep); filter:brightness(1.05);}
.navbtn.skip{background:transparent; opacity:.78;}
.navbtn.skip:hover{opacity:1;}

/* ---------------- ADVANCED: toggle, board indicator, board tabs ---------------- */
.btn.on{
  background:linear-gradient(180deg, rgba(255,200,58,.22), rgba(255,200,58,.10));
  border-color:var(--gold-deep); color:var(--gold-2);
  box-shadow:0 0 18px -8px var(--gold);
}
.board-indicator{
  align-self:center; margin-left:4px;
  font-family:var(--display); letter-spacing:.04em; font-size:15px;
  color:var(--gold-2); padding:5px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:rgba(10,8,26,.5);
}
.board-indicator .bi-sep{color:var(--muted-2); margin:0 1px;}

.boardtabs{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:2px 0 16px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.boardtabs .eyebrow{color:var(--muted-2); margin-right:2px;}
.btab{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:9px 14px; border-radius:10px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.04); color:var(--muted);
  font-family:var(--ui); font-weight:700; letter-spacing:.03em; font-size:13px;
  transition:transform .12s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btab:hover{transform:translateY(-1px); background:rgba(255,255,255,.08); color:var(--ink);}
.btab .btab-dot{width:8px; height:8px; border-radius:50%; background:var(--muted-2); flex:0 0 auto;}
.btab.written .btab-dot{background:var(--mint); box-shadow:0 0 8px var(--mint);}
.btab.active{
  color:#2a1c00; border-color:rgba(255,255,255,.5);
  background:linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow:0 8px 22px -12px var(--gold);
}
.btab.active .btab-dot{background:#2a1c00; box-shadow:none;}
.btab .btab-x{
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  border-radius:5px; font-size:10px; color:inherit; opacity:.55;
  border:1px solid transparent; background:transparent; margin:-2px -4px -2px 0;
}
.btab .btab-x:hover{opacity:1; background:rgba(255,46,84,.2); color:#ffc2cd;}
.btab.add{
  border-style:dashed; color:var(--gold-2); background:transparent;
  font-family:var(--display); letter-spacing:.04em;
}
.btab.add:hover{border-color:var(--gold-deep); background:rgba(255,200,58,.08);}
.btab-max{font-size:11px; color:var(--muted-2); font-style:italic; letter-spacing:.04em;}
.bt-hint{font-size:12px; color:var(--muted-2); letter-spacing:.02em; margin-left:auto;}

/* drag a board tab to reorder, or drop a category onto one to move it there */
.btab[draggable]{cursor:grab;}
.btab.dragging{opacity:.4; cursor:grabbing;}
.btab.drag-over{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold) inset;}
.btab.coldrop{border-style:dashed; border-color:var(--gold-deep); background:rgba(255,200,58,.06);}
.btab.coldrop-over{border-style:solid; border-color:var(--gold); background:rgba(255,200,58,.16);
  box-shadow:0 0 0 2px var(--gold) inset;}

/* ---------------- END-OF-MATCH SCREENS ---------------- */
/* A broadcast "final results" card: left-anchored, oversized rank numerals,
   one spotlight cone, a typeset ledger with dot leaders. No confetti, no
   centred pile of glowing pills. */
.endscreen{
  position:fixed; inset:0; z-index:1050; display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,6vh,80px) clamp(28px,7vw,120px); outline:none;
  background:radial-gradient(135% 120% at 50% 0%, #0c0a1e 0%, #0a0820 30%, #06040f 62%, #040309 100%);
  animation:fade .3s ease both;
}
/* hard vignette so the light reads as a stage spotlight, not a glow */
.endscreen::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 100% at 30% 36%, transparent 40%, rgba(0,0,0,.66) 100%);}

.es-wrap{position:relative; z-index:2; width:min(960px,100%); margin:0 auto; text-align:left;
  max-height:100%; overflow:auto;}

/* the cone of light falling on the champion's rank numeral */
.es-beam{position:absolute; z-index:0; top:-12vh; left:-2%; width:min(340px,40%); height:64vh;
  pointer-events:none; transform-origin:top center;
  background:linear-gradient(177deg, rgba(255,200,58,.30), rgba(255,200,58,.07) 46%, transparent 78%);
  clip-path:polygon(40% 0, 60% 0, 128% 100%, -28% 100%);
  filter:blur(7px); animation:beamIn 1s cubic-bezier(.2,.8,.2,1) both;}
.endscreen.transition .es-beam{background:linear-gradient(177deg, rgba(80,110,255,.28), rgba(80,110,255,.06) 46%, transparent 78%);}

.es-kicker{display:flex; align-items:center; gap:14px; margin-bottom:clamp(10px,2vh,22px);
  font-family:var(--ui); font-weight:800; letter-spacing:.42em; text-transform:uppercase; font-size:11px;
  color:var(--muted); animation:fade .5s ease .05s both;}
.es-kicker .k-lead{color:var(--gold); letter-spacing:.5em;}
.es-kicker .k-rule{flex:1 1 auto; height:1px; background:linear-gradient(90deg,var(--line-2),transparent);}

/* champion / next-board hero */
.es-champ{position:relative; z-index:1; display:flex; align-items:center; gap:clamp(16px,3vw,42px);
  margin-bottom:clamp(18px,3.4vh,40px);}
.es-rank-big{font-family:var(--display); line-height:.72; flex:0 0 auto;
  font-size:clamp(96px,17vw,230px); color:var(--gold);
  text-shadow:0 0 60px rgba(255,200,58,.45), 0 6px 0 rgba(0,0,0,.4);
  animation:slamIn .55s cubic-bezier(.18,1.1,.3,1) .1s both;}
.endscreen.transition .es-rank-big{color:var(--tile-edge); text-shadow:0 0 60px rgba(80,110,255,.5), 0 6px 0 rgba(0,0,0,.4);}
.es-champ-body{min-width:0;}
.es-tag{font-family:var(--ui); font-weight:800; letter-spacing:.34em; text-transform:uppercase;
  font-size:clamp(11px,1.1vw,14px); color:var(--mint); margin-bottom:4px;
  animation:fade .5s ease .22s both;}
.endscreen.transition .es-tag{color:var(--tile-edge);}
.es-name{font-family:var(--display); text-transform:uppercase; line-height:.9; margin:0;
  font-size:clamp(44px,8.5vw,128px); letter-spacing:.005em; color:var(--gold-2);
  text-shadow:0 3px 0 rgba(0,0,0,.35); word-break:break-word;
  animation:slamIn .6s cubic-bezier(.18,1.05,.3,1) .18s both;}
.endscreen.transition .es-name{color:var(--ink);}
.es-name.tie{font-size:clamp(34px,5.6vw,84px);}
.es-name .tie-amp{color:var(--muted-2); font-size:.6em; padding:0 .12em;}
.es-submeta{display:flex; align-items:center; gap:12px; margin-top:8px;
  animation:fade .5s ease .34s both;}
.es-points{font-family:var(--display); font-size:clamp(20px,2.4vw,32px); color:var(--mint); letter-spacing:.03em;}
.es-cats{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; animation:fade .5s ease .34s both;}
.es-cat{font-family:var(--ui); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:11px;
  color:var(--muted); padding:5px 11px; border:1px solid var(--line-2); border-radius:var(--r-sm);}
.es-noteam{color:var(--muted); font-family:var(--ui); font-style:italic; font-size:15px; margin:8px 0 0;}

/* the ledger */
.es-ledger{position:relative; z-index:1; border-top:1px solid var(--line-2);
  padding-top:clamp(8px,1.4vh,16px);}
.es-ledger-lab{font-family:var(--ui); font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  font-size:10px; color:var(--muted-2); margin-bottom:6px;}
.es-line{display:flex; align-items:baseline; gap:14px; padding:clamp(7px,1.1vh,11px) 0;
  border-bottom:1px solid var(--line); animation:lineIn .5s cubic-bezier(.2,.85,.25,1) both;}
.es-line:last-child{border-bottom:none;}
.es-line-rank{font-family:var(--display); font-size:clamp(18px,1.9vw,26px); color:var(--muted);
  min-width:2.2ch; flex:0 0 auto;}
.es-line-chip{width:9px; height:9px; border-radius:2px; flex:0 0 auto; align-self:center;
  background:var(--team,var(--gold)); box-shadow:0 0 9px -1px var(--team,var(--gold));}
.es-line-name{font-family:var(--ui); font-weight:700; font-size:clamp(15px,1.6vw,19px); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto;}
.es-line-dots{flex:1 1 auto; min-width:18px; align-self:center; height:0;
  border-bottom:2px dotted var(--line-2); transform:translateY(-3px);}
.es-line-score{font-family:var(--display); font-size:clamp(20px,2.1vw,28px); letter-spacing:.02em;
  flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--gold);}
.es-line-score.pos{color:var(--mint);}
.es-line-score.neg{color:#ff7d93;}
.es-line-score.zero{color:var(--muted);}
.es-line.out{opacity:.55;}
.es-line.out .es-line-score{text-decoration:line-through;}
.es-out-tag{display:none; font-family:var(--ui); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-size:9px; color:#ff9db0; border:1px solid rgba(255,46,84,.3); border-radius:3px; padding:1px 5px; margin-left:8px;}
.es-line.out .es-out-tag{display:inline-block;}
/* host's between-board eliminate / bring-back control */
.es-elim{flex:0 0 auto; align-self:center; font-family:var(--ui); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; font-size:10px; color:#ff9db0; padding:6px 11px; border-radius:5px;
  border:1px solid rgba(255,46,84,.32); background:rgba(20,10,24,.5);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;}
.es-elim:hover{transform:translateY(-1px); background:rgba(255,46,84,.16); border-color:rgba(255,46,84,.6); color:#ffd0d8;}
.es-elim.back{color:var(--mint); border-color:rgba(31,224,138,.32);}
.es-elim.back:hover{background:rgba(31,224,138,.14); border-color:rgba(31,224,138,.6); color:#8ff5c4;}

.es-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:clamp(20px,3.4vh,40px);
  animation:fade .5s ease .42s both;}
.es-btn{font-family:var(--ui); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:13px;
  padding:13px 24px; border-radius:6px; border:1px solid var(--line-2); background:transparent; color:var(--ink);
  transition:transform .12s ease, background .16s ease, border-color .16s ease, box-shadow .18s ease;}
.es-btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.05);}
.es-btn.primary{background:var(--gold); color:#2a1c00; border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 14px 34px -16px var(--gold);}
.es-btn.primary:hover{filter:brightness(1.05); box-shadow:0 0 0 1px rgba(255,255,255,.3), 0 16px 40px -14px var(--gold);}
.endscreen.transition .es-btn.primary{background:var(--tile-edge); color:#fff; border-color:var(--tile-edge);
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 14px 34px -16px var(--tile-glow);}
.es-note{font-family:var(--ui); font-size:11.5px; letter-spacing:.04em; color:var(--muted-2); margin-left:4px;}
.es-actions .kbd{margin-left:auto;}

/* ---------------- keyframes ---------------- */
@keyframes livepulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes livewash{0%,100%{opacity:.7;}50%{opacity:1;}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes overlayIn{from{opacity:0; transform:scale(.97);}to{opacity:1; transform:scale(1);}}
@keyframes modalIn{from{opacity:0; transform:translateY(16px) scale(.98);}to{opacity:1; transform:none;}}
@keyframes slamIn{from{opacity:0; transform:translateY(-22px) scale(.94);}to{opacity:1; transform:none;}}
@keyframes clueIn{from{opacity:0; transform:translateY(16px); filter:blur(8px);}to{opacity:1; transform:none; filter:blur(0);}}
@keyframes headReveal{
  0%  {opacity:0; transform:translateY(32vh) scale(.55);}
  16% {opacity:1; transform:translateY(32vh) scale(1.16);}
  56% {opacity:1; transform:translateY(32vh) scale(1.16);}
  82% {opacity:1; transform:translateY(0) scale(1);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes valGlow{
  0%  {filter:drop-shadow(0 8px 26px rgba(255,200,58,.28));}
  30% {filter:drop-shadow(0 0 60px rgba(255,200,58,.85));}
  60% {filter:drop-shadow(0 0 60px rgba(255,200,58,.85));}
  100%{filter:drop-shadow(0 8px 26px rgba(255,200,58,.28));}
}
@keyframes answerIn{0%{opacity:0; transform:translateY(18px) scale(.96); filter:blur(10px);}
  60%{filter:blur(0);} 100%{opacity:1; transform:none; filter:blur(0);}}
@keyframes sweep{from{left:-60%;}to{left:120%;}}
@keyframes popIn{from{opacity:0; transform:translateY(14px) scale(.96);}to{opacity:1; transform:none;}}
@keyframes tileIn{from{opacity:0; transform:translateY(14px) scale(.92);}to{opacity:1; transform:none;}}
@keyframes scorepop{0%{transform:scale(1);}40%{transform:scale(1.22); color:var(--mint);}100%{transform:scale(1);}}
@keyframes scorepopDown{0%{transform:scale(1);}40%{transform:scale(1.22); color:var(--crimson);}100%{transform:scale(1);}}
@keyframes ripple{from{transform:scale(1); opacity:.9;}to{transform:scale(1.7); opacity:0;}}
@keyframes beamIn{from{opacity:0; transform:translateY(-24px) scaleY(.8);}to{opacity:1; transform:none;}}
@keyframes lineIn{from{opacity:0; transform:translateX(-18px);}to{opacity:1; transform:none;}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;}
}

/* thin scrollbars */
*::-webkit-scrollbar{height:10px; width:10px;}
*::-webkit-scrollbar-thumb{background:rgba(150,140,210,.25); border-radius:10px;}
*::-webkit-scrollbar-track{background:transparent;}

/* ---------------- LANDING (broadcast title card) ----------------
   Left-anchored hero: a dominant Host action, a quiet Join link, and a
   board fragment glowing in from the right so the stage is never empty.
   No centred hero, no two equal cards. */
.landing{position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; align-items:center; padding:0 clamp(28px,7vw,120px);}

/* the stage: a partial board bleeding off the right edge, dimmed and masked
   so the title always reads clear on top of it */
.landing-stage{position:absolute; top:50%; right:-3vw; transform:translateY(-50%);
  z-index:0; pointer-events:none; opacity:.55;
  -webkit-mask-image:radial-gradient(125% 120% at 82% 50%, #000 26%, transparent 70%);
          mask-image:radial-gradient(125% 120% at 82% 50%, #000 26%, transparent 70%);
  animation:fade .9s ease both;}
.lz-board{display:flex; gap:clamp(7px,.7vw,12px);}
.lz-col{display:flex; flex-direction:column; gap:clamp(7px,.7vw,12px); width:clamp(94px,8.5vw,150px);}
.lz-cat{height:clamp(24px,3vh,38px); border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,#11183f,#0a1130);
  border:1px solid var(--line-2); border-bottom:2px solid var(--gold-deep);}
.lz-tile{height:clamp(52px,7.6vh,90px); display:flex; align-items:center; justify-content:center;
  border-radius:5px; font-family:var(--display); color:var(--gold);
  font-size:clamp(20px,2.3vw,34px); letter-spacing:.02em;
  background:linear-gradient(180deg, var(--tile-1), var(--tile-2));
  border:1px solid rgba(120,150,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px -16px #000;}

.landing-inner{position:relative; z-index:2; max-width:min(640px,62vw);}
.landing-kicker{display:flex; align-items:center; gap:14px; margin-bottom:clamp(14px,2.4vh,22px);}
.landing-kicker .k-rule{flex:0 0 auto; width:34px; height:2px; background:var(--gold);}
.landing-kicker .eyebrow{color:var(--gold-2);}
.landing-title{font-family:var(--display); text-transform:uppercase; margin:0;
  font-size:clamp(54px,9vw,150px); line-height:.84; letter-spacing:.005em;
  color:var(--gold-2); text-shadow:0 3px 0 rgba(0,0,0,.35);}
.landing-desc{font-family:var(--serif); color:var(--ink); opacity:.84; line-height:1.4;
  font-size:clamp(16px,1.5vw,21px); max-width:32ch;
  margin:clamp(14px,2.4vh,22px) 0 clamp(26px,4vh,40px);}
.landing-actions{display:flex; flex-direction:column; align-items:flex-start; gap:15px;}
.host-cta{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ui); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(15px,1.3vw,18px); color:#2a1c00; padding:16px 30px; border-radius:var(--r-sm);
  background:linear-gradient(180deg, var(--gold-2), var(--gold)); border:1px solid rgba(255,255,255,.5);
  box-shadow:0 12px 26px -16px var(--gold-deep);
  transition:transform .12s ease, filter .14s ease, box-shadow .16s ease;
}
.host-cta:hover{transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 16px 30px -16px var(--gold-deep);}
.host-cta:active{transform:translateY(0);}
.join-link{
  font-family:var(--ui); font-weight:700; font-size:14px; letter-spacing:.02em;
  color:var(--muted); background:none; border:none; border-radius:0;
  padding:3px 1px; border-bottom:1px solid var(--line-2);
  transition:color .15s ease, border-color .15s ease;
}
.join-link:hover{color:var(--ink); border-bottom-color:var(--gold);}
.join-link b{color:var(--gold-2); font-weight:800;}

@media (max-width:880px){
  .landing{padding:0 clamp(24px,7vw,48px);}
  .landing-stage{display:none;}
  .landing-inner{max-width:none;}
}

/* ---------------- LOBBY ---------------- */
.lobby{
  flex:1 1 auto; min-height:0; overflow:auto; display:grid; gap:clamp(18px,3vw,44px);
  grid-template-columns:minmax(280px, 420px) 1fr; align-items:start;
  padding:clamp(18px,3vw,40px) clamp(20px,4vw,56px);
}
.lobby-join{
  display:flex; flex-direction:column; gap:10px; padding:clamp(18px,2.4vw,28px);
  border-radius:var(--r-lg); background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line-2); box-shadow:var(--shadow-1);
}
.lobby-join .eyebrow{color:var(--muted-2);}
.lobby-url{font-family:var(--ui); font-weight:700; font-size:clamp(15px,1.6vw,20px);
  color:var(--ink); letter-spacing:.01em; word-break:break-all;}
.lobby-code-lab{margin-top:8px;}
.lobby-code{
  font-family:var(--display); font-size:clamp(56px,8vw,104px); line-height:.95; letter-spacing:.14em;
  background:linear-gradient(180deg,#fff 0%, var(--gold-2) 55%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lobby-qr{margin-top:10px; align-self:flex-start; padding:10px; line-height:0;
  border-radius:12px; background:#0c0922; border:1px solid var(--line-2);}
.lobby-qr canvas{display:block; border-radius:6px;}
.qr-missing{font-family:var(--ui); font-size:12px; color:var(--muted); word-break:break-all; max-width:208px; line-height:1.4;}
.lobby-status{font-family:var(--ui); font-size:13px; color:var(--muted); margin-top:6px;}
.lobby-status.ok{color:var(--mint);}
.lobby-status.err{color:#ff9db0;}
.lobby-roster{min-width:0;}
.lobby-roster > .eyebrow{display:block; color:var(--muted-2); margin-bottom:12px;}
.lobby-teams{display:flex; flex-wrap:wrap; gap:10px;}
.lobby-team{
  display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:rgba(10,8,26,.5);
  border-left:3px solid var(--team,var(--gold));
}
.lobby-team .lt-name{font-family:var(--ui); font-weight:700; font-size:15px; color:var(--ink);
  max-width:18ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lobby-team.offline{opacity:.45;}
.lobby-team .lt-tag{font-family:var(--ui); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);}
.lobby-empty{font-family:var(--ui); font-style:italic; color:var(--muted-2); font-size:14px;}
.lobby-hint{font-family:var(--ui); font-size:12.5px; color:var(--muted-2); margin-top:16px; letter-spacing:.01em;}
@media (max-width:720px){ .lobby{grid-template-columns:1fr;} }

/* the buzzed-team label on overlay stage 2 (a phone won the buzz) */
.buzzed .buzzed-sub{font-family:var(--ui); font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  font-size:11px; color:var(--muted); margin-top:-2px;}
.buzzed .ring.team{border-color:color-mix(in srgb, var(--team,var(--crimson)) 55%, transparent);
  box-shadow:0 0 30px color-mix(in srgb, var(--team,var(--crimson)) 40%, transparent);}
.buzzed .ring.team::after{border-color:var(--team,var(--crimson));}
.buzzed .ring.team::before{background:var(--team,var(--crimson)); box-shadow:0 0 18px var(--team,var(--crimson));}
.wrongbtn.is-buzzed{border-color:color-mix(in srgb, var(--crimson) 60%, transparent); background:rgba(255,46,84,.16);}

/* a disconnected team in the scoreboard during a phone session */
.pcard.offline{opacity:.5;}
.pcard.offline .accent{filter:grayscale(.6);}
.pcard.eliminated{opacity:.6;}
.pcard.eliminated .pscore{text-decoration:line-through; color:var(--muted);}
.pcard .pout{position:absolute; top:6px; left:10px; font-family:var(--ui); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; font-size:9px; color:#ff9db0;}

/* ============================================================
   ESTIMATION DUEL  (advanced board type, see js/duel.js)
   ============================================================ */
.duel{position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  padding:clamp(16px,3vh,40px) clamp(20px,5vw,72px) 0;}
/* a soft spotlight falling from above, the same stage light as the clue overlay */
.duel::before{content:""; position:absolute; top:-8%; left:50%; transform:translateX(-50%); z-index:0;
  width:min(1100px,96%); height:108%; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,240,210,.17) 0%, rgba(255,221,150,.075) 33%,
    rgba(255,205,110,.02) 60%, transparent 78%);
  clip-path:polygon(41% 0%, 59% 0%, 97% 100%, 3% 100%); filter:blur(28px);}
.duel-inner{position:relative; z-index:1; flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(14px,2.6vh,32px); text-align:center; width:100%;}
.duel-round:not(.primed) .duel-inner, .duel-input .duel-inner{justify-content:flex-start;}
.duel-reveal .duel-inner{justify-content:space-between;}
.duel-controls{position:relative; z-index:1; flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:14px;
  padding:clamp(14px,2.4vh,26px) 0;}
.navbtn[disabled]{opacity:.4; pointer-events:none;}

/* shared broadcast type for the duel screens */
.duel-eyebrow{font-family:var(--ui); font-weight:800; letter-spacing:.34em; text-transform:uppercase;
  font-size:clamp(11px,1.1vw,13px); color:var(--gold-2); opacity:.85;}
.duel-bigtitle{margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.01em;
  line-height:.92; font-size:clamp(46px,8.5vw,124px); color:var(--gold-2); text-shadow:0 3px 0 rgba(0,0,0,.4);}
.duel-lead{margin:0; font-family:var(--ui); color:var(--muted); font-size:clamp(15px,1.7vw,21px); max-width:46ch; line-height:1.45;}
.duel-hero{display:flex; flex-direction:column; align-items:center; gap:clamp(12px,2vh,22px); margin:auto 0;}
.duel-hero.tight{margin:0 0 clamp(8px,2vh,18px);}

/* setup: big selectable player cards */
.duel-pickwrap{display:flex; flex-direction:column; align-items:center; gap:clamp(12px,2vh,20px); width:100%;}
.duel-picklabel{font-family:var(--ui); font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:13px; color:var(--muted);}
.duel-picks{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(10px,1.4vw,16px); max-width:1000px;}
.duel-pick{position:relative; display:flex; align-items:center; gap:12px; font-family:var(--ui); font-weight:800;
  font-size:clamp(17px,1.7vw,22px); color:var(--ink); padding:clamp(15px,1.9vh,22px) clamp(20px,2.2vw,30px);
  min-width:clamp(210px,19vw,280px); border-radius:var(--r-md); border:1px solid var(--line-2);
  background:rgba(10,8,26,.5); border-left:5px solid var(--team,var(--gold));
  transition:transform .12s ease, border-color .15s ease, box-shadow .15s ease;}
.duel-pick:hover{transform:translateY(-3px); border-color:var(--team,var(--gold)); box-shadow:0 14px 30px -20px var(--team,var(--gold));}
.duel-pick.sel{box-shadow:0 0 0 2px var(--team,var(--gold)) inset, 0 0 30px -10px var(--team,var(--gold));}
.dp-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dp-tag{flex:0 0 auto; font-family:var(--display); font-weight:800; font-size:13px; color:#2a1c00;
  background:var(--team,var(--gold)); border-radius:3px; padding:2px 8px; letter-spacing:.04em;}
.dp-score{flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:800; font-size:clamp(16px,1.6vw,22px); color:var(--gold-2);
  font-variant-numeric:tabular-nums;}
.dp-last{font-family:var(--ui); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:9px;
  color:#ff9db0; border:1px solid rgba(255,46,84,.32); border-radius:3px; padding:1px 5px;}
.duel-pick.last{border-left-color:#ff6b81;}

/* setup: the VS matchup hero */
.duel-vshero{display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.4vh,26px); margin:auto 0;}
.duel-vsrow{display:flex; align-items:center; justify-content:center; gap:clamp(18px,3vw,46px); width:100%; flex-wrap:wrap;}
.duel-vscard{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:clamp(18px,2.6vh,34px) clamp(26px,3vw,52px); border-radius:var(--r-lg);
  border:1px solid var(--line-2); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
  border-top:4px solid var(--team); min-width:clamp(180px,22vw,300px);}
.duel-vscard.now{box-shadow:0 0 0 2px var(--team) inset, 0 18px 48px -26px var(--team);}
.dvc-tag{font-family:var(--ui); font-weight:800; letter-spacing:.2em; font-size:12px; color:var(--muted-2);}
.dvc-name{font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.95;
  font-size:clamp(28px,3.6vw,56px); color:var(--team);}
.duel-vsx{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(20px,2.4vw,34px); color:var(--muted-2);}
.duel-meta{font-family:var(--ui); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:13px; color:var(--muted-2);}
.duel-ready{font-family:var(--ui); font-weight:700; font-size:15px; color:var(--muted); cursor:pointer;
  border-bottom:1px dashed transparent; padding-bottom:2px;}
.duel-ready:hover{border-bottom-color:var(--line-2);}
.duel-ready.on{color:var(--mint);}

/* the big countdown: a clean gradient numeral with a soft circular glow (no boxy halo) */
.duel-count{position:relative; z-index:0; font-family:var(--display); font-weight:800; line-height:.86; letter-spacing:.01em;
  font-size:clamp(120px,26vh,300px); padding-top:.04em;
  background:linear-gradient(180deg,#fff 0%, var(--gold-2) 42%, var(--gold) 78%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.duel-count::before{content:""; position:absolute; z-index:-1; left:50%; top:52%; width:1.1em; height:1.1em;
  transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,200,58,.22), transparent 66%); filter:blur(10px);}
.duel-count.frozen{opacity:.92;}
.duel-round:not(.primed) .duel-count{animation:duelTick 1s ease-in-out infinite;}

/* round: primed (frozen) screen */
.duel-prime{display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.8vh,20px); margin:auto 0;}
.duel-primesub{font-family:var(--ui); font-size:clamp(15px,1.7vw,21px); color:var(--muted); max-width:44ch; line-height:1.4;}

/* round: live header + question timeline */
.duel-roundhead{display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto;}
.duel-roundhead .duel-count{font-size:clamp(86px,17vh,200px);}
.duel-roundwho{display:flex; align-items:baseline; gap:14px; font-family:var(--ui); font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; font-size:clamp(13px,1.4vw,18px);}
.drw-q{color:var(--muted-2);}
.drw-name{font-family:var(--display);}
.duel-board{position:relative; flex:1 1 auto; min-height:0; width:min(1040px,94vw); margin:8px auto 0;
  display:flex; flex-direction:column; gap:clamp(8px,1.6vh,18px); padding:8px 0 18px;}
.duel-board::before{content:""; position:absolute; top:6px; bottom:14px; left:50%; width:3px;
  transform:translateX(-50%); background:var(--line-2); border-radius:3px;}
.dp-fill{position:absolute; top:6px; left:50%; width:3px; transform:translateX(-50%);
  height:calc(var(--p,0) * (100% - 20px)); background:linear-gradient(180deg,var(--gold-2),var(--gold));
  border-radius:3px; box-shadow:0 0 12px var(--gold); transition:height .3s ease;}
.dquestion{position:relative; z-index:1; width:47%; padding:clamp(11px,1.5vh,18px) clamp(16px,1.6vw,22px); border-radius:var(--r-md);
  border:1px solid var(--line-2); background:linear-gradient(180deg, rgba(40,55,210,.18), rgba(11,21,102,.22));
  display:flex; align-items:center; gap:12px;}
.dquestion.left{align-self:flex-start; flex-direction:row-reverse; text-align:right;}
.dquestion.right{align-self:flex-end;}
.dquestion.hidden{opacity:.4; border-style:dashed; background:rgba(20,16,48,.5);}
.dquestion.answered{opacity:.5;}
.dquestion.active{border-color:var(--gold); box-shadow:0 0 30px -8px var(--gold); transform:scale(1.02);}
.dquestion .dq-num{flex:0 0 auto; font-family:var(--display); font-weight:800; font-size:19px; color:var(--gold);
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line-2); background:rgba(0,0,0,.25);}
.dquestion .dq-text{font-family:var(--serif); font-size:clamp(16px,1.9vw,26px); line-height:1.25; color:var(--ink);}
.dq-lock{display:inline-block; width:40px; height:9px; border-radius:9px; background:var(--line-2);}

/* host answer entry */
.duel-inputhead{display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:clamp(8px,2vh,18px);}
.duel-inputtitle{margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.95;
  font-size:clamp(34px,5vw,64px);}
.dinput-list{display:flex; flex-direction:column; gap:8px; width:min(760px,94vw); margin:0 auto;}
.dinput{display:flex; align-items:center; gap:12px; padding:9px 14px; border-radius:var(--r-md);
  border:1px solid var(--line-2); background:rgba(10,8,26,.4); text-align:left;}
.dinput .di-n{flex:0 0 auto; font-family:var(--display); font-weight:800; color:var(--gold); width:24px;}
.dinput .di-q{flex:1 1 auto; font-family:var(--serif); font-size:16px; color:var(--ink); min-width:0;}
.dinput .di-a{flex:0 0 120px; text-align:center; font-family:var(--display); font-weight:800; font-size:24px;
  color:var(--gold); background:rgba(0,0,0,.3); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:6px 8px; outline:none;}
.dinput .di-a:focus{border-color:var(--gold);}

/* ---- reveal: closeness tracks ---- */
.duel-scoreline{display:flex; align-items:center; justify-content:center; gap:clamp(16px,4vw,56px); flex:0 0 auto;
  font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(20px,2.6vw,36px);}
.duel-scoreline .ds b{color:var(--gold); font-size:1.5em; padding:0 .18em;}
.duel-scoreline .ds-vs{font-family:var(--ui); font-weight:800; letter-spacing:.2em; font-size:12px; color:var(--muted-2);}

.dr-intro{display:flex; flex-direction:column; align-items:center; gap:clamp(12px,2vh,22px); margin:auto 0;}

.dr-focus{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px,2.2vh,28px); width:100%;}
.dr-qline{display:flex; align-items:baseline; gap:14px; max-width:60ch; animation:fade .45s ease both;}
.dr-qn{font-family:var(--display); font-weight:800; color:var(--gold); font-size:clamp(18px,2vw,26px);}
.dr-qtext{font-family:var(--serif); color:var(--ink); font-size:clamp(20px,2.6vw,36px); line-height:1.2;}

/* The reveal plays one slow beat at a time (~5s): the question, then each
   player's guess as a pin, then the answer line drops and the closeness bars
   grow, then the verdict. Delays below encode that order. */
.dr-track{position:relative; flex:1 1 auto; min-height:200px; max-height:clamp(230px,34vh,360px);
  width:min(1180px,92vw); margin:0 auto;}
.dr-rail{position:absolute; left:0; right:0; top:50%; height:2px; transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);}

/* the real answer: a vertical line on the scale (no number on it, so a pin that
   lands exactly on it never collides with the value), plus a headline below */
.dr-line{position:absolute; top:8%; bottom:8%; width:3px; transform:translateX(-50%); border-radius:3px; z-index:3;
  background:linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow:0 0 14px var(--gold);
  animation:drLineIn .55s cubic-bezier(.2,.9,.3,1.2) 4s both;}
.dr-answer{display:flex; flex-direction:column; align-items:center; gap:2px; opacity:0;
  animation:drAnswerIn .55s cubic-bezier(.2,.9,.3,1.2) 4s both;}
.dr-answer-k{font-family:var(--ui); font-weight:800; letter-spacing:.32em; text-transform:uppercase; font-size:11px; color:var(--muted-2);}
.dr-answer-v{font-family:var(--display); font-weight:800; line-height:.9; font-size:clamp(34px,4.8vw,66px);
  color:var(--gold-2); text-shadow:0 0 26px rgba(255,200,58,.42);}

.dr-bar{position:absolute; top:calc(50% - 3px); height:6px; border-radius:4px; z-index:2;
  background:var(--team); opacity:.45; transform-origin:left center;
  animation:drBarGrow .7s cubic-bezier(.3,.9,.3,1) 4.6s both;}
.dr-bar.gl{transform-origin:right center;}
.dr-bar.win{opacity:.95; box-shadow:0 0 16px -2px var(--team);}

.dr-pin{position:absolute; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:1px; z-index:5;}
.dr-pin.top{bottom:calc(50% + 30px); animation:drPinIn .5s cubic-bezier(.2,1.4,.4,1) 1.7s both;}
.dr-pin.bot{top:calc(50% + 30px); animation:drPinIn .5s cubic-bezier(.2,1.4,.4,1) 2.7s both;}
.dr-pin::before{content:""; position:absolute; left:50%; transform:translateX(-50%); width:2px; height:30px; background:var(--team); opacity:.7;}
.dr-pin.top::before{top:100%;}
.dr-pin.bot::before{bottom:100%;}
.dr-pin::after{content:""; position:absolute; left:50%; width:16px; height:16px; border-radius:50%;
  background:var(--team); border:3px solid #0a0820; box-shadow:0 0 14px -2px var(--team);}
.dr-pin.top::after{top:calc(100% + 30px); transform:translate(-50%,-50%);}
.dr-pin.bot::after{bottom:calc(100% + 30px); transform:translate(-50%,50%);}
.dr-pin.dnf{opacity:.55;}
.dr-pin.dnf::before, .dr-pin.dnf::after{display:none;}
.dr-pin-name{font-family:var(--ui); font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:clamp(13px,1.3vw,17px); color:var(--team);}
.dr-pin-v{font-family:var(--display); font-weight:800; line-height:.95; font-size:clamp(24px,3vw,42px); color:#fff;}
/* the distance ("off by N" / "exact") gives the result away, so it stays hidden
   until the answer is on screen, appearing with the closeness bars */
.dr-pin-d{font-family:var(--ui); font-weight:700; letter-spacing:.04em; font-size:clamp(11px,1.1vw,13px); color:var(--muted-2);
  opacity:0; animation:fade .45s ease 4.6s both;}
.dr-pin-d.exact{color:var(--mint);}
/* the winner's emphasis holds back until the verdict, so the pin colour does not spoil it */
.dr-pin.win .dr-pin-v{animation:drWinV .4s ease 5.4s both;}
.dr-pin.win::after{animation:drWinKnob .4s ease 5.4s both;}

.dr-banner{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(22px,2.8vw,40px); animation:drBannerIn .5s ease 5.4s both;}
.dr-banner.win{color:var(--team);}
.dr-banner.tie{color:var(--gold-2);}
.dr-banner.none{color:var(--muted-2);}

.dr-progress{display:flex; align-items:center; justify-content:center; gap:clamp(8px,1vw,14px); flex:0 0 auto;}
.dr-dot{width:14px; height:14px; border-radius:50%; background:var(--line-2);}
.dr-dot.pending{opacity:.35;}
.dr-dot.p0, .dr-dot.p1, .dr-dot.tie{background:var(--c,var(--gold)); box-shadow:0 0 12px -1px var(--c,var(--gold));}
.dr-dot.none{background:var(--muted-2);}
/* the current question's dot stays neutral until the verdict, then pops to its colour */
.dr-dot.cur{background:var(--line-2); box-shadow:none; animation:drDotReveal .45s ease 5.4s forwards;}

/* present-mode host menu (kept off the broadcast view until opened) */
.hostmenu{position:relative;}
.hostmenu > summary{list-style:none; cursor:pointer; width:34px; height:30px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; gap:3px;
  transition:background .15s ease, border-color .15s ease;}
.hostmenu > summary::-webkit-details-marker{display:none;}
.hostmenu > summary::marker{content:"";}
.hostmenu > summary:hover, .hostmenu[open] > summary{background:rgba(255,255,255,.09); border-color:var(--line);}
.navdots i{width:4px; height:4px; border-radius:50%; background:var(--muted);}
.hostmenu[open] .navdots i{background:var(--ink);}
.hostmenu-pop{position:absolute; z-index:30; top:calc(100% + 8px); right:0; min-width:190px; display:none;
  flex-direction:column; gap:2px; padding:6px; border-radius:var(--r-md);
  background:linear-gradient(180deg,#181233,#110d28); border:1px solid var(--line-2); box-shadow:var(--shadow-1);}
.hostmenu[open] > .hostmenu-pop{display:flex;}
.hostmenu-pop button{text-align:left; font-family:var(--ui); font-weight:700; font-size:13px; color:var(--ink);
  padding:10px 12px; border-radius:var(--r-sm); background:transparent; border:none; cursor:pointer;}
.hostmenu-pop button:hover{background:rgba(255,255,255,.06);}
.hostmenu-pop .hm-div{height:1px; margin:4px 2px; background:var(--line);}
.hostmenu-pop .hm-danger{color:#ff9db0;}
.hostmenu-pop .hm-danger:hover{background:rgba(255,46,84,.14);}

/* eliminate / revive panel (a compact modal listing every team) */
.editor.tp{width:min(560px,94vw);}
.editor.tp .ed-head{padding-bottom:8px;}
.tp-list{display:flex; flex-direction:column; gap:8px; padding:8px 22px 6px; max-height:min(60vh,520px); overflow:auto;}
.tp-row{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-md);
  border:1px solid var(--line-2); background:rgba(10,8,26,.4); border-left:4px solid var(--team,var(--gold));}
.tp-row.out{opacity:.6;}
.tp-chip{flex:0 0 auto; width:10px; height:10px; border-radius:2px; background:var(--team,var(--gold)); box-shadow:0 0 9px -1px var(--team,var(--gold));}
.tp-name{flex:1 1 auto; min-width:0; font-family:var(--ui); font-weight:800; font-size:15px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tp-tag{display:none; font-family:var(--ui); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-size:9px; color:#ff9db0; border:1px solid rgba(255,46,84,.3); border-radius:3px; padding:1px 5px; margin-left:8px;}
.tp-row.out .tp-tag{display:inline-block;}
.tp-score{flex:0 0 auto; font-family:var(--display); font-weight:800; font-size:20px; color:var(--gold-2); font-variant-numeric:tabular-nums;}
.tp-row.out .tp-score{text-decoration:line-through; color:var(--muted);}
.tp-btn{flex:0 0 auto; font-family:var(--ui); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:10px;
  color:#ff9db0; padding:7px 12px; border-radius:5px; border:1px solid rgba(255,46,84,.32); background:rgba(20,10,24,.5);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;}
.tp-btn:hover{transform:translateY(-1px); background:rgba(255,46,84,.16); border-color:rgba(255,46,84,.6); color:#ffd0d8;}
.tp-btn.back{color:var(--mint); border-color:rgba(31,224,138,.32);}
.tp-btn.back:hover{background:rgba(31,224,138,.14); border-color:rgba(31,224,138,.6); color:#8ff5c4;}
.tp-hint{font-family:var(--ui); font-size:11.5px; letter-spacing:.04em; color:var(--muted-2);}
.tp-empty{font-family:var(--ui); color:var(--muted-2); font-size:14px; padding:18px; text-align:center;}

/* duel keyframes */
@keyframes duelTick{0%,100%{transform:scale(1);}50%{transform:scale(1.03);}}
@keyframes drLineIn{from{opacity:0; transform:translateX(-50%) scaleY(0);}to{opacity:1; transform:translateX(-50%) scaleY(1);}}
@keyframes drAnswerIn{from{opacity:0; transform:translateY(12px) scale(.9);}to{opacity:1; transform:translateY(0) scale(1);}}
@keyframes drBarGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes drPinIn{from{opacity:0; transform:translateX(-50%) translateY(12px);}to{opacity:1; transform:translateX(-50%) translateY(0);}}
@keyframes drBannerIn{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:translateY(0);}}
@keyframes drWinV{from{color:#fff; text-shadow:none;}to{color:var(--team); text-shadow:0 0 20px -2px var(--team);}}
@keyframes drWinKnob{from{width:16px; height:16px; box-shadow:0 0 14px -2px var(--team);}to{width:20px; height:20px; box-shadow:0 0 22px var(--team);}}
@keyframes drDotReveal{to{background:var(--c); box-shadow:0 0 12px -1px var(--c);}}
@keyframes duelWinPop{0%{opacity:0; transform:scale(.82);}60%{transform:scale(1.04);}100%{opacity:1; transform:scale(1);}}

/* result: the surviving player large, the eliminated one beneath, and a row of
   per-question dots so you can read who took which question */
.duel-result{display:flex; flex-direction:column; align-items:center; gap:clamp(12px,2.4vh,28px); margin:auto 0;}
.duel-result.decided{width:100%;}
.dres-winner{display:flex; flex-direction:column; align-items:center; gap:8px; animation:fade .5s ease both;}
.dres-crown{font-family:var(--ui); font-weight:800; letter-spacing:.34em; text-transform:uppercase; font-size:13px; color:var(--mint);}
.dres-wname{margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.88;
  font-size:clamp(48px,9vw,120px); color:var(--team); text-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 54px -10px var(--team);
  animation:duelWinPop .6s cubic-bezier(.2,1.4,.4,1) .12s both;}
.dres-wscore{font-family:var(--ui); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:clamp(13px,1.4vw,17px); color:var(--muted);}
.dres-wscore b{font-family:var(--display); color:var(--team); font-size:1.5em; margin-right:.12em;}
.dres-loser{display:inline-flex; align-items:center; gap:10px; opacity:.72; animation:fade .5s ease .2s both;}
.dres-x{font-family:var(--ui); font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:11px;
  color:#ff9db0; border:1px solid rgba(255,46,84,.35); border-radius:3px; padding:2px 8px;}
.dres-ldot{width:9px; height:9px; border-radius:2px; background:var(--team); box-shadow:0 0 9px -1px var(--team);}
.dres-lname{font-family:var(--ui); font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:clamp(15px,1.6vw,20px); color:var(--muted);}
.dres-lscore{font-family:var(--display); font-weight:800; font-size:clamp(18px,2vw,26px); color:var(--muted);}
.dres-grid{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:clamp(10px,1.8vw,24px);
  margin-top:clamp(4px,1.4vh,14px); animation:fade .5s ease .3s both;}
.dres-q{display:flex; flex-direction:column; align-items:center; gap:6px;}
.dres-qdot{width:clamp(16px,1.8vw,24px); height:clamp(16px,1.8vw,24px); border-radius:50%;
  background:var(--c,var(--line-2)); box-shadow:0 0 12px -2px var(--c,transparent);}
.dres-qdot.none{background:var(--muted-2); box-shadow:none;}
.dres-qn{font-family:var(--ui); font-weight:800; letter-spacing:.1em; font-size:10px; color:var(--muted-2);}

/* ---- board opening (classic): the category walk before the grid ---- */
.bintro-open{display:flex; flex-direction:column; align-items:center; gap:clamp(10px,2vh,22px); margin:auto 0;}
.bintro-catlabel{font-family:var(--ui); font-weight:800; letter-spacing:.3em; text-transform:uppercase;
  font-size:12px; color:var(--muted-2); margin-top:clamp(6px,1.6vh,16px);}
.bintro-cats{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(8px,1.2vw,16px); max-width:1040px;}
/* numbered mystery cards: a teaser of how many categories, names stay hidden */
.bintro-chip{display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-md);
  width:clamp(72px,8vw,108px); height:clamp(72px,8vw,108px); border:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(40,55,210,.16), rgba(11,21,102,.22));}
.bintro-chip.locked{border-style:dashed;}
.bintro-chip .bic-n{font-family:var(--display); font-weight:800; font-size:clamp(26px,3vw,46px); color:var(--muted);}
.bintro-cat{display:flex; flex-direction:column; align-items:center; gap:clamp(12px,2.6vh,30px); margin:auto 0;
  animation:fade .5s ease both;}
.bintro-name{margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.88;
  font-size:clamp(52px,10.5vw,164px); color:var(--gold-2); text-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 60px -12px var(--gold);
  animation:duelWinPop .55s cubic-bezier(.2,1.4,.4,1) both;}
.bintro-desc{margin:0; font-family:var(--serif); color:var(--ink); font-size:clamp(20px,2.8vw,40px); line-height:1.3;
  max-width:26ch; animation:fade .5s ease .25s both;}

/* duel editor */
.duel-edit{display:flex; flex-direction:column; gap:14px; max-width:780px;}
.de-head{display:flex; gap:16px; flex-wrap:wrap;}
.de-field{display:flex; flex-direction:column; gap:6px; flex:1 1 auto;}
.de-field.narrow{flex:0 0 130px;}
.de-field .flab{font-family:var(--ui); font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:10.5px; color:var(--muted);}
.de-name, .de-timer{font-family:var(--display); font-weight:800; color:var(--gold-2); font-size:22px;
  background:rgba(0,0,0,.3); border:1px solid var(--line-2); border-radius:var(--r-md); padding:8px 12px; outline:none;}
.de-name:focus, .de-timer:focus{border-color:var(--gold);}
.dq-list{display:flex; flex-direction:column; gap:8px;}
.dq{display:flex; align-items:center; gap:10px;}
.dq .dq-n{flex:0 0 auto; font-family:var(--display); font-weight:800; color:var(--gold); width:22px; text-align:center;}
.dq .dq-q{flex:1 1 auto; min-width:0; font-family:var(--serif); font-size:15px; color:var(--ink);
  background:rgba(0,0,0,.3); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:9px 12px; outline:none;}
.dq .dq-a{flex:0 0 120px; font-family:var(--display); font-weight:800; font-size:18px; color:var(--gold); text-align:center;
  background:rgba(255,200,58,.06); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:9px 10px; outline:none;}
.dq .dq-q:focus, .dq .dq-a:focus{border-color:var(--gold);}
.dq .dq-x{flex:0 0 auto; width:30px; height:30px; border-radius:var(--r-sm); color:#ffc2cd;
  border:1px solid rgba(255,46,84,.3); background:rgba(20,10,24,.6);}
.dq .dq-x:hover{background:rgba(255,46,84,.18); border-color:rgba(255,46,84,.6);}

/* board tabs: type tag + the add-board menu (a <details> so it toggles on click) */
.btab-type{font-family:var(--ui); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:8.5px;
  color:var(--gold-2); border:1px solid var(--line-2); border-radius:3px; padding:1px 4px; margin-left:6px; vertical-align:middle;}
.btab.active .btab-type{color:#2a1c00; border-color:rgba(42,28,0,.3);}
.btab-addwrap{position:relative; display:inline-flex;}
.btab-addwrap > summary{list-style:none; cursor:pointer;}
.btab-addwrap > summary::-webkit-details-marker{display:none;}
.btab-addwrap > summary::marker{content:"";}
.btab-menu{position:absolute; z-index:20; top:calc(100% + 6px); left:0; min-width:170px; display:none;
  flex-direction:column; gap:2px; padding:6px; border-radius:var(--r-md);
  background:linear-gradient(180deg,#181233,#110d28); border:1px solid var(--line-2); box-shadow:var(--shadow-1);}
.btab-addwrap[open] > .btab-menu{display:flex;}
.btab-menu button{text-align:left; font-family:var(--ui); font-weight:700; font-size:13px; color:var(--ink);
  padding:9px 11px; border-radius:var(--r-sm); background:transparent; border:none; cursor:pointer;}
.btab-menu button:hover{background:rgba(255,255,255,.06);}