:root{--background: #1C1C1E;--card-bg: #2C2C2E;--primary: #D39231;--primary-dark: #6C5E52;--danger: #ff3b30;--text-primary: #FFFFFF;--text-secondary: #8E8E93;--border: #3C3C3E}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--background);color:var(--text-primary);min-height:100vh;min-height:100dvh}.container{width:100%;max-width:100%;margin:0 auto;padding:1rem .75rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}.quiz-header{text-align:center;margin-bottom:1.25rem}h1{font-size:1.5rem;margin-bottom:.25rem;color:var(--primary);line-height:1.2}.quiz-header p{font-size:.875rem;line-height:1.4;padding:0 .5rem}.progress-bar{background:var(--card-bg);border-radius:6px;height:6px;margin:1rem 0;overflow:hidden}.progress-fill{background:var(--primary);height:100%;transition:width .3s ease}.question-counter{text-align:center;color:var(--text-secondary);margin-bottom:1rem;font-size:.8rem}.timer-container{margin:1rem 0 1.5rem}.timer-bar{background:var(--card-bg);border-radius:8px;height:12px;overflow:hidden;margin-bottom:.5rem;position:relative}.timer-fill{background:var(--primary);height:100%;transition:width .1s linear,background-color .3s ease}.timer-fill.warning{background:orange}.timer-fill.urgent{background:var(--danger)}.timer-text{text-align:center;font-size:.9rem;font-weight:600;color:var(--text-secondary)}.timer-text.warning{color:orange}.timer-text.urgent{color:var(--danger)}.quiz-card{background:var(--card-bg);border:2px solid var(--border);border-radius:12px;padding:1.25rem 1rem;margin-bottom:1rem}.question{font-size:1.1rem;font-weight:600;margin-bottom:1.25rem;line-height:1.4;text-align:center}.question-image-container{margin:0 auto 1.25rem;text-align:center}.question-image{max-width:100%;width:100%;height:auto;border-radius:.75rem;box-shadow:0 4px 12px #0003;max-height:250px;object-fit:contain}.question-emoji{font-size:120px;line-height:1;text-align:center}.options{display:flex;flex-direction:column;gap:.625rem}.option{background:var(--primary);color:#fff;border:none;border-radius:12px;padding:.875rem 1rem;cursor:pointer;transition:all .1s ease;font-size:.95rem;font-weight:700;text-align:center;position:relative;width:100%;display:block;text-transform:none;letter-spacing:normal;box-shadow:0 4px 0 var(--primary-dark),0 6px 8px #0000004d;transform:translateY(0);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.option:active:not(.option-correct):not(.option-wrong):not(.disabled){transform:translateY(4px);box-shadow:0 0 0 var(--primary-dark),0 2px 4px #0003}.option-correct{background:var(--primary);color:#fff;animation:press-correct .3s ease-out forwards;cursor:default;box-shadow:0 0 0 var(--primary-dark),0 0 20px #d3923199}.option-wrong{background:var(--danger);color:#fff;animation:shake-wrong .5s ease-out;cursor:default;box-shadow:0 0 #cc2f27,0 0 20px #ff3b3099}.option.disabled{pointer-events:none;opacity:.7;transform:translateY(2px);box-shadow:0 2px 0 var(--primary-dark),0 3px 4px #0003}@keyframes press-correct{0%{transform:translateY(0)}50%{transform:translateY(4px) scale(1.02)}to{transform:translateY(4px)}}@keyframes shake-wrong{0%,to{transform:translateY(4px) rotate(0)}25%{transform:translateY(4px) rotate(-3deg)}75%{transform:translateY(4px) rotate(3deg)}}.explanation{background:#d392311a;border-left:4px solid var(--primary);border-radius:8px;padding:.875rem;margin-top:1.25rem;font-size:.875rem;line-height:1.5}.quiz-actions{display:flex;flex-direction:column;gap:.75rem;justify-content:center}.btn{padding:.875rem 1.5rem;border:none;border-radius:12px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .1s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 0 var(--primary-dark),0 6px 8px #0000004d}.btn-primary:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--primary-dark),0 2px 4px #0003}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--card-bg);color:var(--text-primary);border:2px solid var(--border);box-shadow:0 4px #1a1a1c,0 6px 8px #0000004d}.btn-secondary:active{transform:translateY(4px);box-shadow:0 0 #1a1a1c,0 2px 4px #0003}.results{text-align:center}.score{font-size:3rem;font-weight:700;color:var(--primary);margin:1.5rem 0}.score-text{font-size:1.25rem;margin-bottom:1.5rem}.results-actions{display:flex;flex-direction:column;gap:.75rem;max-width:100%;margin:0 auto;padding:0 1rem}.hidden{display:none}@media(min-width:640px){.container{max-width:600px;padding:1.5rem 1rem}.quiz-header{margin-bottom:1.5rem}h1{font-size:1.75rem}.quiz-header p{font-size:1rem}.progress-bar{height:8px;border-radius:8px;margin:1.25rem 0}.question-counter{font-size:.875rem;margin-bottom:1.5rem}.quiz-card{border-radius:16px;padding:1.5rem;margin-bottom:1.5rem}.question{font-size:1.2rem;margin-bottom:1.5rem}.question-image{max-height:300px}.options{gap:.75rem}.option{border-radius:14px;padding:1rem 1.5rem;font-size:1rem}.explanation{padding:1rem;font-size:.95rem}.quiz-actions{flex-direction:row}.btn{padding:.875rem 2rem;font-size:1rem}.score{font-size:3.5rem;margin:1.75rem 0}.score-text{font-size:1.375rem}.results-actions{max-width:300px;gap:1rem}}@media(min-width:768px){.container{max-width:700px;padding:2rem 1rem}.quiz-header{margin-bottom:2rem}h1{font-size:2rem;margin-bottom:.5rem}.progress-bar{margin:1.5rem 0}.question-counter{font-size:.9rem;margin-bottom:2rem}.quiz-card{padding:2rem;margin-bottom:2rem}.question{font-size:1.25rem}.question-image{max-height:400px}.option{border-radius:16px;padding:1rem 2rem}@media(hover:hover){.option:hover:not(.option-correct):not(.option-wrong):not(.disabled){transform:translateY(-2px);box-shadow:0 6px 0 var(--primary-dark),0 8px 12px #00000059}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 var(--primary-dark),0 8px 12px #00000059}.btn-secondary:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 6px #1a1a1c,0 8px 12px #00000059}}.explanation{margin-top:1.5rem}.score{font-size:4rem;margin:2rem 0}.score-text{font-size:1.5rem;margin-bottom:2rem}}@media(min-width:1024px){.container{max-width:800px}}