/* 《真理之门》— cinematic 盛世天下 / 隐形守护者-style FMV UI.
   Full-bleed scene image · floating gold-serif choices flanked by thin rules · subtitle narration.
   Tokens from design/art/art-bible.md §3. */
:root{
  --ink-900:#0E0C0B; --ink-800:#16110F; --paper:#F1E7D2;
  --gold:#C8A24B; --gold-bright:#E8C667; --jade:#5FA587; --cinnabar:#D8554A;
  --door-a:#7A1F25; --door-b:#2F6E55; --door-c:#8FB8C4;
  --r-r:#9C7A4D; --r-sr:#5FA587; --r-ssr:#E8C667;
  --serif:"Noto Serif SC","Source Han Serif SC",STSong,SimSun,serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  /* unified design language (consistency pass) — one scale for every surface */
  --maroon-1:rgba(86,22,26,.94); --maroon-2:rgba(56,13,17,.96);
  --line-gold:rgba(200,162,75,.5); --line-gold-soft:rgba(200,162,75,.3); --line-gold-strong:rgba(232,198,103,.85);
  --gold-peak:#FBE9B0;
  --rad-sm:4px; --rad-md:6px; --rad-lg:9px;
  --elev-1:0 2px 12px rgba(0,0,0,.45); --elev-2:0 7px 22px rgba(0,0,0,.55); --glow-gold:0 0 16px rgba(200,162,75,.32);
  --surface:linear-gradient(180deg,#1a130f,#100b09);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ink-900); color:var(--paper); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; overflow:hidden}

/* ---- full-bleed scene image layer ---- */
#bg{position:fixed; inset:0; z-index:0; background-size:cover; background-position:center;
  transition:opacity .5s ease; will-change:opacity}
/* placeholder cinematic texture per realm until AI art drops in */
#bg{background-image:
  radial-gradient(120% 90% at 50% 18%, rgba(120,90,55,.32), transparent 60%),
  repeating-linear-gradient(135deg,#1b1410 0 18px,#181210 18px 36px)}
#bg[data-realm="A"]{background-image:radial-gradient(120% 90% at 50% 25%, rgba(166,51,43,.42), transparent 62%), repeating-linear-gradient(135deg,#1d1310 0 18px,#170f0d 18px 36px)}
#bg[data-realm="B"]{background-image:radial-gradient(120% 90% at 50% 25%, rgba(47,110,85,.4), transparent 62%), repeating-linear-gradient(135deg,#12180f 0 18px,#0f140d 18px 36px)}
#bg[data-realm="C"]{background-image:radial-gradient(120% 90% at 50% 25%, rgba(143,184,196,.38), transparent 62%), repeating-linear-gradient(135deg,#11181b 0 18px,#0e1416 18px 36px)}
#bg[data-realm="DOORS"]{background-image:radial-gradient(120% 90% at 50% 22%, rgba(200,162,75,.22), transparent 60%), repeating-linear-gradient(135deg,#161210 0 18px,#120e0c 18px 36px)}
#bg[data-realm="end"]{background-image:radial-gradient(120% 90% at 50% 30%, rgba(232,198,103,.3), transparent 62%), #0b0908}
.photo{position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat}
.veil{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,6,5,.55) 0%, rgba(8,6,5,0) 28%, rgba(8,6,5,.15) 52%, rgba(8,6,5,.82) 86%, rgba(8,6,5,.95) 100%);
  box-shadow:inset 0 0 240px 50px rgba(0,0,0,.6)}

/* ---- layout ---- */
#app{position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  max-width:1100px; margin:0 auto; padding:18px 22px 0}
.topbar{display:flex; align-items:center; justify-content:space-between}
.brand{font-family:var(--serif); font-weight:700; color:var(--gold-bright); letter-spacing:.42em;
  font-size:19px; text-shadow:0 1px 8px rgba(0,0,0,.8); padding-left:.42em}
.meta{display:flex; align-items:center; gap:16px}
.hp{font-size:13px; color:var(--gold); letter-spacing:.08em; text-shadow:0 1px 6px #000; font-variant-numeric:tabular-nums}
.hp b{color:var(--paper)}
.lnk{appearance:none; background:none; border:0; cursor:pointer; color:var(--gold);
  font-family:var(--serif); font-size:13px; letter-spacing:.2em; opacity:.8; text-shadow:0 1px 6px #000}
.lnk:hover{opacity:1; color:var(--gold-bright)}

/* scene fills, content sits low (cinematic) */
#scene{flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:88px; max-width:880px; margin:0 auto; width:100%}

/* subtitle-style narration */
.narration{font-size:19px; line-height:2; color:var(--paper); white-space:pre-wrap;
  text-align:center; text-shadow:0 2px 14px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9);
  margin:0 auto 26px; max-width:760px; letter-spacing:.02em}
.narration.author{font-family:var(--serif); color:var(--gold-bright); font-size:23px; letter-spacing:.06em}
/* reveal-after-choosing: the consequence beat shown between a choice and the next scene */
.outcome-eyebrow{text-align:center; font-family:var(--serif); color:var(--gold); font-size:13px; letter-spacing:.34em; opacity:.82; margin-bottom:14px}
.narration.outcome{animation:ocIn .32s ease-out both}
@keyframes ocIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.clue-badge{display:inline-block; margin-left:10px; padding:2px 11px; border:1px solid var(--gold); border-radius:var(--rad-sm); color:var(--gold-bright); font-family:var(--serif); font-size:14px; letter-spacing:.18em; vertical-align:middle; box-shadow:0 0 12px rgba(200,162,75,.28); text-shadow:none}

/* choices = 盛世天下 banner-plaques: maroon ground, gold serif, rose end-ornaments, laid out horizontally */
.choices{display:flex; flex-flow:row wrap; align-items:stretch; justify-content:center; gap:26px; width:100%; max-width:1040px; margin:0 auto}
.choice{appearance:none; cursor:pointer; flex:1 1 260px; max-width:460px; min-height:42px;
  display:flex; align-items:center; justify-content:center; gap:11px; padding:9px 22px;
  font-family:var(--serif); line-height:1.4; color:var(--gold-bright);
  background:linear-gradient(180deg,var(--maroon-1),var(--maroon-2));
  border:1px solid var(--line-gold); border-radius:var(--rad-lg);
  box-shadow:var(--elev-1), inset 0 1px 0 rgba(232,198,103,.18);
  text-shadow:0 1px 6px rgba(0,0,0,.6); transition:transform .18s, box-shadow .18s, border-color .18s, color .18s}
.choice .rule{flex:0 0 auto; width:20px; height:20px; max-width:none; opacity:.8; transition:opacity .18s;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A24B' stroke-width='1.2' stroke-linecap='round'><circle cx='12' cy='12' r='2.6'/><path d='M12 3v3.2M12 17.8v3.2M3 12h3.2M17.8 12h3.2'/><path d='M5.8 5.8l2 2M16.2 16.2l2 2M18.2 5.8l-2 2M5.8 18.2l2-2' opacity='0.55'/></svg>") center/contain no-repeat}
.choice .ct{flex:0 1 auto; min-width:0; text-align:center; font-size:18px; letter-spacing:.04em}
.choice:hover,.choice:focus-visible,.choice:active{color:#fff; border-color:var(--line-gold-strong); transform:translateY(-2px); outline:none;
  box-shadow:var(--elev-2), var(--glow-gold), inset 0 1px 0 rgba(232,198,103,.3)}
.choice:hover .rule,.choice:focus-visible .rule{opacity:1}
.choice[disabled],.choice.sealed{cursor:not-allowed; color:#9a875f;
  background:linear-gradient(180deg,rgba(42,29,25,.9),rgba(28,18,16,.92)); border-color:var(--line-gold-soft); box-shadow:none}
.choice .seal{color:var(--cinnabar); border:1px solid var(--cinnabar); border-radius:50%;
  width:20px; height:20px; display:inline-grid; place-items:center; font-family:var(--serif); font-size:11px; margin-right:8px}
.choice .warn{display:block; font-family:var(--sans); font-size:12px; color:#F2C4AD; letter-spacing:.02em; line-height:1.35; margin-top:5px; word-break:break-word}
/* 影响深远的选项 — node-level significant-choice omen */
.omen{position:fixed; left:50%; top:clamp(64px,10vh,120px); transform:translateX(-50%); z-index:5;
  max-width:min(90vw,680px); text-align:center; pointer-events:none;
  font-family:var(--serif); color:var(--gold-bright); font-size:21px; line-height:1.5; letter-spacing:.22em;
  text-shadow:0 0 20px rgba(232,198,103,.55), 0 2px 10px #000;
  animation:omenIn .5s ease-out backwards; transition:opacity .55s ease}
.omen.gone{opacity:0}
.omen::before,.omen::after{content:"◆"; color:var(--gold); opacity:.7; font-size:.6em; vertical-align:middle; margin:0 .55em}
@keyframes omenIn{from{opacity:0; transform:translate(-50%,-10px)} to{opacity:1; transform:translateX(-50%)}}

/* ending */
.ending-title{font-family:var(--serif); color:var(--gold-bright); font-size:16px; letter-spacing:.32em;
  display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:16px;
  text-shadow:0 0 16px rgba(232,198,103,.4), 0 2px 10px #000}
.ending-title .rule{position:relative; height:1px; width:58px; max-width:none; background:linear-gradient(90deg,transparent,var(--gold))}
.ending-title .rule:last-child{background:linear-gradient(270deg,transparent,var(--gold))}
.ending-title .rule::after{content:"◆"; position:absolute; right:-5px; top:-8px; font-size:11px; color:var(--gold-bright); text-shadow:0 0 8px rgba(232,198,103,.6)}
.ending-title .rule:last-child::after{left:-5px; right:auto}
.ending-title.win{font-size:27px; letter-spacing:.42em; color:var(--gold-peak); animation:winIn .6s cubic-bezier(.2,.7,.2,1) both}
.ending-title.win .rule::after{font-size:14px; top:-11px}
@keyframes winIn{from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none}}
.stamp{color:var(--cinnabar); border:1.5px solid var(--cinnabar); border-radius:var(--rad-sm); padding:2px 9px;
  font-family:var(--serif); font-weight:700; letter-spacing:.08em; font-size:13px}
.rarity{font-family:var(--serif); font-weight:700; letter-spacing:.18em; margin-left:10px}
.rarity[data-r="R"]{color:var(--r-r)} .rarity[data-r="SR"]{color:var(--r-sr)} .rarity[data-r="SSR"]{color:var(--r-ssr)}
.act-row{display:flex; gap:14px; justify-content:center; margin-top:30px}

/* ---- ending: 终幕题卡 (film end-title card) — scoped to #scene.ending; choice/outcome/resolve scenes untouched ---- */
#scene.ending{position:relative; justify-content:flex-start; padding-top:clamp(64px,16vh,150px); padding-bottom:40px; text-align:center}
/* one-shot gold light-bloom + tightening vignette — the ENDING signal; overlays photo/veil, under the text */
#scene.ending::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(232,198,103,.22), rgba(200,162,75,.08) 34%, transparent 60%),
    radial-gradient(140% 120% at 50% 40%, transparent 52%, rgba(8,6,5,.55) 100%);
  animation:endBloom 1.4s ease-out both}
@keyframes endBloom{0%{opacity:0; transform:scale(1.06)} 100%{opacity:1; transform:scale(1)}}
/* title + text: upper, BIGGER, staged rise-in (scoped so the global .narration stays a subtitle) */
#scene.ending .ending-title{font-size:clamp(20px,4.4vw,30px); letter-spacing:.40em; gap:22px; margin-bottom:26px; animation:endRise .7s .25s ease-out both}
#scene.ending .ending-title .rule{width:76px; background:linear-gradient(90deg,transparent,var(--line-gold-strong))}
#scene.ending .ending-title .rule:last-child{background:linear-gradient(270deg,transparent,var(--line-gold-strong))}
#scene.ending .narration{font-size:clamp(20px,2.6vw,26px); line-height:1.85; max-width:680px; margin:0 auto 30px; animation:endRise .7s .45s ease-out both}
#scene.ending .narration.author{font-size:clamp(23px,3vw,30px)}
#scene.ending .act-row{margin-top:34px; animation:endRise .7s .65s ease-out both}
@keyframes endRise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
/* 通关/win keeps its celebratory peak + a warmer bloom */
#scene.ending .ending-title.win{font-size:clamp(26px,5.6vw,38px); letter-spacing:.46em; color:var(--gold-peak)}
#scene.ending.win::before{background:
    radial-gradient(120% 80% at 50% 30%, rgba(251,233,176,.30), rgba(232,198,103,.12) 34%, transparent 62%),
    radial-gradient(140% 120% at 50% 40%, transparent 52%, rgba(8,6,5,.5) 100%)}

.btn{appearance:none; cursor:pointer; font-family:var(--serif); letter-spacing:.16em; color:var(--ink-900);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border:0; border-radius:var(--rad-md);
  padding:9px 22px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-weight:700}
.btn.ghost{background:none; color:var(--gold); border:1px solid var(--line-gold)}
.btn:hover{filter:brightness(1.08)}

/* ---- landing / title screen ---- */
/* the only screen that scrolls: hero + premise + 玩法 + CTA can exceed a short viewport. auto-margin centers
   the column when it fits and lets it scroll from the top when it doesn't (justify-content:center would clip). */
#scene.landing{justify-content:flex-start; overflow-y:auto; padding:24px 18px 32px}
.lt{margin:auto; max-width:560px; width:100%; text-align:center; animation:ltIn .6s ease-out both}
@keyframes ltIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
/* three-doors hero (signature) — palette from art-bible tokens so the title screen tracks the game's identity */
.lt-doors{display:block; width:min(360px,84%); height:auto; margin:0 auto 16px; filter:drop-shadow(0 8px 22px rgba(0,0,0,.55))}
.lt-da{fill:var(--door-a)}
.lt-river{fill:#79a994}
.lt-db{fill:var(--door-b)}
.lt-dc{fill:var(--door-c)}
.lt-frame{fill:none; stroke:var(--line-gold); stroke-width:1.4}
.lt-frame-c{stroke:var(--line-gold-strong)}
.lt-relief{fill:none; stroke:rgba(241,231,210,.26); stroke-width:1.2; stroke-linecap:round}
.lt-plank{stroke:rgba(0,0,0,.26); stroke-width:1.3}
.lt-ground{stroke:var(--line-gold-soft); stroke-width:1}
.lt-truth{fill:rgba(232,198,103,.6); font-family:var(--serif); font-weight:700; font-size:15px; letter-spacing:2px}
.lt-key{fill:rgba(14,12,11,.72)}
.lt-shimmer{animation:ltShimmer 5s ease-in-out infinite} /* the one ambient motion (§ excessive-motion) */
@keyframes ltShimmer{0%,18%{transform:translateX(0)} 60%,100%{transform:translateX(424px)}}
.lt-title{font-family:var(--serif); font-weight:700; color:var(--gold-bright); margin:0 0 14px; padding-left:.28em;
  font-size:clamp(34px,9vw,52px); letter-spacing:.28em; text-shadow:0 0 24px rgba(232,198,103,.4), 0 2px 12px #000}
.lt-premise{font-size:16px; line-height:1.9; color:var(--paper); max-width:34em; margin:0 auto 20px;
  text-shadow:0 2px 12px rgba(0,0,0,.9); letter-spacing:.02em}
.lt-rule{position:relative; height:1px; width:200px; max-width:60%; margin:0 auto 22px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.lt-rule::after{content:"◆"; position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  color:var(--gold-bright); font-size:11px; text-shadow:0 0 8px rgba(232,198,103,.6)}
.lt-how{max-width:30em; margin:0 auto 26px; text-align:left}
.lt-how-h{font-family:var(--serif); color:var(--gold); letter-spacing:.34em; font-size:13px; text-align:center; margin-bottom:14px; opacity:.85}
.lt-how ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.lt-how li{display:flex; gap:14px; align-items:baseline; line-height:1.7}
.lt-how b{flex:0 0 auto; min-width:3em; font-family:var(--serif); font-weight:700; color:var(--gold-bright); letter-spacing:.16em}
.lt-how span{flex:1; color:var(--paper); font-size:14.5px; text-shadow:0 1px 8px rgba(0,0,0,.8)}
#lt-go{font-size:17px; letter-spacing:.22em; padding:13px 34px; touch-action:manipulation}
#lt-go:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .lt{animation:none} .lt-shimmer{animation:none; opacity:0} }
@media (max-width:480px){ .lt-title{letter-spacing:.2em} .lt-how b{min-width:2.6em} }

/* ---- revert timeline (画卷) — slim translucent strip ---- */
.timeline{position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex; gap:7px; align-items:center;
  padding:7px 16px; background:linear-gradient(0deg,rgba(8,6,5,.92),rgba(8,6,5,0)); overflow-x:auto;
  cursor:grab; user-select:none; -webkit-user-select:none}
.timeline.dragging{cursor:grabbing}
/* secret toggle living where 画卷 used to sit: invisible while cards are hidden, a faint ⤡ while shown */
.tl-toggle{appearance:none; background:none; border:0; cursor:pointer; flex:0 0 auto; padding:0; position:relative;
  width:62px; height:30px; border-radius:var(--rad-sm); text-align:left;
  font-family:var(--serif); font-size:18px; letter-spacing:.28em; color:var(--gold)}
.tl-toggle::before{content:'⤡'; opacity:.7; padding-left:4px; transition:opacity .2s}
/* shapeless click ripple — a soft glow that never traces the button outline */
.tl-toggle::after{content:''; position:absolute; left:50%; top:50%; width:20px; height:20px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none;
  background:radial-gradient(circle, rgba(232,198,103,.6), rgba(232,198,103,0) 70%)}
.timeline.collapsed{background:none; cursor:default}
.timeline.collapsed .tl-card{display:none}
.timeline.collapsed .tl-toggle{color:transparent; cursor:default}  /* invisible → don't betray it with a pointer cursor */
.timeline.collapsed .tl-toggle::before{opacity:0}
.tl-toggle.tap::after{animation:tlTap .45s ease-out}
@keyframes tlTap{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.3)}
  25%{opacity:.9}
  100%{opacity:0; transform:translate(-50%,-50%) scale(3)}}
/* discoverability nudge on a top link the player hasn't opened yet */
.lnk.nudge{opacity:1; animation:nudgeGlow 1.6s ease-in-out infinite}
@keyframes nudgeGlow{
  0%,100%{color:var(--gold); text-shadow:0 1px 6px #000}
  50%{color:var(--gold-bright); text-shadow:0 0 10px rgba(232,198,103,.9), 0 1px 6px #000}}
.tl-card{flex:0 0 auto; min-width:46px; height:30px; padding:0 8px; border:1px solid var(--line-gold-soft); border-radius:var(--rad-sm);
  cursor:pointer; background:rgba(20,15,11,.6); color:#b89a64; font-size:10px; font-family:var(--serif);
  display:grid; place-items:center; transition:transform .12s, border-color .12s; backdrop-filter:blur(2px)}
.tl-card:hover{transform:translateY(-2px); border-color:var(--line-gold-strong); color:var(--gold-bright)}
.tl-card.current{border-color:var(--line-gold-strong); color:var(--gold-bright); box-shadow:0 0 8px rgba(232,198,103,.4)}
.tl-card.locked{cursor:not-allowed; opacity:.45; color:var(--cinnabar)}

/* ---- gallery (图鉴) ---- */
.overlay{position:fixed; inset:0; z-index:20; background:rgba(8,6,5,.96); overflow:auto; display:none}
.overlay.open{display:block}
.overlay .inner{max-width:880px; margin:0 auto; padding:30px 20px 70px}
.gtop{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.grid{grid-template-columns:repeat(4,1fr)}}
.cell{position:relative; overflow:hidden; aspect-ratio:3/4; border:1px solid var(--line-gold-soft); border-radius:var(--rad-md); padding:9px;
  display:flex; flex-direction:column; justify-content:flex-end; background:var(--surface)}
.cell[data-r="R"]{border-color:rgba(156,122,77,.6)} .cell[data-r="SR"]{border-color:rgba(95,165,135,.6)}
.cell[data-r="SSR"]{border-color:var(--r-ssr); box-shadow:0 0 18px rgba(232,198,103,.22)}
.cell.locked{align-items:center; justify-content:center; color:#5a4a30; font-family:var(--serif); font-size:30px}
.cell.open{cursor:pointer; transition:transform .12s, border-color .12s}
.cell.open:hover{transform:translateY(-3px); border-color:var(--line-gold-strong)}
.cell .art{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center}
.cell .art::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,6,5,.85),rgba(8,6,5,.15) 72%)}
.cell .nm{position:relative; z-index:1; font-size:12.5px; color:var(--paper); font-family:var(--serif)} .cell .tag{position:relative; z-index:1; font-size:10px; color:var(--gold); opacity:.7; letter-spacing:.1em}
/* ending detail: show the WHOLE portrait art (contain), not a cover-cropped slice */
.detail-art{display:block; margin:0 auto; max-width:100%; max-height:calc(100dvh - 230px); width:auto; height:auto;
  border-radius:var(--rad-md); border:1px solid var(--line-gold-soft); background:#0b0908; cursor:pointer}
.detail-art[data-r="R"]{border-color:rgba(156,122,77,.6)} .detail-art[data-r="SR"]{border-color:rgba(95,165,135,.6)}
.detail-art[data-r="SSR"]{border-color:var(--r-ssr); box-shadow:0 0 18px rgba(232,198,103,.22)}
.gallery-stat{color:var(--gold); font-family:var(--serif); letter-spacing:.12em; margin:4px 0 18px}

/* ---- zoom-out 画卷: 盛世天下-style branch MAP (spine + parallel branches, curved connectors) ---- */
.tlz-hint{color:var(--gold); opacity:.7; font-size:12px; letter-spacing:.08em; margin:4px 0 8px}
.flow-wrap{position:relative; overflow:auto; max-height:calc(100dvh - 230px); padding:4px 0 12px;
  scroll-behavior:smooth; touch-action:pan-x pan-y;
  scrollbar-width:thin; scrollbar-color:rgba(200,162,75,.5) transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.flow-wrap::-webkit-scrollbar{width:8px; height:8px}
.flow-wrap::-webkit-scrollbar-track{background:transparent}
.flow-wrap::-webkit-scrollbar-thumb{background:rgba(200,162,75,.4); border-radius:4px}
.flow-wrap::-webkit-scrollbar-thumb:hover{background:rgba(200,162,75,.7)}
.map-canvas{position:relative}
.flow-svg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible}
.map-link{fill:none; stroke:rgba(200,162,75,.5); stroke-width:2.5}
.map-link.lit{stroke:var(--gold-bright); stroke-width:3; filter:drop-shadow(0 0 4px rgba(232,198,103,.5))}
.map-link.branch{stroke:rgba(200,162,75,.4); stroke-width:2}
.map-link.branch.dim{stroke:rgba(200,162,75,.24); stroke-dasharray:5 5}
.map-node{position:absolute; z-index:1; border:1px solid var(--line-gold); border-radius:var(--rad-md); overflow:hidden;
  cursor:pointer; display:flex; align-items:flex-end; background:#0b0908; outline:none;
  transition:transform .12s, box-shadow .12s, border-color .12s}
.map-node:hover,.map-node:focus-visible{transform:translateY(-3px); border-color:var(--line-gold-strong); box-shadow:var(--elev-2); z-index:5}
.map-art{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0}
.map-node .flow-cap{position:relative; z-index:1; width:100%; padding:5px 8px; font-family:var(--serif);
  font-size:11.5px; color:var(--paper); letter-spacing:.05em}
.map-node.spine.current{border-color:var(--gold-bright); box-shadow:0 0 0 2px var(--gold-bright), 0 0 22px rgba(232,198,103,.4)}
.map-node.spine.current .flow-cap{color:var(--gold-bright)}
.map-node.branch{border-color:rgba(200,162,75,.3)}
.map-node.branch.unexplored{border-style:dashed; border-color:rgba(200,162,75,.35)}
.map-node.branch.unexplored .map-art{filter:blur(5px) brightness(.45) grayscale(.3)}
.map-node.branch.unexplored .flow-cap{color:var(--gold); text-align:center; font-size:17px; opacity:.85}
.map-node.ending{border-color:var(--r-ssr); box-shadow:0 0 0 1px var(--r-ssr) inset, 0 0 14px rgba(232,198,103,.28)}
.map-node .node-kind{position:absolute; top:0; left:0; z-index:2; padding:1px 7px 2px; font-family:var(--serif); font-size:10px; letter-spacing:.12em;
  color:#0b0908; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-bottom-right-radius:var(--rad-md); box-shadow:0 1px 4px rgba(0,0,0,.4)}
.map-node.locked{cursor:not-allowed; filter:grayscale(.6) brightness(.5)}
.flow-flame{position:absolute; top:-17px; left:50%; transform:translateX(-50%); z-index:2; color:var(--gold-bright); font-size:15px; text-shadow:0 0 10px var(--gold-bright)}
.flow-progress{margin-top:12px; color:var(--gold); font-family:var(--serif); letter-spacing:.1em; font-size:13px}
.flow-progress b{color:var(--gold-bright)}
/* ui-ux polish: center the map (kill empty space), gentle entrance, mobile sizing */
#timeline-zoom.open{display:grid; place-items:safe center}
.map-canvas{animation:mapIn .32s ease-out both}
@keyframes mapIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media(max-width:560px){
  #timeline-zoom .inner{padding:18px 12px 40px}
  .flow-wrap{max-height:calc(100dvh - 150px)}
  .narration{font-size:17px} #scene{padding-bottom:74px}
  .choices{gap:12px} .choice{padding:14px 18px; min-height:52px} .choice .ct{font-size:16.5px}
  .choice{flex-basis:100%; max-width:none}  /* stack full-width on phones — no 3-char text wrapping */
  .omen{font-size:16.5px; letter-spacing:.12em; top:clamp(50px,7vh,90px)}
  .ending-title.win{font-size:22px; letter-spacing:.3em}
  #scene.ending{padding-top:clamp(40px,12vh,90px)}
}
@media(prefers-reduced-motion:reduce){ *{transition:none!important} .map-canvas{animation:none} #scene.ending::before,#scene.ending .ending-title,#scene.ending .narration,#scene.ending .act-row{animation:none} }