/* Retro amber-CRT theme. Inert unless <html class="retro"> (Konami code or ?retro=1). */

@font-face {
  font-family: "VT323";
  src: url("/fonts/VT323-Regular.woff2") format("woff2");
  font-display: swap;
}

html.retro {
  --crt-bg: #0a0700;
  --crt-bg2: #120c00;
  --crt-hi: #ffcc66;
  --crt-fg: #ffb000;
  --crt-mid: #d18f00;
  --crt-dim: #9a6a00;
  --crt-faint: #6b4a00;
  --crt-line: #4a3200;
  --crt-alert: #ff5f1f;
  background: var(--crt-bg);
}

/* ── Base ── */
html.retro body {
  background: var(--crt-bg) !important;
  color: var(--crt-fg);
  font-family: "VT323", "Courier New", monospace !important;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-shadow: 0 0 2px currentColor, 0 0 8px rgba(255, 176, 0, 0.35);
}
html.retro .text-xs { font-size: 0.95rem !important; }
html.retro .text-sm { font-size: 1.1rem !important; }
html.retro .font-sans,
html.retro button,
html.retro input,
html.retro code,
html.retro pre { font-family: "VT323", "Courier New", monospace !important; }
html.retro h1, html.retro h2, html.retro h3, html.retro .font-display, html.retro .kicker { font-family: "VT323", "Courier New", monospace !important; font-weight: 400 !important; }
html.retro ::selection { background: var(--crt-fg); color: #000; text-shadow: none; }

/* Boxy everything, no glass or soft shadows */
html.retro * { border-radius: 0 !important; box-shadow: none !important; }
html.retro [class*="backdrop-blur"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ── Backgrounds ── */
html.retro [class~="bg-bg"], html.retro [class~="bg-bg/60"], html.retro [class~="bg-bg/90"],
html.retro [class~="bg-bg2"], html.retro [class~="bg-bg2/95"], html.retro [class~="bg-bg3"],
html.retro [class*="bg-slate-"], html.retro [class~="bg-bdr"], html.retro [class~="bg-bg/95"],
html.retro [class~="bg-ink"] { background: var(--crt-bg) !important; }
/* Accent blocks (CTA band, "New" tags) and the light-theme accent buttons */
html.retro [class~="bg-gold"] { background: var(--crt-fg) !important; color: #000 !important; text-shadow: none; }
html.retro [class~="bg-gold"] * { color: #000 !important; text-shadow: none; }
html.retro [class~="text-paper"] { color: var(--crt-hi) !important; }
html.retro [class~="border-ink"] { border-color: var(--crt-line) !important; }
html.retro [class*="bg-amber-950"], html.retro [class*="bg-blue-950"], html.retro [class*="bg-green-9"],
html.retro [class*="bg-cyan-9"], html.retro [class*="bg-purple-9"], html.retro [class*="bg-teal-9"],
html.retro [class*="bg-red-9"] { background: transparent !important; }
html.retro [style*="linear-gradient"] { background: var(--crt-bg2) !important; }
html.retro [class*="from-gold"] { background-image: none !important; background: var(--crt-line) !important; }
html.retro .hero-radial { background: radial-gradient(ellipse at 50% -10%, rgba(255, 176, 0, 0.18) 0%, transparent 60%); }

/* Indicator dots & bars: solid phosphor */
html.retro [class~="bg-green-400"], html.retro [class~="bg-green-500"], html.retro [class~="bg-green-500/80"],
html.retro [class~="bg-amber-400"], html.retro [class~="bg-amber-400/80"], html.retro [class~="bg-amber-500"],
html.retro [class~="bg-blue-600"] { background: var(--crt-fg) !important; }
html.retro [class~="bg-red-500/80"] { background: var(--crt-alert) !important; }

/* ── Borders ── */
html.retro [class*="border-"] { border-color: var(--crt-line) !important; }
html.retro [class~="border-gold"], html.retro [class~="border-goldl"] { border-color: var(--crt-fg) !important; }
html.retro [class*="border-red-"] { border-color: var(--crt-alert) !important; }
html.retro [class*="ring-"] { --tw-ring-color: var(--crt-line) !important; }

/* ── Text ── */
html.retro [class~="text-white"], html.retro [class~="text-slate-100"],
html.retro [class~="text-slate-200"] { color: var(--crt-hi) !important; }
html.retro [class~="text-slate-300"], html.retro [class~="text-goldl"], html.retro [class~="text-amber-300"],
html.retro [class~="text-amber-400"], html.retro [class~="text-green-300"], html.retro [class~="text-green-400"],
html.retro [class~="text-blue-300"], html.retro [class~="text-cyan-300"], html.retro [class~="text-purple-300"],
html.retro [class~="text-teal-300"] { color: var(--crt-fg) !important; }
html.retro [class~="text-slate-400"] { color: var(--crt-mid) !important; }
html.retro [class~="text-slate-500"] { color: var(--crt-dim) !important; }
html.retro [class~="text-slate-600"] { color: var(--crt-faint) !important; }
html.retro [class~="text-red-300"], html.retro [class~="text-red-400"] { color: var(--crt-alert) !important; }

/* SVG sparklines etc. follow the phosphor */
html.retro svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]) { stroke: var(--crt-fg) !important; }
html.retro svg [fill]:not([fill="none"]):not([fill="currentColor"]) { fill: var(--crt-dim) !important; }

/* ── Links ── */
html.retro a:hover { color: var(--crt-hi) !important; }
html.retro nav ul a:hover::before, html.retro aside a:hover::before { content: "["; }
html.retro nav ul a:hover::after, html.retro aside a:hover::after { content: "]"; }
html.retro .prose a { color: var(--crt-hi); text-decoration: underline; }

/* ── Buttons: inverse video ── */
html.retro [class~="bg-gold"], html.retro [class~="bg-goldl"] {
  background: var(--crt-fg) !important;
  color: #000 !important;
  text-shadow: none;
  text-transform: uppercase;
}
html.retro a[class~="bg-gold"]:hover, html.retro button[class~="bg-gold"]:hover {
  background: #000 !important;
  color: var(--crt-fg) !important;
  outline: 1px solid var(--crt-fg);
}

/* ── Headings ── */
html.retro h1, html.retro h2, html.retro h3 { text-transform: uppercase; letter-spacing: 0.04em; }
html.retro .prose h1, html.retro .prose h2, html.retro .prose h3 { color: var(--crt-hi); }
html.retro .prose p, html.retro .prose li, html.retro .prose td, html.retro .prose th { color: var(--crt-mid); }
html.retro .prose code { background: transparent; color: var(--crt-hi); outline: 1px dashed var(--crt-line); }
html.retro h1::after {
  content: "\2588";
  margin-left: 0.15em;
  animation: retro-blink 1s steps(1) infinite;
}

/* ── CRT overlay ── */
html.retro body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.28) 3px),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.55) 100%);
}
html.retro body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: rgba(255, 176, 0, 0.025);
  animation: retro-flicker 0.15s infinite;
}

@keyframes retro-blink { 50% { opacity: 0; } }
@keyframes retro-flicker {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* ── Boot toast (created by retro.js) ── */
#retro-toast {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  min-width: 18rem;
  padding: 1rem 1.25rem;
  background: #000;
  color: #ffb000;
  border: 2px solid #ffb000;
  font-family: "VT323", "Courier New", monospace;
  font-size: 1.25rem;
  line-height: 1.3;
  white-space: pre;
  text-shadow: 0 0 2px currentColor, 0 0 8px rgba(255, 176, 0, 0.35);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html.retro body::after, html.retro h1::after { animation: none; }
}

/* ── Field-guide theme components (main.css): flatten paper effects ── */
html.retro .ruled, html.retro .field-tag, html.retro .specimen-label, html.retro .mounted, html.retro .barring, html.retro .notes-card {
  background: transparent !important;
  outline-color: var(--crt-line) !important;
}
html.retro .barring { border-top: 1px dashed var(--crt-line); }
html.retro .field-tag::before, html.retro .field-tag::after { display: none; }
html.retro .field-tag.featured { outline-color: var(--crt-fg) !important; }
html.retro .hand, html.retro .specimen-label i, html.retro .ipa { font-family: "VT323", "Courier New", monospace !important; font-style: normal; color: var(--crt-fg) !important; }
html.retro [class*="rotate-"] { transform: none !important; }
html.retro .range-map { color: var(--crt-dim); }
html.retro .range-map text { fill: var(--crt-fg); stroke: var(--crt-bg); font-family: "VT323", monospace; font-style: normal; }
html.retro .range-map .rm-dot { fill: var(--crt-hi) !important; }
html.retro [class~="text-gold"] { color: var(--crt-hi) !important; }
html.retro #cookie-banner .ruled { background: var(--crt-bg) !important; }