/* rocket-dots-css */

body {
  margin: 0;
  overflow: hidden;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}

canvas {
  background: #222;
  border: 2px solid #555;
  display: block;
}

#settingsPanel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  display: none;
  flex-direction: column;
  z-index: 10;
  border: 1px solid #555;
}

/* --- Settings Panel Sliders --- */
#settingsPanel label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0ff;
  font-family: 'IBM Plex Mono', monospace;
}

#settingsPanel input[type="range"] {
  width: 160px;
  accent-color: #33cccc; /* slider thumb/track color in modern browsers */
}
/* Align labels + sliders neatly */
#settingsPanel .slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

#settingsPanel .slider-row label {
  width: 60px;         /* fixed width so "Music" and "SFX" line up */
  text-align: right;   /* right-align text for clean columns */
}

#settingsPanel .slider-row input[type="range"] {
  flex: 1;             /* slider stretches to fill the row */
}

#restartButton {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 40px;
  font-size: 24px;
  display: none;
  z-index: 1001;
  cursor: pointer;
  background-color: #555;
  border: none;
  color: white;
  border-radius: 6px;
  user-select: none;
}

#restartButton:hover {
  background-color: #777;
}

/* Neon Glow Level-Up Menu Styles */
/* Softer Neon Glow Level-Up Menu Styles */
/* structure inside the button */
.upgrade-button .upg-head{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  margin-bottom:6px;
}
.upgrade-button .upg-name{
  font-weight:700;
  letter-spacing:0.5px;
}
.upgrade-button .upg-badge{
  font-size:11px; 
  padding:3px 6px; 
  border-radius:999px; 
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
}

/* color accents (border + text + subtle glow) */
.accent-neutral { border-color:#3aa; color:#3aa; box-shadow:0 0 3px #3aa inset, 0 0 3px #3aa; }
.accent-amber   { border-color:#d6b300; color:#d6b300; box-shadow:0 0 3px #d6b300 inset, 0 0 3px #d6b300; }
.accent-red     { border-color:#e25; color:#e25; box-shadow:0 0 3px #e25 inset, 0 0 3px #e25; }
.accent-cyan    { border-color:#19d3ff; color:#19d3ff; box-shadow:0 0 3px #19d3ff inset, 0 0 3px #19d3ff; }
.accent-purple  { border-color:#9b59ff; color:#9b59ff; box-shadow:0 0 3px #9b59ff inset, 0 0 3px #9b59ff; }
.accent-lime    { border-color:#8bdc3b; color:#8bdc3b; box-shadow:0 0 3px #8bdc3b inset, 0 0 3px #8bdc3b; }
.accent-blue    { border-color:#4aa3ff; color:#4aa3ff; box-shadow:0 0 3px #4aa3ff inset, 0 0 3px #4aa3ff; }
.accent-teal    { border-color:#20c997; color:#20c997; box-shadow:0 0 3px #20c997 inset, 0 0 3px #20c997; }
.accent-orange  { border-color:#ff914d; color:#ff914d; box-shadow:0 0 3px #ff914d inset, 0 0 3px #ff914d; }
.accent-pink    { border-color:#ff6fb0; color:#ff6fb0; box-shadow:0 0 3px #ff6fb0 inset, 0 0 3px #ff6fb0; }
.accent-gold    { border-color:#f1c40f; color:#f1c40f; box-shadow:0 0 3px #f1c40f inset, 0 0 3px #f1c40f; }

/* hover state follows the same accent color, just a touch brighter */
.upgrade-button.accent-amber:hover  { border-color:#ffd400; color:#ffd400; }
.upgrade-button.accent-red:hover    { border-color:#ff4976; color:#ff4976; }
.upgrade-button.accent-cyan:hover   { border-color:#54dcff; color:#54dcff; }
.upgrade-button.accent-purple:hover { border-color:#b47cff; color:#b47cff; }
.upgrade-button.accent-lime:hover   { border-color:#a6ef5e; color:#a6ef5e; }
.upgrade-button.accent-blue:hover   { border-color:#75bbff; color:#75bbff; }
.upgrade-button.accent-teal:hover   { border-color:#3be0b0; color:#3be0b0; }
.upgrade-button.accent-orange:hover { border-color:#ffaf7b; color:#ffaf7b; }
.upgrade-button.accent-pink:hover   { border-color:#ff8fc4; color:#ff8fc4; }
.upgrade-button.accent-gold:hover   { border-color:#ffdf59; color:#ffdf59; }

#levelup-menu {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 10px;
  font-family: 'Press Start 2P', monospace;
  text-align: center;
}

#levelup-menu h2 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #0cc; /* darker cyan */
  text-shadow: 0 0 3px #0cc, 0 0 5px #088; /* tighter, softer */
}

.levelup-options {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.upgrade-button {
  background: linear-gradient(145deg, #111, #1a1a1a);
  border: 1px solid #0cc;
  color: #0cc;
  padding: 15px;
  font-size: 14px;
  width: 180px;
  border-radius: 8px;
  cursor: pointer;
  text-shadow: 0 0 3px #0cc;
  box-shadow: 0 0 4px #0cc inset, 0 0 4px #0cc; /* subtle inner + outer glow */
  transition: all 0.2s ease;
}

.upgrade-button:hover {
  background: linear-gradient(145deg, #222, #333);
  border-color: #ff0;
  color: #ff0;
  text-shadow: 0 0 2px #ff0; /* smaller blur radius */
  box-shadow: 
    0 0 4px #ff0 inset,  /* smaller inset glow */
    0 0 6px #ff0;        /* smaller outer glow */
  transform: scale(1.05);
}

/* Accent for Speed/Damage trade upgrades */
.accent-trade {
  border-color: #ff9933; /* orange-ish to stand out but not rainbow */
  color: #ff9933;
  box-shadow: 0 0 3px #ff9933 inset, 0 0 3px #ff9933;
}

.upgrade-button.accent-trade:hover {
  border-color: #ffb366;
  color: #ffb366;
}