/* Swarm - minimal aesthetics */

:root {
  /* Colors - muted, organic palette */
  --color-bg: #e8e4e1;
  --color-bg-overlay: rgba(232, 228, 225, 0.95);
  --color-crowd: #7fbbbd;
  --color-gate-frame: #c4b7a6;
  --color-gate-positive: #9dc183;
  --color-gate-negative: #d4a5a5;
  --color-enemy: #b8a9c9;
  --color-text: #5a5a5a;

  /* Spacing (4px base, numbered like Hotdog) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Animation timing */
  --duration-fast: 150ms;
  --duration-normal: 300ms;

  /* Typography */
  --font-stack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-sm: 18px;
  --font-size-md: 28px;
  --font-size-lg: 32px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  font-family: var(--font-stack);
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#game-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#gameCanvas {
  background: var(--color-bg);
  max-width: 100%;
  max-height: 100%;
}

#hud {
  position: absolute;
  top: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

#count-display {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  transition:
    transform var(--duration-fast) ease-out,
    color var(--duration-fast) ease-out;
}

#count-display.bump-up {
  transform: scale(1.3);
  color: var(--color-gate-positive);
}

#count-display.bump-down {
  transform: scale(0.8);
  color: var(--color-gate-negative);
}

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-bg-overlay);
}

#overlay.hidden {
  display: none;
}

#overlay-content {
  text-align: center;
  color: var(--color-text);
}

#overlay-title {
  font-size: var(--font-size-md);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

#overlay-message {
  font-size: var(--font-size-sm);
  white-space: pre-line;
}

#progress-container {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 300px;
  height: 6px;
  background: rgba(90, 90, 90, 0.2);
  border-radius: 3px;
  overflow: hidden;
  pointer-events: none;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-crowd);
  border-radius: 3px;
  transition: width var(--duration-fast) linear;
}

#config-panel {
  margin-top: var(--space-6);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#config-panel label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

#level-value,
#base-value {
  font-weight: 700;
}

#level-slider,
#base-slider {
  width: 120px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(90, 90, 90, 0.2);
  border-radius: 3px;
  outline: none;
}

#level-slider::-webkit-slider-thumb,
#base-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--color-crowd);
  border-radius: 50%;
  cursor: pointer;
}

#level-slider::-moz-range-thumb,
#base-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--color-crowd);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}