/* ===== Flex layout for footer at bottom ===== */
html, body { height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-direction: column; min-height: 100vh; background:#0d0d0d; color:#eee; font-family:'Segoe UI',sans-serif; }
.container { flex: 1; max-width:1200px; margin:auto; padding:20px; }
#artistTopContainer{display:flex;flex-wrap:wrap;gap:25px;align-items:center;margin-bottom:50px;background:#1f1f2e;padding:20px;border-radius:12px;box-shadow:0 4px 20px rgba(0,255,127,0.2);position:relative;}
#artistTopContainer img{width:200px;height:200px;object-fit:cover;border-radius:12px;box-shadow:0 4px 15px rgba(0,255,127,0.3);}
#artistInfo{flex:1;min-width:200px;}
#artistInfo h2{color:#00ff7f;margin:0;font-size:2rem;}
.section-title{font-size:1.5rem;font-weight:700;color:#00ff7f;margin:40px 0 25px;border-left:4px solid #00ff7f;padding-left:10px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:25px;margin-top:15px;}
.card{background:#1f1f2e;border-radius:12px;padding:15px;transition:transform .4s,box-shadow .4s;cursor:pointer;position:relative;overflow:hidden;opacity:0;transform:translateY(20px);}
.card.show{opacity:1;transform:translateY(0);}
.card:hover{transform:scale(1.05);box-shadow:0 0 12px #00ff7f,0 0 20px #00ff7f,0 6px 15px rgba(0,255,127,0.3);}
.card img {
    width: 200px;        /* fixed width */
    height: 200px;       /* fixed height */
    object-fit: cover;   /* crop/scale image to fit */
    border-radius: 8px;
    margin: 0 auto 10px; /* center horizontally and keep bottom margin */
    display: block;
}
.card h5{text-align:center;color:#00ff7f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;}
.song-card{position:relative;}
.play-overlay {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    pointer-events: none;

    /* Softer styling */
    background: rgba(0, 0, 0, 0.25);          /* much softer dark overlay */
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.15);  /* very subtle glow */
    transition: background 0.3s, transform 0.3s;
}

.card:hover .play-overlay {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(0, 0, 0, 0.35);          /* slightly stronger on hover but still soft */
}

.song-card .song-artist {
    text-align: center;
    font-size: 0.9rem;
    color: #fff;
    margin: 2px 0 5px 0;
}
.download-btn{margin-top:8px;background:#27ae60;color:#fff;border:none;border-radius:6px;padding:6px 12px;cursor:pointer;font-weight:bold;font-size:13px;display:block;width:auto;text-align:center;margin:8px auto 0;transition:.3s;}
.download-btn:hover{background:#2ecc71;}

#playerBar{position:fixed;bottom:0;left:0;width:100%;background:#1f1f2e;color:#fff;display:flex;align-items:center;padding:10px 20px;box-shadow:0 -4px 15px rgba(0,0,0,0.6);z-index:999;gap:12px;display:none;border-top:2px solid #00ff7f;}
#playerBar img{width:55px;height:55px;object-fit:cover;border-radius:6px;}
#playerInfo{flex:1;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
#playerInfo .song-name{font-weight:700;color:#00ff7f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#playerInfo .artist-name{font-size:13px;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#playerControls{display:flex;align-items:center;gap:10px;}
#playerControls button{background:#27ae60;border:none;color:#fff;width:38px;height:38px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.2s;}
#playerControls button:hover{background:#2ecc71;}
#playerProgressContainer{flex:1;height:6px;background:#333;border-radius:5px;cursor:pointer;margin:0 12px;}
#playerProgress{height:100%;width:0;background:#27ae60;border-radius:5px;}