/* ===================================================================
   Championships — /cricket-championships

   Built to the approved full-page preview. Everything here is CSS and
   SVG: there is no screenshot of a diagram anywhere on this page.

   Two rules run through the whole file:

   1. Each diagram owns ONE coordinate space. The path's stair and its
      rungs, the allocation board's pool, wires and squads, and the club
      record and squad sheet are each positioned as percentages of a
      single box, so nothing drifts away from what it is attached to at
      any width.

   2. No section is taller than one screen on desktop, and nothing is
      hidden to achieve that — the diagrams reflow on narrow viewports
      instead of shrinking their type.
   =================================================================== */

.ch-hero, .ch-player-section, .ch-club-section, .ch-closing { color: var(--white); }

/* A full-bleed photographic layer. `cover` on an absolutely positioned
   image cannot gap or stretch whatever the source dimensions turn out
   to be, which matters because these four assets are supplied later.
   `.is-pending` is the same layer with no photograph in it — the
   section's own gradient carries it until the file arrives. */
.ch-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ch-backdrop img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================= 1 — HERO =========================== */
.ch-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 520px;
  height: 78svh;
  max-height: 860px;
  overflow: hidden;
  isolation: isolate;
  background: #02101f;
}
/* Keeps the player's head and bat clear of the copy: the figure sits
   right of centre in the supplied frame, so the crop holds that side. */
.ch-hero-art img { object-position: 68% 42%; }
.ch-hero-art.is-pending {
  background:
    radial-gradient(120% 90% at 78% 40%, rgba(0, 98, 255, 0.34), transparent 62%),
    linear-gradient(180deg, #0a2341, #02101f 78%);
}
.ch-hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(2, 14, 30, 0.95) 4%, rgba(2, 14, 30, 0.82) 30%, rgba(2, 14, 30, 0.22) 62%, transparent 82%);
}
.ch-hero-copy {
  position: relative; z-index: 2;
  width: min(640px, 50%);
  margin-inline: var(--pad-x) auto;
}
.ch-hero-lede { font-size: var(--text-body); color: #cfe0f3; margin: 14px 0 22px; max-width: 46ch; }
.ch-hero-marks {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 22px 0 0; padding: 0; list-style: none;
}
.ch-hero-marks li { display: flex; align-items: center; gap: 9px; font-size: var(--text-meta); color: #cfe0f3; }
.ch-hero-marks .icon { width: 20px; height: 20px; color: var(--cyan); flex: none; }

/* =============== 2 — SELECTION, NOT REGISTRATION ================== */
.ch-selection-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.ch-cycle { position: relative; }
.ch-cycle-track {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  margin: 16px 0 0; padding: 0; list-style: none;
}
.ch-stage { position: relative; text-align: center; }
.ch-stage-mark {
  display: grid; place-items: center;
  width: clamp(48px, 4.4vw, 64px); aspect-ratio: 1;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 98, 255, 0.34);
  background: linear-gradient(180deg, #06264a, #031a36);
  color: var(--cyan);
}
.ch-stage-mark .icon { width: 46%; height: 46%; }
.ch-stage h3 { font-size:var(--ds-card); margin-bottom: 5px; }
.ch-stage p { margin: 0; font-size:var(--ds-copy); color: var(--body-text); line-height:1.55; }
.ch-stage-num {
  display: inline-grid; place-items: center;
  margin-top: 10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 98, 255, 0.3);
  font-family: var(--display); font-weight: 700; font-size: 13px;
  color: var(--blue);
}
/* The connectors sit behind the stages on the same track, aligned to
   the gaps between the four circles rather than to the text below. */
.ch-cycle-wires {
  position: absolute; left: 0; right: 0;
  top: calc(16px + clamp(24px, 2.2vw, 32px));
  height: 10px; z-index: 0;
  overflow: visible;
}
.ch-cycle-wires path {
  fill: none; stroke: rgba(25, 200, 255, 0.85); stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}

/* ============================ 3 — THE PATH ======================== */
.ch-path-section { background: #031a36; }
.ch-path-head { max-width: 640px; }
.ch-path-note {
  margin: 14px 0 0; padding-left: 14px;
  border-left: 2px solid var(--cyan);
  font-size: var(--text-small); color: #b9d5e7;
}
/* One box, one grid. The stair is drawn edge to edge and each rung is
   placed at the horizontal centre of its own tread. */
.ch-path { position: relative; margin-top: clamp(20px, 3vh, 36px); }
.ch-path-stair { display: block; width: 100%; height: clamp(150px, 20vh, 240px); overflow: visible; }
.ch-stair-line, .ch-stair-head path {
  fill: none; stroke: var(--cyan); stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
/* Pinned at the top of the stair, where the line ends (x=96 of 100,
   y=4 of 34), in a square box so it stays a chevron. */
.ch-stair-head {
  position: absolute;
  left: 96%; top: calc(4 / 34 * 100%);
  width: clamp(18px, 1.8vw, 26px); aspect-ratio: 1;
  transform: translate(-42%, -50%);
  overflow: visible;
}
.ch-rungs {
  position: absolute; inset: 0; z-index: 1;
  margin: 0; padding: 0; list-style: none;
}
.ch-rung {
  position: absolute;
  left: var(--x); top: var(--y);
  /* Sits ON the tread: the marker's base lands on the line. */
  transform: translate(-50%, -100%);
  display: grid; justify-items: center; gap: 5px;
  width: min(22%, 190px);
  padding-bottom: 6px;
  text-align: center;
}
/* Derived from the stair's own viewBox, not guessed.

   The stair is `viewBox="0 0 100 34"` with preserveAspectRatio="none",
   so a viewBox unit maps linearly onto the box: x% is x/100, and y% is
   y/34 measured from the TOP. Its treads are

     tread 1  y=31  x 2..20   centre 11
     tread 2  y=24  x 20..40  centre 30
     tread 3  y=17  x 40..60  centre 50
     tread 4  y=10  x 60..78  centre 69

   so each rung's --y is that tread's y/34. The previous values were
   percentages of the box measured from the BOTTOM and unrelated to the
   drawing, which is why every node floated off its step. */
.ch-rung:nth-child(1) { --x: 11%; --y: 91.2%; }
.ch-rung:nth-child(2) { --x: 30%; --y: 70.6%; }
.ch-rung:nth-child(3) { --x: 50%; --y: 50%; }
.ch-rung:nth-child(4) { --x: 69%; --y: 29.4%; }
.ch-rung-num {
  font-family: var(--display); font-weight: 800; font-size: var(--text-meta);
  letter-spacing: 0.1em; color: rgba(155, 200, 240, 0.8);
}
.ch-rung-dot {
  display: grid; place-items: center;
  width: clamp(34px, 3vw, 44px); aspect-ratio: 1;
  border-radius: 50%;
  background: #0a2341;
  border: 1.5px solid rgba(25, 200, 255, 0.55);
  color: var(--cyan);
}
.ch-rung-dot .icon { width: 50%; height: 50%; }
.ch-rung.is-final .ch-rung-dot { background: var(--blue); border-color: var(--cyan); color: #fff; }
.ch-rung-label {
  font-family: var(--display); font-weight: 700;
  font-size: var(--text-small); color: #d8edff; line-height: 1.15;
}

/* ==================== 4 — SELECTED AS A PLAYER ==================== */
/* These two carry the page's two largest diagrams plus a championship
   band, so they set their own block padding rather than taking the
   shared section rhythm — without it both run past one screen on a
   laptop, which no section on this site is allowed to do. */
.ch-player-section, .ch-club-section { padding-block: clamp(26px, 3.6svh, 48px); }
.ch-player-section { background: #031a36; }
.ch-head { max-width: 780px; margin-bottom: clamp(12px, 1.8vh, 22px); }
.ch-head p { color: #cfe0f3; }

.ch-board {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(25, 200, 255, 0.28);
  background: linear-gradient(180deg, #06264a, #0b1f38);
}
.ch-board-art.is-pending {
  background:
    linear-gradient(135deg, rgba(0, 98, 255, 0.16) 0 14%, transparent 14.5%),
    linear-gradient(-135deg, rgba(0, 98, 255, 0.16) 0 14%, transparent 14.5%),
    radial-gradient(120% 140% at 50% 0%, rgba(0, 120, 255, 0.22), transparent 60%);
}
.ch-board-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.5fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(8px, 1.4vw, 22px);
  padding: min(clamp(16px, 2.2vw, 28px), 2.6svh) clamp(16px, 2.2vw, 28px);
}
.ch-board-label, .ch-squad-name, .ch-sheet-title, .ch-record-title {
  margin: 0 0 10px;
  font-family: var(--body); font-weight: 700;
  font-size: var(--text-meta); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan);
}
.ch-pool { border: 1px solid rgba(90, 150, 210, 0.28); border-radius: 10px; padding: min(clamp(10px, 1.2vw, 16px), 1.8svh) clamp(10px, 1.2vw, 16px); background: rgba(3, 20, 40, 0.5); }
.ch-pool-list, .ch-sheet-list, .ch-roles { margin: 0; padding: 0; list-style: none; }
.ch-sheet-list { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.ch-pool-row, .ch-sheet-row {
  display: flex; align-items: center; gap: 10px;
  padding: clamp(3px, 0.45vh, 6px) 0;
  border-bottom: 1px solid rgba(90, 150, 210, 0.16);
}
.ch-pool-row:last-child, .ch-sheet-row:last-child { border-bottom: 0; }
.ch-avatar {
  display: grid; place-items: center; flex: none;
  width: min(clamp(22px, 1.9vw, 28px), 3.4svh); aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(25, 200, 255, 0.4);
  color: var(--cyan);
}
.ch-avatar .icon { width: 62%; height: 62%; }
.ch-pool-bars, .ch-sheet-bars { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }
/* Texture on a record, not a reading. No figure is published for these
   and none is invented, which is why they are aria-hidden and carry no
   label, number or axis. */
.ch-meter { display: block; height: 5px; border-radius: 3px; background: rgba(120, 175, 225, 0.18); overflow: hidden; }
.ch-meter i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.ch-meter-2 { height: 4px; }
.ch-meter-2 i { background: rgba(120, 175, 225, 0.42); }

/* The fan is pinned BETWEEN the two columns and bleeds into the grid
   gaps, so its ends land on the pool and the squads rather than
   stopping in the middle of its own cell. Its paths now run the full
   0-100 of the viewBox for the same reason. */
.ch-allocation {
  width: calc(100% + 2 * clamp(8px, 1.4vw, 22px));
  margin-inline: calc(-1 * clamp(8px, 1.4vw, 22px));
  height: min(clamp(120px, 15vw, 180px), 20svh);
  overflow: visible;
}
.ch-allocation path {
  fill: none; stroke: var(--cyan); stroke-width: 1.4;
  vector-effect: non-scaling-stroke; opacity: 0.75;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
/* No node dots on these connectors. Every one of these SVGs is
   preserveAspectRatio="none" so its paths can span whatever box they
   land in, which means a <circle> is scaled by different factors on
   each axis and renders as a flat ellipse. The lines carry the meaning;
   the dots only advertised the distortion. */
/* The stacked-layout connector. Hidden until the board becomes a
   column, then it carries the same meaning downwards. */
.ch-allocation-v { display: none; width: 100%; height: 58px; overflow: visible; }
.ch-allocation-v path {
  fill: none; stroke: var(--cyan); stroke-width: 1.4;
  vector-effect: non-scaling-stroke; opacity: 0.75;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}

.ch-squads { display: grid; gap: clamp(8px, 1vh, 14px); }
.ch-squad-note {
  margin: 0; font-size: var(--text-meta); color: #a2bfda; font-style: italic;
  text-align: right;
}
.ch-squad {
  border: 1px solid rgba(25, 200, 255, 0.3);
  border-radius: 10px;
  padding: min(clamp(10px, 1.1vw, 15px), 1.7svh) clamp(10px, 1.1vw, 15px);
  background: rgba(4, 26, 52, 0.62);
}
.ch-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ch-roles li { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: var(--text-meta); color: #cfe0f3; }
.ch-role-icon { display: grid; place-items: center; width: min(clamp(28px, 2.4vw, 36px), 4.2svh); aspect-ratio: 1; color: var(--cyan); }
.ch-role-icon .icon { width: 100%; height: 100%; }
.ch-board-foot {
  position: relative; z-index: 1;
  margin: 0; padding: 9px clamp(16px, 2.2vw, 28px);
  border-top: 1px solid rgba(25, 200, 255, 0.24);
  background: rgba(3, 18, 36, 0.66);
  font-family: var(--body); font-weight: 700;
  font-size: var(--text-meta); letter-spacing: 0.14em; text-transform: uppercase;
  color: #bfe2f5; text-align: center;
}

/* Championship bands. Shared by the individual and team sections so
   both sets read at the same scale, as the preview has them. */
.ch-champs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
  margin-top: clamp(12px, 1.8vh, 22px);
}
.ch-champ {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
  align-items: start;
  padding-top: 14px;
  border-top: 1px solid rgba(90, 150, 210, 0.3);
}
.ch-champ-num {
  margin: 0;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1;
  color: rgba(25, 200, 255, 0.55);
}
.ch-champ-body h3 { font-size:var(--ds-card); margin-bottom: 2px; }
.ch-champ-level {
  margin: 0 0 6px;
  font-size: var(--text-meta); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan);
}
.ch-champ-body p { margin: 0; font-size:var(--ds-copy); color: #cfe0f3; line-height:1.55; }
.ch-champ-ring {
  display: block; grid-column: 2;
  height: min(clamp(14px, 1.6vw, 24px), 2.4svh); margin-top: 8px;
  border-radius: 50%;
  border: 1px solid rgba(25, 200, 255, 0.28);
  background: radial-gradient(60% 120% at 50% 0%, rgba(0, 120, 255, 0.28), transparent 70%);
}

/* ===================== 5 — SELECTED AS A CLUB ===================== */
.ch-club-section { background: #03182b; }
.ch-club {
  position: relative;
  border-radius: 14px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(25, 200, 255, 0.24);
  background: linear-gradient(180deg, #0a2341, #03182b);
}
.ch-club-art.is-pending {
  background: radial-gradient(90% 120% at 20% 40%, rgba(0, 98, 255, 0.2), transparent 62%);
}
/* The shared coordinate space for the two surfaces.

   Both figures are placed as percentages of this stage, so the record
   and the sheet hold their relationship to each other and to the
   photograph behind them at any width. When the supplied background
   arrives these four pairs are the only numbers that need measuring
   against it — nothing else moves. */
.ch-club-stage {
  --book-x: 3%;  --book-y: 13%; --book-w: 45%; --book-h: 74%;
  --sheet-x: 52%; --sheet-y: 4%;  --sheet-w: 45%; --sheet-h: 90%;
  position: relative; z-index: 1;
  /* Wide and shallow, so both surfaces read at the scale the reference
     gives them. It was `aspect-ratio: 3/2` capped at `max-height: 38svh`,
     which shrank the box to a letterbox while the record and the sheet
     stayed content-sized — two small cards marooned in an empty band.
     Shrinking to fit is what the brief rules out; the section earns its
     height back from padding instead. */
  /* Wide and shallow, spanning the band. A 1100px cap left a 117px
     dead margin each side at 1482 and 200px at 1920, which read as the
     two surfaces floating in an empty box rather than filling it. */
  aspect-ratio: 3.2;
  margin: clamp(14px, 2vw, 24px) auto 0;
  /* Full width, always. No height-based cap.

     There was one, and it was wrong: at 1482x820 it cut the stage to
     898px inside a 1338px band and left a dead margin either side, so
     the record and the sheet read small against the reference again.
     That is shrink-to-fit, which the brief rules out.

     The consequence is deliberate and documented: with the heading,
     the consent strip and the three team championships around it, this
     section runs past one screen on a 820px-tall laptop. The reference
     scale wins. See the exceptions note in CONTINUE.md. */
  width: 100%;
}
.ch-record, .ch-sheet {
  position: absolute;
  margin: 0;
  border-radius: 10px;
  padding: clamp(10px, 1.3vw, 18px);
  backdrop-filter: blur(3px);
}
.ch-record {
  left: var(--book-x); top: var(--book-y); width: var(--book-w); height: var(--book-h);
  display: flex; flex-direction: column;
  border: 1px solid rgba(25, 200, 255, 0.34);
  background: linear-gradient(180deg, rgba(6, 34, 64, 0.88), rgba(4, 22, 44, 0.84));
}
.ch-record-title { display: flex; align-items: center; gap: 9px; }
.ch-record-title .icon { width: 20px; height: 20px; }
.ch-record-list { flex: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: space-evenly; gap: clamp(6px, 0.9vh, 12px); }
.ch-record-list li {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: clamp(6px, 0.9vh, 10px);
  border-bottom: 1px solid rgba(120, 175, 225, 0.2);
  font-size: var(--text-small); color: #d8edff;
}
.ch-record-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ch-record-list .icon { width: 20px; height: 20px; color: var(--cyan); flex: none; }

.ch-club-wire {
  position: absolute; left: var(--book-x); right: 4%;
  top: 30%; height: 22%; z-index: 0; overflow: visible;
}
.ch-club-wire path {
  fill: none; stroke: var(--cyan); stroke-width: 1.5;
  vector-effect: non-scaling-stroke; opacity: 0.8;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.ch-sheet {
  left: var(--sheet-x); top: var(--sheet-y); width: var(--sheet-w); height: var(--sheet-h);
  display: flex; flex-direction: column;
  border: 1px solid rgba(160, 200, 235, 0.5);
  background: linear-gradient(180deg, rgba(238, 245, 252, 0.96), rgba(219, 232, 245, 0.94));
  color: var(--ink);
}
.ch-sheet-title { color: var(--blue-deep); }
.ch-sheet-row { border-bottom-color: rgba(60, 110, 160, 0.22); }
.ch-sheet .ch-avatar { border-color: rgba(0, 98, 255, 0.45); color: var(--blue); }
.ch-sheet .ch-meter { background: rgba(60, 110, 160, 0.16); }
.ch-sheet .ch-meter-2 i { background: rgba(60, 110, 160, 0.4); }
.ch-sheet figcaption { margin-top: 10px; font-size: var(--text-meta); color: #4a688c; }

.ch-consent {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  margin: clamp(14px, 2vh, 22px) clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 24px);
  padding: clamp(10px, 1.2vw, 15px) clamp(12px, 1.5vw, 20px);
  border: 1px solid rgba(25, 200, 255, 0.4);
  border-radius: 10px;
  background: rgba(3, 20, 40, 0.72);
  font-size: var(--text-small); color: #cfe0f3; line-height: 1.45;
}
.ch-consent strong { color: #fff; font-weight: 700; }
.ch-consent-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: var(--cyan); }
.ch-consent-icon .icon { width: 100%; height: 100%; }

/* ========================= 6 — ELIGIBILITY ======================== */
.ch-elig-grid {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}
.ch-elig-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(8px, 1.2vh, 14px); }
.ch-elig-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 20px); align-items: start;
  padding: clamp(12px, 1.5vw, 18px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.ch-elig-num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(22px, 2vw, 30px); line-height: 1; color: rgba(0, 98, 255, 0.4);
}
.ch-elig-icon { display: grid; place-items: center; width: clamp(26px, 2.2vw, 34px); aspect-ratio: 1; color: var(--blue); }
.ch-elig-icon .icon { width: 100%; height: 100%; }
.ch-elig-body h3 { font-size:var(--ds-card); margin-bottom: 3px; }
.ch-elig-body p { margin: 0; font-size:var(--ds-copy); color: var(--body-text); line-height:1.55; }
@media (hover: hover) and (pointer: fine) {
  .ch-elig-row:hover {
    border-color: rgba(0, 98, 255, 0.55);
    box-shadow: 0 6px 22px rgba(0, 60, 140, 0.12);
    transform: translateY(-2px);
  }
  .ch-elig-row:hover .ch-elig-num { color: var(--blue); }
}

/* =========================== 7 — CLOSING ========================== */
.ch-closing {
  position: relative;
  display: flex; align-items: center;
  overflow: hidden; isolation: isolate;
  min-height: 380px;
  padding-block: clamp(38px, 6svh, 70px);
  background: #031a36;
}
.ch-closing-art.is-pending {
  background: radial-gradient(90% 120% at 82% 50%, rgba(0, 110, 255, 0.24), transparent 62%);
}
.ch-closing-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(3, 20, 42, 0.95) 6%, rgba(3, 20, 42, 0.72) 40%, rgba(3, 20, 42, 0.1) 76%);
}
.ch-closing-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3vw, 50px); align-items: center;
}
.ch-closing-copy { max-width: 620px; }
.ch-closing-copy p { color: #cfe0f3; }
.ch-climb { width: 100%; height: auto; max-height: 230px; overflow: visible; }
.ch-climb-line {
  fill: none; stroke: var(--cyan); stroke-width: 2.2;
  vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.ch-climb-star { fill: none; stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 1; }

/* ===================== motion, once it arrives ====================

   Every effect below animates FROM its hidden state TO the state the
   page already renders without help. Nothing is hidden by a base rule.

   That ordering is the whole point: if this page's script is blocked,
   fails or never loads, the cycle, the path, the allocation board, the
   club record and the closing climb are all simply there, drawn and
   legible. An initial `opacity: 0` waiting for a class would leave real
   content — six ranked rows, four rungs, a squad sheet — invisible to
   anyone without JavaScript. `animation-fill-mode: both` holds the
   from-state through the delay, so the sequencing still reads.
   ================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-cycle].is-running .ch-stage {
    animation: ch-rise 620ms cubic-bezier(.2,.7,.3,1) both;
    animation-delay: calc(var(--i) * 150ms);
  }
  [data-cycle].is-running .ch-cycle-wires path { animation: ch-draw 420ms ease both; }
  [data-cycle].is-running .ch-cycle-wires path:nth-child(1) { animation-delay: 190ms; }
  [data-cycle].is-running .ch-cycle-wires path:nth-child(2) { animation-delay: 340ms; }
  [data-cycle].is-running .ch-cycle-wires path:nth-child(3) { animation-delay: 490ms; }

  [data-path].is-running .ch-stair-line { animation: ch-draw 1100ms ease both; }
  [data-path].is-running .ch-stair-head path { animation: ch-draw 260ms ease 1000ms both; }
  [data-path].is-running .ch-rung {
    animation: ch-rung-in 520ms cubic-bezier(.2,.7,.3,1) both;
    animation-delay: calc(220ms + var(--i) * 210ms);
  }

  [data-board].is-running .ch-pool-row {
    animation: ch-slide-left 460ms ease both;
    animation-delay: calc(var(--i) * 90ms);
  }
  [data-board].is-running .ch-allocation path { animation: ch-draw 620ms ease both; }
  [data-board].is-running .ch-allocation path:nth-of-type(1) { animation-delay: 560ms; }
  [data-board].is-running .ch-allocation path:nth-of-type(2) { animation-delay: 640ms; }
  [data-board].is-running .ch-allocation path:nth-of-type(3) { animation-delay: 720ms; }
  [data-board].is-running .ch-allocation path:nth-of-type(4) { animation-delay: 800ms; }
  [data-board].is-running .ch-allocation path:nth-of-type(5) { animation-delay: 880ms; }
  [data-board].is-running .ch-allocation path:nth-of-type(6) { animation-delay: 960ms; }
  [data-board].is-running .ch-allocation-v path { animation: ch-draw 620ms ease both; }
  [data-board].is-running .ch-allocation-v path:nth-of-type(2) { animation-delay: 140ms; }
  [data-board].is-running .ch-squad {
    animation: ch-slide-right 520ms ease both;
    animation-delay: calc(1120ms + var(--i) * 160ms);
  }

  /* The record fills in first, then a separate wire runs to the sheet. */
  [data-club].is-running .ch-record-list li {
    animation: ch-rise 480ms ease both;
    animation-delay: calc(var(--i) * 170ms);
  }
  [data-club].is-running .ch-club-wire path { animation: ch-draw 620ms ease 720ms both; }
  [data-club].is-running .ch-sheet { animation: ch-rise 560ms ease 1340ms both; }
  [data-club].is-running .ch-sheet-row {
    animation: ch-rise 420ms ease both;
    animation-delay: calc(1480ms + var(--i) * 110ms);
  }

  [data-climb].is-running .ch-climb-line { animation: ch-draw 1000ms ease both; }
  [data-climb].is-running .ch-climb-star { animation: ch-fade 460ms ease 940ms both; }

  @keyframes ch-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes ch-rung-in { from { opacity: 0; transform: translate(-50%, calc(-100% + 10px)); } to { opacity: 1; transform: translate(-50%, -100%); } }
  @keyframes ch-slide-left { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
  @keyframes ch-slide-right { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
  @keyframes ch-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes ch-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* Reduced motion: the base state is already the finished state, so
   there is nothing to resolve — only the hover transition to drop. */
@media (prefers-reduced-motion: reduce) {
  .ch-elig-row { transition: none; }
}

/* On a short desktop the two diagram sections give back padding and a
   step of body type, which keeps both inside one screen from 1280x720 up.

   This block was written once, then silently deleted: a later edit that
   replaced the motion section spliced the file between two anchors and
   took everything between them, this rule included. Nothing failed —
   the sections simply grew again. If you rewrite a region of this file
   by index, check what else lives inside it.

   Note what this rule does NOT do: it never caps a width. Height
   pressure is answered with padding and type; the only width that
   responds to height is the club stage, which stays centred and never
   goes narrower than the screen actually requires. */
@media (min-width: 901px) and (max-height: 960px) {
  .ch-player-section, .ch-club-section { padding-block: clamp(18px, 2.6svh, 34px); }
  .ch-head { margin-bottom: 10px; }
  .ch-champs { margin-top: 12px; }
  .ch-champ { padding-top: 10px; }
  .ch-champ-body p { font-size:var(--ds-copy); }
  .ch-board-inner { padding-block: 12px; }
  .ch-board-foot { padding-block: 7px; }
  .ch-consent { margin-block: 12px 14px; }
  .ch-pool-row, .ch-sheet-row { padding-block: 2px; }
  .ch-board-label, .ch-squad-name { margin-bottom: 6px; }
}

/* ========================== responsive ============================ */
@media (max-width: 1100px) {
  .ch-selection-grid, .ch-elig-grid, .ch-closing-inner { grid-template-columns: minmax(0, 1fr); }
  .ch-closing-inner { gap: clamp(18px, 3vh, 30px); }
  .ch-climb { max-height: 170px; }
  /* The board becomes a column: pool, allocation, squads. The wires
     turn a quarter so they still read as flow, not decoration. */
  .ch-board-inner { grid-template-columns: minmax(0, 1fr); }
  .ch-allocation { display: none; }
  .ch-allocation-v { display: block; }
  .ch-squad-note { text-align: left; }
}
@media (max-width: 900px) {
  .ch-hero { height: auto; min-height: 0; padding-block: clamp(96px, 14vh, 150px) clamp(34px, 6vh, 60px); }
  .ch-hero-copy { width: auto; }
  .ch-hero-shade {
    background: linear-gradient(180deg, rgba(2, 14, 30, 0.92) 12%, rgba(2, 14, 30, 0.8) 52%, rgba(2, 14, 30, 0.5));
  }
  .ch-cycle-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 24px); }
  .ch-cycle-wires { display: none; }
  .ch-champs { grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 2vh, 18px); }
  .ch-champ-ring { display: none; }

  /* The path stands up rather than shrinking: four rungs down the page,
     with the stair redrawn as a vertical spine. Nothing is dropped. */
  .ch-path-stair { display: none; }
  .ch-path { padding-left: 26px; }
  .ch-path::before {
    content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
    width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, var(--cyan), rgba(25, 200, 255, 0.15));
  }
  .ch-rungs { position: static; display: grid; gap: clamp(14px, 2.4vh, 22px); }
  .ch-rung {
    position: static; transform: none;
    width: auto;
    grid-template-columns: auto auto minmax(0, 1fr);
    justify-items: start; align-items: center; gap: 12px;
    text-align: left;
  }
  /* Stacked rungs are no longer centred, so they rise straight up. */
  [data-path].is-running .ch-rung { animation-name: ch-rise; }

  /* The club surfaces stack. The sheet keeps its own proportions. */
  .ch-club-stage { aspect-ratio: auto; max-height: none; display: grid; gap: clamp(14px, 2.4vh, 22px); }
  .ch-record, .ch-sheet { position: static; width: auto; height: auto; }
  .ch-club-wire { display: none; }
  [data-club].is-running .ch-sheet { animation-delay: 700ms; }
  [data-club].is-running .ch-sheet-row { animation-delay: calc(840ms + var(--i) * 100ms); }
}
@media (max-width: 620px) {
  .ch-cycle-track { grid-template-columns: minmax(0, 1fr); }
  .ch-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; text-align: left; align-items: center; }
  .ch-stage-mark { margin: 0; grid-row: span 2; }
  .ch-stage h3 { align-self: end; }
  .ch-stage p { grid-column: 2; }
  .ch-stage-num { display: none; }
  .ch-roles { grid-template-columns: minmax(0, 1fr); }
  .ch-roles li { grid-template-columns: auto minmax(0, 1fr); display: grid; justify-items: start; text-align: left; gap: 10px; align-items: center; }
  .ch-elig-row { grid-template-columns: auto minmax(0, 1fr); }
  .ch-elig-icon { display: none; }
}