/* Tokens copied from src/style.css by tools/mksite.js at build time. Do not edit here. */
:root {
  /* night game. The root always carries data-theme (src/head/theme.html sets it before first paint), so this block is the dark theme. */
  --bg: #060b09; --panel: #0e1814; --panel2: #14211b; --panel3: #1c2d25;
  --line: #1e3028; --line2: #2f4a3d; --line3: #677f72;
  --ink: #eef5f0; --mute: #95aa9e; --faint: #647a6d;
  --accent: #f5c931; --accent-ink: #1a1500;
  --good: #58d196; --warn: #f2a843; --bad: #f38173; --info: #78bcec;
  --top: #f5c931; --top-ink: #1a1500; --top-line: #f5c931;
  --ln-def: #78bcec; --ln-mid: #5fd3d0; --ln-fwd: #c3a6f5; --ln-ruc: #b7c6bc;
  --turf: #1f6b3f; --turf2: #1b6039; --chalk: #dfe9e2; --ball: #f5c931; --kit-edge: #3b5647;
  --shade: rgba(0, 0, 0, .42); --glass: rgba(8, 15, 12, .92); --glow: rgba(150, 232, 190, .085); --hi: rgba(255, 255, 255, .055); --scrim: rgba(2, 6, 4, .62);
  --lift: rgba(255, 255, 255, .25); --rim: rgba(255, 255, 255, .14); --sink: rgba(0, 0, 0, .3);
  --club: #1f6b3f; --club2: #dfe9e2; --club-ink: #ffffff;
  --hold: var(--accent); --sel-mix: 10%; --focus-gap: var(--bg); --select: color-mix(in srgb, var(--accent) 34%, var(--bg));
  --hero-mute: 86%; --hero-faint: 62%; --hero-club: 58%; --hero-club2: 16%;
  --e1: inset 0 1px 0 var(--hi), 0 1px 2px rgba(0, 0, 0, .35);
  --e2: inset 0 1px 0 var(--hi), 0 14px 34px -16px rgba(0, 0, 0, .75);
  --e3: 0 0 0 1px var(--line2), 0 32px 80px -24px rgba(0, 0, 0, .85);
  --e4: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 44px -14px rgba(0, 0, 0, .6);
  color-scheme: dark;

  /* roles built from the colours above: the same recipe in both themes, so a theme only swaps the colours */
  --rail: color-mix(in srgb, var(--panel) 72%, var(--bg)); --strip: color-mix(in srgb, var(--panel) 80%, var(--bg));
  --pick: var(--accent); --pick-ink: var(--accent-ink);                 /* the pick inside a control: a solid block */
  --focus: var(--hold);                                                 /* the keyboard's ring, one everywhere */
  --lit: var(--hold);                                                   /* a lit numeral: the yellow bulbs by night, plain ink by day (a red number would read as bad) */
  --sel: color-mix(in srgb, var(--hold) var(--sel-mix), transparent);   /* a selected row */
  --me: color-mix(in srgb, var(--club) 10%, transparent);               /* the coach's own row wears his club (set again on .app) */
  --link: var(--ink); --link-line: var(--line3);
  --fill: var(--mute); --track: color-mix(in srgb, var(--ink) 13%, var(--panel));   /* an amount with no judgement in it, and the unfilled part */
  --bad-wash: color-mix(in srgb, var(--bad) 10%, transparent);
  --scroll: color-mix(in srgb, var(--mute) 60%, transparent); --tap: color-mix(in srgb, var(--ink) 10%, transparent); --chev: var(--mute);
  --hover: color-mix(in srgb, var(--ink) 5%, transparent);              /* the wash under a quiet thing the pointer is on (a rail entry, a sheet's row) */

  /* type: three faces, one scale. Pick the role, never a size between two steps. */
  --f-display: 'Big Shoulders Display', 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --f-cond: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs-micro: 11px; --fs-label: 12px; --fs-small: 13px; --fs-data: 14px; --fs-ui-s: 14px; --fs-body: 15px; --fs-ui: 16px; --fs-title: 18px; --fs-h2: 24px; --fs-h1: 42px;
  --fs-d6: 22px; --fs-d5: 30px; --fs-d4: 36px; --fs-d3: 42px; --fs-d2: 56px; --fs-d1: 76px;
  --lh-flat: 1; --lh-head: 1.05; --lh-ui: 1.2; --lh-body: 1.45;
  --tr-caps: .1em; --tr-ui: .02em; --tr-display: 0em; --measure: 68ch;
  /* space, shape, size, layers */
  --s1: 4px; --s15: 6px; --s2: 8px; --s25: 10px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 44px;
  --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-xl: 20px; --r-pill: 999px;
  --ctl: 36px; --ctl-s: 28px; --hit: 40px;
  --rail-w: 228px; --top-h: 78px; --tab-h: 62px; --tab-pad: 5px;
  --dock-clear: 0px;   /* the room the two corner buttons (the phone, the Magnet Mover) take above the bottom edge: 0 with no dock on the page, set on body below */
  --z-sticky: 5; --z-top: 6; --z-rail: 7; --z-dock: 30; --z-dialog: 40; --z-menu: 46; --z-toast: 50; --z-skip: 60; --z-drag: 70;
  /* motion: one exponential ease-out. fast is a press or a hover, ui a change of state, move something that travels or opens, far a long way
     (a phone sheet), data a bar or a number settling once on arrival. pop, with its slight overshoot, is only for something thrown or landed. */
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.5, 0, .84, 0);
  --t-fast: 120ms; --t-ui: 180ms; --t-move: 240ms; --t-far: 360ms; --t-data: 600ms; --t-pop: 320ms;
  --spring-pop: linear(0, 0.051, 0.17, 0.315, 0.463, 0.597, 0.711, 0.803, 0.874, 0.926, 0.963, 0.987, 1.002, 1.011, 1.014, 1.015, 1.014, 1.012, 1.01, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1);
  --spring: var(--ease-out); --t-spring: var(--t-move);   /* the old names, kept so nothing breaks: they now hold the same values */
}
/* day game */
/* Light is the default theme. A theme only swaps colours: everything that is not a colour is declared once, above. */
:root[data-theme="light"] {
  --bg: #e9eee6; --panel: #ffffff; --panel2: #f3f6f0; --panel3: #e6ece3;
  --line: #dde5da; --line2: #c3cfc0; --line3: #778a7c;
  --ink: #111b15; --mute: #4d6055; --faint: #74877a;
  --accent: #b3261e; --accent-ink: #ffffff;
  --good: #14683d; --warn: #844d00; --bad: #981a3a; --info: #195f91;
  --top: #e7b92c; --top-ink: #1a1500; --top-line: #7b5b00;
  --ln-def: #1f5f8f; --ln-mid: #0b6a70; --ln-fwd: #6a3d9a; --ln-ruc: #4d6055;
  --turf: #3f9c61; --turf2: #399158; --chalk: #f4faf5; --ball: #b3261e; --kit-edge: #9fb0a3;
  --shade: rgba(20, 32, 26, .2); --glass: rgba(244, 247, 241, .94); --glow: rgba(255, 255, 255, .7); --hi: rgba(255, 255, 255, .9); --scrim: rgba(20, 32, 26, .38);
  --lift: rgba(255, 255, 255, .25); --rim: rgba(255, 255, 255, .16); --sink: rgba(20, 32, 26, .16);
  --hold: var(--ink); --sel-mix: 9%; --focus-gap: var(--panel); --select: color-mix(in srgb, var(--ink) 16%, var(--panel));
  --hero-mute: 76%; --hero-faint: 58%; --hero-club: 22%; --hero-club2: 8%;
  --e1: 0 1px 2px rgba(22, 40, 30, .08), 0 2px 5px -2px rgba(22, 40, 30, .07);
  --e2: 0 1px 2px rgba(22, 40, 30, .06), 0 14px 30px -18px rgba(22, 40, 30, .28);
  --e3: 0 0 0 1px var(--line), 0 32px 80px -28px rgba(22, 40, 30, .45);
  --e4: 0 2px 6px rgba(22, 40, 30, .16), 0 18px 44px -14px rgba(22, 40, 30, .3);
  color-scheme: light;
}
/* the page heading steps down with the window: fixed steps of the scale, never a fluid size */
@media (max-width: 1100px) { :root { --fs-h1: 36px; } }
@media (max-width: 880px) { :root { --fs-h1: 30px; } }
/* a finger needs more than a pointer does: controls grow on a phone and on any touch screen */
@media (max-width: 880px), (pointer: coarse) { :root { --ctl: 40px; --ctl-s: 32px; } }

/* The typefaces, served from this site (SIL Open Font License 1.1: the licence texts are beside the files). Written by tools/mksite.js. */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.b0a8ad37ac.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:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.cd759df8ef.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.4b52ddd483.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:700;font-display:swap;src:url(fonts/barlow-latin-700-normal.2d797dd8b3.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:"MB Body A";font-style:normal;font-weight:400;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:93.61%;ascent-override:106.83%;descent-override:21.37%;line-gap-override:0%}
@font-face{font-family:"MB Body A";font-style:normal;font-weight:500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:94.45%;ascent-override:105.88%;descent-override:21.18%;line-gap-override:0%}
@font-face{font-family:"MB Body A";font-style:normal;font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:90.04%;ascent-override:111.07%;descent-override:22.21%;line-gap-override:0%}
@font-face{font-family:"MB Body A";font-style:normal;font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:90.83%;ascent-override:110.09%;descent-override:22.02%;line-gap-override:0%}
@font-face{font-family:"MB Body R";font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");size-adjust:95.37%;ascent-override:104.86%;descent-override:20.97%;line-gap-override:0%}
@font-face{font-family:"MB Body R";font-style:normal;font-weight:500;src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");size-adjust:96.22%;ascent-override:103.93%;descent-override:20.79%;line-gap-override:0%}
@font-face{font-family:"MB Body R";font-style:normal;font-weight:600;src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");size-adjust:95.38%;ascent-override:104.85%;descent-override:20.97%;line-gap-override:0%}
@font-face{font-family:"MB Body R";font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");size-adjust:96.22%;ascent-override:103.93%;descent-override:20.79%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.460f141ec8.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 Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.215a93c696.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 Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.3787a5a419.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:"MB Cond N";font-style:normal;font-weight:500;src:local("Arial Narrow"),local("ArialNarrow"),local("Liberation Sans Narrow");size-adjust:85.65%;ascent-override:116.75%;descent-override:23.35%;line-gap-override:0%}
@font-face{font-family:"MB Cond N";font-style:normal;font-weight:600;src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Liberation Sans Narrow Bold");size-adjust:84.69%;ascent-override:118.07%;descent-override:23.61%;line-gap-override:0%}
@font-face{font-family:"MB Cond N";font-style:normal;font-weight:700;src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Liberation Sans Narrow Bold");size-adjust:86.53%;ascent-override:115.57%;descent-override:23.11%;line-gap-override:0%}
@font-face{font-family:"MB Cond A";font-style:normal;font-weight:500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:70.24%;ascent-override:142.37%;descent-override:28.47%;line-gap-override:0%}
@font-face{font-family:"MB Cond A";font-style:normal;font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:69.45%;ascent-override:143.99%;descent-override:28.8%;line-gap-override:0%}
@font-face{font-family:"MB Cond A";font-style:normal;font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:70.96%;ascent-override:140.93%;descent-override:28.19%;line-gap-override:0%}
@font-face{font-family:"MB Cond R";font-style:normal;font-weight:500;src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");size-adjust:74.1%;ascent-override:134.94%;descent-override:26.99%;line-gap-override:0%}
@font-face{font-family:"MB Cond R";font-style:normal;font-weight:600;src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");size-adjust:74.26%;ascent-override:134.66%;descent-override:26.93%;line-gap-override:0%}
@font-face{font-family:"MB Cond R";font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");size-adjust:75.87%;ascent-override:131.8%;descent-override:26.36%;line-gap-override:0%}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700 900;font-display:swap;src:url(fonts/big-shoulders-display-latin-wght-normal.075292b13a.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:"MB Display N";font-style:normal;font-weight:700;src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Liberation Sans Narrow Bold");size-adjust:75.97%;ascent-override:129.52%;descent-override:28.04%;line-gap-override:0%}
@font-face{font-family:"MB Display N";font-style:normal;font-weight:800;src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Liberation Sans Narrow Bold");size-adjust:81.54%;ascent-override:120.68%;descent-override:26.12%;line-gap-override:0%}
@font-face{font-family:"MB Display N";font-style:normal;font-weight:900;src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Liberation Sans Narrow Bold");size-adjust:87.08%;ascent-override:113%;descent-override:24.46%;line-gap-override:0%}
@font-face{font-family:"MB Display A";font-style:normal;font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:62.3%;ascent-override:157.95%;descent-override:34.19%;line-gap-override:0%}
@font-face{font-family:"MB Display A";font-style:normal;font-weight:800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:66.86%;ascent-override:147.17%;descent-override:31.86%;line-gap-override:0%}
@font-face{font-family:"MB Display A";font-style:normal;font-weight:900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:71.4%;ascent-override:137.81%;descent-override:29.83%;line-gap-override:0%}
@font-face{font-family:"MB Display R";font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");size-adjust:67.08%;ascent-override:146.7%;descent-override:31.75%;line-gap-override:0%}
@font-face{font-family:"MB Display R";font-style:normal;font-weight:800;src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");size-adjust:71.99%;ascent-override:136.69%;descent-override:29.59%;line-gap-override:0%}
@font-face{font-family:"MB Display R";font-style:normal;font-weight:900;src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");size-adjust:76.88%;ascent-override:127.99%;descent-override:27.71%;line-gap-override:0%}
:root,:root[data-theme]{--f-body:'Barlow', 'MB Body A', 'MB Body R', 'Helvetica Neue', Helvetica, Arial, sans-serif;--f-cond:'Barlow Condensed', 'MB Cond N', 'MB Cond A', 'MB Cond R', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;--f-display:'Big Shoulders Display', 'MB Display N', 'MB Display A', 'MB Display R', 'Barlow Condensed', 'Arial Narrow', sans-serif}

/* Magnet Board: the site's own pages (About, Privacy, Credits, Not found). The tokens above this line are copied from the game's
   src/style.css when the site is built, so these pages wear the same colours and type as the game in both themes. */
*, *::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.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  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); }
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
h1, h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 9vw, 92px); line-height: .9; letter-spacing: -.005em; }
h2 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1; letter-spacing: .004em; margin-top: var(--s8); }
h3 { font-family: var(--f-cond); font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: .01em; margin: 0 0 4px; }
p, ul, ol, dl { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: .45em; }
li::marker { color: var(--faint); }

.st-skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: var(--r-s); }
.st-skip:focus { top: 12px; }

/* the top line: the mark and the wordmark go home, the red button plays */
.st-top { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; width: min(1120px, 100%); margin: 0 auto; padding: 18px clamp(16px, 4vw, 40px) 0; }
.st-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-right: auto; color: var(--ink); text-decoration: none; }
.st-mark { width: auto; height: 46px; flex: none; }
.mk-f { fill: currentColor; } .mk-s { fill: none; stroke: currentColor; } .mk-ball { fill: var(--bad); }
.st-word { font-family: var(--f-display); font-weight: 900; font-size: 27px; line-height: 1; text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; }
.st-word em { font-style: normal; color: var(--accent); }
.st-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-family: var(--f-cond); font-weight: 600; font-size: 17px; letter-spacing: .02em; }
.st-nav a { padding: 10px 11px; color: var(--mute); text-decoration: none; border-radius: var(--r-s); }
.st-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.st-nav .st-play, .st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 18px; margin-left: 8px; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-m); font-family: var(--f-cond); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: var(--e1); }
.st-btn { margin-left: 0; min-height: 54px; padding: 12px 26px; font-size: 21px; }
.st-btn.st-quiet { background: var(--panel); color: var(--ink); border: 1px solid var(--line2); box-shadow: none; }
@media (hover: hover) { .st-nav a:hover { color: var(--ink); } .st-nav .st-play:hover, .st-btn:hover { color: var(--accent-ink); filter: brightness(1.07); } .st-btn.st-quiet:hover { color: var(--ink); border-color: var(--mute); filter: none; } }

.st-main { flex: 1 0 auto; width: min(1120px, 100%); margin: 0 auto; padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 40px) var(--s8); }
.st-lede { max-width: 30em; margin: 18px 0 0; font-size: clamp(19px, 2.3vw, 23px); line-height: 1.4; color: var(--ink); }
.st-prose { max-width: 40em; }
.st-prose h2 + p, .st-prose h2 + ul, .st-prose h2 + dl { margin-top: 14px; }
.st-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.mute { color: var(--mute); }

/* About: the opening, with the ground beside it, then what is in the game as a ruled list */
.st-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px clamp(24px, 5vw, 64px); align-items: center; }
.st-hero h1 em { font-style: normal; color: var(--accent); }
.st-ground { display: block; width: 100%; max-width: 400px; height: auto; justify-self: end; }
.st-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 56px); max-width: none; margin-top: 18px; padding: 0; list-style: none; }
.st-in li { margin: 0; padding: 16px 0 15px; border-top: 1px solid var(--line2); }
.st-in p { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.5; }
.st-real { margin-top: 14px; padding: 0; list-style: none; max-width: 40em; }
.st-real li { margin: 0; padding: 11px 0; border-top: 1px solid var(--line); }
.st-real li:first-child { border-top: 0; padding-top: 0; }
.st-fonts { margin: 0 0 1em; padding: 0; list-style: none; }
.st-fonts li { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.st-fonts li:first-child { border-top: 0; padding-top: 0; }
.st-card { margin-top: var(--s8); padding: clamp(18px, 3vw, 28px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--e1); }
.st-card h2 { margin-top: 0; }

/* Privacy: what is kept, as a plain two-column list */
.st-kv { display: grid; grid-template-columns: minmax(8em, 13em) minmax(0, 1fr); gap: 0 24px; max-width: 46em; margin-top: 14px; }
.st-kv dt, .st-kv dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line2); }
.st-kv dt { font-family: var(--f-cond); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.st-kv dd { color: var(--mute); }

/* Credits: the totals, then every photograph */
.st-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.st-facts div { min-width: 132px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); }
.st-facts dt { font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.st-facts dt a { color: inherit; }
.st-facts dd { margin: 2px 0 0; font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.st-scroll { margin-top: 26px; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); }
.st-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.35; }
.st-table caption { padding: 14px 16px 12px; text-align: left; font-family: var(--f-cond); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.st-table th, .st-table td { padding: 8px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.st-table thead th { font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; background: var(--panel2); }
.st-table tbody th { font-weight: 400; white-space: nowrap; }
.st-table tbody th b { font-weight: 600; }
.st-table td:nth-child(2), .st-table td:nth-child(3) { white-space: nowrap; color: var(--mute); }
.st-table td:last-child { min-width: 16em; overflow-wrap: anywhere; }
.st-table a { color: inherit; text-decoration-color: var(--line2); }
@media (hover: hover) { .st-table a:hover { color: var(--accent); text-decoration-color: currentColor; } .st-table tbody tr:hover { background: var(--panel2); } }

/* Not found */
.st-lost { display: grid; justify-items: start; gap: 0; padding-block: clamp(20px, 8vh, 90px); }
.st-lost h1 { font-size: clamp(56px, 13vw, 150px); }

.st-foot { width: min(1120px, 100%); margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px) 30px; border-top: 1px solid var(--line2); color: var(--mute); font-size: 14.5px; }
.st-foot p { margin: 0 0 8px; }
.st-foot-l { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; font-family: var(--f-cond); font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.st-foot-l a { color: var(--mute); padding: 6px 0; }
.st-foot-l span { margin-left: auto; font-weight: 500; font-size: 11px; letter-spacing: .16em; }
/* the X mark after the credit (src/credit.js draws it): the letters' height, the credit's colour, a tap target of about 30px that takes no room */
.st-foot-l .madeby-x { display: inline-block; vertical-align: -1px; margin: -10px -10px -10px -5px; padding: 10px 10px 10px 9px; line-height: 0; color: var(--mute); border-radius: 4px; }
.st-foot-l .madeby-x svg { display: block; width: 9.4px; height: 9px; fill: currentColor; }
.st-foot-l .madeby-x:hover, .st-foot-l .madeby-x:focus-visible { color: var(--ink); }

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .st-top { padding-top: 12px; }
  .st-mark { height: 38px; } .st-word { font-size: 22px; }
  .st-nav { width: calc(100% + 11px); margin-left: -11px; font-size: 16px; }
  .st-nav .st-play { margin-left: auto; min-height: 40px; padding: 7px 14px; font-size: 16px; }
  .st-hero { grid-template-columns: minmax(0, 1fr); }
  .st-ground { justify-self: center; max-width: 300px; order: -1; }
  .st-in { grid-template-columns: minmax(0, 1fr); }
  .st-kv { grid-template-columns: minmax(0, 1fr); }
  .st-kv dd { padding-top: 0; border-top: 0; }
  .st-kv dt { padding-bottom: 3px; }
  .st-table th, .st-table td { padding: 8px 12px; }
  .st-foot-l span { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) { .st-btn, .st-nav a { transition: filter var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease; } }
@media print { .st-top nav, .st-acts, .st-skip { display: none; } body { background: #fff; color: #000; } }

/* the ground: a magnet board, in the theme's own turf and chalk */
.g-edge { fill: color-mix(in srgb, var(--turf) 55%, var(--bg)); } .g-turf { fill: var(--turf); } .g-stripe rect { fill: var(--turf2); }
.g-line * { fill: none; stroke: var(--chalk); stroke-width: 2; }
.g-m circle { stroke-width: 2.2; } .g-m text { font: 700 10px var(--f-cond); text-anchor: middle; letter-spacing: 0; }
.g-a circle { fill: #14241c; stroke: #f4faf5; } .g-a text { fill: #f4faf5; }
.g-b circle { fill: #f4faf5; stroke: #14241c; } .g-b text { fill: #14241c; }
.g-ball { fill: #b3261e; stroke: #5d1410; stroke-width: .8; }