.first-flight { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(360px, 100%); min-height: 260px; margin: 24px auto; padding: 24px; border: 3px solid #fff; border-radius: 24px; background: #d7f2fa; color: #203450; font: inherit; cursor: pointer; box-shadow: 0 8px 24px #12183740; }
.first-flight img { object-fit: contain; }
.first-flight span { font-size: 30px; font-weight: 900; }
.first-flight small { font-size: 18px; }
.first-flight:active { transform: scale(.98); }
.flight-options { width: min(560px, 100%); margin: 0 auto 32px; }
.flight-options summary { min-height: 56px; padding: 16px; font-size: 18px; color: #fff; text-align: center; cursor: pointer; }
.first-flight:focus-visible, .flight-options summary:focus-visible { outline: 4px solid #fff; outline-offset: 5px; }
.flight-options[open] summary { margin-bottom: 24px; }
.flappy-page .select-head { margin-top: 64px; }
@media (prefers-reduced-motion: reduce) { .first-flight:active { transform: none; } }
.ready-hint { color: #182944; text-shadow: none; }
.ready-hint .ready-sub { color: #233651; }
.ready-hint .ready-title { text-shadow: none; }
/* Landscape phones (2026-09-27): the 64px head margin, the 58px menu padding and the tall card put "Let's fly!" half under the floor band and its caption out of sight. Short screens get a tighter head and the card laid out sideways, bell left and words right, so card, caption and the "Choose a bell" row all fit. The corner pills sit beside the centred title, not over it. */
@media (max-height: 500px) and (orientation: landscape) {
  .flappy-page .select-screen { padding-top: calc(20px + env(safe-area-inset-top)); }
  .flappy-page .select-head { margin-top: 0; }
  .flappy-page .app-title { font-size: 30px; }
  .flappy-page .select-sub { font-size: 17px; }
  .first-flight { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 20px; row-gap: 2px; align-items: center; justify-content: center; width: min(420px, 100%); min-height: 0; margin: 4px auto; padding: 16px 24px; text-align: left; }
  .first-flight img { grid-row: 1 / span 2; width: 110px; height: 110px; }
  .first-flight span { align-self: end; }
  .first-flight small { align-self: start; }
}