/* Battle VFX overlays (js/fx.js + js/battle-ui.js). Durations come in as --d so game speed is respected. */

/* tier 3: letterbox + darken + colour wash */
.vfx-cine { position: absolute; inset: 0; pointer-events: none; --c: #f2c14e;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 4, 16, .55) 100%);
  animation: vfxCine var(--d, 950ms) ease-out forwards; }
.vfx-cine.enemy { background: radial-gradient(ellipse at center, transparent 25%, rgba(40, 0, 8, .6) 100%); }
.vfx-cine .lb { position: absolute; left: 0; right: 0; height: 11vh; background: #07030b; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent); }
.vfx-cine .lb.t { top: 0; transform: translateY(-100%); animation: vfxLbT var(--d, 950ms) cubic-bezier(.2, .9, .3, 1) forwards; }
.vfx-cine .lb.b { bottom: 0; transform: translateY(100%); animation: vfxLbB var(--d, 950ms) cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes vfxCine { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vfxLbT { 0% { transform: translateY(-100%); } 15%, 78% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes vfxLbB { 0% { transform: translateY(100%); } 15%, 78% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* colour-graded wash at impact */
.vfx-grade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color; opacity: 0; animation: vfxGrade var(--d, 650ms) ease-out forwards; }
@keyframes vfxGrade { 0% { opacity: .25; } 100% { opacity: 0; } }

/* True damage: black/white inverted flash */
.vfx-invert { position: absolute; inset: 0; pointer-events: none; backdrop-filter: invert(1) grayscale(1) contrast(1.4); -webkit-backdrop-filter: invert(1) grayscale(1) contrast(1.4); animation: vfxFade var(--d, 140ms) steps(2, end) forwards; }
@keyframes vfxFade { 0% { opacity: 1; } 100% { opacity: 0; } }

/* time stop / time erase: the world goes grey */
.vfx-grey { position: absolute; inset: 0; pointer-events: none; backdrop-filter: grayscale(1) contrast(1.15) brightness(.85); -webkit-backdrop-filter: grayscale(1) contrast(1.15) brightness(.85);
  background: radial-gradient(circle at 50% 45%, rgba(255, 216, 74, .12), rgba(20, 10, 30, .25) 70%); animation: vfxGrey var(--d, 900ms) ease-in-out forwards; }
.vfx-grey.red { background: radial-gradient(circle at 50% 45%, rgba(200, 50, 60, .22), rgba(40, 0, 10, .35) 70%); backdrop-filter: grayscale(.8) sepia(.5) hue-rotate(-30deg) contrast(1.2); -webkit-backdrop-filter: grayscale(.8) sepia(.5) hue-rotate(-30deg) contrast(1.2); }
@keyframes vfxGrey { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* big kana SFX text (tier 3) */
.vfx-kana { position: absolute; transform: translate(-50%, -50%); font-family: var(--f-sfx, Bangers, Impact, sans-serif); font-weight: bold; white-space: nowrap; letter-spacing: .02em;
  -webkit-text-stroke: 3px #1a1020; paint-order: stroke fill; text-shadow: 6px 6px 0 #1a1020, 0 0 24px currentColor; pointer-events: none;
  animation: vfxKana var(--d, 850ms) cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes vfxKana { 0% { transform: translate(-50%, -50%) scale(2.4) rotate(-8deg); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); opacity: 1; } 75% { transform: translate(-50%, -52%) scale(1.06) rotate(-4deg); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1.12) rotate(-4deg); opacity: 0; } }

/* Stand hits: menacing ゴゴゴ */
.vfx-menace { position: absolute; transform: translate(-50%, -50%); font-family: var(--f-sfx, Bangers, Impact, sans-serif); font-weight: bold; pointer-events: none;
  -webkit-text-stroke: 2px #1a1020; paint-order: stroke fill; text-shadow: 3px 3px 0 #1a1020; animation: vfxMenace var(--d, 800ms) ease-out forwards; }
@keyframes vfxMenace { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6) skewX(-8deg); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1) skewX(-8deg); } 100% { opacity: 0; transform: translate(-50%, -110%) scale(1.1) skewX(-8deg); } }

/* slow-motion zoom punch on the field */
.battle-field.vfx-zoom { animation: vfxZoom var(--d, 520ms) cubic-bezier(.2, .9, .3, 1); }
@keyframes vfxZoom { 0% { transform: scale(1); } 20% { transform: scale(1.045); } 100% { transform: scale(1); } }

/* stronger tier-3 quake */
#app.vfx-quake { animation: vfxQuake var(--d, 560ms) cubic-bezier(.36, .07, .19, .97); }
@keyframes vfxQuake { 10% { transform: translate(-4px, 2px) rotate(-.3deg); } 20% { transform: translate(8px, -4px) rotate(.3deg); } 30% { transform: translate(-10px, 5px); } 40% { transform: translate(10px, -3px) rotate(-.2deg); } 55% { transform: translate(-6px, 3px); } 70% { transform: translate(4px, -2px); } 85% { transform: translate(-2px, 1px); } 100% { transform: translate(0, 0); } }

/* acting card powers up for strong moves */
.unit-card.vfx-charge .uc-frame { filter: drop-shadow(0 0 10px var(--vc, #f2c14e)) brightness(1.12); transition: filter .1s; }
.unit-card.vfx-charge3 .uc-frame { filter: drop-shadow(0 0 18px var(--vc, #f2c14e)) drop-shadow(0 0 4px #fff) brightness(1.25) saturate(1.3); transition: filter .1s; }

/* SFX word colours for the new looks, and size by tier */
.sfx-text.k-fire, .sfx-text.k-firebind { color: #ff9a2a; } .sfx-text.k-ripple, .sfx-text.k-uv { color: #ffd84a; } .sfx-text.k-beam { color: #bff4ff; }
.sfx-text.k-timestop { color: #ffd84a; } .sfx-text.k-timeskip { color: #c8323c; } .sfx-text.k-rewind, .sfx-text.k-bomb, .sfx-text.k-prime { color: #e8a0c8; }
.sfx-text.k-zipper, .sfx-text.k-string { color: #5a8ad0; } .sfx-text.k-erase { color: #3a6ac8; } .sfx-text.k-emerald { color: #3ad07a; } .sfx-text.k-rapier { color: #e8ecf8; }
.sfx-text.k-lasso { color: #c8a070; } .sfx-text.k-disc { color: #e8e8f0; } .sfx-text.k-blood { color: #c8323c; } .sfx-text.k-ice { color: #9fd0f0; } .sfx-text.k-gatling { color: #fff3a0; } .sfx-text.k-restore { color: #e89ac8; }
.sfx-text.vfx-t0 { font-size: 30px; } .sfx-text.vfx-t2 { font-size: 54px; } .sfx-text.vfx-t3 { font-size: 66px; -webkit-text-stroke-width: 3px; }

/* reduced motion: keep colour cues, drop the movement */
body.reduced .vfx-cine .lb { animation: vfxCine var(--d, 950ms) linear forwards; transform: none; }
body.reduced .vfx-kana { animation: vfxCine var(--d, 850ms) linear forwards; transform: translate(-50%, -50%); }
body.reduced .vfx-menace { animation: vfxCine var(--d, 800ms) linear forwards; transform: translate(-50%, -50%); }
body.reduced .vfx-invert { display: none; }

/* ---- multi-target picks and area waves ---- */
.battle.targeting .unit-card.target-picked .uc-frame { box-shadow: 0 0 0 5px var(--gold, #f2c14e), 0 0 18px 4px rgba(242, 193, 78, .8), 6px 6px 0 var(--ink); animation: none; }
.unit-card.target-picked { position: relative; }
.unit-card.target-picked::after { content: attr(data-pickn); position: absolute; top: -12px; right: -8px; z-index: 6; width: 30px; height: 30px; display: grid; place-items: center; background: var(--gold, #f2c14e); color: var(--ink); border: 3px solid var(--ink); border-radius: 50%; font-family: var(--f-sfx, Anton, Impact, sans-serif); font-size: 17px; box-shadow: 3px 3px 0 var(--ink); animation: pickpop .25s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes pickpop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
.target-hint.multi { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 12px; animation: none; white-space: nowrap; }
.target-hint .th-count { display: flex; gap: 3px; }
.target-hint .th-count i { width: 12px; height: 12px; border: 2px solid var(--ink); background: rgba(255, 255, 255, .35); transform: rotate(45deg); }
.target-hint .th-count i.on { background: var(--gold, #f2c14e); }
.target-hint .th-text em { font-style: normal; color: var(--gold, #f2c14e); }
.target-hint .th-btn { font: inherit; font-size: 13px; padding: 2px 10px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.target-hint .th-btn.go { background: var(--gold, #f2c14e); }
.target-hint .th-btn.disabled { opacity: .45; pointer-events: none; }
.target-hint .th-esc { font-size: 11px; opacity: .8; }
.ab-pick { position: absolute; top: -9px; right: -7px; z-index: 2; padding: 0 5px; background: var(--gold, #f2c14e); color: var(--ink); border: 2px solid var(--ink); font-family: var(--f-sfx, Anton, Impact, sans-serif); font-size: 12px; line-height: 16px; transform: rotate(6deg); box-shadow: 2px 2px 0 var(--ink); }
.ab-pick.all { background: var(--pink, #e8508a); color: #fff; }
.tip-ab b.pick { color: var(--gold, #f2c14e); }
.tip-spread { opacity: .85; font-size: 12px; }
.unit-card.aoe-hit .uc-frame { animation: aoehit .55s ease-out; }
@keyframes aoehit { 0% { filter: brightness(3) saturate(0); transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); filter: brightness(1.6); } 70% { transform: translateX(-2px); } 100% { filter: none; transform: none; } }
@media (max-width: 700px) { .target-hint.multi { white-space: normal; flex-wrap: wrap; justify-content: center; max-width: 92vw; } }