/*
Theme Name: UltimateSlots
Theme URI: https://www.ultimateslots.com
Author: UltimateSlots
Author URI: https://www.ultimateslots.com
Description: A premium dark theme for free slot demo sites.
Version: 1.5.76
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ultimateslots
*/

/* ═══ DESIGN SYSTEM ═══ */
:root{
  --bg-deep:#0e0b18;--bg-card:#131020;--bg-card-hover:#1c1730;--bg-surface:#241d3a;
  --gold:#f5be31;--gold-bright:#fdd55a;--gold-dim:#d4a01f;
  --gold-glow:rgba(245,190,49,0.25);--gold-glow-soft:rgba(245,190,49,0.08);
  --blue:#4a90f7;--emerald:#14d990;--rose:#ff4571;
  --text-1:#f5f2f8;--text-2:#aea6bd;--text-3:#988fa9;--text-4:#6f6784;
  --border:rgba(170,162,190,0.06);--hairline:rgba(170,162,190,0.13);--hairline-strong:rgba(170,162,190,0.2);--border-card:rgba(170,162,190,0.04);
  --r-md:12px;--r-lg:14px;--r-xl:18px;
  --shadow-c:0 4px 20px rgba(0,0,0,0.3);
  --shadow-ch:0 8px 12px rgba(0,0,0,0.58);
  --fd:'Archivo Black',sans-serif;--fb:'DM Sans',sans-serif;
  --nh:72px;--mw:1280px;
}

/* ═══ RESET ═══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
body{font-family:var(--fb);background:#141326;color:var(--text-1);line-height:1.6;overflow-x:clip;width:100%;max-width:100vw}
/* page sky gradient — lives on a real fixed layer, NOT background-attachment:fixed on body. Chrome repaints fixed-attachment backgrounds at the wrong offset inside composited scrollers (hero showcase), which drew a lighter rectangle around the carousel on all four sides. A fixed pseudo-element composites once, so no bleed. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(58,47,79,0.5) 0%,rgba(42,34,60,0.26) 38%,rgba(20,19,38,0) 70%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.container{max-width:var(--mw);margin:0 auto;padding:0 20px;width:100%;box-sizing:border-box}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}

/* ═══ AMBIENT ═══ */
.ambient{position:fixed;inset:-80px;z-index:0;pointer-events:none}
.ambient::before{content:'';position:absolute;inset:0;background-repeat:no-repeat;pointer-events:none;background-image:radial-gradient(ellipse 980px 620px at 6% 2%,rgba(245,190,49,0.22) 0%,transparent 60%),radial-gradient(ellipse 760px 560px at 94% 96%,rgba(232,160,32,0.10) 0%,transparent 58%),radial-gradient(ellipse 520px 520px at 88% 14%,rgba(255,69,113,0.06) 0%,transparent 60%)}
body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px}

/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nh);z-index:100;background:#0a0813;border-bottom:1px solid rgba(170,162,190,0.16);box-shadow:0 8px 26px rgba(0,0,0,0.5);transition:all 0.3s;overflow:hidden;width:100%}
.nav.scrolled{background:rgba(7,7,11,0.98);box-shadow:0 12px 36px rgba(0,0,0,0.62);border-bottom-color:rgba(170,162,190,0.22)}
.nav-inner{max-width:var(--mw);margin:0 auto;padding:0 20px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-text{font-family:var(--fd);font-size:24px;text-transform:uppercase;letter-spacing:0.02em;line-height:1}
.logo-text span{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links li{list-style:none}
.nav-links a,.nav-links li a{font-size:14px;font-weight:700;color:var(--text-1);transition:all 0.2s;position:relative;white-space:nowrap;display:block;letter-spacing:0.04em;text-transform:uppercase}
.nav-links a:hover,.nav-links li a:hover{color:var(--gold)}
.nav-links li.active a,.nav-links a.active{color:var(--gold)}
.nav-links li.active a::after,.nav-links a.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-bright));border-radius:1px;box-shadow:0 0 8px rgba(245,190,49,0.3)}
.nav-links li.current-menu-item a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-bright));border-radius:1px;box-shadow:0 0 8px rgba(245,190,49,0.3)}
.nav-links li.current-menu-item a{color:var(--gold)}
.nav-search{position:relative;width:180px;flex-shrink:0}
.nav-search form{display:block}
.nav-search input{width:100%;padding:8px 12px 8px 34px;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;color:var(--text-1);font-size:13px;font-family:var(--fb);outline:none;transition:all 0.3s}
.nav-search input::placeholder{color:var(--text-3)}
.nav-search input:focus{border-color:rgba(245,190,49,0.25);background:var(--bg-card);box-shadow:0 0 0 3px rgba(245,190,49,0.06)}
.nav-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-3);pointer-events:none;z-index:1}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;border-radius:0;transition:opacity 0.2s;z-index:101}
.burger:hover .burger-lines span{background:var(--gold-bright)}
.burger-lines{width:28px;height:18px;position:relative}
.burger-lines span{position:absolute;left:0;width:100%;height:3.5px;background:var(--gold);border-radius:2px;transition:all 0.3s}
.burger-lines span:nth-child(1){top:0}.burger-lines span:nth-child(2){top:7.25px}.burger-lines span:nth-child(3){top:14.5px}
.burger.open .burger-lines span:nth-child(1){top:7.25px;transform:rotate(45deg)}
.burger.open .burger-lines span:nth-child(2){opacity:0}
.burger.open .burger-lines span:nth-child(3){top:7.25px;transform:rotate(-45deg)}
.mobile-overlay{position:fixed;inset:0;z-index:99;background:radial-gradient(circle at 15% 8%,rgba(245,190,49,0.10),transparent 40%),radial-gradient(circle at 90% 55%,rgba(74,144,247,0.12),transparent 45%),linear-gradient(180deg,rgba(51,48,69,0.45),rgba(17,15,24,0.1) 60%),var(--bg-deep);backdrop-filter:blur(24px);display:none;flex-direction:column;padding:calc(var(--nh) + 32px) 24px 24px;align-items:center;justify-content:flex-start}
.mobile-overlay.open{display:flex}
.mob-links{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;width:100%;max-width:400px}
.mob-links li{list-style:none}
.mob-links > li > a{display:block;padding:15px 20px;font-family:var(--fd);font-size:17px;font-weight:700;color:var(--text-1);border-radius:12px;transition:all 0.2s;text-transform:uppercase;letter-spacing:0.03em;border:1px solid transparent}
.mob-links > li > a:hover,.mob-links > li.active > a,.mob-links > li.current-menu-item > a{color:var(--gold);background:rgba(245,190,49,0.06);border-color:rgba(245,190,49,0.15)}
.mob-links > li.open > a{color:var(--gold);background:rgba(245,190,49,0.05);border-color:rgba(245,190,49,0.15)}
.mob-search{margin-top:20px;position:relative}
.mob-search form{display:block}
.mob-search input{width:100%;padding:12px 16px 12px 42px;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;color:var(--text-1);font-size:15px;font-family:var(--fb);outline:none}
.mob-search input::placeholder{color:var(--text-3)}
.mob-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3)}

/* v172: chip rail edges fade the CHIPS (mask), not a painted block over them.
   A mask fades to transparent, so it sits correctly on any background and can
   never clip a chip mid-word behind an opaque panel. */
.chips-wrap{position:relative;max-width:100%;display:flex;align-items:center}
.chips-wrap .chips-scroll{scroll-behavior:smooth;flex:1 1 auto;min-width:0}
.chips-scroll{--fade-l:0px;--fade-r:0px;scroll-padding-inline:58px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,0.45) calc(var(--fade-l) * 0.42),#000 var(--fade-l),#000 calc(100% - var(--fade-r)),rgba(0,0,0,0.45) calc(100% - var(--fade-r) * 0.42),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,0.45) calc(var(--fade-l) * 0.42),#000 var(--fade-l),#000 calc(100% - var(--fade-r)),rgba(0,0,0,0.45) calc(100% - var(--fade-r) * 0.42),transparent 100%)}
.chips-wrap.can-l .chips-scroll{--fade-l:78px}
.chips-wrap.can-r .chips-scroll{--fade-r:78px}
.chips-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;background:rgba(36,29,58,0.72);border:1px solid var(--hairline);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;padding:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity 0.2s ease,background 0.2s ease,border-color 0.2s ease}
.chips-arrow:hover{background:rgba(46,38,72,0.9);border-color:var(--hairline-strong)}
.chips-arrow svg{width:13px;height:13px;color:var(--text-2);transition:color 0.2s ease}
.chips-arrow:hover svg{color:var(--text-1)}
.chips-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.chips-arrow-left{left:0}
.chips-arrow-right{right:0}
.chips-arrow.hidden{opacity:0;pointer-events:none}
/* ═══ GRADIENT DIVIDER ═══ */
.g-divider{height:1px;border:none;margin:30px 0;background:linear-gradient(90deg,transparent 0%,transparent 20%,rgba(170,162,190,0.16) 50%,transparent 80%,transparent 100%)}

/* ═══ BREADCRUMB ═══ */
.breadcrumb{position:relative;z-index:2;padding-top:calc(var(--nh) + 32px)}
.crumbs{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--text-2);flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.crumbs a{color:var(--text-2);transition:color 0.2s;flex-shrink:0;font-weight:600}.crumbs a:hover{color:var(--gold)}
.crumbs .sep{font-size:16px;color:var(--gold);opacity:0.8;flex-shrink:0;font-weight:700}.crumbs .current{color:var(--text-1);font-weight:600;overflow:hidden;text-overflow:ellipsis}

/* ═══ HERO (Homepage) ═══ */
.hero{position:relative;z-index:2;padding:calc(var(--nh) + 48px) 0 40px;text-align:center;display:flex;flex-direction:column;align-items:center}
/* Text legibility vignette — dims starfield behind hero copy without killing atmosphere */
.hero-particles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* Stars */
.star{position:absolute;background:#ffeec2;border-radius:50%}
.star-sm{width:1px;height:1px;opacity:0;animation:twinkle var(--dur,4s) var(--delay,0s) infinite}
.star-md{width:2px;height:2px;opacity:0;animation:twinkle var(--dur,5s) var(--delay,0s) infinite;box-shadow:0 0 3.4px rgba(255,255,255,0.2)}
.star-lg{width:2.5px;height:2.5px;opacity:0;animation:twinkleBright var(--dur,7s) var(--delay,0s) infinite;box-shadow:0 0 6px rgba(255,255,255,0.26)}
@keyframes twinkle{0%{opacity:0}25%{opacity:0.34}50%{opacity:0.12}75%{opacity:0.42}100%{opacity:0}}
@keyframes twinkleBright{0%{opacity:0}20%{opacity:0.44}40%{opacity:0.16}60%{opacity:0.54}80%{opacity:0.2}100%{opacity:0}}
/* Planets / orbs */
.hero-orb{position:absolute;border-radius:50%}
.hero-orb-1{width:6px;height:6px;background:var(--gold);top:18%;left:6%;opacity:0.5;animation:orbit1 20s linear infinite}
.hero-orb-2{width:4px;height:4px;background:#4a90f7;top:70%;right:10%;opacity:0.45;animation:orbit2 25s linear infinite}
.hero-orb-3{width:8px;height:8px;background:var(--gold);top:25%;right:5%;opacity:0.25;animation:orbit3 30s linear infinite}
.hero-orb-4{width:3px;height:3px;background:#e879a8;bottom:20%;left:12%;opacity:0.4;animation:orbit4 18s linear infinite}
.hero-orb-5{width:5px;height:5px;background:#4a90f7;top:12%;right:22%;opacity:0.25;animation:orbit5 22s linear infinite}
.hero-orb-6{width:3px;height:3px;background:var(--gold);bottom:15%;right:20%;opacity:0.4;animation:orbit1 15s linear infinite reverse}
.hero-orb-7{width:4px;height:4px;background:#14d990;top:60%;left:5%;opacity:0.2;animation:orbit2 28s linear infinite reverse}
@keyframes orbit1{0%{transform:translate(0,0)}25%{transform:translate(40px,-30px)}50%{transform:translate(80px,15px)}75%{transform:translate(30px,40px)}100%{transform:translate(0,0)}}
@keyframes orbit2{0%{transform:translate(0,0)}25%{transform:translate(-35px,20px)}50%{transform:translate(-70px,-15px)}75%{transform:translate(-25px,-40px)}100%{transform:translate(0,0)}}
@keyframes orbit3{0%{transform:translate(0,0) scale(1)}25%{transform:translate(-50px,25px) scale(1.2)}50%{transform:translate(-25px,60px) scale(0.8)}75%{transform:translate(15px,25px) scale(1.1)}100%{transform:translate(0,0) scale(1)}}
@keyframes orbit4{0%{transform:translate(0,0)}25%{transform:translate(25px,-30px)}50%{transform:translate(55px,-12px)}75%{transform:translate(25px,20px)}100%{transform:translate(0,0)}}
@keyframes orbit5{0%{transform:translate(0,0)}25%{transform:translate(-20px,35px)}50%{transform:translate(15px,60px)}75%{transform:translate(40px,25px)}100%{transform:translate(0,0)}}
/* Shooting stars */
.shooting-star{position:absolute;width:150px;height:2px;background:linear-gradient(90deg,rgba(255,230,168,0.95),rgba(245,190,49,0.4),transparent);transform:rotate(-35deg);opacity:0;animation:shoot 9s var(--delay,0s) infinite}
.shooting-star-2{width:100px;height:1.5px;background:linear-gradient(90deg,rgba(74,144,247,0.9),rgba(74,144,247,0.3),transparent);transform:rotate(-30deg)}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(-35deg)}0.5%{opacity:1}2.5%{opacity:0;transform:translate(-120vw,70vw) rotate(-35deg)}100%{opacity:0}}
.hero-saturn{position:relative;z-index:3;pointer-events:none;overflow:visible;margin-bottom:-6px}
.saturn-svg{width:480px;height:auto;overflow:visible;filter:drop-shadow(0 0 60px rgba(245,190,49,0.7)) drop-shadow(0 0 140px rgba(245,190,49,0.35)) drop-shadow(0 0 25px rgba(245,190,49,0.9));animation:saturnFloat 6s ease-in-out infinite,saturnGlow 4s ease-in-out infinite alternate;opacity:0.92}
@keyframes saturnFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes saturnGlow{0%{filter:drop-shadow(0 0 55px rgba(245,190,49,0.8)) drop-shadow(0 0 100px rgba(245,190,49,0.4)) drop-shadow(0 0 25px rgba(245,190,49,0.9))}100%{filter:drop-shadow(0 0 80px rgba(245,190,49,1)) drop-shadow(0 0 160px rgba(245,190,49,0.55)) drop-shadow(0 0 35px rgba(245,190,49,1))}}
/* Planet light sweep — rotating highlight across the planet surface */
.hero-saturn::after{content:'';position:absolute;top:50%;left:50%;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,245,180,0.18) 40deg,transparent 80deg,transparent 360deg);animation:planetSweep 8s linear infinite;pointer-events:none;z-index:6}
@keyframes planetSweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Star twinkle animation */
@keyframes orbPulse{0%,100%{opacity:0.55;transform:scale(1)}50%{opacity:0.16;transform:scale(0.65)}}
@keyframes orbPulseSlow{0%,100%{opacity:0.42;transform:scale(1)}50%{opacity:0.1;transform:scale(0.55)}}
.hero-orb-1{animation:orbit1 12s linear infinite,orbPulse 4.4s ease-in-out infinite!important}
.hero-orb-2{animation:orbit2 18s linear infinite,orbPulseSlow 7.1s ease-in-out infinite 0.7s!important}
.hero-orb-3{animation:orbit3 22s linear infinite,orbPulse 5.9s ease-in-out infinite 1.2s!important}
.hero-orb-4{animation:orbit4 16s linear infinite,orbPulseSlow 6.5s ease-in-out infinite 0.3s!important}
.hero-orb-5{animation:orbit5 20s linear infinite,orbPulse 5.2s ease-in-out infinite 1.8s!important}
.hero-orb-6{animation:orbit1 15s linear infinite reverse,orbPulseSlow 7.8s ease-in-out infinite 0.9s!important}
.hero-orb-7{animation:orbit2 28s linear infinite reverse,orbPulse 4.8s ease-in-out infinite 2.1s!important}
.hero-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(245,190,49,0.04) 0%,rgba(245,190,49,0.015) 30%,rgba(74,144,247,0.008) 50%,transparent 65%);pointer-events:none;z-index:0;animation:pulseGlow 8s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{opacity:0.4}50%{opacity:0.7}}
.hero-content{position:relative;z-index:5;width:100%}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.4}}
.hero h1{font-family:var(--fd);font-size:clamp(24px,4.4vw,52px);text-transform:uppercase;line-height:1.15;letter-spacing:0.04em;margin-bottom:14px;max-width:980px;margin-left:auto;margin-right:auto;position:relative;color:var(--text-1);font-weight:400}
.hero h1 .h1-line{display:block;white-space:nowrap}
.hero h1 .gold,.gold{color:var(--gold)}
.hero h1 .gold{position:relative;color:var(--gold)}
.hero-sub{font-size:16.5px;color:rgba(255,255,255,0.88);line-height:1.55;max-width:720px;margin:0 auto 26px;letter-spacing:0.01em;position:relative;z-index:2;font-weight:400}
.hero-sub .studio{color:var(--gold);font-weight:600;white-space:nowrap}
/* CTA Button */
.hero-cta-wrap{display:flex;justify-content:center;gap:14px;margin-bottom:32px;position:relative;z-index:2}
.btn-cta{display:inline-flex;align-items:center;gap:10px;padding:16px 40px;background:linear-gradient(135deg,#f5c518,#f5be31,#e8a020);border-radius:50px;font-family:var(--fd);font-size:16px;font-weight:900;color:#0e0b18;text-transform:uppercase;letter-spacing:0.06em;cursor:pointer;border:none;position:relative;overflow:hidden;transition:transform 0.2s ease,box-shadow 0.2s ease;box-shadow:0 0 26px rgba(245,190,49,0.32),0 8px 32px rgba(0,0,0,0.45)}
.btn-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0.3) 50%,transparent 65%);transform:translateX(-100%);animation:btnShimmer 3s ease-in-out infinite 1s}
@keyframes btnShimmer{0%{transform:translateX(-100%)}30%,100%{transform:translateX(200%)}}
.btn-cta:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 36px rgba(245,190,49,0.45),0 12px 40px rgba(0,0,0,0.55)}
.btn-cta svg{width:18px;height:18px;flex-shrink:0}
/* Ghost (secondary) CTA */
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:15px 24px;background:transparent;color:var(--text-1);font-family:var(--fd);font-size:13px;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(245,190,49,0.3);border-radius:50px;transition:border-color 0.25s,color 0.25s,background-color 0.25s,transform 0.25s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(245,190,49,0.06);transform:translateY(-2px)}
.btn-ghost-arr{transition:transform 0.25s;display:inline-block}
.btn-ghost:hover .btn-ghost-arr{transform:translateX(3px)}
/* Hero eyebrow (EEAT signal above H1) */
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin:0 auto 22px;padding:7px 16px;border:1px solid rgba(245,190,49,0.35);border-radius:999px;background:rgba(245,190,49,0.06);position:relative;z-index:2;font-weight:400}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse-dot 2.2s ease-in-out infinite}
/* Hero trust row */
.hero-trust{list-style:none;padding:0;margin:0 auto;max-width:680px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;font-family:var(--fd);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-2);opacity:0.9;position:relative;z-index:2}
.hero-trust li{display:inline-flex;align-items:center;line-height:1}
.hero-trust .hero-trust-sep{font-size:9px;opacity:0.85;letter-spacing:0;line-height:1}
@media(max-width:520px){.hero-trust{font-size:11.5px;gap:6px 8px;letter-spacing:0.06em;max-width:420px}}
.hero-trust-badges{gap:10px}
/* v172: the badge row moved up into the hero copy column, under the search +
   random-slot controls. Left-aligned there, not centred under a full-width hero. */
.hero-intro .hero-trust-badges{margin:22px 0 0;max-width:400px;justify-content:flex-start}
/* Subservient to .btn-random above them: they kept the pill shape but lose the
   gold wash and the strong edge that made them read as a second row of buttons. */
.hero-intro .hero-trust-badges li{padding:7px 14px;font-size:11.5px;background:rgba(170,162,190,0.045);border-color:var(--hairline);color:var(--text-2)}
.hero-intro .hero-trust-badges li svg{color:var(--text-3)}
.hero-trust-badges li{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--hairline-strong);border-radius:50px;background:rgba(245,190,49,0.05);color:var(--text-1);font-size:12px}
.hero-trust-badges li svg{width:13px;height:13px;color:var(--gold);flex-shrink:0}
@media(max-width:520px){.hero-trust-badges li{padding:6px 11px;font-size:11px;gap:5px}}
.hero-actions{max-width:900px;margin:0 auto}
.hero-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px}
.hero-nav-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 14px;background:linear-gradient(145deg,#1a1628,#100d1b);border:1px solid var(--hairline);border-radius:var(--r-lg);transition:all 0.35s cubic-bezier(0.19,1,0.22,1);cursor:pointer;position:relative;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,0.35),inset 0 1px 0 rgba(245,190,49,0.08)}
.hero-nav-item::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% -10%,rgba(245,190,49,0.12) 0%,transparent 65%);opacity:1;transition:opacity 0.3s}
.hero-nav-item:hover::before{background:radial-gradient(circle at 50% 0%,rgba(245,190,49,0.16) 0%,transparent 70%)}
.hero-nav-item:hover{transform:translateY(-5px) scale(1.04);border-color:rgba(245,190,49,0.4);box-shadow:0 10px 36px rgba(0,0,0,0.35)}
.hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);width:54px;height:54px;background:rgba(245,190,49,0.12);border:1px solid var(--hairline-strong);border-radius:14px;display:flex;align-items:center;justify-content:center;transition:all 0.35s;position:relative;z-index:1}
.hero-nav-item:hover .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);background:rgba(245,190,49,0.22);border-color:rgba(245,190,49,0.45)}
.hero-nav-icon svg{width:26px;height:26px;color:var(--gold);stroke-width:2;transition:transform 0.3s}
.hero-nav-item:hover .hero-nav-icon svg{transform:scale(1.15)}
.hero-nav-label{font-size:11.5px;font-weight:700;color:var(--text-1);text-transform:uppercase;letter-spacing:0.05em;position:relative;z-index:1;transition:color 0.3s}
.hero-nav-item:hover .hero-nav-label{color:var(--gold)}
.hero-nav-item:nth-child(1) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite}
.hero-nav-item:nth-child(2) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite 0.8s}
.hero-nav-item:nth-child(3) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite 1.6s}
.hero-nav-item:nth-child(4) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite 2.4s}
.hero-nav-item:nth-child(5) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite 3.2s}
.hero-nav-item:nth-child(6) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite 4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero-search{position:relative;margin-bottom:10px}
.hero-search form{display:block}
.hero-search input{width:100%;padding:14px 20px 14px 48px;background:#131020;border:1px solid rgba(245,190,49,0.15);border-radius:var(--r-lg);color:var(--text-1);font-size:15px;font-family:var(--fb);outline:none;transition:all 0.3s;backdrop-filter:blur(8px)}
.hero-search input::placeholder{color:var(--text-3)}
.hero-search input:focus{border-color:rgba(245,190,49,0.35);background:rgba(19,17,27,0.95);box-shadow:0 0 0 4px rgba(245,190,49,0.06),0 4px 20px rgba(0,0,0,0.3)}
.hero-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--gold);pointer-events:none;z-index:1}
.hero-stats-inline{display:flex;justify-content:center;align-items:center;gap:6px;padding:14px 0 0;flex-wrap:wrap}
.hsi{font-size:13px;color:var(--text-3)}
.hsi strong{color:var(--gold);font-weight:700}
.hsi-sep{color:var(--text-4);font-size:11.5px}

/* ═══ PROVIDER CHIPS ═══ */
.providers-bar{position:relative;z-index:2;padding:0 0 6px;margin-bottom:0}
.chips-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips-scroll::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:7px 16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all 0.25s;white-space:nowrap;display:inline-block}
.chip:hover{background:var(--bg-card-hover);color:var(--text-1);border-color:rgba(170,162,190,0.1)}
.chip.active{background:rgba(245,190,49,0.08);border-color:rgba(245,190,49,0.25);color:var(--gold)}

/* ═══ SECTION HEADERS ═══ */
.sec-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:8px}
.sec-title{font-family:var(--fd);font-size:22px;text-transform:uppercase;letter-spacing:0.01em}
h2 .gold{color:inherit}
.sec-count{font-family:var(--fb);font-size:13px;font-weight:500;color:var(--text-3);margin-left:10px;text-transform:none}
.view-all{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--gold);transition:all 0.2s}
.view-all:hover{gap:9px}
.view-all svg{width:14px;height:14px}
/* v178: one-line section subline — folds messaging (e.g. the old Weekly banner) into the section unit */
.sec-sub{margin:-16px 0 22px;font-size:13.5px;line-height:1.6;color:var(--text-3);max-width:620px}

/* ═══ GAME CARDS ═══ */
.games-section{position:relative;z-index:2;padding-bottom:40px}
.games-grid,.similar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g-card{position:relative;background:linear-gradient(160deg,#1a1628,#100d1b);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all 0.4s cubic-bezier(0.19,1,0.22,1);display:block;box-shadow:0 3px 12px rgba(0,0,0,0.35),inset 0 1px 0 rgba(245,190,49,0.05)}
.g-card.visible{opacity:1;transform:translateY(0)}
html.js .g-card:not(.visible){opacity:0;transform:translateY(8px)}
.g-card:hover{transform:translateY(-7px);box-shadow:0 10px 40px rgba(0,0,0,0.35);border-color:rgba(245,190,49,0.35)}
.g-img{position:relative;aspect-ratio:16/11;overflow:hidden;background:linear-gradient(135deg,#1e1930,#131020)}
.g-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(16,14,23,0.7) 0%,transparent 100%);z-index:2;pointer-events:none}
.g-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.19,1,0.22,1)}
.g-card:hover .g-img img{transform:none}
.g-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#221d36,#151121,#0f0c19)}
.g-placeholder-inner{text-align:center;opacity:0.5}
.g-placeholder-icon{font-size:36px;margin-bottom:6px;display:block}
.g-placeholder-text{font-family:var(--fd);font-size:11.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-3)}
.g-badge{position:absolute;top:10px;left:10px;padding:4px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;border-radius:6px;z-index:3}
/* v186: one accent, not four. The card badges were the last holdout of an older
   palette (blue 216deg, rose 344deg, emerald 152deg) on a 250deg violet ground,
   while every other status marker on the site is already gold: the hero pill,
   the rating star, the New Releases count, the review score label, the hero
   flag. Against slot artwork the three hues competed with the art, blue worst
   of all. The word carries the meaning; the colour only says "this is the site
   talking". Closes the v171 POPULAR-badge item at the cause rather than
   swapping one stranger hue for another. */
.badge-new,.badge-hot,.badge-popular{background:var(--gold);color:#0e0b18;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.g-rating{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:3px;padding:3px 8px;background:rgba(0,0,0,0.6);border-radius:6px;font-size:12px;font-weight:600;z-index:3}
.g-rating svg{width:11px;height:11px;fill:var(--gold)}
.g-card:hover .g-badge,.g-card:hover .g-rating{opacity:0;transition:opacity 0.2s}
.g-hover{position:absolute;inset:-1px;background:linear-gradient(to bottom,rgba(8,7,12,0.85) 0%,rgba(8,7,12,0.92) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;transition:opacity 0.3s;z-index:4}
.g-card:hover .g-hover{opacity:1}
/* Stats row - ABOVE button */
.hover-stats{display:flex;gap:16px;padding:10px 18px;background:rgba(0,0,0,0.45);border-radius:10px;border:1px solid var(--hairline);order:-1}.h-stat{text-align:center}
.h-stat-label{font-size:9px;text-transform:uppercase;letter-spacing:0.1em;color:var(--gold);margin-bottom:3px;font-weight:600}
.h-stat-val{font-size:14px;font-weight:700;color:var(--text-1)}
/* Play button - clean circle, icon only */
.play-btn{display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:0;background:linear-gradient(135deg,var(--gold),var(--gold-bright));color:#0a0a0a;border-radius:50%;box-shadow:0 6px 30px rgba(0,0,0,0.55);transition:all 0.3s;position:relative;border:none;cursor:pointer}
.play-btn::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(245,190,49,0.45);animation:pulseRing 2s ease-out infinite;opacity:0}
.play-btn::after{content:'';position:absolute;inset:-13px;border-radius:50%;border:1.5px solid rgba(245,190,49,0.2);animation:pulseRing 2s ease-out infinite 0.5s;opacity:0}
.g-card:hover .play-btn::before,.g-card:hover .play-btn::after{opacity:1}
@keyframes pulseRing{0%{transform:scale(0.95);opacity:0.6}100%{transform:scale(1.15);opacity:0}}
.play-btn:hover{transform:scale(1.08);box-shadow:0 8px 40px rgba(0,0,0,0.55)}
.play-btn svg{width:28px;height:28px;margin-left:3px}
.g-info{padding:12px 14px 14px;position:relative}
.g-title{font-size:14px;font-weight:700;line-height:1.3;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;position:relative;z-index:1;color:var(--text-1)}
.g-card:hover .g-title{color:var(--gold)}
.g-provider{font-size:12px;color:var(--text-2);font-weight:500;position:relative;z-index:1}
/* v168: card meta row - provider left, the page's headline stat right.
   The rating and RTP used to exist only inside the hover overlay, so they were
   invisible on touch devices on the two pages built around them. */
.g-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;position:relative;z-index:1}
.g-meta .g-provider{flex:1 1 auto;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-stat{display:inline-flex;align-items:baseline;gap:4px;flex:none;white-space:nowrap}
.g-stat-mark{color:var(--gold);font-size:12.5px;line-height:1}
.g-stat-key{font-size:11.5px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-3)}
.g-stat-val{font-family:var(--fd);font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums}
@media(max-width:680px){.g-meta{flex-wrap:wrap;gap:1px 8px}.g-meta .g-provider{flex:1 1 100%}.g-stat{flex:0 0 auto}}

/* ═══ BROWSE SECTIONS ═══ */
.browse-section{position:relative;z-index:2;padding:44px 0}
/* v177: themes and features side by side, one column each, one line per row.
   Icons sit on a neutral surface rather than the old gold wash — 16 gold-washed
   tiles was the largest remaining block of unrationed gold after v171. */
.browse-split{display:grid;grid-template-columns:1fr 1fr;gap:16px 44px;align-items:start}
.browse-half{min-width:0}
.browse-half .sec-header{margin-bottom:16px}
.browse-list{display:flex;flex-direction:column;gap:7px}
.b-row{display:flex;align-items:center;gap:12px;padding:9px 14px;background:rgba(19,17,27,0.55);border:1px solid var(--hairline);border-radius:var(--r-md);text-decoration:none;transition:background 0.25s ease,border-color 0.25s ease}
.b-row:hover{background:var(--bg-card-hover);border-color:rgba(245,190,49,0.3)}
.b-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.b-row-icon{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--bg-surface);border:1px solid var(--border);border-radius:9px;font-size:18px;line-height:1;transition:border-color 0.25s ease}
.b-row:hover .b-row-icon{border-color:rgba(245,190,49,0.28)}
.b-row-icon svg{width:18px;height:18px;color:var(--gold)}
.b-row-icon img.us-emoji{width:18px;height:18px}
.b-row-name{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:700;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.25s ease}
.b-row:hover .b-row-name{color:var(--gold)}
.b-row-count{flex:none;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.browse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.b-card{padding:20px 16px;background:linear-gradient(160deg,#211c33,#141020);border:1px solid var(--hairline-strong);border-radius:var(--r-lg);cursor:pointer;transition:all 0.35s cubic-bezier(0.19,1,0.22,1);display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;box-shadow:0 5px 12px rgba(0,0,0,0.5)}
.b-card::before{content:'';position:absolute;inset:0;background:transparent;opacity:1;transition:opacity 0.3s}
.b-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,235,170,0.45),transparent);transition:background 0.3s}
.b-card:hover::before{background:transparent}
.b-card:hover::after{background:linear-gradient(90deg,transparent,rgba(255,235,170,0.5),transparent)}
.b-card:hover{border-color:rgba(245,190,49,0.52);transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.5)}
.b-card-icon{box-shadow:0 2px 8px rgba(0,0,0,0.3);width:52px;height:52px;background:rgba(245,190,49,0.18);border:1px solid var(--hairline-strong);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:27px;transition:all 0.35s;position:relative;z-index:1}
.b-card:hover .b-card-icon{box-shadow:0 2px 8px rgba(0,0,0,0.3);background:rgba(245,190,49,0.24);border-color:rgba(245,190,49,0.5)}
.b-card-name{font-size:13px;font-weight:700;margin-bottom:2px;position:relative;z-index:1;transition:color 0.3s}
.b-card:hover .b-card-name{color:var(--gold)}
.b-card-count{font-size:11px;color:var(--text-3);position:relative;z-index:1}
.b-card-num{font-size:12px;color:var(--text-1);font-weight:600;margin-bottom:2px;position:relative;z-index:1}
.b-card-arrow{display:none}
.b-card-arrow svg{width:18px;height:18px}

/* ═══ CATEGORY HERO (Taxonomy pages) ═══
   v186: tightened. These heroes read as a broken two-column layout rather than
   a header, and the reason is vertical, not horizontal. The copy is capped at
   540px inside a 1240px container, so there is ~700px beside it; that is fine
   as page margin, but only if the block itself is compact. At 244px tall with
   three lines in it, the same gap read as a hole. Trimming the padding and the
   internal gaps turns the emptiness back into margin.

   Deliberately NOT filled with content. A fact strip and a featured slider were
   both mocked and rejected: the facts go stale and the slider is a second
   carousel on the one template where the game grid IS the content. Applies to
   every page in the .cat-hero family so archive, search, term, index, New
   Releases, Highest Rated, Highest RTP, Most Popular and Popular all match. */
.cat-hero{position:relative;z-index:2;padding:14px 0 22px}
.cat-hero-term{padding-bottom:10px}
.cat-hero:first-of-type{padding-top:calc(var(--nh) + 24px)}
.cat-hero-inner{display:block}
.cat-title-row{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.cat-title-row h1{font-family:var(--fd);font-size:clamp(26px,3.5vw,38px);text-transform:uppercase;letter-spacing:-0.01em;line-height:1.1;margin:0}
.cat-icon{box-shadow:0 3px 10px rgba(0,0,0,0.38);width:72px;height:72px;background:linear-gradient(rgba(245,190,49,0.10),rgba(245,190,49,0.10)),#151122;border:1px solid rgba(245,190,49,0.38);border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:32px;box-shadow:0 3px 10px rgba(0,0,0,0.38),inset 0 1px 0 rgba(245,190,49,0.12)}
.cat-info h1,.cat-title-row h1{font-family:var(--fd);font-size:clamp(26px,3.5vw,38px);text-transform:uppercase;letter-spacing:-0.01em;margin-bottom:0;line-height:1.1}
.cat-desc-wrap{margin-bottom:2px}
.cat-desc{font-size:14px;color:var(--text-2);line-height:1.8;max-width:600px}
.cat-desc-wrap .cat-desc:not(.expanded)>*:nth-child(n+2){display:none}
.cat-desc-wrap .cat-desc:not(.expanded)>*:first-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cat-desc-wrap .cat-desc:not(.expanded){overflow:hidden}
.cat-desc-wrap .cat-desc>*:first-child{margin-top:0}
.cat-desc-wrap .cat-desc.expanded{overflow:visible}
.cat-desc p{margin-bottom:12px}
.cat-desc p:last-child{margin-bottom:0}
.cat-desc h2,.cat-desc h3,.cat-desc h4{font-family:var(--fd);text-transform:uppercase;color:var(--text-1)}
.cat-desc h2{font-size:18px;font-weight:700;margin:24px 0 10px;font-family:var(--fb);text-transform:none;color:var(--text-1)}.cat-desc h2:first-child{margin-top:0}
.cat-desc h2 .last-word{color:var(--text-1)}
.cat-desc h3{font-size:15px;margin:20px 0 8px;text-transform:none;font-family:var(--fb);font-weight:700;color:var(--gold)}
.cat-desc a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(245,190,49,0.3);text-underline-offset:2px;transition:text-decoration-color 0.2s}
.cat-desc a:hover{text-decoration-color:var(--gold)}
.hero-flag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(245,190,49,0.08);border:1px solid rgba(245,190,49,0.2);border-radius:8px;font-size:13px;font-weight:700;color:var(--gold);letter-spacing:0.01em}
.cat-read-more{background:none;border:none;color:var(--gold);font-size:13px;font-weight:600;cursor:pointer;padding:4px 0;font-family:var(--fb);transition:opacity 0.2s}
.cat-read-more:hover{opacity:0.8}
.seo-content-wrap{margin-top:64px;padding-top:32px;border-top:1px solid var(--border)}
.seo-content-wrap .seo-content{max-width:800px}

/* SEO content card — matches page-card style */
.seo-card {
  background: linear-gradient(160deg, #211c33, #141020);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-xl);
  padding: 40px 48px;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(245, 190, 49, 0.08);
  position: relative;
  overflow: hidden;
  max-width: 860px;
}
.seo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 170, 0.45), transparent);
  pointer-events: none;
}
.seo-card .tab-content p,
.seo-card .tab-content li {
  font-size: 16.5px;
  line-height: 1.85;
  color: #cbc4d8;
}
@media (max-width: 768px) {
  .seo-card { padding: 28px 24px; }
}
@media (max-width: 480px) {
  .seo-card { padding: 22px 18px; }
}
.cat-meta{display:flex;gap:32px}
.cm-val{font-family:var(--fd);font-size:20px}.cm-val span{color:var(--gold)}
.cm-label{font-size:11.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.1em;margin-top:1px}

/* ═══ TOOLBAR ═══ */
.toolbar{position:relative;z-index:2;padding:14px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;position:relative}
.f-chip{padding:7px 16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all 0.25s;white-space:nowrap;display:inline-block;flex-shrink:0}
.f-chip:hover{background:var(--bg-card-hover);color:var(--text-1);border-color:rgba(170,162,190,0.1)}
.f-chip.active{background:rgba(245,190,49,0.08);border-color:rgba(245,190,49,0.25);color:var(--gold)}
.sort-wrap{position:relative}
.sort-wrap select{appearance:none;padding:8px 36px 8px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;color:var(--text-1);font-size:13px;font-family:var(--fb);font-weight:600;cursor:pointer;outline:none;transition:all 0.2s}
.sort-wrap select:hover,.sort-wrap select:focus{border-color:rgba(170,162,190,0.12);color:var(--text-1)}
.sort-wrap::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--text-3);pointer-events:none}
.results-info{position:relative;z-index:2;font-size:13px;color:var(--text-3);padding-bottom:16px}
.results-info strong{color:var(--text-2)}

/* ═══ RATED CARD HOVER (highest-rated page only) ═══ */

/* ═══ PAGINATION ═══ */
.us-pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:32px 0 8px;flex-wrap:wrap}
/* v186: pagination never got the v171 pass. A gold border at rest is gold doing
   a structural job; gold here now means hover and current page only. */
.us-page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border:1px solid var(--hairline);border-radius:10px;color:var(--text-2);font-size:13px;font-weight:700;font-family:var(--fd);transition:all 0.2s;background:var(--bg-surface)}
.us-page-btn:hover{border-color:rgba(245,190,49,0.35);color:var(--gold);background:rgba(245,190,49,0.06)}
.us-page-btn.us-page-active{background:rgba(245,190,49,0.1);border-color:rgba(245,190,49,0.4);color:var(--gold)}
.us-page-prev,.us-page-next{color:var(--text-3)}
.us-page-ellipsis{color:var(--text-4);font-size:13px;padding:0 4px;line-height:40px}

/* ═══ LOAD MORE ═══ */
/* v168: provider blocks carry their own rhythm instead of a repeated 48px rule.
   Asymmetric padding/margin keeps the page from landing every gap on one value. */
.provider-release-block{padding-bottom:30px;border-bottom:1px solid rgba(170,162,190,0.07)}
.provider-release-block+.provider-release-block{padding-top:52px}
.provider-release-block:last-of-type{border-bottom:none;padding-bottom:0}
.load-more-wrap{text-align:center;padding:24px 0 8px}
.load-more{display:inline-flex;align-items:center;gap:8px;padding:12px 32px;background:linear-gradient(180deg,#221d34,#16121f);border:1px solid rgba(245,190,49,0.3);color:var(--gold);font-size:13.5px;font-weight:700;font-family:var(--fd);letter-spacing:0.02em;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.05);transition:all 0.25s}
.load-more:hover{background:linear-gradient(180deg,#2a2340,#1c1729);border-color:rgba(245,190,49,0.55);box-shadow:0 6px 20px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.07);transform:translateY(-1px)}

/* New Releases — provider blocks */
.provider-release-block{margin-bottom:0}
.provider-release-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.provider-release-title{display:flex;align-items:center;gap:12px}
.provider-release-title h2{font-size:clamp(18px,2.5vw,24px);font-weight:800;font-family:var(--fd);color:var(--text-1);margin:0;text-transform:uppercase;letter-spacing:0.02em}
.nr-new-badge{display:inline-flex;align-items:center;padding:3px 10px;background:rgba(245,190,49,0.12);border:1px solid rgba(245,190,49,0.35);border-radius:20px;color:var(--gold);font-size:11px;font-weight:700;font-family:var(--fd);letter-spacing:0.05em;text-transform:uppercase;white-space:nowrap}
.nr-view-all-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-3);font-size:13px;font-weight:600;font-family:var(--fd);transition:color 0.2s;white-space:nowrap}
.nr-view-all-link:hover{color:var(--gold)}

/* ═══ OTHER CATEGORIES ═══ */
.other-section{position:relative;z-index:2;padding:44px 0}
.other-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.o-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#131020;border:1px solid var(--hairline);border-radius:var(--r-md);cursor:pointer;transition:all 0.35s cubic-bezier(0.19,1,0.22,1);position:relative;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,0.24)}
.o-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 0% 0%,rgba(245,190,49,0.05) 0%,transparent 60%);opacity:1;transition:opacity 0.3s}
.o-card:hover::before{background:radial-gradient(circle at 0% 0%,rgba(245,190,49,0.1) 0%,transparent 60%)}
.o-card:hover{border-color:rgba(245,190,49,0.3);transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.o-icon{width:42px;height:42px;background:rgba(245,190,49,0.08);border:1px solid var(--hairline);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:all 0.35s;position:relative;z-index:1}
.o-card:hover .o-icon{background:rgba(245,190,49,0.16);border-color:rgba(245,190,49,0.3)}
.o-name{font-size:14px;font-weight:700;position:relative;z-index:1;transition:color 0.3s}
.o-card:hover .o-name{color:var(--gold)}
.o-count{font-size:12px;color:var(--text-3);position:relative;z-index:1}
.o-arrow{margin-left:auto;display:flex;align-items:center;color:var(--text-4);flex-shrink:0;transition:color 0.3s,transform 0.3s;position:relative;z-index:1}
.o-arrow svg{width:18px;height:18px}
.o-card:hover .o-arrow{color:var(--gold);transform:translateX(3px)}

/* ═══ TAXONOMY INDEX GRID ═══ */
.tax-index-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tax-index-card{display:flex;align-items:center;gap:16px;padding:20px 22px;background:linear-gradient(160deg,#211c33,#141020);border:1px solid var(--hairline-strong);border-radius:var(--r-lg);cursor:pointer;transition:all 0.35s cubic-bezier(0.19,1,0.22,1);position:relative;overflow:hidden;box-shadow:0 5px 12px rgba(0,0,0,0.5)}
.tax-index-card::before{content:'';position:absolute;inset:0;background:transparent;opacity:1;transition:opacity 0.3s}
.tax-index-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,235,170,0.45),transparent)}
.tax-index-card:hover::before{background:transparent}
.tax-index-card:hover{border-color:rgba(245,190,49,0.52);transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.5)}
.tax-index-icon{box-shadow:0 2px 8px rgba(0,0,0,0.3);width:52px;height:52px;background:rgba(245,190,49,0.18);border:1px solid var(--hairline-strong);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;transition:all 0.35s}
.tax-index-card:hover .tax-index-icon{box-shadow:0 2px 8px rgba(0,0,0,0.3);background:rgba(245,190,49,0.24);border-color:rgba(245,190,49,0.5)}
.tax-index-info{flex:1;min-width:0;position:relative;z-index:1}
.tax-index-name{font-size:16px;font-weight:700;margin-bottom:2px;transition:color 0.3s}
.tax-index-card:hover .tax-index-name{color:var(--gold)}
.tax-index-count{font-size:12px;color:var(--text-1);font-weight:600}
.tax-index-desc{font-size:12.5px;line-height:1.45;color:var(--text-3);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* v183: tiered index — top terms keep the rich card, the tail drops to the
   v177 compact rows in a two column A to Z split. One new rule, .sec-count
   already existed and was unused. */
.tax-index-tail{margin-top:46px}
.tax-index-arrow{width:24px;height:24px;color:var(--text-4);flex-shrink:0;transition:all 0.3s;position:relative;z-index:1}
.tax-index-arrow svg{width:18px;height:18px}
.tax-index-card:hover .tax-index-arrow{color:var(--gold);transform:translateX(3px)}

/* ═══ GAME DETAIL — Demo ═══ */
.game-hero{position:relative;z-index:2;padding:24px 0 0}
.game-hero:first-of-type{padding-top:calc(var(--nh) + 32px)}
.game-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.game-title-row h1{font-family:var(--fd);font-size:clamp(24px,3.5vw,36px);text-transform:uppercase;letter-spacing:-0.01em;line-height:1.1}
.game-title-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.game-quick-stats{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:13px;color:var(--text-2)}
.gqs-label{color:var(--text-2);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;margin-right:4px}
.gqs-val{color:var(--gold);font-weight:600}
.gqs-sep{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:0.5;display:inline-block;vertical-align:middle;margin:0 2px}
.provider-tag{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;color:var(--text-2);transition:all 0.2s}
.provider-tag:hover{border-color:rgba(245,190,49,0.2);color:var(--gold)}
.rating-tag{display:flex;align-items:center;gap:4px;padding:6px 12px;background:rgba(245,190,49,0.08);border:1px solid rgba(245,190,49,0.18);border-radius:8px;font-size:14px;font-weight:700;color:var(--gold)}
.rating-tag svg{width:14px;height:14px;fill:var(--gold)}
.demo-wrapper{position:relative;z-index:2;margin-bottom:44px}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:linear-gradient(135deg,rgba(27,25,38,0.95),rgba(18,17,26,0.98));border:1px solid rgba(245,190,49,0.38);border-top:none;border-radius:0 0 var(--r-xl) var(--r-xl);box-shadow:0 6px 12px rgba(0,0,0,0.5),inset 0 -1px 0 rgba(245,190,49,0.08)}
.demo-toolbar-right{display:flex;align-items:center;gap:8px}
.demo-tb-btn{display:flex;align-items:center;gap:9px;padding:12px 22px;background:linear-gradient(180deg,#221d34,#16121f);border:1px solid rgba(245,190,49,0.3);border-radius:11px;font-size:14px;font-weight:700;color:var(--text-1);transition:all 0.25s;letter-spacing:0.02em;box-shadow:0 2px 10px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05)}
.demo-tb-btn:hover{background:linear-gradient(180deg,#2a2340,#1c1729);border-color:rgba(245,190,49,0.55);color:var(--gold);box-shadow:0 6px 20px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.07);transform:translateY(-1px)}
.demo-tb-btn svg{width:18px;height:18px;color:var(--gold)}
.demo-container{position:relative;width:100%;aspect-ratio:16/9;background:var(--bg-card);border:1px solid rgba(245,190,49,0.38);border-bottom:none;border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;box-shadow:0 6px 12px rgba(0,0,0,0.5)}
.demo-placeholder{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:linear-gradient(160deg,#1e1930,#131020 40%,#0d0b14);z-index:4;transition:opacity 0.4s;overflow:hidden}
.demo-placeholder-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;display:block;opacity:1;filter:none}
.demo-placeholder-img img{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);max-width:none;max-height:none;display:block;opacity:1;object-fit:cover;object-position:center;filter:none}
.demo-placeholder-img img{opacity:1;filter:none}
.demo-placeholder::before{content:'';position:absolute;inset:0;background:rgba(7,7,11,0.42);z-index:1;pointer-events:none}
.demo-play-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px}
.demo-play-btn{position:relative;z-index:1;width:112px;height:112px;background:linear-gradient(135deg,var(--gold),var(--gold-bright));border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 42px rgba(245,190,49,0.38),0 0 0 6px rgba(7,7,11,0.35),0 16px 40px rgba(0,0,0,0.5);transition:all 0.3s;cursor:pointer;border:none}
.demo-play-btn::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:2.5px solid rgba(245,190,49,0.5);animation:pulseRing 2s ease-out infinite}
.demo-play-btn::after{content:'';position:absolute;inset:-16px;border-radius:50%;border:1.5px solid rgba(245,190,49,0.2);animation:pulseRing 2s ease-out infinite 0.5s}
.demo-play-btn:hover{transform:scale(1.08);box-shadow:0 12px 52px rgba(245,190,49,0.48),0 0 0 6px rgba(7,7,11,0.35),0 20px 50px rgba(0,0,0,0.55)}
.demo-play-btn svg{width:44px;height:44px;color:#0a0a0a;margin-left:5px}
.demo-play-btn-disabled{opacity:0.5;cursor:default;box-shadow:0 4px 20px rgba(245,190,49,0.2)}
.demo-play-btn-disabled:hover{transform:none;box-shadow:0 4px 20px rgba(245,190,49,0.2)}
.demo-play-btn-disabled::before,.demo-play-btn-disabled::after{display:none}
.demo-play-text{position:relative;z-index:1;font-family:var(--fd);font-size:17px;text-transform:uppercase;letter-spacing:0.1em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,0.9),0 0 28px rgba(0,0,0,0.7),0 4px 6px rgba(0,0,0,0.8)}

.demo-wrapper.fullscreen{position:fixed;inset:0;z-index:9999;margin:0;padding:0;display:flex;flex-direction:column;background:var(--bg-deep)}
.demo-wrapper.fullscreen .demo-container{border-radius:0;border:none;flex:1;aspect-ratio:auto}
.demo-wrapper.fullscreen .demo-toolbar{border-radius:0;border-left:none;border-right:none;border-bottom:none}
.demo-fullscreen-close{display:none;position:absolute;top:12px;right:12px;z-index:10000;width:40px;height:40px;background:rgba(0,0,0,0.7);border:1px solid var(--hairline-strong);border-radius:10px;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s}
.demo-fullscreen-close svg{width:20px;height:20px;color:var(--gold)}
.demo-fullscreen-close:hover{background:rgba(0,0,0,0.9);border-color:rgba(245,190,49,0.5)}
.demo-wrapper.fullscreen .demo-fullscreen-close{display:flex}
/* demo toolbar handles controls now */

/* ═══ STATS GRID ═══ */
.stats-section{position:relative;z-index:2;margin-bottom:44px}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.qs-item{background:linear-gradient(160deg,#211c33,#141020);border:1px solid var(--hairline-strong);border-radius:var(--r-md);padding:16px 18px;text-align:center;transition:all 0.35s cubic-bezier(0.19,1,0.22,1);position:relative;overflow:hidden;box-shadow:0 5px 12px rgba(0,0,0,0.5)}
.qs-item::before{content:'';position:absolute;inset:0;background:transparent;opacity:1;transition:opacity 0.3s}
.qs-item:hover{border-color:rgba(245,190,49,0.52);transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.5)}
.qs-item:hover::before{background:transparent}
.qs-label{font-size:11.5px;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-3);margin-bottom:6px;position:relative;z-index:1;font-weight:600}
.qs-val{font-family:var(--fd);font-size:18px;color:var(--text-1);position:relative;z-index:1}
.qs-val.white{color:var(--text-1)}
.tag-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.tag-box{background:rgba(19,17,27,0.35);border:1px solid rgba(170,162,190,0.1);border-radius:var(--r-md);padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;transition:all 0.35s}
.tag-box::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 0% -20%,rgba(170,162,190,0.05) 0%,transparent 55%);opacity:1}
.tag-box:hover{border-color:rgba(170,162,190,0.18)}
.tag-box .qs-label{margin-bottom:10px;position:relative;z-index:1}
.tag-pills{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.tag-pill{padding:5px 14px;border-radius:8px;font-size:13px;font-weight:600;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-2);transition:all 0.25s}
.tag-pill:hover{transform:translateY(-2px);background:var(--bg-card-hover);color:var(--gold);border-color:rgba(245,190,49,0.3)}

/* ═══ TABS ═══ */
.content-section{position:relative;z-index:2;margin-bottom:56px}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 12px;background:transparent;border:none;border-radius:0;position:relative;margin:0}
.tabs::-webkit-scrollbar{display:none}
.tabs-wrap{position:relative;background:transparent;margin:0;padding:0}
.tabs-wrap .tabs{margin-bottom:0}
.tabs-wrap::after{display:none}
.tabs-arrow{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.tabs-arrow:hover{border-color:rgba(245,190,49,0.3);background:var(--bg-card-hover);box-shadow:0 2px 12px rgba(0,0,0,0.4)}
.tabs-arrow svg{width:12px;height:12px;color:var(--text-2)}
.tabs-arrow:hover svg{color:var(--gold)}
.tabs-arrow-left{left:-6px}
.tabs-arrow-right{right:-6px}
.tabs-arrow.hidden{opacity:0;pointer-events:none;transition:opacity 0.2s}
.tab-btn{padding:11px 24px;font-size:13px;font-weight:700;color:var(--text-2);border-radius:10px;transition:all 0.25s;white-space:nowrap;min-height:44px;letter-spacing:0.02em}
.tab-btn:hover{color:var(--text-1);background:rgba(255,255,255,0.04)}
.tab-btn.active{color:var(--bg-deep);background:linear-gradient(135deg,var(--gold),var(--gold-bright));box-shadow:0 2px 12px rgba(0,0,0,0.4)}
.tab-panel{display:none}.tab-panel.active{display:block}
.tab-content{max-width:820px}
.tab-content h1,.tab-content h2,.tab-content h3,.tab-content h4{font-family:var(--fd);text-transform:uppercase;color:var(--text-1)}
.tab-content h2 .last-word{color:var(--text-1)}
h2 .last-word{color:var(--gold)}
.tab-content h1{font-size:22px;margin:32px 0 12px}.tab-content h1:first-child{margin-top:0}
.tab-content h2{font-size:21px;margin:30px 0 10px;font-family:var(--fb);text-transform:none;font-weight:700;color:var(--text-1)}.tab-content h2:first-child{margin-top:0}
.tab-content h3{font-size:17.5px;margin:26px 0 8px;text-transform:none;font-family:var(--fb);font-weight:700;color:var(--gold)}
.tab-content h4{font-size:16px;margin:22px 0 6px;text-transform:none;font-family:var(--fb);font-weight:700;color:var(--text-2)}
.slot-card .tab-content h2{font-family:var(--fb);text-transform:none;font-weight:700;color:var(--text-1)}
.slot-card .tab-content h2 .last-word{color:var(--text-1)}
.tab-content p{font-size:14px;color:var(--text-2);line-height:1.8;margin-bottom:14px}
.tab-content strong{color:var(--text-1)}
.tab-content a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(245,190,49,0.3);text-underline-offset:2px;transition:text-decoration-color 0.2s}
.tab-content a:hover{text-decoration-color:var(--gold)}
.tab-content ul,.tab-content ol{margin:0 0 18px 0;padding-left:24px;color:var(--text-2);font-size:15px;line-height:1.8}
.tab-content ul{list-style:disc}
.tab-content ol{list-style:decimal}
.tab-content ul ul{list-style:circle;margin-bottom:0}
.tab-content ol ol{margin-bottom:0}
.tab-content li{margin-bottom:4px;padding-left:4px}
.tab-content li::marker{color:var(--gold)}

/* ═══ REVIEW ═══ */
.review-verdict{background:linear-gradient(180deg,rgba(245,190,49,0.05),rgba(245,190,49,0) 55%),var(--bg-card);border:1px solid var(--border-card);border-radius:var(--r-lg);padding:24px;margin-bottom:24px;position:relative;overflow:hidden}
.review-verdict::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.review-verdict-text h3{font-family:var(--fd);font-size:16px;text-transform:uppercase;margin-bottom:4px}
.review-verdict-text p{font-size:13px;color:var(--text-2);line-height:1.6;margin:0}
.review-score-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.review-stars{display:inline-flex;gap:3px;line-height:0}
.review-star{filter:drop-shadow(0 0 5px rgba(245,190,49,0.18))}
.review-score-value{font-family:var(--fd);font-size:20px;line-height:1;color:var(--gold)}
.review-score-denom{font-family:var(--fd);font-size:12px;color:rgba(245,190,49,0.5)}
.review-score-label{font-family:var(--fb);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.09em;color:var(--gold-bright);background:rgba(245,190,49,0.12);border:1px solid rgba(245,190,49,0.22);padding:4px 11px;border-radius:999px;line-height:1}
.review-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.pros-box,.cons-box{border:1px solid var(--border-card);border-radius:var(--r-md);padding:20px;position:relative;overflow:hidden}
.pros-box{background:linear-gradient(180deg,rgba(20,217,144,0.05),rgba(20,217,144,0) 55%),var(--bg-card)}
.cons-box{background:linear-gradient(180deg,rgba(255,69,113,0.05),rgba(255,69,113,0) 55%),var(--bg-card)}
.pros-box::before,.cons-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.pros-box::before{background:var(--emerald)}
.cons-box::before{background:var(--rose)}
.pros-box h3,.cons-box h3{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px}
.pros-box h3{color:var(--emerald)}.cons-box h3{color:var(--rose)}
.pc-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:11.5px;flex-shrink:0}
.pros-box .pc-badge{color:var(--emerald);background:rgba(20,217,144,0.16)}
.cons-box .pc-badge{color:var(--rose);background:rgba(255,69,113,0.16)}
.pros-cons-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.pros-cons-list li{font-size:13px;color:var(--text-2);padding-left:26px;position:relative;line-height:1.5}
.pros-cons-list li::before{position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;line-height:1}
.pros-box .pros-cons-list li::before{content:'✓';color:var(--emerald);background:rgba(20,217,144,0.14)}
.cons-box .pros-cons-list li::before{content:'✗';color:var(--rose);background:rgba(255,69,113,0.14)}
.steps-list{display:flex;flex-direction:column;gap:16px}
.step-item{display:flex;gap:14px;align-items:flex-start}
.step-num{width:34px;height:34px;background:rgba(245,190,49,0.08);border:1px solid var(--hairline);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:13px;color:var(--gold);flex-shrink:0}
.step-text h3{font-size:14px;font-weight:700;margin-bottom:3px}
.step-text p{font-size:13px;color:var(--text-2);line-height:1.7;margin:0}

/* ═══ FAQ ═══ */
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--r-md);overflow:hidden;transition:border-color 0.2s}
.faq-item.open{border-color:rgba(245,190,49,0.12)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;font-size:14px;font-weight:700;color:var(--text-1);text-align:left;cursor:pointer;transition:color 0.2s;min-height:48px}
.faq-q:hover{color:var(--gold)}
.faq-icon{width:20px;height:20px;border-radius:50%;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-3);flex-shrink:0;transition:all 0.3s}
.faq-item.open .faq-icon{background:rgba(245,190,49,0.12);color:var(--gold);transform:rotate(45deg)}
.faq-a{padding:0 18px 14px;font-size:13px;color:var(--text-2);line-height:1.7;display:none}
.faq-item.open .faq-a{display:block}

/* ═══ CTA ═══ */

/* ═══ WORDPRESS CONTENT STYLING ═══ */

/* Reset for pros/cons lists */
.pros-cons-list{list-style:none!important;padding-left:0!important;margin:0!important}
.pros-cons-list li{padding-left:26px!important;margin-bottom:8px!important}
.pros-cons-list li::marker{content:''!important;display:none!important}
.tab-content blockquote{margin:20px 0;padding:16px 20px;border-left:3px solid var(--gold);background:rgba(245,190,49,0.04);border-radius:0 var(--r-md) var(--r-md) 0;font-style:italic;color:var(--text-2)}
.tab-content blockquote p{margin-bottom:0}
.tab-content img{border-radius:var(--r-md);margin:16px 0}
.tab-content hr{border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(245,190,49,0.12),rgba(74,144,247,0.06),transparent);margin:24px 0}
.tab-content table{width:auto;max-width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--r-md);overflow:hidden}
.tab-content thead{background:var(--bg-surface)}
.tab-content th{padding:10px 14px;text-align:left;font-weight:700;color:var(--text-1);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;border-bottom:1px solid var(--border)}
.tab-content td{padding:10px 14px;color:var(--text-2);border-bottom:1px solid var(--border-card)}
.tab-content tr:last-child td{border-bottom:none}
.tab-content tr:hover td{background:rgba(245,190,49,0.02)}
.tab-content code{background:var(--bg-surface);padding:2px 6px;border-radius:4px;font-size:12px;color:var(--gold);font-family:monospace}
.tab-content pre{background:var(--bg-surface);padding:16px;border-radius:var(--r-md);overflow-x:auto;margin:16px 0;border:1px solid var(--border)}
.tab-content pre code{background:none;padding:0}
/* Responsive table wrapper */
.tab-content .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;max-width:100%;width:100%;display:block}
.tab-content .table-wrap table{margin:0;min-width:480px;width:100%;max-width:none}

/* v178: the New-Slots-Weekly .cta banner was removed — its message lives in the New Releases sec-sub. .cta-btn kept (404 page). */
.cta-btn{flex-shrink:0;padding:14px 32px;background:linear-gradient(135deg,var(--gold),var(--gold-bright));color:#0a0a0a;font-size:13px;font-weight:700;font-family:var(--fd);text-transform:uppercase;letter-spacing:0.04em;border-radius:12px;transition:all 0.25s;box-shadow:0 4px 24px rgba(245,190,49,0.3),0 8px 28px rgba(0,0,0,0.4);display:inline-block;position:relative;overflow:hidden}
.cta-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0.25) 50%,transparent 65%);transform:translateX(-100%);animation:btnShimmer 3s ease-in-out infinite 1.5s}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 32px rgba(245,190,49,0.42),0 10px 34px rgba(0,0,0,0.45)}

/* ═══ ABOUT BLOCK — v179, homepage sign-off before the footer fade ═══
   Same lifted-dark panel recipe as the site's other long-form prose
   (.page-card/.seo-card family), hairline border per v171. Two text columns
   on desktop so the block holds the full container width. */
.about-section{position:relative;z-index:2;padding:10px 0 30px}
.about-panel{background:linear-gradient(160deg,#1a1628,#100d1b);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:0 3px 12px rgba(0,0,0,0.35),inset 0 1px 0 rgba(245,190,49,0.05);padding:30px 34px}
.about-copy{columns:2;column-gap:48px;font-size:14.5px;line-height:1.75;color:var(--text-2)}
.about-copy p{margin:0 0 14px;break-inside:avoid}
.about-copy p:last-child{margin-bottom:0;font-size:13px;color:var(--text-3)}
.about-copy a{color:var(--gold);text-decoration:none}
.about-copy a:hover{text-decoration:underline}
@media(max-width:860px){.about-copy{columns:1}.about-panel{padding:22px 18px}}

/* ═══ LONG-FORM PROSE — v183 ═══
   v182 put the game About tabs into two columns. Reverted here.

   Why: a table, the review verdict box or the pros and cons pair has to span
   the gutter, and a spanner FORCIBLY breaks the column flow. Everything before
   it balances into a short pair of columns, the spanner goes full width, then a
   new pair starts underneath. On a paytable tab that strands the heading above
   an empty half column and scatters the copy into unrelated blocks. Chromium
   also ghost-painted a break-inside:avoid paragraph in both columns on at least
   one live page. Across 485 hand-written pages the element mix varies too much
   for a single column rule to be safe, which is Andrew's call and the right one.

   What survives is the part with no fragmentation in it. The archive SEO card is
   capped at 860px and sat hard left in a 1240px container, 380px of nothing
   beside it. Centring fixes that imbalance and keeps a comfortable measure. */
.seo-card,
.seo-content-wrap .seo-content{margin-left:auto;margin-right:auto}

/* ═══ GAME PAGE RIGHT RAIL — v184, rebuilt in v185 ═══
   v184 shipped this as a card and it read as pasted on. Measured, three things
   were wrong and all three were structural.

   GUTTER. Every bit of padding on .slot-card comes from .tab-panel, which wraps
   the prose column only. The rail is a grid sibling, so it got 48px of
   column-gap on its left and hard zero on its right: 49px in, 1px out, with a
   96px trench between the two columns. The gutter now lives on the rail track
   itself, so the track is 388px carrying 48px of its own right padding and the
   column-gap is zero. Both columns pad to the same 48px and the trench closes
   to a normal 48.

   ALIGNMENT. The rail started 32px above the prose because .tab-panel has 32px
   of top padding and the rail had none. It now carries the same 32/40.

   BOX IN A BOX. .slot-card, then .sr-card, then .sr-prov: three concentric
   rounded bordered boxes with backgrounds, in a 340px column. Nothing else on
   the site nests panels that deep. The middle one is gone. The rail is now a
   label and its objects sitting straight on the panel, which is what .mlt-strip
   does under the player. */
@media(min-width:1080px){
  .slot-card .about-grid{grid-template-columns:minmax(0,1fr) 388px;column-gap:0;align-items:start}
  .slot-card .about-main{min-width:0}
  .slot-card .tab-content{max-width:none}
  .slot-rail{position:sticky;top:96px;padding:32px 48px 40px 0}
}
@media(max-width:1079px){ .slot-rail{display:none} }

.sr-label{display:block;font-family:var(--fd);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:var(--text-3);margin-bottom:11px}
.sr-label-2{margin-top:20px;padding-top:17px;border-top:1px solid var(--hairline)}
.sr-thumb{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-md);background-size:cover;background-position:center;background-color:#151122;margin-bottom:12px;border:1px solid var(--hairline);transition:border-color 0.25s}
.sr-thumb:hover{border-color:rgba(245,190,49,0.35)}
.sr-play{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 14px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--gold),var(--gold-bright));color:#0a0a0a;font-family:var(--fd);font-size:13px;letter-spacing:0.03em;text-transform:uppercase;box-shadow:0 4px 18px rgba(245,190,49,0.24);transition:transform 0.25s,box-shadow 0.25s}
.sr-play:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(245,190,49,0.32)}
.sr-play svg{width:15px;height:15px}
.sr-prov{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-md);border:1px solid var(--hairline);background:rgba(19,17,27,0.55);transition:border-color 0.25s,background 0.25s}
.sr-prov:hover{border-color:rgba(245,190,49,0.3);background:var(--bg-card-hover)}
.sr-prov-ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--bg-surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.sr-prov-ic img.us-emoji{width:17px;height:17px}
.sr-prov-t{flex:1 1 auto;min-width:0}
.sr-prov-n{display:block;font-size:13.5px;font-weight:700;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.25s}
.sr-prov:hover .sr-prov-n{color:var(--gold)}
.sr-prov-c{display:block;font-size:11.5px;color:var(--text-3);margin-top:2px}
.sr-arrow{flex:none;width:16px;height:16px;color:var(--text-4);transition:color 0.25s,transform 0.25s}
.sr-prov:hover .sr-arrow{color:var(--gold);transform:translateX(2px)}

/* ═══ STAFF PICKS — v178 editorial 2-up ═══
   Deliberately a different shape from the .g-card grids: horizontal media+body
   cards with a one-line editor note, so the section reads as editorial voice
   rather than a third identical rail. Same surface/hairline/hover language. */
.picks-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pick-card{display:flex;align-items:stretch;background:linear-gradient(160deg,#1a1628,#100d1b);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,0.35),inset 0 1px 0 rgba(245,190,49,0.05);transition:all 0.4s cubic-bezier(0.19,1,0.22,1)}
.pick-card:hover{transform:translateY(-5px);border-color:rgba(245,190,49,0.35);box-shadow:0 10px 40px rgba(0,0,0,0.35)}
.pick-media{flex:0 0 40%;min-width:0;position:relative;overflow:hidden;background:linear-gradient(135deg,#1e1930,#131020)}
.pick-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 55%,rgba(16,13,27,0.4) 100%);pointer-events:none}
.pick-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px;padding:18px 20px 16px}
.pick-title{font-family:var(--fd);font-size:16.5px;line-height:1.25;letter-spacing:0.01em;text-transform:uppercase;color:var(--text-1);transition:color 0.25s}
.pick-card:hover .pick-title{color:var(--gold)}
.pick-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:12.5px;color:var(--text-2);font-weight:500}
.pick-stat{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--fd);font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums}
.pick-star{font-size:12.5px;line-height:1}
.pick-note{font-size:13.5px;line-height:1.6;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pick-cta{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--gold)}
.pick-cta svg{width:13px;height:13px;transition:transform 0.25s}
.pick-card:hover .pick-cta svg{transform:translateX(3px)}
@media(max-width:900px){.picks-grid{grid-template-columns:1fr}}
@media(max-width:560px){.pick-card{flex-direction:column}.pick-media{flex:none;aspect-ratio:16/9}.pick-media::after{background:linear-gradient(to top,rgba(16,13,27,0.4) 0%,transparent 45%)}.pick-body{padding:16px 16px 14px}}

/* ═══ SIMILAR ═══ */
.similar-section{position:relative;z-index:2;padding:44px 0}
/* v153: when More From <Provider> follows Similar Demo Slots, halve the gap between them */

/* ═══ v154/v155: MORE LIKE THIS strip under the demo — sibling of Jump Back In (.rp-card) ═══ */
.mlt-strip{margin-top:18px}
.mlt-label{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
/* v156: tiles flex to fill the row on desktop so the strip's right edge aligns with the demo box */
.mlt-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:4px 14px 8px;margin:0 -14px}
/* v157: fully opaque tiles + lift above the fixed starfield, matching every other card on the site */
.mlt-strip{position:relative;z-index:2}
.mlt-row .rp-card{background:linear-gradient(160deg,#1a1628,#100d1b)}
@media(max-width:900px){.mlt-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:165px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(245,190,49,0.25) transparent}}
@media(max-width:680px){.mlt-row{grid-auto-columns:150px}.mlt-row .rp-img{height:84px}}

/* ═══ REVEAL ═══ */
.reveal{transition:opacity 0.5s,transform 0.5s}
html.js .reveal:not(.visible){opacity:0;transform:translateY(8px)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ═══ BACK TO TOP ═══ */
.back-top{position:fixed;bottom:28px;right:28px;z-index:90;width:42px;height:42px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-2);opacity:0;pointer-events:none;transition:all 0.3s;backdrop-filter:blur(12px)}
.back-top.visible{opacity:1;pointer-events:auto}
.back-top:hover{box-shadow:0 6px 18px rgba(0,0,0,0.45);border-color:rgba(245,190,49,0.2);color:var(--gold)}
.back-top svg{width:18px;height:18px}

/* ═══ FOOTER ═══ */
/* ═══ v177: FOOTER — one centred column, no panels ═══
   Was a 1.5fr/3fr split with three boxed link columns, a search field and the
   goat mark. Now: the Saturn planet (recovered from theme v22), a wordmark, one
   line of copy, two plain link rows, socials, and the legal strip. */
/* v178: the footer fades up from the page sky instead of hard-cutting onto a slab —
   transparent top lets the fixed starfield show through, so it reads as the same sky at dusk */
/* ═══ FOOTER — rebuilt v187 ═══
   It used to be a centred single column: Saturn, wordmark, tagline, six text
   links, six provider links, socials, legal. Two problems, and neither was
   styling. It did NAVIGATION in a weaker language than the section directly
   above it (Other Themes / Other Providers: star header, bordered rows, icons,
   counts) so the page ended with two nav blocks and the second was the worse
   one. And it was the only block on the site with no star header, which is why
   it read as an appendix rather than a part of the page.

   Now it is the last real section. Same star header, same .o-card tiles, left
   aligned like everything else, carrying the five cross-cutting destinations
   nothing else offers. The tiles arriving ARE the boundary, which is why there
   is still no rule across the page: the v178 fade survives, and separation is
   done with an object, the way the rest of the site does it. */
.footer{position:relative;z-index:2;padding:64px 0 30px;background:linear-gradient(180deg,rgba(7,6,10,0) 0%,rgba(7,6,10,0.45) 16%,rgba(9,8,13,0.85) 38%,rgba(12,11,18,0.98) 64%,rgba(12,11,18,0.98) 100%);text-align:left}
.footer::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:920px;height:340px;background:radial-gradient(ellipse,rgba(245,190,49,0.06) 0%,transparent 66%);pointer-events:none}
.footer .container{position:relative;z-index:1}
.footer-explore{margin-bottom:44px}
.footer-explore-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.footer-explore .o-card{padding:14px 16px;gap:12px}
.footer-explore .o-icon{width:38px;height:38px;font-size:18px}
.footer-explore .o-name{font-size:13.5px}
.footer-explore .o-count{font-size:11.5px;line-height:1.35}
.footer-explore .o-icon svg{width:19px;height:19px;color:var(--gold)}
.footer-explore .o-arrow svg{width:16px;height:16px}

/* Sign-off: the brand is a horizontal lockup now, not a stacked centrepiece,
   so the Saturn reads as a mark beside the wordmark rather than a floating
   bullet with 400px of nothing either side of it. */
.footer-signoff{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;padding-bottom:30px}
.footer-brand{display:flex;align-items:center;gap:18px;text-decoration:none;min-width:0}
.footer-brand-text{display:block;min-width:0}
.footer-saturn{position:relative;line-height:0;flex:none}
/* Softer than the old hero treatment — that one carried a 140px triple glow and
   a pulsing filter animation, which is a lot for a footer mark. */
.footer-saturn-svg{width:118px;height:auto;overflow:visible;opacity:0.92;filter:drop-shadow(0 0 18px rgba(245,190,49,0.24));animation:footerSaturnFloat 9s ease-in-out infinite}
@keyframes footerSaturnFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){.footer-saturn-svg{animation:none}}
.footer-wordmark{display:block;font-family:var(--fd);font-size:26px;line-height:1.05;letter-spacing:0.02em;text-transform:uppercase;color:var(--text-1);text-decoration:none}
.footer-wordmark span{color:var(--gold)}
.footer-brand:hover .footer-wordmark span{color:var(--gold-bright)}
.footer-tagline{display:block;max-width:440px;margin:8px 0 0;font-size:13px;line-height:1.65;color:var(--text-3)}
.footer-socials{display:flex;gap:12px;flex:none;margin:0}
.social-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(245,190,49,0.06);border:1px solid var(--hairline);transition:background 0.25s ease,border-color 0.25s ease,transform 0.25s ease}
.social-icon svg{width:17px;height:17px;color:var(--gold-dim);transition:color 0.25s ease}
.social-icon:hover{background:rgba(245,190,49,0.14);border-color:rgba(245,190,49,0.35);transform:translateY(-2px)}
.social-icon:hover svg{color:var(--gold-bright)}
.social-icon:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px 32px;flex-wrap:wrap;padding:22px 0 0;border-top:1px solid var(--hairline)}
.footer-copy{font-size:12.5px;color:var(--text-4);margin:0}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;line-height:1.4}
.footer-legal a{color:var(--text-2);transition:color 0.25s}
.footer-legal a:hover{color:var(--gold)}
.footer-legal-sep{color:var(--gold);opacity:0.45;font-weight:700;user-select:none}

/* ═══ RESPONSIVE ═══ */
@media(max-width:960px){
  .nav-links,.nav-search{display:none}
  .burger{display:flex}
  .games-grid,.similar-grid{grid-template-columns:repeat(3,1fr)}
  .browse-grid{grid-template-columns:repeat(2,1fr)}
  .browse-split{grid-template-columns:1fr;gap:34px}
  .other-grid{grid-template-columns:repeat(3,1fr)}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  
  
}
@media(max-width:680px){
  .container{padding:0 16px}
  .content-section{overflow-x:hidden}
  .hero-grid{grid-template-columns:1fr;gap:28px;text-align:center}
  .hero-left{text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-nav{grid-template-columns:repeat(2,1fr);gap:10px}
  .hero{padding-top:calc(var(--nh) + 16px)}
  .hero h1{font-size:clamp(18px,5vw,28px);letter-spacing:0.03em}
  .hero h1 .h1-line{white-space:normal}
  .hero-sub{font-size:15px;padding:0 4px}
  .hero-eyebrow{font-size:9.5px;letter-spacing:0.18em;padding:6px 12px;margin-bottom:18px}
  .hero-cta-wrap{flex-direction:column;gap:10px;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}
  .btn-cta,.btn-ghost{justify-content:center;width:100%}
  .saturn-svg{width:320px;opacity:0.9}
  .hero-saturn{margin-bottom:-18px}
  .hero-actions{max-width:100%}
  .hero-nav-item{padding:20px 14px;gap:12px}
  .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);width:48px;height:48px}
  .hero-nav-icon svg{width:24px;height:24px}
  .hero-nav-label{font-size:12px;letter-spacing:0.06em}
  .hero-stats-inline{gap:4px;font-size:12px}
  .tax-index-grid{grid-template-columns:1fr}
  .games-grid,.similar-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .g-card{border-color:var(--hairline)}
  .g-badge{padding:5px 12px;font-size:11px}
  .g-info{padding:11px 12px 13px}
  .g-title{font-size:13.5px}
  .browse-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .other-grid{grid-template-columns:1fr;gap:10px}
  .sec-title{font-size:18px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .tag-row{grid-template-columns:1fr}
  .review-pros-cons{grid-template-columns:1fr}
  .review-verdict{text-align:left}
  .cat-hero-inner{display:block}
  .cat-title-row{gap:10px;margin-bottom:10px}
  .cat-info{width:100%}
  .cat-icon{box-shadow:0 3px 10px rgba(0,0,0,0.38);width:40px;height:40px;font-size:20px;border-radius:10px;flex-shrink:0}
  .nr-new-badge{display:none}
  .game-title-row{flex-direction:column;align-items:flex-start}
  .game-quick-stats{display:none}
  .demo-container{height:500px;aspect-ratio:auto}
  .h-stat-vol{display:none}
  .play-btn{width:60px;height:60px}
  .play-btn svg{width:22px;height:22px}
  .play-btn::before{inset:-5px}
  .play-btn::after{inset:-10px}
  .hover-stats{gap:12px;padding:8px 14px}
  .h-stat-val{font-size:12px}
  .h-stat-label{font-size:8px}
  .g-hover{gap:14px}
  .demo-toolbar{padding:12px 14px}
  .demo-tb-btn{padding:10px;font-size:0;gap:0}
  .demo-tb-btn svg{width:20px;height:20px}
  .demo-tb-btn.demo-tb-random{font-size:12px;gap:6px;padding:10px 14px;white-space:nowrap}
  .demo-tb-btn.demo-tb-random svg{width:16px;height:16px}
  .toolbar{flex-direction:column;align-items:stretch;min-width:0}
  .sort-wrap{width:100%}
  .sort-wrap select{width:100%}
  .filter-chips{flex-wrap:nowrap;overflow-x:scroll;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to right,#000 85%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 85%,transparent 100%);padding-right:40px;min-width:0}
  .filter-chips::-webkit-scrollbar{display:none}
  .chips-arrow{display:none}
  .chips-scroll{max-width:calc(100vw - 32px)}
  .chips-wrap.can-l .chips-scroll{--fade-l:34px}
  .chips-wrap.can-r .chips-scroll{--fade-r:34px}
  /* Mobile tap targets — 44px min for all horizontal scroll elements */
  .chip{min-height:44px;display:inline-flex;align-items:center;padding:10px 18px;font-size:14px}
  .f-chip{min-height:44px;display:inline-flex;align-items:center;padding:10px 18px;font-size:14px}
  .tab-btn{min-height:44px;padding:10px 20px;font-size:14px}
  .footer{padding:44px 0 24px}
  .footer-explore{margin-bottom:32px}
  .footer-explore-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .footer-signoff{gap:24px;padding-bottom:24px}
  .footer-saturn-svg{width:88px}
  .footer-wordmark{font-size:22px}
  .footer-tagline{font-size:12.5px}
  .footer-bottom{gap:12px;padding:18px 0 0}
  .footer-legal{gap:6px 10px;font-size:12px}
  .hero-glow{width:300px;height:300px}
}
@media(max-width:420px){
  .footer-explore-grid{grid-template-columns:1fr}
  .g-info{padding:10px 11px 12px}
  .g-title{font-size:13px}
  .g-provider{font-size:11px}
  .g-badge{font-size:11.5px;padding:4px 10px}
  .play-btn{padding:9px 18px;font-size:11px}
  .b-card{padding:14px 12px}
  .b-card-icon{box-shadow:0 2px 8px rgba(0,0,0,0.3);width:34px;height:34px;font-size:16px}
  .b-card-name{font-size:12px}
  .qs-item{padding:12px 12px}
  .qs-val{font-size:14px}
}

/* ═══ PAGE TEMPLATE — Content Card ═══ */

.page-content-wrap {
  max-width: 860px;
}

.page-h1 {
  font-family: var(--fd);
  font-size: clamp(22px, 2.8vw, 30px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text-1);
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.page-h1 .gold {
  color: var(--gold);
  
}

.page-card {
  background: linear-gradient(160deg, #211c33, #141020);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-xl);
  padding: 40px 48px;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(245, 190, 49, 0.08);
  position: relative;
  overflow: hidden;
}

/* Subtle top-edge gold shimmer like other cards */
.page-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 170, 0.45), transparent);
  pointer-events: none;
}

/* Slightly larger text inside page cards vs game tabs */
.page-card .tab-content p,
.page-card .tab-content li {
  font-size: 16.5px;
  line-height: 1.85;
  color: #cbc4d8;
}

/* Page template lists inherit the off-blue body colour */
.page-card .tab-content ul,
.page-card .tab-content ol {
  color: var(--text-2);
}

.page-card .tab-content li {
  color: var(--text-2);
}

.page-card .tab-content h2 {
  font-size: 22px;
  margin: 36px 0 12px;
}

.page-card .tab-content h2:first-child {
  margin-top: 0;
}

.page-card .tab-content h3 {
  font-size: 17.5px;
  margin: 28px 0 8px;
}

/* Responsive */
@media (max-width: 768px) {
  .page-card {
    padding: 28px 24px;
  }

  .page-h1 {
    font-size: clamp(20px, 5vw, 26px);
  }
}

@media (max-width: 480px) {
  .page-card {
    padding: 22px 18px;
  }
}

/* ═══ SITEMAP ═══ */

/* Sitemap h2 headings — match sitewide Archivo Black uppercase style */
.sitemap-heading {
  font-family: var(--fd);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--text-1);
  margin: 36px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sitemap-heading:first-of-type {
  margin-top: 0;
}
.sitemap-heading .last-word {
  color: var(--gold);
}

/* Quick links tile grid */
.sitemap-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.sitemap-nav-grid .b-card {
  padding: 16px 14px;
}

.sitemap-nav-grid .b-card-icon {
  width: 36px;
  height: 36px;
}

/* Pages pills — small groups work well as pills */
.sitemap-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.sitemap-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.2s;
  white-space: nowrap;
}

.sitemap-pill:hover {
  color: var(--gold);
  background: rgba(245, 190, 49, 0.06);
  border-color: rgba(245, 190, 49, 0.25);
  
  transform: translateY(-2px);
}

/* Taxonomy multi-column list */
.sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  column-count: 3;
  column-gap: 24px;
}

.sitemap-list li {
  break-inside: avoid;
  margin-bottom: 0;
  padding: 0;
}

.sitemap-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 1px solid rgba(170,162,190,0.04);
  transition: all 0.2s;
  text-decoration: none;
}

.sitemap-list li:last-child a {
  border-bottom: none;
}

.sitemap-list li a:hover {
  color: var(--gold);
  padding-left: 6px;
}

.sitemap-count {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.sitemap-list li a:hover .sitemap-count {
  color: var(--text-2);
}

@media (max-width: 768px) {
  .sitemap-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sitemap-list {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .sitemap-nav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .sitemap-pill {
    padding: 6px 12px;
    font-size: 12px;
  }
  .sitemap-list {
    column-count: 1;
  }
}

/* ═══ SLOT REVIEW — Unified Tab Card ═══ */

.slot-card {
  background: linear-gradient(160deg, #211c33, #141020);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-xl);
  box-shadow:0 6px 12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}

/* Tabs bar background — visual separation from tab content */
.slot-card .tabs-wrap {
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(170,162,190,0.06);
  padding: 6px 12px;
}

.tab-panel {
  padding: 32px 48px 40px;
  position: relative;
}

/* Subtle top-edge gold shimmer on the card */
.slot-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 170, 0.45), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Long-form reading surface: bigger type earns the extra width */
.tab-panel .tab-content p,
.tab-panel .tab-content li {
  font-size: 16.5px;
  line-height: 1.85;
  color: #cbc4d8;
}

/* Responsive */
@media (max-width: 768px) {
  .tab-panel {
    padding: 28px 24px;
  }
}

@media (max-width: 480px) {
  .tab-panel {
    padding: 22px 18px;
  }
}

/* hero kicker (editorial badge) + stacked-hero spacing */
.hero-kicker{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 16px;position:relative;z-index:5}
.hero-kicker-star{color:var(--gold);font-size:12px;line-height:1}
.hero-kicker-label{font-family:var(--fd);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.hero-kicker-rule{width:46px;height:1px;background:linear-gradient(90deg,rgba(245,190,49,0.45),transparent)}
.hero-kicker-rule.left{background:linear-gradient(90deg,transparent,rgba(245,190,49,0.45))}
.hero h1{margin-bottom:30px}
.hero-content .hero-trust{margin-top:28px}
.b-card:hover .b-card-count{color:#8b829e}
@media(max-width:560px){.hero-kicker-rule{width:24px}.hero-kicker-label{font-size:9.5px;letter-spacing:0.12em}}

/* global ambient starfield (all pages, behind content) */
.starfield{position:fixed;inset:-80px;z-index:0;overflow:hidden;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .star{animation:none!important;opacity:0.45!important}
  .hero-orb{animation:none!important}
  .shooting-star{animation:none!important;opacity:0!important}
}

/* soft text halo to lift titles + breadcrumbs off the starfield (all inner pages) */
.game-hero .game-quick-stats{display:flex;flex-wrap:wrap}
@media(max-width:768px){
  .game-hero .gqs-sep{display:none}
  .game-hero .game-quick-stats{gap:4px 12px}
}

/* unified GAME STATS panel (matches the tab/player blocks) */
.stats-panel{background:linear-gradient(160deg,#211c33,#141020);border:1px solid var(--hairline-strong);border-radius:var(--r-xl);padding:22px 24px;position:relative;overflow:hidden;box-shadow:0 6px 12px rgba(0,0,0,0.5)}
.stats-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,235,170,0.45),transparent)}
.stats-panel .qs-item{background:rgba(11,10,16,0.5);border:1px solid rgba(170,162,190,0.1);box-shadow:none;backdrop-filter:none}
.stats-panel .qs-item:hover{transform:none;border-color:rgba(170,162,190,0.16);box-shadow:none}
.stats-panel .tag-row{border-top:1px solid rgba(170,162,190,0.1);margin-top:18px;padding-top:18px}
.stats-panel .tag-box{background:transparent;border:none;border-radius:0;padding:0;overflow:visible;backdrop-filter:none}
.stats-panel .tag-box::before{display:none}
.stats-panel .tag-box:hover{border:none}
@media(max-width:768px){.stats-panel{padding:16px 16px}}

/* reworked homepage hero — taxonomy-style header (icon tile + H1 + desc), 6 boxes */
.hero{text-align:left;padding-top:calc(var(--nh) + 76px)}
.hero .cat-title-row h1{font-size:clamp(26px,3.5vw,38px);max-width:none;margin:0;line-height:1.1;letter-spacing:-0.01em}
.hero .cat-title-row h1 .gold{text-shadow:none}
.hero .cat-desc{overflow:visible}
.hero .cat-info{margin-bottom:30px}
.hero-trust{margin-left:0;margin-right:0;max-width:none;justify-content:flex-start}
.hero .browse-grid{grid-template-columns:repeat(3,1fr)}
.hero .b-card-arrow{display:flex;align-items:center;justify-content:center;position:absolute;right:16px;top:50%;transform:translateY(-50%);color:rgba(245,190,49,0.5);z-index:1;transition:color 0.3s,transform 0.3s}
.hero .b-card:hover .b-card-arrow{color:var(--gold);transform:translateY(-50%) translateX(2px)}
/* faint emoji watermark filling the right of each Explore Slots tile (desktop) */
.hero .b-card-bg{display:none}
@media(max-width:760px){.hero .b-card-bg{display:none}}
@media(max-width:760px){
  .hero{padding-top:calc(var(--nh) + 30px)}
  /* Explore Slots tiles: single-column Providers-style card on mobile (icon | body | chevron) */
  .hero .browse-grid{grid-template-columns:1fr;gap:12px}
  .hero .b-card{display:grid;grid-template-columns:auto 1fr auto;column-gap:14px;align-items:center;padding:13px 16px}
  .hero .b-card-icon{box-shadow:0 2px 8px rgba(0,0,0,0.3);width:52px;height:52px;font-size:25px;margin-bottom:0}
  .hero .b-card-body{min-width:0}
  .hero .b-card-name{font-size:15px;margin-bottom:1px}
  .hero .b-card-num{font-size:12px;margin-bottom:1px}
  .hero .b-card-count{font-size:12px}
  .hero .b-card-arrow{display:flex;position:static;top:auto;right:auto;transform:none;color:rgba(245,190,49,0.55);flex-shrink:0}
  .hero .b-card:active .b-card-arrow{color:var(--gold);transform:translateX(3px)}
}

/* ═══ MANUAL SECOND-LEVEL NAV (WP submenus) ═══ */
.nav{overflow:visible}
/* desktop dropdown */
.nav-links .menu-item-has-children{position:relative}
.nav-links .menu-item-has-children > a{padding-right:18px}
.nav-links .menu-item-has-children > a::before{content:'';position:absolute;right:0;top:50%;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:0.65;transition:transform 0.2s,opacity 0.2s}
.nav-links .menu-item-has-children:hover > a::before,.nav-links .menu-item-has-children:focus-within > a::before{transform:translateY(-30%) rotate(225deg);opacity:1}
.nav-links .sub-menu{position:absolute;top:100%;left:0;transform:translateY(-6px);min-width:210px;margin-top:12px;padding:8px;list-style:none;background:rgba(12,11,16,0.98);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 8px 14px rgba(0,0,0,0.6);opacity:0;visibility:hidden;transition:opacity 0.2s,transform 0.2s,visibility 0.2s;z-index:120}
.nav-links .sub-menu::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-links .menu-item-has-children:hover > .sub-menu,.nav-links .menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-links li:last-child > .sub-menu{left:auto;right:0}
.nav-links .sub-menu li{list-style:none;width:100%}
.nav-links .sub-menu li a{display:block;padding:9px 14px;font-size:13px;font-weight:600;text-transform:none;letter-spacing:0.01em;color:var(--text-2);border-radius:8px;white-space:nowrap}
.nav-links .sub-menu li a:hover{color:var(--gold);background:rgba(245,190,49,0.08);text-shadow:none}
.nav-links .sub-menu li.current-menu-item a{color:var(--text-2);background:none}
.nav-links .sub-menu li.current-menu-item a::after{display:none}
/* mobile accordion */
.mobile-overlay{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:40px}
.mob-links .menu-item-has-children{position:relative}
.mob-caret{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:4px;padding:6px;border:none;background:none;color:#fff;cursor:pointer}
.mob-caret svg{width:18px;height:18px;transition:transform 0.25s;display:block}
.mob-links li.open .mob-caret svg{transform:rotate(180deg)}
.mob-links .sub-menu li{list-style:none}
.mob-links .sub-menu li.current-menu-item a{color:var(--text-2);background:none}
@media(min-width:901px){.mob-caret{display:none}}

/* active underline on a parent item stops at the text, not under the chevron */
.nav-links li.menu-item-has-children.current-menu-item > a::after,
.nav-links li.menu-item-has-children > a.active::after{right:18px}

/* never underline desktop sub-menu (dropdown) items, on any page */
.nav-links .sub-menu li a::after{display:none}

/* ambient refinement: dim the big orbs to glints, subtle luminous wash from the bottom */
.hero-orb{width:2.5px;height:2.5px;box-shadow:0 0 5px rgba(255,255,255,0.2)}
.starfield::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30vh;max-height:281px;background:radial-gradient(ellipse 72% 100% at 50% 100%,rgba(245,190,49,0.08) 0%,rgba(245,190,49,0.03) 42%,transparent 72%);pointer-events:none}

/* readability + starfield refinements */
.starfield::before{content:'';position:absolute;top:0;left:0;width:70%;height:55%;background:radial-gradient(ellipse 100% 100% at 0% 0%,rgba(20,19,38,0.42) 0%,rgba(20,19,38,0.17) 38%,transparent 68%);pointer-events:none;z-index:2}

/* extra ambient orbs — top-right, below the nav (subtle colour variety) */

/* hero search bar — recessed input (distinct from the raised nav tiles) */
.hero-search-bar{display:flex;align-items:center;gap:11px;max-width:560px;margin:0 0 30px;padding:0 18px;height:52px;background:rgba(12,11,16,0.5);border:1px solid rgba(170,162,190,0.16);border-radius:var(--r-md);box-shadow:inset 0 2px 7px rgba(0,0,0,0.35);position:relative;transition:border-color 0.25s,box-shadow 0.25s,background 0.25s}
.hero-search-bar svg{width:20px;height:20px;color:var(--gold);flex:none;opacity:0.85}
.hero-search-bar input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text-1);font-size:15px;font-family:var(--fb)}
.hero-search-bar input::placeholder{color:var(--text-3)}
.hero-search-bar:focus-within{border-color:rgba(245,190,49,0.5);background:rgba(12,11,16,0.65);box-shadow:inset 0 2px 7px rgba(0,0,0,0.3)}
.hero-search-bar:focus-within svg{opacity:1}
@media(max-width:760px){.hero-search-bar{max-width:none}}

/* hero game showcase — two-up hand-dealt snap carousel on desktop (v158); swipe row on mobile */
.hero-top{display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:start;margin-bottom:18px;position:relative}
.hero-aurora{display:none;position:absolute;inset:-40px -20px -10px;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 30%,rgba(20,217,144,0.06) 42%,rgba(139,111,240,0.14) 55%,rgba(74,144,247,0.08) 68%,transparent 84%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 78%,transparent 100%)}
.hero-rocket{position:absolute;left:0;top:0;width:42px;z-index:0;pointer-events:none;offset-path:path('M -60 402 C 60 352 140 432 232 386 C 322 344 402 426 482 380 C 552 346 602 300 628 250 C 668 168 656 -60 650 -340');offset-rotate:auto 90deg;offset-anchor:50% 40%;offset-distance:0%;animation:rocketPath 15s linear infinite}
.hero-rocket .rk{position:relative;display:block;width:42px}
.hero-rocket .rk-trail{position:absolute;left:50%;top:70px;width:7px;height:118px;transform:translateX(-50%);background:linear-gradient(to bottom,rgba(245,190,49,0.5) 0%,rgba(245,190,49,0.26) 28%,rgba(160,180,255,0.1) 62%,transparent 100%);filter:blur(2.5px);border-radius:60% 60% 50% 50%}
.hero-rocket svg{position:relative;z-index:1;display:block;width:42px}
.hero-rocket .rk-flame{transform-origin:30px 84px;animation:rkFlicker .18s ease-in-out infinite alternate}
@keyframes rocketPath{0%{offset-distance:0%}62%{offset-distance:64%}80%{offset-distance:100%}100%{offset-distance:100%}}
@keyframes rkFlicker{from{transform:scaleY(.82) scaleX(.95);opacity:.8}to{transform:scaleY(1.15) scaleX(1.05);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-rocket{display:none}}
.hero-intro .hero-search-bar{margin-bottom:0}
.hero-showcase-wrap{position:relative;min-width:0;z-index:1}
.hero-intro{min-width:0;position:relative;z-index:5}
/* ═══ v172: HERO FEATURED CAROUSEL ═══
   One card in frame. Built as a `.g-card` at hero scale — same radius, surface
   gradient, shadow, inset top edge and hover behaviour — so it reads as the
   site's card component, not a separate thing. Stepping is native scroll-snap
   (touch swipe free); arrows + dots sit below, never over the artwork.
   Scroller padding must clear the card's shadow: `overflow-y:hidden` will
   guillotine anything that doesn't fit and the cut edge reads as a block. */
.hero-showcase{display:flex;align-items:stretch;min-width:0;overflow-x:auto;overflow-y:hidden;gap:18px;padding:20px 0 44px;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.hero-showcase::-webkit-scrollbar{display:none}
.hero-showcase:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:18px}
.hero-showcase .hs-tile{position:relative;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:block;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;background:#0d0b14;border:0;box-shadow:0 14px 26px -10px rgba(0,0,0,0.72),0 4px 10px -5px rgba(0,0,0,0.5);transition:transform 0.35s cubic-bezier(0.19,1,0.22,1),box-shadow 0.35s ease}
/* The card lifts on hover only — no idle animation. An idle float competing with
   the 6.5s auto-advance read as busy, and changing a running animation's
   amplitude mid-phase lands as a jump rather than a glide.
   Shadow budget: hover lifts 8px, so the shadow reaches 22+34-12-8 = 36px below
   the resting bottom edge. The scroller's 44px bottom padding must stay larger
   than that or overflow:hidden crops it into a hard-edged block. */
.hero-showcase .hs-tile:hover{transform:translateY(-8px);box-shadow:0 22px 34px -12px rgba(0,0,0,0.78),0 6px 12px -6px rgba(0,0,0,0.5)}
@media(prefers-reduced-motion:reduce){.hero-showcase .hs-tile{transition:none}}
.hero-showcase .hs-tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* 16:11 = the native game-card-large ratio, so nothing is cropped, and it is the
   same ratio as every .g-card on the site. Top-anchored so that if a source image
   ever isn't 16:11, the crop takes the spin bar rather than the game logo. */
.hs-img{display:block;width:calc(100% - 2px);margin:1px;border-radius:calc(var(--r-lg) - 1px);aspect-ratio:16/11;background-size:cover;background-position:center top;background-repeat:no-repeat}
/* One scrim, not two. Confined to the panel so the artwork above it stays crisp;
   colour is the site's card-scrim family (#100e17) rather than a new black. */
.hs-body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;padding:30px 18px 14px;background:linear-gradient(to top,rgba(16,14,23,0.97) 0%,rgba(16,14,23,0.94) 44%,rgba(16,14,23,0.74) 72%,rgba(16,14,23,0.3) 89%,rgba(16,14,23,0) 100%)}
.hs-t{display:block;font-family:var(--fd,inherit);font-size:20px;font-weight:800;line-height:1.2;color:#fff;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,0.5);transition:color 0.3s ease}
.hero-showcase .hs-tile:hover .hs-t{color:var(--gold)}
.hs-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:9px}
.hs-p{font-size:13px;font-weight:600;color:var(--text-2)}
.hs-stat{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.hs-stat-mark{color:var(--gold);font-size:13px;line-height:1}
.hs-stat-key{font-size:11px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-3)}
.hs-stat-val{font-family:var(--fd,inherit);font-size:13.5px;font-weight:700;color:var(--text-1);font-variant-numeric:tabular-nums}
.hs-stat-mark+.hs-stat-val{color:var(--gold)}
.hs-cta{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--gold);transition:gap 0.25s ease}
.hs-cta svg{width:13px;height:13px}
.hero-showcase .hs-tile:hover .hs-cta{gap:9px}
/* same metrics as .g-badge, held in gold: the hero is the one place gold labels */
.hs-pill{position:absolute;top:13px;left:13px;z-index:4;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#0e0b18;background:var(--gold);padding:5px 13px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
/* control row — below the card, never over the artwork. The negative margin
   pulls it back through the shadow clearance so the gap reads as ~26px. */
.hs-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:-10px}
.hs-arrow{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;background:rgba(36,29,58,0.72);border:1px solid var(--hairline);color:var(--text-2);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity 0.2s ease,background 0.2s ease,border-color 0.2s ease,color 0.2s ease}
.hs-arrow svg{width:15px;height:15px}
.hs-arrow:hover{background:rgba(46,38,72,0.9);border-color:var(--hairline-strong);color:var(--text-1)}
.hs-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hs-arrow[disabled]{opacity:0.3;cursor:default;pointer-events:none}
.hs-dots{display:flex;align-items:center;gap:8px}
.hs-dot{width:20px;height:20px;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.hs-dot span{display:block;width:7px;height:7px;border-radius:50%;background:var(--text-4);transition:background 0.25s ease,width 0.25s ease,border-radius 0.25s ease}
.hs-dot:hover span{background:var(--text-2)}
.hs-dot.active span{width:20px;border-radius:4px;background:var(--gold)}
.hs-dot:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:4px}
@media(max-width:860px){
  .hero-top{grid-template-columns:1fr;gap:22px;margin-bottom:26px}
  .hero-rocket,.hero-aurora{display:none}
  /* v172: same one-up featured card on mobile, just tighter.
     Aspect is inherited (16:11, native art) — no override needed. */
  .hero-showcase{gap:14px;padding:14px 0 32px;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none}
  .hero-showcase .hs-tile{flex:0 0 100%}
  .hero-showcase .hs-tile:hover{transform:none;box-shadow:0 14px 26px -10px rgba(0,0,0,0.72),0 4px 10px -5px rgba(0,0,0,0.5)}
  .hs-body{padding:30px 16px 14px}
  .hs-t{font-size:18px}
  .hs-meta{gap:4px 12px;margin-bottom:9px}
  .hs-controls{margin-top:-12px}
}

/* logo mark (free-standing gold six-point star) */
.logo-mark{display:inline-flex;align-items:center;color:var(--gold);flex-shrink:0;line-height:0}
.logo-mark svg{width:34px;height:34px;display:block;transform-origin:50% 50%;transition:transform 0.4s cubic-bezier(0.2,0.75,0.2,1)}
.logo:hover .logo-mark svg,.logo:focus-visible .logo-mark svg{transform:rotate(16deg)}

@media (prefers-reduced-motion: reduce){.logo-mark svg{transition:none}}
/* hero separator — quiet mobile-only hairline between logo and H1 (homepage breadcrumb stand-in); hidden on desktop where the H1 leads */
.hero-sep{display:none}
@media(max-width:860px){.hero-sep{display:block;width:40px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(245,190,49,0.6),rgba(245,190,49,0));margin-bottom:16px}}

/* ═══ v124: MOBILE MENU SEARCH ═══ */
.mob-search{width:100%;max-width:400px;margin:0 0 16px;position:relative}
.mob-search input{width:100%;padding:14px 16px 14px 44px;background:rgba(245,190,49,0.04);border:1px solid rgba(245,190,49,0.3);border-radius:12px;color:var(--text-1);font-size:16px;font-family:var(--fb);outline:none;transition:border-color 0.2s,background 0.2s}
.mob-search input:focus{border-color:var(--gold);background:rgba(245,190,49,0.06)}
.mob-search input::placeholder{color:var(--text-2)}
.mob-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--gold);pointer-events:none}

/* ═══ v124: SEARCH AUTOCOMPLETE ═══ */
.us-ac-host{position:relative}
.us-ac{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg-card);border:1px solid var(--hairline);border-radius:12px;box-shadow:var(--shadow-ch);display:none;z-index:300;max-height:420px;overflow-y:auto}
.us-ac.open{display:block}
.us-ac-item{display:flex;align-items:center;gap:12px;padding:10px 14px;transition:background 0.15s}
.us-ac-item:hover,.us-ac-item.sel{background:var(--bg-card-hover)}
.us-ac-item img{width:52px;height:36px;object-fit:cover;border-radius:6px;flex-shrink:0}
.us-ac-title{display:block;font-size:14px;font-weight:600;color:var(--text-1);line-height:1.3}
.us-ac-provider{display:block;font-size:12px;color:var(--text-3)}
.us-ac-all{display:block;text-align:center;padding:11px;font-size:13px;font-weight:700;color:var(--gold);border-top:1px solid var(--border);letter-spacing:0.04em}
.us-ac-all:hover{background:var(--bg-card-hover)}
.nav-search .us-ac{width:320px;left:auto;right:0}

/* ═══ v124: SEARCH RESULTS HERO ═══ */
.cat-icon--gold{border:1px solid rgba(245,190,49,0.3);background:rgba(245,190,49,0.08);color:var(--gold)}
.cat-icon--gold svg{width:26px;height:26px}
.search-empty{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--text-3)}
.search-empty-title{font-size:18px;color:var(--text-1);margin-bottom:8px;font-weight:600}
.search-empty p{font-size:14px;margin-bottom:6px}
.search-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ═══ v153: TOC rail removed (v124–v127). Single column; rail slot reserved for future monetisation ═══ */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr)}

/* v127: overflow fix retained — overflow:hidden on the card blocked position:sticky (kept for future sticky rail) */
.single-slot .slot-card,.slot-template-default .slot-card{overflow:visible}
.single-slot .slot-card .tabs-wrap,.slot-template-default .slot-card .tabs-wrap{border-radius:calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0}
.single-slot .slot-card::before,.slot-template-default .slot-card::before{left:20px;right:20px}

/* ═══ v125: MOBILE NAV — submenu + bottom anchor ═══ */
.mob-links .sub-menu{list-style:none;margin:2px 0 10px 24px;padding:2px 0 2px 14px;border-left:2px solid var(--hairline-strong);display:none}
.mob-links li.open > .sub-menu{display:block}
.mob-links .sub-menu li a{display:block;padding:10px 12px;font-family:var(--fb);font-size:15px;font-weight:500;color:var(--text-2);text-transform:none;letter-spacing:0;border-radius:8px;transition:color 0.2s,background 0.2s}
.mob-links .sub-menu li a:hover{color:var(--text-1);background:rgba(245,190,49,0.05)}
.mob-links .sub-menu li:last-child a{color:var(--gold);font-weight:600}

.mob-foot{width:100%;max-width:400px;margin-top:auto;padding-top:24px;border-top:1px solid rgba(170,162,190,0.12)}
.mob-foot-label{font-family:var(--fd);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.mob-foot-chips{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.mob-foot-chips::-webkit-scrollbar{display:none}
.mob-foot-chips .chip{flex-shrink:0}
.mob-foot-chips .chip{font-size:13px}

.mob-links > .menu-item-has-children > a{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mob-links > li > a .mob-caret{margin-left:auto;padding:10px;margin-top:-10px;margin-bottom:-10px;margin-right:-6px}

/* ═══ v129: BRAND STAR + CHROME ICONS ═══ */
.sec-star{width:0.92em;height:0.92em;display:inline-block;vertical-align:-0.08em;color:rgba(170,162,190,0.42);margin-right:2px}

.load-more svg{width:14px;height:14px;transition:transform 0.25s}
.load-more:hover svg{transform:translateX(3px)}
.cat-icon--gold svg{width:30px;height:30px}

/* ═══ v130: RECENTLY PLAYED RAIL ═══ */
.us-recent-section .rp-grid{display:grid;grid-auto-flow:column;grid-auto-columns:180px;gap:12px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;scrollbar-color:rgba(245,190,49,0.25) transparent}
.rp-card{display:block;background:linear-gradient(160deg,#1a1628,#100d1b);border:1px solid var(--hairline);border-radius:12px;overflow:hidden;transition:transform 0.25s,border-color 0.25s,box-shadow 0.25s}
.rp-card:hover{transform:translateY(-4px);border-color:rgba(245,190,49,0.35);box-shadow:0 8px 24px rgba(0,0,0,0.35)}
.rp-img{display:block;height:100px;background-size:cover;background-position:center;background-color:#151122}
.rp-t{display:block;padding:10px 12px 2px;font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-p{display:block;padding:0 12px 12px;font-size:11.5px;color:#8a819c}
@media(max-width:680px){.us-recent-section .rp-grid{grid-auto-columns:150px}.rp-img{height:84px}}

/* ═══ v130: RANDOM SLOT BUTTON ═══ */
.btn-random{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:13px 24px;border:1px solid var(--gold);border-radius:50px;color:#0e0b18;font-family:var(--fd);font-size:12.5px;font-weight:400;letter-spacing:0.07em;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;text-transform:uppercase;background:var(--gold);cursor:pointer;transition:transform 0.2s ease,background 0.2s ease,border-color 0.2s ease,box-shadow 0.25s ease;box-shadow:0 4px 14px rgba(0,0,0,0.42)}
.btn-random:hover{background:var(--gold-bright);border-color:var(--gold-bright);box-shadow:0 8px 22px rgba(0,0,0,0.5);transform:translateY(-1px)}
.btn-random:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.btn-random svg{width:14px;height:14px;flex-shrink:0}
.btn-random.is-loading,.chip.js-random-slot.is-loading{opacity:0.6;pointer-events:none}

/* ═══ v130: STICKY PLAY BAR ═══ */

/* ═══ v133: PLAY BADGE + THEATRE DIM ═══ */
.demo-play-badge{display:inline-flex;align-items:center;padding:7px 16px;border:1px solid rgba(245,190,49,0.35);border-radius:50px;background:rgba(16,14,23,0.75);backdrop-filter:blur(6px);font-size:12px;font-weight:600;letter-spacing:0.04em;color:var(--text-1);text-shadow:0 1px 6px rgba(0,0,0,0.8);box-shadow:0 3px 10px rgba(0,0,0,0.45)}
@media(max-width:520px){.demo-play-badge{font-size:11px;padding:6px 13px}}

body.us-playing .ambient,body.us-playing .starfield{opacity:0.35;transition:opacity 1.2s ease}
body.us-playing::before{background:linear-gradient(180deg,rgba(33,31,45,0.55) 0%,rgba(20,19,28,0.28) 38%,rgba(12,11,18,0) 72%)}
.ambient,.starfield{transition:opacity 1.2s ease}
@media(prefers-reduced-motion:reduce){body.us-playing .ambient,body.us-playing .starfield,.ambient,.starfield{transition:none}}

/* ═══ v134: UNIFIED PLAY LOCKUP ═══ */
.demo-play-inner.demo-play-float{position:relative;animation:dplFloat 4s ease-in-out infinite;will-change:transform;transform:translate3d(0,0,0)}
.demo-play-inner.demo-play-float::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,86vw);height:320px;background:radial-gradient(ellipse,rgba(7,6,10,0.55) 0%,rgba(7,6,10,0.25) 45%,transparent 70%);pointer-events:none;z-index:0}
.demo-play-lockup{position:relative;z-index:1;display:flex;align-items:center;text-align:left;gap:clamp(12px,1.4vw,18px);background:rgba(14,13,19,0.97);border:2px solid rgba(245,190,49,0.65);border-radius:clamp(16px,1.8vw,22px);padding:clamp(10px,1.2vw,16px) clamp(24px,3vw,40px) clamp(10px,1.2vw,16px) clamp(10px,1.2vw,16px);cursor:pointer;box-shadow:0 24px 60px rgba(0,0,0,0.65),0 4px 14px rgba(0,0,0,0.5),0 0 44px rgba(245,190,49,0.22);transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s}
.demo-play-lockup:hover{transform:translateY(-2px) scale(1.02);border-color:rgba(245,190,49,0.95);box-shadow:0 30px 70px rgba(0,0,0,0.7),0 6px 18px rgba(0,0,0,0.55),0 0 60px rgba(245,190,49,0.32)}
.dpl-disc{position:relative;width:clamp(46px,5.4vw,72px);height:clamp(46px,5.4vw,72px);flex-shrink:0}
.dpl-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(245,190,49,0.55);animation:dplRing 3s ease-out infinite}
.dpl-core{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#fdd55a,#f5be31 55%,#e8a020);display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px rgba(245,190,49,0.45),inset 0 -2px 6px rgba(140,90,10,0.4)}
.dpl-core svg{width:40%;height:40%;color:#1a1405;margin-left:6%}
.dpl-label{display:block;font-family:var(--fd);font-size:clamp(15px,1.7vw,23px);letter-spacing:0.11em;text-transform:uppercase;color:#fff;line-height:1.2}
.dpl-sub{display:block;margin-top:3px;font-size:clamp(11px,0.95vw,13.5px);letter-spacing:0.04em;color:#bab2c8;font-weight:500}
@keyframes dplFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
@keyframes dplRing{0%{transform:scale(1);opacity:0.4}70%{opacity:0.1}100%{transform:scale(1.3);opacity:0}}
@media(prefers-reduced-motion:reduce){.demo-play-inner.demo-play-float{animation:none}.dpl-ring{animation:none;opacity:0}}

/* ═══ v137: STAGED VIGNETTE ═══ */
.demo-placeholder::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,transparent 38%,rgba(8,7,12,0.42) 75%,rgba(8,7,12,0.72) 100%),linear-gradient(180deg,rgba(8,7,12,0.3) 0%,transparent 15%),linear-gradient(0deg,rgba(8,7,12,0.6) 0%,transparent 26%)}
.demo-play-inner{position:relative;z-index:2}

/* ═══ v139: EXPLORE TILE SVG ICONS + SHOWCASE EDGE FADE ═══ */
.b-card-icon svg{width:26px;height:26px;color:var(--gold)}
@media(max-width:768px){.b-card-icon svg{width:18px;height:18px}}
.b-card-bg svg{width:120px;height:120px;color:var(--gold)}

/* ═══ v141: SELF-HOSTED EMOJI SIZING ═══ */
img.us-emoji{display:inline-block;width:1.05em;height:1.05em;vertical-align:-0.12em;object-fit:contain}
.us-emoji--native{font-style:normal}
.b-card-icon img.us-emoji{width:27px;height:27px}
@media(max-width:768px){.b-card-icon img.us-emoji{width:17px;height:17px}}
.b-card-bg img.us-emoji{width:120px;height:120px;opacity:inherit}
.cat-icon img.us-emoji{width:34px;height:34px}
@media(max-width:768px){.cat-icon img.us-emoji{width:21px;height:21px}}
.tax-index-icon img.us-emoji{width:1.05em;height:1.05em}
.g-placeholder-icon img.us-emoji{width:1.05em;height:1.05em}

/* ═══ v142: MOBILE MENU EYEBROW ═══ */
.mob-eyebrow{display:flex;align-items:center;gap:8px;width:100%;max-width:400px;margin:0 0 14px;font-family:var(--fd);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-dim)}
.mob-eyebrow-star{width:11px;height:11px;color:var(--gold);flex-shrink:0}

/* ── footer goat easter egg (v160) ─────────────────────────────
   Cream baphomet over the gold star, 72px star (81px svg).
   Hover/focus: star flips point-down, eyes go red. */

.logo:hover .logo-mark--goat svg,.logo:focus-visible .logo-mark--goat svg{transform:none} /* cancel generic 16deg star tilt */
.logo-mark--goat .us-star{transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);transform-box:fill-box;transform-origin:50% 50%}
.logo:hover .logo-mark--goat .us-star,.logo:focus-visible .logo-mark--goat .us-star{transform:rotate(180deg)}
.logo-mark--goat .us-eye{transition:fill 0.35s ease}
.logo:hover .logo-mark--goat .us-eye,.logo:focus-visible .logo-mark--goat .us-eye{fill:#e02020;filter:drop-shadow(0 0 3px rgba(224,32,32,0.75))}
@media(max-width:680px){}
@media (prefers-reduced-motion: reduce){.logo-mark--goat .us-star,.logo-mark--goat .us-eye{transition:none}}