:root{--primary: #5a7d52;--secondary: #a1887f;--light: #e8f5e9;--dark: #3e4d3a;--success: #2e7d32;--danger: #c62828;--warning: #f9a825}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background-color:#f5f5f5;color:#333;line-height:1.6;overflow-x:hidden;overflow-y:auto;position:relative;scroll-padding-top:80px}.container{max-width:900px;margin:0 auto;padding:20px;overflow:visible}header{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:1rem 0;text-align:center;border-radius:0 0 16px 16px;box-shadow:0 4px 10px #00000014;margin-bottom:1rem;position:relative;z-index:10}header h1{font-family:Manrope,sans-serif;font-size:2.5rem;font-weight:700}header .subtitle{font-family:Manrope,sans-serif;font-size:1rem;font-weight:400;opacity:.85}.quiz-container{background-color:transparent;border-radius:0;box-shadow:none;padding:0 0 2rem;margin-bottom:0;width:100%}.question-number,.score-value{font-weight:700;color:var(--primary)}.question{font-size:1.3rem;margin-bottom:1.5rem}.options{margin-bottom:1.5rem}.option{background-color:var(--light);border:2px solid #e1bee7;border-radius:8px;padding:1rem;margin-bottom:.8rem;cursor:pointer;transition:all .3s ease;display:flex;gap:8px;align-items:center}.option-label{font-weight:700;min-width:24px;flex-shrink:0}.option-text{flex:1}.option:hover{background-color:#e1bee7;border-color:var(--primary)}.option.selected{background-color:var(--primary);color:#fff;border-color:var(--primary)}.option.correct{background-color:var(--success);color:#fff;border-color:var(--success)}.option.incorrect{background-color:var(--danger);color:#fff;border-color:var(--danger)}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem}button{background-color:var(--primary);color:#fff;border:none;padding:.8rem 1.5rem;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .3s ease}button:hover{background-color:var(--secondary);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}button:disabled{background-color:#ddd;color:#888;cursor:not-allowed;transform:none;box-shadow:none;opacity:.6}.final-screen{text-align:center;padding:0 0 2rem}.final-score{font-size:2rem;margin:1rem 0;color:var(--primary)}.milestone-box{border:2px solid #ddd;border-radius:10px;padding:1.2rem;margin:1.5rem auto;max-width:350px;background:#fafafa;text-align:center}.milestone-title{font-size:1.2rem;font-weight:700;margin-bottom:.8rem}.milestone-image{max-width:80%;height:auto;margin-bottom:1rem}.progress-label{font-size:.9rem;margin-bottom:.3rem;color:#555}.progress-bar{background:#eee;border-radius:8px;height:12px;width:100%;overflow:hidden}.progress-fill{background:linear-gradient(to right,#00a86b,#6c6);height:100%;width:0%;transition:width .4s ease}.review-toggle{margin-top:2rem;border:1px solid #ddd;border-radius:8px;background:#f9f9f9;box-shadow:0 2px 5px #0000000d;overflow:hidden}.review-toggle summary{padding:1rem;cursor:pointer;font-weight:700;font-size:1.1rem;align-items:center;gap:.5rem;background-color:#eef2ec;border-bottom:1px solid #ddd;list-style:none}.review-toggle summary::-webkit-details-marker{display:none}.review-toggle summary .arrow-icon{display:inline-flex;align-items:center;justify-content:center;width:1.2em;margin-right:.5rem}.review-toggle summary .arrow-icon i{transition:transform .3s ease}.review-toggle[open] summary{background-color:#e0ece0}.review-toggle[open] summary .arrow-icon i{transform:rotate(90deg)}.review-container{padding:1rem;border-top:1px solid #ddd}.review-question{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px dashed #ccc}.question-text{font-weight:600;margin-bottom:.3rem}.answer-info{margin-left:1rem;font-size:.95rem}.answer-info strong{color:var(--primary)}.explanation-text{margin-top:.5rem;font-style:italic}.flag-image{text-align:center;margin:1rem 0}.flag-image img{max-width:100%;height:auto;border-radius:8px}.explanation{background-color:#e8f5e9;border-left:4px solid var(--success);padding:1rem;border-radius:0 8px 8px 0;margin:1.5rem 0}.explanation h3{color:var(--success);margin-bottom:.5rem;font-size:1.1rem}.explanation-scrollable{padding:6px 10px;background-color:#f0f9f0;border:1px solid #cde8cd;border-left:4px solid #72b372;border-radius:6px;font-size:.95em;overflow-x:auto}.share-box{background:#f5f5f5;padding:1rem;border-radius:10px;box-shadow:0 3px 8px #00000014;text-align:center;margin-top:2rem}.share-box h3{margin-bottom:.5rem;color:var(--primary);font-size:1.2rem}#share-preview{background-color:#fff;border:1px solid #ddd;padding:.8rem 1rem;border-radius:12px;font-size:.9rem;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;font-family:monospace;text-align:left;max-width:100%;box-shadow:0 2px 5px #0000000d;margin:1rem auto}.share-buttons{display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:.5rem}.share-buttons button{background-color:var(--primary);color:#fff;border:none;padding:.5rem .8rem;border-radius:6px;font-size:1rem;cursor:pointer;transition:background-color .2s ease;display:inline-flex;align-items:center;justify-content:center}.share-buttons button:hover{background-color:var(--secondary)}.share-buttons button i{font-size:1.2rem}.flip-perspective-container{perspective:1000px;position:relative;min-height:400px;margin:0 auto 20px;max-width:800px}.flip-card{width:100%;position:relative;transform-style:preserve-3d;transition:transform 1s ease}.flip-card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;top:0;left:0;backface-visibility:hidden;display:flex;justify-content:center;align-items:flex-start;padding:0;background:transparent;box-shadow:none;z-index:1}.card-front{z-index:2;transform:rotateY(0)}.card-front-content{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000001a;text-align:center;max-width:800px;width:100%}.card-front.hidden-after-intro{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s ease}.card-back{transform:rotateY(180deg);z-index:1}.card-wrapper{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000001a;width:100%;max-width:800px}@media (max-width: 600px){.container{padding:10px}header h1{font-size:1.8rem}.card-front-content,.card-wrapper{padding:1rem}.quiz-container,.final-screen{padding:0 0 1rem}}#native-share-btn{background-color:var(--primary);color:#fff;border:none;padding:.5rem .8rem;border-radius:6px;font-size:1rem;cursor:pointer;display:none;align-items:center;gap:.4rem}
