/* Clan wars: the wars list, trophies, the declare-war form (.cw-*) and the war view (.cwv-*). */
.cl-war-figures { display: flex; gap: 32px; }
.cl-war-figures b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--bronze-2); line-height: 1.1; }
.cl-war-figures span { font-size: 0.78rem; color: var(--ink-3); }
.cl-war-list { display: flex; flex-direction: column; gap: 8px; }
/* Two rows in the left column — the result with the date beneath it — while the clan
   name and the action span both. `display: contents` on .cl-war-body is what frees its children
   to take their own areas. */
.cl-war-item {
  display: grid; align-items: center;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "result name act"
    "sub    name act";
  gap: 2px 12px;
  padding: 11px 14px; border-radius: var(--radius-m);
  background: var(--bg-2); border: 1px solid var(--border);
}
.cl-war-item:hover { border-color: var(--border-strong); }
.cl-war-item .cl-war-result { grid-area: result; justify-self: center; align-self: end;
  font-size: 0.95rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.cl-war-body { display: contents; }
/* SCOPED to the row: `grid-area` unscoped would place anything else named .cl-war-opp. */
.cl-war-item .cl-war-opp { grid-area: name; min-width: 0;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-war-item .cl-war-sub { grid-area: sub; align-self: start; justify-self: center;
  display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-3); }
.cl-war-item .cl-war-score { font-weight: 700; color: var(--ink-2); }
.cl-war-item .cl-war-act { grid-area: act; }
.cl-war-item.is-win  .cl-war-score { color: var(--laurel-2); }
.cl-war-item.is-loss .cl-war-score { color: var(--porphyry-2); }
.cl-war-item.is-draw .cl-war-score { color: var(--ink-2); }
/* Commit right, its status text pushed left with it — the same edge the form actions use. */
.cwv-roster-save { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
/* The roster rules, outside the card and unmissable — an unpicked slot costs a board. */
.cwv-roster-warn {
  margin: 10px 0 0; padding: 10px 14px;
  font-size: 0.84rem; line-height: 1.45; color: var(--porphyry-2);
  background: color-mix(in srgb, var(--porphyry) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--porphyry) 35%, transparent);
  border-radius: var(--radius-m);
}
.cwv-roster-status { margin: 12px 0 0; font-size: 0.84rem; color: var(--ink-3); }
.cwv-roster-status.is-warn { color: var(--porphyry-2); font-weight: 600; }

/* Phone keeps the desktop three columns — one tight line, not three sparse ones — and only
   tightens the spacing. The clan name is the 1fr, so it ellipsises before anything wraps. */
@media (max-width: 640px) {
  .cl-war-item { gap: 1px 10px; padding: 9px 11px; }
  .cl-war-item .cl-war-result { font-size: 0.9rem; }
  .cl-war-item .cl-war-opp { font-size: 0.95rem; }
  .cl-war-item .cl-war-sub { font-size: 0.72rem; }
  .cl-war-item .cl-war-act { padding: 5px 11px; font-size: 0.8rem; }
}

/* A war with no score reads its state instead; dimmed so it never looks like a result. */
.cl-war-item .cl-war-cancelled,
.cl-war-item .cl-war-declined { color: var(--ink-4); font-weight: 500; font-style: italic; }

.cl-trophies { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cl-trophies li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 100px;
  background: var(--bg-2); border: 1px solid var(--border);
}
.cl-trophy-ico { font-size: 0.9rem; }
.cl-trophy-name { font-weight: 600; color: var(--ink); font-size: 0.85rem; }
.cl-trophy-season { font-size: 0.72rem; color: var(--ink-3); }

.cl-war-declare-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--bronze) 5%, transparent);
}
.cl-war-declare-row .btn { white-space: nowrap; }

.cl-war-create-err { color: var(--porphyry-2); font-size: 0.85rem; margin: 0; }

/* Declare war — the shared .create-* chrome (components/create-form.css) plus the pieces that
   are this form's own. */
/* Settings left, the one choice with no default on the right. The columns are independent, so
   the picker's list length never pushes the settings around. */
.cw-split {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 22px 32px; align-items: stretch;
}
.cw-opp-col, .cw-opp-col > .create-field, .cw-opp-pick { min-height: 0; }
.cw-opp-col { display: flex; }
.cw-opp-col > .create-field { flex: 1; }
/* Side by side, the picker is taken OUT of the grid's intrinsic sizing: its only child is
   absolute, so the column contributes no height and the row is as tall as the SETTINGS. Loading
   more clans then lengthens the scroll and never the card. Stacked (below), it is back in flow
   and the viewport cap does the same job. */
/* The complement of the reasoned 860 below — the two must move together. */
@media (min-width: 861px) {
  .cw-opp-col { position: relative; display: block; }
  .cw-opp-col > .create-field { position: absolute; inset: 0; display: flex; }
}
/* The anchor .field-info-pop measures from. Scoped, so the shared .create-field is untouched. */
.cw-create .create-field > label { position: relative; }

.cw-opp-pick { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cw-opp-search { display: flex; align-items: center; gap: 12px; }
.cw-opp-search .create-input { flex: 0 1 320px; }
/* flex-basis 0, not auto: an auto basis is the CONTENT height, so each Show more would push
   the box taller. At 0 the track is whatever the column left over, and the rows scroll inside it. */
.cw-opp-list {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 0; min-height: 150px; max-height: 60vh; overflow-y: auto; padding: 2px;
}
/* The form's own stacking edge — not the shared sheet's 640, because two columns stop fitting
   long before a single field does. Both directions live here, and .cw-opp-list must be set AFTER
   its base rule: same specificity, so source order decides. Stacked there is no column to fill,
   so the box is sized outright — still fixed, so Show more still only lengthens the scroll. */
@media (max-width: 860px) {
  .cw-split { grid-template-columns: 1fr; }
  .cw-opp-list { flex: 0 0 auto; height: min(46vh, 380px); max-height: none; }
}
.cw-opp-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--bg-1); color: inherit; font: inherit; cursor: pointer;
}
.cw-opp-row:hover { border-color: var(--bronze); background: color-mix(in srgb, var(--bronze) 8%, transparent); }
.cw-opp-cta { margin-left: auto; font-size: 0.8rem; color: var(--bronze-2); }
.cw-opp-empty { margin: 0; padding: 8px 2px; }
/* Outside the scroll box, so the way to load more is never something you scroll to find.
   The node STAYS when the list is exhausted, because the swap writes into it — so it is hidden
   outright: a zero-height flex item still costs the column's 10px gap. The template emits the
   wrapper with no whitespace inside, or :empty would never match. */
.cw-opp-more { display: none; }
.cw-opp-more:not(:empty) { display: flex; justify-content: center; padding-top: 2px; }
.cw-opp-picked {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--bronze) 8%, transparent);
  border: 1px solid var(--bronze);
}
.cw-opp-picked > .btn { margin-left: auto; }
.cw-opp-id { display: flex; flex-direction: column; min-width: 0; }
.cw-opp-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cwv { display: flex; flex-direction: column; gap: 16px; }
.cwv-head {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  background-image: radial-gradient(120% 100% at 50% 0, color-mix(in srgb, var(--bronze) 6%, transparent), transparent 60%);
}
.cwv-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cwv-title { min-width: 0; text-align: center; }
.cwv-clans { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cwv-clan { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.cwv-clan-a { color: var(--lapis-2); }
.cwv-clan-b { color: var(--porphyry-2); }
.cwv-vs-lg { color: var(--bronze); font-size: 1.1rem; }
.cwv-scoreband { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.cwv-scoreband b { font-size: 2rem; font-family: var(--font-mono); color: var(--ink); line-height: 1; }
.cwv-scoreband-sep { color: var(--ink-4); font-size: 1.4rem; }
.cwv-meta { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cwv-chip {
  padding: 3px 10px; border-radius: 100px; border: 1px solid var(--border);
  background: var(--bg-2); color: var(--ink-2);
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.cwv-chip.cwv-chip-decap {
  color: var(--porphyry-2);
  border-color: color-mix(in srgb, var(--porphyry-2) 45%, transparent);
  background: color-mix(in srgb, var(--porphyry-2) 12%, transparent);
}
.cwv-status { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-2); }
.cwv-status.cwv-active { color: var(--laurel); border-color: var(--laurel); }
.cwv-status.cwv-scheduled { color: var(--lapis-2); border-color: color-mix(in srgb, var(--lapis-2) 45%, transparent); }
.cwv-status.cwv-finished { color: var(--ink-3); }
.cwv-score { color: var(--ink); font-weight: 700; }
.cwv-empty { padding: 24px; text-align: center; }
/* The bracket is components/bracket.css (.bkt-*). Only the clan-specific additions live here:
   which clan a seat belongs to, and the losing-seat fade the tournament bracket has no use for. */
.bkt-seat.side-a { border-left: 3px solid var(--lapis-2); }
.bkt-seat.side-b { border-left: 3px solid var(--porphyry-2); }
.bkt-seat.is-lose { opacity: 0.55; }
.cwv-pill { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.62rem; font-weight: 700; color: var(--ink-3); }
.cwv-pill.live { color: var(--laurel); }
.cwv-pill.done { color: var(--ink-4); }


.cwv-roster h3 { margin: 0 0 6px; }
.cwv-roster-cols { display: flex; gap: 16px; flex-wrap: wrap; }
.cwv-roster-col { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cwv-roster-col-head {
  font-family: var(--font-display); font-weight: 600; padding: 4px 8px;
  border-left: 3px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cwv-roster-col.side-a-col .cwv-roster-col-head { border-left-color: var(--lapis-2); }
.cwv-roster-col.side-b-col .cwv-roster-col-head { border-left-color: var(--porphyry-2); }
.cwv-slot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cwv-slot-no { flex: 0 0 1.6em; text-align: right; color: var(--ink-4); font-size: 0.8rem; }
.cwv-slot-name {
  flex: 1; min-width: 0; padding: 6px 10px; border-radius: var(--radius-s);
  background: var(--bg-2); font-size: 0.9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cwv-slot-empty { color: var(--ink-4); font-style: italic; }
.cwv-slot-sel {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: var(--radius-s);
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--border);
  font: inherit; font-size: 0.9rem;
}
.cwv-slot-sel:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 1px; }

@media (max-width: 640px) {
  .cwv-head { gap: 10px; }
  .cwv-title { flex-basis: 100%; order: 3; }
  .cwv-title h2 { font-size: 1.3rem; }
}