:root,.theme-girl{--primary:#ffb6c1;--secondary:plum;--accent:gold;--bg-color:#fff0f5;--bg-gradient:linear-gradient(135deg, #fff0f5 0%, #f8bbd0 100%);--theme-gradient:linear-gradient(135deg, #ffb6c1, plum);--text-dark:#4a4a4a;--text-light:#fff;--glass-bg:#fff9;--glass-border:#fffc;--glass-shadow:0 12px 40px #ffb6c140}.theme-boy{--primary:#87cefa;--secondary:#3cb371;--accent:gold;--bg-color:#f0f8ff;--bg-gradient:linear-gradient(135deg, #f0f8ff 0%, #b0e0e6 100%);--theme-gradient:linear-gradient(135deg, #87cefa, #3cb371);--text-dark:#4a4a4a;--text-light:#fff;--glass-bg:#fff9;--glass-border:#fffc;--glass-shadow:0 12px 40px #87cefa40}.theme-other{--primary:#ffb6c1;--secondary:#40e0d0;--accent:gold;--bg-color:ivory;--bg-gradient:linear-gradient(135deg, #ffb6c1 0%, #87cefa 33%, #98fb98 66%, #ffdab9 100%);--theme-gradient:linear-gradient(135deg, #ffb6c1, #40e0d0, gold);--text-dark:#4a4a4a;--text-light:#fff;--glass-bg:#fff9;--glass-border:#fffc;--glass-shadow:0 12px 40px #40e0d040}.theme-neutral{--primary:#ffb6c1;--secondary:#87cefa;--accent:gold;--bg-color:beige;--bg-gradient:linear-gradient(135deg, #fff0f5 0%, #f0f8ff 50%, #f5fffa 100%);--theme-gradient:linear-gradient(135deg, #ffb6c1, #87cefa, #98fb98);--text-dark:#4a4a4a;--text-light:#fff;--glass-bg:#fff9;--glass-border:#fffc;--glass-shadow:0 12px 40px #87cefa40}body{background:var(--bg-color);background-image:var(--bg-gradient);color:var(--text-dark);justify-content:center;align-items:flex-start;min-height:100vh;margin:0;font-family:Quicksand,sans-serif;transition:background .5s;display:flex;overflow-x:hidden}#root{flex-direction:column;width:100%;max-width:800px;min-height:100vh;display:flex}.glass-panel{-webkit-backdrop-filter:blur(15px);box-shadow:var(--glass-shadow), inset 0 1px 0 #fffc;box-sizing:border-box;background:linear-gradient(135deg,#ffffffbf,#fff0f599);border:1.5px solid #ffffffe6;border-radius:25px;padding:24px;position:relative;overflow:hidden}.glass-panel:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffd7001a 0%,#0000 70%);border-radius:50%;width:200px;height:200px;position:absolute;top:-50%;right:-50%}.glass-panel:after{content:"";pointer-events:none;background:radial-gradient(circle,#dda0dd14 0%,#0000 70%);border-radius:50%;width:200px;height:200px;position:absolute;bottom:-50%;left:-50%}h1,h2,h3{color:var(--secondary);text-shadow:1px 1px 2px #fffc;margin-top:0;font-family:Outfit,sans-serif;font-weight:700}.number-grid{grid-template-columns:repeat(7,1fr);justify-items:center;gap:12px;margin-top:20px;display:grid}@media (width<=500px){.number-grid{grid-template-columns:repeat(5,1fr);gap:8px}}.number-btn{color:plum;cursor:pointer;background:linear-gradient(135deg,#fff 0%,#f8f8ff 100%);border:3px solid #ffb6c1;border-radius:15px;justify-content:center;align-items:center;width:60px;height:60px;padding:0;font-family:Outfit,sans-serif;font-size:1.6rem;font-weight:900;transition:all .1s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;box-shadow:0 4px #ffb6c1,0 8px 15px #ffb6c14d,inset 0 1px #fffc}.number-btn:before{content:"";opacity:0;background:gold;border-radius:50%;width:8px;height:8px;transition:opacity .2s;position:absolute;top:5px;right:5px}.number-btn:active{transform:translateY(4px);box-shadow:0 0 #ffb6c1,0 4px 10px #ffb6c166}.number-btn:nth-child(4n+1){color:#f66;background:linear-gradient(135deg,#fff 0%,#ffe6f0 100%);border-color:#f99;box-shadow:0 4px #f99,0 8px 15px #ff646433}.number-btn:nth-child(4n+2){color:#39f;background:linear-gradient(135deg,#fff 0%,#e6f3ff 100%);border-color:#9cf;box-shadow:0 4px #9cf,0 8px 15px #3396ff33}.number-btn:nth-child(4n+3){color:#f93;background:linear-gradient(135deg,#fff 0%,#fff0e6 100%);border-color:#fc9;box-shadow:0 4px #fc9,0 8px 15px #ff963233}.number-btn:nth-child(4n+4){color:#93f;background:linear-gradient(135deg,#fff 0%,#f3e6ff 100%);border-color:#c9f;box-shadow:0 4px #c9f,0 8px 15px #9632ff33}.number-btn:hover{background:#fdfdfd;transform:translateY(-4px)scale(1.05);box-shadow:0 6px,0 12px 20px #00000026}.number-btn:hover:before{opacity:1;animation:.6s ease-out sparkle}.number-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}button{cursor:pointer;background:linear-gradient(135deg, var(--primary), var(--secondary));color:var(--text-light);border:none;border-radius:50px;padding:12px 24px;font-family:Quicksand,sans-serif;font-size:1.1rem;font-weight:700;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;box-shadow:0 4px 15px #dda0dd66,inset 0 1px #fff6}button:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}button:hover:before{left:100%}button:hover{background:linear-gradient(135deg, var(--secondary), var(--primary));transform:translateY(-3px);box-shadow:0 8px 25px #dda0dd99,0 0 15px #ffd70066}button:active{transform:translateY(0);box-shadow:0 2px 10px #dda0dd66}button:disabled{box-shadow:none;cursor:not-allowed;opacity:.6;background:linear-gradient(135deg,#ddd,#bbb);transform:none}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.floating{animation:3s ease-in-out infinite float}@keyframes sparkle{0%,to{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}.sparkle{position:relative}.sparkle:before,.sparkle:after{content:"✨";font-size:.8em;animation:1.5s ease-in-out infinite sparkle;position:absolute}.sparkle:before{animation-delay:0s;top:-5px;left:-15px}.sparkle:after{animation-delay:.75s;top:5px;right:-15px}@keyframes glow-pulse{0%,to{box-shadow:0 0 10px #ffb6c166}50%{box-shadow:0 0 20px #dda0ddcc,0 0 30px #ffd70066}}.glow{animation:2s ease-in-out infinite glow-pulse}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.shimmer{background:linear-gradient(90deg,#ffb6c1,plum,gold,plum,#ffb6c1) 0 0/1000px 100%;animation:3s infinite shimmer}@keyframes starburst{0%{opacity:1;transform:scale(0)rotate(0)}to{opacity:0;transform:scale(1)rotate(360deg)}}.star-burst{pointer-events:none;animation:.6s ease-out forwards starburst}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-100vh)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}.confetti{pointer-events:none;animation:3s ease-in forwards confetti-fall;position:fixed}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.pulse{animation:1.5s ease-in-out infinite pulse}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}.wobble{animation:.4s ease-in-out wobble}@keyframes rainbow-text{0%{color:#ffb6c1}25%{color:plum}50%{color:gold}75%{color:plum}to{color:#ffb6c1}}.rainbow-text{font-weight:700;animation:2s ease-in-out infinite rainbow-text}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.6s ease-out forwards fadeIn}@keyframes bounce-twice{0%,to{transform:translateY(0)}25%{transform:translateY(-15px)}50%{transform:translateY(0)}75%{transform:translateY(-15px)}}.bounce-twice{animation:1.5s ease-in-out forwards bounce-twice}.profile-card{text-align:center;cursor:pointer;box-sizing:border-box;border-radius:20px;width:160px;padding:20px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;box-shadow:0 4px 15px #ffb6c166,inset 0 1px #fffc}.profile-card:before{content:"✨";opacity:0;font-size:2rem;transition:opacity .3s;position:absolute;top:5px;right:5px}.profile-card:hover:before{opacity:1;animation:1s ease-in-out infinite float}.profile-card .avatar-large{margin-bottom:10px;font-size:4.5rem;transition:transform .3s;display:inline-block}.profile-card:hover .avatar-large{transform:scale(1.15)rotate(5deg)}.profile-card h3{margin:0;font-size:1.5rem}.btn-glow{color:#d15a7c;background:linear-gradient(90deg,#ff9a9e 0%,#fecfef 99% 100%);border-radius:50px;padding:15px 30px;font-size:1.2rem;font-weight:700;box-shadow:0 0 15px #ff9a9e99}.btn-glow:hover{background:linear-gradient(90deg,#fecfef 0%,#ff9a9e 100%);box-shadow:0 0 25px #ff9a9ee6}.avatar-selector{justify-content:center;gap:15px;margin:15px 0;display:flex}.avatar-option{cursor:pointer;background:#ffffff80;border:2px solid #0000;border-radius:15px;padding:10px;font-size:2rem;transition:all .2s}.avatar-option.selected{border-color:var(--primary);background:#fff;transform:scale(1.1);box-shadow:0 4px 10px #ffb6c180}.reward-icon{margin:0 4px;font-size:1.5rem}@keyframes pop-animation{0%{transform:scale(1)}50%{color:#ffeb3b;transform:scale(1.5)rotate(10deg)}to{transform:scale(1)}}.reward-badge{transition:all .3s;display:inline-block;position:relative}.reward-pop{animation:.8s cubic-bezier(.175,.885,.32,1.275) pop-animation}@keyframes fly-up{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-30px)scale(1.5)}}.reward-fly{color:#ff4081;pointer-events:none;font-size:1.2rem;font-weight:700;animation:1s ease-out forwards fly-up;position:absolute;top:-10px;right:-10px}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-content{background:var(--bg-color);text-align:center;width:90%;max-width:500px;padding:30px;animation:.3s ease-out pop-animation}.celebration-overlay{z-index:2000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffc;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.celebration-content{text-align:center;padding:40px;animation:.8s cubic-bezier(.175,.885,.32,1.275) pop-animation}.celebration-emoji{filter:drop-shadow(0 0 20px #ffd700cc);margin-bottom:20px}.App{box-sizing:border-box;flex-direction:column;align-items:center;gap:20px;width:100%;padding:20px;display:flex}.top-bar{justify-content:space-between;align-items:center;width:100%;padding:10px 0;display:flex}.rewards{color:var(--secondary);gap:15px;font-size:1.2rem;font-weight:700;display:flex}.screen-container{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.profile-card{cursor:pointer;flex-direction:column;align-items:center;padding:15px;transition:transform .2s;display:flex}.profile-card:hover{transform:scale(1.05)}.avatar-large{margin-bottom:10px;font-size:4rem}.input-field{border:2px solid var(--primary);box-sizing:border-box;border-radius:10px;outline:none;width:100%;margin-bottom:15px;padding:10px 15px;font-family:Quicksand,sans-serif;font-size:1.1rem}.input-field:focus{border-color:var(--secondary)}.math-problem{color:var(--secondary);text-align:center;margin:20px 0;font-size:3rem;font-weight:700}.hint-box{border:2px solid var(--accent);text-align:center;background:#ffd70033;border-radius:15px;margin:10px 0;padding:15px;font-size:1.2rem}