.lobby{--ink:#fff;--soft:#c0cbdc;--dim:#8b9bb4;--panel:#262b44;--edge:#3a4466;--field:#181425;--gold:#feae34;--gold-dark:#f77622;--red:#f04;color:var(--ink);z-index:10;background:#181425e0;place-items:center;padding:16px;font:15px/1.4 ui-monospace,Cascadia Mono,Consolas,monospace;display:grid;position:fixed;inset:0;overflow-y:auto}.lobby .card{background:var(--panel);border:2px solid var(--edge);gap:12px;width:min(360px,100%);padding:18px 20px 12px;display:grid;box-shadow:0 4px #0e0b16}.lobby h1{letter-spacing:.04em;color:var(--gold);text-shadow:2px 2px #3e2731;margin:0;font-size:24px}.lobby h2{color:var(--soft);margin:0 0 6px;font-size:13px;font-weight:400}.lobby .field{gap:4px;display:grid}.lobby .field span,.lobby legend{color:var(--soft);font-size:13px}.lobby input[name=name],.lobby input[name=code]{box-sizing:border-box;width:100%;font:inherit;color:var(--ink);background:var(--field);border:2px solid var(--edge);border-radius:0;padding:9px 10px}.lobby input:focus-visible,.lobby button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.lobby .chars{border:0;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;display:grid}.lobby .chars legend{margin-bottom:4px;padding:0}.lobby .chars label{position:relative}.lobby .chars input{opacity:0;position:absolute}.lobby .chars span{text-align:center;background:var(--field);border:2px solid var(--edge);cursor:pointer;padding:8px;display:block}.lobby .chars input:checked+span{border-color:var(--gold);color:var(--gold)}.lobby .chars input:focus-visible+span{outline:2px solid var(--gold);outline-offset:1px}.lobby button{font:inherit;color:var(--ink);background:var(--edge);cursor:pointer;border:0;border-radius:0;padding:9px 14px;box-shadow:0 3px #181425}.lobby button:hover{background:#5a6988}.lobby button:active{transform:translateY(2px);box-shadow:0 1px #181425}.lobby .primary{background:var(--gold-dark);font-weight:700}.lobby .primary:hover{background:var(--gold);color:#181425}.lobby .join{grid-template-columns:1fr auto;gap:8px;display:grid}.lobby input[name=code]{text-transform:uppercase;letter-spacing:.2em}.lobby input[name=code]::placeholder{letter-spacing:.2em;color:var(--dim)}.lobby .nearby{border-top:2px solid var(--edge);padding-top:12px}.lobby .nearby ul{gap:6px;margin:0;padding:0;list-style:none;display:grid}.lobby .nearby li{background:var(--field);grid-template-columns:1fr auto;grid-template-areas:"who button""meta button";align-items:center;column-gap:8px;padding:6px 6px 6px 10px;display:grid}.lobby .nearby .who{text-overflow:ellipsis;white-space:nowrap;grid-area:who;overflow:hidden}.lobby .nearby .meta{color:var(--dim);grid-area:meta;font-size:12px}.lobby .nearby button{grid-area:button;padding:6px 12px}.lobby .empty{color:var(--dim);margin:0;font-size:13px}.lobby .status{min-height:1.4em;color:var(--soft);margin:0;font-size:13px}.lobby .status.error{color:#ff6b81}.lobby .quiet{box-shadow:none;color:var(--dim);background:0 0;justify-self:center;text-decoration:underline}.lobby .quiet:hover{color:var(--ink);background:0 0}.lobby.busy button{opacity:.6;pointer-events:none}