/* virtual-timpani.css */
body { font-family: Inter, sans-serif; }

.tool-card {
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: .75rem; padding: 1.5rem;
  box-shadow: 0 3px 12px rgba(0,0,0,.04);
}

/* ── Toggle groups ── */
.toggle-wrap {
  display: flex; align-items: center; gap: 1px;
  background: #f3f4f6; border-radius: 8px; padding: 3px;
}
.toggle-btn {
  padding: 5px 12px; border-radius: 6px; font-size: .72rem; font-weight: 600;
  color: #6b7280; background: transparent; border: none; cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.toggle-btn.active { background: #fff; color: #065f46; box-shadow: 0 1px 4px rgba(0,0,0,.10); }

/* ── Timpani SVG wrap ── */
.timpani-wrap {
  position: relative; width: 100%;
  touch-action: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(170deg, #1a1008 0%, #0e0804 100%);
  border-radius: 10px;
  padding: 8px;
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.5),
    0 6px 20px rgba(0,0,0,.22);
}
.timpani-wrap svg { display: block; width: 100%; height: auto; }

/* ── Roll indicator badge ── */
.roll-badge {
  position: absolute;
  top: 10px; right: 12px;
  background: rgba(220,50,50,.85);
  color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  pointer-events: none;
  display: none;
  z-index: 10;
  letter-spacing: .04em;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.roll-badge.visible { display: block; animation: rollBadgePulse .8s ease infinite; }
@keyframes rollBadgePulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .6; }
}

/* ── Labels below drums ── */
.timpani-labels {
  display: flex;
  justify-content: space-around;
  padding: 6px 0 2px;
}
/* 2×2 grid matches the mobile drum layout — keep in sync with MOBILE_BP in JS */
@media (max-width: 639px) {
  .timpani-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 0;
    justify-items: center;
  }
}
.drum-label {
  text-align: center;
  line-height: 1.3;
}
/* Note (D2) + size (32") — desktop only; keys stay on all breakpoints */
.drum-label-note,
.drum-label-size { display: none; }
@media (min-width: 1024px) {
  .drum-label-note { display: block; font-size: 8px; font-weight: 700; color: #c0a050; }
  .drum-label-size { display: block; font-size: 7px; color: #9ca3af; }
}
.drum-label-key {
  display: block;
  font-size: 7px; font-family: monospace;
  color: #6b7280;
}

/* ── Landscape banner ── */
.landscape-banner {
  background: #fefce8; border: 1px solid #fde68a; border-radius: .5rem;
  padding: 8px 14px; font-size: .75rem; color: #92400e;
  text-align: center; margin-bottom: 10px;
}

/* ── Table ── */
tbody tr:nth-child(even) { background: #f9fafb; }