.lobby-page { min-height:100vh; background:radial-gradient(ellipse at 90% 10%,#e7e7d9 0,transparent 55%),var(--paper); font-family:var(--sans) }
.lobby-header,.lobby-main { width:min(1120px,calc(100% - 64px)); margin:auto }
.lobby-header { display:flex; align-items:center; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--line) }
.lobby-header img { display:block; width:218px; height:auto }
.lobby-back { font-size:14px; text-decoration:none; padding:12px 0 12px 20px; color:var(--jade) }
.lobby-main { padding:48px 0 36px }
.lobby-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px }
.lobby-kicker { color:var(--walnut); font-size:13px; letter-spacing:.13em; margin:0 0 12px }
.lobby-heading h1 { margin:0; font:500 clamp(28px,3.8vw,44px)/1.35 var(--serif) }
.lobby-connection { text-align:right; flex-shrink:0; font-size:12px; color:var(--muted) }
.lobby-connection p { margin:0 0 7px }
#connection { display:flex; justify-content:flex-end; align-items:center; gap:8px; color:var(--jade); font-size:14px }
#connection i { width:7px; height:7px; border-radius:50%; background:#a9ab9e }
#connection[data-state="live"] i { background:#518065; box-shadow:0 0 0 4px #51806517 }
#connection[data-state="unavailable"] i { background:#a17a42 }
.lobby-notice { border:1px solid #cbb58c; border-radius:8px; padding:14px 18px; margin:0 0 22px; background:#f0e7d5; font-size:14px; line-height:1.7 }
.lobby-notice[hidden] { display:none }
.lobby-live { display:grid; grid-template-columns:1.15fr 1fr; gap:20px }
.lobby-live article { border-radius:14px; padding:30px 34px; position:relative; overflow:hidden; min-height:286px }
.lobby-primary { color:#f2ead5; background:linear-gradient(135deg,#21483a,#112d25); border:1px solid #314e40; box-shadow:0 12px 30px #163e3410 }
.lobby-people { background:#faf8f1; border:1px solid var(--line) }
.metric-label { margin:0; font-size:16px; letter-spacing:.04em }
.metric-value { display:flex; gap:14px; align-items:baseline; margin:9px 0 8px; line-height:1.2 }
.metric-value strong { font-size:80px; font-weight:500; letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.metric-value span { font-size:17px; opacity:.7 }
.metric-description { margin:0; font-size:13px; line-height:1.7; color:var(--muted) }
.lobby-primary .metric-description { color:#b4c6b4 }
.tile-motif { display:flex; gap:6px; margin:25px 0 0; transform:rotate(-5deg); width:max-content; opacity:.8 }
.tile-motif span { display:grid; place-items:center; width:31px; height:40px; font:22px var(--serif); border-radius:4px; background:#e4d9b7; color:#173b2c; box-shadow:0 4px #63816c }
.tile-motif span:nth-child(2) { transform:translateY(-3px) }
.people-detail { display:flex; gap:20px; margin:26px 0 0; padding-top:20px; border-top:1px solid var(--line); justify-content:space-between }
.people-detail dt { color:var(--muted); font-size:12px; margin-bottom:8px }
.people-detail small { font-size:10px }
.people-detail dd { margin:0; font-size:25px; font-variant-numeric:tabular-nums }
.lobby-rooms { margin-top:30px; border:1px solid var(--line); border-radius:12px; background:#ffffff30; padding:24px 30px }
.rooms-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px }
.rooms-heading h2 { margin:0; font-size:18px; font-weight:500 }
.rooms-heading p { margin:0; font-size:13px; color:var(--muted) }
.room-breakdown { display:grid; grid-template-columns:repeat(3,1fr); margin-top:25px }
.room-breakdown article { display:grid; grid-template-columns:10px 1fr; column-gap:10px; padding:0 25px; border-left:1px solid var(--line) }
.room-breakdown article:first-child { padding-left:0; border:0 }
.room-dot { width:6px; height:6px; border-radius:50%; margin-top:7px; background:#aa8952 }
.room-dot.paused { background:#ad8070 }
.room-dot.finished { background:#829389 }
.room-breakdown h3 { margin:0; font-size:14px; font-weight:400; color:var(--muted) }
.room-breakdown p { grid-column:2; margin:7px 0 0; font-size:12px; color:var(--muted) }
.room-breakdown strong { font-size:32px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; margin-right:7px }
.lobby-small-stats { display:flex; gap:30px; margin-top:24px; padding-top:17px; border-top:1px solid var(--line); color:var(--muted); font-size:12px }
.lobby-small-stats p { margin:0 }
.lobby-small-stats strong { font-weight:500; color:var(--ink); margin:0 6px }
.lobby-footnote { margin-top:24px; color:var(--muted); font-size:12px; line-height:1.8 }
.lobby-footnote p { margin:8px 0 }
.lobby-footnote details { max-width:720px }
.lobby-footnote summary { width:max-content; cursor:pointer; text-decoration:underline; text-underline-offset:3px }
@media(max-width:640px) {
  .lobby-header,.lobby-main { width:calc(100% - 36px) }
  .lobby-header img { width:166px }
  .lobby-main { padding-top:30px }
  .lobby-heading { display:block; margin-bottom:22px }
  .lobby-connection { margin-top:20px; display:flex; justify-content:space-between; gap:8px; text-align:left }
  #connection { justify-content:flex-start }
  .lobby-live { grid-template-columns:1fr; gap:14px }
  .lobby-live article { padding:24px; min-height:unset }
  .metric-value strong { font-size:64px }
  .tile-motif { position:absolute; right:26px; top:35px; opacity:.35 }
  .lobby-rooms { padding:22px 18px; margin-top:20px }
  .room-breakdown article { padding:0 10px; grid-template-columns:1fr }
  .room-dot { display:none }
  .room-breakdown p { grid-column:1 }
  .room-breakdown h3 { font-size:12px }
  .lobby-small-stats { gap:16px; flex-wrap:wrap }
}