body {
  margin: 0;
  background: #000;
  overflow: hidden;
  color: #3f3;
  font-family: monospace;
}

canvas {
  display: block;
  filter: drop-shadow(0 0 5px #3f3);
}

#ui {
  position: absolute;
  top: 10px;
  left: 10px;
  pointer-events: none;
  z-index: 10;
}

#startOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: rgba(0, 0, 0, 0.72);
  z-index: 20;
}

#startOverlay.hidden {
  display: none;
}

#startButton {
  background: #000;
  color: #3f3;
  border: 2px solid #3f3;
  font-family: monospace;
  font-size: 22px;
  padding: 14px 22px;
  cursor: pointer;
}

/* ── High Score UI ────────────────────────────────────────────────── */
#initials-box {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9); border: 2px solid #5ef; padding: 40px; border-radius: 8px;
  box-shadow: 0 0 30px #5ef; z-index: 30; pointer-events: auto;
}
#initials-box.visible { display: flex; }
#initials-box h2 {
  color: #5ef; font-size: 28px; text-shadow: 0 0 15px #5ef; margin-top: 0; margin-bottom: 20px; text-align: center;
}
.initials-input { display: flex; gap: 15px; justify-content: center; margin-bottom: 30px; }
.initial-slot { 
  width: 45px; height: 55px; border-bottom: 4px solid #fff; 
  font-size: 45px; color: #fff; text-align: center; line-height: 55px;
  text-transform: uppercase; text-shadow: 0 0 10px #fff;
}
.initial-slot.filled { border-bottom-color: #3f3; color: #3f3; text-shadow: 0 0 15px #3f3; }
.initial-slot.active { border-bottom-color: #f0f; animation: blink 1s step-end infinite; }

#high-scores {
  display: none; flex-direction: column; align-items: center; gap: 10px;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0, 20, 0, 0.85); border: 2px solid #3f3; padding: 25px 35px; border-radius: 8px;
  box-shadow: 0 0 25px #3f3; z-index: 30; min-width: 320px; pointer-events: auto;
}
#high-scores.visible { display: flex; }
#hs-title { 
  color: #3f3; font-size: 22px; letter-spacing: 4px; border-bottom: 1px solid #3f3; 
  padding-bottom: 10px; margin-bottom: 15px; text-shadow: 0 0 10px #3f3; text-align: center; font-weight: bold;
}
.score-row { 
  display: flex; justify-content: space-between; width: 100%; font-size: 20px; color: #aaa; 
  opacity: 0; animation: fadein 0.5s forwards; font-family: 'Courier New', Courier, monospace;
}
.score-row.top { color: #ff0; text-shadow: 0 0 15px #ff0; font-size: 24px; font-weight: bold; }
.score-rank { width: 45px; color: #3f3; }
.score-name { flex-grow: 1; text-align: center; letter-spacing: 2px;}
.score-val { color: #fff; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadein { to { opacity: 1; } }

/* Start-screen embedded high scores */
#start-hs {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 320px;
}
#start-hs .hs-title {
  color: #3f3;
  font-size: 18px;
  letter-spacing: 4px;
  border-bottom: 1px solid #3f3;
  padding-bottom: 8px;
  margin-bottom: 8px;
  text-shadow: 0 0 10px #3f3;
  text-align: center;
  font-weight: bold;
  width: 100%;
}
#start-hs .score-row {
  opacity: 1;
  font-family: 'Courier New', Courier, monospace;
}

/* Restart prompt inside #high-scores panel */
#hs-restart-prompt {
  margin-top: 16px;
  font-size: 15px;
  letter-spacing: 2px;
  color: #3f3;
  text-shadow: 0 0 8px #3f3;
  animation: blink 1s step-end infinite;
  text-align: center;
}