/*
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.66
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:24px 0;margin-bottom:44px}
.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}

/* ═══ 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}
.badge-new{background:var(--emerald);color:#0e0b18;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.badge-hot{background:var(--rose);color:#0e0b18;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.badge-popular{background:var(--blue);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) ═══ */
.cat-hero{position:relative;z-index:2;padding:20px 0 36px}
.cat-hero-term{padding-bottom:14px}
.cat-hero:first-of-type{padding-top:calc(var(--nh) + 32px)}
.cat-hero-inner{display:block}
.cat-title-row{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.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:10px}
.cat-desc{font-size:14px;color:var(--text-2);line-height:1.85;max-width:540px}
.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}
.us-page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border:1px solid rgba(245,190,49,0.15);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)}
.provider-release-footer{text-align:center;padding:24px 0 8px}

/* ═══ 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}
.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}

.cta{position:relative;z-index:2;margin:16px 0 52px;padding:48px 48px;background:linear-gradient(135deg,rgba(245,190,49,0.1),rgba(74,144,247,0.06),rgba(245,190,49,0.04));border:1px solid rgba(245,190,49,0.2);border-radius:var(--r-xl);display:flex;align-items:center;justify-content:space-between;gap:28px;overflow:hidden;box-shadow:0 6px 12px rgba(0,0,0,0.35)}
.cta::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(245,190,49,0.35),rgba(245,190,49,0.5),rgba(245,190,49,0.35),transparent)}
.cta::after{content:'';position:absolute;top:-50%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(245,190,49,0.08) 0%,transparent 60%);pointer-events:none}
.cta h2{font-family:var(--fd);font-size:22px;text-transform:uppercase;margin-bottom:6px}
.cta p{color:var(--text-2);font-size:14px;max-width:460px}
.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)}

/* ═══ 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 */
.more-provider-section{padding-top:0}

/* ═══ 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. */
.footer{position:relative;z-index:2;padding:72px 0 32px;background:linear-gradient(180deg,rgba(7,6,10,0.92) 0%,rgba(12,11,18,0.98) 100%);backdrop-filter:blur(16px);text-align:center}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 8%,rgba(245,190,49,0.12) 26%,rgba(245,190,49,0.5) 50%,rgba(245,190,49,0.12) 74%,transparent 92%)}
.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-mark{display:flex;flex-direction:column;align-items:center;margin-bottom:34px}
.footer-saturn{position:relative;line-height:0;margin-bottom:6px}
/* 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:230px;height:auto;overflow:visible;opacity:0.95;filter:drop-shadow(0 0 26px rgba(245,190,49,0.34)) drop-shadow(0 0 60px rgba(245,190,49,0.16));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:30px;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-tagline{max-width:460px;margin:12px auto 0;font-size:13.5px;line-height:1.7;color:var(--text-2)}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px;margin-bottom:20px}
.footer-nav a{font-size:13.5px;font-weight:600;color:var(--text-1);text-decoration:none;transition:color 0.25s ease}
.footer-nav a:hover{color:var(--gold)}
.footer-nav-sub{gap:8px 20px;margin-bottom:30px}
.footer-nav-sub a{font-size:12.5px;font-weight:500;color:var(--text-3)}
.footer-nav-sub a:hover{color:var(--gold)}
.footer-nav-more{color:var(--text-2)!important}
.footer-socials{display:flex;gap:12px;justify-content:center;margin:0 0 30px}
.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;flex-direction:column;gap:16px;padding:24px 0 0;border-top:1px solid var(--border)}
.footer-bottom p{font-size:12.5px;color:var(--text-3);margin:0}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:center;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}
.footer-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.resp-badge{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;background:linear-gradient(135deg,rgba(245,190,49,0.1),rgba(245,190,49,0.05));border:1px solid rgba(245,190,49,0.25);border-radius:12px;font-size:11.5px;color:var(--gold);font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,0.2),inset 0 1px 0 rgba(245,190,49,0.1);transition:all 0.3s}
.resp-badge:hover{box-shadow:0 4px 12px rgba(0,0,0,0.3),inset 0 1px 0 rgba(245,190,49,0.15);border-color:rgba(245,190,49,0.35)}

/* ═══ 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}
  .cta{flex-direction:column;padding:28px 20px;text-align:center}
  .cta h2{font-size:18px}
  .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-saturn-svg{width:170px}
  .footer-wordmark{font-size:24px}
  .footer-tagline{font-size:13px}
  .footer-nav{gap:9px 18px}
  .footer-nav-sub{gap:7px 14px}
  
  
  
  
  
  
  
  
  
  .footer-bottom{gap:14px;text-align:center;padding:20px 0}
  .footer-bottom-row{flex-direction:column;gap:12px;text-align:center;justify-content:center}
  .footer-legal{gap:6px 10px;font-size:12px}
  .hero-glow{width:300px;height:300px}
}
@media(max-width:420px){
  .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}}
