/* ============================================================
   Candy Kingdom — Sugar Rush rhythm HUD.
   Shown ONLY during the candy zone (RhythmHUD.js sets data-visible).
   4 notes + a tier chip at screen top. Pastel bubblegum palette so
   the HUD feels like part of the zone, not a generic game UI.
   ============================================================ */

#hud-rhythm {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 72px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 12px;
  background: rgba(255, 220, 236, 0.82);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  border: 2px solid rgba(255, 80, 128, 0.45);
  border-radius: 18px;
  box-shadow:
    0 4px 14px rgba(255, 80, 128, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  z-index: 22;
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}
#hud-rhythm[data-visible="true"] {
  opacity: 1;
}
#hud-rhythm[data-visible="false"] {
  transform: translateX(-50%) translateY(-20px);
}

/* "SUGAR RUSH" label. Heats up during the 2s count-in so eyes flick
   to it right before the beats start. */
#hud-rhythm .rh-label {
  font-family: 'Lilita One', 'Roboto Slab', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(180, 30, 80, 0.72);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: color 200ms, text-shadow 200ms, transform 200ms;
}
#hud-rhythm .rh-label[data-hot="true"] {
  color: rgba(220, 30, 100, 1);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 10px rgba(255, 120, 180, 0.9);
  transform: scale(1.06);
}

/* The strip of 4 notes. */
#hud-rhythm .rh-strip {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

#hud-rhythm .rh-note {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 200, 220, 0.55);
  border: 2px solid rgba(255, 140, 180, 0.55);
  color: rgba(180, 30, 80, 0.70);
  font-size: 22px;
  line-height: 1;
  transition:
    transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background 140ms,
    border-color 140ms,
    color 140ms,
    box-shadow 160ms;
  will-change: transform, background;
}

/* IDLE — dim, waiting. */
#hud-rhythm .rh-note[data-state="idle"] {
  opacity: 0.55;
  transform: scale(0.92);
}

/* READY — the beat is upcoming in the count-in; notes glow softer to
   telegraph "get ready to tap." */
#hud-rhythm .rh-note[data-state="ready"] {
  opacity: 0.88;
  background: rgba(255, 224, 240, 0.85);
  border-color: rgba(255, 110, 160, 0.8);
  box-shadow: 0 0 8px rgba(255, 120, 180, 0.45);
  transform: scale(1.0);
}

/* NOW — the beat is happening this frame. Bright pink, scaled up.
   Players who tap during this state should see hit. */
#hud-rhythm .rh-note[data-state="now"] {
  opacity: 1;
  background: linear-gradient(145deg, #fff4f8 0%, #ffb3d1 100%);
  border-color: #ff3f85;
  color: #b91d56;
  box-shadow:
    0 0 14px rgba(255, 80, 128, 0.85),
    0 2px 8px rgba(255, 100, 140, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: scale(1.22);
}

/* HIT — tap landed inside the window. Burst-scale + green flash. */
#hud-rhythm .rh-note[data-state="hit"] {
  opacity: 1;
  background: linear-gradient(145deg, #f4fff4 0%, #8dffc3 100%);
  border-color: #1faf65;
  color: #0e6e3f;
  box-shadow:
    0 0 18px rgba(90, 255, 160, 0.9),
    0 2px 10px rgba(60, 200, 120, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: scale(1.35);
}

/* PAST — beat ended without being hit. Dim + desaturated so the player
   reads it as "missed" without being punished visually. */
#hud-rhythm .rh-note[data-state="past"] {
  opacity: 0.35;
  background: rgba(220, 200, 210, 0.4);
  border-color: rgba(180, 160, 170, 0.5);
  color: rgba(120, 100, 110, 0.6);
  transform: scale(0.88);
}

/* Beat 4 (the peak) is always slightly bigger with a different glyph. */
#hud-rhythm .rh-note[data-idx="3"] {
  width: 46px;
  height: 46px;
  font-size: 26px;
}

/* Tier chip under the strip. Reflects the combo tier going INTO the
   peak — this is what actually multiplies the lift. */
#hud-rhythm .rh-tier {
  margin-top: 2px;
}
#hud-rhythm .rh-tier-chip {
  font-family: 'Lilita One', 'Roboto Slab', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  padding: 3px 10px;
  border-radius: 10px;
  color: rgba(180, 30, 80, 0.9);
  background: rgba(255, 240, 246, 0.9);
  border: 1.5px solid rgba(255, 140, 180, 0.7);
  transition: background 200ms, color 200ms, border-color 200ms, transform 200ms;
  display: inline-block;
}
#hud-rhythm[data-tier="STEP"] .rh-tier-chip {
  color: #b91d56;
  background: #ffd7ea;
  border-color: #ff7eaa;
}
#hud-rhythm[data-tier="FLOW"] .rh-tier-chip {
  color: #fff;
  background: #ff5088;
  border-color: #ff3070;
  transform: scale(1.05);
}
#hud-rhythm[data-tier="FRENZY"] .rh-tier-chip {
  color: #fff;
  background: linear-gradient(90deg, #ff3f85 0%, #ff7eaa 50%, #ffd56b 100%);
  border-color: #ffbf3b;
  transform: scale(1.12);
  animation: rh-frenzy-pulse 600ms ease-in-out infinite alternate;
  box-shadow: 0 0 16px rgba(255, 140, 60, 0.7);
}

@keyframes rh-frenzy-pulse {
  0%   { transform: scale(1.08); filter: brightness(1.0); }
  100% { transform: scale(1.16); filter: brightness(1.12); }
}

/* Mobile tuning — shrink + tighten for portrait. */
@media (max-width: 480px), (orientation: portrait) {
  #hud-rhythm {
    top: calc(env(safe-area-inset-top, 0) + 56px);
    padding: 8px 12px 10px;
    gap: 4px;
  }
  #hud-rhythm .rh-label {
    font-size: 11px;
    letter-spacing: 1.6px;
  }
  #hud-rhythm .rh-strip {
    gap: 8px;
  }
  #hud-rhythm .rh-note {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  #hud-rhythm .rh-note[data-idx="3"] {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  #hud-rhythm .rh-tier-chip {
    font-size: 10px;
    padding: 2px 8px;
  }
}