/* ============================================================================
   SlotSimba v3 — "Neon Vault"
   Dark, saturated, layered. Three accent tiers: cyan (interactive), magenta
   (energy), gold (value/numbers). Every panel has depth; nothing is flat.
   All motion is suppressed under prefers-reduced-motion at the end of file.
   ========================================================================= */
:root{
  /* base */
  --bg-0:#05040c; --bg-1:#0a0817; --bg-2:#120e24; --bg-3:#171233;
  --panel:rgba(22,17,48,.58); --panel-2:rgba(30,23,64,.72); --panel-hi:rgba(38,30,80,.85);
  --border:rgba(168,150,255,.13); --border-strong:rgba(180,165,255,.26);

  /* text */
  --text-0:#fff; --text-1:#e9e6f7; --text-2:#aaa3c8; --text-3:#7a7299;

  /* accents */
  --cy:#2ee6ff; --cy-2:#00c8ff; --mg:#ff3d9a; --mg-2:#c840ff; --gold:#ffc53d; --gold-2:#ff9d2e;
  --cy-soft:rgba(46,230,255,.14); --mg-soft:rgba(255,61,154,.14); --gold-soft:rgba(255,197,61,.14);
  --glow-cy:rgba(46,230,255,.55); --glow-mg:rgba(255,61,154,.5); --glow-gold:rgba(255,197,61,.45);

  --grad-main:linear-gradient(100deg,var(--cy) 0%,var(--mg-2) 55%,var(--mg) 100%);
  --grad-gold:linear-gradient(100deg,#fff2c9 0%,var(--gold) 45%,var(--gold-2) 100%);

  --font-display:"Space Grotesk","Inter","Avenir","Helvetica Neue",system-ui,sans-serif;
  --font-body:"Roboto","Helvetica Neue",system-ui,sans-serif;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:30px;
  --gutter:16px; --maxw:1200px;
  --ease:cubic-bezier(.22,.8,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--text-1);font:16px/1.68 var(--font-body);
  background:var(--bg-0);overflow-x:hidden;position:relative;isolation:isolate}

/* ---- layered atmosphere: aurora + vignette + grain -------------------- */
body::before{content:"";position:fixed;inset:-20% -10%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(760px 540px at 14% 6%,  rgba(110,60,255,.42), transparent 62%),
    radial-gradient(680px 520px at 86% 0%,  rgba(255,61,154,.26), transparent 60%),
    radial-gradient(900px 620px at 50% 46%, rgba(26,120,200,.22), transparent 64%),
    radial-gradient(700px 560px at 8% 86%,  rgba(46,230,255,.18), transparent 62%),
    radial-gradient(620px 500px at 94% 92%, rgba(255,157,46,.14), transparent 60%);
  filter:blur(8px);animation:drift 26s var(--ease) infinite alternate}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-2.5%,1.5%,0) scale(1.06)}
  100%{transform:translate3d(2%,-2%,0) scale(1.03)}
}
/* fine grain stops the gradients banding on large dark areas */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}

img{max-width:100%;height:auto;display:block}
a{color:var(--cy);text-decoration:none;transition:color .18s var(--ease)}
a:hover,a:focus-visible{text-decoration:underline}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:5px}
::selection{background:rgba(255,61,154,.35);color:#fff}
.skip{position:absolute;left:-9999px;top:0;z-index:60;padding:12px 18px;border-radius:0 0 10px 0;
  background:var(--cy);color:#03121a;font-weight:800}
.skip:focus{left:0;text-decoration:none}
.container,main,.nav-inner,.footer>div{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
main{padding-block:30px 70px}

/* ---- typography -------------------------------------------------------- */
h1,h2,h3{font-family:var(--font-display);color:var(--text-0);line-height:1.12;margin:0 0 .5em;
  letter-spacing:-.025em}
h1{font-size:clamp(2.1rem,5.6vw,3.9rem);font-weight:900;margin-top:.1em}
h2{font-size:clamp(1.45rem,3vw,2.1rem);font-weight:800;margin-top:1.8em;padding-top:.7em;
  border-top:1px solid var(--border)}
h2::before{content:"";display:block;width:46px;height:4px;border-radius:3px;margin-bottom:.6em;
  background:var(--grad-main);box-shadow:0 0 18px var(--glow-cy)}
h2:first-of-type{border-top:0;padding-top:0}
h3{font-size:1.06rem;font-weight:700}
p{margin:0 0 1.05em;max-width:76ch}
.lead{color:var(--text-1);font-size:clamp(1.02rem,1.5vw,1.17rem);max-width:66ch;line-height:1.62}
.note{color:var(--text-3);font-size:.9rem;max-width:70ch}
.unknown{color:var(--text-2);background:linear-gradient(100deg,var(--cy-soft),transparent 70%);
  border-left:3px solid var(--cy);padding:15px 18px;border-radius:var(--radius-sm);max-width:70ch}
strong{color:var(--text-0)}

/* gradient text utility */
.gt{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- header ------------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:30;background:rgba(5,4,12,.72);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--border)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-cy),var(--glow-mg),transparent);opacity:.7}
.nav-inner{display:flex;align-items:center;gap:22px;min-height:66px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:900;color:var(--text-0);font-size:1.18rem;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--grad-main);color:#04040a;font-weight:900;
  box-shadow:0 0 22px -4px var(--glow-cy),inset 0 1px 0 rgba(255,255,255,.4)}
.nav nav{display:flex;gap:4px;flex-wrap:wrap}
.nav nav a{position:relative;color:var(--text-2);font-size:.93rem;font-weight:500;
  padding:8px 11px;border-radius:8px;transition:color .18s var(--ease),background .18s var(--ease)}
.nav nav a:hover{color:var(--text-0);background:rgba(255,255,255,.055);text-decoration:none}
.nav nav a[aria-current="page"]{color:var(--cy)}
.nav nav a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;
  height:2px;border-radius:2px;background:var(--grad-main);box-shadow:0 0 12px var(--glow-cy)}

/* ---- footer ------------------------------------------------------------ */
.footer{position:relative;margin-top:70px;border-top:1px solid var(--border);
  background:linear-gradient(180deg,rgba(10,8,23,.5),rgba(5,4,12,.96));padding-block:34px 44px}
.footer::before{content:"";position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-cy),var(--glow-mg),transparent)}
.rg{color:var(--text-3);font-size:.87rem;max-width:80ch}
.foot-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.foot-nav a{font-size:.88rem;color:var(--text-2);padding:6px 11px;border-radius:7px;
  border:1px solid transparent;transition:all .18s var(--ease)}
.foot-nav a:hover{color:var(--text-0);border-color:var(--border-strong);
  background:rgba(255,255,255,.04);text-decoration:none}

.crumbs{color:var(--text-3);font-size:.85rem;margin-bottom:16px}
.crumbs a{color:var(--text-2)}
.crumbs a:hover{color:var(--cy)}

/* ---- HERO -------------------------------------------------------------- */
.hero{position:relative;margin:6px 0 14px;padding:clamp(30px,5vw,56px) clamp(22px,4vw,48px);
  border-radius:var(--radius-xl);border:1px solid var(--border-strong);overflow:hidden;
  background:
    radial-gradient(800px 420px at 6% -20%,rgba(46,230,255,.2),transparent 62%),
    radial-gradient(700px 420px at 98% -10%,rgba(255,61,154,.18),transparent 60%),
    radial-gradient(600px 400px at 70% 120%,rgba(200,64,255,.16),transparent 62%),
    linear-gradient(180deg,rgba(40,30,86,.62),rgba(14,10,32,.78));
  box-shadow:0 44px 110px -50px rgba(110,60,255,.6),
             inset 0 1px 0 rgba(255,255,255,.12)}
/* sweeping top light */
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cy),var(--mg-2),var(--mg),transparent);
  opacity:.95}
/* slow rotating conic halo behind the copy */
.hero::after{content:"";position:absolute;width:760px;height:760px;right:-280px;top:-340px;
  border-radius:50%;pointer-events:none;opacity:.2;
  background:conic-gradient(from 0deg,transparent,var(--cy),transparent 32%,var(--mg),transparent 66%,var(--gold),transparent);
  animation:spin 34s linear infinite;filter:blur(36px)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero>*{position:relative;z-index:1}
.hero h1{margin-top:0;text-shadow:0 2px 40px rgba(46,230,255,.25)}
.hero h1 em{font-style:normal;background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(255,197,61,.35))}
.hero .lead{max-width:60ch}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 1em;
  padding:7px 15px;border-radius:999px;
  font:700 .72rem/1 var(--font-display);letter-spacing:.17em;text-transform:uppercase;
  color:var(--cy);border:1px solid rgba(46,230,255,.34);
  background:linear-gradient(100deg,rgba(46,230,255,.16),rgba(255,61,154,.1));
  box-shadow:0 0 28px -8px var(--glow-cy),inset 0 1px 0 rgba(255,255,255,.14)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cy);
  box-shadow:0 0 10px var(--cy);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}

/* ---- buttons ----------------------------------------------------------- */
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:1.5em 0 0}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 28px;border-radius:999px;overflow:hidden;
  font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:-.01em;
  color:#04101a;background:var(--grad-main);border:0;
  box-shadow:0 14px 40px -14px var(--glow-cy),0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease)}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-120%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .65s var(--ease)}
.btn:hover,.btn:focus-visible{transform:translateY(-3px);text-decoration:none;filter:saturate(1.15);
  box-shadow:0 22px 52px -16px var(--glow-cy),0 0 0 1px rgba(255,255,255,.2) inset}
.btn:hover::after,.btn:focus-visible::after{left:130%}
.btn.ghost{color:var(--text-0);background:rgba(255,255,255,.045);
  border:1px solid var(--border-strong);box-shadow:none;backdrop-filter:blur(8px)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--cy);color:var(--cy);
  background:rgba(46,230,255,.1);box-shadow:0 14px 38px -18px var(--glow-cy)}
.btn.gold{color:#2a1a02;background:var(--grad-gold);
  box-shadow:0 14px 40px -14px var(--glow-gold),0 0 0 1px rgba(255,255,255,.2) inset}
.btn.gold:hover{box-shadow:0 22px 52px -16px var(--glow-gold),0 0 0 1px rgba(255,255,255,.28) inset}

/* ---- stat strip -------------------------------------------------------- */
.stats{list-style:none;margin:2em 0 0;padding:1.6em 0 0;border-top:1px solid var(--border);
  display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.stats li{position:relative;display:flex;flex-direction:column;gap:3px;padding-left:18px}
.stats li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;
  background:var(--grad-main);opacity:.55}
.stats li:first-child::before{background:var(--grad-gold);opacity:.9;
  box-shadow:0 0 14px var(--glow-gold)}
.stats strong{font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.05;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--text-0)}
.stats li:first-child strong{background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,197,61,.3))}
.stats span{color:var(--text-3);font-size:.81rem;letter-spacing:.03em;text-transform:uppercase;
  font-weight:600}

/* ---- demo frame -------------------------------------------------------- */
.demo-wrap{position:relative;width:100%;aspect-ratio:16/10;min-height:360px;
  background:var(--bg-2);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);overflow:hidden;margin-bottom:14px;
  box-shadow:0 40px 100px -42px var(--glow-cy),0 0 0 1px rgba(255,255,255,.05) inset,
             0 0 70px -30px var(--glow-mg)}
.demo{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- click-to-play poster ----------------------------------------------
   Fills .demo-wrap until the visitor presses play, at which point app.js
   builds the real iframe and removes this button, so the two are never on
   screen together. The CTA is cyan because pressing it is an action - gold
   stays reserved for value and numbers. The artwork is the catalogue
   thumbnail we already ship in every grid, so it is usually warm in cache. */
.demo-poster{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;width:100%;height:100%;
  margin:0;padding:26px;border:0;cursor:pointer;font:inherit;color:var(--text-1);
  text-align:center;overflow:hidden;background:var(--bg-2)}
/* The same floor the homepage hero stands on, so the player frame belongs to the site
   rather than looking like an empty box waiting for something. Pure CSS: 19,400 game
   pages cannot afford an extra image request for decoration. */
.demo-poster::before{content:"";position:absolute;left:-30%;right:-30%;bottom:-2px;height:270px;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(46,230,255,.26) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(0deg,rgba(200,64,255,.2) 0 1px,transparent 1px 64px);
  transform:perspective(420px) rotateX(74deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 72%);
          mask-image:linear-gradient(to top,#000 0%,transparent 72%)}
.demo-poster::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 58% at 50% 42%,rgba(46,230,255,.1),transparent 70%)}
.dp-art,.dp-cta,.dp-note{position:relative;z-index:1}
.dp-art{width:clamp(132px,23%,224px);height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--radius-md);border:1px solid var(--border-strong);
  box-shadow:0 30px 70px -26px #000,0 0 54px -20px var(--glow-cy);
  transition:transform .3s var(--ease)}
.dp-cta{display:inline-flex;align-items:center;gap:11px;padding:15px 31px;
  border-radius:999px;font-family:var(--font-display);font-weight:600;
  font-size:1.05rem;letter-spacing:-.01em;color:#06101a;background:var(--grad-main);
  box-shadow:0 18px 44px -16px var(--glow-cy);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.dp-cta .ico{width:20px;height:20px;color:currentColor}
.dp-note{max-width:34ch;font-size:.84rem;color:var(--text-2)}
.demo-poster:hover .dp-art{transform:translateY(-5px) scale(1.035)}
.demo-poster:hover .dp-cta{transform:translateY(-2px);
  box-shadow:0 26px 56px -16px var(--glow-cy)}
.demo-poster:focus-visible{outline:0}
.demo-poster:focus-visible .dp-cta{transform:translateY(-2px);
  box-shadow:0 0 0 3px rgba(46,230,255,.42),0 26px 56px -16px var(--glow-cy)}
@media (max-width:620px){
  .demo-poster{gap:16px;padding:20px}
  .dp-art{width:clamp(116px,34%,170px)}
  .dp-cta{padding:14px 26px;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .dp-art,.dp-cta{transition:none}
  .demo-poster:hover .dp-art,.demo-poster:hover .dp-cta,
  .demo-poster:focus-visible .dp-cta{transform:none}
}

/* ---- GAME GRID --------------------------------------------------------- */
.grid{list-style:none;margin:0 0 1.6em;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.card a{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;height:100%;
  box-shadow:0 10px 30px -22px #000;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.card a::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .22s var(--ease);
  box-shadow:0 0 0 1px var(--cy) inset,0 0 34px -6px var(--glow-cy) inset}
.card a:hover,.card a:focus-visible{transform:translateY(-6px) scale(1.018);text-decoration:none;
  border-color:transparent;
  box-shadow:0 26px 54px -24px var(--glow-cy),0 10px 30px -18px rgba(255,61,154,.4)}
.card a:hover::before,.card a:focus-visible::before{opacity:1}
.card .shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card a:hover img{transform:scale(1.09)}
/* shine sweep across the artwork */
.card .shot::before{content:"";position:absolute;top:0;bottom:0;left:-130%;width:60%;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-20deg);transition:left .75s var(--ease)}
.card a:hover .shot::before{left:150%}
.card .play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;opacity:0;
  background:linear-gradient(180deg,rgba(5,4,12,.05),rgba(5,4,12,.76));
  transition:opacity .22s var(--ease)}
.card a:hover .play,.card a:focus-visible .play{opacity:1}
.card .play span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--grad-main);color:#04101a;font-size:1.05rem;padding-left:3px;font-weight:900;
  box-shadow:0 0 0 7px rgba(46,230,255,.16),0 10px 28px -8px var(--glow-cy);
  transform:scale(.8);transition:transform .25s var(--ease)}
.card a:hover .play span{transform:scale(1)}
.card .meta{position:relative;z-index:1;padding:12px 13px 14px;display:flex;flex-direction:column;gap:4px}
.card-name{color:var(--text-0);font-weight:700;font-size:.92rem;line-height:1.3;
  font-family:var(--font-display);letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-prov{color:var(--text-3);font-size:.75rem;letter-spacing:.03em;text-transform:uppercase;
  font-weight:600}
.card .tag{position:absolute;top:9px;left:9px;z-index:3;
  font:800 .62rem/1 var(--font-display);letter-spacing:.07em;text-transform:uppercase;
  padding:6px 9px;border-radius:7px;color:#04101a;background:var(--grad-main);
  box-shadow:0 4px 16px -4px var(--glow-cy)}

/* ---- A–Z, provider lists, chips ---------------------------------------- */
.az{list-style:none;margin:0 0 1.3em;padding:0;display:grid;gap:3px 20px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.az a{color:var(--text-2);font-size:.9rem;padding:3px 0;display:inline-block}
.az a:hover{color:var(--cy)}
.points{margin:0 0 1.5em;padding-left:1.3em;max-width:78ch;color:var(--text-1)}
.points li{margin:0 0 .6em}
.points li::marker{color:var(--cy)}
.az-nav{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0 0 1.4em}
.az-nav a{display:grid;place-items:center;min-width:44px;height:44px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-1);font-weight:800;font-family:var(--font-display);
  transition:all .18s var(--ease)}
.az-nav a:hover{border-color:var(--cy);color:var(--cy);text-decoration:none;
  background:rgba(46,230,255,.1);transform:translateY(-2px);
  box-shadow:0 10px 24px -12px var(--glow-cy)}

.prov-list{list-style:none;margin:0 0 1.3em;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}
.prov-list a{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:15px 17px;overflow:hidden;
  transition:all .2s var(--ease)}
.prov-list a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-main);opacity:0;transition:opacity .2s var(--ease)}
.prov-list a:hover{border-color:var(--border-strong);transform:translateY(-3px);
  text-decoration:none;background:var(--panel-2);
  box-shadow:0 18px 40px -22px var(--glow-cy)}
.prov-list a:hover::before{opacity:1}
.prov-list strong{color:var(--text-0);font-weight:700;font-size:.96rem;
  font-family:var(--font-display);letter-spacing:-.01em}
.prov-list span{color:var(--text-3);font-size:.78rem;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-weight:600}
.more{display:inline-block;margin-top:4px;font-weight:700}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 1.5em}
.chips a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:var(--panel);border:1px solid var(--border);color:var(--text-1);font-size:.9rem;
  font-weight:500;transition:all .2s var(--ease)}
.chips a:hover,.chips a:focus-visible{border-color:var(--cy);background:rgba(46,230,255,.1);
  color:var(--text-0);transform:translateY(-3px);text-decoration:none;
  box-shadow:0 12px 28px -14px var(--glow-cy)}
.chips span{color:var(--text-3);font-size:.76rem;font-variant-numeric:tabular-nums;font-weight:700}
.chips a:hover span{color:var(--cy)}

/* ---- specs / mechanics / faq lists ------------------------------------- */
.specs{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 1.3em;max-width:640px;
  border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;
  background:var(--panel)}
.specs th,.specs td{text-align:left;padding:13px 17px;font-size:.94rem;
  border-bottom:1px solid var(--border)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs th{color:var(--text-3);font-weight:600;width:44%;font-size:.88rem;
  letter-spacing:.02em;text-transform:uppercase}
.specs td{color:var(--text-0);font-weight:600;font-variant-numeric:tabular-nums}
.specs tr:hover{background:rgba(46,230,255,.05)}
.specs tr:hover td{color:var(--cy)}
.mech,.faq{margin:0 0 1.3em;max-width:75ch}
.mech dt,.faq dt{color:var(--text-0);font-weight:700;margin-top:1.1em;font-family:var(--font-display)}
.mech dd,.faq dd{margin:.35em 0 0;color:var(--text-2)}

/* ---- filters ----------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:11px;margin:0 0 1.5em;padding:16px;
  border-radius:var(--radius-md);border:1px solid var(--border);background:var(--panel)}
.filters select,.filters input{background:rgba(5,4,12,.55);color:var(--text-1);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:10px 14px;font:inherit;font-size:.92rem;min-height:46px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.filters select:focus,.filters input:focus{border-color:var(--cy);outline:none;
  box-shadow:0 0 0 3px var(--cy-soft)}
.filters input{flex:1 1 230px;min-width:0}
.count{color:var(--text-2);font-size:.94rem;margin:0 0 1.3em}
.count strong{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-family:var(--font-display);font-size:1.3rem;font-weight:900;
  font-variant-numeric:tabular-nums}

/* ============================================================
   SECTION SYSTEM
   ============================================================ */
.ico{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.ico-chip{position:relative;display:grid;place-items:center;width:44px;height:44px;
  border-radius:14px;flex:0 0 auto;color:var(--cy);
  border:1px solid rgba(46,230,255,.3);
  background:linear-gradient(140deg,rgba(46,230,255,.22),rgba(255,61,154,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 24px -12px var(--glow-cy)}

.section{position:relative;margin:30px 0;padding:clamp(24px,3.4vw,38px) clamp(20px,3.2vw,36px);
  border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 46%),var(--panel);
  box-shadow:0 30px 70px -50px #000,inset 0 1px 0 rgba(255,255,255,.06)}
.section::before{content:"";position:absolute;top:0;left:28px;right:28px;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-cy),var(--glow-mg),transparent)}
.section>h2{display:flex;align-items:center;gap:16px;margin:0 0 .4em;border-top:0;padding-top:0}
.section>h2::before{display:none}
.section>.kicker{color:var(--text-2);font-size:.97rem;margin:0 0 1.7em;max-width:72ch;
  line-height:1.6}
.section>p{color:var(--text-1)}
.section>p:last-child,.section>ul:last-child,.section>div:last-child{margin-bottom:0}
.section.accent{background:
  radial-gradient(680px 340px at 100% 0%,rgba(255,61,154,.16),transparent 62%),
  radial-gradient(520px 300px at 0% 100%,rgba(200,64,255,.12),transparent 62%),
  linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 46%),var(--panel)}
.section.plain{border:0;background:none;padding:0;margin:52px 0;box-shadow:none}
.section.plain::before{display:none}
.section.plain>h2{margin-bottom:.4em}

/* feature tiles */
.tiles{display:grid;gap:16px;margin:22px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.tile{position:relative;padding:24px;border-radius:var(--radius-md);border:1px solid var(--border);
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.01));
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.tile::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:var(--grad-main);opacity:0;transition:opacity .22s var(--ease)}
.tile:hover{border-color:var(--border-strong);transform:translateY(-5px);
  box-shadow:0 24px 50px -30px var(--glow-cy)}
.tile:hover::before{opacity:1}
.tile .ico-chip{width:40px;height:40px;border-radius:12px;margin-bottom:15px}
.tile .ico-chip .ico{width:19px;height:19px}
.tile h3{font-family:var(--font-display);font-size:1.03rem;margin:0 0 .5em;color:var(--text-0);
  font-weight:700}
.tile p{margin:0;color:var(--text-2);font-size:.93rem;line-height:1.62;max-width:none}

/* numbered steps */
.steps{counter-reset:stp;list-style:none;padding:0;margin:24px 0 0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.steps li{counter-increment:stp;position:relative;padding:24px;
  border-radius:var(--radius-md);border:1px solid var(--border);color:var(--text-2);
  font-size:.94rem;line-height:1.62;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.01));
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.steps li:hover{transform:translateY(-4px);box-shadow:0 22px 46px -30px var(--glow-mg)}
.steps li::before{content:counter(stp);display:grid;place-items:center;width:38px;height:38px;
  border-radius:12px;margin-bottom:15px;font:900 1.05rem/1 var(--font-display);color:#04101a;
  background:var(--grad-main);box-shadow:0 8px 24px -10px var(--glow-cy)}
/* ghost numeral watermark */
.steps li::after{content:counter(stp);position:absolute;right:-6px;bottom:-30px;
  font:900 7rem/1 var(--font-display);color:rgba(255,255,255,.035);pointer-events:none}
.steps strong{display:block;color:var(--text-0);font-weight:700;margin-bottom:.4em;
  font-family:var(--font-display);font-size:1rem}

/* FAQ cards */
.faq-grid{display:grid;gap:16px;margin:24px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(296px,1fr))}
.faq-card{position:relative;padding:24px;border-radius:var(--radius-md);
  border:1px solid var(--border);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.01));
  transition:border-color .22s var(--ease),transform .22s var(--ease)}
.faq-card:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.faq-card h3{font-family:var(--font-display);font-size:1rem;margin:0 0 .6em;color:var(--text-0);
  display:flex;gap:11px;align-items:flex-start;line-height:1.38;font-weight:700}
.faq-card h3 .q{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:900;flex:0 0 auto;font-size:1.1rem}
.faq-card p{margin:0;color:var(--text-2);font-size:.93rem;line-height:1.65;max-width:none}

/* callouts */
.callout{display:flex;gap:20px;align-items:flex-start;padding:24px 26px;margin:22px 0 0;
  border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--panel-2);
  box-shadow:0 20px 50px -40px #000}
.callout .ico-chip{width:40px;height:40px;border-radius:12px}
.callout p{margin:0 0 .75em;color:var(--text-1);font-size:.96rem;max-width:none}
.callout p:last-child{margin-bottom:0}
.callout.support{border-color:rgba(255,61,154,.42);
  background:linear-gradient(120deg,rgba(255,61,154,.16),transparent 58%),var(--panel-2)}
.callout.support .ico-chip{color:var(--mg);border-color:rgba(255,61,154,.4);
  background:linear-gradient(140deg,rgba(255,61,154,.28),rgba(255,61,154,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 24px -12px var(--glow-mg)}
.callout.info{border-color:rgba(46,230,255,.38);
  background:linear-gradient(120deg,rgba(46,230,255,.13),transparent 58%),var(--panel-2)}

/* split panel */
.split{display:grid;gap:32px;grid-template-columns:1.25fr .75fr;align-items:start;margin-top:22px}
.split-aside{padding:24px;border-radius:var(--radius-md);border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01))}
.split-aside h3{font-family:var(--font-display);font-size:.98rem;margin:0 0 .85em;
  color:var(--text-0);font-weight:700}
.split-aside ul{list-style:none;margin:0;padding:0}
.split-aside li{display:flex;gap:11px;align-items:flex-start;margin:0 0 .7em;
  color:var(--text-2);font-size:.91rem;line-height:1.55}
.split-aside li:last-child{margin-bottom:0}
.split-aside .ico{width:17px;height:17px;margin-top:3px;color:var(--cy)}
.split p{max-width:none}

/* check / cross lists */
.marks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(286px,1fr))}
.marks li{display:flex;gap:12px;align-items:flex-start;color:var(--text-1);font-size:.94rem;
  line-height:1.6;padding:16px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:rgba(255,255,255,.03);
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.marks li:hover{border-color:var(--border-strong);background:rgba(255,255,255,.05)}
.marks .ico{margin-top:3px;color:var(--mg);width:18px;height:18px}
.marks.yes .ico{color:var(--cy)}

/* section-level link */
.sect-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;
  font-family:var(--font-display);font-size:.95rem;color:var(--cy)}
.sect-link .ico{width:17px;height:17px;transition:transform .2s var(--ease)}
.sect-link:hover .ico{transform:translateX(4px)}

/* big contact/value line */
.bigline{display:flex;align-items:center;gap:16px;margin:22px 0 0;padding:20px 26px;
  border-radius:var(--radius-md);border:1px solid var(--border-strong);
  background:linear-gradient(120deg,rgba(46,230,255,.14),transparent 60%),var(--panel-2);
  font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:var(--text-0)}

/* ---- game page extras -------------------------------------------------- */
.game-hero{padding-bottom:28px}
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:1.4em 0 0}
.badges li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  font:700 .84rem/1 var(--font-display);color:var(--cy);
  border:1px solid rgba(46,230,255,.36);
  background:linear-gradient(100deg,rgba(46,230,255,.14),rgba(46,230,255,.05));
  box-shadow:0 6px 20px -12px var(--glow-cy)}
.badges .ico{width:16px;height:16px}
.demo-bar{display:flex;flex-wrap:wrap;gap:11px 26px;margin:0 0 1.5em;padding:15px 19px;
  border-radius:var(--radius-md);border:1px solid var(--border);background:var(--panel)}
.demo-bar span{display:inline-flex;align-items:center;gap:9px;color:var(--text-2);font-size:.88rem;
  font-weight:500}
.demo-bar .ico{width:17px;height:17px;color:var(--cy)}
.chip-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 1.5em}
.chip-links .sect-link{margin-top:0}

/* hand-verified figures + citations */
.src-mark{display:inline-block;margin-left:5px;color:var(--gold);font-weight:800;cursor:help}
.sourced{margin:18px 0 0;padding:20px 22px;border-radius:var(--radius-md);
  border:1px solid var(--border);background:rgba(255,255,255,.03);max-width:740px}
.sourced>p{margin:0 0 .85em;color:var(--text-2);font-size:.9rem;line-height:1.62;max-width:none}
.sourced>p:last-child{margin-bottom:0}
.sourced strong{color:var(--text-1)}
.sourced ul{list-style:none;margin:0 0 .95em;padding:0;display:grid;gap:8px}
.sourced li{color:var(--text-3);font-size:.87rem}
.sourced li strong{color:var(--text-2);font-weight:600}

/* paytable */
.paytable{max-width:680px}
.paytable thead th{color:var(--text-3);font-weight:700;font-size:.8rem;letter-spacing:.05em;
  text-transform:uppercase;border-bottom:1px solid var(--border-strong)}
.paytable tbody th{width:auto;color:var(--text-1);font-weight:600;text-transform:none;
  font-size:.93rem;letter-spacing:0}
.paytable td{font-variant-numeric:tabular-nums;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:700}
.paytable tr:hover td{filter:brightness(1.25)}

/* ---- failed thumbnails -------------------------------------------------- */
/* Provider-side breakage (SlotsLaunch serves some studios' art from a bucket object that is not
   publicly readable). The capture-phase listener in the shell tags the failed <img>; we then
   show a branded tile rather than a broken-image icon. */
.img-dead{display:none!important}
.card .shot{background:
  radial-gradient(120% 90% at 30% 0%,rgba(46,230,255,.18),transparent 62%),
  radial-gradient(120% 90% at 80% 100%,rgba(255,61,154,.16),transparent 62%),var(--bg-2)}
.card .shot::after{content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;
  transform:translate(-50%,-50%) rotate(45deg);border-radius:12px;z-index:0;
  background:var(--grad-main);opacity:.28}
.card img{position:relative;z-index:1}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:20px}
}
@media (max-width:560px){
  main{padding-block:22px 48px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px}
  .demo-wrap{aspect-ratio:3/4;min-height:420px}
  .nav-inner{flex-wrap:nowrap;gap:12px;min-height:58px}
  .nav nav{flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{white-space:nowrap;padding:8px 9px}
  .logo span:last-child{display:none}
  .hero{border-radius:var(--radius-lg)}
  .hero::after{width:460px;height:460px;right:-200px;top:-220px}
  .hero-cta .btn{flex:1 1 100%}
  .stats{gap:12px;grid-template-columns:repeat(2,1fr)}
  .section{border-radius:var(--radius-md);margin:20px 0}
  .section::before{left:16px;right:16px}
  .section>h2{gap:12px}
  .ico-chip{width:38px;height:38px;border-radius:12px}
  .callout{padding:19px;gap:15px;flex-direction:column}
  .bigline{font-size:.96rem;padding:16px 18px;gap:12px}
  .steps li::after{font-size:5rem;bottom:-20px}
  .specs th,.specs td{padding:11px 13px}
}

/* ---- motion / contrast preferences -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card a:hover,.tile:hover,.steps li:hover,.chips a:hover,.prov-list a:hover,
  .btn:hover,.az-nav a:hover,.faq-card:hover{transform:none!important}
}
@media (prefers-contrast:more){
  :root{--border:rgba(200,190,255,.3);--border-strong:rgba(220,210,255,.5);--text-2:#c9c3e0}
}

/* ---- homepage search --------------------------------------------------- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.site-search{position:relative;display:flex;flex-wrap:wrap;gap:12px;
  margin:1.9em 0 0;max-width:680px}
/* .hero>* sets position:relative;z-index:1 on every hero child, which makes each one its own
   stacking context. Without this the results list — z-index 40 but trapped inside the form's
   context — paints UNDER the CTA buttons that follow it in the DOM. */
.hero .site-search{z-index:30}
.search-wrap{position:relative;flex:1 1 320px;display:flex;align-items:center}
.search-wrap .ico{position:absolute;left:17px;width:19px;height:19px;color:var(--text-3);
  pointer-events:none;transition:color .2s var(--ease)}
.site-search input[type=search]{width:100%;padding:16px 18px 16px 48px;
  font:500 1.02rem/1.2 var(--font-body,inherit);color:var(--text-0);
  background:var(--panel-2);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);appearance:none;outline:0;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.site-search input[type=search]::placeholder{color:var(--text-3)}
.site-search input[type=search]::-webkit-search-cancel-button{filter:invert(1);opacity:.5}
.site-search input[type=search]:focus{background:var(--panel-hi);border-color:var(--cy);
  box-shadow:0 0 0 4px rgba(46,230,255,.14),0 18px 50px -28px var(--glow-cy)}
.search-wrap:focus-within .ico{color:var(--cy)}
.site-search .btn{flex:0 0 auto}

.search-res{position:absolute;z-index:40;top:calc(100% + 9px);left:0;right:0;
  list-style:none;margin:0;padding:6px;max-height:min(58vh,420px);overflow-y:auto;
  background:rgba(12,9,28,.97);backdrop-filter:blur(14px);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  box-shadow:0 44px 90px -30px rgba(0,0,0,.8)}
.search-res[hidden]{display:none}
.search-res li{margin:0}
.search-res a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border-radius:var(--radius-sm);color:var(--text-1);
  font-weight:600;text-decoration:none;transition:background .14s var(--ease),color .14s var(--ease)}
.search-res a span{flex:0 0 auto;color:var(--text-3);font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em}
.search-res a:hover,.search-res a:focus{background:var(--panel-hi);color:#fff;outline:0}
.search-res a:focus-visible{box-shadow:0 0 0 2px var(--cy) inset}
.search-res .search-msg{padding:13px 14px;color:var(--text-2);font-size:.92rem}

/* ---- fullscreen demo control ------------------------------------------- */
.fs-btn{position:absolute;z-index:3;right:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:8px;padding:10px 15px;
  font:700 .86rem/1 var(--font-body,inherit);letter-spacing:.01em;color:var(--text-0);
  background:rgba(10,8,22,.72);backdrop-filter:blur(10px);
  border:1px solid var(--border-strong);border-radius:999px;cursor:pointer;
  opacity:.78;transition:opacity .2s var(--ease),transform .2s var(--ease),
    background .2s var(--ease),border-color .2s var(--ease)}
.fs-btn[hidden]{display:none}
.fs-btn .ico{width:16px;height:16px;color:var(--cy)}
.fs-btn:hover,.fs-btn:focus-visible{opacity:1;transform:translateY(-2px);
  background:rgba(14,11,32,.9);border-color:var(--cy);outline:0}
.fs-btn:focus-visible{box-shadow:0 0 0 3px rgba(46,230,255,.3)}

/* Native fullscreen: the wrapper becomes the whole screen, so drop the card chrome. */
.demo-wrap:fullscreen,.demo-wrap:-webkit-full-screen{aspect-ratio:auto;width:100%;height:100%;
  min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;background:#000}
.demo-wrap:fullscreen .fs-btn,.demo-wrap:-webkit-full-screen .fs-btn{right:16px;bottom:16px}

/* iOS Safari has no Element.requestFullscreen — pin the wrapper over the viewport instead. */
.demo-wrap.faux-fs{position:fixed;inset:0;z-index:100;width:100vw;height:100vh;
  height:100dvh;aspect-ratio:auto;min-height:0;margin:0;
  border:0;border-radius:0;box-shadow:none;background:#000}
html.fs-lock,html.fs-lock body{overflow:hidden;overscroll-behavior:none}

@media (max-width:640px){
  .site-search{gap:10px}
  .site-search .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  .fs-btn:hover,.fs-btn:focus-visible{transform:none!important}
}

/* ---- hub tiles: studio / feature / theme ------------------------------- */
.hub-grid{list-style:none;margin:0 0 1.5em;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.hub-card{position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;isolation:isolate;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.hub-card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .22s var(--ease);
  box-shadow:0 0 0 1px var(--cy) inset,0 0 44px -12px var(--glow-cy) inset}
.hub-card:hover{transform:translateY(-5px);border-color:var(--border-strong);
  box-shadow:0 28px 60px -32px var(--glow-cy)}
.hub-card:hover::before,.hub-card:focus-within::before{opacity:.75}

.hub-main{display:block;color:inherit;text-decoration:none}
.hub-main:hover,.hub-main:focus-visible{text-decoration:none}
.mos{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);
  aspect-ratio:16/9}
.mos img{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg-2);
  transition:transform .5s var(--ease)}
.mos img:only-child{grid-column:1/-1}
/* A studio with exactly three demos would otherwise leave a hole in the 2x2. */
.mos img:nth-child(3):last-child{grid-column:1/-1;aspect-ratio:auto}
.hub-card:hover .mos img{transform:scale(1.05)}
.hub-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 17px 11px}
.hub-meta strong{color:var(--text-0);font-family:var(--font-display);font-weight:800;
  font-size:1.03rem;letter-spacing:-.01em}
.hub-n{flex:0 0 auto;color:var(--cy);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em}

.hub-top{list-style:none;margin:0;padding:0 17px 15px;display:flex;flex-direction:column;gap:1px}
.hub-top a{display:block;padding:5px 0;color:var(--text-2);font-size:.87rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .16s var(--ease)}
.hub-top a:hover,.hub-top a:focus-visible{color:var(--cy);text-decoration:none}
.hub-top li+li{border-top:1px solid rgba(168,150,255,.07)}

/* ---- shelves ----------------------------------------------------------- */
.shelf{margin-bottom:2.4em}
.card-empty{grid-column:1/-1;padding:28px 20px;text-align:center;color:var(--text-2);
  background:var(--panel);border:1px dashed var(--border-strong);border-radius:var(--radius-md)}

@media (max-width:560px){
  .hub-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .hub-card:hover{transform:none!important}
  .hub-card:hover .mos img{transform:none!important}
}

/* ---- geo-targeted operator promos ------------------------------------- *
 * Every promo slot contains BOTH region variants. Visibility is pure CSS, keyed on `geo-alt`
 * on <html>, which build/lib.js's inline head script sets before first paint and
 * build/assets/app.js confirms. Consequences worth knowing before editing:
 *   - with JavaScript off, the default region's block is the visible one. That is deliberate:
 *     it is what Googlebot indexes, and it is a real block a real visitor sees.
 *   - the default block must never be hidden by a rule that depends on JS having run, or a
 *     no-JS visitor gets an empty gap where the offer should be.
 */
.promo{display:none}
html:not([data-geo]) .promo[data-geo-default]{display:grid}
/* ONE LINE PER REGION CODE IN data/promos.json. CSS cannot match one attribute against another,
   so these cannot be generated from the config — but build/validate.js reads the region codes
   out of promos.json and fails the build if any of them has no rule here, which turns "remember
   to add a line" into a build error rather than a page that silently renders nothing. */
html[data-geo="GB"]  .promo[data-geo="GB"]{display:grid}
html[data-geo="CN"]  .promo[data-geo="CN"]{display:grid}
html[data-geo="ROW"] .promo[data-geo="ROW"]{display:grid}

.promo{position:relative;gap:4px 18px;margin:18px 0 0;padding:16px 18px 14px;
  grid-template-columns:1fr auto;align-items:center;
  background:
    radial-gradient(130% 120% at 0% 0%,rgba(255,197,61,.1),transparent 58%),
    var(--panel-2);
  border:1px solid rgba(255,197,61,.3);border-radius:var(--radius-md);
  box-shadow:0 18px 44px -28px rgba(0,0,0,.9)}
/* The visible "Sponsored" row was removed on 2026-10-28 (owner's instruction). rel="sponsored"
   on the link and aria-label on the <aside> stayed — see promoUnit() in build/lib.js. */
/* The brand logo, when an offer names one in data/promos.json. A `has-logo` class rather than
   :has(), so the column count is decided by the markup: an offer with no logo keeps byte-for-byte
   the layout it had before logos existed, which is what the two GGbet regions still render.
   The files are 2x PNGs with transparent backgrounds; the cap here is the drawn height, and the
   width/height attributes on the <img> hold the box so nothing shifts when it decodes. */
.promo.has-logo{grid-template-columns:auto 1fr auto}
.promo-logo{width:auto;height:auto;max-width:124px;max-height:44px;object-fit:contain}
.promo-bar .promo-logo{max-height:38px;max-width:106px}
.promo-main{min-width:0}
.promo-head{margin:0;font:800 clamp(1.05rem,2.4vw,1.22rem)/1.3 var(--font-display);
  color:var(--gold);letter-spacing:.01em}
.promo-offer{margin:3px 0 0;color:var(--text-0);font-weight:600;
  font-size:clamp(.98rem,2.2vw,1.08rem)}
.promo-act{margin:0}
.promo-cta{white-space:nowrap}
/* The significant conditions are never clamped, truncated or hidden behind a toggle. That is
   the one formatting decision in this file that is a compliance requirement, not taste. */
.promo-terms{grid-column:1/-1;margin:10px 0 0;padding-top:9px;
  border-top:1px solid var(--border);color:var(--text-3);font-size:.775rem;line-height:1.5}
.promo-terms strong{margin-right:6px;padding:1px 6px;border-radius:5px;
  color:#2a1a02;background:var(--gold);font-weight:800}
.promo-terms a{color:var(--text-2)}

/* ---- sticky bar ----
   z-index sits below .demo-wrap.faux-fs (100) and the bar is removed outright while the demo is
   in the CSS fullscreen fallback: a fixed advert over a game someone has just made fullscreen is
   the single most obnoxious thing this site could do. */
.promo-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:
    radial-gradient(120% 180% at 18% 0%,rgba(255,197,61,.1),transparent 60%),
    rgba(5,4,12,.95);
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,var(--gold-2),var(--gold),var(--mg)) 1;
  box-shadow:0 -18px 54px -22px rgba(0,0,0,.98),0 -1px 0 rgba(255,197,61,.22) inset}
@supports (backdrop-filter:blur(6px)){.promo-bar{backdrop-filter:blur(10px)}}
html.fs-lock .promo-bar{display:none}
.promo-bar-inner{position:relative;padding:10px var(--gutter) 11px 0}
.promo-bar .promo{margin:0;padding:2px 54px 2px 0;border:0;border-radius:0;background:none;
  box-shadow:none;gap:2px 14px}
.promo-bar .promo-tag{margin-bottom:2px}
.promo-bar .promo-head{font-size:1.02rem}
.promo-bar .promo-cta{padding-left:26px;padding-right:26px;font-size:1rem}
.promo-bar .promo-terms{margin-top:6px;padding-top:6px;font-size:.73rem}
.promo-x{position:absolute;top:6px;right:0;width:34px;height:34px;display:grid;place-items:center;
  color:var(--text-2);font-size:24px;line-height:1;background:rgba(255,255,255,.05);
  border:1px solid var(--border);border-radius:9px;cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.promo-x:hover,.promo-x:focus-visible{color:var(--text-0);border-color:var(--gold)}
/* The terms disclosure inside the bar. app.js opens it from 860px up, where there is room to
   print them outright; below that they are one tap away behind the age and the words
   "significant terms". Never clamp or inner-scroll this. */
.promo-tc{grid-column:1/-1;margin-top:8px;padding-top:7px;border-top:1px solid var(--border)}
.promo-tc>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  color:var(--text-2);font-size:.76rem}
.promo-tc>summary::-webkit-details-marker{display:none}
.promo-tc>summary strong{padding:1px 6px;border-radius:5px;color:#2a1a02;background:var(--gold);
  font-weight:800}
.promo-tc>summary span{text-decoration:underline;text-underline-offset:2px}
.promo-tc>summary:hover span,.promo-tc>summary:focus-visible span{color:var(--text-0)}
.promo-tc[open]>summary span{text-decoration:none}
.promo-tc .promo-terms{margin-top:7px;padding-top:0;border-top:0}
@media (min-width:860px){.promo-tc[open]>summary{display:none}}

/* The bar is position:fixed, so it costs no layout shift when it appears — but it would cover
   the bottom of the footer, which is where the region switcher lives. --promo-bar-h is measured
   from the bar itself by app.js and re-measured on resize, on a region switch and when the terms
   are opened: the height changes with all three, and a hardcoded value leaves either a dead gap
   or a footer nobody can reach. */
html.has-promo-bar body{padding-bottom:calc(var(--promo-bar-h,140px) + 14px)}

@media (max-width:620px){
  .promo{grid-template-columns:1fr}
  /* Logo beside the name rather than stacked above it: the sticky bar is already ~140px of
     fixed advert over a 390px screen and a logo on its own row makes it taller again. */
  .promo.has-logo{grid-template-columns:auto 1fr;column-gap:13px}
  .promo.has-logo .promo-act{grid-column:1/-1}
  .promo-logo{max-width:92px;max-height:37px}
  .promo-bar .promo-logo{max-height:33px;max-width:84px}
  .promo-act{margin-top:10px}
  .promo-cta{width:100%}
  /* The bar inner sets padding-left:0 in the shorthand above, which overrides .container's
     gutter. On a wide screen the centred container hides that; at phone width it put the brand
     flush against the glass, and a logo there was clipped by the viewport edge. */
  .promo-bar-inner{padding-left:var(--gutter);padding-right:0}
  .promo-bar .promo{padding-right:44px}
  .promo-bar .promo-act{margin-top:8px}
  .promo-x{top:0}
}
@media (prefers-reduced-motion:reduce){
  .promo-cta:hover{transform:none!important}
}


/* ---------- blog ---------------------------------------------------------------------------
   The blog reuses the panel system wholesale: a post is .section blocks and the index is
   .faq-grid cards. Only three things needed new rules — the byline, headings inside a card
   that are now links, and keeping long post titles from blowing out the prev/next strip. */
.byline{margin:.6rem 0 0;font-size:.92rem;color:var(--muted)}
.byline a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(212,175,55,.35)}
.byline a:hover{border-bottom-color:var(--gold)}
.faq-card h3{margin:.35rem 0 .5rem;font-size:1.06rem;line-height:1.35}
.faq-card h3 a{color:inherit;text-decoration:none}
.faq-card h3 a:hover{color:var(--gold)}
.faq-card .eyebrow{margin:0;font-size:.74rem}
article .section:first-of-type{margin-top:0}


/* ============================================================================================
   VAULT FLOOR — the homepage's epic layer (approved 2026-10-30)

   The v3 palette was only ever a colour list: every panel sat flat on the same navy at the same
   depth, so a long page read as a list. This block spends the budget on DEPTH and SCALE instead
   and adds no new colour: three planes (the existing aurora, a perspective floor, glass on top),
   one enormous gold numeral, and asymmetry where there was a stack of equal rows.

   Everything here is scoped to a class the homepage opts into — .vhero, .bento, .srule, .mq.
   No other page type changes until those classes are used on it. Three hard rules it keeps:
     - Gold is still value only. Every gold thing below is a number.
     - No images. The reel wall is text on gradients, so it costs zero requests, cannot 404 the
       way the Uppercut Gaming thumbnails do, and spends none of the eager-image budget.
     - Transform and opacity only. Nothing here animates a property that triggers layout.
   ============================================================================================ */

/* ---- the hero, as a room ---- */
.vhero{min-height:clamp(540px,72vh,720px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  padding:clamp(40px,5vw,76px) clamp(20px,4vw,48px) clamp(52px,6vw,88px)}
/* flex-direction MATTERS: .hero has a dozen direct children, so a row here lays the heading,
     the lead, the search form and the stats out side by side in twelve narrow columns. It did
     exactly that the first time. */
.vhero>*{position:relative;z-index:2;width:100%;max-width:1040px}
.vhero .eyebrow{width:auto;max-width:none}
.vhero .lead{max-width:62ch;margin-left:auto;margin-right:auto}
.vhero .site-search{margin-left:auto;margin-right:auto;justify-content:center;max-width:680px}
.vhero .hero-cta{justify-content:center}
.vhero .stats{justify-content:center;max-width:760px;margin-left:auto;margin-right:auto;
  grid-template-columns:repeat(auto-fit,minmax(120px,max-content))}
.vhero .stats li{padding-left:0;padding-top:14px;text-align:center;align-items:center}
.vhero .stats li::before{left:50%;right:auto;top:0;bottom:auto;width:34px;height:3px;
  transform:translateX(-50%)}
/* the rotating conic halo fights the reel wall for the same corner — the wall wins */
.vhero::after{opacity:.1}

/* plane 2a: the reel wall. Each column is one <ul> duplicated head-to-tail, so translating it
   exactly -50% loops seamlessly with a single keyframe and no JS. */
.vwall{position:absolute;inset:0;z-index:0;display:flex;gap:14px;padding:0 10px;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(118% 88% at 50% 38%,#000 32%,transparent 78%);
          mask-image:radial-gradient(118% 88% at 50% 38%,#000 32%,transparent 78%)}
.vwall ul{list-style:none;margin:0;padding:0;flex:1;min-width:0;opacity:.5;
  display:flex;flex-direction:column;gap:14px;animation:vup 46s linear infinite;will-change:transform}
/* The scrim. Without it the wall is not a backdrop, it is the page: the giant numeral and the
     lead copy sat on top of full-strength gradient tiles and neither could be read. */
.vwall::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(64% 58% at 50% 50%,rgba(5,4,12,.9) 0%,rgba(5,4,12,.76) 42%,rgba(5,4,12,.38) 100%),
    linear-gradient(180deg,rgba(5,4,12,.5),transparent 22%,transparent 72%,rgba(5,4,12,.72))}
.vwall ul:nth-child(2n){animation-name:vdown;animation-duration:56s}
.vwall ul:nth-child(3){animation-duration:66s}
.vwall ul:nth-child(5){animation-duration:38s}
.vwall ul:nth-child(7){animation-duration:60s}
.vwall li{flex:none;height:116px;border-radius:14px;border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:flex-end;padding:9px;overflow:hidden;
  font:600 10.5px/1.3 var(--font-display);color:rgba(255,255,255,.5);
  text-shadow:0 1px 6px rgba(0,0,0,.7)}
@keyframes vup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes vdown{from{transform:translateY(-50%)}to{transform:translateY(0)}}

/* plane 2b: the floor. Two repeating gradients on a rotated plane — this is the single cheapest
   thing on the page and the one that turns a dark background into a room. */
.vfloor{position:absolute;left:-30%;right:-30%;bottom:-2px;height:300px;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(46,230,255,.26) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(0deg,rgba(200,64,255,.2) 0 1px,transparent 1px 64px);
  transform:perspective(420px) rotateX(74deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 72%);
          mask-image:linear-gradient(to top,#000 0%,transparent 72%)}

/* ---- the number. It lives INSIDE the h1, so the heading still reads as a heading. ---- */
.vhero h1{margin:0 0 24px;text-shadow:none;letter-spacing:-.03em}
.vnum{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(78px,13.5vw,206px);line-height:.78;letter-spacing:-.055em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 44px rgba(255,197,61,.4))}
.vsub{display:block;margin-top:12px;font-size:clamp(25px,3.6vw,46px);line-height:1.12;
  font-weight:600;color:var(--text-0)}
.vhero h1 .vsub em{font-style:normal;background:var(--grad-main);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:none}

/* ---- bento: one 2x2 tile and four small ones, instead of another equal row ---- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.bento>li{list-style:none;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:22px}
.bento .b-wide{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;gap:16px}
.bento .b-wide .grid{margin:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.bento .b-wide .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.bento .b-wide .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bento h3{margin:0 0 8px;font-size:1.05rem;color:var(--text-0)}
.bento .btn{white-space:nowrap;padding:0 20px}
.bento .b-wide{justify-content:flex-start}
.bento .b-wide>.sect-link{margin-top:auto}
.bento p{margin:0;color:var(--text-2);font-size:.9rem}
.bento .b-num{margin:0 0 6px;font-family:var(--font-display);font-weight:700;font-size:2.7rem;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.b-rows{list-style:none;margin:0;padding:0}
.b-rows li{border-bottom:1px solid var(--border)}
.b-rows a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 0;color:var(--text-1);font-size:.9rem}
.b-rows a:hover{color:var(--text-0);text-decoration:none}
.b-rows b{font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento .b-wide{grid-column:span 2;grid-row:auto}
}
@media (max-width:620px){
  .bento{grid-template-columns:1fr}
  .bento .b-wide{grid-column:span 1}
}

/* ---- the numbered section rule: 01 — heading — hairline to the edge ---- */
.srule{display:flex;align-items:baseline;gap:18px;margin:0 0 20px}
.srule .sidx{flex:none;font:700 .8rem/1 var(--font-display);letter-spacing:.14em;color:var(--mg)}
/* h2::before paints the 46x4 gradient dash and .section>h2::before turns it off again — but the
   heading now sits one level deeper, inside .srule, so neither of those selectors reaches it and
   the dash came back floating above the rule. Both resets have to be repeated here. */
.srule h2{margin:0;padding-top:0;border-top:0;font-size:clamp(1.55rem,3vw,2.35rem);
  color:var(--text-0);letter-spacing:-.03em}
.srule h2::before{display:none}
.srule .sline{flex:1;height:1px;min-width:20px;
  background:linear-gradient(90deg,var(--border-strong),transparent)}
.srule .slink{flex:none;font-size:.9rem;font-weight:600;white-space:nowrap}
@media (max-width:620px){.srule{flex-wrap:wrap;gap:10px}.srule .sline{display:none}}

/* ---- the studio marquee. Real links, so it ADDS crawl surface rather than decorating. ---- */
.mq{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq ul{list-style:none;margin:0 0 12px;padding:0;display:flex;gap:12px;width:max-content;
  animation:vslide 50s linear infinite;will-change:transform}
.mq ul+ul{margin-bottom:0;animation-direction:reverse;animation-duration:64s}
.mq:hover ul,.mq:focus-within ul{animation-play-state:paused}
@keyframes vslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq a{display:block;padding:11px 18px;border-radius:11px;border:1px solid var(--border);
  background:rgba(255,255,255,.025);font:600 .88rem/1 var(--font-body);color:var(--text-2);
  white-space:nowrap}
.mq a:hover{color:var(--text-0);border-color:var(--cy);text-decoration:none}

@media (max-width:900px){
  .vwall{gap:9px}
  .vwall li{height:92px;font-size:10px;border-radius:11px}
  .vfloor{height:200px;transform:perspective(300px) rotateX(74deg)}
}

/* Motion here is decoration, every bit of it. Under reduced-motion the wall and the marquee
   simply stop — they are still legible, because both are made of real text. */
@media (prefers-reduced-motion:reduce){
  .vwall ul,.mq ul{animation:none}
}

/* The seven wall gradients. Classes, not inline styles: 126 tiles x ~60 bytes of inline
   gradient is 7KB of identical markup on the one page that most needs to paint fast. */
.vwall li.vg0{background:linear-gradient(140deg,#ff3d9a,#c840ff)}
.vwall li.vg1{background:linear-gradient(140deg,#2ee6ff,#1a4fd6)}
.vwall li.vg2{background:linear-gradient(140deg,#ffc53d,#ff5e2e)}
.vwall li.vg3{background:linear-gradient(140deg,#30e3a0,#1aa8d6)}
.vwall li.vg4{background:linear-gradient(140deg,#c840ff,#4b2ad6)}
.vwall li.vg5{background:linear-gradient(140deg,#ff6b3d,#ff3d9a)}
.vwall li.vg6{background:linear-gradient(140deg,#6ee7ff,#c840ff)}

/* ---- phase D: the rhythm, everywhere ------------------------------------------------------
   Game pages deliberately do NOT get the reel wall or a giant numeral. The demo iframe is the
   entire point of those 19,000 pages and anything above it pushes it down the phone screen —
   the homepage's job is to impress, a game page's job is to start the game. What they do get is
   the same hairline rule the homepage's numbered headings use. .section>h2 is already a flex row
   (icon chip + title), so one ::after fills the remainder and every section on every page type
   picks it up at no cost. */
.section>h2::after{content:"";flex:1;height:1px;min-width:20px;align-self:center;
  background:linear-gradient(90deg,var(--border-strong),transparent)}