/* Broadcast: a 1990 game-show console. Static material layers; shared geometry. */
:root[data-theme="broadcast"] {
  --bg: #111311;
  --surface: #292b26;
  --surface-2: #1b1e19;
  --surface-hover: #35392f;
  --line: #54564a;
  --line-strong: #89816e;
  --ink: #ede4ce;
  --ink-muted: #bbb6a5;
  --ink-faint: #827d6e;
  --signal: #bd2b20;
  --signal-ink: #fff3d9;
  --scrim: rgba(6, 9, 7, .72);
  --good: #c5d8ac;
  --font-text: "Barlow", system-ui, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --title-weight: 800;
  --title-case: uppercase;
  --title-tracking: -.005em;
  --title-leading: .86;
  --title-size: clamp(3.2rem, 8vw, 6rem);
  --title-accent-ink: var(--signal-ink);
  --heading-weight: 800;
  --heading-case: uppercase;
  --heading-tracking: .025em;
  --label-font: var(--font-text);
  --radius-lg: 12px;
  --radius-md: 5px;
  --radius-sm: 4px;
  --radius-chip: 5px;
  --radius-hud: 5px;
  --shadow-panel: inset 0 1px 1px #c2b79b, inset 0 -2px 3px #080a08, 0 18px 38px -12px #000;
  --material-grain: url("/art/material-grain.svg");
  --metal-light: #42463c;
  --metal-dark: #1c1f1a;
  --key-light: #f0e5cc;
  --key-dark: #cabd9f;
  --key-ink: #171a14;
  --key-edge: #958975;
  --key-highlight: #fff7e1;
  --key-shadow: inset 0 1px 1px var(--key-highlight), inset 0 -3px 3px #0003, 0 2px 3px #0009;
  --key-texture: var(--material-grain), linear-gradient(var(--key-light), var(--key-dark));
  --red-texture: var(--material-grain), linear-gradient(#d33c2c, #aa2119);
  --metal-texture: var(--material-grain), linear-gradient(130deg, var(--metal-light), var(--surface) 34%, var(--metal-dark));
  --recess-shadow: inset 0 2px 5px #000c, 0 1px 1px #a59b7d55;
  --dark-key-shadow: inset 0 1px 1px #a59b7d66, inset 0 -2px 3px #0008;
  --screw: radial-gradient(circle, #0b0e0a 0 2px, #686855 2.5px 3.5px, #161a13 4px 5px, transparent 5.5px);
  --backdrop: radial-gradient(ellipse at 50% 40%, #30352b, transparent 75%);
  --btn-bg: var(--key-light);
  --btn-ink: var(--key-ink);
  --btn-border: var(--key-edge);
  --btn-hover-bg: var(--key-highlight);
  --btn-font: var(--font-display);
  --btn-weight: 800;
  --btn-case: uppercase;
  --btn-tracking: .035em;
  --btn-primary-bg: var(--signal);
  --btn-primary-ink: var(--signal-ink);
  --btn-primary-border: #e16a46;
  --btn-primary-shadow: inset 0 1px 1px #ffbd8566, inset 0 -3px 3px #45080066, 0 2px 3px #0009;
  --btn-press: translateY(1px);
  --item-bg: var(--key-light);
  --item-ink: var(--key-ink);
  --item-focus-bg: var(--key-highlight);
  --item-focus-ink: var(--key-ink);
  --item-primary-bg: var(--signal);
  --item-primary-ink: var(--signal-ink);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--key-highlight);
  --hud-bg: #272b23;
  --hud-border: #7b7766;
  --stick-ring: #757764;
  --stick-fill: #12170f;
  --stick-move: #d6c9aa;
  --stick-fire: #bd2b20;
  --stick-well-art: url("/art/arcade-stick-well.webp");
  --stick-move-art: url("/art/arcade-stick-ivory.webp");
  --stick-fire-art: url("/art/arcade-stick-red.webp");
  --stick-well-art-size: 112%;
  --stick-move-art-size: 115%;
  --stick-fire-art-size: 112%;
  --stick-cap-shadow: 0 7px 9px #0009, 0 2px 3px #0006;
  --touch-button-bg: var(--hud-bg);
  --touch-button-shadow: inset 0 1px 1px #f3edd133, inset 0 -2px 2px #0008, 0 3px 0 #080b08, 0 4px 6px #0007;
  --touch-button-down-shadow: inset 0 2px 3px #000a, 0 1px 0 #ddd3b51a;
  --controller-deck-texture: var(--material-grain), linear-gradient(135deg, #2e3230, #171b18 56%, #101411);
  --mark-display: none;
  --picture-frame: none;
  --deck: #1c2019;
  --tv-case: #292b26;
  --tv-trim: #44473c;
  --tv-edge: #948871;
  --tv-dark: #0b0e0a;
  --tv-screen: #101c13;
  --tv-glass-edge: #40503a;
  --tv-ink: #eee0ba;
}

/* A shared cabinet and key construction across title, menus and settings. */
:root[data-theme="broadcast"] :is(.panel, .home-layout, .setup-card) {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--metal-texture); box-shadow: var(--shadow-panel);
}
:root[data-theme="broadcast"] :is(.home-layout, .setup-card) { position: relative; padding: var(--space-5); gap: var(--space-5); }
:root[data-theme="broadcast"] :is(.panel, .home-layout, .setup-card)::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  background: var(--screw) left top, var(--screw) right top, var(--screw) left bottom, var(--screw) right bottom;
  background-size: 12px 12px; background-repeat: no-repeat;
}
:root[data-theme="broadcast"] :is(.btn, .btn.ghost, .menu-item, .menu-item.quiet) {
  color: var(--key-ink); background: var(--key-texture); border: 1px solid var(--key-edge); box-shadow: var(--key-shadow);
}
:root[data-theme="broadcast"] :is(.btn.primary, .menu-item.primary) {
  color: var(--signal-ink); background: var(--red-texture); border-color: var(--btn-primary-border); box-shadow: var(--btn-primary-shadow);
}
:root[data-theme="broadcast"] :is(.btn, .menu-item):hover:not(:disabled) { filter: brightness(1.08); }
:root[data-theme="broadcast"] :is(.btn, .menu-item):focus-visible { box-shadow: var(--focus); }
:root[data-theme="broadcast"] .file-button:focus-within { box-shadow: var(--focus); }
:root[data-theme="broadcast"] :is(.btn, .menu-item):active:not(:disabled) { box-shadow: var(--recess-shadow); }
:root[data-theme="broadcast"] .btn.primary:disabled { background: var(--surface-2); color: var(--ink-muted); border-color: var(--line); box-shadow: var(--recess-shadow); }
:root[data-theme="broadcast"] .menu { padding: var(--space-1); border: 1px solid var(--tv-dark); border-radius: calc(var(--radius-md) + 3px); background: var(--tv-dark); box-shadow: var(--recess-shadow); }
:root[data-theme="broadcast"] .menu-item { font: 800 1.15rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .025em; }
:root[data-theme="broadcast"] .menu-item svg { opacity: 1; }
:root[data-theme="broadcast"] .menu-panel h2 {
  margin-bottom: var(--space-3); padding: var(--space-4); text-align: center;
  background: repeating-linear-gradient(0deg, transparent 0 2px, #0002 2px 3px), var(--tv-screen);
  border: 1px solid var(--tv-glass-edge); border-radius: 12px / 7px; color: var(--good);
  box-shadow: var(--recess-shadow); font-size: 1.9rem; letter-spacing: .12em;
}
:root[data-theme="broadcast"] .menu-panel .eyebrow { margin: var(--space-2) 0 var(--space-3); font: 500 .8rem/1.4 var(--font-text); text-transform: none; letter-spacing: .025em; text-align: center; }
:root[data-theme="broadcast"] #touchHelp { text-align: center; }

/* Settings are a bank of switches with clear selected and focus states. */
:root[data-theme="broadcast"] :is(.choice span, .tabs [role="tab"]) { background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: var(--dark-key-shadow); color: var(--ink); }
:root[data-theme="broadcast"] .tabs { padding: var(--space-1); gap: var(--space-1); background: var(--tv-dark); box-shadow: var(--recess-shadow); }
:root[data-theme="broadcast"] .tabs [role="tab"] { border-radius: var(--radius-sm); font: 700 1rem var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
:root[data-theme="broadcast"] :is(.choice input:checked + span, .tabs [aria-selected="true"]) { background: var(--key-texture); color: var(--key-ink); border-color: var(--key-edge); box-shadow: var(--key-shadow); }
:root[data-theme="broadcast"] :is(.choice input:focus-visible + span, .tabs [role="tab"]:focus-visible, .close:focus-visible) { box-shadow: var(--focus); }
:root[data-theme="broadcast"] .close { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--dark-key-shadow); }
:root[data-theme="broadcast"] :is(.continue-card, .slot, .file-status li, .drop-zone, #homeLegend) { background: var(--surface-2); box-shadow: var(--recess-shadow); }
:root[data-theme="broadcast"] :is(.continue-card, .slot) { border-color: var(--line-strong); }
:root[data-theme="broadcast"] :is(.continue-card, .slot):focus-visible { box-shadow: var(--focus); }
:root[data-theme="broadcast"] .drop-zone { border-style: solid; }
:root[data-theme="broadcast"] .drop-zone strong { font: 800 1.35rem/1.25 var(--font-display); text-transform: uppercase; }
:root[data-theme="broadcast"] .drop-zone u { text-decoration-color: var(--ink-muted); }
:root[data-theme="broadcast"] .drop-zone:focus-within { box-shadow: var(--focus); }
:root[data-theme="broadcast"] .legend dt kbd { background: var(--key-texture); color: var(--key-ink); border-color: var(--key-edge); }
:root[data-theme="broadcast"] { scrollbar-color: var(--line-strong) var(--surface-2); caret-color: var(--ink); }

/* Inset shading stays inside the proven gameplay control bounds. */
:root[data-theme="broadcast"] :is(.hud-button, .touch-button),
:root[data-theme="broadcast"] #play.immersive .touch-button {
  background: var(--metal-texture); border: 1px solid var(--hud-border); border-radius: var(--radius-hud); box-shadow: var(--dark-key-shadow);
}
:root[data-theme="broadcast"] .touch-button.down,
:root[data-theme="broadcast"] #play.immersive .touch-button.down { background: var(--red-texture); box-shadow: var(--touch-button-down-shadow); }
:root[data-theme="broadcast"] .touch-button,
:root[data-theme="broadcast"] #play.immersive .touch-button { box-shadow: var(--touch-button-shadow); }
:root[data-theme="broadcast"] :is(.hud-button, .touch-button):focus-visible,
:root[data-theme="broadcast"] #play.immersive .touch-button:focus-visible { box-shadow: var(--focus); }
:root[data-theme="broadcast"] #play.touch-portrait::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--safe-top) + var(--control-height) + 2 * var(--space-3)); background: var(--controller-deck-texture); }
:root[data-theme="broadcast"] #play.immersive.touch-portrait::before { height: calc(var(--safe-top) + var(--touch-rail)); }
:root[data-theme="broadcast"] .touch-controls[data-orientation="portrait"]::before { background: var(--controller-deck-texture); }
:root[data-theme="broadcast"] .ring { box-shadow: var(--recess-shadow); }
:root[data-theme="broadcast"] .knob { box-shadow: var(--stick-cap-shadow); }
:root[data-theme="broadcast"] .hud-meta { display: flex; align-items: center; gap: var(--control-gap); }
.tally, .timecode { display: inline-flex; align-items: center; height: var(--control-height); padding: 0 10px; border: 1px solid var(--hud-border); border-radius: var(--radius-hud); background: var(--hud-bg); color: var(--ink); }
.tally { gap: 7px; font: 800 .86rem var(--font-display); letter-spacing: .09em; text-transform: uppercase; }
.tally::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.timecode { font: 500 .8rem var(--font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
:root[data-theme="broadcast"] :is(.tally, .timecode) { box-shadow: var(--recess-shadow); }
:root[data-theme="broadcast"] .tally::before { box-shadow: 0 0 4px 2px #ee3b2355; }
#app[data-playing="no"] .tally::before { background: var(--ink-faint); box-shadow: none; }

:root[data-theme="broadcast"] :is(.toast, .toast.good, .toast.bad) { background: var(--key-texture); color: var(--key-ink); border: 1px solid var(--key-edge); box-shadow: var(--key-shadow); border-radius: var(--radius-md); }
:root[data-theme="broadcast"] .toast.bad { background: var(--red-texture); color: var(--signal-ink); }
:root[data-theme="broadcast"] #app[data-screen="play"]:not([data-menu-open]) .toasts { top: auto; left: calc(var(--picture-left, 0px) + 16px); bottom: calc(var(--picture-bottom-gap, 0px) + 16px); transform: none; justify-items: start; width: auto; max-width: 70vw; }

/* One cabinet on a phone; screen and control bank beside each other on desktop. */
:root[data-theme="broadcast"] .home-layout { width: min(920px, 100%); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
:root[data-theme="broadcast"] .home-actions { gap: var(--space-3); }
:root[data-theme="broadcast"] .home-actions .row .btn { padding-inline: var(--space-2); }
:root[data-theme="broadcast"] .home-actions .continue-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); }
:root[data-theme="broadcast"] .home-actions .continue-card .thumb { width: clamp(64px, 20vw, 104px); }
:root[data-theme="broadcast"] #home.has-save .continue-card { background: var(--red-texture); color: var(--signal-ink); border: 1px solid var(--btn-primary-border); padding: var(--space-3); box-shadow: var(--btn-primary-shadow); }
:root[data-theme="broadcast"] #home.has-save .continue-card :is(small, svg) { color: var(--signal-ink); }
:root[data-theme="broadcast"] #home.has-save .continue-card:focus-visible { box-shadow: var(--focus); }
:root[data-theme="broadcast"] #home.has-save #newGame { background: var(--key-texture); color: var(--key-ink); border-color: var(--key-edge); box-shadow: var(--key-shadow); }
:root[data-theme="broadcast"] #home.has-save #newGame:focus-visible { box-shadow: var(--focus); }
:root[data-theme="broadcast"] .home-brand > .tagline { color: var(--ink); }
:root[data-theme="broadcast"] #newGame { min-height: var(--control-height-lg); font-size: 1.7rem; }
@media (max-width: 760px) and (min-height: 541px) {
  :root[data-theme="broadcast"] .home-layout { width: min(430px, 100%); grid-template-columns: 1fr; gap: var(--space-4); }
  :root[data-theme="broadcast"] :is(.home-layout, .setup-card) { padding: var(--space-4); }
  :root[data-theme="broadcast"] .home-brand { grid-row: auto; }
  :root[data-theme="broadcast"] #setup .brand [data-television] { width: min(240px, 100%); }
}
@media (max-height: 540px) {
  :root[data-theme="broadcast"] :is(.home-layout, .setup-card) { padding: var(--space-4); gap: var(--space-4); }
  :root[data-theme="broadcast"] .menu-panel h2 { padding: var(--space-2); font-size: 1.2rem; margin-bottom: var(--space-2); }
  :root[data-theme="broadcast"] .menu-item { font-size: 1rem; }
  :root[data-theme="broadcast"] #touchHelp { margin-top: var(--space-2); font-size: .8rem; }
}
@media (max-width: 760px) and (min-height: 541px) and (max-height: 700px) {
  :root[data-theme="broadcast"] .menu-panel { padding: var(--space-4); }
  :root[data-theme="broadcast"] .menu-panel h2 { padding: var(--space-2); font-size: 1.5rem; margin-bottom: var(--space-2); }
  :root[data-theme="broadcast"] #touchHelp { font-size: .8rem; line-height: 1.35; margin-top: var(--space-3); }
}