/* North remains north at every aspect ratio. Landscape chrome uses the sides
   so the route retains its full vertical play area. */
@media (min-aspect-ratio:4/3) {
 .shell .exploration-system .exp-board :is(.exp-terrain,.exp-roads).portrait { display:block; }
 .shell .exploration-system .exp-board :is(.exp-terrain,.exp-roads).landscape { display:none; }
 .shell .exploration-system :is(.exp-tile,.exp-pawn) { left:var(--x); top:var(--y); }
 .shell .exp-app .exploration-system > .exp-map-heading { position:absolute; top:64px; left:12px; right:auto; width:clamp(170px,23vw,280px); margin:0; display:flex; flex-direction:column; gap:8px; }
 body.floating-fullscreen:not(.fullscreen-over-dialog) .shell .exp-app .exploration-system > .exp-map-heading { margin-left:0; }
 .shell .exploration-system .exp-map-title { width:100%; max-width:none; }
 .shell .exploration-system .exp-map-heading .exp-resources { position:static; width:100%; }
 .shell .exp-app .exploration-system > .exp-map-dock { left:auto; right:12px; bottom:12px; width:clamp(170px,23vw,280px); max-width:none; display:flex; flex-direction:column; gap:8px; }
 .shell .exploration-system .exp-party-strip { display:flex; flex-direction:column; width:100%; max-width:none; }
 .shell .exploration-system .exp-party-card { width:100%; }
 .shell .exploration-system .exp-path-controls { display:flex; flex-direction:column; width:100%; }
 .shell .exploration-system .exp-map-heading .exp-resources { flex-wrap:wrap; }
}

/* The HUDs stay real targetable elements in the existing arena. No cloned
   status panels, changed game state, or alternate keyboard target order. */
@media (min-width:700px) and (min-aspect-ratio:4/3) {
 .game-battle .shell { max-width:none; width:100%; }
 .game-battle .battle-layout.battle-system { width:100%; max-width:none; padding-inline:clamp(8px,2vw,32px); }
 .game-battle .battle-system .battle-main { grid-template-columns:minmax(0,1fr)!important; grid-template-rows:minmax(260px,1fr) clamp(400px,46dvh,480px)!important; gap:10px; overflow-y:auto; }
 .game-battle .battle-system .arena-content { display:grid; grid-template-columns:minmax(140px,1fr) minmax(0,4fr) minmax(140px,1fr); grid-template-rows:24px minmax(0,1fr) 42px minmax(0,1fr) 24px; gap:6px 20px; padding:12px; }
 .game-battle .battle-system .arena-content > .hostile { grid-column:1; grid-row:1/6; }
 .game-battle .battle-system .arena-content > .friendly { grid-column:3; grid-row:1/4; }
 .game-battle .battle-system .arena-content > [data-world-key="supports-e"] { grid-column:2; grid-row:1; }
 .game-battle .battle-system .arena-content > [data-world-key="units-e"] { grid-column:2; grid-row:2; }
 .game-battle .battle-system .arena-content > .battle-divider { grid-column:2; grid-row:3; }
 .game-battle .battle-system .arena-content > [data-world-key="units-p"] { grid-column:2; grid-row:4; }
 .game-battle .battle-system .arena-content > [data-world-key="supports-p"] { grid-column:2; grid-row:5; }
 .game-battle .battle-system .arena-content > .turn-controls { grid-column:3; grid-row:4/6; flex-direction:column; justify-content:end; align-items:stretch; }
 .game-battle .battle-system .hero-hud { align-self:start; display:flex; flex-direction:column; align-items:stretch; gap:14px; height:auto; margin:0; padding:16px; }
 .game-battle .battle-system .hero-seal { width:64px; height:64px; min-height:64px; flex-basis:64px; align-self:center; }
 .game-battle .battle-system .hero-heading { display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
 .game-battle .battle-system .hero-heading strong { font-size:18px; white-space:normal; }
 .game-battle .battle-system .hero-heading .hp { font-size:24px; }
 .game-battle .battle-system .hero-health { width:100%; min-height:64px; }
 .game-battle .battle-system .hud-resources { justify-content:center; }
 .game-battle .battle-system .turn-controls .end-turn { min-height:48px; min-width:0; width:100%; font-size:14px; }
 .game-battle .battle-system .turn-controls .stamina-caption { flex:0 0 40px; min-height:40px; }
 .game-battle .battle-system .hand-section { padding:0; grid-template-rows:44px minmax(0,1fr) 44px; gap:2px; min-height:0; }
 .game-battle .battle-system .hand { --hand-card-limit:250; min-height:0; }
 .game-battle .battle-system .hand .battle-card { --tilt:0deg!important; }
 .game-battle .battle-system .support-slot small { font-size:10px; }
 .game-battle .battle-system .unit-caption strong { font-size:14px; }
 .game-battle .battle-system .hand .card-face .card-copy p { font-size:9.5px; line-height:1.3; }
 .game-battle .battle-system .hand .card-face .card-copy strong { font-size:12px; }
 .game-battle .battle-system .selection-help { height:44px; min-height:44px; }
 .game-battle .battle-system .hand-heading > span { font-size:15px; }
}
/* Short landscape keeps readable cards in a horizontally scrollable hand,
   rather than shrinking both the board and text to fit a phone-height window. */
@media (min-width:700px) and (min-aspect-ratio:4/3) and (max-height:650px) {
 .game-battle .battle-system .battle-main { grid-template-rows:minmax(240px,1fr) 400px!important; overflow-y:auto; }
 .game-battle .battle-system .arena-content { grid-template-columns:130px minmax(0,1fr) 130px; gap:4px 8px; padding:6px; }
 .game-battle .battle-system .hero-hud { padding:10px; gap:6px; }
 .game-battle .battle-system .hero-seal { width:44px; height:44px; min-height:44px; flex-basis:44px; }
 .game-battle .battle-system .hero-heading strong { font-size:14px; }
 .game-battle .battle-system .hero-heading .hp { font-size:20px; }
 .game-battle .battle-system .hand { --hand-card-minimum:180; overflow-x:auto; overflow-y:hidden; justify-content:flex-start!important; }
}