:root{--bg:#0b0820;--panel:#1a1740;--text:#f4f2ff;--muted:#a9a4cc;--accent:#8f7bff;--u:clamp(26px, calc((100vw - 48px) / 15.4), 54px);color:var(--text);font-family:Segoe UI,Nunito,system-ui,-apple-system,Roboto,Arial,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0;overflow:hidden}button{font:inherit;cursor:pointer}#app{flex-direction:column;height:100vh;display:flex}#stage{background:radial-gradient(at 50% 0,#2a2160 0%,#0b0820 70%);flex:1;min-height:0;position:relative}#stage.shake{animation:.3s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}#canvas-wrap{position:absolute;inset:0}#canvas-wrap canvas{display:block;width:100%!important;height:100%!important}#popups{pointer-events:none;position:absolute;inset:0;overflow:hidden}.hidden{display:none!important}#hud{pointer-events:none;position:absolute;inset:0}#hud .hud-row{align-items:center;gap:16px;padding:12px 18px;font-weight:700;display:flex}#hud-level{color:var(--muted);flex:1;font-size:1.05rem}#hud-score-wrap{flex-direction:column;align-items:flex-end;line-height:1;display:flex}#hud-score-wrap .label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}#hud-score{font-variant-numeric:tabular-nums;font-size:1.7rem}#hud-pause{pointer-events:auto}#progress{background:#ffffff1f;border-radius:3px;height:6px;margin:0 18px;overflow:hidden}#progress-bar{background:linear-gradient(90deg,#5be36b,#4fc3f7,#c56cff);width:0;height:100%;transition:width .2s}#hud-combo{text-align:center;color:#ffe14d;text-shadow:0 2px 12px #00000080;font-size:1.4rem;font-weight:800;transition:transform .15s;position:absolute;top:90px;left:0;right:0}#hud-combo.big{color:#ff9f43;font-size:2rem}#word{text-align:center;position:absolute;top:130px;left:0;right:0}#word-current{letter-spacing:.12em;text-transform:uppercase;font-size:clamp(1.8rem,4vw,3rem);font-weight:800}#word-current span{color:#ffffff73}#word-current span.done{color:#5be36b}#word-current span.cur{color:#fff;text-underline-offset:6px;-webkit-text-decoration:underline #ffe14d;text-decoration:underline #ffe14d;text-decoration-thickness:4px}#word-next{color:var(--muted);margin-top:4px;font-size:.95rem}#countdown{text-align:center;opacity:0;text-shadow:0 6px 30px #0009;font-size:6rem;font-weight:900;position:absolute;top:40%;left:0;right:0}#countdown.pop{animation:.9s ease-out forwards pop}@keyframes pop{0%{opacity:1;transform:scale(.6)}40%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(1.3)}}.popup{white-space:nowrap;color:var(--c,#fff);text-shadow:0 2px 8px #0009;font-size:1.2rem;font-weight:900;animation:.9s ease-out forwards rise;position:absolute;transform:translate(-50%,-50%)}.popup.perfekt{font-size:1.5rem}.popup.miss,.popup.wrong{color:#ff5c5c}.popup.early{color:#ffe14d;font-size:1rem}@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%)scale(.7)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.05)}to{opacity:0;transform:translate(-50%,-160%)scale(1)}}.screen{position:absolute;inset:0;overflow:auto}#menu{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0b0820b8}.menu-inner{max-width:980px;margin:0 auto;padding:24px 20px 40px}.logo{letter-spacing:-.02em;background:linear-gradient(90deg,#ff5c8a,#ffe14d,#5be36b,#4fc3f7,#c56cff);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(2.6rem,6vw,4.2rem);font-weight:900}.tagline{margin:4px 0 8px;font-size:1.15rem}.tagline .kf,.tagline .kj{color:#1a1740;border-radius:6px;padding:0 10px;display:inline-block}.tagline .kf{background:#5be36b}.tagline .kj{background:#4fc3f7}.howto{color:var(--muted);max-width:760px;margin:0 0 14px}#legend{color:var(--muted);flex-wrap:wrap;gap:8px 14px;margin-bottom:18px;font-size:.85rem;display:flex}.legend-item i{vertical-align:-2px;border-radius:3px;width:12px;height:12px;margin-right:6px;display:inline-block}#levels{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;display:grid}.level-card{text-align:left;color:var(--text);background:var(--panel);border:2px solid #ffffff14;border-radius:14px;align-items:center;gap:12px;padding:12px 14px;transition:transform .12s,border-color .12s;display:flex}.level-card:not(:disabled):hover{border-color:var(--accent);transform:translateY(-2px)}.level-card.locked{opacity:.45;cursor:not-allowed}.lv-num{background:var(--accent);border-radius:12px;flex:none;place-items:center;width:40px;height:40px;font-size:1.1rem;font-weight:900;display:grid}.lv-body{flex:1;min-width:0}.lv-name{font-weight:800}.lv-desc{color:var(--muted);font-size:.85rem}.lv-keys{color:var(--muted);flex-wrap:wrap;gap:4px;margin-top:6px;font-size:.8rem;display:flex}.kchip{background:var(--c);color:#1a1740;border-radius:6px;place-items:center;width:22px;height:22px;font-weight:800;display:inline-grid}.lv-right{text-align:right;flex:none}.lv-best{color:var(--muted);font-size:.75rem}.star{color:#ffffff2e;font-size:1.2rem}.star.on{color:#ffe14d;text-shadow:0 0 10px #ffe14d99}.stars-big .star{font-size:3.2rem}.lock{font-size:1.3rem}.menu-footer{gap:10px;margin-top:20px;display:flex}.btn{background:var(--panel);color:var(--text);border:2px solid #ffffff26;border-radius:12px;padding:10px 18px;font-weight:700}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.ghost{background:0 0}.btn.small{padding:4px 10px;font-size:.8rem}#result,.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0b0820b3;place-items:center;display:grid}.overlay{z-index:5;position:absolute;inset:0}.card{background:var(--panel);text-align:center;border-radius:20px;min-width:320px;max-width:560px;padding:28px 32px;box-shadow:0 20px 60px #00000080}.card h2{margin:0 0 8px;font-size:2rem}.result-grid{justify-content:center;gap:36px;margin:14px 0;display:flex}.result-grid .label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;display:block}.result-grid .value{font-size:2rem;font-weight:900}#result-details{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-bottom:18px;font-size:.9rem;display:flex}#result-details .perfekt{color:#5be36b}#result-details .gut{color:#4fc3f7}#result-details .ok{color:#ffe14d}#result-details .miss,#result-details .wrong{color:#ff5c5c}.btn-row{justify-content:center;gap:10px;display:flex}#keyboard{-webkit-user-select:none;user-select:none;background:linear-gradient(#141133,#0d0a24);border-top:1px solid #ffffff14;flex-direction:column;flex:none;align-items:center;gap:5px;padding:10px 12px 12px;display:flex}.kbd-row{gap:5px;display:flex}.key{--c:#6b6690;--w:1;width:calc(var(--u) * var(--w) + 5px * (var(--w) - 1));height:calc(var(--u) * .78);font-weight:800;font-size:calc(var(--u) * .36);color:#fff;background:color-mix(in srgb, var(--c) 22%, #1d1a45);border:1px solid color-mix(in srgb, var(--c) 45%, transparent);box-shadow:0 3px 0 color-mix(in srgb, var(--c) 30%, #000);border-radius:7px;place-items:center;transition:background 80ms,transform 50ms,box-shadow 80ms;display:grid;position:relative}.key.mod{--c:#56527a;color:#b4afd6;font-size:calc(var(--u) * .26)}.key.home:after{content:"";background:var(--c);border-radius:2px;width:36%;height:3px;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}.key.hint{border-color:#fff;animation:.8s ease-in-out infinite alternate hint}@keyframes hint{0%{box-shadow:0 3px 0 color-mix(in srgb, var(--c) 30%, #000), 0 0 0 0 color-mix(in srgb, var(--c) 80%, transparent)}to{box-shadow:0 3px 0 color-mix(in srgb, var(--c) 30%, #000), 0 0 18px 4px var(--c)}}.key.lit{background:var(--c);color:#1a1740;box-shadow:0 0 0 color-mix(in srgb, var(--c) 30%, #000), 0 0 22px var(--c);transform:translateY(3px)}.key.mod.lit{color:#fff}.key.wrong{background:#ff3b3b!important;box-shadow:0 0 22px #ff3b3b!important}@media (height<=600px){#keyboard{padding:6px 8px}:root{--u:clamp(22px, calc((100vw - 48px) / 15.4), 40px)}}