:root { --ink: #ece8ff; --muted: #8b84b8; --accent: #9b8bff; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: radial-gradient(circle at 50% 30%, #120c28, #070512 70%);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; user-select: none;
}
#stage { position: fixed; inset: 0; display: block; cursor: grab; touch-action: none; }
#stage:active { cursor: grabbing; }

.hud { position: fixed; top: 20px; left: 24px; pointer-events: none; text-shadow: 0 2px 18px #000; }
.hud h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.5px; }
.hud .tag { color: var(--muted); font-size: 13px; margin-top: 2px; }
.hud .lvl { color: var(--accent); font-size: 13px; margin-top: 8px; letter-spacing: 1px; }
.hud .lvl b { font-size: 16px; }

.reset {
  position: fixed; top: 20px; right: 22px;
  background: rgba(20,14,40,.7); border: 1px solid rgba(155,139,255,.3); color: var(--accent);
  padding: 9px 16px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer;
  backdrop-filter: blur(8px); transition: .15s;
}
.reset:hover { border-color: var(--accent); }

.controls {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: 12.5px; text-align: center; pointer-events: none; text-shadow: 0 2px 12px #000;
}
.controls b { color: #8fffb8; }

.flash {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(28px, 6vw, 52px); font-weight: 800; color: #5aff96;
  opacity: 0; pointer-events: none; transition: opacity .3s; text-shadow: 0 0 30px rgba(90,255,150,.6);
}
.flash.show { opacity: 1; }

.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
@media (max-width: 640px) { .hud h1 { font-size: 22px; } }