/* The crown palette stays local to the front page. Gameplay colors are unchanged. */
#lobby {
  --lobby-blue:#102d62;
  --lobby-panel:#102348;
  --lobby-deep:#09172f;
  --lobby-gold:#ffdb68;
  --lobby-paper:#f5f1e5;
  --lobby-muted:#bac6dc;
  --lobby-line:#425f8d;
  width:min(1180px,100%);
  max-width:none;
  min-height:100svh;
  margin:0 auto;
  padding:40px clamp(20px,4vw,56px) 24px;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(350px,1fr);
  grid-template-rows:1fr auto;
  gap:36px 64px;
  color:var(--lobby-paper);
  background:none;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
}
#lobby .lobby-backdrop { background:var(--lobby-deep); }
#lobby .lobby-backdrop::after {
  background:linear-gradient(90deg,rgba(9,23,47,.78),rgba(9,23,47,.32)),linear-gradient(0deg,rgba(9,23,47,.9),transparent 65%);
}
#lobby-background { object-position:center 45%; }
#lobby .lobby-heading { display:flex;flex-direction:column;align-self:stretch;min-width:0; }
#lobby .brand {
  gap:12px;
  min-height:52px;
  font-size:27px;
  font-weight:600;
  letter-spacing:-.055em;
  color:var(--lobby-paper);
}
#lobby .brand-mark { width:36px;height:43px;filter:none; }
#lobby #background-toggle {
  width:36px;
  height:36px;
  min-height:36px;
  margin-left:auto;
  padding:0;
  border:1px solid #627da4;
  border-radius:2px;
  background:var(--lobby-deep);
  color:var(--lobby-paper);
  font-size:15px;
  letter-spacing:0;
  box-shadow:none;
}
#lobby #background-toggle:hover { border-color:var(--lobby-gold);color:var(--lobby-gold); }
#lobby .intro { padding:clamp(66px,12vh,140px) 0 50px;text-shadow:none; }
#lobby #lobby-headline {
  margin:0;
  font-family:inherit;
  font-size:clamp(40px,4.8vw,65px);
  font-weight:600;
  line-height:1.035;
  letter-spacing:-.055em;
  text-transform:none;
  text-wrap:pretty;
  color:var(--lobby-paper);
}
#lobby #lobby-headline>span { min-width:0; }
#lobby .lobby-play {
  align-self:center;
  width:100%;
  display:grid;
  gap:20px;
  padding:0;
  color:var(--lobby-paper);
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}
#lobby .join-panel { width:100%;margin:0;padding:28px;text-align:center;background:var(--lobby-panel);border:1px solid var(--lobby-line); }
#lobby #name {
  min-height:56px;
  margin:0 0 12px;
  padding:14px;
  border:1px solid #627da4;
  border-radius:2px;
  background:var(--lobby-deep);
  color:var(--lobby-paper);
  font-size:19px;
  font-weight:400;
  text-align:center;
  box-shadow:none;
}
#lobby #name::placeholder { color:var(--lobby-muted);opacity:1; }
#lobby .persona-picker { margin:0 0 14px;gap:6px; }
#lobby .persona-card {
  margin:0;
  min-width:0;
  min-height:90px;
  padding:11px 3px 10px;
  gap:5px;
  border:1px solid var(--lobby-line);
  border-radius:2px;
  background:var(--lobby-panel);
  color:var(--lobby-paper);
  box-shadow:none;
  text-shadow:none;
}
#lobby .persona-card:has(input:checked) { background:var(--lobby-blue);border-color:var(--lobby-gold);box-shadow:inset 0 -2px var(--lobby-gold); }
#lobby .persona-card:hover { border-color:#8da9d0; }
#lobby .persona-card .persona-symbol { color:var(--lobby-gold);font-size:23px;line-height:1; }
#lobby .persona-card b { font-size:15px;font-weight:600;letter-spacing:-.025em;text-transform:none; }
#lobby .persona-card small { font-size:10px;line-height:1.3;color:var(--lobby-muted); }
#lobby .persona-card input { min-height:0; }
#lobby .persona-card:has(input:focus-visible) { outline:2px solid var(--lobby-gold);outline-offset:3px; }
#lobby #join {
  min-height:54px;
  padding:15px 12px;
  border:1px solid var(--lobby-deep);
  border-radius:2px;
  background:var(--lobby-deep);
  color:var(--lobby-paper);
  justify-content:center;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.015em;
  box-shadow:none;
}
#lobby #join:hover { background:#ffe693;border-color:#ffe693; }
#lobby #join:active { background:#edc454; }
#lobby #join-status { margin:10px 0 0;min-height:20px;color:var(--lobby-muted);font-size:11px;line-height:1.5;text-shadow:none; }
#lobby :is(button,input):focus-visible { outline:2px solid var(--lobby-gold);outline-offset:3px; }
#lobby .lobby-leaderboard {
  margin:0;
  padding:24px 28px;
  border:1px solid var(--lobby-line);
  border-radius:0;
  background:var(--lobby-panel);
  box-shadow:none;
  text-shadow:none;
}
#lobby .lobby-leaderboard h2 { margin:0 0 12px;color:var(--lobby-paper);font-size:17px;font-weight:600;letter-spacing:-.04em; }
#lobby .leaderboard-scroll { max-height:232px;scrollbar-width:thin;scrollbar-color:#627da4 transparent; }
#lobby .lobby-leaderboard table { width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums; }
#lobby .lobby-leaderboard th { background:var(--lobby-panel);color:var(--lobby-muted);font-size:10px;font-weight:400;text-transform:none;letter-spacing:0; }
#lobby .lobby-leaderboard :is(th,td) { padding:10px 4px;border-bottom:1px solid #314b73; }
#lobby .lobby-leaderboard :is(th,td):first-child { width:34px;padding-left:0;font-size:11px; }
#lobby .lobby-leaderboard :is(th,td):last-child { padding-right:0; }
#lobby .lobby-leaderboard td:nth-child(2) { max-width:138px;font-weight:600; }
#lobby .lobby-leaderboard td:nth-child(3) { font-weight:600;color:var(--lobby-gold); }
#lobby .lobby-leaderboard tr.is-you { background:#1b427b;color:var(--lobby-paper); }
#lobby .board-avatar { width:22px;height:22px;margin-right:6px;border-radius:2px;object-fit:cover;vertical-align:middle; }
#lobby .lobby-leaderboard p { color:var(--lobby-muted);font-size:10px;line-height:1.5;margin:10px 0 0; }
#lobby .lobby-leaderboard .points-note { max-width:34em;margin-top:5px;color:var(--lobby-muted); }
#lobby .credits {
  grid-column:1/-1;
  align-self:end;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin:0;
  padding:18px 0 0;
  border-top:1px solid #425f8d;
  color:#c7d1e3;
  text-shadow:none;
  font-size:11px;
  line-height:1.65;
}
#lobby .credits p { margin:0; }
#lobby .credits p:last-child { text-align:right; }
#lobby .credits a { color:var(--lobby-gold);text-decoration-thickness:1px;text-underline-offset:3px; }
@media(max-width:760px) {
  #lobby { max-width:500px;padding:22px 20px max(20px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:24px; }
  #lobby .brand { min-height:43px;font-size:25px; }
  #lobby .brand-mark { width:31px;height:37px; }
  #lobby .intro { padding:34px 0 2px; }
  #lobby #lobby-headline { font-size:clamp(33px,8.8vw,43px);line-height:1.06;letter-spacing:-.045em; }
  #lobby .lobby-play { padding:0;gap:20px; }
  #lobby .join-panel,#lobby .lobby-leaderboard { padding:20px; }
  #lobby .credits { display:block;padding-top:16px;font-size:10px; }
  #lobby .credits p:last-child { margin-top:10px;text-align:left; }
  #lobby .lobby-backdrop::after { background:linear-gradient(0deg,rgba(9,23,47,.9),rgba(9,23,47,.6)); }
}
@media(max-width:360px) {
  #lobby { padding-left:14px;padding-right:14px; }
  #lobby .join-panel,#lobby .lobby-leaderboard { padding:16px; }
  #lobby #join { font-size:12px; }
  #lobby .persona-card small { font-size:9px; }
}

#lobby #join{background:var(--lobby-gold)!important;color:var(--lobby-deep)!important;border:1px solid var(--lobby-gold)!important;border-radius:3px!important;box-shadow:none!important}
#lobby #join:hover{background:#ffe693!important;border-color:#ffe693!important}
#lobby #join:active{background:#edc454!important}
#lobby .join-panel,#lobby .lobby-leaderboard{border-top:2px solid #b79854}
#lobby .persona-card:has(input:checked) b{color:var(--lobby-gold)}

/* Keep the desktop join code in the left column, clear of the form and credits. */
#lobby .lobby-qr{display:none}
@media(min-width:761px) and (hover:hover) and (pointer:fine){
 #lobby .lobby-qr{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:auto;padding-top:12px;width:fit-content;text-decoration:none;color:var(--lobby-paper);font-size:12px}
 #lobby .lobby-qr img{display:block;width:144px;height:auto;background:#fff}
 #lobby .lobby-qr strong{color:var(--lobby-gold);font-size:16px;font-weight:600}
}