/* ==========================================================================
   Games page — 16-bit / arcade theme
   Scoped entirely to body.arcade-page. Loaded ONLY on games.html.
   Re-colors the site by overriding the shared CSS custom properties
   (they cascade into every var()-based rule in styles.css), then patches
   the handful of rules in styles.css that use hardcoded colors instead
   of variables.
   ========================================================================== */

body.arcade-page {
  --white:      #0a0821;
  --beige:      #140f33;
  --beige-2:    #1d1747;

  --black:      #050414;
  --black-2:    #0a0821;

  --ink:        #eafcff;
  --ink-soft:   rgba(210, 240, 255, .78);
  --ink-mute:   rgba(180, 210, 255, .55);

  --wine:       #ff2ec4;
  --wine-deep:  #a3128e;
  --wine-soft:  #ff6ad5;

  --gold:       #00e5ff;
  --gold-deep:  #00a8c2;
  --gold-bright:#fff35c;

  --cream:      #eafcff;

  --line:       rgba(0, 229, 255, .35);
  --line-soft:  rgba(0, 229, 255, .18);
  --line-gold:  rgba(255, 46, 196, .55);

  --shadow:     0 0 60px rgba(255, 46, 196, .22), 0 30px 70px rgba(0,0,0,.5);
  --shadow-sm:  0 0 24px rgba(0, 229, 255, .22), 0 10px 30px rgba(0,0,0,.4);

  --radius:     10px;
  --radius-md:  8px;
  --radius-sm:  5px;

  --font: "VT323", "Courier New", monospace;

  background: var(--white);
  position: relative;
  isolation: isolate;
}

/* ---------- Ambient CRT background: grid + scanlines ---------- */
body.arcade-page::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(rgba(0,229,255,.07) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, rgba(255,46,196,.06) 1px, transparent 1px) 0 0 / 42px 100%,
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255,46,196,.16), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(0,229,255,.14), transparent 60%),
    var(--white);
}
body.arcade-page::after {
  content: "";
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px,
    transparent 2px, transparent 4px
  );
  mix-blend-mode: overlay; opacity: .5;
}
@media (prefers-reduced-motion: reduce) {
  body.arcade-page::after { display: none; }
}

/* ---------- Pixel headings ---------- */
body.arcade-page h1,
body.arcade-page h2,
body.arcade-page h3,
body.arcade-page h4,
body.arcade-page .eyebrow,
body.arcade-page .nav-logo-name,
body.arcade-page .level-tag,
body.arcade-page .btn,
body.arcade-page .level-badge {
  font-family: "Press Start 2P", "VT323", monospace;
  text-transform: uppercase;
}

body.arcade-page h1 { letter-spacing: 0; line-height: 1.5; font-size: clamp(1.35rem, 3.4vw, 2.2rem); text-shadow: 0 0 12px rgba(255,46,196,.65), 0 0 30px rgba(255,46,196,.35); }
body.arcade-page h1 em { background: linear-gradient(120deg, var(--gold-bright), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
body.arcade-page .section-head h2 { letter-spacing: 0; line-height: 1.5; font-size: clamp(1.15rem, 2.6vw, 1.7rem); text-shadow: 0 0 12px rgba(0,229,255,.55), 0 0 26px rgba(0,229,255,.3); }
body.arcade-page .cta-final h2 { letter-spacing: 0; line-height: 1.6; font-size: clamp(1.05rem, 2.4vw, 1.6rem); text-shadow: 0 0 12px rgba(255,46,196,.6); }
body.arcade-page em { color: var(--wine); }

body.arcade-page .eyebrow { letter-spacing: .12em; color: var(--gold); text-shadow: 0 0 10px rgba(0,229,255,.6); }

/* Body copy stays on VT323 (readable at length); bump size since it renders small */
body.arcade-page,
body.arcade-page p,
body.arcade-page .nav-link,
body.arcade-page .footer-links a,
body.arcade-page .level-crumb,
body.arcade-page .level-hero-sub,
body.arcade-page .level-topic,
body.arcade-page .cta-final p {
  font-family: "VT323", "Courier New", monospace;
  letter-spacing: .01em;
}
body.arcade-page { font-size: 1.2rem; line-height: 1.45; }
body.arcade-page .level-hero-sub { font-size: 1.35rem; }
body.arcade-page .level-topic { font-size: 1.1rem; }
body.arcade-page .cta-final p { font-size: 1.3rem; }
body.arcade-page .nav-logo-tutor { font-family: "VT323", monospace; font-size: .8rem; letter-spacing: .14em; }

/* ---------- Nav: neon cabinet bar ---------- */
body.arcade-page .nav {
  background: rgba(5, 4, 20, .82);
  border-bottom: 1px solid transparent;
}
body.arcade-page .nav.is-solid {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(0,229,255,.25);
}
body.arcade-page .nav-logo-name { font-size: .68rem; letter-spacing: 0; color: var(--ink); }
body.arcade-page .nav-link:hover { color: var(--gold); text-shadow: 0 0 8px rgba(0,229,255,.7); }
body.arcade-page .nav-toggle { background: var(--beige); border-color: var(--line); color: var(--ink); }
@media (max-width: 720px) {
  body.arcade-page .nav.is-open .nav-links {
    background: rgba(5, 4, 20, .97);
    border-bottom: 1px solid var(--line);
  }
}

/* ---------- Buttons: chunky pixel-cabinet buttons ---------- */
body.arcade-page .btn {
  border-radius: var(--radius-sm);
  font-size: .78rem;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}
body.arcade-page .btn-primary {
  background: var(--wine);
  color: #fff0fb;
  box-shadow: 0 0 0 2px var(--wine-deep), 0 0 22px rgba(255,46,196,.55);
}
body.arcade-page .btn-primary:hover {
  background: var(--wine-soft);
  box-shadow: 0 0 0 2px var(--wine-deep), 0 0 34px rgba(255,46,196,.85);
  transform: translateY(-2px);
}
body.arcade-page .btn-ghost {
  color: var(--gold);
  border-color: var(--line);
}
body.arcade-page .btn-ghost:hover { border-color: var(--gold); background: rgba(0,229,255,.08); }
body.arcade-page .cta-final .btn-primary { background: var(--gold); color: var(--black); box-shadow: 0 0 0 2px var(--gold-deep), 0 0 22px rgba(0,229,255,.6); }
body.arcade-page .cta-final .btn-primary:hover { background: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold-deep), 0 0 34px rgba(0,229,255,.9); }

/* ---------- Hero media veil: neon wash instead of warm wine ---------- */
body.arcade-page .level-hero--media .level-hero-veil {
  background:
    linear-gradient(90deg, rgba(5,4,20,.94) 0%, rgba(5,4,20,.82) 40%, rgba(5,4,20,.5) 78%, rgba(5,4,20,.32) 100%),
    linear-gradient(180deg, rgba(255,46,196,.28) 0%, rgba(5,4,20,.15) 40%, rgba(0,229,255,.22) 100%);
}
body.arcade-page .level-hero::before {
  background: radial-gradient(circle, rgba(0,229,255,.28), transparent 70%);
}
body.arcade-page .level-crumb,
body.arcade-page .level-crumb a { color: rgba(200,240,255,.7); }
body.arcade-page .level-crumb a:hover { color: var(--gold); }
body.arcade-page .level-hero-sub { color: rgba(210,240,255,.88); }

/* ---------- Game cards: neon arcade-cabinet tiles ---------- */
body.arcade-page .level-card {
  background: var(--beige);
  border: 1px solid var(--line-soft);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
body.arcade-page .level-card:hover {
  background: var(--beige-2);
  box-shadow: 0 0 0 1px var(--gold), 0 0 40px rgba(0,229,255,.4), var(--shadow-sm);
}
body.arcade-page .level-tag {
  background: var(--wine);
  color: #fff0fb;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--wine-deep), 0 0 16px rgba(255,46,196,.6);
  font-size: .8rem;
}
body.arcade-page .level-card--soon .level-tag {
  background: var(--beige-2); color: var(--ink-mute); box-shadow: none;
}
body.arcade-page .level-card .level-link { color: var(--gold); text-shadow: 0 0 8px rgba(0,229,255,.5); }
body.arcade-page .level-card--soon .level-link { color: var(--ink-mute); text-shadow: none; }

/* ---------- Final CTA tile ---------- */
body.arcade-page .cta-final {
  background: var(--beige);
  border: 1px solid var(--line-soft);
}
body.arcade-page .cta-final::before {
  background: radial-gradient(50% 60% at 50% 0%, rgba(255,46,196,.22), transparent 70%);
}

/* ---------- Footer ---------- */
body.arcade-page .footer { background: var(--black); border-top: 1px solid var(--line-soft); }
body.arcade-page .footer-links a:hover { color: var(--gold); }

/* ---------- Embedded game frame (Villa Ñ) ---------- */
body.arcade-page .game-frame {
  box-shadow: 0 0 0 2px var(--gold), 0 0 50px rgba(0,229,255,.35), var(--shadow);
}

/* ---------- Tip box / lesson pager (Villa Ñ page) ---------- */
body.arcade-page .tip-box { border: 1px solid var(--line-soft); }
body.arcade-page .lesson-pager a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }

/* ---------- Section-level backgrounds inherit dark var(--white)/var(--beige); nothing else needed ---------- */