/* ECHO-specific styles. Shared components (screens, panels, buttons, leaderboard,
   name input, HUD, nav, logo, calibration) come from ../play/style.css.
   (Calibration classes .calib/.cal-* are defined here since echo doesn't load glide.css.) */

.calib { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.calib.hidden { display: none; }
.cal-note { font-size: 40px; font-weight: 900; color: var(--gold); text-shadow: 0 0 12px var(--gold); min-height: 46px; }
.cal-meter { position: relative; width: 16px; height: 150px; background: #10141f; border: 1px solid var(--dim); }
.cal-dot { position: absolute; left: -4px; width: 24px; height: 8px; background: var(--green); box-shadow: 0 0 10px var(--green); bottom: 50%; transition: bottom 0.05s linear; }
.cal-range { color: var(--neon); letter-spacing: 2px; text-shadow: 0 0 6px var(--neon); }
.cal-row { display: flex; gap: 10px; }

/* game stage */
.echo-stage {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  width: min(560px, 92vw); text-align: center; margin-top: 30px;
}
.echo-status {
  font-size: clamp(20px, 5vw, 32px); font-weight: 900; letter-spacing: 3px;
  color: var(--gold); text-shadow: 0 0 12px var(--gold); min-height: 40px;
}
.echo-status.good { color: var(--green); text-shadow: 0 0 12px var(--green); }
.echo-status.bad { color: var(--red); text-shadow: 0 0 12px var(--red); }

.echo-pips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; min-height: 18px; }
.pip {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--dim); box-sizing: border-box;
}
.pip.long { width: 36px; border-radius: 8px; } /* a held (2-beat) note */
.pip.done { background: var(--green); border-color: var(--green); box-shadow: 0 0 10px var(--green); }

.echo-ladder { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.rung {
  border: 1px solid var(--dim); color: #cfe7ff; padding: 16px; font-size: 20px;
  font-weight: bold; letter-spacing: 2px; transition: all 0.1s; background: rgba(0,240,255,0.02);
}
.rung.active { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 18px rgba(255,207,58,0.5); background: rgba(255,207,58,0.08); }
.rung.matched { border-color: var(--green); color: var(--green); box-shadow: 0 0 18px rgba(57,255,136,0.5); background: rgba(57,255,136,0.08); }
.rung.bad { border-color: var(--red); color: var(--red); box-shadow: 0 0 18px rgba(255,59,92,0.5); }