/* Shared player viewport: layout in CSS pixels, vector controls, original artwork. */
:root{--play-height:100dvh;--play-top:0px;--play-bottom-gap:0px;--play-test-dock:0px}
.play-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important}
.play-ready .story-experience{top:var(--play-top);bottom:auto;height:calc(var(--play-height) - var(--play-test-dock));max-height:calc(var(--play-height) - var(--play-test-dock))}
.play-ready .story-experience[hidden]{display:none!important}
.play-ready .play-icon{display:inline-grid;place-items:center;flex:none}
.play-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.play-ready .play-tools{position:relative;flex:none;margin:0}
.play-tools>summary{display:grid;place-items:center;list-style:none;cursor:pointer;min-width:48px;min-height:48px;padding:8px;border:1px solid #ffffff4d;border-radius:50%;background:#244450bd;color:#fff6e2;touch-action:manipulation}
.play-tools>summary::-webkit-details-marker{display:none}
.play-tools-content{position:absolute;z-index:60;right:0;top:calc(100% + 8px);width:min(340px,calc(100vw - 24px));max-height:calc(var(--play-height) - 130px);overflow:auto;padding:14px;border:1px solid #ffffff4d;border-radius:18px;background:#163441f5;color:#fff7e7;box-shadow:0 12px 30px #04192566}
.play-tools-content>button{width:100%;min-height:48px;margin:0 0 10px}
.play-tools-content .scene-ambience{padding:0!important;display:flex!important;position:static;flex-wrap:wrap;justify-content:flex-start}
.play-tools-content .scene-reader{position:static!important;margin:10px 0 0!important;max-height:none!important}
.play-tools-content .scene-recap-wrap{position:static;padding:0;margin:10px 0;max-width:none;text-align:left}
.play-tools-content .scene-recap-wrap button{width:100%;min-height:48px;font-size:14px}
.play-tools-content :is(button,summary){min-height:48px}

/* A task gets the remaining viewport, instead of several overlapping vh panels. */
.play-ready .story-experience.task-open{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);gap:0}
.play-ready .task-open>.scene-header{grid-row:1;width:min(100%,960px);max-width:960px;padding:6px 12px;margin:0 auto;min-width:0;z-index:41}
.play-ready .task-open>.scene-preview-slot{grid-row:2;width:min(100%,860px);max-width:860px;min-height:0;max-height:28vh;overflow:auto;margin:0 auto}
.play-ready .task-open>.scene-task-drawer{position:relative;grid-row:3;inset:auto!important;bottom:auto!important;height:auto!important;max-height:none!important;min-height:0;width:min(100%,860px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border-radius:18px 18px 0 0;margin:0 auto;align-self:stretch;animation:none}
.play-ready .scene-task-drawer>header{padding:8px 12px;min-width:0;font:13px/1.4 system-ui,sans-serif;gap:10px}
.play-ready .scene-task-drawer>header>span{min-width:0;max-width:none;font:inherit;overflow-wrap:anywhere}
.play-ready .scene-task-drawer>header button{flex:none;min-height:48px;max-width:125px}
.play-ready .scene-task-slot{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:10px 0 20px;padding:0}
.play-ready .scene-task-slot>.story-panel{padding:12px!important;min-width:0!important}
.play-ready .task-open>.scene-narration,.play-ready .task-open>.senior-audio,.play-ready .task-open>.scene-recap-wrap{display:none!important}
.play-ready .task-open>.fairytale-menu{position:static;grid-row:4;left:auto;bottom:auto;transform:none;justify-self:center;align-self:end;width:min(100%,420px);margin:0;padding:5px 10px;z-index:30}
.play-ready .fairytale-menu-actions{gap:5px}
.play-ready .fairytale-menu .fairytale-menu-button{flex-basis:52px;min-width:48px;min-height:52px;width:52px;height:52px}
.play-ready .fairytale-menu{width:min(100%,420px);bottom:calc(max(8px,env(safe-area-inset-bottom,0px)) + var(--play-bottom-gap))}
.play-ready .scene-dialogue{max-height:calc(var(--play-height) - 150px);overflow:auto;overscroll-behavior:contain}
.play-ready .scene-chapter-list{max-height:calc(var(--play-height) - 150px)}
.play-ready .scene-preview-slot .preview-controls{margin:4px 8px;max-height:25vh;overflow:auto}

/* Test tools occupy a real row. Expanding them never covers a game button. */
.play-ready #testLabControls{position:relative!important;inset:auto!important;z-index:2!important;max-height:min(34vh,260px)!important;margin:0!important;border-radius:0!important;box-shadow:none!important;padding:5px 12px!important;font:13px/1.5 system-ui,sans-serif!important;overflow:auto!important;background:#fff9e9;color:#244d3c;border:1px solid #c7d8ba}
.play-ready #testLabControls>details>summary{min-height:44px!important;display:flex;align-items:center;cursor:pointer}
.play-ready #testLabControls :is(button,select,a){min-height:44px;max-width:100%;font-size:13px;white-space:normal;overflow-wrap:anywhere}
.play-ready #testLabControls input{max-width:100%}
.play-ready #testLabControls label{display:block;margin:10px 0}
.play-ready #testLabControls details[open]{padding-bottom:8px}

/* High-priority foreground colors beat the generic paper-panel rule. */
body.play-ready .echo-task{margin:8px 0;padding:12px;color:#eff6ef}
body.play-ready .echo-task .echo-progress{color:#f1f7ee;margin:8px 0;font-size:16px;line-height:1.4}
body.play-ready .echo-task .echo-message{color:#f4f8ef;background:#103341;margin:9px 0 0;padding:10px;line-height:1.5}
.play-task-help{margin:6px 0;font:14px/1.5 system-ui,sans-serif}
.play-task-help>summary{min-height:44px;padding:10px 0;cursor:pointer;color:#29474c}
.play-ready .echo-playback{display:flex;gap:8px;margin:8px 0}
.play-ready .echo-playback button{flex:1;min-height:48px}
.play-ready .echo-playback:empty{display:none}
.play-ready .echo-crystals{width:min(100%,330px);gap:9px;margin:12px auto 8px}
.play-ready .echo-task .echo-crystals button{min-height:clamp(78px,calc(var(--play-height)*.145),120px);padding:8px;gap:4px}
.play-ready .echo-crystal-art{width:clamp(40px,8vh,62px);height:clamp(40px,8vh,62px)}
.play-ready .echo-guide-figure{height:42px;width:42px;margin:4px auto 8px}
.play-ready .echo-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.play-ready .echo-actions button{min-height:48px;margin:0!important;padding:8px;font-size:13px;line-height:1.3}
.play-ready .echo-controls{gap:8px;justify-content:space-between}
.play-ready .echo-controls button{font-size:12px;padding:8px;min-height:48px}
.play-ready .echo-hints{margin:8px 0}
.play-ready .scene-task-slot :is(.choice,.memory-card,.sequence-option,.secondary-button,.continue-button,.answer-form button){min-height:48px}
.play-ready .scene-task-slot :is(.slide-board,.memory-grid,.sequence-options,.answer-form,.task-visual){max-width:100%;min-width:0}
.play-ready .scene-task-slot input{max-width:100%;min-width:0;font-size:16px}
.play-ready .play-final-story{display:block;width:100%;min-height:48px;margin:14px 0 0;font-size:15px}
html.comfort-high body.play-ready .echo-task{background:#fff;color:#111;border:2px solid #163442}
html.comfort-high body.play-ready.rpg-ui .echo-task :is(.echo-progress,.echo-message){color:#111;background:#e8eeea}

/* Solo tasks use the same stage without changing their run or event handlers. */
html.senior-edition body.play-ready .scene-task-slot .question{font-size:22px;line-height:1.5}
html.play-task-open{overflow:hidden}
.play-task-frame{position:fixed;z-index:85;top:var(--play-top);left:0;right:0;height:calc(var(--play-height) - var(--play-test-dock));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;background:#173440;color:#f5f8f0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);isolation:isolate}
.play-task-frame[hidden]{display:none!important}
.play-task-frame>header{grid-row:1}
.play-task-frame>:is(#advStatus,#previewControls){grid-row:2;position:static;max-height:24vh;overflow:auto;margin:0}
.play-task-frame>.play-task-scroll{grid-row:3}
.play-task-frame>#testLabControls{grid-row:4}
.play-task-frame>.fairytale-menu{grid-row:5}
.play-task-scroll>.story-panel{min-width:0;max-width:none;width:100%;margin:0;padding:12px;box-shadow:none}
.play-task-scroll>.story-panel :is(.story-heading,.story-text,.story-footer,.world-return){display:none}
.play-task-scroll :is(button,.capture-button){min-height:48px}
.play-task-frame>#advStatus{background:#173440;color:#fff4d7}
.scene-task-slot .play-enter-focus{display:none}
.play-task-frame>header{display:flex;align-items:center;gap:12px;width:min(100%,860px);margin:auto;padding:8px 12px;min-width:0}
.play-task-frame>header strong{flex:1;min-width:0;font:17px/1.3 Georgia,serif;overflow-wrap:anywhere;color:#fff5df}
.play-task-frame>header button{min-height:48px;font-size:13px;padding:8px 12px}
.play-task-frame>#advStatus{width:min(100%,860px);margin:0 auto;padding:0 12px;font-size:13px;color:#fff4d7}
.play-task-scroll{overflow:auto;min-height:0;overscroll-behavior:contain;width:min(100%,860px);margin:0 auto;background:#f6f6ec;color:#29444a;padding:12px;-webkit-overflow-scrolling:touch;scroll-padding:12px}
.play-task-scroll #advTask{margin:0;padding:12px;border-radius:14px;background:#f6f6ec}
.play-task-scroll #advComplete{width:100%;margin:12px 0;min-height:48px}
.play-task-frame .fairytale-menu{position:static;transform:none;left:auto;bottom:auto;width:min(100%,420px);margin:0 auto;padding:5px 10px}
.play-task-frame .play-enter-focus{display:none}
.play-enter-focus{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin:0 0 12px;font-size:14px}
.play-ready .adv-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.play-ready .scene-header>.profile-toggle{flex:0 0 48px;min-width:48px;width:48px;min-height:48px}
@media(max-width:760px){
 .play-ready .scene-header{gap:6px;flex-wrap:nowrap;min-width:0}
 .play-ready .scene-header>span{flex:1;min-width:0;text-align:center;font-size:11px;letter-spacing:0}
 .play-ready .scene-header>button{min-width:48px;width:48px;height:48px;min-height:48px;padding:8px;flex:none}
 .play-ready .scene-header .play-control-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .play-ready .scene-task-slot>.story-panel{padding:10px!important}
 .play-ready .scene-task-slot .question{font-size:17px;line-height:1.5}
 .play-ready .puzzle-area:has(.echo-task)>.question{font-size:15px;line-height:1.4;margin:8px 0}
 .play-ready .puzzle-area:has(.echo-task){padding:10px}
 .play-ready .puzzle-area:has(.echo-task)>.mini-progress{margin:8px 0}
 .play-ready .scene-task-slot .task-top{margin-bottom:10px}
 .play-ready .echo-crystals{width:min(100%,300px)}
 .play-ready .echo-task .echo-crystals button{min-height:80px;padding:6px}
 .play-ready .echo-crystal-art{width:clamp(40px,6vh,50px);height:clamp(40px,6vh,50px)}
 body.play-ready .echo-task .echo-progress{margin:4px 0}
 .play-task-scroll{padding:8px}
 .play-task-frame>header strong{font-size:16px}
}
@media(max-height:550px) and (min-width:540px){
 .play-ready .story-experience.task-open{grid-template-columns:minmax(0,1fr) 72px;grid-template-rows:auto auto minmax(0,1fr)}
 .play-ready .task-open>.scene-header,.play-ready .task-open>.scene-preview-slot{grid-column:1/-1}
 .play-ready .task-open>.scene-task-drawer{grid-column:1;grid-row:3;width:100%}
 .play-ready .task-open>.fairytale-menu{grid-column:2;grid-row:3;align-self:stretch;min-height:0;max-height:100%;overflow-y:auto;width:72px;padding:4px 6px;overscroll-behavior:contain}
 .play-ready .task-open>.fairytale-menu .fairytale-menu-actions{flex-direction:column;gap:5px}
 .play-ready .echo-task{display:grid;grid-template-columns:minmax(180px,1fr) minmax(170px,1fr);gap:8px;align-items:start}
 .play-ready .echo-controls,.play-ready .echo-progress{grid-column:1/-1}
 .play-ready .echo-crystals{grid-column:1;grid-row:3/7;margin:0 auto;max-width:280px}
 .play-ready .echo-playback{grid-column:2}
 .play-ready .echo-guide-figure{display:none}
 .play-ready .echo-actions,.play-ready .echo-hints,.play-ready .echo-message{grid-column:2}
 .play-ready .echo-task .echo-crystals button{min-height:80px}
}
/* Story and task windows keep the map visible behind their frosted surfaces. */
body.map-journey .story-experience{z-index:95;background:#092b3c66;backdrop-filter:blur(5px)}
body.map-journey .story-experience::before{display:none}
body.map-journey .story-experience:not(.task-open){display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body.map-journey .story-experience>.scene-header{grid-row:1;width:min(100%,860px);max-width:860px;padding:6px 12px;z-index:41;min-height:60px}
body.map-journey .story-experience:not(.task-open)>.scene-stage{inset:72px max(8px,calc((100% - 720px)/2)) auto;height:160px;max-width:720px;border-radius:22px 22px 0 0;bottom:auto;z-index:1}
body.map-journey .story-experience:not(.task-open)>.scene-narration{position:relative;grid-row:2;inset:auto;bottom:auto;align-self:start;margin:170px auto 0;width:min(720px,calc(100% - 16px));max-width:720px;max-height:calc(var(--play-height) - 310px);padding:18px 20px;border-radius:0 0 22px 22px;background:linear-gradient(125deg,#f9f6e9f7,#e9f2ebf7);color:#27464b;box-shadow:0 10px 32px #062b4055;overflow:auto}
body.map-journey .scene-narration :is(h1,p){color:#27464b}
body.map-journey .scene-narration h1{font:clamp(24px,4vw,34px)/1.15 Georgia,serif;letter-spacing:0}
body.map-journey .scene-narration .scene-story-more{color:#294d52}
body.map-journey .story-experience.task-open>.scene-stage{display:none}
body.map-journey .story-experience>.fairytale-menu{position:static;grid-row:3;transform:none;left:auto;bottom:auto;margin:0 auto;padding:5px 10px;width:min(100%,420px)}
body.map-journey .story-experience.task-open>.fairytale-menu{grid-row:4}
body.map-journey .story-experience>.scene-preview-slot:has(>*:not([hidden])){position:absolute;top:62px;left:8px;right:8px;max-height:25vh;margin:auto;overflow:auto;z-index:42}
body.map-journey .story-experience.task-open>.scene-preview-slot{position:relative;inset:auto;grid-row:2}
body.map-journey .story-experience .scene-dialogue{max-height:calc(var(--play-height) - 210px)}
body.map-journey .scene-narration :is(.scene-ambience,.scene-reader) button{color:#f5f4e6}
@media(max-height:550px) and (min-width:540px){body.map-journey .story-experience:not(.task-open)>.scene-stage{height:95px}body.map-journey .story-experience:not(.task-open)>.scene-narration{margin-top:105px;max-height:calc(var(--play-height) - 230px)}body.map-journey .story-experience.task-open>.fairytale-menu{grid-row:3}}

/* A test dock reduces the usable stage, so art fitting and hitboxes share its bounds. */
body.play-test-docked.map-journey #gameView .world-shell{height:calc(var(--play-height) - var(--play-test-dock))!important}
body.play-test-docked .play-task-frame{height:calc(var(--play-height) - var(--play-test-dock))}
body.play-test-docked:not(.map-journey)>.fairytale-menu{bottom:calc(max(8px,env(safe-area-inset-bottom)) + var(--play-bottom-gap) + var(--play-test-dock))}