@media (min-width: 430px) and (max-width: 899px) {
  /* Scoop view — tall rounded arch overlapping the hero */
  .view--scoop .scoop {
    width: 550px;
  }

  .view--sheet {
    height: calc(100dvh - 85px);
    overflow-y: auto;
    justify-content: flex-start;
  }

  .view--sheet .sheet {
    padding-block: 40px 25px;
    max-width: 400px;
    margin-inline: auto;
    min-height: stretch;
  }

  #view-result .sheet {
    padding-inline: 0;
  }
}

@media (max-width: 430px) {
  .stage-bg {
    flex: 1;
    background-position: center top;
    min-height: 25vh;
  }

  /* Scoop view — tall rounded arch overlapping the hero */
  .view--scoop .scoop {
    width: calc(100% + 120px);
    left: -60px;
  }

  .view--sheet .sheet {
    padding-block: 14px 25px;
  }
}

@media (max-width: 899px) {
  .view {
    min-height: 220px;
  }

  /* Scoop view — tall rounded arch overlapping the hero. min-height (not a fixed
     height) lets the arch grow when enlarged text spacing makes the content
     taller, so the bottom controls are never clipped (WCAG 1.4.12). */
  .view--scoop .scoop {
    min-height: 720px;
    border-radius: 47%;
    padding: 40px 100px 32px;
    gap: 8px;
    bottom: -375px;
  }

  /* Landing/launch content is anchored to the BOTTOM of the visible arc and
     grows upward, so enlarged text spacing pushes the title up into the empty
     hero area instead of pushing the controls down past the fold. The arch
     (bottom/min-height) is unchanged. padding-bottom = the 340px that sits below
     the fold + the gap we want above it; tune that gap (~40px) to taste. The
     video scoop (.scoop--game) keeps its own top-anchored layout. */
  #view-landing .scoop,
  #view-launch .scoop {
    justify-content: flex-end;
    padding-bottom: 397px;
  }

  .view--scoop .scoop--compact {
    padding-block-start: 73px;
    gap: 17px;
  }

  .view--scoop .scoop--compact .btn--primary {
    margin-block-start: 20px;
  }

  .view--scoop .scoop .rules-toggle {
    margin-block: 8px 15px;
  }

  .scoop--game {
    padding-block-start: 120px !important;
  }

  .game-wrapper {
    padding-block-end: 365px;
  }

  .reveal-card {
    max-width: 355px;
    padding: 35px 20px;
    gap: 20px;
  }

  .reveal-card .display {
    font-size: 35px;
    margin-block-end: 8px;
  }

  .reveal-status {
    font-size: 17px;
  }

  .reveal-instructions {
    margin-block-end: 14px;
    max-width: 230px;
    font-size: 15px;
  }

  .eyebrow {
    font-size: 13px;
  }

  .lead {
    font-size: 18px;
  }

  .rules-text {
    font-size: 15px;
  }

  /* Sheet view */
  .view--sheet .sheet {
    gap: 14px;
    flex: 0 0 auto;
  }

  .sheet-title {
    font-size: 35px;
  }

  /* Typography */
  .display {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .display--lg {
    font-size: 35px;
  }

  /* Buttons */
  .btn {
    padding: 16px 20px;
    font-size: 17px;
    max-width: 317px;
  }

  .link-btn {
    font-size: 17px;
  }

  .optin-card {
    max-width: 355px;
    padding-block: 17px;
    gap: 17px;
    margin-block-end: 20px;
  }

  .optin-card > * {
    padding-inline: 17px;
  }

  .optin-group-title {
    font-size: 15px;
  }

  .optin-label {
    font-size: 14px;
  }

  .optin-btn {
    width: 70px;
    height: 33px;
    font-size: 14px;
  }

  .optin-choice {
    gap: 12px;
  }

  .optin-row#profilage {
    padding-block-start: 17px;
  }

  /* Components */

  #view-result .sheet > *:not(.result-img, .redirect) {
    padding-inline: 18px;
  }

  .result-img {
    max-width: 357px;
    margin-block: 3px 9px;
  }

  .result-text {
    font-size: 17px;
  }

  .prize--photos .result-text {
    max-width: 344px;
  }

  .prize--postal_card .result-text {
    max-width: 392px;
  }

  .lose--result .result-text {
    margin-block-end: 60px;
    max-width: 295px;
  }

  .result-disclaimer {
    max-width: 299px;
    font-size: 15px;
    margin-block-start: -6px;
  }

  .result-fineprint {
    font-size: 12px;
    margin-block: 9px 14px;
  }

  .sheet.mobile {
    padding-block-end: 0;
  }

  .sheet .redirect .content {
    display: flex;
    flex-direction: column;
    gap: 17px;
  }

  .redirect .content h3 {
    padding-inline: 18px;
    font-size: 17px;
    font-weight: bold;
    font-family: var(--font-family-sans);
    text-align: left;
  }

  .sheet.mobile .redirect {
    background-color: var(--color-white);
    padding-block: 33px;
    border-radius: 17px 17px 0 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .redirect .links {
    display: flex;
    gap: 16px;

    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .redirect .links::-webkit-scrollbar {
    display: none;
  }

  .redirect .links a:first-child {
    margin-inline-start: 18px;
  }

  .redirect .links a:last-child {
    margin-inline-end: 18px;
  }

  .finish-actions {
    gap: 8px;
  }

  .accessibility-link {
    margin-block-start: 6px;
  }

  .sheet.mobile .redirect .accessibility-link {
    color: var(--color-brand-dark);
  }
}