/* ==========================================================
   Beatfox – Drumcomputer
   ========================================================== */

:root {
  --bg: #000;
  --panel: #0b0d07;
  --line: #1f2614;
  --text: #c9d6a3;
  --text-dim: #5e6b3d;
  --danger: #ff6b4a;

  --led: #c6ff00;               /* gelb-grün */
  --led-dim: #1a2205;           /* Zelle aus */
  --led-dim-beat: #222c08;      /* Zelle aus, auf Zählzeit 1/5/9/13 */
  --led-glow: 0 0 6px #c6ff00, 0 0 16px rgba(198, 255, 0, .55);

  /* Feste Design-Maße – das ganze Gerät wird per --scale (main.js)
     so verkleinert, dass es immer komplett ins Fenster passt */
  --cell: 37px;
  --gap: 4px;
  --group-gap: 10px;
  --label-w: 102px;
  --play-w: 20px;
  --fader-w: 120px;
  --knob: 24px;
  --control-w: 170px;
  --tile-w: 40px;
  --tile-h: 46px;
  --fit-margin: 16px;

  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Consolas", "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }

/* hidden gilt auch für Elemente, denen hier ein display gegeben wird */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

/* ---------- Gehäuse ---------- */

/* Immer mittig im Fenster, skaliert statt umbrochen oder gescrollt */
.machine {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ---------- Soundfont-Leiste ---------- */

.soundbar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.field__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--text-dim);
}

.select {
  max-width: 100%;
  min-width: 200px;
  height: 34px;
  padding: 0 32px 0 10px;
  -webkit-appearance: none;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--led) 50%) calc(100% - 15px) 50% / 5px 5px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--led) 50%) calc(100% - 10px) 50% / 5px 5px no-repeat,
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.select:hover,
.select:focus-visible {
  border-color: var(--led);
  outline: none;
}
.select option { background: #0f1209; color: var(--text); }

.soundbar__status {
  margin-left: auto;
  padding-bottom: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}
.soundbar__status.is-loading { color: var(--led); }
.soundbar__status.is-error { color: var(--danger); }

/* Projekt laden/speichern, so hoch wie die Auswahllisten */
.project {
  display: flex;
  gap: 8px;
}
.file-btn {
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: 10px var(--mono);
  letter-spacing: .2em;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.file-btn svg { width: 16px; height: 16px; fill: currentColor; }
.file-btn:hover,
.file-btn:focus-visible {
  border-color: var(--led);
  color: var(--led);
  outline: none;
}

/* Logo links, Pattern/Step mittig, Sprung-Einstellung rechts */
.machine__header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.machine__header .logo { justify-self: start; }
.machine__header .jump { justify-self: end; }

.logo {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--text);
}
.logo span {
  color: var(--led);
  text-shadow: 0 0 10px rgba(198, 255, 0, .6);
}

.step-display {
  font-family: var(--mono);
  display: flex;
  gap: 10px;
  align-items: center;
}
.step-display__label { font-size: 11px; letter-spacing: .2em; color: var(--text-dim); }
.step-display__label--gap { margin-left: 18px; }
.step-display__value {
  font-size: 22px;
  min-width: 2ch;
  text-align: right;
  color: var(--led);
  text-shadow: 0 0 8px rgba(198, 255, 0, .5);
}

/* ---------- Sprung je Pattern ---------- */

.jump {
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Wert mit kleinen Pfeilen zum Verstellen */
.spinner {
  display: flex;
  align-items: center;
  gap: 2px;
}
.spinner__value {
  min-width: 2ch;
  text-align: center;
  font-size: 22px;
  color: var(--led);
  text-shadow: 0 0 8px rgba(198, 255, 0, .5);
  transition: color .15s, text-shadow .15s;
}
.spinner__btn {
  width: 18px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.spinner__btn svg { width: 14px; height: 14px; fill: currentColor; }
.spinner__btn:hover:enabled,
.spinner__btn:focus-visible {
  border-color: var(--line);
  color: var(--led);
  outline: none;
}
.spinner__btn:disabled { color: #222a10; cursor: default; }

/* Part: ein Buchstabe, daneben "+" zum Anlegen (mit Rahmen, damit es
   sich vom Pfeil abhebt) */
.spinner__value--part { min-width: 1.5ch; }
.spinner__btn--add {
  width: 24px;
  height: 24px;
  margin-left: -4px;
  border-color: var(--line);
}
.spinner__btn--add:disabled { border-color: #12160b; }

/* Kein Sprung eingestellt: Werte gedimmt */
.jump.is-off .spinner__value {
  color: var(--text-dim);
  text-shadow: none;
}

/* Fortschritt während des Abspielens, z. B. "2/3" */
.jump__progress {
  min-width: 5ch;
  font-size: 12px;
  color: var(--led);
  text-shadow: 0 0 6px rgba(198, 255, 0, .5);
}

/* ---------- Pattern ---------- */

/* Pattern mittig, links daneben die Groove-Bibliothek; die rechte Spalte
   bleibt leer und gleich breit, damit das Pattern mittig bleibt */
.pattern-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
}

.pattern-wrap {
  position: relative;
  grid-column: 2;
  display: flex;
  gap: 12px;
  padding: 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}

/* Ein Groove wird darübergezogen: Die Zellen zeigen schon das Ergebnis */
.pattern-wrap.is-drop-target {
  border-color: var(--led);
  box-shadow: 0 0 16px rgba(198, 255, 0, .35);
}
.pattern-wrap.is-drop-target::after {
  content: attr(data-drop);
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 10px;
  background: var(--panel);
  color: var(--led);
  font: 10px/16px var(--mono);
  letter-spacing: .25em;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(198, 255, 0, .6);
  pointer-events: none;
}

/* ---------- Groove-Bibliothek ---------- */

.library {
  --lib-w: 112px;
  justify-self: end;
  align-self: stretch;
  width: calc(var(--lib-w) + 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
}
.library__select {
  width: 100%;
  min-width: 0;
  padding-right: 24px;
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%, 0 0;
  font-size: 12px;
}

/* Typisches Tempo (und ggf. Swing), Klick übernimmt es */
.library__bpm {
  align-self: flex-start;
  padding: 2px 0;
  white-space: pre-line;
  text-align: left;
  line-height: 1.5;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font: 10px var(--mono);
  letter-spacing: .15em;
  cursor: pointer;
  transition: color .15s;
}
.library__bpm:hover,
.library__bpm:focus-visible {
  color: var(--led);
  outline: none;
}
.library__bpm.is-current { color: var(--led); cursor: default; }

.library__tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

/* Kachel je Stufe: Name und Mini-Pattern; ziehen, anhören, übernehmen */
.groove {
  width: 100%;
  padding: 6px 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-dim);
  font: 9px var(--mono);
  letter-spacing: .2em;
  text-align: left;
  cursor: grab;
  touch-action: none; /* Ziehen legt den Groove aufs Pattern */
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.groove:hover,
.groove:focus-visible {
  border-color: var(--led);
  color: var(--led);
  outline: none;
}
.groove__level { color: var(--led); }
.groove__mini { display: block; width: 100%; height: auto; }
.groove__mini rect { fill: var(--led-dim); }
.groove__mini rect.is-beat { fill: var(--led-dim-beat); }
.groove__mini rect.is-on { fill: var(--led); }
.groove__mini rect.groove__head { fill: rgba(242, 255, 176, .35); }
.groove.is-auditioning {
  border-color: var(--led);
  box-shadow: 0 0 12px rgba(198, 255, 0, .35);
}

/* Gezogene Kachel, folgt dem Zeiger (liegt außerhalb des skalierten Geräts) */
.groove-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  margin: 0;
  background: var(--panel);
  border-color: var(--led);
  color: var(--led);
  pointer-events: none;
  transform-origin: 0 0;
  opacity: .9;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .8), 0 0 14px rgba(198, 255, 0, .5);
}
.is-dragging-groove,
.is-dragging-groove * { cursor: grabbing !important; }

/* Links Namen, rechts Zellen; zweite Zeile: Lauflicht unter den Zellen */
.pattern {
  display: grid;
  grid-template-columns: auto auto;
  gap: 7px;
  user-select: none;
  -webkit-user-select: none;
}
.pattern__heads,
.pattern__page,
.pattern__mixer {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Beim Pattern-Wechsel seitlich abschneiden (oben/unten Platz fürs Leuchten),
   beim Part-Wechsel oben und unten */
.pattern__viewport { position: relative; }
.pattern__viewport.is-sliding { clip-path: inset(-24px 0); }
.pattern__viewport.is-sliding.is-vertical { clip-path: inset(0 -24px); }
.pattern__page--leaving {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

/* Anhören-Button vor dem Namen */
.row__play {
  width: var(--play-w);
  height: var(--play-w);
  flex: 0 0 var(--play-w);
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.row__play svg { width: 60%; height: 60%; margin-left: 10%; fill: currentColor; }
.row__play:hover,
.row__play:focus-visible {
  border-color: var(--led);
  color: var(--led);
  outline: none;
}
.row__play:active { box-shadow: var(--led-glow); }

/* Instrumentenname (anklickbar → Sample-Auswahl) */
.row__label {
  width: var(--label-w);
  flex: 0 0 var(--label-w);
  height: var(--cell);
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.row__label:hover,
.row__label[aria-expanded="true"] {
  border-color: var(--led);
  color: var(--led);
}
.row__name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.row__sample {
  max-width: 100%;
  font-size: 9px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zellen */
.cell {
  position: relative;
  overflow: hidden;
  width: var(--cell);
  height: var(--cell);
  flex: 0 0 var(--cell);
  padding: 0;
  border: 1px solid #2c3910;
  border-radius: 4px;
  background: var(--led-dim);
  cursor: pointer;
  touch-action: none; /* senkrechtes Ziehen stellt die Anschlagstärke ein */
  transition: background-color .08s, box-shadow .08s;
}
/* Füllung von unten: Höhe = Anschlagstärke (--level 0…1, aus main.js),
   bei 1 nur ein Streifen am Boden, bei 127 ganz gefüllt */
.cell::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(4px + (100% - 4px) * var(--level, 0));
  background: var(--led);
  opacity: 0;
  transition: height .05s, background-color .08s, opacity .08s;
}
/* Nach jeder 4er-Gruppe etwas mehr Abstand */
.cell[data-step="4"],
.cell[data-step="8"],
.cell[data-step="12"] {
  margin-left: calc(var(--group-gap) - var(--gap));
}
.cell.is-beat { background: var(--led-dim-beat); }
.cell:hover { border-color: var(--led); }

/* Leuchten wächst mit der Anschlagstärke */
.cell.is-on {
  border-color: var(--led);
  box-shadow:
    0 0 calc(2px + 4px * var(--level, 1)) rgba(198, 255, 0, calc(.5 + .5 * var(--level, 1))),
    0 0 calc(6px + 10px * var(--level, 1)) rgba(198, 255, 0, calc(.15 + .4 * var(--level, 1)));
}
.cell.is-on::before { opacity: 1; }

/* Laufender Zeiger: aktuelle Spalte */
.cell.is-current {
  border-color: rgba(198, 255, 0, .8);
  background: #3a4a0f;
}
.cell.is-on.is-current {
  box-shadow: 0 0 10px #e6ff6a, 0 0 26px rgba(198, 255, 0, .9);
}
.cell.is-on.is-current::before { background: #f2ffb0; }

/* Während die Anschlagstärke gezogen wird */
.is-adjusting,
.is-adjusting * { cursor: ns-resize !important; }

/* Lauflicht-LEDs unter dem Pattern */
.led {
  width: var(--cell);
  flex: 0 0 var(--cell);
  height: 7px;
  border-radius: 4px;
  background: var(--led-dim);
  transition: background-color .05s, box-shadow .05s;
}
.led[data-step="4"],
.led[data-step="8"],
.led[data-step="12"] {
  margin-left: calc(var(--group-gap) - var(--gap));
}
.led.is-current {
  background: var(--led);
  box-shadow: var(--led-glow);
}

/* ---------- Mixer ---------- */

/* Dritte Spalte neben den Zellen, auf Höhe der Zeilen; ausgeblendet
   entsteht die Spalte gar nicht erst */
.pattern__mixer {
  grid-column: 3;
  grid-row: 1;
  margin-left: 5px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.pattern__mixer .row {
  height: var(--cell);
  gap: 10px;
}

/* Waagrechter Schieberegler, gefüllt bis zur Kappe */
.fader {
  -webkit-appearance: none;
  appearance: none;
  width: var(--fader-w);
  height: 6px;
  margin: 0;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: linear-gradient(to right,
    #4d6510 0 calc(6px + (100% - 12px) * var(--level, 1)),
    var(--led-dim) 0);
  outline: none;
  cursor: pointer;
}
.fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 24px;
  border-radius: 3px;
  background: linear-gradient(to right, transparent 5px, #3a4a0f 5px 7px, transparent 7px), var(--led);
  box-shadow: var(--led-glow);
  cursor: pointer;
}
.fader::-moz-range-thumb {
  width: 12px;
  height: 24px;
  border: none;
  border-radius: 3px;
  background: linear-gradient(to right, transparent 5px, #3a4a0f 5px 7px, transparent 7px), var(--led);
  box-shadow: var(--led-glow);
  cursor: pointer;
}
.fader:hover,
.fader:focus-visible { border-color: var(--led); }

.fader__value {
  min-width: 3ch;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--led);
}
.fader__value.is-off { color: var(--text-dim); }

/* Gruppen der Drehregler: EQ (LO MID HI) und Sends (REV DLY) */
.mixer__group {
  display: flex;
  gap: 6px;
  margin-left: 6px;
}

/* Drehregler: Ring mit Bogen (--arc-from … --arc-to, 0–270°, aus main.js),
   innen eine Kappe mit Zeiger (--angle) */
.knob {
  position: relative;
  width: var(--knob);
  height: var(--knob);
  flex: 0 0 var(--knob);
  border-radius: 50%;
  background: conic-gradient(from 225deg,
    #2c3910 0 var(--arc-from, 0deg),
    var(--led) var(--arc-from, 0deg) var(--arc-to, 0deg),
    #2c3910 var(--arc-to, 0deg) 270deg,
    transparent 270deg);
  cursor: ns-resize;
  touch-action: none; /* senkrechtes Ziehen verstellt den Regler */
  outline: none;
}
.knob::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #1c2410, #0f1309);
  border: 1px solid #2c3910;
  transition: border-color .15s;
}
.knob::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 5px;
  width: 2px;
  height: calc(50% - 5px);
  border-radius: 1px;
  background: var(--text-dim);
  transform-origin: 50% 100%;
  transform: rotate(var(--angle, -135deg));
}
.knob.is-on::after {
  background: var(--led);
  box-shadow: 0 0 4px rgba(198, 255, 0, .8);
}
.knob:hover::before { border-color: var(--led); }
.knob:focus-visible { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--led); }

/* Beschriftung der Spalten auf Höhe des Lauflichts; zeigt beim Drehen
   kurz den Wert. Die Zeile bleibt so hoch wie das Lauflicht. */
.pattern__mixer-foot {
  grid-column: 3;
  grid-row: 2;
  margin-left: 5px;
  padding-left: 12px;
  border-left: 1px solid transparent;
}
.pattern__mixer-foot .row {
  height: 7px;
  gap: 10px;
}
.mixer__label {
  width: var(--knob);
  flex: 0 0 var(--knob);
  font: 9px/7px var(--mono);
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
  color: var(--text-dim);
}
.mixer__label--fader {
  width: var(--fader-w);
  flex-basis: var(--fader-w);
  letter-spacing: .25em;
}
.mixer__label.is-value {
  color: var(--led);
  letter-spacing: 0;
}

/* Griffe an den Rändern des Patterns zum Ein-/Ausblenden: links die
   Grooves, rechts der Mixer */
.panel-toggle {
  width: 26px;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-dim);
  font: 10px var(--mono);
  letter-spacing: .25em;
  cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.panel-toggle span { writing-mode: vertical-rl; }
.panel-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.panel-toggle:hover,
.panel-toggle:focus-visible {
  border-color: var(--led);
  color: var(--led);
  outline: none;
}
.panel-toggle.is-active {
  color: var(--led);
  border-color: #3d4f12;
  box-shadow: 0 0 10px rgba(198, 255, 0, .2);
}
.panel-toggle.is-active svg { filter: drop-shadow(0 0 4px rgba(198, 255, 0, .7)); }

/* ---------- Pattern-Navigation & Transport ---------- */

/* Außen Tempo und Gesamtlautstärke; gleich breite Seiten halten den
   Transport mittig */
.transport-bar {
  width: 100%;
  display: grid;
  grid-template-columns: var(--control-w) 1fr auto 1fr var(--control-w);
  align-items: center;
  gap: 22px;
}
.transport-bar__side {
  display: flex;
  gap: 22px;
}
.transport-bar__side--left { justify-content: flex-end; }
.tool-group {
  display: flex;
  gap: 10px;
}

.transport {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn {
  width: 64px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.btn svg { width: 24px; height: 24px; fill: currentColor; }
.btn:hover:enabled { border-color: var(--led); color: var(--text); }
.btn:focus-visible { outline: 2px solid var(--led); outline-offset: 2px; }
.btn.is-active {
  color: var(--led);
  border-color: var(--led);
  box-shadow: 0 0 12px rgba(198, 255, 0, .35);
}

/* Kleinere Knöpfe rund um den Transport */
.btn--tool { width: 50px; }
.btn--tool svg { width: 21px; height: 21px; }
.btn:disabled {
  color: #222a10;
  cursor: default;
}

/* Leuchten nur, wenn sie etwas tun können (Pfeile, Einfügen) */
.btn--lit:enabled {
  color: var(--led);
  border-color: #3d4f12;
  box-shadow: 0 0 10px rgba(198, 255, 0, .2);
}
.btn--lit:enabled svg { filter: drop-shadow(0 0 4px rgba(198, 255, 0, .7)); }
.btn--lit:hover:enabled {
  color: var(--led);
  border-color: var(--led);
  box-shadow: 0 0 14px rgba(198, 255, 0, .4);
}

/* Mit Shift fügen die Pfeile eine Kopie ein – kleines "+" als Hinweis */
.btn--arrow { position: relative; }
.transport-bar.is-shift .btn--arrow::after {
  content: "+";
  position: absolute;
  top: 4px;
  right: 6px;
  font: 700 13px/1 var(--mono);
  color: var(--led);
  text-shadow: 0 0 6px rgba(198, 255, 0, .8);
}

/* Löschen: rot beim Überfahren, pulsiert, solange es auf Bestätigung wartet */
.btn--danger:hover:enabled { color: var(--danger); border-color: var(--danger); }
.btn--danger.is-armed {
  color: var(--danger);
  border-color: var(--danger);
  animation: armed-pulse .5s ease-in-out infinite alternate;
}
.btn--danger.is-armed svg { filter: drop-shadow(0 0 4px rgba(255, 107, 74, .8)); }
@keyframes armed-pulse {
  from { box-shadow: 0 0 4px rgba(255, 107, 74, .25); }
  to   { box-shadow: 0 0 16px rgba(255, 107, 74, .7); }
}

/* ---------- Tempo & Gesamtlautstärke ---------- */

/* Oben Name und Wert, darunter der Regler */
.control {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
}
.control__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.control__label,
.control__unit {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--text-dim);
}
.control__label { margin-right: auto; }
.control__value {
  min-width: 3ch;
  text-align: right;
  font-size: 22px;
  color: var(--led);
  text-shadow: 0 0 8px rgba(198, 255, 0, .5);
}
.control__value.is-off {
  color: var(--text-dim);
  text-shadow: none;
}

/* Tempo und darunter, etwas kleiner, der Swing; die Einheiten gleich
   breit, damit die Werte untereinander stehen */
.control-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.control-stack .control__unit { min-width: 2.6em; }
.control--small { gap: 9px; }
.control--small .control__value { font-size: 16px; }

/* Gefüllt bis zum Knopf (--level 0…1, aus main.js) */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: linear-gradient(to right,
    #4d6510 0 calc(9px + (100% - 18px) * var(--level, 0)),
    var(--led-dim) 0);
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: var(--led-glow);
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--led);
  box-shadow: var(--led-glow);
  cursor: pointer;
}
.slider:hover,
.slider:focus-visible { border-color: var(--led); }

/* ---------- Sequencer ---------- */

.song {
  position: relative;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .15s, box-shadow .15s;
}

/* Eine .bfx-Datei wird von außen darübergezogen */
.song.is-drop-target {
  border-color: var(--led);
  box-shadow: 0 0 16px rgba(198, 255, 0, .35);
}
.song.is-drop-target::after {
  content: "PROJEKT LADEN";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(11, 13, 7, .88);
  color: var(--led);
  font: 12px var(--mono);
  letter-spacing: .25em;
  text-shadow: 0 0 8px rgba(198, 255, 0, .6);
  pointer-events: none;
}

/* Griff über die ganze Breite; geschlossen ist er alles, was zu sehen ist */
.song-toggle {
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text-dim);
  font: 10px var(--mono);
  letter-spacing: .25em;
  cursor: pointer;
  transition: color .15s;
}
.song-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.song-toggle__chevron { transition: transform .2s; }
.song-toggle:hover,
.song-toggle:focus-visible {
  color: var(--led);
  outline: none;
}
.song.is-open .song-toggle { color: var(--led); }
.song.is-open .song-toggle svg { filter: drop-shadow(0 0 4px rgba(198, 255, 0, .7)); }
.song.is-open .song-toggle__chevron { transform: rotate(180deg); }

/* Beim Auf- und Zuklappen wächst bzw. schrumpft die Höhe */
.song__panel.is-animating { overflow: hidden; }

.song__body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 15px 4px;
  border-top: 1px solid var(--line);
}

/* Die Zeile mit dem Ablauf; trägt nicht zur Breite des Geräts bei, sondern
   scrollt waagrecht. Oben und unten Platz für die Pfeile des gewählten Eintrags. */
.song__strip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  contain: inline-size;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: calc(var(--tile-h) + 40px);
  padding: 20px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #3d4f12 transparent;
  outline: none;
}
.song__hint {
  font: 12px var(--mono);
  color: var(--text-dim);
  white-space: nowrap;
}

.song__item {
  position: relative;
  flex: 0 0 auto;
}
.song__tile {
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--led-dim);
  border: 1px solid #2c3910;
  border-radius: 4px;
  color: var(--led);
  font: 22px var(--mono);
  text-shadow: 0 0 8px rgba(198, 255, 0, .5);
  cursor: grab;
  touch-action: none; /* Ziehen verschiebt */
  transition: border-color .15s, background-color .08s, box-shadow .08s;
}
.song__tile:hover { border-color: var(--led); }
.song__tile:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
.song__item.is-selected .song__tile {
  border-color: var(--led);
  box-shadow: 0 0 0 1px var(--led), 0 0 12px rgba(198, 255, 0, .35);
}
/* Eintrag, der gerade erklingt */
.song__item.is-playing .song__tile {
  background: var(--led);
  color: var(--panel);
  text-shadow: none;
  box-shadow: 0 0 10px #e6ff6a, 0 0 24px rgba(198, 255, 0, .7);
}
.song__item.is-dragging { opacity: .25; }

/* Pfeile über und unter dem gewählten Eintrag: Part weiterschalten */
.song__arrow {
  position: absolute;
  left: 50%;
  width: 30px;
  height: 18px;
  margin-left: -15px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .15s;
}
.song__arrow svg { width: 16px; height: 16px; fill: currentColor; }
.song__arrow--up { bottom: 100%; }
.song__arrow--down { top: 100%; }
.song__arrow:hover { color: var(--led); }

/* Einfügestelle beim Ziehen */
.song__marker {
  position: absolute;
  top: 15px;
  width: 3px;
  height: calc(var(--tile-h) + 10px);
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--led);
  box-shadow: var(--led-glow);
  pointer-events: none;
}

/* Gezogener Buchstabe, folgt dem Zeiger (liegt außerhalb des skalierten Geräts) */
.song__ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  margin: 0;
  pointer-events: none;
  transform-origin: 0 0;
  opacity: .9;
  border-color: var(--led);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .8), 0 0 14px rgba(198, 255, 0, .5);
}
/* Aus der Zeile gezogen: wird beim Loslassen entfernt */
.song__ghost.is-remove {
  opacity: .75;
  border-color: var(--danger);
  color: var(--danger);
  text-shadow: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .8), 0 0 14px rgba(255, 107, 74, .6);
}
.song__ghost.is-remove::after {
  content: "×";
  position: absolute;
  top: -9px;
  right: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: #000;
  font: 700 14px/18px var(--mono);
  text-align: center;
}
.is-dragging-song,
.is-dragging-song * { cursor: grabbing !important; }

.song__tools {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.btn--small { width: 40px; height: 40px; }
.btn--small svg { width: 19px; height: 19px; }

/* ---------- Sample-Auswahl ---------- */

.sample-picker {
  position: absolute;
  z-index: 10;
  min-width: 220px;
  max-height: min(320px, calc(100vh - 16px));
  overflow-y: auto;
  padding: 8px;
  background: #0f1209;
  border: 1px solid var(--led);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .8), 0 0 14px rgba(198, 255, 0, .15);
}
.sample-picker__title {
  padding: 4px 8px 8px;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.sample-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sample-picker__item {
  display: block;
  width: 100%;
  padding: 7px 8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.sample-picker__item:hover,
.sample-picker__item:focus-visible {
  background: var(--led-dim-beat);
  color: var(--led);
  outline: none;
}
.sample-picker__item.is-selected {
  color: var(--led);
}
.sample-picker__item.is-selected .sample-picker__name::before {
  content: "● ";
}
.sample-picker__name {
  display: block;
}
.sample-picker__meta {
  display: block;
  margin-top: 1px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}
/* Export: je Eintrag ein Knopf für MIDI und WAV – klicken oder herausziehen */
.export-menu { min-width: 320px; }
.export-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 6px 8px;
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
}
.export-item:hover { background: var(--led-dim-beat); }
.export-item__text { flex: 1; min-width: 0; }
.export-btn {
  padding: 6px 9px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font: 10px var(--mono);
  letter-spacing: .15em;
  cursor: grab;
  transition: border-color .15s, color .15s;
}
.export-btn:active { cursor: grabbing; }
.export-btn:hover:enabled,
.export-btn:focus-visible {
  border-color: var(--led);
  color: var(--led);
  outline: none;
}
.export-btn:disabled { color: #2c3910; cursor: default; }
/* WAV wird noch gerechnet: Klick geht schon, Ziehen erst danach */
.export-btn.is-busy {
  color: var(--text-dim);
  cursor: progress;
  animation: export-busy 1s ease-in-out infinite alternate;
}
.file-btn.is-busy { animation: export-busy .6s ease-in-out infinite alternate; }
@keyframes export-busy {
  to { border-color: var(--led); }
}
.export-menu__hint {
  margin-top: 6px;
  padding: 8px 8px 2px;
  border-top: 1px solid var(--line);
  font: 10px/1.6 var(--mono);
  color: var(--text-dim);
}

/* Part-Buchstabe und Pattern-Nummer im Kopf: als MIDI herausziehbar */
.drag-out { cursor: grab; }
.drag-out:hover {
  text-decoration: underline dotted rgba(198, 255, 0, .5);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.sample-picker__empty {
  padding: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Eigener Klang: erster Eintrag der Auswahl, daneben der Stift zum Bearbeiten */
.sample-picker__custom {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.sample-picker__custom .sample-picker__item { flex: 1; min-width: 0; }
.sample-picker__edit {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sample-picker__edit svg { width: 16px; height: 16px; fill: currentColor; }
.sample-picker__edit:hover,
.sample-picker__edit:focus-visible {
  border-color: var(--led);
  color: var(--led);
  outline: none;
}

/* Zeile spielt einen eigenen Klang */
.row__label.is-custom .row__sample { color: var(--led); }
.row__label.is-custom .row__sample::before { content: "● "; }

/* ---------- Sound-Editor (eigener Klang) ---------- */

.sound-editor {
  --marker: #ffb020;
  width: min(760px, calc(100vw - 32px));
  padding: 16px;
  background: #0f1209;
  border: 1px solid var(--led);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .9), 0 0 18px rgba(198, 255, 0, .15);
}
.sound-editor::backdrop { background: rgba(0, 0, 0, .7); }
.sound-editor:focus { outline: none; }

.se__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.se__title {
  font: 11px var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.se__name {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--led);
  font: inherit;
  font-size: 14px;
}
.se__name:hover,
.se__name:focus-visible {
  border-color: var(--led);
  outline: none;
}
.se__close {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
}
.se__close svg { width: 20px; height: 20px; fill: currentColor; }
.se__close:hover,
.se__close:focus-visible {
  border-color: var(--line);
  color: var(--led);
  outline: none;
}

/* Waveform mit Markern, Abspielposition und Aufnahme-Anzeige */
.se__wave {
  position: relative;
  height: 180px;
  overflow: hidden;
  background:
    linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat,
    #070905;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: text;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .15s, box-shadow .15s;
}
.se__wave.is-drop-target {
  border-color: var(--led);
  box-shadow: 0 0 16px rgba(198, 255, 0, .35);
}
.sound-editor.is-recording .se__wave { border-color: var(--danger); }
.se__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Abgedunkelt: außerhalb des markierten Bereichs */
.se__shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .62);
  pointer-events: none;
}
.se__shade--start { left: 0; }
.se__shade--end { right: 0; }

.se__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--marker);
  box-shadow: 0 0 6px rgba(255, 176, 32, .7);
  cursor: ew-resize;
  touch-action: none;
}
/* Breiterer Griffbereich – nach innen, damit er am Rand der Waveform nicht
   abgeschnitten wird – und ein Fähnchen oben */
.se__marker::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
}
.se__marker--start::before { left: -4px; }
.se__marker--end::before { right: -4px; }
.se__marker::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 14px;
  background: var(--marker);
}
.se__marker--start::after { left: 0; border-radius: 0 0 4px 0; }
.se__marker--end::after { right: 0; border-radius: 0 0 0 4px; }

.se__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #f2ffb0;
  box-shadow: 0 0 6px rgba(242, 255, 176, .8);
  pointer-events: none;
}

.se__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  font: 12px var(--mono);
  letter-spacing: .1em;
  text-align: center;
  color: var(--text-dim);
  pointer-events: none;
}

.se__rec {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 13px var(--mono);
  letter-spacing: .15em;
  color: var(--danger);
}
.se__rec-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--danger);
  animation: se-rec 1s ease-in-out infinite alternate;
}
@keyframes se-rec {
  from { opacity: 1; box-shadow: 0 0 10px rgba(255, 107, 74, .9); }
  to   { opacity: .3; box-shadow: none; }
}

/* Pegel: -60 … 0 dB */
.se__level {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  height: 10px;
  overflow: hidden;
  background: var(--led-dim);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.se__level-bar {
  height: 100%;
  background: linear-gradient(to right, #4d6510, var(--led) 75%, #ffd400 90%, var(--danger));
  clip-path: inset(0 100% 0 0);
}
.se__level-bar.is-clip { background: var(--danger); }

.se__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.se__time {
  margin-left: auto;
  font: 12px var(--mono);
  letter-spacing: .1em;
  color: var(--led);
}

.sound-editor .file-btn:disabled {
  border-color: var(--line);
  color: #2c3910;
  cursor: default;
}

/* Aufnahme: roter Punkt, während der Aufnahme STOPP mit Quadrat */
.se__record .se__icon-rec { fill: var(--danger); }
.se__icon-stop,
.sound-editor.is-recording .se__icon-rec { display: none; }
.sound-editor.is-recording .se__icon-stop { display: block; }
.sound-editor.is-recording .se__record {
  border-color: var(--danger);
  color: var(--danger);
  animation: armed-pulse .5s ease-in-out infinite alternate;
}

.se__icon-pause,
.sound-editor.is-playing .se__icon-play { display: none; }
.sound-editor.is-playing .se__icon-pause { display: block; }
.sound-editor.is-playing #sePlay {
  border-color: var(--led);
  color: var(--led);
}

.se__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.se__message {
  flex: 1;
  min-width: 0;
  font: 12px var(--mono);
  color: var(--danger);
}
.se__message.is-info { color: var(--text-dim); }
.se__remove:hover:enabled,
.se__remove:focus-visible {
  border-color: var(--danger);
  color: var(--danger);
}
.se__apply:enabled {
  border-color: #3d4f12;
  color: var(--led);
  box-shadow: 0 0 10px rgba(198, 255, 0, .2);
}
.se__apply:hover:enabled,
.se__apply:focus-visible {
  border-color: var(--led);
  box-shadow: 0 0 14px rgba(198, 255, 0, .4);
}

@media (max-width: 560px) {
  .se__title { display: none; }
  .se__wave { height: 140px; }
}