:root{--a:#06060a;--b:rgba(255,255,255,.02);--c:rgba(255,255,255,.06);--d:#e8e8ec;--e:rgba(255,255,255,.5);--f:rgba(255,255,255,.3);--g:#00fff2;--h:#ff00aa;--i:#8b5cf6;--j:rgba(0,255,242,.15);--k:rgba(255,0,170,.12)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:'Outfit',-apple-system,sans-serif;min-height:100vh;min-height:100dvh;background:var(--a);color:var(--d);display:flex;align-items:center;justify-content:center;padding:clamp(16px,3vw,36px);overflow-x:hidden}.atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(135deg,#06060a 0%,#12081a 50%,#0a1018 100%);background-size:400% 400%;animation:gs 40s linear infinite;will-change:background-position}@keyframes gs{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}.atmosphere::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse 60% 40% at 25% 30%,var(--k),transparent 50%),radial-gradient(ellipse 50% 50% at 75% 70%,var(--j),transparent 45%),radial-gradient(ellipse 40% 40% at 50% 90%,rgba(139,92,246,.08),transparent 40%);animation:dr 60s linear infinite alternate;will-change:transform}.atmosphere::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.02;pointer-events:none}@keyframes dr{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-2%,2%,0)}}.orb{position:fixed;border-radius:50%;filter:blur(60px);opacity:.3;pointer-events:none;z-index:-1;will-change:transform,opacity}.orb-1{width:min(400px,40vw);height:min(400px,40vw);background:radial-gradient(circle,var(--h),transparent 70%);top:-10%;left:-5%;animation:f1 30s linear infinite}@keyframes f1{0%,100%{transform:translate3d(0,0,0);opacity:.25}50%{transform:translate3d(35px,5px,0);opacity:.35}}.orb-2{width:min(350px,35vw);height:min(350px,35vw);background:radial-gradient(circle,var(--g),transparent 70%);bottom:-10%;right:-5%;animation:f2 35s linear infinite}@keyframes f2{0%,100%{transform:translate3d(0,0,0);opacity:.3}50%{transform:translate3d(-30px,-20px,0);opacity:.4}}.orb-3{width:min(250px,25vw);height:min(250px,25vw);background:radial-gradient(circle,var(--i),transparent 70%);top:50%;left:60%;animation:f3 32s linear infinite}@keyframes f3{0%,100%{transform:translate3d(0,0,0);opacity:.2}50%{transform:translate3d(-5px,10px,0);opacity:.3}}.grid-overlay{position:fixed;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 10%,transparent 70%);opacity:.5}.container{width:100%;max-width:480px;position:relative;z-index:1;transform:scale(1.5);transform-origin:center;will-change:transform}.header{text-align:center;margin-bottom:clamp(21px,3.3vw,32px);animation:fi 1s ease-out}.logo{font-family:'Space Mono',monospace;font-size:clamp(0.73rem,1.3vw,1.1rem);font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--d);margin-bottom:12px;position:relative;display:inline-block}.logo::before{content:'';position:absolute;top:50%;left:clamp(-30px,-5vw,-40px);width:clamp(18px,3vw,24px);height:1px;background:linear-gradient(90deg,transparent,var(--g))}.logo::after{content:'';position:absolute;top:50%;right:clamp(-30px,-5vw,-40px);width:clamp(18px,3vw,24px);height:1px;background:linear-gradient(90deg,var(--h),transparent)}.tagline{font-size:clamp(0.47rem,0.8vw,0.7rem);font-weight:300;color:var(--f);letter-spacing:.25em;text-transform:uppercase}.player-card{background:var(--b);border:1px solid var(--c);border-radius:clamp(11px,1.7vw,13px);padding:clamp(19px,3.3vw,27px) clamp(16px,2.7vw,21px);position:relative;animation:su .8s ease-out .2s both;backdrop-filter:blur(40px)}.player-card::before{content:'';position:absolute;inset:-1px;border-radius:clamp(11px,1.7vw,14px);padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.08) 0%,transparent 30%,transparent 70%,rgba(0,255,242,.05) 100%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}.status-display{display:flex;align-items:center;justify-content:center;gap:12px;height:clamp(40px,6vw,48px);margin-bottom:clamp(16px,2.7vw,21px)}.status-indicator{width:clamp(6px,1vw,8px);height:clamp(6px,1vw,8px);border-radius:50%;background:var(--f);transition:all .4s ease}.status-display.live .status-indicator{background:var(--g);box-shadow:0 0 12px var(--g),0 0 24px var(--j);animation:pd 2s ease-in-out infinite}.status-display.connecting .status-indicator{background:var(--h);animation:pd 1s ease-in-out infinite}@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.status-text{font-family:'Space Mono',monospace;font-size:clamp(0.8rem,1.5vw,1.4rem);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--f);transition:all .4s ease}.status-display.live .status-text{color:var(--g);text-shadow:0 0 30px var(--j)}.status-display.connecting .status-text{color:var(--h);animation:pu 1.5s ease-in-out infinite}.status-display.paused .status-text{color:var(--e)}@keyframes pu{0%,100%{opacity:.6}50%{opacity:1}}.controls{display:flex;align-items:center;justify-content:center;margin-bottom:clamp(16px,2.7vw,21px)}.play-btn{width:clamp(40px,6vw,48px);height:clamp(40px,6vw,48px);border-radius:50%;border:1px solid var(--c);background:rgba(255,255,255,.02);color:var(--d);font-size:clamp(11px,1.7vw,12px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.play-btn::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--h));opacity:0;transition:opacity .3s ease;z-index:-1;filter:blur(12px)}.play-btn:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.05);transform:scale(1.05)}.play-btn:hover::before{opacity:.4}.play-btn:active{transform:scale(.98)}.play-btn.playing{border-color:var(--g);box-shadow:0 0 30px var(--j),inset 0 0 20px rgba(0,255,242,.05)}.play-btn.playing::before{opacity:.3;animation:gp 3s ease-in-out infinite}.play-btn.connecting{border-color:var(--h);box-shadow:0 0 30px var(--k),inset 0 0 20px rgba(255,0,170,.05);cursor:wait}.play-btn.connecting::before{opacity:.3;background:var(--h);animation:gp 1.5s ease-in-out infinite}@keyframes gp{0%,100%{opacity:.2;filter:blur(12px)}50%{opacity:.5;filter:blur(16px)}}.play-icon{transition:transform .2s ease}.volume-control{display:flex;align-items:center;gap:clamp(7px,1.3vw,9px);margin-bottom:clamp(16px,2.7vw,21px);padding:0 8px}.mute-btn{width:clamp(19px,2.7vw,21px);height:clamp(19px,2.7vw,21px);border-radius:8px;border:1px solid var(--c);background:0 0;color:var(--e);font-size:clamp(8px,1.3vw,9px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.mute-btn:hover{border-color:rgba(255,255,255,.12);color:var(--d)}.mute-btn.muted{color:var(--f)}.volume-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:rgba(255,255,255,.08);border-radius:2px;outline:0;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:clamp(8px,1.3vw,9px);height:clamp(8px,1.3vw,9px);background:var(--d);border-radius:50%;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.3)}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 12px var(--j)}.volume-slider::-moz-range-thumb{width:clamp(8px,1.3vw,9px);height:clamp(8px,1.3vw,9px);background:var(--d);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 8px rgba(0,0,0,.3)}.now-playing{padding-top:clamp(13px,2vw,16px);border-top:1px solid var(--c)}.now-playing-label{font-family:'Space Mono',monospace;font-size:clamp(0.4rem,0.67vw,0.6rem);letter-spacing:.2em;text-transform:uppercase;color:var(--f);margin-bottom:12px}.track-info{display:flex;align-items:flex-start;gap:12px}.track-indicator{width:3px;height:100%;background:linear-gradient(180deg,var(--g),var(--h));border-radius:2px;flex-shrink:0;opacity:.6;margin-top:2px;min-height:36px}.track-details{min-width:0;flex:1}.track-title{font-weight:500;font-size:clamp(0.63rem,1vw,0.95rem);color:var(--d);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:clamp(0.53rem,0.8vw,0.8rem);color:var(--e);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-license{font-size:clamp(0.43rem,0.67vw,0.65rem);opacity:.8}.track-license a{color:var(--e);text-decoration:none;transition:color .2s ease;border-bottom:1px solid rgba(255,255,255,.15)}.track-license a:hover{color:var(--g);border-bottom-color:var(--g)}.album-cover-container{display:flex;flex-direction:column;align-items:center;gap:6px;margin-left:12px;flex-shrink:0;align-self:flex-end;margin-bottom:-4px}.album-cover-container img{width:clamp(67px,10vw,120px);height:clamp(67px,10vw,120px);object-fit:cover;border-radius:8px;border:1px solid var(--c);background:rgba(255,255,255,.02);box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .3s ease}.album-cover-container img:hover{border-color:rgba(255,255,255,.12);box-shadow:0 6px 16px rgba(0,0,0,.4),0 0 20px var(--j)}.album-link-container{width:100%}.album-link-container a{font-size:clamp(0.4rem,0.6vw,0.6rem);color:var(--e);text-decoration:none;transition:color .2s ease;display:block;text-align:center;padding:3px 6px;border-radius:4px;background:rgba(255,255,255,.02);border:1px solid var(--c)}.album-link-container a:hover{color:var(--g);border-color:var(--g);background:rgba(0,255,242,.05)}.footer{text-align:center;margin-top:clamp(21px,3.3vw,27px);animation:fi 1s ease-out .5s both}.social-links{display:flex;justify-content:center;gap:clamp(8px,1.3vw,11px);margin-bottom:20px}.social-link{width:clamp(32px,4.5vw,40px);height:clamp(32px,4.5vw,40px);border-radius:10px;border:1px solid var(--c);background:0 0;display:flex;align-items:center;justify-content:center;color:var(--e);text-decoration:none;transition:all .2s ease}.social-link:hover{border-color:rgba(255,255,255,.12);color:var(--d);transform:translateY(-2px)}.social-link svg{width:clamp(16px,2.5vw,20px);height:clamp(16px,2.5vw,20px)}.copyright{font-size:clamp(0.43rem,0.67vw,0.65rem);color:var(--f);letter-spacing:.1em}@keyframes fi{from{opacity:0}to{opacity:1}}@keyframes su{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:480px){.logo::before,.logo::after{display:none}}



@media(max-width:1400px){.container{transform:scale(1.3)}}
@media(max-width:1000px){.container{transform:scale(1.1)}}
@media(max-width:720px){.container{transform:scale(1);max-width:420px}}
@media(max-width:480px){.container{transform:scale(0.9);max-width:100%}}

/* Mobile optimization - columnar layout */
@media(max-width:768px){
.container{transform:scale(1);max-width:100%;padding:0 16px}
.player-card{padding:24px 20px}
.header{margin-bottom:32px}
.now-playing{padding-top:20px}
.track-info{flex-direction:column;gap:16px}
.track-indicator{display:none}
.track-details{width:100%}
.album-cover-container{margin-left:0;align-self:center;margin-top:16px;margin-bottom:0}
.album-cover-container img{width:min(200px,60vw);height:min(200px,60vw)}
.status-display{height:60px;margin-bottom:24px}
.status-text{font-size:1.2rem}
.play-btn{width:64px;height:64px;font-size:16px}
.volume-control{margin-bottom:24px}
}

/* Tablet - slightly larger than phone */
@media(min-width:769px) and (max-width:1024px){
.container{transform:scale(1.2);max-width:90vw}
}
/* Mobile optimization - columnar layout with larger text */
@media(max-width:768px){
.container{transform:scale(1);max-width:100%;padding:0 16px}
.player-card{padding:24px 20px}
.header{margin-bottom:32px}
.logo{font-size:1.3rem}
.tagline{font-size:0.75rem}
.status-text{font-size:1.4rem}
.status-display{height:64px;margin-bottom:24px}
.play-btn{width:68px;height:68px;font-size:17px}
.volume-control{margin-bottom:24px}
.now-playing-label{font-size:0.7rem}
.now-playing{padding-top:20px}
.track-info{flex-direction:column;gap:16px}
.track-indicator{display:none}
.track-details{width:100%}
.track-title{font-size:1.15rem}
.track-artist{font-size:0.95rem}
.track-license{font-size:0.75rem}
.album-cover-container{margin-left:0;align-self:center;margin-top:16px;margin-bottom:0}
.album-cover-container img{width:min(220px,65vw);height:min(220px,65vw)}
.album-link-container a{font-size:0.7rem;padding:4px 8px}
}

/* Tablet - slightly larger than phone */
@media(min-width:769px) and (max-width:1024px){
.container{transform:scale(1.2);max-width:90vw}
}

/* Fix mobile track indicator - keep it vertical and solid cyan like desktop */
@media(max-width:768px){
.track-indicator{display:block;width:3px;height:100%;min-height:50px;margin-top:2px;background:linear-gradient(180deg,var(--g),var(--h));border-radius:2px;opacity:0.6}
.track-info{flex-direction:row;gap:12px}
.track-details{flex:1;min-width:0}
}

/* Ensure horizontal separator is solid on mobile */
@media(max-width:768px){
.now-playing{border-top:1px solid rgba(255,255,255,0.06)}
}

/* Larger social icons on mobile */
@media(max-width:768px){
.social-link{width:48px;height:48px}
.social-link svg{width:22px;height:22px}
.footer{margin-top:32px}
}

/* Larger copyright text on mobile */
@media(max-width:768px){
.copyright{font-size:0.8rem}
}