/* exp-social-map.css
   Stitch "Soft-Modernist" reskin for the IN-GAME social and map surfaces.
   Loaded AFTER experience.css so it wins, and additive over main.css / map.css /
   social.css. It reskins the crew roster, group chat, leaderboard, shared photos,
   the field map chrome, the "Where am I?" card, the Nearby popout (all LIGHT
   chrome), and the GPS gated "walk closer to unlock" story card (DARK immersive).

   Design system (fixed light chrome, per pack accent):
     - LIGHT surfaces  #F9F9F7 page, #FFFFFF cards, #F1F1EF variant, #E2E8F0 hairline
     - INK             #1E293B, muted #64748B  (dark text always kept on light cards)
     - DARK immersive  deep slate to near black, #F8FAFC text, over a dimmed story
     - ACCENT          var(--amber) fill with var(--on-amber) on accent text ONLY
     - Type            Plus Jakarta Sans (--font-head) + Be Vietnam Pro (--font-body)
     - Geometry        24px cards, 9999px pills, gentle lift 0 4px 20px rgba(0,0,0,.05),
                       44px minimum tap targets

   Scope: every rule is keyed on a real in-game component root (crew, chat,
   standings, guild, photos, whereami, poi, map, saga gate). None of these classes
   appear on the platform front door, so .platform-screen (Stitch platform chrome
   in stitch.css) is never touched. No em dashes or en dashes anywhere. */

/* ================================================================== *
 *  Shared light tokens for the in-game social + map chrome.
 *  Inherited by each component's children, so nothing is hard coded twice.
 * ================================================================== */
.ch-card,
.crewp-card,
.chat-card,
.standings-card,
.crew-photos-card,
.guild-card,
.whereami-card,
.poi-card,
.map-screen {
  --exp-surface: #F9F9F7;
  --exp-card: #FFFFFF;
  --exp-ink: #1E293B;
  --exp-muted: #64748B;
  --exp-variant: #F1F1EF;
  --exp-hairline: #E2E8F0;
  --exp-accent: var(--amber, #f59e0b);
  --exp-on-accent: var(--on-amber, #2a1a00);
  --exp-radius: 24px;
  --exp-radius-sm: 16px;
  --exp-pill: 9999px;
  --exp-lift: 0 4px 20px rgba(0, 0, 0, 0.05);
  --exp-lift-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ================================================================== *
 *  Shared LIGHT card shell (crew, chat, standings, guild, photos, whereami).
 *  The poi popout uses the .menu-card shell and is folded in below.
 * ================================================================== */
.ch-card,
.crewp-card,
.chat-card,
.standings-card,
.crew-photos-card,
.guild-card,
.whereami-card {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius);
  box-shadow: var(--exp-lift);
  font-family: var(--font-body);
  padding: 6px;
}

/* Card headers become a clean light bar with a slate title and a soft close. */
.ch-card .menu-header,
.crewp-card .menu-header,
.chat-card .menu-header,
.standings-card .menu-header,
.crew-photos-card .menu-header,
.guild-card .menu-header,
.whereami-card .menu-header {
  background: transparent;
  border-bottom: 1px solid var(--exp-hairline);
  padding: 12px 12px 14px;
}
.ch-card .panel-title,
.crewp-card .panel-title,
.chat-card .panel-title,
.standings-card .panel-title,
.crew-photos-card .panel-title,
.guild-card .panel-title,
.whereami-card .panel-title,
.poi-card .panel-title {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--exp-ink);
  text-transform: none;
}
.ch-card .menu-close,
.crewp-card .menu-close,
.chat-card .menu-close,
.standings-card .menu-close,
.crew-photos-card .menu-close,
.guild-card .menu-close,
.whereami-card .menu-close {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: var(--exp-pill);
  border: 1px solid var(--exp-hairline);
  background: var(--exp-surface);
  color: var(--exp-ink);
}
.ch-card .menu-close:hover,
.crewp-card .menu-close:hover,
.chat-card .menu-close:hover,
.standings-card .menu-close:hover,
.crew-photos-card .menu-close:hover,
.guild-card .menu-close:hover,
.whereami-card .menu-close:hover {
  background: var(--exp-variant);
  border-color: var(--exp-accent);
}

/* Supporting copy in muted slate. */
.ch-card .panel-note,
.crewp-card .panel-note,
.chat-card .panel-note,
.standings-card .panel-note,
.crew-photos-card .panel-note,
.guild-card .panel-note,
.whereami-card .panel-note,
.poi-card .panel-note { color: var(--exp-muted); }

/* Buttons inside the light cards: accent pill primary, light outline pill secondary. */
.ch-card .btn-amber,
.crewp-card .btn-amber,
.chat-card .btn-amber,
.standings-card .btn-amber,
.crew-photos-card .btn-amber,
.guild-card .btn-amber,
.whereami-card .btn-amber,
.poi-card .btn-amber {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border: none;
  border-radius: var(--exp-pill);
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 10px 22px rgba(245, 158, 11, 0.24);
}
.ch-card .btn-small,
.crewp-card .btn-small,
.chat-card .btn-small,
.standings-card .btn-small,
.crew-photos-card .btn-small,
.guild-card .btn-small,
.whereami-card .btn-small,
.poi-card .btn-small {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: var(--exp-pill);
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 600;
}
.ch-card .btn-small:hover,
.crewp-card .btn-small:hover,
.chat-card .btn-small:hover,
.standings-card .btn-small:hover,
.crew-photos-card .btn-small:hover,
.guild-card .btn-small:hover,
.whereami-card .btn-small:hover,
.poi-card .btn-small:hover { border-color: var(--exp-accent); background: #FFF7EA; }

/* Inputs and selects: crisp white fields with an amber focus ring. */
.ch-card .f-input,
.crewp-card .f-input,
.chat-card .f-input,
.standings-card .f-input,
.crew-photos-card .f-input,
.guild-card .f-input,
.whereami-card .f-input,
.poi-card .f-input,
.chat-card input[type='text'],
.chat-card select {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 14px;
}
.chat-card .f-input:focus,
.chat-card input:focus,
.chat-card select:focus {
  outline: none;
  border-color: var(--exp-accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

/* ================================================================== *
 *  CREW ROSTER  ~  crew hub (js/components/crew-hub.js) : LIGHT
 *  Presence roster, the co-op goal bar and combined crew totals.
 * ================================================================== */
.ch-card .ch-pulse { color: var(--exp-ink); }
.ch-card .ch-pulse-text { color: var(--exp-ink); }

/* Co-op goal = the accent progress card at the top of the roster. */
.ch-card .ch-goal {
  background: #FFF7EA;
  border: 1px solid #F6D38A;
  border-radius: var(--exp-radius-sm);
}
.ch-card .ch-goal-head { color: var(--exp-ink); font-weight: 700; }
.ch-card .ch-goal-sub { color: var(--exp-muted); }
.ch-card .ch-goal-bar { background: var(--exp-hairline); border-radius: var(--exp-pill); }
.ch-card .ch-goal-fill { background: var(--exp-accent); }

/* Combined crew totals: soft white stat tiles. */
.ch-card .ch-total {
  background: var(--exp-surface);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius-sm);
}
.ch-card .ch-total-n { color: var(--exp-accent); }
.ch-card .ch-total-l { color: var(--exp-muted); }

/* Member rows: white rows with a hairline, name, presence dot and score. The
   presence dot stays green for online / grey for away (matching the mock). */
.ch-card .ch-member {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 44px;
}
.ch-card .ch-member-name { color: var(--exp-ink); }
.ch-card .ch-member-stat { color: var(--exp-muted); }
.ch-card .ch-dot.on { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
.ch-card .ch-dot.off { background: #CBD5E1; }

/* ================================================================== *
 *  CREW PRESENCE + QUICK ACTIONS  ~  crew play (js/components/crew-play.js) : LIGHT
 * ================================================================== */
.crewp-card .crewp-pres-row {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: 14px;
  padding: 8px 12px;
  min-height: 44px;
}
.crewp-card .crewp-pres-row.on { background: #F0FBF4; border-color: #BBF0CC; }
.crewp-card .crewp-pres-name { color: var(--exp-ink); }
.crewp-card .crewp-pres-status { color: var(--exp-muted); }
.crewp-card .crewp-dot { background: #CBD5E1; }
.crewp-card .crewp-dot.on { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }

/* Category chips: pill toggles, amber when active. */
.crewp-card .crewp-tab {
  background: var(--exp-card);
  border: 1.5px solid var(--exp-hairline);
  border-radius: var(--exp-pill);
  color: var(--exp-ink);
  min-height: 44px;
}
.crewp-card .crewp-tab.active {
  background: var(--exp-accent);
  border-color: var(--exp-accent);
  color: var(--exp-on-accent);
  font-weight: 700;
}
.crewp-card .crewp-action {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius-sm);
  color: var(--exp-ink);
  box-shadow: var(--exp-lift-sm);
}
.crewp-card .crewp-action:hover { border-color: var(--exp-accent); }
.crewp-card .crewp-action-label { color: var(--exp-ink); }
.crewp-card .crewp-picker { background: #FFF7EA; border: 1px solid #F6D38A; border-radius: 14px; }
.crewp-card .crewp-picker-label { color: var(--exp-ink); }

/* ================================================================== *
 *  GROUP CHAT  ~  crew chat (js/components/crew-chat.js) : LIGHT
 *  Own bubbles accent (on accent ink), others neutral. Rounded input bar.
 * ================================================================== */
.chat-card .chat-list { padding: 8px 6px; }
.chat-card .chat-msg {
  background: var(--exp-variant);
  color: var(--exp-ink);
  border-radius: 18px;
  padding: 9px 13px;
}
.chat-card .chat-msg.own {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border-radius: 18px;
}
.chat-card .chat-msg.dm { border: 1px dashed rgba(245, 158, 11, 0.6); }
.chat-card .chat-msg.own .chat-meta { color: rgba(42, 26, 0, 0.7); }
.chat-card .chat-msg.own .chat-body { color: var(--exp-on-accent); }
.chat-card .chat-meta { color: var(--exp-muted); }
.chat-card .chat-body { color: var(--exp-ink); }

/* Compose row: rounded input pill, accent send. */
.chat-card .chat-compose {
  background: var(--exp-surface);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-pill);
  padding: 6px;
  margin-top: 10px;
}
.chat-card .chat-input {
  border: none;
  background: transparent;
  border-radius: var(--exp-pill);
  min-height: 44px;
}
.chat-card .chat-input:focus { outline: none; box-shadow: none; }
.chat-card .chat-to { border-radius: var(--exp-pill); min-height: 44px; }
.chat-card .chat-compose .btn-small {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border: none;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 8px 18px rgba(245, 158, 11, 0.24);
}

/* ================================================================== *
 *  LEADERBOARD  ~  crew standings (js/components/crew-standings.js) : LIGHT
 *  Ranked white rows, top three emphasised, current player in accent.
 * ================================================================== */
.standings-card .standing-row {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius-sm);
  box-shadow: var(--exp-lift-sm);
  padding: 10px 12px;
  min-height: 44px;
}
.standings-card .standing-row.own {
  background: #FFF7EA;
  border: 1px solid var(--exp-accent);
}
.standings-card .standing-name { color: var(--exp-ink); }
.standings-card .standing-stats { color: var(--exp-ink); }
.standings-card .standing-seen { color: var(--exp-muted); }

/* Rank chip: a soft circular badge; the top three read as medal tints. */
.standings-card .standing-rank {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--exp-variant);
  color: var(--exp-muted);
  font-weight: 800;
}
.standings-card .standings-list .standing-row:nth-child(1) .standing-rank {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
}
.standings-card .standings-list .standing-row:nth-child(2) .standing-rank {
  background: #E2E8F0;
  color: #334155;
}
.standings-card .standings-list .standing-row:nth-child(3) .standing-rank {
  background: #F6D9B8;
  color: #7A4A17;
}

/* Taunt chip stays a light outline pill (inherits the shared .btn-small). */
.standings-card .standing-taunt { min-height: 40px; }

/* ---- Guild hall (js/components/guild-hall.js) : the guild reading of the crew --- */
.guild-card .guild-name { font-family: var(--font-head); color: var(--exp-ink); }
.guild-card .guild-tier { color: var(--exp-accent); }
.guild-card .guild-bar { background: var(--exp-hairline); border: 1px solid var(--exp-hairline); }
.guild-card .guild-bar-fill { background: var(--exp-accent); }
.guild-card .guild-renown { color: var(--exp-ink); }
.guild-card .guild-perk { color: var(--exp-muted); }
.guild-card .guild-member {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: 12px;
}
.guild-card .guild-member-name { color: var(--exp-ink); }
.guild-card .guild-member-stat { color: var(--exp-muted); }
.guild-card .guild-ladder-row {
  background: var(--exp-surface);
  border: 1px solid var(--exp-hairline);
  border-radius: 12px;
  opacity: 0.6;
}
.guild-card .guild-ladder-row.have { opacity: 1; background: #FFF7EA; border-color: var(--exp-accent); }
.guild-card .guild-ladder-name { color: var(--exp-ink); }
.guild-card .guild-ladder-renown { color: var(--exp-muted); }

/* ================================================================== *
 *  SHARED PHOTOS  ~  crew photos (js/components/crew-photos.js) : LIGHT
 *  A rounded gallery grid of shared photos.
 * ================================================================== */
.crew-photos-card .crew-photo {
  background: var(--exp-surface);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius-sm);
  box-shadow: var(--exp-lift-sm);
  overflow: hidden;
}
.crew-photos-card .crew-photo-img { border-radius: 0; background: var(--exp-variant); }
.crew-photos-card .crew-photo-cap { padding: 8px 10px; }
.crew-photos-card .crew-photo-from { color: var(--exp-ink); }
.crew-photos-card .crew-photo-text { color: var(--exp-muted); }
.crew-photos-card .crew-photo-del {
  background: rgba(255, 255, 255, 0.9);
  color: #B4281E;
  border-radius: 50%;
  box-shadow: var(--exp-lift-sm);
}
.crew-photos-card .crew-photo-del:hover { background: #FDECEC; }

/* ================================================================== *
 *  FIELD MAP CHROME  ~  js/map/controller.js + css/map.css : LIGHT
 *  The bar, the floating action bar and the app drawn markers over the map.
 *  The map tiles themselves (illustrated base / MapLibre) are never touched.
 * ================================================================== */

/* Top bar: a floating light pill card holding the readout and controls. */
.map-screen .map-bar {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-pill);
  box-shadow: var(--exp-lift);
  padding: 8px 12px;
}
.map-screen .map-readout { color: var(--exp-ink); font-weight: 600; }

/* Round / pill white control buttons (compass, real map toggle, nav tools). */
.map-screen .map-compass {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  color: var(--exp-ink);
  border-radius: 50%;
  min-height: 44px;
  min-width: 44px;
  box-shadow: var(--exp-lift-sm);
}
.map-screen .map-compass:hover { border-color: var(--exp-accent); }
.map-screen .map-controls .btn-small,
.map-screen .map-controls .nav-btn {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: var(--exp-pill);
  min-height: 44px;
  box-shadow: var(--exp-lift-sm);
}
.map-screen .map-controls .btn-small:hover,
.map-screen .map-controls .nav-btn:hover { border-color: var(--exp-accent); }
.map-screen .nav-readout {
  color: var(--exp-ink);
  background: var(--exp-surface);
  border: 1px solid var(--exp-hairline);
  border-radius: 12px;
  padding: 6px 10px;
}

/* Foot: the floating bottom action bar. "We are here" is the accent primary. */
.map-screen .map-foot {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius);
  box-shadow: var(--exp-lift);
  padding: 10px 12px;
  margin-top: 10px;
}
.map-screen .map-accuracy { color: var(--exp-muted); }
.map-screen .map-here {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border: none;
  border-radius: var(--exp-pill);
  min-height: 44px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 10px 22px rgba(245, 158, 11, 0.24);
}
.map-screen .map-nearby {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: var(--exp-pill);
  min-height: 44px;
}
.map-screen .map-nearby:hover { border-color: var(--exp-accent); }
.map-screen .map-scale-bar { border-color: var(--exp-ink); }
.map-screen .map-scale-label { color: var(--exp-muted); }

/* Route plan card: light disclosure row + itinerary. */
.map-screen .map-route-line {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-pill);
  min-height: 44px;
}
.map-screen .map-route-line[aria-expanded="true"] { border-color: var(--exp-accent); }
.map-screen .map-route-list li { color: var(--exp-muted); }
.map-screen .map-route-maps { color: var(--exp-accent); }

/* Distances panel (nav): a light floating card over the stage. */
.map-screen .nav-dist-panel {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius-sm);
  box-shadow: var(--exp-lift);
  color: var(--exp-ink);
}
.map-screen .nav-dist-head { color: var(--exp-ink); font-weight: 700; }
.map-screen .nav-dist-empty,
.map-screen .nav-dist-tip,
.map-screen .nav-dist-val { color: var(--exp-muted); }
.map-screen .nav-dist-row.active { background: #FFF7EA; }

/* App drawn markers over the map: the player location marker in accent, and the
   landmark / POI pins as accent teardrops with a white ring and a soft shadow. */
.map-screen .illus-ship,
.map-screen .real-ship { color: var(--exp-accent); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); }
.map-screen .marker-dot,
.map-screen .real-marker {
  background: radial-gradient(circle at 50% 35%, #ffd68a, var(--exp-accent));
  border: 2px solid #FFFFFF;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}
.map-screen .real-marker.kind-poi,
.map-screen .illus-marker.kind-poi .marker-dot {
  background: radial-gradient(circle at 50% 35%, #ffe1a6, #E08A2B);
}
.map-screen .marker-label {
  background: rgba(255, 255, 255, 0.95);
  color: var(--exp-ink);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-pill);
  box-shadow: var(--exp-lift-sm);
}

/* Compass and distance HUD: a light frosted pill over the map. */
.map-screen .map-hud {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--exp-hairline);
  box-shadow: var(--exp-lift);
}
.map-screen .map-hud-text { color: var(--exp-ink); }
.map-screen .map-hud-needle { border-color: var(--exp-accent); }

/* GPS searching state over the stage: a light frosted scrim with slate copy. */
.map-screen .map-searching { background: rgba(249, 249, 247, 0.9); }
.map-screen .map-searching-text { color: var(--exp-ink); }

/* ================================================================== *
 *  WHERE AM I  ~  js/components/whereami.js : LIGHT
 *  A prominent card: pin, place name, friendly fact, one accent action.
 * ================================================================== */
.whereami-card .whereami-pin { color: var(--exp-accent); }
.whereami-card .whereami-place { font-family: var(--font-head); color: var(--exp-ink); }
.whereami-card .whereami-dist { color: var(--exp-accent); font-weight: 700; }
.whereami-card .whereami-coord { color: var(--exp-muted); }
.whereami-card .whereami-fact {
  background: #FFF7EA;
  border: 1px solid #F6D38A;
  border-radius: var(--exp-radius-sm);
  color: var(--exp-ink);
  padding: 12px 14px;
}
.whereami-card .btn-amber.big {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border-radius: var(--exp-pill);
  min-height: 52px;
}

/* ================================================================== *
 *  NEARBY POPOUT  ~  js/map/poi.js : LIGHT bottom sheet
 *  Titled "Nearby places", three toggle chips (Points of interest /
 *  Restaurants / Grocery stores) with the active one in accent, then a
 *  distance sorted list with name, distance and an open in maps link.
 * ================================================================== */
.poi-card {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius);
  box-shadow: var(--exp-lift);
  font-family: var(--font-body);
  padding: 16px;
}
.poi-card .poi-tab {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: var(--exp-pill);
  min-height: 44px;
  font-weight: 600;
}
.poi-card .poi-tab.is-current {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border-color: var(--exp-accent);
  font-weight: 700;
}
.poi-card .poi-map-stage {
  background: var(--exp-variant);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius-sm);
}
.poi-card .poi-item {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius-sm);
  box-shadow: none;
  padding: 10px 12px;
}
.poi-card .poi-item-name { color: var(--exp-ink); font-weight: 700; }
.poi-card .poi-item-sub { color: var(--exp-muted); }
/* "Open in maps" reads as an accent text link with a comfortable tap size. */
.poi-card .poi-item .btn-small {
  background: transparent;
  border: none;
  color: var(--exp-accent);
  font-weight: 700;
  min-height: 44px;
  padding: 0 6px;
  box-shadow: none;
  text-decoration: none;
}
.poi-card .poi-item .btn-small:hover { text-decoration: underline; background: transparent; }
.poi-card .menu-foot-close {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: var(--exp-pill);
  min-height: 44px;
  margin-top: 6px;
}

/* ================================================================== *
 *  UNLOCK STORY POINT  ~  the GPS gated scene (js/chapters/runner.js) : DARK
 *  The far gate card (.saga-scene with a .saga-gate-readout) sits over the
 *  dimmed story. experience.css already renders the dark panel, the accent
 *  eyebrow and the accent primary; this layer adds the "locked, walk closer"
 *  reading: a soft accent glow, a centred layout and the distance readout as
 *  a prominent badge. Scoped to .saga-path so nothing light is affected.
 * ================================================================== */
.saga-path .saga-scene:has(.saga-gate-readout) {
  text-align: center;
  border-top-width: 3px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 158, 11, 0.12);
}
/* A faint accent halo behind the gate card stands in for the mock's "walk
   closer" glow, without touching the story art behind it. */
.saga-path .saga-scene:has(.saga-gate-readout)::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 96px;
  border-radius: var(--exp-radius, 24px) var(--exp-radius, 24px) 0 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0) 70%);
  pointer-events: none;
}
.saga-path .saga-scene:has(.saga-gate-readout) > * { position: relative; }

/* The live distance sentence becomes a prominent dark readout badge, with the
   accent used to draw the eye to the "how far" line. */
.saga-path .saga-gate-readout {
  display: block;
  margin: 12px auto 4px;
  max-width: 22rem;
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(5, 7, 13, 0.55);
  border: 1px solid rgba(248, 250, 252, 0.12);
  color: var(--exp-on-dark, #F8FAFC);
  font-size: 17px;
  line-height: 1.4;
}
.saga-path .saga-gate-hint {
  color: var(--exp-on-dark-muted, rgba(248, 250, 252, 0.72));
  font-style: italic;
}

/* The gate primary ("Check my location") is already .btn-amber via experience.css;
   give it a full pill and generous tap height to match the mock's action. */
.saga-path .saga-gate-check {
  border-radius: 9999px;
  min-height: 52px;
  font-weight: 700;
}

/* ================================================================== *
 *  Motion safety: any lift transitions added here settle instantly for
 *  players who prefer reduced motion.
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ch-card .btn-amber,
  .crewp-card .crewp-action,
  .chat-card .chat-compose .btn-small,
  .map-screen .map-here { transition: none; }
}