:root{--cs-bg: #05060a;--cs-fg: #ffffff;--cs-accent: #00e5ff;--cs-panel: rgba(8, 12, 20, .82);--cs-btn: rgba(255, 255, 255, .1);--cs-btn-hover: rgba(0, 229, 255, .25);--cs-font: "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--cs-bg);color:var(--cs-fg);font-family:var(--cs-font);-webkit-user-select:none;user-select:none}#app{position:fixed;inset:0}#app canvas{display:block}.cs-hud{position:fixed;inset:0;pointer-events:none;z-index:10}.cs-hud button{pointer-events:auto}.cs-score{position:fixed;top:env(safe-area-inset-top,12px);left:50%;transform:translate(-50%);font-variant-numeric:tabular-nums;letter-spacing:.18em;font-size:clamp(14px,3.5vw,22px);font-weight:600;padding:6px 14px;background:var(--cs-panel);border-radius:999px;text-shadow:0 0 8px rgba(0,229,255,.5)}.cs-best{display:block;text-align:center;font-size:.62em;opacity:.7;letter-spacing:.1em}.cs-level{position:fixed;top:calc(env(safe-area-inset-top,12px) + 64px);left:50%;transform:translate(-50%);font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--cs-accent);background:var(--cs-panel);padding:4px 12px;border-radius:999px;opacity:.85}.cs-level.cs-pulse{animation:cs-level-pulse .9s ease-out}@keyframes cs-level-pulse{0%{transform:translate(-50%) scale(1)}30%{transform:translate(-50%) scale(1.5);box-shadow:0 0 24px #00e5ffcc}to{transform:translate(-50%) scale(1)}}.cs-score-pop{position:fixed;top:calc(env(safe-area-inset-top,12px) + 44px);left:50%;transform:translate(-50%);font-size:20px;font-weight:700;color:var(--cs-accent);text-shadow:0 0 10px rgba(0,229,255,.8);pointer-events:none;z-index:11;animation:cs-score-pop .9s ease-out forwards}@keyframes cs-score-pop{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}20%{opacity:1;transform:translate(-50%) scale(1.15)}to{opacity:0;transform:translate(-50%,-34px) scale(1)}}.cs-score-pop-penalty{color:#ff5d75;text-shadow:0 0 10px rgba(255,77,109,.7);font-size:16px}.cs-score-flash{animation:cs-score-flash .5s ease-out}@keyframes cs-score-flash{0%,to{transform:translate(-50%);background:var(--cs-panel)}20%{transform:translate(-52%);background:#a01428e6}40%{transform:translate(-48%);background:#a01428e6}60%{transform:translate(-51%)}80%{transform:translate(-49%)}}.cs-banner{position:fixed;top:32%;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;z-index:12}.cs-banner-main{font-size:clamp(26px,6vw,44px);font-weight:800;letter-spacing:.04em;color:var(--cs-fg);text-shadow:0 0 24px rgba(0,229,255,.9),0 2px 0 rgba(0,0,0,.4)}.cs-banner-sub{margin-top:6px;font-size:clamp(13px,3vw,18px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cs-accent)}.cs-banner-in{animation:cs-banner-in 3s ease-out forwards}@keyframes cs-banner-in{0%{opacity:0;transform:translate(-50%) scale(.7)}12%{opacity:1;transform:translate(-50%) scale(1.08)}20%{transform:translate(-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%) scale(1)}}.cs-lesson{position:fixed;bottom:calc(env(safe-area-inset-bottom,18px) + 112px);left:50%;transform:translate(-50%);background:#781022eb;border:1px solid rgba(255,96,120,.5);color:#ffe6ea;font-size:clamp(14px,3.2vw,17px);font-weight:600;padding:10px 18px;border-radius:12px;pointer-events:none;z-index:12;white-space:nowrap}.cs-lesson-in{animation:cs-lesson-in 1.8s ease-out forwards}@keyframes cs-lesson-in{0%{opacity:0;transform:translate(-50%,8px)}10%{opacity:1;transform:translate(-50%)}80%{opacity:1}to{opacity:0}}.cs-weapon-readout{min-width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--cs-accent);background:var(--cs-panel);border:1px solid rgba(0,229,255,.35);text-shadow:0 0 12px rgba(0,229,255,.7)}.cs-circle{width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:var(--cs-btn);color:var(--cs-fg);font-size:24px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .15s ease,transform .1s ease}.cs-circle:active{transform:scale(.92)}.cs-circle:hover{background:var(--cs-btn-hover)}.cs-top-left{position:fixed;top:env(safe-area-inset-top,12px);left:12px}.cs-top-right{position:fixed;top:env(safe-area-inset-top,12px);right:12px}.cs-weapons{position:fixed;bottom:calc(env(safe-area-inset-bottom,18px) + 18px);left:50%;transform:translate(-50%);display:flex;gap:28px;align-items:center}.cs-weapons .cs-circle{width:72px;height:72px;font-size:34px}.cs-settings{position:fixed;bottom:14px;right:14px;display:flex;flex-direction:column;gap:4px;font-size:12px;opacity:.7;background:var(--cs-panel);padding:8px 12px;border-radius:10px;pointer-events:auto}.cs-settings label{display:flex;align-items:center;gap:6px;cursor:pointer}.cs-combo{position:fixed;top:calc(env(safe-area-inset-top,12px) + 96px);left:50%;transform:translate(-50%);font-size:13px;font-weight:800;letter-spacing:.18em;color:#ffd166;background:var(--cs-panel);border:1px solid rgba(255,209,102,.4);padding:4px 14px;border-radius:999px;text-shadow:0 0 10px rgba(255,209,102,.7);z-index:11}.cs-combo.cs-pulse{animation:cs-level-pulse .9s ease-out}.cs-score-pop-at{left:auto;top:auto;transform:none;animation:cs-score-pop-at .9s ease-out forwards}@keyframes cs-score-pop-at{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}20%{opacity:1;transform:translate(-50%) scale(1.2)}to{opacity:0;transform:translate(-50%,-44px) scale(1)}}.cs-lesson-good{background:#78540aeb;border-color:#ffd16699;color:#fff3d6}.cs-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#030408b8;backdrop-filter:blur(4px)}.cs-screen[hidden]{display:none}.cs-card{width:min(92vw,460px);background:var(--cs-panel);border:1px solid rgba(0,229,255,.2);border-radius:18px;padding:28px;text-align:center;box-shadow:0 20px 60px #00000080}.cs-card h1{margin:0 0 6px;font-size:30px;letter-spacing:.04em}.cs-card .cs-sub{margin:0 0 18px;color:var(--cs-accent);font-size:14px}.cs-card p{font-size:14px;line-height:1.5;opacity:.85}.cs-btn{appearance:none;border:none;border-radius:12px;padding:14px 22px;margin:8px 6px 0;font-size:16px;font-weight:600;cursor:pointer;background:var(--cs-accent);color:#04161a;transition:transform .1s ease,filter .15s ease}.cs-btn.secondary{background:var(--cs-btn);color:var(--cs-fg)}.cs-btn:active{transform:scale(.96)}.cs-btn:hover{filter:brightness(1.1)}.cs-row{display:flex;justify-content:center;gap:6px}.cs-card-home{width:min(94vw,560px)}.cs-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:4px 0 14px}.cs-mode-card{appearance:none;text-align:left;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:var(--cs-btn);color:var(--cs-fg);padding:10px 12px;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease}.cs-mode-card:hover{background:var(--cs-btn-hover)}.cs-mode-card:active{transform:scale(.97)}.cs-mode-card.active{border-color:var(--cs-accent);background:#00e5ff24;box-shadow:0 0 14px #00e5ff40}.cs-mode-name{font-size:14px;font-weight:700;margin-bottom:3px}.cs-mode-desc{font-size:11.5px;line-height:1.35;opacity:.75}.cs-mode-best{margin-top:5px;font-size:10.5px;letter-spacing:.08em;color:var(--cs-accent);min-height:13px}.cs-pace-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}.cs-pace-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.cs-pace{display:inline-flex;border-radius:999px;border:1px solid rgba(255,255,255,.16);overflow:hidden}.cs-pace-btn{appearance:none;border:none;background:transparent;color:var(--cs-fg);font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;transition:background .15s ease,color .15s ease}.cs-pace-btn.active{background:var(--cs-accent);color:#04161a}.cs-gameover-score{font-size:40px;font-weight:700;margin:10px 0 2px;text-shadow:0 0 12px rgba(0,229,255,.5)}