/* Round LG (10-30): the Space Invaders start page, now the login page itself (login.php).
   Came from Hostinger's /landing-page/invaders.html; the login box (login.php's own styles)
   appears in the 3D logo's spot when the ship blows up. */
html:has(body.space) { background: #000; overflow: hidden; }
body.space {
  background: #000; overflow: hidden; cursor: none;
  display: block; padding: 0;
}
body.space.crashed { cursor: default; }

/* Starfield */
.stars { position: fixed; inset: 0; z-index: 0; image-rendering: pixelated; pointer-events: none; }
#starsBack { z-index: 0; } #starsFront { z-index: 1; }

/* The logo's stage; the login box takes its place */
.stage-wrap {
  position: relative; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh;
}
#logoStage {
  position: relative;
  width: min(78vw, 1100px);
  aspect-ratio: 2.6 / 1;
  pointer-events: none;
  display: grid; place-items: center;
}
#logoStage canvas { position: absolute; inset: 0; max-width: 100%; max-height: 100%; display: block; }
body.space .dialog { position: relative; z-index: 1; pointer-events: auto; width: min(450px, calc(100vw - 32px)); }

/* The alien (the pointer) and the ship */
#cursor {
  position: fixed; left: 50%; top: 50%; width: 32px; height: 32px;
  background: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\'%3E%3Crect width=\'32\' height=\'32\' fill=\'none\'/%3E%3Cpath d=\'M2 10h4v4H2zM26 10h4v4h-4zM8 6h16v4H8zM8 10h16v4H8zM6 14h4v4H6zM22 14h4v4h-4zM4 18h4v4H4zM24 18h4v4h-4zM10 14h12v8H10zM8 22h16v4H8z\' fill=\'%237a00ff\'/%3E%3Crect x=\'11\' y=\'16\' width=\'3\' height=\'3\' fill=\'%23fff\'/%3E%3Crect x=\'18\' y=\'16\' width=\'3\' height=\'3\' fill=\'%23fff\'/%3E%3C/svg%3E') center/contain no-repeat;
  pointer-events: none; transform: translate(-50%, -50%); transition: transform .15s; z-index: 1000; mix-blend-mode: difference;
}
#cursor.click { transform: translate(-50%, -50%) scale(1.5) rotate(15deg); }
#cursor.hit { background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\'%3E%3Crect width=\'32\' height=\'32\' fill=\'none\'/%3E%3Cpath d=\'M2 10h4v4H2zM26 10h4v4h-4zM8 6h16v4H8zM8 10h16v4H8zM6 14h4v4H6zM22 14h4v4h-4zM4 18h4v4H4zM24 18h4v4h-4zM10 14h12v8H10zM8 22h16v4H8z\' fill=\'%23ff0000\'/%3E%3Crect x=\'11\' y=\'16\' width=\'3\' height=\'3\' fill=\'%23fff\'/%3E%3Crect x=\'18\' y=\'16\' width=\'3\' height=\'3\' fill=\'%23fff\'/%3E%3C/svg%3E'); }
#ship {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 96px; height: 96px;
  background: url('ship.png') center/contain no-repeat; image-rendering: pixelated;
  pointer-events: none; z-index: 500;
}
.laser { position: fixed; width: 4px; height: 20px; background: #ff2b2b; transform: translateX(-50%); z-index: 400; }
.explosion {
  position: fixed; width: 200px; height: 200px; border-radius: 50%; z-index: 600;
  background: radial-gradient(circle, #ff2b2b 0%, #ff8800 40%, transparent 70%);
  pointer-events: none; transform: translate(-50%, -50%) scale(0); animation: boom 1s forwards;
}
@keyframes boom { to { transform: translate(-50%, -50%) scale(3); opacity: 0; } }

@media (max-width: 768px) {
  #logoStage { width: 100vw; height: 46vh; aspect-ratio: auto; }
  .stage-wrap { justify-content: flex-start; padding-top: 18vh; }
  #ship { width: 64px; height: 64px; }
}