.online-status { display:flex; justify-content:space-between; gap:12px; padding:0 3px 14px; font-size:11px; color:var(--muted); }
#connection-status::before { content:'●'; color:#8dbb8e; margin-right:7px; }
body.offline #connection-status::before { color:#e3a779; }
.online-form { width:min(100%,360px); display:grid; gap:12px; text-align:left; }
.online-form label { font-size:12px; color:var(--muted); }
.online-form input { min-height:48px; width:100%; padding:12px; border-radius:6px; border:1px solid #586749; background:#10221b; color:var(--ink); font:inherit; }
.online-form input[name=code] { text-transform:uppercase; letter-spacing:3px; }
.online-form .button { width:100%; }
.online-divider { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:11px; margin:4px 0; }
.online-divider::before,.online-divider::after { content:''; height:1px; background:var(--line); flex:1; }
.room-code { font-size:28px; letter-spacing:5px; color:var(--gold-light); border:1px dashed #586749; border-radius:8px; padding:13px 18px; }
.online-seats { width:min(100%,400px); display:grid; gap:10px; }
.online-seat { display:flex; justify-content:space-between; gap:16px; align-items:center; border:1px solid var(--line); border-radius:8px; padding:15px; font-size:13px; }
.online-seat small { color:var(--muted); }
.online-seat.ready { border-color:#8dbb8e; }
.online-wait { color:var(--muted); display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; font-size:12px; }
.online-wait i { display:block; height:8px; width:8px; border-radius:50%; background:var(--gold); animation:online-pulse 1.8s ease-in-out infinite; }
@keyframes online-pulse { 50% { opacity:.25; } }
.online-dialog-body { display:grid; gap:18px; padding:24px; color:var(--muted); font-size:13px; }
#online-error { color:#efb099; text-align:center; padding:12px; font-size:13px; }
#online-error:empty { display:none; }
#online-castle-cards { display:flex; justify-content:center; gap:18px; padding:30px 22px 40px; }
#online-castle-cards .card { --card-w:78px; --card-h:108px; }
#online-castle-cards .wall { width:78px; }
.online-mode.busy #online-root button,.online-mode.offline #online-root [data-local-card],.online-mode.offline #online-root [data-local-action] { pointer-events:none; opacity:.65; }
.online-mode .privacy-screen .online-form .button { width:100%; }
.online-mode .online-result-wait { text-align:center; color:var(--muted); margin-top:15px; font-size:12px; }
@media(max-width:680px){
  .online-status { padding-bottom:10px; font-size:9px; }
  .online-mode .privacy-screen { min-height:calc(100dvh - 170px); }
  .online-mode .top-actions .button { max-width:none; }
  .online-mode .online-wait { font-size:10px; }
  .online-mode .room-code { font-size:24px; letter-spacing:4px; }
  .online-mode .online-seat { padding:12px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce){.online-wait i{animation:none;}}
.online-mode .army-header h2 { min-width:0; overflow-wrap:anywhere; }
.online-mode .card.committed:not(.leaving) { outline:2px solid var(--gold-light); outline-offset:2px; }
.online-mode .army:not(.local-setup) .army-header .online-player-name { display:block; color:var(--muted); font:10px "Segoe UI",Arial,sans-serif; line-height:1.5; }
.online-timers{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin:0 0 12px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:.8rem;color:var(--gold-light);font-variant-numeric:tabular-nums}
.online-timers[hidden],.online-timers [hidden]{display:none}
#reconnect-clock{color:#f0b4a0}