@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-bg: #1a1424;
    --color-surface: #221c2f;
    --color-surface-2: #2a2339;
    --color-surface-offset: #352c46;
    --color-border: rgba(240, 193, 136, 0.10);
    --color-text: #f0e6d2;
    --color-text-muted: #a8997d;
    --color-text-faint: #5e5448;
    --color-primary: #e8965a;
    --color-pick: #8aaa5a;
    --color-reject: #d06464;
    --color-star: #f0c188;
  }

  body {
    @apply bg-bg text-text;
    font-family: 'Geist', system-ui, sans-serif;
  }
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-surface;
}

::-webkit-scrollbar-thumb {
  @apply bg-surface-offset rounded;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-text-faint;
}

/* Mule walk cycle — 3x2 sprite sheet (6 frames). Each keyframe holds
   for one step thanks to `steps(1)` so the background snaps frame-to-frame
   instead of interpolating. */
@keyframes mule-walk {
  0%     { background-position: 0% 0%; }
  16.66% { background-position: 50% 0%; }
  33.33% { background-position: 100% 0%; }
  50%    { background-position: 0% 100%; }
  66.66% { background-position: 50% 100%; }
  83.33% { background-position: 100% 100%; }
  100%   { background-position: 0% 0%; }
}

/* Parallax desert scroll — moves the desert layer right→left by exactly
   one tile width so the loop is seamless. The tile width is fixed in
   CSS (see TopBar.tsx) so the keyframe end value matches. */
@keyframes desert-scroll {
  from { background-position-x: 0px, 0px; }
  to   { background-position-x: -200px, 0px; }
}