/* The public pages — tournaments (/t/<slug>/…) and leagues (/l/…) — on the WR Pro design
   language (worldriichi.pro): Archivo wide and heavy for names, Space Mono uppercase for
   labels and numerals, a bone ground with navy bands and the blossom pink.

   Everything is drawn from the tokens the page sets in its own :root block at publish time —
   the event's palette plus the ink derived from it (see branding.py). Tints are mixed here from
   those tokens so they have one definition, and the branding editor's preview, which sets the
   same custom properties, looks exactly like the page. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/static/fonts/archivo-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/space-mono-700.woff2") format("woff2");
}

:root {
  --ev-primary: #0b1530;
  --ev-primary-ink: #f2f1ee;
  --ev-accent: #ff005d;
  --ev-accent-ink: #ffffff;
  --ev-surface: #f2f1ee;
  --ev-text: #0b1530;
  --ev-card: #ffffff;
  /* The band the progress diagram sits on, and its ink; the primary by default. */
  --ev-band: #0b1530;
  --ev-band-ink: #f2f1ee;

  --ev-muted: color-mix(in srgb, var(--ev-text) 62%, var(--ev-card));
  --ev-rule: color-mix(in srgb, var(--ev-text) 11%, var(--ev-surface));
  --ev-stripe: color-mix(in srgb, var(--ev-surface) 55%, var(--ev-card));
  --ev-hover: color-mix(in srgb, var(--ev-accent) 8%, var(--ev-card));
  --ev-band-muted: color-mix(in srgb, var(--ev-band-ink) 62%, var(--ev-band));
  --ev-pos: var(--ev-text);
  --ev-neg: #c90802;
  --ev-gain: #1a7f37;
  --ev-zero: var(--ev-muted);

  --ev-radius: 6px;
  --ev-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ev-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ev-font);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ev-text);
  background: var(--ev-surface);
  font-variant-numeric: tabular-nums;
}

a { color: var(--ev-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* The label voice: everything small and uppercase is Space Mono, letter-spaced. */
.ev-kicker, .ev-sub, .ev-badge, .ev-small, .ev-subline, .ev-footer, .ev-legend, .ev-op,
.ev-progress .ev-sub {
  font-family: var(--ev-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.66rem;
}

/* --- header ------------------------------------------------------------------------------ */

.ev-header {
  background: var(--ev-primary);
  color: var(--ev-primary-ink);
}
.ev-header a { color: inherit; }
.ev-header .ev-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0 0.9rem;
}
.ev-header .ev-logo-link { display: flex; flex: none; }
.ev-logo {
  display: block;
  /* A fixed height with auto width, not max-* alone: an SVG without intrinsic dimensions
     otherwise lays out at zero width inside the flex row. */
  height: 56px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
.ev-title {
  flex: 1 1 auto;
  min-width: 0;
}
.ev-title h1 {
  margin: 0;
  font-family: var(--ev-font);
  font-variation-settings: "wdth" 118, "wght" 850;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
}
.ev-title .ev-kicker {
  display: block;
  color: var(--ev-accent);
  margin-bottom: 0.35rem;
}
.ev-wrl {
  display: block;
  height: 40px;
  width: 40px;
  opacity: 0.95;
  flex: none;
}

.ev-wrap {
  width: min(1100px, 100% - 2rem);
  margin: 0 auto;
}

/* --- nav: pills on the band, the active one in the accent -------------------------------- */

.ev-nav {
  background: var(--ev-primary);
  position: sticky;
  top: 0;
  z-index: 5;
}
.ev-nav .ev-wrap {
  display: flex;
  gap: 0.5rem;
  padding: 0 0 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
}
.ev-nav a {
  display: inline-block;
  font-family: var(--ev-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ev-primary-ink);
  border: 1.5px solid color-mix(in srgb, var(--ev-primary-ink) 22%, var(--ev-primary));
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
}
.ev-nav a:hover { background: color-mix(in srgb, var(--ev-primary-ink) 10%, var(--ev-primary)); text-decoration: none; }
.ev-nav a.active { background: var(--ev-accent); border-color: var(--ev-accent); color: var(--ev-accent-ink); }
.ev-nav .ev-crumb-sep { color: var(--ev-band-muted); opacity: 0.8; }

/* --- content ----------------------------------------------------------------------------- */

#main {
  padding: 1.5rem 0 3rem;
}
#main > .ev-wrap { display: grid; gap: 1.25rem; }
/* Grid children default to min-width:auto, so a wide table would push a card past the viewport
   instead of scrolling inside .ev-scroll. */
#main > .ev-wrap > * { min-width: 0; }

.ev-card {
  background: var(--ev-card);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-radius);
  padding: 1.25rem 1.5rem;
}

/* Page-level heading: the event name is in the header, so the body h1 repeats it only for
   machines (the export strips it); the h2 under it is what the reader sees. */
.ev-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
h2 {
  margin: 0 0 0.9rem;
  font-family: var(--ev-font);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0;
}
h3 {
  margin: 1rem 0 0.5rem;
  font-family: var(--ev-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ev-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ev-lede { color: var(--ev-muted); margin: -0.4rem 0 1rem; font-size: 0.85rem; }
.ev-empty {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--ev-muted);
  font-size: 1rem;
}
.ev-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--ev-rule);
  margin: 0 0 1rem;
  font-family: var(--ev-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ev-muted);
}
.ev-stat strong { font-size: 1.1rem; color: var(--ev-accent); }

/* --- tables ------------------------------------------------------------------------------ */

.ev-scroll { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
}
thead th {
  text-align: left;
  font-family: var(--ev-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ev-muted);
  background: transparent;
  padding: 0.3rem 0.6rem 0.5rem;
  border-bottom: 2px solid var(--ev-text);
  white-space: nowrap;
}
thead th a { color: inherit; }
tbody td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--ev-rule);
}
tbody tr:hover { background: var(--ev-hover); }
/* Score tables: first column is a rank/round, second the name, everything after a number.
   Positional rather than classed, because the export and tests read the plain <th> text. */
#ranking thead th:nth-child(n+3), #team-ranking thead th:nth-child(n+3),
.gameresults thead th:nth-child(n+3) { text-align: right; }
#ranking thead th:first-child, #team-ranking thead th:first-child, .gameresults thead th:first-child,
.participants thead th:first-child { text-align: center; }
.gameresults thead th:nth-child(2) { text-align: left; }
/* A text column sitting past position 2 — a team beside a player's name. The positional rules
   above assume everything from the third column on is a number and right-align it, so a text
   column has to say otherwise, header and cell together. */
#ranking th.ev-label, #ranking td.ev-label,
#team-ranking th.ev-label, #team-ranking td.ev-label { text-align: left; }
tbody td.num { text-align: right; }
tbody td.rank { text-align: center; width: 3.5rem; }
tbody td.muted { color: var(--ev-muted); text-align: center; padding: 1.25rem; }

/* Numerals: Space Mono, the total leads; only negatives take colour. */
#ranking td:nth-child(n+3), #team-ranking td:nth-child(n+3),
.gameresults td:nth-child(n+3), .participants td:nth-child(3),
td.rank, .ev-mono, .scorePos, .scoreNeg, .score0 {
  font-family: var(--ev-mono);
  font-weight: 700;
  font-size: 0.86rem;
}
#ranking td:nth-child(3), .gameresults td.total { font-size: 0.98rem; color: var(--ev-text); }
/* On a team board the outcome is the LAST column, not the third: squad and games sit between the
   name and the score. Pointing the leading numeral at the end keeps "what the table is about"
   the thing that reads largest, whichever columns a board carries. */
#team-ranking td:last-child { font-size: 0.98rem; color: var(--ev-text); }
.gameresults td.scorePos:not(.total), .gameresults td.scoreNeg:not(.total) { font-weight: 400; }
td.rank { color: var(--ev-muted); font-weight: 400; }
tbody tr:first-child td.rank { color: var(--ev-text); font-weight: 700; }
.participants td.rank { color: var(--ev-muted); font-weight: 400; }
#ranking td:nth-child(2), #team-ranking td:nth-child(2),
.gameresults td:nth-child(2) { font-variation-settings: "wdth" 105, "wght" 700; }
#ranking tbody a, #team-ranking tbody a, .gameresults tbody a { color: var(--ev-text); }
#ranking tbody a:hover, #team-ranking tbody a:hover,
.gameresults tbody a:hover { color: var(--ev-accent); }
#ranking thead th a, .gameresults thead th a { color: inherit; }
#ranking thead th a:hover, .gameresults thead th a:hover { text-decoration: underline; }

.scorePos { color: var(--ev-pos); }
/* Used where a gain and a loss appear side by side and the contrast IS the information. The
   ledger convention elsewhere — only negatives coloured — still holds for standings columns. */
.ev-gain { color: var(--ev-gain); }
.ev-loss { color: var(--ev-neg); }
.scoreNeg { color: var(--ev-neg); }
.score0 { color: var(--ev-zero); }
#ranking .scorePos, #ranking .scoreNeg, #ranking .score0,
.gameresults .scorePos, .gameresults .scoreNeg, .gameresults .score0 { text-align: right; }
.gameresults td.total, .gameresults th.total { font-weight: 700; }
.gameresults th.ev-rcol { width: 5.5rem; }

/* WRC Rules 2025 §5 tiebreaks: the reason beside a tied player; a marker when nothing
   separated them (the rulebook's last resort is a coin toss, a human call). */
.ev-tb {
  font-family: var(--ev-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ev-muted);
  white-space: nowrap;
  margin-left: 0.3rem;
}
.ev-tb.unresolved {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #fff3cd;
  color: #664d03;
}

/* Winds as tile glyphs on the round page. */
.ev-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1.5px solid var(--ev-text);
  border-radius: 3px;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ev-text);
  background: var(--ev-card);
}
.ev-wind.e { color: var(--ev-accent); border-color: var(--ev-accent); }

/* Seating: a grid of table cards per round. */
#seatingBody section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
#seatingBody section h2 {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ev-accent);
}
#seatingBody section h2 a { color: inherit; }
table.seating {
  border: 1px solid var(--ev-rule);
  border-radius: 6px;
  overflow: hidden;
}
table.seating thead th { background: var(--ev-primary); color: var(--ev-primary-ink); border-bottom: 2px solid var(--ev-accent); padding: 0.45rem 0.6rem; }
table.seating td { padding: 0.45rem 0.6rem; }
table.seating td.vacant { color: var(--ev-muted); font-style: italic; }

/* --- stage cards ------------------------------------------------------------------------ */

.ev-stage-card.live { border-left: 4px solid var(--ev-accent); }
.ev-stage-card.done { border-left: 4px solid var(--ev-rule); }
.ev-stage-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ev-stage-head h2 { margin: 0; }
.ev-stage-head .ev-sub { margin-left: auto; color: var(--ev-muted); }
.ev-badge {
  display: inline-block;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--ev-rule);
  color: var(--ev-muted);
  background: transparent;
  vertical-align: middle;
}
.ev-badge.live, .ev-badge.accent { background: var(--ev-accent); border-color: var(--ev-accent); color: var(--ev-accent-ink); }
.ev-badge.neg { border-color: var(--ev-neg); color: var(--ev-neg); }
.ev-stagerow td {
  background: var(--ev-primary) !important;
  color: var(--ev-primary-ink);
  font-family: var(--ev-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
/* One card per table on a shared session page — the same grid the seating view uses, so a night
   reads the same whether it is being planned or looked back at. */
.ev-table-card { margin: 0; }
.ev-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
/* A qualifier out of a table-placement stage. Tinted rather than bolded: the row is already a
   result, and the mark says "this one went through" without competing with the score. */
.ev-advanced { background: color-mix(in srgb, var(--ev-accent) 12%, transparent); }
.ev-advanced td { font-weight: 600; }
.ev-through {
  font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ev-accent); white-space: nowrap;
}
/* Its own column so the mark aligns down the right edge beside the scores rather than trailing
   each name at a different x. Narrow, and empty for the players who did not go through. */
.ev-advcol { text-align: right; width: 5.5rem; white-space: nowrap; }
.ev-tables h3 { margin-top: 0.25rem; }

/* --- progress diagram: a band in the primary, the diagram in light ink ------------------- */

.ev-progress {
  background: var(--ev-band);
  color: var(--ev-band-ink);
  border-color: var(--ev-band);
}
.ev-progress h2 { color: var(--ev-band-ink); }
.ev-progress .ev-sub { color: var(--ev-accent); font-weight: 700; }
.ev-progress #progress { overflow-x: auto; }
.ev-progress #progress svg { display: block; font-family: var(--ev-font); }

/* --- footer ------------------------------------------------------------------------------ */

.ev-footer {
  background: var(--ev-primary);
  color: var(--ev-band-muted);
}
.ev-footer .ev-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 1.5rem;
}
.ev-footer .ev-wrl { height: 28px; width: 28px; opacity: 0.8; }

/* --- embeds (participants / staff, no chrome) -------------------------------------------- */

body.ev-embed { background: transparent; }
body.ev-embed #main { padding: 0; }
body.ev-embed .ev-card { border: 0; padding: 0; background: transparent; }

/* --- projector --------------------------------------------------------------------------- */

body.ev-projector {
  background: var(--ev-primary);
  color: var(--ev-primary-ink);
  overflow: hidden;
  font-size: 1.35rem;
}
#scoreHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 2rem;
  background: var(--ev-primary);
  border-bottom: 4px solid var(--ev-accent);
}
#scoreHeader h2 { margin: 0; font-size: 1.75rem; flex: 1; color: inherit; }
#scoreHeader #paginator { font-family: var(--ev-mono); font-size: 0.55em; opacity: 0.6; margin-left: 0.75rem; }
#scoreHeader .ev-logo { max-height: 56px; }
#home { display: flex; gap: 1rem; font-family: var(--ev-mono); font-size: 0.6em; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; }
#home a { color: inherit; }
#scoreBody {
  position: fixed;
  bottom: 0;
  left: 1em;
  display: grid;
  margin: 1em 3em 0 3em;
  grid-auto-flow: column;
  column-gap: 5px;
  grid-template-rows: repeat(auto-fill, 2.5em);
  grid-template-columns: repeat(auto-fill, 20em);
}
.scorePlayer {
  margin-right: 1.5em;
  padding: 0.35em 0.75em;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ev-primary-ink) 8%, transparent);
}
.scorePlayer:nth-child(2n) { background: color-mix(in srgb, var(--ev-primary-ink) 14%, transparent); }
.scoreRank { width: 2.5em; display: inline-block; text-align: right; font-family: var(--ev-mono); font-weight: 700; color: var(--ev-accent); }
.scoreScore { width: 4.5em; display: inline-block; text-align: right; font-family: var(--ev-mono); font-weight: 700; color: inherit; }
.scoreName { display: inline-block; padding-left: 1em; font-variation-settings: "wdth" 105, "wght" 600; }

/* --- league pages (live, on the same shell) --------------------------------------------- */

.ev-list { list-style: none; margin: 0; padding: 0; }
.ev-list li { border-bottom: 1px solid var(--ev-rule); }
.ev-list li:last-child { border-bottom: 0; }
.ev-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.25rem;
  color: var(--ev-text);
  font-variation-settings: "wdth" 105, "wght" 700;
}
.ev-list a:hover { background: var(--ev-hover); text-decoration: none; }

.ev-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.ev-card-head h2 { margin: 0; }
.ev-card-head .ev-sub { color: var(--ev-muted); }

.ev-select {
  font: inherit;
  font-family: var(--ev-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ev-text);
  background: var(--ev-card);
  border: 1.5px solid var(--ev-rule);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
}
.ev-select:focus { outline: 2px solid var(--ev-accent); outline-offset: 1px; }
.ev-inline-form { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ev-muted); }
.ev-inline-form label { font-family: var(--ev-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; }

.ev-hero { display: flex; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.ev-hero .ev-big { font-family: var(--ev-mono); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--ev-accent); }
.ev-hero .ev-mid { font-family: var(--ev-mono); font-size: 1.2rem; font-weight: 700; line-height: 1; }
.ev-hero .ev-cap { font-family: var(--ev-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ev-muted); margin-top: 0.35rem; }
.ev-muted { color: var(--ev-muted); }
.ev-subline { display: block; color: var(--ev-muted); font-weight: 400; margin-top: 0.15rem; }
tbody td.ev-self, tbody tr.ev-self { background: var(--ev-hover); font-weight: 700; }
/* A game inside the player's best run — the standings' banded window, carried onto the list. */
tbody tr.ev-streakrow td { background: var(--ev-hover); }
tbody tr.ev-streakrow td:first-child { box-shadow: inset 3px 0 0 var(--ev-accent); }
/* League game tables: columns 2–5 are NAMES (1st…4th), not numerals — the tournament
   tables' positional rules must not touch them. Only a .num column is right-aligned. */
.ev-games thead th:nth-child(n+3) { text-align: left; }
.ev-games thead th.num, .ev-games td.num { text-align: right; }
.ev-games td.ev-seat {
  text-align: left;
  font-family: var(--ev-font);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-weight: 500;
  font-size: 0.9rem;
}
.ev-games td.ev-seat a { color: var(--ev-text); }
.ev-games td.ev-seat .ev-subline { font-family: var(--ev-mono); font-size: 0.66rem; margin-top: 0.1rem; text-align: left; }
.ev-op { color: var(--ev-muted); text-align: center; padding: 0 0.1rem; }

.ev-signin {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--ev-accent);
  color: var(--ev-accent-ink);
  font-family: var(--ev-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 700;
}
.ev-signin:hover { text-decoration: none; filter: brightness(1.05); }

/* --- small screens ----------------------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 14px; }
  .ev-header .ev-wrap { gap: 0.75rem; padding: 0.8rem 0 0.6rem; }
  .ev-logo { height: 40px; max-width: 120px; }
  .ev-title h1 { font-size: 1.35rem; }
  .ev-wrl { height: 32px; width: 32px; }
  .ev-nav .ev-wrap { padding-bottom: 0.7rem; }
  .ev-card { padding: 0.9rem; }
  thead th, tbody td { padding: 0.45rem 0.4rem; }
  #seatingBody section { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* --- Team crest -----------------------------------------------------------
   A logo when one exists, otherwise the team's name set in the same fixed box.
   CSS only, on purpose: no JS text fitting, so it paints identically wherever
   the partial is included and never shifts layout after load. A long name
   wraps and shrinks inside the box rather than pushing the row wider. */
.team-crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  overflow: hidden;
  vertical-align: middle;
  border-radius: 0.25rem;
}
.team-crest__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.team-crest--text {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.team-crest__name {
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.05;
  text-align: center;
  padding: 0.1rem;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-height: 100%;
}

/* ------------------------------------------------------------------ */
/* Mobile: the wide tables re-stack instead of scrolling sideways.     */
/* A standings row becomes a stacked entry — rank, name and the ranked */
/* number on the first line, the team under the name, the best-run     */
/* chart and season total on their own lines. A games row puts its     */
/* four seats in a 2x2 under the game's date. Desktop is untouched.    */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  table.ev-stack, table.ev-stack tbody { display: block; width: 100%; }
  table.ev-stack thead { display: none; }
  table.ev-stack tr {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    column-gap: 0.55rem;
    align-items: baseline;
    padding: 0.5rem 0.15rem;
    border-bottom: 1px solid var(--ev-rule);
  }
  table.ev-stack td { display: block; width: auto; padding: 0; border: 0; }
  table.ev-stack td.rank { grid-row: 1; grid-column: 1; text-align: right; }
  table.ev-stack td.player { grid-row: 1; grid-column: 2; }
  table.ev-stack td.score { grid-row: 1; grid-column: 3; text-align: right; }
  table.ev-stack td.ev-label { grid-row: 2; grid-column: 2 / -1; }
  table.ev-stack td.spark {
    grid-row: 3; grid-column: 1 / -1;
    text-align: left; overflow-x: auto;  /* a 40-game season scrolls its own chart, not the page */
  }
  /* The header row is gone, so the small numbers say what they are. */
  table.ev-stack td.games { grid-row: 4; grid-column: 2; font-size: 0.78rem; }
  table.ev-stack td.games::after { content: " games"; font-family: var(--ev-font); font-weight: 400; }
  table.ev-stack td.total { grid-row: 4; grid-column: 3; text-align: right; font-size: 0.78rem; }
  table.ev-stack td.total::before { content: "season "; font-family: var(--ev-font); font-weight: 400; }

  /* The proto table has no rank and no ranked score: name and season total lead,
     the chart and the games count stack beneath. */
  table.ev-stack.proto tr { grid-template-columns: minmax(0, 1fr) auto; }
  table.ev-stack.proto td.player { grid-row: 1; grid-column: 1; }
  table.ev-stack.proto td.total { grid-row: 1; grid-column: 2; }
  table.ev-stack.proto td.spark { grid-row: 2; grid-column: 1 / -1; }
  table.ev-stack.proto td.games { grid-row: 3; grid-column: 1; }

  /* Games lists: the seats keep their finishing order, numbered because the
     column headers that said 1st..4th are gone. */
  table.ev-games, table.ev-games tbody { display: block; width: 100%; }
  table.ev-games thead { display: none; }
  table.ev-games tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.8rem;
    padding: 0.55rem 0.15rem;
    border-bottom: 1px solid var(--ev-rule);
    counter-reset: seat;
  }
  table.ev-games td { display: block; border: 0; padding: 0; }
  table.ev-games td:first-child { grid-column: 1 / -1; }
  table.ev-games td.ev-seat { counter-increment: seat; }
  table.ev-games td.ev-seat::before {
    content: counter(seat) ".";
    margin-right: 0.3rem;
    color: var(--ev-muted);
    font-family: var(--ev-mono);
    font-size: 0.72rem;
  }
  /* The player page's Result column repeats what the highlighted self seat already says —
     on a phone the 2x2 of seats reads cleaner without a fifth dangling cell. */
  table.ev-games td.num { display: none; }

  /* The breadcrumb trail wraps into tighter pills instead of running off the edge, and the
     nav gives up its sticky claim on a phone's already-short viewport. */
  .ev-nav { position: static; }
  .ev-nav .ev-wrap {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0.3rem;
    padding-bottom: 0.7rem;
  }
  .ev-nav a { padding: 0.3rem 0.6rem; font-size: 0.6rem; }

  /* The rule a board ranks by — and every card's aside — reads under the heading,
     not squeezed beside it. */
  .ev-card-head h2 .ev-sub { display: block; margin-top: 0.2rem; }
}