/*
 * SlotsFunky — Consolidated v8/v9 Design Patches
 * Merged from (in original cascade order): ux-improvements.css, v8-redesign.css,
 * v8-6-structure-patch.css, v8-7-polish.css, v9-system-engine.css,
 * v9-trust-strip.css, v9-polish.css
 *
 * Consolidated in v9.9.6 to reduce 7 sequential HTTP requests down to 1
 * and make the cascade easier to reason about. Section order below is
 * IDENTICAL to the original enqueue order, so computed styles are unchanged.
 */


/* ═══════════════════════════════════════════════════════════════
   SOURCE: ux-improvements.css
   ═══════════════════════════════════════════════════════════════ */
/**
 * SlotsFunky Theme — UX Improvements
 * Version: 7.5.0
 *
 * Design reference: slotsfunky_gates_of_olympus_redesign.html
 * Direction: compact, editorial, flat white cards with plum headers —
 * no heavy box shadows, minimal decoration, maximum information density.
 *
 * Load order: after premium.css (already registered in functions.php)
 */

/* ═══════════════════════════════════════════════
   0. TOKENS
   ═══════════════════════════════════════════════ */
:root {
  --r-sm:  8px;
  --r-md: 10px;
  --r-lg: 14px;
  --t:  all .15s ease;
  --t2: all .22s ease;
  --border: 1px solid var(--g200);
  --shadow-card: 0 1px 4px rgba(0,0,0,.05);
  --shadow-hover: 0 4px 16px rgba(74,16,96,.12);
}


/* ═══════════════════════════════════════════════
   1. NAVIGATION
   ═══════════════════════════════════════════════ */

#sf-main-nav { background: var(--plum2); }

.sf-nav-inner { height: 44px; padding: 0 20px; }

.sf-logo-text  { font-size: 16px; font-weight: 800; letter-spacing: -.5px; }
.sf-logo-brand { color: var(--gold); }
.sf-logo-accent{ color: #fff; }

.sf-logo-icon {
  width: 28px; height: 28px;
  font-size: 14px; border-radius: 6px;
  background: linear-gradient(135deg, var(--orange), var(--gold));
}

.sf-nav-link {
  font-size: 12px; font-weight: 600;
  padding: 6px 10px; letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  border-radius: 6px; transition: var(--t);
}
.sf-nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }

.sf-nav-cta-btn {
  background: var(--orange); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 6px;
  transition: var(--t);
}
.sf-nav-cta-btn:hover { background: var(--orange2); transform: none; box-shadow: none; }


/* ═══════════════════════════════════════════════
   2. BREADCRUMBS
   ═══════════════════════════════════════════════ */

.sf-breadcrumbs {
  /* background/border/padding intentionally removed — .sf-bread-wrap
     (premium.css) already supplies the correct flat plum background and
     divider line; this override previously painted a mismatched darker
     box (var(--plum2)) behind the breadcrumb. */
}
.sf-breadcrumbs a,
.sf-breadcrumb-item { font-size: 11px; color: rgba(255,255,255,.6); }
.sf-breadcrumbs a:hover { color: var(--gold); }
.sf-breadcrumb-sep { color: rgba(255,255,255,.25); }
.sf-breadcrumb-current { color: rgba(255,255,255,.9); font-weight: 600; }


/* ═══════════════════════════════════════════════
   3. GLOBAL SECTION SCAFFOLDING
   ═══════════════════════════════════════════════ */

.sf-section, .sf-section-alt { padding: 56px 0; }

.sf-section-title {
  font-size: 22px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2;
}
.sf-section-sub {
  font-size: 14px; color: var(--muted);
  line-height: 1.65; margin-top: 5px;
}
.sf-view-all {
  font-size: 12px; font-weight: 700;
  color: var(--plum); white-space: nowrap;
  transition: color var(--t); text-decoration: none;
}
.sf-view-all:hover { color: var(--orange); text-decoration: underline; }


/* ═══════════════════════════════════════════════
   4. HOMEPAGE HERO
   ═══════════════════════════════════════════════ */

.sf-hero {
  background: linear-gradient(135deg, var(--plum2) 0%, var(--plum) 50%, var(--plum3) 100%);
  padding: 56px 0 44px;
  position: relative; overflow: hidden;
}
.sf-hero::before {
  content: ''; position: absolute; top: -40%; right: -8%;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,184,0,.13) 0%, transparent 65%);
  pointer-events: none;
}
.sf-hero::after {
  content: ''; position: absolute; bottom: -30%; left: -5%;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,43,.09) 0%, transparent 65%);
  pointer-events: none;
}
.sf-hero .sf-container { position: relative; z-index: 1; }

.sf-hero-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; color: var(--gold);
  margin-bottom: 14px; text-transform: uppercase;
}

.sf-hero h1 {
  font-size: clamp(28px, 3.8vw, 44px);
  letter-spacing: -.02em; line-height: 1.15;
  margin-bottom: 16px;
}
.sf-hero h1 em { color: var(--gold); font-style: italic; }

.sf-hero-sub {
  font-size: 15px; color: rgba(255,255,255,.72);
  line-height: 1.7; margin-bottom: 24px;
}
.sf-hero-byline { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.6; margin-bottom: 24px; }
.sf-hero-byline strong { color: rgba(255,255,255,.82); }

/* Buttons */
.sf-hero-btns { gap: 10px; margin-bottom: 32px; }

.sf-btn-primary {
  background: var(--orange); color: #fff;
  padding: 11px 22px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700;
  transition: var(--t); text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.sf-btn-primary:hover { background: var(--orange2); transform: translateY(-1px); color: #fff; box-shadow: none; }

.sf-btn-ghost {
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  padding: 11px 22px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700;
  transition: var(--t); text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.sf-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Hero stats */
.sf-hero-stat { padding-right: 24px; margin-right: 24px; border-right: 1px solid rgba(255,255,255,.12); }
.sf-hero-stat-num { font-size: 24px; font-weight: 800; color: var(--gold); font-family: var(--serif); }
.sf-hero-stat-label { font-size: 11px; color: rgba(255,255,255,.45); }

/* Hot picks panel */
.sf-hot-panel {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); padding: 20px;
}
.sf-hot-panel-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.sf-hot-row { padding: 10px 8px; border-radius: 6px; border-bottom: 1px solid rgba(255,255,255,.07); transition: var(--t); margin: 0; gap: 10px; }
.sf-hot-row:hover { background: rgba(255,255,255,.07); }
.sf-hot-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-hot-info { flex: 1; min-width: 0; }
.sf-hot-provider { font-size: 11px; color: rgba(255,255,255,.42); }
.sf-rtp-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: rgba(123,200,50,.14); color: #8cd44a; }

/* Trust strip */
.sf-trust-strip { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); gap: 5px 18px; }
.sf-trust-item { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.42); gap: 6px; }
.sf-trust-item::before { color: var(--lime); }


/* ═══════════════════════════════════════════════
   5. BONUS SHORTCUT CARDS
   ═══════════════════════════════════════════════ */

.sf-bonus-card {
  background: #fff; border-radius: var(--r-lg);
  border: var(--border); border-top: 3px solid transparent;
  padding: 24px 18px; gap: 8px;
  box-shadow: var(--shadow-card); transition: var(--t2);
}
.sf-bonus-card:hover { border-top-color: var(--orange); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.sf-bonus-card-icon { font-size: 32px; }
.sf-bonus-card-label { font-size: 14px; font-weight: 800; }
.sf-bonus-card-desc { font-size: 12px; color: var(--muted); line-height: 1.55; }
.sf-bonus-card-link { font-size: 12px; font-weight: 700; color: var(--orange); }


/* ═══════════════════════════════════════════════
   6. CASINO TILES (.sf-cc) — all pages
   Reference: .casino-row in redesign HTML
   ═══════════════════════════════════════════════ */

.sf-casino-cards { gap: 8px; }

/* Card shell */
.sf-cc {
  grid-template-columns: 44px 1fr auto;
  border-radius: var(--r-lg);
  border: var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: var(--t2);
  background: #fff;
}
.sf-cc:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

/* Medal ranks */
.sf-cc--top    { border-left: 3px solid var(--gold); background: var(--gold-bg); box-shadow: none; }
.sf-cc--silver { border-left: 3px solid #c0c0c0; }
.sf-cc--bronze { border-left: 3px solid #cd7f32; }

/* Badge — full-width strip at top */
.sf-cc-badge {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, var(--gold), #ffe066);
  color: #6b3400; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 0;
  display: flex; align-items: center; gap: 5px; z-index: 2;
  width: auto; left: 0;
}

/* Shift content down when badge present */
.sf-cc--top .sf-cc-left,
.sf-cc--top .sf-cc-body,
.sf-cc--top .sf-cc-right { padding-top: 30px; }

/* Left: logo only — matches .casino-logo in reference */
.sf-cc-left {
  background: transparent; border-right: none;
  padding: 14px 0 14px 14px; min-height: auto;
  gap: 6px; justify-content: flex-start;
}

.sf-cc-rank {
  font-size: 11px; font-weight: 800;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--g100); color: var(--muted2);
}
.sf-cc-rank--gold   { background: var(--gold); color: #6b3400; font-size: 13px; }
.sf-cc-rank--silver { background: #e0e0e0; color: #555; }
.sf-cc-rank--bronze { background: #f0c8a0; color: #7a3800; }

.sf-cc-logo {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--g100); border: var(--border);
  overflow: hidden;
}
.sf-cc-logo img { border-radius: var(--r-sm); }
.sf-cc-emoji { font-size: 20px; }

/* Body */
.sf-cc-body { padding: 12px 14px; gap: 4px; }

.sf-cc-name { font-size: 14px; font-weight: 800; color: var(--text); transition: color var(--t); }
.sf-cc-name:hover { color: var(--plum); }

.sf-cc-tags { gap: 4px; }
.sf-cc-tag {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
  background: var(--g100); color: var(--muted);
  border: none; text-transform: none; letter-spacing: 0;
}
/* Special tag variants */
.sf-cc-tag[class*="new"], .sf-cc-tag[class*="New"] { background: rgba(123,200,50,.12); color: var(--lime2); }
.sf-cc-tag[class*="top"], .sf-cc-tag[class*="Top"] { background: var(--gold-bg); color: var(--gold2); }

/* Bonus — hero number */
.sf-cc-bonus { gap: 6px; margin-top: 2px; }
.sf-cc-bonus-main {
  font-size: 14px; font-weight: 800;
  color: var(--gold2); letter-spacing: -.01em; line-height: 1.1;
}
.sf-cc-bonus-spins {
  font-size: 12px; font-weight: 700;
  color: var(--lime2); background: rgba(94,160,32,.1);
  border: none; padding: 1px 7px; border-radius: 10px;
}

/* Stats — plain text, no pill boxes */
.sf-cc-stats { gap: 10px; margin-top: 3px; }
.sf-cc-stat {
  font-size: 12px; color: var(--muted);
  background: none; border: none;
  padding: 0; border-radius: 0;
  gap: 3px; white-space: nowrap;
}

.sf-cc-tc { font-size: 10px; color: var(--muted2); margin-top: 2px; }

/* Right: CTAs — column of buttons, no background panel */
.sf-cc-right {
  background: transparent; border-left: none;
  padding: 12px 14px 12px 0; gap: 6px;
  justify-content: center;
}

/* Score ring — tighter */
.sf-cc-score-wrap { gap: 2px; }
.sf-cc-score-ring { width: 48px; height: 48px; }
.sf-cc-score-ring svg { width: 48px; height: 48px; }
.sf-cc-score-num  { font-size: 14px; font-weight: 800; line-height: 1; }
.sf-cc-score-denom{ font-size: 8px; color: var(--muted2); }
.sf-cc-score-label{ font-size: 9px; font-weight: 700; color: var(--muted2); letter-spacing: .04em; text-transform: uppercase; }
.sf-score-great { color: var(--lime2); }
.sf-score-good  { color: var(--gold2); }
.sf-score-fair  { color: #dc2626; }

/* CTA buttons */
.sf-cc-ctas { gap: 6px; }
.sf-cc-btn-visit {
  padding: 8px 16px; border-radius: 7px;
  font-size: 12px; font-weight: 700;
  box-shadow: none; transition: var(--t);
  white-space: nowrap;
}
.sf-cc-btn-visit:hover { background: var(--orange2); transform: none; box-shadow: none; color: #fff; }

.sf-cc-btn-review {
  padding: 6px 10px; border-radius: 7px;
  font-size: 11px; font-weight: 700;
  border: var(--border); color: var(--plum);
  transition: var(--t);
}
.sf-cc-btn-review:hover { border-color: var(--plum); background: rgba(74,16,96,.04); color: var(--plum); }

.sf-cc-compare { font-size: 11px; color: var(--muted2); cursor: pointer; transition: color var(--t); }
.sf-cc-compare:hover { color: var(--plum); }

/* Filter pills */
.sf-casino-filter-bar, .sf-cfl-pill { /* light touch */ }
.sf-cfl-pill { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: var(--border); transition: var(--t); }
.sf-cfl-pill:hover { border-color: var(--plum); color: var(--plum); }
.sf-cfl-pill.active { background: var(--plum); border-color: var(--plum); color: #fff; }

/* Responsive */
@media (max-width: 640px) {
  .sf-cc { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  .sf-cc-left { flex-direction: row; padding: 10px 14px; border-bottom: 1px solid var(--g100); min-height: auto; gap: 10px; }
  .sf-cc--top .sf-cc-left { padding-top: 30px; }
  .sf-cc-body { padding: 10px 14px; }
  .sf-cc-right { flex-direction: row; flex-wrap: wrap; padding: 10px 14px 12px; border-top: 1px solid var(--g100); gap: 8px; }
  .sf-cc-score-wrap { flex-direction: row; align-items: center; gap: 7px; }
  .sf-cc-ctas { flex-direction: row; flex: 1; }
  .sf-cc-btn-visit, .sf-cc-btn-review { flex: 1; text-align: center; }
}


/* ═══════════════════════════════════════════════
   7. SLOT CARDS
   ═══════════════════════════════════════════════ */

.sf-slot-card {
  background: #fff; border-radius: var(--r-lg);
  border: var(--border); box-shadow: var(--shadow-card);
  transition: var(--t2);
}
.sf-slot-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: rgba(74,16,96,.15); }

.sf-slot-thumb { height: 110px; background: linear-gradient(135deg, #1a0a2e, #2d1060); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sf-slot-thumb-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .04em; }

.sf-slot-body { padding: 12px; }
.sf-slot-name { font-size: 13px; font-weight: 800; margin-bottom: 2px; letter-spacing: -.01em; }
.sf-slot-provider { font-size: 11px; color: var(--muted); margin-bottom: 8px; }

.sf-slot-pills { gap: 5px; margin-bottom: 10px; }
.sf-vol-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }

.sf-slot-btns { gap: 6px; }
.sf-slot-play { padding: 8px; border-radius: 6px; font-size: 12px; font-weight: 700; transition: var(--t); }
.sf-slot-play:hover { background: var(--orange2); }
.sf-slot-rev { padding: 7px; border-radius: 6px; font-size: 12px; font-weight: 600; border: var(--border); transition: var(--t); }
.sf-slot-rev:hover { border-color: var(--plum); color: var(--plum); }


/* ═══════════════════════════════════════════════
   8. THEME GRID
   ═══════════════════════════════════════════════ */

.sf-theme-card {
  background: #fff; border-radius: var(--r-lg);
  border: var(--border); padding: 20px 16px;
  box-shadow: var(--shadow-card); transition: var(--t2); gap: 4px;
}
.sf-theme-card:hover { border-color: var(--orange); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.sf-theme-emoji { font-size: 26px; }
.sf-theme-name { font-size: 13px; font-weight: 800; }
.sf-theme-count { font-size: 11px; color: var(--muted); }


/* ═══════════════════════════════════════════════
   9. PROVIDER GRID
   ═══════════════════════════════════════════════ */

.sf-provider-card {
  background: #fff; border-radius: var(--r-lg);
  border: var(--border); padding: 24px 16px 18px;
  box-shadow: var(--shadow-card); transition: var(--t2);
}
.sf-provider-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--plum); }
.sf-provider-card-icon { width: 52px; height: 52px; font-size: 24px; border-radius: var(--r-md); background: var(--g50); border: var(--border); margin-bottom: 10px; }
.sf-provider-card-name  { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.sf-provider-card-count { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.sf-provider-card-editorial { font-size: 12px; line-height: 1.5; color: var(--muted); }


/* ═══════════════════════════════════════════════
   10. EDITORIAL SECTIONS
   ═══════════════════════════════════════════════ */

.sf-editorial-callout { background: var(--g50); border: var(--border); border-radius: var(--r-lg); padding: 18px; }
.sf-editorial-callout--tool { background: rgba(74,16,96,.04); border-color: rgba(74,16,96,.18); }
.sf-editorial-callout-title { font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.sf-editorial-callout p { font-size: 13px; line-height: 1.6; }

.sf-editorial-content p { font-size: 14px; line-height: 1.75; color: #333; margin-bottom: 12px; }
.sf-editorial-content h3 { font-size: 16px; font-weight: 800; margin: 22px 0 10px; }
.sf-editorial-steps li { font-size: 14px; line-height: 1.7; margin-bottom: 8px; }
.sf-rtp-warning-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }

.sf-why-card { background: #fff; border-radius: var(--r-lg); border: var(--border); padding: 22px; box-shadow: var(--shadow-card); transition: var(--t2); }
.sf-why-card:hover { box-shadow: var(--shadow-hover); border-color: rgba(74,16,96,.15); }
.sf-why-card-title { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.sf-why-list li { font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.sf-why-link { font-size: 12px; font-weight: 700; color: var(--plum); }
.sf-why-link:hover { color: var(--orange); text-decoration: underline; }


/* ═══════════════════════════════════════════════
   11. CTA BANNER
   ═══════════════════════════════════════════════ */

.sf-cta-banner {
  background: linear-gradient(135deg, var(--plum2) 0%, var(--plum) 50%, var(--plum3) 100%);
  padding: 60px 24px;
  position: relative; overflow: hidden;
}
.sf-cta-banner::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,43,.18) 0%, transparent 65%);
  pointer-events: none;
}
.sf-cta-banner h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; position: relative; }
.sf-cta-banner p  { font-size: 15px; color: rgba(255,255,255,.65); margin-bottom: 26px; position: relative; line-height: 1.6; }

.sf-btn-gold {
  background: var(--gold); color: var(--plum2);
  padding: 13px 30px; font-size: 15px; font-weight: 800;
  border-radius: var(--r-md); transition: var(--t); display: inline-block; position: relative;
}
.sf-btn-gold:hover { background: var(--gold2); transform: translateY(-2px); color: var(--plum2); box-shadow: 0 6px 20px rgba(255,184,0,.3); }


/* ═══════════════════════════════════════════════
   12. NEWSLETTER
   ═══════════════════════════════════════════════ */

.sf-newsletter { background: linear-gradient(135deg, var(--plum2), var(--plum)); border-radius: var(--r-lg); padding: 44px; margin: 48px 0; }
.sf-newsletter h3 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.sf-newsletter p  { font-size: 14px; line-height: 1.65; margin-bottom: 22px; }
.sf-newsletter-input { padding: 13px 16px; border-radius: var(--r-sm); font-size: 14px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); transition: var(--t); }
.sf-newsletter-input:focus { border-color: var(--gold); background: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(255,184,0,.12); outline: none; }
.sf-newsletter-btn { background: var(--gold); color: var(--plum2); padding: 13px 26px; font-size: 14px; font-weight: 800; border-radius: var(--r-sm); transition: var(--t); }
.sf-newsletter-btn:hover { background: var(--gold2); color: var(--plum2); transform: translateY(-1px); box-shadow: none; }
.sf-newsletter-note { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 12px; }


/* ═══════════════════════════════════════════════
   13. ARCHIVE HEADER
   ═══════════════════════════════════════════════ */

.sf-archive-header {
  background: var(--plum);
  padding: 48px 0;
}
.sf-archive-header h1 { font-size: 36px; font-weight: 800; position: relative; z-index: 1; }
.sf-archive-header p  { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.65; max-width: 600px; position: relative; z-index: 1; }


/* ═══════════════════════════════════════════════
   14. SLOT REVIEW PAGE
   Reference: .block, .block-head, .block-body pattern
   ═══════════════════════════════════════════════ */

/* Hero */
.sf-single-hero {
  background: linear-gradient(135deg, var(--plum2) 0%, var(--plum) 50%, var(--plum3) 100%);
  padding: 40px 20px 36px;
  position: relative; overflow: hidden;
}
.sf-single-hero::before {
  content: ''; position: absolute; top: -40%; right: -8%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,184,0,.13) 0%, transparent 65%);
  pointer-events: none;
}
.sf-single-hero::after {
  content: ''; position: absolute; bottom: -30%; left: -5%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,43,.09) 0%, transparent 65%);
  pointer-events: none;
}
.sf-single-hero .sf-hero-center { position: relative; z-index: 1; }

.sf-single-hero .sf-hero-thumb {
  width: 88px; height: 88px;
  border-radius: 16px;
  border: 3px solid rgba(255,255,255,.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  margin-bottom: 16px;
}

.sf-single-hero h1,
section.sf-single-hero h1 {
  font-size: 30px; font-weight: 800;
  letter-spacing: -.5px; line-height: 1.15;
  margin-bottom: 6px;
}
.sf-single-hero .sf-hero-provider { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.sf-single-hero .sf-hero-verdict { font-size: 15px; color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 18px; line-height: 1.65; }

/* Pills */
.sf-single-hero .sf-hero-pills { gap: 8px; margin-bottom: 20px; }
.sf-single-hero .sf-hero-pills .sf-pill-score {
  background: var(--gold); color: #1a1a1a;
  font-size: 14px; font-weight: 700;
  padding: 6px 13px; border-radius: 20px;
  box-shadow: none;
}
.sf-single-hero .sf-hero-pills .sf-pill-stat {
  font-size: 12px; font-weight: 700;
  padding: 6px 13px; border-radius: 20px;
}
.sf-pill-rtp    { background: var(--lime-bg); color: var(--lime2); border: none; }
.sf-pill-maxwin { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.sf-pill-vol-high { background: rgba(168,85,247,.18); color: #c084fc; border: none; }
.sf-pill-vol-med  { background: rgba(234,179,8,.18); color: var(--gold); border: none; }
.sf-pill-vol-extreme { background: rgba(168,85,247,.18); color: #c084fc; border: none; }

/* Trust summary — dark bar, matches .trust-bar in reference */
.sf-trust-summary {
  background: linear-gradient(90deg, #2d0a40, var(--plum));
  border-top: none; border-bottom: none;
  padding: 14px 0; border-radius: var(--r-md);
  margin-top: 18px; overflow: hidden;
}
.sf-ts-item dt  { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); margin-bottom: 2px; }
.sf-ts-item dd  { font-size: 15px; font-weight: 800; color: #fff; }
.sf-ts-trust li { font-size: 11px; color: rgba(255,255,255,.7); }
.sf-ts-trust li::before { content: '✓'; color: var(--lime); font-weight: 700; }

/* Main content card — matches .block
   Scoped to .sf-single-content (casino review / blog templates only) so this
   doesn't leak into static pages (Privacy Policy, Contact, RG, About, etc.)
   which share the same .sf-single-main class inside .sf-page-content. */
.sf-single-content .sf-single-main {
  background: #fff;
  border-radius: var(--r-lg); border: var(--border);
  padding: 0; /* sections have own padding */
  box-shadow: var(--shadow-card); overflow: hidden;
}

/* h2 = block-head style */
.sf-single-content .sf-single-main h2 {
  font-size: 13px; font-weight: 800;
  color: var(--plum); text-transform: uppercase;
  letter-spacing: .07em; padding: 16px 20px 0;
  margin: 0 0 0; border-bottom: none;
  display: flex; align-items: center; gap: 7px;
}

/* review sections separated by top border, like .review-section */
.sf-review-section {
  border-top: 1px solid var(--g100);
  padding: 18px 20px; margin: 0;
}
.sf-review-section:first-child { border-top: none; }

.sf-single-content .sf-single-main h3 { font-size: 15px; font-weight: 800; color: var(--text); margin: 18px 0 8px; }
.sf-single-content .sf-single-main p  { font-size: 14px; color: #333; line-height: 1.75; margin-bottom: 12px; }
.sf-single-content .sf-single-main p:last-child { margin-bottom: 0; }
.sf-single-content .sf-single-main li { font-size: 14px; color: #333; line-height: 1.7; margin-bottom: 6px; }

/* Last verified — matches .last-verified */
.sf-last-verified {
  background: var(--lime-bg);
  border: 1px solid rgba(123,200,50,.25);
  border-radius: var(--r-sm); padding: 10px 14px;
  font-size: 12px; color: var(--lime2);
  display: flex; align-items: center; gap: 8px;
  margin: 14px 20px 0;
}
.sf-last-verified strong { font-weight: 800; }

/* TOC */
.sf-toc {
  background: var(--g50); border-radius: var(--r-md);
  border: var(--border); border-left: none;
  padding: 14px 16px; margin: 0 0 0;
}
.sf-toc-head { font-size: 12px; font-weight: 800; color: var(--plum); text-transform: uppercase; letter-spacing: .07em; }
.sf-toc-list { margin-top: 10px; }
.sf-toc-list li { font-size: 12px; margin-bottom: 5px; display: block; }
.sf-toc-link { font-size: 12px; font-weight: 600; color: var(--plum); text-decoration: none; }
.sf-toc-link:hover { color: var(--orange); }

/* Scorecard */
.sf-scorecard {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: var(--g100);
  border: none; border-radius: 0;
  box-shadow: none; margin: 0; overflow: hidden;
}
.sf-sc-item {
  background: #fff; padding: 16px 12px;
  text-align: center; position: relative;
}
.sf-sc-item::before { display: none; } /* remove coloured top bars */
.sf-sc-item:hover { background: var(--g50); }

.sf-sc-label { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; }
.sf-sc-num   { font-size: 20px; font-weight: 800; font-family: var(--font); }
.sf-sc-great { color: var(--lime2); }
.sf-sc-good  { color: var(--gold2); }
.sf-sc-avg   { color: #f59e0b; }
.sf-sc-poor  { color: #dc2626; }

/* Quick verdict */
.sf-quick-verdict { padding: 0; }
.sf-qv-inner {
  background: #fff;
  border: var(--border); border-left: none;
  border-radius: var(--r-lg);
  padding: 0; box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* QV header bar like .block-head */
.sf-qv-title {
  font-size: 13px; font-weight: 800;
  color: var(--plum); text-transform: uppercase;
  letter-spacing: .07em; padding: 14px 18px 0;
  margin: 0 0 10px;
}
.sf-qv-text { font-size: 14px; line-height: 1.7; color: #333; padding: 0 18px; margin-bottom: 12px; }
.sf-qv-list { padding: 0 18px 16px; }
.sf-qv-list li { font-size: 13px; font-weight: 600; padding: 3px 0; }
.sf-qv-yes .sf-qv-ico { color: var(--lime2); }
.sf-qv-no  .sf-qv-ico { color: #dc2626; }

/* Player fit */
.sf-fit-grid { gap: 12px; }
.sf-fit-col { border-radius: var(--r-md); padding: 14px 16px; position: relative; overflow: hidden; }
.sf-fit-col::before { display: none; }
.sf-fit-play  { background: linear-gradient(135deg, rgba(123,200,50,.07), rgba(123,200,50,.03)); border: 1px solid rgba(123,200,50,.22); }
.sf-fit-avoid { background: linear-gradient(135deg, rgba(220,38,38,.07), rgba(220,38,38,.03)); border: 1px solid rgba(220,38,38,.2); }
.sf-fit-col h3 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 10px; display: flex; align-items: center; gap: 5px; }
.sf-fit-play h3  { color: var(--lime2); }
.sf-fit-avoid h3 { color: #dc2626; }
.sf-fit-col li { font-size: 12px; color: var(--muted); line-height: 1.35; margin-bottom: 5px; display: flex; align-items: flex-start; gap: 6px; list-style: none; }
.sf-fit-col li::before { content: '•'; flex-shrink: 0; }

/* Demo */
.sf-demo-frame { border-radius: var(--r-lg); border: var(--border); box-shadow: var(--shadow-card); overflow: hidden; }
.sf-demo-bar { background: var(--plum2); padding: 10px 16px; border-bottom: none; display: flex; align-items: center; justify-content: space-between; }
.sf-demo-bar-title { font-weight: 700; font-size: 13px; color: #fff; }
.sf-demo-bar-note  { color: rgba(255,255,255,.45); font-size: 11px; }
.sf-demo-iframe { height: 360px; }

/* Tags */
.sf-tag-cloud { gap: 5px; }
.sf-tag { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 12px; background: var(--g100); color: var(--plum); border: none; display: inline-block; text-decoration: none; transition: var(--t); }
.sf-tag:hover { background: var(--plum); color: #fff; transform: none; }

/* Verdict */
.sf-verdict-box {
  background: linear-gradient(135deg, var(--plum2), var(--plum3));
  border: none; border-radius: var(--r-lg);
  padding: 24px; text-align: center; position: relative; overflow: hidden;
}
.sf-verdict-box::before { display: none; }
.sf-verdict-box h2 {
  color: var(--gold); font-size: 13px;
  font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; border-bottom: none;
  padding: 0; margin: 0 0 12px;
  display: block; justify-content: unset;
}
.sf-verdict-number  { font-size: 56px; font-weight: 800; color: var(--gold); line-height: 1; text-shadow: none; font-family: var(--font); }
.sf-verdict-denom   { font-size: 24px; font-weight: 400; color: rgba(255,255,255,.5); }
.sf-verdict-text    { font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.6; max-width: 480px; margin: 8px auto 14px; }

/* Sidebar */
.sf-single-content .sf-sidebar-card { background: #fff; border-radius: var(--r-lg); border: var(--border); box-shadow: var(--shadow-card); overflow: hidden; padding: 0; }
.sf-single-content .sf-sidebar-card-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--plum); padding: 13px 16px 0; margin: 0; border-bottom: none; background: none; display: flex; align-items: center; gap: 6px; }
.sf-single-content .sf-sidebar-card > *:not(.sf-sidebar-card-title):not(table) { padding: 10px 16px 14px; }
.sf-data-table { width: 100%; border-collapse: collapse; font-size: 13px; display: table; padding: 0; }
.sf-data-table tr:not(:last-child) td { border-bottom: 1px solid var(--g100); }
.sf-data-table td { padding: 7px 16px; }
.sf-data-table td:first-child { color: var(--muted); font-size: 12px; font-family: var(--font); }
.sf-data-table td:last-child { font-weight: 700; text-align: right; color: var(--text); }
.sf-td-lime { color: var(--lime2); }

/* Related */
.sf-related-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
.sf-related-card { background: var(--g50); border: var(--border); border-radius: var(--r-md); padding: 14px; text-decoration: none; color: inherit; transition: var(--t2); display: block; }
.sf-related-card:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: 0 4px 16px rgba(255,107,43,.1); background: #fff; }
.sf-related-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.sf-related-meta span { font-size: 10px; padding: 3px 8px; border-radius: 8px; font-weight: 700; background: var(--g100); color: var(--muted); }

/* Author */
.sf-author-eeat-inner {
  background: linear-gradient(135deg, var(--plum2), var(--plum));
  border-radius: var(--r-lg); padding: 20px;
}
.sf-author-eeat-avatar { width: 56px; height: 56px; font-size: 20px; border: 3px solid rgba(255,255,255,.2); }
.sf-author-eeat-label  { font-size: 10px; letter-spacing: .07em; }
.sf-author-eeat-name   { font-size: 16px; font-weight: 800; }
.sf-author-eeat-title  { font-size: 12px; }
.sf-author-eeat-bio    { font-size: 12px; line-height: 1.6; }

/* Sticky CTA — styles consolidated in style.css Priority 7 block */

/* Responsible gambling */
.sf-rg-note { border-top: 3px solid var(--plum); }
.sf-rg-note-title { font-size: 17px; font-weight: 800; margin-bottom: 12px; }
.sf-rg-note p { font-size: 14px; line-height: 1.75; margin-bottom: 12px; }
.sf-rg-legal { font-size: 12px; font-weight: 700; color: var(--plum); margin-top: 14px; }


/* ═══════════════════════════════════════════════
   15. FOCUS / A11Y
   ═══════════════════════════════════════════════ */

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms; animation-duration: .01ms; }
}


/* ═══════════════════════════════════════════════
   16. MOBILE
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sf-hero { padding: 40px 0 32px; }
  .sf-hero h1 { font-size: 26px; }
  .sf-hero-sub { font-size: 14px; }
  .sf-section, .sf-section-alt { padding: 40px 0; }
  .sf-single-content .sf-single-main { padding: 0; }
  .sf-single-content .sf-single-main h2 { font-size: 12px; }
  .sf-demo-iframe { height: 300px; }
  .sf-verdict-number { font-size: 48px; }
  .sf-fit-grid { grid-template-columns: 1fr; }
  .sf-scorecard .sf-sc-item { flex: 1 1 calc(50% - 1px); }
  .sf-newsletter { padding: 28px 20px; }
  .sf-newsletter h3 { font-size: 20px; }
  .sf-cta-banner { padding: 44px 20px; }
  .sf-slots-grid { grid-template-columns: repeat(2,1fr); }
  .sf-theme-grid { grid-template-columns: repeat(2,1fr); }
  .sf-provider-grid { grid-template-columns: repeat(2,1fr); }
  .sf-bonus-cards { grid-template-columns: repeat(2,1fr); }
  .sf-related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .sf-hero h1 { font-size: 24px; }
  .sf-bonus-cards { grid-template-columns: 1fr; }
  .sf-slots-grid { grid-template-columns: 1fr; }
  .sf-single-hero .sf-hero-pills .sf-pill-stat,
  .sf-single-hero .sf-hero-pills .sf-pill-score { font-size: 11px; padding: 4px 10px; }
}

/* ── SLOT REVIEW PAGE: neutralise global <main> card styling ──
   ux-improvements.css applies background/border/border-radius to the bare
   `main` element globally. On the slot review page the entire sf-rv layout
   lives inside <main id="main-content">, so those rules visually box the
   full-bleed hero, stats bar and casino tiles inside a white rounded card.
   This override restores a transparent, borderless wrapper for that page. */
.single-slot_game main#main-content {
  background:    transparent !important;
  border:        none        !important;
  border-radius: 0           !important;
  box-shadow:    none        !important;
  padding:       0           !important;
  overflow:      visible     !important;
}


/* ── GLOBAL: prevent horizontal scroll without breaking position:sticky ──
   overflow-x:clip (unlike hidden/auto) does NOT create a scroll container,
   so position:sticky on .jumpnav and #sf-header continues to work correctly.
   This replaces the overflow-x:hidden that was on html/body in style.css.   */
main#main-content {
  overflow-x: clip;
}
/* Restore visible overflow for the slot review page (already set above,
   but re-affirm so the clip doesn't fight the sticky jump nav there). */
.single-slot_game main#main-content {
  overflow-x: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: v8-redesign.css
   ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
   SLOTSFUNKY v8.0.0 — REDESIGN CSS
   Homepage + Slot Review page additions.
   Builds on existing style.css — brand colors unchanged.
   border-radius: 16px | Soft shadows | Mobile-first
   ══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────
   HOMEPAGE — HERO v8
   [HP-1] Commercial headline, search-first
   ──────────────────────────────────────── */
.sf-hero-v8 { padding: 64px 0 48px; }

.sf-hero-v8-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) {
  .sf-hero-v8-grid { grid-template-columns: 1.1fr 0.9fr; gap: 60px; }
}

.sf-hero-v8-left h1 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  margin: 8px 0 16px;
}

/* Search box */
.sf-hero-search-wrap { margin: 24px 0; }
.sf-hero-search-box {
  display: flex; align-items: center; gap: 0;
  background: #fff; border-radius: 12px;
  border: 2px solid var(--g200);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transition: border-color .2s;
}
.sf-hero-search-box:focus-within { border-color: var(--orange); }
.sf-hero-search-icon { padding: 0 12px 0 16px; font-size: 18px; color: var(--muted); }
.sf-hero-search-input {
  flex: 1; border: none; outline: none; padding: 16px 0;
  font-size: 16px; font-family: var(--font); color: var(--text);
  background: transparent;
}
.sf-hero-search-input::placeholder { color: var(--muted2); }
.sf-hero-search-btn {
  background: var(--orange); color: #fff;
  padding: 16px 24px; border: none; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 700;
  transition: background .2s;
}
.sf-hero-search-btn:hover { background: var(--orange2); }

.sf-hero-search-popular {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
  font-size: 12px; color: rgba(255,255,255,0.7); align-items: center;
}
.sf-hero-search-popular span { color: rgba(255,255,255,0.5); margin-right: 2px; flex-shrink: 0; }
.sf-hero-search-pill {
  background: rgba(255,255,255,0.12); color: #fff;
  padding: 4px 12px; border-radius: 20px; font-size: 12px;
  font-weight: 600; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.15);
  transition: background .2s;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-hero-search-pill:hover { background: rgba(255,255,255,0.22); }

.sf-hero-search-results {
  background: #fff; border-radius: 12px; margin-top: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  border: 1px solid var(--g200);
  overflow: hidden;
}

/* Trending panel — vol pill added */
.sf-hot-badges { display: flex; gap: 4px; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.sf-vol-pill {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: .5px;
}
.sf-vol-high   { background: var(--ruby-bg);    color: var(--ruby); }
.sf-vol-v.high { background: var(--extreme-bg); color: var(--extreme); }
.sf-vol-med    { background: var(--gold-bg);    color: var(--gold2); }
.sf-vol-low    { background: var(--lime-bg);    color: var(--lime2); }
.sf-vol-extreme{ background: var(--extreme-bg); color: var(--extreme); }
.sf-hot-panel-footer {
  display: block; text-align: center; padding: 10px 0 2px;
  font-size: 12px; font-weight: 700; color: var(--gold);
  text-decoration: none;
}
.sf-hot-panel-footer:hover { text-decoration: underline; }

/* ────────────────────────────────────────
   HOMEPAGE — POPULAR MECHANICS  [HP-5]
   ──────────────────────────────────────── */
.sf-mechanics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px)  { .sf-mechanics-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .sf-mechanics-grid { grid-template-columns: repeat(8, 1fr); } }

.sf-mechanic-card {
  background: #fff; border: 1px solid var(--g200); border-radius: 16px;
  padding: 16px 12px; text-align: center; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all .25s ease;
}
.sf-mechanic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.09);
  border-color: var(--orange);
}
.sf-mechanic-emoji { font-size: 26px; line-height: 1; }
.sf-mechanic-name  { font-size: 12px; font-weight: 800; color: var(--text); }
.sf-mechanic-desc  { font-size: 10px; color: var(--muted); line-height: 1.4; }

/* ────────────────────────────────────────
   HOMEPAGE — TOP CASINOS FOR...  [HP-6]
   ──────────────────────────────────────── */
.sf-top-for-section { background: #fff; }
.sf-top-for-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px)  { .sf-top-for-grid { grid-template-columns: repeat(3, 1fr); } }

.sf-top-for-card {
  background: #fff; border: 1px solid var(--g200); border-radius: 16px;
  padding: 20px 16px; text-decoration: none;
  display: flex; flex-direction: column; gap: 6px;
  transition: all .25s ease;
  position: relative; overflow: hidden;
}
.sf-top-for-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  opacity: 0; transition: opacity .2s;
}
.sf-top-for-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); border-color: var(--orange); }
.sf-top-for-card:hover::before { opacity: 1; }
.sf-top-for-icon  { font-size: 28px; line-height: 1; }
.sf-top-for-label { font-size: 14px; font-weight: 800; color: var(--text); }
.sf-top-for-desc  { font-size: 12px; color: var(--muted); line-height: 1.5; flex: 1; }
.sf-top-for-link  { font-size: 12px; font-weight: 700; color: var(--orange); margin-top: 4px; }

/* ────────────────────────────────────────
   HOMEPAGE — MEGA LINKS BLOCK  [HP-9]
   ──────────────────────────────────────── */
.sf-mega-links { border-top: 1px solid var(--g200); }
.sf-mega-links-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px;
}
@media (min-width: 768px) { .sf-mega-links-grid { grid-template-columns: repeat(4, 1fr); } }

.sf-mega-col-title {
  font-size: 13px; font-weight: 800; color: var(--text);
  margin: 0 0 12px; text-transform: uppercase; letter-spacing: .5px;
}
.sf-mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sf-mega-col ul li a {
  font-size: 13px; color: var(--muted); text-decoration: none;
  transition: color .15s;
}
.sf-mega-col ul li a:hover { color: var(--orange); }

/* ════════════════════════════════════════
   SLOT REVIEW — HERO v8  [RV-1]
   ════════════════════════════════════════ */
.sf-single-hero-v8 {
  background: linear-gradient(135deg, var(--plum2) 0%, var(--plum) 60%, var(--plum3) 100%);
  padding: 32px 0 40px;
}
.sf-hero-v8-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .sf-hero-v8-layout {
    grid-template-columns: 200px 1fr;
    gap: 32px;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .sf-hero-v8-layout {
    grid-template-columns: 260px 1fr;
    gap: 48px;
  }
}

.sf-hero-v8-image {
  width: 100%; max-width: 260px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  aspect-ratio: 1 / 1;
  background: var(--plum2);
  display: flex; align-items: center; justify-content: center;
}
.sf-hero-v8-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-hero-v8-emoji { font-size: 72px; }

.sf-hero-v8-provider {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6);
  text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px;
}
.sf-single-hero-v8 h1 {
  font-size: clamp(22px, 3.5vw, 36px); font-weight: 800;
  color: #fff; margin: 0 0 12px; line-height: 1.2;
}

/* Star rating */
.sf-hero-v8-score { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sf-hero-v8-stars { display: flex; gap: 2px; }
.sf-star { font-size: 18px; }
.sf-star-on  { color: var(--gold); }
.sf-star-off { color: rgba(255,255,255,0.2); }
.sf-hero-v8-score-num {
  font-size: 24px; font-weight: 800; color: var(--gold);
  font-family: var(--serif);
}

/* Badges */
.sf-hero-v8-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sf-hero-v8-badge {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px; padding: 8px 16px; min-width: 80px;
  backdrop-filter: blur(8px);
}
.sf-badge-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: .5px; }
.sf-badge-val   { font-size: 16px; font-weight: 800; color: #fff; margin-top: 2px; }
.sf-badge-rtp   .sf-badge-val { color: var(--lime); }
.sf-badge-maxwin .sf-badge-val { color: var(--gold); }
.sf-pill-vol-high .sf-badge-val { color: #ff8a80; }
.sf-pill-vol-low  .sf-badge-val { color: var(--lime); }

/* Hero CTAs */
.sf-hero-v8-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.sf-hero-cta-primary { font-size: 15px; padding: 14px 28px; }
.sf-hero-cta-demo    { font-size: 14px; color: #fff; border-color: rgba(255,255,255,0.3); }
.sf-hero-cta-demo:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.sf-hero-v8-byline { font-size: 12px; color: rgba(255,255,255,0.55); }

/* ════════════════════════════════════════
   SLOT REVIEW — QUICK VERDICT v8  [RV-2]
   ════════════════════════════════════════ */
.sf-quick-verdict-v8 {
  background: var(--offwhite); padding: 32px 0;
  border-top: 3px solid var(--orange);
}
.sf-qv-v8-inner { max-width: 960px; margin: 0 auto; }
.sf-qv-v8-title {
  font-size: 20px; font-weight: 800; color: var(--text);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.sf-qv-v8-summary {
  font-size: 15px; color: var(--muted); max-width: 640px;
  margin: 0 0 20px; line-height: 1.6;
  padding: 12px 16px; background: #fff;
  border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0;
}
.sf-qv-v8-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .sf-qv-v8-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.sf-qv-v8-col {
  background: #fff; border-radius: 16px; padding: 16px;
  border: 1px solid var(--g200);
}
.sf-qv-v8-col h3 {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.sf-qv-v8-best  h3 { color: var(--lime2); }
.sf-qv-v8-avoid h3 { color: var(--ruby); }
.sf-qv-v8-verdict h3 { color: var(--plum); }
.sf-qv-v8-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sf-qv-v8-col ul li { font-size: 13px; color: var(--text); line-height: 1.4; }
.sf-qv-v8-best  ul li::before { content: '✓ '; color: var(--lime2); font-weight: 700; }
.sf-qv-v8-avoid ul li::before { content: '✗ '; color: var(--ruby); font-weight: 700; }
.sf-qv-v8-verdict p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }

/* ════════════════════════════════════════
   SLOT REVIEW — STATS SNAPSHOT  [RV-4]
   ════════════════════════════════════════ */
.sf-stats-snapshot { padding: 24px 0; background: #fff; }
.sf-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 480px)  { .sf-stats-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px)  { .sf-stats-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .sf-stats-grid { grid-template-columns: repeat(8, 1fr); } }

.sf-stat-card {
  background: var(--offwhite); border-radius: 16px;
  padding: 14px 10px; text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--g200);
}
.sf-stat-label {
  font-size: 9px; font-weight: 700; color: var(--muted2);
  text-transform: uppercase; letter-spacing: .5px;
}
.sf-stat-num {
  font-size: 20px; font-weight: 800; color: var(--text);
  line-height: 1;
}
.sf-stat-num-sm { font-size: 13px; }
.sf-stat-sub { font-size: 9px; color: var(--muted2); }
.sf-sc-great { color: var(--lime2); }
.sf-sc-good  { color: var(--plum); }
.sf-sc-avg   { color: var(--gold2); }
.sf-sc-poor  { color: var(--ruby); }
.sf-sc-warn  { color: var(--ruby); }

/* ════════════════════════════════════════
   SLOT REVIEW — COMPARISON TABLE  [RV-6]
   ════════════════════════════════════════ */
.sf-slot-comparison { }
.sf-comparison-table-wrap { overflow-x: auto; }
.sf-comparison-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.sf-comparison-table th {
  background: var(--offwhite); padding: 10px 12px;
  text-align: left; font-size: 11px; font-weight: 700;
  color: var(--muted2); text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 2px solid var(--g200);
}
.sf-comparison-table td {
  padding: 11px 12px; border-bottom: 1px solid var(--g200);
  color: var(--text);
}
.sf-comp-current td { background: var(--gold-bg); }
.sf-comp-current td:first-child { border-left: 3px solid var(--gold); }
.sf-comp-badge {
  font-size: 9px; font-weight: 700; background: var(--gold);
  color: var(--plum2); padding: 2px 6px; border-radius: 6px;
  margin-left: 6px; vertical-align: middle;
}
.sf-comp-link {
  font-size: 12px; font-weight: 700; color: var(--orange); text-decoration: none;
}
.sf-comp-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════
   SLOT REVIEW — ALTERNATIVES v8  [RV-7]
   ════════════════════════════════════════ */
.sf-alternatives-v8 { }
.sf-alt-cards {
  display: grid; grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .sf-alt-cards { grid-template-columns: repeat(3, 1fr); } }

.sf-alt-card {
  background: #fff; border: 1px solid var(--g200); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
  transition: all .2s;
}
.sf-alt-card:hover { border-color: var(--orange); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.sf-alt-card-want {
  font-size: 11px; font-weight: 700; color: var(--orange);
  text-transform: uppercase; letter-spacing: .4px;
}
.sf-alt-card-name { font-size: 15px; font-weight: 800; color: var(--text); }
.sf-alt-card-name a { color: inherit; text-decoration: none; }
.sf-alt-card-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.sf-alt-card-meta span {
  font-size: 11px; color: var(--muted); background: var(--offwhite);
  padding: 3px 8px; border-radius: 6px;
}
.sf-alt-card-cta {
  font-size: 12px; font-weight: 700; color: var(--plum);
  text-decoration: none; margin-top: 4px;
}
.sf-alt-card-cta:hover { color: var(--orange); }

/* ════════════════════════════════════════
   SLOT REVIEW — FINAL VERDICT v8  [RV-8]
   ════════════════════════════════════════ */
.sf-final-verdict {
  background: linear-gradient(135deg, var(--plum2) 0%, var(--plum) 100%);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(74,16,96,0.25);
}
.sf-fv-inner {
  display: grid; grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) {
  .sf-fv-inner { grid-template-columns: 160px 1fr; }
}

.sf-fv-score-col {
  background: rgba(0,0,0,0.2);
  padding: 32px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.sf-fv-label  { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 1px; }
.sf-fv-number {
  font-size: 56px; font-weight: 800; color: var(--gold);
  font-family: var(--serif); line-height: 1;
}
.sf-fv-denom  { font-size: 20px; color: rgba(255,255,255,0.5); }
.sf-fv-stars  { display: flex; gap: 2px; }
.sf-fv-stars .sf-star { font-size: 14px; }

.sf-fv-body {
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.sf-fv-summary {
  font-size: 16px; color: rgba(255,255,255,0.9);
  line-height: 1.6; margin: 0;
  font-style: italic;
}
.sf-fv-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf-fv-sw-col h3 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: rgba(255,255,255,0.6); margin: 0 0 6px;
}
.sf-fv-sw-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sf-fv-sw-col ul li { font-size: 12px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.sf-fv-sw-col ul li::before { content: '✓ '; color: var(--lime); font-weight: 700; }
.sf-fv-sw-weak ul li::before { content: '✗ '; color: #ff8a80; }
.sf-fv-cta { align-self: flex-start; }

/* ════════════════════════════════════════
   SLOT REVIEW — AUTHOR v8  [RV-9]
   ════════════════════════════════════════ */
.sf-author-eeat-v8 { }
.sf-author-process-box {
  background: var(--offwhite); border-radius: 12px;
  padding: 16px; margin-top: 16px;
  border-left: 3px solid var(--plum);
}
.sf-author-process-box h4 {
  font-size: 13px; font-weight: 800; color: var(--text); margin: 0 0 6px;
}
.sf-author-process-box p {
  font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0 0 8px;
}
.sf-author-process-link {
  font-size: 12px; font-weight: 700; color: var(--plum); text-decoration: none;
}
.sf-author-process-link:hover { color: var(--orange); }

/* ════════════════════════════════════════
   SLOT REVIEW — RELATED SLOTS v8  [RV-10]
   ════════════════════════════════════════ */
.sf-related-grid-v8 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px)  { .sf-related-grid-v8 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sf-related-grid-v8 { grid-template-columns: repeat(6, 1fr); } }

.sf-related-card-v8 {
  background: #fff; border: 1px solid var(--g200); border-radius: 12px;
  overflow: hidden; text-decoration: none;
  transition: all .2s ease; display: flex; flex-direction: column;
}
.sf-related-card-v8:hover {
  transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: var(--orange);
}
.sf-related-thumb-v8 {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
}
.sf-related-thumb-ph {
  background: var(--offwhite); display: flex; align-items: center;
  justify-content: center; font-size: 32px;
}
.sf-related-body-v8 { padding: 10px 10px 12px; }
.sf-related-title-v8 {
  font-size: 12px; font-weight: 800; color: var(--text);
  line-height: 1.3; margin-bottom: 6px;
}
.sf-related-meta-v8 { display: flex; flex-wrap: wrap; gap: 4px; }
.sf-related-meta-v8 span {
  font-size: 10px; color: var(--muted); background: var(--offwhite);
  padding: 2px 6px; border-radius: 4px;
}
.sf-related-score-v8 { background: var(--gold-bg); color: var(--gold2); font-weight: 700; }

/* ════════════════════════════════════════
   SLOT REVIEW — SIDEBAR v8  [RV-12]
   ════════════════════════════════════════ */
.sf-sidebar-facts-dl { margin: 0; }
.sf-sf-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--g200);
  gap: 8px;
}
.sf-sf-row:last-child { border-bottom: none; }
.sf-sf-row dt { font-size: 11px; color: var(--muted2); font-weight: 600; }
.sf-sf-row dd { font-size: 12px; color: var(--text); font-weight: 700; margin: 0; text-align: right; }

.sf-sidebar-demo-cta {
  display: block; text-align: center; margin-top: 12px;
  background: var(--offwhite); color: var(--plum); border: 1px solid var(--g200);
  border-radius: 8px; padding: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all .2s;
}
.sf-sidebar-demo-cta:hover { background: var(--plum); color: #fff; border-color: var(--plum); }

.sf-sidebar-compare-btn {
  display: block; width: 100%; text-align: center;
  background: var(--offwhite); color: var(--plum);
  border: 1px solid var(--g200); border-radius: 8px;
  padding: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all .2s;
}
.sf-sidebar-compare-btn:hover { border-color: var(--plum); background: var(--plum); color: #fff; }

/* ════════════════════════════════════════
   MOBILE OVERRIDES
   ════════════════════════════════════════ */
@media (max-width: 640px) {
  .sf-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .sf-qv-v8-grid { grid-template-columns: 1fr 1fr; }
  .sf-qv-v8-verdict { grid-column: 1 / -1; }
  .sf-fv-inner { grid-template-columns: 1fr; }
  .sf-fv-score-col { padding: 24px; flex-direction: row; justify-content: flex-start; }
  .sf-fv-sw { grid-template-columns: 1fr; }
  .sf-hero-v8-image { max-width: 120px; }
  .sf-hero-v8-layout { grid-template-columns: 120px 1fr; gap: 16px; align-items: flex-start; }
  .sf-single-hero-v8 h1 { font-size: 20px; }
  .sf-hero-v8-score-num { font-size: 18px; }
  .sf-star { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: v8-6-structure-patch.css
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   SLOTSFUNKY v8.6 — STRUCTURE PATCH
   Keeps v8.5.2 colors and fonts. Ports over only
   the layout/spacing/card improvements from v9:
   - section breathing room
   - icon grid card weight (Mechanic/Theme/Provider)
   - "Explore SlotsFunky" mega-link columns -> cards
   - "Why 4.5 Stars" cards sharpened
   - "How We Make Money" ghost-link visibility fix
   - Top Casinos tablet 2-col fix
   Load this file LAST (after ux-improvements.css)
   ═══════════════════════════════════════════════ */


/* ── 1. SECTION RHYTHM FIX ──
   ux-improvements.css sets padding:56px 0,
   overriding the base 64px and creating density.
   Open it up to 80px / 52px mobile. */
.sf-section, .sf-section-alt {
  padding: 80px 0;
}
@media (max-width: 1100px) {
  .sf-section, .sf-section-alt {
    padding: 52px 0;
  }
}


/* ── 2. ICON GRID SECTIONS (Mechanic / Theme / Provider) ──
   Give them card weight + larger icon containers so they
   stop reading as a bare list. Uses existing v8.5.2 colors
   (--g200, --g50, --orange, --plum, shadows). */
.sf-mechanic-card, .sf-theme-card, .sf-provider-card {
  background: #fff;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 22px 14px;
  box-shadow: var(--shadow-card);
}
.sf-mechanic-card:hover, .sf-theme-card:hover, .sf-provider-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.sf-mechanic-emoji, .sf-theme-emoji, .sf-provider-card-icon {
  width: 64px;
  height: 64px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--g50);
  border: 1px solid var(--g200);
  margin: 0 auto 10px;
}


/* ── 3. "FIND YOUR BONUS" ICON CARDS — matching icon-well ── */
.sf-bonus-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border-radius: var(--r-md);
  background: var(--g50);
  border: 1px solid var(--g200);
  margin: 0 auto 12px;
}


/* ── 4. "WHY 4.5 STARS" CARDS — sharpen existing card treatment ── */
.sf-why-card {
  border: 1px solid var(--g200);
  border-top: 3px solid var(--orange);
  border-radius: var(--r-lg);
}
.sf-why-card-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  border-radius: var(--r-md);
  background: var(--g50);
  border: 1px solid var(--g200);
  margin-bottom: 14px;
}


/* ── 5. "EXPLORE SLOTSFUNKY" MEGA-LINK COLUMNS
   Reverted: .sf-mega-col card treatment removed — restores v8.5.2
   bare-column style for the mega menu. */

/* Small accent rule above "Why 4.5 Stars" / "Explore SlotsFunky" headings */
section[aria-labelledby="scores-heading"] .sf-section-title::before,
section[aria-labelledby="mega-links-heading"] .sf-section-title::before {
  content: "";
  display: block;
  width: 40px; height: 3px;
  background: var(--orange);
  border-radius: 2px;
  margin: 0 auto 14px;
}
section[aria-labelledby="mega-links-heading"] .sf-section-title { position: relative; }
section[aria-labelledby="mega-links-heading"] .sf-section-title::before { margin: 0 0 14px; }


/* ── 6. "HOW WE MAKE MONEY" — FIX INVISIBLE GHOST LINKS ──
   .sf-btn-ghost is white-on-translucent, built for dark/plum
   backgrounds. On this light editorial section it's
   white-on-near-white = invisible. */
.sf-editorial-section .sf-btn-ghost,
.sf-section.sf-section-alt .sf-btn-ghost {
  background: #fff;
  color: var(--plum);
  border: 1px solid var(--g200);
}
.sf-editorial-section .sf-btn-ghost:hover,
.sf-section.sf-section-alt .sf-btn-ghost:hover {
  background: var(--plum);
  color: #fff;
  border-color: var(--plum);
}


/* ── 7. TOP CASINOS FOR YOUR STYLE — TABLET FIX ──
   3-col grid is cramped at 768px tablet width. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sf-top-for-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}


/* ── 8. CASINO LISTING ROWS — slightly bolder left accent ── */
.sf-casino-row, .sf-casino-card {
  border-left: 4px solid var(--plum);
  border-radius: var(--r-lg);
  transition: var(--t2);
}
.sf-casino-row:hover, .sf-casino-card:hover {
  border-left-color: var(--orange);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.sf-casino-row:first-child {
  border-left-color: var(--gold2);
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: v8-7-polish.css
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   SLOTSFUNKY v8.7 — HOMEPAGE VISUAL POLISH
   Visual-only pass. Zero colour / structure changes.
   Goal: Apple spacing · Booking.com clarity ·
         Casino Guru trust · SlotCatalog IA
   Load order: after v8-6-structure-patch.css
   ═══════════════════════════════════════════════ */


/* ── 0. UPGRADED DESIGN TOKENS ──────────────────
   Override the v8.6 values with richer shadows /
   larger radii / premium easing. */
:root {
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-pill: 999px;

  /* Richer shadow ramp */
  --shadow-card:  0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
  --shadow-hover: 0 10px 40px rgba(74,16,96,.13);
  --shadow-cta:   0 6px 20px rgba(255,107,43,.40);

  /* Premium easing */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --t2: all .25s var(--ease-out);
}


/* ── 1. SECTION BREATHING ROOM ──────────────────
   Already set to 80 / 52 by v8-6 patch — we leave
   that in place and just add the header margin. */
.sf-section-header {
  margin-bottom: 40px;
}
.sf-section-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.sf-section-sub {
  font-size: 16px;
  line-height: 1.75;
}


/* ── 2. HERO — DEPTH & GLASS ─────────────────── */

/* Warm orange radial accent behind hero content */
.sf-hero::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,107,43,.10) 0%,
    transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Hero h1 — bigger punch */
.sf-hero h1,
.sf-hero-v8-left h1 {
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -.02em;
}

/* Stat block — bump the numbers */
.sf-hero-stat-num {
  font-size: 30px;
}

/* Search bar — taller, glassier */
.sf-hero-search-box {
  height: 58px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
}
.sf-hero-search-input {
  font-size: 15px;
}
.sf-hero-search-btn {
  border-radius: 0 14px 14px 0;
  font-size: 15px;
  padding: 0 22px;
  height: 100%;
}

/* Hot-picks panel — glass card feel */
.sf-hot-panel,
.sf-hero-v8-right .sf-hot-panel {
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.20);
}


/* ── 3. UNIVERSAL CARD ELEVATION ─────────────── */

/* All card types inherit the richer shadow + lift */
.sf-slot-card,
.sf-theme-card,
.sf-mechanic-card,
.sf-provider-card,
.sf-bonus-card,
.sf-why-card,
.sf-cc,
.sf-editorial-callout,
.sf-fit-col,
.sf-sidebar-card,
.sf-related-card {
  box-shadow: var(--shadow-card);
  transition: transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out),
              border-color .25s var(--ease-out);
}

.sf-slot-card:hover,
.sf-theme-card:hover,
.sf-mechanic-card:hover,
.sf-provider-card:hover,
.sf-bonus-card:hover,
.sf-why-card:hover,
.sf-cc:hover,
.sf-editorial-callout:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Slot cards — taller thumbnail */
.sf-slot-thumb {
  height: 120px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}


/* ── 4. CASINO LIST — PREMIUM COMPARISON FEEL ── */

/* Base card */
.sf-cc {
  padding: 20px 22px;
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--g200);
  border-left: 4px solid var(--plum);
}
.sf-cc:hover {
  border-left-color: var(--orange);
}

/* Logo container — bigger, whiter */
.sf-cc-logo {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-cc-emoji {
  font-size: 32px;
}

/* Score ring — larger */
.sf-cc-score-ring {
  width: 64px;
  height: 64px;
}
.sf-cc-score-wrap {
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  border-radius: 50%;
}

/* CTA buttons */
.sf-cc-btn-visit,
.sf-cc-ctas .sf-btn-visit {
  height: 42px;
  font-size: 13px;
  font-weight: 800;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-cta);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-cc-btn-review,
.sf-cc-ctas .sf-btn-review {
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Editor's Pick (#1 casino) — prestigious gold treatment */
.sf-cc.sf-cc--top,
.sf-cc--top {
  background: linear-gradient(
    135deg,
    rgba(255,203,69,.10) 0%,
    rgba(255,255,255,.98) 50%
  );
  border: 2px solid rgba(255,184,0,.45);
  border-left: 4px solid var(--gold);
  box-shadow:
    0 12px 40px rgba(255,184,0,.15),
    var(--shadow-card);
}
.sf-cc.sf-cc--top:hover {
  box-shadow:
    0 18px 56px rgba(255,184,0,.22),
    var(--shadow-hover);
}
.sf-cc-badge {
  background: var(--gold);
  color: var(--plum2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 12px;
  border-radius: 0 0 8px 8px;
}


/* ── 5. CASINO TILES v2 — PARALLEL POLISH ─────── */

.sf-cc-v2 {
  padding: 16px 18px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
  margin-bottom: 14px;
}
.sf-cc-v2:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.sf-cc-v2-logo {
  width: 60px;
  height: 42px;
  border-radius: var(--r-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sf-cc-v2.sf-cc-v2--top {
  box-shadow:
    0 12px 40px rgba(255,184,0,.15),
    var(--shadow-card);
}
.sf-cc-v2.sf-cc-v2--top:hover {
  box-shadow:
    0 18px 56px rgba(255,184,0,.22),
    var(--shadow-hover);
}
.sf-cc-v2-btn-orange {
  border-radius: var(--r-sm);
  height: 40px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--shadow-cta);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-cc-v2-btn-ghost {
  border-radius: var(--r-sm);
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ── 6. GLOBAL BUTTON POLISH ─────────────────── */

.sf-btn-primary,
.sf-btn-gold {
  border-radius: 12px;
  height: 50px;
  font-size: 15px;
  font-weight: 800;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s var(--ease-out),
              box-shadow .2s var(--ease-out),
              background .2s;
}
.sf-btn-primary:hover {
  box-shadow: 0 6px 22px rgba(255,107,43,.45);
  transform: translateY(-2px);
}
.sf-btn-gold:hover {
  box-shadow: 0 6px 22px rgba(255,184,0,.40);
  transform: translateY(-2px);
}

.sf-btn-ghost-light {
  border-radius: 12px;
  height: 50px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
}


/* ── 7. ICON GRID CARDS (Mechanic / Theme / Provider) */

/* Already card-ified by v8-6 — upgrade the padding */
.sf-mechanic-card,
.sf-theme-card,
.sf-provider-card {
  padding: 26px 18px;
  border-radius: var(--r-lg);
}
.sf-mechanic-emoji,
.sf-theme-emoji,
.sf-provider-card-icon {
  width: 68px;
  height: 68px;
  font-size: 32px;
  border-radius: var(--r-md);
  margin-bottom: 14px;
}


/* ── 8. BONUS CARDS ──────────────────────────── */
.sf-bonus-card {
  min-height: 200px;
  padding: 24px;
  border-radius: var(--r-lg);
}
.sf-bonus-card-icon {
  width: 60px;
  height: 60px;
  font-size: 28px;
  border-radius: var(--r-md);
  margin-bottom: 14px;
}


/* ── 9. TYPOGRAPHY — BODY & EDITORIAL ───────── */

/* Increase base body line-height for readability */
body { line-height: 1.75; }

/* Editorial paragraphs */
.sf-editorial-section p,
.sf-section p,
.entry-content p {
  font-size: 16px;
  line-height: 1.85;
  max-width: 68ch;
}


/* ── 10. REDUCE VISUAL NOISE ─────────────────── */

/* Lighten all heavy borders to a whisper */
.sf-cc-v2-info,
.sf-cc-v2-offer,
.sf-cc-v2-right {
  border-color: rgba(0,0,0,.06);
}

/* Tighten tag contrast — softer, still legible */
.sf-cc-tag,
.sf-cc-v2-tag {
  border-color: rgba(0,0,0,.07);
  background: var(--g50);
  color: var(--muted);
}

/* Separators: rely on space, not lines */
.sf-section-header::after {
  display: none;
}


/* ── 11. FOOTER POLISH ───────────────────────── */
.sf-footer {
  padding-top: 80px;
  padding-bottom: 60px;
}
.sf-footer-inner,
.sf-footer-cols,
.sf-footer-grid {
  gap: 48px;
}
.sf-footer-links li,
.sf-footer-nav li {
  line-height: 2.1;
}
.sf-footer-col h4,
.sf-footer-col-title {
  margin-bottom: 18px;
  font-size: 13px;
  letter-spacing: .06em;
}


/* ── 12. MOBILE ───────────────────────────────── */
@media (max-width: 768px) {
  .sf-section-title {
    font-size: 26px;
  }

  .sf-hero h1,
  .sf-hero-v8-left h1 {
    font-size: 30px;
  }

  .sf-hero-search-box {
    height: 52px;
  }

  .sf-cc {
    padding: 16px;
    margin-bottom: 12px;
  }

  .sf-cc-logo {
    width: 52px;
    height: 52px;
  }

  .sf-bonus-card {
    padding: 18px;
  }

  .sf-slot-card,
  .sf-theme-card,
  .sf-mechanic-card,
  .sf-provider-card {
    /* Slightly less lift on tap devices */
    transition: box-shadow .2s;
  }
  .sf-slot-card:hover,
  .sf-theme-card:hover,
  .sf-mechanic-card:hover,
  .sf-provider-card:hover {
    transform: none;
  }

  .sf-btn-primary,
  .sf-btn-gold {
    height: 48px;
    font-size: 15px;
  }

  .sf-footer {
    padding-top: 52px;
    padding-bottom: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: v9-system-engine.css
   ═══════════════════════════════════════════════════════════════ */
/* ==========================================================================
   SLOTSFUNKY V9.0 SYSTEM ENGINE
   Load order: after v8-7-polish.css (last in stack)
   Purpose: Global spacing, elevation, typography, search, trending panel,
            casino rank dominance, mobile swipe carousel.
   DO NOT alter brand colours, layout structure, SEO blocks, or IA.
   ========================================================================== */

/* ── 0. DESIGN TOKENS ───────────────────────────────────────────────────── */
:root {
    /* Brand colours — immutable */
    --brand-plum:   #1E1B2E;
    --brand-cream:  #FEFCF7;
    --brand-orange: #FF6B2B;
    --brand-gold:   #FFB800;

    /* 3-tier elevation system */
    --elevation-1: 0 1px 3px rgba(30,27,46,.04), 0 4px 12px rgba(30,27,46,.02);
    --elevation-2: 0 8px 24px rgba(30,27,46,.06), 0 2px 6px rgba(30,27,46,.02);
    --elevation-3: 0 20px 60px rgba(30,27,46,.12), 0 4px 16px rgba(30,27,46,.04);

    /* Corner radius system */
    --radius-hero:  22px;
    --radius-card:  18px;
    --radius-btn:   14px;
    --radius-badge: 999px;

    /* Premium easing */
    --ease-premium: cubic-bezier(0.25, 1, 0.5, 1);
}


/* ── 1. BASE BODY ────────────────────────────────────────────────────────── */
body {
    background-color: var(--brand-cream);
    color: var(--brand-plum);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ── 2. GLOBAL SECTION SPACING & DIVIDERS ───────────────────────────────── */
.sf-section {
    position: relative;
    padding: 80px 0;
}
.sf-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(30,27,46,.06) 20%,
        rgba(30,27,46,.06) 80%,
        transparent
    );
}


/* ── 3. TYPOGRAPHY AUTHORITY ────────────────────────────────────────────── */
/* Scoped to .sf-hero-section — these were bare h1/h2/p tag selectors,
   which silently inflated every heading (up to 60px h1!) and paragraph
   sitewide, including static-page titles (Privacy Policy, etc.) that had
   no more specific rule to fall back on. */
.sf-hero-section h1, .sf-h1 {
    font-weight: 800;
    font-size: clamp(34px, 5vw, 60px);
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.sf-hero-section h2, .sf-h2 {
    font-weight: 800;
    font-size: clamp(28px, 3.5vw, 36px);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.sf-hero-section p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(30,27,46,.85);
}


/* ── 4. HERO SECTION — AMBIENT GLOW & SPACING ──────────────────────────── */
.sf-hero-section {
    position: relative;
    padding: 100px 0 90px;
    background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%);
    overflow: hidden;
}

/* Gold radial glow backdrop */
.sf-hero-section::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,184,0,.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}


/* ── 5. SEARCH MODULE ───────────────────────────────────────────────────── */
.sf-search-wrapper {
    position: relative;
    height: 68px;
    background: #FFFFFF;
    border: 1px solid rgba(30,27,46,.08);
    border-radius: var(--radius-btn);
    box-shadow: var(--elevation-2);
    transition:
        transform       0.2s var(--ease-premium),
        box-shadow      0.2s var(--ease-premium),
        border-color    0.2s var(--ease-premium);
    display: flex;
    align-items: center;
    padding: 0 8px 0 24px;
}
.sf-search-wrapper:focus-within {
    transform: translateY(-2px);
    border-color: var(--brand-orange);
    box-shadow:
        0 12px 40px rgba(30,27,46,.08),
        0 0 0 4px rgba(255,107,43,.08);
}

/* Also apply height upgrade to the existing hero search box */
.sf-hero-search-box {
    height: 68px;
    border-radius: var(--radius-btn);
    box-shadow: var(--elevation-2);
    transition:
        transform       0.2s var(--ease-premium),
        box-shadow      0.2s var(--ease-premium),
        border-color    0.2s var(--ease-premium);
}
.sf-hero-search-box:focus-within {
    transform: translateY(-2px);
    border-color: var(--brand-orange);
    box-shadow:
        0 12px 40px rgba(30,27,46,.08),
        0 0 0 4px rgba(255,107,43,.08);
}


/* ── 6. "BLOOMBERG TERMINAL" TRENDING PANEL ─────────────────────────────── */
.sf-trending-panel,
.sf-hot-panel {
    background: #FFFFFF;
    border-radius: var(--radius-hero);
    border: 1px solid rgba(30,27,46,.05);
    box-shadow: var(--elevation-3);
    padding: 24px;
}

/* Row — exact 72px height, slides right on hover (no lift) */
.sf-trending-row,
.sf-hot-row {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(30,27,46,.04);
    transition:
        transform          0.18s var(--ease-premium),
        background-color   0.18s var(--ease-premium);
    padding: 0 12px;
    border-radius: 8px;
}
.sf-trending-row:hover,
.sf-hot-row:hover {
    transform: translateX(4px);
    background-color: rgba(30,27,46,.01);
}
.sf-trending-row:last-child,
.sf-hot-row:last-child {
    border-bottom: none;
}

/* Scanability indicators (applied via data attributes or added classes) */
.sf-rtp-excellent::before { content: '🟢 '; }
.sf-rtp-average::before   { content: '🟡 '; }
.sf-rtp-low::before       { content: '🔴 '; }
.sf-vol-high::before      { content: '🔥 '; }
.sf-vol-extreme::before   { content: '⚡ '; }


/* ── 7. TRUST STRIP — GLASSMORPHISM ─────────────────────────────────────── */
.sf-trust-strip {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: var(--elevation-1);
    border-radius: var(--radius-card);
    padding: 22px;
}


/* ── 8. CASINO RANK DOMINANCE ───────────────────────────────────────────── */

/* Rank #1 — gold-bordered, scaled up, Level 3 shadow */
.sf-casino-card.rank-1,
.sf-cc.sf-cc--top.rank-1 {
    transform: scale(1.04);
    border: 2px solid var(--brand-gold);
    box-shadow: var(--elevation-3);
    min-height: 420px;
    position: relative;
    z-index: 2;
}

/* Gold "TOP CHOICE" ribbon */
.sf-casino-card.rank-1::before {
    content: '🏆 TOP CHOICE';
    position: absolute;
    top: -14px;
    left: 28px;
    background: linear-gradient(135deg, var(--brand-gold) 0%, #E6A600 100%);
    color: var(--brand-plum);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 6px 16px;
    border-radius: var(--radius-badge);
    z-index: 3;
}

/* Ranks #2 & #3 — standard, no competition for visual dominance */
.sf-casino-card.rank-standard {
    transform: scale(1);
    box-shadow: var(--elevation-1);
    border: 1px solid rgba(30,27,46,.05);
}


/* ── 9. UNIVERSAL CARD ENGINE ───────────────────────────────────────────── */
.sf-v9-card {
    background: #FFFFFF;
    border-radius: var(--radius-card);
    border: 1px solid rgba(30,27,46,.04);
    box-shadow: var(--elevation-1);
    padding: 28px;
    transition:
        transform   0.22s var(--ease-premium),
        box-shadow  0.22s var(--ease-premium);
}
.sf-v9-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elevation-2);
}


/* ── 10. CTA BUTTONS ────────────────────────────────────────────────────── */
.sf-cta-button {
    height: 54px;
    border-radius: var(--radius-btn);
    font-weight: 700;
    padding: 0 32px;
    transition:
        transform   0.22s var(--ease-premium),
        box-shadow  0.22s var(--ease-premium);
}
.sf-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255,107,43,.25);
}


/* ── 11. MOBILE — SWIPE CAROUSEL & SPACING ──────────────────────────────── */
@media (max-width: 768px) {

    .sf-section {
        padding: 56px 0;
    }

    .sf-v9-card {
        padding: 20px;
    }

    .sf-cta-button {
        width: 100%;
    }

    /* Reset rank-1 scale on mobile — no horizontal overflow */
    .sf-casino-card.rank-1,
    .sf-cc.sf-cc--top.rank-1 {
        transform: scale(1);
        margin-top: 12px;
    }

    /* Hardware-accelerated snap-scroll carousel */
    .sf-mobile-swipe-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 16px;
        scrollbar-width: none;
    }
    .sf-mobile-swipe-container::-webkit-scrollbar {
        display: none;
    }
    .sf-mobile-swipe-container .sf-casino-card,
    .sf-mobile-swipe-container .sf-v9-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
    }
}


/* ── 12. CONSOLIDATED DUPLICATE RESOLUTION (Audit #5) ──────────────────────
   These selectors were duplicated between v8-redesign.css and
   v8-6-structure-patch.css. The v9 engine is the canonical source.
   Declarations here use higher specificity to guarantee correct cascade. */

/* Mechanic / Theme / Provider cards — single authoritative block */
.sf-mechanic-card,
.sf-theme-card,
.sf-provider-card {
    background: #FFFFFF;
    border: 1px solid rgba(30,27,46,.08);
    border-radius: var(--radius-card);
    padding: 24px 16px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: var(--elevation-1);
    transition:
        transform   0.25s var(--ease-premium),
        box-shadow  0.25s var(--ease-premium),
        border-color 0.25s var(--ease-premium);
}
.sf-mechanic-card:hover,
.sf-theme-card:hover,
.sf-provider-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elevation-2);
    border-color: var(--brand-orange);
}
.sf-mechanic-emoji,
.sf-theme-emoji,
.sf-provider-card-icon {
    width: 64px;
    height: 64px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: v9-trust-strip.css
   ═══════════════════════════════════════════════════════════════ */
/* ── TRUST STRIP v9.0.3 ─────────────────────────────────────────────────── */
/* Overrides ux-improvements.css and v9-system-engine.css for the strip      */

.sf-trust-strip {
    /* Layout: tight, centered row */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;

    /* Geometry: compact, not a void */
    padding: 18px 28px;
    min-height: 0;
    margin-top: 0;

    /* Visual: keep lavender card, lose the oversized box feel */
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: none;
}

/* Individual chip */
.sf-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.20);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}

.sf-trust-chip:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.32);
}

/* 18+ chip gets a subtle accent so it reads as a warning/compliance note */
.sf-trust-chip--age {
    color: rgba(255,255,255,0.70);
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.07);
}

/* Icon inside each chip */
.sf-trust-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #7CFC00; /* lime — matches var(--lime) */
    stroke: #7CFC00;
}

.sf-trust-chip--age .sf-trust-icon {
    color: rgba(255,255,255,0.55);
    stroke: rgba(255,255,255,0.55);
}

/* Wipe out the old .sf-trust-item styles entirely */
.sf-trust-item { display: none; }

/* Mobile: allow wrapping gracefully */
@media (max-width: 600px) {
    .sf-trust-strip {
        gap: 8px;
        padding: 14px 16px;
        justify-content: center;
    }
    .sf-trust-chip {
        font-size: 11px;
        padding: 7px 11px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: v9-polish.css
   ═══════════════════════════════════════════════════════════════ */
/* ==========================================================================
   SLOTSFUNKY — v9.0.5 POLISH LAYER
   Philosophy: additive only. Never shrink, never fight upstream layout values.
   Each rule was checked against the full upstream cascade before inclusion.
   Load order: last (after v9-trust-strip.css, slot/casino polish).
   ========================================================================== */


/* ── 0. NEW TOKENS — additive only, no overrides ────────────────────────── */
:root {
    /* Supplement the existing --shadow-card / --shadow-hover with named tiers */
    --pol-shd-sm:   0 1px 2px rgba(0,0,0,.04);
    --pol-shd-md:   0 8px 24px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.03);
    --pol-shd-plum: 0 12px 32px rgba(74,16,96,.10);

    /* Supplement existing --t / --t2 */
    --pol-ease: cubic-bezier(0.25, 1, 0.5, 1);
    --pol-tr:   0.22s var(--pol-ease);
}


/* ── 1. SECTION SPACING
   v9-system-engine already sets .sf-section { padding: 80px 0 }
   We do NOT touch it — just clean up section-sub / section-header margins  */

.sf-section-sub {
    margin-bottom: 36px;    /* was 32px in style.css — breathing room */
    line-height: 1.7;
}

.sf-section-header { margin-bottom: 36px; }


/* ── 2. NAVIGATION
   nav.css already has height:56px. ux-improvements set 44px (lost the war).
   We do NOT touch height — mobile hamburger is calculated off it.
   Only add hover polish that nav.css doesn't already have.              */

.sf-nav-search-btn {
    border: 1.5px solid rgba(255,255,255,.18);  /* was 1px — more visible */
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sf-nav-search-btn:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.32);
    color: #fff;
}

.sf-nav-cta-btn {
    transition: background 0.15s, box-shadow 0.15s, transform 0.18s var(--pol-ease);
}
.sf-nav-cta-btn:hover {
    transform: translateY(-1px);
    /* nav.css already adds box-shadow on hover — we just add the lift */
}


/* ── 3. HERO
   ux-improvements.css: padding 56px 0 44px.
   Brief asks 96px. That's a 40px jump — too aggressive for an unknown layout.
   Safe middle: 72px top, keeps the existing 44px bottom rhythm.           */

.sf-hero { padding: 72px 0 44px; }

/* h1: upstream clamp(28,3.8vw,44). Brief wants bigger — clamp(30,4.2vw,48).
   Floor 30 is safe (2px over upstream min). */
.sf-hero h1 {
    font-size: clamp(30px, 4.2vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* Hero sub — upstream 15px, add breathing */
.sf-hero-sub { line-height: 1.75; margin-bottom: 28px; }

/* Button lift — upstream has transform:none on hover, we restore sensible lift */
.sf-btn-primary:hover { transform: translateY(-2px); }
.sf-btn-ghost:hover   { transform: translateY(-1px); }

/* Hero search — v9-system already at 68px height + elevation-2 shadow.
   Only add focus ring that brief asks for. Do NOT change height.          */
.sf-hero-search-box:focus-within,
.sf-search-wrapper:focus-within {
    box-shadow:
        0 12px 40px rgba(30,27,46,.10),
        0 0 0 4px rgba(255,107,43,.10);
}

/* Stat number — upstream 24px, safe to nudge to 26px */
.sf-hero-stat-num { font-size: 26px; }


/* ── 4. CASINO CARDS — revenue section
   Keep all upstream layout. Only add depth signals.                        */

/* #1 casino: upstream has gold border + shadow already in v9-system.
   Add a subtle outer glow to reinforce dominance without layout change.   */
.sf-cc--top {
    box-shadow: var(--shadow-hover), 0 0 0 1px rgba(255,184,0,.15);
}

/* CTA button — upstream 8px 16px padding. Adding lift only (no size change). */
.sf-cc-btn-visit {
    transition: transform 0.18s var(--pol-ease), box-shadow 0.18s var(--pol-ease), background 0.15s;
}
.sf-cc-btn-visit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255,107,43,.25);
}

/* Score ring — upstream 48px. Brief wants 52px.
   The SVG ring is sized by the svg element itself (also 48px).
   Only safe if we size both together. */
.sf-cc-score-ring,
.sf-cc-score-ring svg { width: 52px; height: 52px; }
.sf-cc-score-num { font-size: 15px; }


/* ── 5. SLOT CARDS
   Upstream: border-radius var(--r-md)=10px, hover translateY(-3px).
   Brief: translateY(-4px) scale(1.01). Safe — adds scale not in upstream.
   Border-radius: leave at 10px (upstream value), don't change.            */

.sf-slot-card:hover {
    transform: translateY(-4px) scale(1.01);
    transition: transform 0.25s var(--pol-ease), box-shadow 0.25s var(--pol-ease);
}

/* Thumb height: upstream 110px. Brief wants bigger. 118px = safe increment. */
.sf-slot-thumb { height: 118px; }

/* Body padding: upstream 12px. Add 2px. */
.sf-slot-body { padding: 14px; }

/* Button lift */
.sf-slot-play:hover { transform: translateY(-1px); }


/* ── 6. CATEGORY / THEME & PROVIDER CARDS
   Upstream: padding 20px 16px, border-radius var(--r-lg)=14px.
   We add gap and slightly more padding — not less, so layout won't break.  */

.sf-theme-card { gap: 6px; }
.sf-theme-emoji { font-size: 28px; }   /* upstream 26px — safe 2px increase */


/* ── 7. FILTER PILLS
   Upstream: padding 6px 14px. Brief: more padding.
   Only safe to add horizontal — vertical affects bar height.              */

.sf-cfl-pill { padding: 6px 18px; }


/* ── 8. EDITORIAL CONTENT
   max-width and line-height — purely additive, no layout effect.          */

.sf-editorial-content p,
.sf-review-body p {
    line-height: 1.78;
    max-width: 650px;
}

.sf-editorial-content h3 { margin-top: 28px; margin-bottom: 12px; }


/* ── 9. SCORECARD
   Upstream: padding 16px 12px, font-size 20px.
   Brief: bigger numbers. 22px is safe; 24px risks overflow on mobile.     */

.sf-sc-num {
    font-size: 22px;
    letter-spacing: -0.02em;
}
.sf-sc-item { padding: 18px 14px; }  /* upstream 16px 12px — safe increase */

/* Micro shadow between cells — additive */
.sf-scorecard { box-shadow: var(--pol-shd-sm); border-radius: 12px; overflow: hidden; }


/* ── 10. QUICK VERDICT
   Upstream: border-radius var(--r-lg)=14px, shadow-card.
   Add slightly stronger shadow — purely additive.                          */

.sf-qv-inner {
    box-shadow: var(--pol-shd-md);
    border: 1px solid rgba(30,27,46,.07);
}

/* Padding: upstream 14px 18px 0 for title. Add 2px top. */
.sf-qv-title { padding-top: 18px; }


/* ── 11. VERDICT BOX
   Upstream: padding 24px, font-size 56px.
   Safe to increase both modestly.                                          */

.sf-verdict-box { padding: 32px; }
.sf-verdict-number { font-size: 60px; letter-spacing: -0.03em; }


/* ── 12. SIDEBAR CARDS — additive shadow only
   Style.css already handles sticky. Don't touch position/top.             */

.sf-sidebar-card {
    box-shadow: var(--pol-shd-sm);
    border: 1px solid rgba(30,27,46,.06);
    margin-bottom: 20px;
}


/* ── 13. TOC — additive padding + link hover nudge
   Upstream: padding 14px 16px.                                            */

.sf-toc { padding: 18px 20px; }

.sf-toc-link {
    transition: color 0.15s, padding-left 0.15s;
    display: inline-block;
}
.sf-toc-link:hover { padding-left: 3px; }


/* ── 14. SLOT REVIEW HERO THUMB
   Upstream: 88px × 88px. Brief: slightly larger. 96px is safe.           */

.sf-single-hero .sf-hero-thumb {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(0,0,0,.38);
}


/* ── 15. DEMO IFRAME — safe 20px height increase
   Upstream: 360px.                                                         */

.sf-demo-iframe { height: 380px; }


/* ── 16. RELATED CARDS — hover improvement */

.sf-related-card {
    box-shadow: var(--pol-shd-sm);
    transition: transform 0.22s var(--pol-ease), box-shadow 0.22s var(--pol-ease), border-color 0.22s;
}
.sf-related-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pol-shd-md);
}


/* ── 17. CTA BUTTON GOLD — lift on hover
   Upstream: transform translateY(-2px) already on hover. Strengthen shadow. */

.sf-btn-gold:hover {
    box-shadow: 0 10px 28px rgba(255,184,0,.32);
}


/* ── 18. AUTHOR THUMB — larger avatar for authority */

.sf-author-eeat-avatar {
    width: 68px;
    height: 68px;
    font-size: 24px;
}


/* ── 19. GLOBAL PROSE LINE HEIGHT — additive only */

body { line-height: 1.7; }

.sf-single-main p { line-height: 1.78; }


/* ── 20. FOCUS RING — slightly heavier than upstream 2px */

:focus-visible {
    outline-width: 2.5px;
    outline-offset: 3px;
}


/* ── 21. REDUCED MOTION — honour prefers-reduced-motion for new hovers */

@media (prefers-reduced-motion: reduce) {
    .sf-slot-card:hover,
    .sf-btn-primary:hover,
    .sf-btn-ghost:hover,
    .sf-btn-gold:hover,
    .sf-cc-btn-visit:hover,
    .sf-nav-cta-btn:hover,
    .sf-related-card:hover,
    .sf-slot-play:hover { transform: none !important; }
}


/* ── 22. MOBILE — undo any changes that are desktop-only ───────────────── */

@media (max-width: 768px) {
    .sf-hero { padding: 56px 0 44px; }  /* restore upstream mobile value */
    .sf-scorecard .sf-sc-item { padding: 14px 10px; }
    .sf-demo-iframe { height: 320px; }
    .sf-verdict-number { font-size: 48px; }
}

@media (max-width: 480px) {
    .sf-hero h1 { font-size: 26px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   SLOT PAGE — TARGETED FIXES (appended after audit)
   ════════════════════════════════════════════════════════════════════════════ */


/* ── A. FINAL VERDICT — score ring redesign ──────────────────────────────────
   Problem: 80px ring floats alone above the body content. Looks small and
   disconnected on the dark gradient card.
   Fix: Make it the centrepiece — larger ring, horizontal layout so the score
   sits beside the ranking text rather than stacked, more visual weight.      */

/* Enlarge the ring container */
.sf-rv .fvp-score-ring {
    width: 120px;
    height: 120px;
}
.sf-rv .fvp-score-ring svg {
    width: 120px;
    height: 120px;
}

/* Score number — much larger, this is the headline of the section */
.sf-rv .fvp-score-num {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* Label below the number — slightly bigger */
.sf-rv .fvp-score-label {
    font-size: 11px;
    margin-top: 3px;
    letter-spacing: .06em;
}

/* Header: switch from stacked to horizontal — ring left, text right */
.sf-rv .fvp-header {
    display: flex;
    align-items: center;
    gap: 24px;
    text-align: left;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Score badge — the ring + ranking stacked together on the left */
.sf-rv .fvp-score-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Ranking text — sits beside ring, not below it */
.sf-rv .fvp-ranking {
    text-align: left;
    margin-top: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
}

/* Score dot-row — 10 pips, filled to match the score out of 10.
   Mirrors the lime→gold gradient used in the ring for visual cohesion. */
.sf-rv .fvp-dots {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.sf-rv .fvp-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    flex-shrink: 0;
}

.sf-rv .fvp-dot--full {
    background: linear-gradient(135deg, #7BC832, #FFB800);
}

.sf-rv .fvp-dot--half {
    background: linear-gradient(90deg, #FFB800 50%, rgba(255,255,255,.18) 50%);
}

/* Real header label: "Final Verdict: <Slot Name>" — gives the section its
   identity so the score doesn't float without context. */
.sf-rv .fvp-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.85);
    margin-bottom: 18px;
    text-align: center;
}
@media (min-width: 561px) {
    .sf-rv .fvp-label { text-align: left; }
}

/* Mobile: revert to stacked */
@media (max-width: 560px) {
    .sf-rv .fvp-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .sf-rv .fvp-ranking { text-align: center; }
    .sf-rv .fvp-dots { justify-content: center; }
    .sf-rv .fvp-score-ring { width: 100px; height: 100px; }
    .sf-rv .fvp-score-ring svg { width: 100px; height: 100px; }
    .sf-rv .fvp-score-num { font-size: 30px; }
}


/* ── B. KEY STATISTICS — tighten the grid on desktop ────────────────────────
   Problem: `padding: 28px` on .card + `padding: 18px 16px` on stat-items
   + the grid being 3-col with sometimes 5 items = large dead cell + too airy.
   Fix: reduce stat-item padding, tighten the grid gap, reduce card bottom
   padding, and make the grid 3-col with tighter items.                       */

/* Card wrapper — reduce bottom padding so RTP text below doesn't float */
.sf-rv #rtp.card {
    padding-bottom: 20px;
}

/* Stats grid — tighter gap, auto-fill so 5 items wrap better */
.sf-rv .stats-grid {
    gap: 8px;
    margin-bottom: 16px;
}

/* On desktop: allow up to 3 columns but don't force empty 6th cell */
@media (min-width: 640px) {
    .sf-rv .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Stat items — reduce internal padding. Current 18px 16px is too tall. */
.sf-rv .stat-item {
    padding: 12px 14px;
}

/* DT label — reduce gap to value */
.sf-rv .stat-item dt {
    margin-bottom: 5px;
    font-size: 9px;
}

/* DD value — reduce from 20px (sf-beauty) to 17px (single-slot-v6 intention) */
.sf-rv .stat-item dd {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Sub text (RTP range) */
.sf-rv .stat-item .sub {
    font-size: 10px;
    margin-top: 4px;
}

/* Colour badge pills — tighten padding so they don't make items tall */
.sf-rv .c-green,
.sf-rv .c-red,
.sf-rv .c-gold {
    padding: 2px 7px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 6px;
    display: inline-block;
}

/* Hover — keep lift but reduce it slightly so it doesn't feel oversized */
.sf-rv .stat-item:hover {
    transform: translateY(-2px);
}