:root {
  --background: 232 42% 7%;
  --foreground: 185 55% 94%;
  --primary: 170 100% 68%;
  --secondary: 232 30% 18%;
  --muted: 191 18% 68%;
  --destructive: 344 100% 63%;
  --border: 184 38% 27%;
  --card: 232 35% 12%;
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 16px 42px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.48);
  --transition-fast: 140ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
}

.dark {
  --background: 250 45% 5%;
  --foreground: 172 65% 96%;
  --primary: 54 100% 74%;
  --secondary: 248 34% 16%;
  --muted: 255 14% 72%;
  --destructive: 0 95% 66%;
  --border: 54 30% 27%;
  --card: 248 40% 10%;
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

button, canvas { touch-action: manipulation; }
button { transition: var(--transition-smooth); }

.bg-grid {
  background-image:
    radial-gradient(circle at 20% 10%, hsl(var(--primary)/0.18), transparent 28%),
    radial-gradient(circle at 84% 18%, hsl(var(--destructive)/0.16), transparent 30%),
    linear-gradient(hsl(var(--primary)/0.08) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--primary)/0.08) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
}

.game-shell {
  height: calc(100vh - 112px);
}

.cross-dot {
  width: 24px;
  height: 24px;
  position: relative;
  filter: drop-shadow(0 0 10px hsl(var(--primary)));
}
.cross-dot::before,
.cross-dot::after {
  content: "";
  position: absolute;
  background: hsl(var(--primary));
  border-radius: 99px;
}
.cross-dot::before {
  left: 10px;
  top: 0;
  width: 4px;
  height: 24px;
}
.cross-dot::after {
  top: 10px;
  left: 0;
  height: 4px;
  width: 24px;
}

#hurtFlash { transition: opacity var(--transition-fast); }
.hidden { display: none !important; }

@media (max-width: 1023px) {
  .game-shell { height: 58vh; min-height: 460px; }
}

@media (max-width: 480px) {
  .game-shell { min-height: 430px; height: 54vh; }
}