:root {
  color-scheme: dark;

  --bg: #080b0a;
  --surface: #0f1412;
  --surface-2: #161c19;
  --line: #212925;
  --line-2: #303a35;
  --ink: #f1f5ec;
  --ink-2: #b4bdb1;
  --muted: #7b857a;
  --accent: #c8f752;
  --accent-ink: #0e1305;

  /* Provider colours. Validated as a set against --surface; keep this order. */
  --p-google: #3987e5;
  --p-anthropic: #d95926;
  --p-openai: #199e70;
  --p-xai: #c98500;
  --p-other: #d55181;

  /* The two sides of a match. The first two colours of the same validated set. */
  --home: #3987e5;
  --away: #d95926;

  /* A place lost in the table. Always shown with a down arrow, never alone. */
  --down: #f0776a;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Panes: the glass that panels, tiles and the table are made of, like the
     plates on a card. They sit over the pitch drawn behind the page and blur it. */
  --pane: linear-gradient(160deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.04));
  --pane-tint: rgba(12, 17, 15, 0.68);
  --pane-edge: rgba(255, 255, 255, 0.1);
  --pane-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 26px 44px -32px rgba(0, 0, 0, 0.95);
  --pane-blur: blur(14px) saturate(130%);

  --radius: 12px;
  --page: 1180px;
  --hexagon: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  /* Tilted cards and their shadows may reach past the page edge; never scroll sideways for them. */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Film grain, then two floodlights, over the pitch-black base. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1100px 620px at 84% -12%, rgba(200, 247, 82, 0.13), transparent 62%),
    radial-gradient(900px 560px at -8% -6%, rgba(57, 135, 229, 0.1), transparent 60%),
    var(--bg);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  color: var(--ink);
  font: 400 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* A pitch drawn behind the whole site. It stays put while the page scrolls,
   so the panes of glass slide over its lines. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='2'%3E%3Crect x='60' y='60' width='1480' height='880' rx='6'/%3E%3Cpath d='M800 60v880'/%3E%3Ccircle cx='800' cy='500' r='150'/%3E%3Cpath d='M60 260h230v480H60M1540 260h-230v480h230M60 380h90v240H60M1540 380h-90v240h90'/%3E%3Cpath d='M290 420a110 110 0 0 1 0 160M1310 420a110 110 0 0 0 0 160'/%3E%3C/svg%3E") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 25%, transparent 92%);
  mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 25%, transparent 92%);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

.defs {
  position: absolute;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 24px;
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 24px 88px;
}

/* ---- Header and footer --------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 11, 10, 0.74);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.site-header .wrap {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 700 1.35rem/1 var(--font-display);
  letter-spacing: 0.06em;
}

.brand b {
  color: var(--accent);
}

.brand-mark {
  width: 26px;
  height: 26px;
  color: var(--accent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav a:not(.btn) {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
}

.site-nav a:not(.btn):hover {
  color: var(--ink);
}

.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(15, 20, 18, 0.6);
}

/* A line of small print, like the one round the edge of a card. */
.site-footer::before {
  content: "TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · ";
  content: "TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · TOKENLEAGUE · EVERY MODEL COUNTS · RATED OUT OF 99 · " / "";
  display: block;
  padding: 8px 0 7px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  color: var(--muted);
  font: 600 0.6rem/1 var(--font-display);
  letter-spacing: 0.34em;
  text-align: center;
  white-space: nowrap;
  opacity: 0.75;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-block: 26px 34px;
}

.site-footer .brand {
  font-size: 1.1rem;
}

.site-footer .brand-mark {
  width: 20px;
  height: 20px;
}

.site-footer p {
  flex: 1 1 320px;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.site-footer nav {
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
}

.site-footer nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--ink);
}

/* ---- Small shared pieces ------------------------------------------------- */

/* Every boxed surface is a pane of glass. The larger ones blur what is behind. */
.step,
.tile,
.panel,
.table-wrap,
.featured,
.seg,
.join-phone {
  border: 1px solid var(--pane-edge);
  background: var(--pane), var(--pane-tint);
  box-shadow: var(--pane-shadow);
}

.step,
.panel,
.table-wrap,
.featured {
  -webkit-backdrop-filter: var(--pane-blur);
  backdrop-filter: var(--pane-blur);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 0.98rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 22px -14px rgba(200, 247, 82, 0.55);
  transition: filter 0.15s, border-color 0.15s, background-color 0.15s, translate 0.15s;
}

.btn:hover {
  filter: brightness(1.08);
  translate: 0 -1px;
}

.btn-small {
  padding: 8px 15px;
  font-size: 0.9rem;
}

.btn-ghost {
  border-color: var(--pane-edge);
  background: var(--pane), var(--pane-tint);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.34);
  filter: none;
}

.kicker {
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  color: var(--accent);
  font: 600 0.9rem/1 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.kicker span {
  color: var(--muted);
  padding-left: 12px;
  border-left: 1px solid var(--line-2);
}

.lede {
  color: var(--ink-2);
  font-size: 1.14rem;
  max-width: 34em;
  margin: 20px 0 0;
}

.label {
  margin: 0 0 9px;
  color: var(--ink-2);
  font: 600 0.82rem/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fine {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.center {
  text-align: center;
}

.dot {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  margin-right: 0.45em;
  flex: none;
}

.p-google { background-color: var(--p-google); fill: var(--p-google); }
.p-anthropic { background-color: var(--p-anthropic); fill: var(--p-anthropic); }
.p-openai { background-color: var(--p-openai); fill: var(--p-openai); }
.p-xai { background-color: var(--p-xai); fill: var(--p-xai); }
.p-other { background-color: var(--p-other); fill: var(--p-other); }

.tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 7px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--muted);
  font: 600 0.68rem/1.3 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
}

.join {
  display: flex;
  align-items: stretch;
  max-width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(200, 247, 82, 0.05), 0 18px 40px -22px rgba(200, 247, 82, 0.45);
  overflow: hidden;
}

.join code {
  flex: 1;
  min-width: 0;
  padding: 15px 16px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.86rem;
}

.join code::before {
  content: "$ ";
  color: var(--accent);
}

.copy {
  flex: none;
  padding: 0 20px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 0.98rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.copy:hover {
  filter: brightness(1.08);
}

.tooltip {
  position: fixed;
  z-index: 50;
  min-width: 170px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  font-size: 0.82rem;
  pointer-events: none;
}

.tip-title {
  margin-bottom: 6px;
  font-weight: 600;
}

.tip-row {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.tip-row b {
  margin-left: auto;
  padding-left: 14px;
  color: var(--ink);
  font-weight: 600;
}

.tip-pct {
  width: 3.2em;
  text-align: right;
  color: var(--muted);
}

.tip-total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line-2);
}

/* A player's badge: a hexagon holding their picture or initials. */
.crest {
  --size: 32px;
  --hue: 150;
  width: var(--size);
  height: var(--size);
  flex: none;
  display: grid;
  padding: calc(var(--size) * 0.06);
  clip-path: var(--hexagon);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2) 42%, rgba(0, 0, 0, 0.4));
}

.crest > * {
  width: 100%;
  height: 100%;
  clip-path: var(--hexagon);
}

.crest img {
  object-fit: cover;
}

.crest-initials {
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 28% 16%, hsl(var(--hue) 72% 54%), hsl(calc(var(--hue) + 38) 66% 21%) 78%);
  color: #fff;
  font: italic 800 calc(var(--size) * 0.42) / 1 var(--font-display);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* ---- Player card ---------------------------------------------------------
   A shield cut from #card-shape and built in layers: the metal rim, the
   printed face with its artwork, the lines and small print round the edge,
   then the badge, the name band and the glass plates on top.

   Leaning the card (tiltable in app.js) sets --px and --py, from -1 to 1
   across the card. Each layer shifts by a different amount of them, which is
   what makes the badge and the plates seem to float above the artwork. */

.tier-gold {
  --rim: linear-gradient(150deg, #fff7cf 0%, #dcb043 26%, #86610d 54%, #f3d77b 78%, #6f4d03 100%);
  --face: linear-gradient(158deg, #fdf1b9 0%, #f1d066 28%, #cf9f2c 62%, #eacb62 86%, #b3851a 100%);
  --c-ink: #291b00;
  --c-soft: rgba(41, 27, 0, 0.62);
  --c-line: rgba(66, 44, 0, 0.34);
  --c-ray: rgba(255, 255, 255, 0.2);
  --glass: rgba(255, 252, 236, 0.52);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --band: #2a1c03;
  --band-ink: #fbe8a6;
  --foil: 0.1;
}

.tier-silver {
  --rim: linear-gradient(150deg, #ffffff 0%, #adb6bc 26%, #555e65 54%, #e2e8eb 78%, #474f55 100%);
  --face: linear-gradient(158deg, #f8fafb 0%, #d1d8dc 28%, #a1aab1 62%, #cfd6da 86%, #868f96 100%);
  --c-ink: #14191d;
  --c-soft: rgba(20, 25, 29, 0.6);
  --c-line: rgba(20, 30, 38, 0.3);
  --c-ray: rgba(255, 255, 255, 0.24);
  --glass: rgba(255, 255, 255, 0.5);
  --glass-edge: rgba(255, 255, 255, 0.78);
  --band: #161b20;
  --band-ink: #edf1f3;
  --foil: 0.14;
}

.tier-bronze {
  --rim: linear-gradient(150deg, #ffe3c7 0%, #cb8a54 26%, #663717 54%, #e6ab7b 78%, #4e260c 100%);
  --face: linear-gradient(158deg, #f7d2ad 0%, #db9d6a 28%, #ad6c3e 62%, #d39462 86%, #875027 100%);
  --c-ink: #281303;
  --c-soft: rgba(40, 19, 3, 0.62);
  --c-line: rgba(56, 26, 4, 0.34);
  --c-ray: rgba(255, 255, 255, 0.18);
  --glass: rgba(255, 240, 224, 0.46);
  --glass-edge: rgba(255, 255, 255, 0.6);
  --band: #2a1505;
  --band-ink: #f9dcc0;
  --foil: 0.06;
}

.tier-icon {
  --rim: linear-gradient(150deg, #efffab 0%, #c8f752 22%, #2bd9a6 48%, #3987e5 72%, #c8f752 100%);
  --face: radial-gradient(120% 80% at 80% 0%, #26371b 0%, #121811 52%, #080b08 100%);
  --c-ink: #f1f5ec;
  --c-soft: rgba(241, 245, 236, 0.62);
  --c-line: rgba(200, 247, 82, 0.3);
  --c-ray: rgba(200, 247, 82, 0.1);
  --glass: rgba(200, 247, 82, 0.07);
  --glass-edge: rgba(200, 247, 82, 0.4);
  --band: var(--accent);
  --band-ink: var(--accent-ink);
  --foil: 0.2;
}

.tier-ghost {
  --rim: var(--line-2);
  --face: var(--surface);
  --c-ink: var(--muted);
  --c-soft: var(--muted);
  --c-line: var(--line-2);
  --c-ray: transparent;
  --glass: transparent;
  --glass-edge: var(--line-2);
  --band: var(--surface-2);
  --band-ink: var(--muted);
  --foil: 0;
}

.card {
  --w: 250px;
  --px: 0;
  --py: 0;
  position: relative;
  width: var(--w);
  aspect-ratio: 5 / 7.3;
  flex: none;
  font: 500 calc(var(--w) / 15.6) / 1 var(--font-display);
  color: var(--c-ink);
  background: var(--rim);
  clip-path: url(#card-shape);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.25s ease-out;
}

.card.is-tiltable:hover {
  transition-duration: 0.08s;
}

.card-body {
  position: absolute;
  inset: calc(var(--w) * 0.016);
  display: flex;
  flex-direction: column;
  padding: 1.95em 1.5em 0;
  clip-path: url(#card-shape);
  isolation: isolate;
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 7px),
    radial-gradient(120% 60% at 50% 112%, rgba(0, 0, 0, 0.24), transparent 62%),
    var(--face);
}

/* The shine. It follows the pointer on cards that tilt. */
.card-body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(62% 46% at var(--shine-x, 26%) var(--shine-y, 10%), rgba(255, 255, 255, 0.55), transparent 64%);
  mix-blend-mode: soft-light;
}

/* Layers that shift as the card leans, each by its own amount. */
.card-art,
.card-badge,
.card-plate,
.card-ghost {
  transition: translate 0.25s ease-out;
}

.card.is-tiltable:hover :is(.card-art, .card-badge, .card-plate, .card-ghost) {
  transition-duration: 0.08s;
}

/* ---- The artwork behind everything ---- */

.card-art {
  position: absolute;
  inset: -0.5em;
  z-index: -2;
  pointer-events: none;
  translate: calc(var(--px) * -0.3em) calc(var(--py) * -0.3em);
}

/* Light rays fanning out from behind the badge. */
.card-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 6deg at 76% 21%, var(--c-ray) 0 5deg, transparent 5deg 13deg);
  -webkit-mask-image: radial-gradient(95% 62% at 76% 21%, #000 0%, transparent 74%);
  mask-image: radial-gradient(95% 62% at 76% 21%, #000 0%, transparent 74%);
}

/* The rating again, huge and in outline, running behind the name and the plate. */
.card-ghost {
  position: absolute;
  right: 0.02em;
  top: 0.47em;
  color: color-mix(in srgb, var(--c-ink) 8%, transparent);
  font: italic 800 13.5em/0.8 var(--font-display);
  letter-spacing: -0.04em;
  -webkit-text-stroke: calc(var(--w) / 170) var(--c-line);
  translate: calc(var(--px) * -0.02em) calc(var(--py) * -0.02em);
}

/* Two orbits round the badge. */
.card-rings {
  position: absolute;
  left: 76%;
  top: 21%;
  width: 10.4em;
  aspect-ratio: 1;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  translate: -50% -50%;
}

.card-rings::before {
  content: "";
  position: absolute;
  inset: -1.5em;
  border: 1px dashed var(--c-line);
  border-radius: 50%;
}

/* Halftone dots rising from the point of the shield. */
.card-dots {
  position: absolute;
  inset: 58% 0 0;
  background: radial-gradient(circle, var(--c-line) 0 34%, transparent 38%) 0 0 / 0.44em 0.44em;
  -webkit-mask-image: linear-gradient(to top, #000 12%, transparent 92%);
  mask-image: linear-gradient(to top, #000 12%, transparent 92%);
}

/* Foil: a band of colour that slides across as the card leans. */
.card-foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    transparent 24%,
    #ff4f9a 36%,
    #ffd84a 44%,
    #54f0b4 52%,
    #4c9bff 60%,
    transparent 74%
  );
  background-size: 260% 260%;
  background-position: var(--shine-x, 10%) var(--shine-y, 8%);
  mix-blend-mode: overlay;
  opacity: var(--foil);
  transition: opacity 0.3s;
}

.card.is-tiltable:hover .card-foil {
  opacity: calc(var(--foil) * 3.4);
}

/* ---- The printed edge ---- */

.card-frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.card-frame path {
  fill: none;
  stroke: var(--c-line);
  stroke-width: 1px;
}

.card-frame .frame-bevel {
  stroke: var(--glass-edge);
}

.card-frame text {
  fill: var(--c-soft);
  font: 600 2.35px var(--font-display);
  letter-spacing: 0.62px;
}

/* ---- Rating, position and badge ---- */

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 7.05em;
}

.card-id {
  width: 4.3em;
  padding-top: 0.5em;
  text-align: center;
}

.card-rating {
  font-size: 3.45em;
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.02em;
}

.tier-icon .card-rating,
.tier-icon .card-stat b {
  color: var(--accent);
}

.card-role {
  margin-top: 0.42em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42em;
  text-align: left;
}

/* A small pitch with a mark where this position plays. */
.card-pitch {
  width: 1.36em;
  height: 1.9em;
  flex: none;
  fill: none;
  stroke: var(--c-soft);
  stroke-width: 1.1;
}

.card-pitch .spot {
  fill: var(--c-ink);
  stroke: none;
}

.tier-icon .card-pitch .spot {
  fill: var(--accent);
}

.card-pos {
  font-size: 1.14em;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.card-club {
  margin-top: 0.34em;
  display: flex;
  align-items: center;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.card-badge {
  position: relative;
  margin: 0.08em -0.2em 0 0;
  filter: drop-shadow(0 0.5em 0.42em rgba(0, 0, 0, 0.36));
  translate: calc(var(--px) * 0.32em) calc(var(--py) * 0.32em);
}

/* A pane of glass set behind the badge, a little larger than it. */
.card-badge::before {
  content: "";
  position: absolute;
  inset: -0.46em;
  clip-path: var(--hexagon);
  background: linear-gradient(150deg, var(--glass-edge), var(--glass) 46%, transparent);
}

.card-crest {
  --size: calc(var(--w) * 0.44);
  position: relative;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), var(--c-line) 45%, rgba(0, 0, 0, 0.45));
}

.tier-ghost .crest-initials {
  background: var(--surface-2);
  color: var(--muted);
  text-shadow: none;
}

/* ---- The name, on a band that runs edge to edge ---- */

.card-name {
  position: relative;
  margin: 0.16em -1.08em 0.4em;
  padding: 0.3em 1.2em 0.24em;
  background: var(--band);
  color: var(--band-ink);
  font-size: 1.4em;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  /* The band sits above the face and throws a shadow down onto the plate. */
  box-shadow: 0 0.3em 0.5em -0.15em rgba(0, 0, 0, 0.42);
  z-index: 1;
}

.card-name span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Italic letters lean past their own box; this keeps the last one whole. */
  padding-inline: 0.08em;
}

/* Slanted marks at each end of the band. */
.card-name::before,
.card-name::after {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  width: 0.5em;
  background: repeating-linear-gradient(90deg, var(--band-ink) 0 0.1em, transparent 0.1em 0.2em);
  opacity: 0.5;
  transform: skewX(-18deg);
}

.card-name::before {
  left: 0.42em;
}

.card-name::after {
  right: 0.42em;
}

.card-name.is-long {
  margin: 0.2em -1.36em 0.5em;
  padding: 0.52em 1.5em 0.44em;
  font-size: 1.1em;
}

/* ---- The six stats, on a plate of frosted glass ---- */

.card-plate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.44em 0.9em;
  padding: 0.62em 0.8em 0.66em;
  border: 1px solid var(--glass-edge);
  border-radius: 0.62em;
  background: linear-gradient(150deg, var(--glass), transparent 190%);
  -webkit-backdrop-filter: blur(calc(var(--w) / 60)) saturate(115%);
  backdrop-filter: blur(calc(var(--w) / 60)) saturate(115%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    0 0.55em 0.9em -0.55em rgba(0, 0, 0, 0.55);
  translate: calc(var(--px) * 0.14em) calc(var(--py) * 0.14em);
}

.card-stat {
  display: grid;
  grid-template-columns: 1.3em 1fr;
  align-items: baseline;
  gap: 0.22em 0.4em;
  font-size: 1.12em;
}

.card-stat b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.card-stat span {
  color: var(--c-soft);
  font-size: 0.86em;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* How far along 99 the stat is. */
.card-stat i {
  grid-column: 1 / -1;
  height: 0.11em;
  border-radius: 0.1em;
  background: linear-gradient(90deg, currentColor calc(var(--v, 0) * 100%), var(--c-line) 0);
}

.tier-icon .card-stat i {
  color: var(--accent);
}

.card-foot {
  margin-top: 0.56em;
  text-align: center;
}

.card-foot span {
  display: inline-block;
  padding: 0.4em 0.95em 0.32em;
  border: 1px solid var(--glass-edge);
  border-radius: 99px;
  background: var(--glass);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tier-ghost :is(.card-ghost, .card-rings, .card-dots, .card-foil) {
  display: none;
}

.tier-ghost .card-body::after {
  display: none;
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 40px;
  padding: 48px 0 60px;
}

.hero h1 {
  font-size: clamp(3.1rem, 7.4vw, 5.6rem);
  font-style: italic;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.hero h1 em {
  color: var(--accent);
  text-shadow: 0 0 44px rgba(200, 247, 82, 0.35);
}

.join-block {
  margin-top: 30px;
  max-width: 580px;
  scroll-margin-top: 90px;
}

.hero-foot {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
}

.figures {
  display: flex;
  gap: 26px;
}

.figure-chip b {
  display: block;
  font: 700 1.75rem/1 var(--font-display);
  letter-spacing: 0.01em;
}

.figure-chip span {
  color: var(--muted);
  font: 600 0.72rem/1.6 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lookup {
  display: flex;
  flex: 1 1 260px;
  gap: 8px;
  max-width: 360px;
}

.lookup input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: 0.9rem var(--font-mono);
}

.lookup input::placeholder {
  color: var(--muted);
}

/* Where cards are shown off: a pool of light and the centre circle of a pitch. */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 470px;
}

.stage-pitch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(200, 247, 82, 0.17), transparent 72%);
}

.stage-pitch::before,
.stage-pitch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.stage-pitch::before {
  width: min(88%, 440px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  /* A second, dashed orbit, as round the badge on a card. */
  outline: 1px dashed rgba(255, 255, 255, 0.08);
  outline-offset: 26px;
}

.stage-pitch::after {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09) 20%, rgba(255, 255, 255, 0.09) 80%, transparent);
}

.fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fan-slot {
  display: block;
  text-decoration: none;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.65));
  transition: translate 0.25s ease;
}

.fan-slot:hover {
  translate: 0 -8px;
  z-index: 3;
}

.fan-slot .card {
  --w: 186px;
}

.fan-slot.rank-1 {
  z-index: 2;
}

.fan-slot.rank-1 .card {
  --w: 256px;
}

.fan-3 .rank-2 {
  rotate: -9deg;
  margin-right: -54px;
  margin-top: 36px;
}

.fan-3 .rank-3 {
  rotate: 9deg;
  margin-left: -54px;
  margin-top: 36px;
}

.fan-2 .fan-slot {
  margin: 0 -10px;
}

.fan-2 .rank-2 {
  rotate: 6deg;
  margin-top: 30px;
}

.fan-1 .card {
  --w: 286px;
}

/* ---- Three steps --------------------------------------------------------- */

.steps {
  margin-bottom: 76px;
}

.steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.step {
  padding: 22px 22px 24px;
  border-radius: 14px;
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--accent);
}

.step-top span {
  color: var(--line-2);
  font: 700 1.5rem/1 var(--font-display);
  letter-spacing: 0.04em;
}

.icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step h3 {
  margin: 18px 0 7px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.step p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.reads {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.reads .label {
  margin: 0;
}

.reads ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reads li {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.82rem;
}

.reads a {
  margin-left: auto;
  color: var(--accent);
  font-size: 0.9rem;
  text-underline-offset: 3px;
}

/* ---- Leaderboard --------------------------------------------------------- */

.board {
  scroll-margin-top: 84px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 18px;
}

.section-head h2 {
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 800;
}

.section-head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 8px;
  background: var(--accent);
  transform: skewX(-18deg);
}

.board-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.seg {
  display: flex;
  flex-wrap: wrap;
  padding: 3px;
  border-radius: 10px;
}

.seg button {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font: 500 0.88rem/1 var(--font-body);
  cursor: pointer;
}

.seg button:hover {
  color: var(--ink);
}

.seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}

.table-wrap {
  border-radius: 14px;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.table th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 600 0.74rem/1 var(--font-display);
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.board .table th {
  background: rgba(255, 255, 255, 0.035);
}

.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.board .table tbody tr {
  cursor: pointer;
  transition: background-color 0.12s;
}

.board .table tbody tr:hover {
  background: rgba(255, 255, 255, 0.045);
}

.table .num,
.table .col-tokens,
.table .col-days {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.col-rank {
  width: 104px;
  color: var(--muted);
  font: 700 1.25rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.col-rank > span:first-child {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 34px;
}

/* The top three wear a medal and a stripe down the row's edge. */
.board tr[class^="podium"] .col-rank > span:first-child {
  clip-path: url(#card-shape);
  background: var(--face);
  color: var(--c-ink);
}

.board tr[class^="podium"] td:first-child {
  box-shadow: inset 3px 0 0 var(--medal);
}

.podium-1 {
  --medal: #e9c75a;
  --face: linear-gradient(158deg, #fdf1b9, #cf9f2c);
  --c-ink: #291b00;
  background: linear-gradient(90deg, rgba(233, 199, 90, 0.08), transparent 42%);
}

.podium-2 {
  --medal: #c3cbd0;
  --face: linear-gradient(158deg, #f8fafb, #a1aab1);
  --c-ink: #14191d;
  background: linear-gradient(90deg, rgba(195, 203, 208, 0.07), transparent 42%);
}

.podium-3 {
  --medal: #cf9566;
  --face: linear-gradient(158deg, #f7d2ad, #ad6c3e);
  --c-ink: #281303;
  background: linear-gradient(90deg, rgba(207, 149, 102, 0.07), transparent 42%);
}

.player-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 600;
}

.player-link:hover .player-handle {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mini-crest {
  --size: 34px;
}

.ovr {
  display: inline-block;
  min-width: 36px;
  padding: 5px 7px 4px;
  border-radius: 6px;
  background: var(--face);
  color: var(--c-ink);
  font: 700 1.08rem/1 var(--font-display);
  text-align: center;
}

.ovr.tier-icon {
  background: #121811;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.pos {
  margin-left: 8px;
  color: var(--muted);
  font: 600 0.9rem/1 var(--font-display);
  letter-spacing: 0.06em;
}

.col-tokens {
  font-weight: 600;
}

.meter {
  display: flex;
  gap: 2px;
  width: 150px;
  height: 8px;
}

.meter i {
  min-width: 3px;
  border-radius: 2px;
}

.col-model {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.col-tools {
  color: var(--ink-2);
  font-size: 0.88rem;
}

.col-tools span {
  color: var(--muted);
}

.more {
  display: flex;
  margin: 18px auto 0;
}

/* ---- Player page --------------------------------------------------------- */

.profile {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  padding-top: 36px;
}

.profile-side {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.profile-side .stage {
  width: 100%;
  min-height: 0;
  padding: 18px 0 10px;
}

.card-holder {
  position: relative;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.65));
}

.profile-side .card {
  --w: 300px;
}

.share {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.profile-name {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-style: italic;
  font-weight: 800;
  text-transform: none;
  overflow-wrap: anywhere;
}

.figure {
  margin: 22px 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.figure b {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
}

.figure span {
  color: var(--ink-2);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tile {
  padding: 13px 15px;
  border-radius: var(--radius);
}

.tile span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.tile b {
  font-size: 1.4rem;
  font-weight: 600;
}

.panel {
  margin-top: 14px;
  padding: 20px 22px 22px;
  border-radius: 14px;
}

.panel h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 16px;
  /* The slanted marks from the name band on a card. */
  padding-left: 1.5em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M4 0h3L3 14H0zM11.5 0h3l-4 14h-3zM19 0h3l-4 14h-3z' fill='%23c8f752'/%3E%3C/svg%3E") left 0.14em / 1.05em 0.68em no-repeat;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.panel h2 span {
  color: var(--muted);
  font: 400 0.86rem/1.3 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

/* The six card stats as bars. The fill is the accent; the track is a faint
   step of the same colour. */
.attributes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.attributes li {
  display: grid;
  grid-template-columns: 40px minmax(0, 250px) minmax(70px, 1fr) 30px;
  align-items: center;
  gap: 14px;
}

.attr-key {
  color: var(--ink-2);
  font: 700 1.05rem/1 var(--font-display);
  letter-spacing: 0.08em;
}

.attr-name b {
  display: block;
  font-weight: 600;
  line-height: 1.25;
}

.attr-name small {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.attr-bar {
  height: 8px;
  border-radius: 0 4px 4px 0;
  background: rgba(200, 247, 82, 0.13);
  overflow: hidden;
}

.attr-bar i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}

.attr-value {
  text-align: right;
  font: 700 1.3rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* Tables inside panels and articles wrap their text instead of forcing the page wider. */
.table.plain th,
.table.plain td {
  white-space: normal;
}

.table.plain .mono {
  overflow-wrap: anywhere;
}

.table.plain .num {
  white-space: nowrap;
}

.table.plain th:first-child,
.table.plain td:first-child {
  padding-left: 0;
}

.table.plain th:last-child,
.table.plain td:last-child {
  padding-right: 0;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 8px;
  color: var(--ink-2);
  font-size: 0.86rem;
}

.chart-plot {
  height: 220px;
}

.chart-plot svg {
  display: block;
}

.chart .grid {
  stroke: var(--line);
}

.chart .axis {
  stroke: var(--line-2);
}

.chart .tick {
  fill: var(--muted);
  font: 11px var(--font-body);
  font-variant-numeric: tabular-nums;
}

.chart .hit {
  fill: transparent;
}

.chart .column:hover .hit {
  fill: rgba(255, 255, 255, 0.05);
}

.chart-table {
  margin-top: 12px;
  overflow-x: auto;
}

.chart-table summary {
  color: var(--muted);
  font-size: 0.86rem;
  cursor: pointer;
}

.chart-table summary:hover {
  color: var(--ink-2);
}

.chart-table .table {
  margin-top: 8px;
  font-size: 0.86rem;
}

.empty {
  color: var(--muted);
}

/* ---- How it works and notices -------------------------------------------- */

.how,
.notice {
  max-width: 780px;
  padding-top: 44px;
}

.how h1,
.notice h1 {
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  font-style: italic;
  font-weight: 800;
  line-height: 0.95;
  text-wrap: balance;
}

.how h2 {
  margin: 48px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 1.75rem;
  font-weight: 700;
}

.how p,
.how li {
  color: var(--ink-2);
}

.how code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink);
}

.how .join code {
  padding: 15px 16px;
  background: none;
}

.how li {
  margin-bottom: 6px;
}

.notice .join {
  margin: 20px 0;
}

.stat-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 16px 0;
}

.stat-list dt {
  color: var(--accent);
  font: 700 1.05rem/1.5 var(--font-display);
  letter-spacing: 0.08em;
}

.stat-list dd {
  margin: 0;
  color: var(--ink-2);
}

.stat-list dd b {
  color: var(--ink);
  font-weight: 600;
}

.tier-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tier-row .ovr {
  padding: 7px 13px 6px;
  letter-spacing: 0.04em;
}

/* ---- Match day ------------------------------------------------------------ */

.lobby,
.match,
.xi {
  padding-top: 44px;
}

.lobby {
  max-width: 780px;
}

.lobby h1,
.xi h1 {
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  font-style: italic;
  font-weight: 800;
  line-height: 0.92;
}

.lobby h1 em,
.xi h1 em {
  color: var(--accent);
  font-style: inherit;
}

.fixture {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
}

.fixture input {
  flex: 1 1 150px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: 0.9rem var(--font-mono);
}

.fixture input::placeholder {
  color: var(--muted);
}

.versus {
  color: var(--muted);
  font: italic 800 1.3rem/1 var(--font-display);
}

.featured {
  display: block;
  margin-top: 44px;
  padding: 22px 24px 20px;
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.15s;
}

.featured:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.featured .label {
  display: block;
}

.featured-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  margin: 18px 0 16px;
}

.featured .card {
  --w: min(168px, 26vw);
}

.featured .score-line {
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  gap: 12px;
}

.featured-link {
  color: var(--accent);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.challenge {
  width: 100%;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.challenge .fixture {
  margin-top: 0;
}

.home .dot {
  background: var(--home);
}

.away .dot {
  background: var(--away);
}

.scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin-top: 12px;
}

.side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.side .card {
  --w: 236px;
}

.side.is-loser .card-holder {
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.65)) saturate(0.7) brightness(0.82);
}

.side-name {
  display: inline-flex;
  align-items: center;
  font: 700 1.3rem/1 var(--font-display);
  letter-spacing: 0.04em;
}

.side.is-loser .side-name {
  color: var(--ink-2);
}

.score {
  max-width: 380px;
  text-align: center;
}

.score-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font: italic 800 clamp(4.6rem, 11vw, 7.6rem) / 0.9 var(--font-display);
}

.score-line span {
  color: var(--line-2);
}

.score h1 {
  margin-top: 14px;
  color: var(--accent);
  font-size: 1.9rem;
  font-style: italic;
  font-weight: 800;
  text-wrap: balance;
}

.score p {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 0.98rem;
}

.match-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: 14px;
  margin-top: 38px;
}

.match-grid .panel {
  margin-top: 0;
}

.feed {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feed li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.feed li:first-child {
  padding-top: 0;
}

.feed li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.minute {
  color: var(--muted);
  font: 700 1.12rem/1.4 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.feed-goal .minute {
  color: var(--ink);
}

.feed p {
  margin: 0;
  color: var(--ink-2);
}

.feed b {
  color: var(--ink);
  font-weight: 600;
}

.feed-miss p {
  color: var(--muted);
}

.duel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.duel-legend span {
  display: inline-flex;
  align-items: center;
}

/* Two bars per stat, growing outwards from the middle: home left, away right. */
.duels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}

.duels li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 62px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
}

.duel-value {
  color: var(--ink-2);
  font: 600 1.25rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.duel-value.is-ahead {
  color: var(--ink);
  font-weight: 700;
}

.duel-value:last-child {
  text-align: right;
}

.duel-bar {
  display: flex;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.duel-bar.home {
  justify-content: flex-end;
  border-radius: 4px 0 0 4px;
}

.duel-bar.away {
  border-radius: 0 4px 4px 0;
}

.duel-bar.home i {
  border-radius: 4px 0 0 4px;
  background: var(--home);
}

.duel-bar.away i {
  border-radius: 0 4px 4px 0;
  background: var(--away);
}

.duel-name {
  color: var(--muted);
  font: 600 0.78rem/1 var(--font-display);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.match-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

/* ---- Places gained and lost ---------------------------------------------- */

.move {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  font: 700 0.78rem/1 var(--font-display);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.move-up {
  color: var(--accent);
}

.move-down {
  color: var(--down);
}

.move-new {
  padding: 3px 5px 2px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--ink-2);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.climber {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(200, 247, 82, 0.08), transparent 60%);
  color: var(--ink-2);
  font-size: 0.92rem;
}

.climber b {
  color: var(--ink);
  font: 700 0.95rem/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.climber a {
  color: var(--ink);
  font-weight: 600;
}

.climber .move {
  margin: 0;
  font-size: 0.95rem;
}

/* ---- Trophy cabinet ------------------------------------------------------- */

.trophies {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.trophy {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 6px 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}

.trophy b {
  display: block;
  color: var(--ink-2);
  font: 700 1.05rem/1.2 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trophy > div > span {
  display: block;
  font-size: 0.84rem;
  line-height: 1.35;
}

.trophy.is-won {
  border-color: rgba(200, 247, 82, 0.34);
  background: linear-gradient(160deg, rgba(200, 247, 82, 0.1), transparent 70%);
  color: var(--ink-2);
}

.trophy.is-won .icon {
  color: var(--accent);
}

.trophy.is-won b {
  color: var(--ink);
}

.trophy-progress {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.trophy-progress .attr-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
}

.trophy-progress .attr-bar i {
  border-radius: 3px;
}

.trophy-progress small {
  font-size: 0.76rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- Looking after your own card ------------------------------------------ */

.manage {
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.9rem;
}

.manage summary {
  color: var(--ink-2);
  font: 600 0.82rem/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.manage summary:hover {
  color: var(--ink);
}

.manage .label {
  margin-top: 18px;
}

.manage .fixture {
  margin-top: 0;
}

.form-problem {
  flex-basis: 100%;
  margin: 4px 0 0;
  color: var(--down);
  font-size: 0.88rem;
}

.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.text-button:hover {
  color: var(--ink);
}

.manage .join,
.join-phone .join {
  box-shadow: none;
}

.manage .join code {
  padding: 10px 12px;
  font-size: 0.76rem;
}

.manage .copy {
  padding: 0 13px;
  font-size: 0.86rem;
}

.join-phone {
  padding: 16px;
  border-radius: var(--radius);
}

.join-phone p {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.join-phone .btn {
  width: 100%;
}

.join-phone details {
  margin-top: 12px;
}

.join-phone summary {
  color: var(--muted);
  font-size: 0.86rem;
  cursor: pointer;
}

.join-phone .join {
  margin-top: 8px;
}

/* ---- Team of the week ------------------------------------------------------ */

.xi .lede {
  max-width: 42em;
}

.pitch {
  position: relative;
  max-width: 860px;
  margin-top: 30px;
  padding: 38px 14px 34px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  /* Mown stripes over grass under floodlights. */
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0 62px, transparent 62px 124px),
    radial-gradient(120% 80% at 50% 0%, #1f5230, #0f2a1a 72%);
  overflow: hidden;
}

.pitch-marks {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  pointer-events: none;
}

.pitch-marks i {
  position: absolute;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Centre circle, halfway line, and the box the keeper stands in. */
.pitch-marks i:nth-child(1) {
  top: 50%;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  translate: -50% -50%;
}

.pitch-marks i:nth-child(2) {
  top: 50%;
  left: 0;
  width: 100%;
  border-width: 1px 0 0;
}

.pitch-marks i:nth-child(3) {
  bottom: -1px;
  width: min(48%, 320px);
  height: 17%;
  translate: -50% 0;
}

.pitch-line {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  gap: 6px;
}

.shirt {
  flex: 0 1 116px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: translate 0.15s;
}

.shirt:hover {
  translate: 0 -3px;
}

.shirt-badge {
  position: relative;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}

.shirt-crest {
  --size: 62px;
}

.shirt-rating {
  position: absolute;
  left: -12px;
  bottom: -3px;
  min-width: 27px;
  padding: 4px 4px 3px;
  border-radius: 5px;
  background: var(--face);
  color: var(--c-ink);
  font: 700 0.9rem/1 var(--font-display);
}

.shirt.tier-icon .shirt-rating {
  background: #121811;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.shirt-captain {
  position: absolute;
  right: -9px;
  top: -3px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 0.8rem/1 var(--font-display);
}

.shirt-name {
  max-width: 100%;
  margin-top: 9px;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(8, 11, 10, 0.74);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 1rem/1.15 var(--font-display);
  letter-spacing: 0.03em;
}

.shirt-note {
  margin-top: 4px;
  color: rgba(241, 245, 236, 0.8);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.xi-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
  color: var(--ink-2);
}

.xi-foot p {
  margin: 0;
}

.xi-foot .tag {
  margin-left: 0;
  font-size: 0.82rem;
}

/* ---- Arriving ------------------------------------------------------------ */

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

.hero-copy > *,
.profile-main > *,
.step {
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.hero-copy > :nth-child(2),
.profile-main > :nth-child(2),
.step:nth-child(2) {
  animation-delay: 0.05s;
}

.hero-copy > :nth-child(3),
.profile-main > :nth-child(3),
.step:nth-child(3) {
  animation-delay: 0.1s;
}

.hero-copy > :nth-child(4),
.profile-main > :nth-child(4) {
  animation-delay: 0.15s;
}

.hero-copy > :nth-child(n + 5),
.profile-main > :nth-child(n + 5) {
  animation-delay: 0.2s;
}

.score {
  animation: rise 0.6s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.fan-slot,
.card-holder {
  animation: rise 0.7s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.fan-slot.rank-2 {
  animation-delay: 0.2s;
}

.fan-slot.rank-3 {
  animation-delay: 0.28s;
}

/* ---- Small screens ------------------------------------------------------- */

@media (max-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 28px;
    gap: 16px;
  }

  .stage {
    min-height: 420px;
  }

  .steps ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .profile-side {
    position: static;
  }

  .match-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .col-model,
  .col-tools,
  .col-days {
    display: none;
  }
}

@media (max-width: 620px) {
  main,
  .wrap {
    padding-inline: 16px;
  }

  .brand {
    font-size: 1.12rem;
  }

  .brand-mark {
    width: 22px;
    height: 22px;
  }

  .site-nav {
    gap: 14px;
  }

  .site-nav a:not(.btn) {
    font-size: 0.86rem;
  }

  .site-nav a[href="/#table"],
  .site-nav a[href="/how"] {
    display: none;
  }

  /* The score goes on top and the two cards sit side by side beneath it. */
  .scoreboard {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px 12px;
  }

  .score {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: none;
  }

  .side .card {
    --w: min(190px, 41vw);
  }

  .side-name {
    font-size: 1.05rem;
  }

  .col-split {
    display: none;
  }

  .col-rank {
    width: 84px;
  }

  .move {
    margin-left: 4px;
  }

  .pitch {
    padding: 30px 6px 26px;
    gap: 24px;
  }

  .shirt {
    flex-basis: 78px;
  }

  .shirt-crest {
    --size: 46px;
  }

  .shirt-name {
    font-size: 0.82rem;
    padding-inline: 5px;
  }

  .shirt-note {
    font-size: 0.68rem;
  }

  .pitch-marks i:nth-child(1) {
    width: 84px;
    height: 84px;
  }

  .table th,
  .table td {
    padding-inline: 10px;
  }

  .table.plain th,
  .table.plain td {
    padding-inline: 6px;
  }

  .hero {
    overflow-x: clip;
  }

  .stage {
    min-height: 340px;
  }

  /* The fan scales with the screen so three cards always fit side by side. */
  .fan-slot .card {
    --w: min(150px, 33vw);
  }

  .fan-slot.rank-1 .card {
    --w: min(200px, 44vw);
  }

  .fan-3 .rank-2 {
    margin-right: -9vw;
  }

  .fan-3 .rank-3 {
    margin-left: -9vw;
  }

  .fan-1 .card {
    --w: min(260px, 70vw);
  }

  .profile-side .card {
    --w: min(280px, 76vw);
  }

  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attributes li {
    grid-template-columns: 36px 84px minmax(40px, 1fr) 28px;
    gap: 10px;
  }

  .attr-name small {
    display: none;
  }

  .reads a {
    margin-left: 0;
  }

  .figures {
    gap: 18px;
  }
}

/* The narrowest phones: the header keeps its mark and drops the wordmark. */
@media (max-width: 430px) {
  .site-header .brand span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}