/* Lobby presentation only; retain legacy mode controls for TOP's CPU entry. */
#app .online-panel > :is(#local-mode-button,#run-mode-entry){display:none!important}
#app .spectator-divider{display:none}
#app[data-screen="lobby"][data-mode="online"] > :is(.hero,.online-panel){max-width:560px;margin-left:auto;margin-right:auto}
#app[data-screen="lobby"][data-mode="online"] .hero .intro{line-height:1.8}
#app[data-screen="lobby"][data-mode="online"] .online-panel{padding:24px}
#app[data-screen="lobby"][data-mode="online"] .online-panel .section-heading{gap:12px;margin-bottom:22px;flex-wrap:wrap}
#app[data-screen="lobby"][data-mode="online"] .online-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#app[data-screen="lobby"][data-mode="online"] .online-controls > *{grid-column:auto;grid-row:auto;min-width:0}
#app[data-screen="lobby"][data-mode="online"] .online-controls .room-code-field{grid-column:1/-1;display:flex;flex-direction:column;gap:9px;margin-bottom:4px;font-size:13px;font-weight:700;color:var(--theme-ink,#53645a)}
#app[data-screen="lobby"][data-mode="online"] .room-code-field small{display:block;font-size:11px;font-weight:400;margin-top:4px;color:var(--theme-muted,#777f78)}
#app[data-screen="lobby"][data-mode="online"] .room-code-field input{min-height:48px;font-size:16px;text-align:left}
#app[data-screen="lobby"][data-mode="online"] .online-controls .online-button{min-height:48px;padding:11px 6px;font-size:13px;white-space:nowrap;overflow-wrap:normal}
#app[data-screen="lobby"][data-mode="online"] .online-controls .spectator-divider{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:12px 0 4px;color:var(--theme-muted,#777f78);font-size:12px}
#app[data-screen="lobby"][data-mode="online"] .spectator-divider::before,#app[data-screen="lobby"][data-mode="online"] .spectator-divider::after{content:"";height:1px;flex:1;background:var(--line)}
#app[data-screen="lobby"][data-mode="online"] #leave-room{grid-column:1/-1}
#app[data-screen="lobby"][data-mode="online"] #leave-room:disabled{display:none}
#app[data-screen="lobby"][data-mode="online"] .room-feedback{font-size:12px;line-height:1.8}
#app[data-screen="lobby"][data-mode="online"] .room-feedback:empty{display:none}
@media(max-width:390px){
  #app[data-screen="lobby"][data-mode="online"] .online-panel{padding:16px}
  #app[data-screen="lobby"][data-mode="online"] .brand{font-size:11px;letter-spacing:.06em;gap:6px}
  #app[data-screen="lobby"][data-mode="online"] .connection-state{font-size:10px}
}
/* Standard online preparation; battle DOM/CSS comes from RunBattleUI. */
#online-name-step,#online-pencil-step,#online-room-step{max-width:560px;margin:0 auto 18px;min-width:0}
#online-name-form{display:grid;gap:14px;margin-top:18px}#online-name{width:100%;min-width:0;min-height:48px;font:inherit;border:1px solid var(--line);border-radius:9px;padding:10px}
#online-pencil-step button,#online-room-back{min-height:48px;padding:10px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13px;background:var(--theme-tint-forest,#f0f5ed);color:var(--theme-forest,#326c4f)}
#online-pencil-next{background:#2d795d!important;color:white!important}#online-pencil-step button:disabled{opacity:.5}
.online-step-title{font-size:18px;margin-bottom:12px}
#app .online-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#app .room-code-field,#app .spectator-divider,#app #leave-room{grid-column:1/-1}
#app .online-controls .online-button{min-width:0;min-height:48px;padding:10px 5px;font-size:13px;white-space:nowrap}
#app .spectator-divider{display:flex;align-items:center;gap:12px;color:var(--theme-muted,#777f78);font-size:12px;margin-top:12px}
#app .spectator-divider:before,#app .spectator-divider:after{content:'';height:1px;flex:1;background:var(--line)}
#online-room-step .online-panel{padding:20px}#online-room-step .section-heading{flex-wrap:wrap;gap:10px}#online-room-step input{max-width:100%}
#online-turn[data-side=cpu]{color:var(--theme-fire,#b45248)}#online-battle{margin-top:18px}#online-result button{min-height:44px}
@media(max-width:390px){#online-room-step .online-panel{padding:14px}#online-room-step .connection-state{font-size:10px}}
/* Let shared battle cards grow naturally rather than use the retired viewport arena. */
#app[data-screen="battle"]{height:auto;min-height:100dvh;display:block;overflow:visible}
#app[data-screen="battle"] #online-room-step{max-width:560px;margin:14px auto}
#app[data-screen="battle"] .online-step-title{display:none}
#app[data-screen="battle"] .online-panel{display:block;padding:14px}
#app[data-screen="battle"] .online-controls>*:not(#leave-room){display:none}
#app .room-feedback:empty{display:none}
#app > .online-panel:has(#room-feedback:empty):has(#room-status[hidden]){display:none}