:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --ink:#1e293b;
  --muted:#64748b;
  --accent:#3b82f6;
  --ok:#10b981;
  --bad:#ef4444;
  --border:#e2e8f0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}
.wrap{max-width:900px;margin:24px auto;padding:16px;}
.top h1{margin:0 0 6px;font-weight:700}
.sub{margin:0 0 12px;color:var(--muted)}
.stats{display:flex;align-items:center;gap:12px;margin:10px 0 22px;}
#progressBar{flex:1;height:10px;border-radius:999px;background:#e2e8f0;overflow:hidden;border:1px solid var(--border);}
#progressFill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#60a5fa);}
#score{min-width:120px;text-align:right;color:var(--ink)}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 4px 6px rgba(0,0,0,.1);}
.prompt .sentence{font-size:1.35rem;padding:12px 14px;background:#f8fafc;border:1px solid var(--border);border-radius:12px;margin-bottom:6px;}
.question{color:var(--muted);margin:8px 0 14px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.choice{text-align:left;border:1px solid var(--border);background:#f8fafc;color:var(--ink);padding:12px 14px;border-radius:12px;cursor:pointer;transition:transform .02s ease,border-color .2s ease,background .2s ease;}
.choice:hover{transform:translateY(-1px);border-color:var(--accent);background:#f1f5f9}
.choice.correct{border-color:var(--ok);background:rgba(16,185,129,.1)}
.choice.wrong{border-color:var(--bad);background:rgba(239,68,68,.1)}
.choice.disabled{opacity:.6;pointer-events:none}
.feedback{margin-top:14px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:#f8fafc;}
.feedback.ok{border-color:var(--ok);background:rgba(16,185,129,.05)}
.feedback.bad{border-color:var(--bad);background:rgba(239,68,68,.05)}
.hidden{display:none}
.actions{display:flex;gap:10px;margin-top:14px;align-items:center;}
.next,.restart{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#f8fafc;color:var(--ink);cursor:pointer;}
.next:disabled{opacity:.5;cursor:not-allowed}
.next{border-color:var(--accent)}
.next:enabled{background:var(--accent);color:white}
.restart{opacity:.7}
.rules{margin-top:22px;background:#f8fafc;border:1px solid var(--border);border-radius:14px;padding:14px 16px;}
.rules h2{margin:0 0 10px}
#ruleBank{margin:0;padding-left:18px}
#ruleBank li{margin:6px 0;color:var(--ink)}