/*
Theme Name: NCTL Vegas
Theme URI: https://newcasinostoplist.com
Author: Anna9
Description: Bright, multi-colour Vegas-energy casino-affiliate theme. Cream base, hot-pink/cyan/lime/royal/gold accent system, animated NEW badges, multi-stroke score rings, magazine-quality reviews with daylight Vegas confidence.
Version: 2.3.1
Text Domain: nctl-vegas
*/

/* ============================================================
   Tokens
   ============================================================ */
@font-face{
  font-family:"Inter Var";
  src:url("assets/fonts/inter.woff2") format("woff2-variations"),
      url("assets/fonts/inter.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces Var";
  src:url("assets/fonts/fraunces.woff2") format("woff2-variations"),
      url("assets/fonts/fraunces.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* Base — bright cream paper, warm */
  --paper:#FAF7F2;
  --paper-2:#F4EFE6;
  --paper-3:#ECE5D6;
  --ink:#15131C;          /* near-black with warm violet tint */
  --ink-soft:#36323F;
  --ink-mute:#6E6878;
  --line:#E4DCC9;
  --line-soft:#EFE7D5;

  /* Vegas multicolor accent system */
  --hot:#FF2E88;          /* hot pink / magenta neon */
  --hot-deep:#D81E6E;
  --cyan:#00D5E5;         /* electric cyan */
  --cyan-deep:#0099A8;
  --lime:#C7F23C;         /* neon lime */
  --lime-deep:#9FC820;
  --royal:#3046FF;        /* kungsblå */
  --royal-deep:#1E2EBC;
  --gold:#F5B921;         /* warm gold */
  --gold-deep:#C49000;
  --orange:#FF7A1A;       /* signage orange */
  --violet:#8B3FFF;

  --ok:#1FB570;
  --warn:#F0A23A;
  --bad:#E53860;

  /* Composite gradients (Vegas-sign energy) */
  --grad-vegas:linear-gradient(95deg,#FF2E88 0%,#FF7A1A 30%,#F5B921 55%,#C7F23C 80%,#00D5E5 100%);
  --grad-hot:linear-gradient(135deg,#FF2E88 0%,#FF7A1A 100%);
  --grad-cyan:linear-gradient(135deg,#00D5E5 0%,#3046FF 100%);
  --grad-lime:linear-gradient(135deg,#C7F23C 0%,#1FB570 100%);
  --grad-gold:linear-gradient(135deg,#FFD86B 0%,#F5B921 50%,#C49000 100%);
  --grad-paper:linear-gradient(180deg,#FAF7F2 0%,#F4EFE6 100%);

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:3rem; --sp-6:4.5rem; --sp-7:7rem;
  --rad:16px; --rad-sm:10px; --rad-pill:999px;
  --max:1240px; --read:68ch;

  --t-xs:.78rem; --t-sm:.88rem; --t-base:1rem; --t-lg:1.18rem; --t-xl:1.5rem; --t-2xl:2.1rem; --t-3xl:3rem; --t-4xl:clamp(2.6rem,6vw,4.8rem);

  --font:"Inter Var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Fraunces Var","Fraunces",Georgia,"Iowan Old Style",serif;

  --shadow-card:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 14px rgba(21,19,28,.06), 0 18px 40px -20px rgba(21,19,28,.18);
  --shadow-pop:0 10px 30px -10px rgba(255,46,136,.45), 0 6px 18px -8px rgba(0,213,229,.25);
  --shadow-soft:0 8px 24px rgba(21,19,28,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0;font-family:var(--font);font-size:var(--t-base);line-height:1.65;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 90% -10%, rgba(255,46,136,.08), transparent 60%),
    radial-gradient(800px 500px at 0% 6%, rgba(0,213,229,.07), transparent 55%),
    radial-gradient(700px 700px at 50% 100%, rgba(199,242,60,.06), transparent 60%),
    var(--paper);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--hot-deep);text-decoration:none;transition:color .2s,opacity .2s}
a:hover{color:var(--royal)}
::selection{background:var(--lime);color:var(--ink)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0 0 var(--sp-2);font-variation-settings:"opsz" 144,"SOFT" 30}
h1{font-size:var(--t-4xl);letter-spacing:-.04em;font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,var(--t-2xl));font-variation-settings:"opsz" 72,"SOFT" 30}
h3{font-size:var(--t-xl);font-variation-settings:"opsz" 36,"SOFT" 30}
h4{font-family:var(--font);font-weight:700;letter-spacing:-.005em;font-size:var(--t-base)}
p{margin:0 0 var(--sp-2)}
em{font-style:italic}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--sp-3)}
.read{max-width:var(--read)}
.muted{color:var(--ink-mute)}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.22em;color:var(--hot-deep);font-weight:700}
.eyebrow::before{content:"";width:14px;height:2px;background:var(--grad-hot);border-radius:2px}
.eyebrow--cyan{color:var(--cyan-deep)}
.eyebrow--cyan::before{background:var(--grad-cyan)}
.eyebrow--lime{color:var(--lime-deep)}
.eyebrow--lime::before{background:var(--grad-lime)}
.eyebrow--gold{color:var(--gold-deep)}
.eyebrow--gold::before{background:var(--grad-gold)}

.grad-text{
  background:var(--grad-vegas);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradShift 8s ease-in-out infinite;
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.headline-italic{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100;font-weight:700}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:1rem 1.6rem;border:0;border-radius:var(--rad-pill);
  font-family:var(--font);font-weight:700;font-size:var(--t-sm);letter-spacing:.02em;
  cursor:pointer;transition:transform .2s,box-shadow .25s,filter .25s;
  text-decoration:none;line-height:1;overflow:hidden;
}
.btn--gold{background:var(--grad-gold);color:#3D2A00;box-shadow:0 6px 20px rgba(245,185,33,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--gold:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 12px 30px rgba(245,185,33,.55),inset 0 1px 0 rgba(255,255,255,.5);color:#3D2A00}
.btn--hot{background:var(--grad-hot);color:#fff;box-shadow:0 6px 22px rgba(255,46,136,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--hot:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 14px 34px rgba(255,46,136,.55);color:#fff}
.btn--cyan{background:var(--grad-cyan);color:#fff;box-shadow:0 6px 22px rgba(0,213,229,.36)}
.btn--cyan:hover{transform:translateY(-2px);filter:brightness(1.05);color:#fff}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}

/* Shimmer sweep on primary CTAs */
.btn--gold::after,.btn--hot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.btn--gold:hover::after,.btn--hot:hover::after{transform:translateX(120%)}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,242,.85);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header::before{
  content:"";display:block;height:3px;
  background:var(--grad-vegas);
  background-size:200% 100%;
  animation:gradShift 8s ease-in-out infinite;
}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-3);max-width:var(--max);margin:0 auto;gap:var(--sp-3)}
.brand{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--serif);font-weight:800;font-size:1.32rem;letter-spacing:-.025em;color:var(--ink);
  font-variation-settings:"opsz" 36,"SOFT" 30;
  position:relative;
}
svg.brand-mark{
  width:40px;height:40px;flex:0 0 40px;
  filter:drop-shadow(0 4px 12px rgba(255,46,136,.38)) drop-shadow(0 1px 2px rgba(245,185,33,.35));
  overflow:visible;
  transition:filter .35s ease, transform .35s ease;
}
svg.brand-mark .bm-glow{
  filter:blur(7px);opacity:.55;transform-origin:center;transform:scale(1.08);
}
svg.brand-mark .bm-spark{
  transform-box:fill-box;
  transform-origin:center;
  animation:bmSparkIn 1.6s ease-out .15s both;
}
svg.brand-mark .bm-glint{
  opacity:0;
  animation:bmGlintIn 1.4s ease-out .35s 1 both;
}
.brand:hover svg.brand-mark{transform:translateY(-1px) rotate(-2deg)}
.brand:hover svg.brand-mark .bm-glint{animation:bmGlintHover .9s ease-out 1}
.brand:hover svg.brand-mark .bm-spark{animation:bmSparkPulse .8s ease-out 1}
@keyframes bmSparkIn{
  0%{transform:scale(0) rotate(-90deg);opacity:0}
  60%{transform:scale(1.4) rotate(15deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:.95}
}
@keyframes bmSparkPulse{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.45) rotate(20deg)}
}
@keyframes bmGlintIn{
  0%{opacity:0;transform:translateX(0) skewX(-18deg)}
  35%{opacity:1}
  100%{opacity:0;transform:translateX(80px) skewX(-18deg)}
}
@keyframes bmGlintHover{
  0%{opacity:0;transform:translateX(0) skewX(-18deg)}
  30%{opacity:1}
  100%{opacity:0;transform:translateX(80px) skewX(-18deg)}
}
@media (prefers-reduced-motion:reduce){
  svg.brand-mark .bm-spark,svg.brand-mark .bm-glint,.brand:hover svg.brand-mark .bm-spark,.brand:hover svg.brand-mark .bm-glint{animation:none !important}
  .brand:hover svg.brand-mark{transform:none}
}
.brand-word{display:inline-flex;align-items:baseline;white-space:nowrap}
.brand:hover{color:var(--hot-deep)}
.brand em{
  font-style:italic;
  background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variation-settings:"opsz" 36,"SOFT" 100;
}
.brand-tld{
  font-style:normal;
  font-family:var(--serif);
  font-weight:600;
  font-size:.52em;
  letter-spacing:.04em;
  margin-left:.12em;
  padding:.05em .28em .08em;
  border-radius:.32em;
  background:linear-gradient(135deg,rgba(0,213,229,.14),rgba(245,185,33,.18));
  color:var(--cyan-deep);
  position:relative;top:-.45em;
  letter-spacing:.06em;
  border:1px solid rgba(0,153,168,.22);
  font-variation-settings:"opsz" 14,"SOFT" 0;
}
.site-footer .brand-tld{color:var(--cyan-deep);background:linear-gradient(135deg,rgba(0,213,229,.12),rgba(245,185,33,.16))}
@media(max-width:560px){
  svg.brand-mark{width:34px;height:34px;flex:0 0 34px}
  .brand{font-size:1.15rem;gap:.5rem}
  .brand-tld{font-size:.5em}
}
.nav{display:flex;gap:var(--sp-3);align-items:center}
.nav a{color:var(--ink-soft);font-size:var(--t-sm);font-weight:600;letter-spacing:.005em;padding:.4rem .2rem;position:relative}
.nav a:hover{color:var(--hot-deep)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--grad-hot);transition:right .25s;border-radius:2px}
.nav a:hover::after{right:0}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);font-size:1.6rem;cursor:pointer}
@media(max-width:880px){
  .nav{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:var(--sp-3);border-bottom:1px solid var(--line);gap:var(--sp-2);box-shadow:var(--shadow-soft)}
  .nav.open{display:flex}
  .nav-toggle{display:block}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;padding:var(--sp-7) 0 var(--sp-5);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-25% -10% auto auto;width:760px;height:760px;
  background:radial-gradient(closest-side, rgba(255,46,136,.18), transparent 70%);
  pointer-events:none;z-index:0;
}
.hero::after{
  content:"";position:absolute;inset:auto auto -30% -10%;width:760px;height:760px;
  background:radial-gradient(closest-side, rgba(0,213,229,.17), transparent 70%);
  pointer-events:none;z-index:0;
}
.hero > .container{position:relative;z-index:1}
.hero h1{max-width:18ch;margin-top:var(--sp-3)}
.hero .lede{font-size:var(--t-lg);color:var(--ink-soft);max-width:60ch;margin-top:var(--sp-3);font-weight:400}
.hero .actions{margin-top:var(--sp-4);display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.hero .stats{margin-top:var(--sp-5);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);max-width:820px}
@media(max-width:780px){.hero .stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:var(--sp-2) 0;border-top:2px solid var(--ink);position:relative}
.stat::before{content:"";position:absolute;left:0;top:-2px;width:24px;height:2px;background:var(--grad-hot)}
.stat:nth-child(2)::before{background:var(--grad-cyan)}
.stat:nth-child(3)::before{background:var(--grad-lime)}
.stat:nth-child(4)::before{background:var(--grad-gold)}
.stat .num{font-family:var(--serif);font-size:var(--t-2xl);font-weight:800;color:var(--ink);font-variation-settings:"opsz" 72,"SOFT" 30;line-height:1}
.stat .lbl{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.18em;color:var(--ink-mute);margin-top:.4rem;font-weight:600}

/* Sparkles container */
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sparkle{position:absolute;width:14px;height:14px;opacity:.7;animation:sparkleSpin 6s linear infinite}
.sparkle--hot{filter:drop-shadow(0 0 6px rgba(255,46,136,.6))}
.sparkle--cyan{filter:drop-shadow(0 0 6px rgba(0,213,229,.6))}
.sparkle--lime{filter:drop-shadow(0 0 6px rgba(199,242,60,.7))}
.sparkle--gold{filter:drop-shadow(0 0 6px rgba(245,185,33,.7))}
@keyframes sparkleSpin{
  0%,100%{transform:rotate(0deg) scale(1);opacity:.6}
  50%{transform:rotate(180deg) scale(1.25);opacity:1}
}

/* ============================================================
   Sections
   ============================================================ */
section.block{padding:var(--sp-6) 0;position:relative}
section.block + section.block{border-top:1px dashed var(--line)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.section-head .right a{color:var(--ink-soft);font-size:var(--t-sm);font-weight:600;border-bottom:2px solid var(--line)}
.section-head .right a:hover{color:var(--hot-deep);border-color:var(--hot)}

/* ============================================================
   Toplist row (clean grid, 2026-05 redesign)
   Columns: rank | brand (logo + name + tags) | score | offer | cta
   ============================================================ */
.toplist{display:flex;flex-direction:column;gap:var(--sp-2)}

.tl-row{
  display:grid;
  grid-template-columns:64px minmax(220px,1.4fr) 110px minmax(180px,1.3fr) 180px;
  align-items:center;
  column-gap:var(--sp-3);
  row-gap:var(--sp-2);
  padding:var(--sp-3);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad);
  transition:transform .25s,border-color .25s,box-shadow .25s;
  position:relative;
  box-shadow:var(--shadow-card);
  /* overflow:visible so badges/popovers can sit slightly outside if needed */
}
.tl-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}

/* One accent per rank, applied as a discreet left border + soft glow.
   No rainbow stripe on the row itself — reserved for ring stroke / hero. */
.tl-row--top1{border-color:rgba(255,46,136,.45);box-shadow:0 8px 24px -12px rgba(255,46,136,.35),var(--shadow-card)}
.tl-row--top1::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--hot)}
.tl-row--top2{border-color:rgba(0,213,229,.45)}
.tl-row--top2::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--cyan)}
.tl-row--top3{border-color:rgba(199,242,60,.6)}
.tl-row--top3::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--lime)}

/* Rank cell --------------------------------------------------- */
.tl-rank{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;line-height:1;gap:.25rem;
  font-family:var(--serif);
}
.tl-rank-num{
  font-weight:800;font-size:2rem;color:var(--ink);
  font-variation-settings:"opsz" 144;
}
.tl-row--top1 .tl-rank-num{color:var(--hot-deep)}
.tl-row--top2 .tl-rank-num{color:var(--cyan-deep)}
.tl-row--top3 .tl-rank-num{color:var(--lime-deep)}
.tl-rank-mark{
  font-family:var(--font);font-size:.62rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);
  white-space:nowrap;
}
.tl-row--top1 .tl-rank-mark{color:var(--hot-deep)}

/* Brand cell (logo + name + tags) ---------------------------- */
.tl-brand{
  display:grid;grid-template-columns:96px minmax(0,1fr);
  align-items:center;gap:var(--sp-2);min-width:0;
}
.tl-logo{
  width:96px;height:64px;border-radius:var(--rad-sm);
  background:#fff;display:flex;align-items:center;justify-content:center;
  padding:.4rem;
  border:1px solid var(--line);
  flex-shrink:0;
}
.tl-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.tl-logo-fallback{font-family:var(--serif);font-weight:800;color:var(--ink);font-size:1rem;text-align:center}
.tl-meta{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.tl-name{
  font-family:var(--serif);font-weight:800;font-size:1.4rem;color:var(--ink);
  font-variation-settings:"opsz" 36,"SOFT" 30;
  line-height:1.15;
  /* allow wrapping but no awkward break inside the link itself */
  word-break:normal;overflow-wrap:anywhere;
}
.tl-name a{color:inherit}
.tl-name a:hover{color:var(--hot-deep)}
.tl-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  min-width:0;
}
.tl-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.72rem;padding:.22rem .55rem;border-radius:var(--rad-pill);
  background:#F4EFE6;color:var(--ink-soft);
  border:1px solid var(--line);
  font-weight:600;letter-spacing:.02em;
  white-space:normal;line-height:1.2;
  max-width:100%;
}
.tl-badge--gold{background:#FFF6E0;color:var(--gold-deep);border-color:rgba(245,185,33,.5)}
.tl-badge--cyan{background:#E1FBFE;color:var(--cyan-deep);border-color:rgba(0,213,229,.5)}
.tl-badge--lime{background:#F4FCD2;color:var(--lime-deep);border-color:rgba(199,242,60,.6)}

/* "Just launched" pill — small, inline, never absolute */
.badge-new{
  position:relative;
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--font);font-weight:700;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;
  padding:.22rem .55rem;border-radius:var(--rad-pill);
  background:var(--grad-hot);color:#fff;
  box-shadow:0 2px 8px rgba(255,46,136,.3);
  white-space:nowrap;
  line-height:1.1;
}
.badge-new::before{content:"⚡";font-size:.75rem;letter-spacing:0}
.badge-launched{
  font-size:.7rem;color:var(--ink-mute);letter-spacing:.06em;
  font-weight:600;white-space:nowrap;
}

/* Score cell -------------------------------------------------- */
.tl-score{display:flex;align-items:center;justify-content:center}
/* Neutralise the .score chip styles that bleed onto .ring via score--xx classes */
.ring{background:transparent !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
.ring::after{content:none !important}

/* Offer cell (bonus + payments) ------------------------------ */
.tl-offer{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.tl-bonus{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.tl-bonus .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute);font-weight:700}
.tl-bonus .val{
  font-family:var(--serif);font-weight:800;font-size:1.05rem;line-height:1.25;
  color:var(--ink);font-variation-settings:"opsz" 36;
  /* No background-image highlight — it looked like a broken selection. */
  word-break:normal;overflow-wrap:anywhere;
}
.tl-payments{
  display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;
  font-size:.72rem;color:var(--ink-mute);
  min-width:0;
}
.tl-payments-lbl{
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  color:var(--cyan-deep);
  white-space:nowrap;
}
.tl-payments-list{
  color:var(--ink-soft);font-weight:600;
  word-break:normal;overflow-wrap:anywhere;
}

/* CTA cell ---------------------------------------------------- */
.tl-cta{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  gap:.5rem;min-width:0;
}
.tl-cta .btn{width:100%;text-align:center;justify-content:center;padding:.85rem 1rem}
.tl-cta small{
  font-size:.66rem;color:var(--ink-mute);text-align:center;
  letter-spacing:.04em;
}
.tl-review-link{color:inherit;text-decoration:underline}

/* Tablet ------------------------------------------------------ */
@media(max-width:1080px){
  .tl-row{
    grid-template-columns:64px minmax(0,1fr) 96px;
    grid-template-areas:
      "rank brand brand"
      "score offer offer"
      "cta   cta   cta";
    column-gap:var(--sp-2);
  }
  .tl-rank{grid-area:rank}
  .tl-brand{grid-area:brand;grid-template-columns:80px minmax(0,1fr)}
  .tl-logo{width:80px;height:56px}
  .tl-score{grid-area:score;justify-self:start}
  .tl-offer{grid-area:offer}
  .tl-cta{grid-area:cta;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}
  .tl-cta .btn{width:auto;flex:1 1 auto}
  .tl-cta small{text-align:left;flex:1 1 50%}
}

/* Mobile ------------------------------------------------------ */
@media(max-width:560px){
  .tl-row{
    grid-template-columns:48px minmax(0,1fr);
    grid-template-areas:
      "rank  brand"
      "score score"
      "offer offer"
      "cta   cta";
    padding:var(--sp-2);
  }
  .tl-brand{grid-template-columns:64px minmax(0,1fr)}
  .tl-logo{width:64px;height:48px}
  .tl-rank-num{font-size:1.6rem}
  .tl-name{font-size:1.2rem}
  .tl-score{justify-self:center}
  .tl-cta{flex-direction:column;align-items:stretch}
  .tl-cta .btn{width:100%}
  .tl-cta small{text-align:center}
}

/* ============================================================
   Score ring (multi-color animated)
   ============================================================ */
.ring{position:relative;width:88px;height:88px;flex-shrink:0;display:inline-grid;place-items:center}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring .ring-bg{stroke:rgba(21,19,28,.08)}
.ring .ring-fg{stroke:url(#ringGradVegas);stroke-dasharray:226;stroke-dashoffset:226;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.ring.is-in .ring-fg{stroke-dashoffset:var(--ring-offset,226)}
.ring .ring-num{
  position:absolute;inset:0;display:grid;place-items:center;align-content:center;
  font-family:var(--serif);font-weight:800;font-size:1.55rem;color:var(--ink);
  font-variation-settings:"opsz" 36,"SOFT" 30;line-height:1;
}
.ring .ring-num .num-txt{display:block}
.ring .ring-lbl{font-family:var(--font);font-size:.55rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.18em;display:block;text-align:center;margin-top:.2rem;font-weight:700}

.ring--big{width:170px;height:170px}
.ring--big circle{stroke-width:10}
.ring--big .ring-fg{stroke-dasharray:440;stroke-dashoffset:440}
.ring--big.is-in .ring-fg{stroke-dashoffset:var(--ring-offset-big,440)}
.ring--big .ring-num{font-size:3.6rem}
.ring--big .ring-lbl{font-size:.7rem;margin-top:.3rem}

/* Score chip (small, used in card grids) */
.score{
  display:inline-flex;align-items:baseline;gap:.25rem;
  padding:.34rem .7rem;border-radius:var(--rad-pill);
  font-family:var(--font);font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;
  background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink);
  letter-spacing:-.01em;
}
.score::after{content:"/10";font-size:.7rem;color:var(--ink-mute);font-weight:600}
.score--xx{background:var(--grad-hot);color:#fff;box-shadow:0 6px 18px rgba(255,46,136,.4)}
.score--xx::after{color:rgba(255,255,255,.75)}
.score--x{background:var(--grad-lime);color:#1A2A00;box-shadow:0 4px 14px rgba(199,242,60,.5)}
.score--x::after{color:rgba(26,42,0,.6)}
.score--g{background:#E1FBFE;color:var(--cyan-deep);box-shadow:inset 0 0 0 1.5px rgba(0,213,229,.5)}
.score--m{background:#FFF6E0;color:var(--gold-deep);box-shadow:inset 0 0 0 1.5px rgba(245,185,33,.6)}
.score--a{background:#FFEAD6;color:#A04A00;box-shadow:inset 0 0 0 1.5px rgba(255,122,26,.5)}
.score--b{background:#FCE0E6;color:#9C1A36;box-shadow:inset 0 0 0 1.5px rgba(229,56,96,.5)}
.score--p{background:#F4D5DC;color:#7A1424;box-shadow:inset 0 0 0 1.5px rgba(122,20,36,.4)}

/* ============================================================
   Cards (review / news)
   ============================================================ */
.grid{display:grid;gap:var(--sp-3)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);border-radius:var(--rad);
  padding:var(--sp-3);
  transition:transform .25s,border-color .25s,box-shadow .25s;
  display:flex;flex-direction:column;gap:.6rem;
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.card::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:var(--grad-vegas);background-size:200% 100%;
  opacity:0;transition:opacity .3s;
  animation:gradShift 8s ease-in-out infinite;
}
.card:hover{transform:translateY(-4px);border-color:rgba(255,46,136,.35);box-shadow:var(--shadow-pop)}
.card:hover::before{opacity:1}
.card .meta{font-size:var(--t-xs);color:var(--ink-mute);text-transform:uppercase;letter-spacing:.18em;font-weight:700}
.card h3{margin:0;font-size:1.34rem}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--hot-deep)}
.card p{color:var(--ink-soft);margin:0}
.card .row{display:flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:.6rem}

.card-mini-logo{width:48px;height:48px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:.35rem;border:1px solid var(--line)}
.card-mini-logo img{max-width:100%;max-height:100%;object-fit:contain}

/* ============================================================
   Review template
   ============================================================ */
.review-hero{padding:var(--sp-6) 0 var(--sp-3);position:relative}
.review-hero::before{
  content:"";position:absolute;inset:-10% 0 auto 0;height:60%;
  background:radial-gradient(60% 80% at 50% 0%, rgba(255,46,136,.12), transparent 70%);
  z-index:0;pointer-events:none;
}
.review-hero::after{
  content:"";position:absolute;inset:5% 0 auto 0;height:50%;
  background:radial-gradient(60% 80% at 80% 50%, rgba(0,213,229,.1), transparent 70%);
  z-index:0;pointer-events:none;
}
.review-hero > *{position:relative;z-index:1}
.review-hero .top{display:grid;grid-template-columns:160px 1fr auto;gap:var(--sp-4);align-items:center}
@media(max-width:880px){.review-hero .top{grid-template-columns:1fr;text-align:center;justify-items:center}}
.review-hero .logo{
  width:160px;height:160px;border-radius:22px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:1.1rem;
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  position:relative;
}
.review-hero .logo::after{
  content:"";position:absolute;inset:-3px;border-radius:25px;z-index:-1;
  background:var(--grad-vegas);background-size:200% 100%;
  filter:blur(14px);opacity:.45;
  animation:gradShift 8s ease-in-out infinite;
}
.review-hero .logo img{max-width:100%;max-height:100%;object-fit:contain}
.review-hero h1{margin:0;font-size:clamp(2.2rem,5vw,3.8rem)}
.verdict{font-family:var(--serif);font-style:italic;font-size:var(--t-lg);color:var(--ink-soft);margin-top:.8rem;max-width:var(--read);font-variation-settings:"opsz" 36,"SOFT" 100}

.review-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--sp-5);margin-top:var(--sp-5);align-items:start}
@media(max-width:980px){.review-grid{grid-template-columns:1fr}}
.review-side{
  position:sticky;top:96px;
  background:#fff;
  border:1px solid var(--line);border-radius:var(--rad);
  padding:var(--sp-3);
  box-shadow:var(--shadow-card);
}
.review-side h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.2em;color:var(--hot-deep);margin:0 0 var(--sp-2);font-weight:800}
.review-side dl{display:grid;grid-template-columns:1fr;gap:.6rem;margin:0 0 var(--sp-3)}
.review-side dt{font-size:var(--t-xs);color:var(--ink-mute);text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.review-side dd{margin:0 0 .4rem;color:var(--ink);font-size:var(--t-sm);font-weight:600}

.prose{max-width:var(--read);font-size:1.08rem;line-height:1.8;color:var(--ink)}
.prose p{margin:0 0 var(--sp-3);color:var(--ink)}
.prose h2{margin-top:var(--sp-5);font-size:1.8rem}
.prose h3{margin-top:var(--sp-4)}
.prose a{border-bottom:2px solid rgba(255,46,136,.4);color:var(--hot-deep)}
.prose a:hover{border-color:var(--hot)}
.prose strong{color:var(--ink);background:linear-gradient(transparent 70%, rgba(199,242,60,.55) 70%);padding:0 .1em}
.prose blockquote{margin:var(--sp-4) 0;padding:var(--sp-3) var(--sp-4);border-left:4px solid var(--hot);background:rgba(255,46,136,.05);border-radius:0 var(--rad) var(--rad) 0;font-style:italic;color:var(--ink-soft);font-family:var(--serif);font-size:1.18rem;line-height:1.5}

/* Parameter bars */
.params{margin:var(--sp-3) 0;display:grid;gap:var(--sp-3)}
.param{padding:var(--sp-3);background:#fff;border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow-card)}
.param-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:.6rem;flex-wrap:wrap}
.param-head h4{font-size:1rem;margin:0;color:var(--ink)}
.param-bar{position:relative;height:10px;background:rgba(21,19,28,.06);border-radius:var(--rad-pill);overflow:hidden}
.param-bar > span{
  display:block;height:100%;width:var(--w,0%);
  background:var(--grad-hot);border-radius:var(--rad-pill);
  transition:width 1.2s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 12px rgba(255,46,136,.3);
}
.param-bar > span.lo{background:linear-gradient(135deg,#FF8090,#E53860)}
.param-bar > span.med{background:linear-gradient(135deg,#FFC97A,#FF7A1A)}
.param-bar > span.hi{background:var(--grad-lime);box-shadow:0 0 12px rgba(199,242,60,.5)}
.param-bar > span.cy{background:var(--grad-cyan);box-shadow:0 0 12px rgba(0,213,229,.4)}
.param p{margin:.6rem 0 0;color:var(--ink-soft);font-size:var(--t-sm)}

/* Pros / cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin:var(--sp-4) 0}
@media(max-width:640px){.pc{grid-template-columns:1fr}}
.pc>div{padding:var(--sp-3);border-radius:var(--rad);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.pc .pros{border-color:rgba(31,181,112,.4);background:linear-gradient(180deg,#fff,#F1FBF6)}
.pc .cons{border-color:rgba(229,56,96,.4);background:linear-gradient(180deg,#fff,#FCF1F3)}
.pc h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.2em;color:var(--ink);margin:0 0 .8rem;font-weight:800}
.pc .pros h4{color:var(--ok)}
.pc .cons h4{color:var(--bad)}
.pc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.pc li{display:flex;gap:.6rem;color:var(--ink);line-height:1.4}
.pc li::before{flex-shrink:0;width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;margin-top:.1rem}
.pc .pros li::before{content:"✓";background:var(--ok);color:#fff}
.pc .cons li::before{content:"✕";background:var(--bad);color:#fff}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-2);margin:var(--sp-3) 0}
.gallery img{border-radius:var(--rad);border:1px solid var(--line);aspect-ratio:16/10;object-fit:cover;background:var(--paper-2)}

/* FAQ */
.faq{margin:var(--sp-4) 0}
.faq details{padding:var(--sp-3);background:#fff;border:1px solid var(--line);border-radius:var(--rad);margin-bottom:.6rem;transition:border-color .2s;box-shadow:var(--shadow-card)}
.faq details[open]{border-color:rgba(255,46,136,.4)}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.12rem;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-variation-settings:"opsz" 36}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font);font-size:1.5rem;color:var(--hot);transition:transform .2s;font-weight:300}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:.8rem 0 0;color:var(--ink-soft)}

/* CTA block */
.cta-block{
  margin:var(--sp-5) 0;padding:var(--sp-5) var(--sp-4);
  background:linear-gradient(135deg,#fff 0%,#FFF1F7 50%,#E1FBFE 100%);
  border:1px solid rgba(255,46,136,.25);border-radius:var(--rad);
  text-align:center;position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.cta-block::before{
  content:"";position:absolute;inset:auto auto -50% 50%;width:500px;height:500px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,46,136,.18), transparent 70%);
  pointer-events:none;
}
.cta-block::after{
  content:"";position:absolute;left:0;top:0;right:0;height:4px;
  background:var(--grad-vegas);background-size:200% 100%;
  animation:gradShift 8s ease-in-out infinite;
}
.cta-block > *{position:relative}
.cta-block h3{margin:0 0 .6rem;font-size:1.7rem}
.cta-block small{display:block;margin-top:var(--sp-2);color:var(--ink-mute);font-size:var(--t-xs)}
.cta-block .btn{margin-top:var(--sp-2)}

/* Filters */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:var(--sp-3) 0 var(--sp-4)}
.filters button{
  background:#fff;border:1.5px solid var(--line);
  color:var(--ink-soft);padding:.55rem 1.05rem;border-radius:var(--rad-pill);
  cursor:pointer;font-family:var(--font);font-size:var(--t-sm);font-weight:600;
  transition:all .2s;
}
.filters button:hover{color:var(--ink);border-color:var(--ink)}
.filters button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  margin-top:var(--sp-7);padding:var(--sp-6) 0 var(--sp-3);
  background:linear-gradient(180deg, transparent, var(--paper-2));
  border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--ink-soft);
  position:relative;
}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-vegas);background-size:200% 100%;
  animation:gradShift 8s ease-in-out infinite;
}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-4)}
@media(max-width:880px){.site-footer .cols{grid-template-columns:1fr 1fr}}
.site-footer h4{font-family:var(--font);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.22em;color:var(--hot-deep);margin:0 0 var(--sp-2);font-weight:800}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:.4rem 0}
.site-footer a{color:var(--ink-soft)}
.site-footer a:hover{color:var(--hot-deep)}
.site-footer .brand{font-size:1.5rem;margin-bottom:.6rem;color:var(--ink)}
.disclaimer{margin-top:var(--sp-5);padding:var(--sp-3) 0;border-top:1px dashed var(--line);font-size:var(--t-xs);color:var(--ink-mute);display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.disclaimer a{color:var(--ink-soft);border-bottom:1px solid var(--line)}
.eighteen{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem;border-radius:var(--rad-pill);background:var(--bad);color:#fff;font-weight:800;font-size:.7rem;letter-spacing:.18em}

/* ============================================================
   Modal / cookie / age gate
   ============================================================ */
.modal{position:fixed;inset:0;background:rgba(21,19,28,.55);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:200;padding:var(--sp-3)}
.modal__inner{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:var(--sp-4);max-width:480px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(21,19,28,.3);position:relative;overflow:hidden}
.modal__inner::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad-vegas);background-size:200% 100%;animation:gradShift 8s ease-in-out infinite}
.cookie-bar{position:fixed;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);background:#fff;border:1px solid var(--line);color:var(--ink);padding:var(--sp-3);border-radius:var(--rad);z-index:150;display:none;gap:var(--sp-3);align-items:center;flex-wrap:wrap;font-size:var(--t-sm);max-width:780px;margin:0 auto;box-shadow:0 24px 60px rgba(21,19,28,.18)}
.cookie-bar.show{display:flex}
.cookie-bar a{color:var(--hot-deep)}
.cookie-bar .actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}
.cookie-bar button{background:var(--grad-hot);color:#fff;border:0;padding:.65rem 1.2rem;border-radius:var(--rad-pill);cursor:pointer;font-size:var(--t-sm);font-weight:700;font-family:var(--font)}
.cookie-bar button.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-2);top:var(--sp-2);background:var(--hot);color:#fff;padding:.5rem 1rem;z-index:999;border-radius:var(--rad-sm)}

/* ============================================================
   Utilities
   ============================================================ */
.tag{display:inline-block;font-size:var(--t-xs);padding:.22rem .6rem;border-radius:var(--rad-pill);color:var(--ink-soft);background:#fff;box-shadow:inset 0 0 0 1px var(--line);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:var(--sp-4) 0}

/* News strip */
.news-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
@media(max-width:880px){.news-strip{grid-template-columns:1fr}}

/* Trust signal row */
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);padding:var(--sp-4);background:#fff;border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow-card)}
@media(max-width:880px){.trust-row{grid-template-columns:repeat(2,1fr)}}
.trust-item{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;padding-left:.8rem;border-left:3px solid var(--hot)}
.trust-item:nth-child(2){border-color:var(--cyan)}
.trust-item:nth-child(3){border-color:var(--lime-deep)}
.trust-item:nth-child(4){border-color:var(--gold)}
.trust-item .tnum{font-family:var(--serif);font-size:1.7rem;font-weight:800;color:var(--ink);font-variation-settings:"opsz" 36,"SOFT" 30;line-height:1}
.trust-item .tlbl{font-size:var(--t-xs);color:var(--ink-mute);text-transform:uppercase;letter-spacing:.16em;font-weight:600}

/* Marquee strip — Vegas signage */
.marquee{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--paper);
  padding:.8rem 0;border-top:2px solid var(--hot);border-bottom:2px solid var(--cyan);
  font-family:var(--font);font-weight:700;font-size:var(--t-sm);letter-spacing:.12em;text-transform:uppercase;
}
.marquee__track{display:flex;gap:3rem;white-space:nowrap;animation:marquee 32s linear infinite;will-change:transform}
.marquee__track span{display:inline-flex;align-items:center;gap:.5rem}
.marquee__track .dot{color:var(--hot);font-size:1.2rem}
.marquee__track .dot--cy{color:var(--cyan)}
.marquee__track .dot--lm{color:var(--lime)}
.marquee__track .dot--gd{color:var(--gold)}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Hover reduce-motion friendly */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .grad-text,.tl-rank{background-position:0 50%}
}

/* ============================================================
   LIVE JACKPOTS SECTION
   ============================================================ */
.jp-block .section-head .right{display:flex;align-items:center;gap:.6rem}
.jp-live{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.18rem .55rem;border-radius:var(--rad-pill);
  background:rgba(255,46,136,.08);
  border:1px solid rgba(255,46,136,.35);
  color:var(--hot-deep);
  font-family:var(--font);font-weight:800;font-size:.7rem;letter-spacing:.16em;
  margin-right:.55rem;text-transform:uppercase;
}
.jp-live.is-indicative{
  background:rgba(245,185,33,.10);border-color:rgba(245,185,33,.45);color:var(--gold-deep);
}
.jp-live-dot{
  width:.5rem;height:.5rem;border-radius:50%;
  background:var(--hot);box-shadow:0 0 0 0 rgba(255,46,136,.6);
  animation:jp-pulse 1.6s ease-out infinite;
}
.jp-live.is-indicative .jp-live-dot{background:var(--gold);box-shadow:0 0 0 0 rgba(245,185,33,.6)}
@keyframes jp-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,46,136,.55)}
  70%{box-shadow:0 0 0 12px rgba(255,46,136,0)}
  100%{box-shadow:0 0 0 0 rgba(255,46,136,0)}
}
.jp-disclaimer{
  background:linear-gradient(180deg,rgba(245,185,33,.08),rgba(245,185,33,.02));
  border:1px solid rgba(245,185,33,.35);
  border-radius:var(--rad);
  padding:.85rem 1.05rem;margin:0 0 1.4rem;
  font-size:var(--t-sm);color:var(--ink-soft);
}
.jp-updated{font-size:var(--t-xs)}

.jp-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
}
@media (max-width:1100px){.jp-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.jp-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.jp-grid{grid-template-columns:1fr}}

.jp-card{
  position:relative;
  background:linear-gradient(180deg,#1a1623 0%,#15131c 100%);
  color:var(--paper);
  border-radius:var(--rad);
  padding:1.05rem 1.05rem 1.1rem;
  overflow:hidden;
  box-shadow:0 14px 36px -18px rgba(21,19,28,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  isolation:isolate;
  transition:transform .25s ease, box-shadow .25s ease;
}
.jp-card::before{
  content:"";position:absolute;inset:0;
  background:var(--grad-vegas);
  opacity:.0;transition:opacity .3s ease;z-index:-1;
}
.jp-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.06);pointer-events:none;
}
.jp-card:hover{transform:translateY(-3px);box-shadow:0 22px 48px -20px rgba(255,46,136,.35),0 1px 0 rgba(255,255,255,.06) inset}
.jp-card-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,247,242,.55);margin-bottom:.65rem;
}
.jp-card .jp-rank{
  background:linear-gradient(135deg,var(--hot),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:var(--serif);font-weight:900;font-size:1.1rem;letter-spacing:0;
}
.jp-game{
  margin:0 0 .55rem;font-family:var(--serif);font-weight:800;
  font-size:1.18rem;line-height:1.15;color:var(--paper);
}
.jp-amount{
  display:flex;align-items:baseline;gap:.15rem;
  font-family:var(--serif);font-weight:900;
  font-variant-numeric:tabular-nums;
  background:var(--grad-vegas);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 8px rgba(255,46,136,.18));
  margin:.15rem 0 .85rem;
  animation:jp-shimmer 6s ease-in-out infinite alternate;
}
.jp-amount .jp-currency{font-size:1.35rem;line-height:1;margin-right:.05em}
.jp-amount .jp-num{font-size:1.85rem;line-height:1;letter-spacing:-.01em}
@keyframes jp-shimmer{
  0%{background-position:0 50%}
  100%{background-position:100% 50%}
}
.jp-amount.is-ticking .jp-num{
  text-shadow:0 0 0 transparent;
  transition:filter .25s ease;
}
.jp-amount.is-ticking{filter:drop-shadow(0 2px 14px rgba(199,242,60,.45))}

.jp-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  font-size:var(--t-xs);
}
.jp-casino{font-weight:700;color:var(--cyan)}
.jp-lastwon{color:rgba(250,247,242,.5)}

/* Top card is wider/taller, glows harder */
.jp-card--top{
  grid-column:span 2;grid-row:span 2;
  background:radial-gradient(120% 120% at 0% 0%,#221829 0%,#15131c 60%);
  border:1px solid rgba(255,46,136,.18);
}
.jp-card--top .jp-game{font-size:1.55rem;margin-bottom:.7rem}
.jp-card--top .jp-amount .jp-currency{font-size:2.4rem}
.jp-card--top .jp-amount .jp-num{font-size:3.4rem;letter-spacing:-.02em}
.jp-card--top .jp-amount{margin:.4rem 0 1.1rem}
.jp-card--top::before{
  background:radial-gradient(60% 70% at 80% 110%,rgba(255,46,136,.32),transparent 70%),
             radial-gradient(50% 60% at -10% -20%,rgba(0,213,229,.22),transparent 70%);
  opacity:1;
}
@media (max-width:780px){
  .jp-card--top{grid-column:span 2;grid-row:auto}
  .jp-card--top .jp-amount .jp-num{font-size:2.6rem}
}
@media (max-width:480px){
  .jp-card--top{grid-column:auto}
}
.jp-card--big .jp-amount .jp-num{font-size:2.1rem}

/* ============================================================
   JACKPOT CARD THEMATIC BACKGROUNDS (per game)
   ============================================================
   Each card gets a SUBTLE thematic background image derived from
   the game's theme. The image lives UNDER a heavy dark overlay so
   text (white/orange/cyan) stays fully readable and the design DNA
   (dark cards + corner glow) is preserved.

   Implementation: a `--jp-bg` custom property holds the per-game
   image URL; the .jp-card background shorthand composes
   dark gradient + magenta corner-glow + image. Slug class sets
   --jp-bg via plain url() declarations below.
   ============================================================ */
.jp-card{
  /* fallback when slug class is missing or asset 404s */
  --jp-bg: none;
  background:
    linear-gradient(180deg, rgba(26,22,35,.88) 0%, rgba(21,19,28,.94) 100%),
    radial-gradient(60% 70% at 100% 100%, rgba(255,46,136,.18), transparent 65%),
    var(--jp-bg) center/cover no-repeat,
    linear-gradient(180deg,#1a1623 0%,#15131c 100%);
}
.jp-card--top{
  /* The top card uses its own corner-glow recipe + image; overlay
     is slightly heavier on top-left where the headline sits. */
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(34,24,41,.92) 0%, rgba(21,19,28,.88) 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(255,46,136,.22), transparent 65%),
    var(--jp-bg) center/cover no-repeat,
    radial-gradient(120% 120% at 0% 0%,#221829 0%,#15131c 60%);
}

/* Per-game image bindings.
   Filenames in /wp-content/themes/nctl-vegas/assets/jackpots/ */
.jp-card--mega-moolah     { --jp-bg: url('assets/jackpots/mega-moolah.webp'); }
.jp-card--wowpot-mega     { --jp-bg: url('assets/jackpots/wowpot-mega.webp'); }
.jp-card--mega-fortune    { --jp-bg: url('assets/jackpots/mega-fortune.webp'); }
.jp-card--wheel-of-wishes { --jp-bg: url('assets/jackpots/wheel-of-wishes.webp'); }
.jp-card--hall-of-gods    { --jp-bg: url('assets/jackpots/hall-of-gods.webp'); }
.jp-card--jackpot-king    { --jp-bg: url('assets/jackpots/jackpot-king.webp'); }
.jp-card--major-millions  { --jp-bg: url('assets/jackpots/major-millions.webp'); }
.jp-card--divine-fortune  { --jp-bg: url('assets/jackpots/divine-fortune.webp'); }

/* On hover, let a touch more of the artwork breathe through */
.jp-card:hover{
  background:
    linear-gradient(180deg, rgba(26,22,35,.78) 0%, rgba(21,19,28,.86) 100%),
    radial-gradient(60% 70% at 100% 100%, rgba(255,46,136,.24), transparent 65%),
    var(--jp-bg) center/cover no-repeat,
    linear-gradient(180deg,#1a1623 0%,#15131c 100%);
}
.jp-card--top:hover{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(34,24,41,.82) 0%, rgba(21,19,28,.78) 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(255,46,136,.30), transparent 65%),
    var(--jp-bg) center/cover no-repeat,
    radial-gradient(120% 120% at 0% 0%,#221829 0%,#15131c 60%);
}

/* ============================================================
   HOTTEST BONUSES SECTION
   ============================================================ */
.bn-block .section-head .right{font-size:var(--t-xs)}
.bn-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;
}
@media (max-width:1100px){.bn-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.bn-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.bn-grid{grid-template-columns:1fr}}

.bn-card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:1rem 1rem 1.05rem;
  display:flex;flex-direction:column;gap:.55rem;
  box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.bn-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad-cyan);opacity:.85;
}
.bn-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,213,229,.35);
  box-shadow:0 18px 40px -18px rgba(0,213,229,.28), var(--shadow-card);
}
.bn-card-head{
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  font-size:var(--t-xs);
}
.bn-tag{
  background:rgba(0,213,229,.10);border:1px solid rgba(0,213,229,.32);
  color:var(--cyan-deep);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.15rem .5rem;border-radius:var(--rad-pill);font-size:.66rem;
}
.bn-casino{font-weight:700;color:var(--ink-soft)}
.bn-headline{
  margin:0;font-family:var(--serif);font-weight:800;font-size:1.18rem;line-height:1.15;
  color:var(--ink);
}
.bn-detail{margin:0;color:var(--ink-mute);font-size:var(--t-sm);line-height:1.45}
.bn-meta{
  display:flex;flex-wrap:wrap;gap:.35rem .9rem;
  margin:.15rem 0 0;font-size:var(--t-xs);color:var(--ink-mute);
}
.bn-meta div{display:flex;align-items:baseline;gap:.35rem}
.bn-meta dt{font-weight:600;color:var(--ink-soft);margin:0}
.bn-meta dd{margin:0;font-weight:700;color:var(--ink)}

/* Featured first card: lifted + warm */
.bn-card--feat{
  background:linear-gradient(180deg,#FFF8EE 0%,#FAF7F2 100%);
  border-color:rgba(245,185,33,.45);
}
.bn-card--feat::before{background:var(--grad-hot)}
.bn-card--feat .bn-headline{font-size:1.3rem}
.bn-card--feat .bn-tag{
  background:rgba(255,46,136,.10);border-color:rgba(255,46,136,.32);color:var(--hot-deep);
}
@media (max-width:1100px){.bn-card--feat{grid-column:span 2}}
@media (max-width:480px){.bn-card--feat{grid-column:auto}}

.bn-foot{font-size:var(--t-xs);margin:.9rem 0 0}

/* ===== SEO additions: breadcrumb, byline, affiliate notice, related reviews ===== */
.breadcrumb{margin:var(--sp-3) 0 0;font-size:var(--t-xs);color:var(--text-mute)}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li + li::before{content:"›";margin:0 .5rem;color:var(--text-mute);opacity:.6}
.breadcrumb a{color:var(--text-mute);text-decoration:none;border-bottom:1px dotted currentColor}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb [aria-current="page"]{color:var(--text);font-weight:600}

.byline{margin:1.2rem 0 .4rem;font-size:var(--t-xs);color:var(--text-mute);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.byline strong{color:var(--text);font-weight:600}
.byline-sep{opacity:.5}
.byline-updated{color:var(--text);font-weight:500}

.aff-notice{margin:.8rem 0 1.6rem;padding:.7rem 1rem;background:rgba(245,185,33,.08);border:1px solid rgba(245,185,33,.25);border-radius:8px;font-size:var(--t-xs);color:var(--text)}
.aff-notice strong{color:#8a5e00}
.aff-notice a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.related-reviews{margin:var(--sp-6) 0 var(--sp-4);text-align:center}
.related-reviews h2{margin:.4rem 0 1.2rem}
.related-reviews .eyebrow{justify-content:center}
.related-reviews .grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,360px));justify-content:center}
.related-reviews .card{text-align:left}
@media(max-width:640px){.related-reviews .grid-3{grid-template-columns:minmax(0,360px)}}

/* ---------------------------------------------------------------
   Paid placement disclosure
   FTC + Google product-reviews compliance: paid toplist slots are
   visibly labeled. Score & verdict remain editorial regardless.
--------------------------------------------------------------- */
.paid-pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font);font-weight:800;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:var(--rad-pill,999px);
  background:#0E1A1F;color:#00D5E5;
  border:1px solid rgba(0,213,229,.55);
  box-shadow:0 1px 4px rgba(0,213,229,.18);
  white-space:nowrap;line-height:1;
}
.paid-pill--lg{font-size:.72rem;padding:.32rem .65rem;letter-spacing:.16em}

.tl-badge--paid{
  background:#0E1A1F;color:#00D5E5;
  border-color:rgba(0,213,229,.55);
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.tl-row--paid{
  /* subtle cyan rim to make sponsored rows distinguishable without screaming */
  box-shadow:inset 0 0 0 1px rgba(0,213,229,.35);
}

.aff-notice--paid{
  background:rgba(0,213,229,.08);
  border-color:rgba(0,213,229,.35);
}
.aff-notice--paid .paid-pill{margin-right:.5rem;vertical-align:middle}
.aff-notice--paid strong{color:#0a6b75}

/* ============================================================
   Best Casinos archive
   Shared pagination styles (also used by New Casinos archive).
   Keep additions inside this block so /new-casinos/ work
   doesn't collide.
   ============================================================ */
.nctl-pagination{
  margin-top:var(--sp-5);
  display:flex;justify-content:center;
}
.nctl-pagination ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;
  padding:0;margin:0;
}
.nctl-pagination a,
.nctl-pagination span{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:999px;
  font-size:var(--t-sm);
  font-weight:600;
  text-decoration:none;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.08);
  color:inherit;
  transition:transform .15s ease, background .15s ease;
}
.nctl-pagination a:hover{
  transform:translateY(-1px);
  background:rgba(255,46,136,.08);
  border-color:rgba(255,46,136,.3);
}
.nctl-pagination .current{
  background:linear-gradient(135deg,#FF2E88,#FF7A1A);
  color:#fff;border-color:transparent;
}
.nctl-pagination .dots{opacity:.6}

/* ============================================================
   News Archive
   Magazine-style: featured top card + horizontal list cards.
   Used by page-news.php (slug: news).
   ============================================================ */

/* ---- Hero RSS link */
.news-archive .news-rss{
  margin-left:.4rem;
  font-weight:600;
  color:var(--cyan-deep);
  border-bottom:1px dashed currentColor;
}
.news-archive .news-rss:hover{color:var(--hot-deep)}

/* ---- Filters bar */
.news-filters .news-filter-form{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-end;
  padding:var(--sp-2) var(--sp-3);
  background:#fff;border:1px solid var(--line);
  border-radius:var(--rad);
  box-shadow:var(--shadow-card);
}
.news-filters label{
  display:flex;flex-direction:column;gap:.25rem;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute);font-weight:700;
}
.news-filters select{
  font-family:var(--font);font-size:var(--t-sm);font-weight:500;
  padding:.55rem .8rem;border:1px solid var(--line);border-radius:var(--rad-sm);
  background:var(--paper);color:var(--ink);min-width:9rem;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.news-filters select:focus{outline:none;border-color:var(--cyan-deep);box-shadow:0 0 0 3px rgba(0,213,229,.18)}
.news-filters .btn{padding:.7rem 1.2rem;font-size:var(--t-sm)}
.news-filters .news-filter-clear{
  font-size:var(--t-sm);color:var(--ink-mute);align-self:center;
  border-bottom:1px dashed currentColor;
}
.news-filters .news-filter-clear:hover{color:var(--hot-deep)}
.news-filters .news-filter-result{margin:var(--sp-2) 0 0;font-size:var(--t-sm)}

/* ---- Eyebrow chip used inside cards (smaller than the hero eyebrow) */
.news-eyebrow{
  display:inline-block;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--cyan-deep);
  margin-bottom:.5rem;
}
.news-eyebrow:hover{color:var(--hot-deep)}
.news-eyebrow--mute{color:var(--ink-mute)}

/* ---- Featured top card */
.news-featured{
  display:grid;
  grid-template-columns:minmax(320px, 1.1fr) minmax(280px, 1fr);
  gap:var(--sp-4);
  align-items:stretch;
  background:#fff;
  border:1px solid var(--line);
  border-radius:calc(var(--rad) * 1.4);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  margin-bottom:var(--sp-5);
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.news-featured::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-vegas);
  opacity:.85;
  z-index:2;
}
.news-featured:hover{transform:translateY(-2px);box-shadow:0 14px 40px -16px rgba(21,19,28,.18), 0 4px 14px rgba(21,19,28,.06)}
.news-featured__media{
  position:relative;display:block;
  background:var(--paper-3);
  aspect-ratio:16/9;
  overflow:hidden;
}
.news-featured__media img,
.news-featured__media .news-card-thumb{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.news-featured:hover .news-featured__media img{transform:scale(1.02)}
.news-featured__badge{
  position:absolute;top:var(--sp-2);left:var(--sp-2);
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  padding:.35rem .75rem;border-radius:var(--rad-pill);
  background:var(--ink);color:#fff;
  box-shadow:var(--shadow-soft);
  z-index:3;
}
.news-featured__body{
  padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-2);
  display:flex;flex-direction:column;justify-content:center;
}
.news-featured__title{
  font-size:clamp(1.7rem, 3.2vw, 2.4rem);
  line-height:1.08;margin:0 0 var(--sp-2);
}
.news-featured__title a{color:var(--ink)}
.news-featured__title a:hover{color:var(--hot-deep)}
.news-featured__excerpt{
  font-size:var(--t-lg);color:var(--ink-soft);
  margin:0 0 var(--sp-3);max-width:55ch;
}
.news-featured__cta{margin:var(--sp-3) 0 0}
@media(max-width:780px){
  .news-featured{grid-template-columns:1fr;gap:0;margin-bottom:var(--sp-4)}
  .news-featured__body{padding:var(--sp-3)}
}

/* ---- News grid (list of horizontal cards) */
.news-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
}

/* ---- News card (horizontal list-style) */
.news-card{
  display:grid;
  grid-template-columns:minmax(200px, 260px) 1fr;
  gap:var(--sp-3);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--rad);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  position:relative;
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.news-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-hot);
  opacity:0;transition:opacity .25s ease;
  z-index:2;
}
.news-card:hover{
  transform:translateY(-2px);
  border-color:#dccfb4;
  box-shadow:0 12px 30px -14px rgba(21,19,28,.18), 0 3px 10px rgba(21,19,28,.05);
}
.news-card:hover::before{opacity:1}
.news-card__media{
  display:block;background:var(--paper-3);aspect-ratio:16/9;overflow:hidden;
  position:relative;
}
.news-card__media img,
.news-card__media .news-card-thumb{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease;
}
.news-card:hover .news-card__media img{transform:scale(1.03)}
.news-card__body{
  padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;
  display:flex;flex-direction:column;justify-content:center;min-width:0;
}
.news-card__title{
  font-size:clamp(1.15rem, 1.6vw, 1.45rem);
  line-height:1.18;margin:0 0 .55rem;
}
.news-card__title a{color:var(--ink)}
.news-card__title a:hover{color:var(--hot-deep)}
.news-card__excerpt{
  margin:0 0 var(--sp-2);
  color:var(--ink-soft);
  font-size:var(--t-base);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.news-card__cta{margin:.4rem 0 0}
.news-readmore{
  font-weight:700;color:var(--hot-deep);font-size:var(--t-sm);
  letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:.3rem;
}
.news-readmore .arr{transition:transform .2s}
.news-readmore:hover{color:var(--ink)}
.news-readmore:hover .arr{transform:translateX(4px)}

@media(max-width:640px){
  .news-card{grid-template-columns:1fr;gap:0}
  .news-card__body{padding:var(--sp-3)}
  .news-card__title{font-size:1.2rem}
}

/* ---- Card thumb placeholder (gradient when no featured image)
   The placeholder is decorative only — it must NOT repeat the post title,
   which is already rendered prominently in the card body. We show a small
   wordmark + an eyebrow kicker, both contained inside the 16:9 box. */
.news-card-thumb{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  text-align:center;padding:var(--sp-3);
  gap:.4rem;
}
.news-card-thumb::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(80% 80% at 100% 100%, rgba(0,0,0,.18), transparent 60%);
  pointer-events:none;
}
.news-card-thumb__mark{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(1.6rem, 3.2vw, 2.4rem);line-height:1;
  color:#fff;letter-spacing:-.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
  position:relative;z-index:1;
  font-variation-settings:"opsz" 144,"SOFT" 30;
}
.news-card-thumb__mark-dot{color:rgba(255,255,255,.65)}
.news-card-thumb__kicker{
  font-family:var(--font);font-weight:700;
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 6px rgba(0,0,0,.25);
  position:relative;z-index:1;
}
/* Legacy class — kept hidden so older cached markup never re-introduces the
   duplicate-headline bug. */
.news-card-thumb__title{display:none !important}

/* ---- Metadata strip (single line: date · read · author [· updated]) */
.news-meta{
  font-size:var(--t-sm);color:var(--ink-mute);
  display:flex;flex-wrap:wrap;gap:.35rem;align-items:baseline;
  margin:0 0 .6rem;
}
.news-meta a{color:var(--ink-soft);font-weight:600}
.news-meta a:hover{color:var(--hot-deep)}
.news-meta__sep{color:var(--line);padding:0 .1rem}
.news-meta__read{color:var(--ink-soft);font-weight:600}
.news-meta__updated{color:var(--cyan-deep);font-weight:600}
.news-meta__hidden-mod{display:none}

/* Legacy classes (no longer rendered) — kept neutralised so any cached HTML
   doesn't suddenly look broken. */
.news-info-strip{display:none !important}
.news-meta__rel{display:none}

/* ---- Tag pills */
.news-tags{
  list-style:none;margin:0 0 .4rem;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.news-tag{
  display:inline-block;
  font-size:.75rem;font-weight:600;color:var(--ink-soft);
  padding:.25rem .65rem;border-radius:var(--rad-pill);
  background:var(--paper-2);border:1px solid var(--line);
  transition:background .15s,color .15s,border-color .15s;
}
.news-tag:hover{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}

/* ---- Sparse-list breathing room (avoid huge gap to footer when only a
   handful of posts are published). section.block defaults to var(--sp-6)
   vertical padding which feels empty under ≤3 cards. We trim the bottom
   of news-list and let the global site-footer margin handle the rest. */
.news-archive .news-list{padding-bottom:var(--sp-3)}
body.page-id-7 main + .site-footer{margin-top:var(--sp-5)}

/* ---- Empty state */
.news-empty{
  text-align:center;padding:var(--sp-5) var(--sp-3);
  background:#fff;border:1px dashed var(--line);border-radius:var(--rad);
}
.news-empty h2{font-size:var(--t-xl);margin-bottom:.4rem}
.news-empty .btn{margin-top:var(--sp-2)}

/* ---- Pagination */
.news-pagination{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;
  margin-top:var(--sp-5);
}
.news-pagination a,
.news-pagination span{
  min-width:2.4rem;height:2.4rem;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 .9rem;font-size:var(--t-sm);font-weight:700;
  color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--rad-pill);
  text-decoration:none;
  transition:transform .15s,box-shadow .2s,border-color .15s,color .15s;
}
.news-pagination a:hover{
  transform:translateY(-1px);
  border-color:var(--ink);
  box-shadow:var(--shadow-soft);
}
.news-pagination .current{
  background:var(--grad-hot);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(255,46,136,.35);
}
.news-pagination .dots{opacity:.5;border:0;background:transparent}

@media(max-width:520px){
  .news-info-strip{gap:.35rem}
  .news-info-strip__chip{font-size:.72rem;padding:.22rem .55rem}
}

/* =============================================================
   Closed casinos — visual treatment
   Added 2026-05-18 for the closed-down brand archive (Evo.io,
   Betswap.gg, Mother.land). Keep this block self-contained so
   it can be lifted into a partial later if needed.
   ============================================================= */

/* Toplist row in closed mode */
.tl-row--closed {
  position: relative;
  opacity: 0.85;
  background: linear-gradient(180deg, rgba(120,120,130,0.04), rgba(120,120,130,0.08));
  border-color: rgba(255, 80, 80, 0.25) !important;
}
.tl-row--closed::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-left: 3px solid #c0392b;
  border-radius: inherit;
  opacity: 0.9;
}
.tl-row--closed .tl-logo img,
.tl-row--closed .tl-logo .tl-logo-fallback {
  filter: grayscale(100%) opacity(0.55);
}
.tl-row--closed .tl-name a {
  color: var(--text-mute, #9aa);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.tl-row--closed .tl-name a:hover {
  color: var(--text, #fff);
  text-decoration: line-through;
}
.tl-row--closed .tl-rank-num {
  color: #c0392b;
  font-weight: 700;
}

/* CLOSED badge in the rank column */
.closed-badge {
  display: inline-block;
  background: #c0392b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.45rem;
  border-radius: 3px;
  margin-top: 0.35rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Closed badge in the tag/badge strip */
.tl-badge--closed {
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid rgba(192, 57, 43, 0.45);
  color: #e57368;
  font-weight: 600;
}

/* Score ring in closed mode — neutral, no gradient */
.ring--closed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 84px;
  border-radius: 50%;
  border: 2px dashed rgba(192, 57, 43, 0.45);
  background: rgba(120,120,130,0.08);
  color: var(--text-mute, #aab);
}
.ring--closed.ring--big {
  min-width: 160px;
  min-height: 160px;
}
.ring--closed .num-txt {
  font-size: 1.6rem;
  font-weight: 700;
  color: #c0392b;
  line-height: 1;
}
.ring--closed.ring--big .num-txt {
  font-size: 3.2rem;
}
.ring--closed .ring-lbl {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mute, #aab);
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* CTA in closed mode — subdued */
.btn--closed {
  opacity: 0.85;
}
.btn--closed:hover {
  opacity: 1;
}
.closed-note {
  display: block;
  color: var(--text-mute, #aab);
  font-size: 0.75rem;
  margin-top: 0.3rem;
  font-style: italic;
}

/* Separator between live and closed casinos */
.toplist-closed-sep {
  margin: 2.2rem 0 1rem;
  padding: 0.6rem 1rem;
  border-top: 1px dashed rgba(192, 57, 43, 0.35);
  border-bottom: 1px dashed rgba(192, 57, 43, 0.35);
  text-align: center;
}
.toplist-closed-sep__lbl {
  color: #c0392b;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Single-review-page closed banner */
.closed-banner {
  background: linear-gradient(135deg, rgba(192, 57, 43, 0.20), rgba(231, 76, 60, 0.12));
  border: 1px solid rgba(192, 57, 43, 0.55);
  border-left: 4px solid #c0392b;
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  margin: 1.2rem 0 1.5rem;
  color: var(--text, #fff);
}
.closed-banner__inner { max-width: 80ch; }
.closed-banner__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.closed-banner__icon { font-size: 1.5rem; }
.closed-banner p { margin: 0; line-height: 1.55; }
.closed-banner--page {
  margin-top: 0;
}

/* Inline closed banner inside post_content (the alert at the top of the body) */
.closed-banner--inline {
  margin: 0 0 1.5rem;
}

/* Hero in closed mode — slightly muted */
.review-hero--closed .logo img {
  filter: grayscale(100%) opacity(0.6);
}

/* Affiliate-notice variant for closed brands */
.aff-notice--closed {
  background: rgba(120, 120, 130, 0.08);
  border-left: 3px solid #888;
  color: var(--text-mute, #aab);
}

/* =============================================================
   Closed casinos — compact "mini" variant for /reviews/ archive
   Added 2026-05-18. Renders closed brands as a small reference
   block beneath the live toplist, inside a <details> element so
   readers can collapse it. SEO-safe: real content in the HTML,
   no display:none on the cards themselves.
   ============================================================= */

/* Wrapper <details> */
.closed-section {
  margin: 2rem 0 1rem;
  padding: 0;
  border-top: 1px dashed rgba(192, 57, 43, 0.30);
}
.closed-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0 0.6rem;
  color: var(--text-mute, #9aa);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.closed-section > summary::-webkit-details-marker { display: none; }
.closed-section > summary::before {
  content: "\25B8"; /* right-pointing triangle, rotates when open */
  display: inline-block;
  color: rgba(192, 57, 43, 0.6);
  font-size: 0.9rem;
  transition: transform 0.15s ease;
}
.closed-section[open] > summary::before { transform: rotate(90deg); }
.closed-section > summary:hover { color: var(--text, #fff); }

/* Mini cards container — responsive grid, 2 or 3 cols on wider screens */
.closed-mini-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
@media (min-width: 720px) {
  .closed-mini-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
  .closed-mini-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Individual mini row */
.tl-row-mini {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(192, 57, 43, 0.22);
  border-left: 3px solid rgba(192, 57, 43, 0.55);
  border-radius: 6px;
  background: rgba(120,120,130,0.05);
  opacity: 0.82;
  min-height: 60px;
}
.tl-row-mini:hover { opacity: 1; }

.tl-mini-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}
.tl-mini-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.6);
}
.tl-mini-logo-fallback {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-mute, #9aa);
}

.tl-mini-body { min-width: 0; }
.tl-mini-name {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-mini-name a {
  color: var(--text-mute, #9aa);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.tl-mini-name a:hover {
  color: var(--text, #fff);
}
.tl-mini-meta {
  margin-top: 0.15rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tl-mini-badge {
  display: inline-block;
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid rgba(192, 57, 43, 0.4);
  color: #e57368;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  line-height: 1.2;
}

.tl-mini-cta {
  flex-shrink: 0;
}
.tl-mini-link {
  color: var(--text-mute, #9aa);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px dotted rgba(154, 170, 170, 0.5);
  padding-bottom: 1px;
}
.tl-mini-link:hover {
  color: var(--text, #fff);
  border-bottom-color: currentColor;
}
.tl-mini-link .arr { margin-left: 0.15rem; }