/* Efeitos do Coupy — overlay #fx-layer. Contrato: docs/fx-api.md */

#fx-layer {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden;
}
.fx-pos { position: absolute; transform: translate(-50%, -50%); }

/* ---------- flash vermelho/branco sobre um retângulo ---------- */
.fx-flash {
  position: absolute; border-radius: 12px; background: var(--c, rgba(255, 0, 0, .6));
  animation: fx-flash var(--dur, .6s) ease-out both;
}
@keyframes fx-flash { 0% { opacity: 0 } 20% { opacity: 1 } 100% { opacity: 0 } }

/* ---------- moedas caindo ---------- */
.fx-rain { position: absolute; }
.fx-coin {
  position: absolute; top: 0; width: 22px; height: 22px;
  animation: fx-fall 1s both;
}
.fx-coin::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b0 0, #f5c542 45%, #b8860b 100%);
  border: 2px solid #8a6508; box-sizing: border-box;
  box-shadow: 0 0 10px 2px rgba(245, 197, 66, .7), inset 0 0 0 3px rgba(255, 255, 255, .25);
  animation: fx-spin .5s linear infinite;
}
.fx-coin::after {
  content: ""; position: absolute; left: 5px; top: 4px; width: 5px; height: 5px;
  border-radius: 50%; background: rgba(255, 255, 255, .9);
}
@keyframes fx-spin { to { transform: rotateY(360deg) } }
@keyframes fx-fall {
  0% { transform: translate(0, -30px); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, 1, .7) }
  8% { opacity: 1 }
  55% { transform: translate(calc(var(--dx) * .6), var(--dist)); animation-timing-function: ease-out }
  70% { transform: translate(calc(var(--dx) * .8), calc(var(--dist) - 34px)); animation-timing-function: ease-in }
  82% { transform: translate(calc(var(--dx) * .9), var(--dist)); animation-timing-function: ease-out }
  90% { transform: translate(var(--dx), calc(var(--dist) - 9px)); opacity: 1; animation-timing-function: ease-in }
  100% { transform: translate(var(--dx), var(--dist)); opacity: 0 }
}

/* ---------- faca ---------- */
.fx-knife-wrap { position: absolute; }
.fx-knife {
  position: absolute; left: 0; top: 0; width: 110px; height: 28px; margin: -14px 0 0 -55px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8));
  animation: fx-knife .55s cubic-bezier(.3, .1, .6, 1) both;
}
.fx-knife svg { display: block }
@keyframes fx-knife {
  0% { transform: translate(var(--x0), var(--y0)) rotate(var(--a)) scale(.7); opacity: 0 }
  12% { opacity: 1 }
  85% { opacity: 1 }
  100% { transform: translate(var(--x1), var(--y1)) rotate(var(--a)) scale(1.1); opacity: 0 }
}
.fx-trail {
  position: absolute; height: 5px; margin-top: -2px; transform-origin: 0 50%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 60%, rgba(255, 60, 60, .9));
  filter: drop-shadow(0 0 4px #f33);
  animation: fx-trail .7s ease-out both;
}
@keyframes fx-trail {
  0% { clip-path: inset(0 100% 0 0); opacity: 1 }
  60% { clip-path: inset(0 0 0 0); opacity: 1 }
  100% { clip-path: inset(0 0 0 0); opacity: 0 }
}

/* ---------- sangue escorrendo ---------- */
.fx-blood-wrap { position: absolute; inset: 0; }
.fx-blood-top {
  position: absolute; left: 0; right: 0; top: 0; height: 28px;
  background: linear-gradient(#8a0000, rgba(138, 0, 0, 0));
  animation: fx-blood-fade 2.6s ease-out both;
}
.fx-blood {
  position: absolute; top: 0; border-radius: 0 0 50% 50% / 0 0 14px 14px;
  background: linear-gradient(180deg, #7a0000 0, #c01010 70%, #e02020 100%);
  box-shadow: 0 0 8px rgba(120, 0, 0, .6);
  animation: fx-drip 2s cubic-bezier(.35, .1, .5, 1) both, fx-blood-fade 2.6s ease-out both;
}
@keyframes fx-drip { from { clip-path: inset(0 0 100% 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes fx-blood-fade { 0%, 70% { opacity: 1 } 100% { opacity: 0 } }

/* ---------- escudo ---------- */
.fx-ring {
  position: absolute; border-radius: 14px; border: 3px solid var(--c);
  box-shadow: 0 0 18px 4px var(--c), inset 0 0 14px var(--c);
  animation: fx-ring 1.9s ease-in-out both;
}
@keyframes fx-ring {
  0% { opacity: 0; transform: scale(1.12) }
  15% { opacity: 1; transform: scale(1) }
  35% { box-shadow: 0 0 30px 8px var(--c), inset 0 0 20px var(--c) }
  55% { box-shadow: 0 0 14px 3px var(--c), inset 0 0 10px var(--c) }
  75% { box-shadow: 0 0 30px 8px var(--c), inset 0 0 20px var(--c); opacity: 1 }
  100% { opacity: 0 }
}
.fx-shield { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: fx-shield 1.9s ease-in-out both; }
.fx-shield-ico { width: var(--s, 80px); height: calc(var(--s, 80px) * 1.2); filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 4px #000); }
.fx-shield-label {
  white-space: nowrap; font: 900 15px/1 system-ui, sans-serif; letter-spacing: .08em; color: #fff;
  padding: 5px 10px; border-radius: 6px; background: var(--c); border: 2px solid #f5c542; text-shadow: 0 1px 2px #000;
  box-shadow: 0 0 12px var(--c);
}
@keyframes fx-shield {
  0% { transform: scale(.2); opacity: 0 }
  15% { transform: scale(1.25); opacity: 1 }
  25% { transform: scale(1) }
  40% { transform: scale(1.1) }
  55% { transform: scale(1) }
  70% { transform: scale(1.1); opacity: 1 }
  85% { transform: scale(1) }
  100% { transform: scale(1); opacity: 0 }
}

/* ---------- carimbo ---------- */
.fx-stamp {
  white-space: nowrap; font: 900 clamp(22px, 7vw, 44px)/1 Impact, "Arial Black", system-ui, sans-serif;
  letter-spacing: .06em; color: #d3151a; padding: 8px 16px; border: 5px solid #d3151a; border-radius: 8px;
  background: rgba(255, 255, 255, .12); text-shadow: 0 0 1px #d3151a;
  box-shadow: inset 0 0 0 2px rgba(211, 21, 26, .45), 0 0 14px rgba(211, 21, 26, .55);
  mask-image: radial-gradient(circle at 20% 30%, #000 85%, rgba(0, 0, 0, .75));
  animation: fx-stamp 1.5s both;
}
.fx-stamp.cassado { background: #000; color: #fff; border-color: #d3151a; text-shadow: none; }
@keyframes fx-stamp {
  0% { transform: rotate(var(--rot)) scale(3); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, 1, .6) }
  22% { transform: rotate(var(--rot)) scale(.88); opacity: 1; animation-timing-function: ease-out }
  34% { transform: rotate(var(--rot)) scale(1.08); animation-timing-function: ease-in-out }
  44% { transform: rotate(var(--rot)) scale(1) }
  80% { transform: rotate(var(--rot)) scale(1); opacity: 1 }
  100% { transform: rotate(var(--rot)) scale(1.04); opacity: 0 }
}
.fx-band {
  position: absolute; left: 0; right: 0; height: 74px; margin-top: -37px; background: rgba(0, 0, 0, .88);
  box-shadow: 0 0 20px #000; animation: fx-band 1.6s ease-out both;
}
@keyframes fx-band {
  0% { transform: scaleX(0); opacity: 1 }
  18% { transform: scaleX(1) }
  80% { transform: scaleX(1); opacity: 1 }
  100% { transform: scaleX(1); opacity: 0 }
}

/* ---------- martelo / impeachment ---------- */
.fx-gavel { transform-origin: 50% 90%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); animation: fx-gavel 1.4s both; }
@keyframes fx-gavel {
  0% { transform: translate(0, -60px) rotate(-55deg) scale(1.3); opacity: 0 }
  18% { transform: translate(0, -60px) rotate(-55deg) scale(1.3); opacity: 1; animation-timing-function: cubic-bezier(.6, 0, 1, .5) }
  26% { transform: translate(0, -4px) rotate(18deg) scale(1.1) }
  34% { transform: translate(0, -14px) rotate(-8deg) scale(1.1); animation-timing-function: ease-in }
  40% { transform: translate(0, 0) rotate(14deg) scale(1) }
  75% { transform: translate(0, 0) rotate(14deg) scale(1); opacity: 1 }
  100% { transform: translate(0, 0) rotate(14deg) scale(1); opacity: 0 }
}
.fx-banner {
  position: absolute; left: 0; right: 0; top: 34%; text-align: center; padding: 14px 0;
  font: 900 clamp(26px, 8vw, 56px)/1 Impact, "Arial Black", system-ui, sans-serif; letter-spacing: .18em; color: #fff;
  background: linear-gradient(90deg, rgba(90, 0, 0, 0), rgba(140, 0, 0, .92) 15%, rgba(140, 0, 0, .92) 85%, rgba(90, 0, 0, 0));
  text-shadow: 0 2px 6px #000; animation: fx-banner 1.8s both;
}
@keyframes fx-banner {
  0% { transform: translateX(-100%); opacity: 0; animation-timing-function: cubic-bezier(.2, .8, .3, 1) }
  22% { transform: translateX(0); opacity: 1 }
  78% { transform: translateX(0); opacity: 1; animation-timing-function: ease-in }
  100% { transform: translateX(100%); opacity: 0 }
}
body.fx-shake { position: relative; animation: fx-shake .3s linear; }
@keyframes fx-shake {
  0%, 100% { left: 0; top: 0 }
  15% { left: -5px; top: 3px }
  30% { left: 5px; top: -3px }
  45% { left: -4px; top: -2px }
  60% { left: 4px; top: 3px }
  80% { left: -2px; top: 1px }
}

/* ---------- embaralhar ---------- */
.fx-shuffle { position: absolute; width: 0; height: 0; }
.fx-ghost {
  position: absolute; margin: -20px 0 0 -14px; border-radius: 8px; border: 2px solid #c9a24b;
  background: repeating-linear-gradient(45deg, #2d2160 0 6px, #3b2a6b 6px 12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6); opacity: 0;
  animation: fx-ghost .9s both;
}
@keyframes fx-ghost {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; animation-timing-function: ease-out }
  25% { transform: translate(calc(var(--dx) * .55), var(--lift)) rotate(calc(var(--r) * .6)); opacity: .95; animation-timing-function: ease-in-out }
  50% { transform: translate(var(--dx), calc(var(--lift) * .3)) rotate(var(--r)); opacity: .95; animation-timing-function: ease-in-out }
  75% { transform: translate(calc(var(--dx) * .5), var(--lift)) rotate(calc(var(--r) * .5)); opacity: .9; animation-timing-function: ease-in }
  100% { transform: translate(0, 0) rotate(0); opacity: 0 }
}

/* ---------- virar carta ---------- */
.fx-flip { animation: fx-flip .6s ease-out; backface-visibility: visible; }
@keyframes fx-flip {
  from { transform: perspective(700px) rotateY(180deg) }
  to { transform: perspective(700px) rotateY(0) }
}

/* ---------- vitória ---------- */
.fx-win {
  position: absolute; inset: 0; pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(20, 10, 40, .55), rgba(0, 0, 0, .8)); animation: fx-fadein .4s both;
}
.fx-confetti { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-win-text {
  position: relative; text-align: center; max-width: 92vw; padding: 0 12px;
  font: 900 clamp(34px, 11vw, 96px)/1.05 Impact, "Arial Black", system-ui, sans-serif; letter-spacing: .04em;
  color: #ffd84a; -webkit-text-stroke: 2px #7a5200; word-break: break-word;
  text-shadow: 0 4px 0 #a97800, 0 0 28px rgba(255, 216, 74, .85), 0 8px 24px #000;
  animation: fx-zoom .9s cubic-bezier(.2, 1.4, .4, 1) both;
}
.fx-win-hint {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .6);
  font: 13px system-ui, sans-serif; animation: fx-fadein 1s 1.5s both;
}
@keyframes fx-zoom { 0% { transform: scale(.1) rotate(-8deg); opacity: 0 } 60% { opacity: 1 } 100% { transform: scale(1) rotate(0); opacity: 1 } }
@keyframes fx-fadein { from { opacity: 0 } to { opacity: 1 } }

/* ---------- moedas voando entre cards ---------- */
.fx-steal { position: absolute; inset: 0; }
.fx-flycoin {
  position: absolute; margin: -14px 0 0 -14px; font-size: 28px; line-height: 1; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(245, 197, 66, .9)); animation: fx-fly .8s both;
}
@keyframes fx-fly {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; animation-timing-function: ease-out }
  15% { opacity: 1 }
  50% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5 - 70px)) scale(1.3); animation-timing-function: ease-in }
  100% { transform: translate(var(--dx), var(--dy)) scale(.8); opacity: 0 }
}

/* ---------- sair / pulso / brilho ---------- */
.fx-leave { animation: fx-leave 1s ease-in both; }
@keyframes fx-leave {
  0% { transform: translateY(0) rotate(0); opacity: 1 }
  100% { transform: translateY(-140px) rotate(540deg) scale(.6); opacity: 0 }
}
.fx-pulse { animation: fx-pulse .6s ease-out; }
@keyframes fx-pulse {
  0% { transform: scale(1) }
  35% { transform: scale(1.22); filter: drop-shadow(0 0 10px #f5c542) brightness(1.3) }
  100% { transform: scale(1) }
}
.fx-glow { animation: fx-glow 1.2s ease-out; }
@keyframes fx-glow {
  0% { box-shadow: 0 0 0 0 rgba(245, 197, 66, 0) }
  25% { box-shadow: 0 0 22px 6px rgba(245, 197, 66, .85) }
  100% { box-shadow: 0 0 0 0 rgba(245, 197, 66, 0) }
}

/* ---------- reduced motion: só fades curtos ---------- */
@keyframes fx-rm-fade { 0% { opacity: 0 } 15% { opacity: 1 } 80% { opacity: 1 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  .fx-anim, .fx-stamp, .fx-shield, .fx-ring, .fx-banner, .fx-gavel, .fx-band {
    animation: fx-rm-fade 1.2s both !important; transform: none !important;
  }
  .fx-stamp { transform: rotate(var(--rot)) !important; }
  .fx-win-text { animation: fx-fadein .4s both !important; transform: none !important; }
  .fx-flip, .fx-pulse, .fx-glow { animation: fx-fadein .3s both !important; }
  .fx-leave { animation: fx-rm-leave .6s both !important; }
  @keyframes fx-rm-leave { to { opacity: 0 } }
  body.fx-shake { animation: none !important; }
}