/* The phone is a frame for the original game capture, in the site's own palette. */
.flight-showcase { display: grid; gap: 32px; overflow: hidden; }
.flight-copy h2 { max-width: 19ch; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.15; }
.flight-film { width: 100%; max-width: 410px; margin: auto; perspective: 1400px; }
.flight-device { position: relative; width: min(100% - 20px, 318px); margin: 0 auto 12px; padding: 16px 7px 18px; border: 1px solid #9ba8b1; border-radius: 39px; background: linear-gradient(125deg, #54616b, #10161e 30%, #26313b 72%, #788692); box-shadow: 3px 2px 0 #25313c, 5px 3px 0 #76838c, 7px 5px 0 #111c26, 14px 26px 45px -18px #0009, inset 0 0 0 2px #050a11; transform: rotateY(-7deg) rotateZ(2deg); }
.flight-device::before { content: ''; position: absolute; top: 5px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #081623; box-shadow: inset 0 0 0 1px #526270, 0 0 0 2px #080e16; }
.flight-device::after { content: ''; position: absolute; bottom: 7px; left: 38%; width: 24%; height: 3px; border-radius: 3px; background: #8c9ca9; }
.flight-screen { overflow: hidden; padding-block: 8px; border: 2px solid #02060b; border-radius: 28px; background: #02060b; }
.flight-screen video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: contain; }
.flight-film figcaption { position: relative; font-size: 13px; text-align: center; color: var(--muted); }
.flight-playback { display: flex; justify-content: center; }
.flight-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 100px; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.flight-toggle [data-flight-icon] { width: 12px; text-align: center; }
.flight-toggle:hover { color: var(--ink); }
.flight-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.flight-error { display: block; margin-top: 8px; }
.flight-download { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--accent); }
.flight-film [hidden] { display: none; }
@media (prefers-color-scheme: light) {
  .flight-device { box-shadow: 3px 2px 0 #25313c, 5px 3px 0 #76838c, 7px 5px 0 #111c26, 14px 28px 45px -18px #29475880, inset 0 0 0 2px #050a11; }
}
@media (min-width: 760px) {
  .flight-showcase { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(50px, 8vw, 120px); padding-block: 100px; }
  .flight-device { width: min(100% - 24px, 344px); transform: rotateY(-12deg) rotateZ(4deg); }
}
@media (prefers-reduced-motion: reduce) { .flight-device { transform: none; } }
