/* ─────────────────────────────────────────────────────────────────────────
   DJ MIXER  –  Nanna edition  v3
   Target: iPad landscape 1024×768 + desktop
   NO color-mix(), NO dvh/dvw — Safari safe
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Share+Tech+Mono&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg:    #090909;
  --surf:  #111;
  --raise: #1a1a1a;
  --rim:   rgba(255,255,255,0.065);

  --a:    #ff1f30;
  --b:    #0d9dff;
  --ag:   rgba(255,31,48,0.5);
  --bg2:  rgba(13,157,255,0.5);

  --mute: #505050;
  --dim:  #333;

  --fh: 'Bebas Neue', sans-serif;
  --fm: 'Share Tech Mono', monospace;

  --vol-w: 56px;
  --cx:    260px;
  --xh:    62px;
  --abh:   52px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html, body {
  height: 100%; overflow: hidden;
  background: var(--bg);
  color: var(--mute);
  font-family: var(--fm);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* Deck ambient glow */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 45% 80% at 5%  40%, rgba(255,31,48,0.11),  transparent 70%),
    radial-gradient(ellipse 45% 80% at 95% 40%, rgba(13,157,255,0.11), transparent 70%);
}

/* LED ring idle pulse */
@keyframes ledPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}
.ring-a { animation: ledPulse 3.2s ease-in-out infinite; }
.ring-b { animation: ledPulse 3.2s ease-in-out infinite 1.6s; }

/* ══════════════════════════════════════════════════════════════════════════
   MASTER GRID
   5 cols: [vol-a 56px] [deck-a 1fr] [center 260px] [deck-b 1fr] [vol-b 56px]
   3 rows: [decks 1fr] [xfader 62px] [actions 52px]
   ══════════════════════════════════════════════════════════════════════════ */
.mixer {
  display: grid;
  grid-template-columns: var(--vol-w) 1fr var(--cx) 1fr var(--vol-w);
  grid-template-rows: 1fr var(--xh) var(--abh);
  height: 100vh;
  position: relative; z-index: 1;
}

/* Vol strips occupy row 1 only */
.vol-strip-a  { grid-column: 1; grid-row: 1; }
.deck-a       { grid-column: 2; grid-row: 1; }
.center-col   { grid-column: 3; grid-row: 1; }
.deck-b       { grid-column: 4; grid-row: 1; }
.vol-strip-b  { grid-column: 5; grid-row: 1; }
.xbar         { grid-column: 1 / -1; grid-row: 2; }
.action-bar   { grid-column: 1 / -1; grid-row: 3; }

/* ══════════════════════════════════════════════════════════════════════════
   VOL STRIPS  (col 1 and col 5)
   ══════════════════════════════════════════════════════════════════════════ */
.vol-strip-a,
.vol-strip-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #0c0c0c;
  padding: 14px 0;
  z-index: 2;
  position: relative;
}
.vol-strip-a {
  border-right: 1px solid var(--rim);
}
.vol-strip-b {
  border-left: 1px solid var(--rim);
}

.vol-tag {
  font-family: var(--fh); font-size: 15px; line-height: 1;
}
.vol-tag-a {
  color: var(--a); text-shadow: 0 0 8px var(--ag);
}
.vol-tag-b {
  color: var(--b); text-shadow: 0 0 8px var(--bg2);
}

/* Vertical fader track — vol strips */
.vol-strip-a .fader-track[data-fader^="channel"],
.vol-strip-b .fader-track[data-fader^="channel"] {
  position: relative;
  width: 6px;
  height: min(220px, calc(100vh - 180px));
  border-radius: 4px;
  background: linear-gradient(to bottom, #030303, #0d0d0d, #030303);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.05);
  cursor: pointer;
}
.vol-strip-a .fader-track[data-fader^="channel"] {
  background: linear-gradient(to bottom, #050505, rgba(255,31,48,0.15) 50%, #050505);
}
.vol-strip-b .fader-track[data-fader^="channel"] {
  background: linear-gradient(to bottom, #050505, rgba(13,157,255,0.15) 50%, #050505);
}
.vol-strip-a .fader-track[data-fader^="channel"]::before,
.vol-strip-b .fader-track[data-fader^="channel"]::before {
  content: ''; position: absolute;
  left: -9px; top: 50%; width: 26px; height: 1px;
  background: rgba(255,255,255,0.07);
}
.vol-strip-a .fader-track[data-fader^="channel"] .fader-handle,
.vol-strip-b .fader-track[data-fader^="channel"] .fader-handle {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 38px; height: 20px; border-radius: 5px;
  cursor: grab; touch-action: none;
  background: linear-gradient(to bottom,
    #1e1e1e 0%, #d8d8d8 12%, #f5f5f5 50%, #cacaca 88%, #1a1a1a 100%);
  box-shadow: 0 3px 12px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.55);
}
.vol-strip-a .fader-track[data-fader^="channel"] .fader-handle:active,
.vol-strip-b .fader-track[data-fader^="channel"] .fader-handle:active {
  cursor: grabbing;
}
.vol-strip-a .fader-handle::after,
.vol-strip-b .fader-handle::after {
  content: ''; position: absolute; top: 50%; left: 18%; right: 18%;
  height: 2px; border-radius: 1px; transform: translateY(-50%);
}
.vol-strip-a .fader-handle::after { background: var(--a); box-shadow: 0 0 5px var(--a); }
.vol-strip-b .fader-handle::after { background: var(--b); box-shadow: 0 0 5px var(--b); }

/* ══════════════════════════════════════════════════════════════════════════
   DECK CELLS  (col 2 and col 4)
   ══════════════════════════════════════════════════════════════════════════ */
.cell { background: var(--surf); }

.deck-a,
.deck-b {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  background: var(--surf);
}

/* Accent stripe along top of each deck cell */
.deck-a::before,
.deck-b::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
}
.deck-a::before { background: linear-gradient(90deg, transparent 5%, var(--a) 50%, transparent 95%); }
.deck-b::before { background: linear-gradient(90deg, transparent 5%, var(--b) 50%, transparent 95%); }

/* ── Jog zone ───────────────────────────────────────────────────────────── */
.jog-zone {
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: visible;
  width: 100%; height: 100%;
}

/* Jog ring wrapper */
.jog-ring {
  --js: min(320px, 72vh, 30vw);
  width: var(--js); height: var(--js);
  border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  filter: drop-shadow(0 0 28px var(--ag));
}
.ring-b { filter: drop-shadow(0 0 28px var(--bg2)); }

/* Playing state — LED ring goes solid bright */
.ring-a.is-playing { animation: none; filter: drop-shadow(0 0 44px rgba(255,31,48,0.9)); }
.ring-b.is-playing { animation: none; filter: drop-shadow(0 0 44px rgba(13,157,255,0.9)); }

/* ── Platter (turntable disc) ───────────────────────────────────────────── */
.platter {
  width: 100%; aspect-ratio: 1;
  border-radius: 50%; position: relative;
  overflow: hidden; cursor: grab; will-change: transform;
  background:
    radial-gradient(circle, #1d1a1a 0%, #151212 30%, transparent 30.2%),
    radial-gradient(circle, transparent 29.5%, #0a0a0a 29.5%, #0a0a0a 31%, transparent 31%),
    repeating-radial-gradient(circle, #111 0px, #111 2px, #1a1a1a 2px, #1a1a1a 6px);
  box-shadow:
    0 0 0 7px  rgba(0,0,0,0.6),
    0 0 0 9px  var(--a-ring, rgba(255,31,48,0.65)),
    0 0 0 11px rgba(0,0,0,0.4),
    0 0 40px   var(--a-glow, rgba(255,31,48,0.35)),
    0 0 80px   var(--a-glow2, rgba(255,31,48,0.12)),
    inset 0 6px 18px rgba(0,0,0,0.9),
    inset 0 -3px 8px rgba(0,0,0,0.6);
}
#turntable-b {
  --a-ring:  rgba(13,157,255,0.65);
  --a-glow:  rgba(13,157,255,0.35);
  --a-glow2: rgba(13,157,255,0.12);
}
.platter::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 52% 36% at 30% 24%, rgba(255,255,255,0.07), transparent 70%);
}
.platter::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: #050505; box-shadow: 0 0 0 1.5px #1e1e1e, 0 0 0 3px rgba(0,0,0,0.8);
  transform: translate(-50%,-50%); pointer-events: none;
}
.platter.is-scratching { cursor: grabbing; }

/* ── Speed knob ─────────────────────────────────────────────────────────── */
.knob-wrap {
  position: absolute; bottom: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer;
}
.knob-a { right: 16px; }
.knob-b { left: 16px; }
.knob {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 37% 32%, #272727, #0b0b0b);
  border: 1.5px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 14px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; cursor: pointer;
}
.knob::after {
  content: ''; position: absolute;
  top: 7px; left: 50%; width: 3px; height: 8px;
  border-radius: 2px; background: rgba(255,255,255,0.45); transform: translateX(-50%);
}
.knob-label { font-size: 7px; letter-spacing: 0.2em; color: var(--dim); }

/* ══════════════════════════════════════════════════════════════════════════
   CENTER COLUMN  (col 3)
   ══════════════════════════════════════════════════════════════════════════ */
.center-col {
  display: flex;
  flex-direction: column;
  background: #0c0c0c;
  border-left: 1px solid var(--rim);
  border-right: 1px solid var(--rim);
  z-index: 2;
  overflow: hidden;
}

/* ── LCD screens (two portrait screens side by side) ───────────────────── */
.center-screens {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  gap: 0;
}

.deck-lcd {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  background: #040a04;
  border-bottom: 1px solid rgba(0,210,60,0.1);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
  cursor: pointer;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 2px,
    rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 3px);
  transition: opacity .1s;
  overflow: hidden;
}
.deck-lcd:active { opacity: 0.7; }

/* Divider between the two LCDs */
.lcd-row-a {
  border-right: 1px solid rgba(0,210,60,0.07);
}

.lcd-id {
  font-family: var(--fh); font-size: 36px; line-height: 1; flex-shrink: 0;
}
.lcd-row-a .lcd-id { color: var(--a); text-shadow: 0 0 10px var(--ag); }
.lcd-row-b .lcd-id { color: var(--b); text-shadow: 0 0 10px var(--bg2); }

.lcd-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: center; }
.lcd-name {
  font-size: 10px; color: rgba(0,195,55,0.65);
  letter-spacing: 0.05em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
  max-width: 90px;
}
.lcd-hint { font-size: 8px; color: rgba(255,255,255,0.18); letter-spacing: 0.08em; text-align: center; }

/* ── Transport buttons row ──────────────────────────────────────────────── */
.center-transport {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  border-top: 1px solid var(--rim);
}

.transport {
  flex: 1;
  display: flex; flex-direction: row; gap: 4px;
  padding: 6px 8px;
  align-items: center;
}
.transport-a {
  border-right: 1px solid var(--rim);
}

.tbtn {
  flex: 1; padding: 6px 0; min-height: 38px;
  border-radius: 7px; border: 1.5px solid var(--rim);
  background: var(--raise); color: var(--mute);
  font-size: 14px; cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  transition: color .1s, border-color .1s, box-shadow .1s, transform .08s;
}
/* Play buttons get deck accent color */
.tbtn-a-play { color: rgba(255,68,68,0.75); border-color: rgba(255,31,48,0.3); }
.tbtn-b-play { color: rgba(68,157,255,0.75); border-color: rgba(13,157,255,0.3); }
.tbtn-a-play.is-active { color: var(--a); border-color: var(--a); box-shadow: 0 0 16px rgba(255,31,48,0.35); }
.tbtn-b-play.is-active { color: var(--b); border-color: var(--b); box-shadow: 0 0 16px rgba(13,157,255,0.35); }
.transport-a .tbtn:active { color: var(--a); border-color: var(--a); transform: scale(0.93); }
.transport-b .tbtn:active { color: var(--b); border-color: var(--b); transform: scale(0.93); }

/* ══════════════════════════════════════════════════════════════════════════
   CROSSFADER BAR  (row 2, full width)
   ══════════════════════════════════════════════════════════════════════════ */
.xbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 1.4rem;
  background: var(--bg);
  border-top: 1px solid var(--rim);
  border-bottom: 1px solid var(--rim);
}
.xbar-id {
  font-family: var(--fh); font-size: 28px; line-height: 1; flex-shrink: 0;
}
.xbar-a { color: var(--a); text-shadow: 0 0 14px var(--ag); }
.xbar-b { color: var(--b); text-shadow: 0 0 14px var(--bg2); }
.xbar-inner { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.xbar-label { font-size: 7.5px; letter-spacing: 0.26em; color: var(--dim); text-align: center; }

.fader-track[data-fader="crossfader"] {
  position: relative;
  width: 100%; height: 8px; border-radius: 4px;
  background: linear-gradient(to right, #050505, #0e0e0e, #050505);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.04);
  cursor: pointer;
}
.fader-track[data-fader="crossfader"]::before {
  content: ''; position: absolute;
  left: 50%; top: -8px; width: 1px; height: 24px;
  background: rgba(255,255,255,0.08); transform: translateX(-50%);
}
.fader-track[data-fader="crossfader"] .fader-handle {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 46px; border-radius: 5px;
  cursor: grab; touch-action: none;
  background: linear-gradient(to right,
    #202020 0%, #ddd 14%, #f5f5f5 50%, #ccc 86%, #1c1c1c 100%);
  box-shadow: 3px 0 14px rgba(0,0,0,0.85), inset 1px 0 0 rgba(255,255,255,0.5);
}
.fader-track[data-fader="crossfader"] .fader-handle:active { cursor: grabbing; }
.fader-track[data-fader="crossfader"] .fader-handle::after {
  content: ''; position: absolute;
  left: 50%; top: 14%; bottom: 14%; width: 2px; border-radius: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--a), var(--b));
}

/* ══════════════════════════════════════════════════════════════════════════
   ACTION BAR  (row 3)
   ══════════════════════════════════════════════════════════════════════════ */
.action-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 0 1.2rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #080808;
  border-top: 1px solid var(--rim);
}

.action-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 20px;
  border-radius: 8px; border: 1.5px solid var(--rim);
  background: var(--raise); color: var(--mute);
  font-family: var(--fh); font-size: 14px; letter-spacing: 0.1em;
  cursor: pointer; touch-action: manipulation;
  transition: color .12s, border-color .12s, box-shadow .12s;
}
.action-icon { font-size: 16px; }

.btn-open-bm:active {
  color: rgba(255,200,0,0.9); border-color: rgba(255,200,0,0.5);
  box-shadow: 0 0 14px rgba(255,200,0,0.22);
}

.btn-music { border-color: var(--rim); color: var(--dim); opacity: 0.45; }
.btn-music.is-on { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.3); opacity: 1; }


/* ══════════════════════════════════════════════════════════════════════════
   BEAT MACHINE DRAWER
   ══════════════════════════════════════════════════════════════════════════ */
.beat-machine {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none;
}
.beat-machine.is-open { pointer-events: auto; }

.bm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75);
  opacity: 0; transition: opacity .24s;
}
.beat-machine.is-open .bm-backdrop { opacity: 1; }

.bm-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  max-height: 72vh;
  background: #0e0e0e;
  border-top: 1px solid #232323;
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.beat-machine.is-open .bm-panel { transform: translateY(0); }

.bm-topbar {
  display: flex; align-items: center;
  padding: 12px 18px 8px;
  flex-shrink: 0;
  position: relative;
}
.bm-handle-pip {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.12);
}
.bm-title {
  font-family: var(--fh); font-size: 16px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.25); flex: 1;
}
.bm-close {
  background: none; border: 1.5px solid #2a2a2a; border-radius: 50%;
  width: 32px; height: 32px; color: #555; font-size: 12px;
  cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  transition: color .1s, border-color .1s;
}
.bm-close:active { color: white; border-color: #555; }

/* Content: drums left (55%) | right col: sfx + studio stacked */
.bm-content {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 6px 12px 16px;
  flex: 1; min-height: 0;
  overflow-y: auto;
  align-items: flex-start;
}

.bm-section--drums { flex: 0 0 55%; }

.bm-right {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 8px;
}

.bm-section {
  display: flex; flex-direction: column; gap: 6px;
}
.bm-section-head {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.bm-section-label {
  font-family: var(--fh); font-size: 11px; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.2); flex-shrink: 0;
}

/* ── Pack picker pills ──────────────────────────────────────────────────── */
.pack-picker {
  display: flex; gap: 5px; flex-wrap: wrap;
}
.pack-pill {
  font-family: var(--fh); font-size: 10px; letter-spacing: 0.1em;
  padding: 3px 9px; border-radius: 99px;
  border: 1.5px solid var(--rim);
  background: transparent; color: var(--dim);
  cursor: pointer; touch-action: manipulation;
  transition: color .1s, border-color .1s, background .1s;
}
.pack-pill.is-active {
  border-color: rgba(255,200,0,0.6);
  color: #ffcc00;
  background: rgba(255,200,0,0.08);
}

/* ── Beat machine grids ─────────────────────────────────────────────────── */
.bm-grid {
  display: grid; gap: 6px;
}
.bm-grid--drums {
  grid-template-columns: repeat(4, 1fr);
}
.bm-grid--sfx {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Pad colours — drums (12 pads) ─────────────────────────────────────── */
/* Formula: cbh = 26%c+74%#101010, cbl = 8%c+92%#060606, ct = 55%c+45%#555, cah = 88%c+12%white */

/* 1: #ff1f40 = (255,31,64) */
[data-grid="drums"] .pad:nth-child(1) {
  --c:    #ff1f40;
  --cb:   rgba(255,31,64,0.32);
  --cbh:  rgb(97,32,32);
  --cbl:  rgb(26,9,11);
  --ct:   rgb(187,62,64);
  --cg:   rgba(255,31,64,0.12);
  --cah:  rgb(255,57,84);
  --cag1: rgba(255,31,64,0.75);
  --cag2: rgba(255,31,64,0.35);
}
/* 2: #ff5500 = (255,85,0) */
[data-grid="drums"] .pad:nth-child(2) {
  --c:    #ff5500;
  --cb:   rgba(255,85,0,0.32);
  --cbh:  rgb(97,38,12);
  --cbl:  rgb(26,13,6);
  --ct:   rgb(187,93,45);
  --cg:   rgba(255,85,0,0.12);
  --cah:  rgb(255,96,31);
  --cag1: rgba(255,85,0,0.75);
  --cag2: rgba(255,85,0,0.35);
}
/* 3: #ff8800 = (255,136,0) */
[data-grid="drums"] .pad:nth-child(3) {
  --c:    #ff8800;
  --cb:   rgba(255,136,0,0.32);
  --cbh:  rgb(97,48,12);
  --cbl:  rgb(26,15,6);
  --ct:   rgb(187,122,45);
  --cg:   rgba(255,136,0,0.12);
  --cah:  rgb(255,152,31);
  --cag1: rgba(255,136,0,0.75);
  --cag2: rgba(255,136,0,0.35);
}
/* 4: #ffd000 = (255,208,0) */
[data-grid="drums"] .pad:nth-child(4) {
  --c:    #ffd000;
  --cb:   rgba(255,208,0,0.32);
  --cbh:  rgb(97,66,12);
  --cbl:  rgb(26,19,6);
  --ct:   rgb(187,160,45);
  --cg:   rgba(255,208,0,0.12);
  --cah:  rgb(255,225,31);
  --cag1: rgba(255,208,0,0.75);
  --cag2: rgba(255,208,0,0.35);
}
/* 5: #aaee00 = (170,238,0) */
[data-grid="drums"] .pad:nth-child(5) {
  --c:    #aaee00;
  --cb:   rgba(170,238,0,0.32);
  --cbh:  rgb(57,74,12);
  --cbl:  rgb(20,25,6);
  --ct:   rgb(132,176,45);
  --cg:   rgba(170,238,0,0.12);
  --cah:  rgb(180,240,31);
  --cag1: rgba(170,238,0,0.75);
  --cag2: rgba(170,238,0,0.35);
}
/* 6: #22cc55 = (34,204,85) */
[data-grid="drums"] .pad:nth-child(6) {
  --c:    #22cc55;
  --cb:   rgba(34,204,85,0.32);
  --cbh:  rgb(21,65,39);
  --cbl:  rgb(9,22,13);
  --ct:   rgb(57,150,84);
  --cg:   rgba(34,204,85,0.12);
  --cah:  rgb(60,225,106);
  --cag1: rgba(34,204,85,0.75);
  --cag2: rgba(34,204,85,0.35);
}
/* 7: #00ddaa = (0,221,170) */
[data-grid="drums"] .pad:nth-child(7) {
  --c:    #00ddaa;
  --cb:   rgba(0,221,170,0.32);
  --cbh:  rgb(12,69,57);
  --cbl:  rgb(6,24,20);
  --ct:   rgb(45,160,132);
  --cg:   rgba(0,221,170,0.12);
  --cah:  rgb(31,231,199);
  --cag1: rgba(0,221,170,0.75);
  --cag2: rgba(0,221,170,0.35);
}
/* 8: #00b8ff = (0,184,255) */
[data-grid="drums"] .pad:nth-child(8) {
  --c:    #00b8ff;
  --cb:   rgba(0,184,255,0.32);
  --cbh:  rgb(12,59,79);
  --cbl:  rgb(6,21,27);
  --ct:   rgb(45,140,187);
  --cg:   rgba(0,184,255,0.12);
  --cah:  rgb(31,193,255);
  --cag1: rgba(0,184,255,0.75);
  --cag2: rgba(0,184,255,0.35);
}
/* 9: #2255ff = (34,85,255) */
[data-grid="drums"] .pad:nth-child(9) {
  --c:    #2255ff;
  --cb:   rgba(34,85,255,0.32);
  --cbh:  rgb(21,34,79);
  --cbl:  rgb(9,13,27);
  --ct:   rgb(57,84,187);
  --cg:   rgba(34,85,255,0.12);
  --cah:  rgb(60,106,255);
  --cag1: rgba(34,85,255,0.75);
  --cag2: rgba(34,85,255,0.35);
}
/* 10: #8833ff = (136,51,255) */
[data-grid="drums"] .pad:nth-child(10) {
  --c:    #8833ff;
  --cb:   rgba(136,51,255,0.32);
  --cbh:  rgb(47,25,79);
  --cbl:  rgb(17,10,27);
  --ct:   rgb(113,73,187);
  --cg:   rgba(136,51,255,0.12);
  --cah:  rgb(151,75,255);
  --cag1: rgba(136,51,255,0.75);
  --cag2: rgba(136,51,255,0.35);
}
/* 11: #cc22aa = (204,34,170) */
[data-grid="drums"] .pad:nth-child(11) {
  --c:    #cc22aa;
  --cb:   rgba(204,34,170,0.32);
  --cbh:  rgb(65,21,57);
  --cbl:  rgb(22,9,20);
  --ct:   rgb(150,60,132);
  --cg:   rgba(204,34,170,0.12);
  --cah:  rgb(210,60,196);
  --cag1: rgba(204,34,170,0.75);
  --cag2: rgba(204,34,170,0.35);
}
/* 12: #ff2299 = (255,34,153) */
[data-grid="drums"] .pad:nth-child(12) {
  --c:    #ff2299;
  --cb:   rgba(255,34,153,0.32);
  --cbh:  rgb(97,25,57);
  --cbl:  rgb(26,9,20);
  --ct:   rgb(187,64,132);
  --cg:   rgba(255,34,153,0.12);
  --cah:  rgb(255,60,180);
  --cag1: rgba(255,34,153,0.75);
  --cag2: rgba(255,34,153,0.35);
}

/* ── Pad colours — sfx (9 pads) ────────────────────────────────────────── */

/* 1: #ff5533 = (255,85,51) */
[data-grid="sfx"] .pad:nth-child(1) {
  --c:    #ff5533;
  --cb:   rgba(255,85,51,0.32);
  --cbh:  rgb(97,38,24);
  --cbl:  rgb(26,13,10);
  --ct:   rgb(187,93,71);
  --cg:   rgba(255,85,51,0.12);
  --cah:  rgb(255,96,75);
  --cag1: rgba(255,85,51,0.75);
  --cag2: rgba(255,85,51,0.35);
}
/* 2: #ee1177 = (238,17,119) */
[data-grid="sfx"] .pad:nth-child(2) {
  --c:    #ee1177;
  --cb:   rgba(238,17,119,0.32);
  --cbh:  rgb(91,20,44);
  --cbl:  rgb(25,8,16);
  --ct:   rgb(177,51,107);
  --cg:   rgba(238,17,119,0.12);
  --cah:  rgb(240,41,140);
  --cag1: rgba(238,17,119,0.75);
  --cag2: rgba(238,17,119,0.35);
}
/* 3: #8833ff = (136,51,255) */
[data-grid="sfx"] .pad:nth-child(3) {
  --c:    #8833ff;
  --cb:   rgba(136,51,255,0.32);
  --cbh:  rgb(47,25,79);
  --cbl:  rgb(17,10,27);
  --ct:   rgb(113,73,187);
  --cg:   rgba(136,51,255,0.12);
  --cah:  rgb(151,75,255);
  --cag1: rgba(136,51,255,0.75);
  --cag2: rgba(136,51,255,0.35);
}
/* 4: #ffaa00 = (255,170,0) */
[data-grid="sfx"] .pad:nth-child(4) {
  --c:    #ffaa00;
  --cb:   rgba(255,170,0,0.32);
  --cbh:  rgb(97,56,12);
  --cbl:  rgb(26,19,6);
  --ct:   rgb(187,132,45);
  --cg:   rgba(255,170,0,0.12);
  --cah:  rgb(255,181,31);
  --cag1: rgba(255,170,0,0.75);
  --cag2: rgba(255,170,0,0.35);
}
/* 5: #11ddff = (17,221,255) */
[data-grid="sfx"] .pad:nth-child(5) {
  --c:    #11ddff;
  --cb:   rgba(17,221,255,0.32);
  --cbh:  rgb(16,69,79);
  --cbl:  rgb(7,24,27);
  --ct:   rgb(48,160,187);
  --cg:   rgba(17,221,255,0.12);
  --cah:  rgb(42,231,255);
  --cag1: rgba(17,221,255,0.75);
  --cag2: rgba(17,221,255,0.35);
}
/* 6: #55ff22 = (85,255,34) */
[data-grid="sfx"] .pad:nth-child(6) {
  --c:    #55ff22;
  --cb:   rgba(85,255,34,0.32);
  --cbh:  rgb(38,74,21);
  --cbl:  rgb(13,25,9);
  --ct:   rgb(84,176,57);
  --cg:   rgba(85,255,34,0.12);
  --cah:  rgb(106,255,60);
  --cag1: rgba(85,255,34,0.75);
  --cag2: rgba(85,255,34,0.35);
}
/* 7: #ff2266 = (255,34,102) */
[data-grid="sfx"] .pad:nth-child(7) {
  --c:    #ff2266;
  --cb:   rgba(255,34,102,0.32);
  --cbh:  rgb(97,25,39);
  --cbl:  rgb(26,9,15);
  --ct:   rgb(187,64,102);
  --cg:   rgba(255,34,102,0.12);
  --cah:  rgb(255,60,122);
  --cag1: rgba(255,34,102,0.75);
  --cag2: rgba(255,34,102,0.35);
}
/* 8: #2299ff = (34,153,255) */
[data-grid="sfx"] .pad:nth-child(8) {
  --c:    #2299ff;
  --cb:   rgba(34,153,255,0.32);
  --cbh:  rgb(21,51,79);
  --cbl:  rgb(9,18,27);
  --ct:   rgb(57,122,187);
  --cg:   rgba(34,153,255,0.12);
  --cah:  rgb(60,170,255);
  --cag1: rgba(34,153,255,0.75);
  --cag2: rgba(34,153,255,0.35);
}
/* 9: #ffee33 = (255,238,51) */
[data-grid="sfx"] .pad:nth-child(9) {
  --c:    #ffee33;
  --cb:   rgba(255,238,51,0.32);
  --cbh:  rgb(97,74,24);
  --cbl:  rgb(26,25,10);
  --ct:   rgb(187,176,71);
  --cg:   rgba(255,238,51,0.12);
  --cah:  rgb(255,241,75);
  --cag1: rgba(255,238,51,0.75);
  --cag2: rgba(255,238,51,0.35);
}

/* ── Pad base style ─────────────────────────────────────────────────────── */
.pad {
  --c:    #444;
  --cb:   rgba(68,68,68,0.32);
  --cbh:  #1a1a1a;
  --cbl:  #0d0d0d;
  --ct:   #888;
  --cg:   rgba(68,68,68,0.12);
  --cah:  #ccc;
  --cag1: rgba(68,68,68,0.75);
  --cag2: rgba(68,68,68,0.35);

  width: 100%;
  aspect-ratio: 1;
  min-width: 0; min-height: 0;
  border-radius: 14px;
  border: 2px solid var(--cb);
  background: radial-gradient(circle at 42% 37%, var(--cbh), var(--cbl));
  color: var(--ct);
  font-size: 9px; letter-spacing: 0.02em; line-height: 1.2;
  text-align: center; cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,0.05),
    inset 0 -4px 7px rgba(0,0,0,0.65),
    0 2px 6px rgba(0,0,0,0.55),
    0 0 12px var(--cg);
  transition: transform .08s, box-shadow .08s, background .08s;
  will-change: transform;
}
.pad.loading { opacity: 0.3; }
.pad.active {
  background: radial-gradient(circle at 40% 30%, var(--cah), var(--c));
  border-color: var(--c);
  color: rgba(0,0,0,0.7);
  transform: scale(0.87);
  box-shadow:
    0 0 28px var(--cag1),
    0 0 56px var(--cag2),
    0 0 7px var(--c),
    inset 0 1px 5px rgba(255,255,255,0.4);
}

/* ── Beat studio (REC + slots) ──────────────────────────────────────────── */
.bm-studio {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: 6px; border-top: 1px solid var(--rim);
}
.bs-row { display: flex; gap: 6px; }
.bs-btn {
  flex: 1;
  font-family: var(--fh); font-size: 12px; letter-spacing: 0.1em;
  padding: 8px 0; border-radius: 7px; border: 1.5px solid var(--rim);
  background: var(--raise); color: var(--mute);
  cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: color .12s, border-color .12s, box-shadow .12s;
}
.btn-rec { border-color: rgba(255,31,48,0.25); }
.rec-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--a); box-shadow: 0 0 6px var(--a); flex-shrink: 0;
}
.btn-rec.is-recording { color: var(--a); border-color: var(--a); box-shadow: 0 0 14px rgba(255,31,48,0.3); }
@keyframes recPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}
.btn-rec.is-recording .rec-dot { animation: recPulse 0.9s ease-in-out infinite; }
.btn-loop { border-color: rgba(80,220,120,0.2); }
.btn-loop.is-looping { color: #44dd88; border-color: #44dd88; box-shadow: 0 0 14px rgba(68,221,136,0.28); }

.bs-label {
  font-family: var(--fh); font-size: 8px; letter-spacing: 0.3em;
  color: rgba(255,255,255,0.1); text-align: center;
}
.bs-slots { display: flex; gap: 6px; }
.bs-slot {
  flex: 1; font-family: var(--fh); font-size: 15px;
  aspect-ratio: 1; border-radius: 8px; border: 1.5px solid var(--rim);
  background: var(--raise); color: var(--dim);
  cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  transition: color .12s, border-color .12s, box-shadow .12s, transform .08s, background .12s;
}
.bs-slot.has-beat {
  background: rgba(255,200,0,0.08); border-color: rgba(255,200,0,0.45);
  color: #ffcc00; box-shadow: 0 0 10px rgba(255,200,0,0.18);
}
.bs-slot.is-playing {
  background: rgba(255,200,0,0.18); border-color: #ffcc00;
  color: #fff; box-shadow: 0 0 18px rgba(255,200,0,0.4); transform: scale(1.06);
}
.bs-slot:active { transform: scale(0.92); }


/* ══════════════════════════════════════════════════════════════════════════
   TRACK PICKER OVERLAY
   ══════════════════════════════════════════════════════════════════════════ */
.track-picker {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
}
.track-picker.is-open { pointer-events: auto; }

.tp-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  opacity: 0; transition: opacity .22s;
}
.track-picker.is-open .tp-backdrop { opacity: 1; }

.tp-sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  max-height: 65vh; background: #111;
  border-top: 1px solid #252525; border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1);
}
.track-picker.is-open .tp-sheet { transform: translateY(0); }

.tp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid #1c1c1c; flex-shrink: 0;
}
.tp-title { font-family: var(--fh); font-size: 16px; letter-spacing: 0.12em; color: #444; }
#tp-deck-label { color: var(--tp-color, white); }
.tp-close {
  background: none; border: 1.5px solid #2a2a2a; border-radius: 50%;
  width: 34px; height: 34px; color: #555; font-size: 13px;
  cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  transition: color .1s, border-color .1s;
}
.tp-close:active { color: white; border-color: #555; }
.tp-list {
  overflow-y: auto; flex: 1; padding: 12px 14px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.tp-track {
  display: flex; align-items: center; gap: 14px;
  background: #181818; border: 1.5px solid #222; border-radius: 12px;
  padding: 15px 18px; cursor: pointer; touch-action: manipulation;
  transition: background .1s, border-color .15s, box-shadow .15s, transform .08s;
  text-align: left; width: 100%;
}
.tp-track:active { transform: scale(0.98); background: #1f1f1f; }
.tp-track.is-loaded {
  border-color: var(--tp-color, #555);
  box-shadow: 0 0 20px rgba(80,80,80,0.18);
}
.tp-num  { font-family: var(--fm); font-size: 11px; color: #333; min-width: 20px; }
.tp-track-name { font-family: var(--fh); font-size: 24px; letter-spacing: 0.04em; color: #bbb; flex: 1; }
.tp-track.is-loaded .tp-track-name { color: white; }
.tp-bpm  { font-family: var(--fm); font-size: 10px; color: #333; }
.tp-track.is-loaded .tp-bpm { color: var(--tp-color, #555); opacity: 0.65; }
.tp-check { font-size: 15px; color: var(--tp-color, #555); opacity: 0; transition: opacity .15s; }
.tp-track.is-loaded .tp-check { opacity: 1; }