/* =========================================================
   Guerreiros CSS — Mundo FAAB
   Pronto para trocar .fighter-core por sprite no futuro
   ========================================================= */

.fighter {
  --f-color: #3de7ff;
  --f-color-2: #7af0ff;
  --f-skin: #e8c4a8;
  --f-dark: color-mix(in srgb, var(--f-color) 45%, #041018);
  position: relative;
  display: inline-block;
  width: 2.6rem;
  height: 3.5rem;
  color: var(--f-color);
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--f-color) 65%, transparent));
}

.fighter-lg {
  width: 5rem;
  height: 6.6rem;
}

.fighter-md {
  width: 3.2rem;
  height: 4.2rem;
}

.fighter-sm {
  width: 1.65rem;
  height: 2.15rem;
}

.fighter-board,
.fighter-duel {
  width: 2.5rem;
  height: 3.5rem;
  transform-origin: center bottom;
  transform: translateZ(42px) rotateX(-58deg) scale(1.15);
  animation: holoStand 4.2s ease-in-out infinite;
  filter:
    drop-shadow(0 14px 10px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 12px color-mix(in srgb, var(--f-color) 75%, transparent));
}

/* Reserva / listas: sem animações idle */
.fighter.is-lite,
.bench-chip .fighter {
  animation: none !important;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--f-color) 55%, transparent));
}

.fighter.is-lite .fighter-pad,
.fighter.is-lite .fighter-beam,
.fighter.is-lite .fighter-ring,
.fighter.is-lite .fighter-aura,
.fighter.is-lite .fighter-cape,
.fighter.is-lite .fighter-burst,
.fighter.is-lite .fighter-slash,
.fighter.is-lite .fighter-focus,
.fighter.is-lite .fighter-hair,
.bench-chip .fighter-pad,
.bench-chip .fighter-beam,
.bench-chip .fighter-ring,
.bench-chip .fighter-aura,
.bench-chip .fighter-cape,
.bench-chip .fighter-burst,
.bench-chip .fighter-slash {
  display: none !important;
  animation: none !important;
}

.fighter.is-lite .fighter-arm,
.fighter.is-lite .fighter-eyes,
.fighter.is-lite .fighter-emblem,
.bench-chip .fighter-arm,
.bench-chip .fighter-eyes,
.bench-chip .fighter-emblem,
.bench-chip .fighter-pad {
  animation: none !important;
}

/* Base holográfica */
.fighter-pad,
.fighter-beam,
.fighter-ring {
  display: none;
  pointer-events: none;
}

.fighter-board .fighter-pad,
.fighter-duel .fighter-pad,
.fighter-lg .fighter-pad {
  display: block;
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -4%;
  height: 22%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--f-color) 75%, transparent), transparent 72%);
  border: 1px solid color-mix(in srgb, var(--f-color) 55%, transparent);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--f-color) 55%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--f-color) 35%, transparent);
  transform: rotateX(78deg) translateZ(-14px) scale(1.2);
  opacity: 0.9;
  z-index: 0;
}

.fighter-board .fighter-beam,
.fighter-duel .fighter-beam,
.fighter-lg .fighter-beam {
  display: block;
  position: absolute;
  left: 36%;
  right: 36%;
  bottom: 6%;
  height: 72%;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--f-color) 22%, transparent) 45%,
    color-mix(in srgb, var(--f-color) 50%, transparent)
  );
  filter: blur(3px);
  opacity: 0.5;
  transform: translateZ(-6px);
  z-index: 0;
}

.fighter-board .fighter-ring,
.fighter-duel .fighter-ring,
.fighter-lg .fighter-ring {
  display: block;
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  height: 28%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--f-color) 45%, transparent);
  transform: rotateX(72deg) translateZ(-8px);
  opacity: 0.55;
  z-index: 0;
}

.fighter-aura {
  position: absolute;
  inset: 0% 0% 8%;
  border-radius: 45% 45% 40% 40%;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--f-color) 40%, transparent), transparent 68%);
  filter: blur(3px);
  opacity: 0.85;
  transform: translateZ(-8px);
  z-index: 0;
}

.fighter-core {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
}

.fighter-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: center 70%;
}

.fighter-lg:not(.is-lite) .fighter-body {
  animation: battleIdle 2.8s ease-in-out infinite;
}

.fighter-cape {
  position: absolute;
  left: 28%;
  right: 28%;
  top: 30%;
  height: 42%;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--f-color) 55%, transparent),
    transparent 85%
  );
  border-radius: 20% 20% 40% 40%;
  transform: translateZ(-6px) rotateX(8deg);
  filter: blur(0.4px);
  opacity: 0.75;
}

.fighter-lg:not(.is-lite) .fighter-cape {
  animation: capeWave 2.6s ease-in-out infinite;
}

.fighter-head,
.fighter-torso,
.fighter-arm,
.fighter-leg,
.fighter-hair,
.fighter-hand,
.fighter-focus,
.fighter-chest,
.fighter-emblem {
  position: absolute;
  transform-style: preserve-3d;
}

.fighter-head {
  width: 30%;
  height: 22%;
  left: 35%;
  top: 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff6, transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--f-skin) 90%, white), var(--f-skin));
  box-shadow:
    0 0 10px color-mix(in srgb, var(--f-color) 35%, transparent),
    inset 0 -4px 8px rgba(0, 0, 0, 0.15);
  transform: translateZ(16px);
  z-index: 4;
}

.fighter-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.fighter-eyes {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 42%;
  height: 14%;
  background:
    radial-gradient(circle at 25% 50%, var(--f-color) 0 35%, transparent 40%),
    radial-gradient(circle at 75% 50%, var(--f-color) 0 35%, transparent 40%);
  filter: drop-shadow(0 0 4px var(--f-color));
  animation: eyesGlow 2.4s ease-in-out infinite;
}

.fighter-hair {
  left: 18%;
  right: 18%;
  top: -2%;
  height: 34%;
  border-radius: 60% 60% 20% 20%;
  background: linear-gradient(180deg, var(--f-color-2), var(--f-dark));
  box-shadow: 0 0 10px color-mix(in srgb, var(--f-color) 40%, transparent);
  transform: translateZ(12px);
  z-index: 3;
  opacity: 0.95;
}

.fighter-torso {
  width: 36%;
  height: 34%;
  left: 32%;
  top: 28%;
  border-radius: 28% 28% 18% 18%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--f-color) 85%, white), var(--f-color) 45%, var(--f-dark));
  box-shadow:
    0 0 12px color-mix(in srgb, var(--f-color) 45%, transparent),
    inset 0 0 8px rgba(255, 255, 255, 0.2);
  transform: translateZ(12px);
  z-index: 2;
}

.fighter-chest {
  inset: 18% 20% 35%;
  border-radius: 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent);
  opacity: 0.7;
}

.fighter-emblem {
  left: 35%;
  right: 35%;
  top: 38%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--f-color-2) 40%, transparent 70%);
  box-shadow: 0 0 8px var(--f-color);
  opacity: 0.85;
  animation: emblemPulse 2s ease-in-out infinite;
}

.fighter-arm {
  width: 13%;
  height: 32%;
  top: 30%;
  border-radius: 40%;
  background: linear-gradient(180deg, var(--f-color), var(--f-dark));
  box-shadow: 0 0 8px color-mix(in srgb, var(--f-color) 40%, transparent);
  z-index: 3;
}

.fighter-arm-l {
  left: 14%;
  transform: rotate(18deg) translateZ(8px);
  transform-origin: top center;
  animation: armGuard 2.8s ease-in-out infinite;
}

.fighter-arm-r {
  right: 12%;
  transform: rotate(-28deg) translateZ(14px);
  transform-origin: top center;
  animation: armReady 2.8s ease-in-out infinite;
}

.fighter-hand {
  left: 5%;
  right: 5%;
  bottom: -12%;
  height: 28%;
  border-radius: 50%;
  background: var(--f-skin);
  box-shadow: 0 0 6px color-mix(in srgb, var(--f-color) 30%, transparent);
}

.fighter-focus {
  width: 160%;
  height: 55%;
  left: -30%;
  top: 70%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 18%, var(--f-color) 28%, transparent 70%);
  box-shadow: 0 0 14px var(--f-color);
  opacity: 0.9;
  animation: focusSpin 2.2s linear infinite;
  filter: blur(0.3px);
}

/* Arena: idle só no root (holoStand) — filhos estáticos = bem mais fluido */
.fighter-board .fighter-eyes,
.fighter-duel .fighter-eyes,
.fighter-board .fighter-emblem,
.fighter-duel .fighter-emblem,
.fighter-board .fighter-arm-l,
.fighter-duel .fighter-arm-l,
.fighter-board .fighter-arm-r,
.fighter-duel .fighter-arm-r,
.fighter-board .fighter-focus,
.fighter-duel .fighter-focus,
.fighter-board .fighter-aura,
.fighter-duel .fighter-aura {
  animation: none !important;
}

.fighter-leg {
  width: 14%;
  height: 30%;
  top: 58%;
  border-radius: 30%;
  background: linear-gradient(180deg, var(--f-color), var(--f-dark) 70%, #0a1018);
  box-shadow: 0 0 8px color-mix(in srgb, var(--f-color) 30%, transparent);
  transform: translateZ(6px);
  z-index: 1;
}

.fighter-leg-l { left: 33%; }
.fighter-leg-r { right: 33%; }

/* Corpo feminino */
.fighter.body-f .fighter-torso {
  width: 28%;
  left: 36%;
  border-radius: 42% 42% 30% 30%;
}

.fighter.body-f .fighter-head {
  width: 28%;
  left: 36%;
}

.fighter.body-f .fighter-hair {
  height: 48%;
  top: -8%;
  border-radius: 70% 70% 25% 25%;
  left: 14%;
  right: 14%;
}

.fighter.body-f .fighter-arm {
  width: 11%;
  height: 30%;
}

.fighter.body-f .fighter-cape {
  left: 32%;
  right: 32%;
  opacity: 0.65;
}

.fighter.body-f .fighter-leg {
  width: 12%;
}

/* Corpo masculino */
.fighter.body-m .fighter-torso {
  width: 40%;
  left: 30%;
  border-radius: 24% 24% 16% 16%;
}

.fighter.body-m .fighter-head {
  width: 32%;
  left: 34%;
}

.fighter.body-m .fighter-hair {
  height: 28%;
  top: 0;
  border-radius: 50% 50% 15% 15%;
}

.fighter.body-m .fighter-arm {
  width: 15%;
}

.fighter.body-m .fighter-cape {
  left: 24%;
  right: 24%;
  opacity: 0.85;
}

/* Elementos */
.fighter-water {
  --f-color: #3de7ff;
  --f-color-2: #9af6ff;
}
.fighter-fire {
  --f-color: #ff6b4a;
  --f-color-2: #ffb087;
}
.fighter-earth {
  --f-color: #c4a35a;
  --f-color-2: #e6d09a;
}
.fighter-wind {
  --f-color: #7dffb3;
  --f-color-2: #c8ffe0;
}
.fighter-ice {
  --f-color: #9ad8ff;
  --f-color-2: #e8f7ff;
}
.fighter-psi {
  --f-color: #c084fc;
  --f-color-2: #e9d5ff;
}
.fighter-volt {
  --f-color: #ffe566;
  --f-color-2: #fff3a8;
}
.fighter-tech {
  --f-color: #7aa2ff;
  --f-color-2: #c5d6ff;
}
.fighter-evoke {
  --f-color: #8b5cf6;
  --f-color-2: #c4b5fd;
}

.fighter-water .fighter-aura {
  background:
    radial-gradient(circle at 50% 55%, rgba(61, 231, 255, 0.45), transparent 65%),
    radial-gradient(circle at 30% 30%, rgba(154, 246, 255, 0.35), transparent 50%);
}

.fighter-fire .fighter-aura {
  background:
    radial-gradient(circle at 50% 70%, rgba(255, 107, 74, 0.5), transparent 60%),
    radial-gradient(circle at 50% 20%, rgba(255, 176, 100, 0.35), transparent 55%);
  animation: fireAura 1.4s ease-in-out infinite;
}

.fighter-earth .fighter-torso {
  background:
    linear-gradient(180deg, #e0c688, #c4a35a 40%, #7a6232);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 10px rgba(196, 163, 90, 0.4);
}

.fighter-wind .fighter-cape {
  opacity: 0.95;
  animation: capeWave 1.4s ease-in-out infinite;
}

.fighter-ice .fighter-head,
.fighter-ice .fighter-torso {
  box-shadow:
    0 0 12px rgba(154, 216, 255, 0.65),
    inset 0 0 10px rgba(255, 255, 255, 0.35);
}

.fighter-psi .fighter-focus {
  animation: focusSpin 1.4s linear infinite, psiOrbit 2.8s ease-in-out infinite;
}

.fighter-psi .fighter-ring {
  display: block !important;
  opacity: 0.7;
}

/* Burst / slash ataque */
.fighter-burst,
.fighter-slash {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.fighter-burst {
  inset: -14%;
  border-radius: 50%;
}

.fighter-slash {
  left: 10%;
  right: -20%;
  top: 20%;
  height: 55%;
  border-radius: 40%;
  background: linear-gradient(
    120deg,
    transparent 20%,
    color-mix(in srgb, var(--f-color) 80%, white),
    transparent 80%
  );
  filter: blur(1px);
  transform: translateZ(24px) rotate(-18deg) scaleX(0.2);
}

.fighter.is-cast .fighter-burst {
  animation: castBurst 0.55s ease-out;
}

.fighter.is-cast .fighter-slash,
.duel-actor.is-striking .fighter-slash {
  animation: slashStrike 0.45s ease-out;
}

.fighter-water .fighter-burst {
  background: radial-gradient(circle, rgba(61, 231, 255, 0.8), transparent 65%);
}
.fighter-fire .fighter-burst {
  background: radial-gradient(circle, rgba(255, 107, 74, 0.85), transparent 65%);
}
.fighter-earth .fighter-burst {
  background: radial-gradient(circle, rgba(196, 163, 90, 0.8), transparent 65%);
}
.fighter-wind .fighter-burst {
  background: conic-gradient(from 0deg, transparent, rgba(125, 255, 179, 0.7), transparent 45%);
}
.fighter-ice .fighter-burst {
  background: radial-gradient(circle, rgba(232, 247, 255, 0.9), rgba(154, 216, 255, 0.5) 40%, transparent 70%);
}
.fighter-psi .fighter-burst {
  background: radial-gradient(circle, rgba(233, 213, 255, 0.9), rgba(192, 132, 252, 0.55) 45%, transparent 70%);
}
.fighter-volt .fighter-burst {
  background: radial-gradient(circle, rgba(255, 243, 168, 0.95), rgba(255, 229, 102, 0.55) 45%, transparent 70%);
}
.fighter-tech .fighter-burst {
  background: radial-gradient(circle, rgba(197, 214, 255, 0.9), rgba(122, 162, 255, 0.55) 45%, transparent 70%);
}
.fighter-evoke .fighter-burst {
  background: radial-gradient(circle, rgba(196, 181, 253, 0.9), rgba(139, 92, 246, 0.55) 45%, transparent 70%);
}

.fighter-volt .fighter-aura {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 229, 102, 0.5), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 200, 0.3), transparent 50%);
}
.fighter-tech .fighter-emblem {
  box-shadow: 0 0 8px rgba(122, 162, 255, 0.8);
}
.fighter-evoke .fighter-aura {
  background:
    radial-gradient(circle at 50% 60%, rgba(139, 92, 246, 0.55), transparent 62%),
    radial-gradient(circle at 30% 25%, rgba(30, 10, 50, 0.45), transparent 50%);
}
.fighter-evoke .fighter-cape {
  opacity: 0.95;
  filter: brightness(0.85);
}

/* Preview na seleção */
.char-preview {
  perspective: 500px;
}

.char-preview .fighter {
  transform: rotateY(-16deg) rotateX(8deg);
  transform-style: preserve-3d;
}

/* Actor andando / golpeando */
.duel-actor.is-walking .fighter-body {
  animation: walkCycle 0.35s ease-in-out infinite;
}

.duel-actor.is-striking .fighter {
  filter: drop-shadow(0 0 18px var(--f-color)) brightness(1.35);
}

.duel-actor.is-striking .fighter-body {
  animation: none;
  transform: rotate(-12deg) scale(1.08) translateZ(20px);
}

.duel-actor.is-striking .fighter-arm-r {
  animation: none;
  transform: rotate(-70deg) translateZ(20px) scaleY(1.1);
}

.duel-actor.is-striking .fighter-burst {
  animation: castBurst 0.5s ease-out;
}

.duel-zone .fighter-board,
.duel-zone .fighter-duel {
  width: 2.55rem;
  height: 3.4rem;
  transform: translateY(-4%) scale(1.2) !important;
  transform-origin: center bottom;
  animation: holoFlicker 2.8s ease-in-out infinite !important;
  filter:
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 10px color-mix(in srgb, var(--f-color) 70%, transparent));
}

.duel-zone .fighter-pad {
  transform: scaleX(1.1) translateY(10%) !important;
  opacity: 0.75;
}

.duel-actor .fighter-duel {
  width: 2.8rem;
  height: 3.8rem;
  transform: rotateX(-16deg) scale(1.2);
  animation: holoFlicker 0.9s ease-in-out infinite !important;
}

/* Keyframes */
@keyframes battleIdle {
  0%,
  100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3%) rotate(-1.5deg); }
}

@keyframes armGuard {
  0%,
  100% { transform: rotate(18deg) translateZ(8px); }
  50% { transform: rotate(10deg) translateZ(10px); }
}

@keyframes armReady {
  0%,
  100% { transform: rotate(-28deg) translateZ(14px); }
  50% { transform: rotate(-36deg) translateZ(16px); }
}

@keyframes capeWave {
  0%,
  100% { transform: translateZ(-6px) rotateX(8deg) scaleY(1); }
  50% { transform: translateZ(-8px) rotateX(14deg) scaleY(1.08) skewX(-4deg); }
}

@keyframes auraPulse {
  0%,
  100% { opacity: 0.7; transform: translateZ(-8px) scale(1); }
  50% { opacity: 1; transform: translateZ(-8px) scale(1.08); }
}

@keyframes fireAura {
  0%,
  100% { opacity: 0.75; transform: translateZ(-8px) scale(1) translateY(0); }
  50% { opacity: 1; transform: translateZ(-8px) scale(1.12) translateY(-4%); }
}

@keyframes focusSpin {
  to { transform: rotate(360deg); }
}

@keyframes psiOrbit {
  0%,
  100% { filter: blur(0.3px) brightness(1); }
  50% { filter: blur(1px) brightness(1.4); }
}

@keyframes emblemPulse {
  0%,
  100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes eyesGlow {
  0%,
  100% { opacity: 0.85; }
  50% { opacity: 1; filter: drop-shadow(0 0 6px var(--f-color)); }
}

@keyframes holoRingSpin {
  to { transform: rotateX(72deg) translateZ(-8px) rotate(360deg); }
}

@keyframes castBurst {
  0% { opacity: 0.95; transform: translateZ(20px) scale(0.35); }
  100% { opacity: 0; transform: translateZ(20px) scale(1.7); }
}

@keyframes slashStrike {
  0% { opacity: 0; transform: translateZ(24px) rotate(-18deg) scaleX(0.15); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateZ(24px) rotate(-18deg) scaleX(1.4) translateX(20%); }
}

@keyframes walkCycle {
  0%,
  100% { transform: rotate(3deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-4%); }
}

@keyframes holoFlicker {
  0%,
  100% { opacity: 1; }
  42% { opacity: 0.9; }
  48% { opacity: 0.72; }
  52% { opacity: 0.96; }
  70% { opacity: 0.86; }
}

@keyframes holoStand {
  0%,
  100% { transform: translateZ(42px) rotateX(-58deg) scale(1.15) translateY(0); }
  50% { transform: translateZ(50px) rotateX(-58deg) scale(1.15) translateY(-5px); }
}

@keyframes holoPadPulse {
  0%,
  100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@keyframes holoFloat {
  0%,
  100% { transform: translateZ(28px) rotateX(-8deg) translateY(0); }
  50% { transform: translateZ(34px) rotateX(-8deg) translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .fighter,
  .fighter-board,
  .fighter-duel,
  .fighter-body,
  .fighter-aura,
  .fighter-cape,
  .fighter-arm-l,
  .fighter-arm-r,
  .fighter-focus,
  .fighter-eyes,
  .fighter-emblem,
  .fighter-ring,
  .fighter-pad {
    animation: none !important;
  }
}