/* Math Duel — game-specific styles (rides on playful.css) */

.arena {
  flex:1; display:flex; flex-direction:column; gap:14px;
  position:relative; min-height:0;
}

/* ── Fighters + HP ── */
.fighters { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.fighter { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.avatar {
  font-size:44px; width:72px; height:72px; display:grid; place-items:center;
  background:var(--card); border:4px solid var(--stroke); border-radius:18px;
  box-shadow:var(--sh);
}
.fighter.cpu .avatar { background:#FFE3EE; }
.avatar.hit { animation:hitShake 0.3s var(--ease); }
@keyframes hitShake {
  0%,100% { transform:none; }
  25% { transform:translateX(-5px) rotate(-5deg); }
  75% { transform:translateX(5px) rotate(5deg); }
}
/* CPU "thinking" — telegraphs the incoming attack */
.avatar.thinking { animation:think 0.85s var(--ease) infinite; }
@keyframes think {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-4px) scale(1.06); }
}
.hpbar {
  width:100%; max-width:150px; height:16px; background:#E7D6B6;
  border:3px solid var(--stroke); border-radius:99px; overflow:hidden;
}
.hpfill { height:100%; width:100%; border-radius:99px; transition:width 0.4s var(--ease); }
.you-fill { background:var(--green); }
.cpu-fill { background:var(--pink); }
.hp-label { font-size:12px; font-weight:700; letter-spacing:1px; color:var(--muted); text-transform:uppercase; }
.vs { font-family:'Astalamet', serif; font-size:22px; align-self:center; margin-top:18px; }

/* ── Question + timer ── */
.question-zone { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:0; }
.question {
  font-family:'Astalamet', serif; font-size:clamp(38px,12vw,66px); line-height:1;
  background:var(--card); border:5px solid var(--stroke); border-radius:20px;
  box-shadow:var(--sh-lg); padding:16px 30px; text-align:center;
}
.question.pulse { animation:popIn 0.35s var(--bounce); }
.timer {
  width:100%; max-width:340px; height:14px; background:#E7D6B6;
  border:3px solid var(--stroke); border-radius:99px; overflow:hidden;
}
.timer-fill { height:100%; width:100%; background:var(--green); }

/* ── Answers ── */
.answers { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-bottom:6px; }
.ans {
  font:inherit; font-weight:700; font-size:26px; color:var(--stroke); cursor:pointer;
  padding:18px; border:4px solid var(--stroke); border-radius:16px;
  background:var(--card); box-shadow:var(--sh);
  transition:transform 0.1s, box-shadow 0.1s, background 0.15s;
}
.ans:active { transform:translateY(4px); box-shadow:0 0 0 var(--stroke); }
.ans.correct { background:var(--green); }
.ans.wrong { background:var(--pink); }

/* ── Floating damage numbers ── */
.dmg {
  position:absolute; transform:translate(-50%,0); font-weight:700; font-size:26px;
  pointer-events:none; z-index:10; animation:floatUp 0.9s var(--ease) forwards;
  -webkit-text-stroke:1.5px var(--stroke);
}
.dmg.enemy { color:var(--yellow); }
.dmg.self  { color:var(--pink); }
.dmg.miss  { color:var(--blue); font-size:20px; }
@keyframes floatUp {
  0%   { opacity:0; transform:translate(-50%,10px) scale(0.6); }
  20%  { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-52px) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar.hit, .question.pulse, .avatar.thinking { animation:none; }
  .dmg { animation-duration:0.01s; }
}