/* God Power Rankings (/stats/power-rankings/) — page-specific design-system
   styles.

   The page is fully on the design system: `.ps-panel--engraved` + `.ps-table`
   for the table, the shared Stats hero, KPI strip and `.sov-*` cells. This
   sheet owns only what is specific to a rank-band table: the band column
   that spans the gods it groups, the interval bar on a shared axis, the
   change cell, and the stacked card layout below 760px so the nine columns
   never need a horizontal scroll at phone widths.

   Prefix `pwr-`. Requires ds_tokens.css, ds_patterns.css, ds_bridge.css and
   ds_stats_shared.css. */

.power-rankings-page {
  --pwr-band-even: rgba(255, 255, 255, 0.025);
  --pwr-band-odd: rgba(20, 34, 58, 0.34);
  --pwr-tie: rgba(213, 177, 101, 0.5);
}

/* ---------- hero reading key ---------- */

.pwr-key-list {
  margin: 0;
}

.pwr-key-list > div {
  display: grid;
  gap: 0.2rem;
}

.pwr-key-list dt {
  color: var(--gold-200);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pwr-key-list dd {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

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

.pwr-kpi {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ---------- band table ---------- */

/* Rows are shaded per *band*, not per row: the stripe boundary is the
   information. `.ps-table tbody tr:nth-child(even) td` is (0,2,3); these are
   (0,3,1) and load later, so the band shading wins. */
.pwr-table tbody tr.pwr-row--even td {
  background: var(--pwr-band-even);
}

.pwr-table tbody tr.pwr-row--odd td {
  background: var(--pwr-band-odd);
}

.pwr-table tbody tr:hover td {
  background: rgba(255, 236, 176, 0.07);
}

/* Inside a band the row rule fades; the band edge keeps the full rule. */
.pwr-table tbody tr:not(.pwr-row--band-last) td {
  border-bottom-color: rgba(213, 177, 101, 0.05);
}

.pwr-table tbody tr.pwr-row--band-last td {
  border-bottom: 1px solid rgba(213, 177, 101, 0.34);
}

.pwr-table tbody tr:last-child td {
  border-bottom: 0;
}

.pwr-table td {
  vertical-align: middle;
}

.pwr-col-band {
  width: 7.5rem;
}

.pwr-band {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.pwr-band strong {
  color: var(--gold-100);
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.pwr-band small {
  color: var(--text-soft);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Members after the first show a tie line down the band column so the eye
   reads one group; the label is repeated for screen readers only. */
.pwr-band--member {
  position: relative;
  min-height: 1.2rem;
}

.pwr-band-tie {
  display: block;
  width: 2px;
  height: 100%;
  min-height: 1.2rem;
  margin-left: 0.45rem;
  border-radius: 1px;
  background: var(--pwr-tie);
}

.pwr-row--band-first .pwr-band:not(.pwr-band--member) {
  position: relative;
}

.pwr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pwr-strength {
  color: var(--gold-100);
  font-family: var(--font-title);
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
}

.pwr-strength--over { color: var(--status-win); }
.pwr-strength--under { color: var(--status-loss); }

/* ---------- interval bar ---------- */

.pwr-col-interval {
  width: 16rem;
  min-width: 12rem;
}

/* Axis labels live in the header, on the same percentage scale as the bars. */
.pwr-axis {
  position: relative;
  display: block;
  height: 0.9rem;
  margin-top: 0.3rem;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-soft);
}

.pwr-axis i {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.pwr-interval {
  display: grid;
  gap: 0.25rem;
}

.pwr-interval-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
}

/* The 50 line: the "even" reference every bar is read against. */
.pwr-interval-track::before {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 1px;
  background: rgba(213, 177, 101, 0.7);
}

.pwr-interval-range {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: rgba(213, 177, 101, 0.42);
}

.pwr-interval-point {
  position: absolute;
  top: -2px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(5, 8, 18, 0.9);
  border-radius: var(--radius-pill);
  background: var(--gold-300);
  transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.pwr-interval--over .pwr-interval-range { background: rgba(124, 211, 143, 0.38); }
.pwr-interval--over .pwr-interval-point { background: var(--status-win); }
.pwr-interval--under .pwr-interval-range { background: rgba(239, 147, 125, 0.38); }
.pwr-interval--under .pwr-interval-point { background: var(--status-loss); }

.pwr-interval-text {
  color: var(--text-soft);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- change, play rate, raw ---------- */

.pwr-change {
  font-variant-numeric: tabular-nums;
}

.pwr-change--up { color: var(--status-win); }
.pwr-change--down { color: var(--status-loss); }

.pwr-change-rank {
  display: block;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.pwr-raw-games {
  display: block;
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 400;
}

.pwr-matchup--best .sov-ident-sub { color: var(--status-win); }
.pwr-matchup--worst .sov-ident-sub { color: var(--status-loss); }

.pwr-foot p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ---------- method ---------- */

.pwr-method {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pwr-method > article {
  padding: 0.95rem 1rem 1.05rem;
  border-right: 1px solid rgba(213, 177, 101, 0.18);
}

.pwr-method > article:last-child {
  border-right: 0;
}

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

.pwr-method p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.pwr-empty {
  gap: 0.6rem;
}

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

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

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

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

  .pwr-method > article:nth-child(2n) {
    border-right: 0;
  }

  .pwr-method > article:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(213, 177, 101, 0.18);
  }
}

@media (max-width: 1024px) {
  /* The two matchup columns are the least load-bearing; drop them before the
     table has to scroll on a tablet. They return in the stacked card. */
  .pwr-table .pwr-col-best,
  .pwr-table .pwr-col-worst {
    display: none;
  }
}

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

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

  .pwr-kpi > article:last-child {
    border-bottom: 0;
  }

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

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

  .pwr-method > article:last-child {
    border-bottom: 0;
  }

  /* Stacked card per god. The header row (with its axis) goes away; each
     cell carries its own label through `data-label`-free structure: the
     band and god share the top line, the interval bar spans the card, and
     the small facts sit in a two-column grid underneath. */
  .pwr-table,
  .pwr-table tbody,
  .pwr-table tr,
  .pwr-table td {
    display: block;
  }

  .pwr-table thead {
    display: none;
  }

  .pwr-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "band god strength"
      "interval interval interval"
      "facts facts facts";
    gap: 0.35rem 0.7rem;
    padding: 0.7rem 0.85rem;
  }

  /* Cell resets outrank the band shading and band-edge rules above
     ((0,3,1)), so inside a card the cells are plain and the card carries
     the band shading and the band edge instead. */
  .pwr-table tbody tr td,
  .pwr-table tbody tr.pwr-row--even td,
  .pwr-table tbody tr.pwr-row--odd td,
  .pwr-table tbody tr.pwr-row--band-last td,
  .pwr-table tbody tr:not(.pwr-row--band-last) td,
  .pwr-table tbody tr:hover td {
    padding: 0;
    border-bottom: 0;
    background: transparent;
  }

  .pwr-table tbody tr.pwr-row--band-last {
    border-bottom: 1px solid rgba(213, 177, 101, 0.34);
  }

  .pwr-table tbody tr:not(.pwr-row--band-last) {
    border-bottom: 1px solid rgba(213, 177, 101, 0.08);
  }

  .pwr-table tbody tr.pwr-row--even { background: var(--pwr-band-even); }
  .pwr-table tbody tr.pwr-row--odd { background: var(--pwr-band-odd); }
  .pwr-table tbody tr:last-child { border-bottom: 0; }

  .pwr-table .pwr-col-band { grid-area: band; width: auto; align-self: center; }
  .pwr-table .pwr-col-god { grid-area: god; align-self: center; }
  .pwr-table .pwr-col-strength { grid-area: strength; align-self: center; }
  .pwr-table .pwr-col-interval { grid-area: interval; width: auto; min-width: 0; }

  .pwr-table td.pwr-col-change,
  .pwr-table td.pwr-col-play,
  .pwr-table td.pwr-col-raw,
  .pwr-table td.pwr-col-best,
  .pwr-table td.pwr-col-worst {
    display: grid;
    align-content: start;
    gap: 0.1rem;
    text-align: left;
    white-space: normal;
  }

  .pwr-table td.pwr-col-strength {
    text-align: right;
  }

  /* The facts row: three small cells on one line under the bar, then the
     two matchups on their own lines. */
  .pwr-table .pwr-col-change { grid-area: 3 / 1 / 4 / 2; }
  .pwr-table .pwr-col-play { grid-area: 3 / 2 / 4 / 3; }
  .pwr-table .pwr-col-raw { grid-area: 3 / 3 / 4 / 4; }
  .pwr-table .pwr-col-best { grid-area: 4 / 1 / 5 / -1; }
  .pwr-table .pwr-col-worst { grid-area: 5 / 1 / 6 / -1; }

  /* Mobile labels, since the header row is gone. */
  .pwr-table .pwr-col-change::before,
  .pwr-table .pwr-col-play::before,
  .pwr-table .pwr-col-raw::before,
  .pwr-table .pwr-col-best::before,
  .pwr-table .pwr-col-worst::before {
    color: var(--text-soft);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .pwr-table .pwr-col-change::before { content: "Change"; }
  .pwr-table .pwr-col-play::before { content: "Play rate"; }
  .pwr-table .pwr-col-raw::before { content: "Raw win rate"; }
  .pwr-table .pwr-col-best::before { content: "Best matchup"; }
  .pwr-table .pwr-col-worst::before { content: "Worst matchup"; }

  .pwr-band--member .pwr-band-tie {
    width: 1.2rem;
    height: 2px;
    min-height: 0;
    margin: 0;
  }

  .pwr-band strong {
    font-size: 1rem;
  }

  .pwr-band small {
    display: none;
  }

  .pwr-change-rank {
    display: inline;
    margin-left: 0.3rem;
  }

  .pwr-interval-text {
    font-size: 0.7rem;
  }
}