#online { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; min-height:0; padding-top:calc(10px + env(safe-area-inset-top)); }
.online-entry { padding:8px 20px 24px; gap:14px; }
.online-header,.online-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; font-size:12px; }
.online-header a { color:var(--muted-1); }
.online-toolbar { padding:8px 0 18px; }
.online-connection { color:var(--danger-soft); }
.online-connection.on { color:var(--teal); }
.online-entry h1,.online-title h1 { font-family:var(--display); color:var(--gold); font-size:26px; margin:10px 0; }
.online-entry h2 { font-family:var(--display); color:var(--gold-light); font-size:19px; }
.online-lede,.online-note { font-size:12px; line-height:1.8; color:var(--muted-1); margin:0; }
.online-entry input:not([type=checkbox]),.online-entry select { width:100%; display:block; margin:8px 0 14px; padding:14px; border:2px solid var(--screen-line); border-radius:16px; background:rgba(255,255,255,.08); color:white; font:inherit; }
.online-entry select option { background:var(--screen); }
.online-entry form { border-top:1px solid var(--screen-line); padding-top:16px; }
.online-entry form .btn { width:100%; }
.online-who { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted-1); }
.online-who b { color:#fff; }
.online-who a { margin-left:auto; flex:none; font-size:12px; color:var(--gold-light); }
.online-rules { display:grid; gap:12px; padding:14px 0; font-size:13px; }
.online-rules input { margin-right:8px; }
.online-entry summary { cursor:pointer; color:var(--gold-light); margin-bottom:14px; }
.online-error { flex:none; color:var(--danger-soft); font-size:12px; line-height:1.5; overflow-wrap:anywhere; padding:0 12px; }
.online-error:empty { display:none; }
.online-game { flex:1; min-height:0; display:flex; flex-direction:column; background:#173829; }
.online-game>.online-toolbar { padding:6px 18px; }
.online-game>.screen-table { margin-top:0; }
.online-game .table { padding-top:0; min-height:440px; }
.online-event { flex:none; font-size:11px; color:var(--muted-1); padding:4px 18px 8px; line-height:1.5; overflow-wrap:anywhere; }
.online-title { text-align:center; padding:20px 0; }
.online-members { display:flex; justify-content:space-between; margin:24px 0 12px; font-size:12px; }
.online-footer { margin-top:auto; padding-top:20px; display:flex; flex-direction:column; gap:12px; }
.online-footer .hint { text-align:center; }
.online-rankings { display:flex; flex-direction:column; gap:9px; }
.online-score { display:flex; flex-direction:column; align-items:flex-end; line-height:1.3; }
.online-score b { font-family:var(--display); font-size:19px; color:var(--gold-light); }
.online-score i { font-style:normal; font-size:11px; color:var(--muted-1); }
.online-waiting { flex:1; display:grid; place-content:center; text-align:center; gap:10px; padding:40px 24px; }
.online-waiting h2 { font-family:var(--display); color:var(--gold); font-size:22px; margin:0; }
.online-result-name { flex:1; min-width:0; }
.online-modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:rgba(12,5,20,.72); }
.online-modal { width:min(100%,360px); padding:24px; border:1px solid rgba(240,194,75,.45); border-radius:22px; background:#2a1140; box-shadow:0 20px 60px #0008; }
.online-modal h2 { margin:0 0 12px; color:var(--gold-light); font-family:var(--display); font-size:21px; }
.online-modal p { margin:0 0 20px; color:var(--muted-1); font-size:13px; line-height:1.8; }
.online-modal>div { display:flex; gap:10px; }
.online-modal button { flex:1; }
.btn-danger { border:0; border-radius:20px; padding:13px 20px; background:var(--danger); color:white; font:inherit; font-weight:900; cursor:pointer; }
.room .seat { flex-wrap:wrap; }
.cpu-seat-action { width:100%; font-size:12px; padding:8px 0 0; text-align:center; }