/* =============================================================
   FANATIK Site v2.2 — download-bar.css
   =============================================================
   2026-05-22 CEO request: persistent floating download CTA strip
   pinned to the bottom of the viewport. "Always in the face top
   download" — always visible, always one tap away.

   Two buttons:
     - iOS:     App Store badge (Apple icon + "DOWNLOAD ON / App Store")
     - Android: generic Download CTA (no Play Store branding because
                the app isn't on Play Store yet — direct APK download
                via operator.fanatik.noftr.games/api/app/latest-apk)

   Z-index: 65 (2026-05-22 audit regression patch — was 70, then 80,
   now correctly 65). Below .chyron-surface (70) so drawer can dim the
   bar via its backdrop, above .site-header (50) so bar reliably sits
   above b-roll plate. Safe-area-inset-bottom respected for home-indicator
   iPhones.

   Brand guard:
     - lime focus rings + accent border on focus/hover (D3FE4C)
     - no decorative red/yellow/blue — palette-locked
     - tap targets ≥ 44 × 44 (iOS HIG)
     - reduced-motion + print + forced-colors handled
   ============================================================= */

.download-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 2026-05-22 audit fix v1 → v2 regression patch:
     v1: bumped from 70 to 80 to avoid collision with .chyron-surface (z=70).
     v2: bumping to 80 was wrong — it caused the bar to paint OVER the chyron
     drawer when the language picker opened on mobile (drawer rises from
     bottom, sits at z=70; bar at z=80 was above it).
     Correct value is 65 — below chyron-surface (70) so the drawer can dim
     the bar via its backdrop, but above .site-header (50) so the bar
     reliably sits above the b-roll plate. */
  z-index: 65;

  /* Translucent black so b-roll plate / hero animations subtly show
     through the strip — feels broadcast-overlay not modal-blocker. */
  background: rgba(10, 10, 10, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  /* Lime hairline on top edge ties to the brand palette without
     introducing a full-band lime block that would dominate. */
  border-top: 1px solid rgba(211, 254, 76, 0.22);

  padding: 12px 16px;
  /* Safe-area for home-indicator devices */
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  /* BUG M1 fix (wide screens ≥1680px etc.): the bar background still spans
     edge-to-edge (position:fixed; left:0; right:0 above), but the inner
     button row is constrained to a centered 720px content column. Because
     the two .download-bar__btn are DIRECT flex children (no HTML wrapper to
     add), we center them via symmetric horizontal padding: on wide screens
     padding grows to (100% - 720px)/2 each side → buttons cap ~720px wide
     and sit centered instead of stretching to ~940px each. On mobile
     (100% - 720px) is negative, so max() picks the 16px floor and buttons
     stay full-width edge-to-edge. */
  padding-inline: max(16px, calc((100% - 720px) / 2));

  display: flex;
  gap: 12px;
  align-items: stretch;

  /* Enter animation: slide up from below on first paint. JS adds
     .is-mounted after DOMContentLoaded to trigger. */
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 240ms ease;
}

.download-bar.is-mounted {
  transform: translateY(0);
}

/* 2026-05-22 audit fix: old Safari (<iOS 15) silently drops backdrop-filter
   leaving the bar with translucent black bg and visual noise from content
   behind it. Bump opacity to 0.98 when backdrop-filter isn't supported. */
@supports not (backdrop-filter: blur(8px)) {
  .download-bar {
    background: rgba(10, 10, 10, 0.98);
  }
}

/* ===== Button base ===== */
.download-bar__btn {
  flex: 1 1 0;
  /* BUG H1 fix: flex items default to min-width:auto, which refuses to
     shrink below their content's intrinsic width. With white-space:nowrap
     on the label/cta, long DE/FR strings ("HERUNTERLADEN BEI" etc.) force
     the equal-width buttons wider than half the viewport, pushing the
     Android button's text past the right edge (clipped ≤~414px). min-width:0
     lets the flex children actually shrink to their 1 1 0 basis. */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  min-height: 48px;

  background: #000;
  /* 2026-05-22 audit fix + v2 regression patch: original border 0.26 = 2.6:1
     contrast against the #000 bar background — fails WCAG 1.4.11 (3:1 min).
     v1: bumped to 0.45 (≈4.4:1 against pure #000). v2: bar background is
     actually rgba(10,10,10,0.94) with backdrop-blur — effective contrast
     drops to ~4.1:1 — marginal fail. v2 bump to 0.50 → ≈4.8:1 against
     translucent bg, safely above 3:1 threshold. */
  border: 1px solid rgba(255, 255, 255, 0.50);
  /* 2026-05-22 audit fix: brand uses hard square corners (--tile-radius: 0).
     8px violated brand square-corner rule. */
  border-radius: 0;

  font-family: "Inter", system-ui, sans-serif;
  color: #fff;
  text-decoration: none;
  text-align: left;

  transition: opacity 140ms ease,
              border-color 140ms ease,
              background 140ms ease;
}

.download-bar__btn:hover {
  opacity: 0.92;
  border-color: rgba(211, 254, 76, 0.55);
}

.download-bar__btn:active {
  opacity: 0.85;
}

.download-bar__btn:focus {
  outline: none;
}

.download-bar__btn:focus-visible {
  outline: 2px solid #D3FE4C;
  outline-offset: 2px;
  border-color: #D3FE4C;
}

/* ===== Icon (Apple + Android marks) ===== */
.download-bar__icon {
  flex-shrink: 0;
  width: 22px;
  height: auto;
  fill: currentColor;
}

/* ===== Two-line label (matches App Store badge format) ===== */
.download-bar__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}

.download-bar__label {
  font-size: 10px;
  font-weight: 400;
  /* BUG H1 fix: tightened 0.06em → 0.02em so the long DE/FR labels
     ("HERUNTERLADEN BEI" / "HERUNTERLADEN FÜR" / "TÉLÉCHARGER POUR")
     reclaim a few px and fit beside the icon at 381–430px. */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 3px;
  white-space: nowrap;
  /* BUG H1 fix: allow the label to shrink within the flex text column
     rather than dictating button width. min-width:0 (with parent's
     min-width:0) means an over-long label gets ellipsised, never forces
     horizontal overflow past the viewport edge. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.download-bar__cta {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  /* BUG H1 fix: same shrink-safety as the label — the bold store name
     stays on one line (nowrap) but ellipsises inside the flex column if a
     localized string is unusually long, instead of forcing the button (and
     the whole bar) past the viewport edge. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Narrow phones (≤ 360px): tighten padding and font ===== */
@media (max-width: 360px) {
  .download-bar {
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    gap: 10px;
  }
  .download-bar__btn {
    padding: 8px 10px;
    gap: 8px;
    /* 2026-05-22 audit fix: re-assert min-height at ≤360px to keep tap
       target ≥ iOS HIG 44pt. */
    min-height: 48px;
  }
  .download-bar__cta {
    font-size: 14px;
  }
}

/* ===== Very narrow phones (≤ 380px): drop the tiny label =====
   BUG H1 fix: below ~380px each equal-width button is < half of a ~320–380px
   viewport. The long DE/FR labels ("HERUNTERLADEN BEI" / "TÉLÉCHARGER POUR")
   cannot fit beside the icon in that space, so we hide the secondary
   .download-bar__label entirely and keep the icon + store name
   (.download-bar__cta), which always fits. Label returns ≥381px (the rule
   above stops applying), where the tightened letter-spacing lets DE/FR fit. */
@media (max-width: 380px) {
  .download-bar__label {
    display: none;
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .download-bar {
    transition: none;
    transform: translateY(0);
  }
  .download-bar.is-mounted {
    transform: translateY(0);
  }
  .download-bar__btn {
    transition: none;
  }
}

/* ===== Print ===== */
@media print {
  .download-bar {
    display: none;
  }
}

/* ===== Forced colors (Windows high-contrast) ===== */
@media (forced-colors: active) {
  .download-bar__btn {
    border: 1px solid ButtonText;
  }
  .download-bar__icon {
    fill: ButtonText;
    forced-color-adjust: auto;
  }
}

/* ===== Kill the inline duplicate badge pairs ===========
   2026-05-22 CEO escalation: this .download-bar (sticky bottom) is the
   SINGLE source of truth for App Store + Android download CTAs. The
   previous inline badge pairs were left in place — that was wrong, it
   shipped the user TWO competing CTA areas. Hiding the duplicate
   pairs here so HTML doesn't need surgical removal yet (rollback-safe).
   Follow-up: physically remove the HTML in a cleanup pass.

   Pairs being hidden:
     - .hero-chyron       — bottom broadcast strip under the hero (the
                            one CEO flagged in the 2026-05-22 screenshot)
     - .the-quiz__download-row — quiz pass + quiz fail state CTAs
     - .the-quiz__reveal-cta — "Download FANATIK." headline ABOVE the
                            now-hidden quiz badge rows (audit found
                            orphan headline). 2026-05-22 audit v2.
   The hidden .hero__cta-group--primary stays as-is (already hidden
   via the `hidden` attribute — it's a JS state hook, not a render). */
.hero-chyron,
.the-quiz__download-row,
.the-quiz__reveal-cta {
  display: none !important;
}

/* 2026-05-22 v4 — bar hides during app-tour section only.
   The download bar overlapped the app-tour step-index nav (01 COUNTDOWN
   / 02 ROOMS / 03 RANKINGS / 04 FRIENDS) at the bottom of viewport
   while user was inside the app-tour scroll stage. Same
   .is-scrolled-past-hero class as .site-header + .chyron-tile (toggled
   by a single IntersectionObserver in index.html watching
   #appTourStepIndex). Bar is visible everywhere except app-tour —
   respects CEO's "always in the face" intent for hero, footer, quiz,
   and inter-section gaps. Class name is a misnomer for the bar but
   reused to avoid CSS churn. */
.download-bar.is-scrolled-past-hero {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* ===== Page bottom-padding so footer isn't covered =====
   The sticky bar is ~72px tall (12 top + 48 button min-height + 12
   bottom) plus the safe-area-inset-bottom. v2 regression patch:
   added 16px breathing room above the bar so the last line of footer
   isn't flush against the bar's top edge. Total clearance: 88px + safe.

   2026-05-22 Phase C cleanup: scope to `:has(.download-bar)` so pages
   that don't include the bar (privacy, terms, press, 404) don't carry
   a phantom 88px void below their content. Modern browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+) support :has(); older browsers fall back
   to the broader rule via the @supports negative below. */
body:has(.download-bar) {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 360px) {
  body:has(.download-bar) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* Fallback for browsers without :has() (older Safari 15.0-15.3,
   pre-Chromium Edge). Applies the padding globally as before. Modern
   browsers' rule wins via higher specificity. */
@supports not selector(:has(*)) {
  body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  @media (max-width: 360px) {
    body {
      padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* Print — strip the offset since the bar is hidden. */
@media print {
  body {
    padding-bottom: 0;
  }
}