/* Mobile polish layer.
   Everything that changes the look lives inside the max-width query below, so
   desktop (768px and wider) renders exactly as before. The rules outside it are
   safety nets for images and embeds that are no-ops on the current desktop layout. */

/* ---- Images & embeds always scale to fit their container ---- */
img, video { max-width: 100%; }
img, video { height: auto; }
iframe, embed, object { max-width: 100%; }

@media (max-width: 767.98px) {
  /* ---- No sideways scrolling ---- */
  html, body { overflow-x: hidden; max-width: 100%; }
  @supports (overflow: clip) {
    html, body { overflow-x: clip; }
  }
  h1, h2, h3, p, li, span { overflow-wrap: break-word; }
  svg, canvas { max-width: 100%; }

  /* Scoreboards: let them wrap instead of pushing past the screen edge */
  .rounded-xl.font-display.flex,
  .rounded-lg.font-display.inline-flex {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }

  /* ---- Readable text: body copy at least 16px ---- */
  body { font-size: 16px; }
  .text-sm { font-size: 1rem; line-height: 1.5rem; }
  /* the feedback line under the goal had a fixed 20px height */
  .h-5.text-sm { height: auto; min-height: 1.5rem; }
  /* the tiny "Opened" badge on gift tiles */
  .text-\[10px\] { font-size: 12px; }
  html .bf-badge { font-size: 12px; }

  /* ---- Tap targets at least 44 x 44px ---- */
  a[href], button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }
  a[href^="#"].inline-flex { justify-content: center; }

  /* Pop-up close (×) button */
  [data-slot="dialog-close"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
  }
  [data-slot="dialog-close"] svg { width: 1.25rem; height: 1.25rem; }

  /* Page buttons and finale buttons added by matchday.js */
  html .bp-back { min-height: 48px; font-size: 14px; }
  html .bp-next { min-height: 48px; font-size: 16px; }
  html .bf-ghost {
    min-height: 44px;
    padding: 12px 18px;
    font-size: 14px;
  }
  html .bf-btn { min-height: 52px; }
}