/* Drakoria combat: the demo's resource colors and a compact command window. */
.battle-panel{position:relative;background:linear-gradient(145deg,#172a38,#09151e)!important;border-color:#b9975c!important;box-shadow:inset 0 0 0 3px #2c3b43,0 12px 36px #0007}
.battle-panel .battle-heading{padding-bottom:4px}.battle-panel .battle-heading h2{color:#f5e6ca}.battle-panel .battle-scene{height:clamp(410px,58dvh,640px);border-color:#806b46}
.battle-scene .hero{left:30%}.battle-scene .enemy{right:6%}.battle-scene .combatant{width:clamp(200px,21vw,280px);bottom:24px}.battle-scene .sprite-window{margin-bottom:128px}
.battle-scene .fighter-label{background:linear-gradient(120deg,#172d3bf2,#08151cf2);border:1px solid #b9975c;padding:12px 14px;box-shadow:inset 0 0 0 2px #35505b66,0 5px 20px #0008;border-radius:5px;font-family:system-ui,sans-serif}
.battle-scene .fighter-label strong{font:600 13px Georgia,serif;color:#f5e6ca;letter-spacing:.02em;padding-bottom:5px;border-bottom:1px solid #c9a56c44}.resource-row{width:100%;margin:7px 0 0;min-width:0}.resource-row>span{display:block!important;font:600 11px system-ui,sans-serif!important;font-variant-numeric:tabular-nums;color:#ffd4d5!important;margin:0 0 5px!important}.resource-row.mana-resource>span{color:#c4e5ff!important}
.resource-row progress{appearance:none;display:block;width:100%;height:11px;border:1px solid #d6b57977;border-radius:2px;background:#060b10;box-shadow:inset 0 2px 4px #0008;overflow:hidden}
.resource-row progress::-webkit-progress-bar{background:#060b10;border-radius:0}.resource-row progress::-webkit-progress-value{background:linear-gradient(90deg,#9d1d38,#ec5462 70%,#ff8990)!important;border-radius:0;box-shadow:inset 0 1px #ffc5c566}.resource-row progress::-moz-progress-bar{background:linear-gradient(90deg,#9d1d38,#ec5462 70%,#ff8990)!important;border-radius:0}
.resource-row.mana-resource progress::-webkit-progress-value{background:linear-gradient(90deg,#164a93,#388bd4 70%,#82c9f5)!important}.resource-row.mana-resource progress::-moz-progress-bar{background:linear-gradient(90deg,#164a93,#388bd4 70%,#82c9f5)!important}
.resource-row.fury-resource progress::-webkit-progress-value{background:linear-gradient(90deg,#b02c12,#f08726 70%,#ffc356)!important}.resource-row.fury-resource progress::-moz-progress-bar{background:linear-gradient(90deg,#b02c12,#f08726 70%,#ffc356)!important}.resource-row.fury-resource>span{color:#ffc985!important}
.fighter-label .fighter-condition{min-height:12px;font:10px system-ui,sans-serif;margin:6px 0 0;color:#edbc77}.is-critical .fighter-label{border-color:#f48c76;box-shadow:inset 0 0 0 2px #a53a3766,0 5px 20px #0008}.is-critical .fighter-condition{color:#ffa58c}.is-dead .fighter-label{opacity:.7}
.battle-command-dock{position:absolute;z-index:5;top:170px;left:18px;width:clamp(190px,22%,260px);max-height:clamp(330px,48dvh,520px);overflow:auto;overscroll-behavior:contain;padding:15px;border:1px solid #bc9b61;border-radius:4px;background:linear-gradient(145deg,#21343cf5,#09151ef5);box-shadow:inset 0 0 0 3px #b9975c18,0 8px 24px #0009;color:#f4ead5}
.command-kicker{font:9px system-ui;letter-spacing:.19em;color:#d6b579;margin:0 0 12px}.battle-command-dock .command-heading{padding:0 0 12px;border-top:0;border-bottom:1px solid #bc9b6144;display:block}.battle-command-dock .command-heading h3{font:19px Georgia;color:#f6e3b7;margin:0 0 5px}.battle-command-dock .command-heading span{color:#b6c8cf;font:10px system-ui}.battle-command-dock>.actions{display:grid;grid-template-columns:1fr;padding:8px 0;gap:3px}
.battle-command-dock .combat-command{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;width:100%;padding:9px 10px 9px 28px;border:1px solid transparent;border-left:2px solid transparent;border-radius:2px;background:transparent;color:#f3ead7;text-align:left;font:600 14px Georgia,serif}.combat-command::before{content:'◇';position:absolute;left:8px;color:#b79b65;font-size:12px}.combat-command[data-command='attack']::before{content:'⚔'}.combat-command[data-command='defend']::before{content:'◈'}.combat-command[data-command='magic']::before{content:'✦'}
.battle-command-dock .combat-command:hover:not(:disabled),.battle-command-dock .combat-command:focus-visible{color:#ffe2a2;border-left-color:#e5bf75;border-top-color:#d6b57955;border-bottom-color:#d6b57955;background:linear-gradient(90deg,#b9975c40,#b9975c08);outline:2px solid #efd396;outline-offset:-2px}.battle-command-dock .combat-command:disabled{color:#8b99a0;opacity:.55}.command-name{min-width:0;overflow-wrap:anywhere}.command-cost{flex:none;font:10px system-ui;color:#a9d7ee;white-space:nowrap;border:1px solid #51778955;padding:3px 5px;border-radius:3px}.combat-command[data-command='skill'] .command-cost{color:#e4d3a9}
#command-detail{padding-top:10px;border-top:1px solid #bc9b6144;margin:2px 0 0;font:11px/1.5 system-ui;color:#c8d3d3;min-height:44px}.battle-panel .battle-history{margin-top:16px}.jrpg-sheet .resources{display:block}.jrpg-sheet .resources .resource-row{margin:10px 0}.jrpg-sheet .resource-row progress{height:10px}
@media(max-width:900px){.battle-panel .battle-command-dock{position:relative;top:auto;left:auto;width:auto;max-height:none;margin:14px;border-radius:5px}.battle-command-dock>.actions{grid-template-columns:repeat(2,minmax(0,1fr))}.battle-scene .hero{left:5%}.battle-scene .enemy{right:5%}.battle-scene .combatant{width:40%}.battle-scene .sprite-window{margin-bottom:128px}.command-kicker{margin-bottom:8px}.battle-command-dock .command-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.battle-command-dock .command-heading h3{margin:0}.battle-command-dock .combat-command{font-size:13px}.battle-command-dock .command-cost{font-size:9px}}
@media(max-width:650px){.battle-panel .battle-scene{height:420px}.battle-scene .fighter-label{padding:10px 9px}.battle-scene .fighter-label strong{font-size:11px}.battle-scene .combatant{width:46%;bottom:16px}.battle-scene .hero{left:2%}.battle-scene .enemy{right:2%}.battle-scene .sprite-window{margin-bottom:125px}.resource-row>span{font-size:10px!important}.resource-row progress{height:10px}.battle-panel .battle-command-dock{padding:12px;margin:10px}.battle-command-dock .combat-command{padding-left:25px;gap:5px;flex-wrap:wrap}.command-cost{margin-left:auto}.battle-command-dock .command-heading span{font-size:9px}.battle-scene .arena-tag{border-color:#b9975c;background:#09151ee6;color:#ecd3a2}.battle-scene .fighter-condition{font-size:9px}}

.skills-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.skills-toolbar h3{margin:0;color:#ead8a8;font-size:1rem}.skills-toolbar button{padding:5px 8px;font-size:.8rem}#combat-skills.actions{display:flex;flex-direction:column;gap:6px}.skill-status{display:block;width:100%;font-size:.72rem;line-height:1.35;font-weight:normal;color:#b9cbd0}.combat-command[data-command="skill"]{flex-wrap:wrap}#combat-skills-empty{font-size:.85rem;color:#b9cbd0}

/* Visible artwork sets the scale; transparent GIF padding does not. */
.battle-panel .battle-scene{height:clamp(500px,65dvh,680px)}
.hero[data-sprite='guerreiro']{--sprite-width:2.41206;--sprite-height:1.60804;--sprite-center:1.133166;--sprite-top:0.507538}
.hero[data-sprite='mago']{--sprite-width:2.171946;--sprite-height:1.447964;--sprite-center:1.056561;--sprite-top:0.357466}
.hero[data-sprite='arqueiro']{--sprite-width:1.889764;--sprite-height:1.259843;--sprite-center:0.98622;--sprite-top:0.181102}
.enemy[data-sprite='goblin']{--sprite-width:.857798;--sprite-height:1.009174;--sprite-center:.428899;--sprite-top:.004587}
.battle-scene .combatant{--art-height:170px;--art-aspect:1;--art-width-limit:350px}
.battle-scene .hero{z-index:1}
.battle-scene .enemy{--art-height:220px;z-index:0}
.battle-scene .enemy[data-rank='elite']{--art-height:255px;--art-width-limit:400px}
.battle-scene .enemy[data-rank='boss']{--art-height:300px;--art-width-limit:450px}
.enemy[data-sprite='espectro_cemiterio']{--art-aspect:1.379913}
.enemy[data-sprite='arvore_demoniaca']{--art-aspect:0.943005}
.enemy[data-sprite='hobgoblin']{--art-aspect:0.806452}
.enemy[data-sprite='lobo_sombrio']{--art-aspect:1.958904}
.enemy[data-sprite='coveiro_maldito']{--art-aspect:1.109649}
.enemy[data-sprite='aranha_pestilenta']{--art-aspect:1.538117}
.enemy[data-sprite='hidra_corrupcao']{--art-aspect:1.704762}
.enemy[data-sprite='rato_mutante']{--art-aspect:1.787671}
.enemy[data-sprite='lobo_mutante_boss']{--art-aspect:1.841518}
.enemy[data-sprite='esqueleto_guerreiro']{--art-aspect:0.632509}
.enemy[data-sprite='orc']{--art-aspect:1.154185}
.enemy[data-sprite='orc_rei']{--art-aspect:1.376453}

.battle-scene .combatant[data-sprite]:not([data-sprite='']) .sprite-window{--visible-size:min(var(--art-height),calc(var(--art-width-limit) / var(--art-aspect)));height:220px;width:100%}
.battle-scene .combatant[data-sprite]:not([data-sprite='']) .sprite-window img{width:calc(var(--visible-size)*var(--sprite-width));height:calc(var(--visible-size)*var(--sprite-height));left:calc(50% - var(--visible-size)*var(--sprite-center));top:calc(220px - var(--visible-size)*(1 + var(--sprite-top)));bottom:auto;max-width:none;object-fit:fill}
.battle-scene .enemy .sprite-window{left:-15px}
.battle-scene .enemy[data-rank='elite'] .sprite-window{left:-30px}
.battle-scene .enemy[data-rank='boss'] .sprite-window{left:-50px}
@media(max-width:650px){
.battle-panel .battle-scene{height:420px;container-type:inline-size}
.battle-scene .hero{--art-height:min(105px,24cqw)}
.battle-scene .enemy{--art-height:165px;--art-width-limit:50cqw}
.battle-scene .enemy[data-rank='elite']{--art-height:190px;--art-width-limit:56cqw}
.battle-scene .enemy[data-rank='boss']{--art-height:220px;--art-width-limit:62cqw}
.battle-scene .combatant[data-sprite]:not([data-sprite='']) .sprite-window{height:185px}
.battle-scene .combatant[data-sprite]:not([data-sprite='']) .sprite-window img{top:calc(185px - var(--visible-size)*(1 + var(--sprite-top)))}
/* Centers: hero 17%, normal enemy 73%, elite 70%, boss 67% of the arena. */
.battle-scene .hero .sprite-window{left:-17.3913%}
.battle-scene .enemy .sprite-window{left:-4.3478%}
.battle-scene .enemy[data-rank='elite'] .sprite-window{left:-10.8696%}
.battle-scene .enemy[data-rank='boss'] .sprite-window{left:-17.3913%}
}

/* ATB is the server snapshot's turn gauge, separate from mana and fury. */
.resource-row.atb-resource>span{color:#ffe29b!important}
.resource-row.atb-resource progress::-webkit-progress-value{background:linear-gradient(90deg,#907021,#d9b454 70%,#ffe29b)!important}
.resource-row.atb-resource progress::-moz-progress-bar{background:linear-gradient(90deg,#907021,#d9b454 70%,#ffe29b)!important}
.atb-resource.atb-ready progress{border-color:#ffe29b;box-shadow:0 0 7px #ffe29b66}
.battle-scene .sprite-window{margin-bottom:168px}
.battle-panel .battle-scene{height:clamp(550px,70dvh,730px)}
@media(max-width:650px){.battle-scene .sprite-window{margin-bottom:165px}.battle-panel .battle-scene{height:460px}}

/* Status cues follow the visible sprite bounds, with text independent of color. */
.status-effects{position:absolute;inset:0;pointer-events:none;z-index:1}
.status-vfx{position:absolute;bottom:0;left:50%;width:min(110px,70%);height:min(85px,45%);transform:translateX(-50%);opacity:.8;animation:status-breathe 2.4s ease-in-out infinite}
.status-vfx::before,.status-vfx::after{content:"";position:absolute;inset:0}
.status-ice::before{background:linear-gradient(115deg,#c8f6ffbb,#369bdb66 55%,#c8f6ffdd);border-bottom:3px solid #bfeeff;clip-path:polygon(0 100%,6% 54%,17% 65%,23% 18%,35% 45%,45% 0,56% 56%,70% 23%,80% 62%,93% 39%,100% 100%)}
.status-ice::after{inset:auto -12% -4px;height:20px;border-radius:50%;background:radial-gradient(ellipse,#defaffaa,#53b8dc55 60%,transparent 72%)}
.status-burn::before{background:linear-gradient(0deg,#ff4f1688,#ffc66caa,transparent);clip-path:polygon(0 100%,10% 50%,25% 80%,40% 0,53% 55%,70% 18%,85% 65%,100% 100%)}
.status-poison::before{border-radius:50%;background:radial-gradient(circle at 25% 25%,#aaff8daa 0 9%,transparent 10%),radial-gradient(circle at 70% 60%,#9dd85fbb 0 12%,transparent 13%),radial-gradient(ellipse at bottom,#559d5966,transparent 65%)}
.status-bleed::before{background:radial-gradient(ellipse at 30% 70%,#ee566aaa 0 7%,transparent 8%),radial-gradient(ellipse at 65% 35%,#ee566aaa 0 6%,transparent 7%)}
.status-slow::before,.status-lock::before,.status-weak::before,.status-summon::before{inset:auto 0 4px;height:24px;border:3px dashed #d5b36e;border-radius:50%;box-shadow:0 0 12px #d5b36e55}
.status-lock::before{border-color:#be8ce6}.status-weak::before{border-color:#b8c1cf}.status-summon::before{border-color:#8ed5ea}
.status-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:100%;margin-top:3px}
.status-labels span{font-size:10px;line-height:1.4;padding:2px 4px;background:#141c27e8;border:1px solid #8199aa;border-radius:4px;color:#edf7ff}
@keyframes status-breathe{50%{opacity:.5}}
.motion-reduced .status-vfx{animation:none}
@media(prefers-reduced-motion:reduce){.status-vfx{animation:none}}
#combat-items.actions{display:flex;flex-direction:column;gap:6px}
.combat-command[data-command="item"]{flex-wrap:wrap}
.combat-command[data-command="item"] img{object-fit:contain;flex:none}
.fighter-label .status-labels span{margin:0;font-size:10px;color:#edf7ff}

.status-labels:empty{display:none;margin:0}
.battle-scene .combatant.has-status .sprite-window{margin-bottom:calc(128px + var(--status-space,0px))}
@media(max-width:650px){.battle-scene .combatant.has-status .sprite-window{margin-bottom:calc(125px + var(--status-space,0px))}}

#raid-target-hp{position:relative}

/* Draconic costumes: measured opaque bounds on the shared 384px canvas. */
.hero[data-sprite='draconic_archer_female']{--sprite-width:1.634043;--sprite-height:1.634043;--sprite-center:0.814894;--sprite-top:0.531915;--art-aspect:1.119149}
.hero[data-sprite='draconic_archer_male']{--sprite-width:1.310580;--sprite-height:1.310580;--sprite-center:0.653584;--sprite-top:0.228669;--art-aspect:0.979522}
.hero[data-sprite='draconic_mage_female']{--sprite-width:1.641026;--sprite-height:1.641026;--sprite-center:0.820513;--sprite-top:0.538462;--art-aspect:0.863248}
.hero[data-sprite='draconic_mage_male']{--sprite-width:1.254902;--sprite-height:1.254902;--sprite-center:0.625817;--sprite-top:0.176471;--art-aspect:0.774510}
.hero[data-sprite='draconic_warrior_female']{--sprite-width:1.411765;--sprite-height:1.411765;--sprite-center:0.704044;--sprite-top:0.323529;--art-aspect:0.937500}
.hero[data-sprite='draconic_warrior_male']{--sprite-width:1.706667;--sprite-height:1.706667;--sprite-center:0.853333;--sprite-top:0.600000;--art-aspect:1.004444}


/* The atlas uses the same 480x320 coordinate system as its GIF fallback. */
.battle-scene .combatant[data-hero-motion="v2"]{--sprite-width:2.4;--sprite-height:1.6;--sprite-center:1.2;--sprite-top:.5;--art-aspect:1}
.battle-scene .combatant .sprite-window .hero-motion-canvas{position:absolute;max-width:none;object-fit:fill;pointer-events:none;filter:drop-shadow(0 9px 8px #0008);width:calc(var(--visible-size)*var(--sprite-width));height:calc(var(--visible-size)*var(--sprite-height));left:calc(50% - var(--visible-size)*var(--sprite-center));top:calc(220px - var(--visible-size)*(1 + var(--sprite-top)))}
.battle-scene .combatant .sprite-window .hero-motion-canvas[hidden]{display:none}
.battle-scene .hero.is-acting[data-combat-style="caster"] .sprite-window{animation:hero-cast .7s ease-out}
.battle-scene .hero.is-acting[data-combat-style="ranged"] .sprite-window{animation:hero-draw .7s ease-out}
.battle-scene .hero.is-acting[data-combat-style="melee"] .sprite-window{animation:hero-contact .7s linear}
.battle-scene .is-hit .hero-motion-canvas{animation:hit-flash .38s ease-out}
@keyframes hero-contact{0%,100%{transform:translateX(0)}28%{transform:translateX(-4px)}45.714%{transform:translateX(28px)}62%{transform:translateX(22px)}82%{transform:translateX(4px)}}
@keyframes hero-cast{0%,100%{transform:translateY(0)}28%{transform:translateY(-3px)}45.714%{transform:translateY(-1px)}70%{transform:translateY(0)}}
@keyframes hero-draw{0%,100%{transform:translateX(0)}28%{transform:translateX(-4px)}45.714%{transform:translateX(3px)}62%{transform:translateX(-2px)}}
@media(max-width:650px){.battle-scene .combatant .sprite-window .hero-motion-canvas{top:calc(185px - var(--visible-size)*(1 + var(--sprite-top)))}}
.motion-reduced .hero-motion-canvas{animation:none!important}
@media(prefers-reduced-motion:reduce){.hero-motion-canvas{animation:none!important}}

/* Match the existing feminine subclass artwork to the combat ground anchor. */
.hero[data-sprite='paladina']{--sprite-width:2.016807;--sprite-height:1.613445;--sprite-center:0.953782;--sprite-top:0.470588}
.hero[data-sprite='berserk_feminina']{--sprite-width:2.364532;--sprite-height:1.891626;--sprite-center:1.334975;--sprite-top:0.724138}
.hero[data-sprite='espadachim_feminina']{--sprite-width:2.526316;--sprite-height:2.021053;--sprite-center:1.328947;--sprite-top:0.842105}
.hero[data-sprite='necromante_feminina']{--sprite-width:2.025316;--sprite-height:1.620253;--sprite-center:0.985232;--sprite-top:0.476793}
.hero[data-sprite='bruxa']{--sprite-width:2.201835;--sprite-height:1.761468;--sprite-center:1.091743;--sprite-top:0.605505}
.hero[data-sprite='maga_elemental']{--sprite-width:2.285714;--sprite-height:1.828571;--sprite-center:1.138095;--sprite-top:0.666667}
.hero[data-sprite='assassina']{--sprite-width:2.400000;--sprite-height:1.920000;--sprite-center:1.162500;--sprite-top:0.750000}
.hero[data-sprite='cacadora']{--sprite-width:1.846154;--sprite-height:1.476923;--sprite-center:0.992308;--sprite-top:0.346154}
.hero[data-sprite='elfa_negra']{--sprite-width:2.016807;--sprite-height:1.613445;--sprite-center:1.008403;--sprite-top:0.470588}