*{margin:0;padding:0;box-sizing:border-box}body{background:#000;overflow:hidden;font-family:Courier New,monospace;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:fixed;width:100%;height:100%}canvas{display:block;position:fixed;top:0;left:0;transition:transform .2s ease}.game-hud{position:fixed;bottom:30px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:40px;z-index:1000;pointer-events:none}.hud-item{display:flex;flex-direction:column;align-items:center;gap:4px}.hud-label{font-family:Fredoka,sans-serif;font-size:11px;letter-spacing:1px;color:#ffffff80;text-transform:lowercase}.hud-value{font-family:Fredoka,sans-serif;font-size:36px;font-weight:700;color:#fff;text-shadow:0 0 15px rgba(255,255,255,.4),2px 2px 0 rgba(0,0,0,.3);min-width:80px;text-align:center;letter-spacing:-1px}.hud-value.time{color:#4ecdc4;text-shadow:0 0 20px rgba(78,205,196,.8);transition:transform .1s ease}.hud-value.time.warning{animation:timeWarning .5s ease-in-out infinite}.hud-value.time.danger{animation:timeDanger .2s ease-in-out infinite}.hud-value.time.critical{animation:timeCritical .1s ease-in-out infinite}@keyframes timeWarning{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes timeDanger{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.1) rotate(-2deg)}75%{transform:scale(1.1) rotate(2deg)}}@keyframes timeCritical{0%,to{transform:scale(1) translate(0)}25%{transform:scale(1.15) translate(-3px)}75%{transform:scale(1.15) translate(3px)}}.hud-value.score{color:gold;text-shadow:0 0 20px rgba(255,215,0,.8)}.hud-value.combo{color:#ff6b6b;text-shadow:0 0 20px rgba(255,107,107,.8)}.hud-value.wpm{color:#bb8fce;text-shadow:0 0 20px rgba(187,143,206,.8)}.hud-value.combo.pulse{animation:comboPulse .3s ease-out}@keyframes comboPulse{0%{transform:scale(1.5)}to{transform:scale(1)}}@media(max-width:768px){.game-hud{gap:20px;bottom:20px}.hud-value{font-size:24px;min-width:60px}.hud-label{font-size:10px}}body.keyboard-open .game-hud{bottom:auto;top:20px;transform:translate(-50%) scale(.85)}body.keyboard-open .lang-selector{opacity:0;pointer-events:none}.intro-description{position:fixed;bottom:60px;left:50%;transform:translate(-50%);text-align:center;z-index:100;pointer-events:none;transition:opacity .5s ease}.intro-description .intro-hint{font-family:Courier New,monospace;font-size:14px;color:#fff9;letter-spacing:2px;margin-bottom:20px;animation:blink 1.5s ease-in-out infinite}.intro-description .intro-guide{font-family:Courier New,monospace;font-size:11px;color:#fff6;line-height:1.8;max-width:400px}@keyframes blink{0%,to{opacity:.6}50%{opacity:1}}@media(max-width:768px){.intro-description{bottom:100px;padding:0 20px}.intro-description .intro-guide{font-size:10px}}.intro-start-btn{position:fixed;bottom:120px;left:50%;transform:translate(-50%);padding:16px 48px;font-family:Courier New,monospace;font-size:16px;letter-spacing:3px;color:#fff;background:#ffffff1a;border:2px solid rgba(255,255,255,.4);border-radius:50px;cursor:pointer;z-index:101;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease,opacity .5s ease}.intro-start-btn:hover{background:#fff3;border-color:#fffc;transform:translate(-50%) scale(1.05)}.intro-start-btn:active{transform:translate(-50%) scale(.95)}@media(max-width:768px){.intro-start-btn{bottom:140px;padding:14px 36px;font-size:14px}}.mobile-restart-btn{display:none;position:fixed;bottom:160px;left:50%;transform:translate(-50%);padding:12px 24px;font-size:12px;font-family:Courier New,monospace;color:#fff;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:50px;cursor:pointer;z-index:10002;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s ease}.mobile-restart-btn:active{transform:translate(-50%) scale(.95)}.hidden-input{position:fixed;top:0;left:0;width:100%;height:50px;font-size:16px;color:transparent;background:transparent;border:none;outline:none;caret-color:transparent;-webkit-text-fill-color:transparent;-webkit-user-select:text;user-select:text;z-index:1;pointer-events:auto}.live-ranking{position:fixed;left:30px;bottom:30px;width:200px;background:#000000b3;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:15px;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:Fredoka,sans-serif}.live-ranking-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}.live-dot{width:8px;height:8px;background:#f44;border-radius:50%;animation:livePulse 1s ease-in-out infinite}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.live-title{font-size:11px;font-weight:600;color:#fffc;letter-spacing:1px;text-transform:uppercase}.live-ranking-list{display:flex;flex-direction:column;gap:6px}.live-ranking-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;transition:background .2s}.live-ranking-item.highlight{background:#4ecdc433;animation:highlightPulse 2s ease-in-out infinite}@keyframes highlightPulse{0%,to{background:#4ecdc433}50%{background:#4ecdc459}}.live-rank{font-size:12px;font-weight:700;width:22px;text-align:center}.live-rank.gold{color:gold}.live-rank.silver{color:silver}.live-rank.bronze{color:#cd7f32}.live-rank.normal{color:#ffffff80}.live-name{flex:1;font-size:12px;color:#fffc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-score{font-size:12px;font-weight:600;color:#4ecdc4}.live-empty{font-size:11px;color:#ffffff4d;text-align:center;padding:10px 0}.live-offline{font-size:10px;color:#ffffff4d;text-align:center;margin-top:8px}@media(max-width:768px){.live-ranking{display:none!important}}.nickname-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f2;z-index:3000;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:20px;box-sizing:border-box}.nickname-modal.show{display:flex;animation:fadeIn .3s ease}.nickname-modal>*{flex-shrink:0}.nickname-modal.keyboard-open{align-items:center;justify-content:flex-start;padding-top:60px}.nickname-modal.keyboard-open .nickname-title{font-size:20px;margin-bottom:8px}.nickname-modal.keyboard-open .nickname-subtitle{margin-bottom:20px;font-size:11px}.nickname-modal.keyboard-open .nickname-input{width:260px;padding:14px 20px;font-size:16px}.nickname-modal.keyboard-open .nickname-btn{margin-top:15px;padding:12px 30px;font-size:15px}.nickname-modal.keyboard-open .nickname-skip{margin-top:10px;font-size:11px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.nickname-title{font-family:Fredoka,sans-serif;font-size:28px;color:#fff;margin-bottom:10px}.nickname-subtitle{font-family:Fredoka,sans-serif;font-size:14px;color:#ffffff80;margin-bottom:30px}.nickname-input{width:280px;padding:16px 24px;font-family:Fredoka,sans-serif;font-size:18px;text-align:center;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:50px;color:#fff;outline:none;transition:all .3s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation}.nickname-input:focus{border-color:#4ecdc4;background:#4ecdc41a}@media(max-width:768px){.nickname-input{width:240px;padding:14px 20px;font-size:16px}.nickname-title{font-size:22px}.nickname-subtitle{font-size:12px}.nickname-btn{padding:12px 32px;font-size:16px}}.nickname-input::placeholder{color:#ffffff4d}.nickname-btn{margin-top:20px;padding:14px 40px;font-family:Fredoka,sans-serif;font-size:18px;font-weight:600;background:#4ecdc4;border:none;border-radius:50px;color:#000;cursor:pointer;transition:all .3s ease}.nickname-btn:hover{transform:scale(1.05);background:#5de0d7}.nickname-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.nickname-skip{margin-top:15px;font-family:Fredoka,sans-serif;font-size:13px;color:#fff6;background:none;border:none;cursor:pointer;transition:color .2s}.nickname-skip:hover{color:#ffffffb3}.dev-btn{display:none;position:fixed;top:20px;right:20px;width:40px;height:40px;background:#f003;border:1px solid rgba(255,0,0,.4);border-radius:50%;font-size:18px;cursor:pointer;z-index:9999;transition:all .2s}.dev-btn:hover{background:#f006;transform:scale(1.1)}.lang-selector{position:fixed;bottom:30px;right:40px;z-index:1000;display:flex;gap:8px}.lang-btn{width:48px;height:48px;background:linear-gradient(180deg,#1e1e23f2,#0f0f14f2);border:2px solid rgba(255,255,255,.15);color:#ffffff80;font-family:Bebas Neue,sans-serif;font-size:16px;letter-spacing:1px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 4px 15px #00000080,inset 0 1px #ffffff1a}.lang-btn:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 100%);border-radius:10px 10px 0 0;pointer-events:none}.lang-btn:hover{color:#ffffffe6;border-color:#ffffff4d;transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px #0009,inset 0 1px #ffffff26}.lang-btn.active{background:linear-gradient(180deg,#4ecdc44d,#4ecdc426);border-color:#4ecdc4;color:#4ecdc4;text-shadow:0 0 12px rgba(78,205,196,.8);box-shadow:0 4px 20px #4ecdc466,0 0 30px #4ecdc433,inset 0 1px #fff3}.lang-btn.active:after{content:"";position:absolute;bottom:-2px;left:50%;transform:translate(-50%);width:6px;height:6px;background:#4ecdc4;border-radius:50%;box-shadow:0 0 10px #4ecdc4}@media(max-width:768px){.lang-selector{bottom:100px;right:50%;transform:translate(50%);gap:6px}.lang-btn{width:40px;height:40px;font-size:13px;border-radius:10px}}.nickname-btn:disabled{opacity:.35;cursor:default}.lang-btn{cursor:default}button:focus-visible{outline:2px solid #4ecdc4;outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.theme-toggle{position:fixed;top:max(20px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));z-index:10010;min-height:44px;padding:10px 18px;border:1px solid rgba(255,255,255,.25);border-radius:50px;background:#0f0f14cc;color:#ffffffbf;font:11px Courier New,monospace;letter-spacing:1.5px;cursor:pointer;touch-action:manipulation}.theme-toggle:hover{border-color:#4ecdc4;color:#4ecdc4}@media(max-width:768px){.theme-toggle{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));padding:10px 14px;font-size:10px}body.keyboard-open .theme-toggle{top:auto;bottom:14px}}:root[data-theme=day] body{background:#f5f7f4}:root[data-theme=day] .theme-toggle{background:#f5f7f4e6;color:#43555a;border-color:#18232940}:root[data-theme=day] .theme-toggle:hover{color:#087f78;border-color:#087f78}:root[data-theme=day] .hud-label,:root[data-theme=day] .nickname-subtitle{color:#526267}:root[data-theme=day] .hud-value{color:#182329;text-shadow:none}:root[data-theme=day] .hud-value.time{color:#087f78;text-shadow:none!important}:root[data-theme=day] .hud-value.score{color:#9c7300}:root[data-theme=day] .hud-value.combo{color:#c43549}:root[data-theme=day] .hud-value.wpm{color:#81509a}:root[data-theme=day] .intro-description .intro-guide,:root[data-theme=day] .intro-description .intro-hint{color:#526267}:root[data-theme=day] .intro-start-btn,:root[data-theme=day] .mobile-restart-btn{background:#1823290a;color:#182329;border-color:#18232959}:root[data-theme=day] .intro-start-btn:hover{background:#18232917;border-color:#182329}:root[data-theme=day] .live-ranking{background:#f5f7f4e6;border-color:#18232926}:root[data-theme=day] .live-ranking-header{border-color:#18232926}:root[data-theme=day] .live-title,:root[data-theme=day] .live-name{color:#34474c}:root[data-theme=day] .live-rank.gold{color:#9c7300}:root[data-theme=day] .live-rank.silver{color:#59676d}:root[data-theme=day] .live-rank.bronze{color:#976032}:root[data-theme=day] .live-rank.normal,:root[data-theme=day] .live-empty,:root[data-theme=day] .live-offline{color:#66757a}:root[data-theme=day] .live-score{color:#087f78}:root[data-theme=day] .nickname-modal{background:#f5f7f4f7}:root[data-theme=day] .nickname-title{color:#182329}:root[data-theme=day] .nickname-input{color:#182329;background:#1823290a;border-color:#1823294d}:root[data-theme=day] .nickname-input::placeholder{color:#738186}:root[data-theme=day] .nickname-input:focus{border-color:#087f78;background:#087f780f}:root[data-theme=day] .nickname-btn{background:#087f78;color:#f5f7f4}:root[data-theme=day] .nickname-btn:hover{background:#096d68}:root[data-theme=day] .nickname-skip{color:#526267}:root[data-theme=day] .nickname-skip:hover{color:#182329}:root[data-theme=day] .lang-btn.active{background:linear-gradient(180deg,#087f781a,#087f780a);color:#087f78;border-color:#087f78;text-shadow:none;box-shadow:0 4px 15px #087f781f}:root[data-theme=day] .lang-btn.active:after{background:#087f78;box-shadow:none}:root[data-theme=day] button:focus-visible{outline-color:#087f78}.showcase-back{position:fixed;top:max(20px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));z-index:10011;display:flex;align-items:center;min-height:44px;padding:0 8px;font:11px Courier New,monospace;letter-spacing:1.5px;color:#c6c6c9;text-decoration:none}.showcase-back[hidden]{display:none}.showcase-back:hover,.showcase-back:focus-visible{color:#4ecdc4}body[data-showcase] .theme-toggle{top:max(72px,calc(env(safe-area-inset-top) + 52px))}:root[data-theme=day] .showcase-back{color:#43555a}:root[data-theme=day] .showcase-back:hover{color:#087f78}@media(max-width:768px){.showcase-back{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));font-size:10px}body[data-showcase] .theme-toggle{top:max(64px,calc(env(safe-area-inset-top) + 52px))}body[data-showcase].keyboard-open .theme-toggle{top:auto}body[data-showcase].keyboard-open .game-hud{top:max(68px,calc(env(safe-area-inset-top) + 56px))}}