.battle-hud{position:absolute;inset:0;z-index:10;pointer-events:none;color:#f3f5e5;padding:14px 20px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(#07101acc,transparent 40%)}
.battle-hud[hidden]{display:none}.battle-hud>.battle-title{display:block;text-align:center;width:100%;height:auto;flex-shrink:0;margin:0;padding:0;border:0;background:none}.battle-title small{display:block;color:#ffda55;font:800 10px var(--font-ui);letter-spacing:3px}.battle-title h2{font:900 clamp(18px,3vw,36px)/1.1 var(--font-ui);margin:5px 0;text-shadow:2px 3px #07111d}.battle-title p{margin:0;font-size:10px;color:#aecbd9}
.battle-fighters{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;width:94%;margin-top:16px;gap:12px}.battle-versus{text-align:center;font:900 24px var(--font-ui);color:#ffdf57}.battle-fighter{--fighter:#72dcff;min-width:0;background:#10273ce8;border:2px solid var(--fighter);border-radius:8px;padding:8px 12px;box-shadow:0 4px #020b18;display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 10px}.battle-fighter.red{--fighter:#ff879d}.battle-fighter img{width:52px;height:52px;grid-row:1/4;object-fit:contain;image-rendering:pixelated}.battle-fighter b{font:800 19px var(--font-ui);overflow-wrap:anywhere}.battle-fighter small{font-size:8px;color:var(--fighter);letter-spacing:.8px}.battle-health{position:relative;height:12px;margin-top:7px;background:#050e1d;border:1px solid #6c8c96;border-radius:2px;overflow:hidden}.battle-health i{display:block;height:100%;background:#a7f25e;width:100%;transition:width .16s linear}.battle-health.danger i{background:#ff5479}.battle-health span{position:absolute;inset:0;text-align:center;font:800 8px/10px var(--font-ui);color:#f4f8e9;text-shadow:1px 1px 2px #071325}.battle-fighter.ko img{filter:grayscale(1);opacity:.5}.battle-fighter.ko .battle-health span{color:#ffced9}
.battle-caption{margin-top:auto;margin-bottom:34px;max-width:90%;text-align:center;border:1px solid #6c8a9b;border-radius:5px;padding:8px 16px;background:#091625ed;box-shadow:0 4px #020b18}.battle-caption strong{display:block;font:900 20px var(--font-ui);color:#ffdf61}.battle-caption small{font:700 9px var(--font-ui);color:#b8ced8}.battle-return{position:absolute;right:12px;bottom:12px;pointer-events:auto;border:1px solid #7e9eaa;border-radius:4px;background:#102238;color:#e4f2ec;padding:8px 12px;font:800 9px var(--font-ui);min-height:34px}.battle-return:focus-visible{outline:3px solid #ffdf56;outline-offset:2px}
@media(max-width:680px){.battle-hud{padding:7px 8px}.battle-title small{font-size:7px;letter-spacing:1.5px}.battle-title h2{font-size:17px;margin:3px 0}.battle-title p{font-size:7px}.battle-fighters{width:100%;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:4px;margin-top:6px}.battle-versus{font-size:13px}.battle-fighter{grid-template-columns:25px minmax(0,1fr);padding:4px;gap:0 4px;border-width:1px;border-radius:4px}.battle-fighter img{width:25px;height:28px}.battle-fighter b{font-size:10px}.battle-fighter small{font-size:5px;letter-spacing:0}.battle-health{height:8px;margin-top:3px}.battle-health span{font-size:6px;line-height:6px}.battle-caption{margin-bottom:19px;padding:3px 8px}.battle-caption strong{font-size:11px}.battle-caption small{font-size:6px}.battle-return{bottom:3px;right:4px;min-height:20px;font-size:6px;padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.battle-health i{transition:none}}