:root{
    --bg1:#070012;
    --bg2:#14002e;
    --neon1:#ff2bd6;
    --neon2:#4d5bff;
    --neon3:#00f5ff;
    --text:#ffffff;
}

/* =========================
   BASE
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body.music-theme{
    min-height:100svh;
    font-family:system-ui, Arial, sans-serif;
    color:var(--text);
    background: radial-gradient(circle at top, var(--bg2), var(--bg1) 70%);
    overflow-x:hidden;
    position:relative;
}

/* =========================
   FLOATING PARTICLES
========================= */

.particles{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1;
}

.particles span{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,0.6);
    box-shadow:0 0 12px var(--neon3);
    animation:floatParticle linear infinite;
}

@keyframes floatParticle{
    from{
        transform:translateY(100vh);
    }
    to{
        transform:translateY(-10vh);
    }
}

/* =========================
   APP
========================= */

.app{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:14px;
}

/* =========================
   POSTER
========================= */

.poster-section{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.poster-wrapper{
    width:min(440px, 92vw);
    height:min(74vh, 100%);
    border-radius:26px;
    overflow:hidden;
    position:relative;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.7),
        0 0 80px rgba(255,43,214,0.25);

    animation:posterIn 0.6s ease-out;
    will-change:transform;
}

/* image */
.poster-img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.02);
}

/* =========================
   EQUALIZER
========================= */

.equalizer{
    position:absolute;
    bottom:14px;
    left:14px;
    display:flex;
    gap:4px;
    height:28px;
    align-items:flex-end;
    z-index:3;
}

.equalizer span{
    width:4px;
    height:10px;
    background:linear-gradient(var(--neon1), var(--neon2));
    border-radius:4px;
    animation:equalize 1s infinite ease-in-out;
}

.equalizer span:nth-child(2){ animation-delay:0.1s; }
.equalizer span:nth-child(3){ animation-delay:0.2s; }
.equalizer span:nth-child(4){ animation-delay:0.3s; }
.equalizer span:nth-child(5){ animation-delay:0.4s; }

@keyframes equalize{
    0%,100%{ height:8px; }
    50%{ height:28px; }
}

/* =========================
   CTA
========================= */

.cta-section{
    display:flex;
    justify-content:center;
    padding:12px;
}

.cta-btn{
    width:min(440px, 92vw);
    padding:16px 18px;
    border-radius:999px;

    font-size:1.05rem;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    color:#fff;

    background:linear-gradient(135deg,var(--neon1),var(--neon2));
    box-shadow:0 15px 40px rgba(255,43,214,0.35);

    transition:all 0.3s ease;
}

.cta-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 60px rgba(255,43,214,0.55);
}

.cta-btn.disabled{
    background:#444;
    opacity:0.6;
    pointer-events:none;
}

/* =========================
   FOOTER
========================= */

.music-footer{
    text-align:center;
    padding:14px;
    background:rgba(10,0,20,0.55);
    backdrop-filter:blur(12px);
}

.music-footer p{
    margin:4px 0;
    opacity:0.85;
}

.music-footer a{
    color:var(--neon3);
    text-decoration:none;
}

/* =========================
   ANIMATION
========================= */

@keyframes posterIn{
    from{
        opacity:0;
        transform:scale(0.92);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width:480px){
    .poster-wrapper{
        border-radius:18px;
    }
}