*{box-sizing:border-box}
:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --ink:#1e293b;
  --muted:#64748b;
  --accent:#3b82f6;
  --accent2:#10b981;
  --wrong:#ef4444;
  --right:#22c55e;
  --border:#e2e8f0;
  --shadow:rgba(0,0,0,0.1);
}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0fdf4 100%);
}
.wrap{max-width:900px;margin:40px auto;padding:16px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px
}
h1{font-size:clamp(1.1rem,2.5vw,1.8rem);margin:0;letter-spacing:.3px}
.scorebox{display:flex;gap:12px;font-weight:600;color:var(--muted)}
.card{
  background:var(--card);
  border:2px solid var(--border);
  border-radius:16px;
  padding:24px;
  box-shadow:0 4px 20px var(--shadow);
}
.question{
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  padding:20px 16px;
  border-left:6px solid var(--accent);
  background:#f8fafc;
  border-radius:12px;
  min-height:64px;
  font-weight:600;
}
.options{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px
}
button{
  border:none;border-radius:12px;padding:16px 18px;
  background:#ffffff;color:var(--ink);font-weight:600;cursor:pointer;
  transition:all .2s ease;
  outline:2px solid transparent;
  border:2px solid var(--border);
  font-size:1rem;
}
button:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px var(--shadow);
  border-color:var(--accent);
}
.opt{
  display:flex;align-items:center;justify-content:center;min-height:60px;
  background:#ffffff;
}
.opt:disabled{opacity:.5;cursor:not-allowed;transform:none !important}
.primary{background:linear-gradient(135deg,var(--accent),#2563eb);color:white;border-color:var(--accent)}
.ghost{background:#f1f5f9;border:2px solid var(--border);color:var(--ink)}
.actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.feedback{
  min-height:32px;margin-top:12px;font-weight:600;
  padding:8px 12px;border-radius:8px;
  font-size:1rem;
}
.feedback.ok{
  color:var(--right);
  background:#f0fdf4;
  border:1px solid #bbf7d0;
}
.feedback.no{
  color:var(--wrong);
  background:#fef2f2;
  border:1px solid #fecaca;
}
.legend{color:var(--muted);margin-top:12px}
.legend h3{
  margin:0 0 12px 0;
  font-size:1.1rem;
  color:var(--accent);
}
.legend ul{
  margin:0;
  padding-left:20px;
}
.legend li{
  margin-bottom:6px;
  line-height:1.4;
}
.rightPulse{animation:rightPulse .6s ease}
@keyframes rightPulse{0%{box-shadow:0 0 0 0 rgba(101,227,138,.4)}100%{box-shadow:0 0 0 24px rgba(101,227,138,0)}}
.wrongShake{animation:wrongShake .35s}
@keyframes wrongShake{20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}

/* High score section */
.highscore-section{
  margin-top:24px;
  background:var(--card);
  border:2px solid var(--border);
  border-radius:16px;
  padding:24px;
  box-shadow:0 4px 20px var(--shadow);
}
.highscore-section h2{
  margin:0 0 16px 0;
  font-size:1.3rem;
  color:var(--accent);
  text-align:center;
}
.highscore-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.9rem;
}
.highscore-table th,
.highscore-table td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
.highscore-table th{
  background:#f8fafc;
  color:var(--accent);
  font-weight:700;
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.highscore-table td{
  color:var(--ink);
  font-weight:500;
}
.highscore-table tbody tr:hover{
  background:#f8fafc;
}
.highscore-table tbody tr:first-child td{
  color:var(--accent2);
  font-weight:700;
}
.highscore-table tbody tr:nth-child(2) td{
  color:var(--accent);
  font-weight:600;
}
.highscore-table tbody tr:nth-child(3) td{
  color:var(--muted);
  font-weight:600;
}