/* v80: shared mobile-first composition. Portraits keep intrinsic proportions. */
:root{--dialogue-space:clamp(120px,calc(100dvh - var(--dialogue-box-height)),540px)}
#story-root .story-portrait-transform,#world-root.world-story-scene :is(#world-portrait,#world-portrait-peer){height:calc(var(--dialogue-space) * 2.85);top:0;bottom:auto;width:auto;max-width:none;max-height:none;transform:translateX(-50%);object-fit:contain;object-position:center top;opacity:1;background:none;filter:none}
#story-root .story-portrait-transform{transition:filter .15s}
#story-root .story-portrait-img{height:100%;width:auto;max-width:none}
#story-root .story-portrait[data-character^=npc_] .story-portrait-transform,#story-root .story-portrait[data-character^=zect_] .story-portrait-transform,#world-root.world-story-scene :is(#world-portrait,#world-portrait-peer)[data-portrait^=npc_]{height:calc(var(--dialogue-space) * 1.65)}
#story-root .story-portrait[data-character=juka] .story-portrait-transform{height:calc(var(--dialogue-space) * 2.65)}
#story-root.story-portraits-solo .story-portrait{--portrait-x:50%}
#story-root .story-portrait-left{--portrait-x:28%}#story-root .story-portrait-right{--portrait-x:72%}
#story-root .story-portrait-focus-inactive{opacity:1;filter:brightness(.78)}
#story-root .story-portrait-focus-narration{opacity:1;filter:none}
#world-root.world-story-scene :is(#world-portrait,#world-portrait-peer){position:absolute;left:50%;margin:0;pointer-events:none;z-index:2}
#world-root.world-story-scene :is(#world-portrait,#world-portrait-peer)[data-portrait^=ryuga_]{height:calc(var(--dialogue-space) * 1.13)}
#world-root.world-story-scene :is(#world-portrait,#world-portrait-peer):is([data-portrait^=akihiro_],[data-portrait^=shino_]){height:calc(var(--dialogue-space) * 1.15)}
#world-root.world-story-scene :is(#world-portrait,#world-portrait-peer)[data-portrait^=mikazuki_]{height:calc(var(--dialogue-space) * 1.25)}
#world-root.world-story-scene :is(#world-portrait,#world-portrait-peer)[data-portrait^=orga_]{height:calc(var(--dialogue-space) * 1.34)}
#world-root.world-story-scene.world-dialogue-duet :is(#world-portrait,#world-portrait-peer)[data-side=left]{left:28%}
#world-root.world-story-scene.world-dialogue-duet :is(#world-portrait,#world-portrait-peer)[data-side=right]{left:72%}
#world-root.world-story-scene :is(#world-portrait,#world-portrait-peer)[data-speaking=false]{filter:brightness(.78);opacity:1}
#world-root :is(#world-portrait,#world-portrait-peer)[hidden]{display:none}
#world-root.build-transforming :is(#world-portrait,#world-portrait-peer){visibility:hidden}
/* All transformation art and effects use the same visible scene rectangle. */
#world-root .build-cinema-scene{bottom:var(--dialogue-box-height);overflow:hidden}
#world-root .build-cinema-sento{left:50%;top:0;bottom:auto;height:285%;width:auto;max-width:none;max-height:none;object-fit:contain}
#world-root .build-cinema-suit,#world-root .build-armor{left:50%;top:0;bottom:auto;height:250%;width:auto;max-width:none;max-height:none;object-fit:contain}
#world-root .build-cinema-driver{inset:0;width:100%;height:100%;object-fit:contain}
#world-root .build-pipe{top:3%;bottom:0;width:30%}
#world-root .build-pipe.red{left:18%}#world-root .build-pipe.blue{right:18%}
#world-root .build-cinema-ring{width:auto;height:72%;left:50%;top:14%;transform:translateX(-50%) rotate(var(--build-rotation));aspect-ratio:1}
#world-root .build-transformation[data-phase=frame] .build-armor{opacity:0}
#world-root .build-transformation[data-phase=assemble] .build-cinema-sento{opacity:0}
#world-root .build-armor.red{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}
#world-root .build-armor.blue{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}
#world-root .build-transformation:is([data-phase=bottles],[data-phase=match],[data-phase=ready],[data-phase=crank]) .build-cinema-sento{opacity:0}
@media(orientation:landscape) and (max-height:540px){
 :root{--dialogue-box-height:clamp(106px,34dvh,150px)}
 #world-root:not(.world-story-scene){padding:8px max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;overflow:hidden}
 body:has(#tester-menu) #world-root:not(.world-story-scene){padding-top:42px}
 #world-root:not(.world-story-scene) .world-header{flex-direction:row;align-items:center;gap:6px;flex:none;padding-right:64px}
 #world-root:not(.world-story-scene) .world-header h1{font-size:16px;letter-spacing:0;margin:0}
 #world-root:not(.world-story-scene) .world-eyebrow,#world-root:not(.world-story-scene) #world-save,#world-root:not(.world-story-scene) #world-stats{display:none}
 #world-root:not(.world-story-scene) .world-tools{padding-right:0;gap:4px;flex-wrap:nowrap}
 #world-root:not(.world-story-scene) .world-tools button{font-size:11px;padding:4px 6px;min-height:32px}
 #world-root:not(.world-story-scene) #world-regions{flex-wrap:nowrap;margin:4px 0;gap:6px;flex:none}
 #world-root:not(.world-story-scene) #world-regions button{min-height:32px;padding:3px 10px;font-size:12px}
 #world-root:not(.world-story-scene) .world-layout{flex:1;min-height:0;width:100%;grid-template-columns:minmax(0,1.9fr) minmax(190px,1fr);gap:10px;margin:0}
 #world-root:not(.world-story-scene) .world-map{min-height:0;display:flex;flex-direction:column}
 #world-root:not(.world-story-scene) .world-map-heading{padding:3px 9px;flex:none}
 #world-root:not(.world-story-scene) .world-map-heading h2{font-size:13px}
 #world-root:not(.world-story-scene) #world-region-sub,#world-root:not(.world-story-scene) .atlas-preview{display:none}
 #world-root:not(.world-story-scene) #world-terrain{flex:1;height:auto!important;min-height:0;margin:0 20px;aspect-ratio:auto}
 #world-root:not(.world-story-scene) .world-map-legend{padding:3px 7px;font-size:8px!important;flex:none}
 #world-root:not(.world-story-scene) .world-detail{padding:10px;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
 #world-root:not(.world-story-scene) #world-heading{font-size:16px;margin:5px 0}
 #world-root:not(.world-story-scene) #world-message{font-size:12px;min-height:0;line-height:1.5;margin:5px 0}
 #world-root:not(.world-story-scene) #world-actions button{font-size:12px;min-height:36px;padding:4px 8px}
 #world-root .atlas-node{gap:0;transform:translate(-50%,-18px)}
 #world-root .atlas-pin{width:26px;height:26px;font-size:15px}
 #world-root .atlas-label{font-size:9px;padding:1px 3px}
 #world-root .atlas-here{font-size:8px;padding:0 3px}
 #world-root.world-story-scene .world-detail{padding:6px max(16px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 #world-root.world-story-scene #world-heading{font-size:17px;line-height:1.2;margin:2px 0}
 #world-root.world-story-scene #world-message{font-size:14px;line-height:1.45;margin:3px 0}
 #world-root.world-story-scene #world-actions button{min-height:32px;font-size:12px;padding:3px 8px}
}
/* Use transform instead of the newer standalone scale property on Safari. */
.unit[data-sprite-motion=idle]:not(.fx-shake):not(.fx-lunge-go):not(.fx-lunge-back) .unit-sprite{animation:mobile-idle-breath 2.8s ease-in-out infinite;transform-origin:50% 100%}
@keyframes mobile-idle-breath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.008,1.024)}}
@media(prefers-reduced-motion:reduce){.unit[data-sprite-motion=idle] .unit-sprite{animation:none!important}}
@media(min-width:701px) and (min-height:541px){
 #world-root:not(.world-story-scene){display:flex;flex-direction:column;overflow:hidden}
 #world-root:not(.world-story-scene) .world-layout{flex:1;width:100%;min-height:0}
 #world-root:not(.world-story-scene) .world-map{display:flex;flex-direction:column;min-height:0}
 #world-root:not(.world-story-scene) #world-terrain{flex:1;height:auto;min-height:0}
 #world-root:not(.world-story-scene) .world-detail{overflow-y:auto;min-height:0}
}
#world-root:not(.world-story-scene) #world-nodes{inset:10px 0 28px}
#world-root:not(.world-story-scene) #world-terrain svg{top:10px;height:calc(100% - 38px)}