/* Vinyl mode: turntable (deck.js) next to the pads. Everything scoped under .deck-embed to stay clear of pad styles. */

#deckPane { flex: 1 1 0; min-width: 0; min-height: 0; }
#deckPane[hidden] { display: none; }
#stage.vinyl #grid { flex: 1 1 0; }
#btnVinyl svg { display: block; }

.deck-embed {
  --de-line: #45454c;
  --de-text: #d8d6d2;
  --de-orange: #e47828;
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px; border-radius: 8px;
  background: #1c1c1f;
  box-shadow: inset 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.35);
  color: var(--de-text);
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.de-wave { display: block; width: 100%; height: clamp(22px, 7vh, 40px); border-radius: 5px; background: #0e0e10; flex: none; }
.de-main { flex: 1 1 auto; min-height: 0; display: flex; gap: 6px; }
.de-platter { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.de-platter canvas { display: block; touch-action: none; cursor: grab; }
.de-platter canvas.grab { cursor: grabbing; }
.de-ctrl { flex: 0 0 clamp(58px, 18%, 96px); display: flex; flex-direction: column; gap: 5px; }
.de-ctrl .de-btn { flex: 1 1 0; min-height: 0; }
.de-bottom { flex: none; display: flex; gap: 6px; align-items: center; }

.de-btn {
  appearance: none; border: 1px solid var(--de-line); border-radius: 6px;
  background: linear-gradient(#38383e, #2a2a2f); color: var(--de-text);
  font: inherit; letter-spacing: .05em; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; touch-action: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 4px rgba(0,0,0,.4);
}
.de-btn:active, .de-btn.down { background: linear-gradient(#2a2a2f, #333338); box-shadow: 0 1px 3px rgba(0,0,0,.6) inset; }
.de-btn.on { color: #fff; border-color: var(--de-orange); }
.de-cut { border-color: #5a3a24; font-size: 14px; flex-grow: 1.6 !important; }
.de-cut.down { background: var(--de-orange); color: #1a1a1a; border-color: var(--de-orange); }
.de-led { width: 7px; height: 7px; border-radius: 50%; background: #4a2c18; box-shadow: 0 0 0 1px rgba(0,0,0,.5); flex: none; }
.de-btn.on .de-led { background: var(--de-orange); box-shadow: 0 0 8px var(--de-orange); }

.de-fader { --v: 1; position: relative; flex: 1 1 auto; min-width: 60px; height: clamp(30px, 8vh, 42px); touch-action: none; cursor: pointer; }
.de-fader::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: #0c0c0e; }
.de-fader .knob {
  position: absolute; top: 4px; bottom: 4px; width: 26px; left: calc(var(--v) * (100% - 26px));
  border-radius: 5px; border: 1px solid #55555c;
  background: linear-gradient(90deg, #4a4a50, #6a6a72 45%, #e47828 48%, #e47828 52%, #6a6a72 55%, #4a4a50);
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
}
.deck-embed select {
  flex: 0 1 40%; min-width: 0; height: clamp(30px, 8vh, 42px); border-radius: 6px; padding: 0 6px;
  background: #303035; color: var(--de-text); border: 1px solid var(--de-line); font: inherit; touch-action: manipulation;
}