:root {
  --background: 152 34% 92%;
  --foreground: 165 24% 15%;
  --primary: 156 72% 34%;
  --secondary: 201 72% 44%;
  --muted: 154 18% 84%;
  --destructive: 0 80% 58%;
  --border: 154 22% 72%;
  --card: 154 24% 97%;
  --shadow-sm: 0 8px 24px rgba(10, 41, 31, 0.08);
  --shadow-md: 0 16px 42px rgba(10, 41, 31, 0.14);
  --shadow-lg: 0 28px 64px rgba(7, 30, 31, 0.22);
  --transition-fast: 140ms ease;
  --transition-smooth: 260ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 171 30% 10%;
  --foreground: 150 18% 92%;
  --primary: 153 66% 42%;
  --secondary: 199 72% 56%;
  --muted: 171 20% 18%;
  --destructive: 0 84% 61%;
  --border: 172 18% 22%;
  --card: 172 22% 14%;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 16px 42px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.46);
}

* {
  box-sizing: border-box;
}

html, body, #root {
  margin: 0;
  min-height: 100%;
  height: 100%;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top, hsla(var(--secondary), 0.12), transparent 28%),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--background)));
}

button, a, input, select {
  transition: all var(--transition-fast);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid hsl(var(--secondary));
  outline-offset: 2px;
}

.game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius-lg);
}

.glass {
  background: linear-gradient(180deg, hsla(var(--card), 0.88), hsla(var(--card), 0.72));
  backdrop-filter: blur(14px);
  border: 1px solid hsla(var(--border), 0.82);
  box-shadow: var(--shadow-md);
}

.menu-hero {
  background:
    radial-gradient(circle at 20% 20%, hsla(var(--secondary), 0.26), transparent 28%),
    radial-gradient(circle at 80% 10%, hsla(var(--primary), 0.24), transparent 24%),
    linear-gradient(135deg, hsla(var(--primary), 0.16), hsla(var(--secondary), 0.08)),
    linear-gradient(180deg, hsla(var(--card), 0.96), hsla(var(--muted), 0.72));
}

.tropical-card {
  position: relative;
  overflow: hidden;
}

.tropical-card::after {
  content: '';
  position: absolute;
  inset: auto -40px -40px auto;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, hsla(var(--secondary), 0.16), transparent 70%);
  pointer-events: none;
}

.minimap-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.hit-flash {
  animation: hitFlash 180ms ease-out;
}

@keyframes hitFlash {
  from { background: rgba(255, 0, 0, 0.28); }
  to { background: rgba(255, 0, 0, 0); }
}

.screen-shake {
  animation: shake 160ms linear;
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-4px, 2px); }
  75% { transform: translate(2px, 1px); }
  100% { transform: translate(0, 0); }
}

.joystick-knob {
  transition: transform 20ms linear;
}

.progress-bar {
  overflow: hidden;
}

.progress-bar > span {
  display: block;
  height: 100%;
  transition: width var(--transition-fast);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: hsla(var(--border), 0.9);
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: transparent;
}