/* This or That: shared look. Deliberately single dark theme (it's a game show on a shared screen). */
:root{
  --night:#0A1230; --deck:#132050; --rule:#26356E; --ink:#F3F5FB; --dim:#9AA6CC;
  --this:#E8635D; --that:#4C7DFF; --gold:#F4C247; --good:#4FD39A; --bad:#FF7A72; --fire:#FF8A3D;
  --heat1:#1A2C6B;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.logo{font-family:var(--display);font-weight:800;font-size:1.4rem;display:inline-flex;align-items:baseline;gap:.3em}
.logo .t{color:var(--this)} .logo .o{color:var(--dim);font-size:.8em} .logo .h{color:var(--that)}
.btn{border-radius:999px;padding:10px 20px;font-weight:700;background:var(--deck);border:1px solid var(--rule)}
.btn.go{background:var(--gold);color:#1B1400;border-color:var(--gold)}
.btn:disabled{opacity:.35;cursor:default}
.field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--dim);font-weight:700}
.field input,.field select{background:rgba(255,255,255,.07);border:1px solid var(--rule);border-radius:12px;padding:11px 12px;color:var(--ink);font:inherit;font-size:1rem}
.note{color:var(--dim);font-size:.85rem}
.err{color:var(--bad);font-weight:700;min-height:1.3em}
.tag{font-size:.72rem;padding:2px 10px;border-radius:999px;font-weight:800;letter-spacing:.08em}
.tag.speed{background:var(--fire);color:#2A0E00} .tag.gold{background:var(--gold);color:#2A2000} .tag.free{background:var(--good);color:#032015}
.conn{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));background:var(--bad);color:#2A0705;font-weight:800;padding:6px 14px;border-radius:999px;z-index:50;font-size:.85rem}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}