body{
  margin:0;
  font-family:system-ui,sans-serif;
  background:linear-gradient(180deg,#bae6fd,#dbeafe);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.game{
  background:white;
  width:min(640px,95%);
  border-radius:22px;
  padding:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  text-align:center;
}
h1{margin:0}
.hud{display:grid;gap:10px;margin:12px 0}
.unit{background:#f8fafc;border-radius:14px;padding:10px;border:1px solid #e5e7eb}
.hpbar{height:16px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.hpbar span{display:block;height:100%;width:100%;transition:width .3s ease}
.player span{background:#22c55e}
.boss span{background:#ef4444}
.question{font-size:18px;font-weight:800;margin:14px 0}
.answers{display:grid;gap:10px}
button{
  border:none;
  border-radius:14px;
  padding:12px;
  font-weight:700;
  cursor:pointer;
  background:#e0f2fe;
}
button:hover{background:#bae6fd}
.correct{background:#bbf7d0!important}
.wrong{background:#fecaca!important}
.result{margin-top:10px;min-height:28px;font-weight:700}
.restart{margin-top:12px;background:#38bdf8;color:white}
.shake{animation:shake .3s}
@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  50%{transform:translateX(6px)}
  75%{transform:translateX(-6px)}
  100%{transform:translateX(0)}
}