/* A self-contained first frame; the unfinished application stays out of view. */
body[data-player-state]:not([data-player-state="ready"]) { overflow:hidden; }
body[data-player-state]:not([data-player-state="ready"]) > :is(.shell,.preview-banner,.skip,#connection-status,#mobile-navigation) { visibility:hidden; }
.player-startup {
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  width:100%; min-height:100vh; min-height:100dvh;
  padding:32px 24px; overflow:auto; color:#f2f6fc; text-align:center;
  font-family:"Segoe UI",Arial,sans-serif;
  background:radial-gradient(ellipse at 50% 42%,#06314a 0%,#041b2c 30%,#030f1c 65%);
}
.startup-content { width:min(440px,100%); }
.startup-mark { position:relative; display:grid; place-items:center; width:240px; height:240px; margin:0 auto 24px; }
.startup-logo {
  position:relative; z-index:1; width:160px; height:160px; object-fit:contain;
  filter:drop-shadow(0 0 22px #008bff33);
  animation:startup-arrive 900ms cubic-bezier(.2,.75,.25,1) both;
}
.startup-wave {
  position:absolute; inset:28px; border:1px solid #39cafa;
  border-radius:50%; opacity:0; pointer-events:none;
  box-shadow:0 0 24px #038af514,inset 0 0 20px #038af50c;
  animation:startup-wave 4200ms ease-out 800ms infinite;
}
.startup-wave:nth-child(2) { border-color:#168cff; animation-delay:2200ms; }
.startup-wave:nth-child(3) { border-color:#70dcff; animation-delay:3600ms; }
.startup-wordmark { font-size:clamp(30px,6vw,36px); line-height:1.2; letter-spacing:-1px; font-weight:400; margin:0; }
.startup-wordmark b { font-weight:700; }
.startup-tagline { font-size:14px; line-height:1.5; color:#a9c8df; margin:12px 0 36px; }
#player-startup-message { font-size:15px; line-height:1.6; margin:0; color:#bed7e8; min-height:48px; }
.startup-recovery { visibility:hidden; margin-top:24px; animation:startup-help 0s 12s forwards; }
.startup-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.player-startup .startup-actions a {
  display:inline-flex; align-items:center; justify-content:center; padding:12px 18px;
  min-height:48px; border:1px solid #24536f; border-radius:10px;
  font-size:14px; color:#e0f2ff; text-decoration:none; background:#082033;
}
.player-startup .startup-actions .primary { background:#008ef5; border-color:#26b9ff; color:white; font-weight:600; }
.startup-actions a:focus-visible { outline:3px solid #c3ebff; outline-offset:4px; }
.startup-recovery small { display:block; margin-top:16px; color:#a9c8df; line-height:1.6; font-size:12px; }
.player-startup[data-state="slow"] .startup-recovery,
.player-startup[data-state="failed"] .startup-recovery { visibility:visible; animation:none; }
.player-startup[data-state="failed"] .startup-wave { animation:none; opacity:.14; transform:scale(1.12); }
.startup-noscript { position:relative; display:block; margin-top:16px; padding:16px; color:#e0f2ff; line-height:1.6; }
@keyframes startup-arrive { from { opacity:0; transform:scale(.55); } 75% { opacity:1; transform:scale(1.035); } to { opacity:1; transform:scale(1); } }
@keyframes startup-wave { from { opacity:0; transform:scale(.8); } 20% { opacity:.34; } to { opacity:0; transform:scale(1.42); } }
@keyframes startup-help { to { visibility:visible; } }
@media (max-height:540px) { .startup-mark { width:168px; height:168px; margin-bottom:12px; } .startup-logo { width:80px; height:92px; } .startup-tagline { margin-bottom:20px; } .player-startup { padding:20px; } }
@media (max-height:540px) and (min-width:600px) {
  .startup-content { width:min(660px,100%); display:grid; grid-template-columns:180px minmax(0,1fr); column-gap:24px; }
  .startup-mark { grid-column:1; grid-row:1 / span 4; align-self:center; margin:0; }
  .startup-content > :not(.startup-mark) { grid-column:2; }
  .startup-tagline { margin:10px 0 18px; }
  .startup-recovery { margin-top:16px; }
  .startup-recovery small { margin-top:12px; }
}
@media (prefers-reduced-motion:reduce) { .startup-logo { animation:none; } .startup-wave { animation:none; opacity:.12; } .startup-wave:nth-child(2) { transform:scale(1.16); } .startup-wave:nth-child(3) { transform:scale(1.32); } }
