/* Magnet Board Daily (working name Magnetboardillion). The whole page is a day at the footy in pixels: sky at the top, the stand and the crowd, the goals, and the turf
   running on down the page under the scoreboard and the play. Light is a Saturday afternoon and the default; dark is a night game
   under lights and only swaps colours. Flat colour everywhere: no gradient, no cream. Square corners, a thick ink line and a hard
   shadow on everything that can be pressed or read. One family in pixels, Jersey, each cut at a size its grid lands on whole screen
   pixels: Jersey 10 (30 px and up) for the wordmark, the numerals, the calls and the questions, Jersey 20 (20 px) for the interface,
   Jersey 15 (15 px) for small labels. Names and years have to be read at a glance, and this family keeps B, 8, 9 and S apart.
   Barlow where there is a page to read.
   tools/mkillion.js writes the @font-face rules in place of the next line. */
@font-face { font-family: 'Jersey 10'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jersey-10-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Jersey 15'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jersey-15-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Jersey 20'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jersey-20-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --bg: #8fd3ff; --turf: #58b947; --turf2: #4dab3d; --chalk: #ffffff;
  --cloud: #ffffff; --star: #8fd3ff; --pole: #56607a; --head: #27324d; --lamp: #c9d3e0;
  --roof: #f1f4f8; --stand: #27324d; --fence: #ffffff; --post: #ffffff; --pad: #d32c1f;
  --c0: #e23b2e; --c1: #ffd23f; --c2: #2f6fde; --c3: #ffffff; --c4: #ff8a3d; --c5: #17a398;
  --skin: #e8b48a; --hair: #5a3a22; --kit: #d32c1f; --ball: #d32c1f;
  --ink: #0b120e; --panel: #ffffff; --panel2: #e9edf1; --hill: #c3cad1; --mute: #3b4340; --faint: #59615d;
  --pri: #d32c1f; --pri-ink: #ffffff; --accent: #c2261b; --gold: #ffd23f; --gold-ink: #0b120e;
  --line: #0b120e; --shadow: #0b120e; --top-ink: #0b120e; --mark-sh: #ffffff;
  --sb: #0b120e; --sb-ink: #ffd23f; --sb-mute: #d5dad7; --sb-line: #2f3733;
  --mag: #ffffff; --mag-ink: #0b120e; --miss: #2f3733; --miss-ink: #d5dad7;
  --foot: #0b120e; --foot-ink: #d5dad7;
  --focus: #0b120e;
  --k: 2;   /* how many screen pixels to one pixel of the ground */
  --f-display: 'Jersey 10', Impact, 'Arial Narrow', sans-serif;
  --f-ui: 'Jersey 20', 'Jersey 10', 'Trebuchet MS', Verdana, sans-serif;
  --f-sm: 'Jersey 15', 'Jersey 20', 'Trebuchet MS', Verdana, sans-serif;
  --f-body: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b1030; --turf: #1f8a43; --turf2: #1b7b3b; --chalk: #e6f2ea;
  --cloud: #1a2250; --star: #ffffff; --pole: #39446f; --head: #1b2247; --lamp: #ffffff;
  --roof: #2c3663; --stand: #121838; --fence: #cfd6e6; --post: #ffffff; --pad: #d32c1f;
  --c0: #b93328; --c1: #d1ab31; --c2: #2a5fbd; --c3: #c9cfdd; --c4: #cf7234; --c5: #14867d; --ball: #ffd23f;   /* the yellow ball of a night game */
  --ink: #f1f4ff; --panel: #10163a; --panel2: #1a2250; --hill: #39446f; --mute: #c3c9de; --faint: #99a1bd;
  --accent: #ffd23f; --line: #f1f4ff; --shadow: #04061a; --top-ink: #f1f4ff; --mark-sh: #d32c1f;
  --sb: #04061a; --sb-ink: #ffd23f; --sb-mute: #c3c9de; --sb-line: #2c3663;
  --mag: #f1f4ff; --mag-ink: #0b120e; --miss: #1a2250; --miss-ink: #c3c9de;
  --foot: #04061a; --foot-ink: #c3c9de;
  --focus: #ffd23f;
  color-scheme: dark;
}
@media (min-width: 700px) and (min-height: 620px) { :root { --k: 3; } }
@media (min-width: 1200px) and (min-height: 860px) { :root { --k: 4; } }
@media (min-width: 2200px) and (min-height: 1150px) { :root { --k: 5; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-ligatures: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
[hidden] { display: none !important; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.il-skip { position: absolute; left: 12px; top: -90px; z-index: 5; padding: 10px 14px; background: var(--panel); color: var(--ink); border: 3px solid var(--line); font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
.il-skip:focus { top: 12px; }
.il-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the top line, up in the sky: the wordmark, the way to the rules, day or night ---------- */
.il-top { display: flex; align-items: center; gap: 8px 12px; width: min(1120px, 100%); margin: 0 auto; padding: 10px clamp(12px, 3vw, 28px) 6px; }
.il-mark { margin-right: auto; display: inline-block; font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 1; text-transform: uppercase; white-space: nowrap; color: var(--top-ink); text-decoration: none; text-shadow: 2px 2px 0 var(--mark-sh); -webkit-font-smoothing: none; }
.il-mark-d { display: inline-block; margin-left: .12em; padding: 0 .14em; background: var(--gold); color: var(--gold-ink); border: 2px solid var(--top-ink); text-shadow: none; line-height: .86; vertical-align: .04em; }
.il-o { display: inline-block; width: .4em; height: .5em; vertical-align: baseline; margin: 0 .04em; overflow: visible; }
.il-o-ball { fill: var(--pri); }
.il-o-lace { fill: #ffffff; }
.il-o-edge { fill: var(--top-ink); }
.il-nav { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: 20px; line-height: 1; }
.il-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; background: var(--panel); color: var(--ink); border: 3px solid var(--line); box-shadow: 3px 3px 0 var(--shadow); text-decoration: none; white-space: nowrap; }
.il-nav a[aria-current="page"] { background: var(--gold); color: var(--gold-ink); }
.il-theme { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; background: var(--panel); border: 3px solid var(--line); box-shadow: 3px 3px 0 var(--shadow); color: var(--ink); cursor: pointer; }
.il-theme svg { width: 22px; height: 22px; fill: currentColor; }
.il-theme .il-moon, :root[data-theme="dark"] .il-theme .il-sun { display: none; }
:root[data-theme="dark"] .il-theme .il-moon { display: block; }
.il-nav a:active, .il-theme:active { transform: translate(3px, 3px); box-shadow: none; }
.il-tag { width: min(1120px, 100%); margin: -2px auto 0; padding: 0 clamp(12px, 3vw, 28px) 6px; color: var(--top-ink); font-family: var(--f-sm); font-size: 15px; line-height: 1.3; }
.il-tag span { white-space: nowrap; }
@media (hover: hover) { .il-nav a:hover, .il-theme:hover { background: var(--gold); color: var(--gold-ink); } }
@media (max-width: 419px) { .il-nav a { display: none; } .il-mark { font-size: 30px; } }   /* a narrow phone: How to play is on the first screen and in the foot */
@media (min-width: 700px) { .il-mark { font-size: 60px; text-shadow: 3px 3px 0 var(--mark-sh); } .il-top { padding-top: 14px; } .il-tag { font-family: var(--f-ui); font-size: 20px; line-height: 1.2; } }

/* ---------- the ground ---------- */
.il-main { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; }
.il-world { position: relative; flex: none; height: calc(100px * var(--k)); overflow: hidden; background: var(--bg); }
.il-scene { position: absolute; left: 50%; bottom: 0; width: calc(320px * var(--k)); height: calc(100px * var(--k)); margin-left: calc(-160px * var(--k)); overflow: visible; }
.il-p-w { fill: #ffffff; } .il-p-k { fill: #0b120e; } .il-p-b { fill: var(--ball); } .il-p-r { fill: var(--kit); } .il-p-s { fill: var(--skin); } .il-p-h { fill: var(--hair); }
.il-p-cloud { fill: var(--cloud); } .il-p-star { fill: var(--star); } .il-p-pole { fill: var(--pole); } .il-p-head { fill: var(--head); } .il-p-lamp { fill: var(--lamp); }
.il-p-roof { fill: var(--roof); } .il-p-stand { fill: var(--stand); } .il-p-fence { fill: var(--fence); }
.il-p-turf { fill: var(--turf); } .il-p-turf2 { fill: var(--turf2); } .il-p-chalk { fill: var(--chalk); } .il-p-post { fill: var(--post); } .il-p-pad { fill: var(--pad); }
.il-c0 { fill: var(--c0); } .il-c1 { fill: var(--c1); } .il-c2 { fill: var(--c2); } .il-c3 { fill: var(--c3); } .il-c4 { fill: var(--c4); } .il-c5 { fill: var(--c5); }
.il-ump-g, .il-ump-b, .il-legs-b { visibility: hidden; }
.il-ball { transform-box: fill-box; transform-origin: center; }
/* a page that is read, and a day with no game: a strip of the ground, the crowd and the goals */
.il-w-page, .il-w-load, .il-w-none, .il-w-fail { height: calc(62px * var(--k)); }
.il-w-page .il-scene, .il-w-load .il-scene, .il-w-none .il-scene, .il-w-fail .il-scene { bottom: calc(-38px * var(--k)); }
.il-w-page .il-kicker, .il-w-page .il-ball, .il-w-load .il-kicker, .il-w-load .il-ball, .il-w-none .il-kicker, .il-w-none .il-ball, .il-w-fail .il-kicker, .il-w-fail .il-ball, .il-w-done .il-kicker, .il-w-done .il-ball { visibility: hidden; }
/* what a shot left behind (and all there is to see with reduced motion): the ball gone, the umpire's flags, the call */
.il-o-g .il-ball, .il-o-s .il-ball, .il-o-b .il-ball, .il-o-x .il-ball { visibility: hidden; }
.il-o-g .il-ump-idle, .il-o-s .il-ump-idle, .il-o-b .il-ump-idle { visibility: hidden; }
.il-o-g .il-ump-g, .il-o-s .il-ump-g, .il-o-b .il-ump-b { visibility: visible; }
.il-banner { position: absolute; left: 0; right: 0; top: calc(3px * var(--k)); z-index: 1; margin: 0; padding: 0 8px; text-align: center; font-family: var(--f-display); font-size: calc(30px * var(--k)); line-height: .9; text-transform: uppercase; white-space: nowrap; color: #ffffff; -webkit-font-smoothing: none; pointer-events: none;
  text-shadow: 3px 0 0 #0b120e, -3px 0 0 #0b120e, 0 3px 0 #0b120e, 0 -3px 0 #0b120e, 3px 3px 0 #0b120e, -3px -3px 0 #0b120e, 3px -3px 0 #0b120e, -3px 3px 0 #0b120e, 6px 6px 0 #0b120e; }
.il-banner:empty { display: none; }
.il-o-g .il-banner, .il-o-s .il-banner { color: var(--gold); }
.il-o-x .il-banner, .il-o-t .il-banner { font-size: calc(20px * var(--k)); top: calc(6px * var(--k)); }

/* the shot as it plays out: the leg swings, the ball goes, and only when it lands do the flags, the crowd, the call and the score follow */
/* a switch at a moment: the change sits in the middle of two milliseconds, because a browser may end an animation a hair short of its last frame */
@keyframes il-on { 0%, 49% { visibility: hidden; } 50%, 100% { visibility: visible; } }
@keyframes il-off { 0%, 49% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes il-leg-a { 0%, 15% { visibility: visible; } 16%, 70% { visibility: hidden; } 71%, 100% { visibility: visible; } }
@keyframes il-leg-b { 0%, 15% { visibility: hidden; } 16%, 70% { visibility: visible; } 71%, 100% { visibility: hidden; } }
@keyframes il-kick-g { 0% { visibility: visible; transform: translate(0px, 0px) scale(1); } 70% { visibility: visible; transform: translate(-8px, -62px) scale(.75); } 92% { visibility: visible; transform: translate(-9px, -57px) scale(.65); } 93%, 100% { visibility: hidden; transform: translate(-9px, -57px) scale(.65); } }
@keyframes il-kick-s { 0% { visibility: visible; transform: translate(0px, 0px) scale(1); } 70% { visibility: visible; transform: translate(-8px, -84px) scale(.75); } 92% { visibility: visible; transform: translate(-9px, -78px) scale(.65); } 93%, 100% { visibility: hidden; transform: translate(-9px, -78px) scale(.65); } }
@keyframes il-kick-bl { 0% { visibility: visible; transform: translate(0px, 0px) scale(1); } 70% { visibility: visible; transform: translate(-20px, -56px) scale(.75); } 92% { visibility: visible; transform: translate(-23px, -51px) scale(.65); } 93%, 100% { visibility: hidden; transform: translate(-23px, -51px) scale(.65); } }
@keyframes il-kick-br { 0% { visibility: visible; transform: translate(0px, 0px) scale(1); } 70% { visibility: visible; transform: translate(3px, -56px) scale(.75); } 92% { visibility: visible; transform: translate(4px, -51px) scale(.65); } 93%, 100% { visibility: hidden; transform: translate(4px, -51px) scale(.65); } }
@keyframes il-kick-xl { 0% { visibility: visible; transform: translate(0px, 0px) scale(1); } 70% { visibility: visible; transform: translate(-58px, -54px) scale(.75); } 92% { visibility: visible; transform: translate(-72px, -48px) scale(.65); } 93%, 100% { visibility: hidden; transform: translate(-72px, -48px) scale(.65); } }
@keyframes il-kick-xr { 0% { visibility: visible; transform: translate(0px, 0px) scale(1); } 70% { visibility: visible; transform: translate(42px, -54px) scale(.75); } 92% { visibility: visible; transform: translate(54px, -48px) scale(.65); } 93%, 100% { visibility: hidden; transform: translate(54px, -48px) scale(.65); } }
@keyframes il-hop { 0%, 49% { transform: translateY(0px); } 50%, 100% { transform: translateY(-1px); } }
@keyframes il-wave { 0%, 49% { transform: translateY(0px); } 50%, 100% { transform: translateY(-2px); } }
@keyframes il-pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes il-flash { 0%, 49% { color: var(--gold); } 50%, 100% { color: #ffffff; } }
@keyframes il-land { from { transform: scale(1.6); } to { transform: scale(1); } }
@keyframes il-blink { 0%, 49% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes il-drift { from { transform: translateX(0px); } to { transform: translateX(180px); } }
.il-cloud-a { animation: il-drift 240s steps(180) infinite alternate; }
.il-cloud-b { animation: il-drift 360s steps(180) infinite alternate-reverse; }
.il-w-low .il-crowd-a { animation: il-hop 500ms linear infinite; }
.il-w-low .il-crowd-b { animation: il-hop 500ms linear 250ms infinite; }
.il-anim .il-legs-a { animation: il-leg-a 700ms linear both; }
.il-anim .il-legs-b { animation: il-leg-b 700ms linear both; }
.il-anim.il-o-g .il-ball { animation: il-kick-g 900ms steps(15) 150ms both; }
.il-anim.il-o-s .il-ball { animation: il-kick-s 900ms steps(15) 150ms both; }
.il-anim.il-o-b.il-side-l .il-ball { animation: il-kick-bl 900ms steps(15) 150ms both; }
.il-anim.il-o-b.il-side-r .il-ball { animation: il-kick-br 900ms steps(15) 150ms both; }
.il-anim.il-o-x.il-side-l .il-ball { animation: il-kick-xl 900ms steps(15) 150ms both; }
.il-anim.il-o-x.il-side-r .il-ball { animation: il-kick-xr 900ms steps(15) 150ms both; }
.il-anim.il-o-g .il-ump-idle, .il-anim.il-o-s .il-ump-idle, .il-anim.il-o-b .il-ump-idle { animation: il-off 2ms linear 1100ms both; }
.il-anim.il-o-g .il-ump-g, .il-anim.il-o-s .il-ump-g, .il-anim.il-o-b .il-ump-b { animation: il-on 2ms linear 1100ms both; }
.il-anim .il-flag-a { animation: il-wave 320ms linear 1100ms 6; }
.il-anim .il-flag-b { animation: il-wave 320ms linear 1260ms 6; }
.il-anim.il-o-g .il-crowd-a, .il-anim.il-o-b .il-crowd-a { animation: il-hop 300ms linear 1100ms 8; }
.il-anim.il-o-g .il-crowd-b { animation: il-hop 300ms linear 1250ms 8; }
.il-anim.il-o-s .il-crowd-a { animation: il-hop 260ms linear 1100ms 18; }
.il-anim.il-o-s .il-crowd-b { animation: il-hop 260ms linear 1230ms 18; }
.il-anim .il-banner { transform-origin: 50% 60%; animation: il-pop 260ms steps(5) 1100ms both; }
.il-anim.il-o-s .il-banner { animation: il-pop 260ms steps(5) 1100ms both, il-flash 320ms linear 1360ms 8; }
.il-anim.il-o-t .il-legs-a, .il-anim.il-o-t .il-legs-b { animation: none; }
.il-anim.il-o-t .il-banner { animation: il-pop 260ms steps(5) both; }
/* under the ground, held until the ball lands: the old number on the scoreboard, the magnet, the call */
.il-sb dd { position: relative; }
.il-sb dd::before { content: attr(data-was); position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--sb); visibility: hidden; }
.il-world.il-anim:not(.il-o-t) ~ .il-ui .il-sb dd::before { animation: il-off 2ms linear 1100ms both; }
.il-world.il-anim:not(.il-o-t) ~ .il-ui .il-call { animation: il-on 2ms linear 1100ms both; }

/* ---------- on the turf under the ground: the scoreboard, and the play ---------- */
.il-ui { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; align-content: start; gap: 14px; padding: 0 12px 30px; background: var(--turf); }
.il-fence { position: relative; z-index: 1; margin-top: -12px; background: var(--sb); border: 3px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); }
.il-sb { display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; }
.il-sb div { padding: 6px 4px 0; text-align: center; border-left: 3px solid var(--sb-line); }
.il-sb div:first-child { border-left: 0; }
.il-sb dt { font-family: var(--f-sm); font-size: 15px; line-height: 1.2; color: var(--sb-mute); }
.il-sb dd { font-family: var(--f-display); font-size: 50px; line-height: .86; color: var(--sb-ink); font-variant-numeric: tabular-nums; -webkit-font-smoothing: none; }
.il-board { display: block; width: 100%; height: auto; border-top: 3px solid var(--sb-line); }
.il-b-turf { fill: var(--sb); }
.il-m-d { fill: var(--miss); }
.il-m-t { font-family: var(--f-display); font-size: 20px; fill: var(--miss-ink); font-variant-numeric: tabular-nums; }
.il-m-cur .il-m-d { fill: none; stroke: var(--mag); stroke-width: 2; }
.il-m-cur .il-m-t { fill: var(--mag); }
.il-m-cur .il-m-d, .il-m-cur .il-m-t { animation: il-blink 1s linear infinite; }
.il-m-g .il-m-d { fill: var(--pri); }
.il-m-g .il-m-t { fill: #ffffff; }
.il-m-s .il-m-d { fill: var(--gold); }
.il-m-s .il-m-t { fill: var(--gold-ink); }
.il-m-halo { fill: none; stroke: var(--gold); stroke-width: 1; }
.il-m-b .il-m-d { fill: var(--mag); }
.il-m-b .il-m-t { fill: var(--mag-ink); }
.il-m-x .il-m-d { fill: none; stroke: var(--miss-ink); stroke-width: 1; stroke-dasharray: 2 2; }
.il-m-x .il-m-t { fill: var(--miss-ink); }
.il-m-new .il-m-d, .il-m-new .il-m-t, .il-m-new .il-m-halo { transform-box: fill-box; transform-origin: center; animation: il-land 300ms steps(4) both; }
.il-world.il-anim:not(.il-o-t) ~ .il-ui .il-m-new .il-m-d, .il-world.il-anim:not(.il-o-t) ~ .il-ui .il-m-new .il-m-t, .il-world.il-anim:not(.il-o-t) ~ .il-ui .il-m-new .il-m-halo { animation: il-on 2ms linear 1100ms both, il-land 300ms steps(4) 1100ms both; }

.il-play { min-width: 0; padding: 16px 16px 18px; background: var(--panel); border: 3px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); }
.il-st-load .il-play, .il-st-none .il-play, .il-st-fail .il-play { margin-top: 14px; }
.il-h { font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: .9; text-transform: uppercase; text-wrap: balance; -webkit-font-smoothing: none; }
.il-h2 { margin-top: 30px; padding-top: 14px; border-top: 3px solid var(--line); font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; -webkit-font-smoothing: none; }
.il-p { margin-top: 12px; color: var(--mute); }
.il-wait { font-family: var(--f-ui); font-size: 20px; line-height: 1.2; color: var(--mute); }
.il-play .il-lede { margin-top: 10px; color: var(--ink); font-family: var(--f-ui); font-size: 20px; line-height: 1.2; text-wrap: pretty; }
.il-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.il-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 22px; background: var(--pri); color: var(--pri-ink); border: 3px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); border-radius: 0; font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-font-smoothing: none; }
.il-btn-q { background: var(--panel); color: var(--ink); }
.il-btn:active { transform: translate(4px, 4px); box-shadow: none; }
.il-link { font-family: var(--f-ui); font-size: 20px; line-height: 1.2; color: var(--ink); padding: 10px 0; }
@media (hover: hover) { .il-btn:hover { background: var(--gold); color: var(--gold-ink); } .il-link:hover { color: var(--accent); } }

/* a shot */
.il-no { font-family: var(--f-ui); font-size: 20px; line-height: 1.2; color: var(--faint); }
.il-q { margin-top: 6px; font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: .95; text-wrap: balance; -webkit-font-smoothing: none; }
.il-q-was { color: var(--mute); font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
.il-form { display: flex; gap: 10px; margin-top: 14px; padding-right: 4px; }
.il-in { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 12px; background: var(--panel); color: var(--ink); border: 3px solid var(--line); border-radius: 0; font-family: var(--f-ui); font-size: 20px; }
.il-in::placeholder { color: var(--faint); opacity: 1; }
.il-in:focus-visible { outline: 3px solid var(--pri); outline-offset: 0; }
.il-form .il-btn { padding: 10px 18px; }
.il-clock { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.il-clock b { flex: none; min-width: 52px; padding: 2px 6px 0; background: var(--sb); color: var(--sb-ink); font-family: var(--f-display); font-weight: 400; font-size: 50px; line-height: .9; text-align: center; font-variant-numeric: tabular-nums; -webkit-font-smoothing: none; }
.il-bar { flex: 1 1 auto; display: flex; gap: 2px; height: 20px; }
.il-bar i { flex: 1 1 0; min-width: 0; background: var(--ink); }
.il-bar i.il-off { background: var(--panel2); }
.il-clock-low b { background: var(--pri); color: #ffffff; }
.il-clock-low .il-bar i { background: var(--pri); }
.il-clock-low .il-bar i.il-off { background: var(--panel2); }
.il-hint { min-height: 1.2em; margin-top: 10px; color: var(--mute); font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
/* the call on a shot */
.il-call { margin-top: 14px; padding-top: 12px; border-top: 3px solid var(--line); }
.il-call b { display: inline-block; font-family: var(--f-display); font-weight: 400; font-size: 60px; line-height: .8; text-transform: uppercase; -webkit-font-smoothing: none; }
.il-call span { display: block; margin-top: 10px; font-family: var(--f-ui); font-size: 20px; line-height: 1.2; text-wrap: pretty; }
.il-call-g b { color: var(--accent); }
.il-call-s b { padding: 6px 10px 2px; background: var(--sb); color: var(--gold); }
.il-call-x b, .il-call-t b { color: var(--faint); font-size: 50px; }

/* full time */
.il-ft { margin-top: 2px; font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; outline-offset: 6px; -webkit-font-smoothing: none; }
.il-ft b { display: block; margin-top: 4px; font-weight: 400; font-size: 70px; line-height: .78; font-variant-numeric: tabular-nums; white-space: nowrap; }
.il-m-day { margin-top: 10px; font-family: var(--f-display); font-size: 40px; line-height: .9; text-transform: uppercase; color: var(--accent); -webkit-font-smoothing: none; }
.il-best { margin-top: 12px; color: var(--mute); font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
.il-qt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; background: var(--sb); border: 3px solid var(--line); }
.il-qt div { padding: 8px 6px 4px; text-align: center; border-left: 3px solid var(--sb-line); }
.il-qt div:first-child { border-left: 0; }
.il-qt dt { font-family: var(--f-sm); font-size: 15px; line-height: 1.2; color: var(--sb-mute); }
.il-qt dd { font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--sb-ink); font-variant-numeric: tabular-nums; white-space: nowrap; -webkit-font-smoothing: none; }
.il-ahead { margin-top: 10px; font-family: var(--f-display); font-size: 40px; line-height: .9; text-transform: uppercase; -webkit-font-smoothing: none; }
.il-stack { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.il-st-b { fill: var(--pri); } .il-st-y { fill: var(--gold); } .il-st-a { fill: var(--hill); } .il-st-x, .il-st-p { fill: var(--ink); } .il-st-f { fill: var(--gold); stroke: var(--ink); stroke-width: 1; }
.il-st-t { font-family: var(--f-display); font-size: 12px; fill: var(--ink); }
.il-st-ax { display: flex; justify-content: space-between; margin-top: 2px; padding: 0 1%; color: var(--mute); font-family: var(--f-sm); font-size: 15px; line-height: 1.2; }
.il-st-n { margin-top: 8px; color: var(--mute); font-size: 15.5px; line-height: 1.4; }
.il-next { margin-top: 16px; font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
.il-next:empty { display: none; }
.il-share { margin-top: 16px; padding-right: 4px; }
.il-tx { display: block; width: 100%; padding: 10px 12px; background: var(--panel2); color: var(--ink); border: 3px solid var(--line); border-radius: 0; font-family: var(--f-body); font-size: 17px; line-height: 1.45; resize: none; }
.il-share .il-acts { margin-top: 12px; }
.il-list { margin-top: 2px; }
.il-r { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 2px solid var(--panel2); }
.il-r:first-child { border-top: 0; }
.il-dot { display: grid; place-items: center; width: 40px; height: 40px; padding-top: 2px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); font-family: var(--f-display); font-size: 30px; line-height: 1; background: var(--ink); color: var(--panel); -webkit-font-smoothing: none; }
.il-r-g .il-dot { background: var(--pri); color: #ffffff; }
.il-r-s .il-dot { background: var(--gold); color: var(--gold-ink); }
.il-r-x .il-dot { background: var(--panel2); color: var(--faint); }
.il-r-q { font-family: var(--f-ui); font-size: 20px; line-height: 1.15; text-wrap: balance; }
.il-r-a { margin-top: 4px; }
.il-rare { display: block; width: 100%; max-width: 400px; height: auto; margin-top: 8px; }
.il-rkey { margin-top: 8px; color: var(--mute); font-size: 15.5px; line-height: 1.4; }
.il-rkey i { display: inline-block; width: 12px; height: 12px; margin: 0 5px 0 0; vertical-align: -1px; background: var(--faint); }
.il-rkey i.il-rk-g { background: var(--pri); margin-left: 12px; }
.il-rkey i.il-rk-s { background: var(--gold); margin-left: 12px; }
.il-rare-b { fill: var(--faint); } .il-rare-g { fill: var(--pri); } .il-rare-s { fill: var(--gold); } .il-rare-k { fill: var(--ink); } .il-rare-m { fill: var(--panel); }
.il-r-w { margin-top: 6px; color: var(--mute); font-size: 15.5px; line-height: 1.4; }
.il-streak { margin-top: 8px; font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
.il-streak:empty { display: none; }
.il-past { margin-top: 6px; }
.il-past li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 2px solid var(--panel2); color: var(--mute); font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
.il-past span { margin-right: auto; }
.il-past b { color: var(--ink); font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; -webkit-font-smoothing: none; }
.il-past i { min-width: 4.2em; text-align: right; font-style: normal; font-variant-numeric: tabular-nums; }
.il-keep { margin-top: 10px; color: var(--faint); font-size: 15px; }
.il-mb { display: block; margin: 30px 4px 0 0; padding: 14px 16px; background: var(--gold); color: var(--gold-ink); border: 3px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); text-decoration: none; }
.il-mb b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; -webkit-font-smoothing: none; }
.il-mb span { display: block; margin-top: 4px; font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
.il-mb:active { transform: translate(4px, 4px); box-shadow: none; }

@media (max-width: 520px) { .il-qt { grid-template-columns: repeat(2, minmax(0, 1fr)); } .il-qt div:nth-child(3) { border-left: 0; } .il-qt div:nth-child(n+3) { border-top: 3px solid var(--sb-line); } }
/* a wide window: the scoreboard stands beside the play */
@media (min-width: 900px) {
  .il-ui { grid-template-columns: minmax(0, 400px) minmax(0, 560px); gap: 14px 28px; align-items: start; padding-bottom: 44px; }
  .il-play { margin-top: -12px; position: relative; z-index: 1; padding: 20px 22px 22px; }
  .il-fence { position: sticky; top: 16px; }
  .il-st-load .il-ui, .il-st-none .il-ui, .il-st-fail .il-ui { grid-template-columns: minmax(0, 560px); }
  .il-st-load .il-play, .il-st-none .il-play, .il-st-fail .il-play { margin-top: 14px; }
  .il-sb dd { font-size: 70px; }
  .il-sb dt { font-size: 16px; }
  .il-h { font-size: 50px; }
  .il-q { font-size: 40px; }
  .il-q.il-q-was { font-size: 20px; }
  .il-call b { font-size: 80px; }
  .il-ft b { font-size: 100px; }
  .il-call-s b { font-size: 60px; }
  .il-call-x b, .il-call-t b { font-size: 60px; }
}

/* ---------- the pages that are read: How to play, Privacy, About, Not found ---------- */
.il-page { flex: 1 0 auto; padding: 14px 12px 30px; background: var(--turf); }
.il-prose { width: min(760px, 100%); margin: 0 auto; padding: 20px 18px 24px; background: var(--panel); border: 3px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); }
.il-prose h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(50px, 13vw, 80px); line-height: .82; text-transform: uppercase; text-wrap: balance; -webkit-font-smoothing: none; }
.il-prose h2 { margin-top: 30px; padding-top: 14px; border-top: 3px solid var(--line); font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; -webkit-font-smoothing: none; }
.il-prose p, .il-prose li { max-width: 40em; text-wrap: pretty; }
.il-prose p { margin-top: 12px; }
.il-prose a { color: var(--accent); }
.il-lede { font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
.il-steps { margin-top: 12px; max-width: 40em; }
.il-steps li { padding: 11px 0; border-top: 2px solid var(--panel2); }
.il-kv { display: grid; grid-template-columns: minmax(7em, 12em) minmax(0, 1fr); gap: 0 22px; max-width: 44em; margin-top: 12px; }
.il-kv dt, .il-kv dd { padding: 11px 0; border-top: 2px solid var(--panel2); }
.il-kv dt { font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
.il-kv dd { color: var(--mute); }
.il-key { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 14px; align-items: center; max-width: 40em; margin-top: 14px; }
.il-key .il-dot-g { background: var(--pri); color: #ffffff; }
.il-key .il-dot-s { background: var(--gold); color: var(--gold-ink); }
.il-key .il-dot-x { background: var(--panel2); color: var(--faint); }
.il-prose .il-acts { padding-right: 4px; }
.il-prose .il-acts a.il-btn { color: var(--pri-ink); }
.il-prose .il-acts a.il-btn-q { color: var(--ink); }
@media (hover: hover) { .il-prose .il-acts a.il-btn:hover { color: var(--gold-ink); } }
@media (max-width: 520px) { .il-kv { grid-template-columns: minmax(0, 1fr); } .il-kv dd { padding-top: 0; border-top: 0; } }
@media (min-width: 700px) { .il-prose { padding: 28px 30px 32px; } }

/* the foot: the boundary fence */
.il-foot { padding: 16px clamp(12px, 3vw, 28px) 24px; background: var(--foot); color: var(--foot-ink); font-size: 15px; line-height: 1.5; }
.il-foot p, .il-foot nav { width: min(1120px, 100%); margin: 0 auto; }
.il-foot nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; font-family: var(--f-ui); font-size: 20px; line-height: 1.2; }
.il-foot a { display: inline-flex; align-items: center; min-width: 40px; min-height: 40px; color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .il-cloud-a, .il-cloud-b, .il-w-low .il-crowd-a, .il-w-low .il-crowd-b, .il-m-cur .il-m-d, .il-m-cur .il-m-t, .il-m-new .il-m-d, .il-m-new .il-m-t, .il-m-new .il-m-halo { animation: none; }
  .il-btn:active, .il-mb:active, .il-nav a:active, .il-theme:active { transform: none; }
}