/* Layout: a one-screen game console pinned to the visible viewport (so the keyboard never
   pushes the page around) — top bar, a scrolling stage, and the action pads at the bottom.
   Text is only typed on the home screen and in a sheet pinned near the top. Single dark theme by choice. */
:root{
  --board:#16112a; --panel:#231b3f; --panel2:#120d24; --line:#3a2f63;
  --ink:#f3effc; --mute:#a99fcb;
  --card:#fbf8ff; --cardink:#1b1430;
  --taboo:#ff3d5a; --A:#3fb6ff; --B:#ff7ac6; --ok:#3ddc97; --amber:#ffc14d;
  --display:"Bowlby One","Arial Black",Impact,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --vvh:100dvh; --vvt:0px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--board);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;overscroll-behavior:none}
body{background-image:radial-gradient(ellipse at 50% -20%,#2c2152 0%,transparent 60%);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
button:disabled{opacity:.45;cursor:default}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,.disp{font-family:var(--display);font-weight:400;letter-spacing:.01em;text-wrap:balance;margin:0}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--mute);font-weight:800}
.num{font-variant-numeric:tabular-nums}
.hint{color:var(--mute);font-size:14px;margin:0}
.center{text-align:center}

/* shell pinned to the visual viewport */
#shell{position:fixed;left:0;right:0;top:var(--vvt);height:var(--vvh);display:flex;flex-direction:column;
  max-width:620px;margin:0 auto;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
#bar{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px 6px}
#bar:empty{display:none}
#banner{flex:none;margin:0 16px 6px;background:var(--amber);color:#2a1a00;font-weight:800;font-size:14px;padding:6px 10px;border-radius:10px;text-align:center}
#view{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 16px 12px;display:flex;flex-direction:column;gap:14px}
#below{flex:none;padding:8px 16px 10px}
#below:empty{display:none}

/* bar */
.code{font-family:var(--display);font-size:20px;letter-spacing:.08em;background:var(--panel);padding:4px 10px;border-radius:10px}
.bar-sp{flex:1}
.iconbtn{background:var(--panel);border-radius:10px;padding:8px 12px;font-weight:800;font-size:14px;white-space:nowrap}

/* score strip */
.score{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.team{background:var(--panel);border-radius:14px;padding:8px 12px;display:flex;flex-direction:column;border:2px solid transparent;min-width:0}
.team.A{--t:var(--A)} .team.B{--t:var(--B);text-align:right}
.team.on{border-color:var(--t);box-shadow:0 0 0 4px color-mix(in srgb,var(--t) 18%,transparent)}
.team .tn{font-family:var(--display);color:var(--t);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team .pts{font-family:var(--display);font-size:34px;line-height:1}
.vs{align-self:center;color:var(--mute);font-weight:800;font-size:12px;text-align:center}
.vs b{display:block;color:var(--ink);font-size:15px}
.cA{color:var(--A)} .cB{color:var(--B)}

.panel{background:var(--panel);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>.btn{flex:1 1 auto}
.row.stretch{align-items:stretch}

/* buttons */
.btn{border-radius:12px;padding:13px 16px;font-weight:800;background:#3a2f63;text-align:center}
.btn.primary{background:var(--amber);color:#2a1a00}
.btn.big{font-family:var(--display);font-weight:400;font-size:22px;padding:16px;background:var(--amber);color:#2a1a00;width:100%}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--mute);padding:9px 12px;font-size:14px}
.btn.danger{background:var(--taboo);color:#fff}
.btn.wa{background:#25d366;color:#05311a}
.link{color:var(--amber);font-weight:800;text-decoration:underline;padding:4px}

/* inputs */
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute);font-weight:600}
input{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink);font:inherit;font-size:16px;width:100%;min-width:0}
input.codein{font-family:var(--display);letter-spacing:.3em;text-transform:uppercase;font-size:22px;text-align:center}

/* segmented controls */
.seg{display:flex;background:var(--panel2);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;padding:9px 4px;border-radius:9px;font-weight:800;font-size:14px;color:var(--mute)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--board)}
.setrow{display:flex;flex-direction:column;gap:6px}

/* hero */
.hero{display:flex;flex-direction:column;gap:6px;padding-top:12px}
.hero h1{font-size:clamp(40px,13vw,64px);line-height:.95}
.hero h1 span{color:var(--taboo)}
.minicard{display:inline-flex;flex-direction:column;background:var(--card);color:var(--cardink);border-radius:12px;overflow:hidden;width:150px;transform:rotate(-4deg);box-shadow:0 8px 20px #0007;align-self:flex-end;margin-top:-20px}
.minicard b{background:var(--cardink);color:var(--card);font-family:var(--display);text-align:center;padding:6px}
.minicard i{background:var(--taboo);color:#fff;font-style:normal;font-family:var(--display);font-size:9px;letter-spacing:.3em;text-align:center}
.minicard span{font-weight:800;font-size:13px;text-align:center;padding:2px 0;border-bottom:1px dashed #d8d0ec}

/* teams in lobby */
.teams{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tcol{background:var(--panel2);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0;border-top:4px solid var(--t)}
.tcol.A{--t:var(--A)} .tcol.B{--t:var(--B)}
.tcol h3{margin:0;font-family:var(--display);font-weight:400;font-size:18px;color:var(--t);display:flex;gap:6px;align-items:center;justify-content:space-between}
.tcol h3 button{font-family:var(--body);font-size:12px;color:var(--mute);font-weight:800}
.pl{display:flex;align-items:center;gap:6px;font-weight:600;min-width:0}
.pl .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pl.me .nm{font-weight:800;color:var(--amber)}
.host{color:var(--amber);font-size:13px;flex:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.dot.off{background:#5a5080}
.tag{font-size:10px;font-weight:800;background:var(--line);padding:2px 6px;border-radius:99px;letter-spacing:.06em}
.pl button{font-size:12px;font-weight:800;color:var(--mute);padding:4px}

/* card */
.tcard{background:var(--card);color:var(--cardink);border-radius:20px;overflow:hidden;box-shadow:0 14px 40px #0008}
.tcard .top{background:var(--cardink);color:var(--card);padding:14px 16px;text-align:center}
.tcard .top .eyebrow{color:#b9aee0}
.tcard .word{font-family:var(--display);font-size:clamp(26px,8.5vw,40px);line-height:1.05;margin-top:2px;overflow-wrap:anywhere}
.tcard .stripe{background:var(--taboo);color:#fff;font-family:var(--display);text-align:center;font-size:12px;letter-spacing:.3em;padding:3px 0}
.tcard ul{list-style:none;margin:0;padding:8px 16px 12px;display:flex;flex-direction:column}
.tcard li{font-weight:800;font-size:clamp(18px,5vw,22px);text-align:center;padding:5px 0;border-bottom:1px dashed #d8d0ec}
.tcard li:last-child{border-bottom:0}
.deal{animation:deal .28s ease-out}
@keyframes deal{from{transform:translateY(14px) rotate(-2deg);opacity:.2}to{transform:none;opacity:1}}

/* timer */
.timer{display:flex;align-items:center;gap:10px}
.timer .t{font-family:var(--display);font-size:28px;min-width:2.4ch;text-align:right}
.bar{flex:1;height:10px;background:#0006;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .25s linear}
.timer.low .t{color:var(--taboo)} .timer.low .bar i{background:var(--taboo)}
.turnhead{display:flex;justify-content:space-between;gap:8px}

/* pads */
.pads{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.pad{border-radius:16px;padding:14px 6px;font-family:var(--display);font-size:18px;display:flex;flex-direction:column;align-items:center;gap:2px}
.pad small{font-family:var(--body);font-weight:600;font-size:12px;opacity:.85}
.pad:active{transform:scale(.96)}
.pad.ok{background:var(--ok);color:#06281a} .pad.skip{background:#4a3f74} .pad.no{background:var(--taboo);color:#fff}
.buzzer{width:100%;border-radius:22px;padding:22px 0;background:radial-gradient(circle at 50% 35%,#ff6b82,var(--taboo) 60%,#b3142d);color:#fff;font-family:var(--display);font-size:clamp(30px,10vw,48px);box-shadow:0 8px 0 #7d0c1f,0 14px 24px #0008}
.buzzer:active{transform:translateY(5px);box-shadow:0 3px 0 #7d0c1f}
.guessbig{font-family:var(--display);font-size:clamp(40px,13vw,64px);text-align:center;line-height:1}

/* review + stats */
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.log li{display:flex;align-items:center;gap:10px;background:var(--panel2);border-radius:10px;padding:8px 10px}
.log li span{flex:1;font-weight:800;min-width:0;overflow-wrap:anywhere}
.chip{font-size:12px;font-weight:800;padding:5px 9px;border-radius:99px;letter-spacing:.04em;white-space:nowrap}
.chip.ok{background:var(--ok);color:#06281a}.chip.skip{background:#4a3f74}.chip.taboo{background:var(--taboo);color:#fff}
.up{font-family:var(--display);font-size:clamp(26px,8vw,38px);line-height:1.1}
.tablewrap{overflow-x:auto}
table.stats{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.stats th{color:var(--mute);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.08em;text-align:right;padding:4px 6px}
table.stats td{text-align:right;padding:6px;border-top:1px solid var(--line)}
table.stats th:first-child,table.stats td:first-child{text-align:left}
.confirm{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--panel2);border-radius:12px;padding:10px}
.confirm>span{flex:1 1 100%}
.menu{display:flex;flex-direction:column;gap:8px}
.qr{background:#fff;border-radius:12px;padding:10px;align-self:center;line-height:0}
.qr svg{width:200px;height:200px;max-width:100%}

/* sheet (name editing) — pinned near the top so the keyboard never covers it */
#sheet{position:fixed;inset:0;background:#0009;z-index:20;display:flex;justify-content:center;align-items:flex-start;padding:calc(var(--vvt) + 12vh) 16px 16px}
#sheetForm{background:var(--panel);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px}
#sheetForm label{font-weight:800}

#toast{position:fixed;left:50%;top:calc(var(--vvt) + 12px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--ink);color:var(--board);padding:10px 16px;border-radius:12px;font-weight:800;max-width:calc(100% - 32px);text-align:center;z-index:30}
#flash{position:fixed;inset:0;background:var(--taboo);opacity:0;pointer-events:none;z-index:25}
#flash.go{animation:flash .5s ease-out}
#flash.good{background:var(--ok)}
@keyframes flash{0%{opacity:.6}100%{opacity:0}}

@media (min-width:700px){ #shell{border-left:1px solid #ffffff0d;border-right:1px solid #ffffff0d} }
@media (prefers-reduced-motion:reduce){.deal,#flash.go{animation:none}.bar i{transition:none}}