/* Instrument Sans, self-hosted (public/fonts, SIL Open Font License). One variable file covers every weight from
   400 to 700, so the hierarchy is set in numbers rather than in files; Latin Extended is a second small file so a
   player's name with an accent is set in the same face. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/instrument-sans-latin-wght-normal.woff2) format('woff2-variations'), url(/fonts/instrument-sans-latin-wght-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: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext-wght-normal.woff2) format('woff2-variations'), url(/fonts/instrument-sans-latin-ext-wght-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* DRAFTLOCK. Warm off-white and pale sage by day, charcoal and deep green by night, and one blue for everything you
   can press. Instrument Sans, sentence case, soft surfaces instead of rules, and as few enclosing borders as the
   screen can get away with. The blue is the same blue DraftLock has always had. */
:root {
  color-scheme: light;
  --bg: #f6f7f5; --ink: #19241f; --muted: #5d6b62; --soft: #e8ece8; --soft2: #dde3de; --line: #d6ddd7;
  --blue: #3f7dff; --link: #2f6be6; --on-blue: #ffffff;
  --pitch: #dfe8e0; --pitch-line: #aec0b0; --token: #ffffff; --token-line: #c7d3c9;
  --green: #1f8f4e; --on-green: #ffffff; --red: #d7342b; --them: #19241f;
  /* How well a player wears the shirt he is in: his own position, one he can do, a stretch, and a bad idea. */
  --fit-main: #1f8f4e; --fit-good: #a87f00; --fit-fair: #d8730a; --fit-poor: #d7342b;
  --veil: rgba(25, 36, 31, .45);
  --mom-bg: #1b2621; --mom-ink: #edf2ef; --mom-a: #ffffff; --mom-b-ink: #82a8ff; --mom-axis: rgba(255, 255, 255, .38); --mom-tick: rgba(255, 255, 255, .16); --mom-muted: #9fb0a6;
  --turf: #1f8f4e; --turf-a: .11;
  --text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111719; --ink: #edf2ef; --muted: #aab8af; --soft: #202b27; --soft2: #2a3731; --line: #2b3832;
    --blue: #3f7dff; --link: #82a8ff; --on-blue: #ffffff;
    --pitch: #192f25; --pitch-line: #3c5a48; --token: #243e30; --token-line: #3c5a48;
    --green: #7cf5a7; --on-green: #0c1a12; --red: #ff6b6b; --them: #edf2ef;
    --fit-main: #7cf5a7; --fit-good: #e7d34e; --fit-fair: #f0a33c; --fit-poor: #ff6b6b;
    --veil: rgba(0, 0, 0, .6);
    --mom-bg: #1a2420; --mom-ink: #edf2ef; --mom-a: #ffffff; --mom-b-ink: #82a8ff; --mom-axis: rgba(255, 255, 255, .38); --mom-tick: rgba(255, 255, 255, .14); --mom-muted: #9fb0a6;
    --turf: #1f8f4e; --turf-a: .17;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111719; --ink: #edf2ef; --muted: #aab8af; --soft: #202b27; --soft2: #2a3731; --line: #2b3832;
  --blue: #3f7dff; --link: #82a8ff; --on-blue: #ffffff;
  --pitch: #192f25; --pitch-line: #3c5a48; --token: #243e30; --token-line: #3c5a48;
  --green: #7cf5a7; --on-green: #0c1a12; --red: #ff6b6b; --them: #edf2ef;
  --fit-main: #7cf5a7; --fit-good: #e7d34e; --fit-fair: #f0a33c; --fit-poor: #ff6b6b;
  --veil: rgba(0, 0, 0, .6);
  --mom-bg: #1a2420; --mom-ink: #edf2ef; --mom-a: #ffffff; --mom-b-ink: #82a8ff; --mom-axis: rgba(255, 255, 255, .38); --mom-tick: rgba(255, 255, 255, .14); --mom-muted: #9fb0a6;
    --turf: #1f8f4e; --turf-a: .17;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 15px; line-height: 1.4; -webkit-text-size-adjust: 100%; }
/* A thumb is not a mouse: no grey flash on every tap, no half-second wait for a double tap that is never coming,
   and no pull-to-refresh throwing the draft away because the board was scrolled too far. */
html { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
body { min-height: 100vh; min-height: 100svh; }
#app { max-width: 500px; margin: 0 auto;
  padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right));
  padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
h1 { font-size: 32px; margin: 8px 0 6px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; letter-spacing: -.01em; }
p { margin: 8px 0; }
button, input, select { font: inherit; color: inherit; touch-action: manipulation; }
button { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 10px; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.mast, .opts, .tabs, .clocks, .turn, .slot, .dev, .score .sc, .big, .lp-pitch, .kick, .lbl { -webkit-user-select: none; user-select: none; }
a { color: var(--link); }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.kick { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 4px 0 0; }
.note { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 8px; }
.foot { margin-top: 18px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ver { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* One short move as a screen arrives, so the game does not read as text being swapped out. */
@keyframes enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.enter { animation: enter .16s ease-out both; }
@media (prefers-reduced-motion: reduce) { .enter { animation: none; } }

/* ---- the pieces every screen is built from ------------------------------------------------------------------- */
/* Buttons: one full-width blue one for the thing to do, a soft one for the alternative, and quiet text for
   everything else. Every quiet one carries an invisible thumb-sized target so nothing small is hard to hit. */
.big { display: block; width: 100%; min-height: 48px; padding: 13px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; text-align: center; margin-top: 10px; }
.big.fill { background: var(--blue); color: var(--on-blue); }
.big.fill:active { filter: brightness(.9); }
.big.ghost { background: var(--soft); color: var(--ink); }
.big.ghost:active { background: var(--soft2); }
.big:disabled { opacity: .4; cursor: default; }
.quiet { position: relative; color: var(--muted); font-size: 14px; font-weight: 500; min-height: 44px; padding: 8px 8px; border-radius: 10px; white-space: nowrap; }
.quiet::after { content: ''; position: absolute; inset: -4px -6px; }
.quiet:active { color: var(--link); }
.quiet.link { color: var(--link); }
.quiet.warn { color: var(--red); }
.quiet:disabled { opacity: .4; cursor: default; }
.field { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 11px 12px; font-size: 16px; min-height: 46px; }
.field::placeholder { color: var(--muted); }
.field:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.err { color: var(--red); font-size: 13.5px; line-height: 1.4; margin: 10px 0 0; min-height: 1.2em; }
.err:empty { margin: 0; min-height: 0; }
/* A soft panel, for the rules of the draft and anything else that needs to sit apart from the page. */
.box { background: var(--soft); border-radius: 12px; padding: 12px 14px; }

/* ---- masthead: an arrow back one screen, the wordmark, the tools ---------------------------------------------- */
.mast { display: flex; align-items: center; gap: 6px; padding: 12px 0 8px; min-height: 60px; }
.mast .arrow { font-size: 22px; line-height: 1; color: var(--muted); width: 40px; min-height: 44px; margin-left: -10px; }
.mast .arrow::after { content: ''; position: absolute; inset: -4px; }
.mast .arrow { position: relative; }
.mast .wm { position: relative; font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.mast .wm::after { content: ''; position: absolute; inset: -6px -8px; }
.mast .wm b { color: var(--link); font-weight: 700; }
.mast .tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.mast .tools .quiet { padding: 8px 9px; }
.mast .theme { font-size: 17px; line-height: 1; width: 40px; text-align: center; padding: 8px 0; }

/* ---- small shared pieces: a stack of buttons, "Playing as" rows, the room-code row, and a disclosed field ---- */
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack .big { margin: 0; }
.rowline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 14px; min-height: 44px; }
.rowline b { color: var(--ink); font-weight: 600; }
.rowline .quiet { margin-right: -8px; }
.joinrow { display: flex; gap: 8px; margin-top: 6px; }
.joinrow .field { flex: 1; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; min-width: 0; }
.joinrow .field::placeholder { letter-spacing: .08em; font-weight: 500; text-transform: none; }
.joinrow .big { width: auto; margin: 0; padding: 12px 20px; }
.disclose { margin-top: 10px; }
.disclose .lab { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }

/* ---- setup: a question, its answers in a row, and a line saying what the chosen one means ------------------ */
.set { margin-top: 18px; }
.set .k { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opts button { flex: 1 1 0; min-width: 0; background: var(--soft); color: var(--ink); border-radius: 10px; min-height: 44px; padding: 10px 6px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.opts.wrap button { flex: 1 1 28%; }
/* The shapes: Random and seven formations, four to a row, so 4-1-2-1-2 still fits on a phone without being cut. */
.opts.shapes button { flex: 1 1 22%; padding: 10px 2px; font-variant-numeric: tabular-nums; }
.opts button:active { background: var(--soft2); }
.opts button.on { background: var(--blue); color: var(--on-blue); font-weight: 600; }
/* An option that cannot apply to the rest of the setup: still there, plainly not available. */
.opts button.off { opacity: .38; cursor: default; }
/* A question that decides nothing in this draft (Messi / Ronaldo when neither is in it): the whole row goes
   quiet, label and both answers alike, rather than only the answer that is unavailable (Sami, 22 Sep 2026). */
.set.dim .k { opacity: .38; }
.set.dim .note { opacity: .7; }
.set .hint { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.4; min-height: 1.2em; }
.more { background: var(--soft); border-radius: 12px; margin-top: 20px; padding: 2px 14px; }
.more summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 0; font-size: 14px; font-weight: 600; min-height: 46px; -webkit-user-select: none; user-select: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: '+'; color: var(--muted); font-size: 20px; font-weight: 400; line-height: 1; }
.more[open] summary::after { content: '\2013'; }
.more .set { margin-top: 4px; padding-bottom: 12px; }
.more .set:last-of-type { padding-bottom: 14px; }
.more .opts button { background: var(--bg); }
.more .opts button.on { background: var(--blue); }
.more .opts button:active { background: var(--soft2); }
.summary { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.4; }

/* The Theme row. One line of chips that scrolls sideways instead of wrapping, so the question is the same height
   whether there are six themes or twenty; no scrollbar, and the scroll snaps so a chip is never cut in half. The
   chosen chip is the one green fill in the game — every other choice on this screen is blue. */
/* ---------------------------------------------------------------------------------------------------------------
   The setup screen's sections (Beta 1.10). Two panels — Theme, and Draft setup — each a header that says what is
   chosen and a body that opens under it. Closed, the whole screen is three short rows.
   --------------------------------------------------------------------------------------------------------------- */
.panel { margin-top: 14px; background: var(--soft); border-radius: 14px; }
.phead { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 0 14px; text-align: left; color: var(--ink); border-radius: 14px; }
.phead .pk { flex: none; font-size: 14px; font-weight: 600; }
.phead .pv { margin-left: auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phead .pv .ic { flex: none; width: 15px; height: 15px; color: var(--green); }
.phead .pv .ic svg { width: 15px; height: 15px; display: block; }
.phead .chev { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .18s ease; }
.phead .chev svg { width: 16px; height: 16px; display: block; }
.panel.open .phead .chev { transform: rotate(180deg); }
.phead:active { background: var(--soft2); }
.pbody { padding: 2px 14px 14px; }
.pbody .hint { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.pbody .set:first-child { margin-top: 0; }
.pbody .opts button { background: var(--bg); }
.pbody .opts button.on { background: var(--blue); }
.pbody .opts button:active { background: var(--soft2); }
@media (prefers-reduced-motion: reduce) { .phead .chev { transition: none; } }

/* The Theme grid: square panels, four rows deep, stepped a row at a time by a button at each end. Beyond four
   rows it scrolls; See more, under it, opens the whole book in a sheet. */
.themewrap { position: relative; }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 388px; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y proximity; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0 6px; }
.themes::-webkit-scrollbar { display: none; }
.themes .th { min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; scroll-snap-align: start; background: var(--bg); color: var(--ink); border-radius: 14px; padding: 10px 4px; font-size: 12px; font-weight: 500; line-height: 1.25; text-align: center; }
.themes .th:active { background: var(--soft2); }
.themes .th .ic { display: inline-flex; width: 22px; height: 22px; opacity: .55; }
.themes .th .ic svg { width: 22px; height: 22px; display: block; }
.themes .th .nm { display: block; }
.themes .th.on { background: var(--green); color: var(--on-green); font-weight: 600; }
.themes .th.on .ic { opacity: 1; }
.themes .th.on:active { background: var(--green); }
@media (min-width: 520px) { .themes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Under it: what the chosen theme is, and the way out to all of them. */
.themefoot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 4px; }
.themefoot .hint { flex: 1 1 100%; font-size: 12px; color: var(--muted); line-height: 1.4; }
.themefoot .tstep { margin-right: auto; }
.themefoot .link { flex: none; }

/* The fade says there is more that way; the button moves it. Both only on the side there is more. */
.themewrap::before, .themewrap::after { content: ''; position: absolute; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.themewrap:not(.vert)::before { top: 0; bottom: 6px; left: 0; width: 58px; background: linear-gradient(to right, var(--soft) 30%, transparent); }
.themewrap:not(.vert)::after { top: 0; bottom: 6px; right: 0; width: 58px; background: linear-gradient(to left, var(--soft) 30%, transparent); }
.themewrap.more-left::before, .themewrap.more-right::after { opacity: 1; }
.tnav { position: absolute; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 0, 0, .1); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.tnav svg { width: 16px; height: 16px; display: block; }
.tnav.prev { top: 0; bottom: 6px; margin-block: auto; left: 2px; }
.tnav.next { top: 0; bottom: 6px; margin-block: auto; right: 2px; }
.tnav.prev svg { transform: rotate(180deg); }
.tstep { flex: none; display: inline-flex; gap: 6px; }
.tstep .tnav { position: static; width: 30px; height: 30px; opacity: 1; pointer-events: auto; }
.tstep .tnav svg { width: 15px; }
.tstep .tnav:disabled { opacity: .28; pointer-events: none; }
.tnav.up svg { transform: rotate(-90deg); }
.tnav.down svg { transform: rotate(90deg); }
.themewrap.more-left .tnav.prev, .themewrap.more-right .tnav.next { opacity: 1; pointer-events: auto; }
.tnav:active { background: var(--soft2); }
@media (prefers-reduced-motion: reduce) { .themewrap::before, .themewrap::after, .tnav { transition: none; } }

/* A section that has nothing left to decide — the theme, once you are writing the draft yourself. */
.panel.off { opacity: .55; }
.panel.off .phead { cursor: default; }
.panel.off .chev { visibility: hidden; }

/* Writing your own draft is something you go and do, not a mode the screen sits in: one text button under the
   settings, and the builder opens over the top. */
.cta { display: block; margin: 12px auto 0; font-size: 14px; }
.customline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.customline > span { flex: 1 1 auto; }
.srch.build .res, .srch.allthemes .res { padding: 0 18px 20px; }
.srch.allthemes .themes { max-height: none; overflow: visible; padding-top: 10px; }
.srch.allthemes .themes .th { background: var(--soft); }
.srch.allthemes .themes .th.on { background: var(--green); }
.srch.allthemes .hint { padding: 10px 0 0; }

/* DraftLock Pro (Beta 3.7). A locked theme stays on the grid where you can see it, at the same greyed strength
   every disabled choice in the game uses, with a small padlock in its corner. No badge, no colour of its own:
   the padlock is the whole signal, and the one line under the grid says what opens it. */
.themes .th.locked { position: relative; color: var(--muted); }
.themes .th.locked .ic, .themes .th.locked .nm { opacity: .5; }
.themes .th.locked .lk { position: absolute; top: 7px; right: 8px; width: 12px; height: 12px; color: var(--muted); }
.themes .th.locked .lk svg, .proline .lk svg, .cta .lk svg { width: 100%; height: 100%; display: block; }
.proline { margin-top: 6px; font-size: 13px; }
.proline > span { display: flex; align-items: flex-start; gap: 7px; line-height: 1.4; }
.proline .lk { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.cta.locked { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); }
.cta.locked .lk { width: 13px; height: 13px; }
.cta.locked em { font-style: normal; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--link); }
.srch.unlock .res { padding: 4px 18px 22px; }
.proprice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0 4px; }
.proprice b { font-size: 34px; font-weight: 650; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.proprice span { font-size: 14px; color: var(--muted); }
.proprice.done b { color: var(--green); font-size: 26px; }
.prolist { list-style: none; margin: 12px 0 0; padding: 0; font-size: 14px; line-height: 1.45; }
.prolist li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.prolist li:last-child { border-bottom: 1px solid var(--line); }
.prolist .n { flex: none; width: 2ch; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.prolist b { color: var(--ink); font-weight: 600; }
.prolist li > span:last-child { color: var(--muted); }
.srch.unlock .note { margin-top: 12px; }
.proact { margin-top: 16px; }
.proact .note { margin-top: 10px; }
.waiver { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.waiver input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); }
.waiver .link { font-size: 13px; }
.buildfoot { margin-top: 16px; }
.buildfoot .hint { padding: 10px 0 0; }
/* The drawers at the top of the requirement sheet hold more than the sheet is wide. */
.catwrap { margin: 8px -2px 0; }
.catwrap .tnav { width: 28px; height: 28px; }
.catwrap .tnav svg { width: 14px; height: 14px; }
.themewrap.catwrap::before { width: 46px; background: linear-gradient(to right, var(--bg) 30%, transparent); }
.themewrap.catwrap::after { width: 46px; background: linear-gradient(to left, var(--bg) 30%, transparent); }

/* The theme as the draft's first requirement: a star where the other rules have a number. */
.rules li.themereq .n.star { display: inline-flex; align-items: center; justify-content: center; width: 2ch; color: var(--green); }
.rules li.themereq .n.star svg { width: 13px; height: 13px; display: block; }
.namefield { margin-top: 6px; }
.big + .big { margin-top: 10px; }

/* ---- the Custom Draft Builder (Beta 1.11) --------------------------------------------------------------------
   The builder is the rules sheet being written, so it is built out of the rules sheet's own parts: the same
   panel, the same numbered list, the same star on the theme's line. The two things it adds are a name that is
   typed as a title rather than filled in as a field, and the verdict strip underneath. */
.dname { margin-top: 18px; }
.namein { width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--line); color: var(--ink);
  font-family: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; padding: 4px 0 8px; }
.namein::placeholder { color: var(--muted); font-weight: 600; opacity: .55; }
.namein:focus { outline: 0; border-bottom-color: var(--blue); }
.dname .hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; min-height: 1.2em; }

.reqbox { margin-top: 14px; background: var(--soft); border-radius: 14px; padding: 12px 14px 10px; }
.reqhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.reqhead .reqn { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.reqlist { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; line-height: 1.45; }
.reqlist li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.reqlist li:last-child { border-bottom: 0; }
.reqlist li .n { flex: none; width: 2ch; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.reqlist li.themereq .n.star { display: inline-flex; align-items: center; justify-content: center; color: var(--green); padding-top: 3px; }
.reqlist li.themereq .n.star svg { width: 13px; height: 13px; display: block; }
.reqlist li .lbl { flex: 1; min-width: 0; padding-top: 1px; }
/* How many players meet this one requirement inside the theme: the number that says whether it is a rule or a
   riddle. Set in the muted colour so the requirement itself still reads first. */
.reqlist li .cnt { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.reqlist li .x { flex: none; width: 26px; height: 26px; margin: -2px -6px 0 2px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); border-radius: 7px; }
.reqlist li .x svg { width: 14px; height: 14px; display: block; }
.reqlist li .x:active { background: var(--soft2); color: var(--red); }
.reqlist li.gone .lbl { color: var(--muted); text-decoration: line-through; }
.gonetag, .drafts .warn { font-style: normal; color: var(--red); font-size: 11.5px; }
.reqlist li.none { color: var(--muted); padding: 6px 0 4px; }
.reqadd { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.addreq { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 10px;
  background: var(--bg); color: var(--link); font-size: 14px; font-weight: 600; }
.addreq:active { background: var(--soft2); }
.addreq:disabled, .reqadd .quiet:disabled { opacity: .4; }
.addreq .ic, .reqadd .rnd .ic { display: inline-flex; width: 15px; height: 15px; }
.addreq .ic svg, .reqadd .rnd .ic svg { width: 15px; height: 15px; display: block; }
.reqadd .rnd { display: inline-flex; align-items: center; gap: 6px; }

/* The verdict. One line, always in exactly one of four states, and never a dialogue: the draft is checked as it
   is written and the answer sits where the eye already is, under the list it is about. */
.vstrip { margin-top: 14px; padding: 11px 13px; border-radius: 12px; background: var(--soft); font-size: 13px; line-height: 1.45; }
.vstrip b { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.vstrip small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; padding-left: 22px; }
.vstrip .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.vstrip .ic svg { width: 15px; height: 15px; display: block; }
.vstrip.ok { background: color-mix(in srgb, var(--green) 12%, var(--soft)); }
.vstrip.ok b { color: var(--green); }
.vstrip.bad { background: color-mix(in srgb, var(--red) 10%, var(--soft)); }
.vstrip.bad b { color: var(--red); }
.vstrip .nt { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; padding-left: 22px; }
.vstrip.busy b i { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin: 5px 6px 0 2px; animation: blink 1s steps(2) infinite; }
.vstrip.idle b, .vstrip.busy b { color: var(--muted); font-weight: 600; }
.vstrip.idle small, .vstrip.busy small { padding-left: 0; }

/* The requirement sheet's drawers: one line of chips that scrolls sideways, the way the theme row does. */
.srch .cats { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.srch .cats::-webkit-scrollbar { display: none; }
.srch .cat { flex: 0 0 auto; min-height: 34px; padding: 6px 12px; border-radius: 9px; background: var(--soft); color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.srch .cat.on { background: var(--blue); color: var(--on-blue); font-weight: 600; }
.srch .cat:active { background: var(--soft2); }
.row.req { grid-template-columns: 1fr auto; }
.row.req .nm { font-weight: 600; }
.row.req .pos.done { color: var(--muted); }
/* A requirement already on the sheet: the row stays live and takes it off again (Sami, 22 Sep 2026). */
.row.req.added { background: var(--soft); }
.row.req .pos.drop { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.row.req .pos.drop svg { width: 13px; height: 13px; }
.row.req.off { opacity: .5; }
.row.req.off .pos { color: var(--muted); }

/* ---- saved drafts ---------------------------------------------------------------------------------------------
   A row is a draft, read the way its lobby would read it. Opening one gives the thing you usually want — play it
   again — and the four things you can do to it, inside the row rather than over the screen. */
.drafts { margin-top: 6px; }
.dr { border-bottom: 1px solid var(--line); }
.drhead { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 0; border-radius: 0; min-height: 62px; }
.drhead .who { min-width: 0; }
.drhead .who b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.drhead .who small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drhead .when { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.drhead .when:empty { display: none; }
.drhead .chev { width: 16px; height: 16px; color: var(--muted); transition: transform .18s ease; }
.drhead .chev svg { width: 16px; height: 16px; display: block; }
.dr.open .drhead .chev { transform: rotate(180deg); }
.drhead:active { background: var(--soft); }
.dracts { padding: 0 0 14px; }
.dracts .big { margin-top: 2px; }
.drrow { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 4px; }
.drrow .quiet { padding: 8px 4px; }
.drrules { background: var(--soft); margin-top: 10px; }
.drrules ol { margin: 0; }
.confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 0 2px; font-size: 13.5px; }
.confirm span { flex: 1 1 100%; color: var(--muted); }
.renamerow { display: flex; gap: 8px; margin-top: 6px; }
.renamerow .field { flex: 1; min-width: 0; }
.renamerow .big { width: auto; margin: 0; padding: 12px 18px; }
@media (prefers-reduced-motion: reduce) { .drhead .chev { transition: none; } }

/* ---- lobby: the code, in the middle, as big as the screen allows ---------------------------------------------- */
.roomcode { text-align: center; font-size: clamp(56px, 18vw, 76px); font-weight: 700; letter-spacing: .16em; padding-left: .16em; line-height: 1; color: var(--link); margin: 26px 0 6px; font-variant-numeric: tabular-nums; }
.codelbl { text-align: center; color: var(--muted); font-size: 14px; }
.wait { text-align: center; margin: 18px 0 14px; font-size: 14px; color: var(--muted); }
.wait i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-right: 8px; vertical-align: 1px; animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }

/* ---- the rules of the draft: what every player has to be ----------------------------------------------------- */
.rules { background: var(--soft); border-radius: 12px; padding: 12px 14px; margin-top: 14px; font-size: 13.5px; line-height: 1.45; }
.rules .kick { display: block; }
.rules .ttl { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 3px 0 8px; line-height: 1.25; }
.rules ol { list-style: none; margin: 4px 0 0; padding: 0; }
.rules li { display: flex; gap: 10px; padding: 3px 0; }
.rules li .n { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.rules .form { color: var(--muted); font-size: 12px; margin-top: 8px; }
.rules.compact { padding: 10px 14px; }
.rules .objkick { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.rules ol.objs li .n { color: var(--link); font-size: 10px; align-self: center; }
.rules ol.objs li .tally { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; color: var(--muted); }
.rules ol.objs li .tally b { font-weight: 700; color: var(--ink); }
.rules ol.objs li .tally b.ok { color: var(--link); }
.rules ol.objs li .tally i { font-style: normal; margin-left: 8px; opacity: .6; }
.rules.compact ol { margin-top: 2px; }
/* The draft screen's panel leads with the draft's own name, big, and the settings it was made on under it. */
.rules.compact .ttl { font-size: 18px; margin: 0; letter-spacing: -.02em; }
.rules .setline { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: 3px 0 9px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
/* The book beside a requirement that names a set. It sits on the line it belongs to, not out in a column, and
   it is exactly one text line tall, centred on the words beside it, so it never drops below the row (Beta 1.3). */
.rules .bk { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 1.45em; margin: 0 0 0 2px; padding: 0; vertical-align: top; color: var(--link); border-radius: 6px; line-height: 1; }
.rules .bk svg { width: 15px; height: 15px; display: block; }
.rules .bk:active { background: var(--soft2); }

/* ---- clocks and the turn ------------------------------------------------------------------------------------- */
.clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.clk { min-width: 0; }
.clk + .clk { text-align: right; }
.clk .who { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clk .who i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; opacity: .3; vertical-align: 1px; }
.clk.on .who i { opacity: 1; background: var(--green); }
.clk .t { font-size: 34px; line-height: 1.1; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); margin-top: 2px; }
.clk.live .t { color: var(--link); }
.clk.them.live .t { color: var(--ink); }
.clk.low.live .t { color: var(--red); }
.turn { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 0 0; font-size: 15px; }
.turn b { font-weight: 700; }
.turn.mine b { color: var(--link); }
.turn.theirs b { color: var(--ink); }
.turn small { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* ---- tabs ---------------------------------------------------------------------------------------------------- */
.tabs { display: flex; align-items: center; gap: 14px; margin-top: 14px; border-bottom: 1px solid var(--line); }
.tabs button { position: relative; font-size: 14px; font-weight: 600; color: var(--muted); padding: 10px 0 9px; min-height: 44px; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button::after { content: ''; position: absolute; inset: 0 -7px; }
.tabs button.on { color: var(--link); border-bottom-color: var(--link); }
.tabs button.on.them { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .form { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- the board: a pale pitch with real markings, shirts placed by position on a column grid — the same layout
   Squadlock's own board uses, so a back three's wing-backs keep the width of the pitch. An empty shirt is a round
   target with the position on it; a filled one is a small card with the man's name, his rating and his fit. */
.pitch { position: relative; margin: 12px 0 0; padding: 16px 3px 14px; border-radius: 16px; background: var(--pitch);
  overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.pitchlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; color: var(--pitch-line); }
.line { display: grid; grid-template-columns: repeat(120, 1fr); align-items: center; position: relative; z-index: 1; }
.slot { position: relative; z-index: 1; justify-self: center; width: calc(100% - 4px); max-width: 112px; min-width: 0; height: 62px;
  display: flex; align-items: center; justify-content: center; padding: 0; color: var(--ink); border-radius: 12px; }
.slot .in { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--token); border: 1px solid var(--token-line); }
.slot .code { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink); line-height: 1; }
/* your turn, an empty shirt: a blue ring says it can be filled */
.slot.can .in { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
/* where a selected player could move to */
.slot.target .in { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.slot.sel .in { box-shadow: 0 0 0 2px var(--pitch), 0 0 0 4px var(--blue); }
.slot.full .in { width: 100%; height: 60px; border-radius: 12px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 5px 5px; text-align: left; }
.pitch.dense .slot.full .in { padding: 4px 3px; }
.pitch.dense .slot.full .nm { font-size: 11px; letter-spacing: -.02em; }
.slot.full .top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.slot.full .code { display: flex; gap: 4px; align-items: baseline; font-size: 10px; letter-spacing: .04em; color: var(--muted); }
/* How well he plays this shirt, on the shirt itself. Green is his own position, red is a winger at left-back. */
.slot.full .code i { font-style: normal; font-size: 10px; letter-spacing: 0; font-weight: 600; }
.slot.full.b-main .code i { color: var(--fit-main); }
.slot.full.b-good .in { border-color: var(--fit-good); } .slot.full.b-good .code i { color: var(--fit-good); }
.slot.full.b-fair .in { border-color: var(--fit-fair); } .slot.full.b-fair .code i { color: var(--fit-fair); }
.slot.full.b-poor .in { border-color: var(--fit-poor); } .slot.full.b-poor .code i { color: var(--fit-poor); }
.slot.full .rt { font-size: 12px; font-weight: 700; line-height: 1; color: var(--link); font-variant-numeric: tabular-nums; }
.slot.full .nm { font-size: 11.5px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.full .cl { font-size: 10px; line-height: 1.1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitch.them .slot.full .rt { color: var(--ink); }
.slot.auto .cl { color: var(--red); }
.slot:disabled { cursor: default; }
/* The sprite is one fixed-size image sheet, so a flag cannot be resized by changing the box: it has to be scaled,
   inside a box that clips it. Emoji flags are just text and take a font size instead. */
.fg.em { font-size: 13px; line-height: 1; margin-right: 4px; }
.fg.spr { display: inline-block; width: 24px; height: 18px; vertical-align: -3px; margin-right: 5px; }
.slot .fg.em { font-size: 9px; margin-right: 3px; }
.slot .fg.spr { width: 15px; height: 11px; overflow: hidden; vertical-align: -1px; margin-right: 3px; }
.slot .fg.spr .fl { transform: scale(.625); transform-origin: top left; vertical-align: top; }
.xi .fg.spr { width: 17px; height: 13px; overflow: hidden; vertical-align: -2px; margin-right: 4px; }
.xi .fg.spr .fl { transform: scale(.7); transform-origin: top left; vertical-align: top; }

/* ---- what you can do with the shirt you tapped ---------------------------------------------------------------- */
.acts { display: flex; align-items: center; gap: 4px; margin-top: 10px; min-height: 44px; }
.acts .lbl { flex: 1; font-size: 13px; color: var(--muted); line-height: 1.35; }
.acts .quiet { flex: none; }
.acts .quiet:last-child { margin-right: -8px; }

/* ---- the log: the last few things that happened --------------------------------------------------------------- */
.log { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.log div:first-child { color: var(--ink); }

/* ---- the search sheet ---------------------------------------------------------------------------------------- */
.veil { position: fixed; inset: 0; background: var(--veil); z-index: 10; touch-action: none; }
.srch { position: fixed; left: 0; right: 0; bottom: 0; top: 10vh; top: 10svh; max-height: 100dvh; z-index: 11; background: var(--bg); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; margin: 0 auto; max-width: 500px; overflow: hidden; }
.srch .hd { padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
.srch .hd .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.srch .hd .for { font-size: 16px; font-weight: 700; }
.srch .hd .for b { color: var(--link); }
.srch .hd .quiet { margin-right: -8px; }
.srch .hd .field { margin-top: 4px; }
.srch .res { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); border-radius: 0; min-height: 56px; }
.row:active { background: var(--soft); }
.row .rt { font-size: 18px; font-weight: 700; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
.row .nm { font-size: 15px; font-weight: 600; line-height: 1.2; }
.row .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.row .pos { font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: right; white-space: nowrap; }
/* The reason a player cannot be picked, in the requirement's own words. One reason sits on a line; several become
   a short list, smaller again so three of them still fit the row without pushing the name out of the way. */
.row .pos.why { white-space: normal; max-width: 12.5em; font-size: 11.5px; font-weight: 500; line-height: 1.3; }
ul.pos.why { list-style: none; margin: 0; padding: 0; }
ul.pos.why li + li { margin-top: 2px; }
ul.pos.why li::before { content: '\00b7\00a0'; }
.row.off { opacity: .45; }
.row.off .pos { color: var(--red); }
.row .pos.ok { color: var(--green); }
.row .pos.ok small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.row .pos.ok.b-main { color: var(--fit-main); } .row .pos.ok.b-good { color: var(--fit-good); }
.row .pos.ok.b-fair { color: var(--fit-fair); } .row .pos.ok.b-poor { color: var(--fit-poor); }
.row .fg { margin-right: 5px; }
.srch .hint { padding: 16px 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.srch .group { padding: 10px 18px 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
/* Hard mode: a name and nothing else, so the row loses its rating column and its second line with it. */
.row.bare { grid-template-columns: 1fr auto; min-height: 52px; }
.row.bare .nm { font-size: 16px; font-weight: 600; }
/* Two men with one name: the day each was born, after the name, quiet enough not to read as part of it. */
.row .sub .dob { font-weight: 600; color: var(--ink); }
.row .nm .dob { margin-left: 7px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; letter-spacing: 0; }
/* The shortlist (Beta 3.6): a star at the end of every search row that can still be drafted. The row keeps its own
   left padding and gives its right edge to the star, which is a plain outline until it is on. */
.rw { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.rw .row { flex: 1; min-width: 0; border-bottom: 0; padding-right: 4px; }
.rw .sstar { flex: none; width: 48px; display: grid; place-items: center; padding: 0 max(10px, env(safe-area-inset-right)) 0 0; color: var(--muted); background: none; border: 0; border-radius: 0; }
.rw .sstar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.rw .sstar.on { color: var(--blue); } .rw .sstar.on svg { fill: currentColor; }
.srch .hint.shl { font-weight: 600; color: var(--ink); }
/* The book: the list behind a requirement, in the same sheet as the search. */
.srch.bk .res { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.bklist { list-style: none; margin: 4px 0 0; padding: 0; }
.bklist li { padding: 9px max(18px, env(safe-area-inset-right)) 9px max(18px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; }
/* A list of countries carries its flags (Beta 3.0). */
.bklist .fl { margin-right: 8px; font-size: 16px; }

/* The way back into a room this device left while it is still live (Beta 3.1). One quiet line above the two big
   buttons on the home screen, so it reads as an offer rather than a warning. */
.rejoin { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--soft); border-radius: 12px; padding: 10px 10px 10px 14px; margin-bottom: 12px; }
.rejoin span { font-size: 14px; color: var(--muted); }
.rejoin b { color: var(--ink); font-weight: 700; letter-spacing: .04em; }
.rejoin .big { width: auto; min-height: 40px; padding: 0 18px; font-size: 14px; margin: 0; }
/* While the sheet is up, the draft behind it must not scroll with it. */
body.sheeted { overflow: hidden; }

/* ---- result -------------------------------------------------------------------------------------------------- */
.score { text-align: center; padding: 14px 0 10px; }
.score .kick { display: block; }
.score .sc { font-size: 72px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.score .sc b { color: var(--link); font-weight: 700; } .score .sc i { font-style: normal; color: var(--ink); }
.score .sc span { color: var(--muted); font-weight: 500; margin: 0 2px; }
.score .nms { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding: 6px 4px 0; }
.score .nms span:first-child { color: var(--link); font-weight: 600; } .score .nms span:last-child { font-weight: 600; color: var(--ink); }
.score .nms .trtg { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.score .verdict { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 10px 0 4px; }
.score .pens { font-size: 13px; color: var(--muted); line-height: 1.5; }
.why { background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; margin: 10px 0; }
.events { list-style: none; margin: 12px 0 0; padding: 0; }
.events li { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.events li .m { text-align: center; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.events li .l { text-align: right; } .events li .r { text-align: left; }
.events li .l.you { color: var(--link); font-weight: 600; } .events li .r.them { color: var(--ink); font-weight: 600; }
.events li small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.cmp { width: 100%; border-collapse: collapse; margin-top: 6px; }
.cmp th, .cmp td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.cmp th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; width: 28%; }
.cmp th:first-child { width: auto; max-width: none; }
.cmp td:first-child, .cmp th:first-child { text-align: left; }
.cmp td.w { font-weight: 700; }
.cmp td.you { color: var(--link); } .cmp td.them { color: var(--ink); }
.sec { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 22px 0 6px; }
.sec.momhead { display: flex; align-items: center; justify-content: space-between; }
.sec.momhead .momtoggle { min-height: auto; padding: 0 4px; font-size: 12px; }
/* The eleven. Header and body are one table with one set of column widths, so the headings sit over the numbers
   they name instead of drifting left of them. */
.xi { width: 100%; border-collapse: collapse; table-layout: fixed; }
.xi td, .xi th { padding: 6px 3px; border-bottom: 1px solid var(--line); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xi th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; }
.xi td.c, .xi th.c { color: var(--muted); width: 40px; font-size: 12px; }
.xi td.n, .xi th.n { width: 52px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.xi th.n { font-weight: 500; }
.xi td.n.d { color: var(--muted); font-weight: 500; }
.xi td.n.lo { color: var(--red); }
.xi td.n.b-main { color: var(--fit-main); } .xi td.n.b-good { color: var(--fit-good); }
.xi td.n.b-fair { color: var(--fit-fair); } .xi td.n.b-poor { color: var(--fit-poor); }
.xi .muted { font-weight: 400; }
.explain { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 10px; }

/* ---- the live match: a clock, the score, a strip of every attack, and the moments worth a card ------------------
   Watched in about a minute. The strip is the match's shape at a glance: your attacks stand up from the middle
   line, theirs hang down, taller the more dangerous, a dot for a goal. The feed only carries what mattered; the
   rest of the play runs through the single line under the strip and is replaced as it happens. */
.live .lhead { text-align: center; padding: 10px 0 0; }
.live .lhead .kick { display: block; }
.lscore { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 8px; }
.lscore .nm { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lscore .nm.you { color: var(--link); text-align: right; } .lscore .nm.them { color: var(--ink); text-align: left; }
.lscore .sc { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lscore .sc b { color: var(--link); font-weight: 700; } .lscore .sc i { font-style: normal; color: var(--ink); } .lscore .sc span { color: var(--muted); font-weight: 500; margin: 0 4px; }
.lclock { font-size: 30px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--muted); margin-top: 6px; line-height: 1.1; }
.lbar { position: relative; height: 3px; background: var(--soft2); border-radius: 2px; margin: 12px 0 0; overflow: hidden; }
.lbar i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 2px; transition: width .12s linear; }
.lbar .ht { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: var(--bg); }
/* The momentum chart (Sami, 22 Sep 2026): one line through the minutes, Player 1 above the axis in white and
   Player 2 below it in DraftLock blue. It sits on a dark panel in both themes, because white has to read as white. */
.mom { margin-top: 10px; background: var(--mom-bg); border-radius: 12px; padding: 8px 12px 6px; color: var(--mom-ink); }
.momkey { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 0 0 6px; }
.momkey span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.momkey i { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.momkey .a { color: var(--mom-a); } .momkey .a i { background: var(--mom-a); }
.momkey .b { color: var(--mom-b-ink); } .momkey .b i { background: var(--blue); }
.momplot { position: relative; }
.momplot svg { display: block; width: 100%; height: 84px; overflow: visible; }
.mom .axis { stroke: var(--mom-axis); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mom .tick { stroke: var(--mom-tick); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.mom .fill.a { fill: var(--mom-a); fill-opacity: .88; } .mom .fill.b { fill: var(--blue); fill-opacity: .9; }
.mom .edge { fill: none; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mom .edge.a { stroke: var(--mom-a); } .mom .edge.b { stroke: var(--blue); }
.mom .gm { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--mom-bg); }
.mom .gm.a { background: var(--mom-a); } .mom .gm.b { background: var(--blue); }
/* Beta 3.6: the side the screen is read from is blue. When that is side A the two colours trade places. */
.mom.flip .fill.a { fill: var(--blue); fill-opacity: .9; } .mom.flip .fill.b { fill: var(--mom-a); fill-opacity: .88; }
.mom.flip .edge.a { stroke: var(--blue); } .mom.flip .edge.b { stroke: var(--mom-a); }
.mom.flip .gm.a { background: var(--blue); } .mom.flip .gm.b { background: var(--mom-a); }
.mom.flip .momkey .a { color: var(--mom-b-ink); } .mom.flip .momkey .a i { background: var(--blue); }
.mom.flip .momkey .b { color: var(--mom-a); } .mom.flip .momkey .b i { background: var(--mom-a); }
.momticks { position: relative; height: 14px; margin-top: 3px; font-size: 10px; letter-spacing: .06em; color: var(--mom-muted); font-variant-numeric: tabular-nums; }
.momticks span { position: absolute; top: 0; transform: translateX(-50%); }
.momticks span:first-child { transform: none; }
.now { min-height: 44px; padding: 12px 2px 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.lfeed { margin-top: 8px; }
.ev { display: grid; grid-template-columns: 48px 1fr; column-gap: 8px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity .25s ease-out, transform .25s ease-out; }
.ev.in { opacity: 1; transform: none; }
.ev .m { grid-row: 1 / span 3; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; font-weight: 600; padding-top: 2px; }
.ev .ttl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.ev .ttl small { font-size: 11px; letter-spacing: 0; text-transform: none; margin-left: 6px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ev .who { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 1px 0 2px; }
.ev .who small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 1px; }
.ev .who b { font-weight: 700; }
.ev .txt { color: var(--ink); }
.ev.key .txt { color: var(--muted); }
.ev.goal .ttl { color: var(--link); }
.ev.goal.them .ttl, .ev.goal.them .who { color: var(--ink); }
.ev.goal.you .who { color: var(--link); }
.ev.goal.you .m { color: var(--link); } .ev.goal.them .m { color: var(--ink); }
.ev.whistle { grid-template-columns: 1fr; text-align: center; padding: 14px 0; }
.ev.whistle .m { grid-row: auto; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.ev.whistle .txt { color: var(--muted); font-size: 13px; }
.live .skip { margin-top: 18px; }
.moments .ev { padding: 8px 0; }
.again { display: block; margin: 8px auto 0; }
.xi td.pl .pn { display: block; overflow: hidden; text-overflow: ellipsis; }
.xi td.pl small { display: block; font-size: 11px; color: var(--muted); line-height: 1.2; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.xi td.n.mr { color: var(--muted); font-weight: 600; }
.xi td.n.mr.hi { color: var(--green); } .xi td.n.mr.lo { color: var(--red); }
.xi td.n.mr.best { color: var(--link); font-weight: 700; }

/* ---- analysis ------------------------------------------------------------------------------------------------ */
.anal h2 { font-size: 26px; margin: 12px 0 10px; }
.anal .verdict { background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
.anal article { padding: 12px 0 2px; border-top: 1px solid var(--line); }
.anal article:first-of-type { border-top: 0; }
.anal article h3 { color: var(--link); }
.anal article p { margin: 5px 0 10px; line-height: 1.55; font-size: 15px; }
.anal .closing { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; font-weight: 600; }

/* ---- help ---------------------------------------------------------------------------------------------------- */
.help h2 { font-size: 26px; margin: 12px 0 4px; }
.help h3 { color: var(--link); margin: 18px 0 4px; }
.help p { line-height: 1.55; margin: 6px 0; }
.help .k { background: var(--soft); border-radius: 12px; padding: 4px 14px 12px; margin-top: 18px; }
.help dl { margin: 6px 0 0; }
.help dt { font-weight: 700; margin-top: 10px; }
.help dd { margin: 2px 0 0; color: var(--muted); line-height: 1.5; font-size: 14px; }

/* ---- dev strip ----------------------------------------------------------------------------------------------- */
.dev { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin-bottom: 4px; background: var(--soft); border-radius: 10px; font-size: 13px; overflow-x: auto; scrollbar-width: none; }
.dev button { white-space: nowrap; flex: none; }
.dev .tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: var(--muted); color: var(--bg); padding: 2px 6px; border-radius: 4px; }
.dev button { color: var(--muted); border: 1px solid var(--line); padding: 4px 9px; border-radius: 8px; min-height: 30px; }
.dev button.on { color: var(--ink); border-color: var(--ink); }
.dev button:disabled { opacity: .35; }

/* ---- the account: sign in, the profile, a head-to-head, a stored match --------------------------------------
   A record reads like the back page: one big W-L, then rows with a rule between them. The same pieces as the rest
   of the game (the kick label, the tabular number, the blue for you and the ink for them), nothing boxed. */
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0; line-height: 1; flex: none; }
.avatar.sm { width: 28px; height: 28px; font-size: 12.5px; }
.avatar.lg { width: 56px; height: 56px; font-size: 24px; }
.mast .me { padding: 6px 4px; min-width: 40px; display: flex; justify-content: center; }
.nudge { margin-top: 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.nudge .quiet { display: inline; min-height: 0; padding: 0; font-size: 13px; white-space: normal; }
.nudge .quiet::after { content: none; }
/* the invite: the code, then one thing to press */
.invite { margin-top: 18px; }
.invite .rowline { margin-top: 0; justify-content: center; }
.invite .big { margin-top: 10px; }
.invite .note { text-align: center; margin-top: 12px; }
.cancel { display: block; margin: 10px auto 0; }
/* sign in */
.authform { margin-top: 18px; }
.authform .lab { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.authform .lab:first-child { margin-top: 0; }
.authform .err { margin-top: 12px; }
.authform .big { margin-top: 14px; }
.rowline.switch { margin-top: 14px; }
/* the profile head: avatar, name, level, and a thin line of progress under it */
.ident { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.ident .uname { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ident .sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.lvl { height: 3px; background: var(--soft2); border-radius: 2px; margin-top: 16px; overflow: hidden; }
.lvl i { display: block; height: 100%; background: var(--blue); border-radius: 2px; min-width: 2px; }
.lvlsub { font-size: 11px; color: var(--muted); margin-top: 6px; letter-spacing: .04em; }
/* the record: one W-L, as big as the score at full time */
.rec { text-align: center; padding: 22px 0 8px; }
.rec .wl { font-size: 72px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rec .wl b { color: var(--link); } .rec .wl i { font-style: normal; color: var(--ink); } .rec .wl span { color: var(--muted); font-weight: 500; margin: 0 4px; }
.rec .wlk { display: flex; justify-content: center; gap: 44px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 4px; }
.rec .recline { font-size: 14px; color: var(--muted); margin-top: 12px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin: 10px 0 0; }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; min-width: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.facts div.wide { grid-column: 1 / -1; }
/* rivalry rows */
.rivals { margin-top: 2px; }
.rival { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); border-radius: 0; min-height: 60px; }
.rival:active { background: var(--soft); }
.rival .who { min-width: 0; }
.rival .who b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rival .who small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.rival .wl { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.rival .wl b { color: var(--link); font-weight: 700; } .rival .wl i { font-style: normal; color: var(--ink); font-weight: 700; margin-left: 8px; }
.rival .chev, .game .chev { color: var(--muted); font-size: 20px; line-height: 1; opacity: .6; }
/* the results feed: W 3–1 Alex / the draft / when */
.feed { margin-top: 2px; }
.game { display: grid; grid-template-columns: 22px 52px 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); border-radius: 0; min-height: 56px; }
.feed.noscore .game { grid-template-columns: 22px 1fr auto; }
.game:active { background: var(--soft); }
.game .res { font-size: 15px; font-weight: 700; text-align: center; }
.game .res.w { color: var(--green); } .game .res.l { color: var(--red); }
.game .sc { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.game .who { min-width: 0; }
.game .who .nm { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game .who .nm b { font-variant-numeric: tabular-nums; }
.game .who > small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game .when { font-size: 12px; color: var(--muted); white-space: nowrap; text-align: right; }
.game .guest { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin-left: 4px; }
.pn { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.five { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: 1px; }
.five i { font-style: normal; font-size: 11px; font-weight: 700; width: 18px; height: 18px; border-radius: 4px; display: inline-grid; place-items: center; background: var(--soft); }
.five i.w { color: var(--green); } .five i.l { color: var(--red); }
/* a head-to-head: the two of you, then the score between you */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 14px; }
.versus .side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.versus .side b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.versus .side.you b { color: var(--link); }
.versus .side small { font-size: 12px; color: var(--muted); }
.versus .vs { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.h2h { text-align: center; padding: 18px 0 6px; }
.h2h .hs { font-size: 76px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.h2h .hs b { color: var(--link); } .h2h .hs i { font-style: normal; color: var(--ink); } .h2h .hs span { color: var(--muted); font-weight: 500; margin: 0 4px; }
.h2h .hsub { font-size: 14px; color: var(--muted); margin-top: 8px; }
.h2h .goals { display: inline-grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 14px; margin-top: 14px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.h2h .goals .you { color: var(--link); text-align: right; } .h2h .goals .them { color: var(--ink); text-align: left; }
.h2h .goals .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.streak { text-align: center; font-size: 14px; color: var(--muted); margin: 8px 0 14px; line-height: 1.6; }
.empty { background: var(--soft); border-radius: 12px; padding: 14px; margin-top: 14px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.empty b { display: block; color: var(--ink); margin-bottom: 4px; }
.saved { margin: 4px 0 8px; text-align: center; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.saved .quiet { display: inline; min-height: 0; padding: 0; font-size: 13.5px; white-space: normal; }
.saved .quiet::after { content: none; }
.signout { text-align: center; margin-top: 26px; }

/* ---- the landing page (the home screen) ------------------------------------------------------------------------
   The one screen that is a web page rather than a phone screen: two columns on a desktop, one on a phone. Its
   hierarchy is size, weight, whitespace and a few hairlines; the blue is spent on the word "draft.", the eleven,
   and the one button that matters. Everything after the game starts still lives in the 500px column above. */
#app.landing { max-width: 1120px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
#app.landing .mast { padding: 14px 0 6px; }
#app.landing .mast .tools { gap: 4px; }
#app.landing .mast .tools .quiet { font-size: 14.5px; font-weight: 500; padding: 8px 10px; }
#app.landing .mast .tools .quiet:hover { color: var(--ink); }
#app.landing .big { border-radius: 9px; font-weight: 600; }
#app.landing .big.fill:hover { filter: brightness(1.07); }

.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 8px 0 34px; }
.lp-title { font-size: clamp(44px, 12vw, 60px); font-weight: 680; line-height: .98; letter-spacing: -.035em; margin: 6px 0 14px; }
.lp-title b { color: var(--blue); font-weight: inherit; }
.lp-lead { font-size: 18px; line-height: 1.45; font-weight: 400; color: var(--muted); margin: 0 0 4px; max-width: 26ch; }
.lp-actions { min-width: 0; }
.lp-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.lp-cta .big { margin: 0; min-height: 50px; font-size: 16px; }
.lp-cta .big.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.lp-cta .big.ghost:hover { border-color: var(--muted); }
.lp-cta .big.ghost:active { background: var(--soft); }
.lp-join { margin-top: 12px; }
.lp-join .lab { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.lp-join .joinrow { margin-top: 0; }
.lp-join .field { text-align: center; }
.lp-join .joinrow .big { border-radius: 9px; }
.lp-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; min-height: 44px; padding: 0 2px; color: var(--muted); font-size: 14.5px; font-weight: 500; border-radius: 4px; }
.lp-more i { font-style: normal; transition: transform .15s ease-out; }
.lp-more:hover { color: var(--ink); }
.lp-more:hover i { transform: translateX(3px); }
#app.landing .rowline { justify-content: flex-start; gap: 2px; margin-top: 2px; font-size: 13.5px; min-height: 40px; }
#app.landing .rowline .quiet { font-size: 13.5px; margin: 0; padding: 8px 6px; }
#app.landing .namefield { max-width: 320px; margin-top: 0; }
#app.landing .err { margin-top: 8px; }

/* The eleven. Hairline pitch markings that fade into the page, a breath of green behind them, and eleven blue
   dots standing in a 4-3-3. The dots stand up from the goalkeeper outwards the first time the page arrives. */
.lp-pitch { width: min(100%, 300px, 27svh); margin: 10px auto 6px; }
.lp-pitch svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-pitch .ln { stroke: var(--pitch-line); fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp-pitch .ln .spot { fill: var(--pitch-line); stroke: none; }
.lp-pitch .t0 { stop-color: var(--turf); stop-opacity: var(--turf-a); }
.lp-pitch .t1 { stop-color: var(--turf); stop-opacity: 0; }
.lp-pitch .dot { fill: var(--blue); transform-box: fill-box; transform-origin: center; }
.scr.enter .lp-pitch .dot { animation: lpdot .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.1s + var(--i) * 60ms); }
@keyframes lpdot { from { opacity: 0; transform: scale(.25); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scr.enter .lp-pitch .dot { animation: none; } }

/* Below the fold: three steps and four short truths, set with hairlines rather than boxes. */
.lp-how { border-top: 1px solid var(--line); padding: 40px 0 36px; scroll-margin-top: 10px; }
.lp-how h2 { font-size: 26px; font-weight: 650; letter-spacing: -.025em; margin: 0 0 22px; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lp-step { border-top: 1px solid var(--line); padding-top: 14px; }
.lp-step .n { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.lp-step h3 { font-size: 20px; font-weight: 620; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 5px; }
.lp-step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.lp-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.lp-strip b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 2px; }
.lp-strip span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.lp-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 0 6px; font-size: 12px; color: var(--muted); }
.lp-foot b { font-weight: 700; letter-spacing: -.01em; color: var(--muted); }

/* A short phone: the pitch gives up height before anything else does. */
@media (max-height: 700px) { .lp-pitch { width: min(100%, 300px, 20svh); } }

/* A wide screen (a desktop, a tablet on its side): the words on the left, the eleven on the right, and the hero
   owns the first screenful. The phone's header link to How it works is hidden below this width; the link in the
   hero does the same job there. */
@media (max-width: 599px) { #app.landing .mast [data-scroll] { display: none; } }
@media (min-width: 760px) {
  .lp-hero { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". pitch" "title pitch" "lead pitch" "actions pitch" ". pitch"; column-gap: 48px; min-height: min(720px, calc(100svh - 96px)); padding: 0 0 48px; }
  .lp-title { grid-area: title; font-size: clamp(56px, 6.8vw, 86px); margin: 0 0 18px; }
  .lp-lead { grid-area: lead; font-size: 20px; margin-bottom: 14px; }
  .lp-actions { grid-area: actions; }
  .lp-pitch { grid-area: pitch; align-self: center; width: min(100%, 420px, 62svh); margin: 0 0 0 auto; }
  .lp-cta { flex-direction: row; flex-wrap: wrap; }
  .lp-cta .big { width: auto; min-width: 168px; padding: 13px 26px; }
  .lp-join .joinrow { max-width: 330px; }
  .lp-how { padding: 60px 0 52px; }
  .lp-how h2 { margin-bottom: 30px; }
  .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .lp-step { border-top: 0; border-left: 1px solid var(--line); padding: 4px 0 4px 22px; }
  .lp-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; padding: 26px 0; }
  .lp-foot { padding: 22px 0 8px; }
}
@media (min-width: 1000px) { .lp-hero { column-gap: 72px; } }
/* A phone on its side: the two columns, with the eleven short enough to sit inside the screen. */
@media (min-width: 760px) and (max-height: 560px) { .lp-pitch { width: min(100%, 56svh); } .lp-hero { padding-bottom: 24px; } }

/* ---------------------------------------------------------------------------------------------------------------
   Phones. The design above is already drawn for one column on a small screen; what follows is only what a real
   phone does that a desktop window does not — a short screen, and being turned on its side.
   --------------------------------------------------------------------------------------------------------------- */

/* A short screen: the shirts give up their padding, not their type, so the whole eleven sits under the clocks. */
@media (max-height: 860px) {
  .pitch { gap: 8px; padding: 12px 4px 10px; }
  .slot { height: 56px; }
  .slot .in { width: 44px; height: 44px; }
  .slot.full .in { height: 54px; padding: 4px 6px; }
  .rules { margin-top: 10px; }
  .tabs { margin-top: 10px; }
}

/* Sideways. Pitch on the left, everything you read on the right. Same pieces, two columns. */
@media (orientation: landscape) and (max-height: 560px) {
  #app { max-width: 960px; }
  .scr:has(> .pitch) { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .scr:has(> .pitch) > * { grid-column: 2; min-width: 0; }
  .scr:has(> .pitch) > .pitch { grid-column: 1; grid-row: 1 / span 30; margin-top: 8px; }
  /* setup: it folds into two sections now (Beta 1.10), so it is short enough not to need two columns. */
  .slot { height: 50px; }
  .slot .in { width: 40px; height: 40px; }
  .slot.full .in { height: 48px; padding: 3px 5px; }
  .slot.full .cl { display: none; }
  .pitch { gap: 6px; padding: 10px 4px 9px; margin-top: 6px; }
  .srch { top: 0; height: 100%; max-width: 640px; border-radius: 0; }
}

/* ---- the League (Beta 1.0) --------------------------------------------------------------------------------------
   The same pieces as the rest of the game, arranged for three to six people: seats in the lobby, a ring counting
   thirty seconds down in the draft, a matchday with its fixtures, and a table that reads like the back page. */
/* the mode, as one control with two halves */
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--soft); border-radius: 12px; padding: 3px; }
.seg button { min-height: 42px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.set .seg + .hint { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
/* the lobby: one row per seat, filled or waiting */
.seats { list-style: none; margin: 16px 0 6px; padding: 0; }
.seat { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.seat .num { width: 22px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.seat .nm { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .nm small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--link); font-weight: 600; margin-left: 6px; }
.seat.you .nm { color: var(--link); }
.seat .nm.empty { color: var(--muted); font-weight: 400; }
.seat .tag { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.seat .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.seat .dot.on { background: var(--green); }
/* The squads ranked on paper before matchday 1 (Beta 3.6). */
.onpaper { margin-top: 4px; }
.onpaper .seat { min-height: 40px; cursor: pointer; }
.onpaper .tag.rt { font-size: 15px; letter-spacing: 0; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* the reveal: the order, big, once */
.reveal { text-align: center; padding: 18px 0 6px; }
.reveal .kick { display: block; }
.order { list-style: none; margin: 14px 0 0; padding: 0; }
.order li { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-align: left; }
.order li .num { width: 30px; color: var(--muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.order li .nm small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--link); font-weight: 600; margin-left: 8px; vertical-align: middle; }
.order li.you { color: var(--link); }
.reveal .note { margin-top: 12px; }
.reveal .wait b { color: var(--ink); font-variant-numeric: tabular-nums; }
.reveal .big { margin-top: 6px; }
/* the thirty seconds: a ring with the number in it, and whose pick it is beside it */
.pickhead { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.count { position: relative; width: 64px; height: 64px; flex: none; }
.count svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.count .track { fill: none; stroke: var(--soft2); stroke-width: 3; }
.count .arc { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100.53; transition: stroke-dashoffset .25s linear; }
.count b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pickhead.theirs .count .arc { stroke: var(--muted); }
.count.low .arc { stroke: var(--red); }
.count.low b { color: var(--red); }
.pickwho { min-width: 0; }
.pickwho b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickhead.mine .pickwho b { color: var(--link); }
.pickwho small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the order this round, as a strip */
.strip { display: flex; align-items: center; gap: 4px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-size: 12.5px; padding-bottom: 2px; }
.strip::-webkit-scrollbar { display: none; }
.strip .ch { padding: 5px 9px; border-radius: 8px; background: var(--soft); color: var(--muted); font-weight: 600; flex: none; }
.strip .ch.done { opacity: .45; }
.strip .ch.now { background: var(--ink); color: var(--bg); }
.strip .ch.now.you { background: var(--blue); color: var(--on-blue); }
.strip .ch.you:not(.now) { color: var(--link); }
.strip i { color: var(--muted); font-style: normal; flex: none; opacity: .6; }
/* squad tabs: as many as there are squads, scrolling sideways when five will not fit */
.tabs.stabs { gap: 12px; overflow-x: auto; scrollbar-width: none; }
.tabs.stabs::-webkit-scrollbar { display: none; }
.tabs.stabs button { flex: none; font-size: 13.5px; }
.tabs.stabs button.live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 2px; }
.tabs.stabs .form { position: sticky; right: 0; background: var(--bg); padding-left: 10px; }
/* the matchday */
.mdhead { text-align: center; padding: 14px 0 4px; }
.mdhead .kick { display: block; }
.mdnum { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.mdnum small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.mdttl { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.03em; margin-top: 6px; }
.mdhead .sub { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.mdchips { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
.mdchips button { min-width: 36px; min-height: 36px; padding: 0 10px; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mdchips button.on { background: var(--ink); color: var(--bg); }
.fixtures { margin-top: 8px; }
.fx { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: center; }
.fx:active { background: var(--soft); }
.fx:disabled { cursor: default; }
.fx .h, .fx .a { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.fx .h { text-align: right; } .fx .a { text-align: left; }
.fx .h.w, .fx .a.w { color: var(--ink); font-weight: 700; }
.fx .you { color: var(--link) !important; }
.fx .sc { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; min-width: 74px; }
.fx .sc span { color: var(--muted); font-weight: 500; margin: 0 3px; }
.fx .sc .v { font-size: 14px; font-weight: 500; }
.fx .sc small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 3px; }
.fx .gh, .fx .ga { grid-row: 2; font-size: 11.5px; color: var(--muted); line-height: 1.35; margin-top: 4px; white-space: normal; }
.fx .gh { grid-column: 1; text-align: right; } .fx .ga { grid-column: 3; text-align: left; }
.fx.dec .sc { color: var(--link); }
.bye { text-align: center; padding: 12px 0; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
/* the table: ten columns on a phone, so every number is narrow and the name takes what is left */
.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 2px; }
.tbl th, .tbl td { padding: 8px 2px; border-bottom: 1px solid var(--line); text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.tbl th.p, .tbl td.p { width: 22px; color: var(--muted); font-size: 12px; }
.tbl th.nm, .tbl td.nm { text-align: left; width: auto; font-weight: 600; padding-left: 4px; }
.tbl td.nm small { display: block; margin-top: 2px; }
.tbl td.nm small i { font-style: normal; display: inline-block; width: 12px; font-size: 9.5px; font-weight: 700; text-align: center; color: var(--muted); }
.tbl td.nm small i.w { color: var(--green); } .tbl td.nm small i.l { color: var(--red); }
.tbl th:not(.nm):not(.p):not(.pts), .tbl td:not(.nm):not(.p):not(.pts) { width: 25px; }
.tbl th.pts, .tbl td.pts { width: 36px; font-weight: 700; color: var(--ink); }
.tbl tr.you td { color: var(--link); }
.tbl tr.you td.pts { color: var(--link); }
.tbl tr.top td.p { color: var(--ink); font-weight: 700; }
.tbl tr.top td.nm::before { content: ''; display: inline-block; width: 3px; height: 14px; border-radius: 2px; background: var(--blue); margin: 0 6px -2px -4px; }
.tbl tr.top.you td.nm::before { background: var(--link); }
/* the champion */
.champ { text-align: center; padding: 22px 0 8px; }
.champ .kick { display: block; color: var(--link); }
.champ .name { font-size: clamp(36px, 11vw, 48px); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; margin-top: 8px; overflow-wrap: anywhere; }
.champ .sub { font-size: 14px; color: var(--muted); margin-top: 8px; }
.note.center { text-align: center; }

/* Flag sprite: 166 flags from flag-icons (MIT). Windows has no colour emoji flags, so the
   interface falls back to these images; phones keep the emoji they already render. */
.fl{display:inline-block;width:24px;height:18px;vertical-align:-3px;border-radius:2px;background-image:url(/flags.png);background-size:288px 288px;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.fl-ae{background-position:0px 0px}
.fl-ag{background-position:-24px 0px}
.fl-al{background-position:-48px 0px}
.fl-am{background-position:-72px 0px}
.fl-ao{background-position:-96px 0px}
.fl-ar{background-position:-120px 0px}
.fl-at{background-position:-144px 0px}
.fl-au{background-position:-168px 0px}
.fl-az{background-position:-192px 0px}
.fl-ba{background-position:-216px 0px}
.fl-be{background-position:-240px 0px}
.fl-bf{background-position:-264px 0px}
.fl-bg{background-position:0px -18px}
.fl-bh{background-position:-24px -18px}
.fl-bi{background-position:-48px -18px}
.fl-bj{background-position:-72px -18px}
.fl-bo{background-position:-96px -18px}
.fl-br{background-position:-120px -18px}
.fl-bw{background-position:-144px -18px}
.fl-by{background-position:-168px -18px}
.fl-ca{background-position:-192px -18px}
.fl-cd{background-position:-216px -18px}
.fl-cf{background-position:-240px -18px}
.fl-cg{background-position:-264px -18px}
.fl-ch{background-position:0px -36px}
.fl-ci{background-position:-24px -36px}
.fl-cl{background-position:-48px -36px}
.fl-cm{background-position:-72px -36px}
.fl-cn{background-position:-96px -36px}
.fl-co{background-position:-120px -36px}
.fl-cr{background-position:-144px -36px}
.fl-cu{background-position:-168px -36px}
.fl-cv{background-position:-192px -36px}
.fl-cw{background-position:-216px -36px}
.fl-cy{background-position:-240px -36px}
.fl-cz{background-position:-264px -36px}
.fl-de{background-position:0px -54px}
.fl-dk{background-position:-24px -54px}
.fl-do{background-position:-48px -54px}
.fl-dz{background-position:-72px -54px}
.fl-ec{background-position:-96px -54px}
.fl-ee{background-position:-120px -54px}
.fl-eg{background-position:-144px -54px}
.fl-er{background-position:-168px -54px}
.fl-es{background-position:-192px -54px}
.fl-fi{background-position:-216px -54px}
.fl-fo{background-position:-240px -54px}
.fl-fr{background-position:-264px -54px}
.fl-ga{background-position:0px -72px}
.fl-gb{background-position:-24px -72px}
.fl-gb-eng{background-position:-48px -72px}
.fl-gb-sct{background-position:-72px -72px}
.fl-gb-wls{background-position:-96px -72px}
.fl-gd{background-position:-120px -72px}
.fl-ge{background-position:-144px -72px}
.fl-gf{background-position:-168px -72px}
.fl-gh{background-position:-192px -72px}
.fl-gm{background-position:-216px -72px}
.fl-gn{background-position:-240px -72px}
.fl-gp{background-position:-264px -72px}
.fl-gq{background-position:0px -90px}
.fl-gr{background-position:-24px -90px}
.fl-gt{background-position:-48px -90px}
.fl-gw{background-position:-72px -90px}
.fl-gy{background-position:-96px -90px}
.fl-hn{background-position:-120px -90px}
.fl-hr{background-position:-144px -90px}
.fl-ht{background-position:-168px -90px}
.fl-hu{background-position:-192px -90px}
.fl-id{background-position:-216px -90px}
.fl-ie{background-position:-240px -90px}
.fl-il{background-position:-264px -90px}
.fl-in{background-position:0px -108px}
.fl-iq{background-position:-24px -108px}
.fl-ir{background-position:-48px -108px}
.fl-is{background-position:-72px -108px}
.fl-it{background-position:-96px -108px}
.fl-jm{background-position:-120px -108px}
.fl-jo{background-position:-144px -108px}
.fl-jp{background-position:-168px -108px}
.fl-ke{background-position:-192px -108px}
.fl-kg{background-position:-216px -108px}
.fl-km{background-position:-240px -108px}
.fl-kr{background-position:-264px -108px}
.fl-kw{background-position:0px -126px}
.fl-kz{background-position:-24px -126px}
.fl-lb{background-position:-48px -126px}
.fl-lc{background-position:-72px -126px}
.fl-lr{background-position:-96px -126px}
.fl-lt{background-position:-120px -126px}
.fl-lu{background-position:-144px -126px}
.fl-lv{background-position:-168px -126px}
.fl-ly{background-position:-192px -126px}
.fl-ma{background-position:-216px -126px}
.fl-md{background-position:-240px -126px}
.fl-me{background-position:-264px -126px}
.fl-mf{background-position:0px -144px}
.fl-mg{background-position:-24px -144px}
.fl-mk{background-position:-48px -144px}
.fl-ml{background-position:-72px -144px}
.fl-mm{background-position:-96px -144px}
.fl-mq{background-position:-120px -144px}
.fl-mr{background-position:-144px -144px}
.fl-mt{background-position:-168px -144px}
.fl-mu{background-position:-192px -144px}
.fl-mw{background-position:-216px -144px}
.fl-mx{background-position:-240px -144px}
.fl-my{background-position:-264px -144px}
.fl-mz{background-position:0px -162px}
.fl-nc{background-position:-24px -162px}
.fl-ne{background-position:-48px -162px}
.fl-ng{background-position:-72px -162px}
.fl-ni{background-position:-96px -162px}
.fl-nl{background-position:-120px -162px}
.fl-no{background-position:-144px -162px}
.fl-nz{background-position:-168px -162px}
.fl-om{background-position:-192px -162px}
.fl-pa{background-position:-216px -162px}
.fl-pe{background-position:-240px -162px}
.fl-ph{background-position:-264px -162px}
.fl-pk{background-position:0px -180px}
.fl-pl{background-position:-24px -180px}
.fl-pr{background-position:-48px -180px}
.fl-ps{background-position:-72px -180px}
.fl-pt{background-position:-96px -180px}
.fl-py{background-position:-120px -180px}
.fl-qa{background-position:-144px -180px}
.fl-ro{background-position:-168px -180px}
.fl-rs{background-position:-192px -180px}
.fl-ru{background-position:-216px -180px}
.fl-rw{background-position:-240px -180px}
.fl-sa{background-position:-264px -180px}
.fl-sd{background-position:0px -198px}
.fl-se{background-position:-24px -198px}
.fl-si{background-position:-48px -198px}
.fl-sk{background-position:-72px -198px}
.fl-sl{background-position:-96px -198px}
.fl-sn{background-position:-120px -198px}
.fl-so{background-position:-144px -198px}
.fl-sr{background-position:-168px -198px}
.fl-ss{background-position:-192px -198px}
.fl-sv{background-position:-216px -198px}
.fl-sy{background-position:-240px -198px}
.fl-td{background-position:-264px -198px}
.fl-tg{background-position:0px -216px}
.fl-th{background-position:-24px -216px}
.fl-tj{background-position:-48px -216px}
.fl-tm{background-position:-72px -216px}
.fl-tn{background-position:-96px -216px}
.fl-tr{background-position:-120px -216px}
.fl-tt{background-position:-144px -216px}
.fl-tz{background-position:-168px -216px}
.fl-ua{background-position:-192px -216px}
.fl-ug{background-position:-216px -216px}
.fl-us{background-position:-240px -216px}
.fl-uy{background-position:-264px -216px}
.fl-uz{background-position:0px -234px}
.fl-vc{background-position:-24px -234px}
.fl-ve{background-position:-48px -234px}
.fl-vn{background-position:-72px -234px}
.fl-vu{background-position:-96px -234px}
.fl-xk{background-position:-120px -234px}
.fl-ye{background-position:-144px -234px}
.fl-za{background-position:-168px -234px}
.fl-zm{background-position:-192px -234px}
.fl-zw{background-position:-216px -234px}
/* Countries added for DraftLock, rendered from the same flag-icons set (MIT). */
.fl-kp{background-position:0px -252px}
.fl-ad{background-position:-24px -252px}
.fl-tl{background-position:-48px -252px}
.fl-li{background-position:-72px -252px}
.fl-sm{background-position:-96px -252px}
.fl-pf{background-position:-120px -252px}
.fl-gi{background-position:-144px -252px}
.fl-bb{background-position:-168px -252px}
.fl-et{background-position:-192px -252px}
.fl-af{background-position:-216px -252px}
.fl-la{background-position:-240px -252px}
.fl-bm{background-position:-264px -252px}
.fl-ws{background-position:0px -270px}
.fl-kh{background-position:-24px -270px}
.fl-fj{background-position:-48px -270px}
.fl-sc{background-position:-72px -270px}
.fl-bt{background-position:-96px -270px}
.fl-na{background-position:-120px -270px}
.fl-mv{background-position:-144px -270px}
.fl-sg{background-position:-168px -270px}
.fl-bz{background-position:-192px -270px}
.fl-st{background-position:-216px -270px}
.fl-kn{background-position:-240px -270px}
.fl-bn{background-position:-264px -270px}

/* ---- the pick, shown large (Beta 1.3) ------------------------------------------------------------------------ */
/* The shirt as it sits on the board, three times the size, in the middle of the screen for two seconds. It fades
   in quickly and out quickly; it never flashes, and it never takes a tap, so a drafter can carry on underneath it. */
.pickpop { position: fixed; left: 50%; top: 42%; z-index: 12; width: min(78vw, 290px); pointer-events: none;
  transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: opacity .12s ease-out, transform .12s ease-out; }
.pickpop.on { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .1s ease-out, transform .14s cubic-bezier(.2, .7, .2, 1); }
.pickpop .in { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px; background: var(--token); border: 1.5px solid var(--token-line); border-radius: 16px; color: var(--ink); text-align: left; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.pickpop .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pickpop .code { display: flex; gap: 8px; align-items: baseline; font-size: 15px; font-weight: 600; letter-spacing: .05em; color: var(--muted); }
.pickpop .code i { font-style: normal; font-size: 14px; letter-spacing: 0; font-weight: 600; }
.pickpop.b-main .code i { color: var(--fit-main); } .pickpop.b-good .code i { color: var(--fit-good); } .pickpop.b-fair .code i { color: var(--fit-fair); } .pickpop.b-poor .code i { color: var(--fit-poor); }
.pickpop.b-good .in { border-color: var(--fit-good); } .pickpop.b-fair .in { border-color: var(--fit-fair); } .pickpop.b-poor .in { border-color: var(--fit-poor); }
.pickpop .rt { font-size: 30px; font-weight: 700; line-height: 1; color: var(--link); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pickpop.them .rt { color: var(--ink); }
.pickpop .nm { font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.pickpop .cl { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pickpop .cl .fg.em { font-size: 15px; margin-right: 0; }
.pickpop .who { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--link); margin-bottom: 2px; }
.pickpop.them .who { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .pickpop, .pickpop.on { transition: opacity .1s linear; transform: translate(-50%, -50%); } }

/* ---- the two elevens before kick-off (Beta 1.3) --------------------------------------------------------------- */
/* Both boards side by side wherever there is room for two, one above the other on a phone held upright. This is the
   one screen allowed out of the game's 500px column (#app.wide). */
#app.wide { max-width: 1040px; }
#app.wide .score.teams { max-width: 500px; margin: 0 auto; }
.lineups { display: grid; grid-template-columns: 1fr; gap: 6px 22px; margin-top: 6px; }
.lineups .lu { min-width: 0; max-width: 500px; width: 100%; margin: 0 auto; }
.lineups .luname { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; padding: 8px 4px 0; }
.lineups .luname small { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.lineups .lu.them .luname small { color: var(--muted); }
.lineups .pitch { margin-top: 8px; }
.lineups .pitch.them .slot.full .rt { color: var(--link); }
.lineups .slot:disabled { color: var(--ink); }
#app.wide .big.play { max-width: 500px; margin: 18px auto 0; }
@media (min-width: 700px) { .lineups { grid-template-columns: 1fr 1fr; } .lineups .lu { margin: 0; } }

/* ---- the record with draws, the Leagues, Continue with Google (Beta 1.3) --------------------------------------- */
.rec .wl em { font-style: normal; color: var(--muted); }
.rec .wlk { gap: 30px; }
.rival .wdl { display: inline-grid; grid-auto-flow: column; gap: 10px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.rival .wdl b { color: var(--link); } .rival .wdl em { font-style: normal; color: var(--muted); } .rival .wdl i { font-style: normal; color: var(--ink); }
.rival .wdl > * { min-width: 16px; }
.sec .seck { float: right; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.lg { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lg .pos { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); text-align: center; }
.lg .pos.won { color: var(--link); }
.lg .who { min-width: 0; }
.lg .who b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg .who small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.h2h .hs em { font-style: normal; color: var(--muted); font-size: 44px; vertical-align: 6px; }
.h2h .hsk { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 4px; }
.h2h .hsk span:first-child { text-align: right; } .h2h .hsk span:last-child { text-align: left; }
.five i.d { color: var(--muted); }
.game .res.d { color: var(--muted); }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
a.big.google, a.big.apple { text-decoration: none; }
/* A link that sits in a rowline is a link by behaviour, not by looks: it has to read as the buttons beside it. */
a.quiet.link { text-decoration: none; }
/* The six-digit sign-in code: wide, spaced and centred, so it reads as a code rather than as a field. */
.field.code { text-align: center; font-size: 26px; letter-spacing: .34em; font-variant-numeric: tabular-nums; padding-left: 0; padding-right: 0; }
/* Deleting an account is the one thing in DraftLock that cannot be undone, so it is the one thing that is red.
   It uses the theme's own --red, the colour a loss already wears, rather than introducing a second one. */
.rowline .quiet.danger { color: var(--red); }
.authform.danger .big.fill { background: var(--red); border-color: var(--red); color: #fff; }
.authform.danger .note { margin-top: 10px; }

/* The Privacy Policy and Terms (Beta 3.7): plain reading pages on the game's own type and colours. One column,
   a wordmark home, nothing else to press. */
body.legalpage { display: flex; flex-direction: column; min-height: 100svh; }
.lg-top, .legal, .lg-foot { width: 100%; max-width: 680px; margin: 0 auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
.lg-top { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; padding-bottom: 8px; }
.lg-mark { font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.lg-back { font-size: 13px; color: var(--link); text-decoration: none; }
.legal { flex: 1; padding-top: 18px; padding-bottom: 40px; font-size: 16px; line-height: 1.6; }
.legal h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 6px; }
.legal .lede { margin: 0 0 28px; color: var(--muted); font-size: 13px; }
.legal h2 { font-size: 19px; letter-spacing: -.01em; margin: 34px 0 8px; }
.legal h3 { font-size: 15px; margin: 22px 0 4px; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin: 0 0 6px; }
.legal a { color: var(--link); }
.lg-foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; padding-top: 18px; padding-bottom: 22px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.lg-foot span { font-weight: 700; }
.lg-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.lg-foot a, .lp-legal a { color: var(--muted); text-decoration: none; }
.lg-foot a:hover, .lp-legal a:hover { color: var(--ink); text-decoration: underline; }
/* The landing footer's two small links, and the one line under the sign-in buttons. */
.lp-legal { display: inline-flex; gap: 14px; margin-left: auto; margin-right: 14px; }
.authlegal { margin-top: 10px; font-size: 12px; color: var(--muted); }
.authlegal a { color: var(--muted); }