@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #0f0f23;--bg-panel: #1a1a2e;--border-color: #4a4a6a;--accent-cyan: #00fff7;--accent-magenta: #ff00ff;--accent-yellow: #ffff00;--accent-green: #00ff00;--accent-orange: #ff9900;--text-primary: #ffffff;--text-secondary: #8888aa}body{font-family:"Press Start 2P",cursive;background:var(--bg-dark);color:var(--text-primary);min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:9999}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--bg-dark);border-left:4px solid var(--border-color)}::-webkit-scrollbar-thumb{background:var(--border-color);border:2px solid var(--bg-dark)}::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}#root{width:100%;min-height:100vh}.player-container{width:100%;max-width:600px;background:var(--bg-panel);border:4px solid var(--border-color);padding:20px}.now-playing{text-align:center;margin-bottom:20px;padding:16px;background:#0000004d;border:2px solid var(--border-color)}.now-playing-label{font-size:8px;color:var(--accent-green);margin-bottom:12px;letter-spacing:2px}.now-playing-content{display:flex;align-items:center;gap:16px}.cover-image{flex-shrink:0;width:140px;height:140px;border:3px solid var(--border-color);background:#2a2a4e;overflow:hidden;box-shadow:0 0 15px #00fff733,inset 0 0 10px #00000080;cursor:pointer;transition:transform .2s,box-shadow .2s}.cover-image:hover{transform:scale(1.05);box-shadow:0 0 25px #00fff766,inset 0 0 10px #00000080}.image-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:pointer;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay-content{position:relative;display:flex;align-items:center;justify-content:center}.expanded-image-wrapper{position:relative;border:4px solid var(--accent-cyan);box-shadow:0 0 40px #00fff780;animation:scaleIn .2s ease-out}.expanded-image-wrapper img{width:100%;height:100%;display:block;image-rendering:pixelated}.expanded-image-wrapper:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,0,0,.3) 2px,rgba(0,0,0,.3) 4px);pointer-events:none;z-index:2}.overlay-track-info{position:absolute;top:12px;left:12px;padding:12px;background:#000000d9;border:2px solid var(--border-color);animation:fadeIn .3s ease-out;z-index:1}.overlay-title{font-size:14px;color:var(--accent-cyan);text-shadow:0 0 10px var(--accent-cyan);margin-bottom:8px}.overlay-game{font-size:12px;color:var(--accent-yellow);margin-bottom:4px}.overlay-system{font-size:10px;color:var(--accent-magenta);margin-bottom:4px}.overlay-author{font-size:10px;color:var(--accent-orange);margin-bottom:8px}.overlay-length{font-size:10px;color:var(--text-secondary)}.overlay-visualizer{position:absolute;bottom:12px;left:12px;right:12px;height:160px;z-index:1}.overlay-visualizer canvas{width:100%;height:100%;display:block}@keyframes scaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@media(orientation:portrait){.overlay-content{flex-direction:column;gap:12px;max-height:100vh;padding:12px;overflow:auto}.overlay-track-info{position:static;order:1;width:100%;max-width:90vw}.expanded-image-wrapper{order:2;max-width:90vw;max-height:50vh}.expanded-image-wrapper img{object-fit:contain}.overlay-visualizer{position:static;order:3;width:100%;max-width:90vw;height:100px}}.cover-image img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.track-info{flex:1;min-width:0;min-height:60px;text-align:left;overflow:hidden}.track-title{font-size:12px;color:var(--accent-cyan);text-shadow:0 0 10px var(--accent-cyan);margin-bottom:8px;word-break:break-word;overflow-wrap:anywhere}.track-title.empty{color:var(--text-secondary);text-shadow:none}.track-game{font-size:10px;color:var(--accent-yellow);margin-bottom:4px;overflow-wrap:anywhere}.track-system{font-size:8px;color:var(--accent-magenta);margin-bottom:8px}.track-author{font-size:8px;color:var(--accent-orange);margin-bottom:8px;overflow-wrap:anywhere}.track-length{font-size:10px;color:var(--text-secondary)}.track-time{font-size:10px;color:var(--text-secondary);display:flex;align-items:center;flex-wrap:wrap;gap:4px}.time-elapsed{color:var(--accent-cyan)}.time-separator{opacity:.5}.time-total{color:var(--text-secondary)}.time-remaining{color:var(--accent-yellow);margin-left:8px;opacity:.8}.controls{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.control-btn{font-family:"Press Start 2P",cursive;font-size:16px;width:50px;height:50px;background:linear-gradient(180deg,#4a4a6a,#2a2a4a);border:3px solid var(--border-color);color:var(--text-primary);cursor:pointer;transition:all .1s;display:flex;align-items:center;justify-content:center}.control-btn:hover{background:linear-gradient(180deg,#5a5a7a,#3a3a5a);border-color:var(--accent-cyan);box-shadow:0 0 10px #00fff74d}.control-btn:active{transform:scale(.95)}.play-btn{width:60px;height:60px;font-size:20px;border-color:var(--accent-cyan)}.stop-btn:hover{border-color:var(--accent-magenta);box-shadow:0 0 10px #ff00ff4d}.share-btn:hover{border-color:var(--accent-green);box-shadow:0 0 10px #00ff004d}.toast-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;border:3px solid var(--accent-green);color:var(--accent-green);padding:16px 32px;font-family:"Press Start 2P",cursive;font-size:12px;z-index:1000;animation:toast-fade 2s ease-in-out;box-shadow:0 0 20px #0f06}@keyframes toast-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}.visualizer canvas{width:100%;height:100%;display:block}.visualizer{display:flex;justify-content:center;align-items:center;height:120px;margin-bottom:20px;padding:8px;background:#0000004d;border:2px solid var(--border-color)}.track-list{border:2px solid var(--border-color);background:#0000004d}.track-list-header{font-size:8px;color:var(--accent-orange);padding:8px 12px;background:#0000004d;border-bottom:2px solid var(--border-color);letter-spacing:2px}.track-list-scroll{max-height:200px;overflow-y:auto}.track-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer;border-bottom:1px solid rgba(74,74,106,.3);transition:all .1s}.track-item:hover{background:#00fff71a}.track-item.active{background:#00fff733;border-left:4px solid var(--accent-cyan)}.track-number{font-size:8px;color:var(--accent-yellow);width:24px;flex-shrink:0}.track-name{font-size:9px;color:var(--accent-cyan);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;text-shadow:0 0 5px rgba(0,255,247,.3)}.track-item.active .track-name{color:var(--accent-yellow);text-shadow:0 0 8px rgba(255,255,0,.5)}.track-duration{font-size:8px;color:var(--text-secondary);flex-shrink:0}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(180deg,#2a2a4e,#1a1a2e);border-bottom:4px solid var(--accent-cyan);padding:20px;text-align:center;position:relative}.header:after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:4px;background:var(--accent-magenta);opacity:.5}.visitor-counter{position:absolute;top:8px;left:8px;height:20px}.version{font-size:8px;color:var(--text-secondary);opacity:.6;margin-left:8px}.install-button{font-family:"Press Start 2P",cursive;font-size:8px;padding:8px 12px;background:linear-gradient(180deg,#4a4a8a,#2a2a5a);border:3px solid var(--accent-green);color:var(--accent-green);cursor:pointer;transition:all .2s}.install-button:hover{background:linear-gradient(180deg,#5a5a9a,#3a3a6a);box-shadow:0 0 15px #0f06;transform:scale(1.05)}.install-button:active{transform:scale(.98)}.header-buttons{display:flex;gap:8px}.help-button{font-family:"Press Start 2P",cursive;font-size:10px;width:32px;height:32px;background:linear-gradient(180deg,#4a4a8a,#2a2a5a);border:3px solid var(--accent-cyan);color:var(--accent-cyan);cursor:pointer;transition:all .2s}.help-button:hover{background:linear-gradient(180deg,#5a5a9a,#3a3a6a);box-shadow:0 0 15px #00fff766;transform:scale(1.05)}.help-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000}.help-modal{background:var(--bg-panel);border:4px solid var(--accent-cyan);padding:24px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 0 30px #00fff74d}.help-close{position:absolute;top:12px;right:12px;font-family:"Press Start 2P",cursive;font-size:10px;background:none;border:2px solid var(--text-secondary);color:var(--text-secondary);width:28px;height:28px;cursor:pointer;transition:all .2s}.help-close:hover{border-color:var(--accent-magenta);color:var(--accent-magenta)}.help-title{font-size:16px;color:var(--accent-cyan);text-align:center;margin-bottom:20px;text-shadow:0 0 10px rgba(0,255,247,.5)}.help-section{margin-bottom:20px}.help-section h3{font-size:10px;color:var(--accent-yellow);margin-bottom:12px;border-bottom:2px solid var(--border-color);padding-bottom:6px}.help-shortcuts{display:flex;flex-direction:column;gap:8px}.help-key{font-size:8px;color:var(--text-secondary);display:flex;align-items:center;gap:12px}.help-key span{background:var(--bg-dark);border:2px solid var(--border-color);color:var(--accent-cyan);padding:4px 8px;min-width:60px;text-align:center}.help-features{list-style:none;padding:0;margin:0}.help-features li{font-size:8px;color:var(--text-secondary);padding:6px 0;border-bottom:1px solid var(--border-color)}.help-features li:last-child{border-bottom:none}.help-about{font-size:8px;color:var(--text-secondary);line-height:1.8}.title-row{display:flex;align-items:center;justify-content:center;gap:16px}.title{font-size:24px;color:var(--accent-cyan);text-shadow:0 0 10px var(--accent-cyan),0 0 20px var(--accent-cyan),4px 4px 0 #000;letter-spacing:4px;animation:glow 2s ease-in-out infinite alternate}@keyframes glow{0%{text-shadow:0 0 10px var(--accent-cyan),0 0 20px var(--accent-cyan),4px 4px 0 #000}to{text-shadow:0 0 20px var(--accent-cyan),0 0 40px var(--accent-cyan),0 0 60px var(--accent-magenta),4px 4px 0 #000}}.subtitle{font-size:10px;color:var(--text-secondary);margin-top:10px;letter-spacing:2px}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;padding:40px 20px;background:radial-gradient(ellipse at center,#1a1a3e,#0f0f23 70%)}.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1200px;width:100%;margin-top:30px}.game-card{background:var(--bg-panel);border:4px solid var(--border-color);padding:0;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%,rgba(0,0,0,.2) 100%);pointer-events:none}.game-card:hover{transform:translateY(-4px);border-color:var(--accent-cyan);box-shadow:0 0 20px #00fff74d,inset 0 0 20px #00fff71a}.game-card:active{transform:translateY(0)}.game-card.favorite{border-color:var(--accent-yellow)}.game-card.favorite:hover{border-color:var(--accent-cyan)}.favorite-btn{position:absolute;top:8px;right:8px;z-index:10;width:32px;height:32px;border:none;background:#0009;color:var(--text-secondary);font-size:18px;cursor:pointer;transition:background .2s,transform .2s;display:flex;align-items:center;justify-content:center;border-radius:4px}.favorite-btn:hover{background:#000c;color:var(--accent-yellow);transform:scale(1.1)}.favorite-btn.active{color:var(--accent-yellow);text-shadow:0 0 10px var(--accent-yellow)}.favorite-btn.active:hover{color:var(--text-secondary)}.game-image{width:100%;height:180px;object-fit:cover;border-bottom:4px solid var(--border-color);image-rendering:pixelated;background:#2a2a4e;display:flex;align-items:center;justify-content:center}.game-image img{max-width:100%;max-height:100%;image-rendering:pixelated}.game-placeholder{font-size:48px;opacity:.5}.game-info{padding:16px}.game-title{font-size:14px;color:var(--accent-cyan);margin-bottom:12px;line-height:1.4;text-shadow:0 0 10px rgba(0,255,247,.5),2px 2px 0 #000}.game-title small{font-size:10px;color:var(--accent-yellow);text-shadow:none;opacity:.8}.game-system{font-size:8px;color:var(--accent-green);display:inline-block;padding:4px 8px;background:#00ff001a;border:2px solid var(--accent-green)}.game-tracks{font-size:8px;color:var(--text-secondary);margin-top:8px}.game-author{font-size:7px;color:var(--accent-cyan);margin-top:6px;opacity:.8}.section-title{font-size:14px;color:var(--accent-orange);text-align:center;margin-bottom:10px;text-shadow:2px 2px 0 #000}.section-divider{width:100%;max-width:600px;height:4px;background:linear-gradient(90deg,transparent,var(--accent-orange),var(--accent-yellow),var(--accent-orange),transparent);margin:0 auto 20px}.filter-section{margin-bottom:24px}.search-box{position:relative;max-width:400px;margin:0 auto 12px}.search-input{font-family:"Press Start 2P",cursive;font-size:10px;width:100%;padding:10px 36px 10px 14px;background:var(--bg-panel);border:3px solid var(--border-color);color:var(--text-primary);outline:none;transition:all .2s;box-sizing:border-box}.search-input::placeholder{color:var(--text-secondary);opacity:.6}.search-input:focus{border-color:var(--accent-cyan);box-shadow:0 0 10px #00fff733}.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer;padding:4px 8px;line-height:1}.search-clear:hover{color:var(--accent-magenta)}.filter-row{display:flex;justify-content:center;align-items:center;gap:16px}.filter-toggle{display:flex;gap:8px}.filter-count{font-family:"Press Start 2P",cursive;font-size:8px;color:var(--text-secondary)}.filter-btn{font-family:"Press Start 2P",cursive;font-size:8px;padding:8px 16px;background:var(--bg-panel);border:3px solid var(--border-color);color:var(--text-secondary);cursor:pointer;transition:all .2s}.filter-btn:hover{border-color:var(--accent-cyan);color:var(--text-primary)}.filter-btn.active{background:linear-gradient(180deg,#3a3a6a,#2a2a4a);border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:0 0 10px #00fff74d}.footer{background:var(--bg-panel);border-top:4px solid var(--border-color);padding:20px;text-align:center}.footer-text{font-size:8px;color:var(--text-secondary);line-height:2}.footer-link{color:var(--accent-cyan);text-decoration:none}.footer-link:hover{color:var(--accent-magenta);text-decoration:underline}.start-section{text-align:center;margin-bottom:40px}.start-button{font-family:"Press Start 2P",cursive;font-size:16px;padding:20px 40px;background:linear-gradient(180deg,#4a4a8a,#2a2a5a);border:4px solid var(--accent-cyan);color:var(--text-primary);cursor:pointer;position:relative;transition:all .2s}.start-button:hover{background:linear-gradient(180deg,#5a5a9a,#3a3a6a);box-shadow:0 0 20px var(--accent-cyan),inset 0 0 20px #00fff733;transform:scale(1.05)}.start-button:active{transform:scale(.98)}.blink{animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}.loading-text{font-size:12px;color:var(--accent-cyan);animation:blink .5s step-end infinite}.loading-bar{width:200px;height:20px;background:var(--bg-dark);border:4px solid var(--border-color);margin-top:20px;overflow:hidden}.loading-progress{height:100%;background:linear-gradient(90deg,var(--accent-green),var(--accent-cyan));animation:loading 2s ease-in-out infinite}.loading-progress.real{animation:none;transition:width .3s ease}@keyframes loading{0%{width:0%}50%{width:100%}to{width:0%}}.empty-state{text-align:center;padding:60px 20px}.empty-icon{font-size:64px;margin-bottom:20px;opacity:.5}.empty-text{font-size:12px;color:var(--text-secondary);line-height:2}.back-button{font-family:"Press Start 2P",cursive;font-size:10px;padding:10px 16px;background:linear-gradient(180deg,#4a4a6a,#2a2a4a);border:3px solid var(--border-color);color:var(--text-primary);cursor:pointer;transition:all .2s;margin-right:20px}.back-button:hover{border-color:var(--accent-cyan);box-shadow:0 0 10px #00fff74d}.current-game-title{font-size:14px;color:var(--accent-yellow);text-shadow:2px 2px 0 #000}