/*
  ============================================================
  MVP Algebra 1 — Theme Engine styles (shared)
  © 2026 Alondra Delgado. All rights reserved.
  Part of the MVP Algebra 1 platform.

  Phase 2 — Pass A / Batch A.4 (critical-path CSS split).
  Extracted VERBATIM from drill.html (theme variables L37–105 +
  rich animated backgrounds L117–457). "Refactoring is a MOVE, not a
  REDESIGN" (CLAUDE.md §12.2): no theme value (color, font, gradient,
  animation timing, decoration parameter) is changed here.

  This file is the theme system's CSS half. It is loaded via a
  render-blocking <link> in each consuming page's <head> (BEFORE the
  page's inline <style> and before the deferred module script) so the
  :root defaults, per-theme palettes, and base backgrounds apply at
  first paint — eliminating the unstyled-content flash that a
  JS-injected <style> caused (the deferred ES module ran after first
  paint). The JS half (theme switching/persistence + decoration
  builders) lives in shared/theme_engine.js.

  NOT included here (kept inline in the consuming page): the global
  reset / html,body base, the theme-picker chrome, and the
  component-conditional theme overrides (e.g. body.theme-sakura
  .topbar / .footer / .speed-prompt-info / .confirm-info).
  ============================================================
*/
  /* ============ THEME VARIABLES ============ */
  :root {
    --bg-1: #050818; --bg-2: #0e1438; --bg-3: #1a1245;
    --cyan: #00e5ff; --cyan-glow: #00e5ff80;
    --gold: #ffc233; --gold-glow: #ffc23380;
    --pink: #ff2d95; --green: #39ff14; --red: #ff3b3b;
    --text: #f0f4ff; --text-dim: #8a92b8;
    --panel: rgba(255, 255, 255, 0.04);
    --panel-border: rgba(255, 255, 255, 0.12);
    --primary-deep: #0099cc; --primary-darker: #006080;
    --grid-line: rgba(0, 229, 255, 0.04);
    --orb-1: rgba(0, 229, 255, 0.12);
    --orb-2: rgba(255, 45, 149, 0.10);
  }
  body.theme-neon {
    --bg-1: #02010a; --bg-2: #07051c; --bg-3: #0c0828;
    --cyan: #00f0ff; --cyan-glow: rgba(0, 240, 255, 0.6);
    --gold: #b6ff00; --gold-glow: rgba(182, 255, 0, 0.5);
    --pink: #ff2bd6; --green: #b6ff00; --red: #ff3060;
    --text: #f5fafe; --text-dim: #7a8aa0;
    --primary-deep: #00cce0; --primary-darker: #007a8a;
    --grid-line: rgba(0, 240, 255, 0.05);
    --orb-1: rgba(0, 240, 255, 0.14); --orb-2: rgba(255, 43, 214, 0.12);
  }
  body.theme-galaxy {
    --bg-1: #0a0420; --bg-2: #1a0a40; --bg-3: #2d1560;
    --cyan: #b794ff; --cyan-glow: rgba(183, 148, 255, 0.5);
    --gold: #ffd700; --gold-glow: rgba(255, 215, 0, 0.5);
    --pink: #ff6ad5; --green: #5dffd6; --red: #ff5577;
    --text: #f0e8ff; --text-dim: #9c8bbc;
    --primary-deep: #8a5cd9; --primary-darker: #5e3995;
    --grid-line: rgba(183, 148, 255, 0.05);
    --orb-1: rgba(183, 148, 255, 0.14); --orb-2: rgba(255, 106, 213, 0.12);
  }
  body.theme-matrix {
    --bg-1: #000000; --bg-2: #001a0a; --bg-3: #00331f;
    --cyan: #00ff41; --cyan-glow: rgba(0, 255, 65, 0.5);
    --gold: #ff5500; --gold-glow: rgba(255, 85, 0, 0.5);
    --pink: #00ffaa; --green: #00ff41; --red: #ff3030;
    --text: #d0ffd0; --text-dim: #5a8a5a;
    --primary-deep: #00cc33; --primary-darker: #008822;
    --grid-line: rgba(0, 255, 65, 0.05);
    --orb-1: rgba(0, 255, 65, 0.13); --orb-2: rgba(0, 255, 170, 0.10);
  }
  body.theme-sakura {
    --bg-1: #fff5f7; --bg-2: #ffe5ed; --bg-3: #ffd5e3;
    --cyan: #d63384; --cyan-glow: rgba(214, 51, 132, 0.4);
    --gold: #c9303a; --gold-glow: rgba(201, 48, 58, 0.4);
    --pink: #5b3fa0; --green: #2d8a4d; --red: #c9303a;
    --text: #2d1f3a; --text-dim: #6b5878;
    --panel: rgba(45, 31, 58, 0.05);
    --panel-border: rgba(45, 31, 58, 0.18);
    --primary-deep: #a02466; --primary-darker: #6e1845;
    --grid-line: rgba(214, 51, 132, 0.06);
    --orb-1: rgba(214, 51, 132, 0.12); --orb-2: rgba(91, 63, 160, 0.10);
  }
  body.theme-court {
    /* Light hardwood-tan palette with navy + orange accents */
    --bg-1: #f5e6c8; --bg-2: #ead4ad; --bg-3: #dec092;
    --cyan: #1d3557; --cyan-glow: rgba(29, 53, 87, 0.4);
    --gold: #e76f00; --gold-glow: rgba(231, 111, 0, 0.45);
    --pink: #c9303a; --green: #2d8a4d; --red: #c9303a;
    --text: #1a2b40; --text-dim: #5a6b80;
    --panel: rgba(255, 250, 240, 0.55);
    --panel-border: rgba(29, 53, 87, 0.2);
    --primary-deep: #14253f; --primary-darker: #0c1a2e;
    --grid-line: rgba(29, 53, 87, 0.05);
    --orb-1: rgba(231, 111, 0, 0.10); --orb-2: rgba(29, 53, 87, 0.08);
  }

  /* ============================================================
     RICH THEME BACKGROUNDS (animated)
     The #themeBg container holds all per-theme moving elements.
     Animations are dampened during active drill via .drill-active.
  ============================================================ */
  #themeBg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  /* Phones: the drifting shapes are sized for a desktop canvas. At 390px one
     shape can span half the screen and land directly on a card, washing out
     the content underneath. Keep the motion and the colour; drop the
     dominance so they read as background texture instead of foreground. */
  @media (max-width: 700px) {
    #themeBg { opacity: 0.22; }
  }
  @media (prefers-reduced-motion: reduce) {
    #themeBg { opacity: 0.15; }
    #themeBg * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
  }

  /* === NEON: cyberpunk midnight + drifting neon-tube outlines === */
  body.theme-neon {
    background:
      linear-gradient(180deg,
        #02010a 0%,
        #04031a 35%,
        #07051c 65%,
        #02010a 100%);
  }
  /* Soft neon glow accents radiating from corners */
  body.theme-neon::after {
    content: '';
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse 500px 600px at 0% 100%, rgba(0, 240, 255, 0.16), transparent 60%),
      radial-gradient(ellipse 500px 600px at 100% 0%, rgba(255, 43, 214, 0.14), transparent 60%),
      radial-gradient(ellipse 400px 400px at 100% 100%, rgba(182, 255, 0, 0.08), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  /* Subtle scanline overlay for the cyberpunk display feel */
  .neon-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(0, 240, 255, 0.025) 3px,
      rgba(0, 240, 255, 0.025) 4px
    );
    pointer-events: none;
    z-index: 4;
  }
  /* Neon-tube outline shapes that drift slowly across the screen */
  .neon-shape {
    position: absolute;
    pointer-events: none;
    animation: neonDrift linear forwards;
    opacity: 0;
  }
  .neon-shape svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }
  @keyframes neonDrift {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translate(var(--drift-x, 200px), var(--drift-y, -40px)) rotate(var(--spin, 60deg)); }
    90%  { opacity: 1; }
    100% { transform: translate(calc(var(--drift-x, 200px) * 2), calc(var(--drift-y, -40px) * 2)) rotate(calc(var(--spin, 60deg) * 2)); opacity: 0; }
  }
  /* Slow, hypnotic flicker on a small subset of shapes for that authentic broken-tube vibe */
  @keyframes neonFlicker {
    0%, 100% { filter: brightness(1); }
    47% { filter: brightness(1); }
    48% { filter: brightness(0.3); }
    49% { filter: brightness(1.2); }
    50% { filter: brightness(0.5); }
    51% { filter: brightness(1); }
  }
  .neon-shape.flicker svg { animation: neonFlicker 6s infinite; }

  /* === GALAXY: floating stars + shooting stars + nebula === */
  body.theme-galaxy {
    background:
      radial-gradient(ellipse 700px 400px at 18% 28%, rgba(180, 110, 255, 0.22), transparent 60%),
      radial-gradient(ellipse 600px 400px at 82% 72%, rgba(255, 100, 200, 0.18), transparent 60%),
      radial-gradient(ellipse 500px 400px at 50% 50%, rgba(100, 80, 200, 0.12), transparent 60%),
      linear-gradient(180deg, #0a0420 0%, #1a0a40 50%, #2d1560 100%);
  }
  .galaxy-stars {
    position: absolute; inset: 0;
  }
  .galaxy-stars span {
    position: absolute;
    width: 2px; height: 2px;
    background: white; border-radius: 50%;
    opacity: 0.85;
    animation: twinkle var(--twinkle-dur, 3s) ease-in-out infinite;
  }
  .galaxy-stars span.big {
    width: 3px; height: 3px;
    box-shadow: 0 0 6px white, 0 0 14px rgba(255, 255, 255, 0.5);
  }
  .galaxy-stars span.huge {
    width: 4px; height: 4px;
    box-shadow: 0 0 8px white, 0 0 18px var(--cyan-glow);
  }
  @keyframes twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.7); }
    50%      { opacity: 1;    transform: scale(1.2); }
  }
  .shooting-star {
    position: absolute;
    width: 3px; height: 3px;
    background: white; border-radius: 50%;
    box-shadow: 0 0 6px white, 0 0 16px white;
    opacity: 0;
  }
  .shooting-star::before {
    content: '';
    position: absolute;
    top: 50%; right: 100%;
    width: 140px; height: 1.5px;
    margin-top: -0.75px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85));
    transform-origin: right center;
  }
  .shooting-star.fly {
    animation: shoot 1.5s linear forwards;
  }
  @keyframes shoot {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translate(480px, 320px); opacity: 0; }
  }

  /* === SAKURA: soft clouds + falling cherry blossom petals === */
  body.theme-sakura {
    background:
      radial-gradient(ellipse at 15% 5%, #ffe5ed 0%, transparent 45%),
      radial-gradient(ellipse at 85% 95%, #ffd5e3 0%, transparent 45%),
      linear-gradient(180deg, #fff8fa 0%, #fff0f4 50%, #ffe5ed 100%);
  }
  .sakura-cloud {
    position: absolute;
    opacity: 0.9;
    animation: cloudDrift linear infinite;
    filter: drop-shadow(0 4px 12px rgba(214, 51, 132, 0.08));
  }
  .sakura-cloud svg {
    width: 100%;
    height: auto;
    display: block;
  }
  @keyframes cloudDrift {
    0%   { transform: translateX(-280px); }
    100% { transform: translateX(calc(100vw + 80px)); }
  }
  .petal {
    position: absolute;
    top: -30px;
    animation: petalFall linear forwards;
    pointer-events: none;
  }
  .petal svg {
    width: 100%;
    height: auto;
    display: block;
  }
  @keyframes petalFall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    8%   { opacity: 0.9; }
    100% {
      transform: translate(var(--sway, 60px), 110vh) rotate(var(--spin, 720deg));
      opacity: 0.5;
    }
  }

  /* === MATRIX: scanlines + glitch + falling characters === */
  body.theme-matrix {
    background: linear-gradient(180deg, #000000 0%, #001508 100%);
  }
  .matrix-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 255, 65, 0.045) 2px,
      rgba(0, 255, 65, 0.045) 3px
    );
    pointer-events: none;
    z-index: 5;
  }
  .matrix-scan-bar {
    position: absolute;
    left: 0; right: 0;
    height: 100px;
    background: linear-gradient(0deg,
      transparent,
      rgba(0, 255, 65, 0.04) 30%,
      rgba(0, 255, 65, 0.10) 50%,
      rgba(0, 255, 65, 0.04) 70%,
      transparent);
    animation: scanBar 7s linear infinite;
    pointer-events: none;
    z-index: 4;
  }
  @keyframes scanBar {
    0%   { top: -120px; }
    100% { top: 100vh; }
  }
  .matrix-glitch {
    position: absolute;
    inset: 0;
    background: rgba(0, 255, 65, 0.06);
    opacity: 0;
    pointer-events: none;
    z-index: 6;
    mix-blend-mode: screen;
  }
  .matrix-glitch.fire { animation: glitchFlick 0.22s; }
  @keyframes glitchFlick {
    0%   { opacity: 0; transform: translateX(0); filter: hue-rotate(0deg); }
    15%  { opacity: 1; transform: translateX(-6px); filter: hue-rotate(120deg); }
    30%  { opacity: 0.5; transform: translateX(8px); }
    50%  { opacity: 1; transform: translateX(-3px); filter: hue-rotate(-40deg); }
    75%  { opacity: 0.7; transform: translateX(2px); }
    100% { opacity: 0; transform: translateX(0); filter: hue-rotate(0deg); }
  }
  .matrix-column {
    position: absolute;
    top: -250px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    animation: matrixFall linear infinite;
    pointer-events: none;
    line-height: 1.2;
    color: rgba(0, 255, 65, 0.65);
    text-shadow: 0 0 4px currentColor;
    z-index: 2;
  }
  .matrix-column span:last-child {
    color: rgba(225, 255, 225, 1);
    text-shadow: 0 0 8px #00ff41, 0 0 14px #00ff41;
  }
  @keyframes matrixFall {
    0%   { transform: translateY(0); }
    100% { transform: translateY(calc(100vh + 250px)); }
  }

  /* === DAMPEN ANIMATIONS WHILE A QUESTION IS ON SCREEN (Option B) ===
     When the student is on an active question screen, all theme animations
     are paused or reduced to keep focus on the question. Pickers, results,
     welcome and confirm all keep full animations.

     .fte-active ADDED 27 Oct 2026, and it is a fix rather than an extension.
     The rule was written for .drill-active when Skill Drills was the only
     thing asking questions. Find the Error has set .fte-active since it
     shipped and was never named here, so a student reading a worked solution
     has had neon shapes drifting across it the whole time -- which is the
     exact distraction this block exists to remove. MVP Path sets the same
     class and would have inherited the same bug; it was visible the first
     time the new screen was photographed. */
  body.drill-active .matrix-scan-bar,
  body.drill-active .matrix-glitch,
  body.drill-active .galaxy-stars span,
  body.fte-active .matrix-scan-bar,
  body.fte-active .matrix-glitch,
  body.fte-active .galaxy-stars span,
  body.locked-out .matrix-scan-bar,
  body.locked-out .matrix-glitch,
  body.locked-out .galaxy-stars span {
    animation-play-state: paused;
  }
  body.drill-active .shooting-star,
  body.drill-active .petal,
  body.drill-active .sakura-cloud,
  body.drill-active .matrix-column,
  body.drill-active .neon-shape,
  body.drill-active .basketball,
  body.fte-active .shooting-star,
  body.fte-active .petal,
  body.fte-active .sakura-cloud,
  body.fte-active .matrix-column,
  body.fte-active .neon-shape,
  body.fte-active .basketball,
  /* .locked-out ADDED 28 Oct 2026, for the same reason .fte-active was: a new
     full-screen state that the original rule could not have known about. A
     lock screen is opaque, so nothing drifts across it -- but leaving thirty
     elements animating underneath one on a Chromebook is heat and battery
     spent on a page nobody can see. */
  body.locked-out .shooting-star,
  body.locked-out .petal,
  body.locked-out .sakura-cloud,
  body.locked-out .matrix-column,
  body.locked-out .neon-shape,
  body.locked-out .basketball {
    display: none;
  }
  /* Per-theme question card overlay so background doesn't fight the text */
  body.theme-neon .question-card    { background: rgba(2, 1, 10, 0.65); }
  body.theme-galaxy .question-card { background: rgba(10, 6, 28, 0.55); }
  body.theme-matrix .question-card { background: rgba(0, 10, 5, 0.65); }
  body.theme-sakura .question-card { background: rgba(255, 252, 254, 0.70); }
  body.theme-court .question-card { background: rgba(255, 250, 240, 0.85); }

  /* ---- Wall scrim (shared/wall.js), 23 Sept 2026 ----
     The wall dims the page behind it and floats a card on top. Its text uses
     var(--text), which is near-WHITE on the dark themes and near-BLACK on the
     two light ones -- so a single dark scrim put black text on a black veil and
     measured 1.3:1 on sakura. Invisible, and only found by measuring it.

     So the scrim is a token the theme owns, and wall.js just consumes it with a
     dark default. IF YOU ADD A LIGHT THEME, ADD IT HERE TOO, or its wall will
     be unreadable and nothing will tell you. tools/audit_wall_contrast.mjs
     checks every theme in the list and fails the build if one drops below 4.5:1
     on the title and body. */
  body.theme-sakura {
    --wall-scrim: rgba(255, 245, 247, 0.90);
    --wall-card:  rgba(255, 255, 255, 0.72);
    --wall-card-border: rgba(0, 0, 0, 0.12);
    /* The themed --gold is tuned for a dark page; on cream it is a pale wash. */
    --wall-num:   #b4501f;
  }
  body.theme-court {
    --wall-scrim: rgba(245, 230, 200, 0.92);
    --wall-card:  rgba(255, 252, 244, 0.80);
    --wall-card-border: rgba(0, 0, 0, 0.14);
    --wall-num:   #8a4a00;
  }

  /* === COURT: hardwood-tan + accurate court lines + bouncing basketballs === */
  body.theme-court {
    background:
      radial-gradient(ellipse at 50% 0%, #fff4dc 0%, transparent 40%),
      linear-gradient(180deg, #f5e6c8 0%, #ead4ad 50%, #dec092 100%);
  }
  /* Half-court markings — drawn as SVG so lines are crisp at any size.
     Width bumped wider to fill more of the screen, opacity lowered for a more subtle backdrop. */
  .court-markings {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(95vw, 1100px);
    height: min(95vw, 1100px); /* square aspect; on shorter screens the top of the court extends above the viewport */
    margin-left: calc(min(95vw, 1100px) / -2);
    z-index: 1;
    pointer-events: none;
    opacity: 0.28;
  }
  .court-markings svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  /* Bouncing basketballs */
  .basketball {
    position: absolute;
    pointer-events: none;
    animation: basketballBounce linear forwards;
    filter: drop-shadow(0 8px 12px rgba(80, 40, 10, 0.3));
  }
  .basketball svg {
    width: 100%;
    height: auto;
    display: block;
    animation: basketballSpin linear infinite;
  }
  @keyframes basketballSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(720deg); }
  }
  /* Bounces in arcs across the screen with realistic bounce physics */
  .basketball.from-left  { animation-name: basketballArcRight; left: -100px; }
  .basketball.from-right { animation-name: basketballArcLeft;  right: -100px; }
  @keyframes basketballArcRight {
    0%   { transform: translate(0, 0); opacity: 0; }
    8%   { opacity: 1; }
    25%  { transform: translate(28vw, -180px); }
    50%  { transform: translate(50vw, 60px); }
    75%  { transform: translate(75vw, -120px); }
    92%  { opacity: 1; }
    100% { transform: translate(120vw, 100px); opacity: 0; }
  }
  @keyframes basketballArcLeft {
    0%   { transform: translate(0, 0); opacity: 0; }
    8%   { opacity: 1; }
    25%  { transform: translate(-28vw, -180px); }
    50%  { transform: translate(-50vw, 60px); }
    75%  { transform: translate(-75vw, -120px); }
    92%  { opacity: 1; }
    100% { transform: translate(-120vw, 100px); opacity: 0; }
  }

  /* ============ END RICH THEME BACKGROUNDS ============ */