:root{--primary-red: #DC143C;--dark-red: #8B0000;--black: #0a0a0a;--gray-dark: #1a1a1a;--gray: #2a2a2a;--gray-light: #4a4a4a;--white: #ffffff;--off-white: #f5f5f5}*{margin:0;padding:0;box-sizing:border-box}html{height:100%;overflow:hidden}body{font-family:Righteous,cursive;background-image:url(../images/wallpaper_fm.jpeg);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;color:var(--white);height:100%;width:100%;overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:0;pointer-events:none}#root{height:100%;width:100%;overflow:hidden;position:relative;z-index:1}.music-bg{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.logo-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;max-width:600px;height:60%;background-image:url(../images/karachifm96-logo_large.png);background-size:contain;background-position:center;background-repeat:no-repeat;opacity:.04;animation:overlayPulse 8s ease-in-out infinite}@keyframes overlayPulse{0%,to{opacity:.04;transform:translate(-50%,-50%) scale(1)}50%{opacity:.08;transform:translate(-50%,-50%) scale(1.05)}}.note{position:absolute;font-size:3rem;color:var(--primary-red);opacity:.1;animation:float 15s infinite ease-in-out}.note1{left:10%;animation-delay:0s}.note2{left:30%;animation-delay:3s}.note3{left:50%;animation-delay:6s}.note4{left:70%;animation-delay:9s}.note5{left:90%;animation-delay:12s}@keyframes float{0%,to{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:.1}90%{opacity:.1}to{transform:translateY(-100px) rotate(360deg);opacity:0}}.container{position:absolute;z-index:1;max-width:600px;margin:0 auto;left:0;right:0;top:0;bottom:0;padding:10px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;gap:15px}.header{text-align:center;padding:10px;flex-shrink:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:10px;perspective:1000px}.logo{max-width:240px;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(220,20,60,.4));transition:all .6s ease;background:transparent}.logo:hover{transform:translateY(-8px) scale(1.02);filter:drop-shadow(0 12px 32px rgba(220,20,60,.6))}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.tagline{font-size:1rem;color:var(--primary-red);letter-spacing:4px;text-transform:uppercase;font-weight:700;text-shadow:0 2px 8px rgba(220,20,60,.3)}.now-playing{background:linear-gradient(135deg,var(--gray) 0%,var(--gray-dark) 100%);border-radius:20px;padding:20px 15px;box-shadow:0 10px 40px #dc143c4d;border:2px solid var(--gray-light);display:flex;flex-direction:column;align-items:center;flex-shrink:0}.vinyl-container{margin-bottom:15px}.vinyl{width:160px;height:160px;background:radial-gradient(circle,var(--black) 30%,var(--gray-dark) 31%,var(--gray-dark) 60%,var(--black) 61%);border-radius:50%;position:relative;box-shadow:0 0 30px #000c,inset 0 0 20px #00000080;animation:spin 3s linear infinite paused}.vinyl.playing{animation-play-state:running}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vinyl-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:var(--primary-red);border-radius:50%;box-shadow:0 0 20px #dc143c99}.vinyl-center:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:var(--black);border-radius:50%}.vinyl-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--white);font-size:.7rem;font-weight:700;letter-spacing:1px}.track-info{text-align:center;width:100%}.track-title{font-size:1.8rem;margin-bottom:10px;color:var(--white);text-shadow:2px 2px 4px rgba(0,0,0,.5)}.artist-name{font-size:1.1rem;color:var(--primary-red);margin-bottom:20px}.equalizer{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:60px;margin-top:20px}.bar{width:8px;background:linear-gradient(to top,var(--primary-red),var(--dark-red));border-radius:4px;animation:equalize .8s ease-in-out infinite}.bar:nth-child(1){animation-delay:0s;height:20%}.bar:nth-child(2){animation-delay:.1s;height:40%}.bar:nth-child(3){animation-delay:.2s;height:60%}.bar:nth-child(4){animation-delay:.3s;height:40%}.bar:nth-child(5){animation-delay:.4s;height:20%}@keyframes equalize{0%,to{height:20%}50%{height:100%}}.equalizer.paused .bar{animation:none;height:10%}.player-controls{display:flex;justify-content:center;align-items:center;gap:20px;flex-shrink:0}.control-btn{background:var(--gray);border:2px solid var(--gray-light);border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;color:var(--white);cursor:pointer;transition:all .3s ease}.control-btn:hover{background:var(--gray-light);border-color:var(--primary-red);transform:scale(1.1)}.control-btn:active{transform:scale(.95)}.play-pause-btn{background:linear-gradient(135deg,var(--primary-red) 0%,var(--dark-red) 100%);border:none;border-radius:50%;width:75px;height:75px;display:flex;align-items:center;justify-content:center;color:var(--white);cursor:pointer;transition:all .3s ease;box-shadow:0 5px 25px #dc143c80}.play-pause-btn:hover{transform:scale(1.1);box-shadow:0 8px 35px #dc143cb3}.play-pause-btn:active{transform:scale(.95)}.hidden{display:none!important}.volume-control{background:var(--gray);border-radius:15px;padding:12px 15px;display:flex;align-items:center;gap:15px;border:2px solid var(--gray-light);flex-shrink:0}.volume-slider{flex:1;height:6px;border-radius:3px;background:var(--gray-dark);outline:none;-webkit-appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-red);cursor:pointer;box-shadow:0 0 10px #dc143c80}.volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary-red);cursor:pointer;border:none;box-shadow:0 0 10px #dc143c80}.volume-value{color:var(--primary-red);font-weight:700;min-width:50px;text-align:right}.install-prompt{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,var(--primary-red) 0%,var(--dark-red) 100%);padding:20px 30px;border-radius:15px;box-shadow:0 10px 40px #00000080;display:flex;align-items:center;gap:15px;max-width:90%;z-index:1000;animation:slideUp .5s ease}@keyframes slideUp{0%{transform:translate(-50%) translateY(100px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translate(-50%,-50%) translateY(-20px);opacity:0}to{transform:translate(-50%,-50%) translateY(0);opacity:1}}.install-prompt p{margin:0;font-size:.95rem}.install-btn{background:var(--white);color:var(--primary-red);border:none;padding:10px 20px;border-radius:8px;font-weight:700;cursor:pointer;transition:all .3s ease;font-family:Righteous,cursive}.install-btn:hover{transform:scale(1.05);box-shadow:0 5px 15px #ffffff4d}.close-prompt{background:transparent;border:2px solid var(--white);color:var(--white);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.close-prompt:hover{background:var(--white);color:var(--primary-red)}@media (max-width: 768px){.logo-overlay{width:70%;opacity:.02}.logo{max-width:240px}.vinyl{width:160px;height:160px}.track-title{font-size:1.4rem}.play-pause-btn{width:80px;height:80px}.control-btn{width:50px;height:50px}.tagline{font-size:.9rem;letter-spacing:3px}}@media (max-width: 480px){.logo-overlay{width:80%;opacity:.015}.container{padding:8px;gap:10px}.header{padding:5px}.logo{max-width:180px}.tagline{font-size:.75rem;letter-spacing:2px}.vinyl{width:140px;height:140px}.vinyl-container{margin-bottom:10px}.now-playing{padding:15px 10px}.player-controls{gap:15px}.control-btn{width:45px;height:45px}.play-pause-btn{width:65px;height:65px}.install-prompt{flex-direction:column;text-align:center}}