/* Battle controls and the shared character status area. */
.in-battle{--seal-left:32px;--seal-width:215px}
.in-battle .command-panel{display:contents}
.in-battle .command-panel *{box-sizing:border-box}
.in-battle .hero-actor .actor-statuses,.in-battle .hero-actor .actor-health-row{display:none}
.in-battle .hero-actor{left:3%;width:52%;pointer-events:none}
.in-battle .sanctuary-quote{display:none}
.in-battle .scene-vignette{background:linear-gradient(90deg,#0d0c1880,transparent 36%,transparent 75%,#0b091520),linear-gradient(0deg,#0b091c60,transparent 38%)}

/* Three spell seals linked by a fine constellation. */
.in-battle .command-panel .hero-abilities{position:absolute;left:var(--seal-left);top:calc(var(--hud-h) + 110px);bottom:auto;width:var(--seal-width);display:flex;flex-direction:column;gap:14px;z-index:24;padding:0;transform:none;margin:0}
.in-battle .command-panel .hero-abilities:before{content:'';position:absolute;left:30px;top:-23px;bottom:-18px;width:1px;background:linear-gradient(transparent,#af97ad80 18%,#af97ad55 80%,transparent);pointer-events:none}
.in-battle .command-panel .stage-power{--seal-color:#bc9ad9;position:relative;width:100%;height:101px;min-height:0;margin:0;padding:8px 0 8px 77px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;filter:none;text-align:left;isolation:isolate;transition:color .18s}
.in-battle .command-panel .stage-power:before{content:'';position:absolute;inset:0 -9px 0 -18px;background:radial-gradient(ellipse at 48% 50%,#100d1be0 0%,#100d1ba6 40%,transparent 73%);z-index:-1;pointer-events:none}
.in-battle .command-panel .stage-power:after{content:'';position:absolute;left:79px;right:0;bottom:5px;height:1px;background:linear-gradient(90deg,#b7a1c363,transparent);pointer-events:none}
.in-battle .command-panel .stage-power .ability-orb{position:absolute;left:3px;top:18px;width:55px;height:55px;border:1px solid #ab95b997;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 24%,#524355,#251b32 57%,#100e1a);color:#c2b1cf;box-shadow:0 0 0 4px #15111bd9,0 0 0 5px #94809e5c,inset 0 0 14px #bda1da1c;flex:none}
.in-battle .command-panel .ability-orb:before{content:'';position:absolute;inset:-11px;clip-path:none;border:1px solid #ac98ae7d;border-radius:11%;transform:rotate(45deg);pointer-events:none}
.in-battle .command-panel .ability-orb:after{content:'';position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from -90deg,var(--seal-color) calc(var(--attunement)*1turn),#6e5e7b36 0);mask:radial-gradient(circle,transparent 67%,#000 69%,#000 71%,transparent 73%);pointer-events:none}
.in-battle .command-panel .ability-orb .ui-icon{width:34px;height:34px}
.in-battle .command-panel .ability-orb .power-duration{position:absolute;bottom:-5px;right:-5px;width:22px;height:22px;border:1px solid #e1c6f0;border-radius:50%;background:#251c35;font:13px/20px Georgia;color:#f6e9ff;padding:0;text-align:center}
.power-copy{display:block;min-width:0;width:100%}.power-title{display:flex;flex-direction:column;gap:2px}.power-kind{font:8px/1.2 'Microsoft YaHei',sans-serif;color:#b7a4c3;letter-spacing:3px}
.in-battle .command-panel .stage-power b{display:block;font:16px/1.5 'SimSun',serif;font-weight:400;letter-spacing:2px;color:#e5d9ec;text-shadow:0 1px 3px #08050e}
.power-footer{display:none}.power-effect{display:block;color:#bcacc9;font:9px/1.4 'Microsoft YaHei',sans-serif;white-space:nowrap}.power-cost{display:block;color:#c5b4d6;font:10px/1.7 'Microsoft YaHei',sans-serif;white-space:nowrap;text-shadow:0 1px 3px #08050e}.power-state{display:block;color:#b4a6bf;font:10px/1.7 'Microsoft YaHei',sans-serif;white-space:nowrap;text-shadow:0 1px 3px #08050e}
.in-battle .command-panel .stage-power kbd{display:grid;place-items:center;position:absolute;left:43px;top:3px;right:auto;font:10px Georgia;width:18px;height:18px;border:1px solid #9f87b1a3;transform:none;background:#17101f;border-radius:50%;color:#c4b1d6;padding:0}
.in-battle .command-panel .stage-power.is-ready .ability-orb{border-color:#dac3f3;color:#eddbff;box-shadow:0 0 0 4px #17111dc9,0 0 0 5px #a582c2a6,0 0 25px #b179ec38,inset 0 0 17px #c399e73b;background:radial-gradient(circle at 36% 26%,#70527e,#382446 58%,#191121)}
.in-battle .command-panel .stage-power.is-ready .power-state{color:#e0c2fa}.is-ready .power-state:before{content:'✦';font-size:9px;margin-right:5px}
.in-battle .command-panel .stage-power.skill-domain{--seal-color:#b2c4e2}.in-battle .command-panel .stage-power.skill-bloom{--seal-color:#e3bacd}
.in-battle .command-panel .skill-bloom.is-ready .ability-orb{color:#f4d7e6;border-color:#eccfda;box-shadow:0 0 0 4px #17111de0,0 0 0 5px #c09aa9bd,0 0 26px #d2a2e04a,inset 0 0 16px #dfb5d955}
.in-battle .command-panel .stage-power.is-sustained .ability-orb{border-color:#e5d7f1;color:#f3e2ff;box-shadow:0 0 0 4px #17111dd4,0 0 0 5px #c1a8d3,0 0 24px #b9a0e249}.is-sustained .power-state{color:#e4d1f2}
.in-battle .command-panel .stage-power.is-unavailable .ability-orb{color:#998ca5;background:radial-gradient(#302938,#17121f);filter:none}.in-battle .command-panel .stage-power.is-unavailable b{color:#c4b7cf}
.in-battle .command-panel .stage-power:not(:disabled):hover{transform:none;border:0;box-shadow:none;background:none;filter:none}.in-battle .command-panel .stage-power:not(:disabled):hover .ability-orb{color:#fff;border-color:#f4e5ff;box-shadow:0 0 0 4px #17111dbb,0 0 0 5px #d8b6ed,0 0 30px #c194ed75}.in-battle .command-panel .stage-power:not(:disabled):hover b{color:#fff2ff}
.in-battle .command-panel button:focus-visible{outline:1px solid #e9d3f8;outline-offset:5px}

/* Energy astrolabe alongside the hand. */
.command-resources{position:absolute;left:42px;bottom:148px;width:128px;z-index:25;display:flex;flex-direction:column;align-items:center;gap:25px;color:#ddcbea;pointer-events:auto}
.mana-readout{position:relative;width:94px;height:94px;border:1px solid #dbc4e9;border-radius:50%;background:radial-gradient(circle at 33% 20%,#ad8bcbbc,#5d3e7aed 54%,#221433 90%);box-shadow:inset 0 0 15px #e7ceff47,0 0 0 5px #181222df,0 0 0 6px #b29ab899,0 0 30px #b884db24;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate}
.mana-readout:before{content:'';position:absolute;inset:-19px;border:1px solid #b6a1b5a1;border-radius:16%;transform:rotate(45deg);z-index:-1;pointer-events:none;background:repeating-conic-gradient(from 45deg,#baa0b55c 0 1deg,transparent 1deg 45deg);mask:radial-gradient(circle,transparent 61%,#000 62%)}
.mana-readout:after{content:'';position:absolute;inset:-28px;background:#d2b7c0b3;clip-path:polygon(50% 0,57% 40%,100% 50%,57% 60%,50% 100%,43% 60%,0 50%,43% 40%);mask:radial-gradient(circle,transparent 48%,#000 50%);pointer-events:none;z-index:-1}
.mana-readout>span{order:2;font:9px/1.5 'SimSun',serif;letter-spacing:4px;color:#d2bbdf;margin-top:5px}.mana-readout strong{display:block;order:1;font:39px/1 Georgia;color:#f6eaff;white-space:nowrap;text-shadow:none;font-variant-numeric:tabular-nums}.mana-readout strong small{font:21px Georgia;color:#d0bbdf}.mana-readout.empty{filter:saturate(.3)}
.command-resonance{width:128px;position:relative;padding:0 0 7px;background:radial-gradient(ellipse,#100c1cba,transparent 75%)}
.command-resonance>div:first-child{display:flex;justify-content:space-between;align-items:center;font:10px/1.4 'SimSun',serif;letter-spacing:1px}.command-resonance b{font:14px Georgia;color:#e4cff5;text-shadow:none}.command-resonance small{font:10px Georgia;color:#ad99bc}.command-resonance-track{display:flex;gap:4px;margin:10px 0 7px}.command-resonance-track i{height:5px;width:8px;flex:1;transform:rotate(-25deg);background:#67596e73;border:1px solid #b09bbc30}.command-resonance-track .filled{background:#d3adef;box-shadow:0 0 7px #c98eff66;border-color:#e5c6fd}.command-resonance-track i:nth-child(4),.command-resonance-track i:nth-child(8){margin-right:4px}
.resonance-milestones{display:flex;justify-content:space-between;font:8px/1.5 'Microsoft YaHei',sans-serif;color:#a996b6}.resonance-milestones .reached{color:#e2c6f4}

/* Worn equipment, rather than a panel floating in front of the heroine. */
.hero-insignia{position:absolute;left:300px;top:calc(var(--hud-h) + 24px);bottom:auto;width:330px;z-index:22;display:grid;grid-template-columns:minmax(0,1fr) 107px;gap:2px 10px;padding:0;border:0;background:none;color:#ddcde5;font-family:'Microsoft YaHei',sans-serif;text-shadow:0 1px 3px #0a0613}
.hero-insignia .command-heading{grid-column:1/-1}.hero-insignia .command-equipment{grid-column:1;grid-row:2}.hero-insignia .command-field{grid-column:2;grid-row:2;display:grid;grid-template-columns:20px minmax(0,1fr);align-content:center;column-gap:5px;row-gap:3px}.hero-insignia .command-field>span{grid-column:2}.hero-insignia .command-field strong{grid-column:2;margin:0}.hero-insignia .command-field b{white-space:nowrap}.hero-insignia .command-synergy{grid-column:1;grid-row:3}.hero-insignia .command-passive{grid-column:2;grid-row:3;justify-content:flex-end;align-items:center}.hero-insignia .command-passive span{display:none}.hero-insignia .command-upcoming,.hero-insignia .command-buffs{grid-column:1/-1}
.hero-insignia:before{content:'';position:absolute;inset:-15px -20px;background:radial-gradient(ellipse at 46% 55%,#100c1bda,transparent 73%);z-index:-1;pointer-events:none}
.command-heading{display:flex;justify-content:space-between;align-items:center;height:27px;padding:0;border:0;background:none;font:12px 'SimSun',serif;letter-spacing:2px}
.command-heading>button{display:flex;align-items:center;gap:6px;border:0;background:none;color:#d4c2dd;padding:0;font:inherit;letter-spacing:inherit}.command-heading>button i{font:9px/13px Georgia;color:#b29dbf;text-align:center;border:1px solid #b49bc361;width:14px;border-radius:50%}
.command-shield{display:flex;align-items:center;gap:4px;color:#c3d4e3;font:10px 'Microsoft YaHei',sans-serif;letter-spacing:0}.command-shield .ui-icon{width:15px;height:15px}.command-shield b{font:17px Georgia}
.command-equipment{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:7px 0;margin:0;border:0;border-radius:0;background:none;color:#d9c7e3;text-align:left}
.gear-art{position:relative;flex-shrink:0;width:39px;height:46px;padding:3px;display:grid;place-items:center;border:1px solid #aa93b885;clip-path:polygon(50% 0,100% 18%,100% 82%,50% 100%,0 82%,0 18%);background:linear-gradient(145deg,#514057e6,#18101dec)}
.gear-art img{width:100%;height:100%;object-fit:cover;clip-path:polygon(50% 0,100% 15%,100% 85%,50% 100%,0 85%,0 15%)}.gear-art .ui-icon{width:26px;height:26px;color:#b5a3c0}.equipped .gear-art{background:linear-gradient(145deg,#d8bfe4,#716079 55%,#b39ac8)}
.command-equipment>span:nth-child(2){flex:1;min-width:0}.gear-heading{display:block;color:#b39bc2;font-size:8px;letter-spacing:1px}.gear-heading i{font-style:normal;margin-left:5px;letter-spacing:0}.equipped .gear-heading i{color:#e2bff2}.command-equipment b{display:block;font:14px/1.5 'SimSun',serif;color:#eddef3;letter-spacing:1px;margin:0}.command-equipment small{display:block;color:#c4b3d2;font-size:9px;line-height:1.5}.gear-more{font:19px Georgia;color:#bda4ce}
.command-field{display:flex;align-items:center;gap:6px;width:100%;padding:4px 0;margin:0;border:0;background:linear-gradient(90deg,#19112478,transparent);text-align:left;color:#cbb5de;border-bottom:1px solid #9a80b03b}.command-field>.ui-icon{width:20px;height:20px}.command-field>span{flex:1;min-width:0}.command-field b{font:11px 'SimSun',serif;letter-spacing:1px}.command-field small{display:none}.command-field strong{font-size:10px;font-weight:400}
.in-battle .hero-insignia .weave-status{position:static;inset:auto;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:3px 10px;width:auto;border:0;background:none;padding:5px 0 0;margin:0;color:#c6b1d7;font:10px/1.4 'Microsoft YaHei',sans-serif;text-shadow:0 1px 3px #08050e}.in-battle .hero-insignia .weave-status b{font-size:12px}.in-battle .hero-insignia .weave-status .weave-detail{display:none}
.command-passive{display:flex;justify-content:space-between;gap:6px;width:100%;padding:5px 0 0;border:0;background:none;color:#a992bc;font-size:8px;text-align:left}.command-passive span{color:#bdabcb}.command-buffs{display:flex;gap:6px;flex-wrap:wrap;padding-top:4px}.command-buffs>span{font-size:9px;color:#d6bedf;border-bottom:1px solid #b89ac850}.command-upcoming{font-size:9px;color:#d2bcdf;line-height:1.5;margin-top:4px}

/* Edge menus and bottom controls use the same fine metalwork. */
.in-battle .sanctuary-rail{position:absolute;left:31px;top:calc(var(--hud-h) + 21px);right:auto;bottom:auto;width:217px;display:flex;flex-direction:row;gap:16px;z-index:25}
.in-battle .sanctuary-rail button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;min-width:38px;min-height:47px;border:0;background:none;box-shadow:none;color:#c9bbd0}
.in-battle .sanctuary-rail i{width:24px;height:24px;display:grid;place-items:center}.in-battle .sanctuary-rail i:before{content:'';inset:-3px;border:1px solid #a68faf64;transform:rotate(45deg);background:#16121e65;box-shadow:none;z-index:-1}.in-battle .sanctuary-rail .ui-icon{width:21px;height:21px}.in-battle .sanctuary-rail span{font:9px 'SimSun',serif;letter-spacing:1px;white-space:nowrap}.in-battle .sanctuary-rail button:hover{color:#efdfff}.in-battle .sanctuary-rail button.is-active i:before{border-color:#c7a5db}
.in-battle .hand-center{left:255px;right:185px}.in-battle .fan-hand{--step:min(145px,calc((100vw - 650px)/max(1,var(--cards) - 1)))!important}
.in-battle .energy-panel{left:61px;bottom:-68px;width:70px;height:59px;padding:0}.in-battle .draw-stack{position:static;inset:auto;margin:0;transform:rotate(-8deg)}
.in-battle .battle-dialogue{left:255px;right:250px;bottom:25px;border:0;border-top:1px solid #b8a0b340;border-bottom:1px solid #b8a0b325;background:linear-gradient(90deg,#18121bcc,#1a142170,transparent);box-shadow:none}.in-battle .dialogue-portrait{mask-image:linear-gradient(90deg,#000 55%,transparent)}
.in-battle .right-piles{border:0;background:radial-gradient(ellipse,#1911229c,transparent 75%);box-shadow:none;clip-path:none}.in-battle .right-piles:before,.in-battle .right-piles:after{display:none}
.in-battle .stage-bottom{bottom:calc(var(--tray-h) + var(--dialog-h) - 10px);left:auto;right:30px}.in-battle .turn-forecast{background:linear-gradient(90deg,transparent,#151021a0);border:0}
@media(min-width:701px) and (max-height:800px){
 .in-battle{--seal-left:25px;--seal-width:203px}.in-battle .command-panel .hero-abilities{top:calc(var(--hud-h) + 83px);gap:8px}.in-battle .command-panel .stage-power{height:88px;padding-left:68px}.in-battle .command-panel .stage-power .ability-orb{width:47px;height:47px;top:15px}.in-battle .command-panel .ability-orb .ui-icon{width:30px;height:30px}.in-battle .command-panel .stage-power b{font-size:14px}.in-battle .command-panel .stage-power kbd{left:38px;top:0}.power-cost,.power-state{font-size:9px}.in-battle .command-panel .hero-abilities:before{left:27px}.in-battle .command-panel .stage-power:after{left:69px}
 .in-battle .hero-actor{left:5%;width:49%}.hero-insignia{left:280px;width:320px;top:calc(var(--hud-h) + 18px);bottom:auto}.command-heading{height:22px;font-size:11px}.command-equipment{padding:4px 0}.gear-art{width:30px;height:36px}.command-equipment b{font-size:12px}.command-equipment small{font-size:8px}.command-passive{font-size:8px;padding-top:3px}.command-resources{left:40px;bottom:124px;gap:20px;width:111px}.mana-readout{width:78px;height:78px}.mana-readout strong{font-size:33px}.mana-readout strong small{font-size:19px}.mana-readout:after{inset:-23px}.mana-readout:before{inset:-15px}.command-resonance{width:110px}.in-battle .sanctuary-rail{left:26px;top:calc(var(--hud-h) + 17px);gap:13px}.in-battle .hand-center{left:230px;right:165px}.in-battle .fan-hand{--step:min(132px,calc((100vw - 590px)/max(1,var(--cards) - 1)))!important}.in-battle .battle-dialogue{left:230px;right:215px;bottom:17px}.in-battle .energy-panel{left:52px;bottom:-58px}
}
@media(min-width:701px) and (max-width:1100px){.hero-insignia{left:248px;width:245px;grid-template-columns:minmax(0,1fr) 82px;gap:2px 5px}.command-equipment small{font-size:8px}.command-passive span{max-width:145px;text-align:right}.in-battle .three-enemies .enemy .actor-figure{height:140px}}
@media(min-width:701px) and (max-aspect-ratio:4/5){
 .in-battle .command-panel .hero-abilities{top:auto;bottom:calc(var(--tray-h) + var(--dialog-h) + 205px);left:38px;width:230px;gap:22px}.in-battle .hero-actor{left:-9%;width:80%;height:calc(100% - 150px)}.hero-insignia{left:55px;top:auto;bottom:calc(var(--tray-h) + var(--dialog-h) + 28px);width:340px}.in-battle .command-resources{left:45px;bottom:105px}.in-battle .hand-center{left:225px;right:65px}.in-battle .fan-hand{--step:min(175px,calc((100vw - 480px)/max(1,var(--cards) - 1)))!important}.in-battle .energy-panel{left:48px;bottom:-88px}.in-battle .battle-dialogue{left:23%;right:24%;bottom:22px}
}
@media(max-width:700px){
 .in-battle{--tray-h:250px;--dialog-h:104px;--card-w:145px;--card-h:225px}.in-battle .battle-run{min-height:900px}
 .in-battle .command-panel .hero-abilities{left:12px;right:12px;top:auto;bottom:calc(var(--tray-h) + var(--dialog-h) + 12px);width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.in-battle .command-panel .hero-abilities:before{left:17%;right:17%;top:26px;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,#aa91b480,transparent)}
 .in-battle .command-panel .stage-power{height:120px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:60px 0 0;text-align:center}.in-battle .command-panel .stage-power .ability-orb{width:41px;height:41px;left:calc(50% - 20px);top:8px}.in-battle .command-panel .ability-orb:before{inset:-8px}.in-battle .command-panel .ability-orb .ui-icon{width:27px;height:27px}.in-battle .command-panel .stage-power kbd{display:none}.in-battle .command-panel .stage-power:before{inset:0 -5px -5px;background:radial-gradient(ellipse at 50% 70%,#100b1bf0 15%,#100b1ba6 42%,transparent 76%)}.in-battle .command-panel .stage-power:after{left:17%;right:17%;bottom:-1px}.power-title{display:block}.power-kind,.power-effect{display:none}.in-battle .command-panel .stage-power b{font-size:12px;letter-spacing:1px;line-height:1.7}.power-cost,.power-state{font-size:9px;line-height:1.6}.is-ready .power-state:before{margin-right:3px}
 .hero-insignia{left:14px;width:calc(38% - 18px);top:auto;bottom:calc(var(--tray-h) + var(--dialog-h) + 150px);padding:0;display:block}.hero-insignia .command-field{display:flex;flex-wrap:nowrap}.hero-insignia .command-field strong{margin-left:0}.hero-insignia .command-passive{justify-content:flex-start}.command-heading{height:24px;font-size:10px;letter-spacing:0}.command-heading>button{gap:3px}.command-heading>button i{display:none}.command-shield{font-size:0;gap:3px}.command-shield b{font-size:14px}.command-shield .ui-icon{width:14px;height:14px}.command-equipment{gap:5px;padding:5px 0}.gear-art{width:27px;height:34px}.gear-art .ui-icon{width:20px;height:20px}.command-equipment b{font-size:10px;letter-spacing:0}.gear-heading{font-size:7px;letter-spacing:0}.command-equipment small,.gear-more{display:none}.command-field{gap:3px;padding:3px 0}.command-field b{font-size:9px;letter-spacing:0}.command-field>.ui-icon{width:14px;height:14px}.command-field strong{font-size:8px}.in-battle .hero-insignia .weave-status{font-size:8px;gap:2px 8px;padding-top:3px}.in-battle .hero-insignia .weave-status b{font-size:10px}.command-passive{font-size:8px;padding-top:4px}.command-passive span{display:none}.command-buffs{gap:3px}.command-buffs>span,.command-upcoming{font-size:8px;line-height:1.4}
 .command-resources{left:9px;bottom:calc(var(--dialog-h) + 69px);width:57px;gap:17px}.mana-readout{width:46px;height:46px;box-shadow:0 0 0 3px #191023d9,0 0 0 4px #b29ab88c,inset 0 0 12px #d7b6ed35}.mana-readout:before{inset:-8px}.mana-readout:after{inset:-21px;font-size:87px;line-height:87px}.mana-readout strong{font-size:22px}.mana-readout strong small{font-size:12px}.mana-readout>span{font-size:6px;letter-spacing:1px;margin-top:2px}.command-resonance{width:55px}.command-resonance>div:first-child{display:flex;flex-direction:column;gap:4px;font-size:8px;letter-spacing:0}.command-resonance b{font-size:12px}.command-resonance small{font-size:9px}.command-resonance-track{gap:2px;margin:5px 0}.command-resonance-track i{width:auto;min-width:2px;height:3px;border:0}.command-resonance-track i:nth-child(4),.command-resonance-track i:nth-child(8){margin-right:1px}.resonance-milestones{font-size:6px;gap:2px}.resonance-milestones span{white-space:nowrap}
 .in-battle .sanctuary-rail{left:15px;top:80px;width:133px;gap:6px}.in-battle .sanctuary-rail button{min-width:27px;min-height:31px;gap:0}.in-battle .sanctuary-rail i{width:19px;height:19px}.in-battle .sanctuary-rail .ui-icon{width:18px;height:18px}.in-battle .sanctuary-rail span{display:none}
 .in-battle .hero-actor{left:-4%;width:62%;top:67px;bottom:auto;height:340px}.in-battle .enemy-line,.in-battle .enemy-line.three-enemies{bottom:calc(var(--tray-h) + var(--dialog-h) + 152px);width:58%;right:2%;gap:6px}.in-battle .enemy .actor-figure,.in-battle .enemy.boss .actor-figure,.in-battle .three-enemies .enemy .actor-figure{height:98px}.in-battle .enemy .actor-caption{margin:1px 0}.in-battle .field-title{top:17px;right:10px;max-width:53%}.in-battle .field-title h1{display:none}.in-battle .turn-indicator{left:18px;right:auto;top:64px;font-size:9px}
 .in-battle .stage-bottom{left:80px;right:12px;bottom:calc(var(--tray-h) + var(--dialog-h) - 28px);z-index:20;pointer-events:none}.in-battle .turn-forecast{font-size:8px;padding:3px 0;gap:5px}.in-battle .hand-center{left:71px;right:0;top:8px}.in-battle .fan-hand{height:246px;padding-left:9px}.in-battle .hand-instructions{left:9px;bottom:-5px;font-size:8px}.in-battle .energy-panel{left:18px;bottom:9px;width:42px;height:48px}.in-battle .draw-stack{transform:rotate(-8deg)}.in-battle .draw-stack .deck-back{width:25px;height:32px}.in-battle .draw-stack b{font-size:10px;right:-8px;bottom:5px}.in-battle .draw-stack small{font-size:7px;margin-top:5px}.in-battle .turn-controls{bottom:-48px}.in-battle .right-piles{width:124px}.in-battle .battle-dialogue{left:12px;right:12px;bottom:11px}
}
@media(prefers-reduced-motion:reduce){.command-panel *{animation:none!important;transition:none!important}}

/* Astral metalwork: painted ornaments beneath live, accessible controls. */
.in-battle .mana-readout{border:0;box-shadow:none;background:none;isolation:isolate}
.in-battle .mana-readout:before{inset:-37%;border:0;border-radius:0;transform:none;mask:none;background:url('../assets/ui/astral-orbit.png') center/contain no-repeat;z-index:-1}
.in-battle .mana-readout:after{display:none}
.in-battle .mana-readout strong{color:#fff1ff;text-shadow:0 2px 9px #11071c}
.in-battle .mana-readout>span{color:#e1c7f0;text-shadow:0 1px 4px #000}
.in-battle .command-panel .ability-orb:before{inset:-24%;transform:none;border-radius:0;border:0;box-shadow:none;clip-path:none;background:url('../assets/ui/spell-orbit.png') center/contain no-repeat;mask:none;opacity:.8}
.in-battle .command-panel .ability-orb .ui-icon{filter:drop-shadow(0 0 5px #e2b2ff66)}
.in-battle .command-panel .stage-power.is-ready .ability-orb{background:radial-gradient(circle at 35% 25%,#704b91cc,#352045e6 55%,#110d1c);box-shadow:0 0 0 4px #18101eb0,0 0 0 5px #d1afe09e,0 0 23px #b367ea4a,inset 0 0 15px #b081d750}
.in-battle .command-panel .stage-power.is-unavailable .ability-orb{background:radial-gradient(#302537df,#110e19ef);box-shadow:0 0 0 4px #16101bbb,0 0 0 5px #b29aaf69}
.in-battle .command-panel .stage-power.is-sustained .ability-orb:before{opacity:1;filter:drop-shadow(0 0 6px #cf9ded70)}
.in-battle .command-panel .stage-power.is-unavailable .ability-orb:before{opacity:.5;filter:saturate(.35)}
.in-battle .end-turn{background:none;border:0;box-shadow:none;padding-left:34%;padding-right:12%;gap:0;transition:filter .18s,transform .18s}
.in-battle .end-turn:before{content:'';position:absolute;inset:0;z-index:-1;border:0;background:url('../assets/ui/turn-ornament.png') center 48%/100% 188% no-repeat;clip-path:none;opacity:1;pointer-events:none}
.in-battle .end-turn:after,.in-battle .end-turn>.turn-frame,.in-battle .end-turn>.ui-icon{display:none}
.in-battle .end-turn .end-copy{margin:0;position:relative;white-space:nowrap}
.in-battle .end-turn .end-copy b{font-family:'SimSun',serif;font-weight:400;letter-spacing:3px;color:#f1dfee}
.in-battle .end-turn .end-copy small{color:#c4accd;letter-spacing:2px}
.in-battle .end-turn:hover:not(:disabled){background:none;box-shadow:none;filter:drop-shadow(0 0 9px #c188e973);transform:translateY(-2px)}
.in-battle .end-turn:disabled{filter:saturate(.3);opacity:.65}
.in-battle .enemy .actor-health>span{background:linear-gradient(90deg,#ac3f67,#f08da9);box-shadow:0 0 7px #e787ab38}
.in-battle .enemy .actor-statuses>span{border-radius:0;background:linear-gradient(90deg,#17111cbf,#211627ad);border:0;border-bottom:1px solid #aa89b46e}
.in-battle .enemy.targeted .target-ring{border-width:1px;border-color:#e5c8ff;box-shadow:0 0 15px #d4a3ff55,inset 0 0 18px #c78af322}
.in-battle .fan-hand>.luneth-card{border-color:#6f6077;background:linear-gradient(150deg,#28212f,#100e17 75%)}
.in-battle .fan-hand>.neutral-card{border-color:#e3dce8;background:linear-gradient(150deg,#f0eaf2,#c6bdcf)}
.in-battle .fan-hand .card-cost{border-color:#e8caff;box-shadow:0 0 0 3px #24172fdf,0 0 0 4px #aa89bc8f,inset 0 0 10px #dda9ff29}
.in-battle .fan-hand .card-copy h3{font-family:'SimSun',serif;font-weight:400;letter-spacing:1px;background:linear-gradient(105deg,#92849c,#e5dce9 30%,#ddd3e3 70%,#96889e)}
.in-battle .battle-dialogue:after{border:0}
.in-battle .battle-dialogue{border-top:1px solid #cbb1c965;border-bottom:1px solid #cbb1c933}
.in-battle .hero-insignia{border-top:1px solid #c2a6bd45;padding-top:6px}
.in-battle .hero-insignia:after{content:'✧';position:absolute;top:-9px;left:48%;font:16px Georgia;color:#c3a4c3;pointer-events:none}
.in-battle .gear-art{box-shadow:inset 0 0 8px #c7a1d733}
.in-battle .command-equipment.equipped .gear-art{filter:drop-shadow(0 0 4px #c59ce25e)}

/* Landscape composition mirrors the reference's hero / stage / hand triangle. */
@media(min-width:1101px) and (min-aspect-ratio:5/4){
 .in-battle{--seal-left:35px;--seal-width:248px}
 .in-battle .combat-hud{background:linear-gradient(90deg,#100e17ee,#14111d8c 58%,#14121bc9);border-bottom-color:#b9a5b039;box-shadow:none}
 .in-battle .hud-hero b{letter-spacing:5px;font-family:'SimSun',serif}
 .in-battle .hud-portrait:after{content:'';inset:-12px;border:1px solid #bd9caf99;border-radius:12%;transform:rotate(45deg);background:linear-gradient(90deg,transparent,#c7a5bd,transparent) center/100% 1px no-repeat;mask:radial-gradient(circle,transparent 48%,#000 50%)}
 .in-battle .sanctuary-rail{left:38px;top:calc(var(--hud-h) + 15px);width:236px;gap:20px}
 .in-battle .sanctuary-rail span{font-size:10px}
 .in-battle .sanctuary-quote{display:block;left:42px;top:86px;font:12px/1.8 'SimSun',serif;letter-spacing:1px;color:#c7b8d0}
 .in-battle .sanctuary-quote small{display:none}
 .in-battle .command-panel .hero-abilities{top:calc(var(--hud-h) + 156px);gap:9px}
 .in-battle .command-panel .hero-abilities:before{left:37px;top:-16px;bottom:-20px;background:linear-gradient(transparent,#cab0c273 15%,#cab0c25c 85%,transparent)}
 .in-battle .command-panel .stage-power{height:104px;padding:8px 0 8px 97px}
 .in-battle .command-panel .stage-power:before{inset:0 -3px 0 -20px;height:auto;background:linear-gradient(90deg,#17101bd9, #191020b5 58%,transparent);mask:linear-gradient(0deg,transparent,#000 17%,#000 83%,transparent)}
 .in-battle .command-panel .stage-power:after{left:83px;right:0;bottom:1px;background:linear-gradient(90deg,#cab0c68c,transparent)}
 .in-battle .command-panel .stage-power .ability-orb{width:64px;height:64px;left:5px;top:20px}
 .in-battle .command-panel .ability-orb .ui-icon{width:42px;height:42px}
 .in-battle .command-panel .stage-power b{font-size:18px;letter-spacing:2px;line-height:1.6;padding-left:26px}
 .in-battle .power-title{display:block}.in-battle .power-kind{display:none}
 .in-battle .power-effect{font-size:10px;line-height:1.7;letter-spacing:0}
 .in-battle .power-cost,.in-battle .power-state{font-size:10px;line-height:1.6}
 .in-battle .command-panel .stage-power kbd{left:98px;top:10px;width:20px;height:20px;font-size:13px;background:#17101cb3;border-color:#c6adca9c;color:#e2cee7}
 .in-battle .hero-actor{left:1%;width:54%;height:calc(100% - 94px)}
 .in-battle .hero-insignia{left:315px;top:calc(var(--hud-h) + 22px);width:330px}
 .in-battle .command-heading{font-size:12px}.in-battle .command-equipment b{font-size:14px}
 .in-battle .command-resources{left:54px;bottom:86px;width:132px;gap:45px}
 .in-battle .mana-readout{width:96px;height:96px}
 .in-battle .mana-readout strong{font-size:37px}.in-battle .mana-readout strong small{font-size:27px}
 .in-battle .command-resonance{width:132px}
 .in-battle .energy-panel{left:198px;bottom:-34px}
 .in-battle .enemy-line{right:4%;width:46%;gap:34px;bottom:calc(var(--tray-h) + var(--dialog-h) - 14px)}
 .in-battle .enemy .actor-figure,.in-battle .enemy.boss .actor-figure{height:clamp(165px,23vh,238px)}
 .in-battle .enemy .actor-health-row{width:78%;max-width:200px}
 .in-battle .enemy .actor-health>b{font-size:18px}.in-battle .intent-main{font-size:23px}
 .in-battle .field-title{top:40px;max-width:30%}.in-battle .field-title h1{font-size:14px}
 .in-battle .turn-indicator{top:34px;right:35%}
 .in-battle .hand-center{left:295px;right:260px}
 .in-battle .fan-hand{--step:min(160px,calc((100vw - 660px)/max(1,var(--cards) - 1)))!important}
 .in-battle .turn-controls{width:236px;right:27px;bottom:-32px}
 .in-battle .end-turn{height:83px}.in-battle .end-turn .end-copy b{font-size:19px}
 .in-battle .end-shortcut{margin:5px 0 6px;color:#bba6c7}
 .in-battle .right-piles{width:100%;justify-content:center;gap:34px;margin-top:6px}
 .in-battle .battle-dialogue{left:295px;right:284px;bottom:25px;background:linear-gradient(90deg,#17101edb,#1a122099,transparent)}
 .in-battle .stage-bottom{right:33px;bottom:calc(var(--tray-h) + var(--dialog-h) - 9px)}
 .in-battle .turn-forecast{font-size:10px;gap:10px;text-shadow:0 1px 5px #000}
}
@media(min-width:1101px) and (max-height:860px) and (min-aspect-ratio:5/4){
 .in-battle{--seal-width:228px;--seal-left:26px}
 .in-battle .sanctuary-quote{display:none}
 .in-battle .command-panel .hero-abilities{top:calc(var(--hud-h) + 88px);gap:8px}
 .in-battle .command-panel .stage-power{height:88px;padding-left:85px}
 .in-battle .command-panel .stage-power .ability-orb{width:52px;height:52px;top:17px}
 .in-battle .command-panel .ability-orb .ui-icon{width:35px;height:35px}
 .in-battle .command-panel .stage-power kbd{left:85px;top:6px;width:18px;height:18px;font-size:11px}
 .in-battle .command-panel .stage-power b{font-size:16px;padding-left:24px}
 .in-battle .command-panel .hero-abilities:before{left:31px}
 .in-battle .power-effect,.in-battle .power-cost,.in-battle .power-state{font-size:9px}
 .in-battle .hero-insignia{left:282px;width:290px;top:calc(var(--hud-h) + 18px)}
 .in-battle .hero-actor{left:2%;width:52%;height:calc(100% - 70px)}
 .in-battle .command-resources{left:47px;bottom:85px;width:113px;gap:33px}
 .in-battle .mana-readout{width:72px;height:72px}.in-battle .mana-readout strong{font-size:30px}.in-battle .mana-readout strong small{font-size:22px}
 .in-battle .command-resonance{width:110px}.in-battle .energy-panel{left:171px;bottom:-23px}
 .in-battle .enemy .actor-figure,.in-battle .enemy.boss .actor-figure{height:155px}
 .in-battle .enemy-line{bottom:calc(var(--tray-h) + var(--dialog-h) - 37px)}
 .in-battle .hand-center{left:258px;right:219px}.in-battle .fan-hand{--step:min(142px,calc((100vw - 596px)/max(1,var(--cards) - 1)))!important}
 .in-battle .turn-controls{width:201px;right:20px;bottom:-36px}.in-battle .end-turn{height:70px}.in-battle .end-turn .end-copy b{font-size:16px;letter-spacing:2px}
 .in-battle .battle-dialogue{left:258px;right:239px;bottom:18px}
}
@media(min-width:701px) and (max-aspect-ratio:4/5){
 .in-battle .command-resources{bottom:122px;gap:43px}
 .in-battle .command-panel .stage-power{padding-left:84px}
 .in-battle .command-panel .stage-power .ability-orb{width:59px;height:59px}
 .in-battle .end-turn .end-copy b{font-size:17px;letter-spacing:2px}
}
@media(max-width:700px){
 .in-battle .mana-readout:before{inset:-29%}
 .in-battle .command-resources{gap:23px}
 .in-battle .command-panel .ability-orb:before{inset:-24%}
 .in-battle .hero-insignia{padding-top:4px}
 .in-battle .end-turn{width:126px;height:44px;padding-left:36%;padding-right:9%}
 .in-battle .end-turn .end-copy b{font-size:11px;letter-spacing:1px}
 .in-battle .end-turn .end-copy small{font-size:5px;letter-spacing:1px}
}

/* A dedicated status column aligns with turn controls, clear of the portrait and targets. */
#app .hero-insignia{left:auto;right:20px;top:calc(var(--hud-h) + 18px);bottom:auto;width:clamp(224px,18vw,360px);display:grid;grid-template-columns:1fr;gap:6px;padding:8px;border:1px solid #b8a7bc66;background:linear-gradient(115deg,#11121bef,#191722eb);box-shadow:0 6px 22px #05040b50,inset 0 0 0 3px #b5a5bd0c;text-shadow:0 1px 2px #000;isolation:isolate}
#app .hero-insignia:before{inset:-3px;background:linear-gradient(#d9c7de,#d9c7de) left top/16px 1px no-repeat,linear-gradient(#d9c7de,#d9c7de) left top/1px 16px no-repeat,linear-gradient(#d9c7de,#d9c7de) right bottom/16px 1px no-repeat,linear-gradient(#d9c7de,#d9c7de) right bottom/1px 16px no-repeat;border:0;z-index:-1}
#app .hero-insignia:after{content:'';left:12px;right:12px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#e0d1e5,transparent)}
#app .hero-insignia .command-heading{grid-column:1/-1;height:24px;letter-spacing:1px;font-size:12px}
#app .command-heading>button{font-size:12px;min-height:24px;color:#eee5f1;gap:8px}
#app .command-heading>button i{display:inline-block;color:#d8c9e2}
#app .command-shield{display:flex;align-items:center;gap:4px;font-size:12px;color:#d8e5ef;letter-spacing:0}
#app .command-shield .ui-icon{width:22px;height:22px}#app .command-shield b{font-size:18px;color:#f0f7ff}
#app .hero-insignia :is(.command-equipment,.command-passive){grid-row:auto;display:grid;grid-template-columns:38px minmax(0,1fr);align-content:start;align-items:center;gap:2px 8px;width:100%;min-width:0;min-height:0;margin:0;padding:7px 9px;border:1px solid #aa9aae5c;border-radius:2px;background:linear-gradient(130deg,#30293785,#15141ecc);box-shadow:none;text-align:left;color:#f0e7f3;font-family:'Microsoft YaHei',sans-serif;position:relative}
#app .hero-insignia .command-equipment{grid-column:1}
#app .hero-insignia .command-passive{grid-column:1}
#app .hero-insignia :is(.command-equipment,.command-passive):hover{border-color:#dfc9eb;background:linear-gradient(130deg,#3a3047cc,#1e1928);transform:none}
#app .hero-insignia :is(.gear-art,.passive-art){display:grid;place-items:center;width:38px;height:40px;padding:0;margin:0;border:0;background:none;clip-path:none;box-shadow:none;flex:none;min-width:0}
#app .hero-insignia :is(.gear-art,.passive-art) .ui-icon{width:36px;height:38px;opacity:1}
#app .hero-insignia .gear-art>img{width:100%;height:40px;min-width:0;object-fit:cover;object-position:center 25%;border:1px solid #c5b1cc85;border-radius:2px;clip-path:none}
#app .hero-insignia :is(.gear-copy,.passive-copy){display:block;min-width:0}
#app .hero-insignia :is(.gear-heading,.passive-copy small){display:block;font-size:10px;line-height:1.5;color:#c9b9d2;letter-spacing:1px}
#app .hero-insignia .gear-heading i{font-size:9px;color:#c9b9d2;font-style:normal;margin-left:4px}
#app .hero-insignia :is(.gear-copy b,.passive-copy b){display:block;font:15px/1.5 'SimSun',serif;color:#f7edf9;letter-spacing:.5px;margin:1px 0 0;overflow-wrap:anywhere}
#app .hero-insignia :is(.gear-effect,.passive-effect){display:block;grid-column:1/-1;font-size:11px;line-height:1.7;color:#ddd2e5;letter-spacing:0;padding:0;white-space:normal;overflow-wrap:anywhere}
#app .hero-insignia .gear-more{position:absolute;right:5px;top:28px;font-size:15px;color:#cfbed7}
#app .hero-insignia .passive-effect strong{font-weight:500;color:#ead2ff}
#app .hero-insignia .passive-state{display:block;grid-column:1/-1;font-size:10px;color:#e1c7f5;line-height:1.6;border-top:1px solid #b49ac445;padding-top:3px}
#app .hero-insignia .passive-state:before{content:'';display:inline-block;width:5px;height:5px;margin-right:5px;background:#d6b0f1;border-radius:50%;box-shadow:0 0 6px #c291e58f;vertical-align:1px}
#app .hero-insignia .is-triggered{background:linear-gradient(130deg,#24262fbb,#15141ecc)}
#app .hero-insignia .is-triggered .passive-state{color:#bfcad4}
#app .hero-insignia .is-triggered .passive-state:before{background:#97a4af;box-shadow:none}
#app .hero-insignia .passive-copy small{display:none}
#app .hero-insignia .passive-art{height:28px}#app .hero-insignia .passive-art .ui-icon{height:28px;width:28px}
#app .hero-insignia .command-field{grid-column:1/-1;grid-row:auto;display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid #a7b8ce4d;background:#20273599;color:#e2e9f5}
#app .hero-insignia .command-field b{font-size:12px;white-space:normal}#app .hero-insignia .command-field small{display:none}#app .hero-insignia .command-field strong{font-size:11px;white-space:nowrap;margin-left:auto}
#app .hero-insignia .command-synergy{grid-column:1/-1;grid-row:auto;border-top:1px solid #ad98bd3d}
#app .hero-insignia .weave-status{font-size:11px;gap:4px 14px;color:#d9c8e3;padding-top:6px}
#app .hero-insignia .weave-status b{font-size:13px}
#app .hero-insignia .command-buffs{padding:0;gap:4px 8px}
#app .hero-insignia .command-buffs>span,#app .hero-insignia .command-upcoming{font-size:11px;color:#e0cce7;line-height:1.6;margin:0}
@media(min-width:701px) and (max-width:1100px){
 #app .hero-insignia{right:16px;left:auto;width:224px;padding:7px;gap:5px}
 #app .hero-insignia :is(.command-equipment,.command-passive){padding:7px;grid-template-columns:30px minmax(0,1fr);gap:4px 6px}
 #app .hero-insignia :is(.gear-art,.passive-art){width:30px}
 #app .hero-insignia :is(.gear-copy b,.passive-copy b){font-size:13px}
}
@media(min-width:701px){
 .in-battle #app .enemy-line{left:max(290px,40%);right:calc(clamp(224px,18vw,360px) + 40px);width:auto;gap:18px}
 .in-battle #app .hand-center{right:calc(clamp(224px,18vw,360px) + 40px)}
 .in-battle #app .field-title{left:calc(var(--seal-left) + var(--seal-width) + 26px);right:auto;top:20px;max-width:25%}
 .in-battle #app .turn-indicator{left:calc(var(--seal-left) + var(--seal-width) + 26px);right:auto;top:85px}
}
@media(min-width:701px) and (max-aspect-ratio:4/5){
 .in-battle #app .command-panel .hero-abilities{top:calc(var(--hud-h) + 150px);bottom:auto;gap:16px}
}
@media(min-width:1600px) and (min-height:801px){
 #app .hero-insignia{padding:12px;gap:8px}
 #app .hero-insignia :is(.command-equipment,.command-passive){padding:11px 12px;gap:5px 10px}
 #app .hero-insignia :is(.gear-copy b,.passive-copy b){font-size:18px}
 #app .hero-insignia :is(.gear-effect,.passive-effect){font-size:13px}
 #app .hero-insignia :is(.gear-heading,.passive-state){font-size:12px}
 #app .hero-insignia .weave-status,#app .hero-insignia .command-field b{font-size:13px}
 #app .hero-insignia .command-buffs>span,#app .hero-insignia .command-upcoming{font-size:12px}
}
@media(min-width:701px) and (max-height:800px){
 #app .hero-insignia{gap:4px;padding:6px}
 #app .hero-insignia .command-heading{height:22px}
 #app .hero-insignia .command-passive{grid-template-columns:28px minmax(0,1fr);column-gap:6px}
 #app .hero-insignia .command-passive .passive-copy{padding-right:58px}
 #app .hero-insignia .command-passive .passive-copy b{font-size:13px;white-space:nowrap}
 #app .hero-insignia .passive-state{position:absolute;right:7px;top:14px;border:0;padding:0;font-size:9px}
 #app .hero-insignia .passive-state:before{display:none}
 #app .hero-insignia .command-buffs{gap:2px 6px}
 #app .hero-insignia .command-buffs>span,#app .hero-insignia .command-upcoming{font-size:10px;line-height:1.5}
}
@media(max-width:700px){
 .in-battle #app .battle-run{height:auto;min-height:1040px;padding-top:440px;padding-bottom:510px}
 #app .hero-insignia{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin:0 12px;padding:8px;gap:6px;grid-template-columns:1fr 1fr}
 #app .hero-insignia .command-passive{grid-column:2;grid-row:2}#app .hero-insignia .command-equipment{grid-row:2}
 #app .hero-insignia :is(.command-equipment,.command-passive){min-height:116px;padding:8px;gap:4px 6px;grid-template-columns:30px minmax(0,1fr)}
 #app .hero-insignia :is(.gear-art,.passive-art){width:30px}
 #app .hero-insignia :is(.gear-copy b,.passive-copy b){font-size:14px}
 #app .hero-insignia .gear-more{display:none}
 .in-battle #app .enemy-line,.in-battle #app .enemy-line.three-enemies{top:95px;bottom:auto}
}

/* Full-body battle artwork: remove the old wide portrait's negative crop offsets. */
.in-battle .hero-actor{left:calc(clamp(145px,15vw,270px) - 32px);width:auto;aspect-ratio:2/3}
.in-battle .hero-actor .hero-sprite{left:0;width:100%;height:100%;object-position:center bottom;mask-image:linear-gradient(#000 88%,transparent 100%)}
@media(min-width:701px) and (max-aspect-ratio:4/5){
 .in-battle .hero-actor{left:calc(8% - 16px);height:calc(100% - 180px);max-width:75%}
}
@media(max-width:700px){
 .in-battle .hero-actor{left:-12px;width:auto;height:340px;max-width:62%;aspect-ratio:2/3}
 .in-battle .hero-actor .hero-sprite{left:0;object-position:left top}
}