.hit-feedback { position: absolute; z-index: 15; left: 50%; top: 25%; transform: translateX(-50%); min-width: 135px; padding: 12px 18px; text-align: center; pointer-events: none; color: #ffe2a4; text-shadow: 0 2px 4px #000; animation: hit-feedback-show 1.1s ease-out both; }
.hit-feedback strong { display: block; font: 900 1.65rem Georgia, 'STSong', serif; white-space: nowrap; }
.hit-feedback small { display: block; margin-top: 4px; font-size: .8rem; white-space: nowrap; }
.hit-feedback-ring { position: absolute; inset: -12px; z-index: -1; border: 2px solid currentColor; border-radius: 50%; background: radial-gradient(ellipse, #9b451c88, #1119 65%, transparent 70%); animation: hit-ring-burst .6s ease-out both; }
.hit-feedback-critical { color: #ffce76; }
.hit-feedback-critical .hit-feedback-ring { border-radius: 0; clip-path: polygon(50% 0,60% 30%,90% 10%,75% 40%,100% 50%,75% 60%,90% 90%,60% 75%,50% 100%,40% 75%,10% 90%,25% 60%,0 50%,25% 40%,10% 10%,40% 30%); background: #a44525cc; }
.hit-feedback-dodge { color: #b4e4db; }
.hit-feedback-dodge .hit-feedback-ring { border-style: dashed; background: radial-gradient(ellipse, #28605c88, transparent 70%); }
.hit-feedback-miss { color: #d4d4c3; }
.hit-feedback-miss .hit-feedback-ring { border: 0; background: #171c15cc; border-radius: 4px; }
@keyframes hit-feedback-show { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 15%,85% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-25px) scale(1.05); } }
@keyframes hit-ring-burst { from { opacity: 1; transform: scale(.4) rotate(-12deg); } to { opacity: .4; transform: scale(1.2) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .hit-feedback, .hit-feedback-ring { animation: none !important; } .motion-dodge > img { animation: none !important; } }