*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #020617;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.hud-container {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, rgba(15, 23, 42, 1) 0%, rgba(2, 6, 23, 1) 100%);
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(59, 130, 246, 0.2), inset 0 0 30px rgba(59, 130, 246, 0.1);
}

.hud-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

.hud-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hud-track {
  fill: none;
  stroke: rgba(51, 65, 85, 0.5);
  stroke-width: 4;
}

.hud-progress {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.outer-ring {
  stroke: #3b82f6;
  stroke-width: 6;
  stroke-dasharray: 565.48;
  stroke-dashoffset: 565.48;
  filter: drop-shadow(0 0 8px #3b82f6);
}

.middle-ring {
  stroke: #10b981;
  stroke-width: 5;
  stroke-dasharray: 439.82;
  stroke-dashoffset: 439.82;
  filter: drop-shadow(0 0 6px #10b981);
}

.inner-ring {
  stroke: #ec4899;
  stroke-width: 4;
  stroke-dasharray: 314.15;
  stroke-dashoffset: 314.15;
  filter: drop-shadow(0 0 4px #ec4899);
}

.hud-data {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hud-value {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

.hud-label {
  color: #3b82f6;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 4px;
  margin-top: 4px;
}

const ring1 = document.getElementById("ring-1");
const ring2 = document.getElementById("ring-2");
const ring3 = document.getElementById("ring-3");
const hudVal = document.getElementById("hud-val");

// Circumferences of the rings
const c1 = 565.48;
const c2 = 439.82;
const c3 = 314.15;

function updateHUD() {
  const v1 = Math.floor(Math.random() * 40) + 60; // 60-100
  const v2 = Math.floor(Math.random() * 50) + 30; // 30-80
  const v3 = Math.floor(Math.random() * 60) + 20; // 20-80
  
  ring1.style.strokeDashoffset = c1 - (v1 / 100) * c1;
  ring2.style.strokeDashoffset = c2 - (v2 / 100) * c2;
  ring3.style.strokeDashoffset = c3 - (v3 / 100) * c3;
  
  hudVal.innerText = v1 + "%";
}

setTimeout(updateHUD, 100);
setInterval(updateHUD, 3000);