:root{--arena-glow:#bda26716}html[data-arena=fire]{--arena-glow:#ff8e4d22}html[data-arena=water]{--arena-glow:#69d3ff1c}html[data-arena=nature]{--arena-glow:#8bda9c1b}html[data-arena=storm]{--arena-glow:#ac94ff21}html[data-arena=moon]{--arena-glow:#a877d920}html[data-arena=astral]{--arena-glow:#edcf8e1b}
.battlefield{background:radial-gradient(ellipse at 50% 45%,var(--arena-glow),transparent 70%),linear-gradient(180deg,#171d2a,#1c26304a 50%,#151e24)}.battlefield::after{content:"";position:absolute;inset:18% 22%;border:1px solid #a8bdb710;border-radius:50%;box-shadow:0 0 0 24px #b5b79b03,inset 0 0 0 11px #a8bdb706;transform:rotate(-20deg);z-index:-1;pointer-events:none}
.attack-ghost{width:91px;height:126px;border:1px solid var(--fx-color,#d9c28a);border-radius:8px;box-shadow:0 0 24px var(--fx-color,#d9c28a),0 9px 24px #0009}
.summon-sigil{position:fixed;pointer-events:none;z-index:1090;width:140px;height:140px;transform:translate(-50%,-50%);border:2px solid var(--fx-color);border-radius:50%;box-shadow:0 0 22px var(--fx-color),inset 0 0 22px var(--fx-color);animation:sigil-open 1.05s ease-out forwards;opacity:0}.summon-sigil>i{position:absolute;inset:12px;border:1px dashed var(--fx-color);border-radius:50%;animation:sigil-rotate 2s linear infinite}.summon-sigil>i:nth-child(2){inset:25px;border-style:solid;border-radius:8px;animation-direction:reverse}.summon-sigil>span{position:absolute;inset:0;display:grid;place-items:center;color:var(--fx-color);font:72px Georgia,serif;opacity:.7}.summon-sigil.legendary{width:225px;height:225px;border-width:3px}
.elemental-flash{position:fixed;pointer-events:none;z-index:1030;border-radius:12px;background:radial-gradient(ellipse at center,var(--fx-color),transparent 75%);mix-blend-mode:screen;animation:elemental-flash .55s ease-out forwards}
.effect-status{position:fixed;z-index:1270;pointer-events:none;white-space:nowrap;padding:5px 10px;border:1px solid var(--fx-color);background:#0c1628e6;border-radius:4px;color:var(--fx-color);font-size:12px;font-weight:700;letter-spacing:.4px;text-shadow:0 0 12px var(--fx-color);animation:status-rise 1s ease-out forwards;transform:translate(-50%,-50%)}
.battle-number{font:700 31px Georgia,serif;color:#ffd3ad;-webkit-text-stroke:.5px #321e19;text-shadow:0 3px 2px #060a10,0 0 14px #f37d3b8c;z-index:1280;animation:damage-pop 1s cubic-bezier(.1,.75,.2,1) forwards}.battle-number.positive{color:#9befbd;-webkit-text-stroke:.5px #183927;text-shadow:0 3px 2px #060a10,0 0 14px #78e8a079}.battle-number.massive{font-size:47px;color:#ffe5a9;text-shadow:0 4px 2px #060a10,0 0 22px #f8a254}
.legendary-cutin{position:fixed;left:7%;top:31%;z-index:1400;pointer-events:none;display:flex;align-items:center;gap:22px;width:450px;height:166px;border-left:3px solid var(--fx-color);background:linear-gradient(90deg,#0b1125f5,#172034ed 65%,transparent);box-shadow:-15px 0 50px #0005;color:var(--fx-color);animation:legendary-entry 1.35s cubic-bezier(.12,.8,.22,1) forwards}.legendary-cutin:after{content:"";position:absolute;left:0;top:0;bottom:0;right:15%;border-block:1px solid var(--fx-color);opacity:.4}.legendary-cutin>img{width:122px;height:166px;object-position:50% 25%;mask-image:linear-gradient(90deg,#000 70%,transparent)}.legendary-cutin>div{display:flex;flex-direction:column;gap:13px;min-width:0}.legendary-cutin small{font-size:9px;letter-spacing:3px}.legendary-cutin strong{font-size:27px;font-weight:500;letter-spacing:-1px;text-shadow:0 0 25px var(--fx-color)}.legendary-cutin span{font-size:10px;letter-spacing:2px;color:#ccd3df}.legendary-cutin.enemy-cutin{left:auto;right:6%;top:23%}
.impact-slash{position:fixed;z-index:1150;pointer-events:none;width:110px;height:110px;transform:translate(-50%,-50%) rotate(-35deg);animation:slash-impact .55s ease-out forwards}.impact-slash>i{position:absolute;height:3px;left:0;right:0;top:50%;background:#fff;box-shadow:0 0 7px var(--fx-color),0 0 20px var(--fx-color);border-radius:80%}.impact-slash>i:nth-child(2){transform:translateY(-13px);left:18px;right:15px}.impact-slash>i:nth-child(3){transform:translateY(13px);left:15px;right:20px}.impact-slash.moon>i{height:68px;width:85px;top:14px;left:10px;border:3px solid var(--fx-color);border-radius:50%;background:transparent;border-left-color:transparent;border-bottom-color:transparent;box-shadow:none}.impact-slash.water{transform:translate(-50%,-50%) rotate(-60deg)}.impact-slash.nature>i{background:#acffd4}.impact-slash.storm>i{height:2px;box-shadow:0 0 6px #fff,0 0 30px var(--fx-color)}
.battle-shake{animation:arena-impact .35s ease-out}.help-dialog details{margin:18px 0;color:var(--muted);font-size:11px}.help-dialog summary{cursor:pointer;color:var(--gold);padding-block:10px}.ability-dictionary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.ability-dictionary p{font-size:10px;line-height:1.7;padding:9px;background:#111b29;border:1px solid #344157;border-radius:5px}.inspect-description em{display:block;color:#e6a9b5;font-style:normal;font-size:10px;margin-top:6px}
@keyframes sigil-open{0%{transform:translate(-50%,-50%) scale(.25) rotate(-40deg);opacity:0}30%{opacity:.8}100%{transform:translate(-50%,-50%) scale(1.4) rotate(25deg);opacity:0}}@keyframes sigil-rotate{to{transform:rotate(360deg)}}@keyframes elemental-flash{0%{opacity:0}18%{opacity:var(--fx-strength,.1)}100%{opacity:0}}@keyframes status-rise{0%{transform:translate(-50%,-20%) scale(.85);opacity:0}18%{opacity:1;transform:translate(-50%,-65%) scale(1)}70%{opacity:1}100%{transform:translate(-50%,-170%);opacity:0}}@keyframes damage-pop{0%{transform:translate(-50%,-35%) scale(.45);opacity:0}18%{transform:translate(-50%,-80%) scale(1.2);opacity:1}38%{transform:translate(-50%,-70%) scale(1);opacity:1}100%{transform:translate(-50%,-190%) scale(.85);opacity:0}}@keyframes legendary-entry{0%{opacity:0;transform:translateX(-70px)}15%,65%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(45px)}}@keyframes slash-impact{0%{opacity:0;scale:.3}18%{opacity:1;scale:1.12}100%{opacity:0;scale:.85}}@keyframes arena-impact{0%,100%{translate:0 0}20%{translate:var(--shake-strength,2px) 0}45%{translate:calc(var(--shake-strength,2px)*-1) 1px}65%{translate:1px -1px}}
@media(max-width:760px){.legendary-cutin,.legendary-cutin.enemy-cutin{left:15px;right:15px;top:28%;width:calc(100% - 30px);height:136px;gap:15px}.legendary-cutin>img{width:96px;height:136px}.legendary-cutin strong{font-size:22px}.legendary-cutin small{font-size:7px;letter-spacing:2px}.legendary-cutin span{font-size:9px}.battle-number{font-size:27px}.battle-number.massive{font-size:37px}.effect-status{font-size:10px;padding:4px 7px}.summon-sigil{width:100px;height:100px}.summon-sigil.legendary{width:160px;height:160px}.attack-ghost{width:69px;height:92px}.impact-slash{width:80px;height:80px}.ability-dictionary{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.summon-sigil,.summon-sigil>i,.elemental-flash,.effect-status,.battle-number,.legendary-cutin,.impact-slash,.battle-shake{animation:none}.elemental-flash{display:none}.summon-sigil{opacity:.45}.effect-status,.battle-number{transform:translate(-50%,-50%)}.impact-slash{opacity:.5}}

/* One short directional trail per strike: event-driven, board-clipped and skippable. */
.duel-strike-trail{position:fixed;height:1px;transform-origin:0 50%;transform:rotate(var(--trail-angle));z-index:1120;pointer-events:none;animation:duel-trail-fade .5s ease-out both}
.duel-strike-trail>i{position:absolute;left:0;right:0;top:0;height:var(--trail-weight,6px);border-radius:50%;background:linear-gradient(90deg,transparent,var(--fx-color) 35%,#fff9db 85%,transparent);box-shadow:0 0 12px var(--fx-color),0 0 28px var(--fx-color);transform-origin:0 50%;animation:duel-trail-launch .36s cubic-bezier(.18,.8,.3,1) both}
.duel-strike-trail>i:nth-child(2){top:-12px;opacity:.4;right:12%;height:2px;animation-delay:.035s}
.duel-strike-trail>i:nth-child(3){top:12px;opacity:.4;left:9%;height:2px;animation-delay:.065s}
.duel-strike-trail>b{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border:3px solid var(--fx-color);border-radius:50%;box-shadow:0 0 20px var(--fx-color);animation:duel-launch-ring .4s ease-out both}
.duel-strike-trail[data-element=storm]>i{clip-path:polygon(0 45%,35% 0,30% 40%,75% 20%,65% 45%,100% 50%,60% 90%,66% 60%,20% 100%,25% 60%);height:22px;top:-11px}
.duel-strike-trail[data-element=nature]>i{border-radius:100% 0 100% 0}
.duel-strike-trail[data-element=moon]>b{border-left-color:transparent;border-bottom-color:transparent}
.battle-impact>.impact-crown{inset:8%;border:2px solid var(--fx-color);border-radius:50%;box-shadow:inset 0 0 18px var(--fx-color),0 0 18px var(--fx-color);animation:duel-impact-crown .6s ease-out both}
.summon-sigil::after{content:"";position:absolute;inset:-12%;border:2px solid var(--fx-color);border-radius:50%;transform:rotateX(64deg);box-shadow:0 0 24px var(--fx-color);animation:duel-summon-platform .8s ease-out both}
@keyframes duel-trail-fade{0%{opacity:0}12%,65%{opacity:.85}100%{opacity:0}}
@keyframes duel-trail-launch{0%{scale:.02 1.8}65%{scale:1 1}100%{scale:1 .2}}
@keyframes duel-launch-ring{0%{scale:.3;opacity:0}22%{opacity:.85}100%{scale:1.8;opacity:0}}
@keyframes duel-impact-crown{0%{scale:.1;opacity:0}20%{opacity:.9}100%{scale:1.8;opacity:0}}
@keyframes duel-summon-platform{0%{scale:.2;opacity:0}25%{opacity:.9}100%{scale:1.6;opacity:0}}
@media(max-width:600px){.duel-strike-trail>i{box-shadow:0 0 8px var(--fx-color),0 0 16px var(--fx-color)}.duel-strike-trail>i:nth-child(2){top:-8px}.duel-strike-trail>i:nth-child(3){top:8px}.duel-strike-trail>b{width:32px;height:32px;left:-16px;top:-16px}}
@media(prefers-reduced-motion:reduce){.duel-strike-trail,.battle-impact>.impact-crown,.summon-sigil::after{display:none}}
