/* experience.css
   Stitch in-game revamp. Two shared in-world surfaces, recoloured per adventure
   by the pack accent:

     - LIGHT "chrome"     the adventure hub / "today" home  (warm off-white)
     - DARK "immersive"   the story / saga scene            (deep slate + art)

   Shared base tokens are FIXED (a warm off-white hub, a deep-slate story), so the
   look is consistent across every pack and every chosen palette. Only the ACCENT
   layer is per-adventure: it is read from the pack-injected tokens --amber /
   --accent with a derived --on-amber ink, exactly as the app's own .btn-amber
   does. No colour is hard-coded for the accent, so each pack recolours itself.

   Real component roots targeted (see js/app.js titleScreen + js/chapters/runner.js):
     - Hub:   #screen:has(.today-home)   ->  .title-screen.saga-hub.today-home
     - Story: #screen:has(.saga-path)    ->  .chapter-hub.saga-path.saga-mood

   Additive and reversible: this file is linked LAST so it wins, and it never edits
   the per-pack theme blocks in themes.css. Contrast rule kept throughout: dark
   slate ink on the light hub, light #F8FAFC text on the dark story, and NEVER a
   pack accent used for body text (accent is a FILL or a line only).
   No long dashes anywhere in this file's copy. */

/* ------------------------------------------------------------------ *
 * Shared accent + geometry tokens for both in-game surfaces.
 * ------------------------------------------------------------------ */
.today-home,
.saga-path {
  --exp-accent: var(--amber, #f5a623);
  --exp-on-accent: var(--on-amber, #2a1a00);
  --exp-lift: 0 4px 20px rgba(0, 0, 0, 0.05);
  --exp-radius: 24px;
}

/* ================================================================== *
 *  LIGHT CHROME  ~  the adventure hub / "today" home
 * ================================================================== */

/* Warm off-white page fills the whole scroll area behind the hub, so no dark
   theme surface bleeds around the light chrome on any pack or palette. */
#screen:has(.today-home) { background: #F9F9F7; }

.today-home {
  --exp-ink: #1E293B;
  --exp-muted: #64748B;
  --exp-outline: #E2E8F0;
  color: var(--exp-ink);
  padding-bottom: 12px;
}
.today-home h1,
.today-home h2,
.today-home h3 { color: var(--exp-ink); }

/* Wordmark + supporting copy in slate ink / muted slate. The hub is forced light
   regardless of the chosen theme, so a (possibly light) pack accent is never used
   as text here; that keeps every pack legible on the off-white page. */
.today-home .title-name { color: var(--exp-ink); }
.today-home .title-subtitle,
.today-home .saga-greeting,
.today-home .content-pending { color: var(--exp-muted); }

/* Slim saga progress meter: hairline track with an accent fill. */
.today-home .saga-progress,
.today-home .saga-progress-label { color: var(--exp-muted); }
.today-home .saga-progress-track { background: var(--exp-outline); }
.today-home .saga-progress-bar { background: var(--exp-accent); }

/* The one clear thing to do today = the filled-accent "your next step" card. */
.today-home .today-card {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border: none;
  border-radius: var(--exp-radius);
  box-shadow: var(--exp-lift);
  padding: 20px;
  text-align: left;
}
.today-home .today-card .today-eyebrow {
  color: var(--exp-on-accent);
  opacity: 0.85;
}
.today-home .today-card .today-place { color: var(--exp-on-accent); }
.today-home .today-card .today-where {
  color: var(--exp-on-accent);
  opacity: 0.9;
}
.today-home .today-card .today-where-pin { color: var(--exp-on-accent); }
/* The card's primary action reads as a clean light pill with slate ink, so it
   stays high-contrast on top of any pack accent field. */
.today-home .today-card .today-continue {
  background: #FFFFFF;
  color: #1E293B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.today-home .today-card .today-allchapters {
  color: var(--exp-on-accent);
  background: transparent;
  border: 1px solid currentColor;
  opacity: 0.85;
}

/* Neutral white cards for the "today" strip tiles and the "more" tiles. */
.today-home .today-tile,
.today-home .saga-hub-tile {
  background: #FFFFFF;
  color: var(--exp-ink);
  border: 1px solid var(--exp-outline);
  border-radius: 16px;
  box-shadow: var(--exp-lift);
}
.today-home .today-tile:hover,
.today-home .today-tile:focus-visible,
.today-home .saga-hub-tile:hover,
.today-home .saga-hub-tile:focus-visible {
  border-color: var(--exp-accent);
  outline: none;
}
.today-home .today-tile-title,
.today-home .saga-hub-tile .sht-title { color: var(--exp-ink); }
.today-home .today-tile-sub,
.today-home .saga-hub-tile .sht-note { color: var(--exp-muted); }

/* Outdoor conditions chip: another white card on the light page. */
.today-home .saga-weather {
  background: #FFFFFF;
  border: 1px solid var(--exp-outline);
}
.today-home .saga-weather-adv,
.today-home .saga-weather-ai { color: var(--exp-muted); }

/* The hub's own primary action (the "Begin the saga" empty state, or the big
   "Where am I?" style pill) is the accent pill: accent fill with its paired ink. */
.today-home .btn-amber {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
}
/* Secondary small buttons read as light outline chips on the off-white page. */
.today-home .btn-small {
  background: #FFFFFF;
  color: var(--exp-ink);
  border: 1px solid var(--exp-outline);
}

/* ================================================================== *
 *  DARK IMMERSIVE  ~  the story / saga scene
 * ================================================================== */

/* Deep slate-to-black base fills the scroll area behind the scene, so the story
   reads as full-bleed immersive even on a pack that ships a light day palette.
   A faint accent-neutral top glow stands in for the mock's scrim highlight. */
#screen:has(.saga-path) {
  background:
    radial-gradient(120% 78% at 50% 0%, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0) 60%),
    linear-gradient(180deg, #0F172A 0%, #0A0F1E 55%, #05070D 100%);
}

.saga-path {
  --exp-on-dark: #F8FAFC;
  --exp-on-dark-muted: rgba(248, 250, 252, 0.72);
}

/* Scene head: place title, chapter eyebrow, and progress readout in light ink. */
.saga-path .hub-location { color: var(--exp-on-dark); }
.saga-path .hub-chapter { color: var(--exp-accent); }
.saga-path .saga-progress,
.saga-path .tension-label,
.saga-path .tension-icon,
.saga-path .saga-sighting { color: var(--exp-on-dark-muted); }

/* The rounded, translucent-dark story panel with an accent top rule. */
.saga-path .saga-scene {
  background: rgba(15, 23, 42, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(248, 250, 252, 0.12);
  border-top: 3px solid var(--exp-accent);
  border-radius: var(--exp-radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.saga-path .saga-scene-eyebrow { color: var(--exp-accent); }
.saga-path .saga-scene-title { color: var(--exp-on-dark); }
.saga-path .saga-gate-readout,
.saga-path .saga-gate-hint,
.saga-path .saga-lookaround-hint { color: var(--exp-on-dark-muted); }

/* Primary CTA = accent pill (already .btn-amber.big .saga-begin): accent fill
   with its paired on-accent ink, on the dark base. */
.saga-path .btn-amber {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
}

/* Ghost / outline secondary choices ("Jump to any activity", "Skip", "Begin from
   here", "More options"): quiet outline that stays legible on the dark base. */
.saga-path .btn-small {
  background: rgba(248, 250, 252, 0.06);
  color: var(--exp-on-dark);
  border: 1px solid rgba(248, 250, 252, 0.28);
}
.saga-path .saga-jump,
.saga-path .saga-skip,
.saga-path .saga-begin-here { color: var(--exp-on-dark); }
.saga-path .saga-more > summary { color: var(--exp-on-dark-muted); }
.saga-path .saga-more-body { color: var(--exp-on-dark); }

/* Choice beat: the cool "path A" text lifts to light on the dark base; the warm
   "path B" keeps its accent-driven fill (already --amber based). */
.saga-path .saga-option-a { color: var(--exp-on-dark); }

/* Motion safety: the translucent panel blur is cosmetic; drop it for users who
   prefer reduced motion or lack backdrop-filter support (graceful, still dark). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .saga-path .saga-scene { background: rgba(15, 23, 42, 0.9); }
}

/* Free-roam location picker (unlock mode 'open'): the picker and the home card lead with
   the PLACE and a light "explored / tap to explore" status - no chapter number, date or
   lock. Opacity-based muting keeps these readable on the light hub and on a dark card. */
.chapters-open-hint { margin: -4px 0 14px; font-size: 14px; opacity: 0.75; }
.chapters-open .cc-n { display: none; }
.cc-loc-open { font-size: 1.15rem; font-weight: 700; }
.today-open-sub { margin: 2px 0 12px; font-size: 14px; opacity: 0.82; }