@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* ══════════════════════════════════════════
   RatingPulse — Design System (Purple/Violet)
══════════════════════════════════════════ */
:root {
  --primary:            268 62% 18%;     /* deep purple header */
  --primary-foreground: 0 0% 100%;

  --background: 0 0% 100%;
  --foreground: 268 30% 12%;

  --card: 0 0% 100%;
  --card-foreground: 268 30% 12%;

  --muted: 268 20% 95%;
  --muted-foreground: 268 16% 48%;

  --destructive: 142 71% 38%;           /* green for CTA */
  --destructive-foreground: 0 0% 100%;

  --secondary: 268 70% 55%;             /* violet accent */
  --secondary-foreground: 0 0% 100%;

  --warning: 38 92% 50%;
  --warning-foreground: 26 83% 14%;

  --pulse: 180 90% 40%;                 /* teal "pulse" accent */
  --pulse-foreground: 0 0% 100%;

  --border: 268 20% 88%;
  --ring: 268 70% 55%;
  --radius: 0.5rem;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background-color:hsl(var(--background));
  color:hsl(var(--foreground));
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}

/* ── Animations ── */
@keyframes fade-in      { from{opacity:0}       to{opacity:1} }
@keyframes fade-in-up   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slide-right  { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse-glow   { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes bar-fill     { from{transform:scaleY(0.2)} to{transform:scaleY(1)} }
@keyframes slide-from-bottom { from{opacity:0;transform:translateY(100%)} to{opacity:1;transform:translateY(0)} }

.animate-fade-in       { animation:fade-in .6s ease-out; }
.animate-fade-in-up    { animation:fade-in-up .6s ease-out; animation-fill-mode:both; }
.animate-slide-right   { animation:slide-right .6s ease-out; animation-fill-mode:both; }
.animate-slide-in-right{ animation:slide-right .6s ease-out; animation-fill-mode:both; }
.animate-slide-in-from-bottom { animation:slide-from-bottom .5s cubic-bezier(.16,1,.3,1); }
.animate-scale-in      { animation:fade-in-up .4s ease-out; }
.rp-pulse              { animation:pulse-glow 2.5s ease-in-out infinite; }

/* ── Typography ── */
.text-balance { text-wrap:balance; }
.text-pretty  { text-wrap:pretty; }

/* ── Focus ── */
*:focus-visible { outline:2px solid hsl(var(--ring)); outline-offset:2px; }

/* ── Transitions ── */
button,a { transition:all .2s ease-in-out; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:hsl(var(--muted)); }
::-webkit-scrollbar-thumb { background:hsl(var(--secondary)/.3); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:hsl(var(--secondary)/.5); }

/* ════════════════════════════════════════════
   RANKING PAGE — Score Pulse Cards
════════════════════════════════════════════ */
:root {
  --violet: #6d28d9;
  --violet-mid: #7c3aed;
  --violet-light: #8b5cf6;
  --teal: #0d9488;
  --teal-light: #14b8a6;
  --gold: #f59e0b;
  --gold-light:#fbbf24;
}

/* Hero */
.rp-hero {
  background:linear-gradient(135deg,#1e0a3c 0%,#2d1162 35%,#1a0a2e 70%,#0f0720 100%);
  position:relative; overflow:hidden;
}
.rp-hero::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:radial-gradient(ellipse at 20% 50%, rgba(109,40,217,.25) 0%, transparent 60%),
             radial-gradient(ellipse at 80% 20%, rgba(13,148,136,.15) 0%, transparent 50%);
  pointer-events:none;
}
.rp-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),transparent);
}

/* Sort bar */
.rp-sort-bar {
  position:sticky; top:64px; z-index:40;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid hsl(268 20% 88%);
  box-shadow:0 2px 12px rgba(109,40,217,.08);
}

/* Filter pills */
.rp-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  background:#f5f3ff; color:#6d28d9; border:1.5px solid #e0d9f7;
  transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.rp-pill:hover { background:#ede9fe; border-color:#8b5cf6; }
.rp-pill.active { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(109,40,217,.3); }

/* Casino Score Card */
.rp-card {
  background:#fff; border-radius:16px; border:1px solid #ede9fe;
  overflow:hidden; transition:transform .25s, box-shadow .25s;
  box-shadow:0 2px 12px rgba(109,40,217,.06);
}
.rp-card:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(109,40,217,.14); }
.rp-card-rank1 { border-color:rgba(109,40,217,.3); border-width:2px; box-shadow:0 4px 24px rgba(109,40,217,.12); }

/* score pulse bars */
.pulse-bars {
  display:flex; align-items:flex-end; gap:3px; height:28px;
}
.pulse-bars span {
  display:block; width:5px; border-radius:2px 2px 0 0;
  animation:bar-fill .6s ease-out both;
  background:linear-gradient(180deg, var(--violet-light), var(--violet));
}
.pulse-bars span:nth-child(1) { height:40%; animation-delay:.05s; }
.pulse-bars span:nth-child(2) { height:65%; animation-delay:.1s; }
.pulse-bars span:nth-child(3) { height:100%; animation-delay:.15s; }
.pulse-bars span:nth-child(4) { height:85%; animation-delay:.2s; }
.pulse-bars span:nth-child(5) { height:55%; animation-delay:.25s; }
.pulse-bars span:nth-child(6) { height:75%; animation-delay:.3s; }
.pulse-bars span:nth-child(7) { height:90%; animation-delay:.35s; }

/* rank badge */
.rp-rank-1 { background:linear-gradient(135deg,#7c3aed,#6d28d9); box-shadow:0 0 18px rgba(109,40,217,.5); }
.rp-rank-2 { background:linear-gradient(135deg,#64748b,#475569); box-shadow:0 0 12px rgba(71,85,105,.35); }
.rp-rank-3 { background:linear-gradient(135deg,#0d9488,#0f766e); box-shadow:0 0 12px rgba(13,148,136,.35); }

/* stat box */
.rp-stat {
  background:#f9f7ff; border:1px solid #ede9fe; border-radius:10px;
  padding:8px 10px; text-align:center;
}

/* badges */
.rp-badge-top { background:rgba(109,40,217,.1); color:#6d28d9; border:1px solid rgba(109,40,217,.2); }
.rp-badge-bonus { background:rgba(245,158,11,.1); color:#d97706; border:1px solid rgba(245,158,11,.2); }
.rp-badge-teal { background:rgba(13,148,136,.1); color:#0f766e; border:1px solid rgba(13,148,136,.2); }

/* CTA */
.rp-cta {
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  color:#fff; font-weight:700; border-radius:12px;
  padding:12px 20px; font-size:14px; transition:all .2s;
  box-shadow:0 4px 14px rgba(109,40,217,.3);
}
.rp-cta:hover { transform:translateY(-1px) scale(1.02); box-shadow:0 8px 24px rgba(109,40,217,.45); }

/* card-desktop / card-mobile toggle */
.card-desktop { display:flex; }
.card-mobile  { display:none; }
@media(max-width:1023px) { .card-desktop{display:none!important;} .card-mobile{display:block!important;} }
@media(min-width:1024px) { .card-desktop{display:flex!important;} .card-mobile{display:none!important;} }
.rp-card { width:100%; }

/* ════════════════════════════════════════════
   MOBILE — Global
════════════════════════════════════════════ */
@media(max-width:640px) {
  .container { padding-left:12px; padding-right:12px; }
  h1 { font-size:1.75rem !important; }
  h2 { font-size:1.35rem !important; }
  article p, .prose p { font-size:.9rem; line-height:1.7; }
  .rp-pill { padding:8px 14px; font-size:12px; }
}
@media(max-width:480px) {
  #affiliate-notice { font-size:10px !important; line-height:1.5; }
}
@media(max-width:1023px) {
  .hidden.lg\:block { display:none !important; }
  .lg\:hidden { display:block !important; }
}

/* ── Mobile nav ── */
#mobile-menu a { display:block; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); }
#mobile-menu a:last-child { border-bottom:none; }

/* ── CTA touch target ── */
@media(max-width:640px) {
  .rp-cta, a.bg-destructive, button.bg-destructive { min-height:44px; }
  footer .grid { gap:24px !important; }
  footer .flex-wrap img { height:40px !important; }
}