/* Iron Sharpens Iron: the ranked ladder (screens/ladder.js). Builds on game.css: panels, buttons, chips, bars, sheets. */
.ladder .scroll { padding-bottom: 28px; }
.ladder .panel { color: var(--ink); }
.ladwait { text-align: center; }

/* the header: tier badge, name, its verse */
.ladhead { display: flex; align-items: center; gap: 12px; border-color: var(--ink); background: linear-gradient(135deg, #fff 55%, color-mix(in srgb, var(--tc, #ffd23f) 45%, #fff)); }
.ladbadge { flex: none; width: 72px; }
.ladbadge.sm { width: 40px; }
.ladbadge svg { display: block; width: 100%; height: auto; }
.ladintro .ladbadge { margin: 0 auto; }
.ladverse { font: 700 12.5px/1.4 Georgia, "Iowan Old Style", serif; color: #2a2118; margin-top: 4px; }
.ladverse b { color: var(--blue); font: 800 11px/1 var(--body); white-space: nowrap; }
.ladprog { margin-top: 10px; }
.ladprog .bar { margin-top: 8px; height: 14px; }
.ladprog .bar > b { background: var(--gold); }
.ladnote { margin: 10px 0 0; padding: 9px 11px; border: 2px solid var(--ink); border-radius: 12px; background: #fff3c4; color: var(--ink); font: 800 12.5px/1.4 var(--body); }
.ladnote.bad { background: #ffe1e1; }
.ladlist { margin: 8px 0 12px; padding-left: 18px; font: 700 13.5px/1.45 var(--body); }
.ladlist li { margin: 6px 0; }

/* squads: small faces in a row (reserves are dimmer and slightly apart) */
.ladfaces { display: flex; gap: 5px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.ladface { display: block; width: 38px; }
.ladface .pcard.mini { width: 100%; }
.ladface.res { opacity: .72; margin-left: 2px; }
.ladface.res:first-of-type, .ladface:nth-child(3) + .ladface { margin-left: 10px; }
.ladfaces.big .ladface { width: 52px; }

.ladopp { margin-bottom: 10px; }
.ladopp.npc { background: #f4f0ff; }
.ladopen { margin-bottom: 10px; background: #e6f0ff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ladopen .btn { margin-left: auto; }
.ladreward { margin-bottom: 10px; background: linear-gradient(#fff, #fff7d6); }

/* results */
.ladlog { padding: 4px 12px; }
.ladlogrow { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 2px dashed var(--line); font: 700 13px/1.35 var(--body); }
.ladlogrow:last-child { border-bottom: 0; }
.ldot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: #d8d0e4; }
.ldot.held { background: var(--green); } .ldot.other { background: #ffb703; } .ldot.even { background: #a9d1ff; }
.ldelta { flex: none; font: 900 13px/1 var(--body); }
.up { color: #2d8a34; } .down { color: #c1121f; }

/* the tiers list */
.ladtiers { margin-top: 16px; }
.ladalltiers summary { cursor: pointer; }
.ladtierrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; margin-top: 6px; border-radius: 12px; }
.ladtierrow.cur { background: #fff3c4; outline: 2px solid var(--ink); }
.ladbanners { text-align: center; margin-top: 10px; }

/* the squad picker sheet */
.ladslots { display: flex; gap: 14px; margin: 8px 0; align-items: flex-start; flex-wrap: wrap; }
.ladslot { width: 62px; text-align: center; }
.ladslot .pcard { width: 62px; }
.ladslot.sel .pcard { outline: 4px solid var(--blue); outline-offset: 2px; }
.ladslot .emptyslot { width: 62px; aspect-ratio: 1; border: 3px dashed #b8aecb; border-radius: 14px; display: grid; place-items: center; font: 400 26px/1 var(--head); color: #b8aecb; }
.ladslot.res .pcard { opacity: .8; }
.ladroster { max-height: 34vh; overflow-y: auto; margin-top: 8px; padding-bottom: 4px; align-content: start; }
.ladroster .rpick.picked .pcard { outline: 3px solid var(--green2); }

/* the result sheet */
.ladresult .ladscores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.ladresult .ladscores > div { border: 3px solid var(--ink); border-radius: 14px; background: #fff; padding: 8px 6px; display: flex; flex-direction: column; gap: 2px; }
.ladresult .ladscores b { font: 400 30px/1 var(--head); }
.ladresult .ladscores .ladbest b { font: 800 12px/1.2 var(--body); }
.ladrating { font: 800 15px/1.3 var(--body); margin: 6px 0; }
.ladrating b { font: 400 24px/1 var(--head); margin-right: 4px; }
.ladtierup { margin: 10px 0; padding: 10px; border: 3px solid var(--ink); border-radius: 16px; background: #fff3c4; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ladtierup .ladbadge { width: 56px; }
.ladcheers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }

/* what each hero did best, and the squad a defender will field */
.ladbest { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.ladbest > div, .ladfield { display: flex; align-items: center; gap: 6px; font: 700 11.5px/1.2 var(--body); }
.ladbest .ladface { width: 24px; flex: none; }
.ladfielding { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ladfield .ladface { width: 34px; flex: none; }
.ladfield.res { opacity: .8; }

/* the duel arena (screens/duel.js): the battle screen's own arena, two squads facing each other */
.duelview .dpanel { display: flex; flex-direction: column; gap: 5px; padding: 6px 9px; }
.duelview .drow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.duelview .dname { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/1 var(--head); }
.duelview .drow.foe .dname { color: #ffd6b0; }
.duelview .dbar { flex: 1; height: 11px; border: 2px solid #000; border-radius: 6px; background: #4b3f5e; overflow: hidden; min-width: 40px; }
.duelview .dbar b { display: block; height: 100%; background: linear-gradient(#7ae582 50%, #4cc764 50%); transition: width .45s; }
.duelview .drow.foe .dbar b { background: linear-gradient(#ffb36b 50%, #ff9a3d 50%); }
.duelview .dres { flex: none; display: flex; gap: 2px; min-width: 6px; }
.duelview .dface { display: block; width: 20px; height: 20px; border: 2px solid #000; border-radius: 6px; overflow: hidden; background: #ffe28a; }
.duelview .dface svg { display: block; width: 100%; height: 100%; }
.duelview .dface.worn { filter: grayscale(1) brightness(.6); }
.duelview .unit.enemy .hpb b { background: linear-gradient(#ffb36b 50%, #ff9a3d 50%); }
/* a hero who is worn out sits down: lower, grey and quiet (never knocked over) */
.duelview .unit.down .fig { transform: translateY(12%) scale(.92); filter: grayscale(.85) brightness(.78); opacity: .8; }
.duelview .unit.ally.down .fig { transform: translateY(12%) scale(.92); }
.duelview .unit.down .hpb { opacity: .5; }
.duelview .unit.enemy .tags { top: -4px; }
.duelview .unit .target { bottom: -34px; background: var(--gold); color: var(--ink); }
.duelview .unit.enemy .target { top: auto; bottom: -34px; }
.duelview .unit.focus .ring { border-color: var(--gold); box-shadow: 0 0 12px var(--gold); }
.duelview .duelbtns { grid-template-columns: auto 1fr; }
.duelview .tray { color: var(--ink); }
.duelview .tray .heroes .hcard.down { opacity: .45; }