.floating-text {
  position: fixed;
  font-family: 'Audiowide', 'Orbitron', 'Segoe UI', Arial, sans-serif;
  font-size: 1.8em;
  font-weight: bold;
  pointer-events: none;
  z-index: 10000;
  text-align: center;
  animation: scorePopupMobile 1.5s ease-out forwards;
  text-shadow: 
    0 0 20px currentColor,
    0 0 10px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.6);
  /* Mobile-specific enhancements */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.floating-text.success {
  color: #19ffb9;
  filter: drop-shadow(0 0 15px #19ffb9);
}

.floating-text.damage {
  color: #ff4f65;
  filter: drop-shadow(0 0 15px #ff4f65);
}

.floating-text.powerup {
  color: #00f7ff;
  font-size: 2em;
  filter: drop-shadow(0 0 20px #00f7ff);
  animation: powerupFloatMobile 2s ease-out forwards;
}

@keyframes powerupFloatMobile {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5) rotate(-10deg);
  }
  30% {
    opacity: 1;
    transform: translateY(-40px) scale(1.5) rotate(5deg);
  }
  60% {
    opacity: 1;
    transform: translateY(-80px) scale(1.3) rotate(-5deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(1) rotate(0deg);
  }
}

/* Enhanced Mobile Combo Effects */
.combo-explosion {
  position: fixed;
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
  animation: comboExplosionMobile 1s ease-out forwards;
}

@keyframes comboExplosionMobile {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(3) rotate(360deg);
    opacity: 0;
  }
}

.combo-explosion::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.8) 0%,
    rgba(255, 140, 0, 0.6) 40%,
    rgba(255, 69, 0, 0.4) 70%,
    transparent 100%
  );
  border-radius: 50%;
}

/* Enhanced Mobile Screen Shake */
.screen-shake-mobile {
  animation: screenShakeMobile 0.5s ease-in-out;
}

@keyframes screenShakeMobile {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3px, -3px); }
  20% { transform: translate(3px, 3px); }
  30% { transform: translate(-3px, 0px); }
  40% { transform: translate(3px, -2px); }
  50% { transform: translate(-2px, 2px); }
  60% { transform: translate(2px, 2px); }
  70% { transform: translate(-2px, -2px); }
  80% { transform: translate(2px, 0px); }
  90% { transform: translate(0px, -2px); }
}

/* Enhanced Mobile Victory Effect */
.victory-burst {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10002;
  background: radial-gradient(
    circle at center,
    rgba(25, 255, 185, 0.3) 0%,
    rgba(25, 255, 185, 0.2) 30%,
    transparent 70%
  );
  opacity: 0;
  animation: victoryBurstMobile 2s ease-out;
}

@keyframes victoryBurstMobile {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* Enhanced Ability Trail Effects */
.ability-trail {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.8) 0%,
    rgba(255, 215, 0, 0.4) 50%,
    transparent 100%
  );
  animation: abilityTrailMobile 0.8s ease-out forwards;
}

@keyframes abilityTrailMobile {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* Enhanced Mobile Touch Indicator */
.touch-indicator {
  position: fixed;
  width: 60px;
  height: 60px;
  border: 3px solid rgba(0, 226, 255, 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10003;
  transform: translate(-50%, -50%);
  animation: touchIndicator 0.6s ease-out forwards;
}

/* Enhanced Mobile Score Combo Display */
.score-combo-popup {
  position: fixed;
  font-family: 'Audiowide', sans-serif;
  font-size: 2.5em;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 
    0 0 30px #FFD700,
    0 0 20px #FFA500,
    0 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 10004;
  transform: translate(-50%, -50%);
  animation: comboPopMobile 1s ease-out forwards;
}

/* Monk-specific success text */
.floating-text.success[data-character="Monk"] {
  color: #FF8C00;
  text-shadow: 0 0 10px #FF8C00, 0 0 5px #000;
}

.floating-text.failure {
  color: #ff4f65;
  text-shadow: 0 0 10px #ff4f65, 0 0 5px #000;
}

.floating-text.powerup {
  color: #00f7ff;
  text-shadow: 0 0 10px #00f7ff, 0 0 5px #000;
}

/* ===================================================================
   MAGE ARCANE BLAST VISUAL EFFECTS
   =================================================================== */

/* Arcane Range Indicator - Shows targetable range */
.arcane-range-indicator {
  position: relative;
  background: rgba(75, 0, 130, 0.25) !important;
  border: 2px solid rgba(75, 0, 130, 0.6) !important;
  box-shadow: inset 0 0 10px rgba(75, 0, 130, 0.3) !important;
  animation: pulseRange 2s ease-in-out infinite;
}

/* Arcane Area Preview - Shows damage area */
.arcane-area-preview {
  position: relative;
  background: rgba(155, 89, 182, 0.2) !important;
  border: 2px solid #9B59B6 !important;
  box-shadow: inset 0 0 20px rgba(75, 0, 130, 0.4) !important;
  animation: pulseArea 1.5s ease-in-out infinite;
}

/* Damage Preview Numbers */
.damage-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFB3FF;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(75, 0, 130, 0.8), 0 0 20px rgba(155, 89, 182, 0.6);
  z-index: 60;
  pointer-events: none;
  animation: floatDamage 1.5s ease-in-out infinite;
}

/* Arcane Blast Target Highlight */
.arcane-blast-target {
  position: relative;
  background: rgba(75, 0, 130, 0.15) !important;
  border-color: #4B0082 !important;
  box-shadow: 0 0 20px rgba(75, 0, 130, 0.5), 0 0 35px rgba(75, 0, 130, 0.3) !important;
  animation: pulseArcaneTarget 1s ease-in-out infinite;
}

/* Arcane Confirmation Panel */
.arcane-confirm-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(29, 0, 77, 0.3) 0%, rgba(75, 0, 130, 0.3) 100%);
  border: 3px solid rgba(155, 89, 182, 0.6);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 0 40px rgba(75, 0, 130, 0.4), 0 0 60px rgba(155, 89, 182, 0.2);
  backdrop-filter: blur(10px);
  z-index: 1000;
  min-width: 300px;
  text-align: center;
}

.arcane-confirm-panel .confirm-title {
  color: #E8BFFF;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px;
  text-shadow: 0 0 10px rgba(232, 191, 255, 0.5);
}

.arcane-confirm-panel .confirm-info {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.arcane-confirm-panel .damage-info,
.arcane-confirm-panel .target-info,
.arcane-confirm-panel .total-damage {
  color: #FFB3FF;
  font-size: 16px;
  margin: 8px 0;
  text-shadow: 0 0 5px rgba(255, 179, 255, 0.5);
}

.arcane-confirm-panel .total-damage {
  font-size: 18px;
  font-weight: bold;
  color: #FFC8FF;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 10px;
  margin-top: 10px;
}

.arcane-confirm-panel .confirm-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.arcane-confirm-panel .confirm-btn {
  background: linear-gradient(135deg, #9B59B6 0%, #4B0082 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(75, 0, 130, 0.5);
}

.arcane-confirm-panel .cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #FFB3FF;
  border: 2px solid rgba(255, 179, 255, 0.3);
}

/* Animations */
@keyframes pulseRange {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

@keyframes pulseArea {
  0%, 100% {
    opacity: 0.8;
    box-shadow: inset 0 0 20px rgba(75, 0, 130, 0.4);
  }
  50% {
    opacity: 1;
    box-shadow: inset 0 0 30px rgba(155, 89, 182, 0.6), 0 0 15px rgba(75, 0, 130, 0.4);
  }
}

@keyframes floatDamage {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-5px);
  }
}

@keyframes pulseArcaneTarget {
  0%, 100% {
    box-shadow: 0 0 20px rgba(75, 0, 130, 0.5), 0 0 35px rgba(75, 0, 130, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(75, 0, 130, 0.7), 0 0 50px rgba(75, 0, 130, 0.5);
  }
}

/* Arcane explosion impact effect */
@keyframes arcaneExplosion {
  0% {
    transform: scale(0.8);
    opacity: 1;
    background: radial-gradient(circle, rgba(75, 0, 130, 0.8) 0%, rgba(75, 0, 130, 0) 70%);
  }
  50% {
    transform: scale(2);
    opacity: 0.7;
    background: radial-gradient(circle, rgba(155, 89, 182, 0.6) 0%, rgba(75, 0, 130, 0) 80%);
  }
  100% {
    transform: scale(3);
    opacity: 0;
    background: radial-gradient(circle, rgba(232, 191, 255, 0.3) 0%, transparent 90%);
  }
}

.arcane-explosion {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  animation: arcaneExplosion 0.8s ease-out forwards;
}

/* Arcane death animation for enemies */
.enemy.arcane-death {
  animation: arcaneDisintegration 1.2s ease-out forwards;
}

@keyframes arcaneDisintegration {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1) hue-rotate(0deg);
  }
  30% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
    filter: brightness(2) hue-rotate(270deg) saturate(2);
    color: #E8BFFF;
    text-shadow: 0 0 20px #9B59B6;
  }
  60% {
    transform: scale(0.8) rotate(-10deg);
    opacity: 0.8;
    filter: brightness(3) hue-rotate(290deg) saturate(3) blur(2px);
  }
  100% {
    transform: scale(0) rotate(-360deg);
    opacity: 0;
    filter: brightness(4) hue-rotate(320deg) saturate(0) blur(10px);
  }
}

/* Arcane flash effect */
.arcane-flash {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(155, 89, 182, 0.8) 0%, rgba(75, 0, 130, 0.4) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99;
  animation: arcaneFlash 0.6s ease-out forwards;
}

@keyframes arcaneFlash {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

/* Arcane Blast Targeting Effects */
.arcane-blast-target::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  border: 2px solid #4B0082;
  border-radius: 50%;
  opacity: 0.6;
  animation: arcaneTargetRing 1.5s linear infinite;
}

.arcane-blast-target::after {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #4B0082;
  text-shadow: 0 0 10px #4B0082;
  animation: arcaneTargetSymbol 2s ease-in-out infinite;
}

@keyframes arcaneTargetRing {
  0% {
    transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8) rotate(360deg);
    opacity: 0.3;
  }
}

@keyframes arcaneTargetSymbol {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.3);
    opacity: 1;
  }
}

/* ===================================================================
   COMBAT PREVIEW INDICATORS (MOBILE-FRIENDLY)
   =================================================================== */

/* Combat preview indicators that show permanently when character is selected */
.combat-preview-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  pointer-events: none;
  z-index: 60;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 16px currentColor;
  animation: pulsePreview 2s ease-in-out infinite;
}

.combat-preview-success {
  color: #19ffb9;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 16px #19ffb9;
}

.combat-preview-failure {
  color: #ff4f65;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 16px #ff4f65;
}

.combat-preview-berserk {
  color: #8B0000;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 16px #8B0000;
  font-weight: 900;
}

@keyframes pulsePreview {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .combat-preview-indicator {
    font-size: 14px;
  }
}

/* Persistent floating text for damage preview */
.floating-text-persistent {
  position: absolute;
  font-family: 'Audiowide', 'Orbitron', 'Segoe UI', Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  pointer-events: none;
  z-index: 10000;
  text-align: center;
  animation: floatGently 2s ease-in-out infinite;
  /* Mobile-specific enhancements */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  opacity: 0.9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
}

.floating-text-persistent.success {
  color: #19ffb9;
  filter: drop-shadow(0 0 15px #19ffb9);
  text-shadow: 0 0 20px #19ffb9, 0 0 10px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);
}

.floating-text-persistent.failure {
  color: #ff4f65;
  filter: drop-shadow(0 0 15px #ff4f65);
  text-shadow: 0 0 20px #ff4f65, 0 0 10px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);
}

@keyframes floatGently {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
    opacity: 1;
  }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .floating-text-persistent {
    font-size: 16px;
  }
}