/* ═══════════════════════════════════════════════════════════════════════════
   raproot-night.css — the World of Raproot twilight theme (shared, OPT-IN)

   USAGE
   1. Add AFTER the page's own styles (inline <style> or app.css):
        <link rel="stylesheet" href="raproot-night.css">
   2. Opt the page in with a body class — nothing applies without one:
        <body class="rw-night">        full twilight re-theme (child pages)
        <body class="rw-night-shell">  backdrop + header only, NO token
                                       changes (app.html writing shell)
   3. Optional fireflies — paste right after <body> on rw-night pages:
        <div class="rw-fireflies" aria-hidden="true">
          <span></span><span></span><span></span><span></span>
        </div>

   HOW IT WORKS
   - rw-night redefines the shared design tokens (--paper, --ink, --muted,
     --border, --sun, --sky, --leaf, --rose, --plum, --cream) ON BODY, so
     they override each page's inline :root copy AND flow into the styles
     injected at runtime by recommend.js / leaderboard.js / sparks.js —
     those JS files need no changes.
   - TIME OF DAY: the default rw-night canvas is "Raproot dusk" (deep pine
     and forest-teal sky with a warm amber horizon — matching the world
     map's mood). The additional modifier class `rw-midnight` re-points the
     same variables to the deep indigo night skin. It is PARKED for a
     future feature that matches the child's real local time at login
     (dusk by day, midnight in the late evening) — do not delete it.
     Future wiring is one JS line, e.g.:
       if (new Date().getHours() >= 20 || new Date().getHours() < 5)
         document.body.classList.add('rw-midnight');
   - REGIONS: a second opt-in class places the page in one region of the
     world map — body.rw-region-village | -drumwood | -peak | -falls |
     -tree. Each overrides only the region variables (horizon hue, accent
     tint set, treeline silhouette, particle flavor) and composes with
     either time-of-day skin. No region class = "the Story Path" neutral
     wilds. Pair it with a .rw-region-chip ("You are in ...") and,
     optionally, a .rw-region-banner vignette cropped from the map.
   - Accent tokens are re-tuned to GLOW on the night canvas (lighter, more
     luminous versions of the same brand hues). Conventions:
       · light accents (--sun/--sky/...) = text, icons, borders ON dark
       · --sky-deep etc.               = solid fills UNDER white text
       · --ink-solid                   = text ON bright accent fills
       · --paper-solid                 = true parchment reading surfaces
   - The scenery (sky, stars, treeline) lives on body::before/::after at
     z-index -2/-1. The page body MUST NOT gain transform/filter styles or
     the negative z-index layers will cover content.
   - Animations only touch opacity/transform and are fully disabled under
     prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Canvas tokens — default skin: RAPROOT DUSK ─────────────────────── */
body.rw-night {
  /* dusk sky (consumed by the ::before gradient) */
  --rw-sky-top:      #22284E;
  --rw-sky-mid:      #1D3A4A;
  --rw-sky-low:      #2E5747;
  --rw-horizon:      #6B3D20;
  --rw-horizon-glow: rgba(255,166,74,0.30);
  --night-deep:      #14211E;
  --silhouette:      #0E1A16;
  --rw-star-opacity: 0.7;

  /* skinned component fills */
  --rw-nav-bg:       rgba(13,24,20,0.9);
  --rw-featured-bg:  #2C453C;

  /* brand accents, glow-tuned (same names as the daylight palette) */
  --sun:  #FFC94D;
  --sky:  #5BC8EA;
  --leaf: #6FD99F;
  --rose: #FF9E7E;
  --plum: #B79CE4;

  /* neutrals — re-pointing these flips token-driven components dark */
  --cream:  #14211E;
  --paper:  #223A34;
  --ink:    #F7F3E8;
  --muted:  #B3BFB2;
  --border: rgba(255,244,214,0.14);

  /* support tokens */
  --ink-solid:   #2D2D2D;
  --paper-solid: #FFF8ED;
  --sky-deep:    #177E9B;
  --sun-tint:    rgba(255,183,3,0.12);
  --sun-line:    rgba(255,183,3,0.45);
  --plum-tint:   rgba(183,156,228,0.16);
  --leaf-tint:   rgba(111,217,159,0.16);
  --glow-sun:    0 0 18px rgba(255,201,77,0.35);
  --glow-plum:   0 0 22px rgba(123,94,167,0.45);

  /* region defaults = "the Story Path" (no region class) */
  --rw-region-accent: var(--sun);
  --rw-region-tint:   var(--sun-tint);
  --rw-region-line:   var(--sun-line);
  --rw-region-glow:   var(--glow-sun);

  background: var(--cream);
  color: var(--ink);
}

/* ── 1b. PARKED skin: rw-midnight (deep indigo night) ──────────────────────
   The original Phase A palette, kept whole for the future time-of-day
   feature (match the child's real local hour at login). Do not delete. */
body.rw-night.rw-midnight {
  --rw-sky-top:      #2B2062;
  --rw-sky-mid:      #1E1B4B;
  --rw-sky-low:      #1E1B4B;
  --rw-horizon:      #3A2A66;
  --rw-horizon-glow: rgba(255,241,200,0.08);
  --night-deep:      #141232;
  --silhouette:      #0F0D26;
  --rw-star-opacity: 1;

  --rw-nav-bg:       rgba(20,17,46,0.88);
  --rw-featured-bg:  #2A2560;

  --cream:  #171335;
  --paper:  #262052;
  --ink:    #F4F1FF;
  --muted:  #A9A3D0;
  --border: rgba(255,255,255,0.13);
}

/* ── 2. Scenery: sky + stars (::before), treeline (::after) ────────────────
   The sky is fully variable-driven so the dusk default, the parked
   rw-midnight skin, and the region classes all reshape it without new
   selectors. --rw-stars holds the whole star layer list. */
body.rw-night,
body.rw-night-shell {
  /* base treeline = "the Story Path" wilds; region classes override this */
  --rw-treeline: url("treeline-base.png");
  /* dusk: sparse "first stars of evening", upper sky only */
  --rw-stars:
    radial-gradient(1.5px 1.5px at 8% 12%,  rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px     at 19% 28%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 27% 8%,  rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px     at 36% 21%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 13%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 61% 7%,  rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px     at 68% 24%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 17%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px     at 88% 29%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 94% 9%,  rgba(255,255,255,0.6), transparent 60%);
}
body.rw-night.rw-midnight {
  /* midnight: the full Phase A star field + moon glow */
  --rw-stars:
    radial-gradient(1.5px 1.5px at 8% 12%,  rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px     at 19% 28%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 27% 8%,  rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px     at 36% 21%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 13%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px     at 52% 31%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 61% 7%,  rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px     at 68% 24%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 17%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px     at 88% 29%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 94% 9%,  rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px     at 13% 44%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1px 1px     at 57% 47%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px     at 83% 42%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(circle 220px at 82% 12%, rgba(255,241,200,0.10), transparent 70%);
}

body.rw-night::before,
body.rw-night-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    var(--rw-stars),
    radial-gradient(120% 34% at 50% 88%, var(--rw-horizon-glow, rgba(255,166,74,0.30)), transparent 70%),
    linear-gradient(180deg,
      var(--rw-sky-top, #22284E) 0%,
      var(--rw-sky-mid, #1D3A4A) 42%,
      var(--rw-sky-low, #2E5747) 68%,
      var(--rw-horizon, #6B3D20) 88%,
      var(--night-deep, #14211E) 100%);
  animation: rw-twinkle 7s ease-in-out infinite;
}

body.rw-night::after,
body.rw-night-shell::after {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: min(30vh, 260px);
  z-index: -1;
  pointer-events: none;
  background-image: var(--rw-treeline);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: auto 100%;
}

/* ── 2b. Region layer ──────────────────────────────────────────────────────
   One class places the page in a region of the world map. Each overrides
   only the region variables; everything else (cards, chips, text) keeps the
   shared dusk skin, so regions compose with rw-midnight too. */

body.rw-region-village {
  --rw-horizon: #7A481F;
  --rw-horizon-glow: rgba(255,178,84,0.34);
  --rw-region-accent: var(--sun);
  --rw-region-tint: var(--sun-tint);
  --rw-region-line: var(--sun-line);
  --rw-region-glow: var(--glow-sun);
  --rw-treeline: url("treeline-village.png");
}

body.rw-region-drumwood {
  --rw-sky-low: #2F5537;
  --rw-horizon: #5C4A14;
  --rw-horizon-glow: rgba(255,214,90,0.26);
  --rw-region-accent: var(--leaf);
  --rw-region-tint: var(--leaf-tint);
  --rw-region-line: rgba(111,217,159,0.45);
  --rw-region-glow: 0 0 18px rgba(111,217,159,0.3);
  --rw-treeline: url("treeline-drumwood.png");
}

body.rw-region-peak {
  --rw-sky-mid: #333B54;
  --rw-sky-low: #41475F;
  --rw-horizon: #4E4468;
  --rw-horizon-glow: rgba(255,196,120,0.18);
  --silhouette: #232032;
  --rw-region-accent: var(--plum);
  --rw-region-tint: var(--plum-tint);
  --rw-region-line: rgba(183,156,228,0.45);
  --rw-region-glow: var(--glow-plum);
  --rw-treeline: url("treeline-peak.png");
}

body.rw-region-falls {
  --rw-sky-low: #1E4F52;
  --rw-horizon: #1F5F5C;
  --rw-horizon-glow: rgba(111,224,231,0.22);
  --rw-region-accent: #6FE0E7;
  --rw-region-tint: rgba(111,224,231,0.14);
  --rw-region-line: rgba(111,224,231,0.45);
  --rw-region-glow: 0 0 18px rgba(111,224,231,0.35);
  --rw-treeline: url("treeline-falls.png");
}

body.rw-region-tree {
  --rw-horizon: #7A5512;
  --rw-horizon-glow: rgba(255,208,84,0.40);
  --rw-region-accent: #FFD75E;
  --rw-region-tint: rgba(255,215,94,0.14);
  --rw-region-line: rgba(255,215,94,0.5);
  --rw-region-glow: 0 0 22px rgba(255,215,94,0.45);
  --rw-treeline: url("treeline-tree.png");
}

/* The Raproot Training School — Spark's place, OUTSIDE the five worlds. The
   worlds own the region skins above (the world player re-points its body class
   per world); every training page sits here instead. Lantern-amber, warmer and
   deeper than the village so the school reads as indoors-at-dusk. Reuses the
   village treeline until dedicated school art exists. */
body.rw-region-school {
  --rw-sky-low: #33291B;
  --rw-horizon: #6A3F12;
  --rw-horizon-glow: rgba(255,196,102,0.38);
  --rw-region-accent: #FFC94D;
  --rw-region-tint: rgba(255,201,77,0.14);
  --rw-region-line: rgba(255,201,77,0.48);
  --rw-region-glow: 0 0 20px rgba(255,201,77,0.4);
  --rw-treeline: url("treeline-village.png");
}

@keyframes rw-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.92; }
}

/* Fireflies — optional drifting amber motes over the treeline */
.rw-fireflies {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.rw-fireflies span {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #FFC94D;
  box-shadow: 0 0 8px 3px rgba(255,201,77,0.5);
  opacity: 0;
  animation: rw-drift 13s ease-in-out infinite;
}
.rw-fireflies span:nth-child(1) { left: 12%; bottom: 14%; animation-duration: 13s; }
.rw-fireflies span:nth-child(2) { left: 38%; bottom: 8%;  animation-duration: 17s; animation-delay: 2.5s; }
.rw-fireflies span:nth-child(3) { left: 64%; bottom: 18%; animation-duration: 11s; animation-delay: 1.2s; animation-direction: reverse; }
.rw-fireflies span:nth-child(4) { left: 86%; bottom: 10%; animation-duration: 15s; animation-delay: 4s; }
@keyframes rw-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 0.85; }
  50%  { transform: translate(22px, -34px); opacity: 0.35; }
  70%  { opacity: 0.8; }
  100% { transform: translate(0, 0); opacity: 0; }
}

/* Region particle flavors — same .rw-fireflies markup, restyled per region.
   All animate opacity/transform only; the reduced-motion rule hides
   .rw-fireflies entirely, covering every variant. */

/* Rootsong Village: rising music notes */
body.rw-region-village .rw-fireflies span {
  width: auto; height: auto;
  background: none;
  box-shadow: none;
  color: #FFC94D;
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255,201,77,0.6);
  animation-name: rw-rise;
  animation-duration: 14s;
}
body.rw-region-village .rw-fireflies span::before { content: '\266A'; }
@keyframes rw-rise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 0.8; }
  70%  { opacity: 0.4; }
  100% { transform: translateY(-64px); opacity: 0; }
}

/* The Drumwood: soft drum-ring pulses near the stumps */
body.rw-region-drumwood .rw-fireflies span {
  width: 14px; height: 14px;
  background: transparent;
  border: 2px solid rgba(255,215,94,0.7);
  box-shadow: 0 0 10px rgba(255,215,94,0.3);
  animation-name: rw-pulse;
  animation-duration: 6s;
}
body.rw-region-drumwood .rw-fireflies span:nth-child(odd) { bottom: 7%; }
@keyframes rw-pulse {
  0%   { transform: scale(0.4); opacity: 0; }
  15%  { opacity: 0.8; }
  70%  { opacity: 0.15; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* The Dimming Peak: slow mist wisps */
body.rw-region-peak .rw-fireflies span {
  width: 96px; height: 16px;
  border-radius: 50%;
  background: rgba(203,196,232,0.10);
  box-shadow: 0 0 24px 14px rgba(203,196,232,0.08);
  animation-name: rw-drift-x;
  animation-duration: 22s;
}
@keyframes rw-drift-x {
  0%   { transform: translateX(0); opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.5; }
  100% { transform: translateX(70px); opacity: 0; }
}

/* Riverglow Falls: quick cyan water sparkles */
body.rw-region-falls .rw-fireflies span {
  width: 4px; height: 4px;
  background: #6FE0E7;
  box-shadow: 0 0 8px 3px rgba(111,224,231,0.5);
  animation-duration: 8s;
}
body.rw-region-falls .rw-fireflies span:nth-child(2) { animation-duration: 10s; }

/* The Great Root Tree: falling golden leaves */
body.rw-region-tree .rw-fireflies span {
  width: 10px; height: 10px;
  border-radius: 0 60% 0 60%;
  background: #FFD75E;
  box-shadow: 0 0 8px 2px rgba(255,215,94,0.35);
  animation-name: rw-fall;
  animation-duration: 12s;
}
body.rw-region-tree .rw-fireflies span:nth-child(even) { bottom: 26%; }
@keyframes rw-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.85; }
  60%  { transform: translateY(44px) rotate(120deg) translateX(14px); opacity: 0.6; }
  100% { transform: translateY(78px) rotate(200deg); opacity: 0; }
}

/* The Training School: drifting ink motes rising off the practice desks */
body.rw-region-school .rw-fireflies span {
  width: 5px; height: 5px;
  background: #FFE9B3;
  box-shadow: 0 0 9px 3px rgba(255,201,77,0.45);
  animation-name: rw-rise;
  animation-duration: 16s;
}
body.rw-region-school .rw-fireflies span:nth-child(even) { bottom: 22%; }

/* ── 2c. Region wayfinding ─────────────────────────────────────────────── */

/* "You are in ..." pill. Place between the nav and the page heading. */
.rw-region-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rw-region-tint, rgba(255,183,3,0.12));
  border: 1.5px solid var(--rw-region-line, rgba(255,183,3,0.45));
  box-shadow: var(--rw-region-glow, 0 0 18px rgba(255,201,77,0.35));
  border-radius: 100px;
  padding: 6px 14px 6px 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink, #F7F3E8);
}
.rw-region-chip img {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1.5px solid var(--rw-region-line, rgba(255,183,3,0.45));
}
.rw-region-chip b { color: var(--rw-region-accent, #FFC94D); font-weight: 800; }
.rw-region-chip-row { display: flex; justify-content: center; margin: 0.25rem 0 0.9rem; }

/* Region banner — map vignette header card (one per page max) */
.rw-region-banner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--rw-region-line, rgba(255,183,3,0.45));
  box-shadow: var(--rw-region-glow, 0 0 18px rgba(255,201,77,0.35));
  margin-bottom: 1rem;
}
.rw-region-banner img {
  width: 100%;
  aspect-ratio: 716 / 461;
  max-height: 190px;
  object-fit: cover;
  display: block;
}
.rw-region-banner .rw-region-banner-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1rem 0.7rem;
  background: linear-gradient(180deg, transparent, rgba(10,16,14,0.85));
  color: #FFF8ED;
  font-family: 'Baloo 2', sans-serif;
  font-size: 17px;
  font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* Guide porthole picking up the region accent */
.rw-porthole--region {
  border-color: var(--rw-region-accent, #FFC94D);
  box-shadow: var(--rw-region-glow, 0 0 18px rgba(255,201,77,0.35));
}

/* Region dots on activity-grid cards — a tiny glowing marker in the card
   corner showing which part of the world the activity lives in. Pure
   decoration, never gates anything. */
body.rw-night .activity-card[data-region]::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
body.rw-night .activity-card[data-region="village"]::before  { background: #FFC94D; box-shadow: 0 0 8px rgba(255,201,77,0.6); }
body.rw-night .activity-card[data-region="drumwood"]::before { background: #6FD99F; box-shadow: 0 0 8px rgba(111,217,159,0.6); }
body.rw-night .activity-card[data-region="peak"]::before     { background: #B79CE4; box-shadow: 0 0 8px rgba(183,156,228,0.6); }
body.rw-night .activity-card[data-region="falls"]::before    { background: #6FE0E7; box-shadow: 0 0 8px rgba(111,224,231,0.6); }
body.rw-night .activity-card[data-region="tree"]::before     { background: #FFD75E; box-shadow: 0 0 8px rgba(255,215,94,0.6); }

/* ── 3. Chrome utilities ───────────────────────────────────────────────── */

/* Parchment plate behind the (opaque-background) logo on dark navs */
.rw-logo-plate {
  display: inline-flex;
  align-items: center;
  background: var(--paper-solid, #FFF8ED);
  border-radius: 12px;
  padding: 4px 10px;
}

/* Porthole — the pattern for white-background mascot PNGs on night
   surfaces: a parchment circle the art melts into via multiply. */
.rw-porthole {
  width: 168px; height: 168px;
  border-radius: 50%;
  background: var(--paper-solid, #FFF8ED);
  overflow: hidden;
  border: 3px solid var(--sun);
  box-shadow: var(--glow-sun);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rw-porthole img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  animation: none;
}
.rw-porthole--plum { border-color: var(--plum); box-shadow: var(--glow-plum); }
.rw-porthole--sky  { border-color: var(--sky);  box-shadow: 0 0 18px rgba(91,200,234,0.35); }

/* Section eyebrow — small glowing amber wayfinding label */
.rw-eyebrow-lg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sun);
  margin-bottom: 0.6rem;
}
.rw-eyebrow-lg i { font-size: 14px; }
.rw-eyebrow-lg.rw-center { justify-content: center; }

/* Gentle float for the hero porthole (replaces the page bob on the img) */
body.rw-night .spark-wrap .rw-porthole { animation: rw-bob 3.2s ease-in-out infinite; }

/* Free-floating transparent mascot — the adopted transparent-PNG art needs
   no parchment porthole; it floats on the dusk canvas with a soft drop-shadow
   and warm glow. Drop-in replacement for .rw-porthole around a mascot img. */
.rw-float { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rw-float img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 5px 14px rgba(0,0,0,0.45)) drop-shadow(0 0 20px rgba(255,201,77,0.30));
}
body.rw-night .spark-wrap .rw-float { animation: rw-bob 3.2s ease-in-out infinite; }
@keyframes rw-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ── 4. Night nav ──────────────────────────────────────────────────────── */
body.rw-night .nav {
  background: var(--rw-nav-bg, rgba(13,24,20,0.9));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.rw-night .nav-exit:hover { color: var(--ink); }

/* ── 5. Known-component night fixes ────────────────────────────────────────
   Overrides for hardcoded light hexes in shared component patterns. All are
   double-class (body.rw-night .x) so they beat the single-class rules that
   pages define inline or that JS injects, regardless of load order. */

/* Spark suggests chips (recommend.js) */
body.rw-night .suggest-chip-icon { background: var(--plum-tint); }
body.rw-night .suggest-eyebrow   { color: var(--plum); }

/* Leaderboards (leaderboard.js) */
body.rw-night .lb-row.me { background: var(--leaf-tint); }

/* Oots currency — amber glow */
body.rw-night .sparks-chip,
body.rw-night .stat-pill.st-sparks,
body.rw-night .stat-tile.st-sparks {
  background: var(--sun-tint);
  border-color: var(--sun-line);
}

/* Character/maker portraits (profile.html) — parchment behind cut-out art */
body.rw-night .char-portrait,
body.rw-night .mk-portrait {
  background: var(--paper-solid);
  border-color: rgba(255,255,255,0.2);
}
body.rw-night .mk-redirect {
  background: rgba(255,158,126,0.16);
  border-color: rgba(255,158,126,0.5);
  color: var(--ink);
}
body.rw-night .mk-redirect i { color: var(--rose); }

/* Guide cards hosting white-background banner art (Cypher, Dryad...) stay
   parchment so the art melts in; text pinned to solid inks. */
body.rw-night .guide-card {
  background: var(--paper-solid);
  border-color: var(--rw-region-line, rgba(255,183,3,0.45));
  box-shadow: var(--rw-region-glow, 0 0 18px rgba(255,201,77,0.35));
}
body.rw-night .guide-card .guide-name { color: var(--ink-solid); }
body.rw-night .guide-card .guide-title { color: #7B5EA7; }
body.rw-night .guide-card .guide-lines p { color: #6B7280; }
body.rw-night .guide-card img { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }

/* Game feedback + reward pills (word-power / grammar-games / vocab-challenge) */
body.rw-night .feedback.good { background: var(--leaf-tint); }
body.rw-night .feedback.oops { background: rgba(255,158,126,0.14); }
body.rw-night .end-sparks,
body.rw-night .end-sparks-pill,
body.rw-night .nav-sparks,
body.rw-night .complete-sparks,
body.rw-night .mw-complete-sparks-inline,
body.rw-night .mw-complete-banner {
  background: var(--sun-tint);
  border-color: var(--sun-line);
}
body.rw-night .mw-toast.sparks { color: var(--ink-solid); }

/* Path engine (journey.html / modular-writing.html / story-mountain.html — keep in sync) */
body.rw-night .node.locked {
  background: #33423D;
  box-shadow: 0 6px 0 #232E2A;
  color: rgba(255,255,255,0.4);
}
body.rw-night .node-wrap.is-locked .node-label { color: rgba(255,255,255,0.35); }
body.rw-night .path-mascot {
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4)) drop-shadow(0 0 12px rgba(255,201,77,0.3));
}

/* "Coming soon" section cards (modular-writing + story-mountain) */
body.rw-night .mw-section-soon {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
}
body.rw-night .mw-section-soon-icon { color: rgba(255,255,255,0.3); }

/* Host coach bubble — Page, the Story Workshop host. Shared by
   modular-writing.html and story-mountain.html: both pages deliberately reuse
   the .mw-coach* class names so this override keeps applying. Renaming them on
   one page without the other leaves cream night text on a light bubble. */
body.rw-night .mw-coach-bubble { background: var(--leaf-tint); }
body.rw-night .mw-coach.oops .mw-coach-bubble { background: rgba(255,158,126,0.14); }
body.rw-night .mw-coach-img {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

/* Text inputs are reading/writing surfaces — keep them parchment */
body.rw-night input[type="text"],
body.rw-night .mk-input,
body.rw-night textarea {
  background: var(--paper-solid);
  color: var(--ink-solid);
  border-color: rgba(255,255,255,0.25);
}

/* Bright amber badges keep dark text */
body.rw-night .quest-badge,
body.rw-night .ac-pick { color: var(--ink-solid); }

/* Streak card + week dots */
body.rw-night #streak-card { background: var(--sun-tint); border-color: var(--sun-line); }
body.rw-night .sc-filled { background: var(--sun); color: var(--ink-solid); border-color: var(--sun); }
body.rw-night .sc-today-filled {
  background: var(--sun);
  color: var(--ink-solid);
  border-color: #fff;
  box-shadow: var(--glow-sun);
}
body.rw-night .sc-empty { border-color: rgba(255,255,255,0.18); }
body.rw-night .streak-today-label { color: var(--sun); }

/* Avatar identity porthole */
body.rw-night .id-avatar { background: var(--paper-solid); }
body.rw-night .id-avatar img { mix-blend-mode: multiply; }

/* ── The child's hero, floating ──────────────────────────────────────────────
   A hero whose chroma field was stripped (profile.js) is a true transparent
   cut-out, so it gets the .rw-float treatment the Spark mascots have: no
   plate, no ring, a soft drop-shadow and a warm glow straight on the dusk.
   A hero the stripper could not lift is an opaque rectangle and keeps its
   plate — floating that would look worse, with nothing hiding its edges.

   Two classes because the plate sits on the container on some surfaces
   (.id-avatar, .char-portrait) and on the <img> itself on others (.wp-hero img,
   .hero-chip img). Both must come AFTER the .id-avatar rules above: same
   specificity, so source order decides. */
body.rw-night .hero-float-wrap {
  background: none;
  /* transparent, not `border: none` — keeping the 3px box avoids a layout shift */
  border-color: transparent;
  box-shadow: none;
  overflow: visible;          /* or the circle clips the glow */
}
body.rw-night img.hero-float {
  background: none;
  border-color: transparent;
  mix-blend-mode: normal;     /* multiply above is for opaque portraits */
  object-fit: contain;        /* the chip's `cover` would crop the cut-out's margin */
  /* Same filter as .rw-float img, so the hero reads as one of the cast. */
  filter: drop-shadow(0 5px 14px rgba(0,0,0,0.45)) drop-shadow(0 0 20px rgba(255,201,77,0.30));
  /* .rw-float img lacks this guard and compounds with a wrapper bob; .rw-porthole img has it. */
  animation: none;
}

/* Guest banner (light amber card in the day theme) */
body.rw-night .guest-banner {
  background: var(--sun-tint);
  border-color: var(--sun-line);
  color: var(--ink);
}

/* Activity grid variants */
body.rw-night .ac-featured {
  background: var(--rw-featured-bg, #2C453C);
  border: 1.5px solid var(--sun-line);
  box-shadow: var(--glow-sun);
}
body.rw-night .ac-quest { box-shadow: var(--glow-plum); }
body.rw-night .ac-check { background: var(--sky-deep); }
@media (hover: hover) {
  body.rw-night .ac-active.tappable:hover {
    border-color: rgba(91,200,234,0.5);
    box-shadow: 0 0 16px rgba(91,200,234,0.25);
  }
}

/* World of Raproot hero (new-writer empty state) — the map glows on night */
body.rw-night .rw-hero-banner { box-shadow: var(--glow-plum); }
body.rw-night .rw-hero-map {
  border: 2px solid rgba(255,255,255,0.16);
  box-shadow: var(--glow-plum);
  background: linear-gradient(160deg, #223A34 0%, #1D3A4A 55%, #6B3D20 100%);
}

/* ── 6. rw-night-shell — app.html writing shell (NO token changes) ─────── */
body.rw-night-shell { background: #14211E; }
body.rw-night-shell .header {
  background: rgba(13,24,20,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.rw-night-shell .logo-sub { color: #A9A3D0; }
body.rw-night-shell .header-home-btn { color: #A9A3D0; }
body.rw-night-shell .header-home-btn:hover { color: #5BC8EA; background: rgba(91,200,234,0.12); }

/* The parchment writing desk — interior styles untouched, they simply sit
   on a warm sheet floating over the night scene. */
body.rw-night-shell .container,
body.rw-night-shell .container-wide {
  background: #FFF8ED;
  border-radius: 24px;
  margin-top: 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}
@media (max-width: 767px) {
  body.rw-night-shell .container,
  body.rw-night-shell .container-wide {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

/* ── 7. Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.rw-night::before,
  body.rw-night-shell::before,
  .rw-fireflies span,
  body.rw-night .spark-wrap .rw-porthole,
  body.rw-night .spark-wrap .rw-float {
    animation: none !important;
  }
  .rw-fireflies { display: none; }
}
