/* =====================================================
   Base
===================================================== */

/* page background */
body{
margin:0;
background:#0c0f1a;
color:#fff;
font-family:Inter,Arial,sans-serif;
}


.modal-overlay.hidden{
display:none;
}

/* =====================================================
   Waveform Background
===================================================== */

/* waveform canvas */
#bgWaves{
position:fixed;
top:0;
left:0;

width:100vw;
height:100vh;

pointer-events:none;

opacity:0.85;

z-index:2;
}


/* page content */
.track-page{
position:relative;
z-index:10;
}

.track-page { max-width: 1100px; margin: 24px auto 140px; padding: 0 16px; }
/* =====================================================
   Cards
===================================================== */

/* cards */
.lb-card{
position:relative;
z-index:5;
background:#0d111757;
border:1px solid rgba(255,0,0,0.25);
border-radius:14px;
padding:24px;
margin-bottom:24px;
box-shadow:0 0 12px rgba(255,0,0,0.08);
}


/* =====================================================
   Back Button
===================================================== */

.track-back-btn{
margin-bottom:20px;
background:none;
border:none;
color:#fff;
font-size:14px;
cursor:pointer;
}


/* =====================================================
   Hero Section
===================================================== */

.track-hero{
display:grid;
grid-template-columns:320px 1fr;
gap:30px;
align-items:center;
}

.hero-cover{
width:100%;
aspect-ratio:1/1;
background-size:cover;
background-position:center;
border-radius:16px;
border:1px solid rgba(255,255,255,0.16);
}

.hero-meta{
display:flex;
flex-direction:column;
justify-content:center;
max-width:480px;
}

.hero-meta h1{
margin:0 0 8px;
font-size:32px;
}

.hero-meta p{
margin:0 0 16px;
opacity:.9;
}

.track-lyrics-preview{
margin:0 0 10px;
font-size:13px;
line-height:1.55;
color:rgba(255,255,255,.72);
}

.track-description{
margin:0 0 14px;
font-size:15px;
line-height:1.65;
color:rgba(255,255,255,.9);
}

.track-meta-chips{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0 0 14px;
}

.track-meta-chip{
display:inline-flex;
align-items:center;
padding:6px 10px;
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
background:rgba(255,255,255,.05);
font-size:12px;
letter-spacing:.04em;
text-transform:uppercase;
color:rgba(255,255,255,.82);
}

.ai-disclosure{
display:inline-flex;
flex-direction:column;
gap:4px;
padding:10px 12px;
border:1px solid rgba(255,255,255,.14);
border-left:3px solid rgba(255,0,0,.72);
border-radius:10px;
background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
max-width:340px;
}

.ai-disclosure-label{
font-size:11px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:#ffd7d7;
}

.ai-disclosure-copy{
font-size:13px;
color:rgba(255,255,255,.8);
}


/* =====================================================
   Action Buttons
===================================================== */

.hero-actions{
display:flex;
align-items:center;
gap:20px;
margin-top:14px;
margin-bottom:14px;
}

/* remove ALL button styling */
.track-icon-btn{

background:transparent !important;
border:none !important;
box-shadow:none !important;

padding:0;
margin:0;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

}

/* icon sizing */
.track-icon-btn i{
font-size:24px;
line-height:1;
transition:transform .18s ease, opacity .18s ease;
}

/* hover effect */
.track-icon-btn:hover i{
transform:scale(1.15);
opacity:0.9;
}

/* colours */

.play-btn{
color:#ffffff;
}

.like-btn{
color:#f5c542;
}

.love-btn{
color:#ff304f;
}

.share-btn{
color:#ffffff;
}

.download-btn{
color:#ffffff;
}

.playlist-btn{
color:#ffffff;
}

.pause-btn{
color:#ffffff;
}

.mute-btn{
color:#ffffff;
}

.library-btn{
color:#fff;
}

.library-btn i{
color:#fff;
}
/* =====================================================
   Counters
===================================================== */

.counters{
margin-top:8px;
margin-bottom: 4px;
font-size:14px;
opacity:.85;
}


/* =====================================================
   Tip / Donate
===================================================== */

.track-tip-area{
margin-top:12px;
display:flex;
flex-direction:column;
gap:6px;
max-width:420px;
}

.tip-btn{
display:block;
width:100%;
text-align:center;
padding:10px 0;
background:#e11;
border-radius:6px;
color:#fff;
text-decoration:none;
font-weight:600;
}

.tip-note{
font-size:12px;
opacity:.65;
}


/* =====================================================
   Lyrics
===================================================== */

.lyrics-wrap{
margin-top:24px;
}

.lyrics-container{
position:relative;
}

#trackLyrics{
white-space:pre-wrap;
line-height:1.5;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
padding:14px;
min-height:120px;
transition:max-height .35s ease;
}

.lyrics-collapsed{
max-height:150px;
overflow:hidden;
mask-image:linear-gradient(to bottom, black 60%, transparent);
}

.lyrics-expand-btn{
margin-top:10px;
padding:8px 14px;
background:#e11;
border:none;
border-radius:6px;
color:white;
cursor:pointer;
}

.lyrics-section{
display:block;
margin-top:18px;
margin-bottom:6px;
font-weight:700;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
color:#ff0000;
border-bottom:1px solid rgba(255,255,255,.15);
padding-bottom:4px;
}


/* =====================================================
   Related Tracks
===================================================== */

.related-tracks-intro{
margin:0 0 16px;
color:rgba(255,255,255,.72);
}

.related-tracks-list{
list-style:none;
padding:0;
margin:0;
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:14px;
}

.related-track-item{
min-width:0;
}

.related-track-link{
display:flex;
flex-direction:column;
gap:6px;
padding:14px;
border-radius:12px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);
text-decoration:none;
transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.related-track-link:hover{
transform:translateY(-2px);
border-color:rgba(255,0,0,.45);
background:rgba(255,255,255,.06);
}

.related-track-title{
font-size:16px;
font-weight:700;
color:#fff;
}

.related-track-meta{
font-size:13px;
color:rgba(255,255,255,.7);
}


/* =====================================================
   Merch Section
===================================================== */

.track-merch-slider{
min-height:120px;
display:flex;
align-items:center;
justify-content:center;
}

.merch-placeholder{
opacity:.6;
}


/* =====================================================
   Global Player
===================================================== */

.global-player-shell{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:999;

display:grid;
grid-template-columns:400px 1fr 400px;
gap:20px;

align-items:center;

padding:10px 16px;

background:rgba(4,6,12,.95);
border-top:1px solid rgba(255,255,255,.14);
}

/* LBClub Records logo */

.mini-logo{
height:64px;
object-fit:contain;
}

/* CENTER PLAYER AREA */

.player-center{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
max-width:900px;
margin:0 auto;
}

/* rotating text */

.now-playing-text{
position:absolute;

width:100%;
max-width:600px;
text-align:center;

font-size:13px;
font-weight:500;

opacity:0;
transition:opacity .4s ease;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* progress bar */

.mini-progress{
width:100%;
max-width:600px;   /* controls the bar size */
margin:0 auto;     /* centres it inside the middle column */

height:6px;

background:rgba(255,255,255,.15);
border-radius:999px;

overflow:hidden;

transition:opacity .4s ease;
}

#progressFill{
width:0;
height:100%;
background:#ff0000;
}

/* sponsor banner */

.mini-banner{
width:400px;
height:56px;
object-fit:contain;
justify-self:end;
}

/* =====================================================
   Mobile
===================================================== */

@media (max-width:900px){

.track-hero{
grid-template-columns:1fr;
}

.related-tracks-list{
grid-template-columns:1fr;
}

.global-player-shell{
grid-template-columns:48px 1fr auto;
}

.mini-progress,
.mini-banner{
display:none;
}

}

/* ========================================
   Global Playlist Modals
======================================== */

.modal-overlay{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,0.65);
backdrop-filter:blur(6px);

z-index:9999;
}

.modal-overlay.hidden{
display:none;
}

.modal-card{
background:#0d111c;
border:1px solid #ff2a2a;
border-radius:12px;

width:420px;
max-width:90vw;

padding:18px;

box-shadow:0 0 25px rgba(255,0,0,0.15);
}

.modal-header{
display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:10px;
}

.modal-header h3{
margin:0;
font-size:16px;
color:#fff;
}

.modal-close-btn{
background:none;
border:none;
color:#fff;
font-size:18px;
cursor:pointer;
}

.modal-body{
margin-bottom:12px;
}

.modal-hint{
font-size:12px;
opacity:.8;
}

.modal-list{
list-style:none;
padding:0;
margin:10px 0;
}

.modal-list li{
padding:8px 10px;
border-radius:6px;
cursor:pointer;
}

.modal-list li:hover{
background:#1a2030;
}

.modal-actions{
display:flex;
justify-content:flex-end;
gap:8px;
}

.control-btn{
background:#1a2030;
border:1px solid #2b3245;
color:#fff;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
}

.control-btn.primary{
background:#ff2a2a;
border-color:#ff2a2a;
}