.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 35; overflow: hidden; }

.card-wrap.fx-actor { z-index: 6; }
.card-wrap.fx-actor .card { animation: fxActor .65s ease-out; }
@keyframes fxActor {
  0% { transform: none; }
  25% { transform: translateY(-10px) scale(1.06); box-shadow: 0 0 0 1px var(--metal-edge), 0 0 0 4px #ffd257, 0 0 34px 8px rgba(255, 200, 60, .95); }
  70% { transform: translateY(-6px) scale(1.04); box-shadow: 0 0 0 1px var(--metal-edge), 0 0 0 3px #ffd257, 0 0 24px rgba(255, 200, 60, .8); }
  100% { transform: none; }
}

.fx-beam { position: absolute; height: 6px; margin-top: -3px; transform-origin: 0 50%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 240, 180, .2), #fff3b0 40%, #ff7a3d 85%, #ff2d4f);
  box-shadow: 0 0 10px 3px rgba(255, 140, 60, .85), 0 0 2px #fff; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.3, .7, .3, 1); }
.fx-beam.to-player { background: linear-gradient(90deg, rgba(255, 240, 180, .2), #fff3b0 40%, #ff3d6a 85%, #ff0040); }
.fx-orb { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0 18%, #ffe27a 34%, #ff7a2d 62%, rgba(255, 60, 40, 0) 72%);
  box-shadow: 0 0 18px 8px rgba(255, 150, 60, .8); transition-property: transform, opacity; transition-timing-function: cubic-bezier(.4, 0, .6, 1); }
.fx-beam.fade, .fx-orb.fade { opacity: 0; transition: opacity .35s; }

.card-wrap.fx-hit .card { animation: fxShake .45s ease-in-out; }
.card-wrap.fx-hit .inner::after { content: ""; position: absolute; inset: 0; background: rgba(255, 40, 60, .38); animation: fxFlash .45s ease-out forwards; pointer-events: none; }
@keyframes fxShake {
  0%, 100% { transform: none; }
  15% { transform: translateX(-9px) rotate(-2deg); } 35% { transform: translateX(8px) rotate(2deg); }
  55% { transform: translateX(-6px) rotate(-1deg); } 75% { transform: translateX(4px); }
}
@keyframes fxFlash { from { opacity: 1; } to { opacity: 0; } }
.player-row.fx-hit { animation: fxShake .45s ease-in-out; }
.player-row.fx-hit .hpbox { box-shadow: inset 0 2px 4px rgba(0,0,0,.45), 0 0 0 3px #ff4d6a, 0 0 22px #ff4d6a; }

.fx-float { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 40px; line-height: 1; color: #fff; white-space: nowrap;
  padding: 6px 14px 7px; border-radius: 14px; background: linear-gradient(180deg, #ff5a6e, #d1102e 60%, #8a0016);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #8a0016, 0 6px 18px rgba(120, 0, 20, .55);
  animation-name: fxFloat; animation-timing-function: cubic-bezier(.2, .8, .3, 1); animation-fill-mode: forwards; }
.fx-float.big { font-size: 48px; }
.fx-float.out { font-size: 26px; background: linear-gradient(180deg, #555, #222); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #222, 0 6px 18px rgba(0,0,0,.5); }
@keyframes fxFloat {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -60%) scale(1.2); }
  25% { transform: translate(-50%, -65%) scale(1); }
  85% { opacity: 1; transform: translate(-50%, -95%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(.95); }
}

.card-wrap.fx-defeat .card { animation: fxDefeat .56s ease-in forwards; }
@keyframes fxDefeat {
  0% { transform: none; filter: none; opacity: 1; }
  40% { transform: rotate(-8deg) translateY(4px); filter: grayscale(1) brightness(.8); opacity: 1; }
  100% { transform: rotate(-18deg) translateY(40px) scale(.85); filter: grayscale(1) brightness(.6); opacity: 0; }
}
.card-wrap.fx-vanish .card { animation: fxVanish .56s ease-in forwards; }
@keyframes fxVanish { 0% { opacity: 1; filter: none; } 40% { filter: brightness(2.2) saturate(0); } 100% { opacity: 0; transform: scale(1.12); filter: brightness(3) blur(3px); } }

.fx-demo { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.fx-demo span { color: var(--ui-sub); margin-right: 2px; }
.fx-demo button { border: 1px solid #7a2a4a; border-radius: 999px; padding: 0 12px; min-height: 36px; background: #fff; color: #7a2a4a; font-weight: 800; font-size: 13px; }
body.has-demo .topbar { height: 40px; }
body.has-demo .layout { height: calc(100vh - 40px); height: calc(100dvh - 40px); }
.topbar .fx-demo span { color: var(--top-fg); opacity: .9; }
.topbar .fx-demo button { min-height: 32px; }
@media (max-width: 1023px) {
  body.has-demo .topbar { display: flex; height: 50px; justify-content: center; }
  body.has-demo .layout { height: calc(100dvh - 50px - 72px); }
  .fx-demo span { display: none; }
  .fx-demo button { min-height: 44px; padding: 0 9px; font-size: 12px; }
  .fx-float { font-size: 24px; padding: 3px 8px 4px; border-radius: 9px; } .fx-float.big { font-size: 30px; } .fx-float.out { font-size: 15px; }
  .fx-orb { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .fx-beam { height: 4px; margin-top: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-wrap.fx-actor .card, .card-wrap.fx-hit .card, .player-row.fx-hit, .card-wrap.fx-defeat .card, .card-wrap.fx-vanish .card { animation-duration: .01ms; }
  .card-wrap.fx-defeat .card, .card-wrap.fx-vanish .card { animation: none; opacity: .25; filter: grayscale(1); }
  .fx-float { animation-name: fxFade; }
  @keyframes fxFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}