: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}.top-controls{justify-content:space-between;align-items:center;display:flex;position:absolute;top:18px;left:20px;right:20px}.theme-toggle,.language-toggle,.settings-toggle{border:1px solid var(--tile-border);background:var(--surface);min-height:38px;color:var(--ink);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:5px;padding:7px 10px;font-size:13px;font-weight:750;display:inline-flex}.theme-toggle:hover,.language-toggle:hover,.settings-toggle:hover{background:var(--primary-soft)}.language-toggle{min-width:44px}.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}.active-mode{color:var(--primary);margin:0 0 8px;font-size:15px;font-weight:850}.settings-panel{z-index:30;border:1px solid var(--tile-border);background:var(--surface);border-radius:16px;flex-direction:column;justify-content:center;align-items:stretch;gap:14px;width:min(100% - 40px,330px);padding:14px;display:flex;position:absolute;top:64px;right:20px;box-shadow:0 14px 34px #241c4c3d}.settings-panel:before{border-top:1px solid var(--tile-border);border-left:1px solid var(--tile-border);background:var(--surface);content:"";width:12px;height:12px;position:absolute;top:-7px;right:28px;transform:rotate(45deg)}.instructions{min-height:24px;color:var(--muted);margin:0 auto 14px;font-size:15px}.mode-selector{justify-content:center;align-items:center;gap:10px;margin:0 0 16px;display:flex}.mode-selector label{color:var(--ink);font-size:14px;font-weight:800}.mode-selector select{border:2px solid var(--primary);background:var(--surface);width:min(100%,280px);min-height:44px;color:var(--primary-dark);cursor:pointer;border-radius:14px;padding:8px 38px 8px 14px;font-size:15px;font-weight:800;transition:background-color .15s,border-color .15s}.mode-selector select:hover:not(:disabled){background:var(--primary-soft)}.mode-selector select: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)}.best-time-button{font:inherit;text-underline-offset:4px;cursor:pointer;background:0 0;border:0;padding:0 2px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.best-time-button:hover{color:var(--primary-dark);text-decoration-style:solid}.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)}.round-active .action-area{min-height:48px}.round-active .cancel-button{border-width:1px;min-height:36px;padding:6px 12px;font-size:13px}.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}.preview-board{opacity:.78;margin-top:10px}.preview-board .number-box{opacity:1}.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}.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:22px;justify-content:center;align-items:center;font-size:72px;font-weight:900;display:flex;position:absolute;inset:-6px}.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}.best-scores-backdrop{z-index:120;background:#171426b8;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.best-scores-dialog{border:2px solid var(--primary);background:var(--surface);width:min(100%,430px);max-height:calc(100dvh - 36px);color:var(--ink);border-radius:22px;padding:24px;overflow-y:auto;box-shadow:0 22px 60px #120d2d61}.best-scores-dialog h2{color:var(--primary);margin:0 0 18px;font-size:25px}.best-scores-nickname-row{justify-content:space-between;align-items:baseline;gap:10px;margin:-10px 0 16px;display:flex}.best-scores-nickname{min-width:0;color:var(--ink);overflow-wrap:anywhere;margin:0;font-size:20px;font-weight:850}.best-scores-list{gap:9px;display:grid}.best-score-row{background:var(--primary-soft);text-align:left;border-radius:12px;justify-content:space-between;align-items:center;gap:16px;padding:11px 13px;display:flex}.best-score-row span{font-size:14px;font-weight:750}.best-score-row strong{color:var(--best-color);font-variant-numeric:tabular-nums;flex:none}.best-scores-challenge{color:var(--ink);margin:20px 0 2px;font-size:18px;font-weight:850}.best-scores-site{color:var(--muted);margin:0 0 18px;font-size:13px}.nickname-form{text-align:left;gap:5px;margin:0 0 18px;display:grid}.nickname-form label{font-size:14px;font-weight:800}.nickname-hint,.nickname-error{color:var(--muted);font-size:12px;line-height:1.35}.nickname-error{color:#c62828;font-weight:750}.nickname-controls{gap:7px;display:flex}.nickname-controls input{border:1px solid var(--muted);background:var(--surface);min-width:0;color:var(--ink);font:inherit;border-radius:10px;flex:1;padding:9px 10px}.nickname-controls button,.nickname-remove{color:var(--on-primary);background:var(--primary);cursor:pointer;border:0;border-radius:10px;font-weight:750}.nickname-remove{color:var(--primary);background:0 0;flex:none;padding:5px 9px;font-size:12px;text-decoration:underline}.best-scores-close{background:var(--primary);min-height:42px;color:var(--on-primary);cursor:pointer;border:0;border-radius:12px;padding:8px 20px;font-weight:800}.creator-credit{color:var(--muted);border-top:1px solid #6558d31f;margin-top:52px;padding-top:18px;font-size:13px}.footer-meta{justify-content:center;gap:7px;margin-top:8px;display:flex}.reset-best-button{border:1px solid var(--tile-border);background:var(--surface);min-height:38px;color:var(--ink);cursor:pointer;border-radius:10px;padding:7px 10px;font-size:13px;font-weight:750}.reset-best-button:hover{color:var(--primary-dark)}.reset-confirmation{width:min(100%,300px)}.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)}.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}.top-controls{margin-bottom:12px;position:static}.settings-panel{width:min(100% - 20px,330px);top:66px;right:10px}.mode-selector{flex-direction:column;align-items:stretch;gap:5px}.mode-selector select{width:min(100%,300px);margin:0 auto}}@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}}