.lobby { max-width: 820px; margin: 0 auto; padding: 24px 28px 72px; }
.lobby-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 48px; }
.lobby-header a { font-size: 22px; font-weight: 700; color: var(--nav); text-decoration: none; }
.lobby h1 { max-width: 600px; font-size: clamp(30px, 5vw, 42px); line-height: 1.15; letter-spacing: -.03em; margin: 0 0 18px; }
.lobby h2 { font-size: 20px; margin: 12px 0; }
.lobby-intro { color: var(--muted-strong); font-size: 18px; max-width: 620px; }
.lobby #status { min-height: 24px; padding: 12px 0; color: var(--ink-soft); }
.lobby .connection-card { padding: 24px; margin: 18px 0 32px; }
.lobby button { background: var(--blue); color: #fff; border: 0; border-radius: 7px; padding: 10px 16px; }
.lobby button:focus-visible, .lobby a:focus-visible, .lobby input:focus-visible, .lobby select:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.lobby .device-code { display: block; font: 30px/1.5 var(--mono); letter-spacing: .18em; color: var(--ink); padding: 12px 0 20px; }
.lobby form { display: grid; gap: 14px; max-width: 420px; }
.lobby select { padding: 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--ink); }
.confirm-code { display: flex; align-items: center; gap: 10px; }
.confirm-code input { width: 18px; height: 18px; }
.lobby .bot-row { padding: 18px 0; border-top: 1px solid var(--line); display: flex; gap: 18px; justify-content: space-between; align-items: center; }
.bot-row p { margin: 4px 0; color: var(--muted-strong); }
.bot-row button { background: var(--paper); color: var(--red); border: 1px solid var(--line); }
.lobby li { margin: 12px 0; }
.lobby code { overflow-wrap: anywhere; font: 13px var(--mono); background: var(--surface); padding: 3px 6px; border-radius: 4px; }
.lobby-note { font-size: 14px; color: var(--muted-strong); }
@media (max-width: 540px) { .lobby { padding: 20px 18px 48px; } .lobby-header { padding-bottom: 32px; } .lobby .connection-card { padding: 18px; } .lobby .bot-row { align-items: flex-start; flex-direction: column; } }