:root {
  --bg: #0e2144;
  --panel: #14305e;
  --accent: #54d8ff;
  --accent-text: #04222e;
  --page-glow: rgba(84, 216, 255, 0.18);
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(84, 216, 255, 0.16), transparent 24rem),
    radial-gradient(circle at 84% 13%, rgba(255, 226, 125, 0.12), transparent 24rem),
    linear-gradient(180deg, #0e2144, #060f22);
}

#game-canvas { background: #0e2144; }

.stage {
  background: rgba(16, 38, 74, 0.92);
}

.hud {
  position: absolute;
  top: 0.7rem;
  left: 50%;
  display: flex;
  gap: 0.6rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.hud span {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(6, 15, 34, 0.72);
  padding: 0.32rem 0.66rem;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

@media (max-width: 620px) {
  .hud { flex-wrap: wrap; justify-content: center; width: calc(100% - 1rem); }
  .hud span { font-size: 0.7rem; padding: 0.24rem 0.45rem; }
}