/* Rhythm lesson. All rules scoped under .rh-* */
.rh-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rh-hero img { width: 240px; }
.rh-cap { margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--dim); text-align: center; }

/* the tap pad */
#controls .btn.rh-tap { min-height: 76px; font-size: 20px; letter-spacing: .12em; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.btn.rh-tap.hit { animation: rhHit .16s ease-out; }
@keyframes rhHit { 0% { filter: brightness(1.25); } 100% { filter: none; } }

/* the ball and drum */
.rh-ball { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 6px 8px 2px; }
.rh-skin { fill: #EAE3D7; stroke: #c9bfae; stroke-width: 1.5; }
.rh-shell { fill: #3B4FA0; stroke: var(--gold); stroke-width: 2; }
.rh-glow { fill: var(--gold); opacity: 0; }
.rh-glow.on { animation: rhGlow .35s ease-out; }
@keyframes rhGlow { 0% { opacity: .75; } 100% { opacity: 0; } }
.rh-bb { filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.rh-cloud path { fill: #C9C3E8; stroke: #fff; stroke-width: 2; }
.rh-cloud { opacity: 0; transition: opacity .25s; }
.rh-cloud.on { opacity: 1; }
.rh-count { fill: var(--dim); font: 700 13px var(--sans); }

/* labels */
.rh-ax { fill: var(--faint); font: 700 12px var(--sans); letter-spacing: .03em; }
.rh-ax.gold { fill: var(--gold); }
.rh-rl { fill: var(--dim); font: 700 12.5px var(--sans); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.rh-rline { stroke: var(--line-strong); stroke-width: 1.5; }
/* the beat and the next one */
.rh-pb circle { fill: var(--violet); }
.rh-pb.due circle { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 5 4; }
.rh-pb text { fill: var(--dim); font: 700 12.5px var(--sans); }
.rh-pb.due text { fill: var(--gold); }
.rh-arc { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.rh-arc.ahead { stroke: var(--gold); stroke-dasharray: 5 4; }

/* beat and rhythm lanes */
.rh-nb rect { fill: var(--raised); stroke: var(--violet); stroke-width: 1.5; transition: fill .1s; }
.rh-nb text { fill: var(--text); font: 700 13px var(--sans); }
.rh-nb.on rect { fill: var(--violet); }
.rh-nb.held rect { stroke: var(--gold); stroke-width: 2.5; }
.rh-bd { fill: var(--raised); stroke: var(--line-strong); stroke-width: 1.5; }
.rh-bd.on { animation: rhPulse .3s ease-out; }
.rh-bd.held { fill: var(--gold); stroke: var(--gold); }
@keyframes rhPulse { 0% { fill: var(--gold); } 100% { fill: var(--raised); } }

/* drum grids */
.rh-col { fill: rgba(123,92,253,.10); }
.rh-slot { fill: var(--faint); font: 700 12.5px var(--sans); }
.rh-slot.on { fill: var(--text); }
.rh-note { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 1.5; }
.rh-note.hit { animation: rhNote .25s ease-out; }
@keyframes rhNote { 0% { fill: var(--gold); } 100% { fill: var(--violet); } }
.rh-note.found { fill: var(--mint); stroke: var(--mint); animation: none; }
.rh-note.nope { fill: var(--red); stroke: var(--red); animation: none; }
.rh-head { stroke: #fff; stroke-width: 2; opacity: 0; }
.rh-syn { cursor: pointer; }

/* groove */
.rh-lvl .rh-rl { fill: var(--dim); }
.rh-lvl.on .rh-rl, .rh-lvl.win .rh-rl { fill: var(--gold); }
.rh-lvl.on .rh-note { fill: var(--violet-bright); }
.rh-lvl.win .rh-note { fill: var(--gold); stroke: var(--gold); }
.rh-curve { opacity: 0; transition: opacity .5s; }
.rh-groove.shown .rh-curve { opacity: 1; }
.rh-curve path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 4 4; }
.rh-curve circle { fill: var(--gold); }

/* the cloud run */
.rh-band { fill: rgba(201,195,232,.16); stroke: rgba(201,195,232,.5); stroke-dasharray: 4 3; }
.rh-bt { fill: var(--violet); }
.rh-bt.hid { fill: none; stroke: var(--violet-bright); stroke-width: 2; stroke-dasharray: 3 3; }
.rh-tp { fill: var(--gold); }

@media (max-height: 700px) {
  #controls .btn.rh-tap { min-height: 64px; }
  .rh-hero img { width: 200px; }
}