/* ============================================================
   BR-2600 CREATIVE COMPUTING SYSTEM — CRT SHELL
   The physical television set: bezel, screen glass, phosphor
   effects, OSD, boot, guide, directive (quest) UI, arcade shell.
   ============================================================ */

/* Monofonto — Typodermic Fonts freeware; the Fallout terminal face.
   Self-hosted from /fonts. */
@font-face {
  font-family: 'Monofonto';
  src: url('../fonts/monofonto.woff2') format('woff2'),
       url('../fonts/monofonto.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Atompunk — vault-terminal phosphor + atomic-age enamel console */
  --ink:        #ece5cf;
  --ink-dim:    #8f9a7c;
  --amber:      #ffb000;
  --amber-hot:  #ffd75e;
  --cyan:       #58ff8f;   /* phosphor green (primary system color) */
  --magenta:    #ffd23f;   /* vault yellow */
  --green:      #58ff8f;
  --red:        #ff5a3c;
  --screen-bg:  #0a110a;
  --bezel-hi:   #e6dcba;
  --bezel:      #cfc4a0;
  --bezel-lo:   #938a6b;
  --font-pix:   'Press Start 2P', monospace;
  --font-term:  'Monofonto', monospace;
  --font-disp:  'Monofonto', monospace;
  --font-body:  'Monofonto', 'Inter', monospace;
  --r-screen:   clamp(14px, 2.4vw, 30px);
}

/* Gold clearance colorway — unlocked when the Directive completes */
:root[data-gold] {
  --cyan:    #ffd75e;
  --magenta: #ffb000;
  --green:   #ffd75e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(120% 90% at 50% -10%, #2c3122 0%, #171a10 55%, #0a0b07 100%);
  font-family: var(--font-term);
  color: var(--ink);
  overflow: hidden;
}

::selection { background: var(--amber); color: #100c02; }

/* ── THE SET ─────────────────────────────────────────────── */

.tv {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 1.6vh, 18px) clamp(8px, 1.6vw, 20px);
}

.tv-bezel {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    linear-gradient(160deg, var(--bezel-hi) 0%, var(--bezel) 34%, var(--bezel-lo) 100%);
  border-radius: clamp(18px, 3vw, 38px);
  padding: clamp(10px, 1.8vw, 26px);
  padding-bottom: 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 8px rgba(60, 52, 32, 0.55),
    0 30px 80px rgba(0, 0, 0, 0.75);
}

/* corner screws — atomic-age hardware */
.tv-bezel::before,
.tv-bezel::after {
  content: '';
  position: absolute;
  top: clamp(9px, 1.4vw, 16px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 44%, #5c543e 44%, #5c543e 56%, transparent 56%),
    radial-gradient(circle at 35% 30%, #f2ead0, #a99e7d 70%, #6e6549);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 0 2px rgba(0, 0, 0, 0.5);
}

.tv-bezel::before { left: clamp(9px, 1.4vw, 16px); }
.tv-bezel::after  { right: clamp(9px, 1.4vw, 16px); }

.tv-screen-cavity {
  flex: 1;
  min-height: 0;
  border-radius: var(--r-screen);
  padding: clamp(4px, 0.7vw, 9px);
  background: linear-gradient(180deg, #0c0b07, #1d1a12 60%, #33301f);
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ── THE GLASS ───────────────────────────────────────────── */

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--r-screen) - 4px);
  background: var(--screen-bg);
  overflow: hidden;
  isolation: isolate;
}

.screen-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.anim .screen-inner { animation: crt-flicker 4s infinite; }

@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  3%       { opacity: 0.985; }
  6%       { opacity: 1; }
  42%      { opacity: 0.992; }
  45%      { opacity: 1; }
  82%      { opacity: 0.988; }
  85%      { opacity: 1; }
}

/* Effects stack (always above content, below OSD) */
.fx { position: absolute; inset: 0; pointer-events: none; }

.fx-scanlines {
  z-index: 40;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(0, 0, 0, 0.16) 2px, rgba(0, 0, 0, 0.16) 3px
  );
  mix-blend-mode: multiply;
}

.fx-grille {
  z-index: 41;
  opacity: 0.05;
  background: repeating-linear-gradient(
    90deg,
    #ff4b3e 0px, #ff4b3e 1px,
    #46e08c 1px, #46e08c 2px,
    #3ea0ff 2px, #3ea0ff 3px
  );
}

.fx-vignette {
  z-index: 42;
  background: radial-gradient(
    ellipse 120% 105% at 50% 48%,
    transparent 58%,
    rgba(0, 0, 0, 0.28) 86%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

.fx-glare {
  z-index: 43;
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.015) 24%,
    transparent 40%
  );
}

.anim .fx-band { z-index: 39; overflow: hidden; }
.anim .fx-band::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(233, 228, 213, 0.028), transparent);
  animation: crt-band 11s linear infinite;
}

@keyframes crt-band {
  from { top: -25%; }
  to   { top: 125%; }
}

/* ── CHANNELS ────────────────────────────────────────────── */

#channels { position: absolute; inset: 0; z-index: 1; }

.channel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  scrollbar-width: thin;
  scrollbar-color: #3a352c transparent;
  -webkit-overflow-scrolling: touch;
}

.channel.active { display: block; }

.channel::-webkit-scrollbar { width: 8px; }
.channel::-webkit-scrollbar-thumb { background: #3a352c; border-radius: 4px; }

/* WebGL fluid canvas sits behind CH 01 content */
#fluid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#fluid.on { opacity: 1; }

/* Static / noise canvas — transitions + dead air */
#static {
  position: absolute;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}

/* ── OSD (on-screen display) ─────────────────────────────── */

.osd-ch {
  position: absolute;
  top: clamp(14px, 3vh, 30px);
  right: clamp(18px, 3vw, 38px);
  z-index: 60;
  font-family: var(--font-term);
  font-size: clamp(34px, 5.4vh, 58px);
  line-height: 1;
  color: var(--green);
  text-shadow: 0 0 14px rgba(88, 255, 143, 0.7), 2px 0 0 rgba(255, 210, 63, 0.35), -2px 0 0 rgba(88, 255, 143, 0.35);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.osd-ch.show { opacity: 1; }

.osd-name {
  position: absolute;
  bottom: clamp(14px, 3vh, 28px);
  left: clamp(18px, 3vw, 38px);
  z-index: 60;
  font-family: var(--font-term);
  font-size: clamp(19px, 2.8vh, 26px);
  letter-spacing: 0.08em;
  color: var(--green);
  text-shadow: 0 0 12px rgba(88, 255, 143, 0.6);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  max-width: 60%;
}

.osd-name.show { opacity: 1; }

.osd-clock {
  position: absolute;
  top: clamp(14px, 3vh, 30px);
  left: clamp(18px, 3vw, 38px);
  z-index: 60;
  font-family: var(--font-term);
  font-size: clamp(17px, 2.4vh, 22px);
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  pointer-events: none;
  display: flex;
  gap: 1em;
  align-items: baseline;
}

.osd-clock .rec {
  color: var(--red);
  animation: rec-blink 1.6s steps(1) infinite;
}

@keyframes rec-blink { 50% { opacity: 0.15; } }

/* Toast — objective updates */
.toast {
  position: absolute;
  top: clamp(60px, 11vh, 96px);
  left: 50%;
  transform: translate(-50%, -14px);
  z-index: 62;
  font-family: var(--font-term);
  font-size: clamp(18px, 2.6vh, 24px);
  letter-spacing: 0.1em;
  color: #0e0b03;
  background: var(--amber);
  padding: 4px 18px 2px;
  border-radius: 3px;
  box-shadow: 0 0 24px rgba(255, 176, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  text-align: center;
  max-width: 86%;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── CHIN: badge + controls ─────────────────────────────── */

.tv-chin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(8px, 1.4vh, 16px) clamp(4px, 1vw, 12px);
  min-height: clamp(44px, 7vh, 64px);
}

.tv-badge {
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(11px, 1.7vh, 15px);
  letter-spacing: 0.24em;
  color: #4f462f;
  background: none;
  border: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.tv-badge .atom {
  color: #a1352a;
  margin-right: 0.35em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.tv-badge span {
  color: #756a4d;
  letter-spacing: 0.16em;
}

.tv-model {
  font-family: var(--font-term);
  font-size: clamp(13px, 1.9vh, 16px);
  letter-spacing: 0.22em;
  color: #7c714f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  user-select: none;
}

.tv-controls {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.9vw, 12px);
}

.tv-btn {
  font-family: var(--font-term);
  font-size: clamp(15px, 2vh, 18px);
  letter-spacing: 0.08em;
  color: #e6dcba;
  background: linear-gradient(180deg, #55483a, #2e251b);
  border: 1px solid #1a140d;
  border-radius: 6px;
  padding: 5px 12px 3px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 3px rgba(46, 39, 24, 0.6);
  transition: transform 0.06s, color 0.15s;
  user-select: none;
  touch-action: manipulation;
}

.tv-btn:hover { color: var(--amber-hot); }
.tv-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 4px rgba(0,0,0,0.7); }

.tv-btn[aria-pressed="true"] { color: var(--amber); }

.tv-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #a1352a;
  box-shadow: 0 0 8px rgba(255, 90, 60, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  margin-left: clamp(4px, 0.6vw, 10px);
}

.tv-led.on {
  background: #58ff8f;
  box-shadow: 0 0 8px rgba(88, 255, 143, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* ── BOOT / POWER ────────────────────────────────────────── */

#boot {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: #0a0c07;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#boot.off { display: none; }

.boot-power {
  text-align: center;
  padding: 0 20px;
  font-family: var(--font-term);
  font-size: clamp(22px, 3.4vh, 30px);
  letter-spacing: 0.28em;
  color: var(--ink-dim);
}

.boot-power .press { animation: boot-pulse 2.2s ease-in-out infinite; }

.boot-power b {
  display: block;
  font-family: var(--font-pix);
  font-size: clamp(10px, 1.7vh, 15px);
  color: var(--amber);
  margin-bottom: 18px;
  letter-spacing: 0.2em;
  font-weight: 400;
}

@keyframes boot-pulse { 50% { opacity: 0.35; } }

/* PLEASE WAIT — vintage sunburst test card */
.standby {
  position: relative;
  display: block;
  width: clamp(170px, 34vh, 300px);
  aspect-ratio: 1;
  margin: 0 auto clamp(20px, 4vh, 36px);
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #16150f;
  box-shadow:
    0 0 70px rgba(216, 207, 174, 0.13),
    inset 0 0 50px rgba(0, 0, 0, 0.55);
}

.standby-rays {
  position: absolute;
  inset: -18%;
  background: repeating-conic-gradient(
    from 0deg,
    #e9dcae 0deg 15deg,
    #3f7873 15deg 30deg
  );
  will-change: transform;
}

.standby-rays.r-front {
  mix-blend-mode: overlay;
  opacity: 0.35;
  background: repeating-conic-gradient(
    from 8deg,
    #6e6549 0deg 15deg,
    #d8cfae 15deg 30deg
  );
}

/* CSS fallback spin for when GSAP hasn't taken over (e.g. reduced motion) */
.anim .standby-rays.r-back { animation: standby-spin 90s linear infinite; }

@keyframes standby-spin { to { transform: rotate(360deg); } }

.standby-text {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  z-index: 2;
  font-family: 'Caveat', var(--font-disp);
  font-weight: 700;
  font-size: clamp(30px, 6.6vh, 52px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-align: center;
  color: #f4ecd2;
  text-shadow:
    1px 1px 0 #3a2f14,
    2px 2px 0 #3a2f14,
    3px 3px 0 #3a2f14,
    4px 4px 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.standby-dots {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: clamp(6px, 1.2vh, 10px);
}

.sd-dot {
  width: clamp(9px, 1.8vh, 15px);
  height: clamp(9px, 1.8vh, 15px);
  border-radius: 50%;
  border: 2px solid #3a2f14;
  background: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.boot-log {
  display: none;
  align-self: flex-start;
  font-family: var(--font-term);
  font-size: clamp(19px, 2.8vh, 26px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--green);
  text-shadow: 0 0 10px rgba(88, 255, 143, 0.55);
  padding: clamp(20px, 4vh, 44px) clamp(24px, 4vw, 52px);
  white-space: pre-wrap;
}

.boot-log .cur {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  background: var(--green);
  vertical-align: -0.15em;
  animation: rec-blink 0.8s steps(1) infinite;
}

#boot.booting { cursor: default; }
#boot.booting .boot-power { display: none; }
#boot.booting .boot-log { display: block; }

.anim #boot.degauss { animation: degauss 0.5s ease-out forwards; }

@keyframes degauss {
  0%   { transform: scale(1); filter: brightness(1); opacity: 1; }
  35%  { transform: scale(1.02, 0.96); filter: brightness(3); }
  100% { transform: scale(1); filter: brightness(1); opacity: 0; visibility: hidden; }
}

/* ── GUIDE OVERLAY ───────────────────────────────────────── */

#guide {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: #050504;
  display: none;
  overflow-y: auto;
  padding: clamp(14px, 2.6vh, 30px) clamp(18px, 4vw, 56px);
}

#guide.open { display: block; }

.guide-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #2c2820;
  padding-bottom: 10px;
  margin-bottom: 6px;
}

.guide-title {
  font-family: var(--font-pix);
  font-size: clamp(11px, 2vh, 17px);
  color: var(--amber);
  letter-spacing: 0.12em;
  font-weight: 400;
}

.guide-head-btns { display: flex; gap: 8px; }

.guide-close {
  font-family: var(--font-term);
  font-size: clamp(15px, 2.2vh, 19px);
  color: var(--ink-dim);
  background: none;
  border: 1px solid #3a352c;
  border-radius: 4px;
  padding: 3px 12px 1px;
  cursor: pointer;
  letter-spacing: 0.1em;
}

.guide-close:hover { color: var(--amber); border-color: var(--amber); }

.guide-cols {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(20px, 4vw, 56px);
}

.guide-list { list-style: none; }

.guide-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  text-align: left;
  font-family: var(--font-term);
  font-size: clamp(18px, 2.8vh, 25px);
  letter-spacing: 0.06em;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px dotted #262218;
  padding: 8px 6px 5px;
  cursor: pointer;
}

.guide-row:hover, .guide-row:focus-visible { background: rgba(255, 176, 0, 0.07); color: var(--amber-hot); outline: none; }
.guide-row .gnum { color: var(--amber); min-width: 3.2em; }
.guide-row .gname { flex: 1; }
.guide-row .gtag { color: var(--ink-dim); font-size: 0.75em; letter-spacing: 0.12em; }
.guide-row.on .gtag { color: var(--green); }
.guide-row.locked { color: #575145; cursor: pointer; }
.guide-row.locked .gnum { color: #575145; }

.directive-panel h3 {
  font-family: var(--font-pix);
  font-size: clamp(8px, 1.5vh, 12px);
  color: var(--cyan);
  letter-spacing: 0.14em;
  margin: 4px 0 10px;
  font-weight: 400;
}

.directive-panel .dp-sub {
  font-family: var(--font-term);
  font-size: clamp(15px, 2.2vh, 19px);
  color: var(--ink-dim);
  line-height: 1.35;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.objective {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--font-term);
  font-size: clamp(16px, 2.4vh, 21px);
  letter-spacing: 0.05em;
  padding: 3px 0;
  color: var(--ink);
}

.objective .box { color: var(--ink-dim); }
.objective.done { color: #6d675a; text-decoration: line-through; }
.objective.done .box { color: var(--green); text-decoration: none; }
.objective .hint {
  display: block;
  color: var(--ink-dim);
  font-size: 0.78em;
  letter-spacing: 0.08em;
}

/* NES pad — enter the old code by hand (mobile parity for ARCADE-03) */
.nes-pad {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  width: max-content;
  max-width: 100%;
  margin: 8px 0 4px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #24211a, #171510);
  border: 1px solid #3a352c;
  border-top-color: #4c4636;
  border-radius: 8px;
}

.pad-dpad {
  display: grid;
  grid-template-columns: repeat(3, clamp(26px, 3.8vh, 32px));
  grid-template-rows: repeat(3, clamp(26px, 3.8vh, 32px));
}

.pad-dpad button {
  font-family: var(--font-term);
  font-size: clamp(15px, 2.2vh, 19px);
  color: #cfc4a0;
  background: #2c2820;
  border: 1px solid #0c0b08;
  cursor: pointer;
  touch-action: manipulation;
}

.pad-dpad button:active { background: #443d2e; }
.pad-dpad .pu { grid-area: 1 / 2; border-radius: 4px 4px 0 0; }
.pad-dpad .pl { grid-area: 2 / 1; border-radius: 4px 0 0 4px; }
.pad-dpad .pc { grid-area: 2 / 2; background: #221f18; pointer-events: none; }
.pad-dpad .pr { grid-area: 2 / 3; border-radius: 0 4px 4px 0; }
.pad-dpad .pd { grid-area: 3 / 2; border-radius: 0 0 4px 4px; }

.pad-progress {
  font-family: var(--font-term);
  font-size: clamp(16px, 2.4vh, 21px);
  letter-spacing: 0.28em;
  white-space: nowrap;
}

.pad-progress b { color: var(--green); font-weight: 400; text-shadow: 0 0 8px rgba(88, 255, 143, 0.6); }
.pad-progress i { color: #5a5443; font-style: normal; }

.pad-ab { display: flex; gap: 10px; }

.pad-ab button {
  width: clamp(30px, 4.2vh, 36px);
  height: clamp(30px, 4.2vh, 36px);
  border-radius: 50%;
  font-family: var(--font-pix);
  font-size: clamp(9px, 1.5vh, 12px);
  color: #f4e6d0;
  background: radial-gradient(circle at 35% 30%, #c14a38, #8c2b22 70%);
  border: 1px solid #0c0b08;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  touch-action: manipulation;
}

.pad-ab button:active { transform: translateY(1px); }

/* ── ARCADE SHELL (hidden games) ─────────────────────────── */

#arcade {
  position: absolute;
  inset: 0;
  z-index: 55;
  background: #050505;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#arcade.open { display: flex; }

#arcade-canvas {
  image-rendering: pixelated;
  background: #050505;
  height: min(72%, 620px);
  width: auto;
  max-width: 94%;
}

.arcade-hud {
  font-family: var(--font-pix);
  font-size: clamp(8px, 1.5vh, 12px);
  color: var(--ink-dim);
  letter-spacing: 0.14em;
  text-align: center;
  line-height: 2;
}

.arcade-hud b { color: var(--amber); font-weight: 400; }

.arcade-exit {
  position: absolute;
  top: clamp(12px, 2.4vh, 24px);
  right: clamp(16px, 2.4vw, 28px);
  font-family: var(--font-term);
  font-size: clamp(17px, 2.4vh, 21px);
  color: var(--ink-dim);
  background: none;
  border: 1px solid #3a352c;
  border-radius: 4px;
  padding: 3px 12px 1px;
  cursor: pointer;
  letter-spacing: 0.1em;
  z-index: 2;
}
.arcade-exit:hover { color: var(--amber); border-color: var(--amber); }

/* controller-style D-pad + A button (touch devices) */
.arcade-touch {
  display: none;
  align-items: center;
  gap: 34px;
  margin-top: 4px;
}

.at-dpad {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(3, 46px);
}

.at-dpad button, .at-dpad .pc {
  font-family: var(--font-term);
  font-size: 20px;
  color: #cfc4a0;
  background: linear-gradient(180deg, #322d24, #201c15);
  border: 1px solid #0c0b08;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.at-dpad button:active { background: #4a4232; }
.at-dpad .pu { grid-area: 1 / 2; border-radius: 8px 8px 0 0; }
.at-dpad .pl { grid-area: 2 / 1; border-radius: 8px 0 0 8px; }
.at-dpad .pc { grid-area: 2 / 2; background: #262218; }
.at-dpad .pr { grid-area: 2 / 3; border-radius: 0 8px 8px 0; }
.at-dpad .pd { grid-area: 3 / 2; border-radius: 0 0 8px 8px; }

.at-a {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  font-family: var(--font-pix);
  font-size: 14px;
  color: #f4e6d0;
  background: radial-gradient(circle at 35% 30%, #c14a38, #8c2b22 70%);
  border: 1px solid #0c0b08;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 3px 5px rgba(0, 0, 0, 0.55);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.at-a:active { transform: translateY(1px); }

@media (hover: none) and (pointer: coarse) {
  .arcade-touch { display: flex; }
}

/* ── DEAD AIR (CH 00) ────────────────────────────────────── */

.deadair-msg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

.deadair-msg .na {
  font-family: var(--font-pix);
  font-size: clamp(14px, 2.6vh, 22px);
  color: rgba(233, 228, 213, 0.6);
  letter-spacing: 0.3em;
  font-weight: 400;
}

.deadair-msg .found {
  font-family: var(--font-term);
  font-size: clamp(19px, 2.8vh, 26px);
  color: var(--green);
  letter-spacing: 0.14em;
  text-shadow: 0 0 12px rgba(88, 255, 143, 0.6);
  opacity: 0;
  transition: opacity 0.6s;
}

#ch-00.signal-found .found { opacity: 1; animation: rec-blink 1.4s steps(1) infinite; }

/* ── VAULT UNLOCK CELEBRATION ────────────────────────────── */

#unlock-flash {
  position: absolute;
  inset: 0;
  z-index: 78;
  background: var(--amber);
  opacity: 0;
  pointer-events: none;
}

.anim #unlock-flash.go { animation: unlock-flash 0.7s ease-out; }

@keyframes unlock-flash {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ── REDUCED MOTION / SMALL SCREENS ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fx-band::before, .screen-inner, .osd-ch, .osd-name, .toast { animation: none !important; transition: none !important; }
}

@media (max-width: 720px) {
  .tv { padding: 6px; }
  .tv-bezel { padding: 7px; padding-bottom: 0; border-radius: 16px; }
  .tv-model { display: none; }
  .tv-badge { letter-spacing: 0.1em; font-size: 9px; }
  .tv-badge .atom { margin-right: 0.2em; }
  .tv-chin { padding-left: 2px; padding-right: 2px; gap: 6px; }
  .tv-controls { gap: 5px; }
  .tv-btn { padding: 6px 8px 4px; font-size: 14px; }
  .osd-ch { font-size: 26px; top: 10px; right: 12px; }
  .guide-cols { grid-template-columns: 1fr; }
  .osd-clock { display: none; }
  .at-dpad { grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(3, 42px); }
  .nes-pad {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
  }
  .pad-progress {
    order: -1;
    width: 100%;
    text-align: center;
    letter-spacing: 0.2em;
  }
}


/* ── brain jump: quiet tab to the other hemisphere ───────── */
.brain-jump {
  position: absolute;
  top: clamp(96px, 14vh, 130px);
  right: 0;
  z-index: 62;
  width: 66px;
  padding: 9px 7px 6px 11px;
  background: rgba(236, 229, 207, 0.1);
  border: 1px solid #262218;
  border-right: none;
  border-radius: 10px 0 0 10px;
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.brain-jump:hover { opacity: 1; transform: translateX(-3px); }
.brain-jump svg { display: block; width: 100%; height: auto; }

@media (max-width: 720px) { .brain-jump { width: 54px; } }