*{margin:0;padding:0;box-sizing:border-box}body{font-family:Nunito,Comic Sans MS,cursive,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative}.bg-bubbles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.bubble{position:absolute;bottom:-150px;background:rgba(255,255,255,.08);border-radius:50%;animation:rise linear infinite}.bubble-1{left:5%;width:20px;height:20px;animation-duration:9s;animation-delay:0s}.bubble-2{left:12%;width:55px;height:55px;animation-duration:13s;animation-delay:2s}.bubble-3{left:22%;width:30px;height:30px;animation-duration:8s;animation-delay:5s}.bubble-4{left:33%;width:45px;height:45px;animation-duration:11s;animation-delay:1s}.bubble-5{left:44%;width:15px;height:15px;animation-duration:7s;animation-delay:3.5s}.bubble-6{left:52%;width:60px;height:60px;animation-duration:14s;animation-delay:.5s}.bubble-7{left:61%;width:25px;height:25px;animation-duration:10s;animation-delay:6s}.bubble-8{left:70%;width:40px;height:40px;animation-duration:12s;animation-delay:2.5s}.bubble-9{left:79%;width:18px;height:18px;animation-duration:8s;animation-delay:4s}.bubble-10{left:87%;width:50px;height:50px;animation-duration:15s;animation-delay:1.5s}.bubble-11{left:93%;width:35px;height:35px;animation-duration:9s;animation-delay:7s}.bubble-12{left:38%;width:22px;height:22px;animation-duration:11s;animation-delay:3s}@keyframes rise{0%{bottom:-150px;transform:translate(0) rotate(0);opacity:0}10%{opacity:.6}90%{opacity:.3}to{bottom:110vh;transform:translate(60px) rotate(180deg);opacity:0}}.card{background:rgba(255,255,255,.97);border-radius:32px;box-shadow:0 20px 60px #0000004d;position:relative;z-index:1}.start-screen{display:flex;align-items:center;justify-content:center;width:100%;padding:24px;z-index:1}.start-card{composes:card;padding:40px 32px;text-align:center;max-width:480px;width:100%}.mascot-intro{font-size:72px;display:block;margin-bottom:12px;animation:mascot-idle 2s ease-in-out infinite;line-height:1}.start-title{font-size:clamp(28px,6vw,38px);font-weight:900;color:#6c5ce7;margin-bottom:6px;line-height:1.2}.start-subtitle{font-size:17px;color:#636e72;margin-bottom:32px}.name-input{width:100%;padding:11px 16px;border:2px solid #e0d8ff;border-radius:16px;font-size:16px;font-family:Nunito,cursive;font-weight:700;color:#2d3436;background:#f8f6ff;outline:none;margin-bottom:12px;text-align:center;transition:border-color .2s,box-shadow .2s}.name-input:focus{border-color:#6c5ce7;box-shadow:0 0 0 3px #6c5ce726}.name-input::placeholder{color:#b2bec3;font-weight:400}.qcount-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}.qcount-label{font-size:15px;font-weight:700;color:#636e72}.qcount-btn{padding:6px 18px;border:2px solid #e0d8ff;border-radius:12px;font-size:15px;font-weight:800;font-family:Nunito,cursive;background:#f8f6ff;color:#6c5ce7;cursor:pointer;transition:all .15s}.qcount-btn:hover:not(.active){border-color:#a29bfe}.qcount-btn.active{background:#6c5ce7;border-color:#6c5ce7;color:#fff}.levels-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.level-btn{display:flex;flex-direction:column;align-items:center;padding:22px 14px;border:none;border-radius:22px;background:var(--c);cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 5px 18px #00000026}.level-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 10px 28px #00000038}.level-btn:active{transform:translateY(1px) scale(.97)}.level-emoji{font-size:38px;margin-bottom:8px;display:block}.level-name{font-size:18px;font-weight:800;color:#fff;display:block}.level-desc{font-size:13px;color:#ffffffd1;display:block;margin-top:4px}.game-screen{display:flex;flex-direction:column;align-items:center;padding:20px;width:100%;max-width:520px;margin:0 auto;z-index:1}.game-header{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:14px;gap:10px}.home-btn{background:rgba(255,255,255,.22);border:none;border-radius:14px;font-size:22px;width:42px;height:42px;cursor:pointer;transition:background .15s,transform .15s;flex-shrink:0;display:flex;align-items:center;justify-content:center}.home-btn:hover{background:rgba(255,255,255,.38);transform:scale(1.1)}.home-btn:active{transform:scale(.93)}.score-display{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.22);border-radius:20px;padding:8px 16px;color:#fff;flex-shrink:0}.score-icon{font-size:20px}.score-value{font-size:20px;font-weight:800}.progress-wrap{flex:1;min-width:0}.question-label{text-align:center;color:#ffffffe6;font-size:13px;font-weight:700;margin-bottom:5px}.progress-bar{height:10px;background:rgba(255,255,255,.25);border-radius:6px;overflow:hidden}.progress-fill{height:100%;background:#fdcb6e;border-radius:6px;transition:width .4s ease}.lives-display{display:flex;gap:3px;flex-shrink:0}.heart{font-size:22px;transition:transform .3s}.heart-lost{opacity:.25;filter:grayscale(1);transform:scale(.8)}.streak-banner{background:linear-gradient(90deg,#e17055,#fdcb6e);color:#fff;padding:7px 22px;border-radius:20px;font-weight:800;font-size:15px;margin-bottom:12px;animation:streak-pulse 1s ease-in-out infinite;letter-spacing:.5px}@keyframes streak-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.game-card{composes:card;padding:28px 24px 32px;width:100%;text-align:center;transition:border .2s;border:3px solid transparent}.game-card.card-correct{animation:card-pop .45s ease;border-color:#00b894}.game-card.card-wrong{border-color:#e84393}@keyframes card-pop{0%{transform:scale(1)}40%{transform:scale(1.035)}to{transform:scale(1)}}.mascot{font-size:clamp(54px,14vw,72px);display:block;margin-bottom:6px;line-height:1;min-height:80px}.mascot-idle{animation:mascot-idle 2s ease-in-out infinite}.mascot-dancing{animation:mascot-dance .45s ease-in-out infinite}.mascot-sad{animation:mascot-sad .4s ease}@keyframes mascot-idle{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(4deg)}}@keyframes mascot-dance{0%{transform:rotate(-18deg) scale(1.15) translateY(-4px)}50%{transform:rotate(18deg) scale(1.22) translateY(-12px)}to{transform:rotate(-18deg) scale(1.15) translateY(-4px)}}@keyframes mascot-sad{0%,to{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}.feedback-msg{font-size:19px;font-weight:800;margin-bottom:10px;animation:pop-in .3s cubic-bezier(.34,1.56,.64,1);min-height:28px}.feedback-correct{color:#00b894}.feedback-wrong{color:#e84393}@keyframes pop-in{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.problem-display{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,18px);margin:16px 0 20px;flex-wrap:wrap}.problem-number{font-size:clamp(48px,13vw,76px);font-weight:900;color:#2d3436;line-height:1}.problem-op{font-size:clamp(44px,12vw,70px);font-weight:900;color:#6c5ce7;line-height:1}.problem-equals{font-size:clamp(44px,12vw,70px);font-weight:900;color:#b2bec3;line-height:1}.problem-q{font-size:clamp(48px,13vw,76px);font-weight:900;color:#fdcb6e;line-height:1;animation:q-pulse 1.4s ease-in-out infinite}@keyframes q-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.input-area{display:flex;flex-direction:column;align-items:center;gap:14px}.answer-input{width:140px;height:68px;border:3px solid #a29bfe;border-radius:18px;font-size:36px;font-weight:800;text-align:center;font-family:Nunito,cursive;color:#2d3436;background:#f8f6ff;outline:none;transition:border-color .2s,box-shadow .2s;-moz-appearance:textfield}.answer-input::-webkit-inner-spin-button,.answer-input::-webkit-outer-spin-button{-webkit-appearance:none}.answer-input:focus{border-color:#6c5ce7;box-shadow:0 0 0 4px #6c5ce72e}.answer-input.shake{animation:shake .45s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.submit-btn{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;border:none;border-radius:22px;padding:14px 38px;font-size:19px;font-weight:800;font-family:Nunito,cursive;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s;box-shadow:0 5px 18px #6c5ce773;letter-spacing:.3px}.submit-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 9px 24px #6c5ce780}.submit-btn:active:not(:disabled){transform:translateY(1px)}.submit-btn:disabled{opacity:.65;cursor:default}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;width:100%;max-width:260px;margin-left:auto;margin-right:auto}.keypad-btn{height:62px;font-size:26px;font-weight:800;font-family:Nunito,cursive;border:none;border-radius:16px;background:#f0eeff;color:#2d3436;cursor:pointer;transition:transform .1s,background .1s;box-shadow:0 3px #d4ccf5}.keypad-btn:hover:not(:disabled){background:#e0d8ff}.keypad-btn:active:not(:disabled){transform:translateY(3px);box-shadow:none}.keypad-btn:disabled{opacity:.4;cursor:default}.keypad-btn.kp-del{background:#ffe8f0;color:#e84393;box-shadow:0 3px #f5c0d6;font-size:22px}.keypad-btn.kp-del:hover:not(:disabled){background:#ffd0e4}.keypad-btn.kp-ok{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;box-shadow:0 3px #5548c8;font-size:24px}.keypad-btn.kp-ok:hover:not(:disabled){filter:brightness(1.08)}.keypad-btn.kp-ok:active:not(:disabled){transform:translateY(3px);box-shadow:none}.problem-ans-reveal{font-size:clamp(48px,13vw,76px);font-weight:900;color:#e84393;line-height:1;animation:pop-in .3s cubic-bezier(.34,1.56,.64,1)}.result-screen{display:flex;align-items:center;justify-content:center;width:100%;padding:24px;z-index:1}.result-card{composes:card;padding:44px 36px;text-align:center;max-width:420px;width:100%;transform:scale(.75);opacity:0;transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .35s}.result-card.visible{transform:scale(1);opacity:1}.result-trophy{font-size:84px;display:block;margin-bottom:12px;animation:mascot-idle 2s ease-in-out infinite;line-height:1}.result-title{font-size:clamp(28px,7vw,38px);font-weight:900;color:#6c5ce7;margin-bottom:6px}.result-subtitle{font-size:16px;color:#636e72;margin-bottom:28px}.result-stats{display:flex;justify-content:center;gap:20px;margin-bottom:26px}.stat-box{display:flex;flex-direction:column;align-items:center;background:#f5f3ff;border-radius:18px;padding:14px 22px;min-width:90px}.stat-icon{font-size:26px}.stat-label{font-size:12px;color:#636e72;margin-top:5px}.stat-val{font-size:30px;font-weight:900;color:#2d3436}.stars-row{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-bottom:30px}.result-star{font-size:26px;opacity:0;animation:star-pop .4s cubic-bezier(.34,1.56,.64,1) forwards}.result-star.dim{animation:star-dim .4s ease forwards}@keyframes star-pop{0%{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes star-dim{0%{opacity:0}to{opacity:.2}}.restart-btn{background:linear-gradient(135deg,#00b894,#00cec9);color:#fff;border:none;border-radius:22px;padding:16px 0;width:100%;font-size:20px;font-weight:800;font-family:Nunito,cursive;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 5px 18px #00b89473;letter-spacing:.3px}.restart-btn:hover{transform:translateY(-3px);box-shadow:0 9px 24px #00b8948c}.restart-btn:active{transform:translateY(1px)}.confetti-wrap{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:999;overflow:hidden}.cp{position:absolute;top:-30px;animation:cf-fall linear forwards;border-radius:var(--r)}@keyframes cf-fall{0%{transform:translateY(0) rotate(0);opacity:1}80%{opacity:1}to{transform:translateY(105vh) rotate(calc(var(--spin) * 1deg));opacity:0}}