:root {
  --ship-y: 0px;
  --thrust: 0;
  --white: #f7fbff;
  --space: #02070b;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--space);
}

body {
  color: var(--white);
  font-family: "Courier New", ui-monospace, monospace;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.space {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 76%, rgba(0, 132, 255, .07), transparent 25%),
    radial-gradient(circle at 50% 50%, #06121a 0%, #02090e 48%, #010407 100%);
}

#starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nebula {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0 45%, rgba(0, 0, 0, .34) 100%);
}

h1 {
  position: absolute;
  z-index: 4;
  top: clamp(2.8rem, 10vh, 7rem);
  left: 50%;
  width: min(92vw, 1100px);
  margin: 0;
  transform: translateX(-50%);
  color: var(--white);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.6rem, 8vw, 7.6rem);
  font-weight: 900;
  line-height: .94;
  letter-spacing: .018em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    4px 0 0 rgba(5, 141, 255, .4),
    0 0 28px rgba(255, 255, 255, .11);
}

.ship-wrap {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(-1.5rem, 1vh, .6rem);
  width: clamp(210px, 31vw, 480px);
  aspect-ratio: 1284 / 1225;
  transform: translate3d(-50%, calc(-1 * var(--ship-y)), 0);
  transform-origin: 50% 80%;
  will-change: transform;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, .16))
    drop-shadow(0 0 calc(8px + 14px * var(--thrust)) rgba(0, 142, 255, calc(.16 + .3 * var(--thrust))));
}

.ship-wrap img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  animation: hover 2.6s ease-in-out infinite;
}

.ship-aura {
  position: absolute;
  z-index: 1;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 34%;
  opacity: calc(.12 + var(--thrust) * .48);
  background: radial-gradient(ellipse at center, rgba(0, 149, 255, .34), transparent 68%);
  filter: blur(13px);
  transform: scaleY(calc(.75 + var(--thrust) * .45));
}

.flying img { animation: thrust-jitter .16s steps(2, end) infinite alternate; }

@keyframes hover {
  50% { transform: translateY(-5px); }
}

@keyframes thrust-jitter {
  from { transform: translate3d(-1px, 0, 0); }
  to { transform: translate3d(1px, -3px, 0); }
}

@media (max-width: 640px) {
  h1 {
    top: max(3.4rem, env(safe-area-inset-top));
    font-size: clamp(2.35rem, 13vw, 4.4rem);
    line-height: .9;
  }

  .ship-wrap {
    bottom: max(-.5rem, env(safe-area-inset-bottom));
    width: clamp(230px, 78vw, 370px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ship-wrap img { animation: none; }
}