/* ===== Play Page Styles ===== */

.play-page-body {
  /* `fixed` has to be repeated on EVERY layer: in the `background` shorthand it is
     a per-layer value, so writing it once left the two radial glows at their initial
     `scroll` - computed "scroll, scroll, fixed". They are positioned at 16% -4% /
     88% 10% of the BODY box, i.e. anchored near the top of the DOCUMENT, so scrolling
     past them collapsed the page to the near-black gradient (the "too dark when you
     scroll" bug). Fixed on all three anchors them to the viewport. */
  background:
    radial-gradient(circle at 16% -4%, rgba(255, 51, 102, 0.16), transparent 32%) fixed,
    radial-gradient(circle at 88% 10%, rgba(124, 58, 237, 0.16), transparent 36%) fixed,
    linear-gradient(180deg, #0b0b14 0%, #090910 48%, #0e0e17 100%) fixed;
  padding-top: 76px;
}

/* Desktop: keep the content gap from the side rail equal to the gap
   on the right edge (64px body margin + 12px container gutter each side) */
@media (min-width: 992px) {
  .play-page-body {
    padding-left: 120px;
    padding-right: 64px;
  }
}

.play-page-body .navbar {
  background: rgba(14, 4, 22, 0.75);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom-color: rgba(108, 117, 125, 0.25);
  box-shadow: 0 1px 25px rgba(255, 30, 40, 0.1), 0 4px 20px rgba(0, 0, 0, 0.35);
}

.play-page-body .play-info-card,
.play-page-body .play-similar-card,
.play-page-body .play-tags {
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.12), transparent 38%),
    radial-gradient(circle at 0% 100%, rgba(255, 51, 102, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    #1a0d24;
  border-color: rgba(255, 35, 50, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

[data-bs-theme="light"] .play-page-body {
  background: linear-gradient(180deg, #eef1f5 0%, #e7ebf0 100%);
}

[data-bs-theme="light"] .play-page-body .navbar,
[data-bs-theme="light"] .play-page-body .play-info-card,
[data-bs-theme="light"] .play-page-body .play-similar-card,
[data-bs-theme="light"] .play-page-body .play-tags {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Sticky CTA bar: ENABLED 2026-09-15.
   The base rule in styles.css ships it as display:none, and each play page's inline
   controller (IntersectionObserver on .play-hero and the footer) sets display:block +
   .visible only once the player has scrolled out of view, and removes it again when the
   hero or the footer is on screen - so it never covers the game while it is visible.
   The old `display: none !important` here beat the controller's inline style (an
   !important declaration outranks an inline one), which is why the bar never appeared.
   Colours come from xg-theme.css section G. */
.play-page-body .sticky-cta-bar {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ---- Hero Video Section ---- */
.play-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  border-radius: 16px;
  overflow: hidden;
  /* Softer edge (2026-09-13): the old glows (violet 0.18 + red 0.10) were loud
     enough to fight the red tap-label glow sitting on top of them. Halved and
     tightened so the panel reads as a defined edge with a hint of brand colour,
     not a halo - the depth shadow is kept for separation. Note the itch hero has
     NO border (border-color:transparent below) - this ring IS its edge. */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 12px 34px rgba(3,5,12,0.38), 0 0 14px rgba(124,58,237,0.07), 0 0 30px rgba(255,51,102,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 1.5rem;
}

/* ---- Hero backdrop: slow-drifting brand gradient (2026-09-13) -----------
   Replaces the old static diagonal stripe texture that used to live on
   `.play-hero::before`. It is a separate oversized layer at z-index 0, so it
   sits BEHIND the ad wrapper (1), the tap label (3) and #heroPlayBtn (4) -
   visible in the CLICK TO RUN GAME state and through the letterbox bars of
   odd-aspect ads, never over the video itself.
   The drift is a TRANSFORM on a compositor layer (`inset:-30%` + will-change),
   not an animated background-position: a full-width panel would repaint every
   frame otherwise, and the oversized box means the moving edges never show.
   Values are CSS vars so the in-hero loading splash reuses the identical
   backdrop instead of hard-coding its own static copy of the hero gradient. */
:root {
  --play-hero-glow-a: radial-gradient(circle at 18% 12%, rgba(255, 51, 102, 0.28), transparent 42%);
  --play-hero-glow-b: radial-gradient(circle at 84% 20%, rgba(124, 58, 237, 0.28), transparent 44%);
  --play-hero-base: linear-gradient(120deg, #0b0b14 0%, #150b1e 30%, #090910 54%, #0a1018 76%, #0e0e17 100%);
}
/* Light theme: the player panel stays DARK on purpose (game frames are dark), so
   only the hues change - hotter, because they sit on a lighter navy base. */
[data-bs-theme="light"] {
  --play-hero-glow-a: radial-gradient(circle at 20% 16%, rgba(64, 104, 170, 0.45), transparent 52%);
  --play-hero-glow-b: radial-gradient(circle at 82% 82%, rgba(140, 60, 116, 0.35), transparent 50%);
  --play-hero-base: linear-gradient(120deg, #161c33 0%, #1b2547 32%, #10152a 62%, #0b0f1d 100%);
}
.play-hero::after,
#heroGameLoadingSplash,
#testGameLoadingSplash {
  background-image: var(--play-hero-glow-a), var(--play-hero-glow-b), var(--play-hero-base);
  animation: heroGradientDrift 26s ease-in-out infinite;
  will-change: transform;
}
.play-hero::after {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
}
@keyframes heroGradientDrift {
  0%, 100% { transform: translate3d(-7%, -6%, 0); }
  50% { transform: translate3d(6%, 5%, 0); }
}
/* The layer is oversized, so with the drift off it still covers the panel. */
@media (prefers-reduced-motion: reduce) {
  .play-hero::after,
  #heroGameLoadingSplash,
  #testGameLoadingSplash {
    animation: none;
  }
}
.play-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  pointer-events: none;
  position: absolute;
  inset: 0;
  filter: blur(4px);
  opacity: 0.8;
}

/* Poster image — the hero visual, shown on page load (blurred backdrop style) */
.play-hero .play-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px);
  opacity: 0.75;
  z-index: 1;
  transition: opacity 0.6s ease;
}
.play-hero .play-hero-poster.hidden {
  opacity: 0;
  pointer-events: none;
}
.play-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.12), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(255, 51, 102, 0.10), transparent 40%),
    rgba(26, 13, 36, 0.38);
  cursor: pointer;
  transition: background 0.3s;
  z-index: 2;
  border: none;
  text-decoration: none;
}
.play-hero-overlay:hover {
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.18), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(255, 51, 102, 0.16), transparent 40%),
    rgba(26, 13, 36, 0.52);
}
.play-hero-play-btn {
  width: auto;
  height: auto;
  border-radius: 0.25rem;
  /* Brand cyan accent. Cyan is the site's secondary brand color (see
     .hero-section-divider / .hero-featured-title) and is near-complementary to the
     red hero backdrop, so the primary CTA reads as the focal point instead of
     blending into the red glows behind it. Dark ink is required: white on #0dcaf0
     is only ~1.96:1 contrast. */
  background: linear-gradient(135deg, #3ae6ff 0%, #0dcaf0 42%, #0092b3 100%);
  border: 1px solid rgba(140, 240, 255, 0.75);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: #04161d;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(13, 202, 240, 0.28), 0 0 40px rgba(13, 202, 240, 0.22), 0 10px 28px rgba(3,5,12,0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Longhands rather than the shorthand so the 6s duration and the infinite loop
     survive any later `animation` shorthand re-declaration. */
  animation-name: btnGlowCyan;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Continuous glow pulse - the button is never at rest. The alpha spread is
   deliberately wide (0.14 -> 0.38) because a cycle this slow with the old narrow
   spread reads as a static button with an odd shadow rather than as motion. */
@keyframes btnGlowCyan {
  0%, 100% {
    box-shadow: 0 10px 22px rgba(13, 202, 240, 0.14), 0 0 32px rgba(13, 202, 240, 0.10), 0 10px 28px rgba(3,5,12,0.35);
  }
  50% {
    box-shadow: 0 10px 34px rgba(13, 202, 240, 0.38), 0 0 72px rgba(13, 202, 240, 0.34), 0 10px 28px rgba(3,5,12,0.35);
  }
}
/* Shine sweep loops on its own instead of being hover-triggered, so the button
   animates permanently. The sweep occupies the first fifth of the cycle then parks
   off-canvas: one slow pass every 7s rather than a constant strobe.
   `transition: none` clears the old hover transition - an animation outranks a
   transition on the same property, so leaving both would just be dead code. */
.play-hero-play-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-20deg);
  transition: none;
  animation: btnShineCyan 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShineCyan {
  0%   { left: -75%; }
  20%  { left: 130%; }
  100% { left: 130%; }
}
/* Hover quickens the shimmer rather than starting it. Both selectors are needed:
   the poster hero wraps the button in .play-hero-overlay (hovering anywhere on the
   hero is the invitation), while the itch pages' #heroPlayBtn sits OUTSIDE the
   overlay and so needs a direct :hover of its own. */
.play-hero-overlay:hover .play-hero-play-btn::before,
.play-hero-play-btn:hover::before {
  animation-duration: 2.4s;
}
/* Poster-hero only: the overlay hover lifts the button. Deliberately scoped to the
   overlay - never put a bare `transform` on .play-hero-play-btn, because the itch
   pages centre #heroPlayBtn with `transform: translateX(-50%)` and this would
   clobber that, knocking the button off-centre. */
.play-hero-overlay:hover .play-hero-play-btn {
  transform: scale(1.03);
  box-shadow: 0 14px 32px rgba(13, 202, 240, 0.36), 0 0 64px rgba(13, 202, 240, 0.30), 0 14px 34px rgba(3,5,12,0.4);
}
.play-hero-play-btn .bi {
  font-size: 1.3rem;
  color: #04161d;
  margin-right: 0.5rem;
}

/* ---- Itch play page hero (no poster, gradient backdrop) ---- */
.play-hero iframe.itch-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  filter: none;
  opacity: 1;
  z-index: 3;
  background: #000;
}

.play-hero.itch-hero {
  background:
    radial-gradient(circle at 16% -4%, rgba(255, 51, 102, 0.16), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(124, 58, 237, 0.16), transparent 36%),
    linear-gradient(180deg, #0b0b14 0%, #090910 48%, #0e0e17 100%);
  border-color: transparent;
}
.play-hero.itch-hero .play-hero-overlay {
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.10), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(255, 51, 102, 0.08), transparent 40%),
    rgba(26, 13, 36, 0.30);
}
.play-hero.itch-hero .play-hero-overlay:hover {
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.16), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(255, 51, 102, 0.14), transparent 40%),
    rgba(26, 13, 36, 0.44);
}

/* ---- Hero title bar (2026-09-13) --------------------------------------
   The game name used to sit in a separate "Title Row" div above the hero
   (h1 at 2.2rem + a "Free Adult ... - Browser" subtitle) and the live
   plays/favorites counters were appended below it. Both now live in a single
   compact bar that joins the hero flush (bottom corners square, and the hero's
   own top corners squared by the adjacent-sibling rule below) so bar + hero
   read as ONE panel.
   Background mirrors the retractable side nav (`.side-nav` in styles.css):
   translucent dark glass + 16px backdrop blur, and in light theme the nav's
   near-white glass - which is why the ink flips there.
   MUST stay outside `.play-hero`: `fitVideoToArea()` measures that exact 16:9 box. */
.hero-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(14, 4, 22, 0.75);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #fff;
}
.hero-title-text {
  margin: 0;
  font: inherit;
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-bs-theme="light"] .hero-title-bar {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.11);
  color: #1a1a2e;
}
.hero-title-bar + .play-hero {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Stats slot (views + favorites). more-games.js renders these numbers on the
   pages that load it (with its own injected copy of the same rules, kept
   identical on purpose); play-stats.js covers the pages that don't. These base
   rules are the single source of truth for the look. */
.hero-title-bar .play-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  margin-top: 0;
  font-size: 0.95em;
}
/* Nothing to show yet (no data / request failed) - collapse the slot. */
.hero-title-bar .play-stats:empty {
  display: none;
}
.hero-title-bar .play-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(234, 234, 234, 0.62);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.hero-title-bar .play-stat .bi {
  font-size: 0.8rem;
}
.hero-title-bar .play-stat .bi-eye-fill {
  color: #dc3545;
}
.hero-title-bar .play-stat .bi-heart-fill {
  color: #ff4d6d;
}
[data-bs-theme="light"] .hero-title-bar .play-stat {
  color: rgba(26, 26, 46, 0.62);
}

/* ---- Icon actions bar below the itch player (plain icons, own section) ---- */
.itch-hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin: 0.75rem 0 2.5rem;
}
.itch-hero-actions > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  font-size: 1.3rem;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}
.itch-hero-actions > *:hover {
  background: transparent;
  color: #ff2d3d;
  transform: translateY(-2px);
}
.itch-hero-actions #favBtnText { display: none; }
.itch-hero-actions .play-btn-fav {
  background: transparent;
  border: none;
}
.itch-hero-actions .play-btn-fav:hover {
  background: transparent;
}
.itch-hero-actions .play-btn-fav.active {
  color: #dc3545;
  background: transparent;
  border: none;
}
[data-bs-theme="light"] .itch-hero-actions .play-btn-fav,
[data-bs-theme="light"] .itch-hero-actions .play-btn-fav:hover,
[data-bs-theme="light"] .itch-hero-actions .play-btn-fav.active {
  background: transparent;
}
[data-bs-theme="light"] .itch-hero-actions > * {
  background: transparent;
  color: rgba(0, 0, 0, 0.45);
}
[data-bs-theme="light"] .itch-hero-actions > *:hover {
  background: transparent;
  color: #dc3545;
}

/* Keep the player panel dark in light theme too (game frames are dark) */
[data-bs-theme="light"] .play-hero.itch-hero {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(40, 72, 125, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(112, 45, 92, 0.14) 0%, transparent 50%),
    linear-gradient(135deg, #161c33 0%, #10152a 55%, #0b0f1d 100%);
  border-color: rgba(0, 0, 0, 0.11);
  box-shadow: 0 12px 34px rgba(26, 30, 50, 0.16), 0 0 14px rgba(40, 72, 125, 0.06);
}
[data-bs-theme="light"] .play-hero.itch-hero .play-hero-overlay {
  background: rgba(0, 0, 0, 0.22);
}
[data-bs-theme="light"] .play-hero.itch-hero .play-hero-overlay:hover {
  background: rgba(0, 0, 0, 0.34);
}

/* ---- CTA Buttons Row ---- */
.play-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.play-btn-primary {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
  border-radius: 50rem;
  border: none;
  border-bottom: 4px solid #a71d2a;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  box-shadow: 0 6px 25px rgba(220,53,69,0.35);
}
.play-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 35px rgba(220,53,69,0.5);
  color: #fff;
}
.play-btn-secondary {
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 2rem;
  border-radius: 50rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom: 3px solid rgba(255,255,255,0.08);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}
.play-btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  transform: scale(1.03);
  color: #fff;
}
.play-btn-fav {
  background: rgba(220,53,69,0.15);
  border-color: rgba(220,53,69,0.3);
}
.play-btn-fav:hover {
  background: rgba(220,53,69,0.25);
}
.play-btn-fav.active {
  background: rgba(220,53,69,0.35);
  border-color: rgba(220,53,69,0.5);
}

/* ---- Star Rating ---- */
.star-rating {
  display: flex;
  gap: 0.25rem;
}
.star-rating-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: rgba(255,255,255,0.2);
  transition: color 0.15s, transform 0.15s;
}
.star-rating-btn:hover,
.star-rating-btn.active {
  color: #f4b942;
  transform: scale(1.15);
}
.star-rating-btn .bi {
  font-size: 1.6rem;
}

/* ---- Info Card ---- */
.play-info-card {
  background: rgba(20,10,30,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(220,53,69,0.15);
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
}
.play-info-card h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #dc3545;
  margin-bottom: 1.5rem;
}
.play-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.play-info-row .bi {
  color: #dc3545;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.play-info-label {
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
}
.play-info-value {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}
.play-info-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(220,53,69,0.15);
  justify-content: center;
}
.play-info-social-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(220,53,69,0.12);
  border: 1px solid rgba(220,53,69,0.25);
  color: #dc3545;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s;
}
.play-info-social-btn:hover {
  background: rgba(220,53,69,0.25);
  color: #fff;
}

/* ---- Tags ---- */
.play-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 3rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.play-tag {
  padding: 0.4rem 1rem;
  border-radius: 50rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: all 0.2s;
}
.play-tag:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(220, 53, 69, 0.4);
  color: #fff;
}

/* ---- Similar Games ---- */
.play-similar-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  display: block;
  transition: transform 0.3s, box-shadow 0.3s;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
.play-similar-card.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.play-similar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.5);
}
.play-similar-card img,
.play-similar-card video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.3s;
}
.play-similar-card video {
  display: block;
}
.play-similar-card:hover img,
.play-similar-card:hover video {
  transform: scale(1.08);
}
/* itch.io covers are ~630x500 (1.26): fit related cards to that ratio */
.itch-related .play-similar-card img,
.itch-related .play-similar-card video {
  aspect-ratio: 1.26;
}
.play-similar-card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1rem 0.75rem;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.6), transparent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
.play-similar-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.3s;
}
.play-similar-card:hover .play-similar-card-play {
  opacity: 1;
}
.play-similar-card-play-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-similar-card-play-circle .bi {
  font-size: 1.3rem;
  color: #dc3545;
  margin-left: 2px;
}

/* ---- Responsive ---- */

/* ---- Install Prompt Modal ---- */
.install-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10560;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.install-modal-overlay.visible {
  background: rgba(0,0,0,0.75);
  opacity: 1;
  pointer-events: auto;
}
.install-modal-card {
  background: #1a1025;
  border: 1px solid rgba(220,53,69,0.3);
  border-radius: 16px;
  padding: 2rem;
  max-width: 420px;
  width: 90%;
  position: relative;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.install-modal-overlay.visible .install-modal-card {
  transform: translateY(0);
}
.install-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.install-modal-close:hover {
  color: #fff;
}
.install-modal-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(220,53,69,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.install-modal-icon .bi {
  font-size: 1.8rem;
  color: #dc3545;
}
.install-modal-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 1.2rem;
}
.install-modal-steps {
  text-align: left;
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  line-height: 1.8;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.install-modal-steps li {
  margin-bottom: 0.5rem;
}
.install-modal-steps strong {
  color: #fff;
}
.install-modal-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  margin: 0;
}

/* ---- Install Button (below CTA row) ---- */
.play-btn-install {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 50rem;
  font-size: 0.82rem;
  font-weight: 500;
  background: rgba(220,53,69,0.1);
  border: 1px solid rgba(220,53,69,0.25);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.play-btn-install:hover {
  background: rgba(220,53,69,0.2);
  border-color: rgba(220,53,69,0.5);
  color: #fff;
}

/* ---- Favorites Fly Animation ---- */
.fly-heart {
  font-size: 1.8rem;
  color: #dc3545;
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0 0 8px rgba(220,53,69,0.6));
}

/* Navbar favorites link pulse on arrival */
.nav-link.fav-pulse {
  animation: favPulse 0.5s ease;
}
.nav-link.fav-pulse .bi-heart-fill,
.nav-link.fav-pulse .bi-heart {
  animation: favPulseIcon 0.5s ease;
}
@keyframes favPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes favPulseIcon {
  0% { color: #dc3545; }
  50% { color: #ff6b81; }
  100% { color: #dc3545; }
}

/* Fav count badge in nav */
.fav-badge {
  display: inline-block;
  background: #dc3545;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  margin-left: 3px;
  vertical-align: top;
}

/* Mobile: hide fav text, show icon only */
@media (max-width: 991.98px) {
  .nav-link .fav-label { display: none; }
}

/* Mobile: more breathing room between the navbar search and the page title */
@media (max-width: 991.98px) {
  .play-page-body .container.py-4 {
    padding-top: 2.25rem !important;
  }
}
@media (max-width: 767.98px) {
  .play-hero {
    border-radius: 12px;
  }
  .play-btn-primary,
  .play-btn-secondary {
    flex: 1;
    justify-content: center;
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
  }
}

/* ===== Play Page Light Theme Overrides ===== */
[data-bs-theme="light"] .play-page-body {
  background: linear-gradient(180deg, #f0f2f5 0%, #e8ecf1 100%);
  color: #1a1a2e;
}
[data-bs-theme="light"] .play-hero {
  box-shadow: 0 14px 40px rgba(26,30,50,0.12), 0 0 18px rgba(40,72,125,0.08);
  border-color: rgba(0,0,0,0.08);
}
[data-bs-theme="light"] .play-hero-overlay {
  background: rgba(0,0,0,0.15);
}
[data-bs-theme="light"] .play-hero-overlay:hover {
  background: rgba(0,0,0,0.25);
}
[data-bs-theme="light"] .play-btn-secondary {
  background: rgba(0,0,0,0.04);
  color: #333;
  border-color: rgba(0,0,0,0.12);
  border-bottom-color: rgba(0,0,0,0.08);
}
[data-bs-theme="light"] .play-btn-secondary:hover {
  background: rgba(0,0,0,0.08);
  color: #111;
}
[data-bs-theme="light"] .play-btn-fav {
  background: rgba(220,53,69,0.08);
  border-color: rgba(220,53,69,0.2);
}
[data-bs-theme="light"] .play-btn-fav:hover {
  background: rgba(220,53,69,0.15);
}
[data-bs-theme="light"] .play-btn-fav.active {
  background: rgba(220,53,69,0.2);
  border-color: rgba(220,53,69,0.35);
}
[data-bs-theme="light"] .star-rating-btn {
  color: rgba(0,0,0,0.15);
}
[data-bs-theme="light"] .play-info-card {
  background: rgba(255,255,255,0.75);
  border-color: rgba(220,53,69,0.1);
}
[data-bs-theme="light"] .play-info-card p {
  /* No !important here any more. It used to be needed because every play page carried
     `<p style="color:rgba(255,255,255,0.75)">` inline, and only !important beats an
     inline style. tools-sweep-desc-para.ps1 moved that copy to .play-desc-p, so this
     rule wins on specificity (0,2,1) - and the token layer can now override the ink
     with html.xg-tokens-apply .play-desc-p instead of fighting it. */
  color: rgba(0,0,0,0.72);
}
[data-bs-theme="light"] h1 + p.mb-0 {
  color: rgba(0,0,0,0.55) !important;
}
[data-bs-theme="light"] .play-info-card h2 {
  color: #c82333;
}
[data-bs-theme="light"] .play-info-row .bi {
  color: #dc3545;
}
[data-bs-theme="light"] .play-info-label {
  color: rgba(0,0,0,0.45);
}
[data-bs-theme="light"] .play-info-value {
  color: #1a1a2e;
}
[data-bs-theme="light"] .play-info-social {
  border-top-color: rgba(220,53,69,0.1);
}
[data-bs-theme="light"] .play-info-social-btn {
  background: rgba(220,53,69,0.06);
  border-color: rgba(220,53,69,0.15);
  color: #dc3545;
}
[data-bs-theme="light"] .play-info-social-btn:hover {
  background: rgba(220,53,69,0.15);
  color: #fff;
}
[data-bs-theme="light"] .play-tag {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0,0,0,0.65);
}
[data-bs-theme="light"] .play-tag:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(220, 53, 69, 0.35);
  color: #1a1a2e;
}
[data-bs-theme="light"] .play-similar-card {
  border-color: rgba(0,0,0,0.06);
}
[data-bs-theme="light"] .play-similar-card:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}
[data-bs-theme="light"] .install-modal-card {
  background: #fff;
  border-color: rgba(220,53,69,0.15);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
[data-bs-theme="light"] .install-modal-close {
  color: rgba(0,0,0,0.3);
}
[data-bs-theme="light"] .install-modal-close:hover {
  color: #333;
}
[data-bs-theme="light"] .install-modal-title {
  color: #1a1a2e;
}
[data-bs-theme="light"] .install-modal-steps {
  color: rgba(0,0,0,0.65);
}
[data-bs-theme="light"] .install-modal-steps strong {
  color: #1a1a2e;
}
[data-bs-theme="light"] .install-modal-note {
  color: rgba(0,0,0,0.4);
}
[data-bs-theme="light"] .play-btn-install {
  background: rgba(220,53,69,0.05);
  border-color: rgba(220,53,69,0.15);
  color: rgba(0,0,0,0.6);
}
[data-bs-theme="light"] .play-btn-install:hover {
  background: rgba(220,53,69,0.12);
  border-color: rgba(220,53,69,0.35);
  color: #1a1a2e;
}
[data-bs-theme="light"] .text-white {
  color: #1a1a2e !important;
}
[data-bs-theme="light"] .text-white-50 {
  color: rgba(0,0,0,0.5) !important;
}
[data-bs-theme="light"] .navbar-dark {
  --bs-navbar-color: rgba(0,0,0,0.65);
  --bs-navbar-hover-color: rgba(0,0,0,0.85);
  --bs-navbar-brand-color: #1a1a2e;
}
[data-bs-theme="light"] .navbar-dark .navbar-brand {
  color: #1a1a2e;
}
[data-bs-theme="light"] .border-secondary {
  border-color: rgba(0,0,0,0.1) !important;
}
[data-bs-theme="light"] .btn-outline-light {
  border-color: rgba(0,0,0,0.2) !important;
  color: #333 !important;
}
[data-bs-theme="light"] .btn-outline-light:hover {
  background: rgba(0,0,0,0.05) !important;
  color: #111 !important;
}
[data-bs-theme="light"] .btn-close-white {
  filter: invert(0) grayscale(100%) brightness(0%);
}
[data-bs-theme="light"] .modal-content.bg-transparent {
  background: transparent !important;
}
/* Light theme: the dark theme's cyan GLOW cannot survive on a light surface - a
   light halo against #eef1f5 is invisible, so the "always animating" pulse would
   silently die here. Light theme therefore trades the glow for a deeper fill plus a
   dark elevation shadow that pulses instead.
   The fill has to be deeper for a second reason: it must hold the button's shape on
   its own. The dark theme's #3ae6ff is only ~1.7:1 against the #eef1f5 page, and the
   pale rgba(140,240,255) border disappears for the same reason. Keeping dark ink
   puts a ceiling on how dark the fill may go - the darkest stop (#0a8fa8) still
   clears 4.5:1 at 4.9:1 - so the border carries the edge definition the fill can no
   longer provide alone. */
[data-bs-theme="light"] .play-hero-play-btn {
  background: linear-gradient(135deg, #1cc2de 0%, #0d9db8 55%, #0a8fa8 100%);
  border-color: #0a6f83;
  color: #04161d;
  box-shadow: 0 4px 14px rgba(9, 40, 52, 0.24), 0 1px 2px rgba(9, 40, 52, 0.20);
  animation-name: btnGlowCyanLight;
}
/* Same 6s cadence as dark theme; the pulse is now elevation, not luminance. */
@keyframes btnGlowCyanLight {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(9, 40, 52, 0.18), 0 1px 2px rgba(9, 40, 52, 0.16);
  }
  50% {
    box-shadow: 0 11px 26px rgba(9, 40, 52, 0.32), 0 2px 4px rgba(9, 40, 52, 0.22);
  }
}
[data-bs-theme="light"] .play-hero-play-btn .bi {
  color: #04161d;
}
[data-bs-theme="light"] .play-similar-card-title {
  color: #fff;
}
[data-bs-theme="light"] .play-similar-card-play {
  background: rgba(0,0,0,0.25);
}
[data-bs-theme="light"] .play-similar-card-play-circle {
  background: rgba(255,255,255,0.95);
}
[data-bs-theme="light"] .play-similar-card-play-circle .bi {
  color: #dc3545;
}