/* Combate (combate.js, barra.js): boton de ataque, numeros de dano y vida del objetivo. */

/* Boton de ataque: centro del abanico, abajo a la derecha (88 px de cliente). */
#interfaz .ui-ataque { position: absolute; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  pointer-events: auto; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle, #c2263a 0%, #7a0f1e 62%, #3c0710 100%);
  box-shadow: 0 0 0 3px #f3d27a, 0 0 0 5px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 90, 60, .45);
  transition: transform .08s; }
#interfaz .ui-ataque::before { content: ''; position: absolute; inset: 0;
  background: no-repeat center / 54% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff6dc' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 52 44 20M44 20l4-12 8-4-4 8-12 4'/%3E%3Cpath d='M18 40l6 6M10 46l8 8'/%3E%3Cpath d='M52 52 20 20M20 20l-4-12-8-4 4 8 12 4' opacity='.85'/%3E%3Cpath d='M46 40l-6 6M54 46l-8 8' opacity='.85'/%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
#interfaz .ui-ataque.pulsada { transform: scale(.9); }

/* Boton de cambiar grupo de habilidades: pequeno, ya no es el centro. */
#interfaz .ui-abanico .ui-hab-centro { width: 46px; height: 36px; margin: -18px 0 0 -23px; padding-top: 6px; font-size: 12px; }
#interfaz .ui-abanico .ui-hab { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
#interfaz .ui-abanico .ui-hab img { left: 14px; top: 14px; width: 34px; height: 34px; }

/* Numeros flotantes sobre el que recibe (en #etiquetas, posicion por moverEtiquetas). */
.numero-combate { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  font: 900 20px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: #fff;
  -webkit-text-stroke: 1px rgba(0, 0, 0, .75); paint-order: stroke fill; text-shadow: 0 2px 3px rgba(0, 0, 0, .6);
  animation: numero-sube 1.1s ease-out forwards; }
.numero-combate.dano { color: #fff1e6; }
.numero-combate.critico { color: #ffd23a; font-size: 28px; }
.numero-combate.cura { color: #6dff8a; }
.numero-combate.mp { color: #6cc7ff; }
.numero-combate.sp { color: #ffb347; }
@keyframes numero-sube {
  0% { opacity: 0; margin-top: 8px; scale: .6; }
  15% { opacity: 1; margin-top: 0; scale: 1.15; }
  30% { scale: 1; }
  100% { opacity: 0; margin-top: -46px; }
}

/* Vida del objetivo: barrita sobre su cabeza. */
.vida-objetivo { position: absolute; left: 0; top: 0; width: 64px; height: 7px; pointer-events: none;
  border-radius: 4px; background: rgba(0, 0, 0, .65); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); overflow: hidden; }
.vida-objetivo[hidden] { display: none; }
.vida-objetivo i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ff6a5a, #c8182a);
  transition: width .25s; }