@import "https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#d9effa;--royal-blue:#1a56d6;--blue-dark:#1240a8;--blue-light:#4e86f5;--white:#fff;--yellow:#ffd600;--green:#22c55e;--coral:#ff6b6b;--purple:#a855f7;--orange:#ff9a2e;--text-dark:#0d1b5e;--font-display:"Fredoka One", cursive;--font-body:"Nunito", sans-serif}html,body{width:100%;min-height:100%;font-family:var(--font-body);background:var(--bg);color:var(--text-dark);overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(circle,#1a56d612 2px,#0000 2px);background-size:36px 36px;position:fixed;inset:0}#root{z-index:1;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;position:relative}.welcome-card{background:var(--white);text-align:center;border-radius:32px;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:520px;padding:40px 36px 44px;display:flex;position:relative;overflow:hidden;box-shadow:0 12px #1a56d638,0 20px 40px #0000001a}.welcome-card:before{content:"";background:linear-gradient(90deg, var(--coral), var(--yellow), var(--green), var(--purple), var(--blue-light));height:10px;position:absolute;top:0;left:0;right:0}.hello-text{font-family:var(--font-display);letter-spacing:4px;color:var(--royal-blue);font-size:clamp(52px,14vw,76px);line-height:1;animation:1.2s infinite alternate bounce}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.mascot-wrap{background:linear-gradient(135deg, var(--royal-blue), var(--blue-light));width:120px;height:120px;box-shadow:0 6px 0 var(--blue-dark), 0 12px 24px #1a56d64d;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;animation:3s ease-in-out infinite wiggle;display:flex;overflow:hidden}.mascot-wrap img{object-fit:contain;width:90%;height:90%}.mascot-wrap svg{width:76px;height:76px}@keyframes wiggle{0%,to{transform:rotate(-4deg)scale(1)}50%{transform:rotate(4deg)scale(1.04)}}.quiz-title{font-family:var(--font-display);color:var(--royal-blue);letter-spacing:1px;font-size:clamp(22px,6vw,30px);line-height:1.3}.play-btn{cursor:pointer;background:linear-gradient(145deg,#ffe066,#ffb700,#cc8a00);border:3px solid #e6a000;border-radius:50%;justify-content:center;align-items:center;width:88px;height:88px;margin-top:8px;transition:transform .1s,box-shadow .1s;animation:2s ease-in-out infinite pulse-btn;display:flex;box-shadow:0 8px #8b6000,0 14px 28px #b4780073}.play-btn:hover{transform:scale(1.06)}.play-btn:active{transform:translateY(6px)scale(.97);box-shadow:0 2px #8b6000,0 4px 12px #b478004d}.play-btn svg{width:38px;height:38px;fill:var(--royal-blue);margin-left:5px}@keyframes pulse-btn{0%,to{box-shadow:0 8px #8b6000,0 14px 28px #b4780073}50%{box-shadow:0 8px #8b6000,0 14px 40px #b47800b3}}.play-label{font-family:var(--font-display);color:var(--royal-blue);letter-spacing:1px;font-size:20px}.star-row{gap:16px;font-size:28px;display:flex}.star{animation:3s ease-in-out infinite spin-pulse;display:inline-block}.star:nth-child(2){animation-delay:.4s}.star:nth-child(3){animation-delay:.8s}@keyframes spin-pulse{0%,to{transform:rotate(0)scale(1)}50%{transform:rotate(20deg)scale(1.2)}}.question-card{background:var(--white);border-radius:32px;flex-direction:column;gap:20px;width:100%;max-width:520px;padding:32px 28px 36px;display:flex;box-shadow:0 12px #1a56d638,0 20px 40px #0000001a}.progress-bar-wrap{background:#e0eaf8;border-radius:99px;height:12px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--royal-blue), var(--blue-light));border-radius:99px;height:100%;transition:width .4s}.question-counter{font-family:var(--font-display);color:var(--blue-light);text-align:center;letter-spacing:.5px;font-size:15px}.question-text{font-family:var(--font-display);color:var(--text-dark);text-align:center;font-size:clamp(20px,5vw,26px);line-height:1.35}.answer-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (width<=480px){.answer-grid{grid-template-columns:1fr}}.answer-btn{border:3px solid var(--royal-blue);background:var(--white);color:var(--text-dark);font-family:var(--font-body);cursor:pointer;text-align:center;border-radius:20px;padding:16px 12px;font-size:15px;font-weight:800;line-height:1.3;transition:background .15s,color .15s,transform .15s,box-shadow .15s;box-shadow:0 4px #1a56d633}.answer-btn:hover:not(:disabled){background:#eef4ff;transform:translateY(-2px);box-shadow:0 6px #1a56d633}.answer-btn:disabled{cursor:default}.answer-btn.correct{background:var(--green);color:var(--white);border-color:#16a34a;animation:.4s cubic-bezier(.34,1.56,.64,1) both pop-correct;box-shadow:0 4px #15803d}.answer-btn.wrong{background:var(--coral);color:var(--white);border-color:#dc2626;animation:.4s both shake;box-shadow:0 4px #b91c1c}@keyframes pop-correct{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.feedback-banner{font-family:var(--font-display);text-align:center;color:var(--white);letter-spacing:.5px;border-radius:16px;padding:14px 20px;font-size:18px}.feedback-banner.correct{background:var(--green)}.feedback-banner.wrong{background:var(--coral)}.next-btn{background:var(--royal-blue);color:var(--white);font-family:var(--font-display);letter-spacing:1px;cursor:pointer;box-shadow:0 6px 0 var(--blue-dark), 0 10px 20px #1a56d64d;border:none;border-radius:99px;align-self:center;padding:14px 36px;font-size:20px;transition:transform .1s,box-shadow .1s}.next-btn:hover{transform:translateY(-2px)}.next-btn:active{box-shadow:0 2px 0 var(--blue-dark);transform:translateY(4px)}.results-card{background:var(--white);text-align:center;border-radius:32px;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:520px;padding:40px 36px 44px;display:flex;position:relative;overflow:hidden;box-shadow:0 12px #1a56d638,0 20px 40px #0000001a}.results-card:before{content:"";background:linear-gradient(90deg, var(--coral), var(--yellow), var(--green), var(--purple), var(--blue-light));height:10px;position:absolute;top:0;left:0;right:0}.trophy-icon{font-size:72px;line-height:1;animation:.8s cubic-bezier(.34,1.56,.64,1) both trophy-bounce}@keyframes trophy-bounce{0%{transform:scale(0)rotate(-15deg)}to{transform:scale(1)rotate(0)}}.results-title{font-family:var(--font-display);color:var(--royal-blue);font-size:clamp(28px,8vw,40px)}.results-thanks{font-family:var(--font-body);color:var(--text-dark);font-size:16px;font-weight:700;line-height:1.5}.score-box{background:var(--royal-blue);box-shadow:0 6px 0 var(--blue-dark);border-radius:20px;flex-direction:column;align-items:center;gap:4px;padding:20px 48px;display:flex}.score-number{font-family:var(--font-display);background:linear-gradient(145deg,#ffe066,#ffb700);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:64px;line-height:1}.score-label{font-family:var(--font-display);color:#fffc;letter-spacing:1px;font-size:18px}.score-message{font-family:var(--font-display);color:var(--text-dark);font-size:clamp(18px,4.5vw,22px);line-height:1.4}.play-again-btn{color:var(--text-dark);font-family:var(--font-display);letter-spacing:1px;cursor:pointer;background:linear-gradient(145deg,#ffe066,#ffb700,#cc8a00);border:3px solid #e6a000;border-radius:99px;margin-top:8px;padding:16px 40px;font-size:22px;transition:transform .1s,box-shadow .1s;box-shadow:0 8px #8b6000,0 14px 28px #b4780059}.play-again-btn:hover{transform:translateY(-2px)}.play-again-btn:active{transform:translateY(6px);box-shadow:0 2px #8b6000}