/* ============================================================
   assets/css/single-slot-production.css
   Auto-consolidated v9.8.1 — merges the slot-review CSS chain
   that was previously 4 separate HTTP requests, all already
   scoped to is_singular('slot_game') in functions.php:
     1. single-slot-v6-v9.css  (base v6 redesign + v9 layout)
     2. sf-beauty.css          (final cascade-winning polish layer)
     3. v9-slot-polish.css     (glow/glass/volatility/TOC polish)
     4. v9-mobile.css          (dedicated mobile breakpoints)
   Cascade order is preserved exactly (concatenated in this order)
   so specificity/!important behaviour is unchanged. Source files
   are retained on disk for diffing but are no longer enqueued.
   ============================================================ */

/* ---- 1. single-slot-v6-v9.css ---- */
/**
 * Single Slot Game — v9.0 polish pass
 *
 * Changes from v8.x:
 *  1. Jump nav — sticky, icon+label tabs with orange underline (matches HTML v6 reference)
 *  2. Key Statistics — enlarged stat-items with colour-badge dd values, hover lift
 *  3. Casino tiles — full homepage-style cc-v2 treatment inside .casinos-section
 *  4. Author section — unified wrapper card, avatar, verified badge, review-process steps
 *  5. Font sizing — matches HTML v6 reference throughout
 *  6. Wrapper — max-width container on casinos-section and page-wrap for consistent gutters
 *
 * Scoped under .sf-rv to avoid collisions with global header/footer.
 *
 * @package SlotsFunky
 * @version 9.0.0
 */

/* ══════════════════════════════════════════════════════════
   BRAND TOKENS + RESET
   ══════════════════════════════════════════════════════════ */
.sf-rv {
  --plum:#4A1060;--plum2:#2D0840;--plum3:#6B2090;--plum4:#8B30B0;
  --orange:#FF6B2B;--orange2:#E55A1B;--orange-bg:#FFF2ED;
  --lime:#7BC832;--lime2:#5EA020;--lime-bg:#F2FBD8;
  --gold:#FFB800;--gold2:#CC9200;--gold-bg:#FFF8E7;
  --ruby:#CC2200;--ruby-bg:#FFF0EE;
  --cream:#FEFCF7;--off:#F5F2EC;--g200:#E8E3D8;--g300:#D0CAC0;
  --text:#1A1525;--muted:#6B6259;--muted2:#9E9585;
  --card-bg:#FFFFFF;
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --r:16px;--r2:12px;--r3:8px;
  --max-w:1280px;
  --gutter:24px;
}
.sf-rv *,.sf-rv *::before,.sf-rv *::after{box-sizing:border-box;margin:0;padding:0}
.sf-rv{font-family:var(--font);color:var(--text);background:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.7;font-size:17px}
.sf-rv a{text-decoration:none;color:inherit}
.sf-rv img{max-width:100%;display:block}
.sf-rv ul,.sf-rv ol{list-style:none}
.sf-rv button{font-family:var(--font);cursor:pointer;border:none;background:none}
.sf-rv ::-webkit-scrollbar{height:4px;width:4px}
.sf-rv ::-webkit-scrollbar-track{background:transparent}
.sf-rv ::-webkit-scrollbar-thumb{background:var(--g300);border-radius:2px}
.sf-rv .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.sf-rv [id]{scroll-margin-top:100px}/* header(44px) + jumpnav(48px) + 8px buffer */

/* ── Inner wrapper used inside full-bleed sections ── */
.sf-rv .sf-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 768px) {
  .sf-rv .sf-inner { padding: 0 16px; }
}


/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.sf-rv .hero {
  background: linear-gradient(155deg,var(--plum2) 0%,var(--plum) 55%,var(--plum3) 100%);
  padding: 20px 20px 28px; position: relative; overflow: hidden;
}
.sf-rv .hero::after {
  content: ''; position: absolute; top: -80px; right: -100px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle,rgba(255,184,0,.1) 0%,transparent 65%);
  pointer-events: none;
}
.sf-rv .breadcrumb-bar {
  font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 16px; font-weight: 600;
}
.sf-rv .rh-grid {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 18px; align-items: flex-start; position: relative;
}
@media (min-width: 600px) { .sf-rv .rh-grid { grid-template-columns: 140px 1fr; gap: 24px; } }

.sf-rv .rh-thumb {
  width: 110px; height: 110px; border-radius: 16px;
  background: linear-gradient(145deg,#5A1880,#2D0840);
  border: 2px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; flex-shrink: 0;
  box-shadow: 0 8px 28px rgba(0,0,0,.35); position: relative; overflow: hidden;
}
.sf-rv .rh-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 60%);
}
.sf-rv .rh-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 600px) { .sf-rv .rh-thumb { width: 140px; height: 140px; font-size: 60px; border-radius: 20px; } }

.sf-rv .rh-info { flex: 1; min-width: 0; }
.sf-rv .rh-title {
  font-size: clamp(17px,4.5vw,26px); font-weight: 800; color: #fff;
  line-height: 1.2; margin-bottom: 10px;
}

/* Score widget */
.sf-rv .score-widget { margin-bottom: 14px; }
.sf-rv .sw-a {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 10px 16px;
}
.sf-rv .sw-a-num { font-size: 44px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -2px; }
.sf-rv .sw-a-denom { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.35); }
.sf-rv .sw-a-meta { display: flex; flex-direction: column; gap: 4px; }
.sf-rv .sw-a-label { font-size: 13px; font-weight: 800; color: var(--lime); line-height: 1; }
.sf-rv .sw-a-bar-track { width: 96px; height: 6px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
.sf-rv .sw-a-bar-fill { height: 100%; background: linear-gradient(90deg,var(--lime),var(--gold)); border-radius: 3px; }
.sf-rv .sw-a-rank { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.45); margin-top: 1px; }

.sf-rv .rh-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sf-rv .rh-badge { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 7px; }
.sf-rv .rh-badge.rtp { background: var(--lime-bg); color: var(--lime2); }
.sf-rv .rh-badge.vol { background: var(--ruby-bg); color: var(--ruby); }
.sf-rv .rh-badge.win { background: var(--gold-bg); color: var(--gold2); }

.sf-rv .rh-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sf-rv .btn-p {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--orange); color: #fff;
  padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 14px;
  box-shadow: 0 4px 14px rgba(255,107,43,.4); transition: all .15s;
}
.sf-rv .btn-p:hover { background: var(--orange2); transform: translateY(-1px); }
.sf-rv .btn-g {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1.5px solid rgba(255,255,255,.28);
  padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 14px; transition: background .15s;
}
.sf-rv .btn-g:hover { background: rgba(255,255,255,.2); }

.sf-rv .rh-author { font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.5; }
.sf-rv .rh-author-link { border-bottom: 1px solid rgba(255,255,255,.25); transition: all .15s; }
.sf-rv .rh-author-link:hover { border-bottom-color: var(--orange); }
.sf-rv .rh-author-link strong { color: rgba(255,255,255,.8); }

/* Integrated hero stats bar */
.sf-rv .hero-stats {
  display: flex; align-items: center; gap: 0;
  background: rgba(0,0,0,.2);
  padding: 0 20px;
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow-x: auto; scrollbar-width: none;
}
.sf-rv .hero-stats::-webkit-scrollbar { display: none; }
.sf-rv .hero-stat-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 16px; flex-shrink: 0;
}
.sf-rv .hero-stat-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: rgba(255,255,255,.4);
}
.sf-rv .hero-stat-value { font-size: 13px; font-weight: 800; color: #fff; }
.sf-rv .hero-stat-value.rtp   { color: var(--lime); }
.sf-rv .hero-stat-value.max-win { color: var(--gold); }
.sf-rv .hero-stat-value.buy   { color: var(--lime2); }
.sf-rv .hero-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,.1); flex-shrink: 0; }

@media (max-width: 600px) {
  .sf-rv .hero { padding: 20px 16px 24px; }
  .sf-rv .hero-stats { padding: 0 16px; }
  .sf-rv .hero-stat-item { padding: 9px 10px; }
}


/* ══════════════════════════════════════════════════════════
   QUICK VERDICT
   ══════════════════════════════════════════════════════════ */
.sf-rv .qv {
  background: #fff; padding: 20px; border-bottom: 1px solid var(--g200);
}
.sf-rv .qv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sf-rv .qv-head h2 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.sf-rv .qv-verdict {
  font-size: 14px; line-height: 1.7; color: var(--muted);
  border-left: 3px solid var(--orange); padding-left: 12px; margin-bottom: 16px;
}
.sf-rv .qv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .sf-rv .qv-cols { grid-template-columns: 1fr; } }
.sf-rv .qv-col { border-radius: 10px; padding: 14px; }
.sf-rv .qv-col.g { background: var(--lime-bg); border: 1.5px solid rgba(94,160,32,.2); }
.sf-rv .qv-col.r { background: var(--ruby-bg); border: 1.5px solid rgba(204,34,0,.15); }
.sf-rv .qv-col-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.sf-rv .qv-col-head.g { color: var(--lime2); }
.sf-rv .qv-col-head.r { color: var(--ruby); }
.sf-rv .qv-col ul { display: flex; flex-direction: column; gap: 7px; }
.sf-rv .qv-col li {
  font-size: 13px; font-weight: 600;
  display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; color: var(--text);
}
.sf-rv .qv-col.g li::before { content: '✓'; color: var(--lime2); font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.sf-rv .qv-col.r li::before { content: '✕'; color: var(--ruby); font-weight: 800; flex-shrink: 0; margin-top: 1px; }


/* ══════════════════════════════════════════════════════════
   AUTHOR & REVIEW PROCESS  — v9 wrapper polish
   ══════════════════════════════════════════════════════════ */
.sf-rv .author-section {
  background: var(--off); border-bottom: 1px solid var(--g200); padding: 14px 20px;
}
/* unified wrapper card — same approach as HTML v6 */
.sf-rv .author-wrap {
  display: flex; flex-direction: column; gap: 0;
  background: #fff; border: 1px solid var(--g200); border-radius: var(--r2);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
@media (min-width: 700px) {
  .sf-rv .author-wrap { flex-direction: row; align-items: stretch; }
}
/* vertical divider (desktop only) */
.sf-rv .author-divider { display: none; }
@media (min-width: 700px) {
  .sf-rv .author-divider {
    display: block; width: 1px; background: var(--g200);
    flex-shrink: 0; margin: 12px 0;
  }
}

/* ── Author profile pane ── */
.sf-rv .author-profile {
  display: flex; align-items: flex-start; gap: 14px;
  flex-shrink: 0; padding: 18px 20px;
  border-bottom: 1px solid var(--g200);
}
@media (min-width: 700px) {
  .sf-rv .author-profile { border-bottom: none; min-width: 280px; }
}

.sf-rv .author-av-link { position: relative; display: block; flex-shrink: 0; text-decoration: none; }
.sf-rv .author-av {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg,var(--plum),var(--plum3));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 10px rgba(74,16,96,.2);
  transition: opacity .15s; overflow: hidden;
}
.sf-rv .author-av img { width: 100%; height: 100%; object-fit: cover; }
.sf-rv .author-av-link:hover .author-av { opacity: .88; }
.sf-rv .author-verified {
  position: absolute; bottom: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--lime2); color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; font-weight: 800;
}

.sf-rv .author-details { flex: 1; min-width: 0; }
.sf-rv .author-name-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px;
}
.sf-rv .author-name-link {
  font-size: 15px; font-weight: 800; color: var(--text);
  border-bottom: 1.5px solid transparent; transition: all .15s;
}
.sf-rv .author-name-link:hover { border-bottom-color: var(--orange); color: var(--orange); }
.sf-rv .author-role-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  background: var(--plum2); color: #fff; padding: 3px 8px; border-radius: 20px;
}
.sf-rv .author-stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted);
}
.sf-rv .author-stats strong { color: var(--text); font-weight: 800; }
.sf-rv .astat-div { color: var(--g300); }

/* ── Review process pane ── */
.sf-rv .review-process { flex: 1; min-width: 0; padding: 18px 20px; }
.sf-rv .rp-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
@media (max-width: 480px) { .sf-rv .rp-steps { grid-template-columns: 1fr; } }
.sf-rv .rp-step {
  display: flex; align-items: flex-start; gap: 7px;
  background: var(--off); border: 1px solid var(--g200);
  border-radius: 8px; padding: 8px 10px;
  transition: border-color .15s;
}
.sf-rv .rp-step:hover { border-color: var(--g300); }
.sf-rv .rp-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sf-rv .rp-text { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.4; }
.sf-rv .rp-method-link {
  font-size: 12px; font-weight: 700; color: var(--orange);
  display: inline-flex; align-items: center; gap: 3px;
  border-bottom: 1px solid rgba(255,107,43,.3); transition: border-color .15s;
}
.sf-rv .rp-method-link:hover { border-bottom-color: var(--orange); }


/* ══════════════════════════════════════════════════════════
   JUMP NAV  — v9: sticky + icon+label tabs with orange underline
   Matches the HTML v6 reference exactly (Image 1).
   ══════════════════════════════════════════════════════════ */
/* ── CRITICAL: overflow must NOT be set on the sticky element itself.
   Any overflow value other than `visible` on a sticky element collapses
   it to a scroll container, destroying the sticky behaviour entirely.
   The horizontal scroll lives on .jumpnav-inner instead. ── */
.sf-rv .jumpnav {
  position: sticky;
  top: 44px; /* #sf-header height = sf-nav-inner = 44px after ux-improvements override */
  z-index: 100;
  background: #fff;
  border-bottom: 2px solid var(--g200);
  /* overflow MUST be visible/unset here — DO NOT add overflow-x:auto */
  overflow: visible;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.sf-rv .jumpnav-inner {
  /* Scroll lives here, NOT on .jumpnav */
  display: flex; align-items: stretch;
  white-space: nowrap; padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sf-rv .jumpnav-inner::-webkit-scrollbar { display: none; }
/* Tab links — icon + label, orange underline on active/hover */
.sf-rv .jnav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 13px 14px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  border-bottom: 3px solid transparent;
  background: none; border-top: none; border-left: none; border-right: none;
  border-radius: 0;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.sf-rv .jnav-link:hover,
.sf-rv .jnav-link.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
  /* no transform — keeps it inline with the underline */
  transform: none;
  background: none;
}
@media (max-width: 600px) {
  .sf-rv .jumpnav-inner { padding: 0 16px; }
  .sf-rv .jnav-link { font-size: 12px; padding: 11px 11px; }
}


/* ══════════════════════════════════════════════════════════
   CASINOS SECTION — v9 wrapper + homepage-style tiles
   ══════════════════════════════════════════════════════════ */
.sf-rv .casinos-section {
  background: #fff;
  border-bottom: 1px solid var(--g200);
  padding: 24px 0 32px;
}
.sf-rv .casinos-section .sf-inner { /* use wrapper inside */
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 768px) {
  .sf-rv .casinos-section { padding: 20px 0 24px; }
}

/* ── Restore homepage-identical CTA buttons inside casinos-section ──
   .sf-rv a{color:inherit} and .sf-rv *{padding:0} reset the sf-cc-v2
   button styles. These overrides re-apply the exact homepage values
   with higher specificity so the Claim Bonus / Full Review CTAs look
   identical to the homepage casino tiles.                             */
.sf-rv .casinos-section .sf-cc-v2-btn-orange {
  color: #fff;
  background: #FF6B2B;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(255,107,43,.35);
  transition: background .15s, box-shadow .15s;
  border: none;
  cursor: pointer;
}
.sf-rv .casinos-section .sf-cc-v2-btn-orange:hover {
  background: #E55A1B;
  color: #fff;
}
.sf-rv .casinos-section .sf-cc-v2-btn-ghost {
  color: #4A1060;
  background: #F5F2EC;
  border: 1.5px solid #E8E4F0;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.sf-rv .casinos-section .sf-cc-v2-btn-ghost:hover {
  border-color: #4A1060;
  color: #4A1060;
}
.sf-rv .casinos-section .sf-cc-v2-btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 120px;
}
/* Restore ring label margin clobbered by .sf-rv *{margin:0} */
.sf-rv .casinos-section .sf-cc-v2-rs-lbl {
  margin-top: 1px;
}

.sf-rv .section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.sf-rv .section-hd h2 { font-size: 18px; font-weight: 800; color: var(--text); }
.sf-rv .section-hd a { font-size: 12px; font-weight: 700; color: var(--orange); }

.sf-rv .casino-tiles { display: flex; flex-direction: column; gap: 10px; }

/* ── cc2 tile (5-column layout — exact HTML v6 reference) ── */
.sf-rv .cc2 {
  background: #fff; border: 1px solid var(--g200); border-radius: 12px;
  display: grid;
  grid-template-columns: 36px 150px 1fr 58px 120px;
  align-items: stretch; gap: 0; overflow: hidden; position: relative;
  transition: box-shadow .15s, border-color .15s;
}
.sf-rv .cc2:hover { border-color: rgba(255,107,43,.3); box-shadow: 0 4px 18px rgba(255,107,43,.1); }

/* Top pick — gold border + gradient bar */
.sf-rv .cc2.top { border: 2px solid var(--gold2); }
.sf-rv .cc2.top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,var(--gold),var(--orange)); z-index: 1;
}
/* Editor badge */
.sf-rv .cc2-badge {
  position: absolute; top: 8px; left: 50px;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: var(--gold2); background: var(--gold-bg);
  padding: 2px 7px; border-radius: 20px; border: 1px solid rgba(255,184,0,.4);
  z-index: 2; white-space: nowrap; display: none;
}
.sf-rv .cc2.top .cc2-badge { display: block; }

/* Col 1 — rank */
.sf-rv .cc2-rank {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--muted2);
  background: var(--off); border-right: 1px solid var(--g200);
}
.sf-rv .cc2-rank.g { font-size: 18px; }

/* Col 2 — logo + info */
.sf-rv .cc2-left-col {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border-right: 1px solid var(--g200); min-width: 0;
}
.sf-rv .cc2-logo {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 9px;
  background: var(--off); border: 1px solid var(--g200);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  overflow: hidden;
}
.sf-rv .cc2-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.sf-rv .cc2-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sf-rv .cc2-name {
  font-size: 12px; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; transition: color .15s;
}
.sf-rv .cc2-name:hover { color: var(--orange); }
.sf-rv .cc2-tags { display: flex; gap: 3px; flex-wrap: wrap; }
.sf-rv .cc2-tag {
  font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 4px;
  background: #EEF4FF; color: #0055BB; text-transform: uppercase; letter-spacing: .3px;
}
.sf-rv .cc2-review { font-size: 10px; font-weight: 700; color: var(--muted2); transition: color .15s; }
.sf-rv .cc2-review:hover { color: var(--orange); }

/* Col 3 — offer (most prominent) */
.sf-rv .cc2-offer {
  padding: 12px; border-right: 1px solid var(--g200); min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.sf-rv .cc2-bonus {
  font-size: clamp(13px,2.2vw,16px); font-weight: 800;
  color: var(--orange); line-height: 1.25; margin-bottom: 5px;
}
.sf-rv .cc2-spins {
  display: inline-block; background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
  vertical-align: middle; white-space: nowrap; margin-left: 2px;
}
.sf-rv .cc2-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 3px;
}
.sf-rv .cc2-rtp { color: var(--lime2); font-weight: 700; }
.sf-rv .cc2-tc { font-size: 10px; color: var(--muted2); }

/* Col 4 — score ring */
.sf-rv .cc2-right {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 10px 8px; border-right: 1px solid var(--g200);
}
.sf-rv .ring { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.sf-rv .ring svg { display: block; }
.sf-rv .ring-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.sf-rv .rs { font-size: 11px; font-weight: 800; line-height: 1; }
.sf-rv .rd { font-size: 8px; color: var(--muted2); font-weight: 600; }

/* Col 5 — CTA buttons */
.sf-rv .cc2-btns {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; align-items: stretch; justify-content: center;
}
.sf-rv .btn-o {
  display: block; text-align: center;
  background: var(--orange); color: #fff;
  padding: 9px 10px; border-radius: 8px; font-weight: 700; font-size: 13px;
  white-space: nowrap; transition: background .15s;
  box-shadow: 0 3px 10px rgba(255,107,43,.3);
}
.sf-rv .btn-o:hover { background: var(--orange2); }
.sf-rv .btn-gh {
  display: block; text-align: center;
  background: var(--off); color: var(--muted); border: 1px solid var(--g200);
  padding: 7px 10px; border-radius: 8px; font-weight: 700; font-size: 12px;
  transition: all .15s;
}
.sf-rv .btn-gh:hover { border-color: var(--plum); color: var(--plum); }

/* Mobile collapse */
@media (max-width: 640px) {
  .sf-rv .cc2 { grid-template-columns: 32px 1fr; grid-template-rows: auto auto auto; min-height: auto; }
  .sf-rv .cc2-rank { border-right: none; border-bottom: 1px solid var(--g200); padding: 6px; grid-row: 1; grid-column: 1; }
  .sf-rv .cc2-left-col { border-right: none; border-bottom: 1px solid var(--g200); grid-row: 1; grid-column: 2; padding: 10px; }
  .sf-rv .cc2-badge { top: 6px; left: 42px; }
  .sf-rv .cc2-offer { border-right: none; border-bottom: 1px solid var(--g200); grid-row: 2; grid-column: 1/-1; padding: 12px; }
  .sf-rv .cc2-right { border-right: none; border-bottom: 1px solid var(--g200); grid-row: 3; grid-column: 1; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 10px 12px; }
  .sf-rv .cc2-btns { grid-row: 3; grid-column: 2; flex-direction: row; padding: 10px 12px; gap: 8px; }
  .sf-rv .btn-o, .sf-rv .btn-gh { flex: 1; font-size: 12px; padding: 8px 6px; }
}


/* ══════════════════════════════════════════════════════════
   PAGE WRAPPER — max-width container
   ══════════════════════════════════════════════════════════ */
.sf-rv .page-wrap { padding: 0 0 80px; }
.sf-rv .content-grid {
  display: grid; grid-template-columns: 1fr;
  max-width: var(--max-w); margin: 0 auto; gap: 0;
}
@media (min-width: 1024px) {
  .sf-rv .content-grid {
    grid-template-columns: 1fr 308px; align-items: start;
    gap: 0; padding: 0 var(--gutter);
  }
}
.sf-rv .main-col { padding: 24px 20px 0; min-width: 0; }
@media (min-width: 1024px) { .sf-rv .main-col { padding: 28px 28px 0 0; border-right: 1px solid var(--g200); } }
.sf-rv .sidebar-col { padding: 20px; min-width: 0; }
@media (min-width: 1024px) { .sf-rv .sidebar-col { padding: 28px 0 0 24px; } }


/* ══════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════ */
.sf-rv .card {
  background: var(--card-bg); border: 1px solid var(--g200);
  border-radius: 18px; padding: 28px; margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.sf-rv .card-title {
  font-size: 19px; font-weight: 800; margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px; border-bottom: 1.5px solid var(--g200);
}
.sf-rv .card-title .icon { font-size: 18px; }
.sf-rv .card p { font-size: 16px; line-height: 1.8; color: var(--text); margin-bottom: 14px; }
.sf-rv .card p:last-child { margin-bottom: 0; }
.sf-rv .card h3 { font-size: 17px; font-weight: 800; margin: 22px 0 10px; line-height: 1.3; }
.sf-rv .card h4 { font-size: 14px; font-weight: 700; margin: 14px 0 6px; }


/* ══════════════════════════════════════════════════════════
   KEY STATISTICS  — v9 enhanced (matches HTML v6)
   ══════════════════════════════════════════════════════════ */
.sf-rv .stats-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 10px; margin-bottom: 20px;
}
@media (min-width: 480px) { .sf-rv .stats-grid { grid-template-columns: repeat(3,1fr); } }

.sf-rv .stat-item {
  background: var(--off); border-radius: var(--r3);
  padding: 14px; border: 1px solid var(--g200);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.sf-rv .stat-item:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  transform: translateY(-2px);
  border-color: var(--g300);
}
.sf-rv .stat-item dt {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted2); margin-bottom: 5px;
}
.sf-rv .stat-item dd { font-size: 17px; font-weight: 800; line-height: 1; }
.sf-rv .stat-item .sub { font-size: 10px; color: var(--muted2); margin-top: 3px; }

/* Colour badges on stat values (matches HTML reference) */
.sf-rv .c-green {
  color: var(--lime2);
  background: var(--lime-bg);
  padding: 2px 8px; border-radius: 6px; display: inline-block;
}
.sf-rv .c-red {
  color: var(--ruby);
  background: var(--ruby-bg);
  padding: 2px 8px; border-radius: 6px; display: inline-block;
}
.sf-rv .c-gold {
  color: var(--gold2);
  background: var(--gold-bg);
  padding: 2px 8px; border-radius: 6px; display: inline-block;
}
.sf-rv .c-orange { color: var(--orange); }


/* ══════════════════════════════════════════════════════════
   CTA EMBEDS  (RTP Analyzer, Volatility Matcher, Inline Casino)
   ══════════════════════════════════════════════════════════ */
.sf-rv .cta-rtp {
  background: linear-gradient(135deg,var(--plum2),var(--plum));
  border-radius: var(--r2); padding: 18px; margin-top: 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.sf-rv .cta-rtp-text strong { display: block; color: #fff; font-size: 14px; margin-bottom: 3px; }
.sf-rv .cta-rtp-text p { font-size: 12px; color: rgba(255,255,255,.65); margin: 0; }
.sf-rv .cta-rtp .btn-gold {
  background: var(--gold); color: var(--plum2); padding: 10px 16px;
  border-radius: 9px; font-weight: 700; font-size: 13px; white-space: nowrap;
  flex-shrink: 0; transition: background .15s; cursor: pointer;
}
.sf-rv .cta-rtp .btn-gold:hover { background: var(--gold2); color: #fff; }

.sf-rv .cta-vol {
  background: var(--orange-bg); border: 1.5px solid rgba(255,107,43,.2);
  border-radius: var(--r2); padding: 14px 16px; margin-top: 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sf-rv .cta-vol-text { flex: 1; min-width: 160px; }
.sf-rv .cta-vol-text strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.sf-rv .cta-vol-text span { font-size: 12px; color: var(--muted); }
.sf-rv .btn-orange-sm {
  background: var(--orange); color: #fff; padding: 9px 16px;
  border-radius: 8px; font-weight: 700; font-size: 13px; white-space: nowrap;
  flex-shrink: 0; transition: background .15s; cursor: pointer;
}
.sf-rv .btn-orange-sm:hover { background: var(--orange2); }

.sf-rv .inline-casino {
  background: linear-gradient(135deg,var(--plum2),var(--plum));
  border-radius: var(--r2); padding: 16px; margin: 20px 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sf-rv .inline-casino-logo {
  width: 68px; height: 34px; background: rgba(255,255,255,.15); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: rgba(255,255,255,.8); flex-shrink: 0;
}
.sf-rv .inline-casino-info { flex: 1; min-width: 140px; }
.sf-rv .inline-casino-info strong { display: block; color: #fff; font-size: 14px; margin-bottom: 2px; }
.sf-rv .inline-casino-info span { font-size: 12px; color: rgba(255,255,255,.6); }
.sf-rv .btn-claim-sm {
  background: var(--orange); color: #fff; padding: 10px 16px;
  border-radius: 9px; font-weight: 700; font-size: 13px; white-space: nowrap;
  flex-shrink: 0; transition: background .15s;
}
.sf-rv .btn-claim-sm:hover { background: var(--orange2); }


/* ══════════════════════════════════════════════════════════
   PROS / CONS
   ══════════════════════════════════════════════════════════ */
.sf-rv .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
@media (max-width: 480px) { .sf-rv .pros-cons { grid-template-columns: 1fr; } }
.sf-rv .pc-col h3 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.sf-rv .pc-col.pros h3 { color: var(--lime2); }
.sf-rv .pc-col.cons h3 { color: var(--ruby); }
.sf-rv .pc-col ul { display: flex; flex-direction: column; gap: 7px; }
.sf-rv .pc-col li { font-size: 13px; display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.sf-rv .pc-col.pros li::before { content: '✓'; color: var(--lime2); font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.sf-rv .pc-col.cons li::before { content: '✗'; color: var(--ruby); font-weight: 800; flex-shrink: 0; margin-top: 1px; }


/* ══════════════════════════════════════════════════════════
   DEMO CARD
   ══════════════════════════════════════════════════════════ */
.sf-rv .demo-compact-card {
  background: var(--card-bg); border: 1px solid var(--g200);
  border-radius: var(--r); padding: 20px; margin: 0 0 20px;
}
.sf-rv .demo-compact-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; gap: 16px; flex-wrap: wrap;
}
.sf-rv .demo-compact-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--text);
}
.sf-rv .demo-compact-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.sf-rv .demo-compact-pill {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px;
}
.sf-rv .demo-compact-pill.lime  { color: var(--lime2); background: var(--lime-bg); }
.sf-rv .demo-compact-pill.orange { color: var(--orange2); background: var(--orange-bg); }
.sf-rv .demo-compact-pill.gold  { color: var(--gold2); background: var(--gold-bg); }
.sf-rv .demo-compact-frame {
  border-radius: 12px; overflow: hidden; background: #000;
  aspect-ratio: 16/9; margin-bottom: 16px;
}
.sf-rv .demo-compact-iframe { width: 100%; height: 100%; border: none; }
.sf-rv .demo-compact-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding-top: 12px; border-top: 1px solid var(--g200); flex-wrap: wrap;
}
.sf-rv .demo-compact-text { font-size: 13px; color: var(--muted); }
.sf-rv .demo-compact-btn {
  font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 10px;
  background: var(--orange); color: #fff; transition: all .2s; white-space: nowrap;
}
.sf-rv .demo-compact-btn:hover { background: var(--orange2); transform: translateY(-1px); }


/* ══════════════════════════════════════════════════════════
   COMPARISON TOOL
   ══════════════════════════════════════════════════════════ */
.sf-rv .comparison-tool-redesigned {
  background: var(--card-bg); border: 1px solid var(--g200);
  border-radius: var(--r2); overflow: hidden; margin: 0 0 20px;
}
.sf-rv .comparison-tool-title {
  font-size: 17px; font-weight: 800; color: var(--text);
  padding: 20px 24px 12px; border-bottom: 1.5px solid var(--g200);
  display: flex; align-items: center; gap: 8px;
}
.sf-rv .comparison-tool-intro {
  font-size: 13px; color: var(--muted); padding: 12px 24px;
  border-bottom: 1px solid var(--g200);
}
.sf-rv .comparison-picker {
  display: grid; grid-template-columns: 1fr 44px 1fr;
  background: var(--off);
}
.sf-rv .comparison-slot-panel {
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 18px 14px 14px; position: relative;
}
.sf-rv .comparison-slot-panel:first-child { border-right: 1px solid var(--g200); }
.sf-rv .comparison-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
}
.sf-rv .comparison-badge.a { background: #ede8f9; color: #533fa0; border: 1px solid #c4b8f0; }
.sf-rv .comparison-badge.b { background: var(--orange-bg); color: var(--orange2); border: 1px solid rgba(255,107,43,.3); }
.sf-rv .comparison-thumb {
  width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.sf-rv .comparison-thumb.a { background: linear-gradient(145deg,#5A1880,#2D0840); }
.sf-rv .comparison-thumb.b { background: linear-gradient(145deg,#1a3a5a,#0d1f33); }
.sf-rv .comparison-slot-name { font-size: 13px; font-weight: 800; color: var(--text); text-align: center; max-width: 130px; }
.sf-rv .comparison-slot-meta { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.sf-rv .comparison-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; background: var(--card-bg); border: 1px solid var(--g200); border-radius: 5px; color: var(--muted); }
.sf-rv .comparison-pill.lime { color: var(--lime2); background: var(--lime-bg); border-color: transparent; }
.sf-rv .comparison-select { width: 100%; font-size: 12px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--g200); background: var(--card-bg); color: var(--text); cursor: pointer; font-family: var(--font); }
.sf-rv .comparison-vs { display: flex; align-items: center; justify-content: center; }
.sf-rv .comparison-vs-badge { width: 34px; height: 34px; border-radius: 50%; background: var(--plum); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sf-rv .comparison-metrics { border-top: 1px solid var(--g200); }
.sf-rv .comparison-metric-row {
  display: grid; grid-template-columns: 130px 1fr 1fr;
  border-bottom: 1px solid var(--g200); min-height: 48px;
}
.sf-rv .comparison-metric-row:last-child { border-bottom: none; }
.sf-rv .comparison-metric-label {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  font-size: 12px; color: var(--muted); border-right: 1px solid var(--g200);
  background: var(--off); font-weight: 700;
}
.sf-rv .comparison-metric-value {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 12px; font-size: 13px; font-weight: 700; text-align: center; gap: 2px;
  border-right: 1px solid var(--g200); color: var(--text);
}
.sf-rv .comparison-metric-value:last-child { border-right: none; }
.sf-rv .comparison-metric-value.win { background: var(--lime-bg); color: var(--lime2); }
.sf-rv .comparison-win-badge { font-size: 9px; font-weight: 800; color: var(--lime2); background: rgba(123,200,50,.15); border-radius: 4px; padding: 1px 5px; }

/* comp-verdict / cv-item (original HTML pattern kept) */
.sf-rv .comp-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.sf-rv .cv-item { background: var(--off); border-radius: 10px; padding: 12px; text-align: center; }
.sf-rv .cv-item.winner { background: var(--lime-bg); border: 1.5px solid rgba(94,160,32,.25); }
.sf-rv .cv-item label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); display: block; margin-bottom: 4px; }
.sf-rv .cv-item strong { font-size: 13px; font-weight: 800; display: block; margin-bottom: 3px; }
.sf-rv .cv-item.winner strong { color: var(--lime2); }
.sf-rv .cv-item p { font-size: 11px; color: var(--muted); margin-top: 3px; }
.sf-rv .comp-verdict-section { padding-top: 14px; border-top: 1px solid var(--g200); }

/* Comparison search */
.sf-rv .comparison-search-wrapper { position: relative; margin-top: 12px; }
.sf-rv .comparison-search-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 8px; }
.sf-rv .comparison-search-field-wrap { position: relative; }
.sf-rv .comparison-search-field-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; pointer-events: none; opacity: .5; }
.sf-rv .comparison-search-input { width: 100%; padding: 10px 12px 10px 32px; font-size: 13px; font-weight: 500; color: var(--text); background: var(--off); border: 1.5px solid var(--plum); border-radius: 8px; transition: all .2s; margin-bottom: 8px; box-sizing: border-box; }
.sf-rv .comparison-search-input:focus { outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(74,16,96,.1); }
.sf-rv .comparison-select-wrapper { position: relative; }

@media (max-width: 640px) {
  .sf-rv .comparison-picker { grid-template-columns: 1fr; }
  .sf-rv .comparison-slot-panel:first-child { border-right: none; border-bottom: 1px solid var(--g200); }
  .sf-rv .comparison-metric-row { grid-template-columns: 96px 1fr 1fr; }
  .sf-rv .comparison-metric-label { padding: 8px 8px; font-size: 11px; line-height: 1.25; }
  .sf-rv .comp-verdict { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════
   RELATED SLOTS / SMART ALTERNATIVES
   ══════════════════════════════════════════════════════════ */
.sf-rv .related-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (min-width: 600px) { .sf-rv .related-grid { grid-template-columns: repeat(4,1fr); } }

.sf-rv .related-card {
  background: var(--off); border-radius: 12px; overflow: hidden;
  border: 1.5px solid var(--g200); transition: all .15s; display: flex; flex-direction: column;
}
.sf-rv .related-card:hover { border-color: var(--orange); box-shadow: 0 4px 14px rgba(255,107,43,.1); }
.sf-rv .related-thumb {
  aspect-ratio: 4/3; background: linear-gradient(135deg,var(--plum),var(--plum3));
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  text-decoration: none; transition: opacity .15s; overflow: hidden;
}
.sf-rv .related-thumb:hover { opacity: .9; }
.sf-rv .related-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.sf-rv .related-body { padding: 10px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.sf-rv .related-name { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--text); transition: color .15s; }
.sf-rv .related-name:hover { color: var(--orange); }
.sf-rv .related-pills { display: flex; gap: 3px; flex-wrap: wrap; }
.sf-rv .rpill { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: #fff; color: var(--muted); border: 1px solid var(--g200); }
.sf-rv .rpill.score { background: var(--orange-bg); color: var(--orange); border-color: transparent; }
.sf-rv .related-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--g200); }
.sf-rv .related-review-btn { flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 7px 6px; border-radius: 7px; background: var(--off); color: var(--text); border: 1.5px solid var(--g200); transition: all .15s; white-space: nowrap; }
.sf-rv .related-review-btn:hover { border-color: var(--plum); color: var(--plum); background: #fff; }
.sf-rv .related-play-btn { flex: 1; text-align: center; font-size: 11px; font-weight: 800; padding: 7px 6px; border-radius: 7px; background: var(--orange); color: #fff; box-shadow: 0 2px 8px rgba(255,107,43,.35); transition: background .15s; white-space: nowrap; }
.sf-rv .related-play-btn:hover { background: var(--orange2); }

/* Smart alternatives intent label */
.sf-rv .sa-grid { grid-template-columns: repeat(2,1fr); }
@media (min-width: 600px) { .sf-rv .sa-grid { grid-template-columns: repeat(4,1fr); } }
.sf-rv .sa-intent-label {
  background: var(--plum2); color: rgba(255,255,255,.85);
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  padding: 5px 10px; text-align: center;
}

/* Smart alternatives section header */
.sf-rv .smart-alternatives-section {
  background: var(--off); border: 1px solid var(--g200); border-radius: 16px;
  padding: 28px; margin: 0 0 20px;
}
.sf-rv .smart-alternatives-header { margin-bottom: 20px; }
.sf-rv .smart-alternatives-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 6px;
}
.sf-rv .smart-alternatives-icon { font-size: 22px; color: var(--plum); }
.sf-rv .smart-alternatives-subtitle { font-size: 13px; color: var(--muted); line-height: 1.6; }


/* ══════════════════════════════════════════════════════════
   FINAL VERDICT
   ══════════════════════════════════════════════════════════ */
.sf-rv .final-verdict-premium {
  background: linear-gradient(145deg,var(--plum2) 0%,var(--plum) 100%);
  border-radius: var(--r); padding: 32px; margin-bottom: 28px;
  box-shadow: 0 8px 32px rgba(74,16,96,.3);
}
.sf-rv .fvp-header { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: left; margin-bottom: 20px; }
.sf-rv .fvp-score-badge { display: flex; flex-direction: row; align-items: center; gap: 16px; }
.sf-rv .fvp-score-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.sf-rv .fvp-score-ring svg { display: block; width: 80px; height: 80px; }
.sf-rv .fvp-score-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sf-rv .fvp-score-num { font-size: 24px; font-weight: 800; color: #fff; line-height: 1; }
.sf-rv .fvp-score-denom { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.45); line-height: 1; margin-top: 1px; }
.sf-rv .fvp-score-meta { display: flex; flex-direction: column; gap: 4px; }
.sf-rv .fvp-score-label { font-size: 16px; font-weight: 800; color: var(--lime); line-height: 1.1; }
.sf-rv .fvp-ranking { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .05em; }
.sf-rv .fvp-body { background: rgba(255,255,255,.08); border-radius: 16px; padding: 24px; }
.sf-rv .fvp-summary { font-size: 14px; font-weight: 600; line-height: 1.7; text-align: center; color: rgba(255,255,255,.9); margin-bottom: 20px; }
.sf-rv .fvp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.sf-rv .fvp-col-header { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); margin-bottom: 10px; }
.sf-rv .fvp-list { list-style: none; }
.sf-rv .fvp-list li { font-size: 13px; font-weight: 500; line-height: 1.5; margin-bottom: 7px; color: rgba(255,255,255,.9); display: flex; align-items: flex-start; gap: 7px; }
.sf-rv .fvp-check { color: var(--lime); font-weight: 700; }
.sf-rv .fvp-cross { color: rgba(255,107,43,.9); font-weight: 700; }
.sf-rv .fvp-cta {
  display: block; width: 100%;
  background: var(--gold); color: var(--plum2);
  padding: 14px 24px; border-radius: 12px;
  font-size: 15px; font-weight: 700; text-align: center;
  box-shadow: 0 6px 20px rgba(255,184,0,.4); transition: all .15s;
}
.sf-rv .fvp-cta:hover { background: var(--gold2); transform: translateY(-1px); }

@media (max-width: 560px) {
  .sf-rv .fvp-score-badge { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  .sf-rv .final-verdict-premium { padding: 24px 18px; }
  .sf-rv .fvp-body { padding: 18px 14px; }
  .sf-rv .fvp-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* ══════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Column stretches to match main-col height; only the Top Casino card sticks. */
  .sf-rv .sidebar-col { align-self: stretch; }
  .sf-rv .sidebar-col .sb-card--top-casino { position: sticky; top: 104px; }
}
.sf-rv .sb-card {
  background: var(--card-bg); border: 1.5px solid var(--g200);
  border-radius: var(--r2); overflow: hidden; margin-bottom: 14px;
}
.sf-rv .sb-card-hd {
  background: var(--plum2); color: #fff;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  padding: 10px 14px; display: flex; align-items: center; gap: 6px;
}
.sf-rv .sb-facts dl { padding: 2px 0; }
.sf-rv .sf-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--g200); }
.sf-rv .sf-row:last-child { border-bottom: none; }
.sf-rv .sf-row dt { font-size: 12px; color: var(--muted); font-weight: 600; }
.sf-rv .sf-row dd { font-size: 12px; font-weight: 700; text-align: right; }
.sf-rv .sf-row dd.g { color: var(--lime2); }
.sf-rv .sf-row dd.r { color: var(--ruby); }
.sf-rv .sf-row dd.a { color: var(--gold2); }
.sf-rv .sb-casino { padding: 12px 14px; }
.sf-rv .sb-casino-logo { width: 100%; height: 40px; background: var(--off); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--muted); margin-bottom: 10px; }
.sf-rv .sb-bonus { font-size: 17px; font-weight: 800; margin-bottom: 3px; }
.sf-rv .sb-bonus small { font-size: 11px; font-weight: 600; color: var(--muted); }
.sf-rv .sb-meta { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.sf-rv .sb-meta-row { display: flex; justify-content: space-between; font-size: 12px; align-items: center; }
.sf-rv .sb-meta-row span:first-child { color: var(--muted); }
.sf-rv .sb-meta-row span:last-child { font-weight: 700; }
.sf-rv .sb-meta-row .g { color: var(--lime2); }
.sf-rv .sb-cta { display: block; text-align: center; background: var(--orange); color: #fff; padding: 11px; border-radius: 9px; font-weight: 700; font-size: 13px; margin-bottom: 6px; transition: background .15s; }
.sf-rv .sb-cta:hover { background: var(--orange2); }
.sf-rv .sb-disc { font-size: 10px; color: var(--muted2); text-align: center; }
.sf-rv .sb-body { padding: 12px 14px; }
.sf-rv .sb-body p { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.sf-rv .sb-select { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--g200); font-family: var(--font); font-size: 12px; background: #fff; margin-bottom: 8px; color: var(--text); }
.sf-rv .sb-btn { display: block; width: 100%; text-align: center; background: var(--plum); color: #fff; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; transition: background .15s; }
.sf-rv .sb-btn:hover { background: var(--plum3); }
.sf-rv .sb-btn.gold { background: var(--gold-bg); color: var(--gold2); border: 1px solid rgba(255,184,0,.3); }
.sf-rv .sb-btn.gold:hover { background: var(--gold); color: #fff; }
.sf-rv .sb-btn.outline { background: var(--off); color: var(--text); border: 1px solid var(--g200); }
.sf-rv .sb-btn.outline:hover { border-color: var(--orange); color: var(--orange); }


/* ══════════════════════════════════════════════════════════
   MISC BUTTONS
   ══════════════════════════════════════════════════════════ */
.sf-rv .btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--orange); color: #fff; padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 14px rgba(255,107,43,.4); transition: all .15s; }
.sf-rv .btn-primary:hover { background: var(--orange2); transform: translateY(-1px); }
.sf-rv .pill { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: var(--off); color: var(--muted); }
.sf-rv .pill.green { background: var(--lime-bg); color: var(--lime2); }


/* ══════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════ */
.sf-rv .modal-wrap { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.55); align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 600px) { .sf-rv .modal-wrap { align-items: center; padding: 20px; } }
.sf-rv .modal-wrap.open { display: flex; }
.sf-rv .modal { background: #fff; width: 100%; max-width: 480px; border-radius: 20px 20px 0 0; overflow: hidden; max-height: 90vh; overflow-y: auto; }
@media (min-width: 600px) { .sf-rv .modal { border-radius: var(--r); max-height: 80vh; } }
.sf-rv .modal-hd { background: linear-gradient(135deg,var(--plum2),var(--plum)); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; }
.sf-rv .modal-hd h3 { color: #fff; font-size: 16px; font-weight: 800; }
.sf-rv .modal-close { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; border: none; font-family: var(--font); transition: background .15s; }
.sf-rv .modal-close:hover { background: rgba(255,255,255,.25); }
.sf-rv .modal-body { padding: 20px; }
.sf-rv .modal-body p.desc { font-size: 13px; color: var(--muted); margin-bottom: 18px; line-height: 1.6; }
.sf-rv .slider-row { margin-bottom: 14px; }
.sf-rv .slider-lbl { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.sf-rv .slider-lbl span:first-child { color: var(--muted); font-weight: 600; }
.sf-rv .slider-lbl span:last-child { font-weight: 700; color: var(--text); }
.sf-rv input[type="range"] { width: 100%; accent-color: var(--orange); cursor: pointer; }
.sf-rv .rtp-result { background: var(--off); border-radius: 12px; padding: 18px; margin-top: 14px; text-align: center; display: none; }
.sf-rv .rtp-result.show { display: block; }
.sf-rv .rtp-big { font-size: 32px; font-weight: 800; color: var(--plum); letter-spacing: -1px; }
.sf-rv .rtp-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.sf-rv .rtp-range { font-size: 11px; color: var(--muted2); margin-top: 8px; }
.sf-rv .vol-q { margin-bottom: 18px; }
.sf-rv .vol-q label.ql { font-size: 14px; font-weight: 700; display: block; margin-bottom: 10px; }
.sf-rv .vol-opts { display: flex; flex-direction: column; gap: 7px; }
.sf-rv .vol-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--g200); border-radius: 10px; cursor: pointer; transition: all .15s; font-size: 13px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.sf-rv .vol-opt:hover { border-color: var(--orange); background: var(--orange-bg); }
.sf-rv .vol-opt input { accent-color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.sf-rv .vol-result { background: linear-gradient(135deg,var(--plum2),var(--plum)); border-radius: 12px; padding: 18px; text-align: center; display: none; margin-top: 14px; }
.sf-rv .vol-result.show { display: block; }
.sf-rv .vol-result strong { display: block; font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.sf-rv .vol-result p { font-size: 13px; color: rgba(255,255,255,.75); }


/* ══════════════════════════════════════════════════════════
   MOBILE STICKY CTA
   ══════════════════════════════════════════════════════════ */
/* ── Mobile sticky CTA bar ── */
.sf-rv .mobile-cta {
  display: none;
  position: fixed;
  bottom: 56px; left: 0; right: 0;  /* 56px = above the mobile nav bar */
  z-index: 850;                       /* above nav bar (z-index:800) */
  background: var(--dark, #1a0a2e);
  border-top: 2px solid rgba(255,193,7,.25);
  padding: 10px 14px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  align-items: center;
  gap: 10px;
  box-shadow: 0 -6px 28px rgba(0,0,0,.35);
}
@media (max-width: 1023px) { .sf-rv .mobile-cta.visible { display: flex; } }

/* Left side: score pill + info stack */
.sf-rv .mcta-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.sf-rv .mcta-score {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold, #f5a623), #e8920d);
  color: #1a0a2e;
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  padding: 6px 9px;
  line-height: 1;
  letter-spacing: -.01em;
}
.sf-rv .mcta-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sf-rv .mcta-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--gold, #f5a623);
  text-transform: uppercase;
  line-height: 1;
}
.sf-rv .mcta-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.sf-rv .mcta-bonus {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* CTA button */
.sf-rv .mcta-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #FFB800, #FF8C00);
  color: #1a0a2e;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 14px rgba(255,184,0,.4);
  transition: box-shadow .15s, transform .1s;
  line-height: 1.2;
}
.sf-rv .mcta-btn:active {
  transform: scale(.97);
  box-shadow: 0 2px 8px rgba(255,184,0,.3);
}


/* ══════════════════════════════════════════════════════════
   REVIEW BODY (post content)
   ══════════════════════════════════════════════════════════ */
.sf-rv .sf-review-body { line-height: 1.8; font-size: 16px; }
.sf-rv .sf-review-body p { margin-bottom: 14px; }
.sf-rv .sf-review-body h2 { font-size: 22px; font-weight: 800; margin: 36px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--g200); }
.sf-rv .sf-review-body h3 { font-size: 18px; font-weight: 700; margin: 26px 0 12px; }
.sf-rv .sf-review-body ul,.sf-rv .sf-review-body ol { padding-left: 20px; margin: 12px 0; }
.sf-rv .sf-review-body li { margin-bottom: 7px; }
.sf-rv .sf-review-body a { color: var(--plum); text-decoration: underline; }
.sf-rv .sf-review-body a:hover { color: var(--orange); }


/* ══════════════════════════════════════════════════════════
   DISCLOSURE
   ══════════════════════════════════════════════════════════ */
.sf-rv .disclosure {
  background: var(--off); border-top: 1px solid var(--g200);
  padding: 14px 20px; font-size: 11px; color: var(--muted2); text-align: center; line-height: 1.6;
  padding-bottom: calc(14px + env(safe-area-inset-bottom,0));
}
.sf-rv .disclosure a { color: var(--orange); }

/* ── Desktop sticky CTA visibility control ──────────────────
   #sf-sticky-cta renders OUTSIDE .sf-rv (after the closing
   tag). The sidebar casino card handles desktop; .mobile-cta
   handles mobile. This bar is suppressed on ALL viewports.
   ─────────────────────────────────────────────────────────── */
#sf-sticky-cta,
#sf-sticky-cta.sf-sticky-cta--visible {
  display: none !important;
}

/* ---- 2. sf-beauty.css ---- */
/**
 * SlotsFunky — Beauty Layer
 * Version: 8.2.1-beauty
 *
 * Purpose: Visual hierarchy, premium polish, and depth without touching layout.
 * Load AFTER all other CSS (last in the queue).
 *
 * Philosophy: Every section has one job. This file makes that job obvious at a glance.
 * ─ Hero & score   → dominant, anchors the eye
 * ─ Casino tiles   → conversion-focused, feel heavyweight
 * ─ Review content → editorial, airy, readable
 * ─ Sidebar        → utility companion, restrained
 *
 * @package SlotsFunky
 * @version 8.2.1
 */

/* ═══════════════════════════════════════════
   0. DESIGN TOKENS — beauty layer additions
   ═══════════════════════════════════════════ */
.sf-rv {
  /* Premium shadow system */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --shadow-plum: 0 8px 24px rgba(74,16,96,.22);
  --shadow-orange: 0 6px 20px rgba(255,107,43,.28);

  /* Glow effects */
  --glow-lime:  0 0 0 3px rgba(123,200,50,.18);
  --glow-orange: 0 0 0 3px rgba(255,107,43,.16);
  --glow-plum:  0 0 0 3px rgba(74,16,96,.14);

  /* Typography upgrades */
  --fs-hero: clamp(22px, 5vw, 32px);
  --fs-h2: clamp(17px, 2.5vw, 20px);
  --lh-editorial: 1.75;
  --col-width: 66ch;
}

/* ═══════════════════════════════════════════
   1. HERO — Score becomes the dominant object
   ═══════════════════════════════════════════ */

/* Richer gradient + noise texture feel */
.sf-rv .hero {
  background: linear-gradient(
    148deg,
    #1a0328 0%,
    var(--plum2) 30%,
    var(--plum) 65%,
    #5c1480 100%
  );
  padding: 28px 20px 36px;
}

/* Stronger decorative orb */
.sf-rv .hero::after {
  width: 380px;
  height: 380px;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, rgba(255,184,0,.14) 0%, rgba(255,107,43,.06) 40%, transparent 70%);
}

/* Add a second orb bottom-left */
.sf-rv .hero::before {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,32,144,.2) 0%, transparent 70%);
  pointer-events: none;
}

/* Slot thumbnail — premium frame */
.sf-rv .rh-thumb {
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* Title — bigger, tighter tracking */
.sf-rv .rh-title {
  font-size: clamp(20px, 4.5vw, 30px);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 20px;
}

/* Score widget A — make the number dominate */
.sf-rv .sw-a {
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.3);
  border-radius: 18px;
  padding: 12px 20px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-plum);
}

.sf-rv .sw-a-num {
  font-size: 52px;
  letter-spacing: -3px;
  background: linear-gradient(160deg, #fff 40%, rgba(255,255,255,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sf-rv .sw-a-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* RTP / Vol / Win badges — slightly larger */
.sf-rv .rh-badge {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 8px;
  letter-spacing: .02em;
}

/* Primary CTA in hero */
.sf-rv .btn-p {
  box-shadow: var(--shadow-orange);
  padding: 12px 22px;
  font-size: 14px;
  border-radius: 11px;
  letter-spacing: .01em;
}
.sf-rv .btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,107,43,.4);
}

/* Stats bar along hero bottom */
.sf-rv .hero-stats {
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: 24px;
}

.sf-rv .hero-stat-value {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
}


/* ═══════════════════════════════════════════
   2. STATS BAR (below hero)
   ═══════════════════════════════════════════ */

.sf-rv .stats-bar {
  background: #160224;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.sf-rv .sb-val {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.sf-rv .sb-label {
  font-size: 9px;
  letter-spacing: .08em;
}


/* ═══════════════════════════════════════════
   3. QUICK VERDICT — elevated, not flat
   ═══════════════════════════════════════════ */

.sf-rv .qv {
  background: #fff;
  border-bottom: 1px solid var(--g200);
  padding: 24px 20px;
}

.sf-rv .qv-head h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.sf-rv .qv-verdict {
  font-size: 15px;
  line-height: var(--lh-editorial);
  border-left: 3px solid var(--orange);
  background: linear-gradient(90deg, rgba(255,107,43,.04), transparent);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  color: var(--text);
}

/* QV pros/cons columns */
.sf-rv .qv-col {
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.sf-rv .qv-col.g {
  background: linear-gradient(145deg, #f2fbd8, #eaf3de);
  border: 1.5px solid rgba(94,160,32,.25);
}

.sf-rv .qv-col.r {
  background: linear-gradient(145deg, #fff5f4, #fff0ee);
  border: 1.5px solid rgba(204,34,0,.18);
}

.sf-rv .qv-col li {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 3px 0;
}


/* ═══════════════════════════════════════════
   4. JUMP NAV — sticky icon+label tab bar
   ═══════════════════════════════════════════ */

/* Re-declare sticky here so this file can't suppress it */
.sf-rv .jumpnav {
  position: sticky;
  top: 44px;        /* #sf-header = sf-nav-inner = 44px (ux-improvements.css) */
  overflow: visible; /* MUST be visible — overflow:auto kills sticky */
  background: #fff;
  border-bottom: 2px solid var(--g200);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  z-index: 100;
}

.sf-rv .jnav-link {
  font-size: 13px;
  font-weight: 700;
  padding: 13px 16px;
  letter-spacing: .01em;
  transition: all .12s ease;
}

.sf-rv .jnav-link:hover,
.sf-rv .jnav-link.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}


/* ═══════════════════════════════════════════
   5. AUTHOR STRIP — editorial authority
   ═══════════════════════════════════════════ */

.sf-rv .author-section {
  background: var(--off);
  padding: 16px 20px;
}

.sf-rv .author-wrap {
  box-shadow: var(--shadow-sm);
  border-radius: 14px;
}

.sf-rv .author-av {
  background: linear-gradient(135deg, var(--plum), var(--plum3));
  box-shadow: 0 4px 12px rgba(74,16,96,.3);
}

.sf-rv .author-name-link {
  font-size: 15px;
  font-weight: 800;
}

.sf-rv .rp-step {
  border-radius: 10px;
  border: 1px solid var(--g200);
  background: #fff;
  transition: box-shadow .15s;
}
.sf-rv .rp-step:hover {
  box-shadow: var(--shadow-sm);
}


/* ═══════════════════════════════════════════
   6. CASINO TILES — strongest conversion module
   ═══════════════════════════════════════════ */

.sf-rv .casinos-section {
  background: linear-gradient(180deg, #fff 0%, var(--off) 100%);
  padding: 24px 20px 28px;
  border-bottom: 1px solid var(--g200);
}

.sf-rv .section-hd h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Casino tile — elevated shadow, more breathing room */
.sf-rv .cc2 {
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
  border: 1px solid var(--g200);
}

.sf-rv .cc2:hover {
  box-shadow: 0 8px 28px rgba(255,107,43,.14), 0 2px 8px rgba(0,0,0,.06);
  border-color: rgba(255,107,43,.35);
  transform: translateY(-2px);
}

/* Gold border top — extra weight for #1 casino */
.sf-rv .cc2.top {
  border: 2px solid var(--gold2);
  box-shadow: 0 6px 24px rgba(255,184,0,.18), var(--shadow-sm);
}

/* Rank col */
.sf-rv .cc2-rank {
  background: var(--off);
  font-size: 13px;
  font-weight: 800;
}

/* Casino name */
.sf-rv .cc2-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Bonus amount — make it pop */
.sf-rv .cc2-bonus {
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 800;
  color: var(--orange);
  letter-spacing: -.02em;
}

/* CTA button */
.sf-rv .btn-o {
  font-size: 13px;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(255,107,43,.28);
  letter-spacing: .01em;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.sf-rv .btn-o:hover {
  background: var(--orange2);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(255,107,43,.35);
}


/* ═══════════════════════════════════════════
   7. MAIN CONTENT CARDS — editorial, airy
   ═══════════════════════════════════════════ */

.sf-rv .card {
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.07);
  padding: 28px;
  margin-bottom: 20px;
  transition: box-shadow .2s ease;
}

.sf-rv .card:hover {
  box-shadow: var(--shadow-md);
}

.sf-rv .card-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--g200);
  color: var(--text);
}

/* Stats grid inside cards */
.sf-rv .stat-item {
  border-radius: 14px;
  padding: 18px 16px;
  background: linear-gradient(145deg, var(--off), #fff);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--g200);
}
.sf-rv .stat-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--g300);
}

.sf-rv .stat-item dd {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.sf-rv .stat-item dt {
  font-size: 10px;
  letter-spacing: .07em;
  margin-bottom: 8px;
}

/* Review section content */
.sf-rv .sf-review-section {
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.07);
  padding: 28px;
  margin-bottom: 20px;
}

.sf-rv .sf-review-section h2 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  border-bottom: 2px solid var(--g200);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.sf-rv .sf-review-section h3 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: 24px;
  margin-bottom: 12px;
}

.sf-rv .sf-review-section p {
  font-size: 15px;
  line-height: var(--lh-editorial);
  max-width: var(--col-width);
  color: #2a2235;
  margin-bottom: 16px;
}

/* Table inside review — modern dashboard style */
.sf-rv .sf-review-section table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--g200);
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}

.sf-rv .sf-review-section table thead {
  background: linear-gradient(135deg, var(--off), #f0ecdf);
}

.sf-rv .sf-review-section table th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 16px;
  color: var(--muted);
}

.sf-rv .sf-review-section table td {
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.5;
}

.sf-rv .sf-review-section table tr:nth-child(even) td {
  background: rgba(245,242,236,.5);
}

.sf-rv .sf-review-section table tr:hover td {
  background: rgba(74,16,96,.03);
}

/* Pros/cons */
.sf-rv .pros-cons {
  gap: 16px;
  margin-top: 8px;
}

.sf-rv .pc-col {
  border-radius: 12px;
  padding: 18px;
  border: 1px solid var(--g200);
  background: var(--off);
}

.sf-rv .pc-col.pros {
  background: linear-gradient(145deg, #f5fcea, #eaf3de);
  border-color: rgba(94,160,32,.22);
}

.sf-rv .pc-col.cons {
  background: linear-gradient(145deg, #fff7f6, #fff0ee);
  border-color: rgba(204,34,0,.15);
}

.sf-rv .pc-col li {
  font-size: 14px;
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.sf-rv .pc-col li:last-child { border-bottom: none; }


/* ═══════════════════════════════════════════
   8. DEMO CARD — "before you play" cinematic
   ═══════════════════════════════════════════ */

.sf-rv .demo-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,.08);
  margin-bottom: 20px;
}

.sf-rv .demo-primer {
  background: linear-gradient(148deg, #0d0118 0%, #1a0328 40%, #2D0840 100%);
  padding: 24px 28px;
}

.sf-rv .demo-primer-hd {
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.35);
  margin-bottom: 18px;
}

.sf-rv .dp-stat-val {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.sf-rv .demo-primer-note {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.45);
}

.sf-rv .demo-intro {
  background: #fff;
  padding: 24px 28px 18px;
}

.sf-rv .demo-intro-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.sf-rv .demo-intro-copy {
  font-size: 15px;
  line-height: var(--lh-editorial);
  color: var(--muted);
}

.sf-rv .demo-frame-wrap {
  background: #0a0010;
  padding: 0;
}

.sf-rv .demo-frame {
  border-radius: 0;
}

.sf-rv .demo-cta-bar {
  background: linear-gradient(90deg, var(--plum2), #1a0328);
  border-top: none;
  padding: 18px 28px;
}

.sf-rv .demo-cta-text {
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 700;
}

/* Real Money button in demo CTA */
.sf-rv .demo-real-btn .btn-primary,
.sf-rv .demo-real-btn .btn-o,
.sf-rv .demo-real-btn a {
  background: var(--gold);
  color: var(--plum2);
  box-shadow: 0 4px 16px rgba(255,184,0,.4);
  font-size: 14px;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 11px;
  letter-spacing: .01em;
}
.sf-rv .demo-real-btn .btn-primary:hover,
.sf-rv .demo-real-btn a:hover {
  background: var(--gold2);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255,184,0,.5);
  color: #fff;
}


/* ═══════════════════════════════════════════
   9. FINAL VERDICT — the premium crown jewel
   ═══════════════════════════════════════════ */

.sf-rv .final-verdict {
  background: linear-gradient(145deg, #0d0118 0%, var(--plum2) 40%, var(--plum) 100%);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--shadow-plum), 0 24px 60px rgba(74,16,96,.3);
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}

/* Decorative orb inside verdict */
.sf-rv .final-verdict::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,184,0,.12) 0%, transparent 70%);
  pointer-events: none;
}

.sf-rv .fv-score-num {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -4px;
  background: linear-gradient(160deg, #fff 50%, rgba(255,255,255,.6));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sf-rv .fv-score-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sf-rv .fv-score-bar {
  width: 88px;
  height: 6px;
}

.sf-rv .fv-summary {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  color: rgba(255,255,255,.9);
}

.sf-rv .fv-cta {
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(255,107,43,.45);
  letter-spacing: .01em;
}
.sf-rv .fv-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,107,43,.55);
}


/* ═══════════════════════════════════════════
   10. COMPARISON TOOL v2 — data dashboard
   ═══════════════════════════════════════════ */

.sf-rv .comp2-card {
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
}

.sf-rv .comp2-card > .card-title {
  font-size: 17px;
  font-weight: 800;
}

.sf-rv .comp2-picker {
  background: linear-gradient(145deg, var(--off), #f0ecdf);
}

.sf-rv .comp2-slot-thumb {
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.sf-rv .comp2-metric-row.score-row {
  background: linear-gradient(135deg, rgba(74,16,96,.06), rgba(255,184,0,.04));
}

.sf-rv .comp2-score-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.sf-rv .comp2-metric-val.winner {
  background: linear-gradient(135deg, rgba(123,200,50,.12), rgba(123,200,50,.06));
}

.sf-rv .comp2-winner-card {
  background: linear-gradient(148deg, #0d0118 0%, var(--plum2) 50%, var(--plum) 100%);
  padding: 24px 28px;
}

.sf-rv .comp2-winner-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.sf-rv .comp2-winner-cta {
  box-shadow: var(--shadow-orange);
  padding: 12px 24px;
  font-size: 13px;
}


/* ═══════════════════════════════════════════
   11. SIDEBAR — precision utility panel
   ═══════════════════════════════════════════ */

.sf-rv .sb-card {
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  margin-bottom: 16px;
  transition: box-shadow .2s;
}
.sf-rv .sb-card:hover {
  box-shadow: var(--shadow-md);
}

.sf-rv .sb-card-hd {
  background: linear-gradient(90deg, var(--plum2), #25063d);
  font-size: 10px;
  letter-spacing: .1em;
  padding: 11px 16px;
  font-weight: 800;
}

/* Quick Facts rows */
.sf-rv .sf-row {
  padding: 9px 16px;
}
.sf-rv .sf-row dt {
  font-size: 12px;
  color: var(--muted);
}
.sf-rv .sf-row dd {
  font-size: 12px;
  font-weight: 800;
}

/* Sidebar bonus */
.sf-rv .sb-bonus {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--orange);
}

.sf-rv .sb-cta {
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  padding: 12px;
  box-shadow: 0 3px 12px rgba(255,107,43,.3);
  letter-spacing: .01em;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.sf-rv .sb-cta:hover {
  background: var(--orange2);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(255,107,43,.38);
}

/* Top Casino sidebar widget — tighter, more premium spacing & type */
.sf-rv .sb-casino {
  padding: 16px 18px;
}

.sf-rv .sb-casino-logo {
  height: 34px;
  margin-bottom: 12px;
  background: var(--off);
  border: 1px solid var(--g200);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--plum);
}

.sf-rv .sb-bonus {
  margin-bottom: 2px;
  line-height: 1.25;
}

.sf-rv .sb-bonus small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.sf-rv .sb-meta {
  margin: 14px 0;
  padding-top: 6px;
  gap: 0;
  border-top: 1px solid var(--g200);
}

.sf-rv .sb-meta-row {
  padding: 8px 2px;
  border-bottom: 1px solid var(--g200);
}

.sf-rv .sb-meta-row:last-child {
  border-bottom: none;
}

.sf-rv .sb-meta-row span:first-child {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted2);
}

.sf-rv .sb-meta-row span:last-child {
  font-size: 13px;
}

.sf-rv .sb-disc {
  margin-top: 10px;
  letter-spacing: .03em;
}

/* Sidebar comparison select */
.sf-rv .sb-select {
  border-radius: 10px;
  border: 1.5px solid var(--g200);
  font-size: 13px;
  padding: 10px 12px;
  transition: border-color .15s;
}
.sf-rv .sb-select:focus {
  outline: none;
  border-color: var(--plum);
  box-shadow: var(--glow-plum);
}

.sf-rv .sb-btn {
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  padding: 11px;
}
.sf-rv .sb-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}


/* ═══════════════════════════════════════════
   12. RELATED SLOTS — discovery rhythm
   ═══════════════════════════════════════════ */

.sf-rv .related-card {
  border-radius: 14px;
  border: 1.5px solid var(--g200);
  box-shadow: var(--shadow-sm);
  transition: all .2s ease;
}
.sf-rv .related-card:hover {
  border-color: var(--orange);
  box-shadow: 0 8px 24px rgba(255,107,43,.14);
  transform: translateY(-4px);
}

.sf-rv .related-thumb {
  border-radius: 0;
}

.sf-rv .related-name {
  font-size: 13px;
  font-weight: 800;
}

.sf-rv .related-play-btn {
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(255,107,43,.3);
}


/* ═══════════════════════════════════════════
   13. SMART ALTERNATIVES
   ═══════════════════════════════════════════ */

.sf-rv .smart-alternatives-section {
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  padding: 32px;
}

.sf-rv .smart-alternatives-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.sf-rv .smart-alternative-card {
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: all .25s ease;
}
.sf-rv .smart-alternative-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--plum3);
}

.sf-rv .smart-card-reason {
  border-left: 3px solid var(--plum3);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  background: linear-gradient(90deg, rgba(74,16,96,.04), transparent);
}

.sf-rv .smart-card-cta {
  border-radius: 11px;
  box-shadow: var(--shadow-plum);
  font-size: 14px;
  font-weight: 800;
}


/* ═══════════════════════════════════════════
   14. INLINE CALLOUTS & CTAS
   ═══════════════════════════════════════════ */

/* RTP CTA block */
.sf-rv .cta-rtp {
  border-radius: 16px;
  padding: 22px 24px;
  background: linear-gradient(148deg, #1a0328, var(--plum2), var(--plum));
  box-shadow: var(--shadow-plum);
}

.sf-rv .cta-rtp .btn-gold {
  border-radius: 10px;
  font-weight: 800;
  padding: 12px 20px;
  box-shadow: 0 4px 14px rgba(255,184,0,.4);
}

/* Warning / info boxes */
.sf-rv .sf-rg-warning {
  border-radius: 12px;
  padding: 18px 20px;
}

.sf-rv .sf-rg-warning-box {
  border-radius: 12px;
  padding: 18px 20px;
}

/* Inline casino embed */
.sf-rv .inline-casino {
  border-radius: 16px;
  box-shadow: var(--shadow-plum);
  padding: 20px;
  background: linear-gradient(148deg, #1a0328, var(--plum2), var(--plum));
}


/* ═══════════════════════════════════════════
   15. MOBILE STICKY CTA
   ═══════════════════════════════════════════ */

.sf-rv .mobile-cta {
  /* sf-beauty: border/shadow only — base rule (section 1) sets the correct dark background.
     Removed: background:rgba(255,255,255,.97) — was making the bar invisible (white on dark text).
     Removed: backdrop-filter:blur — creates iOS Safari stacking context, hides bar after scroll. */
  border-top: 2px solid rgba(255, 193, 7, .25);
  box-shadow: 0 -6px 28px rgba(0,0,0,.35);
}

.sf-rv .mcta-btn {
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: var(--shadow-orange);
}

.sf-rv .mcta-title {
  font-size: 13px;
  font-weight: 800;
}


/* ═══════════════════════════════════════════
   16. MODALS — polished surface
   ═══════════════════════════════════════════ */

.sf-rv .modal {
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.25);
}

.sf-rv .modal-hd {
  background: linear-gradient(135deg, var(--plum2), var(--plum));
  padding: 20px 24px;
}

.sf-rv .modal-hd h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.sf-rv .modal-close {
  border-radius: 50%;
  width: 34px;
  height: 34px;
}

.sf-rv .rtp-result {
  border-radius: 14px;
}

.sf-rv .rtp-big {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1.5px;
}


/* ═══════════════════════════════════════════
   17. TYPOGRAPHY REFINEMENTS (global within sf-rv)
   ═══════════════════════════════════════════ */

/* Comfortable body text */
.sf-rv {
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tighter heading tracking */
.sf-rv h1, .sf-rv h2, .sf-rv h3 {
  letter-spacing: -.02em;
}

/* Review body copy — editorial width */
.sf-rv .sf-review-body p {
  font-size: 15px;
  line-height: var(--lh-editorial);
  max-width: var(--col-width);
  color: #26203a;
}

.sf-rv .sf-review-body h2 {
  font-size: 19px;
  font-weight: 800;
  margin-top: 32px;
}

.sf-rv .sf-review-body h3 {
  font-size: 16px;
  font-weight: 800;
  margin-top: 24px;
}

/* Gradient color helpers — more vivid, with pill shape */
.sf-rv .c-green {
  background: linear-gradient(90deg, #e5f2ce, #d9edbc);
  color: #3a5e14;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}
.sf-rv .c-red {
  background: linear-gradient(90deg, #fde9e7, #fddbd9);
  color: #a32200;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}
.sf-rv .c-gold {
  background: linear-gradient(90deg, #fff2cc, #ffe9a8);
  color: #8a6200;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}


/* ═══════════════════════════════════════════
   18. MICRO-INTERACTIONS & TRANSITIONS
   ═══════════════════════════════════════════ */

/* Smooth page-wide transitions for interactive elements */
.sf-rv a,
.sf-rv button {
  transition: color .15s ease, background .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .12s ease;
}

/* Focus rings — accessible + on-brand */
.sf-rv a:focus-visible,
.sf-rv button:focus-visible,
.sf-rv select:focus-visible,
.sf-rv input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Scroll anchor offset (sticky jump nav) */
.sf-rv [id] {
  scroll-margin-top: 112px;
}


/* ═══════════════════════════════════════════
   19. DISCLOSURE FOOTER
   ═══════════════════════════════════════════ */

.sf-rv .disclosure {
  background: var(--off);
  font-size: 11px;
  line-height: 1.65;
  color: var(--muted2);
  padding: 16px 20px;
}

.sf-rv .disclosure a {
  color: var(--plum);
  font-weight: 600;
}


/* ═══════════════════════════════════════════
   20. RESPONSIVE — keep polish on mobile
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
  .sf-rv .card { padding: 20px; }
  .sf-rv .sf-review-section { padding: 20px 18px; }
  .sf-rv .demo-intro { padding: 20px 18px 14px; }
  .sf-rv .demo-primer { padding: 20px 18px; }
  .sf-rv .demo-cta-bar { padding: 16px 18px; }
  .sf-rv .final-verdict { padding: 24px 20px; }
  .sf-rv .fv-score-num { font-size: 52px; }
  .sf-rv .casinos-section { padding: 20px 16px 24px; }
  .sf-rv .smart-alternatives-section { padding: 24px 18px; }
  .sf-rv .comp2-winner-card { padding: 20px; }
}

@media (max-width: 480px) {
  .sf-rv .rh-title { font-size: 20px; }
  .sf-rv .sw-a-num { font-size: 44px; }
  .sf-rv .fv-score-num { font-size: 48px; }
  .sf-rv .card { padding: 18px 16px; }
  .sf-rv .sf-review-section { padding: 18px 16px; }
}

/* ═══════════════════════════════════════════
   END sf-beauty.css
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   21. SMART ALTERNATIVES CARD DETAILS
       (beauty polish for the intent-match cards)
   ═══════════════════════════════════════════ */

.sf-rv .smart-card-slot {
  border-radius: 10px;
  border: 1px solid var(--g200);
  transition: border-color .15s, box-shadow .15s;
  text-decoration: none;
}
.sf-rv .smart-card-slot:hover {
  border-color: var(--plum3);
  box-shadow: var(--shadow-sm);
}

.sf-rv .smart-card-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.sf-rv .smart-stat-value {
  font-size: 13px;
  font-weight: 800;
}

.sf-rv .smart-card-header {
  margin-bottom: 14px;
}

.sf-rv .smart-card-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════
   22. COMPARISON TABLE
       (beauty polish for the inline comp tool)
   ═══════════════════════════════════════════ */

.sf-rv .comp-tbl {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 13px;
}

.sf-rv .comp-tbl th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  background: linear-gradient(135deg, var(--off), #f0ecdf);
  padding: 12px 16px;
}

.sf-rv .comp-tbl td {
  padding: 11px 16px;
  font-weight: 700;
}

.sf-rv .comp-win {
  color: var(--lime2);
  font-weight: 800;
}

.sf-rv .comp-verdict {
  margin-top: 16px;
  gap: 12px;
}

.sf-rv .cv-item {
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.sf-rv .cv-item.winner {
  background: linear-gradient(135deg, #edf7d6, #e2f0c8);
  border: 1.5px solid rgba(94,160,32,.28);
  box-shadow: 0 4px 14px rgba(94,160,32,.12);
}

.sf-rv .cv-item.winner strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════
   END additions
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   23. SMART ALTERNATIVES — match related-card
       visual pattern exactly.
       Override the heavy card structure with
       the compact thumbnail+pills+actions
       layout from the prototype's related-card.
   ═══════════════════════════════════════════ */

/* Section wrapper — matches .card */
.sf-rv .smart-alternatives-section {
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

/* Section heading — matches .card-title */
.sf-rv .smart-alternatives-header {
  text-align: left;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--g200);
}

.sf-rv .smart-alternatives-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  justify-content: flex-start;
  margin-bottom: 0;
  color: var(--text);
}

.sf-rv .smart-alternatives-icon {
  font-size: 18px;
}

.sf-rv .smart-alternatives-subtitle {
  display: none; /* subtitle lives in the card header now */
}

/* Grid — 4 columns like related-grid */
.sf-rv .smart-alternatives-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 600px) {
  .sf-rv .smart-alternatives-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Individual card — matches .related-card */
.sf-rv .smart-alternative-card {
  background: var(--off);
  border-radius: 12px;
  border: 1.5px solid var(--g200);
  box-shadow: var(--shadow-sm);
  padding: 0;
  gap: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .2s ease;
}
.sf-rv .smart-alternative-card:hover {
  border-color: var(--orange);
  box-shadow: 0 8px 24px rgba(255,107,43,.14);
  transform: translateY(-4px);
}

/* Card header — becomes the thumbnail like .related-thumb */
.sf-rv .smart-card-header {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--plum), var(--plum3));
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.sf-rv .smart-card-icon {
  font-size: 30px;
  line-height: 1;
}
/* Hide the text title from header — shown below */
.sf-rv .smart-card-title {
  display: none;
}

/* Body area — matches .related-body */
.sf-rv .smart-card-comparison {
  display: none; /* "current vs" row not needed at this size */
}

.sf-rv .smart-card-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: transparent;
  border-radius: 0;
  flex: 1;
  text-decoration: none;
}
.sf-rv .smart-card-slot:hover {
  background: transparent;
}

/* Slot thumbnail inside card-slot — hide, header is the thumb */
.sf-rv .smart-card-thumb {
  display: none;
}

.sf-rv .smart-card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* Slot name — matches .related-name */
.sf-rv .smart-card-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 0;
  transition: color .15s;
}
.sf-rv .smart-card-slot:hover .smart-card-name {
  color: var(--orange);
}

/* Stats — become pills like .related-pills / .rpill */
.sf-rv .smart-card-stats {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  grid-template-columns: unset;
}
.sf-rv .smart-stat-item {
  flex-direction: row;
  gap: 0;
  align-items: center;
  background: #fff;
  border: 1px solid var(--g200);
  border-radius: 5px;
  padding: 2px 6px;
}
.sf-rv .smart-stat-label {
  display: none; /* label shown as pill color, not text */
}
.sf-rv .smart-stat-value {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
}
.sf-rv .smart-stat-value.rtp  { color: var(--lime2); }
.sf-rv .smart-stat-value.vol  { color: var(--ruby); }
.sf-rv .smart-stat-value.max-win { color: var(--gold2); }
.sf-rv .smart-stat-value.score {
  background: var(--orange-bg);
  color: var(--orange);
  border-color: transparent;
  border-radius: 5px;
  padding: 2px 6px;
}

/* Reason text — hide at card size, too small */
.sf-rv .smart-card-reason {
  display: none;
}

/* CTA — becomes two action buttons like .related-actions */
.sf-rv .smart-card-cta {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding: 8px 10px;
  border-top: 1px solid var(--g200);
  background: transparent;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.sf-rv .smart-card-cta:hover {
  background: var(--orange);
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* Mobile: single column */
@media (max-width: 600px) {
  .sf-rv .smart-alternatives-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .sf-rv .smart-card-slot {
    flex-direction: column;
    text-align: left;
  }
}

/* ═══════════════════════════════════════════
   24. CARD CONTENT — adopt prototype's exact
       editorial style for h3 subheadings and
       body copy inside .card
   ═══════════════════════════════════════════ */

/* h3 inside card — matches prototype "Zeus Multiplier" style */
.sf-rv .card h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--plum);
  margin-bottom: 6px;
  margin-top: 20px;
  letter-spacing: -.01em;
}
.sf-rv .card h3:first-child { margin-top: 0; }

/* Body copy — prototype: 14px, 1.75 leading */
.sf-rv .card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 12px;
}
.sf-rv .card p:last-child { margin-bottom: 0; }

/* Inline casino embed */
.sf-rv .inline-casino {
  border-radius: 12px;
  padding: 16px 18px;
  margin: 20px 0;
}
.sf-rv .inline-casino-logo {
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}
.sf-rv .inline-casino-info strong {
  font-size: 14px;
  font-weight: 800;
}
.sf-rv .btn-claim-sm {
  border-radius: 9px;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 16px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   END additions
   ═══════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   AUTHOR SECTION — visual polish v9.1
   ═══════════════════════════════════════════ */

.sf-rv .author-section {
  background: linear-gradient(135deg, #f7f4fc 0%, var(--off) 100%);
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--g200);
}

.sf-rv .author-wrap {
  background: #fff;
  border: 1px solid var(--g200);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(74,16,96,.06), 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}

/* Left pane — gradient accent bar on top */
.sf-rv .author-profile {
  position: relative;
  padding-top: 20px;
}
.sf-rv .author-profile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--plum), var(--orange));
}

/* Avatar — larger, stronger shadow */
.sf-rv .author-av {
  width: 62px;
  height: 62px;
  font-size: 22px;
  background: linear-gradient(135deg, var(--plum2), var(--plum3));
  box-shadow: 0 4px 16px rgba(74,16,96,.35);
  border: 3px solid #fff;
}

/* Verified badge — slightly larger */
.sf-rv .author-verified {
  width: 20px;
  height: 20px;
  font-size: 11px;
  background: var(--lime2);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* Name */
.sf-rv .author-name-link {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Role tag — plum pill */
.sf-rv .author-role-tag {
  font-size: 10px;
  background: linear-gradient(135deg, var(--plum2), var(--plum));
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .04em;
}

/* Stat row */
.sf-rv .author-stats {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  gap: 5px;
}

/* Process pane — subtle off-white bg */
.sf-rv .review-process {
  background: var(--off);
  border-left: 1px solid var(--g200);
}

/* Steps grid — cleaner cards */
.sf-rv .rp-step {
  background: #fff;
  border: 1px solid var(--g200);
  border-radius: 10px;
  padding: 10px 12px;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.sf-rv .rp-step:hover {
  border-color: rgba(74,16,96,.25);
  box-shadow: 0 2px 8px rgba(74,16,96,.07);
}
.sf-rv .rp-icon {
  font-size: 16px;
}
.sf-rv .rp-text {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.4;
}

/* "Read our full review methodology" link */
.sf-rv .rp-method-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  transition: color .15s;
}
.sf-rv .rp-method-link:hover {
  color: var(--orange2);
}


/* ═══════════════════════════════════════════
   READ FULL REVIEW LINK — bold, underlined, smaller
   ═══════════════════════════════════════════ */




/* ═══════════════════════════════════════════
   CASINO TILE CTAs — match homepage exactly
   ═══════════════════════════════════════════ */

/* btn-orange scoped override — removed, casino-tiles-v2.css is source of truth */

/* btn-ghost scoped override — removed, casino-tiles-v2.css is source of truth */



/* ═══════════════════════════════════════════
   TYPOGRAPHY + SPACING UPGRADES — v9.2
   Per audit: body larger, cards more premium,
   section spacing more generous.
   ═══════════════════════════════════════════ */

/* Body text */
.sf-rv {
  font-size: 17px;
  line-height: 1.7;
}

/* Cards — Stripe-style, more depth */
.sf-rv .card {
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.03);
}
.sf-rv .card-title {
  font-size: 19px;
  margin-bottom: 18px;
}
.sf-rv .card p {
  font-size: 16px;
  line-height: 1.8;
}
.sf-rv .card h3 {
  font-size: 17px;
  margin-top: 22px;
}

/* Review body typography */
.sf-rv .sf-review-body {
  font-size: 16px;
  line-height: 1.8;
}
.sf-rv .sf-review-body h2 {
  font-size: 22px;
  margin-top: 36px;
  margin-bottom: 14px;
}
.sf-rv .sf-review-body h3 {
  font-size: 18px;
  margin-top: 26px;
}
.sf-rv .sf-review-body p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}

/* Casino tiles — bigger logos, bolder bonus text (audit item 6) */
.sf-cc-v2-logo {
  width: 60px;
  height: 42px;
}
.sf-cc-v2-bonus {
  font-size: 15px;
  font-weight: 800;
}
/* btn-orange size override — removed, casino-tiles-v2.css is source of truth */


/* ═══════════════════════════════════════════
   COMPARISON VERDICT — correct order + bold link  v9.3
   ═══════════════════════════════════════════ */

/* Slot name — large, prominent, top of card */
.sf-rv .cv-slot-name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}

/* "✓ Best For" label */
.sf-rv .cv-best-for-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lime2);
  margin-bottom: 3px;
}

/* Best-for description text */
.sf-rv .cv-best-for-text {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* "Read Full Review →" — bold, underlined text link */
.sf-rv .cv-review-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  transition: color .15s;
}
.sf-rv .cv-review-link:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}

/* "Compare This Slot" section title — bolder, more presence */
.sf-rv .comparison-tool-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
}


/* ═══════════════════════════════════════════
   ALTERNATIVES CARDS — RTP / Vol / Max Win stats  v9.3
   ═══════════════════════════════════════════ */

/* Replace pill row with a 3-column stat mini-table */
.sf-rv .related-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin: 8px 0;
  background: var(--off);
  border-radius: 8px;
  padding: 8px;
}

.sf-rv .related-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sf-rv .related-stat-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted2);
  line-height: 1;
}

.sf-rv .related-stat-value {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

/* Colour-coded values */
.sf-rv .related-stat-value.rtp      { color: var(--lime2); }
.sf-rv .related-stat-value.max-win  { color: var(--gold2); }
.sf-rv .related-stat-value.vol-high { color: var(--ruby) ; }
.sf-rv .related-stat-value.vol-medium,
.sf-rv .related-stat-value.vol-mid  { color: var(--orange); }
.sf-rv .related-stat-value.vol-low  { color: var(--lime2); }
.sf-rv .related-stat-value.score  { color: var(--plum); }


/* ---- 3. v9-slot-polish.css ---- */
/* ==========================================================================
   SLOTSFUNKY V9.0 — SLOT PAGE VISUAL POLISH
   Scoped entirely inside .sf-rv to prevent cascade bleed.
   Covers: Game frame hero · Glassmorphism spec tiles · Volatility micro-bars
           · Elegant pros/cons · Theater mode dim
   Load order: after single-slot-v6-v9.css
   ========================================================================== */


/* ── 0. LOCAL TOKENS ────────────────────────────────────────────────────── */
.sf-rv {
    --slot-ease:     cubic-bezier(0.25, 1, 0.5, 1);
    --slot-radius:   16px;
    --glass-bg:      rgba(255, 255, 255, 0.03);
    --glass-border:  rgba(255, 255, 255, 0.08);
    --dim-overlay:   rgba(0, 0, 0, 0.55);
}


/* ══════════════════════════════════════════════════════════════════════════
   1. GAME FRAME HERO — Ambient screen-glow container
   ══════════════════════════════════════════════════════════════════════════ */

/* Upgrade the demo card wrapper to a premium theatre frame */
.sf-rv .demo-compact-card {
    border-radius: var(--slot-radius);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    position: relative;
}

/* Ambient glow replaces hard border — mimics screen glare */
.sf-rv .demo-compact-frame {
    position: relative;
    border-radius: var(--slot-radius) var(--slot-radius) 0 0;
    overflow: hidden;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.50),
        0 0  50px rgba(255, 255, 255, 0.03);
}

/* Theater mode removed — overlay was too dark and obscured the game frame */

/* Click-to-play launch placeholder — fills the 16:9 frame until the real
   iframe is created on user intent (see initClickToPlayDemo() in
   js/slot-review.js). High-contrast so it reads clearly above the fold
   without needing the third-party game asset payload to have loaded. */
.sf-rv .demo-compact-launch {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), transparent 60%), #11081d;
    border: none; cursor: pointer; color: #fff;
}
.sf-rv .demo-compact-launch-icon {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--gold, #f6c347); color: #1a0f2e;
    font-size: 22px; transition: transform .2s;
}
.sf-rv .demo-compact-launch:hover .demo-compact-launch-icon { transform: scale(1.08); }
.sf-rv .demo-compact-launch-label {
    font-size: 14px; font-weight: 700; letter-spacing: .01em;
}

/* Subtle scale-in on iframe load */
.sf-rv .demo-compact-iframe {
    transition: transform 0.3s var(--slot-ease);
}
.sf-rv .demo-compact-card:hover .demo-compact-iframe {
    transform: scale(1.005);
}


/* ══════════════════════════════════════════════════════════════════════════
   2. GLASSMORPHISM SPEC TILES — Key Statistics card
   ══════════════════════════════════════════════════════════════════════════ */

/* Upgrade each stat-item to a premium glass badge */
.sf-rv .stat-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition:
        transform   0.2s var(--slot-ease),
        box-shadow  0.2s var(--slot-ease),
        border-color 0.2s var(--slot-ease);
    position: relative;
    overflow: hidden;
}

/* Hover lift */
.sf-rv .stat-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Micro-shimmer on hover */
.sf-rv .stat-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 20%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 80%
    );
    opacity: 0;
    transition: opacity 0.3s;
}
.sf-rv .stat-item:hover::after {
    opacity: 1;
}


/* ── 2a. VOLATILITY MICRO-BAR ───────────────────────────────────────────── */
/*
   Usage: The stat-item for Volatility automatically gets bars injected
   by the JS below. The bars use opacity to avoid new colours.
*/

.sf-rv .vol-bar-track {
    display: flex;
    gap: 3px;
    margin-top: 8px;
}
.sf-rv .vol-bar-segment {
    width: 14px;
    height: 5px;
    border-radius: 3px;
    background: currentColor;
    opacity: 0.2;
    transition: opacity 0.25s var(--slot-ease);
}
.sf-rv .vol-bar-segment.lit {
    opacity: 1;
}
/* Colour classes driven by vol level — no new brand colours, use existing vars */
.sf-rv .vol-bar-track.vol-low    { color: var(--lime2, #4ade80); }
.sf-rv .vol-bar-track.vol-medium { color: var(--gold2, #f6c347); }
.sf-rv .vol-bar-track.vol-high   { color: var(--ruby,  #FF7766); }
.sf-rv .vol-bar-track.vol-extreme{ color: var(--ruby,  #FF7766); }


/* ══════════════════════════════════════════════════════════════════════════
   3. PROS & CONS — Elegant typography, no bold colour boxes
   ══════════════════════════════════════════════════════════════════════════ */

/* Reset the bright coloured column headers to muted elegant labels */
.sf-rv .pc-col h3 {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    opacity: 0.55;
    color: inherit; /* removes the lime2/ruby colouring */
}

/* List items — refined typography, no background boxes */
.sf-rv .pc-col li {
    font-size: 14px;
    line-height: 1.5;
    gap: 10px;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px solid rgba(30, 27, 46, 0.04);
}
.sf-rv .pc-col li:last-child {
    border-bottom: none;
}

/* Pros — checkmark: muted opacity difference, not bright green */
.sf-rv .pc-col.pros li::before {
    content: '✓';
    color: var(--lime2, #4ade80);
    opacity: 0.75;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Cons — dash instead of bold ✗ — subtler, more editorial */
.sf-rv .pc-col.cons li::before {
    content: '–';
    color: var(--muted, rgba(30,27,46,0.45));
    opacity: 0.6;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.3;
}

/* Text itself slightly muted on cons */
.sf-rv .pc-col.cons li {
    color: rgba(30, 27, 46, 0.7);
}



/* ══════════════════════════════════════════════════════════════════════════
   4. AUTHOR SECTION — v9.0 redesign
   ══════════════════════════════════════════════════════════════════════════ */

.sf-rv .author-section-v9 {
  margin: 32px 0;
  width: 100%;
}

.sf-rv .author-premium-card {
  background: #ffffff;
  border: 1px solid var(--g200);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 340px 1fr;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(21, 12, 32, 0.03);
}

/* Left Profile Area */
.sf-rv .author-profile-col {
  background: linear-gradient(135deg, rgba(74, 16, 96, 0.03) 0%, rgba(21, 12, 32, 0.01) 100%);
  border-right: 1px solid var(--g200);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sf-rv .author-avatar-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.sf-rv .author-avatar-frame {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(74, 16, 96, 0.15);
  background: var(--plum);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-rv .author-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-rv .author-initials {
  color: var(--gold);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.sf-rv .author-badge-verified {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: var(--lime);
  color: #ffffff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.sf-rv .author-badge-verified svg {
  width: 12px;
  height: 12px;
}

.sf-rv .author-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted2);
  margin-bottom: 4px;
}

.sf-rv .author-display-name {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}

.sf-rv .author-display-name a {
  color: var(--text);
  transition: color 0.2s ease;
}

.sf-rv .author-display-name a:hover {
  color: var(--plum);
}

.sf-rv .author-title-tag {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 16px;
}

.sf-rv .author-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.sf-rv .trust-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--offwhite);
  color: var(--text);
  border: 1px solid var(--g200);
}

.sf-rv .trust-pill.status-active {
  background: var(--lime-bg);
  color: var(--lime2);
  border-color: rgba(123, 200, 50, 0.2);
}

/* Right Methodology Area */
.sf-rv .review-methodology-col {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sf-rv .methodology-title {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--plum);
  margin-bottom: 20px;
}

.sf-rv .methodology-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}

.sf-rv .methodology-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sf-rv .methodology-icon-box {
  font-size: 20px;
  background: var(--offwhite);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--g200);
}

.sf-rv .methodology-text-content {
  display: flex;
  flex-direction: column;
}

.sf-rv .methodology-text-content strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.sf-rv .methodology-text-content span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.sf-rv .methodology-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--g200);
}

.sf-rv .methodology-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
  text-decoration: none;
}

.sf-rv .methodology-link span {
  transition: transform 0.2s ease;
}

.sf-rv .methodology-link:hover {
  color: var(--orange2);
}

.sf-rv .methodology-link:hover span {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 880px) {
  .sf-rv .author-premium-card {
    grid-template-columns: 1fr;
  }
  .sf-rv .author-profile-col {
    border-right: none;
    border-bottom: 1px solid var(--g200);
    padding: 24px;
  }
  .sf-rv .review-methodology-col {
    padding: 24px;
  }
}

@media (max-width: 520px) {
  .sf-rv .methodology-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---- 4. v9-mobile.css ---- */
/* ==========================================================================
   SLOTSFUNKY V9.6 — SLOT PAGE MOBILE POLISH
   Scoped under .sf-rv. Load order: after v9-slot-polish.css (last in chain).

   Purpose: Tighten padding, font sizes, and layout across all slot page
   components on screens ≤ 639px (phones) and ≤ 480px (small phones).
   Zero !important — all rules win by specificity (media + .sf-rv scope).

   @package SlotsFunky
   @version 9.8.1
   ========================================================================== */


/* ══════════════════════════════════════════════════════════
   TABLES — ALL VIEWPORTS (not mobile-only)
   Tables in WP editor content have no intrinsic width constraint.
   Without this they render at natural content width and bleed
   through the card boundary on narrow screens.
   ══════════════════════════════════════════════════════════ */

/* Scrollable wrapper behaviour: tables scroll horizontally if needed
   rather than busting out of their card container. */
.sf-rv .sf-review-section table,
.sf-rv .sf-review-body table,
.sf-rv .card table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
  display: block;       /* makes overflow-x: auto work on the element itself */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* keep border-radius via border-collapse:separate (default) */
  border-collapse: separate;
  border-spacing: 0;
}

/* Restore thead/tbody/tr as block so display:block on table doesn't
   collapse them — this is the standard pattern for scrollable tables */
.sf-rv .sf-review-section table thead,
.sf-rv .sf-review-section table tbody,
.sf-rv .sf-review-section table tfoot,
.sf-rv .sf-review-body    table thead,
.sf-rv .sf-review-body    table tbody,
.sf-rv .sf-review-body    table tfoot,
.sf-rv .card              table thead,
.sf-rv .card              table tbody,
.sf-rv .card              table tfoot { display: table-header-group; }

.sf-rv .sf-review-section table thead,
.sf-rv .sf-review-body    table thead,
.sf-rv .card              table thead { display: table-header-group; }

.sf-rv .sf-review-section table tbody,
.sf-rv .sf-review-body    table tbody,
.sf-rv .card              table tbody { display: table-row-group; }

.sf-rv .sf-review-section table tr,
.sf-rv .sf-review-body    table tr,
.sf-rv .card              table tr { display: table-row; }

.sf-rv .sf-review-section table th,
.sf-rv .sf-review-section table td,
.sf-rv .sf-review-body    table th,
.sf-rv .sf-review-body    table td,
.sf-rv .card              table th,
.sf-rv .card              table td { display: table-cell; }

/* Tighten cell padding on mobile so more columns fit before scroll kicks in */
@media (max-width: 640px) {
  .sf-rv .sf-review-section table th,
  .sf-rv .sf-review-section table td,
  .sf-rv .sf-review-body    table th,
  .sf-rv .sf-review-body    table td,
  .sf-rv .card              table th,
  .sf-rv .card              table td {
    padding: 9px 10px;
    font-size: 13px;
    white-space: normal;   /* allow wrapping inside cells rather than forcing width */
  }
}


/* ══════════════════════════════════════════════════════════
   PHONE (≤ 639px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Main column: reduce side padding so cards breathe ── */
  .sf-rv .main-col { padding: 16px 12px 0; }

  /* ── Cards: tighten padding + title font ── */
  .sf-rv .card { padding: 18px; margin-bottom: 18px; border-radius: 14px; }
  .sf-rv .card-title { font-size: 16px; margin-bottom: 14px; padding-bottom: 10px; }
  .sf-rv .card p { font-size: 15px; }
  .sf-rv .card h3 { font-size: 16px; margin: 18px 0 8px; }

  /* ── Hero: tighten score widget ── */
  .sf-rv .sw-a { padding: 8px 12px; gap: 10px; }
  .sf-rv .sw-a-num { font-size: 36px; }
  .sf-rv .sw-a-bar-track { width: 80px; }

  /* ── Hero stat bar: smaller type ── */
  .sf-rv .hero-stat-item { padding: 8px 8px; }
  .sf-rv .hero-stat-value { font-size: 12px; }
  .sf-rv .hero-stat-label { font-size: 8px; }

  /* ── Jump nav: tighter tabs ── */
  .sf-rv .jnav-link { font-size: 11px; padding: 10px 9px; gap: 4px; }

  /* ── Quick Verdict: reduce padding ── */
  .sf-rv .qv { padding: 16px; }
  .sf-rv .qv-verdict { font-size: 13px; }

  /* ── Author section: tighter padding ── */
  .sf-rv .author-section { padding: 12px 12px; }
  .sf-rv .author-profile { padding: 14px 16px; }
  .sf-rv .review-process { padding: 14px 16px; }

  /* ── Author premium card (v9 redesign): reduce column padding ── */
  .sf-rv .author-profile-col { padding: 20px 16px; }
  .sf-rv .review-methodology-col { padding: 18px 16px; }
  .sf-rv .author-avatar-frame { width: 72px; height: 72px; }
  .sf-rv .author-display-name { font-size: 17px; }
  .sf-rv .methodology-title { font-size: 13px; margin-bottom: 14px; }
  .sf-rv .methodology-icon-box { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; }
  .sf-rv .methodology-item { gap: 8px; }
  .sf-rv .methodology-text-content strong { font-size: 12px; }
  .sf-rv .methodology-text-content span { font-size: 11px; }
  .sf-rv .methodology-footer { margin-top: 16px; }

  /* ── Key Statistics: reduce padding in tiles ── */
  .sf-rv .stat-item { padding: 12px; border-radius: 10px; }
  .sf-rv .stat-item dt { font-size: 8px; }
  .sf-rv .stat-item dd { font-size: 15px; }

  /* ── CTA blocks ── */
  .sf-rv .cta-rtp { padding: 14px; gap: 10px; }
  .sf-rv .cta-rtp-text strong { font-size: 13px; }
  .sf-rv .cta-vol { padding: 12px; }
  .sf-rv .inline-casino { padding: 14px; gap: 10px; }

  /* ── Demo compact card ── */
  .sf-rv .demo-compact-card { padding: 14px; margin-bottom: 14px; }
  .sf-rv .demo-compact-title { font-size: 14px; }
  .sf-rv .demo-compact-text { font-size: 12px; }
  .sf-rv .demo-compact-btn { padding: 9px 16px; font-size: 12px; }

  /* ── Comparison tool ── */
  .sf-rv .comparison-tool-title { font-size: 15px; padding: 16px 16px 10px; }
  .sf-rv .comparison-tool-intro { padding: 10px 16px; font-size: 12px; }
  .sf-rv .comparison-slot-panel { padding: 14px 10px 12px; }
  .sf-rv .comparison-metric-row { grid-template-columns: 80px 1fr 1fr; min-height: 42px; }
  .sf-rv .comparison-metric-label { padding: 8px; font-size: 10px; gap: 4px; }
  .sf-rv .comparison-metric-value { padding: 6px 8px; font-size: 12px; }
  .sf-rv .comp-verdict { gap: 8px; }
  .sf-rv .comp-verdict-section { padding-top: 12px; }

  /* ── Smart Alternatives section ── */
  .sf-rv .smart-alternatives-section { padding: 20px 16px; margin-bottom: 14px; }
  .sf-rv .smart-alternatives-title { font-size: 16px; }
  .sf-rv .smart-alternatives-subtitle { font-size: 12px; }

  /* ── Final Verdict ── */
  .sf-rv .final-verdict-premium { padding: 20px 14px; margin-bottom: 18px; }
  .sf-rv .fvp-body { padding: 16px 12px; }
  .sf-rv .fvp-score-num { font-size: 20px; }
  .sf-rv .fvp-score-label { font-size: 14px; }
  .sf-rv .fvp-summary { font-size: 13px; margin-bottom: 14px; }
  .sf-rv .fvp-cta { padding: 12px 20px; font-size: 14px; }

  /* ── Section headings ── */
  .sf-rv .section-hd h2 { font-size: 16px; }

  /* ── Sidebar on mobile (below content) ── */
  .sf-rv .sidebar-col { padding: 0 12px 12px; }
  .sf-rv .sb-bonus { font-size: 15px; }

  /* ── Related / Smart grid: ensure consistent spacing ── */
  .sf-rv .related-grid,
  .sf-rv .sa-grid { gap: 8px; }
  .sf-rv .related-body { padding: 8px; gap: 4px; }

  /* ── Section card: casinos ── */
  .sf-rv .casinos-section .sf-inner { padding: 0 12px; }

}


/* ══════════════════════════════════════════════════════════
   SMALL PHONE (≤ 480px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Hero: even tighter ── */
  .sf-rv .rh-title { font-size: clamp(15px, 4vw, 20px); }
  .sf-rv .rh-btns { gap: 6px; }
  .sf-rv .btn-p { padding: 10px 16px; font-size: 13px; }
  .sf-rv .btn-g { padding: 9px 12px; font-size: 13px; }

  /* ── Hero badges ── */
  .sf-rv .rh-badge { font-size: 10px; padding: 4px 8px; }

  /* ── Jump nav: smallest phones — show icons only by collapsing label ── */
  /* Labels still visible but minimal padding */
  .sf-rv .jnav-link { padding: 10px 7px; font-size: 10px; }

  /* ── Stats grid stays 2-col but tiles are smaller ── */
  .sf-rv .stat-item { padding: 10px; }
  .sf-rv .stat-item dd { font-size: 14px; }

  /* ── Author premium card on small phones: single column already (880px break), just tighten ── */
  .sf-rv .author-profile-col { padding: 16px 12px; }
  .sf-rv .review-methodology-col { padding: 14px 12px; }
  .sf-rv .author-avatar-frame { width: 64px; height: 64px; }
  .sf-rv .author-initials { font-size: 22px; }

  /* ── Comparison metric label column: narrower ── */
  .sf-rv .comparison-metric-row { grid-template-columns: 70px 1fr 1fr; }
  .sf-rv .comparison-metric-label { font-size: 9px; padding: 6px; }
  .sf-rv .comparison-metric-value { font-size: 11px; padding: 6px 4px; }

  /* ── Final verdict: single column list ── */
  .sf-rv .fvp-score-ring { width: 64px; height: 64px; }
  .sf-rv .fvp-score-ring svg { width: 64px; height: 64px; }
  .sf-rv .fvp-score-num { font-size: 18px; }

  /* ── cc2 casino tile: already collapsed at 639, just reduce text ── */
  .sf-rv .cc2-bonus { font-size: 13px; }
  .sf-rv .cc2-meta { font-size: 10px; gap: 6px; }

  /* ── CTA blocks: stack properly ── */
  .sf-rv .cta-rtp { flex-direction: column; align-items: flex-start; }
  .sf-rv .cta-vol { flex-direction: column; align-items: flex-start; }
  .sf-rv .inline-casino { flex-direction: column; gap: 8px; }
  .sf-rv .btn-claim-sm,
  .sf-rv .btn-orange-sm,
  .sf-rv .cta-rtp .btn-gold { width: 100%; text-align: center; }

}

/* ══════════════════════════════════════════════════════════
   ISSUE 2 — Editor's Pick badge clip on mobile cc2 tile
   ══════════════════════════════════════════════════════════
   On the stacked mobile layout (.cc2 is 2-col grid) the badge
   stays position:absolute inside a very short row-1, and the
   parent's overflow:hidden clips/overlaps it over the logo.
   Fix: keep absolute positioning but raise z-index and move
   badge to sit on the top border line of the tile itself, so
   it's always visually "on top" regardless of row height.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Pull the badge up so it sits on the top border, not inside row-1 */
  .sf-rv .cc2.top { padding-top: 14px; }
  .sf-rv .cc2.top .cc2-badge {
    top: -1px;       /* sit exactly on the top border line          */
    left: 0;
    right: 0;
    width: fit-content;
    margin: 0 auto;  /* centre it across the full card width         */
    border-radius: 0 0 8px 8px; /* flat top (flush with border), rounded bottom */
    font-size: 9px;
    padding: 2px 10px;
  }
}


/* ══════════════════════════════════════════════════════════
   ISSUE 4 — Compare slot score "7.0/10" wraps at the slash
   ══════════════════════════════════════════════════════════ */
.sf-rv .comparison-metric-value,
.sf-cmp-val {
  white-space: nowrap;
}
/* Restore wrapping for non-score cells on very narrow screens */
@media (max-width: 480px) {
  .sf-rv .comparison-metric-value { white-space: normal; }
  .sf-rv .comparison-metric-value.score,
  .sf-rv .comparison-metric-value[data-type="score"] { white-space: nowrap; }
}


/* ══════════════════════════════════════════════════════════
   ISSUE 5 — Jump nav: right-side fade affordance
   The nav already scrolls (overflow-x:auto on .jumpnav-inner)
   but has no visual cue. A ::after pseudo-element on the
   sticky .jumpnav wrapper creates a fade-out mask.
   Note: .jumpnav has overflow:visible (required for sticky) —
   the mask is on .jumpnav itself via a gradient overlay that
   sits on top of the inner strip using pointer-events:none.
   ══════════════════════════════════════════════════════════ */
.sf-rv .jumpnav {
  /* Make the jumpnav a containing block for the pseudo */
  /* overflow:visible is already set — don't change it  */
}
.sf-rv .jumpnav::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, #fff);
  pointer-events: none;
  z-index: 10;
  /* Only show when content is likely to overflow */
}
/* Hide the fade affordance on wide screens where all tabs fit */
@media (min-width: 640px) {
  .sf-rv .jumpnav::after { display: none; }
}
/* When last tab is active/scrolled into view, JS adds .nav-end class
   to .jumpnav — hide the fade so it doesn't obscure the active tab.
   (The JS already fires a scroll listener — we hook into that.) */
.sf-rv .jumpnav.nav-end::after { opacity: 0; }


/* ══════════════════════════════════════════════════════════
   ISSUE 1 — "Who Should Switch / Play If / Skip If" block
   ══════════════════════════════════════════════════════════
   Markup confirmed: <!-- wp:html --> outputs .pros-cons >
   .pc-col.pros + .pc-col.cons inside .sf-rv .sf-review-body.
   
   Root cause: the grid stacking breakpoint in single-slot-v6-v9.css
   is @media (max-width: 480px) — but with main-col side padding the
   two columns are already too narrow to hold the long list text at
   639px and below. Right column bleeds off screen edge before the
   480px rule ever fires.

   Fix: Override the breakpoint here (v9-mobile.css loads last in
   the chain) so .pros-cons stacks at 639px instead of 480px.
   Also tighten pc-col padding and font size at that width.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .sf-rv .pros-cons {
    grid-template-columns: 1fr;  /* stack to single column */
  }
  .sf-rv .pc-col {
    padding: 14px;               /* was 18px — tighter on mobile */
  }
  .sf-rv .pc-col h3 {
    font-size: 12px;             /* heading label: readable but compact */
    margin-bottom: 10px;
  }
  .sf-rv .pc-col li {
    font-size: 13px;             /* list items */
  }
}


/* ══════════════════════════════════════════════════════════
   TABLE SCROLL WRAPPER — ALL VIEWPORTS
   ══════════════════════════════════════════════════════════
   sf-beauty.css sets overflow:hidden on .sf-review-section table,
   which blocks overflow-x:auto on the table element itself.
   The PHP the_content filter (priority 12) wraps every <table>
   in <div class="sf-table-scroll"> — the wrapper scrolls, not
   the table, so sf-beauty's overflow:hidden is never in conflict.
   ══════════════════════════════════════════════════════════ */
.sf-rv .sf-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Subtle right-fade when content overflows */
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
          mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  border-radius: 12px; /* match the table's own border-radius from sf-beauty */
  margin-bottom: 4px;  /* prevent box-shadow clip at bottom */
}
/* Remove mask when not overflowing — JS toggles .sf-ts-no-overflow */
.sf-rv .sf-table-scroll.sf-ts-no-overflow {
  -webkit-mask-image: none;
          mask-image: none;
}
/* Remove the table's own border-radius since wrapper now clips it */
.sf-rv .sf-table-scroll table {
  border-radius: 0;
  /* Restore display:table — override our earlier display:block rule
     now that the wrapper handles scroll instead */
  display: table;
  overflow: visible;
  min-width: 480px; /* force horizontal scroll rather than col collapse */
  width: 100%;
}
/* Restore sub-elements to native display */
.sf-rv .sf-table-scroll table thead { display: table-header-group; }
.sf-rv .sf-table-scroll table tbody { display: table-row-group; }
.sf-rv .sf-table-scroll table tr    { display: table-row; }
.sf-rv .sf-table-scroll table th,
.sf-rv .sf-table-scroll table td    { display: table-cell; }

@media (max-width: 640px) {
  .sf-rv .sf-table-scroll table th,
  .sf-rv .sf-table-scroll table td {
    padding: 9px 10px;
    font-size: 13px;
    white-space: normal;
  }
}


/* ══════════════════════════════════════════════════════════
   CASINO SECTION BUTTONS — white-space fix
   ══════════════════════════════════════════════════════════
   single-slot-v6-v9.css lines 390 + 412 set white-space:nowrap
   on .sf-rv .casinos-section .sf-cc-v2-btn-orange and
   .sf-cc-v2-btn-ghost directly — more specific than the fix
   in casino-tiles-v2.css, so it overrides it on slot pages.
   Fix: remove nowrap on mobile so bonus text wraps normally.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .sf-rv .casinos-section .sf-cc-v2-btn-orange,
  .sf-rv .casinos-section .sf-cc-v2-btn-ghost {
    white-space: normal;
    word-break: break-word;
  }
}


/* ══════════════════════════════════════════════════════════
   DESKTOP STICKY CTA — base styles + mobile suppression
   ══════════════════════════════════════════════════════════
   .sf-sticky-cta is rendered by sf_slot_sticky_cta() and
   toggled by slot-review.js via .sf-sticky-cta--visible.
   It had no base CSS rules at all, so it was rendering as
   a static block on mobile (visible on top of .mobile-cta).

   Rule: desktop only (≥1024px). .mobile-cta owns ≤1023px.
   ══════════════════════════════════════════════════════════ */

/* Hidden by default on all viewports */
.sf-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 140; /* below .mobile-cta (850) */
  background: rgba(22, 12, 35, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 -4px 24px rgba(0,0,0,.3);
  padding: 10px 24px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Desktop only — show when JS adds .sf-sticky-cta--visible */
@media (min-width: 1024px) {
  .sf-sticky-cta.sf-sticky-cta--visible {
    display: flex;
  }
}

/* Inner layout */
.sf-sticky-cta-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sf-sticky-cta-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sf-sticky-cta-pick {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--gold, #FFB800);
  text-transform: uppercase;
}
.sf-sticky-cta-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.sf-sticky-cta-rating {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold, #FFB800);
  background: rgba(255,184,0,.12);
  padding: 3px 8px;
  border-radius: 6px;
}
.sf-sticky-cta-bonus {
  font-size: 13px;
  color: rgba(255,255,255,.65);
}
.sf-sticky-cta-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #FFB800, #FF8C00);
  color: #1a0a2e;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255,184,0,.4);
  transition: box-shadow .15s, transform .1s;
}
.sf-sticky-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,184,0,.5);
}