body{
font-family:'Space Grotesk',sans-serif;
background:#111;
color:white;
height:100vh;
overflow:hidden;
}

/* Title */

.title{
position:fixed;
top:40px;
left:50%;
transform:translateX(-50%);
font-size:3rem;
font-weight:900;
}

.subtitle{
position:fixed;
top:100px;
left:50%;
transform:translateX(-50%);
opacity:0.6;
}

/* Container */

#records-container{
position:absolute;
width:100%;
height:100%;
}

/* RECORDS */

.record{
position:absolute;
width:140px;
height:140px;
cursor:grab;

/* smoother feel */
transition:all 0.25s cubic-bezier(0.2,1.4,0.4,1);

/* floating */
animation:float 20s ease-in-out infinite;
}

.record img{
width:100%;
height:100%;
object-fit:cover;
box-shadow:0 10px 30px rgba(0,0,0,0.6);
border-radius:0; /* default = square */
}

.playing-record img{
border-radius:50%;
}

/* dragging */
.record.dragging{
animation:none !important;
z-index:1000;
cursor:grabbing;
}

/* hover ONLY for non-playing */
.record:hover{
transform:scale(1.1);
}

/* ===== PLAYING RECORD ===== */

.playing-record{
position:fixed !important;
top:50% !important;
left:50% !important;

/* BIG + centered */
transform:translate(-50%,-50%) scale(1.8) !important;

z-index:500;

/* IMPORTANT: stop floating */
animation:none !important;
}

/* prevent hover from breaking it */
.playing-record:hover{
transform:translate(-50%,-50%) scale(1.8) !important;
}

/* spinning */
.playing-record img{
animation:spin 4s linear infinite;
}

/* pause state */
.playing-record.paused img{
animation:none;
opacity:1;
}

/* ===== PLAYER (stand under record) ===== */

#player{
position:fixed;
top:50%;
left:50%;

/* sits UNDER the record */
transform:translate(-50%, 140px);

width:260px;

background:white;
color:black;

padding:15px 20px;

border:2px solid black;
box-shadow:6px 6px 0 black;

text-align:center;

display:none;
z-index:600;
}

/* little stand connector */
#player::before{
content:"";
position:absolute;
top:-20px;
left:50%;
transform:translateX(-50%);
width:2px;
height:20px;
background:black;
}

#songTitle{
font-size:1.2rem;
margin-bottom:5px;
}

#songMeta{
opacity:0.7;
font-size:0.9rem;
}

/* Back button */

.back-button{
position:fixed;
top:2rem;
left:2rem;
color:white;
text-decoration:none;
font-weight:700;
font-size:1rem;
padding:0.8rem 1.2rem;
border:2px solid white;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(6px);
z-index:999;
transition:0.2s;
}

.back-button:hover{
background:white;
color:black;
transform:translateX(-3px);
}

/* FLOATING ANIMATION */

@keyframes float{

0%{transform:translate(0px,0px) rotate(0deg);}
25%{transform:translate(60px,-40px) rotate(10deg);}
50%{transform:translate(-40px,60px) rotate(-6deg);}
75%{transform:translate(30px,20px) rotate(4deg);}
100%{transform:translate(0px,0px) rotate(0deg);}

}

/* SPIN */

@keyframes spin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}

/* DROP ZONE */

body::after{

content:"DROP TO PLAY";

position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);

width:320px;
height:320px;

border:2px dashed rgba(255,255,255,0.25);
border-radius:50%;

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

font-size:0.75rem;
letter-spacing:3px;

opacity:0.35;

pointer-events:none;
transition:0.3s;

}


body.center-active::after{
content:"RELEASE TO PLAY";
opacity:1;
border-color:white;
transform:translate(-50%,-50%) scale(1.2);
}

.radio-header{
position:fixed;
top:40px;
left:50%;
transform:translateX(-50%);

font-size:0.9rem;
letter-spacing:4px;
opacity:0.5;
}

.week-label{
position:fixed;
bottom:20px;
font-size:0.7rem;
opacity:0.3;
letter-spacing:2px;
}

.same-person{
box-shadow:0 0 25px rgba(255,255,255,0.6);
transform:scale(1.15);
z-index:200;
}

/* 🔥 remove halo if it's the active one */
.playing-record.same-person{
box-shadow:none;
transform:translate(-50%,-50%) scale(1.8) !important;
}

.record.dimmed{
opacity:0.6;
}