/* fx — YANIV!/ASAF! burst, particle canvas, score pops, screen shake (owner: js/fx.js) */

#fxCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 86; pointer-events: none; }
#fxLayer { position: absolute; inset: 0; z-index: 87; pointer-events: none; overflow: hidden; }

/* ------------------------------------------------------------ call burst */
#callFx.cfx {
  position: absolute; inset: 0; z-index: 85; display: block; pointer-events: none; overflow: hidden;
  font-size: 16px; color: #fff; transform: none; animation: none; text-shadow: none; -webkit-text-stroke: 0;
  contain: layout paint;
}
.cfx > div { position: absolute; }
.cfx-dim { inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(40, 22, 0, 0.18), rgba(30, 15, 0, 0.55)); opacity: 0; }
.cfx.is-asaf .cfx-dim { background: radial-gradient(120% 90% at 50% 45%, rgba(60, 0, 0, 0.25), rgba(45, 0, 0, 0.7)); }
.cfx-flash { inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255, 252, 230, 0.95), rgba(255, 220, 90, 0.55) 35%, transparent 72%); opacity: 0; }
.cfx.is-asaf .cfx-flash { background: radial-gradient(circle at 50% 45%, rgba(255, 225, 215, 0.95), rgba(235, 50, 35, 0.6) 35%, transparent 72%); }

.cfx-rays {
  left: 50%; top: 45%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 3.4deg, rgba(255, 255, 255, 0.75) 3.4deg 4.6deg, transparent 4.6deg 7.5deg);
  -webkit-mask: radial-gradient(circle, transparent 8%, #000 22%, #000 34%, transparent 56%);
          mask: radial-gradient(circle, transparent 8%, #000 22%, #000 34%, transparent 56%);
  opacity: 0;
}
.cfx.is-asaf .cfx-rays { background: repeating-conic-gradient(from 0deg, transparent 0deg 3.4deg, rgba(255, 200, 190, 0.7) 3.4deg 4.6deg, transparent 4.6deg 7.5deg); }

.cfx-burst {
  left: 50%; top: 45%; width: min(100vw, 560px); aspect-ratio: 1; margin-left: calc(min(100vw, 560px) / -2); margin-top: calc(min(100vw, 560px) / -2);
  opacity: 0;
}
.cfx-burst.back { background: #4a2400; scale: 1.07; }
.cfx-burst.front { background: radial-gradient(circle, #fffbe0 0 22%, #ffe14a 46%, #ffb21c 72%, #ff8a00 100%); }
.cfx-burst.front::after { /* comic halftone */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(170, 70, 0, 0.32) 1.6px, transparent 2.2px) 0 0 / 9px 9px;
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 70%); mask: radial-gradient(circle, transparent 38%, #000 70%);
}
.cfx.is-asaf .cfx-burst.back { background: #3d0300; }
.cfx.is-asaf .cfx-burst.front { background: radial-gradient(circle, #ffe2dc 0 18%, #ff6a55 44%, #e0261a 72%, #9c0e06 100%); }
.cfx.is-asaf .cfx-burst.front::after { background-image: radial-gradient(circle, rgba(90, 0, 0, 0.35) 1.6px, transparent 2.2px); }
.cfx.is-info .cfx-burst.front { background: radial-gradient(circle, #ffffff 0 22%, #b9f1ff 46%, #34d3ff 75%, #0a86b4 100%); }
.cfx.is-info .cfx-burst.back { background: #073a52; }

.cfx-stack { left: 0; right: 0; top: 45%; translate: 0 -50%; text-align: center; line-height: 1; }
.cfx-word {
  position: relative; display: inline-block; rotate: -6deg;
  font-family: Bangers, Impact, sans-serif; font-size: clamp(76px, 25vw, 150px); line-height: 0.9; letter-spacing: 2px;
  color: #ffe14a; -webkit-text-stroke: 5px #4a2400; paint-order: stroke fill;
  text-shadow: 0 6px 0 #e08a00, 0 11px 0 #8a4b00, 0 20px 26px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
.cfx-word i { display: inline-block; font-style: normal; }
.cfx.is-asaf .cfx-word { color: #fff2ee; -webkit-text-stroke-color: #4d0000; text-shadow: 0 6px 0 #e0261a, 0 11px 0 #7a0a04, 0 20px 26px rgba(0, 0, 0, 0.5); }
.cfx.is-info .cfx-word { color: #fff; -webkit-text-stroke-color: #073a52; text-shadow: 0 6px 0 #34d3ff, 0 11px 0 #0a6e94, 0 20px 26px rgba(0, 0, 0, 0.4); }

.cfx-who {
  position: relative; display: inline-block; rotate: -6deg; margin-bottom: 6px;
  font-family: Bangers, Impact, sans-serif; font-size: 24px; letter-spacing: 2px; color: #fff;
  background: #2b1d10; padding: 5px 14px 3px; border-radius: 6px; border: 2.5px solid #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); max-width: 86vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfx.is-asaf .cfx-who { background: #5a0400; }
.cfx-sub {
  position: relative; display: inline-block; rotate: -6deg; margin-top: 10px;
  font-family: Bangers, Impact, sans-serif; font-size: 40px; letter-spacing: 1.5px; color: #fff;
  -webkit-text-stroke: 3px #2b1d10; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.cfx.is-asaf .cfx-sub { color: #ffe14a; font-size: 54px; -webkit-text-stroke-color: #4d0000; }

/* timeline: ~1.35s total; JS hides the layer at 1.45s */
.cfx.play .cfx-dim   { animation: cfxDim 1.35s ease-out both; }
.cfx.play .cfx-flash { animation: cfxFlash 0.34s ease-out both; }
.cfx.play .cfx-rays  { animation: cfxRays 1.35s cubic-bezier(0.15, 0.7, 0.3, 1) both; }
.cfx.play .cfx-burst { animation: cfxBurst 1.35s ease-out both; }
.cfx.play .cfx-stack { animation: cfxStackOut 0.26s ease-in 1.08s both; }
.cfx.play .cfx-word  { animation: cfxShake 0.42s linear 0.12s both; }
.cfx.play .cfx-word i { animation: cfxSlam 0.44s cubic-bezier(0.2, 1.6, 0.35, 1) both; animation-delay: calc(var(--i) * 30ms); }
.cfx.play .cfx-who   { animation: cfxDrop 0.34s cubic-bezier(0.2, 1.5, 0.4, 1) 0.05s both; }
.cfx.play .cfx-sub   { animation: cfxPopIn 0.36s cubic-bezier(0.2, 1.7, 0.4, 1) 0.32s both; }

@keyframes cfxDim { 0% { opacity: 0; } 8% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cfxFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cfxRays {
  0% { opacity: 0; transform: scale(0.45) rotate(0deg); }
  10% { opacity: 1; }
  80% { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.25) rotate(16deg); }
}
@keyframes cfxBurst {
  0% { opacity: 0; transform: scale(0.1) rotate(-25deg); }
  9% { opacity: 1; transform: scale(1.14) rotate(5deg); }
  16% { transform: scale(0.95) rotate(-1deg); }
  22% { transform: scale(1.02) rotate(0deg); }
  78% { opacity: 1; transform: scale(1.04) rotate(3deg); }
  100% { opacity: 0; transform: scale(1.2) rotate(5deg); }
}
@keyframes cfxSlam { 0% { opacity: 0; transform: translateY(-22%) scale(3.2); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes cfxShake {
  0%, 100% { translate: 0 0; }
  12% { translate: -7px 4px; } 26% { translate: 6px -5px; } 40% { translate: -5px -2px; }
  55% { translate: 4px 3px; } 70% { translate: -2px 2px; } 85% { translate: 1px -1px; }
}
@keyframes cfxDrop { 0% { opacity: 0; transform: translateY(-60px) scale(0.6); } 100% { opacity: 1; transform: none; } }
@keyframes cfxPopIn { 0% { opacity: 0; transform: scale(0.2) rotate(-14deg); } 100% { opacity: 1; transform: none; } }
@keyframes cfxStackOut { to { opacity: 0; transform: scale(1.18); } }

/* ------------------------------------------------------------ score pops */
.fx-pop {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity;
  font-family: Bangers, Impact, sans-serif; font-size: 32px; letter-spacing: 1px; line-height: 1;
  color: #fff; -webkit-text-stroke: 3px #2b1d10; paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  animation: fxPop 1.55s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.fx-pop.big { font-size: 42px; }
.fx-pop.zero { color: #ffe14a; }
.fx-pop.good { color: #7cf29a; -webkit-text-stroke-color: #0b3d1a; font-size: 26px; }
.fx-pop.hurt { color: #ffb4a8; -webkit-text-stroke-color: #4d0a00; }
.fx-pop.bad { color: #ff5a4a; -webkit-text-stroke-color: #3a0000; }
.fx-pop.out { color: #fff; -webkit-text-stroke-color: #000; background: #c81e12; padding: 6px 10px 3px; border-radius: 6px; border: 2.5px solid #fff; -webkit-text-stroke-width: 2px; animation-name: fxPopOut; animation-duration: 1.7s; }
@keyframes fxPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  13% { opacity: 1; transform: translate(-50%, -62%) scale(1.3); }
  24% { transform: translate(-50%, -66%) scale(1); }
  72% { opacity: 1; transform: translate(-50%, -150%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(0.92); }
}
@keyframes fxPopOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(-14deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(0.92) rotate(-8deg); }
  22% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); }
  80% { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(-8deg); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.95) rotate(-8deg); }
}

/* ------------------------------------------------------------ screen shake (translate composes with any transform) */
#table.fx-shake { animation: fxShake 0.42s linear; }
#table.fx-shake-strong { animation: fxShakeStrong 0.55s linear; }
@keyframes fxShake {
  0%, 100% { translate: 0 0; }
  10% { translate: -5px 3px; } 25% { translate: 5px -3px; } 40% { translate: -4px -2px; }
  55% { translate: 3px 2px; } 70% { translate: -2px 1px; } 85% { translate: 1px -1px; }
}
@keyframes fxShakeStrong {
  0%, 100% { translate: 0 0; }
  8% { translate: -9px 4px; } 18% { translate: 8px -5px; } 30% { translate: -7px -3px; } 42% { translate: 6px 4px; }
  55% { translate: -4px 2px; } 68% { translate: 3px -2px; } 82% { translate: -1px 1px; }
}

/* perf.js low quality: keep the burst, drop the expensive layers and the shake */
html[data-quality="low"] .cfx-rays, html[data-quality="low"] .cfx-burst.front::after { display: none; }
html[data-quality="low"] #table.fx-shake, html[data-quality="low"] #table.fx-shake-strong { animation: none; }

/* ------------------------------------------------------------ native-feel press (haptic tick in fx.js)
   Uses the individual `scale` property: composes with any transform/rotate and needs no transition override. */
button:not(:disabled):active, [role="button"]:active, .btn:active, .wood:active, .menu-item:active, .take-card:active { scale: 0.96; }

/* ------------------------------------------------------------ reduced motion: fade only, no shake/rays/particles */
@media (prefers-reduced-motion: reduce) {
  .cfx-rays, .cfx-flash { display: none; }
  .cfx.play .cfx-burst, .cfx.play .cfx-word, .cfx.play .cfx-word i, .cfx.play .cfx-who, .cfx.play .cfx-sub {
    animation: cfxFadeHold 1.35s linear both;
  }
  .cfx.play .cfx-stack { animation: none; }
  #table.fx-shake, #table.fx-shake-strong { animation: none; }
  .fx-pop, .fx-pop.out { animation: cfxFadeHold 1.5s linear both; transform: translate(-50%, -100%); }
}
@keyframes cfxFadeHold { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }