/* Shared viewport shell; the teacher site has no dependency on this file. */
.stage.fullscreen-stage{width:100%;max-width:none;min-height:100vh;min-height:100dvh;aspect-ratio:auto;box-shadow:none}
.fullscreen-stage>.view{animation:home-arrive .35s ease-out}
.fullscreen-stage .scene{object-fit:cover}
.fullscreen-stage .map-viewport{position:absolute;inset:0;overflow:auto;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fullscreen-stage .map-viewport::-webkit-scrollbar{display:none}
.fullscreen-stage .map-canvas{position:relative;isolation:isolate;container-type:inline-size;width:max(100%,177.7778dvh);height:max(100%,56.25vw);aspect-ratio:16/9}
.fullscreen-stage .map-canvas .scene{object-fit:cover}
/* Percentage hotspots and their background share the same 16:9 map canvas. */
.fullscreen-stage .heading{font-size:clamp(16px,1.65cqw,30px);left:22%;right:22%}
.fullscreen-stage .heading small{font-size:clamp(11px,.78cqw,16px)}
.fullscreen-stage .back{width:clamp(100px,14.5%,250px);max-width:28%;z-index:8}
.fullscreen-stage .notice{font-size:clamp(11px,1.02cqw,18px);max-width:36%;z-index:3}
.fullscreen-stage .notice strong{font-size:clamp(13px,1.3cqw,23px)}
.fullscreen-stage .corner-note{font-size:clamp(11px,.9cqw,16px)}
.fullscreen-stage .map-pan-hint{display:none;position:absolute;left:50%;top:14%;translate:-50% 0;padding:7px 12px;border-radius:20px;background:#fff9e8e6;color:#67482d;font-size:clamp(11px,1cqw,16px);pointer-events:none;z-index:3;white-space:nowrap}
.fullscreen-stage .learning-layout{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(100%,177.7778dvh);aspect-ratio:16/9;container-type:inline-size}
.fullscreen-stage .book-trigger{width:min(42%,74.6667dvh)}
.fullscreen-stage .book-caption{left:50%;top:78%;translate:-50% 0;white-space:nowrap;font-size:clamp(12px,1.15cqw,22px)}
.fullscreen-stage .difficulty-grid{width:min(86%,128dvh)}
.fullscreen-stage #flash-level.shop-card-screen .vocab-card{width:min(74%,148dvh)}
.fullscreen-stage .coming-card{left:50%;top:50%;translate:-50% -50%;width:min(84%,640px);padding:clamp(24px,4%,64px)}
.fullscreen-stage .coming-card .eyebrow{font-size:clamp(11px,.9cqw,16px)}
.fullscreen-stage .coming-card h1{font-size:clamp(24px,2.5cqw,44px)}
.fullscreen-stage .coming-card p{font-size:clamp(16px,1.2cqw,22px)}
.fullscreen-stage .coming-card .soon{font-size:clamp(13px,1cqw,18px)}
@media(max-aspect-ratio:4/3),(min-aspect-ratio:2/1){.fullscreen-stage .map-pan-hint{display:block}}
@media(max-width:700px) and (orientation:portrait){
 .stage.fullscreen-stage{aspect-ratio:auto}
 .fullscreen-stage .heading{left:12%;right:12%;font-size:4cqw}
 .fullscreen-stage .heading small{font-size:2.6cqw}
 .fullscreen-stage .notice{max-width:52%;bottom:9%}
 .fullscreen-stage .corner-note{max-width:65%;text-align:right}
 .fullscreen-stage .back{width:28%;max-width:150px}
 .fullscreen-stage .map-pan-hint{top:15%}
 .fullscreen-stage .difficulty-grid{width:96%}
 .fullscreen-stage .book-trigger{width:75%}
 .fullscreen-stage .book-caption{top:68%}
 .fullscreen-stage #flash-level.shop-card-screen .vocab-card{width:80%}
 .fullscreen-stage .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(0,1fr);gap:2cqw}
 .fullscreen-stage .shop-pagination{left:35%;width:30%;bottom:4%}
 .fullscreen-stage .shop-card-controls .card-prev,.fullscreen-stage .shop-card-controls .card-next{height:9%}
 .fullscreen-stage .shop-card-controls .speak-button{height:6%;bottom:8%}
}

/* Only Picnic Adventure maps: contain the full 16:9 coordinate system in both axes.
   Background, percentage platforms and chrome scale together; other maps still pan. */
.stage.fullscreen-stage.adventure-map-stage{
 height:100vh;height:100dvh;min-height:0;
 background:radial-gradient(ellipse at center,#d8e2bd,#9aad86);
}
.adventure-map-stage>.view{
 inset:auto;left:50%;top:50%;translate:-50% -50%;
 width:min(100%,177.7777777778vh);width:min(100%,177.7777777778dvh);
 height:auto;aspect-ratio:16/9;container-type:inline-size;
}
.adventure-map-stage .map-viewport{overflow:visible;overscroll-behavior:auto}
.adventure-map-stage .map-canvas{width:100%;height:100%;aspect-ratio:16/9}
.adventure-map-stage .map-canvas .scene{object-fit:contain}
.adventure-map-stage .map-pan-hint{display:none}
/* Visible glyphs and focus rings stay within the fitted image frame. */
.adventure-map-stage .step-platform-number{font-size:2.85cqw}

/* Decorative outpainted scenery, restricted to the adventure overview.
   The existing fitted view and all its percentage hit areas remain untouched. */
.stage.adventure-map-stage:has(>.view[aria-label="adventure"])::before,
.stage.adventure-map-stage:has(>.view[aria-label="adventure"])::after{
 content:"";position:absolute;top:0;bottom:0;
 width:max(0px,calc((100% - 177.7777777778vh)/2));
 width:max(0px,calc((100% - 177.7777777778dvh)/2));
 pointer-events:none;user-select:none;z-index:-1;
 background-repeat:no-repeat;background-size:cover;
}
.stage.adventure-map-stage:has(>.view[aria-label="adventure"])::before{
 left:0;background-image:url('assets/adventure-extension-left.webp?v=3540eb02d128047bf558c1ddf26599c9afecbdbf5683a8aa269ae2f86fca8c76');background-position:right center;
}
.stage.adventure-map-stage:has(>.view[aria-label="adventure"])::after{
 right:0;background-image:url('assets/adventure-extension-right.webp?v=cf0d5b1abfb13ef15aebba267584d22d3a8d20bfbdcd1a7a96a416ab1c18e093');background-position:left center;
}