/*
 * The site's look, laid over Bootstrap. Loaded after bootstrap.min.css on every page.
 * Values come from docs/design/DESIGN.md (light theme). Plain CSS: Bootstrap reads
 * its colours and fonts from the --bs-* variables set here, so no build step is needed.
 * The shared pieces (cards, buttons, pills, touch) are set here (PRED-129); each page's
 * own pieces sit under its heading below. Dark mode comes with PRED-161.
 */

/* Design tokens */

:root {
  --bg: #F1F4F1;
  --surface: #FFFFFF;
  --surface-2: #F5F7F4;
  --surface-3: #EBEFEA;
  --ink: #0F1A14;
  --muted: #5B6862;
  --faint: #8A968F;
  --line: rgba(15, 26, 20, .08);
  --line-2: rgba(15, 26, 20, .14);
  --accent: #0A7A50;
  --accent-soft: #E0F2E9;
  --amber: #9A5B00;
  --shield: #4A6382;
  --shield-ink: #FFFFFF;
  --shield-soft: #E6ECF3;
  --amber-soft: #FFF1D6;
  --cup-a: #FFF5D9;
  --cup-line: #EFD99A;
  --cup-ink: #835E00;
  /* The desktop sidebar: Mint, a soft Flare green apart from the page (PRED-874, the owner's sample 4) */
  --rail-bg: #DCEFE5;
  --rail-line: rgba(10, 122, 80, .18);
  --rail-hover: rgba(255, 255, 255, .55);
  --rail-on: #FFFFFF;
  --rail-ic: rgba(255, 255, 255, .6);
  --rail-muted: #53705F;
  --red: #B93636;
  --red-soft: #FBE4E1;
  --blue: #1463AE;
  --blue-soft: #E2EEFA;
  --gold: #C99A12;
  --poll-warm: #FFFCF4;
  --silver: #8E98A3;
  --bronze: #AD6A34;

  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  /* Codes, links and keys people copy: one fixed style everywhere (PRED-373) */
  --code-font: 500 15px/1.4 var(--body);

  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;
  --r-xs: 6px;

  --sh-1: 0 1px 2px rgba(15, 26, 20, .05), 0 1px 1px rgba(15, 26, 20, .03);
  --sh-2: 0 2px 4px rgba(15, 26, 20, .04), 0 12px 28px -8px rgba(15, 26, 20, .12);
  --alt: rgba(15, 26, 20, .025);
  --gold-ink: #8A6A0C;

  /* Outcome colours, strongest for an exact score */
  --pt-e: #03351F;
  --pt-g: #0E7048;
  --pt-r: #3C9C6F;
  --pt-w: #8FC0A8;

  /* Design rule: the gap between tables or cards placed side by side on desktop */
  --table-gap: 56px;

  /* Warm paper for games open to join, so offers look different from games you play */
  --paper: #F7F3E8;
  --paper-line: rgba(80, 60, 20, .16);
  --paper-ink: #3B3220;

  /* The header: the page colour, solid, white buttons */
  --hdr-bg: #F1F4F1;
  --hdr-line: var(--line);
  --hdr-chip: var(--surface);

  /* Text on a filled colour: the accent, each outcome's fill and amber (dark text in dark mode) */
  --accent-ink: #FFFFFF;
  --red-ink: #FFFFFF;
  --pti-e: #FFFFFF;
  --pti-g: #FFFFFF;
  --pti-r: #FFFFFF;
  --amber-ink: #FFFFFF;
  --gold-soft: #FFF5D9;
  --gold-line: #E9C46A;
  --steel: #46596C;
  --steel-soft: #E6ECF2;
  --steel-strong: #C9D4DF;
  --violet: #7A4FB8;
  --logo-gold: #E39B2A;

  /* Club Admin mode and Player mode (PRED-166, PRED-466): black with white; swapped in dark mode */
  --adm: #0E1411;
  --adm-ink: #FFFFFF;
  --adm-chip: rgba(255, 255, 255, .1);
  --adm-line: rgba(255, 255, 255, .28);
  --adm-dim: rgba(255, 255, 255, .7);
  --adm-ring: rgba(255, 255, 255, .35);

  /* The accent as numbers for Bootstrap's links */
  --link-rgb: 10, 122, 80;
  --link-hover-rgb: 7, 90, 59;
}

/* Dark mode (PRED-161, dashboard v58): the moonlit "night match" look, for Dark, or for Phone
   setting on a phone set to dark (no data-theme). The two blocks must stay the same: a test checks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #030806;
    --logo-gold: #F3B64B;
    --surface: #0F1914;
    --surface-2: #132019;
    --surface-3: #1A2921;
    --ink: #E8F0EB;
    --muted: #9AABA2;
    --faint: #6F8078;
    --line: rgba(255, 255, 255, .07);
    --line-2: rgba(255, 255, 255, .11);
    --accent: #3FCB8E;
    --accent-ink: #04130C;
    --red-ink: #1A0B0A;
    --accent-soft: #143628;
    --amber: #F3B64B;
    --shield: #A9BBD1;
    --shield-ink: #121A24;
    --shield-soft: #1E2733;
    --amber-ink: #1A1300;
    --amber-soft: #33270F;
    --cup-a: #2A2210;
    --cup-line: #4A3C17;
    --cup-ink: #E9C46A;
    --rail-bg: #0F1914;
    --rail-line: rgba(255, 255, 255, .07);
    --rail-hover: #132019;
    --rail-on: #143628;
    --rail-ic: #1A2921;
    --rail-muted: #9AABA2;
    --red: #F07E75;
    --red-soft: #3C1C1A;
    --blue: #6FB2F2;
    --blue-soft: #15293E;
    --poll-warm: #211C10;
    --gold-soft: #2A2210;
    --gold-ink: #E9C46A;
    --gold-line: #6B5420;
    --steel: #A9BCCF;
    --steel-soft: #1B2530;
    --steel-strong: #2A3A4A;
    --violet: #C4A5F2;
    --sh-1: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px -16px rgba(0, 0, 0, .7);
    --sh-2: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -14px rgba(0, 0, 0, .8);
    --alt: rgba(255, 255, 255, .022);
    --pt-e: #C8F8DF;
    --pt-g: #43CC8E;
    --pt-r: #2E8A62;
    --pt-w: #3A5C4B;
    --pti-e: #04130C;
    --pti-g: #04130C;
    --pti-r: #F2FAF5;
    --paper: #17150F;
    --paper-line: rgba(233, 196, 106, .18);
    --paper-ink: #E9DDBF;
    --hdr-bg: #030806;
    --adm: #EEF2EF;
    --adm-ink: #0E1411;
    --adm-chip: rgba(0, 0, 0, .08);
    --adm-line: rgba(0, 0, 0, .2);
    --adm-dim: rgba(14, 20, 17, .7);
    --adm-ring: rgba(14, 20, 17, .35);
    --link-rgb: 63, 203, 142;
    --link-hover-rgb: 120, 222, 176;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #030806;
  --logo-gold: #F3B64B;
  --surface: #0F1914;
  --surface-2: #132019;
  --surface-3: #1A2921;
  --ink: #E8F0EB;
  --muted: #9AABA2;
  --faint: #6F8078;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .11);
  --accent: #3FCB8E;
  --accent-ink: #04130C;
  --red-ink: #1A0B0A;
  --accent-soft: #143628;
  --amber: #F3B64B;
  --shield: #A9BBD1;
  --shield-ink: #121A24;
  --shield-soft: #1E2733;
  --amber-ink: #1A1300;
  --amber-soft: #33270F;
  --cup-a: #2A2210;
  --cup-line: #4A3C17;
  --cup-ink: #E9C46A;
  --rail-bg: #0F1914;
  --rail-line: rgba(255, 255, 255, .07);
  --rail-hover: #132019;
  --rail-on: #143628;
  --rail-ic: #1A2921;
  --rail-muted: #9AABA2;
  --red: #F07E75;
  --red-soft: #3C1C1A;
  --blue: #6FB2F2;
  --blue-soft: #15293E;
  --poll-warm: #211C10;
  --gold-soft: #2A2210;
  --gold-ink: #E9C46A;
  --gold-line: #6B5420;
  --steel: #A9BCCF;
  --steel-soft: #1B2530;
  --steel-strong: #2A3A4A;
  --violet: #C4A5F2;
  --sh-1: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px -16px rgba(0, 0, 0, .7);
  --sh-2: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -14px rgba(0, 0, 0, .8);
  --alt: rgba(255, 255, 255, .022);
  --pt-e: #C8F8DF;
  --pt-g: #43CC8E;
  --pt-r: #2E8A62;
  --pt-w: #3A5C4B;
  --pti-e: #04130C;
  --pti-g: #04130C;
  --pti-r: #F2FAF5;
  --paper: #17150F;
  --paper-line: rgba(233, 196, 106, .18);
  --paper-ink: #E9DDBF;
  --hdr-bg: #030806;
  --adm: #EEF2EF;
  --adm-ink: #0E1411;
  --adm-chip: rgba(0, 0, 0, .08);
  --adm-line: rgba(0, 0, 0, .2);
  --adm-dim: rgba(14, 20, 17, .7);
  --adm-ring: rgba(14, 20, 17, .35);
  --link-rgb: 63, 203, 142;
  --link-hover-rgb: 120, 222, 176;
}

/* Bootstrap, told to use the tokens */

:root {
  --bs-body-font-family: var(--body);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--faint);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-3);
  --bs-border-color: var(--line-2);
  --bs-border-color-translucent: var(--line);
  --bs-heading-color: var(--ink);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: var(--link-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--accent) 82%, var(--ink));
  --bs-link-hover-color-rgb: var(--link-hover-rgb);
  /* Alerts in the site's soft colours, so they suit both themes (PRED-161) */
  --bs-success-text-emphasis: var(--ink);
  --bs-success-bg-subtle: var(--accent-soft);
  --bs-success-border-subtle: transparent;
  --bs-danger-text-emphasis: var(--ink);
  --bs-danger-bg-subtle: var(--red-soft);
  --bs-danger-border-subtle: transparent;
  --bs-warning-text-emphasis: var(--ink);
  --bs-warning-bg-subtle: var(--amber-soft);
  --bs-warning-border-subtle: transparent;
  --bs-info-text-emphasis: var(--ink);
  --bs-info-bg-subtle: var(--blue-soft);
  --bs-info-border-subtle: transparent;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 10, 122, 80;
  --bs-success: var(--accent);
  --bs-success-rgb: 10, 122, 80;
  --bs-danger: var(--red);
  --bs-danger-rgb: 185, 54, 54;
  --bs-warning: var(--amber);
  --bs-warning-rgb: 154, 91, 0;
  --bs-info: var(--blue);
  --bs-info-rgb: 20, 99, 174;
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-focus-ring-color: rgba(10, 122, 80, .25);
}

/* Text: Barlow for reading, Barlow Condensed for titles and numbers */

body {
  font-variant-numeric: tabular-nums;
}

/* No grey flash when a phone screen is tapped */
html {
  -webkit-tap-highlight-color: transparent;
}

b,
strong {
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6,
.display {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Brand rule 17 (PRED-761): one page title, 28px on phones and 40px from 900px wide, thin. Home's
   headline, the sweepstake draw and New games keep their own feature styles. */
h1 { font-weight: 300; font-size: 28px; line-height: 1.05; letter-spacing: .04em; }
@media (min-width: 900px) { h1 { font-size: 40px; } }
h2, h3 { font-weight: 400; }
h4, h5 { font-weight: 500; }
h6 { font-weight: 600; }

/* Page width (PRED-472, dashboard v58): fill the screen up to 1200px, with no narrower steps between.
   Bootstrap's container held pages at 960px from 992px to 1199px, squeezing side-by-side cards. */
main.container, .site-header > .container, #messages.container { max-width: 1200px; }

/* Buttons: the main action is site green */

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: var(--accent-ink);
  --bs-btn-hover-color: var(--accent-ink);
  --bs-btn-active-color: var(--accent-ink);
  --bs-btn-disabled-color: var(--accent-ink);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 82%, var(--ink));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 82%, var(--ink));
  --bs-btn-active-bg: color-mix(in srgb, var(--accent) 72%, var(--ink));
  --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 10, 122, 80;
  --bs-btn-font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-ink);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: var(--accent-ink);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent) 82%, var(--ink));
  --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 82%, var(--ink));
  --bs-btn-disabled-color: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 10, 122, 80;
  --bs-btn-font-weight: 600;
}

/* The ghost button, for second actions (Cancel, Edit, Close): white with ink text and a soft line,
   as dashboard v104's .btn.ghost. Bootstrap's own grey never shows (PRED-727) */
.btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--line-2);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--faint);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-border-color: var(--faint);
  --bs-btn-disabled-color: var(--faint);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--line-2);
  --bs-btn-focus-shadow-rgb: 10, 122, 80;
  --bs-btn-font-weight: 600;
}

/* Delete and other actions that can't be undone: Flare red, never Bootstrap's (PRED-727) */
.btn-danger {
  --bs-btn-color: var(--red-ink);
  --bs-btn-bg: var(--red);
  --bs-btn-border-color: var(--red);
  --bs-btn-hover-color: var(--red-ink);
  --bs-btn-hover-bg: color-mix(in srgb, var(--red) 85%, var(--ink));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--red) 85%, var(--ink));
  --bs-btn-active-color: var(--red-ink);
  --bs-btn-active-bg: color-mix(in srgb, var(--red) 75%, var(--ink));
  --bs-btn-active-border-color: color-mix(in srgb, var(--red) 75%, var(--ink));
  --bs-btn-focus-shadow-rgb: 185, 54, 54;
  --bs-btn-font-weight: 600;
}

/* Quick taps on a control never zoom the page on an iPhone, and don't wait to see if a second
   tap is coming; pinch-zoom still works (PRED-971) */
button, a, label, input, select, textarea, summary, [role="button"] { touch-action: manipulation; }

.btn {
  --bs-btn-padding-y: .625rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-border-radius: var(--r-md);
  min-height: 44px;
  transition: transform .18s, color .18s, background-color .18s, border-color .18s, box-shadow .18s;
}

/* Small buttons stay small, with a 44px tap area round them */
.btn-sm {
  --bs-btn-padding-y: .3125rem;
  --bs-btn-padding-x: .75rem;
  --bs-btn-border-radius: var(--r-sm);
  position: relative;
  min-height: 0;
}
.btn-sm::before {
  content: "";
  position: absolute;
  inset: -7px 0;
}

/* Other small controls keep their look too, with a tap area of at least 44px round them (PRED-160):
   back links, Query and Reset, Send vote, and the small text buttons too (brand rule 13, PRED-743) */
.me-btn, .hdr-btn, .seg a, .chip, .more, .still-pill,
.back, .pay-meta, .poll-send, .link-btn, .split-fixed, .ez-model-link a, .ez-links a,
.story-all summary, .close-early summary { position: relative; }
.me-btn::after, .hdr-btn::after, .seg a::after, .chip::after, .more::after, .still-pill::after,
.back::after, .pay-meta::after, .poll-send::after, .link-btn::after, .split-fixed::after,
.ez-model-link a::after, .ez-links a::after, .story-all summary::after, .close-early summary::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
a.site-brand { display: inline-flex; align-items: center; gap: 9px; padding-block: 6px; }
/* The club name opens the club menu; its chevron turns while the menu is open */
.club-btn { display: inline-flex; align-items: center; gap: 9px; padding: 4px 10px 4px 2px; border: 0; border-radius: 999px; background: none; }
/* Its menu's wrapper holds no line of text, so the crest sits level with the header's circles,
   not 1px higher on the line's room for letter tails (PRED-746) */
.dropdown:has(> .club-btn) { display: flex; }
.club-btn .bi { font-size: 15px; opacity: .7; transition: transform .2s; }
.club-btn[aria-expanded="true"] .bi { transform: rotate(180deg); }
@media (hover: hover) { .club-btn:hover { background: var(--hdr-chip); } }
.brand-logo { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
/* Flare's own logo, the roundel, signed out or in no club (PRED-708, v101). Its lines take the text colour;
   the F's middle stripe is gold, brighter in dark mode */
.flare-logo { width: 34px; height: 34px; flex: none; }
.flare-logo .flare-gold { stroke: var(--logo-gold); }

/* Boxes to type in or choose from are at least 44px tall, easy to tap */
.form-control,
.form-select { min-height: 44px; }

/* Buttons shrink a little when pressed, and lift on a mouse hover */
.btn:active { transform: scale(.97); }
@media (hover: hover) {
  .btn:not(:disabled, .disabled, .btn-link):hover { transform: translateY(-1px); }
}

/* A button that can't be pressed yet is calm grey, not faded colour */
.btn:disabled,
.btn.disabled {
  --bs-btn-disabled-bg: var(--surface-3);
  --bs-btn-disabled-border-color: var(--surface-3);
  --bs-btn-disabled-color: var(--faint);
  --bs-btn-disabled-opacity: 1;
}
/* Save changes is white until something changes, then green (PRED-583) */
.btn-save:disabled {
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--line-2);
}

/* Cards: white on the grey page, with soft corners and shadow */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: var(--r-lg);
  --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
  box-shadow: var(--sh-1);
}

/* HTMX: a loading sign shows only while its request runs (htmx's own inline styles are off) */

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Header: stays at the top of the screen, solid so scrolling stays smooth on older phones (PRED-976) */

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; anchor-name: --site-header;
  background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-line);
}
.site-brand {
  font: 500 21px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink);
  text-decoration: none;
}

/* Signed-out pages (Sign in, Join a club) sit in one narrow centred column */

.page-narrow {
  max-width: 560px;
  margin-inline: auto;
}
/* Club Admin pages with lists in columns, such as Members, use the full width (v42) */
.page-wide { max-width: 1200px; margin-inline: auto; }

.page-sub {
  color: var(--muted);
  margin-bottom: 1rem;
}

.card-heading {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .05em;

  color: var(--muted);
}

/* Form errors: a red box and a short red line under it */

.form-control[aria-invalid="true"] {
  border-color: var(--red);
}

.form-error {
  color: var(--red);
  font-size: .875rem;
  margin-top: .25rem;
}

/* "Available" or "Already taken" under the alias box on Join a club */
.alias-hint {
  font-size: .8125rem;
  font-weight: 500;
  margin-top: .25rem;
  min-height: 1em;
}
.alias-hint.ok { color: var(--accent); }
.alias-hint.bad { color: var(--red); }

/* Codes, keys and links people copy (share codes, authenticator keys, recovery codes):
   one fixed style everywhere, Barlow 500 at 15px, wrapping anywhere (DESIGN.md) */
.code-text {
  font: var(--code-font);
  overflow-wrap: anywhere;
}

/* The authenticator app's QR code, on a white square so phones can read it in dark mode */
.qr-code {
  width: 180px;
  height: 180px;
  background: #FFFFFF;
  padding: 8px;
  border-radius: var(--r-sm);
}

/* Avatars: a player's picture in a circle, or their initials when they have none (PRED-50) */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-grid;
  place-items: center;
  font: 500 15px/1 var(--display);
  letter-spacing: .02em;
  flex: none;
  overflow: hidden;
}
.avatar.xl { width: 72px; height: 72px; font-size: 28px; }
.avatar.lg { width: 52px; height: 52px; font-size: 20px; }
/* A row with a tinted icon disc: a club in My clubs, a club in the club menu */
.club-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.band + .club-row { border-top: 0; }
.club-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gr-kind { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pz-ico {
  width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none;
}
.pz-ico.k-gold { background: var(--gold-soft); color: var(--gold-ink); }
.pz-ico.k-blue { background: var(--blue-soft); color: var(--blue); }
.pz-ico.k-mint { background: var(--accent-soft); color: var(--accent); }
/* The club menu: a list of rows under the header's club name */
.club-menu { width: min(360px, calc(100vw - 16px)); padding: 0; background: var(--surface); overflow: clip; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.more-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px;
  background: none; border: 0; border-top: 1px solid var(--line); color: var(--ink); text-align: left;
  font-weight: 500; text-decoration: none;
}
.band + form .more-row, .band + .more-row { border-top: 0; }
/* Sign out at the foot of the picture menu, set apart by a line (PRED-697, dashboard v97) */
.more-row.mm-out { border-top-color: var(--line-2); color: var(--muted); }
.more-row.mm-out .pz-ico { background: var(--surface-3); color: var(--muted); }
.more-row .grow { flex: 1; display: flex; flex-direction: column; }
.more-row .grow span { font-size: 12px; font-weight: 400; color: var(--muted); }
.more-row[aria-current="true"] { background: var(--surface-2); }
@media (hover: hover) { .more-row:hover { background: var(--surface-2); } }
/* Members (PRED-414): one card, groups with a grey heading, and rows whose columns line up */
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
/* The search box over the list (PRED-165) */
.m-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.rd-find {
  display: flex; align-items: center; gap: 6px; flex: 1; max-width: 320px; min-height: 44px; margin: 0; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--muted);
}
.rd-find:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rd-find input { flex: 1; min-width: 0; min-height: 0; padding: 8px 0; border: 0; outline: 0; background: none; font: 500 15px/1 var(--body); color: var(--ink); }
.m-group {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 8px 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.m-group b { color: var(--ink); font-weight: 600; }
.m-group[id] { scroll-margin-top: 96px; } /* To do's links land on the list, clear of the header (PRED-751) */
/* Site Admin, a club's plan card on Overview (PRED-747, dashboard v109): one column, the buttons
   one width and the date box half of it */
.sa-plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 10px; }
.sa-plan-col { display: grid; gap: 8px; max-width: 340px; }
.sa-plan-col .btn:not(.btn-link) { width: 100%; justify-content: center; }
.sa-ends-row { display: flex; align-items: center; gap: 12px; }
.sa-ends-row .sa-date { width: 50%; min-width: 0; }
/* Editing details (PRED-753, dashboard v110): a member's page and My profile. Email and role
   show in a dashed box with their own button, as they are not typed in */
.ed-form { display: grid; gap: 12px; padding: 12px 16px 16px; }
.ed-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-locked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--surface-2); font-size: 14px; }
.ed-locked .grow { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.ed-locked .btn { white-space: nowrap; }
/* Your players (PRED-755, dashboard v111): one row of square buttons, an icon with a word under
   it, Remove in Flare red; Edit opens the first name and the name others see in place */
.yp-icons { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; width: 100%; }
.yp-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 4px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.2; text-decoration: none; }
.yp-icon .bi { font-size: 18px; }
.yp-icon:hover { color: var(--ink); }
.yp-icon[aria-current="true"] { background: var(--surface-2); color: var(--ink); }
@media (hover: hover) { .yp-icon:hover { background: var(--surface-2); } }
.yp-icon.del, .yp-icon.del:hover { color: var(--red); }
.yp-edit { width: 100%; display: grid; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); }
.mrow { display: grid; align-items: center; column-gap: 12px; row-gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.mrow.jr, .mrow.mm { grid-template-columns: 28px minmax(170px, 1.3fr) minmax(0, 1.2fr) 160px 104px 276px; }
.mrow.m-head { padding-block: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.m-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.m-who strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-who span, .m-email { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* A member's name opens their profile (PRED-637) */
a.m-who { color: inherit; text-decoration: none; }
@media (hover: hover) { a.m-who:hover strong { text-decoration: underline; } }
.m-email { font-size: 13px; }
.m-head .m-email { font-size: 11px; }
.m-contact { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.m-contact .bi { color: var(--muted); }
.m-status { min-width: 0; }
.m-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; }
.m-act .btn { white-space: nowrap; }
.m-confirm { flex-wrap: nowrap; white-space: nowrap; }
.m-gap { visibility: hidden; }
.m-list .mrow:nth-child(even) { background: var(--alt); }
.mrow.removing { background: var(--red-soft); }
.mrow.gone .avatar, .mrow.gone .m-who strong { opacity: .55; }
.mrow.gone .m-who strong { text-decoration: line-through; }
.m-remove { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); }
@media (hover: hover) { .m-remove:hover { color: var(--red); background: var(--red-soft); } }
.admin-pill { background: var(--ink); color: var(--bg); }
@media (max-width: 1000px) {
  .mrow.mm { grid-template-columns: 28px minmax(0, 1fr) 150px 96px auto; }
  .mrow .m-email { display: none; }
  .mrow.jr { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .mrow.jr.m-head { display: none; }
  .mrow.jr .m-status { grid-column: 3; grid-row: 1; justify-self: end; }
  .mrow.jr .m-contact { grid-column: 2 / -1; grid-row: 2; white-space: normal; }
  .mrow.jr .m-act { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); justify-content: center; gap: 8px; }
  .mrow.jr .m-act .btn { width: 100%; }
}
@media (max-width: 700px) {
  .m-head { display: none; }
  .mrow.mm { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
  .mrow.mm .m-contact { grid-column: 2; grid-row: 2; white-space: normal; }
  .mrow.mm .m-status { grid-column: 3; grid-row: 1; }
  .mrow.mm .m-act { grid-column: 4; grid-row: 1; }
  .mrow.mm.removing .m-contact { display: none; }
  .mrow.mm.removing .m-act { grid-column: 2 / -1; grid-row: 2; }
}
/* Ways to join (PRED-415): each way with its mint icon; links and codes in a dashed box; on/off switches */
.way {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center;
  margin: 0; padding: 14px 16px; border-top: 1px solid var(--line);
}
.band + .way { border-top: 0; }
.way .grow { display: contents; }
.way .grow > * { grid-column: 1 / -1; }
.way .grow > b { grid-column: 2; grid-row: 1; }
.way > .pz-ico { grid-row: 1; }
.way > .sw { grid-column: 3; grid-row: 1; }
.su-ref {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: 620px; padding: 10px 12px;
  background: var(--surface); border: 1px dashed var(--accent); border-radius: var(--r-md);
}
.su-ref code { flex: 1 1 200px; min-width: 0; font: var(--code-font); color: var(--ink); overflow-wrap: anywhere; text-align: center; }
.su-ref-v { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.su-ref .su-ref-v > * { flex: none; }
.su-ref-l { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.su-ref .btn { width: 118px; }
.su-ref form { margin: 0; }
@media (max-width: 640px) { .su-ref code, .su-ref-v { flex-basis: 100%; } }
/* The buttons sit centred, the same size and evenly spread; on a phone they share the row (PRED-627) */
.su-ref { justify-content: center; }
@media (max-width: 640px) {
  .su-ref .btn, .su-ref form { flex: 1 1 40%; min-width: 0; }
  .su-ref .btn { width: auto; }
  .su-ref form .btn { width: 100%; }
}
/* The QR code centred in its box, with Download for printing under it (PRED-627) */
.qr-box {
  display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 620px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.way .qr-box .btn-sm { justify-self: auto; }
.invite-form { max-width: 620px; }
.justify-self-start { justify-self: start; }
.inv-list { display: flex; flex-direction: column; max-width: 620px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.inv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border-top: 1px solid var(--line); }
.inv-row:first-child { border-top: 0; }
.inv-row .grow { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
.inv-acts { display: flex; gap: 6px; }
.inv-acts form { margin: 0; }
.dom-in {
  display: flex; align-items: center; max-width: 300px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden;
}
.dom-in b { padding: 0 10px; color: var(--muted); background: var(--surface-2); align-self: stretch; display: grid; place-items: center; }
.dom-in input { border: 0; border-radius: 0; }
.dom-in code { padding: 8px 10px; font: var(--code-font); overflow-wrap: anywhere; color: var(--ink); }
.way .btn-sm { justify-self: start; }
.way .form-control { background: var(--surface); }
/* An on/off switch */
.sw {
  width: 46px; height: 28px; border-radius: 14px; border: 0; background: var(--surface-3); position: relative; flex: none;
  transition: background .15s; box-shadow: inset 0 0 0 1px var(--line-2); display: inline-block;
}
.sw.on { background: var(--accent); }
.sw-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.sw.on .sw-knob { transform: translateX(18px); }
/* "You are joining" (PRED-416): the club in a green card, its crest, and who invited you */
.join-club {
  display: flex; flex-direction: row; gap: 14px; align-items: flex-start; padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
}
.join-club .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.join-club strong { font: 500 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.jc-chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 4px 10px;
  border-radius: 999px; background: var(--blue-soft); font-size: 13px;
}
.jc-chip .bi { color: var(--blue); }
.jc-chip.ok { background: var(--accent-soft); }
.jc-chip.ok .bi { color: var(--accent); }
.jc-not { margin-top: 6px; color: var(--muted); }
.jc-not form { margin: 0; }
/* A card's padded body under its header band */
.card-pad { padding: 16px 18px; }
/* Flare's own name, kept quiet, at the foot of the club menu and the Me page */
.by-flare {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 12px 16px;
  font-size: 12px; color: var(--muted); border-top: 1px solid var(--line);
}
.by-flare b { font: 400 15px/1 var(--display); letter-spacing: .1em; color: var(--ink); }
.by-flare b span { color: var(--accent); }
/* The footer on signed-out pages, as the public page's (v89 lp-foot), with the privacy link (PRED-158) */
.site-foot { border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.site-foot .container { display: flex; flex-wrap: wrap; gap: 16px; padding-block: 20px 30px; }
.site-foot a { color: var(--muted); }
.site-foot-name { font-weight: 600; color: var(--ink); }
/* The privacy policy's short headings inside each card */
.policy h3 { margin-top: 1rem; }
.policy h3:first-of-type { margin-top: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Crop step: the chosen photo in a circle, with zoom controls under it */
.crop canvas {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: 0 0 0 1px var(--line-2), 0 0 0 6px var(--surface-2);
  cursor: grab;
  touch-action: none;
}
.crop canvas:active { cursor: grabbing; }
.crop canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: 8px; }
.crop-zoom { width: 240px; }
.crop-zoom .form-range { --bs-secondary-bg: var(--line-2); min-height: 44px; }
.crop-zoom .form-range::-webkit-slider-thumb { background-color: var(--accent); }
.crop-zoom .form-range::-moz-range-thumb { background-color: var(--accent); }

/* Predict (PRED-372): one row per match, amber until predicted, green once predicted */
.day-head {
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-3);
}
.pred {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 14px 8px 12px;
  border-top: 1px solid var(--line);
}
.day-head + .pred { border-top: 0; }
.pred:has(.p-status.todo) {
  background: linear-gradient(90deg, var(--amber-soft), transparent 55%);
  box-shadow: inset 4px 0 0 var(--amber);
}
.pred:has(.p-status.done) { box-shadow: inset 4px 0 0 var(--accent); }
/* Who went through a knockout match level after 90 minutes, under the teams (PRED-868) */
.went-thru { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.went-thru .bi { color: var(--accent); }
.p-time {
  font: 500 15px/1 var(--display);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.p-teams { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.teamline { display: flex; align-items: center; gap: 8px; font-weight: 500; min-height: 34px; }

/* A team's crest: its badge, or a shield in its kit colours (PRED-148) */
.crest { width: 26px; height: 26px; flex: none; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.crest.lg { width: 42px; height: 42px; }
.crest.sm { width: 18px; height: 18px; }
.crest text { font: 600 6.6px var(--display); }
img.crest { object-fit: contain; filter: none; }

/* A national team's flag (PRED-149) */
.flag { width: 27px; height: 18px; flex: none; display: block; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.flag.lg { width: 42px; height: 28px; }
.flag.sm { width: 21px; height: 14px; }
.p-steps { display: flex; flex-direction: column; gap: 2px; }

/* The - score + buttons */
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  display: grid;
  place-items: center;
}
@media (hover: hover) { .stepper button:hover { background: var(--surface-3); } }
.stepper button:active { transform: scale(.92); background: var(--surface-3); }
.stepper output {
  width: 26px;
  text-align: center;
  font: 400 24px/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.stepper output.empty { color: var(--muted); }
@media (pointer: coarse) {
  .stepper button { width: 40px; height: 40px; }
  .p-steps { gap: 4px; }
  .teamline { min-height: 42px; }
}

/* A change after kick-off: the buttons go and the row says why */
.p-status { display: none; }
.p-status.locked {
  display: block;
  grid-column: 1 / -1;
  margin: 0;
  color: var(--red);
  font-size: .875rem;
  font-weight: 500;
}
.pred:has(.p-status.locked) .stepper button { visibility: hidden; }

/* Predict's locked match keeps the amber edge (PRED-552); its row is styled with the Fixtures rows below */
.pred.locked { box-shadow: inset 4px 0 0 var(--amber); }
.later-wks { display: flex; justify-content: center; padding: 14px 16px; border-top: 1px solid var(--line); }

/* Predict by group (PRED-591, dashboard v89): matchday heads with column labels, and played rows */
.wc-fx .day-head { display: flex; align-items: center; gap: 8px; }
.dh-live { display: inline-flex; align-items: center; color: var(--amber); }
.dh-live .live-dot, .pw-sum em .live-dot { width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--amber); animation: st-blink 1.4s infinite; }
.dh-cols { margin-left: auto; margin-right: -2px; display: grid; grid-template-columns: 26px 26px 34px; gap: 6px; text-align: center; letter-spacing: .04em; }
.dh-cols em { font-style: normal; }
.pred.wc-res { box-shadow: inset 4px 0 0 var(--o); }
.wc-res .p-time { font-size: 13px; font-weight: 600; }
.wr-sc { display: grid; grid-template-columns: 26px 26px 34px; gap: 6px; align-items: center; align-self: stretch; }
.wr-you, .wr-act { display: grid; grid-template-rows: 1fr 1fr; align-self: stretch; text-align: center; font: 500 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.wr-you i, .wr-act i { display: grid; place-items: center; font-style: normal; }
.wr-you { color: var(--muted); font-size: 15px; }
.wr-sc .wr-pts { min-width: 0; justify-self: stretch; }

/* Fixtures rows (PRED-704, dashboard v96): your score pencilled in, small figures in dashed boxes, so the real score
   leads; a finished match on a light grey tint with the winner in bold, white either side of the line between two
   finished matches and a double rule where a run of them starts; a locked match's padlock under its time and your
   score in the You column (PRED-1007) */
.wr-sc .wr-you { gap: 4px; padding: 2px 0; font: 500 13px/1 var(--display); color: var(--muted); }
.wr-you i { width: 20px; justify-self: center; border: 1px dashed var(--line-2); border-radius: 5px; }
.dh-cols em:first-child { color: var(--muted); }
.pred.wc-res.ft { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); border-top-color: var(--line-2); }
.day-head + .wc-res.ft, .pred:not(.ft) + .wc-res.ft { border-top: 3px double var(--line-2); }
.wc-res.ft + .wc-res.ft { position: relative; margin-top: 5px; border-top: 0; }
.wc-res.ft + .wc-res.ft::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 1px; background: var(--line-2); }
.day-head.played { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.teamline.lost, .wr-act i.lost { color: var(--muted); font-weight: 400; }
.wr-act i.won { font-weight: 600; }
.pred.locked .p-time { gap: 4px; }
.pred.locked .p-time .bi { font-size: 12px; color: var(--muted); }
/* On touch screens the + and - buttons are 40px, so the points chip is too: the final score then sits exactly above
   an open row's number (PRED-705) */
@media (pointer: coarse) {
  .wr-sc, .dh-cols { grid-template-columns: 26px 26px 40px; }
}

/* A match being played (PRED-702, dashboard v95): the minute in amber after a blinking dot, the points on track
   in an outlined chip, and You, Now and Pts on the day's heading */
.pred.wc-res.is-live { box-shadow: inset 4px 0 0 var(--amber); }
.wc-res.is-live .p-time { color: var(--amber); gap: 3px; }
.wc-res.is-live .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: st-blink 1.4s infinite; }
.wr-pts.onit { background: none; box-shadow: inset 0 0 0 1.5px var(--o); color: var(--ink); }
.day-head.has-cols { display: flex; align-items: center; gap: 8px; }
/* Once any result is in, Your score over the + and - buttons on a day's heading, and a slim line of it where a
   labelled day's matches to predict start (PRED-1007, dashboard v182) */
.dh-one { margin-left: auto; margin-right: -2px; width: 106px; text-align: center; }
@media (pointer: coarse) { .dh-one { width: 118px; } }
.day-head.dh-sub { display: flex; padding-block: 3px; }
/* The players' table while matches are played: points on track beside the saved points (PRED-702) */
.pts .on-track, .pw-sum .on-track { margin-left: 3px; font-size: .72em; font-weight: 600; color: var(--amber); }
.pill .live-dot, .seg .live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--amber); animation: st-blink 1.4s infinite; vertical-align: 1px; }

/* A postponed match (PRED-393): a grey pill in place of the buttons, and why */
.pred.is-off { box-shadow: inset 4px 0 0 var(--line-2); }
.pred.is-off .p-teams { color: var(--muted); }
.p-off { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .875rem; }
.o-p { --o: var(--line-2); }
.pw-off, .dm-off { grid-column: span 2; justify-self: center; }

/* Predict: the column headings under this week's summary (PRED-417) */
.fx-h {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; min-height: 28px; padding: 6px 14px 6px 12px;
  background: var(--surface-3); font: 600 11px/16px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.fx-h span:last-child { width: 106px; text-align: center; }
@media (pointer: coarse) { .fx-h span:last-child { width: 118px; } }

/* Predict: the heading where a later game week starts, so it doesn't read as this week's (PRED-405) */
.gw-head {
  padding: 40px 16px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.gw-head h3 { margin: 0; font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }

/* "3 still to predict below": pinned at the bottom while empty matches are further down */
.still-to-predict {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 8px;
  pointer-events: none;
}
.still-to-predict:has(.still-pill[hidden]) { padding: 0; }
.still-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3);
  animation: nudge 1.8s ease-in-out infinite;
}
.still-pill[hidden] { display: none; }
@keyframes nudge { 50% { transform: translateY(2px); } }

/* "Saved as you go" under the fixtures card, on the page's grey in dark text so it stands out
   (PRED-405): reads "Saved" for two seconds after each change */
.saved-line {
  display: grid;
  justify-items: center;
  margin: 0;
  padding: 6px 16px 14px;
}
.saved-note {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.saved-note .bi { color: var(--accent); }
.saved-note.flash { color: var(--accent); font-weight: 600; animation: saved-fade-out 2s forwards; }
.saved-note.flash + .quiet { animation: saved-fade-in 2s forwards; }
@keyframes saved-fade-out { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes saved-fade-in { 0%, 85% { opacity: 0; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .still-pill { animation: none; }
}

/* Results (PRED-66): Super Admin's lists of matches, a band on each card, and the round switch */
.card.flush { overflow: clip; }
.band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.band h2 { margin: 0; font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.band.amber { background: color-mix(in srgb, var(--amber-soft) 85%, var(--surface)); }
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pill.ok { background: var(--accent-soft); color: var(--accent); }
.pill.warn { background: var(--amber-soft); color: var(--amber); }
.pill.bad { background: var(--red-soft); color: var(--red); }
.pill.info { background: var(--blue-soft); color: var(--blue); }
.pill.plain { background: var(--surface-3); color: var(--muted); }
.pill.gold { background: var(--gold-soft); color: var(--gold-ink); }
/* Count bubbles (brand rule 16, PRED-760): one bubble everywhere, 18px with 11px numbers, in three
   tones: red when something needs you, amber when something is waiting, grey for a plain total */
.count-dot, .tab-n, .gb-n, .nav-count, .adm-count, .mm-count, .rq-n, .act-n, .seg-n, .ci-n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font: 600 11px/1 var(--body); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.count-dot, .nav-count, .adm-count, .mm-count { background: var(--red); color: #fff; }
.tab-n, .gb-n { background: var(--amber); color: var(--amber-ink); }
.rq-n, .act-n, .seg-n, .ci-n { border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); }
/* Where a bubble sits: on an icon, over its top-right corner, always by the same amount; after a
   word, 6px after it. Each part of an equal switch is the same width with its word centred. */
.gb-n, .nav-count, .tabbar .nav-count, .hdr-btn .nav-count, .in-admin .tabbar .nav-count { top: -4px; right: -4px; }
.seg a, .topnav a { gap: 6px; }
.seg.eq-seg a { justify-content: center; text-align: center; }
.count-dot {
  vertical-align: middle;
}
.a-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.band + .a-row { border-top: 0; }
@media (hover: hover) { a.a-row:hover { background: var(--surface-2); } }
.a-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task-ico {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--amber-soft); color: var(--amber);
}
.task-ico.plain { background: var(--surface-3); color: var(--muted); }
/* To do lines by kind (PRED-167): people to let in, games to launch, games to finish */
.task-ico.ti-blue { background: var(--blue-soft); color: var(--blue); }
.task-ico.ti-mint { background: var(--accent-soft); color: var(--accent); }
.task-ico.ti-plain { background: var(--surface-3); color: var(--muted); }
.task-ico.ti-amber { background: var(--amber-soft); color: var(--amber); }
.task-ico.ti-gold { background: var(--gold-soft); color: var(--gold-ink); }
.task-ico.ti-red { background: var(--red-soft); color: var(--red); }
.res-nav {
  display: grid; grid-template-columns: 44px minmax(0, 320px) 44px; justify-content: center;
  align-items: center; gap: 10px; margin-bottom: 14px;
}
.res-step {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
}
/* The game week picker: a pill with the game week's name; the real list sits invisibly on top */
.res-pick {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0;
  padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 600 16px/1 var(--body); cursor: pointer;
}
.res-pick .bi { color: var(--muted); font-size: 14px; }
.res-pick select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.res-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A row's button that names where it goes, with a chevron; just the chevron on phones */
.a-go { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 132px; white-space: nowrap; }
.a-go .bi { color: var(--muted); }
@media (max-width: 520px) { .a-go { min-width: 0; } .a-go span { display: none; } }
/* A page's head: Back, then its icon, title and a line under it */
.set-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.back { display: flex; width: fit-content; align-items: center; gap: 4px; margin-bottom: 8px; color: var(--accent); font-weight: 500; padding: 4px 0; text-decoration: none; }
.set-title { display: flex; align-items: center; gap: 12px; }
.set-title .grow { flex: 1; min-width: 0; }
.set-title h1 { margin: 2px 0 0; }
.res-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.band + .res-row { border-top: 0; }
.res-row.open { background: color-mix(in srgb, var(--amber-soft) 35%, var(--surface)); }
.res-teams { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.res-when { font-size: 12px; color: var(--muted); }
.res-score { display: flex; flex-direction: column; align-items: flex-end; }
/* The score buttons line up with the two teams, under the kick-off line (PRED-159) */
.res-row > .p-steps { align-self: flex-end; }
.res-score b { font: 500 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.res-score small { font-size: 11px; color: var(--muted); }
.res-bye { display: flex; gap: 8px; margin: 0; padding: 10px 16px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--muted); }
.res-bye .bi { margin-top: 2px; }
/* Knockout matches on Results (PRED-396): the tick, and who went through a level tie */
.res-ko { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0 16px 10px; font-size: 13px; font-weight: 500; }
.res-ko input { width: 18px; height: 18px; accent-color: var(--accent); }
.res-ko span { flex-basis: 100%; }
.res-tie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 0 16px 12px; }
.res-tie.open { background: color-mix(in srgb, var(--amber-soft) 35%, var(--surface)); padding-top: 10px; }
.res-tie .bi { color: var(--accent); }
.res-tie.open .bi { color: var(--amber); }
.warn-t { color: var(--amber); }
.chase-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--amber);
}
/* The Save bar stays in view at the bottom while there are scores to save */
.save-bar-slot { display: contents; }
.set-bar {
  position: sticky; bottom: 8px; z-index: 5; margin-top: 14px; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: 0 6px 20px rgba(15, 26, 20, .12);
}
.set-bar .grow { flex: 1; }
.set-bar .btn { min-width: 112px; justify-content: center; }
/* The setup bar's line says what needs doing; on phones it hides and Delete, Save and Review share the bar (PRED-633) */
.set-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .set-msg { display: none; }
  .setup-bar .btn { flex: 1 1 0; min-width: 0; --bs-btn-padding-x: .5rem; white-space: nowrap; }
}

/* Admin form fields laid out in a grid: label, box, then a short help line */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 18px; padding: 14px 16px 16px; }
.fx { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fx.wide { grid-column: 1 / -1; }
.fx-lbl { float: none; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.fx-help { display: block; font-size: 12px; color: var(--muted); }
.fx input[type="date"], .fx input[type="time"] { max-width: 220px; }
/* Two or more options as one switch, picked with radio buttons */
.fx-seg { align-self: flex-start; border-radius: var(--r-md); flex-wrap: wrap; }
.fx-seg label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 7px 14px; border-radius: var(--r-sm);
  font-weight: 500; font-size: 14px; color: var(--muted); cursor: pointer;
}
.fx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fx-seg label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.fx-seg label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
/* Setup options share the width equally, each as wide as the longest, centred (PRED-176) */
.seg.fx-seg { border-radius: var(--r-md); }
.seg.eq-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: max-content; max-width: 100%; }
.eq-seg label { justify-content: center; text-align: center; line-height: 1.2; padding: 9px 12px; }
/* The plan now on the Plan tab, three tiles across (PRED-676, v92) */
/* Confirm before the card on file pays (PRED-695, dashboard v94) */
.buy-card { display: grid; gap: 10px; }
.buy-card p { margin: 0; }
.bc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.bc-row span { display: flex; flex-direction: column; gap: 2px; }
.bc-row small { font-size: 12px; color: var(--muted); }
.bc-row b { font-size: 17px; white-space: nowrap; }
.bc-card { display: flex; gap: 6px; align-items: center; }
.plan-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.plan-now div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.plan-now span, .plan-now small { font-size: 12px; color: var(--muted); }
.plan-now b { font-size: 15px; overflow-wrap: anywhere; }
.plan-bill { display: flex; gap: 6px; align-items: baseline; margin: 0 0 12px; overflow-wrap: anywhere; }
/* Club, Info's Type switch: as wide as the line above it, three equal parts (PRED-677, v92) */
.seg.eq-seg.seg-full { width: 100%; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Stacked on a phone, a switch is a rounded box with full-width choices, well spaced (PRED-624, dashboard v84) */
@media (max-width: 640px) {
  .seg.eq-seg.seg-stack { grid-auto-flow: row; width: 100%; border-radius: var(--r-md); padding: 4px; gap: 4px; }
  .seg.eq-seg.seg-stack label { border-radius: var(--r-sm); min-height: 44px; }
}
/* Two choices as tiles the same size, side by side: icon, title and one line (PRED-489) */
.ez-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ez-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 104px;
  padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
}
.ez-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ez-tile > .bi { font-size: 20px; color: var(--accent); }
.ez-tile b { font-size: 14px; line-height: 1.2; }
.ez-tile span { font-size: 12px; color: var(--muted); }
.ez-tile:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); }
.ez-tile:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
.gr-save { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 16px; }

/* Your competitions and game setup (PRED-172, dashboard v46) */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 14px 16px; }
.type-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: inherit; text-decoration: none;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
@media (hover: hover) { .type-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--accent); } }
.type-card strong { font: 500 18px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin-top: 4px; }
.type-card > span:last-child { font-size: 13px; color: var(--muted); }
.pz-ico.lg-ico { width: 44px; height: 44px; border-radius: var(--r-md); font-size: 20px; }
/* Your competitions (PRED-168): one row per game, grouped; the whole row opens the game */
.comp-row {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 64px 132px 200px; align-items: center;
  column-gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line);
}
/* Games getting ready, on the warm paper of Home's Also open to you (PRED-624, dashboard v84) */
.comp-row.is-prep { background: var(--paper); }
.comp-row.c-head { padding-block: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.comp-row .grow { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.comp-row .c-name { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.comp-row strong { overflow-wrap: anywhere; }
.c-players { display: flex; flex-direction: column; line-height: 1.1; }
.c-players b { font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.c-players span { font-size: 12px; color: var(--muted); }
.c-status { display: flex; align-items: center; }
.c-acts { position: relative; z-index: 2; display: flex; justify-content: flex-end; gap: 6px; }
.c-acts .btn { white-space: nowrap; }
@media (hover: hover) { .comp-row:not(.c-head):not(.is-off):hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); } }
.fx-note { margin: 0; padding: 10px 16px 14px; }
/* Phones and tablets: the pill in the top corner beside the type line, the name across the tile */
@media (max-width: 860px) {
  .comp-row { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 8px; }
  .comp-row.c-head { display: none; }
  .comp-row > .pz-ico { grid-row: span 2; align-self: start; }
  .comp-row > .grow { grid-column: 2 / -1; }
  .comp-row .gr-kind { padding-right: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .comp-row.st-ready .gr-kind, .comp-row.st-off .gr-kind { padding-right: 132px; }
  .c-status { position: absolute; top: 10px; right: 16px; }
  .c-players { grid-column: 2; grid-row: 2; flex-direction: row; align-items: baseline; gap: 4px; }
  .c-players b { font-size: 17px; }
  .c-acts { grid-column: 3; grid-row: 2; }
}
@media (max-width: 620px) { .c-lbl { display: none; } }
/* A deleted game, switched off until it is removed for good or restored (PRED-184) */
.comp-row.is-off .pz-ico, .comp-row.is-off strong { opacity: .5; }
.bad-t { color: var(--red); }
.setup-secs { display: flex; flex-direction: column; gap: 14px; }
/* The waitlist's automatic moving up only matters with the waitlist on (PRED-433) */
.fx-grid:has(input[name="waitlist"][value="False"]:checked) .wait-auto { display: none; }
.fx-grid:not(:has(select[name="pay_into"] option[value="one_off"]:checked)) .pay-one-off { display: none; }
/* A money box: the money sign in front of the number (PRED-84) */
.fx-money { display: flex; align-items: center; max-width: 180px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.fx-money b { display: grid; place-items: center; align-self: stretch; padding: 0 10px; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.fx-money .form-control { border: 0; border-radius: 0; min-width: 0; }
/* The game code in the setup's Entry section, made by the site (PRED-205) */
.code-tag { align-self: flex-start; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--line-2); font: 600 15px/1 var(--body); letter-spacing: .06em; }
/* Fields that follow the football competition picked, swapped in on their own */
.start-fields { display: contents; }
.form-card .band { background: var(--surface-2); }
.step-n {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: 600 13px/1 var(--body); letter-spacing: 0; vertical-align: 1px;
}
.sec-intro { margin: 0; padding: 10px 16px 0; }
/* Setup in two views, Simple and Advanced (PRED-490, dashboard v64) */
.ez-views { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 14px; padding: 3px; border-radius: 999px; background: var(--surface-3); }
.ez-views button { min-height: 40px; padding: 9px; border: 0; border-radius: 999px; background: none; font: 600 14px/1 var(--body); color: var(--muted); cursor: pointer; }
.ez-views button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.ez-simple { margin-bottom: 14px; padding: 16px; }
.ez-simple.is-wait { opacity: .55; }
.ez-off { display: block; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--faint); font-size: 14px; }
/* Start from: a new game's required choice, a sideways row of cards (PRED-492) */
.ez-from { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 14px; }
.ez-from-head { display: flex; align-items: center; justify-content: space-between; }
.ez-cards { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; scrollbar-width: thin; }
.ez-card {
  display: flex; flex: none; flex-direction: column; gap: 4px; width: 150px; min-height: 84px; padding: 12px; scroll-snap-align: start;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: inherit; text-decoration: none;
}
.ez-card b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ez-card b .bi { color: var(--accent); }
.ez-card span { font-size: 12px; color: var(--muted); }
.ez-card[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); }
/* Ask players: a dashed card, as it opens a poll rather than a setup (PRED-576) */
.ez-card.ask { border-style: dashed; }
.ez-chosen.none { color: var(--amber); font-weight: 600; }
.ez-chosen.none .bi { color: var(--amber); }
.ez-from .ez-chosen, .ez-from .ez-links { margin: 0; }
.ez-simple .fx-grid { padding: 0; }
.ez-chosen { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 14px; }
.ez-chosen .bi { color: var(--accent); }
.ez-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; }
.ez-model-link { margin: -6px 0 14px; }
.ez-model-link a, .ez-links a { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ez-kind { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* The checklist: one row a section, its number white while something is needed, solid green once ready */
.ez-list { display: flex; flex-direction: column; margin-bottom: 14px; }
.ez-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; border-top: 1px solid var(--line);
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ez-row:first-child { border-top: 0; }
.ez-row .grow { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ez-row .grow b { font-size: 15px; }
.ez-row .grow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-row > .bi { color: var(--muted); }
.ez-row .step-n { flex: none; margin-right: 0; }
.from-tag { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.step-n.todo { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
/* One section on its own page: back to the checklist, the numbers along the top, then Next */
.ez-page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.ez-page-head .back { border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; }
.ez-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.ez-strip .step-n { width: 32px; height: 32px; margin: 0; border: 0; font-size: 14px; cursor: pointer; }
.ez-strip .step-n.cur { outline: 2px solid var(--accent); outline-offset: 2px; }
.ez-next { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 14px; }
/* The prize split: one row, opening two tiles moved 5% at a time (PRED-491) */
.split-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface); font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.split-row .grow { flex: 1; font-size: 13px; }
.split-row b { font: 600 20px/1 var(--display); white-space: nowrap; }
.split-row > .bi { color: var(--muted); }
.split-row.is-need { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.split-row.is-need .grow { color: var(--amber); font-weight: 600; }
/* Clean slate: Flare's suggestion under a question still to answer (PRED-493) */
.fx-suggest { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--accent); }
.ez-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; padding: 16px; }
.ez-note > .bi { font-size: 22px; color: var(--accent); }
.ez-note .grow { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 200px; }
.split-pop { width: calc(100% - 32px); max-width: 440px; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.split-pop::backdrop { background: rgba(5, 12, 10, .55); }
.split-head { padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.split-head h2 { margin: 2px 0 0; font: 500 18px/1.05 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.split-main { padding: 14px 18px; }
.split-main > p { margin: 0 0 12px; }
.split-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); }
.split-fixed { display: inline-flex; align-items: center; min-height: 36px; margin-top: 4px; text-decoration: none; }
.ez-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ez-duo > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; border-radius: var(--r-md); text-align: center; }
.ez-duo .ez-p { background: var(--accent); color: var(--accent-ink); }
.ez-duo .ez-c { background: var(--surface-3); }
.ez-duo .k { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.ez-duo .v { font: 600 40px/1 var(--display); }
.ez-duo small { font-size: 12px; opacity: .85; }
.ez-stepper { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.ez-stepper .small { flex: 1; text-align: center; }
.form-card { scroll-margin-top: 84px; }
/* Prize blocks: places paid with minus and plus buttons, then a share for each place (PRED-74, dashboard v33) */
.pl-grid { padding-top: 0; }
.pl-box { gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.pl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pl-count { display: flex; align-items: center; gap: 8px; }
.pl-count b { min-width: 20px; text-align: center; font: 400 22px/1 var(--display); }
.pl-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; }
.pl-row { display: flex; flex-direction: column; gap: 6px; }
.pl-row label { font-size: 13px; font-weight: 600; }
.pl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pl-none { margin: 0; }
/* A place paid as a card (PRED-778, dashboard v116): rosette and name, then its money, its prize
   item or both, each with a remove, and + Money or + Prize item */
.pc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.place-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
.pc-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.pc-head .grow { flex: 1; }
.pc-part { display: grid; grid-template-columns: 18px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.pc-part > .bi { color: var(--muted); }
.pc-each { margin: 0; }
.pc-part .sh-in, .pc-part .fx-money { max-width: none; }
/* A place's bonus money: a gold plus, "Bonus", its whole-pounds box and its remove (PRED-922) */
.pc-bonus { grid-template-columns: 18px auto minmax(0, 1fr) 44px; }
.pc-part.pc-bonus > .bi { color: var(--gold-ink); }
.pc-bonus label { font-size: 13px; color: var(--muted); }
.pc-was { font-size: 12px; color: var(--muted); }
.add-row { display: flex; flex-wrap: wrap; gap: 4px 18px; }
/* Extra prizes: the share shows only while the prize is switched on (PRED-75) */
.pl-extra:not(:has(.sw-check:checked)) .if-on { display: none; }
#sx-prizes:not(:has(input[name="jackpot-on"]:checked)) .if-jackpot { display: none; }
.pl-note { flex-direction: row; gap: 6px; margin: 0; color: var(--accent); }
.tb-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; }
.tb-btn:disabled { opacity: .35; cursor: default; }
.link-btn { border: 0; background: none; padding: 0; min-height: 32px; font: 600 13px/1 var(--body); color: var(--accent); text-decoration: underline; cursor: pointer; }
/* A share box: the amount, then % or the money sign */
.sh-in { display: flex; align-items: stretch; gap: 6px; max-width: 240px; }
.sh-in .form-control { flex: 1; min-width: 0; }
.sh-unit { display: flex; padding: 2px; border-radius: var(--r-sm); background: var(--surface-3); }
.sh-unit button { min-width: 40px; border: 0; border-radius: calc(var(--r-sm) - 2px); background: none; font: 600 14px/1 var(--body); color: var(--muted); cursor: pointer; }
.sh-unit button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
/* A note above the setup, such as that the game has started (PRED-81) */
.start-card {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.start-card > .bi { font-size: 22px; color: var(--accent); }
.start-card .grow { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
/* "Launch <name>?": the setup in plain sentences, every setting folded away (PRED-179) */
.story-lead { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.story-sec + .story-sec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.story-sec h2, .sum-sec h3 { margin: 0 0 6px; font: 600 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.story-sec p { margin: 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
/* Tell members about it (PRED-183): the picking shows only with Choose members */
.notify { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.notify .seg { margin-bottom: 10px; }
.notify:not(:has([name="tell"][value="some"]:checked)) :is(.not-pick, .not-list) { display: none; }
.not-pick { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.not-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px;
  max-height: 220px; overflow-y: auto; padding: 2px; margin-bottom: 10px;
}
.not-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 14px; cursor: pointer; }
.not-row[hidden] { display: none; }
@media (hover: hover) { .not-row:hover { background: var(--surface-2); } }
.not-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.notify .not-sum { margin: 0 0 12px; }
.not-mail {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; font-size: 14px;
  border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--surface-2);
}
.story-all { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.story-all summary { cursor: pointer; font-weight: 600; color: var(--accent); min-height: 32px; }
.sum-sec { margin-top: 12px; }
.sum-sec + .sum-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sum-sec dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.sum-sec dt { color: var(--muted); font-weight: 400; }
.sum-sec dd { margin: 0; font-weight: 600; text-align: right; text-wrap: balance; }
/* Each section of Every setting opens its part of the setup (PRED-624, dashboard v84) */
.sum-go { display: block; margin-inline: -8px; padding: 6px 8px; border-radius: var(--r-sm); color: inherit; text-decoration: none; }
.sum-go:hover { color: inherit; }
.sum-go:focus-visible { background: var(--surface-2); color: inherit; }
@media (hover: hover) { .sum-go:hover { background: var(--surface-2); } }
.sum-go h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sum-chg { display: inline-flex; align-items: center; gap: 3px; font: 600 12px/1 var(--body); color: var(--accent); text-transform: none; letter-spacing: 0; }
.sum-chg .bi { font-size: 12px; line-height: 1; }
.sum-go.is-back { background: var(--accent-soft); }
.modal-note { display: flex; gap: 8px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
/* "Start from an earlier game?": one choice each, a real radio button drawn as a ring (PRED-182) */
.start-opts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.start-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line-2);
  border-radius: var(--r-md); background: var(--surface); cursor: pointer;
}
.start-opt input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; border: 2px solid var(--line-2); }
.start-opt input:checked { border: 5px solid var(--accent); }
.start-opt input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.start-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); }
.start-opt .grow { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; min-width: 0; }
.start-opt .grow .pill { margin-bottom: 2px; }
/* A setting fixed now the game has started: its value, locked, and why (PRED-81) */
.fx-val {
  display: flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px dashed var(--line-2);
  border-radius: var(--r-sm); background: var(--surface-2); font-size: 15px; color: var(--ink);
}
.fx-val > .bi { flex: none; margin-top: 3px; color: var(--muted); }
.stage-card { background: var(--surface-2); border-color: var(--line-2); }
.stage-card > .bi { color: var(--muted); }
/* A setup field with a problem, and room above it for the header when the cursor goes to it (PRED-177) */
.fx :is(input, select)[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); background: var(--red-soft); }
.form-card :is(input, select) { scroll-margin-top: 96px; }
/* How long a predictor game runs: only the number for the chosen ending shows */
.len-box .if-len { display: none; }
.len-box:has(input[value="weeks"]:checked) .if-weeks,
.len-box:has(input[value="matches"]:checked) .if-matches,
.len-box:has(input[value="target"]:checked) .if-target { display: flex; }
.fx-toggle {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
}
/* A tick box drawn as an on/off switch, for forms that save with one button */
.sw-check {
  appearance: none; margin: 0; width: 46px; height: 28px; border-radius: 14px; background: var(--surface-3); position: relative; flex: none;
  box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background .15s;
}
.sw-check::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s;
}
.sw-check:checked { background: var(--accent); }
.sw-check:checked::before { transform: translateX(18px); }
.sw-check:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* A match's details on the Results page (PRED-392): a grey panel under its row */
.res-more { border-top: 1px dashed var(--line-2); background: var(--surface-2); }
.res-more .fx-grid { padding-bottom: 10px; }
.res-more .form-control, .res-more .form-select { background-color: var(--surface); }
.res-more:has(input[value="off"]:checked) .if-on,
.res-more:not(:has(input[value="off"]:checked)) .if-off { display: none; }

/* The double points banker (PRED-70): a star under each match's time, and the line explaining it */
.p-time { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.banker-star {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 0; background: none; color: var(--faint);
}
.banker-star[aria-pressed="true"] { color: var(--gold); }
@media (hover: hover) { .banker-star:hover { color: var(--gold); } }
.banker-note { font-size: .875rem; color: var(--muted); }
.banker-note .bi { color: var(--gold); }
/* A refused banker tap: the row says why, and its score buttons stay */
.p-status.warn {
  display: block; grid-column: 1 / -1; margin: 0; color: var(--amber); font-size: .875rem; font-weight: 500;
}

/* Segmented switches */
.seg { display: inline-flex; background: var(--surface-3); border-radius: 999px; padding: 3px; gap: 2px; }
.seg a, .seg button {
  padding: 7px 14px; border-radius: 999px; font-weight: 500; font-size: 14px;
  color: var(--muted); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center;
}
/* A choice saved by a form, such as Appearance (PRED-194): buttons look like the links */
.seg button { justify-content: center; border: 0; background: none; font-family: var(--body); cursor: pointer; }
.seg a[aria-current="page"], .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
@media (hover: hover) { .seg a:not([aria-current="page"]):hover, .seg button:not([aria-pressed="true"]):hover { color: var(--ink); } }

/* Standings (PRED-134): your position strip, then My predictions and Overall side by side on desktop */
.tables { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.mobile-tabs { display: flex; justify-content: center; }
.pane[hidden] { display: none; }
@media (min-width: 900px) {
  .tables { grid-template-columns: minmax(320px, 400px) 1fr; column-gap: var(--table-gap); }
  .tables .span { grid-column: 1 / -1; }
  /* With mini groups, My predictions sits under the Mini group card and Overall runs down beside both (PRED-703) */
  .tables.has-mine { grid-auto-flow: row dense; }
  .tables.has-mine .hist-card { grid-column: 1; }
  .tables.has-mine .all-card { grid-column: 2; grid-row: span 2; }
  .mobile-tabs { display: none; }
  .pane[hidden] { display: flex !important; }
  .tables .pane > .pane-head { min-height: 60px; justify-content: center; }
}

.me-strip {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pos btns" "facts facts";
  align-items: center; gap: 12px 16px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.ms-pos { grid-area: pos; display: flex; flex-direction: column; gap: 4px; }
.ms-pos b { font: 300 36px/.9 var(--display); text-transform: uppercase; color: var(--gold-ink); }
.ms-pos span { color: var(--muted); font-weight: 500; font-size: 13px; }
.ms-facts {
  grid-area: facts; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface-2); border-radius: var(--r-md); padding: 10px 0;
}
/* How many facts the strip holds: a class, as the Content Security Policy blocks inline styles */
.ms-facts.n1 { grid-template-columns: 1fr; }
.ms-facts.n2 { grid-template-columns: repeat(2, 1fr); }
.ms-facts.n3 { grid-template-columns: repeat(3, 1fr); }
.ms-facts div { display: flex; flex-direction: column; align-items: center; gap: 3px; border-left: 1px solid var(--line-2); }
.ms-facts div:first-child { border-left: 0; }
.ms-facts b { font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.ms-facts span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 900px) {
  .me-strip { grid-template-columns: auto minmax(0, 460px) 1fr; grid-template-areas: "pos facts btns"; gap: 24px; }
}

/* A card's header: a soft glow of its colour (mint for overall, blue for history) */
.tbl-card { border-color: var(--line-2); box-shadow: var(--sh-2); --k: var(--faint); }
.all-card { --k: var(--accent); }
.hist-card { --k: var(--blue); }
.pane-head {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: radial-gradient(90% 180% at 0 0, color-mix(in srgb, var(--k) 18%, transparent), transparent 72%);
}
.pane-head .row1 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.pane-title { font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; margin: 0; white-space: nowrap; }
/* Site Admin, Support: "Tickets from every club" centred on phones (PRED-636) */
@media (max-width: 575.98px) { .team-tickets .row1 { justify-content: center; } }
@media (max-width: 899px) { .tbl-card .pane-title { display: none; } }
.more { color: var(--accent); font-weight: 500; font-size: 14px; white-space: nowrap; text-decoration: none; }
.pw-sum { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; }
.pw-sum b { font: 400 26px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-sum span { font-size: 13px; color: var(--muted); }

/* Table rows: position, player, points */
.tbl { font-variant-numeric: tabular-nums; }
.tr {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 42px; align-items: center; gap: 6px;
  padding: 0 14px; min-height: 40px; border-top: 1px solid var(--line);
}
.tr.alt { background: var(--alt); }
.tr.me { background: var(--accent-soft); }
@media (hover: hover) { .tr:not(.th):hover { background: var(--surface-3); } }
.tr.th {
  min-height: 30px; border-top: 0; background: var(--surface-2); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.tr .pts { text-align: right; font: 400 17px/1 var(--display); }
.tr.th .pts { font: 600 11px/1 var(--body); color: var(--faint); }
.rank b { font: 500 16px/1 var(--display); }
.tr.me .rank b, .tr.me .pts { color: var(--accent); }
.player { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
.player .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr.me .player .t { font-weight: 600; }
.tbl .avatar { width: 24px; height: 24px; font-size: 11px; }
.tr.gap {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  border-top: 1px dashed var(--line-2); color: var(--accent); font: 500 13px/1 var(--body); text-decoration: none;
}

/* Today's games (PRED-197): narrow cards in a row that scrolls sideways, as dashboard v78 */
.today { margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.td-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
.td-lbl { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.td-count, .td-live { font: 600 11px/1 var(--body); color: var(--amber); }
.td-count::before, .td-live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%;
  background: var(--amber); vertical-align: 1px;
}
.td-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 3px 1px 5px; }
/* Centred when they all fit; when they don't, the row still scrolls from its first card */
.td-row > :first-child { margin-left: auto; }
.td-row > :last-child { margin-right: auto; }
.td {
  flex: none; width: 128px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px;
  scroll-snap-align: start; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--sh-1);
  transition: transform .18s, box-shadow .18s;
}
a.td:hover { color: var(--ink); }
@media (hover: hover) { a.td:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } }
.td.is-live { border-color: color-mix(in srgb, var(--amber) 45%, var(--line-2)); }
.td-when { font: 600 11px/1 var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.td-t { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; font-size: 13px; }
.td-t b { font-weight: 600; letter-spacing: .04em; }
.td-t em { font: 500 17px/1 var(--display); font-style: normal; font-variant-numeric: tabular-nums; }
.td .crest, .td .flag { width: 18px; height: 18px; }
.td .flag { height: 12px; }
.td-wait { --o: var(--muted); } .td-need { --o: var(--amber); }
.td-you {
  margin-top: 2px; padding: 3px 0 0 7px; border-left: 3px solid var(--o);
  font-size: 11px; color: var(--muted); white-space: nowrap;
}

/* My predictions: outcome counts, then one row per game week */
.o-e { --o: var(--pt-e); --oi: var(--pti-e); } .o-g { --o: var(--pt-g); --oi: var(--pti-g); }
.o-r { --o: var(--pt-r); --oi: var(--pti-r); } .o-w { --o: var(--pt-w); --oi: var(--muted); }
.ps { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ps-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ps-cell {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: var(--r-sm); background: var(--surface-2);
}
.ps-cell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--o); }
.ps-cell.o-w::before { background: none; border-bottom: 1.5px dashed var(--o); }
.ps-cell b { font: 300 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.ps-cell span { font-size: 11px; line-height: 1.25; color: var(--muted); text-wrap: balance; }
.ps-cell em { font-style: normal; font-weight: 600; color: var(--ink); }
.wk {
  display: grid; grid-template-columns: 48px 1fr 60px 16px; align-items: center; gap: 10px;
  padding: 9px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.wk:first-child { border-top: 0; }
.wk:nth-of-type(even) { background: var(--alt); }
@media (hover: hover) { .wk:hover { background: var(--surface-3); } }
.wk.open { background: var(--surface-3); }
.wk-chev { color: var(--faint); transition: transform .2s; }
.wk.open .wk-chev { transform: rotate(180deg); }
.wk-hint { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--line); }

/* Outcome colours on each week (PRED-147): a bar per match, and the week's matches when it is open */
.pips { display: flex; gap: 3px; max-width: 320px; }
.pips i { flex: 1; height: 8px; border-radius: 2px; background: var(--o); }
.pips i.o-w { background: none; box-shadow: inset 0 0 0 1.5px var(--o); }
/* A week under way (PRED-201, dashboard v58): an outlined bar per match still to play, and a note */
.wk-mid { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pips i.nx { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
/* A match being played (PRED-473): a soft fill in the colour it is on track for, outlined and blinking; not counted yet */
.pips i.live { background: color-mix(in srgb, var(--o) 35%, transparent); box-shadow: inset 0 0 0 1.5px var(--o); animation: st-blink 2.4s ease-in-out infinite; }
.dm.is-live .dm-pts { background: none; border: 1px dashed var(--o); color: var(--ink); }
.dm.is-live .dm-act small { margin-left: 4px; font: 600 11px/1 var(--body); color: var(--amber); }
.wk-pts .on-track { font-size: .6em; font-weight: 600; color: var(--amber); }
.cs-live { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-weight: 600; color: var(--amber); }
.cs-live .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: st-blink 1.4s infinite; }
.wk-note { font-size: 11px; font-weight: 600; color: var(--amber); }
.dm.is-next { color: var(--muted); }
.dm.is-next .dm-you { border-color: var(--line-2); background: none; }
.dm.is-next .dm-act small { font: 500 11px/1 var(--body); }
.dm.is-next .dm-pts { background: none; color: var(--faint); }
/* Each bar's match card, shown when pointed at (no JavaScript); phones open the week instead */
.pips i { position: relative; }
.mt-card { display: none; font-style: normal; }
@media (hover: hover) {
  .pips i:hover .mt-card {
    display: flex; flex-direction: column; gap: 10px; position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20;
    min-width: 210px; padding: 12px 14px; transform: translateX(-50%); color: var(--ink); text-align: left;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-2);
  }
}
.mt-teams { display: flex; align-items: center; gap: 6px; font: 500 13px/1 var(--body); white-space: nowrap; }
.mt-teams em { font-style: normal; color: var(--faint); }
.mt-row { display: flex; align-items: center; gap: 14px; }
.mt-s { display: flex; flex-direction: column; gap: 4px; }
.mt-s em { font: 600 11px/1 var(--body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mt-s b { font: 400 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.mt-s + .mt-s b { color: var(--muted); }
.mt-pts {
  margin-left: auto; min-width: 34px; padding: 7px 0; text-align: center; border-radius: var(--r-sm);
  background: var(--o); color: var(--oi); font: 600 17px/1 var(--display);
}
.mt-pts.o-w { background: none; box-shadow: inset 0 0 0 1.5px var(--o); color: var(--muted); }
.mt-lbl { padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.wk-detail { background: var(--surface); border-top: 1px solid var(--line); box-shadow: inset 0 3px 6px -4px rgba(0, 0, 0, .15); }
.dm {
  display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px 32px; align-items: center; gap: 8px;
  padding: 7px 14px; border-top: 1px solid var(--line); font-size: 13px;
}
.dm-head { border-top: 0; padding: 6px 14px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.dm-head span:not(:first-child) { text-align: center; }
.dm-teams { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; }
.dm-teams > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A knockout match's teams with who went through under them (PRED-868) */
.dm-m { display: grid; gap: 2px; min-width: 0; }
.dm-you {
  text-align: center; font: 500 16px/1 var(--display); padding: 5px 0; border-radius: var(--r-xs);
  border: 2px solid var(--o); background: color-mix(in srgb, var(--o) 16%, transparent);
}
.dm-act { text-align: center; font: 500 16px/1 var(--display); color: var(--muted); }
.dm-pts {
  justify-self: center; min-width: 26px; padding: 5px 6px; border-radius: var(--r-xs); text-align: center;
  font: 600 13px/1 var(--display); background: var(--o); color: var(--oi);
}
.dm.o-w .dm-pts { background: none; box-shadow: inset 0 0 0 1.5px var(--o); color: var(--muted); }
.wk-lbl { font: 500 15px/1 var(--display); letter-spacing: .04em; color: var(--muted); }
.wk-pts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font: 400 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.wk-pts .bi { font-size: 12px; color: var(--gold); }
/* Brand rule 20 (PRED-765): one empty-state line, muted and small, saying what will show there
   and how to add it */
.empty-note { margin: 0; padding: 16px 18px; font-size: 14px; color: var(--muted); }
.empty-note .bi { margin-right: 4px; }


/* Overall table columns (PRED-136): Pld, Ex, GD, Res, Gls and vs actual from 640px wide */
.tr .opt { display: none; }
.tr .n { text-align: right; font-size: 14px; color: var(--muted); }
.tr.th .n { font: 600 11px/1 var(--body); color: var(--faint); }
@media (min-width: 640px) {
  .tr.wide { grid-template-columns: 52px minmax(0, 1fr) 60px repeat(5, 40px) 80px 44px; }
  .tr.wide .opt { display: block; }
  .tr.wide.has-picks { grid-template-columns: 52px minmax(0, 1fr) 60px repeat(5, 40px) 80px 44px 44px; }
}
/* A game with tournament picks has a Picks column, on phones too (PRED-868) */
.tr.has-picks { grid-template-columns: 52px minmax(0, 1fr) 44px 42px; }
.tp-tip { margin: 0; padding: 0; text-decoration: underline dotted; }
.tp-tip::after { left: auto; right: 0; transform: none; }
.tbl-foot { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
@media (max-width: 639px) { .tbl-foot { display: none; } }

/* vs actual: green within 5, amber within 15, red beyond; the bar grows left (too few) or right (too many) */
.gg { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.gg-bar { position: relative; flex: none; width: 34px; height: 6px; border-radius: 3px; background: var(--surface-3); }
.gg-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--faint); }
.gg-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--gg); }
.gg-bar i.under { right: 50%; }
.gg-bar i.over { left: 50%; }
.gg b { min-width: 28px; text-align: right; font: 500 15px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--gg); }
.gg-near { --gg: var(--accent); } .gg-mid { --gg: var(--amber); } .gg-far { --gg: var(--red); }
.gg-w0 { width: 0; } .gg-w1 { width: 5%; } .gg-w2 { width: 10%; } .gg-w3 { width: 15%; }
.gg-w4 { width: 20%; } .gg-w5 { width: 25%; } .gg-w6 { width: 30%; } .gg-w7 { width: 35%; }
.gg-w8 { width: 40%; } .gg-w9 { width: 45%; } .gg-w10 { width: 50%; }

/* Table style (PRED-145): movement beside the rank, form bars, and the gold line under the prize places */
.rank { display: flex; align-items: center; gap: 5px; }
.rank b { min-width: 18px; }
.mv { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; font-weight: 600; line-height: 1; }
.mv i { font-size: 11px; line-height: 1; }
.mv.up { color: var(--accent); } .mv.down { color: var(--red); }
.form { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.form i { width: 6px; border-radius: 2px; background: var(--accent); opacity: .35; }
.form i:last-child { opacity: 1; }
/* A form bar's height in steps, as the Content Security Policy blocks inline styles */
.fh0 { height: 3px; } .fh1 { height: 5px; } .fh2 { height: 7px; } .fh3 { height: 9px; }
.fh4 { height: 11px; } .fh5 { height: 12px; } .fh6 { height: 14px; } .fh7 { height: 16px; }
.fh8 { height: 18px; } .fh9 { height: 20px; } .fh10 { height: 22px; }
.zone { height: 0; border-top: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); }

/* My stats (PRED-137): a button on the position strip opens the panel under it */
.ms-btns { grid-area: btns; justify-self: end; display: flex; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
  color: var(--muted); font-weight: 500; font-size: 13px; text-decoration: none;
}
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
@media (hover: hover) { .chip:not([aria-current="true"]):hover { border-color: var(--faint); color: var(--ink); } }
.ms-panel { padding: 16px; }
/* The prizes panel players see (PRED-143, dashboard v33) */
.pz-panel { padding: 0; }
.pz-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.pz-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pz-facts span { display: flex; flex-direction: column; background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 10px; font-size: 11px; color: var(--muted); font-weight: 500; }
.pz-facts b { font: 400 20px/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pz-rows { display: flex; flex-direction: column; }
.pz-row { display: grid; grid-template-columns: 1fr 44px 70px; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pz-row:first-child { border-top: 0; }
.pz-row em { font-style: normal; color: var(--muted); font-size: 12px; }
.pz-row b { text-align: right; font: 500 18px/1 var(--display); font-variant-numeric: tabular-nums; }
/* Players' prize cards (PRED-778, dashboard v116): rosette, the place, the money large in gold,
   the prize item, and what the money is */
.podium-cards { display: grid; gap: 8px; }
.pod { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); }
.pod.first { background: var(--gold-soft); }
.pod-what { display: grid; gap: 3px; font-size: 14px; }
.pod-place { font-size: 12px; color: var(--muted); }
.pod-what b { font: 400 22px/1 var(--display); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.gift-line { display: flex; gap: 6px; align-items: baseline; font-weight: 600; }
.gift-line .bi { color: var(--gold-ink); }
/* A cup's prize wins the trophy, drawn the rosette's size (PRED-819) */
.pod .trophy, .pc-head .trophy { font-size: 20px; width: 20px; justify-content: center; }
.pc-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); color: var(--muted); font: 600 11px/1 var(--body); }
.pz-row .text-body-secondary { text-align: right; font-size: 12px; }
/* A finished game's winners on Standings (PRED-88) */
.win-row { grid-template-columns: 1fr auto 70px; }
.win-row .player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.win-card .band h2 .bi { color: var(--gold); }
/* The Club Admin's Prizes tab: winners with a Paid switch (PRED-89) */
.prize-row .pay-who { flex: 1; min-width: 0; }
.prize-row .pz-amt { font: 500 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.pz-mail { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unpaid-win { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; padding-left: 46px; }
/* A winner's prize page: choose how, the steps, and how far it has got (PRED-170, dashboard v47) */
.claim-page { display: grid; gap: 16px; align-items: start; margin-top: 16px; }
.claim-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 900px) { .claim-page { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; } .claim-side { position: sticky; top: 84px; } }
.claim-sum { display: flex; flex-direction: column; gap: 14px; }
.claim-amt { display: flex; align-items: center; gap: 14px; }
.claim-amt b { font: 400 44px/1 var(--display); color: var(--gold-ink, var(--gold)); }
.claim-amt span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.claim-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.claim-track li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.claim-track li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); font: 600 12px/1 var(--body); background: var(--surface); }
.claim-track li.on { color: var(--ink); font-weight: 500; }
.claim-track li.on span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.claim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Each way's icon and heading centred in its box (PRED-626) */
.claim-opt { align-items: center; text-align: center; }
.claim-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.claim-steps { display: flex; flex-direction: column; gap: 12px; }
.claim-msg { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-2); font: 400 14px/1.5 var(--body); white-space: pre-wrap; color: var(--ink); }
.claim-copy, .claim-change { align-self: flex-start; }
.claim-cs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.claim-c { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-decoration: none; }
.claim-c .grow { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.claim-c .grow span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.claim-c > .bi:first-child { color: var(--accent); font-size: 20px; }
@media (hover: hover) { .claim-c:hover { border-color: var(--accent); } }
/* Brand rule 3 (PRED-729): every message box is one notice, drawn as the dashboard's .j-note:
   a soft fill, the icon first in the tone's colour, then the words in one span.
   Tones: info (blue), warn (amber), ok (green), bad (red, also errors that stop a form); plain is grey. */
.note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); font-size: 13px; }
.note > .bi { flex: none; margin-top: 1px; color: var(--muted); }
.note.info { background: var(--blue-soft); }
.note.info > .bi { color: var(--blue); }
.note.warn { background: var(--amber-soft); }
.note.warn > .bi { color: var(--amber); }
.note.ok { background: var(--accent-soft); }
.note.ok > .bi { color: var(--accent); }
.note.bad { background: var(--red-soft); }
.note.bad > .bi { color: var(--red); }
/* Home: a prize to claim, under the headline (PRED-170) */
/* Home's prize card (PRED-170): one row, as Bootstrap's .card would stack it; a big trophy and the amount large in gold
   beside it (PRED-698, dashboard v98) */
.h-prize { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; color: var(--ink); text-decoration: none; border-left: 3px solid var(--gold); }
.h-prize .pz-ico { width: 46px; height: 46px; font-size: 22px; border-radius: var(--r-md); }
.h-prize .grow { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.h-prize b { font-weight: 600; }
.hp-amt { font: 400 26px/1 var(--display); color: var(--gold-ink); }
.h-prize.live { background: var(--poll-warm); }
/* The Club Admin's Groups tab: status, steps, how many groups and the board (PRED-95, dashboard v33) */
.gb-status { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); font-size: 14px; }
.gb-status > .bi { color: var(--amber); margin-top: 2px; }
.gb-status.ok { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.gb-status.ok > .bi { color: var(--accent); }
.gb-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gb-steps > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 13px; font-weight: 600; }
.gb-steps .step-n { margin: 0; }
.gb-steps .bi { color: var(--accent); }
.gb-steps .off .step-n { background: var(--surface-3); color: var(--muted); }
.gb-counts { display: flex; flex-direction: column; gap: 8px; }
.gb-count { display: flex; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.gb-count .grow { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.gb-hint { margin: 0; padding: 10px 16px 0; }
.gb-board { display: grid; gap: 12px; padding: 12px 16px 16px; }
@media (min-width: 900px) { .gb-board:has(.gb-tray) { grid-template-columns: 240px minmax(0, 1fr); } }
.gb-tray { display: flex; flex-direction: column; gap: 8px; align-self: start; padding: 10px; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.gb-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-content: start; }
.gb-grp { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.gb-grp h3 { display: flex; justify-content: space-between; margin: 0; font: 500 15px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.gb-grp h3 span { font: 600 12px/1 var(--body); color: var(--muted); letter-spacing: 0; }
.gb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-chips.col { flex-direction: column; }
.gb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font: 600 13px/1.1 var(--body); color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.gb-chips.col .gb-chip, .gb-chips.col .gb-chip-f { width: 100%; }
.gb-chip.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft); }
.gb-chip.swap { border-style: dashed; }
.gb-chip .bi { color: var(--accent); font-size: 12px; }
.gb-put { width: 100%; padding: 7px 10px; border: 1px dashed var(--accent); border-radius: 999px; background: var(--accent-soft); font: 600 12px/1.1 var(--body); color: var(--accent); cursor: pointer; }
.gb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.gb-acts .grow { flex: 1; min-width: 160px; }
.gb-before { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.gb-chip .seed { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--steel-soft); color: var(--steel); font: 600 11px/1 var(--body); }
.gb-warn { font-size: 12px; font-weight: 600; color: var(--amber); }
/* Trophies and seeds beside names, with tooltips on hover, focus and tap (PRED-107, PRED-156, PRED-144) */
.trophy { font-size: 14px; line-height: 1; flex: none; display: inline-flex; }
.trophy.gold { color: var(--gold); }
.trophy.silver { color: var(--silver); }
.trophy.bronze { color: var(--bronze); }
/* A league honour (PRED-766, dashboard v115): a rosette in its medal colour with the place on it;
   a cup's honour stays the trophy. The number is dark in both modes, as the medal colours are */
.rosette { position: relative; display: inline-grid; place-items: start center; width: 20px; height: 24px; flex: none; }
.rosette.gold { --medal: var(--gold); }
.rosette.silver { --medal: var(--silver); }
.rosette.bronze { --medal: var(--bronze); }
.rosette b { position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--medal); color: #0F1A14; font: 600 11px/1 var(--body); }
.rosette::before, .rosette::after { content: ""; position: absolute; top: 12px; width: 7px; height: 12px; background: var(--medal); filter: brightness(.82); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.rosette::before { left: 2px; transform: rotate(16deg); }
.rosette::after { right: 2px; transform: rotate(-16deg); }
/* The mini group honour (PRED-914): the group's number on a rosette in a colour for the place in
   the group, never gold, silver or bronze; white numbers read on all three in both modes */
.rosette.grp1 { --medal: #7A4FD6; }
.rosette.grp2 { --medal: #0B7F86; }
.rosette.grp3 { --medal: #C23B74; }
.rosette[class*="grp"] b { color: #FFFFFF; }
.seed { font: 600 11px/1 var(--display); letter-spacing: .04em; padding: 3px 5px; border-radius: var(--r-xs); background: var(--surface-3); color: var(--muted); }
.tip-btn { position: relative; border: 0; background: none; padding: 2px; margin: -2px 0 -2px 4px; display: inline-flex; align-items: center; cursor: help; border-radius: var(--r-xs); color: inherit; }
.seed.tip-btn { padding: 3px 5px; margin: 0 0 0 4px; background: var(--surface-3); color: var(--muted); }
.tip-btn::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 20; display: none; padding: 6px 9px; border-radius: var(--r-sm); background: var(--ink); color: var(--surface); font: 500 12px/1.3 var(--body); white-space: nowrap; letter-spacing: 0; }
.tip-btn:hover::after, .tip-btn:focus-visible::after, .tip-btn:focus::after { display: block; }
/* A player's record: each finished game, where they finished and the trophy (PRED-154, PRED-155) */
.rec-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) fit-content(150px) minmax(24px, auto); align-items: center; column-gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.rec-row:nth-child(odd of .rec-row) { background: var(--surface-2); }
.rec-row .grow { display: flex; flex-direction: column; min-width: 0; }
.rec-row .grow strong { font-size: 16px; }
.rec-row .gr-stat { display: flex; flex-direction: column; min-width: 0; text-align: right; }
.rec-row .gr-stat b { font: 400 22px/1 var(--display); }
.rec-row .gr-stat span { font-size: 12px; color: var(--muted); }
.rec-tr { display: flex; justify-content: center; gap: 2px; }
.rec-tr .trophy { font-size: 18px; }
/* Your own record: each row opens its game's final result, the trophy staying above the link (PRED-818) */
.rec-row.go { position: relative; grid-template-columns: 36px minmax(0, 1fr) fit-content(150px) minmax(24px, auto) 12px; column-gap: 10px; }
.rec-row.go .stretched-link { color: inherit; text-decoration: none; }
.rec-row.go .tip-btn { position: relative; z-index: 2; }
.rec-chev { color: var(--faint); }

/* A finished Last Man Standing game's Final standings: place, player and week out in columns (PRED-822, v131) */
.fs-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--line); font-size: 14px;
}
.band + .fs-row { border-top: 0; }
.fs-pos { font: 500 19px/1 var(--display); font-variant-numeric: tabular-nums; }
.fs-out { color: var(--muted); font-size: 13px; text-align: right; }
.fs-row.me { background: linear-gradient(90deg, var(--accent-soft), transparent); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.rec-link { color: inherit; text-decoration: none; }
@media (hover: hover) { .rec-link:hover { text-decoration: underline; } }

.mst { display: grid; gap: 18px; }
@media (min-width: 760px) {
  .mst { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 32px; }
  .mst-goals { grid-column: 1 / -1; }
}
.mst-l { display: block; font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mst-h { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.mst-h b { font: 400 26px/1 var(--display); color: var(--ink); margin-right: 4px; }
.mst-h span { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 12px; }
.mst-bar { display: flex; gap: 2px; height: 26px; border-radius: var(--r-sm); overflow: hidden; }
.mst-bar i { display: grid; place-items: center; min-width: 18px; font: 500 13px/1 var(--display); font-style: normal; }
.mst-bar .o-e, .mst-key .o-e { background: var(--pt-e); color: var(--pti-e); }
.mst-bar .o-g, .mst-key .o-g { background: var(--pt-g); color: var(--pti-g); }
.mst-bar .o-r, .mst-key .o-r { background: var(--pt-r); color: var(--pti-r); }
.mst-bar .o-w, .mst-key .o-w { background: var(--pt-w); color: var(--ink); }
.mst-key { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.mst-key li { display: grid; grid-template-columns: 12px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }
.mst-key li > i { width: 12px; height: 12px; border-radius: 3px; }
.mst-key b { font: 500 17px/1 var(--display); text-align: right; }
.mst-key span { color: var(--faint); font-size: 12px; }
.mst-side { display: grid; gap: 16px; align-content: start; }
.mst-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.mst-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.mst-tile b { font: 400 22px/1.05 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mst-team { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mst-tile span { font-size: 12px; color: var(--muted); }
.mst-tile small { font-size: 11px; color: var(--faint); }
.mst-fbars { display: flex; align-items: flex-end; gap: 10px; height: 76px; }
.mst-fbars span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; width: 34px; }
.mst-fbars i { width: 100%; border-radius: 4px 4px 2px 2px; background: var(--pt-r); }
.mst-fbars i.best { background: var(--gold); }
.mst-fbars b { font: 500 13px/1 var(--display); }
.mst-fbars small { font-size: 11px; color: var(--faint); }
.mst-goals { padding-top: 14px; border-top: 1px solid var(--line); }
.mst-gl { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.mst-gl b { font: 400 22px/1 var(--display); color: var(--gg); }
.mst-gbar { position: relative; height: 6px; max-width: 420px; border-radius: 3px; background: var(--surface-3); }
.mst-gbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--gg, var(--accent)); }
.mst-gbar em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }

/* My stats sizes in steps, as the Content Security Policy blocks inline styles */
.fx0 { flex: 0 0 auto; } .fx1 { flex: 1; } .fx2 { flex: 2; } .fx3 { flex: 3; } .fx4 { flex: 4; }
.fx5 { flex: 5; } .fx6 { flex: 6; } .fx7 { flex: 7; } .fx8 { flex: 8; } .fx9 { flex: 9; }
.fx10 { flex: 10; } .fx11 { flex: 11; } .fx12 { flex: 12; } .fx13 { flex: 13; } .fx14 { flex: 14; }
.fx15 { flex: 15; } .fx16 { flex: 16; } .fx17 { flex: 17; } .fx18 { flex: 18; } .fx19 { flex: 19; } .fx20 { flex: 20; }
.mh0 { height: 4px; } .mh1 { height: 8px; } .mh2 { height: 12px; } .mh3 { height: 16px; } .mh4 { height: 20px; }
.mh5 { height: 24px; } .mh6 { height: 28px; } .mh7 { height: 32px; } .mh8 { height: 36px; } .mh9 { height: 40px; } .mh10 { height: 44px; }
.gw0 { width: 0%; } .gw1 { width: 5%; } .gw2 { width: 10%; } .gw3 { width: 15%; } .gw4 { width: 20%; }
.gw5 { width: 25%; } .gw6 { width: 30%; } .gw7 { width: 35%; } .gw8 { width: 40%; } .gw9 { width: 45%; }
.gw10 { width: 50%; } .gw11 { width: 55%; } .gw12 { width: 60%; } .gw13 { width: 65%; } .gw14 { width: 70%; }
.gw15 { width: 75%; } .gw16 { width: 80%; } .gw17 { width: 85%; } .gw18 { width: 90%; } .gw19 { width: 95%; }
.gw20 { width: 100%; }
.gl0 { left: 0%; } .gl1 { left: 5%; } .gl2 { left: 10%; } .gl3 { left: 15%; } .gl4 { left: 20%; }
.gl5 { left: 25%; } .gl6 { left: 30%; } .gl7 { left: 35%; } .gl8 { left: 40%; } .gl9 { left: 45%; }
.gl10 { left: 50%; } .gl11 { left: 55%; } .gl12 { left: 60%; } .gl13 { left: 65%; } .gl14 { left: 70%; }
.gl15 { left: 75%; } .gl16 { left: 80%; } .gl17 { left: 85%; } .gl18 { left: 90%; } .gl19 { left: 95%; }
.gl20 { left: 100%; }

/* Fixtures card (PRED-146): the game week stepper in its header, and a past week's rows */
.band.plain { background: var(--surface-2); }
.wk-nav { display: flex; align-items: center; gap: 6px; }
.gp-arr {
  position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none;
}
.gp-arr::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.gp-arr.off { opacity: .35; }

/* The Mini group card on Standings (PRED-135, dashboard v58 groupCarousel): arrows, dots and All groups */
.gp-car { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin-top: 10px; }
.gp-car .gp-arr { width: 44px; height: 44px; background: var(--surface-2); }
.gp-cur { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.gp-cur b { font: 300 32px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.gp-lbl {
  display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-ink); text-decoration: none;
}
.gp-lbl .bi { font-size: 11px; }
.gp-home { color: var(--muted); }
@media (hover: hover) { .gp-home:hover { color: var(--gold-ink); } }
.gp-dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; margin-top: 4px; }
.gp-dot { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; }
.gp-dot::after { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); }
.gp-dot.mine::after { background: color-mix(in srgb, var(--gold) 55%, transparent); }
.gp-dot.on { width: 26px; }
.gp-dot.on::after { width: 18px; background: var(--blue); }
.gp-all {
  position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 8px;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--muted); font-size: 12px; text-decoration: none;
}
.gp-all::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.gp-all[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--surface); }
@media (hover: hover) { .gp-dot:hover::after { background: var(--faint); } }
.group-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-top: 1px solid var(--line); }
.group-head:first-child { border-top: 0; }
.group-head h3 { margin: 0; font: 500 18px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.wk-nav-lbl {
  display: flex; flex-direction: column; align-items: center; min-width: 64px;
  font: 500 18px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.wk-nav-lbl em { font: 600 11px/1.3 var(--body); font-style: normal; letter-spacing: .06em; color: var(--accent); }
.pw-sum span { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; }
.pw-sum em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 600; color: var(--gold-ink); }
.pw {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px 40px; align-items: center; gap: 8px;
  padding: 8px 14px 8px 16px; border-top: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--o);
}
.pw.o-w { box-shadow: inset 4px 0 0 var(--line-2); }
.pw-h {
  padding-block: 6px; box-shadow: none; background: var(--surface-3);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.pw-h span:nth-child(n+2) { text-align: center; }
.pw-sc { display: flex; flex-direction: column; gap: 2px; }
.pw-sc i { display: grid; place-items: center; min-height: 34px; font: 500 18px/1 var(--display); font-style: normal; font-variant-numeric: tabular-nums; }
.pw-sc:first-of-type i { color: var(--muted); }
.wr-pts {
  justify-self: center; min-width: 30px; padding: 6px 0; border-radius: var(--r-xs); text-align: center;
  font: 600 14px/1 var(--display); background: var(--o); color: var(--oi);
}
.wr-pts.o-w { background: none; box-shadow: inset 0 0 0 1.5px var(--o); color: var(--muted); }

/* Home (PRED-151, mockup concept F). Phones: one column. 900px and wider: the
   headline on its own row, then the tables and the to-do list side by side. */

.home-f { display: grid; gap: 26px; align-items: start; }
.home-f .full { grid-column: 1 / -1; }
@media (min-width: 900px) { .home-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--table-gap); } }
.h-mast { display: grid; gap: 6px; }
.h-eb { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
/* A long name breaks onto the next line rather than widening the page (PRED-534) */
.h-title { font: 300 44px/.95 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.h-title b { font-weight: 500; color: var(--accent); }
.h-mast p { margin: 0; font-size: 14px; color: var(--muted); }
@media (min-width: 900px) { .h-title { font-size: 60px; } }
.h-col { display: grid; gap: 10px; min-width: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 28px; }
.sec-h { margin: 0; font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.more { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 500; font-size: 14px; white-space: nowrap; text-decoration: none; }
@media (hover: hover) { .more:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* New games (PRED-432): a paper list, set apart from your jobs by its material.
   Edge to edge on phones; a rounded panel with two columns from 900px. */
.paper {
  --ring-gap: var(--paper); background: var(--paper); color: var(--paper-ink);
  border-top: 3px double var(--paper-line); margin: 0 calc(var(--bs-gutter-x) * -.5); padding: 20px 16px 18px;
}
.paper-h { margin: 0; color: inherit; text-align: center; font: 500 24px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.paper-sub { margin: 6px 0 12px; text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.paper-list { display: grid; }
.paper .r-quiet { --ring: var(--line-2); }
.nrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--paper-line); color: inherit; text-decoration: none;
}
.nrow .grow { display: flex; flex-direction: column; min-width: 0; }
.nrow .grow b { font: 500 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.nrow .grow span { font-size: 12px; opacity: .75; }
.nrow .price { display: flex; flex-direction: column; align-items: flex-end; }
.nrow .price b { font: 500 20px/1 var(--display); }
.nrow .price span { font-size: 11px; opacity: .7; white-space: nowrap; }
@media (hover: hover) { .nrow:hover .grow b { text-decoration: underline; text-underline-offset: 3px; } }
.paper-more { display: flex; justify-content: center; width: max-content; margin: 12px auto 0; }
@media (min-width: 900px) {
  .paper { margin: 0; border-radius: var(--r-lg); padding: 24px 28px; }
  .paper-list { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

/* Table neighbours */
.ladder {
  display: block; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  overflow: hidden; box-shadow: var(--sh-1); color: inherit; text-decoration: none;
}
.lr {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 34px; align-items: center; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--line); font-size: 14px;
}
.lr:first-child { border-top: 0; }
.lr-pos { font: 500 19px/1 var(--display); }
.lr-pts { font: 500 18px/1 var(--display); }
.lr .mv { justify-self: end; }
.lr.me { background: linear-gradient(90deg, var(--accent-soft), transparent); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.lr-target { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.lr-target > .bi { color: var(--gold); }
@media (hover: hover) { .ladder:hover { border-color: var(--line-2); } }

/* The to-do list: game badge, what to do, then one button */
.hacts { display: grid; }
.hact {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.hact .grow { display: flex; flex-direction: column; min-width: 0; }
.hact .grow b { font-weight: 600; font-size: 15px; line-height: 1.25; }
.hact.is-done .grow { opacity: .6; }
.hact.is-done b { text-decoration: line-through; text-decoration-color: var(--faint); }
/* Home's agenda row (PRED-851, v146, option E): the time left first in its own column, then the badge, the job and
   an arrow; no buttons, the whole row opens the job */
.hact.ag { grid-template-columns: 58px auto minmax(0, 1fr) 14px; gap: 10px; padding: 11px 0; }
.ag-time { text-align: center; font: 500 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.ag-time b { font: inherit; }
.ag-time small { display: block; margin-top: 3px; font: 600 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ag-time.none { color: var(--faint); font-size: 14px; }
.hact.ag .ag-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hact.ag > .bi { color: var(--faint); }
.hact.is-done .ag-time { opacity: .6; }
.u-urgent { color: var(--red); font-weight: 600; }
.u-soon { color: var(--amber); font-weight: 600; }
.u-later { color: var(--ink); }
.day-free { margin: 4px 0 0; }

/* Your week (PRED-400): tear-off desk calendar pages, a coloured tab for each job due that day */
.desk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pg {
  display: flex; flex-direction: column; align-items: center; padding: 0 0 8px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .15s;
  box-shadow: 0 1px 0 var(--line-2), 0 3px 0 -1px var(--surface), 0 4px 0 -1px var(--line-2);
}
.pg-m {
  position: relative; width: 100%; padding: 7px 0 4px; text-align: center; background: var(--surface-3); color: var(--muted);
  font: 600 11px/1 var(--bs-body-font-family); letter-spacing: .12em; text-transform: uppercase;
}
.pg-m::before, .pg-m::after { content: ""; position: absolute; top: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--bg); }
.pg-m::before { left: 26%; }
.pg-m::after { right: 26%; }
.pg b { margin-top: 5px; font: 400 26px/1 var(--display); }
.pg small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pg-tabs { display: flex; gap: 2px; height: 5px; margin-top: 5px; }
.pg-tabs i { width: 10px; height: 5px; border-radius: 2px; background: var(--muted); }
.pg-tabs .t-urgent { background: var(--red); }
.pg-tabs .t-soon { background: var(--amber); }
.pg-tabs .t-done { background: var(--accent); }
/* Saturday and Sunday's date and day name bold in the club colour, Flare green without one (PRED-586, dashboard v85) */
.pg.wkend b, .pg.wkend small { font-weight: 600; color: var(--club-wkend, var(--accent)); }
.pg.today .pg-m { background: var(--accent); color: var(--accent-ink); }
.pg.kick .pg-m { background: var(--gold); color: #2A1D00; font-size: 11px; letter-spacing: .02em; }
.pg[aria-current] { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--accent), 0 10px 18px -10px rgba(10, 122, 80, .6); }
@media (hover: hover) { .pg:hover { transform: translateY(-2px); } }
@media (max-width: 360px) { .pg b { font-size: 21px; } .pg-m { font-size: 11px; } }
@media (min-width: 900px) { .pg b { font-size: 34px; } .pg small { font-size: 11px; } .pg-m { font-size: 11px; } }
/* System health (PRED-380, v43): a coloured row per connection; amber and red rows open their fix under them */
.hl-top { display: grid; gap: 12px; }
.hl-sum { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px; border-radius: var(--r-md); font-size: 13px; }
.hl-sum.ok { background: var(--accent-soft); }
.hl-sum.ok .bi { color: var(--accent); }
.hl-sum.warn { background: var(--amber-soft); }
.hl-sum.warn .bi { color: var(--amber); }
.hl-probs { display: grid; gap: 6px; }
.hl-prob { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.hl-prob.fixed > span:last-child { color: var(--muted); }
.hl-again { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--accent); font-weight: 600; font-size: 12px; }
.hl-links { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-row { flex-wrap: wrap; }
.hl-working .hl-ico { background: var(--accent-soft); color: var(--accent); }
.hl-late .hl-ico { background: var(--amber-soft); color: var(--amber); }
.hl-failed .hl-ico { background: var(--red-soft); color: var(--red); }
.hl-none .hl-ico { background: var(--surface-3); color: var(--muted); }
.hl-late { box-shadow: inset 4px 0 0 var(--amber); }
.hl-failed { box-shadow: inset 4px 0 0 var(--red); }
.hl-help {
  flex-basis: 100%; display: grid; gap: 6px; margin-left: 48px; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--surface-2); font-size: 13px;
}
.hl-help p { margin: 0; }
.hl-help a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; }
.day-h { margin: 6px 0 0; font: 500 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Game badges: one round badge per game type; the ring says what it needs from you */
.gbadge {
  --s: 36px; width: var(--s); height: var(--s); border-radius: 50%; padding: 2px; background: var(--ring);
  flex: none; display: inline-block;
}
.gbadge > span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--gt);
  color: #fff; border: 2px solid var(--ring-gap, var(--bg)); font-size: calc(var(--s) * .4);
}
.r-todo { --ring: conic-gradient(#F3B64B, #E07B22, #F3B64B); }
.r-done { --ring: var(--accent); }
.gbadge { position: relative; }
/* How many of this game type's games are waiting for you, on the badge's corner */
.gb-n { position: absolute; border: 2px solid var(--surface); }
.gb-pred { --c1: #00D084; --c2: #03462B; --glow: #5CFFC0; }
.gb-cup { --c1: #FFB800; --c2: #6E4300; --glow: #FFE27A; }
.gb-lms { --c1: #2F8CFF; --c2: #0A2468; --glow: #8CC2FF; }
.gb-sweep { --c1: #A060FF; --c2: #2C0F6E; --glow: #D2B0FF; }
.gb-bonus { --c1: #FF7A1A; --c2: #6A2300; --glow: #FFC27A; }
.gb-goal { --c1: #8EA4BA; --c2: #18222D; --glow: #EAF2FA; }
/* A finished game is grey (PRED-818, dashboard v130) */
.gb-over { --c1: #8A9690; --c2: #3A423E; --glow: #C9D1CD; }
.gbadge { --gt: radial-gradient(circle at 32% 26%, var(--glow) 0, var(--c1) 38%, var(--c2) 100%); }

/* Game page head (PRED-153): the status card at the top of the page */

.scard {
  display: flex; align-items: center; gap: 12px; min-height: 76px; margin-bottom: 14px; padding: 12px 14px;
  border-radius: var(--r-lg); color: var(--ink);
  background: linear-gradient(100deg, color-mix(in srgb, var(--c1) 16%, var(--surface)), var(--surface) 75%);
  border: 1px solid color-mix(in srgb, var(--c1) 35%, transparent);
  --gc: color-mix(in srgb, var(--c1) 35%, var(--c2));
}
.sc-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sc-k { font: 600 11px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--gc); }
.sc-t { font: 500 21px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.sc-m { font-size: 12px; color: var(--muted); }
.sc-prog {
  display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: var(--surface-3);
  overflow: hidden; vertical-align: 1px; margin-right: 6px;
}
.sc-prog i { display: block; height: 100%; width: 0; background: var(--c1); }
.sc-prog.p1 i { width: 10%; } .sc-prog.p2 i { width: 20%; } .sc-prog.p3 i { width: 30%; } .sc-prog.p4 i { width: 40%; }
.sc-prog.p5 i { width: 50%; } .sc-prog.p6 i { width: 60%; } .sc-prog.p7 i { width: 70%; } .sc-prog.p8 i { width: 80%; }
.sc-prog.p9 i { width: 90%; } .sc-prog.p10 i { width: 100%; }
.sc-pill { flex: none; display: grid; gap: 2px; justify-items: center; padding: 7px 11px; border-radius: var(--r-md); background: var(--c2); color: #fff; }
.sc-pill small { font: 600 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.sc-pill b { font: 400 19px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Main menu (PRED-130): a top bar from 768px, a bottom tab bar on phones */

.topnav { display: none; gap: 2px; }
.topnav a {
  padding: 8px 14px; border-radius: 999px; font-weight: 500; color: var(--ink); opacity: .7;
  text-decoration: none; white-space: nowrap;
}
.topnav a[aria-current="page"] { opacity: 1; background: var(--hdr-chip); box-shadow: var(--sh-1); }
@media (hover: hover) { .topnav a:hover { opacity: 1; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; border-top: 1px solid var(--line);
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar-in { display: grid; max-width: 600px; margin: 0 auto; }
.tabbar-in.n1 { grid-template-columns: 1fr; } .tabbar-in.n2 { grid-template-columns: repeat(2, 1fr); }
.tabbar-in.n3 { grid-template-columns: repeat(3, 1fr); } .tabbar-in.n4 { grid-template-columns: repeat(4, 1fr); }
.tabbar-in.n5 { grid-template-columns: repeat(5, 1fr); } .tabbar-in.n6 { grid-template-columns: repeat(6, 1fr); }
.tabbar a, .tabbar .tab-more {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; padding: 7px 0 5px;
  font-size: 11px; font-weight: 500; color: var(--muted); text-decoration: none;
}
.tabbar .tab-more { background: none; border: 0; cursor: pointer; }
.tabbar a[aria-current="page"], .tabbar .tab-more[aria-current="page"] { color: var(--accent); }
.tab-ico { position: relative; display: inline-flex; height: 40px; align-items: center; isolation: isolate; }
.tab-ico::before { content: ""; position: absolute; inset: -2px -12px; border-radius: 999px; z-index: -1; }
/* The current tab is marked by its green ring alone, with no pale pill behind it (PRED-789) */
.tabbar .gbadge { --s: 40px; }
.tabbar .gbadge > span { border-color: var(--surface); }
.tab-ring {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px;
  background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--muted);
}
.tabbar [aria-current="page"] .tab-ring { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.r-quiet { --ring: var(--muted); }
/* The tab bar's height: anything pinned to the foot of a phone screen sits above it */
:root { --tab-h: calc(68px + env(safe-area-inset-bottom, 0px)); }
main.has-tabbar { padding-bottom: calc(var(--tab-h) + 32px); }
/* More (PRED-421, v65): a card just above the bar with the menu entries that did not fit */
.more-sheet {
  inset: auto 8px calc(var(--tab-h) + 6px); width: auto; max-width: 584px; margin: 0 auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.more-sheet h2 { margin: 0; padding: 12px 16px; font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.more-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border-top: 1px solid var(--line);
  font-weight: 500; color: var(--ink); text-decoration: none;
}
.more-row .gbadge { --s: 28px; }
.more-row .grow { flex: 1; display: flex; flex-direction: column; }
.more-row small { font-size: 12px; color: var(--muted); }
.more-row .nav-count { position: static; }
.more-row > .bi { color: var(--faint); }
.more-row[aria-current="page"] { background: var(--accent-soft); }
.has-tabbar .still-to-predict { bottom: var(--tab-h); }

@media (min-width: 768px) {
  .topnav { display: flex; margin-left: 16px; }
  .tabbar { display: none; }
  main.has-tabbar { padding-bottom: 48px; }
  .has-tabbar .still-to-predict { bottom: 0; }
}

/* Game bar (PRED-453, dashboard v50): one box in the game colour holds the game's badge, its name
   (tap to switch game) and its own pages. Phones: inside a game the bottom bar becomes the game bar,
   Home then the game's part (v51 below). 768px and wider: the box, without Home, pinned under the
   header, with a straight stripe of the game colour down the left edge of the screen. */

.gedge {
  display: none; position: fixed; left: 0; top: 0; bottom: 0; width: 4px; z-index: 9; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 30%, transparent), var(--c1) 75%);
}
.gbar-cap {
  flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 2px; padding: 3px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c1) 10%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--c1) 45%, transparent);
}
.gbar-cap .gbar-game {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 6px; min-height: 48px;
  border: 0; border-radius: var(--r-md); background: none; color: var(--ink); text-align: left; cursor: pointer;
}
.gbar-cap .gbadge { --s: 34px; }
.gbar-cap .gbadge > span { border-color: var(--surface); }
.gbar-name {
  flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 500 15px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em;
}
.gbar-game > .bi { flex: none; font-size: 14px; color: var(--muted); }
/* With nothing to switch to, the game's name is not a button (PRED-823, v133) */
div.gbar-game { cursor: default; }
/* The game's pages sit together in a deeper tinted track; the page you are on is a white pill in it (PRED-463, v54) */
.gbar-tabs {
  flex: none; display: flex; gap: 2px; margin: 1px 0; padding: 3px; border-radius: 15px;
  background: color-mix(in srgb, var(--c1) 24%, var(--surface));
}
.gbar-cap .gbar-tab {
  flex: none; width: 54px; min-height: 42px; padding: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; border-radius: var(--r-md); font: 600 11px/1 var(--body); color: var(--muted); text-decoration: none;
}
.gbar-cap .gbar-tab .bi { font-size: 18px; }
.gbar-cap .gbar-tab[aria-current="page"] {
  background: var(--surface); color: color-mix(in srgb, var(--c1) 40%, var(--c2)); box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
/* Home is a copy of the main menu's Home: the house in a grey ring, Home under it (PRED-706, dashboard v99) */
.tabbar .gbar-home { position: relative; z-index: 1; flex: none; width: 60px; min-height: 0; justify-content: center; padding: 0; }
/* The ring is the size of the game's badge beside it, 34px (PRED-706) */
.tabbar .gbar-home .tab-ico { height: 34px; }
.tabbar .gbar-home .tab-ring { width: 34px; height: 34px; font-size: 16px; }
/* Only the ring is centred, so it sits level with the badge; Home hangs 2px under it */
.tabbar .gbar-home .gbar-label { position: absolute; left: 0; right: 0; top: calc(50% + 19px); text-align: center; line-height: 1; }

/* Phones (PRED-463, dashboard v54): one line of the game colour, 4px, runs straight down the left edge
   of the screen to the bottom. The game colour fills the whole bar, with Home clear of the edge line
   (PRED-468, dashboard v61). A faint hairline runs along the top. */
.tabbar.is-game {
  box-sizing: border-box; height: var(--tab-h); border-top: 0;
  background: color-mix(in srgb, var(--c1) 14%, var(--surface));
}
.tabbar.is-game .tabbar-in { position: relative; display: flex; gap: 4px; height: 100%; max-width: none; padding: 4px 6px 4px 10px; }
.tabbar.is-game .tabbar-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.tabbar.is-game .gbar-cap { background: none; border: 0; border-radius: 0; padding: 3px 0 3px 6px; }
/* The edge line is pinned to the screen like the bar, so fast scrolling never pulls them apart (PRED-459).
   Its top starts where the top line's corner ends, under the header's real bottom (anchor positioning);
   browsers without it use the usual 53px header. */
.grail-edge {
  position: fixed; left: 0; top: 76px; top: calc(anchor(--site-header bottom) + 23px); bottom: 0;
  width: 4px; z-index: 9; pointer-events: none; background: var(--c1);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3), #000 70%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3), #000 70%);
}
.gbar-top { display: none; }

/* Phones (PRED-455, dashboard v52): the line hangs from the header. It runs along the top of the game
   page, as faint as the top of the edge, and turns down the edge with the same rounded corner, taking the
   place of the header's hairline. The status card joins it as a band the width of the screen, with no
   outline, and the hairline runs under the band instead. The band scrolls with the page; the line stays.
   Content scrolling up disappears just below the line (PRED-465): the header is solid on game pages, and a
   strip of the page colour sits under the line and fills the corner outside its curve. */
.grail-top { display: none; }
@media (max-width: 767px) {
  .site-header:has(.grail-top) {
    border-bottom-color: transparent; background: var(--bg);
  }
  /* A club's colours stay in the header on game pages (PRED-470) */
  .site-header.branded:has(.grail-top) { background: var(--hdr-bg); }
  .grail-top {
    display: block; position: absolute; left: 0; right: 0; top: 100%; height: 24px; z-index: 9; pointer-events: none;
    background: radial-gradient(circle at 18px 18px, transparent 17.5px, var(--bg) 18px) 0 0 / 18px 18px no-repeat;
  }
  .grail-top::before, .grail-top::after { content: ""; position: absolute; inset: 0; border-top-left-radius: 18px; }
  .grail-top::before { border-top: 7px solid var(--bg); border-left: 7px solid var(--bg); }
  .grail-top::after {
    border-top: 4px solid color-mix(in srgb, var(--c1) 30%, transparent); border-left: 4px solid color-mix(in srgb, var(--c1) 30%, transparent);
  }
  .scard { margin: -24px -12px 14px; padding: 16px 12px 12px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 18px 0 0 0; }
  /* Under the demo bar the card keeps the bar's gap, not tucked up over it (PRED-1029, v191) */
  .demo-bar ~ .scard { margin-top: 0; }
}

/* Switch game: the player's games by type, opened from the game's name (a popover) */
.gsheet {
  inset: auto 0 0; width: 100%; max-width: 560px; max-height: 80vh; max-height: 80dvh; margin: 0 auto; overflow: auto;
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 20px 20px 0 0;
  background: var(--surface); color: var(--ink); box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
}
.gsheet::backdrop { background: rgba(15, 26, 20, .4); }
.gsheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 10px; }
.gsheet h2 { margin: 0; font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.gs-grp { margin: 12px 0 4px; font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gs-row {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px; border-radius: var(--r-md);
  font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none;
}
.gs-row .grow { flex: 1; min-width: 0; }
.gs-row small { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; color: var(--muted); }
.gs-row small.due { color: var(--amber); font-weight: 600; }
.gs-row > .bi { color: var(--faint); }
.gs-row[aria-current="page"] { background: color-mix(in srgb, var(--c1) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--c1); }
.gs-row[aria-current="page"] > .bi { color: color-mix(in srgb, var(--c1) 40%, var(--c2)); }
@media (hover: hover) { .gs-row:not([aria-current]):hover { background: var(--surface-2); } }
.gs-foot { display: flex; gap: 8px; margin-top: 12px; }
.gs-foot a {
  flex: 1; display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 44px; border: 1px solid var(--line-2);
  border-radius: var(--r-md); font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none;
}

/* A finished game (PRED-818, dashboard v130): Finished under its name on the game bar, the day
   it leaves Home under its status card, and Home's Just finished card */
/* The = of a shared place in its own narrow column, so the numbers line up (PRED-824, v134) */
.pos-eq { display: inline-block; width: .7em; text-align: left; }
.gbar-sub { display: block; font: 600 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fin-keep { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.fin-keep .bi { color: var(--faint); }
.jf { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; }
.jf-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line);
  font-size: 14px; color: inherit; text-decoration: none;
}
.jf-row:first-child { border-top: 0; }
.jf-row .grow { flex: 1; min-width: 0; display: grid; gap: 1px; }
.jf-row .grow small { font-size: 12px; color: var(--muted); }
.jf-row .pl { font: 500 19px/1 var(--display); }
.jf-row > .bi { color: var(--faint); }
@media (hover: hover) { .jf-row:hover { background: var(--surface-2); } }

@media (min-width: 768px) {
  .gedge { display: block; }
  .gbar-top {
    display: flex; position: sticky; top: 0; z-index: 6; margin: 0 0 14px; padding: 8px 0;
    background: var(--bg);
  }
  .gbar-top .gbar-cap { flex: 0 1 520px; }
  .gbar-top .gbar-name { font-size: 18px; }
  .gbar-top .gbar-cap .gbar-tab { width: auto; padding: 0 16px; flex-direction: row; gap: 6px; font-size: 14px; }
  .gsheet { inset: 0; margin: 120px auto auto; border-radius: 20px; }
  .gsheet::before { display: none; }
}

/* Admin mode (PRED-166, v46): the header and bottom bar turn black for Club Admin and navy for
   Site Admin. Phones and tablets show the sections in the bottom bar, 1200px and wider in a sidebar. */
body.in-site {
  --adm: #13294B; --adm-ink: #FFFFFF; --adm-chip: rgba(255, 255, 255, .1); --adm-line: rgba(255, 255, 255, .28);
  --adm-dim: rgba(255, 255, 255, .7); --adm-ring: rgba(255, 255, 255, .35);
}
.in-admin .site-header {
  background: var(--adm); color: var(--adm-ink); border-bottom-color: transparent;
  --hdr-bg: var(--adm); --hdr-chip: var(--adm-chip); --hdr-line: var(--adm-line);
}
.in-admin .site-header .hdr-btn { color: var(--adm-ink); }
/* Player mode (PRED-466, dashboard v57): while a managed player plays, the header works like Admin
   mode's: black, their picture and name, whose account it is on, and Switch back on the right.
   It never takes the club's colours. Dark mode (PRED-161) swaps black and white, as Admin mode. */
.site-header.player-mode, .site-header.player-mode:has(.grail-top) {
  background: var(--adm); color: var(--adm-ink); border-bottom-color: transparent;
  --hdr-bg: var(--adm); --hdr-chip: var(--adm-chip); --hdr-line: var(--adm-line);
}
.player-mode .adm-t { flex: 0 1 auto; }
.player-mode .topnav a { color: var(--adm-ink); }
.pm-back { flex: none; margin: 0 0 0 auto; }
.pm-back .adm-exit { border: 0; cursor: pointer; }
.adm-mark {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--adm-chip); font-size: 18px;
}
.adm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-t b { font: 600 21px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.adm-t small { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-exit {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; background: var(--adm-ink); color: var(--adm); font: 600 13px/1 var(--body); text-decoration: none;
}
/* How many things wait in a section, on its icon's corner */
.nav-count { position: absolute; border: 2px solid var(--surface); }
.in-admin .nav-count { border-color: var(--adm); }
.topnav .nav-count { position: static; border: 0; vertical-align: 1px; }
/* In the header it sits over the icon's corner, clear of the picture beside it (PRED-582) */
.in-admin .tabbar { display: block; background: var(--adm); border-top-color: transparent; }
.in-admin .tabbar a { color: var(--adm-dim); }
.in-admin .tabbar .tab-ring { background: var(--adm-chip); box-shadow: inset 0 0 0 2px var(--adm-ring); color: var(--adm-ink); }
.in-admin .tabbar a[aria-current="page"] { color: var(--adm-ink); font-weight: 600; }
.in-admin .tabbar a[aria-current="page"] .tab-ring { background: var(--adm-ink); box-shadow: none; color: var(--adm); }
.in-admin .tabbar .tab-ico::before { display: none; }
main.has-admbar { padding-bottom: calc(var(--tab-h) + 32px); }
.adm-side { display: none; }
.adm-sl { display: block; padding: 14px 10px 6px; font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.adm-sl:first-child { padding-top: 0; }
.adm-side a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink); font: 500 14px/1.2 var(--body); text-decoration: none;
}
.adm-side a.big { min-height: 46px; font-size: 15px; font-weight: 600; }
.adm-side a .bi { color: var(--muted); }
.adm-side .grow { flex: 1; }
@media (hover: hover) { .adm-side a:not([aria-current]):hover { background: var(--surface-2); } }
.adm-side a[aria-current] { background: var(--adm); color: var(--adm-ink); font-weight: 600; }
.adm-side a[aria-current] .bi { color: var(--adm-ink); }
.adm-side a[aria-current] .adm-count { background: var(--adm-ink); color: var(--adm); }
.adm-foot { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (min-width: 1200px) {
  .in-admin .tabbar { display: none; }
  main.has-admbar { padding-bottom: 48px; }
  .adm-wrap { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 24px; align-items: start; }
  .adm-main { min-width: 0; }
  .adm-side {
    display: flex; flex-direction: column; position: sticky; top: 84px; padding: 14px 10px;
    border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  }
}

/* The Club Admin shield and your avatar, at the top right */
.hdr-btn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--hdr-chip); border: 1px solid var(--hdr-line); color: var(--ink); font-size: 17px; text-decoration: none;
}
/* A grid, so a picture sits exactly like initials: as text it added a gap below and rode 3px high (PRED-575) */
.me-btn { display: grid; padding: 0; border: 0; background: none; border-radius: 50%; }
/* In the club's colours your initials swap them, like its crest: the second colour, with readable ink (PRED-574) */
.club-look .me-btn .avatar { background: var(--crest-fill); color: var(--crest-ink); box-shadow: 0 0 0 1px var(--hdr-line); }
/* On the Me page your avatar has a green ring, so you can see where you are */
.me-btn[aria-current] .avatar { box-shadow: 0 0 0 2px var(--hdr-bg), 0 0 0 4px var(--accent); }
/* Messages (PRED-439): notes on the club's noticeboard; unread ones have a red pin */
.nb-list { display: grid; gap: 14px; margin-top: 4px; }
@media (min-width: 900px) { .nb-list { grid-template-columns: 1fr 1fr; align-items: start; } .nb-list .pn.open { grid-column: 1 / -1; } }
/* Select, then delete several (PRED-758, dashboard v114): Select above the list, a tick box on
   each message, and the bar under it with Cancel, Delete selected and then the question */
.sel-link { display: block; width: fit-content; margin: -4px 0 8px auto; font-weight: 500; color: var(--accent); }
/* While selecting, the tick box sits in the middle of the row's right edge, in space kept clear for
   it; .pn.pn-pick outweighs .pn's own padding, which cancelled it (PRED-814, option B) */
.pn.pn-pick { cursor: pointer; padding-right: 52px; }
.pn-tick { position: absolute; top: 50%; right: 14px; width: 22px; height: 22px; margin-top: -11px; accent-color: var(--accent); }
/* Delete selected stays faded until something is ticked */
.sel-bar .btn-danger { opacity: .5; pointer-events: none; }
main:has(.pn-tick:checked) .sel-bar .btn-danger { opacity: 1; pointer-events: auto; }
.sel-bar { position: sticky; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); }
.sel-bar .grow { flex: 1 1 100%; font-size: 14px; }
.sel-bar .btn-row { flex: 1 1 100%; }
.pn {
  position: relative; display: block; padding: 13px 14px 11px; border: 1px solid var(--paper-line); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--paper) 40%, var(--surface)); color: inherit; text-decoration: none; box-shadow: 0 2px 0 var(--paper-line);
}
.pn.new::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%;
  background: var(--red); box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.pn.open { background: var(--surface); }
.pn b.pn-t { display: block; font: 500 18px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.pn p { margin: 5px 0 0; font-size: 14px; line-height: 1.45; }
.pn-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; opacity: .75; }
.pn-for { display: block; margin-bottom: 4px; font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }
.pn-kind {
  display: inline-block; margin-bottom: 6px; padding: 4px 7px; border-radius: 999px; font: 600 11px/1 var(--body);
  letter-spacing: .06em; text-transform: uppercase; background: color-mix(in srgb, var(--paper-ink) 9%, transparent);
}
.pn-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nb-keep { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 2px 0; }
/* Replies (PRED-441): a reply box, your reply as a green bubble, the player's and the Club Admin's bubbles */
.pn-acts.end { justify-content: flex-end; }
.pn-reply { margin-top: 12px; }
.pn-reply textarea { min-height: 76px; font-size: 14px; resize: vertical; }
.pn-count { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; opacity: .75; }
.pn-bub { width: fit-content; max-width: 90%; margin-top: 10px; padding: 9px 12px; border-radius: 14px; font-size: 14px; }
.pn-bub.player { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.pn-bub.mine {
  margin-left: auto; background: var(--accent-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-bottom-right-radius: 4px;
}
.pn-bub.admin { margin-left: auto; background: var(--ink); color: var(--bg); border-bottom-right-radius: 4px; }
.pn-who { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.pn-stamp { margin-top: 4px; font-size: 11px; opacity: .7; }
.pn-stamp.r { text-align: right; }
.pn-quote { margin-top: 8px; padding: 3px 10px; border-left: 3px solid var(--paper-line); font-size: 13px; opacity: .85; }
/* The club inbox (PRED-441): New, Read and Answered with their counts under the words */
.nb-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.nb-head .seg { flex: 1; min-width: 240px; }
/* On a phone the filters take the paper's full width, evenly, above New club message (PRED-543) */
@media (max-width: 640px) { .nb-head .seg.eq-seg { width: 100%; } }
.seg a.ci-tab { justify-content: center; gap: 6px; }

.ci-who { display: flex; align-items: center; gap: 10px; }
.ci-who .grow { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ci-who small { font-size: 12px; opacity: .75; }
.ci-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; opacity: .9; }
.me-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid var(--hdr-bg); }

/* Your players (PRED-368): one row per managed player, its buttons on the right (under it on phones,
   starting at the left edge so Picture lines up with Add a Player) */
.acct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.acct-row > .grow { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.acct-row.gone { opacity: .75; }
.acct-acts { display: flex; gap: 6px; margin: 0 0 0 auto; }
.acct-acts .btn { white-space: nowrap; }
@media (max-width: 560px) { .acct-acts { width: 100%; justify-content: flex-start; } }
.acct-confirm {
  width: 100%; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--red-soft);
}
.acct-confirm-b { display: flex; gap: 6px; margin-left: auto; }
.acct-confirm-b form { margin: 0; }
.acct-add { border-top: 1px solid var(--line); }
.acct-note { width: 100%; display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 0; }
.acct-note .bi { flex: none; margin-top: 2px; }
.acct-pic { border-top: 1px solid var(--line); background: var(--surface-2); }
.add-player > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.add-player > summary::-webkit-details-marker { display: none; }
/* Who's playing? (PRED-367): your picture opens the account's players. A small people badge
   shows when there is more than one, and a managed player's view has a black strip under the header. */
.me-menu { width: min(320px, calc(100vw - 16px)); padding: 0; background: var(--surface); overflow: clip; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.me-menu form { margin: 0; }
.me-multi {
  position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--hdr-bg); font-size: 11px;
}
/* The PIN asked before switching back to the main account (PRED-369), as a card dropping from
   Player mode's header over the page (PRED-466) */
.pa-bar.pa-pin {
  position: absolute; left: 8px; right: 8px; top: calc(100% + 6px); z-index: 11; max-width: 560px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .35); font-size: 14px;
}
.pa-pin form { margin: 0; }
.pa-pin-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; }
.pa-pin .pa-txt { flex: 1 1 180px; }
.pin-in { width: 88px; letter-spacing: .3em; text-align: center; }
.pin-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 120px)); gap: 12px; align-items: end; }
.pin-pair > div:last-child { grid-column: 1 / -1; }
@media (max-width: 520px) { .site-brand { font-size: 19px; } }

/* The Me page: each setting with its button on the right */
.me-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

/* Add matches on the Results page (PRED-395): one box per match, then the Commit bar */
.add-open { margin: 14px 0 0; }
.fx-card-add { margin-top: 14px; }
.fx-matches { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.fx-match {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line-2);
  border-radius: var(--r-md); background: var(--surface);
}
.fx-match-h { display: flex; align-items: center; gap: 10px; }
.fx-match-h b { flex: 1; font: 600 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fx-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: start; }
.fx-v { padding-top: 36px; font-weight: 600; color: var(--muted); }
.fx-team { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-tin {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface);
}
.fx-tin:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fx-mark { display: inline-flex; color: var(--muted); }
.fx-tin input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 10px 0;
  font-weight: 500; font-size: 15px; color: var(--ink);
}
.fx-sugs { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.fx-sugs:not(:has(.fx-sug)) { display: none; }
.fx-sug {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 0;
  border-top: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-weight: 500; font-size: 14px; text-align: left;
}
.fx-sug:first-child { border-top: 0; }
.fx-sug.none { color: var(--muted); }
.fx-pick { display: flex; flex-direction: column; gap: 6px; }
.fx-pick-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-wk { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.res-step.sm { width: 32px; height: 32px; }
.fx-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.fx-days button, .fx-times button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px;
  padding: 4px 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: 600 15px/1.1 var(--body);
}
.fx-days small { font-size: 11px; font-weight: 500; color: var(--muted); }
.fx-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fx-times button { min-height: 40px; }
.fx-days button[aria-pressed="true"], .fx-times button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fx-days button[aria-pressed="true"] small { color: var(--accent-ink); }
.fx-times select {
  min-height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: 600 15px/1 var(--body); text-align: center; text-align-last: center;
}
.fx-times select.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (min-width: 641px) { .fx-times { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.fx-note { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--accent); }
.fx-note.bad { color: var(--amber); }
.fx-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px 16px; }
.fx-bar[hidden] { display: none; }
/* The competition's teams, the list Add matches suggests from */
.res-teams-card { margin-top: 14px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 12px; padding: 10px 16px 14px; }
.team-chip { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 14px; font-weight: 500; }
@media (max-width: 640px) { .fx-teams { grid-template-columns: minmax(0, 1fr); } .fx-v { display: none; } }

/* The Results change log (PRED-394): one small row per change, Show all underneath */
.res-log { font-size: 13px; }
.a-more { display: flex; justify-content: center; width: 100%; padding: 12px 16px; border-top: 1px solid var(--line); }

/* Changing a saved score asks first (PRED-391): the Save bar becomes a check with an amber edge */
.res-confirm { flex-wrap: wrap; border-color: var(--amber); }
.res-confirm .grow { display: flex; flex-direction: column; gap: 3px; flex-basis: 100%; }
.res-confirm .btn { flex: 1 1 0; }

/* The Sign up page (PRED-191, dashboard v46): one row per game, the whole row opening its detail */
.su-page { max-width: 1000px; margin-inline: auto; }
.su-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.band + .su-row { border-top: 0; }
.su-row:nth-of-type(even) { background: var(--alt); }
.su-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.su-row strong { font-size: 16px; overflow-wrap: anywhere; }
.gr-main { font-size: 13px; color: var(--muted); text-wrap: pretty; }
.su-row .pill { flex: none; }
/* Awaiting payment: solid amber with a slow pulse, so money owed is hard to miss */
/* A ring grows out of the pill and fades, which the phone moves for free (PRED-976, option C) */
.pill.pay { position: relative; background: var(--amber); color: var(--bg); box-shadow: 0 0 0 3px var(--amber-soft); }
@media (prefers-reduced-motion: no-preference) {
  .pill.pay::after {
    content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
    border: 2px solid var(--amber-soft); animation: ring-out 2.4s ease-out infinite;
  }
}
/* The ring that grows and fades round a pulsing pill or dot */
@keyframes ring-out { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.su-chev { color: var(--muted); transition: transform .12s; }
@media (hover: hover) { .su-row:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); } .su-row:hover .su-chev { transform: translateX(3px); } }
@media (max-width: 480px) { .su-row .pill { max-width: 104px; white-space: normal; text-align: center; } }
/* A game's sign-up detail: what it is on the left, your entry and payment on the right (amber) */
.su-detail { display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: clip; }
.su-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -16px -16px 2px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.su-top .gr-kind { color: var(--accent); }
.su-grid, .su-main, .su-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.su-name { margin: 0; }
.su-pitch { margin: 0; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.su-h { margin: 6px 0 0; font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.su-inv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.su-inv li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.su-inv .bi { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
/* Phone notifications on Flare on your phone (PRED-855, dashboard v183) */
.push-groups { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.push-groups .fx-lbl { display: flex; align-items: center; gap: 10px; }
.push-groups .fx-lbl > .bi { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
.push-note { margin: 12px 0 0; display: flex; gap: 8px; align-items: flex-start; }
.push-note .bi { color: var(--accent); margin-top: 2px; }
/* Each rule lines up with its label on the same text line, also on phones, where the label is smaller (PRED-783) */
.su-rules { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 14px; margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); font-size: 14px; }
.su-rules dt { color: var(--muted); font-weight: 400; }
.su-rules dd { margin: 0; font-weight: 500; }
@media (max-width: 600px) { .su-rules { grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; } .su-rules dt { font-size: 13px; line-height: 1.3; } }
.su-side { padding: 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--amber-soft) 50%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); }
.su-side-lbl { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.su-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.su-facts span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface); font-size: 11px; font-weight: 500; color: var(--muted); }
.su-facts b { font: 400 20px/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.su-rule { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.su-act { display: flex; flex-direction: column; gap: 8px; }
.su-act > .btn, .su-act > form > .btn, .su-act > form > .btn-row > .btn, .su-pay form > .btn { min-height: 48px; }
/* Keep and Cancel the entries ticked share the panel's width, as the next step's buttons do */
.su-act > form > .btn-row > .btn { flex: 1 1 0; }

/* The payment section (PRED-203): bank details and the reference while money is owed, then one line */
.su-pay { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.su-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.su-pay .su-h { margin: 0; color: var(--ink); }
.su-pay .su-ref-l { flex: 1 0 100%; }
.su-pay .su-ref code { text-align: left; }
.su-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.su-dl dt { color: var(--muted); font-weight: 400; }
.su-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.su-paid-sum { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--r-md); background: var(--surface-2); }
.su-paid-sum > .bi { color: var(--accent); font-size: 20px; }
.su-paid-sum .grow { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.su-paid-sum small { font-size: 12px; color: var(--muted); }
/* Who's playing? (PRED-371): one card per player; chosen cards are filled with a white ring and a tick */
.who-plays { margin: 4px 0 6px; }
.who-plays .su-h { margin: 14px 0 10px; }
.who-grid { display: grid; gap: 8px; }
.who-card {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 12px; margin: 0;
  border-radius: var(--r-md); border: 1.5px solid var(--line-2); background: var(--surface);
  font: 600 15px/1.2 var(--body); cursor: pointer;
}
.who-card .grow { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.who-card small { font-weight: 400; font-size: 12px; color: var(--muted); }
.who-card > .bi { font-size: 20px; color: var(--line-2); }
.who-card .who-on, .who-card:has(:checked) .who-off { display: none; }
.who-card:has(:checked) .who-on { display: inline; }
.who-card:has(:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.who-card:has(:checked) small, .who-card:has(:checked) > .bi { color: inherit; opacity: .9; }
.who-card:has(:checked) .avatar { box-shadow: 0 0 0 2px #fff; }
.who-card:has(:disabled) { opacity: .5; cursor: not-allowed; }
.who-card.is-in { opacity: .6; cursor: default; }
.who-card:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.su-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0; }
.su-leave { min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--red); font-weight: 500; font-size: 13px; cursor: pointer; }
@media (hover: hover) { .su-leave:hover { text-decoration: underline; } }
@media (min-width: 900px) {
  .su-detail { padding: 20px 24px; }
  .su-top { margin: -20px -24px 4px; padding: 10px 24px; }
  .su-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--table-gap); align-items: start; }
  .su-side { padding: 16px; }
}

/* Club info (PRED-431): saved payment accounts, each changed in place with a two-step code */
.site-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.site-row .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; color: var(--muted); }
.site-row .grow b { font-size: 15px; color: var(--ink); }
.site-row .acts { display: flex; gap: 6px; }
.site-form { border-top: 1px solid var(--line); background: var(--surface-2); }
.site-form .form-control { background: var(--surface); }
.site-form-grid { display: grid; gap: 12px; }
@media (min-width: 700px) { .site-form-grid { grid-template-columns: 1fr 1fr; } }
.site-form-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.del-check { background: var(--red-soft); }

/* Club Admins card on Club info (PRED-187): each row's "..." menu, a request in place, its steps */
.cr-menu {
  display: flex; flex-direction: column; margin: 0 16px 10px; padding: 4px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-2);
}
.cr-menu a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm);
  color: var(--ink); font-weight: 500; font-size: 14px; text-decoration: none;
}
@media (hover: hover) { .cr-menu a:hover { background: var(--surface-2); } }
.cr-menu a.bad-t, .btn.bad-t { color: var(--red); }
.cr-pill { align-self: flex-start; margin-top: 2px; text-decoration: none; }
.cr-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
@media (max-width: 575px) {
  .site-row:has(.cr-confirm) { grid-template-columns: minmax(0, 1fr); }
  .site-row .cr-confirm { justify-content: flex-start; }
}
.cr-form, .cr-steps { border-top: 1px solid var(--line); background: var(--surface-2); display: flex; flex-direction: column; gap: 12px; }
.cr-form .form-control, .cr-form .form-select { background: var(--surface); }
.cr-h { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 18px/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.cr-btns { display: flex; gap: 8px; }
.cr-btns > .btn { flex: 1; }
.cr-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; border-top: 1px solid var(--line); }
.cr-steps { gap: 0; }
.cr-st { position: relative; display: flex; gap: 10px; padding-bottom: 12px; font-size: 13px; }
.cr-st:last-child { padding-bottom: 0; }
.cr-st::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line-2); }
.cr-st:last-child::before { display: none; }
.cr-st > i {
  position: relative; z-index: 1; flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font-style: normal;
}
.cr-st.done > i { background: var(--accent); color: var(--accent-ink); }
.cr-st.now > i { background: var(--amber); color: var(--amber-ink); }
.cr-st b { display: block; }
.cr-st span { color: var(--muted); font-size: 12px; }
.cr-chg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.cr-chg s { color: var(--muted); }

/* Site Admin, Requests (PRED-187): each request with its change, why, and the check before approving */
.cr-body { display: flex; flex-direction: column; gap: 10px; }
.cr-box { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.cr-cts { display: flex; flex-direction: column; gap: 6px; }
.cr-ct { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cr-ct b { color: var(--ink); font-weight: 600; }
.cr-tick {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); font-size: 14px; cursor: pointer;
}
.cr-tick input { width: 18px; height: 18px; accent-color: var(--accent); }
.cr-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
/* Site Admin, Requests (PRED-636): on a phone the switch spans the width in three equal parts
   with the count in a bubble, and Action log sits under it; on a computer they share a row */
.rq-top { display: flex; flex-direction: column; gap: 8px; }
.rq-top > .btn { align-self: flex-end; }
/* The Action log's Requests link leads, so it stays on the left (PRED-639) */
/* Five equal tabs can't each hold a long label on one line, so the long ones wrap (PRED-730) */
@media (max-width: 640px) { .rq-back .rq-seg a { font-size: 13px; line-height: 1.2; } }
.seg.rq-seg { width: 100%; }
.rq-seg a { justify-content: center; text-align: center; gap: 6px; padding: 7px 6px; }
.rq-seg a[aria-current="page"] .rq-n { background: var(--blue-soft); color: var(--blue); }
@media (min-width: 641px) {
  .rq-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .seg.rq-seg { width: max-content; }
  .rq-seg a { padding: 7px 14px; }
}
/* Each request is a compact row that opens in place; To check opens in the full card's colours */
.rq-item + .rq-item { border-top: 1px solid var(--line); }
.rq-item > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.rq-item > summary::-webkit-details-marker { display: none; }
.rq-ico { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); flex: none; }
.rq-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rq-grow b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.25; }
.rq-item .pill { flex: none; }
.rq-chev { color: var(--faint); transition: transform .2s; }
.rq-item[open] .rq-chev { transform: rotate(180deg); }
.rq-item[open] > summary, .rq-open { background: var(--surface-2); }
.rq-open { padding: 0 14px 14px; }
.rq-open .cr-box { background: var(--surface); }
.rq-check[open] > summary { background: var(--surface); border-bottom: 1px solid var(--line); }
.rq-check .rq-open { background: var(--surface); padding: 14px; }
.rq-check .rq-open .cr-box { background: var(--surface-2); }
.site-row.cr-log { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }

/* The Club Admin's game page (PRED-169): summary tiles that open their tab, then the tabs.
   Every summary tile centres its words and figure (brand rule 24, PRED-819) */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 14px; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: box-shadow .15s, transform .15s;
}
.kpi span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi b { margin-top: auto; font: 400 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.kpi b small { font-size: 15px; color: var(--muted); }
.kpi.good b { color: var(--accent); }
.kpi.owed b { color: var(--amber); }
@media (hover: hover) { a.kpi:hover { box-shadow: var(--sh-2); transform: translateY(-1px); } }
@media (max-width: 520px) { .kpi b { font-size: 22px; } }
.g-kpis { margin-bottom: 16px; }
.kpis.four { grid-template-columns: repeat(4, 1fr); }
/* A free game's page: Players and Prize pot only (PRED-783) */
.kpis.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .kpis.four { grid-template-columns: repeat(2, 1fr); } }
.a-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; max-width: 680px; margin: 0 0 16px; border-radius: var(--r-md); }
.a-tabs a { justify-content: center; gap: 6px; min-height: 44px; border-radius: var(--r-sm); }
/* On phones each tab is its icon above a short word, so four or more fit the width (PRED-581) */
@media (max-width: 519px) {
  .a-tabs a { flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 12px; line-height: 1.15; text-align: center; }
  .a-tabs a .bi { font-size: 16px; }
  .a-tabs .tab-n { position: absolute; top: 0; right: calc(50% - 22px); }
}
.d-wide { display: none; }
@media (min-width: 520px) { .d-wide { display: inline; } }
.pay-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--line); }
.pay-row .grow { flex: 1; min-width: 0; }
.pay-row .nm-t { font-weight: 600; }
/* Players & payments (PRED-207): a filter, then each player with their payment switch */
.pay-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--r-md); margin-top: 10px; }
.pay-filter a { justify-content: center; border-radius: var(--r-sm); font-size: 13px; padding: 7px 10px; text-align: center; }
@media (min-width: 760px) { .pay-filter { display: inline-flex; } }
.pay-row { flex-wrap: wrap; }
.pay-who { display: flex; flex-direction: column; gap: 1px; }
/* Room for the name first: on a phone the paid details wrap below it, not the name (PRED-543) */
.pay-row .pay-who { flex-basis: 9rem; }
.pay-acts, .pay-sw { display: flex; align-items: center; gap: 8px; margin: 0; }
.pay-meta { font-size: 12px; color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.sw-lbl { width: 72px; font-size: 12px; font-weight: 600; color: var(--accent); }
.sw-lbl.sub { color: var(--blue); }
.sw-lbl.due { color: var(--amber); }
.seed { min-width: 30px; font: 600 12px/1 var(--body); color: var(--muted); }
.pay-form {
  order: 3; flex-basis: 100%; display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface-2); font-size: 13px;
}
.pay-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.pay-form-btns { display: flex; justify-content: flex-end; gap: 8px; }
@media (min-width: 760px) { .pay-form { grid-template-columns: 1fr 1fr 1.4fr auto; align-items: end; } }
/* Latest activity on To do (PRED-209): each line opens its game */
.feed-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14px; color: inherit; text-decoration: none; }
.band + .feed-row { border-top: 0; }
.feed-row .grow { flex: 1; min-width: 0; }
.feed-row b { font-weight: 600; }
.feed-row .small { white-space: nowrap; }
@media (hover: hover) { .feed-row:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); } }
@media (max-width: 620px) { .feed-row .small { display: none; } }
/* Latest activity as a timeline in folding bands: a dot per piece of news, the day and time on the right (PRED-628, dashboard v85) */
.act-sec > summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface-2); border-top: 1px solid var(--line);
  cursor: pointer; list-style: none; font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.act-sec > summary::-webkit-details-marker { display: none; }
.act-sec > summary .bi { margin-left: auto; transition: transform .2s; }
.act-sec[open] > summary .bi { transform: rotate(180deg); }
.act-line { position: relative; margin: 0; padding: 4px 0; list-style: none; }
.act-line::before { content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px; background: var(--line-2); }
.act-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 14px; color: inherit; text-decoration: none;
}
.act-row .grow { flex: 1; min-width: 0; }
.act-row b { font-weight: 600; }
.act-dot { flex: none; width: 12px; height: 12px; margin-left: 2px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); }
.act-dot.d-ok { background: var(--accent); }
.act-dot.d-warn { background: var(--amber); }
.act-dot.d-blue { background: var(--blue); }
.act-dot.d-bad { background: var(--red); }
.act-when { white-space: nowrap; font-size: 12px; color: var(--muted); text-align: right; }
.act-when b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .act-when { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; } }
@media (hover: hover) { .act-row:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); color: inherit; } }
.act-none { margin: 0; padding: 10px 16px; }
/* Payment reminders (PRED-210): the bar over the players, the message, and an envelope per row */
.chase-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--amber-soft); font-size: 13px; }
.chase-form { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.chase-to { margin: 0; font-size: 14px; }
.chase-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); }
@media (hover: hover) { .chase-btn:hover { color: var(--ink); background: var(--surface-2); } }
.pay-meta.sent { text-decoration: none; color: var(--accent); }
/* The prize pot's worked example (PRED-173); its boxes show only with their choice */
.pot-ex {
  display: flex; flex-direction: column; gap: 10px; margin: 0 16px 16px; padding: 12px 14px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.pot-line { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; }
.pot-line .bi { color: var(--accent); margin-top: 2px; }
.pot-bars { display: flex; flex-wrap: wrap; gap: 8px; }
.pot-bars span { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.pot-bars b { font: 400 20px/1 var(--display); color: var(--ink); }
.pot-bars b.bad-t { color: var(--red); }
.fx-grid:not(:has(input[name="pot"][value="percent"]:checked)) .pot-pct,
.fx-grid:not(:has(input[name="pot"][value="fixed"]:checked)) .pot-fixed,
.fx-grid:has(input[name="pot"][value="all"]:is(:checked, [type="hidden"])) .pot-rest { display: none; }
/* Mini group settings show only with mini groups on (PRED-94): spreading with seeding, and
   "When entries close" for a random draw; the forecast goes with them. A new game draws each
   switch as On and Off buttons, and Off is a checked button too, so Off is left out (PRED-825) */
.fx-grid:not(:has(input[name="groups"]:checked:not([value="false"]))) .if-groups { display: none; }
.fx-grid:not(:has(input[name="tables"]:checked:not([value="false"]))) .if-tables { display: none; }
.fx-grid:not(:has(input[name="seeding"]:checked:not([value="false"]))) .if-seeding { display: none; }
.fx-grid:not(:has(input[name="placing"][value="random"]:checked)) .if-random { display: none; }
#sx-groups:not(:has(input[name="groups"]:checked:not([value="false"]))) .sec-note { display: none; }
.setup-secs:not(:has(input[name="groups"]:checked:not([value="false"]))) .pl-grid .if-groups { display: none; }
/* The special prize contribution's boxes show only when it is switched on (PRED-77) */
/* Who puts the bonus money up shows with Add bonus money, and always in a free game (PRED-922) */
form:not(:has(input[name="fee_kind"][value="free"]:checked)) .fx-grid:not(:has(input[name="contribution"]:checked:not([value="false"]))) .if-boost { display: none; }
/* No entry fee hides the fee box and the prize split (PRED-778, dashboard v116) */
form:has(input[name="fee_kind"][value="free"]:checked) :is(.if-fee, #split-box) { display: none; }
.fx.row-start { grid-column-start: 1; }
/* Extra prizes are a switch card, then the share box (PRED-75) */
.pl-extra { display: flex; flex-direction: column; gap: 10px; }
.pl-grid .pot-ex { margin: 0; }
/* Prize calculator: money in, who wins what, left over or over (PRED-78, dashboard v33) */
.calc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.calc-head > .bi { color: var(--accent); }
.calc-head > b { flex: 1; font: 500 16px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.calc-n { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.calc-n input { width: 84px; min-height: 38px; padding: 6px 10px; font: 500 15px/1 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.calc-body { display: flex; flex-direction: column; gap: 10px; }
.calc-sub { margin: 4px 0 -4px; font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.calc-rows { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 14px; }
.calc-row:first-child { border-top: 0; }
.calc-row em { font-style: normal; font-size: 12px; color: var(--muted); }
.calc-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row.total { background: var(--surface-2); font-weight: 600; }
.calc-row.left b { color: var(--muted); }
.calc-row.over b { color: var(--red); }
.calc-row.bonus { background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.calc-msg { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; }
.calc-msg > .bi { margin-top: 2px; color: var(--muted); }
.calc-msg.ok > .bi { color: var(--accent); }
.calc-msg.warn > .bi { color: var(--amber); }
.calc-msg.bad, .calc-msg.bad > .bi { color: var(--red); }
/* Where money left over goes (PRED-79); the jackpot is a choice only when there is one */
.calc-left { display: flex; flex-direction: column; gap: 8px; }
.calc-over .fx-toggle { background: var(--surface); }
.calc-left .fx-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#sx-prizes:not(:has(input[name="jackpot-on"]:checked)) .calc-left label:has(input[value="jackpot"]) { display: none; }
/* Querying or resetting a payment (PRED-437): one column, under the row */
@media (min-width: 760px) { .pay-form.pay-query { grid-template-columns: 1fr; align-items: start; } }
/* The club's welcome note for new players on Home (PRED-186) */
.h-welcome {
  margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-2); font-size: 14px;
}
.h-welcome span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
/* The Club section's parts use .a-tabs (PRED-637); Club info says Info on phones */
.m-only { display: none; }
@media (max-width: 640px) { .d-only { display: none; } .m-only { display: inline; } }
/* The club badge beside its upload (PRED-186) */
.badge-row { display: flex; align-items: flex-start; gap: 14px; border-top: 1px solid var(--line); }
.badge-box { display: grid; flex: none; place-items: center; }
.badge-box .club-crest { width: 72px; height: 72px; }
/* On the white card the ring is drawn as on a plain header, not in the club header's see-through colours */
.badge-row .badge-box.club-look { --hdr-chip: var(--surface); --hdr-line: var(--line-2); }
/* Beside it, the crest as it shows in the header, next to your own circle (PRED-746) */
.badge-row > .badge-prev { flex: 1 1 230px; margin: 0; }
/* In the adjust step the preview sits in a column, so it takes only its own height (PRED-746) */
.adj-ctl .badge-prev { flex: none; margin: 0; }
.badge-prev .sp-hdr .avatar { margin-left: auto; }
/* The adjust step (PRED-746): a large circle to drag in, with crosshairs, beside its controls; on a
   phone the controls drop below and the circle is centred */
.badge-form { flex-basis: 100%; }
.badge-adj { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.badge-adj[hidden] { display: none; }
.adj-view {
  position: relative; flex: none; margin-inline: auto; padding: 10px; border-radius: var(--r-md);
  background: var(--surface-2); touch-action: none; cursor: grab;
  --hdr-chip: var(--surface); --hdr-line: var(--line-2);
}
.adj-view .club-crest.big {
  width: 180px; height: 180px;
  background-image: repeating-conic-gradient(var(--surface-3) 0 25%, transparent 0 50%); background-size: 16px 16px;
}
.adj-view .club-crest.big.ring { background-color: var(--hdr-chip); }
.club-crest.adj .cr-in img { position: absolute; width: auto; height: auto; max-width: none; }
.adj-guide { position: absolute; inset: 10px; border-radius: 50%; pointer-events: none; }
.adj-guide::before, .adj-guide::after { content: ""; position: absolute; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.adj-guide::before { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-.5px); }
.adj-guide::after { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-.5px); }
.adj-ctl { display: flex; flex: 1 1 220px; flex-direction: column; gap: 12px; }
.adj-slider { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.adj-slider span { flex: none; width: 106px; }
.adj-slider input { flex: 1; accent-color: var(--accent); }
.adj-reset { align-self: flex-start; }
.badge-ring { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.badge-ring small { display: block; font-size: 12px; color: var(--muted); }
.badge-ring .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.badge-ring .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.badge-ring .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 25%, transparent); }
/* The badge's round icons, a word under each (PRED-579); the help line runs under the row */
.badge-row { flex-wrap: wrap; align-items: center; }
.badge-acts { display: flex; gap: 14px; }
.icon-act { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; font-size: 12px; color: var(--ink); text-decoration: none; cursor: pointer; }
.icon-act .bi { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; border: 1px solid var(--line-2); background: var(--surface); }
.icon-act.go .bi { background: var(--accent); border-color: var(--accent); color: #fff; }
.icon-act.del .bi { color: var(--red); }
.badge-row form:has(:focus-visible) + .badge-acts .icon-act.go .bi { outline: 3px solid var(--accent); outline-offset: 2px; }
.badge-help { flex-basis: 100%; margin: 0; }
/* Replacing the badge isn't a deletion: an amber check, not red */
.acct-confirm.ask { background: var(--amber-soft); }
/* Club colours on Look (PRED-186): suggestions, pick your own and the preview. The colours
   themselves come from the club's own style sheet (clubs:colours_css) */
.look-sub {
  margin: 0 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted);
  font: 600 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.pairs { display: flex; flex-wrap: wrap; gap: 8px; }
/* The badge's two suggestions are the same size, side by side (PRED-588) */
.pairs.two { display: grid; grid-template-columns: 1fr 1fr; max-width: 440px; }
.kit-pair {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 6px; border: 1px solid var(--line-2);
  border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 13px/1 var(--body); cursor: pointer;
}
.kit-pair[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sw2 { display: inline-flex; flex: none; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.sw2 i { flex: 1; }
/* Or choose your own: Main and Second open an Office-style pop-out of kit colours (PRED-584, dashboard v80) */
.cpair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cbtn {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 6px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); font: 500 15px var(--body); color: var(--ink);
}
.cbtn .csw { flex: none; width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cbtn .bi { margin-left: auto; }
.cbtn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cbtn[aria-expanded="true"] .bi { transform: rotate(180deg); }
.cpop { margin-top: 8px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); }
.cpop-h { margin: 14px 0 8px; font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cpop-h:first-child { margin-top: 0; }
/* Recent keeps the same edge as Kit colours (the owner, PRED-584) */
.kit-grid, .recent-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px 6px; }
.recent-grid { gap: 6px; }
.kit-grid button, .recent-grid button { aspect-ratio: 1.4; min-width: 0; padding: 0; border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.kit-grid button[aria-pressed="true"], .recent-grid button[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.cmore {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 12px; padding: 10px 0 0;
  border: 0; border-top: 1px solid var(--line); background: none; font: 500 14px var(--body); color: var(--ink);
}
/* More colours: a colour square with a crosshair, and a colour strip */
.csq {
  position: relative; height: 170px; border-radius: var(--r-sm); cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue, #f00));
}
.csq i { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); pointer-events: none; }
.chue { position: relative; height: 22px; margin-top: 12px; border-radius: 11px; cursor: pointer; touch-action: none; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.chue i { position: absolute; top: -3px; width: 28px; height: 28px; margin-left: -14px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); pointer-events: none; }
.cvals { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 6px; margin-top: 12px; }
.cvals label { display: grid; gap: 3px; font: 600 11px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cvals input { width: 100%; min-width: 0; min-height: 44px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-family: var(--code-font); }
.ccmp { display: flex; height: 34px; margin-top: 12px; overflow: hidden; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); font: 500 12px/34px var(--body); text-align: center; }
.ccmp span { flex: 1; }
.cbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* Brand rule 19 (PRED-764): a Save on its own ends the form, full width on phones; a ghost button
   that starts a delete shows the same red bin as the red button that confirms it */
@media (max-width: 575px) {
  .gr-save > .btn:only-child, .site-form-btns > .btn:only-child, .cbtns > .btn:only-child { flex: 1; }
}
.btn-outline-secondary .bi-trash3 { color: var(--red); }

.warn-t { color: var(--amber); }
.site-prev { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.sp-hdr { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--hdr-bg); color: var(--hdr-ink); }
.sp-hdr b { font: 500 19px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.sp-home { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sp-home .h-title { display: block; font-size: 28px; }
.sp-home .pg { display: inline-flex; width: 54px; margin-top: 10px; }
/* Home in the club's colours: a kit stripe, the headline and today (PRED-186; Home itself is PRED-133) */
.home-f.club .h-mast::before {
  content: ""; display: block; width: 56px; height: 5px; margin-bottom: 12px; border-radius: 3px;
  background: linear-gradient(90deg, var(--club-0) 50%, var(--club-2) 50%); box-shadow: 0 0 0 1px var(--line);
}
.home-f.club .h-eb { color: var(--club-2t); }
.home-f.club .h-title b { color: var(--club-1t); }
.home-f.club .pg.today .pg-m { background: var(--club-1); color: var(--club-ink); }
/* Home's chosen day, links, All done and Done labels and main button in the club's colours (PRED-580,
   dashboard v81). Ticks, warnings and scores keep their own colours. The shades come from club_colours.css */
.home-f.club .pg[aria-current] { box-shadow: 0 0 0 2px var(--club-edge), 0 10px 18px -10px var(--club-edge); }
.home-f.club .more { color: var(--club-link); text-decoration: underline 2px var(--club-line); text-underline-offset: 3px; }
.home-f.club .pill.ok { background: color-mix(in srgb, var(--club-1) 14%, var(--surface)); color: var(--club-link); box-shadow: inset 0 0 0 1px var(--club-line); }
.home-f.club .btn-primary.h-main { --accent: var(--club-btn); --accent-ink: #FFFFFF; }
/* The club's crest (PRED-746, dashboard v106): the space of a header circle (36px). With a ring it is
   built like the header buttons (their fill and 1px line), then an invisible buffer, then the badge,
   or the initials on the club's second colour; without a ring the badge fills the space. The badge is
   fitted to its circle when saved. Sized from the crest (cqw) apart from the 1px line, so every size draws the same */
.club-crest {
  container-type: size; position: relative; display: inline-block; flex: none; width: 36px; height: 36px;
  border-radius: 50%;
}
.club-crest.ring { background: var(--hdr-chip); box-shadow: inset 0 0 0 1px var(--hdr-line); }
.club-crest .cr-in { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
.club-crest.ring .cr-in { inset: 11cqw; }
.club-crest .cr-in img { display: block; width: 100%; height: 100%; }
.club-crest .cr-in b {
  display: grid; place-items: center; width: 100%; height: 100%; background: var(--crest-fill, var(--accent));
  color: var(--crest-ink, #fff); font: 600 30cqw/1 var(--display); letter-spacing: .02em;
}
.join-club .club-crest { width: 56px; height: 56px; }
/* A club's own colours fill the header; its text and buttons switch to white or dark to stay readable */
.site-header.branded .site-brand, .site-header.branded .topnav a, .site-header.branded .hdr-btn { color: var(--hdr-ink); }
/* Home: your table row in the club's colours (PRED-133) */
.home-f.club .lr.me { background: linear-gradient(90deg, color-mix(in srgb, var(--club-1) 16%, transparent), transparent); box-shadow: inset 3px 0 0 var(--club-1t); }
/* An expired announcement on News, faded (PRED-193) */
.site-row.is-off { opacity: .6; }
/* An announcement on News (PRED-840, v139): megaphone, message, status, buttons in one line; on a
   phone the status and buttons share a line under the message */
.site-row.news-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.news-row .grow b { overflow-wrap: anywhere; }
.news-row .acts { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .site-row.news-row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 8px; }
  .news-row .pill { grid-column: 2; grid-row: 2; justify-self: start; }
  .news-row .acts { grid-column: 2; grid-row: 2; justify-self: end; }
}
/* Home news ticker (PRED-192): a slim bar; pauses on hover or focus; still, and scrollable by hand,
   with reduced motion. Each item adds about 8 seconds to the loop, so it scrolls at an even pace */
.ticker {
  display: flex; align-items: stretch; min-height: 44px; margin: 0 0 18px; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1);
}
.tk-lbl {
  display: flex; flex: none; align-items: center; gap: 8px; padding: 0 14px; border-right: 1px solid var(--line-2);
  background: radial-gradient(120% 160% at 0 0, color-mix(in srgb, var(--gold) 20%, transparent), transparent 75%);
  color: var(--gold-ink); font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
}
@media (max-width: 520px) { .tk-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.tk-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .tk-dot::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    border: 2px solid color-mix(in srgb, var(--gold) 60%, transparent); animation: ring-out 2s ease-out infinite;
  }
}
.tk-view {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent);
}
.tk-track { display: flex; width: max-content; animation: tk var(--tk-dur, 40s) linear infinite; }
.tk-n1, .tk-n2 { --tk-dur: 16s; } .tk-n3 { --tk-dur: 24s; } .tk-n4 { --tk-dur: 32s; } .tk-n5 { --tk-dur: 40s; }
.tk-n6 { --tk-dur: 48s; } .tk-n7 { --tk-dur: 56s; } .tk-n8 { --tk-dur: 64s; } .tk-n9 { --tk-dur: 80s; }
.ticker:focus-within .tk-track { animation-play-state: paused; }
@media (hover: hover) { .ticker:hover .tk-track { animation-play-state: paused; } }
@keyframes tk { to { transform: translateX(-50%); } }
.tk-group { display: flex; padding-left: 16px; }
.tk-item {
  --k: var(--faint); display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--ink); font: 500 14px/1.2 var(--body); text-decoration: none; white-space: nowrap;
}
.tk-item::after { content: ""; width: 4px; height: 4px; margin: 0 20px; border-radius: 50%; background: var(--faint); }
@media (hover: hover) { a.tk-item:hover span { text-decoration: underline; text-underline-offset: 3px; } }
.tk-item .bi { color: var(--k); font-size: 14px; }
.tk-club { --k: var(--gold); } .tk-open { --k: var(--accent); } .tk-few { --k: var(--amber); } .tk-full { --k: var(--red); }
/* The nudge to add Flare to the home screen (PRED-854), not shown when Flare is opened from there */
.tk-app { --k: var(--accent); }
@media (display-mode: standalone) { .tk-app, .ticker:not(:has(.tk-item:not(.tk-app))) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .tk-track { animation: none; }
  .tk-view { overflow-x: auto; scrollbar-width: none; }
  .tk-group[aria-hidden] { display: none; }
}
.news-preview .ticker { margin: 0; }
/* New club message in the club inbox (PRED-443) */
@media (max-width: 640px) { .nb-head { flex-direction: column; align-items: stretch; } .nb-head .cm-new { align-self: center; } }
.cm-form { padding: 14px; border: 1px solid var(--paper-line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.cm-form textarea { min-height: 96px; resize: vertical; }
.cm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cm-row.end { justify-content: flex-end; }
/* Suggestion polls (PRED-376, the PRED-375 design): a neutral slate, never a game colour */
.gbadge.gb-poll > span { background: var(--steel-soft); color: var(--steel); border-color: var(--ring-gap, var(--paper, var(--bg))); }
/* The warm card while a vote is wanted (PRED-407, dashboard v58): lighter cream than the paper, gold edge */
.poll-card {
  margin: 4px 0 8px; padding: 10px 11px; border: 1px solid rgba(201, 154, 18, .28); border-left: 3px solid var(--gold);
  border-radius: var(--r-md); background: var(--poll-warm); color: var(--ink); text-align: left; box-shadow: 0 2px 6px -4px rgba(0, 0, 0, .15);
}
/* Vote in Your week lands here, clear of the header */
.poll-card, .poll-row { scroll-margin-top: 96px; }
.poll-head { display: flex; align-items: center; gap: 10px; }
.poll-head .grow { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.poll-head b { font-size: 15px; }
.poll-head .grow > span { font-size: 12px; color: var(--muted); }
/* Which game type a poll is for, above its question (PRED-575) */
.poll-kind { font: 600 11px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.poll-tag { flex: none; padding: 3px 7px; border-radius: 999px; background: var(--steel-soft); color: var(--steel); font: 600 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.poll-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.poll-facts span { padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font-size: 12px; }
.poll-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.poll-opt {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: 14px; text-align: left;
}
.poll-opt .r { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--faint); border-radius: 50%; }
.poll-opt.picked { border-color: color-mix(in srgb, var(--steel) 45%, transparent); background: var(--steel-soft); font-weight: 600; }
.poll-opt.picked .r { border: 5px solid var(--steel); }
.poll-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.poll-send { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 13px; border: 0; border-radius: 999px; background: var(--steel-soft); color: var(--steel); font-size: 13px; font-weight: 600; }
.poll-row .nrow { width: 100%; }
.poll-res { display: flex; flex-direction: column; gap: 5px; padding: 0 0 10px 46px; }
.poll-res p { margin: 4px 0 0; font-size: 12px; opacity: .8; }
.voted { display: inline-flex; align-items: baseline; gap: 4px; color: var(--steel); font-weight: 600; }
.poll-bar { position: relative; height: 28px; overflow: hidden; border-radius: 7px; background: rgba(80, 60, 20, .06); font-size: 13px; }
.poll-bar i { position: absolute; inset: 0 auto 0 0; background: rgba(80, 60, 20, .12); }
.poll-bar.top i { background: rgba(70, 89, 108, .22); }
.poll-bar span { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 9px; }
:is(.poll-bar, .pv-res) > i.w0 { width: 0%; } :is(.poll-bar, .pv-res) > i.w5 { width: 5%; } :is(.poll-bar, .pv-res) > i.w10 { width: 10%; } :is(.poll-bar, .pv-res) > i.w15 { width: 15%; } :is(.poll-bar, .pv-res) > i.w20 { width: 20%; } :is(.poll-bar, .pv-res) > i.w25 { width: 25%; } :is(.poll-bar, .pv-res) > i.w30 { width: 30%; } :is(.poll-bar, .pv-res) > i.w35 { width: 35%; } :is(.poll-bar, .pv-res) > i.w40 { width: 40%; } :is(.poll-bar, .pv-res) > i.w45 { width: 45%; } :is(.poll-bar, .pv-res) > i.w50 { width: 50%; } :is(.poll-bar, .pv-res) > i.w55 { width: 55%; } :is(.poll-bar, .pv-res) > i.w60 { width: 60%; } :is(.poll-bar, .pv-res) > i.w65 { width: 65%; } :is(.poll-bar, .pv-res) > i.w70 { width: 70%; } :is(.poll-bar, .pv-res) > i.w75 { width: 75%; } :is(.poll-bar, .pv-res) > i.w80 { width: 80%; } :is(.poll-bar, .pv-res) > i.w85 { width: 85%; } :is(.poll-bar, .pv-res) > i.w90 { width: 90%; } :is(.poll-bar, .pv-res) > i.w95 { width: 95%; } :is(.poll-bar, .pv-res) > i.w100 { width: 100%; }
.poll-prev { display: grid; gap: 10px; margin-top: 6px; }
.poll-prev-paper { padding: 10px 12px; }
.poll-prev-paper .paper-sub { margin-top: 0; }
.poll-choices { display: grid; gap: 6px; }
.poll-arow { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.poll-arow-top { display: flex; align-items: center; gap: 10px; }
.poll-arow-top .grow { display: flex; flex: 1; flex-direction: column; min-width: 0; }
/* Results, Close now and Delete: one size, centred, on one line even on a phone (PRED-635) */
.poll-arow-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 120px); justify-content: center; gap: 6px; }
.poll-arow-acts .btn { width: 100%; white-space: nowrap; --bs-btn-padding-x: .5rem; }
.poll-ares { display: flex; flex-direction: column; gap: 5px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); }
.poll-ares .poll-bar { background: var(--surface-3); }
.poll-ares .poll-bar i { background: var(--steel-soft); }
.poll-ares .poll-bar.top i { background: var(--steel-strong); }
/* The Club Admin's poll Results (PRED-752, dashboard v108): the meta line breaks only between
   its parts; each choice can wrap, with its votes (in the poll's steel) and share in a column;
   tapping a choice opens who picked it */
.pv-meta { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.pv-q { margin: 0 0 2px; font-size: 14px; }
.pv-turnout { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.pv-tap summary { list-style: none; cursor: pointer; }
.pv-tap summary::-webkit-details-marker { display: none; }
.pv-res { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 34px 7px 10px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); font-size: 14px; }
.pv-res > i { position: absolute; inset: 0 auto 0 0; background: var(--steel-soft); }
.pv-res.top > i { background: var(--steel-strong); }
.pv-res > b { position: relative; flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.pv-res.pv-wait > b { color: var(--muted); }
.pv-n { position: relative; flex: none; text-align: right; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pv-n b { display: block; font-size: 14px; font-weight: 600; color: var(--steel); }
.pv-n span { font-size: 12px; color: var(--muted); }
.pv-chev { position: absolute; right: 10px; top: 50%; translate: 0 -50%; color: var(--muted); }
.pv-tap[open] .pv-chev { rotate: 180deg; }
.pv-list { margin: 4px 0 2px; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.pv-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line); font-size: 14px; }
.pv-list li:first-child { border-top: 0; }
.pv-list .grow { flex: 1; min-width: 0; }
.pv-when, .pv-none { font-size: 12px; color: var(--muted); }
.pv-facts { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.pv-facts li { display: flex; align-items: center; gap: 7px; }
.acct-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--red-soft); }
.acct-confirm-b { display: flex; gap: 6px; }
/* Voting on Home (PRED-377): the picked choice turns soft slate; a voted poll folds into a row */
.poll-opt { cursor: pointer; }
.poll-opt:has(input:checked) { border-color: color-mix(in srgb, var(--steel) 45%, transparent); background: var(--steel-soft); font-weight: 600; }
.poll-opt:has(input:checked) .r { border: 5px solid var(--steel); }
.poll-opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
.poll-opts { margin: 8px 0 0; padding: 0; border: 0; }
button.poll-send { cursor: pointer; }
.poll-row summary { list-style: none; cursor: pointer; }
.poll-row summary::-webkit-details-marker { display: none; }
.poll-row[open] summary .bi-chevron-down { transform: rotate(180deg); }
.poll-bar.mine span b::after { content: " · your vote"; font-weight: 400; opacity: .7; }

/* Club, Support (PRED-212 to PRED-220, dashboard v58): the intro, the ticket list, a ticket's page */
.sup-intro { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.sup-intro .grow { flex: 1 1 240px; }
.sup-h { margin: 0 0 4px; font: 500 18px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.sup-row .grow { gap: 3px; }
.sup-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sup-id { min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-wait { background: color-mix(in srgb, var(--amber-soft) 40%, var(--surface)); }
.sup-form { display: grid; gap: 14px; }
.sup-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-kind {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); font-size: 14px; cursor: pointer;
}
.sup-kind:has(:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sup-kind input { accent-color: var(--accent); }
.sup-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; }
.sup-title { margin: 2px 0 0; }
.sup-notes { display: flex; flex-direction: column; gap: 10px; }
.sup-notes:not(:empty) { margin-bottom: 14px; }
.sup-page { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 761px) { .sup-page { grid-template-columns: minmax(0, 1fr) 300px; } .sup-side { order: 2; } }
.sup-steps { display: flex; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; }
.sup-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--muted); }
.sup-steps li > span, .sup-steps li > .bi {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 12px;
}
.sup-steps li.done > .bi { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sup-steps li.now { color: var(--ink); font-weight: 600; }
.sup-steps li.now > span { border: 2px solid var(--accent); color: var(--accent); }
.sup-facts { display: grid; gap: 8px; margin: 0; }
.sup-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 14px; }
.sup-facts dt { font-weight: 400; color: var(--muted); }
.sup-facts dd { margin: 0; }
.sup-thread { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.sup-msg { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.sup-msg.by-team { background: var(--blue-soft); }
.sup-msg p { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; }
.sup-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.sup-who > :last-child { margin-left: auto; font-size: 12px; }
.sup-event { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.sup-reply { border-top: 1px solid var(--line); }
.sup-reply .gr-save { padding: 12px 0 0; }
.sup-team { display: grid; gap: 12px; }
.sup-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sup-shot {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); font-size: 13px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
.sup-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); }
.sup-counts a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; border-radius: var(--r-sm); background: var(--surface-2); color: inherit; text-align: center; text-decoration: none; }
.sup-counts a.warn { background: var(--amber-soft); color: var(--amber); }
@media (hover: hover) { .sup-counts a:hover { box-shadow: inset 0 0 0 1px var(--line-2); } }
.sup-counts b { font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.sup-counts span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sup-msg.internal { background: color-mix(in srgb, var(--amber-soft) 50%, var(--surface)); border: 1px dashed var(--amber); }
.sup-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
/* A ticket's status as a journey line for the Flare team (PRED-577): round icon steps joined by a line
   that is green up to where the ticket is; the step picked is solid, amber while the club has it */
/* The team box's headings match "Reply to the club", not the browser's large legend */
.sup-team legend { font-size: inherit; }
.tk-line { display: grid; grid-template-columns: repeat(5, 1fr); }
.tk-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; line-height: 1.15; text-align: center; color: var(--muted); }
.tk-step:not(:first-child)::before { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 3px; background: var(--line-2); z-index: 0; }
.tk-step.past::before, .tk-step.on::before, .tk-step:has(:checked)::before { background: var(--accent); }
.tk-step .dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-2); font-size: 15px; }
label.tk-step { cursor: pointer; }
label.tk-step .dot { border-color: var(--accent); color: var(--accent); }
.tk-step.past .dot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tk-step.on .dot, .tk-step:has(:checked) .dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.tk-step.on, .tk-step:has(:checked) { color: var(--ink); font-weight: 600; }
.tk-step.wait:has(:checked) .dot { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.tk-step:has(:focus-visible) .dot { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Outcome, only once Resolved is picked */
.tk-outcome { display: none; }
.sup-team:has(input[name="status"][value="resolved"]:checked) .tk-outcome { display: block; }
.tk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.tk-tiles label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 40px; padding: 6px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); font-size: 13px; line-height: 1.15; cursor: pointer; }
.tk-tiles label:has(:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); font-weight: 600; }
.tk-tiles label:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }

/* Dark mode's few rules beyond the tokens (PRED-161, dashboard v58): the status band's edge takes the
   game's glow and its pill turns lighter. Both copies must stay the same: a test checks */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scard { --gc: var(--glow); }
  :root:not([data-theme="light"]) .sc-pill { background: color-mix(in srgb, var(--c1) 30%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 55%, transparent); color: var(--ink); }
}
:root[data-theme="dark"] .scard { --gc: var(--glow); }
:root[data-theme="dark"] .sc-pill { background: color-mix(in srgb, var(--c1) 30%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 55%, transparent); color: var(--ink); }

/* Plan the cup: a standalone cup's rounds on its Setup page (PRED-118, dashboard v63) */
.sched-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.sched-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sched-ico { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-3); color: var(--muted); flex: none; }
.fx-sub { margin: 0 16px; padding-top: 12px; border-top: 1px solid var(--line); font: 600 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plan-facts { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 4px 16px 12px; }
.plan-facts b { display: block; font: 600 28px/1 var(--display); }
.plan-facts span { font-size: 13px; color: var(--muted); }
.plan-sub { margin: 6px 16px 0; }
.plan-row { padding: 10px 16px; align-items: center; }
.plan-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.setup-row { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.setup-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.setup-top strong { font: 500 17px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.setup-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; max-width: 560px; }
.setup-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.setup-f select { font: 500 15px/1.2 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px; min-height: 44px; }
.setup-list { display: flex; flex-direction: column; gap: 6px; }
.m-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
/* Pick matches: each competition's matches in the week, under its name and game weeks (PRED-788) */
.pick-grp { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.pick-grp .grow { flex: 1; }
.pick-grp b { font-weight: 600; }
.pick-grp small { display: block; font-size: 12px; color: var(--muted); }
.m-line { display: grid; grid-template-columns: 78px minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink); text-align: left; }
.ml-time { font-size: 11px; color: var(--muted); font-weight: 600; }
.ml-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ml-side > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-v { color: var(--faint); font-size: 11px; text-align: center; }
.m-line.pick-m { cursor: pointer; min-height: 40px; }
.m-line.pick-m:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.m-line.pick-m:not(:has(input:checked)) { color: var(--muted); }
.m-line.pick-m:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ml-side .crest { width: 18px; height: 18px; }
.ml-side .flag { width: 21px; height: 14px; }

/* Tie-breakers, in order: a cup's setup (PRED-122, dashboard v63) */
.tb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.tb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
.tb-row .step-n { margin: 0; flex: none; }
.tb-row .grow { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tb-row.is-off { background: var(--surface-2); border-style: dashed; }
.tb-row.is-off b { color: var(--muted); }
.tb-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px dashed var(--line-2); }
.tb-move { display: flex; gap: 4px; }
.tb-sub { margin: 6px 0 0; font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tb-none { padding: 10px; border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.tb-final { margin-top: 6px; max-width: 640px; background: var(--surface-2); border-style: solid; }
.tb-final > .bi { flex: none; width: 24px; text-align: center; color: var(--accent); }

/* The league cup's tie rules show only while the cup is on (PRED-475); once the switch is
   fixed it has no box, and the section leaves the cup's boxes out if it was off */
.fx-grid:has(input[name="league_cup"]:not(:checked)) .if-cup { display: none; }
/* A tournament's knockout options, only for the full competition (PRED-868) */
.fx-grid:not(:has(input[name="stages"][value="full"]:checked)) .if-full { display: none; }
.fx-grid:has(input[name="draw_pick"]:not(:checked)) .if-drawpick { display: none; }
.fx-grid:has(input[name="tournament_picks"]:not(:checked)) .if-picks { display: none; }
.setup-secs:not(:has(input[name="stages"][value="full"]:checked)) .pl-grid .if-stages-full { display: none; }
.setup-secs:has(input[name="league_cup"]:not(:checked)) .pl-grid .if-league_cup { display: none; }
#sx-cup:has(input[name="league_cup"]:not(:checked)) .sec-note { display: none; }
/* A league cup's rounds on the league's Setup (PRED-475, dashboard v63) */
.lc-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.lc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); }
.lc-row:first-child { border-top: 0; }
.lc-row strong { font-weight: 600; }
.lc-row select { flex: none; width: auto; min-width: 150px; }
.lc-free { font-size: 13px; font-style: italic; color: var(--muted); background: var(--surface-2); }
.lc-wk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }

/* The Cup page (PRED-113, dashboard v63): Your path, a step per round, each a link that
   chooses the round; the Schedule, Prizes and How it works buttons and their panel */
.path-card .band { background: color-mix(in srgb, var(--cup-a) 85%, var(--surface)); }
.path-card .card-pad { padding: 14px 12px 10px; }
.path-hint { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 16px 0; }
.path-hint .bi { color: var(--accent); }
.path { list-style: none; margin: 0; padding: 3px 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.path::-webkit-scrollbar { display: none; }
.st { flex: 1; min-width: 52px; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; text-align: center; }
.st::before { content: ""; position: absolute; top: 17px; left: -50%; right: 50%; height: 2px; background: var(--line-2); z-index: 0; }
.st:first-child::before { display: none; }
.st.won::before, .st.next::before, .st.lost::before { background: var(--accent); }
.st-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; padding: 4px 2px 6px; border-radius: var(--r-sm); color: inherit; text-decoration: none; }
@media (hover: hover) { .st-btn:hover { background: var(--surface-2); } }
.st-btn[aria-current="true"] { background: var(--accent-soft); }
.st-btn[aria-current="true"] .st-name { color: var(--accent); }
.st-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--faint); border: 2px solid var(--surface); }
.st.won .st-dot { background: var(--accent); color: var(--accent-ink); }
.st.lost .st-dot { background: var(--red); color: #fff; }
.st.next .st-dot { background: var(--surface); box-shadow: 0 0 0 2px var(--amber); color: var(--amber); }
.st.next .st-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); animation: st-blink 1.4s infinite; }
@keyframes st-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .st.next .st-dot::after { animation: none; } }
.st-name { font: 600 13px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.st-res { font-size: 11px; color: var(--muted); white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.st.gone { opacity: .45; }
.st-res .only-phone { display: none; }
@media (max-width: 575.98px) { .st-res .only-wide { display: none; } .st-res .only-phone { display: inline; } }
.path-btns { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.path-btns .chip { min-height: 36px; text-decoration: none; }
.path-btns .chip[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.path-btns.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.path-btns.three .chip { justify-content: center; white-space: nowrap; }
@media (max-width: 440px) { .path-btns.three .chip { flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 4px; font-size: 12px; } }
.path-panel { border-top: 1px solid var(--line); }
.path-panel .pz-body { padding: 14px 16px; }
.rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.rules b { color: var(--ink); }
.tie-steps { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.sched { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sched-row:first-child { border-top: 0; }
.sched-row.past { opacity: .6; }
.sched-row.now .sched-ico { background: var(--amber-soft); color: var(--amber); }
.sched-row.sel { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }

/* A standalone cup's Predict page (PRED-481, dashboard v63): the matches, then Your tie beside
   them from 900px; a kicked-off row shows your score and your opponent's */
.cup-play { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .cup-play { grid-template-columns: 1fr 1fr; } }
.cup-tie { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; }
.cup-tie .ct-v { color: var(--muted); margin: 0 4px; }
.p-theirs { margin: 0; color: var(--muted); text-align: right; }
.p-theirs b { color: var(--ink); }

/* The Cup page's Fixtures card (PRED-114, dashboard v63): a round as a score sheet, one line
   per tie, your tie tinted, the winner ticked, a note under the score; the byes in a fold */
.res-card .band { background: var(--surface-2); }
.rd-title { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.rd-title b { font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.rd-title > span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.rd-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.rd-find { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 12px; background: var(--surface); color: var(--muted); min-height: 38px; flex: 1; max-width: 260px; margin: 0; }
.rd-find input[type="search"] { border: 0; outline: 0; background: none; font: 500 14px/1 var(--body); color: var(--ink); width: 100%; min-width: 0; padding: 8px 0; }
/* On a phone, Find a player has a line of its own, centred, so a long summary can't squeeze it (PRED-1029, v191) */
@media (max-width: 767px) { .rd-tools .rd-find { flex-basis: 100%; max-width: 320px; margin: 0 auto; } }
.tl { display: grid; grid-template-columns: 34px minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.tl:first-child { border-top: 0; }
.tl.alt { background: var(--surface-2); }
.tl.mine { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.tl-no { font: 600 11px/1 var(--display); color: var(--faint); letter-spacing: .04em; cursor: help; }
.tl.mine .tl-no { color: var(--accent); }
.tl-side { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tl-side.a { flex-direction: row-reverse; text-align: right; }
.tl-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tl-side.win .tl-n { font-weight: 600; }
.tl-side.lose { opacity: .5; }
.tl-side.me .tl-n { color: var(--accent); font-weight: 600; }
.tl-side .bi { color: var(--accent); font-size: 13px; }
.tl-side.tbd .tl-n { color: var(--faint); font-size: 12px; }
.tl-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tl-sc { font: 500 18px/1 var(--display); font-variant-numeric: tabular-nums; background: var(--surface-3); border-radius: var(--r-xs); padding: 4px 8px; min-width: 58px; text-align: center; }
.tl-sc i { font-style: normal; opacity: .4; margin: 0 3px; }
.tl-v { font: 600 13px/1 var(--display); color: var(--faint); letter-spacing: .1em; }
.tl-note { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tl-note.hot { color: var(--amber); }
.tl-empty { margin: 0; padding: 16px; text-align: center; }
.rd-byes { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); }
.rd-byes summary { cursor: pointer; font-weight: 500; color: var(--accent); font-size: 14px; }
.bye-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bye { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; background: var(--surface-2); border-radius: 999px; padding: 3px 10px; }

/* The cup's bracket (PRED-114, dashboard v63): from 768px, in place of the round's list; its
   height from a size class, as inline styles are blocked by the security policy */
.bk-wrap { display: none; }
@media (min-width: 768px) { .bk-wrap { display: block; } .tl-list.bk-phone { display: none; } }
.bk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.bk-scroll { overflow: auto; padding: 16px 16px 18px; overscroll-behavior: contain; }
.bk { --h: 64px; --slots: 1; display: flex; min-width: max-content; height: calc(var(--slots) * var(--h) + 36px); margin: 0 auto; }
.bk.bk-s2 { --slots: 2; }
.bk.bk-s4 { --slots: 4; }
.bk-side { display: flex; }
.bk-col { display: flex; flex-direction: column; width: 156px; padding: 0 12px; flex: none; }
.bk-col h4 { margin: 0 0 12px; height: 24px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 600 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.bk-col h4 span { font: 500 11px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--faint); }
.bk-stack { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.bp { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.bm { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-xs); background: var(--surface); font-size: 12px; cursor: help; }
.bm-no { position: absolute; top: -8px; left: 6px; font: 600 11px/1 var(--display); letter-spacing: .04em; padding: 2px 4px; border-radius: 4px; background: var(--surface-3); color: var(--muted); }
.bm-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; height: 22px; padding: 0 7px; }
.bm-row + .bm-row { border-top: 1px solid var(--line); }
.bm-row .sn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-row .sc { font: 600 13px/1 var(--display); font-variant-numeric: tabular-nums; }
.bm-row.win { font-weight: 600; }
.bm-row.lose { color: var(--faint); }
.bm-row.tbd .sn { color: var(--faint); font-size: 11px; }
.bm-row.me { color: var(--accent); }
.bm.mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bm.mine .bm-no { background: var(--accent); color: var(--accent-ink); }
.bk-side.L .bp:not(.single)::after { content: ""; position: absolute; right: -12px; top: 25%; bottom: 25%; width: 12px; border: 2px solid var(--line-2); border-left: 0; border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.bk-side.R .bp:not(.single)::after { content: ""; position: absolute; left: -12px; top: 25%; bottom: 25%; width: 12px; border: 2px solid var(--line-2); border-right: 0; border-radius: var(--r-xs) 0 0 var(--r-xs); }
.bk-side.L .bp.single::after { content: ""; position: absolute; right: -12px; top: 50%; width: 12px; border-top: 2px solid var(--line-2); }
.bk-side.R .bp.single::after { content: ""; position: absolute; left: -12px; top: 50%; width: 12px; border-top: 2px solid var(--line-2); }
.bk-side.L .bk-col.fed .bm::before { content: ""; position: absolute; left: -13px; top: 50%; width: 12px; border-top: 2px solid var(--line-2); }
.bk-side.R .bk-col.fed .bm::before { content: ""; position: absolute; right: -13px; top: 50%; width: 12px; border-top: 2px solid var(--line-2); }
.bk-final { width: 176px; }
.bk-final .bk-stack { justify-content: center; gap: 10px; }
.bk-final .bm { border-width: 2px; border-color: var(--gold); }
.bk-final .bm::before, .bk-final .bm::after { content: ""; position: absolute; top: 50%; width: 12px; border-top: 2px solid var(--line-2); }
.bk-final .bm::before { left: -14px; }
.bk-final .bm::after { right: -14px; }
.bk-trophy { align-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cup-a); color: var(--gold); font-size: 22px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent); }
.bk-key { margin: 0; padding: 0 16px 14px; }

/* Desktop: the round's ties in two columns, your tie full width on top (dashboard v63) */
@media (min-width: 900px) {
  .tl-list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
  .tl.mine { grid-column: 1 / -1; }
  .tl.alt { background: none; }
  .tl:not(.mine):nth-child(even of :not(.mine)) { border-left: 1px solid var(--line); }
  .tl-empty { grid-column: 1 / -1; }
}

/* Last man standing's Rules (PRED-225): a rule's own box shows only with its choice (no JavaScript) */
.fx-grid:not(:has(input[name="draws"][value="fee"]:checked)) .if-draw-fee { display: none; }
.fx-grid:not(:has(input[name="draws"][value="strikes"]:checked)) .if-strikes { display: none; }
.fx-grid:not(:has(input[name="all_out"][value="threshold"]:checked)) .if-threshold { display: none; }
.fx-grid:not(:has(input[name="buyback"][value="True"]:checked)) .if-buyback { display: none; }

/* Last man standing's Pick your team (PRED-226): a row per team, the chosen one tinted */
.lmsp-hint { display: flex; gap: 6px; margin: 0; padding: 10px 16px; }
.lms-picks { margin: 0; padding: 0; border: 0; }
.lms-pick { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.lms-pick .grow { display: flex; flex-direction: column; min-width: 0; }
.lms-pick:has(input:checked) { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.lms-pick input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }

/* Last man standing's buy-back card (PRED-235, dashboard v64): the offer, or how to pay */
.bb-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bb-head .su-h { margin: 0; }
.bb-card form { margin: 0; }
.bb-card form > .btn { min-height: 48px; }

/* Last man standing's Your season (PRED-227, dashboard v63): a slot per week, newest first in
   the page. The row runs
   right to left so it opens scrolled to its right-hand end with no JavaScript; each slot
   reads left to right */
.lmsr-card { margin-bottom: 14px; }
.lmsr { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px; scrollbar-width: none; direction: rtl; }
.lmsr::-webkit-scrollbar { display: none; }
.lmsr > :first-child { margin-right: auto; }
.lmsr-s { direction: ltr; flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: var(--r-sm); background: var(--surface-2); position: relative; }
.lmsr-s em { font: 500 12px/1 var(--display); font-style: normal; color: var(--muted); }
.lmsr-s > .bi { position: absolute; top: 4px; right: 5px; color: var(--accent); }
.lmsr-s.lost > .bi { color: var(--red); }
/* Your shield in Your season (PRED-866, dashboard v158): a chip in the heading, and the shield in place of the tick */
.lmsr-s > .bi.sh-tick { color: var(--shield); }
.sh-band { display: flex; gap: 6px; align-items: center; }
.sh-chip { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--body); padding: 4px 9px; border-radius: 999px; white-space: nowrap; background: var(--shield-soft); color: var(--shield); }
.sh-chip.used { background: var(--surface-3); color: var(--muted); }
.lmsr-s b { font-size: 11px; font-weight: 600; color: var(--muted); max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmsr-s .crest { width: 34px; height: 36px; }
.lmsr-q { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font: 400 20px/1 var(--display); }
.lmsr-s.pick { box-shadow: inset 0 0 0 1px var(--accent); background: none; }
.lmsr-s.pick .lmsr-q { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }
.lmsr-s.gone { opacity: .55; }
/* PRED-870: a week still to pick is a link that chooses it, as Pick your team's week buttons do. Its list item
   leaves the layout to the link, so the row looks as before; the week being picked is marked (dashboard v158) */
.lmsr-li { display: contents; }
.lmsr > .lmsr-li:first-child > .lmsr-s { margin-right: auto; }
a.lmsr-s { color: inherit; text-decoration: none; }
a.lmsr-s[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
@media (hover: hover) { a.lmsr-s:hover { box-shadow: inset 0 0 0 2px var(--accent); } }

/* Last man standing's planner (PRED-200, dashboard v63): a row per team, then its match in
   each of the next three weeks; the week being picked for is tinted */
.lmsp-grid { display: flex; flex-direction: column; }
.lmsp-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 6px; padding: 8px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.lmsp-row.lmsp-h { cursor: default; font: 600 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lmsp-row.on { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.lmsp-row:has(input:disabled) { cursor: default; }
.lmsp-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lmsp-t input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.lmsp-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.lmsp-wk { text-align: center; padding: 6px 4px; border-radius: var(--r-sm); color: inherit; text-decoration: none; }
.lmsp-wk.on { background: var(--accent); color: var(--accent-ink); }
.lmsp-wk .bi { color: var(--accent); }
.lmsp-wk.on .bi { color: var(--accent-ink); }
.lmsp-c { font-size: 12px; text-align: center; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The chosen week's matches; not "wk", which the site's week rows use (PRED-785) */
.lmsp-c.lmsp-cur { color: var(--ink); font-weight: 500; }
/* Home and away as tags beside the opponent: H the palest blue, so it is never read as a win, A outlined
   (dashboard v117, PRED-785; the blue v119, PRED-786) */
.lmsp-card em.ha { display: inline-block; min-width: 14px; padding: 1px 3px; border-radius: 4px; font: normal 700 10px/1.2 var(--body); text-align: center; vertical-align: 1px; }
.lmsp-card em.ha.h { background: #EAF2FB; color: #1463AE; box-shadow: inset 0 0 0 1px #9CC0E6; }
.lmsp-card em.ha.a { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.lmsp-c.none { color: var(--faint); font-style: italic; }
.lmsp-code { display: none; }
/* On a phone a match is the opponent's short code, so the team's own name has room and wraps
   rather than being cut short (PRED-730, as dashboard v104's planner) */
@media (max-width: 575.98px) {
  .lmsp-row { grid-template-columns: minmax(0, 1fr) repeat(3, 52px); }
  .lmsp-nm { white-space: normal; line-height: 1.2; }
  .lmsp-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lmsp-code { display: inline; letter-spacing: .03em; }
}
/* On a phone, one week at a time: each team's full name on its own line, the chosen week's match
   in words and the other weeks small on the right (dashboard v117, PRED-785) */
.lmsp-day { display: none; }
.lmsp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.lmsp-tabs .lmsp-wk { border: 1px solid var(--line-2); border-radius: 999px; }
.lmsp-tabs .lmsp-wk.on { border-color: var(--accent); }
/* The badge's own width, so it is as far from the name as from the button (PRED-801) */
.lmsp-d { display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); cursor: pointer; }
.lmsp-d.on { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.lmsp-d:has(input:disabled) { cursor: default; opacity: .55; }
.lmsp-d input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
/* Three lines each side on the same rows, so the right-hand lines sit level with the left */
.lmsp-who, .lmsp-ahead { display: grid; grid-template-rows: 20px 18px 18px; align-items: center; min-width: 0; }
.lmsp-who b { font-weight: 500; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lmsp-who small { font-size: 12px; line-height: 18px; color: var(--muted); }
.lmsp-when { white-space: nowrap; }
.lmsp-ahead { justify-items: end; font-size: 11px; line-height: 18px; color: var(--faint); white-space: nowrap; }
/* A team already picked: greyed with a lock and the reason in place of its match (dashboard v118, PRED-786) */
.lmsp-d.taken { background: var(--surface-3); cursor: default; }
/* Used in a played week: more faded (PRED-801) */
.lmsp-d.taken.used .lmsp-who b, .lmsp-d.taken.used .crest { opacity: .35; }
.lmsp-d.taken.used .lmsp-lock, .lmsp-d.taken.used .lmsp-why { color: var(--faint); }
/* A pick still to play: light grey with a dark grey padlock and edge, the name at full strength,
   apart from this week's pick in light green (v125, PRED-801) */
.lmsp-d.taken.mine { background: var(--surface-2); box-shadow: inset 4px 0 0 #6B7570; }
.lmsp-d.taken.mine .lmsp-lock { color: #3D4641; }
/* Form: the last five results, win green, draw grey, loss red whatever the club's colours (v119) */
.lmsf { display: inline-flex; gap: 2px; }
.lmsf i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; font: normal 700 9px/1 var(--body); color: #FFFFFF; }
.lmsf i.r-w { background: #1E8E4F; }
.lmsf i.r-d { background: #8A968F; }
.lmsf i.r-l { background: #C2362F; }
/* Five boxes always: an empty outline for a match not played yet; the latest ringed (PRED-801) */
.lmsf i.r-none { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.lmsf i.last { box-shadow: 0 0 0 1px var(--surface), 0 0 0 2.5px var(--ink); margin-left: 2.5px; }
.lmsf-key { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); background: var(--surface-2); }
.lmsf-key .lmsf, .lmsf-key .ha { margin-right: 3px; }
/* The key's H and A level with its W, D and L blocks (PRED-801) */
.lmsf-key > span { display: inline-flex; align-items: center; }
.lmsp-card .lmsf-key em.ha { vertical-align: 0; }
.lmsp-lock { display: grid; place-items: center; width: 18px; color: var(--muted); }
.lmsp-why { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink); }
.lmsp-why.used { color: var(--muted); font-weight: 500; }
.lmsp-why a { color: var(--accent); text-decoration: underline; }
.lmsp-note-day { display: none; }
@media (max-width: 575.98px) {
  .lmsp-grid, .lmsp-note-grid { display: none; }
  .lmsp-day { display: block; }
  .lmsp-note-day { display: inline; }
}

/* The locked week, live (PRED-790, dashboard v121): bands by how each pick is doing, then a row
   per player, two lines at a fixed height, with the score, status and coming week at fixed columns.
   Win, draw and loss colours stay the same whatever the club's colours. */
.lw-band { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; border-top: 1px solid var(--line); font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.lw-band.w { background: #DFF3E7; color: #1E8E4F; }
.lw-band.d { background: var(--amber-soft); color: var(--amber); }
.lw-band.l { background: var(--red-soft); color: #C2362F; }
.lw-band.n { background: var(--surface-2); color: var(--muted); }
.lw-band.through { background: #1E8E4F; color: #FFFFFF; }
.lw-band.out { background: #C2362F; color: #FFFFFF; }
/* Winners, when the game ends: gold, as prizes are (v124, PRED-803) */
.lw-band.won { background: var(--gold); color: #FFFFFF; }
.lw-back { margin-left: 3px; font-size: 13px; color: var(--gold-ink); }
.lw-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 40px 40px 38px; column-gap: 6px; align-items: center; height: 58px; padding: 0 12px 0 14px; border-top: 1px solid var(--line); }
.lw-badge { position: relative; width: 34px; height: 36px; }
.lw-badge .crest { width: 32px; height: 34px; }
.lw-badge .avatar { position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; font-size: 11px; box-shadow: 0 0 0 2px var(--surface); }
.lw-badge.only .avatar { position: static; width: 32px; height: 32px; font-size: 12px; box-shadow: none; }
.lw-who { display: grid; grid-template-rows: 20px 18px; min-width: 0; }
.lw-who b { font: 500 14px/20px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-who span { font-size: 12px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; }
/* The score and its status share one height, so the status sits level with the score's middle */
.lw-score, .lw-status { display: flex; align-items: center; height: 28px; }
.lw-score { justify-content: center; font: 600 20px/1 var(--body); font-variant-numeric: tabular-nums; }
.lw-score.none { font-size: 14px; font-weight: 500; color: var(--faint); }
.lw-status { gap: 5px; font: 500 12px/1.15 var(--body); color: var(--muted); }
.lw-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #C2362F; animation: lw-pulse 1.4s infinite; }
.pill .lw-dot { display: inline-block; margin-right: 5px; }
@keyframes lw-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .lw-dot { animation: none; } }
.lw-w6 { justify-self: end; }
.lw-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 999px; font: 600 11px/1.2 var(--body); white-space: nowrap; }
.lw-chip.yes { background: var(--accent-soft); color: var(--accent); }
.lw-chip.no { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
/* A last man standing player's shields left: a slate shield over the right-hand edge of their picture (PRED-866, dashboard v157) */
.lstr-pic { position: relative; display: inline-block; flex: none; }
.lrow .grow > span.lstr-pic { display: inline-block; }
.lstr-sh { position: absolute; top: -5px; right: -6px; z-index: 1; display: grid; place-items: center; width: 13px; height: 13px; color: var(--shield); filter: drop-shadow(1px 0 0 var(--surface)) drop-shadow(-1px 0 0 var(--surface)) drop-shadow(0 1px 0 var(--surface)) drop-shadow(0 -1px 0 var(--surface)); }
.lstr-sh .bi { font-size: 13px; line-height: 1; }
.lstr-sh.n { top: -6px; right: -7px; width: 17px; height: 17px; }
.lstr-sh.n .bi { font-size: 17px; }
.lstr-sh b { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 2px; color: var(--shield-ink); font: 600 11px/1 var(--body); }
.lw-badge .lstr-sh { right: -3px; }
.lw-badge .lstr-sh.n { right: -4px; }
.lw-key .lstr-sh { position: relative; top: auto; right: auto; display: inline-grid; filter: none; }
.lw-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 14px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); background: var(--surface-2); }
/* Each item's mark and words centred on one line (PRED-866) */
.lw-key > span { display: inline-flex; align-items: center; gap: 4px; }

/* Last man standing Survivors page (PRED-485): prizes folded, then Still in and Knocked out */
.prizes { margin-bottom: 14px; }
.prizes summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.prizes summary::-webkit-details-marker { display: none; }
.pz-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pz-sum b { font-size: 15px; }
.pz-sum span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-chev { color: var(--faint); transition: transform .2s; display: flex; }
.prizes[open] .pz-chev { transform: rotate(90deg); }
.prizes .pz-body { border-top: 1px solid var(--line); }
.lms-two { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .lms-two { grid-template-columns: 1fr 1fr; } }
.lrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.band + .lrow { border-top: 0; }
.lrow.alt { background: var(--surface-2); }
/* Last man standing's Knocked out: a week opens to who went out, with their pictures (PRED-1032, v192) */
.lout { border-top: 1px solid var(--line); }
.band + .lout { border-top: 0; }
.lout.alt { background: var(--surface-2); }
.lout > summary.lrow { list-style: none; cursor: pointer; border-top: 0; min-height: 52px; }
.lout > summary::-webkit-details-marker { display: none; }
.lout > summary .bi-chevron-down { color: var(--muted); transition: transform .15s; }
.lout[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.lout-list { display: grid; gap: 2px; padding: 0 16px 12px 68px; }
.lout-who { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; }
.lrow.me { background: var(--accent-soft); }
.lrow .rank { font: 500 18px/1 var(--display); text-align: center; }
.lrow .rank .bi { color: var(--accent); font-size: 16px; }
.lrow .grow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lrow .grow > span:not(.avatar) { display: flex; flex-direction: column; min-width: 0; }
.lrow .grow small { color: var(--muted); font-size: 12px; }
.lms-note { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }

/* Sweepstake's Entries per player (PRED-244): the most each shows only with more than one allowed */
.fx-grid:not(:has(input[name="multi"]:checked)) .if-multi { display: none; }
/* The bonus ball's charity name shows only when an unheld prize goes to a charity (PRED-264) */
.fx-grid:not(:has(input[name="unowned"][value="charity"]:checked)) .if-charity { display: none; }
.fx-grid:not(:has(input[name="draw_when"][value="timed"]:checked)) .if-timed { display: none; }
/* The bonus ball's own draw (PRED-899): its days, time, numbers, balls, prize and note show only
   with Custom, the Lotto's nights and prizes only without it. Prizes is another section, so the
   whole form is asked */
form:not(:has(input[name="draw"][value="custom"]:checked)) .if-custom { display: none; }
form:has(input[name="draw"][value="custom"]:checked) .if-lotto { display: none; }
/* How Bonus Ball players pay (PRED-906): Each payment covers and How many show only with Every
   few weeks or draws, Draws only with a fee per draw, and Runs for (weeks) only with All up front */
form:not(:has(input[name="pay_every"][value="every"]:checked)) .if-pay-every { display: none; }
form:not(:has(input[name="fee_per"][value="draw"]:checked)) .if-fee-per-draw { display: none; }
form:not(:has(input[name="pay_every"][value="run"]:checked)) .if-pay-run { display: none; }
/* A setting with a problem after Save (PRED-902): its label, choices, tiles, switch or day chips
   go red, as a box with a problem does; still-empty boxes stay amber */
.fx.has-error > .fx-lbl, .fx.has-error > .fx-lbl label { color: var(--red); }
.fx.has-error > :is(.seg, .ez-tiles, .day-pick) { border-radius: var(--r-sm); box-shadow: 0 0 0 1.5px var(--red); background: var(--red-soft); }
.fx.has-error .sw-check { box-shadow: 0 0 0 1.5px var(--red); }
.bad-t { color: var(--red); }
.step-n.bad { background: var(--red-soft); color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
/* A choice of several days, a large check-box chip for each (dashboard v166) */
.day-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chk { position: relative; }
.day-chk input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.day-chk span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 44px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-weight: 600; background: var(--surface); }
.day-chk input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.day-chk input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A draw's winning numbers on the Result tab, a box for each ball (PRED-899) */
.bb-balls { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-balls input { width: 80px; text-align: center; font-weight: 600; font-size: 17px; }

/* The sign-up board (PRED-244, v65): one entry per team; free ones are dashed, held ones amber,
   the viewer's own in the accent, and the Book button follows down the board */
.su-board { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding: 16px 18px 18px; border-top: 1px solid var(--line); }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.board-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.board-title .bi { color: var(--accent); font-size: 22px; }
.plq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.plq-f { display: contents; }
.plq {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 76px; min-width: 0; padding: 18px 8px 10px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line-2); text-align: center;
}
.plq b { font: 500 18px/1.1 var(--display); overflow-wrap: anywhere; }
.plq small { font-size: 11px; color: var(--muted); }
.plq .plq-who { color: var(--faint); }
.plq-n { position: absolute; top: 5px; left: 8px; font-size: 11px; font-weight: 600; color: var(--faint); }
.plq.free { border-style: dashed; background: none; color: var(--muted); cursor: pointer; font: inherit; }
@media (hover: hover) { .plq.free:not([disabled]):hover { border-color: var(--accent); color: var(--accent); } }
.plq.free[disabled] { opacity: .45; cursor: default; }
.plq.closed { opacity: .5; }
.plq.held { border-style: dashed; border-color: var(--amber); color: var(--amber); background: none; }
.plq.mine { border-color: var(--accent); background: var(--accent-soft); }
.plq.basket { border-style: dashed; }
.plq.mine-paid { border-color: var(--accent); }
.plq .plq-due { color: var(--amber); font-weight: 600; }
.plq-in { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--accent); background: none; color: var(--ink); font: 500 18px/1.2 var(--display); text-align: center; padding: 2px; }
.plq-in:focus { outline: none; border-bottom-width: 2px; }
.plq-x { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: var(--r-xs); }
/* A main button that stays in view at the foot of the page while it scrolls, just above the game bar on phones and
   at the bottom of the window on a computer, as the dashboard's .sticky-cta (PRED-849) */
.sticky-cta { position: sticky; bottom: calc(var(--tab-h) + 6px); z-index: 2; margin-top: 14px; padding: 8px 0; background: linear-gradient(transparent, var(--bg) 30%); }
@media (min-width: 768px) { .sticky-cta { bottom: 0; } }
.plq-cta { position: sticky; bottom: calc(var(--tab-h) + 6px); padding: 8px 0; background: linear-gradient(transparent, var(--surface) 30%); z-index: 2; }
.su-basket { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 8px; border-radius: var(--r-md); background: var(--accent-soft); }
.su-basket span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.su-basket b { font: 500 20px/1 var(--display); }
@media (min-width: 768px) { .plq-cta { bottom: 0; } }
/* Phones: three entries a row */
@media (max-width: 599px) {
  .plq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .plq { min-height: 64px; padding: 16px 4px 8px; }
  .plq b, .plq-in { font-size: 15px; }
}

/* Paid to date on a sign-up board (PRED-497, v67): each payment the player reports, then the totals */
.ptd { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.ptd .su-h { margin: 0; }
.ptd-rows { display: flex; flex-direction: column; }
.ptd-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ptd-row:first-child { border-top: 0; }
.ptd-when { width: 48px; flex: none; font-size: 12px; color: var(--muted); }
.ptd-row .grow { flex: 1; min-width: 0; }
.ptd-row b, .ptd-tot b { font-variant-numeric: tabular-nums; }
.ptd-refund { color: var(--muted); }

/* Cancel entries on a sign-up board (PRED-498, dashboard v70 cancelPanel): tick the entries to cancel */
.cx-list { display: flex; flex-direction: column; gap: 6px; }
.cx-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; margin: 0; }
.cx-row .grow { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cx-row small { font-size: 12px; color: var(--muted); }
.cx-row > .bi { color: var(--muted); }
.cx-row .cx-on, .cx-row:has(:checked) .cx-off { display: none; }
.cx-row:has(:checked) .cx-on { display: inline; }
.cx-row:has(:checked) { border-color: var(--red); background: var(--red-soft); }
.cx-row:has(:checked) > .bi { color: var(--red); }
.cx-n { font-size: 11px; font-weight: 600; color: var(--faint); min-width: 18px; }
.cx-refund:has(:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cx-refund:has(:checked) > .bi { color: var(--accent); }
.ptd-tot { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.ptd-rows + .ptd-tot { padding-top: 8px; border-top: 1px solid var(--line-2); }
.ptd-due { color: var(--amber); font-weight: 600; }
.ptd-extra { color: var(--blue); font-weight: 600; }
.ptd-ok { color: var(--accent); font-weight: 600; }
.ptd-ok span { display: flex; align-items: center; gap: 6px; }

/* The line under a game's name on its sign-up detail, such as the bonus ball's run (PRED-261) */
.su-kick { display: flex; align-items: center; gap: 6px; margin: -6px 0 0; font-size: 14px; color: var(--muted); }

/* UK Lotto on Results (PRED-265): the bonus ball's box and Save */
.res-ball { display: flex; align-items: center; gap: 8px; }
.res-ball input { width: 76px; }

/* First Goal's board split by half, then No goal (PRED-269, dashboard v65) */
.plq-group { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.plq-group h3 { margin: 0; font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.plq-grid.half-1 .plq { background: color-mix(in srgb, var(--blue-soft) 55%, var(--surface-2)); }
.plq-grid.half-2 .plq { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-2)); }
.plq-grid.half-1 .plq.free { background: color-mix(in srgb, var(--blue-soft) 25%, transparent); }
.plq-grid.half-2 .plq.free { background: color-mix(in srgb, var(--accent-soft) 20%, transparent); }
.plq-grid.half-1 .plq-n, .plq-grid.half-2 .plq-n, .plq-grid.ng .plq-n { font-size: 12px; font-weight: 600; color: var(--ink); }
.plq-group.half-1 h3 { color: var(--blue); }
.plq-group.half-2 h3 { color: var(--accent); }

/* First Goal's Result tab (PRED-277): the minute chip, and the last goal's time only for Two or more */
/* A running First Goal or Bonus Ball page (PRED-845, v142): its cards spaced, and the player's minutes or numbers
   as chips with space under the heading (the owner) */
.oo-page { display: flex; flex-direction: column; gap: 14px; }
.oo-page > .card, .oo-page > .prizes { margin: 0; }
.oo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oo-chips span { display: inline-grid; place-items: center; min-width: 40px; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 15px/1 var(--display); }
.fg-chip { display: inline-grid; place-items: center; min-width: 40px; padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 14px/1 var(--display); }
.fg-chip.gold { background: var(--gold-soft); color: var(--gold-ink); }
form:not(:has(input[name="goals"][value="more"]:checked)) .fg-more { display: none; }
.fg-check { border: 2px solid var(--accent); }

/* First Goal's status card and result on its page (PRED-276, PRED-278) */
.fg-status { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.fg-status.won { background: var(--gold-soft); border-color: var(--gold-line); }
.fg-lbl { font: 600 11px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fg-title { font: 500 18px/1.1 var(--display); text-transform: uppercase; }
.fg-count { font-weight: 600; }
.fg-rows { display: flex; flex-direction: column; gap: 6px; }
.fg-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface); }
.fg-row .grow { display: flex; flex: 1; flex-direction: column; min-width: 0; }
/* Your own row stays a white row, picked out by a gold line, so the rows match on a won card */
.fg-row.mine { box-shadow: inset 0 0 0 1px var(--gold-line); }

/* A winning entry on a board, such as First Goal's winning minute (PRED-278) */
.plq.won { background: var(--gold-soft); border-color: var(--gold-line); box-shadow: inset 0 0 0 1px var(--gold-line); }
.plq.won .plq-n { color: var(--gold-ink); }

/* Predicted v actual tables beside the fixtures (PRED-196, dashboard v65) */
.st-b { display: flex; flex-direction: column; }
/* A group's predicted rows in their own box, swapped in again after a saved score (PRED-883) */
.wg-rows { display: contents; }
.st-br { display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px 40px 36px; align-items: center; gap: 8px; min-height: 36px; padding-inline: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.st-br > b { font: 500 17px/1 var(--display); }
.st-br > span:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.st-br.st-cmp { grid-template-columns: 28px minmax(0, 1fr) 40px 32px 34px; }
.st-bh { border-top: 0; font-size: 12px; color: var(--muted); }
.st-t { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 500; }
.st-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-pts { font: 500 17px/1 var(--display); }
.st-you { color: var(--muted); }
.st-mv { font: 500 12px/1 var(--body); color: var(--muted); text-align: right; white-space: nowrap; }
.st-mv.ok { color: var(--accent); display: inline-flex; justify-content: flex-end; }
.st-br.hit { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Tournament groups (PRED-195): a gold line under the top two, who go through, and each group's heading on All groups */
.st-br.cut { box-shadow: 0 2px 0 color-mix(in srgb, var(--gold) 70%, transparent); }
.wc-gh { padding: 12px 16px 6px; font: 500 18px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; border-top: 1px solid var(--line-2); }
.band .st-view { flex: none; flex-wrap: nowrap; }
/* The Actual tab, "Calls and ghosts" (PRED-638): tiles on top, then the team the player had in
   each place as a faded crest that lights up with a tick when it matches. Off by on wider screens */
.cg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px; }
.cg-tile { --cg: var(--red); min-width: 0; padding: 10px; border-radius: var(--r-md); background: var(--red-soft); }
.cg-tile.ok { --cg: var(--accent); grid-column: 1 / -1; background: var(--accent-soft); }
.cg-tile small { display: block; margin-bottom: 6px; font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--cg); }
.cg-tile b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; }
.cg-tile p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.cg-crests { display: flex; flex-wrap: wrap; gap: 4px; }
.st-br.cg-row { grid-template-columns: 28px minmax(0, 1fr) 32px 52px 52px; }
.cg-had { display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--muted); }
.cg-had .crest, .cg-had .flag { opacity: .45; filter: grayscale(.5); }
.cg-had.hit { color: var(--accent); }
.cg-had.hit .crest, .cg-had.hit .flag { opacity: 1; filter: none; }
.cg-off { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cg-off.near { color: var(--amber); }
.cg-off.far { color: var(--red); }
@media (min-width: 641px) { .cg-tiles { grid-template-columns: 2fr 1fr 1fr; } .cg-tile.ok { grid-column: auto; } }
@media (max-width: 640px) { .st-br.cg-row { grid-template-columns: 28px minmax(0, 1fr) 32px 52px; } .cg-off { display: none; } }

/* The bonus ball board (PRED-259, dashboard v65): each number in a ball, the name and alias
   underneath. Taken balls are solid, free ones dashed */
.plq-grid.balls { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 8px; }
.plq-grid.balls .plq { background: none; border: 0; min-height: 0; padding: 0 0 2px; justify-content: flex-start; }
.plq-grid.balls .plq-n {
  position: static; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center;
  font: 500 26px/1 var(--display); color: var(--bg);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ink) 75%, var(--bg)) 0 20%, var(--ink) 70%); border: 2px solid var(--ink);
}
.plq-grid.balls .plq > .bi { display: none; }
.plq-grid.balls .plq.free .plq-n { background: none; border-style: dashed; color: var(--muted); }
.plq-grid.balls .plq.held .plq-n { background: none; border-style: dashed; border-color: var(--amber); color: var(--amber); }
.plq-grid.balls .plq.mine .plq-n { background: var(--accent-soft); border: 3px solid var(--accent); color: var(--muted); }
.plq-grid.balls .plq.basket .plq-n { border-style: dashed; }
.plq-grid.balls .plq.mine-paid .plq-n { border: 3px solid var(--accent); }
/* A number whose draw paid a prize is a gold ball, with no box round it (PRED-822) */
.plq-grid.balls .plq.won { background: none; border: 0; box-shadow: none; }
.plq-grid.balls .plq.won .plq-n { background: var(--gold-soft); border: 3px solid var(--gold); color: var(--gold-ink); }
@media (hover: hover) { .plq-grid.balls .plq.free:not([disabled]):hover .plq-n { border-color: var(--accent); color: var(--accent); } }

/* The Club Admin's Sign-up board tab (PRED-500, v68): the board in a card, taken entries as buttons */
.admin-board { margin-top: 0; border-top: 0; }
.admin-board button.plq { font: inherit; color: inherit; cursor: pointer; }
@media (hover: hover) { .admin-board button.plq:hover { border-color: var(--accent); } }

/* The sweepstake's game board and tournament (PRED-139, dashboard v65 .wc): a night-sky stage in the
   sweepstake's purple with each team's ticket. The draw itself deals cards: .dd below (PRED-1031). */
.sw-page { max-width: 1100px; margin: 0 auto; }
.wc {
  --wc-gold: #E9C46A; --wc-text: #EEF6F1; --wc-ink: #062417; --wc-line: rgba(255, 255, 255, .12);
  --wc-1: #5B33A8; --wc-2: #26115A; --wc-3: #0A0418; --wc-ray: rgba(190, 150, 255, .11); --wc-fade: rgba(8, 3, 18, .9);
  --wc-muted: #BFAEE0; --wc-ball: #E6DEF7; --wc-ball-2: #9B86C9; --wc-slip: #EEE8FA;
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); color: var(--wc-text);
  background: radial-gradient(130% 80% at 50% -10%, var(--wc-1) 0%, var(--wc-2) 45%, var(--wc-3) 100%);
  padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px;
}
.wc::before {
  content: ""; position: absolute; inset: -50%; z-index: -1;
  background: conic-gradient(from 0deg at 50% 40%, transparent 0 20deg, var(--wc-ray) 30deg, transparent 45deg, transparent 110deg, rgba(233, 196, 106, .08) 125deg, transparent 140deg, transparent 200deg, var(--wc-ray) 215deg, transparent 230deg, transparent 290deg, rgba(233, 196, 106, .07) 305deg, transparent 320deg);
  animation: wc-beams 18s linear infinite;
}
@keyframes wc-beams { to { transform: rotate(360deg); } }
.wc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -1; background: linear-gradient(transparent, var(--wc-fade)); }
.wc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wc-title { font: 300 30px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; margin: 0; color: var(--wc-text); }
.wc-title small { display: block; font: 500 13px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--wc-muted); margin-top: 6px; }
.wc-sub { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--wc-muted); }
.wc-none { color: var(--wc-muted); font-size: 14px; margin: 0; }
.wc-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.wc-tk { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 52px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .06); border: 1px solid var(--wc-line); transition: background .3s, box-shadow .3s; }
.wc-tk .flag, .wc-tk .crest { flex: none; width: 27px; height: auto; }
.wc-tk-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wc-tk-team { font: 500 15px/1.1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-tk-who { font: 500 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--wc-gold); min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-tk-who.none { font: 400 12px/1.1 var(--body); letter-spacing: 0; text-transform: none; color: var(--wc-muted); }
.wc-tk.mine { background: rgba(233, 196, 106, .12); box-shadow: inset 3px 0 0 var(--wc-gold); }
.wc-tk.mine .wc-tk-who { color: #FFE7A3; }
@media (max-width: 575.98px) {
  .wc-title { font-size: 26px; }
}

/* The sweepstake's tournament after the draw (PRED-253, dashboard v83): tables in bands, the play-offs and the bracket */
.trn-upd { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--body); color: var(--wc-muted); }
.trn-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.trn-table { border-radius: var(--r-md); overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--wc-line); }
.trn-gh { padding: 9px 12px; background: linear-gradient(90deg, rgba(233, 196, 106, .24), rgba(233, 196, 106, .03)); font: 500 18px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.trn-row { display: grid; grid-template-columns: 22px 27px minmax(0, 1fr) 22px 30px 26px; align-items: center; gap: 8px; padding: 0 12px; min-height: 44px; border-top: 1px solid var(--wc-line); }
.trn-row .crest { width: 27px; height: auto; }
.trn-head { min-height: 0; padding-block: 8px 6px; border-top: 0; font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--wc-muted); }
.trn-head span:nth-child(n+4), .trn-n { text-align: right; font-variant-numeric: tabular-nums; }
.trn-pos { font: 600 12px/1 var(--display); color: var(--wc-muted); }
.trn-n { font: 500 14px/1 var(--body); color: var(--wc-muted); }
.trn-pts { font: 500 18px/1 var(--display); color: var(--wc-text); }
.trn-band { padding: 6px 12px; border-top: 1px solid var(--wc-line); font: 600 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--wc-muted); background: rgba(255, 255, 255, .03); }
.trn-row.thru { box-shadow: inset 3px 0 0 #3FCB8E; }
.trn-row.po { box-shadow: inset 3px 0 0 var(--wc-gold); }
.trn-row.mine { background: rgba(233, 196, 106, .12); }
.trn-row.mine .wc-tk-who, .trn-t.mine .wc-tk-who { color: #FFE7A3; }
.trn-row.out, .trn-t.out { opacity: .35; filter: grayscale(1); }
.trn-row.out .wc-tk-team, .trn-row.out .wc-tk-who, .trn-t.out b { text-decoration: line-through; }
.trn-po { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.trn-ko { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trn-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.trn-ties { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.trn-h { margin: 0; text-align: center; font: 500 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--wc-gold); }
.trn-tie { border-radius: var(--r-sm); border: 1px solid var(--wc-line); background: rgba(255, 255, 255, .05); overflow: hidden; }
.trn-t { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; }
.trn-t + .trn-t { border-top: 1px solid var(--wc-line); }
.trn-t .crest { width: 24px; height: auto; }
.trn-t b { display: block; font: 500 14px/1.1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn-t .wc-tk-who { font-size: 12px; min-height: 12px; }
.trn-sc { font: 500 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.trn-t.win .trn-sc { color: var(--wc-gold); }
.trn-t.mine { box-shadow: inset 3px 0 0 var(--wc-gold); }
.trn-legs { display: block; padding: 0 10px 7px; font: 500 11px/1.3 var(--body); color: var(--wc-muted); }
.trn-tbc { padding: 10px; font-size: 12px; color: var(--wc-muted); text-align: center; }
@media (max-width: 575.98px) { .trn-ko { grid-template-columns: 1fr; } }

/* A World Cup or Euros after the draw, your teams first (PRED-941, option C and G2, dashboard
   v181): each of your teams' road as steps, the round being played, Still to come, the earlier
   rounds folded. Phones stack them; from 1024px Still to come sits beside the round. */
.trn-roads { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.trn-road { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--wc-line); border-radius: var(--r-md); background: rgba(255, 255, 255, .05); }
.trn-road.live { border-color: var(--wc-gold); background: rgba(233, 196, 106, .1); }
.trn-road.gone { opacity: .55; }
.trn-road-h { display: flex; align-items: center; gap: 10px; }
.trn-road-h .flag, .trn-road-h .crest { flex: none; width: 30px; height: auto; }
.trn-road-h b { display: block; font: 500 19px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.trn-road-h span { font-size: 12px; color: var(--wc-muted); }
.trn-road.gone .trn-road-h b { text-decoration: line-through; }
.trn-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.trn-step { position: relative; display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--wc-muted); text-align: center; }
.trn-step:not(:first-child)::before { content: ""; position: absolute; top: 10px; right: 50%; width: 100%; height: 2px; background: var(--wc-line); }
.trn-step.won::before, .trn-step.lost::before, .trn-step.next::before { background: #3FCB8E; }
.trn-step i { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--wc-line); background: #2A1A4F; font-size: 12px; font-style: normal; }
.trn-step.won i { border-color: #3FCB8E; background: #3FCB8E; color: #062417; }
.trn-step.lost i { border-color: #C2362F; background: #C2362F; color: #fff; }
.trn-step.next i { border-color: var(--wc-gold); color: var(--wc-gold); }
.trn-c2 { display: grid; gap: 16px; }
.trn-main { display: contents; }
.trn-now { order: 1; min-width: 0; }
.trn-later { order: 2; }
.trn-earlier { order: 3; display: grid; gap: 8px; }
.trn-round { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.trn-tie.next { border-color: rgba(233, 196, 106, .55); }
.trn-tie.final { border: 2px solid var(--wc-gold); background: rgba(233, 196, 106, .1); }
.trn-tie.bronze { border-color: rgba(224, 163, 107, .55); }
.trn-cap { display: block; padding: 6px 10px 0; font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--wc-muted); }
.trn-sc small { margin-left: 3px; font: 500 11px/1 var(--body); color: var(--wc-muted); }
.trn-final { display: grid; gap: 8px; max-width: 520px; }
.trn-champ { display: grid; justify-items: center; gap: 4px; text-align: center; }
.trn-champ .bi { font-size: 36px; line-height: 1; color: var(--wc-gold); }
.trn-champ b { font: 500 18px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--wc-gold); }
.trn-champ small, .trn-third p { margin: 0; font-size: 12px; color: var(--wc-muted); }
.trn-third { display: grid; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--wc-line); }
.trn-third-h { display: flex; align-items: center; gap: 6px; font: 500 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #E0A36B; }
.trn-fold { border: 1px solid var(--wc-line); border-radius: var(--r-md); background: rgba(255, 255, 255, .04); }
.trn-fold summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; min-height: 48px; padding: 10px 12px; list-style: none; cursor: pointer; }
.trn-fold summary::-webkit-details-marker { display: none; }
.trn-fold summary b { font: 500 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.trn-fold summary span { grid-column: 1; font-size: 12px; color: var(--wc-muted); }
.trn-fold summary .bi { grid-row: 1 / 3; grid-column: 2; color: var(--wc-muted); }
.trn-fold[open] summary .bi { transform: rotate(180deg); }
.trn-fold-in { padding: 0 10px 10px; }
.trn-soon { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--wc-line); border-radius: var(--r-md); background: rgba(255, 255, 255, .04); font-size: 13px; }
.trn-soon div { display: flex; gap: 10px; align-items: baseline; }
.trn-soon b { flex: none; min-width: 120px; font: 500 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.trn-soon span { color: var(--wc-muted); }
.trn-soon .bz b { color: #E0A36B; }
.trn-wait { display: inline-block; width: max-content; padding: 2px 6px; border-radius: var(--r-xs); background: var(--wc-gold); color: var(--wc-ink); font: 600 11px/1.2 var(--body); }
.trn-band.line { background: rgba(63, 203, 142, .12); color: #3FCB8E; }
@media (min-width: 1024px) {
  .trn-c2 { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .trn-main { display: grid; gap: 16px; min-width: 0; }
}

/* Site Admin, Clubs (PRED-510, dashboard v71): every club, and one club's tabs, read-only */
.club-crest-lg .club-crest { width: 48px; height: 48px; }
.club-cols { display: grid; gap: 14px; align-items: start; margin-top: 14px; }
.club-stack { display: grid; gap: 14px; min-width: 0; }
.club-kpis { margin-bottom: 14px; grid-auto-rows: 1fr; }
.kpi em { font-style: normal; font-size: 12px; color: var(--muted); }
/* Not "alert": Bootstrap's .alert adds a bottom margin that made this tile shorter (PRED-637) */
.kpi.urgent { background: var(--red-soft); border-color: transparent; }
.kpi.urgent b { color: var(--red); }
.club-facts { padding: 4px 16px 8px; }
.club-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.club-facts div:first-child { border-top: 0; }
.club-facts span { color: var(--muted); }
.club-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@media (min-width: 900px) { .club-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .kpi em { display: none; } }
/* A board game's players stay on phones: they are the count, not an explanation (PRED-905) */
@media (max-width: 520px) { .kpi em.kpi-people { display: block; } }
.club-sum { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; }

/* Last man standing with 2 weeks left on the club's plan (PRED-508, dashboard v73) */
.lms-limit { border-left: 4px solid var(--amber); }
.lms-limit-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Entries close (PRED-548, dashboard v77): "Close earlier" opens the day box */
.close-early summary { cursor: pointer; font: 600 12px/1 var(--body); color: var(--accent); text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; }
.close-early[open] > summary { margin-bottom: 6px; }

/* Each club's features (PRED-541, dashboard v78): Site Admin's tiles and grid, the reason box,
   and the Club Admin's locked features, lock card and More with Flare card */
.feat-tiles { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.feat-tiles .kpi { flex: 0 0 150px; }
.feat-wrap { overflow-x: auto; }
.feat-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.feat-grid th { font: 600 11px/1.2 var(--body); color: var(--muted); padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.feat-grid th:first-child, .feat-grid td:first-child { text-align: left; padding-left: 16px; min-width: 150px; }
.feat-grid td { padding: 10px 4px; text-align: center; border-top: 1px solid var(--line); }
.feat-grid td a { color: inherit; text-decoration: none; }
.f-on { color: var(--accent); }
.f-add { color: var(--blue); }
.f-off { color: var(--red); }
.f-no { color: var(--faint); }
.feat-key { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.feat-sub { display: block; padding: 12px 16px 4px; font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.feat-row form { flex: none; }
button.sw { cursor: pointer; }
.feat-why { display: grid; gap: 8px; padding: 12px 16px; background: var(--surface-2); border-top: 1px dashed var(--line-2); scroll-margin-top: 140px; }
.feat-why .acts, .lock-card .acts, .more-flare .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.a-row.locked .grow, .a-row.locked > .task-ico { opacity: .55; }
.type-card.locked { position: relative; }
.type-card.locked > :not(.pill) { opacity: .55; }
.type-card.locked .pill { position: absolute; top: 12px; right: 12px; }
.lock-card { margin: 0 16px 16px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); display: grid; gap: 8px; }
.lock-card h3 { margin: 0; font: 500 18px/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.lock-card p { margin: 0; font-size: 14px; }
.more-flare { display: grid; gap: 8px; }
.more-flare .mf-k { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.more-flare h2 { margin: 0; font: 500 18px/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.more-flare p { margin: 0; font-size: 14px; }
.feat-grid tbody th { font: inherit; color: inherit; text-align: left; padding: 10px 4px 10px 16px; border-bottom: 0; border-top: 1px solid var(--line); }
.feat-grid tbody th a { color: inherit; text-decoration: none; }
/* The club name stays in view while the features scroll sideways (PRED-636) */
.feat-grid thead th:first-child, .feat-grid tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); }

/* Start your club (PRED-300, dashboard v78 startClub): the steps, kit colours and plan cards */
.nc-rail { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.nc-rail li.on { color: var(--ink); font-weight: 600; }
.nc-rail li.done::before { content: "\2713"; margin-right: 4px; color: var(--accent); }
.kit-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kit-pair { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; font-size: 13px; }
.kit-pair:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kit-pair input { margin: 0; }
.kit-swatch { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); }
.kit-0 { background: linear-gradient(135deg, #6B1E2E 50%, #8CC8EC 50%); }
.kit-1 { background: linear-gradient(135deg, #12355B 50%, #F5C542 50%); }
.kit-2 { background: linear-gradient(135deg, #C8102E 50%, #FFFFFF 50%); }
.kit-3 { background: linear-gradient(135deg, #1B4DB1 50%, #FFFFFF 50%); }
.kit-4 { background: linear-gradient(135deg, #141414 50%, #F2A900 50%); }
.kit-5 { background: linear-gradient(135deg, #0B6E3B 50%, #FFFFFF 50%); }
.kit-6 { background: linear-gradient(135deg, #F36C21 50%, #141414 50%); }
.kit-7 { background: linear-gradient(135deg, #6CABDD 50%, #1C2C5B 50%); }
.nc-plans { display: grid; gap: 8px; }
.nc-plan { display: flex; gap: 12px; align-items: center; padding: 12px 14px; min-height: 48px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; }
.nc-plan:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.nc-plan.is-soon { cursor: default; opacity: .7; }
.nc-plan > .grow { flex: 1; min-width: 0; }
/* Plans for the club (PRED-549, dashboard v82): the plan with the feature asked about outlined */
.cp-plan { cursor: default; }
.cp-plan.is-pick { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nc-plan b { display: block; }
.nc-plan small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.nc-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 600; }
/* Buying a plan (PRED-302, dashboard v89 startPlans): the founding price and places left */
.nc-price s { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.nc-left { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; background: var(--amber-soft); border-radius: var(--r-md); padding: 8px 10px; }
.nc-left .bi { color: var(--amber); }
.cp-plan:has(input:not(:disabled)) { cursor: pointer; }
.cp-plan:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* The sweepstake's Result tab, a line per place, and the podium players see (PRED-254, dashboard v81) */
.band.mint { background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface)); }
.swr-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.swr-place { grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.swr-team { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.swr-who { text-align: right; font-size: 14px; }
.swr-tog { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; }
.swr-tog input { width: 20px; height: 20px; accent-color: var(--accent); }
.swr-form:has(input[name="shared_third"]:checked) .if-own,
.swr-form:not(:has(input[name="shared_third"]:checked)) .if-shared { display: none; }
.swp-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; padding: 16px 16px 0; }
.swp-pod { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 13px; min-width: 0; }
.swp-team { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 600; }
.swp-who { color: var(--muted); margin-bottom: 4px; }
.swp-step { display: block; width: 100%; padding-top: 10px; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--surface-2); font: 500 20px/1 var(--display); }
.swp-1 .swp-step { height: 76px; background: color-mix(in srgb, var(--gold) 35%, var(--surface)); }
.swp-2 .swp-step { height: 54px; }
.swp-3 .swp-step { height: 40px; }

/* The draws deal cards (PRED-1031, dashboard v193): the mini group draw and the sweepstake draw.
   Each pot is a deck in the game's colour (.gb-pred, .gb-sweep). The top card turns over to show
   the name, then glides into its gap. Every place shows as a gap from the start, so nothing grows
   as names land (PRED-1030). On a phone the decks stay pinned at the top while the groups scroll. */
.dd { --dd-top: 0px; --dd-acc: color-mix(in srgb, var(--c1) 40%, var(--c2)); --dd-on: #FFFFFF; --dd-soft: color-mix(in srgb, var(--c1) 14%, var(--surface)); display: grid; gap: 12px; }
:root[data-theme="dark"] .dd { --dd-acc: var(--glow); --dd-on: var(--c2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dd { --dd-acc: var(--glow); --dd-on: var(--c2); } }
.dd-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dd-title { margin: 0; font: 400 28px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.dd-title small { display: block; margin-top: 6px; font: 400 13px/1.3 var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); }
.dd-speed { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--dd-soft); }
.dd-speed button { border: 0; background: none; min-height: 36px; padding: 6px 12px; border-radius: 999px; font: 500 13px/1 var(--body); color: var(--muted); cursor: pointer; }
.dd-speed button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.dd-stage { display: grid; gap: 10px; padding: 4px 0 10px; background: var(--bg); }
@media (max-width: 767.98px) { .dd-stage { position: sticky; top: var(--dd-top); z-index: 4; margin: 0 -12px; padding-inline: 12px; } }

/* The decks, the spot where a card turns over, and (mini groups) how many are left in each pot */
.dd-deal { display: flex; align-items: flex-start; justify-content: center; gap: 12px; width: 100%; max-width: 460px; margin: 0 auto; }
.dd-deal.two { justify-content: space-between; gap: 8px; }
.dd-col { flex: none; text-align: center; }
.dd-deck, .dd-spot { position: relative; width: 88px; height: 118px; }
.dd-deal.two .dd-deck, .dd-deal.two .dd-spot { width: 76px; height: 102px; }
.dd-back { position: absolute; inset: 0; display: grid; place-items: center; border: 3px solid #FFFFFF; border-radius: var(--r-md); font-size: 22px; color: rgba(255, 255, 255, .9);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 6px, transparent 6px 12px), radial-gradient(circle at 32% 22%, var(--glow) 0, var(--c1) 40%, var(--c2) 100%);
  box-shadow: 0 0 0 1px var(--line-2), var(--sh-1); }
.dd-deck .dd-back:nth-child(1) { transform: translate(5px, 5px); }
.dd-deck .dd-back:nth-child(2) { transform: translate(2.5px, 2.5px); }
.dd-back.teams { color: var(--dd-acc); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c1) 12%, transparent) 0 6px, transparent 6px 12px), #FFFFFF;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c1) 40%, transparent), var(--sh-1); }
.dd-deck.empty .dd-back { visibility: hidden; }
.dd-deck.empty, .dd-spot { border: 2px dashed var(--line-2); border-radius: var(--r-md); }
.dd-dl { margin: 10px 0 0; font: 500 12px/1.2 var(--body); color: var(--muted); }
.dd-dl b { color: var(--ink); }
.dd-spot { perspective: 700px; }
.dd-card { position: absolute; inset: -2px; transform-style: preserve-3d; }
.dd-card.up { transform: rotateY(180deg); }
.dd-card > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dd-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; transform: rotateY(180deg);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-2); text-align: center; overflow-wrap: anywhere;
  font: 500 18px/1.05 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.dd-face small { font: 500 11px/1 var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); }
.dd-face.me { border-color: var(--dd-acc); background: var(--dd-acc); color: var(--dd-on); }
.dd-face.me small { color: inherit; opacity: .8; }
.dd-face.dd-tface { font: 500 13px/1.1 var(--body); text-transform: none; letter-spacing: 0; }
.dd-face .flag, .dd-face .crest { width: 40px; height: auto; }
.dd-pots { flex: 1; max-width: 200px; display: grid; gap: 6px; margin: 0; padding: 4px 0 0; list-style: none; }
.dd-pots li { display: flex; justify-content: space-between; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; color: var(--muted); }
.dd-pots:has(li:nth-child(4)) { gap: 4px; padding: 0; }
.dd-pots:has(li:nth-child(4)) li { padding: 2px 8px; font-size: 12px; }
.dd-pots b { font: 500 16px/1 var(--display); color: var(--ink); }
.dd-pots .on { border-color: var(--dd-acc); background: var(--dd-soft); color: var(--dd-acc); }
.dd-pots .gone { opacity: .5; }

/* The caption: what was just drawn, and where it went */
.dd-cap { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 14px; line-height: 1.3; }
.dd-tag { flex: none; padding: 3px 7px; border-radius: var(--r-xs); background: var(--dd-soft); color: var(--dd-acc); font: 600 12px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }

/* The groups and the teams: every place is a gap until its name lands */
.dd-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .dd-groups { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dd-group { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.dd-group h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); font: 500 18px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.dd-group h4 small { font: 500 11px/1 var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); }
.dd-group.mine { border-color: var(--dd-acc); box-shadow: 0 0 0 1px var(--dd-acc); }
.dd-group.mine h4 { background: var(--dd-soft); color: var(--dd-acc); }
.dd-group.flash h4 { animation: dd-flash 1s ease-out 2; }
@keyframes dd-flash { from { background-color: color-mix(in srgb, var(--c1) 40%, var(--surface)); } }
.dd-slot { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-top: 1px solid var(--line); font: 500 13px/1 var(--body); white-space: nowrap; overflow: hidden; }
.dd-slot:first-of-type { border-top: 0; }
.dd-slot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-slot.empty::before { content: ""; width: 58%; height: 8px; border-radius: 999px; background: var(--surface-3); }
.dd-slot small { margin-left: auto; flex: none; padding: 3px 5px; border-radius: var(--r-xs); background: var(--surface-3); color: var(--muted); font: 600 11px/1 var(--display); letter-spacing: .04em; }
.dd-slot.me, .dd-tk.me { background: var(--dd-soft); color: var(--dd-acc); font-weight: 600; }
.dd-new { animation: dd-landed 1.8s ease-out; }
@keyframes dd-landed { from { background-color: color-mix(in srgb, var(--c1) 34%, var(--surface)); } }
.dd-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.dd-tk { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-content: center; height: 50px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.dd-tk > .flag, .dd-tk > .crest { grid-row: span 2; align-self: center; width: 27px; height: auto; }
.dd-group .dd-tk { height: 46px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.dd-group h4 + .dd-tk { border-top: 0; }
.dd-team { font: 500 13px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-who { display: flex; align-items: center; min-height: 15px; font: 400 12px/1.2 var(--body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-who.empty::before { content: ""; width: 62%; height: 7px; border-radius: 999px; background: var(--surface-3); }
.dd-tk.me .dd-who { color: var(--dd-acc); font-weight: 600; }
.dd-tk.none .dd-who { color: var(--faint); }
.dd-sub { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 8px; font: 500 15px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.dd-sub span + span { font: 400 13px/1 var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); }
.dd-ents { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dd-ents li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; }
.dd-ents .me { border-color: var(--dd-acc); color: var(--dd-acc); font-weight: 600; }
.dd-ents .drawn { opacity: .45; text-decoration: line-through; }
.dd-none { margin: 0; font-size: 14px; color: var(--muted); }

/* A drawn name on its way from the card to its gap */
.dd-flyer { position: fixed; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 0 8px; overflow: hidden; white-space: nowrap; pointer-events: none;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--sh-2); font: 600 13px/1 var(--body); }
.dd-flyer.me { background: var(--dd-acc); color: var(--dd-on); }

/* Start and Skip stay in reach at the foot of the screen */
.dd-ctl { position: sticky; bottom: 8px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 0; }
main.has-tabbar .dd-ctl { bottom: calc(var(--tab-h) + 6px); }
.dd-ctl form { margin: 0; }
.dd [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .dd-group.flash h4, .dd-new { animation: none; } }

/* The link to watch the mini group draw again, under the Mini group card */
.mg-again { margin: 0; }

/* Brand rule 2 (PRED-728): on phones, buttons side by side share their row equally: the same
   width, an 8px gap and centred text. Three or more that won't fit go two to a row, still equal.
   Anything else in the row (a line of text, a box) takes a line of its own. Kept last so it wins
   over each group's own layout; wider screens keep that layout. */
@media (max-width: 575.98px) {
  .btn-row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 8px; }
  .btn-row > .btn, .btn-row > form { flex: 1 1 0; min-width: 7rem; max-width: none; margin: 0; }
  .btn-row > .btn, .btn-row > form > .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
  .btn-row > form { display: flex; }
  .btn-row > form > .btn { flex: 1 1 auto; width: 100%; margin: 0; }
  .btn-row:has(> :is(.btn, form) ~ :is(.btn, form) ~ :is(.btn, form)) > :is(.btn, form) { max-width: calc(50% - 4px); }
  .btn-row > :not(.btn, form) { flex-basis: 100%; }
  /* The setup action bar keeps its two or three buttons on one line; the labels shrink to fit (PRED-633) */
  .btn-row.setup-bar { flex-wrap: nowrap; }
  .btn-row.setup-bar > .btn { min-width: 0; max-width: none; }
}

/* End Game (PRED-816, option A of docs/mockups/options/end-game-options.html): the table as it
   stands with each place's prizes, what happens next, then type END to wake the red button */
.eg-card { margin-top: 14px; }
.eg-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.band + .eg-row { border-top: 0; }
.eg-row .pos { font-weight: 600; color: var(--muted); }
.eg-row .nm { display: grid; gap: 1px; min-width: 0; }
.eg-row .nm small { font-size: 12px; color: var(--muted); }
.eg-row .pts { font: 400 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.eg-prize { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gold-ink); }
.eg-prize.prestige { color: var(--muted); }
.eg-next { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.eg-next li { display: flex; gap: 8px; }
.eg-next .bi { flex: none; margin-top: 2px; color: var(--accent); }
.eg-warn { display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--amber-soft); font-size: 13px; }
.eg-warn .bi { color: var(--amber); }
.eg-type { display: grid; gap: 6px; }
.eg-type input { text-transform: uppercase; letter-spacing: .1em; }
.eg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
form.eg-card:has(.eg-type input:invalid) .btn-danger { opacity: .45; pointer-events: none; }

/* A tap answers at once (PRED-863, dashboard v152): a thin bar along the top until the next
   page arrives, set by static/js/nav-wait.js */
html.nav-wait::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 2000;
  background: var(--accent);
  transform-origin: left;
  animation: navWait 1.2s ease-out forwards;
}
@keyframes navWait { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@media (prefers-reduced-motion: reduce) { html.nav-wait::before { animation: none; } }

/* Good News on Home (PRED-865, dashboard v153): a compact card per success in a pale wash of
   its game's colour; the X has its own column, and the section hides once it is empty */
.gnews { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.gnews:not(:has(.gnews-c)) { display: none; }
.gnews-h { display: flex; align-items: center; gap: 6px; font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #1E8E4F; }
.gnews-c {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; align-items: center; padding: 7px 6px 7px 8px; border-radius: 14px;
  background: color-mix(in srgb, var(--c1) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c1) 22%, transparent);
}
.gnews-a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; color: var(--ink); text-decoration: none; min-width: 0; }
.gnews-a .gbadge { --s: 30px; }
.gnews-t { display: block; font-weight: 600; font-size: 14px; line-height: 1.25; }
.gnews-s { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
.gnews-x { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 12px; padding: 0; }
@media (hover: hover) { .gnews-x:hover { background: var(--surface-3); color: var(--ink); } }
.gnews form { margin: 0; }

/* Who goes through a knockout match predicted level (PRED-868): under the match, empty when not asked */
.through-pick:empty { display: none; }
.through-pick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.through-pick .tp-q { font-weight: 600; }
.dk-bug .through-pick { grid-column: 2 / -1; padding: 0 12px 8px; }

/* Tournament picks on Predict (PRED-868): the winner and the runner-up, then the final picked */
.tp-card { margin-bottom: 16px; }
.tp-body { display: grid; gap: 10px; padding: 12px 16px 14px; }
.tp-note { margin: 0; font-size: 13px; color: var(--muted); }
.tp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; }
.tp-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.tp-form .form-select { min-height: 44px; }
.tp-final { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 14px; }
.tp-final .teamline { display: inline-flex; align-items: center; gap: 6px; }
.tp-beat { color: var(--muted); font-size: 13px; }
.tp-pts { margin-left: auto; font: 600 15px/1 var(--display); color: var(--accent); }
.tp-msg { margin: 0; font-size: 13px; font-weight: 600; }
.tp-msg.ok { color: var(--accent); }
.tp-msg.warn { color: var(--amber); }

/* Typing boxes are 16px on touch screens: Safari on an iPhone zooms the page when you tap a
   smaller one (PRED-974). Computers keep the smaller sizes above */
@media (pointer: coarse) {
  .rd-find input, .rd-find input[type="search"], .pn-reply textarea, .fx-tin input, .fx-times select,
  .calc-n input, .setup-f select, .plq-in { font-size: 16px; }
}

/* The demo club (PRED-1021, dashboard v187): Thanks for trying Flare, its two buttons the
   same size with a gap, side by side or one above the other on a phone */
.demo-end { max-width: 560px; margin: 24px auto; text-align: center; }
.demo-end .su-inv { text-align: left; margin: 14px 0; }
.demo-end-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 479px) { .demo-end-acts { grid-template-columns: 1fr; } }

/* Site Admin, Clubs, Demos (PRED-1022, dashboard v187) */
.demo-form { display: grid; gap: 12px; }
.demo-row { flex-wrap: wrap; }
.demo-acts { flex-basis: 100%; }
.demo-end-now > summary { list-style: none; }
.demo-end-now > summary::-webkit-details-marker { display: none; }
.demo-end-now[open] > summary { display: none; }
.demo-end-now .note { align-items: center; flex-wrap: wrap; }
/* The demo bar on every page of a demo club, for its prospect (PRED-1022) */
.demo-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--blue-soft); color: var(--ink); font-size: 14px; }
.demo-bar > .bi { color: var(--blue); }
.demo-bar .grow { flex: 1; min-width: 180px; }
.demo-leave > summary { list-style: none; }
.demo-leave > summary::-webkit-details-marker { display: none; }
.demo-leave[open] > summary { display: none; }
.demo-leave form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.demo-welcome { margin-bottom: 14px; }