.jukebox-container { padding: 4rem 0; background: var(--darker-bg); min-height: 100vh; }
.jukebox-hero { text-align: center; margin-bottom: 4rem; }
.jukebox-hero h1 { font-family: 'Righteous', cursive; font-size: 4rem; background: linear-gradient(135deg, var(--hot-pink), var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.turntable-container { display: flex; justify-content: center; margin: 3rem 0; }
.turntable { width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, #1a1a1a 0%, #000 70%); border: 10px solid var(--teal); box-shadow: 0 0 40px rgba(0,206,209,0.6); position: relative; }
.turntable.spinning { animation: spin 2s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.turntable::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: var(--hot-pink); border-radius: 50%; box-shadow: 0 0 20px rgba(255,20,147,0.8); }
.turntable::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: #000; border-radius: 50%; }
.vinyl-grooves { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; border-radius: 50%; background: repeating-radial-gradient(circle, #222 0px, #222 2px, #111 2px, #111 4px); }
.song-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
.song-card { background: var(--light-bg); border: 2px solid var(--teal); border-radius: 15px; padding: 2rem; cursor: pointer; transition: all 0.3s ease; position: relative; }
.song-card:hover { transform: translateY(-10px); border-color: var(--hot-pink); box-shadow: 0 10px 40px rgba(255,20,147,0.6); }
.song-card.playing { border-color: var(--hot-pink); box-shadow: 0 0 30px rgba(255,20,147,0.8); animation: pulse-border 1s infinite; }
@keyframes pulse-border { 0%, 100% { border-color: var(--hot-pink); } 50% { border-color: var(--teal); } }
.song-number { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--hot-pink); opacity: 0.3; position: absolute; top: 1rem; right: 1rem; }
.song-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--teal); margin-bottom: 0.5rem; }
.song-artist { color: var(--cream); font-size: 1.1rem; margin-bottom: 1rem; }
.song-year { color: var(--hot-pink); font-weight: bold; }
.now-playing { text-align: center; margin-top: 3rem; padding: 2rem; background: var(--light-bg); border-radius: 15px; border: 2px solid var(--hot-pink); }
.now-playing h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--teal); margin-bottom: 1rem; }
.now-playing-info { font-size: 1.2rem; color: var(--cream); }