/* ==========================================================================
   COMBINE-FC — pitch-duel.css
   DUEL screen (js/pitch-duel.js): the 1v1 lobby, the shared transfer-window
   shortlist, the team-sheet builder, the waiting state and the reveal.

   Structural pattern ported from combine/css/combine-duel.css — head, banners,
   lobby, mode/budget pickers, builder, cap meter, board grid, waiting panel and
   reveal — expressed entirely in COMBINE-FC's own tokens (css/pitch-tokens.css).
   None of COMBINE's hex values or accent names appear here; --c-chalk is this
   game's primary accent where COMBINE reads --cb-accent, and --c-lime is its
   live/active step.

   WHAT THE SPORT CHANGED:

     * THE SHEET IS FOUR LINES, NOT A FLAT LIST. `.fc-duel__line` blocks the
       eleven into goalkeeper / defence / midfield / attack, and the shirts
       inside each line WRAP, so an XI fits a 360px builder column without
       becoming an eleven-row scroll. COMBINE stacks five rows and is done.
     * SHIRTS PER LINE ARE AUTO-FIT, NOT A FIXED COLUMN COUNT. The lines are
       1/4/3/3 in a 4-3-3 and would be different numbers in any other shape, so
       nothing here may hardcode a count — `repeat(auto-fit, minmax(...))` reads
       the formation off the markup.
     * THREE RESULT COLOURS. --c-result-w / --c-result-d / --c-result-l, because
       a football match can be drawn. COMBINE's duel only ever needed win and
       loss, and paints a draw in neutral chrome; here the draw has its own
       named token and is deliberately NOT a warning colour.
     * THE LINE-BY-LINE PANEL has no COMBINE counterpart at all: five players do
       not divide into units, so there is nothing there to compare.
   ========================================================================== */

#screen-duel .container {
  padding-top: var(--s-4);
  padding-bottom: var(--s-8);
}

.fc-duel {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5) 0 var(--s-7);
}

/* ---------------- head ---------------- */
.fc-duel__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.fc-duel__titles {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
  min-width: 0;
}
.fc-duel__kicker {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--c-text-3);
}
.fc-duel__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  letter-spacing: 0.03em;
  color: var(--c-chalk-bright);
}
.fc-duel__text {
  font-size: var(--fs-small);
  color: var(--c-text-2);
  max-width: 62ch;
}

/* The code is the whole product of a duel — it gets typographic weight so a
   screenshot of this header is enough for the other manager to join. */
.fc-duel__code {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
}
.fc-duel__code-value {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  /* letter-spacing pads the right edge of the last glyph — pulled back so the
     block still optically aligns with the button under it. */
  margin-right: -0.24em;
  color: var(--c-lime);
}

/* ---------------- banners ---------------- */
.fc-duel__error,
.fc-duel__offline,
.fc-duel__notice {
  padding: var(--s-3) var(--s-4);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-2);
}
.fc-duel__error {
  border-color: var(--c-bad);
  color: var(--c-bad);
}
.fc-duel__notice {
  border-style: dashed;
  border-color: var(--c-lime-dim);
}

/* ---------------- lobby ---------------- */
.fc-duel__lobby {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.fc-duel__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
.fc-duel__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-4);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-panel);
}
.fc-duel__action-title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--c-text);
}
.fc-duel__action-text {
  font-size: var(--fs-small);
  color: var(--c-text-3);
}
.fc-duel__join-row {
  display: flex;
  gap: var(--s-2);
  width: 100%;
}

.fc-duel__input {
  flex: 1;
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: var(--bw) solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}
.fc-duel__input:focus {
  outline: none;
  border-color: var(--c-lime);
}
.fc-duel__input--code {
  text-transform: uppercase;
  letter-spacing: 0.28em;
}

.fc-duel__name {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.fc-duel__name-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--c-text-3);
}
.fc-duel__name .fc-duel__input {
  flex: 0 1 16rem;
}
.fc-duel__name-hint {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  color: var(--c-text-3);
}

/* ---------------- duel list ---------------- */
.fc-duel__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.fc-duel__list-head {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--c-text-3);
  margin-bottom: var(--s-1);
}
.fc-duel__empty {
  padding: var(--s-4) 0;
  font-size: var(--fs-small);
  color: var(--c-text-3);
}
.fc-duel__row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-panel);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--dur) ease;
}
.fc-duel__row:hover {
  border-color: var(--c-chalk-a35);
}
.fc-duel__row-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-lime);
}
.fc-duel__row-vs {
  font-size: var(--fs-small);
  color: var(--c-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Which of the two games a row is. Carried on every row rather than only the
   transfer-window ones — "STARTING XI · €200M" and "TRANSFER WINDOW" have to be
   equally legible, or the absence of a badge reads as "unknown" rather than as
   "Starting XI". */
.fc-duel__row-mode {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  padding: 2px var(--s-2);
  border: var(--bw) solid var(--c-line-2);
  border-radius: var(--r-xs);
  color: var(--c-text-3);
  white-space: nowrap;
}
.fc-duel__row-mode.is-draft {
  border-color: var(--c-lime-dim);
  color: var(--c-lime);
}
.fc-duel__row-status {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
}
.fc-duel__row.is-complete .fc-duel__row-status {
  color: var(--c-text-2);
}
.fc-duel__row-score {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c-text);
}
/* A finished duel's row wears its outcome. Three states, not two. */
.fc-duel__row.is-win .fc-duel__row-score { color: var(--c-result-w); }
.fc-duel__row.is-draw .fc-duel__row-score { color: var(--c-result-d); }
.fc-duel__row.is-loss .fc-duel__row-score { color: var(--c-result-l); }

/* ---------------- create form: mode + budget pickers ---------------- */
.fc-duel__pick {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
}
.fc-duel__pick-head {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--c-text-3);
}
.fc-duel__pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.fc-duel__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex: 1 1 auto;
  padding: var(--s-2) var(--s-3);
  border: var(--bw) solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
  color: var(--c-text-2);
  cursor: pointer;
  transition: border-color var(--dur) ease, color var(--dur) ease;
}
.fc-duel__opt:hover {
  border-color: var(--c-chalk-a35);
}
.fc-duel__opt.is-on {
  border-color: var(--c-lime);
  color: var(--c-text);
  box-shadow: var(--glow-sm);
}
.fc-duel__opt-label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}
.fc-duel__opt-sub {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
}
.fc-duel__opt.is-on .fc-duel__opt-sub {
  color: var(--c-lime);
}
.fc-duel__pick-note {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-text-3);
}

/* ---------------- builder ---------------- */
/* 640px, not COMBINE's 480: measured in the browser, a back four at
   minmax(130px,1fr) needs 4x130 + 3x8 + 2x16 of padding = 576px to sit on one
   row, and a defence broken 3 + 1 across two rows does not read as a back
   four. COMBINE never meets this — five slots are a single column of rows. */
.fc-duel__builder {
  display: grid;
  grid-template-columns: minmax(0, 640px);
  gap: var(--s-5);
  align-items: start;
}
/* The transfer window needs the second column the Starting XI view has no use
   for: the team sheet on the left, the 32-player shortlist on the right. */
.fc-duel__builder--draft {
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .fc-duel__builder,
  .fc-duel__builder--draft {
    grid-template-columns: 1fr;
  }
}

.fc-duel__dealing {
  padding: var(--s-7) 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--c-lime);
}

.fc-duel__sheet {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-panel);
}
.fc-duel__sheet-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.fc-duel__sheet-title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--c-text);
  flex: 1;
}
.fc-duel__sheet-ovr {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
}
.fc-duel__sheet-ovr strong {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--c-lime);
}
.fc-duel__sheet-ovr span {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
}
.fc-duel__sheet-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.fc-duel__sheet-spend {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
  margin-left: auto;
}

/* ------ the eleven, in its four lines ------ */
.fc-duel__sheet-lines {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.fc-duel__line {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.fc-duel__line-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: var(--c-text-3);
}
/* auto-fit, never a fixed count: the lines are 1/4/3/3 in a 4-3-3 and would be
   different numbers in any other formation. 130px is the floor at which a back
   four still fits one row inside the 640px builder — see the note there. */
.fc-duel__line-shirts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--s-2);
}

.fc-duel__shirt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "pos grade"
    "name name"
    "line line";
  align-items: center;
  gap: 2px var(--s-2);
  width: 100%;
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border: var(--bw) dashed var(--c-line-2);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
  color: var(--c-text);
}
.fc-duel__shirt.is-filled {
  border-style: solid;
  border-color: var(--c-line-strong);
}
.fc-duel__shirt-pos {
  grid-area: pos;
  font-family: var(--font-display);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--c-chalk-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-duel__shirt-empty {
  grid-area: name;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
}
.fc-duel__shirt-name {
  grid-area: name;
  font-size: var(--fs-small);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-duel__shirt-line {
  grid-area: line;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.fc-duel__shirt-ovr {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--c-text-2);
}
.fc-duel__shirt-fit {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
}
.fc-duel__shirt-fit.is-off {
  color: var(--c-warn);
}
.fc-duel__shirt .fc-duel__grade {
  grid-area: grade;
}

/* A transfer-window shirt is a button, not a read-only row — the Starting XI
   view is a view of something you edit elsewhere, this one IS the editor. */
.fc-duel__shirt--pick {
  cursor: pointer;
  transition: border-color var(--dur) ease;
}
.fc-duel__shirt--pick:hover:not(:disabled) {
  border-color: var(--c-chalk-a35);
}
.fc-duel__shirt--pick.is-target {
  border-style: solid;
  border-color: var(--c-lime);
  box-shadow: var(--glow-sm);
}
.fc-duel__shirt--pick:disabled {
  cursor: default;
  opacity: 0.7;
}

/* ---------------- transfer budget ---------------- */
.fc-duel__cap {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: var(--bw) solid var(--c-flood);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
}
.fc-duel__cap.is-over {
  border-color: var(--c-bad);
}
.fc-duel__cap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.fc-duel__cap-title {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--c-text-3);
}
.fc-duel__cap-value {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  color: var(--c-flood-bright);
}
.fc-duel__cap.is-over .fc-duel__cap-value {
  color: var(--c-bad);
}
.fc-duel__cap-bar {
  position: relative;
  height: 6px;
  border-radius: var(--r-xs);
  background: var(--c-line);
  overflow: hidden;
}
.fc-duel__cap-fill {
  display: block;
  height: 100%;
  background: var(--c-flood-bright);
  transition: width var(--dur) ease;
}
.fc-duel__cap.is-over .fc-duel__cap-fill {
  background: var(--c-bad);
}
.fc-duel__cap-lines {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.fc-duel__cap-line {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
}
.fc-duel__cap-line strong {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--c-text);
}
.fc-duel__cap.is-over .fc-duel__cap-line:last-child strong {
  color: var(--c-bad);
}

/* ---------------- the shared shortlist ---------------- */
.fc-duel__pool {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.fc-duel__pool-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.fc-duel__pool-title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--c-text);
}
.fc-duel__pool-hint {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--c-lime);
}
.fc-duel__pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-2);
}
.fc-duel__pool-note {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-text-3);
}

.fc-duel__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-panel);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--dur) ease, transform var(--dur) ease, opacity var(--dur) ease;
}
.fc-duel__card:hover {
  border-color: var(--c-chalk-a35);
  transform: translateY(-1px);
}
.fc-duel__card.is-selected {
  border-color: var(--c-lime);
  box-shadow: var(--glow-sm);
}
.fc-duel__card.is-seated {
  opacity: 0.55;
  border-style: dashed;
}
.fc-duel__card.is-ineligible {
  opacity: 0.4;
  cursor: default;
}
.fc-duel__card.is-ineligible:hover {
  border-color: var(--c-line);
  transform: none;
}
.fc-duel__card-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
/* --fc-chip-hue is set inline per card from the player's own position-group
   colour token (js/pitch-duel.js posChip), the same seam the challenge screen
   uses — so a keeper, a defender and a forward are separable at a glance on a
   board of 32. */
.fc-duel__card-pos {
  font-family: var(--font-display);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: var(--fc-chip-hue, var(--c-chalk-dim));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-duel__card-ovr {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--c-text);
  margin-left: auto;
}
.fc-duel__card-name {
  font-size: 0.75rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-duel__card-meta {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
}
.fc-duel__card-bit {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
}
.fc-duel__card-bit.is-badge {
  color: var(--c-lime-dim);
}
.fc-duel__card-seated {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--c-lime);
}

/* ---------------- link-ups ---------------- */
.fc-duel__rules {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--s-3);
  border-top: var(--bw) solid var(--c-line);
}
.fc-duel__rules-head {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--c-text-3);
  margin-bottom: var(--s-1);
}
.fc-duel__rule {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--c-bad);
}
.fc-duel__rule.is-ok {
  color: var(--c-ok);
}
.fc-duel__rule-mark {
  text-align: center;
}
.fc-duel__rule-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Holds a link-up blurb — a short sentence, so it gets more room than a bare
   label and still truncates rather than wrapping the row to two lines. */
.fc-duel__rule-detail {
  color: var(--c-text-2);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-duel__rule.is-ok .fc-duel__rule-detail {
  color: var(--c-ok);
}

.fc-duel__run {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: var(--bw) solid var(--c-line);
}
.fc-duel__run-hint {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--c-text-3);
}
/* The overspend message is the one hint that is an obstacle rather than a
   note — it says why the button above it will not move. */
.fc-duel__run-hint.is-bad {
  color: var(--c-bad);
}

/* ---------------- chips ---------------- */
.fc-duel__grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--c-text-inv);
  background: var(--c-grade-f);
}
.fc-duel__grade[data-grade="A"] { background: var(--c-grade-a); }
.fc-duel__grade[data-grade="B"] { background: var(--c-grade-b); }
.fc-duel__grade[data-grade="C"] { background: var(--c-grade-c); }
.fc-duel__grade[data-grade="D"] { background: var(--c-grade-d); }
.fc-duel__grade[data-grade="F"] { background: var(--c-grade-f); }

/* ---------------- waiting ---------------- */
.fc-duel__waiting {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  border: var(--bw) dashed var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-panel);
}
.fc-duel__waiting-head {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  letter-spacing: 0.06em;
  color: var(--c-chalk-bright);
}
.fc-duel__waiting-text {
  font-size: var(--fs-small);
  color: var(--c-text-2);
  max-width: 56ch;
}

/* ---------------- result ---------------- */
.fc-duel__result {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.fc-duel__banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-5);
  border: var(--bw) solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-panel);
  text-align: center;
}
/* Three outcomes, three colours. A drawn duel is deliberately neutral chalk
   rather than a warning: taking a point off your rival is not a fault state. */
.fc-duel__result.is-win .fc-duel__banner { border-color: var(--c-result-w); }
.fc-duel__result.is-draw .fc-duel__banner { border-color: var(--c-result-d); }
.fc-duel__result.is-loss .fc-duel__banner { border-color: var(--c-result-l); }
.fc-duel__banner-word {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  letter-spacing: 0.12em;
  color: var(--c-text);
}
.fc-duel__result.is-win .fc-duel__banner-word { color: var(--c-result-w); }
.fc-duel__result.is-draw .fc-duel__banner-word { color: var(--c-result-d); }
.fc-duel__result.is-loss .fc-duel__banner-word { color: var(--c-result-l); }
.fc-duel__banner-score {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--c-text);
}
/* The scoreline takes the outcome colour too. Left on the win colour it read
   as a green scoreline under the word LOSS. */
.fc-duel__result.is-win .fc-duel__banner-score { color: var(--c-result-w); }
.fc-duel__result.is-draw .fc-duel__banner-score { color: var(--c-result-d); }
.fc-duel__result.is-loss .fc-duel__banner-score { color: var(--c-result-l); }
.fc-duel__banner-sub {
  font-size: var(--fs-small);
  color: var(--c-text-3);
}

.fc-duel__sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
.fc-duel__xi {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-panel);
}
.fc-duel__xi-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--c-text-3);
}
.fc-duel__xi-head strong {
  font-size: 1.125rem;
  color: var(--c-lime);
}
.fc-duel__xi-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fc-duel__xi-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--fs-small);
}
.fc-duel__xi-slot {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--c-chalk-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-duel__xi-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-2);
}
.fc-duel__xi-ovr {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--c-text);
}

/* ---------------- reveal: line by line ----------------
   No COMBINE counterpart. Two elevens are read as four units against four
   units, not as one number against another. */
.fc-duel__lines {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-panel);
}
.fc-duel__lines-head {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
  text-align: center;
}
.fc-duel__lines-head > span:first-child { text-align: left; }
.fc-duel__lines-head > span:last-child {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-duel__lines-title {
  color: var(--c-text-2);
  letter-spacing: 0.14em;
}
.fc-duel__lines-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) 0;
  border-top: var(--bw) solid var(--c-line);
}
.fc-duel__lines-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  color: var(--c-text-3);
  text-align: center;
}
.fc-duel__lines-num {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--c-text-2);
}
.fc-duel__lines-row > .fc-duel__lines-num:last-child {
  text-align: right;
}
/* Who won the unit. The colour lands on the STRONGER side's number only, so a
   row reads at a glance without a legend. */
.fc-duel__lines-row.is-win > .fc-duel__lines-num:first-child { color: var(--c-result-w); }
.fc-duel__lines-row.is-loss > .fc-duel__lines-num:last-child { color: var(--c-result-l); }
.fc-duel__lines-row.is-draw > .fc-duel__lines-num { color: var(--c-result-d); }

/* ---------------- reveal: what nobody signed ---------------- */
.fc-duel__left {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: var(--bw) dashed var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-panel);
}
.fc-duel__left-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--c-text-3);
}
.fc-duel__left-head strong {
  font-size: 1.125rem;
  color: var(--c-text-2);
}
.fc-duel__left-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s-1) var(--s-4);
}
.fc-duel__left-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
}
.fc-duel__left-pos {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--c-chalk-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-duel__left-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-2);
}
.fc-duel__left-ovr {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--c-text);
}

.fc-duel__result-note {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-text-3);
}

@media (max-width: 640px) {
  .fc-duel__row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-auto-rows: auto;
    row-gap: var(--s-1);
  }
  .fc-duel__code {
    align-items: flex-start;
  }
}