/* ===========================
   Design tokens
   =========================== */
:root {
  --accent-from: #3B82F6;  /* blue-500  */
  --accent-to:   #8B5CF6;  /* violet-500 */
  --accent-glow: rgba(99, 102, 241, 0.35);
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===========================
   Custom scrollbar
   =========================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #161B22; }
::-webkit-scrollbar-thumb { background: #30363D; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #484F58; }

/* ===========================
   Base
   =========================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(139, 92, 246, 0.06) 0%, transparent 60%),
    #0D1117;
  background-attachment: fixed;
  color: #E6EDF3;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===========================
   Line clamp
   =========================== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===========================
   Anime card hover effect
   =========================== */
.anime-card {
  transition:
    transform    0.2s var(--ease-out),
    box-shadow   0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
  will-change: transform;
}
.anime-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(59, 130, 246, 0.12),
    0 2px 8px  rgba(0, 0, 0, 0.3);
  border-color: rgba(139, 92, 246, 0.3) !important;
}

/* ===========================
   Drag & drop
   =========================== */
.dragging {
  opacity: 0.35;
  cursor: grabbing;
}
.drag-over {
  border-top: 2px solid var(--accent-from) !important;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, transparent 40%) !important;
}

/* ===========================
   Modal animations + glass
   =========================== */
.modal-backdrop {
  animation: backdropFadeIn 0.18s var(--ease-out) forwards;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(1, 4, 9, 0.7) !important;
}
@keyframes backdropFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-box {
  animation: modalSlideUp 0.28s var(--ease-spring) forwards;
  border-color: #30363D !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.6),
    0 0 40px    var(--accent-glow),
    0 0 0 1px  rgba(255, 255, 255, 0.03) !important;
}
@keyframes modalSlideUp {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ===========================
   Notification toast
   =========================== */
.toast {
  animation: toastIn 0.22s var(--ease-spring) forwards;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left-width: 3px !important;
}
@keyframes toastIn {
  from { transform: translateY(16px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ===========================
   Score box (right side of card)
   =========================== */
.score-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 900;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s var(--ease-out);
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.anime-card:hover .score-box { transform: scale(1.05); }

.score-empty { background: #161B22; color: #484F58; font-size: 1.5rem; text-shadow: none; }

/* Płynny gradient 1 → 9 (czerwień → pomarańcz → zieleń).
   Dodany inner-glow (inset shadow) daje efekt "chipa" zamiast płaskiego prostokąta.
   10 ma osobną paletę fioletowo-różową, żeby nie dało się jej pomylić z resztą. */
.score-1,  .score-2,  .score-3,  .score-4,  .score-5,
.score-6,  .score-7,  .score-8,  .score-9 {
  box-shadow:
    inset 0  0  0 1px rgba(255, 255, 255, 0.05),
    inset 0 -8px 16px rgba(0, 0, 0, 0.25),
    inset 0  1px  0 rgba(255, 255, 255, 0.08);
}
.score-1 { background: #991B1B; color: #FEE2E2; }  /* red-800 */
.score-2 { background: #C2410C; color: #FFEDD5; }  /* red→orange */
.score-3 { background: #DC2626; color: #FEE2E2; }  /* red-600 */
.score-4 { background: #EA580C; color: #FFEDD5; }  /* orange-600 */
.score-5 { background: #F97316; color: #431407; }  /* orange-500 */
.score-6 { background: #A3A30D; color: #FEFCE8; }  /* ciemna limonka */
.score-7 { background: #65A30D; color: #F7FEE7; }  /* lime-600 */
.score-8 { background: #16A34A; color: #DCFCE7; }  /* green-600 */
.score-9 { background: #15803D; color: #DCFCE7; }  /* green-700 */

/* Score 10 — złoty gradient + glow + shimmer.
   Zupełnie inna paleta niż 1-9 (te idą w czerwień→zieleń, bez żółtego),
   więc 10-ka jest jednoznacznie „wybitna". */
.score-10 {
  background: linear-gradient(135deg, #FFE066 0%, #FFB000 35%, #FF8C00 70%, #FF6B35 100%);
  color: #2A1500;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(120, 60, 0, 0.35);
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.35),
    inset 0 -6px 18px rgba(180, 90, 0, 0.35),
    0 0 24px rgba(255, 176, 0, 0.55);
  animation: score10Glow 2.4s ease-in-out infinite;
  overflow: hidden;
}
.score-10::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: score10Shimmer 3.2s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes score10Glow {
  0%, 100% { box-shadow: inset 0 0 16px rgba(255,255,255,0.35), inset 0 -6px 18px rgba(180,90,0,0.35), 0 0 18px rgba(255,176,0,0.45); }
  50%      { box-shadow: inset 0 0 22px rgba(255,255,255,0.50), inset 0 -6px 22px rgba(180,90,0,0.45), 0 0 34px rgba(255,176,0,0.85); }
}
@keyframes score10Shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===========================
   Drag handle cursor
   =========================== */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }

/* ===========================
   Input focus ring
   =========================== */
input:focus, select:focus, textarea:focus {
  outline: 2px solid #2563EB;
  outline-offset: 1px;
}
button:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===========================
   Status tabs active indicator
   =========================== */
.status-tab-active {
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, var(--accent-from), var(--accent-to)) 1;
  color: #E6EDF3 !important;
  box-shadow: 0 4px 12px -4px var(--accent-glow);
}

/* ===========================
   Shimmer loading placeholder
   =========================== */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.skeleton {
  background: linear-gradient(90deg, #161B22 25%, #21262D 50%, #161B22 75%);
  background-size: 200% auto;
  animation: shimmer 1.4s linear infinite;
  border-radius: 4px;
}

/* ===========================
   Accent utilities (gradient brand)
   =========================== */
.accent-gradient {
  background: linear-gradient(135deg, var(--accent-from) 0%, var(--accent-to) 100%);
}
.accent-gradient:hover {
  filter: brightness(1.1);
}
.accent-text {
  background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ===========================
   Stat card (used in StatsPanel)
   =========================== */
.stat-card {
  transition:
    transform  0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out);
  will-change: transform;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ===========================
   Anime card cover — plakat w ramce.
   Cel: wydzielić okładkę jako osobny, widoczny element — jak plakat
   osadzony w karcie, a nie zdjęcie wklejone bez separacji.
   Składniki: padding na kolumnie (daje oddech), rounded corners na
   samej okładce, jasny 1px ring + miękki drop shadow + subtle vignette.
   =========================== */
.card-cover-img {
  display: block;
  position: relative;
  filter: saturate(0.95) brightness(0.96);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),     /* jasny inner ring — widoczna ramka */
    0 0 0 3px rgba(0, 0, 0, 0.25),          /* ciemniejszy „passepartout" */
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 20px -4px rgba(0, 0, 0, 0.5);     /* drop shadow daje głębię */
  transition:
    box-shadow 0.25s var(--ease-out),
    filter    0.25s var(--ease-out),
    transform 0.3s var(--ease-out);
  will-change: transform;
}

/* Delikatna winieta dookoła okładki — przez pseudo na wrapperze.
   Podkreśla brzegi bez zasłaniania obrazu. */
.card-cover {
  position: relative;
}

/* Na hover całej karty: okładka „ożywa" — akcent w ringu, lekki lift + zoom,
   pełniejsze kolory. */
.anime-card:hover .card-cover-img {
  filter: saturate(1.05) brightness(1);
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.45),     /* akcentowy ring (violet-500) */
    0 0 0 3px rgba(139, 92, 246, 0.12),     /* poświata wokół ringu */
    0 4px 8px rgba(0, 0, 0, 0.5),
    0 12px 28px -4px rgba(0, 0, 0, 0.55);
}

/* Placeholder (🎬) — gradient tła + ta sama ramka co prawdziwa okładka,
   żeby pusty stan nie wyglądał jak wypadek. */
.card-cover-placeholder {
  background:
    radial-gradient(ellipse at center, #2A3038 0%, #1C2128 70%, #161B22 100%);
}
.card-cover-placeholder > span {
  opacity: 0.55;
  filter: grayscale(0.4);
}

/* ===========================
   Score filter chips — używają tych samych .score-N kolorów co score-box,
   ale w dwóch wariantach: idle (przytłumiony, lekki outline) oraz active
   (pełny kolor + lift + shadow).
   =========================== */
.score-chip {
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* Idle: wyciszony — tło ledwo widoczne, kolor scora tylko w teście + ramce */
.score-chip.score-chip-idle {
  background: transparent !important;
  color: inherit !important;
  border-color: rgba(139, 92, 246, 0);
  opacity: 0.85;
}
.score-chip.score-chip-idle.score-1  { color: #F87171; border-color: rgba(248,113,113,0.35); }
.score-chip.score-chip-idle.score-2  { color: #FB923C; border-color: rgba(251,146,60,0.35);  }
.score-chip.score-chip-idle.score-3  { color: #F87171; border-color: rgba(248,113,113,0.35); }
.score-chip.score-chip-idle.score-4  { color: #FB923C; border-color: rgba(251,146,60,0.35);  }
.score-chip.score-chip-idle.score-5  { color: #FB923C; border-color: rgba(251,146,60,0.4);   }
.score-chip.score-chip-idle.score-6  { color: #D4D427; border-color: rgba(212,212,39,0.35);  }
.score-chip.score-chip-idle.score-7  { color: #A3E635; border-color: rgba(163,230,53,0.35);  }
.score-chip.score-chip-idle.score-8  { color: #4ADE80; border-color: rgba(74,222,128,0.4);   }
.score-chip.score-chip-idle.score-9  { color: #22C55E; border-color: rgba(34,197,94,0.45);   }
.score-chip.score-chip-idle.score-10 {
  background: transparent !important;
  color: #FFB000 !important;
  border-color: rgba(255, 176, 0, 0.55);
  text-shadow: none;
  animation: none;
}
.score-chip.score-chip-idle.score-10::after { animation: none; opacity: 0; }

.score-chip.score-chip-idle:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Active: pełny kolor score-box + lekki lift + outer glow */
.score-chip.score-chip-active {
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px -2px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ===========================
   Floating emoji (empty states)
   =========================== */
.float-emoji {
  display: inline-block;
  animation: floatEmoji 3.5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes floatEmoji {
  0%, 100% { transform: translateY(0)    rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg);  }
}

/* ===========================
   Reduced motion — szacunek dla ustawień systemu
   =========================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
  .score-10 { animation: none !important; }
  .score-10::after { animation: none !important; }
  .float-emoji { animation: none !important; }
  .skeleton    { animation: none !important; }
}