html, body { margin: 0; background: #102a43; }
#app-splash {
  position: fixed; inset: 0; z-index: 10000; overflow: auto;
  display: grid; place-items: center; background: #102a43;
  color: #fff; font-family: Arial, sans-serif; text-align: center;
}
.splash-content { padding: 32px 24px; }
.splash-logo { display: block; width: 224px; height: 224px; margin: 0 auto 20px; overflow: visible; }
.splash-aircraft { transform-origin: center; animation: aircraft-arrive 850ms cubic-bezier(.22, 1, .36, 1) both; }
.splash-slot { transform-box: fill-box; transform-origin: left center; animation: slot-reveal 280ms ease-out both; }
.splash-slot-first { animation-delay: 850ms; }
.splash-slot-second { animation-delay: 1030ms; }
#app-splash h1 { margin: 0; font-size: 32px; letter-spacing: 6px; font-weight: 600; }
.splash-subtitle { margin: 8px 0 32px; color: #cedbe6; font-size: 16px; }
.splash-track { width: 96px; height: 3px; margin: auto; overflow: hidden; background: #28465f; border-radius: 3px; }
.splash-track span { display: block; width: 40%; height: 100%; background: #38c6b0; animation: slot-sweep 1400ms ease-in-out infinite; }
#splash-status { margin: 20px 0 0; font-size: 13px; color: #b7cadb; }
#splash-retry { margin: 20px auto 0; padding: 10px 20px; border: 0; border-radius: 8px; background: #38c6b0; color: #102a43; cursor: pointer; font: inherit; }
@keyframes aircraft-arrive { from { opacity: 0; transform: translateY(320px) rotate(-8deg) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes slot-reveal { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes slot-sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .splash-aircraft, .splash-slot, .splash-track span { animation: none; } .splash-track span { width: 100%; } }