* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #10151b; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #eef2f6;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* --- Normal HUD -------------------------------------------------------- */
#hud {
  position: fixed; inset: 0; pointer-events: none;
  padding: 14px;
}
#badge {
  position: absolute; left: 14px; top: 14px;
  background: rgba(18, 24, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px; padding: 8px 12px; max-width: 60vw;
  backdrop-filter: blur(4px);
  line-height: 1.35;
}
#badge strong { display: block; font-size: 13px; color: #ffd873; letter-spacing: .2px; }
#badge span { font-size: 11.5px; color: #b9c4cf; }

.ui-btn {
  pointer-events: auto;
  font: inherit; font-size: 14px;
  color: #eef2f6; background: rgba(30, 40, 52, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px; padding: 10px 16px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ui-btn:hover { background: rgba(44, 58, 74, 0.9); }
.ui-btn:active { transform: translateY(1px); }
.ui-btn.primary { background: #2f7de0; border-color: #2f7de0; }
.ui-btn.primary:hover { background: #3a8bf0; }
.ui-btn[aria-pressed="true"] { background: #2f7de0; border-color: #2f7de0; }

#btn-top { position: absolute; right: 14px; top: 14px; }

/* --- Pointer-lock overlay --------------------------------------------- */
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 11, 15, 0.82); backdrop-filter: blur(3px);
  z-index: 20; padding: 20px; text-align: center;
}
.overlay-card {
  max-width: 460px; background: rgba(22, 29, 38, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px;
  padding: 26px 28px; line-height: 1.5;
}
.overlay-card h1 { font-size: 20px; margin-bottom: 12px; }
.overlay-card p { font-size: 14px; margin: 8px 0; color: #d6dee7; }
.overlay-card .muted { color: #97a4b2; font-size: 12.5px; }
.overlay-card .ui-btn { margin-top: 16px; }

/* --- Mobile touch controls -------------------------------------------- */
.touch-zone { position: fixed; z-index: 15; display: none; }
#touch-move {
  left: 0; bottom: 0; width: 42vw; height: 42vh;
  max-width: 260px; max-height: 260px;
}
#stick-base {
  position: absolute; left: 26px; bottom: 26px;
  width: 118px; height: 118px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(47, 125, 224, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
body.touch #touch-move { display: block; }
body.touch #lock-hint { display: none; }

/* --- Top-view room labels --------------------------------------------- */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 12; display: none; }
body.top #labels { display: block; }
.room-label {
  position: absolute; transform: translate(-50%, -50%);
  background: rgba(14, 19, 26, 0.7); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px; padding: 3px 8px; font-size: 12px; white-space: nowrap;
  color: #eef2f6; text-align: center; line-height: 1.25;
}
.room-label small { display: block; color: #9fb0c0; font-size: 10.5px; }

/* --- Hidden debug panel ----------------------------------------------- */
#debug {
  position: fixed; right: 12px; bottom: 12px; z-index: 30;
  background: rgba(6, 9, 13, 0.9); border: 1px solid rgba(120, 200, 255, 0.35);
  border-radius: 10px; padding: 10px 12px; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  min-width: 190px; color: #bfe6ff;
}
.dbg-row { display: flex; justify-content: space-between; gap: 14px; }
.dbg-row b { color: #eaf6ff; }
.dbg-hint { margin-top: 6px; font-size: 10px; color: #6f93ac; }

/* --- Fatal error banner ----------------------------------------------- */
#error {
  position: fixed; inset: auto 12px 12px 12px; z-index: 40;
  background: #7a1f1f; border: 1px solid #b44; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; line-height: 1.4;
}