@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap";:root{font-family:Nunito,system-ui,sans-serif;line-height:1.6;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}button{font-family:inherit}body{min-height:100vh;background:linear-gradient(135deg,#667eea,#a855a0,#c084a0);background-attachment:fixed}#root{min-height:100vh;display:flex;flex-direction:column;align-items:center}.app-container{position:relative;min-width:500px;width:42vw;padding:.75rem 1.25rem;display:flex;flex-direction:column;align-items:center;min-height:100vh;justify-content:center}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.robot-icon{font-size:2rem;margin-bottom:.2rem;animation:bob 2s ease-in-out infinite}.title{font-size:1.4rem;font-weight:800;color:#fff;text-align:center;margin-bottom:.3rem}.subtitle{font-size:.85rem;color:#ffffffe6;text-align:center;max-width:600px;margin-bottom:.6rem;line-height:1.4}.subtitle .keyword-syntax{color:#fbbf24;font-weight:800}.subtitle .keyword-semantics{color:#60a5fa;font-weight:800}.cards-row{display:flex;gap:1rem;width:100%;margin-bottom:.6rem}.def-card{flex:1;border-radius:16px;padding:.75rem;border-width:2px;border-style:solid}.def-card.syntax{background:#fef3c7;border-color:#f59e0b}.def-card.semantics{background:#dbeafe;border-color:#93c5fd}.def-card-icon{font-size:1.4rem;margin-bottom:.25rem}.def-card h3{font-size:1rem;color:#1a1a5e;margin-bottom:.25rem}.def-card p{font-size:.85rem;color:#333;line-height:1.5}.def-card .example{margin-top:.4rem;font-style:italic;font-size:.8rem;color:#555}.def-card.syntax h3{color:#b45309}.def-card.semantics h3{color:#1e40af}.def-card.syntax .example{color:#b45309}.def-card.semantics .example{color:#1e40af}.how-to-play{background:#fff;border-radius:14px;padding:.75rem 1rem;width:100%;box-shadow:0 4px 16px #00000014;margin-bottom:.5rem}.how-to-play h3{font-size:.8rem;color:#1a1a5e;margin-bottom:.35rem;text-align:left}.how-to-play ol{list-style:none;counter-reset:steps;padding:0;display:flex;gap:1rem}.how-to-play ol li{counter-increment:steps;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;margin-bottom:.2rem;font-size:.65rem;color:#333}.how-to-play ol li:before{content:counter(steps);background:#2eb063;color:#fff;font-weight:700;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8rem;margin-bottom:.35rem}.start-btn{background:#2eb063;color:#fff;font-size:1rem;font-weight:700;border:none;border-radius:50px;padding:.6rem 2rem;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px #4ade8066}.start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4ade8080}.game-header{display:flex;justify-content:space-between;width:100%;margin-bottom:.25rem}.progress,.score{color:#fff;font-weight:700;font-size:.85rem}.progress-bar-track{width:100%;height:6px;background:#e5e7eb;border-radius:3px;margin-bottom:.6rem;overflow:hidden}.progress-bar-fill{height:100%;background:#2eb063;border-radius:4px;transition:width .3s ease}.game-card{background:#fff;border-radius:16px;padding:1.5rem 1.25rem;width:100%;box-shadow:0 8px 30px #0000001f}.ai-bot{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:1rem}.ai-bot-icon{font-size:1.6rem}.ai-bot-label{font-size:.7rem;color:#888}.ai-bot-quote{font-size:.85rem;color:#333;font-style:italic}.sentence-box{border:2px solid #e5e7eb;border-radius:14px;padding:1rem 1.25rem;margin-bottom:.75rem}.sentence{font-size:1.25rem;font-weight:700;color:#1a1a5e;margin-bottom:0;line-height:1.4;padding:0 .75rem;text-align:center}.sentence-label{font-size:.8rem;color:#666;text-align:center;margin-bottom:1rem}.choices{display:flex;gap:.75rem;width:100%}.choice-btn{flex:1;display:flex;flex-direction:row;align-items:flex-start;gap:.4rem;text-align:left;padding:.75rem;font-size:1rem;font-weight:600;border:2px solid transparent;border-radius:12px;cursor:pointer;transition:transform .12s,box-shadow .12s;min-width:auto}.choice-btn:hover{transform:translateY(-2px)}.choice-icon{font-size:1.25rem;flex-shrink:0}.choice-title{font-size:.9rem;font-weight:800;display:block;color:#1a1a5e}.choice-desc{font-size:.75rem;font-weight:400;display:block;color:#555}.choice-btn.syntax-choice{background:#fef3c7;color:#92400e;border-color:#f59e0b}.choice-btn.syntax-choice:hover{box-shadow:0 4px 14px #f59e0b59}.choice-btn.semantics-choice{background:#dbeafe;color:#1e40af;border-color:#93c5fd}.choice-btn.semantics-choice:hover{box-shadow:0 4px 14px #93c5fd73}.choice-btn.correct-choice{background:#f0fdf4;color:#166534;border-color:#2eb063}.choice-btn.correct-choice:hover{box-shadow:0 4px 14px #4ade8059}.feedback-card{background:#fff;border-radius:16px;padding:1.5rem 1.25rem;width:100%;box-shadow:0 8px 30px #0000001f;text-align:center;margin-top:.6rem}.feedback-icon{font-size:2.5rem;margin-bottom:.5rem}.feedback-title{font-size:1.3rem;font-weight:800;margin-bottom:.2rem}.feedback-title.correct{color:#2eb063}.feedback-title.incorrect{color:#dc2626}.feedback-sentence{font-size:1rem;font-weight:600;color:#1a1a5e;margin:.6rem 0}.feedback-type{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .75rem;border-radius:20px;margin-bottom:.6rem}.feedback-type.syntax{background:#fef3c7;color:#92400e}.feedback-type.semantics{background:#dbeafe;color:#1e40af}.feedback-type.correct{background:#f0fdf4;color:#2eb063}.feedback-explain{font-size:.85rem;color:#444;line-height:1.5;margin-bottom:.5rem;text-align:left;padding:0 .5rem}.feedback-ai{background:#f3f4f6;border-radius:10px;padding:.75rem 1rem;margin-bottom:1rem;text-align:left}.feedback-ai strong{color:#667eea}.feedback-ai p{font-size:.85rem;color:#555;line-height:1.4;margin-top:.2rem}.next-btn{background:linear-gradient(135deg,#667eea,#a855a0);color:#fff;font-size:1rem;font-weight:700;border:none;border-radius:50px;padding:.6rem 2rem;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px #667eea59}.next-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.results-card{background:#fff;border-radius:16px;padding:1.5rem 1.25rem;width:100%;box-shadow:0 8px 30px #0000001f;text-align:center;margin-top:.6rem}.results-icon{font-size:3rem;margin-bottom:.3rem}.results-title{font-size:1.4rem;font-weight:800;color:#1a1a5e;margin-bottom:.3rem}.results-score{font-size:2.25rem;font-weight:800;color:#e89a2e;margin-bottom:.2rem}.results-feedback{font-size:.95rem;color:#444;margin-bottom:1rem;line-height:1.5}.results-learned{background:#eef2ff;border:1px solid #c7d2fe;border-radius:14px;padding:.75rem 1rem;margin-bottom:1rem;text-align:left}.results-learned-title{font-size:.9rem;font-weight:700;color:#1a1a5e;margin-bottom:.5rem;text-align:center}.results-learned-item{font-size:.8rem;color:#333;line-height:1.5;margin-bottom:.3rem}.results-learned-item:last-child{margin-bottom:0}.results-buttons{display:flex;gap:1rem;justify-content:center}.play-again-btn{background:#4ade80;color:#fff;font-size:1rem;font-weight:700;border:none;border-radius:50px;padding:.6rem 1.5rem;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px #4ade8066}.play-again-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4ade8080}.home-btn{background:#9ca3af;color:#fff;font-size:1rem;font-weight:700;border:none;border-radius:50px;padding:.6rem 1.5rem;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px #9ca3af66}.home-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #9ca3af80}.top-buttons{position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem;z-index:50}.about-btn{width:60px;height:30px;border-radius:10px;background:#fff;border:none;font-size:.8rem;font-weight:700;color:#1a1a5e;cursor:pointer;box-shadow:0 2px 8px #0000001f;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s}.about-btn:hover{transform:translateY(-2px);box-shadow:0 4px 14px #0000002e}.mute-btn{width:36px;height:30px;border-radius:10px;background:#fff;border:none;font-size:.9rem;cursor:pointer;box-shadow:0 2px 8px #0000001f;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s}.mute-btn:hover{transform:translateY(-2px);box-shadow:0 4px 14px #0000002e}.about-backdrop{position:fixed;inset:0;background:#00000080;z-index:100;display:flex;align-items:center;justify-content:center}.about-modal{background:#fff;border-radius:20px;max-width:480px;width:90%;padding:2rem;box-shadow:0 8px 30px #0000001f;position:relative}.about-close-btn{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.25rem;color:#888;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s}.about-close-btn:hover{background:#f3f4f6}.about-title{font-size:1.3rem;font-weight:800;color:#1a1a5e;margin-bottom:.75rem}.about-text{font-size:.95rem;color:#444;line-height:1.6;margin-bottom:1.5rem}.about-logos{display:flex;gap:1rem;justify-content:center}.about-logos img{width:80px;height:80px;border-radius:12px;object-fit:contain}@media(max-width:600px){.app-container{padding:1.5rem 1rem}.title{font-size:1.6rem}.cards-row{flex-direction:column}.sentence{font-size:1.25rem}.choices{flex-direction:column;align-items:center}.choice-btn{width:100%}}