:host{display:block;min-width:0;color:#eeeae4;font:14px/1.4 system-ui,sans-serif;--gold:#edb768;--muted:#a9a8b7;--line:#ffffff16}*{box-sizing:border-box}.raid-animation{border:1px solid #c6944938;border-radius:16px;overflow:hidden;background:#10131b}.result{padding:10px 16px;min-height:40px}.result-text:empty{display:none}
.arena{height:470px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 15%,#81451635,transparent 52%),linear-gradient(#10121a,#18131a)}
.arena[data-boss=onyxia]{background:radial-gradient(ellipse at 50% 15%,#6227514d,transparent 52%),linear-gradient(#10121a,#1b121c)}
.floor{position:absolute;inset:35% -20% -40%;transform:perspective(400px) rotateX(48deg);background:repeating-linear-gradient(90deg,#fff0 0 67px,#ffffff04 68px 69px),repeating-linear-gradient(0deg,#fff0 0 67px,#ffffff04 68px 69px);border-top:1px solid #ffffff09}
.floor-ring{position:absolute;left:9%;right:9%;top:61%;height:35%;border:1px solid #c18e5930;border-radius:50%;box-shadow:0 0 0 20px #d7a86003,inset 0 0 38px #c99a6410}
.boss-art{position:absolute;width:48%;height:49%;object-fit:contain;left:26%;top:0;z-index:2;filter:drop-shadow(0 12px 17px #0008)}
.boss-label{position:absolute;top:6%;left:0;right:0;text-align:center;opacity:.11;font-size:clamp(30px,5vw,56px);font-weight:900;letter-spacing:4px;z-index:0}
.boss-fallback{position:absolute;top:15%;left:30%;width:40%;padding:30px 8px;text-align:center;border:2px solid #edb768;border-radius:50%;background:#3e261d}
.attack-zone{position:absolute;left:39%;width:22%;top:62%;height:30%;border:1px dashed #ed8747;border-radius:50%;background:#ed793419;opacity:0;z-index:1}
.attack-zone>span{position:absolute;top:12%;left:0;right:0;text-align:center;color:#ffbc81;font-size:12px;font-weight:800}
.arena[data-boss=onyxia] .attack-zone{top:34%;height:59%;border-radius:45% 45% 15% 15%}
.players{position:absolute;inset:0;z-index:5}
.player-token{position:absolute;width:29px;height:29px;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid #8f9cae;border-radius:9px;background:linear-gradient(145deg,#35404e,#19212d);box-shadow:0 3px 9px #0008;color:#fff;font-size:10px;font-weight:700;transition:left 300ms ease,top 300ms ease}
.player-token[data-own=true]{border:2px solid #f9cd85;color:#ffda9e;box-shadow:0 0 0 3px #edb76817,0 3px 9px #0008}
.shield{position:absolute;top:61%;width:25px;height:25px;color:#93e4c5;opacity:0;z-index:5}
.shield-left{left:16%}
.shield-right{right:16%}
.shield svg{width:100%;fill:#153b34;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.hammer{position:absolute;left:50%;top:24%;height:33%;width:24%;z-index:6;opacity:0;transform-origin:50% 90%;transform:translate(-50%,-50%) rotate(-25deg)}
.hammer img{width:100%;height:100%;object-fit:contain}
.impact{position:absolute;left:34%;top:65%;width:32%;height:25%;object-fit:contain;opacity:0;z-index:4}
.fire-path{position:absolute;left:40%;top:32%;width:20%;height:62%;z-index:4;opacity:0;overflow:hidden;clip-path:inset(0 0 100% 0);filter:drop-shadow(0 0 7px #ff772a55)}
.fire-path img{position:absolute;width:310%;height:32%;object-fit:fill;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg)}
.mouth-glow{position:absolute;left:47%;top:31%;width:6%;height:5%;background:#ffb259;border-radius:50%;filter:blur(6px);opacity:0;z-index:3}
.damage-number{position:absolute;top:62%;left:40%;width:20%;text-align:center;font-size:30px;color:#ffbb9c;font-weight:800;text-shadow:0 2px 8px #000;opacity:0;z-index:7}
.arena-caption{position:absolute;bottom:3%;left:0;right:0;text-align:center;font-size:8px;letter-spacing:2px;color:#a5a0af}
.result{min-height:27px;display:flex;align-items:center;gap:10px;font-size:13px;color:#b7b2c1}
.result[data-outcome=dodged]{color:#a0eacb}
.result[data-outcome=hit]{color:#ffc5b0}
.arena[data-reduced=true] .player-token{transition:none}
.arena[data-phase=ready] .shield,.arena[data-phase=attack][data-outcome=dodged] .shield,.arena[data-phase=impact][data-outcome=dodged] .shield,.arena[data-reduced=true][data-phase=complete][data-outcome=dodged] .shield{opacity:1}
.arena[data-phase=preparing] .attack-zone,.arena[data-phase=ready] .attack-zone,.arena[data-phase=attack] .attack-zone,.arena[data-phase=impact] .attack-zone{opacity:1}
.arena[data-reduced=true][data-phase=complete] .attack-zone{opacity:.65}
.arena[data-reduced=true][data-phase=complete][data-outcome=hit] .damage-number{opacity:1}
.asset-error{display:none!important}
@media(max-width:760px){.arena{height:440px}
}
@media(max-width:370px){.arena{height:395px}
.player-token{width:23px;height:23px;font-size:8px;border-radius:7px}
.shield{width:21px;height:21px}
}
.fire-path{container-type:size;top:var(--mouth-y,32%);height:calc(94% - var(--mouth-y,32%))}
.fire-path img{width:100cqh;height:100cqw}
.mouth-glow{top:calc(var(--mouth-y,32%) - 2.5%)}
.arena[data-boss=lich-king]{background:radial-gradient(ellipse at 50% 15%,#28485d66,transparent 55%),#10121d}
.arena[data-boss=illidan]{background:radial-gradient(ellipse at 50% 15%,#344b244d,transparent 55%),#101810}
.defile{position:absolute;left:35%;top:62%;width:30%;height:30%;border-radius:50%;opacity:0;z-index:2;border:2px solid #aa8ae0;background:repeating-radial-gradient(ellipse,#171026 0 8%,#503064 10%,#100e21 17%);box-shadow:0 0 12px #8069a855,inset 0 0 25px #000}
.defile span{position:absolute;inset:12%;border:1px dashed #b3a6d7;border-radius:50%;transform:rotate(-20deg)}
.arena[data-boss=lich-king] .attack-zone{left:32%;width:36%;border-color:#c4abea;background:#9c6bd91a}
.fel-flame{position:absolute;width:12%;height:17%;top:42.5%;opacity:0;z-index:4;filter:drop-shadow(0 0 6px #a0e73466);transform-origin:50% 100%}
.flame-left{left:22%}
.flame-right{left:66%}
.fel-bolt{position:absolute;width:clamp(20px,4.5vw,30px);height:clamp(20px,4.5vw,30px);border-radius:50%;background:radial-gradient(circle at 45% 40%,#ffffdb 0 15%,#ddff91 27%,#8be82b 52%,#367b16 73%,transparent 76%);box-shadow:0 0 9px 3px #92eb3488;transform:translate(-50%,-50%);opacity:0;z-index:6;isolation:isolate}
.fel-bolt:before{content:"";position:absolute;width:95%;height:280%;left:2.5%;bottom:30%;transform-origin:50% 90%;transform:rotate(var(--bolt-angle));border-radius:70% 35% 45% 50%;background:radial-gradient(ellipse at 50% 92%,#eaffaa 0, #a3f04d99 24%,#62b92455 48%,transparent 70%);z-index:-1}
.bolt-left{--bolt-angle:var(--bolt-left-angle,-35deg)}
.bolt-right{--bolt-angle:var(--bolt-right-angle,35deg)}
.fel-impact{position:absolute;left:33%;top:61%;width:34%;height:32%;border-radius:50%;opacity:0;z-index:4;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse,#8cc63e55,transparent 68%)}
.fel-burst{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(ellipse,#ffffcf 0 7%,#dbff92 15%,#8cdd39cc 34%,transparent 66%),repeating-conic-gradient(from 12deg,#a4ed4955 0deg 9deg,transparent 9deg 30deg);mask-image:radial-gradient(ellipse,#000 20%,transparent 71%);-webkit-mask-image:radial-gradient(ellipse,#000 20%,transparent 71%)}
.fel-shockwave{position:absolute;inset:5%;border:3px solid #c5ff70;border-radius:50%;box-shadow:inset 0 0 9px #b6f85f66,0 0 7px #a0e44c66}
.fel-embers{position:absolute;inset:0}
.fel-embers i{position:absolute;left:50%;top:50%;width:7px;height:12px;border-radius:70% 30% 60% 40%;background:linear-gradient(#edffbd,#7bc728);opacity:0;transform:translate(-50%,-50%)}
.arena[data-boss=illidan] .attack-zone{border-color:#b7ec70;background:#a7df3115}
.arena[data-boss=illidan][data-reduced=true][data-phase=complete] .fel-flame{opacity:1}
.arena[data-boss=lich-king][data-reduced=true][data-phase=complete] .defile{opacity:.8}
.arena[data-boss=lich-king][data-reduced=true][data-outcome=dodged] .defile{transform:scale(.72)}
.speech-slot{height:66px;display:flex;align-items:center;justify-content:center;padding:8px 14px;background:#10131b}
.boss-speech{position:relative;margin:0;border:1px solid #ba975a;background:#262330;border-radius:12px;padding:9px 16px;color:#fff1d6;font-family:Georgia,serif;font-size:clamp(13px,2vw,17px);line-height:1.3;text-align:center;max-width:100%}
.boss-speech:empty{visibility:hidden}
.boss-speech:after{content:"";position:absolute;left:calc(50% - 5px);bottom:-6px;width:10px;height:10px;transform:rotate(45deg);background:#262330;border-right:1px solid #ba975a;border-bottom:1px solid #ba975a}
.glaive{position:absolute;width:23%;height:auto;left:28%;top:58%;opacity:0;z-index:3;transform:translate(-50%,-57%) rotate(-10deg) scale(.85);filter:drop-shadow(0 0 5px #96ed4044)}
.glaive-right{left:72%;transform:translate(-50%,-57%) rotate(10deg) scale(.85)}
.arena[data-boss=illidan][data-reduced=true][data-phase=complete] .glaive{opacity:1}
.frost-runes{position:absolute;left:29%;top:7%;width:42%;height:37%;display:grid;place-items:center;border:2px solid #78d6ef;border-radius:50%;box-shadow:0 0 15px #59bfff55,inset 0 0 12px #59bfff33;color:#a5e8ff;letter-spacing:8px;opacity:0;z-index:1}
.defile-smoke{position:absolute;left:32%;top:61%;width:36%;height:32%;z-index:4;pointer-events:none;overflow:hidden;mask-image:radial-gradient(ellipse,#000 45%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse,#000 45%,transparent 73%)}
.defile-smoke i{position:absolute;left:50%;top:50%;width:65%;height:65%;background:var(--raid-smoke) center/contain no-repeat;opacity:0;transform:translate(-50%,-50%)}
.hammer-fire{position:absolute;left:33%;top:61%;width:34%;height:32%;border-radius:50%;overflow:hidden;pointer-events:none;z-index:4}
.hammer-flash{position:absolute;inset:8%;border-radius:50%;opacity:0;background:radial-gradient(ellipse,#fff4bd 0 7%,#ffd05c 18%,#f26b1699 45%,transparent 72%);box-shadow:inset 0 0 10px #ffa22c}
.hammer-flames{position:absolute;inset:0}
.hammer-flames i{position:absolute;left:50%;top:50%;width:55%;height:24%;background:var(--raid-fire) center/100% 100% no-repeat;transform-origin:0 50%;opacity:0}
.breath-smoke{position:absolute;left:40%;top:var(--mouth-y,32%);width:20%;height:calc(94% - var(--mouth-y,32%));z-index:4;pointer-events:none;overflow:hidden;mask-image:linear-gradient(transparent,#000 8% 90%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 8% 90%,transparent)}
.breath-smoke i{position:absolute;left:50%;width:100%;height:24%;background:var(--raid-smoke) center/contain no-repeat;transform:translate(-50%,-50%);filter:brightness(1.4);opacity:0}
.arena[data-boss=lich-king][data-reduced=true][data-phase=complete] .defile-smoke i{left:var(--smoke-x);top:var(--smoke-y);opacity:.85}
.shadow-wave{position:absolute;left:32%;top:62%;width:36%;height:30%;border:3px solid #afa1e7;border-radius:50%;box-shadow:0 0 15px #8066bbaa,inset 0 0 20px #4d2d77;opacity:0;z-index:4}
.defile{background:radial-gradient(ellipse at 32% 40%,#64457c 0,transparent 32%),radial-gradient(ellipse at 66% 64%,#473460,transparent 35%),#090b19;border:2px solid #8f75b6;box-shadow:0 0 20px #43275b99,inset 0 0 25px #000}
.defile span{border-style:solid;border-width:2px 1px 4px 2px;inset:10%;transform:rotate(-18deg);border-radius:42% 58% 36% 64%}
.hammer{left:var(--grip-x,35%);top:var(--grip-y,20%);width:var(--hammer-size,130px);height:var(--hammer-size,130px);transform-origin:50% 82%;transform:translate(-50%,-82%) rotate(-20deg)}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.arena { height: var(--raid-arena-height, 395px); }
.speech-slot { height: var(--raid-speech-height, 66px); padding-block: 2px; }
.result { min-height: var(--raid-result-height, 40px); padding-block: 2px; }
.player-token { width: var(--raid-token-size, 23px); height: var(--raid-token-size, 23px); font-size: var(--raid-token-font, 8px); overflow: hidden; }
.player-token > img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.combat-layer { position: absolute; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; }
.combat-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 2px #fff6); }
.combat-svg g { transform-box: view-box; transform-origin: 0 0; }
.combat-damage { position: absolute; font: 800 clamp(12px, 3vw, 22px)/1 system-ui,sans-serif; text-shadow: 0 2px 3px #000,0 0 5px #000; }
.combat-static { position: absolute; left: 50%; top: 40%; color: #ffe1a7; font-weight: 800; }
.arena[data-enraged=windup] .boss-art { filter: drop-shadow(0 0 18px #ff352d) saturate(1.5); animation: raid-enrage-tremor 130ms linear infinite alternate; }
@keyframes raid-enrage-tremor { from { transform: translate(-2px, 1px) scale(1.06); } to { transform: translate(2px, -1px) scale(1.09); } }
@media(prefers-reduced-motion:reduce) { .arena[data-enraged] .boss-art { transform: none; animation: none; filter: none; } }
.speech-slot:has(.boss-speech:empty),.result:has(.result-text:empty) { height: 0; min-height: 0; padding: 0; }