/* Size interface to its actual framed world, including a portrait frame on desktop. */
#game{container-type:inline-size;container-name:world}
/* Hide scenic overlays as well as the header when the player requests a clean view.
   Dialogue, pause and battle controls keep their own readable modal context. */
body.immersive #reticle,body.immersive #stamina,body.immersive #interact,
body.immersive .episode-prompt,body.immersive .episode-chapter{opacity:0;pointer-events:none}
@media(min-aspect-ratio:1/1){
 .original-framing #original-development-note{max-width:min(340px,calc((100vw - 66.6666667dvh)/2 - 16px));white-space:normal}
}
@container world (max-width:650px){
 header{padding:18px 16px;gap:12px;align-items:center}
 .brand{font-size:11px;letter-spacing:.12em;gap:7px;line-height:1.35;flex:1;min-width:0}
 .brand svg{width:22px;height:30px;flex-shrink:0}
 .brand small{display:none}
 .actions{gap:4px;flex-shrink:0}
 .actions button{width:40px;height:44px;min-height:44px}
 .compass{top:78px;width:185px}
 .compass small{font-size:10px;letter-spacing:.09em}
 .controls{left:16px;right:16px;bottom:18px;gap:7px 14px;justify-content:center;flex-wrap:wrap;font-size:11px}
 .controls i{display:none}
 .controls span{white-space:nowrap}
 .controls kbd{font-size:11px;min-width:16px;padding:2px 3px}
 .bottom-right{display:none}
 #journey{left:20px;bottom:90px;right:20px}
 #journey h2{font-size:25px;margin-top:7px}
 #intro{left:24px;right:24px;bottom:120px;width:auto;transform:none;text-align:center}
 #intro .chapter{justify-content:center}
 #intro h1{font-size:clamp(42px,13cqw,64px)}
 #intro p{font-size:16px;line-height:1.4}
 #intro .primary{margin-left:auto;margin-right:auto;min-width:220px}
 .intro-hint{font-size:10px;letter-spacing:.1em;line-height:1.6}
 #notice{top:136px;font-size:12px;max-width:calc(100% - 32px)}
 #episode-dialogue{left:16px;right:16px;width:auto;transform:none;bottom:20px;padding:20px 22px}
 #episode-dialogue h2{font-size:29px}
 #episode-dialogue p{font-size:17px;line-height:1.45}
 .player-status{top:17px;left:14px;gap:7px}
 .player-gauges{width:155px}
 .status-sigil{width:35px;height:54px}
 .boss-health{left:8%;width:84%;bottom:23%}
 .battle-hints{bottom:18%;gap:8px;font-size:9px;white-space:normal;justify-content:center;flex-wrap:wrap;width:90%}
 .equipment{left:18px;bottom:20px;transform:scale(.72);transform-origin:bottom left}
 .combat-currency{right:16px;bottom:22px;width:118px}
 /* The world can be portrait inside a wide desktop window. Battle layout must
    follow this container, overriding the legacy viewport landscape rule. */
 #memory-battle{display:flex;flex-direction:column;grid-template-columns:none;grid-template-rows:none}
 .memory-heading{position:relative;left:auto;right:auto;top:auto;flex-shrink:0;padding:12px 16px 6px;min-height:68px;gap:10px}
 .memory-heading small{font-size:10px;letter-spacing:.14em}
 .memory-heading h2{font-size:20px;max-width:none;line-height:1.2;margin:5px 0}
 .memory-heading button{flex-shrink:0;min-width:46px;min-height:46px;padding:9px}
 #memory-scene{width:100%;height:auto;min-width:0;min-height:120px;flex:1 1 180px;object-fit:contain}
 .memory-ui{flex:0 0 auto;min-height:0;max-height:calc(100% - 190px);overflow:auto;border-left:0;border-top:2px solid #a98e6088;padding:12px 14px max(14px,env(safe-area-inset-bottom))}
 .memory-gauges{gap:7px;flex-direction:column}
 .memory-gauges label{font-size:13px}
 .memory-gauges meter{max-width:none;height:15px}
 #memory-log{font-size:15px;line-height:1.4;margin:10px 0 5px;min-height:21px}
 #memory-intent{font-size:13px;line-height:1.4}
 #memory-options{gap:7px;margin-top:10px}
 #memory-options button{flex:1 1 105px;min-width:105px;min-height:46px;font-size:14px;padding:9px}
 #memory-touch{height:96px;gap:14px}
 #memory-touch span{font-size:13px;max-width:220px}
 #memory-pad{width:96px;height:96px;flex-shrink:0}
 #memory-pad i{left:29px;top:29px}
}
@container world (max-width:390px){
 header{padding:12px;gap:4px}
 .brand{font-size:10px;letter-spacing:.05em;gap:5px}
 .brand svg{width:18px;height:26px}
 .actions{gap:2px}
 .actions button{width:34px;height:44px}
 .actions svg{width:17px;height:17px}
 .compass{top:69px}
 #intro{left:18px;right:18px;bottom:112px}
 #journey h2{font-size:23px}
 .controls{left:12px;right:12px;gap:6px 10px}
}
@media(pointer:coarse){
 @container world (max-width:650px){
  .controls{display:none}
  #journey{bottom:225px;pointer-events:none}
 }
}