/* Systeem-pagina: spotlight met mini-animaties, nagebouwd jukebox-scherm
   ("See it in action"), drie modellen, goed om te weten, Join the party */

/* ---------- In the Spotlight ---------- */

.spotlight {
  display: grid;
  gap: clamp(28px, 3vw, 40px);
}
@media (min-width: 900px) {
  .spotlight { grid-template-columns: repeat(3, 1fr); }
}
.spot { display: grid; align-content: start; gap: var(--space-3); }
.spot p { margin: 0; color: var(--dj-text); }
.spot .text-link { justify-self: end; margin-top: var(--space-2); }
.spot__title {
  margin: var(--space-3) 0 0;
  color: var(--dj-blue);
  font-size: 1.25rem;
  font-weight: 600;
}
.spot__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  transition: transform 500ms var(--ease-out);
}
.spot__media > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .spot:hover .spot__media { transform: translateY(-4px); }
}

/* Mini: wachtrij zoals op het toestel (donker venster, grijze rijen);
   het eigen nummer wordt wit, krijgt "1cr." en springt naar boven */
.mini-queue {
  position: relative;
  display: grid;
  gap: 8px;
  width: 70%;
  padding: 14px 16px 16px;
  border-radius: 20px;
  background: #1c1c1c;
  box-shadow: 0 18px 30px -14px rgba(30, 30, 30, 0.55);
}
.mini-queue__label {
  color: #9a9a9a;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mini-queue__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: #4b4b4b;
  animation: dj-q-down 5.5s var(--ease-camera) infinite;
}
.mini-queue__row i { width: 7px; height: 7px; border-radius: 50%; background: #8a8a8a; }
.mini-queue__row b { width: 58%; height: 6px; border-radius: 3px; background: #7a7a7a; }
.mini-queue__row--skip { z-index: 1; animation-name: dj-q-up; }
.mini-queue__row--skip b { animation: dj-q-bar 5.5s var(--ease-camera) infinite; }
.mini-queue__cr {
  position: absolute;
  right: -20px;
  bottom: 16px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: #3F8CF5;
  box-shadow: 0 6px 14px -4px rgba(63, 140, 245, 0.7), inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
  color: var(--dj-white);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
  animation: dj-q-cr 5.5s var(--ease-out) infinite;
}
@keyframes dj-q-up {
  0%, 16% { transform: none; background: #4b4b4b; }
  20%, 36% { transform: none; background: #fff; }
  48%, 86% { transform: translateY(-114px); background: #4b4b4b; }
  96%, 100% { transform: none; background: #4b4b4b; }
}
@keyframes dj-q-bar {
  0%, 16% { background: #7a7a7a; }
  20%, 36% { background: #3F8CF5; }
  48%, 100% { background: #7a7a7a; }
}
@keyframes dj-q-down {
  0%, 36% { transform: none; }
  48%, 86% { transform: translateY(38px); }
  96%, 100% { transform: none; }
}
@keyframes dj-q-cr {
  0%, 22% { opacity: 0; transform: translateX(-10px) scale(0.7); }
  27%, 36% { opacity: 1; transform: none; }
  40%, 100% { opacity: 0; transform: scale(0.8); }
}

/* Mini: Party Shuffle zoals op het toestel (verloopkader, paarse plaat,
   8 nummers in 2 kolommen van 4 die door elkaar schuiven, blauwe koopknop) */
.mini-ps {
  width: 88%;
  padding: 5px;
  border-radius: 22px;
  background: linear-gradient(100deg, #A28FF6, #C98AD0 55%, #EC6B95);
  box-shadow: 0 18px 30px -14px rgba(120, 60, 140, 0.45);
}
.mini-ps__in {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ECE6FB, #F1E0F2 50%, #F8DCE6);
}
.mini-ps__head { display: flex; align-items: center; gap: 8px; }
.mini-ps__head i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #A487F0; color: #fff; }
.mini-ps__head svg { width: 14px; height: 14px; }
.mini-ps__head b { width: 38%; height: 7px; border-radius: 4px; background: #C3B1F5; }
.mini-ps__rows { display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 20px); gap: 6px 8px; }
.mini-ps__row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 20px;
  padding: 0 7px 0 4px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 2px 5px rgba(160, 130, 230, 0.35);
  animation: dj-ps-row 6.5s var(--ease-camera) infinite;
  animation-delay: calc(var(--n) * 50ms);
}
.mini-ps__row i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #8a8a8a; }
.mini-ps__row b { width: 38%; height: 4px; border-radius: 2px; background: #3F8CF5; }
.mini-ps__row em { width: 26%; height: 4px; border-radius: 2px; background: #2a2a2a; opacity: 0.8; }
/* Vaste permutatie: elk nummer schuift naar een andere plek (kolom × rij) */
.mini-ps__row:nth-child(1) { --n: 0; --cx: 1; --cy: 2; }
.mini-ps__row:nth-child(2) { --n: 1; --cx: 0; --cy: 2; }
.mini-ps__row:nth-child(3) { --n: 2; --cx: 1; --cy: -2; }
.mini-ps__row:nth-child(4) { --n: 3; --cx: 0; --cy: -3; }
.mini-ps__row:nth-child(5) { --n: 4; --cx: -1; --cy: 1; }
.mini-ps__row:nth-child(6) { --n: 5; --cx: 0; --cy: 2; }
.mini-ps__row:nth-child(7) { --n: 6; --cx: -1; --cy: 0; }
.mini-ps__row:nth-child(8) { --n: 7; --cx: 0; --cy: -2; }
.mini-ps__row:nth-child(3n) b { width: 30%; }
.mini-ps__row:nth-child(3n + 1) em { width: 20%; }
.mini-ps__row:nth-child(4n + 2) b { width: 44%; }
.mini-ps__vinyl {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -30px 0 0 -35px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 2px, #1D1A22 2.5px 11px, #B9A4F5 11.5px 15px, transparent 15.5px),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #A78BF0, #7650D6);
  box-shadow: 0 8px 16px -6px rgba(110, 70, 200, 0.5);
  animation: dj-ps-vinyl 6.5s linear infinite;
}
.mini-ps__buy {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 10px;
  width: 36%;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: #4FA0F5;
  animation: dj-ps-buy 6.5s var(--ease-out) infinite;
}
.mini-ps__buy i { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid #fff; border-radius: 50%; color: #fff; font-size: 0.5625rem; font-style: normal; font-weight: 700; }
.mini-ps__buy b { width: 50%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.85); }
@keyframes dj-ps-vinyl {
  0% { opacity: 0; transform: scale(0.6) rotate(0); }
  6% { opacity: 1; transform: scale(1) rotate(60deg); }
  26% { opacity: 1; transform: scale(1) rotate(420deg); }
  32%, 100% { opacity: 0; transform: scale(0.8) rotate(540deg); }
}
@keyframes dj-ps-row {
  0%, 30% { opacity: 0; transform: translateY(6px); }
  36%, 58% { opacity: 1; transform: none; }
  68%, 90% { opacity: 1; transform: translate(calc(var(--cx) * (100% + 8px)), calc(var(--cy) * 26px)); }
  96%, 100% { opacity: 0; transform: translate(calc(var(--cx) * (100% + 8px)), calc(var(--cy) * 26px)); }
}
@keyframes dj-ps-buy {
  0%, 38% { opacity: 0; transform: scale(0.85); }
  44%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

/* Mini: muurmodel als omtrek; de reclame op het scherm staat centraal,
   met rechtsboven het "AD"-icoon en een timer rond de duur van de reclame */
.mini-ad { position: relative; width: 82%; color: var(--dj-ink); }
.mini-ad__outline { display: block; width: 100%; height: auto; opacity: 0.85; }
.mini-ad__screen {
  position: absolute;
  left: calc(24 / 300 * 100%);
  top: calc(30 / 220 * 100%);
  width: calc(196 / 300 * 100%);
  height: calc(160 / 220 * 100%);
  overflow: hidden;
  border-radius: 6px;
  background: #1e1e1e;
  box-shadow: 0 14px 28px -12px rgba(30, 30, 30, 0.45);
}
.mini-ad__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 8%;
  background: linear-gradient(135deg, #2b94ff, #0063cc);
  color: var(--dj-white);
  font-family: var(--font-label);
  font-size: clamp(1.25rem, 0.8rem + 1.2vw, 1.75rem);
  line-height: 1;
  text-align: center;
  opacity: 0;
  animation: dj-ad-cycle 9s infinite;
}
.mini-ad__slide small { font-family: var(--font-ui); font-size: 0.5em; font-weight: 600; letter-spacing: 0.02em; opacity: 0.9; }
.mini-ad__slide:nth-child(2) { background: linear-gradient(135deg, #D08A1C, #B26A00); animation-delay: 3s; }
.mini-ad__slide:nth-child(3) { background: linear-gradient(135deg, #3a3a3a, #161616); animation-delay: 6s; }
@keyframes dj-ad-cycle {
  0% { opacity: 0; }
  4%, 33% { opacity: 1; }
  37%, 100% { opacity: 0; }
}
.mini-ad__badge { position: absolute; top: 7px; right: 7px; z-index: 1; width: 30px; height: 30px; }
.mini-ad__badge svg { display: block; width: 100%; height: 100%; }
.mini-ad__badge-bg { fill: rgba(20, 20, 20, 0.6); }
.mini-ad__timer {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: dj-ad-timer 3s linear infinite;
}
.mini-ad__badge-in { fill: #cfcfcf; }
.mini-ad__badge text { fill: #262626; font: 800 11px/1 var(--font-ui); letter-spacing: -0.02em; }
/* De ring loopt leeg tijdens één reclame (3 s) */
@keyframes dj-ad-timer {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100; }
}

/* ---------- See it in action ---------- */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(24px, 4vw, 40px);
}

/* Het toestel: smalle zwarte rand rond het scherm */
.jb {
  width: min(100%, 780px);
  padding: clamp(6px, 1vw, 10px);
  border-radius: clamp(18px, 2.6vw, 28px);
  background: linear-gradient(160deg, #2b2b2b, #0d0d0d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 30px 60px -20px rgba(30, 30, 30, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Het scherm schaalt als één geheel: 1 --u = 1 pixel van de echte UI (1280 × 1025) */
.jb__screen {
  --u: calc(100cqw / 1280);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1280 / 1025;
  overflow: hidden;
  border-radius: clamp(12px, 1.8vw, 20px);
  background: linear-gradient(90deg, #E655F4 0%, #EE5FA6 28%, #F3676E 52%, #F47F5C 74%, #F49D50 100%);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}
.jb svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jb svg.fill, .jb svg .fill { fill: currentColor; stroke: none; }

.jb__ui {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: calc(var(--u) * 130) minmax(0, 1fr) calc(var(--u) * 120);
  row-gap: calc(var(--u) * 28);
  padding: calc(var(--u) * 30) calc(var(--u) * 35) calc(var(--u) * 48) calc(var(--u) * 25);
  transition: filter 500ms var(--ease-out), transform 500ms var(--ease-out);
}
/* Wachtrij open: de rest vervaagt, zoals op het toestel */
.jb__screen.is-modal .jb__ui { filter: blur(calc(var(--u) * 9)) saturate(1.05); transform: scale(1.01); }

/* Bovenbalk */
.jb__top { display: flex; gap: calc(var(--u) * 20); padding-left: calc(var(--u) * 10); }
.jb__tabs, .jb__account {
  display: flex;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 65);
  background: rgba(255, 255, 255, 0.2);
}
.jb__tabs { flex: 1; min-width: 0; }
.jb__tab {
  display: grid;
  flex: 1;
  place-content: center;
  justify-items: center;
  gap: calc(var(--u) * 6);
  min-width: 0;
  border-radius: calc(var(--u) * 55);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(255, 255, 255, 0.18);
  font-size: calc(var(--u) * 20);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background 350ms ease, box-shadow 350ms ease;
}
.jb__tab svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); stroke-width: 2.2; }
.jb__tab.is-active {
  background: radial-gradient(120% 140% at 30% 20%, #5a4452, #22171c 70%);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 16) rgba(40, 10, 30, 0.35), inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.15);
}
.jb__account { flex: none; align-items: center; gap: calc(var(--u) * 40); padding-inline: calc(var(--u) * 12) calc(var(--u) * 24); }
.jb__user {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 110);
  height: calc(var(--u) * 110);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.jb__user > svg.fill { width: calc(var(--u) * 42); height: calc(var(--u) * 42); }
.jb__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.jb__ring circle { stroke-width: 3.4; }
.jb__ring circle:first-child { stroke: rgba(255, 255, 255, 0.35); }
.jb__ring circle:last-child { stroke: #4CD964; stroke-dasharray: 78 100; stroke-linecap: butt; transition: stroke-dasharray 300ms linear; }
.jb__dj {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 82);
  height: calc(var(--u) * 82);
  border-radius: 50%;
  background: #fff;
}
.jb__dj i {
  width: 62%;
  height: 52%;
  background: linear-gradient(90deg, #F3676E, #F49D50);
  -webkit-mask: url("../assets/brand/dj-letters.svg") center / contain no-repeat;
  mask: url("../assets/brand/dj-letters.svg") center / contain no-repeat;
}

/* Midden: inhoud + knoppen rechts */
.jb__mid { position: relative; min-height: 0; }
.jb__body {
  position: absolute;
  inset: 0 calc(var(--u) * 120) 0 calc(var(--u) * 130);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: calc(var(--u) * 28);
  padding-top: calc(var(--u) * 20);
}
.jb__side {
  position: absolute;
  top: calc(var(--u) * 27);
  right: 0;
  display: grid;
  gap: calc(var(--u) * 30);
}
.jb__sidebtn {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--u) * 2);
  width: calc(var(--u) * 90);
  height: calc(var(--u) * 90);
  border-radius: calc(var(--u) * 14);
  background: #fff;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(120, 30, 60, 0.15);
  color: #3F8CF5;
  font-size: calc(var(--u) * 19);
  text-transform: uppercase;
}
.jb__sidebtn svg { width: calc(var(--u) * 46); height: calc(var(--u) * 46); stroke-width: 2.2; }

/* Onderbalk */
.jb__bottom { display: flex; align-items: center; gap: calc(var(--u) * 25); }
.jb__now {
  display: flex;
  flex: 1;
  align-items: center;
  gap: calc(var(--u) * 12);
  min-width: 0;
  height: 100%;
  padding: calc(var(--u) * 10) calc(var(--u) * 30) calc(var(--u) * 10) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 60);
  background: linear-gradient(90deg, #120a0d, #1e1216);
}
.jb__cover {
  flex: none;
  align-self: stretch;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8a8a8a, #a2a2a2, #7c7c7c, #8a8a8a);
  animation: dj-spin 8s linear infinite;
}
@keyframes dj-spin { to { transform: rotate(360deg); } }
.jb__track { display: grid; flex: 1; min-width: 0; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 22); font-weight: 600; }
.jb__track b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.jb__progress { display: block; height: calc(var(--u) * 20); border-radius: calc(var(--u) * 10); background: #fff; overflow: hidden; }
.jb__progress i { display: block; height: 100%; width: 60%; border-radius: inherit; background: linear-gradient(90deg, #3F8CF5, #6FE3FA); animation: dj-progress 30s linear infinite; }
@keyframes dj-progress { from { width: 40%; } to { width: 96%; } }
.jb__times { display: flex; justify-content: space-between; font-size: calc(var(--u) * 21); font-weight: 500; }
.jb__songs {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(var(--u) * 6);
  align-self: center;
  margin-bottom: calc(var(--u) * 10);
  padding: calc(var(--u) * 4) calc(var(--u) * 26) calc(var(--u) * 4) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 20);
  background: #3F8CF5;
  font-size: calc(var(--u) * 17);
  font-weight: 500;
  transition: transform 250ms var(--ease-out);
}
.jb__songs svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); padding: calc(var(--u) * 3); border-radius: 50%; background: #fff; color: #3F8CF5; stroke-width: 2.6; }
.jb__credits, .jb__pay {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 120);
  border-radius: 50%;
}
.jb__credits { background: radial-gradient(circle at 40% 35%, #34444f, #15191d 70%); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0, 0, 0, 0.25); }
.jb__credits .jb__ring { inset: calc(var(--u) * 4); width: auto; height: auto; }
.jb__credits .jb__ring circle:first-child { stroke: #0e1216; }
.jb__credits .jb__ring circle:last-child { stroke-dasharray: 72 100; transition: stroke-dasharray 700ms var(--ease-out); }
.jb__credits b { position: relative; font-size: calc(var(--u) * 58); font-weight: 400; line-height: 1; transition: transform 350ms var(--ease-out); }
.jb__credits.is-bump b { transform: scale(1.35); }
.jb__pay {
  align-content: center;
  gap: calc(var(--u) * 2);
  background: radial-gradient(circle at 40% 30%, #5AA8FF, #2A78E8 75%);
  box-shadow: inset 0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(255, 255, 255, 0.3), 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(20, 60, 160, 0.3);
  font-size: calc(var(--u) * 17);
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
}
.jb__pay svg { width: calc(var(--u) * 50); height: calc(var(--u) * 50); stroke-width: 1.8; }

/* ---------- Inhoud in het scherm ---------- */

.jb-hero {
  margin: calc(var(--u) * 20) 0 0;
  font-size: calc(var(--u) * 50);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  animation: dj-pop 600ms var(--ease-out) both;
}
.jb-toast {
  padding: calc(var(--u) * 18) calc(var(--u) * 46);
  border-radius: calc(var(--u) * 40);
  background: rgba(255, 255, 255, 0.28);
  font-size: calc(var(--u) * 30);
  font-weight: 600;
  animation: dj-pop 600ms 120ms var(--ease-out) both;
}
.jb-toast em { color: #3F8CF5; font-style: normal; }
@keyframes dj-pop { from { opacity: 0; transform: scale(0.9) translateY(calc(var(--u) * 10)); } }

.jb-panel {
  display: grid;
  gap: calc(var(--u) * 20);
  width: 100%;
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 40);
  background: rgba(255, 255, 255, 0.26);
  animation: dj-item-in 450ms var(--ease-out) both;
}
.jb-panel--row { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 50); padding-left: calc(var(--u) * 90); }

/* Kaartjes zoals de suggesties op het toestel */
.jb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 20); }
.jb-cards--one { grid-template-columns: 1fr; }
.jb-card {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  min-width: 0;
  padding: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 16);
  background: #F3F3F3;
  box-shadow: 0 calc(var(--u) * 4) 0 rgba(0, 0, 0, 0.08);
  color: #1b1b1b;
  font-size: calc(var(--u) * 19);
  font-weight: 600;
  animation: dj-item-in 450ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.jb-card__img {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--u) * 68);
  height: calc(var(--u) * 68);
  border-radius: calc(var(--u) * 12);
  background: var(--c, #7a7a7a);
  color: rgba(255, 255, 255, 0.9);
}
.jb-card__img svg { width: 55%; height: 55%; stroke-width: 1.8; }
.jb-card__txt { display: grid; gap: calc(var(--u) * 4); min-width: 0; }
.jb-card__txt b, .jb-card__txt small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: inherit; }
.jb-card__txt b { color: #3F8CF5; font-weight: 600; }
@keyframes dj-item-in { from { opacity: 0; transform: translateY(calc(var(--u) * 12)); } }

/* Knipperende cursor in de zoekbalk */
.jb-search__caret { width: calc(var(--u) * 3); height: calc(var(--u) * 32); background: #3F8CF5; animation: dj-caret 1s steps(1) infinite; }
@keyframes dj-caret { 50% { opacity: 0; } }


/* Blauwe knop zoals "Suggesties" */
.jb-btn {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: calc(var(--u) * 24);
  padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 40);
  border-radius: calc(var(--u) * 36);
  background: linear-gradient(180deg, #5AA2FF, #3F8CF5);
  box-shadow: 0 calc(var(--u) * 4) 0 #2F6FCC, 0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(20, 60, 160, 0.25);
  font-size: calc(var(--u) * 22);
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.jb-btn__icon { display: grid; place-items: center; width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%; background: #fff; color: #3F8CF5; }
.jb-btn__icon svg { width: 62%; height: 62%; stroke-width: 2.6; }
.jb-btn.is-press { transform: translateY(calc(var(--u) * 3)); box-shadow: 0 calc(var(--u) * 1) 0 #2F6FCC, 0 calc(var(--u) * 4) calc(var(--u) * 8) rgba(20, 60, 160, 0.25); }
.jb-btn.is-spin .jb-btn__icon svg { animation: dj-spin 700ms var(--ease-camera); }

/* ---------- Wachtrij-venster ---------- */

.jb__modal {
  position: absolute;
  left: calc(var(--u) * 35);
  top: calc(var(--u) * 175);
  width: calc(var(--u) * 920);
  height: calc(var(--u) * 800);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(var(--u) * 20);
  padding: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 60);
  background: #000;
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 60) rgba(40, 0, 20, 0.35);
  font-size: calc(var(--u) * 22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--u) * 30)) scale(0.97);
  transition: opacity 400ms ease, transform 500ms var(--ease-out), visibility 0s 500ms;
}
.jb__screen.is-modal .jb__modal { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.q-panel {
  display: grid;
  grid-template-columns: calc(var(--u) * 175) calc(var(--u) * 30) minmax(0, calc(var(--u) * 520)) 1fr;
  align-content: start;
  align-items: center;
  row-gap: calc(var(--u) * 15);
  padding: calc(var(--u) * 10) calc(var(--u) * 20) calc(var(--u) * 10) calc(var(--u) * 40);
  border-radius: calc(var(--u) * 50);
  background: #4B4B4B;
}
.q-panel--queue { padding-top: calc(var(--u) * 15); }
.q-label { display: flex; align-items: center; gap: calc(var(--u) * 12); color: #fff; font-weight: 600; white-space: nowrap; }
.q-label svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); flex: none; }
.q-label--muted { color: #B9B9B9; }
.q-label--now { color: #4AA8F5; }
.q-label__dot { display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); flex: none; border-radius: 50%; background: currentColor; }
.q-label__dot svg { width: 60%; height: 60%; color: #4B4B4B; stroke-width: 3; }
.q-label--now .q-label__dot svg { color: #4B4B4B; }
.q-num { color: #9A9A9A; font-size: calc(var(--u) * 16); font-weight: 600; text-align: center; }
.q-slot { position: relative; height: calc(var(--u) * 50); }
.q-pill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 25);
  background: #6A6A6A;
  color: #fff;
  font-size: calc(var(--u) * 21);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 300ms ease, color 300ms ease;
}
.q-pill span { overflow: hidden; max-width: 70%; text-overflow: ellipsis; }
.q-pill--muted { color: #C9C9C9; }
.q-pill--now { color: #4AA8F5; }
.q-time {
  position: absolute;
  right: calc(var(--u) * 20);
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  transform: translateY(-50%);
  color: #8F8F8F;
  font-size: calc(var(--u) * 16);
  font-weight: 600;
  pointer-events: none;
}
.q-time svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); opacity: 0.5; }
.q-time--now { color: #4AA8F5; font-size: calc(var(--u) * 18); }
.q-slot.is-sel .q-pill { background: #fff; color: #3F8CF5; }
.q-slot.is-sel .q-time { color: #6d6d6d; }
.q-slot.is-sel .q-time svg { opacity: 0.8; }
/* Skip-icoon op het nummer dat voorgesprongen is */
.q-skipicon { position: absolute; right: calc(var(--u) * 106); top: 50%; width: calc(var(--u) * 32); height: calc(var(--u) * 32); transform: translateY(-50%); color: #fff; animation: dj-pop 500ms var(--ease-out) both; }
.q-extra { display: flex; justify-content: center; }
.q-me {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
  border-radius: 50%;
  background: #3F8CF5;
  box-shadow: 0 0 0 calc(var(--u) * 3) #fff inset;
  color: #fff;
}
.q-me svg { width: 70%; height: 70%; }
/* De "1cr."-knop naast het gekozen nummer */
.q-cr {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  margin-left: calc(var(--u) * -6);
  padding: calc(var(--u) * 7) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 25);
  background: #3F8CF5;
  box-shadow: 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, 0.55) inset;
  color: #fff;
  font-size: calc(var(--u) * 24);
  font-weight: 800;
  animation: dj-cr-in 450ms var(--ease-out) both;
  transition: transform 200ms var(--ease-out), opacity 300ms ease;
}
.q-cr small { font-size: 0.8em; }
.q-cr svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.q-cr.is-press { transform: scale(0.9); }
.q-cr.is-gone { opacity: 0; transform: scale(0.8); }
@keyframes dj-cr-in { from { opacity: 0; transform: translateX(calc(var(--u) * -30)) scale(0.8); } }

.q-now {
  display: grid;
  grid-template-columns: calc(var(--u) * 100) minmax(0, calc(var(--u) * 600)) auto;
  column-gap: calc(var(--u) * 20);
  align-items: center;
  padding: 0 calc(var(--u) * 20) calc(var(--u) * 4) calc(var(--u) * 10);
  font-weight: 600;
}
.q-now .jb__cover { grid-row: span 3; width: calc(var(--u) * 100); height: calc(var(--u) * 100); }
.q-now .jb__progress { grid-column: 2; grid-row: 2; }
.q-now .jb__songs { grid-row: 2; grid-column: 3; margin: 0; }
.q-now small { grid-column: 2; grid-row: 3; font-size: calc(var(--u) * 21); font-weight: 500; }
.q-now > span:nth-child(2) { grid-column: 2; grid-row: 1; }

/* ---------- "Vinger" ---------- */
/* Positie (buitenste span) en indrukken (<i>) zijn gescheiden, zodat een tik
   nooit de beweging onderbreekt. Beide worden in systeem.js met WAAPI geanimeerd. */
.jb__finger {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  margin: calc(var(--u) * -32) 0 0 calc(var(--u) * -32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  will-change: transform;
}
.jb__finger.is-on { opacity: 1; }
.jb__finger i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 calc(var(--u) * 3) rgba(255, 255, 255, 0.85), 0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(0, 0, 0, 0.22);
}
.jb__ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--u) * 2.5) #fff;
  opacity: 0;
}

/* ---------- Party Shuffle: playlist-scherm ---------- */


.pl-head {
  display: grid;
  grid-template-columns: calc(var(--u) * 137) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 35);
  width: 100%;
  animation: dj-item-in 450ms var(--ease-out) both;
}
.pl-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: calc(var(--u) * 7) solid #fff;
  border-radius: calc(var(--u) * 18);
  background: #3a3a3a;
  font-family: var(--font-label);
  font-size: calc(var(--u) * 38);
  font-weight: 400;
  line-height: 0.95;
  text-align: center;
}
.pl-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
  min-width: 0;
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 30);
  background: rgba(255, 255, 255, 0.22);
  font-size: calc(var(--u) * 40);
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.pl-title > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.ps-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 6) calc(var(--u) * 22) calc(var(--u) * 6) calc(var(--u) * 7);
  border-radius: calc(var(--u) * 30);
  background: linear-gradient(90deg, #A08CF5, #EC6B95);
  box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, 0.25), 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(90, 40, 120, 0.2);
  color: #fff;
  font-size: calc(var(--u) * 22);
  font-weight: 600;
  text-transform: none;
}
.ps-btn__icon { display: grid; place-items: center; width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: 50%; background: #fff; color: #A08CF5; }
.ps-btn__icon svg { width: 62%; height: 62%; stroke-width: 2.6; }
.pl-back {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 12) calc(var(--u) * 26) calc(var(--u) * 12) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 32);
  background: #fff;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(90, 40, 120, 0.15);
  color: #3F8CF5;
  font-size: calc(var(--u) * 24);
  font-weight: 600;
}
.pl-back svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.pl-count {
  justify-self: stretch;
  padding: 0 calc(var(--u) * 12) calc(var(--u) * 8);
  border-bottom: calc(var(--u) * 2) solid rgba(255, 255, 255, 0.55);
  font-size: calc(var(--u) * 20);
  font-weight: 700;
  text-align: right;
  animation: dj-item-in 450ms 80ms var(--ease-out) both;
}
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 20); width: 100%; }
.pl-grid .jb-card { position: relative; height: calc(var(--u) * 80); }
.pl-grid .jb-card__img { width: calc(var(--u) * 68); height: calc(var(--u) * 68); background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #1b1b1b)); }
.pl-badge { position: absolute; right: calc(var(--u) * 10); width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.pl-badge--star { top: calc(var(--u) * 6); color: #F5C33B; }
.pl-badge--heart { bottom: calc(var(--u) * 6); color: #E8445E; }
.pl-badge--fire { top: calc(var(--u) * 6); color: #F07A2E; }
.pl-grid > .pl-pager { grid-column: 3; }
.pl-pager { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 20); animation: dj-item-in 450ms 600ms var(--ease-out) both; }
.pl-pager span {
  display: grid;
  place-items: center;
  border-radius: calc(var(--u) * 40);
  background: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
}
.pl-pager span:last-child { background: linear-gradient(180deg, #5AA2FF, #3F8CF5); color: #fff; box-shadow: 0 calc(var(--u) * 4) 0 #2F6FCC; }
.pl-pager svg { width: calc(var(--u) * 40); height: calc(var(--u) * 40); stroke-width: 3; }

/* ---------- Party Shuffle: venster ---------- */

.jb__modal--ps {
  left: calc(var(--u) * 93);
  top: calc(var(--u) * 56);
  width: calc(var(--u) * 1101);
  height: calc(var(--u) * 750);
  display: block;
  padding: calc(var(--u) * 29);
  border-radius: calc(var(--u) * 96);
  background: linear-gradient(100deg, #A28FF6, #C98AD0 55%, #EC6B95);
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 60) rgba(80, 20, 90, 0.3);
  color: #A487F0;
}
.ps {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  padding: calc(var(--u) * 33) calc(var(--u) * 38);
  border-radius: calc(var(--u) * 68);
  background: linear-gradient(135deg, #ECE6FB, #F1E0F2 50%, #F8DCE6);
}
.ps__head { display: flex; align-items: center; gap: calc(var(--u) * 28); }
.ps__icon { display: grid; flex: none; place-items: center; width: calc(var(--u) * 100); height: calc(var(--u) * 100); border-radius: 50%; background: #A487F0; color: #fff; }
.ps__icon svg { width: 62%; height: 62%; stroke-width: 2.8; }
.ps__title { display: grid; gap: calc(var(--u) * 4); }
.ps__title b { font-size: calc(var(--u) * 46); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.ps__title small { color: #B39AF0; font-size: calc(var(--u) * 24); font-weight: 600; }
.ps__re {
  position: absolute;
  top: calc(var(--u) * 38);
  right: calc(var(--u) * 38);
}
.ps-btn--big {
  justify-content: center;
  gap: calc(var(--u) * 50);
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 70);
  border-radius: calc(var(--u) * 40);
  box-shadow: 0 calc(var(--u) * 3) 0 rgba(150, 60, 110, 0.35);
  font-size: calc(var(--u) * 21);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: transform 200ms var(--ease-out);
}
.ps-btn--big .ps-btn__icon { width: calc(var(--u) * 40); height: calc(var(--u) * 40); background: rgba(255, 255, 255, 0.75); color: #E47AA0; }
.ps-btn--big.is-spin .ps-btn__icon svg { animation: dj-spin 700ms var(--ease-camera); }
.ps__stage { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 0; }
.ps__stage > * { animation: dj-fade-in 400ms var(--ease-out) both; }
@keyframes dj-fade-in { from { opacity: 0; } }

/* Draaiende plaat */
.ps__spin { display: grid; justify-items: center; gap: calc(var(--u) * 40); }
.jb svg.ps__vinyl { fill: initial; stroke: none; }
.ps__vinyl { width: calc(var(--u) * 300); height: calc(var(--u) * 300); animation: dj-spin 1.6s linear infinite; filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(110, 70, 200, 0.3)); }
.ps__spin p { margin: 0; font-size: calc(var(--u) * 24); font-weight: 600; }

/* Gekozen nummers */
.ps__result { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: calc(var(--u) * 50); width: 100%; }
.ps__list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 60); row-gap: calc(var(--u) * 26); width: 100%; }
.ps-row { display: flex; align-items: center; gap: calc(var(--u) * 14); min-width: 0; animation: dj-item-in 400ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.ps-row__n { flex: none; width: calc(var(--u) * 28); color: #1b1b1b; font-size: calc(var(--u) * 20); font-weight: 700; }
.ps-row__pill {
  display: flex;
  flex: 1;
  align-items: center;
  gap: calc(var(--u) * 12);
  min-width: 0;
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 25);
  background: #fff;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 8) rgba(160, 130, 230, 0.35);
  color: #1b1b1b;
  font-size: calc(var(--u) * 19);
  font-weight: 600;
  white-space: nowrap;
}
.ps-row__pill i { flex: none; width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; background: #7d7d7d; }
.ps-row__pill span { overflow: hidden; text-overflow: ellipsis; }
.ps-row__pill b { color: #3F8CF5; font-weight: 600; }
.ps-buy {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 56);
  width: calc(var(--u) * 340);
  padding: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 42);
  background: #4FA0F5;
  box-shadow: 0 calc(var(--u) * 3) 0 #2F6FCC;
  color: #fff;
  font-size: calc(var(--u) * 26);
  font-weight: 600;
  transition: transform 200ms var(--ease-out);
}
.ps-buy b { display: grid; place-items: center; width: calc(var(--u) * 58); height: calc(var(--u) * 58); border: calc(var(--u) * 4) solid #fff; border-radius: 50%; font-weight: 500; }
.is-press { transform: scale(0.95); }

/* Bevestiging */
.ps__done { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: calc(var(--u) * 24); width: 100%; }
.ps__done > p { margin: 0; color: #B39AF0; font-size: calc(var(--u) * 22); font-weight: 600; text-transform: uppercase; }
.ps__toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 30);
  width: calc(var(--u) * 800);
  max-width: 100%;
  padding: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 36);
  border-radius: calc(var(--u) * 40);
  background: rgba(255, 255, 255, 0.6);
  color: #4F86EE;
  font-size: calc(var(--u) * 24);
  white-space: nowrap;
  font-weight: 600;
}
.ps__open {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 4) calc(var(--u) * 18) calc(var(--u) * 4) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 22);
  background: #3F8CF5;
  color: #fff;
  font-size: calc(var(--u) * 18);
}
.ps__open svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); padding: calc(var(--u) * 4); border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: #3F8CF5; }
.ps__done .ps-btn--big { margin-top: calc(var(--u) * 60); }

/* ---------- Scènes zonder zijknoppen (Zoeken, Party Shuffle, Mobile Pay, Daily Bonus) ---------- */
.jb__screen:not([data-scene="skip"]) .jb__side { display: none; }
.jb__screen:not([data-scene="skip"]) .jb__body { inset: 0 calc(var(--u) * 5); gap: calc(var(--u) * 18); padding-top: calc(var(--u) * 4); }

/* ---------- Zoeken ---------- */
.sr-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: calc(var(--u) * 34); width: 100%; animation: dj-item-in 400ms var(--ease-out) both; }
.sr-field {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  height: calc(var(--u) * 80);
  padding: 0 calc(var(--u) * 30);
  border: calc(var(--u) * 5) solid #fff;
  border-radius: calc(var(--u) * 45);
  background: rgba(70, 25, 25, 0.82);
  font-size: calc(var(--u) * 34);
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.sr-field svg { flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); stroke-width: 2.6; }
.sr-field .jb-search__caret { background: #fff; height: calc(var(--u) * 38); }
.sr-x { display: grid; place-items: center; width: calc(var(--u) * 50); height: calc(var(--u) * 50); border-radius: 50%; background: #fff; color: #E0503C; }
.sr-x svg { width: 55%; height: 55%; stroke-width: 3.4; }
.sr-count {
  padding: calc(var(--u) * 8) calc(var(--u) * 28);
  border: calc(var(--u) * 3) solid rgba(255, 255, 255, 0.85);
  border-radius: calc(var(--u) * 30);
  font-size: calc(var(--u) * 21);
  text-transform: uppercase;
  white-space: nowrap;
}
.sr-count.is-bump { animation: dj-pop 450ms var(--ease-out); }

/* Toetsenbord (AZERTY + cijfers) */
.kb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 60);
  width: 100%;
  margin-top: calc(var(--u) * 6);
  animation: dj-kb-in 500ms var(--ease-out) both;
}
@keyframes dj-kb-in { from { opacity: 0; transform: translateY(calc(var(--u) * 80)); } }
.kb__letters, .kb__nums { display: grid; gap: calc(var(--u) * 12); }
.kb__letters { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.kb__nums { grid-template-columns: repeat(3, calc(var(--u) * 70)); }
.kb span {
  display: grid;
  place-items: center;
  height: calc(var(--u) * 68);
  border-radius: calc(var(--u) * 12);
  background: #fff;
  box-shadow: 0 calc(var(--u) * 3) 0 rgba(90, 30, 60, 0.18);
  color: #111;
  font-family: Arial, var(--font-ui);
  font-size: calc(var(--u) * 38);
  font-weight: 400;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.kb span.is-hit { background: #3F8CF5; color: #fff; transform: translateY(calc(var(--u) * 2)); }
.kb .kb__space { grid-column: 2 / span 7; }
.kb .kb__back { grid-column: span 2; color: #3F8CF5; }
.kb .kb__back svg { width: calc(var(--u) * 44); height: calc(var(--u) * 44); stroke-width: 3; }
.pl-grid--kb .jb-card { height: calc(var(--u) * 76); }

/* Kopjes per tabblad */
.vw-head { display: flex; align-items: center; gap: calc(var(--u) * 30); width: 100%; animation: dj-item-in 400ms var(--ease-out) both; }
.vw-head h4 { margin: 0; font-size: calc(var(--u) * 62); font-weight: 800; letter-spacing: -0.01em; line-height: 1; text-transform: uppercase; }
.vw-icon { display: grid; flex: none; place-items: center; width: calc(var(--u) * 96); height: calc(var(--u) * 96); border-radius: 50%; color: #fff; }
.vw-icon svg { width: 56%; height: 56%; }
.vw-icon--new { width: calc(var(--u) * 92); height: calc(var(--u) * 92); border-radius: 0; background: none; }
.vw-icon--new svg { width: 100%; height: 100%; }
.vw-sub { display: flex; justify-content: space-between; width: 100%; font-size: calc(var(--u) * 21); text-transform: uppercase; animation: dj-item-in 400ms 60ms var(--ease-out) both; }
.vw-sub span + span { text-transform: none; }
.vw-sub svg { display: inline-block; width: calc(var(--u) * 24); height: calc(var(--u) * 24); margin-right: calc(var(--u) * 6); vertical-align: -0.15em; color: #F5C33B; }

/* Artiesten: letterbalk */
.abc-head { display: grid; grid-template-columns: calc(var(--u) * 118) minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 40); width: 100%; animation: dj-item-in 400ms var(--ease-out) both; }
.abc-head__icon { display: grid; place-items: center; aspect-ratio: 1; border: calc(var(--u) * 5) solid #fff; border-radius: calc(var(--u) * 18); background: #2a1c24; }
.abc-head__icon svg { width: 72%; height: 72%; stroke-width: 1.6; }
.abc { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: calc(var(--u) * 10) calc(var(--u) * 12); }
.abc span {
  display: grid;
  place-items: center;
  height: calc(var(--u) * 42);
  border: calc(var(--u) * 2) solid rgba(255, 255, 255, 0.85);
  border-radius: calc(var(--u) * 10);
  background: #2a1c24;
  font-size: calc(var(--u) * 22);
}
.abc .is-on { background: #3F8CF5; border-color: #3F8CF5; }
.jb-card__img--person { background: #fff; color: #3F8CF5; box-shadow: inset 0 0 0 calc(var(--u) * 4) #3F8CF5; border-radius: 50%; }
.jb-card__img--person svg { width: 60%; height: 60%; }
.jb-card__chev { margin-left: auto; padding-right: calc(var(--u) * 16); color: #3F8CF5; }
.jb-card__chev svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); stroke-width: 2.6; }
.jb-card__txt small { color: #1b1b1b; font-weight: 500; }

/* Genres */
.gn-head { display: grid; grid-template-columns: calc(var(--u) * 150) minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 30); width: 100%; animation: dj-item-in 400ms var(--ease-out) both; }
.gn-head .vw-icon { width: calc(var(--u) * 150); height: calc(var(--u) * 150); background: #3F8CF5; }
.gn-head h4 { margin: 0 0 calc(var(--u) * 14); font-size: calc(var(--u) * 58); font-weight: 800; line-height: 1; text-transform: uppercase; }
.gn-toggle { display: inline-flex; gap: calc(var(--u) * 28); padding: calc(var(--u) * 7); border-radius: calc(var(--u) * 14); background: #2a1c24; }
.gn-toggle span { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 6) calc(var(--u) * 20); border-radius: calc(var(--u) * 10); background: #8f8a92; font-size: calc(var(--u) * 19); text-transform: uppercase; }
.gn-toggle span:first-child { background: #3F8CF5; }
.gn-count { align-self: end; font-size: calc(var(--u) * 21); }
.gn-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 20); width: 100%; }
.gn-tile {
  position: relative;
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 26);
  background: #F3F3F3;
  box-shadow: 0 calc(var(--u) * 4) 0 rgba(0, 0, 0, 0.08);
  animation: dj-item-in 400ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.gn-tile i { justify-self: start; display: grid; place-items: center; width: calc(var(--u) * 84); height: calc(var(--u) * 84); margin-left: calc(var(--u) * 6); border-radius: calc(var(--u) * 18); background: var(--c); color: #fff; }
.gn-tile i svg { width: 60%; height: 60%; stroke-width: 1.8; }
.gn-tile > svg { position: absolute; top: calc(var(--u) * 34); right: calc(var(--u) * 14); width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: #3F8CF5; stroke-width: 2.6; }
.gn-tile b { color: #3F8CF5; font-size: calc(var(--u) * 20); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.gn-tile small { color: #6d6d6d; font-size: calc(var(--u) * 16); font-weight: 600; }
.gn-grid .pl-pager { grid-column: span 2; align-self: center; height: calc(var(--u) * 80); }

/* Nieuw + Top */
.pl-badge--new { top: calc(var(--u) * 6); width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.tl-ic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 72);
  height: calc(var(--u) * 72);
  border-radius: calc(var(--u) * 10);
  background: var(--c);
  color: #fff;
  font-family: var(--font-label);
  font-size: calc(var(--u) * 40);
  line-height: 0.85;
  text-align: center;
}
.tl-ic small { font-size: 0.45em; }
.tl-ic svg { width: 60%; height: 60%; }
.tl-card b { text-transform: uppercase; }
.pl-pager--off span:last-child { background: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.6); box-shadow: none; }

/* ---------- Mobile Pay-venster ---------- */
.jb__modal--pay {
  left: calc(var(--u) * 140);
  top: calc(var(--u) * 194);
  width: calc(var(--u) * 1000);
  height: calc(var(--u) * 602);
  display: block;
  padding: calc(var(--u) * 19);
  border-radius: calc(var(--u) * 58);
  background: linear-gradient(120deg, #B6A6FA, #E9A6C2 35%, #F3B6A0 60%, #F6EE92);
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 60) rgba(80, 20, 90, 0.3);
  color: #3F8CF5;
}
.pay {
  display: grid;
  grid-template-columns: calc(var(--u) * 420) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: calc(var(--u) * 106);
  height: 100%;
  padding: calc(var(--u) * 42) calc(var(--u) * 58) calc(var(--u) * 22) calc(var(--u) * 84);
  border-radius: calc(var(--u) * 42);
  background: linear-gradient(135deg, #F1EEFB, #FBF1F0 50%, #FFFBEA);
}
.pay__title { grid-column: 1; margin: 0 0 calc(var(--u) * 20); font-size: calc(var(--u) * 40); font-weight: 800; text-align: center; text-transform: uppercase; }
.pay__opts { grid-column: 1; grid-row: 2; display: grid; align-content: start; gap: calc(var(--u) * 16); }
.pay-opt {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 26);
  height: calc(var(--u) * 80);
  padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 8);
  border: calc(var(--u) * 3) solid #d4d4d4;
  border-radius: calc(var(--u) * 16);
  background: #fff;
  font-size: calc(var(--u) * 25);
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}
.pay-opt i { display: grid; flex: none; place-items: center; width: calc(var(--u) * 60); height: calc(var(--u) * 60); border: calc(var(--u) * 4) solid #cfcfcf; border-radius: 50%; color: #b5b5b5; }
.pay-opt i svg { width: 50%; height: 50%; stroke-width: 2.4; }
.pay-opt small { margin-left: auto; color: #333; font-size: calc(var(--u) * 19); }
.pay-opt.is-on { border-color: #3A80F4; background: #3A80F4; color: #fff; }
.pay-opt.is-on i { border-color: #fff; background: #3A80F4; color: #fff; }
.pay-opt.is-on small { color: #fff; }
.pay__side { grid-column: 2; grid-row: 1 / span 2; display: grid; align-content: center; justify-items: start; gap: calc(var(--u) * 34); }
.pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 50);
  width: calc(var(--u) * 323);
  height: calc(var(--u) * 145);
  border-radius: calc(var(--u) * 75);
  background: #C4C4C4;
  box-shadow: 0 calc(var(--u) * 4) 0 #a9a9a9;
  color: #fff;
  font-size: calc(var(--u) * 28);
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 200ms var(--ease-out);
}
.pay-btn svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); stroke-width: 2.6; }
.pay-btn.is-on { background: #3A80F4; box-shadow: 0 calc(var(--u) * 4) 0 #2A63C8; }
.pay-qr { width: calc(var(--u) * 323); aspect-ratio: 1; padding: calc(var(--u) * 50); border: calc(var(--u) * 14) solid #F5DE4A; border-radius: calc(var(--u) * 22); background: #fff; animation: dj-pop 450ms var(--ease-out) both; }
.pay-qr svg { width: 100%; height: 100%; }
.jb svg.pay-qr__code { fill: #000; stroke: none; }
.pay-pending { display: flex; align-items: center; gap: calc(var(--u) * 14); animation: dj-item-in 400ms 150ms var(--ease-out) both; }
.pay-pending__bar {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 323);
  height: calc(var(--u) * 70);
  overflow: hidden;
  border-radius: calc(var(--u) * 35);
  background: #9a9a9a;
  color: #fff;
  font-size: calc(var(--u) * 28);
  font-weight: 600;
}
.pay-pending__bar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: #3A80F4; transition: width 400ms linear, background-color 300ms ease; }
.pay-pending__bar span { position: relative; }
.pay-pending.is-done .pay-pending__bar i { background: #4CB94A; }
.pay-pending > svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); padding: calc(var(--u) * 6); border-radius: 50%; background: #9a9a9a; color: #fff; stroke-width: 3.2; }
.pay__logos { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 40); color: #9a9a9a; font-size: calc(var(--u) * 20); font-weight: 700; }
.pay__logos span:first-child { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 15); }
.pay__logos svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.pay__logos span:last-child { font-family: Arial, sans-serif; font-weight: 900; letter-spacing: -0.02em; }

/* ---------- Daily Bonus-venster ---------- */
.jb__modal--bonus {
  left: calc(var(--u) * 651);
  top: calc(var(--u) * 93);
  width: calc(var(--u) * 600);
  height: calc(var(--u) * 700);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  padding: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 30) calc(var(--u) * 70);
  border-radius: calc(var(--u) * 58);
  background: linear-gradient(160deg, #3d3d3d, #1f1f1f 55%, #0d0d0d);
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 60) rgba(0, 0, 0, 0.35);
}
.bn-close { position: absolute; top: calc(var(--u) * 38); right: calc(var(--u) * 38); display: grid; place-items: center; width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: 50%; background: #5a5a5a; color: #111; }
.bn-close svg { width: 60%; height: 60%; stroke-width: 3; }
.bn-top { display: flex; align-items: center; gap: calc(var(--u) * 30); }
.bn-ring { position: relative; flex: none; width: calc(var(--u) * 240); height: calc(var(--u) * 240); margin: calc(var(--u) * -10) 0 calc(var(--u) * -10) calc(var(--u) * -30); }
.bn-ring > svg { width: 100%; height: 100%; overflow: visible; }
.jb svg.bn-ring__svg { fill: none; stroke: none; }
.bn-ring__val { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: #5DBB3F; font-size: calc(var(--u) * 46); font-weight: 700; line-height: 0.95; }
.bn-ring__val small { font-size: 0.7em; }
.bn-ring__val.is-pop { animation: dj-pop 500ms var(--ease-out); }
.bn-next { display: block; font-size: calc(var(--u) * 22); font-weight: 800; text-transform: uppercase; }
.bn-next em { color: #5DBB3F; font-style: normal; }
.bn-next small { display: block; margin-top: calc(var(--u) * 10); color: #5DBB3F; font-size: calc(var(--u) * 15); font-weight: 700; }
.bn-rows { display: grid; align-content: center; gap: calc(var(--u) * 14); padding-right: calc(var(--u) * 60); }
.bn-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 28);
  height: calc(var(--u) * 88);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 26);
  background: #fff;
  color: var(--c);
  font-size: calc(var(--u) * 23);
  font-weight: 700;
  text-transform: uppercase;
  transition: background-color 400ms ease;
  animation: dj-item-in 400ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.bn-row i {
  display: grid;
  place-content: center;
  justify-items: center;
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
  border: calc(var(--u) * 7) solid var(--c);
  border-radius: 50%;
  background: #fff;
  font-size: calc(var(--u) * 21);
  font-style: normal;
  line-height: 0.9;
}
.bn-row i small { font-size: 0.5em; }
.bn-row.is-done { background: #9a9a9a; color: color-mix(in srgb, var(--c) 72%, #000); }
.bn-row > svg { position: absolute; right: calc(var(--u) * -62); width: calc(var(--u) * 50); height: calc(var(--u) * 50); color: #6CE04A; stroke-width: 3.6; filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(108, 224, 74, 0.6)); animation: dj-pop 450ms var(--ease-out) both; }
.bn-foot { margin: 0; color: #9a9a9a; font-size: calc(var(--u) * 14); font-weight: 700; line-height: 1.5; text-align: center; text-transform: uppercase; }
.bn-plus {
  position: absolute;
  z-index: 4;
  color: #6CE04A;
  font-size: calc(var(--u) * 44);
  font-weight: 800;
  text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* ---------- Knoppen per functie (boven de naam) ---------- */
.demo__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.demo__chip {
  position: relative;
  overflow: hidden;
  padding: 7px 14px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--dj-surface-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(30, 30, 30, 0.06);
  color: var(--dj-text);
  font: 500 0.875rem/1.2 var(--font-ui);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.demo__chip:hover { background: var(--dj-white); color: var(--dj-ink); transform: translateY(-1px); }
.demo__chip[aria-selected="true"] { background: var(--dj-blue); color: var(--dj-white); box-shadow: 0 6px 14px -6px rgba(0, 128, 255, 0.7); }
/* Voortgang van de automatische wissel: dun lijntje onderaan de actieve knop */
.demo__chip i { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 1px; transform-origin: left; transform: scaleX(0); background: rgba(255, 255, 255, 0.85); }
.demo__chip[aria-selected="true"] i { animation: dj-dot var(--dwell, 9s) linear forwards; }
.demo.is-paused .demo__chip[aria-selected="true"] i { animation-play-state: paused; }
.demo.is-held .demo__chip[aria-selected="true"] i { animation: none; transform: scaleX(0); }
.demo__chip:focus-visible { outline: 2px solid var(--dj-blue); outline-offset: 2px; }

/* Uitleg + navigatie onder het toestel */
.demo__info { display: grid; justify-items: center; gap: var(--space-4); width: 100%; max-width: 620px; }
.demo__nav { display: flex; align-items: center; gap: var(--space-5); }
.demo__title {
  min-width: 9em;
  margin: 0;
  color: var(--dj-blue);
  font-family: var(--font-label);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1;
  text-align: center;
}
.demo__arrow {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dj-surface-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--shadow-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease;
}
.demo__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--dj-blue);
  border-right: 2px solid var(--dj-blue);
  transform: translate(-35%, -50%) rotate(-135deg);
}
.demo__arrow--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.demo__arrow:hover { background: var(--dj-white); transform: translateX(-2px); }
.demo__arrow--next:hover { transform: translateX(2px); }

@keyframes dj-dot { to { transform: scaleX(1); } }

.demo__text { color: var(--dj-text); text-align: left; }
.demo__text .demo__lead { margin: 0 0 var(--space-3); color: var(--dj-ink); font-weight: 600; text-align: center; }
.demo__text ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.demo__text li { position: relative; padding-left: 22px; }
.demo__text li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dj-blue);
}
.demo__text b { color: var(--dj-ink); }
/* Zoeken: de vijf opties openen meteen het juiste scherm */
.demo__jump {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline dotted rgba(0, 128, 255, 0.55); text-underline-offset: 3px;
}
.demo__jump b { transition: color var(--dur-fast) ease; }
.demo__jump:hover b, .demo__jump.is-on b { color: var(--dj-blue); }
.demo__jump:hover, .demo__jump.is-on { text-decoration-style: solid; text-decoration-color: var(--dj-blue); }
.demo__jump:focus-visible { outline: 2px solid var(--dj-blue); outline-offset: 2px; border-radius: 3px; }
.demo__text > * { animation: dj-item-in 450ms var(--ease-out) both; }

/* ---------- Join the party ---------- */

.party__inner { position: relative; display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.party__soon {
  margin: 0;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--dj-blue);
  color: var(--dj-blue);
  font-size: var(--fs-small);
  font-weight: 500;
}
.party__btn {
  position: relative;
  padding: 16px 40px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #2b94ff, #0070e0);
  color: var(--dj-white);
  font-family: var(--font-label);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 30px -10px rgba(0, 128, 255, 0.7);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.party__btn:hover { transform: translateY(-2px) rotate(-1.5deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 20px 40px -12px rgba(0, 128, 255, 0.8); }
.party__btn:active { transform: scale(0.97); }
.party__text { max-width: 30ch; margin: 0; color: var(--dj-text-muted); }
.party__text a { color: var(--dj-blue); font-weight: 500; }

/* Confetti */
.confetti {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .mini-queue__row, .mini-queue__cr, .mini-ps__row, .mini-ps__vinyl, .mini-ps__buy, .mini-ad__slide, .mini-ad__timer,
  .jb__cover, .jb__progress i, .jb-search__caret, .jb-card, .jb-panel, .jb-hero, .jb-toast, .pl-head, .pl-count,
  .ps__stage > *, .ps-row, .ps__vinyl { animation: none; }
  .jb__ui, .jb__modal { transition: none; }
  .mini-ps__vinyl { display: none; }
  .kb, .vw-head, .vw-sub, .abc-head, .gn-head, .gn-tile, .sr-bar, .pay-qr, .pay-pending, .bn-row { animation: none; }
  .jb__finger { display: none; }
  .mini-ad__slide:first-child { opacity: 1; }
}

/* ---------- Smalle schermen: alles mag krimpen ---------- */
@media (max-width: 699px) {
  /* Staand scherm: minder breed ontwerp, zijknoppen en account vallen weg */
  .jb__screen { --u: calc(100cqw / 820); aspect-ratio: 4 / 5; }
  .jb__ui { padding-right: calc(var(--u) * 25); }
  .jb__top { padding-left: 0; }
  .jb__tabs { gap: calc(var(--u) * 8); }
  .jb__tab { font-size: calc(var(--u) * 17); }
  .jb__account, .jb__side { display: none; }
  .jb__body { inset: 0 calc(var(--u) * 10); }
  .jb-panel--row { padding-left: calc(var(--u) * 30); gap: calc(var(--u) * 24); }
  .jb__modal { left: calc(var(--u) * 20); width: calc(var(--u) * 780); }
  .q-panel { grid-template-columns: calc(var(--u) * 150) calc(var(--u) * 28) minmax(0, 1fr) calc(var(--u) * 116); padding-left: calc(var(--u) * 26); }
  .q-label { font-size: calc(var(--u) * 19); }
  .q-now { grid-template-columns: calc(var(--u) * 100) minmax(0, 1fr) auto; }
  /* Party Shuffle */
  .pl-head { grid-template-columns: calc(var(--u) * 120) minmax(0, 1fr); gap: calc(var(--u) * 24); }
  .pl-back { display: none; }
  .pl-title { font-size: calc(var(--u) * 32); }
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-grid > :nth-child(n + 7) { display: none; }
  .jb__modal--ps { left: calc(var(--u) * 20); top: calc(var(--u) * 40); width: calc(var(--u) * 780); height: calc(var(--u) * 780); border-radius: calc(var(--u) * 70); }
  .ps { padding: calc(var(--u) * 30) calc(var(--u) * 26); border-radius: calc(var(--u) * 46); }
  .ps__head { gap: calc(var(--u) * 20); padding-right: calc(var(--u) * 40); }
  .ps__icon { width: calc(var(--u) * 80); height: calc(var(--u) * 80); }
  .ps__title b { font-size: calc(var(--u) * 40); }
  .ps__title small { font-size: calc(var(--u) * 21); }
  .ps__re { position: static; }
  .ps__list { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; row-gap: calc(var(--u) * 8); }
  .ps-row__pill { height: calc(var(--u) * 42); font-size: calc(var(--u) * 18); }
  .ps__result { gap: calc(var(--u) * 16); }
  .ps-btn--big { padding-block: calc(var(--u) * 8); }
  .ps-buy { padding: calc(var(--u) * 7); }
  .ps-buy b { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }
  .ps__stage { align-items: start; padding-top: calc(var(--u) * 14); }
  .ps__spin, .ps__done { align-self: center; }
  /* Zoeken */
  .sr-bar { gap: calc(var(--u) * 16); }
  .sr-count { display: none; }
  .kb { grid-template-columns: minmax(0, 1fr); }
  .kb__nums { display: none; }
  .pl-grid--kb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kb span { height: calc(var(--u) * 60); font-size: calc(var(--u) * 28); }
  .abc-head { grid-template-columns: minmax(0, 1fr); }
  .abc-head__icon { display: none; }
  .abc { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .abc span:nth-child(n + 15) { display: none; }
  .gn-head { grid-template-columns: calc(var(--u) * 110) minmax(0, 1fr); }
  .gn-head .vw-icon { width: calc(var(--u) * 110); height: calc(var(--u) * 110); }
  .gn-count { display: none; }
  .gn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gn-grid > :nth-child(n + 7) { display: none; }
  .vw-head h4 { font-size: calc(var(--u) * 50); }
  /* Mobile Pay */
  .jb__modal--pay { left: calc(var(--u) * 20); width: calc(var(--u) * 780); top: calc(var(--u) * 150); height: calc(var(--u) * 640); }
  .pay { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: calc(var(--u) * 30); padding: calc(var(--u) * 34) calc(var(--u) * 30) calc(var(--u) * 20); }
  .pay__title { font-size: calc(var(--u) * 32); }
  .pay-opt { gap: calc(var(--u) * 14); font-size: calc(var(--u) * 21); }
  .pay-opt i { width: calc(var(--u) * 48); height: calc(var(--u) * 48); }
  .pay-btn, .pay-qr, .pay-pending__bar { width: 100%; }
  .pay-pending { width: 100%; }
  .pay-pending > svg { display: none; }
  .pay-btn { height: calc(var(--u) * 110); gap: calc(var(--u) * 20); font-size: calc(var(--u) * 24); }
  .pay-qr { padding: calc(var(--u) * 26); }
  /* Daily Bonus */
  .jb__modal--bonus { left: calc(var(--u) * 100); width: calc(var(--u) * 620); padding-left: calc(var(--u) * 50); }
  .ps__toast { flex-direction: column; white-space: normal; gap: calc(var(--u) * 16); padding: calc(var(--u) * 20); text-align: center; }
  .ps__done .ps-btn--big { margin-top: calc(var(--u) * 20); }
  .demo__nav { gap: var(--space-3); }
  .demo__title { min-width: 0; font-size: 1.9rem; }
}

/* ---------- Desktop: uitleg rechts naast het scherm ---------- */
/* Alles staat bovenaan vast: knoppen, titel en pijlen verspringen niet
   wanneer een uitleg langer of korter is. */
@media (min-width: 1000px) {
  .demo {
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
    align-items: start;
    justify-items: stretch;
    gap: clamp(40px, 4vw, 64px);
  }
  .jb { width: 100%; }
  .demo__info { align-self: start; justify-items: start; align-content: start; gap: var(--space-4); max-width: none; padding-top: clamp(8px, 2vw, 28px); }
  .demo__chips { justify-content: flex-start; }
  .demo__nav { width: 100%; gap: var(--space-3); }
  .demo__titles { order: -1; flex: 1; min-width: 0; }
  .demo__title { min-width: 0; text-align: left; white-space: nowrap; }
  .demo__text .demo__lead { text-align: left; }
  .demo__text { margin-top: var(--space-2); }
}
/* Smal: vaste hoogte voor de uitleg, zodat de rest van de pagina niet verspringt */
@media (max-width: 999px) {
  .demo__text { min-height: 14.5em; }
}

/* ---------- Goed om te weten ---------- */
.facts {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  row-gap: 6px;
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(30, 30, 30, 0.05);
}
.fact__icon {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(0, 128, 255, 0.1);
  color: var(--dj-blue);
}
.fact__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fact h3 { margin: 2px 0 0; color: var(--dj-ink); font-size: 1rem; font-weight: 600; }
.fact p { margin: 0; color: var(--dj-text); font-size: 0.9375rem; line-height: 1.5; }
.fact .text-link { justify-self: start; margin-top: 4px; font-size: 0.9375rem; }
.fact--legal .fact__icon { background: rgba(178, 106, 0, 0.12); color: var(--dj-amber); }

/* ---------- Eén systeem, drie modellen ---------- */
.devices {
  display: grid;
  gap: clamp(36px, 4vw, 48px);
}
@media (min-width: 800px) { .devices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.device { display: grid; align-content: start; justify-items: center; gap: var(--space-3); text-align: center; }
/* Alle toestellen staan op dezelfde "vloer"; het muurmodel hangt iets hoger */
.device__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: clamp(220px, 24vw, 300px);
  margin-bottom: var(--space-3);
}
.device__media::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 46%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 30, 30, 0.18), transparent);
  transform: translateX(-50%);
}
.device__media picture { display: contents; }
.device__media img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 90%;
  height: var(--h, 60%);
  margin-bottom: var(--lift, 0);
  object-fit: contain;
  transition: transform 500ms var(--ease-out), filter 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .device:hover .device__media img {
    transform: translateY(-6px);
    filter: drop-shadow(0 0 18px rgba(0, 128, 255, 0.35));
  }
}
.device__name { margin: 0; color: var(--dj-ink); font-family: var(--font-label); font-size: 2rem; font-weight: 400; line-height: 1; letter-spacing: 0.01em; }
.device__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.device__tags span {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(0, 128, 255, 0.08);
  color: var(--dj-blue);
  font-size: 0.8125rem;
  font-weight: 500;
}
.device__specs { display: grid; gap: 6px; margin: var(--space-2) 0 0; padding: 0; list-style: none; color: var(--dj-text); font-size: 0.9375rem; }
.device__specs li { display: flex; align-items: center; justify-content: center; gap: 8px; }
.device__specs svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--dj-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.device__specs small { color: var(--dj-text-muted); font-size: 0.75rem; }
.device .text-link { margin-top: var(--space-2); }
.device__media--wall::after { display: none; }