/* ==========================================================================
   The front page (index.html), 2026-10-15 redesign.
   Shared parts (tokens, bar, footer, buttons, panels, tier badges, ladder rows, tabs, motion)
   are in zp.css and motion.css, which load after this file. This sheet is the page's layout:

   1. Hero: the headline and address beside the stage (the fight clip in a raised frame with
      live cards over it). 2. The ticker of latest fights. 3. Live numbers. 4. Top of the ladder:
      podium and global top ten. 5. Who is winning. 6. Kits. 7. The tier staircase. 8. Events.
      9. Join. 10. Ranks. 11. Discord.
   ========================================================================== */

/* ---------- 1. the hero (v2, 2026-10-19) ----------
   A modern split hero on the plain page: the status line, a big pixel headline, the lede, the
   address in the game's text field and three of the game's buttons on the left; the fight clip in
   a dark GUI frame on the right, with a hotbar of kits hanging off its bottom edge. The live cards
   and the next event follow in one row underneath. */
.home-hero.mc-hero { position: relative; padding: 64px 0 40px; }
.mc-hero-in { display: grid; gap: 40px; align-items: center; }
.mc-hero-copy { min-width: 0; }
.home-live {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 22px;
  font-size: var(--mc-s1); color: var(--text-2);
}
.home-live b { color: var(--text); font-weight: 400; }
.home-live a { color: var(--text-2); }
.home-live a:hover { color: #fff; }
.home-live .zp-status { color: var(--text); }
.home-live-sep { width: 2px; height: 14px; background: #3b3944; }
.mc-hero-title { margin: 0; font-size: var(--mc-hero); line-height: 1.05; color: #fff; max-width: 12ch; text-wrap: balance; }
.mc-hero-title em { font-style: normal; color: var(--accent); }
.mc-hero .home-lede { margin: 22px 0 0; max-width: 46ch; color: var(--text-2); font-size: var(--mc-s1); line-height: 1.6; }
.mc-menu { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.mc-menu .zp-ipbox { flex: 1 1 100%; max-width: 520px; margin-bottom: 4px; text-align: left; }
.mc-menu > .zp-btn { flex: 0 0 auto; }
.mc-hero .zp-online { margin-top: 22px; }
/* the clip: a dark GUI frame, the hotbar overlapping its bottom edge */
.mc-hero-media { position: relative; margin: 0; padding-bottom: 26px; min-width: 0; }
.mc-hero-screen {
  border: 8px solid transparent; border-image: var(--mc-gui) 4 fill / 8px / 0 stretch;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
}
.mc-hero-screen video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.mc-hero-bar { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.mc-hero-bar > a { text-decoration: none; }
.mc-hero-bar > a:hover { filter: brightness(1.25); }
.mc-hero-under { display: grid; gap: 12px; margin-top: 36px; }
.mc-title-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mc-title-cards:not(:has(> :not([hidden]))) { display: none; }
.mc-hero .zp-next { text-align: left; }
@media (min-width: 1000px) {
  .home-hero.mc-hero { padding: 88px 0 48px; }
  .mc-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
  .mc-hero-under { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }
  .mc-hero-under:not(:has(> .zp-next:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .home-hero.mc-hero { padding: 36px 0 24px; }
  .home-live-sep { display: none; }
  .mc-menu > .zp-btn { flex: 1 1 calc(50% - 5px); }
  .mc-menu > .zp-btn.is-primary { flex-basis: 100%; }
}

/* the live cards */
.home-float {
  display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left;
  padding: 8px 12px; text-decoration: none; color: var(--text);
  border: 8px solid transparent; border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch;
  transition: transform var(--mc-lift);
}
.home-float:hover { border-image-source: var(--mc-gui-hover); }
@media (prefers-reduced-motion: no-preference) { html:not([data-lite]) .home-float:hover { transform: translateY(-2px); } }
.home-float img { width: 40px; height: 40px; image-rendering: pixelated; flex: none; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.home-float > span { display: grid; gap: 2px; min-width: 0; }
.home-float small { font-size: var(--mc-s1); color: var(--mc-gray); white-space: nowrap; }
.home-float b { font-size: var(--mc-s1); font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--mc-shadow); }
.hf-top small { color: var(--mc-gold); }
.hf-top .hf-line { display: inline-flex; align-items: center; gap: 8px; }
.hf-top .zp-num { color: var(--mc-gold); }
.hf-online { flex-direction: row; align-items: center; gap: 12px; }
.hf-online .hf-big { font-size: var(--mc-s3); line-height: 1; color: var(--mc-green); }
.hf-online small { display: inline-flex; align-items: center; gap: 6px; }
.hf-last .zp-score { color: var(--text); }
.hf-last .hf-l { color: var(--text-3); }
.hf-last img.kit { width: 32px; height: 32px; box-shadow: none; }

/* the load sequence: the copy rises in line by line, the clip fades in beside it (gated by html.js-reveal) */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .mc-hero-copy > *, html.js-reveal .mc-hero-media { animation: zr-rise 520ms var(--zr-ease) both; animation-delay: calc(80ms + var(--zr-i, 0) * 70ms); }
  html.js-reveal .mc-hero-copy > :nth-child(2) { --zr-i: 1; }
  html.js-reveal .mc-hero-copy > :nth-child(3) { --zr-i: 2; }
  html.js-reveal .mc-hero-copy > :nth-child(n+4) { --zr-i: 3; }
  html.js-reveal .mc-hero-media { --zr-i: 2; animation-name: zr-fade; }
  html[data-lite].js-reveal .mc-hero-copy > * { animation-name: zr-fade; }
}
/* ---------- 2. the ticker ---------- */
.home-ticker {
  display: flex; align-items: stretch; min-width: 0;
  background: var(--surface); border-block: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.home-ticker-k {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; flex: none; margin: 0;
  padding: 0 18px 0 var(--gutter);
  font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--text);
  background: var(--surface-2); border-right: 1px solid var(--line-2);
  box-shadow: 12px 0 18px -8px rgba(0, 0, 0, 0.8);
}
.home-ticker-run { flex: 1; min-width: 0; }
.tk-item {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  height: 52px; padding: 0 22px; border-right: 1px solid var(--line);
  color: var(--text-2); text-decoration: none; white-space: nowrap; font-size: var(--fs-sm);
  transition: background var(--fast), color var(--fast);
}
.tk-item:hover { background: var(--surface-2); color: var(--text); }
.tk-item img.kit { width: 22px; height: 22px; }
.tk-item img.zp-head { width: 22px; height: 22px; }
.tk-item b { color: var(--text); font-weight: 600; }
.tk-item .zp-score { font-size: var(--px-2); color: var(--text); }
.tk-item small { font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); }
.tk-item .tk-d { color: var(--win); }
@media (max-width: 559px) { .home-ticker-k span:last-child { display: none; } .home-ticker-k { padding-right: 12px; } }

/* ---------- 3. live numbers ---------- */
.home-numbers { padding: var(--s-7) 0; background: var(--bg); }
.home-pulse {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: var(--surface) var(--shade); box-shadow: var(--lip), var(--raise);
}
.home-pulse .zp-stat { padding: 20px 20px 22px; gap: 10px; }
.home-pulse .zp-stat-k { order: -1; }
.home-pulse .zp-stat-v { font-size: var(--px-4); }
.home-pulse .zp-stat:first-child .zp-stat-v { color: var(--accent-hi); }
@media (min-width: 720px) { .home-pulse { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .home-pulse { grid-template-columns: repeat(6, minmax(0, 1fr)); } .home-pulse .zp-stat-v { font-size: var(--px-5); } }

/* ---------- 4. top of the ladder ---------- */
.home-top-grid { display: grid; gap: var(--s-5); align-items: stretch; }
@media (min-width: 1100px) { .home-top-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.hw-podium-card { display: flex; flex-direction: column; }

/* The podium: three figures standing on blocks as high as their place. */
.hw-podium {
  flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--s-3);
  padding: var(--s-4) var(--s-5) 0; min-height: 380px;
}
.hw-podium.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-pod { --mc: var(--line-3); display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.hw-pod.is-1 { --mc: var(--gold); } .hw-pod.is-2 { --mc: var(--silver); } .hw-pod.is-3 { --mc: var(--bronze); }
.hw-pod-fig { position: relative; display: block; height: 210px; margin-bottom: -12px; z-index: 1; pointer-events: none; }
.hw-pod.is-1 .hw-pod-fig { height: 250px; }
.hw-pod-fig .zp-skin { position: absolute; inset: 0; }
.hw-pod-block {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 16px 8px 18px; text-align: center;
  background: var(--surface-3) linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%);
  border: 1px solid var(--line-3); border-bottom: 0; border-radius: var(--r-2) var(--r-2) 0 0;
  box-shadow: inset 0 3px 0 var(--mc), var(--lip);
}
.hw-pod.is-1 .hw-pod-block { min-height: 172px; background-color: var(--surface-4); }
.hw-pod.is-2 .hw-pod-block { min-height: 140px; }
.hw-pod.is-3 .hw-pod-block { min-height: 118px; }
.hw-pod-place { font-family: var(--f-pixel); font-size: var(--px-5); line-height: 1; color: var(--mc); -webkit-font-smoothing: none; }
.hw-pod.is-1 .hw-pod-place { font-size: var(--px-6); }
.hw-pod-name { max-width: 100%; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--fast); }
a.hw-pod:hover .hw-pod-name { color: var(--accent-hi); }
.hw-pod-line { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hw-pod.is-1 .hw-pod-line .zp-num { color: var(--gold); }
.hw-pod-best { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); white-space: nowrap; max-width: 100%; overflow: hidden; }
.hw-pod-best img { width: 16px; height: 16px; flex: none; }
/* The blocks rise one after another when the card enters (motion.css [data-rise]). */
.hw-pod.is-2 .hw-pod-block { --zr-d: 120ms; } .hw-pod.is-1 .hw-pod-block { --zr-d: 0ms; } .hw-pod.is-3 .hw-pod-block { --zr-d: 240ms; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hw-pod { transition: transform 220ms var(--ease); }
  .hw-pod:hover { transform: translateY(-4px); }
}
@media (max-width: 479px) {
  .hw-podium { padding: var(--s-3) var(--s-2) 0; gap: 6px; min-height: 0; }
  .hw-pod-fig { height: 150px; } .hw-pod.is-1 .hw-pod-fig { height: 176px; }
  .hw-pod-name { font-size: var(--mc-s1); }
  .hw-pod-best { display: none; }
  .hw-pod-place { font-size: var(--px-4); } .hw-pod.is-1 .hw-pod-place { font-size: var(--px-5); }
  .hw-pod.is-1 .hw-pod-block { min-height: 128px; } .hw-pod.is-2 .hw-pod-block { min-height: 108px; } .hw-pod.is-3 .hw-pod-block { min-height: 96px; }
}

.home-ladder { display: flex; flex-direction: column; }
.home-ladder .zp-ladder { flex: 1; }
.zp-ladder.home-ladder-rows { --cols: 30px minmax(0, 1fr) auto 44px; }
.home-ladder-rows .zp-lrow { padding-inline: var(--s-3); gap: 10px; }
.home-ladder-rows .hl-kits { display: none; }
.home-ladder-rows .zp-lrow:not(.is-head) { min-height: 56px; }
.hl-chips { display: flex; gap: 4px; justify-content: flex-end; }
@media (min-width: 640px) {
  .zp-ladder.home-ladder-rows { --cols: 34px minmax(0, 1fr) auto auto 52px; }
  .home-ladder-rows .zp-lrow { padding-inline: var(--s-4); gap: var(--s-3); }
  .home-ladder-rows .hl-kits { display: flex; }
  .home-ladder-rows .is-head .hl-kits { display: block; text-align: right; }
}

/* ---------- 5. who is winning ---------- */
.hw-grid { display: grid; gap: var(--s-5); align-items: start; }
.hw-col { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
@media (min-width: 900px) { .hw-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hw-card { min-width: 0; }
.hw-card .zp-panel-head { flex-wrap: wrap; row-gap: 4px; }
.hw-card .zp-panel-title { white-space: nowrap; }

.home-match-rows { display: grid; }
.home-mrow {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 58px minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 56px; padding: 8px var(--s-3); border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: background var(--fast);
}
.home-mrow:last-child { border-bottom: 0; }
.home-mrow:hover { background: var(--surface-2); }
.home-mrow:focus-visible { outline-offset: -2px; }
.home-mrow > img { width: 22px; height: 22px; }
.hm-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hm-side.is-b { flex-direction: row-reverse; text-align: right; }
.hm-side .zp-head { width: 26px; height: 26px; }
.hm-side > span { display: grid; min-width: 0; }
.hm-side b { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-side small { font-family: var(--f-mono); font-size: var(--mc-s1); line-height: 1.3; }
.hm-side.is-loser b { color: var(--text-3); font-weight: 500; }
.hm-side.is-loser .zp-head { opacity: 0.55; }
.hm-mid { display: grid; justify-items: center; gap: 1px; }
.hm-mid .zp-score { font-size: var(--px-2); line-height: 1; }
.hm-mid small { font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); white-space: nowrap; }
.hm-w { color: var(--win); }
.hm-l { color: var(--loss); }
@media (min-width: 640px) { .home-mrow { padding-inline: var(--s-4); gap: var(--s-3); } }
.home-trow .hm-mid .zp-tier { height: 22px; }
.home-trow.is-down .hm-side small { color: var(--loss); }
.home-trow:not(.is-down) .hm-side small { color: var(--win); }

/* Player of the week */
.hw-potw-body { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-5); }
.hw-potw-fig { position: relative; display: block; height: 220px; border-radius: var(--r-2); background: var(--sunken); border: 1px solid var(--line); box-shadow: var(--well); overflow: hidden; }
.hw-potw-fig .zp-skin { position: absolute; inset: 0; }
.hw-potw-main { display: grid; gap: var(--s-3); min-width: 0; align-content: center; }
.hw-potw-name { font-family: var(--f-display); font-size: var(--mc-s3); font-weight: 600; line-height: 1; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-potw-name:hover { color: var(--accent-hi); }
.hw-potw-tier { display: inline-flex; align-items: center; gap: 8px; }
.hw-potw-tier small { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); }
.hw-potw-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: rgba(0, 0, 0, 0.18); }
.hw-potw-nums div { display: grid; gap: 6px; padding: 10px 12px; border-right: 1px solid var(--line); }
.hw-potw-nums div:last-child { border-right: 0; }
.hw-potw-nums dt { font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); }
.hw-potw-nums dd { margin: 0; font-size: var(--px-3); line-height: 1; }
.hw-potw-kit { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
@media (max-width: 479px) {
  .hw-potw-body { grid-template-columns: 92px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); }
  .hw-potw-fig { height: 160px; }
  .hw-potw-name { font-size: var(--mc-s2); }
  .hw-potw-nums div { padding: 8px; }
  .hw-potw-nums dd { font-size: var(--px-2); }
}

/* Most played kits: one bar each, the longest is the busiest. */
.hw-bars { list-style: none; margin: 0; padding: var(--s-2) 0; }
.hw-kit {
  display: grid; grid-template-columns: 22px minmax(84px, 120px) minmax(0, 1fr) 64px; align-items: center; gap: 12px;
  padding: 10px var(--s-4); text-decoration: none; color: inherit; transition: background var(--fast);
}
.hw-kit:hover { background: var(--surface-2); }
.hw-kit img { width: 22px; height: 22px; }
.hw-kit-name { font-family: var(--f-display); font-weight: 600; font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-bar { display: block; height: 12px; background: var(--sunken); border-radius: 1px; overflow: hidden; box-shadow: var(--well); }
.hw-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); transform-origin: left; }
.hw-bars li:not(:first-child) .hw-bar i { background: var(--line-3); }
.hw-kit:hover .hw-bar i { background: var(--accent-mid); }
.hw-kit-n { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.hw-kit-n small { font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); }
@keyframes hw-grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hw-kits:not(.zr-pre) .hw-bar i { animation: hw-grow 900ms var(--ease) both; }
  .hw-bars li:nth-child(2) .hw-bar i { animation-delay: 70ms; } .hw-bars li:nth-child(3) .hw-bar i { animation-delay: 140ms; }
  .hw-bars li:nth-child(4) .hw-bar i { animation-delay: 210ms; } .hw-bars li:nth-child(5) .hw-bar i { animation-delay: 280ms; }
  .hw-bars li:nth-child(6) .hw-bar i { animation-delay: 350ms; }
}
@media (max-width: 479px) { .hw-kit { grid-template-columns: 20px 84px minmax(0, 1fr) 48px; gap: 8px; padding-inline: var(--s-3); } }

/* Records */
.hw-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.hw-rec { display: grid; gap: 6px; align-content: start; padding: 16px var(--s-4); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.hw-rec:nth-child(2n) { border-right: 0; }
.hw-rec dt { font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); }
.hw-rec dd { margin: 0; display: grid; gap: 6px; min-width: 0; }
.hw-rec-v { font-family: var(--f-pixel); font-size: var(--px-3); line-height: 1; color: var(--text); -webkit-font-smoothing: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-rec-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); font-weight: 600; text-decoration: none; }
.hw-rec-who:hover { color: var(--accent-hi); }
.hw-rec-who img { width: 20px; height: 20px; }
.hw-rec small { font-size: var(--fs-xs); color: var(--text-3); }
@media (max-width: 379px) { .hw-recs { grid-template-columns: minmax(0, 1fr); } .hw-rec { border-right: 0; } }

/* ---------- 6. kits ---------- */
.home-kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 720px) { .home-kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 1100px) { .home-kit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zp-kit {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "ico name" "top top" "meta meta";
  align-items: center; gap: 12px 14px; min-width: 0; padding: 16px;
  background: var(--surface) var(--shade); border: 1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: var(--lip), var(--raise);
  text-decoration: none; color: inherit;
}
/* The accent edge grows along the top on hover. Sized with right, not a transform: a static
   transform on every card is a compositor property node of its own (layerize cost on scroll). */
.zp-kit::before { content: ""; position: absolute; left: -1px; top: -1px; right: 100%; height: 3px; background: var(--accent); border-radius: var(--r-3) 0 0 0; transition: right 320ms var(--ease); }
.zp-kit:hover { background-color: var(--surface-2); }
.zp-kit:hover::before { right: -1px; border-radius: var(--r-3) var(--r-3) 0 0; }
.zp-kit:focus-visible { outline-offset: 2px; }
.zp-kit .zp-kit-ico { grid-area: ico; width: 52px; height: 52px; background: var(--sunken); box-shadow: var(--well); }
.zp-kit .zp-kit-ico img { width: 34px; height: 34px; }
.zp-kit-name { grid-area: name; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-kit-top { grid-area: top; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 26px; font-size: var(--fs-sm); }
.zp-kit-top .zp-head { width: 22px; height: 22px; }
.zp-kit-top b { font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-kit-top .zp-tier { margin-left: auto; }
.zp-kit-top .zp-faint { font-size: var(--fs-xs); }
.zp-kit-meta { grid-area: meta; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
.zp-kit-meta b { color: var(--text-2); font-weight: 500; }
@media (max-width: 400px) {
  .zp-kit { padding: 12px 10px; gap: 8px 10px; grid-template-columns: 38px minmax(0, 1fr); }
  .zp-kit .zp-kit-ico { width: 38px; height: 38px; }
  .zp-kit .zp-kit-ico img { width: 24px; height: 24px; }
  .zp-kit-top .zp-head { display: none; }
}

/* ---------- 7. the tier staircase ---------- */
.home-tierbar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4) 6px; align-items: end;
}
.home-tierbar li {
  position: relative; display: grid; gap: 3px; align-content: end; min-width: 0;
  padding: 0 0 2px;
}
.home-tierbar .ht-bar {
  display: block; height: calc(14px + (var(--h) - 1 - var(--row, 0)) * 9px); margin-bottom: 8px;
  background: color-mix(in srgb, var(--tc) 22%, var(--surface));
  box-shadow: inset 0 3px 0 var(--tc), inset 0 0 0 1px color-mix(in srgb, var(--tc) 35%, transparent);
  border-radius: 2px 2px 0 0;
}
/* The staircase builds step by step as it enters: each bar rises a little after the one before. */
.home-tierbar.zr-in .ht-bar { animation-delay: calc(var(--zr-d, 0ms) + 60ms + var(--h) * 22ms); }
.home-tierbar li:nth-child(n+6) { --row: 5; }
.home-tierbar li:nth-child(n+11) { --row: 10; }
.home-tierbar b { color: var(--tc); }
.home-tierbar .pts { font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-2); font-variant-numeric: tabular-nums; }
.home-tierbar .pts, .home-tierbar .n { line-height: 1.4; }
.home-tierbar .n { font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-tierbar li.has-players .ht-bar { background: color-mix(in srgb, var(--tc) 40%, var(--surface)); }
.home-tierbar li.has-players .n { color: var(--text); }
@media (min-width: 1000px) {
  .home-tierbar { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; }
  .home-tierbar li:nth-child(n) { --row: 0; }
  .home-tierbar .ht-bar { height: calc(18px + (var(--h) - 1) * 15px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-tierbar li { transition: transform 200ms var(--ease); }
  .home-tierbar li:hover { transform: translateY(-6px); }
}
.home-tiers-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.home-tiers-foot .zp-note { margin: 0; max-width: 56ch; }
.home-find { flex: 1 1 360px; max-width: 520px; padding-right: 4px; }
.home-find .zp-btn { margin: 0; box-shadow: none; }

/* ---------- 8. events and honours ---------- */
.home-event-grid { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .home-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .home-event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-event { display: flex; flex-direction: column; }
.home-event-body { flex: 1; display: grid; gap: var(--s-3); align-content: start; }
.home-event-body p { margin: 0; }
.home-event .zp-label { margin: 0; }
.home-event-text { color: var(--text-2); font-size: var(--fs-sm); }
.home-cup-count { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--text); min-height: 22px; }
.home-uhc-state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-2); }
.home-uhc-state.is-live { color: var(--live); }
.home-uhc-state.is-live .zp-dot { background: var(--live); box-shadow: 0 0 0 3px var(--live-wash); }
.home-uhc-state.is-open { color: var(--win); }
.home-uhc-state.is-open .zp-dot { background: var(--win); }
.home-uhc-big { display: flex; align-items: baseline; gap: 10px; }
.home-uhc-big span { color: var(--text-2); font-size: var(--fs-sm); }
.home-prizes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-2); }
.home-prizes li { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.home-prizes li:last-child { border-bottom: 0; }
.home-prizes li:first-child { background: var(--gold-wash); }
.home-prizes b { font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.home-prizes b::after { content: " coins"; font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.home-hof { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.home-hof li > a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.home-hof li > a:hover { background: var(--surface-2); }
.home-hof img { width: 22px; height: 22px; }
.home-hof .zp-who b { font-size: var(--fs-sm); }
.home-hof .zp-who .zp-head { width: 22px; height: 22px; }
.home-champ { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(245, 197, 66, 0.35); border-radius: var(--r-2); background: var(--gold-wash); text-decoration: none; color: inherit; }
.home-champ img { width: 36px; height: 36px; border-radius: var(--r-1); }
.home-champ span { display: grid; min-width: 0; }
.home-champ small { font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--gold); }
.home-champ b { font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 9. how to join ---------- */
.home-join .zp-step .zp-ip { justify-self: start; margin-top: var(--s-2); }

/* ---------- 10. ranks ---------- */
.home-ranks-grid { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 1100px) { .home-ranks-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.home-rank-table .zp-table { min-width: 0; }
@media (max-width: 559px) { .home-rank-table .zp-table th, .home-rank-table .zp-table td { padding: 9px 8px; } .home-rank-table .zp-table th:first-child, .home-rank-table .zp-table td:first-child { padding-left: 12px; } }
.home-rank-table .zp-table thead th { vertical-align: bottom; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; color: var(--text); }
.home-rank-table .zp-table thead th:first-child { font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.home-price { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--accent); }
.home-price.is-plus { color: var(--gold); }
.home-rank-table .zp-table thead th:nth-child(3) { background: rgba(245, 197, 66, 0.06); }
.home-rank-table .zp-table tbody td:nth-child(3) { background: rgba(245, 197, 66, 0.035); }
.home-rank-table .zp-table tbody th { font-weight: 400; color: var(--text-2); }
.home-rank-table td b { font-weight: 500; color: var(--text); font-size: var(--fs-sm); }
.home-group th { padding-top: 14px; font-family: var(--f-mono); font-size: var(--mc-s1) !important; letter-spacing: 0; text-transform: uppercase; color: var(--accent) !important; background: none; }
.home-rank-table tr.home-group:hover { background: none; }
.home-rank-table i.ok, .home-rank-table i.no { display: inline-block; vertical-align: middle; }
.home-rank-table i.ok { width: 6px; height: 11px; border-right: 2px solid var(--win); border-bottom: 2px solid var(--win); transform: rotate(45deg) translate(-1px, -2px); }
.home-rank-table i.no { width: 10px; height: 2px; background: var(--line-3); }
.home-rank-foot { flex-wrap: wrap; }
.home-rank-foot b { color: var(--text); font-weight: 500; }
.home-rank-foot .zp-btn { margin-bottom: 3px; }

.home-fx-tabs { padding: 0 var(--s-3); }
.home-fx-list { list-style: none; margin: 0; padding: 0; }
.home-fx-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc price"; gap: 0 var(--s-3); align-items: center;
  padding: 10px var(--s-4); border-bottom: 1px solid var(--line); transition: background var(--fast);
}
.home-fx-list li:hover { background: var(--surface-2); }
.home-fx-list li:last-child { border-bottom: 0; }
.home-fx-list b { grid-area: name; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; text-transform: uppercase; line-height: 1.2; }
.home-fx-list span { grid-area: desc; font-size: var(--fs-xs); color: var(--text-3); }
.home-fx-list em { grid-area: price; font-style: normal; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.home-fx-list em:not(.is-free)::after { content: " coins"; font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 400; color: var(--text-3); }
.home-fx-list em.is-free { color: var(--win); text-transform: uppercase; font-size: var(--mc-s1); letter-spacing: 0; }
.home-fx > .zp-panel-foot { margin: 0; }

/* ---------- 11. community ---------- */
.home-comm-grid { display: grid; gap: var(--s-7); align-items: center; }
.home-comm-grid .zp-lede { margin: var(--s-4) 0 0; }
.home-cmds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
.home-cmds > div { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--surface) var(--shade); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--lip), var(--raise); }
.home-cmds dt { font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; text-transform: uppercase; }
.home-cmds dt .zp-cmd { font-size: var(--mc-s1); text-transform: none; letter-spacing: 0; }
.home-cmds dd { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.home-cmds a { color: var(--accent-hi); }
@media (min-width: 1000px) { .home-comm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .home-cmds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The last band meets the footer directly. */
.zp-foot { margin-top: 0; }

/* ==========================================================================
   The Minecraft look for the rest of the front page (2026-10-19)
   ========================================================================== */
/* the podium: our own gold, iron and copper blocks */
.hw-podium { gap: 0; padding: 12px 12px 0; }
.hw-pod-block {
  border: 0; border-radius: 0; gap: 4px; padding: 12px 6px 14px;
  background: var(--mc-iron-block) 0 0 / 48px 48px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45);
}
.hw-pod.is-1 .hw-pod-block { background: var(--mc-gold-block) 0 0 / 48px 48px; }
.hw-pod.is-3 .hw-pod-block { background: var(--mc-copper-block) 0 0 / 48px 48px; }
.hw-pod-place { color: #fff; font-size: var(--mc-s3); text-shadow: 0.1111em 0.1111em 0 #3f3f3f, 0 0 0 #000; }
.hw-pod.is-1 .hw-pod-place { font-size: var(--mc-s4); }
.hw-pod-block > :not(.hw-pod-place) { background: rgba(0, 0, 0, 0.62); padding: 2px 6px; max-width: 100%; }
.hw-pod-name { font-weight: 400; }
a.hw-pod:hover .hw-pod-name { color: var(--mc-hover); }
@media (max-width: 559px) { .hw-pod-place { font-size: var(--mc-s2); } .hw-pod.is-1 .hw-pod-place { font-size: var(--mc-s3); } }

/* most played kits: experience bars */
.hw-bar { height: 10px; border-radius: 0; overflow: visible; background: var(--mc-xp-track) 0 0 / 20px 10px repeat-x; box-shadow: 0 0 0 2px #000; }
.hw-bar i { background: var(--mc-xp-fill) 0 0 / 20px 10px repeat-x; }
.hw-bars li:not(:first-child) .hw-bar i { background: var(--mc-xp-fill) 0 0 / 20px 10px repeat-x; filter: saturate(0.35) brightness(0.85); }
.hw-kit:hover .hw-bar i { background: var(--mc-xp-fill) 0 0 / 20px 10px repeat-x; filter: none; }
.hw-kit-name { font-weight: 400; }
.hw-kit-n small { color: var(--mc-green); }

/* the ticker */
.home-ticker { background: rgba(0, 0, 0, 0.5); border-block: 0; box-shadow: 0 -2px 0 #000, 0 2px 0 #000; }
.home-ticker-k { font-size: var(--mc-s1); }

/* kit tiles: inventory slots */
.zp-kit { border: 8px solid transparent; border-radius: 0; border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch; background: none; box-shadow: none; }
.zp-kit::before { display: none; }
.zp-kit:hover { background: rgba(255, 255, 255, 0.04); outline: 2px solid var(--accent); outline-offset: -4px; }
.zp-kit .zp-kit-ico { border: 2px solid transparent; border-radius: 0; border-image: var(--mc-slot) 1 fill / 2px / 0 stretch; background: none; box-shadow: none; }
.zp-kit .zp-kit-ico img { width: 32px; height: 32px; }
.zp-kit-name { font-size: var(--mc-s1); }
.zp-kit:hover .zp-kit-name { color: var(--mc-hover); }
.zp-kit-top b { font-weight: 400; }
.zp-kit-meta { border-top: 0; box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.06); font-size: var(--mc-s1); }
.zp-kit-meta b { font-weight: 400; }
@media (max-width: 559px) { .zp-kit .zp-kit-ico img { width: 24px; height: 24px; } }

/* the tier staircase: a stair of blocks in each tier's colour */
.home-tierbar .ht-bar {
  border-radius: 0;
  background: color-mix(in srgb, var(--tc) 30%, #0b0a10);
  box-shadow: inset 2px 2px 0 color-mix(in srgb, var(--tc) 55%, #fff 0%), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 0 0 0 2px #000;
}
.home-tierbar li.has-players .ht-bar { background: color-mix(in srgb, var(--tc) 55%, #0b0a10); }
.home-tierbar b { font-weight: 400; }
.home-tierbar .pts, .home-tierbar .n { font-size: var(--mc-s1); }

/* effects list and the ranks table */
.home-fx-list li { border-bottom: 0; }
.home-fx-list li:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
.home-fx-list li:hover { background: rgba(255, 255, 255, 0.08); }
.home-fx-list b { font-weight: 400; }
.home-fx-list em { font-weight: 400; color: var(--mc-gold); }
.home-fx-list em.is-free { color: var(--mc-green); }
.home-fx-list em:not(.is-free)::after { font-family: var(--mc-font); color: var(--mc-gray); }
.home-price { font-family: var(--mc-font); }
.home-cmds > div { border: 8px solid transparent; border-radius: 0; border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch; background: none; box-shadow: none; padding: 8px 10px; }
.home-cmds dt { font-weight: 400; }
.home-uhc-big b { font-size: var(--mc-s5); }

/* v2: the Discord band's buttons side by side */
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }