/* Signal: spy noir. A torch beam sweeps a pitch-black room; amber typewriter text. */
:root {
  --bg: #07080a; --bg2: #101114; --card: rgba(22, 21, 18, 0.9); --card2: #26241e; --line: #3b372c;
  --text: #f3ead7; --muted: #a69c86; --accent: #ffb000; --yellow: #ffcc4d; --red: #ff4d3d; --green: #7ed957;
  --grad: linear-gradient(135deg, #ffcc4d, #ff9500);
  --font-head: 'Special Elite', 'Courier New', monospace; --font-body: 'IBM Plex Sans', Inter, system-ui, sans-serif; --head-weight: 400;
  --radius: 6px;
}
body { background: radial-gradient(1200px 700px at 50% 120%, #1a1408, transparent 70%), #07080a fixed; }
.card { border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.03); }
.btn { border-radius: 4px; color: #1a1205; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-head); font-weight: 400; box-shadow: 0 0 0 1px #ffcc4d, 0 8px 24px rgba(255, 176, 0, 0.25); }
.btn.ghost { color: var(--text); box-shadow: none; }
h1, h2, h3, .banner { letter-spacing: 0.04em; }
.hero { color: #ffcc4d; text-shadow: 0 0 30px rgba(255, 176, 0, 0.6); letter-spacing: 0.12em; text-transform: uppercase; }
.big-code { background: none; color: #ffcc4d; -webkit-text-fill-color: #ffcc4d; text-shadow: 0 0 24px rgba(255, 176, 0, 0.6); }
.tv-top .phase { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.06em; }
.chip, .seg, .seg button, .option, .text-in, .code-input, .game-pick button { border-radius: 4px; }
.pop { animation: flicker 0.7s steps(1, end) both; }
@keyframes flicker { 0% { opacity: 0; } 10% { opacity: 1; } 18% { opacity: 0.1; } 26% { opacity: 1; } 34% { opacity: 0.3; } 42%, 100% { opacity: 1; } }
.wcard { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45); font-family: var(--font-head); font-weight: 400; letter-spacing: 0.04em; }

.scene .beam { position: absolute; left: 50%; bottom: -30vh; width: 260vmax; height: 260vmax; margin-left: -130vmax; transform-origin: 50% 50%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 210, 120, 0.11) 8deg, rgba(255, 220, 150, 0.2) 14deg, rgba(255, 210, 120, 0.11) 20deg, transparent 28deg, transparent 360deg);
  animation: sweep 14s ease-in-out infinite alternate; top: auto; height: 260vmax; bottom: -130vmax; }
@keyframes sweep { from { transform: rotate(-58deg); } to { transform: rotate(30deg); } }
.scene .grain { position: absolute; inset: -50%; opacity: 0.07; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 3px 3px; animation: grain 0.6s steps(3) infinite; }
@keyframes grain { 33% { transform: translate(-7px, 4px); } 66% { transform: translate(5px, -6px); } }
.scene .morse { position: absolute; right: 3vw; top: 3vh; display: flex; gap: 6px; align-items: center; opacity: 0.8; }
.scene .morse i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d3d; box-shadow: 0 0 10px #ff4d3d; opacity: 0.12; animation: blip 3.6s infinite; }
.scene .morse i.dash { width: 22px; border-radius: 5px; }
.scene .morse i.gap { background: none; box-shadow: none; width: 6px; }
@keyframes blip { 0%, 6% { opacity: 1; } 10%, 100% { opacity: 0.12; } }
.tv .scene .morse { top: auto; bottom: 9vh; right: 2vw; }