:root{--color-bg: #f8fafc;--color-surface: #ffffff;--color-primary: #6366f1;--color-primary-hover: #4f46e5;--color-primary-light: #eef2ff;--color-success: #22c55e;--color-success-bg: #dcfce7;--color-success-text: #15803d;--color-error: #ef4444;--color-error-bg: #fee2e2;--color-error-text: #b91c1c;--color-hint-bg: #fef9c3;--color-hint-border: #facc15;--color-hint-text: #78350f;--color-explanation-bg: #dbeafe;--color-explanation-border: #3b82f6;--color-explanation-text: #1e3a5f;--color-text: #1e293b;--color-text-muted: #64748b;--color-border: #e2e8f0;--radius: 12px;--shadow: 0 4px 24px rgba(0, 0, 0, .08)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}#app{width:100%;max-width:640px}.screen{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:2.5rem;text-align:center}.screen:focus{outline:none}.hidden{display:none!important}#category-title{font-size:2rem;font-weight:700;margin-bottom:.25rem}.category-subtitle{color:var(--color-text-muted);margin-bottom:1.5rem}#categories-grid{display:grid;gap:.75rem}.category-btn{background:var(--color-bg);border:2px solid var(--color-border);border-radius:8px;color:var(--color-text);cursor:pointer;font-size:1.1rem;font-weight:600;padding:1.25rem 1.5rem;text-align:left;transition:border-color .15s,background .15s;width:100%}.category-btn{display:flex;align-items:center;justify-content:space-between}.category-btn:hover,.category-btn.kb-focus{border-color:var(--color-primary);background:var(--color-primary-light)}.category-btn .chevron{color:var(--color-text-muted);font-size:1.3rem;font-weight:400;margin-left:.75rem;flex-shrink:0}.btn-back{background:transparent;color:var(--color-text-muted);font-size:.85rem;padding:.3rem .5rem;margin-bottom:.75rem;align-self:flex-start}.btn-back:hover{color:var(--color-primary);background:var(--color-primary-light)}#game-title{font-size:2rem;font-weight:700;margin-bottom:.5rem}#question-count{color:var(--color-text-muted);margin-bottom:1.25rem}.question-limit-control{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1.5rem}.question-limit-control label{font-size:.95rem;font-weight:500;color:var(--color-text)}.stepper{display:flex;align-items:center;border:2px solid var(--color-border);border-radius:8px;overflow:hidden}.stepper-btn{background:var(--color-bg);border:none;color:var(--color-text);cursor:pointer;font-size:1.1rem;font-weight:600;padding:.4rem .75rem;line-height:1;transition:background .15s}.stepper-btn:hover{background:var(--color-primary-light);color:var(--color-primary)}#question-limit{width:3.5rem;text-align:center;border:none;border-left:2px solid var(--color-border);border-right:2px solid var(--color-border);font-size:1rem;font-weight:600;color:var(--color-text);padding:.4rem 0;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}#question-limit::-webkit-inner-spin-button,#question-limit::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.controls-hint{color:var(--color-text-muted);font-size:.8rem;margin-top:1rem}.controls-hint kbd{background:var(--color-bg);border:1px solid var(--color-border);border-radius:4px;font-family:inherit;font-size:.75rem;padding:.1rem .35rem}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;font-size:.9rem;font-weight:600;color:var(--color-text-muted)}.quiz-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}#timer-text{font-variant-numeric:tabular-nums}.question-card{text-align:left}#question-text{font-size:1.2rem;font-weight:600;line-height:1.5;margin-bottom:1.5rem}.question-image{max-width:100%;max-height:300px;object-fit:contain;border-radius:8px;margin-bottom:1rem}.hint-text{background:var(--color-hint-bg);border-left:4px solid var(--color-hint-border);border-radius:6px;color:var(--color-hint-text);font-size:.9rem;margin-bottom:1rem;padding:.75rem 1rem}.explanation-text{background:var(--color-explanation-bg);border-left:4px solid var(--color-explanation-border);border-radius:6px;color:var(--color-explanation-text);font-size:.9rem;margin-top:1rem;margin-bottom:1rem;padding:.75rem 1rem;text-align:left}#options-grid{display:grid;gap:.75rem;margin-bottom:1.5rem}.option-btn{background:var(--color-bg);border:2px solid var(--color-border);border-radius:8px;color:var(--color-text);cursor:pointer;font-size:1rem;padding:.875rem 1.25rem;text-align:left;transition:border-color .15s,background .15s;width:100%}.option-btn:hover:not(:disabled),.option-btn.kb-focus:not(:disabled){border-color:var(--color-primary);background:var(--color-primary-light)}.option-btn.correct{background:var(--color-success-bg);border-color:var(--color-success);color:var(--color-success-text)}.option-btn.wrong{background:var(--color-error-bg);border-color:var(--color-error);color:var(--color-error-text)}.option-btn:disabled{cursor:default}.btn{border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 2rem;transition:background .15s}.btn-primary{background:var(--color-primary);color:#fff;width:100%}.btn-primary:hover,.btn-primary.kb-focus{background:var(--color-primary-hover)}.btn-primary.kb-focus{box-shadow:0 0 0 3px #6366f159}.btn-secondary{background:transparent;border:2px solid var(--color-border);color:var(--color-text-muted);width:100%;margin-top:.75rem}.btn-secondary:hover,.btn-secondary.kb-focus{background:var(--color-bg);color:var(--color-text)}.btn-secondary.kb-focus{box-shadow:0 0 0 3px #6366f159}.btn-hint{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted);font-size:.85rem;margin-bottom:1rem;padding:.4rem .875rem;width:auto}.btn-hint:hover{background:var(--color-bg)}.result-summary{margin:1.5rem 0}.result-score{font-size:3rem;font-weight:700;color:var(--color-primary)}#final-message{color:var(--color-text-muted);margin-top:.5rem}.final-time{color:var(--color-text-muted);font-size:.95rem;margin-top:.5rem;margin-bottom:1.5rem}#loading-screen p,#error-screen p{color:var(--color-text-muted);margin-top:.5rem}#error-screen h2{color:var(--color-error)}