/* The lobby shares the game's paper, felt, and card palette. */
.lobby-body { background:var(--paper); color:var(--ink); }
.lobby-container { max-width:600px; margin:36px auto; padding:0 22px; background:none; border:0; border-radius:0; text-align:left; }
.lobby-brand { margin-bottom:24px; }
.lobby-panel { background:#fffcf5; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 10px 28px #16382b0a; }
.lobby-heading { position:relative; padding:28px; background:radial-gradient(ellipse at top right,#285e4d,#19483d); color:#f5f0db; }
.lobby-heading h1 { margin:0 0 8px; color:#f5f0db; background:none; -webkit-text-fill-color:initial; font:400 32px/1.2 Georgia,serif; letter-spacing:-.8px; }
.lobby-heading p { color:#c5d2be; font-size:12px; }
.lobby-heading::after { content:'♧'; position:absolute; right:28px; top:20px; font:64px/1 Georgia,serif; color:#d5bc78; opacity:.7; }
.lobby-content { padding:26px 28px; }
.add-player-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:14px; margin:0 0 24px; }
.lobby-field { display:flex; flex-direction:column; gap:7px; color:#526458; font-size:11px; font-weight:600; }
.add-player-form input,.add-player-form select { width:100%; min-width:0; height:43px; background:#f5f3eb; color:var(--ink); border:1px solid #d9ddcf; border-radius:8px; font-size:12px; padding:10px 12px; }
.add-player-form input::placeholder { color:#8b9588; }
.add-player-form input:focus,.add-player-form select:focus { border-color:#8da184; outline:2px solid #dfe7d6; outline-offset:1px; }
#add-btn { grid-column:1 / -1; background:#e8ede1; color:var(--ink); border:1px solid #d9e1d0; font-size:12px; padding:11px; }
.seats-heading { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 12px; }
.seats-heading h2 { font:400 20px/1.2 Georgia,serif; letter-spacing:-.3px; }
#seat-count { color:var(--muted); font-size:10px; }
.player-list { margin:0; }
.lobby-empty { border:1px dashed #cbd4c2; border-radius:10px; text-align:center; padding:24px 16px; color:var(--muted); font-size:12px; }
.lobby-empty strong { display:block; color:#526458; font-weight:500; margin-bottom:4px; }
.lobby-empty span { font-size:11px; }
.player-item { gap:12px; background:#f5f3eb; border:1px solid #e1e3d7; padding:12px; margin-bottom:8px; border-radius:10px; }
.seat-avatar { display:grid; place-items:center; flex:0 0 34px; height:38px; background:#234e40; color:#ead9aa; font:20px/1 Georgia,serif; border-radius:7px; }
.seat-details { flex:1; min-width:0; }
.player-name { display:block; color:var(--ink); font-size:13px; overflow-wrap:anywhere; }
.player-type { display:block; padding:0; margin:3px 0 0; font-size:10px; font-weight:400; text-transform:none; letter-spacing:0; background:none; color:var(--muted); }
.remove-btn { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#73806f; font-size:21px; padding:0; }
.remove-btn:hover { background:#e5e8dd; color:var(--ink); }
.lobby-actions { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); text-align:center; }
#start-btn { width:100%; background:var(--green); color:#fff9e9; font-size:13px; padding:13px 18px; }
#start-btn:disabled { opacity:1; background:#dce2d4; color:#8b9784; }
.lobby-msg { color:var(--muted); font-size:11px; margin-top:10px; }
.error-msg { color:#a54334; font-size:12px; text-align:center; min-height:0; }
.error-msg:empty { display:none; }
.lobby-footer { text-align:center; color:#7b8678; font-size:10px; margin-top:18px; }
@media(max-width:480px) { .lobby-container { margin:22px auto; padding:0 14px; } .lobby-heading { padding:23px 20px; } .lobby-heading h1 { font-size:28px; } .lobby-heading::after { right:20px; font-size:54px; } .lobby-content { padding:22px 20px; } .add-player-form { grid-template-columns:1fr; gap:12px; } .lobby-brand { margin-bottom:18px; } }
a.lobby-brand { text-decoration:none; }
#connection-status { font-size:11px; color:var(--muted); margin-bottom:20px; }
.intro { color:var(--muted); font-size:14px; line-height:1.7; margin-bottom:22px; }
.lobby-field input, #invite-link { width:100%; min-width:0; height:44px; border:1px solid #d9ddcf; border-radius:8px; background:#f5f3eb; color:var(--ink); padding:10px 12px; font-size:14px; }
#create-btn { width:100%; margin-top:14px; }
.join-divider { text-align:center; color:var(--muted); font-size:11px; margin:25px 0 18px; }
.join-form { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; }
#room-code { text-transform:uppercase; letter-spacing:3px; }
.privacy-note { font-size:11px; line-height:1.7; color:var(--muted); margin-top:22px; }
.invite-box { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.invite-box strong { display:block; font-size:27px; letter-spacing:5px; font-weight:500; margin-top:6px; }
#invite-link { font-size:12px; margin:14px 0 28px; }
#bot-form { margin-top:22px; margin-bottom:0; padding-top:20px; border-top:1px solid var(--line); }
#error-msg { margin-top:16px; line-height:1.6; }
.hidden { display:none !important; }
#leave-btn { margin-top:14px; font-size:11px; padding:8px 12px; }

.student-note { grid-column:1 / -1; font-size:11px; line-height:1.6; color:var(--muted); }
.student-note[hidden] { display:none; }
.student-unavailable { font-weight:400; color:var(--muted); line-height:1.5; }