:root{--bg-deep: #0d0a2e;--bg-mid: #171245;--panel: rgba(23, 18, 69, .72);--ink: #eef0ff;--ink-dim: #a9aed6;--cyan: #35e0ff;--magenta: #ff3d8f;--lime: #a4ff3d;--gold: #ffd75e;--orange: #ff9f40;--red: #ff4455;--green: #4dff9b;--tile-bg: rgba(255, 255, 255, .06);--tile-border: rgba(120, 140, 255, .35);--focus-ring: 0 0 0 3px rgba(53, 224, 255, .85)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:radial-gradient(120% 120% at 50% 0%,var(--bg-mid) 0%,var(--bg-deep) 60%,#060418 100%);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}#app{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:stretch;justify-content:center}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.bg{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.blob{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(70px);opacity:.35;will-change:transform}.blob-a{background:radial-gradient(circle,#3d2bff 0%,transparent 65%);top:-20vmax;left:-12vmax;animation:drift-a 26s ease-in-out infinite alternate}.blob-b{background:radial-gradient(circle,#ff3d8f 0%,transparent 65%);bottom:-25vmax;right:-15vmax;animation:drift-b 31s ease-in-out infinite alternate}.blob-c{background:radial-gradient(circle,#00c2a8 0%,transparent 65%);top:30%;left:55%;width:40vmax;height:40vmax;animation:drift-c 37s ease-in-out infinite alternate}@keyframes drift-a{to{transform:translate(14vmax,10vmax) scale(1.15)}}@keyframes drift-b{to{transform:translate(-12vmax,-8vmax) scale(1.1)}}@keyframes drift-c{to{transform:translate(-16vmax,10vmax) scale(.9)}}.page-hidden .blob{animation-play-state:paused}.screen{position:relative;z-index:1;width:100%;max-width:900px;height:100dvh;display:flex;flex-direction:column;align-items:center;padding:max(10px,env(safe-area-inset-top)) 16px max(10px,env(safe-area-inset-bottom));overflow-y:auto}button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}button:focus-visible{outline:none;box-shadow:var(--focus-ring)}.sound-toggle{position:fixed;top:max(10px,env(safe-area-inset-top));right:12px;z-index:40;font-size:20px;width:42px;height:42px;border-radius:12px;background:var(--panel);border:1px solid var(--tile-border)}.start-screen{justify-content:center;gap:clamp(12px,3vh,28px);text-align:center}.brand-kicker{color:var(--ink-dim);letter-spacing:3px;text-transform:uppercase;font-size:clamp(10px,1.6vh,13px);margin-bottom:6px}.title{line-height:1.02;font-weight:900}.title-line1{display:block;font-size:clamp(22px,4.5vh,40px);letter-spacing:2px;color:var(--gold);text-transform:uppercase}.title-line2{display:block;font-size:clamp(42px,9vh,84px);letter-spacing:1px;text-transform:uppercase;background:linear-gradient(92deg,var(--cyan) 0%,var(--lime) 30%,var(--gold) 55%,var(--orange) 75%,var(--magenta) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(53,224,255,.35))}.tagline{font-size:clamp(16px,2.6vh,24px);letter-spacing:6px;text-transform:uppercase;color:var(--cyan);font-weight:700}.section-label{font-size:clamp(12px,1.8vh,15px);letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}.grade-grid{display:grid;grid-template-columns:repeat(6,minmax(44px,60px));gap:8px;justify-content:center}.grade-btn{aspect-ratio:1;border-radius:12px;font-size:clamp(16px,2.6vh,22px);font-weight:800;background:var(--tile-bg);border:1px solid var(--tile-border);transition:transform .12s,border-color .12s,background .12s}.grade-btn:hover{transform:translateY(-2px);border-color:var(--cyan)}.grade-btn.active{background:linear-gradient(160deg,#35e0ff40,#ff3d8f40);border-color:var(--cyan);box-shadow:0 0 18px #35e0ff66}.grade-desc{max-width:560px;min-height:2.6em;margin-top:12px;color:var(--ink);font-size:clamp(13px,2vh,16px);line-height:1.45}.grade-best{margin-top:4px;color:var(--gold);font-size:clamp(12px,1.8vh,14px);font-weight:600}.start-btn{font-size:clamp(20px,3.4vh,30px);font-weight:900;letter-spacing:3px;text-transform:uppercase;padding:clamp(12px,2vh,18px) clamp(38px,8vw,72px);border-radius:999px;color:#08051f;background:linear-gradient(92deg,var(--cyan),var(--lime) 55%,var(--gold));box-shadow:0 8px 32px #35e0ff73;transition:transform .12s,box-shadow .12s}.start-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 40px #a4ff3d80}.start-foot{color:var(--ink-dim);font-size:clamp(11px,1.7vh,14px);display:flex;flex-direction:column;gap:4px;align-items:center}.foot-link{color:var(--cyan);text-decoration:none;font-weight:700}.foot-link:hover{text-decoration:underline}.game-screen{justify-content:center;gap:clamp(6px,1.4vh,14px);overflow:hidden}.aiming .game-screen{cursor:none}.hud{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding-right:48px;padding-left:4px;width:100%}.hud-chip{background:var(--panel);border:1px solid var(--tile-border);border-radius:999px;padding:4px 12px;font-size:clamp(11px,1.8vh,14px);font-weight:700;white-space:nowrap}.hud-grade{color:var(--gold);border-color:#ffd75e80}.hud-score{color:var(--cyan);font-size:clamp(14px,2.2vh,18px)}.hud-score.bump{animation:bump .25s ease-out}@keyframes bump{40%{transform:scale(1.18)}}.strikes{display:flex;gap:6px;align-items:center;padding:0 4px}.strike-dot{width:clamp(14px,2.4vh,20px);height:clamp(14px,2.4vh,20px);border-radius:50%;border:2px solid var(--green);background:radial-gradient(circle,#4dff9bd9,#4dff9b26 70%);box-shadow:0 0 8px #4dff9b99;transition:all .25s}.strike-dot.lost{border-color:var(--red);background:radial-gradient(circle,#ff4455e6,#ff44551a 70%);box-shadow:0 0 10px #ff4455b3;transform:scale(.85)}.problem{min-height:clamp(44px,8vh,76px);display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(18px,calc(2vh + 2.2vw),38px);font-weight:800;letter-spacing:.5px;padding:4px 10px;text-shadow:0 2px 18px rgba(53,224,255,.35)}.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(6px,1.4vmin,14px);width:min(100%,calc(100dvh - clamp(150px,24vh,210px)),540px);aspect-ratio:1;margin:0 auto;flex-shrink:0}.tile{display:flex;align-items:center;justify-content:center;border-radius:clamp(8px,1.4vmin,14px);background:var(--tile-bg);border:1px solid var(--tile-border);font-weight:800;font-size:clamp(22px,5.6vmin,44px);font-variant-numeric:tabular-nums;color:var(--ink);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:transform .09s,border-color .09s,background .09s;overflow:hidden;padding:2px;-webkit-tap-highlight-color:transparent}.tile[data-len="5"],.tile[data-len="6"]{font-size:clamp(17px,4.4vmin,34px)}.tile[data-len="7"],.tile[data-len="8"]{font-size:clamp(14px,3.6vmin,28px)}.tile.placeholder{background:#ffffff06}.tile:not(.placeholder):hover{border-color:var(--cyan);background:#35e0ff17;transform:scale(1.035)}.tile:not(.placeholder):active{transform:scale(.96)}.tile.hit{background:radial-gradient(circle,#4dff9b8c,#4dff9b26);border-color:var(--green);color:#06130b;animation:hit-burst .25s ease-out}@keyframes hit-burst{0%{transform:scale(1);box-shadow:0 0 #4dff9bcc}60%{transform:scale(1.12)}to{transform:scale(1.05);box-shadow:0 0 26px 8px #4dff9b00}}.tile.miss{border-color:var(--red);background:#ff44554d;animation:miss-pulse .45s ease-out}@keyframes miss-pulse{0%,40%,80%{background:#ff44558c}20%,60%{background:#f453}}.tile.reveal{border-color:var(--gold);background:#ffd75e4d;box-shadow:0 0 18px #ffd75ea6}.game-screen.shake{animation:shake .35s}@keyframes shake{20%{transform:translate(-6px,2px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#08051feb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.countdown-num{font-size:clamp(64px,20vh,160px);font-weight:900;letter-spacing:4px;background:linear-gradient(92deg,var(--cyan),var(--gold),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}.countdown-num.pop{animation:pop .6s ease-out}@keyframes pop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.12);opacity:1}to{transform:scale(1)}}.crosshair{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;z-index:30;display:none;will-change:transform}.crosshair.visible{display:block}.crosshair:before{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 10px #35e0ffb3,inset 0 0 6px #35e0ff66}.crosshair:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(var(--cyan),var(--cyan)) 50% 0 / 2px 10px no-repeat,linear-gradient(var(--cyan),var(--cyan)) 50% 100% / 2px 10px no-repeat,linear-gradient(var(--cyan),var(--cyan)) 0 50% / 10px 2px no-repeat,linear-gradient(var(--cyan),var(--cyan)) 100% 50% / 10px 2px no-repeat}.impact{position:fixed;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--gold);pointer-events:none;z-index:29;animation:impact-ring .4s ease-out forwards}@keyframes impact-ring{0%{transform:scale(.4);opacity:1}to{transform:scale(3.2);opacity:0}}.results-screen{justify-content:center;gap:clamp(8px,2vh,18px);text-align:center}.results-title{font-size:clamp(28px,5vh,48px);font-weight:900;letter-spacing:3px;text-transform:uppercase;color:var(--magenta);text-shadow:0 0 24px rgba(255,61,143,.5)}.new-best{font-size:clamp(16px,2.6vh,22px);font-weight:800;color:var(--gold);animation:pop .6s ease-out}.final-score-num{font-size:clamp(48px,11vh,92px);font-weight:900;background:linear-gradient(92deg,var(--cyan),var(--lime),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}.final-score-label{color:var(--ink-dim);font-size:clamp(13px,2vh,16px);letter-spacing:1px}.stats{width:min(92vw,420px);background:var(--panel);border:1px solid var(--tile-border);border-radius:16px;padding:clamp(8px,1.6vh,16px) 18px;animation:rise .4s ease-out}@keyframes rise{0%{transform:translateY(16px);opacity:0}}.stat-row{display:flex;justify-content:space-between;gap:12px;padding:clamp(2px,.7vh,6px) 0;font-size:clamp(12px,1.9vh,15px)}.stat-label{color:var(--ink-dim)}.stat-value{font-weight:800;font-variant-numeric:tabular-nums}.results-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.btn{font-size:clamp(14px,2.2vh,17px);font-weight:800;letter-spacing:1px;padding:12px 26px;border-radius:999px;background:var(--tile-bg);border:1px solid var(--tile-border);transition:transform .12s,border-color .12s}.btn:hover{transform:translateY(-2px);border-color:var(--cyan)}.btn-primary{color:#08051f;background:linear-gradient(92deg,var(--cyan),var(--lime));border:none;box-shadow:0 6px 24px #35e0ff66}.results-foot{color:var(--ink-dim);font-size:12px;letter-spacing:1px}@media (prefers-reduced-motion: reduce){.blob,.hud-score.bump,.countdown-num.pop,.new-best,.stats,.tile.hit,.tile.miss,.game-screen.shake,.impact{animation:none!important}.tile,.grade-btn,.btn,.start-btn{transition:none}}@media (max-width: 480px){.hud{gap:4px;padding-right:46px}.hud-chip{padding:3px 8px}.grid{width:min(100%,calc(100dvh - 170px));gap:4px}.grade-grid{grid-template-columns:repeat(6,minmax(40px,52px));gap:6px}}