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

body {
    margin: 0;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 650px;
    padding: 0;
    overflow: hidden;
}

/* CONTENEDOR PRINCIPAL */
.player {
    width: 100%;
    max-width: 1050px;
    min-height: 560px;
    background: linear-gradient(145deg, rgba(0, 12, 30, 0.90), rgba(0, 30, 60, 0.80));
    border-radius: 34px;
    padding: 45px;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 42px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.50),
        0 0 30px rgba(0, 195, 255, 0.10);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 195, 255, 0.15);
    backdrop-filter: blur(15px);
    z-index: 1;
}

/* CAPA DE IMAGEN DE FONDO */
.player::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0.20;
    z-index: -2;
    pointer-events: none;
    transition: background-image 1.5s ease-in-out;
}

.player::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 45%, rgba(0, 217, 255, 0.14), transparent 38%),
        radial-gradient(circle at 22% 78%, rgba(255, 0, 190, 0.12), transparent 40%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 10, 28, 0.34));
    z-index: -1;
    pointer-events: none;
}

.player > * {
    position: relative;
    z-index: 2;
}

/* TÍTULO */
.title {
    font-family: 'Orbitron', sans-serif;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #00c3ff, #ffffff, #00c3ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 25px rgba(0, 195, 255, 0.30);
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    display: inline-block;
    padding-bottom: 10px;
}

/* TARJETAS */
.card {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 20px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #e0f7fa;
    transition: all 0.28s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.card:hover {
    background: rgba(0, 195, 255, 0.08);
    border: 1px solid rgba(0, 195, 255, 0.30);
    transform: translateX(8px);
    box-shadow: -10px 0 20px rgba(0, 195, 255, 0.10);
}

#song {
    font-weight: 700;
    color: #00d9ff;
    text-shadow: 0 0 15px rgba(0, 217, 255, 0.40);
    width: 100%;
}

/* CONTROLES */
.controls {
    margin-top: 35px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.play-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 25%),
        linear-gradient(135deg, #0077b6, #00b4d8);
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.30),
        0 0 25px rgba(0, 180, 216, 0.18);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 30px rgba(0, 180, 216, 0.60);
}

.play-btn:disabled {
    cursor: wait;
    opacity: 0.7;
}

/* VOLUMEN */
#volume {
    -webkit-appearance: none;
    width: 130px;
    height: 6px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    outline: none;
}

#volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: #00c3ff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 195, 255, 0.80);
}

/* VISUALIZADOR RETRO FUTURISTA */
.visualizer-side {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.visualizer-shell {
    width: 100%;
    max-width: 390px;
    min-height: 360px;
    padding: 18px;
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(3, 7, 18, 0.86), rgba(0, 16, 36, 0.76)),
        radial-gradient(circle at top, rgba(0, 217, 255, 0.12), transparent 45%);
    border: 1px solid rgba(0, 217, 255, 0.22);
    box-shadow:
        inset 0 0 35px rgba(0, 217, 255, 0.06),
        0 0 45px rgba(0, 195, 255, 0.12),
        0 30px 70px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}

.visualizer-shell::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        conic-gradient(
            from 120deg,
            transparent,
            rgba(255, 0, 200, 0.14),
            rgba(110, 70, 255, 0.12),
            rgba(0, 220, 255, 0.14),
            rgba(60, 255, 140, 0.12),
            rgba(255, 235, 70, 0.12),
            rgba(255, 120, 30, 0.10),
            rgba(255, 50, 50, 0.12),
            transparent
        );
    opacity: 0.90;
    animation: visualizerAura 9s linear infinite;
    pointer-events: none;
}

@keyframes visualizerAura {
    to {
        transform: rotate(360deg);
    }
}

.visualizer-header,
.visualizer-footer {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.visualizer-header {
    padding: 4px 4px 14px;
    color: #baf6ff;
    font-size: 0.72rem;
}

.visualizer-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff2bd6;
    box-shadow:
        0 0 10px rgba(255, 43, 214, 0.85),
        0 0 22px rgba(255, 43, 214, 0.45);
    animation: ledPulse 1.4s ease-in-out infinite;
}

.visualizer-shell.is-live .visualizer-led {
    background: #00ff95;
    box-shadow:
        0 0 10px rgba(0, 255, 149, 0.85),
        0 0 22px rgba(0, 255, 149, 0.45);
}

@keyframes ledPulse {
    50% {
        transform: scale(1.35);
        opacity: 0.72;
    }
}

.visualizer-screen {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 260px;
    border-radius: 22px;
    overflow: hidden;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 15% 25%, rgba(255, 0, 200, 0.10), transparent 28%),
        radial-gradient(circle at 35% 20%, rgba(70, 90, 255, 0.10), transparent 30%),
        radial-gradient(circle at 50% 22%, rgba(0, 220, 255, 0.10), transparent 30%),
        radial-gradient(circle at 68% 20%, rgba(60, 255, 140, 0.10), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(255, 235, 70, 0.10), transparent 28%),
        linear-gradient(to top, rgba(0, 0, 0, 0.18), transparent 40%),
        rgba(2, 6, 18, 0.90);
    background-size:
        100% 18px,
        18px 100%,
        auto,
        auto,
        auto,
        auto,
        auto,
        auto,
        auto;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(0, 217, 255, 0.08);
}

.visualizer-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
    pointer-events: none;
}

.visualizer-scanline {
    position: absolute;
    inset: 0;
    z-index: 4;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.035) 0,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 2px,
            transparent 5px
        );
    pointer-events: none;
    mix-blend-mode: screen;
}

.visualizer-glow {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        radial-gradient(circle at 12% 70%, rgba(255, 0, 200, 0.12), transparent 26%),
        radial-gradient(circle at 30% 72%, rgba(70, 90, 255, 0.10), transparent 28%),
        radial-gradient(circle at 48% 74%, rgba(0, 220, 255, 0.12), transparent 28%),
        radial-gradient(circle at 66% 75%, rgba(60, 255, 140, 0.10), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(255, 235, 70, 0.10), transparent 24%),
        linear-gradient(to top, rgba(0, 0, 0, 0.14), transparent 36%);
    pointer-events: none;
}

.visualizer-footer {
    padding: 14px 4px 2px;
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.68rem;
}

.visualizer-footer strong {
    color: #00d9ff;
    text-shadow: 0 0 14px rgba(0, 217, 255, 0.45);
}

/* BARRA DE PROGRESO */
.progress-container {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    margin: 12px 0 5px 0;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: block;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #0077b6, #00c3ff);
    box-shadow: 0 0 15px rgba(0, 195, 255, 0.60);
    transition: width 1s linear;
}

.time-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #90e0ef;
    font-family: 'Orbitron', sans-serif;
}

/* RESPONSIVO */
@media(max-width: 850px) {
    body {
        min-height: 720px;
    }

    .player {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 30px;
        margin: 20px;
        gap: 30px;
    }

    .title {
        font-size: 26px;
    }

    .controls {
        justify-content: center;
    }

    .card:hover {
        transform: translateY(-5px);
    }

    .visualizer-shell {
        max-width: 100%;
    }
}

/* TARJETA DJ / STAFF EN VIVO */
.dj-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.dj-card.is-live {
    border-color: rgba(0, 255, 149, 0.34);
    box-shadow:
        inset 0 0 22px rgba(0, 255, 149, 0.05),
        0 0 26px rgba(0, 255, 149, 0.10);
}

.dj-avatar {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(0, 217, 255, 0.22), transparent 64%),
        rgba(2, 6, 23, 0.86);
    border: 1px solid rgba(0, 217, 255, 0.28);
    box-shadow:
        inset 0 0 18px rgba(0, 217, 255, 0.08),
        0 0 18px rgba(0, 217, 255, 0.12);
}

.dj-card.is-live .dj-avatar {
    border-color: rgba(0, 255, 149, 0.45);
    box-shadow:
        inset 0 0 18px rgba(0, 255, 149, 0.10),
        0 0 22px rgba(0, 255, 149, 0.16);
}

.dj-avatar img {
    width: 100%;
    height: 100%;
    display: none;
    object-fit: cover;
}

.dj-avatar.has-image img {
    display: block;
}

.dj-avatar.has-image span {
    display: none;
}

.dj-avatar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    line-height: 1;
}

.dj-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dj-info span {
    color: #90e0ef;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Orbitron', sans-serif;
}

.dj-info strong {
    color: #f8fafc;
    font-size: 1rem;
    line-height: 1.2;
    text-shadow: 0 0 14px rgba(0, 217, 255, 0.18);
}

.dj-info small {
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.78rem;
}

.dj-info a {
    width: fit-content;
    margin-top: 4px;
    color: #67e8f9;
    font-size: 0.78rem;
    text-decoration: none;
    display: none;
}

.dj-info a:hover {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(103, 232, 249, 0.55);
}

.dj-info a.show {
    display: inline-flex;
}