/* Anime battle effects (ui/fx.js). Celebrations only, never for mistakes. */

.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 120; overflow: hidden; }
body.fx-shaking { overflow-x: clip; }

/* zoom punch */
.fx-punch { animation: fx-punch 0.42s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes fx-punch {
  0% { transform: scale(1); }
  25% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

/* motion lines streaking across the card */
.fx-motion { position: fixed; pointer-events: none; overflow: hidden; border-radius: var(--radius); }
.fx-motion svg { width: 100%; height: 100%; display: block; }
.fx-motion-line { animation: fx-streak 0.55s ease-out forwards; opacity: 0.85; }
@keyframes fx-streak {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translateX(170px); opacity: 0; }
}

/* screen shake */
.fx-shake { animation: fx-shake 0.4s linear; }
@keyframes fx-shake {
  0%, 100% { translate: 0 0; }
  15% { translate: calc(var(--shake, 6px) * -1) calc(var(--shake, 6px) * .4); }
  30% { translate: var(--shake, 6px) calc(var(--shake, 6px) * -.5); }
  45% { translate: calc(var(--shake, 6px) * -.7) 0; }
  60% { translate: calc(var(--shake, 6px) * .6) calc(var(--shake, 6px) * .3); }
  80% { translate: calc(var(--shake, 6px) * -.3) 0; }
}

/* impact flash */
.fx-flash { position: absolute; inset: 0; background: #fff; animation: fx-flash 0.4s ease-out forwards; }
@keyframes fx-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

/* combo stamp */
.fx-stamp {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  top: 84px;
  padding: 6px 16px;
  font-weight: 900;
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-style: italic;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--fx-colour, #ffb347);
  border: 3px solid #2b2140;
  border-radius: 10px;
  box-shadow: 4px 4px 0 #2b2140;
  -webkit-text-stroke: 1px #2b2140;
  transform: rotate(-8deg);
  animation: fx-stamp 1.35s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.fx-stamp.calm { animation: fx-fade 1.35s ease-out forwards; }
@keyframes fx-stamp {
  0% { transform: rotate(-8deg) scale(2.6); opacity: 0; }
  15% { transform: rotate(-8deg) scale(0.92); opacity: 1; }
  25% { transform: rotate(-8deg) scale(1); }
  80% { opacity: 1; }
  100% { transform: rotate(-8deg) scale(1) translateY(-14px); opacity: 0; }
}
@keyframes fx-fade { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } }

/* full-screen technique */
.fx-special {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  background: rgb(20 15 34 / 72%);
  animation: fx-in 0.12s ease-out;
}
.fx-special.calm { background: rgb(20 15 34 / 55%); animation: fx-fade-in 0.25s ease-out; }
.fx-special.out { opacity: 0; transition: opacity 0.2s; }
@keyframes fx-in { from { opacity: 0; } }
@keyframes fx-fade-in { from { opacity: 0; } }

.fx-special-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-special-tint { fill: var(--fx-colour); opacity: 0.35; transform: scale(8); transform-origin: 200px 150px; }
.fx-speed { transform-origin: 200px 150px; animation: fx-spin 2.4s linear infinite, fx-flicker 0.12s steps(2) infinite; }
@keyframes fx-spin { to { transform: rotate(6deg); } }
@keyframes fx-flicker { 50% { opacity: 0.75; } }
.fx-impact, .fx-impact-core { transform-origin: 200px 150px; animation: fx-boom 0.5s cubic-bezier(.2, 1.5, .4, 1) both; }
.fx-impact-core { animation-delay: 0.05s; }
@keyframes fx-boom { 0% { transform: scale(0.1) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
.fx-ring { fill: none; stroke: #fff; stroke-width: 5; transform-origin: 200px 150px; animation: fx-ring 1s ease-out 0.15s both; }
.fx-ring.r2 { animation-delay: 0.45s; }
@keyframes fx-ring { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(4.5); opacity: 0; } }

.fx-special-body { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 16px; text-align: center; }
.fx-special-kitsu { animation: fx-rise 0.5s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(0 0 18px var(--fx-colour)); }
@keyframes fx-rise { from { transform: translateY(40px) scale(0.6); opacity: 0; } }
.fx-special-name {
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2rem, 9vw, 5.2rem);
  line-height: 1.05;
  color: #fff;
  -webkit-text-stroke: 2px #2b2140;
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 #2b2140, 0 0 28px var(--fx-colour);
  max-width: 100%;
  overflow-wrap: anywhere;
  animation: fx-slam 0.45s cubic-bezier(.2, 1.6, .4, 1) 0.08s both;
}
@keyframes fx-slam {
  0% { transform: scale(3.2) skewX(-12deg); opacity: 0; letter-spacing: 0.3em; }
  60% { transform: scale(0.94) skewX(-6deg); opacity: 1; }
  100% { transform: scale(1) skewX(-6deg); letter-spacing: 0.01em; }
}
.fx-special-line {
  font-weight: 800;
  font-size: clamp(1rem, 3.5vw, 1.6rem);
  color: #2b2140;
  background: #fff6c9;
  border: 3px solid #2b2140;
  border-radius: 999px;
  padding: 4px 18px;
  animation: fx-rise 0.4s ease-out 0.3s both;
}
.fx-special.calm .fx-special-name,
.fx-special.calm .fx-special-line,
.fx-special.calm .fx-special-kitsu { animation: none; }
.fx-special.calm .fx-special-name { font-size: clamp(1.8rem, 7vw, 3.6rem); }

@media (prefers-reduced-motion: reduce) {
  .fx-motion, .fx-flash { display: none; }
}

/* settings toggle */
.fx-toggle { display: flex; gap: 8px; flex-wrap: wrap; }