/* ==========================================================================
   WarZone Conquer rankings page (Views/Ranking/Index.cshtml).
   Five boards in one tabs widget. In each board the podium leads and the
   table for places 4 to 100 follows. Everything is a glass panel over the key
   art: translucent surface tokens plus a blur, an ice and crimson frame on the
   champion, and the rank colours (--rank-1/2/3) kept for the places.
   Mobile is the base; tokens only.
   ========================================================================== */

.wz-rankings {
  padding-block: var(--space-10) var(--space-8);
}

.wz-rank-hero__time {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* The body carries a dark halo for text set straight on the art. The tabs,
   the podium cards, the table sheet and the empty board all have their own
   background, so their text stays crisp. */
.wz-rank-tabs .wz-tab,
.wz-rank-tabs .wz-tabs__list,
.wz-podium__place,
.wz-board__table-wrap,
.wz-board__empty {
  text-shadow: none;
}

/* ---------- Class glyph beside a class name ---------- */

.wz-class {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.wz-class__glyph {
  flex: none;
  font-size: var(--text-lg);
  color: var(--text-accent);
}

/* ---------- Board tabs ----------
   Phones: a two-column grid of glass tiles, so all five boards are in view
   with no hidden sideways scroll. 40rem: a 3 + 2 grid. 64rem: one glass strip.
   The selected board is marked in ice: crimson stays for the page's action. */

.wz-rank-tabs .wz-tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  overflow: visible;
  border-bottom: 0;
}

.wz-rank-tabs .wz-tab {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-inline-size: 0;
  min-block-size: var(--control-height-lg);
  padding: var(--space-3) var(--space-2);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  text-align: center;
  white-space: normal;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.wz-rank-tabs .wz-tab:last-child {
  grid-column: 1 / -1;
}

.wz-rank-tabs .wz-tab::after {
  content: none;
  background: var(--border-accent);
}

.wz-rank-tabs .wz-tab:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
}

.wz-rank-tabs .wz-tab:active {
  background: var(--surface-overlay);
}

.wz-rank-tabs .wz-tab[aria-selected='true'] {
  border-color: var(--border-accent);
  background: color-mix(in srgb, var(--border-accent) 16%, var(--surface-raised));
  color: var(--text-accent);
}

.wz-rank-tabs .wz-tab:disabled {
  border-color: var(--action-disabled-bg);
  background: transparent;
  color: var(--action-disabled-text);
}

@media (min-width: 40rem) {
  .wz-rank-tabs .wz-tabs__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .wz-rank-tabs .wz-tab {
    grid-column: span 2;
    flex-direction: row;
    gap: var(--space-2);
  }

  .wz-rank-tabs .wz-tab:nth-child(n + 4),
  .wz-rank-tabs .wz-tab:last-child {
    grid-column: span 3;
  }
}

@media (min-width: 64rem) {
  .wz-rank-tabs .wz-tabs__list {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    overflow-x: auto;
    border: var(--hairline) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-glass);
    -webkit-backdrop-filter: blur(var(--blur-glass));
    backdrop-filter: blur(var(--blur-glass));
  }

  .wz-rank-tabs .wz-tab,
  .wz-rank-tabs .wz-tab:nth-child(n + 4),
  .wz-rank-tabs .wz-tab:last-child {
    grid-column: auto;
  }

  .wz-rank-tabs .wz-tab {
    min-block-size: var(--control-height);
    padding: var(--space-2) var(--space-5);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: var(--text-md);
    white-space: nowrap;
  }

  .wz-rank-tabs .wz-tab::after {
    content: '';
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-1);
  }

  .wz-rank-tabs .wz-tab:hover {
    background: var(--surface-hover);
  }

  .wz-rank-tabs .wz-tab:active {
    background: var(--surface-overlay);
  }

  .wz-rank-tabs .wz-tab[aria-selected='true'] {
    background: color-mix(in srgb, var(--border-accent) 16%, var(--surface-raised));
  }
}

/* ---------- Board header ----------
   It sits straight on the art, so it carries the text glow.               */

.wz-board__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-end: var(--space-6);
  text-shadow: var(--text-glow);
}

.wz-board__title {
  font-size: var(--text-xl);
}

.wz-board__note {
  color: var(--text-secondary);
}

@media (min-width: 48rem) {
  .wz-board__head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
  }
}

/* ---------- Podium ----------
   DOM order is always 1, 2, 3, so a screen reader and a phone both meet the
   champion first. From 48rem the places are drawn 2, 1, 3 on rising steps.
   Rank is carried by the number in the medal and the word beside it; the
   rank colour only repeats it. The champion wears the ice to crimson frame.  */

.wz-podium {
  display: grid;
  gap: var(--space-3);
}

.wz-podium__place {
  --rank-color: var(--rank-3);
  --place-pad: var(--space-5);
  --medal-size: var(--space-12);
  --plinth: var(--space-3);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--place-pad);
  border: var(--hairline) solid color-mix(in srgb, var(--rank-color) 38%, var(--border-subtle));
  border-radius: var(--radius-md);
  background:
    radial-gradient(130% 80% at 100% 0%, color-mix(in srgb, var(--rank-color) 12%, transparent), transparent 70%),
    var(--surface-raised);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  overflow: hidden;
}

/* First place: a framed panel, hairline from lightning ice to blade crimson */
.wz-podium__place--1 {
  --rank-color: var(--rank-1);
  --place-pad: var(--space-6);
  --medal-size: var(--space-16);
  --plinth: var(--space-5);

  gap: var(--space-4);
  border-color: transparent;
  background:
    radial-gradient(130% 80% at 100% 0%, color-mix(in srgb, var(--rank-color) 16%, transparent), transparent 70%) padding-box,
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    var(--frame-edge) border-box;
  box-shadow: var(--shadow-raised);
}

.wz-podium__place--2 {
  --rank-color: var(--rank-2);
  --reveal-delay: calc(var(--duration-fast) * 1);
}

.wz-podium__place--3 {
  --reveal-delay: calc(var(--duration-fast) * 2);
}

/* The class glyph, large and faint, behind the card's copy */
.wz-podium__ghost {
  position: absolute;
  z-index: -1;
  inset-block-start: calc(var(--space-2) * -1);
  inset-inline-end: calc(var(--space-3) * -1);
  font-size: var(--glyph-lg);
  color: var(--rank-color);
  opacity: 0.14;
  pointer-events: none;
}

.wz-podium__place--1 .wz-podium__ghost {
  font-size: calc(var(--glyph-lg) * 1.4);
}

.wz-podium__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* The medal: a forged diamond drawn behind an upright number. The number is
   dark on the rank colour, because white on gold fails contrast. */
.wz-podium__medal {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--medal-size);
  block-size: var(--medal-size);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  line-height: 1;
  color: var(--surface-page);
}

.wz-podium__medal::before {
  content: '';
  position: absolute;
  inset: 15%;
  z-index: -1;
  border-radius: var(--radius-xs);
  background: var(--rank-color);
  transform: rotate(45deg);
}

.wz-podium__place--1 .wz-podium__medal {
  font-size: var(--text-2xl);
}

.wz-podium__rank {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--rank-color);
}

.wz-podium__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
  overflow-wrap: anywhere;
}

.wz-podium__place--1 .wz-podium__name {
  font-size: var(--text-xl);
}

/* A long name (the view sets the class past 11 letters) steps down a size, so
   a 15-letter name fits a 320px card on one line instead of breaking. */
.wz-podium__name--long {
  font-size: var(--text-base);
}

.wz-podium__place--1 .wz-podium__name--long {
  font-size: var(--text-lg);
}

.wz-podium__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
}

.wz-podium__fact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.wz-podium__fact dt {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.wz-podium__fact dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* The key stat sits on a sunken step that runs to the card's edges */
.wz-podium__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: auto calc(var(--place-pad) * -1) calc(var(--place-pad) * -1);
  padding: var(--plinth) var(--place-pad);
  border-top: var(--hairline) solid var(--border-subtle);
  background: linear-gradient(0deg, color-mix(in srgb, var(--rank-color) 10%, var(--surface-sunken)), var(--surface-sunken));
}

/* The champion's step glows with the blade's crimson */
.wz-podium__place--1 .wz-podium__stat {
  background: linear-gradient(0deg, color-mix(in srgb, var(--action-primary) 30%, var(--surface-sunken)), var(--surface-sunken));
}

.wz-podium__unit {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.wz-podium__value {
  min-inline-size: 0;
  margin-inline-start: auto;
  font-family: var(--font-label);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  color: var(--rank-color);
  overflow-wrap: anywhere;
}

.wz-podium__place--1 .wz-podium__value {
  font-size: var(--text-3xl);
}

/* Long figures (a Nobility donation in the billions) drop one step, so a
   narrow card never breaks a number in half. The view sets the class. */
.wz-podium__place--1 .wz-podium__value--long {
  font-size: var(--text-2xl);
}

@media (min-width: 30rem) {
  .wz-podium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The champion spans the row; a lone runner-up does too */
  .wz-podium__place--1,
  .wz-podium__place--2:last-child {
    grid-column: 1 / -1;
  }
}

/* The stepped podium needs room for three cards side by side, so it starts
   at 64rem. Between 30rem and 64rem the champion spans the row and the
   runners-up sit two across, which keeps every name on one line. */
@media (min-width: 64rem) {
  .wz-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--space-4);
  }

  .wz-podium__place {
    flex: 1 1 0;
    max-inline-size: calc(var(--container-form) * 0.8);
    align-items: center;
    padding-block-start: var(--space-8);
    text-align: center;
  }

  .wz-podium__place--1 {
    --plinth: var(--space-10);

    order: 2;
    flex-grow: 1.3;
    max-inline-size: var(--container-form);
    padding-block-start: var(--space-10);
  }

  .wz-podium__place--2 {
    --plinth: var(--space-6);

    order: 1;
  }

  .wz-podium__place--3 {
    --plinth: var(--space-4);

    order: 3;
  }

  .wz-podium__head {
    flex-direction: column;
    gap: var(--space-2);
  }

  .wz-podium__facts {
    justify-content: center;
  }

  .wz-podium__stat {
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-1);
  }

  .wz-podium__value {
    margin-inline-start: 0;
    text-align: center;
  }

  .wz-podium__place--2 .wz-podium__value,
  .wz-podium__place--3 .wz-podium__value {
    font-size: var(--text-2xl);
  }

  .wz-podium__place--2 .wz-podium__value--long,
  .wz-podium__place--3 .wz-podium__value--long {
    font-size: var(--text-xl);
  }
}

/* Fewer than three names: say so, quietly */
.wz-board__room {
  margin-block-start: var(--space-5);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--text-secondary);
  text-shadow: var(--text-glow);
}

/* ---------- Places 4 to 100 ----------
   Base (phone): base.css stacks each row into a labelled card. Here the
   place and the name share the first line, every other cell keeps its
   data-label. From 48rem it is a plain dense table on a glass sheet.      */

.wz-board__table-wrap {
  position: relative;
  margin-block-start: var(--space-8);
  background: var(--surface-base);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

.wz-board__table caption {
  border-bottom: var(--hairline) solid var(--border-subtle);
  font-family: var(--font-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.wz-board__table tbody tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
}

.wz-board__table td {
  grid-column: 1 / -1;
}

.wz-board__table .wz-board__rank,
.wz-board__table .wz-board__name {
  grid-column: auto;
}

.wz-board__table .wz-board__rank::before,
.wz-board__table .wz-board__name::before {
  content: none;
}

.wz-board__table .wz-board__rank {
  justify-content: center;
  min-inline-size: var(--space-10);
  padding: var(--space-1) var(--space-2);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-xs);
  font-family: var(--font-label);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.wz-board__table .wz-board__name {
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  overflow-wrap: anywhere;
}

.wz-board__table .wz-board__stat {
  font-weight: var(--weight-semibold);
  color: var(--text-accent);
}

@media (min-width: 48rem) {
  .wz-board__table tbody tr {
    display: table-row;
  }

  .wz-board__table th,
  .wz-board__table td {
    padding-block: var(--space-3);
  }

  .wz-board__table .wz-board__rank {
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: 0;
    text-align: right;
  }

  .wz-board__table .wz-board__rank-col {
    inline-size: var(--space-16);
  }
}

/* ---------- Empty board ---------- */

.wz-board__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-5);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  text-align: center;
}

.wz-board__empty-mark {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  inline-size: var(--space-16);
  block-size: var(--space-16);
  margin-block-end: var(--space-2);
  color: var(--text-accent);
}

.wz-board__empty-mark::before {
  content: '';
  position: absolute;
  inset: 15%;
  z-index: -1;
  border: var(--hairline) solid var(--border-accent);
  border-radius: var(--radius-xs);
  background: var(--status-info-surface);
  transform: rotate(45deg);
}

.wz-board__empty-title {
  max-inline-size: var(--measure-display);
  font-size: var(--text-xl);
}

.wz-board__empty-body {
  max-inline-size: var(--measure-lead);
  color: var(--text-secondary);
}

.wz-board__empty .wz-btn {
  margin-block-start: var(--space-3);
}