body:has(#world-opening){background:#160f3d}
#flight-globe{opacity:1;transition:filter .5s}
.world-overlay{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 40%,#25185d 0%,#160f3d 66%,#100a31 100%);overflow:auto;color:#fff;font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif}
.world-overlay[hidden]{display:none!important}
/* 中日文避頭點：閉合標點（」』）。，等）不放在行首；strict 只加嚴禁則，不改一般 CJK 斷行。 */
.world-overlay,.wfg,.journey-drawer,.world-toast{line-break:strict}
.world-opening-overlay{isolation:isolate;align-items:safe center;background:#160f3d}.opening-world-art{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(180deg,#160f3d52,#160f3d40 45%,#100a316b),url('/images/ui/world-explorer-opening-bg.webp');background-position:center;background-size:cover;opacity:.82}
/* Optional opening film (off by default): absolutely layered over the static WebP, transparent until it really plays, so a skip or failure shows the same image with no layout shift. */
.opening-world-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;pointer-events:none}.opening-world-art.is-video-playing .opening-world-video{opacity:1}.opening-world-art.is-video-playing:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#160f3d52,#160f3d40 45%,#100a316b)}
.opening-card,.arrival-card{width:min(720px,100%);border:1px solid #ffffff2b;border-radius:26px;background:linear-gradient(145deg,#fff9eb 0%,#fff 70%);color:#211b43;padding:clamp(22px,5vw,42px);box-shadow:0 28px 90px #08051d70;position:relative;overflow:hidden}
.opening-card:before{content:"";position:absolute;right:-60px;top:-100px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,#ffd23f99,transparent 68%);pointer-events:none}
.opening-brand{display:flex;gap:13px;align-items:center;color:#160f3d;font-weight:1000;font-size:18px;position:relative}.plane-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#ffd23f;border:3px solid #160f3d;transform:rotate(-9deg)}.plane-mark svg{width:28px;height:28px;fill:#fff;stroke:#160f3d;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}.opening-brand small{display:block;font-size:10px;letter-spacing:.16em;color:#776c98;font-weight:800}
.airport-board{margin:30px 0 24px;padding:18px 20px;min-height:88px;border-radius:17px;background:linear-gradient(100deg,#191540,#25215b);color:#e9e6ff;display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;box-shadow:inset 0 0 30px #08091c88}.airport-board span{font-size:12px;letter-spacing:.08em}.airport-board b{font-size:17px;color:#ffd23f}.airport-board .board-line{grid-column:1/-1;color:#a6dfff;font-weight:800;letter-spacing:.16em}.eyebrow{margin:0 0 7px;color:#6e5fc3;font-size:13px;font-weight:900;letter-spacing:.1em}.opening-card h1{font-size:clamp(28px,5vw,43px);line-height:1.2;color:#160f3d;margin:0 0 12px}.opening-copy{font-size:17px;line-height:1.6;color:#4e4860;max-width:55ch}.film-note{margin:18px 0 0;padding:10px 13px;border-left:4px solid #ffd23f;background:#fff8dc;color:#665d42;border-radius:0 9px 9px 0;font-size:13px}.opening-actions{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:24px}.primary-action,.secondary-action,.close-action,.arrival-language button{font:inherit;cursor:pointer}.primary-action{border:3px solid #160f3d;background:#ffd23f;color:#160f3d;font-weight:1000;font-size:17px;border-radius:15px;padding:13px 18px;min-height:52px;box-shadow:0 5px #160f3d;transition:transform .12s,box-shadow .12s}.primary-action:hover{transform:translateY(-2px)}.primary-action:active{transform:translateY(3px);box-shadow:0 1px #160f3d}.secondary-action{padding:12px 8px;color:#3c2c96;font-weight:800}.opening-meta{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:27px;padding-top:16px;border-top:1px solid #e9e3d8;font-size:12px;color:#706b7b}.opening-meta a{color:#5140a0;font-weight:800}
.arrival-card{width:min(680px,100%);max-height:min(90dvh,900px);overflow:auto;padding:clamp(20px,4vw,34px)}.arrival-top{display:flex;justify-content:space-between;align-items:center}.arrival-stamp{border-radius:99px;background:#eeeaff;color:#4c369d;padding:5px 11px;font-size:11px;font-weight:1000;letter-spacing:.1em}.close-action{width:42px;height:42px;border:1px solid #ded7ee;border-radius:50%;background:#fff;color:#3a315b;font-size:27px;line-height:1}.arrival-card h2{font-size:clamp(26px,4vw,36px);color:#160f3d;margin:0 0 4px}.scene-label{margin:0 0 13px;color:#7a7387;font-weight:800}.arrival-language{display:flex;gap:7px;margin:14px 0}.arrival-language button{border:1px solid #ded8eb;border-radius:99px;background:#fff;color:#342a5b;padding:8px 13px;min-height:40px;font-weight:800}.arrival-language button[aria-pressed=true]{background:#160f3d;color:#fff;border-color:#160f3d}.arrival-question{font-size:19px;line-height:1.6;font-weight:900;color:#272044;margin:12px 0 18px}.arrival-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer-option{min-height:54px;text-align:left;padding:12px 14px;border:2px solid #e3deed;border-radius:14px;background:white;color:#2d2649;font:inherit;font-weight:800;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}.answer-option:hover:not(:disabled){transform:translateY(-2px);border-color:#7b6bc4}.answer-option:disabled{cursor:not-allowed;opacity:.5}.answer-option.has-image{display:grid;grid-template-columns:minmax(72px,104px) 1fr;align-items:center;gap:12px;padding:8px;text-align:left}.answer-option.has-image img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;background:#eee}.arrival-scene-views{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}.arrival-scene-views button{min-height:40px;padding:7px 12px;border:1px solid #ded8eb;border-radius:10px;background:#fff;color:#342a5b;font:inherit;font-weight:800;cursor:pointer}.arrival-scene-views button[aria-pressed=true]{background:#160f3d;color:#fff}.arrival-scene-art{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:14px;margin:0 0 12px}.arrival-options:has(.has-image){grid-template-columns:1fr 1fr}.answer-option.is-correct{border-color:#0b9873;background:#e8fff7}.answer-option.is-wrong{border-color:#dc5379;background:#fff0f3}.arrival-feedback{min-height:25px;margin:12px 0;color:#625a73;font-weight:700}.arrival-feedback.good{color:#087a5d}.arrival-feedback.bad{color:#b3335c}.arrival-complete{padding:16px;border-radius:15px;background:#f1eeff;color:#2e2554;font-weight:800;line-height:1.6}.arrival-complete button{margin-top:12px}.question-sources{margin:10px 0;color:#382b73}.question-sources summary{cursor:pointer}.question-sources ul{margin:8px 0;padding-left:20px}.question-sources a{color:#342a8b;overflow-wrap:anywhere}.world-toast{position:fixed;z-index:11000;left:50%;bottom:24px;transform:translateX(-50%);max-width:calc(100% - 24px);padding:12px 16px;border-radius:13px;background:#fff;color:#211b43;border:2px solid #160f3d;box-shadow:0 6px #160f3d;font-weight:800;text-align:center}.world-toast[hidden]{display:none}.keyboard-focus:focus-visible,.world-overlay button:focus-visible,.world-overlay a:focus-visible{outline:3px solid #18a986;outline-offset:3px}
/* 短橫向開場固定主要 CTA 在可視安全區，避免內容較長時「開始」落在可捲動區外；卡片保留底部空間讓 CTA 不遮住文字。 */
@media (orientation:landscape) and (max-height:600px){#world-opening .opening-card{padding-bottom:90px}#world-opening .opening-actions{position:fixed;z-index:10002;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);box-sizing:border-box;width:min(760px,calc(100vw - 24px));justify-content:center;margin:0;padding:8px 12px;border:1px solid #ffffffc9;border-radius:18px;background:#fff9edeb;box-shadow:0 10px 28px #08051d70;transform:translateX(-50%)}}
@media(max-width:540px){.arrival-options:has(.has-image){grid-template-columns:1fr 1fr}.answer-option.has-image{grid-template-columns:68px 1fr;gap:8px;font-size:14px}.arrival-scene-art{max-height:160px}.airport-board{margin:20px 0 18px;padding:15px}.opening-copy{font-size:15px}.arrival-options{grid-template-columns:1fr}.arrival-card{max-height:94dvh}.opening-meta{gap:8px 13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.arrival-scene-art{display:block;width:100%;max-height:300px;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin:12px 0;border:1px solid #d9d2c8}.arrival-scene-views{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}.arrival-scene-views button{font:inherit;font-weight:800;color:#342a5b;background:#fff;border:1px solid #ded8eb;border-radius:999px;padding:8px 14px;min-height:42px;cursor:pointer}.arrival-scene-views button[aria-pressed=true]{background:#160f3d;color:#fff;border-color:#160f3d}.answer-option.has-image{display:grid;grid-template-columns:82px 1fr;align-items:center}.answer-option.has-image img{width:82px;height:82px;object-fit:cover;border-radius:10px}
.arrival-language button{min-height:48px}.arrival-language #question-speak{background:#ffd23f;border:2px solid #160f3d;color:#160f3d;font-weight:1000}.answer-option{min-height:60px}.speech-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.learner-login-panel{position:relative;margin:16px 0 0;border:1px solid #ded8eb;border-radius:14px;background:#ffffffd9;color:#302754}.learner-login-panel summary{min-height:46px;display:flex;align-items:center;padding:10px 14px;font-weight:850;cursor:pointer}.learner-login-panel summary:focus-visible,.learner-login-form :focus-visible,.learner-logout:focus-visible{outline:3px solid #18a986;outline-offset:2px}.learner-login-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:10px;padding:4px 14px 12px}.learner-login-form label{display:grid;gap:5px;font-size:13px;font-weight:800}.learner-login-form input{min-width:0;min-height:44px;padding:9px 11px;border:1px solid #bdb6cd;border-radius:9px;font:inherit}.learner-login-form .primary-action{min-height:44px;padding:9px 16px;font-size:15px}.learner-logout{margin:0 14px 8px;min-height:44px;padding:8px 13px;border:1px solid #ded8eb;border-radius:9px;background:#fff;color:#33265f;font:inherit;font-weight:800;cursor:pointer}.learner-status{margin:0;padding:0 14px 12px;color:#625a73;font-size:13px;line-height:1.5}.learner-status:empty{display:none}
/* 短橫向開場固定主要 CTA 在可視安全區，避免內容較長時「開始」落在可捲動區外；卡片保留底部空間讓 CTA 不遮住文字。 */
@media (orientation:landscape) and (max-height:600px){#world-opening .opening-card{padding-bottom:90px}#world-opening .opening-actions{position:fixed;z-index:10002;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);box-sizing:border-box;width:min(760px,calc(100vw - 24px));justify-content:center;margin:0;padding:8px 12px;border:1px solid #ffffffc9;border-radius:18px;background:#fff9edeb;box-shadow:0 10px 28px #08051d70;transform:translateX(-50%)}}
@media(max-width:540px){.learner-login-form{grid-template-columns:1fr}.learner-login-form .primary-action{width:100%}}

/* 第一階段答對後：「下一題／進入第二階段探索」是主要動作；「返回地球」在下方虛線分隔的次要區塊（白底外框鈕，非 primary-action），
   與主要按鈕至少隔開 20px 以上，避免連點誤按；按下另有確認視窗（app-shell.js confirmStage1Return）。 */
.stage1-leave{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:22px;padding-top:12px;border-top:2px dashed #c9bfe6}
.stage1-leave-note{flex:1 1 180px;margin:0;color:#5b5276;font-size:13px;font-weight:700;line-height:1.45}
.arrival-complete .stage1-leave .stage1-return{flex:0 0 auto;min-height:44px;margin-top:0;padding:8px 14px;border:2px solid #3c2c96;border-radius:12px;background:#fff;color:#3c2c96;font-size:14px}
.journey-stage1-resume-list{margin-top:10px}.journey-resume-item{display:grid;gap:4px;margin-top:8px}

/* Landscape Stage 1 uses the same full-screen scene-and-task composition as Stage 2. */
@media(orientation:landscape) and (min-width:600px){
 #arrival-gate:has(.stage1-layout){position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;box-sizing:border-box;padding:0;place-items:stretch;overflow:hidden;background:#100a31}
 .arrival-card:has(.stage1-layout){box-sizing:border-box;display:flex;flex-direction:column;gap:8px;width:100%;height:100vh;height:100dvh;max-height:none;overflow:hidden;padding:8px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));border:0;border-radius:0;box-shadow:none}
 .arrival-card:has(.stage1-layout)>.arrival-top{flex:0 0 44px;min-height:44px}
 .stage1-layout{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(300px,1fr);gap:14px;flex:1 1 auto;min-height:0}
 /* 左側場景：插圖吃掉剩餘高度但保留最小高度；視角鈕、觀察文字、朗讀／放大鈕放不下時整欄可直向捲動。
    舊版 justify-content:center＋overflow:hidden 在 844×390、1133×744 會把底部說明與按鈕裁掉且無法捲到（上下對稱溢出），不可改回。 */
 .stage1-scene-panel{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;border:1px solid #d9d2c8;border-radius:16px;background:#171334}
 .stage1-task-panel{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 3px 8px;color:#211b43}
.stage1-progress{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;padding:7px 10px;border:1px solid #ded8eb;border-radius:12px;background:#f4f0ff;color:#33265f;font-size:13px;font-weight:850}
.stage1-progress-bar{grid-column:1/-1;display:block;width:100%;height:10px;accent-color:#16a883}
.stage1-progress-count{font-size:12px;color:#625a73}
 .stage1-task-panel #arrival-country,.stage1-task-panel #arrival-title,.stage1-task-panel #arrival-scene,.stage1-task-panel .arrival-language,.stage1-task-panel #arrival-question,.stage1-task-panel #arrival-options,.stage1-task-panel #arrival-feedback,.stage1-task-panel #arrival-complete{flex:0 0 auto;margin:0}
 .stage1-task-panel #arrival-title{font-size:clamp(23px,2.4vw,34px)}
 .stage1-task-panel .arrival-language{flex-wrap:wrap;gap:5px}
 .stage1-task-panel .arrival-language button{min-height:42px;padding:6px 9px}
 .stage1-task-panel #arrival-question{font-size:clamp(18px,1.9vw,24px);line-height:1.48}
 .stage1-task-panel #arrival-options{display:grid;grid-template-columns:1fr;gap:8px;overflow:visible;padding:0 2px 4px}
 .stage1-task-panel #arrival-options[hidden]{display:none!important}
 .stage1-task-panel #arrival-options:has(.has-image){grid-template-columns:1fr 1fr}
 .stage1-task-panel .answer-option{min-height:48px;padding:8px 10px}
 .stage1-task-panel .answer-option.has-image{grid-template-columns:minmax(58px,88px) 1fr;gap:8px}
 .stage1-task-panel .answer-option.has-image img{width:100%;aspect-ratio:1}
 .stage1-scene-panel>.arrival-scene-views{flex:0 0 auto;flex-wrap:nowrap;overflow-x:auto;margin:0;padding:7px}
 .stage1-scene-panel>.arrival-scene-art,.stage1-scene-panel>.scene-exploration,.stage1-scene-panel>.map-focus{flex:1 1 0;min-width:0;min-height:min(150px,42dvh);width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:10px;object-fit:contain}
 .stage1-scene-panel>.scene-exploration .arrival-scene-art,.stage1-scene-panel>.map-focus .arrival-scene-art{width:100%;height:100%;max-height:none;margin:0;object-fit:contain}
 .stage1-scene-panel>.scene-exploration-status{flex:0 0 auto;min-height:0;margin:0;padding:7px 10px}
 .stage1-scene-panel>.scene-exploration-speak,.stage1-scene-panel>.map-zoom-toggle{flex:0 0 auto;align-self:flex-start;min-height:40px;padding:6px 12px}
}
@media(orientation:landscape) and (min-width:600px) and (max-height:600px){
 .arrival-card:has(.stage1-layout){gap:4px;padding-top:4px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
 .arrival-card:has(.stage1-layout)>.arrival-top{flex-basis:36px;min-height:36px}
 .stage1-layout{grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:9px}
 .stage1-task-panel{gap:4px}
 .stage1-task-panel #arrival-title{font-size:20px}
 .stage1-task-panel #arrival-question{font-size:17px;line-height:1.34}
 .stage1-task-panel .arrival-language button{min-height:38px;padding:5px 8px}
 .stage1-scene-panel>.arrival-scene-views button{min-height:36px;padding:4px 8px}
}
@media(orientation:landscape) and (min-width:600px) and (max-width:900px){
 .stage1-layout{grid-template-columns:minmax(0,2.6fr) minmax(230px,1fr)}
 /* 短橫向右欄較窄；含圖選項若仍排兩欄，文字欄會被壓成直排。改成單欄卡片，答案可在右欄捲動閱讀。 */
 .stage1-task-panel #arrival-options:has(.has-image){grid-template-columns:minmax(0,1fr)}
 .stage1-task-panel .answer-option.has-image{grid-template-columns:minmax(58px,72px) minmax(0,1fr);min-width:0;width:100%;box-sizing:border-box}
 .stage1-task-panel .answer-option.has-image>span{min-width:0;overflow-wrap:anywhere;word-break:normal}
}
@media(orientation:landscape) and (min-width:600px){
 #arrival-gate:has(.arrival-story){position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;box-sizing:border-box;padding:0;place-items:stretch;overflow:hidden;background:#100a31}
 .arrival-card:has(.arrival-story){box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;max-height:none;overflow:hidden;padding:8px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));border:0;border-radius:0;box-shadow:none}
 .arrival-card:has(.arrival-story)>.arrival-top{flex:0 0 44px;min-height:44px}
 .arrival-story{position:absolute;inset:52px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));box-sizing:border-box;display:grid;grid-template-columns:minmax(0,2.7fr) minmax(300px,1fr);grid-template-rows:auto auto minmax(48px,auto) auto auto minmax(0,1fr);gap:8px 14px;flex:none;width:auto;height:auto;min-height:0;max-height:none;overflow:auto;margin:0;padding:12px;border-radius:16px}
 .arrival-story>h3{grid-column:1;grid-row:1;margin:0}.arrival-story-language{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;gap:6px;align-self:start}.arrival-story-language button{min-height:40px;padding:5px 12px;border:2px solid #261e54;border-radius:12px;background:#fff;color:#241a52;font:inherit;font-weight:850}.arrival-story-language button[aria-pressed=true]{background:#ffcf3f}
 .arrival-story>strong{grid-column:2;grid-row:2;align-self:end}
 .arrival-story>.arrival-story-line{grid-column:2;grid-row:3;align-self:start;margin:0;min-height:0}
 .arrival-story>.arrival-story-progress{grid-column:2;grid-row:4;margin:0}
 .arrival-story>.arrival-story-actions{grid-column:2;grid-row:5;align-self:start;margin:0}
 .arrival-story>.arrival-story-preview,.arrival-story>.arrival-story-interaction{grid-column:1;grid-row:2/7;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;margin:0}
 .arrival-story-preview{display:grid;place-items:center;overflow:hidden;border-radius:14px;background:#171334}
 .arrival-story-preview img{display:block;width:100%;height:100%;object-fit:contain}
 .arrival-story>.arrival-story-interaction:not([hidden]){display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px}
 .arrival-story-interaction[hidden]{display:none!important}
 .arrival-story-interaction h4{margin:0;color:#241a52}
 .arrival-story-play{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;min-width:0;min-height:0;height:100%;margin:0}
 .arrival-story-play .arrival-story-visual{box-sizing:border-box;width:100%;height:100%;min-height:0;max-height:none;margin:0;padding:8px;aspect-ratio:auto;overflow:hidden}
 .arrival-story-play .arrival-story-art{width:100%;height:100%;object-fit:contain}
 .arrival-story-play .arrival-story-controls{align-content:start;min-height:0;margin:0;overflow:auto}
 .arrival-story-play .arrival-story-nudge{margin:0}
 .arrival-story>button.primary-action{grid-column:2;grid-row:6;justify-self:start;align-self:start}
}
@media(orientation:landscape) and (min-width:600px) and (max-width:900px){
 .arrival-story{grid-template-columns:minmax(0,2.6fr) minmax(230px,1fr)}
}
@media(orientation:landscape) and (min-width:600px) and (max-height:600px){
 .arrival-card:has(.arrival-story)>.arrival-top{flex-basis:36px;min-height:36px}
 .arrival-story{top:44px;bottom:5px;gap:4px 9px;padding:8px}
 .arrival-story h3{font-size:20px}
 .arrival-story-line{font-size:15px;line-height:1.4}
}
/* Use the visual viewport for the transition film, including iPad/iPhone browser chrome changes. */
#travel-interstitial.world-overlay{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;box-sizing:border-box;padding:0;overflow:hidden}
#travel-interstitial .interstitial-card,#travel-interstitial .interstitial-card video{position:absolute;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none}

.arrival-dialogue,.arrival-drop-zone{border:2px solid #9986df;background:#f4f0ff;color:#241a52;border-radius:16px;padding:14px 16px;margin:12px 0;font-weight:800;line-height:1.6}.arrival-dialogue p{margin:6px 0 0}.arrival-drop-zone{grid-column:1/-1;min-height:68px;display:grid;place-items:center;border-style:dashed;text-align:center}.arrival-drop-zone.is-over{background:#fff2c2;border-color:#c38e00}.answer-option[draggable=true]{cursor:grab}.arrival-language #question-speak,.arrival-language #question-pause,.arrival-language #question-stop{min-height:48px}/* 短橫向開場固定主要 CTA 在可視安全區，避免內容較長時「開始」落在可捲動區外；卡片保留底部空間讓 CTA 不遮住文字。 */
@media (orientation:landscape) and (max-height:600px){#world-opening .opening-card{padding-bottom:90px}#world-opening .opening-actions{position:fixed;z-index:10002;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);box-sizing:border-box;width:min(760px,calc(100vw - 24px));justify-content:center;margin:0;padding:8px 12px;border:1px solid #ffffffc9;border-radius:18px;background:#fff9edeb;box-shadow:0 10px 28px #08051d70;transform:translateX(-50%)}}
@media(max-width:540px){.arrival-language{flex-wrap:wrap}.arrival-language button{min-height:48px}}
.scene-exploration{position:relative;isolation:isolate;margin:12px 0}.scene-exploration .arrival-scene-art{margin:0;max-height:300px}.scene-exploration-point{position:absolute;z-index:2;display:grid;place-items:center;width:50px;height:50px;min-width:48px;min-height:48px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:#ffd23fe8;color:#160f3d;font:inherit;font-weight:1000;box-shadow:0 0 0 4px #160f3d9c,0 0 20px #ffe781;cursor:pointer;touch-action:manipulation}.scene-exploration-point:before,.scene-exploration-point:after{content:'';position:absolute;inset:-8px;border:2px solid #ffe781b8;border-radius:50%;animation:scene-pulse 2.2s ease-out infinite}.scene-exploration-point:after{animation-delay:1.1s}.scene-exploration-point[aria-pressed=true]{background:#4ae0bd;color:#102f40}.scene-exploration-point:focus-visible,.scene-exploration-speak:focus-visible{outline:3px solid #087a5d;outline-offset:4px}.scene-exploration-status{min-height:48px;padding:10px 13px;margin:0 0 8px;border-left:4px solid #ffd23f;border-radius:9px;background:#f4f0ff;color:#241a52;font-weight:750;line-height:1.55}.scene-exploration-speak{min-height:48px;padding:9px 14px;border:1px solid #ded8eb;border-radius:12px;background:#fff;color:#342a5b;font:inherit;font-weight:800;cursor:pointer}@keyframes scene-pulse{0%{transform:scale(.72);opacity:.92}100%{transform:scale(1.45);opacity:0}}/* 短橫向開場固定主要 CTA 在可視安全區，避免內容較長時「開始」落在可捲動區外；卡片保留底部空間讓 CTA 不遮住文字。 */
@media (orientation:landscape) and (max-height:600px){#world-opening .opening-card{padding-bottom:90px}#world-opening .opening-actions{position:fixed;z-index:10002;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);box-sizing:border-box;width:min(760px,calc(100vw - 24px));justify-content:center;margin:0;padding:8px 12px;border:1px solid #ffffffc9;border-radius:18px;background:#fff9edeb;box-shadow:0 10px 28px #08051d70;transform:translateX(-50%)}}
@media(max-width:540px){.scene-exploration .arrival-scene-art{max-height:220px}.scene-exploration-point{width:48px;height:48px}}@media(prefers-reduced-motion:reduce){.scene-exploration-point:before,.scene-exploration-point:after{animation:none;opacity:0}}
.gallery-mission{min-height:48px;padding:10px 13px;margin:12px 0;border-left:4px solid #ffd23f;border-radius:9px;background:#f4f0ff;color:#241a52;font-weight:800;line-height:1.55}.map-focus{position:relative;overflow:hidden;margin:12px 0;border:1px solid #d9d2c8;border-radius:14px}.map-focus .arrival-scene-art{margin:0;transition:transform .22s ease}.map-focus.is-zoomed .arrival-scene-art{transform:scale(1.3)}.map-zoom-toggle{min-height:48px;padding:9px 15px;border:1px solid #ded8eb;border-radius:12px;background:#fff;color:#342a5b;font:inherit;font-weight:850;cursor:pointer}.map-zoom-toggle[aria-pressed=true]{background:#160f3d;color:#fff}.comparison-board{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;padding:12px;border:1px solid #ded8eb;border-radius:14px;background:#f4f0ff}.comparison-board div{display:grid;place-items:center;min-height:52px;border:1px solid #cfc5ef;border-radius:10px;background:#fff;color:#241a52;font-weight:900;text-align:center}.comparison-board p{grid-column:1/-1;margin:2px 0 0;color:#52496d;font-weight:750}.comparison-board .comparison-record{margin:0 0 2px;padding:8px 10px;border:1px dashed #a99be0;border-radius:10px;background:#fff;color:#241a52;font-weight:900;text-align:center;line-height:1.45}.comparison-board .comparison-card{gap:7px;padding:8px 6px}.comparison-board .comparison-card[data-state=done]{border-color:#3d9a6a;background:#effaf3}.comparison-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.comparison-board .comparison-tag{min-width:64px;min-height:44px;padding:6px 12px;border:1px solid #cfc5ef;border-radius:10px;background:#f8f6ff;color:#241a52;font:inherit;font-weight:850;cursor:pointer}.comparison-board .comparison-tag[aria-pressed=true]{border-color:#160f3d;background:#160f3d;color:#fff}.comparison-board .comparison-tag.is-wrong{border-color:#c4553d;background:#fff1ef;color:#8a2c19}.comparison-board .comparison-tag:disabled{cursor:default}.comparison-board .comparison-tag:focus-visible{outline:3px solid #087a5d;outline-offset:2px}.comparison-board .comparison-status{min-height:1.4em;color:#241a52}.mission-interaction:focus-visible{outline:3px solid #087a5d;outline-offset:3px}/* 短橫向開場固定主要 CTA 在可視安全區，避免內容較長時「開始」落在可捲動區外；卡片保留底部空間讓 CTA 不遮住文字。 */
@media (orientation:landscape) and (max-height:600px){#world-opening .opening-card{padding-bottom:90px}#world-opening .opening-actions{position:fixed;z-index:10002;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);box-sizing:border-box;width:min(760px,calc(100vw - 24px));justify-content:center;margin:0;padding:8px 12px;border:1px solid #ffffffc9;border-radius:18px;background:#fff9edeb;box-shadow:0 10px 28px #08051d70;transform:translateX(-50%)}}
@media(max-width:540px){.comparison-board{padding:9px;gap:7px}.comparison-board div{font-size:14px;min-height:48px}}@media(prefers-reduced-motion:reduce){.map-focus .arrival-scene-art{transition:none}}
.journey-log{padding:14px;margin:14px 0;border:2px solid #302170;border-radius:16px;background:#fff;color:#211b43;box-shadow:0 5px 0 #160f3d}.journey-log h3{margin:0 0 8px;color:#160f3d;font-size:18px}.journey-country{margin:4px 0;font-weight:900}.journey-log progress{display:block;width:100%;height:16px;accent-color:#16a883}.journey-summary,.journey-current{margin:7px 0;font-weight:800}.journey-hint,.journey-history{margin-top:10px;padding:9px 11px;border-radius:12px;background:#f2efff}.journey-hint summary,.journey-history summary{min-height:36px;display:flex;align-items:center;cursor:pointer;font-weight:900}.journey-hint p{margin:5px 0}.journey-log ul{margin:5px 0;padding-left:18px}.journey-story-state{margin:10px 0 0;font-size:13px;color:#625a73}.journey-action,.journey-close,.journey-toggle{min-height:48px;border:2px solid #160f3d;border-radius:12px;background:#ffd23f;color:#160f3d;padding:9px 14px;font:inherit;font-weight:900;cursor:pointer}.journey-toggle{position:fixed;z-index:9500;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);box-shadow:0 4px 0 #160f3d}.journey-drawer{position:fixed;z-index:9600;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);width:min(390px,calc(100vw - 20px));max-height:min(48dvh,440px);overflow:auto;padding:10px;border:3px solid #160f3d;border-radius:18px;background:#fbf6ea;box-shadow:0 9px 32px #120d3877}.journey-drawer[hidden],.journey-toggle[hidden],.journey-backdrop[hidden]{display:none!important}.journey-backdrop{position:fixed;inset:0;z-index:9550;background:#100a3140;-webkit-tap-highlight-color:transparent}.journey-close{float:right;min-height:42px;background:#fff;margin:2px 2px 0 8px}.journey-drawer .journey-log{clear:both;margin:6px 0 0}.journey-log button:focus-visible,.journey-toggle:focus-visible,.journey-close:focus-visible{outline:3px solid #18a986;outline-offset:3px}.wfg-side .journey-log{font-family:system-ui,"Noto Sans TC","Microsoft JhengHei",sans-serif;line-height:1.5}

/* 第二階段轉場影片（2026-10-11 起；舊稱「抵達影片」，class 名稱沿用 arrival-film-*）：只在第一階段完成後按「進入第二階段探索」才出現。
   電影式全螢幕（0.89.0 版面）。影片元素鋪滿整個 viewport，object-fit:cover＋置中：16:9 畫面完整，其他比例只裁邊、主畫面留在中央；
   直向窄螢幕改 contain，避免只剩中間一小條。標題、說明文字、狀態與按鈕是左下角低干擾 overlay，底部漸層提升可讀性；
   「跳過」固定在右下角，與 overlay 之間保留 --film-skip-room 不重疊。所有文字與按鈕都退到安全區內（瀏海、Home 指示條）；
   --film-safe-* 預設取 env(safe-area-inset-*)，瀏覽器測試會改寫這些變數模擬有瀏海的手機。
   data-film 由 app-shell.js 設定：loading／playing／blocked／paused／stalled／error／ended。 */
#travel-interstitial{--film-safe-top:env(safe-area-inset-top,0px);--film-safe-right:env(safe-area-inset-right,0px);--film-safe-bottom:env(safe-area-inset-bottom,0px);--film-safe-left:env(safe-area-inset-left,0px);--film-gap:clamp(10px,2.2vmin,22px);--film-skip-room:calc(var(--film-safe-right) + var(--film-gap) + 104px);display:block;padding:0;overflow:hidden;background:#05030f;transition:opacity .26s ease}
#travel-interstitial.is-leaving{opacity:0}
.interstitial-card{position:absolute;inset:0;overflow:hidden;outline:none}
.interstitial-card video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;margin:0;background:#05030f}
.interstitial-card video[hidden]{display:none}
.arrival-film-shade{position:absolute;inset:auto 0 0;height:min(70%,560px);background:linear-gradient(180deg,#05030f00 0%,#05030f8f 40%,#05030fe8 100%);pointer-events:none;transition:height .4s ease,background .4s ease}
#travel-interstitial[data-film=ended] .arrival-film-shade{height:100%;background:linear-gradient(180deg,#05030f4d 0%,#05030fb3 50%,#05030fed 100%)}
.arrival-film-overlay{position:absolute;left:0;right:var(--film-skip-room);bottom:0;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;max-width:780px;max-height:calc(100% - var(--film-safe-top) - var(--film-gap));overflow:auto;padding:var(--film-gap) var(--film-gap) calc(var(--film-safe-bottom) + var(--film-gap)) calc(var(--film-safe-left) + var(--film-gap));color:#fff;text-shadow:0 1px 3px #000c}
.arrival-film-overlay>*{margin:0}
.arrival-film-overlay .eyebrow{color:#ffd23f;font-size:12px;letter-spacing:.12em}
.arrival-film-overlay h2{color:#fff;font-size:clamp(20px,3vw,32px);line-height:1.22}
.arrival-film-overlay .arrival-scene-copy{min-height:42px;max-height:min(30dvh,10em);overflow:auto;overscroll-behavior:contain;color:#f4f1ff;font-size:clamp(14px,1.6vw,18px);line-height:1.55;font-weight:600}
.arrival-film-overlay .arrival-feedback{min-height:0;color:#e4deff;font-size:clamp(13px,1.35vw,15px);line-height:1.45}
.arrival-film-overlay .opening-actions{gap:10px;margin-top:4px;justify-content:flex-start;text-shadow:none}
.arrival-film-overlay .primary-action{min-height:48px;padding:9px 16px;font-size:clamp(15px,1.5vw,17px)}
.arrival-film-overlay .primary-action:disabled{background:#f1edff;color:#3b345a;cursor:not-allowed;transform:none}
/* 播放中只留兩行說明文字與狀態；尚未能按的「影片播放中…」鈕先收起，避免與「跳過」搶注意力。播完後才展開全文與「進入第二階段」。 */
#travel-interstitial:is([data-film=loading],[data-film=playing],[data-film=blocked],[data-film=paused]) .arrival-scene-copy{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#travel-interstitial:is([data-film=loading],[data-film=playing],[data-film=blocked],[data-film=paused]) #interstitial-continue:disabled{display:none}
.arrival-film-skip{position:absolute;z-index:3;right:calc(var(--film-safe-right) + var(--film-gap));bottom:calc(var(--film-safe-bottom) + var(--film-gap));box-sizing:border-box;min-width:88px;min-height:52px;padding:10px 18px;border:2px solid #ffffffd9;border-radius:999px;background:#05030fb8;color:#fff;font:inherit;font-size:17px;font-weight:900;letter-spacing:.08em;line-height:1.2;cursor:pointer;touch-action:manipulation;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.arrival-film-skip:hover{background:#160f3dee}
.arrival-film-skip[hidden]{display:none}
@media(max-height:500px){
 .arrival-film-overlay{gap:4px}
 .arrival-film-overlay h2{font-size:20px}
 .arrival-film-overlay .arrival-scene-copy{min-height:42px;max-height:26dvh;font-size:14px;line-height:1.5}
}
@media(max-aspect-ratio:3/4){
 .interstitial-card video{object-fit:contain}
}

.journey-event-log{margin-top:10px;padding:9px 11px;border-radius:12px;background:#fff7dc;border:1px solid #e6d38f}.journey-event-log summary{min-height:40px;display:flex;align-items:center;cursor:pointer;font-weight:900;color:#33265f}.journey-event-log ol{margin:5px 0;padding-left:24px}.journey-event-log li{padding:3px 0;line-height:1.45;overflow-wrap:anywhere}.journey-event-log time{font-variant-numeric:tabular-nums;color:#6c6382;font-size:12px;font-weight:800}

.arrival-story{margin:12px 0;padding:18px;border:2px solid #9d8ae3;border-radius:20px;background:linear-gradient(145deg,#f5f0ff,#fff8df);color:#241a52}.arrival-story h3{font-size:clamp(22px,4vw,30px);margin:0 0 9px}.arrival-story-line{min-height:3.4em;font-size:18px;line-height:1.65;font-weight:750}.arrival-story-progress{font-size:14px;font-weight:850;color:#675895}.arrival-story-actions,.arrival-story-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.arrival-story button{min-height:48px;font:inherit;font-weight:850}.arrival-story-interaction{margin-top:14px}.arrival-story-visual{min-height:112px;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin:10px 0;padding:14px;border-radius:16px;background:radial-gradient(ellipse at 50% 100%,#7ed8df 0 28%,#d9f3ef 29% 45%,#f8f4ff 46%);font-size:19px;font-weight:900}.arrival-story-visual.egg:before{content:"";width:76px;height:96px;border-radius:54% 54% 46% 46%;background:radial-gradient(ellipse at 38% 30%,#655e55,#29263a 68%);box-shadow:inset -10px -8px 15px #120f1b,0 8px 16px #2224;transition:transform .3s}.arrival-story-visual.egg.revealed:before{background:radial-gradient(ellipse at 52% 64%,#ffce39 0 18%,#fff7d8 19% 31%,transparent 33%),linear-gradient(135deg,#817e76,#373147);transform:rotate(12deg) scale(.96)}.wafer-layer,.dessert-layer,.cake-layer{padding:8px 12px;border-radius:8px;background:#d79836;color:#fff;box-shadow:0 3px 0 #8b4b22}.wafer-layer:nth-child(2){background:#a7482b}.dessert-layer{display:block;width:90%;text-align:center;background:#b86f41}.dessert-layer:nth-child(2){background:#ffe9a1;color:#514222}.dessert-layer:nth-child(3){background:#513042}.cake-layer{background:#6d3b32}.cake-layer:nth-child(2){background:#fff2ca;color:#594832}.arrival-story-visual.glass-shape{background:radial-gradient(circle,#9affdb,#53a6b7 40%,#293a68);color:white;text-shadow:0 2px 5px #123}.arrival-story-fact{padding:10px 12px;border-left:4px solid #ffc83d;background:#fff9e6;border-radius:0 10px 10px 0;line-height:1.55}.arrival-story-result{width:100%;font-size:18px;font-weight:900;color:#126451}.arrival-story [hidden]{display:none!important}.arrival-story-choice{border:2px solid #261e54;border-radius:12px;padding:9px 14px;background:#fff;color:#241a52;cursor:pointer}.arrival-story-choice:hover,.arrival-story-choice:focus-visible{background:#fff0ba;outline:3px solid #25a88a;outline-offset:2px}
.arrival-story-visual:has(.arrival-story-art){position:relative;display:block;padding:0;overflow:hidden;aspect-ratio:16/9;background:#171334}.arrival-story-art{display:block;width:100%;height:100%;object-fit:cover}.arrival-story-visual.egg:before{display:none}/* 圖上熱點＝透明中心的小圓環＋角落編號，不再用文字膠囊蓋住插圖（日本黑蛋回饋）；文字控制在圖下 .arrival-story-controls。
   脈動改由偽元素的 transform／opacity 執行，不再每幀重繪 box-shadow。 */
.arrival-hotspot{position:absolute;left:32%;top:69%;display:grid;place-items:center;width:48px;height:48px;min-width:44px;min-height:44px;padding:0;border:3px solid #fff3ae!important;border-radius:50%!important;background:transparent!important;color:#fff!important;box-shadow:0 0 0 3px #241a52cc,0 0 14px #ffd23f!important;cursor:pointer;touch-action:manipulation}.arrival-hotspot:before{content:"";position:absolute;inset:-8px;border:2px solid #ffe781b8;border-radius:50%;pointer-events:none;animation:scene-pulse 2.2s ease-out infinite}.arrival-hotspot:disabled{border-color:#4ae0bd!important;opacity:.94}.arrival-hotspot:disabled:before{animation:none;opacity:0}
.arrival-hotspot-num,.arrival-story-choice[data-step]:before{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#241a52;color:#fff;font-size:12px;font-weight:1000;line-height:1}.arrival-hotspot-num{position:absolute;left:-11px;top:-11px;border:2px solid #fff;pointer-events:none}.arrival-story-choice[data-step]:before{content:attr(data-step);margin-right:6px;vertical-align:1px}
/* 黑蛋上的定位點只留下細圈；編號與可讀文字留在圖下，避免遮住蛋殼與蛋黃。 */
.arrival-story-play.egg .arrival-hotspot-num{display:none}
@media(prefers-reduced-motion:reduce){.arrival-hotspot:before{animation:none!important}}
.arrival-story-nudge{margin:8px 0;padding:8px 11px;border-radius:10px;background:#fff2c2;color:#483606;font-weight:800;line-height:1.45}.arrival-hotspot:focus-visible{outline:4px solid #147c69;outline-offset:3px}
.stage2-game{display:grid;gap:14px;color:#241a52}.stage2-head{padding:14px;border-radius:16px;background:linear-gradient(135deg,#f4f0ff,#fff8df)}.stage2-eyebrow{margin:0;color:#655391;font-size:13px;font-weight:900}.stage2-head h2{margin:4px 0;color:#160f3d}.stage2-npc,.stage2-instruction{line-height:1.6}.stage2-npc{margin:5px 0 0}.stage2-scene{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:14px}.stage2-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.38fr);gap:12px;align-items:start}.stage2-main,.stage2-status{min-width:0;padding:13px;border:1px solid #ded8eb;border-radius:15px;background:#fff}.stage2-status{position:sticky;top:8px;background:#f7f4ff}.stage2-hotspots,.stage2-activity{margin-top:12px;padding:12px;border-radius:13px;background:#f7f4ff}.stage2-hotspots h3,.stage2-activity h3,.stage2-status h3{margin:0 0 8px;color:#160f3d}.stage2-readout{min-height:48px;padding:9px 11px;border-left:4px solid #ffd23f;background:#fff;border-radius:8px;line-height:1.5}.stage2-hotspot,.stage2-button,.stage2-choice,.stage2-reset{min-height:48px;margin:4px;padding:9px 12px;border:2px solid #302170;border-radius:12px;background:#fff;color:#211b43;font:inherit;font-weight:850;cursor:pointer;touch-action:manipulation}.stage2-hotspot{background:#ffd23f}.stage2-hotspot:focus-visible,.stage2-button:focus-visible,.stage2-choice:focus-visible,.stage2-reset:focus-visible{outline:3px solid #18a986;outline-offset:2px}.stage2-choice[aria-pressed=true]{background:#d9fff3;border-color:#087a5d}.stage2-choice:disabled,.stage2-sequence-undo:disabled{opacity:.58;cursor:not-allowed;filter:saturate(.65)}.stage2-activity fieldset{margin:9px 0;padding:8px;border:1px solid #d9d2e6;border-radius:10px}.stage2-activity legend{padding:0 5px;font-weight:850}.stage2-order,.stage2-choices{display:flex;flex-wrap:wrap;gap:5px}.stage2-status progress{display:block;width:100%;height:16px;accent-color:#16a883}.stage2-count{font-weight:900}.stage2-status ol{padding-left:20px;line-height:1.7}.stage2-status details{padding:8px;border-radius:10px;background:#fff}.stage2-status summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:900}.stage2-status details p{font-weight:600;line-height:1.55}.stage2-save-status{font-size:14px;line-height:1.5;color:#514968}.stage2-feedback{min-height:32px;padding:8px 10px;border-radius:9px;background:#fff2c2;line-height:1.5}.stage2-feedback.is-done{background:#e4fff5;color:#075b48;font-weight:900}.stage2-reset{margin-top:9px;background:#fff}
@media(max-width:640px){.stage2-layout{grid-template-columns:1fr}.stage2-status{position:static;order:-1}.stage2-game{font-size:15px}.stage2-hotspot,.stage2-choice,.stage2-reset{max-width:100%;font-size:14px}.stage2-activity fieldset{display:flex;flex-wrap:wrap;gap:4px}.stage2-activity legend{flex-basis:100%}}
.stage2-scene-frame{position:relative;isolation:isolate}.stage2-scene{margin:0}.stage2-scene-pins{position:absolute;inset:0}.stage2-scene-pin{position:absolute;z-index:2;display:grid;place-items:center;width:clamp(44px,5vw,56px);height:clamp(44px,5vw,56px);min-width:44px;min-height:44px;margin:0;padding:0;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:#ffd23ff2;color:#160f3d;font:inherit;font-weight:1000;box-shadow:0 0 0 4px #160f3da8,0 0 18px #ffe781;cursor:pointer;touch-action:manipulation}.stage2-scene-pin[aria-pressed=true]{background:#43e1b7}.stage2-scene-pin:focus-visible{outline:3px solid #087a5d;outline-offset:4px}
/* The shared arrival card gives its buttons top margin; absolute scene pins must stay on their authored image coordinates. */
.arrival-complete .stage2-scene-pin{margin:0}

.offline-prep{margin:16px 0 0;padding:0 14px;border:1px solid #d7d0e6;border-radius:14px;background:#fff;color:#342b55}.offline-prep>summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:900}.offline-prep p{font-size:13px;line-height:1.55}.offline-prep fieldset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 10px;margin:12px 0;padding:10px;border:1px solid #e4deef;border-radius:10px}.offline-prep legend{padding:0 5px;font-size:13px;font-weight:850}.offline-prep fieldset label{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:750;cursor:pointer}.offline-prep input[type=checkbox]{width:20px;height:20px;accent-color:#4e3bb4}.offline-prep-button{min-height:48px;padding:9px 15px;border:2px solid #160f3d;border-radius:11px;background:#ffd23f;color:#160f3d;font:inherit;font-weight:900;cursor:pointer}.offline-prep-button:disabled{opacity:.55;cursor:not-allowed}.offline-prep progress{display:block;width:100%;height:16px;margin-top:12px;accent-color:#16a883}.offline-prep [role=status]{min-height:1.5em;color:#554d68}.offline-prep-errors ul{max-height:160px;overflow:auto;font-size:12px;overflow-wrap:anywhere}.offline-prep :focus-visible{outline:3px solid #16a883;outline-offset:3px}
/* 短橫向開場固定主要 CTA 在可視安全區，避免內容較長時「開始」落在可捲動區外；卡片保留底部空間讓 CTA 不遮住文字。 */
@media (orientation:landscape) and (max-height:600px){#world-opening .opening-card{padding-bottom:90px}#world-opening .opening-actions{position:fixed;z-index:10002;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);box-sizing:border-box;width:min(760px,calc(100vw - 24px));justify-content:center;margin:0;padding:8px 12px;border:1px solid #ffffffc9;border-radius:18px;background:#fff9edeb;box-shadow:0 10px 28px #08051d70;transform:translateX(-50%)}}
@media(max-width:540px){.offline-prep fieldset{grid-template-columns:1fr 1fr}.offline-prep-button{width:100%}}
.offline-prep progress[hidden],.offline-prep details[hidden]{display:none}

.stage2-sequence-label{margin:8px 0;font-weight:850;line-height:1.5}
.stage2-sequence-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0;padding:0;list-style:none}
.stage2-sequence-slot{display:flex;align-items:center;min-width:0;min-height:48px;padding:7px;border:1px dashed #8c7db1;border-radius:10px;background:#fff;color:#51476f;font-size:13px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.stage2-sequence-undo:disabled{opacity:.52;cursor:not-allowed}
.stage2-system-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;margin:9px 0;padding:0;list-style:none}.stage2-system-slot{display:flex;align-items:center;min-height:50px;padding:9px 11px;border:1px dashed #9387b2;border-radius:11px;background:#fff;color:#554b70;font-weight:800;line-height:1.4}.stage2-system-slot.is-added{border-style:solid;border-color:#087a5d;background:#e4fff5;color:#075b48}

.stage2-source-title{margin:10px 0 3px;font-size:14px;font-weight:900;color:#51476f}.stage2-fact-sources{margin:0;padding-left:20px}.stage2-fact-source{display:block;min-height:48px;padding:9px 2px;color:#342a8b;font-size:14px;line-height:1.55;overflow-wrap:anywhere}.stage2-fact-source:focus-visible{outline:3px solid #18a986;outline-offset:2px;border-radius:5px}
/* Six-country journey finale. The accent colour only decorates borders/stamps; text keeps dark-on-light contrast. */
.stage2-finale-slot:empty{display:none}.stage2-finale-slot{margin-top:9px}.stage2-finale-note{margin:0;padding:8px 10px;border-radius:9px;background:#f1eeff;color:#3a2f66;font-weight:750;line-height:1.55}.stage2-finale-open{background:#ffd23f}
.finale-overlay{z-index:10500;--finale-accent:#2f7a45}.finale-card{box-sizing:border-box;position:relative;width:min(640px,100%);max-height:min(92dvh,900px);overflow:auto;padding:clamp(20px,5vw,36px);border:1px solid #ffffff2b;border-top:8px solid var(--finale-accent);border-radius:26px;background:linear-gradient(180deg,#fff9ebf2,#fffffff7 55%),url('/images/ui/world-explorer-opening-bg.webp') center/cover;color:#211b43;box-shadow:0 28px 90px #08051d70;text-align:center;overflow-wrap:anywhere}
.finale-close{position:absolute;top:12px;right:12px;z-index:3;width:48px;height:48px}
.finale-scroll-hint{margin:0 58px 8px 0;padding:7px 10px;border-radius:9px;background:#f1eeff;color:#302170;font-size:12px;font-weight:850;line-height:1.45;text-align:left}
/* Ending scene = last country's own Stage 2 WebP (mission.sceneAsset). The shade darkens only the lower edge
   behind the opaque "last stop" pill; all body text sits below the picture on the light card. Height is capped
   so phone portrait/landscape still show the message without a long scroll. .is-fallback keeps the same box
   with the accent gradient when the image is missing or fails offline. */
.finale-scene{position:relative;width:100%;aspect-ratio:16/9;max-height:min(36dvh,300px);margin:4px 0 12px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,var(--finale-accent),#302170)}
.finale-scene-img{display:block;width:100%;height:100%;object-fit:cover;animation:finaleScene 16s ease-in-out infinite alternate}
.finale-film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#100b2a}.finale-scene.has-film .finale-scene-img,.finale-scene.has-film .finale-scene-shade,.finale-scene.has-film .finale-plane,.finale-scene.has-film .finale-stop{display:none}.finale-film-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:-4px 0 10px}.finale-film-actions button{min-height:44px}
/* 0.90.0: while the shared return-to-Taiwan film plays, let it fill the viewport;
   keep only safe-area close/skip controls above it, then restore the finale card. */
.finale-overlay.is-film-playing{place-items:stretch;padding:0;overflow:hidden;background:#100b2a}
.finale-overlay.is-film-playing .finale-card{width:100%;height:100%;max-height:none;overflow:visible;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.finale-overlay.is-film-playing .finale-card>:not(.finale-scene):not(.finale-film-actions):not(.finale-close){display:none!important}
.finale-overlay.is-film-playing .finale-scene{position:fixed;inset:0;z-index:1;width:100vw;height:100vh;height:100dvh;max-height:none;aspect-ratio:auto;margin:0;border-radius:0;background:#100b2a}
.finale-overlay.is-film-playing .finale-film{object-fit:cover}
.finale-overlay.is-film-playing .finale-film-actions{position:fixed;z-index:3;right:calc(env(safe-area-inset-right,0px) + 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);margin:0;padding:0}
.finale-overlay.is-film-playing .finale-film-play[hidden]{display:none!important}
.finale-overlay.is-film-playing .finale-film-skip{min-width:96px;min-height:52px;border-color:#fff;background:#160f3ddd;color:#fff;box-shadow:0 3px 16px #0009}
.finale-overlay.is-film-playing .finale-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:calc(env(safe-area-inset-right,0px) + 14px)}
@media(orientation:portrait){.finale-overlay.is-film-playing .finale-film{object-fit:contain}}
.finale-scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,#160f3d00 50%,#160f3db3);pointer-events:none}
.finale-scene.is-fallback .finale-scene-shade{background:radial-gradient(circle at 50% 42%,#ffffff40,#ffffff00 60%)}
.finale-plane{position:absolute;top:12px;left:12px;width:52px;height:52px;border-radius:14px;background:#fff;box-shadow:0 0 0 4px var(--finale-accent);animation:finaleGlide 2.8s ease-in-out infinite alternate}
.finale-scene.is-fallback .finale-plane{top:calc(50% - 52px);left:calc(50% - 30px);width:60px;height:60px;border-radius:16px}
.finale-scene .finale-stop{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);margin:0;box-sizing:border-box}
.finale-card .eyebrow{color:#5a4aa8}.finale-title{margin:2px 0 8px;font-size:clamp(25px,6vw,36px);line-height:1.25;color:#160f3d}.finale-title:focus{outline:none}.finale-title:focus-visible{outline:3px solid #18a986;outline-offset:4px;border-radius:6px}
.finale-stop{display:inline-block;margin:4px 0;padding:5px 14px;border:2px solid var(--finale-accent);border-radius:99px;background:#fff;color:#211b43;font-weight:900}.finale-variant{margin:10px auto;max-width:46ch;font-size:17px;line-height:1.7;font-weight:750}.finale-outcome{margin:8px auto;max-width:46ch;padding:9px 12px;border:2px dashed var(--finale-accent);border-radius:12px;background:#fff;color:#211b43;line-height:1.6;text-align:left}.finale-outcome strong{color:#160f3d}.finale-core{margin:12px auto;max-width:46ch;padding:12px 14px;border-left:5px solid #ffd23f;border-radius:0 12px 12px 0;background:#fff8dc;color:#2a2148;font-size:18px;line-height:1.7;font-weight:900;text-align:left}
.finale-stamps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0;padding:0;list-style:none}.finale-stamp{padding:6px 11px;border:2px solid #d9d2e6;border-radius:99px;background:#fff;font-size:14px;font-weight:850}.finale-stamp.is-last{border-color:var(--finale-accent);box-shadow:inset 0 -4px 0 var(--finale-accent)}
.finale-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}.finale-actions button{min-height:48px;max-width:100%}.finale-secondary{padding:10px 16px;border:2px solid #302170;border-radius:13px;background:#fff;color:#211b43;font:inherit;font-weight:850;cursor:pointer}
.finale-recap{margin-top:14px;padding:12px 14px;border-radius:14px;background:#f7f4ff;text-align:left}.finale-recap[hidden]{display:none}.finale-recap h3{margin:0 0 6px;color:#160f3d}.finale-recap-list{margin:0;padding-left:22px;line-height:1.6}.finale-recap-list li{margin:6px 0}.finale-recap-list strong{display:block}.finale-recap-list li.is-last strong{color:#160f3d;text-decoration:underline 3px var(--finale-accent);text-underline-offset:4px}
.finale-line{animation:finaleIn .6s ease-out both}.finale-title{animation-delay:.12s}.finale-stop{animation-delay:.3s}.finale-variant{animation-delay:.48s}.finale-outcome{animation-delay:.57s}.finale-core{animation-delay:.66s}.finale-stamps{animation-delay:.84s}
@keyframes finaleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes finaleGlide{from{transform:translate(-14px,4px) rotate(-8deg)}to{transform:translate(14px,-4px) rotate(4deg)}}@keyframes finaleScene{from{transform:scale(1)}to{transform:scale(1.06)}}
/* 短橫向開場固定主要 CTA 在可視安全區，避免內容較長時「開始」落在可捲動區外；卡片保留底部空間讓 CTA 不遮住文字。 */
@media (orientation:landscape) and (max-height:600px){#world-opening .opening-card{padding-bottom:90px}#world-opening .opening-actions{position:fixed;z-index:10002;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);box-sizing:border-box;width:min(760px,calc(100vw - 24px));justify-content:center;margin:0;padding:8px 12px;border:1px solid #ffffffc9;border-radius:18px;background:#fff9edeb;box-shadow:0 10px 28px #08051d70;transform:translateX(-50%)}}
@media(max-width:540px){.finale-actions{flex-direction:column;align-items:stretch}.finale-variant{font-size:16px}.finale-core{font-size:16px}.finale-plane{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.finale-line,.finale-plane,.finale-scene-img{animation:none!important}}
/* Keep quiz answers hidden during the arrival story gate. */
.arrival-options[hidden]{display:none!important}
/* Stage 2 continuation card inside #arrival-gate: touch-sized actions that wrap on narrow screens. */
.arrival-question[hidden]{display:none!important}
.stage2-continuation h3{margin:0 0 6px;color:#160f3d;font-size:20px}.stage2-continuation-message{margin:0;overflow-wrap:anywhere}
.stage2-continuation-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.stage2-continuation-actions button{min-height:48px;max-width:100%;margin-top:0}
.travel-only-card{padding:16px;border:1px solid #ddd5ef;border-radius:16px;background:linear-gradient(145deg,#f5f1ff,#fff9e8);color:#241a52}.travel-only-card h3{margin:0 0 7px;color:#160f3d;font-size:20px}.travel-only-card p{line-height:1.6}.travel-only-facts{padding-left:22px;line-height:1.7;overflow-wrap:anywhere}.travel-only-card:focus{outline:3px solid #18a986;outline-offset:3px}
/* 短橫向開場固定主要 CTA 在可視安全區，避免內容較長時「開始」落在可捲動區外；卡片保留底部空間讓 CTA 不遮住文字。 */
@media (orientation:landscape) and (max-height:600px){#world-opening .opening-card{padding-bottom:90px}#world-opening .opening-actions{position:fixed;z-index:10002;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);box-sizing:border-box;width:min(760px,calc(100vw - 24px));justify-content:center;margin:0;padding:8px 12px;border:1px solid #ffffffc9;border-radius:18px;background:#fff9edeb;box-shadow:0 10px 28px #08051d70;transform:translateX(-50%)}}
@media(max-width:540px){.stage2-continuation-actions{flex-direction:column;align-items:stretch}}

/* 出發候機窗景：保留場景比例，視角按鈕在窄螢幕仍可觸控。 */
.departure-scene{position:relative;margin:0 0 24px;border:1px solid #ded9ed;border-radius:16px;overflow:hidden;background:#160f3d;box-shadow:0 8px 20px #211b4322}
.departure-scene figure{width:100%;height:clamp(180px,30vw,250px);margin:0}
.departure-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.departure-scene-controls{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:28px 12px 10px;color:#fff;background:linear-gradient(transparent,#100a31e8)}
.departure-scene-controls>span{font-size:12px;line-height:1.3;font-weight:900;text-shadow:0 1px 3px #000}
.departure-scene-controls [role=group]{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.departure-scene-controls button{min-height:44px;padding:7px 10px;border:1px solid #ffffffa8;border-radius:99px;background:#160f3dcc;color:#fff;font:inherit;font-size:12px;font-weight:900;cursor:pointer;touch-action:manipulation}
.departure-scene-controls button[aria-pressed=true]{background:#ffd23f;color:#160f3d;border-color:#ffd23f}
/* 第二階段橫向（桌機／平板／手機橫向）：場景圖固定在左欄（sticky，捲動任務時圖仍可見），標題、說明、線索、互動與任務紀錄在右欄。
   左欄寬度同時受視窗高度限制，16:9 圖片不會比可用高度還高；圖片寬高比不變，所以圖上定位點座標不需調整。
   直向與 600px 以下維持原本上下排列。 */
@media(orientation:landscape) and (min-width:600px){
 #arrival-gate:has(.stage2-game){padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
 .arrival-card:has(.stage2-game){width:min(1240px,100%);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
 .stage2-game:has(.stage2-scene-frame){grid-template-columns:min(66%,calc((100vh - 150px) * 1.7778)) minmax(0,1fr);grid-template-columns:min(66%,calc((100dvh - 150px) * 1.7778)) minmax(0,1fr);align-items:start;column-gap:14px}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene-frame{grid-column:1;grid-row:1 / span 2;position:sticky;top:0;z-index:1}
 .stage2-game:has(.stage2-scene-frame) .stage2-head{grid-column:2;grid-row:1}
  /* 任務操作和進度紀錄並排，橫向時少捲動；短螢幕另有較窄欄寬。 */
  .stage2-game:has(.stage2-scene-frame) .stage2-layout{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr) minmax(160px,.38fr)}
 .stage2-game:has(.stage2-scene-frame) .stage2-status{position:static;order:0}
}
/* 短橫向（手機 844×390 等）：抵達卡標頭壓成一列、隱藏裝飾用 ARRIVAL TASK 章，讓第二階段主要操作留在第一屏。 */
@media(orientation:landscape) and (min-width:600px) and (max-height:600px){
 .arrival-card:has(.stage2-game){display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:8px 12px}
 .arrival-card:has(.stage2-game)>*{margin-top:0;margin-bottom:0}
 .arrival-card:has(.stage2-game) .arrival-top{order:9;margin-left:auto}.arrival-card:has(.stage2-game) .arrival-stamp{display:none}
 .arrival-card:has(.stage2-game) #arrival-title{font-size:18px}.arrival-card:has(.stage2-game) .scene-label{font-size:13px}
 .arrival-card:has(.stage2-game) .arrival-language button{min-height:44px;padding:6px 10px}
 .arrival-card:has(.stage2-game) .arrival-feedback:empty{display:none}
 .arrival-card:has(.stage2-game) #arrival-complete{flex:1 1 100%;min-width:0;padding:8px}
 .stage2-game:has(.stage2-scene-frame) .stage2-head{padding:9px 11px}.stage2-game{gap:10px}
}

@media(orientation:landscape) and (min-width:600px) and (max-width:900px) and (max-height:600px){
  /* 手機橫向留更多寬度給任務操作；插圖仍保持完整比例，任務紀錄縮成窄欄。 */
  .stage2-game:has(.stage2-scene-frame){grid-template-columns:min(38%,calc((100dvh - 120px) * 1.7778)) minmax(0,1fr);column-gap:10px}
  .stage2-game:has(.stage2-scene-frame) .stage2-layout{grid-template-columns:minmax(0,1fr) minmax(132px,.36fr);gap:8px}
  .stage2-game:has(.stage2-scene-frame) .stage2-main,.stage2-game:has(.stage2-scene-frame) .stage2-status{padding:9px}
  .stage2-game:has(.stage2-scene-frame) .stage2-hotspots,.stage2-game:has(.stage2-scene-frame) .stage2-activity{padding:8px;margin-top:8px}
}

/* Stage 2 is a full-screen play surface on landscape tablets/desktops: two-thirds for the scene and mission controls, one-third for progress. */
@media(orientation:landscape) and (min-width:600px){
 #arrival-gate:has(.stage2-game){padding:0;place-items:stretch;background:#100a31}
 .arrival-card:has(.stage2-game){box-sizing:border-box;width:100%;height:100%;max-height:none;overflow:hidden;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));border:0;border-radius:0;box-shadow:none;background:#fbf6ea}
 .arrival-card:has(.stage2-game) #arrival-country,.arrival-card:has(.stage2-game) #arrival-title,.arrival-card:has(.stage2-game) #arrival-scene{display:none!important}
 .arrival-card:has(.stage2-game) .arrival-top{position:absolute;z-index:4;top:8px;right:12px;margin:0}
 .arrival-card:has(.stage2-game) .arrival-stamp{display:none}
 .arrival-card:has(.stage2-game) .arrival-language{min-height:44px;margin:0 54px 4px 0}
 .arrival-card:has(.stage2-game) #arrival-complete{display:block;width:100%;min-width:0;padding:0}
 .stage2-game:has(.stage2-scene-frame){box-sizing:border-box;width:100%;height:calc(100dvh - 68px);min-height:0;grid-template-columns:minmax(0,2fr) minmax(270px,1fr);grid-template-rows:auto minmax(130px,30dvh) minmax(0,1fr);align-items:stretch;gap:8px 12px;overflow:hidden}
 .stage2-game:has(.stage2-scene-frame) .stage2-head{grid-column:1;grid-row:1;min-width:0;padding:8px 12px}
 .stage2-game:has(.stage2-scene-frame) .stage2-head h2{margin:2px 0;font-size:clamp(19px,2.1vw,25px);line-height:1.2}
 .stage2-game:has(.stage2-scene-frame) .stage2-npc{margin:2px 0 0;line-height:1.35}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene-frame{grid-column:1;grid-row:2;position:relative;top:auto;display:grid;place-items:center;min-width:0;min-height:0;aspect-ratio:16/9;max-height:30dvh;overflow:hidden;border-radius:14px;background:#171334}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene{width:100%;height:100%;object-fit:contain}
 .stage2-game:has(.stage2-scene-frame) .stage2-layout{display:contents}
 .stage2-game:has(.stage2-scene-frame) .stage2-main{grid-column:1;grid-row:3;min-height:0;overflow:auto;padding:8px 10px}
 .stage2-game:has(.stage2-scene-frame) .stage2-status{grid-column:2;grid-row:1 / span 3;position:relative;top:auto;min-height:0;height:100%;overflow:auto;align-self:stretch;padding:12px}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots,.stage2-game:has(.stage2-scene-frame) .stage2-activity{margin-top:6px;padding:9px}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-instruction{margin:0 0 4px}
 .arrival-card:has(.stage2-game) .stage2-return{display:block;width:max-content;max-width:100%;min-height:44px;margin:8px 0 0 auto;padding:8px 14px;border:2px solid #5e5474;border-radius:12px;background:#fff;color:#342a5b;font:inherit;font-weight:850;box-shadow:none}
}
@media(orientation:landscape) and (min-width:600px) and (max-height:600px){
 .stage2-game:has(.stage2-scene-frame){height:calc(100dvh - 62px);grid-template-rows:auto minmax(120px,36dvh) minmax(0,1fr);gap:5px 8px}
 .stage2-game:has(.stage2-scene-frame) .stage2-head{padding:5px 8px}
 .stage2-game:has(.stage2-scene-frame) .stage2-head h2{font-size:18px}
 .stage2-game:has(.stage2-scene-frame) .stage2-npc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px}
 .stage2-game:has(.stage2-scene-frame) .stage2-main,.stage2-game:has(.stage2-scene-frame) .stage2-status{padding:6px}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspot,.stage2-game:has(.stage2-scene-frame) .stage2-choice,.stage2-game:has(.stage2-scene-frame) .stage2-button,.stage2-game:has(.stage2-scene-frame) .stage2-reset{min-height:44px}
}

/* Picture enlargement is available from both the Stage 1 answer cards and Stage 2 scene art. */
.game-image-viewer[hidden]{display:none!important}
.game-image-viewer{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:18px;background:#0d0a27ed}
.game-image-viewer img{display:block;max-width:min(94vw,1500px);max-height:86dvh;object-fit:contain;border:2px solid #fff;border-radius:12px;box-shadow:0 16px 48px #0009;touch-action:pinch-zoom}
.game-image-viewer button{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));min-width:48px;min-height:48px;padding:8px 12px;border:2px solid #fff;border-radius:12px;background:#fff;color:#211b43;font:inherit;font-weight:900;cursor:pointer}
.game-image-viewer:focus-visible,.game-image-viewer button:focus-visible{outline:3px solid #ffd23f;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.game-image-viewer{scroll-behavior:auto}}
/* Flight facts change while the plane crosses borders; fixed card slots prevent country names and day/night labels from moving the sidebar. */
.wfg-side .wfg-now:not([hidden]){box-sizing:border-box;height:clamp(210px,28dvh,250px);min-height:210px;max-height:250px;overflow:auto;scrollbar-gutter:stable}
.wfg-side .wfg-now-head{min-height:52px;align-items:center}
.wfg-side .wfg-now-head b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.wfg-side .wfg-facts{max-height:calc(100% - 74px);overflow:auto;scrollbar-gutter:stable}
.wfg-side .wfg-clock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:6px;margin:8px 0 0}
.wfg-side .wfg-clock>span{box-sizing:border-box;min-width:0;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 4px;border-radius:12px;text-align:center;overflow:hidden}
.wfg-side .wfg-clock small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:2.5em;overflow:hidden;text-overflow:ellipsis;line-height:1.2;font-size:10.5px;text-align:center}
.wfg-side .wfg-clock b{font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}
.wfg-side .wfg-clock .wfg-sky b{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.wfg-side .wfg-clock>span{transition:none}
/* 短橫向開場固定主要 CTA 在可視安全區，避免內容較長時「開始」落在可捲動區外；卡片保留底部空間讓 CTA 不遮住文字。 */
@media (orientation:landscape) and (max-height:600px){#world-opening .opening-card{padding-bottom:90px}#world-opening .opening-actions{position:fixed;z-index:10002;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);box-sizing:border-box;width:min(760px,calc(100vw - 24px));justify-content:center;margin:0;padding:8px 12px;border:1px solid #ffffffc9;border-radius:18px;background:#fff9edeb;box-shadow:0 10px 28px #08051d70;transform:translateX(-50%)}}
@media(max-width:540px){.departure-scene{margin-bottom:18px}.departure-scene figure{height:clamp(160px,55vw,220px)}.departure-scene-controls{flex-direction:column;align-items:stretch;padding:24px 8px 8px;gap:6px}.departure-scene-controls>span{max-width:none;font-size:11px}.departure-scene-controls [role=group]{width:100%;gap:4px}.departure-scene-controls button{flex:1 1 calc(33.333% - 4px);min-width:44px;padding:7px 3px;font-size:11px;white-space:normal}}

/* Landscape Stage 2 puts clue controls beside the activity and removes the duplicate arrival header.
   The mission image pins remain the primary visual clue controls; text controls stay available. */
@media(orientation:landscape) and (min-width:600px){
 .arrival-card:has(.stage2-game){padding:12px;gap:6px}
 .arrival-card:has(.stage2-game) #arrival-country,
 .arrival-card:has(.stage2-game) #arrival-title,
 .arrival-card:has(.stage2-game) #arrival-scene{display:none!important}
 .arrival-card:has(.stage2-game) .arrival-top{order:0;flex:0 0 auto;margin-left:auto}
 .arrival-card:has(.stage2-game) .arrival-language{order:1;flex:1 1 calc(100% - 54px);min-width:0;flex-wrap:wrap;margin:0}
 .arrival-card:has(.stage2-game) #arrival-complete{order:2;flex:1 1 100%;min-width:0;padding:0}
 .stage2-game:has(.stage2-scene-frame) .stage2-main{display:grid;grid-template-columns:minmax(125px,.42fr) minmax(0,.58fr);gap:8px;align-items:start}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-instruction,
 .stage2-game:has(.stage2-scene-frame) .stage2-main>button.stage2-read-instruction{grid-column:1/-1;margin:0}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-hotspots{grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-content:start;margin:0;padding:9px}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots h3,
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots .stage2-readout,
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots>.stage2-read-npc{grid-column:1/-1;margin:0}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots>.stage2-hotspot{width:100%;min-width:0;min-height:44px;margin:0;padding:6px 8px;box-sizing:border-box;font-size:14px}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-activity{grid-column:2;margin:0;padding:9px}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity .stage2-choice,
 .stage2-game:has(.stage2-scene-frame) .stage2-activity .stage2-button{min-height:44px;margin:3px;padding:6px 9px}
 .stage2-status details summary{min-height:48px}
}
@media(orientation:landscape) and (min-width:600px) and (max-width:900px) and (max-height:600px){
 .stage2-game:has(.stage2-scene-frame) .stage2-main{grid-template-columns:minmax(118px,.36fr) minmax(0,.64fr);gap:6px}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots,.stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-activity{padding:7px}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots>.stage2-hotspot{min-width:44px;font-size:12px}
}
/* 非互動提示只供閱讀，不能擋住其下方的遊戲按鈕。 */
.world-toast{pointer-events:none}
/* 短橫向手機：首屏保留場景圖，同時讓線索和第一個互動提早出現。
   任務紀錄仍在右側，長內容留在卡片內捲動，不會被截斷或移除。 */
@media(orientation:landscape) and (min-width:600px) and (max-width:900px) and (max-height:600px){
 .stage2-game:has(.stage2-scene-frame){grid-template-columns:min(66%,calc((100dvh - 130px) * 1.7778)) minmax(0,1fr);column-gap:8px}
 .stage2-game:has(.stage2-scene-frame) .stage2-head{padding:6px 9px}
 .stage2-game:has(.stage2-scene-frame) .stage2-eyebrow{font-size:11px;line-height:1.2}
 .stage2-game:has(.stage2-scene-frame) .stage2-head h2{margin:2px 0;font-size:clamp(17px,2.5vw,21px);line-height:1.15}
 .stage2-game:has(.stage2-scene-frame) .stage2-npc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:2px 0 0;font-size:12px;line-height:1.35}
 .stage2-game:has(.stage2-scene-frame) .stage2-layout{grid-template-columns:minmax(0,1fr) minmax(104px,.28fr);gap:6px}
 .stage2-game:has(.stage2-scene-frame) .stage2-main{grid-template-columns:minmax(104px,.35fr) minmax(0,.65fr);gap:5px;padding:7px}
 .stage2-game:has(.stage2-scene-frame) .stage2-instruction{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-size:13px;line-height:1.35}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-instruction{grid-column:1;grid-row:1}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>button.stage2-read-instruction{grid-column:2;grid-row:1;justify-self:end;width:44px;min-width:44px;min-height:44px;margin:0;padding:0;font-size:0}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>button.stage2-read-instruction::before{content:'🔊';font-size:18px}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots{gap:3px;padding:6px;margin-top:5px}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots h3{font-size:14px;line-height:1.25}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots .stage2-readout{min-height:0;padding:5px 7px;font-size:12px;line-height:1.35}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots>.stage2-hotspot{min-height:44px;padding:5px;font-size:12px;line-height:1.2;overflow-wrap:anywhere}
 .stage2-game:has(.stage2-scene-frame) .stage2-read-npc{min-height:44px;padding:5px 7px;font-size:12px}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-activity{padding:6px;margin-top:5px}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity h3{margin-bottom:4px;font-size:14px}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity .stage2-choice,.stage2-game:has(.stage2-scene-frame) .stage2-activity .stage2-button{min-height:48px;margin:3px;padding:7px 9px;font-size:16px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity .stage2-choice{min-width:44px;flex:1 1 100%;box-sizing:border-box}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity:has(.stage2-sequence-tray){display:flex;flex-direction:column}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity>.stage2-sequence-label{order:0}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity>.stage2-order{order:1}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity>.stage2-sequence-tray{order:2}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity>.stage2-sequence-undo{order:3}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity>.stage2-choices{order:4}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity>.stage2-feedback{order:5}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity>.stage2-reset{order:6}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity>.stage2-finale-slot{order:7}
 .stage2-game:has(.stage2-scene-frame) .stage2-status{padding:6px;font-size:12px}
 .stage2-game:has(.stage2-scene-frame) .stage2-status h3{margin-bottom:4px;font-size:14px}
 .stage2-game:has(.stage2-scene-frame) .stage2-status ol{padding-left:17px;line-height:1.35}
}

/* Keep scene hotspots discoverable without numeric badges covering illustrated characters. */
.arrival-hotspot-num{display:none!important}
.arrival-hotspot{border:0!important;background:transparent!important;box-shadow:none!important}
.arrival-hotspot:after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:#ffd23f;box-shadow:0 0 0 2px #241a52,0 0 10px #ffd23f;pointer-events:none}
.arrival-hotspot:disabled:after{background:#4ae0bd}
.stage2-scene-pin{border:0;background:transparent;color:transparent;box-shadow:none}
.stage2-scene-pin:before{content:'';position:absolute;inset:7px;border:2px solid #fff;border-radius:50%;background:#ffd23f42;box-shadow:0 0 0 2px #160f3d99;pointer-events:none}
.stage2-scene-pin:after{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;background:#ffd23f;box-shadow:0 0 0 2px #160f3d;pointer-events:none}
.stage2-scene-pin[aria-pressed=true]:after{background:#43e1b7}
/* Keep the 44px touch targets, but make the visible clue marker a small white point. */
.scene-exploration-point{border:0;background:transparent;color:transparent;box-shadow:none;font-size:0}
.scene-exploration-point:before{inset:auto;width:10px;height:10px;border:2px solid #fff;background:#fff;box-shadow:0 0 0 2px #20204f9c,0 0 12px 5px #fffbd1}
.scene-exploration-point:after{inset:9px;border:1px solid #fff9}
.scene-exploration-point[aria-pressed=true]:before{background:#72f4d1;transform:scale(1.2)}
.scene-exploration:not(.is-front-view) .scene-exploration-point{display:none}
.stage2-scene-pin{width:48px;height:48px;background:transparent;color:transparent;box-shadow:none}
.stage2-scene-pin:before{inset:auto;width:10px;height:10px;border:2px solid #fff;background:#fff;box-shadow:0 0 0 2px #20204f9c,0 0 12px 5px #fffbd1}
.stage2-scene-pin:after{inset:8px;border:1px solid #fff9;background:transparent;box-shadow:none}
.stage2-scene-pin[aria-pressed=true]:before{background:#72f4d1;transform:scale(1.2)}
@media(prefers-reduced-motion:reduce){.scene-exploration-point:before,.scene-exploration-point:after,.stage2-scene-pin:before,.stage2-scene-pin:after{animation:none;opacity:1}.scene-exploration-point:after,.stage2-scene-pin:after{display:none}}

/* Reduced motion stops animation, never hides the interactive target. */

/* 短橫向手機（600–900 寬、≤600 高，例 844×390）：原本左欄由上而下堆「標題→場景圖→說明／線索／任務」，
   任務區只剩約 90px，第一個線索與第一個任務鈕落在 390px 以下。改成三欄：左＝標題＋場景圖（返回地球鈕在其下方保留列），
   中＝說明、線索與任務（欄內可捲動），右＝任務紀錄與提示。卡片改直向 flex，第二階段高度取剩餘空間，返回鈕不再被裁掉；
   NPC 對話與任務說明不再截成兩行。 */
@media(orientation:landscape) and (min-width:600px) and (max-width:900px) and (max-height:600px){
 .arrival-card:has(.stage2-scene-frame){flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px;padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}
 .arrival-card:has(.stage2-scene-frame) .arrival-language{flex:0 0 auto;margin:0 54px 0 0}
 .arrival-card:has(.stage2-scene-frame) #arrival-complete{flex:1 1 0;min-height:0}
 .arrival-card:has(.stage2-scene-frame) .stage2-mount{height:100%}
 .arrival-card:has(.stage2-scene-frame) .stage2-return{position:absolute;z-index:4;left:max(10px,env(safe-area-inset-left));bottom:6px;margin:0}
 /* 場景圖列為 auto 且不設 max-height，外框維持精確 16:9，圖上定位點（以外框百分比定位）不會偏移；標題列吸收剩餘高度，過長時在標題內捲動。 */
 .stage2-game:has(.stage2-scene-frame){height:100%;grid-template-columns:minmax(0,1.7fr) minmax(0,2fr) minmax(140px,1fr);grid-template-rows:minmax(0,1fr) auto 48px;gap:5px 8px}
 .stage2-game:has(.stage2-scene-frame) .stage2-head{grid-column:1;grid-row:1;min-height:0;overflow:auto}
 .stage2-game:has(.stage2-scene-frame) .stage2-head h2{font-size:18px}
 .stage2-game:has(.stage2-scene-frame) .stage2-npc{display:block;-webkit-line-clamp:unset;overflow:visible}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene-frame{grid-column:1;grid-row:2;align-self:start;width:100%;height:auto;max-height:none}
 .stage2-game:has(.stage2-scene-frame) .stage2-main{grid-column:2;grid-row:1 / -1;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr)}
 .stage2-game:has(.stage2-scene-frame) .stage2-status{grid-column:3;grid-row:1 / -1}
  .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-instruction{grid-column:1;grid-row:1;display:block;-webkit-line-clamp:unset;overflow:visible;padding-right:0}
  .stage2-game:has(.stage2-scene-frame) .stage2-main>button.stage2-read-instruction{grid-column:2;grid-row:1;justify-self:end;width:44px;min-width:44px;min-height:44px;margin:0;padding:0;font-size:0}
  .stage2-game:has(.stage2-scene-frame) .stage2-main>button.stage2-read-instruction::before{content:'🔊';font-size:18px}
  .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-hotspots{grid-column:1;grid-row:2}
  .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-activity{grid-column:2;grid-row:2}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-hotspots{grid-template-columns:minmax(0,1fr)}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity .stage2-choice{max-width:100%}
 .stage2-game:has(.stage2-scene-frame) .stage2-sequence-label{margin:4px 0;font-size:12px;line-height:1.4}
}

/* Stage 2 immersive landscape layout: the 16:9 illustration is the left playfield,
   with clue and activity controls layered over its lower edge. Progress stays in
   a separate right rail. Keep this consolidated override after legacy breakpoints
   so short landscape and tablet rules cannot collapse the playfield into a strip. */
@media(orientation:landscape) and (min-width:600px){
 #arrival-gate:has(.stage2-game){padding:0;place-items:stretch;background:#100a31}
 .arrival-card:has(.stage2-game){position:relative;box-sizing:border-box;width:100%;height:100%;max-height:none;overflow:hidden;padding:54px max(12px,env(safe-area-inset-right)) 52px max(12px,env(safe-area-inset-left));border:0;border-radius:0;box-shadow:none;background:#fbf6ea}
 .arrival-card:has(.stage2-game) #arrival-country,.arrival-card:has(.stage2-game) #arrival-title,.arrival-card:has(.stage2-game) #arrival-scene{display:none!important}
 .arrival-card:has(.stage2-game) .arrival-top{position:absolute;z-index:12;top:8px;right:12px;margin:0}
 .arrival-card:has(.stage2-game) .arrival-stamp{display:none}
 .arrival-card:has(.stage2-game) .arrival-language{position:absolute;z-index:11;top:6px;left:max(12px,env(safe-area-inset-left));right:72px;min-height:44px;margin:0}
 .arrival-card:has(.stage2-game) #arrival-complete{position:absolute;inset:54px 12px 52px;display:block;width:auto;height:auto;min-width:0;padding:0;box-sizing:border-box}
 .arrival-card:has(.stage2-game) .stage2-mount{width:100%;height:100%}
 .stage2-game:has(.stage2-scene-frame){position:relative;display:block;box-sizing:border-box;width:100%;height:100%;min-height:0;overflow:hidden;color:#241a52}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene-frame{position:absolute;z-index:0;left:0;top:50%;width:min(66%,calc((100dvh - 116px)*1.7778));height:auto;max-height:none;aspect-ratio:16/9;transform:translateY(-50%);overflow:hidden;border:2px solid #fff;border-radius:18px;background:#171334;box-shadow:0 12px 36px #130d3980}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;border-radius:16px}
 .stage2-game:has(.stage2-scene-frame) .stage2-head{position:absolute;z-index:4;left:12px;top:12px;width:min(62%,calc((100dvh - 116px)*1.7778 - 24px));max-height:24%;overflow:auto;padding:10px 14px;border:1px solid #fff9;border-radius:14px;background:#fbf8eced;box-shadow:0 4px 18px #130d3940}
 .stage2-game:has(.stage2-scene-frame) .stage2-head h2{margin:2px 0;font-size:clamp(18px,2vw,25px);line-height:1.2}
 .stage2-game:has(.stage2-scene-frame) .stage2-npc{margin:3px 0 0;font-size:clamp(13px,1.3vw,16px);line-height:1.4}
 .stage2-game:has(.stage2-scene-frame) .stage2-layout{display:contents}
 .stage2-game:has(.stage2-scene-frame) .stage2-main{position:absolute;z-index:5;left:0;bottom:0;box-sizing:border-box;width:min(66%,calc((100dvh - 116px)*1.7778));max-height:54%;overflow:auto;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:8px;padding:10px;border:1px solid #fff9;border-radius:16px;background:#fbf8ecef;box-shadow:0 6px 24px #130d3955;overscroll-behavior:contain}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-instruction{grid-column:1/-1;margin:0;font-size:clamp(14px,1.35vw,17px);line-height:1.4}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>button.stage2-read-instruction{grid-column:1/-1;justify-self:start;min-height:44px;margin:0}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-hotspots{grid-column:1;grid-row:3;margin:0;padding:8px}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-activity{grid-column:2;grid-row:3;min-width:0;margin:0;padding:8px}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots,.stage2-game:has(.stage2-scene-frame) .stage2-activity{background:#fffdf7}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspot,.stage2-game:has(.stage2-scene-frame) .stage2-choice,.stage2-game:has(.stage2-scene-frame) .stage2-button,.stage2-game:has(.stage2-scene-frame) .stage2-reset{min-height:44px;max-width:100%;box-sizing:border-box}
 .stage2-game:has(.stage2-scene-frame) .stage2-status{position:absolute;z-index:6;top:0;right:0;bottom:0;box-sizing:border-box;width:calc(100% - min(66%,calc((100dvh - 116px)*1.7778)) - 14px);min-width:0;height:100%;overflow:auto;padding:14px;border:1px solid #ded8eb;border-radius:16px;background:#f7f4ff;overscroll-behavior:contain}
 .arrival-card:has(.stage2-game) .stage2-return{position:absolute;z-index:13;left:max(12px,env(safe-area-inset-left));bottom:6px;min-height:44px;margin:0;padding:7px 12px}
}
@media(orientation:landscape) and (min-width:600px) and (max-height:600px){
 .arrival-card:has(.stage2-game){padding-top:52px;padding-bottom:50px}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene-frame{width:min(66%,calc((100dvh - 108px)*1.7778))}
 .stage2-game:has(.stage2-scene-frame) .stage2-head{width:min(62%,calc((100dvh - 108px)*1.7778 - 24px));max-height:23%;padding:7px 10px}
 .stage2-game:has(.stage2-scene-frame) .stage2-head h2{font-size:18px}
 .stage2-game:has(.stage2-scene-frame) .stage2-npc{font-size:12px;line-height:1.3}
 .stage2-game:has(.stage2-scene-frame) .stage2-main{width:min(66%,calc((100dvh - 108px)*1.7778));max-height:62%;gap:5px;padding:6px}
 /* 844×390：朗讀鈕獨佔一列會把第一個線索與任務鈕推出 .stage2-main 的可視高度（被 overflow 裁掉）。
    改為 44px 圖示鈕放在說明右側，線索／任務直接接在第二列。 */
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-instruction{grid-column:1/-1;grid-row:1;align-self:center;padding-right:50px}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>button.stage2-read-instruction{grid-column:2;grid-row:1;justify-self:end;align-self:start;width:44px;min-width:44px;min-height:44px;padding:0;font-size:0}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>button.stage2-read-instruction::before{content:'🔊';font-size:18px}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-hotspots,.stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-activity{grid-row:2;padding:6px}
 .stage2-game:has(.stage2-scene-frame) .stage2-status{width:calc(100% - min(66%,calc((100dvh - 108px)*1.7778)) - 10px);padding:8px}
}

/* Pins escape the artwork stacking layer so controls stay visible and both remain tappable. */
@media(orientation:landscape) and (min-width:600px){
 .stage2-game:has(.stage2-scene-frame) .stage2-scene-frame{z-index:auto;isolation:auto;pointer-events:none}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene{pointer-events:none}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene-pins{z-index:10;pointer-events:none}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene-pin{pointer-events:auto}
}
@media(orientation:landscape) and (min-width:600px){
 .stage2-game:has(.stage2-scene-frame) .stage2-scene-frame{top:0;bottom:0;margin-block:auto;transform:none}
}

/* Rebuild Stage 2 as a full-height play area: the scene, clues and activity fill
   the left two-thirds; the separate right rail keeps progress and notes visible. */
@media(orientation:landscape) and (min-width:600px) and (min-height:601px){
 .stage2-game:has(.stage2-scene-frame){display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);height:100%;min-height:0;gap:8px 12px;overflow:hidden}
 .stage2-game:has(.stage2-scene-frame) .stage2-head{display:none}
 .stage2-game:has(.stage2-scene-frame) .stage2-sidebar-head{display:block;margin:0 0 14px;padding:10px 12px;border-radius:13px;background:linear-gradient(135deg,#f4f0ff,#fff8df)}
 .stage2-game:has(.stage2-scene-frame) .stage2-sidebar-head h2{margin:3px 0;font-size:clamp(19px,2vw,25px);line-height:1.2}
 .stage2-game:has(.stage2-scene-frame) .stage2-sidebar-head .stage2-npc{margin:4px 0 0;line-height:1.4}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene-frame{position:relative;grid-column:1;grid-row:1;top:auto;bottom:auto;width:auto;height:100%;max-width:100%;max-height:none;aspect-ratio:16/9;justify-self:center;transform:none;align-self:stretch}
 .stage2-game:has(.stage2-scene-frame) .stage2-scene{width:100%;height:100%;object-fit:contain}
 .stage2-game:has(.stage2-scene-frame) .stage2-layout{display:contents}
 .stage2-game:has(.stage2-scene-frame) .stage2-main{position:relative;grid-column:1;grid-row:2;left:auto;bottom:auto;width:auto;max-height:none;min-height:0;overflow:auto;display:block;padding:10px 12px;border:1px solid #ded8eb;border-radius:14px;background:#fffdf7;box-shadow:none;overscroll-behavior:contain}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>.stage2-instruction{margin:0 0 4px;padding:0;font-size:clamp(14px,1.25vw,17px);line-height:1.4}
 .stage2-game:has(.stage2-scene-frame) .stage2-main>button.stage2-read-instruction{min-height:42px;margin:2px 0}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspots,.stage2-game:has(.stage2-scene-frame) .stage2-activity{margin:6px 0 0;padding:8px 10px;background:#f7f4ff}
 .stage2-game:has(.stage2-scene-frame) .stage2-hotspot,.stage2-game:has(.stage2-scene-frame) .stage2-choice,.stage2-game:has(.stage2-scene-frame) .stage2-button,.stage2-game:has(.stage2-scene-frame) .stage2-reset{min-height:44px;max-width:100%;box-sizing:border-box}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:4px}
 .stage2-game:has(.stage2-scene-frame) .stage2-activity>h3,.stage2-game:has(.stage2-scene-frame) .stage2-activity>p,.stage2-game:has(.stage2-scene-frame) .stage2-activity>div,.stage2-game:has(.stage2-scene-frame) .stage2-activity>ol{grid-column:1/-1}
 .stage2-game:has(.stage2-scene-frame) .stage2-status{position:relative;grid-column:2;grid-row:1 / span 2;top:auto;right:auto;bottom:auto;width:auto;height:100%;min-height:0;overflow:auto;align-self:stretch;padding:14px;border:1px solid #ded8eb;border-radius:16px;background:#f7f4ff}
 .arrival-card:has(.stage2-game) .stage2-return{position:absolute;z-index:13;left:max(12px,env(safe-area-inset-left));bottom:6px;min-height:44px;margin:0;padding:7px 12px}
}
/* The full-screen transition ends on a readable country fact card, not a bare timer. */
#travel-interstitial[data-film=ended] .arrival-film-overlay{left:50%;right:auto;bottom:50%;width:min(760px,calc(100% - 40px));max-width:760px;max-height:72%;padding:clamp(18px,4vmin,34px);transform:translate(-50%,50%);border:2px solid #ffffffd9;border-radius:24px;background:#100b34eF;box-shadow:0 18px 60px #0008;gap:12px}
#travel-interstitial[data-film=ended] .arrival-film-overlay h2{font-size:clamp(24px,4vw,38px)}
#travel-interstitial[data-film=ended] .arrival-film-overlay .arrival-scene-copy{min-height:0;max-height:none;font-size:clamp(17px,2vw,22px);line-height:1.65}
#travel-interstitial[data-film=ended] .arrival-film-overlay .arrival-feedback{font-size:clamp(14px,1.5vw,17px)}
@media(max-height:430px) and (orientation:landscape){#travel-interstitial[data-film=ended] .arrival-film-overlay{gap:5px;padding:12px 16px;max-height:84%}#travel-interstitial[data-film=ended] .arrival-film-overlay .arrival-scene-copy{min-height:42px;font-size:17px;line-height:1.45}}

/* 多視角互動只在正面顯示可操作點；hidden 必須勝過按鈕基礎 display 規則。 */
.scene-exploration-point[hidden]{display:none!important}

/* Session identity reuses existing headers so it never becomes another floating flight card. */
.learner-identity{font-size:14px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.opening-identity{margin:12px 0 6px;padding:9px 12px;border-radius:10px;background:#eeeaff;color:#302754}
.opening-identity[data-signed-in="true"]{background:#ddf8ee;color:#075f48}
.wfg .wfg-brand-text,.wfg.is-flying .wfg-brand-text{display:block;min-width:0}
.wfg .wfg-brand-text .learner-identity{font-size:14px;color:#c3ffeb;opacity:1;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrival-top .mission-identity{min-width:0;margin:0 12px;max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#302754}
.arrival-card:has(.stage2-game) .mission-identity{display:none}

/* Keep the Stage 2 exit in the progress rail, away from scene art and activity controls. */
.arrival-card:has(.river-journal) .river-journal>.stage2-return{position:static;display:block;width:100%;max-width:100%;min-height:44px;margin:0 0 12px;padding:8px 12px;border:2px solid #5e5474;border-radius:12px;background:#fff;color:#342a5b;font:inherit;font-weight:850;box-shadow:none}
.stage2-sidebar-head .learner-identity{margin:0 0 6px;color:#075f48}
/* Keep readable answer targets after legacy compact-layout touch-size rules. */
@media(orientation:landscape) and (min-width:600px) and (max-height:600px){.stage2-game:has(.stage2-scene-frame) .stage2-activity .stage2-choice{min-height:48px;font-size:16px;line-height:1.35}}
@media(max-width:1100px){.wfg-brand{min-width:0}.wfg .wfg-brand-badge,.wfg .wfg-brand-text b{display:none}.wfg .wfg-brand-text{padding:8px;max-width:clamp(105px,19vw,205px)}.wfg .wfg-brand-text .learner-identity{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.arrival-top .arrival-stamp{display:none}.arrival-top .mission-identity{margin-left:0}}

.answer-option.is-previewed{outline:3px solid #3b8a78;outline-offset:2px}.arrival-drop-zone p{margin:8px 0;font-size:16px;line-height:1.6}.arrival-drop-zone .answer-confirm{min-height:48px;width:100%}.option-image-hint{font-size:16px;line-height:1.5;color:#3c3551}.finale-keywords{padding:10px 14px;background:#f1eee4;border-radius:12px;font-size:16px;font-weight:700;line-height:1.5}

/* Story controls show the result of the child's action while preserving saved IDs. */
.arrival-hotspot.egg-punch{width:54px;height:54px;min-height:54px;color:#8c4d22;border-radius:50%;background:#704723!important;box-shadow:0 3px 12px #0006!important;transform:translate(-50%,-100%)}
.arrival-hotspot.egg-punch:after{display:none}.egg-punch svg{width:42px;height:42px;display:block;margin:auto}
.egg .arrival-story-visual.is-cracked .arrival-story-art{animation:egg-knock .25s ease-in-out 2}
.egg .arrival-story-visual.is-cracked .egg-punch{outline:3px solid #ffe3a0}
@keyframes egg-knock{25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}
.puppet-motion{position:absolute;right:3%;bottom:3%;width:35%;max-width:360px;margin:0;border:3px solid #ffedb8;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px #0006;background:#153e43;pointer-events:none}
.puppet-motion-art{aspect-ratio:2.1;background-size:300% auto;background-position:52% 78%;background-repeat:no-repeat;transition:transform .45s ease-out;transform:scaleX(1)}
.puppet-motion[data-move=left] .puppet-motion-art{transform:scaleX(-1)}
.puppet-motion[data-move=wave] .puppet-motion-art{animation:puppet-tail .4s ease-in-out 3}
.puppet-motion-caption{padding:5px 8px;color:#fff;font-size:14px;line-height:1.35;background:#153e43;text-align:center}
@keyframes puppet-tail{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@media(max-width:540px){.puppet-motion{width:45%}.puppet-motion-caption{font-size:14px}}
@media(prefers-reduced-motion:reduce){.egg .arrival-story-visual.is-cracked .arrival-story-art,.puppet-motion[data-move=wave] .puppet-motion-art{animation:none}.puppet-motion-art{transition:none}.puppet-motion[data-move=wave]{outline:4px solid #ffedb8}}

.egg-crack{position:absolute;z-index:5;width:34px;height:48px;transform:translate(-50%,-105%);pointer-events:none;filter:drop-shadow(1px 1px 1px #211)}.egg-crack[hidden]{display:none}