/* CHO-941 — mobile polish layer, phones only (≤767px).
 *
 * Served at GET /mobile.css by the existing express.static and injected into
 * the bundle shell by server/bundleShell.ts. The design-tool template ships
 * its own responsive <style> at ≤1000px/≤560px whose rules use !important
 * and load after this file, so every override below pairs !important with a
 * higher-specificity selector (an `html body` prefix or a doubled
 * `[data-m]` attribute). Desktop and tablet (≥768px) are untouched: the
 * whole file is a single media query.
 *
 * Elements without stable hooks (the wizard modal, the hero checklist, the
 * versus-cups bracket seats) are tagged with data-gg-* attributes at runtime
 * by the gg-mobile-script controller injected next to this file; React
 * re-serialises inline style strings, so [style*=…] selectors were
 * unreliable against the rendered DOM.
 */

@media (max-width: 767px) {

  /* ---- Spacing: shorter sections, tighter grids and cards ---- */
  html body [data-m="section"][data-m] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  html body [data-m="grid2"][data-m] { gap: 20px !important; }
  html body [data-m="grid3"][data-m] { gap: 12px !important; }
  html body [data-m="grid4"][data-m] { gap: 12px !important; margin-top: 24px !important; }

  /* Feature cards ("Three ways to compete"): less inner padding … */
  html body [data-m="grid3"][data-m] > div { padding: 18px !important; }
  /* … and one colour per paragraph (the template leaves generated
     <span style="color: rgb(199, 206, 209)"> fragments inside #9FB2C8
     paragraphs, which reads as mid-sentence colour switches). */
  html body [data-m="grid3"][data-m] p span[style*="color"] { color: inherit !important; }
  /* … and the demo widgets sit closer to the card body. */
  html body [data-m="grid3"][data-m] > div > div:last-child {
    margin-top: 12px !important;
    padding-top: 12px !important;
  }

  /* Value-prop cards (the second grid3, tagged data-gg-values-grid): much
     slimmer; at ≥360px they flow two-per-row so six cards stop eating six
     full-width rows. */
  html body [data-gg-values-grid] { gap: 12px !important; }
  html body [data-gg-values-grid] > div { padding: 18px !important; }
  html body [data-gg-values-grid] > div > div:first-child {
    width: 36px !important;
    height: 36px !important;
  }
  html body [data-gg-values-grid] > div > div:nth-child(2) {
    margin-top: 12px !important;
    font-size: 18px !important;
  }
  html body [data-gg-values-grid] > div > p { margin-top: 8px !important; font-size: 14px !important; line-height: 1.5 !important; }
  @media (min-width: 360px) {
    html body [data-gg-values-grid] { grid-template-columns: 1fr 1fr !important; }
  }

  /* "How it works" step cards: keep the number beside the text, but
     slimmer. */
  html body [data-m="step"][data-m] {
    padding: 16px !important;
    grid-template-columns: 40px 1fr !important;
    gap: 14px !important;
  }
  html body [data-m="step"][data-m] > div:first-child { font-size: 28px !important; }
  html body #how [data-m="grid2"][data-m] > div:last-child { gap: 10px !important; }

  /* Founding-member claim card */
  html body #founding [data-m="grid2"][data-m] > div:last-child { padding: 20px !important; }
  html body #founding [data-m="grid2"][data-m] > div:first-child > div:last-child { gap: 10px !important; }
  html body #founding [data-m="h1"] { font-size: 34px !important; }
  html body #founding [data-m="lead"] { margin-top: 14px !important; }

  /* FAQ rows */
  html body #faq button { padding: 14px 18px !important; font-size: 16px !important; }
  html body #faq h2 + div { margin-top: 24px !important; gap: 10px !important; }

  /* Modes feature cards: tighter bullet lists. */
  html body #modes [data-m="grid3"][data-m] > div > div:nth-child(4) { gap: 6px !important; margin-top: 14px !important; }

  /* "How it works" and final CTA: tighter header rhythm. */
  html body #how [data-m="grid2"][data-m] > div:first-child a { margin-top: 18px !important; }
  html body #modes [data-m="grid3"][data-m] { margin-top: 28px !important; }
  html body #signup form { margin-top: 22px !important; }
  html body footer { padding: 32px 20px 64px !important; }

  /* Hero: tighter CTA/checklist rhythm and a slightly smaller lead. */
  html body #top [data-m="lead"] { font-size: 16px !important; }
  html body [data-gg-hero-ctas] { margin-top: 22px !important; }
  html body [data-gg-hero-checklist] { margin-top: 20px !important; }

  /* Header nav tap targets */
  html body [data-m="nav"][data-m] a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }

  /* ---- Hero checklist: left-aligned column, centred as a block, so the
     checkmarks line up (tagged data-gg-hero-checklist by the controller) ---- */
  html body [data-gg-hero-checklist] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---- Games at launch (option a): cards ≤260px tall at 390px wide, key
     art stays recognisable via per-game object-position ---- */
  html body #games [data-m="grid4"][data-m] > div { aspect-ratio: 16 / 10 !important; }
  html body #games [data-m="grid4"][data-m] img[src*="gg-game-1"] { object-position: 50% 62% !important; }
  html body #games [data-m="grid4"][data-m] img[src*="gg-game-2"] { object-position: 50% 28% !important; }
  html body #games [data-m="grid4"][data-m] img[src*="gg-game-3"] { object-position: 50% 90% !important; }

  /* ---- Versus-cups bracket: hide the empty placeholder seats ---- */
  html body [data-gg-empty-seat] { display: none !important; }

  /* ---- Back-to-top: ~40px visible box with a ≥44px hit area, tucked into
     the safe-area, and hidden by the controller while it would cover
     content. The template forces it visible at ≤1000px, so visibility
     toggling is done via a class, not display. The spec sizes the button
     at about 40×40 visible but requires tap targets ≥44px, so a
     transparent ::after ring extends the tappable box 2px past the
     visible one on every side (the anchor is position:fixed with
     backdrop-filter, so it is the containing block, and hit tests on the
     pseudo-element resolve to the anchor). The ring is sized explicitly:
     the anchor's 1px border shrinks its padding box to 38×38, so inset
     math alone would under-shoot. The controller's overlap check mirrors
     this 2px ring via its HIT_INSET constant. ---- */
  html body [data-m="scrolltop"][data-m] {
    width: 40px !important;
    height: 40px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body [data-m="scrolltop"][data-m]::after {
    content: "" !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    width: 44px !important;
    height: 44px !important;
  }
  html body .gg-scrolltop-hidden {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ---- Wizard (overlay + parts tagged data-gg-* by the controller) ---- */
  html body [data-gg-wizard] {
    padding: 12px !important;
    align-items: flex-start !important;
  }
  html body [data-gg-wizard] > div { border-radius: 16px !important; }
  html body [data-gg-wiz-header] { padding: 12px 14px !important; gap: 10px !important; }
  html body [data-gg-wiz-header] img[alt="GAMEGATE"] { height: 22px !important; }
  html body [data-gg-wiz-steprow] {
    white-space: nowrap !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
    gap: 10px !important;
  }
  html body [data-gg-wiz-body] { padding: 16px 16px 12px !important; }
  html body [data-gg-wiz-body] > div > p { margin: 6px 0 16px !important; }
  html body [data-gg-wizard] h3 { font-size: 24px !important; }

  /* Step 1 + step 2 pickers: one full-width row per option with a square
     cover thumb on the left (rows stay ≥44px tall). */
  html body [data-gg-wiz-grid] { grid-template-columns: 1fr !important; gap: 10px !important; }
  html body [data-gg-wiz-card] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
  }
  /* Spec: ~56–64px square covers. Step-2 game covers (tagged
     data-gg-wiz-cover by the controller) fill the square edge-to-edge
     with object-fit: cover; step-1 platform logos keep their contained
     look, capped inside the same square. */
  html body [data-gg-wiz-thumb] {
    width: 56px !important;
    height: 56px !important;
    flex: none !important;
    margin-top: 0 !important;
  }
  html body [data-gg-wiz-thumb] img {
    max-width: 48px !important;
    max-height: 48px !important;
  }
  html body [data-gg-wiz-cover] img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }
  html body [data-gg-wiz-text] {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    text-align: left !important;
  }
  html body [data-gg-wiz-text] > div:first-child {
    font-size: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Step 4 summary + claim CTA */
  html body [data-gg-wiz-summary] > div { padding: 12px 14px !important; }
  html body [data-gg-wiz-claim] { padding: 15px !important; font-size: 14px !important; }

  /* Wizard footer nav (sticky): stays visible at 390×844, reachable at
     320×568. */
  html body [data-gg-wiz-nav] { padding: 12px 14px !important; }
  html body [data-gg-wiz-nav] button { padding: 12px 18px !important; font-size: 13px !important; }
}