/* ==========================================================================
   WarZone Conquer content pages.
   Download, donate, payment results, purchase history and the three legal
   pages. They all sit on the key art: every block of copy lives on a glass
   panel (the translucent surface tokens plus a blur) so the wallpaper shows
   through at the edges and the text stays readable. Crimson is the one
   primary action of each page; ice marks eyebrows, links and highlights.
   Built on tokens.css and base.css only: no raw colour, size or timing.
   Mobile is the base; wider screens are layered on with min-width.
   ========================================================================== */

/* ---------- Page body: the content between the hero and the footer ---------- */

.wz-pg {
  --panel-pad: var(--space-5);
  padding-block-start: var(--space-12);
}

/* Phones: buttons and panels run tighter, and a long label wraps (or, as a
   last resort at large text sizes, breaks) instead of pushing the page wide. */
.wz-pg .wz-btn {
  padding-inline: var(--space-4);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: var(--leading-snug);
}

.wz-pg .wz-panel {
  padding: var(--panel-pad);
}

/* A long word in a display heading breaks rather than overflows a phone */
.wz-pg h2,
.wz-pg h3 {
  overflow-wrap: break-word;
}

/* Grid children may shrink below their content's widest word */
.wz-dl > *,
.wz-donate > *,
.wz-result > * {
  min-width: 0;
}

/* Glass: the panels blur the art behind them. A panel nested in another
   panel does not blur again; it only needs a darker well to read as inset. */
.wz-pg .wz-panel,
.wz-pg .wz-empty,
.wz-toc,
.wz-legal-end,
.wz-legal .wz-prose {
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

.wz-pg .wz-panel .wz-table-wrap {
  background: var(--surface-sunken);
}

/* The body carries a dark halo for text set straight on the art. Every
   surface here has its own background, so its text stays crisp. */
.wz-pg .wz-empty,
.wz-pg .wz-table-wrap,
.wz-mirror,
.wz-pay__account,
.wz-claim__figure,
.wz-toc,
.wz-legal .wz-prose,
.wz-legal-end {
  text-shadow: none;
}

/* Stacked table rows: the label keeps its width, the value takes the rest */
.wz-pg .wz-table td::before {
  flex: none;
}

.wz-cell {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: end;
}

.wz-pg code {
  padding: 0 var(--space-1);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* Section heading block used above lists and tables */
.wz-pg-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.wz-pg-head__note {
  color: var(--text-muted);
}

/* A short line of text with a leading icon */
.wz-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.wz-note .wz-icon {
  margin-top: var(--space-1);
  color: var(--text-accent);
}

@media (min-width: 30rem) {
  .wz-pg {
    --panel-pad: var(--space-6);
  }

  .wz-pg .wz-btn {
    padding-inline: var(--space-6);
  }

  .wz-pg .wz-btn--lg {
    padding-inline: var(--space-8);
  }

  .wz-pg .wz-btn--sm,
  .wz-pg .wz-btn--ghost {
    padding-inline: var(--space-4);
  }
}

@media (min-width: 48rem) {
  .wz-pg {
    --panel-pad: var(--space-8);
    padding-block-start: var(--space-16);
  }
}

/* ---------- Empty state ----------
   Owns its space: a forged diamond, a title, one sentence, one action.   */

.wz-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-6);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

.wz-panel .wz-empty {
  padding-inline: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.wz-empty__mark {
  display: grid;
  place-items: center;
  inline-size: var(--space-12);
  block-size: var(--space-12);
  margin: var(--space-2);
  border: var(--hairline) solid var(--border-accent);
  border-radius: var(--radius-xs);
  background: var(--status-info-surface);
  color: var(--text-accent);
  transform: rotate(45deg);
}

.wz-empty__mark .wz-icon {
  transform: rotate(-45deg);
}

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

.wz-empty__body {
  max-width: var(--measure-lead);
  color: var(--text-secondary);
}

@media (min-width: 48rem) {
  .wz-empty {
    justify-items: center;
    padding: var(--space-16) var(--space-12);
    text-align: center;
  }

  .wz-panel .wz-empty {
    padding-block: var(--space-8);
  }
}

/* ---------- Download ----------
   The mirror list leads and carries the page's one primary action (the first
   file). The steps and the help block sit below it.                       */

.wz-dl {
  display: grid;
  gap: var(--space-8);
}

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

.wz-mirror {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

/* The first file is the recommended one: an ice hairline marks it */
.wz-mirror:first-child {
  border-color: color-mix(in srgb, var(--border-accent) 55%, transparent);
}

.wz-mirror:hover,
.wz-mirror:focus-within {
  border-color: var(--border-accent);
  background: var(--surface-overlay);
}

.wz-mirror__icon {
  display: grid;
  place-items: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  border: var(--hairline) solid var(--border-accent);
  border-radius: var(--radius-sm);
  background: var(--status-info-surface);
  color: var(--text-accent);
}

.wz-mirror__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.wz-mirror__name {
  font-family: var(--font-label);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  color: var(--text-heading);
  overflow-wrap: anywhere;
}

.wz-mirror__action {
  grid-column: 1 / -1;
  inline-size: 100%;
}

.wz-dl__hint {
  margin-top: var(--space-5);
}

/* The calm fallback: on a phone its action runs full width, on a wider
   screen it sits at the left at its natural size. */
@media (min-width: 30rem) {
  .wz-dl__fallback {
    align-items: flex-start;
  }
}

.wz-dl__aside {
  display: grid;
  gap: var(--space-8);
  align-content: start;
}

.wz-dl__steps .wz-pg-head {
  margin-bottom: var(--space-6);
}

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

.wz-step__action {
  margin-top: var(--space-3);
}

.wz-step__done {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--status-success-text);
  overflow-wrap: anywhere;
}

.wz-help-block {
  display: grid;
  gap: var(--space-4);
  overflow: hidden;
}

.wz-help-block p {
  color: var(--text-secondary);
}

/* Two outlined actions, one under the other, each the full width of the block */
.wz-help-block .wz-cluster {
  flex-direction: column;
  align-items: stretch;
}

/* The resting warrior runs to the panel's edges above the copy */
.wz-help-block__art {
  margin: calc(var(--panel-pad) * -1) calc(var(--panel-pad) * -1) var(--space-2);
  aspect-ratio: 16 / 7;
  border-radius: 0;
}

@media (min-width: 40rem) {
  .wz-mirror {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .wz-mirror__action {
    grid-column: auto;
    inline-size: auto;
  }
}

@media (min-width: 64rem) {
  /* The file list runs the full width and leads; the steps and the help
     block share one row beneath it, so neither column is left hanging. */
  .wz-dl__aside {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: stretch;
  }
}

/* ---------- Donate ----------
   The PayPal panel leads on every screen size. From 64rem it runs the full
   width as a checkout bar (the words on the left, the form on the right), and
   the coin rates and the steps share the row beneath it at about the same
   height, so no column is left hanging. The coin table is only three short
   columns, so it stays a table on phones. */

.wz-donate {
  display: grid;
  gap: var(--space-8);
}

.wz-rates thead {
  position: static;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip: auto;
}

.wz-rates tr {
  display: table-row;
  padding: 0;
}

.wz-rates th,
.wz-rates td {
  display: table-cell;
  padding: var(--space-3);
  text-align: right;
  vertical-align: middle;
}

.wz-rates th:first-child,
.wz-rates td:first-child {
  text-align: left;
  padding-inline-start: var(--space-4);
}

.wz-rates th:last-child,
.wz-rates td:last-child {
  padding-inline-end: var(--space-4);
}

.wz-rates td::before {
  content: none;
}

.wz-rates th {
  background: var(--surface-raised);
  border-bottom: var(--hairline) solid var(--border-default);
  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-rates td {
  font-size: var(--text-base);
}

.wz-rates .wz-cell {
  text-align: inherit;
}

.wz-rates td:first-child {
  font-family: var(--font-label);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.wz-rates tbody tr:hover {
  background: var(--surface-raised);
}

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

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

.wz-donate__note {
  margin-top: var(--space-4);
}

.wz-pay {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.wz-pay__form {
  min-width: 0;
}

.wz-pay__title {
  margin-top: var(--space-3);
  font-size: var(--text-2xl);
}

.wz-pay__account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.wz-pay__account .wz-icon {
  color: var(--text-accent);
}

.wz-pay__account strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.wz-pay__amount {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Loading keeps the crimson face while the button is disabled, so the
   spinner stays visible against it instead of sinking into the disabled grey. */
.wz-btn.wz-pay__submit[aria-busy='true'],
.wz-btn.wz-pay__submit[aria-busy='true']:disabled {
  --btn-bg: var(--action-primary-active);
  --btn-bg-hover: var(--action-primary-active);
  --btn-bg-active: var(--action-primary-active);
  --btn-border: transparent;
  --btn-spinner: var(--text-on-accent);
}

.wz-donate__links {
  --cluster-gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (min-width: 64rem) {
  .wz-donate {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      'pay pay'
      'rates after';
    column-gap: var(--space-8);
    row-gap: var(--space-8);
    align-items: stretch;
  }

  .wz-donate__pay {
    grid-area: pay;
  }

  .wz-donate__rates {
    grid-area: rates;
  }

  .wz-donate__after {
    grid-area: after;
  }

  /* The checkout bar: title, account note and fine print on the left, the
     form in a form-width column on the right, centred against them. */
  .wz-pay {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--container-form));
    grid-template-areas:
      'head form'
      'account form'
      'note form';
    column-gap: var(--space-16);
    row-gap: var(--space-6);
    align-items: start;
  }

  .wz-pay__head {
    grid-area: head;
  }

  .wz-pay__account {
    grid-area: account;
  }

  .wz-pay__note {
    grid-area: note;
  }

  .wz-pay__form {
    grid-area: form;
    align-self: center;
  }

  .wz-rates th,
  .wz-rates td {
    padding: var(--space-4) var(--space-5);
  }
}

/* ---------- Payment results: success and cancel ---------- */

.wz-result {
  display: grid;
  gap: var(--space-8);
}

.wz-result__panel {
  display: grid;
  gap: var(--space-5);
  overflow: hidden;
}

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

/* The resting pair runs to the panel's edges above the copy */
.wz-result__art {
  margin: calc(var(--panel-pad) * -1) calc(var(--panel-pad) * -1) var(--space-2);
  aspect-ratio: 16 / 7;
  border-radius: 0;
}

.wz-result__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wz-claim {
  display: grid;
  gap: var(--space-8);
}

.wz-claim__figure {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.wz-claim__figure figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  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-accent);
}

.wz-claim__body {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

@media (min-width: 30rem) {
  .wz-result__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .wz-result__art {
    aspect-ratio: 21 / 8;
  }
}

@media (min-width: 40rem) {
  .wz-claim {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- Purchase history ---------- */

.wz-history-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

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

/* Seven columns can outgrow a tablet; scroll inside the frame, never the page */
.wz-history__wrap {
  overflow-x: auto;
}

.wz-history__invoice {
  font-family: var(--font-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-heading);
}

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

.wz-history-foot {
  margin-top: var(--space-6);
}

/* In the table layout the short columns stay on one line; the payer and the
   payment id are the two that wrap. */
@media (min-width: 48rem) {
  .wz-history th,
  .wz-history td:first-child,
  .wz-history td:nth-child(n + 4) {
    white-space: nowrap;
  }

  .wz-history td:nth-child(2),
  .wz-history td:nth-child(3) {
    min-inline-size: calc(var(--space-32) * 1.5);
  }
}

@media (min-width: 40rem) {
  .wz-history-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- Legal pages: terms, payment policy, cookie policy ----------
   One reading column at prose measure. The contents list, the article and
   the closing block are each a glass panel, so long-form copy never sits
   straight on the art, and all three share the same left and right edge.  */

.wz-legal {
  display: grid;
  gap: var(--space-6);
  max-width: calc(var(--measure-prose) + var(--panel-pad) * 2);
  font-size: var(--text-md);
}

.wz-legal > * {
  min-width: 0;
}

/* The contents panel carries a crop of the key art: above the list on a
   phone, beside it from 48rem. It sits outside the reading column's text. */
.wz-toc {
  display: grid;
  overflow: hidden;
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  font-size: var(--text-base);
}

.wz-toc__art {
  /* Phones show a wide strip of a tall picture: keep the head and shoulders */
  --art-pos: 50% 22%;
  aspect-ratio: 16 / 5;
  border-radius: 0;
}

.wz-toc__body {
  padding: var(--panel-pad) var(--panel-pad) var(--space-2);
}

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

.wz-toc__list {
  display: grid;
  margin-top: var(--space-3);
}

.wz-toc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--control-height-sm);
  border-top: var(--hairline) solid var(--border-subtle);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.wz-toc__link:hover {
  color: var(--text-heading);
}

.wz-toc__link:active {
  color: var(--text-accent);
}

.wz-toc__link .wz-icon {
  color: var(--text-accent);
  transition: transform var(--duration-base) var(--ease-out);
}

.wz-toc__link:hover .wz-icon {
  transform: translateY(var(--space-1));
}

/* The article: the readable surface for everything long */
.wz-legal .wz-prose {
  max-width: none;
  padding: var(--panel-pad);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-md);
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    var(--frame-edge) border-box;
  box-shadow: var(--shadow-raised);
}

.wz-legal .wz-prose > :first-child {
  margin-top: 0;
}

.wz-legal .wz-prose h2 {
  font-size: var(--text-xl);
}

.wz-legal .wz-prose h2:not(:first-child) {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: var(--hairline) solid var(--border-subtle);
}

.wz-legal .wz-prose h3 {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
}

.wz-legal .wz-prose a {
  color: var(--text-accent);
}

.wz-legal .wz-prose a:hover {
  color: var(--text-heading);
}

.wz-cookies td {
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-1);
}

.wz-legal-end {
  display: grid;
  gap: var(--space-4);
  padding: var(--panel-pad);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  font-size: var(--text-base);
}

.wz-legal-end__title {
  font-size: var(--text-lg);
}

.wz-legal-end p {
  color: var(--text-secondary);
}

.wz-legal-end .wz-cluster {
  --cluster-gap: var(--space-2) var(--space-6);
}

@media (min-width: 48rem) {
  .wz-toc {
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  }

  .wz-toc__art {
    aspect-ratio: auto;
  }
}