/* =====================================================
   BABBELHOEK JUKEBOX V3 TEST
   Alleen venster + Muziekhoek-knop.
   Top 3000 + wachtrij + zichtbare YouTube-speler.
   ===================================================== */

.dj-panel-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.jukebox-launch-button{
  border:1px solid #f4c65d !important;
  border-radius:999px;
  padding:7px 14px;
  min-height:32px;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  color:#351204 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.08) 42%, rgba(74,20,8,.12)),
    linear-gradient(135deg, #ffd869, #f59e0b 48%, #b91c1c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -2px 3px rgba(90,25,5,.28),
    0 4px 10px rgba(0,0,0,.28),
    0 0 14px rgba(245,158,11,.38) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  white-space:nowrap;
}

.jukebox-launch-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
}

.jukebox-launch-button:active{
  transform:translateY(1px);
}

.jukebox-overlay{
  position:fixed;
  inset:0;
  z-index:12000;
  display:none;
  pointer-events:none;
}

.jukebox-overlay.is-open{
  display:block;
}

.jukebox-machine{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(850px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:hidden;
  pointer-events:auto;
  border-radius:44px 44px 28px 28px;
  border:3px solid #5c3417;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,244,186,.82), transparent 20%),
    linear-gradient(90deg, #6d1c13 0 5%, #c94b21 5% 10%, #f4bf55 10% 13%, #6b1c13 13% 87%, #f4bf55 87% 90%, #c94b21 90% 95%, #6d1c13 95% 100%);
  box-shadow:
    0 28px 70px rgba(0,0,0,.62),
    0 0 0 2px rgba(255,222,124,.40),
    0 0 34px rgba(245,158,11,.30),
    inset 0 0 0 2px rgba(255,255,255,.13);
}

.jukebox-machine.is-dragged{
  transform:none;
}

.jukebox-head{
  height:48px;
  padding:8px 12px 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:grab;
  user-select:none;
  touch-action:none;
  background:linear-gradient(180deg, rgba(73,19,9,.88), rgba(47,12,6,.96));
  border-bottom:1px solid rgba(255,215,128,.42);
}

.jukebox-head:active{ cursor:grabbing; }

.jukebox-head-title{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:#ffeab1;
  font-family:"Roboto Slab", Georgia, serif;
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
  text-shadow:0 0 8px rgba(255,196,61,.42);
}

.jukebox-head-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.jukebox-window-btn{
  width:34px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,221,153,.38) !important;
  color:#fff4cf !important;
  background:linear-gradient(180deg,#7a2f17,#431207) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.25) !important;
  cursor:pointer;
  font-size:14px;
  font-weight:900;
}

.jukebox-window-btn:hover{
  filter:brightness(1.12);
}

.jukebox-body{
  position:relative;
  padding:22px 54px 26px;
  max-height:calc(100vh - 78px);
  overflow:auto;
}

.jukebox-arch{
  position:relative;
  max-width:720px;
  margin:0 auto;
  padding:58px 34px 30px;
  border-radius:340px 340px 30px 30px / 205px 205px 30px 30px;
  border:6px solid #e6b34b;
  background:
    radial-gradient(ellipse at 50% 14%, rgba(255,250,218,.98) 0 11%, rgba(255,210,72,.88) 12% 19%, transparent 20%),
    radial-gradient(ellipse at 50% 13%, #f9d86b 0 26%, #b51f18 27% 36%, #58110d 37% 100%);
  box-shadow:
    inset 0 0 0 5px #7b351a,
    inset 0 0 0 10px rgba(255,225,126,.46),
    0 0 20px rgba(255,193,49,.42);
}

.jukebox-arch::before,
.jukebox-arch::after{
  content:"";
  position:absolute;
  top:88px;
  bottom:34px;
  width:16px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff7cb,#f9d14c 35%,#ef7f1a 65%,#d4361f);
  box-shadow:0 0 12px rgba(255,215,78,.85), 0 0 24px rgba(244,108,31,.42);
}

.jukebox-arch::before{ left:12px; }
.jukebox-arch::after{ right:12px; }

.jukebox-brand{
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:80%;
  padding:8px 18px;
  border-radius:999px;
  color:#4a1708;
  background:linear-gradient(180deg,#fff4b3,#e6ad31);
  border:2px solid #7f421b;
  font-family:"Roboto Slab", Georgia, serif;
  font-size:20px;
  font-weight:900;
  letter-spacing:.07em;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
  box-shadow:0 4px 12px rgba(0,0,0,.28), 0 0 14px rgba(255,217,84,.55);
}

.jukebox-screen{
  position:relative;
  z-index:2;
  padding:20px;
  border-radius:22px;
  border:5px solid #3a1a0e;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 14%),
    linear-gradient(180deg,#21170e,#0d0b09 72%);
  box-shadow:
    inset 0 0 0 2px #be8a37,
    inset 0 0 28px rgba(0,0,0,.70),
    0 8px 20px rgba(0,0,0,.38);
}

.jukebox-kicker{
  text-align:center;
  color:#f7c94e;
  font-size:10px;
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.jukebox-title{
  margin:5px 0 16px;
  text-align:center;
  color:#fff2c5;
  font-family:"Roboto Slab", Georgia, serif;
  font-size:26px;
  line-height:1.1;
  text-shadow:0 0 12px rgba(245,158,11,.38);
}

.jukebox-now{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,216,106,.28);
  background:linear-gradient(180deg,rgba(104,30,16,.62),rgba(54,17,10,.78));
}

.jukebox-now-label,
.jukebox-section-label{
  color:#eabf63;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.jukebox-now-title{
  margin-top:4px;
  color:#fff8df;
  font-size:16px;
  font-weight:800;
}

.jukebox-now-sub{
  margin-top:2px;
  color:#d6c7ab;
  font-size:12px;
}

.jukebox-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin-top:14px;
}

.jukebox-search{
  min-width:0;
  height:38px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid #7f5d2d !important;
  background:#f8efd9 !important;
  color:#342419 !important;
  font-size:13px;
}

.jukebox-search:disabled{
  opacity:.82;
}

.jukebox-search-btn,
.jukebox-control{
  border-radius:10px;
  border:1px solid #d6a842 !important;
  color:#3a1809 !important;
  background:linear-gradient(180deg,#ffe38b,#d99b2f) !important;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62), 0 3px 7px rgba(0,0,0,.22) !important;
}

.jukebox-search-btn{
  min-width:90px;
  padding:0 13px;
}

.jukebox-controls{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}

.jukebox-control{
  min-height:38px;
  padding:7px 8px;
  font-size:12px;
}

.jukebox-search-btn:disabled,
.jukebox-control:disabled{
  opacity:.48;
  cursor:not-allowed;
  filter:grayscale(.35);
}

.jukebox-bottom-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

.jukebox-panel-card{
  min-height:82px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(217,168,66,.22);
  background:rgba(255,244,210,.06);
}

.jukebox-placeholder{
  margin-top:7px;
  color:#c9b99e;
  font-size:12px;
  line-height:1.35;
}


.jukebox-video-block{
  margin-top:14px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(217,168,66,.30);
  background:linear-gradient(180deg,rgba(255,244,210,.07),rgba(0,0,0,.18));
  box-shadow:inset 0 0 18px rgba(0,0,0,.32);
}

.jukebox-video-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 2px 8px;
}

.jukebox-video-test{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#c9b99e;
  font-size:10px;
  font-weight:700;
}

.jukebox-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:11px;
  border:2px solid #a9772d;
  background:#000;
  box-shadow:
    0 5px 14px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,228,155,.16);
}

.jukebox-video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#000;
}

.jukebox-base{
  position:relative;
  z-index:2;
  width:76%;
  height:18px;
  margin:14px auto -8px;
  border-radius:50%;
  background:linear-gradient(180deg,#d9982d,#5c200d);
  border:2px solid #f4d071;
  box-shadow:0 8px 12px rgba(0,0,0,.45), inset 0 2px 1px rgba(255,255,255,.28);
}

.jukebox-restore{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:12001;
  display:none;
  min-height:42px;
  padding:8px 16px;
  border-radius:999px;
  border:2px solid #f2c357 !important;
  color:#351204 !important;
  background:linear-gradient(135deg,#ffe17a,#f59e0b 55%,#b91c1c) !important;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.38),0 0 18px rgba(245,158,11,.45) !important;
}

.jukebox-restore.is-visible{
  display:block;
}

@media (max-width:720px){
  .jukebox-machine{
    width:calc(100vw - 14px);
    max-height:calc(100vh - 14px);
    border-radius:28px 28px 20px 20px;
  }

  .jukebox-body{
    padding:12px 12px 18px;
    max-height:calc(100vh - 62px);
  }

  .jukebox-arch{
    padding:48px 22px 22px;
    border-radius:180px 180px 22px 22px / 110px 110px 22px 22px;
  }

  .jukebox-brand{
    top:13px;
    font-size:16px;
    padding:6px 13px;
  }

  .jukebox-screen{ padding:14px; }
  .jukebox-title{ font-size:21px; }
  .jukebox-controls{ grid-template-columns:1fr 1fr; }
  .jukebox-bottom-grid{ grid-template-columns:1fr; }
  .jukebox-video-head{ align-items:flex-start; flex-direction:column; gap:3px; }
  .jukebox-video-test{ width:100%; }
  .dj-panel{ align-items:flex-start; gap:10px; }
  .dj-panel-actions{ justify-content:flex-end; }
}

/* ===== V3: Top 3000 + wachtrij + echte jukeboxspeler ===== */
.jukebox-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.jukebox-source-status{
  color:#bfae90;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

.jukebox-mini-btn,
.jukebox-row-btn{
  border:1px solid rgba(230,179,75,.46) !important;
  color:#3a1809 !important;
  background:linear-gradient(180deg,#ffe9a4,#dba33c) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.60),0 2px 5px rgba(0,0,0,.20) !important;
  font-weight:900;
  cursor:pointer;
}

.jukebox-mini-btn{
  padding:3px 7px;
  border-radius:7px;
  font-size:9px;
}

.jukebox-library-card,
.jukebox-queue-card{
  height:210px;
  min-height:210px;
  display:flex;
  flex-direction:column;
}

.jukebox-results,
.jukebox-queue{
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
  padding-right:3px;
  scrollbar-width:thin;
  scrollbar-color:#a6742f rgba(255,255,255,.05);
}

.jukebox-result,
.jukebox-queue-row{
  display:grid;
  align-items:center;
  gap:7px;
  border-bottom:1px solid rgba(255,233,173,.08);
}

.jukebox-result{
  grid-template-columns:32px minmax(0,1fr) auto;
  min-height:44px;
  padding:5px 3px;
}

.jukebox-result.is-playable:hover,
.jukebox-queue-row:hover{
  background:rgba(255,223,124,.07);
}

.jukebox-result.is-pending{
  opacity:.67;
}

.jukebox-result-rank{
  color:#d7ad58;
  font-size:10px;
  font-weight:900;
  text-align:right;
}

.jukebox-result-main,
.jukebox-queue-main{
  min-width:0;
}

.jukebox-result-title{
  overflow:hidden;
  color:#fff6dc;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.jukebox-result-title span{
  color:#d6c7ab;
  font-weight:600;
}

.jukebox-result-source{
  margin-top:2px;
  overflow:hidden;
  color:#9f9078;
  font-size:8px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.jukebox-result-actions,
.jukebox-queue-actions{
  display:flex;
  align-items:center;
  gap:4px;
}

.jukebox-row-btn{
  width:27px;
  height:25px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:7px;
  font-size:11px;
}

.jukebox-row-btn:hover,
.jukebox-mini-btn:hover{
  filter:brightness(1.08);
}

.jukebox-pending-badge{
  display:inline-block;
  padding:3px 5px;
  border-radius:6px;
  border:1px solid rgba(214,199,171,.22);
  color:#aa9b82;
  font-size:8px;
  font-weight:800;
}

.jukebox-results-more{
  padding:8px 5px 3px;
  color:#9f9078;
  font-size:9px;
  line-height:1.25;
  text-align:center;
}

.jukebox-queue-row{
  grid-template-columns:22px minmax(0,1fr) auto;
  min-height:42px;
  padding:4px 2px;
}

.jukebox-queue-pos{
  color:#d7ad58;
  font-size:10px;
  font-weight:900;
  text-align:center;
}

.jukebox-queue-main div{
  overflow:hidden;
  color:#fff6dc;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.jukebox-queue-main span{
  display:block;
  margin-top:1px;
  overflow:hidden;
  color:#bfae90;
  font-size:9px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.jukebox-control.is-active{
  background:linear-gradient(180deg,#fff2a9,#f3b139) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 11px rgba(245,158,11,.42) !important;
}

.jukebox-video-mount,
.jukebox-video-mount iframe{
  width:100%;
  height:100%;
}

.jukebox-video-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#d9b96d;
  background:
    radial-gradient(circle at 50% 42%,rgba(155,72,25,.20),transparent 33%),
    #050505;
  font-size:24px;
  text-align:center;
}

.jukebox-video-empty span{
  color:#ab9a7e;
  font-size:10px;
  font-weight:700;
}

@media (max-width:720px){
  .jukebox-library-card,
  .jukebox-queue-card{
    height:180px;
    min-height:180px;
  }
  .jukebox-source-status{
    white-space:normal;
    text-align:right;
  }
}

/* =====================================================
   WURLITZER 2.0 · COMPACT + BABBELHOEK THEMA'S
   Formaat kleiner gemaakt voor gebruik naast de chat.
   De jukebox volgt automatisch html[data-look].
   ===================================================== */

/* Standaard / Licht */
:root,
html[data-look="light"]{
  --jb-shell-1:#6d1c13;
  --jb-shell-2:#b53a1e;
  --jb-shell-3:#45110b;
  --jb-trim:#e6b34b;
  --jb-trim-light:#fff0a0;
  --jb-glow:rgba(245,158,11,.48);
  --jb-head-1:#6e2412;
  --jb-head-2:#351006;
  --jb-screen-1:#24180f;
  --jb-screen-2:#0c0a08;
  --jb-card:rgba(255,244,210,.065);
  --jb-card-hover:rgba(255,223,124,.09);
  --jb-now-1:rgba(117,34,17,.72);
  --jb-now-2:rgba(55,16,9,.84);
  --jb-text:#fff5d7;
  --jb-muted:#cbb99c;
  --jb-label:#e8bc5d;
  --jb-input-bg:#f8efd9;
  --jb-input-text:#342419;
  --jb-btn-1:#ffe38b;
  --jb-btn-2:#d99b2f;
  --jb-btn-text:#3a1809;
  --jb-line:rgba(230,179,75,.30);
}

html[data-look="dark"]{
  --jb-shell-1:#2f343d;
  --jb-shell-2:#171b21;
  --jb-shell-3:#090b0f;
  --jb-trim:#77808d;
  --jb-trim-light:#d9e0e8;
  --jb-glow:rgba(148,163,184,.28);
  --jb-head-1:#343b46;
  --jb-head-2:#181c22;
  --jb-screen-1:#171b21;
  --jb-screen-2:#090b0e;
  --jb-card:rgba(255,255,255,.055);
  --jb-card-hover:rgba(255,255,255,.09);
  --jb-now-1:rgba(58,65,77,.74);
  --jb-now-2:rgba(28,32,39,.88);
  --jb-text:#f3f6fb;
  --jb-muted:#b4bfd1;
  --jb-label:#d3d9e2;
  --jb-input-bg:#11151b;
  --jb-input-text:#f3f6fb;
  --jb-btn-1:#4a5362;
  --jb-btn-2:#2a2f38;
  --jb-btn-text:#f3f6fb;
  --jb-line:rgba(255,255,255,.13);
}

html[data-look="arcade"]{
  --jb-shell-1:#17255c;
  --jb-shell-2:#5b21b6;
  --jb-shell-3:#080b24;
  --jb-trim:#38bdf8;
  --jb-trim-light:#c4f1ff;
  --jb-glow:rgba(192,38,211,.50);
  --jb-head-1:#34206a;
  --jb-head-2:#0b1234;
  --jb-screen-1:#0c1435;
  --jb-screen-2:#050817;
  --jb-card:rgba(86,66,170,.16);
  --jb-card-hover:rgba(56,189,248,.13);
  --jb-now-1:rgba(75,35,145,.62);
  --jb-now-2:rgba(8,15,52,.86);
  --jb-text:#f6f3ff;
  --jb-muted:#c5b9e8;
  --jb-label:#67e8f9;
  --jb-input-bg:#070b1c;
  --jb-input-text:#f6f3ff;
  --jb-btn-1:#8b5cf6;
  --jb-btn-2:#0284c7;
  --jb-btn-text:#ffffff;
  --jb-line:rgba(56,189,248,.34);
}

html[data-look="cafe"]{
  --jb-shell-1:#5b351d;
  --jb-shell-2:#8b4a20;
  --jb-shell-3:#211109;
  --jb-trim:#c8843f;
  --jb-trim-light:#f7d08a;
  --jb-glow:rgba(245,158,11,.34);
  --jb-head-1:#5c351f;
  --jb-head-2:#29150c;
  --jb-screen-1:#2a180f;
  --jb-screen-2:#100906;
  --jb-card:rgba(255,226,180,.075);
  --jb-card-hover:rgba(245,158,11,.11);
  --jb-now-1:rgba(105,58,26,.70);
  --jb-now-2:rgba(43,23,12,.88);
  --jb-text:#fff4df;
  --jb-muted:#d9bea0;
  --jb-label:#f2b85d;
  --jb-input-bg:#1d100b;
  --jb-input-text:#fff4df;
  --jb-btn-1:#c67222;
  --jb-btn-2:#74310d;
  --jb-btn-text:#fff8e8;
  --jb-line:rgba(200,132,63,.34);
}

html[data-look="midnight"]{
  --jb-shell-1:#3a2852;
  --jb-shell-2:#7e2d76;
  --jb-shell-3:#130d1d;
  --jb-trim:#a855f7;
  --jb-trim-light:#e8d5ff;
  --jb-glow:rgba(244,114,182,.38);
  --jb-head-1:#4b285d;
  --jb-head-2:#1b1025;
  --jb-screen-1:#21142d;
  --jb-screen-2:#0c0812;
  --jb-card:rgba(255,255,255,.065);
  --jb-card-hover:rgba(244,114,182,.10);
  --jb-now-1:rgba(93,46,112,.62);
  --jb-now-2:rgba(28,17,39,.88);
  --jb-text:#f7f0ff;
  --jb-muted:#c9b9d9;
  --jb-label:#f0abfc;
  --jb-input-bg:#120d1b;
  --jb-input-text:#f7f0ff;
  --jb-btn-1:#9333ea;
  --jb-btn-2:#be185d;
  --jb-btn-text:#ffffff;
  --jb-line:rgba(168,85,247,.30);
}

html[data-look="red"]{
  --jb-shell-1:#641824;
  --jb-shell-2:#b91c1c;
  --jb-shell-3:#21060b;
  --jb-trim:#fb7185;
  --jb-trim-light:#ffd1d8;
  --jb-glow:rgba(239,68,68,.42);
  --jb-head-1:#681824;
  --jb-head-2:#28070d;
  --jb-screen-1:#2d0b11;
  --jb-screen-2:#0d0305;
  --jb-card:rgba(255,255,255,.06);
  --jb-card-hover:rgba(251,113,133,.11);
  --jb-now-1:rgba(112,28,40,.70);
  --jb-now-2:rgba(43,8,14,.88);
  --jb-text:#fff4f4;
  --jb-muted:#e7b6bd;
  --jb-label:#fda4af;
  --jb-input-bg:#17070b;
  --jb-input-text:#fff4f4;
  --jb-btn-1:#ef4444;
  --jb-btn-2:#991b1b;
  --jb-btn-text:#ffffff;
  --jb-line:rgba(251,113,133,.30);
}

html[data-look="blue"]{
  --jb-shell-1:#163f78;
  --jb-shell-2:#1d4ed8;
  --jb-shell-3:#07152a;
  --jb-trim:#60a5fa;
  --jb-trim-light:#dbeafe;
  --jb-glow:rgba(59,130,246,.42);
  --jb-head-1:#17457f;
  --jb-head-2:#091a33;
  --jb-screen-1:#0b2241;
  --jb-screen-2:#030a14;
  --jb-card:rgba(255,255,255,.06);
  --jb-card-hover:rgba(96,165,250,.12);
  --jb-now-1:rgba(24,69,127,.70);
  --jb-now-2:rgba(8,23,45,.90);
  --jb-text:#f2f8ff;
  --jb-muted:#b7d1ef;
  --jb-label:#93c5fd;
  --jb-input-bg:#071326;
  --jb-input-text:#f2f8ff;
  --jb-btn-1:#3b82f6;
  --jb-btn-2:#1d4ed8;
  --jb-btn-text:#ffffff;
  --jb-line:rgba(96,165,250,.32);
}

html[data-look="pride"]{
  --jb-shell-1:#6f1b58;
  --jb-shell-2:#c026d3;
  --jb-shell-3:#25091d;
  --jb-trim:#f472b6;
  --jb-trim-light:#ffe4f3;
  --jb-glow:rgba(236,72,153,.46);
  --jb-head-1:#711a59;
  --jb-head-2:#2b0a22;
  --jb-screen-1:#35102b;
  --jb-screen-2:#12040e;
  --jb-card:rgba(255,255,255,.065);
  --jb-card-hover:rgba(244,114,182,.12);
  --jb-now-1:rgba(111,27,88,.70);
  --jb-now-2:rgba(45,9,35,.90);
  --jb-text:#fff4fb;
  --jb-muted:#f2bfd9;
  --jb-label:#f9a8d4;
  --jb-input-bg:#1c0717;
  --jb-input-text:#fff4fb;
  --jb-btn-1:#ec4899;
  --jb-btn-2:#a21caf;
  --jb-btn-text:#ffffff;
  --jb-line:rgba(244,114,182,.34);
}

html[data-look="terminal"]{
  --jb-shell-1:#0d321b;
  --jb-shell-2:#14532d;
  --jb-shell-3:#020905;
  --jb-trim:#39ff6f;
  --jb-trim-light:#c8ffd7;
  --jb-glow:rgba(57,255,111,.34);
  --jb-head-1:#123c21;
  --jb-head-2:#041209;
  --jb-screen-1:#07170d;
  --jb-screen-2:#010502;
  --jb-card:rgba(57,255,111,.045);
  --jb-card-hover:rgba(57,255,111,.085);
  --jb-now-1:rgba(20,83,45,.55);
  --jb-now-2:rgba(3,17,9,.92);
  --jb-text:#c8ffd7;
  --jb-muted:#74b985;
  --jb-label:#55ff7d;
  --jb-input-bg:#020b05;
  --jb-input-text:#c8ffd7;
  --jb-btn-1:#1e7b3b;
  --jb-btn-2:#073b1b;
  --jb-btn-text:#d9ffe3;
  --jb-line:rgba(57,255,111,.25);
}

/* Compacte desktopkast */
.jukebox-machine{
  width:min(650px, calc(100vw - 24px)) !important;
  max-height:min(90vh, 710px) !important;
  border-radius:30px 30px 20px 20px !important;
  border:2px solid var(--jb-shell-3) !important;
  background:
    radial-gradient(circle at 50% 7%, color-mix(in srgb,var(--jb-trim-light) 58%,transparent), transparent 18%),
    linear-gradient(90deg,
      var(--jb-shell-1) 0 5%,
      var(--jb-shell-2) 5% 9%,
      var(--jb-trim) 9% 11%,
      var(--jb-shell-3) 11% 89%,
      var(--jb-trim) 89% 91%,
      var(--jb-shell-2) 91% 95%,
      var(--jb-shell-1) 95% 100%) !important;
  box-shadow:
    0 20px 52px rgba(0,0,0,.58),
    0 0 0 1px color-mix(in srgb,var(--jb-trim-light) 32%,transparent),
    0 0 28px var(--jb-glow),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

.jukebox-head{
  height:40px !important;
  padding:5px 9px !important;
  background:linear-gradient(180deg,var(--jb-head-1),var(--jb-head-2)) !important;
  border-bottom-color:var(--jb-line) !important;
}

.jukebox-head-title{
  color:var(--jb-text) !important;
  font-size:12px !important;
  text-shadow:0 0 8px var(--jb-glow) !important;
}

.jukebox-window-btn{
  width:30px !important;
  height:27px !important;
  border-radius:8px !important;
  border-color:var(--jb-line) !important;
  color:var(--jb-text) !important;
  background:linear-gradient(180deg,var(--jb-btn-1),var(--jb-btn-2)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.25) !important;
}

.jukebox-body{
  padding:10px 24px 16px !important;
  max-height:calc(min(90vh, 710px) - 40px) !important;
}

.jukebox-arch{
  max-width:570px !important;
  padding:42px 22px 18px !important;
  border-width:4px !important;
  border-color:var(--jb-trim) !important;
  border-radius:255px 255px 22px 22px / 135px 135px 22px 22px !important;
  background:
    radial-gradient(ellipse at 50% 12%, color-mix(in srgb,var(--jb-trim-light) 88%,white 12%) 0 10%, color-mix(in srgb,var(--jb-trim) 88%,white 12%) 11% 18%, transparent 19%),
    radial-gradient(ellipse at 50% 12%, var(--jb-trim) 0 25%, var(--jb-shell-2) 26% 35%, var(--jb-shell-3) 36% 100%) !important;
  box-shadow:
    inset 0 0 0 4px var(--jb-shell-1),
    inset 0 0 0 7px color-mix(in srgb,var(--jb-trim-light) 30%,transparent),
    0 0 18px var(--jb-glow) !important;
}

.jukebox-arch::before,
.jukebox-arch::after{
  top:64px !important;
  bottom:24px !important;
  width:11px !important;
  background:linear-gradient(180deg,var(--jb-trim-light),var(--jb-trim) 42%,var(--jb-shell-2)) !important;
  box-shadow:0 0 10px var(--jb-glow),0 0 18px var(--jb-glow) !important;
}
.jukebox-arch::before{left:8px !important;}
.jukebox-arch::after{right:8px !important;}

.jukebox-brand{
  top:10px !important;
  padding:5px 13px !important;
  color:var(--jb-btn-text) !important;
  background:linear-gradient(180deg,var(--jb-btn-1),var(--jb-btn-2)) !important;
  border:1px solid var(--jb-trim) !important;
  font-size:15px !important;
  box-shadow:0 3px 9px rgba(0,0,0,.28),0 0 12px var(--jb-glow) !important;
}

.jukebox-screen{
  padding:11px !important;
  border-width:3px !important;
  border-color:var(--jb-shell-3) !important;
  border-radius:16px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),transparent 12%),
    linear-gradient(180deg,var(--jb-screen-1),var(--jb-screen-2) 76%) !important;
  box-shadow:
    inset 0 0 0 1px var(--jb-trim),
    inset 0 0 20px rgba(0,0,0,.64),
    0 5px 14px rgba(0,0,0,.34) !important;
}

.jukebox-kicker{
  color:var(--jb-label) !important;
  font-size:8px !important;
  letter-spacing:.18em !important;
}

.jukebox-title{
  margin:3px 0 9px !important;
  color:var(--jb-text) !important;
  font-size:19px !important;
  text-shadow:0 0 10px var(--jb-glow) !important;
}

.jukebox-now{
  padding:8px 10px !important;
  border-radius:10px !important;
  border-color:var(--jb-line) !important;
  background:linear-gradient(180deg,var(--jb-now-1),var(--jb-now-2)) !important;
}

.jukebox-now-label,
.jukebox-section-label{
  color:var(--jb-label) !important;
  font-size:8px !important;
}

.jukebox-now-title{
  margin-top:2px !important;
  color:var(--jb-text) !important;
  font-size:13px !important;
}

.jukebox-now-sub{
  color:var(--jb-muted) !important;
  font-size:10px !important;
}

.jukebox-search-row{
  gap:6px !important;
  margin-top:8px !important;
}

.jukebox-search{
  height:32px !important;
  padding:0 9px !important;
  border-color:var(--jb-line) !important;
  background:var(--jb-input-bg) !important;
  color:var(--jb-input-text) !important;
  -webkit-text-fill-color:var(--jb-input-text) !important;
  font-size:11px !important;
}
.jukebox-search::placeholder{
  color:color-mix(in srgb,var(--jb-input-text) 62%,transparent) !important;
  -webkit-text-fill-color:color-mix(in srgb,var(--jb-input-text) 62%,transparent) !important;
}

.jukebox-search-btn,
.jukebox-control,
.jukebox-mini-btn,
.jukebox-row-btn{
  border-color:var(--jb-line) !important;
  color:var(--jb-btn-text) !important;
  -webkit-text-fill-color:var(--jb-btn-text) !important;
  background:linear-gradient(180deg,var(--jb-btn-1),var(--jb-btn-2)) !important;
}

.jukebox-search-btn{
  min-width:72px !important;
  padding:0 10px !important;
  font-size:10px !important;
}

.jukebox-controls{
  gap:6px !important;
  margin-top:8px !important;
}

.jukebox-control{
  min-height:31px !important;
  padding:5px 6px !important;
  font-size:10px !important;
}

.jukebox-bottom-grid{
  gap:7px !important;
  margin-top:8px !important;
}

.jukebox-panel-card{
  min-height:0 !important;
  padding:8px !important;
  border-radius:9px !important;
  border-color:var(--jb-line) !important;
  background:var(--jb-card) !important;
}

.jukebox-library-card,
.jukebox-queue-card{
  height:126px !important;
  min-height:126px !important;
}

.jukebox-card-head{
  margin-bottom:5px !important;
}

.jukebox-source-status{
  color:var(--jb-muted) !important;
  font-size:7px !important;
}

.jukebox-result,
.jukebox-queue-row{
  border-bottom-color:var(--jb-line) !important;
}

.jukebox-result{
  min-height:34px !important;
  grid-template-columns:27px minmax(0,1fr) auto !important;
  gap:5px !important;
  padding:3px 2px !important;
}

.jukebox-queue-row{
  min-height:33px !important;
  gap:5px !important;
  padding:3px 2px !important;
}

.jukebox-result.is-playable:hover,
.jukebox-queue-row:hover{
  background:var(--jb-card-hover) !important;
}

.jukebox-result-rank,
.jukebox-queue-pos{
  color:var(--jb-label) !important;
  font-size:8px !important;
}

.jukebox-result-title,
.jukebox-queue-main div{
  color:var(--jb-text) !important;
  font-size:9px !important;
}

.jukebox-result-title span,
.jukebox-result-source,
.jukebox-queue-main span,
.jukebox-results-more,
.jukebox-placeholder,
.jukebox-video-test{
  color:var(--jb-muted) !important;
}

.jukebox-result-source{font-size:7px !important;}
.jukebox-queue-main span{font-size:8px !important;}

.jukebox-row-btn{
  width:23px !important;
  height:22px !important;
  border-radius:6px !important;
  font-size:9px !important;
}

.jukebox-video-block{
  margin-top:8px !important;
  padding:7px !important;
  border-radius:10px !important;
  border-color:var(--jb-line) !important;
  background:linear-gradient(180deg,var(--jb-card),rgba(0,0,0,.16)) !important;
}

.jukebox-video-head{
  margin:0 1px 5px !important;
}

.jukebox-video-frame{
  height:170px !important;
  aspect-ratio:auto !important;
  border-width:1px !important;
  border-color:var(--jb-trim) !important;
  border-radius:8px !important;
}

.jukebox-video-empty{
  color:var(--jb-label) !important;
  font-size:20px !important;
}
.jukebox-video-empty span{
  color:var(--jb-muted) !important;
  font-size:8px !important;
}

.jukebox-base{
  width:70% !important;
  height:12px !important;
  margin:8px auto -5px !important;
  border:1px solid var(--jb-trim) !important;
  background:linear-gradient(180deg,var(--jb-btn-1),var(--jb-shell-3)) !important;
}

.jukebox-control.is-active{
  background:linear-gradient(180deg,var(--jb-trim-light),var(--jb-btn-1)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 0 10px var(--jb-glow) !important;
}

.jukebox-restore,
.jukebox-launch-button{
  border-color:var(--jb-trim) !important;
  color:var(--jb-btn-text) !important;
  -webkit-text-fill-color:var(--jb-btn-text) !important;
  background:linear-gradient(135deg,var(--jb-btn-1),var(--jb-btn-2)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 5px 14px rgba(0,0,0,.30),0 0 14px var(--jb-glow) !important;
}

html[data-look="terminal"] .jukebox-machine,
html[data-look="terminal"] .jukebox-machine button,
html[data-look="terminal"] .jukebox-machine input{
  font-family:Consolas,"Courier New",monospace !important;
}

html[data-look="pride"] .jukebox-arch{
  border-image:linear-gradient(90deg,#ef4444,#f59e0b,#eab308,#22c55e,#3b82f6,#8b5cf6,#ec4899) 1 !important;
}

@media (max-width:720px){
  .jukebox-machine{
    width:calc(100vw - 10px) !important;
    max-height:calc(100vh - 10px) !important;
    border-radius:22px 22px 16px 16px !important;
  }
  .jukebox-body{
    padding:7px 8px 12px !important;
    max-height:calc(100vh - 50px) !important;
  }
  .jukebox-arch{
    padding:38px 15px 14px !important;
    border-radius:170px 170px 18px 18px / 88px 88px 18px 18px !important;
  }
  .jukebox-brand{font-size:13px !important;}
  .jukebox-screen{padding:9px !important;}
  .jukebox-title{font-size:17px !important;}
  .jukebox-controls{grid-template-columns:1fr 1fr !important;}
  .jukebox-bottom-grid{grid-template-columns:1fr 1fr !important;}
  .jukebox-library-card,
  .jukebox-queue-card{
    height:112px !important;
    min-height:112px !important;
  }
  .jukebox-video-frame{height:150px !important;}
}

@media (max-width:480px){
  .jukebox-bottom-grid{grid-template-columns:1fr !important;}
  .jukebox-library-card,
  .jukebox-queue-card{
    height:105px !important;
    min-height:105px !important;
  }
  .jukebox-video-frame{height:138px !important;}
}

/* =========================================================
   WURLITZER 2.1 · ECHTE KASTEN PER BABBELHOEK-THEMA
   Elke look krijgt een eigen vorm/materialen i.p.v. alleen kleur.
   ========================================================= */

.jukebox-machine,
.jukebox-arch,
.jukebox-screen,
.jukebox-brand,
.jukebox-head,
.jukebox-base{
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,border-radius .18s ease;
}

/* ---------- LICHT · 50's DINER ---------- */
html[data-look="light"] .jukebox-machine{
  border:2px solid #7b8793 !important;
  border-radius:34px 34px 22px 22px !important;
  background:
    linear-gradient(90deg,#d9e2e6 0 4%,#f8faf8 4% 8%,#e64b3c 8% 10%,#f5f0dc 10% 90%,#e64b3c 90% 92%,#f8faf8 92% 96%,#d9e2e6 96% 100%) !important;
  box-shadow:0 20px 48px rgba(26,42,53,.35),0 0 0 2px #f8fafc,0 0 22px rgba(71,176,180,.20) !important;
}
html[data-look="light"] .jukebox-head{
  background:linear-gradient(180deg,#f8fafc,#d9e3e8) !important;
  border-bottom-color:#a9b7c0 !important;
}
html[data-look="light"] .jukebox-head-title{color:#244653 !important;text-shadow:none !important;}
html[data-look="light"] .jukebox-arch{
  border-color:#c6d0d4 !important;
  border-radius:250px 250px 20px 20px / 132px 132px 20px 20px !important;
  background:
    radial-gradient(ellipse at 50% 12%,#fffdf0 0 10%,#70c6c7 11% 17%,transparent 18%),
    radial-gradient(ellipse at 50% 12%,#f7f3e4 0 25%,#e94f42 26% 33%,#d7e5e7 34% 100%) !important;
  box-shadow:inset 0 0 0 4px #ffffff,inset 0 0 0 7px #9fb0b8,0 0 18px rgba(67,170,174,.25) !important;
}
html[data-look="light"] .jukebox-arch::before,
html[data-look="light"] .jukebox-arch::after{
  background:linear-gradient(180deg,#fff8ba,#6fd2d1 45%,#e9594c 80%,#f7d56a) !important;
  box-shadow:0 0 8px rgba(82,201,198,.45) !important;
}
html[data-look="light"] .jukebox-brand{
  color:#21424b !important;
  background:linear-gradient(180deg,#fffdf4,#dfe8e8) !important;
  border-color:#8fa3ad !important;
  box-shadow:0 3px 8px rgba(0,0,0,.18) !important;
  font-family:Georgia,"Times New Roman",serif !important;
}
html[data-look="light"] .jukebox-screen{
  border-color:#a7b4b9 !important;
  background:linear-gradient(180deg,#fbfaf2,#e9eee9) !important;
  box-shadow:inset 0 0 0 2px #ffffff,inset 0 0 18px rgba(79,111,118,.12),0 5px 14px rgba(0,0,0,.18) !important;
}
html[data-look="light"] .jukebox-title,
html[data-look="light"] .jukebox-now-title,
html[data-look="light"] .jukebox-result-title,
html[data-look="light"] .jukebox-queue-main div{color:#213a42 !important;text-shadow:none !important;}
html[data-look="light"] .jukebox-now{
  background:linear-gradient(180deg,#fff7df,#f4ead0) !important;
  border-color:#d6b86b !important;
}
html[data-look="light"] .jukebox-base{
  background:linear-gradient(180deg,#e9eff1,#9caeb7) !important;border-color:#71848e !important;
}

/* ---------- DONKER · BLACK CHROME ---------- */
html[data-look="dark"] .jukebox-machine{
  border-color:#080a0d !important;
  border-radius:24px 24px 16px 16px !important;
  background:
    linear-gradient(90deg,#0a0c0f 0 5%,#353c45 5% 7%,#c69a3d 7% 8%,#101318 8% 92%,#c69a3d 92% 93%,#353c45 93% 95%,#0a0c0f 95% 100%) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.72),0 0 0 1px #454c54,0 0 20px rgba(226,181,84,.16) !important;
}
html[data-look="dark"] .jukebox-head{background:linear-gradient(180deg,#242a31,#0c0f13) !important;}
html[data-look="dark"] .jukebox-arch{
  border-color:#b58a39 !important;
  border-radius:210px 210px 16px 16px / 92px 92px 16px 16px !important;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px),
    radial-gradient(ellipse at 50% 10%,#d5b35e 0 12%,#232930 13% 27%,#080a0d 28% 100%) !important;
  box-shadow:inset 0 0 0 3px #2e343b,inset 0 0 0 6px #080a0d,0 0 16px rgba(206,161,67,.16) !important;
}
html[data-look="dark"] .jukebox-arch::before,
html[data-look="dark"] .jukebox-arch::after{
  width:8px !important;background:linear-gradient(180deg,#d7b35c,#7f622a,#d7b35c) !important;box-shadow:0 0 8px rgba(219,178,79,.28) !important;
}
html[data-look="dark"] .jukebox-brand{
  border-radius:6px !important;background:linear-gradient(180deg,#313841,#11151a) !important;border-color:#a98135 !important;color:#f2d48d !important;letter-spacing:.14em !important;
}
html[data-look="dark"] .jukebox-screen{
  border-radius:8px !important;border-color:#3f474f !important;background:linear-gradient(180deg,#10151a,#06080b) !important;box-shadow:inset 0 0 0 1px #a98135,inset 0 0 24px #000,0 5px 16px rgba(0,0,0,.5) !important;
}
html[data-look="dark"] .jukebox-base{width:82% !important;border-radius:3px !important;background:linear-gradient(180deg,#353c45,#090b0e) !important;}

/* ---------- ARCADE · NEON 1984 ---------- */
html[data-look="arcade"] .jukebox-machine{
  border:2px solid #1ed8ff !important;
  border-radius:18px !important;
  background:
    linear-gradient(90deg,#0a0f31 0 5%,#ff2bd6 5% 7%,#11194d 7% 93%,#20d8ff 93% 95%,#070b26 95% 100%) !important;
  box-shadow:0 22px 56px rgba(0,0,0,.68),0 0 0 2px rgba(255,43,214,.46),0 0 28px rgba(32,216,255,.34),0 0 46px rgba(255,43,214,.20) !important;
}
html[data-look="arcade"] .jukebox-head{
  background:linear-gradient(90deg,#151d58,#4a1766,#151d58) !important;
  border-bottom:2px solid #28d8ff !important;
}
html[data-look="arcade"] .jukebox-head-title{font-family:Consolas,"Courier New",monospace !important;letter-spacing:.12em !important;}
html[data-look="arcade"] .jukebox-arch{
  border-radius:18px !important;
  border:3px solid #20d8ff !important;
  padding-top:46px !important;
  background:
    linear-gradient(rgba(23,33,94,.86),rgba(7,10,36,.96)),
    repeating-linear-gradient(0deg,transparent 0 18px,rgba(56,189,248,.08) 18px 19px),
    repeating-linear-gradient(90deg,transparent 0 18px,rgba(192,38,211,.08) 18px 19px) !important;
  box-shadow:inset 0 0 0 2px #ff2bd6,inset 0 0 22px rgba(0,0,0,.7),0 0 18px rgba(32,216,255,.36) !important;
}
html[data-look="arcade"] .jukebox-arch::before,
html[data-look="arcade"] .jukebox-arch::after{
  top:44px !important;bottom:18px !important;width:5px !important;border-radius:2px !important;
  background:linear-gradient(180deg,#20d8ff,#b72cff,#ff2bd6,#39ff88) !important;
  box-shadow:0 0 10px #20d8ff,0 0 18px #ff2bd6 !important;
}
html[data-look="arcade"] .jukebox-brand{
  top:8px !important;border-radius:4px !important;background:#090d2b !important;border:2px solid #ff2bd6 !important;color:#64e9ff !important;font-family:Consolas,"Courier New",monospace !important;box-shadow:0 0 12px #ff2bd6,0 0 18px rgba(32,216,255,.55) !important;
}
html[data-look="arcade"] .jukebox-screen{
  border-radius:5px !important;border:2px solid #20d8ff !important;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
    #05091d !important;
  box-shadow:inset 0 0 0 1px #ff2bd6,inset 0 0 26px rgba(0,0,0,.78),0 0 14px rgba(32,216,255,.25) !important;
}
html[data-look="arcade"] .jukebox-control,
html[data-look="arcade"] .jukebox-search-btn,
html[data-look="arcade"] .jukebox-mini-btn,
html[data-look="arcade"] .jukebox-row-btn{border-radius:4px !important;font-family:Consolas,"Courier New",monospace !important;}
html[data-look="arcade"] .jukebox-base{width:88% !important;height:8px !important;border-radius:0 !important;background:linear-gradient(90deg,#ff2bd6,#20d8ff,#39ff88,#ff2bd6) !important;box-shadow:0 0 12px rgba(32,216,255,.65) !important;}

/* ---------- BRUIN CAFÉ · WALNOOT & MESSING ---------- */
html[data-look="cafe"] .jukebox-machine{
  border:3px solid #3a1d0d !important;
  border-radius:30px 30px 18px 18px !important;
  background:
    repeating-linear-gradient(90deg,#4b2814 0 8px,#583019 8px 18px,#3d200f 18px 26px),
    linear-gradient(90deg,#5a2f17,#2c1509) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.62),0 0 0 2px #8e5c2c,0 0 22px rgba(234,179,8,.16) !important;
}
html[data-look="cafe"] .jukebox-head{background:linear-gradient(180deg,#5b351f,#28150b) !important;border-bottom-color:#9e6b36 !important;}
html[data-look="cafe"] .jukebox-arch{
  border:5px solid #b58445 !important;
  border-radius:250px 250px 18px 18px / 125px 125px 18px 18px !important;
  background:
    radial-gradient(ellipse at 50% 12%,#ffd98a 0 10%,#9b5b24 11% 18%,transparent 19%),
    repeating-linear-gradient(90deg,#5e351c 0 12px,#4a2815 12px 24px,#6c3c1d 24px 34px) !important;
  box-shadow:inset 0 0 0 3px #2b1408,inset 0 0 0 7px rgba(222,171,91,.26),0 0 16px rgba(226,171,83,.25) !important;
}
html[data-look="cafe"] .jukebox-arch::before,
html[data-look="cafe"] .jukebox-arch::after{background:linear-gradient(180deg,#f6e4b1,#c79545,#83501f) !important;box-shadow:0 0 8px rgba(243,195,96,.32) !important;}
html[data-look="cafe"] .jukebox-brand{
  background:linear-gradient(180deg,#d9b36a,#916126) !important;border-color:#4d2a12 !important;color:#2b1608 !important;font-family:Georgia,"Times New Roman",serif !important;text-shadow:0 1px #f8e2a8 !important;
}
html[data-look="cafe"] .jukebox-screen{
  border-color:#6e431e !important;background:linear-gradient(180deg,#24170f,#0f0b08) !important;box-shadow:inset 0 0 0 2px #a87634,inset 0 0 22px rgba(0,0,0,.66),0 5px 14px rgba(0,0,0,.36) !important;
}
html[data-look="cafe"] .jukebox-base{background:linear-gradient(180deg,#a87634,#4b2814) !important;border-color:#d2aa63 !important;}

/* ---------- MIDNIGHT · ART DECO ---------- */
html[data-look="midnight"] .jukebox-machine{
  border:2px solid #d7b45d !important;
  border-radius:12px 12px 6px 6px !important;
  background:
    linear-gradient(135deg,transparent 0 8%,rgba(231,190,91,.14) 8% 9%,transparent 9% 18%,rgba(231,190,91,.10) 18% 19%,transparent 19%),
    linear-gradient(90deg,#1b1126 0 7%,#b18a3c 7% 8%,#2d193c 8% 92%,#b18a3c 92% 93%,#1b1126 93% 100%) !important;
  box-shadow:0 26px 60px rgba(0,0,0,.70),0 0 0 2px rgba(213,177,88,.25),0 0 24px rgba(178,87,210,.18) !important;
}
html[data-look="midnight"] .jukebox-head{background:linear-gradient(90deg,#1b1126,#4a255a,#1b1126) !important;border-bottom-color:#b18a3c !important;}
html[data-look="midnight"] .jukebox-arch{
  border-radius:8px !important;border:3px double #d0aa58 !important;padding-top:48px !important;
  background:
    linear-gradient(135deg,transparent 0 13%,rgba(208,170,88,.10) 13% 14%,transparent 14% 27%),
    linear-gradient(180deg,#351c45,#120a19) !important;
  box-shadow:inset 0 0 0 2px #5c3570,inset 0 0 28px rgba(0,0,0,.62),0 0 16px rgba(180,110,220,.17) !important;
}
html[data-look="midnight"] .jukebox-arch::before,
html[data-look="midnight"] .jukebox-arch::after{width:6px !important;border-radius:0 !important;background:linear-gradient(180deg,#e7c56d,#8a5cc2,#e7c56d) !important;box-shadow:0 0 7px rgba(222,191,104,.32) !important;}
html[data-look="midnight"] .jukebox-brand{
  border-radius:2px !important;background:linear-gradient(180deg,#4e2c61,#261333) !important;border:2px solid #c7a24e !important;color:#f1d98e !important;font-family:Georgia,"Times New Roman",serif !important;letter-spacing:.16em !important;
}
html[data-look="midnight"] .jukebox-screen{border-radius:3px !important;border-color:#b18a3c !important;background:linear-gradient(180deg,#1c1025,#09060d) !important;box-shadow:inset 0 0 0 1px #6e447f,inset 0 0 24px #000,0 6px 16px rgba(0,0,0,.48) !important;}
html[data-look="midnight"] .jukebox-control,
html[data-look="midnight"] .jukebox-search-btn,
html[data-look="midnight"] .jukebox-mini-btn{border-radius:2px !important;}
html[data-look="midnight"] .jukebox-base{width:84% !important;border-radius:0 !important;background:linear-gradient(90deg,#6d4a22,#d0aa58,#6d4a22) !important;}

/* ---------- RED LOUNGE · ROCK 'N ROLL HOT ROD ---------- */
html[data-look="red"] .jukebox-machine{
  border:3px solid #36060a !important;
  border-radius:38px 38px 22px 22px !important;
  background:
    linear-gradient(90deg,#5f0c12 0 6%,#f1eee3 6% 9%,#be1720 9% 91%,#f1eee3 91% 94%,#5f0c12 94% 100%) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.65),0 0 0 2px #c9c7c1,0 0 26px rgba(239,68,68,.26) !important;
}
html[data-look="red"] .jukebox-head{background:linear-gradient(180deg,#8b1018,#3b060a) !important;border-bottom-color:#eee8d9 !important;}
html[data-look="red"] .jukebox-arch{
  border:5px solid #e8e4d7 !important;
  border-radius:260px 260px 18px 18px / 128px 128px 18px 18px !important;
  background:
    radial-gradient(ellipse at 50% 12%,#fff7d7 0 10%,#ff4b43 11% 18%,transparent 19%),
    radial-gradient(ellipse at 50% 12%,#d9262f 0 25%,#f0ece1 26% 31%,#4a090d 32% 100%) !important;
  box-shadow:inset 0 0 0 4px #8f1017,inset 0 0 0 7px #c3c2bd,0 0 18px rgba(255,83,76,.28) !important;
}
html[data-look="red"] .jukebox-arch::before,
html[data-look="red"] .jukebox-arch::after{background:linear-gradient(180deg,#fff6bd,#ff5a4d,#fff6bd) !important;box-shadow:0 0 10px rgba(255,87,76,.48) !important;}
html[data-look="red"] .jukebox-brand{background:linear-gradient(180deg,#f6f3ea,#c8c7c2) !important;border-color:#6c0c12 !important;color:#7e0c14 !important;font-style:italic !important;}
html[data-look="red"] .jukebox-screen{border-color:#e7e2d5 !important;background:linear-gradient(180deg,#2c090c,#100305) !important;box-shadow:inset 0 0 0 2px #b51d26,inset 0 0 22px #000,0 5px 14px rgba(0,0,0,.4) !important;}
html[data-look="red"] .jukebox-base{background:linear-gradient(180deg,#d6d6d3,#8b1018) !important;border-color:#f5f1e7 !important;}

/* ---------- BLUE LOUNGE · ICE CHROME ---------- */
html[data-look="blue"] .jukebox-machine{
  border:2px solid #8bbce8 !important;
  border-radius:30px 30px 18px 18px !important;
  background:
    linear-gradient(90deg,#0a2444 0 5%,#dbeeff 5% 7%,#1d65a8 7% 10%,#0a1d35 10% 90%,#1d65a8 90% 93%,#dbeeff 93% 95%,#0a2444 95% 100%) !important;
  box-shadow:0 22px 54px rgba(0,0,0,.62),0 0 0 2px rgba(219,238,255,.25),0 0 28px rgba(96,165,250,.28) !important;
}
html[data-look="blue"] .jukebox-head{background:linear-gradient(180deg,#184d7f,#07182d) !important;border-bottom-color:#8ec9ff !important;}
html[data-look="blue"] .jukebox-arch{
  border:4px solid #a8d5ff !important;
  background:
    radial-gradient(ellipse at 50% 12%,#f1faff 0 10%,#66baff 11% 18%,transparent 19%),
    radial-gradient(ellipse at 50% 12%,#2a79bd 0 25%,#d5ecff 26% 31%,#071a2f 32% 100%) !important;
  box-shadow:inset 0 0 0 4px #16466e,inset 0 0 0 7px rgba(210,238,255,.35),0 0 20px rgba(96,165,250,.33) !important;
}
html[data-look="blue"] .jukebox-arch::before,
html[data-look="blue"] .jukebox-arch::after{background:linear-gradient(180deg,#ffffff,#80c9ff,#2f80c8) !important;box-shadow:0 0 12px rgba(128,201,255,.55) !important;}
html[data-look="blue"] .jukebox-brand{background:linear-gradient(180deg,#e8f6ff,#7ebbe8) !important;border-color:#1a568b !important;color:#0b3154 !important;text-shadow:0 1px #fff !important;}
html[data-look="blue"] .jukebox-screen{border-color:#74b8ed !important;background:linear-gradient(180deg,#0a223b,#03101d) !important;box-shadow:inset 0 0 0 2px #d4efff,inset 0 0 24px #000,0 5px 16px rgba(0,0,0,.42) !important;}
html[data-look="blue"] .jukebox-base{background:linear-gradient(180deg,#d8efff,#1d5f98) !important;border-color:#8fd0ff !important;}

/* ---------- PRIDE · DISCO JUKEBOX ---------- */
html[data-look="pride"] .jukebox-machine{
  border:2px solid #ff9bd2 !important;
  border-radius:32px 32px 20px 20px !important;
  background:
    linear-gradient(90deg,#7c185f 0 5%,#ef4444 5% 6.2%,#f59e0b 6.2% 7.4%,#eab308 7.4% 8.6%,#22c55e 8.6% 9.8%,#3b82f6 9.8% 11%,#8b5cf6 11% 12.2%,#351029 12.2% 87.8%,#8b5cf6 87.8% 89%,#3b82f6 89% 90.2%,#22c55e 90.2% 91.4%,#eab308 91.4% 92.6%,#f59e0b 92.6% 93.8%,#ef4444 93.8% 95%,#7c185f 95% 100%) !important;
  box-shadow:0 22px 56px rgba(0,0,0,.66),0 0 0 2px rgba(255,255,255,.20),0 0 30px rgba(244,114,182,.34) !important;
}
html[data-look="pride"] .jukebox-head{background:linear-gradient(90deg,#7a1b60,#b72a8f,#7a1b60) !important;border-bottom-color:#ffb5dc !important;}
html[data-look="pride"] .jukebox-arch{
  border:4px solid #f9a8d4 !important;border-image:none !important;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.85) 0 4%,rgba(244,114,182,.46) 5% 10%,transparent 11%),
    conic-gradient(from 180deg at 50% 12%,#ef4444,#f59e0b,#eab308,#22c55e,#3b82f6,#8b5cf6,#ec4899,#ef4444) !important;
  box-shadow:inset 0 0 0 5px rgba(53,16,41,.72),inset 0 0 0 8px rgba(255,255,255,.16),0 0 22px rgba(244,114,182,.38) !important;
}
html[data-look="pride"] .jukebox-arch::before,
html[data-look="pride"] .jukebox-arch::after{
  background:linear-gradient(180deg,#ef4444,#f59e0b,#eab308,#22c55e,#3b82f6,#8b5cf6,#ec4899) !important;
  box-shadow:0 0 11px rgba(255,255,255,.48) !important;
}
html[data-look="pride"] .jukebox-brand{
  background:linear-gradient(135deg,#ffb4da,#c084fc,#67e8f9) !important;border-color:#fff !important;color:#35102b !important;text-shadow:0 1px #fff !important;box-shadow:0 0 14px rgba(255,255,255,.38),0 0 22px rgba(244,114,182,.35) !important;
}
html[data-look="pride"] .jukebox-screen{
  border-color:#f9a8d4 !important;background:linear-gradient(180deg,#321027,#13050f) !important;box-shadow:inset 0 0 0 2px #c084fc,inset 0 0 26px #000,0 5px 16px rgba(0,0,0,.42) !important;
}
html[data-look="pride"] .jukebox-base{background:linear-gradient(90deg,#ef4444,#f59e0b,#eab308,#22c55e,#3b82f6,#8b5cf6,#ec4899) !important;border-color:#fff !important;box-shadow:0 0 12px rgba(244,114,182,.4) !important;}

/* ---------- RETRO TERMINAL · ECHTE KLASSIEKE WURLITZER ---------- */
html[data-look="terminal"] .jukebox-machine{
  border:4px solid #3a2112 !important;
  border-radius:46px 46px 28px 28px !important;
  background:
    linear-gradient(90deg,#3b2415 0 4%,#7b4a26 4% 8%,#d8b269 8% 10%,#552f18 10% 90%,#d8b269 90% 92%,#7b4a26 92% 96%,#3b2415 96% 100%) !important;
  box-shadow:0 30px 72px rgba(0,0,0,.72),0 0 0 2px #b78445,0 0 30px rgba(255,183,67,.28),inset 0 0 0 1px rgba(255,238,190,.18) !important;
  font-family:Georgia,"Times New Roman",serif !important;
}
html[data-look="terminal"] .jukebox-head{
  background:linear-gradient(180deg,#6c4224,#2f1b10) !important;
  border-bottom:2px solid #b78545 !important;
}
html[data-look="terminal"] .jukebox-head-title{
  color:#ffe7ad !important;font-family:Georgia,"Times New Roman",serif !important;letter-spacing:.10em !important;text-shadow:0 0 8px rgba(255,191,72,.42) !important;
}
html[data-look="terminal"] .jukebox-window-btn{
  border-radius:50% !important;border:1px solid #d3b06a !important;background:radial-gradient(circle at 35% 30%,#d8c18b,#775024 58%,#38200f) !important;color:#fff1c8 !important;
}
html[data-look="terminal"] .jukebox-arch{
  max-width:575px !important;
  padding:54px 24px 20px !important;
  border:6px solid #c99a50 !important;
  border-radius:285px 285px 24px 24px / 160px 160px 24px 24px !important;
  background:
    radial-gradient(ellipse at 50% 10%,#fff4c4 0 9%,#f1c85c 10% 14%,#c65427 15% 20%,transparent 21%),
    radial-gradient(ellipse at 50% 11%,#f4d67a 0 23%,#ad3d22 24% 30%,#5c2c18 31% 36%,#2b180f 37% 100%) !important;
  box-shadow:inset 0 0 0 4px #6c3c1f,inset 0 0 0 9px #dfba6e,inset 0 0 0 12px #4a2614,0 0 24px rgba(255,179,58,.38) !important;
}
html[data-look="terminal"] .jukebox-arch::before,
html[data-look="terminal"] .jukebox-arch::after{
  top:74px !important;bottom:28px !important;width:14px !important;border-radius:999px !important;
  background:linear-gradient(180deg,#fff4bd 0%,#ffd95b 24%,#ef8d29 47%,#d64525 70%,#ffd95b 100%) !important;
  box-shadow:0 0 8px rgba(255,227,128,.88),0 0 18px rgba(245,135,36,.52) !important;
}
html[data-look="terminal"] .jukebox-brand{
  top:11px !important;padding:6px 16px !important;border-radius:999px !important;
  background:linear-gradient(180deg,#fff0b5,#c9953d) !important;border:2px solid #63391c !important;
  color:#4a250f !important;font-family:Georgia,"Times New Roman",serif !important;font-size:16px !important;font-style:italic !important;letter-spacing:.08em !important;text-shadow:0 1px #fff0c8 !important;
  box-shadow:0 3px 9px rgba(0,0,0,.32),0 0 14px rgba(255,203,86,.46) !important;
}
html[data-look="terminal"] .jukebox-screen{
  padding:12px !important;border:5px solid #3d2112 !important;border-radius:14px !important;
  background:
    linear-gradient(180deg,rgba(255,245,208,.05),transparent 14%),
    linear-gradient(180deg,#1c1710,#0d0a07 74%) !important;
  box-shadow:inset 0 0 0 2px #b78945,inset 0 0 0 4px #59311b,inset 0 0 26px rgba(0,0,0,.74),0 7px 18px rgba(0,0,0,.44) !important;
}
html[data-look="terminal"] .jukebox-kicker,
html[data-look="terminal"] .jukebox-now-label,
html[data-look="terminal"] .jukebox-section-label{
  color:#e7b953 !important;font-family:Consolas,"Courier New",monospace !important;letter-spacing:.12em !important;
}
html[data-look="terminal"] .jukebox-title{
  color:#fff0c2 !important;font-family:Georgia,"Times New Roman",serif !important;font-style:italic !important;font-size:20px !important;text-shadow:0 0 10px rgba(239,174,54,.38) !important;
}
html[data-look="terminal"] .jukebox-now{
  border:2px solid #9d7338 !important;border-radius:6px !important;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#12331d,#07170d) !important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.48) !important;
}
html[data-look="terminal"] .jukebox-now-title{color:#d9ffb7 !important;font-family:Consolas,"Courier New",monospace !important;text-shadow:0 0 6px rgba(116,255,104,.26) !important;}
html[data-look="terminal"] .jukebox-now-sub{color:#a6cf8a !important;font-family:Consolas,"Courier New",monospace !important;}
html[data-look="terminal"] .jukebox-search{
  border:2px inset #9b7b48 !important;border-radius:3px !important;background:#efe2b7 !important;color:#38210e !important;-webkit-text-fill-color:#38210e !important;font-family:"Courier New",monospace !important;
}
html[data-look="terminal"] .jukebox-search::placeholder{color:#7b6644 !important;-webkit-text-fill-color:#7b6644 !important;}
html[data-look="terminal"] .jukebox-control,
html[data-look="terminal"] .jukebox-search-btn,
html[data-look="terminal"] .jukebox-mini-btn,
html[data-look="terminal"] .jukebox-row-btn{
  border:2px outset #d5b56d !important;border-radius:4px !important;
  background:linear-gradient(180deg,#d8bc78,#8f642d) !important;color:#2c180b !important;-webkit-text-fill-color:#2c180b !important;
  font-family:Georgia,"Times New Roman",serif !important;text-shadow:0 1px rgba(255,245,210,.45) !important;
}
html[data-look="terminal"] .jukebox-panel-card,
html[data-look="terminal"] .jukebox-video-block{
  border:1px solid #75502a !important;background:linear-gradient(180deg,rgba(77,45,23,.72),rgba(29,17,10,.82)) !important;
}
html[data-look="terminal"] .jukebox-result-title,
html[data-look="terminal"] .jukebox-queue-main div{color:#fff0c2 !important;font-family:Georgia,"Times New Roman",serif !important;}
html[data-look="terminal"] .jukebox-result-rank,
html[data-look="terminal"] .jukebox-queue-pos{color:#f1c75f !important;font-family:Consolas,"Courier New",monospace !important;}
html[data-look="terminal"] .jukebox-video-frame{border:3px solid #8d6331 !important;border-radius:4px !important;box-shadow:inset 0 0 0 2px #3b2111 !important;}
html[data-look="terminal"] .jukebox-base{
  width:76% !important;height:15px !important;border:2px solid #b78945 !important;border-radius:50% 50% 8px 8px / 45% 45% 8px 8px !important;background:linear-gradient(180deg,#a56f36,#3d2112) !important;box-shadow:0 5px 10px rgba(0,0,0,.28) !important;
}

/* Compacte mobiele correctie voor de afwijkende kastvormen. */
@media (max-width:720px){
  html[data-look="arcade"] .jukebox-arch,
  html[data-look="midnight"] .jukebox-arch{border-radius:10px !important;}
  html[data-look="terminal"] .jukebox-arch{border-radius:180px 180px 18px 18px / 96px 96px 18px 18px !important;padding-top:46px !important;}
  html[data-look="terminal"] .jukebox-arch::before,
  html[data-look="terminal"] .jukebox-arch::after{top:62px !important;width:10px !important;}
}

/* =========================================================
   WURLITZER 2.2 · COMPACT ZONDER WACHTRIJ
   De Top 3000 is nu de enige keuzelijst; verzoeknummers zijn verwijderd.
   ========================================================= */
.jukebox-machine{
  width:min(580px, calc(100vw - 20px)) !important;
  max-height:min(88vh, 650px) !important;
}

.jukebox-head{
  height:36px !important;
  padding:4px 8px !important;
}

.jukebox-body{
  padding:8px 18px 12px !important;
  max-height:calc(min(88vh, 650px) - 36px) !important;
}

.jukebox-arch{
  padding-left:18px !important;
  padding-right:18px !important;
  padding-bottom:14px !important;
}

.jukebox-screen{
  padding:9px !important;
}

.jukebox-title{
  margin-bottom:7px !important;
}

.jukebox-now{
  padding:7px 9px !important;
}

.jukebox-search-row,
.jukebox-controls,
.jukebox-bottom-grid,
.jukebox-video-block{
  margin-top:6px !important;
}

.jukebox-bottom-grid{
  grid-template-columns:1fr !important;
  gap:0 !important;
}

.jukebox-library-card{
  height:112px !important;
  min-height:112px !important;
}

.jukebox-result{
  min-height:31px !important;
}

.jukebox-video-block{
  padding:6px !important;
}

.jukebox-video-frame{
  height:148px !important;
}

.jukebox-base{
  margin-top:6px !important;
}

@media (max-width:720px){
  .jukebox-machine{
    width:calc(100vw - 8px) !important;
    max-height:calc(100vh - 8px) !important;
  }
  .jukebox-body{
    padding:6px 7px 9px !important;
    max-height:calc(100vh - 44px) !important;
  }
  .jukebox-library-card{
    height:100px !important;
    min-height:100px !important;
  }
  .jukebox-video-frame{
    height:136px !important;
  }
}

@media (max-width:480px){
  .jukebox-library-card{
    height:94px !important;
    min-height:94px !important;
  }
  .jukebox-video-frame{
    height:126px !important;
  }
}


/* =========================================================
   WURLITZER 2.3 · CD-SPELER BEDIENING
   Alleen symbolen; tekst verschijnt als hover-tooltip.
   ========================================================= */
.jukebox-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  margin-top:10px !important;
}

.jukebox-control{
  position:relative !important;
  flex:0 0 38px !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:8px !important;
  font-size:16px !important;
  line-height:1 !important;
  overflow:visible !important;
}

.jukebox-control::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 7px);
  transform:translate(-50%, 4px);
  z-index:100;
  padding:4px 7px;
  border-radius:6px;
  background:rgba(8,10,14,.94);
  color:#fff;
  -webkit-text-fill-color:#fff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .10s ease, transform .10s ease, visibility .10s ease;
}

.jukebox-control::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 3px);
  transform:translateX(-50%);
  z-index:101;
  border:4px solid transparent;
  border-top-color:rgba(8,10,14,.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .10s ease, visibility .10s ease;
}

.jukebox-control:hover::after,
.jukebox-control:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}

.jukebox-control:hover::before,
.jukebox-control:focus-visible::before{
  opacity:1;
  visibility:visible;
}

@media (max-width:480px){
  .jukebox-controls{gap:7px !important;}
  .jukebox-control{
    flex-basis:36px !important;
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:32px !important;
    min-height:32px !important;
    font-size:15px !important;
  }
}

/* =========================================================
   WURLITZER 2.5 · APARTE RESPONSIVE JUKEBOX.HTML
   Dezelfde kast draait in een desktopvenster of als tablet/mobiel dock.
   ========================================================= */
html[data-jukebox-page="1"],
html[data-jukebox-page="1"] body.jukebox-page{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  background:transparent !important;
}

html[data-jukebox-page="1"] .jukebox-overlay{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100%;
  height:100%;
  pointer-events:auto !important;
  overflow:hidden;
}

html[data-jukebox-page="1"] .jukebox-machine{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  width:min(580px, 100%) !important;
  height:100% !important;
  max-height:100% !important;
  margin:0 auto !important;
}

html[data-jukebox-page="1"] .jukebox-body{
  height:calc(100% - 36px) !important;
  max-height:calc(100% - 36px) !important;
  overflow:auto !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

html[data-jukebox-page="1"] .jukebox-restore{
  display:none !important;
}

html[data-jukebox-page="1"] #jukeboxButton{
  display:none !important;
}

html[data-jukebox-mode="window"] body.jukebox-page{
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.045), transparent 32%),
    #090b0f !important;
}

html[data-jukebox-mode="window"] .jukebox-machine{
  min-height:100%;
}

html[data-jukebox-mode="embed"] .jukebox-machine{
  width:100% !important;
  border-radius:16px !important;
}

html[data-jukebox-mode="embed"] .jukebox-head{
  cursor:default !important;
}

html[data-jukebox-mode="embed"] .jukebox-body{
  padding:6px 8px 8px !important;
}

html[data-jukebox-mode="embed"] .jukebox-arch{
  padding-top:34px !important;
  padding-left:12px !important;
  padding-right:12px !important;
  padding-bottom:10px !important;
}

html[data-jukebox-mode="embed"] .jukebox-brand{
  top:7px !important;
}

html[data-jukebox-mode="embed"] .jukebox-screen{
  padding:7px !important;
}

html[data-jukebox-mode="embed"] .jukebox-kicker{
  font-size:8px !important;
}

html[data-jukebox-mode="embed"] .jukebox-title{
  font-size:17px !important;
  margin-bottom:5px !important;
}

html[data-jukebox-mode="embed"] .jukebox-now{
  padding:5px 7px !important;
}

html[data-jukebox-mode="embed"] .jukebox-now-sub,
html[data-jukebox-mode="embed"] .jukebox-result-source{
  font-size:8px !important;
}

html[data-jukebox-mode="embed"] .jukebox-search-row,
html[data-jukebox-mode="embed"] .jukebox-controls,
html[data-jukebox-mode="embed"] .jukebox-bottom-grid,
html[data-jukebox-mode="embed"] .jukebox-video-block{
  margin-top:5px !important;
}

html[data-jukebox-mode="embed"] .jukebox-library-card{
  height:96px !important;
  min-height:96px !important;
}

html[data-jukebox-mode="embed"] .jukebox-video-frame{
  height:122px !important;
}

html[data-jukebox-mode="embed"] .jukebox-base{
  margin-top:4px !important;
}

@media (max-width:480px){
  html[data-jukebox-mode="embed"] .jukebox-head-title{font-size:10px !important;}
  html[data-jukebox-mode="embed"] .jukebox-body{padding:4px 5px 6px !important;}
  html[data-jukebox-mode="embed"] .jukebox-arch{padding:30px 8px 8px !important;}
  html[data-jukebox-mode="embed"] .jukebox-title{font-size:15px !important;}
  html[data-jukebox-mode="embed"] .jukebox-now-sub{display:none;}
  html[data-jukebox-mode="embed"] .jukebox-search{min-height:30px !important;font-size:11px !important;}
  html[data-jukebox-mode="embed"] .jukebox-search-btn{min-height:30px !important;padding:0 10px !important;}
  html[data-jukebox-mode="embed"] .jukebox-library-card{height:86px !important;min-height:86px !important;}
  html[data-jukebox-mode="embed"] .jukebox-video-frame{height:110px !important;}
}


/* =========================================================
   WURLITZER 2.7 · RUSTIGE VIDEOSPELER
   YouTube blijft beeldbron; bediening gebeurt via jukebox.
   Geen hover-interactie op iframe = overlays verdwijnen snel.
   ========================================================= */
.jukebox-video-mount iframe{
  pointer-events:none !important;
}

.jukebox-video-frame{
  cursor:default !important;
}

/* =========================================================
   WURLITZER 2.9 · SMALLERE KAST + ECHT 16:9 VIDEOBEELD
   Alleen desktop/laptop-window. Tablet/mobiel embed blijft intact.
   ========================================================= */
html[data-jukebox-mode="window"] .jukebox-machine{
  width:min(550px, 100%) !important;
}

html[data-jukebox-mode="window"] .jukebox-body{
  padding:8px 12px 12px !important;
}

html[data-jukebox-mode="window"] .jukebox-arch{
  padding-left:12px !important;
  padding-right:12px !important;
}

html[data-jukebox-mode="window"] .jukebox-screen{
  padding:8px !important;
}

html[data-jukebox-mode="window"] .jukebox-video-block{
  padding:5px !important;
}

html[data-jukebox-mode="window"] .jukebox-video-frame{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16 / 9 !important;
}


/* =========================================================
   WURLITZER 4.1 · GROENE LED-BEDIENING + STOP
   Symbolen lichten kort groen op bij bediening.
   Alleen Shuffle blijft groen zolang shuffle actief is.
   Play/Pauze gebruikt is-playing nog voor Speaker FX, maar gloeit niet blijvend.
   ========================================================= */
.jukebox-control{
  transition:
    transform .08s ease,
    filter .10s ease,
    box-shadow .12s ease,
    color .10s ease,
    text-shadow .10s ease !important;
}

/* Kort LED-flitsje bij bediening. */
.jukebox-control:active,
.jukebox-control.is-led-pulse,
.jukebox-control.is-active{
  color:#8dff78 !important;
  -webkit-text-fill-color:#8dff78 !important;
  text-shadow:
    0 0 2px #d7ffd0,
    0 0 5px #79ff68,
    0 0 10px rgba(71,255,83,.95),
    0 0 16px rgba(34,197,94,.80) !important;
}

/* De knop zelf houdt zijn eigen kast/themakleur; alleen het symbool gloeit. */
.jukebox-control.is-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 0 0 1px rgba(74,222,128,.38),
    0 0 10px rgba(34,197,94,.32) !important;
}

.jukebox-control.is-led-pulse{
  animation:jukeboxLedPulse .36s ease-out;
}

@keyframes jukeboxLedPulse{
  0%{filter:brightness(1); transform:translateY(0);}
  35%{filter:brightness(1.25); transform:translateY(1px);}
  100%{filter:brightness(1); transform:translateY(0);}
}

/* Shuffle moet ook zonder hover direct als AAN herkenbaar zijn. */
#jukeboxShuffle.is-active{
  color:#79ff68 !important;
  -webkit-text-fill-color:#79ff68 !important;
}

/* Stop-symbool iets klassieker/strakker. */
#jukeboxStop{
  font-size:15px !important;
}

/* =========================================================
   WURLITZER 3.1 · LOSSE JUKEBOX PODIUM
   Alleen jukebox.html in window/standalone mode.
   Geeft de lege ruimte rondom de kast een eigen muzieksfeer.
   Embed in rooms.html blijft volledig ongemoeid.
   ========================================================= */
html[data-jukebox-mode="window"]{
  --jb-stage-bg:#080b10;
  --jb-stage-bg-2:#111722;
  --jb-stage-accent:#f4bf55;
  --jb-stage-accent-2:#60a5fa;
  --jb-stage-record:#101318;
  --jb-stage-label:#d8a53c;
}

html[data-look="light"][data-jukebox-mode="window"]{
  --jb-stage-bg:#17140d;
  --jb-stage-bg-2:#292416;
  --jb-stage-accent:#f4bd42;
  --jb-stage-accent-2:#f36f45;
  --jb-stage-record:#181818;
  --jb-stage-label:#f3bd3f;
}
html[data-look="dark"][data-jukebox-mode="window"]{
  --jb-stage-bg:#06090e;
  --jb-stage-bg-2:#111824;
  --jb-stage-accent:#60a5fa;
  --jb-stage-accent-2:#a78bfa;
  --jb-stage-record:#080b10;
  --jb-stage-label:#5fa8f2;
}
html[data-look="arcade"][data-jukebox-mode="window"]{
  --jb-stage-bg:#030518;
  --jb-stage-bg-2:#10153b;
  --jb-stage-accent:#20d8ff;
  --jb-stage-accent-2:#ff2bd6;
  --jb-stage-record:#080716;
  --jb-stage-label:#20d8ff;
}
html[data-look="cafe"][data-jukebox-mode="window"]{
  --jb-stage-bg:#130a05;
  --jb-stage-bg-2:#2d180d;
  --jb-stage-accent:#d79a45;
  --jb-stage-accent-2:#f4c76b;
  --jb-stage-record:#16100c;
  --jb-stage-label:#b97a35;
}
html[data-look="midnight"][data-jukebox-mode="window"]{
  --jb-stage-bg:#090611;
  --jb-stage-bg-2:#24142f;
  --jb-stage-accent:#d28cff;
  --jb-stage-accent-2:#f472b6;
  --jb-stage-record:#100b17;
  --jb-stage-label:#c477e8;
}
html[data-look="red"][data-jukebox-mode="window"]{
  --jb-stage-bg:#100204;
  --jb-stage-bg-2:#30070b;
  --jb-stage-accent:#ff4a55;
  --jb-stage-accent-2:#ffd5ad;
  --jb-stage-record:#140709;
  --jb-stage-label:#d62835;
}
html[data-look="blue"][data-jukebox-mode="window"]{
  --jb-stage-bg:#020914;
  --jb-stage-bg-2:#092648;
  --jb-stage-accent:#69c3ff;
  --jb-stage-accent-2:#b9e5ff;
  --jb-stage-record:#07111b;
  --jb-stage-label:#4fa8e5;
}
html[data-look="pride"][data-jukebox-mode="window"]{
  --jb-stage-bg:#12040f;
  --jb-stage-bg-2:#35102d;
  --jb-stage-accent:#ff65bd;
  --jb-stage-accent-2:#49d6ff;
  --jb-stage-record:#160b15;
  --jb-stage-label:#ec4899;
}
html[data-look="terminal"][data-jukebox-mode="window"]{
  --jb-stage-bg:#010603;
  --jb-stage-bg-2:#06180c;
  --jb-stage-accent:#39ff6f;
  --jb-stage-accent-2:#a1ffb7;
  --jb-stage-record:#030a05;
  --jb-stage-label:#238e43;
}

html[data-jukebox-mode="window"] body.jukebox-page{
  background:
    radial-gradient(circle at 50% 10%, color-mix(in srgb,var(--jb-stage-accent) 18%,transparent), transparent 25%),
    radial-gradient(circle at 12% 42%, color-mix(in srgb,var(--jb-stage-accent) 13%,transparent), transparent 22%),
    radial-gradient(circle at 88% 42%, color-mix(in srgb,var(--jb-stage-accent-2) 13%,transparent), transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 48px, color-mix(in srgb,var(--jb-stage-accent) 3%,transparent) 49px 50px),
    linear-gradient(180deg,var(--jb-stage-bg-2),var(--jb-stage-bg) 58%,#020304) !important;
}

html[data-jukebox-mode="window"] body.jukebox-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.72;
  background:
    linear-gradient(115deg,transparent 0 20%,color-mix(in srgb,var(--jb-stage-accent) 9%,transparent) 20.5%,transparent 22% 78%,color-mix(in srgb,var(--jb-stage-accent-2) 8%,transparent) 79%,transparent 81%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px);
}

html[data-jukebox-mode="window"] .jukebox-overlay{
  isolation:isolate;
}

/* Vinylplaten links en rechts van de jukebox. */
html[data-jukebox-mode="window"] .jukebox-overlay::before,
html[data-jukebox-mode="window"] .jukebox-overlay::after{
  content:"";
  position:fixed;
  top:50%;
  width:220px;
  height:220px;
  margin-top:-110px;
  border-radius:50%;
  z-index:0;
  pointer-events:none;
  opacity:.86;
  background:
    radial-gradient(circle at 50% 50%,#050505 0 5px,transparent 6px),
    radial-gradient(circle at 50% 50%,var(--jb-stage-label) 0 23px,#ece3c4 24px 27px,transparent 28px),
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.12) 2px 4px),
    conic-gradient(from 20deg,#050607,#181b20,#050607,#24282d,#050607);
  border:1px solid color-mix(in srgb,var(--jb-stage-accent) 24%,#111);
  box-shadow:
    0 28px 50px rgba(0,0,0,.58),
    0 0 45px color-mix(in srgb,var(--jb-stage-accent) 16%,transparent),
    inset 0 0 0 2px rgba(255,255,255,.035);
}

html[data-jukebox-mode="window"] .jukebox-overlay::before{
  left:max(24px,calc(50% - 530px));
  transform:rotate(-14deg);
}
html[data-jukebox-mode="window"] .jukebox-overlay::after{
  right:max(24px,calc(50% - 530px));
  transform:rotate(17deg);
}

html[data-jukebox-mode="window"] .jukebox-machine{
  z-index:2;
  box-shadow:
    0 30px 72px rgba(0,0,0,.70),
    0 0 52px color-mix(in srgb,var(--jb-stage-accent) 19%,transparent),
    0 0 0 1px color-mix(in srgb,var(--jb-stage-accent) 18%,transparent) !important;
}

/* Op smallere schermen is de kast zelf de blikvanger. */
@media (max-width:980px){
  html[data-jukebox-mode="window"] .jukebox-overlay::before,
  html[data-jukebox-mode="window"] .jukebox-overlay::after{
    display:none;
  }
}

@media (prefers-reduced-motion:no-preference){
  html[data-jukebox-mode="window"] .jukebox-overlay::before{
    animation:jbVinylLeft 28s linear infinite;
  }
  html[data-jukebox-mode="window"] .jukebox-overlay::after{
    animation:jbVinylRight 31s linear infinite;
  }
  @keyframes jbVinylLeft{to{transform:rotate(346deg);}}
  @keyframes jbVinylRight{to{transform:rotate(377deg);}}
}

/* =========================================================
   WURLITZER 3.2 · KASTENKIEZER
   Alleen UI voor de losse/venster-jukebox.
   ========================================================= */
.jukebox-head-actions{position:relative;}
.jukebox-cabinet-btn{
  width:auto !important;
  min-width:64px !important;
  padding:0 10px !important;
  gap:5px;
  font-size:15px !important;
}
.jukebox-cabinet-btn span{
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.jukebox-cabinet-menu{
  position:absolute;
  z-index:60;
  top:58px;
  right:12px;
  width:min(330px,calc(100% - 24px));
  padding:10px;
  border-radius:16px;
  border:1px solid var(--jb-border,#b98a48);
  background:linear-gradient(180deg,var(--jb-screen,#1d1710),var(--jb-deep,#0d0906));
  color:var(--jb-text,#fff4d6);
  box-shadow:0 16px 36px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.12);
}
.jukebox-cabinet-menu[hidden]{display:none !important;}
.jukebox-cabinet-menu-title{
  padding:2px 4px 9px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  color:var(--jb-accent,#f0ba52);
}
.jukebox-cabinet-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.jukebox-cabinet-grid button{
  min-height:54px;
  padding:7px 9px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 8px rgba(0,0,0,.24);
  transition:transform .08s ease,filter .1s ease,box-shadow .1s ease;
}
.jukebox-cabinet-grid button:hover{transform:translateY(-1px);filter:brightness(1.1);}
.jukebox-cabinet-grid button.is-active{
  outline:2px solid #39ff6f;
  outline-offset:1px;
  box-shadow:0 0 13px rgba(57,255,111,.55),inset 0 1px 0 rgba(255,255,255,.18);
}
.jukebox-cabinet-grid button b{font-size:10px;line-height:1.15;}
.jukebox-cabinet-grid button span{font-size:8px;opacity:.78;}

.jukebox-cabinet-grid [data-cabinet="light"]{background:linear-gradient(145deg,#fff8df,#d59d37);color:#452d09;}
.jukebox-cabinet-grid [data-cabinet="dark"]{background:linear-gradient(145deg,#4b5665,#0c1016);}
.jukebox-cabinet-grid [data-cabinet="arcade"]{background:linear-gradient(145deg,#203b91,#8b1db8);}
.jukebox-cabinet-grid [data-cabinet="cafe"]{background:linear-gradient(145deg,#855020,#2a1307);}
.jukebox-cabinet-grid [data-cabinet="midnight"]{background:linear-gradient(145deg,#624078,#20102c);}
.jukebox-cabinet-grid [data-cabinet="red"]{background:linear-gradient(145deg,#e02531,#650610);}
.jukebox-cabinet-grid [data-cabinet="blue"]{background:linear-gradient(145deg,#2788ce,#09284a);}
.jukebox-cabinet-grid [data-cabinet="pride"]{background:linear-gradient(135deg,#f14ba7,#9135c6 55%,#2eaee5);}
.jukebox-cabinet-grid [data-cabinet="terminal"]{background:linear-gradient(145deg,#6b421f,#07140b);color:#c9ffd5;}

html[data-jukebox-mode="embed"] .jukebox-cabinet-btn,
html[data-jukebox-mode="embed"] .jukebox-cabinet-menu{display:none !important;}

@media(max-width:600px){
  .jukebox-cabinet-btn{min-width:42px !important;width:42px !important;padding:0 !important;}
  .jukebox-cabinet-btn span{display:none;}
  .jukebox-cabinet-menu{top:54px;right:8px;width:calc(100% - 16px);}
  .jukebox-cabinet-grid{grid-template-columns:1fr 1fr;}
}

/* =========================================================
   WURLITZER 3.3 · STANDALONE HI-FI STAGE
   Vinylplaten zijn vervangen door echte speakerzuilen.
   De losse site krijgt houten kastafwerking, pootjes en een
   subwoofer direct onder de videospeler. Embed blijft ongemoeid.
   ========================================================= */

/* Oude vinylplaten uit V3.1 uitzetten. */
html[data-jukebox-mode="window"] .jukebox-overlay::before,
html[data-jukebox-mode="window"] .jukebox-overlay::after{
  display:none !important;
  animation:none !important;
}

html[data-jukebox-mode="window"]{
  --jb-wood-1:#7b431d;
  --jb-wood-2:#3a1d0c;
  --jb-wood-3:#160a05;
  --jb-metal:#d9c18a;
  --jb-speaker-face:#17191c;
  --jb-speaker-rim:#72777f;
  --jb-speaker-cone:#0b0c0e;
}

html[data-look="cafe"][data-jukebox-mode="window"],
html[data-look="terminal"][data-jukebox-mode="window"]{
  --jb-wood-1:#98602c;
  --jb-wood-2:#4c2711;
  --jb-wood-3:#1b0d06;
  --jb-metal:#d8b56b;
}
html[data-look="arcade"][data-jukebox-mode="window"]{
  --jb-wood-1:#392057;
  --jb-wood-2:#17103b;
  --jb-wood-3:#08051b;
  --jb-metal:#55dcff;
}
html[data-look="midnight"][data-jukebox-mode="window"]{
  --jb-wood-1:#59366e;
  --jb-wood-2:#2a1638;
  --jb-wood-3:#100817;
  --jb-metal:#d5a7ef;
}
html[data-look="red"][data-jukebox-mode="window"]{
  --jb-wood-1:#8c2028;
  --jb-wood-2:#470c12;
  --jb-wood-3:#1d0508;
  --jb-metal:#efc6a6;
}
html[data-look="blue"][data-jukebox-mode="window"]{
  --jb-wood-1:#205b83;
  --jb-wood-2:#0e3150;
  --jb-wood-3:#061522;
  --jb-metal:#b9e5ff;
}
html[data-look="pride"][data-jukebox-mode="window"]{
  --jb-wood-1:#8b2a73;
  --jb-wood-2:#42122f;
  --jb-wood-3:#190713;
  --jb-metal:#ffadd9;
}
html[data-look="dark"][data-jukebox-mode="window"]{
  --jb-wood-1:#3e4650;
  --jb-wood-2:#1d242c;
  --jb-wood-3:#090d12;
  --jb-metal:#a9c9e9;
}

/* Meer ruimte in de losse pagina zodat speakerzuilen echt naast de kast staan. */
html[data-jukebox-mode="window"] .jukebox-overlay{
  overflow:hidden !important;
}

html[data-jukebox-mode="window"] .jukebox-machine{
  position:relative !important;
  z-index:4 !important;
  border-top-width:5px !important;
  border-bottom-width:5px !important;
  box-shadow:
    0 34px 80px rgba(0,0,0,.72),
    0 0 56px color-mix(in srgb,var(--jb-stage-accent) 19%,transparent),
    0 0 0 1px color-mix(in srgb,var(--jb-stage-accent) 18%,transparent),
    inset 0 2px 0 rgba(255,255,255,.13),
    inset 0 -3px 0 rgba(0,0,0,.28) !important;
}

/* Houten onderplint en twee zichtbare pootjes aan de kast zelf. */
html[data-jukebox-mode="window"] .jukebox-wood-plinth{
  position:relative;
  z-index:3;
  width:84%;
  height:16px;
  margin:4px auto 8px;
  border-radius:5px 5px 9px 9px;
  border:1px solid color-mix(in srgb,var(--jb-metal) 52%,#241207);
  background:
    linear-gradient(90deg,rgba(255,255,255,.10),transparent 18% 82%,rgba(0,0,0,.22)),
    repeating-linear-gradient(92deg,var(--jb-wood-1) 0 11px,var(--jb-wood-2) 12px 22px,var(--jb-wood-1) 23px 34px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 12px rgba(0,0,0,.42);
}
html[data-jukebox-mode="window"] .jukebox-wood-plinth span{
  position:absolute;
  top:12px;
  width:26px;
  height:22px;
  border-radius:0 0 8px 8px;
  border:1px solid color-mix(in srgb,var(--jb-metal) 38%,#1d0d05);
  background:linear-gradient(90deg,var(--jb-wood-3),var(--jb-wood-1) 45%,var(--jb-wood-2));
  box-shadow:0 9px 10px rgba(0,0,0,.40),inset 2px 0 0 rgba(255,255,255,.08);
}
html[data-jukebox-mode="window"] .jukebox-wood-plinth span:first-child{left:12%;transform:skewX(-4deg);}
html[data-jukebox-mode="window"] .jukebox-wood-plinth span:last-child{right:12%;transform:skewX(4deg);}

/* De twee losse HI-FI zuilen. */
html[data-jukebox-mode="window"] .jukebox-speaker-column{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:178px;
  height:min(620px,78vh);
  min-height:440px;
  padding:18px 15px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
  border-radius:30px 30px 20px 20px;
  border:3px solid color-mix(in srgb,var(--jb-metal) 55%,#1c0d06);
  background:
    linear-gradient(90deg,rgba(255,255,255,.10),transparent 13% 86%,rgba(0,0,0,.35)),
    repeating-linear-gradient(91deg,var(--jb-wood-1) 0 12px,var(--jb-wood-2) 13px 26px,var(--jb-wood-1) 27px 39px);
  box-shadow:
    0 34px 55px rgba(0,0,0,.62),
    0 0 34px color-mix(in srgb,var(--jb-stage-accent) 13%,transparent),
    inset 0 0 0 3px rgba(0,0,0,.28),
    inset 6px 0 7px rgba(255,255,255,.05),
    inset -7px 0 9px rgba(0,0,0,.30);
}
html[data-jukebox-mode="window"] .jukebox-speaker-left{left:max(20px,calc(50% - 510px));}
html[data-jukebox-mode="window"] .jukebox-speaker-right{right:max(20px,calc(50% - 510px));}

html[data-jukebox-mode="window"] .jukebox-speaker-column::before{
  content:"";
  position:absolute;
  inset:14px 12px 18px;
  border-radius:21px;
  border:2px solid #30343a;
  background:
    radial-gradient(circle,rgba(255,255,255,.055) 0 1px,transparent 1.5px) 0 0/5px 5px,
    linear-gradient(180deg,#1d2024,#08090b);
  box-shadow:inset 0 0 25px #000,0 0 0 1px rgba(255,255,255,.08);
}

html[data-jukebox-mode="window"] .jukebox-speaker-badge{
  position:relative;
  z-index:2;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--jb-metal) 70%,#333);
  background:linear-gradient(180deg,#e8dcc1,#877549);
  color:#241608;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
  text-shadow:0 1px rgba(255,255,255,.55);
  box-shadow:0 2px 7px rgba(0,0,0,.38);
}

html[data-jukebox-mode="window"] .jukebox-speaker-driver{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  border-radius:50%;
  background:
    radial-gradient(circle at 44% 38%,rgba(255,255,255,.11),transparent 12%),
    radial-gradient(circle,#111317 0 23%,#25292f 24% 38%,#090a0c 39% 58%,#454b53 59% 62%,#111317 63% 69%,#626970 70% 72%,#101216 73% 100%);
  border:3px solid #111318;
  box-shadow:
    inset 0 0 12px #000,
    0 0 0 2px #555b63,
    0 5px 12px rgba(0,0,0,.55),
    0 0 16px color-mix(in srgb,var(--jb-stage-accent) 9%,transparent);
}
html[data-jukebox-mode="window"] .jukebox-speaker-driver::after{
  content:"";
  position:absolute;
  inset:11%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 7px rgba(0,0,0,.16);
}
html[data-jukebox-mode="window"] .jukebox-speaker-driver span{
  position:absolute;
  left:50%;
  bottom:-16px;
  transform:translateX(-50%);
  color:color-mix(in srgb,var(--jb-metal) 80%,#fff);
  font-size:7px;
  font-weight:1000;
  letter-spacing:.11em;
  text-shadow:0 1px 3px #000;
  white-space:nowrap;
}
html[data-jukebox-mode="window"] .jukebox-driver-tweeter{width:58px;height:58px;margin-top:2px;}
html[data-jukebox-mode="window"] .jukebox-driver-mid{width:92px;height:92px;}
html[data-jukebox-mode="window"] .jukebox-driver-woofer{width:128px;height:128px;}

html[data-jukebox-mode="window"] .jukebox-speaker-port{
  position:relative;
  z-index:2;
  width:62px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%,#020202,#111 56%,#30343a 60%,#070809 67%);
  border:1px solid #565b60;
  box-shadow:inset 0 4px 8px #000,0 2px 4px rgba(0,0,0,.48);
}

/* Dikke subwoofer direct onder het videobeeld. */
html[data-jukebox-mode="window"] .jukebox-subwoofer{
  position:relative;
  height:70px;
  margin:7px 0 0;
  overflow:hidden;
  border-radius:10px;
  border:2px solid color-mix(in srgb,var(--jb-metal) 48%,#181818);
  background:
    radial-gradient(circle,rgba(255,255,255,.055) 0 1px,transparent 1.5px) 0 0/5px 5px,
    linear-gradient(180deg,#202328,#090a0c);
  box-shadow:inset 0 0 20px #000,0 5px 10px rgba(0,0,0,.38);
}
html[data-jukebox-mode="window"] .jukebox-subwoofer-label{
  position:absolute;
  top:6px;
  left:10px;
  z-index:2;
  color:color-mix(in srgb,var(--jb-metal) 84%,#fff);
  font-size:7px;
  font-weight:1000;
  letter-spacing:.14em;
  text-shadow:0 1px 3px #000;
}
html[data-jukebox-mode="window"] .jukebox-subwoofer-cone{
  position:absolute;
  left:50%;
  top:50%;
  width:58px;
  height:58px;
  transform:translate(-50%,-45%);
  border-radius:50%;
  background:
    radial-gradient(circle at 45% 38%,rgba(255,255,255,.10),transparent 12%),
    radial-gradient(circle,#111317 0 22%,#2c3035 23% 39%,#090a0c 40% 59%,#555b61 60% 63%,#0c0d0f 64% 100%);
  border:2px solid #5a6067;
  box-shadow:inset 0 0 10px #000,0 0 13px rgba(0,0,0,.72);
}
html[data-jukebox-mode="window"] .jukebox-subwoofer-port{
  position:absolute;
  right:18px;
  top:50%;
  width:50px;
  height:20px;
  transform:translateY(-38%);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%,#020202,#111 55%,#3a3e44 60%,#070809 68%);
  border:1px solid #555b62;
  box-shadow:inset 0 5px 9px #000;
}

/* De bovenzijde krijgt een zwaardere houten kroon in standalone mode. */
html[data-jukebox-mode="window"] .jukebox-head{
  border-top:2px solid color-mix(in srgb,var(--jb-metal) 52%,transparent) !important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.28) !important;
}

/* Speakers/subwoofer zijn exclusief voor de losse site. */
html[data-jukebox-mode="embed"] .jukebox-speaker-column,
html[data-jukebox-mode="embed"] .jukebox-subwoofer,
html[data-jukebox-mode="embed"] .jukebox-wood-plinth{
  display:none !important;
}

/* Op laptopbreedte kleinere zuilen, op tablet/mobiel alleen de kast. */
@media (max-width:1180px){
  html[data-jukebox-mode="window"] .jukebox-speaker-column{
    width:138px;
    height:min(540px,72vh);
    min-height:410px;
    padding:15px 12px 18px;
  }
  html[data-jukebox-mode="window"] .jukebox-speaker-left{left:10px;}
  html[data-jukebox-mode="window"] .jukebox-speaker-right{right:10px;}
  html[data-jukebox-mode="window"] .jukebox-driver-tweeter{width:48px;height:48px;}
  html[data-jukebox-mode="window"] .jukebox-driver-mid{width:76px;height:76px;}
  html[data-jukebox-mode="window"] .jukebox-driver-woofer{width:102px;height:102px;}
}

@media (max-width:900px){
  html[data-jukebox-mode="window"] .jukebox-speaker-column{display:none !important;}
}

@media (max-width:600px){
  html[data-jukebox-mode="window"] .jukebox-subwoofer{height:58px;}
  html[data-jukebox-mode="window"] .jukebox-subwoofer-cone{width:46px;height:46px;}
  html[data-jukebox-mode="window"] .jukebox-subwoofer-label{font-size:6px;}
  html[data-jukebox-mode="window"] .jukebox-wood-plinth{width:78%;}
}

/* =========================================================
   WURLITZER 3.4 · STANDALONE BEELDVULLENDE HI-FI SET
   Alleen jukebox.html in window-mode.
   De complete set gebruikt nu de viewport: grotere kast,
   grotere speakers dichterbij en geen lege kaststaart onderaan.
   Embed/chat blijft volledig ongemoeid.
   ========================================================= */

html[data-jukebox-mode="window"] .jukebox-overlay{
  display:grid !important;
  grid-template-columns:auto auto auto !important;
  align-items:center !important;
  justify-content:center !important;
  column-gap:clamp(22px,3.2vw,64px) !important;
  padding:clamp(10px,1.6vh,18px) clamp(12px,2vw,30px) !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Kast schaalt tegelijk op schermbreedte én schermhoogte. */
html[data-jukebox-mode="window"] .jukebox-machine{
  grid-column:2 !important;
  grid-row:1 !important;
  width:min(740px,46vw,72vh) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100vh - 24px) !important;
  margin:0 !important;
  align-self:center !important;
}

/* Cruciaal: geen geforceerde 100%-hoogte meer, dus geen lange lege onderkast. */
html[data-jukebox-mode="window"] .jukebox-body{
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100vh - 66px) !important;
  overflow:auto !important;
  scrollbar-gutter:stable;
}

html[data-jukebox-mode="window"] .jukebox-arch{
  min-height:0 !important;
}

/* De zijluidsprekers worden onderdeel van dezelfde gecentreerde set. */
html[data-jukebox-mode="window"] .jukebox-speaker-column{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  width:min(220px,14vw) !important;
  height:min(720px,76vh) !important;
  min-height:470px !important;
  align-self:center !important;
}

html[data-jukebox-mode="window"] .jukebox-speaker-left{
  grid-column:1 !important;
  grid-row:1 !important;
}

html[data-jukebox-mode="window"] .jukebox-speaker-right{
  grid-column:3 !important;
  grid-row:1 !important;
}

/* Drivers groeien mee met de grotere zuilen. */
html[data-jukebox-mode="window"] .jukebox-driver-tweeter{
  width:clamp(58px,4.4vw,72px) !important;
  height:clamp(58px,4.4vw,72px) !important;
}
html[data-jukebox-mode="window"] .jukebox-driver-mid{
  width:clamp(92px,6.5vw,112px) !important;
  height:clamp(92px,6.5vw,112px) !important;
}
html[data-jukebox-mode="window"] .jukebox-driver-woofer{
  width:clamp(126px,9vw,158px) !important;
  height:clamp(126px,9vw,158px) !important;
}

/* Onderplint/pootjes duidelijk als echte afsluiting van de kast. */
html[data-jukebox-mode="window"] .jukebox-wood-plinth{
  margin-top:7px !important;
  margin-bottom:28px !important;
}

/* Middelgrote laptops: set blijft in beeld zonder miniatuur te worden. */
@media (max-width:1400px){
  html[data-jukebox-mode="window"] .jukebox-overlay{
    column-gap:clamp(14px,2vw,30px) !important;
  }
  html[data-jukebox-mode="window"] .jukebox-machine{
    width:min(650px,48vw,72vh) !important;
  }
  html[data-jukebox-mode="window"] .jukebox-speaker-column{
    width:min(178px,14vw) !important;
    height:min(620px,74vh) !important;
    min-height:430px !important;
  }
}

/* Tablet/smalle laptop: speakers weg en kast maximaal benutten. */
@media (max-width:900px){
  html[data-jukebox-mode="window"] .jukebox-overlay{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px !important;
  }
  html[data-jukebox-mode="window"] .jukebox-machine{
    width:min(680px,calc(100vw - 16px),82vh) !important;
    max-height:calc(100vh - 16px) !important;
  }
  html[data-jukebox-mode="window"] .jukebox-body{
    max-height:calc(100vh - 58px) !important;
  }
}

/* Mobiel: volledige beschikbare breedte, zonder horizontale verspilling. */
@media (max-width:600px){
  html[data-jukebox-mode="window"] .jukebox-overlay{
    padding:4px !important;
  }
  html[data-jukebox-mode="window"] .jukebox-machine{
    width:calc(100vw - 8px) !important;
    max-height:calc(100vh - 8px) !important;
  }
  html[data-jukebox-mode="window"] .jukebox-body{
    max-height:calc(100vh - 48px) !important;
  }
}

/* =========================================================
   WURLITZER 3.5 · STANDALONE BODY-FIT
   De podiumachtergrond vult het venster, maar de jukeboxkast
   zelf krijgt alleen de hoogte van zijn echte inhoud.
   Dit neutraliseert de oudere height:100%-regel definitief.
   ========================================================= */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-machine{
  height:fit-content !important;
  block-size:fit-content !important;
  min-height:0 !important;
  max-height:calc(100dvh - 24px) !important;
  align-self:center !important;
  overflow:visible !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-body{
  height:auto !important;
  block-size:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-arch{
  height:auto !important;
  min-height:0 !important;
}

/* Het podium blijft exact één viewport hoog; geen lange HTML-pagina. */
html[data-jukebox-page="1"][data-jukebox-mode="window"],
html[data-jukebox-page="1"][data-jukebox-mode="window"] body.jukebox-page,
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-overlay{
  width:100% !important;
  height:100dvh !important;
  min-height:0 !important;
  max-height:100dvh !important;
  overflow:hidden !important;
}

/* Op lagere schermen mag alleen de binnenkant scrollen als dat echt nodig is. */
@media (max-height:760px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-machine{
    max-height:calc(100dvh - 12px) !important;
    overflow:hidden !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-body{
    max-height:calc(100dvh - 58px) !important;
    overflow:auto !important;
    scrollbar-gutter:stable;
  }
}

/* =========================================================
   WURLITZER 3.6 · GOTHIC CATHEDRAL
   Extra kastkeuze voor de standalone jukebox.
   Ebbenhout, verweerd zilver, bordeaux/paars glas-in-lood
   en kathedraalachtige spitsbogen. Bestaande kasten blijven intact.
   ========================================================= */
html[data-look="gothic"]{
  --jb-shell-1:#17141b;
  --jb-shell-2:#2b1726;
  --jb-shell-3:#050407;
  --jb-trim:#8c7a91;
  --jb-trim-light:#d6ccd9;
  --jb-glow:rgba(132,39,92,.42);
  --jb-head-1:#241620;
  --jb-head-2:#09060a;
  --jb-screen-1:#160e15;
  --jb-screen-2:#050306;
  --jb-card:rgba(184,139,170,.07);
  --jb-card-hover:rgba(177,60,119,.12);
  --jb-now-1:rgba(74,21,48,.76);
  --jb-now-2:rgba(15,7,13,.94);
  --jb-text:#f0e6ef;
  --jb-muted:#baa8b7;
  --jb-label:#d184aa;
  --jb-input-bg:#0b070b;
  --jb-input-text:#f3eaf2;
  --jb-btn-1:#69344f;
  --jb-btn-2:#28111f;
  --jb-btn-text:#f7edf5;
  --jb-line:rgba(196,132,170,.29);
}

html[data-look="gothic"] .jukebox-machine,
html[data-look="gothic"] .jukebox-machine button,
html[data-look="gothic"] .jukebox-machine input{
  font-family:Georgia,"Times New Roman",serif !important;
}

html[data-look="gothic"] .jukebox-machine{
  border-color:#19131b !important;
  background:
    radial-gradient(ellipse at 50% 5%,rgba(158,50,103,.24),transparent 23%),
    linear-gradient(90deg,
      #08070a 0 5%,#211921 5% 8%,#786c7d 8% 9.2%,
      #09070a 9.2% 90.8%,#786c7d 90.8% 92%,#211921 92% 95%,#08070a 95% 100%) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.78),
    0 0 0 1px #463746,
    0 0 34px rgba(118,23,72,.35),
    inset 0 0 0 2px rgba(200,186,203,.055) !important;
}

html[data-look="gothic"] .jukebox-head{
  background:
    linear-gradient(90deg,transparent,rgba(118,38,79,.19),transparent),
    linear-gradient(180deg,#281922,#09060a) !important;
  border-bottom:2px solid #5e4d60 !important;
}
html[data-look="gothic"] .jukebox-head-title{
  color:#e7d9e5 !important;
  letter-spacing:.10em !important;
  text-shadow:0 0 9px rgba(201,95,151,.38),0 2px 2px #000 !important;
}
html[data-look="gothic"] .jukebox-window-btn{
  border:1px solid #88778b !important;
  background:radial-gradient(circle at 35% 28%,#9b8798,#4e3948 47%,#171018 72%) !important;
  color:#f3e9f0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 3px 8px rgba(0,0,0,.52),0 0 8px rgba(141,50,95,.23) !important;
}

html[data-look="gothic"] .jukebox-arch{
  max-width:590px !important;
  padding:58px 24px 20px !important;
  border:5px solid #756879 !important;
  border-radius:48% 48% 18px 18px / 27% 27% 18px 18px !important;
  background:
    radial-gradient(ellipse at 50% 5%,rgba(204,73,139,.33) 0 5%,rgba(70,24,57,.48) 6% 13%,transparent 14%),
    repeating-conic-gradient(from 0deg at 50% 16%,rgba(141,47,94,.26) 0 5deg,rgba(53,28,52,.05) 5deg 10deg),
    linear-gradient(180deg,#1a1119 0 22%,#0b080b 23% 100%) !important;
  clip-path:polygon(50% 0,96% 17%,100% 38%,100% 100%,0 100%,0 38%,4% 17%) !important;
  box-shadow:
    inset 0 0 0 3px #181118,
    inset 0 0 0 7px #4b3a4a,
    inset 0 0 38px rgba(0,0,0,.88),
    0 0 24px rgba(128,31,79,.28) !important;
}
html[data-look="gothic"] .jukebox-arch::before,
html[data-look="gothic"] .jukebox-arch::after{
  top:79px !important;
  bottom:29px !important;
  width:11px !important;
  border-radius:2px 2px 8px 8px !important;
  background:
    linear-gradient(180deg,#d2c7d4 0 5%,#6f5e72 6% 19%,#9d315f 20% 41%,#4a1838 42% 61%,#7d2753 62% 82%,#cfc3d1 83% 100%) !important;
  box-shadow:0 0 8px rgba(211,94,151,.34),inset 0 0 0 1px rgba(0,0,0,.58) !important;
}

html[data-look="gothic"] .jukebox-brand{
  top:12px !important;
  padding:7px 19px !important;
  border-radius:3px 3px 14px 14px !important;
  border:2px solid #726276 !important;
  background:
    linear-gradient(135deg,transparent 0 11%,rgba(255,255,255,.08) 12% 13%,transparent 14% 86%,rgba(255,255,255,.08) 87% 88%,transparent 89%),
    linear-gradient(180deg,#31212e,#110b11) !important;
  color:#eadde8 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:16px !important;
  font-variant:small-caps;
  letter-spacing:.12em !important;
  text-shadow:0 0 8px rgba(205,82,144,.42),0 2px #000 !important;
  box-shadow:0 5px 12px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

html[data-look="gothic"] .jukebox-screen{
  padding:12px !important;
  border:4px solid #302631 !important;
  border-radius:4px 4px 12px 12px !important;
  background:
    linear-gradient(90deg,rgba(111,20,66,.08),transparent 28% 72%,rgba(67,24,91,.08)),
    linear-gradient(180deg,#160e15,#050405 77%) !important;
  box-shadow:inset 0 0 0 2px #756477,inset 0 0 0 4px #171017,inset 0 0 28px #000,0 8px 20px rgba(0,0,0,.52) !important;
}
html[data-look="gothic"] .jukebox-kicker,
html[data-look="gothic"] .jukebox-now-label,
html[data-look="gothic"] .jukebox-section-label{
  color:#c989aa !important;
  letter-spacing:.14em !important;
  text-shadow:0 0 7px rgba(174,62,119,.30) !important;
}
html[data-look="gothic"] .jukebox-title{
  color:#f0e5ed !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-style:italic !important;
  font-size:20px !important;
  text-shadow:0 0 10px rgba(174,62,119,.32),0 2px #000 !important;
}
html[data-look="gothic"] .jukebox-now{
  border:2px solid #6d5368 !important;
  border-radius:3px 3px 10px 10px !important;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 6px),
    radial-gradient(circle at 50% 0,rgba(136,28,78,.22),transparent 52%),
    linear-gradient(180deg,#351428,#100810) !important;
  box-shadow:inset 0 0 16px rgba(0,0,0,.64) !important;
}
html[data-look="gothic"] .jukebox-now-title{color:#f0dce8 !important;text-shadow:0 0 8px rgba(207,78,142,.34) !important;}
html[data-look="gothic"] .jukebox-now-sub{color:#bfaaba !important;}
html[data-look="gothic"] .jukebox-search{
  border:1px solid #6e5b6d !important;
  border-radius:3px !important;
  background:#0b070b !important;
  color:#f1e8ef !important;
  -webkit-text-fill-color:#f1e8ef !important;
}
html[data-look="gothic"] .jukebox-search::placeholder{color:#806f7c !important;-webkit-text-fill-color:#806f7c !important;}
html[data-look="gothic"] :is(.jukebox-control,.jukebox-search-btn,.jukebox-mini-btn,.jukebox-row-btn){
  border:1px solid #8a7587 !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,#70435b,#351526 55%,#160a12) !important;
  color:#f4eaf1 !important;
  -webkit-text-fill-color:#f4eaf1 !important;
  text-shadow:0 1px 2px #000 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 3px 7px rgba(0,0,0,.52) !important;
}
html[data-look="gothic"] :is(.jukebox-control,.jukebox-row-btn,.jukebox-mini-btn):hover{
  border-color:#bf83a3 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 12px rgba(169,47,105,.34) !important;
}
html[data-look="gothic"] :is(.jukebox-panel-card,.jukebox-video-block){
  border:1px solid #554052 !important;
  border-radius:3px 3px 10px 10px !important;
  background:linear-gradient(180deg,rgba(52,27,45,.78),rgba(12,8,12,.92)) !important;
}
html[data-look="gothic"] .jukebox-result-title{color:#eadce6 !important;}
html[data-look="gothic"] .jukebox-result-rank{color:#cf8aae !important;}
html[data-look="gothic"] .jukebox-video-frame{
  border:3px solid #5f4c61 !important;
  border-radius:2px !important;
  box-shadow:inset 0 0 0 2px #151015,0 0 12px rgba(115,27,72,.19) !important;
}
html[data-look="gothic"] .jukebox-base{
  width:76% !important;
  height:14px !important;
  border:2px solid #67566b !important;
  border-radius:2px 2px 50% 50% / 2px 2px 75% 75% !important;
  background:linear-gradient(180deg,#4c384b,#160e16) !important;
  box-shadow:0 5px 11px rgba(0,0,0,.52),0 0 8px rgba(128,31,79,.15) !important;
}

/* Kastenkiezer-preview. */
.jukebox-cabinet-grid [data-cabinet="gothic"]{
  background:
    radial-gradient(circle at 50% 0,rgba(190,52,121,.34),transparent 42%),
    linear-gradient(145deg,#32222f,#090609 68%,#48142f) !important;
  color:#f1e6ef !important;
  border-color:#776275 !important;
}

/* Standalone podium + HI-FI hout/metal voor Gothic. */
html[data-look="gothic"][data-jukebox-mode="window"]{
  --jb-stage-bg:#030204;
  --jb-stage-bg-2:#130a12;
  --jb-stage-accent:#aa376f;
  --jb-stage-accent-2:#6c3d90;
  --jb-stage-record:#060407;
  --jb-stage-label:#9d315f;
  --jb-wood-1:#251821;
  --jb-wood-2:#120b11;
  --jb-wood-3:#050305;
  --jb-metal:#918694;
  --jb-speaker-face:#111014;
  --jb-speaker-rim:#655c68;
  --jb-speaker-cone:#080709;
}

html[data-look="gothic"][data-jukebox-mode="window"] body.jukebox-page{
  background:
    radial-gradient(ellipse at 50% -5%,rgba(148,36,88,.25),transparent 34%),
    radial-gradient(ellipse at 15% 56%,rgba(94,35,124,.12),transparent 26%),
    radial-gradient(ellipse at 85% 56%,rgba(143,34,81,.12),transparent 26%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(154,106,145,.025) 80px 81px),
    linear-gradient(180deg,#170b14,#050305 56%,#010102) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] body.jukebox-page::before{
  opacity:.82 !important;
  background:
    linear-gradient(112deg,transparent 0 18%,rgba(173,57,111,.055) 18.5%,transparent 20% 80%,rgba(104,55,142,.05) 81%,transparent 82.5%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.009) 0 1px,transparent 1px 5px) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-speaker-column{
  border-radius:18px 18px 8px 8px !important;
  border-color:#5d525f !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 12% 88%,rgba(0,0,0,.42)),
    repeating-linear-gradient(92deg,#251821 0 10px,#110a10 11px 20px,#1c1119 21px 31px) !important;
  box-shadow:0 34px 60px rgba(0,0,0,.75),0 0 30px rgba(125,33,78,.15),inset 0 0 0 3px rgba(0,0,0,.45) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-speaker-column::before{
  border-radius:12px 12px 5px 5px !important;
  border-color:#3d353f !important;
  background:
    radial-gradient(circle,rgba(190,166,187,.038) 0 1px,transparent 1.3px) 0 0/5px 5px,
    linear-gradient(180deg,#171419,#050405) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-speaker-badge{
  border-radius:2px 2px 8px 8px !important;
  border-color:#817585 !important;
  background:linear-gradient(180deg,#afa3b0,#554956) !important;
  color:#1a1019 !important;
  font-family:Georgia,"Times New Roman",serif !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-speaker-driver{
  border-color:#0e0c10 !important;
  box-shadow:inset 0 0 14px #000,0 0 0 2px #554c58,0 5px 14px rgba(0,0,0,.68),0 0 13px rgba(136,40,86,.10) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-speaker-driver span,
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-subwoofer-label{
  color:#c5b8c6 !important;
  font-family:Georgia,"Times New Roman",serif !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-subwoofer{
  border-color:#5a4e5c !important;
  background:
    radial-gradient(circle,rgba(196,170,194,.038) 0 1px,transparent 1.4px) 0 0/5px 5px,
    linear-gradient(180deg,#171419,#050405) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-wood-plinth{
  border-radius:2px 2px 9px 9px !important;
  border-color:#625466 !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.045),transparent 18% 82%,rgba(0,0,0,.30)),
    repeating-linear-gradient(92deg,#2b1b26 0 11px,#10090f 12px 22px,#21141d 23px 34px) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-wood-plinth span{
  border-color:#5d505f !important;
  background:linear-gradient(90deg,#050305,#271821 45%,#10090f) !important;
}

@media(max-width:720px){
  html[data-look="gothic"] .jukebox-arch{
    clip-path:polygon(50% 0,96% 18%,100% 36%,100% 100%,0 100%,0 36%,4% 18%) !important;
    border-radius:36% 36% 14px 14px / 20% 20% 14px 14px !important;
    padding-top:50px !important;
  }
  html[data-look="gothic"] .jukebox-arch::before,
  html[data-look="gothic"] .jukebox-arch::after{top:68px !important;width:9px !important;}
}

/* =========================================================
   WURLITZER 3.7 · GOTHIC BLOOD RED
   Alleen Gothic Cathedral: bloedrood + zwart + grijs/chroom.
   Overschrijft bewust de eerdere paarse/bordeaux gothic tinten.
   ========================================================= */
html[data-look="gothic"]{
  --jb-shell-1:#090909;
  --jb-shell-2:#350004;
  --jb-shell-3:#010101;
  --jb-trim:#74777c;
  --jb-trim-light:#c9cbd0;
  --jb-glow:rgba(196,0,18,.46);
  --jb-head-1:#300004;
  --jb-head-2:#050505;
  --jb-screen-1:#160002;
  --jb-screen-2:#020202;
  --jb-card:rgba(150,150,150,.055);
  --jb-card-hover:rgba(174,0,15,.15);
  --jb-now-1:rgba(112,0,10,.78);
  --jb-now-2:rgba(7,7,7,.96);
  --jb-text:#ececec;
  --jb-muted:#aeb0b4;
  --jb-label:#d5d5d5;
  --jb-input-bg:#050505;
  --jb-input-text:#f1f1f1;
  --jb-btn-1:#9d0712;
  --jb-btn-2:#280003;
  --jb-btn-text:#f4f4f4;
  --jb-line:rgba(164,168,174,.42);
}

html[data-look="gothic"] .jukebox-machine{
  border-color:#090909 !important;
  background:
    radial-gradient(ellipse at 50% 4%,rgba(210,0,18,.29),transparent 24%),
    linear-gradient(90deg,
      #020202 0 5%,#180002 5% 8%,#85888e 8% 9.2%,
      #050505 9.2% 90.8%,#85888e 90.8% 92%,#180002 92% 95%,#020202 95% 100%) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.84),
    0 0 0 1px #404349,
    0 0 34px rgba(180,0,14,.34),
    inset 0 0 0 2px rgba(210,212,216,.06) !important;
}

html[data-look="gothic"] .jukebox-head{
  background:
    linear-gradient(90deg,transparent,rgba(175,0,14,.26),transparent),
    linear-gradient(180deg,#360004,#050505) !important;
  border-bottom:2px solid #74777c !important;
}
html[data-look="gothic"] .jukebox-head-title{
  color:#ededed !important;
  text-shadow:0 0 8px rgba(220,0,20,.40),0 2px 2px #000 !important;
}
html[data-look="gothic"] .jukebox-window-btn{
  border:1px solid #909399 !important;
  background:radial-gradient(circle at 35% 28%,#aeb0b4,#4d5055 47%,#121315 72%) !important;
  color:#f1f1f1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 8px rgba(0,0,0,.58),0 0 8px rgba(170,0,14,.25) !important;
}

html[data-look="gothic"] .jukebox-arch{
  border-color:#74777c !important;
  background:
    radial-gradient(ellipse at 50% 5%,rgba(205,0,18,.44) 0 5%,rgba(92,0,8,.54) 6% 13%,transparent 14%),
    repeating-conic-gradient(from 0deg at 50% 16%,rgba(155,0,13,.30) 0 5deg,rgba(72,72,72,.055) 5deg 10deg),
    linear-gradient(180deg,#250003 0 22%,#060606 23% 100%) !important;
  box-shadow:
    inset 0 0 0 3px #080808,
    inset 0 0 0 7px #55585d,
    inset 0 0 38px rgba(0,0,0,.92),
    0 0 26px rgba(190,0,15,.32) !important;
}
html[data-look="gothic"] .jukebox-arch::before,
html[data-look="gothic"] .jukebox-arch::after{
  background:
    linear-gradient(180deg,#d0d2d5 0 5%,#666a70 6% 19%,#a6000d 20% 41%,#360004 42% 61%,#7f000a 62% 82%,#c5c7cb 83% 100%) !important;
  box-shadow:0 0 8px rgba(210,0,18,.37),inset 0 0 0 1px rgba(0,0,0,.68) !important;
}

html[data-look="gothic"] .jukebox-brand{
  border-color:#7d8085 !important;
  background:
    linear-gradient(135deg,transparent 0 11%,rgba(255,255,255,.08) 12% 13%,transparent 14% 86%,rgba(255,255,255,.08) 87% 88%,transparent 89%),
    linear-gradient(180deg,#3b0005,#090909) !important;
  color:#eeeeee !important;
  text-shadow:0 0 8px rgba(215,0,18,.42),0 2px #000 !important;
}

html[data-look="gothic"] .jukebox-screen{
  border-color:#292b2f !important;
  background:
    linear-gradient(90deg,rgba(140,0,12,.10),transparent 28% 72%,rgba(120,120,120,.055)),
    linear-gradient(180deg,#160002,#030303 77%) !important;
  box-shadow:inset 0 0 0 2px #74777c,inset 0 0 0 4px #090909,inset 0 0 28px #000,0 8px 20px rgba(0,0,0,.58) !important;
}
html[data-look="gothic"] :is(.jukebox-kicker,.jukebox-now-label,.jukebox-section-label){
  color:#d0d2d5 !important;
  text-shadow:0 0 7px rgba(190,0,15,.35) !important;
}
html[data-look="gothic"] .jukebox-title{
  color:#f0f0f0 !important;
  text-shadow:0 0 10px rgba(195,0,15,.36),0 2px #000 !important;
}
html[data-look="gothic"] .jukebox-now{
  border-color:#686b70 !important;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 6px),
    radial-gradient(circle at 50% 0,rgba(185,0,15,.27),transparent 52%),
    linear-gradient(180deg,#4b0006,#080808) !important;
}
html[data-look="gothic"] .jukebox-now-title{color:#f0f0f0 !important;text-shadow:0 0 8px rgba(215,0,18,.38) !important;}
html[data-look="gothic"] .jukebox-now-sub{color:#b9bbc0 !important;}
html[data-look="gothic"] .jukebox-search{
  border-color:#6d7075 !important;
  background:#050505 !important;
  color:#f1f1f1 !important;
  -webkit-text-fill-color:#f1f1f1 !important;
}
html[data-look="gothic"] .jukebox-search::placeholder{color:#7f8287 !important;-webkit-text-fill-color:#7f8287 !important;}
html[data-look="gothic"] :is(.jukebox-control,.jukebox-search-btn,.jukebox-mini-btn,.jukebox-row-btn){
  border-color:#8b8e93 !important;
  background:linear-gradient(180deg,#aa0b17,#5a0008 55%,#160002) !important;
  color:#f4f4f4 !important;
  -webkit-text-fill-color:#f4f4f4 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 3px 7px rgba(0,0,0,.58) !important;
}
html[data-look="gothic"] :is(.jukebox-control,.jukebox-row-btn,.jukebox-mini-btn):hover{
  border-color:#c3c5c9 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 12px rgba(205,0,18,.38) !important;
}
html[data-look="gothic"] :is(.jukebox-panel-card,.jukebox-video-block){
  border-color:#5e6166 !important;
  background:linear-gradient(180deg,rgba(58,0,6,.80),rgba(7,7,7,.95)) !important;
}
html[data-look="gothic"] .jukebox-result-title{color:#e7e7e7 !important;}
html[data-look="gothic"] .jukebox-result-rank{color:#c8cacf !important;}
html[data-look="gothic"] .jukebox-video-frame{
  border-color:#6c6f74 !important;
  box-shadow:inset 0 0 0 2px #080808,0 0 12px rgba(185,0,14,.22) !important;
}
html[data-look="gothic"] .jukebox-base{
  border-color:#73767b !important;
  background:linear-gradient(180deg,#4d5055,#0a0a0a) !important;
  box-shadow:0 5px 11px rgba(0,0,0,.58),0 0 8px rgba(190,0,15,.19) !important;
}

.jukebox-cabinet-grid [data-cabinet="gothic"]{
  background:
    radial-gradient(circle at 50% 0,rgba(220,0,18,.42),transparent 42%),
    linear-gradient(145deg,#690008,#060606 68%,#2b0004) !important;
  color:#f0f0f0 !important;
  border-color:#777a80 !important;
}

html[data-look="gothic"][data-jukebox-mode="window"]{
  --jb-stage-bg:#020202;
  --jb-stage-bg-2:#120001;
  --jb-stage-accent:#b80010;
  --jb-stage-accent-2:#777a80;
  --jb-stage-record:#030303;
  --jb-stage-label:#9f000d;
  --jb-wood-1:#260003;
  --jb-wood-2:#0d0d0d;
  --jb-wood-3:#020202;
  --jb-metal:#85888d;
  --jb-speaker-face:#090909;
  --jb-speaker-rim:#676a70;
  --jb-speaker-cone:#030303;
}
html[data-look="gothic"][data-jukebox-mode="window"] body.jukebox-page{
  background:
    radial-gradient(ellipse at 50% -5%,rgba(200,0,16,.30),transparent 34%),
    radial-gradient(ellipse at 15% 56%,rgba(115,0,10,.14),transparent 26%),
    radial-gradient(ellipse at 85% 56%,rgba(115,0,10,.14),transparent 26%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(150,150,150,.025) 80px 81px),
    linear-gradient(180deg,#190002,#050505 56%,#010101) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] body.jukebox-page::before{
  background:
    linear-gradient(112deg,transparent 0 18%,rgba(205,0,18,.06) 18.5%,transparent 20% 80%,rgba(145,145,145,.045) 81%,transparent 82.5%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.009) 0 1px,transparent 1px 5px) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-speaker-column{
  border-color:#61646a !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 12% 88%,rgba(0,0,0,.46)),
    repeating-linear-gradient(92deg,#240003 0 10px,#090909 11px 20px,#180002 21px 31px) !important;
  box-shadow:0 34px 60px rgba(0,0,0,.80),0 0 30px rgba(175,0,14,.18),inset 0 0 0 3px rgba(0,0,0,.50) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-speaker-column::before{
  border-color:#41444a !important;
  background:
    radial-gradient(circle,rgba(190,190,190,.04) 0 1px,transparent 1.3px) 0 0/5px 5px,
    linear-gradient(180deg,#111214,#030303) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-speaker-badge{
  border-color:#85888e !important;
  background:linear-gradient(180deg,#b9bbc0,#595c61) !important;
  color:#090909 !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-speaker-driver{
  box-shadow:inset 0 0 14px #000,0 0 0 2px #62656b,0 5px 14px rgba(0,0,0,.72),0 0 13px rgba(170,0,14,.12) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] :is(.jukebox-speaker-driver span,.jukebox-subwoofer-label){
  color:#c5c7cb !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-subwoofer{
  border-color:#62656a !important;
  background:
    radial-gradient(circle,rgba(196,196,196,.04) 0 1px,transparent 1.4px) 0 0/5px 5px,
    linear-gradient(180deg,#111214,#030303) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-wood-plinth{
  border-color:#686b70 !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.04),transparent 18% 82%,rgba(0,0,0,.34)),
    repeating-linear-gradient(92deg,#2c0004 0 11px,#080808 12px 22px,#1d0002 23px 34px) !important;
}
html[data-look="gothic"][data-jukebox-mode="window"] .jukebox-wood-plinth span{
  border-color:#62656a !important;
  background:linear-gradient(90deg,#030303,#2a0004 45%,#080808) !important;
}

/* Groene status-LED's uit V3.0 blijven bewust groen. */
html[data-look="gothic"] .jukebox-control:active,
html[data-look="gothic"] .jukebox-control.is-led-pulse,
html[data-look="gothic"] .jukebox-control.is-active,
html[data-look="gothic"] #jukeboxShuffle.is-active{
  color:#8dff78 !important;
  -webkit-text-fill-color:#8dff78 !important;
}

/* =========================================================
   WURLITZER 3.8 · STANDALONE SCHIL WEG
   Voor alle losse jukebox-kasten: de functionele outer machine/body
   blijft bestaan, maar de zichtbare achterliggende kastschil verdwijnt.
   Alleen header, echte boogkast, speakers, subwoofer en podium blijven.
   ========================================================= */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-machine{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-body{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* De kopbalk blijft als eigen onderdeel zichtbaar, maar zonder extra
   doorlopende achterplaat onder/achter de echte jukeboxkast. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head{
  position:relative !important;
  z-index:5 !important;
}

/* =========================================================
   WURLITZER 3.9 · GOTHIC TOP FIX + LIVE SPEAKER MOTION
   - Gothic: oude driehoekige clip-path volledig uitschakelen.
   - Standalone HI-FI: drivers bewegen alleen wanneer de player speelt.
   ========================================================= */

/* Gothic bovenkant weer als volledige kastboog tonen.
   De eerdere polygon clipte links/rechts grote stukken van de kroon weg. */
html[data-look="gothic"] .jukebox-arch{
  clip-path:none !important;
  -webkit-clip-path:none !important;
  border-radius:48% 48% 22px 22px / 18% 18% 22px 22px !important;
  overflow:visible !important;
}

/* De binnenste player blijft boven de decoratieve boog staan. */
html[data-look="gothic"] .jukebox-screen{
  position:relative !important;
  z-index:3 !important;
}

html[data-look="gothic"] .jukebox-brand{
  z-index:4 !important;
}

/* Speakerbeweging: puur visueel, aangestuurd door de bestaande
   is-playing status op de Play/Pauze-knop. */
html[data-jukebox-mode="window"] .jukebox-speaker-driver,
html[data-jukebox-mode="window"] .jukebox-subwoofer-cone{
  transform-origin:center center;
  will-change:scale,filter;
}

html[data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-driver-tweeter{
  animation:jbTweeterLive .16s ease-in-out infinite alternate;
}

html[data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-driver-mid{
  animation:jbMidLive .25s ease-in-out infinite alternate;
}

html[data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-driver-woofer{
  animation:jbWooferLive .42s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

html[data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-subwoofer-cone{
  animation:jbSubLive .52s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

@keyframes jbTweeterLive{
  from{scale:1;filter:brightness(.96);}
  to{scale:1.018;filter:brightness(1.20);}
}

@keyframes jbMidLive{
  from{scale:1;filter:brightness(.96);}
  to{scale:1.035;filter:brightness(1.12);}
}

@keyframes jbWooferLive{
  from{scale:.985;filter:brightness(.93);}
  to{scale:1.055;filter:brightness(1.13);}
}

@keyframes jbSubLive{
  from{scale:.975;filter:brightness(.91);}
  to{scale:1.075;filter:brightness(1.16);}
}

/* Stop/Pauze moet visueel direct rust geven. */
html[data-jukebox-mode="window"] #jukeboxOverlay:not(:has(#jukeboxPlay.is-playing)) .jukebox-speaker-driver,
html[data-jukebox-mode="window"] #jukeboxOverlay:not(:has(#jukeboxPlay.is-playing)) .jukebox-subwoofer-cone{
  animation:none !important;
  scale:1;
  filter:none;
}

/* Toegankelijkheid: respecteer systemen waarop animatie is uitgezet. */
@media (prefers-reduced-motion:reduce){
  html[data-jukebox-mode="window"] .jukebox-speaker-driver,
  html[data-jukebox-mode="window"] .jukebox-subwoofer-cone{
    animation:none !important;
    scale:1 !important;
    filter:none !important;
  }
}


/* =========================================================
   WURLITZER 4.0 TEST · VIRTUELE VLOER + SPEAKER FX
   Standalone alleen:
   - echte podiumvloer met perspectief en slagschaduwen
   - pootjes buiten de kast geplaatst
   - rustiger speakerbeweging
   - Speaker FX kan door bezoeker aan/uit worden gezet
   - decoratieve showroom-achtergrond die met de kast meekleurt
   ========================================================= */

html[data-jukebox-page="1"][data-jukebox-mode="window"] body.jukebox-page{
  position:relative !important;
  background:
    radial-gradient(ellipse at 50% 4%,color-mix(in srgb,var(--jb-stage-accent) 24%,transparent),transparent 27%),
    radial-gradient(circle at 13% 34%,color-mix(in srgb,var(--jb-stage-accent) 13%,transparent),transparent 25%),
    radial-gradient(circle at 87% 34%,color-mix(in srgb,var(--jb-stage-accent-2) 12%,transparent),transparent 25%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 70px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 70px),
    linear-gradient(180deg,var(--jb-stage-bg-2),var(--jb-stage-bg) 62%,#020304) !important;
}

/* Achterwand: brede lichtbogen en een zachte showroom-gloed. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] body.jukebox-page::after{
  content:"BABBELHOEK  ·  JUKEBOX LOUNGE";
  position:fixed;
  left:50%;
  top:clamp(26px,4vh,54px);
  transform:translateX(-50%);
  z-index:0;
  width:min(92vw,1500px);
  height:clamp(80px,13vh,145px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:10px;
  box-sizing:border-box;
  pointer-events:none;
  color:color-mix(in srgb,var(--jb-stage-accent-2) 34%,transparent);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(13px,1.25vw,23px);
  font-weight:900;
  letter-spacing:.34em;
  text-indent:.34em;
  text-shadow:0 0 18px color-mix(in srgb,var(--jb-stage-accent) 30%,transparent);
  border-top:1px solid color-mix(in srgb,var(--jb-stage-accent) 16%,transparent);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 115%,transparent 0 47%,color-mix(in srgb,var(--jb-stage-accent) 9%,transparent) 48% 49%,transparent 50% 59%,color-mix(in srgb,var(--jb-stage-accent-2) 7%,transparent) 60% 61%,transparent 62%);
  opacity:.82;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-overlay{
  isolation:isolate;
  position:fixed !important;
}

/* De vloer zelf: perspectieftegels met een lichte reflectie van het gekozen thema. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-stage-floor{
  position:absolute;
  z-index:1;
  left:-8vw;
  right:-8vw;
  bottom:-12vh;
  height:42vh;
  pointer-events:none;
  transform-origin:50% 100%;
  transform:perspective(760px) rotateX(62deg);
  border-top:2px solid color-mix(in srgb,var(--jb-stage-accent) 28%,#777 20%);
  background:
    radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--jb-stage-accent) 17%,transparent),transparent 43%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 66px),
    linear-gradient(180deg,color-mix(in srgb,var(--jb-stage-bg-2) 78%,#171a20),#030405 72%);
  box-shadow:
    inset 0 20px 40px rgba(0,0,0,.42),
    0 -18px 60px color-mix(in srgb,var(--jb-stage-accent) 8%,transparent);
  opacity:.88;
}

/* Alle apparatuur blijft boven de vloer. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] :is(.jukebox-machine,.jukebox-speaker-column){
  position:relative !important;
}
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-machine{z-index:4 !important;}
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-speaker-column{
  z-index:3 !important;
  align-self:end !important;
  margin-bottom:clamp(20px,3.3vh,38px) !important;
}

/* De echte kastvoet staat nu los onder de boogkast. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-wood-plinth{
  position:relative !important;
  z-index:5 !important;
  width:78% !important;
  margin:-1px auto 36px !important;
  transform:translateY(5px);
}
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-wood-plinth span{
  top:14px !important;
  height:30px !important;
}

/* Zachte grondschaduwen: apparatuur staat nu optisch echt op de vloer. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-speaker-column::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:8%;
  right:8%;
  bottom:-27px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.72),rgba(0,0,0,.28) 48%,transparent 72%);
  filter:blur(5px);
  transform:scaleX(1.18);
}
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-wood-plinth::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:4%;
  right:4%;
  bottom:-45px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.76),rgba(0,0,0,.30) 50%,transparent 74%);
  filter:blur(6px);
  transform:scaleX(1.08);
}

/* Speaker FX knop - zelfde familie als Kast, met groene status-LED als FX actief is. */
.jukebox-fx-btn{
  width:auto !important;
  min-width:58px !important;
  padding:0 9px !important;
  gap:5px;
  font-size:14px !important;
}
.jukebox-fx-btn > span:last-child{
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.jukebox-fx-btn.is-active .jukebox-fx-icon{
  color:#7cff6b;
  filter:drop-shadow(0 0 5px #46ff52) drop-shadow(0 0 9px rgba(70,255,82,.58));
}
html[data-jukebox-mode="embed"] .jukebox-fx-btn{display:none !important;}

/* Rustigere beweging: woofer/sub nog zichtbaar, mid subtiel, tweeter bijna stil. */
@keyframes jbTweeterLive{
  from{scale:1;filter:brightness(.98);}
  to{scale:1.004;filter:brightness(1.05);}
}
@keyframes jbMidLive{
  from{scale:1;filter:brightness(.98);}
  to{scale:1.010;filter:brightness(1.05);}
}
@keyframes jbWooferLive{
  from{scale:.994;filter:brightness(.96);}
  to{scale:1.026;filter:brightness(1.07);}
}
@keyframes jbSubLive{
  from{scale:.990;filter:brightness(.95);}
  to{scale:1.038;filter:brightness(1.09);}
}

/* FX UIT wint altijd van de oudere V3.9 animatieregels. */
html[data-speaker-fx="off"][data-jukebox-mode="window"] .jukebox-speaker-driver,
html[data-speaker-fx="off"][data-jukebox-mode="window"] .jukebox-subwoofer-cone{
  animation:none !important;
  scale:1 !important;
  filter:none !important;
}

/* FX AAN + werkelijk afspelen. */
html[data-speaker-fx="on"][data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-driver-tweeter{
  animation:jbTweeterLive .24s ease-in-out infinite alternate !important;
}
html[data-speaker-fx="on"][data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-driver-mid{
  animation:jbMidLive .34s ease-in-out infinite alternate !important;
}
html[data-speaker-fx="on"][data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-driver-woofer{
  animation:jbWooferLive .48s cubic-bezier(.45,.05,.55,.95) infinite alternate !important;
}
html[data-speaker-fx="on"][data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-subwoofer-cone{
  animation:jbSubLive .58s cubic-bezier(.45,.05,.55,.95) infinite alternate !important;
}

/* Gothic krijgt een donker marmeren vloer met bloedrode gloed en staalgrijze voegen. */
html[data-look="gothic"][data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-stage-floor{
  border-top-color:#676a70 !important;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(185,0,15,.24),transparent 45%),
    repeating-linear-gradient(90deg,rgba(150,153,160,.15) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,rgba(115,118,124,.12) 0 1px,transparent 1px 62px),
    linear-gradient(180deg,#160002,#050505 54%,#010101) !important;
}

@media(max-width:900px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-stage-floor{
    bottom:-14vh;
    height:34vh;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] body.jukebox-page::after{
    opacity:.38;
    font-size:11px;
  }
}

@media(max-width:600px){
  .jukebox-fx-btn{min-width:38px !important;width:38px !important;padding:0 !important;}
  .jukebox-fx-btn > span:last-child{display:none;}
  html[data-jukebox-page="1"][data-jukebox-mode="window"] body.jukebox-page::after{display:none;}
}

/* =========================================================
   WURLITZER 4.2 · LIVE REACTIES + ONLINE BEZOEKERS
   Alleen zichtbaar op de standalone jukebox.
   Smalle live-reactiebalk; maximaal twee regels per reactie.
   ========================================================= */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-live-panel{
  position:fixed;
  z-index:9;
  top:50%;
  right:clamp(10px,1.2vw,24px);
  transform:translateY(-50%);
  width:clamp(200px,13vw,260px);
  height:min(560px,72vh);
  min-height:350px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  pointer-events:auto;
  border:2px solid color-mix(in srgb,var(--jb-trim) 58%,#555);
  border-radius:15px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--jb-head-1) 92%,#08090b),color-mix(in srgb,var(--jb-screen-2) 96%,#050607));
  box-shadow:
    0 22px 52px rgba(0,0,0,.58),
    0 0 20px color-mix(in srgb,var(--jb-glow) 72%,transparent),
    inset 0 0 0 1px rgba(255,255,255,.06);
  color:var(--jb-text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

html[data-jukebox-mode="embed"] .jukebox-live-panel{
  display:none !important;
}

.jukebox-live-head{
  flex:0 0 39px;
  min-height:39px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 26px;
  align-items:center;
  gap:7px;
  padding:5px 6px 5px 9px;
  border-bottom:1px solid var(--jb-line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--jb-btn-1) 18%,var(--jb-head-1)),var(--jb-head-2));
}

.jukebox-live-title{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--jb-label);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.10em;
}

.jukebox-live-presence{
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  color:var(--jb-muted);
  font-size:9px;
  font-weight:800;
}

.jukebox-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#50ff68;
  box-shadow:0 0 5px #44ff5d,0 0 9px rgba(68,255,93,.48);
}

.jukebox-live-toggle{
  width:26px;
  height:25px;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  border:1px solid var(--jb-line);
  border-radius:6px;
  background:linear-gradient(180deg,var(--jb-btn-1),var(--jb-btn-2));
  color:var(--jb-btn-text);
  font-size:14px;
  font-weight:1000;
}

.jukebox-live-content{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}

.jukebox-live-messages{
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:6px 7px;
  scrollbar-width:thin;
  scrollbar-color:var(--jb-trim) rgba(255,255,255,.04);
}

.jukebox-live-empty{
  padding:16px 7px;
  color:var(--jb-muted);
  font-size:10px;
  text-align:center;
}

.jukebox-live-message{
  padding:6px 5px 7px;
  border-bottom:1px solid color-mix(in srgb,var(--jb-line) 68%,transparent);
}

.jukebox-live-message:last-child{border-bottom:0;}

.jukebox-live-message-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:2px;
}

.jukebox-live-message-meta strong{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--jb-label);
  font-size:10px;
  font-weight:900;
}

.jukebox-live-message-meta time{
  flex:0 0 auto;
  color:color-mix(in srgb,var(--jb-muted) 72%,transparent);
  font-size:8px;
}

.jukebox-live-message-text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
  color:var(--jb-text);
  font-size:10px;
  line-height:1.3;
}

.jukebox-live-form{
  flex:0 0 auto;
  padding:7px;
  border-top:1px solid var(--jb-line);
  background:rgba(0,0,0,.16);
}

.jukebox-live-nickname,
.jukebox-live-input{
  width:100%;
  height:29px;
  min-width:0;
  padding:0 8px;
  border:1px solid var(--jb-line);
  border-radius:7px;
  outline:none;
  background:var(--jb-input-bg);
  color:var(--jb-input-text);
  -webkit-text-fill-color:var(--jb-input-text);
  font:700 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
}

.jukebox-live-nickname{
  margin-bottom:5px;
}

.jukebox-live-nickname:focus,
.jukebox-live-input:focus{
  border-color:var(--jb-trim);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--jb-glow) 48%,transparent);
}

.jukebox-live-input-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 32px;
  gap:5px;
}

.jukebox-live-send{
  width:32px;
  height:29px;
  padding:0;
  cursor:pointer;
  border:1px solid var(--jb-line);
  border-radius:7px;
  background:linear-gradient(180deg,var(--jb-btn-1),var(--jb-btn-2));
  color:var(--jb-btn-text);
  -webkit-text-fill-color:var(--jb-btn-text);
  font-size:13px;
  font-weight:1000;
}

.jukebox-live-send:disabled{opacity:.45;cursor:wait;}

.jukebox-live-status{
  min-height:12px;
  margin-top:4px;
  overflow:hidden;
  color:var(--jb-muted);
  font-size:8px;
  line-height:1.3;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.jukebox-live-status[data-kind="error"]{color:#ff9f9f;}
.jukebox-live-status[data-kind="ok"]{color:#8dff98;}

.jukebox-live-panel.is-collapsed{
  height:39px !important;
  min-height:39px !important;
}
.jukebox-live-panel.is-collapsed .jukebox-live-content{display:none !important;}
.jukebox-live-panel.is-collapsed .jukebox-live-head{border-bottom:0;}

/* Op middelgrote schermen wordt het een compacte, inklapbare balk rechtsonder. */
@media(max-width:1450px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-live-panel{
    top:auto;
    right:8px;
    bottom:8px;
    transform:none;
    width:min(320px,calc(100vw - 16px));
    height:190px;
    min-height:0;
  }
}

@media(max-width:900px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-live-panel{
    width:min(360px,calc(100vw - 12px));
    right:6px;
    bottom:6px;
    height:170px;
  }
}

@media(max-width:600px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-live-panel{
    left:4px;
    right:4px;
    bottom:4px;
    width:auto;
    height:160px;
    border-radius:11px;
  }
  .jukebox-live-head{
    grid-template-columns:minmax(0,1fr) auto 25px;
    min-height:36px;
    flex-basis:36px;
  }
  .jukebox-live-panel.is-collapsed{
    height:36px !important;
    min-height:36px !important;
  }
}

/* =========================================================
   WURLITZER 4.3 · PERMANENTE BEZOEKERSTELLER
   Klassieke "U bent bezoeker nr."-teller voor standalone.
   ========================================================= */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-total-counter{
  position:fixed;
  z-index:11;
  right:clamp(10px,1.2vw,24px);
  bottom:clamp(10px,1.2vw,24px);
  display:flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 11px;
  pointer-events:none;
  border:1px solid color-mix(in srgb,var(--jb-trim) 68%,#666);
  border-radius:9px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--jb-head-1) 90%,#090a0c),color-mix(in srgb,var(--jb-screen-2) 96%,#040506));
  box-shadow:
    0 9px 24px rgba(0,0,0,.44),
    0 0 12px color-mix(in srgb,var(--jb-glow) 58%,transparent),
    inset 0 1px 0 rgba(255,255,255,.07);
  color:var(--jb-muted);
  font:800 10px/1.1 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.02em;
  opacity:.78;
  transition:opacity .18s ease,bottom .18s ease;
}

.jukebox-total-counter.is-ready{opacity:1;}

.jukebox-total-counter strong{
  min-width:34px;
  color:#69ff78;
  font:1000 12px/1 Consolas,"Courier New",monospace;
  text-align:right;
  text-shadow:0 0 5px rgba(80,255,104,.76),0 0 10px rgba(80,255,104,.34);
}

html[data-jukebox-mode="embed"] .jukebox-total-counter{
  display:none !important;
}

/* Als de live-reacties rechtsonder staan, schuift de permanente teller erboven. */
@media(max-width:1450px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-total-counter{
    right:8px;
    bottom:206px;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-live-panel.is-collapsed + .jukebox-total-counter{
    bottom:55px;
  }
}

@media(max-width:900px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-total-counter{
    right:6px;
    bottom:184px;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-live-panel.is-collapsed + .jukebox-total-counter{
    bottom:48px;
  }
}

@media(max-width:600px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-total-counter{
    right:4px;
    bottom:172px;
    min-height:30px;
    padding:6px 9px;
    font-size:9px;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-live-panel.is-collapsed + .jukebox-total-counter{
    bottom:46px;
  }
}



/* =========================================================
   WURLITZER 4.4 · NUMMERZOEKER SCROLLT IN VOLLEDIGE TOP 3000
   ========================================================= */
.jukebox-result.is-search-target{
  position:relative;
  z-index:1;
  border-radius:5px;
  background:color-mix(in srgb,var(--jb-trim) 18%,transparent) !important;
  box-shadow:
    inset 0 0 0 1px var(--jb-trim),
    0 0 10px var(--jb-glow) !important;
}

/* =========================================================
   WURLITZER 4.5 · TOP 3000 VENSTER 5 NUMMERS HOOG
   Standalone jukebox: vijf volledige regels zichtbaar.
   Hierdoor wordt de kast iets langer en sluit hij mooier aan
   op de hoogte/voetlijn van de HI-FI luidsprekers.
   Embed/chatweergave blijft ongewijzigd.
   ========================================================= */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-library-card{
  height:190px !important;
  min-height:190px !important;
}

/* =========================================================
   WURLITZER 4.6 · GEBOGEN JUKEBOX-KROON
   Standalone: de rechte kopbalk wordt een compacte gebogen
   kroon die visueel aansluit op de bovenboog van de kast.
   De totale verticale footprint blijft vrijwel gelijk aan V4.5.
   Embed/chatweergave blijft ongewijzigd.
   ========================================================= */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head{
  width:88% !important;
  height:50px !important;
  min-height:50px !important;
  margin:0 auto -14px !important;
  padding:15px 20px 7px !important;
  box-sizing:border-box !important;
  align-items:flex-end !important;
  overflow:visible !important;
  border:2px solid var(--jb-trim) !important;
  border-bottom-color:color-mix(in srgb,var(--jb-trim) 74%,var(--jb-shell-3)) !important;
  border-radius:50% 50% 11px 11px / 100% 100% 11px 11px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -3px 0 rgba(0,0,0,.30),
    0 4px 10px rgba(0,0,0,.30),
    0 0 12px var(--jb-glow) !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:9px;
  right:9px;
  top:5px;
  bottom:4px;
  border:1px solid color-mix(in srgb,var(--jb-trim-light) 42%,transparent);
  border-radius:50% 50% 8px 8px / 100% 100% 8px 8px;
  opacity:.72;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-title,
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions{
  position:relative;
  z-index:2;
}

/* De echte kastboog schuift subtiel onder de kroon zodat beide één geheel lijken. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-body{
  position:relative !important;
  z-index:4 !important;
}

/* Op smallere schermen iets meer bruikbare breedte voor de knoppen. */
@media(max-width:900px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head{
    width:94% !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

@media(max-width:600px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head{
    width:98% !important;
    height:46px !important;
    min-height:46px !important;
    margin-bottom:-12px !important;
    padding:13px 9px 6px !important;
  }
}

/* =========================================================
   WURLITZER 4.9 · HEAD OP HET JUKEBOX-SCREEN
   Standalone:
   - jukebox-head staat nu IN de kast, direct boven het jukebox-screen
   - head en screen hebben exact dezelfde beschikbare breedte
   - BABBELHOEK JUKEBOX staat als gouden middenbadge in de head
   - FX/Kast/minimaliseren/sluiten zijn kleiner en volledig opgesloten
     binnen de gebogen head
   - de oude losse kroon boven de kast bestaat niet meer
   Embed/chatweergave blijft functioneel en compact.
   ========================================================= */

/* De standalone kast houdt de iets ruimere V4.8-verhouding. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-machine{
  width:min(770px,48vw,75vh) !important;
}

/* De head is nu een echte kap direct boven het screen.
   Omdat head en screen siblings binnen dezelfde .jukebox-arch zijn,
   gebruiken ze exact dezelfde contentbreedte. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head{
  position:relative !important;
  z-index:8 !important;
  width:100% !important;
  height:54px !important;
  min-height:54px !important;
  margin:-42px 0 6px !important;
  padding:0 9px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  overflow:hidden !important;
  border:2px solid var(--jb-trim) !important;
  border-bottom-color:color-mix(in srgb,var(--jb-trim) 72%,var(--jb-shell-3)) !important;
  border-radius:50% 50% 11px 11px / 86% 86% 11px 11px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -3px 0 rgba(0,0,0,.28),
    0 3px 8px rgba(0,0,0,.30),
    0 0 11px var(--jb-glow) !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head::after{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  pointer-events:none !important;
  left:7px !important;
  right:7px !important;
  top:5px !important;
  bottom:4px !important;
  border:1px solid color-mix(in srgb,var(--jb-trim-light) 38%,transparent) !important;
  border-radius:50% 50% 8px 8px / 86% 86% 8px 8px !important;
  opacity:.72 !important;
}

/* Het gouden bordje uit de oude kast zit nu exact midden in de head. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-title{
  position:absolute !important;
  z-index:3 !important;
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:auto !important;
  max-width:46% !important;
  margin:0 !important;
  padding:5px 17px 4px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  text-align:center !important;
  color:#3b220d !important;
  -webkit-text-fill-color:#3b220d !important;
  background:linear-gradient(180deg,#fff0ad 0%,#e6b34f 48%,#b97a25 100%) !important;
  border:1px solid #6f451b !important;
  border-radius:999px !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:13px !important;
  font-weight:1000 !important;
  letter-spacing:.10em !important;
  line-height:1.05 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -2px 3px rgba(91,47,10,.22),
    0 2px 6px rgba(0,0,0,.30),
    0 0 9px rgba(238,184,74,.30) !important;
}

/* Kleine bediening rechts, volledig binnen de 54px hoge kap. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions{
  position:relative !important;
  z-index:4 !important;
  top:auto !important;
  right:auto !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  margin:0 0 0 auto !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions .jukebox-window-btn{
  width:28px !important;
  min-width:28px !important;
  height:28px !important;
  min-height:28px !important;
  padding:0 !important;
  box-sizing:border-box !important;
  border-radius:8px !important;
  font-size:11px !important;
  line-height:1 !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-fx-btn,
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-cabinet-btn{
  width:38px !important;
  min-width:38px !important;
  height:30px !important;
  min-height:30px !important;
  padding:2px 3px 1px !important;
  display:grid !important;
  grid-template-rows:13px 8px !important;
  place-items:center !important;
  align-content:center !important;
  row-gap:1px !important;
  font-size:11px !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-fx-btn > span:last-child,
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-cabinet-btn > span:last-child{
  display:block !important;
  margin:0 !important;
  font-size:7px !important;
  font-weight:1000 !important;
  line-height:8px !important;
  letter-spacing:.02em !important;
}

/* De oude gouden badge in de arch blijft weg: er is nu precies één badge. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-brand{
  display:none !important;
}

/* Kastmenu opent nog steeds vlak onder de bediening. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-cabinet-menu{
  top:64px !important;
}

@media(max-width:1400px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-machine{
    width:min(690px,50vw,75vh) !important;
  }
}

@media(max-width:900px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-machine{
    width:min(700px,calc(100vw - 16px),82vh) !important;
  }
}

@media(max-width:600px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head{
    height:48px !important;
    min-height:48px !important;
    margin-top:-36px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-title{
    max-width:44% !important;
    padding:4px 8px 3px !important;
    font-size:10px !important;
    letter-spacing:.055em !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions{
    gap:3px !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions .jukebox-window-btn{
    width:25px !important;
    min-width:25px !important;
    height:25px !important;
    min-height:25px !important;
    font-size:10px !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-fx-btn,
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-cabinet-btn{
    width:33px !important;
    min-width:33px !important;
    height:27px !important;
    min-height:27px !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-cabinet-menu{
    top:56px !important;
  }
}


/* =========================================================
   WURLITZER 5.0 · TRACK-LIJST SYNC + DUIDELIJKE SHUFFLE
   - de lijst volgt ieder werkelijk spelend nummer
   - Shuffle: alleen het symbool wordt blauw wanneer AAN
   - geen groene LED/puls of actieve knopachtergrond voor Shuffle
   ========================================================= */
#jukeboxShuffle{
  position:relative;
}

#jukeboxShuffle .jukebox-shuffle-icon{
  width:17px;
  height:17px;
  display:block;
  margin:auto;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--jb-btn-text) !important;
  filter:none;
  transition:color .14s ease, filter .14s ease;
}

/* UIT: normale kleur, ook tijdens indrukken. */
#jukeboxShuffle:active,
#jukeboxShuffle.is-led-pulse{
  color:var(--jb-btn-text) !important;
  -webkit-text-fill-color:var(--jb-btn-text) !important;
  text-shadow:none !important;
  filter:none !important;
  transform:none !important;
}

#jukeboxShuffle:active .jukebox-shuffle-icon,
#jukeboxShuffle.is-led-pulse .jukebox-shuffle-icon{
  color:var(--jb-btn-text) !important;
  filter:none !important;
}

/* AAN: alleen het SVG-symbool blauw; de knop zelf verandert niet. */
#jukeboxShuffle.is-shuffle-on .jukebox-shuffle-icon,
#jukeboxShuffle.is-shuffle-on:active .jukebox-shuffle-icon{
  color:#38bdf8 !important;
  filter:drop-shadow(0 0 2px rgba(125,211,252,.95)) drop-shadow(0 0 5px rgba(56,189,248,.72));
}

/* Oude is-active-opmaak kan na deze versie nooit meer de Shuffle-knop kleuren. */
#jukeboxShuffle.is-active{
  color:var(--jb-btn-text) !important;
  -webkit-text-fill-color:var(--jb-btn-text) !important;
  text-shadow:none !important;
  background:linear-gradient(180deg,var(--jb-btn-1),var(--jb-btn-2)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 3px 7px rgba(0,0,0,.22) !important;
}


/* =========================================================
   WURLITZER 5.1 · HEAD IN BALANS
   - FX + Kast links
   - gouden BABBELHOEK JUKEBOX exact gecentreerd
   - minimaliseren + sluiten rechts
   ========================================================= */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head{
  justify-content:space-between !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions-left{
  margin:0 auto 0 0 !important;
  justify-content:flex-start !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions-right{
  margin:0 0 0 auto !important;
  justify-content:flex-end !important;
}

/* Het middenbord blijft onafhankelijk van beide knopgroepen exact in het midden. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-title{
  left:50% !important;
  right:auto !important;
  transform:translate(-50%,-50%) !important;
}

@media(max-width:600px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions-left,
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions-right{
    gap:2px !important;
  }
}

/* =========================================================
   WURLITZER 5.2 · KNOPPEN NAAST HET MIDDENBORD
   - FX + Kast direct links van het gouden middenbord
   - minimaliseren + sluiten direct rechts van het middenbord
   - alle bediening blijft volledig binnen het brede middenstuk
     van de gebogen head
   ========================================================= */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head{
  height:58px !important;
  min-height:58px !important;
  padding:0 10px !important;
  justify-content:center !important;
  overflow:hidden !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-title{
  width:224px !important;
  max-width:224px !important;
  min-width:224px !important;
  padding:5px 10px 4px !important;
  font-size:12px !important;
  letter-spacing:.08em !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions{
  position:absolute !important;
  z-index:4 !important;
  top:50% !important;
  bottom:auto !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  transform:translateY(-50%) !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions-left{
  left:auto !important;
  right:calc(50% + 120px) !important;
  justify-content:flex-end !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions-right{
  left:calc(50% + 120px) !important;
  right:auto !important;
  justify-content:flex-start !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions .jukebox-window-btn{
  width:25px !important;
  min-width:25px !important;
  height:25px !important;
  min-height:25px !important;
  padding:0 !important;
  border-radius:7px !important;
  font-size:10px !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-fx-btn,
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-cabinet-btn{
  width:34px !important;
  min-width:34px !important;
  height:27px !important;
  min-height:27px !important;
  padding:1px 2px !important;
  grid-template-rows:12px 7px !important;
  row-gap:1px !important;
  font-size:10px !important;
}

html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-fx-btn > span:last-child,
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-cabinet-btn > span:last-child{
  font-size:6px !important;
  line-height:7px !important;
}

@media(max-width:600px){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head{
    height:52px !important;
    min-height:52px !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-title{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;
    font-size:9px !important;
    letter-spacing:.045em !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions-left{
    right:calc(50% + 96px) !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions-right{
    left:calc(50% + 96px) !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-actions .jukebox-window-btn{
    width:22px !important;
    min-width:22px !important;
    height:22px !important;
    min-height:22px !important;
  }
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-fx-btn,
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-cabinet-btn{
    width:29px !important;
    min-width:29px !important;
    height:24px !important;
    min-height:24px !important;
  }
}

/* =========================================================
   WURLITZER 5.3 · JUKEBOX LED SHOWCAR + 3D DIEPTE
   Standalone alleen:
   - ingebouwde lichtbuizen langs de arch (geen losse kerstlampjes)
   - zachte LED-contour rond het screen en achter het middenbord
   - subtiele underglow onder de kast
   - meer optische kastdiepte en fysieke knopdiepte
   - iedere kaststijl houdt zijn eigen lichtkarakter
   ========================================================= */

/* LED-palet per kast. */
html[data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#ffd36a;
  --jb-led-alt:#ff8a32;
  --jb-led-soft:rgba(255,211,106,.32);
  --jb-led-hot:rgba(255,138,50,.60);
}
html[data-look="light"][data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#ffe08a; --jb-led-alt:#72d6d4;
  --jb-led-soft:rgba(255,224,138,.30); --jb-led-hot:rgba(114,214,212,.52);
}
html[data-look="dark"][data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#efca72; --jb-led-alt:#b9c6d6;
  --jb-led-soft:rgba(239,202,114,.25); --jb-led-hot:rgba(185,198,214,.42);
}
html[data-look="arcade"][data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#29dcff; --jb-led-alt:#ff38d5;
  --jb-led-soft:rgba(41,220,255,.34); --jb-led-hot:rgba(255,56,213,.58);
}
html[data-look="cafe"][data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#ffc45d; --jb-led-alt:#e9872d;
  --jb-led-soft:rgba(255,196,93,.28); --jb-led-hot:rgba(233,135,45,.50);
}
html[data-look="midnight"][data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#d7b4ff; --jb-led-alt:#f47dc0;
  --jb-led-soft:rgba(215,180,255,.27); --jb-led-hot:rgba(244,125,192,.50);
}
html[data-look="red"][data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#ff554b; --jb-led-alt:#fff0bd;
  --jb-led-soft:rgba(255,85,75,.30); --jb-led-hot:rgba(255,240,189,.48);
}
html[data-look="blue"][data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#6ec9ff; --jb-led-alt:#e2f5ff;
  --jb-led-soft:rgba(110,201,255,.32); --jb-led-hot:rgba(226,245,255,.52);
}
html[data-look="pride"][data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#ff7dca; --jb-led-alt:#67e8f9;
  --jb-led-soft:rgba(255,125,202,.32); --jb-led-hot:rgba(103,232,249,.55);
}
html[data-look="terminal"][data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#ffd361; --jb-led-alt:#75ff8d;
  --jb-led-soft:rgba(255,211,97,.28); --jb-led-hot:rgba(117,255,141,.48);
}
html[data-look="gothic"][data-jukebox-page="1"][data-jukebox-mode="window"]{
  --jb-led-main:#ff263c; --jb-led-alt:#bcc3cc;
  --jb-led-soft:rgba(255,38,60,.30); --jb-led-hot:rgba(188,195,204,.44);
}

/* De hele kast krijgt meer massa zonder de bestaande kastvorm te wijzigen. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-arch{
  transform:translateZ(0);
  filter:
    drop-shadow(0 20px 17px rgba(0,0,0,.54))
    drop-shadow(0 7px 5px rgba(0,0,0,.36))
    drop-shadow(0 0 9px var(--jb-led-soft));
}

/* Bestaande before/after worden echte ingebouwde lichtbuizen. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-arch::before,
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-arch::after{
  opacity:.94 !important;
  filter:brightness(1.12) saturate(1.12);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.60),
    inset -1px 0 0 rgba(0,0,0,.24),
    0 0 3px var(--jb-led-main),
    0 0 8px var(--jb-led-main),
    0 0 17px var(--jb-led-soft),
    0 0 27px var(--jb-led-hot) !important;
  animation:jbLedTubeBreathe 4.8s ease-in-out infinite alternate;
}

/* Het screen ligt optisch iets dieper in de kast. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-screen{
  isolation:isolate;
  transform:translateZ(0);
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.42));
}

/* Dunne geïntegreerde LED-ring rond de binnenunit. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-screen::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  inset:-3px;
  border-radius:inherit;
  border:1px solid color-mix(in srgb,var(--jb-led-main) 72%,transparent);
  box-shadow:
    0 0 4px var(--jb-led-main),
    0 0 11px var(--jb-led-soft),
    inset 0 0 8px color-mix(in srgb,var(--jb-led-alt) 16%,transparent);
  opacity:.56;
  animation:jbLedScreenBreathe 5.4s ease-in-out infinite alternate;
}

/* Glas/glans: geeft het vlak diepte maar blijft weg van de playerbediening. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-screen::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:2%;
  right:2%;
  top:1%;
  height:17%;
  border-radius:50% 50% 45% 45% / 100% 100% 24% 24%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 62%,transparent);
  opacity:.44;
}
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-screen > *{
  position:relative;
  z-index:1;
}

/* De kroon en het gouden middenbord krijgen een zachte halo, niet een neonblok. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head{
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.30)) drop-shadow(0 0 6px var(--jb-led-soft));
}
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-title{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -2px 4px rgba(91,47,10,.28),
    0 3px 7px rgba(0,0,0,.36),
    0 0 6px rgba(255,217,119,.68),
    0 0 15px var(--jb-led-soft) !important;
}
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-title::after{
  content:"";
  position:absolute;
  pointer-events:none;
  top:2px;
  bottom:2px;
  width:24%;
  left:-28%;
  border-radius:999px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.54),transparent);
  opacity:.40;
  animation:jbBadgeGlint 8.5s ease-in-out infinite;
}

/* Knoppen voelen meer als fysieke jukeboxknoppen. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] :is(
  .jukebox-control,
  .jukebox-search-btn,
  .jukebox-mini-btn,
  .jukebox-row-btn,
  .jukebox-window-btn
){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    inset 0 -2px 0 rgba(0,0,0,.23),
    0 3px 0 color-mix(in srgb,var(--jb-shell-3) 72%,black),
    0 5px 8px rgba(0,0,0,.28) !important;
  transition:transform .10s ease,filter .12s ease,box-shadow .12s ease !important;
}
html[data-jukebox-page="1"][data-jukebox-mode="window"] :is(
  .jukebox-control,
  .jukebox-search-btn,
  .jukebox-mini-btn,
  .jukebox-row-btn,
  .jukebox-window-btn
):active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.26),
    0 1px 0 color-mix(in srgb,var(--jb-shell-3) 72%,black),
    0 2px 4px rgba(0,0,0,.24) !important;
}
/* Shuffle V5.0 blijft bewust zonder oplichtende knop. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] #jukeboxShuffle:active{
  transform:none !important;
}

/* Kleine light-pipe onder de video/subwoofersectie. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-video-block{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 5px 10px rgba(0,0,0,.22),
    0 0 8px color-mix(in srgb,var(--jb-led-main) 16%,transparent) !important;
}

/* Showcar-underglow op de vloer. ::after blijft de bestaande slagschaduw. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-wood-plinth::before{
  content:"";
  position:absolute;
  z-index:-2;
  pointer-events:none;
  left:8%;
  right:8%;
  bottom:-32px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(ellipse,
    color-mix(in srgb,var(--jb-led-main) 58%,transparent) 0%,
    color-mix(in srgb,var(--jb-led-alt) 24%,transparent) 42%,
    transparent 74%);
  filter:blur(8px);
  opacity:.56;
  animation:jbUnderglowBreathe 5.8s ease-in-out infinite alternate;
}

/* Tijdens afspelen krijgt de kast een fractie meer leven. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-arch::before,
html[data-jukebox-page="1"][data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-arch::after{
  opacity:1 !important;
  filter:brightness(1.22) saturate(1.16);
}
html[data-jukebox-page="1"][data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-screen::before{
  opacity:.72;
}
html[data-jukebox-page="1"][data-jukebox-mode="window"] #jukeboxOverlay:has(#jukeboxPlay.is-playing) .jukebox-wood-plinth::before{
  opacity:.70;
}

/* Een bedieningsimpuls laat de ingebouwde lichtbuizen heel kort sterker spreken. */
html[data-jukebox-page="1"][data-jukebox-mode="window"] #jukeboxOverlay:has(.jukebox-control.is-led-pulse) .jukebox-arch::before,
html[data-jukebox-page="1"][data-jukebox-mode="window"] #jukeboxOverlay:has(.jukebox-control.is-led-pulse) .jukebox-arch::after{
  filter:brightness(1.48) saturate(1.28);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.72),
    inset -1px 0 0 rgba(0,0,0,.20),
    0 0 4px var(--jb-led-main),
    0 0 11px var(--jb-led-main),
    0 0 23px var(--jb-led-hot),
    0 0 34px var(--jb-led-soft) !important;
}

@keyframes jbLedTubeBreathe{
  from{opacity:.82;filter:brightness(1.02) saturate(1.08);}
  to{opacity:1;filter:brightness(1.18) saturate(1.15);}
}
@keyframes jbLedScreenBreathe{
  from{opacity:.40;filter:brightness(.96);}
  to{opacity:.66;filter:brightness(1.13);}
}
@keyframes jbUnderglowBreathe{
  from{opacity:.40;transform:scaleX(.94);}
  to{opacity:.64;transform:scaleX(1.04);}
}
@keyframes jbBadgeGlint{
  0%,68%{left:-28%;opacity:0;}
  73%{opacity:.36;}
  84%{left:106%;opacity:.20;}
  85%,100%{left:106%;opacity:0;}
}

/* Arcade en Pride mogen iets meer show hebben; de rest blijft chic/subtiel. */
html[data-look="arcade"][data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-arch::before,
html[data-look="arcade"][data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-arch::after,
html[data-look="pride"][data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-arch::before,
html[data-look="pride"][data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-arch::after{
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.64),
    inset -1px 0 0 rgba(0,0,0,.22),
    0 0 4px var(--jb-led-main),
    0 0 10px var(--jb-led-main),
    0 0 20px var(--jb-led-alt),
    0 0 30px var(--jb-led-soft) !important;
}

/* Gothic: staalwitte binnenrand + bloedrode tube; nooit paars. */
html[data-look="gothic"][data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-screen::before{
  border-color:rgba(205,211,218,.58);
  box-shadow:0 0 4px #d2d7dd,0 0 10px rgba(255,38,60,.38),inset 0 0 9px rgba(255,38,60,.14);
}

@media(prefers-reduced-motion:reduce){
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-arch::before,
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-arch::after,
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-screen::before,
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-head-title::after,
  html[data-jukebox-page="1"][data-jukebox-mode="window"] .jukebox-wood-plinth::before{
    animation:none !important;
  }
}

/* =========================================================
   WURLITZER 5.4 · YOUTUBE CLEAN SWITCH
   YouTube toont bij een nieuw video-id kort eigen titel/branding/controls.
   De jukebox bedient de iframe zelf, dus muisinteractie met de iframe is
   niet nodig. Tijdens het automatische omschakelmoment worden alleen de
   tijdelijke boven-/onderlagen en centrale play/pause-indicator afgedekt.
   De clip blijft in zijn originele 16:9 verhouding: geen crop/zoom.
   ========================================================= */
.jukebox-video-frame{
  isolation:isolate;
}

.jukebox-video-hitshield{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:auto;
  cursor:default;
  background:transparent;
}

.jukebox-video-clean-mask{
  position:absolute;
  inset:0;
  z-index:8;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}

.jukebox-video-clean-mask::before,
.jukebox-video-clean-mask::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  background:#000;
}

/* YouTube titel + kanaal bovenin. */
.jukebox-video-clean-mask::before{
  top:0;
  height:19%;
  background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.96) 68%,rgba(0,0,0,0) 100%);
}

/* YouTube link/Meer video's/logo onderin. */
.jukebox-video-clean-mask::after{
  bottom:0;
  height:20%;
  background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.96) 68%,rgba(0,0,0,0) 100%);
}

.jukebox-video-clean-center{
  position:absolute;
  left:50%;
  top:50%;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--jb-trim) 48%,transparent);
  color:color-mix(in srgb,var(--jb-trim-light) 78%,white);
  background:radial-gradient(circle,rgba(0,0,0,.96) 0 55%,rgba(0,0,0,.76) 70%,transparent 72%);
  box-shadow:0 0 16px rgba(0,0,0,.78),0 0 8px var(--jb-glow);
  font:900 26px/1 Georgia,"Times New Roman",serif;
  opacity:1;
  transition:opacity .18s ease,transform .18s ease;
}

.jukebox-video-frame.is-youtube-switching .jukebox-video-clean-mask{
  opacity:1;
  visibility:visible;
}

.jukebox-video-frame.is-youtube-center-clear .jukebox-video-clean-center{
  opacity:0;
  transform:translate(-50%,-50%) scale(.82);
}

/* De maskers zelf verdwijnen aan het eind zacht, zodat het beeld niet knippert. */
.jukebox-video-frame.is-youtube-center-clear .jukebox-video-clean-mask::before,
.jukebox-video-frame.is-youtube-center-clear .jukebox-video-clean-mask::after{
  animation:jbYoutubeChromeFade 2.1s ease forwards;
}

@keyframes jbYoutubeChromeFade{
  0%,45%{opacity:1;}
  100%{opacity:0;}
}

@media (prefers-reduced-motion:reduce){
  .jukebox-video-clean-mask,
  .jukebox-video-clean-center{
    transition:none;
  }
  .jukebox-video-frame.is-youtube-center-clear .jukebox-video-clean-mask::before,
  .jukebox-video-frame.is-youtube-center-clear .jukebox-video-clean-mask::after{
    animation:none;
    opacity:0;
  }
}