/* A clockwise fill keeps recovery information on the action itself. */
#touch-attack{position:relative;isolation:isolate;overflow:visible;padding:0;align-items:center;justify-content:center;text-align:center;border:2px solid #fff1cb;color:#37291e;background:conic-gradient(from 0deg,#ed8b4d 0deg var(--attack-angle,360deg),#9ca4a8 var(--attack-angle,360deg) 360deg);box-shadow:0 3px 12px #37291e30,inset 0 0 0 1px #fff1cb55;transition:box-shadow .12s ease;opacity:1}
#touch-attack.touch-active{background:conic-gradient(from 0deg,#ed8b4d 0deg var(--attack-angle,360deg),#9ca4a8 var(--attack-angle,360deg) 360deg);box-shadow:0 0 0 4px #fff1cb55,inset 0 0 0 1px #fff1cb66}
#touch-attack>svg,#touch-attack>span{position:relative;z-index:1;color:#37291e;opacity:1;filter:none;text-shadow:0 1px 0 #fff5e744}
#touch-attack>svg{display:block;align-self:center;width:35px;height:35px;flex-shrink:0;stroke-width:1.6;overflow:visible}
#touch-attack>span{display:block;align-self:center;line-height:1.25;font-weight:850;font-variant-numeric:tabular-nums}
#touch-attack.stunned{border-color:#f6cf7f}
#touch-attack::after{content:'';position:absolute;inset:-6px;border:3px solid #ffe4a1;border-radius:50%;opacity:0;pointer-events:none}
#touch-attack.ready-pulse::after{animation:attack-ready-pop .42s ease-out both}
@keyframes attack-ready-pop{0%{opacity:1;transform:scale(.98)}100%{opacity:0;transform:scale(1.2)}}
@media(max-width:850px),(pointer:coarse){#attack-status{display:none!important}}
@media(prefers-reduced-motion:reduce){#touch-attack{transition:none}#touch-attack.ready-pulse::after{animation:none;opacity:1;transform:none}}