/* drums.css : scoped to #drums and #drums-seq */
#drums .drums-pads { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#drums .drums-pad { position: relative; min-height: 96px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--strong); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; cursor: pointer;
  touch-action: none; -webkit-tap-highlight-color: transparent; font-weight: 500; font-size: 15px; line-height: 1.15; text-align: center; }
#drums .drums-pad:hover { border-color: var(--ink); }
#drums .pad-kick { background: var(--card); }
#drums .pad-crash, #drums .pad-ride { border-radius: 9999px; }
#drums .drums-pad.hit { animation: drums-hit .18s ease-out; }
@keyframes drums-hit { from { background: var(--family); transform: scale(.97); } to { transform: none; } }
#drums .drums-under { margin-top: 12px; }
#drums .drums-under p { flex: 1 1 260px; }
@media (max-width: 640px) {
  #drums .drums-pads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #drums .drums-pad { min-height: 64px; flex-direction: row; justify-content: space-between; padding: 8px 14px; }
  #drums .pad-crash, #drums .pad-ride { border-radius: 16px; }
}

#drums-seq .drums-num { width: 84px; }
#drums-seq .drums-out { min-width: 7.5em; font-variant-numeric: tabular-nums; }
#drums-seq .drums-play { min-width: 104px; }
#drums-seq .drums-gridwrap { overflow-x: auto; margin-top: 14px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
#drums-seq .drums-grid { min-width: 620px; }
#drums-seq .drums-row { display: grid; grid-template-columns: 104px repeat(16, minmax(26px, 1fr)); gap: 3px; margin-bottom: 3px; }
#drums-seq .drums-label { position: sticky; left: 0; z-index: 1; background: var(--card); border: 0; color: var(--ink); text-align: left; font-size: 13px;
  padding: 0 6px 0 0; cursor: pointer; min-height: 32px; }
#drums-seq .drums-head .drums-label { cursor: default; }
#drums-seq .drums-stepnum { text-align: center; font-size: 11px; color: var(--muted); line-height: 20px; border-radius: 4px; }
#drums-seq .drums-stepnum.beat { font-weight: 600; color: var(--ink); }
#drums-seq .drums-stepnum.now { background: var(--family); color: #0c0a09; }
#drums-seq .drums-cell { min-height: 32px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--card); cursor: pointer; padding: 0; }
#drums-seq .drums-cell.alt { background: var(--strong); }
#drums-seq .drums-cell[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); }
#drums-seq .drums-cell.now { box-shadow: inset 0 0 0 2px var(--family); }
#drums-seq .drums-cell.now[aria-pressed="true"] { background: var(--family); border-color: var(--family); }
@media (prefers-reduced-motion: reduce) { #drums .drums-pad.hit { animation: none; background: var(--family); } }