/* Tuned In: an old valve radio. Walnut cabinet, backlit dial glass, brass knobs, speaker cloth, preset keys. */
:root {
  --walnut: #3a2316;
  --walnut-d: #22140b;
  --walnut-l: #5a3820;
  --bakelite: #1c130d;
  --glass: #f6e7bf;
  --glass-d: #e3c684;
  --ink: #23170f;
  --ink-2: #6a5440;
  --cream: #f3e6c8;
  --needle: #c8331f;
  --brass: #d1a85a;
  --brass-d: #8c6526;
  --brass-l: #f0d395;
  --eye: #4fd27e;
  --serif: "Fraunces", Georgia, serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body.radio {
  min-height: 100dvh;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  background-color: var(--walnut);
  background-image:
    repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(87deg, rgba(255, 214, 160, 0.04) 0 1px, transparent 1px 29px),
    repeating-linear-gradient(93deg, rgba(0, 0, 0, 0.05) 0 7px, transparent 7px 61px),
    linear-gradient(180deg, var(--walnut-l), var(--walnut) 35%, var(--walnut-d));
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--brass-l); }
.hidden { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ---------- logo ---------- */
.ti-logo {
  display: inline-flex; align-items: center; gap: 0.3em;
  color: var(--brass-l); text-decoration: none;
  font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 1.55rem;
  letter-spacing: -0.01em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.ti-logo .eye { width: 1.25em; height: 1.25em; }

/* ---------- plates (the cream panels) ---------- */
.plate {
  background: var(--cream);
  color: var(--ink);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 2px rgba(60, 35, 15, 0.12), 0 3px 0 var(--walnut-d), 0 12px 26px rgba(0, 0, 0, 0.35);
}
.plate h2 { font-family: var(--serif); font-weight: 800; font-size: 1.75rem; line-height: 1.08; margin: 0 0 8px; letter-spacing: -0.01em; }
.plate h3 { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem; margin: 14px 0 8px; color: var(--ink-2); }
.plate p { margin: 0 0 10px; }
.plate p:last-child { margin-bottom: 0; }
.kick {
  font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.82rem; color: var(--ink-2); margin: 0 0 4px;
}
.on-wood .kick, .kick.on-wood { color: var(--brass); }
.muted { color: var(--ink-2); }
.small { font-size: 0.88em; }

/* ---------- controls ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05rem;
  padding: 0.65em 1.1em; min-height: 48px; border-radius: 6px;
  color: var(--ink); background: linear-gradient(#fbf1d8, #e3cfa3);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 3px 0 var(--walnut-d);
  transition: transform 0.06s;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
}
.btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 1px 0 var(--walnut-d); }
.btn:focus-visible { outline: 3px solid var(--eye); outline-offset: 2px; }
.btn.brass { background: linear-gradient(var(--brass-l), var(--brass) 55%, var(--brass-d)); color: #2a1a0c; }
.btn.red { background: linear-gradient(#e0583f, var(--needle)); color: #fff4e2; }
.btn.ghost { background: transparent; color: var(--brass-l); box-shadow: inset 0 0 0 2px var(--brass-d); }
.plate .btn.ghost { color: var(--ink-2); box-shadow: inset 0 0 0 2px #c9b07c; }
.btn.wide { width: 100%; }
.btn.big { font-size: 1.3rem; min-height: 62px; }
.btn.small { min-height: 36px; font-size: 0.85rem; padding: 0.35em 0.8em; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.seg { display: inline-flex; border-radius: 6px; overflow: hidden; box-shadow: 0 3px 0 var(--walnut-d); }
.seg .btn { border-radius: 0; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18); min-width: 52px; }
.seg .btn[aria-pressed="true"] { background: linear-gradient(var(--brass-l), var(--brass)); transform: translateY(2px); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.25); }

input[type="text"] {
  width: 100%; font: inherit; font-size: 1.1rem; padding: 0.65em 0.8em; border-radius: 6px;
  border: 2px solid #b79d6c; background: #fffaf0; color: var(--ink);
}
input[type="text"]:focus { outline: none; border-color: var(--needle); }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
input.code-input { font-family: var(--cond); font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; text-align: center; font-size: 1.6rem; }
label { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; display: block; margin: 12px 0 6px; color: var(--ink-2); }

.chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.12em 0.55em; border-radius: 4px; background: var(--c); color: #fff;
}
.score { font-family: var(--cond); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- the dial ---------- */
.glass {
  position: relative;
  border-radius: 8px;
  padding: 4px 2px;
  background: radial-gradient(130% 160% at 50% 35%, #fff4d2 0%, var(--glass) 42%, var(--glass-d) 100%);
  box-shadow:
    inset 0 0 0 3px var(--bakelite),
    inset 0 10px 20px rgba(0, 0, 0, 0.22),
    0 0 0 4px var(--brass-d),
    0 0 0 6px var(--brass),
    0 0 40px rgba(255, 205, 120, 0.18);
}
.glass svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.glass .num { font-family: var(--cond); font-weight: 600; font-size: 22px; fill: var(--ink); text-anchor: middle; }
.glass .band { font-family: var(--cond); font-weight: 700; font-size: 15px; fill: var(--needle); text-anchor: middle; letter-spacing: 0.1em; }
.glass .tick { stroke: var(--ink); stroke-width: 1.5; }
.glass .tick.major { stroke-width: 3; }
.glass .rule { stroke: var(--ink); stroke-width: 2; }
.glass .rule.thin { stroke-width: 1; opacity: 0.45; }
.glass .dot { fill: var(--ink); opacity: 0.5; }
.zone { fill: var(--needle); }
.zone.z1 { opacity: 0.1; }
.zone.z2 { opacity: 0.2; }
.zone.z3 { opacity: 0.4; }
.station-line { stroke: var(--needle); stroke-width: 3; }
.station-tag { font-family: var(--cond); font-weight: 700; font-size: 20px; fill: #7d1a0c; text-anchor: middle; letter-spacing: 0.1em; }
.station-name { font-family: var(--cond); font-weight: 700; font-size: 19px; fill: var(--ink); text-anchor: middle; letter-spacing: 0.04em; }
.leader { stroke: var(--ink); stroke-width: 1; opacity: 0.35; }
.station { animation: fade 0.5s both; }
.needle { stroke-width: 4; stroke-linecap: round; }
.needle.main { stroke: var(--needle); stroke-width: 5; }
.needle-head { fill: var(--needle); }
.needle-knob { fill: var(--bakelite); stroke: var(--brass); stroke-width: 3; }
.tag { font-family: var(--cond); font-weight: 700; font-size: 16px; fill: #fff; text-anchor: middle; letter-spacing: 0.04em; }
.pointer { transition: transform 1.3s cubic-bezier(0.2, 0.9, 0.25, 1.12); }
.target { animation: fade 0.6s both; }
.sweeping .target { animation-delay: 1.7s; }
.poles {
  display: flex; justify-content: space-between; gap: 14px; margin-top: 12px;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.1rem;
  color: var(--brass-l); line-height: 1.1;
}
.pole::before { content: "◂ "; color: var(--needle); }
.pole.r { text-align: right; }
.pole.r::before { content: none; }
.pole.r::after { content: " ▸"; color: var(--needle); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- phone ---------- */
.wrap { max-width: 520px; margin: 0 auto; padding: 12px 16px 40px; }
.top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 44px; }
.top .me { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 700; }
.code-tag { font-family: var(--cond); font-weight: 700; letter-spacing: 0.2em; color: var(--brass-l); border: 2px solid var(--brass-d); border-radius: 4px; padding: 0.05em 0.45em; }
.stage-dial { margin: 6px 4px 22px; }
.readout { display: flex; align-items: baseline; justify-content: center; gap: 0.3em; margin: 4px 0 12px; font-family: var(--cond); color: var(--brass-l); }
.readout b { font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.nudge { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; margin-bottom: 12px; }
.nudge .btn:not(.brass) { font-size: 1.6rem; }
.clue-big { font-family: var(--serif); font-weight: 800; font-size: 2.1rem; line-height: 1.05; margin: 0 0 6px; color: var(--cream); text-align: center; }
.clue-big::before { content: "“"; color: var(--brass); }
.clue-big::after { content: "”"; color: var(--brass); }
.by { text-align: center; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.12em; color: var(--brass); margin: 0 0 16px; }
.timer {
  font-family: var(--cond); font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--bakelite); color: var(--eye); border-radius: 5px; padding: 0.1em 0.5em;
  box-shadow: inset 0 0 0 2px var(--brass-d); min-width: 3.2em; text-align: center;
}
.result { display: flex; align-items: center; gap: 14px; }
.result .pts { font-family: var(--cond); font-weight: 700; font-size: 2.6rem; line-height: 1; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #cdb688; }
.list li:last-child { border-bottom: 0; }
.list .score { margin-left: auto; font-size: 1.25rem; }
.vip-bar { margin-top: 18px; }
.count { margin: 6px 2px 0; text-align: right; font-family: var(--cond); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.count.over { color: var(--needle); opacity: 1; }
.foot { text-align: center; margin: 22px 0 8px; }
button.link { background: none; border: 0; padding: 8px 12px; font: inherit; font-family: var(--cond); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; color: var(--brass); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.ti-logo { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: end center; padding: 16px; background: rgba(18, 11, 6, 0.62); }
.sheet .plate { width: 100%; max-width: 420px; margin: 0 0 env(safe-area-inset-bottom); }
.sheet .row { gap: 10px; }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); gap: 1em; width: min(100%, 46em); margin: 0 auto 1em; text-align: left; }
.ways .plate { margin: 0; display: flex; flex-direction: column; }
.ways .plate .btn { margin-top: auto; }
.ways .plate h2 { margin: 0 0 0.3em; }
.sheet textarea { width: 100%; font: 0.95rem/1.45 var(--serif); padding: 10px; border: 2px solid #c9b484; border-radius: 6px; background: #fffaf0; color: var(--ink, #23170f); resize: vertical; }
@media (min-width: 700px) { .sheet { place-items: center; } }
#toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); transition: transform 0.25s;
  background: var(--bakelite); color: var(--cream); border: 2px solid var(--brass-d); border-radius: 8px;
  padding: 10px 16px; font-family: var(--cond); font-weight: 600; letter-spacing: 0.03em; font-size: 1.05rem;
  z-index: 50; max-width: calc(100vw - 32px); text-align: center;
}
#toast.show { transform: translate(-50%, 0); }

/* ---------- TV ---------- */
body.tv { height: 100vh; overflow: hidden; font-size: clamp(13px, min(1.15vw, 2.05vh), 34px); }
.tv-frame { height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; gap: 2.2vh; padding: 2.4vh 3.2vw 2.6vh; }
.tv-frame.two { grid-template-rows: auto 1fr; }
.tv-frame.three { grid-template-rows: auto 1fr auto; }
.dial-row .dial { width: min(100%, 150vh); margin: 0 auto; }
.lobby-dial .dial { width: min(100%, 86vh); margin: 0 auto; }
.lobby-dial .poles { font-size: 1.6em; margin-top: 0.3em; }
.tv-head { display: flex; align-items: center; gap: 1.4em; }
.tv-head .ti-logo { font-size: 2.3em; }
.tv-head .meta { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--brass-l); font-size: 1.15em; }
.tv-head .right { margin-left: auto; display: flex; align-items: center; gap: 0.8em; }
.tv-head .timer { font-size: 1.9em; }
.tv-head .code-tag { font-size: 1.4em; }
.tv .poles { font-size: 2.1em; margin-top: 0.55em; }
.tv .glass { padding: 0.5vh 0.3vw; }
.caption { display: grid; place-items: center; text-align: center; align-content: center; gap: 0.6em; min-height: 0; }
.caption .clue-big { font-size: 4.6em; margin: 0; }
.caption .by { font-size: 1.35em; margin: 0; }
.caption .say { font-family: var(--serif); font-size: 2.2em; font-weight: 700; line-height: 1.15; margin: 0; max-width: 34em; }
.hint { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.12em; color: var(--brass); font-size: 1.25em; margin: 0; }
.results { display: flex; flex-wrap: wrap; gap: 0.6em; justify-content: center; animation: fade 0.5s 2s both; }
.results .chip { font-size: 1.35em; padding: 0.2em 0.7em; }
.results .chip b { font-weight: 700; margin-left: 0.25em; }

.cloth {
  border-radius: 10px;
  padding: 1.6vh 1.2vw;
  background:
    repeating-linear-gradient(45deg, rgba(40, 25, 10, 0.18) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(40, 25, 10, 0.18) 0 2px, transparent 2px 6px),
    linear-gradient(#b89b6a, #9c7f52);
  box-shadow: inset 0 0 0 3px var(--walnut-d), inset 0 8px 18px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 220, 170, 0.08);
}
.keys { display: flex; gap: 0.75em; flex-wrap: wrap; justify-content: center; }
.key {
  --c: var(--brass);
  min-width: 7.6em; max-width: 11em; padding: 0.45em 0.8em 0.55em;
  border-radius: 5px 5px 8px 8px; border-top: 0.42em solid var(--c);
  background: linear-gradient(#fbf1d8, #e2cd9f); color: var(--ink);
  box-shadow: inset 0 -0.35em 0 rgba(0, 0, 0, 0.16), 0 0.3em 0 #5e4527;
  text-align: center; font-family: var(--cond); transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.key .n { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key .s { display: block; font-weight: 600; font-size: 1.6em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.key .flag { display: block; font-size: 0.82em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--needle); min-height: 1.2em; }
.key.lit { transform: translateY(0.3em); box-shadow: inset 0 -0.15em 0 rgba(0, 0, 0, 0.16), 0 0 0 #5e4527, 0 0 1.4em rgba(255, 214, 120, 0.75); background: linear-gradient(#fff8dc, #f5df9f); }
.key.off { opacity: 0.45; }
.key.empty { min-width: 14em; opacity: 0.7; }

.tv-lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.4vw; min-height: 0; align-items: start; }
.tv-lobby .steps li { font-size: 1.05em; margin-bottom: 0.45em; }
.tv .plate { padding: 1.4em 1.6em; margin: 0; }
.join-plate { display: grid; grid-template-columns: auto 1fr; gap: 0.6em 1.6em; align-items: center; }
.join-plate .qr-slot { grid-row: span 3; }
.join-plate .qr { background: #fffaf0; padding: 0.5em; border-radius: 6px; box-shadow: inset 0 0 0 2px #c9b07c; }
.join-plate .qr img, .join-plate .qr canvas { display: block; width: 9.5em !important; height: 9.5em !important; }
.letters { display: flex; gap: 0.18em; }
.letters span {
  font-family: var(--cond); font-weight: 700; font-size: 3.6em; line-height: 1; width: 0.95em; text-align: center;
  background: var(--bakelite); color: var(--eye); border-radius: 0.1em; padding: 0.06em 0; box-shadow: inset 0 0 0 0.05em var(--brass-d);
}
.join-plate .url { font-family: var(--cond); font-weight: 700; font-size: 1.6em; letter-spacing: 0.04em; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2em 1fr; gap: 0.6em; margin-bottom: 0.7em; font-size: 1.15em; }
.steps li::before { content: counter(s); font-family: var(--cond); font-weight: 700; color: #fff4e2; background: var(--needle); border-radius: 50%; width: 1.6em; height: 1.6em; display: grid; place-items: center; }
.scoring { display: flex; gap: 1.2em; flex-wrap: wrap; font-family: var(--cond); font-weight: 600; font-size: 1.15em; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.scoring b { color: var(--needle); font-size: 1.25em; }
/* 0.9em leaves room for TV browsers that keep their address bar on screen. */
.tv-start { display: grid; place-items: center; align-content: center; gap: 1.9vh; text-align: center; font-size: 0.9em; }
.tv-start .big-logo { font-size: 4.6em; }
.tv-start .tag-line { font-family: var(--serif); font-size: 1.6em; max-width: 34em; margin: 0; }
.tv-start .btn.big { font-size: 1.7em; padding: 0.55em 1.4em; }
.tv-start form { display: flex; gap: 0.6em; }
.tv-start input.code-input { width: 7.5em; font-size: 1.5em; }
.pair-row { display: flex; align-items: center; gap: 1.4em; text-align: left; max-width: 56em; }
.pair-row .hint { font-size: 1.15em; }
.pair-row .qr { flex: none; background: #fffaf0; padding: 0.45em; border-radius: 6px; box-shadow: inset 0 0 0 2px #c9b07c; }
.pair-row .qr img, .pair-row .qr canvas { display: block; width: 5.6em !important; height: 5.6em !important; }
.awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6vw; width: min(100%, 70em); }
.award { text-align: center; }
.award .kick { font-size: 1em; }
.award .who { font-family: var(--serif); font-weight: 800; font-size: 2.1em; line-height: 1.05; margin: 0.15em 0; }
.award .pct { font-family: var(--cond); font-weight: 700; font-size: 1.6em; color: var(--needle); }
.winner { font-family: var(--serif); font-weight: 900; font-style: italic; font-size: 5.4em; line-height: 1; color: var(--brass-l); margin: 0; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
.sound-btn { position: fixed; right: 1.2vw; bottom: 1.2vh; z-index: 5; }

/* ---------- a game for two: signal bars ---------- */
.bars { display: inline-flex; align-items: flex-end; gap: 0.14em; height: 1.15em; vertical-align: -0.12em; }
.bars i { display: block; width: 0.32em; border-radius: 1px; background: rgba(240, 211, 149, 0.2); }
.bars i.on { background: var(--eye); box-shadow: 0 0 0.35em rgba(79, 210, 126, 0.55); }
.bars.low i.on { background: var(--needle); box-shadow: 0 0 0.35em rgba(200, 51, 31, 0.6); }
.plate .bars i { background: #dccaa0; }
.bars i.dead { background: none; box-shadow: inset 0 0 0 1px rgba(240, 211, 149, 0.28); }
.plate .bars i.on { background: #2e8a4e; box-shadow: none; }
.plate .bars i.dead { background: none; box-shadow: inset 0 0 0 1px #c9b484; }
.plate .bars.low i.on { background: var(--needle); }
.signal-box { display: flex; align-items: center; gap: 0.6em; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.signal-box .bars { font-size: 1.8em; }
.rules { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-family: var(--cond); font-weight: 600; font-size: 1.02rem; }
.rules li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed #cdb688; padding-bottom: 4px; }
.rules li:last-child { border-bottom: 0; }
.rules b { color: var(--needle); }
.invite { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center; }
.invite .qr { background: #fffaf0; padding: 6px; border-radius: 6px; box-shadow: inset 0 0 0 2px #c9b07c; }
.invite .qr img, .invite .qr canvas { display: block; width: 116px !important; height: 116px !important; }
.invite .letters span { font-size: 2.3rem; }
.record { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--needle); }