/*
   Play Wins - port fixes.

   Loaded AFTER styles.css. Everything here is ours, not the milestone's.

   styles.css is kept byte-verbatim from the marketing milestone so a future
   re-sync is a clean copy. Any correction we need lives in this file instead,
   which keeps our changes reviewable and survives the next milestone drop.

   See Copilot/memories/site-v2-milestone-resync-workflow.md.
*/

/* ── Mobile CTA: Hani (P40) covering the store buttons (P39) ──────────────
   Reported on a real phone 2026-08-13, after the Prod rollout.

   The milestone sizes the CTA card from the viewport — .p39 is
   `height: min(570px, 70svh)` — but pins Hani's bubble with fixed pixels:
   `.p40 { bottom: 62px; height: 230px }`, so P40 always occupies the band
   62px-292px off the bottom of .cta-field.

   In the milestone the story ran inside a fixed-height iframe, where svh
   resolves to the iframe box and never changes. We render it as a top-level
   document, so on a real phone svh shrinks whenever the browser chrome is
   visible. The card gets shorter, its vertically-centred content slides down
   into P40's fixed band, and Hani lands on top of the store buttons — the
   only conversion on the page. Desktop mobile-emulation does not reproduce
   it, because the emulated viewport has no collapsing URL bar.

   Fix: on mobile, stop absolutely positioning P40 and let the CTA stack in
   normal flow, so the buttons can never be covered regardless of viewport
   height. pointer-events: none is belt-and-braces — even if geometry shifts
   again, the bubble can never swallow a tap meant for a store button.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .cta-field {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    /* Content-driven height instead of 70svh: the card is then always tall
       enough for its own content, whatever the browser chrome is doing. */
    .p39 {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .p40 {
        position: static;
        width: 76vw;
        height: auto;
        min-height: 0;
        right: auto;
        bottom: auto;
        pointer-events: none;
    }

    /* The store buttons are the conversion — keep them above every
       decorative sibling (coins, brush strokes, Hani) no matter what. */
    .store-badges {
        position: relative;
        z-index: 12;
    }
}