/* Combate cinematográfico — VFX, barras, log, boss */

.dsk-battle-vfx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 12;
}

.exp-battle-panel {
  position: relative;
  overflow: hidden;
}

/* —— Efeitos entre combatentes (projetil/raio/corte) —— */
.dsk-battle-link {
  position: absolute;
  height: 8px;
  transform-origin: 0 50%;
  opacity: 0;
  filter: drop-shadow(0 0 10px var(--dsk-link-glow, rgba(255,255,255,0.35)));
}

.dsk-battle-link::before,
.dsk-battle-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.dsk-battle-link::before {
  background: linear-gradient(90deg, transparent, var(--dsk-link-color, #fde047), transparent);
  opacity: 0.85;
}

.dsk-battle-link::after {
  background: radial-gradient(circle at 92% 50%, rgba(255,255,255,0.8), transparent 55%);
  opacity: 0.65;
}

.dsk-battle-link--go {
  animation: dsk-link-fire 0.38s ease-out forwards;
}

.dsk-battle-link--crit {
  height: 10px;
  filter: drop-shadow(0 0 16px rgba(253, 224, 71, 0.7)) drop-shadow(0 0 18px var(--dsk-link-glow, rgba(255,255,255,0.4)));
}

.dsk-battle-link--miss,
.dsk-battle-link--dodge {
  opacity: 0.75;
  filter: drop-shadow(0 0 10px rgba(148, 163, 184, 0.35));
}

/* variações por elemento */
.dsk-battle-link--slash { height: 7px; }
.dsk-battle-link--slash::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent); }
.dsk-battle-link--bolt::before { background: linear-gradient(90deg, transparent, rgba(253, 224, 71, 0.95), transparent); }
.dsk-battle-link--flame::before { background: linear-gradient(90deg, transparent, rgba(255, 107, 61, 0.95), transparent); }
.dsk-battle-link--shard::before { background: linear-gradient(90deg, transparent, rgba(110, 231, 255, 0.95), transparent); }
.dsk-battle-link--shadow::before { background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.95), transparent); }
.dsk-battle-link--spray::before { background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.95), transparent); }
.dsk-battle-link--holy::before { background: linear-gradient(90deg, transparent, rgba(245, 215, 110, 0.95), transparent); }
.dsk-battle-link--arc::before { background: linear-gradient(90deg, transparent, rgba(165, 180, 252, 0.95), transparent); }
.dsk-battle-link--wave::before { background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.95), transparent); }
.dsk-battle-link--vine::before { background: linear-gradient(90deg, transparent, rgba(134, 239, 172, 0.95), transparent); }

@keyframes dsk-link-fire {
  0% { opacity: 0; transform: translate(0, -50%) scaleX(0.35); }
  25% { opacity: 0.95; transform: translate(0, -50%) scaleX(1); }
  100% { opacity: 0; transform: translate(0, -50%) scaleX(1.05); }
}

/* —— Números flutuantes —— */
.dsk-battle-float {
  position: absolute;
  transform: translate(-50%, 0) scale(0.85);
  opacity: 0;
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dsk-float-color, #f87171);
  text-shadow: 0 0 12px var(--dsk-float-glow, rgba(248, 113, 113, 0.8)), 0 2px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  z-index: 20;
  transition: none;
}

.dsk-battle-float--show {
  animation: dsk-float-rise 0.88s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.dsk-battle-float--crit {
  font-size: 1.45rem;
  animation: dsk-float-crit 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.dsk-battle-float--damage {
  color: #f87171;
}

.dsk-battle-float--heal {
  color: #4ade80;
  text-shadow: 0 0 14px rgba(74, 222, 128, 0.85), 0 2px 4px rgba(0, 0, 0, 0.85);
}

.dsk-battle-float--dodge,
.dsk-battle-float--crit-label,
.dsk-battle-float--miss {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #e2e8f0;
  text-shadow: 0 0 10px rgba(226, 232, 240, 0.5);
}

.dsk-battle-float--dodge {
  color: #93c5fd;
}

.dsk-battle-float--crit-label {
  color: #fde047;
  font-size: 0.82rem;
}

@keyframes dsk-float-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.7);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -42px) scale(0.92);
  }
}

@keyframes dsk-float-crit {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -52px) scale(1);
  }
}

/* Element colors on floats */
.dsk-battle-float--el-fire { color: #ff6b3d; }
.dsk-battle-float--el-ice { color: #6ee7ff; }
.dsk-battle-float--el-poison { color: #4ade80; }
.dsk-battle-float--el-holy { color: #f5d76e; }
.dsk-battle-float--el-dark { color: #c084fc; }
.dsk-battle-float--el-arcane { color: #a5b4fc; }
.dsk-battle-float--el-thunder { color: #fde047; }

/* —— Partículas —— */
.dsk-battle-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: dsk-particle-burst 0.62s ease-out forwards;
  opacity: 0.9;
}

@keyframes dsk-particle-burst {
  to {
    transform: translate(calc(-50% + var(--dsk-px, 0)), calc(-50% + var(--dsk-py, -20px)));
    opacity: 0;
  }
}

/* —— Flash / shake —— */
.exp-battle-portrait.dsk-battle-flash {
  animation: dsk-portrait-flash 0.34s ease-out;
}

.exp-battle-portrait.dsk-battle-flash--crit {
  animation: dsk-portrait-flash-crit 0.42s ease-out;
}

@keyframes dsk-portrait-flash {
  0% { filter: brightness(2.2) drop-shadow(0 0 16px var(--dsk-flash-color, rgba(255,255,255,0.6))); }
  100% { filter: none; }
}

@keyframes dsk-portrait-flash-crit {
  0% { filter: brightness(2.8) drop-shadow(0 0 24px #fde047); transform: scale(1.06); }
  100% { filter: none; transform: scale(1); }
}

.dsk-battle-shake {
  animation: dsk-side-shake 0.38s ease-out;
}

.dsk-battle-shake--heavy {
  animation: dsk-side-shake-heavy 0.42s ease-out;
}

.dsk-battle-shake--boss {
  animation: dsk-side-shake-boss 0.48s ease-out;
}

@keyframes dsk-side-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes dsk-side-shake-heavy {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-1deg); }
  60% { transform: translateX(7px) rotate(1deg); }
}

@keyframes dsk-side-shake-boss {
  0%, 100% { transform: translateX(0) scale(1); }
  15% { transform: translateX(-10px) scale(1.02); }
  45% { transform: translateX(10px) scale(0.98); }
  70% { transform: translateX(-6px); }
}

.dsk-battle-screen-shake {
  animation: dsk-screen-shake 0.28s ease-out;
}

.dsk-battle-screen-shake--heavy {
  animation: dsk-screen-shake-heavy 0.32s ease-out;
}

@keyframes dsk-screen-shake {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-2px, 1px); }
  66% { transform: translate(2px, -1px); }
}

@keyframes dsk-screen-shake-heavy {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 2px); }
  50% { transform: translate(4px, -2px); }
  75% { transform: translate(-2px, 1px); }
}

/* —— HP / mana bars —— */
.exp-hpbar {
  width: 100%;
  max-width: 140px;
  margin: 0.15rem auto 0;
}

.exp-hpbar-track {
  position: relative;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.exp-hpbar-delay {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: rgba(220, 60, 60, 0.55);
  border-radius: inherit;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.exp-hpbar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: linear-gradient(90deg, #b91c1c, #ef4444 55%, #fca5a5);
  border-radius: inherit;
  transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.exp-hpbar--player .exp-hpbar-fill {
  background: linear-gradient(90deg, #15803d, #22c55e 55%, #86efac);
}

.exp-hpbar--player .exp-hpbar-delay {
  background: rgba(34, 197, 94, 0.35);
}

.exp-hpbar--low .exp-hpbar-fill {
  animation: dsk-hp-pulse 1.2s ease-in-out infinite;
}

.exp-hpbar--danger .exp-hpbar-fill {
  animation: dsk-hp-pulse-danger 0.75s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.55);
}

@keyframes dsk-hp-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

@keyframes dsk-hp-pulse-danger {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
  50% { filter: brightness(1.25); box-shadow: 0 0 16px rgba(239, 68, 68, 0.75); }
}

.exp-hpbar-label,
.exp-manabar-label {
  display: block;
  font-size: 0.58rem;
  color: rgba(200, 205, 220, 0.85);
  margin-top: 0.12rem;
}

.exp-manabar-track {
  position: relative;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  max-width: 140px;
  margin: 0.1rem auto 0;
}

.exp-manabar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1d4ed8, #60a5fa);
  border-radius: inherit;
  transition: width 0.35s ease;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.35);
}

/* —— Boss panel —— */
.exp-battle-panel--boss {
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: inset 0 0 40px rgba(127, 29, 29, 0.15), 0 0 24px rgba(180, 83, 9, 0.12);
}

.exp-battle-panel--boss-legend {
  box-shadow: inset 0 0 50px rgba(168, 85, 247, 0.12), 0 0 28px rgba(212, 175, 55, 0.18);
}

.exp-battle-panel--boss-mythic {
  box-shadow: inset 0 0 60px rgba(250, 204, 21, 0.15), 0 0 36px rgba(239, 68, 68, 0.2);
  animation: dsk-boss-aura 3s ease-in-out infinite;
}

@keyframes dsk-boss-aura {
  0%, 100% { border-color: rgba(212, 175, 55, 0.35); }
  50% { border-color: rgba(250, 204, 21, 0.55); }
}

.exp-battle-boss-enter {
  animation: dsk-boss-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dsk-boss-enter {
  from {
    opacity: 0;
    transform: scale(0.96);
    filter: brightness(1.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

.exp-battle-title--boss {
  font-family: Cinzel, serif;
  text-shadow: 0 0 16px rgba(245, 215, 110, 0.45);
}

.exp-battle-boss-tag {
  animation: dsk-boss-tag-glow 2s ease-in-out infinite;
}

@keyframes dsk-boss-tag-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(254, 243, 199, 0.3); }
  50% { box-shadow: 0 0 16px rgba(254, 243, 199, 0.55); }
}

.exp-battle-side--enemy.exp-battle-side--boss .exp-battle-portrait {
  width: 88px;
  height: 88px;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.35);
}

/* —— Move cards —— */
.exp-move-card--cast {
  animation: dsk-move-cast 0.38s ease-out;
  border-color: rgba(212, 175, 55, 0.65) !important;
}

@keyframes dsk-move-cast {
  0% { transform: scale(0.92); filter: brightness(1.4); }
  100% { transform: scale(1); filter: none; }
}

.exp-move-card--el-fire { border-color: rgba(255, 107, 61, 0.45); }
.exp-move-card--el-ice { border-color: rgba(110, 231, 255, 0.4); }
.exp-move-card--el-poison { border-color: rgba(74, 222, 128, 0.4); }
.exp-move-card--el-holy { border-color: rgba(245, 215, 110, 0.45); }
.exp-move-card--el-dark { border-color: rgba(192, 132, 252, 0.45); }
.exp-move-card--el-arcane { border-color: rgba(165, 180, 252, 0.45); }
.exp-move-card--el-thunder { border-color: rgba(253, 224, 71, 0.45); }

.exp-move-card-element {
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.exp-move-card-element--fire { color: #ff6b3d; }
.exp-move-card-element--ice { color: #6ee7ff; }
.exp-move-card-element--poison { color: #4ade80; }
.exp-move-card-element--holy { color: #f5d76e; }
.exp-move-card-element--dark { color: #c084fc; }
.exp-move-card-element--arcane { color: #a5b4fc; }
.exp-move-card-element--physical { color: #d4c4a8; }

/* —— Combat log premium —— */
.exp-battle-log-line {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}

.exp-log-icon {
  flex: 0 0 auto;
  width: 1rem;
  text-align: center;
  opacity: 0.85;
}

.exp-log-text {
  flex: 1;
  min-width: 0;
}

.exp-log-dmg {
  font-weight: 700;
  color: #fca5a5;
}

.exp-battle-log-line--el-fire .exp-log-dmg { color: #ff6b3d; }
.exp-battle-log-line--el-ice .exp-log-dmg { color: #6ee7ff; }
.exp-battle-log-line--el-poison .exp-log-dmg { color: #4ade80; }
.exp-battle-log-line--el-holy .exp-log-dmg { color: #f5d76e; }
.exp-battle-log-line--el-dark .exp-log-dmg { color: #c084fc; }
.exp-battle-log-line--el-arcane .exp-log-dmg { color: #a5b4fc; }

.exp-battle-log-line--crit {
  font-weight: 700;
  color: #fde047;
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.35);
}

.exp-battle-log-line--dodge {
  color: #93c5fd;
  font-style: italic;
}

.exp-battle-log-line--player-hit .exp-log-icon { color: #86efac; }
.exp-battle-log-line--enemy-hit .exp-log-icon { color: #f87171; }

@media (max-width: 640px) {
  .dsk-battle-float { font-size: 0.92rem; }
  .dsk-battle-float--crit { font-size: 1.15rem; }
}

.settings-select {
  display: block;
  width: 100%;
  max-width: 280px;
  margin-top: 0.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #e8e0cc;
  font-size: 0.78rem;
}

  .dsk-battle-particle,
  .dsk-battle-screen-shake,
  .dsk-battle-screen-shake--heavy,
  .exp-battle-boss-enter,
  .exp-hpbar--low .exp-hpbar-fill,
  .exp-hpbar--danger .exp-hpbar-fill {
    animation: none !important;
  }
}