/* ---------------------------------------------------------------------------
   Match presentation kit — hero, tabs, player cards, stat grids.

   Shared on purpose: the same player card and stat grid are used by the match
   page, the matches list and the profile header, so the numbers on this site
   always read the same way.

   Two rules hold the whole thing together:
     1. every figure is a .cw-fig — value on top, label under, tabular numerals
     2. figures sit in a .cw-figrow grid with hairline dividers between cells
   Everything else is spacing.
   --------------------------------------------------------------------------- */

/* ---- the figure primitive ------------------------------------------------ */
.cw-figrow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
}

.cw-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 6px;
  min-width: 0;
  position: relative;
}

/* hairline between cells, drawn on the cell so it never doubles up at the ends */
.cw-figrow > .cw-fig + .cw-fig::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--cw-border);
}

.cw-fig-v {
  font-family: var(--cw-font-display, inherit);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  color: var(--cw-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cw-fig-v.pos { color: var(--cw-good); }
.cw-fig-v.neg { color: var(--cw-bad); }
.cw-fig-v.mut { color: var(--cw-fg-dim); }
.cw-fig-v i { font-style: normal; font-weight: 600; color: var(--cw-fg-dim); margin: 0 1px; }

.cw-fig-l {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--cw-fg-dim);
  white-space: nowrap;
}

/* a lead figure — bigger, sits first in the row */
.cw-fig.is-lead { align-items: flex-start; padding-left: 13px; }
.cw-fig.is-lead .cw-fig-v { font-size: 21px; }
.cw-fig.is-lead .cw-fig-l { color: var(--cw-fg-2); }

/* ---- player card --------------------------------------------------------- */
.cw-pc {
  position: relative;
  display: block;
  border: 1px solid var(--cw-border);
  border-left: 3px solid var(--cw-border-2);
  border-radius: var(--cw-radius);
  background: var(--cw-bg-2);
  overflow: hidden;
  color: inherit;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.cw-pc:hover {
  transform: translateY(-1px);
  border-color: var(--cw-border-2);
  box-shadow: var(--cw-shadow);
}
.cw-pc--won  { border-left-color: var(--cw-good); }
.cw-pc--lost { border-left-color: var(--cw-bad); }
.cw-pc--draw, .cw-pc--open { border-left-color: var(--cw-border-2); }

/* stretched link: covers the card, sits under the clan tag so that stays live */
.cw-pc-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; text-indent: -9999px; overflow: hidden; }
.cw-pc-hit:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: -3px; }
.cw-pc .cw-clan-tag, .cw-pc-tags { position: relative; z-index: 2; }

.cw-pc-top { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }

/* cw_avatar_html() renders the cosmetic frame system (an equipped, paid
   cosmetic). Do not restyle it — size it and leave the artwork alone. The
   won/lost signal is already carried by the card's left border. */
.cw-pc-av { flex: none; display: block; line-height: 0; }
.cw-pc-av .cw-frame { display: block; }

.cw-pc-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.cw-pc-nm {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--cw-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-pc-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cw-pc-tag {
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .7px;
  line-height: 1.35;
}
.cw-pc-tag.cap  { color: var(--cw-ct);  background: color-mix(in srgb, var(--cw-ct) 15%, transparent); }
.cw-pc-tag.mvp  { color: var(--cw-gold, #ffaa00); background: rgba(255,170,0,.13); }
.cw-pc-tag.left { color: var(--cw-bad); background: color-mix(in srgb, var(--cw-bad) 14%, transparent); }

/* rank chip: emblem and rating read as one object, tinted by the tier */
.cw-pc-rank {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 6px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--cwp-c, var(--cw-fg-dim)) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--cwp-c, var(--cw-border)) 26%, transparent);
}
.cw-pc-rank b {
  font-size: 12px;
  font-weight: 800;
  color: var(--cwp-c, var(--cw-fg-2));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cw-pc-stats { border-top: 1px solid var(--cw-border); }
.cw-pc-career {
  border-top: 1px solid var(--cw-border);
  background: color-mix(in srgb, var(--cw-bg-3) 70%, transparent);
}
.cw-pc-career .cw-fig { padding: 7px 6px; }
.cw-pc-career .cw-fig-v { font-size: 13px; font-weight: 700; color: var(--cw-fg-2); }
.cw-pc-career .cw-fig-l { font-size: 8.5px; letter-spacing: .8px; }

/* ---- match hero ---------------------------------------------------------- */
.cw-mhero { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.cw-mhero-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 24px 26px;
  min-width: 0;
}
.cw-mhero-side.t  { align-items: flex-end;   text-align: right; background: linear-gradient(90deg,  color-mix(in srgb, var(--cw-t) 15%, transparent), transparent 88%); }
.cw-mhero-side.ct { align-items: flex-start; text-align: left;  background: linear-gradient(270deg, color-mix(in srgb, var(--cw-ct) 15%, transparent), transparent 88%); }
.cw-mhero-side::before { content: ""; position: absolute; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; }
.cw-mhero-side.t::before  { right: 0; background: var(--cw-t); }
.cw-mhero-side.ct::before { left: 0;  background: var(--cw-ct); }

.cw-mhero-hd { display: flex; align-items: center; gap: 9px; }
.cw-mhero-side.t .cw-mhero-hd { flex-direction: row-reverse; }
.cw-mhero-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.cw-mhero-side.t  .cw-mhero-tag { color: var(--cw-t); }
.cw-mhero-side.ct .cw-mhero-tag { color: var(--cw-ct); }
.cw-mhero-res {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  border: 1px solid transparent;
}
.cw-mhero-side.is-won  .cw-mhero-res { color: var(--cw-good); background: color-mix(in srgb, var(--cw-good) 14%, transparent); border-color: color-mix(in srgb, var(--cw-good) 40%, transparent); }
.cw-mhero-side.is-lost .cw-mhero-res { color: var(--cw-bad);  background: color-mix(in srgb, var(--cw-bad) 12%, transparent);  border-color: color-mix(in srgb, var(--cw-bad) 34%, transparent); }
.cw-mhero-side.is-draw .cw-mhero-res { color: var(--cw-fg-2); background: var(--cw-bg-3); border-color: var(--cw-border); }

.cw-mhero-name {
  font-family: var(--cw-font-display, inherit);
  font-size: 21px; font-weight: 800; line-height: 1.15;
  color: var(--cw-fg);
  overflow-wrap: anywhere;
}
.cw-mhero-abbr { display: none; font-family: var(--cw-font-display, inherit); font-size: 25px; font-weight: 800; line-height: 1; }
.cw-mhero-side.t  .cw-mhero-abbr { color: var(--cw-t); }
.cw-mhero-side.ct .cw-mhero-abbr { color: var(--cw-ct); }

/* roster strip — fills the plate with something useful instead of empty gradient */
.cw-mhero-roster { display: flex; align-items: center; }
.cw-mhero-roster .cw-frame {
  display: block;
  margin-left: -7px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--cw-bg-2);
}
.cw-mhero-roster .cw-frame:first-child { margin-left: 0; }
/* T plate is right-aligned, so the stack has to lean the other way */
.cw-mhero-side.t .cw-mhero-roster { flex-direction: row-reverse; }
.cw-mhero-side.t .cw-mhero-roster .cw-frame { margin-left: 0; margin-right: -7px; }
.cw-mhero-side.t .cw-mhero-roster .cw-frame:first-child { margin-right: 0; }

.cw-mhero-mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 22px 26px; min-width: 186px;
}
.cw-mhero-score {
  display: flex; align-items: baseline; gap: 11px;
  font-family: var(--cw-font-display, inherit);
  font-size: 50px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cw-mhero-score .t  { color: var(--cw-t); }
.cw-mhero-score .ct { color: var(--cw-ct); }
.cw-mhero-score .sep { color: var(--cw-fg-dim); font-size: 32px; }
.cw-mhero-score .t:not(.is-win), .cw-mhero-score .ct:not(.is-win) { opacity: .6; }
.cw-mhero-state { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cw-mhero-live  { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--cw-accent); }
.cw-mhero-ended { font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--cw-fg-dim); }
.cw-mhero-dur   { font-family: var(--cw-font-mono), monospace; font-size: 12px; color: var(--cw-fg-2); font-variant-numeric: tabular-nums; }

/* ---- tab bar ------------------------------------------------------------- */
.cw-mtabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 0 14px; }
.cw-mtabs-fmt {
  margin-right: 8px; padding: 7px 12px;
  border-radius: 8px;
  background: var(--cw-bg-3); border: 1px solid var(--cw-border);
  font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--cw-fg-2);
}
.cw-mtab {
  padding: 9px 18px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cw-fg-dim);
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .3px;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.cw-mtab:hover { color: var(--cw-fg); }
.cw-mtab:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; }
#cw-match-host[data-tab="overview"]   .cw-mtab[data-cw-tab="overview"],
#cw-match-host[data-tab="scoreboard"] .cw-mtab[data-cw-tab="scoreboard"] {
  color: var(--cw-fg); background: var(--cw-bg-3); border-color: var(--cw-border-2);
}
/* Overview is the default so the page is right before the script runs, and
   stays right if JS never loads at all. */
#cw-match-host .cw-mpanel[data-cw-panel="scoreboard"] { display: none; }
#cw-match-host[data-tab="scoreboard"] .cw-mpanel[data-cw-panel="overview"]  { display: none; }
#cw-match-host[data-tab="scoreboard"] .cw-mpanel[data-cw-panel="scoreboard"] { display: block; }

/* ---- overview layout ----------------------------------------------------- */
.cw-mteams { display: grid; grid-template-columns: 1fr minmax(232px, 296px) 1fr; gap: 16px; align-items: start; }
.cw-mteams-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cw-mteams-mid { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: 16px; }

.cw-mmap { position: relative; border-radius: var(--cw-radius-lg); overflow: hidden; border: 1px solid var(--cw-border); background: var(--cw-bg-3); }
.cw-mmap .cw-mapimg { width: 100%; height: auto; aspect-ratio: 4/3; border-radius: 0; box-shadow: none; }
.cw-mmap-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.92) 42%, transparent);
}
.cw-mmap-nm  { font-family: var(--cw-font-mono), monospace; font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.cw-mmap-sub { font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: rgba(255,255,255,.6); }

.cw-mfacts {
  display: flex; flex-direction: column; gap: 1px;
  margin: 0;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  overflow: hidden;
  background: var(--cw-border);
}
.cw-mfacts > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; background: var(--cw-bg-2); }
.cw-mfacts dt { font-size: 9.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--cw-fg-dim); }
.cw-mfacts dd { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--cw-fg); font-variant-numeric: tabular-nums; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-mmap-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- scoreboard trimmings ------------------------------------------------ */
.cw-sb-note { display: flex; align-items: center; margin: 0 2px 12px; font-size: 12px; color: var(--cw-fg-dim); }
.cw-sb-res {
  font-style: normal; margin-left: 8px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px;
}
.cw-sb-res.is-won  { color: var(--cw-good); background: color-mix(in srgb, var(--cw-good) 14%, transparent); }
.cw-sb-res.is-lost { color: var(--cw-bad);  background: color-mix(in srgb, var(--cw-bad) 12%, transparent); }
.cw-sb-res.is-draw { color: var(--cw-fg-2); background: var(--cw-bg-3); }
/* in the matches list the winner is a side, not a "you", so colour by side */
.cw-sb-res.is-t  { color: var(--cw-t);  background: color-mix(in srgb, var(--cw-t) 15%, transparent); }
.cw-sb-res.is-ct { color: var(--cw-ct); background: color-mix(in srgb, var(--cw-ct) 16%, transparent); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .cw-mteams { grid-template-columns: 1fr 1fr; }
  .cw-mteams-mid { grid-column: 1 / -1; order: -1; position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .cw-mteams-mid .cw-mmap   { flex: 0 0 208px; }
  .cw-mteams-mid .cw-mfacts { flex: 1; min-width: 208px; }
  .cw-mmap-links { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .cw-mteams { grid-template-columns: 1fr; }
  /* back to stretch — the 1080 rule pins align-items to flex-start for the
     side-by-side layout, which would leave the map card at its intrinsic width */
  .cw-mteams-mid { flex-direction: column; align-items: stretch; }
  .cw-mteams-mid .cw-mmap { flex: none; width: 100%; }
  .cw-mhero-side { padding: 16px 13px; gap: 7px; }
  .cw-mhero-name, .cw-mhero-roster { display: none; }
  .cw-mhero-abbr { display: block; }
  .cw-mhero-mid { min-width: 0; padding: 16px 8px; }
  .cw-mhero-score { font-size: 36px; gap: 7px; }
  .cw-mhero-score .sep { font-size: 23px; }
  .cw-fig { padding: 8px 4px; }
  .cw-fig-v { font-size: 15px; }
  .cw-fig.is-lead .cw-fig-v { font-size: 18px; }
  .cw-fig-l { font-size: 8.5px; letter-spacing: .6px; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-pc { transition: none; }
  .cw-pc:hover { transform: none; }
}

/* ---- team totals comparison ---------------------------------------------- */
.cw-mcmp {
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  background: var(--cw-bg-2);
  padding: 12px 13px 13px;
}
.cw-mcmp-h {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--cw-fg-dim);
  margin-bottom: 10px;
}
.cw-mcmp-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.cw-mcmp-row:last-child { margin-bottom: 0; }
.cw-mcmp-n {
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
}
.cw-mcmp-n.t  { color: var(--cw-t);  text-align: right; }
.cw-mcmp-n.ct { color: var(--cw-ct); text-align: left; }
.cw-mcmp-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--cw-bg-4, var(--cw-bg-3));
}
.cw-mcmp-bar i.t  { background: var(--cw-t);  transition: width .2s ease; }
.cw-mcmp-bar i.ct { background: color-mix(in srgb, var(--cw-ct) 78%, transparent); transition: width .2s ease; }
/* label sits under the bar, spanning the full row */
.cw-mcmp-l {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--cw-fg-dim);
  margin-top: -3px;
}
@media (prefers-reduced-motion: reduce) {
  .cw-mcmp-bar i.t, .cw-mcmp-bar i.ct { transition: none; }
}


/* ── Match actions ────────────────────────────────────────────────────────
   Sits between the hero and the tabs. One filled control (the demo), the
   rest outlined: a row where everything shouts is a row where nothing is
   found. Each control names what it gives you on the second line, so the
   label never has to do double duty. */
.cw-macts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}
.cw-mact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid var(--cw-border, #1c2230);
  background: var(--cw-bg-3, #12151b);
  color: var(--cw-fg, #eef2f8);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cw-mact span { display: flex; flex-direction: column; line-height: 1.25; }
.cw-mact b {
  font-family: var(--cw-font-display, inherit);
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
}
.cw-mact small { font-size: 11px; color: var(--cw-fg-2, #8595b3); }
.cw-mact svg { width: 20px; height: 20px; flex: 0 0 20px; }

.cw-mact:hover { border-color: var(--cw-accent, #6f8cf7); transform: translateY(-1px); }
.cw-mact:focus-visible { outline: 2px solid var(--cw-accent, #6f8cf7); outline-offset: 2px; }

.cw-mact.is-primary {
  background: var(--cw-accent, #6f8cf7);
  border-color: transparent;
  color: #06080c;
}
.cw-mact.is-primary small { color: rgba(6, 8, 12, .7); }
.cw-mact.is-primary:hover { filter: brightness(1.08); }

/* Not a control: a fact. It must not look clickable. */
.cw-mact.is-muted {
  background: transparent;
  border-style: dashed;
  color: var(--cw-fg-2, #8595b3);
  cursor: default;
}
.cw-mact.is-muted b { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cw-mact { transition: none; }
  .cw-mact:hover { transform: none; }
}
@media (max-width: 560px) {
  .cw-macts { gap: 8px; }
  .cw-mact { flex: 1 1 100%; }
}


/* ── Redesign: one page, no tabs ──────────────────────────────────────────
   Both panels are always shown. The data-tab rules above are left in place
   (harmless) and simply overridden here, so nothing breaks if the old JS
   still sets the attribute. */
#cw-match-host .cw-mpanel[data-cw-panel="scoreboard"],
#cw-match-host[data-tab="scoreboard"] .cw-mpanel[data-cw-panel="overview"],
#cw-match-host[data-tab="overview"]   .cw-mpanel[data-cw-panel="scoreboard"] { display: block; }

/* Section headings carry the structure the tabs used to. */
.cw-msec {
  font-family: var(--cw-font-display, inherit);
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cw-fg-2, #8595b3);
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cw-border, #1c2230);
}
.cw-mpanel[data-cw-panel="overview"] > .cw-msec:first-child { margin-top: 4px; }

/* The map, under the score. Quiet: the score is the headline, this is the
   caption to it. */
.cw-mhero-map {
  font-family: var(--cw-font-display, inherit);
  font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cw-fg-2, #8595b3);
  margin-top: 2px;
}

/* ── Player card: give the match figure the weight ─────────────────────── */
.cw-pc-stats .cw-fig.is-lead .cw-fig-v { font-size: 26px; line-height: 1.05; }
.cw-pc-stats .cw-fig:not(.is-lead) .cw-fig-v { font-size: 15px; }
.cw-pc-stats .cw-fig-l { font-size: 10px; letter-spacing: .06em; }

/* Career is context, not headline: smaller, dimmer, and fenced off. */
.cw-pc-career {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--cw-border, #1c2230);
  opacity: .78;
}
.cw-pc-career .cw-fig-v { font-size: 13px; font-weight: 600; }
.cw-pc-career .cw-fig-l { font-size: 9px; }

/* ── Rating: draw the progress through the tier ────────────────────────── */
.cw-pc-rankbar {
  display: block;
  width: 100%; height: 3px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--cw-border, #1c2230);
  overflow: hidden;
}
.cw-pc-rankbar > i {
  display: block; height: 100%;
  border-radius: 2px;
  background: var(--cwp-c, var(--cw-accent, #6f8cf7));
  box-shadow: 0 0 6px var(--cwp-glow, transparent);
}

@media (max-width: 560px) {
  .cw-pc-stats .cw-fig.is-lead .cw-fig-v { font-size: 22px; }
  .cw-msec { margin-top: 20px; }
}