/* Shared equipment layers preserve the chosen face on every screen. */
.hero-portrait{position:relative;overflow:hidden;isolation:isolate;background:#17221c;min-width:0}
.hero-base{display:block;width:100%;height:100%;object-fit:cover;object-position:center 27%}
.hero-portrait .hero-weapon{position:absolute;right:-7%;bottom:-6%;width:58%;height:91%;object-fit:contain;z-index:2;filter:drop-shadow(-5px 4px 5px #000b);pointer-events:none}
.hero-portrait .weapon-knife{width:48%;height:64%;bottom:1%;right:-1%}
.hero-portrait .weapon-axe,.hero-portrait .weapon-hammer{width:64%;right:-9%}
.equipped-weapon{position:absolute;right:9px;top:10px;z-index:3;padding:4px 7px;color:#ead4a4;background:#101b17dd;border:1px solid #b89a5c70;border-radius:2px;font-size:9px;letter-spacing:.6px}
.hero-summary .summary-avatar{flex:0 0 122px;height:170px;border:1px solid var(--line);border-radius:3px}
.large-portrait.hero-portrait{aspect-ratio:4/5}
.fighter-art>.hero-portrait{width:100%;height:100%}
.fighter-art .equipped-weapon{display:none}
.loadout-preview{display:flex;align-items:center;gap:15px;margin:18px 0;padding:12px;border:1px solid #9b875349;background:#111c1670}
.loadout-preview .loadout-avatar{flex:0 0 85px;height:100px;border:1px solid #b69b5d66}
.loadout-preview .equipped-weapon{display:none}
.loadout-preview>div:last-child{display:flex;flex-direction:column;gap:9px;min-width:0}
.loadout-preview strong{font:22px Georgia,serif;color:var(--text);overflow-wrap:anywhere}
.loadout-preview small{font-size:10px;color:var(--muted)}
.build-option small{overflow-wrap:anywhere}
.fighter-art{isolation:isolate}
.fighter-art:after{pointer-events:none}
.fighter.is-defeated .hero-base{filter:grayscale(.7);opacity:.55}
.impact-overlay{position:absolute;inset:0;z-index:5;pointer-events:none;text-align:center;color:#ffe9d6;animation:impact-lifetime 1.65s both}
.impact-number{position:absolute;left:5%;right:5%;top:32%;font:bold clamp(30px,4vw,64px) Georgia,serif;letter-spacing:-2px;text-shadow:0 3px 6px #000,0 0 20px #e6502fbb;animation:damage-rise 1.55s cubic-bezier(.2,.7,.3,1) both;font-variant-numeric:tabular-nums}
.impact-label{position:absolute;left:6%;right:6%;top:60%;font-size:9px;letter-spacing:1.6px;text-shadow:0 2px 5px #000;background:#111a1680;padding:7px 4px}
.impact-ring{position:absolute;left:20%;top:23%;width:60%;aspect-ratio:1;border:2px solid currentColor;border-radius:50%;opacity:0;animation:impact-ring .65s ease-out both}
.impact-slash{position:absolute;left:15%;top:42%;height:3px;width:70%;background:linear-gradient(90deg,transparent,#fff0c9,transparent);transform:rotate(-38deg);box-shadow:0 0 17px #ff714c;animation:slash-flash .48s ease-out both}
.impact-critical{color:#ffcf73;background:radial-gradient(ellipse at 50% 45%,#b14b1d66,transparent 65%)}
.impact-critical .impact-number{font-size:clamp(36px,4.5vw,74px);text-shadow:0 3px 5px #000,0 0 24px #ee902e}
.impact-critical .impact-ring{border-radius:15%;transform:rotate(45deg);border-width:3px}
.impact-dodge{color:#a2edd2;background:linear-gradient(110deg,transparent,#49b99e33,transparent)}
.impact-dodge .impact-slash{display:none}
.impact-dodge .impact-number{text-shadow:0 0 20px #75e9cc;font-size:64px}
.impact-dodge .impact-ring{border-style:dashed}
.impact-absorb,.impact-guard{color:#a7d5ed}
.impact-absorb .impact-ring,.impact-guard .impact-ring{border-radius:35% 35% 50% 50%;border-width:3px;background:#7bbbd122}
.impact-ward{position:absolute;left:0;right:0;top:73%;font-size:10px;color:#c7d8f4;text-shadow:0 2px 5px #000}
.react-hit .hero-base,.react-hit .fighter-art>img{animation:hurt-reaction .5s ease-out both}
.react-critical .hero-base,.react-critical .fighter-art>img{animation:critical-reaction .6s ease-out both}
.react-dodge .hero-base,.react-dodge .fighter-art>img{animation:dodge-reaction .7s ease-out both}
.react-absorb .hero-base,.react-absorb .fighter-art>img,.react-guard .hero-base,.react-guard .fighter-art>img{animation:guard-reaction .6s ease-out both}
.level-up-banner{display:flex;gap:22px;align-items:center;margin:0 0 24px;padding:20px 28px;border:1px solid #b5a16b88;background:linear-gradient(110deg,#35482b,#17251d 75%);box-shadow:inset 0 0 40px #c9b6670a}
.level-up-glyph{font:52px Georgia,serif;color:#ebd795}
.level-up-banner .eyebrow{display:block;font-size:8px;margin-bottom:5px}
.level-up-banner strong{font:32px Georgia,serif;color:#f0ddb4}
.level-up-banner p{margin:6px 0 0;font-size:12px}
.level-up-fresh{animation:level-glow 1.7s ease-out both}
.reward-medallion{display:block;width:110px;aspect-ratio:1;flex-shrink:0;color:#dbbd7c;filter:drop-shadow(0 0 18px #bda15c33)}
.reward-medallion svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;background:radial-gradient(circle,#a3813340,transparent 66%);border-radius:50%}
.reward-medallion svg path:first-of-type{fill:#c9a45425}
.trophy-row,.battle-reward{display:flex;gap:22px;align-items:center}
.trophy-panel>.eyebrow{display:block;margin-bottom:16px}
.trophy-row h2,.battle-reward h2{font-size:25px;line-height:1.25;margin:5px 0 12px}
.trophy-row p,.battle-reward p{font-size:12px;line-height:1.7;margin:5px 0}
.trophy-row small{font-size:10px;color:var(--muted)}
.completion{position:relative;isolation:isolate}
.reward-reveal{position:relative;max-width:470px;margin:35px auto 20px;padding:28px 20px;border:1px solid #a8925860;background:radial-gradient(ellipse at 50% 0,#8d78332b,transparent 80%),#172119}
.reward-reveal .reward-medallion{width:145px;margin:0 auto 18px;animation:medallion-arrive 1.5s ease-out both}
.reward-reveal h2{font-size:30px;margin-top:12px;line-height:1.25}
.reward-reveal p{font-size:12px;margin-top:14px}
.victory-sparks{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.victory-sparks i{position:absolute;left:calc(5% + var(--i)*5%);top:50%;width:4px;height:11px;border-radius:2px;background:#dfc17c;opacity:0;animation:victory-spark 2.8s calc(var(--i)*.08s) ease-out both;transform:rotate(calc(var(--i)*27deg))}
@keyframes impact-lifetime{0%{opacity:0}8%,68%{opacity:1}100%{opacity:0}}
@keyframes damage-rise{0%{transform:translateY(18px) scale(.65)}20%{transform:translateY(0) scale(1.12)}35%{transform:translateY(-3px) scale(1)}100%{transform:translateY(-42px) scale(.96)}}
@keyframes impact-ring{0%{opacity:.9;scale:.3}100%{opacity:0;scale:1.7}}
@keyframes slash-flash{0%{opacity:0;scale:.2 1}25%{opacity:1;scale:1 1}100%{opacity:0;scale:1.3 1}}
@keyframes hurt-reaction{0%,100%{transform:translateX(0);filter:none}20%{transform:translateX(-8px) rotate(-1deg);filter:sepia(.4) saturate(1.8)}50%{transform:translateX(5px)}}
@keyframes critical-reaction{0%,100%{transform:scale(1);filter:none}18%{transform:translate(-10px,3px) rotate(-2deg) scale(1.04);filter:sepia(.7) saturate(2)}45%{transform:translateX(7px) scale(1.02)}}
@keyframes dodge-reaction{0%,100%{transform:translateX(0);opacity:1}35%{transform:translateX(20px) skewX(-3deg);opacity:.45}65%{transform:translateX(-5px);opacity:.8}}
@keyframes guard-reaction{0%,100%{filter:none;transform:scale(1)}30%{filter:brightness(1.25) saturate(.6);transform:scale(.98)}}
@keyframes level-glow{0%{box-shadow:0 0 45px #d6bd6e77;transform:translateY(8px)}100%{box-shadow:0 0 0 #d6bd6e00;transform:translateY(0)}}
@keyframes medallion-arrive{0%{opacity:0;transform:scale(.6) rotate(-30deg);filter:drop-shadow(0 0 45px #f4cc73)}100%{opacity:1;transform:scale(1) rotate(0);filter:drop-shadow(0 0 18px #bda15c55)}}
@keyframes victory-spark{0%{opacity:0;translate:0 60px}20%{opacity:1}100%{opacity:0;translate:calc((var(--i) - 9)*10px) -350px}}
/* Keep the fallen pose after the effect and after restoring a saved battle. */
.fighter.is-defeated .hero-base{opacity:1;filter:none}
.fighter.is-defeated .fighter-art>.hero-portrait,.fighter.is-defeated .fighter-art>img{transform:translateY(16px) rotate(-4deg) scale(.96);transform-origin:50% 85%;filter:grayscale(1) brightness(.6);opacity:.4}
.fighter.is-falling .hero-base{animation:none}
.fighter.is-falling .fighter-art>.hero-portrait,.fighter.is-falling .fighter-art>img{animation:fall-in-battle 1.45s .3s cubic-bezier(.2,.65,.3,1) both}
.death-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 65%,transparent 15%,#07110de0 100%);animation:death-veil 1.8s ease-out both}
.death-sigil{position:absolute;left:0;right:0;top:38%;color:#c8dfc8;font:64px Georgia,serif;text-align:center;text-shadow:0 0 25px #b8e0b9;animation:soul-departure 1.7s .25s ease-out both}
.soul-mote{position:absolute;left:42%;top:65%;width:5px;height:12px;border-radius:50%;background:#cae7ce;box-shadow:0 0 12px #a8d8b4;animation:soul-departure 1.5s .3s ease-out both}
.soul-mote:nth-of-type(2){left:58%;top:58%;animation-delay:.5s}
.soul-mote:nth-of-type(3){left:49%;top:72%;animation-delay:.7s}
.fallen-mark{position:absolute;left:0;right:0;bottom:35px;z-index:3;text-align:center;color:#d7ceb9;font-size:9px;letter-spacing:2px;text-shadow:0 2px 5px #000}
@keyframes fall-in-battle{0%{transform:translateY(0) rotate(0) scale(1);filter:grayscale(0) brightness(1);opacity:1}30%{transform:translateY(3px) rotate(-1deg) scale(1);filter:grayscale(.5) brightness(.85);opacity:.85}100%{transform:translateY(16px) rotate(-4deg) scale(.96);filter:grayscale(1) brightness(.6);opacity:.4}}
@keyframes death-veil{0%{opacity:0}30%,70%{opacity:1}100%{opacity:0}}
@keyframes soul-departure{0%{opacity:0;transform:translateY(16px) scale(.5)}25%{opacity:.9;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-100px) scale(.6)}}
@media(max-width:700px){
  .hero-summary .summary-avatar{flex-basis:100px;height:145px}
  .character-card .large-portrait.hero-portrait{width:130px;margin:0}
  .impact-number{font-size:36px;letter-spacing:-1px}
  .impact-critical .impact-number{font-size:42px}
  .impact-label{top:63%;font-size:7px;letter-spacing:.7px;padding:5px 2px}
  .impact-ward{font-size:8px;top:78%}
  .trophy-row,.battle-reward{gap:14px}
  .trophy-row .reward-medallion,.battle-reward .reward-medallion{width:76px}
  .level-up-banner{padding:17px;gap:16px}
}
@media(max-width:420px){
  .hero-summary .summary-avatar{flex-basis:90px;height:135px}
  .character-card .large-portrait.hero-portrait{width:100px}
  .equipped-weapon{font-size:8px;right:5px;top:5px;padding:3px 5px}
  .trophy-row h2,.battle-reward h2{font-size:22px}
  .loadout-preview strong{font-size:20px}
  .reward-reveal h2{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .impact-overlay,.impact-overlay *,.react-hit .hero-base,.react-hit .fighter-art>img,.react-critical .hero-base,.react-critical .fighter-art>img,.react-dodge .hero-base,.react-dodge .fighter-art>img,.react-absorb .hero-base,.react-absorb .fighter-art>img,.react-guard .hero-base,.react-guard .fighter-art>img,.level-up-fresh,.reward-reveal .reward-medallion,.victory-sparks i{animation:none!important}
  .impact-overlay{opacity:1;background:transparent}
  .impact-ring,.impact-slash,.victory-sparks{display:none}
  .fighter.is-falling .fighter-art>.hero-portrait,.fighter.is-falling .fighter-art>img{animation:none}
  .death-overlay{display:none}
}