/* DiceFooty — visual system
   Ground: a floodlit football pitch. Panels: fixture-list paper.
   Two accents only: turf green for actions, floodlight amber for attention.

   The ground used to be evening blue. It is now the pitch itself — the same
   three tokens, so every screen that sat on `--pitch` moved with it and not one
   component had to be touched. */

:root {
  --pitch:       #0F3D23;
  --pitch-deep:  #0A2C19;
  --pitch-soft:  #17512F;
  --paper:       #FAFAF7;
  --paper-alt:   #F0F1EC;
  --ink:         #16222E;
  --ink-soft:    #5A6B7A;
  --chalk:       #E8EEF3;
  --chalk-soft:  #9DB2C4;
  --grass:       #1F8A4C;
  --grass-dark:  #17703D;
  --floodlight:  #F2B705;
  --danger:      #B3372B;
  --playoff:     #E07A1F;
  /* darker variants of the boundary colours, for text on the light table */
  --zone-promotion-text:  #176B3A;
  --zone-playoff-text:    #A85B0B;
  --zone-relegation-text: #A83024;
  /* the fixture being played, and its two clubs in the table: floodlight amber
     at low strength, so it reads as attention rather than as a result */
  --picked:      rgba(242, 183, 5, 0.22);
  --picked-soft: rgba(242, 183, 5, 0.13);
  --rule:        #D9DCD4;
  --rule-dark:   rgba(232, 238, 243, 0.16);

  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cond: 'Barlow Condensed', 'Barlow', system-ui, 'Segoe UI', sans-serif;

  --shell: 1140px;
  --r-lg: 10px;
  --r-sm: 6px;
}

/* --- the pitch behind everything ---------------------------------------
   Fixed, so the markings stay put while the page scrolls, and behind every
   layer, so nothing readable ever sits on a line rather than on the green. */
.pitch {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* the SVG is sliced, so its shapes run past the viewport by design — clipped
     here so they can never add to the page's scrollable width */
  overflow: hidden;
  color: #FFFFFF;
  /* the faintest suggestion of mown stripes, under the markings */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.018) 0 8vw,
    rgba(0, 0, 0, 0.018) 8vw 16vw);
}
.pitch svg { width: 100%; height: 100%; display: block; opacity: 0.085; }

/* Everything else sits above it. */
.topbar, main, .footer, .skip { position: relative; z-index: 1; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pitch);
  color: var(--chalk);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-family: var(--cond); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: 0.005em; }

p { margin: 0 0 0.9em; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--floodlight);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--floodlight); color: var(--ink);
  padding: 10px 16px; z-index: 50; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ----------------------------------------------------------- top bar --- */

.topbar {
  background: var(--pitch-deep);
  border-bottom: 1px solid var(--rule-dark);
  position: sticky; top: 0; z-index: 20;
}
/* Wider than the content shell: seven sections and a wordmark need more room
   than a league table does. `wrap` is what lets the narrow-screen menu drop
   onto its own line instead of pushing the header off the side. */
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 14px; flex-wrap: wrap;
}

.wordmark {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--chalk);
}
.wordmark-text {
  font-family: var(--cond); font-weight: 700; font-size: 25px;
  letter-spacing: 0.055em; line-height: 1;
}
.wordmark-dice {
  width: 26px; height: 26px; border-radius: 6px; background: var(--grass);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 6px; flex: none;
}
.wordmark-dice i { background: var(--paper); border-radius: 50%; }

.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- the site's sections ------------------------------------------------
   One row of tabs on a wide screen; a panel under the header on a narrow one,
   opened by the button beside the wordmark. Both are the same list of
   buttons — only the layout changes. */
.site-nav {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
}
.nav-tab {
  font-family: var(--cond); font-size: 15.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  background: none; border: 0; cursor: pointer;
  color: var(--chalk-soft);
  padding: 10px 8px; border-radius: var(--r-sm);
  white-space: nowrap; line-height: 1.1;
}
.nav-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-tab[aria-current="page"] {
  color: var(--ink); background: var(--floodlight);
}
/* A section that exists in the navigation but not yet in the product. Muted
   rather than hidden, so the shape of the site is visible from the start. */
.nav-tab-soon { opacity: 0.6; }
.nav-tab-soon:hover { opacity: 1; }

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 38px; padding: 0 9px;
  background: none; border: 1px solid var(--rule-dark); border-radius: var(--r-sm);
  cursor: pointer; margin-left: auto;
}
.nav-toggle span { display: block; height: 2px; background: var(--chalk); border-radius: 2px; }
.nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 1120px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    width: 100%; flex: 0 0 100%; order: 3;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding-top: 10px; margin-top: 4px;
    border-top: 1px solid var(--rule-dark);
  }
  .site-nav.is-open { display: flex; }
  .nav-tab { text-align: left; padding: 12px 10px; font-size: 18px; }
  .topbar-actions { order: 2; }
}

.danger-zone { margin-top: 26px; }
.danger-zone h2 { font-size: 20px; margin-bottom: 4px; }
.danger-zone .hero-cta { margin-top: 14px; }

/* ------------------------------------------------------------ layout --- */

main { flex: 1; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 20px; }

.footer {
  width: 100%;  /* flex item: without this, `margin:0 auto` collapses it to its content */
  max-width: var(--shell); margin: 0 auto; padding: 28px 20px 40px;
  color: var(--chalk-soft); font-size: 13.5px;
}
.footer p { margin: 0; }

/* ------------------------------------------------------------ hero --- */

/* The tagline lives in the hero rather than the header: with seven sections up
   there it had nowhere to go, and here it is visible on a phone too. */
.hero-tagline {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: clamp(13px, 1.6vw, 15.5px); font-weight: 600;
  color: var(--floodlight);
  margin: 0 0 14px;
}

.hero { padding: 56px 0 40px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 52px; align-items: center;
}
.hero h1 {
  font-size: clamp(40px, 6.4vw, 66px);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 18px;
  max-width: 13ch;
}
.hero-tag {
  font-size: 19px; color: var(--chalk-soft); max-width: 46ch; margin-bottom: 26px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { margin: 22px 0 0; font-size: 14px; color: var(--chalk-soft); }

.hero-preview {
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(4, 14, 24, 0.42);
  overflow: hidden;
}
.hero-preview-head {
  padding: 12px 16px; border-bottom: 2px solid var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.hero-preview-head strong { font-family: var(--cond); font-size: 20px; font-weight: 600; }
.hero-preview-head span { font-size: 13px; color: var(--ink-soft); }

/* --------------------------------------------------------- buttons --- */

.btn {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 11px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; background: var(--grass); color: #fff; line-height: 1.2;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--grass-dark); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--grass); }

.btn-lg { font-size: 17px; padding: 14px 26px; }

.btn-quiet {
  background: transparent; color: var(--chalk); border-color: var(--rule-dark);
}
.btn-quiet:hover { background: rgba(232, 238, 243, 0.08); }

.btn-onpaper {
  background: transparent; color: var(--ink); border-color: var(--rule);
}
.btn-onpaper:hover { background: var(--paper-alt); }

/* The floodlight yellow, for a secondary action that has to be as findable as
   the primary one beside it. Dark ink on yellow rather than white: white on
   #F2B705 is around 1.9:1 and unreadable, dark ink is about 11:1. Hover,
   focus and pressed all stay visibly distinct, and a genuine disabled state
   still dims through the shared .btn[disabled] rule. */
.btn-accent {
  background: var(--floodlight); color: var(--ink);
  border-color: rgba(22, 34, 46, 0.22);
}
.btn-accent:hover { background: #D9A404; }
.btn-accent:active { background: #C79504; }
.btn-accent[disabled]:hover { background: var(--floodlight); }
.btn-accent:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 2px;
}

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #962d23; }

.btn-sm { font-size: 13.5px; padding: 7px 13px; }

/* ---------------------------------------------------------- panels --- */

.panel {
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg); padding: 24px;
  margin-bottom: 18px;
}
.panel > h2 { font-size: 24px; margin-bottom: 4px; }
.panel-hint { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 18px; max-width: 62ch; }

.page-head { padding: 34px 0 22px; }
.page-head h1 { font-size: clamp(30px, 4.4vw, 42px); margin-bottom: 6px; }
.page-head p { color: var(--chalk-soft); max-width: 60ch; margin: 0; }

/* ----------------------------------------------------------- forms --- */

label.field { display: block; margin-bottom: 16px; }
label.field > span {
  display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 5px; color: var(--ink);
}

input[type="text"], input[type="search"], input[type="number"], select {
  font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 10px 12px; width: 100%; max-width: 420px;
}
input::placeholder { color: #97A2AC; }

.chipset { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--rule); background: #fff; color: var(--ink-soft); cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}

/* ------------------------------------------------- division setup --- */

.division-card {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 20px; margin-bottom: 14px; background: #fff;
}
.division-card-head {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 14px;
}
.division-rank {
  font-family: var(--cond); font-size: 13px; font-weight: 600;
  color: var(--ink-soft); letter-spacing: 0.04em;
}
.setup-row { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.setup-row > * { min-width: 0; }

.squad-summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 10px; font-size: 15px;
}
.squad-count { font-family: var(--cond); font-size: 27px; font-weight: 600; }
.squad-count.is-empty { color: var(--ink-soft); }

.picked { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.picked li {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper-alt); border-radius: 999px; padding: 4px 5px 4px 12px; font-size: 14px;
}
/* The remove control only. This used to be `.picked button`, which also caught
   the S / N / W rating circles sitting in the same row — so hovering Strong or
   Neutral turned it red, the colour that means Weak. The destructive style is
   now scoped to the one button it belongs to. */
.picked .picked-remove {
  border: 0; background: rgba(22, 34, 46, 0.1); color: var(--ink);
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1;
  font-size: 14px; display: grid; place-items: center;
}
.picked .picked-remove:hover { background: var(--danger); color: #fff; }

/* ---------------------------------------------------- team picker --- */

.picker { border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 16px; }
.picker-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.picker-tools input[type="search"] { max-width: 340px; }
.picker-tools select { max-width: 210px; }

.picker-list {
  max-height: 400px; overflow-y: auto;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  /* No padding at the top: it would sit above the sticky header and let a
     sliver of the scrolling list show through the gap. */
  padding: 0 4px 4px;
}
.picker-group-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 10px 6px; position: sticky; top: 0; background: var(--paper);
  border-bottom: 1px solid var(--rule);
  /* The rows are later siblings, so they paint over the sticky header without
     this. Only noticeable now the longer lists get scrolled. */
  z-index: 1;
}
.picker-group-head h4 { margin: 0; font-family: var(--cond); font-size: 17px; font-weight: 600; }
.picker-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1px; padding: 6px 0 14px; }

.opt { display: flex; gap: 9px; align-items: center; padding: 6px 10px; border-radius: var(--r-sm); font-size: 15px; }
.opt:hover { background: var(--paper-alt); }
.opt input { margin: 0; width: 17px; height: 17px; accent-color: var(--grass); flex: none; }
.opt.is-taken { color: var(--ink-soft); }
.opt.is-taken span { text-decoration: line-through; }
.opt-taken-note { font-size: 12.5px; color: var(--danger); margin-left: auto; text-decoration: none !important; }

.picker-empty { padding: 20px 12px; color: var(--ink-soft); }
.picker-elsewhere { margin: 0; padding: 8px 12px 12px; font-size: 13.5px; color: var(--ink-soft); }

/* Country tabs above the club library. Navigation, not another set of league
   controls — hence the underline rather than the pill used by .chip. */
.lib-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); margin-bottom: 14px;
}
.lib-tab {
  font-family: var(--cond); font-size: 18px; font-weight: 600; letter-spacing: 0.01em;
  padding: 9px 18px; min-height: 44px;
  background: none; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -1px; color: var(--ink-soft); cursor: pointer;
}
.lib-tab:hover { color: var(--ink); background: var(--paper-alt); }
.lib-tab.is-on { color: var(--grass-dark); border-bottom-color: var(--grass); }
/* Four tabs with long labels do not fit one narrow row and read as a menu when
   stacked one per line, so pair them up two by two. The active tab gets a tint
   as well as the underline, which reads better in a grid than on a single row. */
@media (max-width: 900px) {
  .lib-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .lib-tab { padding: 10px 8px; font-size: 16.5px; }
  /* An odd number of tabs would leave a hole in the grid: let the last one
     take the full width rather than sit beside empty space. */
  .lib-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lib-tab.is-on { background: var(--paper-alt); }
}

/* ------------------------------------------------------- messages --- */

.notice { border-left: 4px solid var(--floodlight); background: #FFF8E3; color: var(--ink); padding: 12px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 16px; }
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.notice-error { border-left-color: var(--danger); background: #FCEDEB; }

.banner {
  background: var(--floodlight); color: var(--ink);
  padding: 10px 20px; font-size: 14.5px; font-weight: 500; text-align: center;
}

/* ------------------------------------------------- competition bar --- */

.comp-bar { padding: 26px 0 0; }
.comp-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.comp-title h1 { font-size: clamp(27px, 3.6vw, 38px); }
.comp-meta { color: var(--chalk-soft); font-size: 14.5px; }

.divtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rule-dark); }
.divtab {
  font-family: var(--cond); font-size: 19px; font-weight: 600;
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: var(--chalk-soft); padding: 9px 15px; cursor: pointer; margin-bottom: -1px;
}
.divtab:hover { color: var(--chalk); }
.divtab[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--floodlight); }

.division-strip {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: baseline;
  padding: 18px 0 20px; color: var(--chalk-soft); font-size: 14.5px;
}
.stat b { font-family: var(--cond); font-size: 21px; font-weight: 600; color: var(--chalk); margin-right: 5px; }
.stat-done {
  background: var(--floodlight); color: var(--ink); font-weight: 600;
  padding: 3px 12px; border-radius: 999px; font-size: 13.5px;
}

.final-banner {
  margin: 0; padding: 11px 16px; background: var(--floodlight); color: var(--ink);
  font-family: var(--cond); font-size: 18px; font-weight: 600;
}
.season-done {
  margin: 0; padding: 14px 16px; border-top: 1px solid var(--rule);
  background: #FFF8E3; color: var(--ink); font-size: 14.5px;
}
.season-done[hidden] { display: none; }
.build-stamp { opacity: 0.6; margin-left: 6px; }

/* the scorebook: enter scores on the left, watch the table on the right */
.scorebook {
  display: grid;
  /* the table carries far more information than the fixture list — ten columns
     plus the form guide — so it takes the larger share and the more prominent
     position. Roughly 44 / 56. */
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 20px; align-items: start;
}
.scorebook-main { min-width: 0; }
.scorebook-side {
  position: sticky; top: 74px;
  max-height: calc(100vh - 94px); overflow-y: auto;
  border-radius: var(--r-lg);
  container-type: inline-size;
}
.scorebook-side table.league { font-size: 14.5px; }
.scorebook-side table.league thead th,
.scorebook-side table.league tbody td { padding-left: 5px; padding-right: 5px; }
.scorebook-side table.league thead th.col-pos,
.scorebook-side table.league tbody td.col-pos { padding-left: 12px; }
.scorebook-side table.league thead th.col-pts,
.scorebook-side table.league tbody td.col-pts { padding-right: 12px; }

/* belt and braces: if the rail is ever squeezed (small tablet), shed the
   secondary columns rather than clipping the points */
@container (max-width: 430px) {
  .col-w, .col-d, .col-l, .col-gf, .col-ga { display: none; }
}

/* the form guide is the first thing to go when the rail is short, so the
   existing columns keep behaving exactly as they did before */
@container (max-width: 500px) {
  .col-form { display: none; }
}

.teams-details { margin: 16px 0 4px; border-top: 1px solid var(--rule); padding-top: 14px; }
.teams-details > summary {
  cursor: pointer; font-weight: 600; font-size: 15px; list-style-position: outside;
  padding: 4px 0;
}
.teams-details[open] > summary { margin-bottom: 12px; }

.picker-tools-gap { flex: 1 1 20px; }

/* seeding: a small dot beside a name, never a coloured row. Kept visually
   separate from the promotion/relegation system, which colours the name text. */
.seed-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; flex: none;
  font-family: var(--sans); font-size: 9px; font-weight: 600; line-height: 1;
  color: #fff; letter-spacing: 0;
}
/* amber is light, so its letter takes the dark ink instead */
.seed-dot.seed-amber { color: var(--ink); }
.seed-dot-after { margin-right: 0; margin-left: 6px; }
.seed-green { background: var(--grass); }
.seed-amber { background: var(--floodlight); }
.seed-red   { background: var(--danger); }

.picked-area { border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 12px; }
.picked-head { margin: 0 0 8px; font-weight: 600; font-size: 14.5px; }

.seeding { margin: 0 0 6px; }
.seeding-hint { margin: 7px 0 0; font-size: 13px; color: var(--ink-soft); max-width: 68ch; }
.chip-sm { font-size: 13.5px; padding: 5px 13px; }

.seed-counts { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); }
.picked-note { font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.field-head { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 5px; }
.scoring { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 4px; }
.scoring-sub { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--rule); }

.picked-seeded li { padding-left: 10px; }
.seed-pick { display: inline-flex; gap: 3px; margin-left: 8px; }
.seed-btn {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid rgba(22, 34, 46, 0.28); background: transparent;
  font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--ink-soft);
}
.seed-btn.is-on { color: #fff; }
.seed-btn.seed-amber.is-on { color: var(--ink); }
.seed-btn.seed-green.is-on { background: var(--grass); border-color: var(--grass); }
.seed-btn.seed-amber.is-on { background: var(--floodlight); border-color: #C79400; }
.seed-btn.seed-red.is-on   { background: var(--danger); border-color: var(--danger); }
/* Each circle shows ITS OWN colour on hover, before anything is clicked, so
   the control previews what pressing it would mean: Strong green, Neutral
   amber, Weak red. Never the shared destructive red. */
.seed-btn:hover:not([disabled]) { border-color: currentColor; }
.seed-btn.seed-green:hover:not(.is-on) { background: rgba(31, 138, 76, 0.16); border-color: var(--grass); color: var(--zone-promotion-text); }
.seed-btn.seed-amber:hover:not(.is-on) { background: rgba(242, 183, 5, 0.22); border-color: #C79400; color: var(--zone-playoff-text); }
.seed-btn.seed-red:hover:not(.is-on)   { background: rgba(179, 55, 43, 0.14); border-color: var(--danger); color: var(--zone-relegation-text); }
/* Hovering the one already chosen keeps its solid colour rather than lifting. */
.seed-btn.seed-green.is-on:hover { background: var(--grass-dark); border-color: var(--grass-dark); }
.seed-btn.seed-amber.is-on:hover { background: #E0A800; border-color: #C79400; }
.seed-btn.seed-red.is-on:hover   { background: #97281E; border-color: #97281E; }
.seed-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.picked-remove { margin-left: 8px; }

/* ---- a purple Super Seed in the selected-team list ----------------------
   The grey box stays; a purple outline goes round it; the rating badge and the
   three S / N / W circles are not drawn at all. No purple circle is added —
   the outline is the signal, and the club's name stays plainly readable. The
   status is also on the element as a title and an aria-label, so it does not
   depend on seeing the colour. */
.picked li.is-super {
  box-shadow: inset 0 0 0 2px var(--super);
  background: var(--paper-alt);
  padding-left: 12px;
}
.opt-cup.is-super {
  box-shadow: inset 0 0 0 2px var(--super);
  border-radius: var(--r-sm);
}

.rules { border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 14px; }
.rules-hint { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); }
.rules-row { display: flex; gap: 16px; flex-wrap: wrap; }
.rule { display: block; }
.rule > span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.rule input { width: 88px; max-width: 88px; }
.rules-preview { margin: 12px 0 0; font-size: 14px; color: var(--ink); font-weight: 500; }
.opt-own { font-size: 12px; color: var(--ink-soft); }

.viewtabs { display: flex; gap: 8px; margin-bottom: 16px; }
.viewtab {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(232, 238, 243, 0.08); border: 1px solid var(--rule-dark); color: var(--chalk-soft);
}
.viewtab[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* -------------------------------------------------- league table --- */

.table-wrap { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); overflow: hidden; }

table.league { width: 100%; border-collapse: collapse; font-size: 15px; }

table.league thead th {
  font-family: var(--cond); font-weight: 600; font-size: 15px;
  text-align: right; padding: 11px 8px; border-bottom: 2px solid var(--ink);
  white-space: nowrap; color: var(--ink);
}
table.league thead th.col-pos { text-align: left; padding-left: 16px; width: 46px; }
table.league thead th.col-team { text-align: left; width: auto; }
table.league thead th.col-pts { padding-right: 16px; }

table.league tbody td {
  padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.league tbody tr:last-child td { border-bottom: 0; }
table.league tbody tr:nth-child(even) { background: rgba(22, 34, 46, 0.028); }

/* these need to beat `table.league tbody td` above, so they carry the same prefix */
table.league tbody td.col-pos { text-align: left; padding-left: 16px; color: var(--ink-soft); width: 1%; }
table.league tbody td.col-team { text-align: left; font-weight: 500; white-space: normal; width: auto; }
.clinch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; margin-left: 6px;
  font-family: var(--sans); font-size: 10px; font-weight: 600; line-height: 1;
  color: #fff; vertical-align: middle;
}
/* Both greens, because both are good news, and the champions' is the darker,
   heavier one so a C and a P are told apart without reading them. */
.clinch-c { background: var(--grass-dark); box-shadow: 0 0 0 2px rgba(31, 138, 76, 0.28); }
.clinch-p { background: var(--grass); }
.clinch-r { background: var(--danger); }

/* What the letters mean, under the table that shows them. */
.clinch-key {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 8px 0 0; padding: 0;
  font-size: 13.5px; color: var(--ink-soft);
}
.clinch-key-item { display: inline-flex; align-items: center; gap: 2px; }
.clinch-key-item .clinch { margin-left: 0; margin-right: 6px; }
table.league tbody td.col-pts { font-weight: 600; padding-right: 12px; font-size: 16px; }
table.league tbody td.col-gd { color: var(--ink-soft); }

table.league tbody tr.leader td.col-pos { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--floodlight); }
table.league tbody tr.unplayed-all td { color: var(--ink-soft); }

/* form guide: last six results, newest on the right */
table.league thead th.col-form { text-align: right; }
table.league tbody td.col-form { text-align: right; padding-right: 16px; white-space: nowrap; }
.form-guide { display: inline-flex; gap: 2px; vertical-align: middle; }
.form-box {
  width: 14px; height: 14px; border-radius: 3px;
  font-family: var(--sans); font-size: 10px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; letter-spacing: 0;
}
.form-w { background: var(--grass); }
.form-d { background: #6E7A84; }
.form-l { background: var(--danger); }

/* compact variant used by the example table on the home page */
table.league.is-compact thead th, table.league.is-compact tbody td { padding-top: 8px; padding-bottom: 8px; }

.table-foot { padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-soft); }

/* qualification boundaries: a line between positions, never a filled row.
   Declared after the :last-child reset above so a boundary still shows. */
/* the team name takes the colour of the POSITION it currently occupies, so it
   changes as teams move; nothing else in the row is coloured */
table.league tbody td.col-team.zone-promotion  { color: var(--zone-promotion-text); }
table.league tbody td.col-team.zone-playoff    { color: var(--zone-playoff-text); }
table.league tbody td.col-team.zone-relegation { color: var(--zone-relegation-text); }

/* the two clubs in the selected fixture.
   A tint on the cells and nothing else: the P and R badges, the seed dots, the
   zone text colours and the boundary lines all paint over it untouched, and the
   team name itself is not restyled. Set on the cells rather than the row so it
   sits above the even-row shading without having to fight it. */
table.league tbody tr.is-selected td { background: var(--picked); }

table.league tbody tr.line-promotion td { border-bottom: 2px solid var(--grass); }
table.league tbody tr.line-playoff td { border-bottom: 2px solid var(--playoff); }
table.league tbody tr.line-relegation td { border-bottom: 2px solid var(--danger); }

.table-key {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--ink-soft);
}
.table-key .key { display: inline-flex; align-items: center; gap: 7px; }
.table-key .key::before { content: ''; width: 16px; height: 2px; border-radius: 2px; }
.table-key .key-promotion::before { background: var(--grass); }
.table-key .key-playoff::before { background: var(--playoff); }
.table-key .key-relegation::before { background: var(--danger); }

/* ----------------------------------------------------- fixtures --- */

.round-nav {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 14px 16px; border-bottom: 1px solid var(--rule);
}
.round-nav h3 { font-size: 21px; margin-right: auto; }
.round-nav select {
  width: auto; max-width: 260px;
  /* a narrower fixtures column would otherwise push Next onto a second line:
     give the selector a small basis so it fills whatever is left instead */
  flex: 1 1 108px; min-width: 108px;
}
.round-nav h3 { min-width: 0; }

.fixtures { background: var(--paper); color: var(--ink); border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 6px 0 10px; }

.fixture {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto minmax(0, 1fr) 36px;
  align-items: center; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid var(--rule);
}
.fixture:last-child { border-bottom: 0; }
/* the seed dot is a flex sibling of the name, so however the name wraps the
   dot stays beside it and can never drop onto a line of its own */
.fixture .home, .fixture .away { display: flex; align-items: center; gap: 6px; font-weight: 500; min-width: 0; }
.fixture .home { justify-content: flex-end; text-align: right; }
.fixture .away { justify-content: flex-start; text-align: left; }
.fixture .team-name { min-width: 0; }
.fixture .seed-dot { margin: 0; }
.fixture.is-played .home, .fixture.is-played .away { color: var(--ink); }
/* which fixture the table is currently showing — lighter than the table tint,
   since here it is confirming a choice rather than picking two rows out of many */
.fixture.is-selected { background: var(--picked-soft); }

.score-pair { display: flex; align-items: center; gap: 5px; }
.score-pair input {
  width: 46px; max-width: 46px; text-align: center; padding: 7px 4px;
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.score-pair input::-webkit-outer-spin-button,
.score-pair input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.score-pair input:placeholder-shown { border-style: dashed; border-color: #C6CBC2; }
.score-pair .dash { color: var(--ink-soft); }

.fixture-clear {
  border: 0; background: none; color: var(--ink-soft); cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1;
}
.fixture-clear:hover { background: var(--danger); color: #fff; }
.fixture-clear[hidden] { display: none; }

.resting {
  padding: 10px 16px; font-size: 14px; color: var(--ink-soft);
  background: var(--paper-alt); border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------- teams list --- */

.teamlist { columns: 220px auto; column-gap: 26px; margin: 0; padding: 0; list-style: none; }
.teamlist li { padding: 5px 0; break-inside: avoid; border-bottom: 1px solid var(--rule); }
.teamlist .custom-flag { font-size: 12.5px; color: var(--ink-soft); margin-left: 6px; }

/* ------------------------------------------------------ dialog --- */

.dialog-backdrop {
  position: fixed; inset: 0; background: rgba(6, 16, 26, 0.72);
  display: grid; place-items: center; padding: 20px; z-index: 40;
}
.dialog-backdrop[hidden] { display: none; }
.dialog {
  background: var(--paper); color: var(--ink); border-radius: var(--r-lg);
  padding: 24px; max-width: 460px; width: 100%;
}
.dialog h2 { font-size: 23px; margin-bottom: 8px; }
.dialog p { font-size: 15px; color: var(--ink-soft); }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 11px 20px;
  border-radius: 999px; font-size: 14.5px; font-weight: 500; z-index: 45;
  box-shadow: 0 8px 24px rgba(4, 14, 24, 0.4);
}
.toast[hidden] { display: none; }

/* ----------------------------------------------------- responsive --- */

/* below this the two columns get too cramped to type in, so stack them */
@media (max-width: 1000px) {
  .scorebook { grid-template-columns: 1fr; gap: 16px; }
  .scorebook-side { position: static; max-height: none; overflow: visible; }
}

@media (max-width: 900px) {
  .hero { padding: 36px 0 28px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { max-width: none; }
}

@media (max-width: 620px) {
  .shell { padding: 0 14px; }
  .topbar-inner { padding: 10px 14px; }
  .wordmark-text { font-size: 21px; }
  .panel { padding: 18px 15px; }
  .division-card { padding: 15px; }

  table.league { font-size: 14px; }
  table.league thead th, table.league tbody td { padding: 8px 5px; }
  table.league thead th.col-pos, table.league tbody td.col-pos { padding-left: 10px; }
  table.league thead th.col-pts, table.league tbody td.col-pts { padding-right: 10px; }
  /* drop the least load-bearing columns first */
  .col-w, .col-d, .col-l, .col-gf, .col-ga { display: none; }

  .fixture { grid-template-columns: 0 minmax(0,1fr) auto minmax(0,1fr) 28px; gap: 5px; padding: 9px 8px; font-size: 14.5px; }
  /* the tick needs a column of its own, which mobile otherwise collapses to nothing */
  .fixtures.is-picking .fixture { grid-template-columns: 26px minmax(0,1fr) auto minmax(0,1fr) 24px; }
  .score-pair input { width: 40px; max-width: 40px; }
  .picker-options { grid-template-columns: 1fr; }
  .division-strip { gap: 18px; }
}



/* --------------------------------------------- auto-generate bar --- */

/* A secondary tool: present when wanted, never competing with the fixtures.
   Closed it is one quiet button; open it grows two rows of controls. */
.autobar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--paper-alt); color: var(--ink);
  padding: 9px 16px; border-bottom: 1px solid var(--rule);
}
.autobar.is-open { display: block; background: #FFF8E3; }
.autobar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.autobar-row + .autobar-row { margin-top: 8px; }
.autobar-title { font-family: var(--cond); font-size: 18px; margin-right: auto; }
.autobar-note { font-size: 13px; color: var(--ink-soft); margin-right: auto; }
.autobar-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }

.auto-tick { display: flex; align-items: center; justify-content: center; }
.auto-tick-gap { display: block; }
.auto-check { width: 19px; height: 19px; margin: 0; cursor: pointer; accent-color: var(--grass); }

@media (max-width: 620px) {
  .autobar { padding: 9px 8px; }
  .autobar-title { font-size: 16.5px; }
  .auto-check { width: 22px; height: 22px; }
}

/* ------------------------------------------------- digital dice --- */

/* Unrolled, the die sits at a tilt and carries its own name (D4/D6/D8) rather
   than a number, so it cannot read as a score that has already been generated.
   Landing squares it up. */
.die {
  width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer;
  border-radius: 9px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font-family: var(--cond); font-size: 17px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(-11deg);
  box-shadow: 2px 3px 0 rgba(22, 34, 46, 0.16);
  transition: transform 90ms ease, box-shadow 90ms ease, background 90ms ease;
}
.die .die-face { display: block; font-variant-numeric: tabular-nums; }
.die:hover { transform: rotate(-11deg) scale(1.06); background: #FFF8E3; }
.die:active { transform: rotate(-4deg) scale(0.97); box-shadow: 1px 1px 0 rgba(22, 34, 46, 0.16); }

.die.is-rolled {
  transform: rotate(0deg);
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  font-size: 20px;
  box-shadow: 2px 3px 0 rgba(22, 34, 46, 0.10);
}
.die.is-rolled:hover { transform: rotate(0deg) scale(1.04); background: var(--pitch-soft); }

/* the tumble: CSS does the motion, JS flickers the faces. No engine, no
   dependency, and it ends cleanly on the generated value. */
.die.is-rolling {
  animation: die-tumble 165ms linear infinite;
  background: var(--floodlight); border-color: #C79400; color: var(--ink);
  cursor: default;
}
@keyframes die-tumble {
  0%   { transform: rotate(-14deg) scale(1);    }
  25%  { transform: rotate(76deg)  scale(1.08); }
  50%  { transform: rotate(168deg) scale(0.96); }
  75%  { transform: rotate(262deg) scale(1.07); }
  100% { transform: rotate(346deg) scale(1);    }
}
.die.just-landed { animation: die-land 230ms ease-out 1; }
@keyframes die-land {
  0%   { transform: rotate(0deg) scale(1.22); }
  55%  { transform: rotate(0deg) scale(0.95); }
  100% { transform: rotate(0deg) scale(1);    }
}
.die[disabled] { opacity: 1; }

.score-pair-dice { gap: 8px; }
.fixture.is-dice { padding-top: 7px; padding-bottom: 7px; }

@media (prefers-reduced-motion: reduce) {
  .die.is-rolling { animation: none; background: var(--floodlight); }
  .die.just-landed { animation: none; }
}

@media (max-width: 620px) {
  .die { width: 36px; height: 36px; font-size: 15.5px; border-radius: 8px; }
  .die.is-rolled { font-size: 18px; }
  .score-pair-dice { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ====================================================== League Cup === */
/* Deliberately borrows the league's card, picker, chip and score-box
   styling. Only the things a knockout needs are new: the stage strip, the
   tie block, the aggregate line and the penalties button. */

.cup-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.cup-head h1 { font-size: 34px; }
.cup-sub { margin: 4px 0 0; color: var(--ink-soft); font-size: 15px; }
/* A cup created under an older entry format, kept as it was and labelled. */
.cup-sub-legacy { font-size: 13.5px; color: #B4690E; }
.cup-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cup-note { margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.cup-note-on strong { color: var(--grass-dark); }
.cup-note-off strong { color: #B4690E; }
.cup-entering { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.cup-entering span { font-weight: 600; color: var(--ink); }

/* Round One byes — collapsed by default, so a competition that has them can
   show who they are at any stage without crowding the round being played. */
.cup-byes { padding: 16px 24px; }
.cup-byes > summary {
  cursor: pointer; font-size: 14.5px; color: var(--ink-soft);
  list-style-position: outside; padding: 2px 0;
}
.cup-byes > summary strong { color: var(--ink); }
.cup-byes[open] > summary { margin-bottom: 12px; }
.cup-byes .cup-entering { margin-bottom: 0; }

.cup-stages {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 18px; padding: 0;
}
.cup-stage {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--cond); font-size: 16px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  background: var(--paper-alt); color: var(--ink-soft);
}
.cup-stage em { font-style: normal; font-size: 13px; opacity: 0.75; }
.cup-stage-now { background: var(--grass); color: #fff; }
.cup-stage-done { background: #E2EFE6; color: var(--grass-dark); }

/* Said to a screen reader, never shown. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cup-champion {
  position: relative; overflow: hidden;
  /* Deep enough that the trophy and the name sit in the middle of it rather
     than filling it edge to edge, and symmetric so the block is exactly
     centred rather than nearly. */
  padding: 32px 22px; margin-bottom: 18px;
  border-radius: var(--r-md); background: var(--grass); color: #fff;
}
/* The champion sits above both decorative layers and is never overlapped.
   A column, centred both ways: trophy above, name below, and nothing else
   competing with either. */
.cup-champion-text {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  /* keeps the club name legible for the couple of seconds a pale fleck may
     pass behind it */
  text-shadow: 0 2px 6px rgba(12, 29, 44, 0.5);
}

/* The trophy supports the name: always comfortably smaller than it, and in the
   floodlight amber used everywhere else for attention. */
.cup-trophy {
  width: clamp(30px, 4.6vw, 44px); height: auto;
  color: var(--floodlight);
  filter: drop-shadow(0 2px 5px rgba(12, 29, 44, 0.45));
  flex: none;
}

/* The dominant element on the screen. `clamp` keeps a 28-character club name
   inside a 360px phone without shrinking a short one on a desktop, and
   `balance` splits a long name across two even lines rather than leaving one
   word stranded. */
.cup-champion strong {
  font-family: var(--cond); font-weight: 700;
  font-size: clamp(34px, 6.6vw, 68px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  max-width: 18ch;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* --- the keepsake trim: static, always there once a cup is won ----------- */
.cup-champion-trim, .cup-champion-burst {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
}
.cup-champion-trim .fleck {
  position: absolute; display: block; width: 7px; height: 9px; border-radius: 1px;
  opacity: 0.55;
}
.fleck-gold  { background: var(--floodlight); }
.fleck-chalk { background: #FFFFFF; opacity: 0.4; }
.fleck-ribbon {
  width: 5px; height: 20px; border-radius: 3px;
  background: linear-gradient(180deg, var(--floodlight), rgba(255, 255, 255, 0.55));
  opacity: 0.4;
}

/* --- the one-off burst: about 3.5 seconds, then the stage is emptied ----- */
.cup-champion-burst .piece {
  position: absolute; display: block;
  width: var(--w); height: var(--h); border-radius: 1px;
  opacity: 0;
  animation: champion-fall var(--dur) cubic-bezier(0.25, 0.7, 0.4, 1) var(--delay) 1 both;
}
.cup-champion-burst .piece-ribbon { border-radius: 4px; }
.piece-gold        { background: var(--floodlight); }
.piece-chalk       { background: #FFFFFF; }
.piece-grass-light { background: #7CD3A0; }
.piece-ribbon      { background: linear-gradient(180deg, #FFFFFF, var(--floodlight)); }

@keyframes champion-fall {
  0%   { opacity: 0; transform: translate3d(0, -14px, 0) rotate(0deg) scale(0.7); }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--spin)) scale(1);
  }
}

.piece-sky         { background: #6FC3F0; }
.piece-flame       { background: #F2704B; }

/* --- the champion's name gets its moment ---------------------------------
   A single pop on the banner, and one sweep of light across it. Both are
   one-shot: the class is taken off when the celebration ends and the banner
   settles back to its keepsake state. */
.cup-champion.is-celebrating {
  animation: champion-pop 900ms cubic-bezier(0.2, 1.3, 0.4, 1) 1 both;
  box-shadow: 0 0 0 2px var(--floodlight), 0 12px 34px rgba(242, 183, 5, 0.32);
}
.cup-champion.is-celebrating .cup-champion-text {
  animation: champion-name 1100ms cubic-bezier(0.2, 1.2, 0.35, 1) 1 both;
}
.cup-champion.is-celebrating::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: champion-sheen 1500ms ease-in-out 380ms 2 both;
}

/* Reduced motion, and the state a finished banner holds: no movement at all,
   just a brighter, clearly-marked champion. */
.cup-champion.is-crowned {
  box-shadow: 0 0 0 2px var(--floodlight), 0 8px 22px rgba(12, 29, 44, 0.3);
}

@keyframes champion-pop {
  0%   { transform: scale(0.97); }
  55%  { transform: scale(1.022); }
  100% { transform: scale(1); }
}
/* transform and opacity only — nothing here forces a layout pass. */
@keyframes champion-name {
  0%   { transform: scale(0.74); opacity: 0.15; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes champion-sheen {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* =========================================================================
   The full-window celebration.

   Fixed over everything, but takes no pointer events and is REMOVED from the
   document when it finishes, so once it is over there is nothing in front of
   the interface and nothing still animating. Everything below animates only
   transform and opacity, which is what keeps it cheap on a phone.
   ====================================================================== */
.champion-show {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.cs-layer { position: absolute; inset: 0; }

/* --- confetti and streamers, falling the whole height of the window ------ */
.cs-fall-piece {
  position: absolute; top: -12vh; display: block;
  width: var(--w); height: var(--h); border-radius: 1px;
  opacity: 0;
  will-change: transform, opacity;
  animation: cs-fall var(--dur) linear var(--delay) 1 both;
}
.cs-streamer { border-radius: 4px; animation-timing-function: ease-in-out; }

.cs-gold        { background: var(--floodlight); }
.cs-chalk       { background: #FFFFFF; }
.cs-grass-light { background: #7CD3A0; }
.cs-ribbon      { background: linear-gradient(180deg, #FFFFFF, var(--floodlight)); }
.cs-sky         { background: #6FC3F0; }
.cs-flame       { background: #F2704B; }

@keyframes cs-fall {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  6%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--spin)); }
}

/* --- fireworks ----------------------------------------------------------- */
.cs-shell { position: absolute; display: block; width: 0; height: 0; }
.cs-flash {
  position: absolute; left: -26px; top: -26px;
  display: block; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.35) 45%, transparent 70%);
  opacity: 0;
  animation: cs-flash 620ms ease-out var(--delay) 1 both;
}
.cs-spark {
  position: absolute; left: 0; top: 0;
  display: block; width: 7px; height: 7px; border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  animation: cs-spark var(--dur) cubic-bezier(0.12, 0.72, 0.3, 1) var(--delay) 1 both;
}
/* The shell carries the colour so one declaration paints all of its sparks. */
.cs-fw-gold        .cs-spark { background: var(--floodlight); box-shadow: 0 0 12px 2px rgba(242, 183, 5, 0.85); }
.cs-fw-sky         .cs-spark { background: #6FC3F0; box-shadow: 0 0 12px 2px rgba(111, 195, 240, 0.85); }
.cs-fw-flame       .cs-spark { background: #F2704B; box-shadow: 0 0 12px 2px rgba(242, 112, 75, 0.85); }
.cs-fw-chalk       .cs-spark { background: #FFFFFF; box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.85); }
.cs-fw-grass-light .cs-spark { background: #7CD3A0; box-shadow: 0 0 12px 2px rgba(124, 211, 160, 0.85); }

@keyframes cs-flash {
  0%   { opacity: 0; transform: scale(0.2); }
  25%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes cs-spark {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  8%   { opacity: 1; }
  70%  { opacity: 1; transform: translate3d(var(--dx), var(--dy), 0) scale(1); }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), calc(var(--dy) + var(--drop)), 0) scale(0.35);
  }
}

/* Reduced motion: the static trim and the held champion state are the whole
   celebration. No overlay is built in the first place — this is the
   belt-and-braces, in case one is ever on screen when the setting changes. */
@media (prefers-reduced-motion: reduce) {
  .cup-champion-burst { display: none; }
  .cup-champion-burst .piece { animation: none; opacity: 0; }
  .champion-show { display: none; }
  .champion-show .cs-fall-piece,
  .champion-show .cs-spark,
  .champion-show .cs-flash { animation: none; opacity: 0; }
  .cup-champion.is-celebrating,
  .cup-champion.is-celebrating .cup-champion-text { animation: none; }
  .cup-champion.is-celebrating::after { content: none; }
}

/* --- automatic fixture seeding: the post-draw question and review ------- */
.scoring-auto { margin-top: 12px; }

.seed-prompt-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px;
}

.seed-rows {
  display: flex; flex-direction: column; gap: 8px;
  margin: 14px 0 4px;
}
.seed-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 1fr auto 1fr auto;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper);
}
.seed-row-edited { border-color: var(--floodlight); background: var(--picked-soft); }
.seed-row-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.seed-row-team:last-of-type { flex-direction: row-reverse; }
.seed-row-name {
  font-weight: 600; font-size: 15px; line-height: 1.3;
  overflow-wrap: anywhere; min-width: 0;
}
.seed-row-v {
  font-family: var(--cond); text-transform: uppercase; font-size: 13px;
  color: var(--ink-soft); flex: none;
}
.seed-row .seed-pick { flex: none; }
.seed-row-reset { min-width: 62px; text-align: right; }

@media (max-width: 720px) {
  .seed-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "home reset" "v v" "away reset2";
    gap: 6px 10px;
  }
  .seed-row-team:first-of-type { grid-area: home; }
  .seed-row-v { grid-area: v; }
  .seed-row-team:last-of-type { grid-area: away; flex-direction: row; }
  .seed-row-reset { grid-area: reset; align-self: start; }
}

.cup-round-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cup-progress { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.cup-section {
  font-family: var(--cond); font-size: 19px; font-weight: 600;
  margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.cup-ties { display: grid; gap: 10px; }

.tie { padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm); }
.tie-done { background: var(--paper-alt); }
.tie-bye { color: var(--ink-soft); }
.tie-bye p { margin: 0; font-size: 15px; }
.tie-agg { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.tie-through { margin: 6px 0 0; font-size: 14.5px; color: var(--grass-dark); }
/* The final says something different: nobody goes through from it. Given a
   little more weight than an ordinary round's line, but deliberately not
   competing with the banner above it. */
.tie-champions { font-size: 16px; font-weight: 600; }
.tie-champions strong { font-weight: 700; }
.tie-pens { margin-top: 8px; }
.tie-pens-result { margin: 6px 0 0; font-size: 14.5px; font-weight: 600; }
.btn-pens { background: #B4690E; border-color: #B4690E; color: #fff; }
.btn-pens:hover { background: #96580B; border-color: #96580B; }

.cup-fixture {
  display: grid; grid-template-columns: 1fr auto 1fr auto;
  align-items: center; gap: 10px; padding: 4px 0;
}
.cup-fixture + .cup-fixture { border-top: 1px dashed var(--rule); margin-top: 6px; padding-top: 10px; }
.cup-fixture .leg-label {
  grid-column: 1 / -1; font-size: 12.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft);
}
.cup-fixture .team-home { text-align: right; }
.cup-fixture .team-away { text-align: left; }

.cup-next { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.cup-draw-card h2 { margin-bottom: 8px; }

/* On a phone the three-column tie squeezes club names into three-line
   columns. Stack it instead: home, score, away, each on its own line. */
@media (max-width: 560px) {
  .cup-fixture {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "leg   leg"
      "home  home"
      "score clear"
      "away  away";
    gap: 2px 10px; padding: 8px 0;
  }
  .cup-fixture .leg-label { grid-area: leg; }
  .cup-fixture .team-home { grid-area: home; text-align: left; font-weight: 600; }
  .cup-fixture .score-pair { grid-area: score; justify-self: start; margin: 4px 0; }
  .cup-fixture .team-away { grid-area: away; text-align: left; font-weight: 600; }
  .cup-fixture .btn-clear { grid-area: clear; justify-self: end; align-self: center; }
  .cup-head h1 { font-size: 28px; }
}

/* Cup ratings sit inside the entrant row, using the league's own seed buttons. */
/* The rating buttons sit BESIDE the label, never inside it: a button inside a
   <label> toggles the checkbox, which would untick the club being rated. */
.opt-cup { justify-content: space-between; gap: 10px; }
.opt-cup .opt-label { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; cursor: pointer; }
.opt-cup .seed-pick { margin-left: auto; flex: 0 0 auto; }
.seed-counts { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.cup-scoring { margin-bottom: 20px; }
.cup-roll-all { margin-top: 16px; }
/* The same bar the league puts under its fixtures, sat inside the cup's panel:
   rounded and inset rather than a full-width strip with a rule under it. */
.cup-autobar {
  margin-top: 16px; border-bottom: 0; border-radius: var(--r-sm);
  padding: 10px 14px;
}
.cup-fixture .score-pair-dice { display: inline-flex; align-items: center; gap: 8px; }

/* =========================================================================
   Promotion play-offs and the season end
   ====================================================================== */

/* The one control on the setup screen that is a choice rather than a number. */
.rule-choice { display: flex; flex-direction: column; gap: 5px; }
.rule-choice > span { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.rule-note { font-size: 13px; color: var(--ink-soft); }

/* What a finished division offers next, under the fixture counts. */
.season-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px;
}
.season-bar-label {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 13.5px; color: var(--floodlight);
}

/* ------------------------------------------- the shared play-off stage ---
 *
 * Every division that has a play-off appears on one page, one section each, in
 * league order. Only one is live at a time; the ones above it are finished and
 * folded away, the ones below are waiting. The three states have to be
 * distinguishable at a glance without reading a word, so each gets its own left
 * edge: orange for the one being played, green for settled, grey for waiting.
 */
.playoff-stage { display: grid; gap: 16px; }

.playoff-section { border-left: 4px solid var(--rule); }
.playoff-section.is-live    { border-left-color: var(--playoff); }
.playoff-section.is-done    { border-left-color: var(--zone-promotion-text); }
.playoff-section.is-waiting { opacity: 0.72; }

.playoff-head { margin-bottom: 12px; }
.playoff-head h2 {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(18px, 2.4vw, 23px); margin: 0 0 4px;
}
.playoff-head .explain { margin: 0; }

.playoff-wait {
  font-style: italic; color: var(--ink-soft); margin: 0;
}

/* A settled division folds to a single line: who went up, and nothing else
   until it is opened. The summary marker stays, so it is obviously openable. */
.playoff-section.is-done > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  cursor: pointer; list-style: revert;
}
.playoff-done-name {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(16px, 2.1vw, 20px);
}
.playoff-done-winner { font-size: 15px; color: var(--ink-soft); }
.playoff-done-winner strong { color: var(--zone-promotion-text); }
.playoff-section.is-done[open] > summary { margin-bottom: 14px; }

.playoff-final-table { margin-top: 14px; }
.playoff-final-table .setting-head { margin: 0 0 8px; }

@media (max-width: 640px) {
  .playoff-section { border-left-width: 3px; }
  .playoff-section.is-done > summary { gap: 4px; }
  .playoff-done-winner { flex-basis: 100%; }
}

/* The play-off qualifiers, in the order they finished. */
.playoff-seeds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.playoff-seeds li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--ink);
}
.playoff-pos {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px; border-radius: 4px;
  background: var(--paper-alt); color: var(--ink-soft);
  font-size: 13px; font-weight: 600;
}

/* Promotion, not a championship: the same banner, one word different. The
   trophy is replaced by a rising chevron and the verdict is spoken aloud. */
.cup-trophy-promoted { width: clamp(28px, 4.2vw, 40px); }
.cup-champion-verdict {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.13em;
  font-size: clamp(15px, 1.8vw, 21px); font-weight: 600;
  color: var(--floodlight);
  margin-top: 2px;
}

.season-next { text-align: center; }
.season-next .cup-note { margin-bottom: 14px; }

/* --- the summary ------------------------------------------------------- */

.season-end .page-head p { max-width: 72ch; }
.season-block { padding-top: 20px; }
.season-head {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 22px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--rule);
}
.season-head-up        { color: var(--zone-promotion-text); border-bottom-color: #BFE3CD; }
.season-head-down      { color: var(--zone-relegation-text); border-bottom-color: #F0C8C3; }
.season-head-champions { color: var(--zone-playoff-text); border-bottom-color: #F3DCA8; }
.season-head-table     { color: var(--ink-soft); }

/* --- one division's section of the single scrolling page ---------------- */

/* Enough space above each division that a new one is obviously a new one,
   with a rule across the page to close the one before it. The page itself is
   the only thing that scrolls: nothing here has its own scrollbar. */
.season-division { margin-bottom: 14px; padding-top: 8px; }
.season-division + .season-division {
  margin-top: 26px; padding-top: 30px; border-top: 2px solid var(--rule-dark);
}
.season-division-head { margin-bottom: 16px; }
.season-division-head h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--chalk);
}
.season-division-meta { margin: 4px 0 0; color: var(--chalk-soft); font-size: 14.5px; }

.season-via-champion { background: #FBEBC4; color: var(--zone-playoff-text); }
.season-row-champion .season-name { font-size: 17px; }

.season-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.season-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-sm); background: var(--paper-alt);
}
.season-pos {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; border-radius: 4px; background: #fff; color: var(--ink-soft);
  font-size: 13px; font-weight: 600;
}
.season-name { font-weight: 600; color: var(--ink); overflow-wrap: break-word; }
.season-via {
  font-size: 13px; font-weight: 600; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
}
.season-via-automatic { background: #DCF0E4; color: var(--zone-promotion-text); }
.season-via-playoff   { background: #FBEBC4; color: var(--zone-playoff-text); }
.season-via-relegated { background: #F7DDD9; color: var(--zone-relegation-text); }

@media (max-width: 560px) {
  .season-row { grid-template-columns: 30px minmax(0, 1fr); }
  .season-via { grid-column: 2; justify-self: start; }
}

/* =========================================================================
   The website shell: the One-Off Season area and the placeholder sections
   ====================================================================== */

/* A card that takes you somewhere. Paper, like every other readable surface in
   DiceFooty, so the pitch shows around it rather than through it. */
.choice-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 8px;
}
.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; width: 100%;
  background: var(--paper); color: var(--ink);
  border: 1px solid transparent; border-radius: var(--r-lg);
  padding: 20px 22px; cursor: pointer;
  font-family: var(--sans);
  /* comfortably past the 44px touch target at every width */
  min-height: 96px;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.choice:hover {
  transform: translateY(-2px);
  border-color: var(--grass);
  box-shadow: 0 10px 26px rgba(4, 20, 12, 0.32);
}
.choice-name {
  font-family: var(--cond); font-size: 24px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05;
}
.choice-note { font-size: 14px; color: var(--ink-soft); line-height: 1.45; }

/* The one prominent route: a full-width card, turf green rather than paper. */
.choice-lead {
  background: var(--grass); color: #fff;
  padding: 28px 30px; min-height: 0;
}
.choice-lead:hover { background: var(--grass-dark); border-color: var(--floodlight); }
.choice-lead .choice-name { font-size: clamp(28px, 4vw, 40px); }
.choice-lead .choice-note { color: rgba(255, 255, 255, 0.88); max-width: 62ch; font-size: 15.5px; }
.choice-lead .choice-go {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 14px; color: var(--floodlight); margin-top: 6px;
}

/* A block of the shell: a heading on the green, then its cards. */
.shell-block { margin-bottom: 34px; }
.shell-block-head { margin-bottom: 14px; }
.shell-block-head h2 {
  font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--chalk);
}
.shell-block-head p { margin: 4px 0 0; color: var(--chalk-soft); font-size: 15px; max-width: 64ch; }

/* Continue playing — the saved games, kept exactly where the player can find
   them while the full My Games section is still to come. */
.resume-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.resume-card { border-left: 4px solid var(--floodlight); }
.resume-kind {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 12.5px; color: var(--zone-playoff-text);
}
.shell-empty {
  color: var(--chalk-soft); font-size: 15px;
  border: 1px dashed var(--rule-dark); border-radius: var(--r-lg);
  padding: 18px 20px;
}

/* A section that is in the navigation but not yet in the product. */
.soon { padding: 60px 0 40px; max-width: 62ch; }
.soon h1 {
  font-size: clamp(32px, 5vw, 52px);
  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 10px;
}
.soon-badge {
  display: inline-block;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 13px; font-weight: 600;
  background: var(--floodlight); color: var(--ink);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.soon p { color: var(--chalk-soft); font-size: 17px; }
.soon .btn { margin-top: 12px; }

@media (max-width: 560px) {
  .choice { padding: 18px; min-height: 84px; }
  .choice-lead { padding: 22px; }
}

/* ===================================================================== */
/* Combined Season                                                       */
/* ===================================================================== */

/* The controller screen. Deliberately quiet: it is a signpost between two
   competition screens that already have plenty going on, so it carries one
   strong statement — what you are playing now — and gets out of the way. */

.season-head { align-items: flex-start; }

.season-now { padding: 0; overflow: hidden; }
.season-now-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-bottom: 1px solid var(--rule);
}
.season-slot { padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; }
.season-slot + .season-slot { border-left: 1px solid var(--rule); }
.season-slot-current { background: var(--picked); }
.season-slot-head {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 12px; color: var(--ink-soft);
}
.season-slot-name { font-family: var(--cond); font-size: 24px; line-height: 1.15; }
.season-slot-note { font-size: 13.5px; color: var(--ink-soft); }
.season-now .hero-cta { padding: 18px 20px 4px; }
.season-progress {
  margin: 0; padding: 0 20px 18px; font-size: 13px; color: var(--ink-soft);
}

.season-done-panel .season-honours { margin-top: 4px; }

.season-honours { list-style: none; margin: 0 0 18px; padding: 0; }
.season-honours li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px;
}
.season-honours li:last-child { border-bottom: 0; }
.season-honours b { font-family: var(--cond); font-size: 19px; }

.season-cuprow {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.season-cupcard {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.season-cupcard-name { font-family: var(--cond); font-size: 18px; }
.season-cupcard-note { font-size: 13px; color: var(--ink-soft); }

/* These buttons sit straight on the pitch rather than on a panel, so the
   on-paper style would be dark ink on dark grass. They carry their own paper. */
.season-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.season-jump .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.season-jump .btn:hover { background: #fff; border-color: #fff; }

.season-calendar summary { cursor: pointer; }
.season-events {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.season-event {
  display: flex; gap: 10px; align-items: baseline; padding: 7px 10px;
  border: 1px solid var(--rule); border-radius: 8px; font-size: 13.5px;
}
.season-event-kind {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 11.5px; color: var(--ink-soft); white-space: nowrap;
}
.season-event-name { font-weight: 600; }
.season-event-done { opacity: 0.55; }
.season-event-now { border-color: var(--floodlight); background: var(--picked); }

/* The strip that appears at the top of a league round or a cup round to say
   where that round sits in the season. One component, both screens. */
.season-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px;
}
.season-strip-label {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12px; color: var(--ink-soft);
}
.season-strip-note { font-size: 13.5px; color: var(--ink-soft); margin-right: auto; }
.season-strip-ready { border-color: var(--floodlight); background: #FFF8E3; }
.season-strip-waiting { border-style: dashed; }
.season-strip-done { border-color: var(--grass); }

/* The cup tick-boxes on the setup screen. */
.cupchoice-list { display: grid; gap: 10px; margin: 10px 0 12px; }
.cupchoice-item {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start;
  border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; background: #fff;
}
.cupchoice-item.is-on { border-color: var(--grass); background: #F4FBF6; }
.cupchoice-item input { grid-row: span 3; width: 22px; height: 22px; margin-top: 4px; }
.cupchoice-name { font-family: var(--cond); font-size: 21px; }
.cupchoice-item input:disabled { cursor: not-allowed; }
.cupchoice-item:has(input:disabled) { cursor: default; opacity: 0.75; }

/* ------------------------------------------------------- the play method --- */

/* Always on screen, never in the way. It sits directly above the fixtures it
   governs, on both the league list and a cup round, and looks the same in both
   because it IS the same control. */
.playmethod {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 12px; padding: 9px 12px;
  background: var(--paper-alt); border: 1px solid var(--rule); border-radius: 10px;
}
.playmethod-label {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12px; color: var(--ink-soft);
}
.playmethod-hint { font-size: 12.5px; color: var(--ink-soft); flex: 1 1 220px; }
.cup .playmethod { margin-top: 4px; }

@media (max-width: 640px) {
  .season-now-grid { grid-template-columns: 1fr; }
  .season-slot + .season-slot { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ------------------------------------------------ the unreadable save --- */

/* The one screen nobody wants to see, so it is written to be read: a single
   calm panel, the explanation before the buttons, and the destructive choice
   last and visibly different from the other two. */
.recovery { padding-top: 28px; }
.recovery-panel { max-width: 640px; margin: 0 auto; padding: 22px 22px 20px; }
.recovery-flag {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 12px; color: var(--grass-dark); margin: 0 0 6px;
}
.recovery-panel h1 { font-size: clamp(22px, 4.6vw, 30px); line-height: 1.15; margin: 0 0 14px; }
.recovery-detail { margin: 0 0 12px; color: var(--ink); }
.recovery-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 18px 0 12px;
}
.recovery-actions .btn { flex: 0 1 auto; min-height: 44px; }
.recovery-small { font-size: 13px; color: var(--ink-soft); margin: 0; }

@media (max-width: 520px) {
  .recovery-actions { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------- cup entry step --- */

/* One club, its division, and where it comes into each cup. Stacked rather
   than tabulated: a table of four cups against ninety clubs is unreadable on a
   phone, and this is the same information in the order it is actually read. */
.cupentry { display: block; }
.entry-tools { margin: 10px 0 8px; }
.entry-search, .entry-cand-search {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 15px;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper);
  color: var(--ink);
}
.entry-list, .entry-candidates {
  max-height: 420px; overflow-y: auto;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper);
}
.entry-club { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.entry-club:last-child { border-bottom: 0; }
.entry-club-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px;
}
.entry-division {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 12px; color: var(--ink-soft);
}
.entry-cup {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 5px 0;
}
.entry-cup-name { font-size: 13.5px; color: var(--ink-soft); flex: 0 0 auto; }
.entry-cup-stage { font-size: 14px; font-weight: 600; flex: 1 1 120px; }
.entry-cup-stage.is-out { font-weight: 400; color: var(--ink-soft); font-style: italic; }
.entry-cup .btn { min-height: 34px; }

.entry-made {
  margin: 10px 0; padding: 10px 12px;
  background: var(--picked-soft); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.entry-made-head { margin: 0 0 8px; font-size: 14px; }
.entry-made-row {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start;
  padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px;
}
.entry-made-row > div { flex: 1 1 260px; }
.entry-made-note { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

.entry-picker {
  margin-top: 10px; padding: 14px 14px 16px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
}
.entry-picker-head {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline;
  justify-content: space-between; margin-bottom: 6px;
}
.entry-picker-head h3 { margin: 0; font-size: clamp(17px, 3.2vw, 21px); }
.entry-stages { margin-bottom: 10px; }
.entry-candidate {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px; min-height: 44px;
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  font: inherit; font-size: 14.5px; text-align: left; color: var(--ink); cursor: pointer;
}
.entry-candidate:last-child { border-bottom: 0; }
.entry-candidate:hover { background: var(--paper-alt); }
.entry-tag {
  flex: 0 0 auto; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 11.5px; color: var(--danger);
}
.entry-tag.is-mine { color: var(--ink-soft); }

.entry-confirm { margin: 10px 0 0; }
.entry-confirm > div {
  display: flex; flex-wrap: wrap; gap: 2px 12px;
  padding: 7px 0; border-top: 1px solid var(--rule);
}
.entry-confirm dt {
  flex: 0 0 150px; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 12px; color: var(--ink-soft);
}
.entry-confirm dd { flex: 1 1 200px; margin: 0; font-size: 14.5px; }
.entry-picker-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.entry-picker-actions .btn { min-height: 44px; }

@media (max-width: 520px) {
  .entry-confirm dt { flex-basis: 100%; }
  .entry-picker-actions { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------- invited clubs picker --- */

.invitepanel { display: block; }
.invite-selected { margin: 8px 0 4px; font-size: 14.5px; }
.invite-head {
  margin: 12px 0 8px; padding: 9px 12px;
  background: var(--picked-soft); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.invite-head strong { display: block; font-size: 15px; margin-bottom: 2px; }

.invite-country { margin: 0 0 12px; }
.invite-country-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 10px; margin-bottom: 6px;
}
.invite-count {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 12px; color: var(--ink-soft);
}
.invite-count.is-full { color: var(--grass-dark); font-weight: 600; }
.invite-search {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 15px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
}
.invite-list {
  margin-top: 6px; max-height: 230px; overflow-y: auto;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper);
}
.invite-option {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 12px; min-height: 44px;
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  font: inherit; font-size: 14.5px; text-align: left; color: var(--ink); cursor: pointer;
}
.invite-option:last-child { border-bottom: 0; }
.invite-option:hover:not([disabled]) { background: var(--paper-alt); }
.invite-option.is-on { background: var(--picked); font-weight: 600; }
.invite-option[disabled] { opacity: 0.4; cursor: not-allowed; }
.invite-league { font-size: 12.5px; color: var(--ink-soft); flex: 0 0 auto; }

/* ------------------------------------------------------- Super Seeds --- */

/* Purple: one step above green. Colour is never the only signal — the swatch
   carries a P, exactly as green/amber/red carry S/N/W. */
:root { --super: #6B3FA0; --super-soft: rgba(107, 63, 160, 0.14); }

.seed-purple { background: var(--super); color: #fff; }

.superpanel { display: block; }
.super-question { margin: 10px 0 6px; font-size: 15px; }
.super-count { margin: 12px 0 4px; }
.super-head {
  margin: 12px 0 8px; padding: 9px 12px;
  background: var(--super-soft); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.super-head strong { display: block; font-size: 15px; margin-bottom: 2px; }
.super-chosen { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.super-pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--super); color: #fff; font-size: 13px; font-weight: 600;
}
.invite-option.is-super { background: var(--super-soft); }
.invite-option.is-super .invite-league { color: var(--super); font-weight: 600; }

/* --------------------------------------------------------- quick setup --- */

.quicksetup { display: block; }
.quick-rows {
  margin: 12px 0 10px;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper);
}
.quick-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 10px 12px; border-bottom: 1px solid var(--rule);
}
.quick-row:last-child { border-bottom: 0; }
/* The row is named with the division's own generic name; the real-life
   division it draws from is said beside it, as information rather than a
   label. */
.quick-name { flex: 1 1 160px; font-weight: 600; font-size: 16px; }
.quick-real {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 12px; color: var(--ink-soft); flex: 0 1 auto;
}
.quick-size { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.quick-step {
  width: 44px; height: 44px; font-size: 20px; line-height: 1;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); cursor: pointer;
}
.quick-step:hover:not([disabled]) { background: var(--paper-alt); }
.quick-step[disabled] { opacity: 0.35; cursor: not-allowed; }
.quick-count { min-width: 2.5ch; text-align: center; font-size: 17px; font-weight: 600; }
.quick-total { margin: 0 0 8px; font-size: 14.5px; }
.quick-total.is-over { color: var(--danger); font-weight: 600; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.quick-actions .btn { min-height: 44px; }
.quick-actions .seeding-hint { flex: 1 1 240px; }

@media (max-width: 520px) {
  .quick-name { flex-basis: 100%; }
  .quick-real { flex-basis: 100%; }
  .quick-size { margin-left: auto; }
}

/* ======================================================================
   The season week — one scrolling page
   ----------------------------------------------------------------------
   A week of a Combined Season, whole: every division of a matchday and
   every cup round the calendar put in it, stacked down one page instead of
   hidden behind division tabs. The parts inside a section are the ones the
   play screen and the cup screen already use, so almost everything here is
   layout: how the sections sit, and how they fold on a phone.
   ====================================================================== */

.week-title { font-size: clamp(26px, 4.2vw, 40px); line-height: 1.08; }
.week-head { align-items: flex-start; }

/* --- browsing the season, week by week --- */
.week-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: 8px 10px; margin-bottom: 14px;
}
.week-nav .week-arrow { min-height: 44px; }
.week-nav .week-arrow[disabled] { opacity: 0.4; cursor: not-allowed; }
.week-jump {
  flex: 1 1 200px; min-width: 0; min-height: 44px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 8px 10px;
}
.week-sections + .week-nav { margin: 16px 0 0; }
/* The forward control is the page's main action, so it takes the site's
   yellow and sits at the end of the row at both ends of the page. */
.week-forward { margin-left: auto; font-weight: 600; }
.week-nav .week-forward[disabled] { opacity: 1; }

/* --- the whole-week summary --- */
.week-summary { margin-bottom: 18px; }
.week-summary-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.week-summary-head h2 { font-size: 22px; margin: 0; }
.week-tag {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rule);
  color: var(--ink-soft); white-space: nowrap;
}
.week-tag-now { border-color: var(--floodlight); background: #FFF8E3; color: var(--ink); }
.week-tag-past { border-color: var(--grass); color: var(--zone-promotion-text); }
.week-tag-locked { border-style: dashed; }

.week-counts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 12px; }
.week-count { font-size: 15px; color: var(--ink-soft); }
.week-count b { font-size: 22px; font-family: var(--cond); color: var(--ink); margin-right: 4px; }
.week-count-open b { color: var(--playoff); }

.week-chips { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.week-chip-row {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  border-top: 1px solid var(--rule); padding-top: 6px; font-size: 14.5px;
}
.week-chip-row:first-child { border-top: 0; padding-top: 0; }
.week-chip {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--rule); color: var(--ink-soft);
}
.week-chip-done { border-color: var(--grass); background: #F4FBF6; color: var(--zone-promotion-text); }
.week-chip-open { border-color: var(--playoff); background: #FFF4E8; color: var(--zone-playoff-text); }

.week-blockers { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; }
.week-blockers li { font-size: 14.5px; color: var(--ink); }
.week-blocker-where {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 12px; color: var(--ink-soft); margin-right: 6px;
}

.week-action { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.week-action .btn { min-height: 48px; }
.week-action .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.week-action-note { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-soft); }
.week-action-blocked { margin: 0; flex: 1 1 220px; }

/* --- one section: a division, or a cup round --- */
.week-sections { display: grid; gap: 22px; }
.week-section {
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg); padding: 14px 16px 16px;
}
.week-section-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--rule);
}
.week-section-head h2 { font-family: var(--cond); font-size: 26px; margin: 0; line-height: 1.1; }
.week-section-head [data-part="section-status"] { margin-left: auto; }

/* Fixtures on the left, that division's table on the right — the scorebook's
   own proportions, so a section reads exactly like the screen it replaces. */
.week-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 18px; align-items: start;
}
.week-col-fixtures { min-width: 0; }
.week-col-table { min-width: 0; container-type: inline-size; }
.week-col-table table.league { font-size: 14.5px; }
.week-col-table table.league thead th,
.week-col-table table.league tbody td { padding-left: 5px; padding-right: 5px; }
.week-col-table table.league thead th.col-pos,
.week-col-table table.league tbody td.col-pos { padding-left: 12px; }
.week-col-table table.league thead th.col-pts,
.week-col-table table.league tbody td.col-pts { padding-right: 12px; }
.week-table-note {
  margin: 0 0 8px; font-size: 13px; color: var(--ink-soft);
  border-left: 3px solid var(--floodlight); padding-left: 9px;
}
/* inside a section the fixture list already sits on paper */
.week-col-fixtures .fixtures { background: transparent; border-radius: 0; padding-top: 0; }
.week-col-fixtures .autobar { border-radius: var(--r-sm); }
.week-section .cup-ties { margin-top: 12px; }
.week-section .panel { padding: 0; background: transparent; margin-bottom: 0; }
.week-section .panel + .panel { margin-top: 14px; }

/* A week the calendar has not reached: everything is shown, nothing can be
   pressed. The dashes are deliberate — there is no score yet, and an empty box
   would invite one to be typed. */
.fixtures-locked { opacity: 0.85; }
.fixture-locked { cursor: default; }
.score-pair-locked {
  font-family: var(--cond); font-size: 20px; letter-spacing: 0.02em;
  min-width: 52px; text-align: center; color: var(--ink);
}
.cup-fixture-locked { align-items: center; }
.tie-locked { opacity: 0.95; }

/* The season calendar's rows became buttons when weeks arrived. */
.season-event { padding: 0; }
.season-event-open {
  display: flex; gap: 10px; align-items: baseline; width: 100%;
  padding: 7px 10px; background: none; border: 0; border-radius: 8px;
  font: inherit; font-size: 13.5px; color: inherit; text-align: left; cursor: pointer;
  min-height: 44px;
}
.season-event-open:hover { background: var(--picked-soft); }

@media (max-width: 900px) {
  /* Each section folds on its own: fixtures first, then that division's table,
     then the next division. Nothing scrolls sideways. */
  .week-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 560px) {
  .week-forward { margin-left: 0; width: 100%; order: 2; }
  .week-nav [data-act="week-prev"] { order: 1; }
  .week-section { padding: 12px 12px 14px; }
  .week-section-head h2 { font-size: 22px; }
  .week-section-head [data-part="section-status"] { margin-left: 0; }
  .week-nav { padding: 8px; }
  .week-nav .week-arrow { flex: 1 1 auto; }
  .week-jump { flex-basis: 100%; order: -1; }
  .week-action .btn { width: 100%; }
  .week-counts { gap: 4px 16px; }
}

/* The one play-method switch for a whole league week: it sets the league's
   setting, so it belongs to the week rather than to any one division. */
.week-playmethod {
  background: var(--paper); border-radius: var(--r-lg);
  padding: 4px 14px; margin-bottom: 18px;
}
.week-playmethod .playmethod { border: 0; margin: 0; background: transparent; }

/* Inside a week the section heading already names the cup and the round, so the
   round's own heading steps back to a sub-heading rather than repeating it at
   full size. */
.week-section .cup-round-head h2,
.week-section .cup-draw-card h2,
.week-section .cup-draw-card h3 { font-size: 18px; }

/* ======================================================================
   Setup: what you have chosen, and how to unchoose it
   ----------------------------------------------------------------------
   One list, used by the six Scottish invitations and by purple Super Seeds
   in a division and in a cup. It sits above the search box and is never
   filtered by it, so a club chosen by mistake can always be reached —
   including when the picker below it is at its limit and greyed out.
   ====================================================================== */

.chosen-list {
  list-style: none; margin: 8px 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chosen-item {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--grass); border-radius: 999px;
  background: #F4FBF6; padding: 4px 4px 4px 12px;
  font-size: 14.5px; max-width: 100%;
  /* Set explicitly: this list appears both inside a paper panel (the season
     setup) and straight onto the pitch (the standalone cup setup), and the
     pill is light in either case, so it must carry its own ink. */
  color: var(--ink);
}
.chosen-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.chosen-remove {
  flex: 0 0 auto; min-height: 32px; padding: 0 12px;
  font: inherit; font-size: 12px; font-family: var(--cond);
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
}
.chosen-remove:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* Outside the pill there is no background of its own, so this one follows
   whatever it is sitting on rather than naming a colour. */
.chosen-empty { margin: 8px 0 10px; font-size: 14px; color: inherit; opacity: 0.72; }

@media (max-width: 520px) {
  /* A full-width row per choice on a phone, so the Remove button is always a
     comfortable target rather than a sliver at the end of a wrapped pill. */
  .chosen-list { display: grid; gap: 6px; }
  .chosen-item { justify-content: space-between; border-radius: var(--r-sm); padding: 6px 6px 6px 12px; }
  .chosen-remove { min-height: 44px; }
}

/* ======================================================================
   Setup, as numbered steps
   ----------------------------------------------------------------------
   The screen is still one page and one draft — the numbering and the Back
   control are wayfinding, not a wizard. Nothing is committed or discarded
   at a step boundary, which is why moving between them cannot reset a
   choice.
   ====================================================================== */

.setup-step { padding: 0 0 6px; }
.setup-step + .setup-step {
  margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--rule);
}
.setup-step-head {
  display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.setup-step-title { min-width: 0; }
.setup-step-no {
  display: block;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12px; color: var(--ink-soft);
}
.setup-step-head h2 {
  font-family: var(--cond); font-size: 26px; line-height: 1.1; margin: 2px 0 0;
}
.setup-step-head h2:focus-visible { outline: 2px solid var(--floodlight); outline-offset: 3px; }
.setup-back { margin-left: auto; min-height: 44px; }

@media (max-width: 560px) {
  .setup-step-head h2 { font-size: 22px; }
  .setup-back { margin-left: 0; width: 100%; }
}

/* ======================================================================
   Build 1_48 — automation, byes and the week controls
   ====================================================================== */

/* The site's yellow, for the action a player reaches for most. Dark ink on
   floodlight amber; a genuinely disabled one stays visibly disabled rather
   than merely dimmer. */
.btn-auto {
  background: var(--floodlight); color: var(--ink);
  border: 1px solid #C79400; font-weight: 600;
}
.btn-auto:hover:not([disabled]) { background: #FFC71F; border-color: #A87D00; }
.btn-auto:active:not([disabled]) { background: #E0A800; }
.btn-auto:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-auto[disabled] {
  background: var(--paper-alt); color: var(--ink-soft);
  border-color: var(--rule); opacity: 1; cursor: not-allowed;
}

/* Two copies of the automate control, one at each end of the fixture list. */
.fixtures + .autobar, .cup-ties + .autobar { margin-top: 10px; }
.autobar[data-end="bottom"] { margin-bottom: 0; }

/* Every bye in a round, on one line. Wraps freely; never truncated. */
.cup-bye-line {
  margin: 0 0 12px; padding: 9px 12px;
  background: var(--paper-alt); border-radius: var(--r-sm);
  font-size: 14.5px; line-height: 1.55; color: var(--ink);
  overflow-wrap: break-word;
}
.cup-bye-line strong { white-space: nowrap; }
.cup-bye-line-panel { margin-bottom: 14px; }

/* ------------------------------------------- the guided season setup --- */
/* One question on screen at a time. Everything here is sized for a thumb
   first: every control in the journey is at least 44px in both directions,
   the question is the largest thing on the step, and nothing is hidden
   behind a hover. Text scales with the user's own font size and the page
   never disables zoom. */

.wiz { padding-top: 14px; }
.wiz-head p { max-width: 54ch; }

.wiz-progress { margin: 0 0 16px; }
.wiz-dots {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.wiz-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 13px; color: var(--ink-soft);
}
.wiz-dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rule); flex: 0 0 auto;
}
.wiz-dot.is-done { color: var(--grass-dark); }
.wiz-dot.is-done::before { background: var(--grass); }
.wiz-dot.is-now { color: var(--ink); font-weight: 700; }
.wiz-dot.is-now::before { background: var(--floodlight); box-shadow: 0 0 0 3px rgba(242,183,5,0.25); }
.wiz-dot + .wiz-dot { margin-left: 4px; }

.wiz-count { margin: 0 0 6px; font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.wiz-bar { height: 6px; border-radius: 3px; background: var(--paper-alt); overflow: hidden; }
.wiz-bar > span { display: block; height: 100%; background: var(--grass); transition: width 160ms ease; }

.wiz-step { padding: 4px 0 2px; }
.wiz-question {
  font-family: var(--cond); font-size: 26px; line-height: 1.15;
  margin: 0 0 14px; color: var(--ink);
}
.wiz-question:focus-visible { outline: 2px solid var(--floodlight); outline-offset: 4px; }
@media (min-width: 720px) { .wiz-question { font-size: 32px; } }

.wiz-body { margin-bottom: 4px; }
.wiz-hint { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.wiz-note { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.wiz-field { max-width: 460px; }
.wiz-field input { min-height: 48px; font-size: 17px; }

.wiz-choice { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .wiz-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wiz-choice-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 520px) { .wiz-choice-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.wiz-big {
  min-height: 60px; min-width: 44px; padding: 14px 18px;
  font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.25;
  color: var(--ink); background: var(--paper); cursor: pointer;
  border: 2px solid var(--rule); border-radius: var(--r-lg);
  transition: border-color 120ms ease, background 120ms ease;
}
.wiz-big:hover { border-color: var(--grass); }
.wiz-big:focus-visible { outline: 2px solid var(--floodlight); outline-offset: 3px; }
.wiz-big.is-on { border-color: var(--grass); background: rgba(31,138,76,0.10); }
.wiz-big.is-on::after { content: ' ✓'; color: var(--grass-dark); font-weight: 700; }
.wiz-big-number { font-family: var(--cond); font-size: 30px; }
.wiz-big-number.is-on::after { content: ''; }

.wiz-list {
  margin: 0 0 14px; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.wiz-list li {
  background: var(--paper-alt); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 8px 12px; font-size: 15px; color: var(--ink);
}
.wiz-name-card { padding: 0; border: 0; background: transparent; }
.wiz-name-card + .wiz-name-card { margin-top: 12px; }
.division-name-fixed { margin: 0; font-family: var(--cond); font-size: 22px; color: var(--ink); }

.wiz-nav {
  display: flex; gap: 10px; align-items: center;
  margin: 16px 0; flex-wrap: wrap;
}
.wiz-nav .btn { min-height: 48px; }
.wiz-back { flex: 0 0 auto; }
.wiz-next { flex: 1 1 auto; min-width: 160px; }
@media (min-width: 520px) { .wiz-next { flex: 0 0 auto; margin-left: auto; } }

.wiz-problems:empty { display: none; }

.wiz-review { display: grid; gap: 10px; }
.wiz-review-row {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px; background: var(--paper-alt);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.wiz-review-row .btn { min-height: 44px; min-width: 64px; flex: 0 0 auto; }
.wiz-review-label {
  display: block; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 12.5px; color: var(--ink-soft);
}
.wiz-review-value { display: block; font-size: 15.5px; line-height: 1.5; color: var(--ink); overflow-wrap: break-word; }
.wiz-ready { margin: 14px 0 0; font-size: 15.5px; font-weight: 600; color: var(--grass-dark); }

@media (prefers-reduced-motion: reduce) {
  .wiz-bar > span { transition: none; }
}

/* ------------------------------------- readable setup explanations --- */
/* Instructions people actually have to read, at a size that says so. The
   small, faint helper text stays for asides; anything that explains how to
   PLAY is `.explain`: 18px on desktop, 17px on a phone, full-strength ink
   rather than a grey, and never the last thing squeezed under a control. */

.setting-head {
  font-family: var(--cond); font-size: 21px; font-weight: 700;
  margin: 0 0 4px; color: var(--ink); letter-spacing: 0.01em;
}
@media (min-width: 720px) { .setting-head { font-size: 24px; } }
.scoring-sub .setting-head { margin-top: 4px; }

.explain {
  font-size: 17px; line-height: 1.6; color: var(--ink);
  margin: 0 0 10px; max-width: 64ch; overflow-wrap: break-word;
}
@media (min-width: 720px) { .explain { font-size: 18px; } }
.explain strong { font-weight: 700; }
.explain:last-child { margin-bottom: 0; }

.explain-list {
  margin: 0 0 10px; padding-left: 22px; max-width: 64ch;
  font-size: 17px; line-height: 1.6; color: var(--ink);
}
@media (min-width: 720px) { .explain-list { font-size: 18px; } }
.explain-list li { margin: 0 0 4px; }

.explain-box {
  background: var(--paper-alt); border: 1px solid var(--rule);
  border-left: 4px solid var(--grass);
  border-radius: var(--r-sm); padding: 14px 16px; margin: 12px 0 16px;
}
.explain-box > *:last-child { margin-bottom: 0; }

/* ------------------------------------------- the strength legend --- */
/* What S, N and W mean, said in words as well as in colour, where the
   choice is actually made. */

.strength-legend {
  background: var(--paper-alt); border: 1px solid var(--rule);
  border-left: 4px solid var(--grass);
  border-radius: var(--r-sm); padding: 14px 16px; margin: 0 0 16px;
}
.legend-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
@media (min-width: 620px) { .legend-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.legend-row { display: flex; align-items: center; gap: 10px; }
.legend-swatch {
  flex: 0 0 auto; pointer-events: none;
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.legend-text { font-size: 17px; line-height: 1.4; color: var(--ink); }
@media (min-width: 720px) { .legend-text { font-size: 18px; } }

/* ------------------------------ going up and coming down --- */
/* What moves between each pair of neighbouring divisions, said in the
   player's own division names and marked when the two ends disagree. */

.movement { margin: 18px 0 4px; }
.movement-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.movement-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--paper-alt); border: 1px solid var(--rule);
  border-left: 4px solid var(--grass);
}
.movement-row.is-off { border-left-color: var(--danger); background: rgba(179, 55, 43, 0.07); }
.movement-mark {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff; background: var(--grass);
}
.movement-row.is-off .movement-mark { background: var(--danger); }
.movement-text { font-size: 17px; line-height: 1.55; color: var(--ink); }
@media (min-width: 720px) { .movement-text { font-size: 18px; } }
.movement-warn { color: var(--zone-relegation-text); }
.rule-note { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

/* ---------------------------- one card per competition's Super Seeds --- */
/* Three cups' worth of the same controls in a row reads as one block of
   repeated text. Each competition gets a card of its own, with its full
   name at the top in the purple that Super Seeds are, so it is never in
   doubt which cup a Yes, a count or a club belongs to. */

.superpanel {
  border: 1px solid var(--rule); border-top: 4px solid var(--super);
  border-radius: var(--r-lg); background: var(--paper);
  padding: 16px 18px; margin: 0 0 20px;
}
.superpanel + .superpanel { margin-top: 20px; }
.super-title {
  font-family: var(--cond); font-size: 22px; font-weight: 700;
  color: var(--super); margin: 0 0 8px; line-height: 1.15;
  overflow-wrap: break-word;
}
@media (min-width: 720px) { .super-title { font-size: 26px; } }
.super-question { font-size: 17px; margin: 14px 0 8px; color: var(--ink); }
@media (min-width: 720px) { .super-question { font-size: 18px; } }
.superpanel .super-count { margin-top: 16px; }

/* ------------------------------- comfortable targets on the setup --- */
/* The setup screens are where a child taps hardest and most often: the
   strength circles beside every team, the play-method chips, the play-off
   choices. They are sized for a thumb HERE only — the playing screens keep
   the compact controls they have, because nothing in this change is
   licensed to redesign them. */

#setup-root .chip,
#setup-root .chip-sm { min-height: 44px; display: inline-flex; align-items: center; }
#setup-root .rule-input { min-height: 44px; }
#setup-root .seed-btn {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  font-size: 14px;
}
#setup-root .picked li { gap: 4px; }
#setup-root .picked-remove { min-width: 32px; min-height: 32px; }

/* ------------------------------- the secondary paired action --- */
/* "Review seedings" beside "Keep seedings". The green Keep is the ordinary
   answer and is untouched; Review keeps its yellow and its dark text but
   takes about half the room, through padding and width rather than by
   shrinking the words to the point of illegibility. It stays a 44px-high
   target with its own focus, hover and pressed states. */

.btn-second {
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  padding: 5px 8px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
.seed-prompt-actions .btn-second { align-self: center; }

/* The advice under a Yes/No pair is an instruction, not a footnote: it is
   what tells a player which answer they want. */
.wiz-answer-hint { margin-top: 14px; }

/* The cup cards: name, what the competition is, and — where it has them —
   who the invitations go to, all at reading size rather than as a caption. */
.cupchoice-note { font-size: 17px; line-height: 1.55; color: var(--ink); }
@media (min-width: 720px) { .cupchoice-note { font-size: 18px; } }
.cupchoice-detail {
  display: block; margin-top: 6px;
  font-size: 16px; line-height: 1.55; color: var(--ink-soft);
}
@media (min-width: 720px) { .cupchoice-detail { font-size: 17px; } }

/* A setting that is calculated rather than typed: shown as plainly as the
   box it replaces, with the reason for its value beside it. */
.rule-shown { display: flex; flex-direction: column; gap: 4px; }
.rule-value {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; min-height: 44px; padding: 0 12px;
  font-family: var(--cond); font-size: 24px; font-weight: 700; color: var(--ink);
  background: var(--paper-alt); border: 1px solid var(--rule); border-radius: var(--r-sm);
  align-self: flex-start;
}
#setup-root .chip[disabled] {
  opacity: 1; background: var(--paper-alt); color: var(--ink-soft);
  border-color: var(--rule); cursor: not-allowed; text-decoration: line-through;
}

/* ==================================== Automate and Automate Pulse ======= */
/* Two ways to do the same thing, chosen before the button is pressed.
   Automate puts the results straight on the screen; Automate Pulse rolls
   every selected game at once and shows them together at the end. */

.pulse-modes {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
  margin: 10px 0 6px;
}
.pulse-mode {
  flex: 1 1 200px; min-height: 52px; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 13px; border-radius: var(--r-sm); cursor: pointer;
  border: 2px solid var(--rule); background: var(--paper); color: var(--ink);
  font-family: var(--sans);
}
.pulse-mode:hover { border-color: #C79400; }
.pulse-mode:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pulse-mode.is-on { border-color: #C79400; background: rgba(242, 183, 5, 0.18); }
.pulse-mode-name { font-size: 15.5px; font-weight: 700; }
.pulse-mode.is-on .pulse-mode-name::after { content: ' ✓'; }
.pulse-mode-note { font-size: 13.5px; color: var(--ink-soft); }
.pulse-mode.is-on .pulse-mode-note { color: var(--ink); }

.pulse-sound {
  flex: 0 0 auto; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
}
.pulse-sound:hover { border-color: var(--ink-soft); }
.pulse-sound:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pulse-sound[aria-pressed="false"] { color: var(--ink-soft); }

/* The legend, so the red is explained in words and not only by its colour. */
.pulse-legend {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.pulse-legend-die {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  color: #fff; background: var(--danger); border: 2px solid #8E2B21;
}

/* A die DiceFooty is about to roll. The colour marks who rolls it, never how
   strong a team is — the rating badges are untouched. */
.die.is-pulse-pick {
  border-color: #8E2B21; background: rgba(179, 55, 43, 0.14); color: var(--zone-relegation-text);
}
.die.is-pulse-pick .die-face { color: var(--zone-relegation-text); }
.fixture.is-pulse-pick, .cup-fixture.is-pulse-pick { background: rgba(179, 55, 43, 0.05); }

/* In the air: every selected die together, for the same short moment. */
.die.is-pulsing {
  border-color: #8E2B21; background: rgba(179, 55, 43, 0.2); color: var(--zone-relegation-text);
  animation: pulse-shake 220ms linear infinite;
  cursor: progress;
}
.die.is-pulsing[disabled] { opacity: 1; }
@keyframes pulse-shake {
  0%   { transform: rotate(-7deg) translateY(0); }
  25%  { transform: rotate(6deg) translateY(-2px); }
  50%  { transform: rotate(-4deg) translateY(1px); }
  75%  { transform: rotate(8deg) translateY(-1px); }
  100% { transform: rotate(-7deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .die.is-pulsing { animation: none; }
}

/* The season summary, while promotion is still undecided. Said once at the
   top rather than repeated beside every division. */
.season-unfinished { border-left: 4px solid var(--playoff); margin-bottom: 18px; }
.season-unfinished h2 {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(17px, 2.2vw, 21px); margin: 0 0 6px;
}
.season-unfinished .cup-note { margin: 0 0 12px; }

/* The play-off week's own section on the weekly page. */
.week-section-playoff { border-left: 4px solid var(--playoff); }
.week-section-playoff .hero-cta { margin-top: 12px; }

/* ------------------------------------------------- the honours board ---
 *
 * The top of the season summary: who won what, who went up, who went down,
 * who lifted each cup. Read before any table, so it is set in the page's
 * largest comfortable type and given room rather than packed in.
 */
.honours { border-left: 4px solid var(--floodlight); margin-bottom: 22px; }
.honours-head {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.07em;
  font-size: clamp(19px, 2.6vw, 25px); margin: 0 0 4px;
}
.honours-block { margin-top: 18px; }
.honours-block h3 {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 14.5px; color: var(--ink-soft);
  margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--rule);
}
.honours-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.honours-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  font-size: 16px;
}
.honours-row .clinch { margin-left: 0; }
.honours-name { font-weight: 600; font-size: 17px; }
.honours-detail { color: var(--ink-soft); font-size: 14.5px; }
.honours-cup-name {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 15px; color: var(--ink-soft); min-width: 42%;
}

@media (max-width: 640px) {
  .honours-row { gap: 2px 8px; }
  .honours-detail { flex-basis: 100%; }
  .honours-cup-name { min-width: 100%; }
}

/* --------------------------------------- a title or promotion secured ---
 *
 * A league title arrives mid-matchday, in a division the player may not be
 * looking at, so the moment has to say WHAT has happened as well as mark it.
 * The card sits low on the screen rather than over the middle of it: the
 * table that has just produced the news stays readable behind it.
 */
.secured-show {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.secured-card {
  position: relative; pointer-events: auto;
  width: min(560px, 100%);
  background: var(--pitch); color: var(--chalk);
  border: 1px solid rgba(232, 238, 243, 0.22);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 46px rgba(10, 44, 25, 0.42);
  padding: 18px 46px 18px 20px;
  display: grid; gap: 14px;
}
.secured-show.is-moving .secured-card { animation: secured-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes secured-in {
  from { transform: translateY(26px) scale(0.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.secured-close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: transparent; color: var(--chalk-soft);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.secured-close:hover { color: var(--chalk); background: rgba(232, 238, 243, 0.12); }
.secured-line { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: baseline; }
.secured-line .clinch { margin-left: 0; grid-row: span 3; align-self: center; width: 22px; height: 22px; font-size: 13px; }
.secured-name {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: clamp(20px, 3.4vw, 27px); font-weight: 600; line-height: 1.05;
}
.secured-verb {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.13em;
  font-size: clamp(13px, 1.8vw, 16px); color: var(--floodlight);
}
.secured-where { font-size: 13.5px; color: var(--chalk-soft); }

/* The falling pieces ride inside the card's own fixed layer, so they cover the
   window without a second overlay to clean up. */
.secured-fall { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .secured-show.is-moving .secured-card { animation: none; }
}

/* =====================================================================
   Build 1_55 — the standalone cup setup, in the Combined Season's style
   ---------------------------------------------------------------------
   One light panel of numbered sections. Only the page title sits on the
   green; every piece of guidance is on paper, in full-strength ink, at the
   same readable size as the guided season setup (.explain). Nothing here
   changes a rule — only where things sit and how they read.
   ===================================================================== */

.cupsetup-panel { padding: 22px 24px 8px; }
.cupsetup-lead { margin-bottom: 6px; }

.cupsetup-section {
  padding: 20px 0 22px;
  border-top: 1px solid var(--rule);
}
.cupsetup-section:first-of-type { border-top: 0; padding-top: 10px; }
.cupsetup-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--cond); font-size: 24px; line-height: 1.15;
  margin: 0 0 14px; color: var(--ink);
}
@media (min-width: 720px) { .cupsetup-title { font-size: 28px; } }
.cupsetup-no {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grass); color: #fff;
  font-family: var(--cond); font-size: 18px; font-weight: 700;
}
.cupsetup-name { max-width: 460px; }
.cupsetup-name input { min-height: 48px; font-size: 17px; }
.cupsetup .cup-template .explain-box { margin-bottom: 0; }
.cupsetup .cup-note-off { border-left-color: #B4690E; }

.cupsetup-count {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px; margin: 0 0 8px;
}
.cupsetup-count .squad-line { margin: 0; font-size: 17px; }
.cupsetup .picker { margin-top: 12px; }
.cupsetup .picker-tools input[type="search"] { min-height: 44px; font-size: 16px; }
.cupsetup .opt { font-size: 15.5px; min-height: 44px; }
.opt-fixed .opt-label { cursor: default; }
.opt-tag {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--picked); color: var(--ink);
  font-family: var(--cond); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
}

/* The invitation lists and the Super Seed panel sit inside a section now, so
   their own headings are sub-headings and their notes read like the rest. */
.cupsetup-section .invitepanel,
.cupsetup-section .superpanel { margin: 0; }
.invite-head-note { display: block; font-size: 15px; line-height: 1.5; color: var(--ink); }
.invite-country-head strong { font-size: 16.5px; }
.invite-count { font-size: 13px; }
.invite-country { margin-bottom: 18px; }
.invite-country .chosen-empty { color: var(--ink-soft); opacity: 1; }

.cupsetup-foot {
  border-top: 1px solid var(--rule);
  padding: 18px 0 16px;
}
.cupsetup-foot .notice { margin-bottom: 14px; }
.cupsetup-ready { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--grass-dark); }
.cupsetup-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cupsetup-actions .btn { min-height: 48px; }
.cupsetup-create { margin-left: auto; min-width: 180px; }

@media (max-width: 620px) {
  .cupsetup-panel { padding: 16px 15px 4px; }
  .cupsetup-title { font-size: 22px; gap: 10px; }
  .cupsetup-no { width: 30px; height: 30px; font-size: 16px; }
  .cupsetup-create { flex: 1 1 100%; margin-left: 0; order: -1; }
  .cupsetup-actions .btn-onpaper { flex: 1 1 100%; }
}
.cupsetup .setting-head { margin-bottom: 8px; }
.cupsetup .scoring-sub { margin-top: 18px; }

/* =====================================================================
   Build 1_55 — fixture rows, league and cup alike
   ---------------------------------------------------------------------
   Build 1_51 gave the cup a tick box without giving it a column: the box
   took the home name's column, everything after it slid one along, and
   the clear control wrapped onto a row of its own and stretched into a
   long bar. Every row now has the same five named cells, whether the
   selection list is open, closed, or the fixture has just been played:

     tick │ home name + badge │ dice or scores │ badge + away name │ clear

   The tick cell is 0px wide until the list is open, then 28px; the clear
   cell is a fixed 32px whether or not its button is showing. So ticking,
   rolling and revealing never move a name.
   ===================================================================== */

.fixture,
.cup-fixture {
  --tick-w: 0px;
  --fx-cols: var(--tick-w) minmax(0, 1fr) auto minmax(0, 1fr) 32px;
  display: grid;
  grid-template-columns: var(--fx-cols);
  grid-template-areas:
    "leg  leg  leg   leg  leg"
    "tick home score away clear";
  align-items: center;
  column-gap: 10px; row-gap: 0;
}
.fixtures.is-picking .fixture,
.cup-ties.is-picking .cup-fixture { --tick-w: 28px; grid-template-columns: var(--fx-cols); }

.tick-slot { grid-area: tick; display: flex; align-items: center; justify-content: center; min-width: 0; }
.fixture > .home, .cup-fixture > .team-home { grid-area: home; }
.fixture > .score-pair, .cup-fixture > .score-pair { grid-area: score; justify-self: center; }
.fixture > .away, .cup-fixture > .team-away { grid-area: away; }
.fixture > .fixture-clear, .cup-fixture > .btn-clear { grid-area: clear; justify-self: end; }
.cup-fixture > .leg-label { grid-area: leg; margin-bottom: 4px; }

.cup-fixture .team-name {
  display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500;
}
.cup-fixture .team-home { justify-content: flex-end; text-align: right; }
.cup-fixture .team-away { justify-content: flex-start; text-align: left; }
.cup-fixture .seed-dot { margin: 0; flex: 0 0 auto; }
.cup-fixture .tn,
.fixture .team-name { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

/* The clear control: a small round button in its own cell, never a bar.
   It clears that one match's score — both sides, half-rolled included —
   and is offered only when there is a score to clear. */
.fixture-clear,
.cup-fixture .btn-clear {
  width: 32px; height: 32px; padding: 0; flex: none;
  border: 1px solid transparent; border-radius: 50%;
  background: none; color: var(--ink-soft);
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.fixture-clear:hover,
.cup-fixture .btn-clear:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.fixture-clear:focus-visible,
.cup-fixture .btn-clear:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.fixture-clear[hidden],
.cup-fixture .btn-clear[hidden] { display: none; }

.auto-check { margin: 0; }
.cup-fixture { padding: 3px 0; }
.cup-fixture + .cup-fixture { margin-top: 4px; padding-top: 8px; }

/* The dice never add to the page's width while they turn. */
.fixtures, .cup-ties { overflow-x: clip; overflow-clip-margin: 10px; }
.score-pair-dice { min-height: 44px; }

/* ------------------------------------------------ the line under a tie --- */

.tie { padding: 8px 12px 8px; }
.tie-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  min-height: 28px; margin-top: 4px; padding-top: 4px;
  border-top: 1px solid var(--rule);
  font-size: 14.5px; line-height: 1.35;
}
.tie-status .tie-agg,
.tie-status .tie-through,
.tie-status .tie-pens-result,
.tie-status .tie-pens { margin: 0; }
.tie-status .tie-agg { color: var(--ink-soft); }
.tie-pending { color: var(--ink-soft); }
.tie-pending.is-rolling { color: #8E2B21; font-weight: 600; }
.tie-status .btn-pens { min-height: 36px; }
.just-revealed .tie-status > * { animation: reveal-in 420ms ease-out 1; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- the dice --- */

/* A personal roll: the ordinary black-outlined die, turning in place. The
   motion itself is a transform written each frame (see animateRoll), so the
   box never changes size and nothing beside it moves. */
.die.is-rolling {
  animation: none;
  background: var(--paper); border-color: var(--ink); color: var(--ink);
  cursor: default; transition: none;
}
.die.just-landed { animation: die-land 380ms cubic-bezier(.2,.8,.3,1.2) 1; }
@keyframes die-land {
  0%   { transform: scale(1.18); }
  60%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* Pulse: every selected die in red — who rolls, not how strong. */
.die.is-pulsing {
  animation: none;
  transform: none;
  border-color: #8E2B21; background: rgba(179, 55, 43, 0.14); color: var(--zone-relegation-text);
  cursor: progress;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.die.is-pulsing .die-face { font-size: 20px; }
/* Landed: upright on the real face, solid red, and held long enough to read. */
.die.is-pulsing.is-landed {
  background: #B3372B; border-color: #8E2B21; color: #fff;
  animation: die-land 380ms cubic-bezier(.2,.8,.3,1.2) 1;
}
.die.is-pulsing.is-landed .die-face { color: #fff; }
/* Then eased into the saved look the redraw will show, so there is no flash. */
.die.is-pulsing.is-handover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.die.is-pulsing.is-handover .die-face { color: var(--paper); }
.die.is-standin { cursor: default; }
.die.is-standin.is-handover { background: #fff; border-color: #C6CBC2; color: var(--ink); }
.die.is-standin.is-handover .die-face { color: var(--ink); }

.autobar.is-busy .autobar-note { color: #8E2B21; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .just-revealed .tie-status > * { animation: none; }
  .die.is-pulsing.is-landed, .die.just-landed { animation: none; }
}

/* --------------------------------------------------------- phones --- */
/* Two lines per match, like a scoreboard: home name and its die on the
   first, away name and its die on the second. Long names wrap inside
   their own cell and never push a die or the clear button about. */
@media (max-width: 560px) {
  .fixture,
  .cup-fixture {
    --fx-cols: var(--tick-w) minmax(0, 1fr) auto 36px;
    grid-template-areas:
      "leg  leg  leg  leg"
      "tick home hs   clear"
      "tick away as   clear";
    column-gap: 10px; row-gap: 6px;
    padding-left: 8px; padding-right: 6px;
  }
  .fixtures.is-picking .fixture,
  .cup-ties.is-picking .cup-fixture { --tick-w: 26px; }
  .cup-fixture { padding-left: 0; padding-right: 0; }
  .fixture > .score-pair:not(.score-pair-locked),
  .cup-fixture > .score-pair:not(.score-pair-locked) { display: contents; }
  .fixture > .score-pair .dash,
  .cup-fixture > .score-pair .dash { display: none; }
  .fixture .die[data-side="home"], .cup-fixture .die[data-side="home"],
  .fixture .score-home, .cup-fixture .score-home { grid-area: hs; justify-self: end; }
  .fixture .die[data-side="away"], .cup-fixture .die[data-side="away"],
  .fixture .score-away, .cup-fixture .score-away { grid-area: as; justify-self: end; }
  .score-pair-locked { grid-area: hs / hs / as / as; align-self: center; }
  .fixture > .home, .cup-fixture > .team-home,
  .fixture > .away, .cup-fixture > .team-away {
    justify-content: flex-start; text-align: left; font-weight: 600;
  }
  .fixture > .away .seed-dot, .cup-fixture > .team-away .seed-dot { order: 2; }
  .fixture > .fixture-clear, .cup-fixture > .btn-clear { align-self: center; width: 36px; height: 36px; }
  .cup-fixture .score-pair, .cup-fixture .team-home, .cup-fixture .team-away,
  .cup-fixture .btn-clear { grid-area: auto; }
  .cup-fixture > .team-home { grid-area: home; }
  .cup-fixture > .team-away { grid-area: away; }
  .cup-fixture > .btn-clear { grid-area: clear; }
  .tick-slot { grid-area: tick; }
  .score-pair-dice { min-height: 0; }
}

/* On a wide screen a tie is ONE line tall: its match (or both legs) on the
   left, and where it stands in a column of its own on the right, instead of
   a second line under every tie. */
@media (min-width: 721px) {
  .tie:not(.tie-bye):not(.tie-locked) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    column-gap: 14px; align-items: center;
    padding: 6px 12px;
  }
  .tie:not(.tie-bye):not(.tie-locked) > .cup-fixture { grid-column: 1; }
  .tie:not(.tie-bye):not(.tie-locked) > .tie-status {
    grid-column: 2; grid-row: 1 / span 2;
    margin: 0; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--rule);
    align-self: stretch; align-content: center; font-size: 14px;
  }
  .tie > .cup-fixture + .cup-fixture { margin-top: 2px; }
}
.pulse-legend-text { flex: 1 1 auto; min-width: 0; }
/* The count and the button share one line at every width, so the bar does
   not grow when its note changes to "Rolling 10 ties…". */
.autobar-row:has(> [data-act="cup-roll-round"]),
.autobar-row:has(> [data-act="auto-generate"]) { flex-wrap: nowrap; }
.autobar-row > .autobar-note { min-width: 0; }
.autobar-row > .btn-auto { flex: 0 0 auto; white-space: nowrap; }
/* A score box and a die are given the same height, so a manual-dice row does
   not change height when a Pulse shows dice in place of its boxes. */
.fixture > .score-pair, .cup-fixture > .score-pair { min-height: 44px; }
.die.is-standin { width: 46px; height: 38px; border-radius: var(--r-sm); }
@media (max-width: 620px) { .die.is-standin { width: 40px; } }
@media (min-width: 721px) {
  .tie:not(.tie-bye):not(.tie-locked) { grid-template-columns: minmax(0, 1fr) 240px; }
}
.tie-status .tie-pens-result { color: var(--ink-soft); font-size: 13.5px; }
/* A disabled automate button stays visibly disabled under the pointer; the
   general .btn:hover green was showing through while the dice rolled. */
.btn-auto[disabled]:hover { background: var(--paper-alt); border-color: var(--rule); color: var(--ink-soft); }
/* On a phone the status line runs under the tie, and "… go through" plus a
   shootout score can need two lines. Two are reserved, so a tie is the same
   height before its dice are rolled and after the result is revealed. */
@media (max-width: 720px) {
  .tie-status { min-height: calc(2 * 1.35em + 6px); align-content: flex-start; }
}
.tie-status > * { line-height: 20px; }
@media (max-width: 720px) {
  .tie-status { min-height: 48px; }
}
@media (min-width: 721px) {
  /* Three short lines fit beside a one-line tie without making it taller. */
  .tie:not(.tie-bye):not(.tie-locked) > .tie-status { font-size: 13.5px; }
  .tie:not(.tie-bye):not(.tie-locked) > .tie-status > * { line-height: 17px; }
}
@media (max-width: 720px) {
  .tie-status { min-height: 54px; row-gap: 2px; }
}
@media (min-width: 721px) {
  .tie:not(.tie-bye):not(.tie-locked) { grid-template-columns: minmax(0, 1fr) 270px; }
}
.tie-through .tie-pens-result { font-size: inherit; color: var(--ink-soft); }

/* =====================================================================
   Build 1_56 — preferred teams
   ---------------------------------------------------------------------
   Blue, because every other colour on a fixture already means something:
   green/amber/red are strengths, purple is a Super Seed, red dice are
   DiceFooty rolling and black dice are yours. The marker is words as well
   as colour — "Your team" beside the club — and the row gains a blue edge.
   ===================================================================== */
:root { --pref: #1D5FA8; --pref-ink: #123F73; --pref-soft: #EAF2FC; }

.pref-tag {
  display: inline-flex; align-items: center; flex: none;
  padding: 3px 7px; border-radius: 999px;
  background: var(--pref); color: #fff;
  font-family: var(--cond); font-size: 11.5px; font-weight: 700; line-height: 1;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
/* Only a row carrying the marker may wrap it under the name; every other row
   keeps build 1_55's layout exactly. */
.fixture > .home:has(.pref-tag), .fixture > .away:has(.pref-tag),
.cup-fixture > .team-name:has(.pref-tag) { flex-wrap: wrap; row-gap: 3px; }

.fixture.is-preferred { background: var(--pref-soft); box-shadow: inset 4px 0 0 var(--pref); }
.fixture.is-preferred.is-selected { background: #DCE9F8; }
.tie.is-preferred { border-color: var(--pref); background: var(--pref-soft); box-shadow: inset 4px 0 0 var(--pref); }
.tie.is-preferred.tie-done { background: #E2ECF8; }
.cup-fixture-locked .team-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cup-fixture-locked .team-home { justify-content: flex-end; }

/* The picker */
.preferpanel { display: block; }
.prefer-explain { margin-top: 12px; }
.prefer-head {
  margin: 12px 0 8px; padding: 9px 12px;
  background: var(--pref-soft); border: 1px solid var(--rule); border-left: 4px solid var(--pref);
  border-radius: var(--r-sm);
}
.prefer-head strong { display: block; font-size: 16px; margin-bottom: 2px; color: var(--pref-ink); }
.prefer-list { max-height: 300px; }
.prefer-option.is-on { background: var(--pref-soft); color: var(--pref-ink); }
.prefer-option.is-on .invite-league { color: var(--pref); font-weight: 700; }
.preferpanel .chosen-item { border-color: var(--pref); background: var(--pref-soft); }
.prefer-search {
  width: 100%; padding: 10px 12px; min-height: 44px; font: inherit; font-size: 16px;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
  margin-top: 6px;
}
.prefer-lost {
  margin: 8px 0; padding: 9px 12px; border-left: 4px solid var(--danger);
  background: #FCEDEB; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 15px;
}

/* Build 1_56: a personal roll lands with build 1_54's quick pop again. Its own
   keyframes, so the approved Pulse landing (die-land, 380ms) is untouched. */
.die.just-landed { animation: die-land-personal 230ms ease-out 1; }
@keyframes die-land-personal {
  0%   { transform: rotate(0deg) scale(1.22); }
  55%  { transform: rotate(0deg) scale(0.95); }
  100% { transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .die.just-landed { animation: none; } }
/* Build 1_56: build 1_54's personal roll, restored — CSS tumbles the die (a
   transform only, so nothing beside it moves) while the faces flicker. */
.die.is-rolling {
  animation: die-tumble-personal 165ms linear infinite;
  background: var(--floodlight); border-color: #C79400; color: var(--ink);
  cursor: default; transition: none;
}
@keyframes die-tumble-personal {
  0%   { transform: rotate(-14deg) scale(1);    }
  25%  { transform: rotate(76deg)  scale(1.08); }
  50%  { transform: rotate(168deg) scale(0.96); }
  75%  { transform: rotate(262deg) scale(1.07); }
  100% { transform: rotate(346deg) scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .die.is-rolling { animation: none; background: var(--floodlight); }
}

/* =====================================================================
   Build 1_56 — the One-Off League on one page
   Each division: its name, its counts, then its fixtures beside its table
   (stacked on narrow screens, as the scorebook already does).
   ===================================================================== */
.division-jump { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.division-jump-label { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; color: var(--chalk-soft); }
.division-jump-link {
  min-height: 40px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule-dark); background: rgba(255,255,255,0.06); color: var(--chalk);
  font: inherit; font-size: 14.5px; font-weight: 600;
}
.division-jump-link:hover { background: rgba(255,255,255,0.14); }
.play-section { margin: 0 0 34px; scroll-margin-top: 80px; }
.play-section + .play-section { padding-top: 24px; border-top: 1px solid var(--rule-dark); }
.play-section-head h2 {
  font-family: var(--cond); font-size: clamp(24px, 3.2vw, 30px); color: var(--chalk);
  margin: 0 0 6px;
}
.play-method-bar { margin: 0 0 20px; }
.play-method-bar .playmethod { background: var(--paper); border-radius: var(--r-lg); }

/* =====================================================================
   Build 1_57 — the Lower League Cup of Scotland's Round One groups
   Seven small tables in a grid (one column on a phone), each table the
   league's own table styles, scrolling sideways inside its own box rather
   than widening the page.
   ===================================================================== */
.cup-groups { margin-top: 18px; }
.cup-group-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
}
.cup-group-card {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 12px; background: var(--paper); color: var(--ink); min-width: 0;
}
.cup-group-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cup-group-card-head h3 { font-size: 20px; }
.cup-group-card .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.league.cup-group-table { font-size: 14.5px; min-width: 300px; }
table.league.cup-group-table thead th,
table.league.cup-group-table tbody td { padding-left: 4px; padding-right: 4px; }
table.league.cup-group-table tbody tr.is-qualified td.col-team { box-shadow: inset 3px 0 0 var(--grass); }
.clinch-q { background: var(--grass); }
.cup-group-tie { margin: 10px 0 0; }
.cup-group-tie .chipset { margin: 8px 0 4px; }
.cup-group-fixtures { margin-top: 10px; }
.cup-group-fixtures summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.cup-group-round { margin: 8px 0 12px; }
.cup-group-round-head { margin: 0 0 6px; font-size: 14px; color: var(--ink-soft); }
.cup-group-correct { color: var(--zone-promotion-text); font-weight: 600; }
.cup-group-block { margin: 0 0 14px; }
.cup-group-head { font-size: 18px; margin: 10px 0 6px; }
.cup-group-fixture .score-pair input { font-size: 16px; }   /* 16px keeps phones from zooming in */
.invite-set { margin: 14px 0 18px; padding-top: 12px; border-top: 1px solid var(--rule); }
.invite-set .invite-head { flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.invite-autopick { min-height: 40px; }
table.league.cup-group-table thead th.col-pos,
table.league.cup-group-table tbody td.col-pos { width: 24px; padding-left: 6px; }
table.league.cup-group-table tbody td.col-pts { padding-right: 6px; }
@media (max-width: 520px) {
  .cup-group-card { padding: 10px 6px; }
  table.league.cup-group-table { font-size: 13px; min-width: 0; }
  table.league.cup-group-table thead th,
  table.league.cup-group-table tbody td { padding-left: 2px; padding-right: 2px; }
  table.league.cup-group-table thead th.col-pos,
  table.league.cup-group-table tbody td.col-pos { width: 18px; padding-left: 3px; }
  table.league.cup-group-table tbody td.col-pts { font-size: 14px; padding-right: 4px; }
  table.league.cup-group-table .clinch { margin-left: 3px; }
}

.cup-groups-later { margin-top: 14px; }
.cup-groups-later > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-family: var(--cond); font-weight: 600; font-size: 18px; color: var(--ink);
}

/* =====================================================================
   Build 1_59 — Continuous Season
   ---------------------------------------------------------------------
   The followed club is blue wherever it is: the same --pref blue and the
   same "Your team" words as a preferred team, now on table rows as well.
   The setup boxes use the guided journey's own sizes; only what is new
   here — the ladder, the size control, the result card and the history —
   is styled below. Everything wraps at phone width.
   ===================================================================== */
table.league tr.is-followed td { background: var(--pref-soft); }
table.league tr.is-followed td.col-pos { box-shadow: inset 4px 0 0 var(--pref); }
table.league tr.is-followed .team-name { color: var(--pref-ink); font-weight: 700; }
table.league tr.is-followed .pref-tag { margin-left: 6px; vertical-align: middle; }
.league .col-team .pref-tag { font-size: 10.5px; padding: 2px 6px; }

.opt.is-followed { background: var(--pref-soft); }
.picked li[data-followed] { border-color: var(--pref); background: var(--pref-soft); }
.picked li[data-followed] .pref-tag { margin: 0 6px; }

.c-club .c-chosen { font-size: 17px; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-club-list { max-height: 360px; }
.c-club-option.is-on { background: var(--pref-soft); color: var(--pref-ink); }
.c-club-option.is-on .invite-league { color: var(--pref); font-weight: 700; }

.c-ladder-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 12px; }
.c-rung {
  border: 1px solid var(--rule); border-radius: var(--r-md, 10px); padding: 14px 16px;
  background: var(--paper); display: grid; gap: 10px;
}
.c-rung.is-here { border-color: var(--pref); box-shadow: inset 4px 0 0 var(--pref); background: var(--pref-soft); }
.c-rung.is-new { border-style: dashed; }
.c-rung-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.c-rung-level { font-family: var(--cond); font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.c-rung-here, .c-rung-new {
  font-family: var(--cond); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 999px; background: var(--pref); color: #fff;
}
.c-rung-new { background: var(--ink); }
.c-rung-field { margin: 0; }
.c-rung-field input, .c-rung-field select { min-height: 44px; font-size: 16px; width: 100%; max-width: 440px; }
.c-rung-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.c-system { margin-top: 18px; }

.c-where { margin-bottom: 14px; }
.c-where-line { font-size: 17px; margin: 0 0 6px; }
.c-size, .c-meet { margin: 6px 0 16px; }
.c-size-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.c-size-row { display: flex; align-items: center; gap: 10px; }
.c-size-btn { min-width: 48px; min-height: 48px; font-size: 22px; padding: 0; }
.c-size-input { width: 5.5ch; min-height: 48px; font-size: 20px; text-align: center; font-weight: 600; }

.c-teams-intro { margin-bottom: 14px; }
.c-suggest { border-left: 4px solid var(--pref); background: var(--pref-soft); padding: 12px 16px; border-radius: 0 8px 8px 0; }
.c-suggest .hero-cta { margin: 8px 0; }
.c-suggest-note { font-weight: 600; color: var(--pref-ink); margin: 6px 0; }
.c-counter.is-over .squad-count { background: #B3261E; color: #fff; }

.c-rules .c-top-note { font-weight: 600; }
.rule input:disabled { opacity: 0.55; }

.c-stale { margin-bottom: 14px; }
.c-stale p { margin: 6px 0 10px; }

.c-banner { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; border-left: 5px solid var(--pref); }
.c-banner-line { margin: 0; font-size: 17px; flex: 1 1 280px; }

.c-card-name { margin: 4px 0 6px; font-family: var(--cond); font-size: 28px; }
.c-card-club { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 17px; margin: 0 0 8px; }
.c-card-foot { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.c-danger { color: #B3261E; }

.c-result { text-align: left; border-left: 6px solid var(--pref); }
.c-result.c-up { border-left-color: #1F8A4C; }
.c-result.c-down { border-left-color: #B3261E; }
.c-badge {
  display: inline-block; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 14px; padding: 5px 12px; border-radius: 999px; background: var(--pref); color: #fff;
}
.c-up .c-badge { background: #1F8A4C; }
.c-down .c-badge { background: #B3261E; }
.c-result-club { font-family: var(--cond); font-size: 32px; margin: 10px 0 4px; color: var(--pref-ink); }
.c-result-pos, .c-result-line, .c-result-next { font-size: 17px; margin: 6px 0; }
.c-honours, .c-complete .season-next { margin-top: 16px; }
.c-trophies { margin: 6px 0 10px; padding-left: 20px; font-size: 17px; font-weight: 600; }

.c-hist { margin-top: 14px; }
.c-hist-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; cursor: pointer; font-size: 17px; }
.c-hist.is-current .c-hist-head { margin-bottom: 10px; cursor: default; }
.c-lock { background: var(--paper-alt); border-radius: 8px; padding: 10px 14px; margin: 12px 0; font-size: 15px; }
.c-results { margin-top: 12px; }
.c-results > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.c-round h4 { margin: 12px 0 4px; font-family: var(--cond); }
.c-round ul { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 24px; }
.c-round li { padding: 3px 0; break-inside: avoid; font-size: 15px; }
.c-round li.is-followed { color: var(--pref-ink); font-weight: 700; }
.c-ladder-mini { margin: 6px 0 0; padding-left: 22px; }
.c-muted { color: var(--ink-soft, #5A6570); font-size: 14px; }

/* =====================================================================
   Build 1_60 — International qualifying and the World Shield
   Reuses the cup and group-stage pieces above; these rules only lay out
   what is new: the region and round tabs, the 32 slots, the finals pickers.
   ===================================================================== */
.intl-tabs { margin-bottom: 18px; }
.intl-tabs .divtab { font-size: 17px; padding: 9px 12px; }
.intl-tabs .divtab.is-locked,
.intl-tabs .divtab[disabled] { opacity: 0.45; cursor: not-allowed; }
.intl-lock { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 4px; }
.intl-subtabs { flex-wrap: wrap; }
.intl-intro { color: var(--chalk-soft); max-width: 72ch; margin: 0 0 16px; font-size: 15px; }
.intl-stage { margin-bottom: 18px; }
.intl-stage .cup-round-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.intl-auto { margin: 8px 0 14px; }
.intl-ties { display: grid; gap: 10px; }
.intl-tie-label { grid-column: 1; }
/* Inside a group card a deciding match has no room for a side column. */
.intl-decider .tie:not(.tie-bye) { display: block; }
.intl-decider .tie > .tie-status { border-left: 0; padding: 4px 0 0; border-top: 1px solid var(--rule); margin-top: 4px; }
.intl-tie-label { margin: 0 0 4px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.intl-placeholder { color: var(--ink-soft); border-style: dashed; }
.intl-placeholder-teams { margin: 4px 0 0; }
.intl-byes { margin-top: 14px; }
.intl-match .team-home, .intl-match .team-away { min-width: 0; overflow-wrap: anywhere; }
.intl-match .seed-dot { font-size: 11px; }
.intl-blank { display: inline-block; margin: 0 6px; color: var(--ink-soft); }
.intl-wait { font-size: 13px; color: var(--ink-soft); font-style: italic; }
.intl-decider { margin: 12px 0 4px; }
.intl-decider .tie { background: var(--paper); margin-top: 8px; }
.intl-compare { margin-top: 20px; }
.intl-compare h3 { margin-bottom: 6px; }
.intl-level-note { padding: 8px 4px 0; border-top: 0; }
.intl-pots { margin: 8px 0 14px; }
.intl-pot { margin: 6px 0; font-size: 14.5px; line-height: 1.5; }
.intl-pot .seed-dot { margin-right: 6px; }
.intl-waiting { font-weight: 600; }
.intl-ratings { margin-top: 18px; }
.intl-ratings > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.intl-colour-list { display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); margin: 10px 0; }
.intl-colour-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.intl-colour-name { font-weight: 600; min-width: 0; }
.intl-colour-row select { min-height: 40px; font-size: 16px; }
.intl-pot-note, .intl-changed { font-weight: 400; font-size: 12.5px; color: var(--ink-soft); }
.intl-changed { color: #B4690E; }
.intl-colour-row .chip { min-height: 38px; }
.intl-slots { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 6px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.intl-slot { display: grid; grid-template-columns: 34px 1fr; gap: 0 8px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); min-height: 48px; align-items: center; }
.intl-slot.is-filled { background: var(--paper-alt); }
.intl-slot-n { font-family: var(--cond); font-weight: 700; font-size: 18px; color: var(--ink-soft); grid-row: span 2; }
.intl-slot-team { font-weight: 600; }
.intl-slot-team .clinch { margin-left: 6px; }
.intl-slot-route, .intl-slot-empty { font-size: 13px; color: var(--ink-soft); }
.intl-counters { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.intl-counter { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rule); font-size: 14.5px; }
.intl-counter b { font-family: var(--cond); font-size: 18px; }
.intl-finalists { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); font-size: 14.5px; }
.intl-finalists .intl-slot-n { font-size: 14px; margin-right: 6px; }
.intl-finals-top { margin-bottom: 16px; }
.intl-pick-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.intl-pick { min-height: 48px; text-align: left; }
.intl-pick[disabled] { opacity: 0.45; cursor: not-allowed; }
.intl-pick-note { font-size: 12px; text-transform: uppercase; margin-left: 4px; }
.intl-bracket { margin-top: 18px; }
.intl-bracket > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.intl-bracket-grid { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.intl-bracket ul { list-style: none; padding: 0; margin: 6px 0; }
.intl-bracket li { padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.intl-br-label { display: inline-block; min-width: 40px; font-weight: 700; color: var(--ink-soft); }
.intl-podium { margin: 4px 0 16px; color: var(--chalk-soft); }
.intl-foot { margin-top: 26px; }
.intl-foot .playmethod { background: var(--paper); border-radius: var(--r-lg); margin-bottom: 14px; }
.intl-danger { margin-top: 22px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.intl-history-list { padding-left: 18px; }
.intl-history-rest { display: block; font-size: 13.5px; color: var(--ink-soft); }
.intl-history { margin-top: 18px; }
.intl .wiz-nav span:empty { flex: 1; }
.intl > .comp-title { padding-top: 26px; margin-bottom: 10px; }
.intl > .playmethod { background: var(--paper); border-radius: var(--r-lg); margin-bottom: 14px; }
.intl-match .team-home .team-name { justify-content: flex-end; }
@media (max-width: 560px) { .intl-match .team-home .team-name { justify-content: flex-start; } }

/* =====================================================================
   Build 1_61 — World Shield: one group per row, live table beside the
   fixtures. Only position and scrolling change; the table, fixtures, dice
   and score boxes keep their existing styles. The table sticks just below
   the top bar (--topbar-h is measured by the page) while its own group's
   fixtures scroll past, and stops at the end of that group's row, where the
   next group's table takes over. Ordinary page scrolling throughout.
   ===================================================================== */
.intl-group-flow { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.intl-split { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.intl-split-side, .intl-split-main { min-width: 0; }
.intl-group-row .intl-fixtures { margin-top: 0; }
@media (min-width: 900px) {
  .intl-split {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr);
    grid-template-areas: "main side";
    gap: 18px; align-items: stretch;
  }
  .intl-split-side { grid-area: side; }
  .intl-split-main { grid-area: main; }
}
/* Sticky only where the table can fit on screen with room to spare; on a
   short screen it simply sits at the top of its row. */
@media (min-width: 900px) and (min-height: 560px) {
  .intl-sticky { position: sticky; top: calc(var(--topbar-h, 64px) + 10px); }
}
.intl .die.is-locked { cursor: default; }
.intl .die.is-locked:hover,
.intl .die.is-locked:active { transform: rotate(0deg); background: var(--ink); box-shadow: 2px 3px 0 rgba(22, 34, 46, 0.10); }
.intl > .playmethod .pulse-sound { margin-left: auto; }
.intl-legacy { margin: 0 0 14px; }

/* Build 1_61 — Back to top. Fixed to the bottom of the viewport only once
   the page has been scrolled well down; small, round and in the corner so it
   does not sit over fixtures, tables or score boxes, and clear of the phone's
   home indicator. */
.to-top {
  position: fixed; z-index: 30;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pitch-deep); color: var(--chalk);
  border: 1px solid var(--rule-dark);
  box-shadow: 0 6px 18px rgba(4, 14, 24, 0.35);
  font-family: var(--cond); font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  cursor: pointer; opacity: 0.92;
  transition: opacity 160ms ease, transform 160ms ease;
}
.to-top:hover { opacity: 1; transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid var(--floodlight, #F2C14E); outline-offset: 3px; opacity: 1; }
.to-top[hidden] { display: none; }
.to-top svg { width: 20px; height: 20px; }
/* The page can always scroll far enough that the button never has to cover
   the last row of anything. */
body.has-to-top .footer { padding-bottom: 76px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } .to-top:hover { transform: none; } }
main[tabindex="-1"]:focus { outline: none; }
/* Which group's table is pinned, once the group heading has scrolled away. */
.intl-sticky { background: var(--paper); }
.intl-sticky-label { display: none; margin: 0 0 4px; }
@media (min-width: 900px) { .intl-sticky-label { display: block; padding-top: 6px; } }

/* Build 1_62 — World Shield / Euro Shield switch at the top of International. */
.intl-comp { margin: 22px 0 0; flex-wrap: wrap; }
.intl-comp + .page-head, .intl-comp + .comp-title { padding-top: 14px; }
.intl > .intl-comp + .comp-title { padding-top: 14px; }
.intl-compare.is-provisional .week-chip { margin-left: 8px; vertical-align: middle; }

/* Build 1_63 — the form guide in International qualifying group tables. The
   domestic boxes, colours and letters; only spacing tightened to fit the
   narrower group table. On a phone the boxes are a touch smaller so the whole
   table still fits its card without sideways scrolling. */
table.league.cup-group-table.has-form tbody td.col-form { padding-right: 6px; padding-left: 6px; }
table.league.cup-group-table.has-form thead th.col-form { padding-right: 6px; }
@media (max-width: 520px) {
  table.league.cup-group-table.has-form tbody td.col-form { padding-left: 3px; padding-right: 3px; }
  /* Two rows of three, read like a line of text: oldest top-left, newest
     bottom-right. Keeps a long single-word name (Liechtenstein) from pushing
     the table wider than a phone. */
  table.league.cup-group-table.has-form .form-guide { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 1px; }
  table.league.cup-group-table.has-form .form-box { width: 11px; height: 12px; font-size: 9px; }
  table.league.cup-group-table.has-form tbody td.col-form, table.league.cup-group-table.has-form thead th.col-form { padding-left: 2px; padding-right: 2px; }
}

/* =====================================================================
   Build 1_66 — International cycle seasons
   The mode switch, the run/cycle bar, the cycle's competition tabs (the
   Combined Shield greyed with a lock until earned), the Roll of Honour,
   and view-only finished cycles. Everything else is the Shields' own look.
   ===================================================================== */
.cyc-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin: 14px 0 0; padding: 14px 16px; }
.cyc-pick { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-soft); min-width: 0; flex: 1 1 200px; }
.cyc-pick select { font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); padding: 8px 10px; border-radius: 8px; border: 1px solid #c9d2da; background: #fff; max-width: 100%; min-height: 44px; }
.cyc-bar .btn { min-height: 44px; }
.cyc-lock { font-size: 12px; margin-left: 4px; }
.cyc-banner { margin: 6px 0 16px; }
.cyc-banner .cup-note { margin: 6px 0; }
.cyc-banner.is-complete { border-left: 4px solid var(--grass); }
.cyc-locked h2 { display: flex; gap: 8px; align-items: center; }
.cyc-needs { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.cyc-need { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(22, 34, 46, 0.05); }
.cyc-need-name { font-weight: 600; min-width: 220px; }
.cyc-honours { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cyc-hon { margin: 0; }
.cyc-hon-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.cyc-hon-top h2 { margin: 0; font-size: 20px; }
.cyc-hon-list { margin: 0; }
.cyc-hon-row { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(22, 34, 46, 0.08); }
.cyc-hon-row dt { color: var(--ink-soft); font-size: 14px; }
.cyc-hon-row dd { margin: 0; }
.cyc-hon[data-status="on-hold"] { border-left: 4px solid var(--danger); }
.cyc-name { display: block; margin-top: 16px; max-width: 420px; }
.cyc-name input { width: 100%; font-size: 16px; padding: 10px 12px; min-height: 44px; }
.csf-from { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 12px 0; }
.csf-from h3 { font-size: 16px; margin: 0 0 6px; }
.intl.is-readonly [data-act="intl-auto"],
.intl.is-readonly [data-act="intl-draw"],
.intl.is-readonly [data-act="intl-reset-finals"],
.intl.is-readonly [data-act="intl-pens"],
.intl.is-readonly [data-act="intl-clear"],
.intl.is-readonly .intl-danger,
.intl.is-readonly .intl-ratings,
.intl.is-readonly .playmethod { display: none; }
@media (max-width: 560px) {
  .cyc-hon-row { grid-template-columns: 1fr; gap: 2px; }
  .cyc-need-name { min-width: 0; width: 100%; }
}

/* =====================================================================
   Build 1_67 — International usability: clear touch-friendly navigation,
   larger readable text, prominent next steps. Scoped to .intl so the rest
   of DiceFooty is unchanged. Dice are deliberately not touched.
   Contrast (checked in tests/usability.mjs): white on every Shield colour or
   charcoal on the light ones, at least 4.5:1.
   ===================================================================== */
.intl { --ink-soft: #3C4955; --chalk-soft: #F2F6F9; }

/* --- One-off Tournaments | Cycle Seasons ----------------------------- */
.mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; max-width: 620px; }
.mode-btn {
  min-height: 52px; padding: 10px 16px; border-radius: 12px; cursor: pointer;
  font-family: var(--sans); font-size: 19px; font-weight: 700; line-height: 1.15;
  background: rgba(255, 255, 255, 0.10); color: #FFFFFF; border: 2px solid rgba(255, 255, 255, 0.55);
}
.mode-btn:hover { background: rgba(255, 255, 255, 0.18); }
.mode-btn[aria-selected="true"] { background: #FFFFFF; color: var(--ink); border-color: var(--floodlight); box-shadow: 0 0 0 3px var(--floodlight); }
.mode-btn[aria-selected="true"]::before { content: '\2713\00a0'; }
.mode-btn:focus-visible, .shield-btn:focus-visible { outline: 3px solid var(--floodlight); outline-offset: 3px; }

/* --- the run / cycle bar: compact ------------------------------------- */
.cyc-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px 14px; align-items: end; margin: 14px 0 0; padding: 12px 14px; }
.cyc-pick { gap: 3px; font-size: 15px; font-weight: 700; color: var(--ink); flex: none; }
.cyc-pick select { font-size: 17px; min-height: 46px; padding: 6px 10px; color: var(--ink); border-color: #8A97A3; }

/* --- the Shield buttons ------------------------------------------------ */
.shield-grid { display: grid; gap: 12px; margin: 16px 0 18px; grid-auto-rows: 1fr; }
.shield-grid-cycle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shield-grid-cycle [data-comp="honours"] { grid-column: 1 / -1; }
.shield-grid-oneoff { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.shield-btn {
  min-height: 56px; padding: 10px 14px; border-radius: 12px; cursor: pointer;
  font-family: var(--sans); font-size: 18px; font-weight: 700; line-height: 1.15; text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.18); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; gap: 6px; overflow-wrap: anywhere;
}
.shield-btn[data-comp="euro"]     { background: #1D4ED8; }
.shield-btn[data-comp="african"]  { background: #F59E0B; color: #16222E; }
.shield-btn[data-comp="asian"]    { background: #0F766E; }
.shield-btn[data-comp="american"] { background: #B91C1C; }
.shield-btn[data-comp="combined"] { background: #6D28D9; }
.shield-btn[data-comp="world"]    { background: #E3B92C; color: #16222E; }
.shield-btn[data-comp="honours"]  { background: #FAFAF7; color: #16222E; }
.shield-btn:hover { filter: brightness(1.08); }
.shield-btn[aria-selected="true"] { box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 7px var(--floodlight); }
.shield-btn[aria-selected="true"]::before { content: '\2713'; }
.shield-btn.is-locked { background: #5C6670; color: #E6EAEE; border-style: dashed; filter: none; }
.shield-btn.is-locked .cyc-lock { font-size: 15px; }

/* --- readable text ---------------------------------------------------- */
.intl .page-head p, .intl .intl-intro, .intl .how-it-works:not(.how-on-paper) li { color: #FFFFFF; font-size: 18px; line-height: 1.55; }
.intl .comp-meta { color: #FFFFFF; font-size: 17px; }
.intl .panel .explain, .intl .panel .explain-list li, .intl .panel .how-it-works li { color: var(--ink); font-size: 18px; line-height: 1.55; }
.intl .cup-note { color: var(--ink-soft); font-size: 16.5px; line-height: 1.55; }
.intl-note-ink { color: var(--ink); font-size: 18px; line-height: 1.5; margin: 0 0 12px; }
.intl-note { color: var(--ink); font-size: 17px; margin: 10px 0 0; }
.intl .panel > h2, .intl .cup-round-head h2 { font-size: 26px; }
.intl .cup-group-card-head h3 { font-size: 22px; }
.intl .notice { font-size: 17px; line-height: 1.5; }
.intl-next {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.22); border-left: 5px solid var(--floodlight);
  color: #FFFFFF; font-size: 20px; font-weight: 700; line-height: 1.35;
}
.intl-start .intl-next-line { font-size: 20px; color: var(--ink); margin: 0 0 14px; }
.intl-start .hero-cta { margin: 0 0 12px; }

/* "How it works": the long format explanations, tucked away but findable. */
.how-it-works { margin: 0 0 16px; }
.how-it-works > summary {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-size: 17px; font-weight: 700; color: #FFFFFF; border: 2px solid rgba(255, 255, 255, 0.6); list-style: none;
}
.how-it-works > summary::-webkit-details-marker { display: none; }
.how-it-works > summary::before { content: '\25B8\00a0'; }
.how-it-works[open] > summary::before { content: '\25BE\00a0'; }
.how-it-works > :not(summary) { margin-top: 10px; }
.panel .how-it-works > summary, .how-on-paper > summary { color: var(--ink); border-color: #8A97A3; }
.how-on-paper { margin: 0 0 12px; }

/* Team names, scores and tables. Structure unchanged; dice unchanged. */
.intl .cup-fixture .team-name { font-size: 17px; }
.intl .intl-score { font-size: 19px; min-height: 44px; }
.intl table.league.cup-group-table { font-size: 16px; }
.intl table.league tbody td.col-pts { font-size: 17px; }
.intl .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.intl .intl-subtabs .viewtab, .intl .intl-tabs .divtab { min-height: 46px; font-size: 17px; }
.intl .viewtab { color: #F2F6F9; }
.intl .divtab { color: #E8EEF3; }
.intl .btn { min-height: 44px; }
.intl .btn-sm { font-size: 15px; padding: 9px 14px; }
.tab-count { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--floodlight); color: var(--ink); font-size: 13px; font-weight: 700; vertical-align: middle; }
.tab-count.is-done { background: rgba(255, 255, 255, 0.85); }
.intl-next-list { margin: 8px 0 0; padding-left: 20px; font-size: 17px; color: var(--ink); line-height: 1.6; }

/* New-campaign actions: solid, contrasting, apart from the red reset. */
.btn-new {
  background: var(--floodlight); color: var(--ink); border: 2px solid rgba(22, 34, 46, 0.25);
  font-size: 18px; font-weight: 700; min-height: 48px; padding: 10px 22px;
}
.btn-new:hover { background: #D9A404; }
.intl-new-wrap { margin: 36px 0 18px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.intl-danger { margin-top: 26px; }

/* Combined Shield entrants: code column, then the name, which wraps. */
.csf-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 16px; color: var(--ink); margin: 0 0 12px; }
.csf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.csf-entrant { display: grid; grid-template-columns: 3em minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(22, 34, 46, 0.05); }
.csf-code { display: inline-block; min-width: 2.6em; text-align: center; padding: 2px 6px; border-radius: 6px; background: var(--ink); color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.5; }
.csf-name { font-size: 17px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; line-height: 1.35; padding-top: 2px; }

@media (max-width: 1000px) {
  .shield-grid-oneoff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shield-grid-oneoff [data-comp="world"] { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .shield-grid-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cyc-bar { grid-template-columns: 1fr; }
  .shield-btn { font-size: 16.5px; min-height: 52px; }
  .mode-btn { font-size: 17px; }
  .intl-next { font-size: 18px; }
  .intl table.league.cup-group-table { font-size: 15px; }
}
.intl .playmethod-hint { font-size: 15px; color: var(--ink-soft); }
.intl .playmethod-label { color: var(--ink-soft); }
@media (max-width: 380px) {
  .intl table.league.cup-group-table { font-size: 14.5px; }
  .intl table.league tbody td.col-pts { font-size: 15px; }
}
.intl .btn-new, .cyc .btn-new { min-height: 48px; }
.intl .viewtab[aria-selected="true"] { color: var(--ink); }
@media (max-width: 900px) and (min-width: 641px) {
  .cyc-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cyc-bar .btn-new { grid-column: 1 / -1; }
}
/* Build 1_67: the dialog's No / Cancel is clearly visible on the white box,
   and its words are easy to read. Applies to every DiceFooty question. */
#dialog-cancel { color: var(--ink); border: 2px solid #8A97A3; background: transparent; min-height: 44px; min-width: 88px; }
#dialog-cancel:hover { background: var(--paper-alt); }
#dialog-confirm { min-height: 44px; min-width: 88px; }
#dialog-body { font-size: 17px; line-height: 1.5; color: var(--ink); }

/* ---------------------------------------------------------------------------
   Build 1_68 — Custom International Leagues. The playing page, tables, dice
   and play-offs are the domestic league's own; these are the new screens:
   the list of leagues, the setup with its nation picker, the preview of next
   season and the history. Green page, soft white panels, dark text.
   --------------------------------------------------------------------------- */
.mode-switch.intl-mode-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
.panel .mode-switch { margin: 8px 0 6px; }
.panel .mode-btn { color: var(--ink); background: #FFFFFF; border-color: #8A97A3; }
.panel .mode-btn:hover { background: var(--paper-alt); }
.panel .mode-btn[aria-selected="true"] { background: #E6F2EA; border-color: var(--floodlight); }

.nl .nl-field { display: block; margin: 0 0 16px; }
.nl .nl-field > span { display: block; font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.nl input[type="text"], .nl input[type="search"], .nl input[type="number"] {
  font-size: 18px; min-height: 48px; padding: 8px 12px; border: 2px solid #8A97A3; border-radius: 10px;
  background: #FFFFFF; color: var(--ink); width: 100%; max-width: 420px;
}
.nl input[type="number"] { max-width: 140px; }
.nl input:focus-visible, .nl select:focus-visible { outline: 3px solid var(--floodlight); outline-offset: 2px; }
.nl .explain { font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 6px 0 0; }
.nl .nl-chip { min-height: 46px; min-width: 52px; font-size: 17px; }
.nl .division-rank { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 10px; }
.nl-div-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); gap: 4px 18px; align-items: start; }
.nl-count { font-size: 17px; color: var(--ink); margin: 4px 0 12px; }
.nl-warn { color: var(--danger); font-weight: 700; }
.nl .nl-rules { margin: 0 0 12px; }
.nl .rule-note, .nl .rules-preview { font-size: 15.5px; }
.nl-picked { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nl-picked-item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px 4px 12px; border-radius: 999px; background: #E6F2EA; color: var(--ink); font-size: 17px; }
.nl-picked-empty { font-size: 16px; color: var(--ink-soft); }
.nl-picked-name { font-weight: 600; }
.nl-rating { font-size: 16px; min-height: 40px; border-radius: 8px; border: 1px solid #8A97A3; background: #FFFFFF; color: var(--ink); padding: 2px 6px; }
.nl-remove { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(22, 34, 46, 0.1); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.nl-remove:hover { background: var(--danger); color: #FFFFFF; }
.nl .seed-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; margin: 0; }
.nl-pick-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.nl-picker { margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--rule); }
.nl-regions { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-picker-help { margin-bottom: 10px; }
.nl-list-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; font-size: 16.5px; color: var(--ink); }
.nl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; }
.nl-nation {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name state" "region state";
  width: 100%; min-height: 56px; padding: 8px 12px; text-align: left; cursor: pointer;
  border: 2px solid #C5CED6; border-radius: 10px; background: #FFFFFF; color: var(--ink); font: inherit;
}
.nl-nation:hover:not(:disabled) { border-color: var(--grass); }
.nl-nation.is-in { background: #E6F2EA; border-color: var(--grass); }
.nl-nation:disabled { cursor: not-allowed; background: var(--paper-alt); color: #4A5763; }
.nl-nation-name { grid-area: name; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.nl-nation-region { grid-area: region; font-size: 14.5px; color: var(--ink-soft); }
.nl-nation-state { grid-area: state; align-self: center; font-size: 15px; font-weight: 700; padding-left: 10px; }
.nl-nation.is-in .nl-nation-state { color: #17512F; }
.nl-empty { font-size: 17px; color: var(--ink); background: var(--paper); border-radius: 10px; padding: 14px 16px; }
.nl-ready { font-size: 18px; font-weight: 700; color: #FFFFFF; margin: 0 0 14px; }
.nl-foot { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 30px; }

.nl-leagues { display: grid; gap: 14px; }
.nl-card h2 { font-size: 24px; margin: 0 0 6px; }
.nl-card-meta { font-size: 16.5px; color: var(--ink-soft); margin: 0 0 12px; }
.nl-card.is-unreadable { border-left: 6px solid var(--danger); }

.nl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 20px; margin: 14px 0 12px; }
.nl-bar-line { font-size: 18px; margin: 0; color: var(--ink); }
.nl-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nl-bar-note { font-size: 16.5px; color: var(--ink); }
.nl-bar .btn { min-height: 44px; }

.nl-preview-div h2 { margin: 0 0 4px; }
.nl-preview-list { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.nl-preview-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 6px 12px; border-radius: 10px; background: var(--paper-alt); font-size: 17px; color: var(--ink); }
.nl-preview-list li.is-promoted { background: #E3F3E8; }
.nl-preview-list li.is-relegated { background: #FCEDEB; }
.nl-tag { font-size: 14.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.nl-tag-up { background: #17512F; color: #FFFFFF; }
.nl-tag-down { background: #962D23; color: #FFFFFF; }
.nl-leaving { font-size: 16.5px; color: var(--ink); }
.nl-season h2, .nl-honours h2 { margin: 0 0 8px; }
.nl-season-list, .nl-roll { margin: 0 0 12px; padding-left: 20px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.nl-old h3 { margin: 18px 0 6px; }
.nl-old .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 760px) {
  .nl-div-head { grid-template-columns: 1fr; }
  .mode-switch.intl-mode-3 { grid-template-columns: 1fr; }
  .nl-list { grid-template-columns: 1fr; max-height: 55vh; }
  .nl-bar { flex-direction: column; align-items: stretch; }
}
.nl .rule > span:first-child { font-size: 16px; font-weight: 700; color: var(--ink); }

/* =====================================================================
   Build 1_69 — national flags and one-digit score boxes.
   ===================================================================== */

/* A flag is about the height of the name beside it, never stretched: the
   height follows the text, the width follows the flag's own 4:3 shape. A
   hairline keeps white-edged flags (Japan, England) visible on paper. */
.flag {
  display: inline-block; flex: none;
  height: 0.95em; width: auto; aspect-ratio: 4 / 3;
  vertical-align: middle; position: relative; top: -0.06em;
  border-radius: 2px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(22, 34, 46, 0.18);
}
/* A team with no confirmed flag keeps the same space, so names line up. */
.flag-none { box-shadow: none; background: none; }
/* Inside the fixture rows the row's own gap spaces the flag; elsewhere a
   small, consistent gap follows it. */
.nat { white-space: nowrap; }
.nat .flag,
.col-team > .flag,
.intl-colour-name > .flag,
.nl-nation-name > .flag,
.season-name > .flag { margin-right: 0.4em; }
.fixture .flag, .cup-fixture .flag { top: 0; }
.nat + .nat { margin-left: 0; }

/* A refused score: a brief red outline (and a small shake where motion is
   welcome). The box keeps what it had. */
input.score-reject { outline: 2px solid var(--danger); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) {
  input.score-reject { animation: score-reject 0.28s ease-in-out; }
}
@keyframes score-reject {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
/* Phones stack each match on two lines with the scores on the right, so the
   flag leads the name on both lines, as it does in the tables. Build 1_70:
   the rating token is last on both lines, beside its score, and the
   "your team" marker sits between the name and the token. */
@media (max-width: 560px) {
  .fixture .flag,
  .cup-fixture .flag { order: -1; }
  .fixture .pref-tag,
  .cup-fixture .pref-tag { order: 1; }
  .fixture .seed-dot, .fixture .intl-blank,
  .cup-fixture .seed-dot, .cup-fixture .intl-blank { order: 2; }
}

/* =====================================================================
   Build 1_70 — fixture order and one-line team cells.
   ===================================================================== */

/* Fixture rows, wide screens: Name → Flag → Token → Score on the home side
   and Score → Token → Flag → Name on the away side. The flag sits beside
   the name and the token closest to the score. Markup gives that order;
   these rules only keep the token and flag from shrinking. */
.fixture .flag, .cup-fixture .flag,
.fixture .seed-dot, .cup-fixture .seed-dot,
.cup-fixture .intl-blank { flex: none; }

/* League and group tables: flag, full name and token stay together on one
   line for every team, however long the name. The table grows instead and
   its card scrolls sideways on a narrow screen; row heights stay even. */
table.league tbody td.col-team { white-space: nowrap; }
table.league tbody td.col-team > * { vertical-align: middle; }
table.league tbody td.col-team .team-name { white-space: nowrap; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* A token never makes its row taller than the rows without one. */
table.league tbody td.col-team .clinch,
table.league tbody td.col-team .pref-tag { margin-top: -3px; margin-bottom: -3px; }
/* International group rows on wide screens: the table column grows to the
   table's own full width (names, tokens and form all on show), and the
   fixtures keep at least 440px. Only where the two cannot both fit does the
   table scroll inside its own card. */
@media (min-width: 900px) {
  .intl-split { grid-template-columns: minmax(440px, 1fr) minmax(380px, max-content); }
}

/* =====================================================================
   Build 1_71 — the signed-in account on the private site.
   ===================================================================== */
.acct-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.acct-who { margin: 0; color: var(--chalk); font-size: 14.5px; }
.acct-who strong { font-weight: 600; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--rule-dark); background: rgba(232, 238, 243, 0.08);
  color: var(--chalk); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.acct-btn:hover { background: rgba(232, 238, 243, 0.16); }
.acct-btn:focus-visible { outline: 2px solid var(--floodlight); outline-offset: 2px; }
.footer .acct-local { margin-top: 6px; }
.acct-dialog .dialog { max-width: 520px; }
.acct-dialog .dialog-actions { flex-wrap: wrap; }
/* The owner's access page. */
.owner { padding: 28px 0 40px; }
.owner-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.owner-title { font-size: 40px; margin-bottom: 8px; }
.owner-lede { color: var(--chalk-soft); max-width: 70ch; }
.owner-card { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 20px; margin-top: 18px; }
.owner-card h2 { font-size: 26px; margin-bottom: 12px; }
.owner-card input[type="text"] { width: 100%; max-width: 420px; min-height: 44px; font-size: 16px; }
.owner-row { display: flex; gap: 10px; flex-wrap: wrap; }
.owner-hint { font-size: 14px; color: var(--ink-soft); margin-bottom: 0; }
.owner-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.owner-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.owner-table th, .owner-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; }
.owner-actions { display: flex; gap: 6px; flex-wrap: wrap; white-space: normal; }
.owner-on { color: var(--grass-dark); font-weight: 600; }
.owner-off { color: var(--danger); font-weight: 600; }
.owner .msg { padding: 10px 12px; border-radius: 6px; max-width: 70ch; }
.owner .msg[hidden] { display: none; }
.owner .msg-ok { background: #E1F1E7; color: #145530; }
.owner .msg-bad { background: #F7E3E0; color: #7A2219; }
/* On a phone each account is a small card, so every action stays on screen. */
@media (max-width: 640px) {
  .owner-table thead { position: absolute; left: -9999px; }
  .owner-table, .owner-table tbody, .owner-table tr, .owner-table td { display: block; width: 100%; }
  .owner-table tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .owner-table td { border: 0; padding: 3px 0; white-space: normal; }
  .owner-table td.owner-name { font-size: 18px; font-weight: 600; }
  .owner-table td:nth-child(2)::before { content: 'Role: '; color: var(--ink-soft); }
  .owner-table td:nth-child(3)::before { content: 'Status: '; color: var(--ink-soft); font-weight: 400; }
  .owner-table td:nth-child(4)::before { content: 'Last sign-in: '; color: var(--ink-soft); }
  .owner-table td.owner-actions { display: flex; padding-top: 8px; }
}

/* =====================================================================
   Build 1_72 — the public site: padlocks, the free league, previews, Rules.
   ===================================================================== */
.padlock { width: 0.9em; height: 0.9em; flex: none; vertical-align: -0.08em; margin-right: 0.35em; }
.lock-note { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* A locked card: on show, greyed, and saying why. */
.choice.is-locked { background: #D9DDD6; color: #4B5560; cursor: not-allowed; border: 2px dashed #8A949D; }
.choice.is-locked:hover { transform: none; box-shadow: none; border-color: #8A949D; }
.choice.is-locked .choice-name { display: inline-flex; align-items: center; color: #4B5560; }
.choice.is-locked .choice-note { color: #4B5560; }
.choice.is-locked .lock-note { color: #2D3740; margin-top: 2px; }
.choice-included { cursor: default; border: 2px solid var(--grass); }
.choice-included:hover { transform: none; box-shadow: none; }
.choice-included .choice-go { font-size: 14px; color: var(--grass-dark); font-weight: 600; }
.free-badge {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 9px; border-radius: 999px;
  background: var(--floodlight); color: var(--ink); font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em;
}
.paid-inline { display: inline-flex; align-items: center; color: var(--ink-soft); font-size: 14px; }

/* International: locked modes and Shields. */
.mode-btn.is-locked { background: rgba(255, 255, 255, 0.04); color: #C9D2DA; border-style: dashed; border-color: rgba(255, 255, 255, 0.4); cursor: not-allowed; }
.mode-btn.is-locked:hover { background: rgba(255, 255, 255, 0.04); }
.mode-btn .lock-note { display: inline; font-size: 12px; margin-right: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.shield-btn.is-locked { flex-direction: column; gap: 2px; cursor: not-allowed; }
.shield-btn.is-locked .padlock { margin: 0; }
.shield-btn.is-locked .lock-note { font-size: 12px; font-weight: 600; opacity: 0.95; }
.paid-strip {
  display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.08); color: #FFFFFF; font-size: 15px; line-height: 1.45;
}
.paid-strip .padlock { margin-top: 3px; }

/* The free league: sizes and typed teams. */
.free-size-input {
  width: 64px; min-height: 44px; text-align: center; font-size: 18px; font-weight: 600;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; color: var(--ink);
}
.free-size-row .quick-name { min-width: 0; overflow-wrap: anywhere; }
.free-total { font-size: 16px; margin: 6px 0 14px; }
.free-div { margin-bottom: 16px; }
.free-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 10px; }
.free-head h3 { font-size: 24px; }
.free-count { font-weight: 600; color: var(--zone-playoff-text); }
.free-count.is-full { color: var(--grass-dark); }
.free-slots {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.free-slots li { display: flex; align-items: center; gap: 8px; }
.free-n { flex: none; width: 2.2em; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.free-team { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; }
.free-team.is-duplicate { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(179, 55, 43, 0.25); }
.free-paste { margin-top: 12px; }
.free-paste summary { cursor: pointer; font-weight: 600; color: var(--grass-dark); min-height: 32px; }
.free-paste textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); }

/* The owner's preview: a clear strip across the top of every preview page. */
.preview-banner {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--floodlight); color: var(--ink);
}
.preview-text { margin: 0; font-size: 14.5px; line-height: 1.4; max-width: 70ch; }
.preview-links { display: flex; flex-wrap: wrap; gap: 6px; }
.preview-banner .acct-btn { color: var(--ink); border-color: rgba(22, 34, 46, 0.35); background: rgba(255, 255, 255, 0.55); min-height: 38px; }
.preview-banner .acct-btn.is-on { background: var(--ink); color: #fff; }
.has-preview .topbar { position: relative; }

/* Public footer. */
.footer-links { margin-top: 10px !important; }
.footer-links a { color: var(--chalk-soft); text-decoration: underline; text-underline-offset: 3px; }
.footer [data-part="guest-bar"] { margin-bottom: 10px; }

/* Rules. */
.rules-page { padding-bottom: 30px; }
.rules-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.rules-toc a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  background: rgba(232, 238, 243, 0.08); border: 1px solid var(--rule-dark); color: var(--chalk); text-decoration: none; font-weight: 600; font-size: 14.5px;
}
.rules-sec { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 16px; scroll-margin-top: calc(var(--topbar-h, 64px) + 12px); }
.rules-sec h2 { font-size: 28px; margin-bottom: 10px; }
.rules-sec p, .rules-sec li { font-size: 16px; line-height: 1.6; max-width: 72ch; }
.rules-sec ol, .rules-sec ul { padding-left: 22px; }
.rules-example { background: var(--paper-alt); padding: 10px 14px; border-radius: var(--r-sm); }
.rules-wrap { margin: 12px 0; border: 1px solid var(--rule); }
.rules-table { border-collapse: collapse; width: 100%; font-size: 15px; }
.rules-table caption { caption-side: top; text-align: left; padding: 10px 12px 6px; color: var(--ink-soft); font-size: 14px; }
.rules-table th, .rules-table td { padding: 9px 10px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.rules-table thead th { border-bottom: 2px solid var(--ink); }
.rules-table .seed-dot { margin-right: 4px; }
.free-size-card { padding: 12px 16px; margin-bottom: 12px; }
.free-size-card .quick-row { border: 0; padding: 0; }
.free-meetings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.free-meetings-label { font-weight: 600; font-size: 14.5px; }