/* Position battles: starter (left, gold) vs backup (right) on a labelled tug-of-war.
   Loaded after drills.css and overrides its older .btl-* rules. */
.btl-help { margin: 0 0 10px; padding: 8px 11px; background: var(--card); box-shadow: var(--frame); font: 800 12.5px/1.35 var(--sans); color: var(--card-ink); }
.btl-tug { display: grid; grid-template-columns: 112px minmax(0, 1fr) 112px; align-items: start; gap: 10px; padding: 6px 2px 4px; }
.btl-tug > .btl-mid { margin-top: 20px; min-width: 0; }
.btl-man { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; padding: 6px 4px; }
.btl-man.st { background: rgba(245, 196, 0, .16); box-shadow: 0 0 0 3px var(--gold); }
.btl-man.ch { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 2px #6b7280; opacity: .92; }
.btl-tag { font: 900 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; white-space: nowrap; }
.btl-tag.st { background: var(--gold); color: var(--ink); }
.btl-tag.ch { background: #6b7280; color: #fff; }
.btl-lbl { font: 900 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); text-align: center; margin-bottom: 6px; }
.btl-bar { position: relative; display: flex; height: 22px; padding: 0; background: var(--ink); box-shadow: 0 0 0 2px #000; }
.btl-bar > i { display: block; height: 100%; width: auto; }
.btl-bar > i.s { flex: 0 0 var(--w, 50%); background: var(--gold); }
.btl-bar > i.c { flex: 1 1 auto; background: #8d99ab; }
.btl-card.live .btl-bar > i.c { background: var(--red); }
.btl-bar .mk { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: #fff; }
.btl-bar .mk::after { content: none; }
.btl-note { margin-top: 3px; text-align: center; font: 800 11px/1.25 var(--sans); color: var(--soft); }
.btl-ends { display: flex; justify-content: space-between; gap: 6px; font: 900 11px var(--sans); color: var(--soft); margin-top: 4px; }
.btl-lead { margin-top: 7px; text-align: center; font: 900 13px/1.3 var(--sans); color: #fff; }
@media (max-width: 560px) {
  .btl-tug { grid-template-columns: 92px minmax(0, 1fr) 92px; gap: 6px; }
  .btl-tag { font-size: 9.5px; padding: 3px 4px; }
  .btl-lead { font-size: 12px; }
}

/* a starting job he asked you for: the promise or prove-it goal on his battle */
.btl-claim { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 8px;
  border: 2px solid var(--line, #333); background: rgba(0,0,0,.25); }
.btl-claim .btl-cw { flex: 1 1 140px; font: 800 12px/1.3 var(--sans); color: #fff; }
.btl-claim .rm-bar { flex: 1 1 80px; }
.btl-claim .btl-cv { font: 800 11px/1.2 var(--sans); color: var(--soft); }