/* ============================================================
   PGS Amusements - site-wide gaming enhancement layer
   Non-destructive overlay on the migrated static mirror.
   All "hidden" initial states are gated behind html.pgsa-js so
   the page degrades to fully-visible content if JS doesn't run.
   Compliance buttons + page structure are never modified.
   ============================================================ */

/* ---------- reveal system (animation, not transition, so it never
   interferes with hover transforms) ---------- */
.pgsa-js .pgsa-tile,
.pgsa-js .pgsa-rev { opacity: 0; }
.pgsa-js .pgsa-tile.in,
.pgsa-js .pgsa-rev.in { animation: pgsa-reveal .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pgsa-reveal {
  from { opacity: 0; translate: 0 30px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ============================================================
   1. GAME-ART TILE ROWS -> aligned grid + interactive tiles
   (the main library + the "Next Favorite Game" showcase)
   ============================================================ */
#row-vHF3IcIpId > .inner,
#row-06Ds-XWdTs > .inner,
#row-fwN_95Fjj8 > .inner,
#row-CaIKfTvgsa > .inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2.2vw, 32px) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  align-items: center !important;
  justify-items: stretch !important;
}
#row-vHF3IcIpId > .inner > .c-column,
#row-06Ds-XWdTs > .inner > .c-column,
#row-fwN_95Fjj8 > .inner > .c-column,
#row-CaIKfTvgsa > .inner > .c-column {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: initial !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* heading (lifted out of its tile column by JS) spans full width */
.pgsa-heading-full {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  margin: 0 0 clamp(8px, 1.5vw, 22px) !important;
}
#row-vHF3IcIpId .vertical.inner,
#row-06Ds-XWdTs .vertical.inner,
#row-fwN_95Fjj8 .vertical.inner,
#row-CaIKfTvgsa .vertical.inner { padding: 0 !important; }

/* force the GHL wrapper chain to the grid-cell width (no overflow) */
#row-vHF3IcIpId > .inner > .c-column *,
#row-06Ds-XWdTs > .inner > .c-column *,
#row-fwN_95Fjj8 > .inner > .c-column *,
#row-CaIKfTvgsa > .inner > .c-column * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#row-vHF3IcIpId .c-image img,
#row-06Ds-XWdTs .c-image img,
#row-fwN_95Fjj8 .c-image img,
#row-CaIKfTvgsa .c-image img { height: auto !important; }

/* the interactive tile */
.pgsa-tile {
  position: relative;
  border-radius: 18px;
  transform: perspective(820px) rotateX(0) rotateY(0) scale(1);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, filter .35s ease;
  will-change: transform;
  cursor: pointer;
}
.pgsa-tile img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 16px;
}
.pgsa-tile::after {                       /* diagonal shine sweep */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .26) 49%, transparent 64%);
  background-size: 240% 100%;
  background-position: 170% 0;
  opacity: 0;
}
.pgsa-tile:hover {
  transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.075);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .55), 0 0 36px rgba(168, 85, 247, .60), 0 0 72px rgba(124, 58, 237, .34);
  filter: saturate(1.12) brightness(1.07);
  z-index: 3;
}
.pgsa-tile:hover::after { opacity: 1; animation: pgsa-shine .85s ease; }
@keyframes pgsa-shine {
  from { background-position: 170% 0; }
  to   { background-position: -70% 0; }
}

/* ============================================================
   2. SECTION HEADINGS -> consistent neon presence
   ============================================================ */
.pgsa-js h1 {
  text-shadow: 0 0 18px rgba(168, 85, 247, .50), 0 0 46px rgba(124, 58, 237, .26);
}
.pgsa-heading-full h1 {
  text-align: center !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
}
/* keep the footer link headings clean */
#row-vbdK_zNJMq h1,
#row-vbdK_zNJMq h2 { text-shadow: none !important; }

/* ============================================================
   3. CONTENT CARDS (Platform Features + How It Works) -> hover lift
   ============================================================ */
.pgsa-card {
  border-radius: 16px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, filter .35s ease;
  will-change: transform;
}
.pgsa-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), 0 0 30px rgba(168, 85, 247, .34);
  filter: brightness(1.04);
}

/* ============================================================
   4. BUTTONS -> tactile hover + pulsing primary CTAs
   ============================================================ */
.pgsa-js a[class*="cbutton-"],
.pgsa-js a[id^="button-"] {
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, filter .25s ease;
}
.pgsa-js a[class*="cbutton-"]:hover,
.pgsa-js a[id^="button-"]:hover {
  transform: translateY(-2px) scale(1.035);
  filter: brightness(1.07);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .38), 0 0 24px rgba(255, 255, 255, .16);
}
.pgsa-js a[id^="button-"]:active { transform: translateY(0) scale(.99); }

@media (prefers-reduced-motion: no-preference) {
  /* primary green "play" CTAs breathe to pull the eye */
  #button-tJnbvIqnXc_btn,   /* GET AN ACCOUNT TO PLAY */
  #button--FQw1Rj6dg_btn,   /* PLAY FOR FREE */
  #button-3JTkdUNDDX_btn {  /* Get Started */
    animation: pgsa-cta 2.6s ease-in-out infinite;
  }
  @keyframes pgsa-cta {
    0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .30), 0 0 0 rgba(34, 197, 94, 0); }
    50%      { box-shadow: 0 8px 24px rgba(0, 0, 0, .30), 0 0 30px rgba(34, 197, 94, .60); }
  }
}

/* ============================================================
   5. Responsive
   ============================================================ */
@media (max-width: 900px) {
  #row-vHF3IcIpId > .inner,
  #row-06Ds-XWdTs > .inner,
  #row-fwN_95Fjj8 > .inner,
  #row-CaIKfTvgsa > .inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(12px, 3vw, 20px) !important;
  }
}

/* ============================================================
   6. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pgsa-js .pgsa-tile,
  .pgsa-js .pgsa-rev { opacity: 1; }
  .pgsa-js .pgsa-tile.in,
  .pgsa-js .pgsa-rev.in { animation: none; }
}