@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: #c4b599;
    --color-text-faint: #7a6e5e;
    --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;
  }
}

/* Compact themed scrollbars. Track is fully transparent so the bar
   floats over the panel surface, and the thumb is a slim translucent
   pill that tints toward the primary on hover. Firefox uses the
   `scrollbar-*` properties below; Chromium / WebKit uses the
   `::-webkit-scrollbar*` rules. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 230, 210, 0.18) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(240, 230, 210, 0.18);
  border-radius: 9999px;
  /* Inset border keeps the thumb visually slimmer than the track gutter
     so it reads as a pill rather than a bar. */
  border: 1px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(232, 150, 90, 0.55); /* primary, soft */
}

::-webkit-scrollbar-thumb:active {
  background-color: rgba(232, 150, 90, 0.85);
}

/* 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; }
}