/* ==========================================================================
   COMBINE — combine-duel.css
   DUEL screen (js/combine-duel.js): 1v1 lobby, shared draft pool, five
   builder, waiting state and the reveal. Structurally a sibling of
   css/combine-challenge-play.css — the builder half is the same interaction,
   so it deliberately reads the same, with its own block name.
   ========================================================================== */

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

/* ---------------- head ---------------- */
.cb-duel__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.cb-duel__titles {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
  min-width: 0;
}
.cb-duel__kicker {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--c-text-3);
}
.cb-duel__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  letter-spacing: 0.06em;
  color: var(--cb-accent-bright);
}
.cb-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 player to join. */
.cb-duel__code {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
}
.cb-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(--cb-accent-bright);
}

/* ---------------- banners ---------------- */
.cb-duel__error,
.cb-duel__offline,
.cb-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);
}
.cb-duel__error {
  border-color: var(--c-bad);
  color: var(--c-bad);
}
.cb-duel__notice {
  border-style: dashed;
  border-color: var(--cb-accent);
}

/* ---------------- lobby ---------------- */
.cb-duel__lobby {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.cb-duel__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
.cb-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);
}
.cb-duel__action-title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--c-text);
}
.cb-duel__action-text {
  font-size: var(--fs-small);
  color: var(--c-text-3);
  flex: 1;
}
.cb-duel__join-row {
  display: flex;
  gap: var(--s-2);
  width: 100%;
}

.cb-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;
}
.cb-duel__input:focus {
  outline: none;
  border-color: var(--cb-accent-bright);
}
.cb-duel__input--code {
  text-transform: uppercase;
  letter-spacing: 0.28em;
}

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

/* ---------------- duel list ---------------- */
.cb-duel__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.cb-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);
}
.cb-duel__empty {
  padding: var(--s-4) 0;
  font-size: var(--fs-small);
  color: var(--c-text-3);
}
.cb-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;
}
.cb-duel__row:hover {
  border-color: var(--cb-accent);
}
.cb-duel__row-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cb-accent-bright);
}
.cb-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
   draft ones — "LINEUP · $100M" and "MEGA DRAFT" have to be equally legible,
   or the absence of a badge reads as "unknown" rather than "lineup". */
.cb-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;
}
.cb-duel__row-mode.is-draft {
  border-color: var(--cb-accent);
  color: var(--cb-accent-bright);
}
.cb-duel__row-status {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
}

/* ---------------- create form: mode + cap pickers ---------------- */
.cb-duel__pick {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
}
.cb-duel__pick-head {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--c-text-3);
}
.cb-duel__pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.cb-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;
}
.cb-duel__opt:hover {
  border-color: var(--cb-accent);
}
.cb-duel__opt.is-on {
  border-color: var(--cb-accent-bright);
  color: var(--c-text);
  box-shadow: var(--glow-sm);
}
.cb-duel__opt-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.cb-duel__opt-sub {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
}
.cb-duel__opt.is-on .cb-duel__opt-sub {
  color: var(--cb-accent-bright);
}
.cb-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);
}
.cb-duel__row.is-complete .cb-duel__row-status {
  color: var(--c-text-2);
}
.cb-duel__row-score {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c-text);
}

/* ---------------- builder ---------------- */
.cb-duel__builder {
  display: grid;
  grid-template-columns: minmax(0, 480px);
  gap: var(--s-5);
  align-items: start;
}
/* The draft board needs the second column the lineup view has no use for:
   the court on the left, the 20-player board on the right. */
.cb-duel__builder--draft {
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .cb-duel__builder,
  .cb-duel__builder--draft {
    grid-template-columns: 1fr;
  }
}

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

.cb-duel__court {
  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);
}
.cb-duel__court-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.cb-duel__court-title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--c-text);
  flex: 1;
}
.cb-duel__court-ovr {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
}
.cb-duel__court-ovr strong {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--cb-accent-bright);
}
.cb-duel__court-ovr span {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
}

.cb-duel__slots {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cb-duel__slot {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas:
    "pos name grade"
    "pos line grade";
  align-items: center;
  gap: 0 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);
}
.cb-duel__slot.is-filled {
  border-style: solid;
  border-color: var(--c-line-strong);
}
.cb-duel__slot-pos {
  grid-area: pos;
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--cb-accent);
}
.cb-duel__slot-empty {
  grid-area: name;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
}
.cb-duel__slot-name {
  grid-area: name;
  font-size: var(--fs-small);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-duel__slot-line {
  grid-area: line;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.cb-duel__slot-ovr {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--c-text-2);
}
.cb-duel__slot-fit {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
}
.cb-duel__slot-fit.is-off {
  color: var(--c-warn);
}
.cb-duel__slot .cb-duel__grade {
  grid-area: grade;
}

/* A draft slot is a button, not a read-only row — the lineup view's slot is a
   view of something you edit elsewhere, this one IS the editor. */
.cb-duel__slot--pick {
  cursor: pointer;
  transition: border-color var(--dur) ease;
}
.cb-duel__slot--pick:hover {
  border-color: var(--cb-accent);
}
.cb-duel__slot--pick.is-target {
  border-style: solid;
  border-color: var(--cb-accent-bright);
  box-shadow: var(--glow-sm);
}

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

/* ---------------- draft board ---------------- */
.cb-duel__pool {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cb-duel__pool-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.cb-duel__pool-title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--c-text);
}
.cb-duel__pool-hint {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--cb-accent);
}
.cb-duel__pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-2);
}
.cb-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);
}

.cb-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;
}
.cb-duel__card:hover {
  border-color: var(--cb-accent);
  transform: translateY(-1px);
}
.cb-duel__card.is-selected {
  border-color: var(--cb-accent-bright);
  box-shadow: var(--glow-sm);
}
.cb-duel__card.is-seated {
  opacity: 0.55;
  border-style: dashed;
}
.cb-duel__card.is-ineligible {
  opacity: 0.4;
  cursor: default;
}
.cb-duel__card.is-ineligible:hover {
  border-color: var(--c-line);
  transform: none;
}
.cb-duel__card-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.cb-duel__card-pos {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--cb-accent);
}
.cb-duel__card-ovr {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--c-text);
  margin-left: auto;
}
.cb-duel__card-name {
  font-size: 0.75rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-duel__card-meta {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
}
.cb-duel__card-bit {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
}
.cb-duel__card-seated {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--cb-accent-bright);
}
.cb-duel__tag {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  padding: 0 var(--s-1);
  border-radius: var(--r-xs);
  border: var(--bw) solid var(--c-line-2);
  color: var(--c-text-3);
}
.cb-duel__tag[data-tag="boost"] { color: var(--c-ok); border-color: var(--c-ok); }
.cb-duel__tag[data-tag="flawed"] { color: var(--c-warn); border-color: var(--c-warn); }

.cb-duel__rules {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--s-3);
  border-top: var(--bw) solid var(--c-line);
}
.cb-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);
}
.cb-duel__rule {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--c-text-3);
}
.cb-duel__rule.is-ok {
  color: var(--c-ok);
}
.cb-duel__rule-mark {
  text-align: center;
}
.cb-duel__rule-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Holds a synergy blurb — a short sentence, so it gets more room than the
   rule details this block used to carry, and still truncates rather than
   wrapping the row to two lines. */
.cb-duel__rule-detail {
  color: var(--c-text-2);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-duel__rule.is-ok .cb-duel__rule-detail {
  color: var(--c-ok);
}

.cb-duel__run {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: var(--bw) solid var(--c-line);
}
.cb-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 cap overage message is the one hint that is an obstacle rather than a
   note — it says why the button under it will not move. */
.cb-duel__run-hint.is-bad {
  color: var(--c-bad);
}

/* ---------------- chips ---------------- */
.cb-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(--cb-grade-f);
}
.cb-duel__grade[data-grade="A"] { background: var(--cb-grade-a); }
.cb-duel__grade[data-grade="B"] { background: var(--cb-grade-b); }
.cb-duel__grade[data-grade="C"] { background: var(--cb-grade-c); }
.cb-duel__grade[data-grade="D"] { background: var(--cb-grade-d); }
.cb-duel__grade[data-grade="F"] { background: var(--cb-grade-f); }

/* ---------------- waiting ---------------- */
.cb-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);
}
.cb-duel__waiting-head {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  letter-spacing: 0.1em;
  color: var(--cb-accent);
}
.cb-duel__waiting-text {
  font-size: var(--fs-small);
  color: var(--c-text-2);
  max-width: 56ch;
}

/* ---------------- result ---------------- */
.cb-duel__result {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.cb-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;
}
.cb-duel__result.is-win .cb-duel__banner { border-color: var(--c-ok); }
.cb-duel__result.is-loss .cb-duel__banner { border-color: var(--c-bad); }
.cb-duel__banner-word {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  letter-spacing: 0.2em;
  color: var(--c-text);
}
.cb-duel__result.is-win .cb-duel__banner-word { color: var(--c-ok); }
.cb-duel__result.is-loss .cb-duel__banner-word { color: var(--c-bad); }
.cb-duel__banner-score {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--cb-accent-bright);
}
.cb-duel__banner-sub {
  font-size: var(--fs-small);
  color: var(--c-text-3);
}

.cb-duel__sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
.cb-duel__five {
  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);
}
.cb-duel__five-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);
}
.cb-duel__five-head strong {
  font-size: 1.125rem;
  color: var(--cb-accent-bright);
}
.cb-duel__five-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cb-duel__five-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--fs-small);
}
.cb-duel__five-slot {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--cb-accent);
}
.cb-duel__five-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-2);
}
.cb-duel__five-ovr {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--c-text);
}
/* ---------------- reveal: what nobody took ---------------- */
.cb-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);
}
.cb-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);
}
.cb-duel__left-head strong {
  font-size: 1.125rem;
  color: var(--c-text-2);
}
.cb-duel__left-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s-1) var(--s-4);
}
.cb-duel__left-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
}
.cb-duel__left-pos {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--cb-accent);
}
.cb-duel__left-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-3);
}
.cb-duel__left-ovr {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--c-text-2);
}

.cb-duel__result-note {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  color: var(--c-text-3);
}