.player {
  background: radial-gradient(circle at 30% 30%, #73f5ff 10%, var(--player) 60%);
  color: #001c2f;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  box-shadow: 
    var(--player-glow),
    0 0 30px rgba(60, 239, 255, 0.4),
    inset 0 0 15px rgba(60, 239, 255, 0.2);
  border: 2px solid #1a2a4e;
  margin: auto;
  font-family: 'Audiowide', 'Orbitron', 'Segoe UI', Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px #3cefff, 0 0 8px #fff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
  position: relative;
  z-index: 10;
}

.player.jumping {
  animation: tokenJump 0.25s ease-out;
  z-index: 100 !important;
  will-change: transform;
  transform-style: preserve-3d;
}

.player.impact {
  animation: tokenImpact 0.2s ease-out;
  z-index: 30 !important;
}

.player::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(60, 239, 255, 0.4);
  z-index: -1;
}

.enemy {
  background: radial-gradient(circle at 30% 30%, #ff86a3 10%, var(--enemy) 60%);
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05em;
  border: 2px solid #3a1c29;
  margin: auto;
  box-shadow: 
    var(--enemy-glow),
    0 0 30px rgba(255, 62, 107, 0.4),
    inset 0 0 15px rgba(255, 62, 107, 0.2);
  font-family: 'Audiowide', 'Orbitron', 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px #ff3e6b, 0 0 8px #fff;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.enemy.jumping {
  animation: tokenJump 0.15s ease-out;
  z-index: 100 !important;
  will-change: transform;
  transform-style: preserve-3d;
}

.enemy.impact {
  animation: tokenImpact 0.12s ease-out;
  z-index: 30 !important;
}

.enemy.spawning {
  animation: enemySpawn 0.4s ease-out;
  z-index: 90 !important;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.enemy.crystallize {
  animation: enemyCrystallize 0.6s ease-out forwards;
  z-index: 95 !important;
  will-change: transform, filter, background;
  isolation: isolate;
}

.enemy.shatter {
  animation: enemyShatter 0.5s ease-in forwards;
  z-index: 120 !important;
  will-change: transform, opacity, clip-path;
  isolation: isolate;
}

.enemy.hovering {
  animation: tokenJumpExtended 0.8s ease-out;
  z-index: 85 !important;
  will-change: transform;
}

.player, .enemy {
  z-index: 30 !important; /* Always above all board elements including portals */
  position: absolute;
  left: 50%; top: 50%;
  transform: translate3d(-50%, -50%, 0); /* Force GPU acceleration */
  
  /* HARDWARE ACCELERATION HINTS */
  will-change: transform, opacity, filter; /* These properties change during animations */
  backface-visibility: hidden; /* Prevent flicker during animations */
  
  /* CONTAINER ISOLATION FOR SMOOTH ANIMATIONS */
  isolation: isolate; /* Create stacking context for animation layers */
  
  /* PERFORMANCE OPTIMIZATIONS */
  contain: layout; /* Layout containment for performance, but allow paint for effects */
}

.player.defeated {
  animation: playerDefeat 1.5s forwards;
  z-index: 100 !important;
  /* HARDWARE ACCELERATION FOR DEFEAT ANIMATION */
  will-change: transform, opacity, filter, background; /* Accelerate all changing properties */
  isolation: isolate; /* Isolate for complex visual effects */
  transform-style: preserve-3d; /* Maintain 3D context */
}

.player.meditating {
  animation: playerMeditate 1.2s ease-in-out;
  /* HARDWARE ACCELERATION FOR MEDITATION */
  will-change: transform, box-shadow, filter; /* Accelerate meditation effects */
  isolation: isolate; /* Isolate for glow effects */
}

.player.bleeding {
  animation: playerBleed 0.8s ease-in-out;
  /* HARDWARE ACCELERATION FOR BLEEDING EFFECT */
  will-change: transform, filter, box-shadow; /* Accelerate damage effects */
}

/* Character-specific styles */
.player.Monk {
  background: radial-gradient(circle at 30% 30%, #FFD38C 10%, #FF8C00 60%);
  color: #4F2C00;
  border: 2px solid #4E361A;
  box-shadow: 0 0 14px #FF8C00, 0 0 24px #FF7F0088;
  text-shadow: 0 0 16px #FF8C00, 0 0 8px #fff;
}

.player.Archer {
  background: radial-gradient(circle at 30% 30%, #ff86d1 10%, #ff00aa 60%);
  color: #4F2C00;
  border: 2px solid #4e1a3a;
  box-shadow: 0 0 14px #ff00aa, 0 0 24px #ff009988;
  text-shadow: 0 0 16px #ff00aa, 0 0 8px #fff;
}

.player.Bandit {
  background: radial-gradient(circle at 30% 30%, #8FDD8F 10%, #1B5E20 60%);
  color: #000000;
  border: 2px solid #0F2F10;
  box-shadow: 0 0 14px #1B5E20, 0 0 24px #1B5E2088;
  text-shadow: 0 0 16px #1B5E20, 0 0 8px #fff;
}

.player.Guardian {
  background: radial-gradient(circle at 30% 30%, #8CEBFF 10%, #1E5799 60%);
  color: #000000;
  border: 2px solid #0D2C5A;
  box-shadow: 0 0 14px #1E5799, 0 0 24px #1E579988;
  text-shadow: 0 0 16px #1E5799, 0 0 8px #fff;
}

.player.Priest {
  background: radial-gradient(circle at 30% 30%, #FFFDE7 10%, #FFD700 60%);
  color: #4F2C00;
  border: 2px solid #B8860B;
  box-shadow: 0 0 14px #FFD700, 0 0 24px #FFD70088;
  text-shadow: 0 0 16px #FFD700, 0 0 8px #fff;
}

.player.Barbarian {
  background: radial-gradient(circle at 30% 30%, #FF9999 10%, #8B0000 60%);
  color: #000000;
  border: 2px solid #4B0000;
  box-shadow: 0 0 14px #8B0000, 0 0 24px #8B000088;
  text-shadow: 0 0 16px #8B0000, 0 0 8px #fff;
}

.player.Wizard {
  background: radial-gradient(circle at 30% 30%, #E0FFFF 10%, #00CED1 40%, #006666 70%);
  color: #000000;
  border: 2px solid #00CED1;
  box-shadow: 0 0 14px #00CED1, 0 0 24px #00CED188;
  text-shadow: 0 0 16px #00CED1, 0 0 8px #fff;
}

.player.Mage {
  background: radial-gradient(circle at 30% 30%, #E8BFFF 10%, #6B46C1 40%, #4C1D95 70%);
  color: #000000;
  border: 2px solid #7C3AED;
  box-shadow: 0 0 14px #7C3AED, 0 0 24px #7C3AED88;
  text-shadow: 0 0 16px #7C3AED, 0 0 8px #fff;
}

.player.Sinreaper {
  background: radial-gradient(circle at 30% 30%, #C0C0C0 10%, #808080 40%, #404040 70%);
  color: #FFFFFF;
  border: 2px solid #808080;
  box-shadow: 0 0 14px #808080, 0 0 24px #80808088;
  text-shadow: 0 0 16px #808080, 0 0 8px #fff;
}

.player.Joker {
  background: radial-gradient(circle at 30% 30%, #90EE90 10%, #32CD32 40%, #228B22 70%);
  color: #000000;
  border: 2px solid #32CD32;
  box-shadow: 0 0 14px #32CD32, 0 0 24px #32CD3288, 0 0 8px #DC143C;
  text-shadow: 0 0 16px #32CD32, 0 0 8px #fff;
}

.player.Samurai {
  background: radial-gradient(circle at 30% 30%, #FF6347 10%, #DC143C 40%, #8B0000 70%);
  color: #FFFFFF;
  border: 2px solid #DC143C;
  box-shadow: 0 0 14px #DC143C, 0 0 24px #DC143C88;
  text-shadow: 0 0 16px #DC143C, 0 0 8px #fff;
}

.player.Sinreaper.ready {
  border-color: #333333;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}

.player.Joker.ready {
  border-color: #228B22;
  box-shadow: 0 0 12px #32CD32, 0 0 8px #DC143C;
}

.player.Sinreaper.activating {
  animation: sinreaperCasting 0.6s ease-in-out;
  transform-origin: center;
}

.player.Joker.activating {
  animation: jokerMoving 0.6s ease-in-out;
  transform-origin: center;
}

.player.Sinreaper.sweeping {
  animation: sinreaperSweep 0.8s ease-in-out;
}

.player.Joker.moving {
  animation: jokerChessMove 0.8s ease-in-out;
}

/* Sinreaper button styling */
.sinreaper-btn {
  background: linear-gradient(135deg, rgba(128, 128, 128, 0.8), rgba(192, 192, 192, 0.9));
  border: 2px solid rgba(128, 128, 128, 0.6);
  color: #FFFFFF;
}

/* Joker button styling */
.joker-btn {
  background: linear-gradient(135deg, rgba(50, 205, 50, 0.8), rgba(144, 238, 144, 0.9));
  border: 2px solid rgba(50, 205, 50, 0.6);
  color: #000000;
  text-shadow: 0 0 4px #32CD32;
}

.sinreaper-cooldown {
  color: #808080;
  background: rgba(128, 128, 128, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-top: 4px;
}

.joker-pattern-info {
  color: #32CD32;
  background: rgba(50, 205, 50, 0.2);
  border: 1px solid rgba(50, 205, 50, 0.4);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-top: 4px;
  text-align: center;
}

/* Character selection indicator */
.cell.selected .player {
  transform: scale(1.15);
  z-index: 25 !important; /* Updated to match new hierarchy - above portal cooldown text */
}

/* Prevent Wolf from inheriting selected cell animation unless actually selected */
.cell.selected .player.Wolf:not(.selected) {
  transform: none !important;
  animation: wolfIdle 3s ease-in-out infinite !important;
}

.cell.selected {
  background: #202b55;
  border-color: var(--primary);
  z-index: 24 !important; /* Updated to match new hierarchy - below selected character but above portal cooldown */
  box-shadow: 0 0 18px var(--primary), 0 0 9px #00e2ff88;
  transform: scale(1.05);
}

.player.Monk.activating {
  animation: meditateEffect 0.8s ease-in-out;
}

.player.Archer.activating {
  animation: ArcherEffect 0.5s ease-in-out;
}

.player.Bandit.activating {
  animation: BanditEffect 0.5s ease-in-out;
}

.player.Guardian.activating {
  animation: GuardianCounterEffect 0.5s ease-in-out;
}

.player.Barbarian.berserking {
  animation: berserkEffect 0.8s ease-in-out;
}

.player.Wizard.activating {
  animation: WizardEffect 0.5s ease-in-out;
}

.player.Mage.activating {
  animation: MageEffect 0.5s ease-in-out;
}

/* Decoration containers for characters */
.player::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: -1;
}

.player.Monk::before {
  background-image: url('../svg/monk-decoration.svg');
}

.player.Archer::before {
  background-image: url('../svg/archer-decoration.svg');
}

.player.Bandit::before {
  background-image: url('../svg/bandit-decoration.svg');
}

.player.Guardian::before {
  background-image: url('../svg/guardian-decoration.svg');
}

.player.Priest::before {
  background-image: url('../svg/priest-decoration.svg');
}

.player.Barbarian::before {
  background-image: url('../svg/barbarian-decoration.svg');
}

.player.Wizard::before {
  background-image: url('../svg/wizard-decoration.svg');
}

.player.Mage::before {
  background-image: url('../svg/mage-decoration.svg');
}

.player.Sinreaper::before {
  background-image: url('../svg/sinreaper-decoration.svg');
}

.player.Joker::before {
  background-image: url('../svg/joker-decoration.svg');
}

.player.Samurai::before {
  background-image: url('../svg/samurai-decoration.svg');
}

/* Character stats styling */
.character-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.character-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.Monk-stats .char-number {
  color: #FF8C00;
  text-shadow: 0 0 8px #FF8C00;
}

.Archer-stats .char-number {
  color: #ff00aa;
  text-shadow: 0 0 8px #ff00aa;
}

.Bandit-stats .char-number {
  color: #1B5E20;
  text-shadow: 0 0 8px #1B5E20;
}

.Guardian-stats .char-number {
  color: #1E5799;
  text-shadow: 0 0 8px #1E5799;
}

.Priest-stats .char-number {
  color: #FFD700;
  text-shadow: 0 0 8px #FFD700;
}

.Barbarian-stats .char-number {
  color: #DC143C;
  text-shadow: 0 0 8px #DC143C;
}

.Wizard-stats .char-number {
  color: #00CED1;
  text-shadow: 0 0 8px #00CED1;
}

.Mage-stats .char-number {
  color: #7C3AED;
  text-shadow: 0 0 8px #7C3AED;
}

.Sinreaper-stats .char-number {
  color: #808080;
  text-shadow: 0 0 8px #808080;
}

.Joker-stats .char-number {
  color: #32CD32;
  text-shadow: 0 0 8px #32CD32;
}

.Samurai-stats .char-number {
  color: #DC143C;
  text-shadow: 0 0 8px #DC143C;
}

.char-icon {
  font-size: 24px;
}

.char-number {
  font-size: 22px;
  font-weight: bold;
  font-family: 'Audiowide', cursive;
}

/* Character specific styling for game board */
.Monk-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #19ffb9);
}

.Archer-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #ff00aa);
}

.Bandit-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #1B5E20);
}

.Guardian-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #1E5799);
}

.Priest-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #FFD700);
}

.Barbarian-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #DC143C);
}

.Wizard-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #00CED1);
}

.Mage-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #7C3AED);
}

.Sinreaper-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #808080);
}

.Joker-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #32CD32);
}

.Samurai-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #DC143C);
}

.character-svg {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto;
}

.character-svg-small {
  width: 30px;
  height: 30px;
  display: block;
}

.character-svg-tiny {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.character-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

/* Arrow projectile styling */
.arrow-projectile {
  position: absolute;
  width: 40px;
  height: 12px;
  background-image: url('../svg/arrow-projectile.svg');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 150;
  pointer-events: none;
  /* Center the arrow properly */
  margin-left: -20px;
  margin-top: -6px;
  filter: drop-shadow(0 0 8px rgba(255, 0, 170, 0.5));
  transform-origin: center center;
  transition: opacity 0.05s linear;
}

/* Counter link effect for Guardian ability */
.counter-link {
  position: absolute;
  height: 2px;
  background: linear-gradient(to right, rgba(30, 87, 153, 0.1), rgba(30, 87, 153, 0.8), rgba(30, 87, 153, 0.1));
  box-shadow: 0 0 10px #1E5799, 0 0 5px #3D7EFF;
  z-index: 100;
  pointer-events: none;
  animation: counterLinkEffect 0.8s ease-out forwards;
}

/* Mobile touch feedback for players */
.player:active {
  transform: translate(-50%, -50%) scale(1.1);
  filter: brightness(1.3) saturate(1.3);
  box-shadow: 
    0 0 40px rgba(60, 239, 255, 0.8),
    0 0 60px rgba(60, 239, 255, 0.5),
    inset 0 0 20px rgba(60, 239, 255, 0.3);
}

/* Mobile touch feedback for enemies */
.enemy:active {
  transform: translate(-50%, -50%) scale(1.1);
  filter: brightness(1.3) saturate(1.3);
  box-shadow: 
    0 0 40px rgba(255, 62, 107, 0.8),
    0 0 60px rgba(255, 62, 107, 0.5),
    inset 0 0 20px rgba(255, 62, 107, 0.3);
}

/* Enhanced number display with glow */
.player .number, .enemy .number {
  font-size: 1.4em;
  font-weight: 900;
  text-align: center;
  z-index: 1;
  font-family: 'Audiowide', 'Orbitron', 'Segoe UI', Arial, sans-serif;
  user-select: none;
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 5px rgba(0, 0, 0, 0.8);
  /* Add animation for value changes */
  transition: transform 0.3s ease;
}

/* Value change animation */
.player .number.value-increase {
  animation: valueIncrease 0.6s ease;
}

.player .number.value-decrease {
  animation: valueDecrease 0.6s ease;
}

@keyframes valueIncrease {
  0% { transform: scale(1); color: #3cefff; }
  50% { transform: scale(1.3); color: #19ffb9; }
  100% { transform: scale(1); color: #3cefff; }
}

@keyframes valueDecrease {
  0% { transform: scale(1); color: #3cefff; }
  50% { transform: scale(0.8); color: #ff4f65; }
  100% { transform: scale(1); color: #3cefff; }
}

/* Enhanced character movement animation */
.player.moving {
  animation: moveSuccess 0.4s ease;
  /* HARDWARE ACCELERATION FOR MOVEMENT SUCCESS */
  will-change: transform, filter; /* Accelerate scaling and brightness effects */
  transform-style: preserve-3d; /* Smooth scaling during success animation */
}

.enemy.moving {
  animation: moveSuccess 0.3s ease;
  /* HARDWARE ACCELERATION FOR ENEMY MOVEMENT SUCCESS */
  will-change: transform, filter; /* Accelerate scaling and brightness effects */
  transform-style: preserve-3d; /* Smooth scaling during success animation */
}

/* Enhanced attack animations */
.player.attacking {
  animation: attackSuccess 0.5s ease;
  /* HARDWARE ACCELERATION FOR ATTACK ANIMATIONS */
  will-change: transform, filter; /* Accelerate rotation, scaling, and filter effects */
  transform-style: preserve-3d; /* Smooth rotation and scaling during attack */
}

.enemy.attacking {
  animation: attackSuccess 0.4s ease;
  /* HARDWARE ACCELERATION FOR ENEMY ATTACK ANIMATIONS */
  will-change: transform, filter; /* Accelerate rotation, scaling, and filter effects */
  transform-style: preserve-3d; /* Smooth rotation and scaling during attack */
}

/* Enhanced damage feedback */
.player.taking-damage {
  animation: damageShake 0.3s ease, playerBleed 0.5s ease;
  /* HARDWARE ACCELERATION FOR DAMAGE ANIMATIONS */
  will-change: transform, filter, box-shadow; /* Accelerate shake, filter, and glow effects */
  transform-style: preserve-3d; /* Smooth shake and transformation effects */
}

.enemy.taking-damage {
  animation: damageShake 0.25s ease;
  /* HARDWARE ACCELERATION FOR ENEMY DAMAGE */
  will-change: transform; /* Accelerate shake effects */
  transform-style: preserve-3d; /* Smooth shake animation */
}

/* Enhanced ability visual effects */
.player.using-ability {
  animation: abilityActivate 0.7s ease;
  /* HARDWARE ACCELERATION FOR ABILITY ACTIVATION */
  will-change: transform, box-shadow; /* Accelerate scaling and glow effects */
  transform-style: preserve-3d; /* Smooth scaling during ability use */
  isolation: isolate; /* Isolate for complex glow effects */
}

.player.using-ability::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.6), transparent);
  transform: translate(-50%, -50%);
  animation: abilityRing 1s ease;
}

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

/* Enhanced crystallization effect */
.enemy.crystallizing {
  animation: enemyCrystallize 1.2s ease forwards;
}

.enemy.crystallizing::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  right: -20%;
  bottom: -20%;
  background: radial-gradient(circle, rgba(200, 255, 255, 0.6), transparent);
  animation: crystallizeGlow 1.2s ease;
}

@keyframes crystallizeGlow {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Enhanced shatter effect */
.enemy.shattering {
  animation: enemyShatter 0.8s ease forwards, screenShakeDramatic 0.6s ease;
}

/* Mobile-optimized character icons */
.char-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 8px currentColor);
}

/* Enhanced character glow on selection */
.player.selected {
  z-index: 25 !important; /* Increased from 15 to 25 - now above portal cooldown text (20) */
  box-shadow: 
    0 0 40px rgba(60, 239, 255, 0.9),
    0 0 60px rgba(60, 239, 255, 0.6),
    0 0 80px rgba(60, 239, 255, 0.3),
    inset 0 0 20px rgba(60, 239, 255, 0.4);
  animation: selectedCharacterPulse 2s infinite ease-in-out;
  
  /* HARDWARE ACCELERATION FOR SELECTION GLOW */
  will-change: transform, box-shadow, filter; /* Accelerate glow and pulse effects */
  transform-style: preserve-3d; /* Maintain 3D context for smooth scaling */
  isolation: isolate; /* Isolate for complex glow effects */
}

/* Override for Wolf to prevent unwanted selected animation */
.player.Wolf.selected {
  animation: selectedCharacterPulse 2s infinite ease-in-out !important;
}

.player.Wolf.ready:not(.selected) {
  animation: wolfIdle 3s ease-in-out infinite !important;
}

@keyframes selectedCharacterPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1.2);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    filter: brightness(1.5);
  }
}

/* Enhanced powerup collection visual */
.player.collecting-powerup {
  animation: powerupCollectMobile 0.8s ease;
}

/* Enhanced portal teleportation effect */
.player.teleporting, .enemy.teleporting {
  animation: portalTeleport 0.6s ease;
}

@keyframes portalTeleport {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(0.1) rotate(180deg);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
    opacity: 1;
  }
}

/* Enhanced victory animation */
.player.victory {
  animation: victoryPulseMobile 2s infinite ease-in-out;
}

/* Enhanced defeat animation */
.player.defeat {
  animation: playerDefeat 1.2s ease forwards;
}

/* Mobile-optimized combo effect */
.player.combo-active {
  box-shadow: 
    0 0 50px rgba(255, 215, 0, 0.8),
    0 0 70px rgba(255, 215, 0, 0.5),
    0 0 90px rgba(255, 215, 0, 0.3),
    inset 0 0 25px rgba(255, 215, 0, 0.4);
}

/* Enhanced rock push animation */
.player.pushing {
  filter: brightness(1.5) saturate(1.5);
  box-shadow: 
    0 0 40px rgba(160, 160, 255, 0.8),
    0 0 60px rgba(160, 160, 255, 0.5);
}

/* Allow clicks through SVG OBJECTS to parent buttons */
.character-select-btn object,
.character-value object {
  pointer-events: none;
}

.player.corpse {
  opacity: 0.5;
  filter: grayscale(0.7);
  animation: none !important;
}

/* Enhanced character ability activation states with hardware acceleration */
.player.activating {
  /* HARDWARE ACCELERATION FOR ABILITY ANIMATIONS */
  will-change: transform, filter, box-shadow; /* Accelerate ability visual effects */
  isolation: isolate; /* Isolate for complex visual effects */
  transform-style: preserve-3d; /* Maintain 3D context during abilities */
  z-index: 110 !important; /* Elevate above other characters during ability use */
}

.player.Monk.activating {
  animation: meditateEffect 0.8s ease-in-out;
  /* HARDWARE ACCELERATION FOR MEDITATION */
  will-change: transform, box-shadow, filter; /* Accelerate meditation effects */
  transform-style: preserve-3d; /* Smooth scaling during meditation */
}

.player.Archer.activating {
  animation: ArcherEffect 0.5s ease-in-out;
  /* HARDWARE ACCELERATION FOR ARCHER ABILITIES */
  will-change: transform; /* Accelerate rotation and scaling effects */
  transform-style: preserve-3d; /* Smooth rotational animations */
}

.player.Bandit.activating {
  animation: BanditEffect 0.5s ease-in-out;
  /* HARDWARE ACCELERATION FOR BANDIT ABILITIES */
  will-change: transform, opacity; /* Accelerate stealth effects */
  transform-style: preserve-3d; /* Smooth scaling and opacity changes */
}

.player.Guardian.activating {
  animation: GuardianCounterEffect 0.5s ease-in-out;
  /* HARDWARE ACCELERATION FOR GUARDIAN ABILITIES */
  will-change: transform, box-shadow, filter; /* Accelerate defensive glow effects */
  transform-style: preserve-3d; /* Smooth scaling and rotation */
}

.player.Barbarian.berserking {
  animation: berserkEffect 0.8s ease-in-out;
  /* HARDWARE ACCELERATION FOR BERSERK */
  will-change: transform, box-shadow; /* Accelerate rage effects */
  transform-style: preserve-3d; /* Smooth aggressive animations */
  z-index: 115 !important; /* Extra elevation for dramatic berserk effect */
}

.player.Wizard.activating {
  animation: WizardEffect 0.5s ease-in-out;
  /* HARDWARE ACCELERATION FOR WIZARD ABILITIES */
  will-change: transform, box-shadow, filter; /* Accelerate magical effects */
  transform-style: preserve-3d; /* Smooth magical transformations */
}

.player.Mage.activating {
  animation: MageEffect 0.5s ease-in-out;
  /* HARDWARE ACCELERATION FOR MAGE ABILITIES */
  will-change: transform, box-shadow, filter; /* Accelerate arcane effects */
  transform-style: preserve-3d; /* Smooth arcane transformations */
  isolation: isolate; /* Isolate complex magical effects */
}

/* Enhanced character pushing states with hardware acceleration */
.player.pushing-right {
  animation: characterPushRight 0.3s ease-out;
  /* HARDWARE ACCELERATION FOR PUSHING ANIMATIONS */
  will-change: transform; /* Accelerate directional pushing transforms */
  transform-style: preserve-3d; /* Smooth scaling and rotation during push */
}

.player.pushing-left {
  animation: characterPushLeft 0.3s ease-out;
  /* HARDWARE ACCELERATION FOR PUSHING ANIMATIONS */
  will-change: transform; /* Accelerate directional pushing transforms */
  transform-style: preserve-3d; /* Smooth scaling and rotation during push */
}

.player.pushing-up {
  animation: characterPushUp 0.3s ease-out;
  /* HARDWARE ACCELERATION FOR PUSHING ANIMATIONS */
  will-change: transform; /* Accelerate directional pushing transforms */
  transform-style: preserve-3d; /* Smooth scaling and rotation during push */
}

.player.pushing-down {
  animation: characterPushDown 0.3s ease-out;
  /* HARDWARE ACCELERATION FOR PUSHING ANIMATIONS */
  will-change: transform; /* Accelerate directional pushing transforms */
  transform-style: preserve-3d; /* Smooth scaling and rotation during push */
}

/* General pushing effect with hardware acceleration */
.player.pushing {
  box-shadow: 0 0 15px rgba(255, 200, 100, 0.6), 0 0 25px rgba(255, 200, 100, 0.3);
  filter: brightness(1.2) saturate(1.1);
  /* HARDWARE ACCELERATION FOR GENERAL PUSHING STATE */
  will-change: filter, box-shadow; /* Accelerate visual effects during pushing */
  isolation: isolate; /* Isolate for glow and brightness effects */
}

/* Sweep targeting visual effects */
.sweep-direction-indicator {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
  border: 2px solid #000000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  animation: sweepDirectionPulse 1.5s ease-in-out infinite;
}

.sweep-area-preview {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.2));
  border: 1px solid #333333;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
  animation: sweepAreaGlow 2s ease-in-out infinite;
}

/* Sinreaper death effects */
.enemy.sweep-death {
  animation: sweepDisintegration 0.8s ease-out forwards;
}

.sweep-particle {
  position: absolute;
  border-radius: 50%;
  z-index: 200;
  pointer-events: none;
}

.sweep-flash {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.8), transparent);
  z-index: 150;
  pointer-events: none;
  animation: sweepFlash 0.4s ease-out forwards;
}

/* Sinreaper animations */
@keyframes sinreaperCasting {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-5deg); }
  50% { transform: scale(1.15) rotate(5deg); }
  75% { transform: scale(1.1) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes sinreaperSweep {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.2) rotate(-15deg); }
  60% { transform: scale(1.3) rotate(15deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes sweepDirectionPulse {
  0% { 
    background: radial-gradient(circle, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  }
  50% { 
    background: radial-gradient(circle, rgba(0, 0, 0, 0.9), rgba(64, 64, 64, 0.5));
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  }
  100% { 
    background: radial-gradient(circle, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  }
}

@keyframes sweepAreaGlow {
  0% { 
    background: radial-gradient(circle, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.2));
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
  }
  50% { 
    background: radial-gradient(circle, rgba(0, 0, 0, 0.7), rgba(64, 64, 64, 0.4));
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9);
  }
  100% { 
    background: radial-gradient(circle, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.2));
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
  }
}

@keyframes sweepDisintegration {
  0% { 
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% { 
    transform: scale(1.2) rotate(180deg);
    opacity: 0.5;
    filter: blur(2px);
  }
  100% { 
    transform: scale(0.3) rotate(360deg);
    opacity: 0;
    filter: blur(5px);
  }
}

@keyframes sweepFlash {
  0% { 
    transform: scale(0.5);
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.2);
    opacity: 0.4;
  }
  100% { 
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes sweepDisintegrate {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(var(--end-x), var(--end-y));
    opacity: 0;
  }
}

/* Floating damage preview animations for Sinreaper */
.damage-preview.sweep-damage {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  text-shadow: 0 0 12px currentColor, 0 0 8px rgba(0, 0, 0, 1), 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  filter: drop-shadow(0 0 8px currentColor) !important;
  font-family: 'Audiowide', Arial, sans-serif !important;
  font-weight: bold !important;
  font-size: 16px !important;
  z-index: 200 !important;
  animation: sweepDamageFloat 2s ease-in-out infinite !important;
}

.cell.sweep-area-preview .damage-preview {
  position: absolute !important;
  top: 30% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 200 !important;
  pointer-events: none !important;
}

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

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

/* Joker movement indicator styling */
.joker-movement-indicator {
  border: 2px solid rgba(50, 205, 50, 0.8) !important;
  box-shadow: 
    inset 0 0 15px rgba(50, 205, 50, 0.3),
    0 0 10px rgba(50, 205, 50, 0.6) !important;
  animation: jokerMovementPulse 1.5s ease-in-out infinite;
  background: radial-gradient(circle, rgba(50, 205, 50, 0.2), rgba(144, 238, 144, 0.1)) !important;
}

.joker-knight-indicator {
  background: radial-gradient(circle, rgba(50, 205, 50, 0.3), rgba(144, 238, 144, 0.1)) !important;
  border-color: #32CD32 !important;
  box-shadow: 
    inset 0 0 15px rgba(50, 205, 50, 0.3),
    0 0 12px rgba(50, 205, 50, 0.7) !important;
}

.joker-rook-indicator {
  background: linear-gradient(45deg, 
    rgba(50, 205, 50, 0.25) 25%, 
    rgba(144, 238, 144, 0.15) 25%, 
    rgba(144, 238, 144, 0.15) 50%, 
    rgba(50, 205, 50, 0.25) 50%) !important;
  border-color: #228B22 !important;
  box-shadow: 
    inset 0 0 15px rgba(50, 205, 50, 0.3),
    0 0 12px rgba(50, 205, 50, 0.7) !important;
}

.joker-bishop-indicator {
  background: linear-gradient(135deg, 
    rgba(50, 205, 50, 0.3), 
    rgba(144, 238, 144, 0.1), 
    rgba(50, 205, 50, 0.3)) !important;
  border-color: #32CD32 !important;
  border-style: dashed;
  box-shadow: 
    inset 0 0 15px rgba(50, 205, 50, 0.3),
    0 0 12px rgba(50, 205, 50, 0.7) !important;
}

@keyframes jokerMovementPulse {
  0% { 
    border-color: rgba(50, 205, 50, 0.8);
    box-shadow: 
      inset 0 0 15px rgba(50, 205, 50, 0.3),
      0 0 10px rgba(50, 205, 50, 0.6);
  }
  50% { 
    border-color: rgba(50, 205, 50, 1.0);
    box-shadow: 
      inset 0 0 20px rgba(50, 205, 50, 0.5),
      0 0 15px rgba(50, 205, 50, 0.8),
      0 0 5px rgba(144, 238, 144, 0.6);
  }
  100% { 
    border-color: rgba(50, 205, 50, 0.8);
    box-shadow: 
      inset 0 0 15px rgba(50, 205, 50, 0.3),
      0 0 10px rgba(50, 205, 50, 0.6);
  }
}

/* Joker character specific styling */
.character-action-panel.joker .joker-btn {
  background: linear-gradient(135deg, #32CD32, #228B22);
  border: 2px solid #32CD32;
  color: white;
  transition: all 0.3s ease;
}

.character-action-panel.joker .joker-btn:disabled,
.character-action-panel.joker .joker-btn.cooldown-active {
  background: linear-gradient(135deg, #666666, #444444);
  border-color: #666666;
  color: #cccccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.character-action-panel.joker .cooldown-indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #dc143c;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  border: 2px solid white;
  animation: cooldownPulse 1.5s ease-in-out infinite;
}

.movement-pattern-info.joker-pattern-info {
  background: rgba(50, 205, 50, 0.1);
  border: 1px solid rgba(50, 205, 50, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
  font-size: 14px;
}

.movement-pattern-info.joker-pattern-info .current-pattern {
  color: #32CD32;
  margin-bottom: 8px;
}

.movement-pattern-info.joker-pattern-info .next-pattern {
  color: #90EE90;
  margin-bottom: 8px;
}

.movement-pattern-info.joker-pattern-info .cooldown-info {
  color: #DC143C;
  font-size: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(50, 205, 50, 0.2);
}

.movement-pattern-info.joker-pattern-info .pattern-desc {
  font-style: italic;
  opacity: 0.8;
  font-size: 12px;
  display: block;
  margin-top: 2px;
}

@keyframes cooldownPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes samuraiMoving {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    box-shadow: 0 0 14px #DC143C, 0 0 24px #DC143C88;
  }
  25% {
    transform: translate(-50%, -50%) scale(1.1) rotate(-5deg);
    box-shadow: 0 0 20px #DC143C, 0 0 35px #DC143C44;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
    box-shadow: 0 0 25px #DC143C, 0 0 40px #DC143C66;
  }
  75% {
    transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
    box-shadow: 0 0 20px #DC143C, 0 0 35px #DC143C44;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    box-shadow: 0 0 14px #DC143C, 0 0 24px #DC143C88;
  }
}

.player.Samurai.ready {
  border-color: #8B0000;
  box-shadow: 0 0 12px #DC143C;
}

.player.Samurai.activating {
  animation: samuraiMoving 0.6s ease-in-out;
  transform-origin: center;
}

/* Samurai button styling */
.samurai-btn {
  background: linear-gradient(135deg, rgba(220, 20, 60, 0.8), rgba(255, 99, 71, 0.9));
  border: 2px solid rgba(220, 20, 60, 0.6);
  color: #FFFFFF;
  text-shadow: 0 0 4px #DC143C;
}

/* ===================================================================
   SAMURAI ONITAMA CARD SYSTEM STYLING
   =================================================================== */

/* Tactica Cards Container */
.tactica-cards-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(220, 20, 60, 0.3);
  box-shadow: inset 0 0 10px rgba(220, 20, 60, 0.1);
}

/* Usable Cards Section */
.usable-cards {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Individual Tactica Card */
.tactica-card {
  background: linear-gradient(135deg, 
    rgba(14, 21, 48, 0.9) 0%, 
    rgba(25, 30, 55, 0.9) 50%,
    rgba(14, 21, 48, 0.9) 100%);
  border: 2px solid rgba(220, 20, 60, 0.4);
  border-radius: 8px;
  padding: 8px;
  min-width: 100px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  
  /* Touch optimizations */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  
  /* Hardware acceleration */
  will-change: transform, box-shadow, border-color;
  backface-visibility: hidden;
  isolation: isolate;
}

/* Selected Tactica Card */
.tactica-card.selected {
  border-color: rgba(220, 20, 60, 0.8);
  box-shadow: 
    0 0 20px rgba(220, 20, 60, 0.5),
    0 0 35px rgba(220, 20, 60, 0.3),
    inset 0 0 15px rgba(220, 20, 60, 0.2);
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, 
    rgba(25, 30, 55, 0.95) 0%, 
    rgba(35, 25, 50, 0.95) 50%,
    rgba(25, 30, 55, 0.95) 100%);
  animation: samuraiCardPulse 2s ease-in-out infinite;
}

.tactica-card:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(220, 20, 60, 0.4);
}

/* Card Name */
.card-name {
  font-family: 'Audiowide', cursive;
  font-size: 0.75em;
  font-weight: 600;
  color: #DC143C;
  text-align: center;
  margin-bottom: 4px;
  text-shadow: 0 0 6px rgba(220, 20, 60, 0.6);
  letter-spacing: 0.3px;
}

.tactica-card.selected .card-name {
  color: #FF6347;
  text-shadow: 0 0 12px rgba(255, 99, 71, 0.8);
}

/* Card Description */
.card-description {
  font-size: 0.65em;
  color: #C8E6FF;
  text-align: center;
  margin-top: 4px;
  opacity: 0.9;
  font-style: italic;
  line-height: 1.2;
}

.tactica-card.selected .card-description {
  color: #FFE4E1;
  opacity: 1;
}

/* Deck Cards Section */
.deck-cards {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(220, 20, 60, 0.2);
}

/* Deck Card (smaller, non-interactive) */
.deck-card {
  opacity: 0.6;
  min-width: 60px;
  padding: 4px;
  cursor: default;
  pointer-events: none;
  transform: scale(0.75);
}

.deck-card .card-name {
  font-size: 0.7em;
  margin-bottom: 3px;
}

.deck-card .card-description {
  display: none; /* Hide description for deck cards to save space */
}

/* Small Pattern Grid for Deck Cards */
.card-pattern-small {
  display: flex;
  justify-content: center;
  margin: 2px 0;
}

.pattern-grid-small {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(220, 20, 60, 0.2);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.2);
  padding: 1px;
}

.pattern-cell-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  font-size: 5px;
  font-weight: bold;
  background: rgba(30, 30, 50, 0.3);
  border: 1px solid rgba(100, 100, 120, 0.2);
}

.pattern-cell-small.center {
  background: rgba(220, 20, 60, 0.6);
  color: #FFE4E1;
  border-color: rgba(220, 20, 60, 0.4);
}

.pattern-cell-small.movable {
  background: rgba(255, 99, 71, 0.5);
  color: #FFFFFF;
  border-color: rgba(255, 99, 71, 0.3);
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .tactica-cards-container {
    padding: 6px;
    gap: 6px;
  }
  
  .usable-cards {
    gap: 6px;
  }
  
  .tactica-card {
    min-width: 90px;
    padding: 6px;
  }
  
  .card-name {
    font-size: 0.7em;
    margin-bottom: 3px;
  }
  
  .card-description {
    font-size: 0.6em;
    margin-top: 3px;
  }
  
  .deck-cards {
    gap: 3px;
  }
  
  .deck-card {
    min-width: 50px;
    padding: 4px;
    transform: scale(0.7);
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .tactica-card {
    min-width: 80px;
    padding: 5px;
  }
  
  .deck-card {
    min-width: 45px;
    transform: scale(0.65);
  }
}

/* Ultra-small screens (like small action panels) */
@media (max-width: 320px) {
  .tactica-cards-container {
    padding: 4px;
    gap: 4px;
  }
  
  .tactica-card {
    min-width: 70px;
    padding: 4px;
  }
  
  .card-name {
    font-size: 0.65em;
    margin-bottom: 2px;
  }
  
  .card-description {
    font-size: 0.55em;
    margin-top: 2px;
  }
  
  .deck-card {
    min-width: 40px;
    padding: 3px;
    transform: scale(0.6);
  }
}

/* PORTRAIT MODE: Make Tactica cards bigger for better touch interaction */
@media (orientation: portrait) {
  .tactica-cards-container {
    padding: 10px;
    gap: 10px;
  }
  
  .usable-cards {
    gap: 8px;
  }
  
  .tactica-card {
    min-width: 120px;
    padding: 10px;
  }
  
  .card-name {
    font-size: 0.85em;
    margin-bottom: 6px;
  }
  
  .card-description {
    font-size: 0.7em;
    margin-top: 6px;
  }
  
  .deck-cards {
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
  }
  
  .deck-card {
    min-width: 70px;
    padding: 6px;
    transform: scale(0.8);
  }
}

/* PORTRAIT MODE on smaller devices: Scale down slightly but still bigger than landscape */
@media (orientation: portrait) and (max-width: 480px) {
  .tactica-card {
    min-width: 110px;
    padding: 8px;
  }
  
  .deck-card {
    min-width: 65px;
    transform: scale(0.75);
  }
}

/* PORTRAIT MODE on very small devices: Still bigger than landscape equivalent */
@media (orientation: portrait) and (max-width: 360px) {
  .tactica-card {
    min-width: 100px;
    padding: 7px;
  }
  
  .deck-card {
    min-width: 60px;
    transform: scale(0.7);
  }
}

/* ===================================================================
   SAMURAI MOVEMENT AND ATTACK INDICATORS
   =================================================================== */

/* Base Samurai Movement Indicator */
.samurai-movement-indicator {
  position: relative;
  z-index: 60; /* Increased from 50 to 60 - well above portal cooldown text (20) */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Movement Indicator (empty spaces) */
.samurai-move-indicator {
  background: rgba(255, 165, 0, 0.25) !important;
  border: 2px solid rgba(255, 165, 0, 0.6) !important;
  box-shadow: 
    inset 0 0 15px rgba(255, 165, 0, 0.3),
    0 0 15px rgba(255, 165, 0, 0.4) !important;
  animation: samuraiMovePulse 2s ease-in-out infinite;
}

/* Attack Indicator (enemy targets) */
.samurai-attack-indicator {
  background: rgba(220, 20, 60, 0.3) !important;
  border: 2px solid rgba(220, 20, 60, 0.8) !important;
  box-shadow: 
    inset 0 0 20px rgba(220, 20, 60, 0.4),
    0 0 20px rgba(220, 20, 60, 0.6),
    0 0 35px rgba(220, 20, 60, 0.3) !important;
  animation: samuraiAttackPulse 1.5s ease-in-out infinite;
}

/* Attack indicator with sword overlay */
.samurai-attack-indicator::before {
  content: '⚔️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  font-size: 24px;
  z-index: 60;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.8);
  animation: samuraiSwordRotate 2s linear infinite;
}

/* ===================================================================
   SAMURAI PARTICLE EFFECTS
   =================================================================== */

/* Samurai Attack Particle */
.samurai-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  background: linear-gradient(45deg, #DC143C, #FFD700);
  box-shadow: 0 0 8px currentColor;
  
  /* Hardware acceleration */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Samurai Flash Effect */
.samurai-flash {
  position: fixed;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, 
    rgba(220, 20, 60, 0.8) 0%, 
    rgba(255, 215, 0, 0.6) 40%, 
    transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  animation: samuraiFlash 0.3s ease-out forwards;
}

/* ===================================================================
   SAMURAI ANIMATIONS
   =================================================================== */

@keyframes samuraiCardPulse {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(220, 20, 60, 0.5),
      0 0 35px rgba(220, 20, 60, 0.3),
      inset 0 0 15px rgba(220, 20, 60, 0.2);
  }
  50% {
    box-shadow: 
      0 0 25px rgba(220, 20, 60, 0.7),
      0 0 45px rgba(220, 20, 60, 0.5),
      inset 0 0 20px rgba(220, 20, 60, 0.3);
  }
}

@keyframes samuraiMovePulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
    box-shadow: 
      inset 0 0 15px rgba(255, 165, 0, 0.3),
      0 0 15px rgba(255, 165, 0, 0.4);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
    box-shadow: 
      inset 0 0 20px rgba(255, 165, 0, 0.4),
      0 0 20px rgba(255, 165, 0, 0.6);
  }
}

@keyframes samuraiAttackPulse {
  0%, 100% {
    opacity: 0.8;
    box-shadow: 
      inset 0 0 20px rgba(220, 20, 60, 0.4),
      0 0 20px rgba(220, 20, 60, 0.6),
      0 0 35px rgba(220, 20, 60, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 
      inset 0 0 25px rgba(220, 20, 60, 0.6),
      0 0 25px rgba(220, 20, 60, 0.8),
      0 0 45px rgba(220, 20, 60, 0.5);
  }
}

@keyframes samuraiSwordRotate {
  0% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(405deg);
  }
}

@keyframes samuraiFlash {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

/* CSS custom animation for samurai slash particles */
@keyframes samuraiSlash {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    transform: translate(var(--end-x), var(--end-y)) rotate(180deg);
    opacity: 0;
  }
}

/* ===================================================================
   SAMURAI CHARACTER PANEL STYLING
   =================================================================== */

/* Samurai-specific action panel styling */
.character-action-panel.samurai .character-action-btn:not(:disabled) {
  border-color: rgba(220, 20, 60, 0.4);
  background: linear-gradient(135deg, 
    rgba(25, 20, 48, 0.9) 0%, 
    rgba(35, 15, 35, 0.9) 100%);
}

.character-action-panel.samurai .character-action-btn:not(:disabled):active {
  border-color: rgba(220, 20, 60, 0.7);
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(220, 20, 60, 0.4);
  background: linear-gradient(135deg, 
    rgba(35, 15, 35, 0.95) 0%, 
    rgba(45, 20, 40, 0.95) 100%);
}

/* ===================================================================
   RESPONSIVE DESIGN FOR SAMURAI CARDS
   =================================================================== */

/* Mobile optimizations */
@media (max-width: 480px) {
  .tactica-cards-container {
    padding: 6px;
    gap: 6px;
  }
  
  .usable-cards {
    gap: 6px;
  }
  
  .tactica-card {
    min-width: 90px;
    padding: 6px;
  }
  
  .card-name {
    font-size: 0.7em;
    margin-bottom: 3px;
  }
  
  .card-description {
    font-size: 0.6em;
    margin-top: 3px;
  }
  
  .deck-cards {
    gap: 3px;
  }
  
  .deck-card {
    min-width: 50px;
    padding: 4px;
    transform: scale(0.7);
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .tactica-card {
    min-width: 80px;
    padding: 5px;
  }
  
  .deck-card {
    min-width: 45px;
    transform: scale(0.65);
  }
}

/* Enhanced cell selection highlighting */
.cell.selected .player {
  /* Character-specific styling will be applied */
  z-index: 25 !important; /* Ensure selected character is above everything */
}

.cell.selected {
  z-index: 24 !important; /* Increased from 8 to 24 - below selected character but above portal cooldown */
  border-color: rgba(60, 239, 255, 0.8) !important;
  box-shadow: 
    0 0 25px rgba(60, 239, 255, 0.6),
    inset 0 0 15px rgba(60, 239, 255, 0.3) !important;
  transform: scale(1.02);
}

/* Samurai Cooldown Styles */
.samurai-cooldown {
  color: #ff6b6b;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
  padding: 8px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 8px;
  animation: cooldownPulse 2s ease-in-out infinite;
}

@keyframes cooldownPulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* Disabled Tactica Cards Container */
.tactica-cards-container.cooldown-disabled {
  position: relative;
  opacity: 0.4;
  filter: grayscale(80%);
  pointer-events: none;
}

.cooldown-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ff6b6b;
  font-weight: bold;
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border-radius: 12px;
  border: 2px solid rgba(255, 107, 107, 0.6);
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
}

.cooldown-message {
  font-size: 16px;
  margin-bottom: 5px;
  text-shadow: 0 0 8px rgba(255, 107, 107, 0.8);
}

.cooldown-turns {
  font-size: 14px;
  color: #ffaa00;
  animation: cooldownTurnsBlink 1.5s ease-in-out infinite;
}

@keyframes cooldownTurnsBlink {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 12px rgba(255, 170, 0, 0.8);
  }
}

/* Samurai Pattern Info Styling */
.samurai-pattern-info {
  background: rgba(220, 20, 60, 0.1);
  border: 1px solid rgba(220, 20, 60, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-top: 15px;
  font-size: 13px;
  line-height: 1.4;
}

.samurai-pattern-info .cooldown-info {
  color: #dc143c;
  font-weight: bold;
  margin-bottom: 5px;
}

.samurai-pattern-info .pattern-desc {
  color: #e0e0e0;
  font-style: italic;
}

/* Joker animation keyframes */
@keyframes jokerMoving {
  0% { 
    transform: scale(1) rotate(0deg);
    filter: brightness(1.2);
  }
  25% { 
    transform: scale(1.1) rotate(-5deg);
    filter: brightness(1.4);
  }
  50% { 
    transform: scale(1.15) rotate(5deg);
    filter: brightness(1.6);
    box-shadow: 0 0 20px #32CD32, 0 0 30px #32CD3288, 0 0 10px #228B22;
  }
  75% { 
    transform: scale(1.1) rotate(-2deg);
    filter: brightness(1.4);
  }
  100% { 
    transform: scale(1) rotate(0deg);
    filter: brightness(1.2);
  }
}

@keyframes jokerChessMove {
  0% { 
    transform: scale(1);
    opacity: 1;
  }
  25% { 
    transform: scale(1.2);
    opacity: 0.8;
    filter: blur(1px);
  }
  50% { 
    transform: scale(0.8);
    opacity: 0.6;
    filter: blur(2px);
  }
  75% { 
    transform: scale(1.1);
    opacity: 0.9;
    filter: blur(0.5px);
  }
  100% { 
    transform: scale(1);
    opacity: 1;
    filter: blur(0px);
  }
}

/* Joker movement indicator overrides - ensure apple green colors always take priority */
.cell.possible-move.joker-movement-indicator,
.cell.joker-movement-indicator.possible-move {
  border: 2px solid rgba(50, 205, 50, 0.8) !important;
  background: radial-gradient(circle, rgba(50, 205, 50, 0.2), rgba(144, 238, 144, 0.1)) !important;
  box-shadow: 
    inset 0 0 15px rgba(50, 205, 50, 0.3),
    0 0 10px rgba(50, 205, 50, 0.6) !important;
  animation: jokerMovementPulse 1.5s ease-in-out infinite !important;
}

.cell.possible-move.joker-knight-indicator,
.cell.joker-knight-indicator.possible-move {
  background: radial-gradient(circle, rgba(50, 205, 50, 0.3), rgba(144, 238, 144, 0.1)) !important;
  border-color: #32CD32 !important;
  box-shadow: 
    inset 0 0 15px rgba(50, 205, 50, 0.3),
    0 0 12px rgba(50, 205, 50, 0.7) !important;
}

.cell.possible-move.joker-rook-indicator,
.cell.joker-rook-indicator.possible-move {
  background: linear-gradient(45deg, 
    rgba(50, 205, 50, 0.25) 25%, 
    rgba(144, 238, 144, 0.15) 25%, 
    rgba(144, 238, 144, 0.15) 50%, 
    rgba(50, 205, 50, 0.25) 50%) !important;
  border-color: #228B22 !important;
  box-shadow: 
    inset 0 0 15px rgba(50, 205, 50, 0.3),
    0 0 12px rgba(50, 205, 50, 0.7) !important;
}

.cell.possible-move.joker-bishop-indicator,
.cell.joker-bishop-indicator.possible-move {
  background: linear-gradient(135deg, 
    rgba(50, 205, 50, 0.3), 
    rgba(144, 238, 144, 0.1), 
    rgba(50, 205, 50, 0.3)) !important;
  border-color: #32CD32 !important;
  border-style: dashed;
  box-shadow: 
    inset 0 0 15px rgba(50, 205, 50, 0.3),
    0 0 12px rgba(50, 205, 50, 0.7) !important;
}

/* ===================================================================
   DRUID CHARACTER STYLING
   =================================================================== */

/* Base Druid styling */
.player.Druid {
  background: linear-gradient(135deg, #228B22, #32CD32);
  border-color: #228B22;
}

/* Druid decoration */
.player.Druid::before {
  background-image: url('../svg/druid-decoration.svg');
}

/* Druid stats styling */
.Druid-stats .char-number {
  color: #32CD32 !important;
  text-shadow: 0 0 10px rgba(34, 139, 34, 0.8);
}

.Druid-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #228B22);
}

/* Druid animations */
@keyframes druidCasting {
  0% { transform: scale(1); filter: brightness(1); }
  25% { transform: scale(1.05); filter: brightness(1.2); }
  50% { transform: scale(1.1); filter: brightness(1.4) hue-rotate(20deg); }
  75% { transform: scale(1.05); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

.player.Druid.ready {
  box-shadow: 0 0 15px #32CD32, 0 0 20px #228B22;
}

.player.Druid.activating {
  animation: druidCasting 0.8s ease-in-out;
}

/* Druid button styling */
.druid-btn {
  background: linear-gradient(to bottom, #228B22, #32CD32) !important;
  color: #E0FFE0 !important;
  border: 3px solid #228B22 !important;
  box-shadow: 0 0 15px rgba(34, 139, 34, 0.6) !important;
}

.druid-cooldown {
  color: #32CD32 !important;
  text-shadow: 0 0 5px rgba(34, 139, 34, 0.8) !important;
}

/* Wolf summoning indicators */
.summon-position-indicator {
  background-color: rgba(34, 139, 34, 0.3) !important;
  box-shadow: inset 0 0 20px rgba(34, 139, 34, 0.5) !important;
  animation: summonPulse 2s ease-in-out infinite;
}

@keyframes summonPulse {
  0%, 100% { 
    transform: translate3d(-50%, -50%, 0) scale(1); 
    opacity: 0.5; 
  }
  50% { 
    transform: translate3d(-50%, -50%, 0) scale(1.05); 
    opacity: 0.8; 
  }
}

/* Optimized nature particle effects - reduced complexity */
@keyframes natureSummon {
  0% { 
    transform: translate3d(0, 0, 0) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translate3d(var(--end-x), var(--end-y), 0) scale(0); 
    opacity: 0; 
  }
}

@keyframes flashFade {
  0% { 
    transform: scale(0.8); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(1.2); 
    opacity: 0; 
  }
}

/* ===================================================================
   WOLF (SUMMONED UNIT) STYLING
   =================================================================== */

/* Base Wolf styling */
.player.Wolf {
  background: linear-gradient(135deg, #696969, #808080);
  border-color: #696969;
}

/* Wolf decoration */
.player.Wolf::before {
  background-image: url('../svg/wolf-decoration.svg');
}

/* Wolf stats styling */
.Wolf-stats .char-number {
  color: #C0C0C0 !important;
  text-shadow: 0 0 8px rgba(128, 128, 128, 0.8);
}

.Wolf-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #696969);
}

/* Wolf animations */
@keyframes wolfIdle {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 2px)); }
}

.player.Wolf {
  /* Remove constant animation - only animate in specific states */
}

.player.Wolf.ready {
  box-shadow: 0 0 10px #808080, 0 0 15px #696969;
  /* Add idle animation only when ready */
  animation: wolfIdle 3s ease-in-out infinite;
}

/* Ensure Wolf doesn't inherit selectedCharacterPulse animation unless actually selected */
.player.Wolf:not(.selected) {
  animation: none;
}

.player.Wolf.ready:not(.selected) {
  animation: wolfIdle 3s ease-in-out infinite;
}

/* Only apply selected animation when Wolf is explicitly selected */
.player.Wolf.selected {
  animation: selectedCharacterPulse 2s infinite ease-in-out !important;
}

.player.Wolf.moving {
  animation: wolfMoving 0.3s ease-out;
}

@keyframes wolfMoving {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1) rotate(-5deg); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Wolf attack animation */
.player.Wolf.attacking {
  animation: wolfAttack 0.4s ease-out;
}

@keyframes wolfAttack {
  0% { transform: translate(-50%, -50%) scale(1); }
  30% { transform: translate(calc(-50% - 5px), -50%) scale(1.15); }
  60% { transform: translate(calc(-50% + 5px), -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Wolf summoning entrance effect */
.player.Wolf.summoning {
  animation: wolfSummon 0.4s ease-out;
}

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

/* Optimized summon pulse animation */
@keyframes summonPulse {
  0%, 100% { 
    transform: translate3d(-50%, -50%, 0) scale(1); 
    opacity: 0.5; 
  }
  50% { 
    transform: translate3d(-50%, -50%, 0) scale(1.05); 
    opacity: 0.8; 
  }
}

/* Optimized nature particle effects - reduced complexity */
@keyframes natureSummon {
  0% { 
    transform: translate3d(0, 0, 0) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translate3d(var(--end-x), var(--end-y), 0) scale(0); 
    opacity: 0; 
  }
}

@keyframes flashFade {
  0% { 
    transform: scale(0.8); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(1.2); 
    opacity: 0; 
  }
}

/* Wolf pack indicator - shows wolf is a summoned unit */
.player.Wolf::after {
  content: '🐾';
  position: absolute;
  bottom: -5px;
  right: -5px;
  font-size: 12px;
  opacity: 0.6;
  animation: pawPulse 2s ease-in-out infinite;
}

@keyframes pawPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}  

/* ===================================================================
   GAMBLER CHARACTER STYLING
   =================================================================== */

/* Base Gambler styling - Cosmic Red Galaxy Casino Theme */
.player.Gambler {
  background: radial-gradient(circle at 30% 30%, #FF6B9D 10%, #FF1744 40%, #8B0000 70%);
  color: #000000;  /* Black text for visibility */
  border: 2px solid #FF1744;
  box-shadow: 0 0 14px #FF1744, 0 0 24px #FF174488, 0 0 35px #FF073A44;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.7), 0 0 6px rgba(255, 255, 255, 0.5), 0 0 10px #FF1744;
}

/* Gambler ready state */
.player.Gambler.ready {
  border-color: #FF1744;
  box-shadow: 0 0 15px #FF1744, 0 0 25px #FF174488, 0 0 40px #FF073A66;
}

/* Gambler activating state */
.player.Gambler.activating {
  animation: gamblerCasting 0.7s ease-in-out;
  transform-origin: center;
}

/* Gambler decoration */
.player.Gambler::before {
  background-image: url('../svg/gambler-decoration.svg');
}

/* Gambler stats styling */
.Gambler-stats .char-number {
  color: #FF1744 !important;
  text-shadow: 0 0 10px rgba(255, 23, 68, 0.8), 0 0 20px rgba(255, 7, 58, 0.6);
}

.Gambler-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #FF1744) drop-shadow(0 0 10px #FF073A);
}

/* Gambler animations */
@keyframes gamblerCasting {
  0% { transform: scale(1); filter: brightness(1); }
  25% { transform: scale(1.05); filter: brightness(1.2) drop-shadow(0 0 8px #FF1744) drop-shadow(0 0 15px #FF073A); }
  50% { transform: scale(1.1); filter: brightness(1.4) drop-shadow(0 0 12px #FF1744) drop-shadow(0 0 20px #FF073A); }
  75% { transform: scale(1.05); filter: brightness(1.2) drop-shadow(0 0 8px #FF1744) drop-shadow(0 0 15px #FF073A); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Gambler button styling */
.gambler-btn {
  background: linear-gradient(to bottom, #FF1744, #FF073A) !important;
  color: #000000 !important;
  border: 3px solid #FF1744 !important;
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.6), 0 0 25px rgba(255, 7, 58, 0.4) !important;
  text-shadow: 0 0 8px #FF1744, 0 0 15px #FF073A;
}

.gambler-cooldown {
  color: #FF1744 !important;
  text-shadow: 0 0 5px rgba(255, 23, 68, 0.8), 0 0 10px rgba(255, 7, 58, 0.6) !important;
}

/* ===================================================================
   MUSICIAN CHARACTER STYLING
   =================================================================== */

/* Base Musician styling - Enhanced Galaxy Neon Theme */
.player.Musician {
  background: radial-gradient(circle at 30% 30%, #FF00FF 10%, #9933FF 40%, #3300CC 70%);
  color: #000000;  /* Black text for visibility */
  border: 2px solid #FF00FF;
  box-shadow: 0 0 14px #FF00FF, 0 0 24px #FF00FF88, 0 0 35px #9933FF44;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.7), 0 0 6px rgba(255, 255, 255, 0.5), 0 0 10px #FF00FF;
}

/* Musician ready state */
.player.Musician.ready {
  border-color: #FF00FF;
  box-shadow: 0 0 15px #FF00FF, 0 0 25px #FF00FF88, 0 0 40px #9933FF66;
}

/* Musician activating state */
.player.Musician.activating {
  animation: musicianCasting 0.8s ease-in-out;
  transform-origin: center;
}

/* Musician decoration */
.player.Musician::before {
  background-image: url('../svg/musician-decoration.svg');
}

/* Musician stats styling */
.Musician-stats .char-number {
  color: #FF00FF !important;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.8), 0 0 20px rgba(153, 51, 255, 0.6);
}

.Musician-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #FF00FF) drop-shadow(0 0 10px #9933FF);
}

/* Musician animations */
@keyframes musicianCasting {
  0% { transform: scale(1); filter: brightness(1); }
  25% { transform: scale(1.05); filter: brightness(1.2) drop-shadow(0 0 8px #FF00FF) drop-shadow(0 0 15px #9933FF); }
  50% { transform: scale(1.1); filter: brightness(1.4) drop-shadow(0 0 12px #FF00FF) drop-shadow(0 0 20px #9933FF); }
  75% { transform: scale(1.05); filter: brightness(1.2) drop-shadow(0 0 8px #FF00FF) drop-shadow(0 0 15px #9933FF); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Musician button styling */
.musician-btn {
  background: linear-gradient(to bottom, #FF00FF, #9933FF) !important;
  color: #000000 !important;
  border: 3px solid #FF00FF !important;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.6), 0 0 25px rgba(153, 51, 255, 0.4) !important;
  text-shadow: 0 0 8px #FF00FF, 0 0 15px #9933FF;
}

.musician-cooldown {
  color: #FF00FF !important;
  text-shadow: 0 0 5px rgba(255, 0, 255, 0.8), 0 0 10px rgba(153, 51, 255, 0.6) !important;
}

/* Nerd Character Styling */
.player.Nerd {
  background: radial-gradient(circle at 30% 30%, #FFF59D 10%, #FFD700 40%, #FFC107 70%);
  color: #000000;
  border: 2px solid #FFD700;
  box-shadow: 0 0 14px #FFD700, 0 0 24px #FFD70088;
  text-shadow: 0 0 16px #FFD700, 0 0 8px #fff;
}

.player.Nerd.ready {
  border-color: #FFC107;
  box-shadow: 0 0 16px #FFD700, 0 0 28px #FFD70099;
}

.player.Nerd.activating {
  animation: nerdThinking 0.8s ease-in-out;
}

.player.Nerd::before {
  background-image: url('../svg/nerd-decoration.svg');
}

.Nerd-stats .char-number {
  color: #FFD700;
  text-shadow: 0 0 8px #FFD700;
}

.Nerd-stats .character-svg-small {
  filter: drop-shadow(0 0 5px #FFD700);
}

@keyframes nerdThinking {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-5deg); filter: brightness(1.2); }
  50% { transform: scale(1.15) rotate(5deg); filter: brightness(1.3); }
  75% { transform: scale(1.1) rotate(-3deg); filter: brightness(1.2); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

.nerd-btn {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 193, 7, 0.9));
  border: 2px solid rgba(255, 215, 0, 0.6);
  color: #000000;
  text-shadow: 0 0 4px #FFD700;
}

.nerd-cooldown {
  color: #FFD700;
}

.nerd-cost {
  color: #FFC107;
}

.nerd-info {
  color: #FFEB3B;
}