/* Lobby games section and the Chef's Lobby chat panel. */
.lobby-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.lobby-game-shelf{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.chefs-lobby{border:1px solid var(--line);border-radius:14px;background:var(--soft);padding:14px;position:sticky;top:14px;display:flex;flex-direction:column;gap:10px;max-height:min(78vh,720px)}
.chefs-lobby-head{display:flex;align-items:center;justify-content:space-between}
.chefs-lobby-head h3{margin:0;font-size:18px}
.chefs-lobby-flame{font-size:18px}
.chefs-lobby p{margin:0 0 10px;font-size:13px;line-height:1.5}
.lobby-fine-print{font-size:12px;opacity:.8}
.lobby-primary,.lobby-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:10px;font-weight:700;cursor:pointer;text-decoration:none}
.lobby-primary{background:#b43225;border:1px solid #7e1f16;color:#fff7ee}
.lobby-primary:hover{background:#c73a2b}
.lobby-secondary{background:transparent;border:1px solid var(--line);color:inherit}
#lobby-age button{margin:4px 8px 4px 0}
#lobby-room{display:flex;flex-direction:column;gap:10px;min-height:0}
.lobby-roster-wrap h4{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
#lobby-roster{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;max-height:96px;overflow:auto}
.lobby-roster-member{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 9px;font-size:12px}
.lobby-roster-empty{border-style:dashed;opacity:.8}
.lobby-roster-challenge{border:0;background:none;color:inherit;font-size:11px;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px}
.lobby-badge{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:1px 5px;white-space:nowrap}
.lobby-badge.is-adult{background:color-mix(in srgb,#3e7a4f 18%,transparent)}
.lobby-badge.is-minor{background:color-mix(in srgb,#e3a008 22%,transparent)}
.lobby-badge.is-guest{opacity:.75}
#lobby-messages{list-style:none;margin:0;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--bg,transparent);flex:1;min-height:200px;max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.lobby-message{font-size:13px;line-height:1.45}
.lobby-message p{margin:2px 0 0;overflow-wrap:anywhere}
.lobby-message-head{display:flex;align-items:center;gap:6px}
.lobby-message-head strong{font-size:13px}
.lobby-message-head time{font-size:10px;opacity:.65;margin-left:auto}
.lobby-message.is-invite{border:1px dashed var(--line);border-radius:10px;padding:7px 9px;background:color-mix(in srgb,#b43225 7%,transparent)}
.lobby-invite-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.lobby-invite-actions .lobby-primary,.lobby-invite-actions .lobby-secondary{min-height:36px;padding:5px 11px;font-size:12px}
#lobby-form{display:flex;gap:8px}
#lobby-text{flex:1;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg,transparent);color:inherit;min-width:0}
.lobby-actions{display:flex;flex-wrap:wrap;gap:8px}
.lobby-actions .lobby-secondary{min-height:38px;padding:6px 11px;font-size:12px}
#lobby-status{margin:0;font-size:12px;min-height:1.2em}
#lobby-challenge-dialog,#lobby-member-dialog{border:1px solid var(--line);border-radius:14px;background:var(--soft);color:inherit;padding:18px;max-width:420px;width:calc(100vw - 32px)}
#lobby-challenge-dialog::backdrop,#lobby-member-dialog::backdrop{background:rgb(0 0 0/.45)}
#lobby-challenge-dialog h2,#lobby-member-dialog h2{margin:0 0 10px;padding-right:36px}
#lobby-challenge-form label{display:block;font-size:12px;font-weight:700;margin:10px 0 4px}
#lobby-challenge-form input,#lobby-challenge-form select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--bg,transparent);color:inherit}
#lobby-challenge-send{margin-top:14px}
#lobby-challenge-status{font-size:13px;min-height:1.3em;margin:8px 0 0}
@media (max-width:900px){
 .lobby-layout{grid-template-columns:1fr}
 .chefs-lobby{position:static;max-height:none}
 #lobby-messages{max-height:260px}
}
@media (max-height:500px){
 #lobby-messages{min-height:120px;max-height:160px}
}
.lobby-dialog-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--soft);color:inherit;font-size:18px;font-weight:700;cursor:pointer;line-height:1}

/* Chef cards: the whole roster chip is the button. */
.lobby-roster-open{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:2px 2px;min-height:32px}
.lobby-roster-open:focus-visible{outline:3px solid #b43225;outline-offset:2px;border-radius:8px}
#lobby-member-meta{margin:0 0 12px;font-size:13px}
#lobby-member-challenge{width:100%}
#lobby-ban-form{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
#lobby-ban-form h3{margin:0 0 8px;font-size:14px}
.lobby-ban-row{display:flex;gap:8px}
.lobby-ban-row input{width:84px;min-height:44px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--bg,transparent);color:inherit}
.lobby-ban-row select{flex:1;min-height:44px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--bg,transparent);color:inherit}
.lobby-danger{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-radius:10px;font-weight:700;cursor:pointer;background:#7e1f16;border:1px solid #5d130c;color:#fff7ee}
/* Game picker: a listbox that can show each game's artwork. */
#lobby-game-label{display:block;font-size:12px;font-weight:700;margin:10px 0 4px}
.lobby-game-picker{position:relative}
#lobby-game-button{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;border:1px solid var(--line);border-radius:9px;padding:6px 10px;background:var(--bg,transparent);color:inherit;font:inherit;font-weight:700;cursor:pointer;text-align:left}
#lobby-game-button img{width:48px;height:30px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.lobby-game-chevron{margin-left:auto;transform:rotate(90deg);width:16px;height:16px}
#lobby-game-button[aria-expanded="true"] .lobby-game-chevron{transform:rotate(-90deg)}
#lobby-game-list{position:absolute;z-index:30;inset-inline:0;top:calc(100% + 4px);margin:0;padding:6px;list-style:none;border:1px solid var(--line);border-radius:12px;background:var(--soft);box-shadow:0 12px 28px rgb(0 0 0/.25);display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto}
#lobby-game-list:focus-visible{outline:3px solid #b43225;outline-offset:2px}
#lobby-game-list [role="option"]{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;cursor:pointer;font-size:14px;font-weight:700;min-height:52px}
#lobby-game-list [role="option"] img{width:64px;height:40px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}
#lobby-game-list [role="option"]:hover{background:color-mix(in srgb,#b43225 10%,transparent)}
#lobby-game-list [role="option"][aria-selected="true"]{outline:2px solid #b43225;outline-offset:-2px;background:color-mix(in srgb,#b43225 8%,transparent)}