/* Test52: budget the actual viewport; retain scrolling for documents and small/accessibility windows. */
.arena49.arena52 .wrap{padding-top:max(6px,env(safe-area-inset-top));height:100vh;height:100dvh}
.arena49.arena52 nav{min-height:58px;margin-top:4px;padding-top:2px}
.arena49.arena52 nav button{min-height:48px;font-size:11px;gap:1px}
.arena49.arena52 #toast:not(:empty){position:absolute;bottom:70px;left:20px;right:20px;z-index:80;box-shadow:0 8px 30px #0006;pointer-events:none}
.arena49.arena52 #app[data-screen=arena][data-exercise=false]{display:flex;flex-direction:column;gap:4px;padding-bottom:2px}
.arena49.arena52 #app .hud{min-height:36px}
.arena49.arena52 .arena-identity{min-height:44px;padding:0;gap:6px}
.arena49.arena52 .arena-identity .general-art{height:40px;width:34px}
/* Portraits keep their entire frame, including hair, crowns and ears. */
.arena49.arena52 .general-art{object-fit:contain!important;object-position:center top!important;background:radial-gradient(ellipse at 50% 30%,#384355,#111b2a);border-radius:7px}
.arena49.arena52 .arena-layout{flex:1;min-height:0}
.arena49.arena52 .arena-main{min-height:0;gap:4px}
.arena49.arena52 .arena-support{display:none}
.arena49.arena52 .arena-support[open]{display:block;position:absolute;inset:0;z-index:35;max-height:100%;overflow:auto;padding:14px;background:#152237;border:1px solid #8b7956;border-radius:12px;box-shadow:0 10px 35px #0008}
.arena49.arena52 .arena-support[open]>summary{min-height:44px;padding:10px}
.arena49.arena52 .arena-support .arena-rail{display:block}
.arena49.arena52 .arena-board,.arena49.arena52 .arena-board.arena-prepared{display:flex;flex-direction:column;flex:1;min-height:0;gap:6px}
.arena49.arena52 #app[data-phase] .arena-board :is(.market,.team){display:flex;flex-direction:column;flex:1;min-height:0;position:static;max-width:none;width:100%;margin:0}
.arena49.arena52 .market-heading,.arena49.arena52 .team .panel-title{min-height:28px;margin:0 0 3px}
.arena49.arena52 .market-heading h2,.arena49.arena52 .team .panel-title h2{font-size:19px}
.arena49.arena52 .formation-direction-label,.arena49.arena52 .formation-rear-label{font-size:10px;min-height:14px;padding:0;margin:0;flex:none}
.arena49.arena52 #app[data-phase] .market .offers{flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7px}
.arena49.arena52 #app[data-phase] .market .offer>.art{height:0;flex:1;min-height:0;max-height:none;aspect-ratio:auto;width:100%}
.arena49.arena52 #app[data-phase] .market .offer .body{padding:4px 7px;gap:2px;flex:none}
.arena49.arena52 #app[data-phase] .arena-board .team>.roster{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));flex:1;min-height:0;gap:6px;padding:0 2px}
.arena49.arena52 #app[data-phase] .arena-board .unit{display:flex;flex-direction:column;min-height:0;gap:0}
.arena49.arena52 #app[data-phase] .arena-board .unit>.portrait{width:100%;height:0;flex:1;min-height:0;max-height:none;aspect-ratio:auto}
.arena49.arena52 #app[data-phase] .arena-board .unit .unit-body{flex:none;width:100%;padding:3px 6px;gap:1px;min-height:0}
.arena49.arena52 #app[data-phase] .arena-board .unit .name{font-size:14px;min-height:0;line-height:1.18}
.arena49.arena52 #app[data-phase] .arena-board .unit .values{font-size:12px;gap:6px;margin:1px 0}
.arena49.arena52 #app[data-phase] .arena-board .unit .development-mark{font-size:9px;min-height:12px;line-height:1.1}
.arena49.arena52 #app[data-phase] .arena-board .unit .rarity-label{font-size:9px;min-height:11px;line-height:1.1}
.arena49.arena52 #app[data-phase] .arena-board .arena-empty-slot{min-height:0!important}
.arena49.arena52 .arena-pacts,.arena49.arena52 .arena-pact{min-height:44px;flex:none}
.arena49.arena52 .arena-pact{padding:3px 7px}.arena49.arena52 .arena-pact-pair .portrait{height:30px}
.arena49.arena52 #app[data-phase] .arena-actions{position:static;flex:none;min-height:44px;padding:0;grid-template-columns:120px minmax(0,1fr)}
.arena49.arena52 #app[data-phase] .arena-actions button{min-height:44px;font-size:14px;padding:4px 8px}
.arena49.arena52 #app[data-phase] .arena-actions button.primary{font-size:19px}
.arena49.arena52 .arena-utilities{display:flex;flex-wrap:nowrap;min-height:44px;gap:5px;flex:none;align-items:stretch;position:relative}
.arena49.arena52 .quick-arrange-group{display:flex;flex:1;min-width:0;gap:0}
.arena49.arena52 .quick-arrange{flex:1;min-width:0;border-radius:9px 0 0 9px;padding:5px 8px;background:linear-gradient(150deg,#37485b,#1c2b40);border-color:#9c8958;color:#f3dfb6;user-select:none;-webkit-user-select:none;touch-action:none}
.arena49.arena52 .quick-arrange strong{display:block;font-size:13px;line-height:1.2}
.arena49.arena52 .quick-arrange small{display:block;font-size:9px;line-height:1.3;color:#bbc5d7;margin-top:3px}
.arena49.arena52 .quick-arrange[data-holding]{box-shadow:inset 0 -3px #ebc87f;background:#43526a}
.arena49.arena52 .proposal-shortcut{min-width:36px;border-radius:0 9px 9px 0;padding:4px;font-size:18px}
.arena49.arena52 .arena-utilities>.arena-disclosure{flex:none;min-width:0;position:static}
.arena49.arena52 .arena-utilities>.arena-disclosure>summary{min-height:44px;padding:12px 7px;font-size:12px}
.arena49.arena52 .arena-utilities>.market-tools{order:4}
.arena49.arena52 .arena-utilities>.market-tools>summary{font-size:21px;line-height:20px;min-width:38px;text-align:center;list-style:none}
.arena49.arena52 .arena-utilities>.market-tools>summary::-webkit-details-marker{display:none}
.arena49.arena52 .arena-tool-popup[open]>.arena-popup-body{position:absolute;bottom:calc(100% + 7px);left:0;right:0;top:auto;max-height:min(65dvh,600px);overflow:auto;z-index:30;background:#17253afc;border:1px solid #8d7e62;border-radius:12px;padding:14px;box-shadow:0 12px 35px #0009}
.arena49.arena52 .arena-popup-body .roster .unit{min-height:170px}.arena49.arena52 .arena-popup-body .roster .unit>.portrait{height:120px}
.arena49.arena52 .arena-board-tabs{flex:none}.arena49.arena52 .arena-board-tabs button{min-height:36px;padding:5px}
/* A bounded general picker. Full descriptions remain one tap away. */
.arena49.arena52 #app[data-phase=general]>.league-ribbon{flex:none;margin:0}
.arena49.arena52 #app .general-selection{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;padding:10px 12px;position:relative}
.arena49.arena52 #app .general-selection>h1{font-size:clamp(23px,3vw,32px);margin:4px 0}
.arena49.arena52 #app .general-selection>p{font-size:11px;margin:4px 0;line-height:1.3}
.arena49.arena52 #app .general-selection>.general-options{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}
.arena49.arena52 #app .general-option{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;align-content:center;align-items:center;gap:4px 10px;padding:8px;text-align:left;min-height:0;background:linear-gradient(135deg,#354055,#182638);border-color:#a78d6159}
.arena49.arena52 #app .general-option>.general-art{grid-row:1/-1;grid-column:1;align-self:stretch;height:100%;width:100%;min-height:0;max-height:none;aspect-ratio:auto;border:0}
.arena49.arena52 #app .general-option>:not(.general-art){grid-column:2;padding:0;margin:0}
.arena49.arena52 #app .general-option strong{font-size:22px}.arena49.arena52 #app .general-option>b{font-size:12px}
.arena49.arena52 #app .general-option .faction-name{display:block;font-size:11px;color:#e1cb9d}
.arena49.arena52 #app .general-option>small{font-size:11px;line-height:1.3}
.arena49.arena52 #app .general-option>em{display:none}
.arena49.arena52 .general-selection>#general-mastery{min-height:36px;font-size:12px;padding:5px;margin:0}
.arena49.arena52 .general-selection>.classic-generals>summary{min-height:36px;font-size:12px;padding:8px}
.arena49.arena52 .classic-generals[open]{position:absolute;inset:10px;z-index:10;overflow:auto;padding:12px;background:#17263b;border:1px solid #ab9369;border-radius:12px}
.arena49.arena52 #app .classic-generals[open] .general-options{grid-auto-rows:180px}
/* Main combat fills the remaining height; both teams retain their 2 + 2 + 1 formation. */
.arena49.arena52 #app .battle-panel{display:flex;flex-direction:column;flex:1;min-height:0;gap:3px;padding:8px 10px;position:relative;overflow:visible}
.arena49.arena52 #app .battle-panel>.eyebrow{font-size:10px;line-height:1.1}
.arena49.arena52 #app .battle-panel .result-heading{margin:0;min-height:26px}
.arena49.arena52 #app .battle-panel .result-heading h2.result{font-size:23px;margin:0;line-height:1.1}
.arena49.arena52 #app .battle-panel .battle-toolbar{flex:none;gap:6px;margin:0;align-items:center}
.arena49.arena52 #app .battle-panel .replay-actions,.arena49.arena52 #app .battle-panel .speed-controls{margin:0;gap:4px;flex-wrap:nowrap}
.arena49.arena52 #app .battle-panel .replay-actions button,.arena49.arena52 #app .battle-panel .speed-controls button{min-height:36px;font-size:12px;padding:4px 8px}
.arena49.arena52 #app .battle-panel .combat-scene{flex:1;min-height:0;gap:3px}
.arena49.arena52 #app .battle-panel .board-stage{flex:1;min-height:0;display:flex}
.arena49.arena52 #app .battle-panel .combat-lineups,.arena49.arena52 #app .battle-panel .final-lineups .combat-lineups{flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2vw,28px);align-items:stretch}
.arena49.arena52 #app .battle-panel .combat-lineup{display:flex;flex-direction:column;min-height:0;padding:4px;gap:2px;margin:0;order:0}
.arena49.arena52 #app .battle-panel .army-heading{min-height:28px;margin:0;gap:5px;flex:none}
.arena49.arena52 #app .battle-panel .army-heading .general-art{width:23px;height:28px}
.arena49.arena52 #app .battle-panel .army-heading strong{font-size:15px}.arena49.arena52 #app .battle-panel .army-heading small{font-size:10px}
.arena49.arena52 #app .battle-panel .combat-minis{flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}
.arena49.arena52 #app .battle-panel .combat-mini{min-height:0;justify-content:flex-start;align-items:stretch}
.arena49.arena52 #app .battle-panel .combat-mini .combat-portrait{height:0;flex:1;min-height:0}
.arena49.arena52 #app .battle-panel .combat-mini .portrait,.arena49.arena52 #app .battle-panel .final-lineups .combat-mini .portrait{height:100%;min-height:0;flex:1;max-height:none;aspect-ratio:auto;width:100%}
.arena49.arena52 #app .battle-panel .battle-card-info{flex:none;gap:1px;padding:3px 5px}
.arena49.arena52 #app .battle-panel .battle-card-info>strong{font-size:13px;line-height:1.15;min-height:0}
.arena49.arena52 #app .battle-panel .battle-card-info .rarity-label{font-size:9px;min-height:11px;line-height:1.1}
.arena49.arena52 #app .battle-panel .battle-card-rank{font-size:9px;line-height:1.1}
.arena49.arena52 #app .battle-panel .battle-vitals{font-size:13px;gap:8px;line-height:1.2}.arena49.arena52 #app .battle-panel .battle-vitals small{font-size:11px}
.arena49.arena52 #app .battle-panel .battle-health{height:3px;margin:1px 0}
.arena49.arena52 #app .battle-panel .combat-action-title{min-height:26px;padding:4px 8px}.arena49.arena52 #app .battle-panel .combat-action-title strong{font-size:13px}
.arena49.arena52 #app .battle-panel .combat-caption{font-size:12px;min-height:16px;padding:1px 0;line-height:1.3}
.arena49.arena52 #app .battle-panel .final-lineups{min-height:0;gap:3px;margin:0;justify-content:flex-start}
.arena49.arena52 #app .battle-panel .final-lineups>.eyebrow{display:none}
.arena49.arena52 #app .battle-panel>#next{min-height:40px;margin:0;padding:5px}
.arena49.arena52 #app .battle-panel>.progress{margin:0;height:2px}
.arena49.arena52 #app .battle-rosters>summary{min-height:28px;padding:4px 8px;font-size:11px}
.arena49.arena52 #app .battle-panel .combat-moment-label{font-size:10px;line-height:1.1;margin:0}
@media(min-width:720px){
 .arena49.arena52 .arena-board:not(.arena-prepared){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:minmax(0,1fr) 44px 44px 44px;gap:6px 16px;align-items:stretch}
 .arena49.arena52 .arena-board:not(.arena-prepared)>.market{grid-column:1;grid-row:1/4}.arena49.arena52 .arena-board:not(.arena-prepared)>.team{grid-column:2;grid-row:1}
 .arena49.arena52 .arena-board:not(.arena-prepared)>.arena-pacts{grid-column:2;grid-row:2}.arena49.arena52 .arena-board:not(.arena-prepared)>.arena-utilities{grid-column:2;grid-row:3}.arena49.arena52 .arena-board:not(.arena-prepared)>.arena-actions{grid-column:1/-1;grid-row:4}
 .arena49.arena52 .arena-board-tabs{display:none}
 .arena49.arena52 #app .battle-panel .battle-toolbar{display:flex;justify-content:space-between}
}
@media(min-width:850px) and (max-height:1000px){
 /* Landscape uses the available width for art beside text, instead of flattening portraits. */
 .arena49.arena52 #app[data-phase] .arena-board .unit,.arena49.arena52 #app .battle-panel .combat-mini{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr)}
 .arena49.arena52 #app[data-phase] .arena-board .unit>.portrait,.arena49.arena52 #app .battle-panel .combat-mini .combat-portrait{height:100%;width:100%;min-height:0}
 .arena49.arena52 #app[data-phase] .arena-board .unit .unit-body,.arena49.arena52 #app .battle-panel .battle-card-info{align-self:center;justify-content:center;padding:5px;gap:4px;border-radius:0;background:none}
 .arena49.arena52 #app[data-phase] .arena-board .unit .name,.arena49.arena52 #app .battle-panel .battle-card-info>strong{font-size:clamp(12px,1.25vw,17px)}
 .arena49.arena52 #app[data-phase] .arena-board .unit .values{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:3px 8px}
 .arena49.arena52 #app[data-phase] .arena-board .unit .slot{top:3px;left:3px;font-size:8px;padding:1px 3px}
 .arena49.arena52 #app[data-phase] .arena-board .unit .rank{top:auto;bottom:4px;left:4px;right:auto;font-size:12px;padding:0 3px}
 .arena49.arena52 #app .battle-panel .combat-position{font-size:8px;top:3px;left:3px;padding:1px 3px}
}
@media(max-width:719px){
 .arena49.arena52 .arena-board:not(.arena-prepared)[data-board-view=market]>.team,.arena49.arena52 .arena-board:not(.arena-prepared)[data-board-view=market]>.arena-pacts,.arena49.arena52 .arena-board:not(.arena-prepared)[data-board-view=team]>.market{display:none}
 .arena49.arena52 .quick-arrange small{font-size:8px}.arena49.arena52 .quick-arrange strong{font-size:11px}
 .arena49.arena52 #app .general-option{display:flex;flex-direction:column;gap:2px;padding:4px;text-align:center}
 .arena49.arena52 #app .general-option>.general-art{height:0;flex:1;min-height:0;width:100%}
 .arena49.arena52 #app .general-option>small{display:none}.arena49.arena52 #app .general-option strong{font-size:18px}
 .arena49.arena52 #app .battle-panel{padding:6px}.arena49.arena52 #app .battle-panel .combat-lineup{padding:2px}
 .arena49.arena52 #app .battle-panel .combat-lineups{gap:8px}.arena49.arena52 #app .battle-panel .combat-minis{gap:5px}
 .arena49.arena52 #app .battle-panel .battle-card-info>strong{font-size:10px}.arena49.arena52 #app .battle-panel .battle-card-rank{font-size:8px}.arena49.arena52 #app .battle-panel .battle-card-info .rarity-label{font-size:8px}
 .arena49.arena52 #app .battle-panel .battle-vitals{font-size:11px;gap:3px}.arena49.arena52 #app .battle-panel .battle-vitals small{font-size:9px}
 .arena49.arena52 #app .battle-panel .combat-position{font-size:8px;padding:1px 2px}.arena49.arena52 #app .battle-panel .army-heading strong{font-size:12px}
 .arena49.arena52 #app .battle-panel .speed-controls>span{display:none}
}
/* Let unusually short windows / magnified text scroll instead of clipping usable controls. */
@media(max-height:579px){
 .arena49.arena52 .arena-board{min-height:430px;flex:none}.arena49.arena52 #app .battle-panel{min-height:460px;flex:none}.arena49.arena52 #app .general-selection{min-height:470px;flex:none}
}
/* Real material sprites and bounded reward particles. */
.arena52 .premium-chest{position:relative;aspect-ratio:3/4;isolation:isolate;width:100%;max-height:none}
.arena52 .premium-chest .chest-pose{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0;filter:drop-shadow(0 14px 14px #0008)}
.arena52 .premium-chest .chest-open{opacity:0}
.arena52 .premium-chest.is-opening .chest-closed{opacity:0}.arena52 .premium-chest.is-opening .chest-open{opacity:1}
.arena52 .chest-card .premium-chest,.arena52 .chest-catalog-grid .premium-chest,.arena52 .treasure-welcome .premium-chest{aspect-ratio:1.35;overflow:hidden}
.arena52 .chest-card .chest-pose,.arena52 .chest-catalog-grid .chest-pose,.arena52 .treasure-welcome .chest-pose{height:150%;top:-40%;object-fit:contain}
.arena52 .chest-opening-art{position:relative;width:min(100%,300px,32vh);padding:0;margin:0 auto -6px;overflow:visible;background:none}
.arena52 .premium-chest-light{position:absolute;left:18%;right:18%;top:42%;height:28%;border-radius:50%;background:radial-gradient(ellipse,#ffe6a746,#e9bf4015 45%,transparent 70%);filter:blur(8px);mix-blend-mode:screen;pointer-events:none}
.arena52 [data-opening=playing] .premium-chest{animation:chest52-weight 950ms cubic-bezier(.2,.6,.2,1) both}
.arena52 [data-opening=playing] .chest-closed{animation:chest52-close 800ms linear both}
.arena52 [data-opening=playing] .chest-open{animation:chest52-open 800ms cubic-bezier(.2,.7,.2,1) both}
.arena52 [data-opening=playing] .premium-chest-light{animation:chest52-light 1400ms ease both}
.arena52 .treasure-loot{position:absolute;inset:0;pointer-events:none;z-index:3;perspective:600px}
.arena52 .loot-arc{position:absolute;left:50%;top:56%;width:25px;height:25px;opacity:0;display:block}
.arena52 .minted-coin{width:100%;height:100%;filter:drop-shadow(0 2px 2px #5f3d2170)}
.arena52 .shard-arc{width:34px;height:44px}
.arena52 .card-fragment{display:block;width:100%;height:100%;background:var(--rarity,#dcc796);padding:2px;clip-path:polygon(12% 3%,87% 0,100% 65%,62% 100%,0 81%);filter:drop-shadow(0 0 4px #ffdc9250)}
.arena52 .card-fragment img{width:100%;height:100%;object-fit:cover;object-position:center 18%;clip-path:inherit}
.arena52 .fragment-1{clip-path:polygon(0 0,92% 16%,100% 94%,33% 100%,7% 70%)}
.arena52 .fragment-2{clip-path:polygon(10% 3%,75% 0,100% 38%,72% 100%,0 91%)}
.arena52 [data-opening=playing] .loot-arc{animation:chest52-arc 960ms linear var(--flight-delay) both}
.arena52 [data-opening=playing] .minted-coin{animation:chest52-coin 960ms linear var(--flight-delay) both}
.arena52 [data-opening=playing] .card-fragment{animation:chest52-shard 960ms ease-out var(--flight-delay) both}
.arena52 [data-opening=complete] .treasure-loot{display:none}
@keyframes chest52-weight{0%,22%{transform:translateY(0)}32%{transform:translateY(2px) rotate(-1deg)}45%{transform:translateY(0) rotate(.7deg)}63%{transform:translateY(-3px)}83%{transform:translateY(2px)}100%{transform:none}}
@keyframes chest52-close{0%,51%{opacity:1}82%,100%{opacity:0}}
@keyframes chest52-open{0%,50%{opacity:0;transform:translateY(3px)}84%,100%{opacity:1;transform:none}}
@keyframes chest52-light{0%,34%{opacity:0;transform:scale(.4)}58%{opacity:1;transform:scale(1.25)}100%{opacity:.65;transform:scale(1)}}
@keyframes chest52-arc{0%{opacity:0;transform:translate(-50%,0)}8%{opacity:1}35%{transform:translate(calc(var(--flight-x)*.42),var(--flight-top))}55%{transform:translate(calc(var(--flight-x)*.66),calc(var(--flight-top)*.84));opacity:1}78%{opacity:.9;transform:translate(calc(var(--flight-x)*.88),-8px)}100%{opacity:0;transform:translate(var(--flight-x),115px)}}
@keyframes chest52-coin{from{transform:rotateY(0) rotateZ(0)}to{transform:rotateY(640deg) rotateZ(var(--spin))}}
@keyframes chest52-shard{from{transform:rotate(-12deg) scale(.7)}to{transform:rotate(var(--spin)) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.arena52 .treasure-loot{display:none}.arena52 .premium-chest.is-opening .chest-open{opacity:1}.arena52 .premium-chest.is-opening .chest-closed{opacity:0}.arena52 .premium-chest{transform:none!important}}
.arena49.arena52 #app[data-phase=result]>.arena-identity{display:none}
.arena49.arena52 .arena-home-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.arena49.arena52 .arena-home-links button{min-height:44px;font-size:13px}