@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap";:root{--color-bg:#1a1008;--color-card-bg:#fdf6e8;--color-primary:#c0902a;--color-gold:#f0d98a;--color-gold-muted:#e8c97a;--color-text-dark:#2a1a08;--color-text-muted:#7a6840;--color-text-body:#7a6040;--color-text-hint:#a08860;--color-text-accent:#7a4e10;--color-text-subtitle:#9c8860;--color-border:#d4c090;--color-divider:#e0d0a8;--color-correct:#5ecf8a;--color-correct-bg:#1a3020;--color-correct-border:#2a4a32;--color-correct-input:#3aaa60;--color-wrong:#e06060;--color-wrong-bg:#300a0a;--color-wrong-border:#4a1a1a;--color-wrong-input:#d44;--color-feedback-correct-bg:#e8fff0;--color-feedback-correct-text:#2a7a48;--color-feedback-correct-border:#b0e8c8;--color-feedback-wrong-bg:#fff0f0;--color-feedback-wrong-text:#922;--color-feedback-wrong-border:#f0b0b0;--color-input-bg:#fffdf4;--color-input-correct-bg:#f0fff5;--color-input-wrong-bg:#fff5f5;--color-pronoun-bg:#f0e0b8;--color-hint-reveal-bg:#f0e8d0;--color-hint-reveal-text:#7a5a20;--color-progress-track:#2e1f0a;--gradient-progress:linear-gradient(90deg, #e8a020, #f0d060);--gradient-button:linear-gradient(135deg, #d08020, #e8a030);--shadow-card:0 .5rem 2.5rem #00000080, 0 .125rem .5rem #0000004d;--shadow-card-light:0 .5rem 2.5rem #00000080;--tense-present:#2980b9;--tense-preterite:#c0392b;--radius-pill:99px;--radius-card:1.25rem;--radius-button:.75rem;--radius-tag:.5rem;--font-display:"Playfair Display", serif;--font-body:"DM Sans", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--color-bg);justify-content:center;align-items:center;min-height:100vh;display:flex}#root{justify-content:center;align-items:center;width:100%;display:flex}.container{flex-direction:column;align-items:center;gap:1.25rem;width:100%;max-width:30rem;padding:1.5rem 1rem;display:flex}.header{text-align:center;color:var(--color-gold-muted)}.header h1{font-family:var(--font-display);letter-spacing:.04em;color:var(--color-gold);font-size:1.6rem}.header p{color:var(--color-text-subtitle);letter-spacing:.1em;text-transform:uppercase;margin-top:.125rem;font-size:.78rem}.header-row{justify-content:center;align-items:flex-start;width:100%;display:flex;position:relative}.options-wrap{position:absolute;top:0;right:0}.btn-options{border-radius:var(--radius-tag);width:2.25rem;height:2.25rem;color:var(--color-text-muted);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;transition:color .15s,border-color .15s,background .15s;display:flex}.btn-options:hover{color:var(--color-primary)}.btn-options.active{color:var(--color-primary);border-color:var(--color-border);background:var(--color-pronoun-bg)}.options-panel{background:var(--color-card-bg);border-radius:var(--radius-card);box-shadow:var(--shadow-card);z-index:100;min-width:14rem;padding:1.25rem 1.5rem;position:absolute;top:calc(100% + .5rem);right:0}.options-section{flex-direction:column;gap:.625rem;display:flex}.options-label{color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}.options-row{gap:.375rem;display:flex}.option-btn{border-radius:var(--radius-pill);border:1px solid var(--color-border);color:var(--color-text-muted);font-family:var(--font-body);cursor:pointer;background:0 0;padding:.25rem .75rem;font-size:.85rem;transition:border-color .15s,color .15s,background .15s}.option-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.option-btn.active{background:var(--color-pronoun-bg);border-color:var(--color-primary);color:var(--color-text-accent);font-weight:500}.progress-wrap{width:100%}.progress-bar-wrap{background:var(--color-progress-track);border-radius:var(--radius-pill);width:100%;height:.375rem;overflow:hidden}.progress-bar-fill{background:var(--gradient-progress);border-radius:var(--radius-pill);height:100%;transition:width .4s}.progress-label{color:var(--color-text-muted);text-align:right;width:100%;margin-top:.375rem;font-size:.85rem}.score-row{gap:1rem;display:flex}.score-pill{border-radius:var(--radius-pill);padding:.25rem .875rem;font-size:.8rem;font-weight:500}.score-correct{background:var(--color-correct-bg);color:var(--color-correct);border:1px solid var(--color-correct-border)}.score-wrong{background:var(--color-wrong-bg);color:var(--color-wrong);border:1px solid var(--color-wrong-border)}.card{background:var(--color-card-bg);border-radius:var(--radius-card);width:100%;box-shadow:var(--shadow-card);padding:2.25rem 2rem 1.75rem;transition:transform .15s;position:relative}.card:focus{outline:none}.card.shake{animation:.4s shake}.card.pop{animation:.4s pop}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-.5rem)}40%{transform:translate(.5rem)}60%{transform:translate(-.375rem)}80%{transform:translate(.375rem)}}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.03)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.card.shake,.card.pop{animation:none}.progress-bar-fill{transition:none}}.tense-badge{border-radius:var(--radius-pill);letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:.1875rem .75rem;font-size:.7rem;font-weight:500;display:inline-block}.tense-badge[data-tense=present]{background:var(--tense-present)}.tense-badge[data-tense=preterite]{background:var(--tense-preterite)}.pronoun-row{align-items:center;gap:1rem;margin-top:.625rem;display:flex}.hint{color:var(--color-text-hint);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem;font-size:.78rem}.hint-reveal{background:var(--color-hint-reveal-bg);border-radius:var(--radius-tag);color:var(--color-hint-reveal-text);margin-top:.625rem;padding:.5rem .875rem;font-size:.85rem}.verb-display{font-family:var(--font-display);color:var(--color-text-dark);font-size:2.8rem;line-height:1.1}.pronoun{background:var(--color-pronoun-bg);color:var(--color-text-accent);border-radius:var(--radius-tag);padding:.25rem .875rem;font-size:1.1rem;font-weight:500;display:inline-block}.divider{background:var(--color-divider);height:1px;margin:1.375rem 0 1.125rem}.input-area{flex-wrap:wrap;align-items:stretch;gap:.5rem;display:flex}.input-area input{border-radius:var(--radius-button);border:2px solid var(--color-border);background:var(--color-input-bg);font-family:var(--font-body);color:var(--color-text-dark);outline:none;flex:100%;padding:.75rem 1rem;font-size:1.05rem;transition:border-color .2s}.input-area input:focus{border-color:var(--color-primary)}.input-area input.correct{border-color:var(--color-correct-input);background:var(--color-input-correct-bg)}.input-area input.wrong{border-color:var(--color-wrong-input);background:var(--color-input-wrong-bg)}.input-area input:disabled{opacity:.7}.input-buttons{flex:100%;gap:.5rem;display:flex}.btn-check{border-radius:var(--radius-button);background:var(--gradient-button);color:#fff;font-family:var(--font-body);cursor:pointer;white-space:nowrap;border:none;flex:1;padding:.75rem 1.25rem;font-size:.9rem;font-weight:500;transition:opacity .2s,transform .1s}.btn-check:active{transform:scale(.97)}.btn-check:disabled{opacity:.4;cursor:default}.btn-hint{border-radius:var(--radius-button);border:2px solid var(--color-border);color:var(--color-text-hint);font-family:var(--font-body);cursor:pointer;white-space:nowrap;background:0 0;flex:1;padding:.75rem 1rem;font-size:.85rem;font-weight:500;transition:background .2s,color .2s}.btn-hint:hover{background:var(--color-pronoun-bg);color:var(--color-text-accent)}.feedback{border-radius:.625rem;margin-top:.875rem;padding:.625rem 1rem;font-size:.92rem;font-weight:500}.feedback.correct{background:var(--color-feedback-correct-bg);color:var(--color-feedback-correct-text);border:1px solid var(--color-feedback-correct-border)}.feedback.wrong{background:var(--color-feedback-wrong-bg);color:var(--color-feedback-wrong-text);border:1px solid var(--color-feedback-wrong-border)}.btn-next{border-radius:var(--radius-button);border:2px solid var(--color-primary);width:100%;color:var(--color-primary);font-family:var(--font-body);cursor:pointer;letter-spacing:.05em;background:0 0;margin-top:.75rem;padding:.8125rem;font-size:.95rem;font-weight:500;transition:background .2s,color .2s}.btn-next:hover{background:var(--color-primary);color:#fff}.done-card{background:var(--color-card-bg);border-radius:var(--radius-card);text-align:center;width:100%;box-shadow:var(--shadow-card-light);padding:2.5rem 2rem}.done-card .trophy{margin-bottom:.75rem;font-size:3rem}.done-card h2{font-family:var(--font-display);color:var(--color-text-dark);margin-bottom:.5rem;font-size:1.8rem}.done-card p{color:var(--color-text-body);margin-bottom:1.5rem;font-size:.95rem}.done-percentage{color:var(--color-primary);margin-bottom:1.25rem;font-size:1.3rem;font-weight:700}.done-stats{justify-content:center;gap:1.25rem;margin-bottom:1.75rem;display:flex}.done-stat{border-radius:.875rem;padding:.75rem 1.5rem;font-size:1.2rem;font-weight:700}.btn-restart{border-radius:var(--radius-button);background:var(--gradient-button);color:#fff;font-family:var(--font-body);cursor:pointer;border:none;padding:.875rem 2rem;font-size:1rem;font-weight:500;transition:opacity .2s}.btn-restart:hover{opacity:.85}.state-card{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;min-height:20rem;padding:2.25rem 2rem 1.75rem;display:flex}.spinner{border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:2rem;height:2rem;margin-bottom:.25rem;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{border-top-color:var(--color-primary);animation:none}}.state-message{color:var(--color-text-body);font-size:1.1rem}.state-detail{color:var(--color-text-body);font-size:.82rem}.state-error{color:var(--color-feedback-wrong-text);margin-bottom:.75rem;font-size:.95rem}.state-success{color:var(--color-feedback-correct-text);margin-bottom:.5rem;font-size:1.1rem}