@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=DM+Serif+Display&display=swap";:root{--bg: #F4F9F4;--surface: #FFFFFF;--primary: #3A8C5A;--primary-dark: #286B40;--accent: #FF8C42;--text: #1F2E1F;--text-muted: #5C7065;--border: #D8E5D8;--success: #3A8C5A;--warning: #D4A574;--danger: #C97B7B;--radius: 20px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04)}body{margin:0;padding:0;background:radial-gradient(circle at 80% 20%,#3A8C5A15 0%,transparent 50%),var(--bg);color:var(--text);font-family:DM Sans,Inter,PingFang SC,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;box-sizing:border-box}.app-container{background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;max-width:500px;width:90%;text-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:20px;min-height:500px;justify-content:center}.cloud-status{position:absolute;top:15px;left:50%;transform:translate(-50%);z-index:10;width:100%;display:flex;justify-content:center}.cloud-message{background-color:rgba(var(--primary-dark),.9);color:var(--surface);padding:8px 15px;border-radius:15px;font-size:.85em;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow)}.start-screen,.playing-screen,.result-screen{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.icon-main{width:80px;height:80px;color:var(--primary);margin-bottom:15px}.app-title,.result-title{font-family:"DM Serif Display",Lora,serif;font-size:2.5em;color:var(--primary-dark);margin:0;line-height:1.2}.app-description{font-size:1.1em;color:var(--text-muted);margin-bottom:20px;line-height:1.6}.start-button,.next-button,.restart-button{background:linear-gradient(45deg,var(--primary),var(--accent));color:var(--surface);border:none;border-radius:var(--radius);padding:15px 30px;font-size:1.2em;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow);text-shadow:1px 1px 2px rgba(0,0,0,.1)}.start-button:hover,.next-button:hover,.restart-button:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-2px)}.loading-text{color:var(--text-muted);font-size:.9em}.high-score-display{font-size:1.1em;color:var(--text-muted);margin-top:10px}.score-value{font-weight:700;color:var(--primary);font-size:1.2em}.progress-container{width:100%;height:8px;background-color:var(--border);border-radius:4px;margin-bottom:20px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:4px;transition:width .5s ease-out}.question-counter{font-size:1em;color:var(--text-muted);margin-bottom:15px}.question-text{font-family:"DM Serif Display",Lora,serif;font-size:1.8em;color:var(--primary-dark);margin-bottom:30px;line-height:1.4}.options-grid{display:grid;grid-template-columns:1fr;gap:15px;width:100%;margin-bottom:20px}.option-button{background-color:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:15px 20px;font-size:1.1em;color:var(--text);cursor:pointer;transition:all .2s ease;text-align:left;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}.option-button:not(:disabled):hover{border-color:var(--primary);box-shadow:0 2px 5px #0000001a}.option-button.correct{background-color:var(--success);color:var(--surface);border-color:var(--success);box-shadow:0 2px 5px #3a8c5a4d}.option-button.wrong{background-color:var(--danger);color:var(--surface);border-color:var(--danger);box-shadow:0 2px 5px #c97b7b4d}.option-button:disabled{cursor:not-allowed;opacity:.8}.icon-feedback{width:20px;height:20px;margin-left:10px}.icon-feedback.correct-icon,.icon-feedback.wrong-icon{color:var(--surface)}.feedback-section{width:100%;background-color:var(--border);border-radius:var(--radius);padding:20px;margin-top:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:15px}.feedback-message{font-size:1.2em;font-weight:700;margin:0}.feedback-message.correct-text{color:var(--success)}.feedback-message.wrong-text{color:var(--danger)}.explanation-text{font-size:.95em;color:var(--text-muted);line-height:1.5;margin:0}.explanation-title{font-weight:700;color:var(--primary-dark)}.current-score{font-size:1.1em;color:var(--text-muted);margin-top:20px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;width:100%;margin-top:20px;margin-bottom:30px}.stat-item{background-color:var(--border);border-radius:10px;padding:15px;font-size:1em;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:var(--shadow)}.stat-item .stat-value{font-size:1.4em;font-weight:700;color:var(--primary-dark)}.stat-item.correct-text .stat-value{color:var(--success)}.stat-item.wrong-text .stat-value{color:var(--danger)}.high-score-text .score-value{color:var(--accent)}.new-high-score-tag{background-color:var(--accent);color:var(--surface);padding:3px 8px;border-radius:8px;font-size:.7em;margin-left:5px;font-weight:700}.wrong-answers-review{width:100%;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:20px;text-align:left;box-shadow:var(--shadow)}.wrong-answers-review h3{font-family:"DM Serif Display",Lora,serif;color:var(--primary-dark);margin-top:0;margin-bottom:15px;font-size:1.5em}.wrong-answers-review ul{list-style:none;padding:0;margin:0}.wrong-answers-review li{margin-bottom:15px;border-bottom:1px dashed var(--border);padding-bottom:15px}.wrong-answers-review li:last-child{border-bottom:none;padding-bottom:0}.wrong-answers-review .question-text-review{font-weight:700;color:var(--text);margin-bottom:5px}.wrong-answers-review .correct-answer-review{color:var(--success);font-size:.95em}.review-note{font-size:.9em;color:var(--text-muted);margin-top:15px}@media (max-width: 600px){.app-container{padding:20px;width:95%}.app-title,.result-title{font-size:2em}.question-text{font-size:1.5em}.start-button,.next-button,.restart-button{padding:12px 25px;font-size:1.1em}.options-grid{gap:10px}.option-button{padding:12px 15px;font-size:1em}.stats-grid{grid-template-columns:1fr}}
