:root { --bg:#0b1020; --bg2:#0f1530; --card:#121936; --bd:#1f2853; --txt:#e9eef9; --mut:#9fb2ff; --btn:#2d57ff; --veil:rgba(8,12,28,0.55); }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--txt); font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

/* Header */
.site-header { padding:14px 20px; background:var(--bg2); border-bottom:1px solid #202845; display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:relative; z-index:50; }
.site-header h1 { margin:0; font-size:18px; font-weight:700; letter-spacing:.3px; }
.site-header .meta { font-size:12px; color:var(--mut); }
.header-actions { margin-left:auto; display:flex; gap:8px; }
.header-actions button { background:var(--btn); color:#fff; border:none; padding:8px 10px; border-radius:10px; font-weight:700; cursor:pointer; }
.header-actions .secondary { background:#1b2348; color:var(--txt); border:1px solid #2a3764; }

/* ===== Normal layout ===== */
.wrap { max-width:1200px; margin:0 auto; padding:16px; display:grid; grid-template-columns:1.4fr .9fr; gap:16px; }
.card { background:var(--card); border:1px solid var(--bd); border-radius:14px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.25); }
.card h2 { margin:0; padding:10px 12px; font-size:14px; background:var(--bg2); border-bottom:1px solid #1c244a; }
#pano-normal { width:100%; height:62vh; min-height:420px; background:#070b1a; }
#guess-map { width:100%; height:40vh; min-height:300px; }
.controls { display:flex; gap:8px; padding:12px; border-top:1px solid var(--bd); background:var(--bg2); flex-wrap:wrap; }
button { background:var(--btn); color:#fff; border:none; padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer; }
button.secondary { background:#1b2348; color:#e9eef9; border:1px solid #2a3764; }
button:disabled { opacity:.6; cursor:not-allowed; }
.stats { display:flex; gap:12px; padding:12px; flex-wrap:wrap; }
.stat { background:var(--bg2); border:1px solid var(--bd); border-radius:10px; padding:10px 12px; min-width:120px; }
.label { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.6px; }
.value { font-size:18px; font-weight:800; }
.msg { padding:10px 12px; color:var(--mut); font-size:13px; border-top:1px dashed var(--bd); }
.footer { max-width:1200px; margin:8px auto 24px; color:#9cb0ff90; font-size:12px; padding:0 16px; }
a { color:#9fb2ff; }
@media (max-width:980px){ .wrap{grid-template-columns:1fr;} #pano-normal{height:50vh;} }

/* ===== Theater layout (separate root) ===== */
body.theater { overflow:hidden; }
#theater-root {
  display:none; position:fixed; inset:0; z-index:40; background:#000;
}
body.theater #theater-root { display:block; }
body.theater #normal-wrap { display:none; }

/* Stage pano fills viewport */
#pano-stage {
  position:absolute; inset:0; width:100vw; height:100vh; z-index:41; background:#000;
}

/* Mini-map bottom-right */
#mini-map {
  position:absolute; right:16px; bottom:16px; width:360px; height:220px;
  z-index:45; background:#0a1022; border:1px solid #2a3764; border-radius:12px; overflow:hidden;
}

/* Bottom overlay */
.overlay { position:absolute; left:0; right:0; pointer-events:none; z-index:44; }
.overlay * { pointer-events:auto; }
.bottom-overlay { bottom:16px; display:flex; align-items:center; justify-content:center; gap:16px; flex-direction:column; }
.controls-row{ display:flex; gap:8px; }
.stats-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--veil); border:1px solid #2a3764; padding:8px 10px; border-radius:12px; }
.stats-row .stat{ background:transparent; border:1px solid #2a3764; }

/* Utility */
.hidden { display:none !important; }