body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{-webkit-tap-highlight-color:transparent}html{touch-action:manipulation}*{box-sizing:border-box}*,body{margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#4f46e5,#7c3aed);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;height:100vh;height:100dvh;overflow:hidden;position:relative}body:before{background:radial-gradient(circle at 20% 80%,#ffd7001a 0,#0000 50%),radial-gradient(circle at 80% 20%,#3b82f61a 0,#0000 50%),radial-gradient(circle at 40% 40%,#ffffff0d 0,#0000 50%);bottom:0;content:"";left:0;pointer-events:none;position:fixed;right:0;top:0}.App{box-sizing:border-box;display:flex;flex-direction:column;height:100vh;height:100dvh;margin:0 auto;max-width:380px;overflow:hidden;padding:12px;position:relative;z-index:1}.header{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff26;border-top:1px solid #fff3;bottom:0;box-shadow:0 -4px 16px #0000001a,inset 0 1px 0 #fff3;display:flex;justify-content:space-between;left:0;margin:0;padding:12px 16px;position:fixed;right:0;z-index:1000}.timer{color:#fffffff2;font-size:18px;font-weight:800;text-shadow:0 2px 4px #0003;transition:all .3s ease}.timer-warning{animation:pulse-red 1s ease-in-out infinite;color:#ff4757!important;text-shadow:0 0 8px #ff475799,0 2px 4px #0000004d}@keyframes pulse-red{0%,to{color:#ff4757;text-shadow:0 0 8px #ff475799,0 2px 4px #0000004d;transform:scale(1)}50%{color:#ff3742;text-shadow:0 0 12px #ff4757cc,0 0 24px #ff475766,0 2px 4px #0000004d;transform:scale(1.05)}}.scores{color:#fffffff2;font-size:16px;font-weight:700;text-align:right;text-shadow:0 2px 4px #0003}.scores div{margin:4px 0}.game-content{align-items:center;flex:1 1;min-height:0;padding-bottom:80px}.game-content,.start-screen{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.start-screen{height:100%;text-align:center;width:100%}.achievement-header{margin-bottom:12px}.achievement-header h1{color:#fffffff2;font-size:20px;font-weight:900;letter-spacing:-.02em;margin-bottom:4px;text-shadow:0 2px 4px #0003}.achievement-header p{color:#fffc;font-size:12px;font-weight:500}.achievement-grid{grid-gap:8px;display:grid;flex-shrink:0;gap:8px;grid-template-columns:1fr 1fr;margin-bottom:12px;padding:0 4px}.achievement-card{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid #ffffff26;border-radius:16px;cursor:pointer;overflow:hidden;padding:12px;position:relative;transition:all .3s ease}.achievement-card.multiplication{background:#3b82f633;border-color:#3b82f64d}.achievement-card.division{background:#10b98133;border-color:#10b9814d}.achievement-card.mixed{background:#f59e0b33;border-color:#f59e0b4d}.achievement-card:hover{box-shadow:0 12px 32px #0003;transform:translateY(-4px)}.achievement-card.multiplication.selected,.achievement-card.multiplication:hover{background:#3b82f64d;border-color:#3b82f680;box-shadow:0 12px 32px #3b82f64d}.achievement-card.division.selected,.achievement-card.division:hover{background:#10b9814d;border-color:#10b98180;box-shadow:0 12px 32px #10b9814d}.achievement-card.mixed.selected,.achievement-card.mixed:hover{background:#f59e0b4d;border-color:#f59e0b80;box-shadow:0 12px 32px #f59e0b4d}.achievement-card.mixed{grid-column:1/-1;margin:0 auto;max-width:60%}.achievement-circle{height:70px;margin:0 auto 8px;position:relative;width:70px}.achievement-icon{color:#ffffffe6;font-size:20px;font-weight:900;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.progress-ring{height:100%;left:0;position:absolute;top:0;width:100%}.progress-ring-svg{transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:#ffffff1a;stroke-width:6}.progress-ring-fill{fill:none;stroke:#ffffff4d;stroke-width:6;stroke-linecap:round;stroke-dasharray:290;stroke-dashoffset:145;transition:stroke-dashoffset .5s ease}.achievement-card.multiplication .progress-ring-fill{stroke:#3b82f680}.achievement-card.division .progress-ring-fill{stroke:#10b98180}.achievement-card.mixed .progress-ring-fill{stroke:#f59e0b80}.achievement-card.multiplication.selected .progress-ring-fill{stroke:#3b82f6cc;stroke-dashoffset:58}.achievement-card.division.selected .progress-ring-fill{stroke:#10b981cc;stroke-dashoffset:58}.achievement-card.mixed.selected .progress-ring-fill{stroke:#f59e0bcc;stroke-dashoffset:58}.achievement-info h3{color:#fffffff2;font-size:14px;font-weight:700;margin-bottom:2px}.achievement-info p{color:#ffffffb3;font-size:12px;font-weight:500}.action-buttons{display:flex;flex-shrink:0;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:auto}.start-button{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border:none;border-radius:20px;box-shadow:0 8px 24px #3b82f666,inset 0 1px 0 #fff3;color:#fff;cursor:pointer;font-size:16px;font-weight:700;margin-top:12px;overflow:hidden;padding:14px 28px;position:relative;transition:all .2s ease}.start-button:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.start-button:hover{box-shadow:0 12px 32px #3b82f680,inset 0 1px 0 #fff3;transform:translateY(-3px)}.start-button:hover:before{left:100%}.start-button:active{transform:translateY(-1px)}.name-input{margin:16px 0}.name-field{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:2px solid #fff3;border-radius:16px;box-sizing:border-box;color:#ffffffe6;font-size:14px;font-weight:600;max-width:280px;outline:none;padding:12px 16px;text-align:center;transition:all .3s ease;width:100%}.name-field::placeholder{color:#fff9}.name-field:focus{background:#ffffff26;border-color:#fff6;box-shadow:0 0 24px #fff3;transform:translateY(-2px)}.name-field.error{animation:shake .5s ease-in-out;background:#ff6b6b1a;border-color:#ff6b6b}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}.error-message{animation:slideDown .3s ease-out;margin-top:12px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-content{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ff6b6b26;border:1px solid #ff6b6b4d;border-radius:12px;box-shadow:0 4px 12px #ff6b6b33;color:#fff;display:flex;font-size:14px;font-weight:500;gap:8px;padding:12px 16px;text-align:center}.error-icon{flex-shrink:0;font-size:16px}.error-text{flex:1 1}.highscore-button{background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:16px;box-shadow:0 8px 24px #f59e0b66,inset 0 1px 0 #fff3;color:#fff;cursor:pointer;font-size:14px;font-weight:600;margin-left:8px;margin-top:12px;padding:12px 24px;transition:all .3s ease}.highscore-button:hover{box-shadow:0 12px 32px #f59e0b80,inset 0 1px 0 #fff3;transform:translateY(-2px)}.back-button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:2px solid #fff3;border-radius:20px;box-shadow:0 8px 24px #0000001a,inset 0 1px 0 #fff3;color:#ffffffe6;cursor:pointer;font-size:14px;font-weight:700;margin-top:16px;padding:12px 24px;transition:all .3s ease}.back-button:hover{background:#fff3;border-color:#ffffff4d;box-shadow:0 12px 32px #00000026,inset 0 1px 0 #fff3;transform:translateY(-3px)}.game-screen{display:flex;flex-direction:column;height:100%;max-width:380px;overflow:hidden;width:100%}.question{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff1f;border:1px solid #ffffff2e;border-radius:24px;box-shadow:0 16px 60px #0000001f,inset 0 1px 0 #fff3;flex-shrink:0;margin-bottom:16px;padding:20px 16px;text-align:center}.equation{color:#fffffff2;font-size:36px;font-weight:900;letter-spacing:-.02em;text-shadow:0 4px 8px #0000004d}.options{display:flex;flex-direction:column;flex-shrink:0;gap:12px;margin-bottom:16px}.option-button{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff1f;border:2px solid #fff3;border-radius:20px;box-shadow:0 8px 24px #0000001a,inset 0 1px 0 #fff3;color:#fffffff2;cursor:pointer;display:flex;font-size:20px;font-weight:700;justify-content:center;min-height:56px;overflow:hidden;padding:16px;position:relative;text-shadow:0 2px 4px #0003;transition:all .3s ease}.option-button:before{background:linear-gradient(90deg,#0000,#ffffff1a,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.option-button:hover{background:#ffffff2e;border-color:#ffffff4d;box-shadow:0 12px 32px #00000026,inset 0 1px 0 #fff3;transform:translateY(-3px)}.option-button:hover:before{left:100%}.option-button:active{transform:translateY(-1px) scale(.98)}.feedback{animation:slideIn .4s ease-out;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff26;border:2px solid #fff3;border-radius:16px;box-shadow:0 8px 24px #0000001a,inset 0 1px 0 #fff3;color:#fffffff2;flex-shrink:0;font-size:16px;font-weight:700;margin-top:auto;padding:16px;text-align:center;text-shadow:0 2px 4px #0003}.feedback.correct{background:#2ecc7133;border-color:#2ecc7166;color:#fffffff2}.feedback.wrong{background:#e74c3c33;border-color:#e74c3c66;color:#fffffff2}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.game-over-screen{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff1f;border:1px solid #ffffff2e;border-radius:24px;box-shadow:0 16px 60px #0000001f,inset 0 1px 0 #fff3;display:flex;flex-direction:column;height:100%;justify-content:center;overflow:hidden;padding:20px 16px;text-align:center}.game-over-screen h2{color:#fffffff2;font-size:24px;font-weight:900;letter-spacing:-.02em;margin-bottom:12px;text-shadow:0 4px 8px #0000004d}.game-over-screen p{color:#fffc;font-size:16px;font-weight:600;margin-bottom:12px}.highscores-screen{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff1f;border:1px solid #ffffff2e;border-radius:24px;box-shadow:0 16px 60px #0000001f,inset 0 1px 0 #fff3;box-sizing:border-box;display:flex;flex-direction:column;height:100%;max-width:380px;overflow:hidden;padding:20px 16px;width:100%}.highscores-header{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;margin-bottom:16px}.highscores-header h2{color:#fffffff2;font-size:24px;font-weight:900;letter-spacing:-.02em;margin:0;text-shadow:0 4px 8px #0000004d}.highscores-header .back-button{border-radius:16px;font-size:12px;margin:0;padding:8px 16px}.highscores-toggle{display:flex;gap:8px;justify-content:center;margin-bottom:16px}.toggle-button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:2px solid #fff3;border-radius:16px;color:#ffffffb3;cursor:pointer;flex:1 1;font-size:12px;font-weight:600;max-width:120px;padding:8px 16px;transition:all .3s ease}.toggle-button:hover{background:#ffffff26;border-color:#ffffff4d;color:#ffffffe6}.toggle-button.active{background:#3b82f64d;border-color:#3b82f680;box-shadow:0 4px 16px #3b82f64d;color:#fffffff2}.highscores-list{flex:1 1;margin-bottom:16px;min-height:0;overflow-y:auto}.highscores-list p{color:#ffffffe6;font-size:14px;font-weight:600;text-align:center}.highscore-item{grid-gap:8px;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff14;border:1px solid #ffffff1f;border-radius:16px;color:#ffffffe6;display:grid;font-size:14px;gap:8px;grid-template-columns:32px 1fr 50px 70px;margin-bottom:8px;padding:12px;transition:all .3s ease}.highscore-item:hover{background:#ffffff1f;border-color:#fff3;box-shadow:0 8px 24px #00000026,inset 0 1px 0 #ffffff1a;transform:translateY(-2px)}.highscore-item:first-child{background:linear-gradient(135deg,gold,orange);border-color:#ffd70066;box-shadow:0 8px 24px #ffd7004d,inset 0 1px 0 #fff3;color:#1a1a1a;font-weight:800}.highscore-item:nth-child(2){background:linear-gradient(135deg,silver,#a9a9a9);border-color:#c0c0c066;box-shadow:0 8px 24px #c0c0c04d,inset 0 1px 0 #fff3;color:#1a1a1a;font-weight:700}.highscore-item:nth-child(3){background:linear-gradient(135deg,#cd7f32,#b8860b);border-color:#cd7f3266;box-shadow:0 8px 24px #cd7f324d,inset 0 1px 0 #fff3;color:#fff;font-weight:700}.rank{font-size:18px;font-weight:800;text-align:center}.name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score{font-size:18px;font-weight:800}.date,.score{text-align:right}.date{font-size:12px;font-weight:500;opacity:.7}@media (max-width:360px){.App{padding:8px}.header{padding:8px 12px}.scores,.timer{font-size:14px}.equation{font-size:28px}.option-button{font-size:16px;min-height:48px;padding:10px}.game-content{padding-bottom:70px}.achievement-header h1{font-size:18px}.achievement-circle{height:60px;width:60px}.achievement-icon{font-size:18px}.achievement-info h3{font-size:13px}.achievement-info p{font-size:11px}}@media (max-width:480px) and (min-width:361px){.equation{font-size:32px}.option-button{font-size:18px;min-height:52px}.achievement-circle{height:65px;width:65px}}@media (min-width:768px){.App{max-width:500px;padding:30px}.header{padding:20px 25px}.scores,.timer{font-size:20px}.equation{font-size:56px}.options{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr 1fr}.question{margin-bottom:30px;padding:40px 20px}.option-button{font-size:24px;min-height:80px;padding:20px}.start-screen{padding:40px 30px}.game-content{padding-bottom:100px}.start-screen h1{font-size:32px}.start-screen p{font-size:18px}.highscores-screen{max-width:500px;padding:30px}.highscore-item{font-size:16px;grid-template-columns:50px 1fr 80px 100px;padding:15px}.game-mode-selector h3{font-size:18px}.mode-button{font-size:16px;max-width:none;min-width:130px;padding:12px 20px}.mode-buttons{gap:15px}.start-button{font-size:20px;padding:18px 40px}.highscore-button{font-size:16px;padding:15px 35px}}@media (hover:none) and (pointer:coarse){.option-button{font-size:20px;min-height:65px;padding:16px}.start-button{font-size:18px;padding:16px 35px}.mode-button{padding:12px 16px}.name-field{font-size:16px;padding:14px 16px}}
/*# sourceMappingURL=main.6c80bf8e.css.map*/