/* Effect: draaitafel — v0.1.0 (voorbeeld v0.5.33, Franky 07-10): de plaat ligt op een draaitafel.
   Plint (vierkant, geborsteld zwart metaal) achter de plaat, toonarm rechts die op de plaat zwaait zodra
   de mix speelt (klasse .mix-speelt op .viervlak, gezet door speler.js) en terugkeert bij pauze.
   De 3D-plaat en het affiche blijven zoals ze zijn; plint en arm zijn CSS/SVG (licht, ook op gsm). */
.viervlak { --hart-y: 50%; }
.viervlak.met-speler { --hart-y: calc(50% - (var(--speler-h, 0px) + var(--gat)) / 2); }

.deck {
  position: absolute; left: 50%; top: var(--hart-y); z-index: 4; pointer-events: none;
  width: calc(var(--hart) * 1.62); height: calc(var(--hart) * 1.62);
  transform: translate(-50%, -50%);
  border-radius: calc(var(--hart) * 0.09);
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.07), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #1d1a22, #0c0a10 70%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 60px -10px rgba(0, 0, 0, 0.85), 0 0 60px -12px rgba(57, 255, 144, 0.35);
}
/* schroefjes in de hoeken + "33 · 45" en een pitchschuif als versiering */
.deck::before, .deck::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #3a3542; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); }
.deck::before { left: 9px; top: 9px; box-shadow: calc(var(--hart) * 1.62 - 24px) 0 0 #3a3542, 0 calc(var(--hart) * 1.62 - 24px) 0 #3a3542, calc(var(--hart) * 1.62 - 24px) calc(var(--hart) * 1.62 - 24px) 0 #3a3542; }
.deck::after { display: none; }
.deck-snelheid { position: absolute; left: 7%; bottom: 6%; display: flex; gap: 6px; font: 700 calc(var(--hart) * 0.045)/1 var(--mono, monospace); letter-spacing: 0.12em; color: #6f6878; }
.deck-snelheid b { min-width: 2.4em; text-align: center; padding: 3px 6px; border: 1px solid #3a3542; border-radius: 4px; font-weight: 700; }
.viervlak.mix-speelt .deck-snelheid b {  /* nummer én totaal groen verlicht (v0.5.53) */ color: #04130a; background: #39ff90; border-color: #39ff90; box-shadow: 0 0 10px rgba(57, 255, 144, 0.6); }
.deck-pitch { position: absolute; right: 6%; bottom: 7%; width: calc(var(--hart) * 0.05); height: calc(var(--hart) * 0.36); border-radius: 3px; background: #08070b; box-shadow: inset 0 0 0 1px #2c2833; }
.deck-pitch::after { content: ""; position: absolute; left: -40%; right: -40%; top: 45%; height: 10%; border-radius: 2px; background: linear-gradient(#55505d, #2a2630); }

/* toonarm: draaipunt rechtsboven, in rust naast de plaat, bij spelen op de buitenste groeven */
.deck-arm {
  position: absolute; z-index: 7; pointer-events: none;
  left: calc(50% + var(--hart) * 0.6); top: calc(var(--hart-y) - var(--hart) * 0.6);
  width: calc(var(--hart) * 0.16); height: calc(var(--hart) * 0.92);
  transform: translateX(-50%) rotate(-4deg); transform-origin: 50% calc(var(--hart) * 0.08);
  transition: transform 1.3s cubic-bezier(0.45, 0, 0.25, 1);
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7));
}
.viervlak.mix-speelt .deck-arm { transform: translateX(-50%) rotate(calc(19deg + var(--arm-p, 0) * 13deg)); transition-duration: 1.6s; }
/* optillen en neerleggen: arm komt even omhoog (groter, langere schaduw) tijdens het zwaaien */
.deck-arm svg { transition: transform 0.35s ease-out 1.25s; transform-origin: 50% 9%; }
.viervlak.arm-beweegt .deck-arm svg { transform: scale(1.07); transition: transform 0.3s ease-out; }
.deck-arm { transition-property: transform, filter; }
.viervlak.arm-beweegt .deck-arm { filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.75)); }
.deck-arm svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* de plaat zelf: groene rand weg, ze ligt nu op de draaitafel */
.viervlak.met-deck > .hart { box-shadow: 0 0 0 6px #050407, 0 0 0 7px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.7); }
.viervlak.met-deck > .hart:hover { box-shadow: 0 0 0 6px #050407, 0 0 0 8px #39ff90, 0 10px 30px rgba(0, 0, 0, 0.7); }
/* Play = start/stop-knop links onderaan op de plint (zoals op een echte draaitafel), met groen lampje
   dat brandt zolang de plaat draait (Franky 07-10) */
.viervlak.met-deck > .speel-knop {
  --dh: calc(var(--hart) * 1.62);
  --kn: 76px;  /* breedte van elk van de drie knoppen */
  left: 50%; top: calc(var(--hart-y) + var(--dh) / 2 - var(--dh) * 0.05);
  transform: translate(-50%, -100%); z-index: 9;
  width: var(--kn); height: 36px; min-height: 0; justify-content: center; gap: 7px; padding: 0; border-radius: 6px;
  border: 1px solid #3a3542; background: linear-gradient(#26222c, #141218); color: #c9c3d2;
  font-size: 10px; letter-spacing: 0.18em; box-shadow: 0 3px 0 #050407, inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.viervlak.met-deck > .speel-knop:hover { background: linear-gradient(#2e2a35, #18161d); color: #fff; box-shadow: 0 3px 0 #050407, 0 0 18px rgba(57, 255, 144, 0.35); }
.viervlak.met-deck > .speel-knop:active { transform: translate(-50%, calc(-100% + 2px)); box-shadow: 0 1px 0 #050407; }
.viervlak.met-deck > .speel-knop .speel-ikoon { display: none; }
.viervlak.met-deck > .speel-knop::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1d3a2a; box-shadow: inset 0 0 0 1px #0d1f15;
  transition: background 0.3s, box-shadow 0.3s;
}
.viervlak.met-deck > .speel-knop.speelt { background: linear-gradient(#26222c, #141218); color: #39ff90; }
.viervlak.met-deck > .speel-knop.speelt::before { background: #39ff90; box-shadow: 0 0 6px #39ff90, 0 0 14px rgba(57, 255, 144, 0.8); }
.deck-snelheid { left: 7%; right: auto; top: 6%; bottom: auto; }  /* 33/45 linksboven: onderaan staan Play en ⏮ ⏭ */
/* ⏮ ⏭ naast Play, onderaan in het midden van de plint (v0.5.36) */
.deck-sprong {
  --dh: calc(var(--hart) * 1.62);
  position: absolute; z-index: 8; left: 50%; top: calc(var(--hart-y) + var(--dh) / 2 - var(--dh) * 0.05);
  --kn: 76px;
  transform: translate(-50%, -100%); display: flex; justify-content: space-between; width: calc(var(--kn) * 3 + 16px);
}
.deck-sprong button {
  width: var(--kn); height: 36px; padding: 0; border: 1px solid #3a3542; border-radius: 6px; cursor: pointer;
  background: linear-gradient(#26222c, #141218); color: #c9c3d2; font-size: 13px; line-height: 1;
  box-shadow: 0 3px 0 #050407, inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.deck-sprong button { display: grid; place-items: center; }  /* eigen SVG-iconen: iOS tekende ⏮ ⏭ als blauwe emoji (v0.5.40) */
.deck-sprong button:hover, .deck-sprong button:focus-visible { color: #39ff90; outline: 0; box-shadow: 0 3px 0 #050407, 0 0 14px rgba(57, 255, 144, 0.35); }
.deck-sprong button:active { transform: translateY(2px); box-shadow: 0 1px 0 #050407; }
.viervlak.met-deck > .hart .hart-tab { display: none; }
/* speler (midden, desktop): net onder de draaitafel */
@media (min-width: 1024px) and (min-height: 700px) {
  /* desktop: plaat iets kleiner, zodat plint + speler tussen de vakken passen */
  .viervlak.met-deck { --hart: clamp(140px, 21vmin, 236px); }
  .viervlak.met-deck > .speler-balk.midden { top: calc(var(--hart-y) + var(--hart) * 0.81 + 12px); }
}
/* gsm: de draaitafel staat op een eigen rij boven de Mixcloud-speler (Franky 07-10), niet meer over de vakken.
   .deck-plek houdt die rij vrij; speler.js zet --hart-y op het midden ervan. */
.deck-plek { display: none; }
@media (max-width: 1023px), (max-height: 699px) {
  .viervlak.met-deck { --hart: clamp(150px, 46vw, 220px); }
  .viervlak.met-deck > .deck-plek { display: block; grid-column: 1 / -1; grid-row: 2; height: calc(var(--hart) * 1.48 + 14px); anchor-name: --deck-plek; }
  /* zelfde midden als speler.js, maar al vóór het script draait: plaat springt niet (CLS, v0.5.85) */
  @supports (top: anchor(--x center)) { .viervlak.met-deck { --hart-y: anchor(--deck-plek center); } }
  .deck { width: calc(var(--hart) * 1.48); height: calc(var(--hart) * 1.48); }
  .deck::before { box-shadow: calc(var(--hart) * 1.48 - 24px) 0 0 #3a3542, 0 calc(var(--hart) * 1.48 - 24px) 0 #3a3542, calc(var(--hart) * 1.48 - 24px) calc(var(--hart) * 1.48 - 24px) 0 #3a3542; }
  .deck-snelheid { left: 8%; top: 6%; gap: 4px; font-size: 9px; }
  .deck-arm { left: calc(50% + var(--hart) * 0.57); top: calc(var(--hart-y) - var(--hart) * 0.56); height: calc(var(--hart) * 0.86); }
  .deck-sprong { --dh: calc(var(--hart) * 1.48); }
  .deck-sprong, .viervlak.met-deck > .speel-knop { --kn: 62px; }
  .viervlak.met-deck > .speel-knop { --dh: calc(var(--hart) * 1.48); gap: 5px; font-size: 10px; letter-spacing: 0.12em; }  /* duimgroot: 62×36 */
}
@media (prefers-reduced-motion: reduce) { .deck-arm { transition: none; } }

/* ↺ Start naast de trackteller: terug naar het begin van de mix (v0.5.58) */
.deck-start { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid #3a3542; border-radius: 4px; background: #141218; color: #b8b0c4; font: inherit; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: color 0.2s, border-color 0.2s, box-shadow 0.2s; }
.deck-start svg { width: 1.1em; height: 1.1em; }
.deck-start:hover, .deck-start:focus-visible { color: #39ff90; border-color: #39ff90; box-shadow: 0 0 8px rgba(57, 255, 144, 0.5); outline: none; }