/* Base reset. The claude.ai Artifact skeleton supplies the same rules; the Firebase site needs them here. */
:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; padding: 0; }
img { max-width: 100%; }
[hidden]:not([hidden=until-found i]) { display: none !important; }

/* Layout: a TV "lodge window" — NWS alert crawl on top, weather radio, main stage, player strip along the bottom.
   Phones get a single-column controller. Committed single dark theme (night blizzard). */
:root {
  --night: #08121d;
  --night-2: #0f1e2e;
  --panel: #13263a;
  --line: #24405c;
  --snow: #eaf2f8;
  --mist: #94abc2;
  --ice: #8fd3f4;
  --ember: #ffa53d;
  --ember-dim: #7a4a1c;
  --led: #ff4b3a;
  --ok: #7ee2a8;
  --bad: #ff6f61;
  --lcd-bg: #1a1408;
  --lcd: #ffb347;
  --f-display: 'Big Shoulders Display', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --f-body: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-lcd: 'VT323', 'Courier New', monospace;
  --r: 6px;
  color-scheme: dark;
}
html, body { height: 100%; }
body {
  background: var(--night);
  color: var(--snow);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.4;
  overflow-x: hidden;
}
#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#frost {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0;
  transition: opacity 3s ease;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(214, 238, 255, .55), transparent 28%),
    radial-gradient(ellipse at 100% 0%, rgba(214, 238, 255, .45), transparent 26%),
    radial-gradient(ellipse at 0% 100%, rgba(214, 238, 255, .5), transparent 30%),
    radial-gradient(ellipse at 100% 100%, rgba(214, 238, 255, .55), transparent 32%);
}
#app { position: relative; z-index: 2; min-height: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ice); outline-offset: 2px; }
input, textarea, select {
  font: inherit; color: var(--snow); background: var(--night); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 12px; width: 100%; box-sizing: border-box;
}
textarea { resize: vertical; min-height: 64px; }
label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); margin-bottom: 4px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1; margin: 0; text-wrap: balance; letter-spacing: .01em; }
.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 40px; box-sizing: border-box; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.muted { color: var(--mist); }
.small { font-size: 14px; }
.eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }

.btn {
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r);
  padding: 12px 18px; font-weight: 600; letter-spacing: .02em; transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { border-color: var(--mist); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.hot { background: var(--ember); border-color: var(--ember); color: #1d1004; }
.btn.hot:hover { background: #ffb85f; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 7px 12px; font-size: 14px; }
.btn.danger { border-color: var(--bad); color: var(--bad); background: transparent; }

/* ---------- home ---------- */
.home { min-height: 100%; display: grid; align-content: center; gap: 28px; }
.mark { font-family: var(--f-display); font-weight: 900; font-size: clamp(64px, 17vw, 200px); line-height: .82; letter-spacing: -.01em;
  color: var(--snow); text-shadow: 0 0 30px rgba(143, 211, 244, .35); }
.mark span { display: inline-block; animation: drift 6s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(6px); opacity: .82; } }
.tag { font-size: clamp(18px, 2.4vw, 24px); max-width: 34ch; color: var(--mist); }
.home-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.choice { text-align: left; padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(19, 38, 58, .85); display: grid; gap: 6px; }
.choice b { font-family: var(--f-display); font-size: 28px; font-weight: 800; }
.choice span { color: var(--mist); font-size: 15px; }
.choice.primary { border-color: var(--ember); }
.choice.primary b { color: var(--ember); }
.rules { border-top: 1px solid var(--line); padding-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.rules h3 { font-size: 22px; margin-bottom: 6px; color: var(--ice); }
.rules p { margin: 0; color: var(--mist); font-size: 15px; }
.note { border-left: 3px solid var(--ember); padding: 8px 12px; background: rgba(255, 165, 61, .08); color: var(--snow); font-size: 15px; }

/* ---------- lobby ---------- */
.lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; }
@media (max-width: 820px) { .lobby { grid-template-columns: minmax(0, 1fr); } }
.panel { background: rgba(15, 30, 46, .92); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.panel h2 { font-size: 30px; }
.code { font-family: var(--f-lcd); font-size: clamp(72px, 12vw, 140px); line-height: .9; color: var(--lcd); background: var(--lcd-bg);
  border-radius: var(--r); padding: 10px 18px 4px; letter-spacing: .12em; text-shadow: 0 0 14px rgba(255, 179, 71, .55); text-align: center; }
.joinhead { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.joincode { flex: 1 1 220px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.lobbywrap { max-width: min(1600px, 94vw); }   /* the lobby is read from the couch: use the TV's width */
.qr { margin: 0; flex: 0 1 clamp(150px, 15vw, 320px); display: grid; gap: 6px; justify-items: center; }
.qr svg { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 24px rgba(143, 211, 244, .25); }
.qr figcaption { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.plist { display: grid; gap: 8px; }
.pitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); background: var(--night); border: 1px solid var(--line); }
.pitem .sw { width: 14px; height: 30px; border-radius: 3px; flex: none; }
.pitem .nm { font-weight: 700; font-size: 18px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem .kd { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.x { border: 0; background: transparent; color: var(--mist); font-size: 20px; padding: 2px 8px; }
.vipbadge { font-family: var(--f-lcd); font-size: 18px; letter-spacing: .12em; color: #1d1004; background: var(--lcd); border-radius: 4px; padding: 1px 8px 0; }
.btn.mkvip { padding: 3px 8px; font-size: 12px; opacity: .7; }
.btn.mkvip:hover, .btn.mkvip:focus-visible { opacity: 1; }
.vipbar { border: 1px solid var(--lcd); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; background: rgba(255, 179, 71, .06); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--night); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 15px; display: inline-flex; gap: 6px; align-items: center; }
.chip small { color: var(--mist); font-weight: 400; }
.chip[aria-pressed="true"] { border-color: var(--ice); background: rgba(143, 211, 244, .14); color: var(--snow); }
.toggle { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.toggle input { width: auto; }

/* ---------- host game (TV) ---------- */
.tv { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto auto 1fr auto; }
.alert { background: var(--led); color: #fff; font-family: var(--f-display); font-weight: 800; letter-spacing: .06em;
  font-size: clamp(14px, 1.6vw, 22px); overflow: hidden; white-space: nowrap; position: relative; display: flex; align-items: center; }
.alert .crawl { display: inline-block; padding: 7px 0; animation: crawl 28s linear infinite; padding-left: 100%; }
.alert.calm { background: #c98a1e; }
.alert.watch { background: #b06a12; }
@keyframes crawl { to { transform: translateX(-100%); } }
.alert .joinbox { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: var(--night); color: var(--lcd); font-family: var(--f-lcd); font-size: clamp(20px, 2.2vw, 30px); letter-spacing: .1em; }
.topbar { display: flex; gap: 14px; align-items: stretch; padding: 12px 16px 0; flex-wrap: wrap; }
.radio { flex: 1 1 420px; min-width: 0; display: flex; gap: 12px; align-items: center; background: #1b1d1f; border: 1px solid #34383c;
  border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 0 0 3px #121314; }
.radio .grill { width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: repeating-radial-gradient(circle, #3a3f44 0 2px, #1b1d1f 2px 5px); }
.radio .face { flex: 1; min-width: 0; }
.radio .call { font-size: 11px; letter-spacing: .18em; color: #8a9096; text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
.led { width: 9px; height: 9px; border-radius: 50%; background: #4a1410; box-shadow: none; flex: none; }
.led.on { background: var(--led); box-shadow: 0 0 8px var(--led); }
.lcd { font-family: var(--f-lcd); font-size: clamp(20px, 2vw, 28px); line-height: 1.05; color: var(--lcd); background: var(--lcd-bg);
  border-radius: 4px; padding: 6px 10px; margin-top: 4px; min-height: 2.2em; text-shadow: 0 0 8px rgba(255, 179, 71, .45); }
.hostctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pauseflag { font-family: var(--f-lcd); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .14em; color: #1d1004; background: var(--lcd);
  border-radius: 4px; padding: 2px 12px 0; box-shadow: 0 0 16px rgba(255, 179, 71, .5); }
.stage { padding: 18px 16px; display: grid; align-content: center; min-height: 0; }
.stage-in { max-width: 1200px; width: 100%; margin: 0 auto; display: grid; gap: clamp(12px, 2.4vh, 22px); }
.big { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, min(4.4vw, 6.4vh), 68px); line-height: 1.02; text-wrap: balance; }
.huge { font-family: var(--f-display); font-weight: 900; font-size: clamp(54px, min(9vw, 15vh), 150px); line-height: .9; text-wrap: balance; }
.sub { font-size: clamp(18px, 2vw, 28px); color: var(--mist); max-width: 46ch; }
.actno { font-family: var(--f-lcd); color: var(--lcd); font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .1em; }
.nws { font-family: var(--f-lcd); font-size: clamp(20px, 2vw, 28px); color: var(--ice); letter-spacing: .04em; }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .answers { grid-template-columns: minmax(0, 1fr); } }
.ans { display: flex; gap: 14px; align-items: center; padding: clamp(9px, 1.6vh, 14px) 16px; border-radius: var(--r); background: rgba(19, 38, 58, .92);
  border: 2px solid var(--line); font-size: clamp(18px, min(2.2vw, 3.6vh), 34px); font-weight: 700; min-width: 0; position: relative; }
.ans .lt { font-family: var(--f-display); font-weight: 900; font-size: 1.1em; width: 1.6em; height: 1.6em; display: grid; place-items: center;
  border-radius: 4px; background: var(--night); color: var(--ice); flex: none; }
.ans .tx { min-width: 0; overflow-wrap: anywhere; }
.ans.right { border-color: var(--ok); background: rgba(126, 226, 168, .14); }
.ans.right .lt { background: var(--ok); color: #062214; }
.ans.dim { opacity: .45; }
.ans .who { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #0b0b0b; flex: none; font-family: var(--f-body); }
.timer { height: 8px; border-radius: 4px; background: var(--panel); overflow: hidden; }
.timer i { display: block; height: 100%; background: var(--ice); width: 100%; transform-origin: left; }
.timer.low i { background: var(--led); }
.status { display: flex; justify-content: space-between; gap: 12px; color: var(--mist); font-size: clamp(15px, 1.5vw, 20px); flex-wrap: wrap; }
.out { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tagp { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--night); border: 1px solid var(--line); font-weight: 700; }
.tagp.fail { border-color: var(--bad); }
.tagp.pass { border-color: var(--ok); }
.tagp.froze { border-color: var(--ice); background: rgba(143, 211, 244, .16); }
.res { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.resc { border-radius: var(--r); padding: 12px 14px; background: rgba(19, 38, 58, .92); border: 2px solid var(--line); display: grid; gap: 4px; min-width: 0; }
.resc .n { font-weight: 800; font-size: 20px; display: flex; gap: 8px; align-items: center; min-width: 0; }
.resc .v { font-family: var(--f-lcd); font-size: 30px; color: var(--lcd); }
.resc.pass { border-color: var(--ok); }
.resc.fail { border-color: var(--bad); }
.resc.froze { border-color: var(--ice); background: linear-gradient(135deg, rgba(214, 238, 255, .22), rgba(19, 38, 58, .92)); }
.verdict { font-family: var(--f-display); font-weight: 900; letter-spacing: .06em; font-size: 15px; text-transform: uppercase; }
.verdict.pass { color: var(--ok); } .verdict.fail { color: var(--bad); } .verdict.froze { color: var(--ice); }
.crates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .crates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crate { border-radius: var(--r); padding: 16px 10px; text-align: center; background: rgba(19, 38, 58, .92); border: 2px solid var(--line);
  font-family: var(--f-display); font-weight: 800; font-size: clamp(18px, 2vw, 30px); display: grid; gap: 6px; justify-items: center; }
.crate.bad { border-color: var(--bad); background: repeating-linear-gradient(45deg, rgba(234, 242, 248, .14) 0 8px, rgba(19, 38, 58, .92) 8px 16px); }
.crate.good { border-color: var(--ok); }
.icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.icon { aspect-ratio: 1; max-width: 100%; border-radius: var(--r); background: rgba(19, 38, 58, .92); border: 2px solid var(--line); display: grid; place-items: center; color: var(--snow); position: relative; }
.icon svg { width: 58%; height: 58%; }
.icon .ix { position: absolute; top: 6px; left: 10px; font-family: var(--f-lcd); font-size: 22px; color: var(--lcd); }
.icon.ask { border-color: var(--ember); }
.icon.hid { color: transparent; background: repeating-linear-gradient(-45deg, rgba(234, 242, 248, .18) 0 6px, rgba(19, 38, 58, .92) 6px 12px); }
.pop { animation: pop .5s ease both; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* finale road */
.road { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; padding-top: 6px; }
.mile { min-height: clamp(64px, 11vh, 96px); border-radius: 4px; background: rgba(19, 38, 58, .92); border: 1px solid var(--line); display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 3px; padding: 6px 2px; position: relative; min-width: 0; }
.mile .mn { font-family: var(--f-lcd); font-size: 18px; color: var(--mist); }
.mile.plow { border-color: var(--ember); background: rgba(255, 165, 61, .14); }
.mile.plow .mn { color: var(--ember); }
.mile.buried { background: repeating-linear-gradient(-45deg, rgba(234, 242, 248, .55) 0 7px, rgba(234, 242, 248, .3) 7px 14px); border-color: var(--snow); }
.mile.buried .mn { color: var(--night); }
.tokens { display: flex; flex-direction: column-reverse; gap: 2px; align-items: center; }
.tokens .dot { width: 24px; height: 24px; font-size: 11px; }
@media (max-width: 560px) { .tokens .dot { width: 17px; height: 17px; font-size: 9px; } .mile { min-height: 74px; } .mile .mn { font-size: 14px; } }
.mvs { display: flex; gap: 8px; flex-wrap: wrap; }
.mv { font-family: var(--f-lcd); font-size: 24px; padding: 2px 10px; border-radius: 4px; background: var(--night); border: 1px solid var(--line); display: inline-flex; gap: 6px; align-items: center; }
.mv.up { color: var(--ok); } .mv.dn { color: var(--bad); }

/* player strip */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 0 16px 14px; }
.pc { border-radius: var(--r); background: rgba(15, 30, 46, .95); border: 1px solid var(--line); padding: 8px 10px; display: grid; gap: 2px; position: relative; overflow: hidden; min-width: 0; }
.pc::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--pc); }
.pc .nm { font-weight: 800; font-size: clamp(16px, 1.6vw, 22px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.pc .sc { font-family: var(--f-lcd); font-size: clamp(20px, 1.8vw, 26px); color: var(--lcd); line-height: 1; }
.pc .ht { display: flex; gap: 3px; align-items: center; min-height: 20px; font-size: 13px; color: var(--ice); letter-spacing: .06em; font-weight: 700; }
.pc .ht svg { width: 18px; height: 18px; }
.pc .chk { position: absolute; right: 8px; top: 10px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); }
.pc .chk.on { background: var(--ok); border-color: var(--ok); }
.pc.frozen { background: linear-gradient(160deg, rgba(214, 238, 255, .32), rgba(15, 30, 46, .95) 70%); border-color: var(--ice); }
.pc.outside { border-color: var(--bad); }
.pc.gone { opacity: .5; }
.flame.lit { fill: var(--ember); } .flame.cold { fill: var(--line); }

/* local pass-and-play pad */
.pad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: rgba(8, 18, 29, .97); border-top: 2px solid var(--ember);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 72vh; overflow-y: auto; box-sizing: border-box; }
.pad-in { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; }

/* ---------- phone controller ---------- */
.phone { max-width: 560px; margin: 0 auto; padding-inline: 16px; padding-block: 14px 28px; display: grid; gap: 16px; box-sizing: border-box; }
.me { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: rgba(15, 30, 46, .95); border: 1px solid var(--line); }
.me .sw { width: 12px; height: 34px; border-radius: 3px; }
.me .nm { font-weight: 800; font-size: 20px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .sc { font-family: var(--f-lcd); font-size: 26px; color: var(--lcd); }
.ctl { display: grid; gap: 10px; }
.cbtn { display: flex; gap: 12px; align-items: center; text-align: left; padding: 16px; border-radius: var(--r); border: 2px solid var(--line);
  background: rgba(19, 38, 58, .95); font-weight: 700; font-size: 20px; min-height: 64px; width: 100%; }
.cbtn .lt { font-family: var(--f-display); font-weight: 900; width: 34px; height: 34px; border-radius: 4px; display: grid; place-items: center; background: var(--night); color: var(--ice); flex: none; }
.cbtn[aria-pressed="true"] { border-color: var(--ember); background: rgba(255, 165, 61, .16); }
.cbtn[aria-pressed="true"] .lt { background: var(--ember); color: #1d1004; }
.cbtn:disabled { opacity: .5; }
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cicon { aspect-ratio: 1; border-radius: var(--r); border: 2px solid var(--line); background: rgba(19, 38, 58, .95); display: grid; place-items: center; color: var(--snow); }
.cicon svg { width: 52%; height: 52%; }
.numrow { display: flex; gap: 8px; }
.numrow input { font-family: var(--f-lcd); font-size: 40px; text-align: center; padding: 6px; }
.numrow .unit { align-self: center; font-family: var(--f-lcd); font-size: 30px; color: var(--mist); min-width: 2ch; }
.locked { text-align: center; padding: 26px 12px; border-radius: var(--r); border: 1px dashed var(--line); display: grid; gap: 6px; }
.locked b { font-family: var(--f-display); font-size: 34px; font-weight: 800; }
.qtext { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1.05; text-wrap: balance; }
.bigmsg { font-family: var(--f-display); font-weight: 900; font-size: 46px; line-height: .95; text-wrap: balance; }
.thaw { display: inline-flex; gap: 4px; vertical-align: middle; }
.thaw i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ice); display: inline-block; }
.thaw i.on { background: var(--ice); }

/* ---------- workshop ---------- */
.decklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dcard { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: rgba(15, 30, 46, .95); display: grid; gap: 8px; align-content: start; min-width: 0; }
.dcard h3 { font-size: 26px; }
.qitem { border: 1px solid var(--line); border-radius: var(--r); background: var(--night); }
.qitem > button.qh { width: 100%; text-align: left; background: transparent; border: 0; padding: 10px 12px; display: flex; gap: 10px; align-items: baseline; }
.qitem .qn { font-family: var(--f-lcd); color: var(--lcd); font-size: 20px; flex: none; }
.qitem .qb { padding: 0 12px 12px; display: grid; gap: 8px; }
.arow { display: flex; gap: 8px; align-items: center; }
.arow input[type="radio"], .arow input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--ok); }
.gen { border: 1px solid var(--ember-dim); background: rgba(255, 165, 61, .06); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; }
.sec h2 { font-size: 26px; margin-bottom: 8px; }

/* ---------- the storm (frozen players' gusts) ---------- */
.gustbanner, .stormvote { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--r);
  border: 1px solid var(--ice); background: rgba(143, 211, 244, .1); font-size: clamp(16px, 1.6vw, 22px); }
.gustbanner svg, .stormvote svg { width: 34px; height: 34px; flex: none; color: var(--ice); }
.stormbox { display: grid; gap: 8px; padding: 12px; border-radius: var(--r); border: 1px solid var(--ice); background: rgba(143, 211, 244, .08); }
#ctlslot, #padctl { position: relative; }
.iceover { position: absolute; inset: -6px; z-index: 3; border: 0; border-radius: var(--r); display: grid; place-content: center; gap: 6px; text-align: center; color: #08121d;
  --ice: 1; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, calc(.95 * var(--ice))), rgba(200, 230, 250, calc(.92 * var(--ice))) 60%),
  repeating-linear-gradient(60deg, rgba(255, 255, 255, .3) 0 2px, transparent 2px 9px); backdrop-filter: blur(calc(8px * var(--ice))); }
.iceover b { font-family: var(--f-display); font-size: 40px; }
.iceover span { font-weight: 700; }

/* ---------- new gauntlets: phone controls ---------- */
.shovel { display: grid; gap: 12px; justify-items: center; text-align: center; }
.shovel-count { font-family: var(--f-lcd); font-size: 84px; line-height: 1; color: var(--lcd); text-shadow: 0 0 14px rgba(255, 179, 71, .5); min-height: 1em; }
.dig { width: min(80vw, 260px); aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--ember); color: #1d1004; font-family: var(--f-display); font-weight: 900; font-size: 54px;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; box-shadow: 0 8px 0 #b86a14; }
.dig:disabled { background: var(--panel); color: var(--mist); box-shadow: none; font-size: 26px; }
.dig.bump { animation: bump .12s ease; }
@keyframes bump { 50% { transform: translateY(4px) scale(.97); box-shadow: 0 4px 0 #b86a14; } }
.shovel .timer { width: 100%; }
.fishhole { position: relative; width: 100%; aspect-ratio: 1.3; max-height: 52vh; border-radius: 50%; border: 10px solid #dbeefc; cursor: pointer;
  background: radial-gradient(ellipse at 50% 40%, #1d4566, #0a1a2a 70%); box-shadow: inset 0 0 40px rgba(0, 0, 0, .6), 0 0 0 4px rgba(143, 211, 244, .3); overflow: hidden; touch-action: manipulation; }
.fishhole .line, .icehole .line { position: absolute; left: 50%; top: 0; height: 42%; width: 2px; background: rgba(234, 242, 248, .6); }
.fishhole .bobber, .icehole .bobber { position: absolute; left: 50%; top: 42%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
  background: linear-gradient(#ff5a4a 50%, #f4f4f4 50%); animation: bob 1.6s ease-in-out infinite; }
.fishhole .bobber.dip { animation: dip .2s ease-in forwards; }
.fishhole .bobber.spooked { animation: spook .4s ease; }
@keyframes bob { 50% { transform: translateY(4px); } }
@keyframes dip { to { transform: translateY(28px) scale(.55); opacity: .5; } }
@keyframes spook { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.fishmsg { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font-family: var(--f-display); font-weight: 900; font-size: 34px; color: var(--snow); }
.confgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cbtn.conf { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding: 10px 12px; font-size: 16px; }
.cbtn.conf small { font-weight: 400; color: var(--mist); font-size: 13px; }

/* ---------- new gauntlets: the TV ---------- */
.conflegend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.conflegend div { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r); background: rgba(19, 38, 58, .92); border: 1px solid var(--line); font-size: clamp(14px, 1.3vw, 18px); }
.conflegend span { font-family: var(--f-lcd); color: var(--lcd); font-size: 1.3em; }
.conflegend small { color: var(--mist); }
.icehole { position: relative; width: min(40vw, 320px); aspect-ratio: 1.3; margin: 0 auto; border-radius: 50%; border: 12px solid #dbeefc; background: radial-gradient(ellipse at 50% 40%, #1d4566, #0a1a2a 70%); overflow: hidden; }
.driftwall { position: relative; height: clamp(70px, 14vh, 130px); overflow: hidden; border-radius: var(--r); background: linear-gradient(#13263a, #0f1e2e); }
.driftwall span { position: absolute; bottom: -40%; width: 60%; height: 120%; border-radius: 50%; background: #eaf2f8; animation: heave 1.4s ease-in-out infinite; }
.driftwall span:nth-child(1) { left: -10%; } .driftwall span:nth-child(2) { left: 25%; animation-delay: -.5s; background: #dbeefc; } .driftwall span:nth-child(3) { left: 60%; animation-delay: -.9s; }
@keyframes heave { 50% { transform: translateY(-14%); } }

/* Weather Spotter's window. Particles are <i> elements; each kind falls its own way. */
.spotwin { position: relative; height: clamp(180px, 34vh, 340px); border-radius: 6px; overflow: hidden; border: 10px solid #3a2a1c;
  background: linear-gradient(#41566b, #8ea3b5); box-shadow: inset 0 0 0 2px #1d140c; }
.spotwin::before, .spotwin::after { content: ""; position: absolute; z-index: 2; background: #3a2a1c; }
.spotwin::before { left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; }
.spotwin::after { top: 45%; left: 0; right: 0; height: 8px; }
.spotwin .fall { position: absolute; inset: 0; }
.spotwin .fall i { position: absolute; top: -10%; display: block; animation-duration: var(--dur, 1s) !important; animation-delay: calc(var(--f, 0) * var(--dur, 1s) * -1) !important; }
.spotwin .sill { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: #5a4330; z-index: 1; }
.spotwin .branch { position: absolute; left: -5%; right: 35%; bottom: 26%; height: 9px; transform: rotate(-6deg); background: #2b1d12; border-radius: 6px; z-index: 1; }
.spotwin .branch span { position: absolute; inset: -4px -2px auto; height: 0; }
.spotwin.foggy .fall { filter: blur(1.5px); opacity: .6; }
.spotwin.foggy { background: linear-gradient(#9fb2c2, #c9d6e0); }
.spotlabel { position: absolute; z-index: 3; left: 12px; top: 10px; font-family: var(--f-display); font-weight: 900; font-size: 26px; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.spot-snow i { width: 7px; height: 7px; border-radius: 50%; background: #fff; --dur: 7s; animation: snowfall 7s linear infinite; }
.spot-snow i:nth-child(3n) { width: 4px; height: 4px; --dur: 9s; } .spot-snow i:nth-child(3n+1) { --dur: 5.5s; }
.spot-snow .sill, .spot-snow .branch { box-shadow: 0 -6px 0 #f4f8fb; }
@keyframes snowfall { to { transform: translate(30px, 380px); } }
.spot-rain i, .spot-frz i { width: 2px; height: 22px; background: linear-gradient(transparent, #d6e9f8); --dur: .7s; animation: rainfall .7s linear infinite; }
.spot-rain i:nth-child(2n), .spot-frz i:nth-child(2n) { --dur: .9s; }
@keyframes rainfall { to { transform: translate(-40px, 380px) rotate(8deg); } }
.spot-frz .branch span { height: 12px; background: linear-gradient(rgba(220, 240, 255, .85), rgba(170, 215, 245, .5)); border-radius: 6px; box-shadow: 0 0 10px rgba(200, 235, 255, .9); animation: glaze 6s ease-out infinite; }
.spot-frz .branch span::after { content: ""; position: absolute; left: 10%; right: 10%; top: 10px; height: 18px; background: repeating-linear-gradient(90deg, rgba(210, 238, 255, .85) 0 3px, transparent 3px 14px); clip-path: polygon(0 0, 100% 0, 95% 100%, 85% 0, 75% 90%, 65% 0, 52% 100%, 40% 0, 28% 80%, 18% 0, 8% 100%); }
@keyframes glaze { from { opacity: .3; } to { opacity: 1; } }
.spot-sleet i { width: 4px; height: 4px; border-radius: 50%; background: #f0f8ff; box-shadow: 0 0 2px #9cc; --dur: 1.15s; animation: pellet 1.15s cubic-bezier(.4, 0, 1, 1) infinite; }
.spot-sleet i:nth-child(2n) { --dur: 1.35s; }
@keyframes pellet { 85% { transform: translateY(300px); } 92% { transform: translate(6px, 285px); } 100% { transform: translate(10px, 300px); } }
.spot-hail i { border-radius: 40% 55% 45% 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9d9e6); --dur: .9s; animation: hailfall .9s cubic-bezier(.5, 0, 1, 1) infinite; }
.spot-hail i:nth-child(2n) { --dur: 1.1s; }
@keyframes hailfall { 80% { transform: translateY(300px); } 88% { transform: translate(-10px, 262px); } 100% { transform: translate(-16px, 300px); } }
.spot-hail .fall::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; animation: lightning 3.2s steps(1) infinite; }
@keyframes lightning { 0%, 88%, 92%, 100% { opacity: 0; } 89%, 93% { opacity: .55; } }

/* ---------- teams and awards ---------- */
.teamtag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font: 700 12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; border: 1px solid; background: transparent; vertical-align: middle; }
.teamtag.team0 { color: var(--ice); border-color: var(--ice); } .teamtag.team1 { color: var(--ember); border-color: var(--ember); }
button.teamtag { cursor: pointer; }
.teamresult { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.teamscore { display: grid; padding: 10px 18px; border-radius: var(--r); border: 2px solid var(--line); background: rgba(19, 38, 58, .92); }
.teamscore b { font-family: var(--f-lcd); font-size: 44px; line-height: 1; color: var(--lcd); }
.teamscore.team0.won { border-color: var(--ice); box-shadow: 0 0 18px rgba(143, 211, 244, .4); }
.teamscore.team1.won { border-color: var(--ember); box-shadow: 0 0 18px rgba(255, 165, 61, .4); }
.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.award { display: grid; gap: 6px; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--lcd); background: rgba(255, 179, 71, .07); }
.award .eyebrow { color: var(--lcd); }

/* ---------- animation ---------- */
.dot.dropin { animation: dropin .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes dropin { from { transform: translateY(-16px) scale(.3); opacity: 0; } }
.ans.right { animation: rightglow 1.2s ease 2; }
@keyframes rightglow { 50% { box-shadow: 0 0 0 4px rgba(126, 226, 168, .35), 0 0 28px rgba(126, 226, 168, .5); } }
.pc.frozen::after, .resc.froze::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; animation: frostin 1.4s ease-out both;
  background: radial-gradient(circle at 0 0, rgba(235, 247, 255, .55), transparent 45%), radial-gradient(circle at 100% 100%, rgba(235, 247, 255, .45), transparent 50%),
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 7px); }
.resc { position: relative; }
@keyframes frostin { from { opacity: 0; clip-path: circle(0 at 0 0); } to { opacity: 1; clip-path: circle(150% at 0 0); } }
.mile.buried { animation: pileup .8s ease-out both; }
@keyframes pileup { from { background-size: 100% 0; filter: brightness(.6); } }
.mile.plow { justify-content: space-between; }
.plowtruck { width: 92%; max-width: 70px; height: auto; }
.plowtruck .beacon { fill: #ffb347; animation: beacon .8s steps(2) infinite; }
@keyframes beacon { 50% { fill: #5a3a10; } }
.fog { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 4s ease; overflow: hidden; }
.fog.lvl1 { opacity: .14; } .fog.lvl2 { opacity: .4; }
.fog i { position: absolute; top: -20%; left: -60%; width: 220%; height: 140%; animation: fogdrift 22s linear infinite;
  background: radial-gradient(ellipse 30% 22% at 20% 40%, #f2f7fb, transparent), radial-gradient(ellipse 26% 30% at 55% 65%, #e6eef5, transparent), radial-gradient(ellipse 34% 24% at 85% 35%, #f6fafd, transparent); }
.fog i + i { animation-duration: 14s; animation-direction: reverse; opacity: .7; top: -5%; }
@keyframes fogdrift { to { transform: translateX(30%); } }
.phone.frozen::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4; animation: frostin 1.6s ease-out both;
  box-shadow: inset 0 0 60px 18px rgba(214, 238, 255, .55); }
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 6; animation: flash .8s ease-out both; }
.flash.ok { background: rgba(126, 226, 168, .35); } .flash.bad { background: rgba(255, 111, 97, .35); } .flash.ice { background: rgba(214, 238, 255, .6); }
@keyframes flash { to { opacity: 0; } }
.thawcrack { position: fixed; inset: 0; pointer-events: none; z-index: 6; animation: thaw 1.2s ease-out both;
  background: repeating-conic-gradient(from 10deg at 50% 45%, rgba(255, 255, 255, .85) 0 1deg, transparent 1deg 29deg), radial-gradient(circle at 50% 45%, rgba(255, 220, 170, .55), transparent 60%); }
@keyframes thaw { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
.locked { animation: thunk .25s ease; }
@keyframes thunk { 40% { transform: scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .mark span, .alert .crawl, .pop { animation: none; }
  .alert .crawl { padding-left: 16px; }
  /* In the window, how things fall is the clue, so slow it down instead of stopping it. */
  .spotwin .fall i { --dur: 5s !important; }
  .spot-snow .fall i { --dur: 12s !important; }
  .fog i, .driftwall span, .fishhole .bobber:not(.dip), .dot.dropin, .ans.right, .locked, .plowtruck .beacon { animation: none; }
  .flash, .thawcrack { display: none; }
}