/* Next Game Choice FX layer: tech / gamer look. Additive only (no layout changes). */
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{--neon-violet:#8b6cff;--neon-cyan:#52d7ff;--neon-lime:#7dffb2;--font-display:"Space Grotesk",Inter,system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
html{scrollbar-color:#3a3270 #090b13;scrollbar-width:thin}
body{overflow-x:clip}
::selection{background:var(--neon-violet);color:#fff}
:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px;border-radius:6px}

/* subtle CRT scanlines over everything (pointer-events none, very low contrast) */
body::before{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);opacity:.55}

/* typography */
h1,h2,h3,.brandWordmark{font-family:var(--font-display);letter-spacing:-.035em}
.eyebrow,.gnEyebrow,.pill,.freeCategoryNav small,.seoHero>div>span,.offerCount,.promotionStatus,.promotionStore{font-family:var(--font-mono);letter-spacing:.09em;text-transform:uppercase}
.eyebrow::before,.gnEyebrow::before{content:">_ ";color:var(--neon-cyan);font-weight:700}

/* header: glass + neon edge + progress bar */
.header{backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 rgba(139,108,255,.18),0 12px 34px -22px rgba(139,108,255,.55)}
body.fx-scrolled .header{box-shadow:0 1px 0 rgba(82,215,255,.28),0 14px 40px -20px rgba(139,108,255,.7)}
#fxProgress{position:fixed;left:0;top:0;right:0;height:2px;z-index:9999;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--neon-violet),var(--neon-cyan),var(--neon-lime));box-shadow:0 0 10px var(--neon-cyan)}
.nav a,.navPrimary a{transition:color .2s,text-shadow .2s}
.nav a:hover,.navPrimary a:hover{text-shadow:0 0 14px rgba(139,108,255,.9)}

/* heroes */
.fx-host{isolation:isolate}
.fx-hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.9}
.hero h1,.pageVisualHero h1,.gnHero h1,.seoHero h1,.gameMasthead h1,.pageIntro h1{animation:fxBoot .8s cubic-bezier(.2,.8,.2,1) both}
.hero p,.pageVisualHero p,.gnHero p,.seoHero p,.pageIntro p{animation:fxBoot .8s .12s cubic-bezier(.2,.8,.2,1) both}
.hero .button,.hero .buttonRow,.gnHero .button{animation:fxBoot .8s .24s cubic-bezier(.2,.8,.2,1) both}
.pageVisualHero h1,.gnHero h1,.seoHero h1,.pageIntro h1{background:linear-gradient(100deg,#fff 0%,#d9d0ff 35%,var(--neon-cyan) 60%,#fff 85%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxBoot .8s cubic-bezier(.2,.8,.2,1) both,fxShine 9s linear 1s infinite}
.pageVisualHero h1,.gnHero h1,.seoHero h1,.pageIntro h1{padding-bottom:.16em;margin-bottom:.06em}
.inner>.pageIntro{position:relative}
.inner>.pageIntro::before{content:"";position:absolute;z-index:-1;left:-6%;top:-70%;width:62%;height:240%;pointer-events:none;background:radial-gradient(closest-side,rgba(139,108,255,.22),transparent),radial-gradient(closest-side at 85% 60%,rgba(82,215,255,.14),transparent);filter:blur(28px);animation:fxAurora 14s ease-in-out infinite alternate}

/* section titles get a neon underline */
.sectionHead h2::after{content:"";display:block;width:54px;height:3px;margin-top:10px;border-radius:3px;background:linear-gradient(90deg,var(--neon-violet),var(--neon-cyan));box-shadow:0 0 14px rgba(82,215,255,.6)}

/* cards: lift, neon edge, cursor spotlight */
.gameCard,.toolCard,.reviewCard,.likeCard,.pageVisualCard,.videoCard,.promotionCard,.gnResultCard,.seoCard{position:relative;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s}
.gameCard::after,.toolCard::after,.reviewCard::after,.likeCard::after,.promotionCard::after,.gnResultCard::after,.seoCard::after,.contentPanel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(139,108,255,.2),transparent 62%)}
.gameCard:hover,.toolCard:hover,.reviewCard:hover,.likeCard:hover,.promotionCard:hover,.gnResultCard:hover,.seoCard:hover{transform:translateY(-5px);border-color:rgba(139,108,255,.65)!important;box-shadow:0 0 0 1px rgba(139,108,255,.55),0 20px 46px -16px rgba(139,108,255,.7),0 0 34px -12px rgba(82,215,255,.7)}
.gameCard:hover::after,.toolCard:hover::after,.reviewCard:hover::after,.likeCard:hover::after,.promotionCard:hover::after,.gnResultCard:hover::after,.seoCard:hover::after,.contentPanel:hover::after{opacity:1}
.contentPanel{position:relative}

/* performance: skip rendering of off-screen game cards (1000+ games in one grid) */
.gameGrid>.gameCard,.seoGrid>.seoCard{content-visibility:auto;contain-intrinsic-width:none;contain-intrinsic-height:auto 423px}

/* buttons */
.button.primary,a.button.primary{background-image:linear-gradient(110deg,#7657f1,var(--neon-violet) 45%,var(--neon-cyan));background-size:220% 100%;background-position:0 0;border-color:transparent;transition:background-position .45s,box-shadow .25s,transform .2s}
.button.primary:hover,a.button.primary:hover{background-position:100% 0;box-shadow:0 10px 30px -10px rgba(139,108,255,.95),0 0 22px -6px rgba(82,215,255,.7);transform:translateY(-1px)}
.button.secondary{transition:border-color .2s,box-shadow .2s,transform .2s}
.button.secondary:hover{border-color:var(--neon-cyan);box-shadow:0 0 22px -8px rgba(82,215,255,.8);transform:translateY(-1px)}

/* reveal on scroll */
.fx-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.fx-reveal.fx-in{opacity:1;transform:none}

/* easter egg */
.fx-toast{position:fixed;left:50%;bottom:34px;z-index:10000;transform:translateX(-50%);display:grid;gap:2px;padding:14px 22px;border:1px solid var(--neon-cyan);border-radius:14px;background:rgba(9,11,19,.92);box-shadow:0 0 40px -6px var(--neon-violet),0 0 0 1px rgba(139,108,255,.4);font-family:var(--font-mono);text-align:center;animation:fxBoot .5s both}
.fx-toast b{color:var(--neon-lime);font-size:18px;letter-spacing:.14em}.fx-toast span{color:#c9cff0;font-size:12px}.fx-toast.out{opacity:0;transition:opacity .5s}
.fx-rain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.85;transition:opacity .5s}.fx-rain.out{opacity:0}

@keyframes fxBoot{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes fxShine{to{background-position:-250% 0}}
@keyframes fxAurora{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(6%,8%,0) scale(1.15)}}

@media(max-width:700px){.inner>.pageIntro::before{display:none}.fx-hero-canvas{opacity:.65}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .fx-reveal{opacity:1;transform:none}
  .pageVisualHero h1,.gnHero h1,.seoHero h1,.pageIntro h1{-webkit-text-fill-color:#fff;background:none}
}

/* ---- mobile fixes ---- */
.gnHero .gnHeroCover img{margin:0!important;opacity:1!important;height:100%!important;width:100%!important;mask-image:none!important;-webkit-mask-image:none!important}
@media(max-width:900px){
  .gnHero.hasCovers::before{opacity:.16}
  .gnHeroCovers{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:4px 20px 26px}
  .gnHeroCover{box-shadow:0 8px 18px #000a,0 0 0 1px #ffffff22}
}
@media(max-width:800px){
  .pageVisualHero .pageVisualInner::before{content:"";position:absolute;z-index:7;inset:0 -15px;pointer-events:none;background:linear-gradient(180deg,rgba(8,10,18,.05) 0%,rgba(8,10,18,.72) 52%,#080a12 94%)}
  .pageVisualHero .pageVisualCard{opacity:.55}
  .pageVisualHero .pageIntro{position:relative;z-index:8}
  .hero .eyebrow,.pageVisualHero .eyebrow{max-width:100%;white-space:normal;letter-spacing:.06em;line-height:1.4}
}
@media(max-width:480px){.eyebrow,.gnEyebrow{font-size:11px}}

/* ---- official platform logos ---- */
.platformGrid a svg.fxLogo{width:auto!important;height:60px!important;max-width:100%;fill:currentColor!important;stroke:none!important;color:#e8ecff;opacity:.92;transition:color .25s,filter .25s,transform .25s}
.platformGrid a svg.fxLogo *{fill:currentColor!important;stroke:none!important}
.platformGrid a:hover svg.fxLogo{transform:scale(1.08)}
.platformGrid a.platform-playstation:hover svg.fxLogo{color:#4d9bff;filter:drop-shadow(0 0 14px #0070d1)}
.platformGrid a.platform-xbox:hover svg.fxLogo{color:#6fe35e;filter:drop-shadow(0 0 14px #107c10)}
.platformGrid a.platform-nintendo:hover svg.fxLogo{color:#ff4b5c;filter:drop-shadow(0 0 14px #e60012)}
.platformGrid a.platform-pc:hover svg.fxLogo{color:#7fd0ff;filter:drop-shadow(0 0 14px #0a84ff)}
.platformGrid a.platform-mobile:hover svg.fxLogo{color:#7dffb2;filter:drop-shadow(0 0 14px #3ddc84)}

/* ---- small logos on game cards ---- */
.platformRow .icon{font-size:0;color:#c3cbe2;transition:color .2s,border-color .2s}
.platformRow .icon svg.fxMini{width:13px;height:13px;fill:currentColor;display:block}
.gameCard:hover .platformRow .icon{color:#fff;border-color:#8b6cff}

/* ---- home promo: fan of real covers ---- */
.nightPromo .fxHidden{display:none!important}
.fxCoverFan{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px;padding:10px 0;perspective:1100px}
.fxFanCard{position:relative;display:block;flex:0 0 auto;width:clamp(110px,15vw,190px);aspect-ratio:3/4;margin:0 -28px;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,var(--accent,#8b6cff),#10131f);box-shadow:0 26px 50px -12px #000c,0 0 0 1px #ffffff26,0 0 36px -12px var(--accent,#8b6cff);transform:translateY(var(--y,0)) rotate(var(--r,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;text-decoration:none}
.fxFanCard img{display:block;width:100%;height:100%;object-fit:cover}
.fxFanCard span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(#0000,#070910ee);color:#fff;font:800 12px/1.2 var(--font-display);text-shadow:0 2px 8px #000}
.fxFanCard.f0{--r:-14deg;--y:22px;z-index:1}.fxFanCard.f1{--r:-7deg;--y:6px;z-index:2}.fxFanCard.f2{--r:0deg;--y:-10px;z-index:4;width:clamp(124px,17vw,214px)}.fxFanCard.f3{--r:7deg;--y:6px;z-index:2}.fxFanCard.f4{--r:14deg;--y:22px;z-index:1}
.fxFanCard:hover{transform:translateY(calc(var(--y,0px) - 14px)) rotate(0deg) scale(1.06);z-index:6;box-shadow:0 34px 60px -14px #000e,0 0 0 1px var(--accent,#8b6cff),0 0 46px -8px var(--accent,#8b6cff)}
@media(max-width:700px){.fxCoverFan{min-height:250px}.fxFanCard{width:92px;margin:0 -16px;border-radius:12px}.fxFanCard.f2{width:106px}.fxFanCard span{font-size:10px;padding:18px 8px 6px}}
@media(prefers-reduced-motion:reduce){.fxFanCard{transition:none}}