:root{--bg: #08090b;--panel: #121317;--panel-2: #17181d;--border: #23252b;--green: #2be07a;--green-dim: rgba(43,224,122,.14);--text: #f2f3f5;--text-dim: #8b8d95;--yellow: #d9a441;--orange: #e0722b;--red: #e5484d;--purple: #a86bf0}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);background-image:radial-gradient(circle at 20% 0%,rgba(43,224,122,.07),transparent 45%),radial-gradient(circle at 85% 100%,rgba(168,107,240,.06),transparent 40%);color:var(--text);font-family:Space Grotesk,system-ui,sans-serif;min-height:100vh}.wrap{max-width:460px;margin:0 auto;padding:40px 20px 60px;min-height:100vh;display:flex;flex-direction:column;position:relative}.reveal-btn{position:fixed;top:18px;right:18px;z-index:20;display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1.5px solid #3a3c44;background:var(--panel-2);color:var(--text-dim);font-size:12px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:border-color .15s ease,color .15s ease,opacity .15s ease}.reveal-btn:hover{border-color:var(--red);color:var(--red)}.reveal-btn:disabled{opacity:.3;cursor:not-allowed}.reveal-btn svg{width:14px;height:14px}.brand{text-align:center;margin-bottom:22px}.brand .logo{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--green);font-weight:700}.brand .sub{font-size:12px;color:var(--text-dim);margin-top:4px}.modes{display:flex;gap:8px;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:4px;margin-bottom:18px}.mode-btn{flex:1;text-align:center;padding:9px 8px;border-radius:999px;border:none;background:transparent;color:var(--text-dim);font-size:13px;font-weight:700;cursor:pointer;transition:background .15s ease,color .15s ease}.mode-btn.active{background:var(--green);color:#08090b}.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}.pill{border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;border:1.5px solid transparent;background:var(--panel-2);color:var(--text-dim);cursor:pointer;transition:transform .12s ease,border-color .15s ease,color .15s ease,background .15s ease;-webkit-tap-highlight-color:transparent}.pill:hover{transform:translateY(-1px)}.pill.easy.active{background:#2be07a29;color:var(--green);border-color:var(--green)}.pill.medium.active{background:#d9a44129;color:var(--yellow);border-color:var(--yellow)}.pill.hard.active{background:#e0722b29;color:var(--orange);border-color:var(--orange)}.pill.expert.active{background:#e5484d29;color:var(--red);border-color:var(--red)}.pill.impossible.active{background:#a86bf029;color:var(--purple);border-color:var(--purple)}.track{position:relative;height:14px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border);overflow:hidden;display:flex;margin-bottom:8px}.seg{height:100%;position:relative;border-right:2px solid var(--bg)}.seg:last-child{border-right:none}.seg .fill{height:100%;width:0%;background:var(--green);transition:width .05s linear}.seg.done .fill{width:100%;background:#2be07a8c}.seg.wrong .fill{width:100%;background:#e5484d80}.track-meta{display:flex;justify-content:space-between;font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-dim);margin-bottom:30px}.player{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:34px}.play-btn{width:128px;height:128px;border-radius:50%;background:var(--green);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 #2be07a66;transition:box-shadow .5s ease,transform .12s ease,filter .15s ease;position:relative;flex-shrink:0}.play-btn:hover{filter:brightness(1.06)}.play-btn:active{transform:scale(.97)}.play-btn.playing{box-shadow:0 0 0 14px #2be07a0f}.play-btn svg{width:44px;height:44px}.play-btn.loading{opacity:.55;cursor:wait}.timer{font-family:JetBrains Mono,monospace;font-size:22px;font-weight:700;color:var(--green);min-width:64px}.controls{display:flex;gap:10px;position:relative}.search-box{flex:1;position:relative;display:flex;align-items:center;border:1.5px solid var(--green);border-radius:999px;padding:0 16px;background:var(--panel);height:52px}.search-box svg{width:17px;height:17px;color:var(--text-dim);flex-shrink:0}.search-box input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:Space Grotesk,sans-serif;font-size:15px;padding:0 10px;min-width:0}.search-box input::placeholder{color:var(--text-dim)}.search-box input:disabled{opacity:.4}.skip-btn{display:flex;align-items:center;gap:6px;padding:0 20px;height:52px;border-radius:999px;border:1.5px solid #3a3c44;background:var(--panel-2);color:var(--text);font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;transition:border-color .15s ease,opacity .15s ease}.skip-btn:hover{border-color:var(--text-dim)}.skip-btn:disabled{opacity:.35;cursor:not-allowed}.skip-btn svg{width:16px;height:16px}.suggestions{position:absolute;top:58px;left:0;right:0;background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;z-index:5;max-height:260px;overflow-y:auto;box-shadow:0 12px 30px #0006}.suggestions button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 16px;background:none;border:none;border-bottom:1px solid var(--border);color:var(--text);text-align:left;cursor:pointer;font-family:Space Grotesk,sans-serif}.suggestions button:last-child{border-bottom:none}.suggestions button:hover{background:var(--panel-2)}.suggestions .s-title{font-size:14px;font-weight:600}.suggestions .s-artist{font-size:12px;color:var(--text-dim)}.attempts{display:flex;gap:8px;justify-content:center;margin-top:22px;flex-wrap:wrap}.attempt-chip{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;border:1.5px solid var(--border);color:var(--text-dim);font-family:JetBrains Mono,monospace}.attempt-chip.current{border-color:var(--green);color:var(--green)}.attempt-chip.wrong{background:#e5484d1f;border-color:var(--red);color:var(--red)}.attempt-chip.correct{background:#2be07a24;border-color:var(--green);color:var(--green)}.status-msg{text-align:center;font-size:13px;color:var(--text-dim);margin-top:14px;min-height:18px}.result{margin-top:28px;background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:20px;display:none;gap:16px;align-items:center}.result.show{display:flex}.result img{width:72px;height:72px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--panel-2)}.result .info{flex:1;min-width:0}.result .r-status{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.result.win .r-status{color:var(--green)}.result.lose .r-status{color:var(--red)}.result .r-title{font-size:16px;font-weight:700;margin-top:2px}.result .r-artist{font-size:13px;color:var(--text-dim)}.next-btn{margin-top:16px;width:100%;padding:14px;border-radius:14px;border:none;background:var(--green);color:#08090b;font-weight:700;font-size:15px;cursor:pointer;display:none}.next-btn.show{display:block}footer{margin-top:auto;padding-top:40px;text-align:center;font-size:11px;color:#4b4d55}@media (max-width: 380px){.play-btn{width:104px;height:104px}.play-btn svg{width:36px;height:36px}.reveal-btn span{display:none}}.empty-state{text-align:center;padding:40px 0}.empty-state p{color:var(--text-dim);font-size:14px;line-height:1.6;margin:0 0 20px}.empty-state button{padding:14px 26px;border-radius:14px;border:none;background:var(--green);color:#08090b;font-family:Space Grotesk,sans-serif;font-weight:700;font-size:15px;cursor:pointer}.game-hidden{display:none!important}.reveal-btn[hidden]{display:none}.import-btn{margin-top:10px;padding:7px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--panel-2);color:var(--text-dim);font-family:Space Grotesk,sans-serif;font-size:12px;font-weight:700;cursor:pointer}.import-btn:hover{border-color:var(--green);color:var(--green)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:flex;align-items:center;justify-content:center;padding:20px;z-index:40}.modal{background:var(--panel);border:1px solid var(--border);border-radius:20px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;padding:22px}.modal h2{margin:0 0 4px;font-size:18px}.modal .modal-sub{color:var(--text-dim);font-size:12px;margin-bottom:16px}.modal-tabs{display:flex;gap:6px;margin-bottom:16px}.modal-tab{flex:1;padding:9px;border-radius:999px;border:none;background:var(--panel-2);color:var(--text-dim);font-family:Space Grotesk,sans-serif;font-weight:700;font-size:13px;cursor:pointer}.modal-tab.active{background:var(--green);color:#08090b}.modal textarea,.modal input[type=text]{width:100%;background:var(--panel-2);border:1.5px solid var(--border);border-radius:12px;color:var(--text);font-family:Space Grotesk,sans-serif;font-size:14px;padding:12px;outline:none}.modal textarea{min-height:160px;resize:vertical}.modal input[type=text]:focus,.modal textarea:focus{border-color:var(--green)}.modal-row{display:flex;gap:8px;align-items:center;margin-top:10px}.modal-hint{font-size:11px;color:var(--text-dim);line-height:1.5;margin-top:8px}.modal-hint a{color:var(--green)}.modal-error{font-size:12px;color:var(--red);margin-top:10px;line-height:1.5}.modal-preview{margin-top:12px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-dim)}.modal-preview strong{color:var(--text);font-weight:500}.modal-actions{display:flex;gap:8px;margin-top:18px}.modal-actions button{flex:1;padding:13px;border-radius:12px;border:none;font-family:Space Grotesk,sans-serif;font-weight:700;font-size:14px;cursor:pointer}.btn-primary{background:var(--green);color:#08090b}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-ghost{background:var(--panel-2);color:var(--text-dim);border:1.5px solid var(--border)!important}.progress-bar{height:8px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border);overflow:hidden;margin-top:12px}.progress-bar .fill{height:100%;width:0%;background:var(--green);transition:width .2s ease}.review-list{margin-top:12px;max-height:46vh;overflow-y:auto;border:1px solid var(--border);border-radius:12px}.review-row{display:flex;gap:6px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--border)}.review-row:last-child{border-bottom:none}.review-row.low{background:#d9a44112}.review-row input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-family:Space Grotesk,sans-serif;font-size:13px;padding:4px 6px;border-radius:6px}.review-row input:focus{background:var(--panel-2)}.review-row .sep{color:var(--text-dim);font-size:12px}.review-row button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px}.review-row button:hover{color:var(--red)}.modal-actions[hidden]{display:none}.playlist-picker{display:flex;gap:8px;align-items:center;margin-bottom:14px}.playlist-picker[hidden]{display:none}.playlist-picker select{flex:1;height:40px;padding:0 12px;background:var(--panel-2);color:var(--text);border:1.5px solid var(--border);border-radius:999px;font-family:Space Grotesk,sans-serif;font-size:13px;font-weight:600;outline:none;cursor:pointer}.playlist-picker select:focus{border-color:var(--green)}.playlist-picker .delete-playlist{height:40px;width:40px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--border);background:var(--panel-2);color:var(--text-dim);font-size:15px;cursor:pointer}.playlist-picker .delete-playlist:hover{border-color:var(--red);color:var(--red)}.playlist-picker .delete-playlist[hidden]{display:none}.genre-filter{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:20px}.genre-filter[hidden]{display:none}.genre-chip{padding:6px 12px;border-radius:999px;border:1.5px solid var(--border);background:var(--panel-2);color:var(--text-dim);font-family:Space Grotesk,sans-serif;font-size:12px;font-weight:600;cursor:pointer}.genre-chip.active{border-color:var(--purple);color:var(--purple);background:#a86bf024}.genre-chip .count{opacity:.6;margin-left:4px;font-size:11px}.stats-panel{margin-top:26px;padding:16px;background:var(--panel);border:1px solid var(--border);border-radius:16px}.stats-row{display:flex;justify-content:space-around;margin-bottom:14px}.stats-cell{text-align:center}.stats-cell .value{font-family:JetBrains Mono,monospace;font-size:20px;font-weight:700;color:var(--green)}.stats-cell .label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.stats-dist{display:flex;flex-direction:column;gap:4px}.stats-bar{display:flex;align-items:center;gap:8px;font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-dim)}.stats-bar .fill{height:14px;border-radius:4px;background:var(--green-dim);border:1px solid var(--green);min-width:3px}.stats-bar .n{width:10px}.daily-toggle{width:100%;margin-bottom:14px;padding:10px;border-radius:999px;border:1.5px solid var(--border);background:var(--panel-2);color:var(--text-dim);font-family:Space Grotesk,sans-serif;font-weight:700;font-size:13px;cursor:pointer}.daily-toggle.active{border-color:var(--purple);color:var(--purple);background:#a86bf024}.share-btn{margin-top:10px;width:100%;padding:12px;border-radius:12px;border:1.5px solid var(--purple);background:#a86bf024;color:var(--purple);font-family:Space Grotesk,sans-serif;font-weight:700;font-size:14px;cursor:pointer}.share-btn[hidden]{display:none}.playlist-picker .export-default{height:40px;width:40px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--border);background:var(--panel-2);color:var(--text-dim);font-size:15px;cursor:pointer}.playlist-picker .export-default:hover{border-color:var(--green);color:var(--green)}.playlist-picker .export-default[hidden]{display:none}.playlist-picker .share-playlist{height:40px;width:40px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--border);background:var(--panel-2);color:var(--text-dim);font-size:15px;cursor:pointer}.playlist-picker .share-playlist:hover{border-color:var(--purple);color:var(--purple)}