/*
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.133
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
*/

/* BUILD NOTE (v223): edit THIS file, then regenerate style.min.css (csso, restructure off) with the
   first bytes set to the v-stamp comment holding this file's Version (see Scripts/build-theme-css.js). functions.php serves style.min.css only when that stamp matches
   this file's Version header, so a forgotten rebuild falls back to this file, never stale CSS. */

/* v223: fonts self-hosted (were Google Fonts). Latin + latin-ext subsets, DM Sans is variable 400-700. */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/archivo-black-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/archivo-black-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ═══ 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:#8a819c;
  --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}

/* 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(150,120,235,0.116);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(150,120,235,0.116);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 */

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

/* 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-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(150,120,235,0.212) 0%,transparent 65%);opacity:1;transition:opacity 0.3s}
.hero-nav-item:hover::before{background:radial-gradient(circle at 50% 0%,rgba(150,120,235,0.276) 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(150,120,235,0.212);border:1px solid var(--hairline-strong);border-radius:14px;display:flex;align-items:center;justify-content:center;transition:all 0.35s;position:relative;z-index:1}
.hero-nav-item:hover .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);background:rgba(245,190,49,0.22);border-color:rgba(245,190,49,0.45)}
.hero-nav-icon svg{width:26px;height:26px;color:var(--gold);stroke-width:2;transition:transform 0.3s}
.hero-nav-item:hover .hero-nav-icon svg{transform:scale(1.15)}
.hero-nav-label{font-size:11.5px;font-weight:700;color:var(--text-1);text-transform:uppercase;letter-spacing:0.05em;position:relative;z-index:1;transition:color 0.3s}
.hero-nav-item:hover .hero-nav-label{color:var(--gold)}
.hero-nav-item:nth-child(1) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite}
.hero-nav-item:nth-child(2) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite 0.8s}
.hero-nav-item:nth-child(3) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite 1.6s}
.hero-nav-item:nth-child(4) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite 2.4s}
.hero-nav-item:nth-child(5) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite 3.2s}
.hero-nav-item:nth-child(6) .hero-nav-icon{box-shadow:0 2px 10px rgba(0,0,0,0.32);animation:float 5s ease-in-out infinite 4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero-search{position:relative;margin-bottom:10px}
.hero-search form{display:block}
.hero-search input{width:100%;padding:14px 20px 14px 48px;background:#131020;border:1px solid rgba(245,190,49,0.15);border-radius:var(--r-lg);color:var(--text-1);font-size:15px;font-family:var(--fb);outline:none;transition:all 0.3s;backdrop-filter:blur(8px)}
.hero-search input::placeholder{color:var(--text-3)}
.hero-search input:focus{border-color:rgba(245,190,49,0.35);background:rgba(19,17,27,0.95);box-shadow:0 0 0 4px rgba(245,190,49,0.06),0 4px 20px rgba(0,0,0,0.3)}
.hero-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--gold);pointer-events:none;z-index:1}
.hero-stats-inline{display:flex;justify-content:center;align-items:center;gap:6px;padding:14px 0 0;flex-wrap:wrap}
.hsi{font-size:13px;color:var(--text-3)}
.hsi strong{color:var(--gold);font-weight:700}
.hsi-sep{color:var(--text-4);font-size:11.5px}

/* ═══ PROVIDER CHIPS ═══ */
.providers-bar{position:relative;z-index:2;padding:0 0 6px;margin-bottom:0}
.chips-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips-scroll::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:7px 16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all 0.25s;white-space:nowrap;display:inline-block}
.chip:hover{background:var(--bg-card-hover);color:var(--text-1);border-color:rgba(170,162,190,0.1)}
.chip.active{background:rgba(150,120,235,0.148);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}
/* v212: the "About Game" label is a div now (it was an h2 with no content of its own). These two lines make a div.sec-title render exactly as the h2 did: synthetic bold, no default margin, and the .gold span left uncoloured since two-tone titles were retired in v188. */
div.sec-title{font-weight:700;margin:0}div.sec-title .gold{color:inherit}
h2 .gold{color:inherit}
.sec-count{font-family:var(--fb);font-size:13px;font-weight:500;color:var(--text-3);margin-left:10px;text-transform:none}
.view-all{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--gold);transition:all 0.2s}
.view-all:hover{gap:9px}
.view-all svg{width:14px;height:14px}
/* v178: one-line section subline — folds messaging (e.g. the old Weekly banner) into the section unit */
.sec-sub{margin:-16px 0 22px;font-size:13.5px;line-height:1.6;color:var(--text-3);max-width:620px}

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

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

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

   Deliberately NOT filled with content. A fact strip and a featured slider were
   both mocked and rejected: the facts go stale and the slider is a second
   carousel on the one template where the game grid IS the content. Applies to
   every page in the .cat-hero family so archive, search, term, index, New
   Releases, Highest Rated, Highest RTP, Most Popular and Popular all match. */
.cat-hero{position:relative;z-index:2;padding:14px 0 22px}
.cat-hero-term{padding-bottom:10px}
.cat-hero:first-of-type{padding-top:calc(var(--nh) + 24px)}
.cat-hero-inner{display:block}
.cat-title-row{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.cat-title-row h1{font-family:var(--fd);font-size:clamp(26px,3.5vw,38px);text-transform:uppercase;letter-spacing:-0.01em;line-height:1.1;margin:0}
.cat-icon{box-shadow:0 3px 10px rgba(0,0,0,0.38);width:72px;height:72px;background:linear-gradient(rgba(150,120,235,0.18),rgba(150,120,235,0.18)),#151122;border:1px solid rgba(245,190,49,0.38);border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:32px;box-shadow:0 3px 10px rgba(0,0,0,0.38),inset 0 1px 0 rgba(245,190,49,0.12)}
.cat-info h1,.cat-title-row h1{font-family:var(--fd);font-size:clamp(26px,3.5vw,38px);text-transform:uppercase;letter-spacing:-0.01em;margin-bottom:0;line-height:1.1}
.cat-desc-wrap{margin-bottom:2px}
/* v189: page 2+ drops the term description, so this label takes its slot.
   It is the only visible difference between the hero on page 1 and page 3,
   and it is a label not a sentence, so it uses the small-caps idiom rather
   than the prose one. No gold, per the v171 ration. */
.cat-page-of{font-family:var(--fd);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);margin:0}
.cat-desc{font-size:14px;color:var(--text-2);line-height:1.8;max-width:600px}
.cat-desc-wrap .cat-desc:not(.expanded)>*:nth-child(n+2){display:none}
.cat-desc-wrap .cat-desc:not(.expanded)>*:first-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cat-desc-wrap .cat-desc:not(.expanded){overflow:hidden}
.cat-desc-wrap .cat-desc>*:first-child{margin-top:0}
.cat-desc-wrap .cat-desc.expanded{overflow:visible}
.cat-desc p{margin-bottom:12px}
.cat-desc p:last-child{margin-bottom:0}
.cat-desc h2,.cat-desc h3,.cat-desc h4{font-family:var(--fd);text-transform:uppercase;color:var(--text-1)}
.cat-desc h2{font-size:18px;font-weight:700;margin:24px 0 10px;font-family:var(--fb);text-transform:none;color:var(--text-1)}.cat-desc h2:first-child{margin-top:0}
.cat-desc h2 .last-word{color:var(--text-1)}
.cat-desc h3{font-size:15px;margin:20px 0 8px;text-transform:none;font-family:var(--fb);font-weight:700;color:var(--gold)}
.cat-desc a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(245,190,49,0.3);text-underline-offset:2px;transition:text-decoration-color 0.2s}
.cat-desc a:hover{text-decoration-color:var(--gold)}
.hero-flag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(150,120,235,0.148);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(150,120,235,0.148);border-color:rgba(245,190,49,0.25);color:var(--gold)}
.sort-wrap{position:relative}
.sort-wrap select{appearance:none;padding:8px 36px 8px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;color:var(--text-1);font-size:13px;font-family:var(--fb);font-weight:600;cursor:pointer;outline:none;transition:all 0.2s}
.sort-wrap select:hover,.sort-wrap select:focus{border-color:rgba(170,162,190,0.12);color:var(--text-1)}
.sort-wrap::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--text-3);pointer-events:none}
.results-info{position:relative;z-index:2;font-size:13px;color:var(--text-3);padding-bottom:16px}
.results-info strong{color:var(--text-2)}

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

/* ═══ PAGINATION ═══ */
.us-pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:32px 0 8px;flex-wrap:wrap}
/* v186: pagination never got the v171 pass. A gold border at rest is gold doing
   a structural job; gold here now means hover and current page only. */
.us-page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border:1px solid var(--hairline);border-radius:10px;color:var(--text-2);font-size:13px;font-weight:700;font-family:var(--fd);transition:all 0.2s;background:var(--bg-surface)}
.us-page-btn:hover{border-color:rgba(245,190,49,0.35);color:var(--gold);background:rgba(150,120,235,0.116)}
.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(150,120,235,0.212);border:1px solid rgba(245,190,49,0.35);border-radius:20px;color:var(--gold);font-size:11px;font-weight:700;font-family:var(--fd);letter-spacing:0.05em;text-transform:uppercase;white-space:nowrap}
.nr-view-all-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-3);font-size:13px;font-weight:600;font-family:var(--fd);transition:color 0.2s;white-space:nowrap}
.nr-view-all-link:hover{color:var(--gold)}

/* ═══ OTHER CATEGORIES ═══ */
.other-section{position:relative;z-index:2;padding:44px 0}
.other-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.o-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#131020;border:1px solid var(--hairline);border-radius:var(--r-md);cursor:pointer;transition:all 0.35s cubic-bezier(0.19,1,0.22,1);position:relative;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,0.24)}
.o-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 0% 0%,rgba(150,120,235,0.1) 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(150,120,235,0.148);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(150,120,235,0.276);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(150,120,235,0.28);border:1px solid var(--hairline-strong);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;transition:all 0.35s}
.tax-index-card:hover .tax-index-icon{box-shadow:0 2px 8px rgba(0,0,0,0.3);background:rgba(245,190,49,0.24);border-color:rgba(245,190,49,0.5)}
.tax-index-info{flex:1;min-width:0;position:relative;z-index:1}
.tax-index-name{font-size:16px;font-weight:700;margin-bottom:2px;transition:color 0.3s}
.tax-index-card:hover .tax-index-name{color:var(--gold)}
.tax-index-count{font-size:12px;color:var(--text-1);font-weight:600}
.tax-index-desc{font-size:12.5px;line-height:1.45;color:var(--text-3);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* v183: tiered index — top terms keep the rich card, the tail drops to the
   v177 compact rows in a two column A to Z split. One new rule, .sec-count
   already existed and was unused. */
.tax-index-tail{margin-top:46px}
.tax-index-arrow{width:24px;height:24px;color:var(--text-4);flex-shrink:0;transition:all 0.3s;position:relative;z-index:1}
.tax-index-arrow svg{width:18px;height:18px}
.tax-index-card:hover .tax-index-arrow{color:var(--gold);transform:translateX(3px)}

/* ═══ GAME DETAIL — Demo ═══ */
.game-hero{position:relative;z-index:2;padding:24px 0 0}
.game-hero:first-of-type{padding-top:calc(var(--nh) + 32px)}
.game-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.game-title-row h1{font-family:var(--fd);font-size:clamp(24px,3.5vw,36px);text-transform:uppercase;letter-spacing:-0.01em;line-height:1.1}
.game-title-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.game-quick-stats{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:13px;color:var(--text-2)}
.gqs-label{color:var(--text-2);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;margin-right:4px}
.gqs-val{color:var(--gold);font-weight:600}
.gqs-sep{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:0.5;display:inline-block;vertical-align:middle;margin:0 2px}
.provider-tag{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;color:var(--text-2);transition:all 0.2s}
.provider-tag:hover{border-color:rgba(245,190,49,0.2);color:var(--gold)}
.rating-tag{display:flex;align-items:center;gap:4px;padding:6px 12px;background:rgba(150,120,235,0.148);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;line-height:1.2;color:var(--text-1);position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:2.4em}
.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)}
/* v188: two-tone h2s were retired with `h2 .gold{color:inherit}` above, but
   taxonomy.php is the only template using .last-word, and this rule sits later
   in the file so it survived on source order. Matched to the retirement.
   The sitemap keeps its gold via the higher-specificity .sitemap-heading rule. */
h2 .last-word{color:inherit}
.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(150,120,235,0.1),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(150,120,235,0.212);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(150,120,235,0.148);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(150,120,235,0.212);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(150,120,235,0.084);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(150,120,235,0.052)}
.tab-content code{background:var(--bg-surface);padding:2px 6px;border-radius:4px;font-size:12px;color:var(--gold);font-family:monospace}
.tab-content pre{background:var(--bg-surface);padding:16px;border-radius:var(--r-md);overflow-x:auto;margin:16px 0;border:1px solid var(--border)}
.tab-content pre code{background:none;padding:0}
/* Responsive table wrapper */
.tab-content .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;max-width:100%;width:100%;display:block}
.tab-content .table-wrap table{margin:0;min-width:480px;width:100%;max-width:none}

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

/* ═══ ABOUT BLOCK — v179, homepage sign-off before the footer fade ═══
   Same lifted-dark panel recipe as the site's other long-form prose
   (.page-card/.seo-card family), hairline border per v171. Two text columns
   on desktop so the block holds the full container width. */
.about-section{position:relative;z-index:2;padding:10px 0 30px}

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

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

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

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

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

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

   BOX IN A BOX. .slot-card, then .sr-card, then .sr-prov: three concentric
   rounded bordered boxes with backgrounds, in a 340px column. Nothing else on
   the site nests panels that deep. The middle one is gone. The rail is now a
   label and its objects sitting straight on the panel, which is what .mlt-strip
   does under the player. */
@media(min-width:1080px){
  .slot-card .about-grid{grid-template-columns:minmax(0,1fr) 388px;column-gap:0;align-items:start}
  .slot-card .about-main{min-width:0}
  .slot-card .tab-content{max-width:none}
  .slot-rail{position:sticky;top:96px;padding:32px 48px 40px 0}
}
/* v190: was display:none, which hid the whole back-to-demo + made-by block from every
   phone and tablet. Same design as desktop, just unstuck and stacked. Source order puts
   the aside after .about-main, so it lands at the end of the read. */
@media(max-width:1079px){
  /* The rail carries its own gutter (see GUTTER above) — .tab-panel pads the prose
     column only, so these must track .tab-panel's 48/24/18 at the same breakpoints
     or the rail sits proud of every other thing in the card. */
  .slot-rail{display:block;position:static;padding:30px 48px 40px;max-width:560px}
}
@media(max-width:768px){ .slot-rail{padding:26px 24px 28px} }
@media(max-width:480px){ .slot-rail{padding:22px 18px 22px} }

.sr-label{display:block;font-family:var(--fd);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:var(--text-3);margin-bottom:11px}
.sr-label-2{margin-top:20px;padding-top:17px;border-top:1px solid var(--hairline)}
.sr-prov{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-md);border:1px solid var(--hairline);background:rgba(19,17,27,0.55);transition:border-color 0.25s,background 0.25s}
.sr-prov:hover{border-color:rgba(245,190,49,0.3);background:var(--bg-card-hover)}
.sr-prov-ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--bg-surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.sr-prov-ic img.us-emoji{width:17px;height:17px}
.sr-prov-t{flex:1 1 auto;min-width:0}
.sr-prov-n{display:block;font-size:13.5px;font-weight:700;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.25s}
.sr-prov:hover .sr-prov-n{color:var(--gold)}
.sr-prov-c{display:block;font-size:11.5px;color:var(--text-3);margin-top:2px}
.sr-arrow{flex:none;width:16px;height:16px;color:var(--text-4);transition:color 0.25s,transform 0.25s}
.sr-prov:hover .sr-arrow{color:var(--gold);transform:translateX(2px)}

/* ═══ STAFF PICKS — v178 editorial 2-up ═══
   Deliberately a different shape from the .g-card grids: horizontal media+body
   cards with a one-line editor note, so the section reads as editorial voice
   rather than a third identical rail. Same surface/hairline/hover language. */

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

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

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

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

/* ═══ FOOTER ═══ */
/* ═══ v177: FOOTER — one centred column, no panels ═══
   Was a 1.5fr/3fr split with three boxed link columns, a search field and the
   goat mark. Now: the Saturn planet (recovered from theme v22), a wordmark, one
   line of copy, two plain link rows, socials, and the legal strip. */
/* v178: the footer fades up from the page sky instead of hard-cutting onto a slab —
   transparent top lets the fixed starfield show through, so it reads as the same sky at dusk */
/* ═══ FOOTER — rebuilt v188 ═══
   v187 gave the footer a star header over a tile grid, the same shape as the
   page sections. On a term page that lands directly under Other Themes, which
   is a star header over a tile grid, so the page ended with two near-identical
   blocks. A footer has to be footer-shaped: link columns, no tiles, no section
   header. Nothing on any template looks like that, so it cannot clone anything.

   SEPARATION IS A CHANGE OF GROUND. v178 faded this seam into the starfield;
   that went too far and the page stopped reading as ending. The slab now sits
   LIGHTER than the page (--bg-deep #0e0b18 -> #16121f) with a hairline at the
   top edge. Lighter says "different surface" where darker just says "more
   night sky", and it gives the brand panel something to sit on, so the panel
   is no longer doing the separating on its own. */
.footer{position:relative;z-index:2;padding:52px 0 26px;background:#16121f;border-top:1px solid var(--hairline-strong);text-align:left}
.footer .container{position:relative;z-index:1}


.footer-socials{display:flex;gap:10px;margin:0;position:relative;z-index:1}
.social-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(150,120,235,0.116);border:1px solid var(--hairline);transition:background 0.25s ease,border-color 0.25s ease,transform 0.25s ease}
.social-icon svg{width:16px;height:16px;color:var(--gold-dim);transition:color 0.25s ease}
.social-icon:hover{background:rgba(150,120,235,0.244);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}

/* v243 footer "two rows": brand strip, main links, site links, legal line */
.ft-top{display:flex;align-items:center;gap:16px 32px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--hairline)}
.ft-lock{display:flex;align-items:center;gap:10px;text-decoration:none}
/* mark ink is 1.88x the wordmark cap height and sits 1px high, so glyph and word read as one unit */
.ft-mark{flex:none;height:32px;width:auto;display:block;position:relative;top:-1px}
.ft-word{font-family:var(--fd);font-size:23px;line-height:1;text-transform:uppercase;color:var(--text-1);white-space:nowrap}
.ft-word span{color:var(--gold)}
.ft-lock:hover .ft-word span{color:var(--gold-bright)}
.ft-tag{margin:0;font-size:13px;line-height:1.6;color:var(--text-3);flex:1 1 300px}
.ft-main{display:flex;flex-wrap:wrap;gap:12px 30px;padding:28px 0 16px}
.ft-main a{font-size:15px;font-weight:600;color:var(--text-1);text-decoration:none;transition:color 0.2s}
.ft-site{display:flex;flex-wrap:wrap;gap:10px 24px;padding-bottom:30px}
.ft-site a{font-size:13px;color:var(--text-3);text-decoration:none;transition:color 0.2s}
.ft-main a:hover,.ft-site a:hover{color:var(--gold)}
.ft-main a:focus-visible,.ft-site a:focus-visible,.ft-lock:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
/* legal line sits left, with room on the right for the back-to-top button */
.ft-bot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:20px 76px 0 0;border-top:1px solid var(--hairline)}
.ft-copy{font-size:12.5px;color:var(--text-4);margin:0}
.ft-dot{font-size:12.5px;color:var(--text-4);opacity:0.5}
.ft-legal{display:inline-flex;align-items:center;gap:8px}
.ft-age{font-family:var(--fd);font-size:11px;color:var(--text-1);border:1.5px solid var(--text-3);border-radius:999px;padding:4px 8px;line-height:1}
.ft-ra{font-size:12.5px;color:var(--text-4)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:960px){
  .nav-links,.nav-search{display:none}
  .games-grid,.similar-grid{grid-template-columns:repeat(3,1fr)}
  .browse-grid{grid-template-columns:repeat(2,1fr)}
  .browse-split{grid-template-columns:1fr;gap:34px}
  .other-grid{grid-template-columns:repeat(3,1fr)}
  .stats-grid{grid-template-columns:repeat(3,1fr)}

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

.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(245,190,49,0.52);box-shadow:none}
.stats-panel .qs-item:hover .qs-val{color:var(--gold)}
.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 .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(150,120,235,0.148);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}

/* 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 */

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

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

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

/* v215: slide art is an <img> now (Imagify wraps it in <picture>) */

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

/* same metrics as .g-badge, held in gold: the hero is the one place gold labels */

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

/* 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:auto;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 */

/* ═══ 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(150,120,235,0.148);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}

/* ═══ 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;position:relative;height:100px;background-size:cover;background-position:center;background-color:#151122}
/* v190: dim + play disc on hover, matching .g-card. .rp-img is a span with a
   background-image, so both layers are pseudo-elements and no markup changes. */
.rp-img::before{content:'';position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 0.3s;background:linear-gradient(to bottom,rgba(8,7,12,0.82) 0%,rgba(8,7,12,0.9) 100%)}
.rp-img::after{content:'';position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;z-index:2;opacity:0;transform:scale(0.82);transition:opacity 0.3s,transform 0.3s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a0a0a'%3E%3Cpolygon points='7 4 19 12 7 20'/%3E%3C/svg%3E") calc(50% + 1px) 50% / 15px no-repeat,linear-gradient(135deg,var(--gold),var(--gold-bright));box-shadow:0 4px 16px rgba(0,0,0,0.5)}
.rp-card:hover .rp-img::before{opacity:1}
.rp-card:hover .rp-img::after{opacity:1;transform:scale(1)}
.rp-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:10px 12px 2px;font-size:13px;font-weight:600;line-height:1.3;color:var(--text-1);overflow:hidden}
.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.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}

/* ── 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 (prefers-reduced-motion: reduce){.logo-mark--goat .us-star,.logo-mark--goat .us-eye{transition:none}}

/* ── v192: byline + team page ─────────────────────────────── */
.us-byline{margin:14px 4px 0;padding-top:12px;border-top:1px solid var(--hairline);font-size:13px;color:var(--text-3);line-height:1.5}
.us-byline a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--hairline-strong)}
.us-byline a:hover{color:var(--text-1);border-bottom-color:var(--gold)}
.us-byline .us-sep{margin:0 6px;opacity:.6}
.us-byline .us-verified{white-space:nowrap}
.us-team{display:grid;gap:20px;margin-top:8px}
.us-member{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;padding:22px 0;border-top:1px solid var(--hairline)}
.us-member:first-child{border-top:0;padding-top:4px}
.us-member-photo{width:96px;height:96px;border-radius:14px;object-fit:cover;background:transparent;border:0;display:block}
.us-member h2{font-family:var(--fd);font-size:20px;margin:2px 0 4px}
.us-member .us-member-role{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.us-member p{color:var(--text-2);margin:0 0 10px}
.us-member .us-member-count{font-size:13px;color:var(--text-3)}
@media (max-width:600px){.us-member{grid-template-columns:64px 1fr;gap:14px}.us-member-photo{width:64px;height:64px}}

/* ── v198: spec list, content-width, weighted values ─────── */
.qs-dash{color:var(--text-3);font-weight:400;margin:0 2px}
/* v211: .us-spec rules moved to the Option E block at the end of this file. */

/* v205: captioned capture frames placed by upload-slot.py (SOP v4.5 images[]) */
.tab-panel figure.us-fig,.slot-card figure.us-fig{margin:1.25rem 0 1.5rem;padding:0}
figure.us-fig img{display:block;width:100%;height:auto;border-radius:8px}
figure.us-fig .us-figcap{margin-top:.5rem;font-size:.85rem;line-height:1.45;color:var(--text-3,#a9a4b8);text-align:left}

/* v207 — sibling comparison table (series section) and longer spec lists */
.us-sib-wrap{overflow-x:auto;margin:0 0 22px}
.us-sib-review{margin:34px 0 6px;padding-top:22px;border-top:1px solid var(--hairline)}
.us-sib-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 10px}
.us-sib-head h3{margin:0;font-size:17px}
.us-sib-head a{font-size:13px;color:var(--gold);text-decoration:none;white-space:nowrap}
.us-sib-review .us-sib td{white-space:normal}
.us-sib-review .us-sib td:first-child{max-width:52%}
.us-sib{width:100%;border-collapse:collapse;font-size:14px}
.us-sib th,.us-sib td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--hairline);white-space:nowrap}
.us-sib th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.us-sib td a{color:inherit;text-decoration:underline;text-decoration-color:var(--hairline)}
.us-sib td a:hover{color:var(--gold)}
.us-sib tr.us-sib-me td{color:var(--gold)}
/* v211: the two-column spec list is gone. A ~165-character Bonus Buy value and a
   two-word Wild value cannot share a balanced column, and CSS columns broke the
   pairing unpredictably. One column, grouped, collapsed. */

/* ══ v211 — OPTION E: stats panel ══════════════════════════════
   The tile grid keeps its look but drops to eight gameplay stats at four across,
   left aligned. Provider / Studio / Released moved to .us-metabar above it (see
   single-slot.php) — Studio is the field that used to push the grid to eleven
   tiles and strand one on a row of its own. The fourteen spec rows sit in three
   <details> groups, closed by default: native disclosure, no JS, and every row is
   in the HTML whether open or shut. */
.us-metabar{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);font-weight:600;margin:0 2px 15px}
.us-metabar i{font-style:normal;color:var(--text-4);font-weight:700;margin-right:6px}
.us-metabar .us-sep{margin:0 8px;opacity:.5}
.stats-panel .stats-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px}
.stats-panel .stats-grid .qs-item{flex:1 1 calc((100% - 30px) / 4)} /* v217: grow 1 so a short last row fills the width (7 tiles = 4+3, no orphan) */
.us-acc{margin-top:22px}
.us-acc-item{border-top:1px solid var(--hairline)}
.us-acc-item:last-child{border-bottom:1px solid var(--hairline)}
.us-acc-head{display:flex;align-items:center;gap:12px;padding:15px 4px;cursor:pointer;list-style:none}
.us-acc-head::-webkit-details-marker{display:none}
.us-acc-head::marker{content:''}
.us-acc-head b{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-1);transition:color .2s}
.us-acc-head:hover b,.us-acc-head:hover .us-chev{color:var(--gold)}
.us-acc-head:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.us-chev{margin-left:auto;display:flex;align-items:center;color:var(--text-3);transition:transform .2s,color .2s}
.us-acc-item[open] > .us-acc-head b,.us-acc-item[open] > .us-acc-head .us-chev{color:var(--gold)}
.us-acc-item[open] > .us-acc-head .us-chev{transform:rotate(90deg)}
.us-acc-body{padding:0 4px 18px}
/* one column: a 150px label and a measure-capped value, no row rules — the label
   column does the tracking, and the panel was carrying far too many hairlines. */
.us-spec{display:block;max-width:1040px;margin:0;padding:0}
.us-spec-row{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:baseline;padding:10px 0}
.us-spec dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:0}
.us-spec dd{margin:0;font-size:14px;font-weight:600;color:var(--text-1);line-height:1.55;font-variant-numeric:tabular-nums}
/* the accordion closes itself, so the tag row drops its own rule — otherwise the two
   sit 20px apart and read as a double underline. A page with no spec rows has no
   .us-acc, so the tag row keeps its rule there. */
.stats-panel .us-acc + .tag-row{border-top:0;margin-top:20px;padding-top:0}
@media(max-width:900px){.stats-panel .stats-grid .qs-item{flex:1 1 calc((100% - 20px) / 3)}}
@media(max-width:640px){
  /* the basis must match the gap or two tiles overflow the row and wrap to one each */
  .stats-panel .stats-grid{gap:8px}
  .stats-panel .stats-grid .qs-item{flex:1 1 calc((100% - 8px) / 2);padding:12px 10px}
  .us-spec-row{grid-template-columns:1fr;gap:3px;padding:9px 0}
  .us-acc-head{padding:14px 2px}
  .us-acc-head b{font-size:11.5px;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){.us-chev{transition:none}}

/* ═══ v217 MOBILE PASS ═══ */
/* v217: short count label for the half-width phone tile */
.bcn-short{display:none}
/* Homepage Explore: 2x3 compact grid on phones (was 6 full-width rows, 614px) */
@media(max-width:760px){
  .hero .browse-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hero .b-card{grid-template-columns:auto minmax(0,1fr);column-gap:10px;padding:11px 12px}
  .hero .b-card-icon{width:38px;height:38px;font-size:19px;border-radius:10px}
  .hero .b-card-name{font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero .b-card-num{font-size:12px;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero .b-card-count,.hero .b-card-arrow{display:none}
  .hero .bcn-long{display:none}
  .hero .bcn-short{display:inline}
}
/* Homepage trust chips: 2x2 plain icon+text on phones (was 3 rows of pills, 107px) */

/* Game tabs: grid under 430px so FAQ is never cut off. 4 tabs = 2x2, 2-3 tabs = one row */
@media(max-width:430px){
  .tabs[class*="tabs-n"]{display:grid;gap:6px;overflow:visible}
  .tabs.tabs-n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs.tabs-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tabs.tabs-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs.tabs-n1{grid-template-columns:1fr}
  .tabs[class*="tabs-n"] .tab-btn{padding:10px 6px;text-align:center;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Game page top spacing on desktop. v242: the breadcrumb is back on the site-wide 32px
   (was 10px, cut so the player toolbar fit a 900px window; at 906px it still started below
   the fold). 14 of the 22px are paid back under the crumbs, title and stats: net +8px. Mobile untouched. */
@media(min-width:769px){
  .single-slot .game-hero{padding-top:6px}
  /* v231: stats always on their own line under the H1 (was beside it, v230). With the
     studio and rating added the line is ~630px, so ~15% of titles wrapped it anyway and
     the site had two headers; stacked, every page is the same. */
  .game-hero > .container{display:block;padding-bottom:18px}
  .game-hero .game-title-row{margin-bottom:8px}
  .game-hero .game-quick-stats{margin-bottom:0;gap:8px 16px;font-size:14px}
  .game-hero .gqs-label{font-size:11.5px;letter-spacing:0.1em;margin-right:6px}
  .game-hero .gqs-val{font-size:14.5px}
}

/* ═══ v218 DESIGN POLISH ═══ */
/* Explore tiles on desktop/tablet: short horizontal cards (icon | text | chevron) instead of tall mostly-empty boxes */
@media(min-width:761px){
  .hero .b-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px;align-items:center;padding:16px 18px}
  .hero .b-card-icon{margin-bottom:0;width:48px;height:48px;font-size:24px}
  .hero .b-card-name{font-size:15px;margin-bottom:2px}
  .hero .b-card-count{font-size:12px}
  .hero .b-card-arrow{position:static;transform:none}
  .hero .b-card:hover .b-card-arrow{transform:translateX(2px)}
}
/* Byline under the H1 (moved up from the bottom of the stats panel). Date stays in .us-verified. */

/* ═══ v219 ═══ */
/* Game image: webp uploads are not wrapped in <picture> by Imagify, so the class sits on the
   <img> itself and was stretched to the frame. Crop it the same way as the wrapped version. */
img.demo-placeholder-img{inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);object-fit:cover;object-position:center}
/* Byline as the heading line of the stats panel */
.stats-panel .us-byline{margin:0 2px 14px;padding:0 0 14px;border:0;border-bottom:1px solid var(--hairline);font-size:13px;line-height:1.5;color:var(--text-2)}
@media(max-width:560px){.stats-panel .us-byline .us-sep{display:none}.stats-panel .us-byline .us-verified{display:block;color:var(--text-3)}}
/* Brand mark: Saturn is wider than the old star; keep the header lockup tidy */
.logo-mark svg{transform-origin:40% 60%}
.logo:hover .logo-mark svg,.logo:focus-visible .logo-mark svg{transform:rotate(-8deg)}

/* ═══ v221: spec-sheet band + provider cover tiles ═══ */
/* One band, faint vertical dividers only; columns chosen in PHP (sb-c4/5/6). The byline
   loses its rule because the band's own border now does that job. */
.stats-panel .us-byline{border-bottom:0;padding-bottom:0;margin-bottom:14px}
.spec-band{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:6px;background:rgba(11,10,16,0.5);border:1px solid rgba(170,162,190,0.1);border-radius:var(--r-md);padding:8px 0}
.spec-band.sb-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.spec-band.sb-c6{grid-template-columns:repeat(6,minmax(0,1fr))}
.sb-cell{display:flex;flex-direction:column;gap:5px;padding:10px 20px;border-left:1px solid rgba(170,162,190,0.08);min-width:0}
.sb-c4 .sb-cell:nth-child(4n+1),.sb-c5 .sb-cell:nth-child(5n+1),.sb-c6 .sb-cell:nth-child(6n+1){border-left:0}
.sb-label{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.sb-val{font-size:16px;font-weight:700;color:var(--text-1);line-height:1.3;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.sb-val a{color:var(--text-1);border-bottom:1px solid var(--hairline-strong);transition:color .2s,border-color .2s}
.sb-val a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.sb-yes{color:#7fd3a0;display:inline-flex;align-items:center}
.stats-panel .spec-band + .us-acc{margin-top:18px}
.stats-panel .tag-row{border-top:0;margin-top:20px;padding-top:0}
@media(max-width:900px){
  .spec-band.sb-c5,.spec-band.sb-c6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sb-c5 .sb-cell,.sb-c6 .sb-cell{border-left:1px solid rgba(170,162,190,0.08)}
  .sb-c5 .sb-cell:nth-child(3n+1),.sb-c6 .sb-cell:nth-child(3n+1){border-left:0}
}
@media(max-width:560px){
  .spec-band.sb-c4,.spec-band.sb-c5,.spec-band.sb-c6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-band .sb-cell{border-left:1px solid rgba(170,162,190,0.08);padding:9px 14px}
  .spec-band .sb-cell:nth-child(2n+1){border-left:0}
  .sb-val{font-size:15px}
}
/* Homepage Browse by Provider: cover tiles (top 6 by traffic, >=5 demos) */
.prov-covers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:16px}
.prov-cover{position:relative;display:block;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline-strong);background:linear-gradient(135deg,#1e1930,#131020);box-shadow:0 5px 12px rgba(0,0,0,0.5);transition:transform .3s,border-color .3s,box-shadow .3s}
.prov-cover picture{display:block;width:100%;height:100%}
.prov-cover img{display:block;width:100%;height:100%;object-fit:cover}
.pc-ov{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;padding:28px 12px 10px;background:linear-gradient(to top,rgba(8,6,14,.95),rgba(8,6,14,.72) 55%,transparent)}
.pc-name{font-size:14px;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.pc-count{font-size:12px;color:var(--text-2)}
.prov-cover:hover{transform:translateY(-3px);border-color:rgba(245,190,49,0.52);box-shadow:0 12px 28px rgba(0,0,0,0.5)}
.prov-cover:hover .pc-name{color:var(--gold)}
.prov-more-chips .chip{font-size:12.5px;padding:6px 14px}
@media(max-width:1100px){.prov-covers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.prov-covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media(prefers-reduced-motion:reduce){.prov-cover,.prov-cover:hover{transition:none;transform:none}}

/* ═══ v224: skip link + main landmark ═══ */
.skip-link{position:absolute;left:12px;top:-60px;z-index:10000;padding:10px 16px;border-radius:10px;background:var(--gold);color:#0a0a0a;font-weight:700;font-size:14px;transition:top .15s}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
main#main{display:block}
main#main:focus{outline:none}
.tab-panel:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}

/* ═══ v227: DEMO PLAYER ═══════════════════════════════════════════════════════
   Warm dim, colour glow, image-until-loaded boot, fullscreen top/bottom bars,
   break screen, report toast, and the rail tile as a miniature of the player.
   The warm dim (26,14,4) replaces the cool near-black (7,7,11) at the SAME 42%
   the player has always used, on the player and the rail tile alike. */

/* Warm dim + warm vignette */
.demo-placeholder::before{background:rgba(26,14,4,0.42)}
.demo-placeholder::after{background:radial-gradient(ellipse at center,transparent 45%,rgba(16,9,3,0.2) 78%,rgba(16,9,3,0.42) 100%),linear-gradient(180deg,rgba(16,9,3,0.18) 0%,transparent 12%),linear-gradient(0deg,rgba(16,9,3,0.32) 0%,transparent 20%)} /* v231: vignette lightened; the 42% dim is unchanged */

/* Colour glow: a blurred copy of the game image the page already downloaded.
   Desktop only — a big blur is expensive to paint on low-end Android. */
.demo-wrapper.has-glow::before{content:'';position:absolute;inset:-26px -30px 34px;z-index:-1;background:var(--us-glow) center/cover no-repeat;filter:blur(56px) saturate(1.5);opacity:0.32;border-radius:40px;pointer-events:none}
.demo-wrapper.fullscreen::before{display:none}
@media(max-width:768px){.demo-wrapper.has-glow::before{display:none}}

/* Boot: the frame loads invisibly under the game image, then fades in */
.demo-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5;opacity:1;transition:opacity 0.35s ease}
.demo-container.is-booting .demo-frame{opacity:0;pointer-events:none}
.demo-container.is-live .demo-placeholder{opacity:0;pointer-events:none}
.demo-play-lockup.is-loading{pointer-events:none}
.demo-play-lockup.is-loading .dpl-ring{animation-duration:1.1s}
.demo-slow{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 28px);padding:10px 14px;border-radius:12px;background:rgba(14,13,19,0.94);border:1px solid var(--hairline-strong);box-shadow:0 12px 30px rgba(0,0,0,0.55);font-size:13.5px;color:var(--text-2)}
.demo-slow[hidden]{display:none}
.demo-slow-t{font-weight:700;color:var(--text-1)}
.demo-slow-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.demo-slow-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;border:1px solid var(--hairline-strong);background:rgba(36,29,58,0.6);color:var(--text-1);font:700 13px var(--fb);cursor:pointer;white-space:nowrap}
.demo-slow-btn svg{width:15px;height:15px;color:var(--gold);flex:none}
.demo-slow-btn:hover{border-color:rgba(245,190,49,0.45)}
.demo-slow-link{background:none;border:0;padding:6px 2px;color:var(--text-3);font:600 13px var(--fb);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.demo-slow-link:hover{color:var(--text-1)}

/* Page toolbar by state: Refresh only once a game is running; Fullscreen reads
   "Play Fullscreen" before it (it starts the game too); Not loading? only while playing. */
body:not(.us-playing) #demoRefreshBtn{display:none}
.fs-lbl-run{display:none}
body.us-playing .fs-lbl-pre{display:none}
body.us-playing .fs-lbl-run{display:inline}
.demo-tb-link{display:inline-flex;align-items:center;gap:7px;padding:8px 6px;margin-right:4px;background:none;border:0;color:var(--text-3);font:600 13px var(--fb);cursor:pointer;white-space:nowrap}
.demo-tb-link svg{width:15px;height:15px;flex:none}
.demo-tb-link:hover{color:var(--text-1)}
.demo-tb-link .dpr-t{text-decoration:underline;text-underline-offset:3px}
body:not(.us-playing) .demo-tb-link{display:none}
.js-demo-report.is-reported,.js-demo-report.is-reported svg{color:#6fd39a;cursor:default}
.js-demo-report.is-reported .dpr-t{text-decoration:none}

/* ── Fullscreen bars ── */
.dfs-bar{display:none}
.demo-wrapper.fullscreen .dfs-bar{display:flex}
.demo-wrapper.fullscreen .demo-toolbar{display:none}
.demo-wrapper.fullscreen .demo-fullscreen-close{display:none}
.demo-wrapper.fullscreen .demo-container{min-height:0}
.dfs-bar{flex:none;align-items:center;gap:12px;position:relative;z-index:3;background:linear-gradient(180deg,#191527,#110e1b)}
.dfs-top{min-height:52px;padding:6px 16px;padding-top:max(6px,env(safe-area-inset-top));border-bottom:1px solid rgba(245,190,49,0.22)}
.dfs-bot{min-height:56px;padding:8px 16px;padding-bottom:max(8px,env(safe-area-inset-bottom));border-top:1px solid rgba(245,190,49,0.22);justify-content:space-between}
.dfs-id{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.dfs-mark{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#fdd55a,#e8a020);display:flex;align-items:center;justify-content:center}
.dfs-mark svg{width:10px;height:10px;color:#1a1405;margin-left:2px}
.dfs-names{display:flex;flex-direction:column;min-width:0}
.dfs-n{font-family:var(--fd);font-size:13px;text-transform:uppercase;letter-spacing:0.04em;line-height:1.25;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfs-p{font-size:11.5px;line-height:1.3;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfs-ad{display:flex;justify-content:center;align-items:center;min-width:0;overflow:hidden}
.dfs-ad-top{flex:0 1 728px;max-height:90px}
.dfs-ad-bot{display:none}
.dfs-rm{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:9px;background:#1f8a4c;color:#fff;font:700 13px var(--fb);white-space:nowrap;text-decoration:none;transition:background 0.2s}
.dfs-rm:hover{background:#249957;color:#fff}
.dfs-rm-bot{display:none}
.dfs-exit,.dfs-b{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 13px;min-height:38px;border-radius:9px;border:1px solid var(--hairline-strong);background:rgba(19,17,27,0.6);color:var(--text-1);font:700 13px var(--fb);white-space:nowrap;cursor:pointer;transition:border-color 0.2s,color 0.2s}
.dfs-exit svg{width:14px;height:14px;flex:none}
.dfs-b svg{width:15px;height:15px;color:var(--gold);flex:none}
.dfs-exit:hover,.dfs-b:hover{border-color:rgba(245,190,49,0.45)}
.dfs-mid{display:flex;align-items:center;gap:8px}
.dfs-rep .dpr-t{overflow:hidden;text-overflow:ellipsis}

@media(max-width:768px){
  .dfs-top{padding-left:10px;padding-right:10px}
  .dfs-bot{padding-left:10px;padding-right:10px;flex-wrap:wrap;gap:8px}
  .dfs-n{font-size:12px;letter-spacing:0}
  .dfs-ad-top,.dfs-rm-top,.dfs-rnd,.dfs-exit .dfs-lbl,.dfs-mid .dfs-lbl{display:none}
  .dfs-exit{min-width:40px;min-height:40px;padding:0 10px}
  .dfs-b{min-width:44px;min-height:44px;padding:0 12px}
  .dfs-ad-bot{display:flex;flex-basis:100%;order:-2}
  .dfs-rm-bot{display:flex;flex-basis:100%;order:-1;min-height:46px;font-size:14px;letter-spacing:0.02em}
}
/* Phone on its side: ~390px tall, so both bars go and a floating Exit stays */
@media(orientation:landscape) and (max-height:500px){
  .demo-wrapper.fullscreen .dfs-bar{display:none}
  .demo-wrapper.fullscreen .demo-fullscreen-close{display:flex}
}

/* ── Break screen ── */
.demo-break{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;text-align:center;overflow:auto;background:rgba(26,14,4,0.72);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.demo-break[hidden]{display:none}
.db-k{font-family:var(--fd);font-size:15px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold)}
.db-s{margin-top:-6px;font-size:13.5px;color:#d9d1e4}
.demo-play-lockup.db-resume{padding:10px 26px 10px 10px;gap:12px;border-radius:16px}
.db-resume .dpl-disc{width:48px;height:48px}
.db-resume .dpl-label{font-size:17px}
.db-ad{max-width:100%;display:flex;justify-content:center}
.db-x{font-size:12.5px;color:var(--text-3)}
.db-link{background:none;border:0;padding:0;color:var(--text-2);font:600 12.5px var(--fb);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.db-link:hover{color:var(--text-1)}

/* ── Report toast ── */
.demo-toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 32px);padding:12px 14px 12px 16px;border-radius:12px;background:rgba(14,13,19,0.97);border:1px solid var(--hairline-strong);box-shadow:0 14px 34px rgba(0,0,0,0.6);font-size:13.5px;line-height:1.45;color:var(--text-2)}
.demo-toast[hidden]{display:none}
.dt-t{min-width:0}
.dt-t b{display:block;color:var(--text-1);font-size:14px}
.demo-tb-btn.dt-btn{flex:none;padding:8px 13px;font-size:13px}
@media(max-width:768px){
  .demo-toast{flex-direction:column;align-items:stretch;gap:10px;width:calc(100% - 24px)}
  .demo-tb-btn.dt-btn{justify-content:center;font-size:13px;gap:8px;padding:10px}
}

/* ── Rail: Back to the demo = a miniature of the player ── */
.sr-tile{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;isolation:isolate;background:linear-gradient(160deg,#1e1930,#131020 40%,#0d0b14);box-shadow:0 10px 24px rgba(0,0,0,0.55),0 2px 6px rgba(0,0,0,0.4)}
.sr-tile-img{position:absolute;inset:-4px;background-size:cover;background-position:center;transition:transform 0.5s cubic-bezier(0.19,1,0.22,1)}
.sr-tile::before{content:'';position:absolute;inset:0;z-index:1;background:rgba(26,14,4,0.42);transition:background 0.3s}
.sr-tile-off::before{background:none}
.sr-tile:hover .sr-tile-img{transform:scale(1.04)}
.sr-tile:hover::before{background:rgba(26,14,4,0.29)}
.sr-tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr-lk{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;background:rgba(14,13,19,0.97);border:1.5px solid rgba(245,190,49,0.65);border-radius:13px;padding:7px 18px 7px 7px;box-shadow:0 14px 34px rgba(0,0,0,0.65),0 3px 10px rgba(0,0,0,0.5),0 0 28px rgba(245,190,49,0.2);transition:transform 0.25s,border-color 0.25s,box-shadow 0.25s}
.sr-tile:hover .sr-lk{transform:translate(-50%,calc(-50% - 2px)) scale(1.03);border-color:rgba(245,190,49,0.95);box-shadow:0 18px 40px rgba(0,0,0,0.7),0 0 40px rgba(245,190,49,0.3)}
.sr-disc{position:relative;flex:none;width:38px;height:38px}
.sr-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(245,190,49,0.55);animation:dplRing 3s ease-out infinite}
.sr-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 16px rgba(245,190,49,0.45),inset 0 -2px 5px rgba(140,90,10,0.4)}
.sr-core svg{width:40%;height:40%;color:#1a1405;margin-left:7%}
.sr-lk-t{display:flex;flex-direction:column}
.sr-lk-l{font-family:var(--fd);font-size:13.5px;letter-spacing:0.11em;text-transform:uppercase;color:#fff;line-height:1.2}
.sr-lk-s{margin-top:2px;font-size:10.5px;letter-spacing:0.04em;color:#bab2c8;font-weight:500}

@media(prefers-reduced-motion:reduce){.sr-ring{animation:none;opacity:0}.sr-tile-img,.sr-lk{transition:none}.demo-frame{transition:none}}

/* ═══ v231: studio + rating in the stats line ═══ */
.gqs-prov{color:var(--text-1);font-weight:700;font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--hairline-strong);padding-bottom:1px;transition:color 0.2s,border-color 0.2s}
a.gqs-prov:hover{color:var(--gold);border-bottom-color:var(--gold)}
.gqs-rate{display:inline-flex;align-items:center;gap:5px;color:var(--gold);font-weight:700;font-size:14.5px}
.gqs-rate svg{width:14px;height:14px;flex:none}
/* Phones: studio + rating on the first line, the three stats on the second. */
@media(max-width:768px){
  .game-hero .game-quick-stats{gap:6px 14px;margin-top:-4px;margin-bottom:16px;font-size:13px}
  .game-hero .gqs-label{font-size:10.5px;margin-right:4px}
  .gqs-prov,.gqs-rate{font-size:13.5px}
  .game-hero .game-quick-stats.has-id .gqs-item{order:2}
  .game-hero .game-quick-stats.has-id .gqs-id{order:0}
  .game-hero .game-quick-stats.has-id::after{content:'';order:1;flex-basis:100%;height:0}
}

/* ═══ v232: ONE SPACING SYSTEM ═══════════════════════════════════════════════
   Measured 27 Sep 2026 across 19 templates: section-to-section gaps ran 57–158px,
   hero-to-content 28–110px, last-section-to-footer 69–133px. The main cause was the
   faint hr.g-divider (61px each) used on some boundaries and not others. Dividers are
   gone and every template now uses three values:
     --sp-section  between major sections        96 desktop / 64 phone
     --sp-hero     archive hero -> first control 40 / 28
     --sp-foot     last section -> footer        96 / 64
   Rules are anchored on main#main's direct children so older per-section padding
   rules (games 40, browse/other/similar 44, stats 44, content 56 ...) no longer add up. */
:root{--sp-section:96px;--sp-hero:40px;--sp-foot:64px;--sp-tight:18px}
@media(max-width:768px){:root{--sp-section:64px;--sp-hero:28px;--sp-foot:48px}}
/* --sp-foot is main's bottom padding; the footer adds its own 52px (38 phone) above its
   first line, so last content -> first footer content reads 96 / 64. */
.g-divider{display:none}
main#main > :is(.games-section,.browse-section,.providers-bar,.about-section,.other-section,.similar-section,.stats-section,.content-section){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}
main#main > * + :is(.games-section,.browse-section,.providers-bar,.about-section,.other-section,.similar-section,.stats-section,.content-section){margin-top:var(--sp-section)}
/* .other-section's header sits 13px lower inside its box than the others */
main#main > * + .other-section{margin-top:calc(var(--sp-section) - 13px)}
main#main > .hero{padding-bottom:0}
main#main > .cat-hero{padding-bottom:0}
main#main > .cat-hero + *,main#main > .cat-hero + .g-divider + *{margin-top:var(--sp-hero)}
main#main > .cat-hero + section.container + .games-section,
main#main > .cat-hero + .g-divider + section.container + .games-section{margin-top:var(--sp-tight)}
main#main:has(> :is(.games-section,.browse-section,.other-section,.similar-section,.about-section,.page-body)){padding-bottom:var(--sp-foot)}
/* Hero intro: "Read more" sits the same distance under the text on every template
   (a <p> first child kept its bottom margin, so provider pages sat ~12px lower). */
.cat-desc-wrap .cat-desc:not(.expanded)>*:first-child{margin-bottom:0}
/* Highest RTP has a visible intro paragraph AND long-form copy; the long copy starts with a
   heading, which the 3-line clamp left stranded above "Read more". Collapse it fully. */
.cat-desc-more{margin-top:6px}
.cat-desc-more .cat-desc:not(.expanded)>*{display:none!important}
/* Hero counters (New Releases, All Providers/Themes/Features) sat 0px under the description */
.cat-info .cat-desc + .cat-meta,.cat-info .cat-desc-wrap + .cat-meta{margin-top:16px}

/* ═══ v233 ═══ */
/* Footer edge: v232 put the footer's border 44px below the last section, tighter than the
   96px between sections, so the content/footer boundary was the smallest break on the page.
   --sp-foot is now 64 (48 phone): the footer starts a touch more clearly than a section. */
/* Home sub-lines under the half-width Theme/Feature headers (their header margin is 16, not 24) */
.browse-half .sec-sub{margin-top:-8px;margin-bottom:16px}
/* Plain pages: breadcrumb + archive hero H1 (us_page_hero), then the card */
.page-body{position:relative;z-index:2}
.cat-hero-page .cat-title-row{margin-bottom:0}
/* 404 */
.nf-hero{position:relative;z-index:2;padding:calc(var(--nh) + 72px) 0 0;text-align:center}
.nf-star{margin-bottom:16px;color:var(--gold)}
.nf-star svg{filter:drop-shadow(0 0 18px rgba(245,190,49,0.35))}
.nf-h1{font-family:var(--fd);font-size:clamp(36px,6vw,56px);text-transform:uppercase;line-height:1.05;margin-bottom:14px}
.nf-p{font-size:16px;color:var(--text-2);max-width:480px;margin:0 auto 28px}
.nf-search{margin:0 auto 24px}
.nf-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:768px){.nf-hero{padding-top:calc(var(--nh) + 44px)}.nf-btns a{flex:1 1 100%;justify-content:center;max-width:360px}}

/* ═══ v234: MOBILE MENU — search first, most played, browse tiles ═══
   Opens with a "full drop": the panel slides down from under the header (360ms,
   decelerating) and slides back up faster (220ms). It is always in the DOM and
   hidden with visibility + inert, so it can animate both ways. */
.nav-mob{display:none;align-items:center;gap:6px;flex-shrink:0}
@media(max-width:960px){.nav-mob{display:flex}}
.nav-ib{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;padding:0;border-radius:12px;border:1px solid transparent;background:none;color:var(--gold);cursor:pointer;transition:background 0.2s,border-color 0.2s}
.nav-ib svg{width:22px;height:22px;display:block}
.nav-ib:hover{color:var(--gold-bright)}
.nav-ib.burger{background:rgba(150,120,235,0.116);border-color:var(--hairline)}
.nav-ib:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.burger-swap{position:relative;width:22px;height:22px;display:block}
.burger-swap > span{position:absolute;inset:0;display:block;transition:opacity 0.16s,transform 0.24s cubic-bezier(0.22,1,0.36,1)}
.burger-swap svg{width:22px;height:22px;display:block}
.burger-swap .bx{opacity:0;transform:rotate(-45deg) scale(0.8)}
.burger[aria-expanded="true"] .burger-swap .bm{opacity:0;transform:rotate(45deg) scale(0.8)}
.burger[aria-expanded="true"] .burger-swap .bx{opacity:1;transform:none}

.mobile-overlay{position:fixed;top:var(--nh);left:0;right:0;bottom:0;z-index:99;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:radial-gradient(circle at 15% 8%,rgba(150,120,235,0.18),transparent 40%),radial-gradient(circle at 90% 55%,rgba(74,144,247,0.10),transparent 45%),var(--bg-deep);
  visibility:hidden;transform:translateY(-100%);
  transition:transform 0.22s cubic-bezier(0.4,0,1,1),visibility 0s linear 0.22s}
.mobile-overlay.open{visibility:visible;transform:none;transition:transform 0.36s cubic-bezier(0.32,0.72,0,1),visibility 0s}
@media(min-width:961px){.mobile-overlay{display:none}}
html.mob-open,html.mob-open body{overflow:hidden}

.mob-inner{max-width:480px;margin:0 auto;padding:16px 16px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:20px}
.mob-lbl{font-family:var(--fd);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3)}
.mob-top{display:flex;gap:8px}
.mob-search{flex:1;min-width:0;position:relative}
.mob-search form{display:block}
.mob-search input{width:100%;height:50px;padding:0 14px 0 44px;background:rgba(150,120,235,0.084);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,box-shadow 0.2s;-webkit-appearance:none;appearance:none}
.mob-search input:focus{border-color:var(--gold);background:rgba(150,120,235,0.116);box-shadow:0 0 0 4px rgba(245,190,49,0.1)}
.mob-search input::placeholder{color:var(--text-2)}
.mob-search > svg{position:absolute;left:15px;top:25px;transform:translateY(-50%);width:18px;height:18px;color:var(--gold);pointer-events:none;z-index:1}

@keyframes mobRoll{to{transform:rotate(360deg)}}

.mob-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:-4px -16px 0;padding:0 16px}
.mob-chips::-webkit-scrollbar{display:none}
.mob-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:12px;background:var(--bg-surface);border:1px solid rgba(170,162,190,0.06);font-size:13.5px;font-weight:600;color:var(--text-2);white-space:nowrap;transition:color 0.2s,border-color 0.2s}
.mob-chip svg{width:14px;height:14px;color:var(--gold-dim);flex-shrink:0}
.mob-chip:hover{color:var(--text-1);border-color:rgba(245,190,49,0.25)}

.mob-sec{display:flex;flex-direction:column;gap:6px}
.mob-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.mob-lists{display:flex;gap:14px}
.mob-lists a{font-size:13px;font-weight:700;color:var(--gold)}
.mob-lists a:hover{color:var(--gold-bright)}
.mob-hot{display:flex;align-items:center;gap:12px;padding:6px;margin:0 -6px;border-radius:12px;transition:background 0.2s}
.mob-hot:hover{background:rgba(150,120,235,0.1)}
.mob-hot img,.mob-hot-ph{width:72px;height:50px;border-radius:9px;object-fit:cover;flex-shrink:0;background:var(--bg-card);border:1px solid var(--hairline)}
.mob-hot-t{flex:1;min-width:0;font-size:15px;font-weight:700;line-height:1.3;color:var(--text-1)}
.mob-hot-tag{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(245,190,49,0.3);border-radius:7px;padding:4px 8px;flex-shrink:0}

.mob-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mob-tile{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:92px;padding:13px 14px;border-radius:16px;background:var(--bg-card);border:1px solid var(--hairline);transition:border-color 0.2s,background 0.2s}
.mob-tile:hover{border-color:rgba(245,190,49,0.3);background:var(--bg-card-hover)}
.mob-tile-top{display:flex;justify-content:space-between;align-items:flex-start}
.mob-tile-top svg{width:22px;height:22px;color:var(--gold)}
.mob-tile-n{font-family:var(--fd);font-size:20px;line-height:1;color:var(--text-1);font-variant-numeric:tabular-nums}
.mob-tile-l{font-family:var(--fd);font-size:14px;letter-spacing:0.03em;text-transform:uppercase;line-height:1.1;color:var(--text-1)}
.mob-tile.hi{background:linear-gradient(160deg,rgba(150,120,235,0.276),rgba(150,120,235,0.068) 70%),var(--bg-card);border-color:rgba(245,190,49,0.35)}
.mob-tile.hi .mob-tile-n{color:var(--gold)}

/* header fit on small phones: two 44px buttons need the room the burger alone didn't */
@media(max-width:480px){
  .nav-inner{padding:0 14px 0 16px;gap:12px}
  .logo{gap:9px}
  .logo-text{font-size:20px}
  .logo-mark svg{height:29px}
}
@media(max-width:359px){
  .logo-text{font-size:17px}
  .logo-mark svg{height:25px}
  #mobSearchBtn{display:none} /* 320px phones: the menu's own search box is one tap away */
}
@media (prefers-reduced-motion: reduce){
  .mobile-overlay,.mobile-overlay.open{transform:none;transition:opacity 0.15s,visibility 0s linear 0.15s;opacity:0}
  .mobile-overlay.open{opacity:1;transition:opacity 0.15s,visibility 0s}
  .burger-swap > span{transition:opacity 0.15s}
  
}

/* ═══ v235: HOMEPAGE "PICK A LIST" HERO (mockup C1) ═══
   Title band, then five lists behind tabs (sidebar on desktop, a sideways pill
   row on tablets and phones). Every card carries its list's number as a chip. */
.hero.hh{padding-top:calc(var(--nh) + 36px)}
.hh-band{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:28px}
.hh-intro{min-width:0}
.hero .hh-h1{font-family:var(--fd);font-weight:400;font-size:clamp(27px,3.4vw,40px);line-height:1.05;letter-spacing:-0.01em;text-transform:uppercase;margin:0;max-width:none;color:var(--text-1)}
.hh-sub{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--text-2);max-width:56ch}
.hh-search{position:relative;display:flex;align-items:center;gap:10px;flex:0 0 420px;height:52px;padding:0 16px;border-radius:12px;background:#0c0916;border:1px solid var(--hairline-strong);transition:border-color 0.2s,box-shadow 0.2s}
.hh-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(245,190,49,0.1)}
.hh-search svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}
.hh-search input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:var(--text-1);font-family:var(--fb);font-size:15px;-webkit-appearance:none;appearance:none}
.hh-search input::placeholder{color:var(--text-3)}
.hh-search .us-ac{top:calc(100% + 8px)}

.hh-lists{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start;margin-bottom:calc(var(--sp-section) * 0.75)}
.hh-tabs{display:flex;flex-direction:column;gap:4px}
.hh-tab{display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;border-radius:12px;border:1px solid transparent;background:none;font-family:var(--fb);font-size:15px;font-weight:700;color:var(--text-2);text-align:left;cursor:pointer;transition:color 0.2s,background 0.2s,border-color 0.2s}
.hh-tab svg{width:18px;height:18px;color:var(--text-4);flex-shrink:0;transition:color 0.2s}
.hh-tab small{margin-left:auto;font-size:12px;font-weight:600;color:var(--text-4);font-variant-numeric:tabular-nums}
.hh-tab-l{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-tab:hover{color:var(--text-1)}
.hh-tab.is-on{background:rgba(150,120,235,0.148);border-color:rgba(245,190,49,0.3);color:var(--gold)}
.hh-tab.is-on svg{color:var(--gold)}
.hh-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hh-surprise{margin-top:10px;height:auto;padding:11px 14px;border:1px dashed rgba(245,190,49,0.32);color:var(--text-1)}
.hh-surprise svg{color:var(--gold)}
.hh-surprise:hover{border-style:solid;border-color:rgba(245,190,49,0.5);background:rgba(150,120,235,0.1)}
.hh-surprise .hh-tab-l{display:flex;flex-direction:column;gap:1px}
.hh-surprise-sub{font-size:12px;font-weight:600;color:var(--text-3)}
/* v240: Top studios group — label + divider, two-letter marks in the icon slot (grey, gold when selected) */
.hh-group{margin:10px 0 2px;padding:14px 14px 4px;border-top:1px solid var(--hairline-strong);font-size:11px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--text-4)}
.hh-mono{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;border-radius:6px;border:1.5px solid currentColor;color:var(--text-4);font-family:var(--fb);font-size:8.5px;font-weight:800;letter-spacing:0.02em;line-height:1;transition:color 0.2s}
.hh-tab.is-on .hh-mono{color:var(--gold)}
.js-random-slot.is-loading{opacity:0.6;pointer-events:none}

.hh-panel[hidden]{display:none}
/* v243: descriptive line removed; tabs and the first card row start level, "All …" sits under the grid */
.hh-foot{display:flex;justify-content:flex-end;margin-top:16px}
.hh-all{font-size:13px;font-weight:700;color:var(--gold);white-space:nowrap}
.hh-all:hover{color:var(--gold-bright)}
.hh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hh-chip{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:8px;background:rgba(10,8,19,0.86);border:1px solid rgba(245,190,49,0.4);color:var(--gold);font-family:var(--fd);font-size:13px;letter-spacing:0.02em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.hh-chip--rank{background:var(--gold);border-color:transparent;color:#140f04}

@media(max-width:960px){
  .hh-search{display:none} /* the header's search button covers phones and tablets */
  .hh-band{margin-bottom:16px}
  .hh-lists{grid-template-columns:minmax(0,1fr);gap:14px}
  .hh-tabs{flex-direction:row;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
  .hh-tabs::-webkit-scrollbar{display:none}
  .hh-tab{flex-shrink:0;height:40px;padding:0 14px;gap:7px;border-radius:11px;font-size:13.5px;background:var(--bg-surface);border-color:rgba(170,162,190,0.06)}
  .hh-tab svg{width:15px;height:15px}
  .hh-tab small{display:none}
  .hh-surprise{margin-top:0;height:40px;padding:0 14px;background:rgba(150,120,235,0.116)}
  .hh-surprise-sub{display:none}
  .hh-group{flex:0 0 1px;align-self:center;width:1px;height:24px;margin:0;padding:0;border:0;background:var(--hairline-strong);font-size:0;overflow:hidden}
  .hh-mono{width:17px;height:17px;border-radius:5px;font-size:7.5px}
}
@media(max-width:680px){
  .hero.hh{padding-top:calc(var(--nh) + 20px)}
  .hh-sub{font-size:14px;margin-top:7px}
  .hh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hh-chip{top:7px;left:7px;height:22px;padding:0 7px;border-radius:6px;font-size:10.5px}
}

/* v235: "Surprise me" leads the mobile menu chips (replaces the unlabelled dice) */
.mob-chip--surprise{color:var(--text-1);background:rgba(150,120,235,0.116);border-color:rgba(245,190,49,0.3);cursor:pointer;font-family:var(--fb)}
.mob-chip--surprise svg{color:var(--gold)}

/* v239: long-form term guide below the games grid (text after <!--more--> in a term description) */
.term-guide{position:relative;z-index:2}
main#main > * + .term-guide{margin-top:var(--sp-section)}
.term-guide .term-guide-body{max-width:760px;font-size:15px}
.term-guide .term-guide-body h2:first-child{margin-top:0}
.term-guide .term-guide-body ul,.term-guide .term-guide-body ol{margin:0 0 12px 20px}
.term-guide .term-guide-body li{margin-bottom:6px}
.term-guide .term-guide-body table{width:100%;border-collapse:collapse;margin:4px 0 16px;font-size:14px}
.term-guide .term-guide-body th,.term-guide .term-guide-body td{padding:8px 10px;border-bottom:1px solid var(--hairline);text-align:left}
.term-guide .term-guide-body th{color:var(--text-1);font-weight:700}
@media (max-width:520px){.term-guide .term-guide-body table{font-size:13px}.term-guide .term-guide-body th,.term-guide .term-guide-body td{padding:6px}}

/* ═══ v242: HEADER GROUPED LEFT + ACTIVE GROUP, ONE TOP GAP, ONE-ROW ARCHIVE CONTROLS ═══
   Chosen 1 Oct 2026 from the fold mockups (header A, game crumbs "match at 32px",
   homepage single search, archive one-row controls). Desktop only unless noted. */
.nav-kbd{display:none}
@media(min-width:961px){
  /* nav sits with the logo, search takes the right; was spread with equal gaps */
  .nav-inner{justify-content:flex-start}
  .nav-links{margin-left:16px;gap:28px;height:var(--nh)}
  .nav-links > li{height:100%;display:flex;align-items:center}
  .nav-links > li > a{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2)}
  .nav-links > li > a:hover,.nav-links > li:hover > a,.nav-links > li:focus-within > a{color:var(--text-1)}
  .nav-links .menu-item-has-children > a{padding-right:15px}
  .nav-links .menu-item-has-children > a::before{width:5px;height:5px;border-right-width:1.5px;border-bottom-width:1.5px;opacity:0.5}
  .nav-links > li.is-current > a,.nav-links > li.is-current:hover > a{color:var(--gold)}
  .nav-links > li.is-current::after{content:'';position:absolute;left:0;right:15px;bottom:-1px;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)}
  /* li is now header-height: drop the menu to where it opened before (~59px) */
  .nav-links .sub-menu{top:calc(100% - 13px);margin-top:0}
  /* search: same look as the homepage hero search */
  .nav-search{margin-left:auto;flex:0 1 300px;width:auto;min-width:170px}
  .nav-search input{height:40px;padding:0 38px 0 38px;background:#0c0916;border:1px solid var(--hairline-strong);font-size:14px}
  .nav-search input:focus{border-color:var(--gold);background:#0c0916;box-shadow:0 0 0 4px rgba(245,190,49,0.1)}
  .nav-search svg{left:14px;width:16px;height:16px;color:var(--gold)}
  .nav-kbd{display:block;position:absolute;right:10px;top:50%;transform:translateY(-50%);font:700 11px/1.4 var(--fb);color:var(--text-4);border:1px solid var(--hairline-strong);border-radius:5px;padding:1px 6px;pointer-events:none;transition:opacity 0.15s}
  .nav-search:focus-within .nav-kbd,.nav-search:has(input:not(:placeholder-shown)) .nav-kbd{opacity:0}
  /* homepage: one search at a time. The header search appears once the hero search has scrolled away (main.js) */
  html.js body.home .nav-search{opacity:0;visibility:hidden;transition:opacity 0.2s,visibility 0.2s}
  html.js body.home.us-hh-search-off .nav-search{opacity:1;visibility:visible}

  /* archive, term and search pages: chips | count | sort on one row (was three rows) */
  .toolbar-sec{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:18px;padding-block:14px 18px}
  .toolbar-sec > .toolbar{display:contents}
  .toolbar-sec .chips-wrap{grid-column:1;grid-row:1;min-width:0}
  .toolbar-sec .results-info{grid-column:2;grid-row:1;padding-bottom:0;white-space:nowrap}
  .toolbar-sec .sort-wrap{grid-column:3;grid-row:1}
}
@media(min-width:961px) and (max-width:1140px){
  .nav-links{margin-left:4px;gap:20px}
}
@media(min-width:769px){
  /* homepage H1 on the shared 32px gap (was 36) */
  .hero.hh{padding-top:calc(var(--nh) + 32px)}
  /* archive family: smaller tile, two-line intro with Read more at the end of the line */
  .cat-hero .cat-icon{width:56px;height:56px;border-radius:14px;font-size:26px}
  .cat-hero .cat-icon--gold svg{width:24px;height:24px}
  .cat-hero .cat-icon img.us-emoji{width:28px;height:28px}
  .cat-hero-term .cat-desc-wrap{display:flex;align-items:flex-end;gap:8px}
  .cat-hero-term .cat-desc{flex:0 1 800px;max-width:800px;min-width:0}
  .cat-hero-term .cat-desc-wrap .cat-desc:not(.expanded)>*:first-child{-webkit-line-clamp:2}
  .cat-hero-term .cat-read-more{flex:none;padding:0;line-height:1.8;white-space:nowrap}
}

/* ═══ v243: HOMEPAGE — STUDIO SPOTLIGHT, STAFF PICKS BY PERSON, ABOUT WITH STEPS ═══
   Chosen 1 Oct 2026 from the homepage mockup. Markup in functions.php
   (us_home_spotlight / us_home_picks / us_home_about). */
.us-av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;border:1px solid rgba(245,190,49,0.35)}

/* Studio Spotlight: split panel, studio on the left, four of its demos on the right */
.spa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(ellipse 70% 90% at 0% 0%,rgba(150,120,235,0.18),transparent 60%),linear-gradient(160deg,#211a33,#120e1e);
  border:1px solid rgba(245,190,49,0.22);box-shadow:0 10px 30px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,235,170,0.12)}
.spa-info{display:flex;flex-direction:column;gap:18px;padding:34px 36px 30px;min-width:0}
.spa-id{display:flex;align-items:center;gap:16px}
.spa-mono{flex:none;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-family:var(--fd);font-size:19px;color:#1a1306;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold-dim));box-shadow:0 6px 18px rgba(245,190,49,0.25)}
.spa-tag{display:block;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.spa-name{font-family:var(--fd);font-size:34px;line-height:1;text-transform:uppercase;letter-spacing:0.005em;margin:6px 0 0;font-weight:400;color:var(--text-1)}
.spa-name .gold{color:var(--gold)}
.spa-take{margin:0;font-size:16px;line-height:1.75;color:var(--text-2);max-width:52ch}
.spa-facts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.spa-facts div{padding:13px 0;min-width:0}
.spa-facts div + div{padding-left:16px;border-left:1px solid var(--hairline)}
.spa-facts dt{font-size:10.5px;letter-spacing:0.11em;text-transform:uppercase;color:var(--text-4);font-weight:700}
.spa-facts dd{margin:4px 0 0;font-family:var(--fd);font-size:17px;color:var(--text-1);font-variant-numeric:tabular-nums;line-height:1.2}
.spa-facts dd small{font-family:var(--fb);font-size:12.5px;color:var(--text-3);font-weight:600;display:block;margin-top:2px}
.spa-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.spa-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;background:var(--gold);color:#1a1306;font-weight:700;font-size:14px;text-decoration:none;transition:background 0.2s,gap 0.2s}
.spa-cta:hover{background:var(--gold-bright);gap:12px}
.spa-by{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-3);text-decoration:none}
.spa-by b{color:var(--text-2);font-weight:600;transition:color 0.2s}
.spa-by:hover b{color:var(--gold)}
.spa-games{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px;background:rgba(0,0,0,0.18);border-left:1px solid var(--hairline);min-width:0}
.spa-games .g-img{aspect-ratio:16/9}
.spa-games .g-info{padding:10px 12px 11px}
.spa-cta:focus-visible,.spa-by:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:980px){.spa{grid-template-columns:1fr}.spa-games{border-left:0;border-top:1px solid var(--hairline)}}
@media(max-width:560px){
  .spa-info{padding:24px 20px 22px;gap:16px}
  .spa-name{font-size:26px}
  .spa-mono{width:48px;height:48px;font-size:16px;border-radius:13px}
  .spa-facts dd{font-size:15px}
  .spa-facts div + div{padding-left:10px}
  .spa-games{padding:14px;gap:10px}
  .spa-cta{width:100%;justify-content:center}
}

/* Staff Picks: one column per person, two text-led rows each (no card boxes) */
.pkb{display:grid;grid-template-columns:1fr 1fr}
.pkb-col{min-width:0}
.pkb-col:first-child{padding-right:40px}
.pkb-col + .pkb-col{border-left:1px solid var(--hairline);padding-left:40px}
.pkb-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--hairline-strong)}
.pkb-head .us-av{width:52px;height:52px;border-width:2px}
.pkb-head b{display:block;font-family:var(--fd);font-size:17px;text-transform:uppercase;font-weight:400;color:var(--text-1)}
.pkb-head span{font-size:12.5px;color:var(--text-3)}
.pkb-head a{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--gold);text-decoration:none;white-space:nowrap}
.pkb-head a:hover{color:var(--gold-bright)}
.pk-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--hairline);align-items:start;text-decoration:none}
.pkb-col .pk-row:last-child{border-bottom:0}
.pk-thumb{display:block;aspect-ratio:16/11;border-radius:10px;overflow:hidden;border:1px solid var(--hairline);background:var(--bg-card)}
.pk-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.19,1,0.22,1)}
.pk-row:hover .pk-thumb img{transform:scale(1.05)}
.pk-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.pk-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pk-title{font-family:var(--fd);font-size:15.5px;line-height:1.25;text-transform:uppercase;color:var(--text-1);transition:color 0.2s}
.pk-row:hover .pk-title{color:var(--gold)}
.pk-rate{flex:none;font-family:var(--fd);font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums}
.pk-quote{font-size:14.5px;line-height:1.6;color:var(--text-1);opacity:0.88}
.pk-quote::before{content:"\201C";color:var(--gold);font-family:var(--fd);margin-right:2px}
.pk-quote::after{content:"\201D";color:var(--gold);font-family:var(--fd);margin-left:1px}
.pk-stats{font-size:13.5px;line-height:1.6;color:var(--text-3)}
.pk-by{font-size:12.5px;color:var(--text-3)}
.pk-row:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
@media(max-width:900px){.pkb{grid-template-columns:1fr;gap:36px}.pkb-col:first-child{padding-right:0}.pkb-col + .pkb-col{border-left:0;padding-left:0}}
@media(max-width:560px){.pk-row{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:16px 0}.pk-title{font-size:14px}.pk-quote{font-size:13.5px}}

/* About: no panel. Labelled intro left, numbered check right; both columns start and end on the same rules */
.aba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch}
.aba-intro,.aba-check{display:flex;flex-direction:column;min-width:0}
.aba-h{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;color:var(--text-4);padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.aba-copy{padding-top:18px}
.aba-copy p{font-size:15px;line-height:1.8;color:var(--text-2);margin:0 0 14px;max-width:60ch}
.aba-copy a{color:var(--gold);text-decoration:none}
.aba-copy a:hover{text-decoration:underline}
.aba-note{margin:auto 0 0;padding:16px 0 18px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);font-size:12.5px;line-height:1.7;color:var(--text-4)}
.aba-steps{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column}
.aba-steps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px;padding:18px 0;border-bottom:1px solid var(--hairline)}
.aba-steps li:last-child{flex:1}
.aba-n{font-family:var(--fd);font-size:26px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.aba-steps b{display:block;font-size:15.5px;color:var(--text-1);margin-bottom:3px}
.aba-steps p{font-size:14px;line-height:1.6;color:var(--text-3);margin:0}
@media(max-width:860px){.aba{grid-template-columns:1fr;gap:32px}.aba-note{margin-top:4px}}

/* ═══ v244: GLASS + TILT ═══
   Chosen 1 Oct 2026 in the Space Backdrop Lab: current background, "Glass + tilt" cards.
   - Header: real glass. Content scrolls under it, so the blur has something to show.
   - Cards and panels: the glass LOOK (see-through violet gradient, light on the top edge,
     dark lip at the bottom, deep shadow) WITHOUT backdrop-filter. Over this background the
     blur showed almost nothing and cost a blur pass per card on phones.
   - Tilt + moving highlight: desktop mouse only (hover:hover + pointer:fine), off for
     reduced motion. Driven by main.js (v244 block), which only sets --rx/--ry/--mx/--my.
   - Demo player: never tilts. Frame and toolbar are one glass unit; the play button blurs
     the game art behind it. */
.nav{background:rgba(14,11,26,0.62);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
.nav.scrolled{background:rgba(10,8,19,0.70)}
@supports not (backdrop-filter:blur(1px)){.nav,.nav.scrolled{background:rgba(10,8,19,0.94)}}

:is(.g-card,.b-card,.b-row,.o-card,.rp-card,.tax-index-card,.stats-panel,.slot-card,.page-card,.seo-card,.faq-item){
  background:linear-gradient(160deg,rgba(52,42,84,0.58),rgba(18,14,34,0.62));
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),inset 0 -1px 0 rgba(0,0,0,0.35),0 20px 44px -18px rgba(0,0,0,0.8)}
:is(.g-card,.b-card,.o-card,.rp-card,.prov-cover):hover{
  border-color:rgba(245,190,49,0.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 34px 60px -22px rgba(0,0,0,0.9),0 0 36px -8px rgba(245,190,49,0.25)}
.sec-title,.hh-h1,.cat-hero h1,.game-hero h1{text-shadow:0 2px 0 rgba(0,0,0,0.35),0 8px 24px rgba(0,0,0,0.6)}
.sec-title .gold,h1 .gold{text-shadow:0 2px 0 rgba(90,60,0,0.45),0 0 26px rgba(245,190,49,0.22)}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :is(.g-card,.prov-cover,.rp-card,.b-card,.o-card,.sr-tile){
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
    transition:transform 0.18s ease-out,box-shadow 0.3s,border-color 0.3s}
  :is(.g-card,.prov-cover,.rp-card,.b-card,.o-card,.sr-tile):hover{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px) scale(1.015)}
  :is(.g-card,.prov-cover,.rp-card)::before{
    content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity 0.25s;
    background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,244,214,0.20),rgba(255,244,214,0) 45%);mix-blend-mode:screen}
  :is(.g-card,.prov-cover,.rp-card):hover::before{opacity:1}
}

/* demo player: one glass unit, no tilt */
.demo-wrapper:not(.fullscreen) .demo-container{border:1px solid rgba(255,255,255,0.10);border-bottom:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),0 40px 80px -30px rgba(0,0,0,0.9)}
.demo-wrapper:not(.fullscreen) .demo-toolbar{border:1px solid rgba(255,255,255,0.10);border-top:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(160deg,rgba(44,36,72,0.92),rgba(20,16,36,0.95));
  box-shadow:0 24px 44px -18px rgba(0,0,0,0.85)} /* v245: the inner dark lip under a light border read as a second, darker stroke on the bottom corners; blur dropped (nothing scrolls behind the toolbar) */
.demo-tb-btn{background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 4px 12px -4px rgba(0,0,0,0.5)}
.demo-tb-btn:hover{border-color:rgba(245,190,49,0.5)}
.demo-play-lockup{background:rgba(14,11,26,0.58);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  border-color:rgba(245,190,49,0.55);box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),0 24px 60px rgba(0,0,0,0.6),0 0 44px rgba(245,190,49,0.18)}