/* ==========================================================================
   WarZone Conquer home page.
   Only what the home page adds on top of base.css. Mobile is the base; wider
   screens layer on with min-width. Every value comes from tokens.css.

   The page is built around the key art: the hero shows it at full strength,
   every later section is glass over the same picture. Crimson marks the one
   primary action in a section, ice marks eyebrows, links and highlights.
   ========================================================================== */

.wz-home {
  /* Text links on this page get a 44px tap target */
  --home-link-target: calc(var(--space-10) + var(--space-1));
  /* Hero height cap on tall screens: 60rem */
  --hero-cap: calc(var(--space-16) * 15);
  /* Display type is 2.5x body from 390px up. Below that the two headline
     lines must still fit one line each, so the floor is 2.25x */
  --hero-title-floor: calc(var(--text-base) * 2.25);
  /* Hero copy column on narrow landscape screens: 30rem */
  --hero-copy-max: calc(var(--space-16) * 7.5);
  /* Intro copy cap: 44rem */
  --home-copy-max: calc(var(--container-narrow) - var(--space-8));
}

.wz-home .wz-link {
  min-block-size: var(--home-link-target);
}

/* Shared section head: eyebrow, h2, lead */
.wz-home-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.wz-home-h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

/* Leads that sit straight on the wallpaper, not on a panel, take the full
   text colour: the secondary grey is not enough over bright parts of the art.
   The glow comes from the body. */
.wz-home-head .wz-lead,
.wz-war__head .wz-lead,
.wz-ladder__meta {
  color: var(--text-primary);
}

/* Reveal stagger, read by base.css */
.wz-home-delay-1 {
  --reveal-delay: calc(var(--duration-fast) * 1);
}

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

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

/* ==========================================================================
   1. Hero
   Phones (portrait art): the picture fills the top, the copy sits below the
   figures on a scrim. Landscape: the picture fills the hero and the copy
   sits low on the left, where the art is quietest. The layout switches on
   the same aspect-ratio test the <picture> uses to pick its source.
   ========================================================================== */

.wz-hero {
  /* How tall the portrait picture runs on phones */
  --hero-art: min(calc(100vw * 1.5), calc(100svh * 0.8));

  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-block-size: min(100vh, var(--hero-cap));
  min-block-size: min(100svh, var(--hero-cap));
  /* The top of the copy starts inside the lower part of the picture */
  padding-block: calc(var(--hero-art) * 0.72) var(--space-10);
  overflow: hidden;
}

/* The art and its scrims sit on one backdrop that dissolves into the page at
   the hero's lower edge, so there is no seam where the next section begins */
.wz-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, var(--storm-1000) 86%, transparent);
  mask-image: linear-gradient(180deg, var(--storm-1000) 86%, transparent);
}

.wz-hero__media {
  position: absolute;
  inset: 0 0 auto 0;
  block-size: var(--hero-art);
  background: var(--surface-page);
  overflow: hidden;
  /* Portrait art ends inside the hero; let its lower edge fade out */
  -webkit-mask-image: linear-gradient(180deg, var(--storm-1000) 72%, transparent);
  mask-image: linear-gradient(180deg, var(--storm-1000) 72%, transparent);
}

.wz-hero__media picture {
  display: block;
  block-size: 100%;
}

.wz-hero__img {
  inline-size: 100%;
  /* Taller than its frame, so the frame clips the art's bottom credit strip
     (the last 3% of the wallpaper) instead of showing it under the copy */
  block-size: calc(100% + var(--space-16));
  max-width: none;
  object-fit: cover;
  /* Portrait art: axe, heroine and blade all sit in the upper two thirds */
  object-position: 50% 15%;
  transform-origin: 35% 60%;
  will-change: transform;
  animation: wz-hero-drift calc(var(--duration-reveal) * 60) var(--ease-in-out) infinite alternate;
}

@keyframes wz-hero-drift {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

/* A header scrim at the top, and the bottom scrim under the copy */
.wz-hero__scrim {
  /* Phones: a soft shade that starts under the figures and is firm where the
     copy begins. Landscape drops it, the side scrim does that job there. */
  --hero-copy-shade: linear-gradient(180deg, transparent calc(var(--hero-art) * 0.55), var(--surface-scrim) var(--hero-art));

  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--surface-scrim) 0%, transparent 12%),
    var(--hero-copy-shade),
    var(--hero-scrim-bottom);
  pointer-events: none;
}

.wz-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.wz-hero__head {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

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

/* The eyebrow sits over the brightest part of the phone art, so it takes the
   full text colour and the halo doubled, not the ice accent */
.wz-hero__head .wz-eyebrow {
  color: var(--text-primary);
  text-shadow: var(--text-glow), var(--text-glow);
}

.wz-hero__title {
  max-width: none;
  /* Big display type reads tighter; this also buys each line room on phones */
  letter-spacing: 0;
  /* Fallback where container units are missing */
  font-size: var(--hero-title-floor);
  /* Each line measures about 7.9em in Cinzel Black, so 11.5cqi keeps both
     lines at roughly 90% of the column on every screen */
  font-size: clamp(var(--hero-title-floor), 11.5cqi, var(--text-display));
  text-shadow: var(--text-glow);
}

.wz-hero__line {
  display: block;
}

.wz-hero__lead {
  color: var(--text-primary);
  text-shadow: var(--text-glow);
}

.wz-hero__actions {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--space-3);
}

/* Glass behind the secondary action so it holds up over the art */
.wz-hero .wz-btn--secondary {
  --btn-bg: var(--surface-scrim);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

.wz-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.wz-hero__fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--space-6);
  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-secondary);
  text-shadow: var(--text-glow);
}

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

@media (min-width: 30rem) {
  .wz-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }
}

@media (min-width: 48rem) {
  .wz-hero__inner > * {
    max-inline-size: calc(var(--space-16) * 9);
  }
}

/* Landscape art: the picture fills the hero, the copy sits low and left */
@media (min-aspect-ratio: 4/5) {
  .wz-hero {
    padding-block: calc(var(--header-height) + var(--space-16)) var(--space-12);
  }

  .wz-hero__media {
    inset: 0;
    block-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .wz-hero__img {
    object-position: 40% 20%;
  }

  /* The side scrim fades out toward the top so the warrior and the axe
     stay at full strength; it only darkens where the copy sits */
  .wz-hero__scrim {
    --hero-copy-shade: linear-gradient(transparent, transparent);
  }

  .wz-hero__scrim::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-scrim-side);
    -webkit-mask-image: linear-gradient(0deg, var(--storm-1000) 30%, transparent 88%);
    mask-image: linear-gradient(0deg, var(--storm-1000) 30%, transparent 88%);
  }

  .wz-hero__inner > * {
    max-inline-size: var(--hero-copy-max);
  }
}

/* Wide landscape: a low strip across the bottom. The headline sits left and
   the pitch with its actions sits right, so the heroine's face and blade,
   the warrior and the dragon all stay clear above the copy. */
@media (min-aspect-ratio: 4/5) and (min-width: 64rem) {
  .wz-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      'head aside'
      'facts aside';
    align-items: end;
    column-gap: var(--space-12);
    row-gap: var(--space-4);
  }

  .wz-hero__inner > * {
    max-inline-size: none;
  }

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

  .wz-hero__aside {
    grid-area: aside;
  }

  .wz-hero__facts {
    grid-area: facts;
  }

  .wz-hero__title {
    font-size: clamp(var(--hero-title-floor), 11.5cqi, calc(var(--text-3xl) * 1.15));
  }

  .wz-hero .wz-btn--lg {
    padding-inline: var(--space-5);
    font-size: var(--text-md);
  }
}

/* ---------- Sparks ----------
   Ice from the lightning axe, crimson from the blade. Infinite by design:
   this is the brief's one expressive moment. home.js adds them only when
   motion is allowed, keeps them under 20 and pauses them whenever the
   hero is off screen, so they never burn battery unseen. */

.wz-embers {
  --spark-ice: var(--ice-200);
  --spark-ice-glow: var(--ice-400);
  --spark-blade: var(--crimson-300);
  --spark-blade-glow: var(--crimson-500);

  /* Sits on the art, above the scrim: portrait art ends at --hero-art */
  position: absolute;
  inset: 0 0 auto 0;
  block-size: var(--hero-art);
  overflow: hidden;
  pointer-events: none;
  /* Sparks only show once they have climbed out of the copy area */
  -webkit-mask-image: linear-gradient(0deg, transparent 18%, var(--storm-1000) 38%);
  mask-image: linear-gradient(0deg, transparent 18%, var(--storm-1000) 38%);
}

.wz-ember {
  --ember-x: 50;
  --ember-size: 1;
  --ember-dur: 12;
  --ember-delay: 0;
  --ember-drift: 1;
  --ember-color: var(--spark-ice);
  --ember-glow: var(--spark-ice-glow);

  position: absolute;
  left: calc(var(--ember-x) * 1%);
  bottom: calc(var(--space-8) * -1);
  inline-size: calc(var(--space-1) * var(--ember-size) * 1.4);
  block-size: calc(var(--space-1) * var(--ember-size) * 1.4);
  border-radius: var(--radius-pill);
  background: var(--ember-color);
  box-shadow: 0 0 var(--space-2) var(--ember-glow);
  opacity: 0;
  will-change: transform, opacity;
  animation: wz-ember-rise calc(var(--duration-reveal) * var(--ember-dur)) linear infinite;
  animation-delay: calc(var(--duration-reveal) * var(--ember-delay) * -1);
}

.wz-ember--blade {
  --ember-color: var(--spark-blade);
  --ember-glow: var(--spark-blade-glow);
}

.wz-embers.is-paused .wz-ember {
  animation-play-state: paused;
}

/* Spread across the width; the first eight (the phone set) already cover it */
.wz-ember:nth-child(1) { --ember-x: 12; --ember-size: 1; --ember-dur: 11; --ember-delay: 0; --ember-drift: 1; }
.wz-ember:nth-child(2) { --ember-x: 58; --ember-size: 1.5; --ember-dur: 14; --ember-delay: 3; --ember-drift: -1; }
.wz-ember:nth-child(3) { --ember-x: 34; --ember-size: 1; --ember-dur: 9; --ember-delay: 6; --ember-drift: 0.5; }
.wz-ember:nth-child(4) { --ember-x: 72; --ember-size: 2; --ember-dur: 16; --ember-delay: 1; --ember-drift: -0.6; }
.wz-ember:nth-child(5) { --ember-x: 22; --ember-size: 1; --ember-dur: 12; --ember-delay: 8; --ember-drift: 1.2; }
.wz-ember:nth-child(6) { --ember-x: 88; --ember-size: 1.5; --ember-dur: 10; --ember-delay: 4; --ember-drift: -1.4; }
.wz-ember:nth-child(7) { --ember-x: 46; --ember-size: 1; --ember-dur: 13; --ember-delay: 10; --ember-drift: 0.8; }
.wz-ember:nth-child(8) { --ember-x: 80; --ember-size: 2; --ember-dur: 15; --ember-delay: 7; --ember-drift: -0.4; }
.wz-ember:nth-child(9) { --ember-x: 64; --ember-size: 1; --ember-dur: 10; --ember-delay: 12; --ember-drift: -1; }
.wz-ember:nth-child(10) { --ember-x: 28; --ember-size: 1.5; --ember-dur: 12; --ember-delay: 2; --ember-drift: 0.6; }
.wz-ember:nth-child(11) { --ember-x: 94; --ember-size: 1; --ember-dur: 14; --ember-delay: 9; --ember-drift: -0.8; }
.wz-ember:nth-child(12) { --ember-x: 52; --ember-size: 2; --ember-dur: 11; --ember-delay: 5; --ember-drift: -1.2; }
.wz-ember:nth-child(13) { --ember-x: 40; --ember-size: 1; --ember-dur: 16; --ember-delay: 11; --ember-drift: 1.4; }
.wz-ember:nth-child(14) { --ember-x: 68; --ember-size: 1.5; --ember-dur: 9; --ember-delay: 13; --ember-drift: -0.2; }

/* Landscape: the art fills the hero; keep the sparks on the right 60% */
@media (min-aspect-ratio: 4/5) {
  .wz-embers {
    block-size: auto;
    inset: 0;
  }

  .wz-ember {
    left: calc(40% + var(--ember-x) * 0.58%);
  }
}

@keyframes wz-ember-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }

  20% {
    opacity: 0.95;
  }

  70% {
    opacity: 0.75;
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--space-12) * var(--ember-drift)), calc(var(--space-32) * -5.5), 0) scale(0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wz-embers {
    display: none;
  }

  .wz-hero__img {
    animation: none;
  }
}

/* ==========================================================================
   2. Class picker
   Ten compact tiles: two columns on phones so every class is on screen,
   five columns from 48rem. The selected class leads in a framed panel.
   Selected is never colour alone: ice border and glow, a diamond marker,
   black weight.
   ========================================================================== */

.wz-classes__head {
  max-inline-size: var(--home-copy-max);
  margin-bottom: var(--space-8);
}

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

.wz-class-tab {
  --tile-glyph: calc(var(--icon-lg) * 1.25);

  justify-content: flex-start;
  gap: var(--space-3);
  min-block-size: calc(var(--control-height) + var(--space-3));
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  text-align: left;
  white-space: normal;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.wz-class-tab .wz-glyph {
  flex: none;
  inline-size: var(--tile-glyph);
  block-size: var(--tile-glyph);
  font-size: var(--tile-glyph);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.wz-class-tab__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The base underline belongs to horizontal tabs; tiles use a diamond marker */
.wz-class-tab::after {
  inset: var(--space-2) var(--space-2) auto auto;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  background: var(--action-primary);
  transform: rotate(45deg) scale(0);
  transition: transform var(--duration-base) var(--ease-out);
}

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

.wz-class-tab:hover .wz-glyph {
  color: var(--text-primary);
}

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

.wz-class-tab:focus-visible {
  outline-offset: var(--focus-width);
}

.wz-class-tab[aria-selected='true'] {
  background: var(--surface-raised);
  border-color: var(--border-accent);
  box-shadow: var(--glow-ice);
  color: var(--text-heading);
  font-weight: var(--weight-bold);
}

.wz-class-tab[aria-selected='true'] .wz-glyph {
  color: var(--text-accent);
}

.wz-class-tab[aria-selected='true']::after {
  transform: rotate(45deg) scale(1);
}

.wz-class-tab:disabled .wz-glyph {
  color: var(--action-disabled-text);
}

/* ---------- Panel: the selected class leads ----------
   The plate is a crop of the key art, a different one for each class, with
   the class glyph struck on a medallion over it. The copy and the facts sit
   beside it. */

.wz-class-tabs .wz-class-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-4);
  padding: 0;
  overflow: hidden;
}

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

.wz-class-art {
  /* Each class has its own plate; phones crop it wide, so keep the head in */
  --art-pos: 50% 15%;

  /* The medallion keeps to the lower corner so the class figure stays clear */
  display: grid;
  place-items: end start;
  padding: var(--space-4);
  aspect-ratio: 2 / 1;
  border-radius: 0;
}

/* The plate melts into the panel along its lower edge */
.wz-class-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--surface-raised) 0%, transparent 55%);
}

.wz-class-panel__medal {
  --medal-size: calc(var(--space-16) * 1.5);

  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--medal-size);
  aspect-ratio: 1;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(closest-side, var(--action-primary-subtle), var(--surface-sunken)) padding-box,
    var(--frame-edge) border-box;
  box-shadow: var(--glow-ice);
}

/* An inner ring, the way a coin or a seal is struck */
.wz-class-panel__medal::before {
  content: '';
  position: absolute;
  inset: var(--space-2);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
}

.wz-class-panel__medal .wz-glyph {
  font-size: calc(var(--medal-size) * 0.5);
  color: var(--text-heading);
  text-shadow: 0 0 var(--space-5) var(--action-primary);
}

.wz-class-panel__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
}

.wz-class-panel__name {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.wz-class-panel__copy {
  max-width: var(--measure-lead);
  font-size: var(--text-md);
  color: var(--text-secondary);
}

/* Two or three plain facts about the class, as tags */
.wz-class-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.wz-class-panel__tags .wz-badge {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* The first tag is the range or the role, so it takes the ice accent */
.wz-class-panel__tags .wz-badge:first-child {
  border-color: var(--status-info-border);
  background: var(--status-info-surface);
  color: var(--status-info-text);
}

/* One crop of the key art per class, centred on a different part of the
   picture. Percentages place the focal point; the zoom is by width. */
.wz-class-art--trojan { background-image: url('../../images/wz/art/class-trojan.webp'); }
.wz-class-art--warrior { background-image: url('../../images/wz/art/class-warrior.webp'); }
.wz-class-art--archer { background-image: url('../../images/wz/art/class-archer.webp'); }
.wz-class-art--ninja { background-image: url('../../images/wz/art/class-ninja.webp'); }
.wz-class-art--monk { background-image: url('../../images/wz/art/class-monk.webp'); }
.wz-class-art--pirate { background-image: url('../../images/wz/art/class-pirate.webp'); }
.wz-class-art--dragon-warrior { background-image: url('../../images/wz/art/class-dragon-warrior.webp'); }
.wz-class-art--taoist-water { background-image: url('../../images/wz/art/class-taoist-water.webp'); }
.wz-class-art--taoist-fire { background-image: url('../../images/wz/art/class-taoist-fire.webp'); }
.wz-class-art--windwalker { background-image: url('../../images/wz/art/class-windwalker.webp'); }

/* Panel change: a short fade as the new panel appears */
@media (prefers-reduced-motion: no-preference) {
  .js .wz-class-tabs .wz-class-panel:not([hidden]) {
    animation: wz-home-panel-in var(--duration-slow) var(--ease-out);
  }
}

@keyframes wz-home-panel-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 30rem) {
  .wz-class-tab {
    --tile-glyph: calc(var(--icon-lg) * 1.5);
  }
}

@media (min-width: 48rem) {
  .wz-class-tabs .wz-class-tabs__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .wz-class-tab {
    --tile-glyph: var(--glyph-md);

    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: calc(var(--space-16) * 2);
    padding: var(--space-4) var(--space-3);
    font-size: var(--text-md);
    text-align: center;
  }

  .wz-class-tab::after {
    inset: var(--space-3) var(--space-3) auto auto;
  }

  .wz-class-tabs .wz-class-panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    margin-top: var(--space-6);
  }

  /* The medallion drops to the lower corner so the figure in the crop stays
     clear */
  .wz-class-art {
    /* The narrow column crops the plate's sides: keep the figure off the medal */
    --art-pos: 10% 15%;

    place-items: end start;
    padding: var(--space-6);
    aspect-ratio: auto;
    min-block-size: calc(var(--space-16) * 4);
  }

  .wz-class-art::before {
    background: linear-gradient(90deg, transparent 68%, var(--surface-raised) 100%);
  }

  .wz-class-panel__medal {
    --medal-size: calc(var(--space-16) * 2);
  }

  .wz-class-panel__main {
    justify-content: center;
    padding: var(--space-8);
  }
}

@media (min-width: 64rem) {
  .wz-class-tabs .wz-class-panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .wz-class-art {
    min-block-size: calc(var(--space-16) * 5);
  }

  .wz-class-panel__medal {
    --medal-size: calc(var(--space-16) * 2.25);
  }

  .wz-class-panel__main {
    padding: var(--space-12);
  }
}

/* ==========================================================================
   3. What you fight for
   No band fill: the picture runs on behind the section. Guild War leads, a
   big tile with a close crop of the axe and the dragon's claw and its copy
   on a panel below, so no figure is ever covered. Tournament, Nobility and
   The Hunt are smaller tiles, each with its own crop of the same picture.
   ========================================================================== */

.wz-war__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.wz-war__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* ---------- Lead tile ---------- */

.wz-war-lead {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-base);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.wz-war-lead__art {
  flex: 1 1 auto;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  /* The Trojan stands right of centre with the war behind him; narrow
     screens crop the sides, so the focus leans to him */
  --art-pos: 60% 0%;
}

.wz-war-lead__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

.wz-war-lead__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.wz-war-lead__text {
  max-width: var(--measure-lead);
  color: var(--text-secondary);
  font-size: var(--text-md);
}

.wz-war-lead .wz-badge .wz-icon {
  color: var(--text-accent);
}

/* ---------- Small tiles ---------- */

.wz-war-tile {
  display: grid;
  grid-template-columns: calc(var(--space-16) * 1.25) minmax(0, 1fr);
  min-width: 0;
  background: var(--surface-base);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.wz-war-tile__art {
  --art-pos: 50% 25%;
  min-block-size: calc(var(--space-16) * 2.5);
  border-radius: 0;
}

.wz-war-tile__art.wz-art--tile-hunt {
  --art-pos: 36% 25%;
}

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

.wz-war-tile__title {
  font-size: var(--text-lg);
  overflow-wrap: anywhere;
}

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

.wz-war-tile .wz-link {
  margin-top: auto;
}

@media (min-width: 30rem) {
  .wz-war-tile {
    grid-template-columns: calc(var(--space-16) * 1.75) minmax(0, 1fr);
  }

  .wz-war-tile__body {
    padding: var(--space-4) var(--space-5);
  }

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

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

  .wz-war-lead {
    grid-column: span 2;
  }

  .wz-war-lead__art {
    aspect-ratio: 2 / 1;
  }

  .wz-war-lead__body {
    padding: var(--space-6);
  }

  /* Tournament runs wide beside its crop; Nobility and The Hunt share a row */
  .wz-war-lead + .wz-war-tile {
    grid-column: span 2;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

@media (min-width: 64rem) {
  .wz-war__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    column-gap: var(--space-10);
  }

  .wz-war__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .wz-war-lead {
    grid-column: 1 / span 7;
    grid-row: 1 / span 3;
  }

  /* The art takes whatever height the three small tiles set */
  .wz-war-lead__art {
    aspect-ratio: auto;
    min-block-size: calc(var(--space-16) * 5);
  }

  .wz-war-lead__body {
    padding: var(--space-8);
  }

  .wz-war-tile,
  .wz-war-lead + .wz-war-tile {
    grid-column: 8 / span 5;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* ==========================================================================
   4. Three steps
   Intro on the left, the ordered list in a glass panel on the right.
   ========================================================================== */

.wz-start__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

/* ol[class] in base.css zeroes the padding, so the panel padding needs the
   doubled class to win. The row rhythm itself lives in base.css. */
.wz-steps.wz-start__steps {
  padding: var(--space-6);
}

.wz-start__action {
  margin-top: var(--space-2);
}

@media (min-width: 64rem) {
  .wz-start__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-16);
    align-items: center;
  }

  .wz-steps.wz-start__steps {
    padding: var(--space-10);
  }
}

/* ==========================================================================
   5. Ranking teaser
   Phones: each row is one compact two-line card instead of the base
   five-line stack. 48rem: back to a real table. The top three carry the
   rank tokens; rank 1 leads.
   ========================================================================== */

.wz-ladder-section {
  padding-top: 0;
}

.wz-ladder-block__head {
  margin-bottom: var(--space-8);
}

.wz-ladder-block__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
}

.wz-ladder__meta {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.wz-ladder__meta .wz-icon {
  margin-top: var(--space-1);
}

.wz-ladder .wz-table tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'rank name level'
    'rank class nobility';
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) var(--space-3);
}

.wz-ladder .wz-table td {
  position: relative;
  display: block;
  padding: 0;
}

/* Labels stay for screen readers; only the level label is shown */
.wz-ladder .wz-table td::before {
  position: absolute;
  inline-size: var(--hairline);
  block-size: var(--hairline);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wz-ladder .wz-table .wz-ladder__cell--level::before {
  position: static;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip: auto;
  font-size: var(--text-xs);
}

.wz-ladder__cell--rank {
  grid-area: rank;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.wz-ladder__cell--name {
  grid-area: name;
  min-width: 0;
}

.wz-ladder__cell--class {
  grid-area: class;
  min-width: 0;
}

.wz-ladder__cell--nobility {
  grid-area: nobility;
  justify-self: end;
}

.wz-ladder .wz-table .wz-ladder__cell--class,
.wz-ladder .wz-table .wz-ladder__cell--nobility {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.wz-ladder .wz-table .wz-ladder__cell--level {
  grid-area: level;
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}

/* Rank: number stays upright inside a drawn diamond */
.wz-ladder__rank {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-8);
  block-size: var(--space-10);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  color: var(--rank-color, var(--text-muted));
}

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

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

.wz-ladder__name {
  min-width: 0;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.wz-ladder__row--1 .wz-ladder__rank::before,
.wz-ladder__row--2 .wz-ladder__rank::before,
.wz-ladder__row--3 .wz-ladder__rank::before {
  content: '';
  position: absolute;
  inset: var(--space-2);
  z-index: -1;
  border: var(--hairline) solid currentColor;
  transform: rotate(45deg);
}

.wz-ladder__row--1 {
  --rank-color: var(--rank-1);
}

.wz-ladder__row--2 {
  --rank-color: var(--rank-2);
}

.wz-ladder__row--3 {
  --rank-color: var(--rank-3);
}

/* Rank 1 leads: raised row, filled diamond, crown, display name in gold */
.wz-ladder .wz-table .wz-ladder__row--1 {
  background: var(--surface-raised);
}

.wz-ladder__row--1 .wz-ladder__rank::before {
  background: var(--action-primary-subtle);
}

.wz-ladder__row--1 .wz-ladder__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
  color: var(--rank-1);
}

.wz-ladder__row--1 .wz-ladder__glyph {
  color: var(--rank-1);
}

.wz-ladder__crown {
  flex: none;
  color: var(--rank-1);
}

/* ---------- Loading, unavailable and empty states ---------- */

/* The note is a .wz-panel in the markup: solid hairline, glass surface */
.wz-ladder-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
}

.wz-ladder-note > .wz-icon {
  color: var(--text-accent);
}

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

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

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

.wz-ladder-note__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-3);
}

@media (min-width: 40rem) {
  .wz-ladder-note {
    flex-direction: row;
    padding: var(--space-10);
  }
}

@media (min-width: 48rem) {
  .wz-ladder .wz-table tr {
    display: table-row;
    padding: 0;
  }

  .wz-ladder .wz-table td {
    display: table-cell;
    padding: var(--space-3) var(--space-5);
  }

  .wz-ladder .wz-table .wz-ladder__cell--level::before {
    content: none;
  }

  .wz-ladder .wz-table .wz-ladder__cell--class,
  .wz-ladder .wz-table .wz-ladder__cell--nobility {
    font-size: var(--text-base);
    color: var(--text-secondary);
  }

  .wz-ladder .wz-table .wz-ladder__cell--level {
    display: table-cell;
    text-align: right;
  }

  .wz-ladder .wz-table th:first-child,
  .wz-ladder .wz-table td:first-child {
    inline-size: var(--space-16);
  }

  .wz-ladder .wz-table .wz-ladder__row--1 td {
    padding-block: var(--space-5);
  }

  .wz-ladder .wz-table .wz-ladder__row--1:hover {
    background: var(--surface-overlay);
  }

  .wz-ladder .wz-table .wz-ladder__cell--rank {
    display: table-cell;
    text-align: center;
  }

  .wz-ladder__cell--rank > * {
    margin-inline: auto;
  }

  /* The name column gets the largest share, so a long name stays on one line */
  .wz-ladder .wz-table th:nth-child(2) {
    inline-size: 38%;
  }

  .wz-ladder__row--1 .wz-ladder__name {
    font-size: var(--text-lg);
  }
}

@media (min-width: 64rem) {
  .wz-ladder__row--1 .wz-ladder__name {
    font-size: var(--text-xl);
  }
}

/* ==========================================================================
   6. Community band
   A framed band: a key-art crop on one side, the copy on the other.
   Discord is the one primary action; Facebook is a text link.
   ========================================================================== */

/* The ladder above and the footer's top margin below already give this
   last band its room */
.wz-community-section {
  padding-block-end: 0;
}

.wz-community {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

.wz-community__art {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  /* Two travellers at a campfire; the wide phone crop keeps their fire */
  --art-pos: 50% 65%;
}

.wz-community__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
}

.wz-community__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  align-self: stretch;
  margin-top: var(--space-2);
}

.wz-community__actions .wz-link {
  align-self: flex-start;
}

/* On the narrowest phones the label may wrap rather than push the band wide */
.wz-community__actions .wz-btn {
  white-space: normal;
  text-align: center;
}

@media (min-width: 40rem) {
  .wz-community__copy {
    padding: var(--space-10);
  }

  .wz-community__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    align-self: flex-start;
  }
}

@media (min-width: 64rem) {
  .wz-community {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .wz-community__art {
    aspect-ratio: auto;
    min-block-size: calc(var(--space-16) * 7);
  }

  .wz-community__copy {
    align-self: center;
    padding: var(--space-12) var(--space-16);
  }
}