@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;600&family=Inter:wght@400;600;800&display=swap";:root{--primary: #ff6b6b;--secondary: #2ecc71;--accent: #fbc531;--dark: #2d3436;--light: #dfe6e9;--bg-color: #f0f4f8;--card-bg: #ffffff;--font-main: "Inter", sans-serif;--font-fun: "Fredoka", cursive}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--dark);min-height:100vh;display:flex;flex-direction:column}.hidden{display:none!important}.table-selection{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;width:100%;max-width:900px;margin:0 auto}.selection-header{width:100%;text-align:center;display:flex;justify-content:center;align-items:center;gap:.5rem;margin-bottom:10px;font-weight:500;color:var(--dark)}.table-btn{width:60px;height:60px;border-radius:50%;background:#fff;border:4px solid var(--secondary);box-shadow:0 4px #3aa39b;font-family:var(--font-main);font-size:1.4rem;font-weight:800;color:var(--dark);display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transition:transform .1s,box-shadow .1s;margin-bottom:24px;margin-left:1px;margin-right:1px;opacity:.5;filter:grayscale(40%);transform:scale(.9)}.table-btn:active{transform:scale(.9) translateY(4px);box-shadow:none;margin-bottom:28px}.table-btn .stars{position:absolute;bottom:-24px;left:50%;transform:translate(-50%);display:flex;gap:2px;font-size:.8rem;color:#cbd5e1;width:60px;justify-content:center;pointer-events:none}.table-btn.selected{opacity:1;filter:none;transform:scale(1.1);box-shadow:0 2px #3aa39b;z-index:10}.table-btn.selected:after{display:none}.table-btn.mastered{background:#2ecc71;border-color:#27ae60;color:#fff;box-shadow:0 4px #1e8449}.table-btn.mastered:active{box-shadow:none}.table-btn.mastered.selected{box-shadow:0 2px #1e8449}.table-btn.mastered .stars{color:#f1c40f}.table-btn.good{background:#3498db;border-color:#2980b9;color:#fff;box-shadow:0 4px #1c5a85}.table-btn.good:active{box-shadow:none}.table-btn.good.selected{box-shadow:0 2px #1c5a85}.table-btn.good .stars{color:#dfe6e9}.table-btn.improving{background:#f1c40f;border-color:#f39c12;color:#fff;box-shadow:0 4px #d35400}.table-btn.improving:active{box-shadow:none}.table-btn.improving.selected{box-shadow:0 2px #d35400}.table-btn.learning{background:#ff6b6b;border-color:#ee5253;color:#fff;box-shadow:0 4px #c0392b}.table-btn.learning:active{box-shadow:none}.table-btn.learning.selected{box-shadow:0 2px #c0392b}.table-btn.learning .stars{color:#fab1a0}.table-btn.selected .stars{color:#f1c40f}button{font-family:var(--font-main);border:none;cursor:pointer;border-radius:12px;transition:transform .1s}button:active{transform:scale(.95)}.primary-btn{background:var(--primary);color:#fff;padding:1rem 2rem;font-size:1.5rem;font-weight:600;box-shadow:0 4px #d64545}.primary-btn:hover{background:#ff5252}.secondary-btn{background:transparent;color:var(--dark);padding:.5rem 1rem;font-size:1rem;border:2px solid #ddd}.icon-btn{background:#fff;border:2px solid #ddd;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;padding:0;color:var(--dark)}.action-buttons{display:flex;gap:1.5rem;justify-content:center;width:100%;margin-top:1rem}.action-buttons button{flex:1;max-width:220px;min-width:160px;text-align:center;padding:1rem}#start-practice-btn.btn-teal{background-color:#1abc9c!important;box-shadow:0 4px #16a085!important}#start-practice-btn.btn-teal:hover{background-color:#48c9b0!important}.icon-btn:hover{border-color:var(--primary);color:var(--primary)}.action-btn{background:var(--secondary);color:#fff;padding:1rem 3rem;border-radius:16px;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;box-shadow:0 4px #27ae60;transition:transform .1s,box-shadow .1s}.action-btn:active{transform:translateY(4px);box-shadow:none}.mode-controls{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem}.mode-btn{padding:1rem 2rem;font-size:1.2rem;font-weight:700;border:none;border-radius:12px;cursor:pointer;background:#f1f2f6;color:#a4b0be;box-shadow:0 4px #dfe4ea;transition:all .2s}.mode-btn:hover{transform:translateY(-2px)}.mode-btn:active{transform:translateY(0);box-shadow:none!important}#practice-mode-btn.active{background:var(--secondary);color:#fff;box-shadow:0 4px #3aa39b}#test-mode-btn.active{background:var(--primary);color:#fff;box-shadow:0 4px #5f27cd}.question{font-size:4rem;font-weight:600;color:var(--dark);margin-bottom:1rem}#answer-input{font-family:var(--font-main);font-size:2.5rem;width:120px;text-align:center;padding:.5rem;border:3px solid #ddd;border-radius:12px;outline:none;margin-bottom:1rem}#answer-input:focus{border-color:var(--secondary)}.feedback{height:2rem;font-size:1.2rem;font-weight:600;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.feedback.visible{opacity:1}.feedback.correct{color:var(--secondary)}.feedback.wrong{color:#ff6b6b}.score-board{align-self:flex-end;font-size:1.1rem;color:#888;display:flex;gap:1.5rem}#highscore-display{color:#f0c420;font-weight:600;text-shadow:1px 1px 0 rgba(0,0,0,.1)}.game-header{width:100%;display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.timer-container{width:100%;height:10px;background:#f0f0f0;border-radius:5px;overflow:hidden}.timer-container.hidden{display:none}#timer-bar{width:100%;height:100%;background:var(--secondary);transition:width 1s linear}#results-screen{text-align:center}.results-content{margin:2rem 0}.score-text{font-size:2.5rem;font-weight:700;color:var(--primary);margin:0}#result-message{font-size:1.5rem;color:#f0c420;margin-top:1rem;font-weight:600;min-height:2em}.btn-teal{background:var(--secondary)!important;box-shadow:0 4px #3aa39b!important}.btn-teal:hover{background:#5edcd3!important}.auth-form{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:400px}.auth-form input{padding:1rem;border:2px solid #ddd;border-radius:12px;font-size:1.2rem;font-family:var(--font-main);outline:none}.auth-form input:focus{border-color:var(--secondary)}.auth-switch{font-size:.9rem;color:#888}.auth-switch a{color:var(--secondary);text-decoration:none;font-weight:600}.header-top{display:flex;justify-content:space-between;align-items:center;width:100%}.modal{position:fixed!important;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex!important;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity .3s,visibility .3s;opacity:1;visibility:visible;pointer-events:auto!important}.modal.hidden,.modal.modal-hidden{opacity:0!important;pointer-events:none!important;visibility:hidden!important}.modal:not(.hidden) *{pointer-events:auto!important}.modal-content{background:#fff;padding:2rem;border-radius:20px;width:90%;max-width:500px;position:relative;box-shadow:0 10px 25px #0003;display:flex;flex-direction:column;align-items:center;gap:1rem;z-index:1001}.close-btn{position:absolute;top:15px;right:20px;font-size:2rem;background:none;border:none;cursor:pointer!important;color:#888;z-index:1002;-webkit-user-select:none;-moz-user-select:none;user-select:none}.close-btn:hover{color:var(--primary)}.auth-controls{display:flex;gap:.5rem}.auth-controls .hidden{display:none!important}#login-btn,#logout-btn{font-weight:600;transition:all .2s ease}#login-btn:hover{background-color:var(--secondary);color:#fff;border-color:var(--secondary)}#logout-btn:hover{background-color:var(--dark);color:#fff;border-color:var(--dark)}.question-container{background:#fff;padding:2rem 4rem;border-radius:20px;box-shadow:0 4px #e2e8f0;border:2px solid #e2e8f0;display:flex;flex-direction:column;align-items:center;transition:all .5s cubic-bezier(.175,.885,.32,1.275);position:relative}.question-container.celebrating{transform:scale(1.1);border-color:#f1c40f;box-shadow:0 10px 30px #f1c40f4d;z-index:100}.question-container.celebrating input,.question-container.celebrating .action-btn{display:none}@keyframes pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:1}}#celebration-stars{display:flex;gap:10px;justify-content:center;margin-top:.5rem;height:40px;margin-bottom:1rem}#celebration-stars.hidden{display:none}.star-item{font-size:2.5rem;color:#dfe6e9;transition:color .3s}.star-item.gold{color:#f1c40f;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.pop-anim{animation:pop .4s cubic-bezier(.175,.885,.32,1.275) forwards}.question-container{overflow:visible}.stars-wrapper{display:flex;gap:15px;height:0;opacity:0;overflow:hidden;transform:scale(0);margin-top:0;transition:all .5s cubic-bezier(.175,.885,.32,1.275)}.question-container.celebrating .stars-wrapper{height:auto;opacity:1;transform:scale(1);margin-top:20px;padding:10px;overflow:visible}.star-item{font-size:3rem;color:#dfe6e9;transition:color .3s}.star-item.gold{color:#f1c40f}.star-item.pop-anim{animation:popGold .6s .2s forwards}@keyframes popGold{0%{transform:scale(1);color:#dfe6e9}40%{transform:scale(1.5);color:#f1c40f}to{transform:scale(1);color:#f1c40f}}.pop{animation:pop .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes pop{0%{transform:scale(.9);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}#table-levelup-card{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.levelup-title{font-family:var(--font-fun);font-size:2rem;font-weight:600;color:var(--dark)}.flip-container{perspective:1000px;display:flex;justify-content:center;align-items:center}#levelup-table-btn{width:90px;height:90px;font-size:2.1rem;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.175,.885,.32,1.275),border-color .4s ease .4s,background .4s ease .4s,box-shadow .4s ease .4s;cursor:default;opacity:1;filter:none;max-width:90vw;max-height:90vw}#levelup-table-btn .stars{font-size:1.2rem;gap:3px;width:90px;bottom:-36px;color:#f1c40f}#levelup-table-btn .stars .fa-solid{color:#f1c40f}#levelup-table-btn .stars .fa-regular{color:#cbd5e1}#levelup-table-btn.flipping{transform:rotateY(360deg) scale(1.1)}.levelup-star-pop{animation:levelup-star-appear .5s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes levelup-star-appear{0%{transform:scale(0) rotate(-45deg);opacity:0}50%{transform:scale(1.5) rotate(10deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.numeric-keyboard{display:flex;flex-direction:column;gap:8px;margin:.5rem 0;max-width:240px}.keyboard-row{display:flex;gap:8px;justify-content:center}.key-btn{width:70px;height:60px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;color:#fff;font-size:1.5rem;font-weight:600;cursor:pointer;box-shadow:0 4px 10px #667eea4d;transition:all .15s ease;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.key-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #667eea66}.key-btn:active{transform:translateY(0) scale(.95);box-shadow:0 2px 5px #667eea4d}.key-backspace{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 4px 10px #f5576c4d}.key-backspace:hover{box-shadow:0 6px 15px #f5576c66}.key-enter{background:linear-gradient(135deg,#4facfe,#00f2fe);box-shadow:0 4px 10px #4facfe4d}.key-enter:hover{box-shadow:0 6px 15px #4facfe66}@media(max-width:640px){.numeric-keyboard{max-width:100%;gap:10px}.keyboard-row{gap:10px}.key-btn{flex:1;min-width:0;height:50px;font-size:1.4rem}}#question-container.correct-flash{animation:correctPulse .3s ease-out}#question-container.wrong-flash{animation:wrongPulse 2s ease-out}@keyframes correctPulse{0%{border-color:#10b981;box-shadow:0 0 #10b981b3}50%{border-color:#10b981;box-shadow:0 0 20px 10px #10b98166}to{border-color:#e5e7eb;box-shadow:0 4px 20px #0000000d}}@keyframes wrongPulse{0%{border-color:#ef4444;box-shadow:0 0 #ef4444b3}10%{border-color:#ef4444;box-shadow:0 0 20px 10px #ef444466}to{border-color:#e5e7eb;box-shadow:0 4px 20px #0000000d}}.circular-timer{position:relative;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--primary) calc(var(--percentage) * 1%),#dfe6e9 0);transition:background .05s linear}.circular-timer:before{content:"";position:absolute;inset:6px;background:#fff;border-radius:50%}.circular-timer span{position:relative;font-weight:700;font-size:1.2rem;color:var(--dark)}.challenge-result-card{background:#fff;border-radius:1rem;padding:1.5rem;margin-top:1rem;box-shadow:0 4px 6px -1px #0000001a;text-align:center}