/* stageLobby.css — the L2 STAGE LOBBY surface (src/stageLobby.js).
 *
 * A faithful port of the locked LB-2 mock (mocks/uplift-stage-lobby-mock.html · data-view="lobby",
 * LB-2 ceremonial-centre variant). Every selector is scoped under #sfes-lobby (prefix .sfl-*) so
 * it can't collide with the L3 turn surface (#sfes) or the rest of the app. Reduced-motion safe.
 */

#sfes-lobby {
  --violet: #8b8bff; --violet-line: rgba(139, 139, 255, .22);
  --cyan: #36d6e0; --heat: #ffb24d; --heat2: #ff8c3c; --kernel: #ffd27a; --gold: #ffd27a;
  --good: #5fd0a0; --rose: #ff6b6b;
  --zac: #5fc69e; --zac-dim: rgba(95, 198, 158, .09); --zac-line: rgba(95, 198, 158, .32);
  --ink: #eef0ff; --ink2: #aeb4d8; --ink3: #6b7099;
  --line: rgba(150, 160, 220, .16); --panel-line: rgba(150, 160, 220, .14);
  --mono: "Geist Mono", ui-monospace, Menlo, monospace; --sans: "Geist", Inter, system-ui, sans-serif;
  --ttl: var(--u-font-zone, "Michroma", sans-serif); --hud: var(--u-font-hud, "Chakra Petch", sans-serif);
  position: fixed; inset: 0; z-index: 1200; overflow: hidden;
  font-family: var(--sans); color: var(--ink); background: #04050c;
}
#sfes-lobby * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(150, 170, 235, .28) transparent; }
#sfes-lobby ::-webkit-scrollbar { width: 7px; height: 7px; }
#sfes-lobby ::-webkit-scrollbar-thumb { background: rgba(150, 170, 235, .22); border-radius: 8px; }

#sfes-lobby .sfl-plate { position: absolute; inset: 0; z-index: 0; background-image: url('../assets/plate-briefing.png'); background-size: cover; background-position: center; opacity: .5; }
#sfes-lobby .sfl-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 5, 12, .72) 0%, rgba(4, 5, 12, .5) 40%, rgba(4, 5, 12, .88) 100%); }
#sfes-lobby .sfl-scr { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; }

/* chrome */
#sfes-lobby .sfl-top { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 9px 20px 8px; flex: 0 0 auto; background: linear-gradient(180deg, rgba(11, 16, 31, .9), rgba(6, 9, 20, .78)); border-bottom: 1px solid var(--line); backdrop-filter: blur(7px); flex-wrap: nowrap; overflow: hidden; }
#sfes-lobby .sfl-brand { font-family: var(--ttl); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
#sfes-lobby .sfl-brand i { color: var(--heat); font-style: normal; }
#sfes-lobby .sfl-back { font: 600 11px var(--sans); color: var(--ink2); border: 1px solid var(--line); background: rgba(10, 14, 30, .5); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
#sfes-lobby .sfl-back:hover { border-color: var(--violet-line); color: var(--ink); }
#sfes-lobby .sfl-crumb { font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sfes-lobby .sfl-crumb b { color: var(--gold); } #sfes-lobby .sfl-crumb i { margin: 0 5px; }
#sfes-lobby .sfl-sp { flex: 1 1 auto; }
#sfes-lobby .sfl-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--mono); letter-spacing: .06em; color: var(--ink2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; background: rgba(10, 14, 30, .55); white-space: nowrap; }
#sfes-lobby .sfl-chip b { color: var(--zac); }
#sfes-lobby .sfl-chip.seal { border-color: rgba(255, 107, 107, .4); color: #ff9d9d; } #sfes-lobby .sfl-chip.seal b { color: #ff9d9d; }
#sfes-lobby .sfl-pillm { font: 600 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zac); border: 1px solid var(--zac-line); border-radius: 999px; padding: 2px 9px; background: var(--zac-dim); white-space: nowrap; }
#sfes-lobby .sfl-pillm.q { color: var(--ink3); border-color: var(--line); background: transparent; }
#sfes-lobby .sfl-tag { font: 700 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--heat); border: 1px dashed rgba(255, 178, 77, .55); border-radius: 999px; padding: 2px 8px; background: rgba(255, 178, 77, .07); white-space: nowrap; }

/* LB-2 grid — dossier + ceremonial centre (rail-less, per the locked variant) */
#sfes-lobby .sfl-lobby { flex: 1; min-height: 0; padding: 14px 18px 46px; display: grid; gap: 14px; grid-template-columns: minmax(230px, 268px) minmax(0, 1fr); align-items: stretch; }
@media (prefers-reduced-motion: no-preference) { #sfes-lobby .sfl-lobby { animation: sflIn .6s cubic-bezier(.2, .6, .2, 1); } @keyframes sflIn { from { opacity: 0; filter: blur(10px); transform: scale(.99); } to { opacity: 1; filter: none; transform: none; } } }

/* dossier column */
#sfes-lobby .sfl-dossier { padding: 13px; display: flex; flex-direction: column; gap: 9px; min-height: 0; border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 11, 24, .64); backdrop-filter: blur(9px); }
#sfes-lobby .sfl-por { border-radius: 12px; overflow: hidden; height: 230px; flex: none; cursor: pointer; position: relative; border: 1px solid var(--line); display: block; }
#sfes-lobby .sfl-por img { width: 100%; height: 100%; object-fit: cover; display: block; }
#sfes-lobby .sfl-por__ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 34%, rgba(40, 48, 90, .6), rgba(8, 11, 24, .96)); }
#sfes-lobby .sfl-por__glyph { font-size: 46px; color: var(--gold); text-shadow: 0 0 18px rgba(255, 178, 77, .45); }
#sfes-lobby .sfl-por__init { position: absolute; bottom: 10px; right: 12px; font: 700 12px var(--mono); letter-spacing: .1em; color: var(--ink2); }
#sfes-lobby .sfl-por::after { content: "INSPECT"; position: absolute; right: 8px; bottom: 6px; font: 700 7.5px var(--mono); letter-spacing: .18em; color: var(--ink2); background: rgba(4, 6, 16, .6); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; opacity: 0; transition: opacity .3s ease; }
#sfes-lobby .sfl-por:hover::after { opacity: 1; }
#sfes-lobby .sfl-nm { font-family: var(--hud); font-weight: 600; font-size: 21px; }
#sfes-lobby .sfl-pills { display: flex; gap: 6px; flex-wrap: wrap; }
#sfes-lobby .sfl-pill { font: 600 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zac); border: 1px solid var(--zac-line); border-radius: 999px; padding: 2px 9px; background: var(--zac-dim); white-space: nowrap; }
#sfes-lobby .sfl-pill.q { color: var(--ink3); border-color: var(--line); background: transparent; }
#sfes-lobby .sfl-bio { font-size: 11.5px; color: var(--ink3); line-height: 1.5; }
#sfes-lobby .sfl-quote { font-size: 12px; font-style: italic; color: var(--ink2); line-height: 1.5; }
#sfes-lobby .sfl-aff { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 6px; }
#sfes-lobby .sfl-aff .r { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; }
#sfes-lobby .sfl-aff .k { font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
#sfes-lobby .sfl-aff .b { height: 3px; border-radius: 999px; background: rgba(150, 160, 220, .12); }
#sfes-lobby .sfl-aff .b i { display: block; height: 100%; border-radius: 999px; }

/* ceremonial centre */
#sfes-lobby .sfl-mid { display: flex; flex-direction: column; gap: 12px; min-height: 0; max-width: 860px; width: 100%; justify-self: center; }
#sfes-lobby .sfl-lhead { text-align: center; padding: 2px 0; flex: none; }
#sfes-lobby .sfl-eyebrow { font: 600 9px var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--zac); }
#sfes-lobby .sfl-ttl { font-family: var(--ttl); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; margin: 7px 0 3px; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
#sfes-lobby .sfl-ttl .hl { color: var(--zac); } #sfes-lobby .sfl-ttl i { font-style: normal; color: var(--ink3); }
#sfes-lobby .sfl-sub { font-size: 13px; color: var(--ink2); font-style: italic; } #sfes-lobby .sfl-sub b { color: var(--ink); font-style: normal; }
#sfes-lobby .sfl-banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); border: 1px solid var(--zac-line); background: linear-gradient(120deg, var(--zac-dim), rgba(8, 11, 24, .72)); backdrop-filter: blur(6px); border-radius: 999px; padding: 8px 18px; flex: none; }
#sfes-lobby .sfl-banner .tk { font: 700 7.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zac); border: 1px solid var(--zac-line); border-radius: 999px; padding: 2px 8px; flex: none; }
#sfes-lobby .sfl-banner b { color: var(--ink); }
#sfes-lobby .sfl-banner .dv { width: 1px; height: 14px; background: var(--line); flex: none; }

#sfes-lobby .sfl-panels { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; flex: 1; min-height: 0; }
#sfes-lobby .sfl-tile { padding: 12px 14px; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: rgba(10, 14, 30, .5); }
#sfes-lobby .sfl-micro { display: block; font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 9px; } #sfes-lobby .sfl-micro b { color: var(--zac); }
#sfes-lobby .sfl-seats { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
#sfes-lobby .sfl-seat { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; background: rgba(10, 14, 30, .5); flex: none; }
#sfes-lobby .sfl-seat.you { border-color: var(--zac-line); background: var(--zac-dim); }
#sfes-lobby .sfl-tok { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 9px var(--mono); color: #cfd3f5; background: #0a0e1e; border: 1.5px solid var(--line); }
#sfes-lobby .sfl-tok.liaison { border-color: var(--violet); }
#sfes-lobby .sfl-seat__nm { font-weight: 600; font-size: 13px; }
#sfes-lobby .sfl-seat__nm small { display: block; font: 600 8.5px var(--mono); letter-spacing: .1em; color: var(--ink3); text-transform: uppercase; }
#sfes-lobby .sfl-seat__st { margin-left: auto; font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--line); color: var(--ink3); }
#sfes-lobby .sfl-seat__st.ready { color: var(--good); border-color: rgba(95, 208, 160, .4); }
#sfes-lobby .sfl-seat__st.joining { color: var(--heat); border-color: rgba(255, 178, 77, .4); }
#sfes-lobby .sfl-seat__st.watching { color: var(--ink3); border-color: var(--line); }

#sfes-lobby .sfl-kv { display: grid; grid-template-columns: 78px 1fr; gap: 0 10px; font-size: 12.5px; color: var(--ink2); }
#sfes-lobby .sfl-kv > * { border-top: 1px solid var(--line); padding: 8px 0; }
#sfes-lobby .sfl-kv > .k:first-child, #sfes-lobby .sfl-kv > .k:first-child + span { border-top: 0; padding-top: 2px; }
#sfes-lobby .sfl-kv .k { font: 600 7.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); padding-top: 10px; }
#sfes-lobby .sfl-kv b { color: var(--ink); }
#sfes-lobby .sfl-drail { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
#sfes-lobby .sfl-drail .lr { display: flex; justify-content: space-between; font: 600 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
#sfes-lobby .sfl-drail .lr .w { color: var(--heat); } #sfes-lobby .sfl-drail .lr .bu { color: var(--cyan); }
#sfes-lobby .sfl-drail .rl { height: 3px; border-radius: 999px; background: rgba(150, 160, 220, .12); }
#sfes-lobby .sfl-drail .rl i { display: block; height: 100%; border-radius: 999px; }
#sfes-lobby .sfl-drail .rl.work i { background: linear-gradient(90deg, var(--heat2), var(--heat)); }
#sfes-lobby .sfl-drail .rl.budget i { background: linear-gradient(90deg, #1f8f9c, var(--cyan)); }
#sfes-lobby .sfl-drail .rl.elapsed { height: 1.5px; } #sfes-lobby .sfl-drail .rl.elapsed i { background: var(--ink3); }

#sfes-lobby .sfl-chiprow { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; flex: none; }
#sfes-lobby .sfl-chipl { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; background: rgba(10, 14, 30, .55); backdrop-filter: blur(6px); }
#sfes-lobby .sfl-chipl .k { font: 600 7.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); } #sfes-lobby .sfl-chipl b { color: var(--ink); }
#sfes-lobby .sfl-chipl.clockc { border-color: var(--zac-line); } #sfes-lobby .sfl-chipl.clockc .cd { font: 700 12px var(--mono); color: var(--zac); }

#sfes-lobby .sfl-beginrow { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; padding: 2px 0; }
#sfes-lobby .sfl-begin { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 280px; justify-content: center; font: 650 14px var(--hud); color: #1a1206; border: 0; border-radius: 999px; padding: 10px 26px; background: linear-gradient(180deg, var(--kernel), var(--heat)); box-shadow: 0 0 24px -8px var(--heat); cursor: pointer; white-space: nowrap; }
#sfes-lobby .sfl-beginhint { font: 400 10.5px var(--sans); color: var(--ink3); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  #sfes-lobby .sfl-begin { transition: transform .28s cubic-bezier(.2, .9, .2, 1.2), box-shadow .2s ease; }
  #sfes-lobby .sfl-begin:hover { transform: scale(1.06); box-shadow: 0 0 36px -6px var(--heat); }
  #sfes-lobby .sfl-begin:active { transform: scale(.9); }
}

/* cast dock */
#sfes-lobby .sfl-castdock { position: absolute; right: 14px; bottom: 12px; z-index: 8; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
#sfes-lobby .sfl-castchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 13px 4px 5px; font: 600 11.5px var(--sans); color: var(--ink); background: rgba(10, 14, 30, .6); backdrop-filter: blur(6px); }
#sfes-lobby .sfl-castchip small { font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
#sfes-lobby .sfl-evaorb { width: 26px; height: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 32%, #cdd0ff, #8b8bff 55%, #5a5ad6); box-shadow: 0 0 10px rgba(139, 139, 255, .55); }

/* breadcrumb pill */
#sfes-lobby .sfl-crumbpill { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 999px; border: 1px dashed rgba(255, 178, 77, .5); background: rgba(9, 12, 26, .94); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
#sfes-lobby .sfl-crumbpill .lbl { font: 700 7.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--heat); margin-right: 5px; }
#sfes-lobby .sfl-crumbpill .arr { color: var(--ink3); font-size: 9px; }
#sfes-lobby .sfl-cst { min-height: 22px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ink3); font: 600 10.5px var(--sans); cursor: pointer; white-space: nowrap; }
#sfes-lobby .sfl-cst:hover { color: var(--ink); }
#sfes-lobby .sfl-cst.on { border-color: var(--zac); color: var(--ink); background: var(--zac-dim); }
#sfes-lobby .sfl-cst .k { font: 700 7.5px var(--mono); letter-spacing: .05em; color: var(--ink3); } #sfes-lobby .sfl-cst.on .k { color: var(--zac); }

/* PO1 inspect overlay */
#sfes-lobby .sfl-veil { position: absolute; inset: 0; z-index: 40; display: none; place-items: center; background: rgba(2, 4, 10, .72); cursor: pointer; }
#sfes-lobby .sfl-veil.on { display: grid; }
#sfes-lobby .sfl-inspect { width: min(380px, 92%); padding: 16px; display: flex; flex-direction: column; gap: 10px; cursor: default; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(16, 20, 38, .98), rgba(10, 13, 26, .98)); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
#sfes-lobby .sfl-inspect .sfl-por { height: 240px; cursor: default; } #sfes-lobby .sfl-inspect .sfl-por::after { display: none; }
@media (prefers-reduced-motion: no-preference) { #sfes-lobby .sfl-veil.on .sfl-inspect { animation: sflIn .45s cubic-bezier(.2, .6, .2, 1); } }

/* responsive — dossier collapses above the centre on narrow viewports */
@media (max-width: 1000px) {
  #sfes-lobby .sfl-lobby { grid-template-columns: minmax(0, 1fr); }
  #sfes-lobby .sfl-dossier { flex-direction: row; align-items: center; gap: 14px; }
  #sfes-lobby .sfl-por { height: 72px; width: 108px; }
  #sfes-lobby .sfl-bio { display: none; }
  #sfes-lobby .sfl-aff { margin-top: 0; margin-left: auto; width: 220px; }
  #sfes-lobby .sfl-panels { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #sfes-lobby .sfl-dossier { flex-wrap: wrap; } #sfes-lobby .sfl-aff { display: none; }
  #sfes-lobby .sfl-castdock { display: none; } #sfes-lobby .sfl-crumbpill { display: none; }
  #sfes-lobby .sfl-ttl { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { #sfes-lobby *, #sfes-lobby *::before, #sfes-lobby *::after { animation: none !important; transition: none !important; } }