*{margin:0;padding:0;box-sizing:border-box}.option,.start-btn,.pronounce-btn,.next-btn,.restart-btn{transform:translateZ(0);backface-visibility:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px 0;overflow-y:auto}.container{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:600px;width:100%;padding:40px;margin:20px auto}header{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #f0f0f0}h1{color:#333;font-size:2rem;margin-bottom:15px;display:flex;align-items:center;justify-content:center;gap:12px}.icon-header{width:32px;height:32px;color:#667eea}.score-container{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.mode-toggle{display:flex;background:#f0f2f5;padding:4px;border-radius:12px;gap:4px}.mode-btn{background:none;border:none;padding:8px 12px;border-radius:8px;cursor:pointer;color:#666;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.mode-btn svg{width:18px;height:18px}.mode-btn:hover{color:#667eea}.mode-btn.active{background:#fff;color:#667eea;box-shadow:0 2px 8px #0000000d}.score{font-size:1.1rem;color:#666;font-weight:500;display:flex;align-items:center;gap:8px}.start-screen{display:flex;align-items:center;justify-content:center;min-height:500px;padding:40px 20px}.start-content{text-align:center}.start-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:24px 60px;border-radius:50px;font-size:1.5rem;cursor:pointer;transition:transform .2s ease-out,box-shadow .2s ease-out;font-weight:600;display:flex;align-items:center;justify-content:center;gap:15px;margin:0 auto;box-shadow:0 10px 30px #667eea4d}.start-btn:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 15px 40px #667eea80}.start-btn:active{transform:translateY(-2px) scale(1.02)}.icon-start-btn{width:32px;height:32px;flex-shrink:0}.loading-section{margin-bottom:30px;text-align:center}.loading-section.hidden{display:none}.loading-spinner{width:48px;height:48px;border:4px solid #e9ecef;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:1.1rem;color:#667eea;font-weight:500;margin-bottom:8px}.loading-section.error .loading-spinner{border-top-color:#dc3545;animation:none}.loading-section.error .loading-text{color:#dc3545}.quiz-content.hidden,.start-screen.hidden{display:none}.word-section{text-align:center;margin-bottom:40px;display:flex;flex-direction:column;align-items:center}.word-container{position:relative;width:100%;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:20px;gap:15px}#english-word{font-size:2.5rem;color:#333;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:1;transform:translateY(0)}#english-word.voice-only-hidden{opacity:0;transform:translateY(10px);pointer-events:none;filter:blur(8px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.reveal-btn{position:absolute;background:#f0f2f5;color:#666;border:none;padding:10px 20px;border-radius:50px;font-size:.9rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px;font-weight:500}.reveal-btn.hidden{display:none;opacity:0;pointer-events:none}.reveal-btn svg{width:18px;height:18px}.reveal-btn:hover{background:#e4e6e9;color:#333}.pronounce-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 30px;border-radius:25px;font-size:1rem;cursor:pointer;transition:transform .15s ease-out,box-shadow .15s ease-out,opacity .15s ease;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto}.icon-btn{width:20px;height:20px;flex-shrink:0}.pronounce-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.pronounce-btn:active{transform:translateY(0)}.pronounce-btn:disabled{opacity:.6;cursor:not-allowed}.quiz-section{margin-bottom:30px}.instruction{text-align:center;color:#666;margin-bottom:20px;font-size:1.1rem;display:flex;align-items:center;justify-content:center;gap:10px}.icon-instruction{width:20px;height:20px;color:#667eea;flex-shrink:0}.options-container{display:flex;flex-direction:column;gap:12px}.option{background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;padding:18px 20px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;font-size:1.1rem;text-align:center;direction:rtl;font-family:Vazirmatn,Tahoma,Arial,sans-serif;font-weight:500;display:flex;align-items:center;justify-content:center;gap:12px;contain:content}.icon-option{width:24px;height:24px;flex-shrink:0;color:#667eea;transition:all .3s}.option-text{text-align:center;flex:0 1 auto}.option:hover{background:#e9ecef;border-color:#667eea}.option.selected{background:#667eea;color:#fff;border-color:#667eea}.option.selected .icon-option{color:#fff}.option.correct{background:#28a745;color:#fff;border-color:#28a745}.option.correct .icon-option{color:#fff}.option.correct .icon-option circle{fill:#fff;stroke:#28a745}.option.incorrect{background:#dc3545;color:#fff;border-color:#dc3545}.option.incorrect .icon-option{color:#fff}.option.disabled{cursor:not-allowed;opacity:.6}.feedback-section{text-align:center}.feedback{padding:15px;border-radius:10px;margin-bottom:20px;font-size:1.1rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;margin-left:auto;margin-right:auto}.icon-feedback{width:24px;height:24px;flex-shrink:0}.feedback-text{text-align:center;flex:0 1 auto}.feedback.correct{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.feedback.incorrect{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.feedback.hidden{display:none}.next-btn{background:#28a745;color:#fff;border:none;padding:12px 40px;border-radius:25px;font-size:1rem;cursor:pointer;transition:transform .2s,box-shadow .2s;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto}.next-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #28a74566}.next-btn.hidden{display:none}footer{margin-top:30px;text-align:center;padding-top:20px;border-top:2px solid #f0f0f0}.restart-btn{background:#6c757d;color:#fff;border:none;padding:10px 30px;border-radius:25px;font-size:.95rem;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto}.restart-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #6c757d66;background:#5a6268}@media (max-width: 600px){.container{padding:25px}h1{font-size:1.5rem}#english-word{font-size:2rem}.option{padding:15px;font-size:1rem}}