/* ═══════════════════════════════════════════════════════════════
   Dextroverse Audio Player v4 — DJ SKIN EDITION
   ═══════════════════════════════════════════════════════════════ */

/* ── SKIN PRESETS ────────────────────────────────────────────── */
.dxtv-ap-panel {
  --ap-accent:    #00e5ff;  --ap-accent2:   #ff00cc;
  --ap-glow:      rgba(0,229,255,.28);
  --ap-chassis:   rgba(8,16,28,.97);
  --ap-chassis-b: rgba(4,8,18,.98);
  --ap-bevel-hi:  rgba(255,255,255,.14);
  --ap-bevel-lo:  rgba(0,0,0,.55);
  --ap-led-g:     #00e030;  --ap-led-a:  #ffaa00;  --ap-led-r: #ff2020;
  --ap-knob-body: rgba(20,30,48,1);
  --ap-knob-hi:   rgba(255,255,255,.12);
  --ap-xf-a:      rgba(0,229,255,.6);
  --ap-xf-b:      rgba(255,0,204,.6);
  --ap-brand-c:   #00e5ff;
}
[data-skin="acid-green"]   { --ap-accent:#00ff44; --ap-accent2:#ccff00; --ap-glow:rgba(0,255,68,.28); --ap-chassis:rgba(4,18,8,.97); --ap-brand-c:#00ff44; --ap-xf-a:rgba(0,255,68,.6); --ap-xf-b:rgba(204,255,0,.6); }
[data-skin="magenta"]      { --ap-accent:#ff00cc; --ap-accent2:#c800ff; --ap-glow:rgba(255,0,204,.28); --ap-chassis:rgba(20,4,24,.97); --ap-brand-c:#ff00cc; --ap-xf-a:rgba(255,0,204,.6); --ap-xf-b:rgba(200,0,255,.6); }
[data-skin="amber-gold"]   { --ap-accent:#ffd600; --ap-accent2:#ff8800; --ap-glow:rgba(255,214,0,.28); --ap-chassis:rgba(20,14,0,.97); --ap-brand-c:#ffd600; --ap-xf-a:rgba(255,214,0,.6); --ap-xf-b:rgba(255,136,0,.6); }
[data-skin="chrome-white"] { --ap-accent:#d0e8ff; --ap-accent2:#8899cc; --ap-glow:rgba(200,220,255,.22); --ap-chassis:rgba(18,22,30,.97); --ap-brand-c:#ffffff; --ap-knob-body:rgba(30,36,50,1); }

/* ── MODAL OVERLAY ───────────────────────────────────────────── */
.dxtv-ap-modal { position:fixed;inset:0;z-index:99980;display:flex;align-items:center;justify-content:center;padding:1rem; }
.dxtv-ap-modal[hidden] { display:none!important; }
.dxtv-ap-backdrop { position:absolute;inset:0;background:rgba(2,2,16,.88);backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%);cursor:pointer; }

/* ── CHASSIS PANEL ───────────────────────────────────────────── */
.dxtv-ap-panel {
  position:relative; z-index:1;
  display:grid;
  grid-template-rows: 18px 44px 1fr;
  width:100%; max-width:900px;
  height:min(92vh, 640px);
  max-height:92vh;
  background: linear-gradient(175deg, var(--ap-chassis) 0%, var(--ap-chassis-b) 100%);
  /* Chassis shape: cut bottom-right corner */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  border-radius: 4px;
  overflow: hidden;
  /* 5-layer depth: top bevel, bottom shadow, outer cast, inner glow, ambient */
  box-shadow:
    inset 0 1px 0 var(--ap-bevel-hi),
    inset 0 -1px 0 var(--ap-bevel-lo),
    0 2px 0 rgba(0,0,0,.7),
    0 6px 0 rgba(0,0,0,.5),
    0 6px 40px rgba(0,0,0,.85),
    0 0 80px var(--ap-glow);
  animation: dxtv-ap-in .4s cubic-bezier(0.23,1,0.32,1) both;
  /* Slight perspective tilt */
  transform: perspective(1400px) rotateX(1.5deg);
  transform-origin: center bottom;
}
@keyframes dxtv-ap-in { from{opacity:0;transform:perspective(1400px) rotateX(1.5deg) translateY(30px) scale(.96)} to{opacity:1;transform:perspective(1400px) rotateX(1.5deg) translateY(0) scale(1)} }

/* Chassis noise texture overlay */
.dxtv-ap-panel::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  border-radius: inherit;
}

/* Light source: follows mousemove via JS --light-x, --light-y */
.dxtv-ap-panel::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 50% 35% at var(--light-x,30%) var(--light-y,15%), rgba(255,255,255,.06) 0%, transparent 70%);
}

/* Bottom-right cut corner shadow */
.dxtv-ap-panel .dxtv-ap-corner-cut { position:absolute;bottom:0;right:0;width:18px;height:18px;background:rgba(0,0,0,.9);clip-path:polygon(100% 0,100% 100%,0 100%);z-index:100; }

/* ── BOOT LED ROW ────────────────────────────────────────────── */
.dxtv-ap-boot-row { display:flex;align-items:center;padding:0 12px;gap:6px;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.04);position:relative;z-index:5; }
.dxtv-ap-boot-led { width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:all .05s;flex-shrink:0; }
.dxtv-ap-panel.is-booting .dxtv-ap-boot-led { background:var(--ap-accent);box-shadow:0 0 6px var(--ap-accent),0 0 12px var(--ap-glow);animation:led-boot .12s calc(var(--led-i)*38ms) both; }
@keyframes led-boot { 0%{opacity:0;transform:scale(.4)} 60%{opacity:1;transform:scale(1.3)} 100%{opacity:1;transform:scale(1)} }
.dxtv-ap-panel.is-ready .dxtv-ap-boot-led:nth-child(even) { background:rgba(255,255,255,.08); box-shadow:none; }
.dxtv-ap-panel.is-ready .dxtv-ap-boot-led:nth-child(odd)  { background:var(--ap-accent);opacity:.35;box-shadow:0 0 3px var(--ap-accent); }

/* ── HEADER BAR ──────────────────────────────────────────────── */
.dxtv-ap-header { display:flex;align-items:center;padding:0 12px;gap:10px;background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.05);position:relative;z-index:5; }

/* SWIMDXM holographic foil */
.dxtv-ap-brand-zone { flex:1;overflow:hidden; }
.dxtv-ap-brand-foil {
  font-family: var(--font-display,'Orbitron',monospace);
  font-size:.85rem; font-weight:900; letter-spacing:.28em;
  background: conic-gradient(from var(--holo-angle,200deg) at 50% 50%,
    #ff0077 0deg, #c800ff 60deg, #00e5ff 120deg,
    #00ff8c 180deg, #ffd600 240deg, #ff0077 300deg, #ff0077 360deg);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: holo-idle 8s linear infinite;
  cursor:default; user-select:none;
}
.dxtv-ap-panel.is-booting .dxtv-ap-brand-foil { opacity:0; }
.dxtv-ap-panel.is-ready   .dxtv-ap-brand-foil { animation:brand-reveal .8s .8s forwards, holo-idle 8s 1.6s linear infinite; }
@keyframes brand-reveal { from{opacity:0;clip-path:inset(0 100% 0 0)} to{opacity:1;clip-path:inset(0 0% 0 0)} }
@keyframes holo-idle { to { --holo-angle: 560deg; } }

/* BPM zone */
.dxtv-ap-bpm-zone { display:flex;align-items:center;gap:5px;flex-shrink:0; }
.dxtv-ap-bpm-readout { display:flex;flex-direction:column;align-items:flex-end;gap:1px; }
.dxtv-ap-bpm-val   { font-family:var(--font-display,'Orbitron',monospace);font-size:.82rem;font-weight:900;color:var(--ap-accent);line-height:1;text-shadow:0 0 10px var(--ap-glow);letter-spacing:.04em; }
.dxtv-ap-bpm-label { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.45rem;letter-spacing:.2em;color:rgba(255,255,255,.2);text-transform:uppercase; }
.dxtv-ap-tap-btn {
  font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.55rem;letter-spacing:.15em;
  padding:4px 8px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:4px;
  color:rgba(255,255,255,.35);cursor:pointer;
  transition:all .15s;
  /* 3D bevel */
  box-shadow:inset 0 1px 0 var(--ap-bevel-hi),inset 0 -1px 0 var(--ap-bevel-lo),0 2px 0 rgba(0,0,0,.4);
}
.dxtv-ap-tap-btn:hover   { border-color:var(--ap-accent);color:var(--ap-accent);box-shadow:inset 0 1px 0 var(--ap-bevel-hi),inset 0 -1px 0 var(--ap-bevel-lo),0 2px 0 rgba(0,0,0,.4),0 0 10px var(--ap-glow); }
.dxtv-ap-tap-btn:active  { transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(0,0,0,.2),inset 0 -1px 0 rgba(255,255,255,.04),0 1px 0 rgba(0,0,0,.4); }
.dxtv-ap-tap-btn.did-tap { border-color:var(--ap-accent);color:var(--ap-accent);box-shadow:inset 0 1px 0 var(--ap-bevel-hi),inset 0 -1px 0 var(--ap-bevel-lo),0 0 16px var(--ap-glow); }

.dxtv-ap-counter { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.6rem;color:rgba(255,255,255,.2);letter-spacing:.1em;flex-shrink:0; }

.dxtv-ap-close { width:28px;height:28px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:6px;color:rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s;box-shadow:inset 0 1px 0 var(--ap-bevel-hi),inset 0 -1px 0 var(--ap-bevel-lo); }
.dxtv-ap-close:hover { background:rgba(255,40,40,.12);border-color:rgba(255,60,60,.3);color:#ff7070;transform:rotate(90deg); }

/* ── BODY COLUMNS ────────────────────────────────────────────── */
.dxtv-ap-body { display:grid;grid-template-columns:176px 1fr 176px;min-height:0;height:100%;overflow:hidden;position:relative;z-index:2; }
.dxtv-ap-col  { display:flex;flex-direction:column;overflow:hidden;min-height:0;height:100%; }
.dxtv-ap-col--left   { background:rgba(0,0,0,.22);border-right:1px solid rgba(255,255,255,.045); }
.dxtv-ap-col--right  { background:rgba(0,0,0,.15);border-left:1px solid rgba(255,255,255,.045); }
.dxtv-ap-col--center { padding:10px 12px 10px;overflow-y:auto; }

/* ── DISPLAY BEZEL ───────────────────────────────────────────── */
.dxtv-ap-display-bezel {
  position:relative; flex-shrink:0;
  padding:5px;
  background: linear-gradient(160deg,rgba(255,255,255,.06),rgba(0,0,0,.3));
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ── COVER ART ───────────────────────────────────────────────── */
.dxtv-ap-cover { position:relative;width:100%;aspect-ratio:1;overflow:hidden;isolation:isolate;background:#050510; }
.dxtv-ap-cover-img-wrap { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.dxtv-ap-cover-img { width:100%;height:100%;object-fit:cover;display:block;transform-origin:center; }
.dxtv-ap-cover-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#0c0c26,#050510); }

/* Screen reflection glass */
.dxtv-ap-display-reflection { position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 100%);pointer-events:none;z-index:20; }

/* ── FX: VINYL SPIN ──────────────────────────────────────────── */
.has-vinyl .dxtv-ap-cover-img { border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.05),0 0 0 10px rgba(0,0,0,.6),0 0 0 12px rgba(255,255,255,.03); }
.dxtv-ap-panel:not(.is-paused) .has-vinyl .dxtv-ap-cover-img { animation:dxtv-vinyl 8s linear infinite; }
.dxtv-ap-panel.is-paused .has-vinyl .dxtv-ap-cover-img { animation:dxtv-vinyl 8s linear infinite paused; }
@keyframes dxtv-vinyl { to{transform:rotate(360deg)} }
.has-vinyl .dxtv-ap-cover-img-wrap::after { content:'';position:absolute;width:11%;height:11%;border-radius:50%;background:radial-gradient(#1a1a2e,#0a0a18);border:1px solid rgba(255,255,255,.07);z-index:2;pointer-events:none; }

/* ── FX: CHROMATIC ───────────────────────────────────────────── */
.has-chromatic .dxtv-ap-cover-img { filter:drop-shadow(2px -1px 0 rgba(255,0,80,.3)) drop-shadow(-2px 1px 0 rgba(0,200,255,.3)); }

/* ── FX: SCANLINES ───────────────────────────────────────────── */
.dxtv-ap-scanbar { position:absolute;left:0;right:0;height:16%;pointer-events:none;z-index:6;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.07) 45%,rgba(200,240,255,.11) 50%,rgba(255,255,255,.07) 55%,transparent 100%);animation:dxtv-scan 4.5s linear infinite; }
@keyframes dxtv-scan { 0%{top:-18%} 100%{top:115%} }
.has-scanlines .dxtv-ap-cover::after { content:'';position:absolute;inset:0;z-index:5;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 3px);pointer-events:none; }

/* ── FX: GLITCH ──────────────────────────────────────────────── */
.dxtv-ap-cover.is-glitching .dxtv-ap-cover-img { animation:dxtv-glitch .15s steps(1) forwards; }
@keyframes dxtv-glitch {
  0%  {clip-path:none;transform:none}
  15% {clip-path:polygon(0 18%,100% 18%,100% 32%,0 32%);transform:translateX(-6px);filter:hue-rotate(60deg)}
  30% {clip-path:polygon(0 58%,100% 58%,100% 72%,0 72%);transform:translateX(8px);filter:hue-rotate(-40deg)}
  50% {clip-path:polygon(0 8%,100% 8%,100% 14%,0 14%);transform:translateX(-3px)}
  65% {clip-path:polygon(0 80%,100% 80%,100% 90%,0 90%);transform:translateX(5px);filter:saturate(3)}
  80% {clip-path:none;transform:translateX(-1px)}
  100%{clip-path:none;transform:none;filter:none}
}

/* ── FX: BLOOM ───────────────────────────────────────────────── */
.dxtv-ap-bloom { position:absolute;inset:-20%;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s;background-size:cover;background-position:center;filter:blur(24px) saturate(1.6);mix-blend-mode:screen; }
.dxtv-ap-panel:not(.is-paused) .has-bloom .dxtv-ap-bloom { opacity:.45; }

/* Canvas + brand overlay */
.dxtv-ap-canvas { position:absolute;inset:0;width:100%!important;height:100%!important;pointer-events:none;z-index:7; }
.dxtv-ap-brand-overlay { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display,'Orbitron',monospace);font-size:.95rem;font-weight:900;letter-spacing:.2em;color:var(--ap-brand-c,#00e5ff);text-shadow:0 0 10px currentColor,0 0 22px currentColor,0 0 44px currentColor;animation:dxtv-glow 2.5s ease-in-out infinite;pointer-events:none;z-index:8; }
@keyframes dxtv-glow { 0%,100%{opacity:.65;text-shadow:0 0 10px currentColor,0 0 22px currentColor} 50%{opacity:1;text-shadow:0 0 14px currentColor,0 0 32px currentColor,0 0 54px currentColor} }

.dxtv-ap-cover-badges { position:absolute;bottom:.4rem;right:.4rem;display:flex;gap:.25rem;z-index:9; }
.dxtv-ap-badge { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.5rem;letter-spacing:.08em;padding:2px 5px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.1);border-radius:3px;color:rgba(255,255,255,.45); }
.dxtv-ap-badge--sleep { color:rgba(200,150,255,.7); }

/* ── VU METERS ───────────────────────────────────────────────── */
.dxtv-ap-vu-pair { display:flex;gap:4px;padding:6px 8px 2px;justify-content:center;flex-shrink:0; }
.dxtv-ap-vu { display:flex;flex-direction:column-reverse;gap:2px;width:12px; }
.dxtv-ap-vu-seg { height:5px;border-radius:1px;background:rgba(255,255,255,.07);transition:background .04s;box-shadow:inset 0 1px 0 rgba(0,0,0,.3); }
.dxtv-ap-vu-seg.seg-amber { }
.dxtv-ap-vu-seg.seg-red   { }
.dxtv-ap-vu-seg.is-lit           { background:var(--ap-led-g);box-shadow:0 0 4px var(--ap-led-g); }
.dxtv-ap-vu-seg.seg-amber.is-lit { background:var(--ap-led-a);box-shadow:0 0 5px var(--ap-led-a); }
.dxtv-ap-vu-seg.seg-red.is-lit   { background:var(--ap-led-r);box-shadow:0 0 6px var(--ap-led-r); }

/* ── COVER META ──────────────────────────────────────────────── */
.dxtv-ap-cover-meta { padding:.6rem .7rem .5rem;flex-shrink:0; }
.dxtv-ap-cover-title  { font-family:var(--font-display,'Orbitron',monospace);font-size:.62rem;font-weight:700;color:var(--ap-accent);letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;text-shadow:0 0 8px var(--ap-glow); }
.dxtv-ap-cover-artist { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.54rem;letter-spacing:.13em;color:rgba(255,255,255,.22);text-transform:uppercase; }
.dxtv-ap-cover-key    { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.5rem;letter-spacing:.1em;color:rgba(255,255,255,.15);margin-top:2px; }

/* ── KNOBS ───────────────────────────────────────────────────── */
.dxtv-ap-knob-row { display:flex;justify-content:space-evenly;padding:4px 6px;flex-shrink:0; }
.dxtv-ap-knob-row--eq { border-top:1px solid rgba(255,255,255,.04); }
.dxtv-ap-knob-row--fx { border-top:1px solid rgba(255,255,255,.04);padding-bottom:6px; }
.dxtv-ap-knob-wrap { display:flex;flex-direction:column;align-items:center;gap:3px;cursor:ns-resize; }
.dxtv-ap-knob { width:40px;height:40px;overflow:visible;display:block; }

/* Knob anatomy */
.dxtv-knob-track   { stroke:rgba(255,255,255,.07); stroke-dasharray:270 360; stroke-dashoffset:calc(360 - 270)/2 * -1; transform:rotate(135deg);transform-origin:22px 22px; }
.dxtv-knob-value   { stroke:var(--ap-accent);stroke-linecap:round;stroke-dasharray:0 270;transform:rotate(135deg);transform-origin:22px 22px;transition:stroke-dasharray .08s linear; }
.dxtv-knob-shadow  { fill:rgba(0,0,0,.45); }
.dxtv-knob-body    {
  fill: radial-gradient(circle at 38% 32%, rgba(255,255,255,.12), var(--ap-knob-body) 60%);
  fill: var(--ap-knob-body);
  stroke: rgba(255,255,255,.08); stroke-width:1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.dxtv-knob-hi     { fill:var(--ap-knob-hi);rx:5;ry:3.5;opacity:.7; }
.dxtv-knob-line   { stroke:var(--ap-accent);stroke-width:1.8;stroke-linecap:round;transform-origin:22px 22px; }
.dxtv-knob-dot    { fill:var(--ap-accent);filter:drop-shadow(0 0 2px var(--ap-accent)); }

/* Active/hover state */
.dxtv-ap-knob-wrap:hover .dxtv-knob-body { filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 6px var(--ap-glow)); }
.dxtv-ap-knob-wrap.is-dragging { cursor:ns-resize; }
.dxtv-ap-knob-wrap.is-dragging .dxtv-knob-line { stroke-width:2.5; }
.dxtv-ap-knob-label { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.48rem;letter-spacing:.18em;color:rgba(255,255,255,.25);text-transform:uppercase; }

/* ── LCD DISPLAY ─────────────────────────────────────────────── */
.dxtv-ap-lcd {
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.05);
  border-radius:4px;
  padding:6px 10px;
  margin-bottom:8px;
  flex-shrink:0;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}
.dxtv-ap-lcd-title {
  font-family:var(--font-display,'Orbitron',monospace);
  font-size:.82rem; font-weight:700;
  color:var(--ap-accent); letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow: 0 0 8px var(--ap-glow);
  margin-bottom:2px;
  /* Marquee for long titles via JS */
}
.dxtv-ap-lcd-artist { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.58rem;letter-spacing:.16em;color:rgba(255,255,255,.3);text-transform:uppercase; }

/* ── WAVEFORM ────────────────────────────────────────────────── */
.dxtv-ap-wave-wrap {
  position:relative; height:52px; flex-shrink:0;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.05);
  border-radius:4px; overflow:hidden;
  margin-bottom:4px; cursor:pointer;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5);
}
.dxtv-ap-waveform { position:absolute;inset:0;width:100%!important;height:100%!important;display:block; }
.dxtv-ap-wave-playhead { position:absolute;top:0;bottom:0;width:1.5px;background:var(--ap-accent);box-shadow:0 0 6px var(--ap-accent);pointer-events:none;z-index:3;left:0%; }
.dxtv-ap-wave-cue { position:absolute;top:0;bottom:0;width:2px;pointer-events:none;z-index:4; }
.dxtv-ap-wave-cue[data-cue="a"] { background:rgba(0,229,255,.8); }
.dxtv-ap-wave-cue[data-cue="b"] { background:rgba(255,200,0,.8); }
.dxtv-ap-wave-cue[data-cue="c"] { background:rgba(255,60,180,.8); }

/* Fallback seek */
.dxtv-ap-seek-fallback { position:absolute;inset:0;display:flex;align-items:center;padding:0 8px; }
.dxtv-ap-seek-buf  { position:absolute;left:8px;right:8px;top:50%;height:4px;transform:translateY(-50%);background:rgba(255,255,255,.08);border-radius:2px;pointer-events:none; }
.dxtv-ap-seek-fill { position:absolute;left:8px;top:50%;height:4px;transform:translateY(-50%);background:linear-gradient(90deg,var(--ap-accent),var(--ap-accent2));border-radius:2px;pointer-events:none;width:0%; }
.dxtv-ap-seekbar   { position:absolute;inset:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none; }

.dxtv-ap-time-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.dxtv-ap-time-btn,.dxtv-ap-time { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.6rem;color:rgba(255,255,255,.22);letter-spacing:.04em; }
.dxtv-ap-time-btn { background:none;border:none;cursor:pointer;padding:0;transition:color .2s; }
.dxtv-ap-time-btn:hover { color:var(--ap-accent); }

/* ── CUE + LOOP BUTTONS ──────────────────────────────────────── */
.dxtv-ap-cue-row { display:flex;gap:4px;align-items:center;margin-bottom:8px;flex-shrink:0; }
.dxtv-ap-cue-btn,.dxtv-ap-loop-btn {
  font-family:var(--font-body,'Share Tech Mono',monospace);
  font-size:.52rem;letter-spacing:.12em;
  padding:4px 7px; border-radius:4px; cursor:pointer;
  transition:all .15s;
  box-shadow:inset 0 1px 0 var(--ap-bevel-hi),inset 0 -1px 0 var(--ap-bevel-lo),0 2px 0 rgba(0,0,0,.5);
  position:relative;
}
.dxtv-ap-cue-btn { background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.18);color:rgba(0,229,255,.55); }
.dxtv-ap-cue-btn[data-cue="b"] { background:rgba(255,200,0,.07);border-color:rgba(255,200,0,.18);color:rgba(255,200,0,.55); }
.dxtv-ap-cue-btn[data-cue="c"] { background:rgba(255,60,180,.07);border-color:rgba(255,60,180,.18);color:rgba(255,60,180,.55); }
.dxtv-ap-cue-btn.has-cue,
.dxtv-ap-cue-btn:hover { opacity:1;box-shadow:inset 0 1px 0 var(--ap-bevel-hi),inset 0 -1px 0 var(--ap-bevel-lo),0 0 10px var(--ap-glow); }
.dxtv-ap-cue-btn:active { transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(0,0,0,.3),0 1px 0 rgba(0,0,0,.4); }
.dxtv-ap-loop-btn { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.3); }
.dxtv-ap-loop-btn.is-active { background:rgba(0,255,136,.1);border-color:rgba(0,255,136,.35);color:rgba(0,255,136,.8);box-shadow:inset 0 1px 0 var(--ap-bevel-hi),0 0 8px rgba(0,255,136,.2); }
.dxtv-ap-loop-indicator { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.5rem;color:rgba(0,255,136,.6);letter-spacing:.08em;margin-left:auto; }

/* ── TRANSPORT CONTROLS ──────────────────────────────────────── */
.dxtv-ap-controls { display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:9px;flex-shrink:0; }

/* Base button — 5-layer 3D */
.dxtv-ap-btn {
  border-radius:50%; cursor:pointer; display:flex;align-items:center;justify-content:center;
  transition:all .18s; flex-shrink:0; position:relative;
  /* 5-layer bevel system */
  background: linear-gradient(155deg, rgba(255,255,255,.09) 0%, rgba(0,0,0,.25) 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 var(--ap-bevel-hi),
    inset 0 -2px 0 var(--ap-bevel-lo),
    0 3px 0 rgba(0,0,0,.55),
    0 4px 8px rgba(0,0,0,.4),
    0 0 0 transparent;
  color: rgba(255,255,255,.38);
}
.dxtv-ap-btn--sm { width:33px;height:33px; }
.dxtv-ap-btn:hover {
  border-color:var(--ap-accent);color:var(--ap-accent);
  box-shadow:
    inset 0 1px 0 var(--ap-bevel-hi),
    inset 0 -2px 0 var(--ap-bevel-lo),
    0 3px 0 rgba(0,0,0,.55),
    0 4px 8px rgba(0,0,0,.4),
    0 0 14px var(--ap-glow);
}
.dxtv-ap-btn:active {
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 1px 0 rgba(0,0,0,.4),
    0 2px 4px rgba(0,0,0,.3);
}

/* Play button — larger, glowing when active */
.dxtv-ap-btn--play {
  width:50px;height:50px;
  background: linear-gradient(155deg, rgba(0,229,255,.14) 0%, rgba(0,80,120,.15) 100%);
  border-color: rgba(0,229,255,.3);
  color: var(--ap-accent);
}
.dxtv-ap-btn--play.is-playing {
  background: linear-gradient(155deg, rgba(0,229,255,.2) 0%, rgba(0,80,120,.18) 100%);
  border-color: var(--ap-accent);
  box-shadow:
    inset 0 1px 0 var(--ap-bevel-hi),
    inset 0 -2px 0 var(--ap-bevel-lo),
    0 3px 0 rgba(0,0,0,.55),
    0 4px 8px rgba(0,0,0,.4),
    0 0 22px var(--ap-glow),
    0 0 50px var(--ap-glow);
  animation: btn-pulse var(--ap-pulse,1.5s) ease-in-out infinite;
}
@keyframes btn-pulse {
  0%,100%{ box-shadow:inset 0 1px 0 var(--ap-bevel-hi),inset 0 -2px 0 var(--ap-bevel-lo),0 3px 0 rgba(0,0,0,.55),0 0 22px var(--ap-glow) }
  50%    { box-shadow:inset 0 1px 0 var(--ap-bevel-hi),inset 0 -2px 0 var(--ap-bevel-lo),0 3px 0 rgba(0,0,0,.55),0 0 36px var(--ap-glow),0 0 70px var(--ap-glow) }
}
.dxtv-ap-btn.is-active  { color:var(--ap-accent);border-color:rgba(0,229,255,.35);background:linear-gradient(155deg,rgba(0,229,255,.1),rgba(0,80,120,.12)); }
.dxtv-ap-btn.repeat-one { color:var(--ap-accent2);border-color:rgba(255,0,204,.35); }

/* ── CROSSFADER ──────────────────────────────────────────────── */
.dxtv-ap-xfader-wrap {
  display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-shrink:0;
  padding:7px 10px;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.05);
  border-radius:5px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.4);
}
.dxtv-ap-xfader-label { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.6rem;letter-spacing:.15em;font-weight:700;flex-shrink:0;transition:all .2s; }
#dxtv-ap-xf-a { color:var(--ap-xf-a); }
#dxtv-ap-xf-b { color:var(--ap-xf-b); }
.dxtv-ap-xfader-track { flex:1;position:relative;height:12px; }
.dxtv-ap-xfader-fill-l,.dxtv-ap-xfader-fill-r { position:absolute;top:50%;height:4px;transform:translateY(-50%);border-radius:2px;pointer-events:none; }
.dxtv-ap-xfader-fill-l { left:0;background:var(--ap-xf-a);width:50%; }
.dxtv-ap-xfader-fill-r { right:0;background:var(--ap-xf-b);width:0%; }
.dxtv-ap-xfader {
  position:absolute;inset:0;width:100%;height:100%;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize;
}
.dxtv-ap-xfader::-webkit-slider-thumb {
  -webkit-appearance:none;width:18px;height:22px;
  background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.2);border-radius:3px;cursor:ew-resize;
  /* Grip texture */
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 1px,transparent 1px,transparent 3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.5),0 0 8px rgba(0,0,0,.3);
}
.dxtv-ap-xfader::-moz-range-thumb {
  width:18px;height:22px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.2);border-radius:3px;cursor:ew-resize;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.5);
}

/* ── VOLUME + SPEED ──────────────────────────────────────────── */
.dxtv-ap-vol-speed-row { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.dxtv-ap-volume { display:flex;align-items:center;gap:5px;flex:1;padding:5px 8px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.05);border-radius:6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.4); }
.dxtv-ap-mute { background:none;border:none;color:rgba(255,255,255,.25);cursor:pointer;padding:0;flex-shrink:0;display:flex;align-items:center;transition:color .2s; }
.dxtv-ap-mute:hover { color:var(--ap-accent); }
.dxtv-ap-mute.is-muted .ico-vol  { display:none!important; }
.dxtv-ap-mute.is-muted .ico-mute { display:block!important; }
.dxtv-ap-vol-track { flex:1;position:relative;height:4px;background:rgba(255,255,255,.07);border-radius:2px; }
.dxtv-ap-vol-fill  { position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--ap-accent2),var(--ap-accent));border-radius:2px;width:70%;pointer-events:none; }
.dxtv-ap-volbar    { position:absolute;inset:-6px 0;width:100%;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none; }

/* Speed segmented buttons */
.dxtv-ap-speed-segs { display:flex;flex-shrink:0;border:1px solid rgba(255,255,255,.07);border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.4); }
.dxtv-ap-speed-seg {
  font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.5rem;letter-spacing:.06em;
  padding:5px 6px;background:rgba(0,0,0,.25);border:none;border-right:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.25);cursor:pointer;transition:all .15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.dxtv-ap-speed-seg:last-child { border-right:none; }
.dxtv-ap-speed-seg:hover { background:rgba(255,255,255,.06);color:rgba(255,255,255,.5); }
.dxtv-ap-speed-seg.is-active { background:rgba(0,229,255,.1);color:var(--ap-accent);box-shadow:inset 0 1px 0 rgba(0,229,255,.15),0 0 6px var(--ap-glow); }

/* ── RIGHT: PLAYLIST ─────────────────────────────────────────── */
.dxtv-ap-playlist { display:flex;flex-direction:column;flex:1;min-height:0;padding:8px 8px 4px;overflow:hidden; }
.dxtv-ap-playlist-label { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.52rem;letter-spacing:.28em;color:rgba(255,255,255,.14);margin-bottom:5px;flex-shrink:0; }
.dxtv-ap-playlist-list { flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,229,255,.1) transparent; }
.dxtv-ap-playlist-list::-webkit-scrollbar { width:2px; }
.dxtv-ap-playlist-list::-webkit-scrollbar-thumb { background:rgba(0,229,255,.1);border-radius:1px; }
.dxtv-ap-track { display:flex;align-items:center;gap:5px;padding:.4rem .45rem;border-radius:5px;cursor:pointer;transition:background .15s; }
.dxtv-ap-track:hover { background:rgba(255,255,255,.04); }
.dxtv-ap-track.is-active { background:rgba(0,229,255,.06); }
.dxtv-ap-track-idx { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.54rem;color:rgba(255,255,255,.16);min-width:1.1rem;text-align:center;flex-shrink:0; }
.dxtv-ap-track.is-active .dxtv-ap-track-idx { display:none; }
.dxtv-ap-track-bars { display:none;gap:2px;align-items:flex-end;height:10px;flex-shrink:0; }
.dxtv-ap-track.is-active .dxtv-ap-track-bars { display:flex; }
.dxtv-ap-track-bars span { width:2px;background:var(--ap-accent);border-radius:1px;animation:dxtv-bar .6s ease-in-out infinite alternate; }
.dxtv-ap-track-bars span:nth-child(1){height:4px;animation-delay:0s}
.dxtv-ap-track-bars span:nth-child(2){height:8px;animation-delay:.15s}
.dxtv-ap-track-bars span:nth-child(3){height:6px;animation-delay:.3s}
.dxtv-ap-track-bars span:nth-child(4){height:10px;animation-delay:.1s}
@keyframes dxtv-bar{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.dxtv-ap-track-name { font-family:var(--font-primary,'Rajdhani',sans-serif);font-size:.72rem;font-weight:600;color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.dxtv-ap-track.is-active .dxtv-ap-track-name { color:rgba(255,255,255,.88); }
.dxtv-ap-track-bpm { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.48rem;color:rgba(255,255,255,.12);flex-shrink:0;margin-left:auto; }

/* ── PITCH FADER ─────────────────────────────────────────────── */
.dxtv-ap-pitch-wrap { display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:4px;flex-shrink:0; }
.dxtv-ap-pitch-label { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.48rem;letter-spacing:.08em;color:rgba(255,255,255,.18); }
.dxtv-ap-pitch-track { position:relative;height:120px;display:flex;align-items:center;justify-content:center; }
.dxtv-ap-pitch { -webkit-appearance:slider-vertical;appearance:none;writing-mode:vertical-lr;direction:rtl;width:14px;height:120px;background:rgba(255,255,255,.06);border-radius:2px;cursor:ns-resize;outline:none;position:relative;z-index:2;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5),inset 1px 0 0 rgba(255,255,255,.04); }
.dxtv-ap-pitch::-webkit-slider-thumb {
  -webkit-appearance:none;width:20px;height:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);border-radius:2px;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0,rgba(255,255,255,.07) 1px,transparent 1px,transparent 3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.6);cursor:ns-resize;
}
.dxtv-ap-pitch-center { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:1px;background:rgba(255,255,255,.12);pointer-events:none;z-index:1; }

/* ── IDLE SCREENSAVER ────────────────────────────────────────── */
.dxtv-ap-panel.is-idle .dxtv-ap-col--center { opacity:.4;transition:opacity 2s; }
.dxtv-ap-panel.is-idle .dxtv-ap-col--right  { opacity:.25;transition:opacity 2s; }
.dxtv-ap-panel.is-idle .dxtv-ap-col--left .dxtv-ap-cover-meta { opacity:.3;transition:opacity 2s; }
.dxtv-ap-panel.is-idle .dxtv-ap-brand-overlay { animation:dxtv-glow-idle 3s ease-in-out infinite; }
.dxtv-ap-panel.is-idle .dxtv-ap-cover-img { animation:dxtv-zoom-idle 25s ease-in-out infinite alternate; }
@keyframes dxtv-glow-idle { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes dxtv-zoom-idle { from{transform:scale(1)} to{transform:scale(1.08)} }

/* ── MINI PILL ───────────────────────────────────────────────── */
.dxtv-ap-mini { position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:99970;display:flex;align-items:center;gap:.5rem;background:rgba(6,8,20,.96);border:1px solid rgba(255,255,255,.09);border-radius:100px;padding:.4rem .65rem .4rem .4rem;backdrop-filter:blur(24px);box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 18px var(--ap-glow,rgba(0,229,255,.06));animation:pill-in .35s cubic-bezier(0.23,1,0.32,1) both; }
@keyframes pill-in { from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.94)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }
.dxtv-ap-mini[hidden] { display:none!important; }
.dxtv-ap-mini-prog { position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:0 0 100px 100px;background:rgba(255,255,255,.05);overflow:hidden; }
.dxtv-ap-mini-prog div { height:100%;background:linear-gradient(90deg,var(--ap-accent,#00ffff),var(--ap-accent2,#ff00cc));width:0%;transition:width .4s linear; }
.dxtv-ap-mini-thumb { width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid rgba(255,255,255,.12); }
.dxtv-ap-mini-play { width:26px;height:26px;border-radius:50%;background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.25);color:var(--ap-accent,#00ffff);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s; }
.dxtv-ap-mini-play:hover { background:rgba(0,229,255,.18);box-shadow:0 0 10px var(--ap-glow,rgba(0,229,255,.25)); }
.dxtv-ap-mini-info { max-width:150px;overflow:hidden; }
.dxtv-ap-mini-title { font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.6rem;letter-spacing:.05em;color:rgba(255,255,255,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.dxtv-ap-mini-bars { display:flex;gap:2px;align-items:flex-end;height:9px;flex-shrink:0; }
.dxtv-ap-mini-bars span { width:2px;background:var(--ap-accent,#00ffff);border-radius:1px;opacity:.35; }
.dxtv-ap-mini.is-playing .dxtv-ap-mini-bars span { opacity:1;animation:dxtv-bar .55s ease-in-out infinite alternate; }
.dxtv-ap-mini-bars span:nth-child(1){height:4px;animation-delay:0s}
.dxtv-ap-mini-bars span:nth-child(2){height:7px;animation-delay:.12s}
.dxtv-ap-mini-bars span:nth-child(3){height:5px;animation-delay:.24s}
.dxtv-ap-mini-bars span:nth-child(4){height:9px;animation-delay:.08s}
.dxtv-ap-mini-expand { background:none;border:none;color:rgba(255,255,255,.16);cursor:pointer;padding:2px 0;flex-shrink:0;transition:color .2s;display:flex;align-items:center; }
.dxtv-ap-mini-expand:hover { color:var(--ap-accent,#00ffff); }

/* ── ULTIMATUM ───────────────────────────────────────────────── */
.dxtv-ultimatum-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;}
.dxtv-ultimatum-modal[hidden]{display:none!important;}
.dxtv-ultimatum-backdrop{position:absolute;inset:0;background:rgba(2,2,14,.92);backdrop-filter:blur(18px);}
.dxtv-ultimatum-box{position:relative;z-index:1;background:linear-gradient(160deg,rgba(10,10,28,.98),rgba(6,6,18,.97));border:1px solid rgba(0,229,255,.22);border-radius:16px;padding:2.2rem 1.8rem;max-width:380px;width:90%;box-shadow:0 0 60px rgba(0,229,255,.12),inset 0 1px 0 rgba(255,255,255,.07);animation:dxtv-ap-in .35s cubic-bezier(0.23,1,0.32,1) both;text-align:center;}
.dxtv-ultimatum-countdown{margin-bottom:1rem;}
#dxtv-ult-timer{font-family:var(--font-display,'Orbitron',monospace);font-size:2.4rem;font-weight:900;color:var(--ap-accent,#00ffff);text-shadow:0 0 16px rgba(0,229,255,.5);display:block;line-height:1;}
.dxtv-ult-timer-label{font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.56rem;letter-spacing:.22em;color:rgba(255,255,255,.2);text-transform:uppercase;}
.dxtv-ultimatum-box h2{font-family:var(--font-display,'Orbitron',monospace);font-size:.95rem;font-weight:700;letter-spacing:.1em;color:var(--ap-accent,#00ffff);margin:.4rem 0;text-shadow:0 0 12px rgba(0,229,255,.35);}
.dxtv-ultimatum-box p{font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.72rem;color:rgba(255,255,255,.3);margin:0 0 1.5rem;line-height:1.7;}
.dxtv-ultimatum-buttons{display:flex;flex-direction:column;gap:.5rem;}
.dxtv-ultimatum-btn{padding:.6rem 1.1rem;background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.2);border-radius:7px;color:var(--ap-accent,#00ffff);font-family:var(--font-body,'Share Tech Mono',monospace);font-size:.72rem;letter-spacing:.1em;cursor:pointer;text-transform:uppercase;transition:all .25s;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.4);}
.dxtv-ultimatum-btn:hover{background:rgba(0,229,255,.13);border-color:rgba(0,229,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.4),0 0 14px rgba(0,229,255,.18);}
.dxtv-ultimatum-btn--ghost{background:transparent;border-color:rgba(255,255,255,.07);color:rgba(255,255,255,.28);}
.dxtv-ultimatum-close{position:absolute;top:.75rem;right:.75rem;width:25px;height:25px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;color:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;}
.dxtv-ultimatum-close:hover{background:rgba(255,40,40,.1);color:#ff7070;}

/* Ambient room */
body.dxtv-ambient-active::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 60% at 50% 100%,var(--dxtv-ambient-color,rgba(0,229,255,.04)) 0%,transparent 70%);animation:ambient-breathe 5s ease-in-out infinite;}
@keyframes ambient-breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:720px){
  .dxtv-ap-body{grid-template-columns:1fr;}
  .dxtv-ap-col--left,.dxtv-ap-col--right{display:none;}
  .dxtv-ap-panel{max-height:96vh;border-radius:16px 16px 0 0;clip-path:none;transform:none;}
  .dxtv-ap-modal{align-items:flex-end;padding:0;}
  @keyframes dxtv-ap-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
  .dxtv-ap-cover-img,.dxtv-ap-brand-overlay,.dxtv-ap-btn--play.is-playing,
  .dxtv-ap-track-bars span,.dxtv-ap-mini-bars span,.dxtv-ap-scanbar,.dxtv-ap-brand-foil{animation:none!important;}
}


/* ── COVER CAROUSEL (desktop only, no album art) ──────────── */
.dxtv-ap-cover-placeholder {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050510;
  display: block !important; /* always visible, carousel fills it */
}

.dxtv-ap-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
}

.dxtv-ap-carousel__slide {
  position: absolute;
  inset: -8%; /* oversized for Ken Burns zoom room */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: transform, opacity;
  animation: none;
}

.dxtv-ap-carousel__slide.is-active {
  opacity: 1;
  animation: dxtv-kb 14s ease-in-out forwards;
}

.dxtv-ap-carousel__slide.is-leaving {
  opacity: 0;
  animation: dxtv-kb-out 1.8s ease-in-out forwards;
}

/* Ken Burns — slow zoom + subtle pan */
@keyframes dxtv-kb {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.06) translate(-1%, 0.5%); }
  100% { transform: scale(1.12) translate(-2%, 1%); }
}
@keyframes dxtv-kb-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Alternating pan directions */
.dxtv-ap-carousel__slide:nth-child(2n).is-active {
  animation: dxtv-kb-r 14s ease-in-out forwards;
}
@keyframes dxtv-kb-r {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.06) translate(1%, -0.5%); }
  100% { transform: scale(1.12) translate(2%, -1%); }
}

/* Colour grade overlay — teal / dark for brand feel */
.dxtv-ap-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      160deg,
      rgba(0,20,40,0.55) 0%,
      rgba(0,229,255,0.08) 40%,
      rgba(0,0,10,0.65) 100%
    );
  pointer-events: none;
  z-index: 2;
}

/* Scanline overlay on top of carousel */
.dxtv-ap-carousel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 3px
  );
  pointer-events: none;
}

/* Mobile: carousel becomes blurred ambient background behind the panel */
@media (max-width: 720px) {
  /* Hide the cover placeholder itself on mobile (left col hidden) */
  .dxtv-ap-cover-placeholder { display: none; }

  /* Ambient carousel — fixed behind the panel, blurred */
  .dxtv-ap-modal .dxtv-ap-carousel-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    pointer-events: none;
  }
  .dxtv-ap-modal .dxtv-ap-carousel-ambient__slide {
    position: absolute;
    inset: -12%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    filter: blur(28px) saturate(1.4) brightness(0.35);
    transition: opacity 2s ease-in-out;
    will-change: transform, opacity;
  }
  .dxtv-ap-modal .dxtv-ap-carousel-ambient__slide.is-active {
    opacity: 1;
    animation: dxtv-kb 20s ease-in-out forwards;
  }
  .dxtv-ap-modal .dxtv-ap-carousel-ambient__slide.is-leaving {
    opacity: 0;
  }
  /* Panel itself becomes glass over the ambient */
  .dxtv-ap-panel {
    position: relative;
    z-index: 1;
    background: rgba(4,4,18,0.82) !important;
  }
}