#cardPlayEffects {
  position: fixed;
  inset: 0;
  z-index: 24;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
#cardPlayEffects * { pointer-events: none !important; box-sizing: border-box; }
#cardPlayEffects .play-fx-group { --fx-color: #b6d8e3; }
#cardPlayEffects .play-fx-group[data-rarity="epic"] { --fx-color: #b6cee9; }
#cardPlayEffects .play-fx-group[data-rarity="legendary"] { --fx-color: #f2d491; }
#cardPlayEffects .play-fx-scene { --fx-color: #94d5ac; }
#cardPlayEffects .play-fx-equip { --fx-color: #e4c387; }
#cardPlayEffects .play-fx-card {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--fx-color);
  border-radius: 6px;
  background: #131c25;
  box-shadow: 0 6px 22px #0008, 0 0 12px #c9eaff40;
  overflow: hidden;
  will-change: transform, opacity;
}
#cardPlayEffects .play-fx-card img { width: 100%; height: 100%; object-fit: contain; }
#cardPlayEffects .play-fx-card span {
  position: absolute;
  inset: auto 0 0;
  padding: 5px 3px;
  background: #0a101bea;
  color: #f4eedc;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}
#cardPlayEffects .play-fx-card b {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 23px;
  height: 23px;
  border: 1px solid var(--fx-color);
  border-radius: 50%;
  color: #edf7fa;
  background: #142838;
  text-align: center;
  font: 18px Georgia, serif;
}
#cardPlayEffects .play-fx-impact {
  position: absolute;
  left: var(--fx-x);
  top: var(--fx-y);
  width: 104px;
  height: 62px;
  border: 2px solid var(--fx-color);
  border-radius: 50%;
  box-shadow: inset 0 0 15px #daedff25, 0 0 12px #daedff35;
}
#cardPlayEffects .play-fx-flare {
  position: absolute;
  left: var(--fx-x);
  top: var(--fx-y);
  width: 180px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fx-color), #fff9e5, var(--fx-color), transparent);
  box-shadow: 0 0 10px var(--fx-color);
}
#cardPlayEffects .play-fx-label {
  position: absolute;
  left: clamp(120px, var(--fx-x), calc(100% - 120px));
  top: clamp(10px, calc(var(--fx-y) + 40px), calc(100% - 64px));
  transform: translateX(-50%);
  max-width: min(240px, calc(100vw - 16px));
  width: max-content;
  padding: 7px 12px;
  border-block: 1px solid #c2b28f88;
  background: #101922ed;
  color: #f3e9d0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  #cardPlayEffects .play-fx-card, #cardPlayEffects .play-fx-impact, #cardPlayEffects .play-fx-flare { display: none; }
}