/* Portrait-only motion: never transform the actor button, HP, state or dock. */
/* Transparent summon cut-in; the technique name remains in the shared banner. */
.ga-summon-stage{--ga-summon-color:173 149 255;position:absolute;z-index:20;inset:68px 0 40px;overflow:hidden;pointer-events:none;background:transparent;isolation:isolate;animation:ga-summon-life var(--ga-summon-duration,1130ms) linear both}
.ga-summon-fire{--ga-summon-color:255 116 38}.ga-summon-ice{--ga-summon-color:145 229 255}.ga-summon-lightning{--ga-summon-color:255 224 110}.ga-summon-earth{--ga-summon-color:226 169 93}.ga-summon-water{--ga-summon-color:77 198 255}.ga-summon-steel{--ga-summon-color:203 178 255}.ga-summon-life{--ga-summon-color:255 205 113}
.ga-summon-art{position:absolute;z-index:2;left:50%;top:50%;width:min(90%,26rem);height:100%;object-fit:contain;background:transparent;border:0;box-shadow:none;filter:drop-shadow(0 0 12px rgb(var(--ga-summon-color)/.6));transform:translate(-50%,-50%);animation:ga-summon-arrive var(--ga-summon-duration,1130ms) cubic-bezier(.18,.7,.25,1) both}
.ga-summon-energy{position:absolute;z-index:0;inset:6% 10%;border-radius:50%;background:radial-gradient(ellipse at 46% 60%,rgb(var(--ga-summon-color)/.42),rgb(var(--ga-summon-color)/.12) 38%,transparent 68%);animation:ga-summon-energy var(--ga-summon-duration,1130ms) ease-out both}
.ga-summon-wave{position:absolute;z-index:1;left:50%;top:75%;width:66%;height:22%;border-radius:50%;background:radial-gradient(ellipse,transparent 48%,rgb(var(--ga-summon-color)/.7) 54%,transparent 64%);animation:ga-summon-wave var(--ga-summon-duration,1130ms) ease-out both}
.ga-summon-surge{position:absolute;z-index:3;left:-35%;top:48%;width:150%;height:16%;background:linear-gradient(90deg,transparent 10%,rgb(var(--ga-summon-color)/.12) 30%,rgb(var(--ga-summon-color)/.75) 65%,#fff7db 79%,transparent 96%);filter:blur(2px);transform-origin:left center;animation:ga-summon-surge var(--ga-summon-duration,1130ms) ease-in both}
.ga-summon-lightning .ga-summon-surge{height:34%;filter:drop-shadow(0 0 6px #ffe39b);clip-path:polygon(0 48%,38% 44%,48% 5%,56% 58%,72% 29%,100% 45%,74% 57%,52% 95%,46% 43%,40% 56%,0 53%)}
.ga-summon-steel .ga-summon-surge{height:5%;background:linear-gradient(90deg,transparent,#e2d5ff 60%,#fff 82%,transparent);filter:drop-shadow(0 0 6px #a08dff)}
.ga-summon-life .ga-summon-surge{top:0;left:10%;width:80%;height:100%;background:radial-gradient(ellipse at 50% 70%,rgb(var(--ga-summon-color)/.44),transparent 65%);animation-name:ga-summon-rebirth}
.ga-summon-mote{position:absolute;z-index:3;left:var(--ga-mote-x);top:85%;width:3px;height:12px;border-radius:50%;background:rgb(var(--ga-summon-color));box-shadow:0 0 7px rgb(var(--ga-summon-color)/.8);animation:ga-summon-mote calc(var(--ga-summon-duration,1130ms) * .8) var(--ga-mote-delay,0ms) ease-out both}
@keyframes ga-summon-life{0%{opacity:0}10%,84%{opacity:1}100%{opacity:0}}
@keyframes ga-summon-arrive{0%{transform:translate(-58%,-38%) scale(.5);opacity:0}23%{transform:translate(-50%,-50%) scale(1.08);opacity:1}40%{transform:translate(-50%,-50%) scale(1);opacity:1}60%{transform:translate(-46%,-52%) scale(1.06);opacity:1}100%{transform:translate(-40%,-54%) scale(1.12);opacity:0}}
@keyframes ga-summon-energy{0%{scale:.25;opacity:0}22%{scale:1;opacity:.85}58%{scale:1.12;opacity:.6}100%{scale:1.4;opacity:0}}
@keyframes ga-summon-wave{0%,15%{transform:translate(-50%,-50%) scale(.1);opacity:0}28%{opacity:.85}72%,100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
@keyframes ga-summon-surge{0%,42%{transform:translateX(-20%) rotate(-12deg) scaleX(.05);opacity:0}55%{opacity:.8}78%,100%{transform:translateX(55%) rotate(-12deg) scaleX(1.3);opacity:0}}
@keyframes ga-summon-rebirth{0%,35%{transform:translateY(25%) scale(.5);opacity:0}58%{opacity:.8}100%{transform:translateY(-30%) scale(1.3);opacity:0}}
@keyframes ga-summon-mote{0%{transform:translate(0,12px) scale(.5);opacity:0}22%{opacity:.9}100%{transform:translate(var(--ga-mote-drift),calc(-1 * var(--ga-mote-rise)));opacity:0}}
.ga-summon-quiet,.ga-summon-quiet .ga-summon-art,.ga-summon-quiet .ga-summon-energy{animation:none}
.ga-summon-quiet .ga-summon-art{opacity:.85}.ga-summon-quiet .ga-summon-energy{opacity:.25}.ga-summon-quiet :is(.ga-summon-surge,.ga-summon-wave,.ga-summon-mote){display:none}
@media (orientation:landscape) and (max-height:500px) and (max-width:1100px){.ga-summon-stage{inset:26px 0 28px}.ga-summon-art{width:80%}}
@media (orientation:portrait) and (max-width:360px) and (max-height:740px){.ga-summon-stage{inset:30px 0 0}}
@media(prefers-reduced-motion:reduce){.ga-summon-stage,.ga-summon-stage *{animation:none}.ga-summon-stage :is(.ga-summon-surge,.ga-summon-wave,.ga-summon-mote){display:none}.ga-summon-stage .ga-summon-energy{opacity:.25}}
.actor-mark.ga-melee-step { will-change:translate,rotate,scale; }
/* Small cast cues stay on the portrait; only the 5px mote crosses the field. */
.ga-spell-magic{--ga-spell-color:#b8b2e8}.ga-spell-heal{--ga-spell-color:#99d8ad}.ga-spell-ward,.ga-spell-mp{--ga-spell-color:#98cde2}.ga-spell-buff{--ga-spell-color:#dbcd9f}.ga-spell-debuff{--ga-spell-color:#b5a3d0}.ga-spell-cleanse{--ga-spell-color:#b2ddd4}
.ga-spell-chant,.ga-spell-arrival{position:absolute;left:50%;top:46%;width:44px;height:44px;max-width:72%;max-height:72%;border:1px solid var(--ga-spell-color);border-radius:50%;pointer-events:none;z-index:6;opacity:0;animation:ga-spell-chant var(--ga-spell-duration,120ms) ease-out both}
.ga-spell-chant::after{content:"";position:absolute;inset:5px;border:1px solid var(--ga-spell-color);border-radius:50%;opacity:.3}
.ga-spell-arrival{width:24px;height:24px;animation-name:ga-spell-arrival;animation-duration:calc(var(--ga-spell-duration,120ms) * .35)}
.ga-spell-mote{position:fixed;left:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--ga-spell-color);box-shadow:0 0 4px var(--ga-spell-color);pointer-events:none;z-index:25;opacity:0}
@keyframes ga-spell-chant{0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}30%,65%{opacity:.45;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes ga-spell-arrival{0%{opacity:.5;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.ga-spell-chant,.ga-spell-mote,.ga-spell-arrival{display:none}}
/* The idle portrait moves with this mark. Keep its canvas over the original
   image even when the page's style-src policy rejects the idle module's style tag. */
.battle-shell .ga-part-idle>.actor-image { visibility:hidden!important; }
.battle-shell .ga-part-idle-canvas { position:absolute!important;max-width:none!important;max-height:none!important;pointer-events:none;z-index:1; }
.actor-mark.actor-lunge-right { animation-name: ga-attack-right; }
.actor-mark.actor-lunge-left { animation-name: ga-attack-left; }
.actor-mark.actor-recoil-right { animation-name: ga-hit-right; }
.actor-mark.actor-recoil-left { animation-name: ga-hit-left; }
@keyframes ga-attack-right { 0%,100%{transform:translateX(0)} 8%{transform:translateX(-4px)} 22%,35%{transform:translateX(20px)} 65%{transform:translateX(3px)} }
@keyframes ga-attack-left { 0%,100%{transform:translateX(0)} 8%{transform:translateX(4px)} 22%,35%{transform:translateX(-20px)} 65%{transform:translateX(-3px)} }
@keyframes ga-hit-right { 0%,100%{transform:translateX(0);filter:none} 18%{transform:translateX(8px);filter:brightness(1.45)} 40%{transform:translateX(-2px)} }
@keyframes ga-hit-left { 0%,100%{transform:translateX(0);filter:none} 18%{transform:translateX(-8px);filter:brightness(1.45)} 40%{transform:translateX(2px)} }
html[data-combat-motion="short"] .actor-mark:is(.actor-lunge-right,.actor-lunge-left) { animation-duration:calc(280ms * var(--battle-speed-factor)); }
.ga-critical-spark { position:absolute;z-index:8;inset:8%;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#fff7d6bb,transparent 66%);animation:ga-critical-spark var(--ga-impact-duration,210ms) ease-out both; }
.ga-critical-spark::before,.ga-critical-spark::after { content:"";position:absolute;top:49%;left:-8%;width:116%;height:3px;background:linear-gradient(90deg,transparent,#fff6cc,#f6c360,transparent);box-shadow:0 0 7px #ffda78;transform:rotate(-28deg); }
.ga-critical-spark::after { transform:rotate(52deg);height:2px; }
@keyframes ga-critical-spark { 0%{opacity:0;scale:.7} 12%,28%{opacity:1;scale:1} 100%{opacity:0;scale:1.18} }
.combat-float.critical { font-size:1.45rem; }
/* Single subdued field flash; animation holds stay within portrait artwork. */
.battle-shell .combatants>.ga-impact-flash{position:absolute;inset:0;z-index:42;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,#fff3cf47,#ffe3a526 60%,transparent 96%);animation:ga-field-impact var(--ga-field-impact-duration,115ms) ease-out both}
.battle-shell .combatants>.ga-impact-combo{background:radial-gradient(ellipse at 50% 48%,#d9f4ff47,#b2ddff26 60%,transparent 96%)}
.ga-impact-hold .actor-mark,.ga-impact-hold .actor-mark *{animation-play-state:paused!important}
@keyframes ga-field-impact{0%{opacity:0}8%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.battle-shell .combatants>.ga-impact-flash{display:none}.ga-impact-hold .actor-mark,.ga-impact-hold .actor-mark *{animation-play-state:revert!important}}
/* Reserve the space above the portrait rows; never cover their HP or states. */
body.battle-active .battle-shell .combatants > .battle-technique-banner.technique-pair { top:4px; }
.battle-technique-banner.ga-pair-banner { box-sizing:border-box;width:min(300px,calc(100% - 16px));min-width:0;min-height:48px;padding:6px 48px;border-color:#d9c580;overflow:hidden;isolation:isolate; }
.ga-pair-banner>small,.ga-pair-banner>strong { position:relative;z-index:2;max-width:100%; }
.ga-pair-banner>strong { font-size:.85rem;line-height:1.2;letter-spacing:.02em; }
.ga-pair-faces { position:absolute;inset:0;pointer-events:none;z-index:1; }
.ga-pair-face { position:absolute;top:0;bottom:0;width:62px;overflow:hidden;background:linear-gradient(135deg,#57c1ed55,#0b293f);border-inline:1px solid #8dcfe880;animation:ga-pair-face var(--ga-pair-enter,160ms) ease-out both; }
.ga-pair-face-0 { left:-10px;transform:skewX(-13deg);--ga-face-from:-30px; }
.ga-pair-face-1 { right:-10px;transform:skewX(-13deg);--ga-face-from:30px;background:linear-gradient(135deg,#483921,#e2bd6655);border-color:#e5c57d80; }
.ga-pair-face>img { width:100%;height:100%;object-fit:cover;object-position:50% 24%;transform:skewX(13deg) scale(1.2);filter:drop-shadow(0 0 4px #07121e); }
@keyframes ga-pair-face { from{opacity:0;translate:var(--ga-face-from) 0} to{opacity:1;translate:0 0} }
.ga-pair-quiet .ga-pair-face { animation:none; }
@media(max-width:360px){.battle-technique-banner.ga-pair-banner{min-height:44px;padding-inline:42px}.ga-pair-face{width:54px}.ga-pair-banner>strong{font-size:.78rem}}
@media(max-height:680px) and (max-width:700px){.battle-technique-banner.ga-pair-banner{min-height:32px;padding:4px 40px}.ga-pair-face{width:50px}.ga-pair-banner>small{font-size:.44rem}.ga-pair-banner>strong{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){html .actor-mark:is(.actor-lunge-right,.actor-lunge-left,.actor-recoil-right,.actor-recoil-left){animation:none!important}.ga-critical-spark{display:none}.ga-pair-face{animation:none}}

/* Three linked portraits share one compact blue-and-gold technique banner. */
body.battle-active .battle-shell .combatants > .battle-technique-banner.technique-chain{top:4px}
.battle-technique-banner.technique-chain{box-sizing:border-box;width:min(376px,calc(100% - 16px));min-width:0;min-height:56px;padding:7px 16px;border-top:1px solid #8bddf6;border-bottom:2px solid #e6c47e;border-radius:3px 12px 3px 12px;background:linear-gradient(105deg,#102f47f5,#101c2bf5 58%,#3b3024f5);box-shadow:0 5px 16px #0009,inset 0 1px 12px #86d9ef12;overflow:hidden;isolation:isolate}
.technique-chain>small,.technique-chain>strong{position:relative;z-index:2;max-width:100%}
.technique-chain>small{color:#b4e5f3;letter-spacing:.14em;font-size:.58rem}
.technique-chain>strong{color:#fff0bb;font-size:.95rem;line-height:1.25;letter-spacing:.04em;overflow-wrap:anywhere;text-shadow:0 1px 3px #000,0 0 10px #e8ba5b40}
.battle-technique-banner.ga-chain-banner{padding-left:130px}
.ga-chain-faces{position:absolute;inset:0;z-index:1;pointer-events:none}
.ga-chain-face{position:absolute;top:0;bottom:0;width:52px;overflow:hidden;transform:skewX(-13deg);border-inline:1px solid #91dbf6c9;background:linear-gradient(145deg,#3da4cf88,#102d46);animation:ga-chain-face var(--ga-chain-enter,220ms) ease-out both}
.ga-chain-face-0{left:-8px;--ga-chain-from:-22px}
.ga-chain-face-1{left:32px;--ga-chain-from:-15px;background:linear-gradient(145deg,#a2e7ee77,#28414c);border-color:#c8eeefd9}
.ga-chain-face-2{left:72px;--ga-chain-from:-8px;background:linear-gradient(145deg,#edc77488,#46331c);border-color:#f3d58fcf}
.ga-chain-face>img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;transform:skewX(13deg) scale(1.2);filter:drop-shadow(0 0 3px #07121e)}
.ga-chain-face::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#07152266,transparent 55%);pointer-events:none}
@keyframes ga-chain-face{from{opacity:0;translate:var(--ga-chain-from) 0}to{opacity:1;translate:0 0}}
.ga-chain-quiet .ga-chain-face{animation:none}
@media(max-width:360px){.battle-technique-banner.technique-chain{min-height:50px;padding-right:10px}.battle-technique-banner.ga-chain-banner{padding-left:116px}.ga-chain-face{width:48px}.ga-chain-face-1{left:27px}.ga-chain-face-2{left:62px}.technique-chain>strong{font-size:.85rem}}
@media(max-height:680px) and (max-width:700px){.battle-technique-banner.technique-chain{min-height:40px;padding-block:4px}.battle-technique-banner.ga-chain-banner{padding-left:110px}.ga-chain-face{width:46px}.ga-chain-face-1{left:25px}.ga-chain-face-2{left:58px}.technique-chain>small{font-size:.5rem}.technique-chain>strong{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.ga-chain-face{animation:none}}

/* Additive hit feedback, inside existing portrait bounds and existing waits. */
.ga-ward-impact,.ga-defeat-fragments{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:8;contain:layout style}
.ga-ward-impact>svg{width:70%;height:78%;overflow:visible;filter:drop-shadow(0 0 4px #67dfff99);animation:ga-ward-hit var(--ga-feedback-duration) ease-out both}
.ga-ward-shell{fill:#72d7f426;stroke:#beefff;stroke-width:2.1}
.ga-ward-inner{fill:none;stroke:#75d4ea88;stroke-width:1}
.ga-ward-crack{fill:none;stroke:#fff2cc;stroke-width:2.4;stroke-linejoin:bevel}
.ga-ward-break>svg{animation-name:ga-ward-shatter}
@keyframes ga-ward-hit{0%{opacity:0;scale:.85}25%{opacity:.95;scale:1}100%{opacity:0;scale:1.03}}
@keyframes ga-ward-shatter{0%{opacity:0;scale:.9}18%{opacity:1;scale:1}100%{opacity:0;scale:1.13;filter:blur(1px)}}
.ga-defeat-glow>img{filter:brightness(1.22) drop-shadow(0 0 3px #b8eafa)!important}
.ga-defeat-fragments>i{position:absolute;left:50%;top:48%;width:3px;height:6px;background:#cff3ff;box-shadow:0 0 5px #a4ddfa;animation:ga-defeat-shard var(--ga-feedback-duration) ease-out both}
.ga-defeat-final>i{background:#ffecbc;box-shadow:0 0 6px #f5ce87}
@keyframes ga-defeat-shard{0%{opacity:0;translate:0 0;rotate:0deg}18%{opacity:1}100%{opacity:0;translate:var(--ga-shard-x) var(--ga-shard-y);rotate:65deg}}
.ga-resistance-badge{display:inline-block;position:relative;width:22px;height:22px;margin-left:3px;vertical-align:-4px;color:#9dd7f3;filter:drop-shadow(0 1px 2px #06121d)}
.ga-resistance-badge>svg{position:absolute;pointer-events:none}
.ga-resist-shield{inset:0;width:22px;height:22px;fill:#10283de8;stroke:currentColor;stroke-width:1.6}
.ga-resist-element{left:5px;top:4px;width:12px;height:13px;fill:currentColor}
.ga-resist-fire{color:#ffc58e}.ga-resist-water{color:#8ddfff}.ga-resist-lightning{color:#f4e490}.ga-resist-poison{color:#bbeb9c}.ga-resist-bleed{color:#f5a6af}.ga-resist-arcane{color:#d0b4ff}
.ga-impact-quiet>svg{animation:none;opacity:.65;filter:none}
@media(prefers-reduced-motion:reduce){.ga-defeat-fragments{display:none}.ga-ward-impact>svg{animation:none;opacity:.65;filter:none}}