/* ============================================================
   NJ DECA JEOPARDY
   Aesthetic: championship broadcast — midnight navy arena,
   gold foil, diamond lattice, chiseled condensed type.
   ============================================================ */

:root{
  /* ink + field */
  --ink:        #03060f;
  --navy-950:   #050a18;
  --navy-900:   #071026;
  --navy-850:   #0a1732;
  --navy-800:   #0d1e42;
  --navy-700:   #12295a;
  --navy-600:   #17357a;
  --navy-500:   #1d44a0;

  /* brand */
  --blue:       #2563eb;
  --blue-lit:   #4d86ff;
  --gold:       #f2c14e;
  --gold-lit:   #ffd873;
  --gold-deep:  #a97a15;
  --gold-glow:  rgba(242,193,78,.35);

  --cream:      #f6f1e4;
  --cream-dim:  rgba(246,241,228,.62);
  --cream-faint:rgba(246,241,228,.34);

  --good:       #2fbf71;
  --good-lit:   #58e29a;
  --bad:        #ec5766;
  --bad-lit:    #ff8792;

  --line:       rgba(242,193,78,.22);
  --line-soft:  rgba(246,241,228,.10);

  /* type */
  --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body:    "Schibsted Grotesk", "Helvetica Neue", sans-serif;

  /* motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --pop: cubic-bezier(.34,1.56,.64,1);

  --board-gap: clamp(4px, .5vw, 9px);
  --radius: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--body);
  color:var(--cream);
  background:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- atmosphere ---------------------------------- */

.field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -20%, #1b3a86 0%, transparent 55%),
    radial-gradient(80% 60% at 12% 108%, #10265c 0%, transparent 60%),
    radial-gradient(70% 55% at 92% 100%, #14204d 0%, transparent 62%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--ink) 70%);
}
/* diamond lattice */
.field::before{
  content:""; position:absolute; inset:-10%;
  background-image:
    linear-gradient(45deg, var(--line-soft) 1px, transparent 1px),
    linear-gradient(-45deg, var(--line-soft) 1px, transparent 1px);
  background-size:58px 58px;
  opacity:.5;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
}
/* slow roaming spotlight */
.field::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(38% 46% at 50% 42%, var(--gold-glow) 0%, transparent 70%);
  opacity:.30;
  animation:roam 26s var(--ease-in-out) infinite;
}
@keyframes roam{
  0%,100%{ transform:translate3d(-14%, -6%, 0) scale(1); }
  33%    { transform:translate3d(16%, 6%, 0) scale(1.18); }
  66%    { transform:translate3d(-4%, 12%, 0) scale(.94); }
}
/* film grain */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;
}

@media (prefers-reduced-motion: reduce){
  .field::after{ animation:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- shell --------------------------------------- */

.app{
  position:relative; z-index:1;
  height:100dvh; display:flex; flex-direction:column;
  padding:clamp(10px,1.4vh,20px) clamp(12px,1.6vw,30px);
  gap:clamp(8px,1.2vh,16px);
}

.screen{ display:none; flex:1; min-height:0; flex-direction:column; }
.screen.is-active{ display:flex; }

/* ---------- masthead ------------------------------------ */

.masthead{
  display:flex; align-items:center; gap:clamp(10px,1.4vw,20px);
  flex:0 0 auto;
}
.mark{ width:clamp(26px,2.4vw,38px); height:auto; flex:0 0 auto; filter:drop-shadow(0 2px 10px var(--gold-glow)); }
.mark .d-out{ fill:none; stroke:var(--gold); stroke-width:6; }
.mark .d-in{ fill:var(--gold); }

.wordmark{ display:flex; flex-direction:column; line-height:.82; }
.wordmark b{
  font-family:var(--display); font-weight:800;
  font-size:clamp(19px,2.1vw,32px); letter-spacing:.055em; text-transform:uppercase;
  color:var(--cream); white-space:nowrap;
}
.wordmark span{
  font-size:clamp(8px,.62vw,10.5px); letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); font-weight:600; padding-left:.15em; margin-top:.42em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.masthead-spacer{ flex:1; }

.round-tag{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(12px,1.05vw,17px); letter-spacing:.2em;
  color:var(--gold); padding:.35em .95em;
  border:1px solid var(--line); border-radius:100px;
  background:rgba(242,193,78,.06);
  white-space:nowrap;
}

.tools{ display:flex; gap:6px; }

/* ---------- buttons ------------------------------------- */

button{ font-family:inherit; color:inherit; cursor:pointer; border:0; background:none; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold-lit); outline-offset:3px;
}

.tool{
  width:clamp(30px,2.5vw,38px); height:clamp(30px,2.5vw,38px);
  display:grid; place-items:center; border-radius:8px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.035);
  color:var(--cream-dim);
  transition:.22s var(--ease-out);
}
.tool:hover{ color:var(--gold); border-color:var(--line); background:rgba(242,193,78,.10); transform:translateY(-1px); }
.tool svg{ width:52%; height:52%; }
.tool.is-off{ color:var(--cream-faint); }

.btn{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:clamp(13px,1.05vw,17px);
  padding:.72em 1.7em; border-radius:6px;
  border:1px solid var(--line);
  background:rgba(242,193,78,.08); color:var(--gold);
  transition:.24s var(--ease-out);
  white-space:nowrap;
}
.btn:hover{ background:rgba(242,193,78,.17); border-color:var(--gold); transform:translateY(-2px);
  box-shadow:0 10px 28px -12px var(--gold-glow); }
.btn:active{ transform:translateY(0); }

.btn-gold{
  background:linear-gradient(180deg, var(--gold-lit), var(--gold) 55%, var(--gold-deep));
  color:#2a1c00; border-color:var(--gold-lit); font-weight:800;
  box-shadow:0 12px 32px -14px rgba(242,193,78,.9), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover{ background:linear-gradient(180deg,#fff0c0, var(--gold-lit) 55%, var(--gold)); }

.btn-good{ color:var(--good-lit); border-color:rgba(47,191,113,.35); background:rgba(47,191,113,.10); }
.btn-good:hover{ background:rgba(47,191,113,.22); border-color:var(--good-lit); box-shadow:0 10px 28px -12px rgba(47,191,113,.6); }
.btn-bad{ color:var(--bad-lit); border-color:rgba(236,87,102,.35); background:rgba(236,87,102,.10); }
.btn-bad:hover{ background:rgba(236,87,102,.22); border-color:var(--bad-lit); box-shadow:0 10px 28px -12px rgba(236,87,102,.6); }
.btn-ghost{ color:var(--cream-dim); border-color:var(--line-soft); background:transparent; }
.btn-ghost:hover{ color:var(--cream); border-color:var(--cream-faint); background:rgba(255,255,255,.05); box-shadow:none; }
.btn-sm{ font-size:clamp(11px,.82vw,13px); padding:.55em 1.05em; letter-spacing:.11em; }

/* ============================================================
   SETUP
   ============================================================ */

.setup{ justify-content:center; align-items:center; overflow-y:auto; }
.setup-inner{
  width:min(940px,100%); margin:auto;
  padding:clamp(16px,3vh,40px) 0;
  animation:rise .7s var(--ease-out) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

.hero{ text-align:center; margin-bottom:clamp(22px,3.4vh,46px); }
.hero-kicker{
  font-size:clamp(9px,.72vw,12px); letter-spacing:.52em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:1.4em;
  animation:rise .7s .05s var(--ease-out) both;
}
.hero h1{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(52px,10.5vw,148px); line-height:.78; letter-spacing:-.005em;
  margin:0; color:var(--cream);
  text-shadow:0 1px 0 var(--gold-deep), 0 3px 0 rgba(0,0,0,.4), 0 22px 60px rgba(0,0,0,.75);
  animation:rise .8s .1s var(--ease-out) both;
}
.hero h1 em{
  display:block; font-style:normal;
  background:linear-gradient(180deg,#fff3cc 8%, var(--gold-lit) 38%, var(--gold) 62%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  overflow-wrap:anywhere;
  text-shadow:none;
  filter:drop-shadow(0 4px 26px rgba(242,193,78,.32));
}
.hero p{
  margin:1.5em auto 0; max-width:50ch; color:var(--cream-dim);
  font-size:clamp(13px,1.05vw,16.5px); line-height:1.62;
  animation:rise .8s .18s var(--ease-out) both;
}

.rule{
  height:1px; margin:clamp(20px,3vh,38px) 0;
  background:linear-gradient(90deg,transparent, var(--line) 18%, var(--gold) 50%, var(--line) 82%, transparent);
  opacity:.7;
}

.panel-label{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.26em; font-size:clamp(11px,.88vw,14px);
  color:var(--gold); margin-bottom:1.05em; display:flex; align-items:center; gap:.8em;
}
.panel-label::after{ content:""; flex:1; height:1px; background:var(--line); }

.teams-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px; margin-bottom:14px;
}
.team-row{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.035); border:1px solid var(--line-soft);
  border-radius:8px; padding:9px 10px 9px 12px;
  transition:.22s var(--ease-out);
}
.team-row:focus-within{ border-color:var(--line); background:rgba(242,193,78,.06); }
.swatch{ width:11px; height:11px; flex:0 0 auto; transform:rotate(45deg); border-radius:2px;
  box-shadow:0 0 12px currentColor; }
.team-row input{
  flex:1; min-width:0; background:none; border:0; color:var(--cream);
  font-family:var(--body); font-size:clamp(13px,1vw,15px); font-weight:600;
  padding:2px 0;
}
.team-row input::placeholder{ color:var(--cream-faint); font-weight:400; }
.team-row .drop{
  color:var(--cream-faint); font-size:17px; line-height:1; padding:2px 5px; border-radius:4px;
  transition:.18s;
}
.team-row .drop:hover{ color:var(--bad-lit); background:rgba(236,87,102,.14); }

.setup-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.opts{ display:flex; gap:26px; flex-wrap:wrap; margin-top:6px; }
.opt{ display:flex; flex-direction:column; gap:.6em; }
.opt > span{
  font-size:clamp(9px,.68vw,11px); letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-faint); font-weight:600;
}
.seg{ display:flex; border:1px solid var(--line-soft); border-radius:7px; overflow:hidden; }
.seg button{
  padding:.6em 1.15em; font-size:clamp(11px,.85vw,13.5px); font-weight:600;
  color:var(--cream-dim); background:rgba(255,255,255,.025);
  border-right:1px solid var(--line-soft); transition:.2s var(--ease-out);
}
.seg button:last-child{ border-right:0; }
.seg button:hover{ color:var(--cream); background:rgba(255,255,255,.07); }
.seg button.on{ background:linear-gradient(180deg,var(--gold-lit),var(--gold)); color:#2a1c00; font-weight:800; }

.launch{ margin-top:clamp(24px,3.4vh,42px); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.launch .btn-gold{ font-size:clamp(16px,1.5vw,23px); padding:.78em 2.5em; }
.hint{ font-size:12px; color:var(--cream-faint); }
kbd{
  font-family:var(--body); font-size:.85em; font-weight:600;
  background:rgba(255,255,255,.09); border:1px solid var(--line-soft);
  border-bottom-width:2px; border-radius:4px; padding:.12em .45em; color:var(--cream-dim);
}

/* ============================================================
   BOARD
   ============================================================ */

.board-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; gap:var(--board-gap); }

.board{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:auto repeat(5,1fr);
  gap:var(--board-gap);
}

.cat{
  display:grid; place-items:center; text-align:center;
  padding:clamp(8px,1.5vh,18px) clamp(4px,.6vw,12px);
  background:linear-gradient(180deg, var(--navy-700), var(--navy-800));
  border-radius:var(--radius);
  border-top:2px solid rgba(242,193,78,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 6px 20px -10px #000;
  animation:catIn .55s var(--ease-out) both;
}
@keyframes catIn{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
.cat span{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(11px,1.35vw,25px); line-height:1.0; letter-spacing:.045em;
  color:var(--cream); text-shadow:0 2px 5px rgba(0,0,0,.6);
  overflow-wrap:anywhere; hyphens:auto;
}

.tile{
  position:relative; display:grid; place-items:center;
  border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(178deg, var(--navy-600) 0%, var(--navy-800) 58%, var(--navy-850) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.045),
             0 8px 22px -14px #000;
  transition:transform .3s var(--pop), box-shadow .3s var(--ease-out), filter .3s;
  animation:tileIn .5s var(--ease-out) both;
  animation-delay:var(--d,0s);
}
@keyframes tileIn{
  from{ opacity:0; transform:rotateX(-42deg) translateY(16px); }
  to{ opacity:1; transform:none; }
}
.tile .amt{
  font-family:var(--display); font-weight:800;
  font-size:clamp(24px,3.6vw,66px); line-height:1; letter-spacing:.01em;
  background:linear-gradient(180deg,#fff2c6 6%, var(--gold-lit) 34%, var(--gold) 60%, #c9901f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  overflow-wrap:anywhere;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.75)) drop-shadow(0 5px 18px rgba(242,193,78,.22));
  transition:transform .3s var(--pop);
}
.tile::after{ /* sheen */
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.16) 48%, transparent 58%);
  transform:translateX(-130%); transition:transform .65s var(--ease-out);
}
.tile:hover:not(.spent){ transform:translateY(-4px) scale(1.022); filter:brightness(1.16);
  box-shadow:inset 0 0 0 1.5px var(--gold), 0 18px 40px -18px var(--gold-glow), 0 10px 26px -14px #000; }
.tile:hover:not(.spent)::after{ transform:translateX(130%); }
.tile:hover:not(.spent) .amt{ transform:scale(1.07); }
.tile:active:not(.spent){ transform:translateY(-1px) scale(.99); }

.tile.spent{
  background:linear-gradient(180deg, rgba(9,17,38,.82), rgba(5,10,24,.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  cursor:default; pointer-events:none;
}
.tile.spent .amt{ opacity:0; transform:scale(.5); }
.tile.spent::before{
  content:""; position:absolute; width:clamp(10px,1.1vw,17px); height:clamp(10px,1.1vw,17px);
  border:1.5px solid rgba(246,241,228,.13); transform:rotate(45deg);
  animation:diamondIn .45s var(--pop) both;
}
@keyframes diamondIn{ from{ opacity:0; transform:rotate(45deg) scale(2.4); } to{ opacity:1; transform:rotate(45deg) scale(1); } }

/* ---------- scoreboard ---------------------------------- */

.scoreboard{
  flex:0 0 auto; display:grid; gap:var(--board-gap);
  grid-template-columns:repeat(var(--n,4),1fr);
}
.score{
  position:relative; overflow:hidden;
  padding:clamp(7px,1.1vh,14px) clamp(9px,1vw,18px);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line-soft);
  display:flex; align-items:center; gap:clamp(8px,.9vw,14px);
  transition:.3s var(--ease-out);
  cursor:pointer;
}
.score::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--c,var(--gold)); box-shadow:0 0 16px var(--c,var(--gold));
}
.score:hover{ background:rgba(255,255,255,.085); transform:translateY(-2px); }
.score.active{
  border-color:var(--gold); background:rgba(242,193,78,.13);
  box-shadow:0 0 0 1px var(--gold), 0 12px 34px -18px var(--gold-glow);
}
.score-name{
  flex:1; min-width:0; font-weight:700; font-size:clamp(11px,1vw,15px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em;
}
.score-val{
  font-family:var(--display); font-weight:800; font-size:clamp(19px,2.3vw,38px);
  line-height:1; letter-spacing:.01em; color:var(--gold-lit); font-variant-numeric:tabular-nums;
  transition:color .3s;
}
.score-val.neg{ color:var(--bad-lit); }
.score.bump{ animation:bump .5s var(--pop); }
@keyframes bump{ 0%{transform:scale(1);} 45%{transform:scale(1.055);} 100%{transform:scale(1);} }
.score-adj{ display:flex; flex-direction:column; gap:2px; opacity:0; transition:.2s; }
.score:hover .score-adj{ opacity:1; }
.score-adj button{
  font-size:10px; line-height:1; padding:2.5px 5px; border-radius:3px;
  background:rgba(255,255,255,.1); color:var(--cream-dim); font-weight:700;
}
.score-adj button:hover{ background:var(--gold); color:#2a1c00; }

/* ============================================================
   CLUE OVERLAY
   ============================================================ */

.clue{
  position:fixed; inset:0; z-index:40; display:none;
  background:linear-gradient(175deg, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
}
.clue.is-active{ display:flex; flex-direction:column; }
.clue::before{ /* giant diamond watermark */
  content:""; position:absolute; top:50%; left:50%; width:78vmin; height:78vmin;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(242,193,78,.10);
  box-shadow:0 0 0 clamp(18px,4vmin,44px) rgba(242,193,78,.035);
  pointer-events:none;
}
.clue::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(65% 55% at 50% 45%, rgba(242,193,78,.10), transparent 70%);
}

.clue-in{
  position:relative; z-index:2; flex:1; min-height:0;
  display:flex; flex-direction:column;
  padding:clamp(14px,2.4vh,32px) clamp(18px,4vw,72px) clamp(14px,2.2vh,28px);
}

.clue-head{
  flex:0 0 auto; display:flex; align-items:center; gap:clamp(10px,1.6vw,24px);
  padding-bottom:clamp(10px,1.6vh,20px);
  border-bottom:1px solid var(--line);
}
.clue-cat{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(15px,1.9vw,32px); letter-spacing:.09em; color:var(--cream);
}
.clue-amt{
  font-family:var(--display); font-weight:800;
  font-size:clamp(19px,2.3vw,40px); line-height:1;
  background:linear-gradient(180deg,#fff2c6, var(--gold) 65%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  overflow-wrap:anywhere;
}
.clue-head-spacer{ flex:1; }

/* timer */
.timer{ display:flex; align-items:center; gap:10px; }
.timer-num{
  font-family:var(--display); font-weight:800; font-size:clamp(20px,2.2vw,38px);
  line-height:1; color:var(--gold-lit); font-variant-numeric:tabular-nums; min-width:1.5ch; text-align:right;
  transition:color .3s;
}
.timer.low .timer-num{ color:var(--bad-lit); animation:pulse .55s infinite alternate; }
@keyframes pulse{ from{ opacity:.55; } to{ opacity:1; } }
.timer-ring{ width:clamp(34px,3.2vw,52px); height:clamp(34px,3.2vw,52px); transform:rotate(-90deg); }
.timer-ring circle{ fill:none; stroke-width:3.5; stroke-linecap:round; }
.timer-ring .bg{ stroke:rgba(255,255,255,.11); }
.timer-ring .fg{ stroke:var(--gold); transition:stroke-dashoffset 1s linear, stroke .3s; }
.timer.low .timer-ring .fg{ stroke:var(--bad); }

.clue-body{
  flex:1; min-height:0; display:grid; place-items:center;
  padding:clamp(14px,3vh,44px) 0;
  overflow-y:auto;
}
.clue-text{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(26px,4.6vw,80px); line-height:1.06; letter-spacing:.005em;
  text-align:center; max-width:20ch; margin:0 auto;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
  animation:clueIn .5s .1s var(--ease-out) both;
}
@keyframes clueIn{ from{ opacity:0; transform:translateY(20px) scale(.97); } to{ opacity:1; transform:none; } }

.reveal{
  margin-top:clamp(22px,3.6vh,48px); text-align:center;
  max-width:min(92vw,900px); margin-left:auto; margin-right:auto;
  display:none;
}
.reveal.show{ display:block; animation:revealIn .55s var(--pop) both; }
@keyframes revealIn{ from{ opacity:0; transform:translateY(22px) scale(.94); } to{ opacity:1; transform:none; } }
.reveal-label{
  font-size:clamp(9px,.68vw,11px); letter-spacing:.48em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:.95em;
}
.reveal-a{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,3.6vw,60px); line-height:1.07;
  max-width:15em; margin:0 auto;   /* em = this element's own display size */
  background:linear-gradient(180deg,#fff6da 5%, var(--gold-lit) 40%, var(--gold) 70%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  overflow-wrap:anywhere;
  filter:drop-shadow(0 4px 22px rgba(242,193,78,.3));
}
.reveal-fact{
  margin:1.5em auto 0; max-width:52ch; color:var(--cream-dim);
  font-size:clamp(12px,1.02vw,16px); line-height:1.6;
  padding-top:1.35em; border-top:1px solid var(--line);
}

.clue-foot{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; padding-top:clamp(10px,1.6vh,18px);
  border-top:1px solid var(--line);
  min-height:clamp(48px,6vh,72px);
}
.await{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.award-strip{ display:none; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.award-strip.show{ display:flex; animation:rise .4s var(--ease-out) both; }
.award-strip .who{
  font-size:clamp(9px,.68vw,11px); letter-spacing:.34em; text-transform:uppercase;
  color:var(--cream-faint); font-weight:600; margin-right:4px;
}
.chip{
  display:flex; align-items:center; gap:7px;
  padding:.52em 1em; border-radius:6px; font-weight:700;
  font-size:clamp(11px,.95vw,14.5px);
  border:1px solid var(--line-soft); background:rgba(255,255,255,.045);
  color:var(--cream); transition:.2s var(--ease-out);
}
.chip:hover{ transform:translateY(-2px); border-color:var(--gold); background:rgba(242,193,78,.14); }
.chip i{ width:9px; height:9px; transform:rotate(45deg); border-radius:1px; background:var(--c); box-shadow:0 0 10px var(--c); }
.chip kbd{ margin-left:2px; }

/* daily double splash */
.dd{
  position:fixed; inset:0; z-index:50; display:none;
  place-items:center; text-align:center;
  background:radial-gradient(60% 60% at 50% 50%, #1c3f96, var(--navy-900) 72%);
}
.dd.is-active{ display:grid; animation:ddIn .45s var(--ease-out) both; }
@keyframes ddIn{ from{ opacity:0; } to{ opacity:1; } }
.dd-card{ animation:ddPop .7s var(--pop) both; }
@keyframes ddPop{ from{ transform:scale(.55) rotate(-7deg); opacity:0; } to{ transform:none; opacity:1; } }
.dd h2{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(46px,10vw,150px); line-height:.82; margin:0;
  background:linear-gradient(180deg,#fff6da, var(--gold-lit) 40%, var(--gold) 68%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  overflow-wrap:anywhere;
  filter:drop-shadow(0 8px 40px rgba(242,193,78,.55));
}
.dd p{ margin:1.4em 0 0; letter-spacing:.44em; text-transform:uppercase;
  font-size:clamp(10px,.8vw,13px); color:var(--cream-dim); font-weight:600; }
.dd .wager-box{ margin-top:clamp(22px,4vh,44px); animation:rise .6s .35s var(--ease-out) both; }

.wager-box{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.wager-box label{
  font-size:clamp(9px,.7vw,11.5px); letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.wager-in{
  display:flex; align-items:center; gap:4px;
  border:1px solid var(--line); border-radius:8px; padding:.3em .9em;
  background:rgba(0,0,0,.34);
}
.wager-in span{ font-family:var(--display); font-weight:800; font-size:clamp(24px,2.8vw,44px); color:var(--gold); }
.wager-in input{
  width:5.5ch; background:none; border:0; color:var(--cream);
  font-family:var(--display); font-weight:800; font-size:clamp(28px,3.4vw,54px);
  text-align:center; padding:0; -moz-appearance:textfield;
}
.wager-in input::-webkit-outer-spin-button,.wager-in input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.wager-max{ font-size:11.5px; color:var(--cream-faint); }

/* ============================================================
   FINAL
   ============================================================ */

.final{ align-items:center; justify-content:center; overflow-y:auto; }
.final-in{ width:min(1000px,100%); margin:auto; text-align:center; padding:clamp(14px,3vh,34px) 0; }
.final-kicker{
  font-size:clamp(9px,.72vw,12px); letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:1.3em;
}
.final-cat{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(38px,7vw,104px); line-height:.86; margin:0;
  background:linear-gradient(180deg,#fff6da, var(--gold-lit) 42%, var(--gold) 70%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  overflow-wrap:anywhere;
  filter:drop-shadow(0 6px 34px rgba(242,193,78,.35));
}
.final-q{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(20px,3vw,48px); line-height:1.14; max-width:24ch; margin:clamp(18px,3vh,34px) auto 0;
}
.final-a{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,5vw,78px); line-height:1; margin:clamp(14px,2.4vh,26px) 0 0;
  background:linear-gradient(180deg,#fff6da, var(--gold-lit) 40%, var(--gold) 70%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  overflow-wrap:anywhere;
}
.final-fact{ margin:1.5em auto 0; max-width:56ch; color:var(--cream-dim); line-height:1.62;
  font-size:clamp(12px,1.02vw,16px); }

.wagers{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:clamp(20px,3.4vh,40px) 0; text-align:left; }
.wager-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--line-soft); border-radius:8px; background:rgba(255,255,255,.035);
}
.wager-row .swatch{ width:12px; height:12px; }
.wager-row .nm{ flex:1; min-width:0; font-weight:700; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wager-row .have{ font-size:11.5px; color:var(--cream-faint); font-variant-numeric:tabular-nums; }
.wager-row input{
  width:8ch; background:rgba(0,0,0,.34); border:1px solid var(--line-soft); border-radius:6px;
  color:var(--gold-lit); font-family:var(--display); font-weight:800; font-size:20px;
  text-align:center; padding:.24em .3em; -moz-appearance:textfield;
}
.wager-row input::-webkit-outer-spin-button,.wager-row input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.wager-row .judge{ display:flex; gap:5px; }

/* podium */
.podium{ display:grid; gap:12px; margin:clamp(20px,3.4vh,40px) auto 0; max-width:760px; }
.place{
  display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:8px;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.04);
  animation:rise .6s var(--ease-out) both; animation-delay:var(--d,0s);
}
.place.win{
  border-color:var(--gold);
  background:linear-gradient(90deg, rgba(242,193,78,.20), rgba(242,193,78,.05));
  box-shadow:0 16px 46px -22px var(--gold-glow);
}
.place .rank{
  font-family:var(--display); font-weight:800; font-size:clamp(22px,2.4vw,40px);
  color:var(--cream-faint); min-width:1.6ch; line-height:1;
}
.place.win .rank{ color:var(--gold); }
.place .nm{ flex:1; min-width:0; text-align:left; font-weight:700; font-size:clamp(14px,1.3vw,20px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.place .pts{
  font-family:var(--display); font-weight:800; font-size:clamp(22px,2.6vw,42px);
  color:var(--gold-lit); font-variant-numeric:tabular-nums; line-height:1;
}
.place .pts.neg{ color:var(--bad-lit); }
.crown{ font-size:clamp(18px,2vw,30px); filter:drop-shadow(0 0 14px var(--gold-glow)); }

/* ---------- confetti ------------------------------------ */
.confetti{ position:fixed; inset:0; z-index:70; pointer-events:none; overflow:hidden; }
.confetti i{
  position:absolute; width:9px; height:9px; opacity:0;
  animation:fall var(--dur,2.6s) var(--ease-out) forwards; animation-delay:var(--dl,0s);
}
@keyframes fall{
  0%{ opacity:1; transform:translate3d(0,-8vh,0) rotate(0deg) scale(1); }
  100%{ opacity:0; transform:translate3d(var(--dx,0),108vh,0) rotate(var(--rot,720deg)) scale(.5); }
}

/* ---------- toast / help -------------------------------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  z-index:80; padding:.7em 1.4em; border-radius:100px;
  background:rgba(6,12,28,.94); border:1px solid var(--line);
  color:var(--cream); font-size:13.5px; font-weight:600;
  opacity:0; transition:.32s var(--ease-out); pointer-events:none;
  backdrop-filter:blur(12px); box-shadow:0 18px 50px -20px #000;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.sheet{
  position:fixed; inset:0; z-index:75; display:none;
  background:rgba(3,6,15,.86); backdrop-filter:blur(10px);
  padding:clamp(16px,4vh,50px); overflow-y:auto;
}
.sheet.is-active{ display:block; animation:ddIn .3s both; }
.sheet-in{
  width:min(820px,100%); margin:auto;
  background:linear-gradient(180deg,var(--navy-850),var(--navy-900));
  border:1px solid var(--line); border-radius:12px;
  padding:clamp(20px,3.4vh,40px); box-shadow:0 40px 100px -30px #000;
  animation:rise .4s var(--ease-out) both;
}
.sheet h3{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; font-size:clamp(20px,2.2vw,32px); margin:0 0 .1em; color:var(--gold);
}
.sheet .sub{ color:var(--cream-faint); font-size:13px; margin:0 0 1.8em; }
.keys{ display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.keyrow{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--cream-dim); }
.keyrow b{ min-width:74px; display:flex; gap:4px; }
.sheet-close{ margin-top:2em; }

/* ---------- responsive ---------------------------------- */

@media (max-width: 860px){
  body{ overflow:auto; }
  .app{ height:auto; min-height:100dvh; }
  .board{ grid-template-rows:auto repeat(5,minmax(58px,1fr)); min-height:66vh; }
  .cat span{ font-size:clamp(9px,2.2vw,14px); }
  .tile .amt{ font-size:clamp(15px,4.4vw,26px); }
  .scoreboard{ grid-template-columns:repeat(2,1fr); }
  .clue-text{ max-width:16ch; }
  .score-adj{ opacity:1; }
}
@media (max-width: 640px){
  .masthead{ gap:9px; }
  .wordmark b{ font-size:15px; letter-spacing:.03em; }
  .wordmark span{ display:none; }
  .round-tag{ font-size:10px; letter-spacing:.12em; padding:.3em .6em; }
  .tools{ gap:4px; }
  .tool{ width:28px; height:28px; }
  .mark{ width:22px; }
}
@media (max-width: 560px){
  .hero h1{ font-size:clamp(42px,15vw,80px); }
  .teams-grid{ grid-template-columns:1fr; }
  .opts{ gap:16px; }
}
@media print{ body{ overflow:visible; } .field,.grain{ display:none; } }

/* ============================================================
   PLAYER / BUZZER (phones)
   ============================================================ */

.player-body{ overflow:hidden; overscroll-behavior:none; }
.player-body .app{ display:none; }

.player-body{ --me:var(--gold); }   /* JS overrides this inline, per team */
.player{
  position:relative; z-index:1;
  height:100dvh; display:flex; flex-direction:column;
}
.pscreen{ display:none; flex:1; min-height:0; flex-direction:column; }
.pscreen.is-active{ display:flex; }

/* ---------- join / pick ---------- */

.pjoin{
  margin:auto; width:min(420px,100%); padding:clamp(20px,5vw,32px);
  text-align:center; animation:rise .6s var(--ease-out) both;
}
.pmark{ width:44px; margin-bottom:22px; }
.pjoin-title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,9vw,44px); line-height:.9; margin:0; letter-spacing:.02em;
}
.pjoin-sub{ color:var(--cream-dim); font-size:14.5px; margin:.9em 0 2em; line-height:1.5; }

.code-in{
  width:100%; background:rgba(0,0,0,.36); border:1px solid var(--line);
  border-radius:12px; color:var(--gold-lit); text-align:center;
  font-family:var(--display); font-weight:800; font-size:clamp(44px,15vw,64px);
  letter-spacing:.3em; text-indent:.3em; padding:.24em 0; text-transform:uppercase;
  transition:.25s var(--ease-out);
}
.code-in::placeholder{ color:rgba(246,241,228,.16); letter-spacing:.3em; }
.code-in:focus{ outline:none; border-color:var(--gold); background:rgba(0,0,0,.5);
  box-shadow:0 0 0 4px rgba(242,193,78,.12); }

.pbtn{ width:100%; margin-top:16px; justify-content:center; }
.pmsg{ margin-top:1.4em; font-size:13.5px; color:var(--cream-dim); min-height:1.3em; line-height:1.5; }

.team-pick{ display:grid; gap:10px; margin-bottom:20px; }
.team-opt{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:18px 20px; border-radius:12px; text-align:left;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.045);
  color:var(--cream); font-weight:700; font-size:17px;
  transition:.22s var(--ease-out);
}
.team-opt i{ width:15px; height:15px; flex:0 0 auto; transform:rotate(45deg);
  border-radius:2px; background:var(--c); box-shadow:0 0 16px var(--c); }
.team-opt:active{ transform:scale(.98); }
.team-opt:hover{ border-color:var(--c); background:rgba(255,255,255,.09); }

/* ---------- buzzer ---------- */

.pbar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 14px;
}
.pbar-team{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14.5px;
  min-width:0; overflow:hidden; }
.pbar-team i{ width:11px; height:11px; flex:0 0 auto; transform:rotate(45deg); border-radius:2px; }
.pbar-team b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbar-dot{
  margin-left:auto; width:8px; height:8px; border-radius:50%;
  background:var(--good); box-shadow:0 0 10px var(--good); transition:.3s;
}
.pbar-dot.off{ background:var(--bad); box-shadow:0 0 10px var(--bad); }

.buzz-wrap{ flex:1; min-height:0; display:grid; place-items:center; padding:14px 22px; }

.buzzer{
  position:relative; width:min(78vw,340px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; isolation:isolate;
  background:radial-gradient(circle at 50% 34%, #1a2b57, #0a1024 72%);
  border:2px solid rgba(246,241,228,.10);
  color:var(--cream-faint);
  transition:transform .18s var(--pop), border-color .25s, box-shadow .3s, background .3s, color .25s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
}
.buzzer-label{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,11vw,54px); line-height:1; letter-spacing:.03em; padding:0 .3em;
  text-align:center;
}
.buzzer-ring{
  position:absolute; inset:-3px; border-radius:50%; pointer-events:none;
  border:2px solid transparent; opacity:0;
}

/* live: armed and waiting for this team */
.buzzer.is-live{
  background:radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--me) 62%, #2a2350), #14102a 74%);
  border-color:var(--me); color:#fff;
  box-shadow:0 0 0 1px var(--me), 0 20px 70px -20px var(--me), inset 0 0 60px -18px var(--me);
  animation:breathe 1.5s var(--ease-in-out) infinite;
}
.buzzer.is-live .buzzer-ring{ opacity:1; border-color:var(--me); animation:pingRing 1.5s var(--ease-out) infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
@keyframes pingRing{ 0%{ transform:scale(1); opacity:.75; } 100%{ transform:scale(1.28); opacity:0; } }
.buzzer.is-live:active{ transform:scale(.94); animation:none; }

.buzzer.is-sent{ background:radial-gradient(circle at 50% 34%, #2b2f52, #0a1024 74%);
  border-color:var(--cream-faint); color:var(--cream); transform:scale(.96); }

.buzzer.is-first{
  background:radial-gradient(circle at 50% 34%, #1f7a52, #06231a 74%);
  border-color:var(--good-lit); color:#fff;
  box-shadow:0 0 0 1px var(--good-lit), 0 22px 70px -20px rgba(47,191,113,.85);
  animation:popIn .5s var(--pop);
}
.buzzer.is-late, .buzzer.is-done{
  background:radial-gradient(circle at 50% 34%, #4a2030, #150a12 74%);
  border-color:rgba(236,87,102,.5); color:var(--cream-dim);
}
.buzzer.is-out{ background:radial-gradient(circle at 50% 34%, #1a1d2c, #080b14 74%);
  border-color:var(--line-soft); color:var(--cream-faint); }
@keyframes popIn{ from{ transform:scale(.8); } to{ transform:scale(1); } }

.pfoot{
  flex:0 0 auto; text-align:center;
  padding:14px 22px calc(env(safe-area-inset-bottom,0px) + 22px);
}
.pstatus{ margin:0; font-size:15.5px; font-weight:600; color:var(--cream); line-height:1.45; }
.pclue{ margin:.7em 0 0; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-faint); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .buzzer.is-live{ animation:none; } .buzzer.is-live .buzzer-ring{ animation:none; opacity:.5; }
}

/* ============================================================
   HOST: buzzer room + explicit scoring controls
   ============================================================ */

/* display:flex would otherwise beat the UA's [hidden] rule */
[hidden]{ display:none !important; }

.room-pill{
  display:flex; align-items:center; gap:.55em; cursor:pointer;
  font-size:clamp(9px,.7vw,11px); letter-spacing:.26em; text-transform:uppercase;
  color:var(--cream-faint); font-weight:600;
  padding:.4em .9em; border:1px solid var(--line-soft); border-radius:100px;
  background:rgba(255,255,255,.035); transition:.22s var(--ease-out); white-space:nowrap;
}
.room-pill:hover{ border-color:var(--line); background:rgba(242,193,78,.08); }
.room-pill b{
  font-family:var(--display); font-weight:800; font-size:clamp(14px,1.15vw,19px);
  letter-spacing:.14em; color:var(--gold); line-height:1;
}

/* ---- setup: join panel ---- */
.room-panel{
  display:flex; align-items:center; gap:clamp(16px,2.2vw,30px);
  margin-top:clamp(18px,2.6vh,30px); padding:clamp(14px,2vh,22px);
  border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(100deg, rgba(242,193,78,.09), rgba(242,193,78,.02));
  animation:rise .45s var(--ease-out) both;
}
.room-qr{
  flex:0 0 auto; width:clamp(96px,11vw,136px); aspect-ratio:1;
  background:#fff; border-radius:8px; padding:7px; display:grid; place-items:center;
  box-shadow:0 10px 30px -14px #000;
}
.room-qr:empty{ display:none; }
.room-qr svg{ width:100%; height:100%; display:block; }
.room-info{ min-width:0; flex:1; }
.room-url{
  font-family:var(--display); font-weight:800;
  font-size:clamp(17px,2.1vw,32px); line-height:1.05; color:var(--cream);
  overflow-wrap:anywhere;
}
.room-code{
  margin-top:.5em; font-size:clamp(9px,.7vw,11.5px); letter-spacing:.3em;
  text-transform:uppercase; color:var(--cream-faint); font-weight:600;
}
.room-code b{
  font-family:var(--display); font-size:clamp(20px,2.4vw,34px); letter-spacing:.16em;
  color:var(--gold); margin-left:.5em; vertical-align:-.08em;
}
.room-note{ margin:.95em 0 0; font-size:12.5px; line-height:1.55; color:var(--cream-dim); max-width:52ch; }

/* ---- clue header: buzzer status ---- */
.buzz-hint{
  font-size:clamp(9px,.66vw,11px); letter-spacing:.3em; text-transform:uppercase;
  font-weight:600; color:var(--gold); padding:.4em .9em; border-radius:100px;
  border:1px solid var(--line); background:rgba(242,193,78,.08); white-space:nowrap;
  animation:pulse 1.5s ease-in-out infinite alternate;
}

/* ---- explicit tick / cross per team ---- */
.chip-team{ padding-right:.35em; gap:8px; cursor:default; }
.chip-team:hover{ transform:none; border-color:var(--line-soft); background:rgba(255,255,255,.045); }
.chip-nm{ max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk{
  width:1.85em; height:1.85em; flex:0 0 auto; border-radius:5px; line-height:1;
  font-size:clamp(12px,1vw,15px); font-weight:800; display:grid; place-items:center;
  border:1px solid transparent; transition:.16s var(--ease-out);
}
.mk-yes{ color:var(--good-lit); background:rgba(47,191,113,.14); }
.mk-yes:hover{ background:var(--good); color:#042314; transform:scale(1.12); }
.mk-no{ color:var(--bad-lit); background:rgba(236,87,102,.14); }
.mk-no:hover{ background:var(--bad); color:#2b0509; transform:scale(1.12); }

/* ---- "who buzzed first" banner ---- */
.buzz-win{
  display:flex; align-items:center; gap:11px; padding:.5em 1.15em; border-radius:7px;
  border:1px solid var(--c); background:color-mix(in srgb, var(--c) 16%, transparent);
  animation:winIn .45s var(--pop) both; margin-right:4px;
}
@keyframes winIn{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:none; } }
.buzz-win i{ width:11px; height:11px; transform:rotate(45deg); border-radius:2px;
  background:var(--c); box-shadow:0 0 14px var(--c); }
.buzz-win b{ font-size:clamp(13px,1.15vw,18px); font-weight:800; letter-spacing:.01em; }
.buzz-win em{
  font-style:normal; font-size:clamp(9px,.66vw,11px); letter-spacing:.22em;
  text-transform:uppercase; color:var(--cream-dim); font-weight:600;
}

@media (max-width: 860px){
  .room-panel{ flex-direction:column; align-items:flex-start; }
  .room-qr{ width:132px; }
  .chip-nm{ max-width:9ch; }
}

/* Connection health for the buzzer room — the host needs to be able to check
   this on the venue's own Wi-Fi before a meeting, not discover it live. */
.room-status{
  display:flex; align-items:center; gap:.6em; margin-top:1em;
  font-size:clamp(11px,.85vw,13.5px); font-weight:600; color:var(--cream-dim);
}
.room-status i{
  width:9px; height:9px; flex:0 0 auto; border-radius:50%;
  background:var(--good); box-shadow:0 0 10px var(--good); transition:.3s;
}
.room-status.bad i{ background:var(--bad); box-shadow:0 0 10px var(--bad); }
.room-status.bad{ color:var(--bad-lit); }

/* ---- setup: join-as-player bar ---- */
.join-bar{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin-top:clamp(18px,2.6vh,28px); }
.join-label{ font-size:clamp(9px,.72vw,12px); letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-faint); font-weight:600; }
.join-bar input{ width:6.2ch; text-align:center; text-transform:uppercase;
  font-family:var(--display); font-weight:800; font-size:clamp(18px,1.6vw,24px); letter-spacing:.2em;
  color:var(--gold-lit); background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:6px; padding:.25em .3em; }
.join-bar input:focus{ outline:none; border-color:var(--gold); }
.join-bar input.bad{ border-color:var(--bad); }