/* ===================== GAME CANVAS ===================== */
#game-canvas {
  position: fixed;
  inset: 0;
  display: block;
  background: #0e1526;
}

/* ===================== HUD ===================== */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  font-family: 'Trebuchet MS', sans-serif;
  color: #fff;
}

#minimap {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(10, 14, 30, 0.55);
  border: 2px solid rgba(255,255,255,0.25);
}

#leaderboard {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(10, 14, 30, 0.55);
  border-radius: 4px;
  padding: 5px 8px;
  width: 144px; /* fixed - 2x #minimap's 72px, so names truncate instead of stretching the panel */
}
.lb-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.6;
  margin-bottom: 3px;
}
#lb-list { list-style: none; margin: 0; padding: 0; font-size: 9px; }
#lb-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* min-width:0 overrides the flex-item default of min-width:auto, which
   otherwise refuses to shrink a text child below its content size and lets
   long names blow out the list instead of actually eliding. */
#lb-list li .lb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lb-list li .lb-score { flex: 0 0 auto; }
#lb-list li.me { font-weight: 700; }
#lb-list li.me .lb-name { text-shadow: 0 0 6px currentColor; }

#statbar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  background: rgba(10, 14, 30, 0.5);
  padding: 5px 14px;
  border-radius: 4px;
}
.stat { text-align: center; }
.stat-value { font-size: 15px; font-weight: 700; }
.stat-label { font-size: 8px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.5px; }

#cooldown-ring {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
}
#cooldown-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: rgba(10,14,30,0.5); stroke: rgba(255,255,255,0.15); stroke-width: 4; }
.ring-fg {
  fill: none;
  stroke: #ffcf4d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 113;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.05s linear;
}