@import url('./battle-scene.css');

.battle { --fx-turn: 480ms; }

.battle-scene { position: relative; display: flex; flex-direction: column; gap: 6px; isolation: isolate; }
.scene-amplified .fx2 { inset: 10px -8px 17px; }
.scene-amplified .fx2-svg { filter: drop-shadow(0 0 3px currentColor); }
.scene-v2 .scene-hp-change { animation: scene-hp var(--fx-turn) steps(1, end) both; }
@keyframes scene-hp { 0%, 39% { width: var(--hp-before); } 40%, 100% { width: var(--hp-after); } }
.scene-v2 .battle-mid { height: 28px; min-height: 28px; margin: 0; }
.scene-v2 .scene-caption { position: relative; z-index: 13; padding: 3px 8px; border-radius: 3px; background: var(--bg-sunken); color: #e4d6b5; font-size: 12px; font-weight: 650; letter-spacing: .04em; max-width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .scene-v2 .scene-hp-change { animation: none; } }

.bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); --fx-dir: -1; }
.bgrid.fx2-top { --fx-dir: 1; }
.bcell { --fx2-tone: var(--normal-fg); --fx2-impact: .18; box-sizing: border-box; min-width: 0; min-height: 88px; overflow: hidden; }
.bcell.empty { min-height: 14px; }
.bcell:not(.empty) { justify-content: flex-start; padding-bottom: 5px; }
.bcell > .nm, .bcell > .tc, .bcell > .hpbar, .bcell > .hp { position: relative; z-index: 6; }
.bcell > .nm { min-width: 0; }
.bcell > .hpbar { margin-top: auto; }
.bcell > .hp { padding-bottom: 12px; }
.bcell .bface { z-index: 2; }
.fx2-tone-normal { --fx2-tone: var(--normal-fg); }
.fx2-tone-danger { --fx2-tone: var(--danger-fg); }
.fx2-tone-reward { --fx2-tone: var(--reward-fg); }
.fx2-tone-heal { --fx2-tone: var(--heal-fg); }

.battle .bcell > .pop {
  position: absolute; top: 25px; right: 4px; z-index: 12; margin: 0;
  font-size: 18px; line-height: 1; text-align: right; pointer-events: none;
  text-shadow: -2px -2px 0 #07090f, 2px -2px 0 #07090f, -2px 2px 0 #07090f, 2px 2px 0 #07090f;
  animation: fx2-pop calc(var(--fx-turn) * .55) steps(4, end) calc(var(--fx-turn) * var(--fx2-impact)) both;
}
@keyframes fx2-pop { 0% { transform: translateY(4px) scale(.7); opacity: 0; } 28%, 78% { transform: translateY(0) scale(1.08); opacity: 1; } 100% { transform: translateY(-2px); opacity: 0; } }

.bcell.fx2-act { animation: fx2-step calc(var(--fx-turn) * .46) steps(3, end) both; }
.bcell.fx2-act.fx2-act-brace { animation-name: fx2-brace-step; }
.bcell.fx2-act.is-target { animation-name: fx2-hit; animation-delay: calc(var(--fx-turn) * var(--fx2-impact)); }
.bcell.fx2-t-knockback.is-target { animation-name: fx2-knockback-card; }
.bcell.is-target { animation-duration: calc(var(--fx-turn) * .56); animation-delay: calc(var(--fx-turn) * var(--fx2-impact)); }
.bcell.is-heal { animation-duration: calc(var(--fx-turn) * .88); }
.bcell.fx2-t-pierce, .bcell.fx2-t-knockback, .bcell.fx2-t-snipe, .bcell.fx2-t-slow_arrow, .bcell.fx2-t-pull_in, .bcell.fx2-t-follow_up { --fx2-impact: .4; }
.bcell.fx2-t-diagonal { --fx2-impact: .22; }
.bcell.fx2-t-weakspot, .bcell.fx2-t-burst, .bcell.fx2-t-row_burn, .bcell.fx2-t-ground_fire { --fx2-impact: .3; }
.bcell.fx2-t-curse { --fx2-impact: .34; }
@keyframes fx2-step { 0% { transform: translateY(calc(var(--fx-dir) * 5px)); } 42% { transform: translateY(calc(var(--fx-dir) * 2px)); } 100% { transform: translateY(0); } }
@keyframes fx2-brace-step { 0% { transform: translateY(calc(var(--fx-dir) * 3px)); } 46% { transform: translateY(3px); } 100% { transform: translateY(0); } }
@keyframes fx2-hit { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 55% { transform: translateX(3px); } }
@keyframes fx2-knockback-card { 0%, 100% { transform: translateY(0); } 36% { transform: translateY(calc(var(--fx-dir) * -7px)); } 70% { transform: translateY(calc(var(--fx-dir) * -2px)); } }
.bcell.is-dead.fx2-t { opacity: 1; animation: fx2-defeated var(--fx-turn) steps(5, end) both; }
@keyframes fx2-defeated { 0%, 72% { opacity: 1; } 100% { opacity: .42; } }

.bcell .fx2 { position: absolute; inset: 20px 0 35px; overflow: hidden; z-index: 5; pointer-events: none; color: var(--fx2-tone); }
.bcell .fx2[data-fx="basic_attack"], .bcell .fx2[data-fx="pierce"], .bcell .fx2[data-fx="diagonal"], .bcell .fx2[data-fx="knockback"], .bcell .fx2[data-fx="weakspot"], .bcell .fx2[data-fx="snipe"], .bcell .fx2[data-fx="snipe_prepare"], .bcell .fx2[data-fx="burst"], .bcell .fx2[data-fx="curse"], .bcell .fx2[data-fx="pull_in"], .bcell .fx2[data-fx="follow_up"], .bcell .fx2[data-fx="counter_attack"] { --fx2-tone: var(--danger-fg); }
.bcell .fx2[data-fx="row_burn"], .bcell .fx2[data-fx="ground_fire"], .bcell .fx2[data-fx="fire_tick"], .bcell .fx2[data-fx="embers"], .bcell .fx2[data-fx="plunder"] { --fx2-tone: var(--reward-fg); }
.bcell .fx2[data-fx="heal"], .bcell .fx2[data-fx="ward"], .bcell .fx2[data-fx="bless"] { --fx2-tone: var(--heal-fg); }
.bcell .fx2-intercept { inset: 20px 45% 35px 0; z-index: 8; }
.bcell .fx2-hit { position: absolute; inset: 0; z-index: 0; background: #fff; opacity: 0; animation: fx2-hit-light calc(var(--fx-turn) * .18) steps(1, end) calc(var(--fx-turn) * var(--fx2-impact)) both; }
@keyframes fx2-hit-light { 0%, 45% { opacity: .2; } 100% { opacity: 0; } }
.bcell.fx2-t > .tc { animation: fx2-subdue-copy var(--fx-turn) steps(2, end) both; }
@keyframes fx2-subdue-copy { 0%, 78% { opacity: .15; } 100% { opacity: 1; } }
.fx2-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; animation: fx2-envelope var(--fx-turn) linear both; }
.fx2-svg path { vector-effect: non-scaling-stroke; }
@keyframes fx2-envelope { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
.fx2-heavy, .fx2-trail, .fx2-impact, .fx2-fan, .fx2-reticle, .fx2-stab, .fx2-ring, .fx2-bow, .fx2-aim-lock, .fx2-dome-rib, .fx2-taunt-rays, .fx2-ground-crack, .fx2-eye, .fx2-mist-line, .fx2-mist-eye, .fx2-rune, .fx2-rune-shards, .fx2-curse-wisps, .fx2-curse-seal, .fx2-sack-tie, .fx2-chain, .fx2-hook, .fx2-counter-blade, .fx2-counter-stance, .fx2-bless-rays, .fx2-unknown-ring, .fx2-block-sparks { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; stroke-linejoin: bevel; paint-order: stroke; }
.fx2-fill, .fx2-crescent, .fx2-sweep, .fx2-double-slash, .fx2-burst-core, .fx2-burst-shards, .fx2-taunt-mark, .fx2-boots, .fx2-ink, .fx2-shield-boss, .fx2-bless-sun { fill: currentColor; stroke: #080a0e; stroke-width: 2; stroke-linejoin: bevel; }
.fx2-heavy { stroke: #f4efe1; stroke-width: 5; }
.fx2-trail { stroke: currentColor; stroke-width: 2; }
.fx2-impact, .fx2-block-sparks { stroke: #fff5d8; stroke-width: 3; }

.bcell .fx2-name { position: absolute; left: 2px; right: 2px; bottom: 1px; z-index: 10; height: 13px; box-sizing: border-box; overflow: hidden; border-bottom: 2px solid var(--fx2-tone); background: rgba(7, 9, 15, .9); color: #fff; font-size: 10px; font-weight: 700; line-height: 11px; text-align: center; white-space: nowrap; pointer-events: none; }

.fx2-sweep, .fx2-crescent { transform-origin: 60px 26px; animation: fx2-slash var(--fx-turn) steps(5, end) both; }
.fx2-svg-basic_attack .fx2-sweep { fill: none; stroke: #eee4cf; stroke-width: 3; }
.fx2-svg-diagonal .fx2-crescent:not(.fx2-crescent-back) { fill: #f3ead8; }
.fx2-crescent-back { color: #fff; animation-duration: calc(var(--fx-turn) * .96); animation-delay: calc(var(--fx-turn) * .04); }
@keyframes fx2-slash { 0% { transform: translate(-28px, 18px) scale(.45); opacity: 0; } 18% { opacity: 1; } 48% { transform: translate(0) scale(1); opacity: 1; } 76% { transform: translate(5px, -3px) scale(1.03); opacity: .72; } 100% { transform: translate(8px, -5px) scale(1.06); opacity: 0; } }

.fx2-lance, .fx2-projectile { animation: fx2-flight var(--fx-turn) steps(6, end) both; }
.fx2-svg-pierce .fx2-impact, .fx2-svg-snipe .fx2-impact { animation: fx2-impact-pop var(--fx-turn) steps(4, end) both; }
@keyframes fx2-flight { 0%, 8% { transform: translateX(-86px); opacity: 0; } 20% { opacity: 1; } 46%, 72% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(9px); opacity: 0; } }
@keyframes fx2-impact-pop { 0%, 34% { transform: scale(.3); opacity: 0; } 48%, 72% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }

.fx2-shock { transform-origin: 70px 28px; animation: fx2-shock var(--fx-turn) steps(5, end) both; }
@keyframes fx2-shock { 0% { transform: translateX(-42px) scaleX(.35); opacity: 0; } 25% { opacity: 1; } 52% { transform: translateX(0) scaleX(1); opacity: 1; } 78% { transform: translateX(7px) scaleX(.85); opacity: .7; } 100% { transform: translateX(13px) scaleX(.7); opacity: 0; } }

.fx2-reticle { transform-origin: 60px 26px; animation: fx2-aim var(--fx-turn) steps(5, end) both; }
.fx2-stab { animation: fx2-stab var(--fx-turn) steps(5, end) both; }
@keyframes fx2-aim { 0% { transform: scale(1.55); opacity: 0; } 28%, 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(.85); opacity: 0; } }
@keyframes fx2-stab { 0%, 28% { transform: translate(-28px, 13px); opacity: 0; } 48%, 72% { transform: translate(0); opacity: 1; } 100% { transform: translate(4px, -2px); opacity: 0; } }

.fx2-delay-ring { transform-origin: 87px 28px; animation: fx2-clock var(--fx-turn) steps(5, end) both; }
@keyframes fx2-clock { 0%, 35% { transform: scale(.5) rotate(-45deg); opacity: 0; } 55%, 78% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9) rotate(25deg); opacity: 0; } }
.fx2-bow, .fx2-aim-lock { transform-origin: 70px 26px; animation: fx2-ready var(--fx-turn) steps(4, end) both; }
@keyframes fx2-ready { 0% { transform: scale(.75); opacity: 0; } 30%, 76% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

.fx2-burst-core { transform-origin: 60px 27px; animation: fx2-burst var(--fx-turn) steps(5, end) both; }
.fx2-burst-shards { transform-origin: 60px 27px; animation: fx2-shards var(--fx-turn) steps(5, end) both; }
@keyframes fx2-burst { 0%, 14% { transform: scale(.12) rotate(-12deg); opacity: 0; } 34%, 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.35) rotate(9deg); opacity: 0; } }
@keyframes fx2-shards { 0%, 28% { transform: scale(.45); opacity: 0; } 48%, 66% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

.fx2-svg.fx2-fire-sprite { width: 28%; }
.fx2-flame { fill: var(--danger-fg); stroke: #07090f; stroke-width: 2; }
.fx2-hot { fill: var(--reward-fg); }
.fx2-fire-rise { transform-origin: 20px 50px; animation: fx2-fire-rise var(--fx-turn) steps(6, end) both; }
.fx2-fire-calm { transform-origin: 20px 50px; animation: fx2-fire-calm var(--fx-turn) steps(4, end) both; }
@keyframes fx2-fire-rise { 0% { transform: translateY(18px) scaleY(.35); opacity: 0; } 12% { opacity: 1; } 35%, 73% { transform: translateY(0) scaleY(1); opacity: .95; } 100% { transform: translateY(-8px) scaleY(.72); opacity: 0; } }
@keyframes fx2-fire-calm { 0% { transform: scaleY(.55); opacity: 0; } 36%, 70% { transform: scaleY(.8); opacity: .75; } 100% { transform: translateY(-5px) scaleY(.6); opacity: 0; } }

.fx2-heal-stars { fill: #fff7c8; stroke: var(--heal-fg); stroke-width: 2; animation: fx2-stars var(--fx-turn) steps(6, end) both; }
.fx2-heal-wisps { fill: none; stroke: var(--heal-fg); stroke-width: 4; stroke-linecap: round; animation: fx2-wisps var(--fx-turn) steps(5, end) both; }
@keyframes fx2-stars { 0% { transform: translateY(-18px); opacity: 0; } 20% { opacity: 1; } 52% { transform: translateY(15px); opacity: 1; } 72%, 100% { transform: translateY(20px); opacity: 0; } }
@keyframes fx2-wisps { 0%, 35% { transform: translateY(17px); opacity: 0; } 55%, 76% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }

.fx2-dome { fill: rgba(93, 208, 146, .12); stroke: var(--heal-fg); stroke-width: 3; }
.fx2-dome, .fx2-dome-rib { transform-origin: 60px 49px; animation: fx2-dome var(--fx-turn) steps(5, end) both; }
@keyframes fx2-dome { 0% { transform: scale(.45, .2); opacity: 0; } 30%, 76% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.03); opacity: 0; } }

.fx2-shield-body { fill: rgba(86, 156, 224, .18); stroke: var(--normal-fg); stroke-width: 4; }
.fx2-shield-boss { fill: #d9e9f6; }
.fx2-shield-raise { transform-origin: 60px 52px; animation: fx2-shield-raise var(--fx-turn) steps(5, end) both; }
.fx2-shield-block { transform-origin: 35px 29px; animation: fx2-shield-block var(--fx-turn) steps(5, end) both; }
.fx2-block-sparks { animation: fx2-block-sparks var(--fx-turn) steps(4, end) both; }
@keyframes fx2-shield-raise { 0% { transform: translateY(28px) scale(.7); opacity: 0; } 34%, 76% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(2px) scale(.98); opacity: 0; } }
@keyframes fx2-shield-block { 0%, 18% { transform: translateX(20px) scale(.7); opacity: 0; } 40%, 72% { transform: translateX(0) scale(.88); opacity: 1; } 100% { transform: translateX(-3px) scale(.85); opacity: 0; } }
@keyframes fx2-block-sparks { 0%, 34% { opacity: 0; transform: scale(.3); } 48%, 67% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }

.fx2-taunt-mark, .fx2-taunt-rays { transform-origin: 62px 27px; animation: fx2-taunt var(--fx-turn) steps(5, end) both; }
@keyframes fx2-taunt { 0% { transform: translateY(15px) scale(.6); opacity: 0; } 30% { transform: translateY(-4px) scale(1.15); opacity: 1; } 55%, 77% { transform: translateY(0) scale(1); opacity: 1; } 100% { opacity: 0; } }
.fx2-boots { fill: #aeb8c3; }
.fx2-boots, .fx2-ground-crack { transform-origin: 60px 49px; animation: fx2-brace var(--fx-turn) steps(5, end) both; }
@keyframes fx2-brace { 0% { transform: translateY(-10px); opacity: 0; } 32%, 73% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(1px); opacity: 0; } }

.fx2-eye { stroke: #e9edf2; }
.fx2-ink { fill: #09080d; stroke: #c6cad1; }
.fx2-eye { animation: fx2-eye-close var(--fx-turn) steps(5, end) both; }
.fx2-ink { transform-origin: 60px 27px; animation: fx2-ink-in var(--fx-turn) steps(5, end) both; }
@keyframes fx2-eye-close { 0% { transform: scaleX(1.25); opacity: 0; } 25%, 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleY(.08); opacity: 0; } }
@keyframes fx2-ink-in { 0%, 20% { transform: scale(1.5) rotate(-18deg); opacity: 0; } 48%, 72% { transform: scale(1); opacity: 1; } 100% { transform: scale(.55) rotate(18deg); opacity: 0; } }

.fx2-mist-line { stroke: rgba(238, 244, 247, .75); stroke-width: 8; }
.fx2-mist-a { animation: fx2-mist-a var(--fx-turn) steps(5, end) both; }
.fx2-mist-b { animation: fx2-mist-b var(--fx-turn) steps(5, end) both; }
.fx2-mist-eye { animation: fx2-mist-eye var(--fx-turn) steps(4, end) both; }
@keyframes fx2-mist-a { 0% { transform: translateX(-75px); opacity: 0; } 35%, 72% { transform: translateX(0); opacity: .8; } 100% { transform: translateX(55px); opacity: 0; } }
@keyframes fx2-mist-b { 0% { transform: translateX(65px); opacity: 0; } 35%, 72% { transform: translateX(0); opacity: .65; } 100% { transform: translateX(-60px); opacity: 0; } }
@keyframes fx2-mist-eye { 0%, 25% { transform: scaleX(1.4); opacity: 0; } 52%, 72% { transform: scaleX(.9); opacity: .8; } 100% { transform: scaleX(.15); opacity: 0; } }

.fx2-rune { transform-origin: 60px 27px; animation: fx2-rune-break var(--fx-turn) steps(6, end) both; }
.fx2-rune-shards { transform-origin: 60px 27px; animation: fx2-rune-shards var(--fx-turn) steps(5, end) both; }
@keyframes fx2-rune-break { 0% { transform: scale(1.4); opacity: 0; } 30%, 53% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(.75); opacity: 0; } }
@keyframes fx2-rune-shards { 0%, 43% { transform: scale(.45); opacity: 0; } 60%, 76% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

.fx2-curse-wisps { stroke: #4a253f; stroke-width: 6; animation: fx2-curse var(--fx-turn) steps(6, end) both; }
.fx2-curse-seal { stroke: var(--danger-fg); animation: fx2-curse-seal var(--fx-turn) steps(5, end) both; }
@keyframes fx2-curse { 0% { transform: translateY(22px); opacity: 0; } 34%, 74% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-13px); opacity: 0; } }
@keyframes fx2-curse-seal { 0%, 25% { transform: scale(1.5); opacity: 0; } 52%, 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(.7); opacity: 0; } }

.fx2-sack-body { fill: #b88845; stroke: #17100a; stroke-width: 3; }
.fx2-sack-tie { stroke: #f0c66b; }
.fx2-sack { transform-origin: 60px 52px; animation: fx2-sack var(--fx-turn) steps(5, end) both; }
@keyframes fx2-sack { 0% { transform: translateY(28px) scale(.55); opacity: 0; } 30% { transform: translateY(-3px) scale(1.05); opacity: 1; } 55%, 76% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(4px) scale(.95); opacity: 0; } }

.fx2-chain, .fx2-hook { animation: fx2-pull var(--fx-turn) steps(6, end) both; }
@keyframes fx2-pull { 0% { transform: translateX(60px); opacity: 0; } 30% { opacity: 1; } 55%, 75% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-20px); opacity: 0; } }
.fx2-double-slash { transform-origin: 60px 26px; animation: fx2-slash calc(var(--fx-turn) * .84) steps(5, end) both; }
.fx2-double-b { animation-delay: calc(var(--fx-turn) * .16); }

.fx2-counter-stance, .fx2-counter-shield { stroke: var(--normal-fg); stroke-width: 4; }
.fx2-counter-stance { animation: fx2-ready var(--fx-turn) steps(4, end) both; }
.fx2-counter-shield { fill: rgba(86, 156, 224, .16); animation: fx2-counter-shield var(--fx-turn) steps(5, end) both; }
.fx2-counter-blade { stroke: #fff3d2; stroke-width: 5; animation: fx2-counter-blade var(--fx-turn) steps(5, end) both; }
@keyframes fx2-counter-shield { 0% { transform: translateX(-20px); opacity: 0; } 30%, 68% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-5px); opacity: 0; } }
@keyframes fx2-counter-blade { 0%, 30% { transform: translate(-26px, 22px); opacity: 0; } 52%, 74% { transform: translate(0); opacity: 1; } 100% { transform: translate(10px, -8px); opacity: 0; } }

.fx2-bless-sun { fill: #f4e6a4; stroke: var(--heal-fg); transform-origin: 60px 27px; animation: fx2-bless var(--fx-turn) steps(5, end) both; }
.fx2-bless-rays { animation: fx2-bless-rays var(--fx-turn) steps(4, end) both; }
@keyframes fx2-bless { 0% { transform: scale(.35); opacity: 0; } 34%, 73% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes fx2-bless-rays { 0%, 24% { opacity: 0; } 48%, 72% { opacity: 1; } 100% { opacity: 0; } }
.fx2-unknown-ring { transform-origin: 60px 26px; animation: fx2-ready var(--fx-turn) steps(4, end) both; }

.bcell .fx2-embers { position: absolute; left: 5px; bottom: 3px; width: 24px; height: 16px; z-index: 3; pointer-events: none; }
.fx2-embers svg { display: block; width: 100%; height: 100%; }
.fx2-ember-outer { fill: var(--reward-fg); stroke: #07090f; stroke-width: 2; }
.fx2-ember-inner { fill: var(--danger-fg); }
.bcell.fx2-t:not(.fx2-t-fire_tick):not(.fx2-t-embers) > .fx2-embers { opacity: .25; }
.bcell .fx2-fog { position: absolute; inset: 3px; z-index: 3; border: 1px solid rgba(238, 244, 247, .3); background: rgba(238, 244, 247, .08); pointer-events: none; }

.bcell .fx2-marks { position: absolute; top: 22px; right: 3px; z-index: 11; display: flex; flex-direction: row-reverse; gap: 3px; pointer-events: none; }
.bcell .fx2-mark { position: relative; display: inline-block; width: 11px; height: 11px; box-sizing: border-box; color: var(--fx2-tone); border: 2px solid currentColor; background: #111722; }
.fx2-m-slow_arrow_delay, .fx2-m-snipe_ready { border-radius: 50%; }
.fx2-m-ground_fire, .fx2-m-embers { border: 0; background: currentColor; clip-path: polygon(50% 0, 62% 24%, 78% 42%, 88% 69%, 75% 100%, 25% 100%, 12% 69%, 22% 42%, 38% 24%); }
.fx2-m-ward { transform: rotate(45deg); }
.fx2-m-cover { border-radius: 6px 6px 2px 2px; border-bottom-width: 4px; }
.fx2-m-taunt::after { content: '!'; position: absolute; inset: -3px 0 0; color: currentColor; font: 900 11px/11px sans-serif; text-align: center; }
.fx2-m-blind { border-radius: 50% 0 50% 0; transform: rotate(45deg); background: #050609; }
.fx2-m-tactic_break::before, .fx2-m-tactic_break::after { content: ''; position: absolute; left: -1px; top: 3px; width: 9px; height: 2px; background: currentColor; transform: rotate(45deg); }
.fx2-m-tactic_break::after { transform: rotate(-45deg); }
.fx2-pending-embers { opacity: .75; }
.bcell .fx2-mark-brace { position: absolute; left: 5px; right: 5px; bottom: 2px; z-index: 11; height: 3px; background: var(--normal-fg); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .bcell, .bcell *, .bcell *::before, .bcell *::after { animation: none !important; transition: none !important; }
  .bcell.fx2-act, .bcell.is-target, .bcell.is-heal { transform: none !important; }
  .bcell.is-dead.fx2-t { opacity: .42; }
  .bcell .fx2-hit { display: none; }
  .bcell .fx2 { opacity: .9; }
  .bcell .fx2-svg { transform: scale(.72); transform-origin: center; }
  .bcell > .pop { opacity: 1; transform: none; }
}