/* exp-shell.css
   Stitch SHELL + HUB + STORY structure pass. Complements experience.css (which
   already recolours the light hub and the dark story scene per pack). This file
   adds the structural pieces from the Stitch mocks that had no home before:

     1. A persistent bottom navigation bar (Store / My Quest / Map / Profile),
        with an accent active pill, shown on player-facing screens.
     2. Hub additions on the light "adventure home": a stat-tile row, a "Recent
        finds" white list, and the big accent "Where am I?" button.
     3. The dark dialogue quote panel in a choice scene (.saga-choice-quote).
     4. The gated story point's lock badge + distance progress bar.

   Tokens (Stitch design sheet):
     - Light chrome : surface #F9F9F7, white cards, ink #1E293B, muted #64748B,
                      hairline #E2E8F0.
     - Dark story   : #0F172A base, on-dark #F8FAFC.
     - Accent       : var(--amber) fill / var(--on-amber) ink (per-pack vars).
     - Geometry     : cards 24px, tiles 16px, pills 9999px, 44px min tap,
                      gentle lift 0 4px 20px rgba(0,0,0,0.05).

   This file is additive and reversible. It reuses the --exp-* custom properties
   that experience.css sets on .today-home / .saga-path, and falls back to the
   fixed token values when they are absent. No em dashes or en dashes in copy.
   Linked after experience.css so equal-specificity rules win. */

/* ================================================================== *
 *  1. PERSISTENT BOTTOM NAVIGATION
 * ================================================================== */

.app-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  margin: 0 auto;
  max-width: 640px;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 4px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  box-shadow: 0 -8px 40px rgba(30, 41, 59, 0.08);
}
.app-bottom-nav.hidden { display: none; }

.app-bottom-nav .abn-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 6px 4px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: #64748B;
  cursor: pointer;
  font-family: var(--font-body, inherit);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.app-bottom-nav .abn-item:hover,
.app-bottom-nav .abn-item:focus-visible {
  color: #1E293B;
  outline: none;
}
.app-bottom-nav .abn-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.app-bottom-nav .abn-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.app-bottom-nav .abn-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Active tab = the accent pill (per-pack --amber fill, --on-amber ink). */
.app-bottom-nav .abn-item.active {
  background: var(--amber, #f5a623);
  color: var(--on-amber, #2a1a00);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.28);
}
.app-bottom-nav .abn-item.active .abn-label { font-weight: 700; }

/* Dark variant: on an immersive story scene the light bar would jar, so when a
   .saga-path scene is on screen the bar reads as deep slate. Uses :has(), which
   experience.css already relies on; browsers without it keep the light bar. */
body:has(#screen .saga-path) .app-bottom-nav {
  background: rgba(15, 23, 42, 0.94);
  border-top-color: rgba(248, 250, 252, 0.12);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}
body:has(#screen .saga-path) .app-bottom-nav .abn-item {
  color: rgba(248, 250, 252, 0.72);
}
body:has(#screen .saga-path) .app-bottom-nav .abn-item:hover,
body:has(#screen .saga-path) .app-bottom-nav .abn-item:focus-visible {
  color: #F8FAFC;
}
body:has(#screen .saga-path) .app-bottom-nav .abn-item.active {
  color: var(--on-amber, #2a1a00);
}

/* Keep scrolled content clear of the fixed bar. */
body.has-bottom-nav .app-screen {
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}

/* ================================================================== *
 *  2. HUB ADDITIONS  (light "adventure home", inside .today-home)
 * ================================================================== */

/* Stat tiles: one or two white cards summarising real progress (steps today,
   current chapter), matching the mock's stat row under the next-step card. */
.exp-hub .exp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.exp-hub .exp-stat {
  background: #FFFFFF;
  border: 1px solid var(--exp-outline, #E2E8F0);
  border-radius: 16px;
  box-shadow: var(--exp-lift, 0 4px 20px rgba(0, 0, 0, 0.05));
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
}
.exp-hub .exp-stat-num {
  font-family: var(--font-display, inherit);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--exp-ink, #1E293B);
}
.exp-hub .exp-stat-label {
  font-size: 13px;
  color: var(--exp-muted, #64748B);
}
.exp-hub .exp-stat-sub {
  font-size: 12px;
  color: var(--exp-muted, #64748B);
  opacity: 0.85;
}

/* Recent finds: a white list card (omitted entirely when nothing found yet). */
.exp-hub .exp-finds {
  margin-top: 16px;
  background: #FFFFFF;
  border: 1px solid var(--exp-outline, #E2E8F0);
  border-radius: 20px;
  box-shadow: var(--exp-lift, 0 4px 20px rgba(0, 0, 0, 0.05));
  overflow: hidden;
}
.exp-hub .exp-finds-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--exp-muted, #64748B);
  padding: 14px 18px 6px;
}
.exp-hub .exp-find {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--exp-outline, #E2E8F0);
}
.exp-hub .exp-find:first-of-type { border-top: none; }
.exp-hub .exp-find-ico {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: #FDF0D9; /* fallback tint where color-mix is unsupported */
  background: color-mix(in srgb, var(--exp-accent, var(--amber, #f5a623)) 16%, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--exp-ink, #1E293B);
}
.exp-hub .exp-find-ico svg { width: 22px; height: 22px; }
.exp-hub .exp-find-main { display: flex; flex-direction: column; }
.exp-hub .exp-find-name { font-size: 16px; font-weight: 700; color: var(--exp-ink, #1E293B); }
.exp-hub .exp-find-sub { font-size: 13px; color: var(--exp-muted, #64748B); }

/* Big "Where am I?" button: an accent panel with an icon tile and stacked copy,
   left aligned like the mock (experience.css already gives .btn-amber the accent
   fill on the light hub; this only restyles the internal layout). */
.exp-hub .exp-whereami {
  width: 100%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 20px;
  border-radius: var(--exp-radius, 24px);
}
.exp-hub .exp-whereami-ico {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}
.exp-hub .exp-whereami-ico svg { width: 26px; height: 26px; }
.exp-hub .exp-whereami-main { display: flex; flex-direction: column; gap: 2px; }
.exp-hub .exp-whereami-title { font-size: 20px; font-weight: 700; line-height: 1.1; }
.exp-hub .exp-whereami-sub { font-size: 14px; opacity: 0.85; }

/* ================================================================== *
 *  3. DIALOGUE QUOTE  (dark choice scene, inside .saga-choice)
 * ================================================================== */

.saga-path .saga-choice-quote {
  position: relative;
  margin: 14px 0 4px;
  padding: 20px 20px 18px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(248, 250, 252, 0.14);
}
.saga-path .saga-choice-quote::before {
  content: "\201C";
  position: absolute;
  top: 2px;
  left: 14px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 46px;
  line-height: 1;
  color: var(--exp-accent, var(--amber, #f5a623));
  opacity: 0.55;
}
.saga-path .saga-choice-quote-text {
  margin: 0;
  color: var(--exp-on-dark, #F8FAFC);
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
}
/* The choice scene's Continue button is a full accent pill (it already carries
   .btn-amber, which the dark scene styles); a little breathing room above it. */
.saga-path .saga-choice-continue { margin-top: 16px; }

/* ================================================================== *
 *  4. GATED STORY POINT  (dark, inside .saga-gate-scene)
 * ================================================================== */

.saga-path .saga-gate-scene { text-align: center; }

.saga-path .saga-gate-lock {
  width: 72px;
  height: 72px;
  margin: 4px auto 14px;
  border-radius: 9999px;
  background: rgba(248, 250, 252, 0.06);
  border: 1px solid rgba(248, 250, 252, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(248, 250, 252, 0.7);
}
.saga-path .saga-gate-lock svg { width: 32px; height: 32px; }

.saga-path .saga-gate-scene .saga-gate-readout { margin: 8px 0 6px; }

/* Distance progress: a hairline track with an accent fill, plus Current / Target
   captions, driven by how close the player is to the gated landmark. */
.saga-path .saga-gate-progress {
  margin: 16px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.saga-path .saga-gate-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: rgba(248, 250, 252, 0.14);
  overflow: hidden;
}
.saga-path .saga-gate-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--exp-accent, var(--amber, #f5a623));
  transition: width 0.35s ease;
}
.saga-path .saga-gate-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.saga-path .saga-gate-progress-labels span:first-child { color: rgba(248, 250, 252, 0.4); }
.saga-path .saga-gate-progress-labels span:last-child { color: var(--exp-accent, var(--amber, #f5a623)); }

/* Motion safety: honour reduced-motion for the only animated affordance here. */
@media (prefers-reduced-motion: reduce) {
  .app-bottom-nav .abn-item,
  .saga-path .saga-gate-progress-fill { transition: none; }
}