@import"https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--pizza-crust: #d4a030;--pizza-sauce: #c0392b;--pizza-cheese: #f4d03f;--bg-warm: #fff8f0;--accent-red: #e74c3c;--accent-green: #27ae60;--accent-blue: #3498db;--accent-purple: #9b59b6;--accent-orange: #f39c12;--text-dark: #2c3e50;--shadow: 0 4px 15px rgba(0,0,0,.1)}body{font-family:Nunito,sans-serif;background:var(--bg-warm);color:var(--text-dark);min-height:100vh;overflow-x:hidden}h1,h2,h3,.btn,.fraction-display{font-family:Fredoka One,cursive}#title-screen{flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:2rem;background:linear-gradient(135deg,#fff8f0,#ffe8d6)}.title-pizza{width:200px;height:200px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(3deg)}}.game-title{font-size:clamp(2.5rem,8vw,4.5rem);color:var(--accent-red);text-shadow:3px 3px 0 var(--pizza-crust);margin:.5rem 0}.game-subtitle{font-size:clamp(1rem,3vw,1.4rem);color:#7f8c8d;margin-bottom:2rem;font-weight:700}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;max-width:800px;width:100%;padding:0 1rem}.mode-card{background:#fff;border-radius:20px;padding:1.8rem 1.2rem;box-shadow:var(--shadow);cursor:pointer;transition:all .3s ease;border:3px solid transparent}.mode-card:hover{transform:translateY(-5px) scale(1.02);border-color:var(--accent-orange);box-shadow:0 8px 25px #00000026}.mode-icon{font-size:3rem;margin-bottom:.5rem}.mode-name{font-size:1.3rem;font-weight:900;margin-bottom:.3rem}.mode-desc{font-size:.9rem;color:#95a5a6}.screen{display:none}.screen.active{display:flex}#game-screen{flex-direction:column;align-items:center;min-height:100vh;padding:1rem}.game-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:700px;margin-bottom:1rem;gap:1rem;flex-wrap:wrap}.back-btn{background:none;border:none;font-size:1.8rem;cursor:pointer;padding:.3rem;border-radius:50%;transition:background .2s;line-height:1}.back-btn:hover{background:#0000000d}.score-bar{display:flex;align-items:center;gap:1.2rem;font-weight:900;font-size:1.1rem}.score-item{display:flex;align-items:center;gap:.3rem}.streak-fire,.stars-display{color:var(--accent-orange)}.level-badge{background:var(--accent-blue);color:#fff;padding:.2rem .8rem;border-radius:20px;font-size:.95rem}.progress-track{width:100%;max-width:700px;height:10px;background:#e0e0e0;border-radius:10px;overflow:hidden;margin-bottom:1.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-green),#2ecc71);border-radius:10px;transition:width .5s ease}.pizza-area{position:relative;margin:1rem 0}.pizza-svg{filter:drop-shadow(0 6px 12px rgba(0,0,0,.15));max-width:90vw}.question-text{font-size:clamp(1.2rem,4vw,1.8rem);text-align:center;margin:1rem 0;font-weight:900;line-height:1.4}.answers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;max-width:500px;width:100%;padding:0 1rem}.btn{padding:1rem 1.5rem;border:3px solid #e0e0e0;border-radius:16px;background:#fff;font-size:clamp(1.1rem,3vw,1.4rem);cursor:pointer;transition:all .2s ease;font-family:Fredoka One,cursive;color:var(--text-dark);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.btn:hover{border-color:var(--accent-blue);transform:scale(1.03)}.btn:active{transform:scale(.97)}.btn.correct{background:var(--accent-green);border-color:var(--accent-green);color:#fff;animation:popCorrect .4s ease}.btn.wrong{background:var(--accent-red);border-color:var(--accent-red);color:#fff;animation:shake .4s ease}@keyframes popCorrect{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.pizza-slice-interactive{cursor:pointer;transition:opacity .2s}.pizza-slice-interactive:hover{filter:brightness(1.1)}.build-instruction{font-size:1rem;color:#95a5a6;margin-bottom:.5rem}.build-confirm{margin-top:1rem}.btn-primary{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue);padding:.8rem 2.5rem;font-size:1.2rem}.btn-primary:hover{background:#2980b9;border-color:#2980b9}.compare-area{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:center;margin:1rem 0}.compare-pizza{display:flex;flex-direction:column;align-items:center;gap:.5rem}.compare-label{font-size:1.6rem;font-weight:900;font-family:Fredoka One,cursive}.compare-vs{font-size:2rem;font-weight:900;color:#bdc3c7}.compare-hidden{opacity:0;transform:translateY(5px)}.compare-revealed{animation:labelReveal .4s ease forwards}@keyframes labelReveal{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.compare-choice{cursor:pointer;border-radius:20px;padding:1rem;border:3px solid transparent;transition:all .2s ease}.compare-choice:hover{border-color:var(--accent-blue);transform:scale(1.05);background:#3498db0d}.compare-choice:active{transform:scale(.97)}.compare-choice.correct{border-color:var(--accent-green);background:#27ae601a}.compare-choice.wrong{border-color:var(--accent-red);background:#e74c3c1a}.feedback-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;z-index:100;pointer-events:none}.feedback-overlay.show{display:flex;background:#fff8f0b3}.feedback-text{font-family:Fredoka One,cursive;font-size:clamp(3rem,12vw,6rem);text-shadow:4px 4px 0 rgba(0,0,0,.1);animation:feedbackIn 2s ease forwards}.feedback-text.correct{color:var(--accent-green)}.feedback-text.wrong{color:var(--accent-red)}@keyframes feedbackIn{0%{transform:scale(0) rotate(-10deg);opacity:0}15%{transform:scale(1.3) rotate(3deg);opacity:1}25%{transform:scale(1) rotate(0);opacity:1}75%{transform:scale(1) rotate(0);opacity:1}to{transform:scale(.8) rotate(0);opacity:0}}.float-star{position:absolute;font-family:Fredoka One,cursive;font-size:1.5rem;color:var(--accent-orange);pointer-events:none;z-index:50;animation:floatUp 1.2s ease forwards}@keyframes floatUp{0%{transform:translateY(0) scale(.5);opacity:0}20%{transform:translateY(-10px) scale(1.2);opacity:1}to{transform:translateY(-80px) scale(1);opacity:0}}.pizza-wiggle .pizza-svg{animation:pizzaCelebrate .6s ease}@keyframes pizzaCelebrate{0%{transform:rotate(0) scale(1)}20%{transform:rotate(-5deg) scale(1.05)}40%{transform:rotate(5deg) scale(1.05)}60%{transform:rotate(-3deg) scale(1.02)}80%{transform:rotate(2deg) scale(1.01)}to{transform:rotate(0) scale(1)}}.btn.reveal-correct{border-color:var(--accent-green);box-shadow:0 0 0 3px var(--accent-green);animation:pulseReveal 1s ease 2}@keyframes pulseReveal{0%,to{box-shadow:0 0 0 3px var(--accent-green)}50%{box-shadow:0 0 0 6px #27ae604d}}#level-complete{flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:2rem;background:linear-gradient(135deg,#fff8f0,#ffe8d6)}.level-stars{font-size:4rem;margin:1rem 0;animation:starsAppear .8s ease}@keyframes starsAppear{0%{transform:scale(0) rotate(-180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.level-score{font-size:1.3rem;color:#7f8c8d;margin-bottom:2rem}.level-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.btn-big{padding:1rem 2.5rem;font-size:1.3rem;border-radius:20px;border:3px solid transparent;cursor:pointer;font-family:Fredoka One,cursive;transition:all .2s ease}.btn-big:hover{transform:scale(1.05)}.btn-continue{background:var(--accent-green);color:#fff}.btn-menu{background:#fff;color:var(--text-dark);border-color:#e0e0e0}.confetti-piece{position:fixed;width:10px;height:10px;z-index:200;pointer-events:none;border-radius:2px}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.fraction{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;margin:0 .2em}.frac-num,.frac-den{display:block}.frac-line{width:100%;height:3px;background:currentColor;margin:2px 0;border-radius:2px}#victory-screen{flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:2rem;background:linear-gradient(135deg,#fff8f0,#ffe8d6)}.victory-pizza{font-size:6rem;animation:float 3s ease-in-out infinite}.victory-title{font-size:clamp(2.5rem,8vw,4rem);color:var(--accent-orange);text-shadow:3px 3px 0 var(--pizza-crust);margin:.5rem 0}.victory-subtitle{font-size:clamp(1rem,3vw,1.4rem);color:#7f8c8d;margin-bottom:1rem;font-weight:700}.site-footer{position:fixed;bottom:0;left:0;right:0;text-align:center;padding:.6rem;font-size:.75rem;color:#bdc3c7;letter-spacing:.02em}.site-footer a{color:#e66386;text-decoration:none}.site-footer a:hover{color:#d4506f;text-decoration:underline}.build-hint{color:var(--accent-red);font-weight:900;font-size:1.1rem;text-align:center;margin:.3rem 0;animation:shake .4s ease}.teaching-moment{text-align:center;color:var(--accent-green);font-family:Fredoka One,cursive;font-size:clamp(1.2rem,4vw,1.5rem);margin-top:1rem;padding:.8rem 1.5rem;background:#27ae601a;border:2px solid rgba(39,174,96,.25);border-radius:14px;max-width:500px;animation:labelReveal .4s ease forwards}@media(max-width:500px){.mode-grid{grid-template-columns:1fr}.answers-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}.compare-area{gap:.8rem}}