/* Online match state stays beside the phase and never covers the board. */
.online-room-code { display:flex; align-items:center; gap:7px; white-space:nowrap; padding:7px 10px; border:1px solid #9caec544; border-radius:4px; background:#121f30aa; }
.online-room-code>small { color:#aebfd4; font-size:8px; letter-spacing:1px; }
.online-room-code>b { font-size:12px; font-weight:600; letter-spacing:2px; color:#f1d69f; }
.is-online .arena-clock:not(.has-timer) { display:none; }
.online-readiness { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px 15px; margin:7px 0 0; color:#b9c9da; font-size:10px; line-height:1.4; }
.online-readiness>span { display:inline-flex; align-items:center; gap:6px; max-width:100%; overflow-wrap:anywhere; }
.online-readiness i { display:inline-block; flex:none; width:5px; height:5px; border:1px solid #9aaec7; border-radius:50%; }
.online-readiness .is-ready { color:#b5e2d0; }
.online-readiness .is-ready i { background:#a7dec7; border-color:#a7dec7; }
.online-readiness>strong { color:#ffd09b; flex-basis:100%; font-size:10px; font-weight:500; }
.is-online .commander-name>strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.is-online .arena-final-score>span { max-width:40%; overflow-wrap:anywhere; }
.is-online.is-committed .deploy-card:disabled,
.is-online.is-committed .hand-card:disabled,
.is-online.is-committed .bench-card:disabled:not(.exhausted),
.is-online.is-committed .combat-mode button:disabled.active,
.is-online.is-committed .field-choice:disabled.selected { opacity:1; cursor:default; }
.is-online.is-committed .duel-button:disabled { opacity:1; color:#c6d8e8; background:linear-gradient(135deg,#34485b,#233547); border-color:#7890a8; box-shadow:none; }
@media(min-width:901px) {
  .is-online .arena-phase-announcement { padding:0 170px; }
}
@media(min-width:901px) and (max-height:760px) {
  .is-online .arena-topbar { min-height:54px; gap:14px; }
  .is-online .arena-phase-announcement { margin:3px 0; }
  .is-online .arena-phase-announcement>h1 { font-size:21px; }
  .is-online .arena-phase-announcement>p { margin-top:4px; }
  .is-online .online-readiness { margin-top:4px; font-size:9px; }
}
@media(max-width:900px) {
  .is-online .arena-topbar { gap:12px; }
  .is-online .arena-brand { display:none; }
  .online-room-code { padding:6px 8px; }
  .online-room-code>b { font-size:11px; }
}
@media(max-width:620px) {
  .is-online .arena-topbar { gap:7px; padding-right:10px; padding-left:10px; }
  .online-room-code { gap:4px; padding:5px 6px; }
  .online-room-code>small { font-size:6px; }
  .online-room-code>b { font-size:10px; letter-spacing:1px; }
  .is-online .duel-progress { gap:7px; }
  .is-online .duel-progress>small { display:none; }
  .is-online .arena-phase-announcement>h1 { font-size:20px; }
  .is-online .arena-phase-announcement>p { font-size:10px; padding:0 4px; }
  .online-readiness { font-size:9px; gap:4px 12px; margin-top:5px; }
  .online-readiness>strong { font-size:10px; }
  .is-online .arena-final-score>span { font-size:10px; }
  .is-online.is-committed .duel-button { font-size:10px; }
}