.online-lobby-layout,.online-room-layout {
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr); gap:16px;
}
.online-room-layout { grid-template-columns:minmax(0,2.4fr) minmax(220px,1fr); }
.online-lobby-panel,.online-room-tools,.online-results,.online-waiting,.online-voice { padding:18px; }
.online-mode { display:flex; gap:4px; background:#0f1913; border:1px solid var(--line); border-radius:9px; padding:4px; margin:0 0 16px; }
.online-mode button { flex:1; min-height:38px; border:0; border-radius:6px; background:none; color:var(--muted); }
.online-mode button[aria-pressed="true"] { background:#293a2e; color:var(--gold); font-weight:700; }
.online-fields { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.online-fields label { min-width:0; display:grid; gap:6px; color:var(--muted); font-size:13px; }
.online-fields input,.online-fields select,.online-dialog input:not([type="checkbox"]) {
  min-width:0; width:100%; min-height:42px; background:#111d16; border:1px solid #506251; color:var(--text); border-radius:8px; padding:7px 9px; font-size:16px;
}
.online-avatar-picker { border:0; padding:0; margin:15px 0 12px; }
.online-avatar-picker legend { color:var(--muted); margin-bottom:7px; font-size:13px; }
.online-avatar-picker > div { display:flex; gap:7px; flex-wrap:wrap; }
.online-avatar-picker label { position:relative; }
.online-avatar-picker input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.online-avatar-picker label > span,.online-avatar { display:grid; place-items:center; width:40px; height:40px; border:1px solid #4e6151; border-radius:9px; background:#18291f; color:var(--gold); font-size:21px; flex:none; }
.online-avatar-picker input:checked + span { background:#374334; border-color:var(--gold); }
.online-avatar-picker input:focus-visible + span { outline:2px solid var(--gold); outline-offset:2px; }
.online-toggle { display:flex; align-items:center; gap:7px; min-height:33px; color:var(--muted); font-size:14px; }
.online-toggle[hidden] { display:none; }
.online-toggle input { accent-color:#dab882; }
.online-divider { height:1px; background:var(--line); margin:10px 0; }
.online-message,.online-notice { color:var(--gold); min-height:0; font-size:14px; margin:8px 0; }
.online-message:empty,.online-notice:empty { display:none; }
.online-lobby-panel form > button[type="submit"] { margin-top:12px; width:100%; }
.online-room-preview { position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; min-height:225px; background:radial-gradient(ellipse at center,var(--room-stage-glow),var(--room-stage-shadow)); border:1px solid var(--line); border-radius:12px; }
.online-preview-felt.felt { inset:24px 8%; z-index:-1; }
.online-preview-content { display:grid; justify-items:center; gap:8px; }
.online-preview-content strong { font:24px Georgia,serif; }
.online-preview-content .card { width:29px; height:43px; font-size:14px; }
.online-preview-content .card span:nth-child(2) { font-size:13px; }
.online-side-note { color:var(--muted); font-size:14px; margin:10px 0 0; }
.online-connection { flex:none; align-self:end; border:1px solid var(--line); border-radius:20px; padding:7px 10px; font-size:12px; color:var(--muted); }
.online-connection.connected,.online-presence.connected { color:#9ed8a8; }
.online-room-tools { align-self:start; min-width:0; }
.online-code { display:flex; align-items:center; justify-content:space-between; gap:7px; margin:10px 0; }
.online-code strong { font-size:25px; letter-spacing:.12em; color:var(--gold); }
.online-roster { list-style:none; margin:0 0 10px; padding:0; }
.online-roster li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:7px; align-items:center; min-height:43px; overflow-wrap:anywhere; border-top:1px solid var(--line); font-size:13px; }
.online-roster .online-avatar { width:28px; height:28px; font-size:16px; }
.online-presence { font-size:11px; color:var(--muted); }
.online-tool-actions,.online-voice-actions { display:flex; flex-wrap:wrap; gap:7px; }
.online-tool-actions .button { font-size:12px; }
.online-waiting > p { margin:10px 0; }
.online-waiting .action-dock { border:0; padding:0; }
.online-voice { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; }
.online-voice p { margin:6px 0 0; font-size:13px; color:var(--muted); }
[data-online-action="voice-hold"] { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
[data-online-action="voice-hold"].recording { background:#9f4949; border-color:#f7a3a3; color:white; }
.online-speaking .online-avatar,.hero.online-speaking .hero-id { outline:2px solid #95dbae; outline-offset:2px; }
.online-stage[data-players="2"] .seat-1 { left:50%; transform:translateX(-50%); }
.online-seat-name { min-width:0; }
.online-seat-name strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.online-stage .hero-id { max-width:calc(100vw - 44px); }
.online-stage .hero-id > strong { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.online-seat .online-avatar { width:28px; height:28px; font-size:17px; }
.online-results { margin-top:10px; }
.online-dialog { padding:18px; width:min(560px,calc(100% - 28px)); }
.online-dialog h2 { margin-top:0; }
.online-dialog-close { display:flex; justify-content:end; margin-top:12px; }
.online-tool-actions :disabled,.online-voice-actions :disabled,.online-table :disabled { opacity:.45; }
@media (max-width:820px) {
  .online-lobby-layout,.online-room-layout { grid-template-columns:minmax(0,1fr); }
  .online-room-tools { padding:12px; }
  .online-roster { display:flex; flex-wrap:wrap; gap:5px 11px; }
  .online-roster li { border:0; min-height:28px; }
  .online-tool-actions .button { min-height:34px; }
}
@media (max-width:470px) {
  .online-shell .page-heading { flex-wrap:wrap; gap:6px; }
  .online-connection { font-size:11px; padding:5px 8px; }
  .online-voice { display:grid; padding:12px; }
  .online-seat .online-avatar { width:23px; height:23px; font-size:14px; }
  .online-room-preview { min-height:175px; }
}