/* ===========================================================================
   Nerdania "Vegas" layer — neon, marquee bulbs, shimmer and motion, applied on
   top of the existing theme so nothing below it needs to change.
   Everything animates with transform/opacity only, pauses when the tab is
   hidden, and honours the player's reduced-motion setting and the on-page
   Calm Mode switch.
   =========================================================================== */
:root{
  --v-pink:#ff2d95; --v-cyan:#22e6ff; --v-gold:#ffd51f; --v-lime:#3dff9e;
  --v-violet:#b86cff; --v-orange:#ff8a38;
  --v-speed:1;
}

/* ---------- animated casino-carpet backdrop ---------- */
body{position:relative;background-color:#05070f}
body::before{
  content:"";position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, rgba(255,45,149,.20), transparent 62%),
    radial-gradient(34vmax 34vmax at 88% 12%, rgba(34,230,255,.18), transparent 62%),
    radial-gradient(40vmax 40vmax at 72% 88%, rgba(184,108,255,.18), transparent 62%),
    radial-gradient(30vmax 30vmax at 22% 92%, rgba(61,255,158,.14), transparent 62%);
  animation:v-drift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes v-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5vmax,-2vmax,0) scale(1.06)}
  100%{transform:translate3d(-2vmax,2.5vmax,0) scale(1.02)}
}
/* faint sweeping searchlights */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.30;
  background:conic-gradient(from 0deg at 50% 120%,
    transparent 0deg, rgba(255,213,31,.16) 10deg, transparent 22deg,
    transparent 160deg, rgba(34,230,255,.14) 172deg, transparent 186deg);
  animation:v-sweep 18s linear infinite;
  will-change:transform;
}
@keyframes v-sweep{to{transform:rotate(360deg)}}

/* ---------- floating sparkle / emoji field ---------- */
/* `clip` rather than `hidden` so it can never create a scroll container or break sticky */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip}
.v-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.v-float{
  position:absolute;bottom:-12vh;font-size:var(--s,26px);opacity:0;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.35));
  animation:v-rise var(--d,17s) linear var(--delay,0s) infinite;
  will-change:transform,opacity;
}
@keyframes v-rise{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(.7);opacity:0}
  8%{opacity:.85}
  88%{opacity:.6}
  100%{transform:translate3d(var(--dx,30px),-118vh,0) rotate(var(--rot,320deg)) scale(1.15);opacity:0}
}
main,.site-header,.site-footer,.ng-header,.ng-footer,section,footer{position:relative;z-index:1}

/* ---------- marquee bulb frame ---------- */
.v-bulbs{position:relative}
.v-bulbs::before,.v-bulbs::after{
  content:"";position:absolute;left:0;right:0;height:10px;pointer-events:none;z-index:3;
  background-image:radial-gradient(circle, #fff6c2 0 2.4px, rgba(255,213,31,.95) 2.4px 4px, transparent 4.4px);
  background-size:26px 10px;background-repeat:repeat-x;
  filter:drop-shadow(0 0 6px rgba(255,213,31,.9));
  animation:v-chase 1.05s steps(2) infinite;
}
.v-bulbs::before{top:-5px}
.v-bulbs::after{bottom:-5px;animation-delay:.52s}
@keyframes v-chase{to{background-position:26px 0}}

/* ---------- neon heading treatment ---------- */
.hero h1,.hub-hero h1,.section-title,.home-cat h3{position:relative}
.hero h1,.hub-hero h1{
  animation:v-neon 3.4s ease-in-out infinite;
  will-change:filter;
}
@keyframes v-neon{
  0%,100%{filter:drop-shadow(0 0 10px rgba(255,213,31,.55)) drop-shadow(0 0 26px rgba(255,138,0,.35))}
  50%    {filter:drop-shadow(0 0 20px rgba(255,213,31,.95)) drop-shadow(0 0 48px rgba(255,45,149,.55))}
}
/* A light sweeps across the heading text itself. Clipped to the glyphs so it never
   paints a bright rectangle over the empty space beside a centred heading. */
.v-shine-text{
  background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 49%,transparent 58%);
  background-size:280% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  animation:v-shine 4.6s ease-in-out infinite;
}
@keyframes v-shine{0%{background-position:180% 0}55%,100%{background-position:-80% 0}}

.section-title span,.section-kicker{
  animation:v-hue 7s linear infinite;
}
@keyframes v-hue{to{filter:hue-rotate(360deg)}}

/* ---------- jackpot stat counters ---------- */
.hub-totals{gap:10px 14px}
.hub-totals span{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,213,31,.45);border-radius:999px;padding:7px 15px;
  box-shadow:0 0 0 rgba(255,213,31,.5);
  animation:v-pulse 2.6s ease-in-out infinite;
}
.hub-totals span:nth-child(2){animation-delay:.35s}
.hub-totals span:nth-child(3){animation-delay:.7s}
@keyframes v-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,213,31,.45);transform:translateY(0)}
  50%{box-shadow:0 0 22px 3px rgba(255,213,31,.30);transform:translateY(-3px)}
}
.v-roll{display:inline-block;font-variant-numeric:tabular-nums}

/* ---------- ticker ---------- */
.v-ticker{
  overflow:hidden;white-space:nowrap;border-top:2px solid rgba(255,213,31,.5);
  border-bottom:2px solid rgba(255,213,31,.5);
  background:linear-gradient(90deg,rgba(255,45,149,.18),rgba(34,230,255,.14),rgba(255,213,31,.18));
  padding:9px 0;margin:0;position:relative;z-index:2
}
.v-ticker-track{display:inline-block;will-change:transform;animation:v-ticker 38s linear infinite}
.v-ticker b{color:var(--v-gold)}
.v-ticker i{font-style:normal;opacity:.55;padding:0 14px;color:var(--v-cyan)}
.v-ticker span{font:900 .82rem/1 Inter,system-ui,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;padding:0 4px}
@keyframes v-ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- game cards: tilt, glow, shine ---------- */
.hub-card{position:relative}
.hub-card::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
  background-size:260% 100%;background-position:190% 0;opacity:0;transition:opacity .2s;
}
.hub-card:hover::after,.hub-card:focus-visible::after{opacity:1;animation:v-cardshine .85s ease-out}
@keyframes v-cardshine{from{background-position:190% 0}to{background-position:-70% 0}}
.hub-card:hover{transform:translateY(-8px) rotate(-.5deg) scale(1.02);
  border-color:var(--v-gold);box-shadow:0 22px 60px rgba(255,45,149,.30),0 0 30px rgba(255,213,31,.30)}
.hub-card.is-top{border-color:rgba(255,213,31,.6);animation:v-topglow 4.2s ease-in-out infinite}
.hub-card.is-top:nth-child(2){animation-delay:.5s}
.hub-card.is-top:nth-child(3){animation-delay:1s}
.hub-card.is-top:nth-child(4){animation-delay:1.5s}
@keyframes v-topglow{
  0%,100%{box-shadow:0 18px 48px rgba(0,0,0,.42),0 0 16px rgba(255,213,31,.30);border-color:rgba(255,213,31,.55)}
  33%    {box-shadow:0 18px 48px rgba(0,0,0,.42),0 0 26px rgba(255,45,149,.45);border-color:rgba(255,45,149,.65)}
  66%    {box-shadow:0 18px 48px rgba(0,0,0,.42),0 0 26px rgba(34,230,255,.45);border-color:rgba(34,230,255,.65)}
}
.hub-rank{
  position:absolute;top:9px;left:9px;z-index:3;
  padding:5px 11px;border-radius:999px;font:1000 .72rem Inter,system-ui,sans-serif;
  background:linear-gradient(180deg,#ffe066,#ffab00);color:#231600;
  box-shadow:0 4px 14px rgba(0,0,0,.45);letter-spacing:.04em;
  animation:v-bob 2.4s ease-in-out infinite
}
.hub-rank.rank-1{background:linear-gradient(180deg,#fff3a8,#ffc400);animation-duration:1.7s}
.hub-rank.rank-2{background:linear-gradient(180deg,#e6f1ff,#a8c4e6);color:#101a26}
.hub-rank.rank-3{background:linear-gradient(180deg,#ffd0a8,#e08c46);color:#2a1400}
@keyframes v-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.hub-body .play{animation:v-pulse 2.2s ease-in-out infinite}

/* ---------- category rows + more tab ---------- */
.home-cat{padding:18px 14px 8px;border-radius:20px;margin:26px 0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.10)}
.home-cat h3{align-items:center}
.cat-ico{display:inline-block;font-size:1.5em;animation:v-bob 3s ease-in-out infinite}
.home-cat-sub{margin:0 0 10px;font:900 .7rem Inter,system-ui,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--v-gold);opacity:.9}
.home-cat-more{margin:4px 0 6px;text-align:center}
.more-tab{
  display:inline-flex;align-items:center;gap:10px;padding:11px 22px;border-radius:999px;
  font:1000 .85rem Inter,system-ui,sans-serif;text-decoration:none;color:#151000;
  background:linear-gradient(180deg,#ffe066,#ffc400);
  box-shadow:0 8px 24px rgba(255,196,0,.32);
  transition:transform .18s,box-shadow .18s;
}
.more-tab b{background:rgba(0,0,0,.22);color:#fff;border-radius:999px;padding:3px 9px;font-size:.74rem}
.more-tab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 34px rgba(255,196,0,.5)}

/* ---------- buttons and chips ---------- */
.cta,.start-game,.symphony-primary{position:relative;overflow:hidden}
.cta::after,.start-game::after,.symphony-primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  background-size:260% 100%;animation:v-shine 3.6s ease-in-out infinite;pointer-events:none
}
.hub-chips a,.hub-chips button{transition:transform .16s,box-shadow .16s}
.hub-chips a:hover,.hub-chips button:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 26px rgba(255,213,31,.4)}
.logo-badge,.ng-badge{animation:v-bob 3.4s ease-in-out infinite}

/* ---------- confetti burst (fired by vegas.js) ---------- */
.v-confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.v-confetti i{position:absolute;width:9px;height:14px;border-radius:2px;
  animation:v-fall var(--d,2.4s) cubic-bezier(.25,.6,.4,1) forwards}
@keyframes v-fall{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:1}
  100%{transform:translate3d(var(--dx,0),108vh,0) rotate(var(--rot,720deg));opacity:0}
}

/* ---------- calm mode switch ---------- */
.v-calm{
  position:fixed;right:12px;bottom:12px;z-index:70;
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(7,17,30,.88);color:#fff;
  font:900 .72rem Inter,system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.5)
}
.v-calm:hover{border-color:var(--v-gold);color:var(--v-gold)}

/* ---------- respect the player's wishes ---------- */
@media (prefers-reduced-motion:reduce){
  body.v-auto-calm *,body.v-auto-calm *::before,body.v-auto-calm *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  body.v-auto-calm .v-field,body.v-auto-calm body::after{display:none}
}
body.v-calm-on .v-field,body.v-calm-on .v-confetti{display:none}
body.v-calm-on::after{display:none}
body.v-calm-on *,body.v-calm-on *::before,body.v-calm-on *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important}
body.v-calm-on .hub-card:hover{transform:translateY(-4px)}

/* pause everything while the tab is in the background (set by vegas.js) */
body.v-paused *,body.v-paused *::before,body.v-paused *::after{animation-play-state:paused!important}

/* ---------- phones: same sparkle, less work ---------- */
@media (max-width:760px){
  body::after{opacity:.18}
  .v-bulbs::before,.v-bulbs::after{background-size:20px 8px;height:8px}
  .hub-card.is-top::before{filter:blur(5px)}
  .home-cat{padding:14px 10px 6px}
}

/* =========================================================================
   FULL-SCREEN PLAY MODE
   While a game is running the page is just the game plus Return / End game.
   All the decoration below stands down — the sparkle belongs on the pages
   that sell the games, not on top of the game you are trying to play.
   ========================================================================= */
body.ng-play{overflow:hidden!important;background:#05070f}
body.ng-play .v-field,
body.ng-play .v-ticker,
body.ng-play .v-calm,
body.ng-play .site-header,
body.ng-play .site-footer,
body.ng-play .ng-header,
body.ng-play .ng-footer,
body.ng-play .ng-more,
body.ng-play .ng-relgrid,
body.ng-play .ng-crumb,
body.ng-play .share-game-card,
body.ng-play .share-tools,
body.ng-play .game-info-grid,
body.ng-play .hub-grid,
body.ng-play .how,
body.ng-play .settings,
body.ng-play .legal-bar,
body.ng-play .rules,
body.ng-play .record,
body.ng-play .mode-group{display:none!important}
/* and the page underneath must not be scrollable to reveal them */
html:has(body.ng-play){overflow:hidden}
body.ng-play::after{display:none}
body.ng-play *,body.ng-play *::before,body.ng-play *::after{
  animation-name:none!important}
/* the confetti that celebrates a cleared level is a game reward, so it stays */
body.ng-play .v-confetti i{animation-name:v-fall!important}
body.ng-play .v-bulbs::before,body.ng-play .v-bulbs::after{display:none}

.ng-play-stage{
  position:fixed!important;inset:0!important;z-index:9000!important;
  margin:0!important;border-radius:0!important;border:0!important;
  width:100vw!important;max-width:none!important;height:100dvh!important;
  padding-top:env(safe-area-inset-top)!important;
  padding-bottom:calc(env(safe-area-inset-bottom) + 64px)!important;
  background:#07111e!important;box-shadow:none!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important}
.ng-play-stage .canvas-wrap,
.ng-play-stage .symphony-stage{flex:1 1 auto!important;min-height:0!important}
.ng-play-stage canvas{width:100%!important;height:100%!important}

/* the two controls, on every game */
.ng-play-bar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 10px);
  z-index:9500;display:flex;gap:10px;pointer-events:none}
.ng-play-bar button{pointer-events:auto}
.ng-play-return,.ng-play-end{
  font:1000 .82rem Inter,system-ui,sans-serif;letter-spacing:.03em;
  padding:11px 20px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(7,17,30,.92);color:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.55);backdrop-filter:blur(6px);
  min-height:44px}
.ng-play-return:hover{border-color:#ffd51f;color:#ffd51f}
.ng-play-end{background:linear-gradient(180deg,#ff5f7a,#e0263f);border-color:rgba(255,255,255,.35)}
.ng-play-end:hover{filter:brightness(1.12)}
/* Return already leaves full screen, so the game's own fullscreen toggle is redundant here. */
body.ng-play #fullScreen,body.ng-play #fullscreenBtn{display:none!important}

/* inside an arcade HUD the buttons sit inline, not floating */
.hud .ng-play-return,.hud .ng-play-end{
  position:static;box-shadow:none;backdrop-filter:none;padding:7px 13px;font-size:.72rem;min-height:40px}
@media (max-width:420px){
  .ng-play-return,.ng-play-end{padding:10px 14px;font-size:.74rem}
  .hud .ng-play-return,.hud .ng-play-end{padding:6px 9px;font-size:.66rem}
}

/* =========================================================================
   EXTRA SHOWTIME — only on the pages that present the games
   ========================================================================= */

/* ---- "Mom & Dad Approved" badge ---- */
.approved,.ng-approved{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:999px;
  background:linear-gradient(120deg,rgba(61,255,158,.20),rgba(34,230,255,.18),rgba(255,213,31,.20),rgba(61,255,158,.20));
  background-size:300% 100%;
  border:2px solid transparent;
  animation:v-approved-flow 6s linear infinite, v-approved-pop 3.2s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(61,255,158,.45) inset, 0 6px 22px rgba(61,255,158,.20)}
@keyframes v-approved-flow{to{background-position:300% 0}}
@keyframes v-approved-pop{
  0%,100%{transform:scale(1);box-shadow:0 0 0 1px rgba(61,255,158,.45) inset,0 6px 22px rgba(61,255,158,.18)}
  50%{transform:scale(1.035);box-shadow:0 0 0 1px rgba(255,213,31,.8) inset,0 8px 30px rgba(255,213,31,.38)}}
.approved::before,.ng-approved::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 49%,transparent 58%);
  background-size:260% 100%;animation:v-shine 3.2s ease-in-out infinite}
/* the tick mark gets its own little celebration */
.approved::after,.ng-approved::after{
  content:"";position:absolute;left:8px;top:50%;width:18px;height:18px;margin-top:-9px;
  border-radius:50%;background:radial-gradient(circle,rgba(61,255,158,.85),transparent 70%);
  animation:v-tick 3.2s ease-in-out infinite;pointer-events:none}
@keyframes v-tick{0%,100%{transform:scale(.6);opacity:.25}50%{transform:scale(1.5);opacity:.75}}

/* ---- "Play free" on every card: bounce + flash ---- */
.hub-body .play{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#ffe98a,#ffc400)}
.hub-card.v-live .play{
  animation:v-playbounce 1.5s cubic-bezier(.28,.84,.42,1) infinite, v-playflash 2.4s ease-in-out infinite!important}
@keyframes v-playbounce{
  0%,100%{transform:translateY(0) scale(1)}
  18%{transform:translateY(-6px) scale(1.06)}
  34%{transform:translateY(0) scale(.98)}
  46%{transform:translateY(-3px) scale(1.03)}
  60%{transform:translateY(0) scale(1)}}
@keyframes v-playflash{
  0%,100%{box-shadow:0 0 0 0 rgba(255,213,31,.55);filter:brightness(1)}
  50%{box-shadow:0 0 22px 6px rgba(255,213,31,.55);filter:brightness(1.18)}}
.hub-card.v-live:nth-child(2) .play{animation-delay:.18s,.3s}
.hub-card.v-live:nth-child(3) .play{animation-delay:.36s,.6s}
.hub-card.v-live:nth-child(4) .play{animation-delay:.54s,.9s}

/* ---- the big call-to-action buttons ---- */
.cta,.more-tab,.start-game,.symphony-primary,#start.primary{
  animation:v-ctapulse 2.1s ease-in-out infinite}
@keyframes v-ctapulse{
  0%,100%{transform:translateY(0) scale(1);box-shadow:0 8px 24px rgba(255,196,0,.28)}
  50%{transform:translateY(-4px) scale(1.025);box-shadow:0 16px 38px rgba(255,196,0,.52)}}
.cta:hover,.more-tab:hover{animation-play-state:paused}

/* ---- the logo: bouncing brain, shimmering wordmark, neon flicker ---- */
.logo-badge,.ng-badge{
  animation:v-logobounce 1.9s cubic-bezier(.3,.7,.4,1) infinite!important;
  box-shadow:0 0 18px rgba(255,159,28,.55)}
@keyframes v-logobounce{
  0%,100%{transform:translateY(0) rotate(-4deg) scale(1)}
  25%{transform:translateY(-7px) rotate(4deg) scale(1.1)}
  50%{transform:translateY(0) rotate(-2deg) scale(.96)}
  72%{transform:translateY(-3px) rotate(2deg) scale(1.04)}}
.logo strong,.ng-logo strong{
  background:linear-gradient(90deg,#ffd51f,#ff2d95,#22e6ff,#3dff9e,#ffd51f);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:v-logoflow 5s linear infinite}
@keyframes v-logoflow{to{background-position:300% 0}}
.logo,.ng-logo{animation:v-flicker 7s steps(1) infinite}
@keyframes v-flicker{
  0%,96%,100%{opacity:1}
  97%{opacity:.55}
  98%{opacity:1}
  99%{opacity:.7}}

/* ---- category chips get a hop on the way in ---- */
.hub-chips a,.hub-chips button{animation:v-chiphop 5s ease-in-out infinite}
.hub-chips a:nth-child(2n){animation-delay:.4s}
.hub-chips a:nth-child(3n){animation-delay:.8s}
.hub-chips a:nth-child(5n){animation-delay:1.2s}
@keyframes v-chiphop{0%,86%,100%{transform:translateY(0)}92%{transform:translateY(-5px)}}

/* ---- rank badge sparkle for the #1 game ---- */
.hub-rank.rank-1::after{
  content:"";position:absolute;inset:-4px;border-radius:999px;pointer-events:none;
  box-shadow:0 0 14px 3px rgba(255,213,31,.75);animation:v-tick 1.6s ease-in-out infinite}

/* Calm mode and reduced motion switch all of the above off as well */
body.v-calm-on .hub-body .play,
body.v-calm-on .cta,body.v-calm-on .more-tab,
body.v-calm-on .approved,body.v-calm-on .ng-approved,
body.v-calm-on .logo-badge,body.v-calm-on .ng-badge{animation-name:none!important}
body.v-calm-on .logo strong,body.v-calm-on .ng-logo strong{
  -webkit-text-fill-color:#ffd51f;color:#ffd51f}

/* ---------- the APK / web-app shop ---------- */
.apk-dl.is-paid,#install.is-paid{
  background:linear-gradient(180deg,#ffe066,#ffab00);color:#231600;border-color:transparent;font-weight:1000}
.buy-page{padding:26px 0 44px}
.buy-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start}
.buy-art img{width:100%;height:auto;border-radius:16px;border:1px solid rgba(255,255,255,.14)}
.buy-art h1{margin:16px 0 4px;font-size:clamp(1.8rem,5vw,2.8rem);text-transform:uppercase;line-height:1}
.buy-art h1 span{color:var(--v-gold)}
.buy-eyebrow{margin:0;font:900 .7rem Inter,system-ui,sans-serif;letter-spacing:.14em;color:var(--v-cyan)}
.buy-price{margin:10px 0 14px;font:1000 2.6rem/1 Inter,system-ui,sans-serif;color:var(--v-gold)}
.buy-price small{font-size:.85rem;color:#9fb3c8;font-weight:700;letter-spacing:.04em}
.buy-list{list-style:none;padding:0;margin:0 0 14px}
.buy-list li{padding:6px 0;color:#dbe5f3;font-size:.94rem}
.buy-free{font-size:.86rem;color:#9fb3c8}
.buy-form{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px}
.buy-form h2{margin:0 0 4px;font-size:1.3rem}
.buy-sub{margin:0 0 16px;font-size:.82rem;color:#9fb3c8}
.buy-form label{display:block;margin:14px 0 6px;font:900 .78rem Inter,system-ui,sans-serif;color:#e7eefc}
.buy-form label small{font-weight:600;color:#9fb3c8}
.buy-form input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.22);
  background:rgba(3,7,18,.7);color:#fff;font:inherit;font-size:16px}
.buy-form input:focus{outline:0;border-color:var(--v-gold);box-shadow:0 0 0 3px rgba(255,213,31,.2)}
#card-container{margin:6px 0 4px;padding:4px;border-radius:11px;background:rgba(255,255,255,.96);min-height:60px}
.buy-pay{display:block;width:100%;text-align:center;margin-top:18px}
.buy-status{margin:12px 0 0;font-size:.86rem;color:#9fe8c9;min-height:1.2em}
.buy-status.is-bad{color:#ff9db0}
.buy-fine{margin:12px 0 0;font-size:.8rem;color:#9fb3c8}
.buy-sandbox{margin-top:12px;padding:9px 12px;border-radius:10px;font-size:.78rem;
  background:rgba(255,138,56,.14);border:1px solid rgba(255,138,56,.5);color:#ffd0a8}
.thanks-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,213,31,.35);border-radius:18px;padding:26px;max-width:680px}
.licence-box{margin:18px 0;padding:18px;border-radius:14px;text-align:center;
  background:rgba(3,7,18,.6);border:2px dashed rgba(255,213,31,.55)}
.licence-box span{display:block;font:900 .68rem Inter,system-ui,sans-serif;letter-spacing:.12em;color:var(--v-gold)}
.licence-box strong{display:block;margin:10px 0 12px;font:1000 clamp(1.1rem,4.4vw,1.7rem) ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;color:#fff;word-break:break-all}
.buy-help{margin:16px 0 0;font-size:.88rem;color:#cdd8ea}
.buy-help summary{cursor:pointer;font-weight:900;color:#fff}
.buy-help ol{margin:10px 0 0 18px;line-height:1.7}
@media (max-width:820px){.buy-grid{grid-template-columns:1fr}}

/* ---------- legal pages + footer legal bar ---------- */
.legal{max-width:820px;padding:26px 0 50px}
.legal h1{font-size:clamp(1.9rem,6vw,3rem);text-transform:uppercase;line-height:1;margin:0 0 6px}
.legal h1 span{color:var(--ng-yellow,#ffd51f)}
.legal-date{color:#9fb3c8;font-size:.82rem;margin:0 0 22px}
.legal h2{margin:26px 0 8px;font-size:1.1rem;color:var(--ng-yellow,#ffd51f)}
.legal p,.legal li{color:#d6e0ee;line-height:1.75;font-size:.94rem}
.legal ul{padding-left:20px}
.legal-callout{margin:18px 0;padding:16px 18px;border-radius:14px;
  background:rgba(255,213,31,.09);border:1px solid rgba(255,213,31,.45)}
.legal-callout p{margin:0 0 8px}.legal-callout p:last-child{margin:0}
.legal-foot{margin-top:30px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:.88rem}
.legal-bar{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center;align-items:center;
  padding:14px 0 4px;font-size:.82rem}
.legal-bar a{color:#cdd8ea;text-decoration:none;font-weight:700}
.legal-bar a:hover{color:var(--ng-yellow,#ffd51f);text-decoration:underline}
.legal-bar span{color:#5c6b80}

/* ---------- 404 ---------- */
.notfound{padding:32px 0 50px;text-align:center}
.nf-code{font:1000 clamp(4rem,18vw,9rem)/1 Inter,system-ui,sans-serif;color:var(--v-gold,#ffd51f);
  text-shadow:0 6px 0 #ff8b00,0 13px 0 #6a3800;letter-spacing:-.04em;margin-bottom:6px}
.notfound h1{font-size:clamp(1.5rem,5vw,2.6rem);text-transform:uppercase;line-height:1.05;margin:0 0 12px}
.notfound h1 span{color:var(--v-cyan,#22e6ff)}
.nf-path{color:#9fb3c8;font-size:.9rem;margin:0 0 6px}
.nf-path code{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:7px;padding:2px 8px;font-size:.86em;word-break:break-all}
.nf-search{display:flex;gap:8px;max-width:520px;margin:20px auto 22px}
.nf-search input{flex:1;min-width:0;padding:14px 16px;border-radius:999px;font:inherit;font-size:16px;
  border:2px solid rgba(255,213,31,.55);background:rgba(3,7,18,.85);color:#fff}
.nf-search input:focus{outline:0;border-color:var(--v-gold,#ffd51f);box-shadow:0 0 0 4px rgba(255,213,31,.2)}
.nf-search button{flex:none;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#ffe066,#ffc400);color:#20180a;font:1000 .86rem Inter,system-ui,sans-serif}
.nf-search button:hover{filter:brightness(1.08)}
.nf-help{margin-top:30px;font-size:.86rem;color:#9fb3c8}
.visually-hidden{position:absolute;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}
.nf-h2{margin:34px 0 12px;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--v-gold,#ffd51f)}
.notfound .hub-grid{text-align:left}