/* Static markup paints before the engine starts downloading. */
body.intro-active > :not(#game-intro):not(script):not(noscript) { visibility: hidden !important; }
#game-intro {
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow: auto;
  isolation: isolate;
  background: #080b10;
  color: #f8f4eb;
  font-family: system-ui, sans-serif;
  opacity: 1;
  transition: opacity 400ms ease;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100dvh;
}
#game-intro.is-leaving { opacity: 0; }
#game-intro [hidden] { display: none !important; }
.intro-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#intro-artwork {
  width: 97%;
  height: 97%;
  object-fit: contain;
  display: block;
  transform: scale(1);
}
#intro-artwork.is-zooming { animation: intro-zoom var(--voice-duration, 11.9815s) linear forwards; }
@keyframes intro-zoom { to { transform: scale(1.03); } }
#game-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,7,11,.5), transparent 30%, transparent 60%, rgba(4,7,11,.94));
}
.intro-heading {
  justify-self: end;
  text-align: right;
  padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right));
  text-shadow: 0 2px 12px #080b10;
}
.intro-heading p { margin: 0 0 5px; color: #ffd392; letter-spacing: .24em; font-size: 11px; font-weight: 700; }
.intro-heading h1 { margin: 0; font-size: clamp(24px, 4.6vw, 54px); font-weight: 850; letter-spacing: -.04em; line-height: 1; }
.intro-heading h1 span { display: block; font-size: .44em; letter-spacing: .17em; margin-top: 8px; text-transform: uppercase; }
.intro-footer {
  grid-row: 3;
  padding: 14px max(24px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  display: grid;
  gap: 10px;
}
#intro-status { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 650; }
#intro-notice { margin: 0; color: #d2cbc0; font-size: 12px; }
#intro-notice:empty { display: none; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.intro-actions button {
  min-height: 44px;
  border: 1px solid #89714e;
  border-radius: 7px;
  padding: 10px 18px;
  color: #f8f4eb;
  background: #10151de8;
  font: 650 14px/1.2 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.intro-actions #intro-begin, .intro-actions #intro-retry { background: #efb557; border-color: #efb557; color: #15100a; }
.intro-actions button:disabled { opacity: .55; cursor: default; }
.intro-actions button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#intro-progress { height: 3px; border-radius: 3px; background: #ffffff24; overflow: hidden; }
#intro-progress::after { content: ''; display: block; width: 100%; height: 100%; background: #efb557; opacity: .35; }
#intro-progress.is-ready::after { width: 100%; opacity: 1; }
#intro-progress.is-error::after { width: 100%; background: #f2a58a; }
/* No invented percentage or continuously animating loading shimmer. */
@media (orientation: portrait) {
  #game-intro { grid-template-rows: auto minmax(0, 1fr) auto; }
  .intro-heading { justify-self: center; text-align: center; padding-top: max(32px, env(safe-area-inset-top)); }
  .intro-heading h1 { font-size: clamp(30px, 10vw, 52px); }
  .intro-art { position: relative; grid-row: 2; min-height: 0; z-index: 0; }
  #intro-artwork { max-height: 100%; }
  #game-intro::before { background: linear-gradient(180deg, #080b1055, transparent 45%, #080b1099); }
  .intro-footer { padding-inline: max(18px, env(safe-area-inset-left)); }
  .intro-actions #intro-begin, .intro-actions #intro-retry { flex-basis: 100%; }
  .intro-actions #intro-skip, .intro-actions #intro-mute { flex: 1; }
}
@media (orientation: landscape) and (max-height: 420px) {
  .intro-heading { padding-top: max(12px, env(safe-area-inset-top)); }
  .intro-heading h1 { font-size: 28px; }
  .intro-footer { gap: 6px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  #game-intro { transition: none; }
  #intro-artwork { animation: none !important; transform: none !important; }
}