:root{
  --bg:#08090b;
  --panel:#141519;
  --accent:#ffcc00;
  --muted:#9aa0a6;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
body{background:linear-gradient(180deg,#050608 0%, #0b0c0f 100%); color:#e6eef6; display:flex; flex-direction:column; min-height:100vh;}

header{padding:14px 18px; text-align:center;}
h1{margin:0;font-size:20px;color:var(--accent)}
.subtitle{margin:6px 0 0;color:var(--muted);font-size:13px}

main{flex:1;display:flex;gap:12px;padding:12px;align-items:stretch;}
#controls{width:340px;max-width:36%; background:var(--panel); padding:14px; border-radius:10px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); overflow:auto}
.control-block{margin-bottom:14px}
.control-block.small p{margin:0;font-size:13px;color:var(--muted)}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input[type="range"]{width:100%}
select{width:100%;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:#0f1113;color:#fff}
button{background:var(--accent);color:#111;border:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:600}
button:active{transform:translateY(1px)}

#mapWrap{flex:1; min-height:520px; position:relative; border-radius:10px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.6);}
#map{height:100%; width:100%}

/* Navbar */
.navbar {
  position: relative;
  top: 0.5rem;
  background: transparent;
  margin-top: 10px;
  padding: 20px 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
 height: 60px;
 width: 100vw;
}
.nav-links a {
  color: #f0f0f0;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.nav-links a:hover {
  color: #fff;
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.167), inset 0 2px 3px rgba(116, 106, 204, 0.753);
  transform: translateY(-3px);
}

/* Meteor animation */
.meteor {
  position:absolute;
  width:24px;
  height:24px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 20%, #ffd58a 21% 45%, #ff7b2f 46% 100%);
  box-shadow: 0 0 20px rgba(255,140,0,0.8), 0 0 6px rgba(255,255,255,0.6) inset;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  will-change: top, left, opacity, transform;
}

/* Explosion flash */
.explosion {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
}

/* Result panel */
#resultPanel h3{margin:0 0 8px;font-size:15px;color:var(--accent)}
#resultContent p{margin:0;color:var(--muted)}
.result-row{display:flex;justify-content:space-between;padding:6px 0;border-top:1px dashed rgba(255,255,255,0.03);font-size:13px}

/* MiniBlast */
#previewCanvas {width:100%; max-width:300px; height:300px; margin:10px auto; display:block; border:2px solid #444; border-radius:12px; background:#000;}

/* Responsive */
@media (max-width:900px){
  main{flex-direction:column}
  #controls{width:100%; max-width:none}
  #mapWrap{min-height:400px}
}

/* Starfield background */
#starfield-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: black;
}

/* navbar */
/* ========== Navbar ========== */
.navbar {
  position: relative;
  top: 0.5rem;
  background: transparent;
  margin-top: 10px;
  padding: 20px 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
 height: 60px;
 width: 100vw;
}

.nav-links a {
  color: #f0f0f0;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  padding: 8px 16px; /* so background is visible */
  border-radius: 20px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* Glassy + Glossy 3D Hover */
.nav-links a:hover {
  color: #fff;
  background: transparent; /* semi-transparent glass look */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
     0 2px 10px rgba(255, 255, 255, 0.167), /* soft shadow under */
    inset 0 2px 3px rgba(116, 106, 204, 0.753); /* inner glossy shine */
  transform: translateY(-3px); /* subtle 3D lift */
}