/* Landscape uses two player columns. Each column keeps rail, base and field
   in one view, and the bottom controls have their own reserved strip. */
@media(orientation:landscape){
 .game-shell[data-scene=battle] .arena:not(.prologue-battle){
  --arena-top:52px;--arena-bottom:70px;--row-gap:5px;--rail-clearance:0px;
  --card:min(54px,calc((100dvh - var(--safe-top) - var(--safe-bottom) - 167px)/4.91),calc((100dvw - var(--safe-left) - var(--safe-right) - 100px)/12));
  --battle-card:calc(var(--card)*1.45);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:28px;row-gap:5px;
  left:calc(var(--safe-left) + 20px);right:calc(var(--safe-right) + 20px);align-content:start;justify-content:stretch;
 }
 .arena:not(.prologue-battle)>.rail[data-player="0"]{grid-column:1;grid-row:1;padding:0}
 .arena:not(.prologue-battle)>.rail[data-player="1"]{grid-column:2;grid-row:1;padding:0}
 .arena:not(.prologue-battle)>.field-row[data-player="0"]{grid-column:1;grid-row:2}
 .arena:not(.prologue-battle)>.field-row[data-player="1"]{grid-column:2;grid-row:2}
 .arena:not(.prologue-battle)>.active-row[data-player="0"]{grid-column:1;grid-row:3}
 .arena:not(.prologue-battle)>.active-row[data-player="1"]{grid-column:2;grid-row:3}
 .arena:not(.prologue-battle)>.active-row{grid-template-columns:28px minmax(0,1fr) 28px;gap:4px;align-self:start}
 .arena:not(.prologue-battle) .active-slot{height:calc(var(--battle-card)*1.5 + 28px)}
 .arena:not(.prologue-battle) .battlefield-unit{top:14px}
 .arena:not(.prologue-battle) .power-readout b{font-size:22px}
 .arena:not(.prologue-battle) .power-role-icon{width:17px;height:17px}
 .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .battle-dock{left:calc(var(--safe-left) + 18px);right:calc(var(--safe-right) + 18px);bottom:calc(var(--safe-bottom) + 8px);flex-direction:row;align-items:center;justify-content:center;gap:12px}
 .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .dock-actions{flex:1 1 auto;max-width:520px;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
 .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .dock-options{order:0;flex:none;margin:0;min-height:44px;font-size:10px}
 .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .dock-options:empty{display:none}
 .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .dock-actions :is(.primary-action,.auto-button,.speed-button){height:44px;min-height:44px}
 .game-shell[data-scene=battle] .game-topbar{top:calc(var(--safe-top) + 4px)}
 .game-shell[data-scene=battle] .battle-history-control{--history-gutter:37px;width:37px;right:-12px;max-height:90px;padding:3px}
}

/* Fit the six mirrored rows from available height instead of shrinking cards
   to preserve oversized gaps. Identity/Might has its own bounded side lane. */
.game-shell[data-scene=battle] .arena:not(.prologue-battle){
 --arena-top:48px;--arena-bottom:122px;--rail-clearance:4px;--row-gap:4px;
 --identity-height:80px;
 --board-room:calc(min(100dvh,1040px) - var(--safe-top) - var(--safe-bottom) - var(--arena-top) - var(--arena-bottom) - 28px);
 --card:min(72px,calc((100cqw - var(--safe-left) - var(--safe-right) - 40px)/5),calc((var(--board-room) - 36px)/10.05),calc((var(--board-room) - 2*var(--identity-height))/5.7));
 --battle-card:calc(var(--card)*1.45);
 left:calc(var(--safe-left) + 12px);right:calc(var(--safe-right) + 12px);
}
.arena:not(.prologue-battle) .rail,.arena:not(.prologue-battle) .field-row{gap:4px}
.arena:not(.prologue-battle) .field-slot{width:calc(var(--card)*.9);height:calc(var(--card)*1.35)}
.arena:not(.prologue-battle)>.active-row{grid-template-columns:64px minmax(0,1fr) 24px;gap:6px;min-height:var(--identity-height)}
.arena:not(.prologue-battle) .active-slot{height:calc(var(--battle-card)*1.5 + 18px)}
.arena:not(.prologue-battle) .battlefield-unit{top:9px}
.arena:not(.prologue-battle) .active-slot .active-empty{top:9px}
.arena:not(.prologue-battle) .power-readout{display:grid;grid-template-columns:22px minmax(0,1fr);align-content:center;align-items:center;justify-items:center;width:64px;min-width:0;gap:0}
.arena:not(.prologue-battle) .power-readout>.battle-player-badge{grid-column:1/-1;grid-row:1}
.arena:not(.prologue-battle) .power-readout>.power-role-icon{grid-column:1;grid-row:2;width:19px;height:19px;margin:0}
.arena:not(.prologue-battle) .power-readout>b{grid-column:2;grid-row:2;font-size:27px;line-height:1}
.game-shell[data-scene=battle]:not(:has(.prologue-battle)) .battle-dock{left:calc(var(--safe-left) + 16px);right:calc(var(--safe-right) + 16px);bottom:calc(var(--safe-bottom) + 12px)}
.battle-dock .replay-skip{--control-kind:none;appearance:none;display:flex;align-items:center;justify-content:center;width:52px;min-width:44px;min-height:44px;margin-right:auto;padding:0;border:0;border-radius:0;background:none!important;box-shadow:none!important;border:0!important;color:#c4b9a3;font:11px/1 var(--font-ui);text-shadow:0 1px 3px #000;cursor:pointer}
.replay-skip[hidden]{display:none}
.replay-skip:active{color:#fff2c9}

@media(orientation:landscape){
 .game-shell[data-scene=battle] .arena:not(.prologue-battle){
  --arena-top:48px;--arena-bottom:66px;--rail-clearance:0px;--row-gap:4px;--identity-height:65px;
  --board-room:calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--arena-top) - var(--arena-bottom) - 8px);
  --card:min(58px,calc((100dvw - var(--safe-left) - var(--safe-right) - 56px)/10),calc((var(--board-room) - 18px)/5.025),calc((var(--board-room) - var(--identity-height))/2.85));
  column-gap:16px;row-gap:4px;
 }
 .arena:not(.prologue-battle)>.active-row{grid-template-columns:58px minmax(0,1fr) 12px;gap:4px;min-height:var(--identity-height)}
 .arena:not(.prologue-battle) .power-readout{width:58px;grid-template-columns:18px minmax(0,1fr)}
 .arena:not(.prologue-battle) .power-readout>b{font-size:23px}
 .arena:not(.prologue-battle) .power-readout>.power-role-icon{width:16px;height:16px}
 .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .battle-dock{bottom:calc(var(--safe-bottom) + 8px);gap:10px}
 .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .dock-actions{position:relative;gap:7px}
 .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .dock-options{position:static}
 .game-shell.is-replay[data-scene=battle]:not(:has(.prologue-battle)) .arena{--arena-bottom:84px}
 .game-shell.is-replay[data-scene=battle]:not(:has(.prologue-battle)) .battle-dock{bottom:calc(var(--safe-bottom) + 34px)}
 .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .replay-skip{position:absolute;left:var(--replay-skip-left,0px);bottom:-28px;width:44px;min-height:28px;height:28px;font-size:10px}
}

/* R189: four Base slots around a Hero spanning both rows. The shared portrait
   viewport uses this same board on wide devices; only the outer scenery grows. */
html body .game-shell[data-scene=battle] .arena:not(.prologue-battle)[data-base-slots="4"]{
 --arena-top:48px;--arena-bottom:130px;--row-gap:5px;--rail-clearance:0px;
 --card:min(calc((100cqw - 52px)/6.08),calc((100dvh - var(--safe-top) - var(--safe-bottom) - var(--arena-top) - var(--arena-bottom) - 49px)/10.44));
 --battle-card:calc(var(--card)*1.48);
 position:absolute;top:calc(var(--safe-top) + var(--arena-top));bottom:calc(var(--safe-bottom) + var(--arena-bottom));left:calc(var(--safe-left) + 16px);right:calc(var(--safe-right) + 16px);
 display:grid;grid-template-columns:1fr 1fr 2.04fr 1fr 1fr;
 grid-template-rows:repeat(2,calc(var(--card)*1.5)) repeat(2,minmax(calc(var(--battle-card)*1.5 + 12px),1fr)) repeat(2,calc(var(--card)*1.5));
 gap:5px 4px;justify-content:stretch;align-content:stretch;align-items:center;
}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>:is(.rail,.field-row){display:contents}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>:is(.rail,.field-row)>*{margin:0;justify-self:center;align-self:center;width:var(--card);height:calc(var(--card)*1.5);min-width:0}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.field-row[data-player="1"]>*{grid-row:2}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.rail[data-player="1"]>*{grid-row:1}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.field-row[data-player="0"]>*{grid-row:5}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.rail[data-player="0"]>*{grid-row:6}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.field-row>:nth-child(1),html body .arena:not(.prologue-battle)[data-base-slots="4"]>.rail>.pile[data-zone=deck]{grid-column:1}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.field-row>:nth-child(2),html body .arena:not(.prologue-battle)[data-base-slots="4"]>.rail>.equipment-cell[data-index="0"]{grid-column:2}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.field-row>:nth-child(3),html body .arena:not(.prologue-battle)[data-base-slots="4"]>.rail>.equipment-cell[data-index="1"]{grid-column:4}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.field-row>:nth-child(4),html body .arena:not(.prologue-battle)[data-base-slots="4"]>.rail>.grave-zone-cell{grid-column:5}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.rail>.leader-cell{grid-column:3;width:calc(var(--card)*2 + 3.333px);height:calc(var(--card)*3 + 5px);align-self:stretch;justify-self:center}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.rail[data-player="1"]>.leader-cell{grid-row:1/3}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.rail[data-player="0"]>.leader-cell{grid-row:5/7}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.rail>.leader-cell>.game-card{width:100%;max-width:none;height:100%}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.active-row{grid-column:1/-1;grid-template-columns:56px minmax(0,1fr) 56px;width:100%;gap:5px;min-height:0;align-self:center}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.active-row[data-player="1"]{grid-row:3}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.active-row[data-player="0"]{grid-row:4}
html body .arena:not(.prologue-battle)[data-base-slots="4"]>.active-row .power-readout{width:56px;justify-self:start;padding-left:0}
html body .arena:not(.prologue-battle)[data-base-slots="4"] .active-slot{height:calc(var(--battle-card)*1.5 + 12px)}
html body .arena:not(.prologue-battle)[data-base-slots="4"] .battlefield-unit,html body .arena:not(.prologue-battle)[data-base-slots="4"] .active-slot .active-empty{top:6px}
html body .game-shell[data-scene=battle] .arena:not(.prologue-battle)[data-base-slots="4"] .battle-history-control{right:0;width:52px;--history-gutter:52px;max-height:100%;padding:3px 0}
html body .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .battle-dock{left:16px;right:16px;bottom:calc(var(--safe-bottom) + 14px);display:flex;flex-direction:column;gap:4px}
html body .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .dock-actions{width:100%;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
html body .game-shell[data-scene=battle]:not(:has(.prologue-battle)) .dock-options{order:1;width:100%;justify-content:flex-end;min-height:24px}
@media(max-height:650px){html body .game-shell[data-scene=battle] .arena:not(.prologue-battle)[data-base-slots="4"]{--arena-top:44px;--arena-bottom:128px;--card:min(calc((100cqw - 52px)/6.08),calc((100dvh - var(--safe-top) - var(--safe-bottom) - var(--arena-top) - var(--arena-bottom) - 49px)/10.44))}html body .arena:not(.prologue-battle)[data-base-slots="4"]>.active-row{grid-template-columns:46px minmax(0,1fr) 46px}html body .arena:not(.prologue-battle)[data-base-slots="4"]>.active-row .power-readout{width:46px}.power-readout .battle-player-name{font-size:9px}}

.game-shell[data-scene=battle] .game-topbar{top:calc(var(--safe-top) + 12px)}

/* Round side controls never inherit the center action's responsive stretch. */
html body .game-shell .battle-dock .dock-actions{--round-control-size:44px;display:grid;grid-template-columns:var(--round-control-size) minmax(0,1fr) var(--round-control-size);align-items:center;min-width:0}
html body .game-shell .battle-dock .dock-actions :is(.auto-button,.speed-button){box-sizing:border-box;width:var(--round-control-size);height:var(--round-control-size);min-width:var(--round-control-size);max-width:var(--round-control-size);min-height:var(--round-control-size);max-height:var(--round-control-size);aspect-ratio:1;justify-self:center;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
html body .game-shell .battle-dock .dock-actions .primary-action{min-width:0;width:100%;max-width:100%}