body,html{background-color:#000;width:100%;height:100%;margin:0;padding:0;overflow:hidden}.player-container{background-color:#000;width:100%;height:100%;position:relative}.yt-player{pointer-events:none;z-index:10;opacity:0;border:none;width:100%;height:100%;transition:opacity 3s ease-in-out;position:absolute;top:0;left:0}.yt-player.active{opacity:1;z-index:12}.player-shield{z-index:15;opacity:0;pointer-events:none;background-color:#000;width:100%;height:100%;transition:opacity .5s;position:absolute;top:0;left:0}.player-shield.active{opacity:1}.idle-screen{z-index:20;opacity:0;pointer-events:none;background:radial-gradient(circle,#ff008814 0%,#05060b 80%);justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .8s ease-in-out;display:flex;position:absolute;top:0;left:0}.idle-screen.active{opacity:1;pointer-events:all}.idle-content{border-radius:var(--radius-lg);border:1px solid #ffffff14;flex-direction:column;align-items:center;gap:30px;width:90%;max-width:800px;padding:50px 60px;display:flex}.idle-logo{font-family:var(--font-title);letter-spacing:-2px;text-align:center;justify-content:center;align-items:center;gap:20px;margin-bottom:10px;font-size:4.5rem;font-weight:800;display:flex}.qr-container{align-items:center;gap:40px;margin:20px 0;display:flex}.qr-wrapper{border-radius:var(--radius-md);background:#fff;justify-content:center;align-items:center;width:220px;height:220px;padding:12px;display:flex;position:relative;box-shadow:0 0 25px #ff007f40,0 10px 40px #0009}.qr-wrapper img{object-fit:contain;width:100%;height:100%}.qr-loading{color:#fff;border-radius:var(--radius-md);opacity:1;background:#111;justify-content:center;align-items:center;font-size:.9rem;transition:opacity .3s;display:flex;position:absolute;inset:0}.qr-wrapper img:not([src=""])+.qr-loading{opacity:0;pointer-events:none}.qr-text{flex-direction:column;flex:1;gap:12px;display:flex}.qr-text h3{font-family:var(--font-title);color:hsl(var(--text-white));font-size:2.2rem;font-weight:700}.qr-text p{color:hsl(var(--text-muted));font-size:1.1rem;line-height:1.6}.url-display{color:hsl(var(--accent-cyan));text-shadow:var(--glow-cyan);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;align-self:flex-start;padding:8px 16px;font-family:monospace;font-size:.95rem;display:inline-block}.idle-status{color:hsl(var(--text-muted));align-items:center;gap:12px;font-size:1.1rem;display:flex}.pulse-ring{background-color:hsl(var(--accent-green));width:10px;height:10px;box-shadow:var(--glow-green);border-radius:50%;animation:1.5s infinite alternate pulseGreen}@keyframes pulseGreen{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}.hud-overlay{z-index:30;border-radius:var(--radius-md);opacity:0;pointer-events:none;border:1px solid #00f0ff26;flex-direction:column;align-items:stretch;width:90%;max-width:440px;padding:12px 18px;transition:all .6s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;bottom:24px;left:24px;transform:translateY(30px);box-shadow:0 10px 40px #000c,inset 0 0 10px #00f0ff0d}.hud-overlay.active{opacity:1;transform:translateY(0)}.hud-main-row{align-items:center;gap:14px;width:100%;display:flex}.hud-left{flex-shrink:0;justify-content:center;align-items:center;display:flex}.wave-bar-container{align-items:flex-end;gap:3px;height:18px;display:flex}.wave-bar-container span{background:hsl(var(--accent-cyan));width:2.5px;box-shadow:var(--glow-cyan);border-radius:1px;animation:1.2s ease-in-out infinite alternate hudWave;display:block}.wave-bar-container span:first-child{height:8px;animation-delay:.1s}.wave-bar-container span:nth-child(2){height:18px;animation-delay:.3s}.wave-bar-container span:nth-child(3){height:6px;animation-delay:0s}.wave-bar-container span:nth-child(4){height:14px;animation-delay:.4s}@keyframes hudWave{0%{transform:scaleY(.2)}to{transform:scaleY(1)}}.hud-center{flex:1;min-width:0}.hud-playing-badge{letter-spacing:1.5px;color:hsl(var(--accent-cyan));text-shadow:var(--glow-cyan);margin-bottom:2px;font-size:.62rem;font-weight:800}.hud-title{font-family:var(--font-title);color:#fff;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 2px 10px #00000080;margin-bottom:3px;font-size:1.05rem;font-weight:700;overflow:hidden}.hud-meta{align-items:center;gap:4px;font-size:.78rem;display:flex}.hud-label{color:hsl(var(--text-muted))}.hud-user{color:hsl(var(--accent-pink));text-shadow:var(--glow-pink);font-weight:600}.hud-right{border-left:1px solid #ffffff14;flex-shrink:0;align-items:center;margin-left:4px;padding-left:12px;display:flex}.hud-volume-badge{color:hsl(var(--text-muted));opacity:0;align-items:center;gap:4px;font-size:.75rem;font-weight:500;transition:all .3s;display:flex;transform:scale(.9)}.hud-volume-badge.show{opacity:1;transform:scale(1)}.hud-upcoming-container{border-top:1px solid #ffffff0f;flex-direction:column;gap:4px;width:100%;margin-top:8px;padding-top:8px;display:flex}.hud-upcoming-title{letter-spacing:1px;color:hsl(var(--accent-cyan));text-shadow:var(--glow-cyan);margin-bottom:2px;font-size:.6rem;font-weight:800}.hud-upcoming-list{flex-direction:column;gap:4px;list-style:none;display:flex}.hud-upcoming-item{color:hsl(var(--text-muted));white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;font-size:.72rem;display:flex;overflow:hidden}.hud-upcoming-item-dot{color:hsl(var(--accent-pink));font-weight:700}.hud-upcoming-user{color:#fff;font-weight:500}@media (width<=600px){.qr-container{flex-direction:column;align-items:center;gap:20px}.idle-logo{flex-direction:column;gap:10px;font-size:2.8rem}.idle-brand-logo-img{height:55px}.qr-text h3{text-align:center;font-size:1.5rem}.qr-text p{text-align:center;font-size:.95rem}.url-display{align-self:center}.hud-overlay{bottom:20px;left:20px;right:20px}}.virtual-player{z-index:13;opacity:0;pointer-events:none;background-color:#030407;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity 1.2s ease-in-out;display:flex;position:absolute;top:0;left:0;overflow:hidden}.virtual-player.active{opacity:1;pointer-events:all}.virtual-bg{filter:blur(60px)brightness(.65)saturate(2.2);z-index:1;background-position:50%;background-size:cover;width:120%;height:120%;transition:background-image 1s ease-in-out;animation:16s ease-in-out infinite alternate bgPulse;position:absolute;top:-10%;left:-10%}.virtual-bg:after{content:"";mix-blend-mode:screen;background:linear-gradient(135deg,#ff00882e,#0000 50%,#00ffff2e);width:100%;height:100%;animation:8s infinite alternate auroraTransition;position:absolute;top:0;left:0}@keyframes bgPulse{0%{transform:scale(1)rotate(0)}to{transform:scale(1.15)rotate(6deg)}}@keyframes auroraTransition{0%{filter:hue-rotate();opacity:.7}to{filter:hue-rotate(360deg);opacity:1}}.virtual-content{z-index:2;flex-direction:column;justify-content:center;align-items:center;gap:50px;width:100%;height:100%;display:flex;position:relative}.art-card-container{justify-content:center;align-items:center;width:62vh;max-width:650px;height:62vh;max-height:650px;margin-bottom:50px;animation:6s ease-in-out infinite alternate floatCard;display:flex;position:relative}.virtual-player.paused .art-card-container{animation-play-state:paused}@keyframes floatCard{0%{transform:translateY(-10px)}to{transform:translateY(10px)}}.neon-ring{background:linear-gradient(45deg, hsl(var(--accent-pink)), hsl(var(--accent-cyan)), hsl(var(--accent-pink)));z-index:1;filter:blur(14px);opacity:.95;background-size:200% 200%;border-radius:40px;width:82%;height:82%;animation:8s linear infinite rotateNeon;position:absolute;transform:rotate(45deg)}.virtual-player.paused .neon-ring{animation-play-state:paused}@keyframes rotateNeon{0%{background-position:0%;transform:rotate(45deg)}50%{background-position:100%}to{background-position:0%;transform:rotate(405deg)}}.art-card{z-index:2;background-color:#111;border:1px solid #ffffff1f;border-radius:20px;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:0 30px 80px #000000e6,0 0 40px #00f0ff33}#virtual-album-art{object-fit:cover;width:100%;height:100%;display:block}.visualizer-container{box-sizing:border-box;z-index:2;pointer-events:none;border-bottom:none;justify-content:space-between;align-items:flex-end;gap:5px;width:100%;height:120px;padding:0 10px;display:flex;position:absolute;bottom:0;left:0;overflow:hidden}.equalizer-bar{background:linear-gradient(to top, hsl(var(--accent-cyan)) 0%, hsl(var(--accent-pink)) 100%);transform-origin:bottom;border-radius:4px 4px 0 0;flex:1;height:10px;animation:1.4s ease-in-out infinite alternate paused bounceBar;box-shadow:0 0 12px #00f0ff4d}.virtual-player.active .equalizer-bar{animation-play-state:running}.equalizer-bar:nth-child(16n+1){animation-duration:.7s;animation-delay:.1s}.equalizer-bar:nth-child(16n+2){animation-duration:1.1s;animation-delay:.3s}.equalizer-bar:nth-child(16n+3){animation-duration:.8s;animation-delay:50ms}.equalizer-bar:nth-child(16n+4){animation-duration:1.3s;animation-delay:.5s}.equalizer-bar:nth-child(16n+5){animation-duration:.6s;animation-delay:0s}.equalizer-bar:nth-child(16n+6){animation-duration:1s;animation-delay:.25s}.equalizer-bar:nth-child(16n+7){animation-duration:1.2s;animation-delay:.4s}.equalizer-bar:nth-child(16n+8){animation-duration:.75s;animation-delay:.15s}.equalizer-bar:nth-child(16n+9){animation-duration:1.15s;animation-delay:.2s}.equalizer-bar:nth-child(16n+10){animation-duration:.9s;animation-delay:.35s}.equalizer-bar:nth-child(16n+11){animation-duration:1.4s;animation-delay:.6s}.equalizer-bar:nth-child(16n+12){animation-duration:.85s;animation-delay:.1s}.equalizer-bar:nth-child(16n+13){animation-duration:1.25s;animation-delay:.45s}.equalizer-bar:nth-child(16n+14){animation-duration:.65s;animation-delay:50ms}.equalizer-bar:nth-child(16n+15){animation-duration:1.05s;animation-delay:.15s}.equalizer-bar:nth-child(16n+16){animation-duration:.95s;animation-delay:.5s}@keyframes bounceBar{0%{transform:scaleY(1)}25%{transform:scaleY(4)}50%{transform:scaleY(2)}75%{transform:scaleY(9)}to{transform:scaleY(12)}}@media (width<=600px){.art-card-container{width:250px;height:250px;margin-bottom:20px}.visualizer-container{gap:3px;height:80px}}.virtual-player.paused .art-card-container,.virtual-player.paused .neon-ring,.virtual-player.paused .equalizer-bar{animation-play-state:paused!important}.autoplay-overlay{z-index:9999;opacity:0;pointer-events:none;background:#05060bf2;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s ease-in-out;display:flex;position:fixed;top:0;left:0}.autoplay-overlay.active{opacity:1;pointer-events:all}.autoplay-content{text-align:center;border:1px solid #00f0ff33;flex-direction:column;align-items:center;gap:24px;width:90%;max-width:480px;padding:40px;display:flex;box-shadow:0 0 35px #00f0ff26,inset 0 0 20px #00f0ff0d}.autoplay-icon{font-size:3.5rem;animation:2s ease-in-out infinite alternate pulseNeon}@keyframes pulseNeon{0%{filter:drop-shadow(0 0 2px #00f0ff33);transform:scale(.95)}to{filter:drop-shadow(0 0 20px #00f0ff99);transform:scale(1.05)}}