/* ==================================================================
   MCS — the cup (/cup/)
   Loaded after site.css and matches.css and built from their tokens and
   pieces: notched chips, pixel shields, heads, the live strip. The
   bracket is the showpiece: Minecraft-panel tiles on a floodlit pitch
   (the halfway line and centre circle sit behind the final), joined by
   pixel wires, with every winner's path lit in the site's lime.
   Team colours arrive at runtime as --c, --cv (lifted for this dark
   page), --ce (shield rim) and --on (readable text on --c).
   ================================================================== */

:root {
  --cup-wire: rgba(255, 255, 255, .17);
  --cup-lit: var(--grad-2);
  --cup-live: #ff5a5a;
  --tr-hi: var(--grad-1);
  --tr-mid: var(--grad-2);
  --tr-lo: #78bf45;
  --tr-base: #2a4534;
  --tr-plate: #a9d94e;
  --shield: polygon(0 0, 100% 0, 100% 57.14%, 91.67% 57.14%, 91.67% 71.43%, 83.33% 71.43%, 83.33% 78.57%, 75% 78.57%,
    75% 85.71%, 66.67% 85.71%, 66.67% 92.86%, 58.33% 92.86%, 58.33% 100%, 41.67% 100%, 41.67% 92.86%, 33.33% 92.86%,
    33.33% 85.71%, 25% 85.71%, 25% 78.57%, 16.67% 78.57%, 16.67% 71.43%, 8.33% 71.43%, 8.33% 57.14%, 0 57.14%);
}

/* ── page frame ──────────────────────────────────────────────────── */

.cup { padding-top: calc(var(--nav-h) + 2.5rem); }
.cup-view, .cup > .cup-wrap { position: relative; }
.cup-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.cup-view > * + * { margin-top: 1.25rem; }
.cup-view > .cup-past { margin-top: 3rem; }
.cup .mh-stale { margin: 0 0 1.25rem; }

/* the big cup: a 16x16 pixel trophy */
.cup-trophy { display: inline-block; line-height: 0; }
.cup-trophy-svg { width: 100%; height: 100%; }
.tr-hi { fill: var(--tr-hi); }
.tr-mid { fill: var(--tr-mid); }
.tr-lo { fill: var(--tr-lo); }
.tr-base { fill: var(--tr-base); }
.tr-plate { fill: var(--tr-plate); }
.cup-trophy.is-off { --tr-hi: #3b4a41; --tr-mid: #2f3d35; --tr-lo: #26322b; --tr-base: #1b2520; --tr-plate: #34443a; }

/* ── the head ────────────────────────────────────────────────────── */

.cup-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  min-height: 15rem;
  padding: 2rem 2.5rem 2.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(34% 110% at 88% 55%, color-mix(in srgb, var(--grad-2) 15%, transparent), transparent 70%),
    radial-gradient(38% 70% at 14% 0%, rgba(255, 244, 214, .07), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 64px, transparent 64px 128px),
    rgba(2, 6, 4, .5);
  box-shadow: inset 0 0 0 1px var(--card-edge);
}
/* a lime kit stripe along the top */
.cup-hero-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--grad-3), var(--grad-2) 50%, var(--grad-1));
}
.cup-hero.is-slim .cup-hero-card { min-height: 0; grid-template-columns: minmax(0, 1fr); }

.cup-hero-text { min-width: 0; }
.cup-hero-text .mh-back { display: flex; width: fit-content; margin-bottom: 1rem; font-size: 14px; }

.cup-title {
  margin: .9rem 0 1.1rem;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.cup-chips { justify-content: flex-start; }

/* the state, in words: sign-ups open, live, last cup... */
.cup-state {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .32rem .75rem;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #0b1210;
  background: var(--accent-soft);
  clip-path: var(--notch);
}
.cup-state i {
  width: 8px;
  height: 8px;
  background: currentColor;
  clip-path: var(--px-dot);
  animation: mh-blink 1.2s steps(2, jump-none) infinite;
}
.cup-state.is-open { background: var(--grad-2); }
/* white on this red is 4.6:1 */
.cup-state.is-live { color: #fff; background: #d42f2f; }
.cup-state.is-on { color: var(--accent-soft); background: color-mix(in srgb, var(--grad-3) 18%, transparent); }
.cup-state.is-done { color: var(--text-strong); background: rgba(255, 255, 255, .09); }
.cup-state.is-off { color: #ffe6ad; background: rgba(255, 190, 70, .12); }

.cup-hero-art { position: relative; display: grid; place-items: center; padding-right: 1rem; }
.cup-hero-art .cup-trophy {
  width: 148px;
  height: 148px;
  filter: drop-shadow(0 0 34px color-mix(in srgb, var(--grad-2) 38%, transparent));
}
/* a pool of floodlight under the cup */
.cup-hero-art::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 190px;
  height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--grad-2) 22%, transparent), transparent);
  z-index: -1;
}
.cup-hero-art.is-off .cup-trophy { filter: none; }
.cup-hero-art.is-off::after { display: none; }

/* sign-ups: the count and one pixel shield per spot */
.cup-hero-art.is-count { justify-items: end; gap: 1rem; padding-right: 0; }
.cup-hero-art.is-count::after { display: none; }
.cup-count { display: flex; flex-direction: column; align-items: flex-end; margin: 0; }
.cup-count b {
  font-size: 104px;
  font-weight: 800;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.cup-count b span { font-size: .45em; font-weight: 700; letter-spacing: 0; }
.cup-count-label {
  margin-top: .35rem;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cup-meter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 16.5rem; }
.cup-meter i {
  width: 18px;
  height: 21px;
  background: var(--c);
  clip-path: var(--shield);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .28);
}
.cup-meter i.is-open { background: rgba(255, 255, 255, .09); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .04); }

/* ── sign-ups: how to join ───────────────────────────────────────── */

.cup-join-card {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2.5rem;
  padding: 1.6rem 2rem;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--card-edge), inset 3px 0 0 var(--grad-2);
}
.cup-join-card:has(.cup-join-gap) { grid-template-columns: minmax(0, 1fr) auto; }
.cup-join-gap { display: none; }
.cup-steps { margin: 0; max-width: none; }
.cup-steps li { margin: .35rem 0; font-size: 1.05rem; }
.cup-steps code { font-size: .95em; }

/* ── live now and up next ────────────────────────────────────────── */

/* live matches beside what's up next; either one alone takes the row */
.cup-now {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem 2rem;
}
.cup-now > :only-child { grid-column: 1 / -1; }
.cup-now-block { min-width: 0; }
.cup-live-list { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.cup-now > :only-child .cup-next { grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); }
/* one live match and nothing else due: a full-width scoreboard */
@media (min-width: 720px) {
  .cup-now > :only-child .cup-live-list:has(> :only-child) .mh-live-score { font-size: 3.4rem; }
  .cup-now > :only-child .cup-live-list:has(> :only-child) .cup-live-card { padding: 1.4rem 2rem 1.2rem; }
  .cup-now > :only-child .cup-live-list:has(> :only-child) .mh-live-side { font-size: 1.35rem; gap: .8rem; }
  .cup-now > :only-child .cup-live-list:has(> :only-child) .mh-live-heads .mh-ava { width: 28px; height: 28px; }
}
.cup-live-card { padding: 1.15rem 1.35rem 1rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cup-live) 28%, transparent); }
.cup-live-card .mh-live-top > span:first-child { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; color: var(--text-strong); }
.cup-live-pitch { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cup-live-card .mh-live-board { margin: .9rem 0; }
.cup-live-card .mh-live-side { font-size: 1.1rem; }
.cup-live-card .mh-live-score { font-size: 2.6rem; }
.cup-live-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .6rem;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: #d42f2f;
  clip-path: var(--notch);
}
.cup-live-tag i, .cup-dot {
  width: 7px;
  height: 7px;
  background: currentColor;
  clip-path: var(--px-dot);
  animation: mh-blink 1.2s steps(2, jump-none) infinite;
}

.cup-next-title {
  display: flex;
  align-items: center;
  min-height: 19.5px;
  margin: 0 0 1rem;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.cup-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cup-next li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grad-2) 22%, transparent);
  clip-path: var(--notch);
}
.cup-next-code {
  padding: .12rem .45rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #0b1210;
  background: var(--grad-2);
  clip-path: var(--notch);
}
.cup-next-side { display: flex; align-items: center; gap: .55rem; min-width: 0; font-weight: 700; color: #fff; }
.cup-next-side > span:not(.mh-crest) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a fixture: both names hug the "v" in the middle */
.cup-next-side:not(.is-away) { justify-content: flex-end; }
.cup-next-side.is-away { justify-content: flex-start; }
.cup-next-v { font-size: 12px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; }
.cup-next li.cup-next-more {
  display: block;
  padding: .45rem 1rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
  background: none;
  box-shadow: none;
}

/* ── the champions ───────────────────────────────────────────────── */

.cup-champ-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.75rem 2rem 2.4rem;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(46% 70% at 50% 0%, color-mix(in srgb, var(--cv) 28%, transparent), transparent 72%),
    radial-gradient(30% 45% at 50% 22%, color-mix(in srgb, var(--grad-2) 16%, transparent), transparent 70%),
    radial-gradient(40% 80% at 0% 100%, color-mix(in srgb, var(--cv) 10%, transparent), transparent 70%),
    radial-gradient(40% 80% at 100% 100%, color-mix(in srgb, var(--cv) 10%, transparent), transparent 70%),
    rgba(2, 6, 4, .55);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cv) 32%, transparent);
}
/* the champions' kit stripe along the top */
.cup-champ-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--cv);
}
.cup-champ-card .cup-trophy.is-big {
  width: 124px;
  height: 124px;
  filter: drop-shadow(0 0 32px color-mix(in srgb, var(--grad-2) 45%, transparent));
}
.cup-champ-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1.4rem 0 .6rem;
  padding: .3rem .8rem;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1c1400;
  background: var(--r-top);
  clip-path: var(--notch);
}
.cup-champ-label .mh-i { width: 14px; height: 13px; }
.cup-champ-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  overflow-wrap: anywhere;
}
.cup-champ-name .mh-crest { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.mh-crest-lg { --s: 46px; }

.cup-champ-members {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cup-champ-members a {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  color: var(--text-strong);
  text-decoration: none;
}
.cup-champ-members a:hover span { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.cup-champ-members .mh-ava { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cv) 60%, transparent); }
.cup-champ-final { margin: 1.5rem 0 0; font-size: 15px; color: var(--text); }
.cup-champ-final b { color: #fff; }
.cup-champ-final .more { margin-left: .5rem; font-size: 13px; }

/* pixel sparkles, blinking out of step */
.cup-sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cup-sparks i {
  position: absolute;
  width: 8px;
  height: 8px;
  clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%);
  animation: mh-blink 2.4s steps(2, jump-none) infinite;
  animation-delay: var(--d, 0s);
}
.cup-sparks .k0 { background: var(--cv); }
.cup-sparks .k1 { background: var(--grad-2); width: 6px; height: 6px; }
.cup-sparks .k2 { background: var(--grad-1); width: 10px; height: 10px; opacity: .7; }

.cup-runner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .75rem;
  padding: .9rem 1.25rem;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--card-edge), inset 3px 0 0 var(--cv);
}
.cup-runner-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.cup-runner-label { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.cup-runner-who b { color: #fff; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cup-runner-heads { display: flex; gap: .3rem; }

.cup-called { margin: 0; }

/* ── the bracket ─────────────────────────────────────────────────── */

/* wider than the text column when the board can use the room (cup.js
   measures with the same gutter, 2.5vw between 12 and 40 px) */
.cup-wide {
  --wpad: clamp(12px, 2.5vw, 40px);
  width: 100%;
  /* never narrower than the 1180 px column's content (1156 px) */
  max-width: clamp(calc(1156px + 2 * var(--wpad)), calc(var(--need, 0px) + 2 * var(--wpad)), 1760px);
  margin-inline: auto;
  padding-inline: var(--wpad);
}
@media (max-width: 1180px) { .cup-wide { --wpad: var(--gutter); } }

.cup-br {
  position: relative;
  padding: 1.75rem 28px 2rem;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(30% 60% at 10% 0%, rgba(255, 244, 214, .06), transparent 70%),
    radial-gradient(30% 60% at 90% 0%, rgba(255, 244, 214, .05), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .016) 0 72px, transparent 72px 144px),
    var(--card);
  box-shadow: inset 0 0 0 1px var(--card-edge);
}
/* the two-sided board is a pitch seen from above: the halfway line and
   centre circle behind the final, a soft floodlight on the trophy */
.cup-br.is-split::before,
.cup-br.is-split::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.cup-br.is-split::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .045);
}
.cup-br.is-split::after {
  left: 50%;
  top: calc(50% + 2.2rem);
  width: min(360px, 40%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .045);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--grad-2) 7%, transparent), transparent);
}
.cup-br.has-champ.is-split::after {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--grad-2) 12%, transparent), transparent);
}

.cup-br .mh-sec-head { margin-bottom: 1.5rem; }

/* round chips on the one-sided board */
.cup-rchips { display: flex; flex-wrap: wrap; gap: .35rem; }
.cup-rchips button {
  padding: .4rem .8rem;
  font: 700 13px/1.4 var(--font);
  color: var(--text);
  background: rgba(0, 0, 0, .3);
  border: 0;
  clip-path: var(--notch);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cup-rchips button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.cup-rchips button[aria-pressed="true"] { color: #fff; background: var(--btn); box-shadow: inset 0 3px 0 var(--btn-hi), inset 0 -3px 0 var(--btn-lo); }
.cup-rchips button:focus-visible { outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--accent-soft); }

/* the board's own sideways scroller; soft edges where there is more */
.cup-scroll {
  margin-inline: -28px;
  padding: 6px 28px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--btn-hi) rgba(255, 255, 255, .06);
}
.cup-scroll.can-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.cup-scroll.can-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.cup-scroll.can-l.can-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
/* focused: no soft edges, which would fade the focus ring out too */
.cup-scroll:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; -webkit-mask-image: none; mask-image: none; }

.cup-cols {
  --tile-h: 80px;
  --final-h: 96px;
  display: grid;
  grid-auto-flow: column;
  column-gap: var(--gap, 34px);
  justify-content: center;
  /* fill the frame, tiles growing to their largest; never below the
     smallest tiles, which is when the frame starts to scroll */
  width: 100%;
  min-width: min-content;
}
.cup-cols.is-line {
  grid-auto-columns: var(--col-w, minmax(var(--tile-min), var(--tile-max)));
  justify-content: start;
}
/* one-sided with room for every round: the same wires as the two-sided board */
.cup-cols.is-tree { grid-auto-columns: minmax(var(--tile-min), var(--tile-max)); }

.cup-col { display: flex; flex-direction: column; min-width: 0; }
.cup-col-h {
  margin: 0 0 .6rem;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--text-faint);
}
.cup-col.is-f .cup-col-h { color: var(--accent-soft); }
.cup-col.has-live .cup-col-h { color: #ff8a8a; }

.cup-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* every slot in a column is the same height, so a match sits exactly
   between the two that feed it */
.cup-slot {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--tile-h) + 18px);
  padding: 9px 0;
}
.cup-col.is-f .cup-slot { min-height: calc(var(--final-h) + 18px); }

/* wires. Out of a tile to the middle of the gap, then half way up or
   down to meet its pair; into the next tile from the middle of the gap.
   Dashed while still to be played, solid lime once a winner took it. */
.cup-slot.has-out::after,
.cup-slot.has-in::before,
.cup-slot.in-l::before,
.cup-slot.in-r::after {
  content: "";
  position: absolute;
  width: calc(var(--gap, 34px) / 2 + 1px);
  border: 0 dashed var(--cup-wire);
  pointer-events: none;
}
.cup-slot.has-out::after { left: 100%; }
.cup-slot.has-out.is-top::after { top: calc(50% - 1px); bottom: 0; border-top-width: 2px; border-right-width: 2px; }
.cup-slot.has-out.is-bot::after { top: 0; bottom: calc(50% - 1px); border-bottom-width: 2px; border-right-width: 2px; }
.cup-slot.has-out.is-mid::after { top: calc(50% - 1px); height: 2px; border-top-width: 2px; }
.cup-slot.has-in::before,
.cup-slot.in-l::before { right: 100%; top: calc(50% - 1px); height: 2px; border-top-width: 2px; }
.cup-slot.in-r::after { left: 100%; top: calc(50% - 1px); height: 2px; border-top-width: 2px; }

/* the right-hand half runs the other way */
.cup-col.is-r .cup-slot.has-out::after { left: auto; right: 100%; border-right-width: 0; border-left-width: 2px; }
.cup-col.is-r .cup-slot.has-out.is-mid::after { border-left-width: 0; }
.cup-col.is-r .cup-slot.has-in::before { right: auto; left: 100%; }

.cup-slot.is-lit::after,
.cup-slot.in-lit::before,
.cup-slot.in-l-lit::before,
.cup-slot.in-r-lit::after {
  border-style: solid;
  border-color: var(--cup-lit);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cup-lit) 60%, transparent));
}

/* ── the one-sided board (phones, narrow tablets): compact columns, one
   round per swipe. Each pair of matches gets a bracket that points on to
   the next round, and an undecided side says where it comes from. ── */

.cup-br.is-line .cup-scroll { overflow-y: hidden; transition: height .3s var(--ease-ui); }
.cup-cols.is-line { align-items: start; }
.cup-cols.is-line .cup-list { flex: none; min-height: 0; }
.cup-cols.is-line .cup-slot { flex: none; min-height: 0; padding: 4px 0; }
.cup-cols.is-line .cup-slot.is-top:not(:first-child) { margin-top: 16px; }
.cup-cols.is-line .cup-slot::before {
  display: none;
  border-style: dashed;
  border-color: var(--cup-wire);
  filter: none;
}
.cup-cols.is-line .cup-slot.has-out.is-top::before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  left: calc(100% + var(--gap, 34px) / 2);
  right: auto;
  top: calc(100% - 1px);
  width: calc(var(--gap, 34px) / 2 + 1px);
  height: 2px;
  border-width: 2px 0 0;
}
.cup-cols.is-line .cup-slot.has-out.is-top.pair-lit::before {
  border-style: solid;
  border-color: var(--cup-lit);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cup-lit) 60%, transparent));
}
.cup-cols.is-line .cup-col.is-f .cup-slot { padding-top: 0; }
.cup-cols.is-line .cup-crown { position: relative; left: auto; bottom: auto; transform: none; width: 64px; height: 64px; margin: 2px auto 16px; }
.cup-cols.is-line .cup-crown-line { position: static; margin-top: .9rem; }
.cup-br.is-intro .cup-cols.is-line .cup-crown { animation-name: cup-in; }

/* ── a match tile: a Minecraft panel, lit from the top ── */

.cup-m {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--tile-h);
  color: var(--text-strong);
  text-decoration: none;
  background: linear-gradient(180deg, #18241e, #101915);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .09),
    inset 0 -2px 0 rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
  clip-path: var(--notch);
  transition: background .2s var(--ease-ui), transform .2s var(--ease-ui);
}
a.cup-m:hover { background: linear-gradient(180deg, #1e2e26, #14201a); }
a.cup-m:hover .cup-m-go { transform: translateX(2px); color: var(--accent-soft); }
a.cup-m:focus-visible { outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--accent-soft); }

.cup-m-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex: 0 0 22px;
  padding: 0 .55rem 0 .6rem;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-faint);
  background: rgba(0, 0, 0, .3);
}
.cup-m-code { flex: 0 0 auto; }
.cup-m-state { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.cup-m-state.is-live { color: #ff7a7a; }
.cup-m-state.is-ready { color: var(--accent-soft); }
.cup-m-state.is-done { color: var(--text-strong); }
.cup-m-pitch {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 700;
  color: var(--text-faint);
}
.cup-m-go { width: 5px; height: 9px; transition: transform .2s var(--ease-ui), color .2s; }

.cup-t {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  flex: 1 1 0;
  min-height: 0;
  padding: 0 .45rem 0 .5rem;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  transition: opacity .2s;
}
.cup-t + .cup-t { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.cup-seed {
  display: grid;
  place-items: center;
  width: 24px;
  height: 20px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--on);
  background: var(--c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .25);
  clip-path: var(--notch);
}
.cup-t-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cup-t-sc {
  min-width: 1.7rem;
  padding: .06rem .35rem;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.cup-t-sc:empty { visibility: hidden; }
.cup-t-end { display: flex; align-items: center; gap: .3rem; }
/* "W": the winner when the score can't show it (penalties, a staff call) */
.cup-t-w {
  padding: 0 .3rem;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  color: var(--grad-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grad-2) 60%, transparent);
  clip-path: var(--notch);
}

/* the winner: bright, with its score on a lime block; the loser dimmed */
.cup-t.is-win { color: #fff; }
.cup-t.is-win .cup-t-sc { color: #0b1210; background: var(--grad-2); clip-path: var(--notch); }
.cup-t.is-lose { color: var(--text-faint); }
.cup-t.is-lose .cup-seed { opacity: .5; filter: saturate(.5); }
.cup-t.is-lose .cup-t-sc { color: var(--text-faint); }
.cup-t.is-gone .cup-t-name { text-decoration: line-through; text-decoration-thickness: 2px; }
.cup-t.is-tbd, .cup-t.is-bye { color: var(--text-faint); font-weight: 600; }
.cup-t.is-tbd .cup-seed, .cup-t.is-bye .cup-seed { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.cup-t.is-bye .cup-t-name { font-style: italic; }

/* 16 and 32 teams: a little tighter, so more of each name fits */
.cup-br.is-dense .cup-t { grid-template-columns: 20px minmax(0, 1fr) auto; gap: .45rem; font-size: 13px; padding-inline: .4rem .35rem; }
.cup-br.is-dense .cup-seed { width: 20px; height: 18px; font-size: 10px; }
.cup-br.is-dense .cup-t-sc { min-width: 1.45rem; padding-inline: .25rem; font-size: 13px; }
.cup-br.is-dense .cup-m-head { padding-inline: .45rem; letter-spacing: .06em; }

/* live: a red edge that breathes */
.cup-m.is-live {
  background: linear-gradient(180deg, #2a1a1a, #171313);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .08),
    inset 0 -2px 0 rgba(0, 0, 0, .45),
    inset 0 0 0 1px color-mix(in srgb, var(--cup-live) 70%, transparent);
}
.cup-m.is-live::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--cup-live) 45%, transparent);
  animation: cup-breathe 2s ease-in-out infinite;
}
@keyframes cup-breathe { 50% { opacity: .25; } }

/* a goal since the last look: the score flashes lime, once */
.cup-m.is-goal .cup-t-sc,
.cup-live-card.is-goal .mh-live-score { animation: cup-goal 1.8s ease-out 1; }
@keyframes cup-goal {
  0%, 35% { color: var(--grad-2); text-shadow: 0 0 18px color-mix(in srgb, var(--grad-2) 70%, transparent); }
}
.cup-m.is-ready {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .09),
    inset 0 -2px 0 rgba(0, 0, 0, .45),
    inset 0 0 0 1px color-mix(in srgb, var(--grad-2) 45%, transparent);
}
.cup-m.is-waiting { background: linear-gradient(180deg, #131c18, #0d1411); }

/* the final: bigger, under the cup */
.cup-m.is-final { height: var(--final-h); }
.cup-m.is-final .cup-m-head { flex-basis: 24px; font-size: 11px; }
.cup-m.is-final .cup-t { font-size: 15px; }
.cup-m.is-final:not(.is-live) {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .1),
    inset 0 -2px 0 rgba(0, 0, 0, .45),
    inset 0 0 0 1px color-mix(in srgb, var(--grad-2) 40%, transparent);
}
.cup-crown {
  position: absolute;
  left: 50%;
  bottom: calc(50% + var(--final-h) / 2 + 16px);
  width: 76px;
  height: 76px;
  transform: translateX(-50%);
  pointer-events: none;
}
.cup-crown .cup-trophy { width: 100%; height: 100%; opacity: .9; }
.cup-crown.is-won .cup-trophy { opacity: 1; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--grad-2) 60%, transparent)); }
/* the lime wire from the final up to the cup, once it is won */
.cup-crown.is-won::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  background: var(--cup-lit);
  box-shadow: 0 0 6px var(--cup-lit);
}
.cup-crown-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--final-h) / 2 + 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin: 0;
  text-align: center;
}
.cup-crown-line b { max-width: 100%; font-size: 1.05rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* point at a team: its path stays bright, everyone else fades back */
@media (hover: hover) {
  .has-hl .cup-t:not(.is-hl):not(.is-tbd):not(.is-bye) { opacity: .38; }
  .has-hl .cup-t.is-hl { background: color-mix(in srgb, var(--cv) 16%, transparent); }
  .has-hl .cup-team:not(.is-hl) { opacity: .55; }
  .cup-team, .cup-t { transition: opacity .2s, background-color .2s; }
}

/* the first draw: round by round from the outside in, then the cup */
.cup-br.is-intro .cup-slot { animation: cup-in .5s var(--ease-spring) both; animation-delay: calc(120ms + var(--step, 0) * 110ms); }
.cup-br.is-intro .cup-slot::after,
.cup-br.is-intro .cup-slot::before { animation: cup-wire .45s var(--ease-ui) both; animation-delay: calc(320ms + var(--step, 0) * 110ms); }
.cup-br.is-intro .cup-crown { animation: cup-crown .7s var(--ease-spring) both; animation-delay: calc(300ms + var(--step, 0) * 110ms); }
@keyframes cup-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes cup-wire { from { opacity: 0; } }
@keyframes cup-crown { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.85); } }

/* ── teams ───────────────────────────────────────────────────────── */

.cup-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cup-team {
  position: relative;
  padding: 1.05rem 1.1rem 1.1rem;
  background:
    radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--cv) 15%, transparent), transparent 70%),
    rgba(0, 0, 0, .22);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--card-edge), inset 0 3px 0 var(--cv);
  overflow: hidden;
}
.cup-team-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.cup-team-id { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cup-team-name { margin: 0; font-size: 1.1rem; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.cup-team-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.cup-team-meta small { font-size: 12px; font-weight: 600; color: var(--text-faint); }

.cup-members { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.cup-members li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cup-members a {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
}
.cup-members a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cup-members a:hover span { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.cup-members small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cup-members-none { margin: 0; font-size: 13px; color: var(--text-faint); }

.cup-team.is-out .cup-team-name, .cup-team.is-withdrawn .cup-team-name { color: var(--text-strong); }
.cup-team.is-out .mh-ava, .cup-team.is-withdrawn .mh-ava { filter: grayscale(.7); opacity: .7; }
.cup-team.is-champion {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r-top) 50%, transparent), inset 0 3px 0 var(--cv),
    0 0 26px color-mix(in srgb, var(--r-top) 12%, transparent);
}

.cup-teams-more { display: none; }

/* an open spot at sign-ups */
.cup-team.is-open {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 4.75rem;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.cup-open-shield {
  width: 27px;
  height: 31.5px;
  flex: 0 0 27px;
  background: rgba(255, 255, 255, .09);
  clip-path: var(--shield);
}
.cup-open-text { display: flex; flex-direction: column; }
.cup-open-text b { color: var(--text-strong); }
.cup-open-text small { font-size: 12px; color: var(--text-faint); }

/* ── other cups: a plain list ────────────────────────────────────── */

.cup-past .mh-sec-head { margin-bottom: 1rem; }
.cup-past-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.cup-past-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 15rem) 1rem;
  align-items: center;
  gap: 1.25rem;
  padding: .9rem 1.2rem;
  color: var(--text);
  text-decoration: none;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--card-edge);
  transition: background-color .2s var(--ease-ui);
}
.cup-past-row:hover { background: rgba(255, 255, 255, .045); }
.cup-past-row:hover .cup-past-go { transform: translateX(5px); color: var(--accent-soft); }
.cup-past-when { font-size: 14px; }
.cup-past-when b { color: #fff; font-weight: 700; }
.cup-past-name { display: flex; flex-direction: column; min-width: 0; }
.cup-past-name b { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cup-past-name small { font-size: 13px; color: var(--text-faint); }
.cup-past-won { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text-strong); justify-self: start; }
.cup-past-k { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-faint); }
.cup-past-row > .mh-tag { justify-self: start; }
.cup-past-go { color: var(--text-faint); transition: transform .2s var(--ease-ui), color .2s; }
.cup-past-go .mh-i { width: 8px; height: 13px; }
.mh-tag.cup-tag-live { color: #ff9a9a; background: rgba(255, 77, 77, .14); }

/* ── notes ───────────────────────────────────────────────────────── */

.cup-note .cup-trophy { width: 104px; height: 104px; }
.cup-note.is-wait .cup-trophy { --tr-hi: #55705e; --tr-mid: #3f5a49; --tr-lo: #33493c; --tr-plate: #4a6653; }

/* ── responsive ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .cup-join-card { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .cup-join-go { justify-self: start; }
}

@media (max-width: 980px) {
  .cup { padding-top: calc(var(--nav-h) + 2rem); }
  .cup-now { grid-template-columns: minmax(0, 1fr); }
  .cup-title { font-size: 2.75rem; }
  .cup-hero-card { padding: 1.75rem 1.75rem 2rem; gap: 1.5rem; }
  .cup-hero-art .cup-trophy { width: 112px; height: 112px; }
  .cup-count b { font-size: 76px; }
  .cup-champ-name { font-size: 2.75rem; }
  .cup-past-row { grid-template-columns: 6.5rem minmax(0, 1fr) auto 1rem; }
}

@media (max-width: 719px) {
  .cup-hero-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cup-hero-art:not(.is-count) { position: absolute; top: 1.25rem; right: 1.1rem; padding: 0; opacity: .9; }
  .cup-hero-art:not(.is-count) .cup-trophy { width: 64px; height: 64px; }
  .cup-hero-art:not(.is-count)::after { display: none; }
  .cup-hero-text { padding-right: 4.5rem; }
  .cup-hero.is-slim .cup-hero-text, .cup-hero-card:has(.is-count) .cup-hero-text { padding-right: 0; }
  .cup-hero-art.is-count { justify-items: start; }
  .cup-count { flex-direction: row; align-items: baseline; gap: .75rem; }
  .cup-count b { font-size: 64px; }
  .cup-meter { justify-content: flex-start; max-width: none; }

  /* the one-sided board: one round per swipe, snapping into place */
  .cup-scroll { scroll-snap-type: x mandatory; scroll-padding-inline: 28px; }
  .cup-cols.is-line { --col-w: min(78vw, 300px); }
  .cup-cols.is-line .cup-col { scroll-snap-align: start; }
  .cup-br .mh-sec-head { flex-direction: column; }
}

@media (max-width: 575px) {
  .cup-title { font-size: min(2.5rem, 10.5vw); margin: .7rem 0 .9rem; }
  .cup-hero-card { padding: 1.4rem 1.1rem 1.5rem; }
  .cup-br { padding: 1.25rem 16px 1.5rem; }
  .cup-scroll { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .cup-join-card { padding: 1.35rem 1.1rem; }
  .cup-steps li { font-size: 1rem; padding-left: 1.9rem; }
  .cup-live-card .mh-live-score { font-size: 2rem; }
  .cup-live-card .mh-live-side { font-size: 1rem; flex-direction: column; gap: .35rem; }
  .cup-live-card .mh-live-side.is-away { flex-direction: column-reverse; align-items: flex-end; }
  .cup-live-card .mh-live-side > span:not(.mh-crest) { max-width: 100%; white-space: normal; overflow-wrap: break-word; line-height: 1.2; }
  .cup-live-card .mh-live-side.is-away > span:not(.mh-crest) { text-align: right; }
  .cup-next li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: .7rem .8rem; row-gap: .5rem; }
  .cup-next-code { grid-column: 1 / -1; justify-self: start; }
  .cup-champ-card { padding: 2.25rem 1rem 1.9rem; }
  .cup-champ-card .cup-trophy.is-big { width: 96px; height: 96px; }
  .cup-champ-name { font-size: min(2.25rem, 9.5vw); flex-direction: column; gap: .6rem; }
  .cup-champ-members { gap: .5rem 1rem; }
  .cup-runner { flex-wrap: wrap; }
  .cup-runner-heads { flex-basis: 100%; }
  .cup-team-grid { grid-template-columns: minmax(0, 1fr); }
  .cup-team-grid.is-long:not(.is-open) > li:nth-child(n + 9) { display: none; }
  .cup-teams-more { display: flex; width: 100%; margin-top: 1rem; }
  .cup-past-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name go" "when go" "state go";
    gap: .3rem 1rem;
    padding: .85rem 1rem;
  }
  .cup-past-name { grid-area: name; }
  .cup-past-when { grid-area: when; font-size: 13px; }
  .cup-past-row > :nth-child(3) { grid-area: state; }
  .cup-past-go { grid-area: go; }
}

@media (forced-colors: active) {
  .cup-slot.has-out::after, .cup-slot.has-in::before, .cup-slot.in-l::before, .cup-slot.in-r::after { border-color: CanvasText; }
  .cup-slot.is-lit::after, .cup-slot.in-lit::before, .cup-slot.in-l-lit::before, .cup-slot.in-r-lit::after { border-color: Highlight; }
  .cup-m { border: 1px solid CanvasText; }
  .cup-t.is-win .cup-t-sc { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .cup-rchips button[aria-pressed="true"] { text-decoration: underline 3px; text-underline-offset: 4px; }
}

@media print {
  .cup-rchips, .cup-sparks { display: none !important; }
  .cup-scroll { overflow: visible; }
}