:root{
    --bg:#0b0d14;
    --card:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.08);
    --text:#ffffff;
    --muted:#b7c0cf;
    --gold:#d4af37;
}

/* Grundsystem */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-tap-highlight-color:transparent;
}

html{
    background:#0b0d14;
}

body{
    min-height:100dvh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    color:var(--text);

    background:
        radial-gradient(circle at 15% 20%,rgba(88,166,255,.18),transparent 35%),
        radial-gradient(circle at 85% 15%,rgba(140,82,255,.15),transparent 35%),
        radial-gradient(circle at 50% 85%,rgba(0,212,170,.12),transparent 40%),
        linear-gradient(180deg,#1b2050,#0b0d14);
}


/* Hintergrund Animation */

.glow{
    position:fixed;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(90px);
    z-index:-1;
    animation:float 8s ease-in-out infinite;
}

.glow.one{
    top:-150px;
    right:-120px;
    background:rgba(88,166,255,.15);
}

.glow.two{
    bottom:-160px;
    left:-120px;
    background:rgba(212,175,55,.12);
    animation-delay:3s;
}

@keyframes float{
    50%{
        transform:translateY(-20px) scale(1.05);
    }
}


/* Hauptkarte */

.card{
    width:min(92%,390px);

    background:var(--card);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid var(--border);

    border-radius:24px;

    padding:34px 24px;

    text-align:center;

    box-shadow:
        0 30px 60px rgba(0,0,0,.45);

    animation:fade .6s ease;
}


@keyframes fade{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* Song Icon */

.icon{
    font-size:54px;
    margin-bottom:18px;

    animation:pulse 3s infinite;
}


@keyframes pulse{
    50%{
        transform:scale(1.08);
    }
}


/* Texte */

h1{
    font-size:1.65rem;
    margin-bottom:10px;
}

p{
    color:var(--muted);
    line-height:1.6;
    margin-bottom:28px;
}


/* Buttons */

.buttons{
    display:flex;
    gap:12px;
}


button{
    flex:1;

    border:none;

    border-radius:999px;

    padding:14px;

    font-size:1rem;

    cursor:pointer;

    transition:.25s;

    font-weight:600;
}


#playBtn{

    background:
        linear-gradient(135deg,#ffd86b,var(--gold));

    color:#000;

    box-shadow:
        0 10px 30px rgba(212,175,55,.35);
}


#backBtn{

    background:
        rgba(255,255,255,.08);

    color:#fff;

    border:
        1px solid rgba(255,255,255,.08);
}


button:hover{
    transform:translateY(-3px);
}


button:active{
    transform:scale(.96);
}


/* Footer */

footer{

    margin-top:22px;

    color:var(--muted);

    font-size:.8rem;
}


/* Mobile */

@media(max-width:360px){

    .card{
        padding:26px 18px;
    }

    .buttons{
        flex-direction:column;
    }

}