/* Immortal XI — v9, the redesign (design/REDESIGN-SPEC.md, design/mockups/).
   One light theme: a pale page, white surfaces, espresso ink, the tangerine
   strip under the header on every screen, square corners, the torn-edge
   primary button and the perspective (TV angle) pitch.

   Every colour is a custom property in :root. The text/button pairing
   ("Espresso + Soft orange") is the --btn-* and --mark-* group: swap those
   four to change it everywhere.

   The old dark theme lives on, unchanged, in card-study.css (the card study
   page, reachable by URL only). */

/* ================================================================ tokens */
:root {
  /* surfaces and ink */
  --page: #C9E4F6;                  /* v9.1: Sky (was #F3F4F6) */
  --surface: #FFFFFF;
  --ink: #2A160C;
  --ink-muted: #6E5E52;             /* 4.7:1 on Sky (v9.1 checked; unchanged) */
  --ink-muted-2: #5E4A3E;
  --accent-ink: #F2A66B;            /* text and icons on dark ink blocks */
  --line: rgba(16, 64, 100, 0.13);  /* v9.1: dividers under headings, borders (was #E2DCD7) */
  --line-light: rgba(16, 64, 100, 0.08);   /* v9.1: dividers between rows (was #F0EBE7) */
  --danger: #C62828;
  --current-nav: #F3EAE2;
  --big-match: #FF8A3D;
  --hero: linear-gradient(100deg, #FF7A30 0%, #FF9D3F 50%, #FFC94A 100%);
  --soft: rgba(237, 245, 251, 0.85); /* quiet boxes inside a panel (v9.1: cool, was #F7F4F1) */

  /* the text/button pairing: Espresso + Soft orange (swap here) */
  --btn-bg: var(--ink);
  --btn-ink: var(--accent-ink);
  --mark-bg: var(--ink);
  --mark-ink: var(--accent-ink);

  /* perks: main, achieved (solid), tint, text on the tint */
  --id: #D9467A;   --id-solid: #C93A6E;   --id-tint: #FBE3EC;   --id-text: #A82A5A;
  --link: #E39B12; --link-solid: #E39B12; --link-tint: #FCEFD6; --link-text: #7A4E00; --link-text-on-white: #9A6400;
  --mid: #7C4DDB;  --mid-solid: #7C4DDB;  --mid-tint: #EDE5FB;  --mid-text: #5A2FB8;

  /* rarity tiers: block, text on the block, row tint */
  --t-squad: #E8E1DA;  --t-squad-ink: #2A160C;  --t-squad-row: #FFFFFF;
  --t-solid: #F6CDA6;  --t-solid-ink: #2A160C;  --t-solid-row: #FFFAF5;
  --t-class: #F2A66B;  --t-class-ink: #2A160C;  --t-class-row: #FFF4EA;
  --t-elite: #E2782C;  --t-elite-ink: #2A160C;  --t-elite-row: #FFEBDA;
  --t-legend: #2A160C; --t-legend-ink: #FFD27A; --t-legend-row: #FFF1D6;

  /* positions: main, light chip, text on the chip */
  --p-gk: #E3A21A;  --p-gk-tint: #FFF2CC;  --p-gk-text: #6B4A00;
  --p-def: #2F6FA8; --p-def-tint: #E1EDF8; --p-def-text: #1C4770;
  --p-mid: #2E9E57; --p-mid-tint: #E2F4E8; --p-mid-text: #1E6B3B;
  --p-w: #E26A1E;   --p-w-tint: #FFE8D6;   --p-w-text: #8A3B00;
  --p-st: #C62828;  --p-st-tint: #FCE3E1;  --p-st-text: #9A1C1C;

  /* results */
  --win: #2E9E57;  --win-ink: #2A160C;   /* dark on the green: 5.0:1 (white was 3.4:1, spec 7) */
  --draw: #BDB6B0; --draw-ink: #2A160C;
  --loss: #C62828; --loss-ink: #FFFFFF;

  /* the lean bar: build-up on the left, direct on the right */
  --lean: linear-gradient(90deg, #2F8FCF 0%, #E9E2DC 50%, #E2442F 100%);

  /* the pitch */
  --grass: repeating-linear-gradient(180deg, #1F9D55 0 34px, #23AA5D 34px 68px);

  --font: 'Outfit', 'Helvetica Neue', Arial, sans-serif;

  /* the torn right edge: 8 teeth (buttons), 12 (the Home tiles), 6 (small) */
  --torn: polygon(0 0, 100% 0%, calc(100% - 9px) 12.5%, 100% 25%, calc(100% - 9px) 37.5%, 100% 50%, calc(100% - 9px) 62.5%, 100% 75%, calc(100% - 9px) 87.5%, 100% 100%, 0 100%);
  --torn-12: polygon(0 0, 100% 0%, calc(100% - 9px) 8.3%, 100% 16.7%, calc(100% - 9px) 25%, 100% 33.3%, calc(100% - 9px) 41.7%, 100% 50%, calc(100% - 9px) 58.3%, 100% 66.7%, calc(100% - 9px) 75%, 100% 83.3%, calc(100% - 9px) 91.7%, 100% 100%, 0 100%);
  --torn-sm: polygon(0 0, 100% 0%, calc(100% - 8px) 16.7%, 100% 33.3%, calc(100% - 8px) 50%, 100% 66.7%, calc(100% - 8px) 83.3%, 100% 100%, 0 100%);
  --torn-row: polygon(0 0, 100% 0%, calc(100% - 10px) 16.7%, 100% 33.3%, calc(100% - 10px) 50%, 100% 66.7%, calc(100% - 10px) 83.3%, 100% 100%, 0 100%);

  --wrap: 1180px;
  --gutter: 40px;

  /* ---- v9.1: the Sky page, glass panels and polished details (one shape
     language: rounded corners on a fixed scale, a little light from above, a
     soft blue-tinted shadow). The values are Vlad's design canvas, rows "Sky
     page background" and "Perk card finishes". */
  --page-0: rgba(201, 228, 246, 0);  /* the page colour, see-through (fades into the page) */
  --glass-bg: radial-gradient(130% 70% at 0% 0%, rgba(255, 255, 255, 0.81) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(250, 253, 255, 0.86) 42%, rgba(232, 244, 252, 0.86) 100%);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-shadow: inset 0 1.5px 0 #FFFFFF, inset 0 0 0 1px rgba(255, 255, 255, 0.48), inset 0 -2px 3px rgba(40, 110, 160, 0.10),
    inset 0 12px 24px -12px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(120, 175, 215, 0.35), 0 1px 2px rgba(16, 64, 100, 0.10),
    0 14px 32px -10px rgba(16, 64, 100, 0.30);
  --glass-blur: blur(18px) saturate(1.6);
  --div-row: rgba(16, 64, 100, 0.08);    /* dividers inside panels: rows */
  --div-head: rgba(16, 64, 100, 0.13);   /* dividers inside panels: under headings */

  /* the radius scale */
  --r-panel: 20px;      /* glass panels */
  --r-perk: 16px;       /* Team perks cards */
  --r-award: 14px;      /* award icon tiles (result awards, the trophy cabinet) */
  --r-btn: 12px;        /* secondary and destructive buttons; primary torn buttons' left corners */
  --r-logo: 9px;        /* the logo mark */
  --r-shape: 8px;       /* the formation box */
  --r-chip: 7px;        /* fixture result chips */
  --r-tile: 6px;        /* player cards on every pitch */
  --r-tile-in: 4px;     /* a player card inside the 2px flowing ring */
  --r-cell: 4px;        /* form strip cells, club swatches */
  --r-bar: 3px;         /* highlight colour bars */
  --r-pill: 999px;      /* record pills, filters, bonus tags, small badges */
  /* v9.2: the corners of something flush inside a clipping box (the box's
     radius less its border), and the inset focus ring's offset (D180) */
  --r-in-btn: calc(var(--r-btn) - 1.5px);     /* inside a 1.5px-bordered control (Home's segmented control) */
  --r-in-panel: calc(var(--r-panel) - 1px);   /* inside a glass panel's 1px edge */
  --focus-in: -6px;                           /* a 3px ring 3px inside the edge */
  --focus-row: -4px;                          /* a 3px ring 1px inside a full-width row's edge */
  /* v9.2: the offer's solid tags: a 1px white edge (holds on any tier tint) and a soft drop (D176) */
  --tag-edge: inset 0 0 0 1px #FFFFFF;
  --tag-shadow: 0 1px 2px rgba(16, 40, 60, 0.18);
  /* v9.2: the offer's rows inside their panel (D175): flat cards with a soft
     shadow lighter than the panel's, and the fade under the pinned Pick
     (the panel's own bottom colour, see-through to solid) */
  --row-shadow: 0 1px 2px rgba(16, 64, 100, 0.08), 0 3px 8px -4px rgba(16, 64, 100, 0.16);
  --panel-fade: linear-gradient(180deg, rgba(236, 246, 252, 0), rgba(236, 246, 252, 0.96) 30%);
  /* v9.2: the draft screens fill the window (D181); the heights around each
     pitch, so its height is the window's less them (header 68, strip 80 or
     72, the screen's padding, the caption) */
  --fill-chrome-0: 248px;   /* the board: 68 + 80 + 28 + 14 + 22 (caption) + 36 */
  --fill-chrome: var(--fill-chrome-0);
  --fill-side: 396px;       /* the board's side column (360) and gap (36) */
  --offer-chrome: 216px;    /* the offer: 68 + 72 + 20 + 12 + 20 (caption) + 24 */
  --offer-side: 692px;      /* the offer's panel (664) and gap (28) */
  --offer-panel-w: 664px;
  --offer-rows-h: 780px;    /* the panel's height at a desktop: five rows and Pick */
  --sys-chrome: 451px;      /* the system screen: 68 + 125 (strip) + 28 + 41 + 54 + 23 + 76 + 36 */
  /* v9.2 (D182): each pitch's v9.1 width at the same window, the least it may
     be: v9.1's board was its 1100px content less the 396px side column, the
     offer's pitch column 500px, the system screen's view 1120 less the list */
  --v91-board: min(704px, 100vw - 476px);
  --v91-offer: 500px;
  --v91-sys: min(780px, 100vw - 420px);

  /* light and depth */
  --gloss-chip: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 60%);
  --chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(16, 40, 60, 0.18);
  --gloss-award: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 60%);
  --award-shadow: inset 0 0 0 1px rgba(42, 22, 12, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px -1px rgba(16, 64, 100, 0.18);
  --btn2-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72));
  --btn2-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(16, 64, 100, 0.12), 0 4px 10px -4px rgba(16, 64, 100, 0.25);
  --btn1-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  --pressed: #FFFFFF;                   /* a pressed toggle: white, a 2px ink border and an inset ink ring */
  --pressed-ring: inset 0 0 0 1px var(--ink);
  --header-bg: rgba(255, 255, 255, 0.82);
  --header-edge: 0 1px 0 rgba(120, 175, 215, 0.45), 0 6px 18px -10px rgba(16, 64, 100, 0.25);
  --perk-shadow: 0 1px 2px rgba(16, 64, 100, 0.10), 0 10px 24px -10px rgba(16, 64, 100, 0.25);

  /* perk card finishes (the tiles on every pitch): identity, the complete
     midfield, both (the flowing ring); the club-link foil's shine */
  --halo-id: 0 0 0 2px #F5A3C2, 0 0 16px 5px rgba(217, 70, 122, 0.85);
  --halo-mf: 0 0 0 2px #B79BF5, 0 0 16px 5px rgba(124, 77, 219, 0.85);
  --ring-flow: linear-gradient(110deg, #F5A3C2 0%, #B79BF5 25%, #F5A3C2 50%, #B79BF5 75%, #F5A3C2 100%);
  --halo-both: -7px -5px 16px 3px rgba(217, 70, 122, 0.8), 7px 5px 16px 3px rgba(124, 77, 219, 0.85);
  --shine: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
}
@media (max-width: 899px) { :root { --gutter: 24px; } }
@media (max-width: 559px) { :root { --gutter: 16px; } }

/* ================================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--page); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sr-only, .pb-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.muted { color: var(--ink-muted); }

/* ================================================================ buttons */
/* the primary: solid ink, accent label, left corners 6px, a torn right edge.
   A clip-path also clips an outline, so focus is an inset ring plus an underline. */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; text-decoration: none;
  background: var(--btn-bg); color: var(--btn-ink);
  font-weight: 800; font-size: 19px; line-height: 1.15;
  padding: 14px 44px 14px 28px; min-height: 48px;
  border-radius: var(--r-btn) 0 0 var(--r-btn); clip-path: var(--torn);
  box-shadow: var(--btn1-shadow);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn-primary:hover { filter: brightness(1.25); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--btn-ink), var(--btn1-shadow); text-decoration: underline; text-underline-offset: 3px; }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { cursor: default; filter: none; background: #8A7F76; color: #F3EEEA; transform: none; }
.btn-primary.btn-sm { font-size: 15px; font-weight: 700; padding: 11px 26px 11px 20px; min-height: 44px; clip-path: var(--torn-sm); }

/* the secondary ("Reroll" style; v9.1: rounded and lit): a 1.5px ink border,
   a white gradient, a soft shadow */
.btn-secondary, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--btn2-bg); color: var(--ink); border: 1.5px solid var(--ink);
  font-weight: 700; font-size: 15px; line-height: 1.15; text-decoration: none;
  padding: 7px 16px; min-height: 44px; cursor: pointer; border-radius: var(--r-btn);
  box-shadow: var(--btn2-shadow);
}
.btn-secondary:hover { background: linear-gradient(180deg, #FFFFFF, rgba(255, 255, 255, 0.86)); }
.btn-secondary:disabled, .btn-secondary[aria-disabled="true"] { cursor: default; opacity: 0.45; background: var(--btn2-bg); }
/* a pressed toggle: white, a 2px ink border and an inset ink ring (never a dark fill, v9.1) */
.btn-secondary.is-on, .btn-secondary[aria-pressed="true"] { background: var(--pressed); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--pressed-ring), var(--btn2-shadow); }
/* the destructive: the secondary in red */
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: linear-gradient(180deg, #FFFFFF, rgba(255, 240, 240, 0.9)); }
.btn-danger:focus-visible { outline-color: var(--danger); }
.btn-sm { font-size: 14px; padding: 8px 14px; }

/* the "?" and the square close button */
.btn-q {
  width: 32px; height: 32px; flex: none; padding: 0; cursor: pointer; border-radius: var(--r-pill);
  border: 1.5px solid rgba(16, 64, 100, 0.28); background: var(--btn2-bg); color: var(--ink-muted-2); box-shadow: var(--btn2-shadow);
  font-weight: 700; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.btn-q:hover { border-color: var(--ink); color: var(--ink); }
.btn-x {
  width: 44px; height: 44px; flex: none; padding: 0; cursor: pointer; border-radius: var(--r-btn);
  border: 1.5px solid var(--div-head); background: var(--btn2-bg); color: var(--ink); box-shadow: var(--btn2-shadow);
  font-size: 20px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.btn-x:hover { border-color: var(--ink); }
.btn-x svg { width: 18px; height: 18px; }

/* a text link styled as one (Details) */
.link-btn {
  background: none; border: none; padding: 10px 4px; cursor: pointer; color: inherit;
  font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; min-height: 44px;
}

/* ================================================================ the header */
.xi-bar { background: var(--header-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--header-edge); position: relative; z-index: 20; flex: none; }
.xi-bar-in {
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; height: 68px;
  padding: 0 var(--gutter); display: flex; align-items: center; gap: 16px;
}
.xi-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; min-width: 44px; }
.xi-mark {
  width: 34px; height: 34px; flex: none; background: var(--mark-bg); color: var(--mark-ink); border-radius: var(--r-logo); box-shadow: var(--btn1-shadow);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; letter-spacing: 0;
}
.xi-word { font-weight: 800; font-size: 21px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-links { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sb-link {
  text-decoration: none; font-weight: 600; font-size: 16px; padding: 11px 14px; min-height: 44px;
  display: inline-flex; align-items: center; color: var(--ink); border-radius: var(--r-btn);
}
.sb-link:hover { background: var(--current-nav); }
.sb-link[aria-current="page"] { background: var(--current-nav); font-weight: 800; }
.sb-play { margin-left: 6px; }
.fb-status { margin-left: auto; min-width: 0; }
.fb-status:empty { display: none; }
.fb-status .fb-item { display: none; }
.focus-bar .fb-restart, .focus-bar .fb-leave { margin-left: auto; flex: none; }
.focus-bar .fb-leave.is-done { color: var(--ink); border-color: var(--ink); }
@media (max-width: 559px) {
  .xi-bar-in { height: 60px; gap: 8px; }
  .xi-mark { width: 30px; height: 30px; font-size: 13px; }
  .xi-word { font-size: 18px; }
  .sb-links { gap: 2px; }
  .sb-link { font-size: 15px; padding: 10px 8px; }
  .sb-play.btn-sm { padding: 10px 20px 10px 14px; margin-left: 2px; }
}
@media (max-width: 400px) {
  .site-bar .xi-word { display: none; }
}

/* ================================================================ the tangerine strip */
.strip { background: var(--hero); color: var(--ink); flex: none; }
.strip-in {
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto;
  padding: 26px var(--gutter);
}
.strip-title { font-weight: 800; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; }
.strip-sub { margin-top: 6px; font-size: 17px; font-weight: 500; }
@media (max-width: 559px) {
  .strip-in { padding: 18px var(--gutter); }
  .strip-title { font-size: 30px; }
  .strip-sub { font-size: 15px; }
}

/* ================================================================ the footer (Home) */
.site-foot { flex: none; }
.site-foot-in {
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto;
  padding: 28px var(--gutter) 32px; font-size: 13px; line-height: 1.7; color: var(--ink-muted);
}

/* ================================================================ chips, tags and blocks */
/* a framed section box */
/* v9.1: every white panel is glass: a light gradient, a white edge, light from
   above and a soft blue shadow, blurred over what is behind it; 20px corners,
   contents clipped to them */
.panel, .glass {
  background: var(--glass-bg); border: 1px solid var(--glass-edge); border-radius: var(--r-panel);
  box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  overflow: hidden;
}
.h-sec { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.h-sub { font-size: 18px; font-weight: 800; }

/* the result chips (W / D / L): a letter, so colour is never the only signal */
.res { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; line-height: 1; min-width: 28px; height: 22px; padding: 0 4px; border-radius: var(--r-chip); box-shadow: var(--chip-shadow); }
.res.r-w { background: var(--gloss-chip), var(--win); color: var(--win-ink); }
.res.r-d { background: var(--gloss-chip), var(--draw); color: var(--draw-ink); }
.res.r-l { background: var(--gloss-chip), var(--loss); color: var(--loss-ink); }
.rec { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rec-chip { font-size: 13px; font-weight: 800; padding: 3px 10px; line-height: 1.2; white-space: nowrap; border-radius: var(--r-pill); box-shadow: var(--chip-shadow); }
.rec-chip.r-w { background: var(--gloss-chip), var(--win); color: var(--win-ink); }
.rec-chip.r-d { background: var(--gloss-chip), var(--draw); color: var(--draw-ink); }
.rec-chip.r-l { background: var(--gloss-chip), var(--loss); color: var(--loss-ink); }
.rec-sm .rec-chip { font-size: 11px; padding: 2px 8px; }

/* the big-match mark: an orange circle with a black "!" */
.bang {
  width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--big-match); color: #111111;
  font-size: 11px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}

/* the rarity tier block: number + tier word */
.tier-block {
  width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 0 6px; position: relative; line-height: 1;
  border-radius: var(--r-btn); box-shadow: var(--chip-shadow); background-image: var(--gloss-chip);
}
.tier-block .tb-n { font-weight: 800; font-size: 26px; line-height: 1; }
.tier-block .tb-t { font-size: 11px; font-weight: 700; margin-top: 3px; }
.tier-block .award-mark { position: absolute; top: 3px; right: 3px; }
.t-squad { background: var(--t-squad); color: var(--t-squad-ink); }
.t-solid { background: var(--t-solid); color: var(--t-solid-ink); }
.t-class { background: var(--t-class); color: var(--t-class-ink); }
.t-elite { background: var(--t-elite); color: var(--t-elite-ink); }
.t-legend { background: var(--t-legend); color: var(--t-legend-ink); }
.row-t-squad { background-color: var(--t-squad-row); }
.row-t-solid { background-color: var(--t-solid-row); }
.row-t-class { background-color: var(--t-class-row); }
.row-t-elite { background-color: var(--t-elite-row); }
.row-t-legend { background-color: var(--t-legend-row); }

/* the award star (D64): beside a rating, on the tier block */
.award-mark { display: inline-flex; align-items: center; gap: 1px; color: inherit; background: none; border: none; padding: 0; cursor: help; }
.award-mark svg { width: 12px; height: 12px; }
.award-mark .award-n { font-size: 9px; font-weight: 800; }
button.award-mark { min-width: 20px; min-height: 20px; justify-content: center; }

/* small pills: position (ink tint), midfield profile (violet), perk labels */
.pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 9px; line-height: 1.25; white-space: nowrap; background: #F3EEEA; color: var(--ink); border: none; border-radius: var(--r-pill); }
.pill-pf { background: var(--mid-tint); color: var(--mid-text); }
.pill-pf-line { background: transparent; color: var(--mid-text); box-shadow: inset 0 0 0 1.5px var(--mid); }
/* the solid perk tag (Next picks, the fixture's perk tags when achieved, the
   offer's labels). v9.2 (D182): flat, with a 1px white edge, everywhere: the
   gloss lightened the rose and the violet under the white letters to about
   3.6:1; flat, the text is 4.9:1, 7.4:1 and 5.3:1 across the whole tag */
.perk-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 2px 9px; line-height: 1.3; white-space: nowrap; border-radius: var(--r-pill); box-shadow: var(--tag-edge), var(--tag-shadow); background-image: none; }
.perk-tag.is-tint { box-shadow: none; background-image: none; }
.perk-tag.k-identity { background: var(--id-solid); color: #FFFFFF; }
.perk-tag.k-link { background: var(--link-solid); color: var(--ink); }
.perk-tag.k-midfield { background: var(--mid-solid); color: #FFFFFF; }
.perk-tag.is-tint.k-identity { background: var(--id-tint); color: var(--id-text); }
.perk-tag.is-tint.k-link { background: var(--link-tint); color: var(--link-text); }
.perk-tag.is-tint.k-midfield { background: var(--mid-tint); color: var(--mid-text); }
/* v9.2 (D176): the offer's tags ("Keeps identity", "Links with …", "Completes
   midfield") are the solid tags (flat, the white edge, as every solid perk
   tag since D182) at v9's tinted label's size, so no row changes height */
.perk-tag.is-label { padding: 3px 9px; line-height: 1.25; }

/* position chips (Profile, Rules) */
.pos-tag { font-size: 11px; font-weight: 800; padding: 3px 8px; color: #FFFFFF; line-height: 1.2; border-radius: var(--r-pill); box-shadow: var(--chip-shadow); background-image: var(--gloss-chip); }
.pos-GK { background: var(--p-gk); } .pos-DEF { background: var(--p-def); } .pos-MID { background: var(--p-mid); }
.pos-W { background: var(--p-w); } .pos-ST { background: var(--p-st); }
/* GK's yellow and W's orange need dark text for 4.5:1 */
.pos-tag.pos-GK, .pos-tag.pos-W, .pos-tag.pos-MID { color: var(--ink); }   /* MID's green: 5.0:1 dark, 3.4:1 white */

/* ================================================================ the lean bar */
.lean-bar { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lean-col { display: inline-flex; flex-direction: column; gap: 3px; }
.lean-track { position: relative; width: var(--lean-w, 150px); height: 8px; background: var(--lean); border-radius: var(--r-pill); }
.lean-diamond {
  position: absolute; top: 50%; width: 12px; height: 12px; background: #FFFFFF; border: 2.5px solid var(--ink); border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.lean-ends { display: flex; justify-content: space-between; width: var(--lean-w, 150px); font-size: 10px; font-weight: 700; color: var(--ink-muted-2); }
.lean-word { font-size: 13px; font-weight: 700; }
.lean-bar.is-under .lean-word { font-size: 12px; }
.lean-none { font-size: 13px; color: var(--ink-muted); }

/* the explanation bubble (explain.js, D144) */
.xm { cursor: help; }
.xtip {
  position: fixed; z-index: 100; max-width: min(320px, calc(100vw - 16px));
  background: var(--ink); color: #FFFFFF; font-size: 13px; line-height: 1.45; font-weight: 500;
  padding: 9px 12px; box-shadow: 0 8px 24px rgba(16, 40, 60, 0.3); pointer-events: none; border-radius: var(--r-btn);
}

/* ================================================================ the perspective pitch */
/* board-view.js pitchMarkings: the grass is a trapezoid (clip-path), its white
   lines an SVG on the same trapezoid; tiles sit above it, placed in % and
   pulled inward and scaled by depth (pitch-layout.js persp). */
.ppitch { position: relative; container-type: inline-size; filter: drop-shadow(0 14px 18px rgba(60, 20, 0, 0.2)); }
.pp-grass { position: absolute; inset: 0; background: var(--grass); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); overflow: hidden; }
.ppitch.pp-10 .pp-grass { clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.pp-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-lines g { fill: none; stroke: #FFFFFF; stroke-opacity: 0.8; stroke-width: 0.45; }
.slot-pos {
  position: absolute; z-index: 1;
  transform: translate(-50%, -50%) scale(var(--s, 1));
}

/* ================================================================ the player tile */
/* A rating block (ink, accent number) above a white name label. Open: dashed
   white outline, translucent, "+" and the position. Being filled: an orange
   block with the position, "Picking".

   v9.1: rounded (6px; 4px inside the flowing ring) and bigger: 92px wide at
   most, rating 22px, name 13px, everything in proportion to --tile-w, so a
   pitch too small for 92px gets the largest tile that fits (phones; logged
   in design/V91-LOG.md). The depth scaling is the pitch's (placeOn, --s). */
.slot {
  --tile-w: clamp(54px, 15cqw, 92px);
  position: relative; width: var(--tile-w); display: flex; flex-direction: column; align-items: stretch;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  border-radius: var(--r-tile); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); background: transparent;
  --tile-r: var(--r-tile);
}
.slot-top {
  position: relative; overflow: hidden; background: var(--ink); color: var(--accent-ink); border-radius: var(--tile-r) var(--tile-r) 0 0;
  text-align: center; font-weight: 800; font-size: max(13px, calc(var(--tile-w) * 0.2391)); line-height: 1;
  padding: calc(var(--tile-w) * 0.087) 0 calc(var(--tile-w) * 0.087);
}
.slot-rating { display: block; position: relative; z-index: 1; }
.slot-name {
  background: #FFFFFF; color: var(--ink); text-align: center; font-weight: 700; font-size: max(9px, calc(var(--tile-w) * 0.1413));
  padding: 3px 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
  border-radius: 0 0 var(--tile-r) var(--tile-r);
}
/* the season under the name (an opened fixture's pitches): 11px at 92px.
   v9.2 (D178): one white label holds both lines (.slot-label), the season
   lighter and set tight under the name, with no line between them; the
   label's height is v9.1's to the pixel (the 1px and the season's leading
   that used to sit between the lines now sit under the season) */
.slot-label { background: #FFFFFF; border-radius: 0 0 var(--tile-r) var(--tile-r); overflow: hidden; }
.slot-label .slot-name { background: none; border-radius: 0; padding-bottom: 0; }
.slot-season {
  text-align: center; font-size: max(8px, calc(var(--tile-w) * 0.1196)); font-weight: 600; color: var(--ink-muted);
  line-height: 1; padding: 0 2px calc(5px + 0.15em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-role { display: none; }
.slot.open { box-shadow: none; }
.slot.open .slot-top { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; border: 1.5px dashed rgba(255, 255, 255, 0.9); border-bottom: none; font-size: max(15px, calc(var(--tile-w) * 0.26)); }
.slot.open .slot-name { background: rgba(255, 255, 255, 0.8); }
.slot.is-active { box-shadow: 0 0 0 6px rgba(255, 138, 61, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3); outline: 2px solid #FFFFFF; outline-offset: 0; }
.slot.is-active .slot-top { background: var(--big-match); color: var(--ink); border: none; font-size: max(12px, calc(var(--tile-w) * 0.2)); }
.slot.is-active .slot-name { background: #FFFFFF; }
.slot:hover { filter: brightness(1.06); }
/* touch: the tap area reaches past the tile (44px targets, spec section 7) */
@media (pointer: coarse) { .slot::after { content: ""; position: absolute; inset: -6px -5px; } }
.slot:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink); }

/* ---- v9.1: perk card finishes. Each perk owns one part of the card, so they
   stack (board-view.js tileMarks, slotTile):
     club link        the rating block becomes foil in his club's colours
                      (club-colours.js: four stops of the main colour, the
                      number in the club's ink, a 4px band in its second
                      colour), a shine sweeping across every few seconds
     identity         a rose halo, on all eleven
     complete midfield  a violet halo, on the three who complete the trio
     both halos       one flowing rose-and-violet ring (never two rings)
   Reduced motion: no shine, no flowing; the colours and halos stay. */
.slot.fin-link .slot-top {
  background: linear-gradient(135deg, var(--foil-1) 0%, var(--foil-2) 38%, var(--foil-3) 70%, var(--foil-4) 100%);
  color: var(--foil-num);
}
.slot.fin-link .slot-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--foil-band); }
.slot.fin-link .slot-top::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--shine); background-size: 250% 100%; background-repeat: no-repeat; background-position: 150% 0;
  animation: foilShine 4.5s ease-in-out infinite;
}
@keyframes foilShine { 0%, 55% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
/* the "just linked" moment (D50): the new link's foil shines at once */
@keyframes foilShineNow { from { background-position: 150% 0; } to { background-position: -60% 0; } }
.slot.just-linked.fin-link .slot-top::after { animation: foilShineNow 0.9s ease-out 1, foilShine 4.5s ease-in-out 0.9s infinite; }
.slot.fin-id { box-shadow: var(--halo-id); }
.slot.fin-mf { box-shadow: var(--halo-mf); }
.slot.fin-id.fin-mf {
  --tile-r: var(--r-tile-in); padding: 2px;
  background: var(--ring-flow); background-size: 300% 100%; background-position: 0% 0;
  box-shadow: var(--halo-both); animation: ringFlow 6s linear infinite;
}
@keyframes ringFlow { from { background-position: 0% 0; } to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) {
  .slot.fin-link .slot-top::after { display: none; animation: none; }
  .slot.fin-id.fin-mf { animation: none; }
}
/* the goal and assist corner badges (an open fixture) */
.tile-badge {
  position: absolute; right: -7px; top: -7px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px;
  background: #FFFFFF; color: var(--ink); font-size: 9px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 0 0 1.5px var(--ink); z-index: 2;
}
.tile-badge.is-a { right: auto; left: -7px; }
.tile-badge svg { width: 9px; height: 9px; }
/* just placed: a brief settle */
@keyframes tileIn { from { transform: scale(0.82); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.slot.just-filled { animation: tileIn 0.32s ease-out; }
.slot.just-filled.fin-id.fin-mf { animation: tileIn 0.32s ease-out, ringFlow 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .slot.just-filled, .slot.just-filled.fin-id.fin-mf { animation: none; } }

/* ================================================================ notes */
.reset-note { background: var(--header-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--header-edge); position: relative; z-index: 19; }
.reset-note-in { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 12px var(--gutter); display: flex; gap: 16px; align-items: center; }
.reset-note-text { flex: 1; font-size: 14px; }

/* ================================================================ Home (01-home) */
.home-hero .home-in {
  max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; padding: 56px var(--gutter) 64px;
  display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
}
.home-text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.home-h1 { font-weight: 800; font-size: clamp(36px, 4.8vw, 58px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.home-ctas { display: flex; flex-direction: column; gap: 12px; }
.home-small { font-size: 14px; font-weight: 500; }
.lp2-tiles { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.lp2-tile {
  text-decoration: none; height: 104px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  padding: 16px 28px 16px 18px; border-radius: var(--r-btn) 0 0 var(--r-btn); clip-path: var(--torn-12); box-shadow: var(--btn1-shadow);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.lp2-play { width: 206px; background: var(--btn-bg); color: var(--btn-ink); }
.lp2-rules { width: 158px; background: var(--glass-bg); color: var(--ink); box-shadow: inset 0 1.5px 0 #FFFFFF, inset 0 -2px 3px rgba(40, 110, 160, 0.10); }
.lp2-t-role { font-weight: 600; font-size: 14px; }
.lp2-play .lp2-t-role { color: var(--btn-ink); }
.lp2-rules .lp2-t-role { color: var(--ink-muted-2); }
.lp2-t-name { font-weight: 800; font-size: 22px; line-height: 1.05; }
.lp2-rules .lp2-t-name { font-size: 18px; }
.lp2-tile:hover { transform: translateY(-2px); filter: brightness(1.08); }
.lp2-tile:active { transform: translateY(-1px); }
.lp2-tile:focus-visible { outline: none; box-shadow: inset 0 0 0 3px currentColor, var(--btn1-shadow); }
.lp2-tile:focus-visible .lp2-t-name { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .lp2-tile { transition: none; } .lp2-tile:hover { transform: none; } }

/* the moving preview: no card around it; a small segmented control, a pause button */
.lp2-loop { flex: 1 1 420px; min-width: 0; }
.hl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.hl-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hl-rail { display: inline-flex; border: 1.5px solid var(--ink); border-radius: var(--r-btn); overflow: hidden; background: var(--btn2-bg); box-shadow: var(--btn2-shadow); }
.hl-chip {
  border: none; background: transparent; color: var(--ink); cursor: pointer;
  font-weight: 700; font-size: 13px; padding: 0 12px; min-height: 40px;
}
.hl-chip + .hl-chip { border-left: 1.5px solid var(--ink); }
.hl-chip.is-on { background: var(--pressed); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px var(--ink); }
/* v9.2 (D180): focus is a ring drawn inside the button (an outline with a
   negative offset, which follows the button's own corners), and the end
   buttons take the rail's rounded corners, so the rail's clipping never cuts
   the ring; keyboard only (:focus-visible), never after a click or a tap */
.hl-chip:first-child { border-radius: var(--r-in-btn) 0 0 var(--r-in-btn); }
.hl-chip:last-child { border-radius: 0 var(--r-in-btn) var(--r-in-btn) 0; }
.hl-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: var(--focus-in); }
.hl-meta { display: inline-flex; gap: 12px; margin-left: auto; font-size: 14px; font-weight: 700; white-space: nowrap; }
.hl-pause {
  width: 44px; height: 44px; flex: none; border: 1.5px solid var(--ink); background: var(--btn2-bg); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--r-btn); box-shadow: var(--btn2-shadow);
}
.hl-pause:hover { background: #FFFFFF; }
.hl-frame { position: relative; overflow: hidden; }
.hl-stage { position: absolute; top: 0; left: 0; width: 520px; height: 420px; transform-origin: 0 0; }
.hl-act { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; }
.hl-act.is-on { opacity: 1; }
.hl-pitch { position: absolute; inset: 0 0 20px; }
.hl-panel { background: var(--glass-bg); border: 1px solid var(--glass-edge); border-radius: var(--r-panel); box-shadow: var(--glass-shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.hl-label { font-size: 13px; font-weight: 700; color: var(--ink-muted-2); }
.hl-s-head { display: flex; justify-content: space-between; }
.hl-s-k { display: flex; flex-direction: column; }
.hl-s-k.is-right { text-align: right; }
.hl-s-md, .hl-s-pos { font-size: 28px; font-weight: 800; line-height: 1.1; }
.hl-of { font-size: 15px; font-weight: 600; color: var(--ink-muted-2); }
.hl-chart { flex: 1; min-height: 0; }
.hl-chart .pbc-plot { height: 210px; }
.hl-news { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.hl-news-md { flex: none; font-size: 11px; font-weight: 800; padding: 2px 8px; background: var(--ink); color: #FFFFFF; border-radius: var(--r-pill); }
.hl-fin-row { display: flex; align-items: baseline; gap: 14px; }
.hl-fin { font-size: 64px; font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; }
.hl-pts { font-size: 20px; font-weight: 800; }
.hl-sub { font-size: 16px; font-weight: 700; line-height: 1.3; }
.hl-proj { font-size: 14px; color: var(--ink-muted-2); }
.hl-awards { display: flex; flex-direction: column; border-top: 1px solid var(--div-head); margin-top: 4px; }
.hl-awards .aw-row { padding: 8px 0; }
.hl-new { animation: tileIn 0.32s ease-out; }
@media (prefers-reduced-motion: reduce) { .hl-act { transition: none; } .hl-new { animation: none; } }
/* v9.1 (fix 1): on a desktop Home fills the screen between the header and
   the footer, and the moving preview grows to fill the space beside the
   tiles (hero-loop.js fit: as large as the width and height allow), so no
   band of empty page is left under it */
@media (min-width: 900px) {
  .is-landing .shell-main { display: flex; flex-direction: column; }
  .is-landing .home-hero { flex: 1 0 auto; display: flex; }
  .home-hero .home-in { flex: 1; max-width: calc(1280px + 2 * var(--gutter)); padding: 32px var(--gutter) 36px; align-items: stretch; flex-wrap: nowrap; gap: 48px; }
  .home-text { flex: 0 1 440px; justify-content: center; }
  .lp2-loop { flex: 1 1 560px; display: flex; flex-direction: column; min-height: 0; }
  .lp2-loop .hl { flex: 1; min-height: 0; }
  .lp2-loop .hl-frame { flex: 1 1 0; min-height: 300px; }
}
@media (max-width: 899px) {
  .home-hero .home-in { padding: 36px var(--gutter) 40px; gap: 32px; }
}
@media (max-width: 559px) {
  .home-text { gap: 22px; }
  .lp2-tiles { gap: 10px; flex-wrap: nowrap; }
  .lp2-tile { height: 92px; padding: 14px 22px 14px 14px; }
  .lp2-play { width: auto; flex: 1.3 1 0; }
  .lp2-rules { width: auto; flex: 1 1 0; }
  .lp2-t-name { font-size: 19px; }
  .lp2-rules .lp2-t-name { font-size: 16px; }
  .hl-meta { margin-left: 0; width: 100%; order: 3; }
}

/* ================================================================ award rows (award-view.js) */
.aw-row { display: flex; gap: 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--div-row); }
.aw-row:last-child { border-bottom: none; }
.aw-icon { width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--gloss-award), #F3EEEA; border-radius: var(--r-award); box-shadow: var(--award-shadow); }
.aw-icon.is-gold { background: var(--gloss-award), #FFF1C9; }
.aw-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aw-label { font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.aw-label .aw-q { width: 20px; height: 20px; font-size: 11px; border-width: 1px; margin-left: 6px; vertical-align: middle; box-shadow: none; }
.aw-who { font-size: 15px; font-weight: 800; line-height: 1.25; }
.aw-note { font-size: 12px; color: var(--ink-muted); }
.rv-aw-go { align-self: flex-start; margin-top: 6px; }
.aw-value { font-size: 24px; font-weight: 800; line-height: 1; white-space: nowrap; }
.aw-row.is-yours .aw-label::after { content: "Your XI"; margin-left: 8px; background: var(--ink); color: #FFFFFF; padding: 1px 8px; font-size: 11px; border-radius: var(--r-pill); }

/* ================================================================ the position chart (playback, result, preview) */
/* HTML marks over one SVG line, in % of the plot (playback-view.js positionChart) */
.pbk-chart { margin: 0; }
.pbc-head { text-align: center; margin-bottom: 8px; }
.pbc-head .pb-label { font-size: 18px; font-weight: 800; color: var(--ink); }
.pbc-head .pb-label:empty { display: none; }
.pbc-legend { display: none; }
.pbc-plot { position: relative; height: 270px; margin: 0 6px 24px 34px; }
.pbc-zone { position: absolute; left: 0; right: 0; }
.pbc-zone.z-champ { background: #FFF1D6; }
.pbc-zone.z-top { background: #F6F1EC; }
.pbc-zone.z-rel { background: #FBE4E1; }
.pbc-zlabel { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); font-size: 10px; font-weight: 700; white-space: nowrap; line-height: 1; }
.pbc-zlabel[style*="left"] { right: auto; }
.z-champ .pbc-zlabel { color: #8A5A00; }
.z-top .pbc-zlabel { color: #6E5E52; }
.z-rel .pbc-zlabel { color: var(--danger); }
.pbc-zlabel.is-chip { background: var(--surface); padding: 1px 4px; z-index: 3; }
.pbc-y { position: absolute; left: -34px; transform: translateY(-50%); font-size: 10px; color: #6E5E52; line-height: 1; }
.pbc-x { position: absolute; top: calc(100% + 7px); transform: translateX(-50%); font-size: 10px; color: #6E5E52; white-space: nowrap; line-height: 1; }
.pbc-x:first-of-type { transform: none; }
.pbc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.pbc-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pbc-tick { display: none; }
.pbc-dot {
  position: absolute; z-index: 3; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--big-match); color: #111111; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;
}
.pbc-head-dot { position: absolute; z-index: 4; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.pbc-pill {
  position: absolute; z-index: 5; transform: translate(12px, -50%); background: var(--ink); color: #FFFFFF;
  font-size: 12px; font-weight: 800; padding: 3px 8px; white-space: nowrap; line-height: 1.2;
}
.pbc-pill.is-left { transform: translate(calc(-100% - 12px), -50%); }
/* VLA-46: on phones a bubble drawn left of the head sat on the last matches'
   dots; there it moves off the line, above it unless the line came in from
   above (playback-view.js sets is-up) */
@media (max-width: 899px) {
  .pbc-pill { font-size: 11px; padding: 2px 6px; }
  .pbc-pill.is-left { transform: translate(calc(-100% + 8px), calc(-100% - 9px)); }
  .pbc-pill.is-left:not(.is-up) { transform: translate(calc(-100% + 8px), 9px); }
}
.pbc-bigtag {
  position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 12px)); background: var(--big-match); color: #111111;
  font-size: 11px; font-weight: 800; padding: 2px 6px; white-space: nowrap; line-height: 1.2;
}
.pbc-bigtag.is-down { transform: translate(-50%, 12px); }
.pbc-bigtag.is-left { transform: translate(calc(-100% + 8px), calc(-100% - 12px)); }
.pbc-bigtag.is-left.is-down { transform: translate(calc(-100% + 8px), 12px); }
.pbc-pred { position: absolute; right: -14px; width: 6px; border: 2px solid var(--ink); border-left: none; }
.pbc-pred-l { position: absolute; right: -72px; transform: translateY(-50%); display: flex; flex-direction: column; font-size: 10px; font-weight: 700; line-height: 1.2; }

/* ================================================================ Play: the strip rows */
.draft-main { display: flex; flex-direction: column; }
.strip-row-wrap .strip-in { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; }
.strip-head { display: flex; align-items: center; gap: 14px; }
.strip-title-sm { font-size: 30px; line-height: 1; }
.strip-gap { flex: 1; }
.shape-box { display: inline-flex; align-items: center; height: 30px; font-weight: 700; font-size: 16px; line-height: 1; padding: 0 10px; border: 2px solid var(--ink); white-space: nowrap; border-radius: var(--r-shape); background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.prog { display: flex; align-items: center; gap: 12px; }
.prog-n { font-weight: 700; font-size: 16px; white-space: nowrap; }
.prog-shirts { display: flex; gap: 4px; }
.reroll-chip { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; font-size: 15px; padding: 7px 14px; border: 2px dashed var(--ink); white-space: nowrap; border-radius: var(--r-btn); }
.reroll-chip.is-spent { opacity: 0.6; }
.offer-strip .strip-in { padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 899px) {
  .strip-row-wrap .strip-in { gap: 12px 16px; }
  .strip-gap { display: none; }
  .strip-head { width: 100%; }
  .prog { flex: 1 1 auto; }
}
@media (max-width: 559px) {
  .strip-title-sm { font-size: 24px; }
  .prog { gap: 8px; }
  .prog-shirts { gap: 2px; }
  .prog-shirts svg { width: 14px; height: 13px; }
  .reroll-chip, .reroll-btn { font-size: 14px; padding: 6px 10px; }
}

/* ================================================================ Pick your system (02-pick-your-system) */
.sys-strip .strip-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sys-strip .strip-titles { flex: 1 1 320px; }
.sys { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-top: 28px; padding-bottom: 36px; max-width: calc(1120px + 2 * var(--gutter)); }
.sys-list { flex: 0 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.sys-row {
  position: relative; display: flex; align-items: baseline; gap: 8px; text-align: left; cursor: pointer;
  min-height: 54px; padding: 14px 18px; border: 1px solid var(--glass-edge); background: var(--glass-bg); color: var(--ink);
  border-radius: var(--r-btn); box-shadow: var(--btn2-shadow), 0 0 0 1px rgba(120, 175, 215, 0.35);
}
.sys-row-f { font-weight: 800; font-size: 21px; letter-spacing: -0.01em; }
.sys-row-v { font-weight: 500; font-size: 15px; }
.sys-row:hover { border-color: var(--ink); }
.sys-row.on { background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; clip-path: var(--torn-row); margin-right: -22px; padding-right: 36px; border-radius: var(--r-btn) 0 0 var(--r-btn); box-shadow: var(--btn1-shadow); }
.sys-row.on .sys-row-v { font-weight: 700; }
.sys-row:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sys-row.on:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--btn-ink), var(--btn1-shadow); }
.sys-view { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.sys-name { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.sys-name-f { font-weight: 800; font-size: 34px; letter-spacing: -0.01em; }
.sys-name-v { font-weight: 600; font-size: 22px; }
.sys-pitch { aspect-ratio: 1.45; }
.geo-slot {
  display: inline-block; min-width: 46px; text-align: center; padding: 6px 8px; font-weight: 800; font-size: 13px; line-height: 1.2;
  background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn1-shadow), 0 2px 6px rgba(0, 0, 0, 0.25); border-radius: var(--r-tile);
}
.sys-note { font-size: 16px; line-height: 1.45; }
.sys-foot { display: flex; justify-content: center; padding-top: 6px; }
.sys-start.btn-primary { font-size: 22px; padding: 18px 52px 18px 34px; }
@media (max-width: 899px) {
  .sys { gap: 24px; padding-top: 20px; }
  .sys-list { flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-row.on { margin-right: 0; }
  .sys-view { flex: 1 1 100%; }
  .geo-slot { min-width: 36px; padding: 4px 5px; font-size: 11px; }
}
@media (max-width: 559px) {
  .sys-row { min-height: 48px; padding: 10px 12px; }
  .sys-row-f { font-size: 18px; }
  .sys-row-v { font-size: 13px; }
  .sys-row.on { padding-right: 24px; }
  .sys-name-f { font-size: 28px; }
  .sys-start.btn-primary { font-size: 19px; padding: 15px 44px 15px 28px; }
}

/* ================================================================ the draft board (03-draft-board) */
.board { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; padding-top: 28px; padding-bottom: 36px; }
.board-main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.board-pitch { aspect-ratio: 1.3; }
.board-caption { font-size: 15px; line-height: 1.45; color: var(--ink-muted-2); text-align: center; }
.bs-done { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.board-side { flex: 0 1 360px; min-width: 300px; display: flex; flex-direction: column; gap: 22px; }
.board-goals, .board-tips { display: flex; flex-direction: column; gap: 10px; }
.side-h { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
/* the perk cards: in progress (framed) and achieved (solid) */
/* v9.1: unachieved, an even 2px outline in its colour on glass (the thick left
   edge is gone); achieved, the solid colour and its coloured shadow; 16px corners */
.perk-card { background: var(--glass-bg); border: 2px solid var(--pc); border-radius: var(--r-perk); box-shadow: var(--perk-shadow); padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.perk-identity { --pc: var(--id); --pc-solid: var(--id-solid); --pc-tint: var(--id-tint); --pc-text: var(--id-text); }
.perk-link { --pc: var(--link); --pc-solid: var(--link-solid); --pc-tint: var(--link-tint); --pc-text: var(--link-text); }
.perk-midfield { --pc: var(--mid); --pc-solid: var(--mid-solid); --pc-tint: var(--mid-tint); --pc-text: var(--mid-text); }
.perk-head { display: flex; align-items: center; gap: 10px; }
.perk-title { font-weight: 700; font-size: 16px; letter-spacing: 0; flex: 1; }
.perk-bonus { font-weight: 700; font-size: 13px; padding: 3px 10px; background: var(--pc-tint); white-space: nowrap; border-radius: var(--r-pill); }
.perk-q { width: 28px; height: 28px; }
.perk-status { font-size: 14px; line-height: 1.4; }
.perk-count { font-weight: 700; font-size: 14px; }
.perk-pips { display: flex; gap: 4px; }
.perk-pip { flex: 1; height: 6px; background: rgba(16, 64, 100, 0.12); border-radius: var(--r-pill); }
.perk-pip.is-on { background: var(--pc); }
.perk-card.is-off { opacity: 0.75; }
.perk-card.is-achieved { background: var(--gloss-chip), var(--pc-solid); color: #FFFFFF; border: none; padding: 14px 16px 16px; gap: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px color-mix(in srgb, var(--pc) 35%, transparent); }
.perk-link.is-achieved { color: var(--ink); }
.perk-card.is-achieved .perk-title { font-weight: 800; font-size: 19px; }
.perk-card.is-achieved .perk-bonus { background: #FFFFFF; color: var(--pc-text); font-weight: 800; }
.perk-link.is-achieved .perk-bonus { background: var(--ink); color: #FFFFFF; }
.perk-card.is-achieved .perk-status { font-size: 15px; font-weight: 500; }
.perk-card.is-achieved .perk-pip.is-on { background: #FFFFFF; }
.perk-card.is-achieved .perk-q { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: inherit; }
.perk-link.is-achieved .perk-q { border-color: rgba(42, 22, 12, 0.5); }
.perk-check { width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.perk-link .perk-check { background: var(--ink); }
.perk-links { display: flex; flex-direction: column; gap: 6px; }
.perk-link-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; background: rgba(255, 255, 255, 0.35); padding: 8px 10px; border-radius: 10px; }
.perk-link-row .cb-club { font-weight: 800; font-size: 15px; flex: 0 0 auto; }
.cb-swatch { width: 14px; height: 14px; flex: none; border-radius: var(--r-cell); box-shadow: inset 0 0 0 1px rgba(42, 22, 12, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.perk-link-who { font-size: 14px; font-weight: 600; flex: 1 1 160px; text-align: right; }
.perk-foot { font-size: 13px; line-height: 1.4; font-weight: 500; }
.perk-mf-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.perk-mf-k { font-weight: 700; }
/* Next picks */
.tips-list { display: contents; }   /* phones: the tips as before; a desktop frames them (D181, below) */
.tip { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--div-head); }
.tip .perk-tag { align-self: flex-start; }
.tip-head { font-weight: 700; font-size: 15px; line-height: 1.3; }
.tip-body { font-size: 13px; line-height: 1.4; color: var(--ink-muted-2); }
@media (max-width: 899px) {
  .board { gap: 24px; padding-top: 20px; }
  .board-main, .board-side { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 559px) {
  .board-pitch { aspect-ratio: 1.05; }
  /* v9.1: the largest tile a phone's board fits (92px doesn't: design/V91-LOG.md) */
  .board-pitch .slot { --tile-w: clamp(54px, 20cqw, 92px); }
}

/* moving a player (D77): the lifted tile, its targets, the rest quiet */
.slot.swap-source { outline: 3px solid var(--ink); outline-offset: 2px; transform: translateY(-3px); }
.slot.swap-target { outline: 2px dashed #FFFFFF; outline-offset: 3px; }
.slot.swap-target.drop-over { outline: 3px solid #FFFFFF; }
.slot.swap-inert { opacity: 0.45; cursor: default; }
.drag-ghost { position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -50%) scale(1.05); opacity: 0.9; }
.swap-banner, .move-hint {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--ink); color: #FFFFFF;
  padding: 10px var(--gutter); font-size: 14px;
}
.swap-banner .swap-who { font-weight: 800; }
.swap-banner .swap-line { flex: 1; }
.swap-banner .ghost-btn, .move-hint .ghost-btn { background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; font-weight: 700; padding: 6px 14px; min-height: 40px; cursor: pointer; }
.move-hint span { flex: 1; }

/* ================================================================ the offer (04-offer) */
.offer-grid {
  display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 28px; row-gap: 14px; padding-top: 20px; padding-bottom: 24px; max-width: calc(1220px + 2 * var(--gutter));
}
.offer-pitch { min-height: 420px; height: 100%; }
.offer-pitch .slot { cursor: default; --tile-w: clamp(54px, 18.5cqw, 92px); }   /* v9.1: 92px on the 500px pitch */
.offer-pitch .slot:hover { filter: none; }
.offer-pitch .slot.filled { cursor: pointer; }   /* v9.1 (fix 4): a placed player opens his details */
.offer-pitch .slot.filled:hover { filter: brightness(1.06); }
.offer-rows { display: flex; flex-direction: column; gap: 9px; }
.offer-caption { align-self: center; font-size: 14px; color: var(--ink-muted-2); text-align: center; }
.offer-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.offer-cta { display: flex; justify-content: center; align-items: center; position: sticky; bottom: 0; z-index: 5; background: linear-gradient(180deg, var(--page-0), var(--page) 30%); padding: 14px 0 12px; }
/* v9.2 (D175): the five rows and Pick are one glass panel beside the pitch,
   Pick at its bottom, centred, still pinned to the window's bottom while the
   rows scroll under it (D74). The panel clips with overflow: clip, which
   (unlike hidden) is no scroll box, so Pick still sticks to the window. Its
   fade is the panel's own colour. No glass inside glass: the rows are flat
   cards in their tier tint, 14px corners, a 1px edge, a lighter shadow. */
.offer-list.panel { padding: 12px 12px 0; gap: 0; overflow: clip; }
.offer-list.panel .offer-cta { background: var(--panel-fade); margin: auto -12px 0; padding: 14px 12px 12px; }   /* at the panel's bottom when it is taller than the rows */
.offer-row {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px;
  border: 1px solid var(--line); cursor: pointer; min-height: 96px;
  border-radius: var(--r-award); box-shadow: var(--row-shadow);
}
.offer-row:hover { border-color: rgba(42, 22, 12, 0.4); }
.offer-row.selected { outline: 3px solid var(--ink); outline-offset: -1.5px; border-color: transparent; }
.or-hit { position: absolute; inset: 0; z-index: 0; background: transparent; border: none; padding: 0; cursor: pointer; border-radius: inherit; }
.or-hit:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.offer-row > :not(.or-hit) { position: relative; z-index: 1; pointer-events: none; }
.offer-row button:not(.or-hit), .offer-row .xm { pointer-events: auto; }
.or-rating { width: 64px; }
.or-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.or-name { font-weight: 800; font-size: 19px; line-height: 1.1; }
.or-meta { font-size: 13px; color: var(--ink-muted-2); }
.or-line { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-height: 22px; min-width: 0; }
.or-line .lean-bar { flex-wrap: nowrap; }
.or-labels { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-height: 22px; min-width: 0; overflow: hidden; }
.or-labels .or-label { flex: none; }
.or-labels .or-label.k-link { flex: 0 1 auto; min-width: 48px; overflow: hidden; text-overflow: ellipsis; display: block; }
.or-stats { flex: none; display: grid; grid-template-columns: repeat(3, 44px); text-align: center; }
.or-stats.is-gk { grid-template-columns: repeat(2, 56px); }
.or-stat { font-weight: 800; font-size: 18px; }
.or-stat-k { font-size: 11px; color: var(--ink-muted); }
.or-details { flex: none; }
.offer-rows.dealt .offer-row { animation: rowIn 0.24s ease-out both; }
.offer-rows.dealt .offer-row:nth-child(2) { animation-delay: 0.03s; }
.offer-rows.dealt .offer-row:nth-child(3) { animation-delay: 0.06s; }
.offer-rows.dealt .offer-row:nth-child(4) { animation-delay: 0.09s; }
.offer-rows.dealt .offer-row:nth-child(5) { animation-delay: 0.12s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .offer-rows.dealt .offer-row { animation: none; } }
@media (max-width: 899px) {
  .offer-grid { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  /* v9.1: taller (was 1.6), so the bigger tiles fit without touching; the
     largest tile that fits there (design/V91-LOG.md) */
  .offer-pitch { min-height: 0; height: auto; aspect-ratio: 1.2; max-width: 520px; width: 100%; justify-self: center; order: 0; }
  .offer-pitch .slot { --tile-w: clamp(44px, 14cqw, 72px); }
  .offer-caption { order: 1; }
  .offer-list { order: 2; }
  /* v9.2 (D175): the panel reaches 9px into the gutter and pads 8px inside its
     1px edge, so the rows keep their width (and so their height) */
  .offer-list.panel { margin: 0 -9px; padding: 8px 8px 0; }
  .offer-list.panel .offer-cta { margin: auto -8px 0; padding: 14px 8px 12px; }
}
@media (max-width: 559px) {
  .offer-row { flex-wrap: wrap; gap: 8px 12px; padding: 10px; min-height: 0; align-items: flex-start; }
  .or-rating { width: 56px; padding: 6px 0 5px; }
  .or-rating .tb-n { font-size: 22px; }
  .or-main { flex: 1 1 calc(100% - 68px); }   /* the stats and Details wrap to a second line */
  .or-name { font-size: 17px; }
  .or-stats { order: 3; margin-left: 68px; grid-template-columns: repeat(3, 40px); text-align: left; }
  .or-stats.is-gk { grid-template-columns: repeat(2, 70px); }
  .or-details { order: 4; margin-left: auto; }
  .lean-bar { --lean-w: 120px !important; }
  .or-line .lean-bar { --lean-w: 72px !important; flex-direction: column; align-items: flex-start; gap: 3px; }   /* the word under the bar: the line fits beside the profile */
  .or-line .lean-ends { display: none; }
  .or-line .lean-word { font-size: 12px; line-height: 1.1; }
  .or-labels { gap: 4px; }
  .or-labels .or-label { font-size: 11px; padding: 2px 6px; }
  .or-labels .or-label.k-link { min-width: 40px; }
}

/* ---- v9.2 (D181): the draft screens fill the window (desktop). One content
   width for the board, the offer and the system screen (and their strip, so
   nothing moves between them): as wide as the window's height asks for, so
   on a taller window the pitch grows until the board fills the viewport
   (tiles still stop at 92px), never under v9's 1180 or over the window. The
   header keeps its one width on every page (D182): the content may be wider
   beneath it. A pitch is never smaller than v9.1's at the same window
   (D182): the board's is the larger of v9.1's (--v91-board) and the
   window's height less what is around it (--fill-chrome) x 1.3, within its
   column; the side column takes what is left (Next picks' panel runs to the
   same bottom edge); the offer's pitch and panel stretch to one bottom line,
   the caption under the pitch; the system screen's pitch as the board's.
   On a short window the draft screens scroll, as in v9.1 (D101's no-scroll
   rule is the playback's). Phones as v9.1. */
/* under 840px tall the board's pitch is under about 770px wide and its caption takes two lines */
@media (max-height: 840px) { :root { --fill-chrome-0: 270px; } }
@media (min-width: 900px) {
  body.play:has(> .draft-main > :is(.board, .offer-grid, .sys)) {
    --fill-h: max(360px, 100dvh - var(--fill-chrome));
    --play-w: clamp(var(--wrap),
      max(var(--fill-side) + var(--fill-h) * 1.3, var(--offer-side) + max(var(--offer-rows-h), 100dvh - var(--offer-chrome)) * 0.8),
      100vw - 2 * var(--gutter));
  }
  .draft-main:has(> :is(.board, .offer-grid, .sys)) > .strip > .strip-in,
  .draft-main > :is(.board, .offer-grid, .sys).wrap { max-width: calc(var(--play-w) + 2 * var(--gutter)); }
  .draft-main > :is(.board, .offer-grid, .sys) { flex: 1 0 auto; }
  .board {
    --fill-h: max(360px, 100dvh - var(--fill-chrome));
    display: grid; grid-template-columns: min(calc(100% - var(--fill-side)), max(var(--v91-board), var(--fill-h) * 1.3)) minmax(360px, 1fr);
    column-gap: 36px; align-items: stretch;
  }
  /* a complete board: the caption is a line and the Play button (60px more under the pitch) */
  .board.is-complete { --fill-chrome: calc(var(--fill-chrome-0) + 60px); }
  .board-side { min-width: 0; }
  .board-tips { flex: 1 0 auto; }
  .tips-list {
    display: flex; flex-direction: column; gap: 12px; flex: 1 0 auto; padding: 14px 16px;
    background: var(--glass-bg); border: 1px solid var(--glass-edge); border-radius: var(--r-panel); box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  }
  .tips-list .tip:last-child { padding-bottom: 0; border-bottom: none; }
  .offer-grid { grid-template-columns: minmax(min(var(--v91-offer), 100% - 28px), 1fr) minmax(0, var(--offer-panel-w)); grid-template-rows: minmax(0, 1fr) auto; row-gap: 12px; }
  .offer-pitch { grid-column: 1; grid-row: 1; height: auto; }
  .offer-list { grid-column: 2; grid-row: 1; }
  .offer-caption { grid-column: 1; grid-row: 2; }
  .sys-pitch { width: min(100%, max(var(--v91-sys), max(300px, 100dvh - var(--sys-chrome)) * 1.45)); margin: 0 auto; }
}

/* ================================================================ the details panel (05-player-details) */
.details-layer { position: fixed; inset: 0; z-index: 60; }
.dp-backdrop { position: absolute; inset: 0; background: rgba(12, 34, 52, 0.5); opacity: 0; transition: opacity 0.2s ease; }
.details-layer.in .dp-backdrop { opacity: 1; }
.dp-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%;
  background: var(--glass-bg), rgba(255, 255, 255, 0.55); border: 1px solid var(--glass-edge); border-right: none;
  border-radius: var(--r-panel) 0 0 var(--r-panel); overflow: hidden;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  display: flex; flex-direction: column; box-shadow: var(--glass-shadow), -20px 0 40px rgba(16, 40, 60, 0.3);
  transform: translateX(24px); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease;
}
.details-layer.in .dp-panel { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dp-panel, .dp-backdrop { transition: none; } }
body.has-layer { overflow: hidden; }
.dp-head { padding: 20px 22px 16px; display: flex; gap: 16px; align-items: flex-start; border-bottom: 1px solid var(--div-head); }
.dp-rating { width: 72px; padding: 10px 0 7px; }
.dp-rating .tb-n { font-size: 32px; }
.dp-rating .tb-t { font-size: 12px; }
.dp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dp-name { font-size: 26px; line-height: 1.05; letter-spacing: -0.01em; }
.dp-meta { font-size: 14px; color: var(--ink-muted-2); }
.dp-tags { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.dp-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-body { flex: 1; overflow-y: auto; padding: 18px 22px 8px; display: flex; flex-direction: column; gap: 22px; overscroll-behavior: contain; }
.dp-sec { display: flex; flex-direction: column; gap: 8px; }
.dp-h { font-size: 16px; font-weight: 800; letter-spacing: 0; }
.dp-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dp-big-c { background: var(--soft); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; border-radius: var(--r-btn); box-shadow: inset 0 1px 0 #FFFFFF; }
.dp-big-v { font-weight: 800; font-size: 24px; line-height: 1; }
.dp-big-k { font-size: 12px; color: var(--ink-muted-2); }
.dp-muted { font-size: 13px; line-height: 1.45; color: var(--ink-muted-2); }
.dp-why-rows { display: flex; flex-direction: column; }
.dp-why-base, .dp-why-row, .dp-why-total { display: flex; align-items: baseline; gap: 10px; }
.dp-why-base { padding: 8px 0; border-bottom: 1px solid var(--div-row); font-size: 14px; }
.dp-why-row { padding: 6px 0; }
.dp-why-k { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.dp-why-name { font-weight: 700; }
.dp-why-d { font-size: 12px; color: var(--ink-muted-2); line-height: 1.4; }
.dp-why-v, .dp-why-n { font-weight: 800; font-size: 16px; min-width: 32px; text-align: right; }
.dp-why-row.is-neg .dp-why-v { color: var(--danger); }
.dp-why-total { padding-top: 8px; border-top: 2px solid var(--ink); }
.dp-why-total .dp-why-k { font-weight: 800; }
.dp-why-total .dp-why-n { font-size: 18px; }
.dp-why-wait { font-size: 13px; color: var(--ink-muted); }
.dp-about { font-size: 13px; line-height: 1.45; }
.dp-peak { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--div-row); font-size: 14px; font-weight: 700; }
.dp-peak-k { flex: 1; }
.dp-foot { padding: 14px 22px 18px; border-top: 1px solid var(--div-head); display: flex; justify-content: center; gap: 10px; }
.dp-foot .btn-primary { font-size: 18px; padding: 13px 42px 13px 26px; }
.dp-foot-2 .btn-secondary { flex: 1; }
.dp-match { background: var(--soft); padding: 10px 12px; font-size: 13px; line-height: 1.45; border-radius: var(--r-btn); }
.dp-match b { font-weight: 800; }
@media (max-width: 559px) {
  .dp-panel { width: 100%; }
  .dp-head { padding: 14px 16px 12px; gap: 12px; }
  .dp-rating { width: 60px; }
  .dp-rating .tb-n { font-size: 26px; }
  .dp-name { font-size: 22px; }
  .dp-body { padding: 14px 16px 8px; }
  .dp-big-v { font-size: 20px; }
}

/* ================================================================ the season playback (06-season-playback) */
.playback-mode { display: flex; flex-direction: column; }
.pb-strip-in { padding-top: 26px; padding-bottom: 14px; }
.pbk-score { display: grid; grid-template-columns: 200px minmax(0, 1fr) 310px; align-items: center; gap: 24px; }
.pbs-md { display: flex; align-items: center; gap: 12px; }
.pbs-ring-box { position: relative; width: 76px; height: 76px; flex: none; }
.pbs-ring { position: absolute; inset: 0; }
.pbs-ring line { stroke: rgba(42, 22, 12, 0.25); stroke-width: 2.4; }
.pbs-ring line.is-on { stroke: var(--ink); }
.pbs-md-n { position: absolute; left: 0; right: 0; top: 19px; text-align: center; font-size: 19px; font-weight: 800; line-height: 1; }
.pbs-md-of { position: absolute; left: 0; right: 0; top: 42px; text-align: center; font-size: 10px; font-weight: 700; line-height: 1; }
.pbs-md-label { font-size: 14px; font-weight: 700; }
.pbs-live { display: flex; flex-direction: column; gap: 8px; align-items: center; min-width: 0; }
.pbs-score-wrap { position: relative; }
.pbs-tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); white-space: nowrap; z-index: 1; }
.pbs-big { display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; background: var(--surface); padding: 2px 9px 2px 3px; border-radius: var(--r-pill); box-shadow: var(--chip-shadow); }
.pbk-score.is-big .pbs-big { display: inline-flex; }
.pbs-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; width: 100%; }
.pbs-side { display: flex; flex-direction: column; min-width: 0; }
.pbs-you { text-align: right; align-items: flex-end; }
.pbs-name { font-weight: 800; font-size: 24px; line-height: 1.1; overflow-wrap: anywhere; }
.pbs-pos, .pbs-meta { font-size: 13px; font-weight: 600; }
.pbs-meta { display: flex; flex-wrap: wrap; }
.pbs-score { font-weight: 800; font-size: 46px; line-height: 1; background: var(--ink); color: #FFFFFF; padding: 4px 14px; white-space: nowrap; font-variant-numeric: tabular-nums; border-radius: var(--r-btn); box-shadow: var(--btn1-shadow); }
.pbs-dash { margin: 0 2px; }
@keyframes pbsPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.pbs-score.pbs-pop { animation: pbsPop 0.4s ease-out; }
.pbs-clock { display: flex; align-items: center; gap: 10px; width: min(100%, 440px); }
.pbs-clock-t { font-size: 13px; font-weight: 800; white-space: nowrap; min-width: 62px; }
.pbs-bar { position: relative; flex: 1; height: 5px; background: rgba(42, 22, 12, 0.25); border-radius: var(--r-pill); }
.pbs-bar-fill { height: 100%; width: 0; background: var(--ink); border-radius: var(--r-pill); }
.pbs-bar-half { position: absolute; left: 50%; top: -5px; width: 3px; height: 15px; background: #FFFFFF; transform: translateX(-50%); box-shadow: 0 0 0 1px var(--ink); }
.pbs-bar-ht { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-size: 10px; font-weight: 800; }
.pbs-clock-end { font-size: 12px; font-weight: 700; }
.pbs-speed { display: flex; justify-content: flex-end; }
.pb-speed { display: flex; gap: 6px; }
.pb-speed-btn {
  width: 90px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-weight: 700; font-size: 12px; line-height: 1; padding: 6px; border: 1.5px solid var(--ink); background: var(--btn2-bg); color: var(--ink); cursor: pointer;
  border-radius: var(--r-btn); box-shadow: var(--btn2-shadow);
}
.pb-speed-btn[aria-pressed="true"] { background: var(--pressed); color: var(--ink); border-width: 2px; box-shadow: var(--pressed-ring), var(--btn2-shadow); }
.pb-tri { display: inline-flex; align-items: center; }
.pbk-over { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; min-height: 76px; }
.pbo-text { display: flex; flex-direction: column; flex: 1; }
.pbo-k { font-size: 14px; font-weight: 700; }
.pbo-line { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.pbk {
  width: 100%; max-width: calc(1220px + 2 * var(--gutter)); margin: 0 auto; padding: 22px var(--gutter) 26px;
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: stretch;
}
.pbk-top { display: none; }
.pbk-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pb-label { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.pb-chart { padding: 14px 18px 10px; }
/* desktop: the chart takes the window's spare height, so the playback fills the screen without scrolling it.
   v9.2 (D177): no cap any more: from 900px wide the page is exactly the
   window's height and the chart, the table and the headlines share it down
   to the bottom edge (the chart's plot takes what its panel has, the
   headlines what the table leaves); still never a scroll (D101) */
.pb-chart .pbc-plot { height: clamp(250px, calc(100vh - 452px), 440px); }
@media (min-width: 900px) {
  body.play:has(> .draft-main.playback-mode) { height: 100vh; height: 100dvh; min-height: 0; }
  .draft-main.playback-mode { flex: 1 1 0; min-height: 0; }
  .playback-mode .pbk { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .playback-mode .pbk-col { min-height: 0; }
  .playback-mode .pb-chart { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .playback-mode .pb-chart .pbc-plot { flex: 1 1 0; height: auto; min-height: 160px; }
}
.pbk-form { display: flex; flex-direction: column; gap: 8px; }
.pbf-cells { display: grid; grid-template-columns: repeat(38, minmax(0, 1fr)); gap: 2px; }
.pbf-cell {
  height: 24px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; line-height: 1;
  background: #FFFFFF; border: 1px solid var(--line); color: var(--ink); padding: 0; font-family: inherit; min-width: 0;
  border-radius: var(--r-cell);
}
.pbf-cell.is-played { border: none; }
.pbf-cell.r-w { background: var(--gloss-chip), var(--win); color: var(--win-ink); }
.pbf-cell.r-d { background: var(--gloss-chip), var(--draw); color: var(--draw-ink); }
.pbf-cell.r-l { background: var(--gloss-chip), var(--loss); color: var(--loss-ink); }
.pbk-table { padding: 0; }
.pbt-head { padding: 12px 16px 8px; }
.pbt { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.pbt-c-pos { width: 40px; } .pbt-c-tier { width: 82px; } .pbt-c-gd { width: 44px; } .pbt-c-pts { width: 44px; }
.pbt td { padding: 7px 6px; border-top: 1px solid var(--line-light); }
.pbt td:first-child { padding-left: 16px; }
.pbt td:last-child { padding-right: 16px; }
.pbt-pos { font-weight: 700; }
.pbt-team { overflow: hidden; }
.pbt-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.pbt-tier { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.pbt-n { text-align: right; color: var(--ink-muted-2); }
.pbt-pts { font-weight: 800; color: var(--ink); }
.pbt-row.is-rel { background: #FDF3F2; }
.pbt-row.is-user { background: #FFF1E4; box-shadow: inset 4px 0 0 var(--big-match); }
.pbt-row.is-user .pbt-name { font-weight: 800; }
.pbt-gap td { padding: 0; height: 6px; background: var(--page); font-size: 0; border: none; }
/* the headlines take what the table leaves beside the chart and scroll inside
   themselves: the page never grows as they arrive (D101, VLA-37) */
.pbk-news { display: flex; flex-direction: column; gap: 8px; position: relative; min-height: 0; flex: 1 1 0; }
.pbn-scroll { overflow-y: auto; overflow-anchor: none; flex: 1 1 0; min-height: 96px; contain: size; }
.pbn-scroll:focus-visible { outline-offset: 2px; }
.pbn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pbn-item { display: flex; gap: 12px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pbn-md { flex: none; font-size: 11px; font-weight: 800; padding: 2px 8px; background: var(--ink); color: #FFFFFF; white-space: nowrap; border-radius: var(--r-pill); }
.pbn-t { font-size: 14px; line-height: 1.35; }
/* v9.2 (D177): the season's end card, at the top of the headlines: not a
   headline but a framed card, the finish and a See the result */
.pbn-end {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 2px;
  background: var(--glass-bg); border: 2px solid var(--ink); border-radius: var(--r-btn); box-shadow: var(--btn2-shadow);
}
.pbn-end-text { flex: 1 1 140px; display: flex; flex-direction: column; min-width: 0; }
.pbn-end-k { font-size: 12px; font-weight: 700; color: var(--ink-muted-2); }
.pbn-end-line { font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.pbn-end-btn { flex: none; }
.pbk-news::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(180deg, var(--page-0), var(--page)); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.pbk-news.has-more::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pbs-score.pbs-pop { animation: none; } .pbk-news::after { transition: none; } }
@media (max-width: 1100px) {
  .pbk-score { grid-template-columns: auto minmax(0, 1fr); }
  .pbs-speed { grid-column: 1 / -1; justify-content: center; }
}
/* phones: one column, in the order a season is followed: the match, the
   chart, the table, the form, the headlines (the columns dissolve); the
   strip is compact so the match, the chart and the table fit one screen */
@media (max-width: 899px) {
  .pb-strip-in { padding-top: 24px; padding-bottom: 8px; }
  .pbk { display: flex; flex-direction: column; padding-top: 8px; gap: 8px; }
  .pbk-col { display: contents; }
  .pbk .pb-chart { order: 1; } .pbk .pbk-table { order: 2; } .pbk .pbk-form { order: 3; } .pbk .pbk-news { order: 4; flex: none; }
  .pbk-score { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "live live" "md speed"; gap: 8px 12px; }
  .pbs-live { grid-area: live; gap: 4px; }
  .pbs-md { grid-area: md; gap: 8px; }
  .pbs-speed { grid-area: speed; justify-content: flex-end; }
  .pbs-ring-box { width: 46px; height: 46px; }
  .pbs-ring { width: 46px; height: 46px; }
  .pbs-md-n { top: 11px; font-size: 14px; }
  .pbs-md-of { top: 27px; font-size: 8px; }
  .pbs-name { font-size: 17px; }
  .pbs-score { font-size: 30px; padding: 3px 9px; }
  .pbs-teams { gap: 10px; }
  .pbs-clock-t { min-width: 0; }
  .pbn-scroll { contain: none; min-height: 0; flex: none; }
  .pbo-line { font-size: 22px; }
  .pb-chart .pbc-plot { height: 118px; }
  .pb-chart { padding: 10px 10px 4px; }
  .pbt-head { padding: 8px 14px 4px; }
  .pbt td { padding: 3px 6px; }   /* v9.1: was 4px, so a six-row trimmed table still leaves the five parts on a 390 x 844 screen */
}
@media (max-width: 559px) {
  .pbs-md-label { display: none; }   /* the ring says "28 of 38" */
  .pbs-speed { min-width: 0; }
  .pb-speed { gap: 5px; width: 100%; }
  .pb-speed-btn { flex: 1 1 0; width: auto; min-width: 0; font-size: 11px; gap: 4px; padding: 4px; white-space: nowrap; }
  .pbf-cells { grid-template-columns: repeat(19, minmax(0, 1fr)); }
  .pbk .pbf-cell { height: 18px; }
  .pbt-c-tier { width: 70px; }
}

/* ================================================================ the result (07-result, 07b, 07c) */
.result-mode { display: flex; flex-direction: column; }
.rv-strip .strip-in { padding-top: 30px; padding-bottom: 30px; }
.rv-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 34px; align-items: center; }
.rv-v-fin { display: flex; flex-direction: column; }
.rv-v-pos { font-weight: 800; font-size: 96px; line-height: 0.85; letter-spacing: -0.04em; }
.rv-v-pts { font-weight: 800; font-size: 22px; margin-top: 6px; }
.rv-v-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rv-v-sentence { font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.rv-gd { font-size: 13px; font-weight: 700; margin-left: 6px; }
.rv-v-pred { font-size: 15px; font-weight: 600; }
.rv-v-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 220px; max-width: 280px; }
.rv-v-actions .rv-rerun { font-size: 17px; padding: 13px 36px 13px 22px; justify-content: flex-start; text-align: left; }
.rv-v-pair { display: flex; gap: 8px; }
.rv-v-pair .btn-secondary { flex: 1; font-size: 14px; padding: 6px 12px; }
.rv-v-note { font-size: 12px; font-weight: 500; }
.rv { width: 100%; max-width: calc(1180px + 2 * var(--gutter)); margin: 0 auto; padding: 26px var(--gutter) 40px; display: flex; flex-direction: column; gap: 34px; }
.rv-h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.rv-h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.rv-muted { color: var(--ink-muted-2); font-size: 14px; }
.rv-season { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
/* the chart grows to the height of the highlights beside it (D126: no gap beside it) */
.rv-chart { padding: 14px 18px 10px; display: flex; flex-direction: column; }
.rv-chart .pbc-plot { flex: 1 1 auto; height: auto; min-height: 250px; margin-right: 80px; }
.rv-chart .pbc-bigtag { display: none; }
.rv-hl { display: flex; flex-direction: column; }
.rv-hl .rv-h3 { margin-bottom: 6px; }
.rv-hl-row {
  display: flex; gap: 12px; align-items: stretch; padding: 8px 0; border: none; border-bottom: 1px solid var(--line);
  background: none; text-align: left; width: 100%; color: inherit;
}
button.rv-hl-row { cursor: pointer; }
button.rv-hl-row:hover .rv-hl-main { text-decoration: underline; text-underline-offset: 3px; }
.rv-hl-bar { width: 5px; flex: none; background: var(--tone); border-radius: var(--r-bar); }
.rv-hl-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rv-hl-label { font-size: 12px; font-weight: 800; color: var(--tone-ink); }
.rv-hl-main { font-size: 15px; font-weight: 800; }
.rv-hl-sub { font-size: 12px; color: var(--ink-muted); }
.rv-hl-cells { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rv-hl-cells .rv-res { border: 0; height: 28px; min-width: 32px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; border-radius: var(--r-chip); }
.rv-hl-cells .rv-res:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.rv-hl-md { font-size: 12px; font-weight: 700; align-self: center; white-space: nowrap; }
.tone-gold { --tone: #B8860B; --tone-ink: #7A5A00; }
.tone-orange { --tone: #E26A1E; --tone-ink: #9C410A; }   /* v9.1: darker (was #A8470C, 4.46:1 on glass) */
.tone-green { --tone: #2E9E57; --tone-ink: #1E6B3B; }
.tone-red { --tone: #C62828; --tone-ink: #B02222; }
/* season awards */
.rv-aw { display: flex; flex-direction: column; gap: 14px; }
.rv-aw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.rv-aw-sub { margin: 0; font-size: 15px; font-weight: 800; padding: 10px 16px; border-bottom: 1px solid var(--div-head); letter-spacing: 0; }
.rv-w { display: inline; }
.rv-w-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 800; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(42, 22, 12, 0.3); text-underline-offset: 3px; }
.rv-w-btn:hover { text-decoration-color: currentColor; }
.rv-shock { font-size: 14px; padding: 10px 14px; background: #FBE4E1; border-radius: var(--r-btn); box-shadow: var(--btn2-shadow); }
.rv-shock-head { font-weight: 800; }
/* fixtures */
.rv-fx { display: flex; flex-direction: column; gap: 12px; }
.rv-sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-sec-head .rv-h2 { margin-right: auto; }
.rv-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-filter {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 6px 14px; min-height: 36px;
  border: 2px solid var(--f); background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%), var(--f-tint); color: var(--f-ink); cursor: pointer;
  border-radius: var(--r-pill); box-shadow: var(--btn2-shadow);
}
/* the selected filter: white, a 2px ink border and an inset ink ring (v9.1: never a solid fill) */
.rv-filter[aria-pressed="true"] { background: var(--pressed); color: var(--ink); border-color: var(--ink); box-shadow: var(--pressed-ring), var(--btn2-shadow); }
.rv-filter .bang { width: 14px; height: 14px; font-size: 10px; }
.f-all { --f: var(--ink); --f-tint: rgba(255, 255, 255, 0.7); --f-ink: var(--ink); --f-on: #FFFFFF; }
.f-big { --f: #E26A1E; --f-tint: #FFF0E4; --f-ink: var(--ink); --f-on: var(--ink); }
.f-hl { --f: #B8860B; --f-tint: #FFF6DC; --f-ink: var(--ink); --f-on: var(--ink); }
.f-w { --f: var(--win); --f-tint: #E6F5EC; --f-ink: #1E6B3B; --f-on: #FFFFFF; }
.f-d { --f: #8A837D; --f-tint: #F1EFED; --f-ink: var(--ink); --f-on: #FFFFFF; }
.f-l { --f: var(--loss); --f-tint: #FCE8E8; --f-ink: #9A1C1C; --f-on: #FFFFFF; }
.rv-form .pbf-head { display: none; }
.rv-form .pbf-cell { height: 20px; font-size: 9px; cursor: pointer; }
.rv-fx-row .res { box-shadow: var(--chip-shadow); }
.rv-fx-list { display: flex; flex-direction: column; }
.rv-fx-row {
  display: grid; grid-template-columns: 34px 28px 54px minmax(0, 1fr) minmax(0, 0.8fr) 56px 24px; gap: 10px; align-items: center;
  width: 100%; padding: 10px 16px; border: none; border-bottom: 1px solid var(--line-light); background: none; text-align: left; font-size: 14px; cursor: pointer; min-height: 44px;
}
.rv-fx-row:hover { background: #FFFAF5; }
.rv-fx-row:focus-visible { outline-offset: var(--focus-row); border-radius: var(--r-in-panel); }
.rv-fx-md { color: var(--ink-muted); }
.rv-fx-score { font-weight: 800; font-size: 16px; white-space: nowrap; }
.rv-fx-opp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rv-fx-oppname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-fx-tier { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.rv-fx-scorers { font-size: 13px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-fx-pos { text-align: right; font-weight: 700; }
.rv-fx-chev { color: var(--ink-muted); display: flex; justify-content: flex-end; }
.rv-fx-item.is-open { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); background: rgba(255, 255, 255, 0.6); }
.rv-fx-item.is-open .rv-fx-row { background: #FFF1E4; }
.rv-fx-item.is-open .rv-fx-chev svg { transform: rotate(180deg); color: var(--ink); }
.rv-fx-more { padding: 12px 16px; text-align: center; }
/* the open fixture */
.rv-fxp { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 18px; }
.rv-fxh { display: flex; flex-direction: column; gap: 18px; }
.rv-fxh-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-fxh-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-gap { flex: 1; }
.rv-bigpill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 4px 12px 4px 8px; background: #FFF0E4; border: 2px solid #E26A1E; border-radius: var(--r-pill); }
.rv-bigpill .bang { width: 14px; height: 14px; font-size: 10px; }
.rv-tag { font-size: 13px; font-weight: 700; padding: 4px 12px; background: #FFF6DC; border: 2px solid #B8860B; border-radius: var(--r-pill); }
.rv-fxh-line { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 22px; }
.rv-fxh-you { text-align: right; display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.rv-fxh-them { display: flex; flex-direction: column; min-width: 0; }
.rv-fxh-name { font-weight: 800; font-size: 28px; line-height: 1.1; max-width: 100%; overflow-wrap: normal; }
.rv-fxh-name.is-cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-fxh-sub { font-size: 13px; color: var(--ink-muted); }
.rv-fxh-score { font-weight: 800; font-size: 52px; line-height: 1; background: var(--ink); color: #FFFFFF; padding: 4px 16px; white-space: nowrap; border-radius: var(--r-btn); box-shadow: var(--btn1-shadow); }
/* v9.1: the pitches wider (was 1.25fr 0.9fr 1.25fr, gap 26) so 92px tiles fit them (about 425px each at 1280 and up) */
.rv-fxb { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.76fr) minmax(0, 1.32fr); gap: 20px; align-items: start; }
.rv-seg { display: none; }
.rv-lu { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rv-lu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rv-lu-name { font-weight: 800; font-size: 15px; }
.rv-lu-shape { font-size: 13px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.rv-pitch { aspect-ratio: 0.82; filter: drop-shadow(0 8px 10px rgba(60, 20, 0, 0.18)); }
/* v9.1: the board's tile, 92px at most (23cqw: 92px on a 400px pitch) */
.rv-pitch .slot { --tile-w: clamp(44px, 23cqw, 92px); }
.rv-lu-notes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rv-lu-perk { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.rv-lu-perk .perk-tag { font-size: 11px; font-weight: 800; padding: 2px 7px; flex: none; }
.rv-fx-mid { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rv-mid-h { font-size: 15px; font-weight: 800; text-align: center; letter-spacing: 0; }
.rv-goals { display: flex; flex-direction: column; gap: 10px; }
/* v9.2 (D179): the goals timeline. The track with its notches and a dot per
   goal; each goal's minute in a label above (yours, ink) or below (theirs,
   outlined) with a stem to its dot (result-view.js layoutGoalStrip places
   them, apart from one another); the scale in its own row under it */
.rv-gwrap { margin: 0 8px; }
.rv-gstrip { position: relative; height: 60px; --gs-track: 30px; }
.rv-gs-stems { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rv-gs-stems line { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.rv-gs-line { position: absolute; left: 0; right: 0; top: var(--gs-track); height: 3px; transform: translateY(-50%); background: var(--ink); border-radius: var(--r-pill); }
.rv-gs-notch { position: absolute; top: var(--gs-track); width: 2px; height: 11px; transform: translate(-50%, -50%); background: var(--ink); border-radius: 1px; }
.rv-gs-dot { position: absolute; top: var(--gs-track); width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 1; }
.rv-gs-dot.is-us { background: var(--ink); box-shadow: 0 0 0 1.5px #FFFFFF; }
.rv-gs-dot.is-them { background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--ink); }
.rv-gs-mark {
  position: absolute; z-index: 2; transform: translateX(-50%); min-width: 18px; height: 18px; padding: 0 3px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; white-space: nowrap;
}
.rv-gs-mark.is-us { top: 3px; background: var(--ink); color: #FFFFFF; }
.rv-gs-mark.is-them { top: 39px; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.rv-gs-scale { position: relative; height: 13px; margin-top: 3px; }
.rv-gs-t { position: absolute; top: 0; font-size: 10px; line-height: 13px; color: var(--ink-muted); white-space: nowrap; }
.rv-gs-0 { left: 0; } .rv-gs-90 { right: 0; }
.rv-gs-h { left: 50%; transform: translateX(-50%); font-weight: 800; color: var(--ink); }
.rv-nogoals { font-size: 13px; color: var(--ink-muted); text-align: center; }
.rv-glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rv-g { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 8px; align-items: center; }
.rv-g-who { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.rv-g-who.is-them { align-items: flex-start; text-align: left; }
.rv-g-name { background: none; border: none; padding: 0; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; text-align: inherit; color: inherit; }
.rv-g-assist { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--ink-muted); cursor: pointer; text-align: inherit; }
.rv-g-name:hover, .rv-g-assist:hover { text-decoration: underline; }
.rv-g-mid { display: flex; flex-direction: column; align-items: center; }
.rv-g-run { font-weight: 800; font-size: 15px; }
.rv-g-min { font-size: 11px; color: var(--ink-muted); }
.rv-mu { display: flex; flex-direction: column; gap: 10px; }
.rv-mu-row { display: flex; flex-direction: column; gap: 4px; }
.rv-mu-labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.rv-mu-vals { display: flex; align-items: center; gap: 8px; }
.rv-mu-v { font-weight: 800; font-size: 16px; width: 38px; }
.rv-mu-v.is-r { text-align: right; }
/* v9.1 (fix 6): from the centre towards the side with the edge (left: you, right: them) */
.rv-mu-bar { flex: 1; height: 10px; position: relative; background: rgba(16, 64, 100, 0.12); border-radius: var(--r-pill); box-shadow: inset 0 1px 1px rgba(16, 64, 100, 0.12); }
.rv-mu-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.rv-mu-fill { position: absolute; top: 0; bottom: 0; background: var(--gloss-chip), var(--ink); }
.rv-mu-bar.to-you .rv-mu-fill { right: 50%; border-radius: var(--r-pill) 0 0 var(--r-pill); }
.rv-mu-bar.to-them .rv-mu-fill { left: 50%; background: var(--gloss-chip), var(--danger); border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.rv-mu-bar.is-level .rv-mu-fill { display: none; }
.rv-mu-v.is-edge { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rv-mu-edge { font-size: 12px; color: var(--ink-muted); text-align: center; }
/* the final table */
.rv-tb { display: flex; flex-direction: column; gap: 12px; }
.rv-tb-main { max-width: 760px; overflow-x: auto; }
.rv-table { min-width: 520px; }
.rv-tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px 30px 30px 30px 44px 40px; gap: 8px; align-items: center; padding: 9px 16px; font-size: 14px; border-top: 1px solid var(--line-light); }
.rv-th { font-size: 12px; color: var(--ink-muted); border-top: none; border-bottom: 1px solid var(--div-head); }
.rv-tr.after-gap { border-top: 6px solid var(--page); }
.rv-tr.z-champ { background: #FFF7E6; }
.rv-tr.z-rel { background: #FDF3F2; }
.rv-tr.is-user { background: #FFF1E4; box-shadow: inset 4px 0 0 var(--big-match); }
.rv-tr.is-user .rv-tn-name { font-weight: 800; }
.rv-tpos { font-weight: 700; }
.rv-tn { display: flex; gap: 8px; align-items: baseline; min-width: 0; flex-wrap: wrap; }
.rv-tn-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rv-tn-tier { font-size: 11px; color: var(--ink-muted); }
.rv-tn-pred { display: none; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.rv-atag { font-size: 11px; font-weight: 700; padding: 1px 8px; background: #F3EEEA; border-radius: var(--r-pill); }
.rv-atag.a-shock { background: #FBE4E1; color: #9A1C1C; }
.rv-paper { font-size: 13px; white-space: nowrap; }
.rv-delta { font-weight: 800; }
.rv-delta.is-up { color: #1E7A43; }
.rv-delta.is-down { color: var(--danger); }
.rv-c-n, .rv-c-r { text-align: right; }
.rv-tpts { font-weight: 800; }
.rv-tb-more { padding: 12px 16px; text-align: center; }
.rv-tb-note { font-size: 13px; color: var(--ink-muted); max-width: 760px; }
/* share (07c) */
.rv-noscroll { overflow: hidden; }
.rv-share-layer { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; }
.rv-share-back { position: absolute; inset: 0; background: rgba(12, 34, 52, 0.5); border: none; padding: 0; cursor: default; }
.rv-share { position: relative; width: min(100%, 940px); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--glass-bg), rgba(255, 255, 255, 0.6); border: 1px solid var(--glass-edge); border-radius: var(--r-panel); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow), 0 30px 60px rgba(16, 40, 60, 0.4); display: flex; flex-direction: column; }
.rv-share-head { background: var(--hero); padding: 16px 22px; display: flex; align-items: center; gap: 12px; }
.rv-share-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; flex: 1; }
.rv-share-head .btn-x { border-color: var(--ink); }
.rv-share-body { padding: 22px; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; align-items: start; }
.rv-share-card { width: 360px; height: auto; aspect-ratio: 0.8; box-shadow: 0 12px 26px rgba(40, 15, 0, 0.25); display: block; }
.rv-share-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rv-share-sec { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rv-share-sec-2 { padding-top: 16px; border-top: 1px solid var(--line); align-items: stretch; }
.rv-share-sec-2 .copy-btn { align-self: flex-start; }
.rv-share-text { width: 100%; resize: none; background: var(--soft); border: 1px solid var(--div-head); border-radius: var(--r-btn); padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.55; color: var(--ink); }
.copy-fallback { width: 100%; font: inherit; font-size: 13px; }
.rv-share-msg { font-size: 13px; color: var(--danger); }
.rv-share-msg:empty { display: none; }
@media (max-width: 1023px) {
  .rv-verdict { grid-template-columns: auto minmax(0, 1fr); }
  .rv-v-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; max-width: none; align-items: center; }
}
@media (max-width: 899px) {
  .rv-strip .strip-in { padding-top: 20px; padding-bottom: 20px; }
  .rv-verdict { gap: 16px 20px; }
  .rv-v-pos { font-size: 72px; }
  .rv-v-sentence { font-size: 20px; }
  .rv { gap: 26px; padding-top: 18px; }
  .rv-season, .rv-aw-grid { grid-template-columns: minmax(0, 1fr); }
  .rv-chart .pbc-plot { margin-right: 76px; flex: none; min-height: 0; height: 210px; }
  .rv-fx-row { grid-template-columns: 26px 28px 44px minmax(0, 1fr) 40px 18px; gap: 8px; padding: 10px 12px; }
  .rv-fx-scorers { display: none; }
  /* the table on phones: Pos, Team, GD, Pts; the forecast under the name (W, D and L are in the verdict) */
  .rv-table { min-width: 0; }
  .rv-tr { grid-template-columns: 26px minmax(0, 1fr) 40px 34px; padding: 9px 12px; }
  .rv-tr > .rv-c-paper, .rv-tr > .rv-c-n { display: none; }
  .rv-tn { column-gap: 6px; row-gap: 1px; }
  .rv-tn-name { flex-basis: 100%; }
  .rv-tn-pred { display: inline; }
  .rv-fxp { padding: 14px 12px 18px; }
  .rv-fxh-line { gap: 10px; }
  .rv-fxh-name { font-size: 20px; }
  .rv-fxh-score { font-size: 34px; padding: 3px 10px; }
  .rv-fxb { grid-template-columns: minmax(0, 1fr); }
  .rv-seg { display: flex; border: 1.5px solid var(--ink); order: 2; border-radius: var(--r-btn); overflow: hidden; background: var(--btn2-bg); box-shadow: var(--btn2-shadow); }
  .rv-seg-btn { flex: 1; min-height: 44px; border: none; background: transparent; font-weight: 700; font-size: 14px; cursor: pointer; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rv-seg-btn[aria-pressed="true"] { background: var(--pressed); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px var(--ink); }
  /* v9.2 (D180): as Home's control, the focus ring inside the button and the end buttons on the switch's corners */
  .rv-seg-btn:first-of-type { border-radius: var(--r-in-btn) 0 0 var(--r-in-btn); }
  .rv-seg-btn:last-of-type { border-radius: 0 var(--r-in-btn) var(--r-in-btn) 0; }
  .rv-seg-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: var(--focus-in); }
  .rv-fx-mid { order: 1; }
  .rv-lu { display: none; order: 3; }
  .rv-lu.is-shown { display: flex; }
  /* v9.1: taller (was 0.9) and the largest tile a phone fits (design/V91-LOG.md) */
  .rv-pitch { max-width: 420px; width: 100%; margin: 0 auto; aspect-ratio: 0.8; }
  .rv-pitch .slot { --tile-w: clamp(44px, 21cqw, 92px); }
  .rv-share-body { grid-template-columns: minmax(0, 1fr); }
  .rv-share-card { width: min(100%, 360px); margin: 0 auto; }
  .rv-share-layer { padding: 0; align-items: flex-end; }
  .rv-share { max-height: 100vh; width: 100%; border-radius: var(--r-panel) var(--r-panel) 0 0; }
}
@media (max-width: 559px) {
  .rv-v-pos { font-size: 60px; }
  .rv-v-pts { font-size: 18px; }
  .rv-v-actions .rv-rerun { flex: 1 1 100%; }
  .rv-v-pair { flex: 1 1 100%; }
  .rv-h2 { font-size: 22px; }
  .rv-chart .pbc-plot { margin-right: 70px; height: 190px; }
  .rv-fx-tier { display: none; }
  .rv-share-title { font-size: 22px; }
  .rv-share-body { padding: 16px; }
}

/* ================================================================ Profile (08-profile) */
.pf { display: flex; flex-direction: column; }
.pf-strip-in { display: flex; align-items: center; gap: 24px 40px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; max-width: calc(1120px + 2 * var(--gutter)); }
.pf-h1 { font-size: 40px; line-height: 1; }
.pf-gap { flex: 1; }
.pf-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-stat { background: var(--ink); color: #FFFFFF; min-width: 112px; padding: 12px 16px 11px; display: flex; flex-direction: column; gap: 6px; border-radius: var(--r-award); box-shadow: var(--btn1-shadow), 0 6px 14px rgba(16, 40, 60, 0.28); }
.pf-stat-v-row { display: flex; align-items: baseline; gap: 4px; }
.pf-stat-v { font-weight: 800; font-size: 38px; line-height: 0.9; color: var(--accent-ink); letter-spacing: -0.02em; }
.pf-stat-sub { font-size: 15px; font-weight: 700; color: var(--accent-ink); }
.pf-stat-k { font-size: 12px; font-weight: 700; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.pf-seasons { display: flex; flex-direction: column; gap: 10px; padding-top: 26px; max-width: calc(1120px + 2 * var(--gutter)); }
.pf-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pf-h2 { font-size: 22px; font-weight: 800; flex: 1; }
.pf-h3 { font-size: 18px; font-weight: 800; }
.pf-sec-note { font-size: 13px; color: var(--ink-muted); }
.pf-list { display: flex; flex-direction: column; }
.pf-row {
  display: grid; grid-template-columns: 96px 150px minmax(0, 1fr) 70px 168px; gap: 16px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line-light); text-decoration: none; color: var(--ink); min-height: 44px;
}
.pf-row:last-child { border-bottom: none; }
.pf-row:hover { background: #FFFAF5; }
.pf-row:hover .s-open { filter: brightness(1.25); }
/* v9.2 (D180): a full-width row in a glass panel shows focus as a ring just
   inside its edge with the panel's own rounded corners, so the panel's
   clipping never cuts it, whichever row it is (the first one sits in the
   panel's corners); the fixture rows below do the same */
.pf-row:focus-visible { outline-offset: var(--focus-row); border-radius: var(--r-in-panel); }
.s-pos { font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.s-form { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-form-n { font-weight: 700; font-size: 15px; }
.s-date { font-size: 12px; color: var(--ink-muted); }
.s-mid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-fc { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.s-fc.is-beat { font-weight: 700; color: #1E6B3B; }
.s-fc:empty { display: none; }
.s-pts { display: flex; flex-direction: column; align-items: flex-end; }
.s-pts-n { font-weight: 800; font-size: 22px; line-height: 1; }
.s-pts-k { font-size: 11px; color: var(--ink-muted); }
.s-open { justify-self: end; font-weight: 800; font-size: 14px; background: var(--btn-bg); color: var(--btn-ink); padding: 9px 26px 9px 14px; clip-path: var(--torn-sm); white-space: nowrap; border-radius: var(--r-btn) 0 0 var(--r-btn); box-shadow: var(--btn1-shadow); }
.s-norec { color: var(--ink-muted); }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 28px; padding-bottom: 40px; max-width: calc(1120px + 2 * var(--gutter)); }
.pf-panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.pf-panel-top { display: flex; align-items: baseline; gap: 10px; }
.pf-panel-top .pf-h3 { flex: 1; }
.pf-panel-sub { font-size: 13px; color: var(--ink-muted); margin-top: -8px; }
.pf-best-fin { display: flex; align-items: flex-end; gap: 12px; }
.pf-best-pos { font-weight: 800; font-size: 48px; line-height: 0.9; letter-spacing: -0.03em; }
.pf-best-line { font-size: 14px; font-weight: 600; padding-bottom: 4px; }
.pf-best-open { align-self: flex-start; }
.pf-pitch { aspect-ratio: 1.08; filter: drop-shadow(0 10px 14px rgba(60, 20, 0, 0.18)); }
.pf-tile { width: clamp(54px, 15cqw, 76px); display: flex; flex-direction: column; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); border-radius: var(--r-tile); overflow: hidden; }
.pf-tile-pos { color: #FFFFFF; text-align: center; font-weight: 800; font-size: 11px; padding: 3px 0; line-height: 1.2; }
.pf-tile-pos.pos-GK, .pf-tile-pos.pos-W, .pf-tile-pos.pos-MID { color: var(--ink); }
.pf-tile-lab { background: #FFFFFF; color: var(--ink); text-align: center; padding: 3px 3px 4px; display: flex; flex-direction: column; line-height: 1.15; }
.pf-tile-name { font-weight: 800; font-size: clamp(9px, 2.6cqw, 11px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tile-season { font-size: clamp(9px, 2.4cqw, 10px); font-weight: 600; color: var(--ink-muted); }
.pf-xi-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.pf-cab-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 8px; }
.pf-cab-cell { display: grid; grid-template-rows: 50px 30px 22px; justify-items: center; align-items: center; gap: 6px; text-align: center; opacity: 0.45; }
.pf-cab-cell.is-won { opacity: 1; }
.pf-cab-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--gloss-award), #F3EEEA; filter: grayscale(1); border-radius: var(--r-award); box-shadow: var(--award-shadow); }
.pf-cab-icon svg { width: 32px; height: 32px; }
.pf-cab-cell.is-won .pf-cab-icon { background: var(--gloss-award), #FFF1C9; filter: none; box-shadow: inset 0 0 0 2px #C9971C, var(--award-shadow); }
.pf-cab-name { font-size: 11px; font-weight: 700; line-height: 1.2; height: 30px; display: flex; align-items: center; justify-content: center; }
.pf-cab-n { font-size: 16px; font-weight: 800; }
.pf-cab-cell.is-won .pf-cab-n { font-size: 13px; padding: 1px 9px; background: var(--ink); color: var(--accent-ink); border-radius: var(--r-pill); }
.pf-loading { font-size: 13px; color: var(--ink-muted); }
.pf-empty { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding-top: 36px; padding-bottom: 48px; max-width: calc(1120px + 2 * var(--gutter)); }
.pf-empty-h { font-size: 30px; }
.pf-empty-p { font-size: 16px; max-width: 560px; }
.pf-missing, .pf-fallback { padding-top: 28px; padding-bottom: 40px; }
.pf-fallback-pitch { max-width: 520px; }
.rv-back { text-decoration: none; white-space: nowrap; }
@media (max-width: 899px) {
  .pf-strip-in { gap: 16px; }
  .pf-gap { display: none; }
  .pf-stats { width: 100%; }
  .pf-stat { flex: 1 1 96px; min-width: 0; padding: 10px 12px 9px; }
  .pf-stat-v { font-size: 30px; }
  .pf-row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "pos form pts" "pos mid open"; gap: 8px 12px; padding: 12px 14px; }
  .pf-row .s-pos { grid-area: pos; font-size: 28px; }
  .pf-row .s-form { grid-area: form; }
  .pf-row .s-mid { grid-area: mid; }
  .pf-row .s-pts { grid-area: pts; }
  .pf-row .s-open { grid-area: open; }
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .pf-h1 { font-size: 32px; }
  .pf-stat { flex: 1 1 30%; }
  .pf-stat-v { font-size: 26px; }
  .pf-row { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "pos form pts" "mid mid mid" "open open open"; }
  .pf-row .s-open { justify-self: start; }
  .pf-cab-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ================================================================ Rules (09-rules) */
.how-strip { max-width: calc(1120px + 2 * var(--gutter)); padding-top: 30px; padding-bottom: 30px; }
.how-title { font-size: 44px; line-height: 1; }
.how-strip .strip-sub { font-size: 18px; font-weight: 600; margin-top: 8px; }
.how-main { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 30px; padding-bottom: 60px; max-width: calc(1120px + 2 * var(--gutter)); }
.how-toc { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--ink); padding-left: 6px; }
.how-toc-link { text-decoration: none; color: var(--ink); display: flex; gap: 10px; align-items: center; padding: 8px 10px; font-weight: 600; font-size: 15px; min-height: 44px; border-radius: var(--r-btn); }
.how-toc-link:hover { background: var(--current-nav); }
.how-toc-link.is-on { background: var(--current-nav); font-weight: 800; }
.how-toc-n { font-size: 12px; font-weight: 800; color: var(--ink-muted); }
.how-body { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.how-sec { scroll-margin-top: 20px; }
/* v9.1 (fix 2): the number and the title share a baseline AND a vertical
   centre at every size: the number is set at the title's size on the title's
   baseline, and its pill is trimmed to the cap height with even padding, so
   the pill's centre is the title's cap centre */
.how-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; --how-h: 30px; }
.how-n {
  font-weight: 800; font-size: var(--how-h); line-height: 1; letter-spacing: -0.02em; color: var(--accent-ink); background: var(--ink);
  padding: 0.2em 0.36em; border-radius: var(--r-btn); box-shadow: var(--btn1-shadow); text-box: trim-both cap alphabetic;
  font-variant-numeric: tabular-nums;
}
.how-h2 { font-size: var(--how-h); line-height: 1.1; }
.how-h3 { font-size: 18px; margin: 18px 0 8px; }
.how-p { font-size: 16px; line-height: 1.55; max-width: 680px; margin-bottom: 12px; }
.how-list { margin: 0 0 6px; padding-left: 20px; font-size: 16px; line-height: 1.5; max-width: 680px; }
.how-list li { margin-bottom: 6px; }
.how-steps { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.how-step { flex: 1 1 200px; background: var(--glass-bg); border: 1px solid var(--glass-edge); border-radius: var(--r-panel); box-shadow: var(--glass-shadow); padding: 14px 16px; display: flex; gap: 12px; }
.how-step-n { font-weight: 800; font-size: 34px; line-height: 0.9; color: #C2410C; }
.how-step-t { display: flex; flex-direction: column; gap: 4px; }
.how-step-h { font-weight: 800; font-size: 17px; }
.how-step-d { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.how-pos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.how-pos-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; background: var(--glass-bg); border: 1px solid var(--glass-edge); font-size: 14px; font-weight: 600; border-radius: var(--r-pill); box-shadow: var(--btn2-shadow); }
.how-example { max-width: 760px; }
.how-row { cursor: default; }
.how-row:hover { border-color: rgba(0, 0, 0, 0.08); }
.how-defs { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; max-width: 760px; }
.how-def { display: flex; gap: 10px; align-items: baseline; }
.how-def-k { font-weight: 800; font-size: 14px; min-width: 150px; }
.how-def-v { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.how-tiers { display: flex; gap: 8px; flex-wrap: wrap; max-width: 760px; }
.how-tier { display: flex; flex-direction: column; gap: 6px; flex: 1 1 110px; }
.how-tier-b { height: 54px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; border-radius: var(--r-btn); box-shadow: var(--chip-shadow); background-image: var(--gloss-chip); }
.how-tier-r { font-size: 13px; font-weight: 600; text-align: center; }
.how-traits { max-width: 760px; }
.how-tg { color: #FFFFFF; font-size: 13px; font-weight: 800; padding: 6px 14px; }
.how-tg-def { background: var(--p-def); } .how-tg-mid { background: #1E7A43; } .how-tg-w { background: #B4500F; } .how-tg-all { background: var(--ink); }
.how-tr { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 9px 14px; border-bottom: 1px solid var(--line-light); }
.how-tr-k { font-weight: 800; font-size: 15px; }
.how-tk-def { color: var(--p-def-text); } .how-tk-mid { color: var(--p-mid-text); } .how-tk-w { color: var(--p-w-text); } .how-tk-all { color: var(--ink); }
.how-tr-v { font-size: 14px; line-height: 1.4; }
.how-cards { display: flex; gap: 10px; flex-wrap: wrap; max-width: 760px; margin-bottom: 14px; }
.how-pf { flex: 1 1 200px; background: var(--glass-bg); border: 2px solid var(--mid); border-radius: var(--r-perk); box-shadow: var(--perk-shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.how-pf-k { font-weight: 800; font-size: 17px; color: var(--mid-text); }
.how-pf-v { font-size: 14px; line-height: 1.45; }
.how-awards { max-width: 520px; margin-bottom: 12px; }
.how-aw { display: flex; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-light); }
.how-aw-k { flex: 1; font-size: 15px; font-weight: 600; }
.how-aw-v { font-weight: 800; font-size: 18px; }
.how-perk { flex: 1 1 220px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--gloss-chip), var(--pc-solid); color: #FFFFFF; border-radius: var(--r-perk); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px color-mix(in srgb, var(--pc) 35%, transparent); }
.how-perk.perk-link { color: var(--ink); }
.how-perk-top { display: flex; align-items: center; gap: 8px; }
.how-perk-t { font-weight: 800; font-size: 18px; flex: 1; }
.how-perk-b { font-weight: 800; font-size: 13px; padding: 2px 10px; background: #FFFFFF; color: var(--pc-text); white-space: nowrap; border-radius: var(--r-pill); }
.how-perk.perk-link .how-perk-b { background: var(--ink); color: #FFFFFF; }
.how-perk-v { font-size: 14px; line-height: 1.45; }
.how-labels { display: flex; gap: 8px; flex-wrap: wrap; }
/* v9.1: the finishes, one example each on the grass */
.how-fins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 760px; }
.how-fin { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.how-fin-grass { background: var(--grass); border-radius: var(--r-btn); padding: 22px 0; display: flex; justify-content: center; box-shadow: var(--btn2-shadow); }
.how-fin-grass .slot { --tile-w: 80px; cursor: default; }   /* 19px number: large text (3:1) */
.how-fin-grass .slot:hover { filter: none; }
.how-fin-cap { font-size: 14px; line-height: 1.4; }
.how-labels .perk-tag { font-size: 13px; padding: 4px 10px; }
.how-rivals { display: flex; gap: 3px; max-width: 760px; margin-bottom: 12px; border-radius: var(--r-btn); overflow: hidden; box-shadow: var(--btn2-shadow); }
.how-rv { flex-basis: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.how-rv-k { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.how-rv-n { font-size: 12px; }
.how-rv-elite { background: var(--ink); color: #FFFFFF; }
.how-rv-contenders { background: var(--ink-muted); color: #FFFFFF; }
.how-rv-midtable { background: #CFC6BE; color: var(--ink); }
.how-rv-relegation { background: var(--danger); color: #FFFFFF; }
@media (max-width: 899px) {
  .how-main { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 16px; }
  .how-toc { position: static; flex-direction: row; flex-wrap: wrap; border-left: none; padding-left: 0; gap: 4px; }
  .how-toc-link { padding: 8px 12px; border: 1px solid var(--glass-edge); background: var(--btn2-bg); box-shadow: var(--btn2-shadow); }
  .how-body { gap: 36px; }
}
@media (max-width: 559px) {
  .how-title { font-size: 34px; }
  .how-head { --how-h: 24px; }
  .how-def { flex-direction: column; gap: 2px; }
  .how-def-k { min-width: 0; }
  .how-tr { grid-template-columns: 100px minmax(0, 1fr); }
  .how-rivals { flex-wrap: wrap; }
  .how-rv { flex: 1 1 45% !important; }
  .how-fins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================ touch (spec 6: targets at least 44px) */
/* the open slot's "+": dark on the light tile over the grass (6.7:1; white was 2.6:1) */
.slot.open .slot-plus { color: var(--ink); }
@media (pointer: coarse) {
  .hl-chip, .rv-filter { min-height: 44px; }
  .rv-hl-cells .rv-res { height: 44px; min-width: 44px; }
  .btn-q { position: relative; }
  .btn-q::after { content: ""; position: absolute; inset: -8px; }
  /* a winner's name in an award row: a taller hit area, the line unchanged */
  .rv-w-btn, .rv-g-name, .rv-g-assist { display: inline-block; padding: 14px 0; margin: -14px 0; }
  .rv-g-name, .rv-w-btn { min-width: 44px; }   /* a short name ("Kanu") still gives a 44px target */
  .award-mark.xm::after { content: ""; position: absolute; inset: -12px; }   /* (the mark is placed absolutely in its tier block) */
  .aw-label .aw-q::after { inset: -12px; }   /* the Dark horse's "?": 20px drawn, 44px to tap */
}