/* Drum machines (DR-8, DR-9, LD-2): one layout, three looks.
   Voice section on top, pattern display and controls in the middle, the
   16 step keys along the front edge. */

.drum {
  --ink: #f1ece0;
  --ink-dim: #9b968b;
  --line: rgba(241, 236, 224, 0.5);
  --accent: #f08a32;
  --led: #ff4a2a;
  --led-glow: rgba(255, 74, 42, 0.75);
  --led-soft: #ff4a2a;
  --led-off: #3a1309;
  --section: rgba(0, 0, 0, 0.28);
  --rule: rgba(255, 255, 255, 0.07);
  --key: #e7e2d6;
  --key-ink: #2a2b2d;

  position: relative;
  width: max-content;
  padding: 14px 20px 18px;
  border-radius: 10px;
  border: 1px solid #08090a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 26px 34px rgba(0, 0, 0, 0.55),
    0 5px 9px rgba(0, 0, 0, 0.45);
  color: var(--ink);
}

/* ------------------------------------------------------------------- top */

.drum-top { display: flex; align-items: center; gap: 22px; margin-bottom: 12px; }
.drum-brand { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.drum-logo { font: 700 30px/1 var(--logo-font); letter-spacing: 0.02em; }
.drum-sub { font: italic 700 11px var(--font); letter-spacing: 0.18em; color: var(--accent); }
.drum-model { font: 700 7.5px var(--font); letter-spacing: 0.28em; color: var(--ink-dim); }
.drum .vfd { width: 250px; }
/* Two preset bars, one above the other: the pattern and the kit (the sound). */
.drum-bars { display: flex; flex-direction: column; gap: 6px; }
.drum-bars .preset-bar { margin-left: 0; }
.drum-bar-label { width: 50px; font: 700 7.5px var(--font); letter-spacing: 0.2em; text-align: right; color: var(--ink-dim); }
.drum-out { display: flex; gap: 2px; margin-left: auto; }

/* ---------------------------------------------------------------- voices */

.drum-voices {
  display: flex;
  align-items: stretch;
  padding: 10px 6px 12px;
  border-radius: 6px;
  background: var(--section);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.drum-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 66px;
  padding: 0 3px;
  border-right: 1px solid var(--rule);
}
.drum-voice:last-child { border-right: 0; }
.drum-knobs { display: flex; flex-direction: column; align-items: center; flex: 1; }
.drum-knobs ws-knob { width: 58px; }
.drum-knobs .ctl-label { min-height: 14px; font-size: 7.5px; }
.drum-vname {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  font: 700 8px/1.1 var(--font);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--accent);
}

.drum-pad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 54px;
  height: 30px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #4a4d52, #2c2e32);
  box-shadow: 0 3px 0 #0b0c0d, inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #e9e6df;
  font: 700 10px var(--mono);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.drum-pad:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b0c0d, inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.drum-pad:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.drum-pad.selected { box-shadow: 0 3px 0 #0b0c0d, inset 0 0 0 2px var(--accent); }
.pad-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow: 0 0 0 1px #000;
}
.drum-pad.hit .pad-led { background: var(--led); box-shadow: 0 0 0 1px #000, 0 0 8px 2px var(--led-glow); }

/* ------------------------------------------------- pattern display + controls */

.drum-seq { display: flex; align-items: center; gap: 18px; margin-top: 12px; }

.drum-matrix {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 30%, #161210, #070606);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.95), 0 0 0 2px #2a2d30, 0 1px 0 2px rgba(255, 255, 255, 0.1);
}
.drum-row { display: flex; align-items: center; gap: 2px; border-radius: 2px; }
.drum-row.selected { background: rgba(255, 255, 255, 0.06); }
.row-label {
  width: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: #7f6f66;
  font: 700 8px/10px var(--mono);
  text-align: left;
  cursor: pointer;
}
.drum-row.selected .row-label { color: var(--led); text-shadow: 0 0 5px var(--led-glow); }
.cell {
  width: 13px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 90, 60, 0.1);
  cursor: pointer;
}
.cell:nth-child(4n + 2):not(:nth-child(2)) { margin-left: 4px; }
.cell[data-level="1"] { background: var(--led-soft); }
.cell[data-level="2"] { background: var(--led); box-shadow: 0 0 5px var(--led-glow); }
.cell.current { outline: 1px solid rgba(255, 255, 255, 0.55); outline-offset: 0; }
.cell.beyond { opacity: 0.25; }
.cell:hover { outline: 1px solid rgba(255, 255, 255, 0.35); }

.drum-controls { display: flex; align-items: center; gap: 2px; }
.drum-buttons { display: flex; align-items: center; gap: 12px; margin-left: 6px; }
.drum-small { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.drum-btn {
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #45494d, #26282b);
  color: #ecebe7;
  font: 700 9px var(--font);
  letter-spacing: 0.12em;
  box-shadow: 0 2px 0 #0d0e0f, inset 0 1px 0 rgba(255, 255, 255, 0.15);
  cursor: pointer;
}
.drum-btn:active { transform: translateY(1px); }
.drum-cue {
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font: 700 8.5px var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  opacity: 0.45;
}
.drum-cue.on { color: var(--led); opacity: 1; box-shadow: 0 0 6px var(--led-glow); animation: drum-cue 0.5s steps(2) infinite; }
@keyframes drum-cue { 50% { opacity: 0.35; } }

/* ------------------------------------------------------------ jack strip */

/* All the jacks on a strip along the top edge, so cables leave upwards rather
   than across the panel: MIDI IN / OUT and the MAIN OUT, then the individual
   outputs. */
.drum-io {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: -14px -20px 12px;
  padding: 7px 20px 5px;
  border-radius: 10px 10px 0 0;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(0, 0, 0, 0.5);
}
.drum-io-main { display: flex; gap: 12px; }
/* The individual outputs, under one line of label (beside them, it would widen the panel). */
.drum-io-outs { display: flex; flex-direction: column; gap: 3px; padding-left: 16px; border-left: 1px solid var(--rule); }
.drum-outs-label {
  font: 700 7.5px var(--font);
  letter-spacing: 0.24em;
  white-space: nowrap;
  color: var(--ink-dim);
}
.drum-outs-label small { font: 600 6.5px var(--font); letter-spacing: 0.12em; opacity: 0.8; }
.drum-outs-jacks { display: flex; gap: 10px; }
.drum-outs-jacks ws-jack .jack-label { font-size: 8px; }
/* A voice playing from its individual output (not the main OUT). */
.drum-voice.individual .drum-vname::after { content: " ▸"; color: var(--accent); }

/* -------------------------------------------------------------- step keys */

.drum-steps { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.drum-sel { display: flex; flex-direction: column; gap: 4px; width: 112px; }
.drum-sel-label { font: 700 7.5px var(--font); letter-spacing: 0.28em; color: var(--ink-dim); }
.drum-sel-name { font: 700 11px var(--font); letter-spacing: 0.1em; color: var(--accent); }
.drum-ac {
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 4px 8px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a4d52, #2c2e32);
  color: #e9e6df;
  font: 700 8.5px var(--font);
  letter-spacing: 0.14em;
  box-shadow: 0 2px 0 #0b0c0d;
  cursor: pointer;
}
.drum-ac.selected { box-shadow: 0 2px 0 #0b0c0d, inset 0 0 0 2px var(--accent); color: var(--accent); }

.step-keys { display: flex; gap: 6px; }
.step-key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 38px;
  height: 46px;
  padding: 7px 0 4px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--key), color-mix(in srgb, var(--key) 80%, #000));
  box-shadow: 0 3px 0 #0b0c0d, 0 4px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
}
.step-key:nth-child(4n + 1):not(:first-child) { margin-left: 8px; }
.step-key:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b0c0d, inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.step-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.key-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.step-key[data-level="1"] .key-led { background: var(--led-soft); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 6px 1px var(--led-glow); }
.step-key[data-level="2"] .key-led { background: var(--led); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 10px 3px var(--led-glow); }
.key-num { font: 700 9px var(--mono); color: var(--key-ink); }
/* The running light: the step that is sounding. */
.step-key.current { box-shadow: 0 3px 0 #0b0c0d, 0 0 0 2px #fff, 0 0 12px 2px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.step-key.beyond { opacity: 0.4; }

/* ---------------------------------------------------------------- DR-8 look */

.drum-dr8 { background: linear-gradient(180deg, #3a3b3d, #2a2b2d 60%, #222325); }
/* The black band behind the name plate: the top row, edge to edge, under the jack strip. */
.drum-dr8 .drum-top { margin: -12px -20px 0; padding: 12px 20px; background: #1b1b1c; }
.drum-dr8 .drum-logo { color: #f6f2e8; }
.drum-dr8 .drum-voices { background: #121213; }
/* The four colour groups of the step keys. */
.drum-dr8 .step-key:nth-child(-n + 4) { --key: #d6402a; --key-ink: #fff4ee; }
.drum-dr8 .step-key:nth-child(n + 5):nth-child(-n + 8) { --key: #ee8a2a; }
.drum-dr8 .step-key:nth-child(n + 9):nth-child(-n + 12) { --key: #f0cf3a; }
.drum-dr8 .step-key:nth-child(n + 13) { --key: #ece6d6; }

/* ---------------------------------------------------------------- DR-9 look */

.drum-dr9 {
  --ink: #1f2124;
  --ink-dim: #5d6268;
  --line: rgba(31, 33, 36, 0.5);
  --accent: #e2641e;
  --section: #3b3e42;
  --key: #d9dbdd;
  --key-ink: #3a3d41;
  border-color: #55595e;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #d2d4d6, #babdc0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -3px 0 rgba(0, 0, 0, 0.15),
    0 26px 34px rgba(0, 0, 0, 0.55),
    0 5px 9px rgba(0, 0, 0, 0.42);
}
.drum-dr9 .drum-io { background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(0, 0, 0, 0.15); }
.drum-dr9 .drum-io-outs { border-left-color: rgba(0, 0, 0, 0.15); }
.drum-dr9 .drum-logo { color: #25282b; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.drum-dr9 .drum-voices { --ink: #eceae4; --ink-dim: #a3a7ac; --line: rgba(236, 234, 228, 0.45); --rule: rgba(255, 255, 255, 0.09); }
.drum-dr9 .drum-vname { color: #ffb37a; }
.drum-dr9 .step-key:nth-child(4n + 1) { --key: #c3c6c9; }

/* ---------------------------------------------------------------- LD-2 look */

.drum-ld2 {
  --ink: #ebe4d1;
  --ink-dim: #8f887a;
  --accent: #e9c46a;
  --led: #ff3b2b;
  --led-soft: #a32a1e;
  --section: rgba(255, 255, 255, 0.03);
  --key: #e9dfc6;
  --key-ink: #5a4d38;
  padding-inline: 38px;
  border-color: #1a0f08;
  /* walnut end cheeks around a black panel */
  background:
    linear-gradient(90deg, transparent 0 18px, #111 18px calc(100% - 18px), transparent calc(100% - 18px)),
    repeating-linear-gradient(176deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, #5a3520, #7a4a2c 30%, #5e3822 70%, #4a2b19);
}
.drum-ld2 .drum-logo { color: #f2ead6; font-family: var(--font); font-style: italic; letter-spacing: 0.04em; }
.drum-ld2 .drum-voice { width: 56px; }
.drum-ld2 .drum-knobs ws-knob { width: 52px; }
.drum-ld2 ws-fader { margin-top: 2px; }
.drum-ld2 .drum-pad { background: linear-gradient(180deg, #efe6cf, #cbbf9f); color: #4a3e2b; box-shadow: 0 3px 0 #0b0c0d, inset 0 1px 0 #fff; }
.drum-ld2 .drum-pad.selected { box-shadow: 0 3px 0 #0b0c0d, inset 0 0 0 2px #c0392b; }