/* The leaderboards on the website: the painted billboard with this month's countries on it (the home
   page's Leaderboards section and the /leaderboards page), the countdown to the season's end and the
   standings table (/leaderboards only). boards.js fills them in. The colours are the pages' own
   tokens; the board's are the app's. */

:root {
  --night: #181b4f;      /* the painting's sky at the top, so the art's edges melt into the page */
  --night-2: #12143a;
  --board: #121010;      /* the billboard's screen, as keyed into the art */
  --board-row: #1b1818;
  --board-line: #2b2727;
  --board-muted: #8f8a8a;
  --gold: #f2c14e;
  --silver: #c9ced6;
  --bronze: #d99560;
}

/* ——— The billboard: the painting (a still, or a clip that plays once) and, laid over its
   screen, a board drawn in the page. The stage is the art's own 1080 x 1910 pixels, scaled to the
   frame's width (--k, from boards.js); the board is 1034 x 750 and boards.js bends it onto the
   screen's four corners with a matrix3d. A page crops the art's foot with the frame's aspect-ratio. ——— */
.bb { position: relative; margin: 0; }
.bb-frame { position: relative; aspect-ratio: 1080 / 1910; overflow: hidden; background: var(--night); }
.bb-art { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1080 / 1910; display: block; object-fit: cover; }
.bb-stage { position: absolute; left: 0; top: 0; width: 1080px; height: 1910px; transform-origin: 0 0; transform: scale(var(--k, .4)); pointer-events: none; }
.bb-board { position: absolute; left: 0; top: 0; width: 1034px; height: 750px; transform-origin: 0 0; background: var(--board); color: #f3f2f2; font-family: var(--archivo); overflow: hidden; visibility: hidden; }
.bb-board.placed { visibility: visible; }
/* The 16:9 painting (/leaderboards on a computer or tablet): its own size, and a board as wide as its screen. */
.bb-wide .bb-frame, .bb-wide .bb-art { aspect-ratio: 2688 / 1520; }
.bb-wide .bb-stage { width: 2688px; height: 1520px; }
.bb-wide .bb-board { width: 1480px; }
.bb-eyebrow { position: absolute; left: 44px; right: 44px; top: 34px; margin: 0; font-size: 44px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; line-height: 1; text-transform: uppercase; color: #bab6b6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-cols { position: absolute; left: 44px; right: 44px; top: 104px; height: 26px; font-size: 24px; font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--board-muted); }
.bb-cols span { position: absolute; top: 0; white-space: nowrap; }
.bb-cols span:nth-child(1) { left: 0; }
.bb-cols span:nth-child(2) { left: 172px; }
.bb-cols span:nth-child(3) { right: 0; }
.bb-rows { position: absolute; left: 24px; right: 24px; top: 144px; margin: 0; padding: 0; list-style: none; }
.bb-row { position: relative; height: 118px; border-top: 2px solid var(--board-line); }
.bb-tile { position: absolute; left: 18px; top: 16px; width: 84px; height: 84px; border-radius: 10px; background: var(--board-line); display: flex; align-items: center; justify-content: center; font-size: 60px; font-weight: 800; font-stretch: 62.5%; color: #f3f2f2; }
.bb-row:nth-child(1) .bb-tile { background: var(--gold); color: var(--ink); }
.bb-row:nth-child(2) .bb-tile { background: var(--silver); color: var(--ink); }
.bb-row:nth-child(3) .bb-tile { background: var(--bronze); color: var(--ink); }
.bb-flag { position: absolute; left: 124px; top: 22px; width: 84px; font-size: 64px; line-height: 74px; text-align: center; }
.bb-name { position: absolute; left: 226px; right: 240px; top: 26px; font-size: 62px; font-weight: 700; letter-spacing: -.02em; line-height: 66px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-name.long { font-size: 50px; top: 32px; }
.bb-num { position: absolute; right: 20px; top: 12px; font-size: 88px; font-weight: 800; font-stretch: 62.5%; line-height: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.bb-crown { display: inline-block; width: 52px; height: 44px; margin-left: 16px; vertical-align: 0; fill: var(--gold); }
/* No rows to show: a line or two, big, in the screen's middle. */
.bb-note { position: absolute; left: 60px; right: 60px; top: 150px; bottom: 40px; display: none; flex-direction: column; justify-content: center; gap: 28px; }
.bb-note p { margin: 0; }
.bb-big { font-size: 112px; font-weight: 800; line-height: .95; letter-spacing: -.04em; text-wrap: balance; }
.bb-small { font-size: 44px; font-weight: 600; line-height: 1.25; color: #bab6b6; }
.bb-board[data-state="list"] .bb-rows { display: block; }
.bb-board:not([data-state="list"]):not([data-state="empty"]) .bb-eyebrow { display: none; }
.bb-board:not([data-state="list"]) .bb-rows, .bb-board:not([data-state="list"]) .bb-cols { display: none; }
.bb-board[data-state="empty"] .bb-empty, .bb-board[data-state="off"] .bb-off,
.bb-board[data-state="loading"] .bb-wait, .bb-board[data-state="error"] .bb-wait { display: flex; }
/* A flag the device can't draw (Windows draws flags as letters): its two letters in a box instead. */
.flag-code { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.15em; padding: 0 .2em; border: .07em solid currentColor; border-radius: .14em; font-family: var(--archivo); font-size: .62em; font-weight: 800; font-stretch: 125%; letter-spacing: .04em; vertical-align: .12em; }

/* Parts boards.js hides: the season's countdown while the boards are off, "Updated" before the first update. */
[data-if-on][hidden], [data-if-updated][hidden] { display: none !important; }

/* ——— The countdown to the season's end, like the app's big timer ——— */
.cd { display: flex; flex-direction: column; gap: 12px; }
.cd-label { font-family: var(--archivo); font-stretch: 125%; font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.cd-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 460px; margin: 0; padding: 0; list-style: none; }
.cd-cells li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 14px 12px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); }
.cd-cells b { font-family: var(--archivo); font-weight: 800; font-stretch: 62.5%; font-size: clamp(44px, 5vw, 64px); line-height: .9; font-variant-numeric: tabular-nums; }
.cd-cells span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cd-ends { font-size: 15px; opacity: .85; }

/* ——— The standings: every country this month, by rounds played ——— */
.st { display: flex; flex-direction: column; gap: 22px; }
.st-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: var(--rule); background: var(--card); }
.st-totals li { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 20px; }
.st-totals li + li { border-left: var(--rule); }
.st-totals b { font-family: var(--archivo); font-weight: 800; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.st-totals span { font-size: 16px; color: var(--ink-2); }
.st-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.st-find { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; }
.st-find select { height: 48px; max-width: 70vw; padding: 0 40px 0 14px; border: var(--rule); border-radius: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201e1d' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; font: inherit; font-weight: 600; color: var(--ink); -webkit-appearance: none; appearance: none; }
.st-table { width: 100%; border-collapse: collapse; background: var(--card); border: var(--rule); font-variant-numeric: tabular-nums; }
.st-table th { padding: 12px 16px; border-bottom: var(--rule); font-family: var(--archivo); font-stretch: 125%; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: left; white-space: nowrap; }
.st-table th:last-child, .st-table td:last-child { text-align: right; }
.st-table td { padding: 10px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.st-table tr:first-child td { border-top: 0; }
.st-pos { width: 1%; }
.st-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 6px; background: var(--fill); font-family: var(--archivo); font-weight: 800; font-stretch: 62.5%; font-size: 26px; }
tr[data-rank="1"] .st-tile { background: var(--gold); }
tr[data-rank="2"] .st-tile { background: var(--silver); }
tr[data-rank="3"] .st-tile { background: var(--bronze); }
.st-country { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-flag { flex: none; width: 34px; font-size: 26px; line-height: 1; text-align: center; }
.st-name { min-width: 0; font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.st-bar { display: block; height: 6px; margin-top: 6px; background: var(--red); transform-origin: 0 50%; }
.st-num { font-family: var(--archivo); font-weight: 800; font-size: 26px; letter-spacing: -.02em; white-space: nowrap; }
.st-table tr.picked td { background: #fff3ef; }
.st-table tr.picked .st-name { color: var(--red-text); }
.st-table tr[hidden] { display: none; }
.st-more { align-self: flex-start; }
.st-note { padding: 28px; display: flex; flex-direction: column; gap: 10px; border: var(--rule); background: var(--card); }
.st-note h3 { font-size: 28px; line-height: 1.05; letter-spacing: -.03em; }
/* boards.js shows only the parts for what it has (data-show: list, empty, off, error, loading). */
.st [hidden] { display: none !important; }
@media (max-width: 720px) {
  .st-totals li { padding: 18px 16px; }
  .st-table th, .st-table td { padding-left: 10px; padding-right: 10px; }
  .st-name { font-size: 16px; }
  .st-num { font-size: 22px; }
  .st-tile { min-width: 34px; height: 34px; font-size: 22px; }
  .st-find { flex-wrap: wrap; }
}