/* Tune In: neon synthwave radio. Magenta and cyan on a midnight sunset. */
:root {
  --bg: #140626; --bg2: #1d0a36; --card: rgba(38, 14, 66, 0.82); --card2: #3a1764; --line: #5b2a8f;
  --text: #fdf2ff; --muted: #c4a6e0; --accent: #3ee7ff; --yellow: #ffcf5c; --red: #ff3e7f; --green: #5dffb0;
  --grad: linear-gradient(100deg, #ff3ea5, #ffb347);
  --font-head: 'Audiowide', var(--font-body); --font-body: 'Exo 2', Inter, system-ui, sans-serif; --head-weight: 400;
  --radius: 14px;
}
body { background: linear-gradient(180deg, #0b0318 0%, #1c0838 55%, #3a0b4f 100%) fixed; }
h1, h2, h3, .banner, .big-word, .tv-top .title { text-shadow: 0 0 18px rgba(255, 62, 165, 0.55); }
.card { backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(62, 231, 255, 0.08), 0 10px 40px rgba(255, 62, 165, 0.12); }
.btn { color: #1a0526; box-shadow: 0 0 22px rgba(255, 62, 165, 0.45); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-head); font-weight: 400; }
.btn.ghost { box-shadow: none; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 800; }
.big-code { background: linear-gradient(90deg, #3ee7ff, #ff3ea5, #ffb347); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 14px rgba(62, 231, 255, 0.5)); }
.tv-top .phase { color: var(--accent); text-shadow: 0 0 10px rgba(62, 231, 255, 0.6); }
.hero { background: linear-gradient(180deg, #ffe66d 10%, #ff3ea5 60%, #b45cff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none !important; filter: drop-shadow(0 0 20px rgba(255, 62, 165, 0.6)); }
.pop { animation: tuneIn 0.6s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes tuneIn { 0% { opacity: 0; transform: scaleY(0.05) scaleX(1.3); filter: blur(6px) brightness(3); } 40% { opacity: 1; transform: scaleY(1.1) scaleX(0.97); filter: blur(1px) brightness(1.6); } 100% { transform: none; filter: none; } }
.clue-big { color: #fff; text-shadow: 0 0 8px #3ee7ff, 0 0 26px #ff3ea5; }

.scene .sun { position: absolute; left: 50%; bottom: 28vh; width: 46vmin; height: 46vmin; transform: translateX(-50%); border-radius: 50%;
  background: repeating-linear-gradient(180deg, transparent 0 58%, #1c0838 58% 61%, transparent 61% 66%, #1c0838 66% 70%, transparent 70% 76%, #1c0838 76% 81%, transparent 81%), linear-gradient(180deg, #ffe66d, #ff7a59 50%, #ff3ea5);
  opacity: 0.32; filter: blur(0.5px) drop-shadow(0 0 60px #ff3ea5); }
.scene .grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 30vh; transform-origin: bottom; transform: perspective(300px) rotateX(62deg);
  background-image: linear-gradient(rgba(255, 62, 165, 0.55) 2px, transparent 2px), linear-gradient(90deg, rgba(62, 231, 255, 0.4) 2px, transparent 2px);
  background-size: 70px 50px; animation: gridrun 1.4s linear infinite; opacity: 0.55; mask-image: linear-gradient(transparent, #000 40%); -webkit-mask-image: linear-gradient(transparent, #000 40%); }
@keyframes gridrun { to { background-position: 0 50px, 0 0; } }
.scene .ring { position: absolute; left: calc(50% - 15px); bottom: calc(28vh + 23vmin - 15px); width: 30px; height: 30px; border-radius: 50%; border: 3px solid #3ee7ff; opacity: 0; animation: ring 6s ease-out infinite; }
@keyframes ring { 0% { transform: scale(0.3); opacity: 0.35; } 100% { transform: scale(18); opacity: 0; } }
.scene.small .sun { bottom: 30vh; width: 70vmin; height: 70vmin; opacity: 0.2; }
.scene.small .grid { opacity: 0.3; }