/* Outfit, served from this site (/fonts/) since 19 Oct 2026, not from Google Fonts: one fewer
   connection before the first paint. Two files, both the whole variable font (every weight from
   one file), split the way Google splits it: plain Latin, and the extra Latin letters. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit-v15-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit-v15-latin.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; }

/* Seedle, second look (7 Oct 2026). Ian: "more premium minimal and clean".

   The first look was Wordle's, measured and copied (5 Oct 2026). This one is the club's own:

   typeface      Outfit, the club's face, at 500 and 600. No heavy weights, no capitals in headings.
   colour        a checked letter keeps the colours people know from Wordle (Ian, 7 Oct 2026:
                 "people are too used to the original color system"): green for the right place,
                 yellow for the wrong place, grey for not in the word. Everything else is white and
                 ink, and the club's orange is used in small places only: the Enter key, the edge of
                 a letter being typed, the line beside a quote.
   shape         tiles and keys with 12px and 10px corners, one-pixel lines, no shadows. A sheet has a
                 hairline and no shadow.
   room          more space round the board; the bar is one quiet line.
   kept          the board's size, the keyboard's layout, and every timing (pop 100ms, turn 250ms and
                 250ms, 300ms between tiles, shake 600ms, bounce 1000ms).

   The leaderboard is a rail on the right on a screen 1000px or wider, and a sheet opened from the bar
   on anything narrower. It shows only when the club's scoreboard answers (see seedle.js).

   Every class here is used on this page only; the site's own stylesheet is not loaded. */

:root {
  --ink: #111111; --body: #3A3A3A; --muted: #737373;      /* was #8A8A8A, 3.45:1 on white; #737373 is 4.74:1 (19 Oct 2026, Lighthouse contrast check) */ --line: #E4E4E4; --panel: #F5F5F5; --soft: #FAFAFA;
  --orange: #FF8033; --peach: #FFF0E6;
  --green: #6aaa64; --yellow: #c9b458; --grey: #787c7e;
  --bar: 56px; --rail: 340px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 768px) { :root { --bar: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
  background: #fff; color: var(--ink);
  font-family: "Outfit", system-ui, sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }

/* ── the bar ── */
.bar {
  flex: none; position: relative; display: flex; align-items: center; justify-content: space-between;
  height: var(--bar); padding: 0 8px 0 20px; border-bottom: 1px solid var(--line);
}
.bar-home { display: flex; align-items: center; height: 44px; }
.bar-home img { width: auto; height: 18px; }
.bar-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; text-align: center; pointer-events: none; }
.bar-title b { display: block; font-weight: 600; font-size: 20px; line-height: 22px; letter-spacing: -.01em; }
.bar-title span { display: block; font-size: 11px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bar-btns { display: flex; align-items: center; }
.bar-btns button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; transition: background-color .15s; }
.bar-btns button:hover { background: var(--panel); }
.bar-btns .me { width: auto; max-width: 150px; padding: 0 12px; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@media (max-width: 599px) { .bar-btns .me { display: none; } }
@media (min-width: 768px) { .bar { padding: 0 20px 0 32px; } .bar-title b { font-size: 24px; line-height: 26px; } }

/* ── the stage: the game, and on a wide screen the leaderboard beside it ── */
.stage { flex: 1; display: flex; min-height: 0; }
.game { flex: 1; position: relative; display: flex; flex-direction: column; width: 100%; max-width: 500px; margin: 0 auto; min-height: 0; }
.board-wrap { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 0; overflow: hidden; }
.board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; padding: 10px; width: var(--bw, 350px); height: var(--bh, 420px); }
.row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tile {
  display: inline-flex; justify-content: center; align-items: center; width: 100%;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
  font-weight: 600; font-size: 28px; line-height: 1; text-transform: uppercase; user-select: none;
}
.tile[data-state="tbd"] { border-color: var(--orange); }
.tile[data-state="correct"] { border-color: var(--green); background: var(--green); color: #fff; }
.tile[data-state="present"] { border-color: var(--yellow); background: var(--yellow); color: #fff; }
.tile[data-state="absent"] { border-color: var(--grey); background: var(--grey); color: #fff; }

.tile[data-anim="pop"] { animation: seedle-pop 100ms; }
.tile[data-anim="flip-in"] { animation: seedle-flip-in 250ms ease-in; }
.tile[data-anim="flip-out"] { animation: seedle-flip-out 250ms ease-in; }
.tile[data-anim="win"] { animation: seedle-bounce 1000ms; }
.row.bad { animation: seedle-shake 600ms; }
@keyframes seedle-pop { 0% { transform: scale(.8); opacity: 0; } 40% { transform: scale(1.1); opacity: 1; } }
@keyframes seedle-flip-in { 0% { transform: rotateX(0); } 100% { transform: rotateX(-90deg); } }
@keyframes seedle-flip-out { 0% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
@keyframes seedle-bounce { 0%, 20% { transform: translateY(0); } 40% { transform: translateY(-30px); } 50% { transform: translateY(5px); } 60% { transform: translateY(-15px); } 80% { transform: translateY(2px); } 100% { transform: translateY(0); } }
@keyframes seedle-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }

/* ── the timer, above the board ──
   Grey at 0:00 until the first letter; ink, with the orange dot beating once a second, while the
   game runs; still, with the dot gone, once it ends. */
.timer { flex: none; display: flex; justify-content: center; align-items: center; gap: 8px; height: 36px; margin: 8px 0 0; color: var(--muted); }
.timer i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.timer-k { font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.timer b { min-width: 3.2ch; font-weight: 600; font-size: 20px; line-height: 24px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.timer.on { color: var(--ink); }
.timer.on i { background: var(--orange); animation: seedle-beat 1s ease-in-out infinite; }
.timer.done { color: var(--ink); }
.timer.done i { display: none; }
@keyframes seedle-beat { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ── the keyboard ── */
.keys { flex: none; height: 196px; margin: 0 8px 8px; user-select: none; }
.keys-row { display: flex; width: 100%; margin: 0 auto 8px; touch-action: manipulation; }
.key {
  flex: 1; display: flex; justify-content: center; align-items: center; height: 56px; margin: 0 6px 0 0; padding: 0;
  border: 1px solid transparent; border-radius: 10px; background: var(--panel); color: var(--ink);
  font-weight: 500; font-size: 18px; text-transform: uppercase; cursor: pointer; touch-action: manipulation;
}
.key:hover { background: #EDEDED; }
.key:last-of-type { margin: 0; }
.key.wide { flex: 1.5; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.key-gap { flex: .5; }
.key.fade { transition: background-color .15s, color .15s, border-color .15s; }
.key[data-key="enter"] { background: var(--orange); color: var(--ink); }
.key[data-key="enter"]:hover { background: #F2712A; }
.key[data-state="correct"] { background: var(--green); color: #fff; }
.key[data-state="present"] { background: var(--yellow); color: #fff; }
.key[data-state="absent"] { background: var(--grey); color: #fff; }

/* ── messages ── */
.toasts { position: absolute; left: 50%; top: 52px; z-index: 30; transform: translateX(-50%); width: fit-content; pointer-events: none; }
.toast {
  margin: 0 0 12px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff;
  font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; white-space: nowrap;
  transition: opacity 300ms cubic-bezier(.645, .045, .355, 1);
}
.toast.out { opacity: 0; }

/* ── a line from an entrepreneur, in the empty space round the board ──
   Placed and timed by seedle.js. It is decoration: it takes no clicks and screen readers skip it. */
.quote { position: fixed; z-index: 5; margin: 0; padding-left: 14px; border-left: 2px solid var(--orange); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity 900ms ease, transform 900ms ease; }
.quote.on { opacity: 1; transform: none; }
.quote p { margin: 0; font-size: 15px; line-height: 22px; color: #6B6B6B; }
.quote cite { display: block; margin-top: 6px; font-style: normal; font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ── the leaderboard ── */
.lb { display: none; flex-direction: column; min-height: 0; background: var(--soft); }
.lb-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.lb-head h2 { margin: 0; font-weight: 600; font-size: 20px; line-height: 24px; letter-spacing: -.01em; }
.lb-x { display: none; place-items: center; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.lb-tabs { flex: none; display: flex; gap: 4px; margin: 0 20px 8px; padding: 4px; border-radius: 12px; background: #EFEFEF; }
.lb-tabs button { flex: 1; height: 36px; padding: 0; border: 0; border-radius: 9px; background: none; font-weight: 500; font-size: 14px; color: var(--body); cursor: pointer; }
.lb-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); }
.lb-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0 12px 12px; list-style: none; }
.lb-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border-radius: 10px; font-size: 14px; line-height: 20px; }
.lb-list li + li { margin-top: 2px; }
.lb-list li.you { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.lb-list .n { font-variant-numeric: tabular-nums; color: var(--muted); }
.lb-list li:nth-child(-n+3) .n { color: var(--ink); font-weight: 600; }
.lb-list .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* the number after a name someone else had first ("Ian #2"): smaller and quieter than the name */
.lb-list .who .tag { margin-left: 4px; font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-list .who small { margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lb-list .res { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; color: var(--body); }
.lb-list .res .how { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lb-list .res .pts { min-width: 40px; text-align: right; font-weight: 600; font-size: 15px; color: var(--ink); }
.pips { display: flex; gap: 2px; }
.pips i { width: 6px; height: 14px; border-radius: 2px; background: var(--line); }
.pips i.on { background: var(--ink); }
.pips i.hit { background: var(--green); }
/* the line shown when the list is empty: one block the width of the list, not a three-column row */
.lb-list li.lb-empty { display: block; min-height: 0; margin: 0; padding: 20px 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.lb-foot { flex: none; margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--muted); }
.lb-foot button { padding: 0; border: 0; background: none; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bar-btns #open-lb, .bar-btns .me, .lb-only { display: none; }
html.lb-on .lb-only { display: block; }

/* on: the scoreboard answered. wide screens get the rail; narrow ones get the button and a sheet. */
html.lb-on .bar-btns #open-lb { display: grid; }
@media (min-width: 600px) { html.lb-on .bar-btns .me { display: block; } }
@media (min-width: 1000px) {
  html.lb-on .lb { display: flex; flex: none; width: var(--rail); border-left: 1px solid var(--line); }
  html.lb-on .bar-title { left: calc((100% - var(--rail)) / 2); }      /* the name sits over the board, not over the middle of the window */
  html.lb-on .bar-btns #open-lb { display: none; }
}
@media (max-width: 999px) {
  html.lb-on .lb.open { display: flex; position: fixed; inset: 0; z-index: 35; background: #fff; animation: seedle-sheet 200ms ease; }
  .lb.open .lb-x { display: grid; }
}

/* ── the sheets: your name, how to play, statistics ── */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; align-items: center; padding: 16px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet-in {
  position: relative; width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; padding: 32px 24px 24px;
  border: 1px solid var(--line); border-radius: 20px; background: #fff;
  animation: seedle-sheet 200ms ease; outline: none;
}
@keyframes seedle-sheet { 0% { transform: translateY(24px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.sheet-x { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.sheet h2 { margin: 0 0 8px; font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: -.02em; }
.sheet h3 { margin: 24px 0 12px; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sheet p { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--body); }
.sheet a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }
.sheet-sub { font-size: 16px !important; line-height: 24px !important; }
.sheet-list { margin: 0 0 16px; padding-left: 20px; font-size: 14px; line-height: 20px; color: var(--body); }
.sheet-list li { margin-bottom: 4px; }
.eg { display: flex; gap: 4px; margin: 0 0 6px; }
.eg .t { display: inline-flex; justify-content: center; align-items: center; width: 34px; height: 34px; border: 1.5px solid var(--line); border-radius: 8px; font-weight: 600; font-size: 16px; line-height: 1; }
.eg .t.correct { border-color: var(--green); background: var(--green); color: #fff; }
.eg .t.present { border-color: var(--yellow); background: var(--yellow); color: #fff; }
.eg .t.absent { border-color: var(--grey); background: var(--grey); color: #fff; }
.sheet-foot { margin: 20px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px !important; line-height: 16px !important; color: var(--muted) !important; }

/* your name */
.who-form { display: grid; gap: 8px; margin-top: 16px; }
.who-form input { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-weight: 500; font-size: 16px; outline: none; }
.who-form input:focus { border-color: var(--ink); }
.who-err { min-height: 16px; margin: 0 !important; font-size: 12px !important; line-height: 16px !important; color: #B42318 !important; }
.btn { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 16px; cursor: pointer; }
.btn:hover { background: #2A2A2A; }
.btn.plain { height: 44px; background: none; color: var(--body); font-weight: 500; font-size: 14px; }
.btn.plain:hover { background: var(--panel); }

/* the result and the numbers */
/* 28px above the result box, so it starts under the close button (which ends 52px down) and not behind it */
.word { margin: 28px 0 8px; padding: 20px 16px; border-radius: 16px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.word-k { margin: 0 0 6px !important; font-weight: 600; font-size: 11px !important; line-height: 16px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; }
.word-w { margin: 0 0 6px !important; font-weight: 600; font-size: 28px !important; line-height: 32px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ink) !important; }
.word-m { margin: 0 !important; }
/* this game's score, with how it was reached */
.score { margin: 0 0 4px; padding: 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.score-k { margin: 0 !important; font-weight: 600; font-size: 11px !important; line-height: 16px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; }
.score-n { margin: 2px 0 !important; font-weight: 600; font-size: 46px !important; line-height: 48px !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink) !important; }
.score-how { margin: 0 !important; font-size: 12px !important; line-height: 16px !important; color: var(--muted) !important; }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.nums div { text-align: left; padding-top: 8px; border-top: 1px solid var(--line); }
.nums b { display: block; font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nums span { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
.dist-row { display: flex; align-items: center; gap: 8px; height: 22px; margin-bottom: 4px; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.dist-row i { width: 10px; font-style: normal; color: var(--muted); }
.dist-row span { min-width: 22px; padding: 3px 8px; border-radius: 6px; background: var(--panel); color: var(--body); font-weight: 600; text-align: right; }
.dist-row span.now { background: var(--green); color: #fff; }
.after { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; margin-top: 24px; }
.next span { display: block; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.next b { display: block; font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.noscript { padding: 24px; text-align: center; font-size: 14px; }

/* Less motion, if asked for: no turning, popping, shaking or bouncing. The colours still change. */
@media (prefers-reduced-motion: reduce) {
  .tile[data-anim], .row.bad, .sheet-in, .lb.open, .timer.on i { animation: none !important; }
  .toast, .key.fade, .bar-btns button, .quote { transition: none; }
}
/* A short screen (a phone on its side): smaller keys so the board keeps some room. */
@media (max-height: 520px) {
  .keys { height: 152px; }
  .key { height: 44px; }
  .keys-row { margin-bottom: 6px; }
}

/* the result sheet on a short screen (a phone with its bars showing): closer rows, so Share is in view without a scroll */
@media (max-height: 800px) {
  #stats .sheet-in { padding-bottom: 16px; }
  #stats .word { padding: 14px 16px; }
  #stats .score { padding: 10px 16px; }
  #stats .score-n { font-size: 36px !important; line-height: 40px !important; }
  #stats h3 { margin: 16px 0 8px; }
  #stats .dist-row { height: 18px; margin-bottom: 3px; }
  #stats .dist-row span { padding: 1px 8px; }
  #stats .after { margin-top: 14px; }
}