:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; font-family: Inter, Arial, sans-serif; background: #0d1117; }
canvas { display: block; width: 100vw; height: 100vh; }
.overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at top, #1f2f46, #0b1016 70%);
  z-index: 10;
}
.panel {
  width: min(560px, 92vw); background: rgba(20, 28, 38, 0.94);
  border: 1px solid #3d5b82; border-radius: 16px; padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.panel h1 { margin-top: 0; }
button {
  border: 0; border-radius: 10px; padding: 12px 18px; cursor: pointer;
  background: linear-gradient(90deg, #3a85ff, #61c3ff); color: #07121f; font-weight: 700;
}
.hud {
  position: fixed; top: 12px; left: 12px; z-index: 5;
  background: rgba(10, 14, 21, 0.7); border: 1px solid rgba(95, 133, 181, 0.45);
  border-radius: 12px; padding: 10px 14px; min-width: 330px;
}
.hud-row { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
#missionText { color: #a9d7ff; font-size: 14px; }
.hidden { display: none; }