.online-top{padding-block:var(--sp-6) var(--sp-8)}.online-hero h1{margin-top:var(--sp-4)}.online-hero .lede{max-width:60ch}.online-top__grid{gap:var(--sp-8);align-items:start;display:grid}.online-top__entry{max-width:480px}@media (width>=900px){.online-top__grid{gap:var(--sp-12);grid-template-columns:minmax(0,1fr) minmax(360px,440px)}.online-top__grid .online-top__entry{grid-area:1/2/span 2;max-width:none}}.online-entry{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-2);flex-direction:column;display:flex}.online-entry__head{padding:var(--sp-4) var(--sp-4) 0}.online-entry__title{font-size:var(--fs-xl);margin:0}.online-entry__sub{margin:var(--sp-1) 0 0;color:var(--text-muted);font-size:var(--fs-sm)}.online-entry__body{gap:var(--sp-3);padding:var(--sp-4);flex-direction:column;display:flex}.online-entry__join{gap:var(--sp-1);flex-direction:column;display:flex}.online-entry__label{font-size:var(--fs-sm);font-weight:var(--fw-semibold)}.online-entry__row{gap:var(--sp-2);display:flex}.online-entry__code{min-width:0;min-height:var(--tap);padding:0 var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:var(--fw-semibold) 1.125rem / 1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;flex:1}.online-entry__code::placeholder{color:var(--text-muted);opacity:1}.online-entry__code:focus-visible{outline:var(--focus-w) solid var(--accent-ring);outline-offset:1px}.online-entry__code[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}.online-entry__go{min-width:92px}.online-entry__msg{min-height:3em;font-size:var(--fs-sm);text-align:center;margin:0;line-height:1.5}.online-entry__hint{color:var(--text-muted)}.online-entry__error{color:var(--danger);font-weight:var(--fw-semibold);text-align:start}.online-entry__slot{align-items:center;display:flex}.online-entry__slot:empty{display:none}html[data-online-last] .online-entry__slot,html[data-online-room] .online-entry__slot{min-height:56px;display:flex}.online-entry__note{color:var(--text-muted);font-size:var(--fs-sm);margin:0;line-height:1.5}.online-entry__continue{min-height:56px;padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);text-align:start;justify-content:space-between}.online-entry__continue-text{flex-direction:column;min-width:0;line-height:1.25;display:flex}.online-entry__continue-meta{color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--fw-medium)}.online-entry[aria-busy=true] .online-entry__hint{color:var(--text)}.online-toast{left:50%;bottom:calc(var(--sp-4) + env(safe-area-inset-bottom));z-index:var(--z-toast);align-items:center;gap:var(--sp-2);max-width:calc(100% - 2 * var(--sp-4));padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-3);font-weight:var(--fw-medium);visibility:hidden;transition:transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);display:flex;position:fixed;transform:translate(-50%,160%)}.online-toast[data-open]{visibility:visible;transition:transform var(--dur-3) var(--ease-out);transform:translate(-50%)}.online-toast .btn--sm{min-height:var(--tap)}.online-toast__close{width:var(--tap);padding:0}.online-how h2{font-size:var(--fs-xl)}.online-steps{gap:var(--sp-3);margin:var(--sp-3) 0 0;padding:0;list-style:none;display:grid}.online-steps li{gap:var(--sp-3);align-items:flex-start;display:flex}.online-steps__n{background:var(--accent-soft);width:30px;height:30px;color:var(--accent-strong);font:var(--fw-semibold) .95rem / 1 var(--font-display);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.online-links{gap:var(--sp-2);margin:var(--sp-6) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.online-links a{align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-4);border:1px solid var(--border-strong);border-radius:var(--r-pill);color:var(--text);font-weight:var(--fw-semibold);text-decoration:none;display:inline-flex}.online-links a:hover{border-color:var(--accent-strong);background:var(--accent-soft)}.online-note{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-sm)}.online-about{max-width:68ch;margin-top:var(--sp-4)}.online-card{border-color:var(--accent-strong)}.online-card .game-card__meta{gap:var(--sp-1) var(--sp-3);color:var(--text-muted);font-size:var(--fs-sm);flex-wrap:wrap;display:flex}.online-card .game-card__meta span{align-items:center;gap:var(--sp-1);display:inline-flex}.online-paused{padding-block:var(--sp-8)}.online-paused.card{padding:var(--sp-6)}.online-paused .lede{max-width:60ch}