*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--mahogany:#1e1508;--mahogany-mid:#2a1c09;--mahogany-light:#3a2810;--brass-gold:#d49018;--gold-bright:#ffd060;--gold-mid:#e8c055;--gold-warm:#e8a020;--gold-dark:#9a6010;--gold-text:#f0d080;--amber-glow:#e8a02059;--text-primary:#f5e8c0;--text-secondary:#f5e8c099;--font-main:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--card-radius:28px}html,body{width:100%;height:100%;font-family:var(--font-main);color:var(--text-primary);overflow:hidden}.app-container{justify-content:center;align-items:center;width:100%;height:100dvh;display:flex;position:relative;overflow:hidden}.bg-image{object-fit:cover;z-index:0;filter:brightness(.9)saturate(1.1);width:100%;height:100%;position:absolute;inset:0}.bg-overlay{z-index:1;background:radial-gradient(at 50% 85%,#1e15086b 0%,#0000 70%);position:absolute;inset:0}.radio-card{z-index:2;border-radius:var(--card-radius);opacity:0;background:conic-gradient(#7a5010 0deg,#c88820 25deg,#f0c840 70deg,#e8b030 95deg,#ffd060 130deg,#c88820 160deg,#8a6018 180deg,#c08020 200deg,#f0c840 240deg,#d4a030 270deg,#ffd060 300deg,#b07820 330deg,#7a5010 360deg);width:calc(100% - 2.5rem);max-width:920px;padding:3px;animation:.9s cubic-bezier(.22,1,.36,1) forwards cardIn;position:absolute;bottom:2rem;left:50%;transform:translate(-50%)translateY(32px);box-shadow:0 2px #ffffff1a,0 4px 14px #000000a6,0 14px 48px #0000008c,0 28px 90px #00000061,inset 0 1px #ffdc5038}@keyframes cardIn{to{opacity:1;transform:translate(-50%)translateY(0)}}.radio-inner{border-radius:calc(var(--card-radius) - 3px);background:radial-gradient(at 30% 0,#2e1f0a 0%,#1e1508 55%,#120e04 100%);flex-direction:column;gap:.65rem;padding:.9rem 1.5rem 1rem;display:flex;box-shadow:inset 0 1px #ffc8500f,inset 0 -1px #0000008c}.top-row{align-items:center;gap:.9rem;width:100%;display:flex}.bottom-row{align-items:center;gap:.85rem;width:100%;display:flex}.radio-title{letter-spacing:.04em;width:auto;min-width:160px;white-space:none;background:linear-gradient(160deg, var(--gold-bright) 0%, var(--gold-mid) 40%, var(--gold-warm) 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 4px #e8c0504d);-webkit-background-clip:text;background-clip:text;flex-shrink:0;font-size:2rem;font-weight:300}.bar-divider{background:linear-gradient(to bottom, transparent, var(--brass-gold), transparent);opacity:.45;flex-shrink:0;width:1px;height:32px}.channel-tags{flex-wrap:wrap;flex:1;align-items:center;gap:.38rem;min-width:0;display:flex}.channel-tag{cursor:pointer;font-family:var(--font-main);letter-spacing:.03em;white-space:nowrap;-webkit-user-select:none;user-select:none;outline-offset:-1px;color:var(--gold-mid);background:linear-gradient(160deg,#3a2810 0%,#2a1c09 60%,#1e1508 100%);border:none;border-radius:100px;outline:1px solid #b4821e52;padding:.38rem 1rem;font-size:1rem;font-weight:500;transition:transform .12s,box-shadow .12s,color .12s;position:relative;box-shadow:inset 0 1px #ffd25029,inset 0 -1px #00000073,0 2px 6px #0000008c,0 1px 2px #000000a6}.channel-tag:hover{color:var(--gold-bright);outline-color:#d490188c;transform:translateY(-.5px);box-shadow:inset 0 1px #ffd25038,inset 0 -1px #00000073,0 4px 12px #00000080,0 0 12px #d490181f}.channel-tag.active{color:var(--gold-bright);box-shadow:0 -1px 0 #ffd2500d inset, 0 2px 6px #000000b3 inset, 0 0 0 1.5px var(--brass-gold), 0 0 12px #d4901873, 0 0 26px #e8a0202e;background:linear-gradient(160deg,#1a1106 0%,#261808 60%,#2e1f0a 100%);outline:none;transform:translateY(.5px)}.channel-tag:active{transform:translateY(1.5px);box-shadow:inset 0 -1px #00000059,inset 0 3px 8px #000c,0 0 6px #d4901833}.channel-tag.disabled{opacity:.32;cursor:not-allowed;pointer-events:none}.now-playing{white-space:nowrap;flex-direction:column;flex-shrink:0;gap:.18rem;width:160px;display:flex}.now-playing-label{color:#e8a0207a;letter-spacing:.1em;text-transform:uppercase;font-size:.52rem}.now-playing-name{color:var(--gold-mid);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;max-width:auto;font-size:1rem;font-weight:600;overflow:hidden}.now-playing-status{align-items:center;gap:.3rem;display:flex}.live-dot{background:#e74c3c;border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-top:-6px;animation:1.6s ease-in-out infinite pulseDot;display:inline-block}@keyframes pulseDot{0%,to{opacity:1;box-shadow:0 0 #e74c3c80}50%{opacity:.7;box-shadow:0 0 0 5px #e74c3c00}}.vu-panel{background:linear-gradient(#0d0a04 0%,#120e05 100%);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:88px;height:58px;display:flex;overflow:hidden;box-shadow:inset 0 2px 10px #000000eb,inset 0 0 0 1px #d4901838,0 1px #ffc85014}.spectrum-panel{background:linear-gradient(#0a0804 0%,#120e05 100%);border-radius:8px;flex:1;justify-content:center;align-items:flex-end;gap:2px;height:58px;padding:5px 6px 4px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #000000eb,inset 0 0 0 1px #d4901838,0 1px #ffc85014}.spectrum-bar{will-change:height;background:linear-gradient(#ffd060 0%,#e8c055 25%,#e8a020 50%,#d49018 75%,#c87010 100%);border-radius:2px 2px 1px 1px;flex:1;min-width:3px;max-width:14px;min-height:2px;transition:box-shadow .1s}.knob-wrapper{flex-shrink:0;justify-content:center;align-items:center;width:74px;height:74px;display:flex;position:relative}.knob-halo{opacity:0;filter:blur(1px);background:conic-gradient(#d4901800,#ffd06080,#d4901800,#ffd06080,#d4901800);border-radius:50%;transition:opacity .5s;animation:20s linear infinite paused haloSpin;position:absolute;inset:-7px}.knob-wrapper.playing .knob-halo{opacity:1;animation-play-state:running}@keyframes haloSpin{to{transform:rotate(360deg)}}.knob-tick-ring{opacity:.55;background:repeating-conic-gradient(#d49018a6 0deg 2.5deg,#0000 2.5deg 18deg);border-radius:50%;position:absolute;inset:0}.knob-wrapper.playing .knob-tick-ring{animation:20s linear infinite knobSpin}@keyframes knobSpin{to{transform:rotate(360deg)}}.knob-btn{z-index:2;cursor:pointer;background:radial-gradient(circle at 38% 32%,#c09030 0%,#9a6810 28%,#7a4c08 55%,#5a3808 80%,#3a2206 100%);border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:56px;height:56px;transition:transform .12s,box-shadow .15s;display:flex;position:relative;box-shadow:inset 0 2px #ffdc6447,inset 0 -2px 5px #0009,0 5px 18px #000000b3,0 1px 4px #000000e6,0 0 0 2px #b4821894,0 0 0 4px #00000059}.knob-btn:hover{transform:scale(1.05);box-shadow:inset 0 2px #ffdc6452,inset 0 -2px 5px #0009,0 5px 22px #000000b3,0 0 0 2px #d4a020cc,0 0 18px #d490186b}.knob-btn:active{transform:scale(.92)}.knob-btn svg{width:20px;height:20px;fill:var(--gold-bright);filter:drop-shadow(0 0 5px #ffd060a6)}.volume-control{flex-shrink:0;align-items:center;gap:.45rem;width:108px;display:flex}.volume-icon{width:16px;height:16px;fill:var(--gold-warm);cursor:pointer;filter:drop-shadow(0 0 3px #e8a02047);flex-shrink:0;transition:fill .2s,filter .2s}.volume-icon:hover{fill:var(--gold-bright);filter:drop-shadow(0 0 6px #ffd06080)}.volume-slider{appearance:none;cursor:pointer;background:#b482182e;border-radius:2px;outline:none;width:100%;height:4px;box-shadow:inset 0 1px 3px #00000080,0 1px #ffc85012}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:radial-gradient(circle at 38% 32%,#d4a030,#9a6010);border-radius:50%;width:16px;height:16px;transition:transform .15s,box-shadow .15s;box-shadow:inset 0 1px #ffdc6452,0 2px 8px #0009,0 0 0 1.5px #b48218ad}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.28);box-shadow:inset 0 1px #ffdc646b,0 2px 10px #000000b3,0 0 0 2px #d4a020e6,0 0 10px #d490186b}.volume-slider::-moz-range-thumb{cursor:pointer;background:radial-gradient(circle at 38% 32%,#d4a030,#9a6010);border:none;border-radius:50%;width:16px;height:16px;box-shadow:inset 0 1px #ffdc6452,0 2px 8px #0009,0 0 0 1.5px #b48218ad}.spotify-embed{border:none;border-radius:10px;flex:1;width:100%;height:80px}.loading-spinner{border:2px solid #d490182e;border-top-color:var(--gold-mid);border-radius:50%;width:18px;height:18px;animation:.75s linear infinite spinnerRot}@keyframes spinnerRot{to{transform:rotate(360deg)}}@keyframes marqueeScroll{0%{transform:translate(0)}10%{transform:translate(0)}90%{transform:translate(-100%)}to{transform:translate(-100%)}}.now-playing-mobile{display:none}@media (max-width:680px){.radio-card{width:calc(100% - 1.5rem);max-width:100%;bottom:2rem}.radio-inner{gap:.5rem;padding:.75rem .9rem .85rem}.radio-title{width:auto;min-width:auto;font-size:1.5rem}.channel-tag{width:auto;padding:.3rem .7rem;font-size:.7rem}.knob-wrapper{width:58px;height:58px}.knob-btn{width:46px;height:46px}.vu-panel{width:68px}.volume-control,.bottom-row>.now-playing,.bottom-row>.bar-divider{display:none}.now-playing-mobile{text-align:left;flex-direction:column;flex-shrink:0;align-items:flex-start;gap:.18rem;min-width:130px;max-width:170px;margin-left:0;display:flex}.now-playing-mobile .now-playing-status{align-items:center;gap:.3rem;max-width:100%;display:flex;overflow:visible}.now-playing-mobile .marquee-track{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 14% 78%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 14% 78%,#0000 100%)}.now-playing-mobile .now-playing-name{white-space:nowrap;max-width:none;padding-left:.5rem;padding-right:2.5rem;animation:8s linear infinite marqueeScroll;display:inline-block}.top-row{flex-direction:column;align-items:stretch;gap:.4rem;margin-bottom:15px}.top-row>.radio-title,.top-row>.now-playing-mobile{order:1}.top-row>.bar-divider{display:none}.top-row>.channel-tags{order:2}.top-row{grid-template-rows:auto auto;grid-template-columns:1fr auto;align-items:center;display:grid}.top-row>.radio-title{grid-area:1/1}.top-row>.now-playing-mobile{grid-area:1/2;padding-left:.5rem;overflow:hidden}.top-row>.channel-tags{grid-area:2/1/auto/-1}.now-playing-name{max-width:auto}.top-row .bar-divider{display:none}}.hud-time,.hud-listeners{z-index:100;-webkit-backdrop-filter:blur(12px);background:#1e15089e;border:1px solid #d490184d;border-radius:100px;align-items:center;gap:.45rem;padding:.32rem .9rem .32rem .72rem;display:flex;position:fixed;top:1.1rem;box-shadow:0 2px 16px #0000008c,inset 0 0 0 1px #ffd0600f,inset 0 1px #ffdc501f}.hud-time{animation:.7s cubic-bezier(.22,1,.36,1) both hudInLeft;left:1.1rem}.hud-listeners{animation:.7s cubic-bezier(.22,1,.36,1) both hudInRight;right:1.1rem}@keyframes hudInLeft{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}@keyframes hudInRight{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}.hud-text{font-family:var(--font-main);letter-spacing:.06em;color:var(--gold-mid);white-space:nowrap;font-size:.72rem;font-weight:500}.listeners-dot{background:#e74c3c;border-radius:50%;flex-shrink:0;width:7px;height:7px;animation:1.8s ease-in-out infinite listenerPulse}@keyframes listenerPulse{0%,to{opacity:1;box-shadow:0 0 #e74c3c8c}50%{opacity:.75;box-shadow:0 0 0 5px #e74c3c00}}