/* Portrait battle cards. Native event IDs, placement and rewards remain authoritative. */
.battle-name{display:none}
.bunit.masked::after{content:"";background:#1c2a3d url("illustrated/card-back.webp") center/cover no-repeat}
.combat-side.enemy{display:contents}
.combat-tools{display:flex;align-items:center;justify-content:center;gap:8px}
/* Keep mobile results inside the battle, leaving the section menu accessible. */
body:not(.pc) #battle{position:relative}
/* Keep the shared desktop navigation in its normal grid column, including replays. */
.phone.inbattle .nav{display:grid!important}
body.pc .phone.inbattle .nav{display:flex!important}
body.pc .phone.inbattle>.nav button:disabled{opacity:.55;cursor:default}
body.pc #battle{padding:12px 24px;overflow-y:auto;background:linear-gradient(#101c30b8,#14213175 45%,#0c182ac7),url('battle-arena.webp') center/cover no-repeat}
body.pc #battle.active{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:62px minmax(0,1fr) 36px minmax(0,1fr) 62px;gap:6px}
body.pc #battle>.flexsp{display:none}
body.pc #battle>.combat-side{grid-column:1;width:min(1040px,100%);margin:0 auto;min-width:0;display:grid;grid-template-columns:minmax(180px,240px) minmax(140px,1fr) 148px;align-items:center;gap:18px;padding:3px 8px;border-block:1px solid #b8a37744;background:linear-gradient(90deg,#13212e00,#142230b3,#13212e00)}
body.pc #battle>.combat-side.enemy{grid-row:1}
body.pc #battle>.combat-side.player{grid-row:5}
body.pc #battle .head,body.pc #battle .pfoot>.head.player{width:100%;min-width:0;display:flex;flex-direction:row;align-items:center;gap:10px;padding:0;margin:0;text-align:left}
body.pc #battle .head .bigav{width:52px;height:52px;border:1px solid #b89d6888;border-radius:5px;background:#142537;box-shadow:0 3px 8px #0005}
body.pc #battle .head .nick{min-width:0;font:600 15px/1.35 var(--font-ui);color:#ede4cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc #battle .head .nick small{font-size:15px;color:#bbc9d3}
body.pc #battle .pfoot-sp{display:none}
body.pc #battle .combat-tools{justify-content:flex-end}
body.pc #battle .bctrl{position:static;padding:0;background:none;min-width:0;width:100%;justify-content:flex-end}
body.pc #battle .bctrl .bbtn{width:100%;padding:8px;gap:5px;font-size:15px}
body.pc #battle .hprow{width:100%;min-width:0;padding:0;gap:7px}
body.pc #battle .hprow .heart{font-size:0;width:18px;height:18px;flex:0 0 18px;background:url('illustrated/health.webp') center/contain no-repeat}
body.pc #battle .hpbig{height:20px;border-radius:3px;border-color:#9a937355;background:#091521;box-shadow:inset 0 1px 3px #0009}
body.pc #battle .hpbig b{font-size:15px;letter-spacing:.02em}
body.pc #battle .hprow.enemy .hpbig i{background:linear-gradient(#b56f74,#794450)}
body.pc #battle .hprow.player .hpbig i{background:linear-gradient(#81b6a0,#3b7268)}
body.pc #battle>#rowE{grid-column:1;grid-row:2}
body.pc #battle>#rowP{grid-column:1;grid-row:4}
body.pc #battle>.arena{grid-column:1;grid-row:3;min-width:0;min-height:0;position:relative}
/* Same two-axis fitting rule as the approved 5:7 hand. Spare width never stretches a card. */
body.pc #battle .brow{--combat-gap:clamp(14px,1.55vw,28px);container-type:size;width:100%;max-width:none;margin:0;display:flex;justify-content:center;align-items:center;gap:var(--combat-gap);padding:5px 12px;min-height:0;min-width:0}
body.pc #battle .bunit{flex:none;box-sizing:border-box;width:min(calc((100cqw - 4*var(--combat-gap))/5),calc(100cqh*5/7));height:auto;aspect-ratio:5/7;display:flex;flex-direction:column;justify-content:flex-start;min-height:0;gap:0;padding:11px;border:0;border-radius:5px;background:linear-gradient(#263648,#0f1b29);box-shadow:0 6px 15px #0009;container-type:inline-size}
body.pc #battle .bunit .shell-frame{border-width:var(--frame-w)}
body.pc #battle .bunit .art{flex:1;min-height:0;width:100%;aspect-ratio:auto;border:0;border-radius:0;overflow:visible}
body.pc #battle .bunit .art::before{border:0}
body.pc #battle .bunit .artclip{inset:0;border-radius:0}
body.pc #battle .bunit .artimg{filter:saturate(.97) brightness(1.02)}
body.pc #battle .battle-name{display:flex;align-items:center;justify-content:center;flex:none;height:30px;padding:2px 3px;text-align:center;overflow:hidden;font:500 clamp(10px,7.4cqw,14px)/1.2 var(--font-display);color:#f3e9d1;background:linear-gradient(#28384bea,#101c2cf7);border-top:1px solid #c5bda36b;white-space:normal}
body.pc #battle .bunit .hpbar{flex:none;height:4px;border:0;border-radius:0;background:#08121e}
body.pc #battle .bunit .hpbar i{background:linear-gradient(#a0cfac,#578d74)}
body.pc #battle .bunit.foe .hpbar i{background:linear-gradient(#d69b9e,#a3626e)}
body.pc #battle .bstats{position:static;display:flex;align-items:center;justify-content:space-between;flex:none;height:28px;min-height:0;padding:4px 5px;gap:5px;font:650 clamp(10px,8.6cqw,17px)/1 var(--font-ui);background:linear-gradient(#0c1725,#1b2a3a)}
body.pc #battle .bstats .a,body.pc #battle .bstats .h{color:#f0eee5;gap:clamp(2px,2cqw,5px)}
body.pc #battle .bstats .mini-ic{width:1.15em;height:1.15em;object-fit:contain}
body.pc #battle .bstats .lvchip,body.pc #battle .bstats .ab{position:absolute;bottom:76px;z-index:5;min-height:23px;max-width:46%;padding:3px 5px;gap:3px;border:1px solid #b6bda24d;border-radius:3px;background:#0b1625db;font:600 11px/1 var(--font-ui);color:#dfcea4}
body.pc #battle .bstats .lvchip{left:15px}
body.pc #battle .bstats .ab{right:15px;color:#e3e9ec}
body.pc #battle .bstats .ab:empty{display:none}
body.pc #battle .bstats .lvs{width:13px;height:13px;font-size:0;background:url('illustrated/level.webp') center/contain no-repeat}
body.pc #battle .bstats .ab .mini-ic{width:16px;height:16px}
/* Corner ornaments share the accepted crest/drop size relationship and numeric anchor. */
body.pc #battle .shell-badge,body.pc #battle .shell-mana{width:clamp(30px,25cqw,47px);height:clamp(30px,25cqw,47px);top:-7px;font-size:clamp(15px,12cqw,22px)}
body.pc #battle .shell-badge{left:-11px}
body.pc #battle .shell-mana{right:-11px}
body.pc #battle .bunit.acting{box-shadow:0 0 0 2px #dcc38f,0 0 22px #d6b66755}
body.pc #battle .bunit.selp{outline:2px solid #a5ded1;outline-offset:3px}
body.pc #battle .bunit.masked::after{content:'';inset:5px;border-radius:2px;background:#1c2a3d url('illustrated/card-back.webp') center/cover no-repeat}
body.pc #battle .round{font:600 15px/1 var(--font-ui);letter-spacing:.14em;padding:8px 14px;color:#d5dccc;background:#152535bb;border:1px solid #b6aa8355;border-radius:2px}
body.pc #battle .bbtn{min-height:40px;padding:8px 16px;border-radius:3px;border-color:transparent;border-image:var(--shell-trim-active) 24 / 11px stretch;background:linear-gradient(#3a6865,#1b3d43);box-shadow:0 3px 5px #0006}
body.pc #battle .bbtn.ghost{border-image-source:var(--shell-trim);background:linear-gradient(#344459,#1a2a3d)}
body.pc #battle .bbtn.speed{min-width:74px;min-height:36px;padding:7px 8px;color:#e0cda6;font-size:15px}
body.pc #battle .result{background:#081526de;backdrop-filter:blur(7px)}
@media(min-width:1000px) and (max-width:1199px){
 body.pc #battle{padding:10px 14px}
 body.pc #battle>.combat-side{grid-template-columns:minmax(140px,180px) minmax(110px,1fr) 132px;gap:12px}
 body.pc #battle .head .bigav{width:46px;height:46px}
 body.pc #battle .head .nick{font-size:15px}
 body.pc #battle .brow{--combat-gap:16px;padding-inline:8px}
 body.pc #battle .bstats .lvchip,body.pc #battle .bstats .ab{padding:2px 3px;left:13px;font-size:10px}
 body.pc #battle .bstats .ab{left:auto;right:13px}
}
@media(min-width:1000px) and (max-height:680px){
 body.pc #battle{padding:8px 14px}
 body.pc #battle.active{grid-template-rows:50px minmax(0,1fr) 30px minmax(0,1fr) 50px}
 body.pc #battle>.combat-side{padding:2px 6px;gap:10px}
 body.pc #battle .head .bigav{width:42px;height:42px}
 body.pc #battle .bctrl .bbtn{min-height:34px;padding:6px 8px}
 body.pc #battle .head,body.pc #battle .pfoot>.head.player{gap:5px}
 body.pc #battle .head .nick{font-size:15px}
 body.pc #battle .battle-name{height:24px;font-size:10px}
 body.pc #battle .bstats{height:22px;padding:3px 1px;gap:3px}
 body.pc #battle .bstats .a .mini-ic,body.pc #battle .bstats .h .mini-ic{width:12px;height:12px}
 body.pc #battle .bstats .lvchip,body.pc #battle .bstats .ab{bottom:64px;min-height:17px;padding:2px 3px;font-size:9px}
 body.pc #battle .bstats .lvchip{left:13px}
 body.pc #battle .bstats .ab{right:13px}
 body.pc #battle .bstats .ab .mini-ic{width:12px;height:12px}
}
@media(max-width:999px){
 #battle>.combat-side.enemy{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 12px}
 #battle>.combat-side.enemy .head{flex:1;min-width:0;padding:0;order:1}
 #battle>.combat-side.enemy .combat-tools{order:2}
 #battle>.combat-side.enemy .hprow{order:3;width:100%;padding:4px 0 0}
 #battle .head .bigav,#battle .pfoot .bigav{width:46px;height:46px}
 #battle .head.enemy .nick{font-size:15px}
 #battle .bbtn.speed{padding:8px;min-width:62px}
}
@media(prefers-reduced-motion:reduce){body.pc #battle .bunit{transition:none}}