/* P0/P1 presentation; inherited game rules and saved progress stay authoritative. */
.scene-loading{position:fixed;z-index:30;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:92vw;padding:16px 20px;border:1px solid #a7b59d;border-radius:10px;background:#fff8e9;box-shadow:0 10px 40px #18372f30;color:#244b42;font-size:16px}.scene-loading strong{font-size:18px}.scene-loading button{min-height:42px}.scene-loading span{flex:1;min-width:160px}
#modal:has(.bag-panel){width:min(960px,94vw);height:auto;max-height:92vh}
.bag-panel .bag-grid{gap:16px;margin:24px 0}
.bag-panel .bag-item{position:relative;display:flex;flex-direction:column;align-items:center;padding:18px 14px;background:linear-gradient(145deg,#f2ebd9,#e7e5d4);border:1px solid #d6ccb3;border-radius:12px;min-width:0}
.bag-panel .bag-item[data-obtained="true"]{border-color:#9cae88;box-shadow:inset 0 1px #fff9e8}
.bag-panel .bag-item img.bag-art{display:block;width:100%;height:132px;object-fit:contain;margin:0 auto 10px;filter:drop-shadow(0 5px 4px #45361818)}
.bag-panel .bag-item>strong{display:block;font-size:20px}
.bag-panel .bag-item>small{font-size:15px;line-height:1.6;color:#51675e;min-height:48px;padding:5px 0 12px}
.bag-panel .bag-item>button{min-height:44px;font-size:16px;margin-top:6px;max-width:100%}
.bag-panel .bag-item[data-obtained="false"]>img{filter:saturate(.65)}
.bag-panel .bag-item .artwork-unavailable{min-width:0;font-size:14px}
.bag-panel .bag-item .artwork-unavailable button{font-size:14px}
.bag-panel>button{margin:5px 6px 0 0;min-height:44px}
@media(max-width:600px){.bag-panel .bag-grid{gap:10px}.bag-panel .bag-item{padding:12px 8px}.bag-panel .bag-item img.bag-art{height:110px}.bag-panel .bag-item>strong{font-size:18px}.bag-panel .bag-item>small{font-size:14px}.bag-panel .bag-item>button{font-size:15px}#modal:has(.bag-panel) #modal-body{padding:36px 16px 20px}}
/* Scene dialogue stays above exploration props, observation cards and encounters. */
.scene-story[hidden],.story-character-call[hidden]{display:none!important}
.scene-story{position:absolute;z-index:30;left:18px;top:18px;width:min(590px,calc(100% - 36px));display:grid;grid-template-columns:116px minmax(0,1fr);gap:8px;padding:18px 20px 16px 10px;border:1px solid #bc9b5d;border-radius:4px 16px 6px 16px;background:linear-gradient(135deg,#faf3e4f5,#f0e4ccef);box-shadow:0 8px 30px #193c3433;color:#234940}
.story-portrait{width:116px;height:116px;align-self:center;border-radius:50%;mix-blend-mode:multiply}
.story-content{min-width:0}.story-kicker{font-size:14px;letter-spacing:.06em;color:#746443;margin:0 45px 8px 0;font-weight:700}.story-title{font-size:23px!important;margin:0 0 9px!important}.story-text{font-size:19px;line-height:1.65;margin:0 0 12px;overflow-wrap:anywhere}.story-close{position:absolute;right:8px;top:6px;padding:5px 8px;font-size:14px;background:transparent;border:0;color:#556f66}.story-controls{display:flex;gap:7px;flex-wrap:wrap}.story-controls button{min-height:36px;padding:6px 10px;font-size:14px}.story-controls .primary{margin-left:auto}.story-controls .story-pause{font-size:13px;padding-left:0;border-color:transparent;background:transparent;color:#577369}.story-character-call{position:absolute;left:18px;top:18px;z-index:5;min-height:42px;padding:10px 16px;background:#f9f0dfe8;color:#234940;border:1px solid #b9a273;border-radius:3px 14px 14px 14px;box-shadow:0 3px 12px #23494022;font-size:16px}.story-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}.scene-story[data-kind=event]{max-width:490px;grid-template-columns:80px minmax(0,1fr);padding:10px}.scene-story[data-kind=event] .story-portrait{width:80px;height:80px}.scene-story[data-kind=event] .story-text{font-size:18px;margin:0}.scene-story[data-kind=event] .story-controls{display:none}.scene-story[data-kind=event] .story-title{display:none}
.scene-story[data-kind=reward]{width:min(440px,calc(100% - 36px));grid-template-columns:80px minmax(0,1fr);gap:10px;padding:16px;left:auto;right:18px}.scene-story[data-kind=reward] .story-portrait{width:80px;height:80px;align-self:start;margin-top:27px}.scene-story[data-kind=reward] .story-text{font-size:17px;line-height:1.55}.scene-story[data-kind=reward] .story-title{font-size:22px!important}.story-keepsake{display:block;width:100%;text-align:left;padding:8px 12px;background:#fbf6e9;border:1px solid #bfa46d;box-shadow:0 3px 0 #d7c59d;transform-origin:center;border-radius:3px;animation:keepsake-arrive .65s ease-out both}.keepsake-route{display:block;width:100%;height:64px;object-fit:contain}.story-keepsake strong{display:block;font-size:17px}.story-keepsake span{display:block;font-size:13px;color:#657c6e;margin-top:4px}.story-result,.story-award,.story-hook{font-size:14px;line-height:1.55;margin:9px 0}.story-award{color:#856026;font-weight:bold}.story-hook{border-top:1px solid #cfbd96;padding-top:9px}.scene-story[data-kind=reward] .story-controls .primary{width:100%;margin:4px 0 0}.scene-story[data-kind=reward] .story-controls button{font-size:14px}.scene-story[data-kind=reward] .story-pause{display:none}.story-art-retry{font-size:14px}
@keyframes keepsake-arrive{from{opacity:0;transform:translateY(12px) rotate(-3deg)}to{opacity:1;transform:none}}
[data-experience=simple] .story-keepsake{animation:none}
.volume-prologue{padding:0;width:min(1180px,96vw);max-width:1180px;border:1px solid #c6aa6d;border-radius:8px;background:#152f2d;color:#fbf0d4;max-height:95dvh;overflow:auto;box-shadow:0 22px 100px #071d25b3}.volume-prologue::backdrop{background:#071d25c9}.prologue-scene{height:min(660px,75dvh);min-height:440px;position:relative;overflow:hidden;background:linear-gradient(90deg,#132c2e99,transparent 68%),url('art/optimized/keyart_nuwa_creation-a595b57118.webp') center/cover}.prologue-scene::after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#0b292ccf);pointer-events:none}.prologue-light{position:absolute;inset:0;width:100%;height:100%;z-index:1}.prologue-heading{position:absolute;left:4.5%;top:5%;z-index:2;max-width:68%;text-shadow:0 2px 18px #122a29}.prologue-heading p{font-size:15px;letter-spacing:.22em;color:#efd095;margin:0 0 12px}.prologue-heading h2{font-family:'STKaiti','KaiTi',serif;font-size:clamp(26px,3.2vw,42px);font-weight:500;line-height:1.4;margin:0}.prologue-voice{position:absolute;bottom:30px;left:4%;right:4%;display:flex;align-items:center;gap:22px;z-index:3;padding:14px 22px 14px 12px;border:1px solid #dab76b88;background:#f6eeddeF;border-radius:3px 18px 3px 18px;color:#274b40;box-shadow:0 5px 24px #0a222c55}.prologue-portrait{width:140px;height:140px;flex:none;border-radius:50%;mix-blend-mode:multiply}.prologue-voice strong{font-size:19px;color:#846330}.prologue-voice p{font-size:22px;line-height:1.7;margin:6px 0;max-width:760px}.prologue-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 20px}.prologue-nav span{margin-right:auto;font-size:14px;color:#d3d5bd}.prologue-nav button{font-size:16px;min-height:42px;background:#274a43;color:#f9ecca;border-color:#8c9975}.prologue-nav .primary{background:#e1c27d;color:#203d36}
@media(max-width:900px){.scene-story{grid-template-columns:86px minmax(0,1fr);padding:12px 14px 12px 8px;left:10px;top:10px;width:calc(100% - 20px)}.story-portrait{width:86px;height:86px}.story-text{font-size:17px}.scene-story[data-kind=reward]{right:10px;max-width:390px}.story-title{font-size:20px!important}}
@media(max-width:600px){.world-wrap[data-story-lesson=first]{overflow:visible;display:flex;flex-direction:column}.world-wrap[data-story-lesson=first]>canvas#world{order:2}.scene-story{position:relative;top:auto;left:auto;right:auto!important;order:1;width:100%!important;max-width:none!important;box-sizing:border-box;border-radius:0;grid-template-columns:72px minmax(0,1fr);margin:0}.story-portrait{width:72px;height:72px}.story-text{font-size:17px;line-height:1.55}.story-controls button{font-size:14px}.scene-story[data-kind=reward]{grid-template-columns:68px minmax(0,1fr)}.scene-story[data-kind=reward] .story-portrait{width:68px;height:68px}.story-effects{display:none}.story-character-call{left:8px;top:8px;font-size:14px;padding:8px 10px;min-height:36px}.prologue-scene{min-height:530px;height:75dvh;background-position:60% center}.prologue-heading{max-width:88%;top:20px}.prologue-voice{bottom:14px;left:10px;right:10px;padding:12px;gap:10px;align-items:flex-start}.prologue-portrait{width:74px;height:74px}.prologue-voice p{font-size:18px;line-height:1.6}.prologue-voice strong{font-size:16px}.prologue-nav{padding:12px;gap:8px}.prologue-nav span{width:100%;order:-1}.prologue-nav .primary{width:100%}}
@media(prefers-reduced-motion:reduce){.story-keepsake{animation:none}}
/* Do not repeat the page title inside the scene; reserve the lower stage for actors. */
.scene-story[data-kind=intro] .story-title{display:none}
.scene-story[data-kind=reward]{width:min(440px,calc(100% - 36px));grid-template-columns:62px minmax(0,1fr)}
.scene-story[data-kind=reward] .story-portrait{width:62px;height:62px;margin-top:24px}
.scene-story[data-side=left]{left:18px;right:auto}
.scene-story[data-side=right]{left:auto;right:18px}
.scene-story .keepsake-route{height:56px;width:100%}
.scene-story[data-kind=reward] .story-keepsake{padding:6px 10px}
.scene-story[data-kind=reward] .story-keepsake strong{font-size:15px}
.scene-story[data-kind=reward] .story-text{font-size:17px;margin-bottom:8px}
@media(max-width:600px){.scene-story[data-side]{left:auto;right:auto;width:100%}}
.story-memory-shelf{border-top:1px solid #cab993;padding-top:20px;margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}.story-memory-shelf h3{width:100%;font-size:20px;margin-bottom:4px}.story-memory-shelf button{min-height:44px;font-size:16px}
@media(max-width:600px){.topbar{display:grid;grid-template-columns:minmax(0,1fr);padding:10px 14px;gap:6px}.topbar nav{flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:10px;scrollbar-width:thin}.topbar nav button{flex:none;white-space:nowrap;min-height:38px}.game-heading{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}.game-heading>div:first-of-type{grid-column:2;min-width:0}.game-heading .game-rewards{grid-column:1/-1;justify-content:flex-end}.game-heading #thinking-button{grid-column:2;min-height:34px;font-size:14px}.game-heading .eyebrow{font-size:13px}.game-heading h1{font-size:22px}.objective{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.objective>div:first-child{min-width:0}.counters{display:flex;gap:14px;white-space:nowrap;font-size:13px}.counters b{font-size:25px}.counters #health{display:none}.objective strong{font-size:18px}.world-view-controls{font-size:14px}}
.story-keepsake{animation-play-state:inherit}
.story-map-guide{position:absolute;z-index:12;pointer-events:none;display:block;max-width:none;max-height:none}
.story-map-guide[hidden]{display:none!important}
.story-map-peek-return{position:absolute;z-index:31;right:18px;top:18px;min-height:44px;padding:8px 16px;border:1px solid #927541;border-radius:24px;background:#fff7e6;color:#264a41;font-size:16px;font-weight:700;box-shadow:0 4px 18px #102d2d45}
.story-map-peek-return[hidden]{display:none!important}
@container story-world (max-width:700px){.story-map-peek-return{right:10px;top:10px}}
/* A dim scrim keeps focus without compiling a full-page blur on the first click. */
dialog::backdrop{backdrop-filter:none;background:#153b348c}
/* Use the actual stage width: a narrow two-column desktop can have less space
   than a tablet. Put dialogue above its scene instead of clipping the reward. */
.world-panel{container-type:inline-size;container-name:story-world}
.scene-story[data-kind=reward]{max-height:calc(100% - 36px);overflow:hidden;grid-template-rows:minmax(0,1fr)}
.scene-story[data-kind=reward] .story-content{min-height:0;display:flex;flex-direction:column}
.scene-story[data-kind=reward] .story-scroll{min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;padding-right:2px}
.scene-story[data-kind=reward] .story-controls{flex-shrink:0;padding-top:8px}
.scene-story[data-kind=reward] .story-controls .story-award{flex-basis:100%;margin:0 0 3px;padding-top:6px;border-top:1px solid #c9b98d}
/* Leave the actor half of the scene clear when explaining an unfinished action. */
.scene-story:is([data-kind=reminder],[data-kind=error]){width:min(440px,calc(50% - 46px));grid-template-columns:62px minmax(0,1fr)}
.scene-story:is([data-kind=reminder],[data-kind=error]) .story-portrait{width:62px;height:62px}
.scene-story[data-kind=error]{width:min(600px,calc(100% - 36px))}
.scene-story[data-kind=error] .story-title{display:none}
@container story-world (max-width:700px){
 .world-wrap[data-story-lesson=first]{overflow:visible;display:flex;flex-direction:column}
 .world-wrap[data-story-lesson=first]>canvas#world{order:2}
 .scene-story,.scene-story[data-side]{position:relative;order:1;top:auto;left:auto;right:auto;width:100%;max-width:none;margin:0;border-radius:0;grid-template-columns:72px minmax(0,1fr)}
 .scene-story:is([data-kind=reminder],[data-kind=error]){width:100%;grid-template-columns:72px minmax(0,1fr)}
 .scene-story[data-kind=reward]{width:100%;max-width:none;max-height:none;grid-template-columns:72px minmax(0,1fr)}
 .story-portrait,.scene-story[data-kind=reward] .story-portrait{width:72px;height:72px}
 .story-effects{top:auto;bottom:0;height:auto;aspect-ratio:1200/760}
}