/* The arena uses solo's battle-layout, battlefield, card and control styles. */
#onlineBattle .zone-label{font:8px monospace;letter-spacing:1.2px;color:#aab9a2;margin-bottom:0}
#onlineBattle .active-slot>.zone-label{color:var(--lime);margin-bottom:5px}
#onlineBattle .enemy-slot>.zone-label{color:#c4a7dc}
#onlineLog{list-style:none;margin:0;padding:0}
.challenge-field .opponent-label .avatar img{width:100%;height:100%;object-fit:cover}
.challenge-field .opponent-label strong{overflow-wrap:anywhere}
.challenge-field .zone-cards{overflow-x:auto}
.challenge-field .active-slot .zone-cards{overflow:visible}
.challenge-field .opening-hidden:empty:after{content:'REVEALED WHEN BATTLE STARTS';text-align:center;padding:12px}
.online-card{display:block;position:relative;flex:0 0 68px;width:68px;border:0;padding:0;background:none;overflow:visible;color:var(--text);text-align:initial;border-radius:5px;transition:transform .18s;box-shadow:none}
.online-card > .card-play > img{display:block;width:100%;height:auto;aspect-ratio:2352/3504;object-fit:contain}
.online-card .card-play{cursor:pointer}
.online-card.playable-card .card-play{border-color:#b4f96b}
.online-card:focus-within{z-index:5}
.challenge-hand-card{position:relative;flex:0 0 87px;width:87px}
.challenge-hand-card>.inspect-card{z-index:6;cursor:pointer}
.challenge-more-menu{position:relative;z-index:60}
.challenge-more-menu>button{display:block;width:100%;padding:12px 8px;min-height:44px;text-align:left;background:transparent;color:var(--text);border:0}
.challenge-more-menu>button:hover{background:#34462c}
.challenge-more-menu>button:focus-visible{outline:2px solid var(--lime)}
#challengeControls .utility-actions button:disabled{opacity:.4;cursor:not-allowed}
#onlineBattle .piles .zone-label{font-size:7px;margin-bottom:10px}
.challenge-sidebar .saved-challenges{padding:16px 0;grid-column:1/-1}
.challenge-sidebar .saved-challenge-row{flex-wrap:wrap}
.challenge-sidebar .saved-challenge-row .btn{width:100%;justify-content:center}
@media(max-width:1150px){#onlineLog{height:130px;flex-basis:auto}}
@media(max-width:760px){
 #onlineBattle .zone-label{font-size:6px;letter-spacing:.5px}
 #onlineBattle{padding-bottom:320px}
 .online-page:has(#onlineBattle:not([hidden])) .online-main{padding-bottom:0}
 #challengeControls .challenge-hand-card{width:72px;flex-basis:72px}
 #challengeControls .challenge-hand-card>.card{width:100%;flex-basis:100%}
 #challengeControls .challenge-more-menu{position:absolute}
 #challengeControls .utility-actions{flex-direction:row}
 #desktopChallengeControls{display:none}
 #onlineBattle .battle-log{max-height:none}
}
@media(max-width:760px) and (max-height:550px){
 #onlineBattle{padding-bottom:240px}
 #challengeControls .challenge-hand-card{width:46px;flex-basis:46px}
}

/* Keep the turn clock centered with the hand in desktop and mobile layouts. */
.hand-turn-timer{width:fit-content;max-width:100%;box-sizing:border-box;margin:0 auto 8px;padding:5px 12px;border:1px solid #a8f35a55;border-radius:4px;background:#101b13;color:#c3f766;text-align:center;font:700 12px/1.3 monospace;font-variant-numeric:tabular-nums}
.hand-turn-timer[hidden]{display:none}
.hand-turn-timer[data-offline="true"]{color:#ffd17c;border-color:#ffd17c88}
@media(max-width:760px){.hand-turn-timer{font-size:11px;margin-bottom:5px;padding:4px 10px}}

/* One battle summary; instructions stay available inside More. */
#onlineBattle .match-strip>.micro,#onlineBattle #phaseLabel{display:none}
#onlineBattle .match-strip:has(#connection[hidden]){display:none}
#onlineBattle .match-strip{margin:0;padding:8px 16px;justify-content:flex-end}
#onlineBattle .challenge-sidebar>.side-title,#onlineBattle .challenge-sidebar .phase-track{display:none}
#onlineBattle .challenge-more-menu .tip-box{padding:0 0 12px;margin:0 0 12px;border-bottom:1px solid var(--line)}
#onlineBattle .challenge-more-menu .tip-box p{font-size:12px;line-height:1.5;margin:8px 0 0}
@media(max-width:760px){
 #onlineBattle .challenge-sidebar{padding:10px 16px;gap:8px;align-items:center}
 #onlineBattle .challenge-sidebar .turn-box{margin:0;padding:0;border:0}
 #onlineBattle .challenge-sidebar .turn-box h2{font-size:16px;margin:4px 0 0}
 #onlineBattle .challenge-sidebar .score-block{margin:0;padding:0;border:0;gap:20px}
 #onlineBattle .challenge-sidebar .score-block strong{font-size:23px}
 #onlineBattle .challenge-sidebar .score-block>div{gap:3px}
}

/* A compact mobile hand keeps more of the arena in view. */
@media(max-width:760px){
 #challengeControls{padding-top:7px;padding-left:12px;padding-right:12px}
 #challengeControls #onlineDock{position:relative;margin-bottom:6px;padding-bottom:6px}
 #challengeControls .hand-title{height:24px;margin:0;align-items:center}
 #challengeControls #handHint{display:none}
 #challengeControls .hand-turn-timer{position:absolute;top:0;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;padding:4px 8px;font-size:10px}
 #challengeControls #onlineHand{padding:5px 2px 2px;gap:6px}
 #challengeControls .challenge-hand-card{width:56px;flex-basis:56px}
 #challengeControls .challenge-hand-card>.card{width:100%;flex-basis:100%}
 #challengeControls #onlineHand .card-name{font-size:6px;padding:3px 2px}
 #challengeControls #onlineHand .card-stats{font-size:7px;padding:3px 2px;gap:2px}
 #challengeControls #onlineHand .card-stats small{font-size:5px}
 #challengeControls>.btn{min-height:44px;padding:10px;margin-bottom:5px}
 #challengeControls .utility-actions button,#challengeControls .battle-more summary{min-height:44px;padding:8px}
 #onlineBattle{padding-bottom:270px}
 html.battle-mobile:has(#onlineBattle:not([hidden])){scroll-padding-bottom:270px}
 #onlineBattle .battlefield .card{scroll-margin-bottom:270px}
}
@media(max-width:760px) and (max-height:550px){
 #challengeControls .challenge-hand-card{width:44px;flex-basis:44px}
 #onlineBattle{padding-bottom:220px}
 html.battle-mobile:has(#onlineBattle:not([hidden])){scroll-padding-bottom:220px}
}