.online-mode #soloBtn, .online-mode #localBtn, .online-mode #onlineBtn, .online-mode #startHelp { display: none !important; }
#roomConnect, #roomNotice { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: max(16px, var(--sat)) max(16px, var(--sar)) max(16px, var(--sab)) max(16px, var(--sal)); background: rgba(3, 8, 19, .88); }
#roomConnect.hidden, #roomNotice.hidden, #roomLobby.hidden, #roomActions.hidden { display: none; }
.room-panel { width: min(520px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; border: 1px solid #537496; border-radius: 22px; padding: 24px; background: linear-gradient(145deg, #10243c, #081020); color: #eaf4ff; box-shadow: 0 24px 80px #0008; }
.room-panel h2 { margin: 0 0 10px; color: #b9e8ff; font-size: 25px; }
.room-panel p { color: #b7c9df; line-height: 1.6; }
.room-panel .btn { min-height: 44px; }
.room-panel form { display: flex; gap: 8px; margin: 16px 0; }
.room-panel input { min-width: 0; flex: 1; box-sizing: border-box; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 22px; letter-spacing: .12em; color: #def4ff; border: 1px solid #527496; background: #050e1b; border-radius: 12px; text-transform: uppercase; }
.room-error { color: #ffb4b8 !important; min-height: 24px; }
.room-secondary { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.room-share { display: grid; grid-template-columns: 160px 1fr; gap: 16px; text-align: left; align-items: center; padding: 14px; border: 1px solid #304964; border-radius: 16px; background: #102038; margin: 14px 0; }
.room-share img { width: 160px; height: 160px; border-radius: 8px; background: white; }
.room-share code { display: block; font: 700 26px monospace; letter-spacing: .15em; color: #b9ecff; margin: 8px 0; user-select: all; }
.room-share p { font-size: 13px; color: #b8c9db; margin: 6px 0; }
#roomLobby { font-size: 14px; }
.room-members { display: flex; gap: 8px; }
.room-member { flex: 1; padding: 8px 10px; text-align: left; color: #abeaff; border: 1px solid #345676; border-radius: 10px; background: #122139; }
.room-member[data-slot="1"] { color: #ffcc99; }
.room-member b { display: block; margin-bottom: 3px; }
.room-member.is-ready { border-color: #63dca7; }
#roomActions { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
#roomLobbyNote { color: #b6c9dd; font-size: 13px; margin: 10px 0 0; }
#roomStatus { position: fixed; z-index: 31; top: max(6px, var(--sat)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px - var(--sal) - var(--sar)); padding: 4px 10px; font-size: 11px; color: #bbd6e9; border: 1px solid #35556c; background: #081323ec; border-radius: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.online-mode #coopPrep.online-prep { inset-block-start: max(34px, calc(var(--sat) + 30px)); width: min(880px, calc(100% - 24px - var(--sal) - var(--sar))); margin-inline: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.online-prep .remote-hidden { display: none; }
.online-prep .coop-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.online-prep .coop-pane .card { display: flex; flex-direction: column; align-items: flex-start; padding: 12px; }
.online-prep .coop-pane.is-collapsed { max-width: 520px; justify-self: center; }
.online-mode #pauseScreen { display: none !important; }
.online-mode[data-ui-state="count"] #interBar { display: none !important; }
.online-mode:not(.ui-wide):not(.ui-coop-prep) #roomStatus { display: none; }
.online-mode .corebox [data-i18n="hud.localMode"] { display: none; }
.online-mode.ui-wide .pcard.me { top: calc(12px + var(--sat)); }
.online-mode.ui-wide .pcard:not(.me) { top: calc(var(--own-card-bottom, 90px) + 8px); }
#roomTools { border-top: 1px solid #304964; margin-top: 16px; padding-top: 16px; }
#roomTools .btn { margin: 4px; }
#roomLeaveConfirm { color: #ffc3a8; padding: 12px 0; }
@media (orientation: portrait) {
  .online-prep .coop-cards { grid-template-columns: 1fr; }
  .online-prep .coop-pane .card { display: grid; }
  .room-share { grid-template-columns: 1fr; gap: 10px; padding: 12px; text-align: center; }
  .room-share img { width: 144px; height: 144px; justify-self: center; }
  .room-share p { display: none; }
  .room-members { flex-direction: column; }
  .room-member b { display: inline; margin-inline-end: 10px; }
  .room-share code { font-size: 21px; }
  .room-share .btn { font-size: 12px; padding: 8px; }
  .room-panel { padding: 20px; border-radius: 16px; }
}
@media (max-height: 460px) {
  .room-share { grid-template-columns: 100px 1fr; padding: 8px; margin: 8px 0; }
  .room-share img { width: 100px; height: 100px; }
  .room-panel { padding: 16px; }
}