/* Friendly battles (js/16-friendly.js): the ranking's Fight button, the
   profile's Friendly battle button, the arena's Share row and the result
   card a shared battle shows in chat. */

#pLeague .rankFight{flex:none;min-height:30px;margin-left:8px;padding:5px 10px;font-size:11px}

.sheet .friendlyBtn{margin:10px 0 2px}
.sheet .friendlyNote{margin-bottom:4px;text-align:center}

/* the arena footer: result text, then Share / Continue, wrapping under it
   on a narrow screen */
.encounterFoot:has(.friendlyActs){flex-wrap:wrap}
.encounterFoot:has(.friendlyActs)>div:first-child{flex:1 1 180px}
.encounterFoot>.friendlyActs{display:flex;flex:1 1 auto;justify-content:flex-end;gap:6px}
.friendlyActs .btn{white-space:nowrap}
.friendlyActs .btn.pri{border-color:#cab4f0;background:#c4a6fa;color:#1c1744}
.friendlyActs #encounterBtn,.friendlyActs #replayAgain{border-color:#b69cd43b;background:#343d72;color:#e3def9}
.friendlyActs .btn.done{border-color:#6fd6a455;background:#233a3a;color:#bfe8c9;opacity:1}
/* a replay's hero isn't yours: your skill bar steps aside */
#pHome.arenaReplay .skillrow,#pHome.arenaReplay .arenaControls{visibility:hidden}

/* a shared battle in chat */
.battleCard{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;
  margin-top:7px;padding:8px;border:1px solid #8c96c33b;border-radius:10px;background:#1a2140}
.battleSide{display:flex;align-items:center;gap:6px;min-width:0}
.battleVs+.battleSide{flex-direction:row-reverse;text-align:right}
.battleSide img{flex:none;border-radius:50%}
.battleSide>div{min-width:0}
.battleSide b,.battleSide small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.battleSide b{color:#f0edff;font-size:12px}
.battleSide small{margin-top:1px;color:#aeb5d7;font-size:10px}
.battleSide.win small{color:#ffd98a}
.battleSide.win b{color:#ffe7b0}
.battleVs{color:#d9c4ff;font-size:10px;font-weight:700}
/* the card's header: what it is, and who won */
.battleHead{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;
  padding-bottom:5px;border-bottom:1px solid #8c96c326;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.battleHead span{flex:none;color:#d9c4ff}
.battleHead em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffd98a;font-style:normal}
/* the health each side had left; the right side's bar drains toward its avatar */
.battleHp{display:block;height:4px;margin-top:4px;border-radius:2px;background:#0d1226;overflow:hidden}
.battleHp i{display:block;height:100%;border-radius:2px;background:#6fd6a4}
.battleHp.mid i{background:#e8c25b}
.battleHp.low i{background:#e0715f}
.battleVs+.battleSide .battleHp{transform:scaleX(-1)}
#pChat .battleCard .btn{grid-column:1/-1;min-height:32px;margin-top:2px}