body { font-family: Inter, sans-serif; }

/* ── Tool card ── */
.tool-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 3px 12px rgba(0,0,0,.04);
}

/* ── Control buttons ── */
.mode-btn {
  border-radius: 7px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.12s;
}
.mode-btn.active { background: #fff; color: #065f46; box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* ── Drum pad grid ── */
#drum-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 480px) {
  #drum-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .tool-card { padding: 1rem; }
  .pad { aspect-ratio: 1 / 0.92; }
}

.pad {
  position: relative;
  aspect-ratio: 1 / 0.92;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.08s;
  border: none;
  outline: none;
}
.pad:active, .pad.hit {
  transform: scale(0.92);
  filter: brightness(1.18);
}

.pad-emoji { font-size: 28px; line-height: 1; margin-bottom: 2px; }
.pad-name  { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: 0.03em; }
.pad-key   {
  position: absolute;
  top: 7px; right: 9px;
  font-size: 10px; font-weight: 800;
  color: rgba(255,255,255,0.55);
  font-family: 'Inter', monospace;
}

/* Individual pad colours */
.pad-kick    { background: linear-gradient(135deg, #1e3a5f 0%, #0f2942 100%); box-shadow: 0 4px 16px rgba(15,41,66,.45); }
.pad-snare   { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); box-shadow: 0 4px 16px rgba(92,33,182,.4); }
.pad-hihat-c { background: linear-gradient(135deg, #047857 0%, #065f46 100%); box-shadow: 0 4px 16px rgba(4,120,87,.4); }
.pad-hihat-o { background: linear-gradient(135deg, #059669 0%, #047857 100%); box-shadow: 0 4px 16px rgba(5,150,105,.35); }
.pad-crash   { background: linear-gradient(135deg, #b45309 0%, #92400e 100%); box-shadow: 0 4px 16px rgba(180,83,9,.4); }
.pad-ride    { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); box-shadow: 0 4px 16px rgba(217,119,6,.4); }
.pad-tom1    { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); box-shadow: 0 4px 16px rgba(220,38,38,.4); }
.pad-tom2    { background: linear-gradient(135deg, #e05252 0%, #dc2626 100%); box-shadow: 0 4px 16px rgba(220,38,38,.35); }
.pad-floor   { background: linear-gradient(135deg, #be185d 0%, #9d174d 100%); box-shadow: 0 4px 16px rgba(190,24,93,.4); }
.pad-clap    { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); box-shadow: 0 4px 16px rgba(2,132,199,.4); }
.pad-perc    { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); box-shadow: 0 4px 16px rgba(14,165,233,.4); }
.pad-rimshot { background: linear-gradient(135deg, #64748b 0%, #475569 100%); box-shadow: 0 4px 16px rgba(100,116,139,.4); }

/* ── Win flash ring ── */
@keyframes padPop {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.pad.hit { animation: padPop 0.25s ease-out; }

/* ── Volume slider ── */
input[type=range].accent-emerald-600 { accent-color: #059669; }