/* Phone layout: navigation, portrait and controls each have their own space. */
@media(max-width:600px){
 html .topbar,html[data-season] .topbar,html .topbar.scrolled{position:relative;top:auto;left:auto;height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-content:start;padding:12px 18px;background:var(--paper,#160f20);backdrop-filter:none;border-bottom:1px solid var(--line)}
 html .topbar .wordmark{grid-column:1;grid-row:1;align-self:center;font-size:25px}
 html .topbar .world-card{grid-column:2;grid-row:1/3;align-self:center;justify-self:end;margin:0;max-width:168px;padding:6px 8px;gap:7px;transform:rotate(-2deg)}
 html .topbar .world-card .card-info strong{font-size:10px}
 html .topbar .world-card .card-info small{display:none}
 html .topbar .world-card .card-info>span{font-size:9px}
 html .topbar .world-card .card-monogram{width:27px;height:27px;font-size:23px}
 html .topbar .language-switch{grid-column:1;grid-row:2;justify-self:start;margin:0}
 html .topbar .language-switch button{min-height:44px;min-width:44px;padding:8px}
 html .topbar nav{grid-column:1/-1;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;justify-self:stretch;gap:0 14px;width:100%;margin:0;font-size:11px}
 html .topbar nav>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 0}
 html .topbar nav .private-lab-link{flex-basis:100%;min-height:44px;margin-top:4px}
 html .topbar>.edition{display:none}
 html .story,html.reduced .story{height:auto}
 html .story .stage,html.reduced .story .stage{position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'eyebrow eyebrow' 'title title' 'portrait portrait' 'design code' 'status status' 'sound sound' 'thought thought' 'play play' 'footer footer' 'cue cue';height:auto;min-height:0;overflow:hidden;padding-bottom:12px}
 html .story .stage .hero-intro{display:contents;position:static;max-width:none}
 html .story .hero-intro>.eyebrow{grid-area:eyebrow;padding:20px 20px 0;font-size:8px;line-height:1.6;letter-spacing:1px}
 html .story .hero-intro h1{grid-area:title;position:static;margin:10px 20px 20px;font-size:18px;line-height:1.5;letter-spacing:-.4px}
 html .story .stage>.portrait{grid-area:portrait;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.12;min-height:300px;max-height:480px;overflow:hidden}
 html .story .stage .portrait img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;transform:none;mask-image:none;-webkit-mask-image:none}
 html .story .stage .portrait.gesture-wide img{object-fit:contain}
 html .story .stage>.shade,html .story .stage>.season-decor,html .story .stage>.season-note{display:none}
 html .story .stage>.discipline{position:static;inset:auto;transform:none;width:auto;margin:0;padding:15px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-shadow:none;align-self:stretch;z-index:1}
 html .story .stage>.design{grid-area:design;text-align:left}
 html .story .stage>.code{grid-area:code;text-align:right}
 html .story .stage .discipline .micro{display:none}
 html .story .stage .discipline .big{font-size:40px;letter-spacing:-2px;line-height:1.15}
 html .story .hero-intro .building-note{grid-area:status;position:static;margin:16px 20px 0;max-width:none;width:auto;padding:7px 10px;font-size:11px;line-height:1.5}
 html .story .hero-intro .sound-controls{grid-area:sound;position:static;justify-self:start;margin:12px 20px;width:auto;max-width:calc(100% - 40px);padding:0 10px 0 4px;gap:12px}
 html .story .sound-controls button{min-height:44px;min-width:90px;font-size:11px}
 html .story .sound-controls input{height:44px;width:120px;max-width:40vw}
 html .story .stage>.thought{grid-area:thought;position:static;inset:auto;transform:none;width:auto;margin:0;padding:8px 20px 16px;text-align:center}
 html .story .thought p{font-size:17px;line-height:1.5;margin:10px 0 0}
 html .story .stage>.play-controls{grid-area:play;position:static;inset:auto;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 20px 14px}
 html .story .play-controls button{min-height:44px;padding:10px 12px;font-size:10px}
 html .story .stage>.story-footer{grid-area:footer;position:static;inset:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px}
 html .story .story-footer .scene-info{position:static;inset:auto;flex-basis:100%;font-size:8px;line-height:1.6}
 html .story .story-footer .scene-controls{position:static;inset:auto;transform:none;display:flex;gap:8px}
 html .story .scene-controls button{width:44px;height:44px}
 html .story .motion-toggle{margin:0 0 0 auto;min-height:44px;padding:9px 12px}
 html .story .stage>.scroll-cue{grid-area:cue;position:static;inset:auto;display:flex;justify-content:space-between;gap:18px;padding:10px 20px;font-size:8px;line-height:1.6}
 html .story .stage>.progress{display:none}
 html[data-mobile-hero-visible="true"] #game-popup{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
}