/* Shared design-system vocabulary for the Stats screens.

   The `sov-` prefix ("stats view") covers what every migrated stats screen
   needs: the hero scope panel, the KPI strip, panel intro/footer strips,
   the action button, numeric table alignment, the identity cell and the
   win-rate reference bar. The mockups carried these as inline `style`
   attributes; they are named classes here so the templates stay readable
   and six screens share one definition.

   Page-specific classes live in their own file next to this one
   (ds_god_stats.css and friends) and use their own prefix.

   Requires ds_tokens.css, ds_patterns.css, ds_bridge.css. */

/* ---------- page rhythm ---------- */

/* The explicit minmax(0, 1fr) column matters: a bare `display: grid` sizes its
   implicit column to max-content, so one wide child (a nowrap KPI value, a
   filter bar, a table) pushes every sibling past the page gutter and the body
   scrolls sideways. */
.sov-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 2vw, 2rem);
}

/* ---------- hero ---------- */

/* The hero's left column. `minmax(0, 1fr)` on `.ps-phero-split` only bounds
   the grid track; without an explicit `min-width: 0` the column's own content
   (a nowrap chip row, a long clan name) still sets an auto minimum and pushes
   the scope panel out of the well. */
.sov-hero-main {
  min-width: 0;
}

.sov-hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ps-chip.sov-chip--scope {
  border-color: rgba(213, 177, 101, 0.45);
  color: var(--gold-200);
}

.sov-hero-meta {
  margin: 0.9rem 0 0;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.82rem;
}

/* Scope & Search — the filter form, moved into the hero's right column. */

.sov-scope {
  width: 352px;
  max-width: 100%;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 231, 158, 0.05), rgba(0, 0, 0, 0.14)),
    rgba(10, 17, 32, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.1);
}

.sov-scope-band {
  padding: 0.5rem 0.8rem;
  background: rgba(20, 34, 58, 0.9);
  border-bottom: 1px solid rgba(213, 177, 101, 0.34);
  color: var(--gold-100);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sov-scope-body {
  display: grid;
  gap: 0.85rem;
  padding: 0.95rem 0.8rem 1rem;
}

.sov-field {
  display: grid;
  gap: 0.34rem;
  min-width: 0;
}

.sov-field > span,
.sov-field-label {
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sov-field input[type="search"],
.sov-field input[type="number"],
.sov-field input[type="text"],
.sov-field select {
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(213, 177, 101, 0.34);
  border-radius: 4px;
  background: rgba(5, 8, 18, 0.85);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.sov-field input[type="number"] {
  font-variant-numeric: tabular-nums;
}

.sov-field-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.sov-scope-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(213, 177, 101, 0.4), rgba(213, 177, 101, 0.06));
}

.sov-scope-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 0.6rem;
}

.sov-scope-apply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
}

.sov-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
}

.sov-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--gold-400);
}

/* The stats subnav sits in the hero's full-width footer rail. */
.sov-hero-rail {
  position: relative;
  z-index: 1;
  margin: 0 clamp(1.9rem, 3.4vw, 3rem);
  padding-bottom: 1.1rem;
}

/* ---------- KPI strip ---------- */

.sov-kpi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sov-kpi > article {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.95rem 1rem;
  border-right: 1px solid rgba(213, 177, 101, 0.18);
}

.sov-kpi > article:last-child {
  border-right: 0;
}

.sov-kpi-label {
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Long god names (QUETZALCOATL, SHENNONG) shrink to fit rather than wrapping
   or truncating -- the brief calls for one line, whole word. */
.sov-kpi-value {
  color: #fff6dd;
  font-family: var(--font-title);
  font-size: 1.62rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.sov-kpi-value--name {
  font-size: clamp(1rem, 1.5vw, 1.42rem);
}

.sov-kpi-note {
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.sov-kpi-note--gain {
  color: var(--status-win);
}

.sov-kpi-ident {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.sov-kpi-ident img.sov-god-chip {
  width: 26px;
  height: 26px;
}

/* A panel band that also carries a right-aligned result count.

   The engraved band is already a flex row whose `::before` diamond is its
   first item, so `justify-content: space-between` would spread three items and
   strand the label in the middle. Pushing the meta right with an auto margin
   leaves the diamond and the label where they belong. */
.sov-band-meta {
  margin-left: auto;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- shared icon chips ---------- */

.sov-god-chip {
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid rgba(213, 177, 101, 0.55);
  border-radius: var(--radius-pill);
  object-fit: cover;
}

/* Placeholder for gods whose round icon the repo does not ship yet. */
.sov-god-chip--placeholder {
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: rgba(213, 177, 101, 0.5);
  background: rgba(20, 34, 58, 0.9);
  color: var(--gold-300);
  font-family: var(--font-title);
  font-size: 0.7rem;
}

.sov-map-chip {
  width: 34px;
  height: 24px;
  flex: none;
  border: 1px solid rgba(213, 177, 101, 0.5);
  border-radius: 3px;
  object-fit: cover;
}

/* ---------- panel furniture ---------- */

.sov-panel-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(213, 177, 101, 0.18);
}

.sov-panel-intro p {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Footnotes get their own strip instead of colliding with the last row. */
.sov-panel-foot {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(213, 177, 101, 0.18);
  background: rgba(10, 17, 32, 0.42);
}

/* Panel feet that carry a control row -- pagination, page jump -- lay it out
   themselves. Borrowing `.leaderboards-pagination` for the flex also imported
   its `margin-top`, which reads as a gap inside the foot's own border. */
.sov-panel-foot--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
}

.sov-panel-foot p {
  margin: 0;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
}

.sov-panel-foot p + p {
  margin-top: 0.4rem;
}

.sov-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(226, 184, 94, 0.48);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 231, 158, 0.07), rgba(0, 0, 0, 0.16)),
    rgba(6, 14, 27, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 176, 0.04), 0 14px 30px rgba(0, 0, 0, 0.28);
  color: #fff2c8;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--ease-standard), border-color var(--ease-standard),
    background var(--ease-standard), box-shadow var(--ease-standard);
}

/* Icon_Find.png is a 64px sprite; without a size it renders at native scale. */
.sov-action img {
  width: 1rem;
  height: 1rem;
  flex: none;
  object-fit: contain;
}

.sov-action:hover,
.sov-action:focus-visible {
  border-color: rgba(255, 220, 130, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 226, 142, 0.16), rgba(80, 48, 12, 0.16)),
    rgba(15, 22, 32, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 176, 0.08), var(--glow-gold-soft);
  color: #fff2c8;
  transform: translateY(-2px);
}

/* ---------- tables ---------- */

.sov-table-wrap {
  overflow-x: auto;
}

/* Numeric columns read as numbers: right-aligned, tabular, never wrapped. */
.ps-table td.sov-num,
.ps-table th.sov-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ps-table td.sov-num {
  color: #fff6dd;
}

/* The god cell is a real two-column grid, so the portrait can never overlap
   the label or the meta line beneath it. */
.sov-ident {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.sov-ident-name {
  min-width: 0;
  color: #fff6dd;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sov-ident-sub {
  display: block;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Win rate carries a 50% reference bar so "above or below even" is visible
   without reading the digits. */
.sov-wr {
  display: grid;
  gap: 0.28rem;
  justify-items: end;
}

.sov-wr-bar {
  position: relative;
  width: 74px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.09);
}

.sov-wr-bar::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  background: rgba(213, 177, 101, 0.65);
}

.sov-wr-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--gold-400);
}

.sov-wr-fill--over {
  background: var(--status-win);
}

.sov-wr-fill--under {
  background: var(--status-loss);
}

.sov-trend-stable {
  color: var(--text-soft);
}

.sov-trend-muted {
  color: var(--text-soft);
  font-style: italic;
}

/* ---------- notable matchups ---------- */

/* "Why this row is listed" is its own labelled column rather than a caption
   stacked above the matchup. */
.sov-reason {
  color: var(--gold-200);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sov-matchup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.sov-matchup-side {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.sov-matchup-vs {
  flex: none;
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* A single percentage is ambiguous about whose it is; the split names both
   sides explicitly. */
.sov-split {
  display: grid;
  gap: 0.26rem;
  min-width: 132px;
}

.sov-split-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  font-size: 0.82rem;
}

.sov-split-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sov-split-pct {
  font-variant-numeric: tabular-nums;
}

.sov-split-row--winner .sov-split-name,
.sov-split-row--winner .sov-split-pct {
  color: var(--status-win);
  font-weight: 700;
}

/* ---------- recent matches ---------- */

/* One fixed field order on every row: map, matchup, mode/when, length, why,
   replay. Nothing floats to an inconsistent position. */
.sov-match {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(213, 177, 101, 0.14);
  color: inherit;
}

.sov-match:last-child {
  border-bottom: 0;
}

a.sov-match:hover,
a.sov-match:focus-visible {
  background: rgba(255, 236, 176, 0.07);
  color: inherit;
}

.sov-match-map {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  width: 84px;
}

.sov-match-map img {
  width: 84px;
  height: 48px;
  border: 1px solid rgba(213, 177, 101, 0.4);
  border-radius: 3px;
  object-fit: cover;
}

.sov-match-map span {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-align: center;
}

.sov-match-body {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.sov-match-teams {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.sov-match-team {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.sov-match-player {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
}

.sov-match-player img {
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid rgba(213, 177, 101, 0.4);
  border-radius: var(--radius-pill);
  object-fit: cover;
  opacity: 0.55;
}

/* Winning side: brighter portrait with a gold ring, plus an explicit W. */
.sov-match-team--win .sov-match-player img {
  border-color: var(--gold-300);
  box-shadow: 0 0 10px rgba(232, 196, 111, 0.45);
  opacity: 1;
}

.sov-match-team--win .sov-match-name {
  color: #fff6dd;
  font-weight: 700;
}

.sov-match-team--loss .sov-match-name {
  color: var(--text-soft);
}

.sov-match-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sov-match-mark {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
}

.sov-match-mark--win {
  background: rgba(124, 211, 143, 0.16);
  color: var(--status-win);
}

.sov-match-mark--loss {
  background: rgba(239, 147, 125, 0.14);
  color: var(--status-loss);
}

.sov-match-vs {
  flex: none;
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sov-match-meta {
  color: var(--text-soft);
  font-size: 0.78rem;
}

.sov-match-reason {
  color: var(--gold-200);
  font-size: 0.78rem;
}

.sov-match-tail {
  display: grid;
  justify-items: end;
  gap: 0.3rem;
  text-align: right;
}

.sov-match-duration {
  color: var(--text-primary);
  font-family: var(--font-title);
  font-size: 1.02rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.sov-match-chevron {
  color: var(--gold-300);
  font-size: 1.1rem;
  line-height: 1;
}

/* ---------- player activity ---------- */

.sov-activity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sov-activity > section {
  padding: 0.9rem 1rem 1rem;
  border-right: 1px solid rgba(213, 177, 101, 0.18);
}

.sov-activity > section:last-child {
  border-right: 0;
}

.sov-activity h3 {
  margin: 0 0 0.6rem;
  color: var(--gold-200);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sov-activity-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(213, 177, 101, 0.1);
}

.sov-activity-row:last-child {
  border-bottom: 0;
}

.sov-activity-row img {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(213, 177, 101, 0.45);
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.sov-activity-row > span {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.sov-activity-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sov-activity-row small {
  color: var(--text-soft);
  font-size: 0.74rem;
}

.sov-activity-row em {
  color: var(--gold-100);
  font-family: var(--font-title);
  font-size: 1rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.sov-activity-empty {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.84rem;
}

/* ---------- coverage + destinations ---------- */

.sov-coverage {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sov-coverage > article {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.95rem 1rem;
  border-right: 1px solid rgba(213, 177, 101, 0.18);
}

.sov-coverage > article:last-child {
  border-right: 0;
}

.sov-destinations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-card-grid);
}

.sov-destination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform var(--ease-standard), border-color var(--ease-standard),
    box-shadow var(--ease-standard);
}

.sov-destination:hover,
.sov-destination:focus-visible {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-soft), var(--glow-gold-soft);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.sov-destination strong {
  color: var(--gold-300);
  font-size: 1.2rem;
  line-height: 1;
}

.sov-empty {
  display: grid;
  gap: 0.3rem;
  padding: 1.2rem 1rem;
  color: var(--text-muted);
}

.sov-empty strong {
  color: var(--text-primary);
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .sov-kpi,
  .sov-coverage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sov-kpi > article:nth-child(3n),
  .sov-coverage > article:nth-child(3n) {
    border-right: 0;
  }

  .sov-destinations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sov-activity {
    grid-template-columns: minmax(0, 1fr);
  }

  .sov-activity > section {
    border-right: 0;
    border-bottom: 1px solid rgba(213, 177, 101, 0.18);
  }

  .sov-activity > section:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .sov-kpi,
  .sov-coverage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sov-kpi > article,
  .sov-coverage > article {
    border-right: 0;
    border-bottom: 1px solid rgba(213, 177, 101, 0.18);
  }

  .sov-scope {
    width: 100%;
  }

  .sov-panel-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .sov-match {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sov-match-tail {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }

  .sov-destinations {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sov-action,
  .sov-destination {
    transition: none;
  }

  .sov-action:hover,
  .sov-action:focus-visible,
  .sov-destination:hover,
  .sov-destination:focus-visible {
    transform: none;
  }
}