/* Mobile height compression */
@media (max-height: 640px) {
  :root {
    --wheel-size: min(calc(100vw - 7.5rem), 19rem);
  }

  .headline {
    font-size: clamp(1.2rem, 6vw, 1.5rem);
  }

  .subhead {
    font-size: 0.76rem;
  }

  .wheel-pointer {
    top: -0.28rem;
    border-left-width: 12px;
    border-right-width: 12px;
    border-top-width: 18px;
  }

  .rewards-panel {
    padding-top: 0.25rem;
  }

  .foot-legal {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
  }
}

@media (max-height: 568px) {
  :root {
    --wheel-size: min(calc(100vw - 7.5rem), 17.5rem);
  }

  .copy-block {
    margin-bottom: 0.08rem;
  }

  .urgency-pill {
    margin-bottom: 0.2rem;
  }

  .spin-btn {
    --hub-size: clamp(4rem, 20vw, 5rem);
  }
}

@media (max-width: 719px) and (max-height: 620px) {
  /* On very short mobile screens squeeze out non-essential decorative text */
  .seo-note {
    display: none;
  }

  .copy-block--bandit {
    margin-bottom: 0.2rem;
  }

  .rewards-panel {
    padding-top: 0.15rem;
  }
}

/* Very small width */
@media (max-width: 340px) {
  .lang-dropdown__trigger {
    padding: 0.35rem 0.5rem;
    font-size: 0.72rem;
  }

  .wheel-rim {
    padding: 8px;
  }

  .attempts-scroll {
    max-width: 4.25rem;
  }

  .attempts-scroll__inner {
    font-size: 0.58rem;
    padding: 0.45rem 0.35rem;
  }
}

/* Mobile: hide parchment scroll, show count inside spin button */
@media (max-width: 719px) {
  .attempts-scroll {
    display: none;
  }

  .spin-btn__count {
    display: block;
  }
}

/* ── Lock the full page to one screen on mobile ────────────────── */
@media (max-width: 719px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100dvh;
    min-height: unset;
    overflow: hidden;
  }

  :root {
    /*
     * On mobile the parchment scroll is hidden, so the wheel can span
     * (100vw − 2rem) instead of the desktop (100vw − 7.5rem).
     * We also cap by available height:
     *   100dvh − 21rem ≈ all non-wheel content
     *   (padding 1rem + header 2rem + copy 3.5rem + game-title 2rem
     *    + rewards 4.5rem + footer 3rem + gaps 5rem)
     * This ensures the page always fits in one viewport without scrolling.
     */
    --wheel-size: min(
      calc(100vw - 2rem),
      calc(100dvh - 21rem),
      22rem
    );
  }
}

/* Tablet / desktop: centered card feel */
@media (min-width: 720px) {
  :root {
    --wheel-size: 22rem;
  }

  .app-shell {
    max-width: 32rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .toast {
    top: calc(var(--safe-top) + 2rem);
  }
}

@media (min-width: 1024px) {
  :root {
    --wheel-size: 24rem;
  }
}