/* Registered custom property zodat --eye-open soepel kan interpoleren in conic-gradient. */
@property --eye-open {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.levensloop-player {
    --lp-accent: #d4a14b;
    --lp-accent-strong: #b87d2a;
    --lp-glass-bg: rgba(20, 18, 14, 0.55);
    --lp-glass-border: rgba(255, 235, 200, 0.20);
    --lp-text-main: #f4ece0;
    --lp-text-dim: rgba(244, 236, 224, 0.65);
    --lp-bg-deep: #0d0a07;

    box-sizing: border-box;
    font-family: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--lp-text-main);
    padding: 40px 20px;
    border-radius: 18px;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(212, 161, 75, 0.18), transparent 60%),
        radial-gradient(900px 600px at 110% 110%, rgba(70, 40, 20, 0.45), transparent 60%),
        var(--lp-bg-deep);
    max-width: 1100px;
    margin: 24px auto;
    position: relative;
}

.levensloop-player *,
.levensloop-player *::before,
.levensloop-player *::after {
    box-sizing: border-box;
}

/* ===== INTRO ===== */
.levensloop-player .lp-intro {
    text-align: center;
    margin-bottom: 40px;
}

.levensloop-player .lp-subtitle {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--lp-accent);
    margin-bottom: 10px;
}

.levensloop-player .lp-title {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--lp-text-main);
}

/* Tagline onder de titel — sans-serif, accent-kleur, breekt visueel los van de italic titel */
.levensloop-player .lp-tagline {
    font-family: "Outfit", "Inter", system-ui, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    letter-spacing: 1px;
    color: var(--lp-accent);
    margin: 0 0 14px;
    line-height: 1.3;
}

.levensloop-player .lp-desc {
    max-width: 540px;
    margin: 0 auto;
    color: var(--lp-text-dim);
    font-size: 1.05rem;
    line-height: 1.5;
}

/* ===== RADIO SHKALA ===== */
.levensloop-player .lp-shkala-wrap {
    position: relative;
    z-index: 5; /* zodat playbar er onder kan glijden bij OFF */
    width: 100%;
}

.levensloop-player .lp-shkala-box {
    position: relative;
    z-index: 2; /* boven de counter zodat 'ie 'm in OFF-stand verbergt */
    width: 100%;
    min-height: 199px;
    background:
        radial-gradient(800px 200px at 50% 0%, rgba(212, 161, 75, 0.05), transparent 60%),
        linear-gradient(180deg, rgba(20, 18, 14, 0.96) 0%, rgba(10, 8, 5, 0.98) 100%);
    border-radius: 25px;
    border: 1px solid var(--lp-glass-border);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    gap: 10px;
}

.levensloop-player .lp-cover-frame {
    position: relative;
    flex-shrink: 0;
}

.levensloop-player .lp-rectangle {
    width: clamp(100px, 15vw, 159px);
    height: clamp(100px, 15vw, 159px);
    object-fit: cover;
    border-radius: 10px;
    padding: 5px;
    background:
        linear-gradient(180deg, #1a1208 0%, #0a0705 100%);
    border: 1px solid rgba(212, 161, 75, 0.22);
    box-shadow:
        inset 0 1px 2px rgba(255, 235, 200, 0.14),
        inset 0 -2px 4px rgba(0, 0, 0, 0.7),
        0 4px 12px rgba(0, 0, 0, 0.55),
        0 1px 2px rgba(0, 0, 0, 0.4);
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.levensloop-player .lp-rectangle.lp-cover-clickable {
    cursor: zoom-in;
}

.levensloop-player .lp-rectangle.lp-cover-clickable:hover {
    transform: scale(1.02);
    border-color: rgba(212, 161, 75, 0.32);
    box-shadow:
        inset 0 1px 2px rgba(255, 235, 200, 0.16),
        inset 0 -2px 4px rgba(0, 0, 0, 0.7),
        0 6px 16px rgba(0, 0, 0, 0.5),
        0 0 14px rgba(212, 161, 75, 0.14);
}

.levensloop-player .lp-cover-zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(13, 10, 7, 0.65);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: rgba(244, 236, 224, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 2;
}

.levensloop-player .lp-cover-frame.lp-frame-clickable .lp-cover-zoom {
    opacity: 0.85;
    visibility: visible;
}

.levensloop-player .lp-cover-frame.lp-frame-clickable:hover .lp-cover-zoom {
    opacity: 1;
    transform: scale(1.1);
}

/* Hover-overlay: "SONG VISUALS" hint, iets boven het midden zodat het jaartal-badge
   niet door de tekst gekruist wordt */
.levensloop-player .lp-cover-hint {
    position: absolute;
    inset: 6px;
    border-radius: 8px;
    background: rgba(8, 6, 4, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: var(--lp-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 32px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2;
    visibility: hidden;
}

.levensloop-player .lp-cover-hint svg {
    filter: drop-shadow(0 0 6px rgba(212, 161, 75, 0.55));
}

.levensloop-player .lp-cover-hint span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(212, 161, 75, 0.6);
}

.levensloop-player .lp-cover-frame.lp-frame-clickable .lp-cover-hint {
    visibility: visible;
}

.levensloop-player .lp-cover-frame.lp-frame-clickable:hover .lp-cover-hint {
    opacity: 1;
}

/* Multi-image notificatie-badge (iOS-stijl) */
.levensloop-player .lp-photo-count {
    position: absolute;
    top: 9px;
    left: 9px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f4c172 0%, #d4a14b 55%, #b87d2a 100%);
    color: #2a1d0a;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(212, 161, 75, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.levensloop-player .lp-photo-count.visible {
    opacity: 1;
}

.levensloop-player .lp-year-badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lp-accent);
    color: #2a1d0a;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: 18px;
    padding: 4px 14px;
    border-radius: 999px;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.levensloop-player .lp-scale-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.levensloop-player .lp-scale-container {
    position: relative;
    flex: 1;
    margin: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 140px;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    background:
        radial-gradient(ellipse at center, rgba(20, 14, 8, 0.4) 0%, rgba(5, 3, 2, 0.6) 100%);
    border-radius: 10px;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.65),
        inset 0 -1px 2px rgba(212, 161, 75, 0.06),
        inset 0 0 0 1px rgba(212, 161, 75, 0.14),
        inset 0 0 28px rgba(0, 0, 0, 0.4);
    transition: background 0.9s ease, box-shadow 0.9s ease;
}

/* Subtiel verlicht venster wanneer de radio AAN staat — zoals oude radio's
   met een dimmable backlight achter de tuning-schaal */
.levensloop-player.is-radio-on .lp-scale-container {
    background:
        radial-gradient(ellipse at center, rgba(60, 40, 18, 0.55) 0%, rgba(12, 7, 3, 0.65) 100%);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.6),
        inset 0 -1px 2px rgba(212, 161, 75, 0.12),
        inset 0 0 0 1px rgba(212, 161, 75, 0.30),
        inset 0 0 28px rgba(212, 161, 75, 0.08),
        inset 0 0 70px rgba(212, 161, 75, 0.05);
}

/* Subtiele hoeklampjes — vier zachte warme lichtbronnen in de hoeken,
   alleen actief als de radio AAN staat. Plus heel langzame ademhaling. */
.levensloop-player .lp-scale-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(ellipse 160px 90px at 8% 22%, rgba(212, 161, 75, 0.10), transparent 70%),
        radial-gradient(ellipse 160px 90px at 92% 22%, rgba(212, 161, 75, 0.10), transparent 70%),
        radial-gradient(ellipse 160px 90px at 8% 78%, rgba(212, 161, 75, 0.07), transparent 70%),
        radial-gradient(ellipse 160px 90px at 92% 78%, rgba(212, 161, 75, 0.07), transparent 70%);
    transition: opacity 0.9s ease;
    z-index: 0;
}

.levensloop-player.is-radio-on .lp-scale-container::before {
    opacity: 1;
    animation: lp-backlight-breathe 6s ease-in-out infinite;
}

@keyframes lp-backlight-breathe {
    0%, 100% { opacity: 0.78; }
    50% { opacity: 1; }
}

.levensloop-player .lp-scale-container.lp-dragging {
    cursor: grabbing;
}

.levensloop-player .lp-scale-container.lp-dragging .lp-needle-wrapper {
    transition: none;
}

.levensloop-player .lp-scale-svg {
    width: 100%;
    height: auto;
    filter: invert(1) sepia(0.3) hue-rotate(-10deg) brightness(1.05);
    pointer-events: none;
}

.levensloop-player .lp-station-marker {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 14px;
    background: rgba(212, 161, 75, 0.55);
    pointer-events: none;
    z-index: 5;
}

.levensloop-player .lp-needle-wrapper {
    position: absolute;
    left: 0%;
    top: 28px;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    z-index: 10;
    transition: left 0.1s ease-out;
    pointer-events: none;
}

.levensloop-player .lp-needle {
    height: 100%;
    filter: hue-rotate(15deg) drop-shadow(0 0 4px rgba(212, 161, 75, 0.55));
}

/* ===== Magic Eye — vintage afstem-oog. Groene fosforschijf met twee donkere
   wedges links/rechts die "openknijpen" als je dichter bij een station tunet.
   --eye-open: 0 = dicht (off-station), 1 = wijd open (perfect getuned). ===== */
.levensloop-player .lp-magic-eye {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    --eye-open: 0;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent calc(var(--eye-open) * 90deg),
            rgba(5, 14, 8, 0.95) calc(var(--eye-open) * 90deg),
            rgba(5, 14, 8, 0.95) calc(180deg - var(--eye-open) * 90deg),
            transparent calc(180deg - var(--eye-open) * 90deg),
            transparent calc(180deg + var(--eye-open) * 90deg),
            rgba(5, 14, 8, 0.95) calc(180deg + var(--eye-open) * 90deg),
            rgba(5, 14, 8, 0.95) calc(360deg - var(--eye-open) * 90deg),
            transparent calc(360deg - var(--eye-open) * 90deg)
        ),
        radial-gradient(circle at 50% 45%,
            rgba(160, 255, 190, 0.9) 0%,
            rgba(90, 230, 145, 0.7) 40%,
            rgba(40, 140, 70, 0.55) 75%,
            rgba(15, 50, 25, 0.7) 100%);
    box-shadow:
        inset 0 0 6px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 4px rgba(120, 255, 160, 0.25);
    transition:
        opacity 0.4s ease,
        --eye-open 0.18s ease-out,
        box-shadow 0.3s ease;
}

.levensloop-player.is-radio-on .lp-magic-eye {
    opacity: 1;
    box-shadow:
        inset 0 0 6px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 calc(var(--eye-open) * 8px + 3px) rgba(120, 255, 160, calc(var(--eye-open) * 0.55 + 0.18));
}

/* Subtiele binnen-reflectie bovenaan de "buis" voor glas-feel. */
.levensloop-player .lp-magic-eye::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 4px;
    width: 8px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.45) 0%, transparent 70%);
    pointer-events: none;
}

.levensloop-player .lp-freq-readout {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--lp-text-dim);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px rgba(212, 161, 75, 0.18);
}

/* ===== Type-label sticker onderaan ===== */
.levensloop-player .lp-type-label {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(212, 161, 75, 0.22);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 7;
    white-space: nowrap;
    user-select: none;
}

/* ===== FM/AM band-switch — pill met twee opties, geactiveerd brandt amber ===== */
.levensloop-player .lp-band-switch {
    display: inline-flex;
    align-items: stretch;
    height: 34px;
    padding: 3px;
    gap: 0;
    border: 1px solid rgba(255, 235, 200, 0.22);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 5, 3, 0.7) 0%, rgba(15, 10, 5, 0.7) 100%);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.6),
        inset 0 -1px 0 rgba(255, 235, 200, 0.04);
    flex-shrink: 0;
    position: relative;
}

.levensloop-player .lp-band-opt {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--lp-text-dim);
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 0 11px;
    border-radius: 14px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.25s ease, text-shadow 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
}

.levensloop-player .lp-band-opt:hover {
    color: rgba(244, 193, 114, 0.7);
}

.levensloop-player .lp-band-opt.is-active {
    color: #2a1d0a;
    background: linear-gradient(180deg, var(--lp-accent) 0%, #b88840 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 200, 0.45),
        0 0 6px rgba(212, 161, 75, 0.55);
    text-shadow: 0 1px 0 rgba(255, 235, 200, 0.3);
}

/* ===== VU-meter — kleine analoge audiometer met draaiende naald.
   Zit als spiegel van de track-counter (rechts) aan de linkerkant. ===== */
.levensloop-player .lp-vu-meter {
    position: absolute;
    top: 0;
    left: 30px;
    z-index: 1;
    width: 86px;
    height: 38px;
    padding: 6px 8px 4px;
    border-radius: 22px 22px 6px 6px;
    background: linear-gradient(180deg, rgba(20, 15, 8, 0.95) 0%, rgba(8, 5, 3, 0.95) 100%);
    border: 1px solid rgba(212, 161, 75, 0.20);
    border-bottom: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 200, 0.06),
        inset 0 0 10px rgba(212, 161, 75, 0.04),
        0 -2px 6px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(0);
    transition:
        transform 0.55s cubic-bezier(0.4, 1.4, 0.5, 1),
        opacity 0.3s ease 0.1s,
        border-color 0.6s ease,
        box-shadow 0.6s ease;
}

.levensloop-player.is-radio-on .lp-vu-meter {
    transform: translateY(-30px);
    opacity: 1;
    border-color: rgba(212, 161, 75, 0.50);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 200, 0.12),
        inset 0 0 14px rgba(212, 161, 75, 0.10),
        0 -2px 6px rgba(0, 0, 0, 0.4),
        0 0 14px rgba(212, 161, 75, 0.18);
}

.levensloop-player .lp-vu-face {
    width: 70px;
    height: 22px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.levensloop-player .lp-vu-arc {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(212, 161, 75, 0.18);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

/* Tick-streepjes — 11 streepjes radiaal verdeeld via CSS sin/cos */
.levensloop-player .lp-vu-ticks {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.levensloop-player .lp-vu-ticks i {
    --r: 19px; /* radius vanaf het pivot-punt */
    position: absolute;
    bottom: calc(cos(var(--a)) * var(--r) - 2px);
    left: calc(50% + sin(var(--a)) * var(--r) - 0.5px);
    width: 1px;
    height: 4px;
    background: rgba(212, 161, 75, 0.6);
    transform-origin: center bottom;
    transform: rotate(var(--a));
}

.levensloop-player .lp-vu-ticks i.is-major {
    width: 1.5px;
    height: 5px;
    background: rgba(244, 193, 114, 0.85);
    box-shadow: 0 0 3px rgba(212, 161, 75, 0.4);
}

.levensloop-player .lp-vu-ticks i.is-red {
    background: rgba(255, 110, 60, 0.85);
    box-shadow: 0 0 3px rgba(255, 110, 60, 0.5);
}

.levensloop-player .lp-vu-needle {
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 1.5px;
    height: 22px;
    background: linear-gradient(to top,
        rgba(212, 161, 75, 0.4) 0%,
        rgba(212, 161, 75, 0.9) 40%,
        #f4c172 100%);
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(-50deg);
    transition: transform 0.08s ease-out;
    box-shadow: 0 0 3px rgba(212, 161, 75, 0.7);
}

.levensloop-player .lp-vu-pivot {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(180deg, #4a3a20, #1a1208);
    box-shadow: inset 0 1px 1px rgba(255, 235, 200, 0.3);
}

.levensloop-player .lp-vu-label {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: rgba(212, 161, 75, 0.55);
}

/* ===== Warm-up sequentie: kleine vertragingen op de bestaande transitions
   wanneer de radio aan-zet — alles komt in stappen op zoals een buis-radio. ===== */

.levensloop-player.is-radio-on .lp-track-counter {
    transition:
        transform 0.55s cubic-bezier(0.4, 1.4, 0.5, 1) 0.45s,
        opacity 0.3s ease 0.55s,
        color 0.6s ease 0.5s,
        border-color 0.6s ease 0.5s,
        box-shadow 0.6s ease 0.5s,
        text-shadow 0.6s ease 0.5s;
}

.levensloop-player.is-radio-on .lp-vu-meter {
    transition:
        transform 0.55s cubic-bezier(0.4, 1.4, 0.5, 1) 0.55s,
        opacity 0.3s ease 0.65s,
        border-color 0.6s ease 0.6s,
        box-shadow 0.6s ease 0.6s;
}

.levensloop-player.is-radio-on .lp-track-progress {
    transition:
        opacity 0.4s ease 0.7s,
        transform 0.55s cubic-bezier(0.4, 1.4, 0.5, 1) 0.7s,
        margin-top 0.55s cubic-bezier(0.4, 1.4, 0.5, 1) 0.7s;
}

/* Subtiele "tube flicker" op de naald-pin tijdens warm-up */
.levensloop-player.is-radio-on .lp-needle-wrapper {
    animation: lp-tube-flicker 1.2s ease-out;
}

@keyframes lp-tube-flicker {
    0%   { opacity: 0; filter: brightness(0.2); }
    8%   { opacity: 0.4; }
    12%  { opacity: 0.1; }
    18%  { opacity: 0.6; }
    24%  { opacity: 0.2; }
    32%  { opacity: 0.7; filter: brightness(0.6); }
    50%  { opacity: 0.9; }
    100% { opacity: 1; filter: brightness(1); }
}

/* Track-teller — half-pil zit standaard ACHTER de speler verstopt.
   Wanneer de speler ON gaat, schuift 'ie omhoog en steekt boven de speler uit. */
.levensloop-player .lp-track-counter {
    position: absolute;
    top: 0;
    right: 30px;
    z-index: 1; /* lager dan shkala-box (z:2) → wordt verborgen door box */
    min-width: 76px;
    height: 38px;
    padding: 0 16px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(212, 161, 75, 0.45);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    border-radius: 22px 22px 6px 6px;
    background:
        linear-gradient(180deg, rgba(8, 5, 3, 0.95) 0%, rgba(18, 12, 6, 0.95) 60%, rgba(12, 8, 4, 0.95) 100%);
    border: 1px solid rgba(212, 161, 75, 0.20);
    border-bottom: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 200, 0.06),
        inset 0 0 10px rgba(212, 161, 75, 0.04),
        0 -2px 6px rgba(0, 0, 0, 0.4);
    text-shadow: none;
    opacity: 0;
    transform: translateY(0);
    transition:
        transform 0.55s cubic-bezier(0.4, 1.4, 0.5, 1),
        opacity 0.3s ease 0.1s,
        color 0.6s ease,
        border-color 0.6s ease,
        box-shadow 0.6s ease,
        text-shadow 0.6s ease;
}

.levensloop-player .lp-track-counter.visible {
    opacity: 1;
}

/* Lit-staat: pil schuift naar boven én licht op (vol oranje, glow, sterkere rand) */
.levensloop-player .lp-track-counter.is-lit {
    transform: translateY(-30px);
    color: var(--lp-accent);
    border-color: rgba(212, 161, 75, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 200, 0.14),
        inset 0 0 14px rgba(212, 161, 75, 0.20),
        0 -4px 12px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(212, 161, 75, 0.25);
    text-shadow:
        0 0 4px rgba(212, 161, 75, 0.85),
        0 0 8px rgba(212, 161, 75, 0.45);
}

@media (max-width: 768px) {
    .levensloop-player .lp-track-counter {
        right: 18px;
        min-width: 64px;
        height: 34px;
        font-size: 10px;
        padding: 0 12px 5px;
    }
    .levensloop-player .lp-track-counter.is-lit {
        transform: translateY(-24px);
    }
    .levensloop-player .lp-vu-meter {
        left: 18px;
        width: 72px;
        height: 34px;
    }
    .levensloop-player.is-radio-on .lp-vu-meter {
        transform: translateY(-24px);
    }
}

.levensloop-player .lp-station-name {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--lp-accent);
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    max-width: 80%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px rgba(212, 161, 75, 0.45);
}

.levensloop-player .lp-station-name.visible { opacity: 1; }

.levensloop-player .lp-arrow-left,
.levensloop-player .lp-arrow-right {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    border-radius: 50%;
    color: var(--lp-accent);
    flex-shrink: 0;
    position: relative;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 235, 200, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 65% 75%, rgba(0, 0, 0, 0.35) 0%, transparent 45%),
        radial-gradient(circle at center, #1a1208 0%, #0a0705 80%);
    box-shadow:
        inset 0 2px 3px rgba(255, 235, 200, 0.14),
        inset 0 -2px 4px rgba(0, 0, 0, 0.65),
        inset 0 0 0 1px rgba(255, 235, 200, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.55),
        0 1px 2px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.2s ease, transform 0.12s ease;
    margin: 0 8px;
}

/* Klein donker binnenoog voor "ingedrukt knopje"-gevoel */
.levensloop-player .lp-arrow-left::after,
.levensloop-player .lp-arrow-right::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 32%, rgba(255, 235, 200, 0.10) 0%, transparent 50%),
        radial-gradient(circle at center, #0c0805 0%, #060403 100%);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.85),
        inset 0 0 0 1px rgba(255, 235, 200, 0.04);
    pointer-events: none;
}

.levensloop-player .lp-arrow-left svg,
.levensloop-player .lp-arrow-right svg {
    position: relative;
    z-index: 2;
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 0 4px rgba(212, 161, 75, 0.45));
}

.levensloop-player .lp-arrow-left:hover,
.levensloop-player .lp-arrow-right:hover {
    box-shadow:
        inset 0 2px 3px rgba(255, 235, 200, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.65),
        inset 0 0 0 1px rgba(212, 161, 75, 0.42),
        0 4px 12px rgba(212, 161, 75, 0.20),
        0 0 14px rgba(212, 161, 75, 0.18);
}

.levensloop-player .lp-arrow-left:active,
.levensloop-player .lp-arrow-right:active {
    transform: scale(0.94);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.7),
        inset 0 -1px 2px rgba(255, 235, 200, 0.10),
        inset 0 0 0 1px rgba(212, 161, 75, 0.40),
        0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .levensloop-player .lp-arrow-left,
    .levensloop-player .lp-arrow-right {
        width: 38px;
        height: 38px;
        margin: 0 4px;
    }
}

/* ===== Vintage aan/uit-flipschakelaar ===== */
.levensloop-player .lp-play-btn {
    width: 58px;
    height: 88px;
    border-radius: 12px;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    flex-shrink: 0;
    padding: 8px 0;
    position: relative;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 235, 200, 0.16) 0%, transparent 50%),
        radial-gradient(circle at 65% 75%, rgba(0, 0, 0, 0.4) 0%, transparent 50%),
        linear-gradient(180deg, #1a1208 0%, #0a0705 100%);
    box-shadow:
        inset 0 2px 4px rgba(255, 235, 200, 0.16),
        inset 0 -4px 8px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(255, 235, 200, 0.10),
        0 8px 22px rgba(0, 0, 0, 0.7),
        0 2px 4px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.25s ease;
}

.levensloop-player .lp-power-label {
    font-size: 8px;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: rgba(244, 236, 224, 0.32);
    transition: color 0.3s ease, text-shadow 0.3s ease;
    pointer-events: none;
    user-select: none;
}

.levensloop-player .lp-power-slot {
    width: 22px;
    height: 52px;
    border-radius: 5px;
    background: radial-gradient(circle at center, #050302 0%, #0c0805 100%);
    box-shadow:
        inset 0 3px 4px rgba(0, 0, 0, 0.95),
        inset 0 0 0 1px rgba(255, 235, 200, 0.05),
        inset 0 -1px 2px rgba(212, 161, 75, 0.06);
    position: relative;
    flex-shrink: 0;
}

.levensloop-player .lp-power-lever {
    position: absolute;
    left: 50%;
    width: 16px;
    height: 24px;
    transform: translateX(-50%);
    bottom: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg,
        #d4d0c8 0%,
        #888178 28%,
        #b8b1a3 55%,
        #4e4640 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        inset 0 -1px 1px rgba(0, 0, 0, 0.5),
        inset 1px 0 1px rgba(255, 255, 255, 0.15),
        inset -1px 0 1px rgba(0, 0, 0, 0.3);
    transition:
        bottom 0.32s cubic-bezier(0.5, 1.8, 0.5, 1),
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.levensloop-player .lp-play-btn.playing .lp-power-lever {
    bottom: 24px;
    background: linear-gradient(180deg,
        #f4e0a8 0%,
        #b87d2a 28%,
        #e6b75c 55%,
        #6b4612 100%);
    box-shadow:
        0 2px 6px rgba(212, 161, 75, 0.55),
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px rgba(0, 0, 0, 0.5),
        inset 1px 0 1px rgba(255, 235, 200, 0.25),
        inset -1px 0 1px rgba(0, 0, 0, 0.3);
}

.levensloop-player .lp-play-btn.playing .lp-power-label-on {
    color: var(--lp-accent);
    text-shadow: 0 0 8px rgba(212, 161, 75, 0.7);
}

.levensloop-player .lp-play-btn:not(.playing) .lp-power-label-off {
    color: rgba(244, 236, 224, 0.72);
}

.levensloop-player .lp-play-btn:hover {
    box-shadow:
        inset 0 2px 4px rgba(255, 235, 200, 0.20),
        inset 0 -4px 8px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(212, 161, 75, 0.40),
        0 8px 22px rgba(212, 161, 75, 0.20),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.levensloop-player .lp-play-btn.playing {
    box-shadow:
        inset 0 2px 4px rgba(255, 235, 200, 0.20),
        inset 0 -4px 8px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(212, 161, 75, 0.55),
        0 0 22px rgba(212, 161, 75, 0.30),
        0 8px 22px rgba(0, 0, 0, 0.7);
}

@media (max-width: 768px) {
    .levensloop-player .lp-play-btn { width: 50px; height: 72px; padding: 6px 0; }
    .levensloop-player .lp-power-slot { height: 42px; }
    .levensloop-player .lp-power-lever { height: 20px; bottom: 3px; }
    .levensloop-player .lp-play-btn.playing .lp-power-lever { bottom: 19px; }
}

/* ===== Analoge tuner-knop ===== */
.levensloop-player .lp-knob-wrap {
    position: relative;
    flex-shrink: 0;
    margin-left: 4px;
}

.levensloop-player .lp-knob {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    position: relative;
    cursor: grab;
    user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 235, 200, 0.22) 0%, transparent 38%),
        radial-gradient(circle at 65% 75%, rgba(0, 0, 0, 0.4) 0%, transparent 40%),
        radial-gradient(circle at center, #1a1208 0%, #0a0705 75%);
    box-shadow:
        inset 0 2px 4px rgba(255, 235, 200, 0.18),
        inset 0 -4px 8px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(255, 235, 200, 0.10),
        0 8px 22px rgba(0, 0, 0, 0.7),
        0 2px 4px rgba(0, 0, 0, 0.5);
    will-change: transform;
}

/* Ridges (kartelrand zoals een echte tuner) */
.levensloop-player .lp-knob::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 235, 200, 0.10) 0deg,
        rgba(255, 235, 200, 0.10) 2.5deg,
        rgba(0, 0, 0, 0.25) 2.5deg,
        rgba(0, 0, 0, 0.25) 5deg,
        transparent 5deg,
        transparent 10deg
    );
    pointer-events: none;
}

/* Binnenste circel (donker, kleiner; legt focus op de pointer) */
.levensloop-player .lp-knob::after {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 235, 200, 0.12) 0%, transparent 50%),
        radial-gradient(circle at center, #0c0805 0%, #050302 100%);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.9),
        inset 0 0 0 1px rgba(255, 235, 200, 0.06),
        inset 0 -1px 2px rgba(212, 161, 75, 0.08);
    pointer-events: none;
}

/* Oranje wijzer/strepje bovenop */
.levensloop-player .lp-knob-pointer {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 14px;
    background: linear-gradient(to bottom, #f4c172, #d4a14b);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(212, 161, 75, 0.85);
    pointer-events: none;
    z-index: 2;
}

/* Klein puntje in het midden */
.levensloop-player .lp-knob-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lp-accent);
    box-shadow: 0 0 6px rgba(212, 161, 75, 0.6);
    pointer-events: none;
    z-index: 2;
}

.levensloop-player .lp-knob:hover {
    box-shadow:
        inset 0 2px 4px rgba(255, 235, 200, 0.22),
        inset 0 -4px 8px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(212, 161, 75, 0.35),
        0 8px 22px rgba(212, 161, 75, 0.20),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.levensloop-player .lp-knob:active,
.levensloop-player .lp-knob.is-dragging {
    cursor: grabbing;
}

.levensloop-player .lp-knob-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--lp-text-dim);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

@media (max-width: 768px) {
    .levensloop-player .lp-knob-wrap { margin-left: 0; }
    .levensloop-player .lp-knob { width: 72px; height: 72px; }
}

.levensloop-player .lp-please-wait-msg {
    position: absolute;
    bottom: 15px;
    right: 40px;
    font-size: 12px;
    color: var(--lp-accent-strong);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* ===== SCRUB BAR ===== */
.levensloop-player .lp-track-progress {
    position: relative;
    /* géén z-index: zorgt dat de progress-row geen eigen stacking-context
       opbouwt, zodat tooltips boven de speler kunnen verschijnen. De slide-
       achter-de-speler werkt nog omdat shkala-wrap z:5 heeft en de progress
       row standaard onder een hogere z-index sibling staat. */
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 0 8px;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.4s ease,
        transform 0.55s cubic-bezier(0.4, 1.4, 0.5, 1),
        margin-top 0.55s cubic-bezier(0.4, 1.4, 0.5, 1);
}

.levensloop-player .lp-track-progress.active {
    opacity: 1;
    pointer-events: auto;
}

/* OFF-staat: slidet onder de speler-rand zodat het lijkt of het er onder verdwijnt */
.levensloop-player:not(.is-radio-on) .lp-track-progress {
    transform: translateY(-50px);
    opacity: 0;
    pointer-events: none;
    margin-top: -20px;
}

/* Tooltips boven de speler tonen: hovered knop in de playbar krijgt een
   hogere z-index dan shkala-wrap (z:5) zodat het tooltip-pseudo zichtbaar is. */
.levensloop-player .lp-track-progress button {
    position: relative;
}

.levensloop-player .lp-track-progress button:hover,
.levensloop-player .lp-track-progress button:focus-visible {
    z-index: 50;
}

.levensloop-player .lp-time-current,
.levensloop-player .lp-time-total {
    font-size: 12px;
    color: var(--lp-text-dim);
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    letter-spacing: 1px;
}

.levensloop-player .lp-time-total { text-align: right; }

.levensloop-player .lp-scrub-bar {
    flex: 1;
    height: 28px;
    background: transparent;
    cursor: pointer;
    position: relative;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
}

.levensloop-player .lp-scrub-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: rgba(255, 235, 200, 0.12);
    border-radius: 999px;
    pointer-events: none;
}

.levensloop-player .lp-scrub-bar:hover .lp-scrub-handle {
    transform: translate(-50%, -50%) scale(1.15);
}

.levensloop-player .lp-scrub-fill {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 6px;
    background: var(--lp-accent);
    border-radius: 999px;
    width: 0%;
    pointer-events: none;
    transition: width 0.1s linear;
}

.levensloop-player .lp-scrub-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--lp-accent);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, left 0.1s linear;
}

.levensloop-player .lp-scrub-restart {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid rgba(255, 235, 200, 0.25);
    border-radius: 50%;
    color: var(--lp-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.levensloop-player .lp-scrub-restart:hover {
    color: var(--lp-accent);
    border-color: var(--lp-accent);
    background: rgba(212, 161, 75, 0.08);
}

.levensloop-player .lp-scrub-restart:hover svg {
    transform: rotate(-25deg);
    transition: transform 0.2s ease;
}

.levensloop-player .lp-scrub-restart svg {
    transition: transform 0.2s ease;
}

.levensloop-player .lp-random-btn {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid rgba(255, 235, 200, 0.25);
    border-radius: 50%;
    color: var(--lp-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.levensloop-player .lp-random-btn:hover {
    color: var(--lp-accent);
    border-color: var(--lp-accent);
    background: rgba(212, 161, 75, 0.08);
}

.levensloop-player .lp-random-btn:active {
    transform: scale(0.92);
}

.levensloop-player .lp-random-btn.is-active {
    color: #2a1d0a;
    background: var(--lp-accent);
    border-color: var(--lp-accent);
}

.levensloop-player .lp-random-btn.is-active:hover {
    background: var(--lp-accent);
    color: #2a1d0a;
}

.levensloop-player .lp-share-btn,
.levensloop-player .lp-photos-btn {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid rgba(255, 235, 200, 0.25);
    border-radius: 50%;
    color: var(--lp-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.levensloop-player .lp-share-btn:hover,
.levensloop-player .lp-photos-btn:hover {
    color: var(--lp-accent);
    border-color: var(--lp-accent);
    background: rgba(212, 161, 75, 0.08);
}

.levensloop-player .lp-share-btn:active,
.levensloop-player .lp-photos-btn:active {
    transform: scale(0.92);
}

.levensloop-player .lp-photos-btn[hidden] {
    display: none;
}

/* ===== Share modal — bottom drawer op mobiel, centered op desktop ===== */
.lp-share-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 4, 0.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 99997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lp-share-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lp-share-modal {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 95%;
    max-width: 520px;
    transform: translateX(-50%) translateY(100%);
    background:
        radial-gradient(600px 300px at 50% 0%, rgba(212, 161, 75, 0.14), transparent 60%),
        rgba(13, 10, 7, 0.96);
    border: 1px solid rgba(255, 235, 200, 0.18);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
    z-index: 99998;
    padding: 16px 24px 28px;
    color: #f4ece0;
    font-family: "Outfit", system-ui, sans-serif;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.4s;
    visibility: hidden;
}

.lp-share-modal.is-open {
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
}

@media (min-width: 720px) {
    .lp-share-modal {
        bottom: 50%;
        transform: translateX(-50%) translateY(120%);
        border-radius: 24px;
        border-bottom: 1px solid rgba(255, 235, 200, 0.18);
    }
    .lp-share-modal.is-open {
        transform: translateX(-50%) translateY(50%);
    }
    .lp-share-handle { display: none; }
}

.lp-share-handle {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 235, 200, 0.25);
    margin: 0 auto 14px;
}

.lp-share-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 235, 200, 0.18);
    color: rgba(244, 236, 224, 0.75);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lp-share-close:hover {
    background: rgba(212, 161, 75, 0.15);
    color: #d4a14b;
    transform: rotate(90deg);
}

.lp-share-eyebrow {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    color: #d4a14b;
    margin-bottom: 8px;
}

.lp-share-track-title {
    text-align: center;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.4rem;
    color: #f4ece0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.lp-share-url {
    background: rgba(255, 235, 200, 0.06);
    border: 1px solid rgba(255, 235, 200, 0.14);
    color: rgba(244, 236, 224, 0.75);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    text-align: center;
    margin-bottom: 18px;
    user-select: all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-share-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 480px) {
    .lp-share-buttons { grid-template-columns: repeat(3, 1fr); }
}

.lp-share-btn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 235, 200, 0.14);
    border-radius: 12px;
    padding: 12px 6px;
    color: rgba(244, 236, 224, 0.85);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
}

.lp-share-btn-item svg {
    width: 22px;
    height: 22px;
}

.lp-share-btn-item:hover {
    background: rgba(212, 161, 75, 0.10);
    border-color: rgba(212, 161, 75, 0.45);
    color: #d4a14b;
    transform: translateY(-2px);
}

.lp-share-btn-item.is-copied {
    background: rgba(212, 161, 75, 0.20);
    border-color: var(--lp-accent, #d4a14b);
    color: var(--lp-accent, #d4a14b);
}

.lp-share-note {
    margin-top: 14px;
    text-align: center;
    font-size: 12px;
    color: rgba(244, 236, 224, 0.55);
    min-height: 18px;
    transition: color 0.2s ease;
}

.lp-share-note.is-success { color: #d4a14b; }

.lp-share-modal[hidden],
.lp-share-backdrop[hidden] {
    display: none;
}

@keyframes lp-random-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.levensloop-player .lp-random-btn.is-spinning svg {
    animation: lp-random-spin 0.6s ease-out;
}

.levensloop-player .lp-lyrics-toggle {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid rgba(255, 235, 200, 0.25);
    border-radius: 50%;
    color: var(--lp-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.levensloop-player .lp-lyrics-toggle:hover {
    color: var(--lp-accent);
    border-color: var(--lp-accent);
}

.levensloop-player .lp-lyrics-toggle.is-active {
    color: #2a1d0a;
    background: var(--lp-accent);
    border-color: var(--lp-accent);
}

.levensloop-player .lp-lyrics-toggle[hidden],
.levensloop-player .lp-lyrics-panel[hidden] {
    display: none;
}

/* ============================================================
   Tooltips (player-stijl)
   ============================================================ */
.levensloop-player [data-tooltip] {
    position: relative;
}

.levensloop-player [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 5px 12px;
    background: rgba(20, 18, 14, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--lp-glass-border);
    border-radius: 999px;
    color: var(--lp-accent);
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 20;
}

.levensloop-player [data-tooltip]:hover::after,
.levensloop-player [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== Lyrics drawer ===== */
/* Backdrop is heel subtiel zodat de speler er nog doorheen zichtbaar én klikbaar blijft. */
.lp-lyrics-backdrop {
    position: fixed;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 30%, rgba(8, 6, 4, 0.4) 100%);
    z-index: 99997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.lp-lyrics-backdrop.is-open {
    opacity: 1;
    /* pointer-events blijft none — speler blijft bedienbaar */
}

.lp-lyrics-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 95%;
    max-width: 1100px;
    height: 85vh;
    max-height: 820px;
    background:
        radial-gradient(800px 400px at 20% 0%, rgba(212, 161, 75, 0.12), transparent 60%),
        rgba(13, 10, 7, 0.94);
    border: 1px solid rgba(255, 235, 200, 0.20);
    border-bottom: none;
    border-radius: 28px 28px 0 0;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.6);
    z-index: 99998;
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.45s;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #f4ece0;
    font-family: "Outfit", system-ui, sans-serif;
}

/* Standaard open: ~50vh zichtbaar zodat speler bovenin nog te zien is */
.lp-lyrics-panel.is-open {
    transform: translateX(-50%) translateY(35vh);
    visibility: visible;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
}

/* Volledig uitgevouwen door slepen aan de handle */
.lp-lyrics-panel.is-open.is-expanded {
    transform: translateX(-50%) translateY(0);
}

/* Tijdens slepen — transition uit zodat het natural voelt */
.lp-lyrics-panel.is-dragging {
    transition: none;
}

.lp-lyrics-header {
    position: relative;
    padding: 12px 28px 14px;
    border-bottom: 1px solid rgba(255, 235, 200, 0.10);
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.lp-lyrics-header:active {
    cursor: grabbing;
}

.lp-lyrics-handle {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 235, 200, 0.35);
    margin: 0 auto 14px;
    transition: background 0.2s ease, width 0.2s ease;
}

.lp-lyrics-header:hover .lp-lyrics-handle {
    background: rgba(212, 161, 75, 0.7);
    width: 64px;
}

.lp-lyrics-title {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    color: #d4a14b;
    text-transform: uppercase;
}

.lp-lyrics-close {
    position: absolute;
    top: 22px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 235, 200, 0.18);
    color: rgba(244, 236, 224, 0.75);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lp-lyrics-close:hover {
    background: rgba(212, 161, 75, 0.15);
    color: #d4a14b;
    transform: rotate(90deg);
}

.lp-lyrics-close svg { display: block; }

.lp-lyrics-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 22vh 24px 53vh;
    text-align: center;
    scrollbar-width: none;
    position: relative;
}

.lp-lyrics-scroll::-webkit-scrollbar { display: none; }

.lp-lyrics-panel::before,
.lp-lyrics-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 2;
}

.lp-lyrics-panel::before {
    top: 56px;
    background: linear-gradient(to bottom, rgba(13, 10, 7, 0.98) 0%, rgba(13, 10, 7, 0) 100%);
}

.lp-lyrics-panel::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(13, 10, 7, 0.98) 0%, rgba(13, 10, 7, 0) 100%);
}

.lp-lyrics-line {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.55;
    margin: 14px 0;
    color: #f4ece0;
    opacity: 0.25;
    transition: opacity 0.4s ease, color 0.4s ease, font-size 0.4s ease, font-weight 0.4s ease, transform 0.4s ease;
}

.lp-lyrics-line.lp-near-3 { opacity: 0.45; }
.lp-lyrics-line.lp-near-2 { opacity: 0.65; }
.lp-lyrics-line.lp-near-1 { opacity: 0.85; }

.lp-lyrics-line.is-active {
    opacity: 1;
    color: #d4a14b;
    font-size: 2rem;
    font-style: italic;
    font-weight: 600;
    transform: scale(1.02);
}

.lp-lyrics-direction {
    font-style: italic;
    font-size: 1.05rem !important;
    letter-spacing: 1px;
}

.lp-lyrics-direction.is-active {
    font-weight: 400;
    transform: none;
    font-size: 1.25rem !important;
    color: rgba(212, 161, 75, 0.85);
}

@media (max-width: 640px) {
    .lp-lyrics-panel { height: 80vh; border-radius: 20px 20px 0 0; }
    .lp-lyrics-line { font-size: 1.2rem; margin: 10px 0; }
    .lp-lyrics-line.is-active { font-size: 1.55rem; }
    .lp-lyrics-scroll { padding: 22vh 16px 55vh; }
}

/* ===== STORY ===== */
.levensloop-player .lp-story-panel {
    margin-top: 40px;
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    min-height: 160px;
}

.levensloop-player .lp-story-year {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--lp-accent);
    margin-bottom: 12px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.levensloop-player .lp-story-year.visible { opacity: 1; }

.levensloop-player .lp-story-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--lp-text-main);
}

.levensloop-player .lp-story-text {
    color: var(--lp-text-dim);
    line-height: 1.7;
    font-size: 1.05rem;
    margin: 0;
}

/* ===== Lightbox (buiten .levensloop-player wrapper) ===== */
.lp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lp-lightbox.visible { display: flex; }

.lp-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 4, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: zoom-out;
}

.lp-lightbox-figure {
    position: relative;
    margin: 0;
    max-width: 90vw;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 1;
}

.lp-lightbox-img {
    flex: 0 1 auto;
    min-height: 0;
    max-width: 100%;
    max-height: calc(100vh - 200px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    display: block;
}

.lp-lightbox-caption,
.lp-lightbox-thumbs {
    flex-shrink: 0;
}

.lp-lightbox-caption {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 16px;
    color: rgba(244, 236, 224, 0.85);
    text-align: center;
    margin: 0;
}

.lp-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lp-lightbox-close svg {
    display: block;
    width: 20px;
    height: 20px;
}

.lp-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: rotate(90deg);
}

.lp-lightbox-prev,
.lp-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lp-lightbox-prev { left: 20px; }
.lp-lightbox-next { right: 20px; }

.lp-lightbox-prev:hover,
.lp-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%) scale(1.08);
}

.lp-lightbox-prev svg,
.lp-lightbox-next svg {
    display: block;
}

.lp-lightbox-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px 2px 0;
    scrollbar-width: thin;
}

.lp-lightbox-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lp-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-lightbox-thumb:hover {
    opacity: 0.85;
}

.lp-lightbox-thumb.active {
    opacity: 1;
    border-color: var(--lp-accent, #d4a14b);
}

@media (max-width: 640px) {
    .lp-lightbox { padding: 16px; }
    .lp-lightbox-prev,
    .lp-lightbox-next {
        width: 40px;
        height: 40px;
    }
    .lp-lightbox-prev { left: 8px; }
    .lp-lightbox-next { right: 8px; }
    .lp-lightbox-thumb { width: 44px; height: 44px; }
    .lp-lightbox-img { max-height: calc(100vh - 170px); }
}

@media (max-height: 600px) {
    .lp-lightbox-img { max-height: calc(100vh - 160px); }
    .lp-lightbox-thumb { width: 40px; height: 40px; }
}

/* ===== Empty state ===== */
.levensloop-player .lp-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: var(--lp-glass-bg);
    border: 1px dashed var(--lp-glass-border);
    border-radius: 18px;
    color: var(--lp-text-dim);
    line-height: 1.6;
}

.levensloop-player .lp-empty-state strong { color: var(--lp-text-main); }
.levensloop-player .lp-empty-state em { font-style: italic; color: var(--lp-accent); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .levensloop-player .lp-shkala-box {
        flex-direction: column;
        height: auto;
        gap: 25px;
        padding: 25px 20px;
    }
    .levensloop-player .lp-scale-wrapper { width: 100%; }
    .levensloop-player .lp-scale-container { margin: 0 10px; }
}

/* ============================================================
   MIX-TAPE MODE — vintage open-reel tape-deck.
   Houten zijpanelen, geborsteld aluminium chassis, twee spoelen
   met meegroeiende tape, magnetische koppen + capstan en een
   4-cijferige mechanische tape-counter.
   ============================================================ */

@property --tape-fill {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.levensloop-player.is-tape-mode .lp-tape-wrap {
    position: relative;
    margin: 24px auto 0; /* géén bottom-margin zodat de playbar er direct onder kan slidde */
    max-width: 920px;
    z-index: 5; /* boven de playbar zodat 'ie er onder verdwijnt in OFF-stand */
}

/* In tape-mode de playbar even breed als het tape-deck (gecentreerd).
   GEEN z-index hier: anders ontstaat er een nieuwe stacking context en kan
   de hover-tooltip op buttons niet meer boven de tape-wrap (z:5) komen.
   De slide-achter werkt al via document-order: wrap heeft z:5, playbar z:auto. */
.levensloop-player.is-tape-mode .lp-track-progress {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 18px;
}

/* OFF-stand in tape-mode: ietsje minder ver omhoog dan radio's -50/-20px,
   want de deck-bodem zit hoger. Voldoende om geheel achter de chassis te
   verdwijnen zonder dat we 'm "laat" zien tevoorschijn komen. */
.levensloop-player.is-tape-mode:not(.is-radio-on) .lp-track-progress {
    transform: translateY(-40px);
    margin-top: -22px;
}

/* Hele deck inclusief houten zijpanelen */
.levensloop-player .lp-tape-deck {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr 18px;
    grid-template-areas: "wood-l chassis wood-r";
    border-radius: 14px;
    overflow: visible;
    isolation: isolate;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.levensloop-player .lp-tape-wood--l { grid-area: wood-l; }
.levensloop-player .lp-tape-wood--r { grid-area: wood-r; }
.levensloop-player .lp-tape-chassis { grid-area: chassis; min-width: 0; }

/* Houten zijpanelen — walnoot-look met fineer */
.levensloop-player .lp-tape-wood {
    width: 18px;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(120, 70, 30, 0.18) 0px,
            rgba(120, 70, 30, 0.18) 2px,
            rgba(60, 30, 12, 0.25) 2px,
            rgba(60, 30, 12, 0.25) 3px
        ),
        linear-gradient(180deg, #6a3a18 0%, #4a2810 50%, #2a1606 100%);
    border-radius: 14px 0 0 14px;
    box-shadow:
        inset -2px 0 4px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 200, 140, 0.15);
}

.levensloop-player .lp-tape-wood--r {
    border-radius: 0 14px 14px 0;
    box-shadow:
        inset 2px 0 4px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 200, 140, 0.15);
}

/* Centrale aluminium chassis */
.levensloop-player .lp-tape-chassis {
    position: relative;
    padding: 20px 28px 22px;
    background:
        /* zachte verticale belichting voor "brushed aluminium" look */
        repeating-linear-gradient(
            90deg,
            rgba(255, 240, 220, 0.02) 0px,
            rgba(255, 240, 220, 0.02) 1px,
            transparent 1px,
            transparent 3px
        ),
        linear-gradient(180deg,
            #4a4036 0%,
            #3a3128 35%,
            #2c2520 70%,
            #1f1a14 100%);
    border-top: 1px solid rgba(255, 235, 200, 0.18);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

/* Geëtst brand-label bovenaan */
.levensloop-player .lp-tape-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 235, 200, 0.06);
    margin-bottom: 18px;
    user-select: none;
}

.levensloop-player .lp-tape-brand-mark {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 5px;
    color: rgba(212, 161, 75, 0.7);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.6),
        0 -1px 0 rgba(255, 235, 200, 0.05);
}

.levensloop-player .lp-tape-brand-model {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: rgba(212, 161, 75, 0.28);
}

/* Mechaniek: 3-koloms layout met spoelen + tape-pad */
.levensloop-player .lp-tape-mechanism {
    position: relative;
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr minmax(140px, 200px);
    align-items: center;
    gap: 0;
    padding: 8px 0 16px;
}

/* Mount per spoel — zwarte chassis-opening waarin de spoel zit */
.levensloop-player .lp-tape-reel-mount {
    position: relative;
    padding: 14px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(0, 0, 0, 0.55) 50%,
            rgba(0, 0, 0, 0.85) 90%);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.7),
        inset 0 -2px 4px rgba(255, 235, 200, 0.06);
    justify-self: center;
    width: fit-content;
    z-index: 2; /* boven het tape-strand zodat dat netjes achter de spoel verdwijnt */
}

/* De spoel zelf */
.levensloop-player .lp-tape-reel {
    position: relative;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            #2a221a 0%,
            #14100a 65%,
            #060403 100%);
    border: 1px solid rgba(212, 161, 75, 0.15);
    box-shadow:
        inset 0 2px 4px rgba(255, 235, 200, 0.06),
        inset 0 -3px 8px rgba(0, 0, 0, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.5);
    --tape-fill: 0.5;
    transition: --tape-fill 0.4s linear;
}

/* Tape-band — concentrische ring waarvan de dikte meebeweegt met --tape-fill.
   Volle spoel = band tot dicht bij de hub. Lege spoel = band alleen aan de rand. */
/* Tape gewikkeld rond de spoel — concentrische "coil"-textuur via repeating-radial-gradient,
   gemaskeerd zodat 'ie alleen verschijnt tussen de hub en de buitenrand. De inner-radius
   schuift mee met --tape-fill: hoe voller, hoe dichter de coils bij de hub komen. */
.levensloop-player .lp-tape-reel-band {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background:
        /* Subtiele glans bovenaan voor 3D-feel */
        radial-gradient(circle at 50% 32%, rgba(255, 220, 160, 0.05) 0%, transparent 45%),
        /* Het coil-patroon zelf: heel veel dunne afwisselende bruintinten suggereren
           gewikkelde magnetische tape. ~2.3px per "wikkel" */
        repeating-radial-gradient(circle at 50% 50%,
            #1a0e05 0px,
            #1a0e05 1.1px,
            #2e1c0c 1.1px,
            #2e1c0c 2.3px),
        /* Donkere basis voor depth */
        #15090a;
    -webkit-mask: radial-gradient(circle at 50% 50%,
        transparent 0px,
        transparent calc(23px + (1 - var(--tape-fill)) * 38px),
        #000 calc(23px + (1 - var(--tape-fill)) * 38px + 0.5px),
        #000 calc(77px - var(--tape-fill) * 4px),
        transparent calc(78px - var(--tape-fill) * 4px));
    mask: radial-gradient(circle at 50% 50%,
        transparent 0px,
        transparent calc(23px + (1 - var(--tape-fill)) * 38px),
        #000 calc(23px + (1 - var(--tape-fill)) * 38px + 0.5px),
        #000 calc(77px - var(--tape-fill) * 4px),
        transparent calc(78px - var(--tape-fill) * 4px));
    box-shadow:
        inset 0 0 6px rgba(0, 0, 0, 0.6),
        inset 0 0 1px rgba(212, 161, 75, 0.08);
    pointer-events: none;
}

/* Tape-rand: een net iets lichtere outer ring rond het hele wikkel-pakketje
   geeft de illusie van een gewikkelde tape met scherpe outer-edge. */
.levensloop-player .lp-tape-reel-band::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(60, 35, 15, 0.6);
    -webkit-mask: radial-gradient(circle at 50% 50%,
        transparent 0px,
        transparent calc(75px - var(--tape-fill) * 4px),
        #000 calc(76px - var(--tape-fill) * 4px),
        #000 calc(80px - var(--tape-fill) * 4px),
        transparent calc(81px - var(--tape-fill) * 4px));
    mask: radial-gradient(circle at 50% 50%,
        transparent 0px,
        transparent calc(75px - var(--tape-fill) * 4px),
        #000 calc(76px - var(--tape-fill) * 4px),
        #000 calc(80px - var(--tape-fill) * 4px),
        transparent calc(81px - var(--tape-fill) * 4px));
}

.levensloop-player .lp-tape-reel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #f4c172 0%, var(--lp-accent) 35%, #7a5826 75%, #2a1d0a 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 235, 200, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Centrale schroef in de hub */
.levensloop-player .lp-tape-reel-screw {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #1a1208 0%, #050302 100%);
    z-index: 3;
}

.levensloop-player .lp-tape-reel-screw::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 1px;
    background: rgba(255, 235, 200, 0.25);
    transform: translate(-50%, -50%) rotate(-30deg);
}

/* Drie open vensters tussen de spaken — radiaal */
.levensloop-player .lp-tape-reel-spoke {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 65px;
    margin-left: -4px;
    margin-top: -32px;
    background: linear-gradient(180deg, rgba(20, 14, 8, 0.92) 0%, rgba(8, 5, 3, 0.95) 100%);
    border-radius: 4px;
    transform-origin: center center;
    transform: rotate(var(--a, 0deg));
    box-shadow: inset 0 0 2px rgba(212, 161, 75, 0.1);
    z-index: 1;
}

/* Spoelen draaien terwijl de tape speelt. Rechter loopt iets sneller voor leven. */
.levensloop-player.is-tape-mode.is-radio-on .lp-tape-reel {
    animation: lp-tape-reel-spin 2.4s linear infinite;
}

.levensloop-player.is-tape-mode.is-radio-on .lp-tape-reel--r {
    animation-duration: 2s;
}

@keyframes lp-tape-reel-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Middenzone tussen de spoelen — flex-column met balance bovenin, tape-pad onderin */
.levensloop-player .lp-tape-center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    padding: 6px 0 0;
}

/* Top-zone in het midden: balans bovenaan gecentreerd, mix-toggle eronder ook gecentreerd */
.levensloop-player .lp-tape-top-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ===== Auto-mix toggle (analoge knop met LED) ===== */
.levensloop-player .lp-mix-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(20, 14, 8, 0.92) 0%, rgba(8, 5, 3, 0.92) 100%);
    border: 1px solid rgba(212, 161, 75, 0.18);
    border-radius: 8px;
    padding: 5px 9px 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(212, 161, 75, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 200, 0.05),
        inset 0 -1px 1px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.5);
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.levensloop-player .lp-mix-toggle:hover {
    color: rgba(212, 161, 75, 0.7);
    border-color: rgba(212, 161, 75, 0.35);
}

.levensloop-player .lp-mix-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(80, 50, 25, 0.5) 0%, rgba(30, 18, 8, 0.85) 80%);
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    transition: background 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
}

.levensloop-player .lp-mix-toggle.is-on {
    color: var(--lp-accent);
    border-color: rgba(212, 161, 75, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 200, 0.12),
        inset 0 -1px 1px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(212, 161, 75, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.levensloop-player .lp-mix-toggle.is-on .lp-mix-led {
    background: radial-gradient(circle at 35% 30%, #f4e0a8 0%, var(--lp-accent) 45%, #7a5826 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        0 0 6px rgba(212, 161, 75, 0.85),
        0 0 12px rgba(212, 161, 75, 0.4);
}

/* ===== Analoge balans-fader ===== */
.levensloop-player .lp-balance {
    width: 70%;
    max-width: 240px;
    padding: 8px 14px 12px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(15, 10, 6, 0.85) 0%, rgba(8, 5, 3, 0.85) 100%);
    border: 1px solid rgba(255, 235, 200, 0.10);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.55),
        inset 0 -1px 0 rgba(255, 235, 200, 0.04);
}

.levensloop-player .lp-balance-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: rgba(212, 161, 75, 0.5);
    user-select: none;
}

.levensloop-player .lp-balance-label-side {
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(212, 161, 75, 0.78);
}

.levensloop-player .lp-balance-label-name {
    font-size: 7px;
    letter-spacing: 2px;
}

.levensloop-player .lp-balance-track {
    position: relative;
    height: 18px;
    border-radius: 4px;
    background:
        linear-gradient(180deg, #050302 0%, #110a05 100%);
    box-shadow:
        inset 0 3px 4px rgba(0, 0, 0, 0.85),
        inset 0 -1px 0 rgba(255, 235, 200, 0.04),
        inset 0 0 0 1px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    touch-action: none;
}

/* Schaal-streepjes (zeven, middelste oranje als center-detent) */
.levensloop-player .lp-balance-marks {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    pointer-events: none;
}

.levensloop-player .lp-balance-marks i {
    width: 1px;
    height: 6px;
    background: rgba(212, 161, 75, 0.22);
}

.levensloop-player .lp-balance-marks i.is-center {
    width: 2px;
    height: 9px;
    background: rgba(244, 193, 114, 0.7);
    box-shadow: 0 0 4px rgba(212, 161, 75, 0.5);
}

/* Chroom-knop met horizontale grooves */
.levensloop-player .lp-balance-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 22px;
    border-radius: 3px;
    background:
        linear-gradient(180deg,
            #f0ece0 0%,
            #d4cebe 18%,
            #8c8478 50%,
            #b8b0a2 80%,
            #3a342a 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.7),
        inset 1px 0 1px rgba(255, 255, 255, 0.25),
        inset -1px 0 1px rgba(0, 0, 0, 0.35),
        inset 0 -1px 1px rgba(0, 0, 0, 0.55),
        0 2px 5px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.45);
    cursor: ew-resize;
    touch-action: none;
    transition: box-shadow 0.15s ease, transform 0.05s ease;
}

/* Horizontale grooves op de knop voor grip-feel */
.levensloop-player .lp-balance-knob::before {
    content: "";
    position: absolute;
    inset: 4px 7px;
    background:
        repeating-linear-gradient(180deg,
            rgba(0, 0, 0, 0.55) 0px,
            rgba(0, 0, 0, 0.55) 1px,
            rgba(255, 255, 255, 0.18) 1px,
            rgba(255, 255, 255, 0.18) 3px);
    border-radius: 1px;
    pointer-events: none;
}

.levensloop-player .lp-balance-knob:hover {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.7),
        inset 1px 0 1px rgba(255, 255, 255, 0.25),
        inset -1px 0 1px rgba(0, 0, 0, 0.35),
        inset 0 -1px 1px rgba(0, 0, 0, 0.55),
        0 2px 5px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 0 8px rgba(212, 161, 75, 0.35);
}

.levensloop-player .lp-balance-knob.is-dragging {
    transform: translate(-50%, -50%) scale(1.04);
}

/* Bij ON-stand glimt 'ie heel subtiel zoals een echte schuif */
.levensloop-player.is-tape-mode.is-radio-on .lp-balance-knob {
    background:
        linear-gradient(180deg,
            #fbf7e8 0%,
            #d4cebe 18%,
            #8c8478 50%,
            #b8b0a2 80%,
            #3a342a 100%);
}

/* Tape-pad: SVG-curve met magnetische koppen + capstan ertussen.
   Negatieve marges links/rechts trekken het pad ÍN de reel-kolommen zodat
   de tape visueel "in de spoelen" verdwijnt. SVG mag uit z'n container
   tekenen (overflow:visible). De reel-mount staat op z-index:2 dus dekt
   het uiteinde van het bandje af. */
.levensloop-player .lp-tape-path {
    position: relative;
    height: 110px;
    width: auto;             /* moet door align-items:stretch op de parent vol uitvullen */
    align-self: stretch;     /* volledige breedte van de middenkolom innemen */
    margin: 0 -100px;        /* daarna 100px in elke spoel-kolom uitsteken */
    margin-top: auto;        /* en zelf naar de bodem van de flex-column */
    z-index: 1;
    box-sizing: border-box;
}

.levensloop-player .lp-tape-strand-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Tape-lichaam: massief bruin met lichte schaduw */
.levensloop-player .lp-tape-strand-body {
    stroke: #3a2814;
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

/* "Flow"-laag: dunne lichtere streep met streepjes-patroon die langs het pad
   schuift, wat het effect geeft dat de tape echt beweegt van spoel naar spoel. */
.levensloop-player .lp-tape-strand-flow {
    stroke: rgba(244, 193, 114, 0.35);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 8 14;
    stroke-dashoffset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.levensloop-player.is-tape-mode.is-radio-on .lp-tape-strand-flow {
    opacity: 1;
    animation: lp-tape-strand-flow 0.85s linear infinite;
}

.levensloop-player.is-tape-mode.is-spooling-ff .lp-tape-strand-flow {
    opacity: 1;
    animation: lp-tape-strand-flow 0.12s linear infinite !important;
}

.levensloop-player.is-tape-mode.is-spooling-rew .lp-tape-strand-flow {
    opacity: 1;
    animation: lp-tape-strand-flow-rev 0.12s linear infinite !important;
}

@keyframes lp-tape-strand-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -22; }
}

@keyframes lp-tape-strand-flow-rev {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: 22; }
}

/* Chroom-blokken: erase, record, play head — rechtop in het pad */
.levensloop-player .lp-tape-head {
    position: absolute;
    top: 62px;
    width: 18px;
    height: 30px;
    border-radius: 2px 2px 4px 4px;
    background:
        linear-gradient(180deg,
            #d4d0c4 0%,
            #a8a298 35%,
            #6e6a60 70%,
            #3a342a 100%);
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.levensloop-player .lp-tape-head::before {
    content: attr(data-label);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: ui-monospace, monospace;
    font-size: 7px;
    font-weight: 700;
    color: rgba(212, 161, 75, 0.4);
    letter-spacing: 1px;
}

/* Donkere "gap" in het midden van elke kop = de spleet waar de tape langs gaat */
.levensloop-player .lp-tape-head::after {
    content: "";
    position: absolute;
    top: 35%;
    left: 50%;
    width: 1.5px;
    height: 35%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
}

/* Posities zijn % van de tape-path container die nu -100px in elke spoel-kolom
   uitsteekt. Deze waarden houden de koppen visueel netjes in het midden van
   het tape-pad, dichtbij elkaar als een echte stereo-kop-cluster. */
.levensloop-player .lp-tape-head--erase { left: 38%; }
.levensloop-player .lp-tape-head--rec   { left: 47%; }
.levensloop-player .lp-tape-head--play  { left: 56%; }

/* Capstan = chroom-stift die de tape voortbeweegt + pinch roller */
.levensloop-player .lp-tape-capstan {
    position: absolute;
    top: 64px;
    right: 36%;
    width: 8px;
    height: 26px;
    border-radius: 4px;
    background:
        linear-gradient(180deg,
            #f0ece0 0%,
            #b8b2a4 50%,
            #5a544a 100%);
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.6),
        inset -1px 0 0 rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.4);
}

.levensloop-player.is-tape-mode.is-radio-on .lp-tape-capstan {
    animation: lp-capstan-spin 0.3s linear infinite;
}

@keyframes lp-capstan-spin {
    from { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.6), inset -1px 0 0 rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4); }
    50%  { box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6), inset 1px 0 0 rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4); }
    to   { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.6), inset -1px 0 0 rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4); }
}

.levensloop-player .lp-tape-pinch {
    position: absolute;
    top: 62px;
    right: 33%;
    width: 16px;
    height: 30px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 30% 30%,
            #4a3a30 0%,
            #2a201a 60%,
            #100a06 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 200, 140, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ===== Stereo VU-meters (L/R) + DJ-filter-knop in het midden ===== */
.levensloop-player .lp-tape-meter-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

/* DJ filter — analoge rotary knob, draait van -135° (HPF) tot +135° (LPF) */
.levensloop-player .lp-filter-knob-wrap {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 6px;
    padding: 4px 4px 0;
}

.levensloop-player .lp-filter-side {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(212, 161, 75, 0.55);
    user-select: none;
}

.levensloop-player .lp-filter-knob {
    grid-row: span 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: relative;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 235, 200, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 65% 75%, rgba(0, 0, 0, 0.45) 0%, transparent 55%),
        radial-gradient(circle at center, #1a1208 0%, #060403 100%);
    border: 1px solid rgba(212, 161, 75, 0.25);
    box-shadow:
        inset 0 1px 1px rgba(255, 235, 200, 0.12),
        inset 0 -2px 4px rgba(0, 0, 0, 0.8),
        0 3px 6px rgba(0, 0, 0, 0.55);
    cursor: grab;
    touch-action: none;
    transform: rotate(0deg);
    transition: transform 0.05s linear, box-shadow 0.2s ease;
}

.levensloop-player .lp-filter-knob:hover {
    box-shadow:
        inset 0 1px 1px rgba(255, 235, 200, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(212, 161, 75, 0.25),
        0 3px 6px rgba(0, 0, 0, 0.55);
}

.levensloop-player .lp-filter-knob.is-dragging { cursor: grabbing; }

/* Wijzer / indicator-lijn op de knop */
.levensloop-player .lp-filter-knob-pointer {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 2px;
    height: 14px;
    margin-left: -1px;
    border-radius: 1px;
    background: linear-gradient(to bottom, #f4c172 0%, var(--lp-accent) 100%);
    box-shadow: 0 0 4px rgba(212, 161, 75, 0.7);
}

/* Centraal puntje */
.levensloop-player .lp-filter-knob-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f4c172 0%, var(--lp-accent) 60%, #2a1d0a 100%);
}

.levensloop-player .lp-filter-knob-label {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
    font-family: ui-monospace, monospace;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(212, 161, 75, 0.4);
    padding-top: 2px;
    user-select: none;
}

/* Wanneer filter actief (niet in midden): geef rand een lichte amber-gloed */
.levensloop-player .lp-filter-knob.is-active {
    border-color: rgba(212, 161, 75, 0.55);
    box-shadow:
        inset 0 1px 1px rgba(255, 235, 200, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(212, 161, 75, 0.45),
        0 3px 6px rgba(0, 0, 0, 0.55);
}

.levensloop-player .lp-tape-meter {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 5px 7px 6px 8px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(8, 5, 3, 0.95) 0%, rgba(15, 10, 5, 0.95) 100%);
    border: 1px solid rgba(212, 161, 75, 0.22);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.75),
        inset 0 -1px 0 rgba(255, 235, 200, 0.04);
}

.levensloop-player .lp-tape-meter-label {
    display: flex;
    align-items: flex-end;
    padding-bottom: 3px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(212, 161, 75, 0.75);
}

/* Donkere meter-face met amber lijntjes — zelfde palet als de counter */
.levensloop-player .lp-tape-meter-face {
    position: relative;
    width: 78px;
    height: 32px;
    border-radius: 4px 4px 3px 3px;
    background:
        radial-gradient(ellipse 80px 60px at 50% 95%,
            rgba(40, 28, 14, 0.85) 0%,
            rgba(20, 14, 8, 0.92) 70%,
            rgba(10, 6, 4, 0.95) 100%);
    box-shadow:
        inset 0 1px 1px rgba(212, 161, 75, 0.08),
        inset 0 -1px 2px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.levensloop-player .lp-tape-meter-marks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.levensloop-player .lp-tape-meter-marks i {
    --r: 28px;
    position: absolute;
    bottom: calc(cos(var(--a)) * var(--r) - 1px);
    left: calc(50% + sin(var(--a)) * var(--r) - 0.5px);
    width: 1px;
    height: 3px;
    background: rgba(212, 161, 75, 0.55);
    transform-origin: center bottom;
    transform: rotate(var(--a));
}

.levensloop-player .lp-tape-meter-marks i.is-mid {
    height: 4px;
    background: rgba(244, 193, 114, 0.75);
}

.levensloop-player .lp-tape-meter-marks i.is-red {
    height: 4px;
    background: rgba(220, 110, 60, 0.85);
    box-shadow: 0 0 2px rgba(220, 110, 60, 0.45);
}

.levensloop-player .lp-tape-meter-needle {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 1px;
    height: 30px;
    background: linear-gradient(to top,
        rgba(212, 161, 75, 0.4) 0%,
        rgba(212, 161, 75, 0.9) 40%,
        #f4c172 95%,
        #fff 100%);
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(-50deg);
    transition: transform 0.05s linear;
    box-shadow: 0 0 2px rgba(212, 161, 75, 0.5);
}

.levensloop-player .lp-tape-meter-pivot {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4a3a20 0%, #1a1208 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 235, 200, 0.3),
        0 1px 1px rgba(0, 0, 0, 0.5);
}

.levensloop-player .lp-tape-meter-peak {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a1810 0%, #160805 80%);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.65);
    transition: background 0.05s linear, box-shadow 0.05s linear;
}

.levensloop-player .lp-tape-meter-peak.is-lit {
    background: radial-gradient(circle at 35% 30%, #ff8c50 0%, #c84810 70%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        0 0 5px rgba(255, 120, 60, 0.7),
        0 0 10px rgba(255, 120, 60, 0.35);
}

@media (max-width: 768px) {
    .levensloop-player .lp-tape-meter-face { width: 60px; height: 28px; }
    .levensloop-player .lp-tape-meter-needle { height: 26px; }
    .levensloop-player .lp-tape-meter-marks i { --r: 22px; }
}

/* Onderlade: counter | cover+info | aan-uit-flip */
.levensloop-player .lp-tape-undertray {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2.2fr minmax(140px, 1fr);
    align-items: center;
    gap: 22px;
    padding: 18px 4px 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 0 rgba(255, 235, 200, 0.06);
    margin-top: 6px;
}

/* 4-digit mechanische tape-counter */
.levensloop-player .lp-tape-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.levensloop-player .lp-tape-counter-screen {
    padding: 6px 10px;
    border-radius: 4px;
    background:
        linear-gradient(180deg, #1a1208 0%, #0a0604 100%);
    border: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.85),
        inset 0 -1px 0 rgba(255, 235, 200, 0.04);
    transition:
        background 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}

.levensloop-player.is-tape-mode.is-radio-on .lp-tape-counter-screen {
    background:
        radial-gradient(ellipse 70% 90% at 50% 40%, rgba(212, 161, 75, 0.12) 0%, transparent 70%),
        linear-gradient(180deg, #221608 0%, #110a04 100%);
    border-color: rgba(212, 161, 75, 0.45);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.85),
        inset 0 0 10px rgba(212, 161, 75, 0.18),
        inset 0 -1px 0 rgba(255, 235, 200, 0.08),
        0 0 10px rgba(212, 161, 75, 0.20);
}

/* "COUNTER" label dimt mee */
.levensloop-player .lp-tape-counter-label {
    transition: color 0.5s ease;
    color: rgba(212, 161, 75, 0.2);
}

.levensloop-player.is-tape-mode.is-radio-on .lp-tape-counter-label {
    color: rgba(212, 161, 75, 0.55);
}

.levensloop-player .lp-tape-counter-digits {
    font-family: "DSEG7 Classic", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4px;
    color: rgba(244, 193, 114, 0.45);
    text-shadow:
        0 0 4px rgba(212, 161, 75, 0.25),
        0 1px 0 rgba(0, 0, 0, 0.6);
    font-variant-numeric: tabular-nums;
}

.levensloop-player.is-tape-mode.is-radio-on .lp-tape-counter-digits {
    color: var(--lp-accent);
    text-shadow:
        0 0 5px rgba(212, 161, 75, 0.7),
        0 0 10px rgba(212, 161, 75, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.6);
}

.levensloop-player .lp-tape-counter-label {
    font-family: ui-monospace, monospace;
    font-size: 7px;
    letter-spacing: 2px;
    color: rgba(212, 161, 75, 0.4);
}

/* Centrale info-venster met cover */
.levensloop-player .lp-tape-window {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(8, 5, 3, 0.92) 0%, rgba(15, 10, 6, 0.95) 100%);
    border: 1px solid rgba(255, 235, 200, 0.08);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.7),
        inset 0 -1px 0 rgba(255, 235, 200, 0.04);
    min-height: 110px;
    transition:
        background 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}

/* Display licht op zodra de speler aan staat */
.levensloop-player.is-tape-mode.is-radio-on .lp-tape-window {
    background:
        radial-gradient(ellipse 80% 90% at 50% 30%, rgba(212, 161, 75, 0.10) 0%, transparent 70%),
        linear-gradient(180deg, rgba(18, 12, 6, 0.96) 0%, rgba(30, 20, 10, 0.96) 100%);
    border-color: rgba(212, 161, 75, 0.40);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.7),
        inset 0 0 18px rgba(212, 161, 75, 0.10),
        inset 0 -1px 0 rgba(255, 235, 200, 0.06),
        0 0 18px rgba(212, 161, 75, 0.15);
}

.levensloop-player.is-tape-mode .lp-tape-cover-frame {
    position: relative;
    display: block;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
}

.levensloop-player.is-tape-mode .lp-tape-cover-frame .lp-rectangle {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.levensloop-player .lp-tape-info {
    flex: 1;
    min-width: 0;
}

.levensloop-player .lp-tape-section-label {
    font-family: ui-monospace, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(212, 161, 75, 0.3);
    margin-bottom: 6px;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.levensloop-player.is-tape-mode.is-radio-on .lp-tape-section-label {
    color: var(--lp-accent);
    text-shadow: 0 0 4px rgba(212, 161, 75, 0.55);
}

.levensloop-player .lp-tape-track-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(244, 236, 224, 0.45);
    line-height: 1.3;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.levensloop-player.is-tape-mode.is-radio-on .lp-tape-track-title {
    color: var(--lp-text-main);
    text-shadow: 0 0 6px rgba(212, 161, 75, 0.25);
}

/* lp-track-counter in tape-mode dimmt mee */
.levensloop-player.is-tape-mode .lp-track-counter {
    color: rgba(244, 236, 224, 0.30);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.levensloop-player.is-tape-mode.is-radio-on .lp-track-counter {
    color: var(--lp-accent);
    text-shadow: 0 0 4px rgba(212, 161, 75, 0.55);
}

/* Aan-uit-flip in tape-mode: gewoon centreren in zijn kolom */
.levensloop-player .lp-tape-power {
    display: flex;
    justify-content: center;
}

.levensloop-player.is-tape-mode .lp-play-btn {
    margin: 0;
}

/* Tape-mode reset: track-counter wordt inline tekst i.p.v. absolute pill */
.levensloop-player.is-tape-mode .lp-track-counter {
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    height: auto;
    transform: none !important;
    opacity: 1 !important;
    color: var(--lp-text-dim);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    text-shadow: none;
    display: block;
}

.levensloop-player.is-tape-mode .lp-year-badge {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    padding: 2px 8px;
}

/* ===== FF/REW transport-knoppen — alleen in tape-mode in de playbar ===== */
.levensloop-player .lp-tape-transport {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 235, 200, 0.22);
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 235, 200, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #1a1208 0%, #0a0705 100%);
    color: var(--lp-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.05s ease;
    flex-shrink: 0;
    padding: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 200, 0.10),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.levensloop-player .lp-tape-transport:hover {
    color: var(--lp-accent);
    border-color: var(--lp-accent);
}

.levensloop-player .lp-tape-transport:active,
.levensloop-player .lp-tape-transport.is-spooling {
    transform: translateY(1px);
    color: var(--lp-accent);
    border-color: var(--lp-accent);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.7),
        0 0 8px rgba(212, 161, 75, 0.35);
}

/* Tijdens spoelen draaien de reels heel snel via een snellere keyframe */
.levensloop-player.is-tape-mode.is-spooling-ff .lp-tape-reel,
.levensloop-player.is-tape-mode.is-spooling-ff .lp-tape-reel--r {
    animation: lp-tape-reel-spin 0.35s linear infinite !important;
}

.levensloop-player.is-tape-mode.is-spooling-rew .lp-tape-reel,
.levensloop-player.is-tape-mode.is-spooling-rew .lp-tape-reel--r {
    animation: lp-tape-reel-spin-rev 0.35s linear infinite !important;
}

@keyframes lp-tape-reel-spin-rev {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@media (max-width: 768px) {
    .levensloop-player .lp-tape-mechanism {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .levensloop-player .lp-tape-path { display: none; }
    .levensloop-player .lp-tape-reel { width: 130px; height: 130px; }
    .levensloop-player .lp-tape-undertray {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .levensloop-player .lp-tape-window { flex-direction: column; text-align: center; }
    .levensloop-player.is-tape-mode .lp-tape-cover-frame { width: 80px; height: 80px; }
}

@media (max-width: 768px) {
    .levensloop-player .lp-tape-deck {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 20px;
    }
    .levensloop-player .lp-tape-reel { width: 130px; height: 130px; }
    .levensloop-player .lp-tape-reel-spoke { height: 50px; margin-top: -25px; }
    .levensloop-player .lp-tape-reel-hub { width: 36px; height: 36px; }
    .levensloop-player .lp-tape-window { flex-direction: column; text-align: center; }
    .levensloop-player .lp-tape-cover-frame { width: 100px; height: 100px; }
}

/* ============================================================
   MIXTAPE FAV DRAWER — off-canvas met sleepbare track-cards
   ============================================================ */
.levensloop-player .lp-tape-fav-btn { color: var(--lp-text-dim); }
.levensloop-player .lp-tape-fav-btn.is-active {
    color: #ff6c80;
    border-color: rgba(255, 108, 128, 0.55);
    box-shadow: 0 0 8px rgba(255, 108, 128, 0.35);
}

.levensloop-player .lp-fav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 99996;
}
.levensloop-player .lp-fav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.levensloop-player .lp-fav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100vw);
    background: linear-gradient(180deg, #1a140c 0%, #0e0907 100%);
    border-left: 1px solid rgba(212, 161, 75, 0.20);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.55);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.5, 1.2, 0.5, 1);
    z-index: 99997;
    display: flex;
    flex-direction: column;
    color: var(--lp-text-main);
}
.levensloop-player .lp-fav-drawer.is-open { transform: translateX(0); }

.levensloop-player .lp-fav-header {
    padding: 22px 24px 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 235, 200, 0.08);
}
.levensloop-player .lp-fav-eyebrow {
    font-family: ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--lp-accent);
    margin-bottom: 6px;
}
.levensloop-player .lp-fav-title {
    margin: 0 0 6px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 26px;
    font-weight: 600;
    color: var(--lp-text-main);
    line-height: 1.1;
}
.levensloop-player .lp-fav-sub {
    margin: 0;
    font-size: 12px;
    color: var(--lp-text-dim);
    line-height: 1.4;
}
.levensloop-player .lp-fav-close {
    background: transparent;
    border: 1px solid rgba(255, 235, 200, 0.2);
    border-radius: 50%;
    color: var(--lp-text-dim);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.levensloop-player .lp-fav-close:hover { color: var(--lp-accent); border-color: var(--lp-accent); }

/* Mode-switch + favcount */
.levensloop-player .lp-fav-modeswitch {
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 235, 200, 0.05);
}
.levensloop-player .lp-fav-modeswitch-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.levensloop-player .lp-fav-modeswitch-label input { display: none; }
.levensloop-player .lp-fav-modeswitch-track {
    width: 36px;
    height: 18px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 235, 200, 0.15);
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.levensloop-player .lp-fav-modeswitch-handle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--lp-text-dim);
    transition: left 0.2s ease, background 0.2s ease;
}
.levensloop-player .lp-fav-modeswitch-label input:checked + .lp-fav-modeswitch-track {
    background: rgba(212, 161, 75, 0.35);
    border-color: var(--lp-accent);
}
.levensloop-player .lp-fav-modeswitch-label input:checked + .lp-fav-modeswitch-track .lp-fav-modeswitch-handle {
    left: 19px;
    background: var(--lp-accent);
}
.levensloop-player .lp-fav-modeswitch-text {
    font-size: 13px;
    color: var(--lp-text-main);
}
.levensloop-player .lp-fav-count {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--lp-accent);
}

.levensloop-player .lp-fav-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
}

.levensloop-player .lp-fav-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(20, 14, 8, 0.92) 0%, rgba(12, 8, 5, 0.94) 100%);
    border: 1px solid rgba(255, 235, 200, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    user-select: none;
    touch-action: none;
}
.levensloop-player .lp-fav-card.is-fav {
    border-color: rgba(255, 108, 128, 0.4);
    background: linear-gradient(180deg, rgba(35, 18, 18, 0.95) 0%, rgba(20, 12, 10, 0.95) 100%);
}
.levensloop-player .lp-fav-card.is-dragging {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--lp-accent);
    z-index: 5;
    opacity: 0.95;
}

.levensloop-player .lp-fav-card-handle {
    color: var(--lp-text-dim);
    cursor: grab;
    padding: 4px;
    line-height: 0;
    flex-shrink: 0;
}
.levensloop-player .lp-fav-card-handle:hover { color: var(--lp-accent); }
.levensloop-player .lp-fav-card.is-dragging .lp-fav-card-handle { cursor: grabbing; }

.levensloop-player .lp-fav-card-cover {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: #2a2018;
}

.levensloop-player .lp-fav-card-info { flex: 1; min-width: 0; }
.levensloop-player .lp-fav-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--lp-text-main);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.levensloop-player .lp-fav-card-year {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--lp-accent);
    margin-top: 2px;
}

.levensloop-player .lp-fav-card-arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.levensloop-player .lp-fav-card-arrows button {
    width: 20px;
    height: 18px;
    background: transparent;
    border: 1px solid rgba(255, 235, 200, 0.15);
    border-radius: 4px;
    color: var(--lp-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.levensloop-player .lp-fav-card-arrows button:hover { color: var(--lp-accent); border-color: var(--lp-accent); }
.levensloop-player .lp-fav-card-arrows button:disabled { opacity: 0.3; cursor: not-allowed; }

.levensloop-player .lp-fav-card-heart {
    background: transparent;
    border: 1px solid rgba(255, 235, 200, 0.2);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-text-dim);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.levensloop-player .lp-fav-card-heart:hover { transform: scale(1.08); }
.levensloop-player .lp-fav-card.is-fav .lp-fav-card-heart {
    color: #ff6c80;
    border-color: rgba(255, 108, 128, 0.55);
    box-shadow: 0 0 8px rgba(255, 108, 128, 0.35);
}

.levensloop-player .lp-fav-footer {
    padding: 14px 24px 20px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(255, 235, 200, 0.06);
}
.levensloop-player .lp-fav-reset,
.levensloop-player .lp-fav-save {
    border-radius: 24px;
    padding: 10px 18px;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.levensloop-player .lp-fav-reset {
    background: transparent;
    border: 1px solid rgba(255, 235, 200, 0.25);
    color: var(--lp-text-dim);
}
.levensloop-player .lp-fav-reset:hover { color: var(--lp-text-main); border-color: var(--lp-text-main); }
.levensloop-player .lp-fav-save {
    background: var(--lp-accent);
    border: 1px solid var(--lp-accent);
    color: #2a1d0a;
}
.levensloop-player .lp-fav-save:hover { background: #f4c172; }

.levensloop-player .lp-fav-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--lp-text-dim);
    font-size: 13px;
}

/* ============================================================
   PLATENSPELER (vinyl-mode)
   ------------------------------------------------------------
   Alle maten zijn veelvouden van --vs (1px op desktop). Door
   alleen --vs te verkleinen schaalt de hele kast — inclusief de
   toonarm-geometrie, die exact moet kloppen met de rotatie-
   hoeken in player.js — proportioneel mee.
   ============================================================ */

.levensloop-player.is-vinyl-mode { --vs: 1px; }

.levensloop-player .lp-vinyl-wrap {
    position: relative;
    z-index: 5; /* playbar verdwijnt achter de kast in OFF-stand */
    max-width: calc(var(--vs) * 720);
    margin: 0 auto;
}

.levensloop-player .lp-vinyl-cabinet {
    position: relative;
}

/* ---- Bovenblad met platter en toonarm ---- */
.levensloop-player .lp-vinyl-deck {
    position: relative;
    z-index: 1;
    height: calc(var(--vs) * 380);
    border-radius: calc(var(--vs) * 10) calc(var(--vs) * 10) 0 0;
    overflow: hidden;
    background:
        repeating-linear-gradient(
            88deg,
            rgba(120, 70, 30, 0.14) 0px,
            rgba(120, 70, 30, 0.14) 4px,
            rgba(55, 28, 10, 0.18) 4px,
            rgba(55, 28, 10, 0.18) 7px
        ),
        linear-gradient(180deg, #542c14 0%, #46250f 40%, #331a08 100%);
    box-shadow:
        inset 0 calc(var(--vs) * 2) 0 rgba(255, 220, 170, 0.12),
        inset 0 0 0 calc(var(--vs) * 5) rgba(0, 0, 0, 0.22),
        inset 0 0 0 calc(var(--vs) * 6) rgba(255, 210, 150, 0.10),
        inset 0 0 calc(var(--vs) * 60) rgba(0, 0, 0, 0.4),
        0 calc(var(--vs) * 10) calc(var(--vs) * 26) rgba(0, 0, 0, 0.5);
}

/* ---- Platter + plaat ---- */
.levensloop-player .lp-vinyl-platter {
    position: absolute;
    left: calc(var(--vs) * 44);
    top: calc(var(--vs) * 40);
    width: calc(var(--vs) * 312);
    height: calc(var(--vs) * 312);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 42%, #2c2c30 0%, #19191c 60%, #0c0c0e 100%);
    box-shadow:
        0 calc(var(--vs) * 8) calc(var(--vs) * 22) rgba(0, 0, 0, 0.65),
        inset 0 calc(var(--vs) * 1) 0 rgba(255, 255, 255, 0.07);
}

/* Stroboscoop-stippen op de rand van de platter — klassiek toerental-ijkmerk */
.levensloop-player .lp-vinyl-platter::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: repeating-conic-gradient(
        rgba(255, 245, 225, 0.22) 0deg 1.4deg,
        transparent 1.4deg 6deg);
    -webkit-mask: radial-gradient(circle,
        transparent 0 calc(50% - var(--vs) * 7),
        #000 calc(50% - var(--vs) * 6) calc(50% - var(--vs) * 2),
        transparent calc(50% - var(--vs) * 1));
    mask: radial-gradient(circle,
        transparent 0 calc(50% - var(--vs) * 7),
        #000 calc(50% - var(--vs) * 6) calc(50% - var(--vs) * 2),
        transparent calc(50% - var(--vs) * 1));
}

.levensloop-player .lp-vinyl-record {
    position: absolute;
    inset: calc(var(--vs) * 8);
    border-radius: 50%;
    background: radial-gradient(circle, #111114 0%, #0a0a0c 70%, #060607 100%);
    will-change: transform;
    cursor: grab;
    touch-action: none;
}

/* Meedraaiende glans-arcs en stofjes — maken de rotatie van de plaat
   zelf zichtbaar (de groeven zijn immers rotatie-symmetrisch). Het masker
   houdt het label-gebied in het midden schoon. */
.levensloop-player .lp-vinyl-record::after {
    content: "";
    position: absolute;
    inset: calc(var(--vs) * 3);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at 71% 22%, rgba(255, 245, 225, 0.16) 0, transparent calc(var(--vs) * 6)),
        radial-gradient(circle at 26% 62%, rgba(255, 245, 225, 0.11) 0, transparent calc(var(--vs) * 5)),
        radial-gradient(circle at 56% 86%, rgba(255, 245, 225, 0.08) 0, transparent calc(var(--vs) * 4)),
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 248, 235, 0.06) 14deg,
            transparent 44deg,
            transparent 166deg,
            rgba(255, 248, 235, 0.05) 190deg,
            transparent 222deg,
            transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 19%, #000 22% 100%);
    mask: radial-gradient(circle, transparent 0 19%, #000 22% 100%);
}

.levensloop-player .lp-vinyl-grooves {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        /* nummers-scheiding: paar bredere "stille" ringen */
        radial-gradient(circle,
            transparent 0 34%,
            rgba(255, 255, 255, 0.045) 34% 34.6%,
            transparent 34.6% 52%,
            rgba(255, 255, 255, 0.045) 52% 52.6%,
            transparent 52.6% 68%,
            rgba(255, 255, 255, 0.045) 68% 68.6%,
            transparent 68.6% 100%),
        /* fijne groeven */
        repeating-radial-gradient(circle,
            rgba(255, 255, 255, 0.035) 0,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px,
            transparent 3px);
}

/* Label in het midden: hoesfoto van de actieve track */
.levensloop-player .lp-vinyl-label {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: calc(var(--vs) * 100);
    height: calc(var(--vs) * 100);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 0 calc(var(--vs) * 2) rgba(0, 0, 0, 0.8),
        0 0 0 calc(var(--vs) * 3.5) rgba(212, 161, 75, 0.55);
    background: radial-gradient(circle, #b87d2a 0%, #8a5c1e 100%);
}

.levensloop-player.is-vinyl-mode .lp-vinyl-label .lp-cover-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    background: none;
    box-shadow: none;
}

.levensloop-player.is-vinyl-mode .lp-vinyl-label .lp-rectangle {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.levensloop-player.is-vinyl-mode .lp-vinyl-label .lp-photo-count {
    position: absolute;
    right: 12%;
    top: 12%;
}

.levensloop-player .lp-vinyl-spindle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--vs) * 9);
    height: calc(var(--vs) * 9);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f0ede6 0%, #9a948a 45%, #4e4a44 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 3;
}

/* Vaste lichtval over de draaiende plaat (draait zelf niet mee) */
.levensloop-player .lp-vinyl-sheen {
    position: absolute;
    inset: calc(var(--vs) * 8);
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from 215deg,
        transparent 0deg,
        rgba(255, 245, 225, 0.10) 14deg,
        rgba(255, 245, 225, 0.04) 38deg,
        transparent 60deg,
        transparent 178deg,
        rgba(255, 245, 225, 0.07) 200deg,
        transparent 228deg);
}

/* ---- Toonarm ---- */
.levensloop-player .lp-vinyl-tonearm {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Armsteun: klein klemmetje rechtsonder de zwaai-baan */
.levensloop-player .lp-vinyl-arm-rest {
    position: absolute;
    left: calc(var(--vs) * 422);
    top: calc(var(--vs) * 294);
    width: calc(var(--vs) * 26);
    height: calc(var(--vs) * 38);
    border-radius: calc(var(--vs) * 4);
    /* Metalen vork-klem met geborstelde textuur */
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, #44444a 0%, #6a6a72 30%, #2a2a30 70%, #44444a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 calc(var(--vs) * 3) calc(var(--vs) * 6) rgba(0, 0, 0, 0.55);
}
/* Inkeping bovenop de armsteun (waar de buis in rust) */
.levensloop-player .lp-vinyl-arm-rest::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--vs) * -3);
    width: calc(var(--vs) * 12);
    height: calc(var(--vs) * 7);
    transform: translateX(-50%);
    border-radius: 0 0 calc(var(--vs) * 6) calc(var(--vs) * 6);
    background: #14141a;
    box-shadow: inset 0 calc(var(--vs) * 2) calc(var(--vs) * 3) rgba(0, 0, 0, 0.8);
}

/* Pivot-huis: machinaal bewerkte lager-behuizing met bouten. De -28° basis-
   stand legt de arm op de steun; player.js telt daar zijn eigen hoeken bij op. */
.levensloop-player .lp-vinyl-arm-base {
    position: absolute;
    left: calc(var(--vs) * 528);
    top: calc(var(--vs) * 64);
    width: calc(var(--vs) * 66);
    height: calc(var(--vs) * 66);
    border-radius: 50%;
    transform: rotate(28deg);
    /* Geborsteld gunmetal (conic striae) + vier boutkoppen rond de rand */
    background:
        radial-gradient(circle at 24% 20%, #9a9aa4 0%, transparent 5%),
        radial-gradient(circle at 80% 22%, #5a5a62 0%, transparent 5%),
        radial-gradient(circle at 22% 80%, #5a5a62 0%, transparent 5%),
        radial-gradient(circle at 80% 80%, #5a5a62 0%, transparent 5%),
        conic-gradient(from 0deg,
            #3a3a40, #6a6a72, #3a3a40, #5a5a62, #2c2c32, #6a6a72, #3a3a40),
        radial-gradient(circle at 40% 34%, #6a6a72 0%, #2e2e34 60%, #161619 100%);
    box-shadow:
        0 calc(var(--vs) * 6) calc(var(--vs) * 14) rgba(0, 0, 0, 0.65),
        inset 0 0 0 1px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Centrale lager-dop met kruisgleuf-schroef */
.levensloop-player .lp-vinyl-arm-base::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--vs) * 30);
    height: calc(var(--vs) * 30);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        linear-gradient(0deg, rgba(0,0,0,0.5) 48%, transparent 48% 52%, rgba(0,0,0,0.5) 52%),
        linear-gradient(90deg, rgba(0,0,0,0.5) 48%, transparent 48% 52%, rgba(0,0,0,0.5) 52%),
        radial-gradient(circle at 38% 32%, #8a8a92 0%, #45454c 55%, #222226 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.6);
}

.levensloop-player .lp-vinyl-arm-pivot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    /* transform (rotate) komt inline vanuit player.js */
}

/* Geribbeld (geknurld) counterweight met stelschroef */
.levensloop-player .lp-vinyl-arm-counterweight {
    position: absolute;
    left: calc(var(--vs) * -12);
    top: calc(var(--vs) * -48);
    width: calc(var(--vs) * 24);
    height: calc(var(--vs) * 36);
    border-radius: calc(var(--vs) * 4);
    background:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.16) 0 1px,
            rgba(0,0,0,0.32) 1px 3px),
        linear-gradient(90deg, #141418 0%, #54545c 48%, #2a2a30 70%, #101014 100%);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 calc(var(--vs) * 3) calc(var(--vs) * 8) rgba(0, 0, 0, 0.6);
}
/* Stelschroef in de kop van het counterweight */
.levensloop-player .lp-vinyl-arm-counterweight::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--vs) * 4);
    width: calc(var(--vs) * 9);
    height: calc(var(--vs) * 9);
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        linear-gradient(45deg, rgba(0,0,0,0.55) 45%, transparent 45% 55%, rgba(0,0,0,0.55) 55%),
        radial-gradient(circle at 38% 32%, #9a9aa2 0%, #45454c 60%, #1c1c20 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.25);
}

/* Buis: geborsteld aluminium met naad + parallel signaaldraadje */
.levensloop-player .lp-vinyl-arm-tube {
    position: absolute;
    left: calc(var(--vs) * -4.5);
    top: calc(var(--vs) * -6);
    width: calc(var(--vs) * 9);
    height: calc(var(--vs) * 256);
    border-radius: calc(var(--vs) * 4);
    background:
        /* naad-lijn over de lengte */
        linear-gradient(90deg, transparent 46%, rgba(0,0,0,0.4) 50%, transparent 54%),
        /* lichte langs-striae */
        repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 2px),
        linear-gradient(90deg, #58585f 0%, #d2d2da 36%, #8a8a92 60%, #34343a 100%);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        calc(var(--vs) * 3) calc(var(--vs) * 4) calc(var(--vs) * 8) rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.35s ease;
}
/* Dun parallel draadje/anti-skate-staafje naast de buis */
.levensloop-player .lp-vinyl-arm-tube::after {
    content: "";
    position: absolute;
    left: calc(var(--vs) * -5);
    top: calc(var(--vs) * 30);
    width: calc(var(--vs) * 2);
    height: calc(var(--vs) * 150);
    border-radius: 2px;
    background: linear-gradient(90deg, #2a2a2e, #6a6a72, #1c1c20);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Headshell: machinaal bewerkte gunmetal-beugel met montageschroefjes */
.levensloop-player .lp-vinyl-arm-head {
    position: absolute;
    left: calc(var(--vs) * -13);
    top: calc(var(--vs) * 242);
    width: calc(var(--vs) * 26);
    height: calc(var(--vs) * 46);
    border-radius: calc(var(--vs) * 3) calc(var(--vs) * 3) calc(var(--vs) * 5) calc(var(--vs) * 5);
    background:
        /* twee montageschroefjes */
        radial-gradient(circle at 28% 22%, #b8b8c0 0%, #45454c 28%, transparent 30%),
        radial-gradient(circle at 72% 22%, #b8b8c0 0%, #45454c 28%, transparent 30%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #4a4a52 0%, #26262c 55%, #141418 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        0 calc(var(--vs) * 3) calc(var(--vs) * 7) rgba(0, 0, 0, 0.6);
    transition: translate 0.35s ease, box-shadow 0.35s ease;
}

/* Vingerlift-haakje op de headshell — chunkier metalen staafje */
.levensloop-player .lp-vinyl-arm-finger {
    position: absolute;
    right: calc(var(--vs) * -9);
    top: calc(var(--vs) * 10);
    width: calc(var(--vs) * 12);
    height: calc(var(--vs) * 4);
    border-radius: 2px;
    background: linear-gradient(90deg, #c8c8d0, #8a8a92 50%, #4a4a52);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* De naald-cartridge zelf */
.levensloop-player .lp-vinyl-arm-stylus {
    position: absolute;
    left: calc(var(--vs) * 4);
    bottom: calc(var(--vs) * -5);
    width: 0;
    height: 0;
    border-left: calc(var(--vs) * 4) solid transparent;
    border-right: calc(var(--vs) * 4) solid transparent;
    border-top: calc(var(--vs) * 8) solid #d8d4cc;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
}

/* Naald-skip: korte judder van de headshell als de naald een groef overslaat */
@keyframes lp-arm-skip {
    0%   { translate: 0 0; }
    25%  { translate: calc(var(--vs) * 4) calc(var(--vs) * -1); }
    55%  { translate: calc(var(--vs) * -3) calc(var(--vs) * 1); }
    80%  { translate: calc(var(--vs) * 2) 0; }
    100% { translate: 0 0; }
}

.levensloop-player .is-skipping .lp-vinyl-arm-head {
    animation: lp-arm-skip 0.2s ease;
}

/* Opgetilde arm: headshell komt los van de plaat, schaduw wordt dieper */
.levensloop-player .is-arm-lifted .lp-vinyl-arm-head {
    translate: calc(var(--vs) * 2) calc(var(--vs) * -5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        0 calc(var(--vs) * 10) calc(var(--vs) * 14) rgba(0, 0, 0, 0.7);
}

.levensloop-player .is-arm-lifted .lp-vinyl-arm-tube {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        calc(var(--vs) * 6) calc(var(--vs) * 9) calc(var(--vs) * 14) rgba(0, 0, 0, 0.55);
}

/* ---- Voorkant: messing paneel + speakerdoek ---- */
.levensloop-player .lp-vinyl-front {
    position: relative;
    z-index: 1;
    border-radius: 0 0 calc(var(--vs) * 10) calc(var(--vs) * 10);
    overflow: hidden;
    box-shadow: 0 calc(var(--vs) * 14) calc(var(--vs) * 34) rgba(0, 0, 0, 0.55);
}

.levensloop-player .lp-vinyl-brass {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--vs) * 16);
    padding: calc(var(--vs) * 10) calc(var(--vs) * 22);
    background:
        linear-gradient(180deg, #e8cd96 0%, #cfa964 38%, #b88e46 70%, #9a7434 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(60, 36, 8, 0.6);
}

.levensloop-player .lp-vinyl-brand {
    display: flex;
    flex-direction: column;
    gap: calc(var(--vs) * 2);
    user-select: none;
}

.levensloop-player .lp-vinyl-brand-mark {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    font-size: calc(var(--vs) * 22);
    font-style: italic;
    font-weight: 700;
    letter-spacing: calc(var(--vs) * 2);
    line-height: 1;
    color: rgba(52, 30, 6, 0.92);
    text-shadow:
        0 1px 0 rgba(255, 240, 210, 0.6),
        0 -1px 0 rgba(60, 30, 0, 0.25);
}

.levensloop-player .lp-vinyl-brand-model {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: calc(var(--vs) * 7);
    font-weight: 600;
    letter-spacing: calc(var(--vs) * 2.5);
    color: rgba(60, 36, 8, 0.6);
}

.levensloop-player .lp-vinyl-nowplaying {
    text-align: right;
    min-width: 0;
}

.levensloop-player .lp-vinyl-section-label {
    font-size: calc(var(--vs) * 7);
    font-weight: 700;
    letter-spacing: calc(var(--vs) * 2.5);
    color: rgba(60, 36, 8, 0.55);
}

.levensloop-player .lp-vinyl-track-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: calc(var(--vs) * 17);
    line-height: 1.2;
    color: rgba(40, 22, 4, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(var(--vs) * 320);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.levensloop-player .lp-vinyl-track-title.visible { opacity: 1; }

/* Track-teller op het messing paneel: inline, geen absolute pill */
.levensloop-player.is-vinyl-mode .lp-track-counter {
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    height: auto;
    transform: none !important;
    opacity: 1 !important;
    color: rgba(60, 36, 8, 0.6);
    font-family: ui-monospace, monospace;
    font-size: calc(var(--vs) * 10);
    text-shadow: none;
    display: block;
}

.levensloop-player .lp-vinyl-grille-row {
    display: flex;
    align-items: stretch;
    background: linear-gradient(180deg, #3a2010 0%, #2a1408 100%);
}

/* Geweven speakerdoek */
.levensloop-player .lp-vinyl-grille {
    flex: 1;
    min-height: calc(var(--vs) * 116);
    margin: calc(var(--vs) * 14) 0 calc(var(--vs) * 14) calc(var(--vs) * 18);
    border-radius: calc(var(--vs) * 6);
    background:
        repeating-linear-gradient(45deg,
            rgba(0, 0, 0, 0.45) 0px, rgba(0, 0, 0, 0.45) 2px,
            transparent 2px, transparent 5px),
        repeating-linear-gradient(-45deg,
            rgba(255, 235, 200, 0.07) 0px, rgba(255, 235, 200, 0.07) 2px,
            transparent 2px, transparent 5px),
        linear-gradient(180deg, #221a12 0%, #140f0a 100%);
    box-shadow:
        inset 0 0 0 1px rgba(212, 161, 75, 0.35),
        inset 0 0 0 calc(var(--vs) * 4) rgba(18, 11, 6, 0.95),
        inset 0 0 0 calc(var(--vs) * 5) rgba(212, 161, 75, 0.22),
        inset 0 calc(var(--vs) * 4) calc(var(--vs) * 10) rgba(0, 0, 0, 0.7);
}

.levensloop-player .lp-vinyl-controls {
    display: flex;
    align-items: center;
    gap: calc(var(--vs) * 16);
    padding: calc(var(--vs) * 14) calc(var(--vs) * 20);
}

/* Jaartal-dial — knipoog naar het gele Fenton-wijzerplaatje */
.levensloop-player .lp-vinyl-dial {
    width: calc(var(--vs) * 86);
    height: calc(var(--vs) * 86);
    border-radius: 50%;
    padding: calc(var(--vs) * 6);
    background:
        radial-gradient(circle at 32% 26%, #f4e2b0 0%, #c9a45c 40%, #8a6a2c 100%);
    box-shadow:
        0 calc(var(--vs) * 5) calc(var(--vs) * 12) rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.levensloop-player .lp-vinyl-dial-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--vs) * 1);
    background: radial-gradient(circle at 50% 38%, #f0d662 0%, #d9b93e 65%, #b8952c 100%);
    box-shadow: inset 0 calc(var(--vs) * 2) calc(var(--vs) * 6) rgba(0, 0, 0, 0.35);
}

/* Jaartal in de dial: override van de absolute cover-badge */
.levensloop-player.is-vinyl-mode .lp-year-badge {
    position: static;
    transform: none;
    margin: 0;
    text-align: center;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    letter-spacing: calc(var(--vs) * 0.5);
    line-height: 1.2;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: calc(var(--vs) * 16);
    font-weight: 700;
    color: rgba(50, 30, 4, 0.92);
    text-shadow: 0 1px 0 rgba(255, 245, 200, 0.5);
}

.levensloop-player .lp-vinyl-dial-sub {
    font-size: calc(var(--vs) * 7);
    font-weight: 700;
    letter-spacing: calc(var(--vs) * 2.5);
    color: rgba(50, 30, 4, 0.55);
}

.levensloop-player.is-vinyl-mode .lp-play-btn {
    margin: 0;
    width: calc(var(--vs) * 54);
    height: calc(var(--vs) * 82);
    padding: calc(var(--vs) * 9) 0;
    justify-content: space-between;
}

/* ON/OFF netjes binnen de afgeronde knop houden: korte regelhoogte +
   iets compacter slot, zodat label + slot + label samen passen. */
.levensloop-player.is-vinyl-mode .lp-power-label {
    font-size: calc(var(--vs) * 8);
    line-height: 1;
}

.levensloop-player.is-vinyl-mode .lp-power-slot {
    width: calc(var(--vs) * 20);
    height: calc(var(--vs) * 40);
}

.levensloop-player.is-vinyl-mode .lp-power-lever {
    width: calc(var(--vs) * 15);
    height: calc(var(--vs) * 18);
    bottom: calc(var(--vs) * 3);
}

.levensloop-player.is-vinyl-mode .lp-play-btn.playing .lp-power-lever {
    bottom: calc(var(--vs) * 19);
}

/* ---- Playbar: zelfde slide-achter-de-kast gedrag als tape-mode ---- */
.levensloop-player.is-vinyl-mode .lp-track-progress {
    max-width: calc(var(--vs) * 720);
    margin-left: auto;
    margin-right: auto;
    margin-top: 18px;
    position: relative;
    z-index: 9; /* knoppen altijd boven de albumstapel — blijven klikbaar */
    transition: transform 0.45s ease, opacity 0.4s ease, margin-top 0.45s ease;
}

.levensloop-player.is-vinyl-mode:not(.is-radio-on) .lp-track-progress {
    transform: translateY(calc(var(--vs) * -30));
    margin-top: -22px;
    opacity: 0;
    pointer-events: none;
}

/* Zachte gloed op de kast zodra de speler aan staat */
.levensloop-player.is-vinyl-mode.is-radio-on .lp-vinyl-dial-face {
    box-shadow:
        inset 0 calc(var(--vs) * 2) calc(var(--vs) * 6) rgba(0, 0, 0, 0.35),
        0 0 calc(var(--vs) * 18) rgba(240, 214, 98, 0.35);
}

/* ---- Controlelampje: rood juweel, gloeit als de speler aan staat ---- */
.levensloop-player .lp-vinyl-pilot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--vs) * 5);
}

.levensloop-player .lp-vinyl-pilot {
    width: calc(var(--vs) * 11);
    height: calc(var(--vs) * 11);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #5c1812 0%, #2a0806 75%);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.85),
        0 0 0 calc(var(--vs) * 2.5) #16100a,
        0 0 0 calc(var(--vs) * 3.5) rgba(212, 161, 75, 0.45);
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

.levensloop-player.is-vinyl-mode.is-radio-on .lp-vinyl-pilot {
    background: radial-gradient(circle at 35% 30%, #ff9a72 0%, #cc2410 70%);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 0 calc(var(--vs) * 2.5) #16100a,
        0 0 0 calc(var(--vs) * 3.5) rgba(212, 161, 75, 0.45),
        0 0 calc(var(--vs) * 14) rgba(255, 80, 40, 0.65);
}

.levensloop-player .lp-vinyl-pilot-label,
.levensloop-player .lp-vinyl-speed-labels {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: calc(var(--vs) * 6.5);
    font-weight: 700;
    letter-spacing: calc(var(--vs) * 1.5);
    color: rgba(244, 236, 224, 0.45);
    user-select: none;
}

/* ---- Toeren-keuzeknop 33⅓/45/78 — wisselt écht de afspeelsnelheid ---- */
.levensloop-player .lp-vinyl-speed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--vs) * 5);
}

.levensloop-player .lp-vinyl-speed-knob {
    position: relative;
    width: calc(var(--vs) * 34);
    height: calc(var(--vs) * 34);
    border: none;
    padding: 0;
    cursor: grab;
    touch-action: none;
    border-radius: 50%;
    transform: rotate(-34deg); /* default 33⅓; JS draait 'm verder */
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.4, 1);
    background:
        radial-gradient(circle at 34% 28%, #f0dcaa 0%, #c9a45c 48%, #7e6028 100%);
    box-shadow:
        0 calc(var(--vs) * 4) calc(var(--vs) * 9) rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 calc(var(--vs) * -2) calc(var(--vs) * 4) rgba(60, 36, 8, 0.4);
}

.levensloop-player .lp-vinyl-speed-knob.is-dragging {
    cursor: grabbing;
}

.levensloop-player .lp-vinyl-speed-knob:hover {
    box-shadow:
        0 calc(var(--vs) * 4) calc(var(--vs) * 9) rgba(0, 0, 0, 0.6),
        0 0 calc(var(--vs) * 10) rgba(212, 161, 75, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 calc(var(--vs) * -2) calc(var(--vs) * 4) rgba(60, 36, 8, 0.4);
}

.levensloop-player .lp-vinyl-speed-labels [data-speed] {
    cursor: pointer;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.levensloop-player .lp-vinyl-speed-labels [data-speed]:hover {
    color: rgba(244, 236, 224, 0.85);
}

.levensloop-player .lp-vinyl-speed-labels [data-speed].is-active {
    color: var(--lp-accent);
    text-shadow: 0 0 calc(var(--vs) * 6) rgba(212, 161, 75, 0.55);
}

.levensloop-player .lp-vinyl-speed-pointer {
    position: absolute;
    left: 50%;
    top: calc(var(--vs) * 3);
    width: calc(var(--vs) * 3);
    height: calc(var(--vs) * 11);
    transform: translateX(-50%);
    border-radius: 2px;
    background: #38220a;
}

.levensloop-player .lp-vinyl-speed-labels {
    display: flex;
    gap: calc(var(--vs) * 5);
}

/* ---- DJ-filterknop op de vinyl-kast: tape-deck-mechaniek, --vs-maat ---- */
.levensloop-player.is-vinyl-mode .lp-filter-knob-wrap {
    column-gap: calc(var(--vs) * 6);
    padding: 0;
}

.levensloop-player.is-vinyl-mode .lp-filter-knob {
    width: calc(var(--vs) * 46);
    height: calc(var(--vs) * 46);
}

.levensloop-player.is-vinyl-mode .lp-filter-knob-pointer {
    height: calc(var(--vs) * 15);
}

/* ---- Bedieningskolom op het bovenblad: POWER, KRAAK, toeren, FILTER ---- */
.levensloop-player .lp-vinyl-deck-controls {
    position: absolute;
    right: calc(var(--vs) * 14);
    top: calc(var(--vs) * 42);
    bottom: calc(var(--vs) * 16);
    width: calc(var(--vs) * 104);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--vs) * 12) 0;
    border-radius: calc(var(--vs) * 10);
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 0.28) 0%, transparent 70%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.30) 100%);
    box-shadow:
        inset 0 calc(var(--vs) * 2) calc(var(--vs) * 6) rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(212, 161, 75, 0.14);
}

/* ---- KRAAK-knop: plaatruis-effecten aan/uit ---- */
.levensloop-player .lp-vinyl-crackle-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--vs) * 5);
}

.levensloop-player .lp-vinyl-crackle-toggle {
    width: calc(var(--vs) * 30);
    height: calc(var(--vs) * 30);
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(212, 161, 75, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(212, 161, 75, 0.55);
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 235, 200, 0.14) 0%, transparent 55%),
        radial-gradient(circle at center, #1a1208 0%, #060403 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 235, 200, 0.12),
        inset 0 -2px 4px rgba(0, 0, 0, 0.8),
        0 3px 6px rgba(0, 0, 0, 0.55);
    transition: color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.levensloop-player .lp-vinyl-crackle-toggle[aria-pressed="true"] {
    color: var(--lp-accent);
    border-color: rgba(212, 161, 75, 0.6);
    box-shadow:
        inset 0 1px 1px rgba(255, 235, 200, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(212, 161, 75, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.55);
}

/* ---- Albumstapel: hoezen die deels over de speler liggen ---- */
.levensloop-player .lp-vinyl-stack {
    position: absolute;
    width: calc(var(--vs) * 312);
    height: calc(var(--vs) * 312);
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.3, 1.1, 0.3, 1), opacity 0.45s ease,
        left 0.55s cubic-bezier(0.3, 1.1, 0.3, 1), bottom 0.55s cubic-bezier(0.3, 1.1, 0.3, 1),
        top 0.55s cubic-bezier(0.3, 1.1, 0.3, 1), right 0.55s cubic-bezier(0.3, 1.1, 0.3, 1);
}

/* Linksonder — schuin over de onderhoek (TOP-stand: op de speler) */
.levensloop-player .lp-vinyl-stack--bl {
    left: calc(var(--vs) * -20);
    bottom: calc(var(--vs) * -104);
    z-index: 7;
    transform: rotate(-13deg);
    transform-origin: bottom left;
}

/* Rechtsboven — alleen zichtbaar in de ONDER-stand, piept achter de speler uit */
.levensloop-player .lp-vinyl-stack--tr {
    right: calc(var(--vs) * -150);
    top: calc(var(--vs) * -40);
    z-index: -1;
    transform: rotate(13deg);
    transform-origin: top right;
    opacity: 0;
    pointer-events: none;
}

/* Eén hoes in de stapel — kartonnen LP-sleeve */
.levensloop-player .lp-vinyl-stack-card {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: calc(var(--vs) * 8);
    border-radius: calc(var(--vs) * 3);
    cursor: pointer;
    pointer-events: auto;
    background: linear-gradient(135deg, #efe6d4 0%, #d8cab0 55%, #b8a888 100%);
    box-shadow:
        inset 0 0 0 1px rgba(60, 40, 10, 0.25),
        calc(var(--vs) * -5) calc(var(--vs) * 9) calc(var(--vs) * 20) rgba(0, 0, 0, 0.5);
    /* Diepere (oudere) hoezen waaieren naar rechtsboven de speler op en
       worden iets donkerder; de nieuwste ligt vooraan linksonder. */
    transform:
        translate(calc(var(--depth, 0) * var(--vs) * 19), calc(var(--depth, 0) * var(--vs) * -18))
        rotate(var(--rot, 0deg));
    filter: brightness(calc(1 - var(--depth, 0) * 0.08));
    transition: transform 0.5s cubic-bezier(0.3, 1.1, 0.3, 1), filter 0.4s ease, box-shadow 0.35s ease;
}

/* Kartonnen rugje */
.levensloop-player .lp-vinyl-stack-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--vs) * 8);
    border-radius: calc(var(--vs) * 3) 0 0 calc(var(--vs) * 3);
    background: linear-gradient(90deg, rgba(60, 40, 10, 0.4), transparent);
}

.levensloop-player .lp-vinyl-stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    background: #241403;
}

/* Multi-image-teller: rechtsboven op de bovenste hoes (schaalt mee met --vs) */
.levensloop-player .lp-vinyl-stack-count {
    top: calc(var(--vs) * 16);
    right: calc(var(--vs) * 16);
    left: auto;
    min-width: calc(var(--vs) * 28);
    height: calc(var(--vs) * 28);
    padding: 0 calc(var(--vs) * 8);
    border-radius: calc(var(--vs) * 14);
    font-size: calc(var(--vs) * 15);
    z-index: 5;
}

/* Bovenste hoes komt bij hover iets omhoog */
.levensloop-player .lp-vinyl-stack-card.is-top:hover,
.levensloop-player .lp-vinyl-stack-card.is-top:focus-visible {
    transform: translate(0, calc(var(--vs) * -8)) rotate(var(--rot, 0deg));
    box-shadow:
        inset 0 0 0 1px rgba(60, 40, 10, 0.25),
        calc(var(--vs) * -8) calc(var(--vs) * 14) calc(var(--vs) * 28) rgba(0, 0, 0, 0.6);
}

.levensloop-player .lp-vinyl-stack-card:focus-visible {
    outline: 2px solid rgba(212, 161, 75, 0.7);
    outline-offset: 3px;
}

/* Nieuwe bovenste hoes valt op de stapel */
@keyframes lp-stack-drop {
    0%   { transform: translate(0, calc(var(--vs) * -36)) rotate(calc(var(--rot, 0deg) - 7deg)) scale(1.05); opacity: 0.2; }
    60%  { opacity: 1; }
    100% { transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
}

.levensloop-player .lp-vinyl-stack-card.is-dropping {
    animation: lp-stack-drop 0.5s cubic-bezier(0.3, 1.1, 0.3, 1);
}

/* GEEN: beide stapels uit beeld */
.levensloop-player .is-albums-none .lp-vinyl-stack--bl {
    transform: translateX(calc(var(--vs) * -300)) rotate(-6deg);
    opacity: 0;
    pointer-events: none;
}
.levensloop-player .is-albums-none .lp-vinyl-stack--tr {
    opacity: 0;
}

/* ONDER: beide stapels piepen achter de speler uit, verticaal in het
   midden — links én rechts — voor een mooi evenwicht zonder iets te
   overlappen (ook niet de tekst boven de speler). */
.levensloop-player .is-albums-onder .lp-vinyl-stack--bl {
    left: calc(var(--vs) * -150);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(-9deg);
    transform-origin: center;
    z-index: -1;
}
.levensloop-player .is-albums-onder .lp-vinyl-stack--tr {
    right: calc(var(--vs) * -150);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(9deg);
    transform-origin: center;
    opacity: 1;
    z-index: -1;
}

/* TOP-stand: linksonder op de speler (basis), rechtsboven blijft verborgen. */

/* Op het bovenblad geplaatst: naast de naaldhouder, los gepositioneerd */
.levensloop-player .lp-vinyl-albums-wrap--deck {
    position: absolute;
    /* Net links van de bedieningskolom, uitgelijnd met de onderkant ervan
       (op gelijke hoogte met de FILTER-knop). Laag genoeg zodat de toonarm
       er nooit overheen zwaait. */
    right: calc(var(--vs) * 128);
    bottom: calc(var(--vs) * 28);
    z-index: 4;
}

/* ALBUMS-fader op het paneel: 3-standen schuif (TOP / GEEN / ONDER) */
.levensloop-player .lp-vinyl-albums-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--vs) * 5);
}

.levensloop-player .lp-vinyl-albums-fader {
    position: relative;
    width: calc(var(--vs) * 22);
    height: calc(var(--vs) * 58);
    border-radius: calc(var(--vs) * 6);
    cursor: pointer;
    touch-action: none;
    background: radial-gradient(circle at center, #050302 0%, #0c0805 100%);
    box-shadow:
        inset 0 calc(var(--vs) * 3) calc(var(--vs) * 4) rgba(0, 0, 0, 0.95),
        inset 0 0 0 1px rgba(255, 235, 200, 0.06),
        inset 0 calc(var(--vs) * -1) calc(var(--vs) * 2) rgba(212, 161, 75, 0.06);
}

.levensloop-player .lp-vinyl-albums-fader:focus-visible {
    outline: 2px solid rgba(212, 161, 75, 0.7);
    outline-offset: 3px;
}

/* Detent-streepjes op de drie standen */
.levensloop-player .lp-vinyl-albums-tick {
    position: absolute;
    left: 50%;
    width: calc(var(--vs) * 9);
    height: calc(var(--vs) * 1.5);
    transform: translate(-50%, -50%);
    border-radius: 1px;
    background: rgba(212, 161, 75, 0.4);
    pointer-events: none;
}

/* Metalen schuifhandvat */
.levensloop-player .lp-vinyl-albums-handle {
    position: absolute;
    left: 50%;
    top: 14%;
    width: calc(var(--vs) * 16);
    height: calc(var(--vs) * 16);
    transform: translate(-50%, -50%);
    border-radius: calc(var(--vs) * 3);
    background: linear-gradient(180deg, #f4e0a8 0%, #b87d2a 30%, #e6b75c 55%, #6b4612 100%);
    box-shadow:
        0 calc(var(--vs) * 2) calc(var(--vs) * 4) rgba(0, 0, 0, 0.7),
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -1px 1px rgba(0, 0, 0, 0.5);
    transition: top 0.28s cubic-bezier(0.4, 1.4, 0.5, 1);
}

/* Groef op het handvat */
.levensloop-player .lp-vinyl-albums-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--vs) * 9);
    height: calc(var(--vs) * 1.5);
    transform: translate(-50%, -50%);
    border-radius: 1px;
    background: rgba(60, 36, 8, 0.6);
}

.levensloop-player .lp-vinyl-albums-fader.is-dragging .lp-vinyl-albums-handle {
    transition: none;
    cursor: grabbing;
}

/* ---- Gloeiende versterkerbuizen achter een kijkvenster ---- */
.levensloop-player .lp-vinyl-tubes {
    align-self: center;
    display: flex;
    gap: calc(var(--vs) * 10);
    align-items: flex-end;
    justify-content: center;
    margin-left: calc(var(--vs) * 14);
    padding: calc(var(--vs) * 8) calc(var(--vs) * 10) calc(var(--vs) * 5);
    border-radius: calc(var(--vs) * 6);
    background: radial-gradient(circle at 50% 110%, #1c1006 0%, #0a0603 80%);
    box-shadow:
        inset 0 calc(var(--vs) * 3) calc(var(--vs) * 8) rgba(0, 0, 0, 0.85),
        inset 0 0 0 1px rgba(212, 161, 75, 0.2);
}

.levensloop-player .lp-vinyl-tube {
    /* Elke buis pakt zijn eigen niveau: linker = --lp-bass, rechter = --lp-bass2 */
    --lvl: var(--lp-bass, 0);
    display: block;
    width: calc(var(--vs) * 13);
    height: calc(var(--vs) * 38);
    border-radius: calc(var(--vs) * 6) calc(var(--vs) * 6) calc(var(--vs) * 2) calc(var(--vs) * 2);
    background:
        radial-gradient(circle at 50% 82%,
            rgba(255, 140, 50, calc(0.08 + var(--lvl) * 0.7)) 0%,
            rgba(120, 40, 8, 0.25) 55%,
            transparent 78%),
        linear-gradient(90deg,
            rgba(120, 110, 95, 0.25) 0%,
            rgba(220, 210, 190, 0.18) 45%,
            rgba(70, 60, 50, 0.25) 100%);
    box-shadow: inset 0 0 calc(var(--vs) * 3) rgba(0, 0, 0, 0.5);
    position: relative;
}

.levensloop-player .lp-vinyl-tube:nth-child(2) {
    --lvl: var(--lp-bass2, 0);
}

/* Gloeidraad: groeit in hoogte + helderheid mee met het niveau (beweegt op de beat) */
.levensloop-player .lp-vinyl-tube::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--vs) * 5);
    width: calc(var(--vs) * 3);
    height: calc(var(--vs) * 6);
    transform: translateX(-50%);
    transform-origin: bottom center;
    border-radius: 2px;
    background: rgba(255, 120, 40, 0.14);
}

.levensloop-player.is-vinyl-mode.is-radio-on .lp-vinyl-tube::after {
    /* Filament-hoogte schaalt van ~6px (stil) tot ~26px (beat) */
    height: calc(var(--vs) * 6 + var(--lvl) * var(--vs) * 20);
    background: rgba(255, 175, 80, calc(0.35 + var(--lvl) * 0.65));
    box-shadow:
        0 0 calc(var(--vs) * 3 + var(--lvl) * var(--vs) * 16) rgba(255, 120, 30, calc(0.4 + var(--lvl) * 0.6)),
        0 0 calc(var(--vs) * 22) rgba(255, 90, 20, calc(var(--lvl) * 0.6));
}

/* ---- Ademend speakerdoek: pulseert subtiel mee op de bas ---- */
.levensloop-player.is-vinyl-mode.is-radio-on .lp-vinyl-grille {
    transform: scale(calc(1 + (var(--lp-bass, 0) + var(--lp-bass2, 0)) * 0.009));
}

/* ---- 45 toeren: 7"-singletje met puck-adapter; 78: kleinere schellak ---- */
.levensloop-player .lp-vinyl-record {
    transition: scale 0.7s cubic-bezier(0.3, 1.2, 0.4, 1);
}

.levensloop-player .is-speed-45 .lp-vinyl-record { scale: 0.64; }
.levensloop-player .is-speed-78 .lp-vinyl-record { scale: 0.86; }

.levensloop-player .lp-vinyl-adapter {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--vs) * 148);
    height: calc(var(--vs) * 148);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
    background:
        radial-gradient(circle at 42% 36%, #f4d452 0%, #d9ad28 55%, #a97f16 100%);
    box-shadow:
        inset 0 calc(var(--vs) * 2) calc(var(--vs) * 5) rgba(255, 245, 200, 0.5),
        inset 0 calc(var(--vs) * -3) calc(var(--vs) * 6) rgba(90, 60, 4, 0.55),
        0 calc(var(--vs) * 2) calc(var(--vs) * 6) rgba(0, 0, 0, 0.6);
}

/* Spider-uitsparingen in de puck */
.levensloop-player .lp-vinyl-adapter::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background:
        conic-gradient(
            rgba(10, 6, 2, 0.55) 0deg 38deg, transparent 38deg 82deg,
            rgba(10, 6, 2, 0.55) 82deg 158deg, transparent 158deg 202deg,
            rgba(10, 6, 2, 0.55) 202deg 278deg, transparent 278deg 322deg,
            rgba(10, 6, 2, 0.55) 322deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 42%, #000 44% 92%, transparent 94%);
    mask: radial-gradient(circle, transparent 0 42%, #000 44% 92%, transparent 94%);
}

.levensloop-player .is-speed-45 .lp-vinyl-adapter { opacity: 1; }

/* ---- Responsief: alleen de schaal-factor hoeft mee te bewegen ---- */
@media (max-width: 860px) {
    .levensloop-player.is-vinyl-mode { --vs: 0.78px; }
}

@media (max-width: 560px) {
    .levensloop-player.is-vinyl-mode { --vs: 0.55px; }
}

@media (max-width: 420px) {
    .levensloop-player.is-vinyl-mode { --vs: 0.45px; }
}

/* ============================================================
   MARANTZ TOP-VIEW SKIN — full-screen header op een houten tafel
   Hergebruikt de vinyl-platter/arm-geometrie (zelfde --vs-coördinaten),
   zodat de naald-cue exact blijft kloppen. Eromheen: witte plint,
   houten tafel en platenhoezen.
   ============================================================ */
.levensloop-player.is-marantz {
    /* Uniforme schaal: de compositie schaalt mee met de viewport (breedte- of
       hoogte-beperkt), zodat plint en albums overal dezelfde verhouding
       houden. De tafel zelf is altijd 100vw breed (full-width page header). */
    --vs: max(0.4px, min(calc(100vw / 1360), calc(96vh / 700), 1.25px));
    position: relative;
    max-width: none;
    margin: 0;
    margin-left: calc(50% - 50vw);   /* full-bleed: breekt uit de content-kolom */
    width: 100vw;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #f4ece0;
    overflow: hidden;
}

/* Intro-tekst (titel/subtitel) over de scène, bovenaan gecentreerd
   (gedeeld met de jukebox-skin) */
.levensloop-player.is-marantz .lp-intro,
.levensloop-player.is-jukebox .lp-intro {
    position: absolute;
    top: clamp(18px, 5vh, 60px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    margin: 0;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

/* ---- Scène + houten tafel (top-down) ---- */
.levensloop-player.is-marantz .lp-marantz-scene {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--vs) * 58) 0 calc(var(--vs) * 72);
    overflow: hidden;
    /* Houten tafel: standaard een CSS-houtnerf (geen foto in de plugin —
       scheelt ~430 KB). Per station kan in de admin een echte foto uit de
       Media Library worden gekozen; die komt als --lp-marantz-wood inline
       op dit element binnen en overschrijft deze fallback. */
    --lp-marantz-wood:
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.45) 0 2px, transparent 2px 134px),
        repeating-linear-gradient(0deg,
            rgba(255, 222, 175, 0.04) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.08) 0 3px, transparent 3px 210px),
        linear-gradient(115deg, #221306 0%, #190d04 35%, #110802 70%, #0a0401 100%);
    /* Filmisch warm licht en donkere randen over de tafel heen */
    background:
        radial-gradient(120% 85% at 42% 42%, rgba(255, 210, 150, 0.12) 0%, transparent 50%),
        radial-gradient(150% 130% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.4) 82%, rgba(0, 0, 0, 0.7) 100%),
        var(--lp-marantz-wood);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Positioneringscanvas voor speler + props */
.levensloop-player.is-marantz .lp-marantz-table {
    position: relative;
    /* Vast ontwerpcanvas (1360), gecentreerd in de full-bleed houten scène:
       zo houden speler en hoezen-waaier links en rechts dezelfde gutter. */
    width: calc(var(--vs) * 1360);
    height: calc(var(--vs) * 540);
}

/* ---- De witte Marantz-plint (zelfde coördinaten als de vinyl-deck) ---- */
.levensloop-player.is-marantz .lp-marantz-tt {
    position: absolute;
    left: calc(var(--vs) * 24);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    filter: drop-shadow(0 calc(var(--vs) * 26) calc(var(--vs) * 34) rgba(0, 0, 0, 0.6));
}

/* Plaat links op de compacte plint, arm direct rechts ernaast — zoals op de
   referentiefoto. Platter, arm-base en arm-rest zijn samen verschoven; de
   pivot↔plaatmidden-vector (-361, +99) blijft identiek aan de basis-skin,
   dus de naald landt nog precies goed. */
.levensloop-player.is-marantz .lp-vinyl-platter { left: calc(var(--vs) * 40); top: calc(var(--vs) * 110); }
.levensloop-player.is-marantz .lp-vinyl-arm-rest { left: calc(var(--vs) * 418); top: calc(var(--vs) * 364); }
.levensloop-player.is-marantz .lp-vinyl-arm-base { left: calc(var(--vs) * 524); top: calc(var(--vs) * 134); }
/* Pootjes niet tonen bij top-view */
.levensloop-player.is-marantz .lp-marantz-foot { display: none; }

/* Aan/uit: geborstelde-aluminium draaiknop in Marantz-stijl, rechtsonder op
   de plint (onder de armsteun, vrij van de zwaai-baan van de arm) */
.levensloop-player.is-marantz .lp-marantz-power {
    position: absolute;
    left: calc(var(--vs) * 556);
    top: calc(var(--vs) * 380);
    width: calc(var(--vs) * 60);
    height: calc(var(--vs) * 60);
    border: none;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 4;
    /* Geborsteld metaal: fijne radiale striae + zilver-verloop, met een
       donkere onderrand zodat de cilinder op de witte plint "staat". */
    background:
        repeating-conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.42) 0deg 2.6deg,
            rgba(120, 126, 134, 0.42) 2.6deg 5.2deg),
        radial-gradient(circle at 38% 30%, #f6f7f9 0%, #c9ccd2 46%, #969aa1 76%, #6a6e76 100%);
    box-shadow:
        0 calc(var(--vs) * 6) calc(var(--vs) * 12) rgba(0, 0, 0, 0.5),
        0 calc(var(--vs) * 1) calc(var(--vs) * 2) rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 calc(var(--vs) * -4) calc(var(--vs) * 7) rgba(70, 74, 82, 0.55),
        inset 0 0 0 1px rgba(90, 94, 102, 0.35);
    transition: box-shadow 0.25s ease, transform 0.12s ease;
}
/* Geborstelde top-cap met afgeschuinde rand */
.levensloop-player.is-marantz .lp-marantz-power-ring {
    position: absolute;
    inset: calc(var(--vs) * 8);
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 90deg,
            rgba(255, 255, 255, 0.35) 0deg 2.4deg,
            rgba(120, 126, 134, 0.35) 2.4deg 4.8deg),
        radial-gradient(circle at 40% 34%, #eef0f3 0%, #c6c9cf 52%, #8f939a 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.85),
        inset 0 calc(var(--vs) * -2) calc(var(--vs) * 3) rgba(70, 74, 82, 0.55),
        0 1px 1px rgba(0, 0, 0, 0.25);
}
/* Centrale indicatie-stip — donker uit, oranje gloed als de speler aan staat */
.levensloop-player.is-marantz .lp-marantz-power-led {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--vs) * 8);
    height: calc(var(--vs) * 8);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #8a8e96 0%, #4e525a 70%);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
    transition: background 0.25s ease, box-shadow 0.25s ease;
    z-index: 1;
}
.levensloop-player.is-marantz .lp-marantz-power.playing .lp-marantz-power-led {
    background: radial-gradient(circle at 40% 35%, #ffe0ad 0%, #ee962c 65%, #b85f12 100%);
    box-shadow:
        0 0 calc(var(--vs) * 9) rgba(255, 140, 40, 0.9),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.levensloop-player.is-marantz .lp-marantz-power:hover {
    box-shadow:
        0 calc(var(--vs) * 6) calc(var(--vs) * 13) rgba(0, 0, 0, 0.55),
        0 calc(var(--vs) * 1) calc(var(--vs) * 2) rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 calc(var(--vs) * -4) calc(var(--vs) * 7) rgba(70, 74, 82, 0.55),
        0 0 calc(var(--vs) * 12) rgba(212, 161, 75, 0.3);
}
.levensloop-player.is-marantz .lp-marantz-power:active { transform: scale(0.96); }
/* De oude ON/OFF-hendel-onderdelen verbergen in deze knop */
.levensloop-player.is-marantz .lp-marantz-power .lp-power-label,
.levensloop-player.is-marantz .lp-marantz-power .lp-power-slot { display: none; }

.levensloop-player.is-marantz .lp-marantz-plinth {
    position: relative;
    width: calc(var(--vs) * 660);
    height: calc(var(--vs) * 470);
    border-radius: calc(var(--vs) * 14);
    background:
        linear-gradient(158deg, #ffffff 0%, #f3f4f6 46%, #e2e4e8 78%, #d2d5da 100%);
    box-shadow:
        inset 0 calc(var(--vs) * 2) 0 rgba(255, 255, 255, 0.9),
        inset 0 calc(var(--vs) * -10) calc(var(--vs) * 20) rgba(120, 125, 135, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Aluminium voetjes (kegels) onder de plint, vooraan zichtbaar */
.levensloop-player.is-marantz .lp-marantz-foot {
    position: absolute;
    bottom: calc(var(--vs) * -16);
    width: calc(var(--vs) * 46);
    height: calc(var(--vs) * 28);
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 30%, #f0f1f3 0%, #b9bcc2 45%, #6e7178 80%, #4a4d53 100%);
    box-shadow: 0 calc(var(--vs) * 6) calc(var(--vs) * 10) rgba(0, 0, 0, 0.5);
    z-index: -1;
}
.levensloop-player.is-marantz .lp-marantz-foot--bl { left: calc(var(--vs) * 70); }
.levensloop-player.is-marantz .lp-marantz-foot--br { right: calc(var(--vs) * 70); }

/* Marantz-wordmark, geëtst op de plint */
.levensloop-player.is-marantz .lp-marantz-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--vs) * 12);
    font-family: "Outfit", system-ui, sans-serif;
    font-size: calc(var(--vs) * 17);
    font-weight: 600;
    letter-spacing: calc(var(--vs) * 1);
    color: rgba(70, 74, 82, 0.7);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    user-select: none;
}

/* Platter/plaat op de witte plint: lichte rand eromheen */
.levensloop-player.is-marantz .lp-vinyl-platter {
    box-shadow:
        0 calc(var(--vs) * 4) calc(var(--vs) * 12) rgba(0, 0, 0, 0.4),
        0 0 0 calc(var(--vs) * 6) rgba(228, 230, 234, 0.9),
        0 0 0 calc(var(--vs) * 7) rgba(150, 154, 160, 0.6);
}

/* Toeren-keuze, recht boven de aan/uit-knop (zelfde verticale as) */
.levensloop-player.is-marantz .lp-marantz-speed {
    position: absolute;
    left: calc(var(--vs) * 564);
    top: calc(var(--vs) * 302);
    flex-direction: column;
    align-items: center;
    gap: calc(var(--vs) * 4);
    z-index: 4;
}
.levensloop-player.is-marantz .lp-vinyl-speed-knob {
    background:
        radial-gradient(circle at 34% 28%, #fbfbfc 0%, #cdd0d5 48%, #9a9da3 100%);
    box-shadow:
        0 calc(var(--vs) * 3) calc(var(--vs) * 7) rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.levensloop-player.is-marantz .lp-vinyl-speed-pointer { background: #3a3d44; }
.levensloop-player.is-marantz .lp-vinyl-speed-labels { color: rgba(70, 74, 82, 0.55); }
.levensloop-player.is-marantz .lp-vinyl-speed-labels [data-speed].is-active { color: #b87d2a; text-shadow: none; }

/* ---- Now playing-kaartje op de tafel (onderaan) ---- */
.levensloop-player.is-marantz .lp-marantz-card {
    position: absolute;
    left: calc(var(--vs) * 70);
    bottom: calc(var(--vs) * -18);
    z-index: 5;
    min-width: calc(var(--vs) * 280);
    text-align: center;
    padding: calc(var(--vs) * 14) calc(var(--vs) * 26) calc(var(--vs) * 16);
    border-radius: calc(var(--vs) * 12);
    background: linear-gradient(180deg, rgba(20, 14, 9, 0.66), rgba(12, 8, 5, 0.74));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 calc(var(--vs) * 10) calc(var(--vs) * 26) rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 235, 200, 0.12);
}
.levensloop-player.is-marantz .lp-marantz-eyebrow {
    font-size: calc(var(--vs) * 9);
    font-weight: 700;
    letter-spacing: calc(var(--vs) * 3);
    color: var(--lp-accent);
}
.levensloop-player.is-marantz .lp-marantz-card .lp-vinyl-track-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: calc(var(--vs) * 24);
    color: #f4ece0;
    max-width: calc(var(--vs) * 360);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: calc(var(--vs) * 2) auto 0;
}
.levensloop-player.is-marantz .lp-marantz-card .lp-track-counter {
    position: static; background: none; border: none; box-shadow: none;
    transform: none !important; opacity: 1 !important; padding: 0; margin: 0;
    color: var(--lp-text-dim); font-family: ui-monospace, monospace; font-size: calc(var(--vs) * 11);
}
.levensloop-player.is-marantz .lp-marantz-card-bottom {
    display: flex; align-items: center; justify-content: center; gap: calc(var(--vs) * 22);
    margin-top: calc(var(--vs) * 10);
}
.levensloop-player.is-marantz .lp-vinyl-dial { width: calc(var(--vs) * 66); height: calc(var(--vs) * 66); padding: calc(var(--vs) * 5); }

/* ---- Playbar onderaan over de scène (gedeeld met de jukebox-skin) ---- */
.levensloop-player.is-marantz .lp-track-progress,
.levensloop-player.is-jukebox .lp-track-progress {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 4vh, 40px);
    transform: translateX(-50%);
    z-index: 7;
    width: min(680px, 90vw);
    max-width: none;
    margin: 0;
    padding: calc(var(--vs) * 10) calc(var(--vs) * 18);
    border-radius: 999px;
    background: rgba(14, 9, 5, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ---- Digitaal now-playing display op de plint ---- */
.levensloop-player.is-marantz .lp-marantz-display {
    position: absolute;
    left: calc(var(--vs) * 28);
    top: calc(var(--vs) * 20);
    width: calc(var(--vs) * 320);
    max-width: calc(var(--vs) * 320);
    padding: calc(var(--vs) * 5) calc(var(--vs) * 14) calc(var(--vs) * 6);
    border-radius: calc(var(--vs) * 7);
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #120c06 0%, #0a0704 100%);
    box-shadow:
        inset 0 calc(var(--vs) * 2) calc(var(--vs) * 5) rgba(0, 0, 0, 0.9),
        inset 0 0 0 1px rgba(255, 180, 90, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--vs) * 8);
    z-index: 4;
    /* géén overflow:hidden — de tooltips van de knoppen moeten erbuiten
       kunnen; de titel heeft z'n eigen ellipsis */
}
/* Binnenste kolom: eyebrow / titel / meta, gecentreerd tussen de knoppen */
.levensloop-player.is-marantz .lp-marantz-display-inner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--vs) * 1);
}
/* Vorige/volgende: amber LCD-stijl knoppen in het display */
.levensloop-player.is-marantz .lp-marantz-disp-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--vs) * 21);
    height: calc(var(--vs) * 28);
    padding: 0;
    border: 1px solid rgba(255, 176, 92, 0.28);
    border-radius: calc(var(--vs) * 4);
    background: rgba(255, 150, 50, 0.06);
    color: rgba(255, 190, 106, 0.75);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.levensloop-player.is-marantz .lp-marantz-disp-btn:hover {
    color: #ffbe6a;
    background: rgba(255, 150, 50, 0.16);
    border-color: rgba(255, 176, 92, 0.55);
}
.levensloop-player.is-marantz .lp-marantz-disp-btn:active { transform: scale(0.94); }
.levensloop-player.is-marantz .lp-marantz-disp-btn svg {
    filter: drop-shadow(0 0 calc(var(--vs) * 5) rgba(255, 150, 50, 0.6));
}
.levensloop-player.is-marantz .lp-marantz-display-eyebrow {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: calc(var(--vs) * 6.5);
    font-weight: 700;
    letter-spacing: calc(var(--vs) * 2.5);
    color: rgba(255, 176, 92, 0.5);
}
.levensloop-player.is-marantz .lp-marantz-display .lp-vinyl-track-title {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: calc(var(--vs) * 11.5);
    font-weight: 600;
    font-style: normal;
    letter-spacing: calc(var(--vs) * 0.4);
    color: #ffbe6a;
    text-shadow: 0 0 calc(var(--vs) * 9) rgba(255, 150, 50, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.levensloop-player.is-marantz .lp-marantz-display .lp-vinyl-track-title.visible { opacity: 1; }
.levensloop-player.is-marantz .lp-marantz-display-meta {
    display: flex;
    align-items: center;
    gap: calc(var(--vs) * 8);
    font-family: ui-monospace, monospace;
    font-size: calc(var(--vs) * 8);
    color: rgba(255, 176, 92, 0.45);
}
/* track-counter en jaartal binnen het display: inline, geen badge-styling */
.levensloop-player.is-marantz .lp-marantz-display .lp-track-counter,
.levensloop-player.is-marantz .lp-marantz-display .lp-marantz-display-year {
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    transform: none !important;
    opacity: 1 !important;
    color: #e8a85a;
    font-family: ui-monospace, monospace;
    font-size: calc(var(--vs) * 8);
    text-shadow: 0 0 calc(var(--vs) * 6) rgba(255, 150, 50, 0.5);
}

/* ---- Platenhoezen: rechts op tafel, gewaaierd, plat met sleet ----
   (één regelblok — geen duplicaat-selectors, zie gotcha in handoff) */
.levensloop-player.is-marantz .lp-vinyl-stack.lp-marantz-albums {
    position: absolute;
    right: auto;
    bottom: auto;
    width: calc(var(--vs) * 350);
    height: calc(var(--vs) * 350);
    left: calc(var(--vs) * 989);
    top: calc(50% - var(--vs) * 21);
    /* --lp-fan-drag: horizontale sleep-offset tijdens het swipen (JS) */
    transform: translate(var(--lp-fan-drag, 0px), -50%) rotate(3deg);
    transform-origin: center;
    transition: transform 0.35s ease;
    z-index: 2;
    opacity: 1 !important;
    pointer-events: auto;
    touch-action: pan-y;
    cursor: grab;
    perspective: 1400px;
}
.levensloop-player.is-marantz .lp-marantz-albums .lp-vinyl-stack-card {
    /* Crème-witte versleten hoes-rand i.p.v. karton */
    padding: calc(var(--vs) * 9) calc(var(--vs) * 9) calc(var(--vs) * 16);
    border-radius: calc(var(--vs) * 2);
    background: linear-gradient(150deg, #efe7d6 0%, #ddd1ba 60%, #c4b699 100%);
    /* Vier hoezen uitgewaaierd, licht aflopend; --lp-stack-out schuift ze
       (per kaart, gestaffeld) het beeld uit in de minify-modus */
    transform:
        translateX(var(--lp-stack-out, 0vw))
        translate(calc(var(--depth, 0) * var(--vs) * -135), calc(var(--depth, 0) * var(--vs) * 14))
        rotate(calc(var(--rot, 0deg) + var(--depth, 0) * -7deg + 3deg));
    transition: transform 0.65s cubic-bezier(0.5, 0.05, 0.3, 1);
    transition-delay: calc(var(--depth, 0) * 0.11s);
    box-shadow:
        inset 0 0 0 1px rgba(80, 60, 30, 0.18),
        inset 0 0 calc(var(--vs) * 18) rgba(90, 70, 40, 0.18),
        0 calc(var(--vs) * 16) calc(var(--vs) * 26) rgba(0, 0, 0, 0.6);
}
/* Versleten randen / vlekken op de hoes */
.levensloop-player.is-marantz .lp-marantz-albums .lp-vinyl-stack-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(120% 100% at 12% 8%, rgba(255,250,240,0.25) 0%, transparent 30%),
        radial-gradient(140% 120% at 88% 96%, rgba(40,28,12,0.28) 0%, transparent 42%);
    mix-blend-mode: multiply;
}
.levensloop-player.is-marantz .lp-marantz-albums .lp-vinyl-stack-card img {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

/* Geen vaste breakpoints meer: --vs schaalt continu mee met de viewport
   (zie de max(min(...))-formule op .is-marantz hierboven). */

/* ============================================================
   INDUSTRIËLE JUKEBOX-SKIN — fotorealistische machine
   De machinefoto (Media Library, admin: "Machinefoto") is de hele
   visuele basis; daaroverheen liggen alleen levende elementen:
   klik-hotspots op de platen-carrousel, een titel-chip, een
   lichtpuls bij plaatwissel, en de écht draaiende plaat (in
   perspectief gedrukt) precies op de platter van de foto.
   De stage heeft de vaste foto-verhouding (1870×841), zodat alle
   procent-posities op elke schermbreedte exact blijven kloppen.
   ============================================================ */
.levensloop-player.is-jukebox {
    position: relative;
    max-width: none;
    margin: 0;
    margin-left: calc(50% - 50vw);   /* full-bleed: breekt uit de content-kolom */
    width: 100vw;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #e8dcc8;
    overflow: hidden;
}

.levensloop-player.is-jukebox .lp-jukebox-scene {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    /* Donkere machinekamer rond de foto (letterbox-banden) */
    background:
        radial-gradient(120% 90% at 50% 45%, rgba(255, 150, 40, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, #100e0c 0%, #0a0908 50%, #040403 100%);
}

/* De stage = de foto, op exacte beeldverhouding zodat de hotspot-
   posities (in %) overal precies op de platen van de foto vallen. */
.levensloop-player.is-jukebox .lp-jb-stage {
    position: relative;
    aspect-ratio: 1870 / 841;
    width: min(100vw, calc(94vh * (1870 / 841)));
    background-color: #0d0c0e;
    background-image: var(--lp-jb-photo, radial-gradient(80% 70% at 50% 40%, #1c1812 0%, #0d0c0e 70%));
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* ---- Klik-hotspots op de platen in de carrousel ---- */
.levensloop-player.is-jukebox .lp-jb-slot {
    position: absolute;
    top: 3%;
    height: 47%;
    width: 4.4%;
    transform: translateX(-50%);
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    z-index: 4;
}
/* Amberen gloed die de plaat van de foto "aanlicht" */
.levensloop-player.is-jukebox .lp-jb-slot::before {
    content: "";
    position: absolute;
    inset: -18% -55%;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(255, 200, 110, 0.5) 0%,
        rgba(255, 160, 50, 0.22) 52%,
        transparent 76%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.levensloop-player.is-jukebox .lp-jb-slot:hover::before,
.levensloop-player.is-jukebox .lp-jb-slot:focus-visible::before {
    opacity: 1;
}
/* Actieve plaat: rustige permanente gloed met trage adem-puls */
@keyframes lp-jb-slot-breathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.85; }
}
.levensloop-player.is-jukebox .lp-jb-slot.is-active::before {
    opacity: 0.7;
    animation: lp-jb-slot-breathe 3.2s ease-in-out infinite;
}
/* Gekozen plaat: korte felle flits aan het begin van de wissel */
@keyframes lp-jb-slot-flash {
    0%   { opacity: 0.2; }
    25%  { opacity: 1; }
    100% { opacity: 0; }
}
.levensloop-player.is-jukebox .lp-jb-slot.is-picked::before {
    animation: lp-jb-slot-flash 0.9s ease-out both;
}

/* ---- Titel-chip onder de carrousel bij hover/focus ---- */
.levensloop-player.is-jukebox .lp-jb-slot-label {
    position: absolute;
    top: 52.5%;
    transform: translateX(-50%);
    max-width: 34%;
    padding: 0.5% 1.2%;
    border-radius: 999px;
    background: rgba(12, 8, 4, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 180, 90, 0.25),
        0 4px 14px rgba(0, 0, 0, 0.6);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: clamp(10px, 0.85vw, 15px);
    color: #ffbe6a;
    text-shadow: 0 0 8px rgba(255, 150, 50, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 5;
}
.levensloop-player.is-jukebox .lp-jb-slot-label.visible { opacity: 1; }

/* ---- Lichtpuls: glijdt van het gekozen slot naar de platter ---- */
.levensloop-player.is-jukebox .lp-jb-orb {
    position: absolute;
    width: 2.6%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #ffffff 0%, #ffe9c4 28%, #ffb95a 55%, rgba(255, 150, 40, 0.5) 80%, transparent 100%);
    box-shadow:
        0 0 18px 6px rgba(255, 200, 110, 0.95),
        0 0 60px 26px rgba(255, 150, 40, 0.55),
        0 0 120px 50px rgba(255, 130, 20, 0.25);
    opacity: 0;
    pointer-events: none;
    z-index: 6;
}
.levensloop-player.is-jukebox .lp-jb-orb.visible { opacity: 1; }

/* ---- De levende plaat, in perspectief op de platter van de foto ----
   De scaleY drukt de cirkel tot de ellips van het camerastandpunt;
   de rotatie van de plaat (inline transform uit player.js) draait
   daarbinnen, dus glints en label draaien correct elliptisch mee. */
.levensloop-player.is-jukebox .lp-vinyl-cabinet {
    position: absolute;
    inset: 0;
    pointer-events: none;   /* alleen de plaat zelf vangt muis (scratchen) */
    z-index: 2;
}
.levensloop-player.is-jukebox .lp-vinyl-platter {
    position: absolute;
    left: 49.2%;
    top: 77.5%;
    width: 35.2%;
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scaleY(0.285);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 44%, #26262a 0%, #141416 55%, #070708 100%);
    box-shadow:
        0 0 calc(var(--vs) * 30) rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: auto;
}
/* Strobe-rand van de basis-platter is hier niet nodig */
.levensloop-player.is-jukebox .lp-vinyl-platter::after { display: none; }
.levensloop-player.is-jukebox .lp-vinyl-record {
    inset: 2.5%;
    background: radial-gradient(circle, #111114 0%, #0a0a0c 70%, #060607 100%);
}
/* Label/hoes schaalt mee met de plaat (geen vaste --vs-maat) */
.levensloop-player.is-jukebox .lp-vinyl-label {
    width: 31%;
    height: 31%;
}
/* Warme amber-reflectie van de machineverlichting op het vinyl */
.levensloop-player.is-jukebox .lp-vinyl-sheen {
    background:
        linear-gradient(100deg, transparent 30%, rgba(255, 190, 110, 0.10) 44%, rgba(255, 220, 160, 0.16) 50%, rgba(255, 190, 110, 0.08) 56%, transparent 70%);
}
/* Flits-puls op de plaat als de lichtpuls 'm raakt (nieuwe plaat ligt erop) */
@keyframes lp-jb-drop-pulse {
    0%   { filter: brightness(1); }
    18%  { filter: brightness(1.9); }
    100% { filter: brightness(1); }
}
.levensloop-player.is-jukebox.is-jb-drop .lp-vinyl-platter {
    animation: lp-jb-drop-pulse 0.8s ease-out both;
}
/* De toonarm is alleen voor de cue/crackle-engine; visueel verborgen
   (de foto heeft z'n eigen naald-torens). */
.levensloop-player.is-jukebox .lp-vinyl-tonearm { display: none; }

/* ---- Now-playing chip met aan/uit-knop, onder in de foto ---- */
.levensloop-player.is-jukebox .lp-jb-display {
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.9vw, 16px);
    max-width: 72%;
    padding: clamp(5px, 0.55vw, 10px) clamp(12px, 1.3vw, 24px);
    border-radius: 999px;
    background: rgba(12, 8, 4, 0.74);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 180, 90, 0.22),
        0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 5;
}
.levensloop-player.is-jukebox .lp-jb-display-eyebrow {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: clamp(7px, 0.55vw, 10px);
    font-weight: 700;
    letter-spacing: 0.3em;
    color: rgba(255, 176, 92, 0.55);
    white-space: nowrap;
}
.levensloop-player.is-jukebox .lp-jb-display .lp-vinyl-track-title {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: clamp(12px, 1.05vw, 18px);
    font-weight: 600;
    font-style: normal;
    color: #ffbe6a;
    text-shadow: 0 0 9px rgba(255, 150, 50, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.levensloop-player.is-jukebox .lp-jb-display .lp-vinyl-track-title.visible { opacity: 1; }
.levensloop-player.is-jukebox .lp-jb-display-meta {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.7vw, 12px);
}
.levensloop-player.is-jukebox .lp-jb-display .lp-track-counter,
.levensloop-player.is-jukebox .lp-jb-display .lp-jb-display-year {
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    transform: none !important;
    opacity: 1 !important;
    color: #e8a85a;
    font-family: ui-monospace, monospace;
    font-size: clamp(9px, 0.7vw, 12px);
    text-shadow: 0 0 6px rgba(255, 150, 50, 0.5);
    white-space: nowrap;
}
/* Aan/uit: klein messing knopje in de chip */
.levensloop-player.is-jukebox .lp-jb-power {
    position: relative;
    flex: 0 0 auto;
    width: clamp(22px, 1.9vw, 34px);
    height: clamp(22px, 1.9vw, 34px);
    border: none;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    background: radial-gradient(circle at 38% 30%, #4e4e56 0%, #26262c 50%, #101014 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 0 2px rgba(196, 144, 54, 0.45),
        0 3px 8px rgba(0, 0, 0, 0.6);
    transition: box-shadow 0.2s ease, transform 0.12s ease;
}
.levensloop-player.is-jukebox .lp-jb-power:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 0 2px rgba(255, 190, 90, 0.7),
        0 0 12px rgba(255, 160, 50, 0.35);
}
.levensloop-player.is-jukebox .lp-jb-power:active { transform: scale(0.94); }
.levensloop-player.is-jukebox .lp-jb-power-led {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #6a6a72 0%, #3a3a40 70%);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.levensloop-player.is-jukebox .lp-jb-power.playing .lp-jb-power-led {
    background: radial-gradient(circle at 40% 35%, #ffe0ad 0%, #ee962c 65%, #b85f12 100%);
    box-shadow: 0 0 10px rgba(255, 140, 40, 0.9);
}
.levensloop-player.is-jukebox .lp-jb-power .lp-power-label,
.levensloop-player.is-jukebox .lp-jb-power .lp-power-slot { display: none; }

/* ---- Naald op de plaat: zakt vanuit de centrale toren van de foto ----
   Vormgegeven naar het metaal van de foto: geborstelde bovenhuls met
   warme randreflecties, gepolijste schacht met amber omgevingslicht,
   conische tiphouder en een zachte contactschaduw op het vinyl.
   Omhoog zodra de engine de arm licht (is-arm-lifted) of bij pauze. */
.levensloop-player.is-jukebox .lp-jb-needle {
    position: absolute;
    left: 49.73%;
    top: 61.5%;
    width: 0.62%;
    height: 8.4%;
    transform: translate(-50%, -26%);
    transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.35, 1);
    pointer-events: none;
    z-index: 3;
}
/* Zachte contactschaduw op het vinyl, alleen als de naald erop staat */
.levensloop-player.is-jukebox .lp-jb-needle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 97%;
    width: 320%;
    aspect-ratio: 2.6;
    transform: translate(-50%, -30%);
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.levensloop-player.is-jukebox .lp-jb-needle-shaft {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 82%;
    border-radius: 999px;
    background:
        /* messing kraag */
        linear-gradient(0deg, transparent 56%, rgba(244, 204, 124, 0.95) 59% 66%, rgba(90, 58, 14, 0.9) 66% 69%, transparent 72%),
        /* warm chroom: amber randen, koele specular net links van het midden */
        linear-gradient(90deg, #170f08 0%, #a06a36 14%, #e8d9c0 40%, #fffdf6 49%, #c9c4b8 56%, #7a5326 80%, #120b05 100%);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.75),
        0 0 10px rgba(255, 170, 70, 0.22);
}
/* Geborstelde bovenhuls die aansluit op de torentip van de foto */
.levensloop-player.is-jukebox .lp-jb-needle-shaft::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -6%;
    width: 195%;
    height: 36%;
    transform: translateX(-50%);
    border-radius: 28% / 18%;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, #1a120a 0%, #8a5a2e 10%, #d8cdbd 38%, #fdf6e8 50%, #b0a896 62%, #6a4422 88%, #140d06 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(0, 0, 0, 0.6);
}
.levensloop-player.is-jukebox .lp-jb-needle-tip {
    position: absolute;
    left: 50%;
    top: 76%;
    width: 64%;
    height: 20%;
    transform: translateX(-50%);
    clip-path: polygon(8% 0, 92% 0, 50% 100%);
    background: linear-gradient(90deg, #3a2a16 0%, #d8c9b2 46%, #f8efe0 52%, #6a5230 74%, #140e06 100%);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}
.levensloop-player.is-jukebox .lp-jb-needle-glint {
    position: absolute;
    left: 50%;
    top: 96%;
    width: 150%;
    aspect-ratio: 1.6;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 232, 185, 0.95) 0%, rgba(255, 165, 55, 0.45) 45%, transparent 75%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
/* Speelt + naald niet gelicht → naald op de plaat, glim + schaduw aan,
   subtiele tril */
@keyframes lp-jb-needle-tremble {
    0%   { translate: 0 0; }
    50%  { translate: 0.4px 0.2px; }
    100% { translate: -0.3px 0; }
}
@keyframes lp-jb-glint-flicker {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}
.levensloop-player.is-jukebox:has(.lp-play-btn.playing) .lp-vinyl-cabinet:not(.is-arm-lifted) .lp-jb-needle::before {
    opacity: 0.8;
}
.levensloop-player.is-jukebox:has(.lp-play-btn.playing) .lp-vinyl-cabinet:not(.is-arm-lifted) .lp-jb-needle {
    transform: translate(-50%, 0);
}
.levensloop-player.is-jukebox:has(.lp-play-btn.playing) .lp-vinyl-cabinet:not(.is-arm-lifted) .lp-jb-needle .lp-jb-needle-shaft {
    animation: lp-jb-needle-tremble 0.16s steps(2) infinite;
}
.levensloop-player.is-jukebox:has(.lp-play-btn.playing) .lp-vinyl-cabinet:not(.is-arm-lifted) .lp-jb-needle .lp-jb-needle-glint {
    opacity: 1;
    animation: lp-jb-glint-flicker 0.9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .levensloop-player.is-jukebox .lp-jb-needle-shaft { animation: none !important; }
}

/* ---- Playbar direct onder de now-playing-chip (i.p.v. onderaan het blok) ---- */
.levensloop-player.is-jukebox .lp-track-progress {
    bottom: auto;
    top: min(42.28vw, 88.36vh);
}

/* ---- Geen intro-overlay (titel/uitleg) over de jukebox-foto ---- */
.levensloop-player.is-jukebox .lp-intro { display: none; }

/* ---- Lichten aan/uit: crossfade naar de donkere machinefoto ----
   De "lichten uit"-foto ligt als laag over de aan-foto. Speler uit of
   gepauzeerd → laag zichtbaar (machine dooft); speler aan → laag fade't
   weg en de lichten gaan weer aan. Zonder uit-foto gebeurt er niets. */
.levensloop-player.is-jukebox .lp-jb-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--lp-jb-photo-off, none);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 1;
    /* Kleine delay: een korte uit/aan-flits bij een auto-trackwissel geeft
       zo geen zichtbare dip; de echte power-down-animatie neemt het over. */
    transition: opacity 1.6s ease 0.3s;
    pointer-events: none;
    z-index: 1;
}
/* Aanzetten: de lichten slaan in drie secties aan, precies op de
   relais-tikken in het opstart-geluid (0,5 / 0,95 / 1,4 s), en zijn
   na ~2,5 s vol aan. */
@keyframes lp-jb-lights-on {
    0%   { opacity: 1; }
    18%  { opacity: 1; }      /* contactor-klunk: nog donker */
    22%  { opacity: 0.72; }   /* sectie 1 slaat aan (tik 1) */
    26%  { opacity: 0.78; }
    38%  { opacity: 0.48; }   /* sectie 2 (tik 2) */
    42%  { opacity: 0.55; }
    56%  { opacity: 0.22; }   /* sectie 3 (tik 3) */
    60%  { opacity: 0.28; }
    100% { opacity: 0; }      /* vol aan */
}
.levensloop-player.is-jukebox:has(.lp-play-btn.playing) .lp-jb-stage::before {
    opacity: 0;
    animation: lp-jb-lights-on 2.5s ease-out both;
}
/* Uitzetten: de lichtsecties vallen één voor één uit, op de twee
   relais-tikken van het uitschakel-geluid (0,4 / 0,8 s); na ~1,8 s donker.
   De klasse is-jb-powerdown wordt door player.js gezet bij een échte
   uit-actie (niet bij een auto-trackwissel). */
@keyframes lp-jb-lights-off {
    0%   { opacity: 0; }
    8%   { opacity: 0.16; }   /* uit-klunk: eerste dip */
    13%  { opacity: 0.08; }
    22%  { opacity: 0.45; }   /* sectie 1 valt uit (tik 1) */
    28%  { opacity: 0.36; }
    44%  { opacity: 0.75; }   /* sectie 2 valt uit (tik 2) */
    50%  { opacity: 0.66; }
    100% { opacity: 1; }      /* helemaal donker */
}
.levensloop-player.is-jukebox.is-jb-powerdown .lp-jb-stage::before {
    animation: lp-jb-lights-off 1.8s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    .levensloop-player.is-jukebox:has(.lp-play-btn.playing) .lp-jb-stage::before,
    .levensloop-player.is-jukebox.is-jb-powerdown .lp-jb-stage::before {
        animation: none;
        transition: opacity 1.1s ease;
    }
}

/* ---- Verlichting ademt subtiel mee met de muziek ----
   De vinyl-engine zet per frame --lp-bass (kick) en --lp-bass2 (snare)
   op de cabinet; daarop drijft een zachte amber-gloed over de carrousel
   en rond de platter. Screen-blend: licht alleen óp. Max ~14% opacity,
   en bij pauze/stilte automatisch 0. */
.levensloop-player.is-jukebox .lp-vinyl-cabinet::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 52% at 50% 28%, rgba(255, 175, 70, 0.55) 0%, transparent 70%),
        radial-gradient(46% 38% at 50% 80%, rgba(255, 150, 40, 0.40) 0%, transparent 70%);
    mix-blend-mode: screen;
    opacity: calc(var(--lp-bass, 0) * 0.09 + var(--lp-bass2, 0) * 0.05);
    z-index: 1;
}

/* ---- De lampen van de foto zelf pulseren subtiel mee ----
   De uit-foto ligt tijdens het spelen voor een fractie (8%) over het
   beeld; op de beat zakt die dim naar 0. Omdat het verschil tussen de
   aan- en uit-foto precies de verlichting is, lichten zo alléén de
   lampen en hun reflecties in de foto op — de rest beweegt niet. */
.levensloop-player.is-jukebox .lp-jb-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--lp-jb-photo-off, none);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.levensloop-player.is-jukebox:has(.lp-play-btn.playing) .lp-jb-stage::after {
    opacity: calc(0.08 - min(var(--lp-bass, 0) * 0.05 + var(--lp-bass2, 0) * 0.03, 0.08));
}

/* ---- Rustige modus (is-jb-calm): continu flikkeren tijdens het
   afspelen uit ----
   Voor wie gevoelig is voor flikkerend licht: geen beat-gloed, geen
   pulserende fotolampen, statische actieve-plaat-markering en een
   stilstaande naald-glim. Het aan/uit-theater (flikker bij power on/off)
   en de eenmalige lichtpuls bij plaatkeuze blijven gewoon werken;
   audio en bediening veranderen niet. */
.levensloop-player.is-jukebox.is-jb-calm .lp-vinyl-cabinet::before,
.levensloop-player.is-jukebox.is-jb-calm .lp-jb-stage::after { opacity: 0 !important; }
.levensloop-player.is-jukebox.is-jb-calm .lp-jb-slot.is-active::before {
    animation: none;
    opacity: 0.55;
}
.levensloop-player.is-jukebox.is-jb-calm .lp-jb-needle-glint { animation: none !important; }
.levensloop-player.is-jukebox.is-jb-calm .lp-jb-needle-shaft { animation: none !important; }

/* Toggle-knop in de playbar: als de rustige modus actief is, licht de
   knop zelf warm op — een rustige amber ring + zachte gloed als
   "geselecteerd"-stand. (Geen ::after: dat element is van de tooltip.) */
.levensloop-player.is-jukebox .lp-jb-lights-btn {
    transition: box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.levensloop-player.is-jukebox .lp-jb-lights-btn:focus { outline: none; }
.levensloop-player.is-jukebox .lp-jb-lights-btn:focus-visible {
    outline: 2px solid rgba(255, 180, 90, 0.8);
    outline-offset: 2px;
}
.levensloop-player.is-jukebox .lp-jb-lights-btn.is-off {
    color: #ffbe6a;
    background: rgba(255, 150, 40, 0.12);
    box-shadow:
        inset 0 0 0 1px rgba(255, 180, 90, 0.6),
        inset 0 0 8px rgba(255, 150, 40, 0.25),
        0 0 10px rgba(255, 150, 40, 0.45);
}
.levensloop-player.is-jukebox .lp-jb-lights-btn.is-off svg {
    opacity: 0.95;
    filter: drop-shadow(0 0 4px rgba(255, 150, 40, 0.6));
}

/* ---- Plaat en naald dimmen mee met de machineverlichting ----
   Machine uit → het vinyl, het hoesje en de naald zakken mee het donker
   in (zelfde timing als de lichten); bij het aanzetten lichten ze weer
   op terwijl de lampsecties aanslaan. */
.levensloop-player.is-jukebox .lp-vinyl-platter {
    filter: brightness(0.32) saturate(0.8);
    transition: filter 1.5s ease 0.3s;
}
.levensloop-player.is-jukebox:has(.lp-play-btn.playing) .lp-vinyl-platter {
    filter: brightness(1) saturate(1);
    transition: filter 1.2s ease 0.4s;
}
.levensloop-player.is-jukebox .lp-jb-needle {
    filter: brightness(0.3);
    transition:
        transform 0.6s cubic-bezier(0.45, 0.05, 0.35, 1),
        filter 1.5s ease 0.3s;
}
.levensloop-player.is-jukebox:has(.lp-play-btn.playing) .lp-jb-needle {
    /* Iets onder vol-helder: past bij de donkerdere naaldkop van de foto */
    filter: brightness(0.78);
    transition:
        transform 0.6s cubic-bezier(0.45, 0.05, 0.35, 1),
        filter 1.2s ease 0.4s;
}

/* ---- Geen intro-overlay (titel/uitleg) over de Marantz-scène ---- */
.levensloop-player.is-marantz .lp-intro { display: none; }

/* ---- Jog-draaiknop op de plint: snel door de nummers/jaren draaien ----
   Geborsteld aluminium zoals de andere knoppen; de wijzer draait mee
   met je hand (--jog wordt door player.js gezet). */
.levensloop-player.is-marantz .lp-marantz-jog {
    position: absolute;
    left: calc(var(--vs) * 556);
    top: calc(var(--vs) * 216);
    width: calc(var(--vs) * 60);
    height: calc(var(--vs) * 60);
    border: none;
    padding: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.35) 0deg 2.4deg,
            rgba(140, 145, 152, 0.35) 2.4deg 4.8deg),
        radial-gradient(circle at 34% 28%, #fbfbfc 0%, #cdd0d5 50%, #9a9da3 100%);
    box-shadow:
        0 calc(var(--vs) * 4) calc(var(--vs) * 9) rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 calc(var(--vs) * -3) calc(var(--vs) * 5) rgba(70, 74, 82, 0.4);
    cursor: grab;
    z-index: 4;
    touch-action: none;
    transition: box-shadow 0.2s ease;
}
.levensloop-player.is-marantz .lp-marantz-jog:hover {
    box-shadow:
        0 calc(var(--vs) * 4) calc(var(--vs) * 10) rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 calc(var(--vs) * -3) calc(var(--vs) * 5) rgba(70, 74, 82, 0.4),
        0 0 calc(var(--vs) * 12) rgba(212, 161, 75, 0.25);
}
.levensloop-player.is-marantz .lp-marantz-jog:active { cursor: grabbing; }
.levensloop-player.is-marantz .lp-marantz-jog-pointer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--vs) * 4);
    height: calc(var(--vs) * 22);
    transform: translate(-50%, -100%) rotate(var(--jog, 0deg));
    transform-origin: 50% 100%;
    border-radius: 999px;
    background: #3a3d44;
    pointer-events: none;
}
/* Hart in het playbar-menu: zelfde ronde stijl als de andere knoppen */
.levensloop-player.is-marantz .lp-marantz-noise-btn,
.levensloop-player.is-marantz .lp-marantz-fav-btn {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid rgba(255, 235, 200, 0.25);
    border-radius: 50%;
    color: var(--lp-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}
.levensloop-player.is-marantz .lp-marantz-noise-btn:hover,
.levensloop-player.is-marantz .lp-marantz-fav-btn:hover {
    color: var(--lp-accent);
    border-color: var(--lp-accent);
    background: rgba(212, 161, 75, 0.08);
}
/* Ruis-knop: HiFi = amber gevuld, vintage = warm rood-bruin, uit = gedimd */
.levensloop-player.is-marantz .lp-marantz-noise-btn.is-noise-hifi {
    color: var(--lp-accent);
    border-color: rgba(212, 161, 75, 0.55);
}
.levensloop-player.is-marantz .lp-marantz-noise-btn.is-noise-vintage {
    color: #c87f5a;
    border-color: rgba(200, 127, 90, 0.55);
}
.levensloop-player.is-marantz .lp-marantz-noise-btn.is-noise-off svg {
    opacity: 0.35;
}
.levensloop-player.is-marantz .lp-marantz-fav-btn.is-active {
    color: var(--lp-accent);
    border-color: var(--lp-accent);
}
.levensloop-player.is-marantz .lp-marantz-fav-btn.is-active svg {
    fill: currentColor;
    filter: drop-shadow(0 0 4px rgba(255, 150, 50, 0.45));
}

/* Tooltips van de display-knoppen bóven het display (en dus boven de
   speler) tonen in plaats van eronder afgeknipt */
.levensloop-player.is-marantz .lp-marantz-disp-btn::after {
    bottom: calc(100% + var(--vs) * 32);
}

/* Portal-wrapper voor de favorieten-drawer: zelf geen layout, alleen
   styling-scope (.levensloop-player) voor de kinderen */
.levensloop-player.lp-fav-portal { display: contents; }

/* Hart op de plint: geen blauwe browser-focusring; eigen amber focus */
.levensloop-player.is-marantz .lp-marantz-fav-btn:focus { outline: none; }
.levensloop-player.is-marantz .lp-marantz-fav-btn:focus-visible {
    outline: 2px solid rgba(200, 127, 42, 0.7);
    outline-offset: 3px;
    border-radius: 50%;
}

/* ---- Scrub-tijdlijn in het marantz-display ---- */
.levensloop-player.is-marantz .lp-marantz-display-scrub {
    display: flex;
    align-items: center;
    gap: calc(var(--vs) * 7);
    width: 100%;
    margin-top: calc(var(--vs) * 2);
}
.levensloop-player.is-marantz .lp-marantz-display-scrub .lp-time-current,
.levensloop-player.is-marantz .lp-marantz-display-scrub .lp-time-total {
    flex: 0 0 auto;
    font-family: ui-monospace, monospace;
    font-size: calc(var(--vs) * 7.5);
    color: rgba(255, 176, 92, 0.6);
    min-width: 0;
    padding: 0;
    margin: 0;
}
.levensloop-player.is-marantz .lp-marantz-display-scrub .lp-scrub-bar {
    flex: 1;
    position: relative;
    height: calc(var(--vs) * 3.5);
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 176, 92, 0.14);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
/* Fill en bolletje exact op de as van de lijn (basis-stijlen hebben een
   eigen hoogte/offset — hier volledig overschreven) */
.levensloop-player.is-marantz .lp-marantz-display-scrub .lp-scrub-fill {
    position: absolute;
    left: 0;
    top: 50%;
    bottom: auto;
    height: calc(var(--vs) * 3.5);
    transform: translateY(-50%);
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #c87f2a, #ffbe6a);
    box-shadow: 0 0 calc(var(--vs) * 4) rgba(255, 150, 50, 0.4);
}
.levensloop-player.is-marantz .lp-marantz-display-scrub .lp-scrub-handle {
    position: absolute;
    top: 50%;
    width: calc(var(--vs) * 7);
    height: calc(var(--vs) * 7);
    transform: translate(-50%, -50%);
    margin: 0;
    border-radius: 50%;
    background: #ffd9a0;
    box-shadow: 0 0 calc(var(--vs) * 4) rgba(255, 150, 50, 0.6);
}

/* ---- ON/OFF-label onder de aan/uit-knop ---- */
.levensloop-player.is-marantz .lp-marantz-power-label {
    position: absolute;
    left: calc(var(--vs) * 556);
    top: calc(var(--vs) * 446);
    width: calc(var(--vs) * 60);
    display: flex;
    justify-content: center;
    gap: calc(var(--vs) * 8);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: calc(var(--vs) * 9);
    letter-spacing: calc(var(--vs) * 0.5);
    color: rgba(70, 74, 82, 0.55);
    z-index: 4;
    pointer-events: none;
    user-select: none;
}
.levensloop-player.is-marantz .lp-marantz-power-label span { transition: color 0.25s ease; }
.levensloop-player.is-marantz:has(.lp-play-btn.playing) .lp-marantz-power-label [data-state="on"],
.levensloop-player.is-marantz:not(:has(.lp-play-btn.playing)) .lp-marantz-power-label [data-state="off"] {
    color: #b87d2a;
}

/* ---- Marantz: playbar als lade ónder de platenspeler ----
   z-index 2 = achter de plint (tt heeft 3): bij aanzetten schuift de
   balk onder de speler vandaan, bij uitzetten glijdt hij erachter terug. */
.levensloop-player.is-marantz .lp-track-progress {
    bottom: auto;
    top: calc(var(--vs) * 576);
    left: calc((100vw - var(--vs) * 1360) / 2 + var(--vs) * 354);
    width: auto;
    z-index: 2;
    margin-top: 0;
}
/* Bij hover/focus de balk boven de speler tillen zodat de tooltips
   (die boven de knoppen verschijnen) niet achter de plint verdwijnen.
   Tijdens het lade-schuiven zelf is er geen hover (pointer-events uit). */
.levensloop-player.is-marantz .lp-track-progress:hover,
.levensloop-player.is-marantz .lp-track-progress:focus-within {
    z-index: 9;
}
.levensloop-player.is-marantz:not(.is-radio-on):not(.is-live-mode) .lp-track-progress {
    top: calc(var(--vs) * 492);
    transform: translateX(-50%);
    margin-top: 0;
    opacity: 1; /* niet faden: hij verdwijnt mechanisch achter de plint */
    pointer-events: none;
}

/* ---- Geel jaartal-label op elke hoes in de waaier ---- */
.levensloop-player .lp-vinyl-stack-year { display: none; }
.levensloop-player.is-marantz .lp-marantz-albums .lp-vinyl-stack-year {
    display: block;
    position: absolute;
    top: calc(var(--vs) * 16);
    left: calc(var(--vs) * 16);
    padding: calc(var(--vs) * 3) calc(var(--vs) * 10);
    border-radius: 999px;
    background: linear-gradient(180deg, #f2c25e 0%, #dca33c 100%);
    color: #2a1c08;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    font-size: calc(var(--vs) * 12);
    letter-spacing: calc(var(--vs) * 0.5);
    box-shadow:
        0 calc(var(--vs) * 2) calc(var(--vs) * 5) rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    z-index: 2;
    pointer-events: none;
}

/* ---- Verhaaltje onder de header: wat ademruimte ---- */
.levensloop-player.is-marantz .lp-story-panel {
    margin-top: calc(var(--vs) * 26);
}

/* ============================================================
   MARANTZ — ON AIR-indicator + "Listen live" compacte modus
   ============================================================ */

/* ---- ON AIR linksboven op het hout: ((o)) + titel + audio-waves ---- */
.levensloop-player.is-marantz .lp-onair {
    position: absolute;
    left: calc(var(--vs) * 30);
    top: calc(var(--vs) * 22);
    display: flex;
    align-items: center;
    gap: calc(var(--vs) * 10);
    z-index: 6;
    opacity: 0;
    transform: translateY(calc(var(--vs) * -6));
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}
.levensloop-player.is-marantz:has(.lp-play-btn.playing) .lp-onair {
    opacity: 1;
    transform: translateY(0);
}
/* ((o))-icoon: amberen kern met twee uitdijende boog-ringen */
.levensloop-player.is-marantz .lp-onair-icon {
    position: relative;
    width: calc(var(--vs) * 22);
    height: calc(var(--vs) * 22);
    flex: 0 0 auto;
}
.levensloop-player.is-marantz .lp-onair-icon i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--vs) * 6);
    height: calc(var(--vs) * 6);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #e8954a;
    box-shadow: 0 0 calc(var(--vs) * 6) rgba(255, 150, 50, 0.7);
}
.levensloop-player.is-marantz .lp-onair-icon::before,
.levensloop-player.is-marantz .lp-onair-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border: calc(var(--vs) * 1.6) solid transparent;
    border-left-color: #e8954a;
    border-right-color: #e8954a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.levensloop-player.is-marantz .lp-onair-icon::before {
    width: calc(var(--vs) * 13);
    height: calc(var(--vs) * 13);
}
.levensloop-player.is-marantz .lp-onair-icon::after {
    width: calc(var(--vs) * 21);
    height: calc(var(--vs) * 21);
    opacity: 0.7;
    animation: lp-onair-ping 2.2s ease-in-out infinite;
}
@keyframes lp-onair-ping {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.85; }
}
.levensloop-player.is-marantz .lp-onair-label {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: calc(var(--vs) * 11);
    font-weight: 700;
    letter-spacing: calc(var(--vs) * 2);
    color: rgba(232, 169, 90, 0.85);
    white-space: nowrap;
}
.levensloop-player.is-marantz .lp-onair-title {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: calc(var(--vs) * 13);
    font-weight: 700;
    letter-spacing: calc(var(--vs) * 1.4);
    text-transform: uppercase;
    color: #f4ece0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    max-width: calc(var(--vs) * 420);
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Audio-waves: 7 staafjes die op kick (even) en snare (oneven) dansen */
.levensloop-player.is-marantz .lp-onair-waves {
    display: flex;
    align-items: center;
    gap: calc(var(--vs) * 3);
    height: calc(var(--vs) * 18);
    margin-left: calc(var(--vs) * 4);
}
.levensloop-player.is-marantz .lp-onair-waves i {
    width: calc(var(--vs) * 3);
    border-radius: 999px;
    background: rgba(232, 169, 90, 0.85);
}
.levensloop-player.is-marantz .lp-onair-waves i:nth-child(1) { height: calc(var(--vs) * 8  * (0.35 + var(--lp-bass, 0) * 0.65)); }
.levensloop-player.is-marantz .lp-onair-waves i:nth-child(2) { height: calc(var(--vs) * 14 * (0.35 + var(--lp-bass2, 0) * 0.65)); }
.levensloop-player.is-marantz .lp-onair-waves i:nth-child(3) { height: calc(var(--vs) * 10 * (0.35 + var(--lp-bass, 0) * 0.65)); }
.levensloop-player.is-marantz .lp-onair-waves i:nth-child(4) { height: calc(var(--vs) * 18 * (0.35 + var(--lp-bass2, 0) * 0.65)); }
.levensloop-player.is-marantz .lp-onair-waves i:nth-child(5) { height: calc(var(--vs) * 9  * (0.35 + var(--lp-bass2, 0) * 0.65)); }
.levensloop-player.is-marantz .lp-onair-waves i:nth-child(6) { height: calc(var(--vs) * 13 * (0.35 + var(--lp-bass, 0) * 0.65)); }
.levensloop-player.is-marantz .lp-onair-waves i:nth-child(7) { height: calc(var(--vs) * 7  * (0.35 + var(--lp-bass2, 0) * 0.65)); }

/* ---- "Listen live"-knop rechtsboven op de scène ---- */
.levensloop-player.is-marantz .lp-live-toggle {
    position: absolute;
    right: calc(var(--vs) * 30);
    top: calc(var(--vs) * 18);
    display: flex;
    align-items: center;
    gap: calc(var(--vs) * 8);
    padding: calc(var(--vs) * 8) calc(var(--vs) * 16);
    border-radius: 999px;
    border: 1px solid rgba(212, 161, 75, 0.4);
    background: rgba(20, 18, 14, 0.78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #e8d9c0;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: calc(var(--vs) * 10.5);
    font-weight: 700;
    letter-spacing: calc(var(--vs) * 2);
    cursor: pointer;
    z-index: 7;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.levensloop-player.is-marantz .lp-live-toggle:hover {
    border-color: rgba(255, 190, 106, 0.8);
    color: #ffd9a0;
    box-shadow: 0 0 calc(var(--vs) * 14) rgba(255, 160, 50, 0.25);
}
.levensloop-player.is-marantz .lp-live-dot {
    width: calc(var(--vs) * 8);
    height: calc(var(--vs) * 8);
    border-radius: 50%;
    background: #e8954a;
    box-shadow: 0 0 calc(var(--vs) * 6) rgba(255, 150, 50, 0.8);
    animation: lp-onair-ping 1.6s ease-in-out infinite;
}
.levensloop-player.is-marantz .lp-live-toggle-off { display: none; }
.levensloop-player.is-marantz.is-live-mode .lp-live-toggle-on { display: none; }
.levensloop-player.is-marantz.is-live-mode .lp-live-toggle-off { display: inline; }

/* ---- Live-modus: speler naar links + klein, albums uit beeld,
       header klapt in tot een lage strook ---- */
.levensloop-player.is-marantz .lp-marantz-tt {
    transition: transform 0.7s cubic-bezier(0.5, 0.05, 0.3, 1);
}
.levensloop-player.is-marantz .lp-marantz-table {
    transition: height 0.7s cubic-bezier(0.5, 0.05, 0.3, 1);
}
.levensloop-player.is-marantz .lp-marantz-scene {
    transition: padding 0.7s cubic-bezier(0.5, 0.05, 0.3, 1);
}
.levensloop-player.is-marantz .lp-vinyl-stack.lp-marantz-albums {
    transition:
        transform 0.7s cubic-bezier(0.5, 0.05, 0.3, 1),
        opacity 0.55s ease;
}
.levensloop-player.is-marantz .lp-track-progress {
    transition:
        top 0.7s cubic-bezier(0.5, 0.05, 0.3, 1),
        left 0.7s cubic-bezier(0.5, 0.05, 0.3, 1),
        transform 0.6s ease,
        opacity 0.45s ease;
}
.levensloop-player.is-marantz.is-live-mode .lp-marantz-tt {
    transform: translate(-118%, -50%);
}
.levensloop-player.is-marantz.is-live-mode .lp-vinyl-stack.lp-marantz-albums {
    --lp-stack-out: 90vw;
    pointer-events: none;
}
.levensloop-player.is-marantz.is-live-mode .lp-marantz-albums .lp-vinyl-stack-card {
    transition-delay: calc((3 - var(--depth, 0)) * 0.07s);
}
.levensloop-player.is-marantz.is-live-mode .lp-marantz-table {
    height: calc(var(--vs) * 88);
}
.levensloop-player.is-marantz.is-live-mode .lp-marantz-scene {
    padding: calc(var(--vs) * 6) 0 calc(var(--vs) * 8);
}
/* Achtergrond fade't naar zwart in de top bar */
.levensloop-player.is-marantz .lp-marantz-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #070605 0%, #030302 100%);
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
    z-index: 3;
}
.levensloop-player.is-marantz.is-live-mode .lp-marantz-scene::after { opacity: 1; }
/* NOW SPINNING en de knop verticaal gecentreerd in de balk */
.levensloop-player.is-marantz.is-live-mode .lp-onair { top: calc(50% - var(--vs) * 11); }
.levensloop-player.is-marantz.is-live-mode .lp-live-toggle { top: calc(50% - var(--vs) * 17); }
.levensloop-player.is-marantz .lp-live-toggle { transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, top 0.7s ease; }
.levensloop-player.is-marantz .lp-live-toggle:focus { outline: none; }
.levensloop-player.is-marantz .lp-live-toggle:focus-visible {
    outline: 2px solid rgba(255, 190, 106, 0.8);
    outline-offset: 2px;
}
/* Display in het midden van de strook, tussen DRAAIT NU (links) en de
   knop (rechts); playbar gecentreerd eronder */
@keyframes lp-live-display-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% - var(--vs) * 10)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
.levensloop-player.is-marantz.is-live-mode .lp-marantz-display {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(calc(var(--vs) * 440), 50vw);
    max-width: none;
    padding: calc(var(--vs) * 5) calc(var(--vs) * 12);
    /* geen LCD-kader in de balk: een nét iets lichter grijs vlak op het
       zwart, zonder randen */
    background: #161618;
    box-shadow: none;
    border-radius: calc(var(--vs) * 10);
    animation: lp-live-display-in 0.55s ease 0.25s both;
    z-index: 6;
}
.levensloop-player.is-marantz.is-live-mode .lp-marantz-disp-btn {
    border-color: transparent;
    background: rgba(255, 150, 50, 0.08);
}
/* Compact: eyebrow en jaartal/teller verbergen, titel kleiner */
.levensloop-player.is-marantz.is-live-mode .lp-marantz-display-eyebrow,
.levensloop-player.is-marantz.is-live-mode .lp-marantz-display-meta { display: none; }
.levensloop-player.is-marantz.is-live-mode .lp-marantz-display .lp-vinyl-track-title {
    display: none; /* titel staat al in NOW SPINNING */
}
.levensloop-player.is-marantz.is-live-mode .lp-marantz-disp-btn {
    width: calc(var(--vs) * 19);
    height: calc(var(--vs) * 24);
}
/* Play/pauze in het display: alleen zichtbaar in de top bar */
.levensloop-player.is-marantz .lp-marantz-disp-play { display: none; }
.levensloop-player.is-marantz.is-live-mode .lp-marantz-disp-play { display: flex; }
.levensloop-player.is-marantz .lp-marantz-disp-play .lp-disp-ic-pause { display: none; }
.levensloop-player.is-marantz:has(.lp-play-btn.playing) .lp-marantz-disp-play .lp-disp-ic-play { display: none; }
.levensloop-player.is-marantz:has(.lp-play-btn.playing) .lp-marantz-disp-play .lp-disp-ic-pause { display: block; }
/* Playbar slide't mee uit beeld */
.levensloop-player.is-marantz.is-live-mode .lp-track-progress {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(var(--vs) * 30));
    pointer-events: none;
}
/* ON AIR-balk iets lager centreren in de strook */
.levensloop-player.is-marantz .lp-onair { transition: opacity 0.45s ease, transform 0.45s ease, top 0.7s ease; }

@media (prefers-reduced-motion: reduce) {
    .levensloop-player.is-marantz .lp-marantz-tt,
    .levensloop-player.is-marantz .lp-marantz-table,
    .levensloop-player.is-marantz .lp-marantz-scene,
    .levensloop-player.is-marantz .lp-vinyl-stack.lp-marantz-albums,
    .levensloop-player.is-marantz .lp-track-progress {
        transition-duration: 0.2s;
    }
    .levensloop-player.is-marantz .lp-onair-icon::after,
    .levensloop-player.is-marantz .lp-live-dot { animation: none; }
}

/* ---- Mini-plaat in de minified top bar: draait mee met de muziek,
       met het actuele hoesje als label ---- */
.levensloop-player.is-marantz .lp-marantz-disp-disc {
    display: none;
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--vs) * 30);
    height: calc(var(--vs) * 30);
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px),
        radial-gradient(circle, #1c1c1f 0%, #0a0a0c 72%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 180, 90, 0.2),
        0 0 calc(var(--vs) * 6) rgba(0, 0, 0, 0.6);
}
.levensloop-player.is-marantz .lp-marantz-disp-disc i {
    position: absolute;
    inset: 27%;
    border-radius: 50%;
    background-image: var(--lp-cover, none);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
@keyframes lp-disp-disc-spin { to { transform: rotate(360deg); } }
.levensloop-player.is-marantz.is-live-mode .lp-marantz-disp-disc {
    display: block;
    animation: lp-disp-disc-spin 2.4s linear infinite;
    animation-play-state: paused;
}
.levensloop-player.is-marantz.is-live-mode:has(.lp-play-btn.playing) .lp-marantz-disp-disc {
    animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
    .levensloop-player.is-marantz .lp-marantz-disp-disc { animation: none !important; }
}

/* ---- Lightbox zoom-overgang ----
   Het beeld zelf FLIP-zoomt van/naar de aangeklikte hoes (inline
   transform via player.js); tijdens het sluiten fade't de rest van de
   lightbox alvast weg zodat alleen het krimpende beeld overblijft. */
.lp-lightbox .lp-lightbox-img {
    transform-origin: center center;
    will-change: transform;
}
.lp-lightbox.is-closing .lp-lightbox-backdrop,
.lp-lightbox.is-closing .lp-lightbox-close,
.lp-lightbox.is-closing .lp-lightbox-prev,
.lp-lightbox.is-closing .lp-lightbox-next,
.lp-lightbox.is-closing .lp-lightbox-caption,
.lp-lightbox.is-closing .lp-lightbox-thumbs {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* ============================================================================
   AUDIO CARD PLAYER (mode "cards")
   Een rij album-art kaarten die soepel zijwaarts sliden, met een lichte
   parallax op de hoes — geïnspireerd op de Osmo "smooothy"-slider. De stijl
   sluit aan op de "EXPLORE STATIONS"-kaarten: donker paneel, zware uppercase
   titel (themalettertype via font-family: inherit), dunne play-knop, ronde
   grijswaarde-hoes en een oranje audio-wave-icoon.
   ============================================================================ */
.levensloop-player.is-cards {
    /* Themalettertype overnemen: de kaarten gebruiken de fonts van het thema. */
    font-family: inherit;

    /* Zelfde warm-goud accent als de andere skins (radio/tape/vinyl). */
    --lp-card-accent: #d4a14b;
    --lp-card-ink: #f5f7fc;
    --lp-card-dim: rgba(245, 247, 252, 0.62);
    --lp-accent: #d4a14b;
    --lp-accent-strong: #b87d2a;

    /* Gedeelde kaartmaten — exact als de Osmo-demo: zichtbare kaartbreedte 45vw
       (.parallax-slider__item-inner) met 1em goot ertussen (.parallax-slider__item).
       De track-nav gebruikt --lp-card-w zodat hij precies zo breed is als de kaart. */
    --lp-card-w: clamp(260px, 36vw, 460px);
    --lp-card-gut: 1em;

    color: var(--lp-card-ink);
    /* Volledige schermbreedte: breek uit de (max-width-)container van het thema
       naar de hele viewport, zodat de slider edge-to-edge loopt als de Osmo-demo. */
    width: 100vw;
    max-width: 100vw;
    /* Veel thema's/page-builders (o.a. Etch) injecteren een verticale marge op
       blok-elementen voor "flow"-ritme; op een edge-to-edge speler geeft dat een
       donkere band boven (en onder). Expliciet op 0 zetten zodat de speler strak
       aansluit. Wil je de speler tóch verder omhoog trekken over sectie-padding,
       gebruik dan het shortcode-attribuut flush_top. */
    margin-top: 0;
    margin-bottom: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 46px 0 40px;
    overflow: hidden;
    border-radius: 0;
    background:
        radial-gradient(1100px 720px at 10% -12%, rgba(46, 78, 132, 0.28), transparent 60%),
        radial-gradient(900px 700px at 116% 120%, rgba(212, 161, 75, 0.16), transparent 55%),
        linear-gradient(180deg, #0b1019 0%, #070a11 100%);
}

/* Kop en track-nav krijgen wél wat zij-marge zodat ze niet tegen de schermrand
   plakken; de slider zelf loopt bewust full-bleed. */
.levensloop-player.is-cards .lp-intro {
    margin-bottom: 30px;
    padding-inline: clamp(16px, 4vw, 60px);
}

.lp-cards-wrap { position: relative; }

.lp-cards-viewport {
    position: relative;
    /* Smooothy verschuift de slides zelf; de viewport is enkel het kijkvenster. */
    overflow: hidden;
    padding: 16px 0;
    cursor: grab;
    /* Horizontaal slepen pakken wij; verticaal scrollt de pagina gewoon door. */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.levensloop-player.is-cards .lp-cards-viewport:active { cursor: grabbing; }

/* Het Smooothy [data-slider]-element: een platte flex-rij van slides.
   Smooothy zet per slide een transform; wij raken de lane-transform niet aan.
   De zij-padding centreert de actieve (gecentreerde/spelende) kaart precies in
   beeld: Smooothy laat 'm normaal links uitlijnen; deze padding verschuift de
   hele rij zodat de actieve kaart in het midden van het scherm staat. */
.lp-cards-lane {
    display: flex;
    align-items: stretch;
    padding-inline: max(0px, calc((100% - var(--lp-card-w) - 2 * var(--lp-card-gut)) / 2));
}

/* ---- De slide = Smooothy-item. Volle breedte incl. tussenruimte (padding);
   de zichtbare kaart zit in .lp-card-inner zodat Smooothy's breedte-meting
   (getBoundingClientRect) de goot meerekent en de slides netjes uitlijnen. ---- */
.lp-card {
    flex: 0 0 auto;                 /* breedte = inhoud (inner + goot), als Osmo .item */
    padding-inline: var(--lp-card-gut);
    outline: none;
}
.lp-card-inner {
    position: relative;
    width: var(--lp-card-w);
    aspect-ratio: 1 / 1;            /* vierkant — past bij de vierkante thumbnails */
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    background: #0d121d;
    /* Kaarten naast het midden dimmen (player.js zet --lp-prox: 1 = gecentreerd).
       Zo springt de middelste kaart er meer uit en oogt de drukke thumbnail-rij
       rustiger. */
    opacity: calc(0.3 + 0.7 * var(--lp-prox, 1));
    /* Fijne grijze outline om elke kaart — een dunne buitenring (net als de gele
       bij de spelende kaart), niet inset, anders dekt de hoes-afbeelding hem af. */
    box-shadow:
        0 30px 64px -34px rgba(0, 0, 0, 0.85),
        0 0 0 1px #6b7488;
    transition: box-shadow 0.5s ease;
}
.lp-card:focus-visible .lp-card-inner { box-shadow: 0 0 0 2px var(--lp-card-accent), 0 30px 64px -34px rgba(0,0,0,.85); }
.lp-card.is-current .lp-card-inner {
    box-shadow:
        0 36px 70px -30px rgba(0, 0, 0, 0.9),
        0 0 0 2px var(--lp-card-accent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ---- Het beeld zelf: breder dan het kader → horizontale parallax ---- */
.lp-card-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
/* Parallax-doel: precies zo breed als het kader (100%), exact als de Osmo-demo
   (.parallax-slider__item-visual). Hierop zet de slider translateX(parallax%). */
.lp-card-art-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}
/* De afbeelding: dekt het vierkante kader en is licht uitgezoomd (scale 1.28),
   zodat de parallax-verschuiving binnen het beeld blijft. Uniforme zoom i.p.v.
   een brede uitsnede → de vierkante thumbnail wordt niet boven/onder afgekapt. */
.lp-card-art-visual {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.28);
    transition: filter 0.6s ease;
    filter: saturate(1.03) contrast(1.02);
}

/* Donkere verloop-sluier onder/boven voor leesbaarheid van tekst + knop. */
.lp-card-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(5, 8, 14, 0.82) 0%, rgba(5, 8, 14, 0.12) 42%, rgba(5, 8, 14, 0) 62%),
        linear-gradient(to bottom, rgba(5, 8, 14, 0.55) 0%, rgba(5, 8, 14, 0) 34%);
}

/* ---- Kop: jaar + titel (over het beeld) ---- */
.lp-card-head {
    position: absolute;
    top: clamp(18px, 2.4vw, 26px);
    left: clamp(18px, 2.4vw, 26px);
    right: clamp(18px, 2.4vw, 26px);
    z-index: 2;
}
/* Jaartal als pil met goud-gele achtergrond. */
.lp-card-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: #1c1305;
    background: var(--lp-card-accent);
    padding: 3px 11px;
    border-radius: 999px;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.lp-card-title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Onderkant: play-knop + audio-wave-icoon ---- */
.lp-card-bottom {
    position: absolute;
    left: clamp(18px, 2.4vw, 26px);
    right: clamp(18px, 2.4vw, 26px);
    bottom: clamp(18px, 2.4vw, 24px);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2;
}
.lp-card-play {
    flex: 0 0 auto;
    width: clamp(50px, 6.2vw, 58px);
    height: clamp(50px, 6.2vw, 58px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.6px solid rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: #fff;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-card-play svg { margin-left: 2px; } /* optische centrering play-driehoek */
.lp-card-ic-pause svg { margin-left: 0; }
.lp-card-play:hover,
.lp-card-play:focus-visible {
    border-color: var(--lp-card-accent);
    background: rgba(212, 161, 75, 0.28);
    transform: scale(1.07);
    box-shadow: 0 0 0 6px rgba(212, 161, 75, 0.1);
    outline: none;
}
.lp-card.is-current .lp-card-play {
    border-color: var(--lp-card-accent);
    background: rgba(212, 161, 75, 0.3);
}
.lp-card-ic-play, .lp-card-ic-pause { display: grid; place-items: center; line-height: 0; }
.lp-card-ic-pause { display: none; }
.lp-card.is-playing .lp-card-ic-play { display: none; }
.lp-card.is-playing .lp-card-ic-pause { display: grid; }

.lp-card-waves {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}
.lp-card-waves i {
    width: 3px;
    border-radius: 2px;
    background: var(--lp-card-accent);
    opacity: 0.55;
    transform-origin: bottom;
    transition: opacity 0.4s ease;
}
.lp-card-waves i:nth-child(1) { height: 38%; }
.lp-card-waves i:nth-child(2) { height: 66%; }
.lp-card-waves i:nth-child(3) { height: 100%; }
.lp-card-waves i:nth-child(4) { height: 52%; }
.lp-card-waves i:nth-child(5) { height: 82%; }
.lp-card-waves i:nth-child(6) { height: 44%; }
.lp-card-waves i:nth-child(7) { height: 62%; }
.lp-card.is-playing .lp-card-waves i {
    opacity: 1;
    animation: lpCardWave 0.9s ease-in-out infinite;
}
.lp-card.is-playing .lp-card-waves i:nth-child(1) { animation-delay: -0.20s; }
.lp-card.is-playing .lp-card-waves i:nth-child(2) { animation-delay: -0.55s; }
.lp-card.is-playing .lp-card-waves i:nth-child(3) { animation-delay: -0.05s; }
.lp-card.is-playing .lp-card-waves i:nth-child(4) { animation-delay: -0.40s; }
.lp-card.is-playing .lp-card-waves i:nth-child(5) { animation-delay: -0.70s; }
.lp-card.is-playing .lp-card-waves i:nth-child(6) { animation-delay: -0.30s; }
.lp-card.is-playing .lp-card-waves i:nth-child(7) { animation-delay: -0.60s; }

@keyframes lpCardWave {
    0%, 100% { transform: scaleY(0.32); }
    50%      { transform: scaleY(1); }
}

/* ---- Onderbalk: pijlen + stippen ---- */
.lp-cards-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}
.lp-cards-arrow {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: var(--lp-card-ink);
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.lp-cards-arrow:hover:not(:disabled) {
    border-color: var(--lp-card-accent);
    background: rgba(212, 161, 75, 0.16);
    transform: scale(1.06);
}
.lp-cards-arrow:disabled { opacity: 0.32; cursor: default; }
.lp-cards-dots { display: flex; align-items: center; gap: 8px; }
.lp-cards-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.26);
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
}
.lp-cards-dot:hover { background: rgba(255, 255, 255, 0.5); }
.lp-cards-dot.is-active {
    width: 22px;
    border-radius: 5px;
    background: var(--lp-card-accent);
}

@media (max-width: 600px) {
    .levensloop-player.is-cards { padding: 34px 14px 28px; }
    .lp-cards-controls { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-card,
    .lp-card-play,
    .lp-card-art-img,
    .lp-cards-arrow,
    .lp-cards-dot { transition: none; }
    .lp-card.is-playing .lp-card-waves i { animation: none; }
}

/* ---- Track-navigatie onder de spelende kaart ---- */
.lp-cards-nav {
    /* Breedte + horizontale positie worden door player.js gezet zodat de nav
       exact onder de spelende kaart staat en even breed is (positionNav). */
    width: var(--lp-card-w);
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Verticale ruimte (10px) zodat hover-vergroting + gloed van de knoppen niet
       boven/onder afgekapt worden door overflow:hidden. */
    padding: 10px 4px;
    /* Verborgen tot er audio speelt: dichtgevouwen en weggeschoven onder de kaart. */
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(-10px);
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), margin-top 0.45s ease;
}
/* Track-nav schuift onder de kaart vandaan tijdens het spelen en weer terug
   eronder bij pauze. */
.levensloop-player.is-cards.is-playing .lp-cards-nav {
    max-height: 100px;
    margin-top: 12px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.lp-cards-nav-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: var(--lp-card-ink);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.lp-cards-nav-btn:hover {
    border-color: var(--lp-card-accent);
    background: rgba(212, 161, 75, 0.18);
    transform: scale(1.08);
}
.lp-cards-nav-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}
.lp-cards-nav .lp-time-current,
.lp-cards-nav .lp-time-total {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    color: var(--lp-card-dim);
    min-width: 30px;
}
.lp-cards-nav .lp-time-total { text-align: right; }
.lp-cards-nav .lp-scrub-bar {
    flex: 1 1 auto;
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
}
.lp-cards-nav .lp-scrub-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 3px;
    background: var(--lp-card-accent);
}
.lp-cards-nav .lp-scrub-handle {
    position: absolute;
    top: 50%;
    left: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease;
}
.lp-cards-nav .lp-scrub-bar:hover .lp-scrub-handle { transform: translate(-50%, -50%) scale(1.2); }

@media (prefers-reduced-motion: reduce) {
    .lp-cards-nav { transition: opacity 0.3s ease; }
}

/* ---- Jaren-tijdlijn boven de slider ---- */
.lp-cards-timeline {
    position: relative;
    height: 46px;
    margin: 0 0 6px;
    overflow: hidden;            /* markers buiten beeld worden afgekapt */
}
.lp-cards-timeline-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;                /* op de hoogte waar de streepjes beginnen */
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.16) 6%,
        rgba(255, 255, 255, 0.16) 94%,
        transparent);
}
.lp-cards-tl-mark {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 46px;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: var(--lp-card-dim);
    cursor: pointer;
    white-space: nowrap;
    will-change: transform, opacity;
    transition: opacity 0.3s ease, color 0.3s ease;
}
.lp-cards-tl-year {
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: transform 0.3s ease, color 0.3s ease;
}
.lp-cards-tl-tick {
    width: 2px;
    height: 16px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.3);
    transition: height 0.3s ease, background 0.3s ease;
}
/* De gecentreerde (gebladerde) kaart krijgt een goud gemarkeerd jaartal. */
.lp-cards-tl-mark.is-active { color: var(--lp-card-accent); }
.lp-cards-tl-mark.is-active .lp-cards-tl-year {
    color: var(--lp-card-accent);
    font-weight: 800;
    transform: scale(1.12);
}
.lp-cards-tl-mark.is-active .lp-cards-tl-tick {
    background: var(--lp-card-accent);
    height: 22px;
}
.lp-cards-tl-mark.is-current .lp-cards-tl-tick { background: var(--lp-card-accent); }
.lp-cards-tl-mark:hover .lp-cards-tl-year { color: var(--lp-card-ink); }

@media (prefers-reduced-motion: reduce) {
    .lp-cards-tl-mark,
    .lp-cards-tl-year,
    .lp-cards-tl-tick { transition: none; }
}

/* ---- Topbalk: now-playing-melding + minify-knop ---- */
.lp-cards-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* Extra ruimte onder de now-playing-balk zodat de slider niet te dicht
       tegen de info aan staat. */
    padding: 0 clamp(16px, 4vw, 60px) 40px;
    min-height: 30px;
}
/* NOW PLAYING-melding (links), zichtbaar zodra er een nummer geladen is. */
.lp-cards-nowplaying {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.levensloop-player.is-cards.has-current .lp-cards-nowplaying { opacity: 1; }
.lp-cards-np-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lp-card-accent);
    box-shadow: 0 0 0 0 rgba(212, 161, 75, 0.5);
}
.levensloop-player.is-cards.is-playing .lp-cards-np-dot { animation: lpNpPulse 1.6s ease-out infinite; }
@keyframes lpNpPulse {
    0%   { box-shadow: 0 0 0 0 rgba(212, 161, 75, 0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(212, 161, 75, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 161, 75, 0); }
}
.lp-cards-np-label {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-card-dim);
}
.lp-cards-np-title {
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lp-card-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.2s ease;
}
.lp-cards-np-title:hover,
.lp-cards-np-title:focus-visible {
    color: var(--lp-card-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}
.lp-cards-np-waves {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 13px;
}
.lp-cards-np-waves i {
    width: 2px;
    height: 40%;
    border-radius: 1px;
    background: var(--lp-card-accent);
    opacity: 0.5;
    transform-origin: bottom;
}
.lp-cards-np-waves i:nth-child(1) { height: 45%; }
.lp-cards-np-waves i:nth-child(2) { height: 80%; }
.lp-cards-np-waves i:nth-child(3) { height: 100%; }
.lp-cards-np-waves i:nth-child(4) { height: 60%; }
.lp-cards-np-waves i:nth-child(5) { height: 75%; }
.levensloop-player.is-cards.is-playing .lp-cards-np-waves i {
    opacity: 1;
    animation: lpCardWave 0.9s ease-in-out infinite;
}
.levensloop-player.is-cards.is-playing .lp-cards-np-waves i:nth-child(1) { animation-delay: -0.15s; }
.levensloop-player.is-cards.is-playing .lp-cards-np-waves i:nth-child(2) { animation-delay: -0.50s; }
.levensloop-player.is-cards.is-playing .lp-cards-np-waves i:nth-child(3) { animation-delay: -0.05s; }
.levensloop-player.is-cards.is-playing .lp-cards-np-waves i:nth-child(4) { animation-delay: -0.40s; }
.levensloop-player.is-cards.is-playing .lp-cards-np-waves i:nth-child(5) { animation-delay: -0.25s; }

/* Minify / full-player-knop (rechts). */
.lp-cards-minify {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: var(--lp-card-ink);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.lp-cards-minify:hover {
    border-color: var(--lp-card-accent);
    background: rgba(212, 161, 75, 0.16);
}
.lp-cards-minify-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-card-accent);
}
.lp-cards-minify-off { display: none; }
.levensloop-player.is-cards.is-min .lp-cards-minify-on { display: none; }
.levensloop-player.is-cards.is-min .lp-cards-minify-off { display: inline; }

/* ---- Ingeklapte (minify) toestand: alleen de now-playing-balk blijft ---- */
.lp-cards-timeline,
.lp-cards-viewport {
    transition: max-height 0.5s ease, opacity 0.45s ease;
}
.lp-cards-timeline { max-height: 80px; }
.lp-cards-viewport { max-height: 1400px; }
.levensloop-player.is-cards.is-min .lp-cards-timeline {
    max-height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}
.levensloop-player.is-cards.is-min .lp-cards-viewport {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}
/* Ingeklapt: alles op één lage rij — now-playing links, transport in het midden,
   FULL PLAYER rechts, netjes op dezelfde lijn uitgelijnd. */
.levensloop-player.is-cards.is-min {
    padding-top: 14px;
    padding-bottom: 14px;
}
.levensloop-player.is-cards.is-min .lp-intro { display: none; }
.levensloop-player.is-cards.is-min .lp-cards-wrap { position: relative; }
.levensloop-player.is-cards.is-min .lp-cards-topbar {
    padding-bottom: 0;
    min-height: 42px;
    align-items: center;
}
/* De track-nav wordt over de topbalk-rij gecentreerd (geen kaart om onder te
   staan); de inline-positie van positionNav is gewist door de JS. */
.levensloop-player.is-cards.is-min .lp-cards-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: clamp(280px, 38vw, 480px);
    max-height: none;
    margin: 0 !important;
    padding: 0;
    transform: translateX(-50%);
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    align-items: center;
}

@media (max-width: 600px) {
    .lp-cards-topbar { padding-inline: 14px; flex-wrap: wrap; gap: 8px; }
    .lp-cards-np-label { display: none; }
    /* Mobiel: now-playing-titel en MINIFY PLAYER op één regel (titel krimpt en
       kapt af met …), de jaar-scrubber komt eronder (via de 760px-regel). */
    .lp-cards-nowplaying { flex: 1 1 0; min-width: 0; }
    .lp-cards-minify { flex: 0 0 auto; }

    /* Mobiel: track-navigatie in twee regels — knoppen boven, scrub-balk (tijd +
       balk) eronder op een eigen regel. Ruime tussenruimte zodat je de scrub-balk
       makkelijk kunt vastpakken zonder per ongeluk een knop te raken. */
    .lp-cards-nav { flex-wrap: wrap; justify-content: center; gap: 8px; row-gap: 22px; }
    .lp-cards-nav-track { order: 10; flex-basis: 100%; padding-top: 2px; }
    /* Hoger sleepvlak voor de scrub-balk op touch (makkelijker scrubben). */
    .lp-cards-nav .lp-scrub-bar { height: 9px; border-radius: 5px; }
    .lp-cards-nav .lp-scrub-handle { width: 16px; height: 16px; }
    .levensloop-player.is-cards.is-playing .lp-cards-nav { max-height: 170px; }

    /* Ingeklapt op mobiel: de transport-balk NIET over de topbalk centreren
       (dat botste met de FULL PLAYER-knop), maar als eigen tweede regel
       ERONDER plaatsen. Regel 1 = now-playing-titel + FULL PLAYER,
       regel 2 = de speler (plaat + vorige/play/scrub/volgende). */
    .levensloop-player.is-cards.is-min .lp-cards-topbar { flex-wrap: nowrap; }
    .levensloop-player.is-cards.is-min .lp-cards-nav {
        position: static;
        inset: auto;
        transform: none;
        width: 100% !important;
        margin: 12px 0 0 !important;
        max-height: none;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 8px;
    }
    /* Tijd/scrub in de ingeklapte balk compact op dezelfde regel houden
       (niet naar een derde regel duwen zoals in de volle weergave). */
    .levensloop-player.is-cards.is-min .lp-cards-nav-track {
        order: 0;
        flex: 1 1 auto;
        flex-basis: auto;
        min-width: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .lp-cards-np-dot,
    .lp-cards-np-waves i { animation: none !important; }
    .lp-cards-timeline,
    .lp-cards-viewport { transition: opacity 0.3s ease; }
}

/* ---- Mini-draaiende plaat + play/pauze in de balk (alleen in minify-mode,
        zoals de Marantz top bar) ---- */
/* De draaiende mini-plaat staat altijd in de balk (zowel volle als minify);
   de play/pauze-knop alleen in de ingeklapte balk (in volle weergave zit die
   op de kaart). */
.lp-cards-disc { display: block; }
.lp-cards-nav-play { display: none; }
.levensloop-player.is-cards.is-min .lp-cards-nav-play { display: grid; }
/* In minify houden we het Marantz-achtig strak: cover/share weg, focus op
   plaat + transport. */
.levensloop-player.is-cards.is-min .lp-cards-nav-cover,
.levensloop-player.is-cards.is-min .lp-cards-nav-share { display: none; }
.levensloop-player.is-cards.is-min .lp-cards-nav { width: clamp(300px, 42vw, 520px); }

.lp-cards-disc {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px),
        radial-gradient(circle, #1c1c1f 0%, #0a0a0c 72%);
    box-shadow:
        inset 0 0 0 1px rgba(212, 161, 75, 0.28),
        0 0 6px rgba(0, 0, 0, 0.6);
    animation: lp-disp-disc-spin 2.6s linear infinite;
    animation-play-state: paused;
}
.lp-cards-disc i {
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background-image: var(--lp-cover, none);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.levensloop-player.is-cards.is-playing .lp-cards-disc { animation-play-state: running; }

/* Play/pauze-icoon wisselt mee met de afspeelstatus. */
.lp-cards-nav-play .lp-cards-ic-play,
.lp-cards-nav-play .lp-cards-ic-pause { line-height: 0; }
.lp-cards-nav-play .lp-cards-ic-pause { display: none; }
.levensloop-player.is-cards.is-playing .lp-cards-nav-play .lp-cards-ic-play { display: none; }
.levensloop-player.is-cards.is-playing .lp-cards-nav-play .lp-cards-ic-pause { display: block; }

@media (prefers-reduced-motion: reduce) {
    .lp-cards-disc { animation: none !important; }
}

/* ---- Jaartal-scrubber in de topbalk (sleep om de slider te scrubben) ---- */
.lp-cards-scrub {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 620px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.levensloop-player.is-cards.is-min .lp-cards-scrub { display: none; }
.lp-cards-scrub-edge {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--lp-card-dim);
}
.lp-cards-scrub-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}
.lp-cards-scrub-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.14);
    border-radius: 2px;
}
.lp-cards-scrub-ticks { position: absolute; inset: 0; pointer-events: none; }
.lp-cards-scrub-tick {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 9px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
}
/* Begin van een decennium: langer goud streepje + jaartal erboven. */
.lp-cards-scrub-tick.is-decade {
    height: 17px;
    background: var(--lp-card-accent);
    opacity: 0.85;
}
.lp-cards-scrub-decade {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.58rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--lp-card-dim);
    white-space: nowrap;
    pointer-events: none;
}
.lp-cards-scrub-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    width: 0;
    transform: translateY(-50%);
    background: var(--lp-card-accent);
    border-radius: 2px;
    pointer-events: none;
}
.lp-cards-scrub-handle {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--lp-card-accent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition: transform 0.15s ease;
}
.lp-cards-scrub:hover .lp-cards-scrub-handle,
.lp-cards-scrub.is-scrubbing .lp-cards-scrub-handle { transform: translate(-50%, -50%) scale(1.18); }
.lp-cards-scrub-handle-year {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--lp-card-accent);
    white-space: nowrap;
    pointer-events: none;
}
.lp-cards-scrub:focus-visible { outline: none; }
/* Leeftijd onder de handle, bv. "Jelle 18 jaar" — altijd zichtbaar als legenda. */
.lp-cards-scrub-handle-age {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--lp-card-ink);
    white-space: nowrap;
    pointer-events: none;
}

@media (max-width: 760px) {
    /* Scrubber op een eigen regel, met ruim genoeg afstand boven (anders zitten
       de jaartal-labels + het sleepvlak te dicht op de titel/minify-rij en kun
       je niet scrubben) en wat ruimte onder voor het leeftijd-label. Hoger
       sleepvlak voor makkelijker aanraken op touch. */
    .lp-cards-scrub {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        margin-top: 26px;
        margin-bottom: 16px;
    }
    .lp-cards-scrub-track { height: 36px; }
}

/* ---- Info onder de slider: titel + beschrijving van de gecentreerde kaart ---- */
.lp-cards-info {
    max-width: 720px;
    margin: 32px auto 0;
    padding: 0 clamp(16px, 4vw, 60px);
    text-align: center;
}
.levensloop-player.is-cards.is-min .lp-cards-info { display: none; }
.lp-cards-info-year {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lp-card-accent);
    margin-bottom: 8px;
}
.lp-cards-info-title {
    margin: 0 0 10px;
    font-family: inherit;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--lp-card-ink);
}
.lp-cards-info-desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--lp-card-dim);
}

/* ---- Track-nav boven de kaart tillen (hover-vergroting + plaat niet achter
        de audiocard) + lyrics-knop ---- */
.lp-cards-nav { position: relative; z-index: 6; }
.lp-cards-nav-btn,
.lp-cards-disc { position: relative; }
.lp-cards-nav-btn:hover { z-index: 3; }

/* Lyrics-knop in dezelfde stijl als de andere nav-knoppen (de .lp-lyrics-toggle
   basis-stijl wordt hiermee overschreven; het [hidden]-gedrag blijft werken). */
.lp-cards-nav-btn.lp-cards-nav-lyrics {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: var(--lp-card-ink);
}
.lp-cards-nav-btn.lp-cards-nav-lyrics:hover {
    border-color: var(--lp-card-accent);
    background: rgba(212, 161, 75, 0.18);
    color: var(--lp-card-ink);
}
.lp-cards-nav-btn.lp-cards-nav-lyrics.is-active {
    border-color: var(--lp-card-accent);
    background: var(--lp-card-accent);
    color: #1c1305;
}
/* In de ingeklapte balk: lyrics-knop weg (net als cover/share). */
.levensloop-player.is-cards.is-min .lp-cards-nav-lyrics { display: none; }

/* ---- Lyrics-paneel afgestemd op de card-player (blauw-zwart + goud i.p.v.
        het warme bruin van de radio-skins) ---- */
.levensloop-player.is-cards .lp-lyrics-backdrop {
    background: linear-gradient(to bottom, transparent 0%, transparent 30%, rgba(5, 8, 14, 0.45) 100%);
}
.levensloop-player.is-cards .lp-lyrics-panel {
    /* Egaal blauw-zwart verloop — geen goud-radial in de rechterhoek (die gaf
       een vreemde bruine gloed). */
    background:
        radial-gradient(900px 480px at 50% -8%, rgba(46, 78, 132, 0.26), transparent 62%),
        linear-gradient(180deg, #0b1019 0%, #070a11 100%);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--lp-card-ink);
}
.levensloop-player.is-cards .lp-lyrics-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
.levensloop-player.is-cards .lp-lyrics-handle { background: rgba(255, 255, 255, 0.28); }
.levensloop-player.is-cards .lp-lyrics-header:hover .lp-lyrics-handle { background: rgba(212, 161, 75, 0.7); }
.levensloop-player.is-cards .lp-lyrics-title { color: var(--lp-card-accent); }
/* Sluitknop netjes verticaal gecentreerd op de LYRICS-regel, strakker en in
   de card-stijl. */
.levensloop-player.is-cards .lp-lyrics-close {
    top: 20px;
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(245, 247, 252, 0.8);
}
.levensloop-player.is-cards .lp-lyrics-close:hover {
    background: rgba(212, 161, 75, 0.16);
    border-color: var(--lp-card-accent);
    color: var(--lp-card-accent);
    transform: rotate(90deg);
}
/* Fade-randen boven/onder matchen op het blauw-zwart i.p.v. bruin. */
.levensloop-player.is-cards .lp-lyrics-panel::before {
    background: linear-gradient(to bottom, #0b1019 0%, rgba(11, 16, 25, 0) 100%);
}
.levensloop-player.is-cards .lp-lyrics-panel::after {
    background: linear-gradient(to top, #070a11 0%, rgba(7, 10, 17, 0) 100%);
}
.levensloop-player.is-cards .lp-lyrics-line { color: var(--lp-card-ink); }
.levensloop-player.is-cards .lp-lyrics-line.is-active { color: var(--lp-card-accent); }

/* ============================================================================
   FOTO-SLIDER (audio-card player) — verschijnt in de "vrije ruimte" onder de
   ingeklapte speler (MINIFY PLAYER). GSAP verzorgt de 3D-overgangen per slide;
   bij FULL PLAYER schuift de speler er weer overheen (de slider klapt dicht).
   ============================================================================ */
.lp-cards-slider {
    position: relative;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    padding: 0;
    outline: none;
    transition: opacity 0.5s ease;
}
/* Ingeklapt (minify): de slider wordt FULLSCREEN. De sectie vult de viewport,
   de smalle now-playing-/transport-balk zweeft als overlay bovenaan over de
   slide (met een donkere gradient voor leesbaarheid). FULL PLAYER klapt 'm
   weer dicht en de speler komt eroverheen. */
.levensloop-player.is-cards.is-min {
    position: relative;
    min-height: 100svh;
    padding: 0;
}
.levensloop-player.is-cards.is-min .lp-cards-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding-top: 14px;
    padding-bottom: 14px;
    /* Massieve speler-achtergrond (zoals de full player), niet de slide
       erdoorheen. Subtiele blauwe gloed linksboven, gelijk aan de sectie. */
    background:
        radial-gradient(820px 420px at 8% -80%, rgba(46, 78, 132, 0.28), transparent 60%),
        #0b1019;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.levensloop-player.is-cards.is-min .lp-cards-slider {
    max-height: 100svh;
    opacity: 1;
    pointer-events: auto;
}

.lp-cards-slider-stage {
    position: relative;
    height: 100svh;
    overflow: hidden;
    background: #0a0e16;
    /* Perspectief op de DIRECTE ouder van de slides, zodat de 3D-rotatie klopt. */
    perspective: 1300px;
}

.lp-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}
.lp-slide__img {
    display: block;
    width: 100%;
    height: 100%;
    will-change: transform;
}
.lp-slide__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Lichte donkere gradient onderaan zodat kop/tekst leesbaar blijft. */
.lp-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(5, 8, 14, 0.72) 100%);
    pointer-events: none;
}
/* Kop/tekst verticaal gecentreerd links (zoals de template), zodat het niet
   botst met de PREV/NEXT-knoppen onderin. */
.lp-slide__content {
    position: absolute;
    top: 50%;
    left: clamp(24px, 6vw, 100px);
    transform: translateY(-50%);
    max-width: min(680px, 62%);
    z-index: 4;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}
.lp-slide__heading {
    margin: 0 0 12px;
    font-family: inherit;
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: #fff;
}
.lp-slide__text {
    margin: 0;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

/* ---- Onzichtbare klik-zones links/rechts (bladeren door op de rand te klikken) ---- */
.lp-slide-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14%;
    z-index: 3;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.lp-slide-zone--prev { left: 0; }
.lp-slide-zone--next { right: 0; }

/* ---- Navigatie-varianten: standaard verborgen, getoond per data-nav ---- */
.lp-cards-slider .lp-slide-nav { display: none; }
.lp-cards-slider[data-nav="arrows"]   .lp-nav--arrows   { display: flex; }
.lp-cards-slider[data-nav="prevnext"] .lp-nav--prevnext { display: flex; }
.lp-cards-slider[data-nav="lines"]    .lp-nav--lines    { display: block; }
.lp-cards-slider[data-nav="both"]     .lp-nav--prevnext { display: flex; }
.lp-cards-slider[data-nav="both"]     .lp-nav--lines    { display: block; }

/* Op apparaten met een muis: navigatie (pijlen/PREV-NEXT/teller) faden weg en
   verschijnen alleen als je met de muis over de slide staat. Op touch (geen
   hover) blijven ze gewoon zichtbaar. */
@media (hover: hover) and (pointer: fine) {
    .lp-cards-slider .lp-slide-nav {
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    .lp-cards-slider:hover .lp-slide-nav,
    .lp-cards-slider:focus-within .lp-slide-nav {
        opacity: 1;
    }
}

/* Variant 1 — ronde pijlen + teller, rechtsonder. */
.lp-nav--arrows {
    position: absolute;
    bottom: clamp(24px, 4vw, 48px);
    right: clamp(20px, 4vw, 44px);
    z-index: 6;
    align-items: center;
    gap: 10px;
}
.lp-slide-arrow {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(212, 161, 75, 0.5);
    background: rgba(10, 14, 22, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lp-slide-arrow:hover {
    background: rgba(212, 161, 75, 0.2);
    border-color: var(--lp-card-accent);
    transform: scale(1.06);
}
.lp-slide-arrow:focus-visible { outline: 2px solid var(--lp-card-accent); outline-offset: 2px; }
.lp-slide-counter {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.75);
    padding: 0 6px;
    user-select: none;
}
.lp-slide-counter .lp-slide-current { color: var(--lp-card-accent); }
.lp-slide-sep { margin: 0 5px; opacity: 0.55; }

/* Variant 2 — PREV / NEXT (tekst in de hoeken), exact als de template. */
.lp-nav--prevnext {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(63px, 9vh, 115px);
    z-index: 6;
    padding: 0 clamp(20px, 6vw, 100px);
    align-items: center;
    justify-content: space-between;
}
.lp-slide-textbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-family: "Outfit", system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.25s ease;
}
.lp-slide-textbtn:hover { color: var(--lp-card-accent); }
.lp-slide-chev { display: inline-flex; transition: transform 0.3s ease; }
.lp-slide-prev .lp-slide-chev { margin-right: 1px; }
.lp-slide-next .lp-slide-chev { margin-left: 1px; }
.lp-slide-prev:hover .lp-slide-chev { transform: translateX(-3px); }
.lp-slide-next:hover .lp-slide-chev { transform: translateX(3px); }
.lp-slide-textbtn:focus-visible { outline: 2px solid var(--lp-card-accent); outline-offset: 3px; }

/* Variant 3 — verticale lijn-teller (template "slides-numbers"). */
.lp-nav--lines {
    position: absolute;
    top: 50%;
    right: clamp(24px, 6vw, 100px);
    transform: translateY(-50%);
    z-index: 6;
    text-align: left;
}
.lp-nav--lines span {
    display: block;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}
.lp-lines-cur   { transform: translateX(-5px); }
.lp-lines-slash { margin-left: 10px; transform: rotate(25deg); transform-origin: left bottom; }
.lp-lines-total { margin-left: 27px; color: rgba(255, 255, 255, 0.75); }
.lp-nav--lines::before,
.lp-nav--lines::after {
    content: "";
    display: block;
    width: 2px;
    height: clamp(28px, 7vh, 65px);
    transform: translateX(13px);
    background-color: #fff;
}
.lp-nav--lines::before { margin-bottom: 22px; }
.lp-nav--lines::after  { margin-top: 30px; }

@media (max-width: 600px) {
    .lp-nav--arrows { bottom: 20px; right: 16px; }
    .lp-slide-arrow { width: 40px; height: 40px; }
    .lp-nav--prevnext { bottom: 52px; padding: 0 18px; }
    /* Mobiel: geen verticale lijnen (die lopen te veel over de foto). De teller
       als nette inline "1 / 3", horizontaal gecentreerd tussen PREV en NEXT op
       dezelfde lijn. */
    .lp-nav--lines {
        top: auto;
        bottom: 52px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 7px;
    }
    .lp-nav--lines::before,
    .lp-nav--lines::after { display: none; }
    .lp-nav--lines span { display: inline; }
    .lp-nav--lines .lp-lines-cur   { transform: none; }
    .lp-nav--lines .lp-lines-slash { margin: 0; transform: none; }
    .lp-nav--lines .lp-lines-total { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-cards-slider { transition: opacity 0.3s ease; }
}