@import "tailwindcss";

/* ------------------------------------------------------------------------
   Spinza design system — dark luxury. Deep charcoal, subtle metallic
   surfaces, high contrast, restrained accent. Game artwork supplies colour.
   ------------------------------------------------------------------------ */

@theme {
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-bg: #07080c;
  --color-bg-1: #0c0e14;
  --color-bg-2: #12141c;
  --color-bg-3: #191c26;
  --color-surface: rgb(255 255 255 / 0.035);
  --color-surface-2: rgb(255 255 255 / 0.06);
  --color-surface-3: rgb(255 255 255 / 0.09);
  --color-line: rgb(255 255 255 / 0.08);
  --color-line-2: rgb(255 255 255 / 0.14);
  --color-fg: #f3f4f8;
  --color-fg-2: #b6bac6;
  --color-fg-3: #7b8090;
  --color-fg-4: #4f5464;
  --color-accent: #c9a961;
  --color-accent-2: #e8cf8f;
  --color-accent-soft: rgb(201 169 97 / 0.14);
  --color-credit: #ffd66b;
  --color-success: #3ddc97;
  --color-danger: #ff5c7a;
  --color-info: #6ea8ff;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 50px -30px rgb(0 0 0 / 0.9);
  --shadow-glow: 0 0 0 1px rgb(201 169 97 / 0.25), 0 10px 40px -10px rgb(201 169 97 / 0.35);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --animate-fade-in: fade-in 0.35s var(--ease-out-expo) both;
  --animate-fade-up: fade-up 0.5s var(--ease-out-expo) both;
  --animate-shimmer: shimmer 2.6s linear infinite;
  --animate-pulse-soft: pulse-soft 2.4s ease-in-out infinite;
  --animate-float: float 6s ease-in-out infinite;
  --animate-spin-slow: spin 14s linear infinite;

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes shimmer {
    from { background-position: -200% 0; }
    to { background-position: 200% 0; }
  }
  @keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
}

:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --z-nav: 40;
  --z-sheet: 60;
  --z-modal: 80;
  --z-toast: 100;
}

html {
  background: var(--color-bg);
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}

body {
  @apply bg-bg text-fg font-sans antialiased;
  min-height: 100dvh;
  overscroll-behavior-y: none;
  font-feature-settings: "ss01", "cv11", "tnum";
}

::selection {
  background: rgb(201 169 97 / 0.35);
}

/* Prevent iOS zoom on inputs. */
input,
select,
textarea {
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------- utils */

@utility surface {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.02));
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
}

@utility surface-2 {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.035));
  border: 1px solid var(--color-line-2);
  box-shadow: var(--shadow-card);
}

@utility metal {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0.04) 60%, rgb(255 255 255 / 0) 100%),
    linear-gradient(180deg, #1a1d27, #0e1017);
  border: 1px solid rgb(255 255 255 / 0.12);
}

@utility text-credit {
  color: var(--color-credit);
  font-variant-numeric: tabular-nums;
}

@utility tabular {
  font-variant-numeric: tabular-nums;
}

@utility hairline {
  border-color: var(--color-line);
}

@utility scrollbar-none {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility snap-row {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
  & > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
}

@utility shimmer-text {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 40%, #fff7dc 50%, var(--color-accent-2) 60%, var(--color-accent) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3s linear infinite;
}

@utility glass {
  background: rgb(12 14 20 / 0.72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--color-line);
}

@utility tap {
  min-height: 44px;
  min-width: 44px;
}

@utility page {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1rem;
  @media (min-width: 640px) {
    padding-inline: 1.5rem;
  }
  @media (min-width: 1024px) {
    padding-inline: 2rem;
  }
}

@utility eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-3);
  font-weight: 600;
}

@utility focus-ring {
  outline: none;
  &:focus-visible {
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
  }
}

/* game canvas fills its container */
.spz-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}