/* Shared SceneTitle / InteractionHint / PoemText / SceneControls.
   Loaded last; illustration layers and story/navigation geometry stay untouched. */
:root {
  --ui-paper:#F7F3EA; --ui-text:#6D6258; --ui-green:#8B9E8B;
  --ui-pink:#B78076; --ui-border:#D9CDBD;
  --ui-serif:"Noto Serif SC","Source Han Serif SC","思源宋体","Songti SC","STSong",serif;
  --ui-sans:"Noto Sans SC","Source Han Sans SC","思源黑体","PingFang SC","Microsoft YaHei",sans-serif;
}
html,body,.experience {background:var(--ui-paper);color:var(--ui-text);font-family:var(--ui-serif)}
.stage {--ui-safe:clamp(12px,2.5vw,36px);--ui-mirror:56px;background:var(--ui-paper);box-shadow:none;container-type:size}
.stage .vignette {background:none}
.stage button {font-family:var(--ui-sans);-webkit-tap-highlight-color:transparent}
.stage button:focus-visible,.poem-reader:focus-visible {outline:2px solid var(--ui-green);outline-offset:3px}
.stage .scene-title {position:absolute;top:5%;left:50%;right:auto;width:max-content;max-width:68%;margin:0;transform:translateX(-50%);color:var(--ui-text);font-family:var(--ui-serif);text-align:center;text-shadow:none;pointer-events:none;opacity:.3;transition:opacity 1s ease}
.stage.ui-entering .scene-title {opacity:1;animation:ui-fade-in 1.4s ease both}
.stage[data-ui-state="reading"] .scene-title {opacity:0;animation:none}
.stage .scene-title :is(small,span) {display:none}
.stage .scene-title :is(h1,h2) {margin:0;font:400 clamp(24px,2.3vw,36px)/1.4 var(--ui-serif);letter-spacing:.2em;color:inherit;text-shadow:none}
.stage .guide {left:var(--ui-safe);top:15%;right:auto;bottom:auto;max-width:min(45%,440px);padding:9px 14px;min-height:0;display:block;border:0;border-radius:4px;background:rgba(247,243,234,.88);color:var(--ui-text);font-family:var(--ui-sans);text-shadow:none;box-shadow:none;backdrop-filter:none;pointer-events:none;transition:opacity .5s ease}
.stage .guide :is(.guide-number,.guide-label) {display:none}
.stage .guide p {margin:0;font:400 clamp(14px,1.15vw,17px)/1.6 var(--ui-sans);letter-spacing:.06em;color:var(--ui-text)}
.stage .guide{width:fit-content;height:fit-content}
.stage .guide.is-quiet,.stage[data-ui-motion="transition"] .guide {opacity:0}
.stage[data-view="burial"] .guide {top:15%;max-width:41%}
.stage[data-view="burial"][data-ui-state="reading"] .guide {top:auto;bottom:var(--ui-safe);max-width:46%;font-size:14px}
.stage[data-view="west"] .guide {top:21%;left:33%;max-width:30%}
.stage[data-view="sequence"] .guide {top:auto;bottom:var(--ui-safe);max-width:46%}
.stage :is(.first-hit,.west-hotspot,.hotspot,.burial-pick,.burial-baoyu-hit,.wither-hit,.departure-hit)>span {display:none}
.stage :is(.first-hit,.west-hotspot,.hotspot,.burial-pick,.burial-baoyu-hit,.wither-hit,.departure-hit) {min-width:44px;min-height:44px}
.stage :is(.first-hit,.west-hotspot,.hotspot,.burial-pick,.burial-baoyu-hit,.wither-hit,.departure-hit)>i {border:1px solid var(--ui-pink);background:transparent;box-shadow:none;animation:none}
.stage :is(.first-hit,.west-hotspot,.hotspot,.burial-pick,.burial-baoyu-hit,.wither-hit,.departure-hit)>i:after {background:var(--ui-pink);box-shadow:none}
.stage .burial-bag {box-shadow:none;animation:none;border-color:var(--ui-pink)}
.stage .burial-bag span {color:var(--ui-text);font:14px/1.5 var(--ui-sans);background:rgba(247,243,234,.85);text-shadow:none}
.stage .burial-scene.complete .burial-bag {opacity:0;pointer-events:none}
.stage .burial-scene.foreground .poem-reader {visibility:hidden;pointer-events:none}
.stage .restart {z-index:90;top:var(--ui-safe);right:var(--ui-safe);width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--ui-border);border-radius:50%;background:rgba(247,243,234,.92);color:var(--ui-text);opacity:1;box-shadow:none;backdrop-filter:none}
.stage .restart:hover {background:var(--ui-paper);border-color:var(--ui-green)}
.stage.family-intro-active .restart {visibility:visible}
.stage .scene-nav,.stage.garden-map-active .scene-nav {z-index:80;right:calc(var(--ui-safe) + var(--ui-mirror) + 16px);bottom:var(--ui-safe);padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
.stage .scene-nav>.scene-next {min-height:44px;min-width:132px;padding:9px 20px;border:1px solid var(--ui-green);border-radius:24px;background:rgba(247,243,234,.96);color:var(--ui-text);font:500 16px/1.5 var(--ui-sans);letter-spacing:.06em;box-shadow:none;opacity:1;cursor:pointer;transition:background .3s ease,border-color .3s ease}
.stage .scene-nav>.scene-next:not(:disabled):hover {background:#e5ebe0}
.stage .scene-nav>.scene-next:disabled {color:#9d958c;border-color:var(--ui-border);background:rgba(247,243,234,.72);opacity:.65;cursor:default}
.stage .story-mirror {width:var(--ui-mirror);height:var(--ui-mirror);right:var(--ui-safe);bottom:var(--ui-safe);filter:none;animation:none}
.stage .story-mirror span {text-shadow:none}
.stage .chapter-navigation {--nav-paper:var(--ui-paper);--nav-ink:var(--ui-text);color:var(--ui-text);font-family:var(--ui-serif);background:rgba(247,243,234,.98)}
.stage .chapter-navigation[data-line="love"] {--nav-accent:var(--ui-pink)}
.stage .chapter-navigation[data-line="family"] {--nav-accent:var(--ui-green)}
/* Final navigation polish: same circle and chapter data, quieter hierarchy. */
.stage .chapter-navigation {--orbit-size:min(360px,calc(100cqh - 260px),calc(100cqw - 220px));background:var(--ui-paper)}
.stage .chapter-nav-heading>span {font-size:14px;color:var(--ui-text)}
.stage .chapter-nav-wheel {top:43%}
.stage .chapter-nav-side {color:var(--ui-text)}
.stage .chapter-link i {color:var(--ui-green);border:1px solid var(--ui-green);background:var(--ui-paper);outline:none}
.stage .chapter-link[data-unlocked="false"] i {color:var(--ui-border);border-color:var(--ui-border);border-style:dashed}
.stage .chapter-link[data-selected="true"] i {background:var(--ui-pink);border:1px solid var(--ui-pink);outline:none}
.stage .chapter-link[data-completed="true"] i:after {content:"✓";position:absolute;inset:auto;right:-5px;bottom:-5px;width:13px;height:13px;border-radius:50%;background:var(--ui-paper);color:var(--ui-green);font:11px/13px var(--ui-sans);transform:none}
.stage .chapter-link:not([data-completed="true"]) i:after {content:none}
.stage .chapter-link[data-selected="true"] .chapter-node-number {color:var(--ui-paper)}
.stage .chapter-link[data-unlocked="false"]:not([data-selected="true"]) .chapter-node-number {color:var(--ui-text);opacity:.55}
.stage .chapter-nav-selection {top:calc(43% + var(--orbit-size)/2 + 68px);width:min(360px,70cqw);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center}
.stage .chapter-selected-state {color:var(--ui-text);font:12px/18px var(--ui-sans)}
.stage .chapter-selected-title {margin:0;font-size:21px;line-height:30px;color:var(--ui-text)}
.stage .chapter-nav-selection .chapter-nav-enter {min-height:44px;min-width:108px;border:1px solid var(--ui-green);background:transparent}
.stage .chapter-nav-selection .chapter-nav-enter.is-locked {border-color:var(--ui-border);color:var(--ui-text)}
.stage .chapter-nav-message {display:block;left:4%;top:80px;bottom:auto;transform:none;width:min(240px,24cqw);padding:8px 10px;border-left:1px solid var(--ui-border);background:var(--ui-paper);color:var(--ui-text);text-align:left;font:13px/1.65 var(--ui-sans)}
.stage .chapter-nav-message:empty {display:none}
.stage .chapter-navigation .chapter-nav-close {border:1px solid var(--ui-border);background:transparent;box-shadow:none}
@media(max-height:550px),(max-width:950px) {
  .stage .chapter-navigation {--orbit-size:min(220px,calc(100cqh - 190px),calc(100cqw - 180px))}
  .stage .chapter-nav-wheel {top:42%}
  .stage .chapter-nav-selection {top:calc(42% + var(--orbit-size)/2 + 24px);gap:6px;width:min(320px,60cqw)}
  .stage .chapter-selected-state {font-size:12px;line-height:16px}
  .stage .chapter-selected-title {font-size:16px;line-height:22px}
  .stage .chapter-nav-message {left:18px;top:75px;width:min(180px,24cqw);font-size:12px}
}
.stage :is(.chapter-nav-close,.chapter-nav-enter,.burial-revisit,.departure-replay,.opening-enter,.cloud-skip,.fi-skip,.fi-continue) {min-height:44px;color:var(--ui-text);border-color:var(--ui-border);background:rgba(247,243,234,.93);box-shadow:none;font-family:var(--ui-sans)}
.stage .burial-revisit {top:var(--ui-safe);right:calc(var(--ui-safe) + 60px);font-size:14px}
.stage :is(.west-dialogue,.wither-verse,.first-dialogue) {color:var(--ui-text);font-family:var(--ui-serif);text-shadow:none;background:none;border:0;box-shadow:none;gap:24px}
.stage .west-dialogue {left:34%;top:16%;height:66%;max-width:30%}
.stage .west-dialogue p:last-child,.stage .wither-verse p:last-child {padding-top:0}
.stage :is(.west-dialogue,.wither-verse) p {margin:0;line-height:1.4;letter-spacing:4px;font-size:clamp(18px,1.7vw,25px);font-family:var(--ui-serif);font-weight:400;text-shadow:none}
.stage .west-dialogue .poem-column {opacity:1;animation:ui-fade-in 1.4s ease both}
.stage .west-dialogue p:last-child {animation-delay:.4s}
.stage .first-dialogue {top:15%;font-size:clamp(20px,2vw,30px)}
.stage .first-dialogue span {height:auto;min-height:1.2em;margin-bottom:3px;line-height:1.2}
.stage .first-dialogue span[hidden] {display:none}
.stage .wither-verse {padding:12px 16px;background:rgba(247,243,234,.88);border-radius:3px}
.stage .burial-poem {left:51%;top:30%;width:29%;height:46%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;overflow:visible;pointer-events:none}
.stage .burial-poem:before,.stage .burial-poem-hint {display:none}
.stage .burial-poem .poem-reader {pointer-events:auto}
.poem-source {display:none!important}
.stage .poem-reader {position:relative;width:100%;height:100%;touch-action:pan-y;user-select:none;color:var(--ui-text);font-family:var(--ui-serif);pointer-events:auto}
.stage .poem-reader[hidden] {display:none}
.stage .poem-text {display:flex;flex-direction:row-reverse;justify-content:center;align-items:flex-start;gap:24px;height:calc(100% - 48px);width:100%;margin:0}
.stage .poem-column {margin:0;flex:none;writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;font:400 clamp(18px,1.7vw,26px)/1.4 var(--ui-serif);letter-spacing:4px;color:var(--ui-text);animation:ui-fade-in 1.2s ease both;animation-delay:var(--column-delay,0s)}
.stage .poem-controls {position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;gap:4px;color:var(--ui-text);white-space:nowrap;font:12px/1.4 var(--ui-sans)}
.stage .poem-controls[hidden] {display:none}
.stage .poem-controls button {width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--ui-text);background:rgba(247,243,234,.7);font-size:20px;cursor:pointer}
.stage .poem-controls button:disabled {opacity:.3;cursor:default}
.stage .poem-controls button:not(:disabled):hover {background:rgba(139,158,139,.16)}
.stage .original-verse {left:50%;top:27%;width:34%;max-width:40%;height:52%;padding:0;transform:translateX(-50%);display:block;color:var(--ui-text)!important;text-shadow:none!important;background:none;border:0;box-shadow:none;pointer-events:auto}
.stage .original-verse .poem-column {font:400 clamp(18px,1.7vw,26px)/1.4 var(--ui-serif);letter-spacing:4px;opacity:1;transform:none;text-shadow:none}
.stage[data-step="7"] .original-verse .poem-reader {animation:ui-fade-in 1.4s 5.5s both}
.stage .narration {color:var(--ui-text);font-family:var(--ui-serif);text-shadow:none}
.stage .narration small {display:none}
.stage .narration p {display:inline-block;padding:8px 12px;background:rgba(247,243,234,.86);font-size:clamp(16px,1.4vw,22px)}
.stage .family-intro {--fi-paper:var(--ui-paper);--fi-ink:var(--ui-text);--fi-blue:var(--ui-green);font-family:var(--ui-serif)}
.stage :is(.fi-mark-index,.fi-mark i,.garden-place-kicker) {display:none}
.stage :is(.fi-mark,.fi-b1-copy>p,.fi-b2-copy>p,.fi-b2-intro>p) {display:none}
.stage :is(.garden-place,.garden-explore-hint) {color:var(--ui-text);background:rgba(247,243,234,.96);border-color:var(--ui-border);font-family:var(--ui-sans);box-shadow:none}
.stage .garden-place h3 {font-family:var(--ui-serif)}
.stage .quiz-launch {font-family:var(--ui-sans);box-shadow:none}
@keyframes ui-fade-in {from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* A transform-free title animation preserves its centered anchor. */
.stage.ui-entering .scene-title {animation-name:ui-title-in}
@keyframes ui-title-in {from{opacity:0}to{opacity:1}}
@media(max-height:500px),(max-width:900px) {
  .stage {--ui-safe:12px;--ui-mirror:48px}
  .stage .scene-title {top:5%}
  .stage .scene-title :is(h1,h2) {font-size:24px}
  .stage .guide {padding:6px 10px;max-width:43%}
  .stage .guide p {font-size:14px;line-height:1.5;letter-spacing:0}
  .stage .scene-nav>.scene-next {min-width:116px;padding:9px 14px;font-size:15px}
  .stage .burial-poem {left:49%;top:22%;bottom:calc(var(--ui-safe) + 60px);width:30%;height:auto}
  .stage .poem-column,.stage :is(.west-dialogue,.wither-verse) p {font-size:18px;letter-spacing:3px;line-height:1.3}
  .stage .poem-text {gap:22px}
  .stage .west-dialogue {left:33%;top:12%;height:70%;max-width:30%;gap:22px}
  .stage .first-dialogue {top:12%;font-size:20px}
  .stage .first-dialogue span {margin-bottom:1px;min-height:1.1em;line-height:1.1}
  .stage .original-verse {top:14%;height:72%;width:35%}
  .stage .original-verse .poem-column {font-size:17px;letter-spacing:3px;line-height:1.3}
  .stage :is(.burial-poem,.original-verse) .poem-text {height:100%}
  .stage :is(.burial-poem,.original-verse) .poem-controls {left:100%;bottom:0;transform:none;flex-direction:column;gap:0}
  .stage[data-view="burial"][data-ui-state="reading"] .guide {max-width:45%;padding:6px 9px}
  .stage .wither-verse {top:17%;left:60%;padding:10px 12px;gap:22px}
}
@media(max-height:350px) {
  .stage .burial-poem {top:12%}
  .stage .poem-column,.stage :is(.west-dialogue,.wither-verse) p {font-size:17px;letter-spacing:3px}
  .stage .original-verse {top:10%;height:76%}
}
@media(prefers-reduced-motion:reduce) {
  .stage .scene-title,.stage .poem-column,.stage .west-dialogue p,.stage[data-step="7"] .original-verse .poem-reader {animation:none!important}
  .stage :is(.scene-title,.guide,.burial-poem,.scene-next) {transition:none}
}