/* ============================================================
   Jungle Trail v2: one continuous bottom-to-top journey across every chapter.
   Loaded last. Everything is scoped to #story-map-body.trail-v2 so it wins over
   the earlier map passes in play.html, game-feel.css and ui-shell.css.
   Painted art slots (TRAIL_ART in play.html) switch pieces to .has-art.
   ============================================================ */
#story-map-body.trail-v2 { position:relative; }
#story-map-body.trail-v2 .trail-scroll { container-type:inline-size; background:#0a1811; scroll-padding-top:40px; scroll-padding-bottom:40px; }

/* ---------- Header ---------- */
#story-map-body.trail-v2 .trail-marks-total { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:58px; height:36px;
  padding:0 12px; border:1.5px solid #d6b25e; border-radius:999px; color:#ffe9a8; background:linear-gradient(#244d36,#143524);
  box-shadow:inset 0 1px 0 #6fae6f55, 0 2px 0 #071a10; font:800 14px/1 var(--font-body); white-space:nowrap; }
#story-map-body.trail-v2 #trail-chapter-title { transition:opacity .2s ease; }

/* ---------- Chapters ---------- */
#story-map-body.trail-v2 .trail-chapter { position:relative; display:flow-root; }
#story-map-body.trail-v2 .story-trail { overflow:visible; z-index:1; }
#story-map-body.trail-v2 .trail-chapter.is-locked .story-trail::after { content:""; display:block; position:absolute; inset:0; z-index:1;
  background:linear-gradient(#020c08aa,#020c08cc); pointer-events:none; }
#story-map-body.trail-v2 .trail-chapter-lock { position:absolute; left:50%; top:46%; z-index:6; transform:translate(-50%,-50%);
  display:grid; justify-items:center; gap:6px; width:min(78%,300px); padding:18px 18px 16px; border:2px solid #b8924c; border-radius:16px;
  color:#f4e7c0; background:linear-gradient(#173a28f2,#0b2418f5); box-shadow:0 10px 26px #000b, inset 0 0 0 2px #0c2a1a; text-align:center; }
#story-map-body.trail-v2 .trail-chapter-lock .ui-icon { width:28px; height:28px; color:#f2cf63; stroke-width:2.2; }
#story-map-body.trail-v2 .trail-chapter-lock strong { font:22px/1.1 var(--font-display); color:#fff0bc; text-transform:capitalize; letter-spacing:.5px; }
#story-map-body.trail-v2 .trail-chapter-lock span { font:650 13px/1.35 var(--font-body); color:#d5dcc4; }

/* Chapter plaque sits just below where a chapter begins; it must not cover the first node near the art's bottom edge. */
#story-map-body.trail-v2 .trail-banner { position:relative; z-index:5; display:grid; justify-items:center; gap:2px;
  width:min(84%,340px); margin:10px auto -26px; padding:9px 18px 10px; border:2px solid #d0a957; border-radius:14px;
  background:linear-gradient(#f9efd2,#e9d6a6); color:#2a4430; text-align:center;
  box-shadow:0 0 0 3px #4a3418, 0 8px 20px #000a, inset 0 1px 0 #fff8e2; }
#story-map-body.trail-v2 .trail-banner::before, #story-map-body.trail-v2 .trail-banner::after { content:""; position:absolute; top:50%; width:14px; height:14px;
  border:2px solid #d0a957; background:#2f6b40; transform:translateY(-50%) rotate(45deg); box-shadow:0 2px 4px #0008; }
#story-map-body.trail-v2 .trail-banner::before { left:-10px; }
#story-map-body.trail-v2 .trail-banner::after { right:-10px; }
#story-map-body.trail-v2 .trail-banner-plaque { display:grid; justify-items:center; gap:2px; }
#story-map-body.trail-v2 .trail-banner span { font:800 10px/1 var(--font-body); letter-spacing:1.6px; text-transform:uppercase; color:#7a5b26; }
#story-map-body.trail-v2 .trail-banner strong { font:24px/1.1 var(--font-display); text-transform:capitalize; color:#1d4a2d; letter-spacing:.3px; }
#story-map-body.trail-v2 .trail-banner small { font:700 12px/1.2 var(--font-body); color:#4a5a3c; }
#story-map-body.trail-v2 .trail-banner small b { color:#9a6a12; font-weight:800; }
#story-map-body.trail-v2 .trail-banner.sunken_sanctuary { border-color:#d8b55e; background:linear-gradient(#e9f4ec,#c9dfd2); box-shadow:0 0 0 3px #0e3b31, 0 8px 22px #000c, 0 0 18px #16c6c055, inset 0 1px 0 #fff; }
#story-map-body.trail-v2 .trail-banner.sunken_sanctuary strong { color:#0f4a3c; }
#story-map-body.trail-v2 .trail-banner.sunken_sanctuary::before, #story-map-body.trail-v2 .trail-banner.sunken_sanctuary::after { background:#17634b; }

/* ---------- Joins between pieces ---------- */
#story-map-body.trail-v2 .trail-gateway { position:relative; height:clamp(170px,48vw,250px); overflow:hidden;
  background:
    radial-gradient(3px 3px at 22% 30%, #ffe9a0 50%, transparent 51%),
    radial-gradient(2px 2px at 74% 46%, #b6fff1 50%, transparent 51%),
    radial-gradient(2px 2px at 63% 18%, #ffe9a0 50%, transparent 51%),
    radial-gradient(3px 3px at 35% 72%, #fff2b8 50%, transparent 51%),
    radial-gradient(ellipse 60% 40% at 50% 8%, #16c6c033, transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 100%, #d9b24a2e, transparent 70%),
    linear-gradient(#0a1c16 0%, #0b2219 38%, #18301b 72%, #2a3a1d 100%); }
#story-map-body.trail-v2 .trail-gateway::before, #story-map-body.trail-v2 .trail-gateway::after { content:""; position:absolute; top:0; bottom:0; width:30%;
  background:linear-gradient(90deg,#040c08 0%,#0a1a1100 100%); }
#story-map-body.trail-v2 .trail-gateway::before { left:0; }
#story-map-body.trail-v2 .trail-gateway::after { right:0; transform:scaleX(-1); }
#story-map-body.trail-v2 .trail-gateway-path { position:absolute; left:50%; top:0; bottom:0; width:6px; transform:translateX(-50%);
  background:repeating-linear-gradient(#f2cf63 0 7px, transparent 7px 18px); border-radius:3px;
  filter:drop-shadow(0 0 4px #e6b94f) drop-shadow(0 0 10px #d89c2f88); opacity:.85; }
#story-map-body.trail-v2 .trail-gateway.has-art { height:auto; aspect-ratio:900/1100; background:var(--trail-art) center/cover no-repeat; }
#story-map-body.trail-v2 .trail-gateway.has-art::before, #story-map-body.trail-v2 .trail-gateway.has-art::after,
#story-map-body.trail-v2 .trail-gateway.has-art .trail-gateway-path { display:none; }

#story-map-body.trail-v2 .trail-frontier { position:relative; display:grid; align-content:start; justify-items:center; height:300px; padding:46px 24px 0; text-align:center;
  background:
    radial-gradient(ellipse 80% 30% at 30% 18%, #e8efe2cc, transparent 70%),
    radial-gradient(ellipse 70% 26% at 75% 34%, #dfe9d8aa, transparent 70%),
    radial-gradient(ellipse 90% 30% at 50% 62%, #9fbfae55, transparent 70%),
    linear-gradient(#c7d4c2 0%, #7f9a88 30%, #2a4a3e 64%, #0c2a26 88%, #061c18 100%); }
#story-map-body.trail-v2 .trail-frontier > div { display:grid; gap:6px; max-width:300px; }
#story-map-body.trail-v2 .trail-frontier strong { font:26px/1.1 var(--font-display); color:#1d3a2a; text-shadow:0 1px 0 #f2f6ec; }
#story-map-body.trail-v2 .trail-frontier span { font:650 13px/1.35 var(--font-body); color:#2d4a39; }
#story-map-body.trail-v2 .trail-frontier.has-art { height:auto; aspect-ratio:900/1000; padding-top:28px; background:var(--trail-art) center/cover no-repeat; }
#story-map-body.trail-v2 .trail-frontier.has-art strong { font-size:22px; color:#fff3cc; text-shadow:0 2px 6px #000c; }
#story-map-body.trail-v2 .trail-frontier.has-art span { color:#e9efdc; text-shadow:0 1px 4px #000c; }

#story-map-body.trail-v2 .trail-start { display:grid; place-items:end center; height:150px; padding-bottom:18px;
  background:linear-gradient(#1b2a15 0%, #12210f 45%, #0a1811 100%); }
#story-map-body.trail-v2 .trail-start span { padding:6px 14px; border:1px solid #8f7a46; border-radius:999px; color:#e9d9a6; background:#0d2016;
  font:800 11px/1 var(--font-body); letter-spacing:1.4px; text-transform:uppercase; }
#story-map-body.trail-v2 .trail-start.has-art { height:auto; aspect-ratio:900/600; background:var(--trail-art) center/cover no-repeat; }

/* ---------- Nodes ---------- */
#story-map-body.trail-v2 .story-node.guardian { width:56px; height:56px; border-width:3px; border-color:#e7c463;
  box-shadow:0 3px 0 #4a3418, 0 0 0 3px #1d3b28cc, 0 0 16px #f2c94c77, 0 6px 12px #000a; }
#story-map-body.trail-v2 .story-node.guardian .story-node-number { font-size:21px; }
#story-map-body.trail-v2 .story-node.mastered { border-color:#f2cf63; box-shadow:0 3px 0 #10251c, 0 0 10px #f2cf6377, 0 4px 8px #001d10bb; }
#story-map-body.trail-v2 .story-node.open:not(.current) { border-color:#f2d27d; box-shadow:0 3px 0 #10251c, 0 0 0 3px #f2d27d44, 0 4px 8px #001d10bb; }
#story-map-body.trail-v2 .story-node.current { width:54px; height:54px; }
#story-map-body.trail-v2 .trail-chapter.sunken_sanctuary .story-node:not(.current):not(.locked) { background:linear-gradient(#17634b,#0b3b2c); }

/* Trail Marks as three stars in a smile under each cleared node. */
#story-map-body.trail-v2 .story-node-marks { position:absolute; left:50%; top:calc(100% - 7px); z-index:4; display:flex; align-items:flex-start; gap:0;
  padding:0; border:0; background:none; box-shadow:none; opacity:1; transform:translateX(-50%); filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 2px #0009); }
#story-map-body.trail-v2 .story-mark { display:block; width:15px; height:15px; margin:0 -1px; border:0; border-radius:0; transform:none; box-shadow:none;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background:linear-gradient(#5d6a5e,#323d35); }
#story-map-body.trail-v2 .story-mark:nth-child(2) { transform:translateY(4px) scale(1.12); }
#story-map-body.trail-v2 .story-mark.earned { background:linear-gradient(#fff3a6 0%,#f3c443 45%,#c88a1c 100%); }

/* ---------- You-are-here pin ---------- */
#story-map-body.trail-v2 .trail-pin { --pin-dx:0px; --pin-dy:calc(-100% - 16px); position:absolute; left:calc(var(--node-x)*1%); top:calc(var(--node-y)*1%); z-index:8; width:46px; height:58px;
  transform:translate(calc(-50% + var(--pin-dx)),var(--pin-dy)); pointer-events:none; }
#story-map-body.trail-v2 .trail-pin.lean-left { --pin-dx:-38px; }
#story-map-body.trail-v2 .trail-pin.lean-right { --pin-dx:38px; }
#story-map-body.trail-v2 .trail-pin.pin-level { --pin-dy:-55%; }
#story-map-body.trail-v2 .trail-pin.pin-level.lean-left { --pin-dx:-60px; }
#story-map-body.trail-v2 .trail-pin.pin-level.lean-right { --pin-dx:60px; }
#story-map-body.trail-v2 .trail-pin-face { position:absolute; left:2px; top:0; width:42px; height:42px; border:3px solid #f2cf63; border-radius:50%;
  background:#15321c url('assets/ui/crest-lion-serpent.webp') center/cover no-repeat;
  box-shadow:0 0 0 2px #5a3c12, 0 4px 10px #000c, 0 0 14px #f2cf6366; }
#story-map-body.trail-v2 .trail-pin-face::after { content:""; position:absolute; left:50%; top:calc(100% + 1px); transform:translateX(-50%);
  border:9px solid transparent; border-top:12px solid #f2cf63; border-bottom:0; filter:drop-shadow(0 2px 1px #0009); }
#story-map-body.trail-v2 .trail-pin.has-art { background:var(--trail-art) center/contain no-repeat; }
#story-map-body.trail-v2 .trail-pin.has-art .trail-pin-face { display:none; }

/* ---------- Guardian chest ---------- */
#story-map-body.trail-v2 .trail-chest { position:absolute; left:calc(var(--node-x)*1% + 62px); top:calc(var(--node-y)*1% + 6px); z-index:6;
  width:52px; height:46px; min-width:44px; min-height:44px; padding:0; border:0; background:none; transform:translate(-50%,-50%); cursor:pointer;
  filter:drop-shadow(0 3px 2px #000a) drop-shadow(0 0 8px #f2c94c66); }
#story-map-body.trail-v2 .trail-chest svg { display:block; width:100%; height:100%; }
#story-map-body.trail-v2 .trail-chest.open { filter:drop-shadow(0 3px 2px #000a) drop-shadow(0 0 14px #ffe38acc); }
#story-map-body.trail-v2 .trail-chest.has-art { background:var(--trail-art) center/contain no-repeat; }
#story-map-body.trail-v2 .trail-chest:focus-visible { outline:3px solid #fff1b2; outline-offset:3px; border-radius:8px; }


/* ---------- Painted art (TRAIL_ART) ---------- */
/* Painted plaque: the title sits on the stone face; the plaque overlays the top of the next scene so no dark band shows. */
#story-map-body.trail-v2 .trail-banner.has-art { --plaque-w:min(92cqw,380px); display:block; width:var(--plaque-w); aspect-ratio:720/220;
  margin:0 auto calc(var(--plaque-w) * -0.3056); padding:0; border:0; border-radius:0; box-shadow:none;
  background:var(--trail-art) center/100% 100% no-repeat; filter:drop-shadow(0 6px 10px #000c); }
#story-map-body.trail-v2 .trail-banner.has-art::before, #story-map-body.trail-v2 .trail-banner.has-art::after { display:none; }
#story-map-body.trail-v2 .trail-banner.has-art .trail-banner-plaque { position:absolute; inset:31% 19% 30%; display:grid; place-content:center; justify-items:center; gap:1px; }
#story-map-body.trail-v2 .trail-banner.has-art span { color:#e8c873; font-size:clamp(8px,2.4cqw,10px); letter-spacing:1.8px; text-shadow:0 1px 2px #000; }
#story-map-body.trail-v2 .trail-banner.has-art strong { color:#fff1c4; font-size:clamp(17px,5.6cqw,22px); line-height:1; white-space:nowrap; text-shadow:0 2px 0 #1a1208, 0 0 6px #000a; }
#story-map-body.trail-v2 .trail-banner.has-art small { position:absolute; left:50%; top:calc(100% - 8px); transform:translateX(-50%); white-space:nowrap;
  padding:4px 11px; border:1.5px solid #c99a45; border-radius:999px; color:#f4e7c0; background:#0d2417ee; box-shadow:0 3px 8px #000a; font-size:11px; }
#story-map-body.trail-v2 .trail-banner.has-art small b { color:#f2cf63; }
/* Feather the bottom of each connecting scene over the map below it, so the paintings blend instead of meeting at a hard line.
   The 10cqw overlap stays clear of the topmost node on each map. */
#story-map-body.trail-v2 .trail-frontier.has-art, #story-map-body.trail-v2 .trail-gateway.has-art { position:relative; z-index:2; margin-bottom:-10cqw;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 10cqw), transparent); mask-image:linear-gradient(#000 calc(100% - 10cqw), transparent); }
#story-map-body.trail-v2 .trail-frontier.has-art > div { padding:10px 16px 12px; border:1.5px solid #c99a45; border-radius:14px; background:#0b2017c4; box-shadow:0 6px 18px #0008; }
#story-map-body.trail-v2 .trail-start.has-art { padding-bottom:22px; }
/* The camp scene slides up under the first map, whose painted layer fades out at the bottom, so the two paintings
   cross-fade instead of meeting at a hard line. Only the art layer (::before) fades; level nodes stay fully opaque. */
#story-map-body.trail-v2 .trail-start.has-art { position:relative; z-index:0; margin-top:-16cqw; }
#story-map-body.trail-v2 section.trail-chapter:last-of-type .story-trail::before {
  -webkit-mask-image:linear-gradient(#000 calc(100% - 16cqw), transparent); mask-image:linear-gradient(#000 calc(100% - 16cqw), transparent); }
#story-map-body.trail-v2 .trail-start.has-art span { display:none; }
#story-map-body.trail-v2 .trail-pin.has-art { width:60px; height:60px; filter:drop-shadow(0 4px 6px #000a); }
#story-map-body.trail-v2 .trail-chest.has-art { width:60px; height:60px; }

/* ---------- Jump back to your level ---------- */
#story-map-body.trail-v2 .trail-jump { position:absolute; right:14px; bottom:var(--trail-jump-bottom,170px); z-index:20; display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 14px 0 10px; border:2px solid #d6b25e; border-radius:999px; color:#fff3c8; background:linear-gradient(#2f7a45,#174c2a);
  box-shadow:0 3px 0 #092415, 0 6px 14px #000a; font:800 13px/1 var(--font-body); cursor:pointer; }
#story-map-body.trail-v2 .trail-jump[hidden] { display:none; }
#story-map-body.trail-v2 .trail-jump .ui-icon { width:20px; height:20px; stroke-width:2.6; transition:transform .2s ease; }
#story-map-body.trail-v2 .trail-jump.up .ui-icon { transform:rotate(180deg); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference) {
  #story-map-body.trail-v2 .trail-pin { animation:trailPinBob 1.6s ease-in-out infinite; }
  #story-map-body.trail-v2 .trail-chest:not(.open) { animation:trailChestGlow 2.4s ease-in-out infinite; }
  #story-map-body.trail-v2 .trail-gateway-path { animation:trailPathFlow 1.4s linear infinite; }
}
@keyframes trailPinBob { 0%,100% { transform:translate(calc(-50% + var(--pin-dx)),var(--pin-dy)); } 50% { transform:translate(calc(-50% + var(--pin-dx)),calc(var(--pin-dy) - 8px)); } }
@keyframes trailChestGlow { 0%,100% { filter:drop-shadow(0 3px 2px #000a) drop-shadow(0 0 6px #f2c94c55); } 50% { filter:drop-shadow(0 3px 2px #000a) drop-shadow(0 0 14px #f2c94ccc); } }
@keyframes trailPathFlow { to { background-position:0 -18px; } }
body.reduced-motion #story-map-body.trail-v2 .trail-pin,
body.reduced-motion #story-map-body.trail-v2 .trail-chest,
body.reduced-motion #story-map-body.trail-v2 .trail-gateway-path { animation:none; }

@media (max-width:360px) {
  #story-map-body.trail-v2 .trail-banner strong { font-size:21px; }
  #story-map-body.trail-v2 .trail-chest { left:calc(var(--node-x)*1% + 58px); }
}

/* ============================================================
   Trail v2.1: component finish from the "Golden Trail" / "Sunken Trail" mockups (2026-10-12).
   Gold-rimmed emerald medallions with star docks, a luminous gold current node, slate locked
   nodes, a graded (warmer, livelier) map, and a rounded ivory "Up next" panel.
   ============================================================ */
#story-map-body.trail-v2 .story-chrome { border-bottom: 1px solid #c99a4599; }
#story-map-body.trail-v2 .trail-progress i { background: linear-gradient(90deg, #e9c46a, #f6dc8e); box-shadow: 0 0 6px #e9c46a66; }

/* Map art moves to a pseudo-layer so it can be colour-graded without dimming the nodes. */
#story-map-body.trail-v2 .story-trail { background-image: none !important; }
#story-map-body.trail-v2 .story-trail::before { content: ""; display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--story-art) center / 100% 100% no-repeat; filter: var(--map-grade, saturate(1.2) brightness(1.08) contrast(1.05)); }
#story-map-body.trail-v2 .story-trail.sunken_sanctuary::before { filter: var(--map-grade, saturate(1.25) brightness(1.12) contrast(1.04)); }

/* Medallions: open, cleared and mastered share one finish. */
#story-map-body.trail-v2 .story-node:not(.current):not(.locked) { width: 46px; height: 46px; border: 2.5px solid #d9b25e;
  background: radial-gradient(circle at 35% 28%, #2f8455 0%, #17573a 45%, #0c3522 100%); color: #fff3d6;
  box-shadow: 0 0 0 2px #0d2a1ccc, 0 5px 10px #000b, inset 0 2px 0 #ffffff26, inset 0 -3px 6px #0006; }
#story-map-body.trail-v2 .trail-chapter.sunken_sanctuary .story-node:not(.current):not(.locked) {
  background: radial-gradient(circle at 35% 28%, #2f8455 0%, #17573a 45%, #0c3522 100%); }
#story-map-body.trail-v2 .story-node .story-node-number { font: 900 20px/1 var(--font-body); text-shadow: 0 1px 2px #0009; }
#story-map-body.trail-v2 .story-node.guardian:not(.current):not(.locked) { width: 54px; height: 54px; }

/* Current level: luminous gold with concentric rims and a restrained halo. */
#story-map-body.trail-v2 .story-node.current { width: 62px; height: 62px; border: 3px solid #fff3cf; color: #173d26;
  background: radial-gradient(circle at 35% 28%, #fff4c4 0%, #f2cf63 42%, #c08a26 100%);
  box-shadow: 0 0 0 3px #b7801f, 0 0 0 6px #0d2a1caa, 0 0 26px 8px #f2c94c55, 0 6px 12px #000a; }
#story-map-body.trail-v2 .story-node.current .story-node-number { font-size: 23px; color: #173d26; text-shadow: 0 1px 0 #fff6d6; }

/* Locked: slate stone, readable numerals, small gold-grey padlock. */
#story-map-body.trail-v2 .story-node.locked { width: 44px; height: 44px; border: 2px solid #a9b2a4; color: #eef0e6;
  background: radial-gradient(circle at 35% 28%, #95a096 0%, #66726a 50%, #3f4a43 100%);
  box-shadow: 0 4px 9px #000a, inset 0 2px 0 #ffffff22; filter: none !important; opacity: .96 !important; }
#story-map-body.trail-v2 .story-node.locked .story-node-number { color: #eef0e6; opacity: .9; }
#story-map-body.trail-v2 .story-node-lock { right: -4px; top: -4px; width: 20px; height: 20px; border: 1.5px solid #c9b27a; background: #2c352f; color: #f0e2b0; }

/* Star dock under cleared nodes. */
#story-map-body.trail-v2 .story-node-marks { top: calc(100% - 8px); padding: 1px 5px 2px; border: 1px solid #c9a24f99; border-radius: 999px;
  background: #0b2016e6; filter: drop-shadow(0 2px 2px #0008); }
#story-map-body.trail-v2 .story-mark { width: 12px; height: 12px; }
#story-map-body.trail-v2 .story-mark:nth-child(2) { transform: translateY(1px) scale(1.12); }

/* "Up next" panel: rounded ivory sheet with a fine gold edge and a confident emerald CTA. */
#story-map-body.trail-v2 .story-preview { margin-top: -16px; padding: 16px 18px 14px; border-top: 1.5px solid #c9a24f; border-radius: 22px 22px 0 0;
  background: linear-gradient(#fbf4df, #f3e8c8); box-shadow: 0 -10px 24px #0009; }
#story-map-body.trail-v2 .story-preview h2 { color: #163d26 !important; }
#story-map-body.trail-v2 #story-play { min-height: 58px; border: 1.5px solid #e2bd62; border-radius: 14px; color: #fff4d0;
  background: linear-gradient(#25784b, #114a2c); box-shadow: 0 3px 0 #072a17, 0 8px 18px #0005, inset 0 1px 0 #ffffff26; }
#story-map-body.trail-v2 .trail-jump { bottom: calc(var(--trail-jump-bottom, 170px) - 16px); }
#story-map-body.trail-v2 .trail-chest.chest-left { left: calc(var(--node-x)*1% - 62px); }
@media (max-width:360px) { #story-map-body.trail-v2 .trail-chest.chest-left { left: calc(var(--node-x)*1% - 58px); } }

/* Locked next chapter: a gated teaser that ends the scroll (nothing locked renders beyond it). */
#story-map-body.trail-v2 .trail-locked-teaser { position:relative; z-index:2; display:grid; place-items:center; height:clamp(240px,70cqw,320px); padding:24px 18px;
  background:linear-gradient(#020c08, #0a1d14); margin-bottom:-10cqw;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 10cqw), transparent); mask-image:linear-gradient(#000 calc(100% - 10cqw), transparent); }
#story-map-body.trail-v2 .trail-locked-teaser.has-art { background:linear-gradient(#020c08ee 0%, #020c0899 45%, transparent 75%), var(--trail-art) center bottom / cover no-repeat; }
#story-map-body.trail-v2 .trail-locked-teaser::before { content:""; position:absolute; inset:0; pointer-events:none; backdrop-filter:blur(2px) saturate(.7); -webkit-backdrop-filter:blur(2px) saturate(.7); }
#story-map-body.trail-v2 .trail-locked-card { position:relative; display:grid; justify-items:center; gap:4px; max-width:300px; padding:14px 18px 15px; text-align:center;
  border:2px solid #b8924c; border-radius:16px; color:#f4e7c0; background:linear-gradient(#173a28f2,#0b2418f5); box-shadow:0 10px 26px #000b, inset 0 0 0 2px #0c2a1a; }
#story-map-body.trail-v2 .trail-locked-card .ui-icon { width:26px; height:26px; color:#f2cf63; stroke-width:2.2; }
#story-map-body.trail-v2 .trail-locked-card small { color:#d9b86d; font:800 10px var(--font-body); letter-spacing:1.6px; text-transform:uppercase; }
#story-map-body.trail-v2 .trail-locked-card strong { font:24px/1.1 var(--font-display); color:#fff0bc; text-transform:capitalize; }
#story-map-body.trail-v2 .trail-locked-card span { font:650 13px/1.35 var(--font-body); color:#d5dcc4; }