.boot-fade-screen {
  display: block;
  background: #000;
  opacity: 1;
  transition: opacity 1800ms ease-out;
}

.boot-fade-screen.is-complete {
  opacity: 0;
  pointer-events: none;
}

.game-start-screen {
  position: fixed;
  z-index: 11000;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(80, 67, 48, 0.18), transparent 42%),
    linear-gradient(180deg, #0b0c0a, #050605);
  color: #f0ece2;
  opacity: 1;
  transition: opacity 180ms linear;
}

.game-start-screen.is-complete {
  opacity: 0;
  pointer-events: none;
}

.game-start-panel {
  display: grid;
  justify-items: center;
  width: min(70vw, 620px);
}

.game-start-kicker {
  color: #918b80;
  font-family: var(--font-ui);
  font-size: clamp(0.68rem, 1.1vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#game-start-title {
  margin: 10px 0 16px;
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 8vw, 6rem);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 5px 6px 0 #000;
}

.game-start-chapter,
#game-start-status,
#game-start-percentage {
  font-family: var(--font-ui);
  font-size: clamp(0.78rem, 1.5vw, 1rem);
  font-weight: 600;
  text-transform: uppercase;
}

.game-start-chapter {
  margin: 0 0 34px;
  color: #d8d0bf;
  letter-spacing: 0.3em;
}

#game-start-status {
  margin: 0 0 10px;
  color: #bdb6a8;
  letter-spacing: 0.14em;
}

.game-start-progress {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 1px solid #59554d;
  background: #171816;
  box-shadow: inset 0 0 0 2px #090a09;
}

.game-start-progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: #8f3430;
  transition: width 80ms linear;
}

#game-start-percentage {
  margin-top: 9px;
  color: #e7e1d5;
  letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: reduce) {
  .boot-fade-screen {
    transition-duration: 250ms;
  }

  .game-start-screen {
    transition-duration: 120ms;
  }
}