/* Bass In Your Face: mediapagina (deck). Alleen geladen op /media/, losse afleveringen en de preview. */
.pod{padding:132px 0 96px;border-top:0;min-height:100vh}
.pod-empty{border:2px solid var(--line);padding:40px 26px;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:1px;color:var(--smoke)}
.pod-player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.pod-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytf{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.ytf img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
.ytf:hover img{transform:scale(1.03);filter:brightness(.8)}
.ytf-play{position:absolute;left:50%;top:50%;width:84px;height:84px;transform:translate(-50%,-50%);background:var(--brand);box-shadow:0 10px 30px rgba(0,0,0,.5);transition:.15s;pointer-events:none}
.ytf-play::after{content:"";position:absolute;left:34px;top:26px;border-style:solid;border-width:16px 0 16px 24px;border-color:transparent transparent transparent #fff}
.ytf:hover .ytf-play{background:#0a0a0a}
.ytf:focus-visible{outline:3px solid var(--bright);outline-offset:3px}
.ytf-play.sm{width:52px;height:52px}
.ytf-play.sm::after{left:21px;top:16px;border-width:10px 0 10px 15px}
.ep-meta{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--smoke)}
.ep-title{display:block;font-family:'Anton',sans-serif;text-transform:uppercase;font-weight:400;font-size:22px;line-height:1.02;margin-top:8px}
.ep-title-xl{font-size:clamp(34px,5vw,68px);margin:10px 0 26px}
.ep-title a:hover{color:var(--brand)}
.ep-desc{margin-top:16px;color:#cfcfcf;line-height:1.65;font-size:16px}
.ep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
@media(max-width:860px){
.ep-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.pod{padding:108px 0 60px}
.ep-grid{grid-template-columns:1fr}
.ytf-play{width:64px;height:64px}
.ytf-play::after{left:25px;top:19px;border-width:13px 0 13px 19px}
}
.se-eb{font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.pod-back{display:inline-block;margin-bottom:22px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--smoke)}
.pod-back:hover{color:var(--brand)}
.pod-player-lg{max-width:1100px;border:2px solid var(--line)}
.pod-body{max-width:780px;margin-top:30px}
.md{padding:62px 0 0;min-height:100vh}
.md-tab{position:relative;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(22px,2.6vw,30px);color:#6f6f6f;padding:18px 0 16px;transition:.15s}
.md-tab span{font-family:'Space Mono',monospace;font-size:12px;vertical-align:super;color:inherit;margin-left:2px}
.md-tab:hover{color:#fff}
.md-tab.on{color:#fff}
.md-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:var(--brand)}
.js .md-panel:not(.on){display:none}
.md-panel{padding:64px 0 96px}
.md-panel + .md-panel{border-top:2px solid var(--line)}
.js .md-panel + .md-panel{border-top:0}
.md-intro{max-width:900px}
.md-intro.has-art{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;max-width:none}
.md-art{aspect-ratio:1;border:2px solid var(--line);overflow:hidden;background:#111}
.md-art img{width:100%;height:100%;object-fit:cover;display:block}
.md-p{margin-top:22px}
.md-p p{color:#cfcfcf;font-size:18px;line-height:1.65;max-width:62ch;margin-bottom:14px}
.md-host{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#fff;margin-top:6px}
.md-host span{color:var(--smoke);margin-right:6px}
.md-kl{margin-top:32px}
.md-kl-h{font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#fff;margin-bottom:12px}
.plats{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.md-kl .plats{margin-top:0}
.plat{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--line);padding:10px 15px;font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#fff;transition:.15s}
.plat svg{width:18px;height:18px;flex:none;color:var(--brand);transition:.15s}
.plat:hover{border-color:var(--brand);background:var(--brand)}
.plat:hover svg{color:#fff}
.plats-lg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:10px;max-width:820px}
.plats-lg .plat{padding:16px 18px;font-size:14px;justify-content:flex-start}
.plats-lg .plat svg{width:26px;height:26px}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(145deg,#2a0d07,#0a0a0a 70%)}
.ph img{width:62%!important;height:auto!important;object-fit:contain!important;filter:none!important;transform:none!important}
.ph-art b{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(28px,4vw,52px);color:var(--brand);letter-spacing:2px}
.md-art .ph{position:relative;height:100%}
.md-code{font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--brand);margin-top:4px}
.md-sub{font-family:'Archivo',sans-serif;font-weight:700;color:#bdbdbd;margin:6px 0 4px}
.md-lead{font-size:20px;line-height:1.6;color:#e6e6e6;margin:22px 0 0;max-width:62ch}
.md-lh{margin:72px 0 22px;padding-bottom:12px;border-bottom:2px solid var(--line)}
.ep-card2{min-width:0}
.ep-thumb2{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;border:2px solid var(--line);margin-bottom:14px;transition:.15s}
.ep-thumb2 .ytf img{filter:grayscale(1) contrast(1.06)}
.ep-card2:hover .ep-thumb2{border-color:var(--brand)}
.ep-card2:hover .ep-thumb2 .ytf img{filter:none}
.ep-card2 .ep-title{margin-top:4px}
.ep-card2 .ep-title a:hover{color:var(--brand)}
.ep-card2 .ep-meta{margin-top:8px}
.ep-desc.sm{font-size:14px;margin-top:10px}
.ep-card2.soon .ep-title{color:#8a8a8a}
.trk{margin-top:14px;border-top:1px solid var(--line)}
.trk summary{cursor:pointer;list-style:none;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--brand);padding:10px 0}
.trk summary::-webkit-details-marker{display:none}
.trk summary::after{content:" +"}
.trk[open] summary::after{content:" \2013"}
.trk summary span{color:var(--smoke)}
.trk ol{padding:0 0 10px 26px;font-family:'Space Mono',monospace;font-size:13px;line-height:1.9;color:#cfcfcf}
.trk li::marker{color:var(--brand)}
@media(max-width:860px){
.md-intro.has-art{grid-template-columns:minmax(0,1fr);gap:30px}
.md-art{max-width:420px}
}
@media(max-width:600px){
.md-panel{padding:44px 0 70px}
.md-lh{margin-top:54px}
}
.nat-vid{position:absolute;inset:0;width:100%;height:100%;background:#000;display:block}
.nat-aud{cursor:default}
.nat-aud img{filter:none!important;transform:none!important}
.nat-aud audio{position:absolute;left:12px;right:12px;bottom:12px;width:calc(100% - 24px);z-index:2}
.md-v6{background:#070707}
.dk-ch{display:flex;align-items:center;gap:10px}
.dk-ch .md-tab{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:2px;text-transform:uppercase;padding:12px 16px;border:2px solid #555}
.dk-ch .md-tab b{margin-right:6px}
.dk-ch .md-tab span{display:none}
.dk-ch .md-tab.on{color:#0a0a0a;border-color:var(--brand);background:var(--brand);box-shadow:none}
.dk-ch .md-tab.on::after{display:none}
.md-v6 .md-panel{padding:40px 0 90px}
.dk{--lcd:#ff6a45;--silk:#f3efe6}
.dk-console{position:relative;padding:0 26px 26px;background:#0a0a0a;border:2px solid #2e2e2e}
.dk-grid{display:grid;align-items:stretch}
.dk-tt{position:relative}
.dk-mid{min-width:0}
.dk-screen{padding:10px;background:#000;border:2px solid #2e2e2e}
.dk-aud{position:absolute;left:12px;right:12px;bottom:12px;width:calc(100% - 24px)}
.dk-wave{position:relative;background:#000;border:2px solid #2e2e2e;overflow:hidden;cursor:pointer;touch-action:none;outline:none}
.dk-wave-head{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #fff}
.dk-side{min-width:0}
.dk-lcd{flex:1;flex-direction:column;background:#000;border:2px solid var(--brand);font-family:'Space Mono',monospace;color:var(--lcd)}
.dk-lcd-h{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:3px;text-transform:uppercase}
.dk-dot{width:9px;height:9px;border-radius:50%;background:#4a140a;flex:none}
.dk-time{margin-left:auto;display:flex;align-items:baseline;gap:6px;letter-spacing:1px}
.dk-time b{font-size:30px;font-weight:400;color:#fff;text-shadow:0 0 12px var(--lcd)}
.dk-time small{font-size:12px;color:var(--lcd)}
.dk-code{margin-top:22px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--silk)}
.dk-t{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(30px,2.5vw,44px);line-height:.98;color:#fff;margin:8px 0 10px}
.dk-lcd .ep-meta{color:var(--lcd);font-size:12px}
.dk-prog{margin-top:auto;padding-top:22px}
.dk-prog-bar{display:block;height:6px;background:#3a1208;overflow:hidden}
.dk-prog-bar i{display:block;height:100%;width:0;background:var(--lcd);box-shadow:0 0 10px var(--lcd)}
.dk-prog-t{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--silk);letter-spacing:1px}
.dk-vu{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;margin-top:16px;font-size:10px;color:var(--silk)}
.dk-vu b{position:relative;height:9px;background:repeating-linear-gradient(90deg,#2a0b05 0 8px,#140402 8px 10px);overflow:hidden}
.dk-vu i{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,var(--lcd) 0 8px,transparent 8px 10px)}
.dk-msg{min-height:14px;margin-top:10px;font-size:10px;letter-spacing:1px;color:var(--silk);opacity:.8}
.dk-ctrl{display:flex;gap:10px}
.dk-ctrl button{flex:1;height:60px;display:flex;align-items:center;justify-content:center;border:2px solid #3a3a3a;border-radius:0;color:#fff;cursor:pointer;background:#141414;transition:background .1s,border-color .1s,transform .06s}
.dk-ctrl button svg{width:22px;height:22px;fill:currentColor}
.dk-ctrl button:hover{border-color:#fff}
.dk-ctrl button:active{transform:translateY(2px)}
.dk-ctrl .dk-play{flex:1.5;background:var(--brand);border-color:var(--brand);color:#0a0a0a}
.dk-ctrl .dk-play:hover{background:#ff4a2a;border-color:#ff4a2a}
.dk-play .ic-pause{display:none}
.dk.spin .dk-play .ic-pause{display:block}
.dk.spin .dk-play .ic-play{display:none}
.dk-lower{display:grid;gap:40px}
.dk-qh{font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--brand);padding-bottom:12px;border-bottom:2px solid #333}
.dk-qh span{color:#999}
.dk-q{width:100%;display:grid;gap:14px;align-items:center;padding:14px 12px;background:none;border:0;border-bottom:1px solid #2a2a2a;border-left:3px solid transparent;color:#fff;text-align:left;cursor:pointer;font:inherit;transition:.12s}
.dk-q:hover{background:#151515}
.dk-q.on{background:var(--brand);border-left-color:#fff}
.dk-q.on .dk-qn,.dk-q.on .dk-qp,.dk-q.on .dk-qt small{color:#0a0a0a}
.dk-qn{color:var(--brand)}
.dk-qt{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:21px;line-height:1.05;color:#fff}
.dk-qt small{display:block;margin-top:4px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;color:#aaa;text-transform:uppercase}
.dk-qp{color:var(--brand);text-align:center}
.dk-q.soon{cursor:default;opacity:.45}
.dk-q.soon:hover{background:none}
.dk-about .plat{border-color:#555}
.dk-about .md-intro{margin-top:0;padding-top:0;border-top:0}
.dk-about .stitle{font-size:clamp(36px,4vw,56px)}
.dk-about .plats-lg{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
@media(max-width:1340px){
.dk-side{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:stretch}
.dk-ctrl{flex-direction:column}
.dk-ctrl button{flex:1}
}
@media(max-width:900px){
.dk-console{padding:0 16px 18px}
.dk-grid{gap:18px}
.dk-side{display:flex}
.dk-ctrl{flex-direction:row}
}
@media(max-width:600px){
.dk-ch{width:100%}
.dk-ch .md-tab{flex:1;text-align:center;padding:11px 8px;font-size:12px}
.dk-q{gap:10px;padding:12px 6px}
.dk-qt{font-size:17px}
.dk-lcd{padding:18px}
}
.dk-svg{display:block;width:100%}
.dk-tl-on{fill:#2a0b05;transition:fill .3s}
.dk.spin .dk-tl-on{fill:#ff6a45}
.dk-ssr{left:3.5%;bottom:4.2%;display:flex;gap:10px}
.dk-sb{padding:0 14px;border:2px solid #3a3a3a;border-radius:0;background:#141414;color:#fff;font-family:'Space Mono',monospace;font-weight:700;text-transform:uppercase;cursor:pointer;transition:background .1s,border-color .1s,transform .06s}
.dk-sb:hover{border-color:#fff}
.dk-sb:active{transform:translateY(2px)}
.dk-start{background:var(--brand);border-color:var(--brand);color:#0a0a0a}
.dk-start:hover{border-color:#fff}
.dk.spin .dk-start{background:#141414;border-color:var(--brand);color:var(--brand)}
.dk-wave:hover .dk-wave-bars i{background:#8f8a80}
.dk-wave-hover{position:absolute;top:0;bottom:0;left:calc(var(--hov, -1) * 100%);width:1px;background:rgba(255,255,255,.55);pointer-events:none;display:none}
.dk-wave:hover .dk-wave-hover{display:block}
.dk-wave-tip{position:absolute;left:calc(var(--hov, 0) * 100%);transform:translateX(-50%);background:#fff;color:#0a0a0a;font-family:'Space Mono',monospace;font-weight:700;pointer-events:none;display:none}
.dk-wave:hover .dk-wave-tip{display:block}
.dk-wave:focus-visible{border-color:var(--brand)}
.md-v6 .md-panel{background:#fff;color:#0a0a0a}
.md-v6 .dk-console{box-shadow:none;border-color:#0a0a0a}
.md-v6 .dk-qh{border-bottom-color:#0a0a0a}
.md-v6 .dk-qh span{color:#666}
.md-v6 .dk-q{color:#0a0a0a;border-bottom-color:#e2e2e2}
.md-v6 .dk-q:hover{background:#f3f3f3}
.md-v6 .dk-qt{color:#0a0a0a}
.md-v6 .dk-qt small{color:#666}
.md-v6 .dk-q.on{background:#0a0a0a;border-left-color:var(--brand)}
.md-v6 .dk-q.on .dk-qt{color:#fff}
.md-v6 .dk-q.on .dk-qn,.md-v6 .dk-q.on .dk-qp{color:var(--brand)}
.md-v6 .dk-q.on .dk-qt small{color:#bbb}
.md-v6 .dk-about .md-intro{border-top-color:#0a0a0a}
.md-v6 .dk-about .stitle{color:#0a0a0a}
.md-v6 .dk-about .md-p p{color:#333}
.md-v6 .dk-about .md-kl-h{color:#0a0a0a}
.md-v6 .dk-about .plat{border-color:#0a0a0a;color:#0a0a0a}
.md-v6 .dk-about .plat:hover{background:#0a0a0a;color:#fff}
.md-v6 .pod-empty{color:#555;border-color:#0a0a0a}
.md-v6 .dk-about .md-intro{border-top:0}
.dk-kl{margin-bottom:26px}
.dk-kl .md-intro-kl{max-width:none}
.dk-kl .md-kl{margin-top:0}
.dk-kl .plats-lg{max-width:none;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.md-v6 .dk-kl .md-kl-h{color:#0a0a0a}
.md-v6 .dk-kl .plat{border-color:#0a0a0a;color:#0a0a0a}
.md-v6 .dk-kl .plat:hover{background:#0a0a0a;color:#fff}
.dk-q{grid-template-columns:78px minmax(0,1fr) 70px 34px}
.dk-qn{font-family:'Anton',sans-serif;font-weight:400;font-size:40px;line-height:.9}
@media(max-width:600px){
.dk-q{grid-template-columns:52px minmax(0,1fr) 26px}
.dk-qn{font-size:30px}
}
.dk-ch .md-tab{background:#fff;border-color:#fff;color:#0a0a0a;box-shadow:none}
.dk-ch .md-tab b{color:var(--brand)}
.dk-ch .md-tab:hover{background:#f3efe6;border-color:#f3efe6;color:#0a0a0a}
.dk-ch .md-tab.on,.dk-ch .md-tab.on:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.dk-ch .md-tab.on b{color:#fff}
.dk-kl{margin:28px 0 0}
.dk-q{position:relative}
.dk-q.on::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:calc(var(--qp, 0) * 100%);background:var(--brand)}
.dk-qp{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:16px}
.dk.spin .dk-q.on .dk-qp{font-size:0}
.dk.spin .dk-q.on .dk-qp::before,.dk.spin .dk-q.on .dk-qp::after{content:"";width:3px;background:var(--brand);animation:dkbar .6s ease-in-out infinite alternate}
.dk.spin .dk-q.on .dk-qp::after{animation-duration:.45s}
.dk.spin .dk-q.on .dk-qp{background:linear-gradient(var(--brand),var(--brand)) 50% 100%/3px 60% no-repeat}
@keyframes dkbar{0%{height:30%}100%{height:100%}}
.dk-wrap{max-width:1840px}
.md-v6 .dk-console{border:0}
.dk-tt{grid-area:tt}
.dk-mid{grid-area:mid}
.dk-side{grid-area:side}
.dk-lcd{display:grid;align-items:center}
.dk-lcd-a .dk-code{margin-top:10px}
.dk-lcd-b{display:flex;flex-direction:column}
.dk-lcd-b .dk-time{margin-left:0;align-self:flex-end}
.dk-lcd-b .dk-prog{margin-top:0;padding-top:0}
.dk-lcd-b .dk-msg:empty{display:none}
.dk-extra{display:flex;gap:10px}
.dk-x{display:flex;align-items:center;justify-content:center;padding:0 12px;border:2px solid #3a3a3a;border-radius:0;background:#141414;color:#fff;font-family:'Space Mono',monospace;font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;text-decoration:none;white-space:nowrap}
.dk-x:hover,.dk-x.on{border-color:var(--brand);color:var(--brand)}
.dk-x[hidden]{display:none}
.dk-wave-bars{position:absolute;display:flex;align-items:center;gap:1px;height:auto}
.dk-wave-bars i{flex:1;min-width:1px;background:#5c5a56;border-radius:1px}
.dk-wave:hover > .dk-wave-bars i{background:#77746e}
.dk-wave-played{position:absolute;left:0;top:0;bottom:0;width:calc(10px + var(--prog, 0) * (100% - 20px));overflow:hidden;pointer-events:none}
.dk-wave-played .dk-wave-bars{right:auto;width:calc(var(--ww, 100%) - 20px)}
.dk-wave-played .dk-wave-bars i{background:var(--brand)}
.dk-wave-mid{position:absolute;left:10px;right:10px;top:50%;height:1px;background:rgba(255,255,255,.08);pointer-events:none}
.dk-wave-head{left:calc(10px + var(--prog, 0) * (100% - 22px))}
@media(max-width:1100px){
.dk-side{grid-template-columns:minmax(0,1fr)}
.dk-right{min-width:0;flex-direction:row}
.dk-right .dk-ctrl{flex:1.4}
.dk-extra{flex:1}
}
@media(max-width:900px){
.dk-tt{--w:min(460px,calc(100vw - 72px))}
.dk-lcd-b .dk-time{align-self:flex-start}
.dk-right{flex-direction:column}
}
.dk-tt{aspect-ratio:auto;display:flex;flex-direction:column;background:#0a0a0a;border:3px solid #2e2e2e}
.dk-svg{height:auto;flex:none}
.dk-ssr{position:static;padding:16px 3.5% 16px;border-top:2px solid #1e1e1e}
.dk-extra{position:relative}
.dk-share{position:absolute;right:0;bottom:calc(100% + 10px);z-index:50;width:300px;padding:14px;background:#fff;color:#0a0a0a;border:3px solid #0a0a0a;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dk-share-h{grid-column:1/-1;font-family:'Space Mono',monospace;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--brand);margin-bottom:4px}
.dk-sh{display:flex;align-items:center;gap:10px;padding:10px 10px;border:2px solid #e3e3e3;color:#0a0a0a;font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;text-decoration:none}
.dk-sh svg{width:20px;height:20px;fill:currentColor;flex:none}
.dk-sh:hover{border-color:#0a0a0a;background:#0a0a0a;color:#fff}
.dk-sh-fb svg{color:#1877f2}
.dk-sh-wa svg{color:#25d366}
.dk-sh-tg svg{color:#229ed9}
.dk-sh-ig svg{color:#e1306c}
.dk-sh-link svg,.dk-sh-mail svg,.dk-sh-x svg,.dk-sh-more svg{color:var(--brand)}
.dk-sh:hover svg{color:#fff}
.dk-share-msg{grid-column:1/-1;font-family:'Space Mono',monospace;font-size:11px;color:#0a0a0a;min-height:0}
.dk-share-msg:not(:empty){margin-top:6px;padding:8px 10px;background:#f3efe6}
@media(max-width:600px){
.dk-share{position:fixed;left:12px;right:12px;bottom:12px;width:auto}
}
.dk-mid{display:contents}
.dk-screen{grid-area:screen;flex-direction:column;justify-content:center}
.dk-wave{grid-area:wave;margin-top:0}
.dk-svg{margin:auto 0}
.dk-ssr{margin-top:0}
.dk-share{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.dk-console{padding-top:26px}
@media(max-width:900px){
.dk-console{padding-top:16px}
}
.dk-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin:0 0 22px;border-bottom:2px solid #1e1e1e}
.dk-plate{display:flex;flex-direction:column;align-items:center}
.dk-plate-logo{width:auto}
.dk-plate-sub{background:var(--brand);color:#fff;font-family:'Space Mono',monospace;font-weight:700;text-transform:uppercase}
.dk-top .dk-ch{justify-self:start;display:flex;gap:8px}
.dk-top .md-tab{font-size:12px;padding:10px 14px}
@media(max-width:900px){
.dk-top{grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px}
.dk-top .dk-ch{order:2;justify-self:stretch}
.dk-top .dk-ch .md-tab{flex:1;text-align:center}
.dk-top-r{display:none}
}
.dk-qcol{grid-area:queue;display:flex;flex-direction:column;background:#000;border:2px solid #2e2e2e}
.dk-qcol .dk-qh{color:var(--brand)}
.dk-qcol .dk-qh span{color:#888}
.dk-qlist{flex:1;min-height:0;overflow-y:auto;scrollbar-color:var(--brand) #111}
.md-v6 .dk-qcol .dk-q{color:#fff;background:none;border-bottom:1px solid #1c1c1c}
.md-v6 .dk-qcol .dk-q:hover{background:#141414}
.md-v6 .dk-qcol .dk-qt{color:#fff}
.md-v6 .dk-qcol .dk-qt small{color:#8a8a8a}
.md-v6 .dk-qcol .dk-q.on{background:var(--brand);border-left-color:#fff}
.md-v6 .dk-qcol .dk-q.on .dk-qt small{color:#fff}
.dk-qcol .dk-q.on::after{background:#0a0a0a}
.dk-lower{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;margin-top:36px}
.dk-lower .dk-kl{margin:0}
.dk-lower .dk-kl .plats-lg{grid-template-columns:minmax(0,1fr)}
@media(max-width:1340px){
.dk-qlist{max-height:none}
}
@media(max-width:900px){
.dk-lower{grid-template-columns:minmax(0,1fr)}
}
.dk-side{grid-template-columns:minmax(0,1fr) auto}
.dk-lcd{padding:12px 18px}
.dk-lcd-a{display:flex;flex-direction:column;gap:3px;min-width:0}
.dk-lcd-a .dk-lcd-h{font-size:10px}
.dk-lcd-a .dk-code{display:none}
.dk-lcd-a .dk-t{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-lcd-a [data-f=meta]{display:none}
.dk-lcd-b{gap:5px}
.dk-lcd-b .dk-prog-bar{height:4px}
.dk-lcd-b .dk-prog-t{display:none}
.dk-lcd-b .dk-vu{margin-top:0;gap:3px 8px;font-size:9px}
.dk-lcd-b .dk-vu b{height:5px}
.dk-lcd-b .dk-msg{display:none}
.dk-right{flex-direction:row;min-width:0}
.dk-right .dk-ctrl{flex:none}
.dk-right .dk-ctrl button{min-height:0;height:100%;flex:none}
.dk-extra{flex:none}
.dk-x{height:auto;flex:1}
@media(max-width:900px){
.dk-side{grid-template-columns:minmax(0,1fr)}
.dk-right .dk-ctrl{flex:1}
.dk-right .dk-ctrl button{flex:1;width:auto;height:56px}
.dk-extra{width:auto;flex:none}
}
.md-v6 .dk-wrap{padding-left:12px;padding-right:12px}
.md-v6 .md-panel{padding-top:16px}
.md-v6 .dk-console{padding:18px 18px 18px}
.dk-top{margin-bottom:16px;padding-bottom:14px}
.dk-plate{gap:6px}
.dk-plate-logo{height:clamp(46px,4.2vw,72px)}
.dk-plate-sub{font-size:10px;padding:3px 10px;letter-spacing:2.5px}
@media(max-width:1340px){
.dk-tt{--w:clamp(220px,22vw,360px)}
}
@media(max-width:900px){
.md-v6 .dk-console{padding:14px}
}
.dk-grid{gap:16px 18px}
.dk-tt{--w:auto;width:auto}
.dk-tt .dk-svg{margin:0}
.dk-qcol{min-height:220px}
@media(max-width:900px){
.dk-tt{max-width:460px;justify-self:center;width:100%}
}
.dk-grid{grid-template-rows:auto 1fr auto auto;grid-template-areas:"tt screen" "queue screen" "queue wave" "queue side"}
.dk-tt{align-self:start}
@media(max-width:1340px){
.dk-grid{grid-template-rows:auto auto auto auto;grid-template-areas:"tt screen" "queue screen" "queue wave" "queue side"}
}
@media(max-width:900px){
.dk-grid{grid-template-rows:none;grid-template-areas:"screen" "wave" "side" "queue" "tt"}
}
.dk-now{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--silk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-now[hidden]{display:none}
.dk-trk{display:flex;gap:12px;width:100%;padding:3px 6px;margin-left:-6px;background:none;border:0;color:#ddd;font:inherit;text-align:left;cursor:pointer}
.dk-trk:hover{color:#fff;background:#141414}
.dk-trk-t{color:var(--brand);flex:none;min-width:48px}
.dk-trk.on{background:var(--brand);color:#fff}
.dk-trk.on .dk-trk-t{color:#0a0a0a}
.dk-share-t{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f3efe6;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;cursor:pointer}
.dk-share-t input{accent-color:var(--brand);width:16px;height:16px}
.md-v6 .dk-wrap{max-width:2200px}
.dk-grid{grid-template-columns:clamp(300px,24vw,470px) minmax(0,1fr)}
@media(max-width:1340px){
.dk-grid{grid-template-columns:320px minmax(0,1fr)}
}
@media(max-width:900px){
.dk-grid{grid-template-columns:minmax(0,1fr)}
}
.dk-lcd-a .dk-t{font-size:clamp(20px,1.7vw,30px)}
.dk-lcd-h,.dk-lcd-h [data-f=state]{color:#fff}
.dk.live .dk-dot{background:#2ee66b;box-shadow:0 0 10px #2ee66b}
@media(max-width:900px){
.dk-lcd{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:901px){
.md-v6 .dk-wrap{max-width:min(2200px, max(1040px, calc((100vh - 468px) * 1.7778 + clamp(300px,24vw,470px) + 76px)));margin-left:auto;margin-right:auto}
.dk-grid{grid-template-rows:auto minmax(0,1fr) auto auto}
.dk-qcol{contain:size;min-height:140px}
}
@media(min-width:901px) and (max-height:820px){
.dk-top{margin-bottom:10px;padding-bottom:10px}
.dk-plate-logo{height:44px}
}
.dk-wave{height:56px;padding:6px 10px}
.dk-wave-bars{inset:6px 10px}
.dk-wave-tip{top:2px;font-size:9px;padding:1px 5px}
.dk-screen{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:center}
.dk-screen > .pod-player,.dk-screen > .dk-cover{grid-area:1/1}
.dk-screen iframe{pointer-events:none}
.dk-cover{position:relative;z-index:3;width:100%;aspect-ratio:16/9;padding:0;border:0;background:transparent;cursor:pointer;overflow:hidden}
.dk-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.dk-cover .ytf-play{opacity:0;transition:opacity .2s,background .15s}
.dk-cover.show img,.dk-cover.show .ytf-play{opacity:1}
.dk-cover.show{background:#000}
.dk-cover:hover .ytf-play{background:#0a0a0a}
.dk-cover.busy .ytf-play{animation:dkpulse .8s ease-in-out infinite alternate}
@keyframes dkpulse{to{transform:translate(-50%,-50%) scale(.9);opacity:.6}}
.dk-cover-pause{position:absolute;right:16px;bottom:16px;width:44px;height:44px;background:rgba(10,10,10,.7);opacity:0;transition:opacity .2s}
.dk-cover-pause::before,.dk-cover-pause::after{content:"";position:absolute;top:12px;width:6px;height:20px;background:#fff}
.dk-cover-pause::before{left:13px}
.dk-cover-pause::after{right:13px}
.dk-cover:not(.show):hover .dk-cover-pause{opacity:1}
.dk-screen:fullscreen{padding:0;border:0;background:#000}
.dk-extra{flex-direction:row;width:auto}
.dk-extra .dk-x{width:80px}
.dk-extra .dk-fs{width:52px}
.dk-fs svg{width:20px;height:20px;fill:currentColor}
@media(max-width:900px){
.dk-extra .dk-x{flex:1;width:auto}
.dk-extra .dk-fs{flex:none;width:56px}
}
.md-v6 .dk-qcol .dk-q.on .dk-qn,.md-v6 .dk-qcol .dk-q.on .dk-qp{color:#fff}
.dk.spin .dk-qcol .dk-q.on .dk-qp{background:linear-gradient(#fff,#fff) 50% 100%/3px 60% no-repeat}
.dk.spin .dk-qcol .dk-q.on .dk-qp::before,.dk.spin .dk-qcol .dk-q.on .dk-qp::after{background:#fff}
@media(min-width:901px){
.dk-top{grid-template-columns:clamp(300px,24vw,470px) minmax(0,1fr);gap:18px}
.dk-top-r{display:none}
.dk-top .dk-ch{align-self:center}
}
@media(min-width:901px) and (max-width:1340px){
.dk-top{grid-template-columns:320px minmax(0,1fr)}
}
.dk-qshare{flex:none;padding:12px;border-top:1px solid #1c1c1c;width:auto}
.dk-qshare .dk-share-btn{width:100%;height:48px;gap:10px;font-size:12px}
.dk-share-btn svg{width:18px;height:18px;fill:currentColor}
.dk-qshare .dk-share{left:12px;right:12px;width:auto;bottom:calc(100% - 4px)}
.dk-vol{flex:none;display:flex;align-items:center;border:2px solid #3a3a3a;background:#141414}
.dk-mute{width:30px;height:30px;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.dk-mute svg{width:100%;height:100%}
.dk-mute .spk{fill:currentColor}
.dk-mute .x{display:none}
.dk-mute:hover{color:var(--brand)}
.muted .dk-mute .w1,.muted .dk-mute .w2{display:none}
.muted .dk-mute .x{display:inline}
.vol-low .dk-mute .w2{display:none}
.dk-vol-r{-webkit-appearance:none;appearance:none;height:4px;background:linear-gradient(90deg,var(--brand) var(--v,80%),#3a3a3a var(--v,80%));outline:none;cursor:pointer}
.dk-vol-r::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#fff;border:0}
.dk-vol-r::-moz-range-thumb{width:14px;height:14px;background:#fff;border:0;border-radius:0}
.dk-vol-r:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media(max-width:1500px){
.dk-vol-r{width:80px}
}
@media(max-width:900px){
.dk-right{flex-wrap:wrap}
.dk-vol{flex:1;height:48px}
.dk-vol-r{flex:1;width:auto}
}
.dk-lcd{grid-template-columns:minmax(0,1fr) minmax(140px,190px);gap:6px 16px}
.dk-lcd-b .dk-time b{font-size:18px}
.dk-lcd-b .dk-time small{font-size:10px}
.dk-vol{padding:0 10px;gap:8px}
.dk-vol-r{width:84px}
.dk-right{gap:8px}
.dk-right .dk-ctrl{gap:6px}
.dk-right .dk-ctrl button{width:48px}
.dk-right .dk-ctrl .dk-play{width:64px}
.dk-right .dk-extra .dk-fs{width:52px}
@media(max-width:1700px){
.dk-vol-r{width:64px}
.dk-lcd-a .dk-t{font-size:clamp(18px,1.5vw,26px)}
}
.md-v6 .dk-qcol .dk-q{grid-template-columns:50px minmax(0,1fr) 20px;padding:14px 14px;gap:12px}
.md-v6 .dk-qcol .dk-qn{font-size:34px}
.md-v6 .dk-qcol .dk-qt{font-size:21px;line-height:1.05}
.md-v6 .dk-qcol .dk-qt small{font-size:12px;margin-top:5px;letter-spacing:.5px}
.dk-qcol .dk-qh{font-size:13px}
@media(min-width:1800px){
.md-v6 .dk-qcol .dk-qt{font-size:23px}
.md-v6 .dk-qcol .dk-qn{font-size:38px}
.md-v6 .dk-qcol .dk-qt small{font-size:13px}
}
.dk-tt .dk-ssr{display:flex;gap:10px;padding:14px}
.dk-sb{flex:1;min-width:0;height:46px;font-size:13px;letter-spacing:3px}
@media(max-height:820px) and (min-width:901px){
.dk-sb{height:40px}
}
.dk-side{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;align-items:stretch}
.dk-right{display:contents}
.dk-side .dk-ctrl{order:1;flex:none;gap:8px}
.dk-side .dk-lcd{order:2;flex:1;min-width:0}
.dk-side .dk-vol{order:3}
.dk-side .dk-extra{order:4}
.dk-side .dk-ctrl button{width:74px;height:auto;min-height:78px}
.dk-side .dk-ctrl .dk-play{width:110px;box-shadow:0 0 0 2px var(--brand),0 8px 24px rgba(220,49,20,.35)}
.dk-side .dk-ctrl button svg{width:28px;height:28px}
.dk-side .dk-ctrl .dk-play svg{width:36px;height:36px}
.dk-side .dk-ctrl .dk-play:hover{background:#ff4a2a}
@media(max-width:1500px){
.dk-side .dk-ctrl button{width:62px}
.dk-side .dk-ctrl .dk-play{width:90px}
}
@media(max-width:900px){
.dk-side{flex-wrap:wrap}
.dk-side .dk-lcd{grid-template-columns:minmax(0,1fr)}
.dk-side .dk-ctrl{order:1;flex:1 1 100%}
.dk-side .dk-ctrl button{flex:1;width:auto;min-height:64px}
.dk-side .dk-ctrl .dk-play{flex:1.5}
.dk-side .dk-lcd{order:2;flex:1 1 100%}
.dk-side .dk-vol{order:3;flex:1}
}
.dk-qcol .dk-qh{display:flex;gap:0;padding:0;border-bottom:2px solid #1e1e1e}
.dk-qtab{flex:1;padding:14px 16px 12px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;color:#777;font-family:'Space Mono',monospace;font-weight:700;font-size:13px;letter-spacing:3px;text-transform:uppercase;text-align:left;cursor:pointer}
.dk-qtab span{color:#555;margin-left:4px}
.dk-qtab:hover{color:#fff}
.dk-qtab.on{color:var(--brand);border-bottom-color:var(--brand)}
.dk-qtab.on span{color:#999}
.dk-qtab[hidden]{display:none}
.dk-qcol:not(.view-tl) .dk-tlcol{display:none}
.dk-qcol.view-tl .dk-q{display:none}
.dk-tlcol{list-style:none;margin:0;padding:6px 0}
.dk-tlcol li{border-bottom:1px solid #1c1c1c}
.dk-tlcol li:not(:has(.dk-trk)){padding:10px 16px;color:#ccc;font-family:'Space Mono',monospace;font-size:13px}
.dk-tlcol .dk-trk{display:flex;align-items:baseline;gap:12px;width:100%;margin:0;padding:11px 16px;background:none;border:0;border-left:3px solid transparent;color:#ddd;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;line-height:1.3;text-align:left;cursor:pointer}
.dk-tlcol .dk-trk:hover{background:#141414;color:#fff}
.dk-tlcol .dk-trk-t{flex:none;min-width:52px;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;color:var(--brand)}
.dk-tlcol .dk-trk.on{background:var(--brand);border-left-color:#fff;color:#fff}
.dk-tlcol .dk-trk.on .dk-trk-t{color:#fff}
.dk-wave-mark{position:absolute;top:3px;bottom:3px;left:calc(10px + var(--at) * (100% - 20px));width:2px;background:rgba(255,255,255,.55);pointer-events:none;z-index:2}
.dk-wave-mark::before{content:"";position:absolute;left:-3px;top:-3px;border-style:solid;border-width:5px 4px 0;border-color:#fff transparent transparent}
/* waveform als SVG-pad */
.dk-wave-bars svg{display:block;width:100%;height:100%}
.dk-wave-bars path{fill:#5c5a56}
.dk-wave:hover>.dk-wave-bars path{fill:#77746e}
.dk-wave-played .dk-wave-bars path{fill:var(--brand)}
.dk-q-hd{align-self:center;margin-right:8px;padding:1px 5px;border:1px solid var(--lcd);color:var(--lcd);font-size:10px;letter-spacing:1px;line-height:1.4}
.dk-q-hd[hidden]{display:none}

/* ticketknop rechtsboven op het deck */
.dk-top{position:relative}
.dk-tix{position:absolute;right:0;top:calc(50% - 7px);transform:translateY(-50%);background:var(--brand);color:#fff;border:2px solid var(--brand);font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:1px;font-size:13px;padding:12px 18px;white-space:nowrap;transition:.15s}
.dk-tix:hover{background:#0a0a0a;color:var(--brand)}
@media(min-width:901px) and (max-height:820px){.dk-tix{top:calc(50% - 5px)}}
@media(max-width:900px){.dk-tix{position:static;transform:none;order:3;justify-self:stretch;text-align:center;margin-bottom:6px}}

/* gasten / setnaam onder de titel in "speelt af"; wijkt voor de meelopende tracklist */
.dk-who{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-who[hidden],.dk-lcd-a:has(.dk-now:not([hidden])) .dk-who{display:none}

/* lijst: duur naast de titel, daaronder gasten en als laatste de datum */
.dk-qtl{display:flex;align-items:baseline;gap:10px;min-width:0}
.dk-qtl em{flex:none;font-style:normal;font-family:'Space Mono',monospace;font-size:13px;letter-spacing:1px;opacity:.75}

/* maar een kanaal: op mobiel geen losse CH1-knop (ticketknop is dan de enige balk) */
@media(max-width:900px){.dk-ch.solo{display:none}}

/* vangnet mobiel: tik gaat rechtstreeks naar de YouTube-speler (eigen playknop zichtbaar) */
.dk.tapthru .dk-screen iframe{pointer-events:auto}
.dk.tapthru .dk-cover{opacity:0;pointer-events:none}


/* leeg kanaal: deck staat er, melding op het scherm, bediening uit */
.dk-soon{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;width:100%;background:#0d0d0d;text-align:center;padding:24px}
.dk-soon p{margin:0;font-family:'Space Mono',monospace;font-size:clamp(12px,1vw,16px);letter-spacing:3px;text-transform:uppercase;color:#ddd}
.dk-idle .dk-cover,.dk-idle .dk-qshare,.dk-idle .dk-wave-head,.dk-idle .dk-wave-tip{display:none}
.dk-idle .dk-wave{opacity:.35;pointer-events:none}
.dk-idle .dk-ssr button,.dk-idle .dk-ctrl button,.dk-idle .dk-extra .dk-fs{opacity:.4;cursor:default;pointer-events:none}

/* telefoon: zodra de YouTube-speler klaar is, gaat een tik op de video er rechtstreeks naartoe (poster blijft zichtbaar tot het beeld loopt) */
.dk.touch-ready .dk-screen iframe{pointer-events:auto}
.dk.touch-ready .dk-cover{pointer-events:none}

/* vangnet-hint: groot in beeld zolang de browser eerst een tik op de YouTube-speler wil */
.dk-taphint{grid-area:1/1;align-self:start;justify-self:center;z-index:4;margin-top:14px;padding:10px 16px;background:var(--brand);color:#fff;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;pointer-events:none;display:none}
.dk.tapthru .dk-taphint{display:block;animation:dkhint .8s ease-in-out infinite alternate}
@keyframes dkhint{to{opacity:.65}}

/* spoelen: tijd groot boven de waveform (niet onder de vinger), altijd binnen de randen */
.dk-wave{overflow:visible}
.dk-wave-tip{left:var(--tipx, calc(var(--hov, 0) * 100%));z-index:5}
.dk-wave.scrub .dk-wave-tip{display:block;top:auto;bottom:calc(100% + 8px);font-size:15px;padding:5px 10px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.dk-wave.scrub .dk-wave-hover{display:block}

/* aan-lampje gloeit zodra er muziek klinkt */
.dk.live .dk-tl-on{filter:drop-shadow(0 0 6px #ff6a45)}

/* strip past zich aan zijn eigen breedte aan (breed maar laag scherm = smaller deck): compactere knoppen, meer ruimte voor titel en tijd */
@media(min-width:901px){.dk-side{container:strip / inline-size}}
@container strip (max-width:1000px){
.dk-side .dk-ctrl{gap:6px}
.dk-side .dk-ctrl button{width:58px}
.dk-side .dk-ctrl .dk-play{width:84px}
.dk-vol{padding:0 8px;gap:6px}
.dk-vol-r{width:60px}
.dk-lcd{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:10px 14px}
.dk-lcd-b .dk-time{white-space:nowrap}
.dk-lcd-a .dk-lcd-h{white-space:nowrap}
}
@container strip (max-width:820px){
.dk-vu{display:none}
.dk-lcd-a .dk-t{font-size:20px}
.dk-lcd{grid-template-columns:minmax(0,1fr) auto}
.dk-lcd-b .dk-q-hd{display:none!important}
.dk-lcd-b .dk-time b{font-size:16px}
}

/* bredere linkerkolom maakt de draaitafel niet hoger (anders wordt het deck hoger en krijgt de video randen) */
@media(min-width:901px){.dk-tt .dk-svg{max-height:min(calc(clamp(300px,22vw,420px) * .83), 37vh);width:auto;max-width:100%;margin-left:auto;margin-right:auto}}

/* lagere schermen: lijstkop en deel-knop compacter, zodat de afleveringsrij volledig zichtbaar blijft en de video geen randen krijgt */
@media(min-width:901px) and (max-height:940px){
.dk-qtab{padding:10px 14px 8px}
.dk-qshare{padding:8px 12px}
.dk-qshare .dk-share-btn{height:38px}
.dk-sb{height:38px}
.dk-tt .dk-ssr{padding:10px 14px}
}

/* doorspelen (lijstkop, rechts) */
.dk-auto{flex:none;display:flex;align-items:center;gap:7px;margin-left:auto;padding:0 14px;background:none;border:0;color:#777;font-family:'Space Mono',monospace;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer}
.dk-auto i{width:8px;height:8px;border-radius:50%;background:#333;transition:.2s}
.dk-auto[aria-pressed=true]{color:#ddd}
.dk-auto[aria-pressed=true] i{background:#2ee66b;box-shadow:0 0 6px #2ee66b}
.dk-auto:hover{color:#fff}
.dk-auto[hidden]{display:none}
/* zoekveld in de lijst (vanaf 11 items) */
.dk-qfind{padding:10px 12px;border-bottom:1px solid #1c1c1c}
.dk-qsearch{width:100%;height:38px;padding:0 12px;background:#141414;border:2px solid #333;color:#fff;font-family:'Space Mono',monospace;font-size:13px;outline:none}
.dk-qsearch:focus{border-color:var(--brand)}
.dk-qcol.view-tl .dk-qfind{display:none}
.dk-q[hidden]{display:none!important}
.dk-qnone{padding:18px 16px;color:#888;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase}
/* zoeklinks per track (livesets) */
.dk-tlcol li{display:flex;align-items:stretch}
.dk-tlcol li .dk-trk{flex:1;min-width:0}
.dk-trk-x{flex:1;min-width:0}
.dk-tlcol li:not(:has(.dk-trk)){align-items:center}
.dk-trk-go{flex:none;display:flex;align-items:center;gap:2px;padding-right:8px}
.dk-trk-go a{display:flex;width:28px;height:28px;align-items:center;justify-content:center;color:#666;border-radius:2px}
.dk-trk-go a:hover{color:#fff;background:#1f1f1f}
.dk-trk-go svg{width:16px;height:16px;fill:currentColor}
.dk-tlcol li:has(.dk-trk.on){background:var(--brand)}
.dk-tlcol li:has(.dk-trk.on) .dk-trk-go a{color:#fff}

/* lijstkop met doorspelen: tabs nemen niet alle ruimte, knop past altijd */
.dk-qcol .dk-qh:has(.dk-auto:not([hidden])) .dk-qtab{flex:0 1 auto;padding-left:12px;padding-right:12px;letter-spacing:2px}
.dk-auto{padding:0 12px;letter-spacing:1.5px;white-space:nowrap}

/* eigen tracklink: icoon duidelijker dan een zoeklink */
.dk-trk-go a.direct{color:#ddd}
.dk-trk-go a.direct:hover{color:#fff}

/* eindmarkering in de tracklist: onzichtbaar (houdt alleen de nummering gelijk) */
.dk-tlcol li[hidden]{display:none!important}

/* laptophoogte (~650-720 px in de browser): kop en waveform compacter, zodat het deck op één scherm past */
@media(min-width:901px) and (max-height:720px){
.dk-console{padding-top:10px}
.dk-top{margin-bottom:8px;padding-bottom:8px}
.dk-plate-logo{height:36px}
.dk-plate{gap:4px}
.dk-wave{height:42px;padding:4px 10px}
}

/* 901-1340 px breed: strip op één rij (de compacte strip past zich zelf aan), niet meer in drie rijen */
@media(min-width:901px) and (max-width:1340px){
.dk-side{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px}
.dk-side .dk-ctrl{flex-direction:row}
}
/* laptophoogte: linkerkolom breder, video daardoor minder hoog, zodat het deck op één scherm past */
@media(min-width:901px) and (max-height:720px){
.dk-grid,.dk-top{grid-template-columns:40% minmax(0,1fr)}
}

/* smalste strip (laptop): knoppen compacter, tijd onder de titel, voortgangsbalk en gasten weg */
@container strip (max-width:700px){
.dk-side .dk-ctrl{gap:5px}
.dk-side .dk-ctrl button{width:46px}
.dk-side .dk-ctrl .dk-play{width:66px}
.dk-vol{padding:0 6px;gap:4px}
.dk-vol-r{width:46px}
.dk-lcd{grid-template-columns:minmax(0,1fr);gap:2px;padding:8px 12px}
.dk-who,.dk-lcd-b .dk-prog{display:none}
.dk-lcd-b .dk-time b{font-size:14px}
}
/* laptophoogte: strip, waveform en draaitafel nog iets lager, zodat alles op één scherm past */
@media(min-width:901px) and (max-height:800px){
.dk-side .dk-ctrl button{min-height:62px}
.dk-wave{height:36px}
.dk-tt .dk-svg{max-height:28vh}
.dk-tt .dk-ssr{padding:8px 12px}
.dk-q{padding-top:8px;padding-bottom:8px}
}

/* heel laag (<= 680 px): laatste pixels eraf */
@media(min-width:901px) and (max-height:680px){
.dk-console{padding-bottom:12px}
.dk-top{margin-bottom:6px;padding-bottom:6px}
.dk-top .md-tab{padding:7px 12px}
.dk-tix{padding:8px 14px}
.dk-grid,.dk-top{grid-template-columns:43% minmax(0,1fr)}
}

@container strip (max-width:720px){.dk-lcd-a .dk-t{font-size:18px}}

/* CH1/CH2 als kanaalkiezer: donkere knoppen met lampje, actief = oranje lampje + rand (zelfde taal als de strip) */
.md-v6 .dk-ch .md-tab{display:inline-flex;align-items:center;gap:10px;background:#141414;border:2px solid #3a3a3a;color:#bbb;padding:10px 16px 10px 14px;box-shadow:inset 0 -3px 0 #0b0b0b;transition:border-color .15s,color .15s,background .15s}
.md-v6 .dk-ch .md-tab::before{content:'';display:block;width:8px;height:8px;border-radius:50%;background:#0f2a18;flex:none;transition:background .2s,box-shadow .2s}
.md-v6 .dk-ch .md-tab b{color:#777;margin-right:0;transition:color .15s}
.md-v6 .dk-ch .md-tab:hover{background:#1b1b1b;border-color:#666;color:#fff}
.md-v6 .dk-ch .md-tab.on,.md-v6 .dk-ch .md-tab.on:hover{background:#161110;border-color:var(--brand);color:#fff;box-shadow:inset 0 -3px 0 #0b0b0b,0 0 16px rgba(220,49,20,.28)}
.md-v6 .dk-ch .md-tab.on::before{background:#2ee66b;box-shadow:0 0 8px #2ee66b}
.md-v6 .dk-ch .md-tab.on b{color:var(--brand)}
@media(max-width:900px){.md-v6 .dk-ch .md-tab{justify-content:center}}

/* DDE-logo op de plint: gedimd, licht op tijdens afspelen (vervangt het oranje aan-lampje) */
.dk-tl-logo{opacity:.38;transition:opacity .4s,filter .4s}
.dk.live .dk-tl-logo{opacity:.95;filter:drop-shadow(0 0 5px rgba(255,106,69,.85))}

/* plaat met de muis draaien */
.dk-svg.grab{cursor:grab}
.dk-svg.grabbing{cursor:grabbing}

/* desktop: YouTube rendert intern op 1920x1080 (hogere kwaliteit), JS schaalt het passend in het videovlak */
.pod-player iframe.dk-hq{inset:auto;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}

/* mobiel: muteknop groot genoeg om te tikken */
@media(max-width:900px){.dk-mute{width:44px;height:44px;padding:7px}}

/* volledig scherm: video altijd helemaal in beeld (ook 21:9 of telefoon liggend), gecentreerd op zwart */
.dk-screen:fullscreen{align-content:center;justify-content:center;background:#000;padding:0;border:0}
.dk-screen:fullscreen > .pod-player,.dk-screen:fullscreen > .dk-cover{width:min(100vw,177.78vh);height:auto;aspect-ratio:16/9;justify-self:center;align-self:center}
.dk-screen:-webkit-full-screen{background:#000}
.dk-extra .dk-fs[hidden]{display:none}

/* easter egg: shout-out bij snel scratchen */
.dk-wicky{position:absolute;left:50%;top:40%;z-index:5;pointer-events:none;font-family:'Anton',sans-serif;font-size:clamp(28px,3vw,52px);letter-spacing:2px;color:#fff;background:var(--brand);padding:4px 16px;white-space:nowrap;box-shadow:0 8px 30px rgba(220,49,20,.55);animation:dkwicky 1.35s ease-out forwards}
@keyframes dkwicky{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.4)}14%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1.12)}28%{transform:translate(-50%,-50%) rotate(-6deg) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) rotate(-6deg) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.dk-wicky{animation-duration:.01s;animation-iteration-count:1}}

/* mobile: compact turntable, deck image next to Start/Stop instead of above it */
@media(max-width:900px){
.dk-tt{max-width:none;flex-direction:row;align-items:center}
.dk-tt .dk-svg{flex:0 1 auto;min-width:0;width:auto;max-width:64%;max-height:210px;margin:0}
.dk-tt .dk-ssr{flex:1 1 auto;min-width:120px;flex-direction:column;justify-content:center;gap:10px;align-self:stretch;padding:12px;border-top:0;border-left:2px solid #1e1e1e}
.dk-tt .dk-ssr button{width:100%;min-height:46px}
}