/* Visualizer and ring styles */
.visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:16px; margin-bottom: 24px;
  position:relative;
  z-index: 2;
}
.rings{display:flex; gap:-85px; align-items:center; justify-content:center; margin-top:-260px}

#primaryRing {
  position: fixed;
  left: 50%;
  top: calc(50% - 160px);
  transform: translate(-50%, -50%) translateX(-18.75vw);
}

#accentRing {
  position: fixed;
  left: 50%;
  top: calc(50% - 170px);
  transform: translate(-50%, -50%) translateX(18.75vw);
}

.beat-ring{
  width: calc(var(--ring-size-base) * var(--ring-scale) * var(--viewport-scale));
  height: calc(var(--ring-size-base) * var(--ring-scale) * var(--viewport-scale));
  border-radius:50%;
  border:none;
  display:grid;
  place-items:center;
  position:relative;
  background: radial-gradient(circle at 30% 30%, rgba(0,163,255,0.04), transparent 30%);
  box-shadow: 0 8px 40px rgba(0,163,255,0.06), inset 0 1px 0 rgba(255,255,255,0.02);
}
.beat-ring.accent{
  border:none;
  background: radial-gradient(circle at 70% 70%, rgba(255,59,59,0.04), transparent 30%);
  box-shadow: 0 8px 40px rgba(255,59,59,0.06), inset 0 1px 0 rgba(255,255,255,0.02);
}
.pulse{
  width: calc(var(--pulse-size-base) * var(--ring-scale) * var(--viewport-scale));
  height: calc(var(--pulse-size-base) * var(--ring-scale) * var(--viewport-scale));
  border-radius:50%;
  background:var(--accent);
  opacity:0.0;
  transform:scale(0.7);
  transition:transform 0.12s linear, opacity 0.12s linear;
  box-shadow:0 6px calc(30px * var(--glow)) rgba(0,163,255,calc(0.28 * var(--glow))), 0 0 calc(40px * var(--glow)) rgba(0,163,255,calc(0.18 * var(--glow)));
}
.pulse.on{
  opacity:1;
  transform:scale(1);
  transition:transform 0.04s linear, opacity 0.04s linear;
  filter:drop-shadow(0 0 calc(14px * var(--glow)) rgba(0,163,255,calc(0.8 * var(--glow))));
}
.pulse.accent{
  background:var(--accent-accent);
  box-shadow:0 6px calc(30px * var(--glow)) rgba(255,59,59,calc(0.28 * var(--glow))), 0 0 calc(40px * var(--glow)) rgba(255,59,59,calc(0.18 * var(--glow)));
}
.pulse.accent.on{
  filter:drop-shadow(0 0 calc(14px * var(--glow)) rgba(255,59,59,calc(0.8 * var(--glow))));
}
.pulse.fill{
  width: calc(var(--ring-size-base) * var(--ring-scale) * var(--viewport-scale));
  height: calc(var(--ring-size-base) * var(--ring-scale) * var(--viewport-scale));
}

#bpmDisplay{
  font-family:"Cal Sans","Space Mono",system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  font-size:32px; font-weight:700; letter-spacing:0.5px;
  color:var(--fg); pointer-events:none; text-shadow:0 2px 18px rgba(0,0,0,0.35);
  z-index: 4;
  opacity: 1;
  font-size: 28px;
  margin-right: 0;
  line-height: 1;
  min-width: 60px;
  text-align: center;
}

#beatCounter{
  font-family:"Space Mono",monospace;
  font-size:20px; 
  font-weight:600; 
  letter-spacing:0.5px;
  color:var(--muted); 
  pointer-events:none; 
  text-shadow:0 2px 18px rgba(0,0,0,0.35);
  z-index: 4;
  opacity: 0.8;
  line-height: 1;
  min-width: 40px;
  text-align: center;
  margin-left: 8px;
}

@media (min-width: 601px) {
  .desktop-bottom-row #bpmDisplay {
    position: absolute;
    right: calc(50% + 250px);
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
  }
}

@media (max-width: 600px) {
  .rings { 
    margin-top: -26vh;
  }
  #primaryRing {
    top: calc(50% - 30px);
    transform: translate(-50%, -50%) translateX(calc(-14vw - 20px));
  }
  #accentRing {
    top: calc(50% - 30px);
    transform: translate(-50%, -50%) translateX(calc(14vw + 20px));
  }

  .visual {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
  body.ui-visible .visual {
    opacity: 1;
    pointer-events: auto;
  }

  #bpmDisplay {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    text-align: center;
    font-size: 50pt;
    color: #fff;
    opacity: 0;
    z-index: 1101;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
  
  body.has-started #bpmDisplay {
    opacity: 0.2;
  }
  
  #beatCounter {
    display: none;
  }
}

@media (max-width: 600px) {
  :root{
    --ring-size-base: 104px;
    --pulse-size-base: 69px;
  }
}