/* ============================================================
   css/styles.css — Custom styles & animations for 82-0
   (everything that Tailwind's utility classes can't cover)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: #f8fafc;
  color: #0f172a;
  font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }

/* ── Player cards ──────────────────────────────────────────── */
.player-card {
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.player-card:hover:not(.selected) {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  transform: translateY(-1px);
}
.player-card.selected {
  border-color: #2563eb !important;
  background: #dbeafe !important;
}

/* ── Roster slots ──────────────────────────────────────────── */
.slot-empty.droppable { cursor: pointer; }
.slot-empty.droppable:hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

/* ── Positional fit borders (filled roster slots) ──────────── */
.fit-primary {
  border-color: #22c55e !important;
  border-top:   3px solid #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.22), 0 1px 3px rgba(0,0,0,0.06) !important;
}
.fit-flex {
  border-color: #f97316 !important;
  border-top:   3px solid #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.22), 0 1px 3px rgba(0,0,0,0.06) !important;
}
.fit-place {
  border-color: #ef4444 !important;
  border-top:   3px solid #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.22), 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ── Slot-machine spin animation ───────────────────────────── */
.slot-badge { transition: all 0.12s; }
.slot-spinning .slot-badge {
  animation: spinTick 0.08s steps(1) infinite;
}

/* ── Utility ───────────────────────────────────────────────── */
.main-gradient { background: #f8fafc; }
.stat-bar-fill { transition: width 0.8s cubic-bezier(.4,0,.2,1); }
.card-shadow   { box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); }

/* ── Perfect-season glow ───────────────────────────────────── */
.perfect-glow {
  box-shadow: 0 0 0 2px #fde68a, 0 4px 24px rgba(217,119,6,0.18);
}

/* ── Era cards ─────────────────────────────────────────────── */
.era-card {
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.era-card:hover {
  transform: translateY(-1px);
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

/* ── Safe-area bottom padding (iOS) ────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .safe-bottom {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* ── Keyframes (must mirror the Tailwind config in index.html) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes spinTick {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.3; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(37,99,235,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(37,99,235,0);    }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1);    }
}