/*
 * Dezirez global gold-and-black visual system.
 * Buttons receive a gold aura.
 * Logos receive a controlled gold glow.
 * Jukebox controls are consolidated into one live panel.
 */

:root {
    --dz-gold-light: #fff1a6;
    --dz-gold-main: #e6b63f;
    --dz-gold-deep: #9c6510;
    --dz-gold-border: #ffe58c;
    --dz-button-black: #080604;
    --dz-gold-glow:
        0 0 5px rgba(255, 232, 143, 0.95),
        0 0 13px rgba(231, 175, 49, 0.88),
        0 0 25px rgba(205, 125, 16, 0.55);
}

/*
 * Actual buttons and button-like navigation elements.
 * Ordinary text links are deliberately not changed.
 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
.btn,
.button,
.cta,
.cta-button,
.action-button,
.primary-button,
.secondary-button,
.control-button,
.mobile-button,
.top-button,
.back-link,
.nav-button,
.nav-btn,
.nav-link,
.game-button,
.play-button,
.card-button,
a[class*="button"],
a[class*="btn"] {
    color: var(--dz-button-black) !important;
    background:
        linear-gradient(
            180deg,
            var(--dz-gold-light) 0%,
            var(--dz-gold-main) 47%,
            var(--dz-gold-deep) 100%
        ) !important;
    border:
        1px solid
        var(--dz-gold-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -2px 4px rgba(82, 42, 0, 0.42),
        var(--dz-gold-glow) !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.38) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        box-shadow 0.15s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
[role="button"]:hover,
.btn:hover,
.button:hover,
.cta:hover,
.cta-button:hover,
.action-button:hover,
.primary-button:hover,
.secondary-button:hover,
.control-button:hover,
.mobile-button:hover,
.top-button:hover,
.back-link:hover,
.nav-button:hover,
.nav-btn:hover,
.nav-link:hover,
.game-button:hover,
.play-button:hover,
.card-button:hover,
a[class*="button"]:hover,
a[class*="btn"]:hover {
    color: #000000 !important;
    filter:
        brightness(1.14)
        saturate(1.08) !important;
    transform:
        translateY(-1px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -2px 4px rgba(82, 42, 0, 0.44),
        0 0 7px rgba(255, 241, 166, 1),
        0 0 18px rgba(231, 175, 49, 0.96),
        0 0 34px rgba(205, 125, 16, 0.70) !important;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
[role="button"]:active,
.btn:active,
.button:active,
.cta:active,
.action-button:active,
.control-button:active,
.mobile-button:active,
.top-button:active,
.back-link:active,
.nav-button:active,
.nav-btn:active,
.nav-link:active,
.game-button:active,
.play-button:active,
.card-button:active {
    transform:
        translateY(1px) scale(0.99) !important;
    filter:
        brightness(0.95) !important;
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.button:focus-visible,
a[class*="button"]:focus-visible,
a[class*="btn"]:focus-visible {
    outline:
        3px solid #ffffff !important;
    outline-offset:
        3px !important;
}

/*
 * Disabled controls remain visibly disabled.
 */
button:disabled,
input:disabled,
[aria-disabled="true"] {
    filter:
        grayscale(0.72)
        brightness(0.72) !important;
    cursor:
        not-allowed !important;
    opacity:
        0.66 !important;
    transform:
        none !important;
}

/*
 * Keep clearly destructive actions red so users
 * do not accidentally mistake them for normal navigation.
 */
.danger,
.danger-button,
.delete-button,
.remove-button,
.destructive,
button[name*="delete" i],
button[name*="remove" i],
button[data-action*="delete" i],
button[data-action*="remove" i] {
    color: #ffffff !important;
    background:
        linear-gradient(
            180deg,
            #ff7b88,
            #b51e32
        ) !important;
    border-color:
        #ffb3ba !important;
    box-shadow:
        0 0 7px rgba(255, 105, 120, 0.78),
        0 0 18px rgba(181, 30, 50, 0.50) !important;
}

/*
 * Dezirez logo aura.
 */
img[src*="dzlogo" i],
img[src*="dezirez" i][class*="logo" i],
.logo img,
.site-logo img,
.brand-logo img,
img.logo,
#logo img,
#siteLogo,
#dzLogo {
    filter:
        drop-shadow(0 0 4px rgba(255, 246, 186, 1))
        drop-shadow(0 0 10px rgba(240, 188, 63, 0.95))
        drop-shadow(0 0 23px rgba(186, 103, 10, 0.78))
        drop-shadow(0 7px 12px rgba(0, 0, 0, 0.70)) !important;
}

/*
 * Unified jukebox.
 */
.dz-jukebox-unified {
    position:
        relative !important;
    isolation:
        isolate !important;
    overflow:
        visible !important;
    filter:
        drop-shadow(0 0 7px rgba(255, 223, 116, 0.88))
        drop-shadow(0 0 20px rgba(190, 98, 9, 0.58)) !important;
}

/*
 * Hide native browser audio controls. The custom jukebox
 * panel remains responsible for playback.
 */
.dz-jukebox-unified audio {
    position:
        absolute !important;
    width:
        1px !important;
    height:
        1px !important;
    opacity:
        0 !important;
    pointer-events:
        none !important;
}

/*
 * Hide decorative duplicate control wrappers detected
 * by JavaScript. The selected working control group remains.
 */
.dz-jukebox-decorative-controls {
    display:
        none !important;
}

/*
 * One live control panel positioned over the jukebox's
 * decorative control area.
 */
.dz-jukebox-live-controls {
    position:
        absolute !important;
    z-index:
        30 !important;
    left:
        50% !important;
    bottom:
        5.5% !important;
    width:
        min(68%, 280px) !important;
    min-height:
        42px !important;
    transform:
        translateX(-50%) !important;
    display:
        flex !important;
    align-items:
        center !important;
    justify-content:
        center !important;
    flex-wrap:
        wrap !important;
    gap:
        5px !important;
    padding:
        6px 8px !important;
    border:
        2px solid #f4c955 !important;
    border-radius:
        12px !important;
    color:
        #ffe894 !important;
    background:
        linear-gradient(
            180deg,
            rgba(38, 20, 3, 0.98),
            rgba(3, 2, 1, 0.98)
        ) !important;
    box-shadow:
        inset 0 0 11px rgba(239, 178, 47, 0.34),
        0 0 6px rgba(255, 236, 148, 0.95),
        0 0 17px rgba(219, 139, 24, 0.80) !important;
    backdrop-filter:
        blur(3px) !important;
    -webkit-backdrop-filter:
        blur(3px) !important;
}

.dz-jukebox-live-controls button,
.dz-jukebox-live-controls [role="button"] {
    min-width:
        30px !important;
    min-height:
        29px !important;
    padding:
        4px 7px !important;
    margin:
        0 !important;
    border-radius:
        7px !important;
    font-size:
        13px !important;
    line-height:
        1 !important;
}

.dz-jukebox-live-controls input[type="range"] {
    width:
        72px !important;
    max-width:
        28% !important;
    accent-color:
        #e6b63f !important;
}

.dz-jukebox-live-controls select {
    max-width:
        110px !important;
    color:
        #000000 !important;
    background:
        #e6b63f !important;
    border:
        1px solid #ffe58c !important;
}

/*
 * Preserve the jukebox song-title screen above the controls.
 */
.dz-jukebox-unified
:is(
    [id*="title" i],
    [class*="title" i],
    [id*="track" i],
    [class*="track" i],
    [id*="now-playing" i],
    [class*="now-playing" i],
    [id*="display" i],
    [class*="display" i],
    [id*="screen" i],
    [class*="screen" i]
) {
    position:
        relative;
    z-index:
        35 !important;
}

/*
 * Do not place the panel absolutely on small jukeboxes.
 */
@media (max-width: 600px) {
    .dz-jukebox-live-controls {
        bottom:
            4.5% !important;
        width:
            72% !important;
        min-height:
            37px !important;
        padding:
            4px 5px !important;
    }

    .dz-jukebox-live-controls button,
    .dz-jukebox-live-controls [role="button"] {
        min-width:
            27px !important;
        min-height:
            26px !important;
        padding:
            3px 5px !important;
        font-size:
            11px !important;
    }
}