/* CDJ Player module - STEP2 POLISH (EVO7)
   Objectifs:
   - Bouton Play/Pause bas-droite (zone ronde du masque)
   - Bouton Play List en haut (zone transparente du masque)
   - Time mm:ss.mmm centré sur la tête de lecture (trait blanc)
   - BPM/Time plus lisibles (référence sur '+0.55%')
   - Waveform plus fine sur longs fichiers (côté JS)
*/

:root{

  /* TEMPO RESET CLICK ZONE */
  --tempo-reset-x:980px;
  --tempo-reset-y:710px;
  --tempo-reset-w:40px;
  --tempo-reset-h:40px;

  
  /* CDJ mask corner cutout */
  --cdj-corner-w:180px;
  --cdj-corner-h:110px;
  
  /* Beat4 indicator zone (safe defaults) */
  /* UI-02: keep Beat4 LED aligned with the mask window after width bump (876->1000, grow to the right) */
  --zone-beat4-x: calc(50% - 0px);
  --zone-beat4-y: 32px;
  --zone-beat4-w: 160px;
  --zone-beat4-h: 12px;
--cdj-scale: 0.8;

  /* Masque maître 1200×986 : toutes les coordonnées restent exprimées
     dans ce repère puis réduites via --cdj-scale pour éviter tout décalage
     lors d’un futur changement de facteur. */

  /* Base dimensions (mask coordinate system) */
  --cdj-w: 1200px;
  --cdj-h: 1053px;

  /* Zones (héritées du prototype) */
  --zone-main-x: 235px;
  --zone-main-y: 225px;
  --zone-main-w: 730px;
  --zone-main-h: 145px;
  --zone-main-band-h: 20px;
  --beat-loop-bar-h: 48px;
  --beat-loop-bar-gap: 6px;
  --beat-loop-bar-x: 306px;
  --beat-loop-bar-w: 596px;
  --beat-loop-btn-font-size: 14px;
  /* Bandeau beat jump */
  --beat-jump-bar-h: 48px;
  --beat-jump-bar-gap: 6px;
  --beat-jump-bar-x: 306px;
  --beat-jump-bar-w: 596px;
  --beat-jump-btn-font-size: 13px;

  --zone-title-x: 360px;
  --zone-title-y: 128px;
  --zone-title-w: 379px;
  --zone-title-h: 48px;

  --zone-time-x: 484px; /* repère écran 1200×986 */
  --zone-time-y: 390px;
  --zone-time-w: 161px;
  
  /* AUTO CUE label (au-dessus du clock) */
  --autocue-label-x: 368px;
  --autocue-label-y: 424px;
  --autocue-label-w: 64px;
  --autocue-label-h: 18px;
  /* HOT CUE label (au-dessus de AUTO CUE) */
  --hotcue-label-x: 368px;
  --hotcue-label-y: 396px;
  --hotcue-label-w: 64px;
  --hotcue-label-h: 18px;

  --zone-time-h: 38px;

  --zone-bpm-x: 853px;
  --zone-bpm-y: 436px;
  --zone-bpm-w: 88px;
  --zone-bpm-h: 35px;

  --zone-overview-x: 308px;
  --zone-overview-y: 460px;
  --zone-hotcue-markers-y: 460px;
  --zone-overview-w: 560px;
  --zone-overview-h: 37px;


  /* MAIN WAVEFORM — downbeat numbers / loop indicator */
  --wf-downbeat-font-size: 8px;
  --wf-downbeat-color: rgba(255,255,255,0.92);
  --wf-downbeat-offset-x: 0px;
  --wf-downbeat-offset-y: 2px;

    /* TEMPO-05 — Pitch fader (UI)
     Coords in CDJ mask space (1000x681). Adjust here only for pixel-perfect alignment.
  */
  --tempo-fader-x: 1104px;
  --tempo-fader-y: 477px;
  --tempo-fader-w: 28px;
  --tempo-fader-h: 540px;
  --tempo-fader-knob-w: 75px;
  --tempo-fader-knob-h: 81px;
  --tempo-rail-top: 0px;
  --tempo-rail-bottom: 0px;
  --tempo-zero-top: 47%;
  --tempo-knob-offset-y: 38px;
  --tempo-center-led-left: -55px;
  --tempo-center-led-w: 18px;
  --tempo-center-led-h: 8px;

  /* Pitch % display (near BPM area) */
  --tempo-display-x: 700px;
  --tempo-display-y: 422px;
  --tempo-display-w:115px;
  --tempo-display-h: 20px;

  /* TEMPO-06 — tempo range button + UI */
  --tempo-range-btn-x: 1089px;
  --tempo-range-btn-y: 347px;
  --tempo-range-btn-w: 30px;
  --tempo-range-btn-h: 30px;
  --tempo-range-ui-x: 702px;
  --tempo-range-ui-y: 396px;
  --tempo-range-ui-w: 97px;
  --tempo-range-ui-h: 18px;
  --tempo-range-label-w: 10px;
  --tempo-range-box-w: 44px;

  /* Playlist overlay (cadre rouge) - ajustable si nécessaire */
  --zone-pl-x: 238px;
  --zone-pl-y: 127px;
  --zone-pl-w: 724px;
  --zone-pl-h: 399px;

  /* Boutons (position dans le repère du masque) */
  /* Masque v2 (2026-01-19): trous dédiés playlist (haut) et play/pause (bas droite)
     Astuce: ajuste uniquement ces variables pour caler au pixel près, sans toucher au JS.
  */
  --btn-play-x: 91px; /* conservé pour compatibilité, sous masque si non utilisé */
  --btn-play-y: 901px;
  --btn-play-size: 92px; /* conservé pour compatibilité, sous masque si non utilisé */
  
  --btn-cue-x:43px;
  --btn-cue-y:736px;
  --btn-cue-size:92px;
  
  /* BEAT GRID button  */
  --btn-beatgrid-left: 56px;
  --btn-beatgrid-top: 672px;
  --btn-beatgrid-w: 66px;
  --btn-beatgrid-h: 34px;

  /* Loop controls (positions + tailles) */
  --loop-in-x: 181px;
  --loop-in-y: 688px;
  --loop-in-w: 60px;
  --loop-in-h: 60px;

  --loop-out-x: 257px;
  --loop-out-y: 688px;
  --loop-out-w: 60px;
  --loop-out-h: 60px;

  --loop-exit-x: 353px;
  --loop-exit-y: 691px;
  --loop-exit-w: 52px;
  --loop-exit-h: 52px;

  --loop-4-x: 191px;
  --loop-4-y: 772px;
  --loop-4-w: 40px;
  --loop-4-h: 40px;

  --loop-8-x: 268px;
  --loop-8-y: 772px;
  --loop-8-w: 40px;
  --loop-8-h: 40px;

  --wf-loop-badge-offset-x: 24px;
  --wf-loop-badge-offset-y: 1px;
  --wf-loop-badge-gap: 6px;
  --wf-loop-badge-icon-font-size: 28px;
  --wf-loop-value-font-size: 12px;
  --wf-loop-value-color: rgba(255,255,255,0.92);

  /* TIME MODE button (left panel) */
  --timemode-btn-x: 67px;
  --timemode-btn-y: 386px;
  --timemode-btn-w: 46px;
  --timemode-btn-h: 46px;

  /* UI ONLY — BEAT JUMP / BEAT SYNC buttons */
  --bj-left-x: 190px;
  --bj-left-y: 849px;
  --bj-left-w: 44px;
  --bj-left-h: 35px;

  --bj-right-x: 266px;
  --bj-right-y: 849px;
  --bj-right-w: 43px;
  --bj-right-h: 35px;

  --beat-sync-x: 1041px;
  --beat-sync-y: 160px;
  --beat-sync-w: 57px;
  --beat-sync-h: 42px;

  /* LEFT FLANK — SLIP / QUANTIZE / ROCKER */
  --slip-x: 29px;
  --slip-y: 471px;
  --slip-w: 55px;
  --slip-h: 27px;

  --qtz-side-x: 96px;
  --qtz-side-y: 471px;
  --qtz-side-w: 54px;
  --qtz-side-h: 27px;

  --rocker-x: 32px;
  --rocker-y: 572px;
  --rocker-w: 114px;
  --rocker-h: 68px;
/* PLAY LIST - trou du masque v2 (valeurs par défaut, ajustables) */
  --btn-playlist-x: 611px;
  --btn-playlist-y: 66px;
  --btn-playlist-w: 115px;
  --btn-playlist-h: 28px;

  /* MENU button (zone UTILITY — à droite de PLAY LIST) */
  --btn-menu-x: 875px;
  --btn-menu-y: 66px;
  --btn-menu-w: 110px;
  --btn-menu-h: 26px;

    /* BEAT LOOP button */
  --btn-beatloop-left: 756px;
  --btn-beatloop-top: 127px;
  --btn-beatloop-w: 67px;
  --btn-beatloop-h: 53px;
  
  /* KEY SHIFT button */
  --btn-keyshift-left: 826px;
  --btn-keyshift-top: 127px;
  --btn-keyshift-w: 67px;
  --btn-keyshift-h: 53px;

  /* KEY SHIFT bar — largeurs ratio naturel PNG à h=48px (non-déformées)
     ks_btn_left  226×124 → 87px
     ks_btn_right 227×125 → 87px
     ks_btn_steps 156×63  → 119px × 2
     ks_btn_center         → flex:1 (596-87-87-119-119 = 184px)     */
  /* Largeurs layout — calquées sur la référence visuelle CDJ-3000 (596px total)
     btn-l + steps + btn-c(flex:1) + steps + btn-r = 596px
     147   +  80   +    158        +  80   +  131  = 596px  */
  --ks-bar-btn-l-w:    90px;   /* largeur bouton gauche [-]         */
  --ks-bar-btn-r-w:    90px;   /* largeur bouton droit  [+]         */
  --ks-bar-steps-w:    80px;   /* largeur graduation (×2)           */
  --ks-bar-steps-h:    30px;   /* hauteur graduation                */
  --ks-bar-steps-top:  10px;   /* offset top pour centrer           */
  --ks-bar-btn-reset-w: 90px;  /* largeur du bouton RESET (btn-c)   */
  --ks-bar-gap:          5px;  /* écartement entre tous les éléments */

  /* Textes dans btn gauche : clé destination gauche */
  --ks-bar-key-prev-left:  8px;   /* offset left de la clé prev (ex: Abm) */
  --ks-bar-key-prev-top:   50%;    /* offset top (centré verticalement)    */
  

  /* Textes dans btn droit : clé destination droite */
  --ks-bar-key-next-right: 10px;   /* offset right de la clé next (ex: Bbm)*/
  --ks-bar-key-next-top:   50%;

  /* Tailles de police */
  --ks-bar-key-font:       26px;   /* clés prev/next (boutons L et R)      */
  --ks-bar-key-c-font:     22px;   /* clé courante (bouton centre)          */
  --ks-bar-key-c-left:      5px;   /* offset left de la clé courante        */
  --ks-bar-key-c-top:       40%;   /* offset top  de la clé courante        */
  --ks-bar-val-font:        22px;  /* valeur shift (+2, 0, -1...)           */
  --ks-bar-val-right:        10px;  /* offset right de la valeur shift       */
  --ks-bar-val-top:          40%;  /* offset top  de la valeur shift        */
  
  /* Couleurs */
  --ks-bar-key-color:      rgba(255,255,255,0.80);  /* clés prev/cur/next  */
  --ks-bar-val-color:      rgba(255,255,255,0.45);  /* valeur shift neutre */
  --ks-bar-val-active-color: #000000;               /* valeur shift actif  */
    
  /* Fin KS - Fin KS - Fin KS - Fin KS - Fin KS -  */
  
  
  /* BEAT JUMP button */
  --btn-beatjump-left: 896px;
  --btn-beatjump-top: 127px;
  --btn-beatjump-w: 67px;
  --btn-beatjump-h: 53px;

  /* LEFT STACK (PLAYER / QUANTIZE / BEAT JUMP) — nouveau masque
     Réglages exposés dans :root pour ajustement pixel-perfect sans JS.
     Valeurs de départ alignées sur les ancres actuelles du masque 1200×986. */
  --leftstack-x: 243px;

  --playerid-y: 396px;
  --playerid-w: 56px;
  --playerid-h: 46px;

  --quantize-y: 448px;
  --quantize-w: 56px;
  --quantize-h: 35px;

  --beatjump-y: 489px;
  --beatjump-w: 56px;
  --beatjump-h: 35px;

  --leftstack-z: 61;
  
   /* Mode colors */
  --bpm-color-master: #ff9800;
  --bpm-color-mt:     #00d36a;
  --bpm-color-sync:   #2f7bff;
  --bpm-color-normal: #ffffff;

  /* Couleurs waveform */
  --wave-bg: #000;
  --text: #fff;
  
  /* --- DJ GRADE: BPM BOX FRAME (dynamic, mask-new) ---
   Frame is independent from BPM digits positioning.
   Adjust using --zone-bpm-frame-* variables.
*/

  --zone-bpm-frame-x: 829px; /* repère écran 1200×1053 */
  --zone-bpm-frame-y: 396px;
  --zone-bpm-frame-w: 128px;
  --zone-bpm-frame-h: 57px;  /* masque 1200×1053 */

/* --- DJ GRADE: TEMPO-04 (UI state toggles) ---
   Goal: clickable MASTER (deck) + MT (Master Tempo) impacting UI only.
   No DSP here.
*/

  --bpm-tag-font: 10px;
  --bpm-tag-pad-x: 10px;
  --bpm-tag-pad-y: 1px;
  --bpm-tag-radius: 2px;

  /* BPM mode colors (UI only) */
  --bpm-mode-master: #FF9800;

/* ==========================================================
   CDJ TEMPO UI — grouped variables (BPM box + MASTER button)
   ========================================================== */

  /* MASTER deck button (top-right utility zone) - adjust later */
  --btn-masterdeck-x: 1122px;
  --btn-masterdeck-y: 160px;
  --btn-masterdeck-w: 57px;
  --btn-masterdeck-h: 42px;

  /* Master Tempo clickable zone (right panel) - adjust later */
  --btn-mastertempo-x: 1095px;
  --btn-mastertempo-y: 436px;
  --btn-mastertempo-w: 41px;
  --btn-mastertempo-h: 38px;

  /* KEY display — bas droite */
  --key-display-x:      892px;  /* left                              */
  --key-display-y:       488px;  /* top                               */
  --key-display-w:        60px;  /* largeur                           */
  --key-display-lbl-font:  10px;  /* taille police label KEY           */
  --key-display-val-font: 24px;  /* taille police valeur clé          */
  --key-display-lbl-color: rgba(255,255,255,0.45); /* couleur label   */
  --key-display-val-color: rgba(255,255,255,0.90); /* couleur valeur  */

  
  /* Frame borders */
  --bpm-frame-border-default: rgba(255,255,255,0.35);
  --bpm-frame-border-master:  var(--bpm-color-master);
  --bpm-frame-border-mt:      var(--bpm-color-mt);
  --bpm-frame-border-sync:    var(--bpm-color-sync);

  /* Digits */
  --bpm-digits-master: var(--bpm-color-master);
  --bpm-digits-mt:     var(--bpm-color-mt);
  --bpm-digits-sync:   var(--bpm-color-sync);
  --bpm-digits-normal: var(--bpm-color-normal);

  /* Tags (inverted like CDJ) */
  --bpm-tag-bg-master: var(--bpm-color-master);
  --bpm-tag-fg-master: #000000;

  --bpm-tag-bg-mt:     var(--bpm-color-mt);
  --bpm-tag-fg-mt:     #000000;

  --bpm-tag-bg-sync:   var(--bpm-color-sync);
  --bpm-tag-fg-sync:   #ffffff;
}

/* --- TEMPO-05: Pitch fader (UI) --- */
.cdj-player .cdj-tempo-fader{
  position:absolute;
  left: var(--tempo-fader-x);
  top:  var(--tempo-fader-y);
  width: var(--tempo-fader-w);
  height: var(--tempo-fader-h);
  /* dans la couche overlay (au-dessus du masque, sous playlist/loader) */
  z-index: 0;
  pointer-events:auto;
}
.cdj-player .cdj-tempo-rail{
  position:absolute;
  left: 50%;
  top: var(--tempo-rail-top);
  bottom: var(--tempo-rail-bottom);
  transform: translateX(-50%);
  width: 0px;
  height: auto;
  border-radius: 3px;
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55);
}
.cdj-player .cdj-tempo-zero{
  position:absolute;
  left: 50%;
  top: var(--tempo-zero-top);
  transform: translate(-50%,-50%);
  width: 14px;
  height: 1px;
  background: rgba(255,255,255,0.55);
  opacity: 0.75;
  pointer-events:none;
}
.cdj-player .cdj-tempo-center-led{
  position:absolute;
  left: var(--tempo-center-led-left);
  top: var(--tempo-zero-top);
  width: var(--tempo-center-led-w);
  height: var(--tempo-center-led-h);
  transform: translate(-100%,-50%);
  border-radius: 1px;
  background: rgba(40,255,110,0.10);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.10);
  opacity: 0.35;
  pointer-events:none;
}
.cdj-player .cdj-tempo-center-led::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: 1px;
  background: rgba(40,255,110,0.12);
}
.cdj-player .cdj-tempo-fader.is-center .cdj-tempo-center-led{
  opacity: 1;
  background: rgba(40,255,110,0.38);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 0 5px rgba(40,255,110,0.60),
    0 0 10px rgba(40,255,110,0.24);
}
.cdj-player .cdj-tempo-fader.is-center .cdj-tempo-center-led::after{
  background: linear-gradient(to bottom, rgba(150,255,190,0.95) 0%, rgba(40,255,110,0.88) 65%, rgba(8,120,40,0.95) 100%);
}
.cdj-player .cdj-tempo-knob{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + var(--tempo-knob-offset-y)));
  width: var(--tempo-fader-knob-w);
  height: var(--tempo-fader-knob-h);
  display:flex;
  align-items:center;
  justify-content:center;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.65));
  cursor: grab;
  touch-action: none;
}
.cdj-tempo-knob > img{
  width: 75px;
  height: 81px;
  object-fit: adjust;
  display:block;
}
.cdj-player .cdj-tempo-knob:active{ cursor: grabbing; }

.cdj-player .cdj-tempo-display{
  position:absolute;
  left: var(--tempo-display-x);
  top:  var(--tempo-display-y);
  width: var(--tempo-display-w);
  height: var(--tempo-display-h);
  /* dans la couche overlay (au-dessus du masque, sous playlist/loader) */
  z-index: 0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  pointer-events:none;
}
.cdj-player .cdj-tempo-value{
  font-family: "CDJDisplay", Arial, sans-serif;
  font-weight: 10;
  font-size: 28px;
  line-height: 1;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0px;
  text-shadow: 0 0 6px rgba(255,255,255,0.22);
}

/* --- TEMPO-06: Tempo range button + UI --- */
.cdj-player .cdj-btn-temporange{
  position:absolute;
  left: var(--tempo-range-btn-x);
  top:  var(--tempo-range-btn-y);
  width: var(--tempo-range-btn-w);
  height: var(--tempo-range-btn-h);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 0;
  pointer-events:auto;
}
.cdj-player .cdj-btn-temporange img{
  width:50px;
  height:50px;
  display:block;
  object-fit:adjust;
}
.cdj-player .cdj-tempo-range-ui{
  position:absolute;
  left: var(--tempo-range-ui-x);
  top:  var(--tempo-range-ui-y);
  width: var(--tempo-range-ui-w);
  height: var(--tempo-range-ui-h);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 35px;
  z-index: 0;
  pointer-events:none;
}
.cdj-player .cdj-tempo-range-label{
  width: var(--tempo-range-label-w);
  height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font: 600 12px/1 Arial, sans-serif;
  color:#ffffff;
  letter-spacing:0.4px;
  text-shadow:none;
}
.cdj-player .cdj-tempo-range-box{
  width: var(--tempo-range-box-w);
  min-width: var(--tempo-range-box-w);
  height: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  color:#000000;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
  font: 700 10px/1 Arial, sans-serif;
  letter-spacing:0.2px;
  text-shadow:none;
}

/* --- UI-04e: CDJ digital font for numeric indicators (PLAYER ID / BPM / QUANTIZE) --- */
@font-face{
  font-family: "CDJDisplay";
  src: url("../fonts/ArialMT.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "CDJDisplay";
  src: url("../fonts/Arial-BoldMT.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.cdj-player .cdj-digital{
  font-family: "CDJDisplay", Arial, sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(255,255,255,0.25);
}

/* --- DJ OPTIONS: Hotcues / Loop overlay (EVO HotcueLoop) --- */
.cdj-player .cdj-loop-overlay{
  position:absolute;
  left:var(--zone-main-x);
  top:var(--zone-main-y);
  width:var(--zone-main-w);
  height:var(--zone-main-h);
  z-index: 15;
  pointer-events:none;
}

.cdj-player .cdj-dj-layer{
  position:absolute;
  inset:0;
  z-index: 1; /* UI layer (under mask layer) */
  pointer-events:none; /* enable per-button */
}
.cdj-player .cdj-dj-btn{
  position:absolute;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  -webkit-user-drag:none;
}
.cdj-player .cdj-dj-btn img{
  width:100%;
  height:100%;
  display:block;
  -webkit-user-drag:none;
}

/* Quantize indicator (UI-03 / CDJ-3000) */
.cdj-player .cdj-dj-btn.cdj-quantize-btn{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    inset 0 0 0 2px var(--qz-frame-outer),
    inset 0 0 0 3px var(--qz-frame-relief);

  /* Default = OFF */
  --qz-color: #ffffff;
  /* OFF must match the same grey frame as PLAYER + BEAT JUMP */
  --qz-frame-outer: rgba(255,255,255,0.25);
  --qz-frame-relief: rgba(0,0,0,0);
}

/* ON state */
.cdj-player .cdj-dj-btn.cdj-quantize-btn.is-on{
  --qz-color: #ff0000;
  --qz-frame-outer: #ff0000;
  --qz-frame-relief: rgba(255,0,0,.0);
}

/* legacy dot (disabled) */
.cdj-player .cdj-dj-btn.cdj-quantize-btn .cdj-quantize-led{
  display:none !important;
}

/* Title label (small, variable-ready) */
.cdj-player .cdj-dj-btn.cdj-quantize-btn::before{
  content:"QUANTIZE";
  position:absolute;
  left:0;
  right:0;
  top:3px;
  text-align:center;
  font-size:8px;
  line-height:1;
  letter-spacing:.2px;
  color: var(--qz-color);
  font-weight:700;
  text-shadow:none;
  pointer-events:none;
}

/* Value (ex: 1/1) */
.cdj-player .cdj-dj-btn.cdj-quantize-btn .cdj-quantize-text{
  position:absolute;
  left:0;
  right:0;
  top:var(--ls-value-top);
  transform: translateY(-50%);
  display:block;
  width:100%;
  text-align:center;
  color: var(--qz-color);
  font-weight:700;
  font-size:18px;
  line-height:1;
  text-shadow:none;
  font-family: "CDJDisplay", Arial, sans-serif;
  letter-spacing: 1px;
  pointer-events:none;
}

/* Player ID (left panel) */
.cdj-player .cdj-dj-btn.cdj-playerid-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.cdj-player .cdj-dj-btn.cdj-playerid-btn .cdj-playerid-text{
  position:absolute;
  left:0;
  right:0;
  top: var(--ls-value-top);
  transform: translateY(-50%);
  width:100%;
  text-align:center;
  font-family: "CDJDisplay", Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(255,255,255,0.25);
  pointer-events:none;
}

/* Player ID frame + title (CDJ-3000) */
.cdj-player .cdj-dj-btn.cdj-playerid-btn::before{
  content:"PLAYER";
  position:absolute;
  left:0;
  right:0;
  top:3px;
  text-align:center;
  font-size:11px;
  line-height:1;
  letter-spacing:.6px;
  color:#ffffff;
  font-weight:600;
  text-shadow: 0 1px 0 rgba(0,0,0,0.70);
  pointer-events:none;
}

/* Beat Jump frame + title (CDJ-3000) */
.cdj-player .cdj-dj-btn.cdj-beatjump-btn{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
  pointer-events:none; /* wiring later */
}
.cdj-player .cdj-dj-btn.cdj-beatjump-btn::before{
  content:"BEAT JUMP";
  position:absolute;
  left:0;
  right:0;
  top:3px;
  text-align:center;
  font-size:8px;
  line-height:1;
  letter-spacing:.6px;
  color:#ffffff;
  font-weight:600;
  text-shadow: 0 1px 0 rgba(0,0,0,0.70);
  pointer-events:none;
}
.cdj-player .cdj-dj-btn.cdj-beatjump-btn .cdj-beatjump-text{
  position:absolute;
  left:0;
  right:0;
  top:var(--ls-value-top);
  transform: translateY(-50%);
  width:100%;
  text-align:center;
  color:#ffffff;
  font-weight:500;
  font-size:20px;
  line-height:1;
  text-shadow:none;
  font-family: "CDJDisplay", Arial, sans-serif;
  letter-spacing: 1px;
  pointer-events:none;
}

/* Loop IN/OUT: pas de cerclage CSS (les icônes gèrent les états) */
.cdj-player .cdj-dj-btn.cdj-loop-in,
.cdj-player .cdj-dj-btn.cdj-loop-out{
  border: none;
  box-shadow: none;
  background: transparent;
}
.cdj-player .cdj-dj-btn.cdj-loop-in.is-set,
.cdj-player .cdj-dj-btn.cdj-loop-out.is-set{
  border: none;
  box-shadow: none;
}

.cdj-player .cdj-dj-hidden{ display:none !important; }
/* Host (per instance) */
.cdj-player-host{ display:flex; justify-content:center; }

.cdj-player-wrap{
  transform: scale(var(--cdj-scale));
  transform-origin: top center;
}

.cdj-player{
  position:relative;
  width:var(--cdj-w);
  height:var(--cdj-h);
  background:transparent;
  overflow:hidden;
  user-select:none;
  --bpm-frame-border: var(--bpm-frame-border-default);
  --bpm-digits-color: var(--bpm-digits-normal);
}

.cdj-player::before{
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  pointer-events:none;
  z-index:0;
  clip-path: polygon(
    var(--cdj-corner-w) 0,
    calc(100% - var(--cdj-corner-w)) 0,
    calc(100% - var(--cdj-corner-w)) var(--cdj-corner-h),
    100% var(--cdj-corner-h),
    100% 100%,
    0 100%,
    0 var(--cdj-corner-h),
    var(--cdj-corner-w) var(--cdj-corner-h)
  );
}

/* -----------------------------------------------------------------
   EVO08 — Stacking/Layers
   Single logical stage to make PNG transparency meaningful and keep
   UI/DJ elements consistently under the mask, while overlays (playlist
   + loading) remain above.
   ----------------------------------------------------------------- */

.cdj-player .cdj-stage{
  position:absolute;
  inset:0;
}

.cdj-player .cdj-layer{
  position:absolute;
  inset:0;
}

.cdj-player .cdj-layer-wave{ z-index: 10; }
.cdj-player .cdj-layer-ui{ z-index: 20; pointer-events:none; }
.cdj-player .cdj-layer-mask{ z-index: 50; pointer-events:none; }
.cdj-player .cdj-layer-overlay{ z-index: 200; pointer-events:none; }

/* Re-enable interactions only on actual controls within the UI layer */
.cdj-player .cdj-layer-ui button,
.cdj-player .cdj-layer-ui .cdj-dj-btn,
.cdj-player .cdj-layer-ui [role="button"],
.cdj-player .cdj-layer-ui a{
  pointer-events:auto;
}

/* URGENT FIX — render DJ buttons layer above the PNG mask
   Restores left stack (PLAYER / QUANTIZE / BEAT JUMP) and loop buttons
   even when the updated mask no longer has transparent holes for them. */
.cdj-player .cdj-layer-overlay .cdj-dj-layer{
  z-index: 5;
  pointer-events: none;
}
.cdj-player .cdj-layer-overlay .cdj-dj-layer .cdj-dj-btn,
.cdj-player .cdj-layer-overlay .cdj-dj-layer .cdj-dj-btn img{
  pointer-events: auto;
}

/* TEMPO-05 HOTFIX-04 — fader rendered in overlay layer so it stays above the PNG mask
   while remaining below playlist/loading overlays in the same stacking context. */
.cdj-player .cdj-layer-overlay .cdj-tempo-fader,
.cdj-player .cdj-layer-overlay .cdj-tempo-fader *,
.cdj-player .cdj-layer-overlay .cdj-tempo-display,
.cdj-player .cdj-layer-overlay .cdj-tempo-display *{
  pointer-events:auto;
}
.cdj-player .cdj-layer-overlay .cdj-btn-temporange,
.cdj-player .cdj-layer-overlay .cdj-btn-temporange *{
  pointer-events:auto;
}

/* EVO08 — Overview: single playhead element (cursor + orange triangle) */
.cdj-player .cdj-overview-playhead{
  position:absolute;
  width:2px;
  background: rgba(255,255,255,0.9);
  z-index: 5;
  pointer-events:none;
  transform: translateX(-1px);
}
.cdj-player .cdj-overview-playhead::after{
  content:"";
  position:absolute;
  left:50%;
  top: calc(100% - 10px);
  transform: translateX(-50%);
  width:0;
  height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:10px solid #ff8c00; /* pointe vers le haut */
}

.cdj-player .cdj-overview-ruler{
  position:absolute;
  height:14px;
  z-index: 4;
  pointer-events:none;
  color: rgba(255,255,255,0.75);
  font: 11px/14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.cdj-player .cdj-overview-ruler .tick{
  position:absolute;
  top:0;
  transform: translateX(-50%);
  white-space:nowrap;
}

/*
  Overlays (playlist / loading) must sit above everything visually,
  but MUST NOT block clicks when not visible.
*/
/* Pointer-events activés uniquement sur l'overlay visible, pas sur le layer entier.
   Cela permet aux boutons PLAY LIST et MENU (dans cdj-layer-ui, z-index inférieur)
   de rester cliquables même quand un panneau est ouvert. */
.cdj-player.is-playlist-open .cdj-playlist-overlay,
.cdj-player.is-menu-open .cdj-menu-overlay{
  pointer-events:auto;
}
/* Loading : le layer entier bloque les clics (comportement voulu pendant le chargement) */
.cdj-player.is-loading .cdj-layer-overlay{
  pointer-events:auto;
}

.cdj-player .cdj-mask{
  position:absolute;
  inset:0;
  width:1200px;
  height:1053px;
  object-fit:contain;
  pointer-events:none;
  z-index: 1;
}

.cdj-player canvas{ display:block; }

/* Waveforms */
.cdj-player .cdj-wave-main{
  position:absolute;
  left:var(--zone-main-x);
  top:var(--zone-main-y);
  width:var(--zone-main-w);
  height:calc(var(--zone-main-h) + var(--zone-main-band-h));
  background:var(--wave-bg);
  z-index: 1;
}

/* Rétraction waveform quand le bandeau beat loop est visible */
.cdj-player.is-loop-bar-visible{
  --zone-main-h: 90px;
}
.cdj-player.is-jump-bar-visible{
  --zone-main-h: 90px;
}
.cdj-player.is-keyshift-bar-visible{
  --zone-main-h: 90px;
}

/* Bandeau beat loop */
.cdj-beat-loop-bar{
  position:absolute;
  left:var(--beat-loop-bar-x);
  top:calc(var(--zone-main-y) + var(--zone-main-h) + var(--zone-main-band-h) + var(--beat-loop-bar-gap));
  width:var(--beat-loop-bar-w);
  height:var(--beat-loop-bar-h);
  display:none;
  align-items:stretch;
  gap:4px;
  box-sizing:border-box;
  padding:0;
  z-index:201;
  pointer-events:auto;
}
.cdj-player.is-loop-bar-visible .cdj-beat-loop-bar{
  display:flex;
}
/* Masquer le bandeau beat loop quand un overlay (menu/playlist) est ouvert */
.cdj-player.is-menu-open .cdj-beat-loop-bar,
.cdj-player.is-playlist-open .cdj-beat-loop-bar{
  display:none !important;
}
/* Masquer le badge loop quand un overlay est ouvert */
.cdj-player.is-menu-open .cdj-loop-badge,
.cdj-player.is-playlist-open .cdj-loop-badge{
  display:none !important;
}
.cdj-beat-loop-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111116;
  border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.55);
  font-size:var(--beat-loop-btn-font-size);
  font-family:inherit;
  letter-spacing:0.04em;
  border-radius:2px;
  cursor:pointer;
  padding:0;
  transition:background 0.08s, color 0.08s, border-color 0.08s;
}
.cdj-beat-loop-btn:hover{
  background:#1e1e26;
  color:rgba(255,255,255,0.85);
}
.cdj-beat-loop-btn.is-active{
  /* couleur injectée dynamiquement via style inline */
  color:#fff;
  font-weight:700;
}

/* Bandeau beat jump */
.cdj-beat-jump-bar{
  position:absolute;
  left:var(--beat-jump-bar-x);
  top:calc(var(--zone-main-y) + var(--zone-main-h) + var(--zone-main-band-h) + var(--beat-jump-bar-gap));
  width:var(--beat-jump-bar-w);
  height:var(--beat-jump-bar-h);
  display:none;
  align-items:stretch;
  gap:4px;
  box-sizing:border-box;
  padding:0;
  z-index:201;
  pointer-events:auto;
}
.cdj-player.is-jump-bar-visible .cdj-beat-jump-bar{
  display:flex;
}
.cdj-player.is-menu-open .cdj-beat-jump-bar,
.cdj-player.is-playlist-open .cdj-beat-jump-bar{
  display:none !important;
}
/* ── Bandeau KEY SHIFT ──────────────────────────────────────────────── */

/* Variables KEY SHIFT bar (mirror beat-loop/beat-jump) */
/* bar-x et bar-w déjà définis par --beat-loop-bar-x / --beat-loop-bar-w */

.cdj-key-shift-bar{
  position:absolute;
  left:var(--beat-loop-bar-x);
  top:calc(var(--zone-main-y) + var(--zone-main-h) + var(--zone-main-band-h) + var(--beat-loop-bar-gap));
  width:var(--beat-loop-bar-w);
  height:var(--beat-loop-bar-h);
  display:none;
  align-items:center;
  justify-content:center;
  gap:var(--ks-bar-gap);
  box-sizing:border-box;
  padding:0;
  z-index:201;
  pointer-events:auto;
}
.cdj-player.is-keyshift-bar-visible .cdj-key-shift-bar{
  display:flex;
}
.cdj-player.is-menu-open .cdj-key-shift-bar,
.cdj-player.is-playlist-open .cdj-key-shift-bar{
  display:none !important;
}

/* Bouton gauche [-] */
.cdj-ks-btn-l{
  flex:0 0 var(--ks-bar-btn-l-w);
  height:100%;
  background-color:transparent;
  background-size:100% 100%;
  background-repeat:no-repeat;
  border:none;
  cursor:pointer;
  padding:0;
  box-sizing:border-box;
  position:relative;
}
.cdj-ks-btn-l .cdj-ks-key-prev{
  position:absolute;
  left:var(--ks-bar-key-prev-left);
  top:var(--ks-bar-key-prev-top);
  transform:translateY(-50%);
  color:var(--ks-bar-key-color);
  font-size:var(--ks-bar-key-font);
  font-weight:400;
  font-family:'Arial Narrow','Arial',sans-serif;
  letter-spacing:0.5px;
  pointer-events:none;
}

/* Séparateur barres verticales */
.cdj-ks-steps{
  flex:0 0 var(--ks-bar-steps-w);
  height:var(--ks-bar-steps-h);
  margin-top:var(--ks-bar-steps-top);
  display:block;
  pointer-events:none;
  align-self:flex-start;
}

/* Bouton centre (clé courante + valeur + RESET) */
.cdj-ks-btn-c{
  flex:0 0 var(--ks-bar-btn-reset-w);
  height:100%;
  background-color:transparent;
  background-size:100% 100%;
  background-repeat:no-repeat;
  border:none;
  cursor:pointer;
  display:block;
  padding:0;
  box-sizing:border-box;
  position:relative;
}
.cdj-ks-key-cur{
  position:absolute;
  left:var(--ks-bar-key-c-left);
  top:var(--ks-bar-key-c-top);
  transform:translateY(-50%);
  color:var(--ks-bar-key-color);
  font-size:var(--ks-bar-key-c-font);
  font-weight:400;
  font-family:'Arial Narrow','Arial',sans-serif;
  letter-spacing:0.5px;
  pointer-events:none;
}
.cdj-ks-val{
  position:absolute;
  right:var(--ks-bar-val-right);
  top:var(--ks-bar-val-top);
  transform:translateY(-50%);
  color:var(--ks-bar-val-color);
  font-size:var(--ks-bar-val-font);
  font-weight:700;
  pointer-events:none;
}
.cdj-ks-val.cdj-ks-val-active{
  color:var(--ks-bar-val-active-color);
}
/* .cdj-ks-reset-lbl supprimé — texte déjà dans le graphisme du bouton */
.cdj-ks-btn-c.cdj-ks-c-active .cdj-ks-val{
  color:var(--ks-bar-val-active-color);
}

/* Bouton droit [+] */
.cdj-ks-btn-r{
  flex:0 0 var(--ks-bar-btn-r-w);
  height:100%;
  background-color:transparent;
  background-size:100% 100%;
  background-repeat:no-repeat;
  border:none;
  cursor:pointer;
  padding:0;
  box-sizing:border-box;
  position:relative;
}
.cdj-ks-btn-r .cdj-ks-key-next{
  position:absolute;
  right:var(--ks-bar-key-next-right);
  top:var(--ks-bar-key-next-top);
  transform:translateY(-50%);
  color:var(--ks-bar-key-color);
  font-size:var(--ks-bar-key-font);
  font-weight:400;
  font-family:'Arial Narrow','Arial',sans-serif;
  letter-spacing:0.5px;
  pointer-events:none;
}

/* Zone des 4 paires actives */

.cdj-beat-jump-pairs{
  flex:1;
  display:flex;
  gap:4px;
}
/* Paire gauche/droite pour une valeur */
.cdj-beat-jump-pair{
  flex:1;
  display:flex;
  gap:1px;
}
.cdj-beat-jump-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#111116;
  background-size:100% 100%;
  background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.80);
  font-size:var(--beat-jump-btn-font-size);
  font-family:inherit;
  font-weight:600;
  letter-spacing:0.04em;
  border-radius:2px;
  cursor:pointer;
  padding:0;
  transition:filter 0.08s, color 0.08s, border-color 0.08s;
  position:relative;
}
.cdj-beat-jump-btn:hover{
  filter:brightness(1.25);
  color:#fff;
}
.cdj-beat-jump-btn.is-active{
  color:#fff;
  font-weight:700;
  filter:brightness(1.3) sepia(0.4) hue-rotate(160deg) saturate(3);
}
.cdj-beat-jump-btn .bj-val{
  font-size:var(--beat-jump-btn-font-size);
  line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,0.9);
}
/* Sélecteur de groupe 1|2 */
.cdj-beat-jump-group-sel{
  flex:0 0 48px;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.cdj-beat-jump-grp-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111116;
  border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.55);
  font-size:11px;
  font-weight:700;
  font-family:inherit;
  border-radius:2px;
  cursor:pointer;
  transition:background 0.08s, color 0.08s;
}
.cdj-beat-jump-grp-btn:hover{
  background:#1e1e26;
  color:rgba(255,255,255,0.85);
}
.cdj-beat-jump-grp-btn.is-active{
  background:#00aac8;
  border-color:#00ccee;
  color:#fff;
}

.cdj-player .cdj-main-hud{
  position:absolute;
  left:var(--zone-main-x);
  top:var(--zone-main-y);
  width:var(--zone-main-w);
  height:calc(var(--zone-main-h) + var(--zone-main-band-h));
  z-index: 20;
  pointer-events:none;
}

.cdj-player .cdj-loop-badge{
  position:absolute;
  left:calc(var(--zone-main-x) + var(--zone-main-w) / 2 + var(--wf-loop-badge-offset-x));
  top:calc(var(--zone-main-y) + var(--zone-main-h) + var(--wf-loop-badge-offset-y));
  display:none;
  align-items:center;
  gap:var(--wf-loop-badge-gap);
  white-space:nowrap;
  z-index:203;
  pointer-events:none;
}

.cdj-player .cdj-loop-badge-icon{
  display:inline-flex;
  align-items:center;
  font-size:var(--wf-loop-badge-icon-font-size);
  line-height:1;
}
.cdj-player .cdj-loop-badge-icon svg{
  width:var(--wf-loop-badge-icon-font-size);
  height:var(--wf-loop-badge-icon-font-size);
  display:block;
}

.cdj-player .cdj-loop-badge-value{
  font:700 var(--wf-loop-value-font-size) Arial, sans-serif;
  line-height:1;
}

.cdj-player .cdj-wave-overview{
  position:absolute;
  left:var(--zone-overview-x);
  top:var(--zone-overview-y);
  width:var(--zone-overview-w);
  height:var(--zone-overview-h);
  background:var(--wave-bg);
  z-index: 1;
}

/* Texte */
.cdj-player .cdj-text{
  position:absolute;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index: 1;
}

.cdj-player .cdj-title{
  left:var(--zone-title-x);
  top:calc(var(--zone-title-y) + 6px);
  width:var(--zone-title-w);
  font-size:18px;
  line-height:18px;
  padding-right:0;
  height:38px; /* allow 2nd line for duration */
}

/* Track header: duration (right of title bar) */
.cdj-player .cdj-title::after{
  /* Track subtitle line: duration + BPM + key (CDJ style) */
  content: var(--cdj-track-sub, var(--cdj-track-dur, ""));
  position:absolute;
  left: 0;
  top: 20px;
  width: auto;
  max-width: 260px;
  text-align:left;
  font-size:18px;
  line-height:1.1;
  color: rgba(255,255,255,0.8);
  white-space:nowrap;
}

/* Track header: thumbnail (left of title) + duration (right) */
.cdj-player .cdj-layer-ui::before{
  content:'';
  position:absolute;
  /* Values aligned to validated inspector tuning */
  left: calc(var(--zone-title-x) - 70px);
  top: calc(var(--zone-title-y) + 0px);
  width:50px;
  height:50px;
  background-image: var(--cdj-track-thumb, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
  opacity: 0.95;
  pointer-events:none;
  z-index: 1;
}

/* Track header: download icon (left of thumbnail) */
.cdj-player .cdj-track-download{
  position:absolute;
  left: calc(var(--zone-title-x) - 120px);
  top: calc(var(--zone-title-y) + 0px);
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.35);
  border-radius: 3px;
  opacity: 0.95;
  z-index: 1;
  text-decoration:none;
}

.cdj-player .cdj-track-download img{
  width: 36px;
  height: 36px;
  transform: translateY(1px);
  display:block;
}

.cdj-player .cdj-track-download.is-hidden{
  opacity: 0;
  pointer-events:none;
}

/* Time centré sur tête de lecture: JS positionne left en px via --cdj-playhead-x */
.cdj-player .cdj-clock{
  top:var(--zone-time-y);
  left: var(--zone-time-x);
  width: var(--zone-time-w);
  font-size:48px;
  letter-spacing:1px;
  text-align:center;
  transform: translateX(calc(var(--cdj-clock-shift, 0px)));
}

.cdj-player .cdj-clock.is-centered{
  left: var(--cdj-playhead-x, 50%);
  width: auto;
  transform: translateX(-50%);
}

.cdj-player .cdj-clock .ms{
  font-size: 0.60em;
  opacity: 0.95;
}

/* ── Étiquette AUTO CUE ── */
.cdj-player .cdj-autocue-label{
  position:absolute;
  left: var(--autocue-label-x);
  top:  var(--autocue-label-y);
  width: var(--autocue-label-w);
  height: var(--autocue-label-h);
  display:none;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid #ffffff;
  color:#ffffff;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.10em;
  text-transform:uppercase;
  pointer-events:none;
  z-index:25;
  box-sizing:border-box;
}
.cdj-player.is-autocue .cdj-autocue-label{
  display:flex;
}

/* ── Étiquette HOT CUE (au-dessus de AUTO CUE) ── */
.cdj-player .cdj-hotcuelabel{
  position:absolute;
  left: var(--hotcue-label-x);
  top:  var(--hotcue-label-y);
  width: var(--hotcue-label-w);
  height: var(--hotcue-label-h);
  display:none;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid #ff2200;
  color:#ff2200;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.10em;
  text-transform:uppercase;
  pointer-events:none;
  z-index:25;
  box-sizing:border-box;
}
.cdj-player.is-hotcue-autoload .cdj-hotcuelabel{
  display:flex;
}

.cdj-player .cdj-bpm{
  left:calc(var(--zone-bpm-frame-x) - 6px);
  top:calc(var(--zone-bpm-frame-y) + 22px);
  width:calc(var(--zone-bpm-frame-w) - 4px);
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:100;
  text-align:center;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  font-family:"CDJDisplay", Arial, sans-serif;
  letter-spacing:1px;
  text-shadow:0 0 6px rgba(255,255,255,0.25);
  color:var(--bpm-digits-color,#ffffff);
}

/* Bouton Play/Pause (image) */
.cdj-player .cdj-btn-play{
  position:absolute;
  left: calc(var(--btn-play-x) - (var(--btn-play-size) / 2));
  top:  calc(var(--btn-play-y) - (var(--btn-play-size) / 2));
  width: var(--btn-play-size);
  height: var(--btn-play-size);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 1; /* UI layer (under mask layer) */
  animation: cdj-play-blink 1s steps(1,end) infinite;
}
/* Blink: piloté uniquement par le JS (swap play_on / play_off) pour conserver la teinte réelle.
   On désactive toute animation CSS basée sur l'opacité qui "voile" le bouton. */
.cdj-player.is-paused .cdj-btn-play,
.cdj-player.is-playing .cdj-btn-play,
.cdj-player .cdj-btn-play,
.cdj-player .cdj-btn-play img{
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.cdj-player .cdj-btn-play img{ width:100%; height:100%; display:block; }

/* Eviter le flash au refresh: on affiche les boutons uniquement apres chargement du masque */
.cdj-player:not(.cdj-mask-loaded) .cdj-btn-play,
.cdj-player:not(.cdj-mask-loaded) .cdj-btn-playlist{
  opacity:0;
  pointer-events:none;
}

/* Bouton Playlist */
.cdj-player .cdj-btn-playlist{
  position:absolute;
  left: var(--btn-playlist-x);
  top:  var(--btn-playlist-y);
  width: var(--btn-playlist-w);
  height: var(--btn-playlist-h);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 1; /* UI layer (under mask layer) */
}
.cdj-player .cdj-btn-playlist img{ width:100%; height:100%; display:block; }

/* Bouton Menu */
.cdj-player:not(.cdj-mask-loaded) .cdj-btn-menu{
  opacity:0;
  pointer-events:none;
}
.cdj-player .cdj-btn-menu{
  position:absolute;
  left: var(--btn-menu-x);
  top:  var(--btn-menu-y);
  width: var(--btn-menu-w);
  height: var(--btn-menu-h);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 1; /* UI layer (under mask layer) */
}
.cdj-player .cdj-btn-menu img{ width:100%; height:100%; display:block; }

/* Overlay playlist */
.cdj-player .cdj-playlist{
  position:absolute;
  left: var(--zone-pl-x);
  top:  var(--zone-pl-y);
  width: var(--zone-pl-w);
  height: var(--zone-pl-h);
  background: #111114;
  border:1px solid rgba(255,255,255,0.12);
  overflow:hidden;
  z-index: 1;
  display:none;
}
.cdj-player .cdj-playlist-overlay{
  position:absolute;
  left: var(--zone-pl-x);
  top:  var(--zone-pl-y);
  width: var(--zone-pl-w);
  height: var(--zone-pl-h);
  background: #111114;
  border:1px solid rgba(255,255,255,0.12);
  overflow:hidden;
  z-index: 200; /* au-dessus du masque (z=50) et du ::before (z=20) */
  display:none;
}
.cdj-player.is-playlist-open .cdj-playlist,
.cdj-player.is-playlist-open .cdj-playlist-overlay{ display:block; }

/* Overlay menu */
.cdj-player .cdj-menu-overlay{
  position:absolute;
  left: var(--zone-pl-x);
  top:  var(--zone-pl-y);
  width: var(--zone-pl-w);
  height: var(--zone-pl-h);
  background: #111114;
  border:1px solid rgba(255,255,255,0.12);
  overflow:hidden;
  z-index: 1; /* overlay layer */
  display:none;
}
.cdj-player.is-menu-open .cdj-menu-overlay{ display:block; }

.cdj-menu-overlay .cdj-menu-inner{
  display:flex;
  flex-direction:column;
  height:100%;
}
.cdj-menu-overlay .cdj-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  height:34px;
  background:#1a1a1e;
  border-bottom:1px solid rgba(255,255,255,0.10);
  flex-shrink:0;
}
.cdj-menu-overlay .cdj-menu-title{
  color:#e0e0e0;
  font-size:18px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.cdj-menu-overlay .cdj-menu-close{
  background:transparent;
  border:0;
  color:#aaa;
  font-size:18px;
  cursor:pointer;
  line-height:1;
  padding:0 4px;
}
.cdj-menu-overlay .cdj-menu-close:hover{ color:#fff; }
.cdj-menu-overlay .cdj-menu-content{
  flex:1;
  overflow:hidden;
  padding:12px 12px 10px;
  display:flex;
  flex-direction:row;
  gap:0;
  align-items:stretch;
  background:#1a1c24;
}

/* ── Subtitle dans le header ── */
.cdj-menu-subtitle{
  color:#e0e0e0;
  font-size:18px;
  font-weight:700;
  letter-spacing:0.04em;
  margin-left:8px;
  flex:1;
}

/* ── 3 colonnes ── */
.cdj-ucol{
  display:flex;
  flex-direction:column;
}
.cdj-ucol-l{
  flex:0 0 340px;
  padding:12px 14px 12px 0;
}
.cdj-ucol-c{
  flex:0 0 230px;
  padding:12px 14px;
  background:#20222e;
  border-left:1px solid rgba(255,255,255,0.07);
  border-right:1px solid rgba(255,255,255,0.07);
}
.cdj-ucol-r{
  flex:1;
  padding:12px 0 12px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ── Blocs label+row ── */
.cdj-ublk{ margin-bottom:14px; }

/* ── Labels ── */
.cdj-ul{
  color:rgba(255,255,255,0.45);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin-bottom:7px;
  white-space:nowrap;
}
.cdj-ul-ms{
  color:rgba(255,255,255,0.50);
  font-size:9px;
  letter-spacing:0.14em;
  margin-bottom:8px;
}

/* ── Grilles ── */
.cdj-ur{
  display:grid;
  gap:4px;
}
.cdj-ug4{ grid-template-columns:repeat(4,1fr); }
.cdj-ug3{ grid-template-columns:repeat(3,1fr); }
.cdj-ug2{ grid-template-columns:repeat(2,1fr); }

/* ── Bouton base ── */
.cdj-ub{
  display:block;
  width:100%;
  height:36px;
  padding:0;
  background:#10121a;
  border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.72);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  border-radius:2px;
  cursor:pointer;
  text-align:center;
  line-height:36px;
  white-space:nowrap;
  overflow:hidden;
  transition:background .07s,border-color .07s,color .07s;
}
.cdj-ub:hover{
  background:#1c1f2c;
  border-color:rgba(255,255,255,0.28);
  color:#fff;
}
.cdj-ub.is-active{
  background:#00aac8;
  border-color:#00ccee;
  color:#fff;
}

/* ── Boutons WAVEFORM COLOR : bande couleur haute + label texte bas ── */
.cdj-wfb{
  height:54px;
  line-height:normal;
  display:flex;
  flex-direction:column;
  padding:20px 10px 0 10px;
  overflow:hidden;
  background:#10121a;
  border:1px solid rgba(255,255,255,0.15);
  box-sizing:border-box;
}
.cdj-wfband{
  flex:1 1 auto;
  display:block;
  width:100%;
  border:1px solid rgba(255,255,255,0.50);
  box-sizing:border-box;
  border-radius:1px;
}
.cdj-wftxt{
  display:block;
  width:100%;
  height:20px;
  line-height:20px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.05em;
  background:#10121a;
  color:rgba(255,255,255,0.75);
  flex-shrink:0;
}
.cdj-wfc-blue  .cdj-wfband{ background:#1a5ee8; border-color:rgba(255,255,255,0.55); }
.cdj-wfc-rgb   .cdj-wfband{ background:linear-gradient(90deg,#cc1100 0%,#cc1100 33.3%,#009922 33.3%,#009922 66.6%,#1144cc 66.6%,#1144cc 100%); border-color:rgba(255,255,255,0.55); }
.cdj-wfc-3band .cdj-wfband{ background:linear-gradient(90deg,#cc4400 0%,#cc4400 33.3%,#cc8800 33.3%,#cc8800 66.6%,#445599 66.6%,#445599 100%); border-color:rgba(255,255,255,0.55); }
.cdj-wfb.is-active{
  border:2px solid #00ccee;
}
.cdj-wfb.is-active .cdj-wfband{ border-color:rgba(255,255,255,0.80); }
.cdj-wfb.is-active .cdj-wftxt{
  background:#00aac8;
  color:#fff;
}
.cdj-wfb:hover{ filter:brightness(1.15); }

/* ── HOT CUE SETTING panel ── */
.cdj-hc-setting-panel{
  display:flex;
  gap:4px;
  margin-top:5px;
}
.cdj-hc-action-btn{
  flex:1;
  height:32px;
  line-height:32px;
  font-size:11px;
  background:#111420;
  border-color:rgba(255,255,255,0.20);
  color:rgba(255,255,255,0.70);
}
.cdj-hc-action-btn:hover{
  background:#1a1d2c;
  color:#fff;
}


.cdj-ul-kf{ margin-top:10px; }
.cdj-ub-kf{
  display:block; width:100%; margin-top:4px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.6); font-size:10px; letter-spacing:0.08em;
  padding:4px 6px; border-radius:3px; cursor:pointer; text-align:center;
}
.cdj-ub-kf.is-active{
  border-color:rgba(255,255,255,0.5); color:#fff; background:rgba(255,255,255,0.14);
}
.cdj-ub-ms{
  height:38px;
  line-height:38px;
  font-size:12px;
  background:#111420;
  border-color:rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.55);
}
.cdj-ub-ms:hover{
  background:#1a1d2c;
  color:rgba(255,255,255,0.80);
}

.cdj-playlist .cdj-pl-head{
  height: 34px;
  display:flex;
  align-items:center;
  padding: 0 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Variante markup "overlay" (patch2B) */
.cdj-playlist-overlay .cdj-playlist-inner{
  width:100%; height:100%;
  display:flex; flex-direction:row;
}
.cdj-playlist-overlay .cdj-playlist-head,
.cdj-playlist-overlay .cdj-playlist-head *{ box-sizing:border-box; }
.cdj-playlist-overlay .cdj-playlist-head{
  height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.05em;
  color: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.cdj-playlist-overlay .cdj-playlist-close{
  width:28px; height:28px;
  border:0; background:transparent; color:#fff;
  font-size:22px; line-height:1;
  cursor:pointer;
}

/* Content column (head + list) */
.cdj-playlist-overlay .cdj-pl-content{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Sidebar */
.cdj-playlist-overlay .cdj-pl-sidebar{
  width: 72px;
  min-width: 72px;
  height: 100%;
  background: #0d0d10;
  border-right: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cdj-pl-sort-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px 4px 7px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.38);
  cursor: default;
  gap: 3px;
  box-sizing: border-box;
}
.cdj-pl-sort-btn.is-sortable{ cursor: pointer; }
.cdj-pl-sort-btn.is-active{
  color: #3adf6a;
  background: rgba(58,223,106,0.08);
}
.cdj-pl-sort-btn.is-sortable:hover:not(.is-active){
  color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.05);
}
.cdj-pl-sort-icon{ font-size: 17px; line-height: 1; }
.cdj-pl-sort-label{
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}
.cdj-playlist-overlay .cdj-playlist-list{
  flex:1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  min-height: 0;
}
.cdj-playlist-overlay .cdj-playlist-list::-webkit-scrollbar{ display:none; }

/* Header row */
.cdj-playlist-overlay .cdj-pl-header{
  display: grid;
  grid-template-columns: 40px 154px 38px minmax(0,2fr) minmax(0,1.2fr) 52px 44px;
  align-items: center;
  height: 26px;
  padding: 0 6px;
  background: #0d0d10;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
}
.cdj-playlist-overlay .cdj-pl-hcol{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.60);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3px;
}
.cdj-playlist-overlay .cdj-pl-hcol.bpm,
.cdj-playlist-overlay .cdj-pl-hcol.key,
.cdj-playlist-overlay .cdj-pl-hcol.num{ text-align: right; }

/* Mobile/tablette: désactiver le player (FO) */
@media (max-width: 1024px), (pointer: coarse){
  .cdj-player-host:not(.is-mobile-allowed){ display:none !important; }
}

.cdj-playlist .cdj-pl-body{
  height: calc(100% - 34px);
  overflow:auto;
  overscroll-behavior: contain;
}

.cdj-playlist table{ width:100%; border-collapse:collapse; font-size: 15px; }
.cdj-playlist td{ height: 50px;
  padding: 0 8px; color: rgba(255,255,255,0.9); border-bottom: 1px solid rgba(255,255,255,0.06); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cdj-playlist td.col-thumb{ width: 50px; }
.cdj-playlist td.col-title{ width: 340px; }
.cdj-playlist td.col-artist{ width: 200px; color: rgba(255,255,255,0.75); }
.cdj-playlist td.col-duration{ width: 70px; text-align:right; color: rgba(255,255,255,0.75); }
.cdj-playlist td.col-style{ width: 90px; color: rgba(255,255,255,0.75); }

.cdj-playlist .cdj-pl-thumb,
.cdj-playlist-overlay .cdj-pl-thumb{
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 2px;
  display:block;
}

/* grid: thumb | preview | # | track | artist | bpm | key */
.cdj-playlist-overlay .cdj-pl-row{
  display: grid;
  grid-template-columns: 40px 154px 38px minmax(0,2fr) minmax(0,1.2fr) 52px 44px;
  gap: 0;
  align-items: center;
  height: 44px;
  padding: 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

/* Lignes alternées */
.cdj-playlist-overlay .cdj-pl-row:nth-child(odd){  background: rgba(0,0,0,0.18); }
.cdj-playlist-overlay .cdj-pl-row:nth-child(even){ background: rgba(255,255,255,0.04); }
.cdj-playlist-overlay .cdj-pl-row:hover{           background: rgba(33,115,255,0.40); }
.cdj-playlist-overlay .cdj-pl-row.is-active{       background: rgba(33,115,255,0.55); }
.cdj-playlist-overlay .cdj-pl-row.is-active:hover{ background: rgba(33,115,255,0.65); }

/* Variante table (fallback) */
.cdj-playlist tr:nth-child(odd) td{ background: rgba(0,0,0,0.14); }
.cdj-playlist tr:nth-child(even) td{ background: rgba(255,255,255,0.055); }
.cdj-playlist tr:hover td{ background: rgba(33,115,255,0.40); }
.cdj-playlist tr.is-active td{ background: rgba(33,115,255,0.55); }
.cdj-playlist tr.is-active:hover td{ background: rgba(33,115,255,0.65); }

.cdj-playlist-overlay .cdj-pl-col{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3px;
}

/* Thumb */
.cdj-playlist-overlay .cdj-pl-col.thumb{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cdj-playlist .cdj-pl-thumb,
.cdj-playlist-overlay .cdj-pl-thumb{
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

/* Preview / waveform */
.cdj-playlist-overlay .cdj-pl-col.preview{
  display: flex;
  align-items: center;
  padding: 0 2px;
}
.cdj-playlist-overlay canvas.cdj-pl-wave{
  display: block;
  width: 150px;
  height: 34px;
  border-radius: 2px;
  background: #060606;
  cursor: crosshair;
}

/* # */
.cdj-playlist-overlay .cdj-pl-col.num{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  color: rgba(255,255,255,0.42);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 0 4px 0 0;
}
.cdj-playlist-overlay .cdj-pl-num{ display: block; }
.cdj-playlist-overlay .cdj-pl-playing{
  display: none;
  color: #3adf6a;
  font-size: 11px;
}
.cdj-playlist-overlay .cdj-pl-row.is-active .cdj-pl-num{ display: none; }
.cdj-playlist-overlay .cdj-pl-row.is-active .cdj-pl-playing{ display: block; }

/* Track / Artist */
.cdj-playlist-overlay .cdj-pl-col.track{
  font-size: 14px;
  color: rgba(255,255,255,0.95);
  padding-left: 6px;
}
.cdj-playlist-overlay .cdj-pl-col.artist{
  font-size: 13px;
  color: rgba(255,255,255,0.62);
}

/* BPM / KEY */
.cdj-playlist-overlay .cdj-pl-col.bpm{
  text-align: right;
  font-size: 13px;
  color: rgba(255,255,255,0.88);
  font-variant-numeric: tabular-nums;
}
.cdj-playlist-overlay .cdj-pl-col.key{
  text-align: right;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
}

/* Quand la playlist est ouverte, on gèle visuellement l'animation: JS stoppe le RAF */

/* --- EVO02 STEP3: preload message + loading overlay (FO only) --- */
.cdj-title.cdj-preload-msg{
  color: #ff2b2b !important;
  animation: cdj-preload-blink 1s steps(1,end) infinite;
}
@keyframes cdj-preload-blink{
  50%{ opacity: 0.2; }
}

.cdj-loading-overlay{
  position: absolute;
  left: var(--zone-main-x);
  top:  var(--zone-main-y);
  width: var(--zone-main-w);
  height: calc(var(--zone-overview-y) + var(--zone-overview-h) - var(--zone-main-y));
  background: rgba(0,0,0,0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 16;
  pointer-events: none;
}
.cdj-loading-overlay.is-visible{
  display: flex;
}
.cdj-loading-box{
  width: 58%;
  max-width: 420px;
  text-align: center;
}
.cdj-loading-text{
  font-size: 22px;
  font-weight: 700;
  color: #2f7bd6;
  margin-bottom: 14px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.cdj-loading-bar{
  width: 100%;
  height: 18px;
  border-radius: 2px;
  background: rgba(255,255,255,0.22);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}
.cdj-loading-bar-fill{
  height: 100%;
  width: 0%;
  background: rgba(47,123,214,0.9);
  transition: width .15s linear;
}

/* BEAT GRID button (static element; should not overlap PLAY LIST) */
.cdj-player .cdj-btn-beatgrid{
  position:absolute;
  left: var(--btn-beatgrid-left);
  top:  var(--btn-beatgrid-top);
  width: var(--btn-beatgrid-w);
  height: var(--btn-beatgrid-h);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 1; /* UI layer */
}
.cdj-player .cdj-btn-beatgrid img{ width:100%; height:100%; display:block; }

.cdj-player .cdj-btn-beatloop,
.cdj-player .cdj-btn-beatjump{
  position:absolute;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 1;
  display:none; /* caché jusqu'au load track */
}
.cdj-player .cdj-btn-beatloop{
  left: var(--btn-beatloop-left);
  top:  var(--btn-beatloop-top);
  width: var(--btn-beatloop-w);
  height: var(--btn-beatloop-h);
}
.cdj-player .cdj-btn-beatjump{
  left: var(--btn-beatjump-left);
  top:  var(--btn-beatjump-top);
  width: var(--btn-beatjump-w);
  height: var(--btn-beatjump-h);
}
.cdj-player .cdj-btn-beatloop img,
.cdj-player .cdj-btn-beatjump img{ width:100%; height:100%; display:block; }

/* Bouton KEY SHIFT */
.cdj-player .cdj-btn-keyshift{
  position:absolute;
  left: var(--btn-keyshift-left);
  top:  var(--btn-keyshift-top);
  width: var(--btn-keyshift-w);
  height: var(--btn-keyshift-h);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 1;
  display:none; /* caché jusqu'au load track */
}
.cdj-player .cdj-btn-keyshift img{ width:100%; height:100%; display:block; }
.cdj-player.is-menu-open .cdj-btn-keyshift,
.cdj-player.is-playlist-open .cdj-btn-keyshift{ display:none !important; }

/* Masquer les 3 boutons si playlist ou menu ouvert */
.cdj-player.is-playlist-open .cdj-btn-beatloop,
.cdj-player.is-playlist-open .cdj-btn-beatjump,
.cdj-player.is-menu-open .cdj-btn-beatloop,
.cdj-player.is-menu-open .cdj-btn-beatjump{ display:none !important; }

.cdj-player.is-playlist-open .cdj-btn-beatgrid{
  z-index: 1; /* UI layer */
}

@keyframes cdj-play-blink{
  50%{ opacity: 0.15; }
}

/* ------------------------------------------------------------
   BEAT4 INDICATOR (1-2-3-4) — visual only, never blocks clicks
   Layering: ABOVE mask (z=50) but BELOW BEAT GRID (inline z=70)
------------------------------------------------------------ */
.cdj-beat4 {
  position: absolute;
  left: var(--zone-beat4-x);
  top: var(--zone-beat4-y);
  width: var(--zone-beat4-w);
  height: var(--zone-beat4-h);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}

/* BEAT4 lives on the same overlay family as the DJ buttons, but underneath them */
.cdj-player .cdj-layer-overlay .cdj-beat4{
  z-index: 1;
  pointer-events: none;
}

/* ------------------------------------------------------------
   BEAT4 INDICATOR — LED LOOK OVERRIDE (less "lego")
   - More pill shape
   - Glossy highlight + inner glow
   - Softer edges
   ------------------------------------------------------------ */

.cdj-beat4 .cdj-beat4-seg{
  flex: 0 0 34px;
  width: 34px;
  height: 10px;

  border-radius: 0px; /* 999px for pill */
  opacity: 0.14;        /* more "off" */
  background: linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0.18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 3px rgba(0,0,0,.55);
}

/* ON state — downbeat red */
.cdj-beat4.is-b1 .cdj-beat4-seg:nth-child(1){
  background: linear-gradient(to bottom, #ff6b6e 0%, #E60C0F 55%, #7a0406 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 3px rgba(0,0,0,.60),
    0 0 6px rgba(230,12,15,.55),
    0 0 14px rgba(230,12,15,.18);
  opacity: 1;
}

/* ON state — beats 2-4 blue */
.cdj-beat4.is-b2 .cdj-beat4-seg:nth-child(2),
.cdj-beat4.is-b3 .cdj-beat4-seg:nth-child(3),
.cdj-beat4.is-b4 .cdj-beat4-seg:nth-child(4){
  background: linear-gradient(to bottom, #6d8cff 0%, #2A48BC 55%, #0f1e63 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 3px rgba(0,0,0,.60),
    0 0 6px rgba(42,72,188,.50),
    0 0 14px rgba(42,72,188,.16);
  opacity: 1;
}

.cdj-text.cdj-bpm.is-longmix{
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  line-height:1.05;
  text-align:center;
  white-space:pre-line;
  animation:tmtlBlinkLongMix 0.9s steps(1,end) infinite;
}
@keyframes tmtlBlinkLongMix{0%{opacity:1;}50%{opacity:.15;}100%{opacity:1;}}

/* ------------------------------------------------------------
   LONG MIX (BPM box) — dedicated styling, does not affect normal BPM
------------------------------------------------------------ */
.cdj-player .cdj-bpm.is-longmix{
  top: calc(var(--zone-bpm-y) + 12px);
  font-size: 22px;
  text-align: center;
  white-space: nowrap;
}

/* ============================================================
   LONG MIX — STYLE DEDIE (override safe)
   - ne touche pas aux BPM normaux
   - force la prise en compte (specificity + !important)
============================================================ */
.cdj-player .cdj-text.cdj-bpm.is-longmix{
  font-size: 16px !important;
  top: calc(var(--zone-bpm-y) + 12px) !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* ============================================================
   UI LEFT STACK (PLAYER / QUANTIZE / BEAT JUMP) — CDJ-3000 TABLE
   - Boxes same size (JS normalizes zones)
   - Gap between boxes = 2px (JS)
   - Center content + uniform typography
   ============================================================ */

.cdj-player .cdj-dj-btn.cdj-playerid-btn,
.cdj-player .cdj-dj-btn.cdj-quantize-btn,
.cdj-player .cdj-dj-btn.cdj-beatjump-btn{
  position:absolute;
  box-sizing:border-box;
  overflow:hidden;
  --ls-title-top: 7px;
  --ls-value-top: 68%;
}

/* Grey frames (same thickness as reference) */
.cdj-player .cdj-dj-btn.cdj-playerid-btn,
.cdj-player .cdj-dj-btn.cdj-beatjump-btn{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}

/* Titles: keep off the frame */
.cdj-player .cdj-dj-btn.cdj-playerid-btn::before,
.cdj-player .cdj-dj-btn.cdj-quantize-btn::before,
.cdj-player .cdj-dj-btn.cdj-beatjump-btn::before{
  top: var(--ls-title-top);
}

/* ============================================================
   LEFT STACK — hard CSS anchors for the new mask
   Non destructive: only overrides inline geometry for the left block
   and keeps all other UI/DSP behaviour intact.
   ============================================================ */
.cdj-player .cdj-dj-btn.cdj-playerid-btn,
.cdj-player .cdj-dj-btn.cdj-quantize-btn,
.cdj-player .cdj-dj-btn.cdj-beatjump-btn{
  visibility: visible !important;
  opacity: 1 !important;
}

.cdj-player .cdj-dj-btn.cdj-playerid-btn{
  left: var(--leftstack-x) !important;
  top: var(--playerid-y) !important;
  width: var(--playerid-w) !important;
  height: var(--playerid-h) !important;
  z-index: var(--leftstack-z) !important;
}

.cdj-player .cdj-dj-btn.cdj-quantize-btn{
  left: var(--leftstack-x) !important;
  top: var(--quantize-y) !important;
  width: var(--quantize-w) !important;
  height: var(--quantize-h) !important;
  z-index: var(--leftstack-z) !important;
}

.cdj-player .cdj-dj-btn.cdj-beatjump-btn{
  left: var(--leftstack-x) !important;
  top: var(--beatjump-y) !important;
  width: var(--beatjump-w) !important;
  height: var(--beatjump-h) !important;
  z-index: var(--leftstack-z) !important;
}

.cdj-player .cdj-layer-ui::after{
  content:'';
  position:absolute;
  left: var(--zone-bpm-frame-x);
  top:  var(--zone-bpm-frame-y);
  width: var(--zone-bpm-frame-w);
  height: var(--zone-bpm-frame-h);
  box-sizing: border-box;
  border: 1px solid var(--bpm-frame-border, var(--bpm-frame-border-default));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.85); /* inner 1px hollow */
  background: transparent;
  border-color: var(--bpm-frame-border, var(--bpm-frame-border-default));
  pointer-events:none;
  z-index: 2;
}

/* Background inside BPM frame (never filled; modes change border only) */
.cdj-player .cdj-ui-bpm-bg{
  position:absolute;
  left: var(--zone-bpm-frame-x);
  top:  var(--zone-bpm-frame-y);
  width: var(--zone-bpm-frame-w);
  height: var(--zone-bpm-frame-h);
  background: transparent;
  pointer-events:none;
  z-index: 1;
}

/* BPM value stays where it is; just switch color in MASTER */
/* Labels in BPM box */
.cdj-player .cdj-ui-bpm-label,
.cdj-player .cdj-ui-bpm-master,
.cdj-player .cdj-ui-mt-tag{
  position:absolute;
  font-family: Arial, sans-serif;
  font-size: var(--bpm-tag-font);
  line-height: 1;
  letter-spacing: 0.5px;
  z-index: 3;
  pointer-events:auto;
  user-select:none;
}

.cdj-player .cdj-ui-bpm-label{
  left: calc(var(--zone-bpm-frame-x) + 5px);
  top:  calc(var(--zone-bpm-frame-y) + 5px);
  color: rgba(255,255,255,0.85);
  display:block !important;
}

/* MASTER tag: always orange label (CDJ style) */
.cdj-player .cdj-ui-bpm-master{
  right: calc(100% - (var(--zone-bpm-frame-x) + var(--zone-bpm-frame-w) - 1px));
  top:   calc(var(--zone-bpm-frame-y) + 1px);
  padding: var(--bpm-tag-pad-y) var(--bpm-tag-pad-x);
  border-radius: var(--bpm-tag-radius);
  border: 0;
  color: var(--bpm-tag-fg-master);
  background: var(--bpm-tag-bg-master);
  opacity: 1;
}

/* MT tag under BPM box */
.cdj-player .cdj-ui-mt-tag{
  left: calc(var(--zone-bpm-frame-x) + var(--zone-bpm-frame-w) - 60px);
  top:  calc(var(--zone-bpm-frame-y) + var(--zone-bpm-frame-h) + 12px);
  width: 50px;
  text-align:center;
  padding: 1px 0;
  border-radius: var(--bpm-tag-radius);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
  background: transparent;
  opacity: 0.45;
}
/* MASTER deck button (top-right) */
.cdj-player .cdj-btn-masterdeck{
  position:absolute;
  left: var(--btn-masterdeck-x);
  top:  var(--btn-masterdeck-y);
  width: var(--btn-masterdeck-w);
  height: var(--btn-masterdeck-h);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 3;
}
.cdj-player .cdj-btn-masterdeck img{ width:100%; height:100%; display:block; }

/* Master Tempo clickable zone + LED */
.cdj-player .cdj-btn-mastertempo{
  position:absolute;
  left: var(--btn-mastertempo-x);
  top:  var(--btn-mastertempo-y);
  width: var(--btn-mastertempo-w);
  height: var(--btn-mastertempo-h);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 3;
}
.cdj-player .cdj-btn-mastertempo .cdj-ui-mt-led{
  position:absolute;
  right: 14px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,0,0,0);
  box-shadow:none;
}
.cdj-player.is-mt-on .cdj-btn-mastertempo .cdj-ui-mt-led{
  background: rgba(255,0,0,0.95);
  box-shadow: 0 0 6px rgba(255,0,0,0.55);
}

/* === BPM MODES (CDJ-3000 faithful) ===
   Priority: MASTER > MASTER TEMPO > SYNC > NORMAL
   Notes:
   - Frame border is drawn by .cdj-layer-ui::after
   - MASTER/SYNC label reuses .cdj-ui-bpm-master element
*/

/* SYNC (slave) */
.cdj-player.is-sync:not(.is-master):not(.is-mt-on){
  --bpm-frame-border: var(--bpm-frame-border-sync);
  --bpm-digits-color: var(--bpm-digits-sync);
}

/* MASTER TEMPO (MT) */
.cdj-player.is-mt-on:not(.is-master){
  --bpm-frame-border: var(--bpm-frame-border-mt);
  --bpm-digits-color: var(--bpm-digits-mt);
}

/* MASTER (deck) */
.cdj-player.is-master{
  --bpm-frame-border: var(--bpm-frame-border-master);
  --bpm-digits-color: var(--bpm-digits-master);
}

/* MASTER tag visibility: only when MASTER or SYNC */
.cdj-player:not(.is-master):not(.is-sync) .cdj-ui-bpm-master{ display:none !important; }

/* SYNC uses same tag element: replace text with pseudo-content */
.cdj-player.is-sync:not(.is-master) .cdj-ui-bpm-master{
  background: var(--bpm-tag-bg-sync) !important;
  color: transparent !important; /* hide "MASTER" text */
  position: absolute;
}
.cdj-player.is-sync:not(.is-master) .cdj-ui-bpm-master::before{
  content: "SYNC";
  color: var(--bpm-tag-fg-sync);
}

/* MASTER tag colors from vars */
.cdj-player.is-master .cdj-ui-bpm-master{
  background: var(--bpm-tag-bg-master) !important;
  color: var(--bpm-tag-fg-master) !important;
}

/* MT tag colors from vars */
.cdj-player.is-mt-on .cdj-ui-mt-tag{
  background: var(--bpm-tag-bg-mt) !important;
  color: var(--bpm-tag-fg-mt) !important;
  opacity: 1 !important;
}

.cdj-player .cdj-tempo-percent{
  font-size:0.40em;
  position:relative;
  top:-3px;
  margin-left:-1px;
  opacity:0.95;
}

.cdj-btn-cue{
position:absolute;
left:var(--btn-cue-x);
top:var(--btn-cue-y);
width:var(--btn-cue-size);
height:var(--btn-cue-size);
border:0;
background:transparent;
cursor:pointer;
z-index:5;
}
.cdj-btn-cue img{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.cdj-btn-cue .cue-on{opacity:0}
.cdj-btn-cue.is-on .cue-on{opacity:1}
.cdj-btn-cue.is-on .cue-off{opacity:0}
@keyframes cdjCueBlink{50%{opacity:0.2}}
.cdj-btn-cue.blink{animation:cdjCueBlink 1s infinite;}

.cdj-player .cdj-tempo-reset-hitbox{
 position:absolute;
 left:var(--tempo-reset-x);
 top:var(--tempo-reset-y);
 width:var(--tempo-reset-w);
 height:var(--tempo-reset-h);
 z-index:50;
 cursor:pointer;
}

/* LEFT FLANK — SLIP / QUANTIZE / ROCKER */
.cdj-player .cdj-dj-btn.cdj-slip-ui,
.cdj-player .cdj-dj-btn.cdj-qtz-side-ui,
.cdj-player .cdj-dj-btn.cdj-rocker-ui{
  z-index: 61;
}

/* ── Playlist panel (volet playlists) ─────────────────────────────────── */
.cdj-pl-playlist-panel {
  position: absolute;
  top: 0; left: 72px;
  width: 220px;
  max-height: 100%;
  background: #0d0d10;
  border-right: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 4px 0 16px rgba(0,0,0,0.6);
}
.cdj-pl-playlist-panel-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.cdj-pl-playlist-panel-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.cdj-pl-playlist-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.65);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.cdj-pl-playlist-item:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.cdj-pl-playlist-item.is-active {
  color: #3adf6a;
  background: rgba(58,223,106,0.08);
}
.cdj-pl-sort-btn[data-sort="playlist"] {
  cursor: pointer;
}

/* ============================================================
   NO-TRACK STATE : masquer les infos d'état quand aucun track
   ============================================================ */
.cdj-player:not(.has-track) .cdj-playerid-btn,
.cdj-player:not(.has-track) .cdj-quantize-btn,
.cdj-player:not(.has-track) .cdj-beatjump-btn {
  visibility: hidden !important;
  opacity: 0 !important;
}
.cdj-player:not(.has-track) .cdj-clock,
.cdj-player:not(.has-track) .cdj-bpm,
.cdj-player:not(.has-track) .cdj-ui-bpm-bg,
.cdj-player:not(.has-track) .cdj-ui-bpm-label,
.cdj-player:not(.has-track) .cdj-ui-bpm-master,
.cdj-player:not(.has-track) .cdj-ui-mt-tag,
.cdj-player:not(.has-track) .cdj-tempo-display,
.cdj-player:not(.has-track) .cdj-tempo-range-label,
.cdj-player:not(.has-track) .cdj-tempo-range-box {
  visibility: hidden;
}
/* Rectangle BPM (pseudo-élément ::after sur .cdj-layer-ui) */
.cdj-player:not(.has-track) .cdj-layer-ui::after {
  opacity: 0;
}
/* Étiquettes AUTO CUE et HOT CUE — masquées sans track */
.cdj-player:not(.has-track) .cdj-autocue-label,
.cdj-player:not(.has-track) .cdj-hotcuelabel {
  display: none !important;
}
/* Message "Cliquez sur PLAY LIST" — masqué (remplacé par l'écran de bienvenue) */
.cdj-player:not(.has-track) .cdj-title.cdj-preload-msg {
  display: none !important;
}

/* ============================================================
   LIGNE DE SÉPARATION waveform / overview — visible seulement
   quand un track est chargé (remplace la ligne du masque PNG)
   ============================================================ */
.cdj-player.has-track .cdj-layer-wave::after {
  content: '';
  position: absolute;
  left:   var(--zone-main-x);
  top:    calc(var(--zone-main-y) + var(--zone-main-h) + var(--zone-main-band-h));
  width:  var(--zone-main-w);
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(80,80,80,0) 0%,
    rgba(110,110,110,0.85) 4%,
    rgba(110,110,110,0.85) 96%,
    rgba(80,80,80,0) 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* ============================================================
   FONT Musieer (Padawan DJ welcome screen)
   ============================================================ */
@font-face {
  font-family: 'Musieer';
  src: url('../fonts/Musieer.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ============================================================
   WELCOME SCREEN — visible uniquement sans track
   ============================================================ */
.cdj-player .cdj-welcome {
  display: none;
}
.cdj-player:not(.has-track) .cdj-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  position: absolute;
  left:   var(--zone-main-x);
  top:    var(--zone-main-y);
  width:  var(--zone-main-w);
  height: calc(var(--zone-overview-y) + var(--zone-overview-h) - var(--zone-main-y));
  pointer-events: none;
  z-index: 15;
  overflow: hidden;
}



/* Logo Padawan DJ — texte 3D CSS */
.cdj-welcome-logo {
  font-family: 'Musieer', sans-serif;
  font-size: 54px;
  letter-spacing: 4px;
  /* Extrusion 3D : empilement de text-shadow progressif */
  color: #e8001e;
  text-shadow:
    0px 1px 0px #b50018,
    0px 2px 0px #a20015,
    0px 3px 0px #8f0012,
    0px 4px 0px #7c000f,
    0px 5px 0px #69000c,
    0px 6px 2px rgba(0,0,0,0.6),
    0px 8px 6px rgba(0,0,0,0.35),
    0px 12px 14px rgba(0,0,0,0.2);
  /* shimmer : sweep lumineux très subtil sur la face */
  background: linear-gradient(
    105deg,
    #c8001a 0%,
    #c8001a 30%,
    #ff5555 44%,
    #ffffff 50%,
    #ff5555 56%,
    #c8001a 70%,
    #c8001a 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* L'extrusion passe par filter, le shimmer par background */
  filter: drop-shadow(0 0 10px rgba(200, 0, 26, 0.4))
          drop-shadow(0 6px 4px rgba(0,0,0,0.5));
  animation: cdj-welcome-shimmer 4s ease-in-out infinite;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@keyframes cdj-welcome-shimmer {
  0%   { background-position: 200% center; }
  50%  { background-position: -100% center; }
  100% { background-position: 200% center; }
}

/* By YOYO DA */
.cdj-welcome-by {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
}

/* Logo avatar */
.cdj-welcome-avatar {
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0.70;
  filter: drop-shadow(0 0 6px rgba(200, 0, 26, 0.25));
}

/* ============================================================
   PLAY LIST button — glow dans le layer overlay (z>masque)
   ============================================================ */
.cdj-player .cdj-playlist-glow {
  display: none;
}
.cdj-player:not(.has-track) .cdj-playlist-glow {
  display: block;
  position: absolute;
  left:   var(--btn-playlist-x);
  top:    var(--btn-playlist-y);
  width:  var(--btn-playlist-w);
  height: var(--btn-playlist-h);
  border-radius: 3px;
  pointer-events: none;
  box-shadow:
    0 0 6px  3px rgba(5, 154, 229, 0.55),
    0 0 16px 6px rgba(5, 154, 229, 0.28),
    0 0 32px 8px rgba(5, 154, 229, 0.12);
  animation: cdj-playlist-glow 2.5s ease-in-out infinite;
}

@keyframes cdj-playlist-glow {
  0%, 100% {
    box-shadow:
      0 0 6px  3px rgba(5, 154, 229, 0.55),
      0 0 16px 6px rgba(5, 154, 229, 0.28),
      0 0 32px 8px rgba(5, 154, 229, 0.12);
  }
  50% {
    box-shadow:
      0 0 10px 4px rgba(5, 154, 229, 0.80),
      0 0 24px 8px rgba(5, 154, 229, 0.45),
      0 0 44px 12px rgba(5, 154, 229, 0.18);
  }
}

/* ── KEY display bas-droite ───────────────────────────────────────── */
.cdj-key-display{
  position:absolute;
  left:var(--key-display-x);
  top:var(--key-display-y);
  width:var(--key-display-w);
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
  z-index:201;
  line-height:1;
}
.cdj-key-display-lbl{
  font-family:'Arial',sans-serif;
  font-size:var(--key-display-lbl-font);
  font-weight:600;
  letter-spacing:1.5px;
  color:var(--key-display-lbl-color);
  text-transform:uppercase;
  margin-bottom:2px;
}
.cdj-key-display-val{
  font-family:'Arial Narrow Bold','Arial',sans-serif;
  font-size:var(--key-display-val-font);
  font-weight:100;
  color:var(--key-display-val-color);
  letter-spacing:0.5px;
}
.cdj-player:not(.has-track) .cdj-key-display{
  display:none;
}
.cdj-player.is-playlist-open .cdj-key-display,
.cdj-player.is-menu-open .cdj-key-display{
  display:none !important;
}