/* Game lobby (docs/UI_FIXES_20261103.md §8) — the HUD's dark glass and cyan accent, one card over a dimmed scope. */
.lobby { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px 16px; overflow:auto; overscroll-behavior:contain;
  background:
    radial-gradient(1100px 680px at 72% 8%,rgba(60,203,224,.12),transparent 62%),
    radial-gradient(820px 560px at 8% 92%,rgba(255,196,111,.07),transparent 60%),
    rgba(3,9,14,.88);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); }
.lobby[hidden] { display:none; }
/* Faint range rings behind the card: the radar the controller is about to work. */
.lobby::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.5;
  background:repeating-radial-gradient(circle at 72% 30%,transparent 0 118px,rgba(127,230,244,.07) 118px 119px); }
.lobby-card { position:relative; width:min(880px,100%); border:1px solid var(--line-strong); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,rgba(21,40,55,.94),rgba(9,20,29,.96)); box-shadow:var(--shadow-3),inset 0 1px 0 rgba(255,255,255,.05); }
.lobby-head { display:flex; align-items:center; gap:14px; padding:22px 26px 18px; border-bottom:1px solid var(--hairline); }
.lobby-mark { flex:none; width:42px; height:42px; fill:none; stroke:var(--accent); stroke-width:1.2; filter:drop-shadow(0 0 10px rgba(60,203,224,.4)); }
.lobby-titles h1 { font-size:26px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.lobby-titles p { margin-top:2px; font-size:13px; color:var(--ink-2); }
.lobby-client { margin-left:auto; flex:none; padding:4px 11px; border:1px solid var(--accent-line); border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); font-size:11.5px; font-weight:700; letter-spacing:.02em; }
.lobby-body { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px; padding:20px 26px; }
.lobby .game-mode { margin:0; }
.lobby .game-mode-row button { min-height:44px; font-size:14px; }
.lobby-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.lobby-fields label { display:flex; flex-direction:column; gap:5px; color:var(--ink-2); font-size:11.5px; font-weight:650; letter-spacing:.02em; }
.lobby-fields :is(select,input) { min-height:42px; font-size:14px; }
.lobby-fields select:disabled { opacity:.55; }
.lobby-code { grid-column:1/-1; }
.lobby-side { display:flex; flex-direction:column; gap:12px; min-width:0; }
.lobby-assets,.lobby-note { padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel-inset); }
.lobby-assets h2 { margin-bottom:10px; color:var(--ink-2); font-size:12px; letter-spacing:.06em; }
.lobby-progress { height:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.06); }
.lobby-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-strong)); box-shadow:0 0 12px rgba(60,203,224,.45); transition:width .3s var(--ease); }
.lobby-assets[data-status="done"] .lobby-progress i { background:var(--success); box-shadow:none; }
.lobby-assets[data-status="unavailable"] .lobby-progress { display:none; }
#lobby-progress-text { margin-top:9px; color:var(--ink); font-size:12.5px; line-height:1.5; }
.lobby-hint { margin-top:6px; color:var(--ink-3); font-size:11.5px; line-height:1.5; }
.lobby-note { color:var(--ink-2); font-size:12.5px; line-height:1.6; }
.lobby-link { display:block; padding:12px 14px; border:1px solid rgba(255,196,111,.55); border-radius:10px; background:rgba(255,196,111,.08); color:var(--warning); font-weight:700; text-align:center; text-decoration:none; }
.lobby-link:hover { background:rgba(255,196,111,.14); }
.lobby-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 26px 22px; border-top:1px solid var(--hairline); }
.lobby-actions button { min-width:150px; min-height:46px; border-radius:10px; font-size:15px; }
@media(max-width:700px) {
  .lobby { place-items:start center; padding:10px; }
  .lobby-head { padding:16px; }
  .lobby-titles h1 { font-size:22px; }
  .lobby-body { grid-template-columns:1fr; gap:14px; padding:16px; }
  .lobby-actions { position:sticky; bottom:0; padding:12px 16px 16px; background:rgba(9,20,29,.97); }
  .lobby-actions button { flex:1; min-width:0; }
}
@media(max-height:520px) {
  .lobby { place-items:start center; padding:8px; }
  .lobby-head { padding:10px 18px; }
  .lobby-body { padding:12px 18px; }
  .lobby-actions { position:sticky; bottom:0; padding:8px 18px 10px; background:rgba(9,20,29,.97); }
  .lobby-actions button { min-height:40px; }
  .lobby .game-mode-note,.lobby-hint { display:none; }
  .lobby .game-mode-row button { min-height:36px; }
  .lobby-fields { margin-top:8px; }
  .lobby-fields :is(select,input) { min-height:36px; }
}
/* Radar-only mobile client (/m/): no 3D tab, camera row or 3D-only controls (docs/UI_FIXES_20261103.md §9). */
.game-stage[data-client="mobile"] #mobile-tabs [data-mobile-view="3d"],
.game-stage[data-client="mobile"] .camera-controls,
.game-stage[data-client="mobile"] #radar-full,
.game-stage[data-client="mobile"] #radar-3d { display:none!important; }

.lobby-live { margin-top:10px; padding:8px 12px; border:1px solid var(--accent-line); border-radius:10px; background:var(--accent-soft); color:var(--accent-strong); font-size:12.5px; font-weight:650; }
.lobby-live.warn { border-color:rgba(255,196,111,.55); background:rgba(255,196,111,.08); color:var(--warning); }

/* Loading line at the bottom of the lobby (2026-11-04): the lobby is the first screen and 관제 시작 stays locked until done. */
.lobby-loading { margin:0; padding:10px 18px 14px; border-top:1px solid var(--line); color:var(--ink-2); font-size:12.5px; line-height:1.5; font-variant-numeric:tabular-nums; }
.lobby-loading[data-ready="true"] { color:var(--success,#5fd39a); }
.lobby[data-loading="true"] #lobby-start { opacity:.55; cursor:progress; }
/* 3D download consent (2026-11-05, user: ask before downloading on mobile data) */
.lobby-consent { margin-top:10px; padding-top:10px; border-top:1px solid var(--hairline); }
.lobby-consent p { color:var(--ink); font-size:12.5px; line-height:1.5; }
.lobby-consent-actions { display:flex; gap:8px; margin-top:8px; }
.lobby-consent-actions button { flex:1; min-height:38px; border-radius:9px; font-size:13px; }
.lobby-consent-remember { display:flex; align-items:center; gap:6px; margin-top:8px; color:var(--ink-3); font-size:11.5px; }
.lobby-assets[data-status="declined"] .lobby-progress,.lobby-assets[data-status="ask"] .lobby-progress { display:none; }
/* Pre-start stage (2026-11-05, user: a second loading screen; start once ground objects and scenery are loaded and stable) */
.lobby[data-stage="prepare"] :is(.lobby-body,.lobby-actions,.lobby-loading) { display:none; }
.lobby-prepare { padding:20px 26px 22px; }
.lobby-prepare h2 { color:var(--ink-2); font-size:12px; letter-spacing:.06em; }
.lobby-prepare-lead { margin:6px 0 12px; color:var(--ink); font-size:13px; line-height:1.5; }
.lobby-prepare .lobby-progress i { transition:width .4s var(--ease); }
.lobby-prepare[data-ready="true"] .lobby-progress i { background:var(--success); box-shadow:none; }
.lobby-prepare-steps { display:grid; gap:6px; margin:14px 0 0; padding:0; list-style:none; font-size:13px; font-variant-numeric:tabular-nums; }
.lobby-prepare-steps li { display:flex; justify-content:space-between; gap:12px; padding:7px 10px; border:1px solid var(--hairline); border-radius:9px; background:var(--panel-inset); color:var(--ink-2); }
.lobby-prepare-steps li[data-done="true"] { color:var(--ink); }
.lobby-prepare-steps li[data-done="true"] b { color:var(--success,#5fd39a); }
.lobby-prepare-steps b { font-weight:650; color:var(--ink-3); }
.lobby-prepare-actions { display:flex; justify-content:flex-end; margin-top:16px; }
.lobby-prepare-actions button { min-width:180px; min-height:46px; border-radius:10px; font-size:15px; }
.lobby-assets:is([data-status="ask"],[data-status="declined"]) .lobby-hint { display:none; }

/* 과거 기록 picker (app.js loadHistoryIndex). */
.history-pick { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.history-pick[hidden] { display:none; }
.history-pick label { display:grid; gap:4px; flex:1 1 140px; font-size:12px; color:var(--ink-3); }
.history-pick select,.history-pick input { min-height:34px; }