/* =========================================================
   Game's page theme — a distinct, more animated "gaming" mood
   layered on top of the site's base style.css. Everything here
   is scoped under body.gaming-page so it never leaks onto the
   rest of the site.
   ========================================================= */

/* Note: deliberately NOT setting position:relative here. Combined with the
   site-wide html,body{overflow-x:hidden} rule in style.css, a positioned
   body is a known mobile-browser trigger that breaks position:fixed
   children (like .bottom-nav) from staying pinned to the real viewport
   bottom while scrolling. Nothing below needs body to be a positioning
   context — the ambient blobs and injected FX layers are all
   position:fixed (already viewport-relative), not position:absolute. */

/* ---- ambient drifting neon glow blobs behind everything ---- */
body.gaming-page::before,
body.gaming-page::after{
  content:"";
  position:fixed;
  z-index:0;
  width:60vmax;height:60vmax;
  border-radius:50%;
  filter:blur(90px);
  opacity:.28;
  pointer-events:none;
}
body.gaming-page::before{
  top:-20vmax;left:-15vmax;
  background:radial-gradient(circle, #6366f1, transparent 70%);
  animation:gamingBlobDrift1 16s ease-in-out infinite, gamingHueCycle 12s linear infinite;
}
body.gaming-page::after{
  bottom:-25vmax;right:-15vmax;
  background:radial-gradient(circle, #22d3ee, transparent 70%);
  animation:gamingBlobDrift2 18s ease-in-out infinite, gamingHueCycle 14s linear infinite reverse;
}
@keyframes gamingBlobDrift1{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(6vmax,8vmax) scale(1.15);}
}
@keyframes gamingBlobDrift2{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-6vmax,-6vmax) scale(1.1);}
}
@keyframes gamingHueCycle{
  0%{filter:blur(90px) hue-rotate(0deg);}
  100%{filter:blur(90px) hue-rotate(360deg);}
}

/* keep real content above the ambient glow. NOTE: .bottom-nav, .page-loader
   and header.site are deliberately excluded here — they're already
   positioned (sticky/fixed) with their own z-index (40/50/999) in the base
   stylesheet, well above the blobs' z-index:0. Overriding them to
   position:relative here (as this rule used to do) knocked .bottom-nav OUT
   of fixed positioning entirely (it scrolled away instead of staying
   pinned), and for header.site it silently replaced position:sticky with
   position:relative AND tied its stacking order to this same z-index:1 —
   since <main> comes after <header> in the DOM, equal z-index siblings
   stack in source order, so <main>'s content (search bar, chips, cards)
   painted over the header's hamburger dropdown menu whenever it was open. */
body.gaming-page > main,
body.gaming-page > footer.site{
  position:relative;
  z-index:1;
}

/* ---- animated cyberpunk floor grid (injected by gaming-page.js) ---- */
.gaming-grid-floor{
  position:fixed;left:0;right:0;bottom:0;height:58vh;
  z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(34,211,238,.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.45) 1px, transparent 1px);
  background-size:44px 44px;
  transform:perspective(420px) rotateX(62deg);
  transform-origin:bottom center;
  opacity:.22;
  animation:gamingGridScroll 4s linear infinite;
  -webkit-mask-image:linear-gradient(to top, black 4%, transparent 78%);
  mask-image:linear-gradient(to top, black 4%, transparent 78%);
}
@keyframes gamingGridScroll{
  from{background-position:0 0, 0 0;}
  to{background-position:0 44px, 0 0;}
}

/* ---- subtle CRT scanline sweep across the whole page (injected) ---- */
.gaming-scanlines{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.045) 0px,
    rgba(255,255,255,.045) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode:overlay;
  animation:gamingScanDrift 7s linear infinite;
}
@keyframes gamingScanDrift{
  from{background-position:0 0;}
  to{background-position:0 120px;}
}

/* ---- cursor-follow neon glow (desktop pointer only, injected) ---- */
.gaming-cursor-glow{
  position:fixed;top:0;left:0;width:280px;height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(34,211,238,.28), rgba(217,70,239,.14) 45%, transparent 72%);
  pointer-events:none;z-index:1;
  transform:translate(-50%,-50%);
  filter:blur(8px);
  mix-blend-mode:screen;
  will-change:transform;
}

/* ---- tap/click spark particles (injected on card press) ---- */
.gaming-spark{
  position:fixed;width:5px;height:5px;border-radius:50%;
  pointer-events:none;z-index:80;
  box-shadow:0 0 8px 1px currentColor;
  animation:gamingSparkFly .6s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes gamingSparkFly{
  from{transform:translate(0,0) scale(1);opacity:1;}
  to{transform:translate(var(--sx,0),var(--sy,0)) scale(0);opacity:0;}
}

/* ---- animated neon gradient title, with periodic glitch flicker ---- */
body.gaming-page .block-head h1{
  position:relative;
  background:linear-gradient(90deg,#22d3ee,#6366f1,#d946ef,#22d3ee);
  background-size:300% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gamingTitleShift 5s linear infinite;
  text-shadow:0 0 26px rgba(99,102,241,.35);
}
@keyframes gamingTitleShift{to{background-position:300% center;}}
body.gaming-page .block-head h1::before,
body.gaming-page .block-head h1::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;
  background:none;-webkit-text-fill-color:initial;
  pointer-events:none;
}
body.gaming-page .block-head h1::before{
  color:#ff2079;clip-path:inset(0 0 55% 0);
  animation:gamingGlitch1 3.6s infinite steps(1);
}
body.gaming-page .block-head h1::after{
  color:#22d3ee;clip-path:inset(55% 0 0 0);
  animation:gamingGlitch2 3.6s infinite steps(1);
}
@keyframes gamingGlitch1{
  0%,92%{transform:translate(0,0);opacity:0;}
  93%{transform:translate(-3px,-1px);opacity:.85;}
  94%{transform:translate(3px,1px);opacity:.85;}
  95%{transform:translate(-2px,1px);opacity:.6;}
  96%,100%{transform:translate(0,0);opacity:0;}
}
@keyframes gamingGlitch2{
  0%,92%{transform:translate(0,0);opacity:0;}
  93%{transform:translate(3px,1px);opacity:.85;}
  94%{transform:translate(-3px,-1px);opacity:.85;}
  95%{transform:translate(2px,-1px);opacity:.6;}
  96%,100%{transform:translate(0,0);opacity:0;}
}

/* ---- neon-accented search bar + chips, just on this page ---- */
body.gaming-page .search-bar{
  border-color:rgba(99,102,241,.35);
  box-shadow:0 0 0 1px rgba(99,102,241,.12), 0 8px 24px -16px rgba(99,102,241,.5);
  transition:box-shadow .3s ease, border-color .3s ease;
}
body.gaming-page .search-bar:focus-within{
  border-color:rgba(34,211,238,.6);
  box-shadow:0 0 0 1px rgba(34,211,238,.35), 0 0 24px -4px rgba(34,211,238,.5);
}
body.gaming-page .chip{
  border-color:rgba(99,102,241,.25);
  transition:border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
}
body.gaming-page .chip.active{
  background:linear-gradient(135deg,#22d3ee,#6366f1);
  border-color:transparent;color:#fff;
  animation:gamingChipPulse 2.2s ease-in-out infinite;
}
@keyframes gamingChipPulse{
  0%,100%{box-shadow:0 6px 18px -6px rgba(99,102,241,.6);}
  50%{box-shadow:0 6px 26px -3px rgba(34,211,238,.9);}
}
body.gaming-page .chip:hover{border-color:rgba(34,211,238,.55);color:#fff;transform:translateY(-1px);}
body.gaming-page .chip:active{transform:translateY(0) scale(.96);}

/* ---- extra punch on card press (tap feedback) ---- */
body.gaming-page .card.card-gaming:active{transform:translateY(-2px) scale(.97);}

/* ---- bottom-nav / hamburger Game's link gets a matching neon tint here ---- */
body.gaming-page .bottom-nav a.active{
  background:linear-gradient(135deg,#22d3ee,#6366f1);
  box-shadow:0 4px 18px -4px rgba(99,102,241,.65);
}
body.gaming-page .mobile-menu a.active{color:#67e8f9;background:rgba(34,211,238,.1);}

@media (prefers-reduced-motion: reduce){
  body.gaming-page::before, body.gaming-page::after{animation:none;}
  body.gaming-page .block-head h1{animation:none;}
  body.gaming-page .block-head h1::before,
  body.gaming-page .block-head h1::after{display:none;}
  body.gaming-page .chip.active{animation:none;}
  .gaming-grid-floor,.gaming-scanlines,.gaming-cursor-glow{display:none;}
}