* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  overflow: hidden;
}

#renderCanvas {
  width: 100vw;
  height: 100vh;
  display: block;
  outline: none;
  touch-action: none;
}

/* ── 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;
  font-family: monospace;
}
#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;
  font-family: monospace;
}
#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; gap: 12px;
}
.score-row.top { color: #ff0; text-shadow: 0 0 15px #ff0; font-size: 24px; font-weight: bold; }
.score-rank { width: 45px; color: #3f3; flex-shrink: 0; }
.score-name { flex-grow: 1; text-align: center; letter-spacing: 2px;}
.score-val { color: #fff; width: 80px; text-align: right; flex-shrink: 0; }

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

#hs-restart-prompt {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 2px;
  color: #3f3;
  font-family: monospace;
  text-shadow: 0 0 8px #3f3;
  animation: blink 1s step-end infinite;
  text-align: center;
}