LORD DANCER – WHO AM I EP PLAYER V14 – SIX TRACK EP
   Full replacement CSS – performance and compatibility build
   ========================================================= */

:root {
    --ldep-pink: #ff42c6;
    --ldep-pink-soft: #ff82df;
    --ldep-blue: #35c8ff;
    --ldep-gold: #e9bd52;
    --ldep-green: #87ff9f;
    --ldep-black: #020207;
    --ldep-panel: rgba(2, 5, 12, 0.94);
    --ldep-stage-bg: none;
}

/* Dedicated page canvas */
html.ld-ep-page-active,
body.ld-ep-page-active {
    width: 100%;
    min-height: 100%;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

body.ld-ep-page-active #headerwrap,
body.ld-ep-page-active #footerwrap,
body.ld-ep-page-active #pagewrap > header,
body.ld-ep-page-active #pagewrap > footer,
body.ld-ep-page-active .page-title,
body.ld-ep-page-active .post-title,
body.ld-ep-page-active .sidebar-none #content::before,
body.ld-ep-page-active .back-top,
body.ld-ep-page-active .tf_sticky_buy {
    display: none !important;
}

body.ld-ep-page-active #pagewrap,
body.ld-ep-page-active #body,
body.ld-ep-page-active #layout,
body.ld-ep-page-active #content,
body.ld-ep-page-active .pagewidth,
body.ld-ep-page-active .module,
body.ld-ep-page-active .module_row,
body.ld-ep-page-active .row_inner,
body.ld-ep-page-active .tb-column,
body.ld-ep-page-active .tb-column-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ldep-app,
.ldep-app *,
.ldep-app *::before,
.ldep-app *::after {
    box-sizing: border-box;
}

.ldep-app {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: #fff;
    background: #000;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.4;
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.admin-bar .ldep-app {
    top: 32px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
}

.ldep-app button,
.ldep-app input,
.ldep-app a {
    font: inherit;
}

.ldep-app button,
.ldep-app a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ldep-app button {
    appearance: none;
    -webkit-appearance: none;
}

.ldep-app img {
    max-width: 100%;
    image-rendering: auto;
}

.ldep-app [hidden] {
    display: none !important;
}

.ldep-app .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------------------------------------------------------
   Shared corner navigation
   --------------------------------------------------------- */
.ldep-corner-nav {
    position: absolute;
    z-index: 40;
    top: max(14px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #fff !important;
    background: rgba(3, 5, 11, 0.82);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42), 0 0 14px rgba(255, 66, 198, 0.14);
    text-decoration: none !important;
    letter-spacing: 0.07em;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.ldep-corner-nav svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ldep-corner-nav:hover,
.ldep-corner-nav:focus-visible {
    border-color: var(--ldep-pink-soft);
    background: rgba(8, 6, 15, 0.94);
    box-shadow: 0 0 18px rgba(255, 66, 198, 0.32), 0 0 16px rgba(53, 200, 255, 0.15);
    outline: 0;
}

/* ---------------------------------------------------------
   Album-cover intro
   --------------------------------------------------------- */
.ldep-intro {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
    opacity: 1;
    visibility: visible;
    transition: opacity 620ms ease, visibility 620ms ease;
    contain: layout paint style;
}

.ldep-intro.is-fading {
    opacity: 0;
    pointer-events: none;
}

.ldep-intro.is-hidden {
    visibility: hidden;
}

.ldep-cover {
    display: block;
    width: auto;
    height: auto;
    max-width: min(94vw, calc(100vh - 32px));
    max-height: 94vh;
    object-fit: contain;
    contain: layout paint;
}

.ldep-entry-sign {
    position: absolute !important;
    z-index: 24;
    left: 50% !important;
    right: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    min-width: min(88vw, 440px);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 22px;
    color: #fff;
    background: transparent !important;
    box-shadow: none !important;
    transform: translate3d(-50%, 0, 0) !important;
    cursor: pointer;
    outline: 0;
}

.ldep-entry-sign:disabled {
    cursor: wait;
}

.ldep-entry-sign__inner {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 94px;
    padding: 10px 24px 10px 10px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    background: rgba(3, 17, 8, 0.92);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.64), 0 0 20px rgba(255, 66, 198, 0.3), 0 0 14px rgba(53, 200, 255, 0.18);
    text-align: left;
    transform: translate3d(0, 0, 0);
    animation: ldep-entry-float 4.8s ease-in-out infinite;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 150ms ease;
}

.ldep-entry-sign__inner img {
    display: block;
    width: 68px;
    height: 68px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 10px;
    object-fit: cover;
}

.ldep-entry-sign__inner > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ldep-entry-sign strong {
    color: #ffd66d;
    font-size: clamp(15px, 1.4vw, 23px);
    letter-spacing: 0.12em;
}

.ldep-entry-sign small {
    color: #ff9ae3;
    font-size: clamp(11px, 1vw, 16px);
    letter-spacing: 0.2em;
}

.ldep-entry-sign:hover .ldep-entry-sign__inner,
.ldep-entry-sign:focus-visible .ldep-entry-sign__inner {
    border-color: var(--ldep-pink-soft);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.66), 0 0 28px rgba(255, 66, 198, 0.48), 0 0 22px rgba(53, 200, 255, 0.3);
    animation-play-state: paused;
    transform: translate3d(0, -3px, 0);
}

.ldep-entry-sign:active .ldep-entry-sign__inner {
    animation-play-state: paused;
    transform: translate3d(0, 1px, 0);
}

@keyframes ldep-entry-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -7px, 0); }
}

/* ---------------------------------------------------------
   Password panel
   --------------------------------------------------------- */
.ldep-password-overlay {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: end center;
    padding: 14px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 320ms ease, visibility 320ms ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ldep-password-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ldep-password-panel {
    position: relative;
    width: min(94vw, 800px);
    aspect-ratio: 800 / 552;
    background-image: var(--ldep-panel-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate3d(0, 112%, 0);
    transition: transform 760ms cubic-bezier(.2,.8,.16,1);
    contain: layout paint;
}

.ldep-password-overlay.is-open .ldep-password-panel {
    transform: translate3d(0, 0, 0);
}

.ldep-password-form {
    position: absolute;
    inset: 0;
}

.ldep-password-screen {
    position: absolute;
    left: 14.4%;
    top: 22.6%;
    width: 71.2%;
    height: 49.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.4% 4% 2%;
    overflow: hidden;
    border-radius: 12%;
    color: var(--ldep-green);
    background: radial-gradient(circle at 50% 48%, rgba(13, 45, 22, 0.46), rgba(0, 8, 4, 0.92) 75%);
    box-shadow: inset 0 0 32px rgba(88, 255, 120, 0.14);
    font-family: "Courier New", ui-monospace, monospace;
    text-align: center;
    text-shadow: 0 0 7px rgba(98, 255, 126, 0.7);
}

.ldep-password-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
    mix-blend-mode: screen;
}

.ldep-crt-title,
.ldep-crt-copy,
.ldep-crt-label {
    position: relative;
    z-index: 2;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.ldep-crt-title { font-size: clamp(10px, 2vw, 22px); }
.ldep-crt-copy { margin-top: 4%; font-size: clamp(9px, 1.72vw, 19px); }
.ldep-crt-label { margin-top: 4%; font-size: clamp(9px, 1.6vw, 18px); }

.ldep-password-input-wrap {
    position: relative;
    z-index: 3;
    width: 84%;
    margin-top: 5%;
}

.ldep-password-input {
    width: 100%;
    height: clamp(42px, 7.4vw, 64px);
    margin: 0;
    padding: 0 clamp(48px, 7vw, 70px) 0 18px;
    border: 2px solid rgba(117, 255, 143, 0.82);
    border-radius: 15px;
    outline: 0;
    color: #d9ffe0;
    background: rgba(0, 11, 5, 0.82);
    box-shadow: inset 0 0 20px rgba(80, 255, 111, 0.1), 0 0 12px rgba(77, 255, 108, 0.32);
    font-family: "Courier New", ui-monospace, monospace;
    font-size: clamp(17px, 2.5vw, 25px);
    letter-spacing: 0.18em;
    caret-color: #a9ffb9;
}

.ldep-password-input:focus {
    border-color: #c5ffd0;
    box-shadow: inset 0 0 20px rgba(80, 255, 111, 0.14), 0 0 18px rgba(77, 255, 108, 0.5);
}

.ldep-password-reveal {
    position: absolute;
    z-index: 4;
    top: 50%;
    right: 7px;
    display: grid;
    place-items: center;
    width: clamp(34px, 5.6vw, 46px);
    height: clamp(34px, 5.6vw, 46px);
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(134, 255, 155, 0.52) !important;
    border-radius: 9px;
    color: #98ffab;
    background: linear-gradient(180deg, rgba(16, 51, 26, 0.95), rgba(2, 21, 9, 0.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -4px 8px rgba(0,0,0,.38), 0 0 10px rgba(83,255,114,.22) !important;
    transform: translate3d(0, -50%, 0) !important;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.ldep-password-reveal:hover,
.ldep-password-reveal:focus-visible,
.ldep-password-reveal.is-revealed {
    border-color: #d5ffdc !important;
    color: #effff2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -4px 8px rgba(0,0,0,.38), 0 0 15px rgba(83,255,114,.48) !important;
    outline: 0;
}

.ldep-password-reveal:active {
    transform: translate3d(0, -50%, 0) !important;
    box-shadow: inset 0 4px 10px rgba(0,0,0,.56), 0 0 8px rgba(83,255,114,.25) !important;
}

.ldep-eye-icon {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ldep-eye-icon--hide { display: none; }
.ldep-password-reveal.is-revealed .ldep-eye-icon--show { display: none; }
.ldep-password-reveal.is-revealed .ldep-eye-icon--hide { display: block; }

.ldep-password-status {
    position: relative;
    z-index: 3;
    min-height: 1.3em;
    margin-top: 2%;
    color: #caffd4;
    font-size: clamp(8px, 1.2vw, 13px);
    letter-spacing: 0.07em;
}

.ldep-password-overlay.is-error .ldep-password-screen {
    color: #ff8ea6;
    text-shadow: 0 0 8px rgba(255, 70, 110, 0.75);
    animation: ldep-panel-error 300ms ease;
}

.ldep-password-overlay.is-success .ldep-password-screen {
    color: #d6ffde;
    box-shadow: inset 0 0 36px rgba(83, 255, 114, 0.25), 0 0 24px rgba(83, 255, 114, 0.2);
}

@keyframes ldep-panel-error {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-5px); }
    65% { transform: translateX(5px); }
}

.ldep-password-submit {
    position: absolute;
    left: 39.4%;
    bottom: 4.1%;
    width: 21.2%;
    height: 11.2%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px;
    color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    outline: 0;
}

.ldep-password-submit span { display: none; }

.ldep-password-submit:hover,
.ldep-password-submit:focus-visible {
    box-shadow: 0 0 18px rgba(255, 65, 196, 0.52) !important;
}

.ldep-password-submit:active {
    transform: none !important;
}

.ldep-password-close {
    position: absolute;
    z-index: 8;
    top: 4.2%;
    right: 4.6%;
    display: grid;
    place-items: center;
    width: clamp(28px, 5vw, 42px);
    height: clamp(28px, 5vw, 42px);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    color: #ff9ee3;
    background: transparent !important;
    box-shadow: none !important;
    font-size: clamp(20px, 3vw, 30px);
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 0 8px rgba(255, 66, 198, 0.78);
}

.ldep-password-close:hover,
.ldep-password-close:focus-visible {
    color: #fff;
    outline: 0;
}

/* ---------------------------------------------------------
   Player stage
   --------------------------------------------------------- */
.ldep-player-stage {
    position: absolute;
    inset: 0;
    z-index: 12;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    background-color: #03050a;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.46)), var(--ldep-stage-bg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transition: opacity 620ms ease;
    scrollbar-color: rgba(255, 66, 198, 0.65) rgba(0, 0, 0, 0.35);
    scrollbar-width: thin;
}

.ldep-player-stage.is-visible { opacity: 1; }

.ldep-stage-inner {
    width: min(100%, 1560px);
    margin: 0 auto;
    padding: clamp(10px, 1.5vw, 24px);
}

.ldep-hero-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(270px, 36%) minmax(0, 64%);
    grid-template-areas:
        "brand ticket"
        "player player";
    align-items: center;
    gap: clamp(12px, 2vw, 30px);
    width: 100%;
    min-height: clamp(650px, 68vw, 920px);
    padding: clamp(62px, 5vw, 82px) clamp(15px, 2.2vw, 34px) clamp(16px, 2vw, 28px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    background: linear-gradient(125deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.12) 52%, rgba(0, 0, 0, 0.32));
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(255, 66, 198, 0.08);
    contain: layout paint style;
}

.ldep-brand-block {
    grid-area: brand;
    align-self: center;
    width: 100%;
    max-width: 560px;
    min-width: 0;
}

.ldep-brand-logo,
.ldep-brand-who,
.ldep-brand-ep,
.ldep-signature {
    display: block;
    height: auto;
    object-fit: contain;
}

.ldep-brand-logo {
    width: 96%;
    filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.45));
}

.ldep-brand-who {
    width: 70%;
    margin: 1% 0 0 6%;
    filter: drop-shadow(0 0 10px rgba(255, 66, 198, 0.42));
}

.ldep-brand-ep {
    width: 39%;
    margin: 1.8% 0 0 19%;
    filter: drop-shadow(0 0 8px rgba(255, 66, 198, 0.32));
}

.ldep-intro-copy {
    width: 68%;
    margin: 6% 0 0 9%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(11px, 1.05vw, 17px);
    line-height: 1.55;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.72);
}

.ldep-intro-copy strong { color: var(--ldep-gold); }

.ldep-signature {
    width: 49%;
    margin: 4.5% 0 0 11%;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
}

.ldep-advisory {
    position: absolute;
    z-index: 9;
    top: 2.3%;
    right: 1.8%;
    width: clamp(72px, 8vw, 128px);
}

.ldep-advisory img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}

/* Ticket geometry uses a shared rendered height because both source files are 701px tall. */
.ldep-ticket-cluster {
    grid-area: ticket;
    position: relative;
    width: 100%;
    aspect-ratio: 2.52 / 1;
    min-width: 0;
    overflow: visible;
    pointer-events: none;
}

.ldep-ticket-position {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    overflow: visible;
    pointer-events: none;
}

.ldep-ticket-position--left {
    left: 0;
    aspect-ratio: 648 / 701;
    transform: rotate(-4.4deg);
    transform-origin: 54% 52%;
}

.ldep-ticket-position--right {
    right: 0;
    aspect-ratio: 1090 / 701;
    transform: rotate(-3.7deg);
    transform-origin: 49% 52%;
    pointer-events: auto;
}

.ldep-ticket-float,
.ldep-ticket-float img {
    width: 100%;
    height: 100%;
}

.ldep-ticket-float {
    position: relative;
    pointer-events: none;
}

.ldep-ticket-float img {
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.54));
}

.ldep-ticket-float--left { animation: ldep-ticket-left 7.4s ease-in-out infinite; }
.ldep-ticket-float--right { animation: ldep-ticket-right 8.35s ease-in-out -1.7s infinite; }

@keyframes ldep-ticket-left {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
    48% { transform: translate3d(2px, -7px, 0) rotate(.3deg); }
}

@keyframes ldep-ticket-right {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
    52% { transform: translate3d(-2px, -5px, 0) rotate(-.22deg); }
}

.ldep-ticket-position--right .ldep-ticket-float { pointer-events: auto; }

.ldep-ticket-track {
    position: absolute;
    z-index: 8;
    left: 13.1%;
    width: 57.2%;
    /*
     * V169 six-track ticket lock.
     * Right-side-of-ticket-2.webp remains 1090 × 701, so horizontal
     * geometry is unchanged. The six vertical hit areas below were
     * recalculated against the actual printed rows in the new artwork.
     */
    height: 11.8%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 13px;
    outline: 0;
    color: transparent;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    mix-blend-mode: screen;
}

.ldep-ticket-track--1 { top: 8.8%; }
.ldep-ticket-track--2 { top: 21.7%; }
.ldep-ticket-track--3 { top: 35.8%; }
.ldep-ticket-track--4 { top: 49.0%; }
.ldep-ticket-track--5 { top: 61.6%; }
.ldep-ticket-track--6 { top: 76.2%; }

.ldep-ticket-track::before,
.ldep-ticket-track::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

.ldep-ticket-track::before {
    inset: 6% 0;
    border: 1px solid rgba(255, 170, 232, 0.88);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 34, 186, 0.46), rgba(255, 99, 214, 0.28) 50%, rgba(56, 191, 255, 0.32));
    box-shadow: inset 0 0 14px rgba(255,255,255,.16), -5px 0 22px rgba(255, 35, 186, 0.72), 8px 0 24px rgba(53, 200, 255, 0.62);
}

.ldep-ticket-track::after {
    inset: 17% 4%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 38, 190, 0.98), rgba(255, 75, 204, 0.72) 58%, rgba(53, 200, 255, 0.98));
    filter: blur(13px);
}

.ldep-ticket-track:hover::before,
.ldep-ticket-track:hover::after,
.ldep-ticket-track:focus-visible::before,
.ldep-ticket-track:focus-visible::after {
    opacity: 1;
}

.ldep-ticket-track:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
.ldep-ticket-track.is-selected::before { opacity: .72; }
.ldep-ticket-track.is-selected::after { opacity: .68; animation: ldep-ticket-glow 2.5s ease-in-out infinite; }

@keyframes ldep-ticket-glow {
    0%, 100% { filter: blur(12px) brightness(.95); }
    50% { filter: blur(15px) brightness(1.2); }
}

/* ---------------------------------------------------------
   Compact player
   --------------------------------------------------------- */
.ldep-player-dock {
    grid-area: player;
    position: relative;
    display: grid;
    grid-template-areas: "art body volume";
    grid-template-columns: clamp(126px, 10.5vw, 164px) minmax(0, 1fr) clamp(150px, 14vw, 220px);
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px);
    width: 100%;
    min-height: clamp(154px, 12vw, 190px);
    padding: clamp(10px, 1.1vw, 16px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 17px;
    background: linear-gradient(120deg, rgba(255,255,255,.03), transparent 36%), var(--ldep-panel);
    box-shadow: inset 0 0 0 1px rgba(255, 66, 198, 0.12), -2px 0 18px rgba(53, 200, 255, 0.18), 2px 0 18px rgba(255, 66, 198, 0.2), 0 16px 36px rgba(0,0,0,.54);
    contain: layout paint;
}

.ldep-player-dock::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(53, 200, 255, 0.1), transparent 17%, transparent 82%, rgba(255, 66, 198, 0.11));
}

.ldep-audio { display: none; }

.ldep-now-art {
    grid-area: art;
    position: relative;
    z-index: 2;
    display: block;
    width: clamp(126px, 10.5vw, 164px);
    height: clamp(126px, 10.5vw, 164px);
    min-width: clamp(126px, 10.5vw, 164px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    background: #080a0f;
    box-shadow: 0 0 0 1px rgba(53, 200, 255, 0.22), 0 0 20px rgba(53, 200, 255, 0.14), 0 9px 20px rgba(0,0,0,.5);
    aspect-ratio: 1 / 1;
}

.ldep-now-art::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(1,2,5,.9), rgba(1,2,5,.56) 24%, transparent 56%);
}

.ldep-now-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 180ms ease, transform 600ms ease;
}

.ldep-now-art img.is-changing { opacity: 0; transform: scale(1.025); }

.ldep-now-art figcaption {
    position: absolute;
    z-index: 3;
    left: 10px;
    right: 10px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-shadow: 0 2px 7px #000;
}

.ldep-now-art figcaption span {
    color: var(--ldep-pink-soft);
    font-size: clamp(11px, .92vw, 15px);
    font-weight: 700;
    letter-spacing: .08em;
}

.ldep-now-art figcaption strong {
    font-size: clamp(9px, .8vw, 13px);
    letter-spacing: .04em;
}

.ldep-player-centre {
    grid-area: body;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: minmax(66px, 1fr) 30px 30px;
    gap: 3px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.ldep-player-topline {
    display: grid;
    grid-template-columns: minmax(150px, .6fr) minmax(300px, 1.4fr);
    align-items: center;
    gap: clamp(8px, 1.4vw, 22px);
    min-width: 0;
}

.ldep-now-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ldep-now-meta span {
    color: var(--ldep-pink);
    font-size: clamp(9px, .75vw, 12px);
    font-weight: 700;
    letter-spacing: .09em;
}

.ldep-now-meta strong {
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: #fff;
    font-size: clamp(17px, 1.35vw, 23px);
    font-weight: 500;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ldep-now-meta small {
    margin-top: 2px;
    color: rgba(255,255,255,.64);
    font-size: clamp(8px, .67vw, 10px);
    letter-spacing: .08em;
}

.ldep-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, .75vw, 12px);
    min-width: 0;
    overflow: visible;
}

.ldep-control-button,
.ldep-play-button,
.ldep-volume-button {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    color: rgba(255,255,255,.86);
    background: transparent;
    cursor: pointer;
    outline: 0;
    transition: color 150ms ease, filter 150ms ease, background 150ms ease;
}

.ldep-control-button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.ldep-control-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ldep-icon-fill { fill: currentColor; stroke: none; }

.ldep-control-button:hover,
.ldep-control-button:focus-visible,
.ldep-volume-button:hover,
.ldep-volume-button:focus-visible,
.ldep-control-button.is-active {
    color: #fff;
    background: rgba(255,255,255,.07);
    filter: drop-shadow(0 0 7px rgba(255,66,198,.65));
}

.ldep-play-button {
    width: clamp(62px, 5vw, 76px);
    height: clamp(62px, 5vw, 76px);
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(#05070c, #05070c) padding-box, linear-gradient(120deg, var(--ldep-pink), #d84bff 48%, var(--ldep-blue)) border-box;
    box-shadow: -6px 0 18px rgba(255,66,198,.34), 6px 0 18px rgba(53,200,255,.34), inset 0 0 20px rgba(255,255,255,.035);
}

.ldep-play-button:hover,
.ldep-play-button:focus-visible {
    box-shadow: -8px 0 25px rgba(255,66,198,.48), 8px 0 25px rgba(53,200,255,.48), inset 0 0 24px rgba(255,255,255,.06);
}

.ldep-play-button:active { transform: scale(.98); }

.ldep-play-icon {
    width: 30px;
    height: 30px;
    fill: #fff;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.45));
}

.ldep-play-icon--pause { display: none; }
.ldep-app.is-playing .ldep-play-icon--play { display: none; }
.ldep-app.is-playing .ldep-play-icon--pause { display: block; }
.ldep-app.is-playing .ldep-play-button { animation: ldep-play-pulse 2.6s ease-in-out infinite; }

@keyframes ldep-play-pulse {
    0%, 100% { box-shadow: -6px 0 18px rgba(255,66,198,.34), 6px 0 18px rgba(53,200,255,.34); }
    50% { box-shadow: -8px 0 27px rgba(255,66,198,.54), 8px 0 27px rgba(53,200,255,.54); }
}

.ldep-repeat-one {
    position: absolute;
    right: 2px;
    bottom: 1px;
    display: none;
    min-width: 13px;
    height: 13px;
    padding: 0 2px;
    border-radius: 999px;
    color: #070811;
    background: #fff;
    font: 800 9px/13px Arial, sans-serif;
    text-align: center;
}

.ldep-repeat-button[data-repeat-mode="2"] .ldep-repeat-one { display: block; }

.ldep-visualiser {
    display: block;
    width: 100%;
    height: 30px;
    opacity: .95;
}

.ldep-timeline {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ldep-timeline time {
    color: rgba(255,255,255,.82);
    font-size: clamp(9px, .7vw, 11px);
    font-variant-numeric: tabular-nums;
}

.ldep-timeline time:last-child { text-align: right; }

.ldep-timeline input,
.ldep-volume-panel input {
    width: 100%;
    height: 24px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.ldep-timeline input::-webkit-slider-runnable-track,
.ldep-volume-panel input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ldep-pink), #d54dff 56%, var(--ldep-blue));
    box-shadow: 0 0 8px rgba(255,66,198,.3);
}

.ldep-timeline input::-webkit-slider-thumb,
.ldep-volume-panel input::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 50%;
    background: #ff7bd9;
    box-shadow: 0 0 12px rgba(255,66,198,.88);
}

.ldep-timeline input::-moz-range-track,
.ldep-volume-panel input::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ldep-pink), #d54dff 56%, var(--ldep-blue));
}

.ldep-timeline input::-moz-range-thumb,
.ldep-volume-panel input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 50%;
    background: #ff7bd9;
    box-shadow: 0 0 12px rgba(255,66,198,.88);
}

.ldep-volume-panel {
    grid-area: volume;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    height: 100%;
    padding-left: clamp(10px, 1vw, 16px);
    border-left: 1px solid rgba(255,255,255,.16);
}

.ldep-volume-button {
    width: 40px;
    min-width: 40px;
    height: 36px;
    border-radius: 50%;
}

.ldep-volume-icon {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ldep-volume-muted { display: none; }
.ldep-volume-button.is-muted .ldep-volume-wave { display: none; }
.ldep-volume-button.is-muted .ldep-volume-muted { display: block; }

/* ---------------------------------------------------------
   Track list
   --------------------------------------------------------- */
.ldep-track-panel {
    margin-top: clamp(10px, 1.2vw, 20px);
    padding: clamp(13px, 1.35vw, 21px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(255,66,198,.035), transparent 35%, rgba(53,200,255,.035)), rgba(2,4,8,.93);
    box-shadow: 0 15px 40px rgba(0,0,0,.46);
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

.ldep-track-panel h2 {
    margin: 0 0 12px;
    color: var(--ldep-pink);
    font-size: clamp(14px, 1.3vw, 20px);
    font-weight: 600;
    letter-spacing: .05em;
    text-shadow: 0 0 12px rgba(255,66,198,.45);
}

.ldep-track-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(9px, 1.1vw, 18px);
}

.ldep-track-card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto auto;
    justify-items: start;
    gap: 4px;
    padding: clamp(8px, .8vw, 12px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 11px;
    color: #fff;
    background: rgba(3,5,9,.94);
    box-shadow: 0 9px 22px rgba(0,0,0,.34);
    cursor: pointer;
    text-align: left;
    transition: border-color 180ms ease, box-shadow 200ms ease, background 180ms ease;
}

.ldep-track-card:hover,
.ldep-track-card:focus-visible,
.ldep-track-card.is-selected {
    border-color: var(--ldep-pink-soft);
    background: rgba(8,5,13,.97);
    box-shadow: 0 0 0 1px rgba(255,66,198,.25), 0 0 22px rgba(255,66,198,.28), 0 11px 25px rgba(0,0,0,.5);
    outline: 0;
}

.ldep-card-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,66,198,.08), rgba(53,200,255,.06)), #080a0f;
}

.ldep-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 200ms ease, filter 220ms ease;
}

.ldep-card-art img[src] { opacity: 1; }
.ldep-track-card:hover .ldep-card-art img,
.ldep-track-card.is-selected .ldep-card-art img { filter: brightness(1.1) saturate(1.08); }

.ldep-card-number {
    margin-top: 4px;
    color: var(--ldep-pink-soft);
    font-size: clamp(13px, 1.05vw, 17px);
    font-weight: 700;
}

.ldep-track-card strong {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(10px, .9vw, 14px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ldep-track-card time {
    color: rgba(255,255,255,.62);
    font-size: clamp(9px, .78vw, 12px);
    font-variant-numeric: tabular-nums;
}

.ldep-card-playing {
    position: absolute;
    right: 8px;
    bottom: 7px;
    display: none;
    align-items: end;
    gap: 2px;
    height: 18px;
}

.ldep-card-playing i {
    display: block;
    width: 3px;
    height: 7px;
    border-radius: 2px;
    background: linear-gradient(var(--ldep-pink), var(--ldep-blue));
    animation: ldep-mini-bars .7s ease-in-out infinite alternate;
}

.ldep-card-playing i:nth-child(2) { animation-delay: .12s; }
.ldep-card-playing i:nth-child(3) { animation-delay: .24s; }
.ldep-card-playing i:nth-child(4) { animation-delay: .36s; }
.ldep-app.is-playing .ldep-track-card.is-selected .ldep-card-playing { display: flex; }

@keyframes ldep-mini-bars { to { height: 18px; } }

/* ---------------------------------------------------------
   Toast
   --------------------------------------------------------- */
.ldep-toast {
    position: absolute;
    z-index: 100;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    max-width: min(90vw, 520px);
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    color: #fff;
    background: rgba(3,5,11,.94);
    box-shadow: 0 0 20px rgba(255,66,198,.25);
    font-size: 12px;
    letter-spacing: .05em;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 12px, 0);
    transition: opacity 180ms ease, transform 180ms ease;
}

.ldep-toast.is-visible { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ---------------------------------------------------------
   Medium layouts
   --------------------------------------------------------- */
@media (max-width: 1100px) {
    .ldep-hero-panel {
        grid-template-columns: minmax(240px, 38%) minmax(0, 62%);
        min-height: clamp(650px, 82vw, 860px);
        padding-top: 66px;
    }

    .ldep-brand-logo { width: 100%; }
    .ldep-intro-copy { width: 78%; }

    .ldep-player-dock {
        grid-template-areas:
            "art body"
            "volume volume";
        grid-template-columns: 132px minmax(0, 1fr);
        grid-template-rows: minmax(142px, auto) 44px;
        min-height: 204px;
        gap: 9px 13px;
        padding: 12px;
    }

    .ldep-now-art {
        width: 132px;
        height: 132px;
        min-width: 132px;
    }

    .ldep-player-centre {
        height: 142px;
        grid-template-rows: minmax(78px, 1fr) 28px 28px;
    }

    .ldep-player-topline {
        grid-template-columns: minmax(128px, .5fr) minmax(260px, 1.5fr);
        gap: 8px;
    }

    .ldep-volume-panel {
        height: 44px;
        padding: 2px 11% 0;
        border-top: 1px solid rgba(255,255,255,.14);
        border-left: 0;
    }

    .ldep-track-cards {
        grid-template-columns: repeat(6, minmax(150px, 1fr));
        overflow-x: auto;
        padding: 3px 2px 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .ldep-track-card { scroll-snap-align: start; }
}

/* Keep ticket on the right on landscape phones/tablets and useful medium widths. */
@media (min-width: 560px) and (orientation: landscape),
       (min-width: 760px) {
    .ldep-hero-panel {
        grid-template-areas:
            "brand ticket"
            "player player";
    }
}

/* Narrow portrait layout */
@media (max-width: 759px) and (orientation: portrait) {
    .ldep-stage-inner { padding: 8px; }

    .ldep-hero-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "ticket"
            "player";
        min-height: 0;
        gap: 14px;
        padding: 54px 10px 12px;
        border-radius: 14px;
    }

    .ldep-brand-block {
        width: min(92%, 560px);
        margin: 0 auto;
        text-align: center;
    }

    .ldep-brand-logo { width: 94%; margin: 0 auto; }
    .ldep-brand-who { width: 68%; margin: -1% auto 0; }
    .ldep-brand-ep { width: 42%; margin: 2% auto 0; }
    .ldep-intro-copy { width: 86%; margin: 5% auto 0; align-items: center; text-align: center; }
    .ldep-signature { width: 50%; margin: 4% auto 0; }

    .ldep-ticket-cluster {
        width: min(106%, 900px);
        margin: 0 -3%;
    }

    .ldep-advisory {
        top: 10px;
        right: 10px;
        width: 68px;
    }
}

/* ---------------------------------------------------------
   Phones – controls and visualiser never overlap
   --------------------------------------------------------- */
@media (max-width: 700px) {
    body.admin-bar .ldep-app {
        top: 0;
        height: 100vh;
        height: 100dvh;
    }

    .ldep-corner-nav {
        top: max(8px, env(safe-area-inset-top));
        left: max(8px, env(safe-area-inset-left));
        min-height: 34px;
        padding: 6px 9px;
        font-size: 9px;
    }

    .ldep-cover {
        max-width: 96vw;
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
    }

    .ldep-entry-sign {
        min-width: min(92vw, 360px);
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }

    .ldep-entry-sign__inner {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
        min-height: 68px;
        padding: 8px 15px 8px 8px;
        border-radius: 18px;
    }

    .ldep-entry-sign__inner img { width: 52px; height: 52px; border-radius: 8px; }
    .ldep-entry-sign strong { font-size: 14px; }
    .ldep-entry-sign small { font-size: 10px; }

    .ldep-password-overlay { padding-inline: 4px; }
    .ldep-password-panel { width: 100vw; }
    .ldep-password-input-wrap { width: 88%; margin-top: 4%; }
    .ldep-password-input { height: 42px; padding-right: 48px; font-size: 17px; }
    .ldep-password-reveal { right: 5px; width: 34px; height: 34px; border-radius: 7px; }
    .ldep-eye-icon { width: 19px; height: 19px; }

    .ldep-player-dock {
        grid-template-areas:
            "art body"
            "volume volume";
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-rows: minmax(196px, auto) 42px;
        min-height: 246px;
        gap: 8px;
        padding: 9px;
        border-radius: 14px;
    }

    .ldep-now-art {
        width: 88px;
        height: 88px;
        min-width: 88px;
        align-self: start;
    }

    .ldep-now-art figcaption { left: 7px; right: 7px; bottom: 6px; }
    .ldep-now-art figcaption span { font-size: 11px; }
    .ldep-now-art figcaption strong { font-size: 8px; }

    .ldep-player-centre {
        height: 196px;
        grid-template-rows: minmax(140px, auto) 16px 24px;
        gap: 7px;
        align-content: start;
        overflow: hidden;
    }

    .ldep-player-topline {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: start;
        gap: 9px;
    }

    .ldep-now-meta span { font-size: 8px; }
    .ldep-now-meta strong { font-size: 14px; }
    .ldep-now-meta small { font-size: 8px; }

    .ldep-transport {
        justify-content: flex-start;
        gap: 4px;
        min-height: 44px;
        padding-bottom: 2px;
    }

    .ldep-control-button {
        width: 27px;
        height: 27px;
    }

    .ldep-control-icon { width: 17px; height: 17px; }

    .ldep-play-button {
        width: 44px;
        height: 44px;
    }

    .ldep-play-icon { width: 24px; height: 24px; }

    .ldep-visualiser {
        width: 100%;
        height: 16px;
        margin-top: 1px;
    }

    .ldep-timeline {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        gap: 4px;
    }

    .ldep-timeline time { font-size: 8px; }

    .ldep-volume-panel {
        height: 42px;
        padding: 2px 10px 0;
    }

    .ldep-volume-button { width: 38px; min-width: 38px; height: 32px; }

    .ldep-track-panel { margin-top: 8px; padding: 11px 9px; border-radius: 12px; }
    .ldep-track-panel h2 { margin-left: 3px; font-size: 14px; }
    .ldep-track-cards { grid-template-columns: repeat(6, 146px); gap: 9px; padding-bottom: 10px; }
    .ldep-track-card { padding: 8px; }
}

@media (max-width: 430px) {
    .ldep-player-dock {
        grid-template-columns: 76px minmax(0, 1fr);
        grid-template-rows: minmax(190px, auto) 40px;
        min-height: 236px;
        gap: 7px;
        padding: 8px;
    }

    .ldep-now-art { width: 76px; height: 76px; min-width: 76px; }

    .ldep-player-centre {
        height: 190px;
        grid-template-rows: minmax(136px, auto) 14px 22px;
        gap: 6px;
    }

    .ldep-now-meta strong { font-size: 13px; }
    .ldep-transport { gap: 3px; min-height: 42px; }
    .ldep-control-button { width: 25px; height: 25px; }
    .ldep-control-icon { width: 16px; height: 16px; }
    .ldep-play-button { width: 40px; height: 40px; }
    .ldep-play-icon { width: 22px; height: 22px; }
    .ldep-visualiser { height: 14px; }
    .ldep-timeline { grid-template-columns: 30px minmax(0, 1fr) 30px; }
    .ldep-ticket-cluster { width: 108%; margin-inline: -4%; }
}

/* Landscape phones: retain right-side ticket and reduce vertical footprint. */
@media (max-height: 560px) and (orientation: landscape) {
    .ldep-stage-inner { padding: 6px; }

    .ldep-hero-panel {
        grid-template-columns: minmax(210px, 35%) minmax(0, 65%);
        min-height: 620px;
        padding: 48px 10px 10px;
        gap: 8px;
    }

    .ldep-brand-logo { width: 88%; }
    .ldep-brand-who { width: 62%; }
    .ldep-brand-ep { width: 34%; }
    .ldep-intro-copy { width: 78%; margin-top: 3%; font-size: 10px; }
    .ldep-signature { width: 40%; margin-top: 2%; }
    .ldep-advisory { width: 62px; }
}

/* ---------------------------------------------------------
   Expensive visual effects: use only where supported/useful
   --------------------------------------------------------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .ldep-corner-nav,
    .ldep-password-overlay { background-color: rgba(2, 4, 9, 0.96); }
}

@media (hover: none), (pointer: coarse) {
    .ldep-corner-nav,
    .ldep-player-dock,
    .ldep-track-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ldep-ticket-track:hover::before,
    .ldep-ticket-track:hover::after { opacity: 0; }
}

.ldep-app.is-page-hidden .ldep-ticket-float,
.ldep-app.is-page-hidden .ldep-entry-sign__inner,
.ldep-app.is-page-hidden .ldep-card-playing i {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .ldep-app *,
    .ldep-app *::before,
    .ldep-app *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* iPhone/iPad Safari keeps media volume under the device's physical controls. */
.ldep-app.is-ios .ldep-volume-panel input {
    display: none;
}

.ldep-app.is-ios .ldep-volume-panel::after {
    content: "USE DEVICE VOLUME";
    color: rgba(255,255,255,.62);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    white-space: nowrap;
}

/* =========================================================
   PLAY / PAUSE BUTTON – FINAL THEME-SAFE HOVER SWIRL
   ========================================================= */
.ldep-app button,
.ldep-app input[type="button"],
.ldep-app input[type="submit"] {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.ldep-app .ldep-play-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff !important;
    background: linear-gradient(#05070c, #05070c) padding-box,
                linear-gradient(120deg, var(--ldep-pink), #d84bff 48%, var(--ldep-blue)) border-box !important;
    background-color: #05070c !important;
    border: 2px solid transparent !important;
    outline: 0 !important;
}

.ldep-app .ldep-play-button::before,
.ldep-app .ldep-play-button::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    contain: paint;
}

.ldep-app .ldep-play-button::before {
    inset: 5px;
    z-index: 0;
    background: radial-gradient(circle at 50% 45%, rgba(18,22,36,.95) 0%, rgba(8,10,18,.97) 48%, rgba(3,5,10,.99) 100%);
    box-shadow: inset 0 0 18px rgba(255,255,255,.035), inset 0 -10px 20px rgba(0,0,0,.35);
}

.ldep-app .ldep-play-button::after {
    inset: 7px;
    z-index: 0;
    opacity: 0;
    background: conic-gradient(from 0deg,
        rgba(255,66,198,0) 0deg,
        rgba(255,66,198,.75) 50deg,
        rgba(216,75,255,.45) 95deg,
        rgba(53,200,255,.78) 180deg,
        rgba(53,200,255,.22) 235deg,
        rgba(255,66,198,.62) 315deg,
        rgba(255,66,198,0) 360deg);
    filter: blur(8px) saturate(118%);
    mix-blend-mode: screen;
    transform: scale(1) rotate(0deg);
}

.ldep-app .ldep-play-button > * {
    position: relative;
    z-index: 2;
}

.ldep-app .ldep-play-button:hover,
.ldep-app .ldep-play-button:focus,
.ldep-app .ldep-play-button:focus-visible,
.ldep-app .ldep-play-button:active {
    color: #fff !important;
    background: linear-gradient(#05070c, #05070c) padding-box,
                linear-gradient(120deg, var(--ldep-pink), #d84bff 48%, var(--ldep-blue)) border-box !important;
    background-color: #05070c !important;
    border: 2px solid transparent !important;
    outline: 0 !important;
    filter: none !important;
}

.ldep-app .ldep-play-button:hover,
.ldep-app .ldep-play-button:focus-visible {
    box-shadow: -8px 0 25px rgba(255,66,198,.48),
                 8px 0 25px rgba(53,200,255,.48),
                 inset 0 0 24px rgba(255,255,255,.06) !important;
}

.ldep-app .ldep-play-button:hover::after,
.ldep-app .ldep-play-button:focus-visible::after {
    opacity: .92;
    animation: ldep-play-swirl 2.2s linear infinite;
    will-change: transform, filter;
}

.ldep-app .ldep-play-button:active {
    transform: scale(.98);
    box-shadow: -6px 0 18px rgba(255,66,198,.38),
                 6px 0 18px rgba(53,200,255,.38),
                 inset 0 0 20px rgba(255,255,255,.05) !important;
}

.ldep-app .ldep-play-button:active::after {
    opacity: .98;
    animation-duration: 1.2s;
}

.ldep-app .ldep-play-icon,
.ldep-app .ldep-play-icon--play,
.ldep-app .ldep-play-icon--pause {
    color: #fff !important;
    fill: currentColor !important;
    stroke: none !important;
}

@keyframes ldep-play-swirl {
    0% { transform: scale(1) rotate(0deg); filter: blur(8px) saturate(118%); }
    50% { transform: scale(1.05) rotate(180deg); filter: blur(10px) saturate(128%); }
    100% { transform: scale(1) rotate(360deg); filter: blur(8px) saturate(118%); }
}

/* Canvas and below-fold containment without layout or visual changes. */
.ldep-visualiser {
    pointer-events: none;
    contain: strict;
}

.ldep-track-panel {
    contain-intrinsic-size: auto 300px;
}

/* Pause every decorative animation while the tab is hidden. */
.ldep-app.is-page-hidden .ldep-play-button,
.ldep-app.is-page-hidden .ldep-play-button::after,
.ldep-app.is-page-hidden .ldep-ticket-track.is-selected::after {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .ldep-app .ldep-play-button:hover::after,
    .ldep-app .ldep-play-button:focus-visible::after,
    .ldep-app .ldep-play-button:active::after {
        animation: none !important;
        opacity: .85;
        will-change: auto;
    }
}


/* =========================================================
   V142 FINAL LOCK — ALBUM LOOK STATE, PARALLAX + 2-SECOND LINK

   Reliability change
   - The Album character no longer depends on rewriting an <img> src.
   - One CSS background surface displays the resting or looking-down asset.
   - This prevents LiteSpeed/lazy-loading/browser image rewriting from forcing
     Album-Character.webp back over Album-Character-Look.webp.

   Sequence
   - Resting: Album-Character.webp.
   - Click: Album-Character-Look.webp appears immediately.
   - Hold: looking-down artwork remains visible for exactly 2 seconds.
   - Link: Who Am I EP opens in a new browser tab only.
   - Return: the unchanged gallery is already restored to the resting artwork.

   Placement/parallax
   - V137 top-left/top-right green-dot alignment remains unchanged.
   - The small intentional bottom overhang remains unchanged.
   - The same --ldg1-album-shift parallax value used in V139 is retained.
   ========================================================= */

.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142] {
	position: absolute;
	z-index: 18;
	display: block;
	left: 27.964203% !important;
	top: 42.698318% !important;
	bottom: auto !important;
	width: 15.491257% !important;
	height: auto !important;
	aspect-ratio: 581 / 900;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 0;
	text-decoration: none !important;
	outline: none;
	cursor: pointer;
	pointer-events: auto !important;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translate3d(var(--ldg1-album-shift, 0px), 0, 0) !important;
	transform-origin: 50% 0;
	will-change: transform;
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character-surface {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-image: var(--ldg1-album-default-image);
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: contain;
	filter:
		drop-shadow(0 14px 18px rgba(0, 0, 0, .34))
		drop-shadow(0 0 10px rgba(255, 191, 37, .08));
	transform: translate3d(0, 0, 0);
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: filter 180ms ease, transform 180ms ease;
}

/* Immediate and authoritative looking-down state. */
.ldg1[data-ldg1-build="V142"] .ldg1__album-character.is-album-looking
.ldg1__album-character-surface {
	background-image: var(--ldg1-album-look-image) !important;
	transform: translate3d(0, 0, 0) scale(1.002);
	filter:
		drop-shadow(0 14px 18px rgba(0, 0, 0, .34))
		drop-shadow(0 0 14px rgba(255, 191, 37, .16));
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character:hover
.ldg1__album-character-surface,
.ldg1[data-ldg1-build="V142"] .ldg1__album-character:focus-visible
.ldg1__album-character-surface {
	filter:
		drop-shadow(0 14px 18px rgba(0, 0, 0, .34))
		drop-shadow(0 0 14px rgba(255, 191, 37, .18));
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character:focus-visible {
	filter: drop-shadow(0 0 9px rgba(255, 211, 95, .32));
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character.is-album-link-pending {
	cursor: wait;
}

/* Framed artwork and its controls remain above the character. */
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:hover,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:focus,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:focus-visible,
.ldg1[data-ldg1-build="V142"] .ldg1__room--three .ldg1__exhibit:active {
	z-index: 20 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ldg1[data-ldg1-build="V142"] .ldg1__room--three >
	.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142] {
		transform: translate3d(var(--ldg1-album-shift, 0px), 0, 0) !important;
	}

	.ldg1[data-ldg1-build="V142"] .ldg1__album-character-surface {
		transition: none !important;
	}
}


/* =========================================================
   V141 CSS-ONLY — ALBUM CHARACTER DEPTH OF FIELD

   This applies the same walk-to-frame depth-of-field treatment used by
   the BIO character to the Album character in room three.

   Behaviour
   - Normal gallery view: Album character remains completely sharp.
   - Walking towards a selected frame: character progressively blurs,
     darkens slightly and loses a small amount of saturation.
   - Focused on the frame: the out-of-focus state is held.
   - Walking backwards: focus is restored immediately and smoothly.

   No placement, dimensions, top-corner alignment, parallax, Look pose,
   two-second link delay, gallery behaviour or other Lord Dancer CSS has
   been altered by this block.
   ========================================================= */

.ldg1 .ldg1__album-character {
	filter: none;
	transition:
		filter 1650ms cubic-bezier(.20, .62, .24, 1);
	will-change: transform, filter;
}

.ldg1.is-walking-to-artwork .ldg1__album-character,
.ldg1.is-artwork-focused .ldg1__album-character {
	filter: blur(4.2px) brightness(.86) saturate(.93) !important;
}

.ldg1.is-returning-from-artwork .ldg1__album-character {
	filter: none !important;
	transition-duration: 1650ms;
}

@media (max-width: 767px) {
	.ldg1.is-walking-to-artwork .ldg1__album-character,
	.ldg1.is-artwork-focused .ldg1__album-character {
		filter: blur(3.6px) brightness(.88) saturate(.94) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__album-character {
		transition-duration: 1ms !important;
	}
}

/* =========================================================
   V142 FINAL — PRECISE ALBUM HIT AREA + CALMER FRAME FOCUS

   The Album link still occupies the original 581 × 900 coordinate canvas so
   its top-corner lock, parallax and lower overhang remain exact. JavaScript now
   alpha-tests the cut-out artwork, so only visible character pixels activate.
   The cursor mirrors that exact hit result rather than implying the transparent
   canvas is clickable.

   Frame-walk sensitivity is handled in the V142 PHP controller. Tiny Magic
   Mouse/trackpad wheel noise is ignored; a deliberate wheel gesture or a click
   outside the focused artwork still walks the viewer back out naturally.
   ========================================================= */

.ldg1[data-ldg1-build="V142"] .ldg1__album-character {
	cursor: default !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character.is-album-hit-target,
.ldg1[data-ldg1-build="V142"] .ldg1__album-character:focus-visible {
	cursor: pointer !important;
}

.ldg1[data-ldg1-build="V142"] .ldg1__album-character.is-album-link-pending {
	cursor: wait !important;
}

/* =========================================================
   ROOM 4 STUDIO — INITIAL ENVIRONMENT INSTALL

   Source background:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Studio-Entrance-Background.jpg

   Locked design-coordinate system for Room 4 assets:
   X = 0–2354, Y = 0–1029, origin (0,0) = exact top-left of Room 4.
   The live JPEG and placement grid now use the same native 2354 × 1029 canvas.

   Room 4 intentionally contains no exhibits or interactive assets yet.
   The existing nine exhibits, HUD count, BIO/CV/Album characters, Frame 9
   age gate, playback and all V142 protection blocks remain unchanged.
   ========================================================= */


/* =========================================================
   V144 — ROOM 4 STUDIO NAVIGATION + COMPATIBILITY SAFETY

   Room 4 remains an environment rather than Exhibit 10. The PHP/JS adds
   its centre as the navigation stop after Frame 9. These rules make the
   studio settle reliably on touch/portrait browsers without changing the
   exact 2048 × 878 background coordinate mapping.
   ========================================================= */

.ldg1__room--four {
	background-color: #050403;
}

@media (max-width: 768px) and (orientation: portrait) {
	.ldg1__room--four {
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}
}

/* =========================================================
   V144 FINAL FAIL-SAFE — THEME-PROOF CV + ALBUM VISIBILITY

   The Gallery's accumulated protection stack intentionally remains scoped to
   data-ldg1-build="V142". V144 keeps that compatibility marker. These two
   small unversioned guards prevent WordPress/Themify button styling or a future
   release-label change from ever turning the CV character into a themed button
   or hiding the Album character canvas again.
   ========================================================= */

.ldg1 button.ldg1__cv-character[data-ldg1-cv-open],
.ldg1 button.ldg1__cv-character[data-ldg1-cv-open]:hover,
.ldg1 button.ldg1__cv-character[data-ldg1-cv-open]:focus,
.ldg1 button.ldg1__cv-character[data-ldg1-cv-open]:focus-visible,
.ldg1 button.ldg1__cv-character[data-ldg1-cv-open]:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	min-width: 0 !important;
	min-height: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.ldg1 .ldg1__room--three >
.ldg1__album-character[data-ldg1-album-character-coordinate-lock-v142] {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* =========================================================
   V146 — EXACT ROOM 3 → ROOM 4 IMAGE JOIN

   Purpose-built Room 4 background:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Studio-Entrance-Background.jpg

   Native source size: 2354 × 1029 px.
   The artwork itself now contains the intended visual continuation from the
   right edge of Room 3. Therefore the third boundary must be a true image
   edge, not the generic overlap/mask used between the repeated Gallery-1.jpg
   rooms.

   Rooms 1 → 2 and 2 → 3 retain their established seam feathering.
   Room 3 → 4:
   • no negative overlap;
   • no mask/crossfade;
   • no third seam-concealer;
   • no border, outline or shadow;
   • Room 4 remains fully opaque and uses the native 2354 × 1029 X/Y
     placement system for future assets.
   ========================================================= */

.ldg1 {
    --ldg1-studio-room-width: max(100vw, 228.765792vh);
    --ldg1-studio-room-width: max(100vw, 228.765792svh);
}

@supports (height: 100dvh) {
    .ldg1 {
        --ldg1-studio-room-width: max(100vw, 228.765792dvh);
    }
}

.ldg1 .ldg1__room--three + .ldg1__room--four {
    margin-left: 0 !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;

    border-left: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background-image: var(--ldg1-studio-background-image) !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;

    opacity: 1 !important;
}

/* The new artwork is the seam. Do not draw another seam on top of it. */
.ldg1 .ldg1__gallery-join-seam-concealer--three {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Keep portrait/touch Room 4 navigation behaviour from V144. */
@media (max-width: 768px) and (orientation: portrait) {
    .ldg1 .ldg1__room--four {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
}

/* =========================================================
   V147 — ROOM 4 BENCH ASSET

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Bench.webp

   New Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors read from the supplied placement screenshot:
   top-left  ≈ X 547,  Y 750
   top-right ≈ X 1807, Y 750

   Therefore:
   left  = 547 / 2354  = 23.237043%
   top   = 750 / 1029  = 72.886297%
   width = 1260 / 2354 = 53.525913%

   This is a standalone transparent image layer, NOT baked into the room
   background. It can therefore be moved, hidden, animated or interacted with
   independently later.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-bench {
	position: absolute;
	z-index: 6;
	left: 23.237043% !important;
	top: 72.886297% !important;
	display: block;
	width: 53.525913% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V148 — ROOM 4 RIGHT PLANT ASSET

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Right-Plant.webp

   Native asset: 300 × 513 px.
   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 1413, Y 366
   top-right ≈ X 1682, Y 366

   Target display width = 269px.
   Aspect ratio is preserved automatically.

   The plant is deliberately one layer behind the bench so the pot can sit
   naturally behind the foreground seating when the two assets overlap.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant {
	position: absolute;
	z-index: 5;
	left: 60.025489% !important;
	top: 35.568513% !important;
	display: block;
	width: 11.427358% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V149 — ROOM 4 LEFT PLANT ASSET

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Left-Palnt.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 663, Y 376
   top-right ≈ X 950, Y 376

   Target display width = 287px.
   Aspect ratio is preserved automatically.

   The plant is placed behind the bench, matching the right plant's layering.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant {
	position: absolute;
	z-index: 5;
	left: 28.164826% !important;
	top: 36.540330% !important;
	display: block;
	width: 12.192014% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V150 — ROOM 4 LEFT DOOR ASSET

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Left-door-NEW.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 995, Y 285
   top-right ≈ X 1177, Y 285

   Target display width = 182px.
   Aspect ratio is preserved automatically.

   The door is placed inside the central studio entrance opening and kept
   behind the foreground bench/plants so the later opening-door sequence can
   build on this placement cleanly.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-left-door {
	position: absolute;
	z-index: 4;
	left: 42.268479% !important;
	top: 27.696793% !important;
	display: block;
	width: 7.731521% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V151 — ROOM 4 RIGHT DOOR ASSET

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Right-door-NEW.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 1177, Y 285
   top-right ≈ X 1358, Y 285

   Target display width = 181px.
   Aspect ratio is preserved automatically.

   This is aligned intentionally with the left door:
   - same top Y (285)
   - same width family
   - the right door begins exactly where the left door ends, allowing the two
     leaves to meet cleanly in the centre for the future door-opening sequence.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-right-door {
	position: absolute;
	z-index: 4;
	left: 50.000000% !important;
	top: 27.696793% !important;
	display: block;
	width: 7.689040% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V152 — ROOM 4 RECORDING SIGN LOOP

   Real assets:
   OFF: https://www.simme.co.uk/wp-content/uploads/2026/08/Off.webp
   ON : https://www.simme.co.uk/wp-content/uploads/2026/08/On.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 1117, Y 109
   top-right ≈ X 1237, Y 109

   Target display width = 120px.

   Behaviour:
   - OFF image sits in front of ON image initially.
   - For the first 5 seconds: OFF visible, glow off.
   - For the next 5 seconds: OFF hidden, ON visible, red glow on.
   - Then the cycle repeats infinitely.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign {
	position: absolute;
	z-index: 9;
	left: 47.451147% !important;
	top: 10.592809% !important;
	display: block;
	width: 5.097706% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	contain: layout paint style;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-glow {
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	width: 150%;
	height: 180%;
	transform: translate(-50%, -52%);
	border-radius: 18px;
	background:
		radial-gradient(ellipse at center,
			rgba(255, 42, 42, 0.92) 0%,
			rgba(255, 38, 38, 0.68) 22%,
			rgba(225, 18, 18, 0.40) 44%,
			rgba(170, 0, 0, 0.16) 66%,
			rgba(120, 0, 0, 0.00) 100%);
	filter: blur(18px);
	opacity: 0;
	animation: ldg1-room4-recording-glow 10s linear infinite;
	pointer-events: none;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign img {
	position: relative;
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-on {
	z-index: 1;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-off {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	animation: ldg1-room4-recording-off 10s linear infinite;
}

@keyframes ldg1-room4-recording-off {
	0%, 49.999% {
		opacity: 1;
		visibility: visible;
	}
	50%, 100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes ldg1-room4-recording-glow {
	0%, 49.999% {
		opacity: 0;
	}
	50%, 100% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-off,
	.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-glow {
		animation: none !important;
	}

	/* Reduced-motion fallback: keep the OFF state visible and the glow off. */
	.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-off {
		opacity: 1 !important;
		visibility: visible !important;
	}

	.ldg1 .ldg1__room--four > .ldg1__room-four-recording-sign > .ldg1__room-four-recording-sign-glow {
		opacity: 0 !important;
	}
}

/* =========================================================
   V153 — ROOM 4 COMING SOON SIGN

   Real asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Coming-soon.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  ≈ X 1079, Y 479
   top-right ≈ X 1275, Y 479

   Target display width = 196px.
   Aspect ratio is preserved automatically.

   The sign sits on the central doorway, above the door leaves and below the
   animated recording sign.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-coming-soon {
	position: absolute;
	z-index: 8;
	left: 45.836873% !important;
	top: 46.550049% !important;
	display: block;
	width: 8.326253% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V154 — ROOM 4 COMING SOON SIGN NEON GLOW UPGRADE

   The Coming Soon sign keeps the same Room 4 placement from V153.
   This override makes the sign read clearly inside the dark doorway by
   adding a strong layered neon aura in blue and pink.

   Intent:
   • obvious, readable glow;
   • blue and pink both visible;
   • glow appears behind/around the sign, not as a position change.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-coming-soon {
	filter:
		drop-shadow(0 0 4px rgba(255,255,255,.22))
		drop-shadow(0 0 10px rgba(79, 228, 255, .98))
		drop-shadow(0 0 22px rgba(79, 228, 255, .92))
		drop-shadow(0 0 38px rgba(79, 228, 255, .78))
		drop-shadow(0 0 10px rgba(255, 64, 214, .98))
		drop-shadow(0 0 24px rgba(255, 64, 214, .90))
		drop-shadow(0 0 42px rgba(255, 64, 214, .72)) !important;
	animation: ldg1-room4-coming-soon-neon 3.8s ease-in-out infinite;
	will-change: filter, opacity;
}

@keyframes ldg1-room4-coming-soon-neon {
	0%,
	100% {
		filter:
			drop-shadow(0 0 4px rgba(255,255,255,.20))
			drop-shadow(-2px 0 10px rgba(79, 228, 255, .92))
			drop-shadow(-2px 0 20px rgba(79, 228, 255, .84))
			drop-shadow(-2px 0 34px rgba(79, 228, 255, .66))
			drop-shadow(2px 0 10px rgba(255, 64, 214, .92))
			drop-shadow(2px 0 22px rgba(255, 64, 214, .84))
			drop-shadow(2px 0 36px rgba(255, 64, 214, .66));
		opacity: .96;
	}
	50% {
		filter:
			drop-shadow(0 0 6px rgba(255,255,255,.28))
			drop-shadow(-2px 0 14px rgba(79, 228, 255, 1))
			drop-shadow(-2px 0 28px rgba(79, 228, 255, .96))
			drop-shadow(-2px 0 48px rgba(79, 228, 255, .84))
			drop-shadow(2px 0 14px rgba(255, 64, 214, 1))
			drop-shadow(2px 0 30px rgba(255, 64, 214, .96))
			drop-shadow(2px 0 52px rgba(255, 64, 214, .84));
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-coming-soon {
		animation: none !important;
		filter:
			drop-shadow(0 0 4px rgba(255,255,255,.20))
			drop-shadow(-2px 0 12px rgba(79, 228, 255, .96))
			drop-shadow(-2px 0 24px rgba(79, 228, 255, .86))
			drop-shadow(2px 0 12px rgba(255, 64, 214, .96))
			drop-shadow(2px 0 24px rgba(255, 64, 214, .86)) !important;
	}
}

/* =========================================================
   V155 — ROOM 4 COMING SOON SIGN GENTLE NEON FLICKER

   Replaces the stronger V154 neon bloom with a subtler, more believable
   neon treatment:
   • reduced glow strength;
   • gentle pulse;
   • slight intermittent flicker;
   • blue/pink still visible, but less overpowering.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-coming-soon {
	filter:
		drop-shadow(0 0 2px rgba(255,255,255,.14))
		drop-shadow(-1px 0 6px rgba(79, 228, 255, .72))
		drop-shadow(-1px 0 14px rgba(79, 228, 255, .50))
		drop-shadow(1px 0 6px rgba(255, 64, 214, .72))
		drop-shadow(1px 0 14px rgba(255, 64, 214, .50)) !important;
	animation: ldg1-room4-coming-soon-neon-soft 6.8s linear infinite;
	will-change: filter, opacity;
}

@keyframes ldg1-room4-coming-soon-neon-soft {
	0%,
	7%,
	14%,
	26%,
	39%,
	52%,
	66%,
	79%,
	92%,
	100% {
		filter:
			drop-shadow(0 0 2px rgba(255,255,255,.14))
			drop-shadow(-1px 0 6px rgba(79, 228, 255, .68))
			drop-shadow(-1px 0 13px rgba(79, 228, 255, .46))
			drop-shadow(1px 0 6px rgba(255, 64, 214, .68))
			drop-shadow(1px 0 13px rgba(255, 64, 214, .46));
		opacity: .95;
	}
	10%,
	33%,
	58%,
	84% {
		filter:
			drop-shadow(0 0 3px rgba(255,255,255,.18))
			drop-shadow(-1px 0 8px rgba(79, 228, 255, .82))
			drop-shadow(-1px 0 17px rgba(79, 228, 255, .58))
			drop-shadow(1px 0 8px rgba(255, 64, 214, .82))
			drop-shadow(1px 0 17px rgba(255, 64, 214, .58));
		opacity: 1;
	}
	18%,
	19.2%,
	60.2%,
	61.4%,
	86.2%,
	87.1% {
		filter:
			drop-shadow(0 0 1px rgba(255,255,255,.08))
			drop-shadow(-1px 0 3px rgba(79, 228, 255, .34))
			drop-shadow(-1px 0 8px rgba(79, 228, 255, .22))
			drop-shadow(1px 0 3px rgba(255, 64, 214, .34))
			drop-shadow(1px 0 8px rgba(255, 64, 214, .22));
		opacity: .88;
	}
	20.4%,
	21.2%,
	62.6%,
	63.3%,
	88.4%,
	89.0% {
		filter:
			drop-shadow(0 0 2px rgba(255,255,255,.16))
			drop-shadow(-1px 0 7px rgba(79, 228, 255, .76))
			drop-shadow(-1px 0 15px rgba(79, 228, 255, .54))
			drop-shadow(1px 0 7px rgba(255, 64, 214, .76))
			drop-shadow(1px 0 15px rgba(255, 64, 214, .54));
		opacity: .98;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-coming-soon {
		animation: none !important;
		filter:
			drop-shadow(0 0 2px rgba(255,255,255,.12))
			drop-shadow(-1px 0 6px rgba(79, 228, 255, .62))
			drop-shadow(-1px 0 12px rgba(79, 228, 255, .42))
			drop-shadow(1px 0 6px rgba(255, 64, 214, .62))
			drop-shadow(1px 0 12px rgba(255, 64, 214, .42)) !important;
		opacity: .96 !important;
	}
}

/* =========================================================
   V156 — PORTRAIT MOBILE ROOM 4 SNAP-TRAP FIX

   Symptom:
   some portrait phones could initialise / restore the horizontal viewport
   directly inside Studio Room 4 and mandatory snapping could then keep the
   visitor there, making Rooms 1–3 appear unavailable.

   Fix:
   • use proximity rather than mandatory snapping on portrait phones;
   • keep the nine exhibits as the actual snap areas;
   • remove Room 4 itself as a CSS snap magnet;
   • temporarily disable snapping while V156 establishes Exhibit 1 on startup;
   • keep the desktop/landscape gallery and JS Room 4 navigation unchanged.
   ========================================================= */

@media (max-width: 768px) and (orientation: portrait) {
	.ldg1 .ldg1__viewport {
		scroll-snap-type: x proximity !important;
		scroll-padding-inline: 50vw;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * Room 4 remains reachable by ordinary horizontal movement and by the
	 * Frame 9 Next control, but the very wide room itself is no longer a snap
	 * area that can capture the initial mobile scroll position.
	 */
	.ldg1 .ldg1__room--four {
		scroll-snap-align: none !important;
		scroll-snap-stop: normal !important;
	}

	/*
	 * The desktop continuous track is the production mobile track in the
	 * current gallery architecture. Reassert this at the end of the combined
	 * stylesheet so older portrait rules cannot win through cache/order issues.
	 */
	.ldg1 .ldg1__track--desktop {
		display: flex !important;
	}

	.ldg1 .ldg1__track--mobile,
	.ldg1 .ldg1__mobile-slide,
	.ldg1 .ldg1__mobile-exhibit {
		display: none !important;
	}

	/* Startup only: JS removes this class after Exhibit 1 is established. */
	.ldg1.is-mobile-starting-v156 .ldg1__viewport {
		scroll-snap-type: none !important;
		scroll-behavior: auto !important;
		overflow-x: auto !important;
	}
}

/* =========================================================
   V159 — ROOM 4 LORD D STATUE — REVISED PLACEMENT

   Real transparent asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Lord-D-Statue.webp

   Source canvas: 400 × 1406 px.
   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  = X 365, Y 259
   top-right = X 577, Y 259

   Target display width = 212px.

   The complete transparent canvas is preserved, including the floor
   reflection. The statue sits behind the foreground bench so the room keeps
   natural depth if the two assets overlap slightly.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-lord-d-statue {
	position: absolute;
	z-index: 5;
	left: 15.505523% !important;
	top: 25.170068% !important;
	display: block;
	width: 9.005947% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V160 — ROOM 4 LORD D STATUE 2

   Real transparent asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Lord-D-Statue-2.webp

   Room 4 coordinate reference: 2354 × 1029 px.

   Green-dot anchors from the supplied placement screenshot:
   top-left  = X 1764, Y 259
   top-right = X 1983, Y 259

   Target display width = 219px.

   This is a second independent transparent statue layer. Statue 1 remains
   exactly at its V159 placement. Both statues share the same room-depth layer.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-lord-d-statue-2 {
	position: absolute;
	z-index: 5;
	left: 74.936279% !important;
	top: 25.170068% !important;
	display: block;
	width: 9.303314% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =========================================================
   V161 — ROOM 4 LEFT-PLANT WARM GLOW

   A soft warm amber/orange uplight placed behind the left plant.
   The supplied pink dot is treated as the light-source origin
   on the locked 2354 × 1029 Room 4 grid.

   Anchor point:
   X = 823
   Y = 690

   The element is intentionally kept as a real CSS glow layer so it can be
   tuned later without changing the background image.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow {
	position: absolute;
	z-index: 2;
	left: 34.961767% !important;
	top: 67.055394% !important;
	width: 10.705183% !important;   /* ≈ 252px on the 2354 grid */
	height: 31.098154% !important;  /* ≈ 320px on the 1029 grid */
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	pointer-events: none;
	transform: translate(-50%, -100%);
	opacity: 0.92;
	mix-blend-mode: screen;
	filter: blur(10px);
	background:
		radial-gradient(ellipse at 50% 100%,
			rgba(255, 236, 170, 0.90) 0%,
			rgba(255, 197, 92, 0.78) 12%,
			rgba(255, 153, 56, 0.58) 28%,
			rgba(245, 117, 32, 0.34) 45%,
			rgba(199, 82, 15, 0.16) 62%,
			rgba(140, 45, 0, 0.00) 86%),
		linear-gradient(to top,
			rgba(255, 190, 86, 0.38) 0%,
			rgba(255, 160, 62, 0.20) 24%,
			rgba(255, 132, 39, 0.10) 45%,
			rgba(255, 118, 22, 0.00) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow {
		filter: blur(10px);
	}
}

/* =========================================================
   V162 — ROOM 4 RIGHT-PLANT WARM GLOW

   A soft warm amber/orange uplight placed behind the right plant.
   The supplied pink dot is treated as the light-source origin
   on the locked 2354 × 1029 Room 4 grid.

   Anchor point:
   X = 1499
   Y = 689

   The element is intentionally kept as a real CSS glow layer so it can be
   tuned later without changing the background image.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
	position: absolute;
	z-index: 2;
	left: 63.678845% !important;
	top: 66.958212% !important;
	width: 10.705183% !important;   /* ≈ 252px on the 2354 grid */
	height: 31.098154% !important;  /* ≈ 320px on the 1029 grid */
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	pointer-events: none;
	transform: translate(-50%, -100%);
	opacity: 0.92;
	mix-blend-mode: screen;
	filter: blur(10px);
	background:
		radial-gradient(ellipse at 50% 100%,
			rgba(255, 236, 170, 0.90) 0%,
			rgba(255, 197, 92, 0.78) 12%,
			rgba(255, 153, 56, 0.58) 28%,
			rgba(245, 117, 32, 0.34) 45%,
			rgba(199, 82, 15, 0.16) 62%,
			rgba(140, 45, 0, 0.00) 86%),
		linear-gradient(to top,
			rgba(255, 190, 86, 0.38) 0%,
			rgba(255, 160, 62, 0.20) 24%,
			rgba(255, 132, 39, 0.10) 45%,
			rgba(255, 118, 22, 0.00) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
		filter: blur(10px);
	}
}

/* =========================================================
   V163 — ROOM 4 PLANT GLOWS ANIMATED

   Enhances both plant uplights so they are visibly alive but still elegant:
   • gentle pulse;
   • subtle warm colour drift;
   • slight independent timing offset between left and right sides.

   Existing positions and layers are preserved.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow,
.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
	opacity: 0.88;
	filter: blur(10px);
	will-change: opacity, filter, transform, background;
	animation: ldg1-room4-plant-glow-gentle 8.6s ease-in-out infinite;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
	animation-delay: 1.9s;
}

@keyframes ldg1-room4-plant-glow-gentle {
	0%,
	100% {
		opacity: 0.78;
		filter: blur(10px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 236, 170, 0.82) 0%,
				rgba(255, 198, 92, 0.70) 12%,
				rgba(255, 154, 56, 0.48) 28%,
				rgba(242, 118, 34, 0.28) 45%,
				rgba(186, 78, 18, 0.13) 62%,
				rgba(140, 45, 0, 0.00) 86%),
			linear-gradient(to top,
				rgba(255, 191, 86, 0.28) 0%,
				rgba(255, 160, 62, 0.16) 24%,
				rgba(255, 132, 39, 0.08) 45%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	24% {
		opacity: 0.94;
		filter: blur(11px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 242, 181, 0.90) 0%,
				rgba(255, 209, 106, 0.78) 12%,
				rgba(255, 170, 70, 0.56) 28%,
				rgba(248, 126, 41, 0.34) 45%,
				rgba(196, 88, 25, 0.15) 62%,
				rgba(140, 45, 0, 0.00) 86%),
			linear-gradient(to top,
				rgba(255, 204, 103, 0.36) 0%,
				rgba(255, 172, 72, 0.22) 24%,
				rgba(255, 141, 49, 0.12) 45%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	50% {
		opacity: 0.90;
		filter: blur(10px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 228, 176, 0.84) 0%,
				rgba(255, 188, 118, 0.72) 12%,
				rgba(255, 151, 101, 0.52) 28%,
				rgba(242, 120, 72, 0.32) 45%,
				rgba(188, 82, 44, 0.14) 62%,
				rgba(140, 45, 0, 0.00) 86%),
			linear-gradient(to top,
				rgba(255, 186, 122, 0.32) 0%,
				rgba(255, 152, 95, 0.19) 24%,
				rgba(255, 130, 100, 0.10) 45%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	74% {
		opacity: 0.96;
		filter: blur(12px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 235, 184, 0.92) 0%,
				rgba(255, 200, 110, 0.80) 12%,
				rgba(255, 161, 78, 0.58) 28%,
				rgba(245, 121, 48, 0.36) 45%,
				rgba(198, 92, 28, 0.16) 62%,
				rgba(140, 45, 0, 0.00) 86%),
			linear-gradient(to top,
				rgba(255, 200, 97, 0.38) 0%,
				rgba(255, 167, 68, 0.24) 24%,
				rgba(255, 138, 50, 0.13) 45%,
				rgba(255, 118, 22, 0.00) 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow,
	.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
		animation: none !important;
		opacity: 0.90;
		filter: blur(10px);
	}
}

/* =========================================================
   V164 — ROOM 4 PLANT GLOWS SMOOTH COLOUR TRANSITION

   Refines the V163 plant-light animation so the colour movement feels
   fluid and continuous rather than stepping between states.

   Intent:
   • smoother drift between warm amber / gold / peach;
   • softer opacity movement;
   • elegant continuous transition;
   • preserve all existing positions and layering.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow,
.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
	opacity: 0.88;
	filter: blur(10px);
	will-change: opacity, filter, background;
	animation: ldg1-room4-plant-glow-smooth 10.5s ease-in-out infinite !important;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
	animation-delay: 2.2s !important;
}

@keyframes ldg1-room4-plant-glow-smooth {
	0%,
	100% {
		opacity: 0.80;
		filter: blur(10px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 234, 176, 0.84) 0%,
				rgba(255, 198, 96, 0.72) 12%,
				rgba(255, 157, 62, 0.50) 28%,
				rgba(243, 119, 38, 0.30) 46%,
				rgba(190, 80, 18, 0.13) 64%,
				rgba(140, 45, 0, 0.00) 88%),
			linear-gradient(to top,
				rgba(255, 192, 88, 0.30) 0%,
				rgba(255, 161, 64, 0.17) 25%,
				rgba(255, 135, 42, 0.08) 48%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	20% {
		opacity: 0.87;
		filter: blur(10.5px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 239, 182, 0.88) 0%,
				rgba(255, 205, 104, 0.76) 12%,
				rgba(255, 166, 72, 0.55) 28%,
				rgba(246, 124, 45, 0.34) 46%,
				rgba(195, 86, 23, 0.14) 64%,
				rgba(140, 45, 0, 0.00) 88%),
			linear-gradient(to top,
				rgba(255, 198, 96, 0.33) 0%,
				rgba(255, 169, 70, 0.20) 25%,
				rgba(255, 141, 49, 0.10) 48%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	40% {
		opacity: 0.92;
		filter: blur(11px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 242, 188, 0.91) 0%,
				rgba(255, 211, 118, 0.79) 12%,
				rgba(255, 177, 88, 0.58) 28%,
				rgba(248, 132, 56, 0.36) 46%,
				rgba(198, 92, 30, 0.15) 64%,
				rgba(140, 45, 0, 0.00) 88%),
			linear-gradient(to top,
				rgba(255, 203, 104, 0.36) 0%,
				rgba(255, 176, 81, 0.22) 25%,
				rgba(255, 150, 62, 0.11) 48%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	60% {
		opacity: 0.90;
		filter: blur(11px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 235, 190, 0.90) 0%,
				rgba(255, 199, 128, 0.78) 12%,
				rgba(255, 165, 101, 0.57) 28%,
				rgba(244, 129, 76, 0.35) 46%,
				rgba(194, 90, 47, 0.15) 64%,
				rgba(140, 45, 0, 0.00) 88%),
			linear-gradient(to top,
				rgba(255, 192, 118, 0.35) 0%,
				rgba(255, 163, 96, 0.21) 25%,
				rgba(255, 141, 101, 0.10) 48%,
				rgba(255, 118, 22, 0.00) 100%);
	}
	80% {
		opacity: 0.85;
		filter: blur(10.5px);
		background:
			radial-gradient(ellipse at 50% 100%,
				rgba(255, 231, 182, 0.86) 0%,
				rgba(255, 194, 109, 0.75) 12%,
				rgba(255, 159, 80, 0.53) 28%,
				rgba(243, 123, 52, 0.32) 46%,
				rgba(192, 86, 28, 0.14) 64%,
				rgba(140, 45, 0, 0.00) 88%),
			linear-gradient(to top,
				rgba(255, 194, 97, 0.32) 0%,
				rgba(255, 166, 72, 0.19) 25%,
				rgba(255, 141, 52, 0.09) 48%,
				rgba(255, 118, 22, 0.00) 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ldg1 .ldg1__room--four > .ldg1__room-four-left-plant-glow,
	.ldg1 .ldg1__room--four > .ldg1__room-four-right-plant-glow {
		animation: none !important;
		opacity: 0.88;
		filter: blur(10px);
	}
}

/* =========================================================
   V165 — ROOM 4 LEFT / RIGHT BLACK COVER PANELS

   Asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Black-Cover.webp

   The same image is placed twice:
   • left wall recess;
   • right wall recess.

   Grid reference: 2354 × 1029 px.
   Left cover:
   top-left X = 306, Y = 290, width = 415px
   Right cover:
   top-left X = 1642, Y = 290, width = 415px

   Both panels sit behind all other Room 4 assets.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover {
	position: absolute;
	z-index: 1;
	top: 28.182702% !important;
	display: block;
	width: 17.629567% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	object-fit: contain;
	object-position: left top;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--left {
	left: 12.999150% !important;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--right {
	left: 69.753611% !important;
}

/* =========================================================
   V166 — ROOM 4 LEFT BLACK COVER CORRECTION

   Asset updated:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Black-Cover.webp

   LEFT black cover corrected from the supplied green-dot reference:
   top-left X = 223, Y = 249
   top-right X = 690, Y = 249
   width = 467px

   RIGHT black cover is intentionally left at its previous placement for now.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--left {
	left: 9.473237% !important;
	top: 24.198251% !important;
	width: 19.838573% !important;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--right {
	left: 69.753611% !important;
	top: 24.198251% !important;
	width: 17.629567% !important;
}

/* =========================================================
   V167 — ROOM 4 RIGHT BLACK COVER CORRECTION

   Asset:
   https://www.simme.co.uk/wp-content/uploads/2026/08/Black-Cover.webp

   LEFT black cover preserved:
   top-left X = 223, Y = 249
   width = 467px

   RIGHT black cover corrected:
   top-left X = 1664, Y = 249
   width = 467px

   Both black covers are now matched in size and alignment.
   ========================================================= */

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--left {
	left: 9.473237% !important;
	top: 24.198251% !important;
	width: 19.838573% !important;
}

.ldg1 .ldg1__room--four > .ldg1__room-four-black-cover--right {
	left: 70.688190% !important;
	top: 24.198251% !important;
	width: 19.838573% !important;
}

/* =========================================================
   V168 — ROOM 4 STUDIO-DOOR PROXIMITY AMBIENCE

   No CSS visual changes are required for V168.

   The full V167 visual baseline remains intact. V168 is implemented in the
   Gallery PHP/embedded JavaScript and adds Studio-Doors-2.mp3 as a hidden,
   looping environmental source whose volume follows the viewer's horizontal
   distance from the locked centre of the Room 4 double doors.
   ========================================================= */


/* =========================================================
   V169 — WHO AM I EP TRACK 6: SLIDE

   EP-only update:
   - Six-card track list.
   - Six precisely aligned ticket hotspots for Right-side-of-ticket-2.webp.
   - No Gallery One / Room 4 / V168 visual or operational rules changed.
   ========================================================= */

/* =========================================================
   V169 — GALLERY AUDIO LOOP + PROACTIVE ASSET PRELOAD

   Gallery-only operational update. No visual placement CSS changed.
   The latest user-supplied EP V14 / six-track CSS above is preserved.

   PHP/embedded JavaScript now:
   - prebuffers Studio-Doors-2.mp3 from page load;
   - keeps native loop plus explicit ended/pause recovery;
   - restores studio playback after tab/browser suspension;
   - begins the proximity fade earlier on the Room 3 approach;
   - eagerly queues exhibit artwork at controlled fetch priorities;
   - starts critical Room 4 background/door assets early;
   - proactively warms remaining Room 4 images before arrival.
   ========================================================= */


/* =========================================================