@font-face{font-family:"Press Start 2P";src:url(/fonts/press-start-2p/press-start-2p.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{--bg-dark: #0a0a0f;--bg-panel: #111118;--bg-frame: #1a1a24;--border-color: #2a2a3a;--neon-cyan: #ffaa00;--neon-magenta: #ff00ff;--neon-yellow: #ffff00;--neon-green: #33ff00;--neon-orange: #ff8800;--neon-red: #ff0033;--text-primary: #ffffff;--text-secondary: #8888aa;--text-dim: #555566;--glow-cyan: 0 0 10px #ffaa00, 0 0 20px #ffaa00, 0 0 30px #ffaa00;--glow-magenta: 0 0 5px #ff00ff, 0 0 10px #ff00ff;--glow-yellow: 0 0 10px #ffff00, 0 0 20px #ffff00;--glow-green: 0 0 5px #33ff00, 0 0 10px #33ff00, 0 0 20px #33ff00;--glow-red: 0 0 5px #ff0033, 0 0 10px #ff0033, 0 0 20px #ff0033;--pixel-font: "Press Start 2P", monospace;--transition-fast: .15s ease;--transition-normal: .3s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}html{font-size:16px}body{font-family:var(--pixel-font);background:var(--bg-dark);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:1rem;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);pointer-events:none;z-index:1000}.radio-container{width:100%;max-width:420px;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.radio-frame{background:var(--bg-frame);border:4px solid var(--border-color);border-radius:12px;padding:1.5rem;box-shadow:0 10px 40px #00000080,inset 0 1px #ffffff0d,0 0 0 1px #00ffff1a;position:relative}.radio-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid var(--border-color);position:relative;z-index:3}.brand-text{font-size:1rem;color:var(--neon-green);text-shadow:var(--neon-green);letter-spacing:3px}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.8}}.power-indicator{display:flex;align-items:center}.led{width:12px;height:12px;border-radius:50%;background:var(--text-dim);transition:var(--transition-normal)}.led.active{background:var(--neon-green);box-shadow:var(--glow-green);animation:led-blink 1s ease-in-out infinite}@keyframes led-blink{0%,to{opacity:1}50%{opacity:.7}}.display-panel{background:#000;border:3px solid var(--border-color);border-radius:8px;padding:1rem;margin-bottom:1rem;min-height:100px;position:relative;overflow:hidden;z-index:3}.display-panel:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(0,255,255,.03) 0%,transparent 50%);pointer-events:none}.display-label{font-size:.5rem;color:var(--neon-green);text-shadow:var(--neon-green);margin-bottom:.5rem;letter-spacing:1px}.now-playing{position:relative;z-index:1}.channel-name{font-size:.65rem;color:var(--neon-green);margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em}.track-info{font-size:.5rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:scroll-text 10s linear infinite}.visualizer-panel{background:#000;border:3px solid var(--border-color);border-radius:8px;padding:.5rem;margin-bottom:1rem;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;z-index:3}#visualizer{width:100%;height:80px;display:block}.channel-panel{margin-bottom:1rem;position:relative;z-index:3}.channel-label{font-size:.5rem;color:var(--neon-green);text-shadow:var(--neon-green);margin-bottom:.75rem;letter-spacing:1px}.channel-search{margin-bottom:1rem}.search-input{font-family:var(--pixel-font);font-size:.5rem;width:100%;padding:.75rem;background:var(--bg-dark);border:2px solid var(--border-color);border-radius:6px;color:var(--text-primary);outline:none;transition:var(--transition-fast)}.search-input::placeholder{color:var(--text-dim)}.search-input:focus{border-color:var(--neon-green);box-shadow:0 0 10px #3f03}.search-input:not(:placeholder-shown){border-color:var(--neon-magenta)}.channel-grid-wrapper{max-height:280px;overflow-y:auto;padding-right:.25rem;scrollbar-width:thin;scrollbar-color:var(--neon-cyan) var(--bg-dark)}.channel-grid-wrapper::-webkit-scrollbar{width:6px}.channel-grid-wrapper::-webkit-scrollbar-track{background:var(--bg-dark);border-radius:3px}.channel-grid-wrapper::-webkit-scrollbar-thumb{background:var(--neon-green);border-radius:3px;box-shadow:0 0 5px var(--neon-green)}.channel-grid-wrapper::-webkit-scrollbar-thumb:hover{background:var(--text-primary)}.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.loading-text{font-size:.5rem;color:var(--text-secondary);text-align:center;padding:1rem;grid-column:1 / -1;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.channel-btn{font-family:var(--pixel-font);font-size:.55rem;padding:.75rem .5rem;background:var(--bg-panel);border:2px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);text-align:center;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.3;position:relative;opacity:1}.channel-btn:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--neon-green),transparent);opacity:0;transition:var(--transition-fast)}.channel-btn:hover{border-color:var(--neon-green);color:var(--neon-green);text-shadow:0 0 5px var(--neon-green);transform:translateY(-2px)}.channel-btn:hover:before{opacity:1}.channel-btn:active{transform:translateY(0)}.channel-btn.active{background:#33ff001a;border-color:var(--neon-green);color:var(--neon-green);text-shadow:0 0 10px var(--neon-green);box-shadow:0 0 10px #33ff004d,inset 0 0 10px #33ff001a}.channel-btn.active:before{opacity:1}.controls-panel{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:6px;position:relative;z-index:3}.volume-control{display:flex;align-items:center;gap:.4rem;flex:1;min-width:0}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;height:6px;background:var(--bg-dark);border-radius:3px;border:1px solid var(--border-color);cursor:pointer;touch-action:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--neon-green);border-radius:50%;cursor:pointer;transition:var(--transition-fast)}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.volume-slider::-webkit-slider-thumb:active{box-shadow:var(--glow-green)}.volume-slider::-moz-range-thumb{width:14px;height:14px;background:var(--neon-green);border-radius:50%;cursor:pointer;border:none}.volume-slider::-moz-range-thumb:active{box-shadow:var(--glow-green)}.volume-value{font-size:.45rem;color:var(--neon-green);min-width:25px;text-align:right}.mute-btn{font-family:var(--pixel-font);font-size:.85rem;padding:.35rem .4rem;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center}.mute-btn:hover,.mute-btn.muted{border-color:var(--neon-red);box-shadow:0 0 10px #ff00334d}.mute-btn.muted .mute-icon{filter:hue-rotate(180deg)}.status-bar{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border-color);position:relative;z-index:3}.status-indicator{font-size:.5rem;color:var(--text-dim);transition:var(--transition-normal)}.status-indicator.connected{color:var(--neon-green);text-shadow:0 0 5px var(--neon-green)}.status-indicator.error{color:var(--neon-magenta);text-shadow:0 0 5px var(--neon-magenta)}.status-text{font-size:.45rem;color:var(--text-secondary)}@media (max-width: 480px){body{padding:.5rem}.radio-frame{padding:1rem;border-radius:8px}.brand-text{font-size:.8rem}.channel-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.4rem}.channel-btn{font-size:.45rem;padding:.6rem .3rem}.controls-panel{padding:.75rem;gap:.75rem}.mute-btn{font-size:.8rem;padding:.4rem}}@media (max-width: 360px){.channel-grid{grid-template-columns:repeat(3,1fr)}.controls-panel{gap:.5rem}.volume-control{gap:.35rem}.volume-value{display:none}}.hidden{display:none!important}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.channel-btn:not(.no-animation){animation:slideIn .3s ease forwards}.channel-btn:not(.no-animation):nth-child(1){animation-delay:.05s}.channel-btn:not(.no-animation):nth-child(2){animation-delay:.1s}.channel-btn:not(.no-animation):nth-child(3){animation-delay:.15s}.channel-btn:not(.no-animation):nth-child(4){animation-delay:.2s}.channel-btn:not(.no-animation):nth-child(5){animation-delay:.25s}.channel-btn:not(.no-animation):nth-child(6){animation-delay:.3s}.channel-btn:not(.no-animation):nth-child(7){animation-delay:.35s}.channel-btn:not(.no-animation):nth-child(8){animation-delay:.4s}.channel-btn:not(.no-animation):nth-child(9){animation-delay:.45s}.channel-btn:not(.no-animation):nth-child(10){animation-delay:.5s}.channel-btn:not(.no-animation):nth-child(11){animation-delay:.55s}.channel-btn:not(.no-animation):nth-child(12){animation-delay:.6s}.channel-btn.no-animation{animation:none!important;opacity:1!important;transform:translateY(0)!important}