@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:            222 47% 11%;     /* deep blue header */
  --primary-foreground: 0 0% 100%;

  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;

  --destructive: 346 87% 43%;           /* red for CTA */
  --destructive-foreground: 0 0% 100%;

  --secondary: 199 89% 48%;             /* cyan accent */
  --secondary-foreground: 0 0% 100%;

  --warning: 45 93% 47%;
  --warning-foreground: 222 47% 11%;

  --pulse: 199 89% 48%;                 /* cyan pulse */
  --pulse-foreground: 0 0% 100%;

  --border: 214 32% 91%;
  --ring: 199 89% 48%;
  --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: #0ea5e9;
  --violet-mid: #0284c7;
  --violet-light: #38bdf8;
  --teal: #e11d48;
  --teal-light: #f43f5e;
  --gold: #eab308;
  --gold-light:#fde047;
}

/* Logo */
.logo-img {
  width: 185px;
  /* height: 30px; */
}

/* Hero */
.rp-hero {
  background:linear-gradient(135deg,#020617 0%,#0f172a 35%,#02081c 70%,#01030d 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(14,165,233,.25) 0%, transparent 60%),
             radial-gradient(ellipse at 80% 20%, rgba(225,29,72,.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(14,165,233,.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(214 32% 91%);
  box-shadow:0 2px 12px rgba(14,165,233,.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:#f0f9ff; color:#0284c7; border:1.5px solid #e0f2fe;
  transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.rp-pill:hover { background:#e0f2fe; border-color:#38bdf8; }
.rp-pill.active { background:linear-gradient(135deg,#0284c7,#0ea5e9); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(14,165,233,.3); }

/* Casino Score Card */
.rp-card {
  background:#fff; border-radius:16px; border:1px solid #e0f2fe;
  overflow:hidden; transition:transform .25s, box-shadow .25s;
  box-shadow:0 2px 12px rgba(14,165,233,.06);
}
.rp-card:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(14,165,233,.14); }
.rp-card-rank1 { border-color:rgba(14,165,233,.3); border-width:2px; box-shadow:0 4px 24px rgba(14,165,233,.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,#0284c7,#0ea5e9); box-shadow:0 0 18px rgba(14,165,233,.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,#e11d48,#be123c); box-shadow:0 0 12px rgba(225,29,72,.35); }

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

/* badges */
.rp-badge-top { background:rgba(14,165,233,.1); color:#0284c7; border:1px solid rgba(14,165,233,.2); }
.rp-badge-bonus { background:rgba(234,179,8,.1); color:#ca8a04; border:1px solid rgba(234,179,8,.2); }
.rp-badge-teal { background:rgba(225,29,72,.1); color:#be123c; border:1px solid rgba(225,29,72,.2); }

/* CTA */
.rp-cta {
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#e11d48,#be123c);
  color:#fff; font-weight:700; border-radius:12px;
  padding:12px 20px; font-size:14px; transition:all .2s;
  box-shadow:0 4px 14px rgba(225,29,72,.3);
}
.rp-cta:hover { transform:translateY(-1px) scale(1.02); box-shadow:0 8px 24px rgba(225,29,72,.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; }
}