:root{--bg:#fff8e7;--primary:#ff6b6b;--secondary:#4ecdc4;--accent:#ffe66d;--purple:#a78bfa;--green:#34d399;--blue:#60a5fa;--orange:#fb923c;--pink:#f472b6;--text:#4a3728;--card:#fff;--shadow:0 6px 24px #00000014;--shadow-lg:0 12px 40px #0000001f;--radius:24px;--radius-sm:16px;--font:"Segoe UI", "Poppins", "Nunito", system-ui, -apple-system, sans-serif;--transition:.3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#fff8e7 0%,#ffecd2 25%,#ffe4d6 50%,#ffdee9 75%,#e8f4fd 100%) 0 0/400% 400%;justify-content:center;align-items:center;min-height:100vh;animation:20s infinite bgShift;display:flex;overflow-x:hidden}#app{width:100%;max-width:800px;padding:16px;position:relative}.screen{flex-direction:column;align-items:center;gap:20px;width:100%}@keyframes bgShift{0%,to{background-position:0%}25%{background-position:100% 0}50%{background-position:100% 100%}75%{background-position:0 100%}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.08)}70%{transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes sparkle{0%,to{opacity:0;transform:scale(0)rotate(0)}50%{opacity:1;transform:scale(1)rotate(180deg)}}@keyframes starPop{0%{opacity:0;transform:scale(0)rotate(-30deg)}60%{opacity:1;transform:scale(1.3)rotate(10deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes confettiFall{0%{opacity:1;transform:translateY(-100px)rotate(0)}to{opacity:0;transform:translateY(500px)rotate(720deg)}}@keyframes timerPulse{0%,to{transform:scale(1);box-shadow:0 0 #ff6b6b99}50%{transform:scale(1.05);box-shadow:0 0 0 16px #ff6b6b00}}@keyframes blink{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.slide-enter-active{animation:.35s fadeSlideIn}.slide-leave-active{animation:.25s reverse fadeSlideIn}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;width:100%;max-width:680px;transition:all var(--transition);border:3px solid #0000;padding:28px 24px;position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg, var(--primary), var(--orange), var(--accent), var(--green), var(--blue), var(--purple), var(--pink));border-radius:var(--radius) var(--radius) 0 0;height:4px;position:absolute;top:0;left:0;right:0}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.mascot-container{flex-direction:column;align-items:center;animation:3.5s ease-in-out infinite float;display:inline-flex;position:relative}.mascot{cursor:pointer;width:100px;height:100px;transition:transform var(--transition);position:relative}.mascot:active{transform:scale(.9)}.mascot-face{width:80px;height:80px;transition:all var(--transition);background:#ffe0b2;border:4px solid #f4a460;border-radius:50%;position:absolute;top:10px;left:10px;box-shadow:inset 0 -8px 16px #0000000f,0 6px 20px #0000001f}.mascot-eyes{gap:16px;display:flex;position:absolute;top:26px;left:50%;transform:translate(-50%)}.mascot-eye{background:#3e2723;border-radius:50%;width:14px;height:16px;animation:3s ease-in-out infinite blink;position:relative}.mascot-eye:after{content:"";background:#fff;border-radius:50%;width:5px;height:5px;position:absolute;top:3px;left:3px}.mascot-mouth{width:22px;height:10px;transition:all var(--transition);background:#e07b5a;border-radius:0 0 22px 22px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.mascot-mouth.happy{background:#e07b5a;border-radius:0 0 28px 28px;width:28px;height:14px}.mascot-mouth.cheer{background:#ff6b6b;border-radius:0 0 34px 18px;width:34px;height:18px}.mascot-cheek{background:#ffb3b3;border-radius:50%;width:14px;height:9px;position:absolute;top:38px}.mascot-cheek.left{left:8px}.mascot-cheek.right{right:8px}.mascot-hat{background:var(--primary);z-index:2;border-radius:20px 20px 4px 4px;width:40px;height:24px;position:absolute;top:-8px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}.mascot-hat:after{content:"★";color:gold;font-size:18px;animation:2s ease-in-out infinite sparkle;position:absolute;top:-10px;left:50%;transform:translate(-50%)}.speech-bubble{color:var(--text);text-align:center;background:#fff;border:2px solid #ffd1a4;border-radius:20px;max-width:220px;padding:10px 18px;font-size:.9rem;font-weight:700;animation:.5s bounceIn;position:relative;box-shadow:0 4px 16px #0000001a}.speech-bubble:after{content:"";border-top:14px solid #fff;border-left:10px solid #0000;border-right:10px solid #0000;width:0;height:0;position:absolute;bottom:-12px;left:50%;transform:translate(-50%)}.btn{font-family:var(--font);cursor:pointer;transition:all var(--transition);letter-spacing:.02em;color:#fff;-webkit-tap-highlight-color:transparent;border:none;border-radius:50px;outline:none;justify-content:center;align-items:center;gap:8px;padding:14px 28px;font-size:1.05rem;font-weight:700;text-decoration:none;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 4px 14px #00000026}.btn:active{transform:scale(.94);box-shadow:0 2px 8px #0003}.btn-primary{background:linear-gradient(135deg,#ff6b6b,#ff8e53)}.btn-secondary{background:linear-gradient(135deg,#4ecdc4,#44b09e)}.btn-accent{color:#5d4037;background:linear-gradient(135deg,#ffe66d,#ffc107)}.btn-large{border-radius:60px;padding:18px 36px;font-size:1.2rem}.btn-option{color:var(--text);background:#fff;border:3px solid #e8e0d8;border-radius:20px;min-width:90px;padding:16px 24px;font-size:1.3rem;font-weight:700;transition:all .15s;box-shadow:0 3px 10px #0000000f}.btn-option:hover{border-color:var(--secondary);background:#f0fdf9;transform:translateY(-3px);box-shadow:0 8px 20px #0000001a}.btn-option.correct{animation:.5s pulse;color:#065f46!important;background:#d1fae5!important;border-color:#34d399!important}.btn-option.wrong{animation:.4s wiggle;color:#991b1b!important;background:#fee2e2!important;border-color:#f87171!important}.btn-option:disabled{pointer-events:none;opacity:.7}.level-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;width:100%;max-width:680px;display:grid}.level-card{border-radius:var(--radius-sm);text-align:center;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow);background:#fff;border:3px solid #e8e0d8;padding:20px 16px;position:relative;overflow:hidden}.level-card:hover:not(.locked){box-shadow:var(--shadow-lg);border-color:var(--accent);transform:translateY(-6px)}.level-card.locked{opacity:.55;cursor:not-allowed;filter:grayscale(.4);pointer-events:none}.level-card .level-icon{margin-bottom:8px;font-size:3rem}.level-card .level-title{color:var(--text);font-size:1rem;font-weight:700}.level-card .level-range{color:#888;margin-top:4px;font-size:.8rem}.level-stars{justify-content:center;gap:4px;margin-top:8px;font-size:1.6rem;display:flex}.level-stars .star{color:#ddd;transition:all .3s}.level-stars .star.earned{color:gold;animation:.5s forwards starPop}.lock-icon{color:#999;font-size:1.3rem;position:absolute;top:10px;right:14px}.timer-bar-outer{background:#e8e0d8;border-radius:10px;width:100%;height:14px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.timer-bar-inner{background:var(--green);border-radius:10px;height:100%;transition:width 1s linear,background-color .5s}.timer-bar-inner.warning{background:var(--orange)}.timer-bar-inner.danger{background:var(--primary);animation:.6s ease-in-out infinite timerPulse}.timer-text{color:var(--text);margin-top:4px;font-size:1.1rem;font-weight:700}.timer-text.danger{color:var(--primary);animation:.5s infinite pulse}.hand-display{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;min-height:150px;padding:10px;display:flex}.hand-group{align-items:flex-end;gap:2px;display:flex}.hand-svg{filter:drop-shadow(0 4px 8px #0000001f);width:75px;height:100px;transition:transform var(--transition)}.hand-svg:hover{transform:scale(1.08)}.operator-symbol{color:var(--primary);text-shadow:0 2px 4px #0000001a;font-size:2.2rem;font-weight:800}.equals-symbol{color:var(--purple);text-shadow:0 2px 4px #0000001a;font-size:2.2rem;font-weight:800}.question-mark{color:var(--orange);font-size:2.5rem;font-weight:800;animation:2s ease-in-out infinite float}.options-grid{grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:400px;display:grid}.confetti-piece{pointer-events:none;z-index:999;border-radius:3px;width:10px;height:10px;animation:2.5s ease-in forwards confettiFall;position:fixed}.result-stars{justify-content:center;gap:10px;margin:16px 0;font-size:3.5rem;display:flex}.result-stars .big-star{opacity:0;transition:all .5s;animation:.6s forwards starPop}.result-stars .big-star:first-child{animation-delay:.1s}.result-stars .big-star:nth-child(2){animation-delay:.4s}.result-stars .big-star:nth-child(3){animation-delay:.7s}.score-badge{color:#5d4037;background:linear-gradient(135deg,#fff9e6,#ffecd2);border:3px solid gold;border-radius:50px;align-items:center;gap:6px;padding:10px 22px;font-size:1.2rem;font-weight:800;display:inline-flex}.title-main{color:var(--text);text-align:center;font-size:2.2rem;font-weight:900;line-height:1.2}.title-main .highlight{background:linear-gradient(135deg,#ff6b6b,#ff8e53);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.progress-dots{justify-content:center;gap:8px;display:flex}.progress-dot{width:12px;height:12px;transition:all var(--transition);background:#ddd;border-radius:50%}.progress-dot.done{background:var(--green);box-shadow:0 0 8px #34d39980}.progress-dot.current{background:var(--accent);animation:1s infinite pulse;box-shadow:0 0 12px #ffe66db3}.progress-dot.wrong-dot{background:var(--primary);box-shadow:0 0 8px #ff6b6b80}.hidden{display:none!important}@media (width<=480px){.options-grid{grid-template-columns:1fr 1fr;gap:10px}.btn-option{padding:14px 16px;font-size:1.1rem}.hand-svg{width:55px;height:75px}.operator-symbol,.equals-symbol{font-size:1.6rem}.card{padding:18px 12px}.mascot{width:70px;height:70px}.mascot-face{width:56px;height:56px;top:7px;left:7px}.mascot-eyes{gap:10px;top:18px}.mascot-eye{width:10px;height:12px}.mascot-mouth{width:16px;height:7px;bottom:14px}.mascot-hat{width:28px;height:18px;top:-6px}.speech-bubble{max-width:160px;padding:8px 14px;font-size:.75rem}.title-main{font-size:1.5rem}.result-stars{font-size:2.5rem}}