/* OCD Scroll Gauge – standalone module */
.ocd-scroll-gauge {
  position: fixed; left: 8px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 200px; z-index: 9990;
  border-radius: 6px; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden; opacity: 0; transition: opacity 0.5s;
}
.ocd-scroll-gauge.visible { opacity: 1; }
.ocd-scroll-gauge-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: 6px;
  transition: height 0.3s, background 0.3s;
}
.ocd-scroll-gauge-label {
  position: absolute; left: 20px; bottom: 0;
  font-size: 10px; font-weight: 700; white-space: nowrap;
  color: #889; transition: color 0.3s;
}
.ocd-scroll-gauge-icon {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 16px; opacity: 0; transition: opacity 0.3s;
}
.ocd-scroll-gauge-icon.visible { opacity: 1; }

/* Discreet hint right of the heat bar */
.ocd-scroll-gauge-hint {
  position: fixed; left: 28px; top: 50%; transform: translateY(-50%);
  width: 110px; z-index: 9990;
  font-size: 9px; font-weight: 700; color: #000; line-height: 1.35;
  text-align: left; pointer-events: none;
  opacity: 0; transition: opacity 0.5s;
}
.ocd-scroll-gauge-hint.visible { opacity: 1; }

.ocd-scroll-gauge.exploded {
  animation: ocdGaugeExplode 0.8s ease-out forwards;
}
@keyframes ocdGaugeExplode {
  0%   { transform: translateY(-50%) scale(1); opacity: 1; }
  30%  { transform: translateY(-50%) scale(1.5); opacity: 1; }
  100% { transform: translateY(-50%) scale(0) rotate(90deg); opacity: 0; }
}

.ocd-scroll-reward {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 10010; pointer-events: none; text-align: center;
}
.ocd-scroll-reward-number {
  display: inline-block;
  padding: 14px 30px; border-radius: 16px;
  background: rgba(0,0,0,0.78);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  font-size: 48px; font-weight: 900; color: #f5a623;
  text-shadow: 0 0 20px rgba(245,166,35,0.8), 0 0 40px rgba(245,166,35,0.4);
  animation: ocdCandyPop 3s ease-out forwards;
}
.ocd-scroll-reward-miss {
  display: inline-block;
  padding: 12px 24px; border-radius: 14px;
  background: rgba(0,0,0,0.78);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  font-size: 22px; font-weight: 700; color: #fff;
  text-shadow: 0 0 10px rgba(200,200,200,0.4);
  animation: ocdCandyPop 3s ease-out forwards;
}
@keyframes ocdCandyPop {
  0%   { transform: scale(0.3); opacity: 0; }
  10%  { transform: scale(1.5); opacity: 1; }
  20%  { transform: scale(1.2); }
  30%  { transform: scale(1.3); opacity: 1; }
  85%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1) translateY(-60px); opacity: 0; }
}
.ocd-candy-particle {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  animation: ocdCandyBurst 1s ease-out forwards;
}
@keyframes ocdCandyBurst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}