/* Battle proportions measured from boy.jpg: 1000 × 500 stage. */
#battle{display:block;inset:0;padding:0;border:0;overflow:hidden;background:#020711}
#app nav button:disabled{opacity:.4;cursor:default;box-shadow:none}
#battleBackdrop{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
#battle .battleFrame{position:absolute;top:0;left:50%;width:1000px;height:500px;transform:translateX(-50%) scale(var(--battle-scale,1));transform-origin:top center}
#battle .battleTop{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:265px 58px 112px 112px 145px 1fr 126px;align-items:center;gap:4px;width:1000px;height:32px;min-height:0;margin:0;padding:4px 8px 4px 16px;background:linear-gradient(#51617c 0 2px,#34445e 3px,#35445e 27px,#152236 28px);border:1px solid #6f7d94;border-radius:0;box-shadow:inset 5px 0 #61718b,inset -5px 0 #61718b;font:9px Tahoma,Arial,sans-serif;color:#cad9ec}
#battle .battleTop label{display:flex;align-items:center;justify-content:space-between;gap:3px;white-space:nowrap;font:bold 9px Tahoma,Arial,sans-serif;letter-spacing:.4px}
#battleModeLabel{height:22px;padding:4px 6px;border:1px solid #192539;box-shadow:inset 0 0 0 1px #62748e;background:#28374e;font:bold 10px Tahoma,Arial,sans-serif;letter-spacing:1px;overflow:hidden;white-space:nowrap}
#battle .battleTop label>b,#battle .battleTop label>strong{display:inline-block;flex:none;min-width:37px;height:21px;padding:3px 4px;background:#1b293c;border:1px solid #0a1623;box-shadow:inset 0 0 0 1px #647188;color:#adf5e5;text-align:center;font:10px Consolas,monospace;letter-spacing:0}
#battle .battleTop #ap{min-width:30px;color:#d6edff}
#battle .battleClock{display:flex;align-items:center;justify-content:space-between;gap:5px}
#battle .battleClock #turnTimer{min-width:41px}
#battle .battleTop button{height:23px;padding:1px 7px;border:1px solid #101b2c;border-radius:0;background:linear-gradient(#697c99,#344660);box-shadow:inset 0 0 0 1px #8190a5;color:#e0efff;font:bold 9px Tahoma,Arial,sans-serif;white-space:nowrap}
#battle #refreshBattle{padding:0;width:25px;font:19px Arial,sans-serif;line-height:20px}
#battle #leaveBattle{align-self:center;margin:0;width:126px;letter-spacing:.5px}
#battle .battleActionStrip{position:absolute;top:34px;left:290px;display:flex;gap:2px;align-items:center;width:286px;height:22px;padding:2px 6px;border:1px solid #7a8da5;outline:1px solid #0b182a;outline-offset:-3px;background:#17253b}
#battle #bonuses{display:flex;gap:2px;order:0;width:auto}
#battle .battleActionStrip button,#battle .battleEmptySlot{display:block;position:static;width:33px;min-width:0;height:16px;margin:0;padding:0;flex:none;border:1px solid #7b8ca5;border-radius:0;background:linear-gradient(#344967,#233550);box-shadow:none;color:#cbe7f9;font:10px Tahoma,Arial,sans-serif;line-height:13px}
#battle .battleActionStrip button.active{color:#9cffde;border-color:#c0f8e5;background:#2c5e66}
#battle #endTurn{width:39px;font-size:8px}
#battle #battleNotice{position:absolute;top:57px;left:150px;right:150px;margin:0;min-height:0;padding:2px 5px;color:#b9d2de;text-align:center;font:9px Tahoma,Arial,sans-serif;pointer-events:none;text-shadow:0 1px 3px #000}
#battle #battleNotice:empty,#battle #battleAmmo{display:none!important}
#battle .battleBodyV4{position:absolute;top:72px;left:0;display:block;width:1000px;height:416px;min-height:0;margin:0;padding:0;overflow:visible}
#battle .battleBodyV4>aside{position:absolute;top:0;display:block!important;width:118px;height:416px;min-width:0;padding:0;border:0;background:none;overflow:visible;z-index:3}
#battle .battleRosterSide.side1{left:0}#battle .battleRosterSide.side2{right:0}
#battleSide1,#battleSide2{display:grid;grid-template-columns:118px;grid-auto-rows:66px;gap:6px;position:relative;overflow:visible}
#battle .combatant{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:44px 14px;gap:1px 4px;width:118px;height:66px;min-height:0;margin:0;padding:3px;border:1px solid #59667d;border-radius:0;box-shadow:inset 0 0 0 1px #08101c,0 0 0 1px #0c1220;background:linear-gradient(110deg,#06101ad4,#18243470);color:#a8d5ea;text-align:left;overflow:hidden}
#battle .combatant:disabled{opacity:1}
#battle .combatant .pilotAvatar{display:grid;grid-column:1;grid-row:1;width:44px;height:44px;margin:0;border:1px solid #758496;border-radius:0;box-shadow:inset 0 0 0 1px #06121e;background-size:200% 200%}
#battle .combatantStats{display:grid;grid-column:2;grid-row:1;grid-template-rows:23px 7px 7px;gap:2px;min-width:0}
#battle .combatantCardTop{display:flex;gap:3px;align-items:start;height:23px}
#battle .combatantLevel,#battle .combatantClan{display:block;width:30px;height:22px;margin:0;border:1px solid #607188;box-shadow:inset 0 0 0 1px #09111d;background:#132135b0;color:#9bffe0;text-align:center;font:11px Tahoma,Arial,sans-serif;line-height:19px}
#battle .combatantClan{font-size:17px;line-height:18px;color:#e9e0b7}
#battle .combatMeter{display:grid;grid-template-columns:9px 1fr;gap:1px;align-items:center;height:7px;margin:0;padding:0;border:0;background:none;overflow:visible}
#battle .combatMeter small{display:block;position:static;font:7px Tahoma,Arial,sans-serif;line-height:7px;color:#8b9fae;text-align:left;text-shadow:none}
#battle .combatMeter i{height:6px;display:block;border:1px solid #acb9bb;background:#050c13;padding:1px;box-shadow:0 0 0 1px #060b15}
#battle .combatMeter i>span{display:block;height:2px;background:#8be5c2}
#battle .combatMeter.shield i>span{background:#dddca0}
#battle .combatant>strong{grid-column:1/-1;grid-row:2;display:block;align-self:center;min-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:bold 10px Tahoma,Arial,sans-serif;letter-spacing:0;color:#a3dbef;text-shadow:0 1px 1px #000}
#battle .combatant.destroyed{background:linear-gradient(110deg,#bb161e9e,#280613ad);border-color:#8a3e48}
#battle .combatant.destroyed .pilotAvatar{filter:sepia(1) saturate(3) hue-rotate(315deg);opacity:.55}
#battle .combatant.destroyed strong{color:#cd7680}
#battle .combatant.ownShip{border-color:#ffdc72;box-shadow:inset 3px 0 #ffdc72,0 0 5px #ffdc7255}
#battle .combatant.ownShip>strong{color:#ffdc72}
#battle .combatant.shipHovered{border-color:#b0f7ff;background:linear-gradient(110deg,#16495f,#21394b);box-shadow:inset 0 0 10px #a3f6ff55,0 0 12px #a3f6ffbb}
#battle .combatant.shipHovered>strong{color:#e4fcff}
/* Five cards along each edge, then three below, without a gap or map overlap. */
#battleSide1 .combatant:nth-child(n+6),#battleSide2 .combatant:nth-child(n+6){position:absolute;top:360px;width:118px}
#battleSide1 .combatant:nth-child(6){left:0}#battleSide2 .combatant:nth-child(6){right:0}
#battleSide1 .combatant:nth-child(7){left:122px}#battleSide2 .combatant:nth-child(7){right:122px}
#battleSide1 .combatant:nth-child(8){left:244px}#battleSide2 .combatant:nth-child(8){right:244px}
#battle .combatant.destroyed.ownShip{border-color:#8a3e48;box-shadow:inset 3px 0 #b44450}
#battle .combatant.destroyed.ownShip>strong{color:#cd7680}
#battle .battleCanvasWrap{position:absolute;top:0;left:142px;width:716px;height:346px;min-height:0;border:0;background:none;overflow:visible;z-index:1}
#battle .battleCanvasWrap #battleCanvas{display:block;width:716px;height:346px;min-height:0;border:0;background:none;touch-action:manipulation}
#battle #weaponPopup{z-index:9;display:grid;grid-template-columns:minmax(0,1fr) 36px;grid-template-rows:18px minmax(0,1fr);gap:3px 5px;width:306px;min-height:138px;max-height:calc(100% - 8px);padding:5px;border:2px solid #aac6eb;border-radius:2px 12px 12px 2px;background:linear-gradient(120deg,#536f9bea,#3d5985f5);box-shadow:inset 0 0 0 1px #263e65,0 3px 12px #0009;overflow:hidden;color:#e0edff;font:10px Tahoma,Arial,sans-serif}
#battle .battleCellHead{display:flex;justify-content:space-between;align-items:center;padding:0 3px;color:#d0e3ff;font:bold 9px Tahoma,Arial,sans-serif;letter-spacing:.5px}
#battle .battleCellWeapons{grid-column:1;grid-row:2;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a4c2e6 #334f78}
#battle #weaponPopup .battleWeaponRow{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:5px;width:100%;min-height:42px;margin:0 0 3px;padding:2px;border:1px solid #95b3d9;border-radius:0;background:linear-gradient(105deg,#324c75,#5677a2);box-shadow:inset 0 0 0 1px #263f63;color:#edf6ff;text-align:left;line-height:1.15}
#battle #weaponPopup .battleWeaponRow:last-child{margin-bottom:0}
#battle #weaponPopup .battleWeaponRow:hover:not(:disabled){border-color:#d5eeff;background:linear-gradient(105deg,#47699a,#688cb6);box-shadow:inset 0 0 7px #b8e6ff66}
#battle #weaponPopup .battleWeaponRow:disabled{opacity:.5;cursor:default;box-shadow:inset 0 0 0 1px #263f63}
#battle .battleWeaponIcon{display:block;width:42px;height:38px;object-fit:contain;background:#263c5b88;border-right:1px solid #95b3d955}
#battle .battleWeaponDetails{display:grid;gap:2px;min-width:0}
#battle .battleWeaponName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:bold 9px Tahoma,Arial,sans-serif}
#battle .battleWeaponNumbers{display:flex;justify-content:space-between;gap:3px;font:9px Tahoma,Arial,sans-serif}
#battle .battleWeaponNumbers>span{white-space:nowrap}
#battle .battleWeaponNumbers b{color:#fff;font-weight:normal}
#battle .battleWeaponDetails small{color:#c5d8ed;font:9px Tahoma,Arial,sans-serif}
#battle .battleCellActions{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;background:none;border:0}
#battle #weaponPopup .battleCellClose{display:grid;place-items:center;width:23px;height:23px;margin:0 0 7px;padding:0;border:2px solid #ffd9e0;border-radius:6px;background:linear-gradient(#ff747b,#b72743);box-shadow:0 0 0 1px #733b56;color:#fff;text-align:center;font:bold 23px/17px Arial,sans-serif}
#battle #weaponPopup #battleCellMove{display:grid;place-items:center;flex:none;width:35px;height:35px;margin:0;padding:3px;border:2px solid #c4ffd5;border-radius:9px;background:linear-gradient(135deg,#7dfba0,#159f49);box-shadow:inset 0 0 0 1px #23944d,0 0 8px #70ff9077}
#battle #battleCellMove svg{display:block;width:25px;height:25px;fill:none;stroke:#f1fff5;stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(0 1px 1px #176336)}
#battle #weaponPopup #battleCellMove:hover:not(:disabled){background:linear-gradient(135deg,#b5ffd1,#39c96c);box-shadow:0 0 10px #7effa0}
#battle #weaponPopup #battleCellMove:disabled{opacity:.35;filter:grayscale(1);box-shadow:none;cursor:default}
#battle .battleMoveCost{font:bold 9px Tahoma,Arial,sans-serif;color:#d9ffe5;white-space:nowrap}
#battle .battleMoveRange{display:grid;gap:3px;margin-top:4px;text-align:center;font:8px Tahoma,Arial,sans-serif;color:#bed4f1}
#battle .battleMoveRange b{font-size:9px;font-weight:normal}
#battle .battleNoWeapons{padding:7px;font-size:10px;color:#d4e3f5}
#battle #weaponPopup button:focus-visible{outline:2px solid #edfbff;outline-offset:-2px}
#battle #bonuses button.used{opacity:.3;filter:grayscale(1)}
#battle #bonuses button{position:relative;padding-right:19px;min-width:48px}
#battle #bonuses .bioUses{position:absolute;right:3px;bottom:3px;font:9px/1 Tahoma,Arial,sans-serif;color:#e6dfb1;pointer-events:none}
#battle .battleActionStrip .battleEmptySlot{flex:1;width:auto}
.roomActions{display:grid;grid-template-columns:1fr;align-content:center}
.roomTeam .roomJoinPlus{margin-left:auto;flex:0 0 28px;width:28px;height:28px;padding:0;font-size:20px;line-height:1}
.roomJoinPlus:disabled{opacity:.4;cursor:default;box-shadow:none}
.roomJoinPlus:focus-visible{outline:2px solid #9aefda;outline-offset:2px}
.world>.battlePage{inset:0;margin:0;padding:24px;background:#091827;border:0;z-index:20}
.battlePageContent{width:100%;max-width:1100px;margin:0 auto}
.battlePage .battleListHead{gap:16px;align-items:center}
.battlePage .battleListHead h2{margin:0}
.battlePage .battleListHead button{width:auto;padding:8px 12px;font-size:11px;white-space:nowrap}
.battlePage .archiveLog{max-height:none;overflow:visible}
#battleWaiting{padding:14px;border:1px solid #76b6c6;background:#14374a;color:#cef5ef;line-height:1.7}
@media(max-width:760px){.world>.battlePage{padding:14px}.battlePage .battleListHead{flex-wrap:wrap}}
