/* =========================================================
   FANTASY MATCH: THE SHATTERED REALMS
   Visual Effects, Keyframe Animations & Screen Shakes
   ========================================================= */

@keyframes floatUpFade {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translateY(-8px) scale(1.15);
  }
  75% {
    opacity: 1;
    transform: translateY(-28px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-45px) scale(0.9);
  }
}

@keyframes gemMatchPop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.35);
    filter: brightness(2) drop-shadow(0 0 12px #fff);
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.gem-matched {
  animation: gemMatchPop 0.28s ease-out forwards;
}

@keyframes laserBeamH {
  0% { transform: scaleY(0.1); opacity: 1; }
  50% { transform: scaleY(1.4); opacity: 1; filter: drop-shadow(0 0 15px #fff); }
  100% { transform: scaleY(0); opacity: 0; }
}

@keyframes laserBeamV {
  0% { transform: scaleX(0.1); opacity: 1; }
  50% { transform: scaleX(1.4); opacity: 1; filter: drop-shadow(0 0 15px #fff); }
  100% { transform: scaleX(0); opacity: 0; }
}

.line-blast-h {
  position: absolute;
  left: 0;
  width: 100%;
  height: 12px;
  background: linear-gradient(to right, transparent, #fff, #ffeaa7, #fff, transparent);
  animation: laserBeamH 0.35s ease-out forwards;
  z-index: 40;
  pointer-events: none;
}

.line-blast-v {
  position: absolute;
  top: 0;
  height: 100%;
  width: 12px;
  background: linear-gradient(to bottom, transparent, #fff, #ffeaa7, #fff, transparent);
  animation: laserBeamV 0.35s ease-out forwards;
  z-index: 40;
  pointer-events: none;
}

/* Screen Shake */
@keyframes screenShakeHard {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 6px); }
  40% { transform: translate(7px, -5px); }
  60% { transform: translate(-5px, 4px); }
  80% { transform: translate(4px, -2px); }
}

.shake-hard {
  animation: screenShakeHard 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Attack Lunge Animation */
@keyframes playerAttackLunge {
  0% { transform: translateX(0); }
  40% { transform: translateX(45px) scale(1.1); }
  100% { transform: translateX(0); }
}

@keyframes enemyAttackLunge {
  0% { transform: translateX(0); }
  40% { transform: translateX(-45px) scale(1.1); }
  100% { transform: translateX(0); }
}

.player-lunge {
  animation: playerAttackLunge 0.32s ease-in-out;
}

.enemy-lunge {
  animation: enemyAttackLunge 0.32s ease-in-out;
}

/* Enemy Damage Hurt Flash */
@keyframes hurtFlash {
  0%, 100% { filter: drop-shadow(0 6px 10px rgba(0,0,0,0.6)); }
  50% { filter: brightness(2.5) drop-shadow(0 0 15px #e74c3c); transform: translateX(6px); }
}

.hurt-anim {
  animation: hurtFlash 0.28s ease-in-out;
}

/* Enemy Defeat Dissolve */
@keyframes enemyDissolve {
  0% { opacity: 1; transform: scale(1); filter: brightness(2); }
  50% { opacity: 0.7; transform: scale(0.9) rotate(5deg); filter: hue-rotate(90deg); }
  100% { opacity: 0; transform: scale(0.2) translateY(30px); filter: brightness(0); }
}

.enemy-dead-anim {
  animation: enemyDissolve 0.65s ease-out forwards;
}

/* Fatality Slow-Mo & Dark Vignette */
.fatality-banner {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #ff4757;
  text-shadow: 0 0 20px #ff0000, 0 4px 10px #000;
  letter-spacing: 4px;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fatality-banner.active {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 1;
}

/* Pulse Glows */
@keyframes pulseGlow {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.05); opacity: 1; filter: brightness(1.2); }
}

/* =========================================================
   Rainbow Gem Swap & Prismatic Blast Animation Effects
   ========================================================= */

@keyframes rainbowPulseGlow {
  0% {
    transform: scale(1.05) rotate(0deg);
    filter: drop-shadow(0 0 10px #ff7675) drop-shadow(0 0 18px #55efc4) brightness(1.3);
  }
  50% {
    transform: scale(1.35) rotate(180deg);
    filter: drop-shadow(0 0 22px #e056fd) drop-shadow(0 0 32px #ffeaa7) brightness(2.2);
  }
  100% {
    transform: scale(1.4) rotate(360deg);
    filter: drop-shadow(0 0 28px #74b9ff) drop-shadow(0 0 40px #a29bfe) brightness(2.5);
  }
}

.gem-rainbow-pulse {
  animation: rainbowPulseGlow 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  z-index: 60 !important;
}

@keyframes rainbowTargetQuiver {
  0% { transform: scale(1) translate(0, 0); filter: brightness(1.2); }
  20% { transform: scale(1.08) translate(-2px, 2px); filter: brightness(1.6) drop-shadow(0 0 8px #ffeaa7); }
  40% { transform: scale(1.12) translate(2px, -2px); filter: brightness(1.9) drop-shadow(0 0 12px #55efc4); }
  60% { transform: scale(1.15) translate(-2px, -1px); filter: brightness(2.1) drop-shadow(0 0 16px #e056fd); }
  80% { transform: scale(1.18) translate(1px, 2px); filter: brightness(2.3) drop-shadow(0 0 20px #74b9ff); }
  100% { transform: scale(1.2) translate(0, 0); filter: brightness(2.5) drop-shadow(0 0 24px #ffffff); }
}

.gem-rainbow-targeted {
  animation: rainbowTargetQuiver 0.55s ease-in-out forwards !important;
  z-index: 45 !important;
}

@keyframes rainbowPopBurst {
  0% {
    transform: scale(1.2);
    filter: brightness(2.5) drop-shadow(0 0 20px #ffffff);
    opacity: 1;
  }
  40% {
    transform: scale(1.6);
    filter: brightness(3.5) drop-shadow(0 0 35px #e056fd);
    opacity: 0.9;
  }
  100% {
    transform: scale(0);
    filter: brightness(5);
    opacity: 0;
  }
}

.gem-rainbow-pop {
  animation: rainbowPopBurst 0.35s ease-out forwards !important;
}

.rainbow-blast-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 55;
  overflow: visible;
}

@keyframes laserStreamFlow {
  0% {
    stroke-dashoffset: 120;
    opacity: 0;
    stroke-width: 2;
  }
  30% {
    opacity: 1;
    stroke-width: 6;
  }
  80% {
    opacity: 1;
    stroke-width: 7;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
    stroke-width: 1;
  }
}

.rainbow-laser-stream {
  stroke-dasharray: 120;
  animation: laserStreamFlow 0.55s ease-out forwards;
  filter: drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 18px #e056fd);
}

@keyframes shockwaveExpand {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 1;
    border-width: 10px;
  }
  50% {
    opacity: 0.85;
    border-width: 6px;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.5);
    opacity: 0;
    border-width: 1px;
  }
}

.rainbow-shockwave {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  border: 8px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 25px #e056fd, 0 0 45px #74b9ff, inset 0 0 30px #55efc4;
  animation: shockwaveExpand 0.65s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes sparkFly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0);
    opacity: 0;
  }
}

.rainbow-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 58;
  animation: sparkFly 0.5s ease-out forwards;
}

/* Block Spawn / Entrance Pop-Up Animation on Battle Start */
@keyframes gemPopIn {
  0% {
    opacity: 0;
    transform: scale(0.08) translateY(24px);
    filter: brightness(1.8) drop-shadow(0 0 10px #ffeaa7);
  }
  60% {
    opacity: 1;
    transform: scale(1.22) translateY(-4px);
    filter: brightness(1.3) drop-shadow(0 0 6px #f39c12);
  }
  80% {
    transform: scale(0.92) translateY(1px);
    filter: brightness(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: brightness(1);
  }
}

.gem-pop-in {
  animation: gemPopIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Block Drag Animation for Swap */
.gem-piece.gem-dragging {
  animation: none !important;
  transition: none !important;
  z-index: 60 !important;
  cursor: grabbing !important;
  filter: drop-shadow(0 6px 14px rgba(243, 156, 18, 0.75)) brightness(1.25);
  pointer-events: none;
}

.gem-piece.gem-swap-target {
  animation: none !important;
  transition: transform 0.12s ease !important;
  z-index: 30;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
}

/* =========================================================
   COMBAT VISUAL FX & CHARACTER ACTION ANIMATIONS
   1. Physical Slash Attack
   2. Fire Magic Casting & Fireball Projectile + Explosion
   3. Ice Magic Casting & Glacial Shard + Frozen Encasement
   4. Shield Aegis Protective Barrier
   5. Holy Emerald Healing Aura & Floating Sparkles
   ========================================================= */

/* --- 1. PHYSICAL ATTACK & SLASH FX --- */
@keyframes playerSlashDash {
  0% { transform: translateX(0) scale(1); }
  35% { transform: translateX(52px) scale(1.18) rotate(5deg); }
  65% { transform: translateX(56px) scale(1.15) rotate(4deg); }
  100% { transform: translateX(0) scale(1); }
}

.player-slash-anim {
  animation: playerSlashDash 0.36s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.slash-effect-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  pointer-events: none;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slash-blade-svg {
  width: 100%;
  height: 100%;
  animation: slashArcSweep 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes slashArcSweep {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-35deg);
    filter: brightness(2) drop-shadow(0 0 15px #ffeaa7);
  }
  30% {
    opacity: 1;
    transform: scale(1.15) rotate(0deg);
    filter: brightness(2.5) drop-shadow(0 0 25px #ff7675);
  }
  75% {
    opacity: 0.9;
    transform: scale(1.3) rotate(15deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.45) rotate(25deg);
    filter: brightness(1.5);
  }
}

.slash-sparks-burst {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,234,167,0.7) 30%, rgba(255,118,117,0) 70%);
  border-radius: 50%;
  animation: sparkBurstFade 0.28s ease-out forwards;
}

@keyframes sparkBurstFade {
  0% { transform: scale(0.2); opacity: 1; }
  60% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* --- 2. FIRE MAGIC CASTING & FIREBALL PROJECTILE --- */
@keyframes playerFireCastPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 6px #e17055); }
  40% {
    transform: scale(1.14) translateY(-5px);
    filter: brightness(1.45) drop-shadow(0 0 22px #ff7675) drop-shadow(0 0 35px #e74c3c);
  }
  100% { transform: scale(1); filter: drop-shadow(0 0 6px #e17055); }
}

.player-cast-fire {
  animation: playerFireCastPulse 0.42s ease-in-out !important;
}

.fireball-projectile {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fireball-core {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 15%, #ffeaa7 45%, #ff7675 75%, #d63031 100%);
  box-shadow: 0 0 16px #ff7675, 0 0 30px #e17055, inset 0 0 8px #ffffff;
  animation: fireballSpin 0.3s linear infinite;
}

@keyframes fireballSpin {
  0% { transform: rotate(0deg) scale(0.95); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(0.95); }
}

.fireball-tail {
  position: absolute;
  right: 18px;
  width: 48px;
  height: 18px;
  border-radius: 50% 0 0 50%;
  background: linear-gradient(to left, rgba(255, 118, 117, 0.9), rgba(243, 156, 18, 0.8), transparent);
  filter: blur(2px);
}

.fire-explosion-fx {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 56;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explosion-fire-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffeaa7 0%, #ff7675 40%, #e74c3c 70%, transparent 85%);
  animation: fireExplosionExpand 0.38s ease-out forwards;
}

@keyframes fireExplosionExpand {
  0% { transform: scale(0.2); opacity: 1; filter: brightness(2.5); }
  50% { transform: scale(1.2); opacity: 0.9; filter: brightness(1.8) drop-shadow(0 0 25px #ff7675); }
  100% { transform: scale(1.6); opacity: 0; filter: brightness(1); }
}

/* --- 3. ICE MAGIC CASTING, ICE SHARD & FROZEN ENCASEMENT --- */
@keyframes playerIceCastPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 6px #74b9ff); }
  40% {
    transform: scale(1.12) translateY(-4px);
    filter: brightness(1.4) drop-shadow(0 0 20px #00d2d3) drop-shadow(0 0 35px #74b9ff);
  }
  100% { transform: scale(1); filter: drop-shadow(0 0 6px #74b9ff); }
}

.player-cast-ice {
  animation: playerIceCastPulse 0.42s ease-in-out !important;
}

.ice-shard-projectile {
  position: absolute;
  width: 42px;
  height: 30px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ice-crystal-core {
  width: 26px;
  height: 15px;
  background: linear-gradient(135deg, #ffffff 0%, #74b9ff 60%, #0984e3 100%);
  clip-path: polygon(0% 50%, 40% 0%, 100% 50%, 40% 100%);
  box-shadow: 0 0 14px #74b9ff, 0 0 26px #00d2d3;
  animation: iceShardSpin 0.25s linear infinite;
}

@keyframes iceShardSpin {
  0% { transform: rotate(0deg) scale(0.95); }
  50% { transform: rotate(10deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(0.95); }
}

.frost-particles-trail {
  position: absolute;
  right: 14px;
  width: 42px;
  height: 14px;
  background: linear-gradient(to left, rgba(116, 185, 255, 0.9), rgba(0, 210, 211, 0.6), transparent);
  filter: blur(2px);
}

/* Enemy Frozen Encasement Overlay (Ice Crystals surrounding enemy) */
.enemy-frozen-overlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 145px;
  pointer-events: none;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: freezeSpikeRise 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes freezeSpikeRise {
  0% {
    transform: translateX(-50%) scale(0.4) translateY(30px);
    opacity: 0;
  }
  60% {
    transform: translateX(-50%) scale(1.1) translateY(-4px);
    opacity: 1;
    filter: drop-shadow(0 0 22px #00d2d3);
  }
  100% {
    transform: translateX(-50%) scale(1) translateY(0);
    opacity: 0.95;
    filter: drop-shadow(0 0 14px #74b9ff);
  }
}

.ice-crystals-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(0, 206, 201, 0.6));
}

.enemy-frozen-shiver {
  filter: saturate(0.55) hue-rotate(185deg) brightness(1.15) drop-shadow(0 0 16px #00cec9) !important;
  animation: frozenShiver 2s ease-in-out infinite !important;
}

@keyframes frozenShiver {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-2px) scale(0.99); }
  50% { transform: translateX(2px) scale(1.01); }
  75% { transform: translateX(-1px) scale(1); }
}

/* --- 4. SHIELD BARRIER AURA AROUND PLAYER --- */
.player-shield-barrier {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 122px;
  height: 122px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shieldBarrierExpand 0.48s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes shieldBarrierExpand {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    box-shadow: 0 0 5px #f1c40f;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
    box-shadow: 0 0 28px #ffd700, 0 0 45px #74b9ff, inset 0 0 20px #ffeaa7;
  }
  80% {
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.85;
    box-shadow: 0 0 18px #ffd700, 0 0 30px #74b9ff, inset 0 0 15px #ffeaa7;
  }
}

.shield-dome-outer {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(255, 234, 167, 0.85);
  background: radial-gradient(circle, rgba(243, 156, 18, 0.12) 0%, rgba(116, 185, 255, 0.22) 70%, rgba(243, 156, 18, 0.45) 100%);
  box-shadow: inset 0 0 18px rgba(255, 234, 167, 0.6);
  animation: shieldPulseGleam 1.4s ease-in-out infinite alternate;
}

@keyframes shieldPulseGleam {
  0% { transform: scale(0.98); opacity: 0.8; }
  100% { transform: scale(1.02); opacity: 1; filter: brightness(1.2); }
}

.shield-hex-grid {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.65);
  animation: shieldHexRotate 4s linear infinite;
}

@keyframes shieldHexRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- 5. HEAL RESTORATIVE AURA & RISING SPARKLES --- */
.player-heal-aura-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 145px;
  pointer-events: none;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heal-light-pillar {
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 130px;
  background: linear-gradient(to top, rgba(46, 204, 113, 0.7) 0%, rgba(85, 239, 196, 0.4) 60%, transparent 100%);
  border-radius: 40px 40px 10px 10px;
  filter: blur(4px);
  animation: healPillarPulse 0.55s ease-out forwards;
}

@keyframes healPillarPulse {
  0% { opacity: 0; transform: scaleX(0.3) scaleY(0.2); }
  40% { opacity: 0.9; transform: scaleX(1.15) scaleY(1.05); filter: drop-shadow(0 0 25px #2ecc71); }
  100% { opacity: 0; transform: scaleX(1.4) scaleY(1.2) translateY(-20px); }
}

.heal-sparkle {
  position: absolute;
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: #55efc4;
  text-shadow: 0 0 8px #2ecc71, 0 0 14px #ffffff;
  pointer-events: none;
  animation: healSparkleRise 0.65s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes healSparkleRise {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translateY(-8px) scale(1.3);
  }
  75% {
    opacity: 0.9;
    transform: translateY(-42px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-70px) scale(0.7);
  }
}

/* ==========================================================================
   ENEMY BOARD HAZARDS & SPECIAL MECHANICS (Dragon, Malakar, Thief, Badges)
   ========================================================================== */

/* Cell-level glow and backdrops for maximum visibility */
.grid-cell.cell-hazard-scorched {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.45) 0%, rgba(249, 115, 22, 0.25) 70%, #231d2e 100%) !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.75), inset 0 0 8px rgba(239, 68, 68, 0.6) !important;
  border: 1.5px solid #f97316 !important;
}

.grid-cell.cell-hazard-locked {
  background: radial-gradient(circle, rgba(88, 28, 135, 0.6) 0%, rgba(15, 10, 25, 0.85) 100%) !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.75), inset 0 0 8px rgba(126, 34, 206, 0.6) !important;
  border: 1.5px dashed #a855f7 !important;
  cursor: not-allowed !important;
}

.grid-cell.cell-hazard-toxic {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(16, 185, 129, 0.2) 70%, #231d2e 100%) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.75), inset 0 0 8px rgba(16, 185, 129, 0.5) !important;
  border: 1.5px solid #22c55e !important;
}

.grid-cell.cell-hazard-void {
  background: radial-gradient(circle, rgba(147, 51, 234, 0.45) 0%, rgba(126, 34, 206, 0.25) 70%, #231d2e 100%) !important;
  box-shadow: 0 0 12px rgba(147, 51, 234, 0.8), inset 0 0 8px rgba(168, 85, 247, 0.6) !important;
  border: 1.5px solid #a855f7 !important;
}

.grid-cell.cell-hazard-shock {
  background: radial-gradient(circle, rgba(234, 179, 8, 0.4) 0%, rgba(202, 138, 4, 0.2) 70%, #231d2e 100%) !important;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.8), inset 0 0 8px rgba(250, 204, 21, 0.6) !important;
  border: 1.5px solid #eab308 !important;
}

.gem-piece.hazard-scorched {
  border: 2px solid #ff5722 !important;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(255, 87, 34, 0.9), inset 0 0 8px rgba(244, 67, 54, 0.6);
  animation: scorchedGlow 1.2s infinite alternate ease-in-out;
}

@keyframes scorchedGlow {
  0% { box-shadow: 0 0 6px rgba(255, 87, 34, 0.6), inset 0 0 4px rgba(244, 67, 54, 0.3); }
  100% { box-shadow: 0 0 16px rgba(255, 87, 34, 1), inset 0 0 12px rgba(255, 152, 0, 0.8); }
}

.gem-piece.hazard-locked {
  border: 2px dashed #a855f7 !important;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.85);
  filter: brightness(0.68) contrast(1.2);
  cursor: not-allowed !important;
}

.gem-piece.hazard-locked img {
  opacity: 0.65;
}

.gem-locked-shake {
  animation: lockShake 0.4s ease-in-out !important;
}

@keyframes lockShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px) rotate(-3deg); }
  40%, 80% { transform: translateX(6px) rotate(3deg); }
}

.gem-piece.hazard-toxic {
  border: 2px solid #22c55e !important;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8), inset 0 0 8px rgba(16, 185, 129, 0.5);
  animation: toxicGlow 1.4s infinite alternate ease-in-out;
}

@keyframes toxicGlow {
  0% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
  100% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.95); }
}

.gem-piece.hazard-void {
  border: 2px solid #9333ea !important;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(147, 51, 234, 0.85), inset 0 0 8px rgba(126, 34, 206, 0.6);
  animation: voidPulse 1.3s infinite alternate ease-in-out;
}

@keyframes voidPulse {
  0% { box-shadow: 0 0 6px rgba(147, 51, 234, 0.5); }
  100% { box-shadow: 0 0 18px rgba(168, 85, 247, 1); }
}

.gem-piece.hazard-shock {
  border: 2px solid #eab308 !important;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.9);
  animation: shockPulse 0.8s infinite alternate ease-in-out;
}

@keyframes shockPulse {
  0% { box-shadow: 0 0 4px rgba(234, 179, 8, 0.4); }
  100% { box-shadow: 0 0 16px rgba(250, 204, 21, 1); }
}

/* HAZARD OVERLAYS */
.gem-hazard-marker {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

.hazard-fire-glow {
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(255, 69, 0, 0.45) 15%, rgba(255, 140, 0, 0.2) 65%, transparent 85%);
  mix-blend-mode: screen;
  animation: fireFlicker 0.9s infinite alternate;
}

@keyframes fireFlicker {
  0% { opacity: 0.7; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1.04); }
}

.hazard-void-shade {
  position: absolute;
  inset: 0;
  background: rgba(18, 10, 30, 0.6);
  border-radius: 6px;
}

.hazard-chains-cross {
  position: absolute;
  font-size: 1.8rem;
  line-height: 1;
  opacity: 0.92;
  filter: drop-shadow(0 0 8px #9333ea);
  transform: rotate(-10deg);
}

.hazard-padlock {
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 1rem;
  background: #1e112a;
  border: 1.5px solid #c084fc;
  border-radius: 50%;
  padding: 1px 3px;
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.9);
}

.gem-hazard-marker .hazard-icon {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 1.25rem;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.9)) drop-shadow(0 0 8px #ff4500);
  animation: bounceHazardIcon 1.2s infinite ease-in-out;
}

.gem-hazard-marker .hazard-icon-toxic {
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.9)) drop-shadow(0 0 8px #22c55e);
}
.gem-hazard-marker .hazard-icon-void {
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.9)) drop-shadow(0 0 8px #a855f7);
}
.gem-hazard-marker .hazard-icon-shock {
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.9)) drop-shadow(0 0 8px #eab308);
}

@keyframes bounceHazardIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

.gem-stolen-anim {
  animation: gemStolenEffect 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
  pointer-events: none;
  z-index: 50;
}

@keyframes gemStolenEffect {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: brightness(1.2);
  }
  50% {
    transform: scale(1.2) translateY(-25px) rotate(-15deg);
    opacity: 0.9;
    filter: brightness(1.8) drop-shadow(0 0 10px #fbbf24);
  }
  100% {
    transform: scale(0.1) translateY(-90px) rotate(45deg);
    opacity: 0;
    filter: brightness(2) blur(4px);
  }
}