.beast { transform-origin: 50% 100%; animation: beast-idle 2.2s ease-in-out infinite; }
.player .beast.attack { animation: player-strike .32s cubic-bezier(.2,.8,.3,1); }
.enemy .beast.attack { animation: enemy-strike .32s cubic-bezier(.2,.8,.3,1); }
.beast.hit { animation: beast-hit .3s ease; filter: brightness(1.8); }
.beast.heal { animation: beast-heal .55s ease; box-shadow: 0 0 0 18px rgba(105,225,141,0); }
.damage-pop { position: absolute; z-index: 6; top: 45%; left: 50%; color: #fff; font-size: 26px; font-weight: 900; text-shadow: 0 3px 0 rgba(0,0,0,.25); pointer-events: none; animation: damage-pop .65s ease-out forwards; }
.damage-pop.heal { color: #8ff0a9; }
.arena.flash::after { animation: arena-flash .25s ease; }
.modal > div { animation: result-rise .4s cubic-bezier(.2,.9,.25,1.15); }
@keyframes beast-idle { 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes player-strike { 45% { transform: translate(42px,-25px) rotate(8deg) scale(1.08); } }
@keyframes enemy-strike { 45% { transform: translate(-42px,25px) rotate(-8deg) scale(1.08); } }
@keyframes beast-hit { 30% { transform: translateX(-10px) rotate(-7deg); } 65% { transform: translateX(8px) rotate(5deg); } }
@keyframes beast-heal { 45% { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(105,225,141,.55), 0 0 35px #69e18d; } }
@keyframes damage-pop { to { opacity: 0; transform: translate(-50%,-60px) scale(1.25); } }
@keyframes arena-flash { 50% { opacity: .58; } }
@keyframes result-rise { from { opacity: 0; transform: translateY(30px) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .beast, .damage-pop, .modal > div { animation: none !important; } }
.roundbar .intent { margin-left: auto; margin-right: 30px; text-align: center; }.roundbar .intent strong { color: #ffd768; }.skill:nth-child(2)::after { content: "Khắc chế"; float: right; padding: 2px 5px; border-radius: 99px; color: #7a3c19; background: #ffd768; font-size: 7px; }
@media (max-width: 500px) { .roundbar .intent { margin-right: 10px; } }
.beast-mark { position: relative; z-index: 2; width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }.spark .beast-mark { fill: #fff; stroke: none; }.skill svg { width: 24px; height: 24px; fill: none; stroke: #6b59c9; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }.energy-pips { display: flex !important; gap: 5px; }.energy-pips i { width: 9px; height: 9px; border: 2px solid #7b63e0; border-radius: 50%; }.energy-pips i.on { background: #7b63e0; box-shadow: 0 0 8px rgba(123,99,224,.45); }.result-mark { position: relative; }.result-mark.win::before { content: ""; position: absolute; width: 25px; height: 17px; left: 17px; top: 15px; border: 5px solid #fff; border-top: 0; border-radius: 0 0 12px 12px; }.result-mark.win::after { content: ""; position: absolute; width: 18px; height: 4px; left: 21px; bottom: 14px; background: #fff; border-radius: 5px; }.result-mark.lose::before { content: ""; position: absolute; width: 28px; height: 28px; left: 16px; top: 13px; border: 4px solid #fff; border-radius: 50%; }.result-mark.lose::after { content: ""; position: absolute; width: 20px; height: 31px; left: 30px; top: 8px; border-radius: 50%; background: #fff9e8; }