@font-face {
  font-family: 'Star Jedi';
  src: url('../fonts/StarJedi.ttf') format('truetype');
  font-display: swap;
}
html, body { margin: 0; font-family: 'Star Jedi', sans-serif; height: 100%; background: #000; overflow: hidden; }
#main { position: fixed; inset: 0; }
.player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; visibility: hidden; }
.player.active { visibility: visible; }
/* opening-crawl style starfield: tiled star layers at different scales/offsets on black */
#space {
  position: absolute; inset: 0; z-index: 1; background-color: #000;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90px 140px, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 160px 60px, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 230px 200px, #cfd8ff 60%, transparent 100%),
    radial-gradient(2px 2px at 310px 110px, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60px 250px, #ffe9c4 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 270px 280px, #fff 60%, transparent 100%);
  background-size: 340px 300px, 270px 230px, 410px 350px, 310px 260px, 520px 440px, 380px 330px, 450px 390px;
  background-position: 0 0, 40px 70px, 120px 20px, 200px 150px, 60px 300px, 310px 90px, 150px 220px;
  animation: drift 240s linear infinite;
}
#space.hidden { display: none; }
@keyframes drift { to { background-position: -340px 300px, -230px 300px, -290px 370px, -110px 410px, -460px 740px, -70px 420px, -300px 610px; } }
@media (prefers-reduced-motion: reduce) { #space { animation: none; } }
#start-button {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: inherit;
  padding: 1rem 2.5rem; font-size: 1.5rem; letter-spacing: .2em; text-transform: uppercase;
  color: #ffe81f; background: rgba(0, 0, 0, .6); border: 2px solid #ffe81f; cursor: pointer; z-index: 2;
  text-shadow: 0 0 12px rgba(255, 232, 31, .5);
}
#start-button:hover, #start-button:focus-visible { background: #ffe81f; color: #000; text-shadow: none; outline: none; }
#start-button.hidden { display: none; }