/* Stickwise practice games. Colours only from style.css tokens. */

.dr-stage { gap: 16px; }
.dr-stage .prompt { overflow-wrap: anywhere; }
.dr-keys { line-height: 2; }
.dr-keys kbd { margin: 0 1px; }
@media (hover: none) { .dr-keys { display: none; } }
.dr-start { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 0; }
.dr-input-stage { gap: 10px; }
.dr-num { width: 5.5em; }

/* count-in and live readout */
.dr-tapzone { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; min-height: 56px; }
.dr-countin { font: 900 clamp(30px, 7vw, 46px)/1 var(--font-display); color: var(--accent); min-width: 3ch; }
.dr-live { min-height: 1.6em; font-size: 15px; font-weight: 600; }
.dr-live.perfect, .dr-live.good { color: var(--good); }
.dr-live.ok { color: var(--cool); }
.dr-live.off, .dr-live.wrong { color: var(--bad); }
.dr-tk-status { transition: color .15s; }
.dr-tk-status.silent { color: var(--cool); }

/* two-hand pads for rudiments */
.dr-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dr-hand { min-height: 120px; border-radius: 18px; }
.dr-hand b { font: 800 22px var(--font-display); }

/* answers (ear games) */
.dr-answers .dr-ans { position: relative; flex-direction: column; gap: 0; line-height: 1.2; padding: 8px 12px; text-align: center; }
.dr-sub { font: 500 12px var(--font-mono); color: var(--muted); }
.dr-ans.good .dr-sub, .dr-ans.bad .dr-sub { color: inherit; }
.dr-anskey { position: absolute; top: 3px; right: 4px; font-size: 10px; padding: 0 3px; line-height: 1.3; opacity: 0.55; border-bottom-width: 1px; }
@media (hover: none) { .dr-anskey { display: none; } }
.dr-ans.dr-missed { border-style: dashed; border-color: var(--good); color: var(--good); background: transparent; }

/* hit the drum */
.dr-target { font-size: clamp(32px, 7vw, 60px); color: var(--accent); overflow-wrap: anywhere; }
.dr-hit-stage .row.spread { align-items: center; }

/* dynamics */
.dr-dyn-mark { font-style: italic; color: var(--accent); font-size: clamp(48px, 10vw, 72px); min-width: 1.6ch; }
.dr-vel { position: relative; height: 34px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.dr-vel-band { position: absolute; top: 0; bottom: 0; background: var(--good-soft); border-left: 2px solid var(--good); border-right: 2px solid var(--good); transition: left .2s, width .2s; }
.dr-vel-needle { position: absolute; top: 3px; bottom: 3px; width: 5px; margin-left: -2px; border-radius: 3px; background: var(--accent); left: 0; transition: left .08s; }
.dr-vel-lo, .dr-vel-hi { position: absolute; bottom: 2px; font: 500 10px var(--font-mono); color: var(--muted); pointer-events: none; }
.dr-vel-lo { left: 6px; }
.dr-vel-hi { right: 6px; }
.dr-series { display: flex; gap: 10px; height: 80px; padding: 6px 10px; background: var(--surface-2); border-radius: 10px; }
.dr-series:empty { display: none; }
.dr-series i { position: relative; align-self: flex-end; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

/* results */
.dr-results { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.dr-pct { font-size: clamp(48px, 10vw, 72px); }
.chip.dr-g-perfect, .chip.dr-g-good { background: var(--good-soft); color: var(--good); }
.chip.dr-g-ok { background: var(--cool-soft); color: var(--cool); }
.chip.dr-g-miss, .chip.dr-g-wrong, .chip.dr-g-off { background: var(--bad-soft); color: var(--bad); }
.dr-errplot {
  position: relative; display: flex; gap: 2px; height: 120px; padding: 0 0 18px 44px;
  background: linear-gradient(var(--muted), var(--muted)) 0 calc(50% - 9px) / 100% 1px no-repeat;
  overflow-x: auto;
}
.dr-err-axis { position: absolute; left: 0; font: 500 10px var(--font-mono); color: var(--muted); }
.dr-err-axis.top { top: 0; }
.dr-err-axis.bottom { bottom: 18px; }
.dr-errcol { position: relative; flex: 1 0 12px; max-width: 30px; border-radius: 4px; }
.dr-errcol:hover { background: var(--surface-2); }
.dr-errcol small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font: 500 9.5px var(--font-mono); color: var(--muted); }
.dr-errdot { position: absolute; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--muted); }
.dr-errdot.perfect { background: var(--good); }
.dr-errdot.good { background: var(--cool); }
.dr-errdot.ok { background: var(--accent); }
.dr-errdot.off { background: var(--bad); opacity: 0.7; }
.dr-errdot.wrong { background: transparent; border: 2px solid var(--bad); }
.dr-errdot.miss { top: 50%; background: none; color: var(--bad); width: auto; height: auto; margin: -9px 0 0 -4px; font: 700 14px var(--font-mono); }
.dr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.dr-landing { font-weight: 600; }
.dr-landing.good { color: var(--good); }
.dr-landing.bad { color: var(--bad); }