/* Shared viewport budget; loaded after the card styles. No page-wide scaling. */
main{--game-height:clamp(560px,calc(100dvh - 138px),830px);padding:8px 20px 20px;column-gap:18px}
header{height:90px;margin:0 0 18px}
.game-logo{height:90px;width:min(480px,85%)}
.game-logo img{height:100%;object-fit:contain}
.battle-frame{padding:8px}
.battle{height:var(--game-height)}
.start-screen,.character-selection,.battle-lineup{min-height:var(--game-height)}
.battle-sidebar{gap:8px}
.battle-sidebar .battle-feed{min-height:0;height:calc(var(--game-height) - 190px);padding:16px;overflow:auto}
.battle-feed h2{margin-bottom:8px;padding-bottom:10px}
.battle-feed li{padding:6px 0}
.music-control{padding-top:6px}
.battle .opponent-row{top:8px;left:16%;right:3%;grid-template-columns:minmax(0,1fr);gap:3px}
.opponent-row>#cpu-hand{grid-column:1;grid-row:1;align-items:center}
.opponent-row>.row-label{grid-column:1;grid-row:2}
.opponent-row .card-back{width:58px}
.cpu-active-card{position:relative;width:70px;flex:none;padding:0;border:1px solid #e1c47f;border-radius:4px;background:#081321;cursor:pointer}
.in-play-label{position:absolute;bottom:0;left:0;right:0;background:#302713;color:#ffe5a6;font-size:8px;letter-spacing:1px}
.battle .arena-scene{left:16%;right:3%;top:100px;height:calc(100% - 294px);--scene-height:calc(var(--game-height) - 300px)}
.battle .scoreboard{left:18%;right:5%;top:110px;grid-template-columns:1fr 48px 1fr;gap:12px}
.battle .fighters{left:20%;right:7%;top:auto;bottom:220px;align-items:end}
.fighter-visual{height:clamp(145px,calc(100dvh - 580px),185px)}
.fighter-visual canvas{height:clamp(165px,calc(100dvh - 550px),220px)}
.battle .player-row{left:16%;right:3%;bottom:8px;grid-template-columns:100px minmax(0,1fr);gap:4px 8px}
.player-row>#player-hand{grid-column:2}
.player-row .hand-card{flex:0 1 135px;width:135px}
.action-column{position:absolute;left:2%;width:12%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:30px}
.action-column .actions{position:static;gap:14px}
.action-column .actions button{width:clamp(55px,8vw,110px)}
.action-column .deck .card-back{width:52px}
.action-column .deck small{margin-top:4px}
.character-selection,.battle-lineup{padding:18px 24px}
.selection-heading{margin-bottom:14px}
.selection-heading h1{margin:6px 0;font-size:25px}
.selection-heading p{margin:6px 0}
.fighter-choice img{height:clamp(65px,calc(16dvh - 52px),112px)}
.fighter-choice span{min-height:24px;margin-top:4px}
.selection-preview>img{height:clamp(150px,25dvh,250px)}
.selection-preview{padding:12px}
.save-choices{margin-top:12px;padding:10px;gap:6px}
.save-choices button{min-height:40px;padding:6px}
.opponent-ladder{gap:8px}
.ladder-panel{min-height:44px;padding:10px 16px;font-size:14px}
@media(min-width:1000px){
 main{max-width:1530px;grid-template-columns:210px minmax(0,1fr)}
 header{grid-column:2;grid-row:1}
 .battle-frame{grid-column:2;grid-row:2}
 .battle-sidebar{grid-column:1;grid-row:2;margin-top:0}
 .below,footer{grid-column:2}
}
@media(max-width:999px){
 main{padding:8px 10px 16px}
 .battle-sidebar{margin-top:12px}
 .battle-sidebar .battle-feed{height:auto;max-height:280px}
}
@media(max-width:650px){
 main{--game-height:600px}
 header,.game-logo{height:72px}
 header{margin-bottom:14px}
 .battle-frame{padding:4px}
 .battle .opponent-row{left:19%;right:2%}
 .opponent-row .card-back{width:43px}
 .cpu-active-card{width:56px}
 .battle .arena-scene{left:19%;right:2%;top:92px;height:300px;--scene-height:294px}
 .battle .scoreboard{left:21%;right:4%;top:103px;grid-template-columns:1fr 28px 1fr;gap:5px}
 .battle .fighters{left:23%;right:6%;bottom:235px}
 .fighter-visual{height:145px}
 .fighter-visual canvas{height:165px}
 .action-column{left:1%;width:17%;gap:30px}
 .action-column .actions button{width:55px}
 .action-column .deck .card-back{width:40px}
 .battle .player-row{left:3%;right:3%;bottom:10px;grid-template-columns:1fr}
 .player-row>#turn{grid-row:2;grid-column:1;font-size:10px;text-align:center}
 .player-row>#player-hand{grid-row:3;grid-column:1}
 .player-row .hand-card{flex:0 1 110px;width:110px}
 .character-selection,.battle-lineup{padding:16px 10px}
 .selection-preview>img{height:100px}
 .selection-layout{gap:10px}
 .fighter-choice img{height:62px}
}
.draw-pile{display:block;padding:0;border:0;background:none;margin:auto;color:inherit}
.draw-pile:disabled{opacity:.65}
.draw-pile:not(:disabled):hover .card-back{outline:2px solid #6debdc}
.discard-pile{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.discard-top,.discard-empty{display:grid;place-items:center;width:34px;height:38px;border:1px dashed #a58a53;border-radius:4px;background:#0b1422;color:#a58a53;padding:2px}
.discard-top img{width:100%;height:100%;object-fit:cover}
.action-column{gap:16px}
.action-column .deck .card-back{height:64px}
.discard-pile small{font-size:7px;white-space:nowrap}
@media(max-width:650px){.action-column{gap:12px}.action-column .deck .card-back{height:50px}.discard-top,.discard-empty{width:28px;height:28px}}

/* Keep draw and discard stacks clear of action buttons at all widths. */
.action-column{gap:16px}
@media(max-width:650px){.action-column{gap:12px}}
@media(max-width:650px){.action-column{top:12px;transform:none}}
.battle-sidebar .cpu-active-card{width:100%;padding:8px;font-size:11px;margin-top:8px}
.battle-sidebar .in-play-label{display:none}
/* Screen-first desktop layout: feed, arena, supplied vertical logo. */
@media(min-width:1000px){
 main{--game-height:calc(100dvh - 74px);max-width:none;padding:10px 16px;grid-template-columns:190px minmax(0,1fr) 130px;gap:8px 14px}
 header{grid-column:3;grid-row:1;margin:0;height:calc(var(--game-height) + 18px);position:relative;overflow:hidden}
 .game-logo{position:absolute;left:50%;top:50%;width:min(680px,calc(100dvh - 100px));height:auto;transform:translate(-50%,-50%) rotate(90deg)}
 .game-logo img{width:100%;height:auto;object-fit:contain}
 .battle-frame{grid-column:2;grid-row:1}
 .battle-sidebar{grid-column:1;grid-row:1}
 .below{grid-column:2;grid-row:2;display:flex;gap:18px;align-items:center;margin:0;min-width:0}
 .below p{margin:0;font-size:10px;line-height:1.3}
 #save-status{flex:0 0 auto;max-width:35%}
 .save-help{flex:1}
 .battle .arena-scene{top:12px;height:calc(100% - 300px);--scene-height:calc(var(--game-height) - 306px)}
 .battle .scoreboard{top:24px}
 .battle .fighters{bottom:320px}
 .battle .player-row{bottom:8px;grid-template-columns:1fr;gap:4px}
 .player-row>.row-label{grid-row:1;grid-column:1;text-align:center}
 .player-row>#turn{grid-row:2;grid-column:1;text-align:center;font-size:11px}
 .player-row>#player-hand{grid-row:3;grid-column:1;gap:12px}
 .player-row .hand-card{flex:0 1 210px;width:210px}
 .player-row .biosphere-name{font-size:4cqw}
 .player-row .biosphere-effect{left:18%;width:64%;top:64%;height:18%;font-size:5cqw;line-height:1.15}
 .start-screen,.character-selection,.battle-lineup{height:var(--game-height);min-height:0;overflow:auto}
}
@media(min-width:1000px) and (max-height:760px){
 .player-row .hand-card{flex-basis:175px;width:175px}
 .battle .arena-scene{height:calc(100% - 260px);--scene-height:calc(var(--game-height) - 266px)}
 .battle .fighters{bottom:280px}
 .fighter-visual canvas{height:150px}
 .ladder-panel{min-height:36px;padding:7px 12px}
 .opponent-ladder{gap:5px}
}