/* Battle FX (public/js/fx/): pooled effect nodes, the move banner, and effect art. Transform/opacity only. */
.fxp { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; will-change: transform, opacity; }
.fxp > * { position: absolute; left: 0; top: 0; translate: -50% -50%; }
.fxp svg { display: block; overflow: visible; }
.fxflash { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 66; }
.fxtint { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 1; }
.fxtint.dark { background: radial-gradient(ellipse at 50% 45%, rgba(20,6,34,.1) 20%, rgba(20,6,34,.85) 100%); }
.fxtint.storm { background: linear-gradient(rgba(13,27,42,.9), rgba(27,38,59,.55) 60%, rgba(27,38,59,.25)); }
.fxtint.night { background: linear-gradient(rgba(16,12,40,.9), rgba(16,12,40,.35) 70%); }
.fxtint.fire { background: radial-gradient(ellipse at 50% 90%, rgba(255,120,20,.55), rgba(120,20,0,.2) 70%); }
.fxtint.deep { background: linear-gradient(rgba(0,40,70,.35), rgba(0,30,60,.85)); }
.cardsview .fxtint { z-index: 3; }

/* numbers and words */
.pop.fxnum { transform: none; will-change: transform, opacity; }
.fxsfx { font: 400 40px/1 var(--head); color: var(--gold); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; white-space: nowrap; letter-spacing: 1px; }
.fxsfx.white { color: #eaf2ff; }
.fxsfx.red { color: #ff5d5d; }
.fxword { font: 400 14px/1 var(--head); font-style: italic; color: #d7b8ff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.fxword.deceive { color: #b8f2e6; }
.fxword.mock { color: #ffb3b3; font-style: normal; }
.fxverse { font: 400 21px/1.1 var(--head); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.fxquote { font: 800 13px/1.3 var(--body); color: #fff; background: rgba(29,20,32,.85); border: 2px solid #000; border-radius: 10px; padding: 4px 10px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.fxintent { font: 400 26px/1 var(--head); color: #fff; background: #e5383b; border: 3px solid var(--ink); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(255,93,93,.45); }
.bubble.foe.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }

/* the move banner */
.fxcall { position: absolute; left: 50%; top: 60px; z-index: 68; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; max-width: calc(100% - 16px); background: var(--ink); color: #fff; border: 3px solid #000; border-radius: 999px; padding: 3px 12px 3px 3px; box-shadow: 0 3px 0 rgba(0,0,0,.5); white-space: nowrap; pointer-events: none; }
.fxcall i { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #ffe28a; border: 2px solid #fff; flex: none; display: grid; place-items: center; }
.fxcall i svg { width: 100%; height: 100%; display: block; }
.fxcall i + i { margin-left: -16px; }
.fxcall .tx { min-width: 0; }
.fxcall .tx small { display: block; font: 900 9.5px/1.15 var(--body); color: #cbb8ef; letter-spacing: .03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.fxcall .tx b { display: block; font: 400 16px/1.05 var(--head); color: var(--gold); overflow: hidden; text-overflow: ellipsis; }
.fxcall em { font: 900 10.5px/1 var(--body); font-style: normal; color: #cbb8ef; margin-left: 2px; flex: none; }
.fxcall.foe { background: #c1121f; } .fxcall.foe .tx b { color: #fff; } .fxcall.foe .tx small, .fxcall.foe em { color: #ffd6d6; } .fxcall.foe i { background: #ffc9c9; }
.fxcall.foe i svg { padding: 2px; }
.fxcall.seize { background: #7a0010; border-color: #000; } .fxcall.seize .tx b { color: #fff; } .fxcall.seize .tx small { color: #ffb3b3; }
.fxcall.combo { background: #5a189a; } .fxcall.combo .tx b { color: #fff3b0; }
.fxcall.word { background: #1f6b3a; } .fxcall.word .tx b { color: #fff3b0; } .fxcall.word .tx small, .fxcall.word em { color: #c9f5d3; } .fxcall.word i { background: #fff3b0; } .fxcall.word i svg { padding: 4px; }
.fxcall.lord { background: #fff3b0; color: var(--ink); } .fxcall.lord .tx b { color: var(--ink); } .fxcall.lord .tx small, .fxcall.lord em { color: #6a4a00; } .fxcall.lord i { background: #fff; border-color: var(--ink); }
@media (max-width: 370px) { .fxcall .tx b { font-size: 14px; } .fxcall em { display: none; } .fxcall i { width: 28px; height: 28px; } }

/* who is acting */
.hcard.acting { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--gold), 0 6px 0 var(--ink), 0 0 18px 4px rgba(255,210,63,.8); transition: transform .12s; }
.hcard.acting .mv { color: var(--ink); background: var(--gold); }
.ucard.acting { box-shadow: 0 4px 0 #000, 0 0 0 4px var(--gold), 0 0 18px 4px rgba(255,210,63,.8); z-index: 4; }
.ucard.enemy.acting, .ucard.boss.acting { box-shadow: 0 4px 0 #000, 0 0 0 4px #ff5d5d, 0 0 18px 4px rgba(255,93,93,.7); }
.unit.enemy.acting .ring { border-color: #ff5d5d; box-shadow: 0 0 12px #ff5d5d; }

/* shapes */
.fxring { border-style: solid; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink); }
.fxdot { border-radius: 50%; border: 2.5px solid var(--ink); }
.fxglow { border-radius: 50%; }
.fxline { height: 4px; border-radius: 3px; opacity: .85; }
.fxcol { border-radius: 40% 40% 10px 10px; transform-origin: 50% 100%; mix-blend-mode: screen; }
.fxbeam { clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.fxorb { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffb3b3, var(--c) 55%, #3a0a14); border: 2.5px solid var(--ink); box-shadow: 0 0 10px var(--c); }
.fxwisp { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e0aaff, var(--c) 60%, rgba(0,0,0,0) 72%); box-shadow: 0 0 12px var(--c); }
.fxwisp.big { width: 30px; height: 30px; }
.fxlight { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(#fff 30%, #fff3a8 55%, rgba(255,210,63,0) 72%); }
.fxlight.big { width: 60px; height: 60px; }
.fxpuff { border-radius: 50%; background: radial-gradient(var(--c), rgba(0,0,0,0) 68%); }
.fxhand { width: 16px; height: 44px; border-radius: 10px 10px 4px 4px; background: linear-gradient(#240046, #3c096c); border: 2px solid var(--ink); transform-origin: 50% 100%; }
.fxrain { width: 3px; height: 34px; border-radius: 2px; background: linear-gradient(rgba(202,240,248,0), #caf0f8); }
.fxclock { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--ink); background: conic-gradient(var(--gold) 0 70%, #fff3b0 70% 100%); }
.fxbubble { border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.8), color-mix(in srgb, var(--c) 40%, transparent) 55%, color-mix(in srgb, var(--c) 80%, transparent)); border: 3px solid var(--c); box-shadow: 0 0 0 2px rgba(29,20,32,.4); }
.fxhex { display: block; }
.fxsling { width: 70px; height: 70px; border-radius: 50%; border: 5px solid rgba(255,255,255,.85); box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 2.5px var(--ink); }
.fxsling span { position: absolute; left: 50%; top: -12px; translate: -50% 0; }
.fxsky { width: 420px; height: 280px; background: linear-gradient(rgba(255,243,176,.7), rgba(255,243,176,0)); }
.fxcord { width: 6px; background: repeating-linear-gradient(#e63946 0 10px, #9d0208 10px 14px); border: 1.5px solid var(--ink); transform-origin: 50% 0; }
.fxwall { height: 12px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,243,176,0), #fff3a8 12%, #fffbe0 50%, #fff3a8 88%, rgba(255,243,176,0)); box-shadow: 0 0 18px 6px rgba(255,236,150,.8); }
.fxband { width: 46px; height: 10px; border-radius: 6px; background: #ffd23f; border: 2.5px solid var(--ink); box-shadow: 0 0 10px #fff3a8; }
.fxbar { width: 10px; height: 90px; border-radius: 6px; background: linear-gradient(#fffbe0, #ffd23f); box-shadow: 0 0 14px 4px rgba(255,236,150,.9); transform-origin: 50% 50%; }
.fxmantle { width: 90px; height: 90px; border-radius: 50%; border: 10px dashed #a68a64; box-shadow: 0 0 0 2px var(--ink); }
.fxcarpet { width: 50px; height: 200px; background: linear-gradient(rgba(255,243,176,0), rgba(255,210,63,.7)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); transform-origin: 50% 100%; }
.fxstep { width: 12px; height: 7px; border-radius: 50%; background: #fff3a8; box-shadow: 0 0 8px #ffd23f; }
.fxglowball.big { width: 110px; height: 110px; }
.fxglowball { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(rgba(255,243,176,.95), rgba(255,210,63,.4) 45%, rgba(255,210,63,0) 70%); }
.fxglory { width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(#fff 20%, rgba(255,255,255,.7) 45%, rgba(255,248,214,0) 70%); }
.fxsun { width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(#fff3b0 20%, rgba(255,210,63,.6) 45%, rgba(255,210,63,0) 70%); }
.fxarm { width: 80px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,243,176,0), #fff3a8); box-shadow: 0 0 10px #ffd23f; transform-origin: 0 50%; }
.fxribbon { border-radius: 18px; background: rgba(29,20,32,.82); border: 3px solid #ffd23f; box-shadow: 0 0 18px rgba(255,210,63,.55), 0 4px 0 rgba(0,0,0,.4); }
.fxblade { width: 110px; height: 24px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,210,63,0), #fff3a8 40%, #fff); box-shadow: 0 0 22px 8px rgba(255,236,150,.85); }
.fxvignette { width: 100vw; height: 100vh; max-width: 1400px; background: radial-gradient(ellipse at 50% 45%, rgba(193,18,31,0) 40%, rgba(193,18,31,.55) 100%); }
.fxberry { width: 70px; height: 70px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center; }
.fxberry div { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--c) 30%); border: 3px solid var(--ink); }
.fxconfetti { width: 9px; height: 14px; border-radius: 2px; border: 1.5px solid var(--ink); }
.fxcalm { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 60%, #fff) 35%, #fff 50%, color-mix(in srgb, var(--c) 60%, #fff) 65%, transparent); opacity: .85; }
.fxshade { background: radial-gradient(ellipse, rgba(60,9,108,.9) 30%, rgba(60,9,108,0) 70%); filter: drop-shadow(0 0 10px #c77dff); border-radius: 50%; }
.fxface { width: 82px; height: 82px; border: 4px solid var(--ink); border-radius: 22px; overflow: hidden; background: #ffe28a; box-shadow: 0 5px 0 var(--ink); }
.fxface svg { width: 100%; height: 100%; }
.fxdusk { width: 2000px; height: 2000px; background: radial-gradient(circle, rgba(29,20,32,.25) 10%, rgba(29,20,32,.75) 40%); }

/* statuses that stay drawn on a figure */
.fxover { position: absolute; pointer-events: none; z-index: 3; }
.fxover.net { left: -8%; right: -8%; top: 22%; bottom: 8%; opacity: .95; }
.fxover.net svg { width: 100%; height: 100%; }
.fxover.hex { left: -18%; right: -18%; top: -6%; bottom: -6%; animation: fxhexpulse 1.4s ease-in-out infinite alternate; }
.fxover.still { left: 10%; right: 10%; bottom: -6px; height: 16px; }
.fxover.still i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #9cc4ff; box-shadow: 0 0 8px #9cc4ff; animation: fxstill 1.6s ease-out infinite; }
.fxover.still i + i { animation-delay: .8s; }
@keyframes fxhexpulse { from { opacity: .75; } to { opacity: 1; } }
@keyframes fxstill { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fxover.hex, .fxover.still i { animation: none; } .hcard.acting { transform: none; } }