/* PIANO ARMY · the Army Boosts (web/army-boosts.css): the menu's panel, where the boosts kept are equipped (up to the
   table's slots), and the Victory screen's offer of three to keep one (army-boosts.js, army-stage.js) */
.boosts .blist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 8px; }
.boosts .boost { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 0 8px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); font-size: 12.5px; }
.boosts .boost img { grid-row: span 3; width: 40px; height: 40px; object-fit: contain; }
.boosts .boost b { font: 700 15px/1.1 "Barlow Condensed", Barlow, sans-serif; }
.boosts .boost span { color: var(--dim); line-height: 1.25; }
.boosts .boost i { font-style: normal; font: 700 11px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.boosts button.boost { cursor: pointer; }
.boosts .boost.on { border-color: var(--gold); background: linear-gradient(#2e2a1c, #221f15); box-shadow: 0 0 0 1px var(--gold) inset; }
.boosts .boost.on i { color: var(--gold2); }
.boosts .boost.locked { opacity: .45; filter: grayscale(.8); }
.boosts .bhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.boosts .bhead h2 { margin: 0; }
.boosts .forget { margin-left: auto; background: none; border: 0; color: var(--dim); font-size: 12px; text-decoration: underline; padding: 0; }
.boosts .forget.armed { color: #ff9a8a; }
.menu-in > .boosts { margin-bottom: 14px; }

/* the Victory screen's offer */
.boost-offer { margin: 14px 0 4px; padding: 10px 12px 12px; border: 1px solid #5a4a22; border-radius: 12px; background: rgba(240, 207, 133, .06); }
.boost-offer h3 { font-size: 22px; color: var(--gold2); }
.boost-offer .bcards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.boost-offer .bcard { position: relative; width: 160px; padding: 20px 8px 8px; border-radius: 12px; background: linear-gradient(#262e44, #1a2032); border: 2px solid var(--line); cursor: pointer; transition: transform .15s, border-color .15s; }
.boost-offer .bcard:hover { border-color: var(--gold); }
.boost-offer .bcard.sel { border-color: var(--gold2); transform: translateY(-4px); box-shadow: 0 0 18px rgba(240, 207, 133, .4); }
.boost-offer .bcard .key { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #2a2010; font: 800 13px/1 "Barlow Condensed", sans-serif; padding: 4px 9px; border-radius: 999px; }
.boost-offer .bcard img { height: 48px; }
.boost-offer .bcard b { display: block; font: 700 17px/1.1 "Barlow Condensed", Barlow, sans-serif; margin-top: 4px; }
.boost-offer .bcard p { margin: 4px 0 0; font-size: 12.5px; color: var(--soft); }
/* (with an offer on it the Victory screen's stats go two to a row, so its buttons stay in sight at 900 px tall) */
.end.won .stats { grid-template-columns: auto auto auto auto; gap: 2px 14px; }
.end.won .stats dd { padding-right: 10px; }
.end.won h2 { font-size: 30px; }

/* credits to spend (a reset's, army-boosts.js): the boosts not owned become buttons that take one */
.boosts .credits { font: 700 13px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .3px; color: #2a2010; background: var(--gold); border-radius: 999px; padding: 4px 10px; }
.boosts .boost.take { border-style: dashed; border-color: var(--gold); }
.boosts .boost.take i { color: var(--gold2); }
.boosts .reset { background: none; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; padding: 3px 10px; color: var(--soft); }
.boosts .reset.armed { border-color: var(--gold); color: var(--gold2); }
.boosts .reset + .forget, .boosts .forget { margin-left: 0; }
.boosts .bhead .reset { margin-left: auto; }