@import url("https://fonts.googleapis.com/css2?family=VT323&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --bolt: #44424c;
}

/* ─── Decorative bolts (kept from original) ─── */
.bolt {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bolt);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.bolt.tl { top: 10px; left: 10px; }
.bolt.tr { top: 10px; right: 10px; }
.bolt.bl { bottom: 10px; left: 10px; }
.bolt.br { bottom: 10px; right: 10px; }

/* ─── VU Meter ─── */
.vu-row {
  height: 26px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.vu-bar {
  flex: 1;
  background: linear-gradient(to top, #ffb000, #ffd86b);
  border-radius: 1px;
  height: 12%;
  opacity: 0.35;
  animation: none;
  transform-origin: bottom;
}
.vu-row.playing .vu-bar {
  opacity: 1;
  animation: vu 1.1s ease-in-out infinite;
}
.vu-bar:nth-child(1) { animation-delay: 0s; }
.vu-bar:nth-child(2) { animation-delay: 0.12s; }
.vu-bar:nth-child(3) { animation-delay: 0.24s; }
.vu-bar:nth-child(4) { animation-delay: 0.06s; }
.vu-bar:nth-child(5) { animation-delay: 0.3s; }
.vu-bar:nth-child(6) { animation-delay: 0.18s; }
.vu-bar:nth-child(7) { animation-delay: 0.36s; }

@keyframes vu {
  0% { height: 18%; }
  30% { height: 85%; }
  55% { height: 40%; }
  78% { height: 95%; }
  100% { height: 18%; }
}