.opening-progress{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-6px 0 14px;font-size:11px;color:#92b7ac}.opening-progress>div{display:flex;gap:6px}.opening-progress i{font-style:normal;padding:5px 12px;border-radius:20px;border:1px solid #9dc0b331;transition:.25s}.opening-progress i.active{color:#fff0bb;background:#c49c4933;border-color:#dbbf78}.opening-progress i.done{color:#a1d8bd;background:#497c632b}.opening-progress>button{font-size:10px;color:#9aafa5}.opening-visual{position:relative;height:clamp(230px,39dvh,370px);overflow:hidden;border-radius:14px;border:1px solid #d1b87c50;background:radial-gradient(ellipse at 50% 35%,#274e4e,#10282d 75%);isolation:isolate}.opening-visual video,.opening-still{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%}.opening-caption{padding:18px 8px 8px;min-height:91px}.opening-caption>span{font-size:11px;letter-spacing:3px;color:#f5d48e;border-left:2px solid #e8c276;padding-left:9px}.opening-caption>p{font:19px/1.65 var(--serif);color:#fff0d3;margin:10px 0 0;max-width:830px;min-height:32px}.opening-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 8px 12px;min-height:50px}.opening-actions>span{font-size:12px;line-height:1.6;color:#a9cbbb}.opening-actions .gold-button{min-height:46px;min-width:170px;font-size:14px;white-space:nowrap}.opening-actions .gold-button:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}.opening-journey .chapter-audio{border-top:1px solid #b5c29924;padding-top:7px;font-size:10px}.opening-journey .chapter-audio.silent-scene{visibility:hidden}.opening-journey .chapter-audio button{font-size:11px;min-height:32px}.opening-journey[data-step="ready"] .opening-visual{box-shadow:0 0 34px #edc57e25}.opening-journey[data-step="ready"] .gold-button{box-shadow:0 0 24px #e5be7850}
.opening-practice{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#30594d66,transparent 65%)}.practice-kicker{font-size:12px;letter-spacing:3px;color:#d8c79d;margin-bottom:20px}.practice-keys{display:flex;align-items:center;gap:26px}.practice-key{width:112px;height:140px;border:1px solid #b8d0b54d;border-radius:17px;background:linear-gradient(150deg,#355448,#122d2c);box-shadow:0 9px 0 #071c21,0 16px 30px #0004;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#88a89b;transition:.22s}.practice-key small{font-size:12px}.practice-key b{font:54px/1.2 var(--serif);margin:7px 0}.practice-key i{font-size:10px;font-style:normal}.practice-key.next{border-color:#f0cb76;color:#ffe5a2;box-shadow:0 9px 0 #071c21,0 0 34px #e9c3753a;animation:key-call 1.7s ease-in-out infinite}.practice-key.lit{background:linear-gradient(150deg,#5b8b61,#214b3b);border-color:#c5edb4;color:#e0ffd1;transform:translateY(5px);animation:none;box-shadow:0 4px 0 #071c21,0 0 30px #95df9359}.practice-energy{width:80px;display:flex;align-items:center;justify-content:center;gap:9px;position:relative}.practice-energy>span{position:absolute;top:-47px;color:#bca363;font-size:31px}.practice-energy i{width:15px;height:15px;border-radius:50%;background:#4c645750;border:1px solid #a2bf8744}.practice-energy i.lit{background:#f6d485;box-shadow:0 0 23px #f6cf70,0 0 5px #fff5bd}.opening-practice>p{font-size:11px;color:#a9bcaa;margin:25px 0 0}@keyframes beacon-call{50%{box-shadow:0 5px 25px #ffc96d88}}@keyframes draw-route{from{stroke-dashoffset:800}to{stroke-dashoffset:0}}@keyframes letter-unfold{from{opacity:0;transform:translateY(25px) scale(.85) rotate(-3deg)}to{opacity:1;transform:none}}@keyframes key-call{50%{box-shadow:0 9px 0 #071c21,0 0 48px #e9c37566}}
@media(max-height:800px) and (min-width:701px){.modal-story:has(.opening-journey){padding:18px 28px}.modal-story:has(.opening-journey) .modal-header{padding-bottom:8px;margin-bottom:16px}.modal-story:has(.opening-journey) .modal-header h2{font-size:25px}.opening-visual{height:245px}.opening-caption{min-height:70px;padding-top:12px}.opening-caption>p{font-size:18px}.opening-progress{margin-bottom:10px}.practice-key{height:125px}.practice-kicker{margin-bottom:13px}.opening-practice>p{margin-top:18px}}
@media(max-width:700px){.opening-progress{gap:8px;flex-wrap:wrap;margin-top:-4px}.opening-progress>span{display:none}.opening-progress i{font-size:10px;padding:4px 7px}.opening-progress>button{font-size:9px}.opening-visual{height:265px}.opening-caption{padding:15px 1px 8px;min-height:100px}.opening-caption>p{font-size:17px;line-height:1.7}.opening-actions{flex-direction:column;gap:11px;padding:5px 0 14px;align-items:stretch}.opening-actions>span{text-align:center;font-size:11px;min-height:18px}.opening-actions .gold-button{min-height:45px;white-space:normal}.opening-journey .chapter-audio{gap:4px 13px}.opening-journey #story-voice-state{flex-basis:100%;margin:0}.practice-keys{gap:9px}.practice-key{width:89px;height:117px}.practice-key b{font-size:42px}.practice-key small{font-size:11px}.practice-key i{font-size:9px}.practice-energy{width:42px;gap:6px}.practice-energy i{width:12px;height:12px}.practice-energy>span{font-size:25px;top:-36px}.practice-kicker{font-size:11px;letter-spacing:1px;margin-bottom:24px}}
.reduced .opening-journey *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){.opening-journey *{animation:none!important;transition:none!important}}
/* 完整展示人物头部、双脚和栏杆；宽屏留白由柔焦场景衬底承接。 */
.opening-visual::before{content:"";position:absolute;inset:-20px;background:var(--scene-backdrop) center/cover;filter:blur(20px) brightness(.48);z-index:-1}.opening-visual video,.opening-still{object-fit:contain;position:relative}
@media(max-height:800px) and (min-width:701px){.opening-visual{height:280px}}

/* 序章像一本打开的冒险绘本：主画面、短对白、一个行动。 */
.modal-story:has(.opening-journey).modal {padding:20px 24px 14px;background:linear-gradient(145deg,#173a3b,#0b252c 70%)}
.modal-story:has(.opening-journey) .modal-header {align-items:center;border:0;margin:0 0 10px;padding:0}
.modal-story:has(.opening-journey) .modal-eyebrow {font-size:9px;letter-spacing:1.7px;opacity:.7}
.modal-story:has(.opening-journey) .modal-header h2 {font-size:24px;margin:5px 0 0}
.opening-progress {margin:0 0 12px;padding:0;min-height:28px}
.opening-progress>span {display:none}
.opening-progress>div {gap:17px}
.opening-progress i,.opening-progress i.active,.opening-progress i.done {position:relative;padding:3px 0;background:none;border:0;border-radius:0;font-size:11px}
.opening-progress i::before {content:'';display:inline-block;width:5px;height:5px;border:1px solid #759b8e;border-radius:50%;margin-right:6px;vertical-align:1px}
.opening-progress i.active::before {background:#f0ce85;border-color:#f0ce85;box-shadow:0 0 9px #f3c67399}
.opening-progress i.done::before {background:#92bba6;border-color:#92bba6}
.opening-progress>button {font-size:11px;color:#b0c8bd}

/* 地图前后共享构图；只突出当前可行动的一站。 */
dialog:has(.opening-journey:is([data-step="map"],[data-step="ready"])) {width:min(1120px,96vw,calc((100dvh - 305px)*1.7768))}
.modal-story:has(.opening-journey:is([data-step="map"],[data-step="ready"])).modal {padding:16px 20px 12px}
.opening-journey:is([data-step="map"],[data-step="ready"]) {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px}
.opening-journey:is([data-step="map"],[data-step="ready"]) :is(.opening-progress,.opening-visual,.chapter-audio) {grid-column:1/-1}
.opening-journey:is([data-step="map"],[data-step="ready"]) .opening-visual {height:auto;border:0;border-radius:9px;overflow:visible;background:none;box-shadow:0 15px 30px #0003}
.opening-journey:is([data-step="map"],[data-step="ready"]) .opening-visual::before {display:none}
.letter-map {position:relative;aspect-ratio:1672/941;width:100%;isolation:isolate;animation:letter-arrives .5s ease-out both}
.letter-map-art {display:block;width:100%;height:100%;border-radius:8px}
.letter-heading {position:absolute;left:8%;top:12%;color:#3c5142;pointer-events:none;text-shadow:0 1px 1px #fff1cc}
.letter-heading>span {font-size:clamp(8px,1vw,11px);letter-spacing:2px;color:#866a3c}
.letter-heading h3 {font:600 clamp(14px,1.6vw,21px)/1.6 var(--serif);margin:5px 0;letter-spacing:1px}
.map-local-route {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-local-route path {fill:none;stroke:#654e33;stroke-width:1.25;stroke-dasharray:2 5;stroke-linecap:round;opacity:.7}
.map-local-route circle {fill:#264a43;stroke:#fff1cc;stroke-width:2}
.lit .map-local-route path {stroke:#946526;stroke-width:1.6;opacity:1}
.lit .gate-anchor {fill:#edbd5d}
.map-here {position:absolute;left:33%;top:85%;transform:translateX(-50%);font:11px/1.5 var(--serif);color:#3d584a;white-space:nowrap}
.map-place {position:absolute;transform:translate(-50%,-50%);font:500 clamp(10px,1.3vw,15px)/1.5 var(--serif);color:#577062;letter-spacing:2px;background:#f5e4bd8c;padding:0 6px;pointer-events:none}
.place-forest {left:42%;top:56%}.place-harbor {left:65%;top:86%}
.map-destination {position:absolute;left:83%;top:51%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;color:#49614e;pointer-events:none;background:#f8e8c3c9;padding:4px 10px;border-bottom:1px solid #7a76594d}
.map-destination small {font:9px/1.4 var(--sans);letter-spacing:2px;color:#71694c}
.map-destination b {font:600 14px/1.7 var(--serif);letter-spacing:1px}
/* 门灯为目的地徽记，落点贴着果园门口；整块标签也可点击。 */
.map-stop {position:absolute;left:var(--stop-x);top:var(--stop-y);transform:translate(-50%,-74px);display:flex;flex-direction:column;align-items:center;width:156px;padding:0;border:0;background:none;cursor:pointer;overflow:visible;color:#f7e6ba;z-index:2;text-align:center}
.map-stop:hover {color:#fff1c5;background:none}
.map-stop:focus-visible {outline:3px solid #fff1bb;outline-offset:5px;border-radius:8px;box-shadow:0 0 0 8px #21524a}
.stop-emblem {position:relative;width:66px;height:74px;display:grid;place-items:center;isolation:isolate}
.stop-ring {position:absolute;width:62px;height:62px;bottom:0;border-radius:50%;background:radial-gradient(circle at 45% 35%,#3d6359,#143c35);border:2px solid #eac985;box-shadow:0 3px 5px #092f3566,0 0 0 4px #fcf0ce99;z-index:-1}
button.map-stop .stop-ring::after {content:"";position:absolute;inset:-6px;border:1px solid #365b40;border-radius:50%;animation:stop-call 2.4s ease-out infinite}
.painted-lantern {display:block;width:46px;height:65px;filter:drop-shadow(0 3px 2px #0006)}
.painted-lantern img {display:block;width:100%;height:100%;object-fit:contain;mask:url("/assets/orchard-lantern-lit.png") center/contain no-repeat}
.painted-lantern.is-lit {filter:drop-shadow(0 0 6px #ffdc77) drop-shadow(0 0 14px #ffd27a88)}
.stop-number {position:absolute;right:-5px;top:0;width:24px;height:24px;display:grid;place-items:center;background:#f6e6bd;border:1px solid #92723e;border-radius:50%;font:600 12px var(--serif);color:#305449;box-shadow:0 2px 4px #14372940}
.stop-label {position:relative;display:flex;flex-direction:column;align-items:center;width:100%;margin-top:5px;padding:8px 8px 7px;border:1px solid #b8a475;border-radius:5px;background:linear-gradient(145deg,#244e45,#173e37);box-shadow:0 4px 0 #102e27,0 9px 15px #223f3933}
.stop-label::before {content:"";position:absolute;top:-5px;width:8px;height:8px;transform:rotate(45deg);background:#244e45;border-left:1px solid #b8a475;border-top:1px solid #b8a475}
.stop-label small {font:9px/1.4 var(--sans);letter-spacing:2px;color:#e0c181}
.stop-label b {font:600 18px/1.6 var(--serif);letter-spacing:2px;color:#fff2d3}
.stop-label>span {display:flex;align-items:center;gap:8px;font:10px/1.5 var(--sans);color:#e7e7cb}
.stop-label i {font-style:normal;color:#f0ce83}
.map-stop:hover .stop-label {background:linear-gradient(145deg,#326254,#204b3e);border-color:#f2d493}
.map-stop:hover .stop-ring {box-shadow:0 3px 5px #092f3566,0 0 0 5px #fff2cc}
.stop-complete {cursor:default}
.stop-complete .stop-ring {background:radial-gradient(circle,#876729,#3c4d30);box-shadow:0 0 0 4px #fcf0ce99,0 0 32px #e6bc5c99}
.stop-complete .stop-label small {color:#ffe4a5}
.opening-journey:is([data-step="map"],[data-step="ready"]) .opening-caption {position:relative;min-height:0;padding:17px 0 11px 46px;align-self:center}
.opening-journey:is([data-step="map"],[data-step="ready"]) .opening-caption::before {content:"";position:absolute;left:0;top:23px;width:34px;height:34px;border:1px solid #a8c49a6b;border-radius:50%;background:url("/assets/media/onboarding/v2.5/greeting-last.jpg") 50% 33%/240%;box-shadow:0 2px 10px #0003}
.opening-journey:is([data-step="map"],[data-step="ready"]) .opening-caption>span {border:0;padding:0;font-size:10px;letter-spacing:2px;color:#c0ccac}
.opening-journey:is([data-step="map"],[data-step="ready"]) .opening-caption>p {font-size:16px;line-height:1.7;margin:4px 0 0;min-height:0}
.opening-journey:is([data-step="map"],[data-step="ready"]) .opening-actions {align-self:center;padding:12px 0 8px;min-height:0}
.opening-journey[data-step="map"] .opening-actions {display:none}
.opening-journey:is([data-step="map"],[data-step="ready"]) #opening-feedback {display:none}
.opening-journey:is([data-step="map"],[data-step="ready"]) .opening-actions .gold-button {min-width:168px;min-height:43px;padding:10px 18px;font-size:12px}
.opening-journey:is([data-step="map"],[data-step="ready"]) .chapter-audio {padding-top:5px;border-color:#afc6a922}
.opening-journey:is([data-step="map"],[data-step="ready"]) #story-voice-state {font-size:9px}
.practice-energy {width:80px;flex-direction:column;gap:12px}
.practice-energy>.painted-lantern {position:static;width:49px;height:70px}
.energy-slots {display:flex;gap:10px}
@keyframes letter-arrives {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes stop-call {0%,100%{scale:1;opacity:0}25%{opacity:.7}80%{scale:1.35;opacity:0}}
@media(max-width:700px) {
  .modal-story:has(.opening-journey).modal {padding:17px 15px 12px}
  .modal-story:has(.opening-journey) .modal-header h2 {font-size:21px}
  .modal-story:has(.opening-journey) .modal-eyebrow {font-size:8px;letter-spacing:1px}
  .opening-progress>div {gap:12px}.opening-progress i {font-size:10px}.opening-progress i::before {margin-right:4px;width:4px;height:4px}
  .opening-progress>button {font-size:10px}
  dialog:has(.opening-journey:is([data-step="map"],[data-step="ready"])) {width:96vw}
  .modal-story:has(.opening-journey:is([data-step="map"],[data-step="ready"])).modal {padding:17px 12px 12px}
  .opening-journey:is([data-step="map"],[data-step="ready"]) {display:block}
  .opening-journey:is([data-step="map"],[data-step="ready"]) .opening-visual {margin:0 -5px}
  .letter-heading {left:7%;top:10%}.letter-heading>span {font-size:7px;letter-spacing:.5px}.letter-heading h3 {font-size:11px;letter-spacing:0;margin-top:2px}
  .map-place {font-size:10px;letter-spacing:0;padding:0 3px}
  .place-forest {left:44%;top:54%}
  .map-destination {top:52%;left:82%;padding:2px 5px}
  .map-destination small {font-size:7px;letter-spacing:0}.map-destination b {font-size:10px;letter-spacing:0}
  .map-stop {width:116px;transform:translate(-50%,-48px)}
  .stop-emblem {width:44px;height:48px}.stop-ring {width:41px;height:41px;border-width:1px}
  .stop-emblem .painted-lantern {width:31px;height:44px}.stop-number {width:18px;height:18px;right:-7px;top:-1px;font-size:10px}
  .stop-label {margin-top:3px;padding:5px 5px 4px}.stop-label small {font-size:8px;letter-spacing:1px}.stop-label b {font-size:14px;line-height:1.4}.stop-label>span {font-size:9px;gap:3px}
  .map-here {display:none}
  .opening-journey:is([data-step="map"],[data-step="ready"]) .opening-caption {padding:18px 0 8px 40px}
  .opening-journey:is([data-step="map"],[data-step="ready"]) .opening-caption>p {font-size:16px}
  .opening-journey:is([data-step="map"],[data-step="ready"]) .opening-actions {padding:7px 0 12px}
  .opening-journey:is([data-step="map"],[data-step="ready"]) #story-voice-state {display:none}
  .practice-energy {width:56px}.practice-energy .painted-lantern {width:39px;height:56px}
}
/* 对话框在 app 容器外，减少动态设置直接作用于序章根节点。 */
dialog:has(.opening-journey) {max-height:96dvh}
.opening-reduced * {animation:none!important;transition:none!important}

/* 影片按真实比例占满舞台，避免宽面板中只剩中间一小块画面。 */
dialog:has(.opening-journey[data-cinematic="true"]) {width:min(1120px,96vw,calc((100dvh - 290px)*1.7768))}
.opening-journey[data-cinematic="true"] .opening-visual {height:auto;aspect-ratio:16/9}
.opening-journey[data-cinematic="true"] .opening-visual::before {display:none}
.opening-journey[data-cinematic="true"] .opening-caption {min-height:0;padding:13px 0 5px}
.opening-journey[data-cinematic="true"] .opening-caption>p {font-size:17px;line-height:1.6;margin-top:6px;min-height:0}
.opening-journey[data-cinematic="true"] .opening-actions {padding:5px 0 10px;min-height:0}
.opening-journey[data-cinematic="true"] .opening-actions .gold-button {min-height:40px;font-size:12px}
@media(max-width:700px){
  dialog:has(.opening-journey[data-cinematic="true"]) {width:96vw}
  .opening-journey[data-cinematic="true"] .opening-visual {margin-top:5px}
  .opening-journey[data-cinematic="true"] .opening-caption {padding:16px 0 8px}
  .opening-journey[data-cinematic="true"] .opening-actions {padding-top:5px}
}