.onlinePanel{border:1px solid #8ddff43d;background:linear-gradient(120deg,#142b3288,#211e2888);border-radius:8px;padding:14px 18px;margin:0 0 14px}
.roomConnect,.roomJoin,.roomLobby{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.roomConnect>span{color:#a99aaa;font-size:12px}
.onlinePanel button{padding:9px 15px;border-radius:4px;background:#b8e7e8;color:#17303a;font-size:12px;font-weight:700;white-space:nowrap}
.onlinePanel button:disabled{cursor:not-allowed}
.onlinePanel .roomQuiet{background:#ffffff0a;color:#d0c3d0;border:1px solid #ffffff23}
.roomJoin label{font-size:12px;color:#d7c7d6}
.roomJoin input{width:145px;padding:9px 12px;border:1px solid #c6e8ef4a;border-radius:4px;background:#111b24;color:#f6eee0;letter-spacing:3px;font:700 16px ui-monospace,monospace;text-transform:uppercase}
.roomIdentity{display:flex;gap:12px;align-items:center;margin-right:auto}.roomIdentity>span{font-size:11px;color:#bacbd4}
#roomCode{font:800 27px ui-monospace,monospace;letter-spacing:5px;color:#b0eced;user-select:all}
#roomRole,#roomPlayers,#roomMessage{margin:8px 0 0;font-size:11px;line-height:1.6;color:#c6c7d3}#roomMessage.error{color:#ffb2a3}
.onlineStatus{position:absolute;z-index:7;left:50%;top:142px;transform:translateX(-50%);padding:6px 13px;border:1px solid #8bddef40;border-radius:5px;background:#10212ddd;color:#d5f4f7;font-size:11px;white-space:nowrap;pointer-events:none}
.rosterCard:disabled{cursor:not-allowed!important}
@media(max-width:850px){.onlinePanel{padding:10px 12px}.roomConnect,.roomJoin,.roomLobby{gap:8px}.roomJoin input{width:122px}.onlineStatus{top:112px;font-size:9px;padding:5px 8px}.roomIdentity{flex:1 0 100%}}
.arena:has(.rosterMenu:not(.hidden)):has(.onlinePanel:not(.hidden)){min-height:0;aspect-ratio:auto}
.arena:has(.rosterMenu:not(.hidden)):has(.onlinePanel:not(.hidden))>canvas{position:absolute;inset:0;height:100%}
.rosterMenu:has(.onlinePanel:not(.hidden)){position:relative;min-height:1010px;overflow:visible}
.rosterMenu:has(.onlinePanel:not(.hidden))>*{flex-shrink:0}
.rosterMenu:has(.onlinePanel:not(.hidden)) .pickDuo{flex:none;min-height:235px}
.rosterMenu:has(.onlinePanel:not(.hidden)) .pickHero{min-height:235px}
.arena:has(.rosterMenu:not(.hidden)) #onlineStatus{display:none}
@media(max-width:1100px){.rosterMenu:has(.onlinePanel:not(.hidden)){min-height:1110px}.rosterMenu:has(.onlinePanel:not(.hidden)) .pickDuo,.rosterMenu:has(.onlinePanel:not(.hidden)) .pickHero{min-height:215px}}
@media(max-width:700px){.rosterMenu:has(.onlinePanel:not(.hidden)){min-height:1350px}.rosterMenu:has(.onlinePanel:not(.hidden)) .pickDuo,.rosterMenu:has(.onlinePanel:not(.hidden)) .pickHero{min-height:190px}}