/* Temporary, inert overlays: every action remains usable without animation. */
.battle-effects { position: fixed; inset: 0; z-index: 1200; pointer-events: none !important; overflow: hidden; contain: layout style; isolation: isolate; }
.battle-effects * { pointer-events: none !important; }

/* Action and turn banners */
.fx-action-banner { position: absolute; top: calc(var(--header-h, 56px) + 2px); left: 50%; z-index: 8; width: max-content; max-width: min(640px, calc(100% - 28px)); padding: 10px 28px 11px; transform: translateX(-50%); overflow: hidden; text-align: center; color: #fff1c9; border: 1px solid #cfa55e; border-top-color: #ffe0a2; border-radius: 3px; background: linear-gradient(100deg, #101a23f5, #253440fa 50%, #101a23f5); box-shadow: 0 9px 35px #000b, 0 0 22px #d9b77428, inset 0 0 0 3px #0005; }
.fx-action-banner::before, .fx-action-banner::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg); background: #dfbd77; box-shadow: 0 0 6px #dfbd77; }
.fx-action-banner::before { left: 11px; }
.fx-action-banner::after { right: 11px; }
.fx-action-banner strong { display: block; font: 700 19px/1.25 var(--font-display, Georgia, serif); letter-spacing: .02em; text-shadow: 0 2px 5px #000; }
.fx-action-banner > span { display: -webkit-box; margin-top: 3px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.4; color: #e0dfd0; text-wrap: balance; }
.fx-action-banner.fx-turn-banner { top: 30%; padding: 22px 64px 24px; border-color: #e3c487; box-shadow: 0 12px 70px #000e, 0 0 60px #d9b77438, inset 0 0 0 3px #0006; }
.fx-turn-banner strong { font-size: 32px; letter-spacing: .04em; }
.fx-turn-banner > span { display: none; }
.fx-own-turn { background: linear-gradient(100deg, #0f1c1ef5, #2b3a34fa 50%, #0f1c1ef5); }
.fx-own-turn strong { color: #ffe6a6; text-shadow: 0 0 24px #ffcc5c99, 0 2px 5px #000; }
.fx-enemy-turn { border-color: #d98a6a; background: linear-gradient(100deg, #1c1112f5, #3a2522fa 50%, #1c1112f5); }
.fx-enemy-turn strong { color: #ffc9b4; text-shadow: 0 0 24px #ff6a4a88, 0 2px 5px #000; }
.fx-enemy-turn::before, .fx-enemy-turn::after { background: #e58b6c; box-shadow: 0 0 6px #e58b6c; }
/* A beam of light sweeps across the turn banner. */
.fx-turn-banner > strong::after { content: ""; position: absolute; inset: -40% auto -40% -30%; width: 30%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, #fff6d855, transparent); animation: fx-sweep 1.1s .1s ease-out both; }
@keyframes fx-sweep { from { left: -35%; } to { left: 120%; } }

/* The played card: it travels from the hand (or the opposing hero) and lands on its target. */
.fx-played-card { position: absolute; z-index: 5; overflow: hidden; transform-origin: 50% 50%; border: 2px solid #edca88; border-radius: 9px; background: #17222a; box-shadow: 0 16px 34px #000d, 0 0 34px #e6bb6970, inset 0 0 0 4px #121922; will-change: transform, opacity; }
.fx-played-card > .artwork { position: absolute; inset: 0 0 34px; display: block; }
.fx-played-card > .artwork::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, #10171afa); }
.fx-played-card > strong { position: absolute; inset: auto 0 0; padding: 9px 6px; text-align: center; font: 700 15px/1.2 var(--font-display, Georgia, serif); color: #fff0cb; text-shadow: 0 1px 3px #000; background: linear-gradient(#25333c, #111a22); border-top: 1px solid #c7a86b; }
.fx-card-type { position: absolute; top: 7px; left: 8px; max-width: calc(100% - 16px); padding: 3px 7px; border: 1px solid #d9ba7070; border-radius: 2px; background: #111923dd; color: #f2d49a; font: 700 11px/1.2 var(--font-body, sans-serif); letter-spacing: .1em; }

/* Units in motion */
.fx-unit-ghost { position: absolute; z-index: 3; box-sizing: border-box; transform-origin: center; filter: drop-shadow(0 6px 18px #000b); will-change: transform; }
.fx-unit-ghost:has(> .battle-creature) { container-type: size; }
.fx-unit-ghost > :first-child { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; transform: none !important; opacity: 1 !important; box-sizing: border-box; visibility: visible !important; }
.fx-attacking-unit { z-index: 6; border-radius: 5px; outline: 2px solid #ffe0a4; box-shadow: 0 0 24px #f8d4789c; }
.fx-moving-unit { border-radius: 5px; outline: 2px solid #9ae5ee; box-shadow: 0 0 20px #8acbdb60; }
.fx-departed { z-index: 4; }

/* Projectiles */
.fx-connection { position: absolute; z-index: 2; height: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, #ffe7a440, #ffdaa6); box-shadow: 0 0 8px #ffbe78; }
.fx-connection.fx-magic { background: linear-gradient(90deg, #8bd8ff35, #a6edff); box-shadow: 0 0 12px #68d7ff; }
.fx-projectile, .fx-arrow, .fx-orb, .fx-orb-trail { position: absolute; top: 0; left: 0; z-index: 7; will-change: transform; }
.fx-arrow { width: 44px; height: 4px; margin: -2px 0 0 -40px; border-radius: 2px; background: linear-gradient(90deg, transparent, #9c7a48 30%, #e9d3a6); box-shadow: 0 0 10px #ffd38a99; }
.fx-arrow::after { content: ""; position: absolute; top: -4px; right: -7px; border-left: 10px solid #f6ecd4; border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 0 4px #ffe2a8); }
.fx-arrow::before { content: ""; position: absolute; top: -3px; left: 2px; width: 9px; height: 10px; background: linear-gradient(#c94f3c, #7e2a21); clip-path: polygon(0 0, 100% 35%, 100% 65%, 0 100%); }
.fx-orb { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle, #fff 0, var(--core, #f1fbff) 35%, var(--glow, #6fc6ff) 70%, transparent 72%); box-shadow: 0 0 18px 6px var(--glow, #6fc6ff), 0 0 40px 12px color-mix(in srgb, var(--glow, #6fc6ff) 45%, transparent); }
.fx-orb-trail { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--glow, #6fc6ff); filter: blur(2px); box-shadow: 0 0 12px var(--glow, #6fc6ff); }
.fx-projectile { width: 30px; height: 8px; margin: -4px 0 0 -26px; border-radius: 50%; background: linear-gradient(90deg, transparent, #edb865, #fff9e4); box-shadow: 0 0 12px 4px #fdd177a0; }

.fx-bolt { position: absolute; inset: 0; z-index: 8; overflow: visible; }
.fx-bolt-glow { fill: none; stroke: #8fd3ff; stroke-width: 12; stroke-linejoin: round; opacity: .45; filter: blur(4px); }
.fx-bolt-core { fill: none; stroke: #f4fbff; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 6px #bfe6ff) drop-shadow(0 0 14px #6fc6ff); }
.fx-sky-flash { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 0%, #e6f6ff, #9fd6ff66 45%, transparent 80%); mix-blend-mode: screen; }

/* Impacts */
.fx-impact { --impact: #edcf8c; position: absolute; z-index: 4; border: 2px solid var(--impact); border-radius: 6px; background: color-mix(in srgb, var(--impact) 14%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--impact) 65%, transparent), inset 0 0 24px color-mix(in srgb, var(--impact) 50%, transparent); }
.fx-impact.fx-damage, .fx-impact.fx-death { --impact: #ff7865; }
.fx-impact.fx-heal { --impact: #80f0ad; }
.fx-impact.fx-spawn, .fx-impact.fx-attribute, .fx-impact.fx-buff, .fx-impact.fx-resource { --impact: #ffe096; }
.fx-impact.fx-return, .fx-impact.fx-draw { --impact: #8adeec; }
.fx-flash { position: absolute; z-index: 6; border-radius: 6px; mix-blend-mode: screen; }
.fx-flash-white { background: radial-gradient(ellipse at center, #ffffffee, #fff2d080 45%, transparent 75%); }
.fx-flash-magic { background: radial-gradient(ellipse at center, #ffffffdd, #cbe9ff88 40%, transparent 75%); }
.fx-slash { position: absolute; z-index: 7; height: 4px; transform-origin: center; border-radius: 50%; background: linear-gradient(90deg, transparent, #fff 45%, #ffe7b3 60%, transparent); box-shadow: 0 0 10px #fff, 0 0 18px #ffcf7a; }
.fx-particle { position: absolute; z-index: 7; border-radius: 50%; will-change: transform, opacity; }
.fx-particle.fx-ember { border-radius: 1px; }
.fx-soul { position: absolute; top: 0; left: 0; z-index: 7; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle, #fff, #d6e6ff 40%, #8fb3ff00 72%); box-shadow: 0 0 16px 6px #9fc0ff88; }
.fx-dust { position: absolute; z-index: 3; height: 26px; border-radius: 50%; background: radial-gradient(ellipse at center, #e9dcc0aa, #b7a78955 45%, transparent 70%); filter: blur(1px); }
.fx-rays { position: absolute; z-index: 5; transform-origin: 50% 100%; border-radius: 4px; background: linear-gradient(0deg, #ffe7a066, #ffe7a01c 60%, transparent), repeating-linear-gradient(90deg, transparent 0 10px, #fff3cc33 10px 12px, transparent 12px 22px); mix-blend-mode: screen; }
.fx-vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, transparent 55%, #b0120a55 80%, #6e0500aa 100%); }
.fx-card-back { position: absolute; top: 0; left: 0; z-index: 6; width: 46px; height: 62px; border: 2px solid #b39a64; border-radius: 4px; background: repeating-linear-gradient(45deg, #263d46 0 2px, #1a2b33 2px 8px); box-shadow: 0 6px 14px #000b, 0 0 12px #e6c47a55; backface-visibility: visible; }

/* Floating combat text: big outlined numbers, small labelled pills for everything else. */
.fx-number { position: absolute; z-index: 9; width: max-content; max-width: min(240px, calc(100vw - 28px)); padding: 3px 10px; transform: translateX(-50%); text-align: center; white-space: normal; color: #ffe4a3; font: 700 15px/1.2 var(--font-body, sans-serif); letter-spacing: .04em; border: 1px solid #ddbd7888; border-radius: 3px; background: #0d1820ec; box-shadow: 0 3px 12px #0009; text-shadow: 0 2px 3px #000; }
.fx-number.fx-big { padding: 0; border: 0; background: none; box-shadow: none; font: 700 44px/1 var(--font-body, sans-serif); letter-spacing: 0; -webkit-text-stroke: 2px #1a0703; paint-order: stroke fill; text-shadow: 0 3px 0 #1a0703, 0 0 18px currentColor; }
.fx-number.fx-big.fx-damage { color: #ff6f55; }
.fx-number.fx-big.fx-heal { color: #79f5a8; -webkit-text-stroke-color: #04210f; text-shadow: 0 3px 0 #04210f, 0 0 18px currentColor; }
.fx-number.fx-death { color: #ffc0ab; border-color: #dc8d7680; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
.fx-number.fx-return, .fx-number.fx-draw { color: #b7effa; border-color: #8acddd99; }
.fx-number.fx-spawn { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.fx-number.fx-resource, .fx-number.fx-attribute { font-size: 17px; }

@media (max-width: 650px) {
  .fx-action-banner { padding: 9px 24px; }
  .fx-action-banner strong { font-size: 16px; }
  .fx-action-banner > span { font-size: 12px; }
  .fx-action-banner.fx-turn-banner { top: 25%; width: calc(100% - 36px); padding: 18px 25px; }
  .fx-turn-banner strong { font-size: 24px; }
  .fx-played-card > strong { font-size: 12px; padding: 7px 4px; }
  .fx-number { max-width: 170px; }
  .fx-number.fx-big { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .battle-effects *, .battle-effects *::before, .battle-effects *::after { animation: none !important; transition: none !important; }
  .fx-impact { background: transparent; box-shadow: none; }
  .fx-number { box-shadow: none; }
}