/* Shared between the static art review and the playable arena. Keep the
   approved phone composition; only wide desktop/tablet battles use overlays. */
.arena-page{background:#eee5f5}
.arena-page>.page-head{background:#f5d7cd;border-bottom:0}
.arena-page:has(.arena-battle)>.arena-background{display:none}
.arena-stage{isolation:isolate;border:2px solid #beafcb;background:#fff0d9;overflow:hidden}
.arena-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;image-rendering:pixelated;z-index:-1;pointer-events:none;user-select:none}
/* Shared actors stay inside the terrain and behind its labels and controls. */
.arena-stage .arena-fighter{z-index:auto}
.arena-stage .arena-nameplate{position:relative;z-index:4}
.arena-stage .arena-round,.arena-stage .arena-unknown{z-index:4}
.arena-stage .arena-projectile,.arena-stage .arena-element,.arena-stage .arena-miss{z-index:3}
.arena-round{display:none}
.arena-fighter.you{left:3%;bottom:4%;max-width:44%}
.arena-fighter.opponent{right:3%;top:3%;max-width:44%}
.arena-actor{flex:none}
.arena-pad{width:104%;height:20%;bottom:0;opacity:.6}
.arena-nameplate{max-width:240px}
/* Let the instruction use the entire line; the clock belongs with its bar. */
.arena-question-head{container-type:inline-size;display:block}
.arena-challenge .arena-question-head h2{font-size:clamp(13px,5.5cqw,26px);white-space:nowrap;line-height:1.15}
.arena-timing{display:flex;align-items:center;gap:8px;min-height:22px}
.arena-timing .arena-timebar{flex:1;min-width:0}
.arena-timing .arena-timer{font-size:18px;text-align:right}
@media(orientation:landscape) and (max-height:600px){
 .arena-fighter.you{bottom:3%}.arena-fighter.opponent{top:2%}
 .arena-nameplate strong{font-size:15px}.arena-hearts>img{width:17px;height:17px}.arena-hearts{gap:2px}
}
@media(min-width:900px) and (min-height:601px) and (orientation:landscape){
 .arena-page:has(.arena-battle){--arena-edge:clamp(16px,2.5vw,40px);--arena-bottom:max(18px,env(safe-area-inset-bottom));--arena-command-height:254px}
 .arena-page:has(.arena-battle)>.page-head{position:absolute;inset:0 0 auto;height:72px;padding:8px var(--arena-edge);z-index:5;background:none;pointer-events:none}
 .arena-page:has(.arena-battle)>.page-head>*{pointer-events:auto}
 .arena-page:has(.arena-battle)>.page-head h1{flex:none;margin:auto;font-size:38px;pointer-events:none}
 .arena-battle{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;padding:0;margin:0}
 .arena-battle>.arena-stage{position:absolute;inset:0;width:100%;height:100%;border:0}
 .arena-battle>.arena-challenge{position:absolute;z-index:3;right:var(--arena-edge);bottom:var(--arena-bottom);width:clamp(420px,43vw,600px);height:var(--arena-command-height);min-height:0;max-height:calc(100% - 100px);overflow:auto;padding:12px 16px;gap:8px}
 .arena-battle>.arena-team{position:absolute;z-index:3;left:var(--arena-edge);bottom:var(--arena-bottom);width:clamp(350px,37vw,470px);padding:8px 12px}
 .arena-team-row{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(92px,1.2fr);gap:8px}
 .arena-team-card{min-height:90px}.arena-team-card>img{width:64px;height:64px}
 .arena-team-row>.arena-button{font-size:24px}.arena-team h3{font-size:24px;margin-bottom:6px}
 .arena-challenge h2{font-size:28px}.arena-challenge p{font-size:21px}
 .arena-answers .arena-button{min-height:52px;font-size:22px}
 .arena-battle .arena-fighter{width:260px;max-width:28%;gap:8px}
 .arena-battle .arena-fighter.you{left:23%;bottom:calc(var(--arena-command-height) + var(--arena-bottom) + 22px);transform:translateX(-50%)}
 .arena-battle .arena-fighter.opponent{right:23%;top:22%;transform:translateX(50%)}
 .arena-battle .arena-fighter.you .arena-actor{width:clamp(180px,24vh,280px);height:clamp(180px,24vh,280px);max-width:none;max-height:none}
 .arena-battle .arena-fighter.opponent .arena-actor{width:clamp(164px,21vh,240px);height:clamp(164px,21vh,240px);max-width:none;max-height:none}
 .arena-battle .arena-nameplate{max-width:260px;min-height:62px;padding:7px 10px}
 .arena-battle .arena-nameplate strong{font-size:22px}
 .arena-battle .arena-hearts>img{width:24px;height:24px}
 .arena-battle .arena-team-card .arena-hearts>img{width:12px;height:12px}
 .arena-battle .arena-round{display:block;top:78px;font-size:19px;background:#fffaf0e8;padding:4px 12px}
}
@media(min-width:900px) and (min-height:601px) and (max-height:720px) and (orientation:landscape){
 .arena-page:has(.arena-battle){--arena-command-height:238px}
 .arena-battle .arena-fighter.you{bottom:calc(var(--arena-command-height) + var(--arena-bottom) + 8px)}
 .arena-battle .arena-fighter.opponent{top:19%}
 .arena-battle .arena-fighter.you .arena-actor{width:162px;height:162px}
 .arena-battle .arena-fighter.opponent .arena-actor{width:150px;height:150px}
 .arena-battle .arena-nameplate{min-height:52px}.arena-battle .arena-nameplate strong{font-size:19px}
 .arena-challenge h2{font-size:24px}.arena-answers .arena-button{min-height:46px;font-size:19px}
}