:root{color:#24324a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#24324a;--muted:#667085;--surface:#fff;--primary:#6558d3;--primary-dark:#5045b5;--primary-soft:#eeeafd;--accent:#ffb84d;--page-bg:#f7f4ff;--card-bg:#fffffff0;--tile-bg:#fff;--tile-border:#d9d4f4;--track-bg:#e8e5f4;--overlay-bg:#ffffffc7;--soft-overlay-bg:#ffffff4d;--on-primary:#fff;--danger:#912018;--danger-border:#b42318;--best-color:#8a4f00;background:#f7f4ff;font-family:Inter,ui-rounded,Segoe UI,system-ui,sans-serif}:root[data-theme=dark]{color:#f4f1ff;--ink:#f4f1ff;--muted:#c9c3df;--surface:#2a2542;--primary:#9d90ff;--primary-dark:#c0b7ff;--primary-soft:#342e52;--accent:#ffc66d;--page-bg:#171426;--card-bg:#211d34f7;--tile-bg:#2a2542;--tile-border:#554d78;--track-bg:#48415f;--overlay-bg:#171426d6;--soft-overlay-bg:#17142673;--on-primary:#171426;--danger:#ffaaa3;--danger-border:#ff8178;--best-color:#ffd089;background:#171426}*{box-sizing:border-box}body{background:radial-gradient(circle at 10% 5%, #ffb84d33, transparent 28%), radial-gradient(circle at 90% 15%, #6558d32e, transparent 30%), var(--page-bg);min-width:320px;min-height:100vh;margin:0}button{font:inherit}button:focus-visible{outline:4px solid var(--primary-dark);outline-offset:3px;box-shadow:0 0 0 7px #ffb84da6}#root{min-height:100vh}.app{background:var(--card-bg);text-align:center;border:1px solid #6558d324;border-radius:28px;width:min(100% - 24px,620px);min-height:calc(100vh - 32px);margin:16px auto;padding:24px clamp(14px,4vw,32px) 30px;position:relative;box-shadow:0 18px 50px #41357e1f}.theme-toggle,.language-toggle{border:1px solid var(--tile-border);background:var(--surface);min-height:38px;color:var(--ink);cursor:pointer;border-radius:999px;align-items:center;gap:5px;padding:7px 10px;font-size:13px;font-weight:750;display:inline-flex;position:absolute;top:18px;right:20px}.language-toggle{left:20px;right:auto}.theme-toggle:hover,.language-toggle:hover{background:var(--primary-soft)}.app h1{color:var(--ink);letter-spacing:-1.5px;margin:0;font-size:clamp(32px,8vw,46px);line-height:1.05}.tagline{color:var(--primary);margin:6px 0 4px;font-size:19px;font-weight:800}.instructions{min-height:24px;color:var(--muted);margin:0 auto 14px;font-size:15px}.mode-selector{flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 16px;display:flex}.mode-button{border:2px solid var(--primary);background:var(--surface);min-height:42px;color:var(--primary-dark);cursor:pointer;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:750;transition:background-color .15s,color .15s,transform .15s}.mode-button:hover:not(:disabled){background:var(--primary-soft);transform:translateY(-1px)}.mode-button.active{background:var(--primary);color:var(--on-primary)}.mode-button:disabled{cursor:not-allowed;opacity:.62}.timer{min-height:26px;color:var(--muted);font-variant-numeric:tabular-nums;justify-content:center;gap:18px;font-size:16px;font-weight:750;display:flex}.best-time{color:var(--primary)}.action-area{justify-content:center;align-items:center;min-height:58px;display:flex}.start-button,.play-again{background:var(--primary);min-height:46px;box-shadow:0 5px 0 var(--primary-dark);color:var(--on-primary);cursor:pointer;border:0;border-radius:14px;padding:10px 24px;font-size:17px;font-weight:800}.cancel-button{border:2px solid var(--danger-border);background:var(--tile-bg);min-height:44px;color:var(--danger);cursor:pointer;border-radius:14px;padding:9px 18px;font-size:15px;font-weight:800}.cancel-button:hover{background:var(--primary-soft)}.start-button:hover,.play-again:hover{background:var(--primary-dark)}.start-button:active,.play-again:active{box-shadow:0 2px 0 var(--primary-dark);transform:translateY(3px)}.target{justify-content:center;align-items:center;gap:14px;margin:4px auto 18px;display:flex}.target-label{color:var(--ink);letter-spacing:3px;font-size:19px;font-weight:850}.target-number{background:var(--primary);width:68px;height:68px;box-shadow:0 7px 0 var(--primary-dark);color:var(--on-primary);border-radius:18px;justify-content:center;align-items:center;font-size:38px;font-weight:900;display:flex}.grid-wrapper{width:fit-content;margin:0 auto;position:relative}.grid{grid-template-columns:repeat(4,70px);justify-content:center;gap:8px;display:grid}.grid.grid-small{grid-template-columns:repeat(3,70px)}.grid.grid-emojis{grid-template-columns:repeat(3,92px)}.grid.grid-ten-frames{grid-template-columns:repeat(2,132px);gap:10px}.number-box{border:2px solid var(--tile-border);background:var(--tile-bg);width:70px;height:70px;box-shadow:0 4px 0 var(--tile-border);color:var(--ink);cursor:pointer;border-radius:15px;font-size:22px;font-weight:850;transition:background-color .12s,transform .12s}.number-box:hover:not(:disabled){background:var(--primary-soft);transform:translateY(-2px)}.number-box:active:not(:disabled){box-shadow:0 1px 0 var(--tile-border);transform:translateY(3px)}.number-box:disabled{cursor:default;opacity:.82}.number-box.emoji-box{width:92px;height:92px}.number-box.ten-frame-box{width:132px;height:72px}.dot-pattern{grid-template-rows:repeat(3,12px);grid-template-columns:repeat(3,12px);place-content:center;gap:5px;display:grid}.dot,.dot-space{width:12px;height:12px}.dot{background:var(--ink);border-radius:50%}.emoji-pattern{grid-template-columns:repeat(3,24px);justify-content:center;align-items:center;gap:2px;font-size:23px;line-height:1;display:grid}.ten-frame{grid-template-rows:repeat(2,18px);grid-template-columns:repeat(5,18px);justify-content:center;gap:3px;display:grid}.ten-frame-dot{border:2px solid var(--muted);border-radius:4px;width:18px;height:18px}.ten-frame-dot.filled{border-color:var(--primary);background:var(--primary);border-radius:50%}.progress-container{background:var(--track-bg);border-radius:999px;width:304px;height:12px;margin:18px auto 0;overflow:hidden}.progress-container.small{width:226px}.progress-container.emojis{width:292px}.progress-container.ten-frames{width:274px}.progress-bar{border-radius:inherit;background:linear-gradient(90deg, var(--primary), #8a7ff0);height:100%;transition:width .2s}.progress-0{width:0%}.progress-1{width:10%}.progress-2{width:20%}.progress-3{width:30%}.progress-4{width:40%}.progress-5{width:50%}.progress-6{width:60%}.progress-7{width:70%}.progress-8{width:80%}.progress-9{width:90%}.progress-10{width:100%}.results{background:var(--primary-soft);min-height:150px;color:var(--ink);border-radius:18px;margin-top:18px;padding:16px}.results h3{margin:0 0 6px;font-size:23px}.results p{margin:4px 0 12px}.results .new-best{color:var(--best-color);font-weight:850}.play-again{margin-top:6px}.countdown-overlay{z-index:10;background:var(--overlay-bg);color:var(--primary);border-radius:18px;justify-content:center;align-items:center;font-size:72px;font-weight:900;display:flex;position:absolute;inset:0}.wrong-answer-overlay{z-index:100;background:var(--soft-overlay-bg);cursor:not-allowed;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.wrong-answer-overlay span{color:#dc2626d1;text-shadow:0 8px 24px #7f1d1d40;font-size:clamp(180px,45vw,420px);font-weight:900;line-height:.75}.creator-credit{color:var(--muted);border-top:1px solid #6558d31f;margin-top:52px;padding-top:18px;font-size:13px}.reset-best-area{min-height:32px;margin-top:44px}.reset-best-button{color:var(--muted);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:6px 8px;font-size:13px;text-decoration:underline}.reset-best-button:hover{color:var(--primary-dark)}.reset-confirmation{border:1px solid var(--tile-border);background:var(--surface);border-radius:14px;width:min(100%,390px);margin:0 auto;padding:14px}.reset-confirmation p{color:var(--ink);margin:0 0 12px;font-size:14px;font-weight:700}.reset-confirmation-actions{justify-content:center;gap:10px;display:flex}.reset-confirmation-actions button{border:1px solid var(--tile-border);background:var(--tile-bg);min-height:38px;color:var(--ink);cursor:pointer;border-radius:10px;padding:7px 12px;font-weight:750}.reset-confirmation-actions .confirm-reset-button{border-color:var(--danger-border);color:var(--danger)}.reset-best-area+.creator-credit{margin-top:18px}.creator-credit a{color:var(--primary-dark);text-underline-offset:3px;font-weight:700}.creator-credit a:hover{color:var(--primary)}@media (width<=420px){.app{border:0;border-radius:0;width:100%;min-height:100vh;margin:0;padding:18px 10px 26px}.theme-toggle{width:fit-content;margin:0 0 10px auto;display:flex;position:static}.mode-selector{gap:6px}.mode-button{padding-inline:10px;font-size:13px}}@media (width<=350px){.grid{grid-template-columns:repeat(4,66px);gap:6px}.number-box{width:66px;height:66px}.grid.grid-emojis{grid-template-columns:repeat(3,90px)}.number-box.emoji-box{width:90px;height:90px}.progress-container,.progress-container.emojis{width:282px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}