/* Supplied artwork stays intact; extra screen space uses the dark backdrop. */
#ludi-intro {
  position: fixed; inset: 0; z-index: 2147483647;
  background: #020b07; color: #fff; overflow: hidden;
  opacity: 1; transition: opacity 180ms ease;
  touch-action: none; font: 15px system-ui, sans-serif;
}
#ludi-intro[hidden] { display: none; }
#ludi-intro .intro-screen { position: absolute; inset: 0; opacity: 0; }
#ludi-intro .intro-screen.active { opacity: 1; }
#ludi-intro picture, #ludi-intro img { display: block; width: 100%; height: 100%; }
#ludi-intro img { object-fit: contain; object-position: center; }
#ludi-intro .intro-status {
  position: absolute; left: 16px; right: 16px;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  text-align: center;
}
#ludi-intro .intro-status:empty { display: none; }
#ludi-intro .intro-status span, #ludi-intro button {
  display: inline-block; background: #020b07ed; border-radius: 10px; padding: 12px 18px;
}
#ludi-intro button { color: #fff; border: 1px solid #2cbd75; cursor: pointer; margin: 8px; }
#ludi-intro.leaving { opacity: 0; pointer-events: none; }
html.ludi-starting, html.ludi-starting body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { #ludi-intro { transition: none; } }