/* ============================================================
   Two palettes. Ember is the default (tokens live in base.css :root).
   Neon Noir: purple black, electric orange, a little neon.
   ============================================================ */
[data-theme="ember"] .hero-title { text-shadow: 0 0 80px var(--accent-soft); }

[data-theme="neon"] {
  --bg: #07040d; --bg-2: #100a1c; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.08);
  --border: rgba(170, 120, 255, 0.18); --text: #f6f0ff; --muted: #9b8fb8;
  --accent: #ff7a1a; --accent-2: #ffb347; --accent-soft: rgba(255, 122, 26, 0.22); --pumpkin: #ff7a1a; --rim: #8b5cf6;
  --font-display: "Syne", "Space Grotesk", sans-serif; --title-weight: 800; --title-tracking: -0.03em;
  --glow: 0 0 24px rgba(255, 122, 26, 0.45), 0 0 60px rgba(255, 122, 26, 0.2);
}
[data-theme="neon"] .bg-glow i:nth-child(2) { background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 60%); }
[data-theme="neon"] .hero-title { letter-spacing: -0.05em; background: none; color: var(--text); -webkit-text-stroke: 1px var(--accent); text-shadow: 0 0 12px var(--accent), 0 0 40px var(--accent-soft), 0 0 90px var(--accent-soft); animation: neon-flicker 6s infinite; }
@keyframes neon-flicker { 0%, 18%, 22%, 100% { opacity: 1; } 20% { opacity: 0.55; } 21% { opacity: 1; } 63% { opacity: 0.8; } 64% { opacity: 1; } }
[data-theme="neon"] .facts li b, [data-theme="neon"] .rules li span, [data-theme="neon"] .link b { text-shadow: 0 0 18px var(--accent-soft); }
[data-theme="neon"][data-version="bats"] .hero::before { background: radial-gradient(circle at 40% 35%, #fff5ff, #d9c6ff 55%, #8b5cf6 100%); box-shadow: 0 0 80px rgba(139, 92, 246, 0.5), 0 0 200px rgba(139, 92, 246, 0.25); }
/* Syne is very wide: on small phones the neon title would shrink to 30px, so it borrows the body font there and keeps the neon glow */
@media (max-width: 480px) { [data-theme="neon"] .hero-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -0.04em; } }