/* XCPETS raid animations (raid.html). Pixel art: steps() timing, transform/opacity only. Driven by js/v2-raid-anim.js. */
#raidBox .ra-wrap{position:relative;overflow:visible;gap:0}
#raidBox .ra-wrap img{animation:none;filter:drop-shadow(0 8px 0 rgba(0,0,0,.45))}
#raidBox .ra-bossbox{position:relative;display:inline-block;transform-origin:50% 100%}
#raidBox .ra-body{position:relative;display:inline-block;transform-origin:50% 100%}
#raidBox .ra-bimg{display:block;max-width:100%;max-height:340px;image-rendering:pixelated}
#raidBox .ra-bimg.rd-dead{filter:grayscale(1) brightness(.6);transform:rotate(-8deg) translateY(10px)}
/* idle loops */
#raidBox .ra-st-live .ra-i-breathe .ra-body{animation:raBreathe 2.4s steps(4) infinite}
#raidBox .ra-st-live .ra-i-heave .ra-body{animation:raHeave 3.2s steps(5) infinite}
#raidBox .ra-st-live .ra-i-float .ra-body{animation:raFloat 3s steps(6) infinite}
#raidBox .ra-st-live .ra-i-sway .ra-body{animation:raSway 3s steps(6) infinite}
#raidBox .ra-st-live .ra-i-jitter .ra-body{animation:raJit 1.6s steps(1) infinite}
@keyframes raBreathe{50%{transform:translateY(-4px) scale(1.02,1.035)}}
@keyframes raHeave{40%{transform:scale(1.035,1.05)}}
@keyframes raFloat{50%{transform:translateY(-12px)}}
@keyframes raSway{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@keyframes raJit{0%,70%{transform:none}75%{transform:translate(2px,-1px)}82%{transform:translate(-2px,1px)}90%{transform:translate(1px,0)}}
/* glowing eyes / furnace / fists */
#raidBox .ra-eye{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--eye);box-shadow:0 0 8px 4px var(--eye);opacity:.5;animation:raEye 1.6s steps(3) infinite;pointer-events:none;mix-blend-mode:screen}
#raidBox .ra-core{position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;background:radial-gradient(circle,#ffd04a 0,#ff6a1a 35%,transparent 70%);opacity:.45;animation:raCore 1.2s steps(4) infinite;mix-blend-mode:screen;pointer-events:none}
#raidBox .ra-fist{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;background:radial-gradient(circle,#ffb030 0,transparent 65%);opacity:.3;animation:raCore 1.7s steps(4) infinite;mix-blend-mode:screen;pointer-events:none}
#raidBox .ra-st-won .ra-eye,#raidBox .ra-st-won .ra-core,#raidBox .ra-st-won .ra-fist,#raidBox .ra-st-won .ra-parts{display:none}
@keyframes raEye{50%{opacity:1;transform:scale(1.3)}}
@keyframes raCore{50%{opacity:.85;transform:scale(1.25)}}
#raidBox .ra-rays{position:absolute;left:50%;top:40%;width:420px;height:420px;margin:-210px;background:repeating-conic-gradient(rgba(255,214,90,.22) 0 10deg,transparent 10deg 30deg);animation:raSpin 12s steps(24) infinite;pointer-events:none;border-radius:50%}
@keyframes raSpin{to{transform:rotate(360deg)}}
/* particles */
#raidBox .ra-parts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#raidBox .ra-pt{position:absolute;bottom:0;width:6px;height:6px;animation:raRise 3s steps(10) infinite}
#raidBox .ra-pt.ra-s2{width:8px;height:8px}
#raidBox .ra-pt-fire{background:#ffb030;box-shadow:0 0 6px #ff4a1a}
#raidBox .ra-pt-gold,#raidBox .ra-pt-spark{background:#ffe680;box-shadow:0 0 6px #ffc93c}
#raidBox .ra-pt-spark{background:#bfefff;box-shadow:0 0 6px #6ad8ff}
#raidBox .ra-pt-necro{background:#7dff5a;box-shadow:0 0 8px #3aff3a;border-radius:50%}
#raidBox .ra-pt-mist,#raidBox .ra-pt-steam{background:rgba(220,255,240,.35);width:18px;height:18px;border-radius:50%}
#raidBox .ra-pt-steam{background:rgba(255,255,255,.3)}
#raidBox .ra-pt-shadow{background:#ff2030;box-shadow:0 0 6px #ff0010}
#raidBox .ra-pt-frost,#raidBox .ra-pt-coins{top:0;bottom:auto;animation-name:raFall}
#raidBox .ra-pt-frost{background:#fff;box-shadow:0 0 4px #9fefff}
#raidBox .ra-pt-coins{background:#ffc93c;border:2px solid #a8660c;width:8px;height:8px}
@keyframes raRise{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-260px) translateX(12px);opacity:0}}
@keyframes raFall{0%{transform:translateY(-10px);opacity:0}15%{opacity:1}100%{transform:translateY(320px) translateX(-14px);opacity:0}}
/* Lord Kek champion */
#raidBox .ra-duel{justify-content:space-between;gap:6px}
#raidBox .ra-champ{position:relative;flex:0 0 38%;align-self:flex-end;z-index:2}
#raidBox .ra-cimg{display:block;width:100%;max-height:240px;object-fit:contain;image-rendering:pixelated;animation:raBreathe 2s steps(4) infinite;transform-origin:50% 100%}
#raidBox .ra-duel .ra-bossbox{flex:0 1 60%}
#raidBox .ra-cglow{position:absolute;left:20%;top:5%;width:30px;height:30px;background:radial-gradient(circle,#fff7b0,#ffc93c 40%,transparent 70%);animation:raCore 1.4s steps(4) infinite;mix-blend-mode:screen}
#raidBox .ra-bolt{position:absolute;left:60%;top:28%;width:0;height:8px;background:repeating-linear-gradient(90deg,#fff7b0 0 6px,#ffc93c 6px 12px);box-shadow:0 0 10px #ffc93c;opacity:0}
#raidBox .ra-strike{animation:raLunge .8s steps(6)}
#raidBox .ra-strike-big{animation:raLunge .8s steps(6)}
#raidBox .ra-strike .ra-bolt,#raidBox .ra-strike-big .ra-bolt{animation:raBolt .6s steps(5) .2s}
#raidBox .ra-strike-big .ra-bolt{height:16px;background:repeating-linear-gradient(90deg,#fff 0 6px,#ffe14a 6px 12px)}
@keyframes raLunge{30%{transform:translateX(26px) rotate(4deg) scale(1.06)}60%{transform:translateX(18px)}}
@keyframes raBolt{0%{width:0;opacity:1}60%{width:160%;opacity:1}100%{width:160%;opacity:0}}
/* hit flash + shake */
#raidBox .ra-flash{position:absolute;left:-10%;top:-10%;width:120%;height:120%;background:radial-gradient(circle,rgba(255,240,150,.9) 0,rgba(255,200,60,.4) 35%,transparent 65%)!important;opacity:0;pointer-events:none;mix-blend-mode:screen}
#raidBox .ra-hit .ra-body,#raidBox .ra-hit-big .ra-body{animation:raShake .45s steps(6)}
#raidBox .ra-hit .ra-bimg,#raidBox .ra-hit-big .ra-bimg{animation:raWhite .45s steps(3)}
#raidBox .ra-hit-big .ra-body{animation-duration:.7s}
@keyframes raShake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
@keyframes raWhite{0%,60%{filter:brightness(3) saturate(0)}100%{filter:none}}
#raidBox .ra-slash{position:absolute;left:10%;top:20%;width:80%;height:8px;background:#fff;box-shadow:0 0 10px #ffc93c;transform:rotate(-30deg) scaleX(0);opacity:0}
#raidBox .ra-slashing .ra-slash{animation:raSlash .4s steps(4)}
@keyframes raSlash{0%{opacity:1;transform:rotate(-30deg) scaleX(0)}60%{opacity:1;transform:rotate(-30deg) scaleX(1)}100%{opacity:0;transform:rotate(-30deg) scaleX(1)}}
/* damage numbers + crit bursts */
#raidBox .ra-fx{position:absolute;inset:0;pointer-events:none;z-index:5}
#raidBox .ra-num{position:absolute;top:30%;font-family:"Press Start 2P",monospace;font-size:14px;color:#fff;text-shadow:2px 2px 0 #1a0d1f,-2px -2px 0 #1a0d1f;white-space:pre;text-align:center;line-height:1.5;animation:raNum 1.6s steps(12) forwards;transform:translateX(-50%)}
#raidBox .ra-n2{font-size:18px;color:#ffc93c}
#raidBox .ra-n3{font-size:22px;color:#ff5a4a;animation-name:raNumBig}
@keyframes raNum{0%{transform:translate(-50%,10px);opacity:0}15%{opacity:1}100%{transform:translate(-50%,-90px);opacity:0}}
@keyframes raNumBig{0%{transform:translate(-50%,10px) scale(.6);opacity:0}15%{transform:translate(-50%,0) scale(1.4);opacity:1}30%{transform:translate(-50%,-10px) scale(1)}100%{transform:translate(-50%,-100px);opacity:0}}
#raidBox .ra-spark{position:absolute;left:62%;top:42%;width:8px;height:8px;background:#ffe14a;box-shadow:0 0 6px #ffc93c;animation:raSpark .85s steps(8) forwards}
#raidBox .ra-sp3{background:#fff;box-shadow:0 0 10px #ff5a4a;width:10px;height:10px}
#raidBox .ra-wrap:not(.ra-duel) .ra-spark{left:50%}
@keyframes raSpark{to{transform:translate(var(--dx),var(--dy));opacity:0}}
#raidBox .rd-stage.ra-quake2,#raidBox .ra-quake2{animation:raQuake .5s steps(6)}
#raidBox .ra-quake3{animation:raQuake .65s steps(8)}
#raidBox .ra-quake3 .ra-flash{animation:raGold .5s steps(3)}
@keyframes raQuake{20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
@keyframes raGold{0%{opacity:1}100%{opacity:0}}
/* HP bar: smooth drain with lagging white chunk */
#raidBox .rd-hp i{position:relative;z-index:1;transition:width .9s cubic-bezier(.2,.7,.3,1)}
#raidBox .rd-hp b.ra-lag{position:absolute;left:0;top:0;height:100%;background:#fff4d6;transition:width .8s ease-in}
#raidBox .rd-hp span{z-index:2}
/* entrance, defeat, escape */
#raidBox .ra-enter .ra-bossbox{animation:raEnter .9s steps(6)}
@keyframes raEnter{0%{transform:translateY(40px) scale(.7);opacity:0}70%{transform:translateY(-8px) scale(1.05);opacity:1}}
#raidBox .ra-defeat .ra-body{animation:raDie 2.4s steps(16) forwards}
@keyframes raDie{0%{filter:brightness(3)}10%{filter:none;transform:translateX(-8px)}20%{filter:brightness(3);transform:translateX(8px)}30%{filter:none;transform:translateX(-6px)}40%{filter:brightness(2.5);transform:translateX(6px)}60%{filter:grayscale(.5);transform:rotate(-4deg) translateY(4px)}100%{filter:grayscale(1) brightness(.6);transform:rotate(-8deg) translateY(10px)}}
#raidBox .ra-escape .ra-body{animation:raFlee 2.2s steps(14) forwards}
@keyframes raFlee{0%{transform:none}15%{transform:translateY(6px) scale(1.05,.95)}100%{transform:translateY(-300px) scale(.3);opacity:0}}
#raidBox .ra-gone .ra-body{opacity:.15;filter:grayscale(1)}
#raidBox .ra-smoke{position:absolute;bottom:10%;width:30px;height:30px;border-radius:50%;background:rgba(200,190,210,.6);animation:raSmoke 1.8s steps(9) forwards}
@keyframes raSmoke{0%{transform:scale(.4);opacity:0}20%{opacity:1}100%{transform:translateY(-120px) scale(2.2);opacity:0}}
#raidBox .ra-banner{position:absolute;left:50%;top:8%;transform:translateX(-50%);font-family:"Press Start 2P",monospace;font-size:16px;color:#ffc93c;text-shadow:3px 3px 0 #1a0d1f;white-space:nowrap;opacity:0;z-index:6;pointer-events:none}
#raidBox .ra-banner.ra-esc{color:#cfc4ff}
#raidBox .ra-banner.ra-show{animation:raBanner 2.6s steps(10) forwards}
@keyframes raBanner{0%{opacity:0;transform:translateX(-50%) scale(.5)}15%{opacity:1;transform:translateX(-50%) scale(1.2)}25%,80%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0}}
@media (max-width:640px){#raidBox .ra-bimg{max-height:220px}#raidBox .ra-cimg{max-height:170px}#raidBox .ra-num{font-size:11px}#raidBox .ra-n2{font-size:14px}#raidBox .ra-n3{font-size:16px}#raidBox .ra-banner{font-size:12px}#raidBox .ra-rays{width:280px;height:280px;margin:-140px}}

/* ===== raid-meter (Oct 24 2026, owner-approved raid-only fonts + arcade hit meter) =====
 * Fonts (self-hosted, SIL Open Font License 1.1, see fonts/raid/OFL-*.txt): Silkscreen (boss names, HP, damage numbers, callouts)
 * and Pixelify Sans (readable pixel body text). Scoped to the raid page only (body[data-split=raid]); other pages never use them. */
@font-face{font-family:"XcpRaid Silkscreen";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/raid/silkscreen-400.woff2) format("woff2")}
@font-face{font-family:"XcpRaid Silkscreen";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/raid/silkscreen-700.woff2) format("woff2")}
@font-face{font-family:"XcpRaid Pixelify";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/raid/pixelify-sans.woff2) format("woff2")}
body[data-split="raid"] #raidPanel{--xr-d:"XcpRaid Silkscreen","Press Start 2P",monospace;--xr-b:"XcpRaid Pixelify",system-ui,sans-serif;font-family:var(--xr-b);font-size:17px;line-height:1.45}
body[data-split="raid"] #raidPanel h2.sec{font-family:var(--xr-d);font-weight:700;font-size:30px;letter-spacing:1px;text-shadow:3px 3px 0 rgba(26,13,31,.35)}
body[data-split="raid"] #raidPanel .rd-tag{font-family:var(--xr-d);font-size:13px;letter-spacing:1px}
body[data-split="raid"] #raidPanel .rd-info h3{font-family:var(--xr-d);font-weight:700;font-size:26px;line-height:1.1;color:#fff4d6;text-shadow:3px 3px 0 #1a0d1f,0 0 14px rgba(255,90,74,.45)}
body[data-split="raid"] #raidPanel .rd-h,body[data-split="raid"] #raidPanel .rd-wait h3{font-family:var(--xr-d);font-weight:700;font-size:20px}
body[data-split="raid"] #raidPanel .small,body[data-split="raid"] #raidPanel .rd-board,body[data-split="raid"] #raidPanel .rd-pet,body[data-split="raid"] #raidPanel .rd-log,body[data-split="raid"] #raidPanel .rd-how,body[data-split="raid"] #raidPanel .rd-past,body[data-split="raid"] #raidPanel button,body[data-split="raid"] #raidPanel input{font-family:var(--xr-b)}
body[data-split="raid"] #raidPanel .small{font-size:15px}
body[data-split="raid"] #raidPanel .rd-board th{font-family:var(--xr-d);font-size:13px}
body[data-split="raid"] #raidPanel .ra-num,body[data-split="raid"] #raidPanel .ra-banner{font-family:var(--xr-d);font-weight:700}
/* the meter */
body[data-split="raid"] #raidPanel .rd-meter{--hp:#3ddc5a;--hp2:#9bff6a;--glow:rgba(61,220,90,.55);margin:10px 0 6px}
body[data-split="raid"] #raidPanel .rm-z-y{--hp:#f2c81e;--hp2:#fff07a;--glow:rgba(242,200,30,.55)}
body[data-split="raid"] #raidPanel .rm-z-r{--hp:#ff3b2f;--hp2:#ff8a5a;--glow:rgba(255,59,47,.6)}
body[data-split="raid"] #raidPanel .rm-z-d{--hp:#ff1a3a;--hp2:#ffe14a;--glow:rgba(255,26,58,.8)}
body[data-split="raid"] #raidPanel .rm-z-k{--hp:#6a5a78;--hp2:#8a7a98;--glow:transparent}
body[data-split="raid"] #raidPanel .rm-top{display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--xr-d);font-weight:700;font-size:15px;color:var(--hp2);text-shadow:2px 2px 0 #1a0d1f}
body[data-split="raid"] #raidPanel .rm-pct{font-size:20px}
body[data-split="raid"] #raidPanel .rd-meter .rd-hp{height:34px;margin:4px 0 0;border:4px solid #1a0d1f;background:#2a1030;box-shadow:0 0 0 2px #fff4d6,0 0 18px var(--glow),inset 0 4px 0 rgba(0,0,0,.5);overflow:hidden}
body[data-split="raid"] #raidPanel .rd-meter .rd-hp i{position:absolute;left:0;top:0;height:100%;background:linear-gradient(180deg,var(--hp2) 0 25%,var(--hp) 25% 75%,rgba(0,0,0,.25) 75%) ,var(--hp);background-blend-mode:normal;transition:width .35s steps(6),background .3s;z-index:1}
body[data-split="raid"] #raidPanel .rd-meter .rd-hp b.ra-lag{background:#fff4d6;box-shadow:inset -4px 0 0 #ffb0a0;transition:width .9s steps(12)}
body[data-split="raid"] #raidPanel .rm-seg{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 3px),#1a0d1f calc(5% - 3px) 5%)}
body[data-split="raid"] #raidPanel .rd-meter .rd-hp span{z-index:3;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);padding:1px 8px;background:rgba(26,13,31,.62);white-space:nowrap;font-family:var(--xr-d);font-weight:700;font-size:14px;color:#fff;text-shadow:2px 2px 0 #1a0d1f,-2px -2px 0 #1a0d1f,2px -2px 0 #1a0d1f,-2px 2px 0 #1a0d1f}
body[data-split="raid"] #raidPanel .rm-z-d .rd-hp{animation:rmDanger .5s steps(2) infinite}
body[data-split="raid"] #raidPanel .rm-z-d .rm-lbl{color:#ff4a5a;animation:rmBlink .5s steps(2) infinite}
@keyframes rmDanger{50%{box-shadow:0 0 0 2px #ff1a3a,0 0 26px #ff1a3a,inset 0 4px 0 rgba(0,0,0,.5)}}
@keyframes rmBlink{50%{color:#ffe14a}}
body[data-split="raid"] #raidPanel .rm-jolt{animation:rmJolt .35s steps(4)}
body[data-split="raid"] #raidPanel .rm-jolt-big{animation:rmJolt .55s steps(6)}
body[data-split="raid"] #raidPanel .rm-jolt .rd-hp,body[data-split="raid"] #raidPanel .rm-jolt-big .rd-hp{filter:brightness(1.8)}
@keyframes rmJolt{25%{transform:translate(-5px,2px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-3px,1px)}}
/* combo */
body[data-split="raid"] #raidPanel .rm-combo{min-height:26px;margin:6px 0 0;font-family:var(--xr-d);font-weight:700;font-size:16px;color:#ffe14a;text-shadow:2px 2px 0 #1a0d1f;opacity:0}
body[data-split="raid"] #raidPanel .rm-combo b{font-size:24px;color:#fff}
body[data-split="raid"] #raidPanel .rm-combo.rm-on{opacity:1}
body[data-split="raid"] #raidPanel .rm-combo.rm-hot{color:#ff8a3a}body[data-split="raid"] #raidPanel .rm-combo.rm-hot b{color:#ffe14a}
body[data-split="raid"] #raidPanel .rm-combo.rm-pop{transform-origin:0 50%;animation:rmPop .4s steps(4)}
body[data-split="raid"] #raidPanel .rm-combo.rm-out{opacity:0;transition:opacity .4s steps(3)}
@keyframes rmPop{0%{transform:scale(.5)}50%{transform:scale(1.35) rotate(-3deg)}100%{transform:none}}
/* last hits ticker */
body[data-split="raid"] #raidPanel .rm-tick{margin-top:4px;border:3px solid #1a0d1f;background:rgba(20,10,28,.7);padding:4px 8px}
body[data-split="raid"] #raidPanel .rm-th{margin:0;font-family:var(--xr-d);font-weight:700;font-size:12px;color:#ffc93c}
body[data-split="raid"] #raidPanel .rm-tick ol{list-style:none;margin:0;padding:0}
body[data-split="raid"] #raidPanel .rm-tick li{display:flex;justify-content:space-between;gap:8px;font-size:15px;line-height:1.5;color:#fff4d6;border-top:1px dashed rgba(255,244,214,.18)}
body[data-split="raid"] #raidPanel .rm-tick li:first-child{border-top:0}
body[data-split="raid"] #raidPanel .rm-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
body[data-split="raid"] #raidPanel .rm-dmg{white-space:nowrap;font-family:var(--xr-d);font-weight:700;font-size:14px;color:#ff8a7a}
body[data-split="raid"] #raidPanel .rm-c2,body[data-split="raid"] #raidPanel .rm-c3,body[data-split="raid"] #raidPanel .rm-kb{font-size:11px;padding:0 3px;border:2px solid #1a0d1f;color:#1a0d1f;background:#ffc93c}
body[data-split="raid"] #raidPanel .rm-c3{background:#ff5a4a;color:#fff}body[data-split="raid"] #raidPanel .rm-kb{background:#fff4d6}
body[data-split="raid"] #raidPanel .rm-tick li.rm-new{animation:rmIn .5s steps(4)}
@keyframes rmIn{0%{transform:translateX(30px);opacity:0;background:#ffc93c}60%{opacity:1;background:rgba(255,201,60,.4)}100%{background:none}}
/* big punchy damage numbers: pop, then fly on an arc */
body[data-split="raid"] #raidPanel .ra-num{top:34%;font-size:30px;color:#fff;-webkit-text-stroke:0;text-shadow:3px 3px 0 #1a0d1f,-3px -3px 0 #1a0d1f,3px -3px 0 #1a0d1f,-3px 3px 0 #1a0d1f,0 6px 0 #1a0d1f;animation:rmNum 1.4s steps(14) forwards}
body[data-split="raid"] #raidPanel .ra-n2,body[data-split="raid"] #raidPanel .ra-n3{top:50%}body[data-split="raid"] #raidPanel .ra-n2{font-size:40px;color:#ffe14a}
body[data-split="raid"] #raidPanel .ra-n3{font-size:50px;color:#ff5a4a;animation-name:rmNum}
@keyframes rmNum{0%{transform:translate(-50%,0) scale(.3);opacity:0}12%{transform:translate(-50%,-14px) scale(1.5);opacity:1}24%{transform:translate(-50%,-20px) scale(1)}70%{opacity:1}100%{transform:translate(calc(-50% + var(--fx,0px)),-130px) scale(.85);opacity:0}}
/* crit callout + pixel starburst */
body[data-split="raid"] #raidPanel .ra-call{position:absolute;left:50%;top:6%;transform:translateX(-50%);text-align:center;z-index:7;animation:rmCall 1.25s steps(10) forwards}
body[data-split="raid"] #raidPanel .ra-duel .ra-call{left:66%}
body[data-split="raid"] #raidPanel .ra-call b{position:relative;display:block;font-family:var(--xr-d);font-weight:700;font-size:34px;line-height:1;color:#1a0d1f;background:#ffc93c;padding:6px 10px;border:4px solid #1a0d1f;box-shadow:4px 4px 0 #1a0d1f;white-space:nowrap}
body[data-split="raid"] #raidPanel .ra-call small{position:relative;display:block;margin-top:4px;font-family:var(--xr-d);font-weight:700;font-size:14px;color:#fff;text-shadow:2px 2px 0 #1a0d1f}
body[data-split="raid"] #raidPanel .ra-call3 b{background:#ff3b2f;color:#fff;font-size:40px}
body[data-split="raid"] #raidPanel .ra-star{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px;background:repeating-conic-gradient(#fff7b0 0 12deg,transparent 12deg 30deg);-webkit-mask:radial-gradient(circle,#000 0 30%,transparent 62%);mask:radial-gradient(circle,#000 0 30%,transparent 62%);animation:raSpin 1.2s steps(6) infinite}
body[data-split="raid"] #raidPanel .ra-call3 .ra-star{width:260px;height:260px;margin:-130px;background:repeating-conic-gradient(#ffe14a 0 10deg,#ff5a4a 10deg 14deg,transparent 14deg 26deg)}
@keyframes rmCall{0%{transform:translateX(-50%) scale(.2) rotate(-12deg);opacity:0}15%{transform:translateX(-50%) scale(1.3) rotate(4deg);opacity:1}28%{transform:translateX(-50%) scale(1) rotate(-2deg)}80%{opacity:1}100%{transform:translateX(-50%) translateY(-16px);opacity:0}}
/* final blow: hit-stop + white-out */
body[data-split="raid"] #raidPanel .ra-stop .ra-body,body[data-split="raid"] #raidPanel .ra-stop .ra-champ{animation-play-state:paused!important;filter:brightness(4) saturate(0)}
body[data-split="raid"] #raidPanel .rd-stage.ra-white{animation:rmWhite .6s steps(4)}
@keyframes rmWhite{0%{box-shadow:0 0 0 2000px rgba(255,255,255,.9) inset}100%{box-shadow:6px 6px 0 #1a0d1f}}
body[data-split="raid"] #raidPanel .ra-banner{font-size:34px;top:6%;text-shadow:4px 4px 0 #1a0d1f,-2px -2px 0 #1a0d1f}
body[data-split="raid"] #raidPanel .ra-banner.ra-fb{color:#fff;background:#ff3b2f;padding:6px 12px;border:4px solid #1a0d1f;box-shadow:4px 4px 0 #1a0d1f;font-size:36px}
body[data-split="raid"] #raidPanel .ra-banner.ra-fb.ra-show{animation:rmCall 1.2s steps(10) forwards}
/* per-player damage meter in the leaderboard */
body[data-split="raid"] #raidPanel .rm-pd{position:relative}
body[data-split="raid"] #raidPanel .rm-pd i{position:absolute;right:6px;bottom:3px;height:4px;width:calc(var(--w,0) * 1.3px);background:linear-gradient(90deg,#ffc93c,#ff5a4a);opacity:.75;max-width:calc(100% - 12px)}
body[data-split="raid"] #raidPanel .rm-pd span{position:relative;font-family:var(--xr-d);font-weight:700;font-size:14px}
@media (max-width:640px){body[data-split="raid"] #raidPanel h2.sec{font-size:24px}body[data-split="raid"] #raidPanel .rd-info h3{font-size:21px}body[data-split="raid"] #raidPanel .rd-meter .rd-hp{height:30px}body[data-split="raid"] #raidPanel .rd-meter .rd-hp span{font-size:12px}body[data-split="raid"] #raidPanel .ra-num{font-size:20px;max-width:none}body[data-split="raid"] #raidPanel .ra-n2{font-size:24px}body[data-split="raid"] #raidPanel .ra-n3{font-size:26px}
 body[data-split="raid"] #raidPanel .ra-call b{font-size:24px}body[data-split="raid"] #raidPanel .ra-call3 b{font-size:28px}body[data-split="raid"] #raidPanel .ra-star{width:150px;height:150px;margin:-75px}body[data-split="raid"] #raidPanel .ra-call3 .ra-star{width:190px;height:190px;margin:-95px}body[data-split="raid"] #raidPanel .ra-banner,body[data-split="raid"] #raidPanel .ra-banner.ra-fb{font-size:22px}body[data-split="raid"] #raidPanel .rm-tick li{font-size:14px}body[data-split="raid"] #raidPanel .rd-board td,body[data-split="raid"] #raidPanel .rd-board th{font-size:14px}}
@media (max-width:370px){body[data-split="raid"] #raidPanel h2.sec{font-size:21px}body[data-split="raid"] #raidPanel .rd-info h3{font-size:19px}body[data-split="raid"] #raidPanel .ra-call b{font-size:21px}body[data-split="raid"] #raidPanel .ra-call3 b{font-size:24px}body[data-split="raid"] #raidPanel .ra-banner,body[data-split="raid"] #raidPanel .ra-banner.ra-fb{font-size:19px}body[data-split="raid"] #raidPanel .ra-n3{font-size:23px}body[data-split="raid"] #raidPanel .ra-n2{font-size:21px}}
@media (prefers-reduced-motion:reduce){body[data-split="raid"] #raidPanel .rd-meter *,body[data-split="raid"] #raidPanel .rd-meter,body[data-split="raid"] #raidPanel .ra-call{animation:none!important;transition:none!important}body[data-split="raid"] #raidPanel .ra-call{display:none!important}body[data-split="raid"] #raidPanel .rm-z-d .rd-hp{box-shadow:0 0 0 3px #ff1a3a,0 0 18px #ff1a3a}}
@media (prefers-reduced-motion:reduce){#raidBox .ra-wrap *,#raidBox .ra-wrap,#raidBox .rd-stage{animation:none!important;transition:none!important}#raidBox .ra-parts,#raidBox .ra-fx,#raidBox .ra-banner,#raidBox .ra-bolt,#raidBox .ra-slash{display:none!important}#raidBox .rd-hp i,#raidBox .rd-hp b{transition:none!important}}