/* Arcade cabinet: the Williams-era machine. Marquee yellow, cabinet black, button red;
   chunky signage type; hard offset shadows; a marquee with chaser lights; a bezel round the game. */
:root[data-theme="arcade"] {
  --bg: #0b0b0d;
  --backdrop: linear-gradient(180deg, rgba(255, 212, 0, .04), transparent 40%);
  --surface: #151518;
  --surface-2: #1f1f24;
  --surface-hover: #2a2a30;
  --line: #2d2d33;
  --line-strong: #505059;
  --ink: #ffffff;
  --ink-muted: #b8b8c2;
  --ink-faint: #6c6c76;
  --signal: #ffd400;
  --signal-ink: #111111;
  --scrim: rgba(8, 8, 10, .86);

  --font-text: "Barlow", system-ui, sans-serif;
  --font-display: "Bungee", "Arial Black", sans-serif;
  --title-weight: 400;
  --title-case: uppercase;
  --title-tracking: 0;
  --title-leading: 1;
  --title-size: clamp(2.4rem, 6vw, 4.4rem);
  --title-ink: #ffd400;
  --title-accent-ink: #ff2b2b;
  --heading-weight: 400;
  --heading-case: uppercase;
  --heading-tracking: .02em;

  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --radius-chip: 8px;
  --radius-hud: 50%;
  --border: 2px;
  --shadow-panel: 6px 6px 0 #000;
  --shadow-card: 4px 4px 0 #000;

  --btn-font: "Barlow", sans-serif;
  --btn-weight: 600;
  --btn-case: uppercase;
  --btn-tracking: .02em;
  --btn-border: #505059;
  --btn-primary-bg: #ffd400;
  --btn-primary-ink: #111111;
  --btn-primary-border: #000000;
  --btn-primary-shadow: 4px 4px 0 #000;
  --btn-press: translate(3px, 3px);

  --item-bg: var(--surface-2);
  --item-focus-bg: #ffffff;
  --item-focus-ink: #111111;
  --item-primary-bg: #ffd400;
  --item-primary-ink: #111111;
  --toggle-on: #ff2b2b;
  --focus: 0 0 0 2px #000, 0 0 0 5px #ffd400;

  --hud-bg: #111114;
  --hud-border: #000;
  --stick-ring: #3a3a42;
  --stick-fill: rgba(0, 0, 0, .45);
  --stick-move: #ffd400;
  --stick-fire: #ff2b2b;
  --touch-button-bg: #1b1b20;
  --touch-button-down: #ff2b2b;
  --mark-display: none;
  --picture-frame: 0 0 0 10px #1c1c21, 0 0 0 12px #000, 0 22px 60px rgba(0, 0, 0, .8);
  --deck: #101013;
}

:root[data-theme="arcade"] .title { text-shadow: 4px 4px 0 #000; }
/* Marquee: the title sits in a lit sign with chaser bulbs top and bottom. */
:root[data-theme="arcade"] .brand { padding: 30px 30px 32px; background:
  radial-gradient(circle, #ffd400 2.5px, transparent 3px) 7px 7px / 18px 14px repeat-x,
  radial-gradient(circle, #ffd400 2.5px, transparent 3px) 7px calc(100% - 7px) / 18px 14px repeat-x,
  #111114; border: 2px solid #000; border-radius: var(--radius-lg); box-shadow: 6px 6px 0 #000; }
:root[data-theme="arcade"] .brand .tagline { color: var(--ink-muted); }
:root[data-theme="arcade"] .home-brand .title { font-size: var(--title-size); }
:root[data-theme="arcade"] .eyebrow { color: #ff2b2b; }
:root[data-theme="arcade"] .btn.primary:active:not(:disabled) { box-shadow: 1px 1px 0 #000; }
:root[data-theme="arcade"] .menu-item { font: 600 1.02rem var(--font-text); text-transform: uppercase; letter-spacing: .04em;
  border: 2px solid #000; }
:root[data-theme="arcade"] .panel h2 { color: #ffd400; }
:root[data-theme="arcade"] .tabs [role="tab"] { text-transform: uppercase; letter-spacing: .04em; }
:root[data-theme="arcade"] .knob { box-shadow: inset -5px -6px 0 rgba(0, 0, 0, .25), 0 5px 0 rgba(0, 0, 0, .6); }
:root[data-theme="arcade"] :is(.touch-button, .hud-button) { border-color: var(--hud-border); box-shadow: 3px 3px 0 #000; }
/* A full-width phone picture has no outside room for the cabinet bezel. */
:root[data-theme="arcade"] #play.touch-portrait { --picture-frame: none; }