/* ════════════════════════════════════════════════════════════════
   AniQuizzer — Retro VHS Theme (shared overlay)
   Loaded AFTER each page's inline <style>, so it overrides tokens
   and chrome without touching any game JS or DOM.
   Backup of pre-redesign pages: backups/20260622_132535_pre-redesign/
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=Noto+Sans+JP:wght@700;900&display=swap');

/* ── Token overrides — everything that uses var(--brand) etc. recolors ── */
:root {
  --bg: #0d0a14 !important;
  --surface: #1a1428 !important;
  --card: #241a3a !important;
  --card-hov: #2c2048 !important;
  --card2: #2c2048 !important;
  --border: #3a2a5c !important;
  --border-hov: rgba(0,229,255,0.4) !important;
  --text: #f0eaff !important;
  --text2: #b8a8d8 !important;
  --text3: #7a6aa0 !important;
  /* brand → hot pink */
  --brand: #ff2e88 !important;
  --brand-light: #ff6eae !important;
  --brand-glow: rgba(255,46,136,0.14) !important;
  --brand-solid: #ff2e88 !important;
  /* accents remapped to the VHS palette */
  --green: #39ff14 !important;
  --green-glow: rgba(57,255,20,0.12) !important;
  --amber: #ffe600 !important;
  --amber-glow: rgba(255,230,0,0.12) !important;
  --red: #ff2e88 !important;
  --red-glow: rgba(255,46,136,0.12) !important;
  /* VHS-specific helpers */
  --hot: #ff2e88; --cyan: #00e5ff; --yellow: #ffe600; --purple: #a855f7; --vgreen: #39ff14;
}

body { font-family: 'Space Mono', monospace !important; position: relative; }

/* ── Vaporwave + CRT background, painted on html/body pseudo-elements
      (no HTML edits needed). Kept BEHIND content (negative z-index on
      html layers; overlays use pointer-events:none). ── */
html::before {            /* perspective grid */
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(168,85,247,0.05) 80px, rgba(168,85,247,0.05) 82px),
    repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(0,229,255,0.03) 80px, rgba(0,229,255,0.03) 82px);
  transform: perspective(400px) rotateX(60deg); transform-origin: bottom;
  opacity: .5;
}
html::after {             /* sun glow */
  content:''; position:fixed; left:50%; top:30%; transform:translate(-50%,-50%);
  width:380px; height:380px; border-radius:50%; z-index:-1; pointer-events:none;
  background: linear-gradient(180deg, #ff2e88, #a855f7); filter: blur(40px); opacity:.12;
}
body::before {            /* scanlines */
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.06), rgba(0,0,0,0.06) 1px, transparent 1px, transparent 4px);
}
body::after {             /* vignette */
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 72%, rgba(0,0,0,0.3));
}
body.reduced-motion html::before, body.reduced-motion html::after { animation:none; }

/* keep real UI above the background layers */
.main, .content, .sidebar, footer { position: relative; z-index: 1; }
nav, .topbar, header { position: relative; z-index: 100; }

/* ── Nav ── */
nav {
  border-bottom: 2px solid var(--hot) !important;
  background: rgba(13,10,20,0.9) !important;
}
.logo {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important; letter-spacing: 2px !important; color: var(--hot) !important;
}
.logo .l-white { color: #fff !important; text-shadow: none; }
.nav-links a {
  border: 1px solid var(--border); border-radius: 4px;
  font-weight: 700 !important; letter-spacing: 1px; text-transform: uppercase; font-size: 12px !important;
}
.nav-links a:hover { color: var(--cyan) !important; border-color: var(--cyan); background: transparent !important; }
.nav-links a.active { background: var(--hot) !important; color: var(--bg) !important; border-color: var(--hot); box-shadow: 0 0 12px rgba(255,46,136,.5); }
.nav-icon { border-radius: 4px !important; }
.nav-icon:hover { border-color: var(--cyan) !important; }
.nav-avatar {
  border-radius: 4px !important; background: var(--purple) !important;
  border: 2px solid var(--cyan); font-family: 'Bebas Neue', sans-serif !important; font-size: 15px !important;
}
.nav-auth .register { background: var(--hot) !important; color: var(--bg) !important; }
.nav-auth a { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; font-size: 13px !important; }

/* ── Sidebar ── */
.sidebar { border-right: 2px solid var(--border) !important; }
.sidebar-sec {
  font-family: 'Bebas Neue', sans-serif !important; font-size: 13px !important;
  letter-spacing: 2px !important; color: var(--cyan) !important;
}
.sidebar-item.active { background: var(--brand-glow) !important; color: var(--hot) !important; box-shadow: inset 2px 0 0 var(--hot); }

/* ── Headings get the display font ── */
h1, h2, h3, .lb-hdr h3, .section-hdr h2 {
  font-family: 'Bebas Neue', sans-serif !important; letter-spacing: 1.5px !important;
}

/* ── Scrollbars ── */
::-webkit-scrollbar-thumb { background: var(--hot) !important; }

/* ── CRT effect toggle (off = hide scanlines / vignette / grid / glow) ── */
html.crt-off::before, html.crt-off::after,
html.crt-off body::before, html.crt-off body::after { display: none !important; }

/* Nav toggle button: glows cyan when on, dims when off */
.nav-icon.crt-toggle { cursor: pointer; }
.nav-icon.crt-toggle.active { border-color: var(--cyan) !important; color: var(--cyan) !important; box-shadow: 0 0 8px rgba(0,229,255,.4); }
.nav-icon.crt-toggle:not(.active) { opacity: .55; }

/* ══ Light theme (data-theme="light") — flips surfaces, keeps the brand ══ */
html[data-theme="light"] {
  --bg: #f5f0fb !important;
  --surface: #ece4f6 !important;
  --card: #ffffff !important;
  --card-hov: #f3edfb !important;
  --card2: #f5f0fb !important;
  --border: #e2d6f2 !important;
  --border-hov: rgba(8,145,178,0.45) !important;
  --text: #2a1f42 !important;
  --text2: #6b5a8a !important;
  --text3: #9a8ab5 !important;
  --brand: #ff2e88 !important;
  --brand-light: #c81e6f !important;
  --brand-glow: rgba(255,46,136,0.12) !important;
  --brand-solid: #ff2e88 !important;
  --green: #15803d !important;
  --green-glow: rgba(21,128,61,0.12) !important;
  --amber: #b45309 !important;
  --amber-glow: rgba(180,83,9,0.12) !important;
  --red: #dc2626 !important;
  --red-glow: rgba(220,38,38,0.10) !important;
  --hot: #ff2e88 !important;
  --cyan: #0891b2 !important;
  --yellow: #c026d3 !important;
  --purple: #a855f7 !important;
  --vgreen: #15803d !important;
  color-scheme: light;
}
/* dim the CRT / vaporwave background layers for daytime */
html[data-theme="light"]::before { opacity: .22 !important; }      /* perspective grid */
html[data-theme="light"]::after  { opacity: .05 !important; }      /* sun glow */
html[data-theme="light"] body::before { opacity: .3 !important; }  /* scanlines (faint) */
html[data-theme="light"] body::after  { display: none !important; } /* dark vignette off */
/* fix white-on-white + known hardcoded dark surfaces */
html[data-theme="light"] nav { background: rgba(255,253,255,0.92) !important; }
html[data-theme="light"] .logo .l-white { color: var(--text) !important; }
html[data-theme="light"] .vhs-screen { background: #ece4f6 !important; }
html[data-theme="light"] .vs { background: #efe8f7 !important; }
html[data-theme="light"] .cover { background: #ece4f6 !important; }
/* Daily hub — old-design surfaces that hardcode dark backgrounds */
html[data-theme="light"] .hub-card { background: linear-gradient(145deg,#ffffff,#f3eefb) !important; }
html[data-theme="light"] .ds-card { background: #ffffff !important; }
html[data-theme="light"] .replay-sec { background: #ffffff !important; }
html[data-theme="light"] .hub-icon { background: linear-gradient(135deg,rgba(255,46,136,0.14),rgba(168,85,247,0.10)) !important; }

/* ══ Nav dropdowns: tap-to-open (mobile) + keep nav visible on small screens ══ */
.nav-group:hover .nav-dropdown, .nav-group.open .nav-dropdown { display: flex !important; }
@media (max-width: 860px) {
  /* nav is only 3 items now — show it on mobile instead of hiding */
  .nav-links { display: flex !important; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  /* nav-links already wraps (above); nav-right (icons/auth) didn't, causing
     horizontal overflow on every page below ~760px — let it wrap too. */
  html, body { overflow-x: hidden; }
  nav { flex-wrap: wrap; row-gap: 8px; }
  .nav-right { flex-wrap: wrap; row-gap: 8px; width: 100%; justify-content: flex-start; }
  .nav-dropdown { position: static !important; transform: none !important; width: 100%; box-shadow: none; }
  .nav-group.open .nav-dropdown { flex-wrap: wrap; }
}