:root {
  --background: 225 40% 8%;
  --foreground: 178 70% 96%;
  --primary: 174 86% 52%;
  --primary-foreground: 225 42% 8%;
  --secondary: 257 42% 18%;
  --secondary-foreground: 178 70% 96%;
  --muted: 226 28% 17%;
  --muted-foreground: 190 24% 78%;
  --destructive: 350 88% 62%;
  --border: 182 52% 32%;
  --card: 229 38% 12%;
  --accent: 303 82% 62%;
  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.45rem;
  --shadow-sm: 0 8px 22px hsl(180 90% 4% / 0.28);
  --shadow-md: 0 18px 50px hsl(180 90% 4% / 0.38);
  --shadow-lg: 0 28px 90px hsl(180 90% 4% / 0.48);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dark {
  --background: 230 44% 6%;
  --foreground: 170 72% 97%;
  --primary: 164 92% 48%;
  --primary-foreground: 230 44% 6%;
  --secondary: 268 46% 16%;
  --secondary-foreground: 170 72% 97%;
  --muted: 228 28% 15%;
  --muted-foreground: 188 26% 74%;
  --destructive: 350 88% 62%;
  --border: 181 54% 28%;
  --card: 230 39% 10%;
  --accent: 296 90% 62%;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: hsl(var(--background));
}

body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, hsl(var(--primary) / 0.2), transparent 32rem),
    radial-gradient(circle at top right, hsl(var(--accent) / 0.22), transparent 30rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.safe-shell {
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

.aurora-light {
  background: linear-gradient(135deg, hsl(170 74% 72%), hsl(190 65% 58%));
  color: hsl(225 48% 10%);
}

.aurora-dark {
  background: linear-gradient(135deg, hsl(263 48% 30%), hsl(226 54% 20%));
  color: hsl(174 80% 92%);
}

.aurora-light:hover,
.aurora-dark:hover {
  filter: brightness(1.12) saturate(1.12);
  transform: scale(1.015);
  z-index: 2;
}

.selected-square {
  outline: 4px solid hsl(var(--accent));
  outline-offset: -4px;
  box-shadow: inset 0 0 0 999px hsl(var(--accent) / 0.12), 0 0 24px hsl(var(--accent) / 0.55);
  z-index: 3;
}

.chess-piece {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(2rem, 9vw, 4.7rem);
  line-height: 1;
  user-select: none;
  transform: translateY(-1px);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

button:hover .chess-piece {
  transform: translateY(-4px) scale(1.04);
}

.white-piece {
  color: hsl(52 100% 93%);
  text-shadow:
    0 2px 0 hsl(38 65% 36%),
    0 8px 16px hsl(225 70% 5% / 0.5);
}

.black-piece {
  color: hsl(254 70% 13%);
  text-shadow:
    0 1px 0 hsl(292 80% 72% / 0.45),
    0 8px 16px hsl(225 80% 3% / 0.6);
}

@media (max-width: 420px) {
  .chess-piece {
    font-size: clamp(1.7rem, 10vw, 2.8rem);
  }
}