/*
 * Bloodhound LP — vanilla CSS port of the Next.js/Tailwind source at
 * apps/web/app/lp/bloodhound/. No build step. Mobile-first with three
 * breakpoints (sm 640px, md 768px, lg 1024px) mirroring the Tailwind
 * defaults used in the React source.
 *
 * Color tokens kept as CSS custom properties so the theme dev / Customizer
 * can override per-property without re-declaring rules.
 *
 * License: GPL-2.0-or-later
 */

/* ============================================================
 * 0. Reset / base
 * ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bhg-bg);
  color: #fff;
  font-family: var(--bhg-font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

/* ============================================================
 * 1. Tokens
 * ============================================================ */

:root {
  --bhg-bg: #0a0606;              /* near-black, red undertone */
  --bhg-bg-rgb: 10 6 6;
  --bhg-accent: #c81e1e;          /* blood red — dots, eyebrows */
  --bhg-accent-rgb: 200 30 30;
  --bhg-cta: #ff3b1f;             /* hellfire orange-red CTA */
  --bhg-cta-rgb: 255 59 31;

  /* Display face. Oswald 700 (heavy condensed grotesk — "metal poster"
   * energy) is self-hosted + inlined as @font-face by inc/enqueue.php.
   * Fallbacks are CONDENSED sans (not a serif) so a blocked webfont
   * still degrades to the right silhouette: in-app browser CSP block,
   * ad-block, consent denial. */
  --bhg-font-display: 'Oswald', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue Condensed', sans-serif;
  --bhg-font-sans:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji';
}

/* ============================================================
 * 2. Layout primitives
 * ============================================================ */

.bhg-root {
  background: var(--bhg-bg);
  color: #fff;
  /* Triple fallback: bare vh for old browsers, dvh for modern, finally
   * the JS-set --app-height for iOS in-app webviews (where dvh is still
   * computed against the largest viewport at first paint). Same pattern
   * as .bhg-hero / .bhg-squeeze — keeps the long-LP footer anchored
   * at the visible bottom on Instagram/TikTok/Facebook. */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: var(--app-height, 100dvh);
}

/* Hero gradient (radial + linear). Identical stops to landing-page.tsx. */
.bhg-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(10, 6, 6, 0.5) 0%,
      rgba(10, 6, 6, 0.72) 60%,
      rgba(10, 6, 6, 0.92) 100%
    ),
    linear-gradient(
      180deg,
      rgba(10, 6, 6, 0.85) 0%,
      rgba(10, 6, 6, 0.2) 35%,
      rgba(10, 6, 6, 0.4) 60%,
      rgba(10, 6, 6, 0.95) 100%
    );
}

/* Squeeze variant uses denser stops (more bg coverage on small viewport). */
.bhg-hero-gradient--squeeze {
  background:
    radial-gradient(
      ellipse at center,
      rgba(10, 6, 6, 0.4) 0%,
      rgba(10, 6, 6, 0.78) 65%,
      rgba(10, 6, 6, 0.95) 100%
    ),
    linear-gradient(
      180deg,
      rgba(10, 6, 6, 0.7) 0%,
      rgba(10, 6, 6, 0.25) 30%,
      rgba(10, 6, 6, 0.45) 70%,
      rgba(10, 6, 6, 0.95) 100%
    );
}

/* ============================================================
 * 3. Hero (long LP)
 * ============================================================ */

.bhg-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Top padding clears the fixed-top header (.bhg-nav, 64px). The flex
   * vertical-center then operates on the area BELOW the header instead
   * of the full viewport — without this, the hero capsule visually
   * collides with the menu and the user sees content jammed to the top.
   * Background image keeps full-bleed because .bhg-hero__bg is
   * absolute-positioned at inset:0 (unaffected by padding). */
  padding: 64px 1.5rem 0;
  text-align: center;
  /* dvh first; vh fallback; finally JS-set --app-height for iOS in-app
   * browsers (set by lp/layout.tsx boot — ported in inc/enqueue). */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: var(--app-height, 100dvh);
}

.bhg-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -20;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* Background gameplay video. Same absolute-fill box as .bhg-hero__bg so
 * the poster <img> (LCP, painted first) and the <video> occupy the
 * EXACT same rect — when bg-video.js lazy-attaches sources and the
 * video starts, it cross-fades in over the identical frame with zero
 * layout shift. Sits one layer above the poster (z:-19 vs the poster's
 * z:-20) and below the gradient (z:-10). `opacity:0` until JS adds
 * .is-playing so a slow/aborted video never flashes a black box. */
.bhg-hero__video {
  position: absolute;
  inset: 0;
  z-index: -19;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.bhg-hero__video.is-playing {
  opacity: 1;
}
/* Never animate-in the video for reduced-motion users — the poster
 * stays. bg-video.js also skips autoplay there; this is belt-and-braces
 * in case the class is added before the JS guard runs. */
@media (prefers-reduced-motion: reduce) {
  .bhg-hero__video { display: none !important; }
}

.bhg-hero__inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 48rem; /* max-w-3xl */
  margin: 0 auto;
  /* Tight on small screens so the entire stack (wordmark → badge → H1
   * → subhead → Wishlist CTA) fits above the fold on a 640-720px tall
   * smartphone viewport once the 64px fixed header is subtracted. */
  padding: 0.75rem 0;
}

@media (min-width: 640px) {
  .bhg-hero__inner {
    padding: 2rem 0;
  }
}
@media (min-width: 768px) {
  .bhg-hero__inner {
    padding: 3rem 0;
  }
}

/* Wordmark CTA (clickable game logo). */
.bhg-wordmark {
  display: inline-block;
  border-radius: 0.25rem;
  /* Trimmed on mobile (was 1.5rem) so wordmark + badge + H1 + subhead
   * + CTA stack still leaves the Wishlist button above-the-fold on a
   * 640-720px portrait smartphone viewport. */
  margin-bottom: 0.75rem;
  transition: transform 200ms ease-out;
}
/* Sticky-hover guard: only apply zoom on devices that have a real
 * hover capability. On iOS in-app webviews tapping triggers :hover
 * and the scale stays applied until the user taps elsewhere — which
 * inside the LP often means another CTA, breaking the visual flow. */
@media (hover: hover) {
  .bhg-wordmark:hover {
    transform: scale(1.03);
  }
}
.bhg-wordmark:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bhg-bg),
    0 0 0 4px rgba(255, 59, 31, 0.6);
}
.bhg-wordmark__img {
  width: 260px;
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.9));
}

@media (min-width: 640px) {
  .bhg-wordmark { margin-bottom: 1.5rem; }
  .bhg-wordmark__img { width: 320px; }
  .bhg-badge { margin-bottom: 1.25rem; }
}
@media (min-width: 768px) {
  .bhg-wordmark__img { width: 380px; }
}

/* Release badge (red dot + uppercase eyebrow text). */
.bhg-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.375rem 1rem;
  border: 1px solid rgba(200, 30, 30, 0.4);
  border-radius: 9999px;
  background: rgba(69, 10, 10, 0.4); /* red-950/40 */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fecaca; /* red-200 */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (min-width: 640px) {
  .bhg-badge { font-size: 0.875rem; }
}
.bhg-badge__dot {
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--bhg-accent);
  box-shadow: 0 0 8px rgba(200, 30, 30, 0.9);
}

/* H1 — display serif, uppercase, dramatic shadow. */
.bhg-hero__title {
  font-family: var(--bhg-font-display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-shadow:
    0 4px 30px rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(0, 0, 0, 0.6);
}

.bhg-hero__subhead {
  margin-top: 1.25rem;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.375;
  color: #e5e7eb; /* gray-200 */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}
@media (min-width: 640px) {
  .bhg-hero__subhead { font-size: 1.125rem; }
}

/* Trust strip (uppercase factoids under CTA). */
.bhg-trust {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d1d5db; /* gray-300 */
}
@media (min-width: 640px) {
  .bhg-trust { font-size: 0.875rem; }
}
.bhg-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.bhg-trust__dot {
  display: block;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: var(--bhg-accent);
  box-shadow: 0 0 4px rgba(200, 30, 30, 0.8);
}

/* Scroll hint (bottom of hero, sm+ only). */
.bhg-scroll-hint {
  display: none;
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 640px) {
  .bhg-scroll-hint { display: block; }
}
.bhg-scroll-hint__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.bhg-scroll-hint__line {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6),
    transparent
  );
}

/* ============================================================
 * 4. CTA button (hellfire #ff3b1f primary button)
 * ============================================================ */

.bhg-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 1.25rem 2rem;
  min-height: 56px;
  border-radius: 0.375rem;
  background: var(--bhg-cta);
  color: #000;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 40px rgba(255, 59, 31, 0.35);
  transition: background-color 200ms ease-out, box-shadow 200ms ease-out,
    transform 200ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.bhg-cta:hover {
  background: #fff;
  box-shadow: 0 0 60px rgba(255, 59, 31, 0.55);
}
.bhg-cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255, 59, 31, 0.5),
    0 0 60px rgba(255, 59, 31, 0.55);
}
@media (min-width: 640px) {
  .bhg-cta {
    padding: 1.5rem 2.5rem;
    font-size: 1.25rem;
  }
}
.bhg-cta__icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  -webkit-mask: url('../img/steam-icon.svg') center / contain no-repeat;
  mask: url('../img/steam-icon.svg') center / contain no-repeat;
}
@media (min-width: 640px) {
  .bhg-cta__icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ============================================================
 * 5. Trailer section
 * ============================================================ */

.bhg-section {
  position: relative;
  padding: 5rem 1.5rem;
}
@media (min-width: 640px) {
  .bhg-section { padding: 6rem 1.5rem; }
}

.bhg-section__container {
  max-width: 64rem; /* max-w-4xl */
  margin: 0 auto;
}
.bhg-section__container--wide {
  max-width: 72rem; /* max-w-6xl */
}

.bhg-eyebrow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(252, 165, 165, 0.8); /* red-300/80 */
}

.bhg-section__title {
  margin-top: 0.75rem;
  text-align: center;
  font-family: var(--bhg-font-display);
  font-size: 1.875rem; /* 3xl */
  font-weight: 900;
  text-transform: uppercase;
}
@media (min-width: 640px) {
  .bhg-section__title { font-size: 3rem; } /* 5xl */
}

.bhg-trailer-card {
  position: relative;
  display: block;
  margin-top: 2.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transition: transform 200ms ease-out;
}
@media (hover: hover) {
  .bhg-trailer-card:hover {
    transform: scale(1.01);
  }
}
.bhg-trailer-card__poster {
  width: 100%;
  height: auto;
}
.bhg-trailer-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  transition: background-color 200ms ease-out;
}
@media (hover: hover) {
  .bhg-trailer-card:hover .bhg-trailer-card__overlay {
    background: rgba(0, 0, 0, 0.15);
  }
}
.bhg-trailer-card__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  background: var(--bhg-cta);
  color: #000;
  box-shadow: 0 0 50px rgba(255, 59, 31, 0.6);
  transition: transform 200ms ease-out;
}
@media (min-width: 640px) {
  .bhg-trailer-card__play {
    width: 6rem;
    height: 6rem;
  }
}
@media (hover: hover) {
  .bhg-trailer-card:hover .bhg-trailer-card__play {
    transform: scale(1.1);
  }
}
.bhg-trailer-card__play-icon {
  width: 2rem;
  height: 2rem;
  margin-left: 0.25rem; /* optical centering */
}
@media (min-width: 640px) {
  .bhg-trailer-card__play-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ============================================================
 * 6. Pillars
 * ============================================================ */

.bhg-pillars {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .bhg-pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.bhg-pillar {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  padding: 1.5rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (min-width: 640px) {
  .bhg-pillar { padding: 2rem; }
}
.bhg-pillar__icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bhg-cta);
}
.bhg-pillar__title {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
@media (min-width: 640px) {
  .bhg-pillar__title { font-size: 1.25rem; }
}
.bhg-pillar__body {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: #d1d5db; /* gray-300 */
}
@media (min-width: 640px) {
  .bhg-pillar__body { font-size: 1rem; }
}

/* ============================================================
 * 7. Screenshot grid
 * ============================================================ */

.bhg-shots {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .bhg-shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
.bhg-shot {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.bhg-shot__img {
  width: 100%;
  height: auto;
  transition: transform 700ms ease-out;
}
@media (hover: hover) {
  .bhg-shot:hover .bhg-shot__img {
    transform: scale(1.05);
  }
}

/* ============================================================
 * 8. Final CTA
 * ============================================================ */

.bhg-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 6rem 1.5rem;
  text-align: center;
}
@media (min-width: 640px) {
  .bhg-final { padding: 8rem 1.5rem; }
}
.bhg-final__bg {
  position: absolute;
  inset: 0;
  z-index: -20;
  background-size: cover;
  background-position: center;
}
.bhg-final__veil {
  position: absolute;
  inset: 0;
  z-index: -10;
  background: rgba(10, 6, 6, 0.85);
}
.bhg-final__inner {
  max-width: 48rem;
  margin: 0 auto;
}
.bhg-final__title {
  font-family: var(--bhg-font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 0.95;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
}
.bhg-final__title-br {
  display: none;
}
@media (min-width: 640px) {
  .bhg-final__title-br { display: inline; }
}
.bhg-final__copy {
  margin-top: 1.5rem;
  color: #d1d5db;
  font-size: 1rem;
}
@media (min-width: 640px) {
  .bhg-final__copy { font-size: 1.125rem; }
}
.bhg-final .bhg-cta { margin-top: 2.5rem; }

/* ============================================================
 * 9. Footer (long LP)
 * ============================================================ */

.bhg-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.6);
  padding: 2.5rem 1.5rem;
  font-size: 0.875rem;
  color: #9ca3af; /* gray-400 */
}
.bhg-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
/* Desktop ≥640px: 3-column CSS Grid `1fr auto 1fr` so the social-icon
 * cluster (middle column) sits at the GEOMETRIC CENTRE of the viewport
 * regardless of brand-block or nav-block width. The previous flex
 * `space-between` distributed children equally between siblings, which
 * pushed socials right whenever the brand-block grew (e.g. with the
 * "Powered by Gamosy" credit line). Industry-standard pattern (Discord,
 * Linear, Notion footers). 1fr edge columns = mirrored gutters. */
@media (min-width: 640px) {
  .bhg-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: left;
  }
  .bhg-footer__inner > div:first-child { justify-self: start; }
  .bhg-footer__inner > .bhg-socials { justify-self: center; }
  .bhg-footer__inner > .bhg-footer__nav { justify-self: end; text-align: right; }
}
.bhg-footer__brand {
  font-family: var(--bhg-font-display);
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
}
.bhg-footer__credit {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}
.bhg-footer__credit a {
  text-underline-offset: 2px;
}
.bhg-footer__credit a:hover {
  text-decoration: underline;
}
.bhg-footer__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bhg-footer__nav a {
  /* WCAG AA: lift to ~70% white so contrast against bg-black/60 still
   * passes 4.5:1 for body text. Matches the squeeze footer fix. */
  color: rgba(255, 255, 255, 0.7);
  transition: color 150ms ease-out;
}
.bhg-footer__nav a:hover {
  color: #fff;
}

/* WCAG 2.4.7 — keyboard users must see a focus indicator on every
 * interactive element. Tailwind's reset (and ours) removes the UA
 * outline; restore it for keyboard navigation only via :focus-visible.
 * One canonical style applied to every clickable element in the LP. */
.bhg-footer__nav a:focus-visible,
.bhg-footer__credit a:focus-visible,
.bhg-trailer-card:focus-visible,
.bhg-shot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
 * 10. Squeeze (page-steam.php) — single-screen mobile
 * ============================================================ */

.bhg-squeeze {
  position: relative;
  /* Match the long LP hero — isolate the stacking context so the
   * negative-z gradient overlay sits ABOVE the bg image but BELOW
   * the .bhg-squeeze__main content (z-index: 10). Without this the
   * gradient escaped the page stacking and the bright Steam screenshot
   * showed through unmuted. */
  isolation: isolate;
  overflow: hidden;
  background: var(--bhg-bg);
  color: #fff;
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  min-height: 100vh;
  min-height: 100dvh;
  min-height: var(--app-height, 100dvh);
}
.bhg-squeeze__bg {
  position: absolute;
  inset: 0;
  z-index: -20;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
/* Squeeze background video — same fill + fade behaviour as the long
 * LP hero video. On the conversion-only /steam route the poster is
 * still the LCP; the loop is pure atmosphere and degrades to the
 * poster on reduced-motion / data-saver / autoplay-blocked webviews. */
.bhg-squeeze__video {
  position: absolute;
  inset: 0;
  z-index: -19;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.bhg-squeeze__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bhg-squeeze__video { display: none !important; }
}
.bhg-squeeze__main {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 28rem; /* max-w-md */
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: max(env(safe-area-inset-top), 12px);
  padding-bottom: max(env(safe-area-inset-bottom), 12px);
  text-align: center;
}
.bhg-squeeze__hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .bhg-squeeze__hero { gap: 1rem; }
}

.bhg-squeeze__wordmark-img {
  width: 240px;
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.9));
}
@media (min-width: 640px) {
  .bhg-squeeze__wordmark-img { width: 300px; }
}

.bhg-squeeze__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(200, 30, 30, 0.4);
  border-radius: 9999px;
  background: rgba(69, 10, 10, 0.4);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fecaca;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (min-width: 640px) {
  .bhg-squeeze__badge { font-size: 0.75rem; }
}
.bhg-squeeze__badge-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: var(--bhg-accent);
  box-shadow: 0 0 6px rgba(200, 30, 30, 0.9);
}

.bhg-squeeze__title {
  font-family: var(--bhg-font-display);
  font-size: clamp(2rem, 11vw, 3rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95);
}
.bhg-squeeze__subhead {
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.375;
  color: #e5e7eb;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}
@media (min-width: 640px) {
  .bhg-squeeze__subhead { font-size: 1rem; }
}

.bhg-squeeze .bhg-cta {
  margin-top: 0.25rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  min-height: 52px;
}
@media (min-width: 640px) {
  .bhg-squeeze .bhg-cta {
    padding: 1.25rem 2rem;
    font-size: 1.125rem;
    min-height: 56px;
  }
}

.bhg-squeeze__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d1d5db;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}
@media (min-width: 640px) {
  .bhg-squeeze__trust { font-size: 0.75rem; }
}
.bhg-squeeze__trust-sep {
  color: rgba(248, 113, 113, 0.8);
}

.bhg-squeeze__legal {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); /* WCAG AA on bg-black/60 — see comment */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
}
.bhg-squeeze__legal a {
  /* Visually 10px text but a 24px tappable hit-area — WCAG 2.5.5 (24x24)
   * passes, and we avoid accidental tap-and-dismiss when a thumb scrolls
   * over the legal line on iOS in-app webviews. Using inline-block + padding
   * (not min-height on the inline) so the line height of the surrounding
   * <p> doesn't change layout. */
  display: inline-block;
  padding: 6px 4px;
  min-height: 24px;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 150ms ease-out;
}
.bhg-squeeze__legal a:hover {
  color: #fff;
}

/* ============================================================
 * 11. Accessibility helpers
 * ============================================================ */

.bhg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced-motion: disable hover scales / 700ms zooms. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .bhg-shot__img,
  .bhg-trailer-card,
  .bhg-trailer-card__play,
  .bhg-wordmark {
    transform: none !important;
  }
}

/* ============================================================
 * 12. In-app browser hooks
 *
 * inapp-detect.js tags <html> with one of `ua-instagram`,
 * `ua-facebook`, `ua-tiktok`, `ua-snapchat`, `ua-twitter`,
 * `ua-line`, `ua-kakao`, `ua-whatsapp`, or `ua-wkwebview` when it
 * detects the corresponding webview. We don't ship per-vendor
 * placeholder rulesets here — the classes are stable hooks; if a
 * specific vendor needs a fix, add the rule alongside .ua-inapp
 * below (vendor-specific overrides cascade after the generic).
 * Generic in-app fixes — applied to ANY in-app webview. These are
 * safe baseline tweaks.
 * ============================================================ */
.ua-inapp .bhg-squeeze {
  /* In-app webviews mis-measure 100dvh frequently; rely on JS --app-height. */
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
}

/* ============================================================
 * 13. Generic page template (page.php)
 *
 * Used for Privacy Policy, Terms, Contact, etc. — any WP Page
 * that isn't the front page or /steam. Inherits the dark LP bg;
 * tunes typography for body text readability on dark.
 * ============================================================ */

.bhg-page {
  /* Triple viewport fallback (see .bhg-root for rationale). Without
   * --app-height on /privacy-policy and other short content pages, the
   * footer floats above the visible bottom in iOS in-app webviews. */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: var(--app-height, 100dvh);
  background-color: var(--bhg-bg, #0a0606);
  color: rgba(255, 255, 255, 0.92);
  padding: 4rem 1.25rem 5rem;
}
.bhg-page__article {
  max-width: 720px;
  margin: 0 auto;
}

/* Templates without an explicit .bhg-page__article wrapper (search.php,
 * archive.php, 404.php, index.php) used to render content full-width
 * because .bhg-page only sets padding, not max-width. Constrain direct
 * children to the same 720px reading width as page.php / single.php so
 * search results, post lists, 404 message, and the search form stay
 * visually consistent with the rest of the content site. */
.bhg-page > .bhg-page__header,
.bhg-page > .bhg-archive__list,
.bhg-page > .bhg-no-results,
.bhg-page > .bhg-page__footer,
.bhg-page > .bhg-pagination,
.bhg-page > .bhg-post-nav,
.bhg-page > .bhg-comments {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* WordPress-standard visually-hidden utility — hides text from sighted
 * users while keeping it announceable by screen readers. Without this
 * rule the `<span class="screen-reader-text">Submit search</span>` in
 * searchform.php renders as visible text, producing the duplicated
 * "SUBMIT SEARCHSEARCH" label glitch on /?s=… result pages. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  /* Skip-link variant: when receiving focus, become visible at top-left. */
  background-color: var(--bhg-cta, #ff3b1f);
  color: #000;
  clip: auto !important;
  clip-path: none;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  padding: 0.5rem 1rem;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  text-decoration: none;
  width: auto;
  z-index: 100000;
}
.bhg-page__header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.bhg-page__title {
  font-family: 'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
}
.bhg-page__content {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}
.bhg-page__content > * + * {
  margin-top: 1rem;
}
.bhg-page__content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  color: #fff;
}
.bhg-page__content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: #fff;
}
.bhg-page__content a {
  color: var(--bhg-cta, #ff3b1f);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bhg-page__content a:hover {
  text-decoration: none;
}
.bhg-page__content a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 2px;
}
.bhg-page__content ul,
.bhg-page__content ol {
  padding-left: 1.5rem;
}
.bhg-page__content ul li,
.bhg-page__content ol li {
  margin-top: 0.4rem;
}
.bhg-page__content blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 3px solid var(--bhg-cta, #ff3b1f);
  background: rgba(255, 255, 255, 0.04);
  font-style: italic;
}
.bhg-page__content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.bhg-page__content pre {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.5;
}
.bhg-page__content pre code {
  background: transparent;
  padding: 0;
}
.bhg-page__content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.bhg-page__content hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 2rem 0;
}
.bhg-page__footer {
  max-width: 720px;
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
}
.bhg-page__back {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.bhg-page__back:hover {
  color: #fff;
}
.bhg-page__back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
 * 14. Header navigation (fixed top)
 *
 * The header is rendered by header.php on every template. The hero LP
 * keeps body padding-top:0 so the dark header floats over the photo
 * at scroll-top; content templates use the wrapper margin already
 * applied by .bhg-page.
 * ============================================================ */

/* Skip link — visible only on keyboard focus, jumps to #bhg-main. */
.bhg-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--bhg-cta);
  color: #000;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: inset(50%);
}
.bhg-skip-link:focus,
.bhg-skip-link:focus-visible {
  top: 0;
  clip-path: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Header container ---------------------------------------------------- */
.bhg-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 64px;
  background: transparent;
  border-bottom: 1px solid transparent;
  /* Don't transition `backdrop-filter` — Facebook's Android in-app webview
   * (Chrome WebView 100-110 era) hits a GPU layer crash when an animated
   * backdrop-filter flips on first scroll. Symptom: header turns solid
   * black and never repaints, including the Wishlist mini-CTA which
   * becomes unreadable yellow-on-black. The blur still applies in one
   * frame when .is-scrolled flips — the visual delta is invisible. */
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.bhg-nav.is-scrolled {
  background: rgba(10, 6, 6, 0.85);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* 3-column grid: logo | centered nav | action cluster.
 * Beats the previous flex `space-between` which spread 5 children into
 * uneven gaps once Discord + Wishlist landed in the row. Grid gives the
 * menu a dedicated middle zone (1fr) and the CTA group a clean right
 * cluster, regardless of how many menu items the operator publishes. */
.bhg-nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 2rem;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .bhg-nav__inner { padding: 0 1.5rem; }
}

/* Right-side cluster: Discord + Wishlist + Hamburger. Tight gap groups
 * the buttons by Gestalt proximity (read as ONE control). */
.bhg-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
}
@media (max-width: 767px) {
  /* Below tablet only the hamburger renders inside the cluster — no
   * gap needed, lets it sit flush right. */
  .bhg-nav__actions { gap: 0; }
}

/* Centre the menu within the 1fr middle column rather than letting
 * flex-default left-align it against the logo. */
.bhg-nav__desktop { justify-self: center; }

/* Tablet fold (<900px): hide Discord first so the primary conversion
 * CTA (Wishlist) is never sacrificed when the row gets tight. Discord
 * remains accessible inside the mobile overlay CTA stack. */
@media (max-width: 899px) {
  .bhg-cta-discord.bhg-nav__cta { display: none; }
}

/* Logo wordmark ------------------------------------------------------- */
.bhg-nav__logo {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  opacity: 0.95;
  transition: opacity 200ms ease-out;
  border-radius: 2px;
}
.bhg-nav__logo:hover { opacity: 1; }
.bhg-nav__logo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.bhg-nav__logo-text {
  font-family: var(--bhg-font-display);
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

/* Desktop nav --------------------------------------------------------- */
.bhg-nav__desktop { display: none; }
@media (min-width: 768px) {
  .bhg-nav__desktop { display: block; }
}

.bhg-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bhg-nav__list--desktop {
  display: flex;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 767px) {
  .bhg-nav__list--desktop { display: none; }
}

.bhg-nav__item { margin: 0; }

.bhg-nav__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 200ms ease-out;
}
.bhg-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 200ms ease-out, background-color 200ms ease-out;
}
.bhg-nav__link:hover { color: #fff; }
.bhg-nav__link:hover::after { width: 100%; }
.bhg-nav__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 2px;
}
.bhg-nav__link.current-menu-item,
.bhg-nav__link[aria-current="page"] {
  color: #fff;
}
.bhg-nav__link.current-menu-item::after,
.bhg-nav__link[aria-current="page"]::after {
  width: 100%;
  background: var(--bhg-cta);
}

/* Mini CTA (desktop only). Inherits .bhg-cta hellfire/black + Steam icon.
 * `min-width` keeps Discord and Wishlist visually identical-width so the
 * cluster reads as one button group; without it "Discord" (7 chars) and
 * "Wishlist" (8 chars) render different widths and the asymmetry pulls
 * focus away from the labels. */
.bhg-cta-mini {
  margin-top: 0;
  padding: 0 0.875rem;
  min-width: 116px;
  min-height: 36px;
  height: 36px;
  font-size: 0.8125rem;
  font-weight: 800;
  gap: 0.5rem;
  letter-spacing: 0.05em;
  box-shadow: 0 0 20px rgba(255, 59, 31, 0.25);
}
@media (hover: hover) {
  .bhg-cta-mini:hover {
    box-shadow: 0 0 30px rgba(255, 59, 31, 0.45);
  }
}
/* Touch-device boost: tablets in landscape (≥768px) still see the
 * mini CTA but tap with fingers, not a cursor. Bring up to WCAG
 * 2.5.5 minimum (44x44) on coarse pointers. */
@media (min-width: 768px) and (pointer: coarse) {
  .bhg-cta-mini {
    min-height: 44px;
    height: 44px;
  }
}
.bhg-cta-mini .bhg-cta__icon {
  width: 16px;
  height: 16px;
}
@media (max-width: 767px) {
  .bhg-nav__cta.bhg-cta-mini { display: none; }
}
.bhg-nav__cta.bhg-cta-mini:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Hamburger ----------------------------------------------------------- */
.bhg-nav__hamburger {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  .bhg-nav__hamburger { display: none; }
}
/* Mobile: pin hamburger to the viewport top-right at EXACTLY the same
 * coordinates as the overlay close button (.bhg-nav__close uses
 * `position: fixed; top: 12px; right: 12px`). Identical positioning
 * eliminates ALL alignment ambiguity — container padding, scrollbar
 * gutter, grid column boundaries, etc. become irrelevant. The hamburger
 * sits at the viewport corner; toggling to X swaps icons in place
 * without any visual jump. z-index 102 keeps it above the header
 * (z:100) but below the overlay (z:200). */
@media (max-width: 767px) {
  .bhg-nav__hamburger {
    position: fixed;
    top: 10px;        /* (64px header − 44px button) / 2 = 10px = vertical centre */
    right: 12px;
    z-index: 102;
  }
}
.bhg-nav__hamburger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.bhg-nav__hamburger-bar {
  position: absolute;
  left: 50%;
  display: block;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background: #fff;
  border-radius: 1px;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bhg-nav__hamburger-bar:nth-child(1) { top: 14px; }
.bhg-nav__hamburger-bar:nth-child(2) { top: 21px; }
.bhg-nav__hamburger-bar:nth-child(3) { top: 28px; }

.bhg-nav__hamburger[aria-expanded="true"] .bhg-nav__hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.bhg-nav__hamburger[aria-expanded="true"] .bhg-nav__hamburger-bar:nth-child(2) {
  opacity: 0;
}
.bhg-nav__hamburger[aria-expanded="true"] .bhg-nav__hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile overlay ------------------------------------------------------ */
.bhg-nav__overlay {
  position: fixed;
  inset: 0;
  /* Above header (z:100). The hamburger inside the header is faded to
   * opacity 0 by `.is-nav-open .bhg-nav__hamburger`, so the user only
   * sees the overlay's own close button — no double-X collision. */
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px 1.5rem 2rem;
  background: rgba(10, 6, 6, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 250ms ease-out;
}
.bhg-nav__overlay[hidden] { display: none; }
.bhg-nav__overlay.is-open { opacity: 1; }

.bhg-nav__list--mobile {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  max-width: 480px;
}
.bhg-nav__list--mobile .bhg-nav__link {
  font-family: var(--bhg-font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: #fff;
  padding: 0.75rem 1rem;
  min-height: 44px;
  text-align: center;
}
.bhg-nav__list--mobile .bhg-nav__link::after { display: none; }
.bhg-nav__list--mobile .bhg-nav__link:hover,
.bhg-nav__list--mobile .bhg-nav__link:active,
.bhg-nav__list--mobile .bhg-nav__link.current-menu-item,
.bhg-nav__list--mobile .bhg-nav__link[aria-current="page"] {
  color: var(--bhg-cta);
}

.bhg-nav__close {
  /* position: fixed (not absolute) so `right: 12px` references the
   * VIEWPORT, not the overlay's padding box (which has 1.5rem
   * horizontal padding and would otherwise push the button to
   * 24+12 = 36px from the viewport edge — visibly misaligned with
   * the hamburger which sits at 12px from viewport edge in the
   * header). z-index 201 keeps it above the overlay (z:200). */
  position: fixed;
  z-index: 201;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  border-radius: 2px;
}
.bhg-nav__close svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}
.bhg-nav__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Body scroll lock while overlay is open (JS adds .is-nav-open on
 * <html>). On iOS WebKit (every in-app webview — Instagram, Facebook,
 * Snapchat, X, Threads, Telegram, WhatsApp), `overflow: hidden` on
 * <html> alone does NOT prevent the document from scrolling — the
 * underlying long LP would still scroll *through* the overlay,
 * dragging the URL bar in/out and re-firing `resize`. Locking BOTH
 * <html> and <body>, plus `touch-action: none` and
 * `overscroll-behavior: contain`, is the canonical iOS recipe. */
html.is-nav-open,
html.is-nav-open body {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}

/* Hide the hamburger when the mobile overlay is open. The overlay's own
 * close (X) button takes over the dismiss role — without this rule both
 * X icons render at top-right (header z:100 sits above overlay z:99) and
 * the user sees a "double X". The animated bars→X transition still
 * runs visually for the half-second the hamburger fades out, which keeps
 * the open/close affordance feeling continuous. */
.is-nav-open .bhg-nav__hamburger {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

/* Reduced motion — kill all nav transitions. */
@media (prefers-reduced-motion: reduce) {
  .bhg-nav,
  .bhg-nav__logo,
  .bhg-nav__link,
  .bhg-nav__link::after,
  .bhg-nav__hamburger-bar,
  .bhg-nav__overlay,
  .bhg-cta-mini {
    transition: none !important;
  }
}

/* ============================================================
 * 15. Discord CTA variant + mobile overlay bottom-CTA section
 *
 * Discord button shares the .bhg-cta dimensions but swaps the
 * accent yellow for the official Discord indigo (#5865F2 → hover
 * #4752c4). The Steam icon mask-image is replaced with the Discord
 * icon. Used in two contexts: as `.bhg-cta-mini.bhg-cta-discord`
 * in the header (left of Wishlist) and as full `.bhg-cta-discord`
 * in the mobile overlay bottom CTA section.
 * ============================================================ */

.bhg-cta-discord {
  background: #5865F2;
  color: #fff;
  /* Hero Discord CTA + mobile overlay variant keep a soft glow. The
   * desktop mini-variant in the header neutralises this below — see
   * the `.bhg-cta-discord.bhg-cta-mini` override — so the right-
   * side cluster reads "Wishlist (primary, glowing) + Discord
   * (secondary, flat)" without changing button geometry. */
  box-shadow: 0 0 32px rgba(88, 101, 242, 0.35);
}
/* Recessive Discord variant for the header cluster: same dimensions
 * as Wishlist but no shadow at rest. Conversion priority via emphasis,
 * not size. Hover restores a smaller indigo glow so the affordance
 * stays. */
.bhg-cta-discord.bhg-cta-mini {
  box-shadow: none;
}
.bhg-cta-discord.bhg-cta-mini:hover {
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.4);
}
.bhg-cta-discord:hover {
  background: #4752c4;
  color: #fff;
  box-shadow: 0 0 48px rgba(88, 101, 242, 0.55);
}
.bhg-cta-discord:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(88, 101, 242, 0.5),
    0 0 48px rgba(88, 101, 242, 0.55);
}
.bhg-cta-discord .bhg-cta__icon {
  background-color: currentColor;
  -webkit-mask-image: url("../img/discord-icon.svg");
  mask-image: url("../img/discord-icon.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Mobile overlay bottom-CTA section (Discord + Wishlist stacked).
 * Sits BELOW the menu list inside .bhg-nav__overlay. */
.bhg-nav__overlay-cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 320px;
  margin-top: 2rem;
  padding: 0 1rem;
}
.bhg-nav__overlay-cta .bhg-cta {
  width: 100%;
  margin-top: 0;
  padding: 1rem 1.25rem;
  min-height: 56px;
  font-size: 1rem;
  /* Override hero CTA's huge box-shadow on mobile — keeps the visual
   * weight balanced when two large buttons stack. */
  box-shadow: 0 0 16px rgba(255, 59, 31, 0.25);
}
.bhg-nav__overlay-cta .bhg-cta-discord {
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.35);
}

/* Hide the overlay CTA section on desktop — overlay itself is mobile-only
 * (CSS hides it >=768px via .bhg-nav__hamburger media query) but defensive
 * media query here makes the rule self-documenting. */
@media (min-width: 768px) {
  .bhg-nav__overlay-cta { display: none; }
}

/* Reduced motion — disable hover transforms */
@media (prefers-reduced-motion: reduce) {
  .bhg-cta-discord { transition: none !important; }
}

/* ============================================================
 * 16. Footer social icons row
 *
 * Monochrome white icons by default — fits the cinematic horror
 * aesthetic better than rainbow brand colours. On hover each icon
 * lifts to its brand colour (Discord indigo, Instagram pink, TikTok
 * magenta-cyan won't work in monochrome so falls back to white,
 * YouTube red). Tap target ≥ 44×44 per WCAG 2.5.5 even though the
 * visible icon is 22×22.
 * ============================================================ */

.bhg-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 0.75rem = 12px clear separation between 48px tap targets — clears
   * WCAG 2.5.8 enhanced (24px between centers is comfortably exceeded
   * at 48 + 12 = 60px center-to-center). */
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bhg-socials__item { margin: 0; padding: 0; }

.bhg-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48×48 satisfies WCAG 2.5.5 AAA (Material/iOS HIG comfort target),
   * not just the 44×44 AA minimum. Visible icon stays 22×22 — extra
   * pixels are invisible hit-slop. */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  transition: color 200ms ease-out, background-color 200ms ease-out, transform 200ms ease-out;
}
.bhg-social:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.bhg-social:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Per-channel hover colour (subtle brand cue). Mask is set per channel
 * below — `currentColor` background fills the mask, so the icon takes
 * whatever colour the link currently has. */
.bhg-social--discord:hover  { color: #5865F2; }
.bhg-social--instagram:hover { color: #E4405F; }
/* TikTok brand is multicolour (cyan + magenta); single-colour mask can't
 * render both. Magenta `#FE2C55` reads as "TikTok" instinctively AND
 * provides a visible state change against the default white-60 (white
 * → white = no perceived hover). */
.bhg-social--tiktok:hover    { color: #FE2C55; }
.bhg-social--youtube:hover   { color: #FF0000; }

/* Icon mask. Width/height stays inside the 44×44 hit area so users get
 * the WCAG touch target while the visible glyph reads at 22px. */
.bhg-social__icon {
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.bhg-social--discord  .bhg-social__icon { -webkit-mask-image: url("../img/discord-icon.svg");   mask-image: url("../img/discord-icon.svg"); }
.bhg-social--instagram .bhg-social__icon { -webkit-mask-image: url("../img/instagram-icon.svg"); mask-image: url("../img/instagram-icon.svg"); }
.bhg-social--tiktok    .bhg-social__icon { -webkit-mask-image: url("../img/tiktok-icon.svg");    mask-image: url("../img/tiktok-icon.svg"); }
.bhg-social--youtube   .bhg-social__icon { -webkit-mask-image: url("../img/youtube-icon.svg");   mask-image: url("../img/youtube-icon.svg"); }

/* Reduced motion — disable hover transform */
@media (prefers-reduced-motion: reduce) {
  .bhg-social { transition: none; }
  .bhg-social:hover { transform: none; }
}

/* ============================================================
 * 17. Price chip + content-rating badge (released paid game)
 *
 * Bloodhound is a released, paid title — unlike a "wishlist"
 * pre-release LP. The CTA cluster therefore carries an optional
 * price chip, and the hero shows an honest 18+ content-rating
 * badge next to the release label.
 * ============================================================ */

.bhg-cta-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.bhg-price-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(var(--bhg-cta-rgb), 0.45);
  border-radius: 9999px;
  background: rgba(var(--bhg-cta-rgb), 0.08);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* Content-rating badge — a deliberately plainer sibling of the red
 * release badge. No glow: it's a legal/expectation signal, not a
 * conversion element. Sits inline next to .bhg-badge in the hero. */
.bhg-badge--rating {
  border-color: rgba(255, 255, 255, 0.25);
  /* 0.6 (not 0.45) so the 18+ legal label stays legible over a bright
   * video frame regardless of what's behind the hero gradient. */
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.14em;
}
.bhg-badge--rating .bhg-badge__dot {
  background: #fff;
  box-shadow: none;
}

/* Wrap release + rating badges so they sit on one row (wrap on
 * narrow screens) instead of stacking via the hero's flex column. */
.bhg-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.bhg-badge-row .bhg-badge { margin-bottom: 0; }
@media (min-width: 640px) {
  .bhg-badge-row { margin-bottom: 1.25rem; }
}

/* ============================================================
 * 18. Stats band (5 ACTS · 10 WEAPONS · 16 ENEMIES · 5 BOSSES)
 *
 * High-impact number row — a genre staple for released action
 * games. Two columns on mobile, four from 640px. Big condensed
 * Oswald numerals in hellfire, muted uppercase labels.
 * ============================================================ */

.bhg-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
@media (min-width: 640px) {
  .bhg-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    padding: 3.5rem 1.5rem;
  }
}
.bhg-stat__num {
  font-family: var(--bhg-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1;
  color: var(--bhg-cta);
  text-shadow: 0 0 28px rgba(var(--bhg-cta-rgb), 0.35);
}
.bhg-stat__label {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
@media (min-width: 640px) {
  .bhg-stat__label { font-size: 0.8125rem; }
}

/* ============================================================
 * 19. Story section ("A Hell of a Story" — dual dimensions)
 *
 * Image + narrative copy. Stacked on mobile (image first), two
 * columns from 768px. Reuses the .bhg-section vertical rhythm.
 * ============================================================ */

.bhg-story__grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 768px) {
  .bhg-story__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}
.bhg-story__media {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
.bhg-story__img {
  width: 100%;
  height: auto;
  display: block;
}
.bhg-story__body p {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #d1d5db;
}
.bhg-story__body p:first-child { margin-top: 0; }
@media (min-width: 640px) {
  .bhg-story__body p { font-size: 1.0625rem; }
}
.bhg-story__lead {
  font-family: var(--bhg-font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff !important;
}

/* ============================================================
 * 20. "Also on" platform row (Steam · PlayStation · Xbox)
 *
 * Secondary to the primary CTA: a quiet, bordered pill row so a
 * console player has a one-tap path to their store without
 * competing with the hellfire "Add to Wishlist" button. Sits in
 * the hero + final CTA clusters and the footer. Wraps centred on
 * mobile; the "Also on" lead label drops below the sm breakpoint.
 * ============================================================ */

.bhg-platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.625rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.bhg-platforms__lead {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72); /* ≈#b7b7b7 → ~4.7:1 on #0a0606 (WCAG 1.4.3 AA) */
}
@media (max-width: 479px) {
  .bhg-platforms__lead { flex-basis: 100%; text-align: center; }
}
.bhg-platforms__item { margin: 0; padding: 0; }

.bhg-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px; /* WCAG 2.5.5 — applies to all pointers, not just coarse */
  padding: 0 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease-out, border-color 180ms ease-out,
    background-color 180ms ease-out, transform 180ms ease-out;
}
@media (hover: hover) {
  .bhg-platform:hover {
    color: #fff;
    border-color: rgba(var(--bhg-cta-rgb), 0.7);
    background: rgba(var(--bhg-cta-rgb), 0.10);
    transform: translateY(-1px);
  }
}
.bhg-platform:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* /steam is touch-only paid traffic — ensure even the COMPACT pills
 * meet WCAG 2.5.5 (44px) on coarse pointers (base is already 44px). */
@media (pointer: coarse) {
  .bhg-platforms--compact .bhg-platform { min-height: 44px; }
}
.bhg-platform__icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.bhg-platform--steam       .bhg-platform__icon { -webkit-mask-image: url("../img/steam-icon.svg");       mask-image: url("../img/steam-icon.svg"); }
.bhg-platform--playstation .bhg-platform__icon { -webkit-mask-image: url("../img/playstation-icon.svg"); mask-image: url("../img/playstation-icon.svg"); }
.bhg-platform--xbox        .bhg-platform__icon { -webkit-mask-image: url("../img/xbox-icon.svg");         mask-image: url("../img/xbox-icon.svg"); }

/* Subtle brand-tint on hover (cue without going full rainbow). */
@media (hover: hover) {
  .bhg-platform--steam:hover       { color: #fff; }
  /* PlayStation brand blue (#0070D1), brightened to ~#1f9bff for AA
   * contrast on the near-black bg while still reading unmistakably as
   * PlayStation blue — not purple. */
  .bhg-platform--playstation:hover { color: #1f9bff; border-color: rgba(0, 112, 209, 0.85); background: rgba(0, 112, 209, 0.16); }
  /* Xbox brand green (#107C10), brightened to #3dbe3d for AA contrast
   * on near-black while still reading as Xbox green (parity with the
   * tuned PlayStation blue above). */
  .bhg-platform--xbox:hover        { color: #3dbe3d; border-color: rgba(16, 124, 16, 0.85); background: rgba(16, 124, 16, 0.16); }
}

/* Compact variant — squeeze /steam (smaller, no lead label). */
.bhg-platforms--compact {
  gap: 0.5rem;
  margin-top: 0.625rem;
}
.bhg-platforms--compact .bhg-platforms__lead { display: none; }
.bhg-platforms--compact .bhg-platform {
  min-height: 34px;
  padding: 0 0.7rem;
  font-size: 0.6875rem;
}
.bhg-platforms--compact .bhg-platform__icon { width: 15px; height: 15px; }

/* Footer placement: align left within the footer's left column,
 * tighter top margin since the credit line sits right above it. */
.bhg-footer .bhg-platforms {
  justify-content: center;
  margin-top: 0.75rem;
}
@media (min-width: 640px) {
  .bhg-footer .bhg-platforms { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .bhg-platform { transition: none; }
  .bhg-platform:hover { transform: none; }
}

/* ============================================================
 * 21. Layout utility + above-the-fold tuning
 * ============================================================ */

/* Replaces the inline style="padding-top:0" on the stats section
 * (CSP-safe — the theme engineers around strict in-app-webview CSP
 * elsewhere, so no inline styles). */
.bhg-section--flush-top { padding-top: 0; }

/* Above-the-fold on small phones (≤639px): the hero stack grew once
 * the 18+ rating badge (wraps) and the 3-pill platform row landed, so
 * the primary CTA could slip below the fold on a 360×640. Tighten the
 * vertical rhythm (don't hide the trust strip — it's a conversion
 * signal). Keeps the CTA reliably visible without changing desktop. */
@media (max-width: 639px) {
  .bhg-hero__subhead { margin-top: 0.875rem; font-size: 0.9375rem; }
  .bhg-hero .bhg-cta { margin-top: 1.25rem; }
  .bhg-hero .bhg-cta-cluster { gap: 0.5rem; }
  .bhg-hero .bhg-platforms { margin-top: 0.75rem; }
  .bhg-hero .bhg-trust { margin-top: 1rem; }
}

/* Squeeze /steam on very short viewports (notched phones with the
 * keyboard-less safe-area eating height): drop the subhead so the
 * single-screen flex layout never clips the pinned legal line. */
@media (max-height: 660px) {
  .bhg-squeeze__subhead { display: none; }
  .bhg-squeeze__hero { gap: 0.5rem; }
}