/* The shell paints before game data or sprites are available. */
.startup-scene.startup-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  box-sizing: border-box;
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 48px 24px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: radial-gradient(
    ellipse at 50% 46%,
    #233752 0,
    #111c30 38%,
    #090e1c 76%
  );
  font-family: var(--font-ui, monospace);
  color: #e8edfa;
}
.startup-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0002 0 1px, transparent 1px 4px);
}
.startup-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, 540px);
  height: min(80vw, 540px);
  border: 1px solid #6383b220;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: -1;
  box-shadow:
    0 0 0 40px #6383b207,
    0 0 0 80px #6383b205;
}
.startup-scene #startup-title {
  margin: 0;
  font: inherit;
  font-size: clamp(18px, 3.5vw, 26px);
  letter-spacing: 2px;
  text-shadow: 3px 3px #030818;
}
.startup-scene #startup-title span {
  color: #ffd65d;
}
.startup-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 240px;
  height: 240px;
}
.startup-orbit {
  position: absolute;
  inset: 10px;
  border: 2px dashed #8db1e345;
  border-radius: 50%;
  animation: startup-orbit 36s linear infinite;
}
.startup-orbit::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 27px;
  width: 8px;
  height: 8px;
  background: #ffdc79;
  box-shadow: 0 0 16px #ffdc7980;
}
.startup-ball {
  position: relative;
  width: 112px;
  height: 112px;
  background: linear-gradient(
    #ff8985 0 10%,
    #ef4c57 10% 41%,
    #a82e48 41% 46%,
    #101827 46% 55%,
    #f4f4e9 55% 79%,
    #bdcede 79%
  );
  clip-path: polygon(
    31% 0,
    69% 0,
    69% 5%,
    81% 5%,
    81% 12%,
    89% 12%,
    89% 20%,
    95% 20%,
    95% 32%,
    100% 32%,
    100% 68%,
    95% 68%,
    95% 80%,
    89% 80%,
    89% 88%,
    81% 88%,
    81% 95%,
    69% 95%,
    69% 100%,
    31% 100%,
    31% 95%,
    19% 95%,
    19% 88%,
    11% 88%,
    11% 80%,
    5% 80%,
    5% 68%,
    0 68%,
    0 32%,
    5% 32%,
    5% 20%,
    11% 20%,
    11% 12%,
    19% 12%,
    19% 5%,
    31% 5%
  );
  animation: startup-bob 2.4s steps(12, end) infinite;
  z-index: 1;
}
.startup-ball::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 24px;
  width: 24px;
  height: 8px;
  background: #ffc1b0;
  box-shadow: -8px 8px #ffc1b0;
}
.startup-ball span {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 7px solid #101827;
  background: #f4f4e9;
  box-shadow: 0 0 0 3px #f4f4e9;
  animation: startup-button 2.4s steps(2, end) infinite;
}
.startup-shadow {
  position: absolute;
  bottom: 39px;
  width: 88px;
  height: 8px;
  background: #030a18;
  box-shadow:
    8px 0 #030a18,
    -8px 0 #030a18;
  animation: startup-shadow 2.4s steps(12, end) infinite;
}
.startup-spark {
  position: absolute;
  width: 4px;
  height: 20px;
  background: #ffdb7c;
  box-shadow: 0 0 14px #ffdb7c55;
  animation: startup-twinkle 2.4s steps(2, end) infinite;
}
.startup-spark::after {
  content: "";
  position: absolute;
  top: 8px;
  left: -8px;
  width: 20px;
  height: 4px;
  background: inherit;
}
.startup-spark-a {
  left: 25px;
  top: 64px;
}
.startup-spark-b {
  right: 30px;
  bottom: 62px;
  transform: scale(0.65);
  animation-delay: 1.2s;
}
.startup-trail {
  display: flex;
  gap: 5px;
}
.startup-trail i {
  width: 10px;
  height: 7px;
  background: #33415b;
  animation: startup-tile 1.8s steps(1, end) infinite;
}
.startup-trail i:nth-child(3n + 2) {
  animation-delay: 0.15s;
}
.startup-trail i:nth-child(3n) {
  animation-delay: 0.3s;
}
.startup-trail i:nth-child(n + 4) {
  animation-delay: 0.45s;
}
.startup-trail i:nth-child(n + 7) {
  animation-delay: 0.9s;
}
.startup-trail i:nth-child(n + 10) {
  animation-delay: 1.35s;
}
.startup-scene #startup-status {
  margin: 0;
  min-height: 24px;
  font-size: 13px;
  letter-spacing: 2px;
  color: #a7b9d3;
  max-width: 32rem;
  overflow-wrap: anywhere;
}
.startup-dots {
  animation: startup-twinkle 1.2s steps(2, end) infinite;
}
.startup-sr-only {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.startup-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.startup-stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #849bc0;
  box-shadow:
    90px 70px #849bc055,
    -70px 140px #849bc033;
}
.startup-stars i:nth-child(1) {
  left: 17%;
  top: 20%;
}
.startup-stars i:nth-child(2) {
  left: 76%;
  top: 18%;
}
.startup-stars i:nth-child(3) {
  left: 29%;
  top: 74%;
}
.startup-stars i:nth-child(4) {
  left: 81%;
  top: 68%;
}
.startup-stars i:nth-child(5) {
  left: 9%;
  top: 57%;
}
.startup-stars i:nth-child(6) {
  left: 56%;
  top: 10%;
}
body[data-screen="error"]
  .startup-scene
  :is(.startup-emblem, .startup-trail, .startup-dots) {
  display: none;
}
body[data-screen="error"] .startup-scene #startup-status {
  color: #ffb9b1;
}
@keyframes startup-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-14px) rotate(8deg);
  }
}
@keyframes startup-shadow {
  50% {
    transform: scaleX(0.7);
    opacity: 0.5;
  }
}
@keyframes startup-button {
  50% {
    background: #ffdc79;
    box-shadow: 0 0 0 3px #fff2ab;
  }
}
@keyframes startup-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes startup-twinkle {
  50% {
    opacity: 0.2;
  }
}
@keyframes startup-tile {
  0%,
  25% {
    background: #ffda75;
    box-shadow: 0 0 8px #ffda7533;
  }
  26%,
  100% {
    background: #33415b;
    box-shadow: none;
  }
}
@media (max-height: 550px) {
  .startup-scene.startup-card {
    gap: 16px;
    padding: 24px;
  }
  .startup-emblem {
    width: 190px;
    height: 190px;
  }
  .startup-shadow {
    bottom: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .startup-scene *,
  .startup-scene *::after {
    animation: none !important;
  }
  .startup-trail i:nth-child(-n + 6) {
    background: #ffda75;
  }
}