@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════
   SlotGuru — LINEAR CLEAN  v3.0
   CSS 1-в-1 з усіх HTML мокапів
═══════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{font-family:'Rubik',system-ui,sans-serif;background:#fff;color:#0F0F23;font-size:15px;line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{display:block;max-width:100%}
p{margin-bottom:1em;line-height:1.75}p:last-child{margin-bottom:0}

/* ── TOKENS ── */
:root{
  --indigo:#6366F1;--indigo-d:#4F46E5;--indigo-l:#EEF2FF;
  --indigo-m:rgba(99,102,241,.12);--indigo-s:rgba(99,102,241,.06);
  --bg:#fff;--surface:#F8F9FC;--surface-2:#F1F3FA;
  --border:rgba(15,15,35,.08);--border-m:rgba(15,15,35,.14);
  --txt:#0F0F23;--txt-2:#5B5C73;--txt-3:#9B9CAD;
  --green:#10B981;--amber:#F59E0B;--red:#EF4444;
  --r:8px;--r-lg:12px;
  --mono:'JetBrains Mono','Courier New',monospace;
  --maxw:1280px;
}

/* ── TOPBAR ── */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);height:36px;display:flex;align-items:center}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:0 40px;width:100%;display:flex;align-items:center;justify-content:space-between}
.tb-notice{font:400 11px/1 var(--mono);color:var(--txt-3);letter-spacing:.04em;display:flex;align-items:center;gap:8px}
.tb-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.lang-row{display:flex}
.lang-btn{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;height:36px;padding:0 12px;color:var(--txt-3);border-left:1px solid var(--border);transition:color .15s;cursor:pointer}
.lang-btn:hover{color:var(--txt)}
.lang-btn.on{color:var(--indigo)}
/* sg_language_switcher() output */
/* ── Language Switcher ──────────────────────────
   Compact dropdown з SVG прапорами
   Працює на топбарі (світлий фон)
────────────────────────────────────────────── */
.sg-lsw{position:relative;display:inline-flex;align-items:center}

/* Trigger button */
.sg-lsw-btn{
  display:inline-flex;align-items:center;gap:5px;
  height:26px;padding:0 8px 0 6px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-2);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.sg-lsw-btn:hover{background:var(--hover);border-color:var(--border-m);color:var(--txt)}
.sg-lsw-btn[aria-expanded="true"]{background:var(--hover);border-color:var(--border-m);color:var(--txt)}

/* Flag wrapper — clips SVG to nice rectangle */
.sg-lsw-flag,.sg-lsw-item-flag{
  display:inline-flex;align-items:center;flex-shrink:0;
  width:20px;height:14px;border-radius:2px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  line-height:0;
}
.sg-lsw-flag svg,.sg-lsw-item-flag svg{width:20px;height:14px;display:block}

.sg-lsw-code{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sg-lsw-chevron{flex-shrink:0;opacity:.45;transition:transform .18s}
.sg-lsw-btn[aria-expanded="true"] .sg-lsw-chevron{transform:rotate(180deg);opacity:.7}

/* Dropdown panel */
.sg-lsw-drop{
  position:absolute;top:calc(100% + 5px);right:0;
  min-width:100px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(15,23,42,.1),0 1px 4px rgba(15,23,42,.06);
  list-style:none;margin:0;padding:4px;
  opacity:0;visibility:hidden;
  transform:translateY(-4px) scale(.97);
  transform-origin:top right;
  transition:opacity .15s,transform .15s,visibility .15s;
  z-index:10000;
}
.sg-lsw.open .sg-lsw-drop{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sg-lsw-drop li{margin:0;padding:0}

/* Dropdown item */
.sg-lsw-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:7px;
  font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:#475569;
  transition:background .1s,color .1s;
  text-decoration:none;cursor:pointer;
}
.sg-lsw-item:hover{background:#f1f5f9;color:#0f172a}
.sg-lsw-item.is-active{background:rgba(99,102,241,.07);color:var(--indigo)}
.sg-lsw-item-label{flex:1}
.sg-lsw-tick{color:var(--indigo);flex-shrink:0;opacity:.8}

/* Dark mode override */
[data-theme="dark"] .sg-lsw-drop,
.dark .sg-lsw-drop{background:var(--card);border-color:var(--border)}
[data-theme="dark"] .sg-lsw-item:hover,
.dark .sg-lsw-item:hover{background:var(--hover)}

/* ── HEADER ── */
.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.93);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:0 40px;height:64px;display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-right:40px;text-decoration:none}
.logo-mark{width:28px;height:28px;background:var(--indigo);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round}
.logo-name{font:700 17px/1 'Rubik',sans-serif;letter-spacing:-.03em;color:var(--txt)}
.logo-name span,.logo-name em{color:var(--indigo);font-style:normal}
.main-nav{display:flex;flex:1}
.nav-link,.nl{font:500 13px/1 'Rubik',sans-serif;color:var(--txt-2);padding:0 16px;height:64px;display:flex;align-items:center;position:relative;transition:color .15s;text-decoration:none}
.nav-link::after,.nl::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:2px;background:var(--indigo);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-link:hover,.nl:hover,.nav-link.on,.nl.on,.nav-link.current-menu-item,.current_page_item>.nav-link{color:var(--txt)}
.nav-link.on::after,.nl.on::after,.nav-link:hover::after,.nl:hover::after,.current-menu-item>.nav-link::after{transform:scaleX(1)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn-search,.btn-srch{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--txt-3);transition:all .15s;cursor:pointer}
.btn-search:hover,.btn-srch:hover{border-color:var(--border-m);color:var(--txt)}
.btn-search svg,.btn-srch svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.btn-primary,.btn-p{height:36px;padding:0 18px;background:var(--indigo);color:#fff;font:600 13px/1 'Rubik',sans-serif;border-radius:var(--r);transition:background .15s;display:inline-flex;align-items:center;cursor:pointer}
.btn-primary:hover,.btn-p:hover{background:var(--indigo-d)}
/* Burger */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--r)}
.nav-burger span{display:block;height:2px;background:var(--txt-3);border-radius:2px;margin:0 8px}
/* Search drawer */
.header-search-drawer{border-top:1px solid var(--border);background:var(--surface)}
.header-search-form{display:flex;max-width:var(--maxw);margin:0 auto;padding:10px 40px}
.search-field{flex:1;height:44px;background:var(--bg);border:1px solid var(--border);border-right:none;border-radius:var(--r) 0 0 var(--r);padding:0 16px;font:400 14px/1 'Rubik',sans-serif;color:var(--txt);outline:none;transition:border-color .15s}
.search-field:focus{border-color:rgba(99,102,241,.4)}
.search-submit{height:44px;padding:0 20px;background:var(--indigo);color:#fff;border-radius:0 var(--r) var(--r) 0;transition:background .15s;display:flex;align-items:center}
.search-submit:hover{background:var(--indigo-d)}
.search-submit svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.search-close{height:44px;padding:0 16px;color:var(--txt-3)}
.search-close:hover{color:var(--txt)}

/* ── BREADCRUMB ── (sg_breadcrumbs() outputs nav.sg-breadcrumbs) ── */
.breadcrumb-bar,.bc-bar,.sg-breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 40px;height:44px;}
.bc-bar{display:flex;align-items:center;gap:6px;overflow:hidden;flex-wrap:wrap}
.bc-in,.sg-breadcrumbs{max-width:var(--maxw);margin:0 auto;padding:0 40px;height:44px;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}
.bc-in::-webkit-scrollbar,.sg-breadcrumbs::-webkit-scrollbar{display:none}
.sg-breadcrumbs ol{display:flex;align-items:center;list-style:none;gap:0;padding:0;margin:0}
.sg-breadcrumbs li,.bc-i{font:400 12px/1 var(--mono);color:var(--txt-3);white-space:nowrap;display:flex;align-items:center}
.sg-breadcrumbs li+li::before,.bc-s{content:'/';margin:0 8px;opacity:.35;font-size:11px;color:var(--txt-3)}
.sg-breadcrumbs li+li::before{content:'/'}
.sg-breadcrumbs a,.bc-i a{color:var(--indigo);transition:opacity .15s}
.sg-breadcrumbs a:hover,.bc-i a:hover{opacity:.75}
.sg-breadcrumbs .active{color:var(--txt-2)}

/* ── PAGE HERO (archive/providers/etc) ── */
.page-hero,.ph-wrap{padding:40px 0 32px;border-bottom:1px solid var(--border);background:var(--surface);position:relative;overflow:hidden}
.ph-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 100% 0%,rgba(99,102,241,.06) 0%,transparent 60%);pointer-events:none}
.ph-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(99,102,241,.1) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse 40% 60% at 90% 0%,black,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 40% 60% at 90% 0%,black,transparent 70%);pointer-events:none}
.ph-inner,.ph-in{max-width:var(--maxw);margin:0 auto;padding:0 40px;position:relative;z-index:2}
.ph-h1{font:700 clamp(32px,4vw,52px)/1 'Rubik',sans-serif;letter-spacing:-.04em;color:var(--txt);margin-bottom:8px}
.ph-sub{font:400 14px/1 var(--mono);color:var(--txt-3)}

/* ── SECTION ── */
.section{padding:80px 0}
.section-inner{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;gap:16px}
.sh-left{}
.sh-eyebrow{font:500 11px/1 var(--mono);color:var(--indigo);text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sh-eyebrow::before{content:'';display:block;width:20px;height:1.5px;background:var(--indigo)}
.sh-title{font:700 clamp(28px,3vw,40px)/1.05 'Rubik',sans-serif;letter-spacing:-.04em;color:var(--txt)}
.sh-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.sh-count{font:400 12px/1 var(--mono);color:var(--txt-3);background:var(--surface);border:1px solid var(--border);padding:5px 12px;border-radius:100px}
.sh-link{font:500 13px/1 'Rubik',sans-serif;color:var(--indigo);display:flex;align-items:center;gap:5px;transition:gap .15s;text-decoration:none}
.sh-link:hover{gap:8px}
.sh-link::after{content:'→'}

/* ── HERO (front page) ── */
.hero{position:relative;overflow:hidden;padding:100px 0 80px;border-bottom:1px solid var(--border)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-radial{position:absolute;top:-200px;right:-200px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.08) 0%,transparent 70%)}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(99,102,241,.12) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse 80% 80% at 80% 20%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 80% 80% at 80% 20%,black 20%,transparent 70%)}
.hero-left{min-width:0;overflow:hidden;max-width:100%}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 480px;gap:64px;align-items:center;position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--indigo-l);border:1px solid rgba(99,102,241,.2);border-radius:100px;padding:5px 14px 5px 8px;margin-bottom:28px}
.hb-dot{width:8px;height:8px;border-radius:50%;background:var(--indigo);flex-shrink:0;animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}
.hb-text{font:500 12px/1 var(--mono);color:var(--indigo);letter-spacing:.04em;text-transform:uppercase}
.hero-h1{font:800 clamp(44px,5.5vw,72px)/1.02 'Rubik',sans-serif;letter-spacing:-.04em;color:var(--txt);margin-bottom:22px}
.hero-h1 .accent{color:var(--indigo)}
.hero-h1 .outline{color:transparent;-webkit-text-stroke:2px rgba(99,102,241,.25)}
.hero-desc{font:400 18px/1.7 'Rubik',sans-serif;color:var(--txt-2);max-width:480px;margin-bottom:40px}
.hero-desc strong{color:var(--txt);font-weight:600}
.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:56px}
.ha-primary{height:48px;padding:0 28px;background:var(--indigo);color:#fff;font:600 15px/1 'Rubik',sans-serif;border-radius:var(--r);display:inline-flex;align-items:center;gap:8px;transition:all .2s;box-shadow:0 1px 3px rgba(99,102,241,.3),0 4px 16px rgba(99,102,241,.15);text-decoration:none}
.ha-primary:hover{background:var(--indigo-d);transform:translateY(-1px);box-shadow:0 2px 6px rgba(99,102,241,.35),0 8px 24px rgba(99,102,241,.2)}
.ha-secondary{height:48px;padding:0 24px;background:var(--bg);color:var(--txt);font:500 15px/1 'Rubik',sans-serif;border-radius:var(--r);border:1px solid var(--border-m);display:inline-flex;align-items:center;gap:8px;transition:all .2s;text-decoration:none}
.ha-secondary:hover{background:var(--surface);border-color:var(--border-m)}
.hero-trust{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:7px;font:400 13px/1 'Rubik',sans-serif;color:var(--txt-3)}
.trust-icon{width:18px;height:18px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
/* Card stack */
.hero-right{position:relative;height:420px}
.hc{position:absolute;background:var(--bg);border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;box-shadow:0 4px 16px rgba(15,15,35,.06),0 1px 4px rgba(15,15,35,.04);transition:transform .3s ease,box-shadow .3s ease}
.hc:hover{box-shadow:0 8px 32px rgba(15,15,35,.1),0 2px 8px rgba(15,15,35,.06)}
.hc-1{width:280px;top:20px;left:50px;z-index:3}
.hc-2{width:240px;top:100px;left:0;z-index:2;transform:rotate(-4deg) translateY(10px);opacity:.7}
.hc-3{width:220px;top:110px;left:160px;z-index:1;transform:rotate(4deg) translateY(14px);opacity:.5}
.hc-thumb{height:160px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:52px;position:relative;overflow:hidden}
.hc-1 .hc-thumb{height:180px;font-size:64px}
.hc-thumb-line{position:absolute;top:0;left:0;right:0;height:3px;background:var(--indigo)}
.hc-rtp-pill{position:absolute;top:10px;left:10px;background:var(--indigo);color:#fff;font:600 11px/1 var(--mono);padding:4px 9px;border-radius:100px;z-index:2}
.hc-badge{position:absolute;top:10px;right:10px;font:600 10px/1 var(--mono);padding:4px 9px;border-radius:4px;text-transform:uppercase;z-index:2}
.hc-badge.hot{background:#FEF2F2;color:var(--red);border:1px solid #FEE2E2}
.hc-badge.new{background:#ECFDF5;color:var(--green);border:1px solid #D1FAE5}
.hc-body{padding:14px}
.hc-name{font:700 16px/1 'Rubik',sans-serif;letter-spacing:-.02em;color:var(--txt);margin-bottom:3px}
.hc-prov{font:400 12px/1 var(--mono);color:var(--txt-3);margin-bottom:12px}
.hc-stats{display:flex;gap:6px}
.hc-st{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:6px 8px;text-align:center}
.hc-sk{font:400 9px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;display:block}
.hc-sv{font:600 12px/1 var(--mono);color:var(--txt);display:block}
.hc-sv.ind{color:var(--indigo)}

/* ── STATS BAR (front page) ── */
.stats-bar{background:var(--surface);border-bottom:1px solid var(--border)}
.stats-bar-inner{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:grid;grid-template-columns:repeat(4,1fr)}
.stats-bar-inner .sb-item{padding:22px 0;text-align:center;border-right:1px solid var(--border)}
.stats-bar-inner .sb-item:last-child{border:none}
.stats-bar-inner .sb-val{font:800 28px/1 'Rubik',sans-serif;letter-spacing:-.04em;color:var(--txt);margin-bottom:4px}
.stats-bar-inner .sb-val .unit{font-size:16px;font-weight:600;color:var(--indigo)}
.stats-bar-inner .sb-label{font:400 12px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.08em}

/* ── PROVIDERS GRID (front page) ── */
.prov-section{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.prov-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.prov-item,.pi{background:var(--bg);padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;text-align:center;transition:all .2s;text-decoration:none;border-radius:var(--r-lg);border:1px solid var(--border)}
.prov-item:hover,.pi:hover{background:var(--indigo-s);border-color:rgba(99,102,241,.25);transform:translateY(-2px);box-shadow:0 4px 16px rgba(99,102,241,.1)}
.pi-logo{width:64px;height:64px;border-radius:var(--r);background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;padding:8px;transition:border-color .2s}
.prov-item:hover .pi-logo{border-color:rgba(99,102,241,.3)}
.pi-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pi-name{font:600 13px/1.2 'Rubik',sans-serif;letter-spacing:-.01em;color:var(--txt)}
.pi-count{font:400 11px/1 var(--mono);color:var(--txt-3)}
.pi-rtp{font:600 11px/1 var(--mono);color:var(--indigo);background:var(--indigo-l);padding:3px 8px;border-radius:100px}

/* ── CATS GRID ── */
.cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cat-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;text-decoration:none;color:inherit}
.cat-item:hover{border-color:rgba(99,102,241,.3);background:var(--indigo-s);transform:translateY(-1px)}
.cat-icon{width:44px;height:44px;border-radius:var(--r);background:var(--indigo-l);border:1px solid rgba(99,102,241,.15);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.cat-info{}
.cat-name{font:600 14px/1 'Rubik',sans-serif;letter-spacing:-.02em;color:var(--txt);margin-bottom:4px}
.cat-count{font:400 11px/1 var(--mono);color:var(--txt-3)}

/* ── Variant 2: large tile cards with progress bars ── */
.cg2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cg2-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cg2-card:hover {
  border-color: rgba(108,99,255,.3);
  box-shadow: 0 4px 16px rgba(108,99,255,.08);
  transform: translateY(-2px);
}
.cg2-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cg2-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--indigo-l, #eeeeff);
  border: 1px solid rgba(108,99,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.cg2-badge {
  font: 500 9px/1 var(--mono);
  color: var(--indigo);
  background: var(--indigo-l, #eeeeff);
  padding: 3px 7px;
  border-radius: 100px;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.cg2-name {
  font: 600 14px/1.2 'Rubik', sans-serif;
  letter-spacing: -.02em;
  color: var(--txt);
}
.cg2-cnt {
  font: 400 11px/1 var(--mono);
  color: var(--txt-3);
  margin-top: 2px;
}
.cg2-bar-wrap {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.cg2-bar {
  height: 100%;
  background: var(--indigo);
  border-radius: 2px;
  transition: width .4s ease;
}
.cg2-desc {
  font: 400 11px/1.5 var(--mono);
  color: var(--txt-3);
  margin-top: auto;
}
@media (max-width: 900px) {
  .cg2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cg2 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cg2-card { padding: 14px; gap: 8px; }
  .cg2-desc { display: none; }
}

/* ── RTP TABLE (front page) ── */
.rtp-table-wrap{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.rtt{width:100%;border-collapse:collapse}
.rtt thead tr{border-bottom:1px solid var(--border);background:var(--surface)}
.rtt th{font:500 11px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.1em;padding:12px 18px;text-align:left}
.rtt tbody tr{border-bottom:1px solid var(--border);transition:background .12s;cursor:pointer}
.rtt tbody tr:last-child{border:none}
.rtt tbody tr:hover{background:var(--indigo-s)}
.rtt td{padding:14px 18px}
.rt-rank{font:800 18px/1 'Rubik',sans-serif;letter-spacing:-.03em;color:var(--txt-3);width:48px}
.rt-rank.top{color:var(--indigo)}
.rt-thumb{width:40px;height:28px;border-radius:5px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;overflow:hidden}
.rt-thumb img{width:100%;height:100%;object-fit:cover}
.rt-info{display:flex;align-items:center;gap:12px}
.rt-name{font:600 14px/1 'Rubik',sans-serif;letter-spacing:-.02em;color:var(--txt)}
.rt-prov{font:400 11px/1 var(--mono);color:var(--txt-3);margin-top:3px}
.rt-rtp{font:700 14px/1 var(--mono);color:var(--indigo)}
.rt-vol{font:500 12px/1 'Rubik',sans-serif;padding:3px 10px;border-radius:100px}
.rt-vol.low{background:#ECFDF5;color:var(--green)}
.rt-vol.med{background:#FFFBEB;color:var(--amber)}
.rt-vol.high{background:#FEF2F2;color:var(--red)}
.rt-vol.vhigh{background:#FEF2F2;color:var(--red);font-weight:600}
.rt-score{font:400 12px/1 var(--mono);color:var(--txt-2);display:flex;align-items:center;gap:6px}
.rt-stars{color:var(--indigo);font-size:10px;letter-spacing:1px}
.rt-actions{display:flex;gap:6px;opacity:0;transition:opacity .15s}
.rtt tbody tr:hover .rt-actions{opacity:1}
.rt-btn{height:28px;padding:0 12px;font:600 11px/1 'Rubik',sans-serif;border-radius:5px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}
.rt-btn.demo{background:var(--indigo);color:#fff;border:none}
.rt-btn.demo:hover{background:var(--indigo-d)}
.rt-btn.more{background:var(--surface);color:var(--txt-2);border:1px solid var(--border)}
.rt-btn.more:hover{background:var(--surface-2)}

/* ── NEWSLETTER ── */
.nl-section{background:var(--indigo);padding:60px 0}
.nl-inner{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.nl-eyebrow{font:500 11px/1 var(--mono);color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}
.nl-title{font:700 32px/1 'Rubik',sans-serif;letter-spacing:-.04em;color:#fff}
.nl-form,.footer-nl-form{display:flex;max-width:420px;width:100%}
.nl-input,.footer-nl-form input[type=email]{flex:1;height:48px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-right:none;color:#fff;font:400 14px/1 'Rubik',sans-serif;padding:0 18px;border-radius:var(--r) 0 0 var(--r);outline:none;transition:background .15s}
.nl-input::placeholder,.footer-nl-form input::placeholder{color:rgba(255,255,255,.5)}
.nl-input:focus,.footer-nl-form input:focus{background:rgba(255,255,255,.2)}
.nl-btn,.footer-nl-form button{height:48px;padding:0 24px;background:#fff;color:var(--indigo);font:700 14px/1 'Rubik',sans-serif;border-radius:0 var(--r) var(--r) 0;transition:all .15s;white-space:nowrap;cursor:pointer;border:none}
.nl-btn:hover,.footer-nl-form button:hover{background:var(--indigo-l)}

/* ══════════════════════════════════════════
   FOOTER — redesigned: informative desktop,
   compact mobile
══════════════════════════════════════════ */

/* Top accent strip */
.site-footer{
  background:var(--surface);
  border-top:none;
  position:relative;
}
.site-footer::before{
  content:'';
  display:block;
  height:3px;
  background:linear-gradient(90deg,var(--indigo) 0%,#818cf8 50%,var(--indigo) 100%);
  opacity:.7;
}

/* ── Main grid ── */
.footer-main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:48px 40px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
  border-bottom:1px solid var(--border);
}

/* ── Brand col ── */
.fc-brand{}
.fc-brand .logo{margin-bottom:14px;display:inline-flex}
.fc-brand .brand-desc,.footer-desc{
  font:400 13px/1.75 'Rubik',sans-serif;
  color:var(--txt-3);
  max-width:240px;
  margin:0 0 16px;
}
.brand-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.brand-badge{
  font:500 10px/1 var(--mono);
  color:var(--txt-3);
  letter-spacing:.06em;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:4px;
  text-transform:uppercase;
  transition:border-color .15s,color .15s;
}
.brand-badge:hover{border-color:var(--indigo);color:var(--indigo)}

/* ── Footer stats (in brand col) ── */
.footer-stats{
  display:flex;
  gap:0;
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
}
.fstat{
  flex:1;
  padding:12px 10px;
  text-align:center;
  border-right:1px solid var(--border);
}
.fstat:last-child{border-right:none}
.fstat-val{
  font:700 18px/1 'Rubik',sans-serif;
  color:var(--indigo);
  letter-spacing:-.03em;
  margin-bottom:5px;
}
.fstat-key{
  font:400 10px/1 var(--mono);
  color:var(--txt-3);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ── Nav columns ── */
.fc-col,.footer-col{}
.col-title,.footer-col-title{
  font:600 10px/1 var(--mono);
  color:var(--txt-3);
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:7px;
}
.fc-col-icon{
  font-size:13px;
  line-height:1;
  filter:grayscale(.4);
}
.fc-col ul,.footer-links{list-style:none;padding:0;margin:0}
.fc-col ul li,.footer-links li{margin-bottom:9px}
.fc-col ul li a,.footer-links a{
  font:400 13px/1 'Rubik',sans-serif;
  color:var(--txt-2);
  transition:color .15s,padding-left .15s;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.fc-col ul li a::before,.footer-links a::before{
  content:'';
  display:inline-block;
  width:0;
  height:2px;
  background:var(--indigo);
  border-radius:2px;
  transition:width .15s;
  flex-shrink:0;
}
.fc-col ul li a:hover,.footer-links a:hover{
  color:var(--indigo);
  padding-left:4px;
}
.fc-col ul li a:hover::before,.footer-links a:hover::before{
  width:8px;
}

/* ── RG strip ── */
.footer-rg{padding:14px 0}
.footer-rg-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.footer-rg-label{
  font:500 10px/1 var(--mono);
  color:var(--txt-3);
  text-transform:uppercase;
  letter-spacing:.1em;
  white-space:nowrap;
}
.footer-rg-logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer-rg-logo{
  display:flex;
  align-items:center;
  opacity:.4;
  transition:opacity .2s,filter .2s;
  filter:grayscale(1);
}
.footer-rg-logo:hover{opacity:1;filter:none}
.footer-rg-logo img{height:26px;width:auto}

/* ── Bottom bar ── */
.footer-bottom{border-top:1px solid var(--border);background:var(--bg)}
.fb-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.fb-copy,.footer-copy{font:400 11px/1 var(--mono);color:var(--txt-3)}
.fb-rg,.footer-rg-strip{display:flex;align-items:center;gap:6px}
.fb-18,.rg18{
  background:var(--indigo);
  color:#fff;
  font:700 10px/1 var(--mono);
  padding:3px 7px;
  border-radius:3px;
}
.fb-logo,.rgl{
  font:400 10px/1 var(--mono);
  color:var(--txt-3);
  padding:3px 8px;
  border:1px solid var(--border);
  border-radius:3px;
}
/* WP nav menu in footer bottom */
.footer-bottom-nav ul{display:flex;gap:0;padding:0;list-style:none}
.footer-bottom-nav a{
  font:400 11px/1 var(--mono);
  color:var(--txt-3);
  padding:0 9px;
  transition:color .15s;
}
.footer-bottom-nav a:hover{color:var(--indigo)}

/* ── ARCHIVE MAIN ── */
.archive-main{padding:20px 28px 60px;min-width:0}
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px;padding:10px 0;border-bottom:1px solid var(--border)}
.rb-left{display:flex;align-items:center;min-width:0}
.rb-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.rc{font:400 13px/1 var(--mono);color:var(--txt-3)}
.rc strong{color:var(--indigo);font-size:15px;font-weight:700;letter-spacing:-.02em}
.results-sort{height:36px;background:var(--bg);border:1px solid var(--border);color:var(--txt-2);font:400 13px/1 'Rubik',sans-serif;padding:0 10px;border-radius:var(--r);outline:none;cursor:pointer;transition:border-color .15s}
.results-sort:focus{border-color:var(--indigo)}
.active-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.af-label{font:400 12px/1 var(--mono);color:var(--txt-3)}
.af-chip{display:inline-flex;align-items:center;gap:5px;background:var(--indigo-l);border:1px solid rgba(99,102,241,.25);border-radius:100px;padding:4px 10px 4px 12px;font:500 12px/1 'Rubik',sans-serif;color:var(--indigo);cursor:pointer;transition:all .15s;text-decoration:none}
.af-chip:hover{background:var(--indigo);color:#fff}
.af-chip-x{font-size:13px;line-height:1;opacity:.7}
.af-clear{font:500 12px/1 'Rubik',sans-serif;color:var(--txt-3);margin-left:4px;cursor:pointer;transition:color .15s;text-decoration:none}
.af-clear:hover{color:var(--red)}

/* ── PROVIDER PAGE ── */
.prov-hero{padding:56px 0 48px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.ph-bg-indigo,.ph-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 100% 0%,rgba(99,102,241,.06) 0%,transparent 60%);pointer-events:none}
.ph-dots-bg,.ph-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(99,102,241,.1) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse 40% 60% at 90% 0%,black,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 40% 60% at 90% 0%,black,transparent 70%);pointer-events:none}
.ph-inner-prov,.ph-in{max-width:var(--maxw);margin:0 auto;padding:0 40px;position:relative;z-index:2}
.ph-layout{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.ph-logo-box{width:88px;height:88px;background:var(--indigo-l);border:2px solid rgba(99,102,241,.2);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font:800 22px/1 'Rubik',sans-serif;color:var(--indigo);text-transform:uppercase;flex-shrink:0}
.ph-info{flex:1;min-width:0}
.ph-eyebrow{font:400 11px/1 var(--mono);color:var(--indigo);text-transform:uppercase;letter-spacing:.18em;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.ph-eyebrow::before{content:'';width:16px;height:1.5px;background:var(--indigo)}
.ph-h1{font:800 clamp(40px,6vw,72px)/1 'Rubik',sans-serif;letter-spacing:-.05em;color:var(--txt);margin-bottom:14px}
.ph-chips{display:flex;flex-wrap:wrap;gap:6px}
.ph-chip{font:400 12px/1 var(--mono);padding:5px 12px;border-radius:100px;border:1px solid var(--border);color:var(--txt-3)}
.ph-chip.on{background:var(--indigo-l);border-color:rgba(99,102,241,.25);color:var(--indigo)}
.ph-stats{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;flex-shrink:0}
.ph-stat{padding:20px 28px;border-right:1px solid var(--border);text-align:center}
.ph-stat:last-child{border:none}
.ph-sv{font:800 28px/1 'Rubik',sans-serif;letter-spacing:-.04em;color:var(--indigo);margin-bottom:5px}
.ph-sk{font:400 10px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.1em}
/* About section */
.prov-about{border-bottom:1px solid var(--border)}
.pa-in{max-width:var(--maxw);margin:0 auto;padding:40px;display:grid;grid-template-columns:2fr 1fr;gap:56px}
.pa-text{font:400 16px/1.8 'Rubik',sans-serif;color:var(--txt-2)}
.pa-text strong{color:var(--txt);font-weight:600}
.pf-title{font:500 11px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.12em;padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.pf-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);gap:12px}
.pf-row:last-child{border:none}
.pf-k{font:400 12px/1 var(--mono);color:var(--txt-3);flex-shrink:0}
.pf-v{font:500 13px/1 'Rubik',sans-serif;color:var(--txt-2);text-align:right}
.pf-v a{color:var(--indigo)}
.pf-v.ind{color:var(--indigo)}
/* Provider slots section */
.slots-section{max-width:var(--maxw);margin:0 auto;padding:28px 40px 64px}
.ss-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.ss-count{font:400 13px/1 var(--mono);color:var(--txt-3)}
.ss-count strong{color:var(--indigo);font-size:16px;font-weight:600}
.ss-sort{height:36px;background:var(--bg);border:1px solid var(--border);color:var(--txt-2);font:400 13px 'Rubik',sans-serif;padding:0 12px;border-radius:var(--r);outline:none;cursor:pointer;margin-left:auto;transition:border-color .15s}
.ss-sort:focus{border-color:var(--indigo)}
/* Filter tabs for provider */
.ftabs{position:sticky;top:64px;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.ftabs-in{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:flex;overflow-x:auto;scrollbar-width:none}
.ftabs-in::-webkit-scrollbar{display:none}
.ft{font:500 12px/1 'Rubik',sans-serif;color:var(--txt-3);height:48px;padding:0 20px;display:flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;border-bottom:2px solid transparent;transition:all .15s;text-decoration:none;cursor:pointer}
.ft:hover{color:var(--txt)}
.ft.on{color:var(--indigo);border-bottom-color:var(--indigo);background:var(--indigo-s)}
.ft-c{font:500 10px/1 var(--mono);background:var(--indigo-l);color:var(--indigo);padding:2px 6px;border-radius:100px}
.ft.on .ft-c{background:var(--indigo);color:#fff}

/* ── THEME PAGE ── */
.themes-nav,.type-nav{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:64px;z-index:90;overflow:hidden}
.tn-in{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:flex;overflow-x:auto;scrollbar-width:none}
.tn-in::-webkit-scrollbar{display:none}
.tn-item{display:flex;align-items:center;gap:8px;height:52px;padding:0 16px;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:all .15s;font:500 13px/1 'Rubik',sans-serif;color:var(--txt-3);text-decoration:none}
.tn-item:hover{color:var(--txt);background:var(--surface)}
.tn-item.on{color:var(--indigo);border-bottom-color:var(--indigo);background:var(--indigo-s)}
.tn-icon{font-size:18px;line-height:1}
.tn-count,.tn-cnt{font:400 10px/1 var(--mono);color:var(--txt-3);background:var(--surface);padding:2px 6px;border-radius:100px;border:1px solid var(--border)}
.tn-item.on .tn-count,.tn-item.on .tn-cnt{background:var(--indigo-l);border-color:rgba(99,102,241,.2);color:var(--indigo)}
/* Theme hero */
.theme-hero{padding:56px 0 48px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.th-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 100% at 50% -20%,rgba(99,102,241,.06) 0%,transparent 60%);pointer-events:none}
.th-bg-r{position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 100% 0%,rgba(99,102,241,.06) 0%,transparent 60%);pointer-events:none}
.th-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(99,102,241,.1) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse 40% 60% at 90% 0%,black,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 40% 60% at 90% 0%,black,transparent 70%);pointer-events:none}
.th-in{max-width:var(--maxw);margin:0 auto;padding:0 40px;position:relative;z-index:2;padding-bottom:48px}
.th-in-flex{display:flex;align-items:center;gap:32px}
.th-icon-big{font-size:72px;line-height:1;flex-shrink:0}
.th-eyebrow{font:400 11px/1 var(--mono);color:var(--indigo);text-transform:uppercase;letter-spacing:.18em;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.th-eyebrow::before{content:'';width:16px;height:1.5px;background:var(--indigo)}
.th-h1{font:800 clamp(40px,6vw,72px)/1 'Rubik',sans-serif;letter-spacing:-.05em;color:var(--txt);margin-bottom:12px}
.th-desc{font:400 16px/1.7 'Rubik',sans-serif;color:var(--txt-2);max-width:580px;margin-bottom:20px}
.th-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:0}
.th-chip{font:400 12px/1 var(--mono);padding:5px 12px;border-radius:100px;border:1px solid var(--border);color:var(--txt-3)}
.th-chip.on{background:var(--indigo-l);border-color:rgba(99,102,241,.25);color:var(--indigo)}
/* Mechanic explainer */
.mech-explainer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:0;padding-top:32px;border-top:1px solid var(--border)}
.me-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.me-icon{font-size:28px;margin-bottom:12px}
.me-title{font:600 14px/1 'Rubik',sans-serif;letter-spacing:-.02em;color:var(--txt);margin-bottom:6px}
.me-desc{font:400 13px/1.6 'Rubik',sans-serif;color:var(--txt-2)}
/* Theme/type body */
.theme-body{display:grid;grid-template-columns:220px 1fr;max-width:var(--maxw);margin:0 auto;min-height:70vh}
.type-body{display:grid;grid-template-columns:220px 1fr;max-width:var(--maxw);margin:0 auto;min-height:70vh}
.theme-sidebar,.type-sidebar{border-right:1px solid var(--border);padding:24px 16px}
.ts-title{font:500 11px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.12em;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.ts-title::before{content:'';width:3px;height:10px;background:var(--indigo);border-radius:2px}
.ts-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);cursor:pointer;transition:all .15s;font:400 13px/1 'Rubik',sans-serif;color:var(--txt-2);margin-bottom:2px;text-decoration:none}
.ts-item:hover{background:var(--surface);color:var(--txt)}
.ts-item.on{background:var(--indigo-l);color:var(--indigo)}
.ts-icon{font-size:16px;line-height:1;flex-shrink:0}
.ts-cnt{font:400 10px/1 var(--mono);color:var(--txt-3);margin-left:auto}
.ts-item.on .ts-cnt{color:var(--indigo)}
.theme-main,.type-main{padding:24px 28px 60px;min-width:0}
.tm-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.tm-count{font:400 13px/1 var(--mono);color:var(--txt-3)}
.tm-count strong{color:var(--indigo);font-size:16px;font-weight:600}
.tm-sort{height:36px;background:var(--bg);border:1px solid var(--border);color:var(--txt-2);font:400 13px 'Rubik',sans-serif;padding:0 12px;border-radius:var(--r);outline:none;cursor:pointer;margin-left:auto;transition:border-color .15s}
/* SEO section */
.theme-seo,.type-seo,.seo-section{background:var(--surface);border-top:1px solid var(--border)}
.seo-in{max-width:var(--maxw);margin:0 auto;padding:48px 40px}
.seo-h2{font:700 24px/1.2 'Rubik',sans-serif;letter-spacing:-.03em;color:var(--txt);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.seo-h2::before{content:'';width:4px;height:20px;background:var(--indigo);border-radius:2px}
.seo-text{font:400 15px/1.8 'Rubik',sans-serif;color:var(--txt-2);max-width:800px}
.seo-text strong{color:var(--txt);font-weight:600}

/* ── PROVIDERS LIST PAGE ── */
.ctrl-bar{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:64px;z-index:90}
.ctrl-in{max-width:var(--maxw);margin:0 auto;padding:0 40px;height:60px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.search-wrap{position:relative;flex:1;max-width:340px}
.s-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--txt-3);pointer-events:none}
.s-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.s-input{width:100%;height:38px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--txt);font:400 13px/1 'Rubik',sans-serif;padding:0 12px 0 34px;outline:none;transition:all .15s}
.s-input:focus{border-color:rgba(99,102,241,.4);background:var(--bg);box-shadow:0 0 0 3px var(--indigo-m)}
.s-input::placeholder{color:var(--txt-3)}
.ctrl-count{font:400 12px/1 var(--mono);color:var(--txt-3)}
.ctrl-count strong{color:var(--indigo);font-weight:600}
.alpha-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.alpha-nav::-webkit-scrollbar{display:none}
.ab{min-width:28px;height:28px;padding:0 6px;font:600 11px/1 var(--mono);color:var(--txt-3);border-radius:5px;transition:all .15s;text-transform:uppercase;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ab:hover{color:var(--txt);background:var(--surface)}
.ab.on{color:var(--indigo);background:var(--indigo-l)}
.ab.off{opacity:.3;pointer-events:none}
.list-body{max-width:var(--maxw);margin:0 auto;padding:36px 40px 64px}
.feat-section{margin-bottom:48px}
.sect-label{font:500 11px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.sect-label::before{content:'';width:16px;height:1.5px;background:var(--indigo)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.feat-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;display:flex;align-items:center;gap:18px;cursor:pointer;transition:all .2s;text-decoration:none;color:inherit}
.feat-card:hover{border-color:rgba(99,102,241,.25);box-shadow:0 4px 20px rgba(99,102,241,.08);transform:translateY(-2px)}
.fc-logo{width:64px;height:64px;border-radius:var(--r);background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font:800 16px/1 'Rubik',sans-serif;color:var(--indigo);text-transform:uppercase;flex-shrink:0;overflow:hidden;padding:8px}
.fc-logo img{max-width:100%;max-height:100%;object-fit:contain}
.fc-name{font:700 17px/1.1 'Rubik',sans-serif;letter-spacing:-.03em;color:var(--txt);margin-bottom:5px}
.fc-meta{font:400 11px/1 var(--mono);color:var(--txt-3);margin-bottom:8px}
.fc-count{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 'Rubik',sans-serif;color:var(--indigo);background:var(--indigo-l);border:1px solid rgba(99,102,241,.2);border-radius:100px;padding:3px 10px}
.alpha-section{margin-bottom:36px}
.alpha-head{font:700 18px/1 'Rubik',sans-serif;letter-spacing:-.03em;color:var(--txt);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--border);display:flex;align-items:baseline;gap:12px}
.alpha-cnt{font:400 12px/1 var(--mono);color:var(--txt-3);font-size:13px;font-weight:400}
.prov-grid-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:8px}

/* ── Variant 3: Accent + list provider grid ── */
.pg3 {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  align-items: start;
}
.pg3-accent {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.pg3-accent:hover { border-color: rgba(108,99,255,.3); box-shadow: 0 4px 20px rgba(108,99,255,.08); }
.pg3-accent-tag {
  font: 500 10px/1 var(--mono);
  color: var(--indigo);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pg3-accent-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pg3-accent-logo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 'Rubik', sans-serif;
  color: var(--indigo);
  text-transform: uppercase;
  overflow: hidden;
  padding: 6px;
  flex-shrink: 0;
}
.pg3-accent-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pg3-accent-name {
  font: 600 15px/1.2 'Rubik', sans-serif;
  color: var(--txt);
  letter-spacing: -.02em;
}
.pg3-accent-meta {
  font: 400 11px/1 var(--mono);
  color: var(--txt-3);
  margin-top: 3px;
}
.pg3-accent-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.pg3-accent-stat {
  background: var(--surface);
  border-radius: 8px;
  padding: 10px 12px;
}
.pg3-accent-stat-val {
  font: 600 16px/1 'Rubik', sans-serif;
  color: var(--txt);
  letter-spacing: -.02em;
}
.pg3-accent-stat-val.rtp { color: var(--indigo); }
.pg3-accent-stat-lbl {
  font: 400 10px/1 var(--mono);
  color: var(--txt-3);
  margin-top: 4px;
}
.pg3-accent-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font: 500 11px/1 'Rubik', sans-serif;
  color: var(--indigo);
  text-decoration: none;
}
.pg3-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg3-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.pg3-item:hover { border-color: rgba(108,99,255,.25); background: var(--indigo-s,#f5f4ff); }
.pg3-item-logo {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 'Rubik', sans-serif;
  color: var(--indigo);
  text-transform: uppercase;
  overflow: hidden;
  padding: 4px;
  flex-shrink: 0;
}
.pg3-item-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pg3-item-name {
  font: 500 13px/1.2 'Rubik', sans-serif;
  color: var(--txt);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg3-item-meta {
  font: 400 11px/1 var(--mono);
  color: var(--txt-3);
  margin-top: 2px;
}
.pg3-item-slots {
  font: 500 12px/1 var(--mono);
  color: var(--txt-2);
  flex-shrink: 0;
  text-align: right;
}
.pg3-item-rtp {
  font: 600 11px/1 var(--mono);
  color: var(--indigo);
  background: var(--indigo-l,#eeeeff);
  padding: 3px 7px;
  border-radius: 100px;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .pg3 { grid-template-columns: 1fr; }
  .pg3-accent-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .pg3-accent { padding: 16px; }
  .pg3-item { padding: 10px 12px; gap: 8px; }
  .pg3-item-rtp { display: none; }
}

.pc{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 16px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;text-decoration:none;color:inherit}
.pc:hover{border-color:rgba(99,102,241,.25);box-shadow:0 4px 16px rgba(99,102,241,.08);transform:translateY(-2px)}
.pc-logo{width:48px;height:48px;border-radius:var(--r);background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font:700 13px/1 'Rubik',sans-serif;color:var(--indigo);text-transform:uppercase;overflow:hidden;padding:6px}
.pc-logo img{max-width:100%;max-height:100%;object-fit:contain}
.pc-name{font:600 14px/1.2 'Rubik',sans-serif;letter-spacing:-.02em;color:var(--txt)}
.pc-meta{font:400 11px/1 var(--mono);color:var(--txt-3)}
.pc-rtp{font:600 12px/1 var(--mono);color:var(--indigo);background:var(--indigo-l);padding:3px 9px;border-radius:100px;margin-top:2px}

/* ─════════════════════════════════════════
   SINGLE SLOT — rv-* classes from mockup
═══════════════════════════════════════════ */
.rv-hero{border-bottom:1px solid var(--border);background:var(--bg);padding:56px 0 0;position:relative;overflow:hidden}
.rv-hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 80% at 80% -10%,rgba(99,102,241,.06) 0%,transparent 60%)}
.rv-hero-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(99,102,241,.1) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse 50% 60% at 90% 0%,black,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 50% 60% at 90% 0%,black,transparent 70%)}
.rv-hero-inner{max-width:var(--maxw);margin:0 auto;padding:0 40px;position:relative;z-index:2}
.rv-hero-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start;padding-bottom:48px}
.rv-meta{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.rv-provider-link{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 'Rubik',sans-serif;color:var(--indigo);background:var(--indigo-l);border:1px solid rgba(99,102,241,.2);border-radius:100px;padding:4px 12px 4px 8px;transition:all .15s;text-decoration:none}
.rv-provider-link:hover{background:var(--indigo);color:#fff}
.rv-provider-link::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.rv-type-tag{font:400 12px/1 var(--mono);color:var(--txt-3);padding:4px 10px;border:1px solid var(--border);border-radius:100px}
.rv-year-tag{font:400 12px/1 var(--mono);color:var(--txt-3)}
.rv-h1{font:800 clamp(52px,7vw,88px)/1 'Rubik',sans-serif;letter-spacing:-.05em;color:var(--txt);margin-bottom:16px}
.rv-h1 .name-main{display:block}
.rv-h1 .name-sub{display:block;color:var(--indigo)}
.rv-updated{font:400 12px/1 var(--mono);color:var(--txt-3);margin-bottom:28px}
.rv-updated span{color:var(--txt-2)}
/* ── Score row — fix clipping ── */
.score-row{display:flex;align-items:center;gap:20px;margin-bottom:28px;flex-wrap:wrap;overflow:visible}
.editorial-block{display:flex;align-items:center;gap:14px}
.score-box{
  width:68px;height:68px;
  background:var(--indigo);
  border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 6px 20px rgba(99,102,241,.35),0 2px 6px rgba(99,102,241,.2);
  position:relative;z-index:2;
}
.score-num{font:800 28px/1 'Rubik',sans-serif;color:#fff;letter-spacing:-.04em}
.score-label{font:400 11px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}
.score-stars{display:flex;gap:3px}
.star{width:14px;height:14px;border-radius:3px;background:var(--indigo);display:flex;align-items:center;justify-content:center}
.star.half{background:linear-gradient(90deg,var(--indigo) 50%,var(--surface-2) 50%)}
.star.empty{background:var(--surface-2);border:1px solid var(--border)}
.star svg{width:9px;height:9px;fill:#fff}
.score-divider{width:1px;height:48px;background:var(--border)}
.player-num{font:700 28px/1 'Rubik',sans-serif;color:var(--txt);letter-spacing:-.04em}
.player-label{font:400 11px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.rv-actions{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.btn-demo{height:48px;padding:0 28px;background:var(--indigo);color:#fff;font:600 14px/1 'Rubik',sans-serif;border-radius:var(--r);display:inline-flex;align-items:center;gap:8px;transition:all .2s;box-shadow:0 1px 3px rgba(99,102,241,.3),0 4px 16px rgba(99,102,241,.15);cursor:pointer;border:none}
.btn-demo:hover{background:var(--indigo-d);transform:translateY(-1px)}
.btn-real{height:48px;padding:0 24px;background:var(--bg);color:var(--green);font:600 14px/1 'Rubik',sans-serif;border-radius:var(--r);border:1px solid rgba(16,185,129,.25);display:inline-flex;align-items:center;gap:8px;transition:all .2s;cursor:pointer;text-decoration:none}
.btn-real:hover{background:#ECFDF5;border-color:rgba(16,185,129,.4)}
.btn-share{width:48px;height:48px;border:1px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--txt-3);transition:all .15s;cursor:pointer}
.btn-share:hover{border-color:var(--border-m);color:var(--txt)}
.btn-share svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.rv-features{display:flex;flex-wrap:wrap;gap:5px}
.feat-chip{font:400 12px/1 'Rubik',sans-serif;padding:5px 12px;border-radius:100px}
.feat-chip.yes{background:#ECFDF5;border:1px solid rgba(16,185,129,.25);color:var(--green)}
.feat-chip.no{background:var(--surface);border:1px solid var(--border);color:var(--txt-3);text-decoration:line-through;text-decoration-color:var(--txt-3)}
.rv-data-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;position:sticky;top:80px;box-shadow:0 4px 24px rgba(15,15,35,.06)}
.rdc-header{padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:space-between}
.rdc-title{font:600 13px/1 'Rubik',sans-serif;color:var(--txt)}
.rdc-src{font:400 11px/1 var(--mono);color:var(--txt-3)}
.rdc-row{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border)}
.rdc-row:last-of-type{border:none}
.rdc-key{font:400 12px/1 var(--mono);color:var(--txt-3)}
.rdc-val{font:600 13px/1 var(--mono);color:var(--txt)}
.rdc-val.ind{color:var(--indigo)}
.rdc-val.grn{color:var(--green)}
.rdc-val.amb{color:var(--amber)}
.rdc-val.red{color:var(--red)}
.rdc-actions{padding:16px 20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.rdc-btn{height:44px;width:100%;font:600 13px/1 'Rubik',sans-serif;border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;text-decoration:none}
.rdc-btn.primary{background:var(--indigo);color:#fff;border:none}
.rdc-btn.primary:hover{background:var(--indigo-d)}
.rdc-btn.secondary{background:var(--bg);color:var(--green);border:1px solid rgba(16,185,129,.25)}
.rdc-btn.secondary:hover{background:#ECFDF5}
.stat-band{background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.stat-band::-webkit-scrollbar{display:none}
.stat-band .sb-inner{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:flex}
.sb-item{flex:1;min-width:100px;padding:20px 16px;border-right:1px solid var(--border);text-align:center;flex-shrink:0}
.sb-item:last-child{border:none}
.sb-key{font:400 10px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.sb-val{font:700 18px/1 'Rubik',sans-serif;letter-spacing:-.03em;color:var(--txt)}
.sb-val.ind{color:var(--indigo)}
.sb-val.amb{color:var(--amber)}
.sb-val.grn{color:var(--green)}
.sb-val.red{color:var(--red)}
.rv-content{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.rv-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:28px;
  padding:40px 0;
  align-items:start;
}

/* Article — main content card */
.rv-article{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:0 2px 16px rgba(15,15,35,.05), 0 1px 4px rgba(15,15,35,.04);
}
/* Game block lives outside sections — edge-to-edge with radius */
.rv-game-block{
  margin-bottom:0;
  padding:24px 28px 0;
}
.rv-section{
  padding:28px 28px 0;
}
.rv-section:first-child{
  padding-top:28px;
}
.rv-section:last-child{
  padding-bottom:28px;
}
.rv-section + .rv-section{
  border-top:1px solid var(--border);
  margin-top:28px;
  padding-top:28px;
}
.rv-sec-title{
  font:700 18px/1.1 'Rubik',sans-serif;
  letter-spacing:-.02em;
  color:var(--txt);
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:10px;
}
.rv-sec-title::before{
  content:'';
  width:3px;
  height:18px;
  background:var(--indigo);
  border-radius:2px;
  flex-shrink:0;
}

/* Aside — sticky sidebar */
.rv-aside{
  display:flex;
  flex-direction:column;
  gap:14px;
  position:sticky;
  top:88px;
}

/* Aside cards */
.aside-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:0 2px 12px rgba(15,15,35,.05), 0 1px 3px rgba(15,15,35,.04);
  overflow:hidden;
  transition:box-shadow .2s, border-color .2s;
}
.aside-card:hover{
  border-color:rgba(99,102,241,.2);
  box-shadow:0 4px 20px rgba(99,102,241,.08), 0 1px 4px rgba(15,15,35,.06);
}
/* rv-section spacing handled above */
/* rv-sec-title and aside-card consolidated above */
.rv-text{font:400 16px/1.8 'Rubik',sans-serif;color:var(--txt-2)}
.rv-text strong{color:var(--txt);font-weight:600}
.rv-game-block{margin-bottom:40px}
.rv-game-label{font:500 11px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.rv-game-label::before{content:'';width:16px;height:1.5px;background:var(--indigo)}
.rv-frame{border:1px solid var(--border);border-radius:var(--r-lg);aspect-ratio:16/9;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer;position:relative;transition:border-color .2s}
.rv-frame:hover{border-color:rgba(99,102,241,.3)}
.rv-frame-emoji{font-size:80px;opacity:.15;position:absolute}
.rv-play-circle{width:72px;height:72px;border-radius:50%;background:var(--indigo);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;box-shadow:0 4px 20px rgba(99,102,241,.3);transition:all .2s}
.rv-frame:hover .rv-play-circle{transform:scale(1.08);box-shadow:0 8px 32px rgba(99,102,241,.4)}
.rv-play-circle svg{width:28px;height:28px;fill:#fff;margin-left:4px}
.rv-play-label{font:500 13px/1 'Rubik',sans-serif;color:var(--txt-3);position:relative;z-index:2}
.score-bars{display:flex;flex-direction:column;gap:14px;overflow:visible}
.sbar-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px 14px;overflow:visible}
.sbar-label{font:500 11px/1 var(--mono);color:var(--txt-2);text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center;gap:6px}
.sbar-track{height:6px;background:var(--surface-2);border-radius:100px;overflow:hidden;min-width:0}
.sbar-fill{height:100%;border-radius:100px;background:var(--indigo);transition:width .6s ease}
.sbar-num{font:600 13px/1 var(--mono);color:var(--indigo);white-space:nowrap;display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:2px}.sbar-fill{height:100%;border-radius:100px;background:var(--indigo);transition:width .6s cubic-bezier(.4,0,.2,1)}
.sbar-num{font:600 13px/1 var(--mono);color:var(--indigo);text-align:right}
.mech-table{width:100%;border-collapse:collapse;font-size:14px;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.mech-table thead tr{background:var(--surface);border-bottom:1px solid var(--border)}
.mech-table th{font:500 11px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.1em;padding:12px 16px;text-align:left}
.mech-table tbody tr{border-bottom:1px solid var(--border);transition:background .12s}
.mech-table tbody tr:last-child{border:none}
.mech-table tbody tr:hover{background:var(--indigo-s)}
.mech-table td{padding:12px 16px;color:var(--txt-2);font-size:13px}
.mech-table td:first-child{font:400 13px/1 'Rubik',sans-serif;color:var(--txt);font-weight:500}
.td-ind{color:var(--indigo)!important;font:600 12px/1 var(--mono)!important}
.td-grn{color:var(--green)!important;font:500 13px/1 'Rubik',sans-serif!important}
.td-amb{color:var(--amber)!important}
.td-red{color:var(--red)!important}
.td-mono{font:400 12px/1 var(--mono)!important}
.rv-aside{display:flex;flex-direction:column;gap:14px}
/* aside-card consolidated above */
.ac-title{font:500 11px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.12em;padding:13px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.ac-body{padding:14px 16px}
.ac-btn{display:flex;align-items:center;justify-content:center;height:42px;width:100%;font:600 13px/1 'Rubik',sans-serif;border-radius:var(--r);cursor:pointer;margin-bottom:8px;transition:all .15s;text-decoration:none}
.ac-btn:last-child{margin:0}
.ac-btn.p{background:var(--indigo);color:#fff;border:none}
.ac-btn.p:hover{background:var(--indigo-d)}
.ac-btn.s{background:var(--bg);color:var(--green);border:1px solid rgba(16,185,129,.25)}
.ac-btn.s:hover{background:#ECFDF5}
.ac-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);gap:8px}
.ac-row:last-child{border:none}
.ac-key{font:400 12px/1 var(--mono);color:var(--txt-3)}
.ac-val{font:500 12px/1 var(--mono);color:var(--txt-2);text-align:right}
.ac-val.ind{color:var(--indigo)}
.ac-val.amb{color:var(--amber)}
.tags-wrap{display:flex;flex-wrap:wrap;gap:5px}
.ac-tag{font:400 11px/1 'Rubik',sans-serif;padding:5px 11px;border-radius:100px;background:var(--surface);border:1px solid var(--border);color:var(--txt-3);text-decoration:none;display:inline-block}
.ac-tag.on{background:var(--indigo-l);border-color:rgba(99,102,241,.25);color:var(--indigo)}
.rv-reviews{max-width:var(--maxw);margin:0 auto;padding:0 40px 64px}
.rv-reviews-inner{background:var(--bg);border:1px solid var(--border-m);border-radius:var(--r-lg);box-shadow:0 2px 16px rgba(15,15,35,.06),0 1px 4px rgba(15,15,35,.04);padding:32px;margin-bottom:32px}
.rev-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.rev-title{font:700 clamp(26px,3vw,38px)/1 'Rubik',sans-serif;letter-spacing:-.04em;color:var(--txt)}
.rev-sub{font:400 13px/1 var(--mono);color:var(--txt-3);margin-top:5px}
.rev-sub strong{color:var(--txt-2)}
.btn-write{height:40px;padding:0 20px;background:var(--indigo);color:#fff;font:600 13px/1 'Rubik',sans-serif;border-radius:var(--r);border:none;cursor:pointer;transition:background .15s;flex-shrink:0}
.btn-write:hover{background:var(--indigo-d)}
.rev-summary{display:flex;gap:28px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;margin-bottom:20px;flex-wrap:wrap}
.rs-score{flex-shrink:0;text-align:center}
.rs-big{font:800 52px/1 'Rubik',sans-serif;letter-spacing:-.05em;color:var(--txt)}
.rs-max{font:400 12px/1 var(--mono);color:var(--txt-3);margin-top:4px}
.rs-bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.rs-bar-row{display:flex;align-items:center;gap:10px}
.rs-stars-mini{display:flex;gap:2px;flex-shrink:0}
.rsm-star{width:11px;height:11px;border-radius:2px;background:var(--indigo)}
.rsm-star.e{background:var(--surface-2);border:1px solid var(--border)}
.rs-track{flex:1;height:5px;background:var(--surface-2);border-radius:100px;overflow:hidden}
.rs-fill{height:100%;border-radius:100px;background:var(--indigo)}
.rs-count{font:400 11px/1 var(--mono);color:var(--txt-3);min-width:36px;text-align:right}
.rev-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;margin-bottom:10px;transition:border-color .15s}
.rev-item:hover{border-color:rgba(99,102,241,.2)}
.ri-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.ri-avatar{width:40px;height:40px;border-radius:50%;background:var(--indigo-l);border:2px solid rgba(99,102,241,.2);display:flex;align-items:center;justify-content:center;font:700 14px/1 'Rubik',sans-serif;color:var(--indigo);text-transform:uppercase;flex-shrink:0}
.ri-info{flex:1}
.ri-name{font:600 14px/1 'Rubik',sans-serif;color:var(--txt)}
.ri-date{font:400 11px/1 var(--mono);color:var(--txt-3);margin-top:3px}
.ri-score-wrap{flex-shrink:0;text-align:right}
.ri-stars{display:flex;gap:2px;justify-content:flex-end;margin-bottom:3px}
.ri-star{width:13px;height:13px;border-radius:2px;background:var(--indigo)}
.ri-star.e{background:var(--surface-2);border:1px solid var(--border)}
.ri-score-txt{font:400 11px/1 var(--mono);color:var(--txt-3)}
.ri-proscons{margin-bottom:12px;display:flex;flex-direction:column;gap:5px}
.ri-pro{font:400 13px/1.5 'Rubik',sans-serif;color:var(--green);display:flex;align-items:flex-start;gap:7px}
.ri-pro::before{content:'+';font-weight:700;flex-shrink:0}
.ri-con{font:400 13px/1.5 'Rubik',sans-serif;color:var(--red);display:flex;align-items:flex-start;gap:7px}
.ri-con::before{content:'−';font-weight:700;flex-shrink:0}
.ri-text{font:400 14px/1.75 'Rubik',sans-serif;color:var(--txt-2);margin-bottom:14px}
.ri-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--border);
  flex-wrap:nowrap;
}
.ri-footer-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.ri-helpful{font:400 12px/1 'Rubik',sans-serif;color:var(--txt-3);white-space:nowrap}
.ri-votes{display:flex;gap:6px;align-items:center;flex-shrink:0}
.ri-vote{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:100px;padding:5px 12px;
  font:500 12px/1 'Rubik',sans-serif;color:var(--txt-2);
  cursor:pointer;transition:all .15s;
}
.ri-vote:hover{border-color:rgba(99,102,241,.3);color:var(--indigo);background:var(--indigo-s)}
.ri-vote-cnt{
  font:700 11px/1 var(--mono);
  background:var(--hover);color:var(--txt-3);
  padding:1px 5px;border-radius:20px;
  margin-left:2px;
}
.ri-vote--yes:hover,.ri-vote--yes:hover .ri-vote-cnt{color:var(--green,#10b981)}
.ri-vote--yes:hover{border-color:rgba(16,185,129,.3);background:#ecfdf5}
.ri-vote--yes:hover svg{color:var(--green,#10b981)}
.ri-vote--no:hover,.ri-vote--no:hover .ri-vote-cnt{color:var(--red,#ef4444)}
.ri-vote--no:hover{border-color:rgba(239,68,68,.3);background:#fef2f2}
.ri-vote--no:hover svg{color:var(--red,#ef4444)}
.ri-vote:disabled{opacity:.55;cursor:default}
.ri-playtime{
  display:inline-flex;align-items:center;gap:5px;
  font:500 11px/1 var(--mono);color:var(--txt-3);
  border:1px solid var(--border);border-radius:100px;
  padding:5px 10px;
  white-space:nowrap;flex-shrink:0;
}
@media(max-width:500px){
  .ri-footer{flex-wrap:wrap}
  .ri-helpful{display:none}
  .ri-footer-left{gap:6px}
}
.rv-related{background:var(--surface);border-top:1px solid var(--border)}
.rvr-inner{max-width:var(--maxw);margin:0 auto;padding:56px 40px}
.rvr-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px}
.rvr-title{font:700 clamp(24px,3vw,36px)/1 'Rubik',sans-serif;letter-spacing:-.04em;color:var(--txt)}
.rvr-link{font:500 13px/1 'Rubik',sans-serif;color:var(--indigo);display:flex;align-items:center;gap:5px;transition:gap .15s;text-decoration:none}
.rvr-link:hover{gap:8px}
.rvr-link::after{content:'→'}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rc-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all .2s;text-decoration:none;display:block;color:inherit}
.rc-card:hover{border-color:rgba(99,102,241,.25);transform:translateY(-2px);box-shadow:0 4px 16px rgba(99,102,241,.08)}
.rc-thumb{aspect-ratio:4/3;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;position:relative}
.rc-thumb img{width:100%;height:100%;object-fit:cover}
.rc-body{padding:10px 12px}
.rc-name{font:600 13px/1.2 'Rubik',sans-serif;letter-spacing:-.02em;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.rc-prov{font:400 10px/1 var(--mono);color:var(--txt-3);margin-bottom:5px}
.rc-rtp{font:600 12px/1 var(--mono);color:var(--indigo)}

/* ── COMMENT FORM ── */
.rv-comment-form,#respond{margin-top:32px;padding-top:32px;border-top:1px solid var(--border)}
#respond h3#reply-title{font:700 22px/1.1 'Rubik',sans-serif;letter-spacing:-.03em;color:var(--txt);margin-bottom:20px}
.comment-form p{margin-bottom:14px}
.comment-form label{display:block;font:500 11px/1 var(--mono);color:var(--txt-3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;font:400 14px/1.5 'Rubik',sans-serif;color:var(--txt);outline:none;transition:border-color .15s}
.comment-form input:focus,.comment-form textarea:focus{border-color:rgba(99,102,241,.4);background:var(--bg)}
.comment-form textarea{min-height:120px;resize:vertical}
.comment-form .form-submit{margin-top:20px}
.comment-form-cookies-consent{display:flex;align-items:flex-start;gap:8px}
.comment-form-cookies-consent input{width:auto;margin-top:2px;flex-shrink:0}
.comment-form-cookies-consent label{text-transform:none;font-size:13px;letter-spacing:0;display:inline}
.comment-notes,.comment-form-url{display:none}

/* ── ENTRY CONTENT ── */
.entry-content h2,.rv-text h2{font:700 24px/1.2 'Rubik',sans-serif;letter-spacing:-.03em;color:var(--txt);margin:32px 0 14px}
.entry-content h3,.rv-text h3{font:600 20px/1.2 'Rubik',sans-serif;letter-spacing:-.02em;color:var(--txt);margin:24px 0 12px}
.entry-content p,.rv-text p{color:var(--txt-2);font-size:16px;line-height:1.8}
.entry-content ul,.entry-content ol,.rv-text ul,.rv-text ol{padding-left:24px;margin-bottom:1em;color:var(--txt-2)}
.entry-content li,.rv-text li{margin-bottom:6px;line-height:1.7}
.entry-content strong,.rv-text strong{color:var(--txt);font-weight:600}
.entry-content a,.rv-text a{color:var(--indigo);text-decoration:underline}
.entry-content img{border-radius:var(--r);max-width:100%;margin:16px 0}

/* ══════════════════════════════════════════
   SLOT REVIEW CONTENT — sg-* classes
   Використовуються в оглядах згенерованих Claude
══════════════════════════════════════════ */

/* Секція заголовок */
.sg-section-title{
  font:700 22px/1.2 'Rubik',sans-serif;
  letter-spacing:-.02em;
  color:var(--txt);
  margin:36px 0 14px;
  padding-bottom:8px;
  border-bottom:2px solid var(--indigo-s);
}
.sg-section-title:first-child{ margin-top:0; }

/* Тіло секції */
.sg-section-body{ margin-bottom:8px; }
.sg-section-body p{
  color:var(--txt-2);
  font-size:16px;
  line-height:1.8;
  margin:0 0 14px;
}
.sg-section-body p:last-child{ margin-bottom:0; }

/* Маркований список */
ul.sg-list{
  list-style:none;
  padding:0;
  margin:16px 0 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
ul.sg-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.65;
  color:var(--txt-2);
  padding:10px 14px;
  background:var(--surface);
  border-radius:var(--r);
  border-left:3px solid var(--indigo);
}
ul.sg-list li::before{
  content:'•';
  color:var(--indigo);
  font-weight:700;
  font-size:18px;
  line-height:1.2;
  flex-shrink:0;
}

/* Нумерований список */
ol.sg-list{
  list-style:none;
  padding:0;
  margin:16px 0 20px;
  counter-reset:sg-counter;
  display:flex;
  flex-direction:column;
  gap:10px;
}
ol.sg-list li{
  counter-increment:sg-counter;
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.65;
  color:var(--txt-2);
  padding:10px 14px;
  background:var(--surface);
  border-radius:var(--r);
}
ol.sg-list li::before{
  content:counter(sg-counter);
  background:var(--indigo);
  color:#fff;
  font:700 11px/1 var(--mono);
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}

/* Переваги */
ul.sg-pros{
  list-style:none;
  padding:0;
  margin:14px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
ul.sg-pros li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.6;
  color:var(--txt-2);
  padding:10px 14px;
  background:#f0fdf4;
  border-radius:var(--r);
  border-left:3px solid #16a34a;
}

/* Недоліки */
ul.sg-cons{
  list-style:none;
  padding:0;
  margin:14px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
ul.sg-cons li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.6;
  color:var(--txt-2);
  padding:10px 14px;
  background:#fef2f2;
  border-radius:var(--r);
  border-left:3px solid #dc2626;
}

/* Цитата / ключовий факт */
blockquote.sg-quote{
  margin:20px 0;
  padding:16px 20px;
  background:linear-gradient(135deg, var(--indigo-s) 0%, rgba(99,102,241,.06) 100%);
  border-left:4px solid var(--indigo);
  border-radius:0 var(--r) var(--r) 0;
  font:500 15px/1.7 'Rubik',sans-serif;
  color:var(--txt);
  font-style:italic;
  position:relative;
}
blockquote.sg-quote::before{
  content:'\201C';
  position:absolute;
  top:-4px;
  left:14px;
  font-size:48px;
  line-height:1;
  color:var(--indigo);
  opacity:.25;
  font-family:Georgia,serif;
}

/* SEO блок */
.sg-seo-block{
  margin-top:32px;
  padding:16px 20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  border-top:3px solid var(--border-m);
}
.sg-seo-block p{
  font-size:14px;
  line-height:1.7;
  color:var(--txt-3);
  margin:0;
}

/* Автор-нотатка */
.sg-author-note{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--txt-3);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:100px;
  padding:5px 12px;
  margin-bottom:20px;
}
.sg-author-note strong{ color:var(--txt-2); }

/* Verdict / RTP блоки (legacy) */
.sg-verdict-block{
  padding:16px 20px;
  background:var(--indigo-s);
  border-left:4px solid var(--indigo);
  border-radius:0 var(--r) var(--r) 0;
  margin:8px 0 20px;
}
.sg-verdict-block p{ color:var(--txt);font-weight:500;margin:0; }
.sg-rtp-block{
  padding:14px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  margin:8px 0 20px;
}
.sg-rtp-block p{ margin:0;color:var(--txt-2); }

/* Specs table */
.sg-specs-wrap{ margin:16px 0 24px;overflow-x:auto; }
table.sg-specs-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
}
table.sg-specs-table th{
  width:40%;
  padding:10px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  font:600 12px/1 var(--mono);
  color:var(--txt-3);
  text-transform:uppercase;
  letter-spacing:.06em;
  text-align:left;
}
table.sg-specs-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  color:var(--txt-2);
  font-size:14px;
}
table.sg-specs-table tr:last-child th,
table.sg-specs-table tr:last-child td{ border-bottom:none; }
table.sg-specs-table tr:hover td,
table.sg-specs-table tr:hover th{ background:var(--indigo-s); }

/* Mobile */
@media(max-width:640px){
  .sg-section-title{ font-size:19px;margin:28px 0 12px; }
  .sg-section-body p{ font-size:15px; }
  ul.sg-list li, ol.sg-list li,
  ul.sg-pros li, ul.sg-cons li{ font-size:14px;padding:9px 12px; }
  blockquote.sg-quote{ padding:12px 16px;font-size:14px; }
}

/* ── RESPONSIVE ── */
/* ═══════════════════════════════════════
   RESPONSIVE — 1100px (tablet landscape)
═══════════════════════════════════════ */
@media(max-width:1100px){
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-right{display:none}
  .hero-trust-new{grid-template-columns:repeat(4,1fr)}
  .rv-hero-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .rv-data-card{position:static}
  .rv-grid{grid-template-columns:1fr}
  .rv-aside{display:grid;grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  .pa-in{grid-template-columns:1fr;gap:28px}
  .ph-layout{flex-wrap:wrap}
  .ph-stats{width:100%}
  .ph-stat{flex:1}
  .mech-explainer{grid-template-columns:1fr 1fr}
  .archive-body{grid-template-columns:240px 1fr}
  .slots-grid-4{grid-template-columns:repeat(3,1fr)}
  .slots-grid-5{grid-template-columns:repeat(4,1fr)}
  .prov-grid{grid-template-columns:repeat(3,1fr)}
  .footer-main{grid-template-columns:1fr 1fr;gap:32px}
  .fc-brand{grid-column:1/-1}
  .cats-grid{grid-template-columns:repeat(2,1fr)}
  .stats-bar-inner{grid-template-columns:repeat(4,1fr)}
}

/* ═══════════════════════════════════════
   RESPONSIVE — 900px (tablet portrait)
═══════════════════════════════════════ */
@media(max-width:900px){
  .main-nav{display:none}
  .nav-burger{display:flex}
  .rtt th:nth-child(4),.rtt td:nth-child(4),
  .rtt th:nth-child(5),.rtt td:nth-child(5){display:none}
  .hero-trust-new{grid-template-columns:repeat(2,1fr)}
  .stats-bar-inner{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════
   RESPONSIVE — 768px (mobile)
═══════════════════════════════════════ */
@media(max-width:768px){
  /* Universal padding */
  .topbar-inner,.header-inner,.ph-in,.ph-inner,.ph-inner-prov,.bc-in,
  .hero-inner,.section-inner,.nl-inner,.footer-main,.fb-inner,
  .rv-hero-inner,.rv-content,.rv-reviews,.rvr-inner,.stat-band .sb-inner,
  .slots-section,.pa-in,.th-in,.seo-in,.ctrl-in,.list-body,
  .footer-rg-inner,.stats-bar-inner{padding-left:16px;padding-right:16px}

  /* Header */
  .header-inner{height:56px}
  .filter-tabs,.ftabs,.themes-nav,.type-nav,.ctrl-bar{top:56px}
  .mob-filter-btn{display:flex;top:104px}

  /* Hero */
  .hero{padding:40px 0 36px}
  .hero-inner{padding:0 16px;gap:28px;grid-template-columns:minmax(0,1fr)}
  .hero-badge{margin-bottom:18px;font-size:11px}
  .hero-h1{font-size:clamp(32px,9vw,48px);margin-bottom:14px;letter-spacing:-.03em}
  .hero-desc{font-size:15px;line-height:1.6;margin-bottom:20px;max-width:100%;overflow:hidden;word-break:break-word}
  .hero-actions{margin-bottom:20px;gap:8px;display:grid;grid-template-columns:1fr 1fr}
  .ha-primary,.ha-secondary{display:flex !important;height:44px;font-size:14px;padding:0 12px;width:100% !important;min-width:0 !important;max-width:100%;justify-content:center;align-items:center;text-align:center;box-sizing:border-box !important}
  .hero-trust-new{grid-template-columns:1fr 1fr !important;gap:8px !important}
  .trust-badge{padding:9px 10px;min-width:0}
  .trust-badge-icon{width:26px;height:26px;border-radius:6px;flex-shrink:0}
  .trust-badge-title{font-size:11px;white-space:normal;word-break:keep-all}
  .trust-badge-sub{display:none}


  /* Breadcrumb align left, no extra padding */
  .bc-in, .sg-breadcrumbs { padding-left: 16px !important; padding-right: 16px !important; }
  /* Prevent any element from causing page overflow */
  .rv-hero, .rv-content, .bc-bar, .stat-band { max-width: 100%; overflow-x: hidden; }
  .stat-band { overflow-x: auto; }
  .stat-band .sb-inner { max-width: 100%; overflow-x: auto; padding: 0; }
  .sb-item { min-width: 90px; flex: 0 0 calc(50% - 0.5px); }

  /* ft-inner, tn-in filter tabs */
  .ft-inner, .ftabs-in, .tn-in { padding: 0 16px; }

  /* Feature chips row: ensure parent clips */
  .rv-features-wrap { overflow: hidden; }

  /* TOP-20 tables */
  .top20-section{padding:32px 0 0}
  .top20-table-wrap{border-radius:var(--r);overflow-x:auto}
  .top20-table{min-width:340px}
  .top20-table thead th{padding:8px 10px;font-size:8px}
  .top20-table td{padding:8px 10px}
  .top20-table thead th:nth-child(3),
  .top20-table td:nth-child(3),
  .top20-table thead th:nth-child(4),
  .top20-table td:nth-child(4){display:none}
  .t20-name{font-size:12px}
  .t20-prov{font-size:9px}
  .t20-thumb{width:32px;height:24px;border-radius:4px}
  .t20-slot{gap:8px}
  .t20-rating{font-size:11px;gap:2px}
  .t20-rtp{font-size:11px}
  .t20-dash{font-size:11px}
  .t20-r1,.t20-r2,.t20-r3,.t20-rn{font-size:10px;padding:2px 5px}

  /* Old RTP table */
  .rtp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rtt{min-width:400px;font-size:12px}
  .rtt th,.rtt td{padding:9px 10px}
  .rtt th:nth-child(4),.rtt td:nth-child(4),
  .rtt th:nth-child(5),.rtt td:nth-child(5){display:none}
  .rt-thumb{width:36px;height:26px;border-radius:4px}
  .rt-name{font-size:12px}
  .rt-prov{font-size:10px}
  .rt-rtp{font-size:12px}
  .rt-btn{font-size:11px;padding:5px 10px}

  /* Stats bar */
  .stats-bar-inner{grid-template-columns:repeat(2,1fr);padding-left:0;padding-right:0}
  /* Stat band (single slot) */
  .stat-band .sb-inner{padding:0 16px;flex-wrap:wrap}
  .sb-item{min-width:calc(50% - 1px);flex:0 0 calc(50% - 1px);flex-shrink:0}
  .stats-bar-inner .sb-item{padding:16px 0;border-bottom:1px solid var(--border)}
  .stats-bar-inner .sb-item:nth-child(odd){border-right:1px solid var(--border)}
  .stats-bar-inner .sb-val{font-size:22px}

  /* Section headers */
  .section-header{flex-direction:column;align-items:flex-start;gap:8px}
  .sh-title{font-size:clamp(24px,7vw,36px)}
  .sh-link{font-size:13px}

  /* Slots grid */
  .archive-body{display:block}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(320px,88vw);height:100dvh!important;background:var(--bg);border-right:1px solid var(--border);box-shadow:4px 0 40px rgba(15,15,35,.12);z-index:300;transform:translateX(-110%);transition:transform .3s cubic-bezier(.4,0,.2,1);padding:0 20px 80px}
  .sidebar.open{transform:translateX(0)}
  .sb-close-row{display:flex}
  .archive-main{padding:0 0 48px}
  .results-bar{padding:12px 16px;border-bottom:1px solid var(--border);margin-bottom:0}
  .active-filters{padding:10px 16px 0}
  .slots-grid{padding:12px 16px}
  .pagination{padding:0 16px 32px}

  /* TOP-20 tables */
  .top20-table thead th:nth-child(3),
  .top20-table td:nth-child(3),
  .top20-table thead th:nth-child(4),
  .top20-table td:nth-child(4){display:none}
  .top20-table td,.top20-table thead th{padding:8px 10px}
  .t20-name{font-size:12px}
  .t20-thumb{width:34px;height:26px}

  /* RTP table */
  .rtt th:nth-child(4),.rtt td:nth-child(4),
  .rtt th:nth-child(5),.rtt td:nth-child(5),
  .rtt th:nth-child(6),.rtt td:nth-child(6){display:none}

  /* Provider grid */
  .prov-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .pi-logo{width:48px;height:48px;padding:6px}
  .pi-name{font-size:12px}
  .pi-count{font-size:10px}

  /* Cats */
  .cats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .cat-item{padding:14px}
  .cat-icon{font-size:22px}
  .cat-name{font-size:13px}

  /* Taxonomy pages */
  .theme-body,.type-body{display:block}
  .theme-sidebar,.type-sidebar{border-right:none;border-bottom:1px solid var(--border);padding:16px}
  .ts-item{display:inline-flex;width:auto;margin:0 4px 4px 0;padding:6px 12px;border:1px solid var(--border);border-radius:100px}
  .ts-item.on{background:var(--indigo-l)}
  .th-icon-big{display:none}

  /* Single slot */
  .rv-h1{font-size:clamp(28px,8vw,48px)}
  .rv-aside{grid-template-columns:1fr}
  .related-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .sbar-row{grid-template-columns:80px 1fr auto}
  .rv-article{border-radius:var(--r)}
  .rv-section{padding:18px 16px 0}
  .rv-section:last-child{padding-bottom:18px}
  .rv-section+.rv-section{margin-top:18px;padding-top:18px}

  /* Newsletter */
  .nl-inner{flex-direction:column;align-items:flex-start;gap:16px}
  .nl-form{width:100%}

  /* Page provajdery */
  .feat-grid{grid-template-columns:1fr}
  .prov-grid-list{grid-template-columns:repeat(2,1fr);gap:6px}
  .ctrl-in{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:10px}
  .search-wrap{max-width:100%;flex:1 1 100%;order:-1}
  .alpha-nav{margin-left:0}
  .ph-h1{font-size:clamp(28px,8vw,48px)}

  /* Footer mobile — 2-col nav, compact */
  .footer-main{grid-template-columns:1fr 1fr;gap:20px 24px;padding:28px 16px}
  .fc-brand{grid-column:1/-1;padding-bottom:20px;border-bottom:1px solid var(--border)}
  .fc-brand .brand-desc,.footer-desc{max-width:100%;margin-bottom:12px}
  .footer-stats{max-width:280px}
  .footer-rg-inner{padding:0 16px;gap:10px}
  .footer-rg-label{width:100%}
  .footer-rg-logos{gap:10px}
  .footer-rg-logo img{height:22px}
  .fb-inner{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 16px}
  .footer-bottom-nav ul{flex-wrap:wrap;gap:4px 0}
  .footer-bottom-nav a{padding:0 8px}
  .fb-rg,.footer-rg-strip{display:none}
}

/* ═══════════════════════════════════════
   RESPONSIVE — 480px (small mobile)
═══════════════════════════════════════ */
@media(max-width:480px){
  .hero-h1{font-size:30px}

  .slots-grid,.slots-grid-4,.slots-grid-5{grid-template-columns:repeat(2,1fr);gap:8px}
  .prov-grid{grid-template-columns:repeat(2,1fr)}
  .rv-h1{font-size:26px}
  .related-grid,.cats-grid{grid-template-columns:repeat(2,1fr)}
  .mech-explainer{grid-template-columns:1fr}

  .ph-stats{display:grid;grid-template-columns:repeat(3,1fr)}
  .ph-stat{border-right:none;border-bottom:1px solid var(--border);padding:12px 14px}
  .ph-stat:last-child{grid-column:1/-1;border:none}

  .top20-table .t20-slot{min-width:0}
  .top20-table .t20-prov{display:none}
  .top20-table thead th:nth-child(5),
  .top20-table td:nth-child(5){display:none}

  .rv-frame-new{aspect-ratio:4/3}
  .sbar-row{grid-template-columns:64px 1fr auto;gap:6px 8px}
  .sbar-label{font-size:9px}
  .sbar-label svg{display:none}
  .sbar-num{font-size:11px}
}


/* ═══════════════════════════════════════════
   SEARCH OVERLAY — full-screen live search
═══════════════════════════════════════════ */

/* Overlay container */
.sg-search {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
}
.sg-search.is-open {
  pointer-events: all;
  visibility: visible;
}

/* Backdrop */
.sg-search-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,15,35,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .25s ease;
  cursor: pointer;
}
.sg-search.is-open .sg-search-backdrop { opacity: 1; }

/* Panel */
.sg-search-panel {
  position: relative; z-index: 2;
  width: 100%; max-width: 720px;
  background: var(--bg);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 20px 60px rgba(15,15,35,.25), 0 1px 0 rgba(99,102,241,.15);
  display: flex; flex-direction: column;
  max-height: 85vh;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.3,.64,1), opacity .25s ease;
  overflow: hidden;
}
.sg-search.is-open .sg-search-panel {
  transform: translateY(0);
  opacity: 1;
}

/* Input row */
.sg-search-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sg-si-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--txt-3); pointer-events: none;
  transition: color .15s;
}
.sg-si-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.sg-search-input-row:focus-within .sg-si-icon { color: var(--indigo); }

.sg-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font: 500 18px/1 'Rubik', sans-serif;
  color: var(--txt); caret-color: var(--indigo);
  min-width: 0;
}
.sg-search-input::placeholder { color: var(--txt-3); font-weight: 400; }

/* Spinner */
.sg-search-spinner {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--border);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: sg-spin .6s linear infinite;
  display: none;
}
.sg-search.is-loading .sg-search-spinner { display: block; }
@keyframes sg-spin { to { transform: rotate(360deg); } }

/* Clear & Close */
.sg-search-clear, .sg-search-close-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--txt-3);
}
.sg-search-clear svg, .sg-search-close-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.sg-search-clear:hover { border-color: var(--border-m); color: var(--txt); background: var(--surface-2); }
.sg-search-close-btn {
  background: transparent; border: 1px solid var(--border);
  font: 600 10px/1 var(--mono); color: var(--txt-3);
  padding: 0 8px; width: auto; border-radius: 5px; gap: 0;
  letter-spacing: .05em;
}
.sg-search-close-btn:hover { border-color: var(--border-m); color: var(--txt); }

/* Body */
.sg-search-body {
  overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  flex: 1;
}
.sg-search-body::-webkit-scrollbar { width: 4px; }
.sg-search-body::-webkit-scrollbar-thumb { background: var(--border-m); border-radius: 4px; }

/* ── DEFAULT STATE (empty query) ── */
.sg-search-default { padding: 24px 20px; }
.sg-sd-section { margin-bottom: 22px; }
.sg-sd-section:last-child { margin-bottom: 0; }
.sg-sd-title {
  font: 500 10px/1 var(--mono); color: var(--txt-3);
  text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.sg-sd-title::before { content: ''; width: 14px; height: 1.5px; background: var(--indigo); }
.sg-sd-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-sd-pill {
  font: 400 12px/1 'Rubik', sans-serif;
  padding: 6px 14px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--txt-2); text-decoration: none;
  transition: all .15s; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.sg-sd-pill:hover { background: var(--indigo-l); border-color: rgba(99,102,241,.3); color: var(--indigo); }
.sg-sd-pill-icon { font-size: 13px; }

/* ── RESULTS ── */
.sg-search-results { padding: 8px 0; }

@keyframes sg-sr-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.sg-sr-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px; text-decoration: none; color: inherit;
  cursor: pointer; transition: background .12s;
  opacity: 0;
  animation: sg-sr-in .18s ease forwards;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sg-sr-item:last-child { border-bottom: none; }
.sg-sr-item:nth-child(1)  { animation-delay:  0ms; }
.sg-sr-item:nth-child(2)  { animation-delay: 25ms; }
.sg-sr-item:nth-child(3)  { animation-delay: 50ms; }
.sg-sr-item:nth-child(4)  { animation-delay: 75ms; }
.sg-sr-item:nth-child(5)  { animation-delay:100ms; }
.sg-sr-item:nth-child(6)  { animation-delay:125ms; }
.sg-sr-item:nth-child(7)  { animation-delay:150ms; }
.sg-sr-item:nth-child(8)  { animation-delay:175ms; }

.sg-sr-item:hover, .sg-sr-item.is-active {
  background: var(--indigo-s);
}
.sg-sr-item.is-active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--indigo); border-radius: 0 2px 2px 0;
}

/* Thumbnail */
.sg-sr-thumb {
  width: 56px; height: 42px; flex-shrink: 0;
  border-radius: var(--r); overflow: hidden;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; border: 1px solid var(--border);
  position: relative;
}
.sg-sr-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Body */
.sg-sr-body { flex: 1; min-width: 0; }
.sg-sr-name {
  font: 600 14px/1.2 'Rubik', sans-serif;
  letter-spacing: -.02em; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.sg-sr-name mark {
  background: transparent; color: var(--indigo); font-weight: 700;
}
.sg-sr-meta {
  font: 400 11px/1 var(--mono); color: var(--txt-3);
  display: flex; align-items: center; gap: 8px;
}

/* Badges */
.sg-sr-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sg-sr-rtp {
  font: 600 12px/1 var(--mono); color: var(--indigo);
  background: var(--indigo-l); padding: 3px 9px;
  border-radius: 100px; border: 1px solid rgba(99,102,241,.2);
}
.sg-sr-vol {
  font: 400 10px/1 var(--mono); padding: 2px 7px;
  border-radius: 100px; border: 1px solid var(--border);
  color: var(--txt-3);
}
.sg-sr-arr {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--txt-3); font-size: 13px;
  transition: all .15s;
}
.sg-sr-item:hover .sg-sr-arr, .sg-sr-item.is-active .sg-sr-arr {
  background: var(--indigo); border-color: var(--indigo); color: #fff;
}

/* Results header */
.sg-sr-header {
  padding: 10px 20px 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.sg-sr-count { font: 400 11px/1 var(--mono); color: var(--txt-3); }
.sg-sr-all {
  font: 500 11px/1 'Rubik', sans-serif;
  color: var(--indigo); text-decoration: none;
  display: flex; align-items: center; gap: 4px;
}
.sg-sr-all:hover { text-decoration: underline; }
.sg-sr-all::after { content: '→'; }

/* Empty state */
.sg-search-empty {
  padding: 48px 20px;
  text-align: center;
}
.sg-search-empty-emoji { font-size: 40px; margin-bottom: 14px; opacity: .5; }
.sg-search-empty-title {
  font: 600 16px/1 'Rubik', sans-serif;
  color: var(--txt); margin-bottom: 8px;
}
.sg-search-empty-desc {
  font: 400 13px/1 var(--mono); color: var(--txt-3);
}

/* Footer hints */
.sg-search-footer {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 20px; border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.sg-search-footer span {
  display: flex; align-items: center; gap: 5px;
  font: 400 11px/1 var(--mono); color: var(--txt-3);
}
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  font: 600 10px/1 var(--mono); color: var(--txt-2);
  background: var(--bg); border: 1px solid var(--border-m);
  border-radius: 4px; box-shadow: 0 1px 0 var(--border-m);
}

/* Hotkey badge in search button */
/* search hotkey removed from button */

/* Mobile */
@media (max-width: 768px) {
  .sg-search-panel {
    max-width: 100%; border-radius: 0;
    max-height: 100dvh; height: 100dvh;
  }
  .sg-search { align-items: flex-start; }
  .sg-search-input { font-size: 16px; } /* prevent iOS zoom */
  .sg-search-footer { display: none; }
  .sg-search-input-row { padding: 14px 16px; }
  .sg-search-default { padding: 20px 16px; }
  .sg-sr-item { padding: 10px 16px; }
  .sg-sr-header { padding: 8px 16px; }
}

/* Body lock when search open */
body.sg-search-lock { overflow: hidden; }

/* ═══════════════════════════════════════════
   FEATURE PILLS — redesigned with SVG icons
═══════════════════════════════════════════ */
.rv-features-wrap { margin-bottom: 0; }
.rv-features-row  { display: flex; flex-wrap: wrap; gap: 6px; }

.feat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 100px;
  font: 500 12px/1 'Rubik', sans-serif;
  transition: all .18s;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}

/* ── YES: active feature ── */
.feat-pill-yes {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  border: 1px solid rgba(99,102,241,.3);
  color: var(--indigo);
  box-shadow: 0 1px 4px rgba(99,102,241,.12);
}
.feat-pill-yes:hover {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
  box-shadow: 0 2px 10px rgba(99,102,241,.3);
  transform: translateY(-1px);
  text-decoration: none;
}
.feat-pill-yes .feat-pill-icon { color: var(--indigo); transition: color .18s; }
.feat-pill-yes:hover .feat-pill-icon { color: #fff; }

/* ── NO: inactive feature — muted, no strikethrough ── */
.feat-pill-no {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--txt-3);
  opacity: .55;
}
.feat-pill-no:hover {
  border-color: var(--border-m);
  color: var(--txt-2);
  opacity: .8;
  text-decoration: none;
}
.feat-pill-no .feat-pill-icon {
  color: var(--txt-3);
}

/* Icon wrapper — consistent sizing */
.feat-pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
}
.feat-pill-icon svg {
  display: block;
}

/* ═══════════════════════════════════════════
   DEMO FRAME — beautiful slot preview
═══════════════════════════════════════════ */

/* Label row */
.rv-game-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.rv-game-label {
  font: 500 11px/1 var(--mono); color: var(--indigo);
  text-transform: uppercase; letter-spacing: .14em;
  display: flex; align-items: center; gap: 8px;
}
.rv-game-label::before { content: ''; width: 20px; height: 1.5px; background: var(--indigo); }
.rv-game-label svg { flex-shrink: 0; color: var(--indigo); }
.rv-game-badges { display: flex; gap: 6px; }
.rv-game-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font: 400 10px/1 var(--mono); color: var(--txt-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 100px; padding: 3px 9px;
}

/* Main frame container */
.rv-frame-new {
  position: relative; border-radius: var(--r-lg);
  overflow: hidden; aspect-ratio: 16/9;
  cursor: pointer;
  /* Decorative border with gradient */
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 2px rgba(99,102,241,.15),
    0 4px 24px rgba(99,102,241,.12),
    0 1px 4px rgba(15,15,35,.08);
  transition: box-shadow .3s, transform .2s;
}
.rv-frame-new:hover {
  box-shadow:
    0 0 0 2px rgba(99,102,241,.4),
    0 8px 40px rgba(99,102,241,.2),
    0 2px 8px rgba(15,15,35,.08);
  transform: translateY(-2px);
}

/* Slot background image */
.rv-frame-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease, filter .3s;
  filter: brightness(.85) saturate(1.05);
}
.rv-frame-new:hover .rv-frame-bg {
  transform: scale(1.03);
  filter: brightness(.7) saturate(1.1);
}

/* No-image placeholder */
.rv-frame-no-img {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  display: flex; align-items: center; justify-content: center;
}

/* Dark gradient overlay for text readability */
.rv-frame-grad {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15,15,35,.1) 0%,
    rgba(15,15,35,.0) 30%,
    rgba(15,15,35,.55) 70%,
    rgba(15,15,35,.8) 100%
  );
  transition: opacity .3s;
}
.rv-frame-new:hover .rv-frame-grad {
  background: linear-gradient(
    to bottom,
    rgba(15,15,35,.2) 0%,
    rgba(15,15,35,.1) 30%,
    rgba(15,15,35,.65) 70%,
    rgba(15,15,35,.85) 100%
  );
}

/* Corner badges */
.rv-frame-prov {
  position: absolute; top: 12px; left: 12px; z-index: 10;
  font: 600 10px/1 var(--mono); letter-spacing: .08em;
  color: rgba(255,255,255,.9);
  background: rgba(15,15,35,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 10px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.15);
}
.rv-frame-rtp {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  font: 700 11px/1 var(--mono);
  color: #fff;
  background: var(--indigo);
  padding: 4px 10px; border-radius: 100px;
  box-shadow: 0 2px 8px rgba(99,102,241,.4);
}

/* Centered play button */
.rv-frame-play-wrap {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}
.rv-frame-play-btn {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--indigo);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px rgba(99,102,241,.2), 0 8px 32px rgba(99,102,241,.4);
  transition: all .25s cubic-bezier(.34,1.5,.64,1);
  position: relative; z-index: 2;
}
.rv-frame-new:hover .rv-frame-play-btn {
  transform: scale(1.12);
  box-shadow: 0 0 0 12px rgba(99,102,241,.15), 0 12px 40px rgba(99,102,241,.5);
}
.rv-frame-play-btn svg { margin-left: 4px; }

.rv-frame-play-title {
  font: 700 16px/1 'Rubik', sans-serif;
  color: #fff; letter-spacing: -.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.rv-frame-play-sub {
  font: 400 12px/1 var(--mono); color: rgba(255,255,255,.6);
  text-align: center;
}

/* Pulsing ring */
.rv-frame-pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(99,102,241,.4);
  animation: rv-pulse 2.5s ease-out infinite;
  pointer-events: none; z-index: 1;
}
@keyframes rv-pulse {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: .8; }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}

/* Loading state */
.rv-frame-new.rv-frame-loading .rv-frame-play-wrap { opacity: 0; }
.rv-frame-new.rv-frame-loading .rv-frame-bg { filter: brightness(.5) blur(4px); }
.rv-frame-new.rv-frame-loading .rv-frame-pulse { animation: none; }

/* Responsive */
@media (max-width: 768px) {
  .rv-frame-play-btn { width: 60px; height: 60px; }
  .rv-frame-play-btn svg { width: 22px; height: 22px; }
  .rv-frame-pulse { width: 60px; height: 60px; }
  .rv-frame-play-title { font-size: 14px; }
  .rv-frame-play-sub { display: none; }
}

/* ═══════════════════════════════════════════
   TRUST BADGES — redesigned SVG strip
═══════════════════════════════════════════ */
@media(min-width:769px){
.hero-trust-new {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
}
.trust-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 9px 11px;
  transition: border-color .2s, transform .2s;
  cursor: default;
  min-width: 0;
}
.trust-badge:hover {
  border-color: color-mix(in srgb, var(--c, #6366F1) 35%, transparent);
  transform: translateY(-1px);
}
.trust-badge-icon {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c, #6366F1) 12%, transparent);
  color: var(--c, #6366F1);
}
.trust-badge-title {
  font: 600 11px/1.2 'Rubik', sans-serif;
  color: var(--txt); letter-spacing: -.01em;
  white-space: normal; word-break: keep-all;
}
.trust-badge-sub {
  font: 400 10px/1 var(--mono); color: var(--txt-3);
  margin-top: 3px; white-space: nowrap;
}

/* ═══════════════════════════════════════════
   SC EDITORIAL BADGE — bottom-right of card thumb
═══════════════════════════════════════════ */
.sc-edit-badge, .hc-edit-badge {
  position: absolute; bottom: 7px; right: 7px; z-index: 4;
  display: inline-flex; align-items: center; gap: 3px;
  font: 700 10px/1 var(--mono);
  color: #fff;
  background: rgba(15,15,35,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3px 7px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}
.sc-edit-badge svg, .hc-edit-badge svg {
  color: #F59E0B; flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   HERO CARDS — clickable + animated
═══════════════════════════════════════════ */
.hc {
  text-decoration: none;
  display: block;
  transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s ease;
}
.hc-1:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(15,15,35,.14), 0 4px 12px rgba(15,15,35,.08) !important;
  z-index: 10 !important;
}
.hc-2:hover {
  transform: rotate(-3deg) translateY(4px) scale(1.02) !important;
  z-index: 10 !important;
  opacity: .9 !important;
}
.hc-3:hover {
  transform: rotate(3deg) translateY(8px) scale(1.02) !important;
  z-index: 10 !important;
  opacity: .65 !important;
}
/* Thumb image subtle zoom on hc hover */
.hc:hover .hc-thumb img {
  transform: scale(1.05);
  transition: transform .4s ease;
}
.hc-thumb img { transition: transform .4s ease; }

/* color-mix fallback for browsers without support */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .trust-badge-icon { background: var(--indigo-l); }
}

/* ── Slot disclaimer ── */
.slot-disclaimer {
  padding: 32px 40px;
  margin-top: 40px;
}
.slot-disclaimer-inner {
  max-width: 860px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  display: flex; align-items: flex-start; gap: 12px;
}
.slot-disclaimer-icon {
  flex-shrink: 0; margin-top: 2px;
  width: 32px; height: 32px;
  background: var(--indigo-l);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--indigo);
}
.slot-disclaimer-text {
  font: 400 12px/1.7 var(--mono);
  color: var(--txt-3);
}
.slot-disclaimer-text strong { color: var(--txt-2); }
@media(max-width:768px){
  .slot-disclaimer { padding: 20px 16px; }
  .slot-disclaimer-inner { padding: 14px 14px; }
}


/* ═══════════════════════════════════════
   RATING BLOCKS — variant D (below thumb)
═══════════════════════════════════════ */
.sc-rating-d{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:6px 0 7px}
.sc-rd-block{background:#F7F8FB;border-radius:7px;padding:6px 8px;display:flex;align-items:center;gap:6px}
.sc-rd-icon{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-rd-icon.edit{background:rgba(99,102,241,.12);color:#6366F1}
.sc-rd-icon.user{background:rgba(245,158,11,.12);color:#D97706}
.sc-rd-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.sc-rd-label{font:400 8px/1 'JetBrains Mono',monospace;color:#A8A9BC;text-transform:uppercase;letter-spacing:.04em}
.sc-rd-num{font:700 14px/1 'Rubik',sans-serif}
.sc-rd-num.edit{color:#6366F1}
.sc-rd-num.user{color:#D97706}
.sc-rd-num.none{font:400 11px/1 'JetBrains Mono',monospace;color:#A8A9BC}

/* ═══════════════════════════════════════
   DUAL RATING BADGE — variant B
═══════════════════════════════════════ */
.sc-dual-badge {
  position: absolute; bottom: 6px; right: 6px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(15,15,35,.75);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1);
  pointer-events: none; white-space: nowrap;
}
.sdb-ed  { display:flex;align-items:center;gap:2px;font:700 10px/1 var(--mono);color:#818CF8 }
.sdb-usr { display:flex;align-items:center;gap:2px;font:700 10px/1 var(--mono);color:#FCD34D }
.sdb-sep { font:400 10px/1 var(--mono);color:rgba(255,255,255,.25) }

/* ═══════════════════════════════════════
   TOP-20 TABLES
═══════════════════════════════════════ */
.top20-section { padding: 48px 0 }
.top20-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
}
.top20-table { width: 100%; border-collapse: collapse; }
.top20-table thead th {
  font: 500 10px/1 var(--mono); color: var(--txt-3);
  text-transform: uppercase; letter-spacing: .1em;
  padding: 11px 14px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.top20-table thead th:first-child { width: 48px; text-align: center; }
.top20-table thead th.r { text-align: right; }
.top20-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.top20-table tbody tr:last-child { border-bottom: none; }
.top20-table tbody tr:hover { background: var(--surface); }
.top20-table td { padding: 10px 14px; vertical-align: middle; }

/* Rank badge */
.t20-rank { display:flex; align-items:center; justify-content:center; }
.t20-r1 { background:var(--indigo); color:#fff; font:700 11px/1 var(--mono); padding:3px 8px; border-radius:6px; }
.t20-r2 { background:var(--indigo-l); color:var(--indigo); font:700 11px/1 var(--mono); padding:3px 8px; border-radius:6px; }
.t20-r3 { background:#E0E7FF; color:#4338CA; font:700 11px/1 var(--mono); padding:3px 8px; border-radius:6px; }
.t20-rn { color:var(--txt-3); font:400 12px/1 var(--mono); padding:3px 8px; }

/* Slot info cell */
.t20-slot { display:flex; align-items:center; gap:10px; }
.t20-thumb {
  width: 44px; height: 32px; border-radius: 6px; flex-shrink: 0;
  overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.t20-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.t20-name { font:600 13px/1.2 'Rubik',sans-serif; letter-spacing:-.01em; color:var(--txt); }
.t20-prov { font:400 10px/1 var(--mono); color:var(--txt-3); margin-top:2px; }

/* Rating cells */
.t20-rtp { font:600 12px/1 var(--mono); color:var(--indigo); text-align:right; }
.t20-rating {
  display:flex; align-items:center; gap:3px;
  justify-content:flex-end; font:700 12px/1 var(--mono);
}
.t20-rating.ed { color:var(--indigo); }
.t20-rating.usr { color:#D97706; }

@media (max-width: 768px) {
  .top20-table thead th:nth-child(3),
  .top20-table td:nth-child(3) { display: none; }
  .top20-table thead th:nth-child(4),
  .top20-table td:nth-child(4) { display: none; }
}

/* table row hover + link styles */
.t20-row:hover .t20-name { color: var(--indigo); }
.t20-slot { display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit }
.t20-slot:hover .t20-name { color: var(--indigo); }
.t20-prov-link { color:var(--txt-3);font:400 11px/1 var(--mono);text-decoration:none; }
.t20-prov-link:hover { color:var(--indigo); }
.t20-abbr { font:700 10px/1 var(--mono);color:var(--txt-3) }
.t20-dash { color:var(--txt-3);font-size:11px }

.ac-divider{height:1px;background:var(--border);margin:4px 0}

/* ═══════════════════════════════════════
   HERO MOBILE CARDS — horizontal scroll
═══════════════════════════════════════ */
.hero-mob-scroll {
  display: none;
}
@media (max-width: 1100px) {
  .hero-mob-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  .hero-mob-scroll::-webkit-scrollbar { display: none; }
}
.hmc-card {
  flex-shrink: 0;
  width: 140px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.hmc-card:hover {
  border-color: rgba(99,102,241,.3);
  transform: translateY(-2px);
}
.hmc-thumb {
  height: 100px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hmc-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.hmc-rtp {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  background: var(--indigo); color: #fff;
  font: 600 9px/1 var(--mono);
  padding: 3px 6px; border-radius: 100px;
}
.hmc-score {
  position: absolute; bottom: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; gap: 2px;
  background: rgba(15,15,35,.72);
  color: #FCD34D;
  font: 700 9px/1 var(--mono);
  padding: 3px 6px; border-radius: 4px;
}
.hmc-body { padding: 8px 9px 9px; }
.hmc-name {
  font: 600 11px/1.3 'Rubik', sans-serif;
  color: var(--txt);
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 2px;
}
.hmc-prov {
  font: 400 9px/1 var(--mono);
  color: var(--txt-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hmc-top-badge {
  position: absolute; bottom: 6px; right: 6px; z-index: 2;
  background: #059669; color: #fff;
  font: 700 8px/1 var(--mono);
  padding: 3px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ═══════════════════════════════════════
   MOBILE DRAWER — modern slide-in menu
═══════════════════════════════════════ */
.mob-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
}
@media (max-width: 900px) {
  .mob-drawer { display: block; }
}
.mdr-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,15,35,.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .28s ease;
}
.mob-drawer.is-open .mdr-backdrop { opacity: 1; }
.mdr-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 48px rgba(15,15,35,.12);
}
.mob-drawer.is-open .mdr-panel { transform: translateX(0); }

/* Pointer events only when open */
.mob-drawer:not(.is-open) { pointer-events: none; }
.mob-drawer.is-open { pointer-events: auto; }

/* Head */
.mdr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mdr-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mdr-close {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--txt-2); transition: all .15s;
}
.mdr-close:hover { background: var(--surface-2); color: var(--txt); }

/* Search btn */
.mdr-search-btn {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 18px 0;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer; text-align: left; width: calc(100% - 36px);
  color: var(--txt-3); font: 400 13px/1 'Rubik',sans-serif;
  transition: border-color .15s;
}
.mdr-search-btn:hover { border-color: var(--indigo); color: var(--txt-2); }
.mdr-search-btn span:first-of-type { flex: 1; }
.mdr-search-hint {
  font: 400 10px/1 var(--mono);
  color: var(--txt-3);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 2px 5px; border-radius: 4px;
  white-space: nowrap;
}

/* Nav */
.mdr-nav { display: flex; flex-direction: column; padding: 10px 10px 0; }
.mdr-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: 10px;
  text-decoration: none; color: var(--txt);
  font: 500 14px/1 'Rubik',sans-serif;
  transition: background .12s, color .12s;
  position: relative;
}
.mdr-nav-item:hover { background: var(--surface); }
.mdr-nav-item.active {
  background: var(--indigo-l);
  color: var(--indigo);
}
.mdr-nav-item.active .mdr-nav-icon { background: rgba(99,102,241,.15); color: var(--indigo); }
.mdr-nav-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  background: var(--surface); color: var(--txt-2);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.mdr-nav-arrow { color: var(--txt-3); margin-left: auto; flex-shrink: 0; }

/* Divider */
.mdr-divider { height: 1px; background: var(--border); margin: 14px 18px; }

/* Stats */
.mdr-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 0 18px;
}
.mdr-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 8px; text-align: center;
}
.mdr-stat-val { font: 700 18px/1 'Rubik',sans-serif; color: var(--txt); letter-spacing: -.03em; margin-bottom: 3px; }
.mdr-stat-key { font: 400 10px/1 var(--mono); color: var(--txt-3); text-transform: uppercase; letter-spacing: .06em; }

/* Footer */
.mdr-footer { padding: 16px 18px 32px; margin-top: auto; }
.mdr-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px;
  background: var(--indigo); color: #fff;
  font: 600 14px/1 'Rubik',sans-serif;
  border-radius: var(--r); text-decoration: none;
  transition: background .15s; margin-bottom: 14px;
}
.mdr-cta:hover { background: var(--indigo-d); }
.mdr-rg {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 400 11px/1 var(--mono); color: var(--txt-3);
}
.mdr-rg-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #10B981; flex-shrink: 0;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.6; transform:scale(.8); }
}

/* ═══════════════════════════════════════════════════
   SINGLE SLOT PAGE — MOBILE (one clean block, no duplicates)
   Applied: max-width 768px
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero container */
  .rv-hero { padding: 20px 0 0; }
  .rv-hero-inner { padding: 0 16px !important; }
  .rv-hero-grid { grid-template-columns: minmax(0,1fr) !important; padding-bottom: 0; gap: 0; }

  /* Give the direct child div min-width:0 so it can't expand grid track */
  .rv-hero-grid > div:first-child { min-width: 0; overflow: hidden; }

  /* Meta, title, date */
  .rv-meta { gap: 6px; margin-bottom: 10px; }
  .rv-provider-link { font-size: 11px; padding: 3px 9px 3px 7px; }
  .rv-type-tag, .rv-year-tag { font-size: 10px; padding: 3px 8px; }
  .rv-h1 { font-size: clamp(22px,6.5vw,34px) !important; margin-bottom: 6px; line-height: 1.1; }
  .rv-updated { font-size: 10px; margin-bottom: 12px; }

  /* Score row — side by side */
  .score-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px;
    margin-bottom: 14px;
    overflow: visible;
  }
  .editorial-block { gap: 8px; flex-shrink: 1; min-width: 0; }
  .score-box { width: 44px !important; height: 44px !important; border-radius: 8px !important; flex-shrink: 0; }
  .score-num { font-size: 18px !important; }
  .score-label { font-size: 9px; letter-spacing: .04em; margin-bottom: 4px; }
  .score-stars svg { width: 11px; height: 11px; }
  .score-divider { display: block !important; width: 1px; height: 32px; flex-shrink: 0; }
  .player-block { min-width: 0; flex-shrink: 1; }
  .player-num { font-size: 18px !important; }
  .player-label { font-size: 9px; }

  /* Action buttons */
  .rv-actions { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .btn-demo {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    height: 46px;
    padding: 0 16px;
    justify-content: center;
    font-size: 14px;
    box-sizing: border-box;
  }
  .btn-real {
    flex: 1 1 100px !important;
    min-width: 0 !important;
    max-width: calc(100% - 50px) !important;
    height: 42px;
    justify-content: center;
    font-size: 13px;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .btn-share {
    flex: 0 0 42px !important;
    width: 42px;
    height: 42px;
  }

  /* Feature chips — horizontal scroll */
  .rv-features-wrap { margin-bottom: 12px; }
  .rv-features-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .rv-features-row::-webkit-scrollbar { display: none; }
  .rv-features-row + .rv-features-row { margin-top: 6px !important; }
  .feat-pill { flex-shrink: 0; white-space: nowrap; }

}

/* ═══════════════════════════════════════
   DEMO FRAME — FULLSCREEN BUTTON
═══════════════════════════════════════ */
.rv-fullscreen-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  height: 38px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font: 500 12px/1 'Rubik', sans-serif;
  color: var(--txt-2);
  cursor: pointer;
  transition: all .15s;
  width: 100%;
  justify-content: center;
}
.rv-fullscreen-btn:hover {
  background: var(--indigo-l);
  border-color: rgba(99,102,241,.3);
  color: var(--indigo);
}

/* Mobile: vertical aspect ratio for demo frame */
@media (max-width: 768px) {
  .rv-frame-new { aspect-ratio: 3 / 4; }
  .rv-frame-play-sub { display: none; }
  .rv-frame-play-title { font-size: 13px; }
  .rv-game-label-row {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ═══════════════════════════════════════
   PAGINATION — MOBILE
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .pagination, .pg { padding: 0 16px 32px; margin-top: 24px; }
  .sg-pagination ul, .wp-pagenavi { gap: 4px; padding: 0 16px 32px; margin-top: 24px; }
  .sg-pagination a,.sg-pagination span,.wp-pagenavi a,.wp-pagenavi span { min-width: 36px; height: 36px; font-size: 12px; padding: 0 8px; }
  /* Hide middle pages on very small screens */
  .sg-pagination .page-numbers:not(.current):not(.prev):not(.next):not(.dots):not(:nth-child(-n+3)):not(:nth-last-child(-n+3)) { display: none; }

  /* Results bar mobile */
  .results-bar { padding: 10px 0; }
  .rb-right { gap: 5px; }
  .results-sort { font-size: 12px; height: 34px; padding: 0 8px; }
}

/* ═══════════════════════════════════════
   ARCHIVE — MOBILE FILTER BTN HIDDEN (drawer used)
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .results-bar { flex-wrap: nowrap; }
  .rb-left .rc { white-space: nowrap; }
}

/* ═══════════════════════════════════════
   ARCHIVE — MOBILE ONLY ADJUSTMENTS
═══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Results bar stays in 1 row on mobile */
  .results-bar { flex-wrap: nowrap; padding: 8px 0; margin-bottom: 12px; }
  .rb-left .rc { white-space: nowrap; font-size: 11px; }
  .rb-left .rc strong { font-size: 14px; }
  .rb-right { gap: 5px; }
  .results-sort { height: 32px; font-size: 12px; padding: 0 8px; }
}
/* ═══════════════════════════════════════
   ARCHIVE — SORT CTRL BAR (sticky, below filter tabs)
═══════════════════════════════════════ */
.ph-count {
  font: 400 13px/1 var(--mono); color: var(--txt-3);
  margin-top: 12px;
}
.ph-count strong { color: var(--indigo); font-weight: 700; font-size: 15px; }

.sort-ctrl-bar {
  position: sticky;
  top: 113px; /* header 64px + filter-tabs ~49px */
  z-index: 180;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.sort-ctrl-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 40px;
  height: 48px;
  display: flex; flex-direction: row; align-items: center; gap: 8px;
}
.sort-ctrl-inner .results-sort { margin-left: auto; }

@media (max-width: 768px) {
  .sort-ctrl-bar { top: 104px; } /* header 56px + filter-tabs 48px */
  .sort-ctrl-inner { padding: 0 16px; height: 44px; gap: 6px; }
  .sort-ctrl-inner .results-sort { font-size: 12px; height: 32px; padding: 0 8px; }
  .sort-ctrl-inner .sb-filter-btn { font-size: 12px; padding: 0 10px; height: 32px; }
}

/* ═══════════════════════════════════════
   SIDEBAR — REDESIGNED FILTER BLOCKS
═══════════════════════════════════════ */

/* Override old sb-check with new version */
.sb-check {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; margin: 1px 0;
  border-radius: 8px; cursor: pointer;
  text-decoration: none; color: var(--txt-2);
  font: 400 13px/1.2 'Rubik', sans-serif;
  transition: background .12s;
}
.sb-check:hover { background: var(--surface); color: var(--txt); }
.sb-check.on { background: var(--indigo-l); color: var(--indigo); }

.sb-cb {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1.5px solid var(--border-m);
  border-radius: 4px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.sb-check.on .sb-cb {
  background: var(--cbcolor, var(--indigo));
  border-color: var(--cbcolor, var(--indigo));
}

.sb-vol-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.sb-cnt {
  font: 500 10px/1 var(--mono); color: var(--txt-3);
  background: var(--surface); border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 100px; flex-shrink: 0;
}
.sb-check.on .sb-cnt { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.2); color: var(--indigo); }

/* Sort items */
.sb-sort {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px;
  font: 400 13px/1 'Rubik', sans-serif; color: var(--txt-2);
  text-decoration: none; transition: all .15s; margin-bottom: 1px;
}
.sb-sort:hover { background: var(--surface); color: var(--txt); }
.sb-sort.on { background: var(--indigo-l); color: var(--indigo); font-weight: 500; }
.sb-sort.on::after { content: '✓'; font-size: 11px; color: var(--indigo); }

/* Apply / Reset */
.sb-apply {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 38px; margin-top: 10px;
  background: var(--indigo); color: #fff;
  font: 600 13px/1 'Rubik', sans-serif;
  border-radius: var(--r); cursor: pointer;
  transition: background .15s; text-decoration: none; border: none;
}
.sb-apply:hover { background: var(--indigo-d); }

.sb-actions { padding-top: 8px; border-top: 1px solid var(--border); margin-top: 8px; }
.sb-reset {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 36px;
  border: 1px solid var(--border); border-radius: var(--r);
  font: 500 12px/1 'Rubik', sans-serif; color: var(--txt-3);
  background: none; cursor: pointer; text-decoration: none;
  transition: all .15s;
}
.sb-reset:hover { border-color: #FCA5A5; color: #EF4444; background: #FEF2F2; }
.sb-reset-count {
  background: #FEE2E2; color: #EF4444;
  font: 600 10px/1 var(--mono); padding: 2px 6px; border-radius: 100px;
}

/* FIX: old rule .sb-check span{flex:1} stretches cb and dot — override */
.sb-cb   { flex: 0 0 16px !important; width: 16px !important; height: 16px !important; }
.sb-vol-dot { flex: 0 0 8px !important; width: 8px !important; height: 8px !important; }
.sb-cnt  { flex: 0 0 auto !important; }
/* provider name should truncate, not count */
.sb-check > span:not(.sb-cb):not(.sb-vol-dot):not(.sb-cnt) { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════════════════
   AUTHOR BLOCK — .sg-author
   Фото ліворуч, контент праворуч
═══════════════════════════════════════════ */
.sg-author{background:var(--bg);border:1px solid var(--border-m);border-radius:var(--r-lg);overflow:hidden;font-family:inherit;margin:32px 0;}
.sg-author__bar{height:3px;background:linear-gradient(90deg,var(--indigo),var(--indigo-d));}

/* Body: завжди row — фото | контент */
.sg-author__body{
  display:flex;
  flex-direction:row;
  gap:20px;
  padding:20px 24px;
  align-items:flex-start;
}

/* Avatar */
.sg-author__avatar-wrap{flex-shrink:0;position:relative;}
.sg-author__avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--indigo-l);display:block;}
.sg-author__verified{position:absolute;bottom:2px;right:2px;width:20px;height:20px;background:var(--indigo);border-radius:50%;border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;}
.sg-author__verified svg{width:10px;height:10px;}

/* Info */
.sg-author__info{flex:1;min-width:0;}
.sg-author__label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);margin-bottom:3px;}
.sg-author__name{font-size:18px;font-weight:700;color:var(--txt);margin:0 0 2px;}
.sg-author__role{font-size:13px;color:var(--txt-2);margin:0 0 10px;}
.sg-author__bio{font-size:13.5px;color:var(--txt-2);line-height:1.65;margin:0 0 14px;}
.sg-author__tags{display:flex;flex-wrap:wrap;gap:6px;}
.sg-author__tag{font-size:12px;background:var(--indigo-s);color:var(--indigo);padding:3px 10px;border-radius:20px;font-weight:500;}

/* Footer — дати в один рядок */
.sg-author__footer{
  border-top:1px solid var(--border);
  padding:10px 24px;
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.sg-author__dates{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sg-author__dates-sep{color:var(--border-m);font-weight:300;font-size:16px;line-height:1;}
.sg-author__meta{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--txt-3);}
.sg-author__meta svg{width:13px;height:13px;color:var(--indigo);flex-shrink:0;}
.sg-author__meta-label{color:var(--txt-3);}
.sg-author__meta time,.sg-author__meta span{color:var(--txt-2);font-weight:500;}
.sg-author__meta--verified svg{color:var(--green,#10b981);}
.sg-author__meta--verified span{color:var(--green,#10b981);font-weight:600;}

/* Mobile: компактніше але layout не змінюємо */
@media(max-width:600px){
  .sg-author__body{gap:14px;padding:16px;}
  .sg-author__avatar{width:60px;height:60px;border-width:2px;}
  .sg-author__verified{width:16px;height:16px;}
  .sg-author__verified svg{width:8px;height:8px;}
  .sg-author__label{display:none;}
  .sg-author__name{font-size:15px;}
  .sg-author__role{font-size:12px;margin-bottom:7px;}
  .sg-author__bio{font-size:12.5px;line-height:1.55;margin-bottom:10px;}
  .sg-author__tag{font-size:11px;padding:2px 8px;}
  .sg-author__footer{padding:9px 16px;gap:6px;}
  /* Дати в один рядок — завжди */
  .sg-author__dates{gap:8px;flex-wrap:nowrap;}
  .sg-author__meta{font-size:11px;}
  .sg-author__meta-label{display:none;}    /* приховуємо "Опубліковано:" / "Оновлено:" */
  .sg-author__meta--verified{display:none;} /* верифікацію ховаємо на мобайлі */
}
.sg-author__date{color:var(--txt-2);font-style:normal;}


/* ═══════════════════════════════════════════════════════
   MOBILE — single slot responsive fix
   768px / 480px / 375px
═══════════════════════════════════════════════════════ */

/* ── БАЗА: box-sizing на всі елементи сторінки огляду ── */
.rv-hero *, .rv-content *, .stat-band *,
.sg-author *, .rv-reviews * {
  box-sizing: border-box;
}

@media (max-width: 768px) {

  /* ── Запобігаємо горизонтальному скролу ── */
  html, body { overflow-x: hidden; }

  /* ── rv-content — головний контейнер ── */
  .rv-content {
    padding: 0 16px !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  /* ── rv-grid — одна колонка ── */
  .rv-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px 0 !important;
  }

  /* ── rv-article — обмежити ширину ── */
  .rv-article {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  /* ── rv-section — padding ── */
  .rv-section {
    padding: 18px 16px 0 !important;
    overflow: hidden;
  }
  .rv-section:last-child  { padding-bottom: 18px !important; }
  .rv-section + .rv-section {
    margin-top: 18px !important;
    padding-top: 18px !important;
  }

  /* ── rv-game-block ── */
  .rv-game-block {
    padding: 16px 16px 0 !important;
    overflow: hidden;
  }

  /* ── Hero grid — обидві колонки ── */
  .rv-hero-grid > div {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden;
  }

  /* ── RDC блок (Дані гри) ── */
  .rdc-header {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .rdc-src {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .rdc-row  { padding: 10px 14px; }
  .rdc-key  { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rdc-val  { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; flex-shrink: 0; }
  .rdc-actions { padding: 12px 14px; }

  /* ── Score bars ── */
  .score-bars { overflow: hidden; }
  .sbar-row {
    grid-template-columns: 76px 1fr 36px !important;
    gap: 8px 8px;
    overflow: hidden;
  }
  .sbar-label {
    font-size: 10px !important;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .sbar-track { min-width: 0; overflow: hidden; }
  .sbar-num   { font-size: 11px !important; justify-content: flex-end; }

  /* ── Mech table — горизонтальний скрол всередині секції ── */
  .rv-section .mech-table-wrap,
  .rv-section:has(.mech-table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .mech-table { min-width: 380px; width: max-content; }

  /* ── Stat band ── */
  .stat-band { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sb-inner  { min-width: min-content; padding: 0 16px !important; }

  /* ── Aside ── */
  .rv-aside {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
  }
  .aside-card { min-width: 0; width: 100%; }
  .ac-body    { padding: 12px 14px !important; }

  /* ── Author block ── */
  .sg-author {
    margin: 20px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  .sg-author__body {
    flex-direction: row !important;   /* фото ліворуч завжди */
    align-items: flex-start !important;
    text-align: left !important;
    padding: 16px !important;
    gap: 14px !important;
    overflow: hidden;
  }
  .sg-author__avatar { width: 64px !important; height: 64px !important; }
  .sg-author__info {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  .sg-author__name {
    font-size: 16px !important;
    white-space: normal;
    word-break: break-word;
  }
  .sg-author__role,
  .sg-author__bio {
    white-space: normal;
    word-break: break-word;
    overflow: visible;   /* bio має бути видимим */
  }
  .sg-author__bio { font-size: 13px !important; }
  .sg-author__tags { justify-content: flex-start; flex-wrap: wrap; }
  .sg-author__footer {
    padding: 10px 14px !important;
    flex-direction: row !important;   /* дати в один рядок */
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .sg-author__meta {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .sg-author__date { white-space: nowrap; }

  /* ── Related grid ── */
  .related-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .rv-content { padding: 0 12px !important; }
  .rv-section { padding: 14px 12px 0 !important; }
  .rv-section:last-child { padding-bottom: 14px !important; }
  .rv-game-block { padding: 12px 12px 0 !important; }

  .sbar-row { grid-template-columns: 64px 1fr 32px !important; gap: 6px !important; }
  .sbar-label svg { display: none !important; }

  .rdc-row     { padding: 9px 12px; }
  .rdc-actions { padding: 10px 12px; }

  .sg-author__body   { padding: 14px 12px !important; }
  .sg-author__footer { padding: 10px 12px !important; }
  .sg-author__name   { font-size: 16px !important; }
  .sg-author__bio    { font-size: 12.5px !important; }
}

/* ── 375px ── */
@media (max-width: 375px) {
  .rv-content { padding: 0 10px !important; }
  .rv-section { padding: 12px 10px 0 !important; }

  .sbar-row { grid-template-columns: 56px 1fr 30px !important; }
  .rv-h1    { font-size: 19px !important; }

  .rv-game-label-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ═══════════════════════════════════════
   REVIEWS BLOCK — restyle
═══════════════════════════════════════ */

/* Обгортка з рамкою і тінню */
.rv-reviews-inner {
  background: var(--bg);
  border: 1px solid var(--border-m);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 20px rgba(15,15,35,.07), 0 1px 4px rgba(15,15,35,.04);
  padding: 28px 32px;
  margin-bottom: 0;
}

/* Заголовок */
.rev-title {
  font: 700 22px/1.15 'Rubik', sans-serif;
  letter-spacing: -.025em;
  color: var(--txt);
  margin-bottom: 4px;
}
.rev-sub {
  font-size: 13px;
  color: var(--txt-3);
}

/* Кнопка "Написати відгук" */
.btn-write {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font: 600 13px/1 'Rubik', sans-serif;
  cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-write:hover  { background: var(--indigo-d); }
.btn-write:active { transform: scale(.97); }

/* Empty state */
.rev-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  border: 2px dashed var(--border-m);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin: 8px 0 24px;
}
.rev-empty-icon  { font-size: 40px; margin-bottom: 14px; line-height: 1; opacity: .7; }
.rev-empty-title { font: 600 16px/1.2 'Rubik', sans-serif; color: var(--txt-2); margin-bottom: 6px; }
.rev-empty-sub   { font-size: 13px; color: var(--txt-3); max-width: 300px; line-height: 1.5; }

/* .ri-vote styles moved to reviews section above */

/* Mobile */
@media (max-width: 768px) {
  .rv-reviews { padding: 0 16px 48px !important; }
  .rv-reviews-inner { padding: 20px 16px; }
  .rev-title { font-size: 18px !important; }
  .rev-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rev-empty  { padding: 32px 16px; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIBLE GAMBLING PAGE — /vidpovidalna-hra/
═══════════════════════════════════════════════════ */

/* ── Hero ── */
.rg-hero-in { padding-bottom: 40px !important; }
.rg-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--indigo-m);
  color: var(--indigo);
  font: 600 12px/1 var(--mono);
  padding: 5px 14px;
  border-radius: 100px;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
.rg-hero-sub {
  font: 400 16px/1.6 'Rubik', sans-serif !important;
  color: var(--txt-2) !important;
  max-width: 640px;
  margin-bottom: 28px;
}
.rg-org-logos {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.rg-org-logo-item {
  height: 32px;
  display: flex;
  align-items: center;
  opacity: .55;
  transition: opacity .2s;
  filter: grayscale(1);
}
.rg-org-logo-item:hover { opacity: .9; filter: grayscale(0); }
.rg-org-logo-item img  { height: 28px; width: auto; object-fit: contain; }
.rg-org-logo-item span { font: 600 13px/1 var(--mono); color: var(--txt-2); }

/* ── Wrap ── */
.rg-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px 80px;
}

/* ── Section ── */
.rg-section {
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.rg-section:last-child { border-bottom: none; }
.rg-section-in { max-width: 800px; }

.rg-sec-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 12px;
}
.rg-sec-title {
  font: 700 26px/1.15 'Rubik', sans-serif;
  letter-spacing: -.025em;
  color: var(--txt);
  margin-bottom: 16px;
}
.rg-sec-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--indigo);
  border-radius: 2px;
  margin-right: 12px;
  vertical-align: middle;
  flex-shrink: 0;
}
.rg-sec-text {
  font: 400 16px/1.75 'Rubik', sans-serif;
  color: var(--txt-2);
  margin-bottom: 0;
}

/* ── Signs list ── */
.rg-signs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rg-sign-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 400 15px/1.55 'Rubik', sans-serif;
  color: var(--txt-2);
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color .15s;
}
.rg-sign-item:hover { border-color: rgba(239,68,68,.25); background: #FEF2F2; }
.rg-sign-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  margin-top: 6px;
}

/* ── CTA box ── */
.rg-cta-box {
  background: var(--indigo-l);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  font: 500 14px/1.5 'Rubik', sans-serif;
  color: var(--indigo);
}

/* ── Tips grid ── */
.rg-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 4px;
}
.rg-tip-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: border-color .15s, box-shadow .15s;
}
.rg-tip-card:hover {
  border-color: rgba(99,102,241,.25);
  box-shadow: 0 4px 16px rgba(99,102,241,.08);
}
.rg-tip-icon  { font-size: 24px; margin-bottom: 10px; line-height: 1; }
.rg-tip-title { font: 600 14px/1.2 'Rubik', sans-serif; color: var(--txt); margin-bottom: 6px; }
.rg-tip-text  { font: 400 13px/1.55 'Rubik', sans-serif; color: var(--txt-2); }

/* ── Tools list ── */
.rg-tools-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rg-tool-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 15px/1.55 'Rubik', sans-serif;
  color: var(--txt-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.rg-tool-item:last-child { border-bottom: none; }
.rg-tool-item svg { flex-shrink: 0; margin-top: 3px; }

/* ── Orgs grid ── */
.rg-orgs-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.rg-org-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.rg-org-card:hover {
  border-color: rgba(99,102,241,.25);
  box-shadow: 0 4px 16px rgba(99,102,241,.08);
  transform: translateX(3px);
}
.rg-org-logo {
  width: 72px;
  height: 48px;
  border-radius: var(--r);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px;
}
.rg-org-logo img { width: 100%; height: 100%; object-fit: contain; }
.rg-org-info   { flex: 1; min-width: 0; }
.rg-org-name   { font: 700 14px/1 'Rubik', sans-serif; margin-bottom: 4px; }
.rg-org-desc   { font: 400 12px/1.4 var(--mono); color: var(--txt-3); }
.rg-org-arrow  { color: var(--txt-3); flex-shrink: 0; transition: color .15s; }
.rg-org-card:hover .rg-org-arrow { color: var(--indigo); }

/* ── 18+ block ── */
.rg-age-wrap {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.rg-age-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--indigo);
  color: #fff;
  font: 800 22px/1 'Rubik', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(99,102,241,.3);
}
.rg-age-content { flex: 1; min-width: 0; }
.rg-age-section { background: var(--surface); border-radius: var(--r-lg); padding: 40px !important; margin: 0; border: 1px solid var(--border); }

/* ── Disclaimer ── */
.rg-disclaimer-sec .rg-sec-text {
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 1.7;
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  .rg-wrap { padding: 0 16px 48px; }
  .rg-section { padding: 32px 0; }
  .rg-sec-title { font-size: 20px !important; }
  .rg-tips-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rg-age-wrap { flex-direction: column; gap: 16px; align-items: center; text-align: center; }
  .rg-age-section { padding: 24px !important; }
  .rg-org-logos { gap: 14px; }
  .rg-org-logo-item { height: 24px; }
  .rg-org-logo-item img { height: 22px; }
  .rg-hero-sub { font-size: 14px !important; }
}
@media (max-width: 480px) {
  .rg-tips-grid { grid-template-columns: 1fr; }
  .rg-sec-title { font-size: 18px !important; }
  .rg-org-card { padding: 12px 14px; gap: 12px; }
  .rg-org-logo { width: 56px; height: 40px; }
}

/* ── Logo image (з налаштувань теми) ── */
.logo-img { display: block; max-height: 48px; width: auto; }
.logo:has(.logo-img) .logo-mark { display: none !important; }

/* ═══════════════════════════════════════════════
   RESPONSIBLE GAMBLING STRIP
   Чорна смужка з логотипами внизу сторінки
═══════════════════════════════════════════════ */
.rg-strip {
  background: #151c2c;
  border-top: 1px solid #1f2a40;
  padding: 10px 0;
  position: relative;
}
/* Fade краї для індикації прокрутки */
.rg-strip::before,
.rg-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 32px;
  z-index: 2;
  pointer-events: none;
}
.rg-strip::before { left: 0;  background: linear-gradient(to right, #151c2c, transparent); }
.rg-strip::after  { right: 0; background: linear-gradient(to left,  #151c2c, transparent); }

.rg-strip-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rg-strip-inner::-webkit-scrollbar { display: none; }
.rg-link {
  display: inline-flex;
  align-items: center;
  opacity: .75;
  transition: opacity .2s;
  text-decoration: none;
  flex-shrink: 0;
  scroll-snap-align: center;
}
.rg-link:hover { opacity: 1; }
.rg-link--static { cursor: default; }

.rg-logo {
  display: block;
  object-fit: contain;
  mix-blend-mode: screen;
  image-rendering: -webkit-optimize-contrast;
}
.rg-logo[src*=".svg"] {
  filter: brightness(0) invert(1);
  mix-blend-mode: normal;
}

/* Responsive */
@media (max-width: 768px) {
  .rg-strip-inner {
    justify-content: flex-start;
    padding: 0 16px;
    gap: 20px;
  }
  .rg-logo { transform: scale(.85); transform-origin: center; }
}
@media (max-width: 400px) {
  .rg-strip-inner { gap: 14px; }
  .rg-logo { transform: scale(.75); }
}

/* ═══════════════════════════════════════════════
   SEO TEXT BLOCKS — між секціями головної
═══════════════════════════════════════════════ */
.seo-blk {
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.seo-blk-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  align-items: start;
}
.seo-blk-inner.seo-blk-single {
  grid-template-columns: 1fr;
  max-width: 860px;
}
.seo-blk-kw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 8px;
}
.seo-blk-kw::before {
  content: '';
  width: 18px; height: 2px;
  background: var(--indigo);
  border-radius: 2px;
  flex-shrink: 0;
}
.seo-blk p {
  font: 400 14px/1.7 'Rubik', sans-serif;
  color: var(--txt-3);
  margin: 0;
}
.seo-blk p strong {
  font-weight: 600;
  color: var(--txt-2);
}
.seo-blk p a {
  color: var(--indigo);
  text-decoration: none;
}
.seo-blk p a:hover { text-decoration: underline; }

/* Alternate background for visual rhythm */
.seo-blk--alt {
  background: var(--surface);
}

@media (max-width: 800px) {
  .seo-blk-inner { grid-template-columns: 1fr; gap: 16px; padding: 0 20px; }
  .seo-blk { padding: 20px 0; }
}


/* ═══════════════════════════════════════════════════
   CARD v4 — light theme, absolute extras overlay below card
   Resets/overrides all previous .sc declarations
   ═══════════════════════════════════════════════════════════════ */

/* ── Base card ── */
.sc {
  background: #fff !important;
  border: 1px solid #e2e5ef !important;
  border-radius: 12px !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
  display: block !important;
  flex-direction: unset !important;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-shadow: none !important;
  transform: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.sc:hover {
  transform: translateY(-3px) !important;
  border-color: #a0aacc !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
  z-index: 30 !important;
}

/* ── Image area — clips itself ── */
.sc-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #f5f6fb;
  flex-shrink: 0;
}
.sc-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
  display: block;
  position: static;
}
.sc:hover .sc-img img { transform: scale(1.04); }

/* ── Play overlay ── */
.sc-ov {
  position: absolute; inset: 0;
  background: rgba(15,17,35,.5);
  display: flex; flex-direction: row;
  align-items: flex-end; justify-content: center; gap: 6px;
  padding: 0 10px 10px;
  opacity: 0;
  transition: opacity .18s ease;
}
.sc:hover .sc-ov { opacity: 1; }
/* touch devices — always show */
@media (hover: none) {
  .sc-ov {
    opacity: 1;
    background: linear-gradient(transparent 55%, rgba(15,17,35,.68));
  }
}
.sc-ov-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 12px;
  border-radius: 6px;
  font: 600 11px/1 'Rubik', sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s;
  border: none; text-decoration: none;
  flex: 1; justify-content: center;
  max-width: 120px;
}
.sc-ov-play {
  background: #6c63ff; color: #fff;
}
.sc-ov-play:hover { background: #5450d0; }
.sc-ov-rev {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.22) !important;
}
.sc-ov-rev:hover { background: rgba(255,255,255,.2); }

/* ── Volatility badge ── */
.sc-vol {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 5px;
  letter-spacing: .05em; text-transform: uppercase;
  pointer-events: none; line-height: 1.4;
}
.sc-vol.vol-low   { background:rgba(22,163,74,.1);  color:#16a34a; border:1px solid rgba(22,163,74,.25); }
.sc-vol.vol-medium{ background:rgba(217,119,6,.1);  color:#d97706; border:1px solid rgba(217,119,6,.25); }
.sc-vol.vol-high  { background:rgba(220,38,38,.1);  color:#dc2626; border:1px solid rgba(220,38,38,.25); }
.sc-vol.vol-vhigh,.sc-vol.vol-max { background:rgba(153,27,27,.1); color:#b91c1c; border:1px solid rgba(153,27,27,.25); }

/* ── Editorial score badge ── */
.sc-score {
  position: absolute; top: 8px; right: 8px;
  background: rgba(20,22,40,.82);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 4px 8px;
  display: flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600; color: #fbbf24;
  pointer-events: none; line-height: 1;
}
.sc-score svg { width: 10px; height: 10px; fill: #fbbf24; display: block; }

/* ── New badge ── */
.sc-new {
  position: absolute; top: 8px; left: 8px;
  background: #00a888; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 8px; border-radius: 5px; text-transform: uppercase;
}

/* ── Card body ── */
.sc-body { padding: 12px; flex: unset !important; display: block !important; }
.sc-prov { font-size: 11px; color: #9ba0b8; margin-bottom: 2px; font-weight: 500; }
.sc-ttl  {
  font-size: 14px; font-weight: 600; color: #1a1d2e;
  margin-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: normal;
}

/* ── 3-stat row ── */
.sc-stats {
  display: grid !important; grid-template-columns: repeat(3,1fr);
  gap: 5px; margin-bottom: 10px;
}
.sc-st {
  background: #f5f6fb; border-radius: 5px;
  padding: 6px 7px; text-align: center;
}
.sc-stl {
  font-size: 9px; color: #9ba0b8;
  text-transform: none; letter-spacing: .07em;
  margin-bottom: 2px; display: block;
  font-family: \'Rubik\',\'DM Sans\',system-ui,sans-serif;
}
.sc-stv {
  font-size: 12px; font-weight: 600; color: #1a1d2e; display: block;
  font-family: 'JetBrains Mono','Courier New',monospace;
}
.sc-stv.rtp       { color: #00a888; }
.sc-stv.mx        { color: #d97706; }
.sc-stv.vol-low   { color: #16a34a; }
.sc-stv.vol-medium{ color: #d97706; }
.sc-stv.vol-high  { color: #dc2626; }
.sc-stv.vol-vhigh,.sc-stv.vol-max { color: #b91c1c; }

/* ── Feature badges ── */
.sc-bds { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-bd  {
  font-size: 10px; padding: 3px 7px; border-radius: 4px;
  background: rgba(108,99,255,.06); color: #6c63ff;
  border: 1px solid rgba(108,99,255,.2); line-height: 1.3;
}

/* ══════════════════════════════════════════════════
   sc-ex — EXTRAS BLOCK: absolute, below card,
   overlaps neighbors. Grid row does NOT stretch.
   ══════════════════════════════════════════════════ */
.sc-ex {
  position: absolute;
  top: calc(100% - 1px);
  left: -1px; right: -1px;
  z-index: 20;
  background: #fff;
  border: 1px solid #a0aacc;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.sc:hover .sc-ex {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sc-hr { border: none; border-top: 1px solid #e2e5ef; margin: 0 0 10px; }
.sc-sr { display: flex; gap: 6px; margin-bottom: 10px; }
.sc-sb {
  flex: 1; background: #f5f6fb; border-radius: 5px; padding: 7px 9px;
}
.sc-sb .l {
  font-size: 9px; color: #9ba0b8; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 2px; display: block;
  font-family: 'JetBrains Mono','Courier New',monospace;
}
.sc-sb .v { font-size: 16px; font-weight: 700; line-height: 1.2; display: block; }
.sc-sb .v.e { color: #6c63ff; }
.sc-sb .v.u { color: #d97706; }
.sc-sb .s   { font-size: 9px; color: #9ba0b8; display: block; font-family: 'JetBrains Mono','Courier New',monospace; }
.sc-xs { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px 10px; }
.sc-x .xl {
  font-size: 9px; color: #9ba0b8; display: block;
  font-family: 'JetBrains Mono','Courier New',monospace;
}
.sc-x .xv {
  font-size: 11px; font-weight: 600; color: #1a1d2e; display: block;
  font-family: 'JetBrains Mono','Courier New',monospace;
}

/* ── Grid override (16px gap) ── */
.sg, .slots-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
}
.slots-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
@media(max-width:900px) {
  .sg,.slots-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:580px) {
  .sg,.slots-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════
   PAGE HERO (catalog, types, themes)
   ═══════════════════════════════════════════════════ */
.page-hero {
  background: #fff;
  border-bottom: 1px solid #e2e5ef;
  padding: 28px 0 0;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 340px; height: 340px;
  background: radial-gradient(ellipse,rgba(108,99,255,.05) 0%,transparent 70%);
  pointer-events: none;
}
.ph-inner { max-width: var(--maxw,1280px); margin: 0 auto; padding: 0 40px 20px; }
.ph-eyebrow {
  font-size: 11px; font-weight: 600; color: #6c63ff;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.ph-eyebrow::before { content:''; width:18px; height:2px; background:#6c63ff; border-radius:2px; }
.ph-h1 {
  font-size: 24px; font-weight: 700; color: #1a1d2e;
  margin-bottom: 6px; line-height: 1.25;
  letter-spacing: -.02em;
}
.ph-sub { font-size: 13px; color: #5a6080; line-height: 1.6; margin-top: 6px; max-width: 640px; }
.ph-stats-outer { border-top: 1px solid #e2e5ef; width: 100%; }
.ph-stats-row {
  max-width: var(--maxw,1280px);
  margin: 0 auto;
  display: flex;
  padding: 0 8px;
}
.ph-stat {
  padding: 13px 24px; display: flex; flex-direction: column; gap: 3px;
  border-right: 1px solid #e2e5ef; flex: 0 0 auto;
}
.ph-stat:last-child { border-right: none; }
.ph-stat-val { font-size: 18px; font-weight: 700; color: #1a1d2e; }
.ph-stat-val em { font-size: 12px; font-weight: 400; color: #9ba0b8; font-style: normal; margin-left: 2px; }
.ph-stat-key { font-size: 11px; color: #9ba0b8; font-family: 'JetBrains Mono','Courier New',monospace; }

/* ── Archive layout ── */
.archive-body {
  display: flex !important;
  grid-template-columns: unset !important;
  align-items: flex-start;
  max-width: var(--maxw,1280px);
  margin: 0 auto;
  width: 100%;
}
.archive-main {
  flex: 1; padding: 20px 24px; min-width: 0;
}

/* ── Sidebar ── */
.sidebar {
  width: 240px !important;
  flex-shrink: 0;
  border-right: 1px solid #e2e5ef;
  background: #fff;
  position: sticky; top: 64px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e2e5ef transparent;
  padding: 0;
}

/* ── Sidebar filter blocks ── */
.fb {
  border: none !important;
  border-bottom: 1px solid #e2e5ef !important;
  border-radius: 0 !important;
  background: #fff !important;
}
.fb-head {
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
.fb-title {
  font-size: 12px; font-weight: 600; color: #5a6080;
  display: flex; align-items: center; gap: 6px;
  text-transform: none; letter-spacing: normal;
}
.fb-title-dot { width: 6px; height: 6px; border-radius: 50%; background: #e2e5ef; flex-shrink: 0; }
.fb-title-dot.on { background: #6c63ff; }
.fb-count,.fb-count.vis {
  background: rgba(108,99,255,.1); color: #6c63ff;
  font-size: 10px; padding: 1px 6px; border-radius: 100px;
  display: none; /* JS controls visibility */
  font-family: 'JetBrains Mono','Courier New',monospace;
}
.fb-toggle { font-size: 9px; color: #9ba0b8; transition: transform .15s; }
.fb.collapsed .fb-toggle { transform: rotate(-90deg); }
.fb-body { padding: 0 16px 12px; }
.fb.collapsed .fb-body { display: none; }

/* Sidebar sort */
.sf-sort-item,.sf-sort {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0; font-size: 12px; color: #5a6080; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
}
.sf-sort-item:hover,.sf-sort:hover,
.sf-sort-item.on,.sf-sort.on { color: #1a1d2e; }
.sf-sort-dot {
  width: 14px; height: 14px; border: 1.5px solid #a0aacc;
  border-radius: 50%; flex-shrink: 0; position: relative; transition: border-color .15s;
}
.sf-sort-item.on .sf-sort-dot,.sf-sort.on .sf-sort-dot { border-color: #6c63ff; }
.sf-sort-item.on .sf-sort-dot::after,.sf-sort.on .sf-sort-dot::after {
  content: ''; position: absolute; inset: 3px; background: #6c63ff; border-radius: 50%;
}
.sf-sort-label { flex: 1; font-size: 12px; }

/* Checkbox filter items */
.sf-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0; font-size: 12px; color: #5a6080;
  cursor: pointer; background: none; border: none; width: 100%; text-align: left;
  transition: opacity .12s;
}
.sf-item:hover { color: #1a1d2e; }
.sf-item.on { color: #1a1d2e; }
.sf-cb {
  width: 14px; height: 14px; border: 1.5px solid #a0aacc;
  border-radius: 3px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; transition: all .15s;
}
.sf-item.on .sf-cb { background: #6c63ff; border-color: #6c63ff; }
.sf-cb svg { display: none; width: 9px; height: 9px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.sf-item.on .sf-cb svg { display: block; }
.sf-label { flex: 1; font-size: 12px; }
.sf-cnt { font-size: 10px; color: #c4c8d8; font-family: 'JetBrains Mono','Courier New',monospace; }
.sf-vol-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* RTP range */
.rtp-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rtp-label,.rtp-lbl { font-size: 11px; color: #5a6080; }
.rtp-val,.rtp-val-disp { font-size: 13px; font-weight: 600; color: #6c63ff; font-family: 'JetBrains Mono','Courier New',monospace; }
.sb-range { width: 100%; accent-color: #6c63ff; margin: 4px 0; }
.range-ticks { display: flex; justify-content: space-between; font-size: 9px; color: #c4c8d8; font-family: 'JetBrains Mono','Courier New',monospace; }

/* Chips */
.rating-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.rc {
  padding: 4px 10px; border-radius: 100px;
  border: 1px solid #e2e5ef; font-size: 11px; color: #5a6080;
  cursor: pointer; transition: all .15s; background: #fff;
}
.rc:hover { border-color: #a0aacc; color: #1a1d2e; }
.rc.on { background: rgba(108,99,255,.1); border-color: rgba(108,99,255,.35); color: #6c63ff; }

/* Provider search */
.sf-search {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid #e2e5ef; border-radius: 6px;
  padding: 0 9px; height: 30px;
  background: #f5f6fb; margin-bottom: 8px;
}
.sf-search:focus-within { border-color: rgba(108,99,255,.3); }
.sf-search svg { color: #9ba0b8; flex-shrink: 0; width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.sf-search input { border: none; background: none; outline: none; font-size: 11px; color: #1a1d2e; width: 100%; }
.sf-show-more { font-size: 11px; color: #6c63ff; margin-top: 6px; background: none; border: none; cursor: pointer; padding: 0; }

/* Sidebar reset */
.sb-reset {
  display: none; /* shown by JS when filters active */
  align-items: center !important;
  gap: 6px; margin: 10px 16px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(220,38,38,.25) !important;
  color: #dc2626 !important; font-size: 12px; font-weight: 500;
  background: rgba(220,38,38,.04) !important; cursor: pointer;
  transition: background .15s; text-decoration: none;
  justify-content: flex-start !important;
}
.sb-reset:hover { background: rgba(220,38,38,.1) !important; }
.sb-reset svg { width: 12px; height: 12px; stroke: #dc2626; fill: none; stroke-width: 2; }

/* Mobile filter button */
.mob-filter-btn-new {
  display: none; height: 40px; padding: 0 16px;
  border: 1px solid #e2e5ef; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #5a6080; background: #fff;
  align-items: center; gap: 6px; cursor: pointer;
}

/* Active filters strip */
.active-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 16px; padding: 10px 14px;
  background: #fff; border: 1px solid #e2e5ef; border-radius: 8px;
}
.af-label { font-size: 11px; color: #9ba0b8; font-weight: 500; }
.af-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 10px; background: rgba(108,99,255,.1);
  border: 1px solid rgba(108,99,255,.25); border-radius: 100px;
  font-size: 11px; color: #6c63ff; cursor: pointer; text-decoration: none;
}
.af-chip:hover { background: rgba(108,99,255,.15); }
.af-chip-x { opacity: .55; }
.af-clear {
  margin-left: auto; display: flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 100px;
  border: 1px solid rgba(220,38,38,.25); color: #dc2626;
  font-size: 11px; cursor: pointer; text-decoration: none; background: none;
}
.af-clear:hover { background: rgba(220,38,38,.05); }

/* Controls bar */
.ctrl {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 8px;
}
.ctrl-l { display: flex; align-items: center; gap: 8px; flex: 1; }
.ctrl-count { font-size: 13px; color: #5a6080; }
.ctrl-count strong { color: #1a1d2e; font-weight: 700; }
.ctrl-sel,.ctrl-r select {
  height: 34px; padding: 0 12px;
  border: 1px solid #e2e5ef; border-radius: 8px;
  background: #fff; color: #5a6080;
  font-size: 12px; cursor: pointer; outline: none;
}

/* Sort-ctrl-bar (mobile trigger row) */
.sort-ctrl-bar {
  background: #fff; border-bottom: 1px solid #e2e5ef;
  padding: 8px 24px; display: flex;
}
.sort-ctrl-inner { max-width: var(--maxw,1280px); margin: 0 auto; width: 100%; }
.sb-filter-btn {
  display: none; height: 36px; padding: 0 14px;
  border: 1px solid #e2e5ef; border-radius: 8px;
  font-size: 12px; font-weight: 500; color: #5a6080; background: #fff;
  align-items: center; gap: 6px; cursor: pointer;
}
.mob-badge-new {
  background: #6c63ff; color: #fff;
  font-size: 9px; padding: 1px 5px; border-radius: 100px;
  display: none; font-family: 'JetBrains Mono','Courier New',monospace;
}
.mob-badge-new.vis { display: inline-flex; }

/* ─── TYPE TABS (filter-tabs) ─── */
.filter-tabs {
  background: #fff;
  border-bottom: 1px solid #e2e5ef;
  padding: 0;
  position: sticky; top: 64px; z-index: 190;
}
.ft-inner {
  max-width: var(--maxw,1280px); margin: 0 auto; padding: 0 40px;
  display: flex; overflow-x: auto; scrollbar-width: none;
}
.ft-inner::-webkit-scrollbar { display: none; }
.ft-tab-link,.ft-tab {
  font-size: 12px; font-weight: 500; color: #9ba0b8;
  padding: 0 14px; height: 42px;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; flex-shrink: 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; cursor: pointer;
  text-decoration: none; background: none; border-top: none; border-left: none; border-right: none;
}
.ft-tab-link:hover,.ft-tab:hover { color: #1a1d2e; }
.ft-tab-link.on,.ft-tab.on { color: #6c63ff; border-bottom-color: #6c63ff; }
.ft-count {
  font-size: 10px; font-family: 'JetBrains Mono','Courier New',monospace;
  background: #f5f6fb; color: #9ba0b8;
  padding: 2px 6px; border-radius: 3px;
}
.ft-tab-link.on .ft-count,.ft-tab.on .ft-count { background: #6c63ff; color: #fff; }

/* ─── PAGINATION ─── */
.pagination,.pg {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 28px 0 0;
  flex-direction: row !important;
}
.pg-btn {
  min-width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid #e2e5ef; background: #fff; color: #5a6080;
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; text-decoration: none;
}
.pg-btn:hover { background: #f5f6fb; color: #1a1d2e; border-color: #a0aacc; }
.pg-btn.active,.pg-btn.current,.pg-btn.on { background: #6c63ff; border-color: #6c63ff; color: #fff; }
.pg-btn.disabled,.pg-btn.off { opacity: .35; pointer-events: none; }
.pg-dots { color: #9ba0b8; padding: 0 4px; }

/* ─── PROVIDER HERO ─── */
.prov-hero {
  background: #fff; border-bottom: 1px solid #e2e5ef;
  padding: 18px 0; border: none !important; border-radius: 0 !important; margin: 0 !important;
  display: block !important; grid-template-columns: unset !important;
}
/* ── Provider hero inner container ── */
.prov-hero-inner {
  max-width: var(--maxw,1280px);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ph-logo {
  width: 60px; height: 60px; border-radius: 10px;
  background: #f5f6fb;
  border: 1px solid #e2e5ef;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #1a1d2e;
  font-family: 'JetBrains Mono','Courier New',monospace;
  flex-shrink: 0; letter-spacing: -.02em;
}
.ph-info { flex: 1; min-width: 0; }
.ph-eyebrow { font-size: 10px; font-weight: 600; color: #6c63ff; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.ph-name { font-size: 20px; font-weight: 700; color: #1a1d2e; margin-bottom: 8px; line-height: 1.2; letter-spacing: -.02em; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ph-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; background: #f5f6fb; border: 1px solid #e2e5ef;
  border-radius: 100px; font-size: 11px; color: #5a6080;
}
.ph-chip svg { width: 11px; height: 11px; stroke: #9ba0b8; fill: none; stroke-width: 1.5; }
.ph-chip.hi { background: rgba(108,99,255,.1); border-color: rgba(108,99,255,.3); color: #6c63ff; font-weight: 600; }
.ph-chip a { color: #00a888; }
.ph-stats { display: flex; flex-direction: row; gap: 6px; flex-shrink: 0; }
.ph-stat-block {
  background: #f5f6fb; border: 1px solid #e2e5ef; border-radius: 8px;
  padding: 8px 14px; text-align: center; min-width: 80px;
}
.ph-stat-val { font-size: 17px; font-weight: 700; color: #1a1d2e; line-height: 1.2; }
.ph-stat-val em { font-size: 11px; font-weight: 400; color: #9ba0b8; font-style: normal; }
.ph-stat-key { font-size: 10px; color: #9ba0b8; font-family: 'JetBrains Mono','Courier New',monospace; margin-top: 2px; white-space: nowrap; }

/* ─── ABOUT STRIP (provider) ─── */
.about-strip {
  border-bottom: 1px solid #e2e5ef; padding: 24px 0;
  background: #fff;
}
.about-inner {
  max-width: var(--maxw,1280px);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.about-text { font-size: 13px; color: #5a6080; line-height: 1.75; flex: 1; }
.about-facts { flex-shrink: 0; width: 220px; }
.af-title { font-size: 10px; font-weight: 600; color: #9ba0b8; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; font-family: 'JetBrains Mono','Courier New',monospace; }
.af-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #e2e5ef; }
.af-row:last-child { border-bottom: none; }
.af-k { font-size: 12px; color: #9ba0b8; }
.af-v { font-size: 12px; font-weight: 600; color: #1a1d2e; }
.af-v.hi { color: #00a888; }
.af-v a { color: #6c63ff; }

/* ── prov-desc-rich: rich text formatting ── */
.prov-desc-rich p { margin-bottom: 1em; }
.prov-desc-rich p:last-child { margin-bottom: 0; }
.prov-desc-rich h2 { font-size: 16px; font-weight: 700; color: #1a1d2e; margin: 1.4em 0 .5em; letter-spacing: -.02em; }
.prov-desc-rich h3 { font-size: 14px; font-weight: 600; color: #1a1d2e; margin: 1.2em 0 .4em; }
.prov-desc-rich strong { font-weight: 600; color: #1a1d2e; }
.prov-desc-rich ul, .prov-desc-rich ol { margin: .6em 0 1em 1.2em; display: flex; flex-direction: column; gap: 4px; }
.prov-desc-rich ul li { list-style: disc; font-size: 13px; color: #5a6080; line-height: 1.6; }
.prov-desc-rich ol li { list-style: decimal; font-size: 13px; color: #5a6080; line-height: 1.6; }
.prov-desc-rich blockquote { border-left: 3px solid #6c63ff; padding: .6em 0 .6em 1em; margin: 1em 0; background: rgba(108,99,255,.04); border-radius: 0 6px 6px 0; font-style: italic; color: #5a6080; }
.prov-desc-rich a { color: #6c63ff; text-decoration: underline; text-underline-offset: 2px; }
.prov-desc-rich a:hover { opacity: .75; }

/* ── type-desc-rich / theme-desc-rich: layout + rich text rules ── */
.type-desc-rich, .theme-desc-rich {
  font-size: 14px; color: var(--txt-2,#5a6080); line-height: 1.75; max-width: 760px;
}
.type-desc-rich p, .theme-desc-rich p { margin-bottom: 1em; }
.type-desc-rich p:last-child, .theme-desc-rich p:last-child { margin-bottom: 0; }
.type-desc-rich h2, .theme-desc-rich h2 { font-size: 16px; font-weight: 700; color: #1a1d2e; margin: 1.4em 0 .5em; letter-spacing: -.02em; }
.type-desc-rich h3, .theme-desc-rich h3 { font-size: 14px; font-weight: 600; color: #1a1d2e; margin: 1.2em 0 .4em; }
.type-desc-rich strong, .theme-desc-rich strong { font-weight: 600; color: #1a1d2e; }
.type-desc-rich ul, .type-desc-rich ol, .theme-desc-rich ul, .theme-desc-rich ol { margin: .6em 0 1em 1.2em; display: flex; flex-direction: column; gap: 4px; }
.type-desc-rich ul li, .theme-desc-rich ul li { list-style: disc; font-size: 14px; color: var(--txt-2,#5a6080); line-height: 1.6; }
.type-desc-rich ol li, .theme-desc-rich ol li { list-style: decimal; font-size: 14px; color: var(--txt-2,#5a6080); line-height: 1.6; }
.type-desc-rich blockquote, .theme-desc-rich blockquote { border-left: 3px solid #6c63ff; padding: .6em 0 .6em 1em; margin: 1em 0; background: rgba(108,99,255,.04); border-radius: 0 6px 6px 0; font-style: italic; color: var(--txt-2,#5a6080); }
.type-desc-rich a, .theme-desc-rich a { color: #6c63ff; text-decoration: underline; text-underline-offset: 2px; }
.type-desc-rich a:hover, .theme-desc-rich a:hover { opacity: .75; }

/* ── Mobile hero ── */
@media (max-width: 768px) {
  .prov-hero-inner { padding: 0 16px; gap: 12px; flex-wrap: wrap; }
  .ph-logo { width: 48px; height: 48px; font-size: 13px; }
  .ph-name { font-size: 17px; }
  .ph-stats { width: 100%; flex-direction: row; }
  .ph-stat-block { flex: 1; padding: 7px 10px; }
  .ph-stat-val { font-size: 15px; }
  .about-inner { flex-direction: column; gap: 20px; padding: 0 16px; }
  .about-facts { width: 100%; }
}

/* ─── TYPE CARDS (page-typ) ─── */
.typ-hero {
  background: #fff; border-bottom: 1px solid #e2e5ef;
  padding: 36px 0; position: relative; overflow: hidden;
}
.typ-hero::after {
  content: ''; position: absolute; top: -80px; right: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(ellipse,rgba(108,99,255,.04) 0%,transparent 70%);
  pointer-events: none;
}
.typ-hero-inner { max-width: var(--maxw,1280px); margin: 0 auto; padding: 0 40px; display: flex; align-items: flex-start; gap: 48px; }
.typ-hero-left { flex: 1; }
.typ-hero-right { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 320px; align-content: flex-start; padding-top: 12px; }
.typ-eyebrow { font-size: 11px; font-weight: 600; color: #6c63ff; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.typ-eyebrow::before { content: ''; width: 20px; height: 2px; background: #6c63ff; border-radius: 2px; }
.typ-h1 { font-size: 30px; font-weight: 700; color: #1a1d2e; margin-bottom: 10px; line-height: 1.2; letter-spacing: -.03em; }
.typ-h1 span { color: #6c63ff; }
.typ-desc { font-size: 13px; color: #5a6080; line-height: 1.7; max-width: 500px; margin-bottom: 22px; }
.typ-stats { display: flex; gap: 16px; }
.typ-stat { background: #f5f6fb; border: 1px solid #e2e5ef; border-radius: 8px; padding: 12px 18px; }
.typ-stat-val { font-size: 22px; font-weight: 700; color: #1a1d2e; }
.typ-stat-val span { font-size: 13px; font-weight: 400; color: #9ba0b8; }
.typ-stat-key { font-size: 11px; color: #9ba0b8; font-family: 'JetBrains Mono','Courier New',monospace; margin-top: 2px; }
.typ-feat-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: #fff; border: 1px solid #e2e5ef; border-radius: 100px;
  transition: all .2s ease; text-decoration: none;
}
.typ-feat-pill:hover { transform: translateY(-2px); border-color: #a0aacc; background: #f5f6fb; }
.typ-feat-icon { font-size: 16px; line-height: 1; }
.typ-feat-name { font-size: 13px; font-weight: 500; color: #1a1d2e; }
.typ-feat-cnt { font-size: 11px; color: #9ba0b8; font-family: 'JetBrains Mono','Courier New',monospace; margin-left: 4px; }
.typ-section { max-width: var(--maxw,1280px); margin: 0 auto; padding: 28px 40px; }
.typ-section-inner { }
.typ-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
}
.typ-card {
  background: #fff; border: 1px solid #e2e5ef; border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s; cursor: pointer;
  text-decoration: none; color: inherit;
}
.typ-card::before {
  content: ''; position: absolute; top: -20px; right: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(ellipse, var(--tc, rgba(108,99,255,.12)) 0%, transparent 70%);
  pointer-events: none;
}
.typ-card:hover { transform: translateY(-3px); box-shadow: 0 4px 18px rgba(0,0,0,.07); border-color: #a0aacc; }
.typ-card-feat { border-color: rgba(108,99,255,.2); background: linear-gradient(135deg,#fff 0%,rgba(108,99,255,.025) 100%); }
.typ-card-icon { font-size: 22px; line-height: 1; }
.typ-card-name { font-size: 14px; font-weight: 600; color: #1a1d2e; }
.typ-card-desc { font-size: 12px; color: #9ba0b8; line-height: 1.5; flex: 1; }
.typ-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid #e2e5ef; margin-top: auto;
}
.typ-card-cnt { font-size: 11px; color: #5a6080; font-family: 'JetBrains Mono','Courier New',monospace; }
.typ-card-cnt span { color: #6c63ff; font-weight: 600; }
.typ-card-arr { color: #6c63ff; font-size: 15px; transition: transform .2s; }
.typ-card:hover .typ-card-arr { transform: translateX(3px); }
.typ-card-glow { display: none; }

/* ─── THEMES (page-temy) ─── */
.tem-hero {
  background: #fff; border-bottom: 1px solid #e2e5ef;
  padding: 36px 0; position: relative; overflow: hidden;
}
.tem-hero::after {
  content: ''; position: absolute; top: -80px; right: -60px;
  width: 380px; height: 380px;
  background: radial-gradient(ellipse, rgba(0,168,136,.04) 0%, transparent 70%);
  pointer-events: none;
}
.tem-hero-inner { max-width: var(--maxw,1280px); margin: 0 auto; padding: 0 40px; }
.tem-eyebrow { font-size: 11px; font-weight: 600; color: #00a888; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.tem-eyebrow::before { content: ''; width: 20px; height: 2px; background: #00a888; border-radius: 2px; }
.tem-h1 { font-size: 30px; font-weight: 700; color: #1a1d2e; margin-bottom: 10px; line-height: 1.2; letter-spacing: -.03em; }
.tem-h1-accent { color: #00a888; }
.tem-desc { font-size: 13px; color: #5a6080; line-height: 1.7; max-width: 540px; margin-bottom: 20px; }
.tem-stats { display: flex; gap: 16px; }
.tem-stat { background: #f5f6fb; border: 1px solid #e2e5ef; border-radius: 8px; padding: 12px 18px; }
.tem-stat-val { font-size: 22px; font-weight: 700; color: #1a1d2e; }
.tem-stat-val span { font-size: 13px; font-weight: 400; color: #9ba0b8; }
.tem-stat-key { font-size: 11px; color: #9ba0b8; font-family: 'JetBrains Mono','Courier New',monospace; margin-top: 2px; }

.tem-section { max-width: var(--maxw,1280px); margin: 0 auto; padding: 24px 40px; }
.tem-search-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tem-search-wrap {
  position: relative; flex: 1; max-width: 460px;
}
.tem-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; stroke: #9ba0b8; fill: none; stroke-width: 2; stroke-linecap: round; }
.tem-search-input {
  width: 100%; background: #f5f6fb; border: 1px solid #e2e5ef; border-radius: 8px;
  padding: 9px 14px 9px 36px; font-size: 14px; color: #1a1d2e; outline: none;
  transition: border-color .2s; font-family: inherit;
}
.tem-search-input:focus { border-color: #a0aacc; }
.tem-search-input::placeholder { color: #9ba0b8; }
.tem-search-count { font-size: 13px; color: #5a6080; font-family: 'JetBrains Mono','Courier New',monospace; white-space: nowrap; }
.tem-search-count strong { color: #1a1d2e; }

.tem-grid {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 10px;
}
.tem-card {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 3/2; cursor: pointer; border: 1px solid #e2e5ef;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  text-decoration: none;
}
.tem-card:hover { transform: translateY(-3px); border-color: #a0aacc; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.tem-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .3s ease; }
.tem-card:hover .tem-card-bg { transform: scale(1.06); }
.tem-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,28,.85) 0%, rgba(10,12,28,.2) 60%, rgba(10,12,28,.08) 100%); }
.tem-card-icon { font-size: 20px; line-height: 1; margin-bottom: 5px; }
.tem-card-name { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.2; margin-bottom: 2px; }
.tem-card-count { font-size: 10px; color: rgba(255,255,255,.55); font-family: 'JetBrains Mono','Courier New',monospace; }
.tem-card > div:not(.tem-card-bg):not(.tem-card-overlay) {
  position: absolute; inset: 0; padding: 10px;
  display: flex; flex-direction: column; justify-content: flex-end;
}

@media(max-width:1100px) { .typ-grid { grid-template-columns: repeat(3,1fr); } .tem-grid { grid-template-columns: repeat(4,1fr); } }
@media(max-width:860px)  { .tem-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:760px)  { .typ-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:640px)  { .tem-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:900px) {
  .archive-body { flex-direction: column !important; }
  .sidebar { width: 100% !important; position: static; max-height: none; border-right: none; border-bottom: 1px solid #e2e5ef; }
  .typ-hero-inner { flex-direction: column; gap: 24px; }
  .typ-hero-right { max-width: 100%; }
}


/* ─── BREADCRUMB FIXES ─── */
.bc-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap;
  padding: 0 40px !important;
  height: 44px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bc-bar::-webkit-scrollbar { display: none; }
.bc-sep { color: #c4c8d8; font-size: 10px; flex-shrink: 0; }
.bc-i   { font-size: 12px; color: #9ba0b8; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; }
.bc-i a { color: #6366F1; }
.bc-i a:hover { opacity: .75; }


/* ═══════════════════════════════════════════════════════════════
   CARD HOVER — smooth transition fix
   ═══════════════════════════════════════════════════════════════ */

/* Round bottom corners disappear on hover (seamless blend with sc-ex) */
.sc {
  transition: transform .2s ease, border-color .2s ease,
              box-shadow .2s ease, border-bottom-left-radius .15s ease,
              border-bottom-right-radius .15s ease !important;
}
.sc:hover {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* sc-ex: refined animation — appears from UNDER the card seamlessly */
.sc-ex {
  transition: opacity .18s ease, transform .18s cubic-bezier(.4,0,.2,1) !important;
  transform: translateY(-6px) !important;
}
.sc:hover .sc-ex {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* sc-xs grid — dynamic based on how many items */
.sc-xs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
}

/* sc-x labels — not uppercase (readable) */
.sc-x .xl {
  font-size: 9px;
  color: #9ba0b8;
  display: block;
  font-family: 'JetBrains Mono','Courier New',monospace;
  text-transform: none;
  letter-spacing: 0;
}
.sc-x .xv {
  font-size: 12px;
  font-weight: 600;
  color: #1a1d2e;
  display: block;
  font-family: 'JetBrains Mono','Courier New',monospace;
}

/* Divider in extras */
.sc-hr {
  border: none;
  border-top: 1px solid #e2e5ef;
  margin: 0 0 10px;
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION — sg-pagination + page-numbers
   ═══════════════════════════════════════════════════════════════ */

.sg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 36px 0 8px;
  width: 100%;
}

/* All page number items */
.sg-pagination .page-numbers,
.sg-pagination .sg-pag-prev a,
.sg-pagination .sg-pag-next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e2e5ef;
  border-radius: 8px;
  background: #fff;
  color: #5a6080;
  font-size: 13px;
  font-weight: 500;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1;
}

.sg-pagination .page-numbers:hover,
.sg-pagination .sg-pag-prev a:hover,
.sg-pagination .sg-pag-next a:hover {
  background: #f5f6fb;
  border-color: #a0aacc;
  color: #1a1d2e;
}

/* Current page */
.sg-pagination .page-numbers.current {
  background: #6c63ff;
  border-color: #6c63ff;
  color: #fff;
  cursor: default;
}
.sg-pagination .page-numbers.current:hover {
  background: #5450d0;
  border-color: #5450d0;
}

/* Dots */
.sg-pagination .page-numbers.dots {
  border: none;
  background: transparent;
  color: #9ba0b8;
  cursor: default;
  min-width: 20px;
  padding: 0;
}
.sg-pagination .page-numbers.dots:hover {
  background: transparent;
  border: none;
  color: #9ba0b8;
}

/* Prev / Next wrappers */
.sg-pagination .sg-pag-prev,
.sg-pagination .sg-pag-next {
  display: inline-flex;
}
.sg-pagination .sg-pag-prev a,
.sg-pagination .sg-pag-next a {
  gap: 4px;
  padding: 0 14px;
  font-family: 'DM Sans', 'Rubik', sans-serif;
}

/* Also style the pagination div from archive templates */
.pagination {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 32px 0 0;
}
.pagination .pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #e2e5ef;
  border-radius: 8px;
  background: #fff;
  color: #5a6080;
  font-size: 13px;
  font-weight: 500;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.pagination .pg-btn:hover { background:#f5f6fb; border-color:#a0aacc; color:#1a1d2e; }
.pagination .pg-btn.active,
.pagination .pg-btn.on,
.pagination .pg-btn.current { background:#6c63ff; border-color:#6c63ff; color:#fff; }
.pagination .pg-btn.disabled,
.pagination .pg-btn.off { opacity:.35; pointer-events:none; }
.pagination .pg-dots { color:#9ba0b8; padding:0 4px; }

/* Mobile pagination */
@media(max-width:580px) {
  .sg-pagination .page-numbers { min-width:32px; height:32px; font-size:12px; }
  .sg-pagination .sg-pag-prev a,
  .sg-pagination .sg-pag-next a { padding:0 10px; font-size:11px; }
}


/* ── Home page slots grid (4 cols) ── */
.sg-hp-4 {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}
@media(max-width:1100px) { .sg-hp-4 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media(max-width:760px)  { .sg-hp-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media(max-width:480px)  { .sg-hp-4 { grid-template-columns: 1fr !important; } }

/* ── slots-grid-4 / slots-grid-5 override for other uses ── */
.slots-grid-4 {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}
.slots-grid-5 {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}
@media(max-width:900px) {
  .slots-grid-4, .slots-grid-5 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}


/* ═══════════════════════════════════════════════════════════════
   PROVIDER DESCRIPTION — rich text styles (.prov-desc-rich)
   ═══════════════════════════════════════════════════════════════ */

.prov-desc-rich {
  font-size: 14px;
  color: #5a6080;
  line-height: 1.8;
}

/* Paragraphs */
.prov-desc-rich p {
  margin: 0 0 14px;
  line-height: 1.8;
}
.prov-desc-rich p:last-child { margin-bottom: 0; }

/* Bold / Strong — key terms */
.prov-desc-rich strong,
.prov-desc-rich b {
  color: #1a1d2e;
  font-weight: 600;
}

/* Headings inside description */
.prov-desc-rich h2,
.prov-desc-rich h3,
.prov-desc-rich h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1d2e;
  margin: 22px 0 8px;
  letter-spacing: -.01em;
}
.prov-desc-rich h2:first-child,
.prov-desc-rich h3:first-child,
.prov-desc-rich h4:first-child { margin-top: 0; }

/* Unordered list */
.prov-desc-rich ul {
  padding-left: 0;
  margin: 0 0 14px;
  list-style: none;
}
.prov-desc-rich ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  line-height: 1.65;
}
.prov-desc-rich ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6c63ff;
}

/* Ordered list */
.prov-desc-rich ol {
  padding-left: 20px;
  margin: 0 0 14px;
}
.prov-desc-rich ol li {
  margin-bottom: 6px;
  line-height: 1.65;
  color: #5a6080;
}
.prov-desc-rich ol li::marker {
  color: #6c63ff;
  font-weight: 600;
  font-family: 'JetBrains Mono','Courier New',monospace;
  font-size: 12px;
}

/* Blockquote — key fact / highlight */
.prov-desc-rich blockquote {
  position: relative;
  border-left: 3px solid #6c63ff;
  padding: 12px 16px 12px 20px;
  margin: 20px 0;
  background: rgba(108,99,255,.04);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: #5a6080;
  font-style: italic;
}
.prov-desc-rich blockquote strong {
  font-style: normal;
}
.prov-desc-rich blockquote p {
  margin: 0;
}

/* Highlight box (custom div.sg-highlight) */
.prov-desc-rich .sg-highlight {
  background: rgba(0,168,136,.06);
  border: 1px solid rgba(0,168,136,.2);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 13px;
  color: #1a1d2e;
}
.prov-desc-rich .sg-highlight::before {
  content: '✦ ';
  color: #00a888;
  font-weight: 700;
}

/* Stat badge (custom span.sg-stat) */
.prov-desc-rich .sg-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f5f6fb;
  border: 1px solid #e2e5ef;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1a1d2e;
  font-family: 'JetBrains Mono','Courier New',monospace;
  white-space: nowrap;
}
.prov-desc-rich .sg-stat-accent { color: #6c63ff; }
.prov-desc-rich .sg-stat-teal   { color: #00a888; }

/* Horizontal rule */
.prov-desc-rich hr {
  border: none;
  border-top: 1px solid #e2e5ef;
  margin: 20px 0;
}

/* Links in description */
.prov-desc-rich a {
  color: #6c63ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prov-desc-rich a:hover { color: #5450d0; }

/* em / italic */
.prov-desc-rich em { font-style: italic; color: #5a6080; }

/* Code / mono inline */
.prov-desc-rich code {
  background: #f5f6fb;
  border: 1px solid #e2e5ef;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: 'JetBrains Mono','Courier New',monospace;
  color: #1a1d2e;
}

/* Also apply rich styles to taxonomy descriptions on type/theme pages */
.type-desc-rich,
.theme-desc-rich {
  font-size: 14px;
  color: #5a6080;
  line-height: 1.8;
}
.type-desc-rich p,
.theme-desc-rich p { margin-bottom: 12px; }
.type-desc-rich p:last-child,
.theme-desc-rich p:last-child { margin-bottom: 0; }
.type-desc-rich strong,
.theme-desc-rich strong { color: #1a1d2e; font-weight: 600; }
.type-desc-rich ul,
.theme-desc-rich ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 12px;
}
.type-desc-rich li,
.theme-desc-rich li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
}
.type-desc-rich li::before,
.theme-desc-rich li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #6c63ff;
}



/* ═══════════════════════════════════════════════════════════════
   SIDEBAR FILTERS — visual redesign
   Кожен блок виглядає як окрема картка
   ═══════════════════════════════════════════════════════════════ */

/* Sidebar wrapper — thin left border, padding */
.sidebar {
  padding: 12px 0 60px !important;
}

/* ── Filter block card ── */
.fb {
  margin: 0 12px 6px !important;
  border: 1px solid #e8eaf0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  overflow: visible !important;  /* NOT hidden — allows border-radius without clipping clicks */
  transition: border-color .15s, box-shadow .15s;
}
/* Border-radius on head/body to achieve visual clipping */
.fb-head:first-child { border-radius: 10px 10px 0 0; }
.fb-body:last-child  { border-radius: 0 0 10px 10px; }
.fb.collapsed .fb-head { border-radius: 10px !important; }
.fb:hover { border-color: #c8ccdb !important; }

/* Block header */
.fb-head {
  padding: 10px 14px 10px 12px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid #f0f2f8;
  background: #fafbfd;
  border-radius: 10px 10px 0 0;
}
.fb.collapsed .fb-head {
  border-bottom-color: transparent;
  border-radius: 10px;
}
.fb-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #3d4166 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Color accent bar on left of header */
.fb-title::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: #6c63ff;
  flex-shrink: 0;
}
/* Active dot */
.fb-title-dot { display: none !important; }
.fb-count,
.fb-count.vis {
  background: #6c63ff !important;
  color: #fff !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
  border-radius: 100px;
  font-family: 'JetBrains Mono','Courier New',monospace;
  /* display controlled by JS — no !important here */
}
.fb-toggle {
  font-size: 10px !important;
  color: #9ba0b8 !important;
  transition: transform .2s ease;
  line-height: 1;
}
.fb:not(.collapsed) .fb-toggle { transform: rotate(0deg); }
.fb.collapsed .fb-toggle       { transform: rotate(-90deg); }

/* Block body */
.fb-body {
  padding: 10px 14px 12px !important;
  background: #fff;
}
.fb.collapsed .fb-body { display: none !important; }

/* ── Sort items ── */
.sf-sort-item, .sf-sort {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  color: #5a6080 !important;
  cursor: pointer;
  border: none !important;
  background: none !important;
  width: 100%;
  text-align: left;
  transition: background .12s;
}
.sf-sort-item:hover, .sf-sort:hover { background: #f5f6fb !important; color: #1a1d2e !important; }
.sf-sort-item.on, .sf-sort.on {
  background: rgba(108,99,255,.08) !important;
  color: #6c63ff !important;
  font-weight: 600 !important;
}
.sf-sort-dot {
  width: 14px; height: 14px;
  border: 2px solid #c8ccdb;
  border-radius: 50%; flex-shrink: 0;
  position: relative; transition: border-color .15s;
}
.sf-sort-item.on .sf-sort-dot,
.sf-sort.on .sf-sort-dot { border-color: #6c63ff !important; }
.sf-sort-item.on .sf-sort-dot::after,
.sf-sort.on .sf-sort-dot::after {
  content: ''; position: absolute;
  inset: 2px; background: #6c63ff; border-radius: 50%;
}

/* ── Checkbox filter items ── */
.sf-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 6px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  color: #5a6080 !important;
  cursor: pointer;
  width: 100%; text-align: left;
  border: none !important; background: none !important;
  transition: background .12s;
}
.sf-item:hover { background: #f5f6fb !important; }
.sf-item.on { background: rgba(108,99,255,.06) !important; color: #1a1d2e !important; }
.sf-cb {
  width: 16px !important; height: 16px !important;
  border: 2px solid #c8ccdb !important;
  border-radius: 4px !important; flex-shrink: 0;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: #fff !important; transition: all .15s;
}
.sf-item.on .sf-cb {
  background: #6c63ff !important;
  border-color: #6c63ff !important;
}
.sf-cb svg {
  display: none !important;
  width: 9px !important; height: 9px !important;
  stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round;
}
.sf-item.on .sf-cb svg { display: block !important; }
.sf-label { flex: 1 !important; font-size: 12px !important; }
.sf-item.on .sf-label { font-weight: 500 !important; color: #1a1d2e !important; }
.sf-item.sg-hidden { display: none !important; }
.sf-cnt {
  font-size: 10px !important; color: #b0b6cc !important;
  font-family: 'JetBrains Mono','Courier New',monospace;
}
.sf-vol-dot { width: 8px !important; height: 8px !important; border-radius: 50%; flex-shrink: 0; }

/* ── RTP range ── */
.rtp-row { margin-bottom: 8px; }
.rtp-label { font-size: 11px; color: #5a6080; }
.rtp-val-disp {
  font-size: 13px !important; font-weight: 700 !important;
  color: #6c63ff !important;
  font-family: 'JetBrains Mono','Courier New',monospace;
}
input[type=range].sb-range {
  width: 100%; accent-color: #6c63ff; cursor: pointer; margin: 4px 0;
}

/* ── Chips (max win, min bet, rating) ── */
.rating-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.rc {
  padding: 4px 10px !important; border-radius: 100px !important;
  border: 1.5px solid #e2e5ef !important; font-size: 11px !important;
  color: #5a6080 !important; cursor: pointer; background: #fff !important;
  transition: all .15s;
}
.rc:hover { border-color: #a0aacc !important; color: #1a1d2e !important; }
.rc.on {
  background: rgba(108,99,255,.1) !important;
  border-color: rgba(108,99,255,.4) !important;
  color: #6c63ff !important; font-weight: 600 !important;
}

/* ── Provider search input ── */
.sf-search {
  display: flex !important; align-items: center !important; gap: 6px !important;
  border: 1.5px solid #e2e5ef !important; border-radius: 7px !important;
  padding: 0 10px !important; height: 32px !important;
  background: #f5f6fb !important; margin-bottom: 8px !important;
  transition: border-color .15s;
}
.sf-search:focus-within { border-color: rgba(108,99,255,.4) !important; }
.sf-search svg { color: #9ba0b8 !important; flex-shrink: 0; }
.sf-search input {
  border: none !important; background: none !important;
  outline: none; font-size: 12px !important; color: #1a1d2e; width: 100%;
}
.sf-show-more {
  font-size: 11px; color: #6c63ff; margin-top: 5px;
  background: none; border: none; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── Reset button ── */
.sb-reset {
  display: none; /* shown by JS when filters active */
  align-items: center !important;
  width: auto !important;
  margin: 6px 12px 8px !important;
  padding: 8px 12px !important; border-radius: 8px !important;
  border: 1.5px solid rgba(220,38,38,.2) !important;
  color: #dc2626 !important; font-size: 12px !important; font-weight: 500 !important;
  background: rgba(220,38,38,.03) !important;
  cursor: pointer; transition: all .15s; text-decoration: none;
  justify-content: center; gap: 6px;
}
.sb-reset:hover { background: rgba(220,38,38,.08) !important; border-color: rgba(220,38,38,.4) !important; }
.sb-reset svg { width: 12px; height: 12px; stroke: #dc2626; fill: none; stroke-width: 2; }

/* ── Archive body — sidebar close row ── */
.sb-close-row {
  display: none !important;
  align-items: center; justify-content: space-between;
  padding: 14px 14px 10px; border-bottom: 1px solid #e2e5ef; margin-bottom: 6px;
}
@media(max-width:900px) {
  .sb-close-row { display: flex !important; }
  .mob-filter-btn, .sb-filter-btn { display: flex !important; }
  .sidebar { position: static !important; max-height: none !important; }
}



/* ═══════════════════════════════════════════════════════════════
   BC-WRAP — breadcrumb outer container (full-width strip)
   sg-breadcrumbs handles max-width centering internally
   ═══════════════════════════════════════════════════════════════ */
.bc-wrap {
  background: var(--surface, #f8f9fc);
  border-bottom: 1px solid var(--border, #e2e5ef);
  width: 100%;
}
/* sg-breadcrumbs already has max-width:var(--maxw); margin:0 auto; padding:0 40px */
/* Override bc-bar styles that may conflict when used as outer strip */
.bc-wrap .bc-bar,
.bc-wrap nav.sg-breadcrumbs {
  /* These should NOT add their own padding if bc-wrap is used */
  max-width: var(--maxw, 1280px);
  margin: 0 auto;
  padding: 0 40px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.bc-wrap nav.sg-breadcrumbs::-webkit-scrollbar { display: none; }

/* ol inside sg-breadcrumbs */
.sg-breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-breadcrumbs li {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #9ba0b8;
  white-space: nowrap;
  gap: 6px;
}
.sg-breadcrumbs li::before {
  content: '/';
  color: #c4c8d8;
  font-size: 11px;
}
.sg-breadcrumbs li:first-child::before { display: none; }
.sg-breadcrumbs a {
  color: #6366F1;
  text-decoration: none;
}
.sg-breadcrumbs a:hover { opacity: .75; }
.sg-breadcrumbs .active,
.sg-breadcrumbs li[aria-current="page"] { color: #5a6080; }

/* ── RTP Apply button — ensure good styling ── */
.sb-apply-rtp {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 8px;
  background: #6c63ff;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .15s;
  letter-spacing: .02em;
}
.sb-apply-rtp:hover { background: #5450d0; }

/* ── "Фільтри ×" sidebar header label — style properly ── */
.sb-close-row { padding: 12px 14px 10px; }
.sb-close-title {
  font-size: 12px;
  font-weight: 700;
  color: #1a1d2e;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sb-close-btn {
  width: 26px; height: 26px;
  border: 1px solid #e2e5ef;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #9ba0b8; cursor: pointer;
  background: #fff; transition: all .15s;
}
.sb-close-btn:hover { border-color: #dc2626; color: #dc2626; }

/* Sidebar title (mobile "Filters" + close) */
.sg-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e2e5ef;
  margin-bottom: 4px;
}
.sg-sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1d2e;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sg-filters-count {
  background: #6c63ff;
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 100px;
  font-family: 'JetBrains Mono','Courier New',monospace;
  display: none;
}
.sg-filters-count.has-filters { display: inline-flex; }



/* ── Filter toggle SVG icon ── */
svg.fb-toggle {
  flex-shrink: 0;
  color: #9ba0b8;
  transition: transform .22s cubic-bezier(.4,0,.2,1), color .15s;
  display: block;
}
.fb:not(.collapsed) svg.fb-toggle {
  transform: rotate(0deg);
  color: #9ba0b8;
}
.fb.collapsed svg.fb-toggle {
  transform: rotate(-90deg);
  color: #c4c8d8;
}
.fb-head:hover svg.fb-toggle { color: #5a6080; }

/* Keep the span.fb-toggle legacy selector working too */
span.fb-toggle {
  display: none; /* hide text fallback if still present */
}


/* ── SVG toggle — не перехоплює кліки, пропускає батьківському .fb-head ── */
svg.fb-toggle,
svg.fb-toggle * {
  pointer-events: none !important;
}

/* ── .fb-head — весь рядок клікабельний ── */
.fb-head {
  cursor: pointer !important;
  -webkit-user-select: none;
  user-select: none;
}

/* ── .sidebar.mobile-open — мобільний стан ── */
@media (max-width: 900px) {
  .sidebar.mobile-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(300px, 88vw) !important;
    height: 100dvh !important;
    z-index: 300 !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 40px rgba(15,15,35,.22) !important;
    border-right: 1px solid #e2e5ef !important;
  }
}



/* ═══════════════════════════════════════════════════════
   SIDEBAR WIDTH FIX — 290px, no horizontal scroll
   ═══════════════════════════════════════════════════════ */
.sidebar {
  width: 290px !important;
  min-width: 290px !important;
  max-width: 290px !important;
  overflow-x: hidden !important;
}
.archive-body {
  max-width: var(--maxw, 1280px);
  margin: 0 auto;
}

/* ── In-block search input ── */
.fb-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f5f6fb;
  border: 1.5px solid #e2e5ef;
  border-radius: 7px;
  padding: 0 10px;
  height: 32px;
  margin-bottom: 8px;
  transition: border-color .15s;
}
.fb-search-wrap:focus-within { border-color: rgba(108,99,255,.4); }
.fb-search-wrap svg { color: #9ba0b8; flex-shrink: 0; }
.fb-search-input {
  border: none;
  background: none;
  outline: none;
  font-size: 12px;
  color: #1a1d2e;
  width: 100%;
  font-family: inherit;
}
.fb-search-input::placeholder { color: #9ba0b8; }

/* ── .ft-tab-link as button (type tabs) ── */
button.ft-tab-link,
button.ft-tab {
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}

/* ── sf-sort-item as button ── */
button.sf-sort-item,
button.sf-item,
button.rc {
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* ── RTP Apply button ── */
button.sb-apply-rtp {
  width: 100%;
  margin-top: 10px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: #6c63ff;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
button.sb-apply-rtp:hover { background: #5450d0; }

/* ── Loading overlay on grid ── */
#slotsGrid { min-height: 160px; transition: opacity .2s; }



/* ═══════════════════════════════════════════════════════════════
   MOBILE ADAPTATION — all 5 page types
   Breakpoints: 900px tablet | 768px large phone | 480px phone | 375px small
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile filter trigger bar (archive) ── */
.sg-mob-filter-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e2e5ef;
  position: sticky;
  top: 64px;
  z-index: 185;
}
.sg-mob-filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1.5px solid #6c63ff;
  border-radius: 8px;
  background: #fff;
  color: #6c63ff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}
.sg-mob-filter-btn svg { stroke: #6c63ff; flex-shrink: 0; }
.sg-mob-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 100px;
  background: #6c63ff;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}
.sg-mob-count {
  font-size: 12px;
  color: #9ba0b8;
  font-family: 'JetBrains Mono', monospace;
}

/* ════════════════════════════════════════════════
   TABLET (≤900px)
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Page hero */
  .ph-inner   { padding: 0 20px 16px !important; }
  .ph-h1      { font-size: 22px !important; }
  .ph-sub     { font-size: 12px !important; }
  .ph-eyebrow { font-size: 10px !important; }
  .ph-stats-row { flex-wrap: wrap; }
  .ph-stat    { padding: 10px 16px !important; flex: 1 1 120px; }

  /* Breadcrumb */
  .bc-wrap .sg-breadcrumbs,
  .sg-breadcrumbs { padding: 0 16px !important; }

  /* Type tabs */
  .ft-inner { padding: 0 16px !important; }
  .ft-tab-link, .ft-tab { padding: 0 12px !important; height: 40px !important; font-size: 12px !important; }

  /* ARCHIVE — sidebar becomes drawer */
  .archive-body {
    display: block !important;
    flex-direction: unset !important;
  }
  .sg-mob-filter-bar { display: flex; }
  .archive-main { padding: 12px 16px 40px !important; }

  /* Sidebar — hidden by default, shown as drawer */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(300px, 88vw) !important;
    min-width: unset !important;
    max-width: unset !important;
    height: 100dvh !important;
    z-index: 300 !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-right: 1px solid #e2e5ef !important;
    box-shadow: 4px 0 40px rgba(0,0,0,.18) !important;
    transform: translateX(-105%) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0) !important;
  }
  .sb-close-row { display: flex !important; }

  /* Cards grid */
  .sg, .slots-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  .sg-hp-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* Provider hero */
  .prov-hero-inner { flex-wrap: wrap; gap: 14px; padding: 0 20px !important; }
  .ph-stats { flex-direction: row !important; flex-wrap: wrap; gap: 8px; width: 100%; }
  .ph-stat-block { flex: 1 1 100px; min-width: 100px; }

  /* About section */
  .about-inner { flex-direction: column !important; padding: 0 20px !important; gap: 20px; }
  .about-facts { width: 100% !important; }

  /* Type hero */
  .typ-hero-inner { padding: 0 20px !important; flex-direction: column; gap: 20px; }
  .typ-hero-right { max-width: 100% !important; }
  .typ-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .typ-section { padding: 20px !important; }

  /* Theme hero */
  .tem-hero-inner { padding: 0 20px !important; }
  .tem-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .tem-section { padding: 20px !important; }
  .tem-search-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tem-search-wrap { max-width: 100% !important; }

  /* Providers list */
  .prov-letter-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Provider slots section */
  [data-grid="slots"] { padding: 0 !important; }
}

/* ════════════════════════════════════════════════
   LARGE PHONE (≤768px)
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero */
  .ph-h1  { font-size: 20px !important; letter-spacing: -.02em !important; }
  .ph-stat { padding: 8px 12px !important; }
  .ph-stat-val { font-size: 16px !important; }
  .ph-stat-key { font-size: 10px !important; }

  /* Sections padding */
  .typ-section { padding: 16px !important; }
  .tem-section { padding: 16px !important; }

  /* Type grid */
  .typ-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .typ-card { padding: 12px !important; }

  /* Theme grid */
  .tem-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Providers list */
  .prov-letter-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Provider hero stacked */
  .ph-logo { width: 60px !important; height: 60px !important; font-size: 16px !important; }
  .ph-name { font-size: 20px !important; }
  .ph-chips { gap: 4px !important; }
  .ph-chip  { font-size: 11px !important; padding: 4px 10px !important; }

  /* Page-provajdery */
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Stats */
  .typ-stats, .tem-stats { gap: 8px !important; flex-wrap: wrap; }
  .typ-stat, .tem-stat { flex: 1 1 120px; }

  /* bc-wrap padding */
  .bc-wrap .sg-breadcrumbs { padding: 0 16px !important; }
}

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

  /* Hero */
  .ph-h1  { font-size: 18px !important; }
  .ph-sub { display: none; }
  .ph-stats-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ph-stats-row::-webkit-scrollbar { display: none; }
  .ph-stat { min-width: 90px; flex-shrink: 0; }

  /* Cards — 1 col on very small */
  /* keep 2 col for cards, 1 col only < 380 */
  .sg, .slots-grid { gap: 10px !important; }

  /* Type grid */
  .typ-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .typ-card-desc { display: none; }

  /* Theme grid */
  .tem-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .tem-card-name { font-size: 11px !important; }
  .tem-card-count { font-size: 9px !important; }

  /* Providers list */
  .prov-letter-grid { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Provider hero */
  .prov-hero-inner { flex-direction: column !important; }
  .ph-logo { width: 52px !important; height: 52px !important; }
  .ph-chips { flex-wrap: wrap; gap: 4px; }

  /* About inner */
  .about-facts { width: 100% !important; }

  /* Filter tabs */
  .ft-inner { padding: 0 12px !important; }
  .ft-tab-link { padding: 0 10px !important; font-size: 11px !important; }

  /* Type hero */
  .typ-h1 { font-size: 22px !important; }
  .tem-h1 { font-size: 22px !important; }

  /* Pagination */
  .sg-pagination { gap: 3px !important; padding: 20px 0 !important; }
  .sg-pagination .page-numbers { min-width: 32px !important; height: 32px !important; font-size: 12px !important; }
  .sg-pagination .sg-pag-prev a,
  .sg-pagination .sg-pag-next a { padding: 0 10px !important; font-size: 11px !important; }

  /* ctrl bar */
  .ctrl { flex-wrap: wrap; gap: 8px; }
  .ctrl-sel { font-size: 11px; }

  /* sg-mob-filter-bar text */
  .sg-mob-count { display: none; }
}

/* ════════════════════════════════════════════════
   SMALL PHONE (≤375px)
   ════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .sg, .slots-grid { grid-template-columns: 1fr !important; }
  .sg-hp-4 { grid-template-columns: 1fr !important; }
  .ph-h1  { font-size: 16px !important; }
  .archive-main { padding: 10px 12px 32px !important; }
}

/* ════════════════════════════════════════════════
   MOBILE SIDEBAR — smooth slide-in drawer
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Prevent scrolling body when sidebar open */
  body.sidebar-open { overflow: hidden; }

  /* Sidebar body internal scroll */
  .sidebar { padding-bottom: 80px !important; }

  /* Filter blocks inside mobile sidebar */
  .sidebar .fb { margin: 0 8px 5px !important; }
  .sidebar .fb-body { padding: 8px 12px 10px !important; }
  .sidebar .sf-item { padding: 6px 4px !important; }
  .sidebar .sf-label { font-size: 13px !important; }
  .sidebar .sf-cnt  { font-size: 11px !important; }
  .sidebar .rating-chips .rc { padding: 5px 11px !important; font-size: 11px !important; }
  .sidebar .fb-search-wrap { height: 34px !important; }

  /* Reset button at bottom of sidebar */
  .sb-reset { margin: 8px 8px 16px !important; }
}



/* ═══════════════════════════════════════════════════════════════════
   ███  MOBILE MASTER  ███  5 page types  ███
   Overrides all inline styles + previous mobile rules
   900px → tablet/landscape | 768px → phone | 480px → small | 375px → xs
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. SHARED: breadcrumb + hero + filter-tabs ── */
@media (max-width: 900px) {

  /* breadcrumb */
  .bc-wrap .sg-breadcrumbs,
  .bc-wrap nav { padding: 0 16px !important; }

  /* hero block */
  .page-hero .ph-inner,
  .page-hero [class*="ph-inner"]      { padding: 20px 16px 14px !important; }
  .ph-h1                               { font-size: 22px !important; line-height: 1.25 !important; }
  .ph-sub                              { font-size: 12px !important; }
  .ph-eyebrow                          { font-size: 10px !important; }
  .ph-stats-outer                      { overflow: hidden; }
  .ph-stats-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 0 16px 12px !important;
    gap: 8px !important;
  }
  .ph-stats-row::-webkit-scrollbar     { display: none; }
  .ph-stat {
    flex-shrink: 0 !important;
    min-width: 100px !important;
    padding: 10px 14px !important;
  }
  .ph-stat-val { font-size: 18px !important; }
  .ph-stat-key { font-size: 10px !important; }

  /* type/theme tabs */
  .filter-tabs .ft-inner { padding: 0 12px !important; }
  button.ft-tab-link, a.ft, .ft-tab { padding: 0 10px !important; height: 40px !important; font-size: 12px !important; }
}

/* ── 2. ARCHIVE: sidebar drawer + mobile bar ── */
@media (max-width: 900px) {

  /* Show mobile filter bar */
  .sg-mob-filter-bar { display: flex !important; }

  /* Archive layout */
  .archive-body {
    display: block !important;
    flex-direction: unset !important;
    padding: 0 !important;
  }

  /* Sidebar = hidden fixed drawer */
  .sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: min(300px, 90vw) !important;
    min-width: unset !important;
    max-width: unset !important;
    height: 100dvh !important;
    z-index: 400 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #fff !important;
    border-right: 1px solid #e2e5ef !important;
    box-shadow: none !important;
    transform: translateX(-110%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s !important;
    /* Reset sticky */
    max-height: none !important;
    border-bottom: none !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 40px rgba(0,0,0,.22) !important;
  }

  /* Show close row in sidebar */
  .sb-close-row { display: flex !important; }

  /* Archive main content full width */
  .archive-main { padding: 12px 14px 40px !important; width: 100% !important; }

  /* Slot cards — 2 col */
  .sg { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }

  /* Controls bar */
  .ctrl { flex-wrap: wrap; gap: 8px; padding: 0 !important; }
}

/* ── 3. PROVIDER PAGE (taxonomy-sl-provider) ── */
@media (max-width: 900px) {

  /* Provider hero */
  .prov-hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 16px !important;
    gap: 16px !important;
  }
  .ph-stats {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .ph-stat-block {
    flex: 1 1 110px !important;
    min-width: 100px !important;
    padding: 10px 14px !important;
  }
  .ph-logo {
    width: 60px !important; height: 60px !important;
    font-size: 18px !important;
  }
  .ph-name { font-size: 22px !important; }
  .ph-chips { flex-wrap: wrap !important; gap: 5px !important; }

  /* About strip (description + facts table) */
  .about-strip { padding: 0 !important; }
  .about-inner {
    flex-direction: column !important;
    padding: 0 16px !important;
    gap: 20px !important;
  }
  .about-text.prov-desc-rich { flex: unset !important; }
  .about-facts {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }

  /* Provider slots section */
  .filter-tabs .ft-inner { padding: 0 12px !important; }
  /* Slots section padding */
  [style*="padding:22px 40px"],
  [style*="padding: 22px 40px"] {
    padding: 16px !important;
  }
}

/* ── 4. TYPE PAGE (taxonomy-sl-type) ── */
@media (max-width: 900px) {

  /* Type hero description area */
  .typ-hero-inner,
  [style*="padding:0 40px"] { padding: 0 16px !important; }

  /* Type description + provider chips */
  .type-desc-rich { font-size: 13px !important; }
  [style*="padding:12px 32px"] { padding: 12px 16px !important; }
  [style*="padding:22px 32px 40px"] { padding: 16px !important; }

  /* Type grid */
  .typ-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Provider tags bar */
  [style*="padding:20px 0"] .typ-hero-inner { padding: 0 16px !important; }
}

@media (max-width: 600px) {
  .typ-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .typ-card-desc { display: none !important; }
}

/* ── 5. THEME PAGE (taxonomy-sl-theme) ── */
@media (max-width: 900px) {
  .tem-hero-inner { padding: 0 16px !important; }
  .tem-h1  { font-size: 24px !important; }
  .tem-desc { font-size: 12px !important; }
  .tem-stats { flex-wrap: wrap !important; gap: 8px !important; }
  .tem-section,
  [style*="padding:22px 32px 40px"],
  [style*="padding: 22px 32px 40px"] { padding: 16px !important; }

  /* Theme search row */
  [style*="padding:12px 32px"] { padding: 12px 16px !important; }

  /* Theme grid */
  .tem-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
}

@media (max-width: 600px) {
  .tem-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .tem-card-name  { font-size: 11px !important; }
  .tem-card-count { font-size: 9px !important; }
}

/* ── 6. PROVIDERS LIST (page-provajdery) ── */
@media (max-width: 900px) {

  /* Search + alpha bar */
  [style*="padding:14px 32px"] { padding: 12px 16px !important; }
  [style*="padding:24px 32px 48px"] { padding: 16px !important; }

  /* Letter sections */
  .alpha-section { padding: 0 !important; }
  [style*="font-size:22px;font-weight:700"] {
    font-size: 18px !important;
    padding: 8px 0 8px !important;
  }

  /* Provider cards grid */
  .prov-letter-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  /* Provider card compact */
  .prov-card,
  [style*="display:flex;align-items:center;gap:14px;padding:16px"] {
    padding: 10px !important;
    gap: 8px !important;
  }
}

@media (max-width: 600px) {
  .prov-letter-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 7. STANDARD PHONE (≤480px) — all pages ── */
@media (max-width: 480px) {

  /* Hero */
  .ph-h1    { font-size: 19px !important; }
  .ph-sub   { display: none !important; }

  /* Archive cards — stay 2 col until 375 */
  .sg { gap: 8px !important; }

  /* Provider page */
  .ph-logo { width: 48px !important; height: 48px !important; font-size: 14px !important; }
  .ph-name { font-size: 18px !important; }

  /* Providers list */
  .prov-letter-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Pagination compact */
  .sg-pagination { gap: 3px !important; padding: 16px 0 !important; }
  .sg-pagination .page-numbers {
    min-width: 32px !important; height: 32px !important;
    font-size: 11px !important; padding: 0 6px !important;
  }
  .sg-pagination .sg-pag-prev a,
  .sg-pagination .sg-pag-next a { padding: 0 8px !important; font-size: 11px !important; }

  /* Archive ctrl bar */
  .ctrl-l { font-size: 11px !important; }
  .ctrl-sel { font-size: 11px !important; }

  /* Mobile filter bar */
  .sg-mob-filter-bar { padding: 8px 12px !important; }
  .sg-mob-filter-btn { height: 34px !important; font-size: 12px !important; padding: 0 12px !important; }
}

/* ── 8. SMALL PHONE (≤375px) ── */
@media (max-width: 375px) {
  .ph-h1    { font-size: 16px !important; }
  .archive-main { padding: 10px 10px 32px !important; }
  .sg { grid-template-columns: 1fr !important; }
  .prov-letter-grid { grid-template-columns: 1fr !important; }
  .tem-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── 9. SIDEBAR INTERNAL on mobile ── */
@media (max-width: 900px) {
  body.sb-open { overflow: hidden !important; }

  .sidebar .fb { margin: 0 8px 4px !important; border-radius: 8px !important; }
  .sidebar .fb-head { padding: 10px 12px !important; border-radius: 8px !important; }
  .sidebar .fb-body { padding: 8px 12px 12px !important; }
  .sidebar .sf-label { font-size: 13px !important; }
  .sidebar .sf-item  { padding: 5px 4px !important; }
  .sidebar .rating-chips .rc { font-size: 12px !important; padding: 5px 12px !important; }
  .sidebar .sb-reset { margin: 8px 8px 16px !important; }
  .sidebar .sb-close-row {
    padding: 14px 14px 12px !important;
    border-bottom: 1px solid #e8eaf0 !important;
    margin-bottom: 6px !important;
  }
}

/* ── 10. FILTER TABS scroll on mobile ── */
@media (max-width: 768px) {
  .filter-tabs {
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .ft-inner {
    min-width: max-content;
    padding: 0 12px !important;
  }
}



/* ═══════════════════════════════════════════════════════════════════
   ██  MOBILE FINAL FIXES  ██  All 5 page types  ██
   Targeting every inline padding + slots ctrl bar
   ═══════════════════════════════════════════════════════════════════ */

/* ── Universal: all inline max-width containers ── */
@media (max-width: 900px) {

  /* Any direct child of body/main that has 40px horizontal padding via inline */
  [style*="padding:0 40px"],
  [style*="padding: 0 40px"],
  [style*="padding:22px 40px"],
  [style*="padding: 22px 40px"],
  [style*="padding:22px 40px 40px"],
  [style*="padding: 22px 40px 40px"],
  [style*="padding:0 32px"],
  [style*="padding: 0 32px"],
  [style*="padding:22px 32px 40px"],
  [style*="padding: 22px 32px 40px"],
  [style*="padding:12px 32px"],
  [style*="padding: 12px 32px"],
  [style*="padding:14px 32px"],
  [style*="padding: 14px 32px"],
  [style*="padding:24px 32px 48px"],
  [style*="padding: 24px 32px 48px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Slots ctrl bar on provider/type/theme pages */
  [style*="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  /* Search + sort row wraps */
  [style*="display:flex;gap:8px;align-items:center"] {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  /* Search input full width on mobile */
  #slSearch {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Sort select expands */
  #slSort {
    flex: 1 !important;
    min-width: 120px !important;
  }

  /* Provider page: slot count + search/sort row */
  .prov-slots-ctrl {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}

/* ── Provider page slots area ── */
@media (max-width: 768px) {
  #slSearch {
    width: 150px !important;
  }
}

@media (max-width: 480px) {
  /* Slots search full width, sort beside it */
  #slSearch  { width: 100% !important; min-width: 0 !important; }
  #slSort    { width: auto !important; }

  /* Provider page about section */
  .about-inner { gap: 16px !important; }

  /* Typ/tem page hero inner */
  .typ-hero-inner { gap: 14px !important; }
  .typ-desc-rich, .theme-desc-rich, .prov-desc-rich { font-size: 13px !important; }

  /* Provider chip row */
  .prov-letter .prov-logo { width: 34px !important; height: 34px !important; font-size: 11px !important; }
  .prov-letter .prov-name { font-size: 12px !important; }
}

/* ── FILTER TABS: scrollable on all pages ── */
@media (max-width: 900px) {
  .filter-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch;
  }
  .filter-tabs::-webkit-scrollbar { display: none !important; }
  .ft-inner {
    min-width: max-content !important;
    width: max-content !important;
  }

  /* Provider type-filter tabs on provider page */
  .ftabs,
  .filter-tabs .ft-inner { white-space: nowrap !important; }
}

/* ── Mobile filter button bar on archive ── */
@media (max-width: 900px) {
  .sg-mob-filter-bar {
    display: flex !important;
    position: sticky !important;
    top: 60px !important;
    z-index: 190 !important;
    background: #fff !important;
    border-bottom: 1px solid #e2e5ef !important;
  }
}

/* ── Sidebar drawer: Escape from conflicting rules ── */
@media (max-width: 900px) {
  .sidebar:not(.mobile-open) {
    transform: translateX(-110%) !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 40px rgba(0,0,0,.22) !important;
    pointer-events: auto !important;
  }
  /* sb-close-row always visible inside open sidebar on mobile */
  .sb-close-row {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    z-index: 5 !important;
  }
}

/* ── Cards: 1 column on 375px ── */
@media (max-width: 375px) {
  .sg, .slots-grid {
    grid-template-columns: 1fr !important;
  }
}



/* ═══════════════════════════════════════════════════
   MOBILE SIDEBAR — z-index & pointer-events FINAL FIX
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Overlay — BELOW sidebar */
  #sgOverlay {
    z-index: 298 !important;
    pointer-events: auto !important;
  }

  /* Sidebar — always ABOVE overlay regardless of DOM order */
  #sidebar {
    z-index: 299 !important;
    /* DO NOT use pointer-events:none — it blocks clicks inside */
    pointer-events: auto !important;
  }
  #sidebar.mobile-open {
    pointer-events: auto !important;
    z-index: 299 !important;
  }

  /* All interactive elements inside sidebar — force clickable */
  #sidebar button,
  #sidebar input,
  #sidebar a,
  #sidebar .fb-head,
  #sidebar .sf-item,
  #sidebar .rc,
  #sidebar .sf-sort-item,
  #sidebar .sb-apply-rtp,
  #sidebar .sb-reset {
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
  }
}


/* ── Sidebar vertical scroll fix (mobile) ── */
@media (max-width: 900px) {
  #sidebar,
  #sidebar.mobile-open {
    overflow-y: scroll !important;   /* scroll (not auto) — always shows scrollbar channel */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;  /* no body scroll bleed */
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: 100px !important; /* space for last filter + reset btn */
  }
}


/* ═══════════════════════════════════════════════════
   VOLATILITY BADGE — redesign (visible on any image)
   ═══════════════════════════════════════════════════ */

.sc-vol {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  line-height: 1 !important;
  /* Pill layout */
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 8px 4px 6px !important;
  border-radius: 6px !important;
  /* Dark glass base — visible on any photo */
  background: rgba(10, 12, 28, 0.72) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
/* Color dot before text */
.sc-vol::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.sc-vol.vol-low::before    { background: #4ade80 !important; box-shadow: 0 0 4px #4ade80 !important; }
.sc-vol.vol-medium::before { background: #fbbf24 !important; box-shadow: 0 0 4px #fbbf24 !important; }
.sc-vol.vol-high::before   { background: #f87171 !important; box-shadow: 0 0 4px #f87171 !important; }
.sc-vol.vol-vhigh::before,
.sc-vol.vol-max::before    { background: #ff4444 !important; box-shadow: 0 0 6px #ff4444 !important; }

/* ── Mobile: 2 stats only (RTP + Max Win), hide Volatility column ── */
@media (max-width: 900px) {
  .sc-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .sc-stats .sc-st:nth-child(2) {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   SC-R4 — Variant 4 ratings block (square stars, 2 sections)
   ═══════════════════════════════════════════════════════════ */
.sc-r4 {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f2f8;
}
.sc-r4-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  padding: 4px 2px;
}
.sc-r4-side.sc-r4-empty {
  opacity: .32;
}
.sc-r4-div {
  width: 1px;
  background: #e8eaf0;
  align-self: stretch;
  margin: 2px 6px;
  flex-shrink: 0;
}

/* Square stars row */
.sc-r4-stars {
  display: flex;
  gap: 2px;
  align-items: center;
}
.sc-r4-s {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #e8eaf0;
  flex-shrink: 0;
  transition: background .15s;
}
.sc-r4-s.on {
  background: #fbbf24; /* default yellow, overridden by color classes below */
}

/* ── Score colour tiers ── */
.sc-r4.r4-green .sc-r4-s.on { background: #22c55e; }
.sc-r4.r4-green .sc-r4-num  { color: #15803d; }

.sc-r4.r4-yellow .sc-r4-s.on { background: #fbbf24; }
.sc-r4.r4-yellow .sc-r4-num  { color: #b45309; }

.sc-r4.r4-red .sc-r4-s.on { background: #f87171; }
.sc-r4.r4-red .sc-r4-num  { color: #dc2626; }

/* Dash (absent score) stays grey regardless of tier */
.sc-r4 .sc-r4-dash { color: #c4c8d8 !important; }

/* Number */
.sc-r4-num {
  font-size: 13px;
  font-weight: 700;
  color: #1a1d2e;
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  line-height: 1;
}
.sc-r4-dash {
  color: #c4c8d8;
  font-weight: 400;
}
.sc-r4-cnt {
  font-size: 9px;
  font-weight: 400;
  color: #9ba0b8;
  font-family: 'Rubik', sans-serif;
}

/* Label */
.sc-r4-lbl {
  font-size: 9px;
  color: #9ba0b8;
  text-transform: none;
  letter-spacing: .03em;
  line-height: 1;
}

/* Mobile: keep both sides, just tighten */
@media (max-width: 480px) {
  .sc-r4-num  { font-size: 12px; }
  .sc-r4-s    { width: 8px; height: 8px; }
  .sc-r4-div  { margin: 2px 4px; }
}