:root {
  --background: 210 80% 98%;
  --foreground: 230 35% 13%;
  --primary: 258 88% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 172 74% 44%;
  --secondary-foreground: 0 0% 100%;
  --muted: 222 28% 91%;
  --muted-foreground: 226 15% 42%;
  --destructive: 354 84% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 225 26% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 16px rgba(31, 38, 71, 0.08);
  --shadow-md: 0 14px 34px rgba(31, 38, 71, 0.14);
  --shadow-lg: 0 24px 60px rgba(31, 38, 71, 0.22);
  --transition-fast: 140ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 231 30% 8%;
  --foreground: 220 36% 96%;
  --primary: 269 92% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 184 80% 48%;
  --secondary-foreground: 222 46% 9%;
  --muted: 230 22% 18%;
  --muted-foreground: 224 18% 72%;
  --destructive: 354 84% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 230 21% 24%;
  --card: 231 27% 12%;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, #root { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
}
button, input { font: inherit; }
button { touch-action: manipulation; }
.focus-ring:focus-visible { outline: 3px solid hsl(var(--secondary) / .55); outline-offset: 3px; }
.maze-bg {
  background:
    radial-gradient(circle at 15% 12%, hsl(var(--secondary) / .26), transparent 30%),
    radial-gradient(circle at 86% 0%, hsl(var(--primary) / .25), transparent 28%),
    linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted)));
}
.dark .maze-bg {
  background:
    radial-gradient(circle at 15% 12%, hsl(var(--secondary) / .18), transparent 30%),
    radial-gradient(circle at 86% 0%, hsl(var(--primary) / .22), transparent 28%),
    linear-gradient(135deg, hsl(var(--background)), hsl(236 34% 11%));
}
.float-in { animation: floatIn .35s ease both; }
.pulse-win { animation: pulseWin .6s ease both; }
@keyframes floatIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pulseWin { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }