/* Mobile-first polish — phones are the primary surface */

@media (max-width: 374px) {
  :root { --stage-w: calc(100vw - 24px); }

  .pick-grid { gap: 8px; }
  .pick-card { border-radius: 18px; }
  .greeting-card__title { font-size: 26px; }
  .pile {
    width: min(100%, 300px);
    height: min(54vh, 350px);
  }
  .btn-cta {
    width: 100%;
    min-height: 50px;
  }
}

/* Comfortable phone sizes */
@media (max-width: 767px) {
  .stage__center {
    width: min(100% - 0px, var(--stage-w));
  }

  .greeting-card {
    padding: 18px 16px 20px;
  }

  .greeting-card__body {
    font-size: 15px;
    line-height: 1.65;
  }

  .greeting-card__subtitle {
    font-size: 24px;
  }

  .avatar {
    width: 64px;
    height: 64px;
  }

  .stage--greeting,
  .stage--song,
  .stage--photos,
  .stage--letter {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .stage--greeting .stage__center {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .letter-card__greeting {
    font-size: 34px;
  }

  .pick-card {
    min-height: 140px;
    aspect-ratio: 0.68;
  }

  .pick-card__message {
    font-size: 12px;
  }

  .btn-cta {
    width: min(100%, 320px);
    min-height: 52px;
    font-size: 13px;
  }

  .open-card {
    width: min(240px, 78vw);
  }
}

/* Short viewports (landscape phones / small height) */
@media (max-height: 720px) {
  .stage { padding-block: 16px; }

  .pile {
    height: min(48vh, 300px);
  }

  .greeting-card__body {
    font-size: 14px;
    margin-bottom: 12px;
  }

}

@media (min-width: 768px) {
  :root { --stage-w: 460px; }

  .greeting-card,
  .letter-card {
    padding-left: 26px;
    padding-right: 26px;
  }

  .pick-grid { gap: 14px; }

  .pile {
    width: 340px;
    height: 420px;
  }
}

@media (min-width: 1024px) {
  :root { --stage-w: 480px; }
  .stage { padding-block: 40px; }
}