/* ============================================================
   Global ambient rain backdrop (V24.44)
   Single source of truth — previously this CSS was duplicated
   inline in games.php, in services-v24-16.css and in
   homepage-v3.css. Loaded once by includes/rain.php.
   ============================================================ */
.games-rain{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  opacity:.55;
  contain:strict;
}
.games-rain__drop{
  position:absolute;
  top:-180px;
  left:var(--left);
  width:var(--w,2px);
  height:var(--h,100px);
  border-radius:999px;
  background:linear-gradient(180deg,transparent,var(--drop-color),transparent);
  opacity:var(--o,.54);
  transform:translate3d(0,-150%,0) rotate(var(--tilt,9deg));
  animation:gv-rain-fall var(--duration) linear infinite;
  animation-delay:var(--delay);
  will-change:transform;
}
@keyframes gv-rain-fall{
  from{transform:translate3d(0,-160%,0) rotate(var(--tilt,9deg))}
  to{transform:translate3d(0,calc(100vh + 340px),0) rotate(var(--tilt,9deg))}
}

/* Page content must sit above the fixed rain layer. Every top-level
   shell used across the site is listed so no page ends up with its
   content behind the drops. */
.modern-home,
.gv-page,
.games-page-shell,
.dash-layout,
.authv2-shell,
main,
header,
.kb-market-header,
.site-header{position:relative;z-index:1}

/* Footer gets a translucent treatment so the rain reads as one
   continuous background instead of stopping at a hard edge. */
body.gv-rain-document .kb-footer-v24{
  position:relative;z-index:1;
  background:rgba(5,11,19,.84)!important;
  background:color-mix(in srgb,#050b13 82%,transparent)!important;
  backdrop-filter:blur(4px);
}
body.gv-rain-document .kb-footer-shell{
  background:linear-gradient(180deg,rgba(8,17,29,.9),rgba(7,14,24,.94))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--kb-footer-surface,#08111d) 90%,transparent),color-mix(in srgb,#070e18 94%,transparent))!important;
  backdrop-filter:blur(5px);
}

/* Quieter behind dense working screens so it never fights the data. */
body.page-admin .games-rain,
body.page-dashboard .games-rain,
body.page-support .games-rain{opacity:.26}

[data-theme="light"] .games-rain{opacity:.3}
[data-theme="light"] body.page-admin .games-rain,
[data-theme="light"] body.page-dashboard .games-rain,
[data-theme="light"] body.page-support .games-rain{opacity:.16}

@media(prefers-reduced-motion:reduce){.games-rain{display:none}}
/* Small screens: fewer, slower drops are handled server-side; hide
   entirely on very small viewports to protect scroll performance. */
@media(max-width:520px){.games-rain{opacity:.34}}