:root {
  --background: 220 14% 10%;
  --foreground: 210 20% 96%;
  --primary: 9 90% 57%;
  --secondary: 217 18% 18%;
  --muted: 215 16% 24%;
  --destructive: 0 80% 58%;
  --border: 218 16% 24%;
  --card: 220 16% 13%;
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.18);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.28);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.42);
  --transition-fast: all 120ms ease;
  --transition-smooth: all 220ms ease;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
}

.dark {
  --background: 220 14% 10%;
  --foreground: 210 20% 96%;
  --primary: 9 90% 57%;
  --secondary: 217 18% 18%;
  --muted: 215 16% 24%;
  --destructive: 0 80% 58%;
  --border: 218 16% 24%;
  --card: 220 16% 13%;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top, hsla(var(--primary), 0.12), transparent 28%),
    linear-gradient(180deg, hsl(var(--background)), hsl(220 16% 8%));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select {
  font: inherit;
}
button {
  transition: var(--transition-fast);
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}
.app-shell {
  min-height: 100%;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
.card-grid {
  display: grid;
  gap: 12px;
}
.scoreboard {
  background: linear-gradient(180deg, hsla(var(--foreground), 0.04), hsla(var(--foreground), 0.02));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.scoreboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent);
}
.texture {
  background-image:
    linear-gradient(135deg, hsla(var(--foreground), 0.03) 25%, transparent 25%),
    linear-gradient(225deg, hsla(var(--foreground), 0.03) 25%, transparent 25%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}
.progress-bar {
  position: relative;
  overflow: hidden;
}
.progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, hsla(var(--foreground), 0.12), transparent);
  transform: translateX(-100%);
  animation: sweep 2.4s infinite;
}
@keyframes sweep {
  to { transform: translateX(100%); }
}
.timer-display {
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', monospace;
  font-weight: 900;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.badge-soft {
  background: hsla(var(--primary), 0.12);
  color: hsl(var(--primary));
}
.badge-muted {
  background: hsla(var(--foreground), 0.08);
  color: hsl(var(--foreground));
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: hsl(var(--primary));
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 10px hsla(var(--primary), 0.5);
}

.board-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-bottom: 2px;
}