/* ---------------- Base Reset ---------------- */
* { margin:0; padding:0; box-sizing:border-box; }
body, html { 
  width:100%; 
  font-family: Arial, sans-serif; 
  overflow-x: hidden; 
  overflow-y: auto; /* enable vertical scroll */
  touch-action: auto; /* allow touch scrolling */
  overscroll-behavior: none; 
}

/* ---------------- Background Container ---------------- */
.bg-container {
  position: absolute; /* absolute allows page to scroll */
  top:0; left:0;
  width: 100%;
  min-height: 100vh;
  background: url('quickstrike.jpg') no-repeat center center/cover;
  overflow: hidden;
  z-index: -1; /* behind all content */
}

.bg-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

/* ---------------- Stars Canvas ---------------- */
#starsCanvas {
  position: absolute; /* absolute to allow scroll */
  top:0; left:0;
  width:100%; height:100%;
  z-index: -2; /* behind background */
}

/* ---------------- Content ---------------- */
.content {
  position: relative;
  z-index: 2;
  text-align:center;
  color:white;
  padding: 80px 20px 20px 20px; /* top padding for navbar */
  height: 90vh;
}

/* ---------------- Headings ---------------- */
h1 {
  font-size:2rem;
  margin-bottom:10px;
  text-shadow:0 0 10px #fff;
}

/* ---------------- Earth ---------------- */
#earth-container {
  position: relative;
  display: inline-block;
  width:25vw; max-width:250px; min-width:120px;
  aspect-ratio:1/1;
  margin: 20px auto;
  cursor:pointer;
}

#earth {
  width: 100%;
  height: 100%;
  border-radius:50%;
}

.earth-halo {
  position:absolute; inset:0;
  border-radius:50%;
  box-shadow:0 0 50px rgba(0,200,255,0.3),0 0 100px rgba(0,150,255,0.2);
  pointer-events:none;
  z-index:1;
}

/* ---------------- Asteroids & Trails ---------------- */
.asteroid {
  position: absolute;
  width:3vw; max-width:30px; min-width:12px;
  aspect-ratio:1/1;
  background: radial-gradient(circle, #ffcc00 0%, #ff9900 80%);
  border-radius:50%;
  z-index:5;
  box-shadow: 0 0 0.5vw #ffcc00, 0 0 1vw rgba(255,153,0,0.5);
}

.asteroid-trail {
  position: absolute;
  width:1vw; max-width:8px; min-width:3px;
  aspect-ratio:1/1;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,204,0,0.8) 0%, rgba(255,153,0,0) 80%);
  pointer-events:none;
  z-index:998;
  animation: trailFade 0.3s forwards;
}

@keyframes trailFade {
  from { opacity:1; transform:scale(1); }
  to { opacity:0; transform:scale(1.5); }
}

/* ---------------- Mini Explosion ---------------- */
.mini-explosion {
  position: absolute;
  width:5vw; max-width:40px; min-width:15px;
  aspect-ratio:1/1;
  background: radial-gradient(circle, #ffcc00 0%, #ff3300 70%, transparent 80%);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  animation: explodeAnim 0.6s ease-out forwards;
}

@keyframes explodeAnim {
  0% { transform: scale(0.5); opacity:1; }
  50% { transform: scale(1.5); opacity:0.7; }
  100% { transform: scale(2.5); opacity:0; }
}

/* ---------------- Target Dot ---------------- */
#targetDot {
  width:2vw; max-width:20px; min-width:10px;
  aspect-ratio:1/1;
  border:2px solid cyan;
  border-radius:50%;
  transform: translate(-50%, -50%);
  pointer-events:none;
  z-index:9999;
  box-shadow:0 0 0.75vw cyan,0 0 1.5vw rgba(0,255,255,0.5),0 0 2vw rgba(0,255,255,0.2);
  animation: pulseDot 1s ease-in-out infinite alternate;
}

@keyframes pulseDot {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity:0.8; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity:1; }
}

/* ---------------- Buttons ---------------- */
.buttons { display:flex; justify-content:center; gap:15px; flex-wrap:wrap; margin-top:5px; }
button {
  padding:12px 25px; font-size:1rem;
  border:none; border-radius:8px;
  cursor:pointer; background:rgba(255,255,255,0.2);
  color:white; backdrop-filter:blur(5px); transition:all 0.3s ease;
}
button:hover { background:rgba(255,255,255,0.4); }

/* ---------------- Blast Report ---------------- */
#blastReport {
  position: relative;
  bottom:150px; left:20px;
  width:250px; padding:20px;
  border-radius:25px;
  background: rgba(35,23,42,0.85);
  backdrop-filter: blur(12px);
  color:#d9d6da;
  border:1px solid rgba(100,92,105,0.5);
  box-shadow:0 0 25px rgba(100,92,105,0.5);
  font-family:'Orbitron', sans-serif;
  z-index:10;
  transition: all 0.3s ease;
}

#blastReport h2 { color:#fefefe; text-shadow:0 0 6px #fefefe,0 0 12px #d9d6da; margin-bottom:12px; font-size:1.2rem; }
#blastReport p { color:#d9d6da; text-shadow:0 0 4px #d9d6da; margin:6px 0; font-size:1rem; }

#blastReport.update-glow {
  animation: neonPulse 0.6s ease-in-out 1;
}

@keyframes neonPulse {
  0% { box-shadow:0 0 15px rgba(100,92,105,0.5),0 0 25px rgba(35,23,42,0.7); }
  50% { box-shadow:0 0 35px #d9d6da,0 0 50px #fefefe; }
  100% { box-shadow:0 0 15px rgba(100,92,105,0.5),0 0 25px rgba(35,23,42,0.7); }
}

/* ---------------- Report Panel ---------------- */
.report { 
  max-width:500px;
  margin:20px auto 0 auto;
  padding:15px;
  background:rgba(0,0,0,0.5);
  border-radius:10px;
  text-align:left;
  height:100px; 
  overflow-y:auto; }

/* ---------------- Navbar ---------------- */
.navbar {
  background: transparent;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
  padding: 0 10px;
  z-index: 10;
}

.nav-links a {
  color: #d9d6da;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.nav-links a:hover {
  color: #fefefe;
  background: rgba(100,92,105,0.2);
  backdrop-filter: blur(5px);
  transform: translateY(-2px);
}

:root {
  --navbar-height: 60px;
}

.content {
  padding-top: calc(var(--navbar-height) + 20px);
}

/* ---------------- Media Queries ---------------- */
@media(max-width:600px){
  h1 { font-size:1.5rem; }
  button { font-size:0.9rem; padding:10px 18px; }
  #earth-container { width:40vw; max-width:180px; min-width:120px; }
  .asteroid { width:5vw; max-width:25px; min-width:12px; }
  .mini-explosion { width:8vw; max-width:35px; min-width:15px; }
  #targetDot { width:5vw; max-width:20px; min-width:10px; }
}