/* Lobby between the opening and the city. Réveillon City neon palette: pink, magenta, sunset, gold, purple on night blue. */
#lobby {
  --l-ink: #f7f1e4;
  --l-muted: #aca7cd;
  --l-gold: #ffd166;
  --l-gold-deep: #FF8A3D;
  --l-pink: #FF00A8; --l-magenta: #E6007D; --l-purple: #6A00FF;
  --l-panel: rgba(9,13,37,.74);
  --l-line: rgba(251,205,234,.14);
  --l-display: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Bahnschrift', sans-serif;
  position: absolute; inset: 0; z-index: 24;
  display: grid; grid-template-rows: 76px minmax(0, 1fr) 44px;
  color: var(--l-ink); background: #070a1e;
  font-family: 'Bahnschrift', 'Segoe UI', system-ui, sans-serif;
  overflow: hidden; isolation: isolate;
  animation: lobby-in .45s ease-out both;
}
#lobby.hidden { display: none; }
.lobby-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lobby-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(1.15) brightness(.55); transform: scale(1.08); }
.lobby-backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 38% 55% at 50% 62%, #ffd16626, transparent 70%), linear-gradient(180deg, #070a1ecc 0%, #070a1e55 30%, #070a1e99 75%, #070a1ef2 100%); }
#lobby[data-tab='shops'] .lobby-backdrop img, #lobby[data-tab='settings'] .lobby-backdrop img { filter: blur(22px) saturate(1.1) brightness(.38); }

/* ---- top bar */
.lobby-nav { display: flex; align-items: center; gap: 18px; padding: 0 clamp(16px, 3vw, 40px); background: linear-gradient(180deg, #06091af0, #06091a99); border-bottom: 1px solid var(--l-line); min-width: 0; }
.lobby-mark { width: 150px; height: auto; flex-shrink: 0; filter: drop-shadow(0 0 10px #FF00A866); }
.lobby-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lobby-tabs::-webkit-scrollbar { display: none; }
.lobby-tab { flex-shrink: 0; border: 0; border-radius: 6px; padding: 9px 14px; background: transparent; color: var(--l-ink); font: 700 14px/1 'Bahnschrift', 'Segoe UI', sans-serif; letter-spacing: .6px; cursor: pointer; transition: background .15s, color .15s; }
.lobby-tab:hover { background: #ffffff1a; }
.lobby-tab[aria-selected='true'] { background: linear-gradient(100deg, var(--l-purple), var(--l-pink)); color: #fff; box-shadow: 0 2px 14px #FF00A855; }
.lobby-profile { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.lobby-wallet { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; padding: 6px 12px; border: 1px solid #ffd16655; border-radius: 6px; background: #0c1132b3; }
.lobby-wallet small { font-size: 9px; letter-spacing: 1.6px; color: var(--l-muted); }
.lobby-wallet b { font-size: 16px; color: var(--l-gold); font-variant-numeric: tabular-nums; }
.lobby-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid var(--l-gold); background: radial-gradient(circle at 50% 30%, #990c65, #0c1132); }

/* ---- shared */
.lobby-pages { position: relative; min-height: 0; }
.lobby-page { position: absolute; inset: 0; padding: 22px clamp(16px, 3vw, 40px); }
.lobby-page[hidden] { display: none; }
.lobby-display { font-family: var(--l-display); font-weight: 400; letter-spacing: .6px; line-height: 1; text-transform: uppercase; transform: skewX(-6deg); transform-origin: left bottom; text-shadow: 0 3px 0 #0006; }
.lobby-title { font-size: clamp(30px, 3vw, 44px); margin-bottom: 14px; }
.lobby-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.2px; color: var(--l-gold); margin-bottom: 8px; }
.lobby-panel { background: var(--l-panel); border: 1px solid var(--l-line); border-radius: 10px; backdrop-filter: blur(10px); }
.lobby-btn { display: block; width: 100%; min-height: 46px; padding: 12px 18px; border: 1px solid #fac5e755; border-radius: 6px; background: #101640cc; color: var(--l-ink); font: 700 14px 'Bahnschrift', 'Segoe UI', sans-serif; letter-spacing: 1.2px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.lobby-btn:hover:not(:disabled) { border-color: var(--l-pink); background: #161f5acc; }
.lobby-btn:disabled { opacity: .55; cursor: default; }
.lobby-btn-gold { border-color: #ffe4a6; background: linear-gradient(110deg, #ffe5a8, #ffce5c); color: #1f1003; box-shadow: 0 4px 0 #ae4e0e; }
.lobby-btn-gold:hover:not(:disabled) { background: #ffe9b5; border-color: #fff; }
.lobby-btn-gold:disabled { background: #2c356c; color: #d8e3ea; border-color: transparent; box-shadow: none; opacity: 1; }
#lobby button:focus-visible { outline: 2px solid var(--l-ink); outline-offset: 3px; }
#lobby [hidden] { display: none !important; }

/* tone palette for collections and stores */
.tone-teal { --tone-a: #de1293; --tone-b: #1d134e; }
.tone-magenta { --tone-a: #ff6fca; --tone-b: #690946; }
.tone-ocean { --tone-a: #f04bb4; --tone-b: #17205c; }
.tone-amber { --tone-a: #ffca4d; --tone-b: #733309; }
.tone-lime { --tone-a: #b4dc5c; --tone-b: #29551f; }
.tone-sky { --tone-a: #f36bc1; --tone-b: #141c50; }
.tone-coral { --tone-a: #ffa86e; --tone-b: #6b2223; }
.tone-violet { --tone-a: #ff85d2; --tone-b: #3a0a7e; }
.tone-green { --tone-a: #ef34aa; --tone-b: #1d134e; }
.tone-steel { --tone-a: #ada8ce; --tone-b: #222954; }

/* ---- 3D stage */
.lobby-preview { position: absolute; z-index: 1; display: none; cursor: grab; touch-action: none; }
.lobby-preview:active { cursor: grabbing; }
/* A canvas is a replaced element: top+bottom alone would not stretch it, so heights are explicit. */
#lobby[data-tab='play'] .lobby-preview { display: block; top: 84px; height: calc(100% - 84px - 132px); left: 30%; width: 40%; }
#lobby[data-tab='locker'] .lobby-preview, #lobby[data-tab='collection'] .lobby-preview { display: block; top: 92px; height: calc(100% - 92px - 236px); right: clamp(16px, 3vw, 40px); width: 32%; }
#lobby.stage-loading .lobby-preview { opacity: .35; transition: opacity .2s; }
.lobby-pages, .lobby-foot { z-index: 2; }
.lobby-pages, .lobby-page { pointer-events: none; }
.lobby-page > * { pointer-events: auto; }

/* ---- play */
.lobby-home { display: grid; grid-template-columns: minmax(270px, 340px) 1fr minmax(270px, 340px); gap: 24px; align-items: start; }
.lobby-story { padding: 20px 20px 16px; }
.lobby-story h2 { font-size: 30px; margin-bottom: 16px; }
.lobby-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.lobby-stats div { padding: 9px 11px; background: #ffffff0d; border-radius: 6px; }
.lobby-stats dt { font-size: 10px; letter-spacing: 1.4px; color: var(--l-muted); text-transform: uppercase; }
.lobby-stats dd { font-size: 15px; font-weight: 700; margin-top: 3px; }
.lobby-steps { list-style: none; display: grid; gap: 8px; }
.lobby-steps li { display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: 'check text route' 'check meta route'; column-gap: 10px; align-items: center; padding: 10px 11px; border-radius: 6px; background: #ffffff0a; border: 1px solid transparent; }
.lobby-step-check { grid-area: check; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ffd16699; }
.lobby-steps .is-done .lobby-step-check { background: #f47bc8; border-color: #f47bc8; box-shadow: inset 0 0 0 3px #0d1234; }
.lobby-steps .is-done .lobby-step-text { color: var(--l-muted); text-decoration: line-through; }
.lobby-step-text { grid-area: text; font-size: 13px; font-weight: 600; }
.lobby-step-meta { grid-area: meta; font-size: 11px; color: var(--l-gold); letter-spacing: .5px; margin-top: 2px; }
.lobby-step-route { grid-area: route; border: 1px solid #fac5e755; border-radius: 4px; background: transparent; color: var(--l-ink); font: 700 10px 'Bahnschrift', sans-serif; letter-spacing: 1.2px; padding: 6px 9px; cursor: pointer; }
.lobby-step-route:hover { border-color: var(--l-gold); color: var(--l-gold); }
.lobby-hero-label { grid-column: 2; align-self: end; justify-self: center; text-align: center; margin-bottom: 4px; text-shadow: 0 2px 12px #000a; pointer-events: none; }
.lobby-hero-label strong { display: block; font: 400 30px var(--l-display); letter-spacing: .6px; text-transform: uppercase; }
.lobby-hero-label span { font-size: 11px; letter-spacing: 2px; color: var(--l-gold); }
.lobby-home { height: 100%; grid-template-rows: 1fr; }
.lobby-launch { grid-column: 3; align-self: end; display: grid; gap: 10px; }
.lobby-mode { position: relative; overflow: hidden; padding: 92px 18px 16px; border-radius: 10px; border: 1px solid #ffd16666; background: linear-gradient(180deg, transparent 0%, #070a1ee6 62%), url('/assets/ui/city-arrival.webp') 60% 30% / cover; }
.lobby-mode h3 { font-size: 30px; }
.lobby-mode p:last-child { font-size: 12px; color: #d3dfe7; margin-top: 8px; line-height: 1.5; }
.lobby-play { position: relative; min-height: 92px; border: 2px solid #ffb3e6; border-radius: 8px; background: linear-gradient(115deg, var(--l-purple) 0%, var(--l-pink) 55%, #FF8A3D 100%); color: #fff; cursor: pointer; box-shadow: 0 6px 0 #8a0050, 0 14px 40px #FF00A866; transition: transform .12s, box-shadow .12s; text-shadow: 0 2px 8px #0006; }
.lobby-play span { display: inline-block; font: 400 52px/1 var(--l-display); letter-spacing: 1px; transform: skewX(-8deg); }
.lobby-play:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #8a0050, 0 18px 46px #FF00A899; }
.lobby-play:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a0050; }

/* ---- locker / collection */
.lobby-gallery { display: grid; grid-template-columns: minmax(0, 1fr) 32%; gap: 28px; }
.lobby-gallery-main { display: flex; flex-direction: column; min-height: 0; }
.lobby-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lobby-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--l-line); background: #0d1232b3; color: var(--l-ink); font: 700 12px 'Bahnschrift', sans-serif; letter-spacing: .8px; cursor: pointer; }
.lobby-chip small { font-size: 11px; color: var(--l-muted); font-weight: 400; }
.lobby-chip[aria-pressed='true'] { background: var(--l-ink); color: #0a0f2a; border-color: var(--l-ink); }
.lobby-chip[aria-pressed='true'] small { color: #484274; }
.lobby-grid { flex: 1 1 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 12px; overflow-y: auto; padding: 4px 6px 24px 2px; min-height: 0; scrollbar-color: #ffffff33 transparent; }
.lobby-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; overflow: hidden; padding: 10px; border: 2px solid transparent; border-radius: 9px; color: #fff; text-align: left; cursor: pointer; background: radial-gradient(circle at 50% 28%, var(--tone-a) 0%, var(--tone-b) 78%); box-shadow: 0 6px 16px #0007; transition: transform .14s, border-color .14s; }
.lobby-card::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, #000b); z-index: 0; }
.lobby-card img { position: absolute; inset: 0 0 8%; width: 100%; height: 92%; object-fit: contain; object-position: 50% 30%; filter: drop-shadow(0 6px 8px #0007); }
.lobby-card > span { position: relative; z-index: 1; }
.lobby-card-name { font-size: 14px; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 4px #000c; }
.lobby-card-meta { font-size: 10px; letter-spacing: 1px; color: #ffffffb3; text-transform: uppercase; margin-top: 3px; }
.lobby-card:hover { transform: translateY(-3px); border-color: #ffffffaa; }
.lobby-card[aria-pressed='true'] { border-color: var(--l-pink); box-shadow: 0 0 0 2px #FF00A866, 0 10px 26px #0009; }
.lobby-badge { position: absolute !important; top: 8px; left: 8px; padding: 3px 7px; border-radius: 4px; background: var(--l-gold); color: #1e0f02; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.lobby-empty { color: var(--l-muted); font-size: 13px; }
.lobby-showcase { grid-column: 2; align-self: end; display: grid; gap: 8px; padding: 16px 18px; border-radius: 10px; background: linear-gradient(180deg, #0a0e28b3, #0a0e28f2); border: 1px solid var(--l-line); }
.lobby-showcase h3 { font-size: 34px; }
.lobby-showcase p:not(.lobby-eyebrow) { font-size: 12px; color: #cbc7e0; line-height: 1.5; min-height: 36px; }

/* ---- shops */
.lobby-shops { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 18px; padding-right: 0; }
.lobby-rail { align-self: center; display: flex; flex-direction: column; gap: 10px; padding: 12px 7px; border-radius: 999px; background: #0d1232cc; border: 1px solid var(--l-line); }
.lobby-rail-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #ffffff55; cursor: pointer; }
.lobby-rail-dot[aria-current] { background: var(--l-ink); box-shadow: 0 0 0 3px #ffffff33; }
/* Stores are short, so they sit side by side like themed shop groups and wrap. */
.lobby-shop-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 26px 34px; overflow-y: auto; padding: 0 clamp(16px, 3vw, 40px) 40px 2px; scroll-padding-top: 4px; scrollbar-color: #ffffff33 transparent; }
.lobby-shop-section { min-width: 0; }
.lobby-shop-head { display: grid; gap: 4px; margin-bottom: 12px; }
.lobby-shop-head h2 { font-size: clamp(24px, 2.2vw, 34px); white-space: nowrap; }
.lobby-shop-head span { font-size: 12px; color: var(--l-muted); }
.lobby-shop-row { display: flex; flex-wrap: wrap; gap: 12px; }
.lobby-shop-row .lobby-item { width: 154px; }
.lobby-item { aspect-ratio: 3 / 4.2; background: linear-gradient(160deg, var(--tone-a) 0%, var(--tone-b) 92%); }
.lobby-item-icon { position: absolute; top: 14%; left: 50%; width: 52%; transform: translateX(-50%); fill: none; stroke: #ffffffe6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 6px 10px #0006); }
.lobby-item-icon path[fill] { stroke: #ffffffcc; stroke-width: 2.4; }
.lobby-card-price { font-size: 14px; font-weight: 700; color: var(--l-gold); margin-top: 4px; }
.lobby-detail { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 40px; align-items: center; padding: 24px clamp(16px, 5vw, 80px); background: #070a1ee8; backdrop-filter: blur(8px); animation: lobby-in .25s ease-out both; }
.lobby-detail-info { display: grid; gap: 10px; padding: 26px; border-radius: 10px; background: linear-gradient(180deg, #121947, #0d1232); border: 1px solid #ffd16655; }
.lobby-detail-info h2 { font-size: 40px; }
.lobby-detail-info p { font-size: 13px; color: #d2cfe4; line-height: 1.5; }
.lobby-item-where { color: var(--l-muted) !important; }
.lobby-price { font: 400 40px/1 var(--l-display) !important; color: var(--l-gold) !important; margin-top: 6px; }
.lobby-item-wallet { font-size: 12px !important; }
.lobby-detail-art { justify-self: center; display: grid; place-items: center; width: min(420px, 100%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--tone-a) 0%, var(--tone-b) 70%, transparent 71%); }
.lobby-detail-icon { width: 58%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 12px 18px #0007); }
.lobby-detail-icon path[fill] { stroke: #ffffffd9; stroke-width: 2; }

/* ---- settings */
.lobby-settings { display: grid; grid-template-columns: 220px minmax(0, 900px); gap: 32px; }
.lobby-settings-groups { display: grid; align-content: start; gap: 6px; }
.lobby-settings-group { text-align: left; padding: 13px 16px; border: 1px solid transparent; border-radius: 6px; background: #0d1232b3; color: var(--l-ink); font: 700 14px 'Bahnschrift', sans-serif; letter-spacing: 1.2px; cursor: pointer; }
.lobby-settings-group:hover { border-color: var(--l-line); }
.lobby-settings-group[aria-pressed='true'] { background: var(--l-ink); color: #0a0f2a; }
.lobby-settings-body { min-height: 0; overflow-y: auto; padding-right: 6px; }
.lobby-settings-rows { display: grid; gap: 6px; }
.lobby-setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); align-items: center; gap: 20px; padding: 12px 16px; border-radius: 6px; background: #0d1232b3; border: 1px solid transparent; }
.lobby-setting:hover, .lobby-setting:focus-within { border-color: #ffd16666; }
.lobby-setting-label { font-size: 14px; font-weight: 600; }
.lobby-setting-label small { display: block; font-size: 11px; font-weight: 400; color: var(--l-muted); margin-top: 4px; line-height: 1.4; }
.lobby-setting-choice { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; text-align: center; }
.lobby-setting-choice button { height: 34px; border: 0; border-radius: 5px; background: #ffffff14; color: var(--l-ink); font-size: 12px; cursor: pointer; }
.lobby-setting-choice button:hover { background: var(--l-gold); color: #1e0f02; }
.lobby-setting-value { font-weight: 700; font-size: 14px; }
.lobby-setting-range { display: grid; grid-template-columns: 1fr 46px; gap: 12px; align-items: center; }
.lobby-setting-range input { width: 100%; accent-color: var(--l-pink); }
.lobby-setting-range output { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lobby-keys-title { margin-top: 20px; }
.lobby-settings .controls-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; padding: 16px; border-radius: 6px; background: #0d1232b3; font-size: 13px; }
.lobby-settings .controls-grid b { color: var(--l-gold); }

/* ---- footer */
.lobby-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(16px, 3vw, 40px); border-top: 1px solid var(--l-line); background: #06091ae6; font-size: 11px; letter-spacing: 1.2px; color: var(--l-muted); }
.lobby-foot a { color: var(--l-gold); text-decoration: none; }
.lobby-foot a:hover, .lobby-foot a:focus-visible { text-decoration: underline; }
#lobby-status { color: var(--l-ink); letter-spacing: .3px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes lobby-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1100px) {
  .lobby-home { grid-template-columns: minmax(250px, 300px) 1fr minmax(250px, 300px); gap: 16px; }
  .lobby-mark { width: 84px; }
}
@media (max-width: 820px) {
  #lobby { grid-template-rows: auto minmax(0, 1fr) auto; }
  .lobby-nav { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 8px; }
  .lobby-mark { width: 72px; }
  .lobby-profile { margin-left: auto; }
  .lobby-tabs { order: 3; flex-basis: 100%; }
  .lobby-tab { padding: 8px 11px; font-size: 13px; }
  .lobby-page { position: static; height: 100%; overflow-y: auto; padding: 16px; }
  .lobby-pages > .lobby-page:not([hidden]) { display: block; }
  #lobby[data-tab='play'] .lobby-preview { top: 118px; bottom: auto; left: 0; width: 100%; height: 38vh; }
  #lobby[data-tab='locker'] .lobby-preview, #lobby[data-tab='collection'] .lobby-preview { display: none; }
  .lobby-home { padding-top: calc(38vh + 8px); }
  .lobby-home > * + * { margin-top: 14px; }
  .lobby-hero-label { display: block; }
  .lobby-gallery-main { min-height: auto; }
  .lobby-grid { overflow: visible; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .lobby-showcase { margin-top: 16px; }
  .lobby-shops { display: block; }
  .lobby-rail { display: none; }
  .lobby-shop-list { padding: 0; overflow: visible; }
  .lobby-detail { position: fixed; grid-template-columns: 1fr; overflow-y: auto; align-content: start; }
  .lobby-detail-art { width: 160px; order: -1; }
  .lobby-settings { display: block; }
  .lobby-settings-groups { grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
  .lobby-setting { grid-template-columns: 1fr; gap: 10px; }
  .lobby-foot { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #lobby, #lobby * { animation: none !important; transition: none !important; }
}