/* Gaffer Lab - Premier League styled glassmorphism UI
   Tokens: PL purple #141419, PL green #F2C14E, PL cyan #19E6C1, PL pink #FF3D8A, violet #8B5CF6 */
:root {
  --purple: #141419;
  --purple-deep: #08080B;
  --purple-mid: #1E1E27;
  --green: #F2C14E;
  --cyan: #19E6C1;
  --pink: #FF3D8A;
  --violet: #8B5CF6;
  --gold: #FFD166;

  /* light palette (viewer default) */
  --bg: #F7F3EA;
  --bg-2: #ECE7DA;
  --ink: #141419;
  --ink-2: #4A4842;
  --ink-3: #7A786F;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(17,17,19, 0.12);
  --glass-shadow: 0 10px 30px rgba(17,17,19, 0.10);
  --row-hover: rgba(17,17,19, 0.05);
  --accent: #141419;
  --accent-ink: #ffffff;
  --accent-2: #A67C00;
  --link: #7C3AED;
  --blob-1: rgba(242,193,78, 0.35);
  --blob-2: rgba(25,230,193, 0.30);
  --blob-3: rgba(255,61,138, 0.18);
  --pitch-1: #2E9E5B;
  --pitch-2: #278A50;
  --chip-bg: rgba(17,17,19, 0.08);
  --menu-bg: rgba(255, 255, 255, 0.97);
  --scroll-thumb: rgba(17,17,19, 0.28);
  --scroll-thumb-hover: rgba(17,17,19, 0.5);
  --good: #0E9F5A;
  --warn: #C77800;
  --bad: #D0113F;
  --fdr1: #257D5A; --fdr2: #2EE6A6; --fdr3: #FFD166; --fdr4: #FF3B5C; --fdr5: #8A1538;
  --fdr1-ink: #fff; --fdr2-ink: #08080B; --fdr3-ink: #3A2A00; --fdr4-ink: #fff; --fdr5-ink: #fff;
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08080B;
    --bg-2: #121218;
    --ink: #FFFFFF;
    --ink-2: #D7D5D0;
    --ink-3: #9A988F;
    --glass: rgba(255, 255, 255, 0.07);
    --glass-strong: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.16);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    --row-hover: rgba(255, 255, 255, 0.06);
    --accent: #F2C14E;
    --accent-ink: #08080B;
    --accent-2: #19E6C1;
    --link: #19E6C1;
    --blob-1: rgba(242,193,78, 0.22);
    --blob-2: rgba(25,230,193, 0.16);
    --blob-3: rgba(255,61,138, 0.22);
    --pitch-1: #1F7A45;
    --pitch-2: #1A6B3C;
    --chip-bg: rgba(255, 255, 255, 0.10);
  --menu-bg: rgba(20,20,26, 0.97);
  --scroll-thumb: rgba(255, 255, 255, 0.22);
  --scroll-thumb-hover: rgba(242,193,78,0.6);
    --menu-bg: rgba(20,20,26, 0.97);
    --scroll-thumb: rgba(255, 255, 255, 0.22);
    --scroll-thumb-hover: rgba(242,193,78,0.6);
    --good: #2EE6A6;
    --warn: #FFD166;
    --bad: #FF4D7A;
  }
}
:root[data-theme="dark"] {
  --bg: #08080B;
  --bg-2: #121218;
  --ink: #FFFFFF;
  --ink-2: #D7D5D0;
  --ink-3: #9A988F;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --row-hover: rgba(255, 255, 255, 0.06);
  --accent: #F2C14E;
  --accent-ink: #08080B;
  --accent-2: #19E6C1;
  --link: #19E6C1;
  --blob-1: rgba(242,193,78, 0.22);
  --blob-2: rgba(25,230,193, 0.16);
  --blob-3: rgba(255,61,138, 0.22);
  --pitch-1: #1F7A45;
  --pitch-2: #1A6B3C;
  --chip-bg: rgba(255, 255, 255, 0.10);
  --good: #2EE6A6;
  --warn: #FFD166;
  --bad: #FF4D7A;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before, body::after, .blob {
  content: '';
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
body::before { width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; background: var(--blob-1); top: -20vw; right: -15vw; }
body::after { width: 50vw; height: 50vw; max-width: 600px; max-height: 600px; background: var(--blob-2); bottom: -20vw; left: -15vw; }
.blob { width: 40vw; height: 40vw; max-width: 500px; max-height: 500px; background: var(--blob-3); top: 40vh; left: 35vw; }
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: drift 28s ease-in-out infinite alternate; }
  body::after { animation: drift 34s ease-in-out infinite alternate-reverse; }
}
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-6vw, 5vh); } }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 0.95rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--link); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.eyebrow { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.hidden { display: none !important; }

/* Shell */
.topbar {
  position: sticky; top: 0; z-index: 75; /* above every in-page panel and menu (sim settings 66, dropdown menus 70), below the drawer (80+) */
  background: var(--glass-strong);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}
.topbar-inner {
  max-width: 1400px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--violet) 100%);
  display: grid; place-items: center; color: var(--green);
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  box-shadow: 0 6px 16px rgba(17,17,19, 0.35);
}
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.brand-sub { font-size: 11px; color: var(--ink-3); display: block; margin-top: -3px; }
.nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav button {
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: 6px 10px; font-weight: 600; font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav button:hover { background: var(--chip-bg); color: var(--ink); }
.nav button.active { background: var(--accent); color: var(--accent-ink); }
.nav button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.team-import { display: flex; gap: 6px; align-items: center; }
.team-import input {
  width: 104px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--ink);
}
.team-import input::placeholder { color: var(--ink-3); }
.btn {
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink);
  border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13px;
  transition: transform .1s, background .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: var(--glass-strong); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.danger { color: var(--bad); }
.theme-toggle { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; }

main { max-width: 1320px; margin: 0 auto; padding-block: 20px 60px; padding-inline: 20px; }
.view { display: none; }
.view.active { display: block; animation: rise .25s ease-out; }
@keyframes rise { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view.active { animation: none; } }

.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.view-head p { color: var(--ink-2); max-width: 70ch; }

/* Glass panels */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.panel { padding: 16px 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h2 { display: flex; align-items: center; gap: 8px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
@media (max-width: 900px) { .grid-main { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { padding: 14px 16px; }
.tile .label { font-size: 11px; letter-spacing: .03em; color: var(--ink-3); font-weight: 700; font-family: var(--font-display); }
.tile .value { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.tile.accent .value { color: var(--accent); }

/* Countdown */
.countdown { display: flex; gap: 10px; }
.countdown div { text-align: center; min-width: 54px; }
.countdown b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); max-height: 70vh; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 7px 8px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--glass-border); }
th { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; position: sticky; top: 0; background: var(--menu-bg); cursor: pointer; user-select: none; z-index: 1; }
th.sorted { color: var(--accent); }
th.static { cursor: default; }
th[data-sort]:hover, th[data-tsort]:hover, th[data-sqsort]:hover { color: var(--ink); }
th.sorted::after { content: ' \25BE'; }
th.sorted.asc::after { content: ' \25B4'; }
td.num, th.num { text-align: right; }
tbody tr:hover { background: var(--row-hover); }
tbody tr.clickable { cursor: pointer; }
tr.mine td { box-shadow: inset 3px 0 0 var(--accent); }
.player-cell { display: flex; align-items: center; gap: 8px; }
.player-cell .name { font-weight: 700; }
.player-cell .meta { font-size: 11px; color: var(--ink-3); }

/* Pills & chips */
.pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; font-family: var(--font-display); line-height: 1.5; }
.pos-1 { background: #FFD166; color: #141419; }
.pos-2 { background: #F2C14E; color: #08080B; }
.pos-3 { background: #19E6C1; color: #08080B; }
.pos-4 { background: #FF3D8A; color: #fff; }
.fdr { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 3px 5px; border-radius: 6px; font-size: 10.5px; font-weight: 700; font-family: var(--font-display); font-variant-numeric: tabular-nums; line-height: 1.2; }
.fdr i { font-style: normal; font-size: 8px; font-weight: 800; opacity: .8; margin-left: 2px; align-self: flex-start; }
.fdr .crest { width: 12px; height: 12px; margin-right: 3px; }
.fdr .crest img { filter: drop-shadow(0 0 1px rgba(255,255,255,.6)); }
.fdr-1 { background: var(--fdr1); color: var(--fdr1-ink); }
.fdr-2 { background: var(--fdr2); color: var(--fdr2-ink); }
.fdr-3 { background: var(--fdr3); color: var(--fdr3-ink); }
.fdr-4 { background: var(--fdr4); color: var(--fdr4-ink); }
.fdr-5 { background: var(--fdr5); color: var(--fdr5-ink); }
.fdr-0 { background: var(--chip-bg); color: var(--ink-3); }
.fdr-row { display: inline-flex; gap: 3px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--chip-bg); color: var(--ink-2); }
.tag.good { background: rgba(242,193,78, 0.18); color: var(--good); }
.tag.warn { background: rgba(255, 209, 102, 0.22); color: var(--warn); }
.tag.bad { background: rgba(255,61,138, 0.16); color: var(--bad); }
.tag.info { background: rgba(25,230,193, 0.16); color: var(--link); }
.delta-up { color: var(--good); font-weight: 700; }
.delta-down { color: var(--bad); font-weight: 700; }

/* Controls */
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.controls label { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.controls select, .controls input[type="text"], .controls input[type="number"], .controls input[type="search"] {
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); min-width: 0;
}
.controls select option { color: #141419; background: #fff; }
.controls input[type="search"] { min-width: 130px; flex: 1 1 130px; }
.controls input[type="range"] { accent-color: var(--accent); }
.seg { display: inline-flex; background: var(--chip-bg); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.seg button.active { background: var(--accent); color: var(--accent-ink); }

/* Pitch */
.pitch {
  position: relative; border-radius: var(--radius); overflow: visible; padding: 26px 8px 10px;
  background: repeating-linear-gradient(180deg, var(--pitch-1) 0 64px, var(--pitch-2) 64px 128px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), var(--glass-shadow);
}
.pitch .marks { position: absolute; inset: 10px; pointer-events: none; border: 2px solid rgba(255,255,255,0.4); border-radius: 6px; }
.pitch .marks i { position: absolute; border: 2px solid rgba(255,255,255,0.4); display: block; }
.pitch .marks .box { left: 50%; transform: translateX(-50%); width: 46%; height: 90px; border-top: 0; top: 0; border-radius: 0 0 6px 6px; }
.pitch .marks .box.bottom { top: auto; bottom: 0; border-top: 2px solid rgba(255,255,255,0.4); border-bottom: 0; border-radius: 6px 6px 0 0; }
.pitch .marks .six { left: 50%; transform: translateX(-50%); width: 22%; height: 34px; border-top: 0; top: 0; }
.pitch .marks .circle { left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%); border-radius: 50%; }
.pitch .marks .mid { left: 0; right: 0; top: 50%; border-width: 1px 0 0; }
.pitch-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pitch-tools .seg button { padding: 4px 10px; }
.pitch-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.bench { margin-top: 4px; background: rgba(0,0,0,0.28); border-radius: 12px; padding: 10px 6px 4px; position: relative; z-index: 1; }
.bench .eyebrow { color: rgba(255,255,255,0.75); text-align: center; margin-bottom: 8px; }

/* Player card */
.pcard {
  width: 122px; background: #fff; color: #141419; border-radius: 12px; overflow: visible; text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28); position: relative; cursor: pointer; transition: transform .12s, box-shadow .12s;
  border: 2px solid #fff; font-family: var(--font-body);
}
.pcard:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,0.32); }
.pcard.cap { border-color: var(--pink); }
.pcard.warn { border-color: var(--gold); }
.pcard.out { border-color: #FF3B5C; }
.pcard.benched { opacity: .7; filter: saturate(.7); }
.pcard .ph { position: relative; height: 74px; border-radius: 10px 10px 0 0; overflow: hidden; background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #E9E7E2 70%); }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pcard .ph .shirt-fb { display: none; place-items: center; width: 100%; height: 100%; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .06em; }
.pcard .ph .club { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.pcard .ph .xp-pill { position: absolute; left: 5px; top: 5px; background: var(--purple); color: var(--green); font-family: var(--font-display); font-weight: 800; font-size: 11px; padding: 1px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.pcard .nm-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 5px 6px 3px; }
.pcard .nm { font-weight: 800; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); text-align: left; }
.pcard .pr { font-size: 10px; font-weight: 700; color: var(--purple); background: rgba(17,17,19,0.08); border-radius: 5px; padding: 1px 4px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.pcard .body { display: grid; gap: 2px; padding: 0 3px 3px; }
.pcard .body.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pcard .body.cols-5 { grid-template-columns: repeat(5, 1fr); }
.pcard .cell { border-radius: 5px; padding: 3px 1px 2px; line-height: 1.1; min-width: 0; background: rgba(17,17,19,0.06); }
.pcard .cell b { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pcard .cell small { display: block; font-size: 8px; font-weight: 700; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: clip; letter-spacing: 0; }
.pcard .cell.fdr-1 { background: var(--fdr1); color: var(--fdr1-ink); }
.pcard .cell.fdr-2 { background: var(--fdr2); color: var(--fdr2-ink); }
.pcard .cell.fdr-3 { background: var(--fdr3); color: var(--fdr3-ink); }
.pcard .cell.fdr-4 { background: var(--fdr4); color: var(--fdr4-ink); }
.pcard .cell.fdr-5 { background: var(--fdr5); color: var(--fdr5-ink); }
.pcard .cell.fdr-0 { background: repeating-linear-gradient(45deg, rgba(17,17,19,0.12) 0 3px, transparent 3px 6px); color: #4A4842; }
.pcard .cell.stat { background: rgba(17,17,19,0.06); color: #141419; }
.pcard .cell.stat.hi { background: rgba(242,193,78,0.28); }
.pcard .cell.stat.lo { background: rgba(255,61,138,0.16); }
.pcard .badge { position: absolute; top: -9px; right: -8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; font-family: var(--font-display); background: var(--pink); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); z-index: 2; }
.pcard .badge.vc { background: #141419; }
.pcard .flag { position: absolute; top: -9px; left: -8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--gold); color: #141419; font-weight: 800; z-index: 2; }
.pcard .flag.red { background: #FF3B5C; color: #fff; }

/* Findings list */
.findings { display: flex; flex-direction: column; gap: 8px; }
.finding { display: grid; grid-template-columns: 4px 1fr; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-border); }
.finding .bar { border-radius: 2px; background: var(--ink-3); }
.finding.good .bar { background: var(--good); }
.finding.warn .bar { background: var(--warn); }
.finding.bad .bar { background: var(--bad); }
.finding.info .bar { background: var(--cyan); }
.finding b { font-family: var(--font-display); font-size: 13px; }
.finding p { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }

/* Lists */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--glass-border); }
.list-row:last-child { border-bottom: 0; }
.list-row.clickable { cursor: pointer; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .meta { font-size: 11.5px; color: var(--ink-3); }
.list-row .val { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.rank { width: 22px; text-align: center; font-family: var(--font-display); font-size: 12px; color: var(--ink-3); font-weight: 700; }

/* Bars */
.bar-track { height: 6px; background: var(--chip-bg); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 3px; }

/* Ticker grid */
.ticker th:first-child, .ticker td:first-child { position: sticky; left: 0; background: var(--menu-bg); z-index: 2; text-align: left; }
.ticker th:first-child { z-index: 3; }
.ticker td { padding: 4px 4px; text-align: center; }
.ticker th { text-align: center; }
.ticker .fdr { width: 100%; min-width: 46px; padding: 4px 3px; flex-direction: column; line-height: 1.15; }
.table-wrap.fit table { width: 100%; table-layout: auto; }
.ticker th:first-child, .ticker td:first-child { min-width: 150px; }
.ticker .fdr small { font-weight: 500; opacity: .85; font-size: 9px; }
.ticker .dgw { box-shadow: 0 0 0 2px var(--cyan) inset; }
.ticker .blank { background: repeating-linear-gradient(45deg, var(--chip-bg) 0 4px, transparent 4px 8px); color: var(--ink-3); }
.ticker .stack2 { display: flex; flex-direction: column; gap: 2px; }

/* Drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(8,8,11, 0.45); z-index: 80; display: none; }
.drawer-backdrop.open { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 100vw); z-index: 90;
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  background: var(--bg); border-left: 1px solid var(--glass-border); padding: 20px;
}
.drawer.open { transform: none; }
.drawer .close { position: absolute; top: 14px; right: 14px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; }
.kv > div { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 8px 10px; }
.kv .k { font-size: 10.5px; letter-spacing: .03em; color: var(--ink-3); font-weight: 700; font-family: var(--font-display); }
.kv .v { font-family: var(--font-display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }

/* Transfers */
.swap { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-border); }
.swap .arrow { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
.swap .who { min-width: 0; }
.swap .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swap .who span { font-size: 11.5px; color: var(--ink-3); }

/* Charts */
.chart svg { width: 100%; height: auto; display: block; }
.chart text { fill: var(--ink-3); font-size: 10px; font-family: var(--font-body); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .area { fill: var(--accent); opacity: .12; }
.chart .grid line { stroke: var(--glass-border); }
.chart .dot { fill: var(--accent); }
.chart .bar { fill: var(--accent); opacity: .85; }
.chart .bar.avg { fill: var(--ink-3); opacity: .5; }
.chart .bar.conceded { fill: var(--pink); opacity: .85; }

/* Toast / empty / loading */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--purple); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.3); opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; }
.empty { padding: 32px 16px; text-align: center; color: var(--ink-3); }
.loader { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--glass-border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.status-strip { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(242,193,78,.25); display: inline-block; }

textarea { width: 100%; min-height: 90px; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); font: inherit; resize: vertical; }

/* Hero on overview */
.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: stretch; }
.hero .tiles { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } }
.hero-main { padding: 22px 24px; background: linear-gradient(135deg, var(--purple) 0%, #2A2A36 60%, var(--violet) 100%); color: #fff; border: 0; position: relative; overflow: hidden; }
.hero-main::after { content: ''; position: absolute; width: 320px; height: 320px; right: -100px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(242,193,78,.55), transparent 65%); }
.hero-main h1 { font-size: 1.7rem; color: #fff; position: relative; }
.hero-main .eyebrow { color: var(--green); }
.hero-main p { color: rgba(255,255,255,.82); position: relative; }
.hero-main .countdown b { color: #fff; }
.hero-main .countdown span { color: rgba(255,255,255,.65); }
.hero-import { display: flex; gap: 8px; margin-top: 16px; position: relative; flex-wrap: wrap; }
.hero-import input { flex: 1; min-width: 160px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }
.hero-import input::placeholder { color: rgba(255,255,255,.6); }
.hero-import .btn.primary { background: var(--green); color: var(--purple-deep); }

@media (max-width: 600px) {
  .topbar-inner { padding: 8px 16px; gap: 10px; }
  .brand-sub { display: none; }
  main { padding-inline: 16px; }
  .pcard { width: 92px; }
  .pcard .ph { height: 56px; }
  .pcard .cell small { font-size: 7.5px; }
  .pitch-row { gap: 6px; }
  .bench .pcard { width: 80px; }
  .tile .value { font-size: 22px; }
  .swap { grid-template-columns: 1fr; }
  .swap .arrow { transform: rotate(90deg); justify-self: center; }
}

/* Abbreviations with hover definitions */
abbr.ab { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* Simulator */
.pcard.slot.empty { background: rgba(255,255,255,0.3); border: 2px dashed rgba(255,255,255,0.75); box-shadow: none; min-height: 132px; display: grid; place-items: center; }
.pcard.slot.empty .ph { display: none; }
.pcard.slot.empty .nm { color: #fff; opacity: .9; font-size: 13px; }
.pcard.slot.selected { outline: 3px solid var(--cyan); outline-offset: 2px; }

.pcard.slot.drag-over { transform: scale(1.06); outline: 3px solid var(--green); outline-offset: 2px; }
.pcard .badge.setcap { border: 0; cursor: pointer; background: rgba(17,17,19,0.45); opacity: 0; transition: opacity .15s; }
.pcard:hover .badge.setcap { opacity: 1; }
.pcard .flag.rm { border: 0; cursor: pointer; background: #FF3B5C; color: #fff; font-size: 13px; line-height: 1; opacity: .55; transition: opacity .15s; } /* always visible (touch screens have no hover), full on hover */
.pcard:hover .flag.rm { opacity: 1; }
.pool { max-height: 70vh; overflow-y: auto; }
.pool-row { cursor: grab; }
.pool-row:active { cursor: grabbing; }
.pool-row .btn { flex-shrink: 0; }

/* Teams */
.crest { display: inline-grid; place-items: center; flex-shrink: 0; position: relative; }
.crest img { width: 100%; height: 100%; object-fit: contain; display: block; }
.crest-fb { display: none; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 8px; overflow: hidden; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.club-cell { display: flex; align-items: center; gap: 8px; }
.team-head { display: flex; align-items: center; gap: 14px; }
.pips { display: inline-flex; gap: 3px; }
.pip { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-family: var(--font-display); font-weight: 800; font-size: 10px; font-style: normal; }
.pip.W { background: var(--fdr2); color: var(--fdr2-ink); }
.pip.D { background: #CFCCC4; color: #141419; }
.pip.L { background: var(--fdr4); color: var(--fdr4-ink); }
.bar-fill.def { background: linear-gradient(90deg, var(--cyan), var(--accent-2)); }
.teams-table td { vertical-align: middle; }

/* Crest in player cells and cards */
.player-cell .crest { display: inline-grid; vertical-align: -3px; }
.pcard .ph .crest-corner { position: absolute; right: 4px; top: 4px; background: rgba(255,255,255,.85); border-radius: 50%; padding: 2px; display: grid; }
.pcard .ph.kit { background: linear-gradient(180deg, #F1EDE3 0%, #FBF9F4 100%); }
.pcard .ph.kit img { object-fit: contain; padding: 6px 0 2px; }

/* Glass dropdowns */
.dd { position: relative; display: inline-block; vertical-align: middle; }
select.dd-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; }
.dd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dd-btn:hover { background: var(--glass-strong); }
.dd-caret { font-size: 10px; opacity: .7; }
.dd-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 300px; overflow-y: auto; z-index: 70; padding: 5px; border-radius: 12px; background: var(--menu-bg); border: 1px solid var(--glass-border); box-shadow: 0 14px 34px rgba(0,0,0,.35); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.dd.open .dd-menu { display: block; }
.dd-menu button { display: block; width: 100%; text-align: left; padding: 6px 12px; border: 0; background: transparent; color: var(--ink); border-radius: 8px; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.dd-menu button:hover { background: var(--chip-bg); }
.dd-menu button + button { margin-top: 2px; }
.dd-menu button.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* Club squad table */
.squad-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.squad-tools input[type="search"] { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); }

/* Player drawer */
.dr-head { display: flex; gap: 14px; align-items: flex-start; padding-right: 40px; }
.dr-kit { width: 64px; height: 72px; flex-shrink: 0; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #fff 0%, #E9E7E2 70%); display: grid; place-items: center; overflow: hidden; }
.dr-kit img { width: 56px; height: 56px; object-fit: contain; }
.dr-tiles { margin-top: 14px; grid-template-columns: repeat(2, 1fr); }
.dr-tiles .tile { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); }
.dr-tiles .value { font-size: 22px; }
.xp-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; align-items: end; }
.xp-col { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.xp-col b { font-family: var(--font-display); font-size: 11px; font-variant-numeric: tabular-nums; }
.xp-col.dgw b { color: var(--link); }
.xp-bar-wrap { height: 64px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.xp-bar { width: 70%; min-height: 3px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.xp-fx { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.xp-fx .fdr { min-width: 0; width: 100%; padding: 2px 1px; font-size: 9px; }
.xp-fx .fdr i { font-size: 7px; margin-left: 1px; }
.xp-col small { font-size: 9px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 520px) { .xp-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Compare */
.cmp { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink-2); font-weight: 800; font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.cmp:hover { background: var(--glass-strong); color: var(--ink); }
.cmp.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.cmp-tray { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cmp-tray .grow { flex: 1; }
.cmp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--chip-bg); font-weight: 700; font-size: 12px; }
.cmp-chip button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 50%; }
.cmp-chip button:hover { color: var(--bad); background: var(--glass-strong); }

/* Set pieces */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sp-card { padding: 12px 14px; }
.sp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--font-display); }
.sp-row { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--glass-border); min-height: 44px; }
.sp-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; font-family: var(--font-display); line-height: 1.3; }
.sp-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sp-taker { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--chip-bg); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sp-taker.hit { outline: 2px solid var(--gold); }
.sp-taker.first { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.sp-taker.mine { box-shadow: 0 0 0 2px var(--cyan); }
.sp-taker em { font-style: normal; font-size: 10px; opacity: .7; font-family: var(--font-display); }

/* Number steppers */
.nw { display: inline-flex; align-items: center; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass); padding: 0 4px 0 0; vertical-align: middle; }
.nw input[type="number"] { border: 0; background: transparent; padding: 6px 4px 6px 10px; width: 56px; -moz-appearance: textfield; appearance: textfield; color: var(--ink); font-variant-numeric: tabular-nums; }
.nw input[type="number"]::-webkit-outer-spin-button, .nw input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nw input:focus-visible { outline: none; }
.nw:focus-within { outline: 2px solid var(--cyan); outline-offset: 1px; }
.nw-btns { display: flex; flex-direction: column; }
.nw-btn { border: 0; background: transparent; color: var(--ink-3); font-size: 9px; line-height: 1; padding: 2px 5px; cursor: pointer; border-radius: 4px; }
.nw-btn:hover { color: var(--accent); background: var(--chip-bg); }
.sp-taker.first .tag { background: rgba(8,8,11,.35); color: #fff; }

/* Simulator bench + open slots */
.bench-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bench-lbl { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.8); }
.pool-row.unaffordable { opacity: .45; }
.pool-row.unaffordable .val::after { content: ' £'; font-size: 9px; color: var(--bad); }

/* Simulator summary bar + squad view labels */
.sim-summary { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; padding: 10px 18px; margin-bottom: 14px; }
.sim-summary > div { display: flex; flex-direction: column; }
.sim-summary .k { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .03em; color: var(--ink-3); font-weight: 700; }
.sim-summary b { font-family: var(--font-display); font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sim-summary .grow { flex: 1; }
.pcard .sub-lbl { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); background: #141419; color: var(--green); font-family: var(--font-display); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; z-index: 2; }
.sim-summary .seg { flex-shrink: 0; white-space: nowrap; }
.seg { flex-shrink: 0; }
.seg button { white-space: nowrap; }

/* Pinned columns and column picker */
.pinned { position: sticky; z-index: 2; background: var(--menu-bg); }
th.pinned { z-index: 4; }
.pinned-last { box-shadow: 6px 0 10px -6px rgba(0,0,0,.45); }
tbody tr:hover .pinned { background: var(--menu-bg); }
.colpick { position: relative; display: inline-block; }
.colpick-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 200px; max-height: 340px; overflow-y: auto; padding: 8px; border-radius: 12px; background: var(--menu-bg); border: 1px solid var(--glass-border); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.colpick.open .colpick-menu { display: block; }
.colpick-menu label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.colpick-menu label:hover { background: var(--chip-bg); }
.colpick-menu label.fixed { opacity: .6; cursor: default; }
.colpick-menu input { accent-color: var(--accent); }

/* Tables that should show every row without their own scrollbar */
/* overflow must be visible on BOTH axes, or the wrapper stays a scroll container
   and the sticky header parks inside the table instead of against the page */
.table-wrap.full { max-height: none; overflow: visible; }
.table-wrap.full th { top: 56px; }

/* Compact league table: fits 20 clubs in one view */
.teams-table th, .teams-table td { padding: 5px 7px; }
.teams-table .club-cell { gap: 7px; }
.teams-table .club-cell b { font-size: 13px; }
.club-flags { display: flex; gap: 3px; margin-top: 2px; }
.club-flags .tag { padding: 0 5px; font-size: 9px; }
.teams-table .pip { width: 17px; height: 17px; font-size: 9px; border-radius: 4px; }
.teams-table .pips { gap: 2px; }
.bar-track.mini { width: 40px; height: 5px; display: inline-block; vertical-align: middle; background: var(--chip-bg); border-radius: 3px; overflow: hidden; }
.bar-track.mini .bar-fill { display: block; height: 100%; }
.teams-table td.rate { white-space: nowrap; }
.teams-table td.rate .small { margin-left: 4px; }
.fdr.compact { min-width: 0; padding: 3px 5px; gap: 1px; }
.fdr.compact i { margin-left: 1px; opacity: .9; }
.fdr.compact .crest { width: 15px; height: 15px; margin-right: 0; }
.teams-table .fdr-row { gap: 2px; }
@media (max-width: 1100px) { .table-wrap.full { overflow-x: auto; } .table-wrap.full th { top: 0; } }

/* Fixture strip with xP */
.fxs { display: inline-flex; gap: 3px; }
.fxs-cell { display: inline-flex; flex-direction: column; align-items: center; min-width: 34px; padding: 2px 3px; border-radius: 6px; line-height: 1.15; }
.fxs-cell b { font-family: var(--font-display); font-size: 11px; font-variant-numeric: tabular-nums; }
.fxs-cell small { display: inline-flex; align-items: center; gap: 1px; font-size: 8px; font-weight: 800; }
.fxs-cell small i { font-style: normal; opacity: .85; }
.fxs-cell .crest { width: 12px; height: 12px; }
.fxs-cell.fdr-1 { background: var(--fdr1); color: var(--fdr1-ink); } .fxs-cell.fdr-2 { background: var(--fdr2); color: var(--fdr2-ink); } .fxs-cell.fdr-3 { background: var(--fdr3); color: var(--fdr3-ink); } .fxs-cell.fdr-4 { background: var(--fdr4); color: var(--fdr4-ink); } .fxs-cell.fdr-5 { background: var(--fdr5); color: var(--fdr5-ink); } .fxs-cell.fdr-0 { background: var(--chip-bg); color: var(--ink-3); }
.pcard .cell small.badges { display: flex; justify-content: center; gap: 1px; }
.pcard .cell small.badges .crest { width: 11px; height: 11px; }
.pcard .cell small.badges i { font-style: normal; font-size: 7px; }

/* Simulator: pool rows, recommendation bubbles, menu, explorer */
/* Player pool table */
.pool-wrap { flex: 1; min-height: 0; overflow-y: auto; }
#poolTable { font-size: 12.5px; }
#poolTable th, #poolTable td { padding: 5px 6px; }
#poolTable tbody tr { cursor: pointer; }
.pool-name { display: flex; align-items: center; gap: 6px; }
.pool-name b { display: block; font-size: 12.5px; white-space: nowrap; }
.pool-name span { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--ink-3); }
.pool-name .add { width: 22px; height: 22px; padding: 0; justify-content: center; border-radius: 50%; font-weight: 800; flex-shrink: 0; }
#poolTable td.xp b { font-family: var(--font-display); font-size: 13.5px; }
#poolTable td.warn-txt { color: var(--warn); font-weight: 700; }
#poolTable .fx-col { padding-left: 8px; }
.pool-row.unaffordable { opacity: .5; }
.pool-row.unaffordable td.xp b::after { content: ' £'; font-size: 9px; color: var(--bad); }
.pcard.slot.empty { min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; }
.pcard.slot.empty .empty-mark { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #fff; opacity: .85; line-height: 1; }
.pcard.slot.empty .nm { color: #fff; font-size: 13px; letter-spacing: .04em; }
.pcard.slot.empty .ai-pill { margin-top: 4px; font-family: var(--font-display); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: var(--green); color: var(--purple-deep); white-space: nowrap; box-shadow: 0 2px 8px rgba(242,193,78,.45); }
.pcard.slot.empty { background: rgba(255,255,255,.22); border: 2px dashed rgba(255,255,255,.85); box-shadow: 0 0 0 0 rgba(242,193,78,.5); }
.pcard.slot.empty:hover { background: rgba(255,255,255,.34); border-color: var(--green); }
.pcard.slot.empty.selected, .pcard.slot.empty.open { background: rgba(255,255,255,.4); border-color: var(--green); border-style: solid; }
.pcard.slot.empty.open .ai-pill { background: var(--purple); color: var(--green); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .pcard.slot.empty:not(.open) { animation: slotPulse 2.4s ease-in-out infinite; }
  @keyframes slotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,193,78,.45); } 50% { box-shadow: 0 0 0 7px rgba(242,193,78,0); } }
}

/* Toolbar above the pitch holds the squad actions, so its menus float over the pool */
.sim-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; min-height: 34px; position: relative; z-index: 60; }
.sim-toolbar .pitch-tools { margin-bottom: 0; }
.sim-toolbar .grow { flex: 1; }
.dd-like .colpick-menu { z-index: 95; }
.menu-label { font-family: var(--font-display); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 4px 10px 2px; }

/* Suggestion popover anchored to an empty slot */
.pitch-row.has-pop, .bench.has-pop { z-index: 40; }
.slot-pop { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 300px; max-width: 86vw; z-index: 40; cursor: default;
  background: var(--menu-bg); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); padding: 8px; text-align: left; color: var(--ink); }
.slot-pop::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: var(--menu-bg); border-left: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border); }
.slot-pop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 6px 6px; font-family: var(--font-display); font-size: 12.5px; }
.slot-pop-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; padding: 6px; border-radius: 9px; cursor: pointer; }
.slot-pop-row:hover { background: var(--chip-bg); }
.slot-pop-row .grow { flex: 1; min-width: 0; }
.slot-pop-row b { display: block; font-family: var(--font-display); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-pop-row small { display: block; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-pop-row .pop-fx { display: block; margin-top: 3px; }
.slot-pop-row .val { font-family: var(--font-display); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.slot-pop-foot { display: flex; gap: 6px; justify-content: space-between; padding: 6px 4px 2px; border-top: 1px solid var(--glass-border); margin-top: 4px; }
@media (max-width: 600px) { .slot-pop { position: fixed; top: auto; bottom: 12px; left: 50%; width: 92vw; } .slot-pop::before { display: none; } }
.sim-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dd-like { position: relative; display: inline-block; }
.dd-like .colpick-menu { right: auto; left: 0; min-width: 230px; }
.dd-like .colpick-menu.open { display: block; }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 7px 10px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; }
.menu-item:hover { background: var(--chip-bg); }
.menu-item.danger { color: var(--bad); }
.menu-row { display: flex; align-items: center; }
.menu-row .menu-item { flex: 1; }
.menu-x { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.menu-x:hover { color: var(--bad); background: var(--chip-bg); }
.menu-sep { height: 1px; background: var(--glass-border); margin: 4px 0; }
.gw-nav { display: flex; align-items: center; gap: 8px; }
.gw-nav b { font-family: var(--font-display); font-size: 15px; }
.pitch.mini { padding: 16px 6px 6px; }
.pitch.mini .pitch-row { gap: 6px; margin-bottom: 8px; }
.mcard { position: relative; width: 96px; background: rgba(255,255,255,.93); color: #141419; border-radius: 9px; padding: 5px 5px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 4px 10px rgba(0,0,0,.25); cursor: pointer; border: 2px solid #fff; }
.mcard.cap { border-color: var(--pink); }
.mcard .mnm { font-family: var(--font-display); font-weight: 800; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mcard b { font-family: var(--font-display); font-size: 12px; color: var(--purple); }
.mcard .badge { position: absolute; top: -8px; right: -6px; width: 20px; height: 20px; font-size: 11px; }
.pitch.mini .bench .pitch-row { margin-bottom: 4px; }

/* Captain / vice badges and chip planner */
.pcard.vice, .mcard.vice { border-color: var(--violet); }
.pcard .badge.setvc { top: 16px; right: -8px; width: 20px; height: 20px; font-size: 10px; background: #141419; opacity: 0; border: 0; cursor: pointer; }
.pcard:hover .badge.setvc { opacity: 1; }
.pcard .badge.setcap { z-index: 3; }
/* Chip advice rows */
.chip-advice { display: flex; flex-direction: column; gap: 8px; }
.chip-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-border); border-left: 4px solid var(--ink-3); }
.chip-row.good { border-left-color: var(--good); }
.chip-row.warn { border-left-color: var(--warn); }
.chip-row .grow { flex: 1; min-width: 0; }
.chip-row b { font-family: var(--font-display); font-size: 13.5px; }
.chip-row p { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.chip-verdict { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--ink-3); flex-shrink: 0; min-width: 62px; text-align: center; }
.chip-row.good .chip-verdict { background: var(--accent); color: var(--accent-ink); }
.chip-row.warn .chip-verdict { background: rgba(255,209,102,.25); color: var(--warn); }
.chip-when { font-family: var(--font-display); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cap-name { color: var(--pink); } .vice-name { color: var(--violet); }
/* Captain / vice ribbon on explorer cards */
.mcard { padding-bottom: 16px; }
.mrole { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 7px 7px; font-family: var(--font-display); font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 2px 0; text-align: center; }
.mrole.c { background: var(--pink); }
.mrole.v { background: var(--violet); }
.bench.open-slots { background: rgba(0,0,0,.14); border: 1px dashed rgba(255,255,255,.35); }
.bench .pcard.slot.empty .ai-pill { font-size: 8.5px; padding: 2px 7px; }

/* Template slots in the Squads menu */
.menu-item.has-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-item.has-sub.active { background: var(--chip-bg); }
.sub-caret { color: var(--ink-3); font-size: 10px; transition: transform .15s; }
.menu-item.has-sub.active .sub-caret { transform: rotate(90deg); }
.submenu { display: none; padding: 2px 0 6px 8px; margin-left: 6px; border-left: 2px solid var(--glass-border); }
.submenu.open { display: block; }
.submenu .menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.submenu .menu-item[disabled] { opacity: .45; cursor: default; }
.submenu .menu-item[disabled]:hover { background: transparent; }
.tpl-n { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--chip-bg); font-family: var(--font-display); font-size: 10px; font-weight: 800; flex-shrink: 0; }
.tpl-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-meta { font-size: 10px; color: var(--ink-3); flex-shrink: 0; }

/* Bench cards match the pitch, and the pool table fits without sideways scrolling */
.bench .pcard, .bench-slot .pcard.slot.empty { width: 122px; }
.bench-slot .pcard.slot.empty { min-height: 132px; }
.grid-sim { grid-template-columns: minmax(0, 1.5fr) minmax(470px, 1fr); align-items: start; }
@media (max-width: 1150px) { .grid-sim { grid-template-columns: 1fr; } }
.pool-wrap { overflow-x: hidden; }
#poolTable { width: 100%; table-layout: fixed; }
#poolTable th, #poolTable td { padding: 5px 4px; }
#poolTable th:first-child, #poolTable td:first-child { width: auto; }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 44px; }
#poolTable td.good-txt { color: var(--good); font-weight: 700; }
.pool-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pool-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.pool-row td { border-bottom: 1px solid var(--glass-border); vertical-align: top; padding-top: 8px; }
.pool-row:hover td { background: var(--row-hover); }

/* Simulation settings: what the numbers below are based on */
.sim-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 22px; margin-bottom: 14px; align-items: start; }
.sim-setting { display: flex; flex-direction: column; gap: 5px; }
.sim-setting label { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--ink); }
.sim-setting small { font-size: 11px; color: var(--ink-3); line-height: 1.35; }
.sim-setting .dd { align-self: flex-start; }
.money-input { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.money-input .nw { margin: 0 2px; }
.sim-now { border-left: 3px solid var(--accent); padding-left: 12px; justify-content: center; }
.sim-now b { font-family: var(--font-display); font-size: 13px; line-height: 1.35; }

/* Sticky player pool with its own scroll */
.pool-sticky { display: flex; flex-direction: column; max-height: 88vh; }
@media (max-width: 1150px) { .pool-sticky { position: static; max-height: none; } .pool-wrap { max-height: 70vh; } }

/* Week-by-week tabs in the explorer */
.gw-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.gw-tab { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); cursor: pointer; font: inherit; line-height: 1.15; }
.gw-tab:hover { background: var(--glass-strong); }
.gw-tab.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.gw-tab-gw { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .06em; opacity: .8; }
.gw-tab b { font-family: var(--font-display); font-size: 16px; font-variant-numeric: tabular-nums; }
.gw-tab small { font-size: 9.5px; opacity: .8; white-space: nowrap; }
.chip-when.muted { color: var(--ink-3); font-weight: 600; }

/* Template menu */
.tpl-menu { min-width: 300px; }
.tpl-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; }
.tpl-edit { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; padding: 4px 6px; border-radius: 6px; }
.tpl-edit:hover { border-color: var(--glass-border); background: var(--chip-bg); }
.tpl-edit:focus { outline: none; border-color: var(--cyan); background: var(--chip-bg); }
.add-tpl { color: var(--accent); font-weight: 800; }
.menu-hint { font-size: 10.5px; color: var(--ink-3); padding: 6px 10px 2px; border-top: 1px solid var(--glass-border); margin-top: 4px; }

/* Settings panel sits above the summary so its dropdown lists can overhang it */
.sim-settings { position: relative; z-index: 66; }
.sim-budget { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.menu-head { display: flex; align-items: center; justify-content: space-between; padding-right: 4px; }
.menu-close { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 12px; padding: 4px 8px; border-radius: 6px; }
.menu-close:hover { background: var(--chip-bg); color: var(--ink); }
.tpl-row { padding-left: 6px; }
.pitch-tools { min-height: 30px; }

/* Squad actions live inside the field */
.pitch-bar { position: relative; z-index: 60; display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; margin: -14px 2px 14px; padding: 7px 8px; background: rgba(0,0,0,.32); border-radius: 12px; }
.pitch-bar .btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; }
.pitch-bar .btn:hover { background: rgba(255,255,255,.24); }
.pitch-bar .btn.primary { background: var(--green); color: var(--purple-deep); border-color: transparent; }
.pitch-bar .btn[disabled] { opacity: .45; }
.pitch-bar .sim-actions { display: contents; }

/* Pool rows: badge, name, club line, fixtures stacked under the name */
.sim-settings { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); }
.sim-setting small { white-space: nowrap; }
.pool-name { align-items: flex-start; gap: 8px; }
.pool-name .pill { flex-shrink: 0; margin-top: 2px; min-width: 36px; }
.pool-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pool-id b { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.pool-id b .tag { font-size: 9px; padding: 0 5px; }
.pool-meta { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.pool-fx .fxs { gap: 2px; }
.pool-fx .fxs-cell { min-width: 30px; padding: 2px 2px; border-radius: 5px; }
.pool-fx .fxs-cell b { font-size: 10px; }
.pool-fx .fxs-cell small { font-size: 7.5px; }
.pool-fx .fxs-cell .crest { width: 11px; height: 11px; }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 46px; }
#poolTable td.num { padding-top: 10px; }

/* Simulation controls live in the summary bar; the bar hugs its content */
.sim-summary { width: fit-content; max-width: 100%; }
.sim-ctl { display: flex; flex-direction: column; gap: 3px; }
.sim-ctl .dd-btn { padding: 4px 10px; font-size: 12.5px; }
.sim-sep { width: 1px; align-self: stretch; background: var(--glass-border); margin: 0 4px; }
#poolTable .ease-score b { font-size: 12px; }
#poolTable th:nth-child(7), #poolTable td:nth-child(7) { width: 48px; }
/* Room for the Ease column: slimmer numeric columns and fixture cells */
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 41px; }
#poolTable th:nth-child(7), #poolTable td:nth-child(7) { width: 46px; }
#poolTable th:nth-child(3), #poolTable td:nth-child(3) { width: 44px; }
.pool-fx .fxs-cell { min-width: 27px; padding: 2px 1px; }
.pool-fx .fxs-cell b { font-size: 9.5px; }
.pool-fx .fxs-cell .crest { width: 10px; height: 10px; }
.pool-fx .fxs-cell small i { font-size: 7px; }
.grid-sim { grid-template-columns: minmax(0, 1.45fr) minmax(490px, 1fr); }

/* Thin, themed scrollbars everywhere content scrolls inside a panel */
.table-wrap, .pool-wrap, .drawer, .colpick-menu, .dd-menu, .pool, .slot-pop, .nav {
  scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; scrollbar-gutter: auto;
}
.table-wrap::-webkit-scrollbar, .pool-wrap::-webkit-scrollbar, .drawer::-webkit-scrollbar, .colpick-menu::-webkit-scrollbar, .dd-menu::-webkit-scrollbar, .slot-pop::-webkit-scrollbar { width: 6px; height: 6px; }
.table-wrap::-webkit-scrollbar-track, .pool-wrap::-webkit-scrollbar-track, .drawer::-webkit-scrollbar-track, .colpick-menu::-webkit-scrollbar-track, .dd-menu::-webkit-scrollbar-track, .slot-pop::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb, .pool-wrap::-webkit-scrollbar-thumb, .drawer::-webkit-scrollbar-thumb, .colpick-menu::-webkit-scrollbar-thumb, .dd-menu::-webkit-scrollbar-thumb, .slot-pop::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }
.table-wrap::-webkit-scrollbar-thumb:hover, .pool-wrap::-webkit-scrollbar-thumb:hover, .drawer::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
.table-wrap::-webkit-scrollbar-corner, .pool-wrap::-webkit-scrollbar-corner { background: transparent; }
/* Page scrollbar too */
html { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
body::-webkit-scrollbar-track { background: transparent; }
/* Pool: no dead gutter on the right, softer row separators */
.pool-wrap { padding-right: 4px; margin-right: -6px; }
#poolTable th:last-child, #poolTable td:last-child { padding-right: 6px; }
.pool-row td { border-bottom-color: rgba(255,255,255,.07); }
:root:not([data-theme="dark"]) .pool-row td { border-bottom-color: rgba(17,17,19,.08); }
.sim-summary { position: relative; z-index: 66; overflow: visible; }

/* Projected score on the pitch */
.pitch-score { position: absolute; top: 62px; right: 14px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.38); color: #fff; text-align: right; backdrop-filter: blur(4px); }
.ps-label { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ps-main { display: flex; align-items: baseline; gap: 4px; }
.ps-main b { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.ps-main small { font-size: 11px; font-weight: 700; }
.ps-main abbr { color: #fff; text-decoration: none; }
.ps-sub { font-size: 10.5px; opacity: .85; white-space: nowrap; }
@media (max-width: 760px) { .pitch-score { position: static; margin: 0 auto 10px; align-items: center; text-align: center; width: fit-content; } }

/* Ease score: number over a short colour bar (Lab FDR band), so it is read as a rating rather than as a fixture */
.ease-score { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 44px; }
.ease-score b { font-family: var(--font-display); font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.ease-score .ease-bar { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--chip-bg); position: relative; overflow: hidden; }
.ease-score .ease-bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 50%); border-radius: 2px; background: var(--fdr3); }
.ease-score .band-1::after { background: var(--fdr1); } .ease-score .band-2::after { background: var(--fdr2); } .ease-score .band-3::after { background: var(--fdr3); } .ease-score .band-4::after { background: var(--fdr4); } .ease-score .band-5::after { background: var(--fdr5); }
.ticker .ease-td { border-right: 1px solid var(--glass-border); padding-right: 12px; }
.ticker td.ease-td + td { padding-left: 12px; }
.tile .ease-score b { font-size: 22px; }

/* Head-to-head on the club page */
.h2h-grid { display: flex; flex-direction: column; gap: 6px; }
.h2h-row { padding: 8px 10px; border-radius: 10px; background: var(--chip-bg); }
.h2h-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.h2h-rec { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 12px; }
.h2h-list { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.h2h-m { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.h2h-m small { color: var(--ink-3); font-weight: 500; font-size: 10.5px; }

/* Compare table: best value per row */
.cmp-table td.cmp-best { color: var(--good); font-weight: 800; position: relative; }
.cmp-table td.cmp-best::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--good); }
.cmp-table td { padding-left: 12px; }
/* Type-to-filter box inside long dropdowns */
.dd-search { display: block; width: 100%; box-sizing: border-box; margin: 2px 0 6px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--chip-bg); color: var(--ink); font: inherit; font-size: 13px; }
.dd-search:focus { outline: none; border-color: var(--cyan); }
.dd-list button[hidden] { display: none; }

/* Role profile in the player drawer */
.role-box { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--chip-bg); }
.role-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.role-head b { font-family: var(--font-display); font-size: 14px; }
.role-split { display: flex; height: 20px; border-radius: 6px; overflow: hidden; font-family: var(--font-display); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }
.role-split span { display: grid; place-items: center; white-space: nowrap; overflow: hidden; min-width: 0; }
.role-split .role-att { background: var(--pink); color: #fff; }
.role-split .role-def { background: var(--cyan); color: #141419; }

.linkish { border: 0; background: transparent; color: var(--link); font: inherit; font-size: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.proj { color: var(--link); font-weight: 700; }

.h2h-table .pip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; height: 22px; white-space: nowrap; }
.h2h-table td { vertical-align: middle; }

th.ctr, td.ctr { text-align: center; }

/* Styled tooltips (replace the browser default title bubble) */
.tipbox { position: fixed; z-index: 120; max-width: 320px; padding: 8px 11px; border-radius: 10px; background: var(--menu-bg); border: 1px solid var(--glass-border); color: var(--ink); font-size: 12px; line-height: 1.45; font-weight: 500; box-shadow: 0 12px 30px rgba(0,0,0,.35); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity .12s ease, transform .12s ease; white-space: normal; }
.tipbox.show { opacity: 1; transform: none; }
.tipbox::before { content: ''; position: absolute; left: var(--ax, 50%); top: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--menu-bg); border-left: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border); transform: rotate(45deg); }
.tipbox.above::before { top: auto; bottom: -6px; border: 0; border-right: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); }
@media (prefers-reduced-motion: reduce) { .tipbox { transition: none; } }

/* Overview: insights and feature map */
.insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.insight { padding: 12px 14px; border-radius: 12px; background: var(--chip-bg); border: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 6px; }
.insight-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; }
.insight-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--glass-strong); font-size: 14px; }
.insight p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.insight .lnk { color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--glass-border); text-underline-offset: 2px; }
.insight .lnk:hover { text-decoration-color: var(--accent); }
.insight .linkish { align-self: flex-start; font-size: 12px; font-weight: 700; text-decoration: none; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.feature { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--chip-bg); border: 1px solid var(--glass-border); transition: transform .12s ease, border-color .12s ease; }
.feature:hover { transform: translateY(-1px); border-color: var(--accent); }
.feature-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--glass-strong); font-size: 18px; }
.feature b { font-family: var(--font-display); font-size: 14px; }
.feature p { margin: 3px 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.feature-cta { font-size: 12px; font-weight: 700; color: var(--link); }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.steps b { color: var(--ink); }
.tile.clickable { cursor: pointer; }
.tile.clickable:hover { border-color: var(--accent); }

/* Overview bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.bento > .panel { min-width: 0; display: flex; flex-direction: column; }
.bento-4 { grid-column: span 4; } .bento-6 { grid-column: span 6; } .bento-8 { grid-column: span 8; }
@media (max-width: 1100px) { .bento-4 { grid-column: span 6; } .bento-8 { grid-column: span 12; } }
@media (max-width: 720px) { .bento-4, .bento-6, .bento-8 { grid-column: span 12; } }
.bento-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bento-head b { font-family: var(--font-display); font-size: 15px; }
.bento-head.inline { margin: 0; }
.bento-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--glass-strong); font-size: 15px; }
.bento-foot { margin-top: auto; padding-top: 10px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.bento-foot .lnk { color: var(--ink-2); cursor: pointer; }
.list.compact .list-row { padding: 6px 0; gap: 8px; }
.list.compact .name { font-size: 13px; }
.list.compact .meta { font-size: 11px; }
table.mini th, table.mini td { padding: 6px 6px; font-size: 12.5px; }
.signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.signal { display: grid; grid-template-columns: 26px 1fr; gap: 8px 10px; padding: 10px 12px; border-radius: 10px; background: var(--chip-bg); border: 1px solid var(--glass-border); align-items: start; }
.signal b { font-family: var(--font-display); font-size: 13px; }
.signal p { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.signal .lnk { color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--glass-border); text-underline-offset: 2px; }
.signal .linkish { grid-column: 2; justify-self: start; font-size: 12px; font-weight: 700; text-decoration: none; }

@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-main { min-width: 0; } .hero-main h1 { font-size: 1.4rem; } }
@media (max-width: 480px) { .hero .tiles { grid-template-columns: 1fr; } }

/* Pool table with nine columns: keep the name column wide enough for the fixture strip */
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 36px; padding-left: 3px; padding-right: 3px; font-size: 12px; }
#poolTable th:nth-child(3), #poolTable td:nth-child(3) { width: 42px; }
#poolTable th:nth-child(9), #poolTable td:nth-child(9) { width: 46px; }
#poolTable th { font-size: 10px; letter-spacing: .03em; }
#poolTable th:nth-child(7), #poolTable td:nth-child(7) { width: 42px; }

/* Fixtures page: attack / defence panels with picks */
.team-pick .name.clickable { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.team-pick .name.clickable:hover { color: var(--accent); }
.picks { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; }
.pick-lbl { font-family: var(--font-display); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; font-size: 12.5px; min-width: 0; }
.pick:hover b { color: var(--accent); }
.pick .pos { transform: scale(.85); transform-origin: left center; }
.pick-xp { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick-xp small { font-weight: 600; color: var(--ink-3); }
.ticker td.clickable:hover .club-cell b { color: var(--accent); }

/* Fixtures targets: aligned pick rows */
.pk-list { display: flex; flex-direction: column; gap: 6px; }
.pk-club { padding: 10px 12px 8px; border-radius: 12px; background: var(--chip-bg); border: 1px solid var(--glass-border); }
.pk-club-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pk-club-head b { font-family: var(--font-display); font-size: 14px; }
.pk-club-head:hover b { color: var(--accent); }
.pk-club-head .rank { width: 18px; }
.pk-rate { padding: 1px 7px; font-size: 10.5px; }
.pk-val { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-val small { font-weight: 600; color: var(--ink-3); font-size: 11px; }
.pk-row { display: grid; grid-template-columns: 74px 40px minmax(0, 1fr) 48px 48px 56px 46px 52px; align-items: center; gap: 6px; padding: 4px 0; font-size: 12.5px; cursor: pointer; border-radius: 6px; }
.pk-row:hover { background: var(--glass-strong); }
.pk-row .pos { justify-self: start; transform: scale(.85); transform-origin: left center; }
.pk-lbl { font-family: var(--font-display); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pk-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tag { padding: 0 6px; font-size: 9.5px; vertical-align: 1px; }
.pk-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pk-xp { text-align: right; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.pk-head { cursor: default; padding: 0 12px 4px; font-family: var(--font-display); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pk-head:hover { background: transparent; }
@media (max-width: 640px) { .pk-row { grid-template-columns: 60px 36px minmax(0, 1fr) 44px 52px; } .pk-row .pk-num:nth-child(6), .pk-row .pk-num:nth-child(7), .pk-head span:nth-child(6), .pk-head span:nth-child(7) { display: none; } }

/* ---------- Readability pass: type size, contrast, breathing room ---------- */
:root { --ink-3: #6A6860; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-3: #AEACA6; } }
:root[data-theme="dark"] { --ink-3: #AEACA6; }
body { font-size: 15px; line-height: 1.55; }
.small { font-size: 12.5px; }
table { font-size: 13.5px; }
th, td { padding: 9px 10px; }
th { font-size: 11px; }
.list-row { padding: 10px 0; gap: 12px; }
.list-row .meta { font-size: 12px; line-height: 1.4; }
.list.compact .list-row { padding: 7px 0; }
.finding p { font-size: 13px; line-height: 1.5; }
.panel { padding: 18px 20px; }
.panel-head { margin-bottom: 14px; }
.grid { gap: 18px; }
.stack { gap: 18px; }
.view-head { margin-bottom: 20px; }
.view-head p { line-height: 1.55; }
main { padding-inline: 24px; }
@media (max-width: 720px) { main { padding-inline: 16px; } .panel { padding: 14px 14px; } }
.tile .label { font-size: 11.5px; }
.tile .sub { font-size: 12.5px; }
.kv .k { font-size: 11px; }
.status-strip { font-size: 12.5px; }
/* Segmented controls: readable and clearly interactive */
.seg { background: var(--chip-bg); border: 1px solid var(--glass-border); padding: 3px; }
.seg button { font-size: 13px; padding: 5px 14px; color: var(--ink); opacity: .78; }
.seg button:hover { opacity: 1; background: var(--glass-strong); }
.seg button.active { opacity: 1; }
.horizon-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px; }
.horizon-strip .seg button { font-size: 13.5px; padding: 6px 16px; }
.bento-foot { font-size: 12.5px; }
.insight p, .signal p, .feature p { font-size: 13px; }

/* Targets panels: keep the column header visible while scrolling the list */
.pk-head { position: sticky; top: 64px; z-index: 5; background: var(--menu-bg); border-radius: 8px; margin: 0 -6px 6px; padding: 6px 18px 6px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.pk-head span { color: var(--ink-2); }

/* Brand icons */
.ico { width: 18px; height: 18px; display: block; }
.bento-icon { color: var(--cyan); }
.bento-icon.tint-green { color: var(--green); background: rgba(242,193,78, .12); }
.bento-icon.tint-cyan { color: var(--cyan); background: rgba(25,230,193, .12); }
.bento-icon.tint-pink { color: var(--pink); background: rgba(255,61,138, .14); }
:root:not([data-theme="dark"]) .bento-icon.tint-green { color: #0E9F5A; }
:root:not([data-theme="dark"]) .bento-icon.tint-cyan { color: #0E8F7A; }
.insight-icon { color: var(--cyan); }
.insight-icon .ico { width: 15px; height: 15px; }
.targets-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 18px; }
.targets-2 .meta .lnk { color: var(--ink); font-weight: 700; cursor: pointer; }
.targets-2 .meta .fdr-row { vertical-align: middle; }

.bento-12 { grid-column: span 12; }

.ticker .fdr.clickable { cursor: pointer; transition: transform .1s ease; }
.ticker .fdr.clickable:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* Targets horizon strip: the one control for the two panels below, styled like the hero so it cannot be missed */
.horizon-strip { background: linear-gradient(120deg, var(--purple) 0%, #2A2A36 55%, var(--violet) 100%); border-color: rgba(255,255,255,.18); color: #fff; padding: 14px 20px; gap: 16px; }
.horizon-strip .eyebrow { color: var(--green); font-size: 12px; letter-spacing: .1em; }
.horizon-strip .muted { color: rgba(255,255,255,.78); font-size: 13px; }
.horizon-strip .seg { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.22); padding: 4px; }
.horizon-strip .seg button { color: #fff; opacity: .85; font-size: 14px; padding: 8px 20px; }
.horizon-strip .seg button:hover { background: rgba(255,255,255,.12); opacity: 1; }
.horizon-strip .seg button.active { background: var(--green); color: var(--purple-deep); opacity: 1; box-shadow: 0 4px 14px rgba(242,193,78,.35); }

/* Triple Captain planner: fits its column, no sideways scroll */
.tc-wrap { overflow-x: hidden; }
.tc-table th, .tc-table td { padding-left: 6px; padding-right: 6px; }
.tc-table th:first-child, .tc-table td:first-child { padding-left: 10px; }
.tc-table th:last-child, .tc-table td:last-child { padding-right: 10px; }
.tc-table .fdr { min-width: 34px; padding: 3px 4px; }
.tc-opt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tc-opt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

/* ===== Overview redesign: wider rhythm, horizon bar, featured simulator, odds board ===== */
.bento { gap: 18px; }
.bento > .panel { padding: 22px 24px; }
.bento-head { margin-bottom: 14px; gap: 12px; }
.bento-head b { font-size: 16px; }
.bento-icon { width: 34px; height: 34px; border-radius: 10px; }
.bento-icon .ico { width: 18px; height: 18px; }
.bento-5 { grid-column: span 5; } .bento-7 { grid-column: span 7; }
@media (max-width: 1100px) { .bento-5, .bento-7 { grid-column: span 6; } }
@media (max-width: 720px) { .bento-5, .bento-7 { grid-column: span 12; } }
.hero { gap: 18px; }
.hero .tiles { gap: 14px; }
.hero .tile { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
.hero .tile .value { font-size: 21px; }
.list.compact .list-row { padding: 8px 0; }
.list-row .val small { display: block; font-size: 10px; font-weight: 600; color: var(--ink-3); text-align: right; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.sub-eyebrow { margin: 10px 0 4px; }
.sub-eyebrow:first-of-type { margin-top: 0; }
.bento-foot { padding-top: 12px; }

/* Horizon bar: one control that every panel follows, stays visible while scrolling */
.ov-horizon { margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 20px; background: linear-gradient(120deg, var(--purple) 0%, #2A2A36 55%, var(--violet) 100%); border-color: rgba(255,255,255,.18); color: #fff; }
.ov-horizon .eyebrow { color: var(--green); font-size: 12px; letter-spacing: .1em; }
.ov-horizon .muted { color: rgba(255,255,255,.82); font-size: 13.5px; }
.ov-horizon .ov-note { margin-left: auto; font-size: 12.5px; color: rgba(255,255,255,.65); }
.ov-horizon .seg { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.22); padding: 4px; }
.ov-horizon .seg button { color: #fff; opacity: .85; font-size: 14px; padding: 7px 20px; }
.ov-horizon .seg button:hover { background: rgba(255,255,255,.12); opacity: 1; }
.ov-horizon .seg button.active { background: var(--green); color: var(--purple-deep); opacity: 1; box-shadow: 0 4px 14px rgba(242,193,78,.35); }
@media (max-width: 720px) { .ov-horizon .ov-note { display: none; } }

/* Featured simulator: the one loud block below the hero */
.bento > .fsim { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: stretch; padding: 0 !important; overflow: hidden; background: linear-gradient(115deg, var(--purple-deep) 0%, var(--purple) 45%, #1E1E27 100%); border-color: rgba(255,255,255,.14); color: #fff; position: relative; }
.fsim::before { content: ''; position: absolute; width: 420px; height: 420px; left: -160px; bottom: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(25,230,193,.28), transparent 65%); pointer-events: none; }
.fsim-text { padding: 28px 8px 28px 30px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.fsim-text .eyebrow { color: var(--green); letter-spacing: .12em; }
.fsim-text h2 { font-size: 1.55rem; line-height: 1.15; color: #fff; text-wrap: balance; }
.fsim-text p { color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.55; max-width: 52ch; }
.fsim-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.fsim-stat { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); min-width: 120px; }
.fsim-stat b { font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; color: var(--green); line-height: 1.1; }
.fsim-stat span { font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 3px; }
.fsim-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.fsim-cta .btn.primary { background: var(--green); color: var(--purple-deep); border-color: transparent; padding: 10px 20px; font-size: 14px; }
.fsim-cta .btn.ghost { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); padding: 10px 18px; font-size: 14px; }
.fsim-cta .btn.ghost:hover { background: rgba(255,255,255,.14); }
.fsim-pitch { position: relative; min-height: 320px; margin: 18px 18px 18px 0; border-radius: 16px; background: linear-gradient(180deg, #2E9E5B 0%, #278A50 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.35); overflow: hidden; }
.fsim-pitch::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 12.5%, transparent 12.5% 25%); }
.fsim-lines { position: absolute; inset: 0; pointer-events: none; }
.fsim-lines::before { content: ''; position: absolute; left: 22%; right: 22%; top: -2px; height: 16%; border: 2px solid rgba(255,255,255,.35); border-top: 0; border-radius: 0 0 6px 6px; }
.fsim-lines::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: -2px; height: 16%; border: 2px solid rgba(255,255,255,.35); border-bottom: 0; border-radius: 6px 6px 0 0; }
.fsim-tok { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; width: 92px; }
.fsim-tok .crest { width: 30px; height: 30px; background: #fff; border-radius: 50%; padding: 3px; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.fsim-tok span { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(8,8,11,.78); padding: 2px 7px; border-radius: 999px; white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.fsim-tok em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.fsim-tok.cap .crest { box-shadow: 0 0 0 3px var(--green), 0 4px 10px rgba(0,0,0,.35); }
.fsim-tok.cap span::after { content: ' C'; color: var(--green); }
.fsim-tok:hover span { background: var(--green); color: var(--purple-deep); }
.fsim-badge { position: absolute; right: 12px; top: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(8,8,11,.82); border: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: flex-end; }
.fsim-badge b { font-family: var(--font-display); font-size: 18px; color: var(--green); line-height: 1.1; }
.fsim-badge span { font-size: 10.5px; color: rgba(255,255,255,.75); }
.fsim-wait { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.85); font-weight: 600; font-size: 13.5px; }
@media (max-width: 900px) { .bento > .fsim { grid-template-columns: 1fr; } .fsim-text { padding: 24px 22px 6px; } .fsim-pitch { margin: 0 18px 18px; min-height: 300px; } }

/* Fixture ticker: fuller rows with projected goals and clean sheets */
.ticker-grid { display: flex; flex-direction: column; }
.ticker-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--glass-border); cursor: pointer; }
.ticker-row:last-child { border-bottom: 0; }
.ticker-row .rank { width: 18px; text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--ink-3); font-size: 12px; }
.ticker-row .grow { flex: 1; min-width: 0; }
.ticker-row .name { font-weight: 700; font-size: 13.5px; }
.ticker-row .meta { margin-top: 3px; }
.ticker-row:hover .name { color: var(--accent); }
.ticker-nums { display: flex; gap: 14px; }
.ticker-nums span { display: flex; flex-direction: column; align-items: flex-end; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; line-height: 1.1; min-width: 42px; }
.ticker-nums b { font-family: var(--font-display); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.ticker-hard { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--glass-border); }
.hard-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(255,61,138,.10); border: 1px solid rgba(255,61,138,.25); font-size: 12px; font-weight: 600; cursor: pointer; }
.hard-chip b { font-family: var(--font-display); color: var(--bad); }
@media (max-width: 520px) { .ticker-nums { display: none; } }

/* Odds board */
.odds-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 26px; }
.odds-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.odds-title .dot { width: 9px; height: 9px; border-radius: 50%; }
.odds-title .dot.cs { background: var(--cyan); box-shadow: 0 0 0 3px rgba(25,230,193,.18); }
.odds-title .dot.atk { background: var(--pink); box-shadow: 0 0 0 3px rgba(255,61,138,.18); }
.odds-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--glass-border); }
.odds-row:last-child { border-bottom: 0; }
.odds-row .grow { flex: 1; min-width: 0; }
.odds-top { display: flex; align-items: center; gap: 8px; }
.odds-top .name { font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odds-top .name:hover { color: var(--accent); }
.odds-bar { height: 6px; border-radius: 999px; background: var(--chip-bg); margin: 6px 0 4px; overflow: hidden; }
.odds-fill { height: 100%; border-radius: 999px; }
.odds-fill.cs { background: linear-gradient(90deg, #0E8F7A, var(--cyan)); }
.odds-fill.atk { background: linear-gradient(90deg, #B0245F, var(--pink)); }
.odds-row .meta { font-size: 11.5px; color: var(--ink-3); }
.odds-row .meta .lnk { color: var(--ink); font-weight: 700; cursor: pointer; }
.odds-row .val { font-family: var(--font-display); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; min-width: 64px; }
.odds-row .val small { display: block; font-size: 9.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }

/* Chips panel lines */
.chip-line { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--glass-border); }
.chip-line:last-of-type { border-bottom: 0; }
.chip-line .tag { margin-top: 2px; }
.chip-line b { font-size: 13.5px; }
.chip-line .meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.bento-head .grow { min-width: 0; }
.bento-head .btn.sm { white-space: nowrap; flex-shrink: 0; }

/* Structured tooltips: title, label/value rows with the first as the lead figure, optional footer */
.tipbox.rich { padding: 10px 12px 9px; min-width: 200px; max-width: 280px; }
.tip-h { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.tip-rows { display: flex; flex-direction: column; gap: 3px; }
.tip-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 12px; color: var(--ink-2); }
.tip-row b { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.tip-row.lead { padding-bottom: 5px; margin-bottom: 3px; border-bottom: 1px solid var(--glass-border); font-size: 12.5px; }
.tip-row.lead b { font-size: 17px; font-weight: 800; color: var(--ink); }
.tip-f { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--glass-border); font-size: 11px; color: var(--ink-3); }
/* Every fixture pill that names a club opens its page */
.fdr[data-team] { cursor: pointer; transition: transform .1s ease, filter .1s ease; }
.fdr[data-team]:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* Lead figure in a fixture tooltip takes the pill's difficulty colour */
.tip-row.lead b.tip-fdr-1 { color: var(--fdr1); } .tip-row.lead b.tip-fdr-2 { color: var(--fdr2); } .tip-row.lead b.tip-fdr-3 { color: var(--fdr3); } .tip-row.lead b.tip-fdr-4 { color: var(--fdr4); } .tip-row.lead b.tip-fdr-5 { color: var(--fdr5); }
:root:not([data-theme="dark"]) .tip-row.lead b.tip-fdr-2 { color: #0E9F5A; } :root:not([data-theme="dark"]) .tip-row.lead b.tip-fdr-3 { color: #B8860B; }
.tip-row b .pips { vertical-align: middle; margin-left: 4px; }
.tip-row b .pip { width: 16px; height: 16px; font-size: 9px; border-radius: 4px; }

/* Floating horizon switch, shown only while the bar is above the viewport */
.ov-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px; background: linear-gradient(120deg, var(--purple) 0%, #2A2A36 55%, var(--violet) 100%); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 14px 34px rgba(0,0,0,.4); color: #fff; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.ov-float.show { opacity: 1; transform: none; pointer-events: auto; }
.ov-float .eyebrow { color: var(--green); font-size: 11px; letter-spacing: .1em; }
.ov-float .seg { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.22); padding: 3px; }
.ov-float .seg button { color: #fff; opacity: .85; font-size: 13px; padding: 6px 14px; }
.ov-float .seg button.active { background: var(--green); color: var(--purple-deep); opacity: 1; box-shadow: 0 4px 14px rgba(242,193,78,.35); }
@media (prefers-reduced-motion: reduce) { .ov-float { transition: none; } }
@media (max-width: 720px) { .ov-float { right: 12px; bottom: 12px; padding-left: 10px; } .ov-float .eyebrow { display: none; } }

/* ===== Overview as a narrative: titled sections with lead text outside the boxes ===== */
.ov-sec { margin-top: 40px; }
.ov-sec:first-of-type { margin-top: 28px; }
.ov-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; margin: 0 4px 18px; }
.ov-sec-head > div:first-child { flex: 1 1 420px; min-width: 0; }
.ov-sec-head .eyebrow { color: var(--accent-2); letter-spacing: .12em; }
.ov-sec-head h2 { font-size: 1.5rem; margin-top: 4px; letter-spacing: -.02em; }
.ov-sec-head p { margin: 8px 0 0; max-width: 66ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
/* The window control is a compact pill inside the Picks section header */
.ov-horizon { margin: 0 0 4px; padding: 7px 14px 7px 16px; border-radius: 999px; width: auto; flex-wrap: nowrap; gap: 12px; flex: 0 0 auto; }
.ov-horizon .muted { font-size: 13px; white-space: nowrap; }
.ov-horizon .seg button { padding: 6px 16px; font-size: 13.5px; }
@media (max-width: 720px) { .ov-horizon { flex-wrap: wrap; } .ov-sec-head h2 { font-size: 1.3rem; } }

/* ===== Textures: a fine dot grid behind everything, film grain on the gradient blocks ===== */
:root { --dot: rgba(17,17,19, .11); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dot: rgba(255, 255, 255, .075); } }
:root[data-theme="dark"] { --dot: rgba(255, 255, 255, .075); }
body { background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 26px 26px; background-attachment: fixed; }
.hero-main { background-image: var(--grain), linear-gradient(135deg, var(--purple) 0%, #2A2A36 60%, var(--violet) 100%); background-blend-mode: soft-light, normal; }
.bento > .fsim { background-image: var(--grain), linear-gradient(115deg, var(--purple-deep) 0%, var(--purple) 45%, #1E1E27 100%); background-blend-mode: soft-light, normal; }
.horizon-strip, .ov-horizon, .ov-float { background-image: var(--grain), linear-gradient(120deg, var(--purple) 0%, #2A2A36 55%, var(--violet) 100%); background-blend-mode: soft-light, normal; }
.fsim-pitch { background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 12.5%, transparent 12.5% 25%), var(--grain), linear-gradient(180deg, #2E9E5B 0%, #278A50 100%); background-blend-mode: normal, soft-light, normal; }
.fsim-pitch::before { display: none; }

/* ===== Polish pass: header, motion, surfaces ===== */
/* Header: clean glass with a brand light line along the bottom and a soft glow behind the mark */
.topbar { background-image: linear-gradient(180deg, rgba(255,255,255,.04), transparent); border-bottom-color: transparent; position: sticky; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--green) 18%, var(--cyan) 50%, var(--violet) 82%, transparent 100%); opacity: .55; }
.brand { position: relative; }
.brand-mark { position: relative; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.brand-mark::after { content: ''; position: absolute; inset: -6px; border-radius: 14px; background: radial-gradient(circle, rgba(242,193,78,.35), transparent 70%); z-index: -1; opacity: .7; }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.04); box-shadow: 0 8px 22px rgba(139,92,246,.45); }
.nav button { transition: background .2s ease, color .2s ease, transform .2s ease; }
.nav button.active { box-shadow: 0 4px 14px rgba(242,193,78,.22); }
.nav button:not(.active):hover { transform: translateY(-1px); }

/* Motion: views ease in, surfaces lift, rows respond */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view.active { animation: rise .32s cubic-bezier(.2,.8,.2,1); }
.glass { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease; }
.tile.clickable:hover, .bento > .panel:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(8,8,11,.28); border-color: rgba(139,92,246,.35); }
.bento > .fsim:hover { transform: none; }
.list-row, .ticker-row, .odds-row, tr.clickable { transition: background .15s ease; }
.list-row.clickable:hover, .ticker-row:hover, tr.clickable:hover { background: var(--row-hover); }
.list-row.clickable:hover { border-radius: 8px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.btn { transition: transform .15s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary:hover, .fsim-cta .btn.primary:hover { box-shadow: 0 8px 20px rgba(242,193,78,.28); }
.fdr, .pip, .tag { transition: transform .12s ease, filter .12s ease; }
.seg button { transition: background .18s ease, color .18s ease, opacity .18s ease; }
@media (prefers-reduced-motion: reduce) { .view.active { animation: none; } .glass, .btn, .nav button, .brand-mark { transition: none; } .tile.clickable:hover, .bento > .panel:hover, .btn:hover { transform: none; } }

/* Surfaces: glass cards get a light edge and a corner sheen; gradient blocks keep their grain */
.glass { background-image: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.07), transparent 55%); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.10); }
:root:not([data-theme="dark"]) .glass { background-image: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.55), transparent 55%); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .glass { background-image: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.07), transparent 55%); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.10); } }
.hero-main, .bento > .fsim, .horizon-strip, .ov-horizon, .ov-float, .fsim-pitch { box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.18); }
.fsim-pitch { box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.35); }
/* Page background: dot grid plus faint pitch markings fixed behind everything */
:root { --pitch-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200' fill='none' stroke='%23141419' stroke-opacity='.08' stroke-width='2'%3E%3Ccircle cx='600' cy='600' r='160'/%3E%3Ccircle cx='600' cy='600' r='6' fill='%23141419' fill-opacity='.08' stroke='none'/%3E%3Cpath d='M0 600H1200'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pitch-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200' fill='none' stroke='white' stroke-opacity='.06' stroke-width='2'%3E%3Ccircle cx='600' cy='600' r='160'/%3E%3Ccircle cx='600' cy='600' r='6' fill='white' fill-opacity='.06' stroke='none'/%3E%3Cpath d='M0 600H1200'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] { --pitch-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200' fill='none' stroke='white' stroke-opacity='.06' stroke-width='2'%3E%3Ccircle cx='600' cy='600' r='160'/%3E%3Ccircle cx='600' cy='600' r='6' fill='white' fill-opacity='.06' stroke='none'/%3E%3Cpath d='M0 600H1200'/%3E%3C/svg%3E"); }
body { background-image: var(--pitch-art), radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 1200px 1200px, 26px 26px; background-position: center 40vh, 0 0; background-repeat: no-repeat, repeat; background-attachment: fixed, fixed; }
/* Section rules on the Overview: a thin brand line under each heading block */
.ov-sec-head { position: relative; padding-bottom: 14px; }
.ov-sec-head::after { content: ''; position: absolute; left: 0; bottom: 0; width: 72px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--cyan)); }

/* Gaffer AI™ marks */
.ai-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 5px 12px 5px 9px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(242,193,78,.35); color: #fff; font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; position: relative; }
.ai-badge sup, .ai-chip sup, h2 sup, p sup { font-size: .6em; vertical-align: super; line-height: 0; margin-left: 1px; }
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(242,193,78,.6); animation: aiPulse 2.2s ease-out infinite; }
@keyframes aiPulse { 0% { box-shadow: 0 0 0 0 rgba(242,193,78,.6); } 70% { box-shadow: 0 0 0 8px rgba(242,193,78,0); } 100% { box-shadow: 0 0 0 0 rgba(242,193,78,0); } }
.ai-chip { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(90deg, rgba(242,193,78,.18), rgba(25,230,193,.18)); border: 1px solid rgba(242,193,78,.4); color: var(--green); font-family: var(--font-display); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
:root:not([data-theme="dark"]) .view-head .ai-chip { color: #0E9F5A; border-color: rgba(14,159,90,.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .view-head .ai-chip { color: var(--green); border-color: rgba(242,193,78,.4); } }
@media (prefers-reduced-motion: reduce) { .ai-dot { animation: none; } }

/* ===== Gaffer Lab palette notes: navy #141419 / #08080B, amber #F2C14E, mint #19E6C1, coral #FF3D8A, indigo #8B5CF6 ===== */
.tm { font-size: .58em; vertical-align: .45em; margin-left: 1px; font-weight: 700; letter-spacing: 0; }
/* Engine pipeline on the Overview: four steps joined by a line, in the order the engine runs */
.pipe { display: flex; align-items: stretch; gap: 0; flex: 0 1 auto; margin-bottom: 4px; position: relative; }
.pipe-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 14px 8px; min-width: 128px; cursor: help; }
.pipe-step::before { content: ''; position: absolute; top: 27px; left: 50%; right: -50%; height: 2px; background: linear-gradient(90deg, var(--accent-2), var(--violet)); opacity: .5; z-index: 0; }
.pipe-step:last-child::before { display: none; }
.pipe-ico { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--accent-2); box-shadow: 0 6px 16px rgba(8,8,11,.25); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; }
.pipe-ico .ico { width: 17px; height: 17px; }
.pipe-step:hover .pipe-ico { transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 22px rgba(242,193,78,.28); color: var(--accent); }
:root:not([data-theme="dark"]) .pipe-step:hover .pipe-ico { color: var(--violet); }
.pipe-step b { font-family: var(--font-display); font-size: 13px; margin-top: 4px; }
.pipe-step span:last-child { font-size: 11px; color: var(--ink-3); line-height: 1.2; }
@media (max-width: 720px) { .pipe { flex-wrap: wrap; } .pipe-step { min-width: 46%; } .pipe-step::before { display: none; } }

/* Gradient blocks keep their gradient in every theme (outranks the glass sheen rules above) */
:root .hero-main.glass { background-image: var(--grain), linear-gradient(135deg, var(--purple) 0%, #2A2A36 60%, var(--violet) 100%); background-blend-mode: soft-light, normal; }
:root .bento > .fsim.glass { background-image: var(--grain), linear-gradient(115deg, var(--purple-deep) 0%, var(--purple) 45%, #1E1E27 100%); background-blend-mode: soft-light, normal; }
:root .horizon-strip.glass, :root .ov-horizon.glass, :root .ov-float { background-image: var(--grain), linear-gradient(120deg, var(--purple) 0%, #2A2A36 55%, var(--violet) 100%); background-blend-mode: soft-light, normal; }

/* ===== Gaffer Lab palette: black & gold with electric teal, magenta and violet =====
   black #08080B / charcoal #141419 · gold #F2C14E · teal #19E6C1 · magenta #FF3D8A · violet #8B5CF6 · ivory #F7F3EA (light) */
:root { --gold-2: #B8860B; --gold-3: #FFE08A; }
:root .hero-main.glass { background-image: var(--grain), linear-gradient(135deg, #08080B 0%, #16141A 50%, #3A2C0F 100%); background-blend-mode: soft-light, normal; }
.hero-main::after { background: radial-gradient(circle, rgba(242,193,78,.5), transparent 65%); }
:root .bento > .fsim.glass { background-image: var(--grain), linear-gradient(115deg, #08080B 0%, #141419 45%, #2A1F08 100%); background-blend-mode: soft-light, normal; }
.fsim::before { background: radial-gradient(circle, rgba(139,92,246,.28), transparent 65%); }
:root .horizon-strip.glass, :root .ov-horizon.glass, :root .ov-float { background-image: var(--grain), linear-gradient(120deg, #0B0B0F 0%, #1E1B16 55%, #3A2C0F 100%); background-blend-mode: soft-light, normal; }
.brand-mark { background: linear-gradient(135deg, #1A1A22 0%, #3A2C0F 100%); color: var(--gold-3); box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 0 0 1px rgba(242,193,78,.35); }
.brand-mark::after { background: radial-gradient(circle, rgba(242,193,78,.4), transparent 70%); }
.brand:hover .brand-mark { box-shadow: 0 8px 22px rgba(242,193,78,.35), inset 0 0 0 1px rgba(242,193,78,.6); }
.topbar::after { background: linear-gradient(90deg, transparent 0%, var(--gold-2) 15%, var(--gold-3) 40%, var(--cyan) 65%, var(--pink) 85%, transparent 100%); opacity: .7; }
.nav button.active, .btn.primary, .fsim-cta .btn.primary, .hero-import .btn.primary, .ov-horizon .seg button.active, .ov-float .seg button.active, .horizon-strip .seg button.active { background: linear-gradient(135deg, var(--gold-3) 0%, var(--green) 55%, #D9A63A 100%); color: #111113; }
.nav button.active { box-shadow: 0 4px 14px rgba(242,193,78,.3); }
.ov-sec-head::after { background: linear-gradient(90deg, var(--gold-3), var(--green), var(--cyan)); }
.ai-badge { border-color: rgba(242,193,78,.5); }
.tile.clickable:hover, .bento > .panel:hover { border-color: rgba(242,193,78,.45); }
.odds-fill.cs { background: linear-gradient(90deg, #0E8F7A, var(--cyan)); }
.odds-fill.atk { background: linear-gradient(90deg, #8B1E5A, var(--pink)); }

/* ===== Readability pass 2: contrast tokens, hero tiles, tooltips, simulator pool ===== */
:root { --label: #A67C00; --glass: rgba(255,255,255,.82); --glass-strong: rgba(255,255,255,.96); --glass-border: rgba(17,17,19,.13); --glass-shadow: 0 10px 30px rgba(17,17,19,.10); --ink-2: #3F3D37; --ink-3: #6A6860; --row-hover: rgba(17,17,19,.045); --chip-bg: rgba(17,17,19,.07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --label: #F2C14E; --glass: rgba(255,255,255,.075); --glass-strong: rgba(255,255,255,.13); --glass-border: rgba(255,255,255,.17); --ink-2: #DAD8D2; --ink-3: #ABA9A0; --row-hover: rgba(255,255,255,.07); --chip-bg: rgba(255,255,255,.10); } }
:root[data-theme="dark"] { --label: #F2C14E; --glass: rgba(255,255,255,.075); --glass-strong: rgba(255,255,255,.13); --glass-border: rgba(255,255,255,.17); --ink-2: #DAD8D2; --ink-3: #ABA9A0; --row-hover: rgba(255,255,255,.07); --chip-bg: rgba(255,255,255,.10); }

/* Labels and eyebrows in gold so headings, values and notes read as three distinct levels */
.eyebrow, .tile .label, .bento-foot .eyebrow, .sub-eyebrow, .odds-title, .pick-lbl { color: var(--label); }
.ov-sec-head .eyebrow, .hero-main .eyebrow, .fsim-text .eyebrow, .ov-horizon .eyebrow, .horizon-strip .eyebrow, .ov-float .eyebrow { color: var(--green); }
h1, h2 { letter-spacing: -.02em; }
.panel-head h2 { font-size: 1.2rem; }
th, td { padding: 9px 10px; }
table { font-size: 13.5px; }
th { font-size: 11.5px; }
.list-row .name { font-size: 14px; }
.list-row .meta { font-size: 12.5px; }
.list-row .val { font-size: 15px; }
.bento-foot { color: var(--ink-3); }

/* Hero tiles: gold label with a dot, larger value, clear sub line */
.hero .tile { padding: 18px 20px; gap: 2px; }
.hero .tile .label { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.hero .tile .label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(242,193,78,.18); flex-shrink: 0; }
.hero .tile .value { font-size: 23px; margin-top: 6px; }
.hero .tile .sub { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
:root:not([data-theme="dark"]) .hero .tile { background: rgba(255,255,255,.9); border-color: rgba(166,124,0,.22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero .tile { background: var(--glass); border-color: var(--glass-border); } }

/* Tooltips: long values wrap instead of overflowing; only short figures go big */
.tipbox.rich { max-width: 300px; }
.tip-row { align-items: flex-start; }
.tip-row > span { flex: 0 0 auto; padding-top: 1px; }
.tip-row b { white-space: normal; text-align: right; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }
.tip-row.lead b { font-size: 12.5px; }
.tip-row.lead b.num { font-size: 17px; }

/* Simulator: pool rows and pitch cards get room and contrast */
#poolTable { font-size: 13.5px; }
#poolTable th, #poolTable td { padding: 8px 8px; }
#poolTable th { font-size: 11px; color: var(--ink-2); }
.pool-name b { font-size: 13.5px; }
.pool-name span { font-size: 11.5px; color: var(--ink-2); }
#poolTable td.xp b { font-size: 15px; }
#poolTable .fdr { font-size: 11px; padding: 4px 6px; min-width: 38px; }
#poolTable tbody tr:hover { background: var(--row-hover); }
.pcard .name { font-size: 13px; }
.pcard .cell { font-size: 10.5px; }
.pcard .cell b { font-size: 11.5px; }

/* Pool: give the player column the room it needs, tighten the numeric columns */
#poolTable td:first-child, #poolTable th:first-child { min-width: 236px; padding-right: 4px; }
#poolTable td.num, #poolTable th.num { padding-left: 5px; padding-right: 5px; font-size: 13px; }
.pool-name b { max-width: 210px; }
.pool-name span, .pool-meta { max-width: 226px; }
.pool-meta { font-size: 11.5px; }
.pool-fx { margin-top: 3px; }
.pool-fx .fxs-cell { min-width: 32px; padding: 3px 2px; }
.pool-fx .fxs-cell b { font-size: 10.5px; }
.pool-fx .fxs-cell small { font-size: 8px; }

/* Pool panel wide enough for the player column plus eight stats without clipping */
.grid-sim { grid-template-columns: minmax(0, 1.15fr) minmax(600px, 1fr); }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 42px; }
#poolTable td:first-child, #poolTable th:first-child { min-width: 0; width: auto; }
.pool-name b { max-width: 220px; }
.pool-name span, .pool-meta { max-width: 236px; }
@media (max-width: 1180px) { .grid-sim { grid-template-columns: 1fr; } }

/* Simulator: the pool fills the pitch's height exactly and scrolls inside; analysis panels sit below at full width */
.grid-sim { align-items: stretch; }
.pool-cell { position: relative; min-height: 520px; }
.pool-cell .pool-sticky { position: absolute; inset: 0; max-height: none; }
.sim-below { margin-top: 18px; }
@media (max-width: 1180px) { .pool-cell { position: static; min-height: 0; } .pool-cell .pool-sticky { position: static; max-height: 88vh; } }

/* Ambient: white with a splash of gold in light, black with gold in dark; no green or red washes */
:root { --bg: #FFFFFF; --bg-2: #F6F3EC; --blob-1: rgba(242,193,78,.34); --blob-2: rgba(242,193,78,.16); --blob-3: rgba(242,193,78,0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #08080B; --bg-2: #121218; --blob-1: rgba(242,193,78,.16); --blob-2: rgba(242,193,78,.07); --blob-3: rgba(242,193,78,0); } }
:root[data-theme="dark"] { --bg: #08080B; --bg-2: #121218; --blob-1: rgba(242,193,78,.16); --blob-2: rgba(242,193,78,.07); --blob-3: rgba(242,193,78,0); }
.blob { display: none; }
.fsim::before { background: radial-gradient(circle, rgba(242,193,78,.22), transparent 65%); }
.topbar::after { background: linear-gradient(90deg, transparent 0%, var(--gold-2) 20%, var(--gold-3) 50%, var(--gold-2) 80%, transparent 100%); }
.ov-sec-head::after { background: linear-gradient(90deg, var(--gold-3), var(--green), var(--gold-2)); }
.pipe-step::before { background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); }
.pipe-ico { color: var(--label); }

/* Formation rows never wrap: cards shrink to fit the row instead of dropping a player to a new line */
.pitch-row { flex-wrap: nowrap; }
.pitch-row > .pcard { flex: 0 1 auto; min-width: 0; }
.pcard .name, .pcard .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pitch keeps the larger share; the pool gets what it needs and no more */
.grid-sim { grid-template-columns: minmax(0, 1.3fr) minmax(560px, 1fr); }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 40px; }
.pool-name b { max-width: 190px; }
.pool-name span, .pool-meta { max-width: 200px; }
/* Pool table scrolls the full panel height, not a 70vh cap */
.pool-cell .pool-wrap { max-height: none; }
/* Active segment buttons keep their fill on hover */
.seg button.active:hover { background: var(--accent); color: var(--accent-ink); }
.ov-horizon .seg button.active:hover, .ov-float .seg button.active:hover, .horizon-strip .seg button.active:hover { background: linear-gradient(135deg, var(--gold-3) 0%, var(--green) 55%, #D9A63A 100%); color: #111113; }

.pool-fx .fxs-cell { min-width: 30px; padding: 3px 1px; }
.pool-fx .fxs { gap: 2px; }
.pool-name span, .pool-meta { max-width: 196px; }
.pool-fx { max-width: none; overflow: visible; }

.grid-sim { grid-template-columns: minmax(0, 1.25fr) minmax(590px, 1fr); }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 36px; padding-left: 4px; padding-right: 4px; }
#poolTable th { font-size: 10.5px; letter-spacing: .04em; }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 38px; }
#poolTable th { font-size: 10px; letter-spacing: .03em; }

/* ===== Layout rhythm pass: designed hero art, editorial page headers, deliberate asymmetry ===== */
/* Hero: pitch-corner line art in gold replaces the blurred glow */
.hero-main::after { content: ''; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; filter: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='340' viewBox='0 0 560 340' fill='none' stroke='%23F2C14E' stroke-width='2'%3E%3Cpath d='M0 30H530V340'/%3E%3Cpath d='M502 30a28 28 0 0 0 28 28'/%3E%3Cpath d='M365 340V214H530'/%3E%3Cpath d='M475 340V296H530'/%3E%3Ccircle cx='420' cy='300' r='3' fill='%23F2C14E' stroke='none'/%3E%3Cpath d='M365 330a55 55 0 0 1 0-60' stroke-dasharray='3 5'/%3E%3C/svg%3E") no-repeat right -20px top -6px / 560px 340px; opacity: .32; pointer-events: none; }
.hero-main > * { position: relative; }
.hero-main p { max-width: 62ch; }
/* First hero tile leads in gold */
.hero .tile:first-child { background: linear-gradient(135deg, var(--gold-3) 0%, var(--green) 55%, #D9A63A 100%); color: #111113; border-color: transparent; box-shadow: 0 14px 30px rgba(242,193,78,.28); }
.hero .tile:first-child .label { color: rgba(17,17,19,.72); }
.hero .tile:first-child .label::before { background: #111113; box-shadow: 0 0 0 3px rgba(17,17,19,.14); }
.hero .tile:first-child .value { color: #111113; }
.hero .tile:first-child .sub { color: rgba(17,17,19,.78); }
.hero .tile:first-child:hover { border-color: transparent; }
:root .hero .tile:first-child { background-image: none; }

/* Editorial page header: title in the left column, lead text in the right with a gold rule; controls beneath */
.view-head { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.8fr); gap: 14px 40px; align-items: start; margin-bottom: 28px; padding-top: 6px; }
.view-head > div:first-child:has(> p) { display: contents; }
.view-head > div:first-child:has(> p) > h1 { grid-column: 1; font-size: 2.05rem; line-height: 1.08; letter-spacing: -.025em; margin: 0; }
.view-head > div:first-child:has(> p) > p { grid-column: 2; margin: 6px 0 0; padding-left: 22px; border-left: 2px solid var(--green); font-size: 14.5px; line-height: 1.62; max-width: 72ch; color: var(--ink-2); }
.view-head:has(> div:first-child > p) > :not(:first-child) { grid-column: 1 / -1; }
.view-head > .controls { justify-self: end; align-self: center; }
.view-head:has(> div:first-child > p) > .controls { justify-self: start; }
@media (max-width: 820px) { .view-head { grid-template-columns: 1fr; gap: 10px; } .view-head > div:first-child:has(> p) > p { grid-column: 1; padding-left: 0; border-left: 0; } .view-head:has(> div:first-child > p) > :not(:first-child), .view-head > .controls { grid-column: 1; justify-self: start; } }

/* Panel titles carry a small gold mark */
.panel-head h2::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--green); transform: rotate(45deg); flex-shrink: 0; }
/* Breathing room */
.grid { gap: 20px; }
.stack { gap: 20px; }
.panel-head { margin-bottom: 16px; }

/* Overview: the Context section runs full bleed as a tinted band */
.ov-sec.band { margin-inline: calc(50% - 50vw); padding: 30px max(24px, calc(50vw - 636px)) 36px; background-color: var(--bg-2); background-image: var(--grain); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); }
.ov-sec.band + .ov-sec { margin-top: 36px; }

/* Side column on the left for Captaincy and Chips, so consecutive pages do not repeat the same silhouette */
#view-captain .grid-main, #view-chips .grid-main { grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); }
#view-captain .grid-main > :first-child, #view-chips .grid-main > :first-child { order: 2; }
@media (max-width: 900px) { #view-captain .grid-main, #view-chips .grid-main { grid-template-columns: 1fr; } #view-captain .grid-main > :first-child, #view-chips .grid-main > :first-child { order: 0; } }

/* Lead hero tile keeps its gold fill in every theme (outranks the dark-theme tile rule) */
:root:not([data-theme="light"]) .hero .tile:first-child, :root[data-theme="dark"] .hero .tile:first-child, :root .hero .tile:first-child { background: linear-gradient(135deg, var(--gold-3) 0%, var(--green) 55%, #D9A63A 100%); background-image: linear-gradient(135deg, var(--gold-3) 0%, var(--green) 55%, #D9A63A 100%); border-color: transparent; color: #111113; }

/* Hero secondary button: always a dark translucent pill with white text, whatever the theme */
.hero-import .btn:not(.primary) { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.45); }
.hero-import .btn:not(.primary):hover { background: rgba(255,255,255,.2); }

/* ===== Section structure pass ===== */
/* Pipeline: opaque discs, the line runs between them and never behind them; the whole thing sits in a labelled rail */
.pipe { position: relative; padding: 30px 14px 12px; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pipe-cap { position: absolute; top: 10px; left: 18px; font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.pipe-ico { background: var(--bg-2); background-image: none; border: 1px solid rgba(242,193,78,.45); }
.pipe-step::before { top: 27px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 1.5px; opacity: .8; z-index: 0; }
.pipe-step:hover .pipe-ico { background: var(--green); color: #111113; border-color: transparent; }
:root:not([data-theme="dark"]) .pipe-step:hover .pipe-ico { color: #111113; }

/* Overview sections read as numbered chapters: a full-width rule with the number and eyebrow sitting on it */
#view-overview { counter-reset: sec; }
.ov-sec { counter-increment: sec; margin-top: 44px; }
.ov-sec-head { border-top: 1px solid var(--glass-border); padding-top: 26px; padding-bottom: 18px; }
.ov-sec-head::after { display: none; }
.ov-sec-head > div:first-child > .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.ov-sec-head > div:first-child > .eyebrow::before { content: counter(sec, decimal-leading-zero); font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #111113; background: linear-gradient(135deg, var(--gold-3), var(--green)); padding: 3px 8px; border-radius: 6px; line-height: 1; }
.ov-sec-head h2 { font-size: 1.8rem; margin-top: 8px; }
.ov-sec-head p { font-size: 15px; }
.ov-sec.band .ov-sec-head { border-top: 0; padding-top: 0; }
.ov-sec.band { margin-top: 48px; padding-top: 34px; padding-bottom: 40px; }
.ov-sec.band + .ov-sec { margin-top: 44px; }
.ov-sec:first-of-type { margin-top: 30px; }
.ov-sec:first-of-type .ov-sec-head { border-top: 0; padding-top: 0; }

/* Hero art: larger drawing without arcs, faded in from the middle so it never sits behind text or buttons */
.hero-main::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='460' viewBox='0 0 760 460' fill='none' stroke='%23F2C14E' stroke-width='2'%3E%3Cpath d='M0 40H720V460'/%3E%3Cpath d='M498 460V236H720'/%3E%3Cpath d='M646 460V352H720'/%3E%3Ccircle cx='572' cy='400' r='4' fill='%23F2C14E' stroke='none'/%3E%3C/svg%3E") no-repeat right -30px bottom -40px / 760px 460px; opacity: .4; -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 72%); mask-image: linear-gradient(90deg, transparent 42%, #000 72%); }

.hero-main::after { -webkit-mask-image: linear-gradient(90deg, transparent 58%, #000 84%); mask-image: linear-gradient(90deg, transparent 58%, #000 84%); opacity: .45; }

/* ===== Colour system: gold is brand and action only; data uses its own family =====
   difficulty 1..5: deep green, green, neutral slate, coral red, wine · good/warn/bad: green, burnt orange, coral red
   info/defensive: blue · attacking: rose · special (vice, doubles): violet · positions: GKP lavender, DEF blue, MID teal, FWD rose */
:root {
  --fdr1: #1F6F52; --fdr2: #3ECF8E; --fdr3: #E3E2EA; --fdr4: #EF4A62; --fdr5: #8A1531;
  --fdr1-ink: #fff; --fdr2-ink: #0B1F17; --fdr3-ink: #2A2A33; --fdr4-ink: #fff; --fdr5-ink: #fff;
  --good: #15935F; --warn: #C85A2B; --bad: #D22F47; --info: #2F6BDB; --link: #2F6BDB;
  --cyan: #4F8DF7; --pink: #FF4D8D; --violet: #8B5CF6;
  --pos-gkp: #A78BFA; --pos-def: #4F8DF7; --pos-mid: #19C6B0; --pos-fwd: #FF4D8D;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fdr3: #3D3D48; --fdr3-ink: #ECECF2; --good: #3ECF8E; --warn: #F0784A; --bad: #EF4A62; --info: #6FA3FF; --link: #7FB0FF; } }
:root[data-theme="dark"] { --fdr3: #3D3D48; --fdr3-ink: #ECECF2; --good: #3ECF8E; --warn: #F0784A; --bad: #EF4A62; --info: #6FA3FF; --link: #7FB0FF; }

.pos-1 { background: var(--pos-gkp); color: #1B1240; }
.pos-2 { background: var(--pos-def); color: #fff; }
.pos-3 { background: var(--pos-mid); color: #06302A; }
.pos-4 { background: var(--pos-fwd); color: #fff; }

.tag.good { background: rgba(62,207,142,.16); color: var(--good); }
.tag.warn { background: rgba(240,120,74,.16); color: var(--warn); }
.tag.bad { background: rgba(239,74,98,.16); color: var(--bad); }
.tag.info { background: rgba(79,141,247,.16); color: var(--info); }
.pip.W { background: var(--fdr2); color: var(--fdr2-ink); }
.pip.D { background: var(--fdr3); color: var(--fdr3-ink); }
.pip.L { background: var(--fdr4); color: var(--fdr4-ink); }
.finding.info .bar { background: var(--info); }
.chip-row.good .chip-verdict { background: var(--good); color: #06302A; }
.chip-row.warn .chip-verdict { background: rgba(240,120,74,.2); color: var(--warn); }
.ticker .dgw { box-shadow: 0 0 0 2px var(--violet) inset; }
.xp-col.dgw b { color: var(--violet); }
.bar-fill { background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); }
.bar-fill.def { background: linear-gradient(90deg, #2F6BDB, var(--cyan)); }
.xp-bar { background: linear-gradient(180deg, var(--gold-3), var(--gold-2)); }
.odds-title .dot.cs { background: var(--cyan); box-shadow: 0 0 0 3px rgba(79,141,247,.2); }
.odds-title .dot.atk { background: var(--pink); box-shadow: 0 0 0 3px rgba(255,77,141,.2); }
.odds-fill.cs { background: linear-gradient(90deg, #2F6BDB, var(--cyan)); }
.odds-fill.atk { background: linear-gradient(90deg, #B8235F, var(--pink)); }
.bento-icon.tint-cyan { color: var(--cyan); background: rgba(79,141,247,.14); }
.bento-icon.tint-pink { color: var(--pink); background: rgba(255,77,141,.14); }
.bento-icon.tint-green { color: var(--label); background: rgba(242,193,78,.14); }
.insight-icon { color: var(--label); }
.role-split .role-def { background: var(--cyan); color: #fff; }
.pcard.cap, .mcard.cap { border-color: var(--pink); }
.pcard.vice, .mcard.vice { border-color: var(--violet); }
.tip-row.lead b.tip-fdr-3 { color: var(--ink-2); }
:root:not([data-theme="dark"]) .tip-row.lead b.tip-fdr-2 { color: #15935F; } :root:not([data-theme="dark"]) .tip-row.lead b.tip-fdr-3 { color: var(--ink-2); }

/* Simulator scenario deck: the two controls that drive everything, set apart from the read-only figures */
.sim-summary { margin-bottom: 24px; padding: 12px 18px 12px 12px; gap: 6px 24px; }
.sim-deck { position: relative; display: flex; gap: 16px; align-items: flex-end; padding: 22px 16px 12px; border-radius: 14px; border: 1px solid rgba(242,193,78,.45); background: rgba(242,193,78,.08); }
.deck-cap { position: absolute; top: 7px; left: 16px; font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.sim-deck .sim-ctl .k { color: var(--ink-2); font-size: 11px; }
.sim-deck .sim-ctl .dd-btn { padding: 8px 14px; font-size: 15px; font-weight: 700; border-color: rgba(242,193,78,.55); background: var(--glass-strong); }
.sim-deck .sim-ctl .dd-btn:hover { border-color: var(--green); box-shadow: 0 0 0 3px rgba(242,193,78,.18); }
.sim-deck .dd-caret { color: var(--label); opacity: 1; }
.sim-sep { margin: 0 8px; }
/* Segmented controls read as a row of buttons: inactive options have an outline and a hover fill */
.seg { gap: 4px; padding: 4px; }
.seg button:not(.active) { border: 1px solid var(--glass-border); background: var(--glass); opacity: 1; color: var(--ink-2); }
.seg button:not(.active):hover { background: var(--glass-strong); color: var(--ink); border-color: var(--ink-3); }
.horizon-strip .seg button:not(.active), .ov-horizon .seg button:not(.active), .ov-float .seg button:not(.active) { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; }
.horizon-strip .seg button:not(.active):hover, .ov-horizon .seg button:not(.active):hover, .ov-float .seg button:not(.active):hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); color: #fff; }
.horizon-strip { margin-bottom: 20px; }
.sim-summary > .sim-deck { flex-direction: row; align-items: flex-end; gap: 18px; }
.sim-deck .sim-ctl { align-items: flex-start; }

/* Captaincy: the This-week table fills its panel (height set by the planner beside it) and the main column gets more width */
#view-captain .grid-main { grid-template-columns: minmax(300px, 3fr) minmax(0, 7fr); align-items: stretch; }
#view-captain .grid-main > .panel:first-child { display: flex; flex-direction: column; min-height: 0; }
#view-captain .grid-main > .panel:first-child > .panel-head { flex-shrink: 0; }
#view-captain .grid-main > .panel:first-child > .table-wrap { flex: 1 1 0; min-height: 0; max-height: none; }
#view-captain .grid-main > .panel:first-child th, #view-captain .grid-main > .panel:first-child td { padding-left: 8px; padding-right: 8px; }
@media (max-width: 900px) { #view-captain .grid-main > .panel:first-child > .table-wrap { flex: none; max-height: 70vh; } }
#view-captain .grid-main { grid-template-columns: minmax(340px, 7fr) minmax(0, 13fr); }

/* Goals chart: series colours match the legend pips (scored green, conceded coral) */
.chart .bar.scored { fill: var(--fdr2); opacity: .95; }
.chart .bar.conceded { fill: var(--fdr4); opacity: .95; }

/* Header: frosted in both themes, translucent enough that content blurs through it as the page scrolls */
.topbar { backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); }
:root:not([data-theme="dark"]) .topbar { background-color: rgba(255,255,255,.55); background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 32px rgba(17,17,19,.07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar { background-color: rgba(14,14,18,.55); background-image: linear-gradient(180deg, rgba(255,255,255,.06), transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 32px rgba(0,0,0,.35); } }
:root[data-theme="dark"] .topbar { background-color: rgba(14,14,18,.55); background-image: linear-gradient(180deg, rgba(255,255,255,.06), transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 32px rgba(0,0,0,.35); }

/* Hero art: anchored top-right, fading out from the left and before the form row, so it never meets text or buttons */
.hero-main::after { background-position: right -30px top -14px; -webkit-mask-image: linear-gradient(90deg, transparent 55%, #000 82%), linear-gradient(180deg, #000 45%, transparent 72%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 55%, #000 82%), linear-gradient(180deg, #000 45%, transparent 72%); mask-composite: intersect; }
.hero-import .btn:not(.primary) { background: rgba(20,18,12,.72); border-color: rgba(255,255,255,.35); }
.hero-import .btn:not(.primary):hover { background: rgba(20,18,12,.9); border-color: rgba(255,255,255,.6); }

/* Highlighted rows (your players, the recommended week): a soft gold tint with one marker at the row's left edge */
tr.mine td { box-shadow: none; background: rgba(242,193,78,.13); }
tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--green); }
tr.mine:hover td { background: rgba(242,193,78,.2); }
tr.mine td:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
tr.mine td:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

/* Crests inline with names */
.list-row .name .crest, .pk-name .crest, .tc-opt .crest, .chip-line .crest { display: inline-flex; vertical-align: -3px; margin-right: 1px; }
.tile .value .crest { display: inline-flex; vertical-align: -4px; margin-right: 4px; }
.tile .value { display: flex; align-items: center; gap: 6px; }

/* Pitch: cards a touch smaller with even gaps so the XI sits inside the field with margin on every side */
.pitch { padding: 26px 20px 14px; }
.pcard, .pitch-row > .pcard, .bench .pcard, .bench-slot .pcard.slot.empty { width: 112px; }
.pitch-row { gap: 12px; margin-bottom: 14px; }
.pcard .ph { height: 66px; }
.pcard .body { padding: 0 3px 4px; }
/* Toolbar and projected score: black glass with gold, so they read above the green */
.pitch-bar { background: rgba(8,8,11,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); padding: 9px 10px; gap: 8px; margin: -16px 6px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.pitch-bar .btn { font-size: 13px; padding: 7px 14px; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.pitch-bar .btn:hover { background: rgba(255,255,255,.2); }
.pitch-bar .btn.primary { background: linear-gradient(135deg, var(--gold-3) 0%, var(--green) 55%, #D9A63A 100%); color: #111113; border-color: transparent; }
.pitch-score { top: 70px; right: 20px; padding: 10px 14px; background: rgba(8,8,11,.72); border: 1px solid rgba(242,193,78,.55); box-shadow: 0 10px 28px rgba(0,0,0,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px; }
.ps-label { color: var(--green); opacity: 1; }
.ps-main b { font-size: 32px; }
.ps-sub { opacity: .9; font-size: 11px; }

/* Position pills: tinted, not filled. Muted hue as text and hairline on a translucent wash, in both themes */
:root { --gkp: #5B4BC9; --def: #2F6BDB; --mid: #0F8F7E; --fwd: #C8285F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gkp: #B3A6F5; --def: #86B4FF; --mid: #5ED3C3; --fwd: #FF8DB4; } }
:root[data-theme="dark"] { --gkp: #B3A6F5; --def: #86B4FF; --mid: #5ED3C3; --fwd: #FF8DB4; }
.pos-1, .pos-2, .pos-3, .pos-4 { background: transparent; border: 1px solid; font-weight: 800; letter-spacing: .06em; }
.pos-1 { color: var(--gkp); border-color: rgba(139,124,230,.45); background: rgba(139,124,230,.13); }
.pos-2 { color: var(--def); border-color: rgba(79,141,247,.45); background: rgba(79,141,247,.13); }
.pos-3 { color: var(--mid); border-color: rgba(25,198,176,.45); background: rgba(25,198,176,.13); }
.pos-4 { color: var(--fwd); border-color: rgba(255,77,141,.45); background: rgba(255,77,141,.13); }

/* Overview Teams panel: the table fills the panel height set by the ticker beside it, and scrolls inside */
.bento > .panel.bento-5 > .table-wrap { flex: 1 1 0; min-height: 0; max-height: none; }
@media (max-width: 1100px) { .bento > .panel.bento-5 > .table-wrap { flex: none; max-height: 60vh; } }
/* Context band: fine diagonal hairlines, two rings at the right, gold top edge */
.ov-sec.band { border-top: 0; box-shadow: inset 0 2px 0 var(--green); background-image: var(--grain), repeating-linear-gradient(135deg, var(--dot) 0 1px, transparent 1px 36px), radial-gradient(circle at 90% 18%, transparent 238px, var(--dot) 239px, var(--dot) 241px, transparent 242px), radial-gradient(circle at 90% 18%, transparent 158px, var(--dot) 159px, var(--dot) 161px, transparent 162px), radial-gradient(circle at 90% 18%, var(--dot) 0 5px, transparent 6px); background-blend-mode: soft-light, normal, normal, normal, normal; background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat; }

/* Keepers in orange-amber (keeper-kit convention), clearly apart from the defenders' blue */
:root { --gkp: #C2410C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gkp: #FFB070; } }
:root[data-theme="dark"] { --gkp: #FFB070; }
.pos-1 { color: var(--gkp); border-color: rgba(255,159,67,.5); background: rgba(255,159,67,.14); }
/* Pool: scrollbar gets its own gutter, stat columns wide enough for their headers */
.pool-cell .pool-wrap, .pool-wrap { margin-right: 0; padding-right: 6px; scrollbar-gutter: stable; }
.grid-sim { grid-template-columns: minmax(0, 1.2fr) minmax(624px, 1fr); }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 38px; padding-left: 3px; padding-right: 3px; }
#poolTable th { font-size: 10px; letter-spacing: .02em; overflow: visible; }

.grid-sim { grid-template-columns: minmax(0, 1.2fr) minmax(600px, 1fr); }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 36px; }
#poolTable th:nth-child(7), #poolTable td:nth-child(7) { width: 44px; }
.pitch-bar { justify-content: space-between; padding: 7px 8px; gap: 6px; }
.pitch-bar .btn { font-size: 12.5px; padding: 6px 11px; white-space: nowrap; }

/* Keepers in cool steel: apart from gold, blue, teal and rose alike */
:root { --gkp: #4B5563; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gkp: #CDD3DE; } }
:root[data-theme="dark"] { --gkp: #CDD3DE; }
.pos-1 { color: var(--gkp); border-color: rgba(148,163,184,.5); background: rgba(148,163,184,.16); }

/* Pool header: one size, weight and rhythm for every column */
#poolTable thead th, #poolTable thead th.num { font-size: 11px; letter-spacing: .05em; font-weight: 800; color: var(--ink-2); padding-top: 10px; padding-bottom: 10px; text-transform: uppercase; }
#poolTable thead th:first-child { padding-left: 12px; }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 38px; }
#poolTable th:nth-child(7), #poolTable td:nth-child(7) { width: 44px; }

/* Keepers in chartreuse: the keeper-kit yellow-green, apart from the gold and from the difficulty green */
:root { --gkp: #5F7A00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gkp: #D9F24A; } }
:root[data-theme="dark"] { --gkp: #D9F24A; }
.pos-1 { color: var(--gkp); border-color: rgba(190,230,60,.5); background: rgba(190,230,60,.14); }

/* Pool: real room for eight stat columns and a clear gap before the scrollbar */
.grid-sim { grid-template-columns: minmax(0, 1fr) minmax(660px, 1fr); }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 44px; padding-left: 4px; padding-right: 4px; }
#poolTable th:nth-child(7), #poolTable td:nth-child(7) { width: 48px; }
#poolTable th:last-child, #poolTable td:last-child { padding-right: 10px; }
.pool-cell .pool-wrap, .pool-wrap { padding-right: 10px; }
#poolTable thead th { letter-spacing: .04em; }
@media (max-width: 1260px) { .grid-sim { grid-template-columns: 1fr; } }

/* Simulator: action toolbar sits above the field, beside the card controls; the field keeps only players and the score */
.pitch-bar { position: relative; margin: 0 0 12px; z-index: 5; justify-content: flex-start; }
.pitch-score { top: 14px; right: 14px; }
.pitch { padding-top: 22px; }
.grid-sim { grid-template-columns: minmax(0, 1fr) minmax(640px, 1fr); }
#poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 42px; }
#poolTable th:nth-child(7), #poolTable td:nth-child(7) { width: 46px; }

/* Signals: cards of rows, crest + bold name + big figure + short label, one line of context */
.signals { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.signal { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; }
.sig-head { display: flex; align-items: center; gap: 10px; }
.sig-head b { font-size: 15px; }
.sig-items { display: flex; flex-direction: column; }
.sig-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "crest name num" "crest lbl num"; align-items: center; column-gap: 10px; padding: 7px 0; border-top: 1px solid var(--glass-border); }
.sig-item:first-child { border-top: 0; }
.sig-item.player, .sig-item.team { cursor: pointer; }
.sig-item.player:hover .sig-name, .sig-item.team:hover .sig-name { color: var(--label); }
.sig-item .crest { grid-area: crest; }
.sig-item.gw { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name num" "lbl num"; }
.sig-name { grid-area: name; font-family: var(--font-display); font-size: 15px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-name small { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.sig-num { grid-area: num; font-family: var(--font-display); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; padding-left: 10px; }
.sig-lbl { grid-area: lbl; font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
.sig-note { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.signal .linkish { align-self: flex-start; font-size: 12px; font-weight: 700; }

/* Pool Ease column: the score block fits inside its cell and right-aligns with the header */
#poolTable th:last-child, #poolTable td:last-child { width: 58px; padding-right: 12px; text-align: right; }
#poolTable td:last-child .ease-score { min-width: 0; width: 100%; align-items: flex-end; }
#poolTable td:last-child .ease-score .ease-bar { width: 38px; }
#poolTable thead th { white-space: nowrap; overflow: visible; }
#poolTable thead th:last-child { padding-right: 12px; }
.signals { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Pool header: both ends rounded (the right end sits inside the scrollbar gutter, so it is not clipped by the wrap) */
#poolTable thead th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
#poolTable thead th:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.pitch-bar { z-index: 60; }

/* Transfer ideas: two columns so each row is compact */
.sim-below .list { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); column-gap: 28px; }

/* Week-by-week explorer: mini pitch left, tabs + summary + transfer ideas right, all in one view */
.sim-below .gw-explorer { display: grid; grid-template-columns: minmax(0, 600px) minmax(320px, 1fr); grid-template-areas: "head head" "pitch tabs" "pitch text" "pitch ideas"; grid-template-rows: auto auto auto 1fr; gap: 6px 28px; align-items: start; }
.sim-below .gw-explorer > .panel-head { grid-area: head; }
.sim-below .gw-explorer > .gw-tabs { grid-area: tabs; }
.sim-below .gw-explorer > p { grid-area: text; margin: 6px 0 8px; }
.sim-below .gw-explorer > .pitch.mini { grid-area: pitch; align-self: start; }
.sim-below .gw-explorer > .gw-ideas { grid-area: ideas; min-width: 0; }
.gw-ideas { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.idea-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--glass-border); }
.idea-group-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.idea-group-h b { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.idea-group-h span { font-size: 12px; color: var(--ink-3); }
.idea-group.viewing .idea-group-h b { color: var(--accent); }
.idea-row.planned .idea-name b { font-weight: 800; }
.idea-row:not(.planned) { opacity: .78; }
.idea-row:not(.planned):hover { opacity: 1; }
.idea-none { padding: 4px 0 2px; }
.idea-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--glass-border); font-size: 13px; }
.idea-group .idea-row:first-of-type { border-top: 0; }
.idea-row:hover { background: var(--row-hover); }
.idea-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.idea-name i { font-style: normal; color: var(--ink-3); }
.idea-name b { font-weight: 800; }
.idea-name small { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.idea-fx { display: inline-flex; }
.idea-fx .fxs-cell { min-width: 30px; padding: 1px 2px; }
.idea-fx .fxs-cell b { font-size: 10px; }
.idea-row .val { text-align: right; font-size: 14px; }
@media (max-width: 560px) { .idea-row { grid-template-columns: minmax(0, 1fr) 44px; } .idea-fx { grid-column: 1 / -1; } }

.pitch.mini { padding: 14px 10px 8px; }
.pitch.mini .pitch-row { gap: 8px; margin-bottom: 10px; }
.pitch.mini .mcard { width: 96px; }
@media (max-width: 1100px) { .sim-below .gw-explorer { grid-template-columns: 1fr; grid-template-areas: "head" "tabs" "text" "pitch" "ideas"; } }

/* Chips: full-view coming-soon block */
#view-chips .chips-soon { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; min-height: calc(100vh - 140px); padding: clamp(28px, 5vw, 64px); color: #fff; border: 0; background-image: var(--grain), linear-gradient(135deg, #08080B 0%, #16141A 50%, #3A2C0F 100%); background-blend-mode: soft-light, normal; }
#view-chips .chips-soon::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='460' viewBox='0 0 760 460' fill='none' stroke='%23F2C14E' stroke-width='2'%3E%3Cpath d='M0 40H720V460'/%3E%3Cpath d='M498 460V236H720'/%3E%3Cpath d='M646 460V352H720'/%3E%3Ccircle cx='572' cy='400' r='4' fill='%23F2C14E' stroke='none'/%3E%3C/svg%3E") no-repeat right -30px top -14px / 760px 460px; -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 80%), linear-gradient(180deg, #000 0, #000 120px, transparent 300px); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 50%, #000 80%), linear-gradient(180deg, #000 0, #000 120px, transparent 300px); mask-composite: intersect; }
#view-chips .chips-soon-card { position: relative; z-index: 2; }
#view-chips .chips-soon > * { position: relative; z-index: 1; }
#view-chips .chips-soon .eyebrow { color: var(--green); font-size: 12px; }
#view-chips .chips-soon h1 { font-size: clamp(3.4rem, 9vw, 7.5rem); line-height: .92; letter-spacing: -.035em; font-weight: 800; margin: 14px 0 22px; color: #fff; background: linear-gradient(135deg, #fff 0%, var(--gold-3) 55%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#view-chips .chips-soon-top p { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.55; max-width: 44ch; color: rgba(255,255,255,.8); padding-left: 18px; border-left: 2px solid var(--green); }
#view-chips .chips-soon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#view-chips .chips-soon-card { padding: 20px 18px 18px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(242,193,78,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
#view-chips .chips-soon-k { display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #111113; background: linear-gradient(135deg, var(--gold-3), var(--green)); padding: 4px 9px; border-radius: 6px; line-height: 1; margin-bottom: 14px; }
#view-chips .chips-soon-card b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
#view-chips .chips-soon-card p { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.68); }
#view-chips .chips-soon-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
#view-chips .chips-soon-foot .muted { color: rgba(255,255,255,.55); font-size: 13px; margin-right: 6px; }
#view-chips .chips-soon-foot .btn { border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.06); }
#view-chips .chips-soon-foot .btn.primary { border-color: transparent; }
@media (max-width: 980px) { #view-chips .chips-soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { #view-chips .chips-soon { min-height: calc(100vh - 120px); gap: 26px; } #view-chips .chips-soon-grid { grid-template-columns: 1fr; } }

/* Slot popover: price range, same selects as the pool */
.slot-pop-range { display: flex; align-items: center; gap: 8px; padding: 0 6px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--glass-border); flex-wrap: wrap; }
.slot-pop-range label { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); }
.slot-pop-range .dd-btn { padding: 3px 9px; font-size: 12px; }
.slot-pop-range .btn.sm { padding: 2px 8px; margin-left: auto; }

/* Differentials: the table fills the left column to the height of the template list, scrolling inside only past that */
#view-differentials .grid-main { align-items: stretch; }
#view-differentials .grid-main > .panel:first-child { display: flex; flex-direction: column; min-height: 0; }
#view-differentials .grid-main > .panel:first-child .table-wrap { flex: 1 1 auto; max-height: none; min-height: 0; }
@media (max-width: 900px) { #view-differentials .grid-main > .panel:first-child .table-wrap { max-height: 70vh; } }

/* Feature rail under each page header */
.feat-rail { position: relative; overflow: hidden; margin: -8px 0 24px; padding: 14px 18px 16px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: inset 0 2px 0 var(--green), var(--glass-shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.feat-rail::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(135deg, var(--dot) 0 1px, transparent 1px 36px); opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent 55%, #000); mask-image: linear-gradient(90deg, transparent 55%, #000); }
.feat-rail-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: relative; }
.feat-rail-h .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); }
.feat-rail-h .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--green); transform: rotate(45deg); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 22px; position: relative; }
.feat { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; }
.feat + .feat { border-left: 1px solid var(--glass-border); padding-left: 16px; margin-left: -12px; }
.feat-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-2); border: 1px solid rgba(242,193,78,.45); color: var(--accent-2); transition: transform .15s, background .15s, color .15s; }
.feat-ico .ico { width: 17px; height: 17px; }
.feat:hover .feat-ico { transform: translateY(-2px) scale(1.06); background: var(--green); color: #111113; border-color: transparent; box-shadow: 0 8px 18px rgba(242,193,78,.3); }
.feat b { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 2px; line-height: 1.25; }
.feat p { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 720px) { .feat-grid { grid-template-columns: 1fr 1fr; gap: 4px 16px; } .feat + .feat { border-left: 0; padding-left: 0; margin-left: 0; } }
@media (max-width: 460px) { .feat-grid { grid-template-columns: 1fr; } }

/* Page tools (tabs, controls) sit under the feature rail on every page */
.view-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -8px 0 18px; }
.view-tools > .controls { margin: 0; }
.view-tools .seg { padding: 4px; }
.view-tools .seg button { padding: 6px 16px; font-size: 13px; }

/* Teams page target panels: identical structure and rhythm across all three */
.tgt-panel { display: flex; flex-direction: column; }
.tgt-intro { margin-bottom: 10px; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tgt-row { align-items: center; gap: 10px; padding: 9px 0; min-height: 72px; }
.tgt-row .name { font-size: 14px; }
.tgt-meta { margin: 1px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgt-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; min-width: 48px; }
.tgt-val b { font-family: var(--font-display); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tgt-val small { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }

/* Hero end: hairline with the gold marker, then breathing room before the content */
.feat-rail { margin-bottom: 18px; }
.view-tools { margin-bottom: 14px; }
.hero-end { position: relative; height: 1px; background: var(--glass-border); margin: 6px 0 34px; }
.hero-end::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 2px; background: var(--green); transform: rotate(45deg); }
.hero-end::after { content: ""; position: absolute; left: 12px; top: 0; width: 96px; height: 1px; background: linear-gradient(90deg, var(--green), transparent); }

/* Fixture targets: each club is a card with its own colour stripe, a tinted header and clean pick rows */
.pk-list { gap: 12px; }
.pk-club { padding: 0; overflow: hidden; background: var(--glass); border: 1px solid var(--glass-border); border-left: 4px solid var(--club, var(--green)); box-shadow: var(--glass-shadow); }
.pk-club-head { padding: 10px 14px 9px 13px; gap: 10px; background: var(--chip-bg); }
.pk-club-head .rank { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 800; }
.pk-club-head b { font-size: 16px; letter-spacing: -.01em; }
.pk-club-head .muted.small { font-size: 11px; }
.pk-val { font-size: 21px; line-height: 1; display: inline-flex; align-items: baseline; gap: 4px; }
.pk-val small { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pk-bar { height: 3px; border-radius: 0; background: transparent; margin: 0; }
.pk-bar .bar-fill { border-radius: 0; }
.pk-club .pk-row { padding: 8px 14px 8px 13px; border-radius: 0; border-top: 1px solid var(--glass-border); }
.pk-club .pk-row:first-of-type { border-top: 0; }
.pk-club .pk-row:hover { background: var(--row-hover); }
.pk-club .pk-lbl { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--chip-bg); color: var(--ink-2); font-size: 9px; width: fit-content; }
.pk-club .pk-name b { font-size: 13.5px; }
.pk-head { margin: 0 0 8px; padding: 6px 14px 6px 18px; }

/* Fixture targets, second pass: club cell on the left spans its picks; one header aligned to the pick columns */
.pk-list { gap: 10px; }
.pk-club { display: grid; grid-template-columns: 172px minmax(0, 1fr); padding: 0; border-left: 4px solid var(--club, var(--green)); }
.pk-club-head { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 12px 10px; background: color-mix(in srgb, var(--club, #888) 9%, var(--glass)); border-right: 1px solid var(--glass-border); position: relative; }
.pk-club-head .rank { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; font-size: 10.5px; }
.pk-id { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 24px; }
.pk-id b { font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-club-head .pk-val { margin: 6px 0 0; font-size: 24px; }
.pk-club-head .pk-bar { width: 100%; height: 3px; margin: 4px 0 2px; background: var(--chip-bg); border-radius: 2px; }
.pk-club-head .pk-bar .bar-fill { border-radius: 2px; }
.pk-sub { font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.pk-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pk-club .pk-row { grid-template-columns: 40px 36px minmax(0, 1fr) 48px 48px 56px 46px 60px; padding: 9px 12px; border-top: 0; }
.pk-club .pk-row + .pk-row { border-top: 1px solid var(--glass-border); }
.pk-club .pk-lbl { font-size: 9px; padding: 2px 0; text-align: center; width: 36px; background: var(--ink); color: var(--bg); }
.pk-club .pk-lbl.diff { background: rgba(62,207,142,.18); color: var(--good); }
.pk-club .pk-xp { padding: 3px 6px; border-radius: 6px; background: linear-gradient(90deg, transparent calc(100% - var(--w, 0%)), rgba(242,193,78,.28) 0); font-size: 14px; }
.pk-head { display: grid; grid-template-columns: 189px 40px 36px minmax(0, 1fr) 48px 48px 56px 46px 60px; gap: 6px; margin: 0 0 8px; padding: 6px 13px 6px 0; }
.pk-head span:first-child { padding-left: 14px; }
.pk-head span:last-child { padding-right: 6px; }
@media (max-width: 640px) {
  .pk-club { grid-template-columns: 1fr; }
  .pk-club-head { border-right: 0; border-bottom: 1px solid var(--glass-border); }
  .pk-head { display: none; }
  .pk-club .pk-row { grid-template-columns: 40px 36px minmax(0, 1fr) 48px 60px; }
  .pk-club .pk-row .pk-num:nth-child(5), .pk-club .pk-row .pk-num:nth-child(6), .pk-club .pk-row .pk-num:nth-child(7) { display: none; }
}

/* Player drawer: recent gameweeks table, points pills, cards, disclosure for the underlying numbers */
.hist-wrap { max-height: none; overflow-x: auto; }
.hist-table { font-size: 12.5px; }
.hist-table th, .hist-table td { padding: 6px 6px; }
.hist-table th { position: static; }
.hist-fx { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.hist-fx i { font-style: normal; font-size: 9px; font-weight: 800; color: var(--ink-3); }
.hist-fx .pip { width: auto; padding: 0 5px; font-size: 10px; height: 18px; }
.hist-fx:hover { color: var(--accent); }
.hist-dnp td { color: var(--ink-3); }
.hist-total td { border-top: 2px solid var(--glass-border); border-bottom: 0; font-weight: 700; }
.pts-pill { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; font-family: var(--font-display); font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; }
.pts-pill.blank { background: var(--chip-bg); color: var(--ink-3); }
.pts-pill.ok { background: rgba(62,207,142,.16); color: #1F6F52; }
.pts-pill.good { background: #3ECF8E; color: #08261A; }
.pts-pill.haul { background: #1F6F52; color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pts-pill.ok { color: #7FE3B4; } }
:root[data-theme="dark"] .pts-pill.ok { color: #7FE3B4; }
.dc-hit { color: var(--good); font-weight: 700; }
.card-ic { display: inline-block; width: 9px; height: 13px; border-radius: 2px; vertical-align: -2px; margin-left: 2px; }
.card-ic.yc { background: #F2C14E; }
.card-ic.rc { background: #EF4A62; }
.dr-more { margin-top: 18px; border-top: 1px solid var(--glass-border); padding-top: 6px; }
.dr-more summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.dr-more summary::-webkit-details-marker { display: none; }
.dr-more summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s; flex-shrink: 0; }
.dr-more[open] summary::before { transform: rotate(45deg); }
.dr-more summary .muted { font-weight: 500; }

/* Club page: expandable match detail under each previous fixture */
.fx-toggle { white-space: nowrap; }
.fx-toggle .fx-caret { display: inline-block; transition: transform .15s; font-size: 10px; }
.fx-toggle.open .fx-caret { transform: rotate(180deg); }
.fx-detail > td { padding: 0 8px 10px; background: var(--chip-bg); border-bottom: 1px solid var(--glass-border); white-space: normal; }
.fx-detail:hover { background: transparent; }
.fxd { padding: 8px 6px 2px; }
.fxd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.fxd-table { width: 100%; font-size: 12.5px; }
.fxd-table th { position: static; background: transparent; font-size: 10px; }
.fxd-table th, .fxd-table td { padding: 5px 6px; }
.fxd-table .player-cell .name { font-size: 13px; }

/* Fixture targets: tighter fixed columns so the player name always has room */
.pk-club { grid-template-columns: 150px minmax(0, 1fr); }
.pk-club-head { padding: 10px 10px 9px; }
.pk-id b { font-size: 14px; }
.pk-club-head .pk-val { font-size: 22px; }
.pk-club .pk-row { grid-template-columns: 34px 34px minmax(0, 1fr) 44px 42px 44px 38px 54px; gap: 5px; padding: 8px 10px; font-size: 12px; }
.pk-club .pk-lbl { width: 34px; font-size: 8.5px; }
.pk-club .pk-name b { font-size: 13px; }
.pk-club .pk-name .crest { width: 14px; height: 14px; }
.pk-club .pk-xp { font-size: 13.5px; padding: 3px 4px; }
.pk-head { grid-template-columns: 166px 34px 34px minmax(0, 1fr) 44px 42px 44px 38px 54px; gap: 5px; padding-right: 11px; }

/* Fixture targets: rank sits inline before the crest so long club names never collide with it */
.pk-club-head .rank { position: static; width: 20px; height: 20px; flex-shrink: 0; }
.pk-id { width: 100%; padding-right: 0; gap: 7px; }
.pk-id b { flex: 1; min-width: 0; }

/* Previous fixtures: fits the panel, expands from the left */
.fx-row td { white-space: normal; vertical-align: middle; }
.fx-row td.small { font-size: 12px; line-height: 1.35; }
.fx-cell { width: 22px; padding-right: 0 !important; }
.fx-chev { display: inline-block; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s; margin-left: 4px; }
.fx-row.open .fx-chev { transform: rotate(45deg); border-color: var(--accent); }
.fx-row.open td { background: var(--row-hover); }
.fx-row .club-cell { cursor: pointer; }
.fx-row .club-cell:hover span { color: var(--accent); }
.fx-row .club-cell > span { white-space: nowrap; }

/* Club page: a five-row window of the table with the club in the middle; the outer rows fade to hint at more */
.tbl-snip { position: relative; overflow: hidden; }
.snip-table { width: 100%; font-size: 13px; }
.snip-table th { position: static; background: transparent; }
.snip-table th, .snip-table td { padding: 8px 6px; }
.snip-table td.rank { color: var(--ink-3); font-family: var(--font-display); font-weight: 800; }
.snip-table tr.me td { background: rgba(242,193,78,.14); }
.snip-table tr.me td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.snip-table tr.me td b { color: var(--ink); }
.snip-table tr.faded td { opacity: .45; filter: blur(.6px); border-bottom-color: transparent; }
.snip-table tr.faded:hover td { opacity: .85; filter: none; }
.snip-table tr.clickable:hover td { background: var(--row-hover); }
.snip-table .pips { gap: 2px; }
.snip-table .pip { width: 16px; height: 16px; font-size: 9px; border-radius: 4px; }
.hero-end { margin: 6px 0 22px; }
.view-tools { margin: 0 0 18px; }
.dr-team { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-bottom: 1px dotted transparent; }
.dr-team:hover { color: var(--accent); border-bottom-color: currentColor; }

/* Set pieces: one table, a row per club, first choice bold with the back-ups beneath */
.sp-table { width: 100%; table-layout: fixed; }
.sp-table th:first-child { width: 190px; }
.sp-table th, .sp-table td { padding: 10px 12px; white-space: normal; vertical-align: top; }
.sp-table th { position: static; }
.sp-table td .club-cell { cursor: pointer; gap: 9px; }
.sp-table td .club-cell:hover b { color: var(--accent); }
.sp-table td .club-cell b { font-size: 13.5px; }
.sp-first { font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1.3; }
.sp-rest { font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.sp-name { cursor: pointer; border-radius: 4px; }
.sp-name:hover { color: var(--accent); }
.sp-name.hit { background: rgba(242,193,78,.22); padding: 0 3px; }
.sp-name.mine::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: 1px; }
.sp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 5px; vertical-align: 1px; }
.sp-dot.mine { background: var(--green); margin-left: 0; }
.sp-dot.warn { background: #F0784A; }
.sp-dot.bad { background: #EF4A62; }
.sp-legend { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sp-legend .sp-dot { margin-left: 2px; }
@media (max-width: 760px) { .sp-table th:first-child { width: 120px; } .sp-table th, .sp-table td { padding: 8px 6px; } }
.pm { color: var(--bad); font-weight: 800; }

/* Top bar: bigger, wider, more air between items */
.topbar-inner { max-width: 1680px; padding: 14px 28px; gap: 22px; }
.brand-mark { width: 42px; height: 42px; font-size: 17px; border-radius: 12px; }
.brand-name { font-size: 21px; }
.brand-sub { font-size: 12px; margin-top: -2px; }
.nav { gap: 6px; }
.nav button { font-size: 15px; padding: 9px 16px; letter-spacing: -.005em; }
.team-import input { width: 130px; padding: 9px 14px; font-size: 14px; }
.team-import .btn { padding: 9px 18px; font-size: 14px; }
.theme-toggle { width: 38px; height: 38px; }
@media (max-width: 1100px) { .nav button { font-size: 13.5px; padding: 7px 12px; } .topbar-inner { padding: 10px 20px; gap: 12px; } }

/* Breathing room: a wider spacing scale from the top bar down to table rows */
main { padding-block: 40px 96px; }
.view-head { margin-bottom: 30px; padding-top: 8px; }
.feat-rail { padding: 18px 22px 20px; margin-bottom: 22px; }
.feat-rail-h { margin-bottom: 12px; }
.hero-end { margin: 10px 0 32px; }
.view-tools { margin-bottom: 26px; }
.grid { gap: 24px; }
.stack { gap: 24px; }
.tiles { gap: 16px; }
.tile { padding: 18px 20px; }
.panel { padding: 22px 24px; }
.panel-head { margin-bottom: 16px; }
.panel-head h2 { font-size: 1.2rem; }
.panel h3 { margin-top: 22px; margin-bottom: 10px; }
.panel .eyebrow { margin-bottom: 8px; }
.panel > p.muted.small, .panel > p.small.muted { line-height: 1.6; }
th, td { padding: 9px 10px; }
.list-row { padding: 10px 0; }
.findings { gap: 10px; }
.finding { padding: 12px 14px; }
.controls { gap: 10px; margin-bottom: 16px; }
.drawer { padding: 26px 24px; }
.drawer h3 { margin-top: 26px !important; margin-bottom: 10px !important; }
.dr-tiles { margin-top: 18px; gap: 14px; }
.sim-summary { padding: 14px 22px; margin-bottom: 18px; }
.sim-toolbar { margin-bottom: 12px; }
.sim-below .gw-explorer { gap: 8px 32px; }
.ov-sec { margin-bottom: 12px; }
.ov-sec-head { padding-top: 32px; padding-bottom: 22px; }
.bento { gap: 20px; }
.tbl-snip .snip-table th, .tbl-snip .snip-table td { padding: 9px 8px; }
@media (max-width: 720px) { main { padding-block: 24px 64px; } .panel { padding: 16px 18px; } .grid, .stack { gap: 16px; } }

/* Top bar: no import controls (My Team and the Overview hero handle loading); the nav wraps rather than scrolls */
.team-import { display: none; }
.nav { overflow: visible; flex-wrap: wrap; row-gap: 4px; }
.nav::-webkit-scrollbar { display: none; }
.topbar-inner { flex-wrap: nowrap; }
@media (max-width: 900px) { .topbar-inner { flex-wrap: wrap; } }
.nav { gap: 2px; }
.nav button { font-size: 14px; padding: 8px 13px; }
.topbar-inner { gap: 16px; }
@media (max-width: 1400px) { .nav button { font-size: 13.5px; padding: 7px 11px; } }

/* Brand coherence: the secondary accent is gold in both themes (it was teal in dark, which leaked into eyebrows, icons and bars) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-2: #FFE08A; } }
:root[data-theme="dark"] { --accent-2: #FFE08A; }

/* One hero height on every page: fixed header row with a clamped lead; the feature band is a single fixed-height row */
.view-head { min-height: 88px; align-content: start; }
.view-head > div:first-child:has(> p) > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feat-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 0 18px; }
.feat { min-height: 68px; align-items: flex-start; }
.feat b { line-height: 1.2; }
.feat p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) { .view-head { min-height: 0; } .feat { min-height: 0; } .feat p { -webkit-line-clamp: 3; } }

.mode-note { margin: -8px 0 18px; max-width: 96ch; line-height: 1.55; }

/* Leads are two lines at most; anything longer lives in a page note under the hero */
.view-head { min-height: 66px; }
.view-head > div:first-child:has(> p) > p { -webkit-line-clamp: 2; }
.page-note, .mode-note { margin: -6px 0 22px; max-width: 100ch; line-height: 1.6; padding-left: 14px; border-left: 2px solid var(--glass-border); }
@media (max-width: 720px) { .view-head > div:first-child:has(> p) > p { -webkit-line-clamp: 4; } }

/* Teal is a data colour only: brand chrome and interaction states are gold */
.topbar::after { background: linear-gradient(90deg, transparent 0%, var(--gold-2) 18%, var(--green) 50%, var(--gold-3) 72%, transparent 100%); opacity: .8; }
.nav button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--green); }
.nw:focus-within { outline-color: var(--green); }
.tpl-edit:focus, .dd-search:focus { border-color: var(--green); }
.pcard.slot.selected { outline-color: var(--green); }
.ov-sec-head::after { background: linear-gradient(90deg, var(--gold-3), var(--green), var(--gold-2)); }
.bento-icon, .insight-icon { color: var(--accent-2); }
.bento-icon.tint-cyan { color: var(--accent-2); background: rgba(242,193,78,.14); }

/* Hero: artwork under the title, lead plus a second paragraph on the right; one fixed height */
.view-head { min-height: 168px; grid-template-rows: auto 1fr; align-content: start; }
.view-head > div:first-child:has(> p) > h1 { align-self: start; }
/* Artwork: white stencils in data/img/art, coloured by the mask fill token (deep gold on light, gold on dark) */
:root { --art-fill: #B8860B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --art-fill: #F2C14E; } }
:root[data-theme="dark"] { --art-fill: #F2C14E; }
.art { background-color: var(--art-fill); -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
.hero-art { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; width: min(100%, 250px); height: 125px; margin-top: 10px; opacity: .95; -webkit-mask-position: left center; mask-position: left center; }
.hero-art.sq { width: 125px; }
@media (max-width: 820px) { .hero-art { grid-row: auto; height: 84px; margin-top: 4px; } }
.empty-art { width: 112px; aspect-ratio: 1; margin: 0 auto 10px; opacity: .85; }
.empty-state { text-align: center; padding: 6px 0 22px; color: var(--ink-3); }
.empty-state p { margin: 0; font-size: 13.5px; }
.error-state { text-align: center; padding: 36px 24px; }
.error-state .empty-art { width: 140px; margin-bottom: 14px; }
/* The overview hero and the Chips page are always dark cards, so their art is always the bright gold */
.hero-main > .hero-main-art { position: absolute; right: 30px; bottom: 26px; width: 210px; aspect-ratio: 3 / 2; opacity: .92; background-color: #F2C14E; z-index: 0; }
@media (min-width: 1100px) { .hero-main:has(> .hero-main-art) { padding-right: 264px; } }
@media (max-width: 1099px) { .hero-main > .hero-main-art { display: none; } }
#view-chips .chips-soon-top > .chips-art { position: absolute; right: 0; top: 0; width: min(36%, 380px); aspect-ratio: 3 / 2; opacity: .95; background-color: #F2C14E; }
@media (max-width: 900px) { #view-chips .chips-soon-top > .chips-art { display: none; } }
#view-chips .chips-soon-card > .chip-art { position: absolute; right: 14px; top: 14px; width: 58px; aspect-ratio: 1; background-color: #F2C14E; opacity: .9; }
/* Overview chapter heads 03-05: a wide mark on the right where 01 and 02 carry their controls */
.ov-sec-head > .ov-art { flex: 0 0 auto; height: 92px; aspect-ratio: 3 / 2; align-self: center; opacity: .9; margin-right: 8px; }
@media (max-width: 720px) { .ov-sec-head > .ov-art { display: none; } }
.loading-state .empty-art { width: 120px; margin-bottom: 14px; }
.lead-more { grid-column: 2; grid-row: 2; margin: 10px 0 0; padding-left: 22px; border-left: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); max-width: 76ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; align-self: start; }
.lead-more code { font-size: 12px; }
@media (max-width: 820px) { .view-head { min-height: 0; grid-template-rows: none; } .hero-art { display: none; } .lead-more { grid-column: 1; grid-row: auto; padding-left: 0; -webkit-line-clamp: 6; } }

/* One icon treatment everywhere: gold line icon on a quiet charcoal disc, no per-icon tints */
.bento-icon, .insight-icon, .feat-ico, .pipe-ico { background: var(--bg-2); border: 1px solid rgba(242,193,78,.42); color: var(--gold-2); box-shadow: none; }
.bento-icon.tint-green, .bento-icon.tint-cyan, .bento-icon.tint-pink, .bento-icon.tint-violet, .insight-icon { color: var(--gold-2); background: var(--bg-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bento-icon, :root:not([data-theme="light"]) .insight-icon, :root:not([data-theme="light"]) .feat-ico, :root:not([data-theme="light"]) .pipe-ico, :root:not([data-theme="light"]) .bento-icon[class*="tint-"] { color: var(--green); background: #1A1A22; border-color: rgba(242,193,78,.38); } }
:root[data-theme="dark"] .bento-icon, :root[data-theme="dark"] .insight-icon, :root[data-theme="dark"] .feat-ico, :root[data-theme="dark"] .pipe-ico, :root[data-theme="dark"] .bento-icon[class*="tint-"] { color: var(--green); background: #1A1A22; border-color: rgba(242,193,78,.38); }
.bento-icon .ico, .insight-icon .ico { stroke-width: 1.6; }
.odds-diff { display: inline-block; font-family: var(--font-display); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: rgba(62,207,142,.18); color: var(--good); vertical-align: 1px; cursor: help; }
.odds-row .meta { white-space: normal; line-height: 1.5; }
.odds-dc { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--good); padding: 0 5px; border-radius: 4px; background: rgba(62,207,142,.12); cursor: help; }
/* Fixture target rows: names wrap instead of truncating; DC note sits under the name */
.pk-club .pk-name { white-space: normal; overflow: visible; line-height: 1.2; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }
.pk-club .pk-name b { white-space: normal; }
.pk-dc { flex-basis: 100%; font-size: 10px; font-weight: 700; color: var(--good); margin-top: 2px; cursor: help; }
.pk-club .pk-row { align-items: center; }
.pk-club .pk-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pk-who { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.pk-who .crest { flex-shrink: 0; }
.pk-who b { white-space: normal; min-width: 0; line-height: 1.15; }
.pk-dc { flex-basis: auto; margin-top: 0; }
/* Target rows: long names fade out at the right edge instead of wrapping or spilling; hover shows the full name */
.pk-club .pk-name { overflow: hidden; }
.pk-who { white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); cursor: help; }
.pk-who b { white-space: nowrap; overflow: visible; }
/* Player panel: position-aware key numbers under the tiles */
.dr-key .kv { grid-template-columns: repeat(3, 1fr); }
.dr-key .kv .v { font-size: 17px; }
.dr-key .kv .v small { font-size: 10.5px; font-weight: 600; margin-left: 3px; }
.dr-key .kv .v.delta-up { color: var(--good); }
/* Target rows: names on one line, more room for them, lighter fade */
.pk-club .pk-name b, .pk-club .pk-who b { white-space: nowrap; }
.pk-club { grid-template-columns: 138px minmax(0, 1fr); }
.pk-club .pk-row { grid-template-columns: 30px 32px minmax(0, 1fr) 42px 40px 40px 34px 48px; gap: 4px; padding: 8px 8px 8px 9px; }
.pk-club .pk-lbl { width: 30px; font-size: 8px; letter-spacing: .04em; }
.pk-club .pk-row .pos { transform: scale(.8); }
.pk-club .pk-num { font-size: 11.5px; }
.pk-club .pk-xp { font-size: 13px; padding: 3px 3px; }
.pk-who { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 10px), transparent); gap: 4px; }
.pk-who .crest { width: 14px; height: 14px; }
.pk-head { grid-template-columns: 152px 30px 32px minmax(0, 1fr) 42px 40px 40px 34px 48px; gap: 4px; padding-right: 9px; }
/* Simulator bench never overflows the pitch: extra cards wrap to a second row */
.bench .pitch-row { flex-wrap: wrap; row-gap: 14px; }

/* Overview: no chapter numbers (sections are not steps), bigger section titles, a break after the hero, no grey bands */
.ov-sec-head > div:first-child > .eyebrow::before { display: none; }
.ov-sec-head h2 { font-size: 2.25rem; line-height: 1.08; margin-top: 10px; }
.ov-sec-head p { font-size: 15.5px; max-width: 70ch; }
.ov-sec:first-of-type { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--glass-border); position: relative; }
.ov-sec:first-of-type::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 2px; background: var(--green); transform: rotate(45deg); }
.ov-sec:first-of-type::after { content: ""; position: absolute; left: 12px; top: -1px; width: 96px; height: 1px; background: linear-gradient(90deg, var(--green), transparent); }
.ov-sec.band { margin-inline: 0; padding: 0; background: transparent; background-image: none; border: 0; box-shadow: none; }
.ov-sec.band .ov-sec-head { border-top: 1px solid var(--glass-border); padding-top: 32px; }
.list.compact .meta .dc-hit { font-weight: 700; }
@media (max-width: 720px) { .ov-sec-head h2 { font-size: 1.6rem; } }
/* Week-by-week mini pitch keeps its full height with an empty squad, and shows an empty state instead of collapsing */
.pitch.mini { min-height: 420px; display: flex; flex-direction: column; }
.pitch.mini .bench { margin-top: auto; }
.pitch.mini.is-empty .bench { display: none; }
.mini-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 24px; color: #fff; position: relative; z-index: 1; }
.mini-empty .art { width: 120px; height: 120px; background-color: rgba(255,255,255,.85); margin-bottom: 6px; }
.mini-empty b { font-family: var(--font-display); font-size: 16px; }
.mini-empty p { font-size: 13px; color: rgba(255,255,255,.8); max-width: 34ch; line-height: 1.5; }

/* Signals: a flat editorial grid of columns, no box inside a box */
.signals.flat { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; margin-top: 4px; }
.signals.flat .signal { background: transparent; border: 0; border-radius: 0; border-top: 2px solid var(--glass-border); padding: 18px 0 22px; gap: 10px; }
.signals.flat .signal .sig-head b { font-size: 16px; }
.signals.flat .sig-item { padding: 9px 0; }
.signals.flat .sig-num { font-size: 22px; }
.signals.flat .sig-note { font-size: 12.5px; color: var(--ink-2); }
.signals.flat .signal .linkish { margin-top: 2px; }
.signals.flat .signal:hover { border-top-color: var(--green); }
.tile .sub .delta-up, .tile .sub.delta-up { color: var(--good); font-weight: 700; }
.tile .sub .delta-down, .tile .sub.delta-down { color: var(--bad); font-weight: 700; }

/* Overview: defensive contributions as a compact table */
.dc-wrap { max-height: none; overflow: visible; }
.dc-table { font-size: 12.5px; }
.dc-table th { position: static; font-size: 10px; padding: 4px 6px; }
.dc-table td { padding: 6px 6px; }
.dc-table .dc-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dc-table .dc-who .pill { transform: scale(.85); transform-origin: left center; margin-right: -4px; }
.dc-table .dc-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.dc-table td.num small { font-size: 10px; margin-left: 2px; }

/* Club page: ones to watch */
.watch-list .list-row { align-items: flex-start; }
.watch-list .watch-why { white-space: normal; line-height: 1.4; color: var(--ink-2); }
.watch-list .watch-why abbr { color: inherit; }

/* Set pieces: takers who are out or doubtful are struck through in the order */
.sp-name.unfit { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 1.5px; }
.sp-first .sp-name.unfit { text-decoration: none; }
.fx-row td.fx-score { white-space: nowrap; }
.sp-first .sp-name.unfit { text-decoration: line-through; }

/* Three roles, three colours: differential = green, next-best = neutral, defensive contributions = defence blue */
.odds-diff.is-next { background: var(--chip-bg); color: var(--ink-2); }
.odds-dc, .pk-dc, .dc-hit, .dc-table td.dc-hit { color: #4F8DF7; }
.odds-dc { background: rgba(79,141,247,.14); }
.pk-club .pk-lbl.diff { background: rgba(62,207,142,.18); color: var(--good); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .odds-dc, :root:not([data-theme="light"]) .pk-dc, :root:not([data-theme="light"]) .dc-hit { color: #7FAAFF; } }
:root[data-theme="dark"] .odds-dc, :root[data-theme="dark"] .pk-dc, :root[data-theme="dark"] .dc-hit { color: #7FAAFF; }
.pos-seg { vertical-align: middle; } .pos-seg button { padding: 6px 14px; font-size: 13px; }

/* Compare sheet: stats picker beside the note */
.cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.cmp-head p { margin: 0; }
.cmp-head .colpick-menu { max-height: 380px; columns: 2; column-gap: 14px; }
.cmp-head .colpick-menu label { break-inside: avoid; }
.cmp-head .colpick-menu > div { column-span: all; }
/* Fixture ticker: club filter menu */
.club-pick .colpick-menu { min-width: 240px; max-height: 420px; columns: 2; column-gap: 12px; }
.club-pick .colpick-menu label { break-inside: avoid; }
.club-pick .colpick-menu label span { display: inline-flex; align-items: center; gap: 6px; }
.club-pick .colpick-menu > div { column-span: all; }
/* Ticker: keep height with no clubs selected; the club menu stacks above the panels below */
.ticker-wrap { min-height: 240px; }
.ticker-wrap .empty { padding: 60px 16px; }
.glass.panel:has(.club-pick.open) { position: relative; z-index: 60; }
.club-pick .colpick-menu { z-index: 95; }
/* DC card fills its grid cell: table grows, footnote sits at the bottom */
.dc-card { display: flex; flex-direction: column; }
.dc-card .dc-wrap { flex: 1; }
.dc-card .bento-foot { margin-top: auto; }
.slot-pop-search { padding: 0 6px 8px; }
.slot-pop-search input { width: 100%; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); font: inherit; font-size: 13px; }
.slot-pop-search { display: flex; gap: 6px; align-items: center; }
.slot-pop-search input { flex: 1; min-width: 0; }
.slot-pop-search .dd-btn { padding: 6px 10px; font-size: 12px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Empty slot: the Suggest picks pill stays inside the card */
.pcard.slot.empty .ai-pill { max-width: calc(100% - 12px); white-space: normal; text-align: center; line-height: 1.15; font-size: 9px; padding: 3px 8px; letter-spacing: .02em; box-sizing: border-box; }
.pcard.slot.empty { padding-left: 6px; padding-right: 6px; }
.pcard.slot.empty .ai-pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: #111113; } .pcard.slot.empty .ai-ico { width: 11px; height: 11px; flex-shrink: 0; }
/* Player details button on simulator cards and pool rows */
.info-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--ink-2); font-family: var(--font-display); font-size: 10px; font-weight: 800; line-height: 1; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.info-btn:hover { background: var(--green); color: #111113; border-color: transparent; }
.pcard .info-btn { position: absolute; bottom: 4px; right: 4px; background: rgba(255,255,255,.9); color: #141419; border-color: rgba(17,17,19,.15); opacity: 0; transition: opacity .15s; z-index: 3; }
.pcard:hover .info-btn { opacity: 1; }
.info-btn.inline { vertical-align: 1px; margin-left: 5px; width: 16px; height: 16px; font-size: 9px; }
/* Details button: dark disc with a gold i, always visible, sitting over the shirt so it never covers the fixtures */
.info-btn, .pcard .info-btn, .info-btn.inline { background: #141419; color: #F2C14E; border: 1px solid rgba(242,193,78,.55); opacity: 1; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.info-btn:hover, .pcard .info-btn:hover { background: #F2C14E; color: #111113; border-color: transparent; }
.pcard .info-btn { top: 50px; right: 4px; bottom: auto; width: 20px; height: 20px; font-size: 11px; }
.pcard.slot .info-btn { top: 50px; }
/* Details button: subtle, and under the crest on cards */
.pcard .info-btn { top: 28px; right: 5px; width: 18px; height: 18px; font-size: 10px; background: rgba(255,255,255,.88); color: #141419; border: 1px solid rgba(17,17,19,.18); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.pcard.slot .info-btn { top: 28px; }
.pcard .info-btn:hover { background: #F2C14E; color: #111113; border-color: transparent; }
.info-btn.inline { background: transparent; color: var(--ink-3); border: 1px solid var(--glass-border); box-shadow: none; }
.info-btn.inline:hover { background: var(--chip-bg); color: var(--ink); border-color: var(--glass-border); }
/* Details button lives in the name row, quiet outlined circle */
.pcard .info-btn, .pcard.slot .info-btn { position: static; top: auto; right: auto; bottom: auto; width: 15px; height: 15px; font-size: 9px; margin-left: 3px; flex-shrink: 0; background: transparent; color: rgba(20,20,25,.55); border: 1px solid rgba(20,20,25,.28); box-shadow: none; opacity: 1; }
.pcard .info-btn:hover { background: #F2C14E; color: #111113; border-color: transparent; }
.pcard .nm-row { gap: 3px; }

/* Defensive contributions card: position toggle row */
.dc-tools { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px; }
.dc-tools .eyebrow { font-size: 10.5px; letter-spacing: .1em; }
.seg.sm { padding: 2px; }
.seg.sm button { font-size: 11.5px; padding: 3px 10px; }
.list.compact .meta .fdr-row { vertical-align: middle; }

/* Players: Top picks (four position tables, two by two) */
.picks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .picks-grid { grid-template-columns: 1fr; } }
.picks-panel .panel-head h2 { gap: 8px; }
.picks-ctl { margin-bottom: 8px; }
.picks-ctl select { max-width: 170px; }
.picks-wrap { max-height: none; }
.picks-table th, .picks-table td { padding: 5px 6px; }
.picks-table .player-cell .name { font-size: 12.5px; }
.picks-table .fxs-cell { min-width: 32px; }

/* Hero rhythm: the title row has one fixed height so a one-line lead (Set pieces) and a two-line lead (Explorer) give the same hero;
   leads are clamped to two lines, so 54px is the two-line height plus the lead's top margin */
.view-head { grid-template-rows: minmax(54px, auto) 1fr; }
@media (max-width: 820px) { .view-head { grid-template-rows: none; } }

/* Page-level tabs (Explorer / Top picks / Set pieces, club and fixture modes) read like the top navigation: gold active pill in both themes */
.view-tools .seg { background: var(--chip-bg); border: 1px solid var(--glass-border); gap: 4px; padding: 4px; }
.view-tools .seg button { padding: 7px 18px; font-size: 13.5px; font-weight: 700; }
.view-tools .seg button:not(.active) { border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink-2); }
.view-tools .seg button:not(.active):hover { background: var(--glass-strong); color: var(--ink); border-color: rgba(242,193,78,.5); }
.view-tools .seg button.active, .view-tools .seg button.active:hover { background: linear-gradient(135deg, var(--gold-3) 0%, var(--green) 55%, #D9A63A 100%); color: #111113; border: 1px solid transparent; box-shadow: 0 4px 14px rgba(242,193,78,.32); }

/* Top picks: the five-week strip fits inside each half-width panel without a horizontal scrollbar */
.picks-wrap { overflow-y: visible; }
.picks-table { width: 100%; }
.picks-table th, .picks-table td { padding: 4px 4px; }
.picks-table th { letter-spacing: .03em; }
.picks-table td.rank { width: 18px; padding-left: 2px; }
.picks-table .player-cell { gap: 6px; max-width: 168px; }
.picks-table .player-cell > div:last-child { min-width: 0; }
.picks-table .player-cell .name, .picks-table .player-cell .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picks-table .player-cell .meta { font-size: 10.5px; }
.picks-table .fxs { gap: 2px; }
.picks-table .fxs-cell { min-width: 29px; padding: 2px 1px; border-radius: 5px; }
.picks-table .fxs-cell b { font-size: 10.5px; }
@media (max-width: 1240px) and (min-width: 641px) { .picks-grid { grid-template-columns: 1fr; } }

/* "xP" is written with a lowercase x everywhere, including uppercase headers and captions (the span is added by keepXpLowercase) */
.xp-lc { text-transform: none; }

/* Signals: the first nine cards show, the rest unfold behind one button */
.signals:not(.all) > .signal.more { display: none; }
.sig-more { margin-top: 14px; }

/* Squad league: read-only squads, one card each. Every card has the same five blocks (head, spread, stats, list or
   note, actions); with subgrid each block sits on a shared row, so the cards beside each other line up block for block
   whatever the length of the description or the score line. Browsers without subgrid fall back to a plain column. */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.ai-team { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px; }
@supports (grid-template-rows: subgrid) {
  .ai-team { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 10px; align-content: start; }
  .ai-team > * { min-width: 0; }
  .ai-team .ai-list { align-self: start; }
  .ai-team .ai-actions { align-self: end; }
}
.ai-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ai-head h2 { font-size: 1.15rem; margin: 2px 0 4px; }
.ai-head p { line-height: 1.45; }
.ai-big { text-align: right; flex-shrink: 0; }
.ai-big b { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--green); }
.ai-big span { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.ai-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ai-stat { background: var(--chip-bg); border-radius: 8px; padding: 6px 8px; text-align: center; }
.ai-stat b { display: block; font-family: var(--font-display); font-size: 15px; font-variant-numeric: tabular-nums; }
.ai-stat span { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.ai-list { display: flex; flex-direction: column; }
.ai-row { display: grid; grid-template-columns: 38px 1fr auto 42px; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--glass-border); font-size: 12.5px; cursor: pointer; }
.ai-row:hover { background: var(--row-hover); }
.ai-row.bench { opacity: .7; }
.ai-row .pill { font-size: 10px; padding: 1px 5px; }
.ai-name { display: flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-xp { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ai-c { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 9px; font-weight: 800; font-family: var(--font-display); }
.ai-c.v { background: var(--violet); }
.ai-bench-h { margin: 8px 0 2px; }
.ai-team > .btn { align-self: flex-start; margin-top: 4px; }
.ai-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ai-sum { background: var(--chip-bg); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.ai-sum b { font-family: var(--font-display); font-size: 13px; }
.ai-sum span { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.ai-sum small { font-family: var(--font-body); font-weight: 500; color: var(--ink-3); }
.ai-track td small { font-size: 10.5px; }

.ai-spread { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px 10px; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--glass-border); font-size: 11px; color: var(--ink-3); }
.ai-spread span { white-space: nowrap; }
.ai-spread b { font-family: var(--font-display); font-size: 13px; color: var(--ink); margin-right: 3px; font-variant-numeric: tabular-nums; }
.ai-misses { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
.ai-miss { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--chip-bg); font-size: 12px; cursor: pointer; }
.ai-miss b { font-family: var(--font-display); }
.ai-track td[rowspan] { vertical-align: top; }

/* Squad league: your own squads are marked apart from the six readings (blue = imported FPL team, violet = saved from the simulator) */
.ai-team.mine { box-shadow: inset 0 0 0 1px rgba(79,141,247,.55), var(--glass-shadow); }
.ai-team.custom { box-shadow: inset 0 0 0 1px rgba(139,92,246,.6), var(--glass-shadow); }
.ai-team.mine .ai-big b { color: #4F8DF7; }
.ai-team.custom .ai-big b { color: var(--violet); }
.ai-kind { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; letter-spacing: .04em; }
.ai-team.mine .ai-kind { background: rgba(79,141,247,.16); color: #4F8DF7; }
.ai-team.custom .ai-kind { background: rgba(139,92,246,.16); color: var(--violet); }
.ai-row { grid-template-columns: 38px 1fr auto 42px; }
.ai-fx { justify-content: flex-end; }
.ai-fx .fdr { min-width: 58px; }
.ai-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.ai-team > .ai-actions > .btn { align-self: auto; }

/* Squad league: open slots keep the card shape, dimmed, with a waiting note */
.ai-team.open-slot { border-style: dashed; opacity: .78; }
.ai-team.open-slot .ai-big b, .ai-team.open-slot .ai-stat b, .ai-team.open-slot .ai-spread b { color: var(--ink-3); }
.ai-team.open-slot:hover { opacity: 1; }
.ai-empty-note { display: flex; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--chip-bg); font-size: 12.5px; color: var(--ink-2); line-height: 1.4; min-height: 84px; }
.dot-wait { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(242,193,78,.25); }
@media (prefers-reduced-motion: no-preference) { .dot-wait { animation: waitPulse 1.8s ease-in-out infinite; } @keyframes waitPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(242,193,78,.25); } 50% { box-shadow: 0 0 0 7px rgba(242,193,78,0); } } }

.ai-team.building { opacity: .7; }
.ai-team.building .ai-big b, .ai-team.building .ai-stat b, .ai-team.building .ai-spread b { color: var(--ink-3); }
.ai-team.building .ai-empty-note { min-height: 0; }

/* My Team > Transfers */
.tr-panel { margin-bottom: 18px; }
.tr-summary { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 10px; }
.tr-summary > div { display: flex; flex-direction: column; }
.tr-summary .k { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .03em; color: var(--ink-3); font-weight: 700; }
.tr-summary .v { font-family: var(--font-display); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.tr-summary .grow { flex: 1; }
.tr-summary .nw input { width: 48px; padding: 3px 4px 3px 8px; font-size: 15px; }
.tr-moves { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tr-move { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; border-radius: 999px; background: rgba(62,207,142,.12); border: 1px solid rgba(62,207,142,.45); font-size: 12.5px; }
.tr-move .arrow { color: var(--good); font-weight: 800; }
.tr-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; }
@media (max-width: 980px) { .tr-grid { grid-template-columns: 1fr; } }
.tr-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tr-group { margin-bottom: 8px; }
.tr-group .eyebrow { margin: 6px 0 2px; }
.tr-row { display: grid; grid-template-columns: 38px 1fr auto 40px 30px; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 8px; font-size: 12.5px; cursor: pointer; border: 1px solid transparent; }
.tr-row:hover { background: var(--row-hover); }
.tr-row.in { background: rgba(62,207,142,.10); border-color: rgba(62,207,142,.4); }
.tr-row.sel { background: rgba(242,193,78,.16); border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.tr-name { display: flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-xp { font-family: var(--font-display); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tr-undo { padding: 1px 6px; font-size: 13px; }
.tr-wrap { max-height: 560px; }
.tr-market table td { padding: 5px 6px; }
/* Transferred-in players on the pitch */
.pcard.in { border-color: #3ECF8E; }
.pcard .sub-lbl.in-lbl { background: #3ECF8E; color: #08110C; }

/* My Team > Transfers, simulator layout */
.tr-block { margin-bottom: 22px; }
.tr-summary .nw input { width: 54px; padding: 2px 4px 2px 8px; font-size: 16px; font-weight: 700; font-family: var(--font-display); }
.tr-summary .nw { padding-right: 6px; }
.tr-price { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); }
.tr-price .nw input { width: 46px; padding: 1px 2px 1px 6px; font-size: 12px; }
.tr-move .nw { padding-right: 4px; }
.pcard.tr-card { cursor: pointer; }
.pcard.tr-sel { outline: 3px solid var(--green); outline-offset: 2px; }
.pcard .sub-lbl.out-lbl { background: var(--green); color: #111113; }
#trPool { font-size: 12.5px; }
#trPool th, #trPool td { padding: 5px 6px; }
#trPool tbody tr.clickable { cursor: pointer; }
#trPool td.xp b { font-family: var(--font-display); font-size: 13.5px; }
.tr-cols .pool-cell { min-height: 620px; }

/* Transfers pitch bar: readable on the dark strip in both themes; drag target and armband buttons on the cards */
/* My Team header guidance and the market's replacing state */
.team-how { margin-top: 8px; max-width: 64ch; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.tr-room { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--green); }
.tr-cols .pitch { margin-top: 4px; }
.pcard.tr-card.drag-over { transform: scale(1.06); outline: 3px solid var(--green); outline-offset: 2px; }
.pcard.tr-card .badge.setcap { z-index: 3; }
.pcard.tr-card:hover .badge.setvc { opacity: 1; }

/* My Team: remove button on cards, open slots, undo */
.pcard.tr-card .flag.rm { opacity: 0; }
.pcard.tr-card:hover .flag.rm { opacity: 1; }
.pcard.tr-card.slot.empty { min-height: 150px; cursor: pointer; }
.pcard.tr-card.slot.empty .tr-putback { margin-top: 6px; border: 0; background: rgba(255,255,255,.18); color: #fff; font: inherit; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; cursor: pointer; }
.pcard.tr-card.slot.empty .tr-putback:hover { background: rgba(255,255,255,.3); }
.pcard.tr-card.slot.empty.tr-sel { outline: 3px solid var(--green); outline-offset: 2px; border-style: solid; }
.tr-summary #trUndo { margin-right: 6px; }

/* Gaffer Score */
.score-tile .value small { font-size: 14px; color: var(--ink-3); margin-left: 2px; font-weight: 600; }
.score-parts { display: grid; gap: 5px; margin: 0 0 14px; }
.score-part { display: grid; grid-template-columns: 92px 1fr 52px; gap: 10px; align-items: center; font-size: 12px; }
.score-part .sp-l { color: var(--ink-2); font-weight: 600; }
.score-part .sp-bar { height: 7px; border-radius: 4px; background: var(--chip-bg); overflow: hidden; }
.score-part .sp-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-2), var(--green)); }
.score-part .sp-n { font-family: var(--font-display); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.score-part .sp-n small { color: var(--ink-3); font-weight: 500; }
.ai-score { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink); }
.ai-score small { font-weight: 600; color: var(--ink-3); font-size: 11px; }
.chips-mini .chip-row p { font-size: 12px; }

/* My Team: Scout's picks for open slots */
.tr-suggest { margin-top: 14px; }
.tr-suggest .slot-pop-row { border: 1px solid var(--glass-border); border-radius: 9px; margin-bottom: 4px; background: var(--glass); }
.tr-suggest .slot-pop-row:hover { background: var(--glass-strong); }
#pitch .pitch-row.has-pop, #pitch .bench.has-pop { position: relative; z-index: 40; }

/* ===== My Team: layout pass =====
   Compact stat strip, then one review band (score, chips, notes) that carries every decision, then the pitch and market,
   then the detail table, structure and history charts. Charts draw in the brand gold with the average in slate. */
.team-tiles { margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.team-tiles .tile { padding: 12px 14px 11px; }
.team-tiles .tile .value { font-size: 24px; margin-top: 2px; }
.team-tiles .tile .sub { font-size: 11.5px; margin-top: 3px; white-space: normal; line-height: 1.35; }
.team-tiles .chips-pills { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.team-tiles .chips-pills .tag { padding: 1px 6px; font-size: 10px; }
.review-band { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.25fr) minmax(280px, 1.25fr); gap: 0; padding: 0; margin-bottom: 18px; overflow: hidden; }
.rb-col { padding: 16px 18px 14px; min-width: 0; }
.rb-col + .rb-col { border-left: 1px solid var(--glass-border); }
.rb-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rb-big { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; margin: 2px 0 12px; font-variant-numeric: tabular-nums; }
.rb-big small { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.grade-chip { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--chip-bg); color: var(--ink-2); }
.grade-chip.g-elite { background: linear-gradient(135deg, var(--gold-3) 0%, var(--green) 55%, #D9A63A 100%); color: #111113; }
.grade-chip.g-strong { background: rgba(62,207,142,.18); color: var(--good); }
.grade-chip.g-solid { background: rgba(79,141,247,.16); color: var(--info); }
.grade-chip.g-patchy { background: rgba(240,120,74,.18); color: var(--warn); }
.grade-chip.g-rebuild { background: rgba(239,74,98,.16); color: var(--bad); }
.rb-score .score-parts { margin: 0; gap: 4px; }
.rb-score .score-part { grid-template-columns: 78px 1fr 44px; font-size: 11.5px; }
.rb-score .score-part .sp-bar { height: 6px; }
/* chips: one compact row each, the verdict carries the colour */
.chips-compact { display: flex; flex-direction: column; gap: 6px; }
.cc-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; padding: 7px 9px; border-radius: 9px; background: var(--glass); border: 1px solid var(--glass-border); }
.cc-row.use { border-color: rgba(62,207,142,.5); background: rgba(62,207,142,.07); }
.cc-verdict { display: inline-grid; place-items: center; height: 22px; border-radius: 999px; font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--chip-bg); color: var(--ink-3); }
.cc-row.use .cc-verdict { background: var(--good); color: #06302A; }
.cc-row.watch .cc-verdict { background: rgba(240,120,74,.18); color: var(--warn); }
.cc-row.used .cc-verdict { opacity: .6; }
.cc-row.used { opacity: .65; }
.cc-body { min-width: 0; }
.cc-top { display: flex; align-items: baseline; gap: 8px; }
.cc-top b { font-family: var(--font-display); font-size: 13px; }
.cc-gw { font-family: var(--font-display); font-size: 11px; font-weight: 800; color: var(--green); }
.cc-body p { margin: 1px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* notes: tight list, colour on a hairline */
.notes-compact { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; padding-right: 4px; scrollbar-gutter: stable; }
.nc-row { display: grid; grid-template-columns: 3px 1fr; gap: 9px; padding: 5px 4px 5px 0; }
.nc-row i { display: block; border-radius: 2px; background: var(--ink-3); }
.nc-row.good i { background: var(--good); } .nc-row.warn i { background: var(--warn); } .nc-row.bad i { background: var(--bad); } .nc-row.info i { background: var(--info); }
.nc-row b { font-family: var(--font-display); font-size: 12.5px; display: block; }
.nc-row p { margin: 1px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) { .review-band { grid-template-columns: 1fr 1fr; } .rb-notes { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--glass-border); } }
@media (max-width: 720px) { .review-band { grid-template-columns: 1fr; } .rb-col + .rb-col { border-left: 0; border-top: 1px solid var(--glass-border); } }
/* charts in brand gold; the comparison series in slate */
.chart .line { stroke: var(--art-fill); stroke-width: 2.2; }
.chart .area { fill: var(--art-fill); opacity: .14; }
.chart .dot { fill: var(--art-fill); }
.chart .bar { fill: var(--art-fill); opacity: .92; }
.chart .bar.avg { fill: var(--ink-3); opacity: .35; }
.chart-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.chart-legend .lg-you { background: var(--art-fill); }
.chart-legend .lg-avg { background: var(--ink-3); opacity: .4; }
.team-charts .panel { padding-bottom: 10px; }
.team-tiles { align-items: stretch; }
.team-tiles .tile { display: flex; flex-direction: column; justify-content: flex-start; }
.team-tiles .chips-pills { margin-top: 5px; }

/* Gaffer Score takes the colour of its grade: number, bars and the stat tile */
:root { --g-elite: #B8860B; --g-strong: #15935F; --g-solid: #2F6BDB; --g-patchy: #C85A2B; --g-rebuild: #D22F47; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-elite: #F2C14E; --g-strong: #3ECF8E; --g-solid: #4F8DF7; --g-patchy: #F0784A; --g-rebuild: #EF4A62; } }
:root[data-theme="dark"] { --g-elite: #F2C14E; --g-strong: #3ECF8E; --g-solid: #4F8DF7; --g-patchy: #F0784A; --g-rebuild: #EF4A62; }
.g-elite { --g: var(--g-elite); } .g-strong { --g: var(--g-strong); } .g-solid { --g: var(--g-solid); } .g-patchy { --g: var(--g-patchy); } .g-rebuild { --g: var(--g-rebuild); }
.score-tile.tile.accent .value { color: var(--g); }
.score-tile { box-shadow: inset 0 3px 0 var(--g), var(--glass-shadow); }
.rb-score .rb-big { color: var(--g); }
.rb-score .score-part .sp-bar i { background: var(--g); opacity: .9; }
.rb-score .score-part .sp-n { color: var(--ink); }
.rb-score { background: linear-gradient(180deg, color-mix(in srgb, var(--g) 10%, transparent) 0%, transparent 70%); }
.grade-chip.g-elite, .grade-chip.g-strong, .grade-chip.g-solid, .grade-chip.g-patchy, .grade-chip.g-rebuild { background: color-mix(in srgb, var(--g) 18%, transparent); color: var(--g); }
.grade-chip.g-elite { background: linear-gradient(135deg, var(--gold-3) 0%, var(--green) 55%, #D9A63A 100%); color: #111113; }

#tTable { max-height: none; }
#tTable table th.sorted { color: var(--green); }


/* ==================== Owned players: one teal edge everywhere (rows, cards, chips, links) ==================== */
:root { --mine: #19E6C1; --mine-bg: rgba(25,230,193,.11); --mine-bg-hover: rgba(25,230,193,.18); }
tr.mine td { box-shadow: none; background: var(--mine-bg); }
tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--mine); }
tr.mine:hover td { background: var(--mine-bg-hover); }
.pcard.mine, .mcard.mine { box-shadow: 0 0 0 2px var(--mine), 0 8px 18px rgba(0,0,0,.25); }
.mcard.mine::before { content: ''; position: absolute; left: -2px; top: -2px; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 0; border-color: var(--mine) transparent transparent transparent; border-top-left-radius: 9px; z-index: 3; pointer-events: none; }
.list-row.mine, .ai-row.mine, .sig-item.mine, .slot-pop-row.mine, .cap-mini.mine { box-shadow: inset 3px 0 0 var(--mine); background: var(--mine-bg); border-radius: 6px; }
.list-row.mine, .ai-row.mine, .sig-item.mine { padding-left: 8px; margin-left: -8px; padding-right: 6px; margin-right: -6px; } /* the highlight grows outwards, so the row content stays aligned with its neighbours */
.lnk.mine, .ch-name.mine b, .mv-who.mine b, .el-chip.mine, td.mine, span.mine[data-player] { box-shadow: inset 0 -2px 0 var(--mine); }
.el-chip.mine { box-shadow: inset 0 0 0 2px var(--mine); }
.sp-taker.mine { box-shadow: 0 0 0 2px var(--mine); }
.sp-name.mine::before, .sp-dot.mine { background: var(--mine); }
.tile.mine { box-shadow: inset 0 0 0 2px var(--mine), var(--glass-shadow); }
.mine-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--mine-bg); box-shadow: inset 3px 0 0 var(--mine); vertical-align: -2px; margin-right: 4px; }

/* ==================== My Team: Scout's moves ==================== */
.moves-panel { margin-bottom: 18px; }
.moves-panel .panel-head { align-items: flex-start; gap: 12px; }
.moves-panel .panel-head p { margin: 4px 0 0; max-width: 70ch; }
.moves-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 12px; margin-top: 14px; }
.move-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); grid-template-areas: "out arrow in" "gain gain gain" "act act act"; gap: 8px 10px; padding: 16px 14px 12px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-border); }
.move-card .mv-rank { position: absolute; top: -10px; left: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 800; font-size: 11px; display: grid; place-items: center; }
.mv-side { min-width: 0; }
.mv-side.out { grid-area: out; }
.mv-side.in { grid-area: in; }
.mv-lbl { display: block; font-family: var(--font-display); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 3px; }
.mv-side.in .mv-lbl { color: var(--good); }
.mv-side.out .mv-lbl { color: var(--bad); }
.mv-who { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 800; font-size: 14px; min-width: 0; }
.mv-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-side small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.mv-side .fxs { margin-top: 6px; }
.mv-arrow { grid-area: arrow; align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--accent-2); }
.mv-gain { grid-area: gain; display: flex; align-items: baseline; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--glass-border); flex-wrap: wrap; }
.mv-gain b { font-family: var(--font-display); font-size: 22px; color: var(--good); font-variant-numeric: tabular-nums; }
.mv-gain small { color: var(--ink-3); font-size: 11.5px; }
.mv-cost { margin-left: auto; font-size: 11.5px; font-weight: 700; }
.mv-act { grid-area: act; display: flex; gap: 6px; }
@media (max-width: 520px) { .move-card { grid-template-columns: 1fr; grid-template-areas: "out" "arrow" "in" "gain" "act"; } .mv-arrow { transform: rotate(90deg); justify-self: center; } }

/* ==================== My Team: the benchmark ==================== */
.bench-panel { margin-bottom: 18px; }
.bench-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 16px; align-items: start; }
.pitch.mini.bench-pitch { min-height: 0; }
.bench-side .kv { grid-template-columns: repeat(2, 1fr); }
.rb-bench { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; }
.gw-tile .sub { white-space: normal; }
@media (max-width: 900px) { .bench-grid { grid-template-columns: 1fr; } }

/* ==================== Captaincy ==================== */
.cap-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; align-items: stretch; }
.cap-hero { padding: 14px 16px 12px; border-top: 3px solid var(--ink-3); display: flex; flex-direction: column; gap: 8px; }
.cap-hero.main { border-top-color: var(--green); }
.cap-hero.safe { border-top-color: var(--cyan); }
.cap-hero.diff { border-top-color: var(--pink); }
.cap-hero.empty { opacity: .8; }
.ch-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-name { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-wrap: wrap; }
.ch-name b { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.1; }
.ch-fx { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ch-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ch-nums > div { background: var(--chip-bg); border-radius: 8px; padding: 6px 4px 5px; text-align: center; }
.ch-nums b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ch-nums small { display: block; font-size: 10px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ch-why { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.cap-heroes .tile { display: flex; flex-direction: column; }
.tc-tile .sub { white-space: normal; line-height: 1.4; }
.rng-wrap { display: inline-flex; align-items: center; gap: 6px; width: 100%; min-width: 120px; }
.rng-wrap small { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; width: 16px; text-align: center; flex-shrink: 0; }
.rng { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--chip-bg); }
.rng-band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, rgba(25,230,193,.6), rgba(242,193,78,.95)); }
.rng-xp { position: absolute; top: -3px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.cap-table td { vertical-align: middle; }
.cap-table .rng-wrap { min-width: 150px; }
.cap-weeks td { vertical-align: top; }
.cap-stack { display: flex; flex-direction: column; gap: 4px; min-width: 250px; }
.cap-mini { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: var(--glass); border: 1px solid var(--glass-border); cursor: pointer; min-width: 210px; }
.cap-mini .rank { width: 16px; font-family: var(--font-display); font-weight: 800; font-size: 11px; color: var(--ink-3); text-align: center; flex-shrink: 0; }
.cap-mini .cm-lbl { font-family: var(--font-display); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; color: var(--ink-3); width: 30px; flex-shrink: 0; }
.cap-mini.safe .cm-lbl { color: #0FA890; }
.cap-mini.diff .cm-lbl { color: var(--pink); }
.cap-mini .cm-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cap-mini .cm-name b { font-family: var(--font-display); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-mini .cm-name small { font-size: 10.5px; color: var(--ink-3); display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.cap-mini .cm-xp { text-align: right; flex-shrink: 0; }
.cap-mini .cm-xp b { display: block; font-family: var(--font-display); font-size: 14px; font-variant-numeric: tabular-nums; }
.cap-mini .cm-xp small { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cap-mini.none { cursor: default; opacity: .75; }
tr.tc-week td { background: rgba(242,193,78,.10); }

/* ==================== Elite ==================== */
.el-top { align-items: start; }
.el-gap { text-align: right; flex-shrink: 0; }
.el-gap b { display: block; font-family: var(--font-display); font-size: 15px; font-variant-numeric: tabular-nums; }
.el-gap small { font-size: 10.5px; color: var(--ink-3); }
tr.el-mgr.open td { background: var(--row-hover); }
.el-squad td { padding: 8px 10px 12px; background: var(--glass); }
.el-squad-rows { display: flex; flex-direction: column; gap: 6px; }
.el-squad-row { display: flex; flex-wrap: wrap; gap: 6px; }
.el-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; background: var(--chip-bg); font-size: 12px; font-weight: 700; cursor: pointer; }
.el-chip.bench { opacity: .6; }
.el-chip b { font-family: var(--font-display); font-size: 10px; background: var(--pink); color: #fff; border-radius: 50%; width: 15px; height: 15px; display: grid; place-items: center; }
.el-chip.vice b { background: var(--violet); }

/* ==================== Prices ==================== */
.prog { display: flex; align-items: center; gap: 6px; }

/* Elite: the template panel sizes to its pitch, not to the side column */
.el-top > .glass.panel, .el-top > .stack { align-self: start; }
.pitch.mini.bench-pitch { height: auto; min-height: 0; flex: none; }

/* Overview: loaded-team panel with the score, movement and Scout's top moves */
.ov-team-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ov-team-tiles .score-tile { border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: inset 0 3px 0 var(--g); }
.ov-team-tiles .score-tile .value { color: var(--g); }
.ov-team-tiles .score-tile .value small { font-size: 14px; color: var(--ink-3); margin-left: 2px; font-weight: 600; }
.ov-team-tiles .tile .sub { white-space: normal; line-height: 1.35; }
.ov-moves { margin-top: 14px; border-top: 1px solid var(--glass-border); padding-top: 10px; }
.ov-moves-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ov-moves-head .linkish { margin-left: auto; font-size: 12px; font-weight: 700; }
.ov-move { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--glass-border); flex-wrap: wrap; }
.ov-move:last-child { border-bottom: 0; }
.ov-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 200px; }
.ov-who b { font-family: var(--font-display); font-size: 13px; white-space: nowrap; }
.ov-who small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.ov-who.in { cursor: pointer; }
.ov-move .arrow { font-family: var(--font-display); font-weight: 800; color: var(--accent-2); }
.ov-gain { display: inline-flex; align-items: baseline; gap: 4px; margin-left: auto; }
.ov-gain b { font-family: var(--font-display); font-size: 17px; color: var(--good); font-variant-numeric: tabular-nums; }
.ov-gain small { font-size: 10.5px; color: var(--ink-3); }

/* ==================== Club page hero ==================== */
.club-hero { position: relative; overflow: hidden; padding: 24px 26px 20px; margin-bottom: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--club) 26%, var(--glass)) 0%, var(--glass) 55%); }
.club-hero::before { content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--club) 45%, transparent) 0%, transparent 65%); pointer-events: none; }
.club-hero::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--club); }
.clh-main { position: relative; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.clh-crest { width: 128px; height: 128px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #fff 0%, #ECE9E1 80%); box-shadow: 0 0 0 5px color-mix(in srgb, var(--club) 65%, transparent), 0 0 0 9px color-mix(in srgb, var(--club) 18%, transparent), 0 16px 36px rgba(0,0,0,.28); }
.clh-crest .crest { width: 100px !important; height: 100px !important; }
.clh-text { min-width: 0; flex: 1 1 260px; }
.clh-kicker { color: var(--accent-2); font-weight: 800; font-size: 12px; letter-spacing: .1em; }
.clh-title { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin: 6px 0 10px; }
.clh-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clh-form .pips { gap: 5px; }
.clh-form .pip { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.clh-flags { display: inline-flex; gap: 4px; }
.clh-actions { margin-left: auto; display: flex; gap: 8px; align-self: flex-start; flex-wrap: wrap; }
.clh-stats { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--glass-border); }
.clh-stat { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 12px 9px; min-width: 0; }
.clh-stat.clickable { cursor: pointer; }
.clh-stat.clickable:hover { background: var(--glass-strong); }
.clh-stat .k { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.clh-stat .v { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.2; margin-top: 3px; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.clh-stat .v small { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.clh-stat .v .fdr { font-size: 12px; min-width: 52px; padding: 5px 7px; }
.clh-stat .s { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.35; }
@media (max-width: 640px) { .clh-crest { width: 92px; height: 92px; } .clh-crest .crest { width: 72px !important; height: 72px !important; } .clh-actions { margin-left: 0; } }

/* Club page: key assets as labelled stat cells instead of a sentence */
.ka-role { margin-top: 3px; }
.ka-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 6px; max-width: 380px; }
.ka-stats > div { background: var(--chip-bg); border-radius: 7px; padding: 4px 3px 3px; text-align: center; line-height: 1.1; min-width: 0; }
.ka-stats b { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ka-stats small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.ka-stats .hi { background: rgba(242,193,78,.24); }
.ka-stats .lo { background: rgba(255,61,138,.16); }
.watch-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ka-why { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); font-size: 11px; font-weight: 600; color: var(--ink-2); }

/* Club page: previous fixtures as H/A badges and name chips */
.ha { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-family: var(--font-display); font-size: 10px; font-weight: 800; background: var(--chip-bg); color: var(--ink-2); margin-left: 4px; vertical-align: 1px; }
.ha.h { background: rgba(25,230,193,.2); color: #0FA890; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 230px; }
.gl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.4; }
.gl-chip small { font-size: 9px; font-weight: 800; color: var(--bad); letter-spacing: .04em; }
.gl-chip.og { opacity: .75; }
.gl-chips.muted .gl-chip { color: var(--ink-3); font-weight: 600; }


/* ===== Brand mark: the Gaffer Lab tile (gold tile, pitch corner and ball cut out) replaces the GL text box.
   The SVG is the whole mark, so the box has no background of its own; the glow behind it and the hover tilt stay. ===== */
.brand-mark, [data-theme="dark"] .brand-mark { background: none; box-shadow: none; padding: 0; color: transparent; font-size: 0; border-radius: 0; }
.brand-mark svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.brand:hover .brand-mark, [data-theme="dark"] .brand:hover .brand-mark { box-shadow: none; }
.brand:hover .brand-mark svg { filter: drop-shadow(0 6px 14px rgba(242,193,78,.35)); }
.brand-mark::after { border-radius: 16px; }

/* Price-move marker beside a price: solid when a change is due at the next update, faint when it is a day or two away */
.pm { display: inline-block; margin-left: 3px; font-size: 9px; font-weight: 800; line-height: 1; vertical-align: 1px; opacity: .6; cursor: help; }
.pm.up { color: var(--good); }
.pm.down { color: var(--bad); }
.pm.now { opacity: 1; font-size: 10px; }
.pcard .pr .pm { margin-left: 2px; font-size: 8px; }

.dr-tiles .value .pm { font-size: 14px; margin-left: 6px; vertical-align: 3px; }

.pool-row.club-full { opacity: .55; }
.pool-row.club-full .pool-meta .tag { opacity: 1; padding: 0 6px; font-size: 9.5px; }

.price-prog { display: block; height: 4px; border-radius: 2px; background: var(--chip-bg); margin-top: 6px; overflow: hidden; }
.price-prog i { display: block; height: 100%; background: var(--good); border-radius: 2px; }
.price-prog i.down { background: var(--bad); }

/* Differentials: the template panel sizes to its own content instead of the long list beside it */
.diff-grid { align-items: start; }
.diff-grid .table-wrap { max-height: 60vh; }

/* ==================== Nav: the two engine pages (Simulator, Signals) stand apart ==================== */
.nav button.nav-spark { position: relative; color: var(--accent-2); font-weight: 800; border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); background: linear-gradient(135deg, rgba(242,193,78,.14), rgba(25,230,193,.12)); padding-left: 22px; }
.nav button.nav-spark::before { content: '✦'; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 10px; line-height: 1; color: var(--accent-2); }
.nav button.nav-spark:hover { background: linear-gradient(135deg, rgba(242,193,78,.26), rgba(25,230,193,.2)); color: var(--ink); }
.nav button.nav-spark.active { background: linear-gradient(135deg, var(--green) 0%, var(--cyan) 100%); color: #08080B; border-color: transparent; box-shadow: 0 4px 14px rgba(242,193,78,.35); }
.nav button.nav-spark.active::before { color: #08080B; }
.sig-teaser .ov-sec-head { padding-bottom: 0; }
#sigKind small { font-weight: 600; opacity: .7; margin-left: 2px; }

/* Thirteen tabs: a touch tighter so the nav stays on one line at laptop widths */
.nav button { padding: 6px 9px; font-size: 12px; }
.nav button.nav-spark { padding-left: 20px; }
.nav button.nav-spark::before { left: 8px; }

/* Signals page: each signal is its own card, rows inside it separated by hairlines */
.signals.boxed { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 4px; }
.signals.boxed .signal { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px 16px 12px; overflow: hidden; }
.signals.boxed .signal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--green), var(--cyan)); }
.signals.boxed .sig-head { padding-bottom: 8px; border-bottom: 1px solid var(--glass-border); }
.signals.boxed .sig-head b { font-size: 15.5px; }
.signals.boxed .sig-items { display: flex; flex-direction: column; }
.signals.boxed .sig-item { padding: 8px 0; border-top: 1px solid var(--glass-border); }
.signals.boxed .sig-item:first-child { border-top: 0; }
.signals.boxed .sig-num { font-size: 21px; }
.signals.boxed .sig-note { font-size: 12.5px; color: var(--ink-2); padding-top: 8px; border-top: 1px dashed var(--glass-border); }
.signals.boxed .signal .linkish { align-self: flex-start; margin-top: auto; font-size: 12px; font-weight: 700; text-decoration: none; }
.signals.boxed .signal { align-items: stretch; }
.signals.boxed .sig-items { align-items: stretch; }
.signals.boxed .sig-head, .signals.boxed .sig-item, .signals.boxed .sig-note { width: 100%; }

/* ==================== Nav: larger, always one row ==================== */
.topbar-inner { flex-wrap: nowrap; }
.nav { flex-wrap: nowrap; gap: 3px; }
.nav button { padding: 8px 11px; font-size: 14px; font-weight: 700; }
.nav button.nav-spark { padding-left: 24px; }
.nav button.nav-spark::before { left: 10px; font-size: 11px; }
@media (max-width: 1560px) {
  .nav button { padding: 7px 9px; font-size: 13.5px; }
  .nav button.nav-spark { padding-left: 21px; }
  .nav button.nav-spark::before { left: 8px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 17px; }
  .team-import input { width: 86px; }
  .topbar-inner { gap: 10px; padding-inline: 14px; }
}
@media (max-width: 1320px) {
  .nav button { padding: 6px 8px; font-size: 12.5px; }
  .nav button.nav-spark { padding-left: 19px; }
}

/* Header: bigger brand on the left, tabs centred in the space between brand and tools */
.brand { gap: 12px; }
.brand-mark { width: 46px; height: 46px; border-radius: 13px; font-size: 19px; }
.brand-name { font-size: 23px; }
.brand-sub { font-size: 12px; margin-top: -2px; }
.nav { justify-content: center; }
@media (max-width: 1560px) { .brand-mark { width: 42px; height: 42px; font-size: 17px; } .brand-name { font-size: 20px; } }

/* Simulator: Gaffer Score chip inside the projected-score box */
.ps-score { display: inline-flex; align-items: baseline; gap: 3px; margin-top: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.ps-score b { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--g); font-variant-numeric: tabular-nums; line-height: 1; }
.ps-score small { font-size: 10px; opacity: .75; }

/* ==================== Simulator: readable toolbar, hover controls on cards ==================== */
/* The toolbar is a glass panel like the rest of the page, so its buttons read in both themes */
.pitch-bar { background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pitch-bar .btn { background: var(--glass); border-color: var(--glass-border); color: var(--ink); }
.pitch-bar .btn:hover { background: var(--chip-bg); }
.pitch-bar .btn[disabled] { opacity: .5; }
.pitch-bar .btn .tag { background: rgba(25,230,193,.18); color: var(--link); }
/* Card controls (remove, captain, vice) appear when the card is hovered or focused, as on My Team; always on touch screens */
.pcard .flag.rm { opacity: 0; }
.pcard:hover .flag.rm, .pcard:focus-within .flag.rm { opacity: 1; }
.pcard:hover .badge.setcap, .pcard:hover .badge.setvc, .pcard:focus-within .badge.setcap, .pcard:focus-within .badge.setvc { opacity: 1; }
.pcard:hover { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
.pcard.tr-card:hover, .pcard.slot.selected:hover { outline-color: var(--green); }
@media (hover: none) { .pcard .flag.rm, .pcard .badge.setcap, .pcard .badge.setvc { opacity: .9; } .pcard:hover { outline: 0; } }

/* ---------- Loading screens: the animated mark. Keyframes and the #splash layout live in the inline <style> in index.html ---------- */
.logo-loader { display: inline-block; width: var(--sz, 56px); line-height: 0; vertical-align: middle; }
.logo-loader svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo-loader.inline { margin-right: 8px; vertical-align: -6px; }
.logo-loader.inline .gl-runner.halo, .logo-loader.inline .gl-shine { display: none; }
.loading-state { display: grid; justify-items: center; gap: 18px; padding: 72px 16px 80px; }
.loading-state p { margin: 0; font-weight: 600; color: var(--ink-3); }
.loading-state .logo-loader svg { filter: drop-shadow(0 14px 30px rgba(242,193,78,.35)); }

/* ==================== My Team > Live ==================== */
.lv-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); margin-right: 6px; vertical-align: 1px; animation: lvPulse 1.6s ease-out infinite; }
.lv-dot.big { width: 12px; height: 12px; margin: 0; flex-shrink: 0; }
@keyframes lvPulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,122,.55); } 100% { box-shadow: 0 0 0 9px rgba(255,77,122,0); } }
@media (prefers-reduced-motion: reduce) { .lv-dot { animation: none; } }
.live-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 14px; border-left: 4px solid var(--ink-3); flex-wrap: wrap; }
.live-banner.st-live { border-left-color: var(--bad); }
.live-banner.st-final { border-left-color: var(--good); }
.live-banner.st-waiting { border-left-color: var(--accent-2); }
.live-banner.st-updating { border-left-color: var(--warn); }
.live-banner .grow { flex: 1 1 260px; min-width: 0; }
.live-banner b { font-family: var(--font-display); font-size: 16px; }
.live-banner p { margin: 3px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; max-width: 90ch; }
.live-grid { align-items: start; }
.pcard.live-card { cursor: pointer; }
.live-card .xp-pill.lv-pts { font-size: 14px; padding: 2px 8px; background: #141419; color: #fff; }
.live-card.st-playing .xp-pill.lv-pts { background: var(--bad); }
.live-card.st-togo .xp-pill.lv-pts, .live-card.st-notyet .xp-pill.lv-pts { background: rgba(20,20,25,.5); }
.live-card.st-playing { border-color: var(--bad); }
.live-card.sub-out { opacity: .55; filter: saturate(.6); }
.live-card.sub-in { border-color: var(--cyan); }
.lv-state { font-size: 9.5px; font-weight: 800; font-family: var(--font-display); letter-spacing: .02em; color: #4A4842; background: rgba(17,17,19,.08); border-radius: 5px; padding: 1px 5px; flex-shrink: 0; white-space: nowrap; }
.lv-state.is-live { background: var(--bad); color: #fff; }
.lv-state.is-out { background: rgba(208,17,63,.14); color: #B00E36; }
td .lv-state { font-size: 11px; color: var(--ink-2); background: var(--chip-bg); padding: 2px 7px; }
td .lv-state.is-live { background: var(--bad); color: #fff; }
td .lv-state.is-out { background: rgba(255,77,122,.16); color: var(--bad); }
.lv-evs { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; padding: 0 3px 4px; min-height: 18px; }
.lv-ev { font-style: normal; font-family: var(--font-display); font-size: 8.5px; font-weight: 800; line-height: 1.5; padding: 0 4px; border-radius: 4px; background: rgba(17,17,19,.08); color: #141419; }
.lv-ev.g { background: #141419; color: var(--green); }
.lv-ev.a { background: var(--cyan); color: #08080B; }
.lv-ev.cs, .lv-ev.ps { background: #257D5A; color: #fff; }
.lv-ev.dc { background: var(--violet); color: #fff; }
.lv-ev.b { background: var(--green); color: #111113; }
.lv-ev.yc { background: #FFD166; color: #3A2A00; }
.lv-ev.rc, .lv-ev.og, .lv-ev.pm { background: var(--bad); color: #fff; }
.lv-fx { padding: 11px 0; border-bottom: 1px solid var(--glass-border); }
.lv-fx:last-child { border-bottom: 0; }
.lv-fx-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.lv-side { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; cursor: pointer; }
.lv-side span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-side.away { justify-content: flex-end; text-align: right; }
.lv-score { font-family: var(--font-display); font-size: 18px; font-weight: 800; text-align: center; min-width: 78px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lv-score small { display: block; font-size: 10px; font-weight: 700; color: var(--ink-3); letter-spacing: .05em; margin-top: 2px; }
.lv-fx.is-live .lv-score small { color: var(--bad); }
.lv-fx-lines { margin-top: 7px; display: grid; gap: 4px; }
.lv-line { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; }
.lv-line > span:first-child { width: 52px; flex-shrink: 0; color: var(--ink-3); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.lv-line .gl-chips { max-width: none; }
.lv-line .gl-chip { cursor: pointer; }
.lv-line .gl-chip b { color: var(--accent-2); }
.lv-mine { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--link); }
tr.lv-bench td { opacity: .6; }
.live-table td.tot b { font-family: var(--font-display); font-size: 14px; }
.live-table th, .live-table td { padding: 6px 6px; }
.live-table td:first-child { padding-left: 8px; }

/* ---- Live, second pass: brand event icons, club-sided fixture events, compact player table, league table, strip ---- */
.lvi { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #141419; color: var(--green); flex-shrink: 0; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.lvi svg { width: 13px; height: 13px; display: block; }
.lvi-boot { color: var(--cyan); }
.lvi-glove, .lvi-shield, .lvi-frameok { color: #2EE6A6; }
.lvi-wall { color: #B79CFF; }
.lvi-star { color: var(--gold); }
.lvi-card, .lvi-yc { color: #FFD166; }
.lvi-rc, .lvi-frameno { color: #FF4D7A; }
.lv-legend { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 10px; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.lv-legend.top { margin: -2px 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--glass-border); }
.lv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lv-legend .lvi { width: 18px; height: 18px; }
.lv-legend .lvi svg { width: 11px; height: 11px; }

/* fixtures: a spine of icons, home events to its left, away events to its right */
.lv-fx-lines { margin-top: 9px; display: grid; gap: 5px; position: relative; }
.lv-fx-lines::before { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: var(--glass-border); }
.lv-evrow { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 8px; align-items: center; position: relative; }
.lv-evside { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; min-width: 0; }
.lv-evside.away { justify-content: flex-end; }
.lv-evrow .gl-chip { cursor: pointer; font-size: 11.5px; padding: 2px 8px; }
.lv-evrow .gl-chip b { color: var(--accent-2); font-weight: 800; }
.lv-evrow .gl-chip b.v { color: var(--violet); }
.lv-evrow .gl-chip b.s { color: var(--good); }
.lv-evrow .gl-chip em { font-style: normal; font-weight: 800; color: var(--accent-2); }
.lv-evrow .gl-chip small.ok { color: var(--good); }
.lv-evrow .gl-chip.is-yc::before, .lv-evrow .gl-chip.is-rc::before, .cardi { content: ''; display: inline-block; width: 7px; height: 10px; border-radius: 1.5px; background: #FFD166; transform: rotate(8deg); flex-shrink: 0; }
.lv-evrow .gl-chip.is-rc::before, .cardi.r { background: #FF4D7A; }
.lv-evrow .gl-chip.is-yc, .lv-evrow .gl-chip.is-rc { font-weight: 600; color: var(--ink-2); }
.cardi { vertical-align: -1px; }

/* player table: one line per player, all fifteen visible, no inner scrolling */
.lv-table-panel .table-wrap, .lv-league .table-wrap { max-height: none; overflow-y: visible; }
.live-table.lv-players th, .live-table.lv-players td { padding: 4px 5px; font-size: 12.5px; line-height: 1.25; }
.live-table.lv-players th { vertical-align: middle; }
.live-table.lv-players th .lvi { width: 20px; height: 20px; }
.live-table.lv-players th .lvi svg { width: 12px; height: 12px; }
.lv-pl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lv-pl b { font-weight: 700; }
.lv-pl .pos, .lv-pl .pos-pill { transform: scale(.86); transform-origin: left center; margin-right: -4px; }
.lv-arm { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--green); color: #111113; font-size: 9px; font-weight: 800; font-family: var(--font-display); }
.lv-arm.v { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.lv-pl .tag { font-size: 9.5px; padding: 0 5px; }
.live-table td.ev-g { color: var(--accent-2); font-weight: 800; }
.live-table td.ev-a { color: var(--link); font-weight: 800; }
.live-table td.ev-cs { color: var(--good); font-weight: 800; }
.live-table td.ev-dc { color: var(--violet); font-weight: 800; }
.live-table td.ev-b { color: var(--accent-2); font-weight: 800; }
.live-table td.tot small { color: var(--ink-3); font-weight: 700; margin-right: 4px; font-size: 10px; }
.live-table td.tot { white-space: nowrap; }
tr.lv-bench-first td { border-top: 2px solid var(--glass-border); }
td .lv-state { font-size: 10.5px; padding: 1px 6px; }

/* live mini-league */
.lv-league .panel-head { flex-wrap: wrap; gap: 8px; }
.lg-table th, .lg-table td { padding: 5px 7px; font-size: 12.5px; }
.lg-team { display: grid; line-height: 1.25; }
.lg-team small { color: var(--ink-3); font-size: 10.5px; }
.lg-cap { cursor: pointer; font-weight: 700; }
.lg-on { color: var(--bad); font-weight: 800; }
tr.lg-me td { background: var(--mine-bg); }
tr.lg-me td:first-child { box-shadow: inset 3px 0 0 var(--mine); }

/* the running total, carried onto the Squad tab */
.live-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; padding: 10px 16px; margin-bottom: 14px; cursor: pointer; border-left: 4px solid var(--green); transition: transform .15s ease; }
.live-strip:hover { transform: translateY(-1px); }
.ls-status { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.ls-status.is-live { color: var(--bad); }
.ls-pts b { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1; }
.ls-pts small { margin-left: 4px; color: var(--ink-3); font-weight: 700; font-size: 11px; }
.ls-cell { display: grid; line-height: 1.2; }
.ls-cell b { font-size: 14px; font-weight: 800; }
.ls-cell small { font-size: 10px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ls-go { margin-left: auto; font-weight: 700; font-size: 12.5px; color: var(--link); }

/* site notice: FPL updating, or the gameweek rolling over */
.sys-note { display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 14px; border-left: 4px solid var(--warn); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.sys-note b { color: var(--ink); }

/* Live: what the numbers are, as labelled cells */
.lv-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.lv-notes > div { padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--chip-bg); }
.lv-notes b { font-family: var(--font-display); font-size: 12.5px; }
.lv-notes p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }

/* ---- Live fixtures: plain names, one labelled row per kind of event ---- */
.lv-fx-lines { gap: 0; margin-top: 10px; border-top: 1px solid var(--glass-border); }
.lv-fx-lines::before { display: none; }
.lv-evrow { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--glass-border); }
.lv-evrow:last-child { border-bottom: 0; }
.lv-evrow:nth-child(odd) { background: linear-gradient(90deg, transparent, var(--chip-bg) 50%, transparent); }
.lv-evmid { display: grid; justify-items: center; gap: 3px; }
.lv-evmid small { font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.lv-evside { display: block; font-size: 12.5px; line-height: 1.55; font-weight: 600; color: var(--ink); text-align: left; }
.lv-evside.away { text-align: right; }
.lv-nm { cursor: pointer; white-space: nowrap; }
.lv-nm:hover { color: var(--link); }
.lv-nm b { margin-left: 4px; font-weight: 800; color: var(--accent-2); }
.lv-nm b.v { color: var(--violet); }
.lv-nm b.s { color: var(--good); }
.lv-nm em { margin-left: 3px; font-style: normal; font-weight: 800; color: var(--accent-2); }
.lv-nm small { margin-left: 4px; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--bad); text-transform: uppercase; }
.lv-nm small.ok { color: var(--good); }
.lv-nm.og { color: var(--ink-2); }
.lv-nm.is-yc, .lv-nm.is-rc { font-weight: 500; color: var(--ink-2); }
.lv-nm.is-yc::before, .lv-nm.is-rc::before { content: ''; display: inline-block; width: 6px; height: 9px; border-radius: 1.5px; background: #FFD166; transform: rotate(8deg); margin-right: 4px; vertical-align: -1px; }
.lv-nm.is-rc::before { background: #FF4D7A; }
.lv-sep { font-style: normal; color: var(--ink-3); }

/* event icons with counts (Live pitch cards, Squad league rows) */
.lve { display: inline-flex; align-items: center; gap: 2px; }
.lve .lvi { width: 16px; height: 16px; }
.lve .lvi svg { width: 10px; height: 10px; }
.lve em { font-style: normal; font-family: var(--font-display); font-size: 9.5px; font-weight: 800; color: inherit; }
.lv-evs { gap: 4px; align-items: center; }
.lv-evs .lve em { color: #141419; }
th[data-lvsort], th[data-aisort] { cursor: pointer; user-select: none; }
th[data-lvsort]:hover, th[data-aisort]:hover { color: var(--ink); }
.live-table th.sorted .lvi { box-shadow: 0 0 0 2px var(--green); }

/* ---- Squad league: round picker, list view, points beside the projection ---- */
.ai-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.ai-bar .seg button small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .7; line-height: 1.1; }
.ai-state { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ai-state.is-live { color: var(--ink); }
/* a played round drops the fixture column: what happened matters more, and the event icons need the room */
.ai-row.has-pts { grid-template-columns: 38px minmax(0, 1fr) 38px 44px; }
.ai-row.has-pts .ai-fx { display: none; }
.ai-row.has-pts .ai-name { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.ai-row.has-pts .ai-evs { flex-wrap: nowrap; margin-left: 4px; }
.ai-row.ai-rowhead { cursor: default; border-top: 0; padding: 0 0 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ai-row.ai-rowhead:hover { background: none; }
.ai-row.ai-rowhead .ai-xp, .ai-row.ai-rowhead .ai-pts { font-family: inherit; font-size: inherit; font-weight: 800; color: var(--ink-3); background: none; }
.ai-row.ai-rowhead .ai-fx { text-align: right; }
.ai-row .ai-xp { color: var(--ink-2); }
.ai-pts { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; color: var(--green); white-space: nowrap; }
.ai-pts small { font-size: 9px; color: var(--ink-3); margin-left: 2px; }
.ai-pts.off { color: var(--ink-3); font-weight: 600; }
.ai-pts.on { color: var(--bad); }
.ai-pts.muted { color: var(--ink-3); }
.ai-evs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 7px; vertical-align: middle; }
.ai-name { min-width: 0; }
.ai-big .ai-proj { display: block; margin-top: 3px; }
.ai-big .ai-proj b { display: inline; font-size: 13px; color: var(--ink); }
.ai-big .ai-proj em { font-style: normal; font-weight: 800; }
.ai-listview { padding-top: 14px; }
.ai-listtable td, .ai-listtable th { padding: 7px 8px; }
.ai-listtable td.tot b { font-family: var(--font-display); font-size: 15px; color: var(--green); }

/* ---- Live: collapsible fixtures, refresh feedback, rank movement ---- */
.lv-fx { padding: 0; }
.lv-fx-top { grid-template-columns: 20px minmax(0, 1fr) auto minmax(0, 1fr) 12px; padding: 10px 4px; border-radius: 8px; }
/* club names are never cut short: tighter columns first, then they wrap */
.lv-fx-top { gap: 6px; }
.lv-fx .lv-side { gap: 6px; font-size: 13.5px; }
.lv-fx .lv-side span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
.lv-fx .lv-score { min-width: 58px; font-size: 17px; }
.lv-fx.can-open > .lv-fx-top { cursor: pointer; }
.lv-fx.can-open > .lv-fx-top:hover { background: var(--row-hover); }
.lv-fx-top:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.lv-fx .lv-side { cursor: inherit; }
.lv-fx-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--mine); color: #08080B; font-family: var(--font-display); font-size: 11px; font-weight: 800; }
.lv-fx-n.none { background: transparent; }
.lv-fx-chev { color: var(--ink-3); font-size: 12px; transition: transform .2s ease; text-align: center; }
.lv-fx.open .lv-fx-chev { transform: rotate(180deg); }
.lv-fx:not(.open) .lv-fx-lines { display: none; }
.lv-fx.open .lv-fx-lines { margin: 0 0 10px; }
.lv-stamp { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-left: 4px; white-space: nowrap; }
.lv-stamp.flash { animation: lvStamp 1.6s ease-out 1; }
@keyframes lvStamp { 0% { color: var(--good); text-shadow: 0 0 12px var(--good); } 100% { color: var(--ink-3); text-shadow: none; } }
#liveRefresh .loader { width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; }
.rk-move { font-size: .55em; font-weight: 800; vertical-align: middle; white-space: nowrap; }
.sub .rk-move { font-size: 1em; }
@media (prefers-reduced-motion: reduce) { .lv-stamp.flash { animation: none; } .lv-fx-chev { transition: none; } }

/* Squad league, coming round: the Pts column waits beside xP */
.ai-row.pts-wait { grid-template-columns: 38px 1fr auto 38px 34px; }
@media (max-width: 640px) { .ai-row.pts-wait { grid-template-columns: 34px minmax(0, 1fr) 40px 30px; } .ai-row.has-pts { grid-template-columns: 34px minmax(0, 1fr) 36px 40px; } }

/* Squad league: the card you jumped to from the list is outlined for a moment */
.ai-team.ai-flash { animation: aiFlash 2.4s ease-out 1; }
@keyframes aiFlash { 0%, 55% { box-shadow: 0 0 0 2px var(--green), 0 0 28px rgba(242,193,78,.45), var(--glass-shadow); } 100% { box-shadow: 0 0 0 2px transparent, var(--glass-shadow); } }
@media (prefers-reduced-motion: reduce) { .ai-team.ai-flash { animation: none; box-shadow: 0 0 0 2px var(--green), var(--glass-shadow); } }

/* Prices: period picker and the squad-only toggles in panel heads */
.pr-period { align-items: center; margin-bottom: 12px; }
.pr-period .eyebrow { margin: 0 4px 0 0; }
.pr-mine { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--ink-2); font-weight: 600; }
.pr-mine input { accent-color: var(--mine); }

/* Price tracker: fixed column widths, so filtering the rows never moves the columns */
.pr-table { table-layout: fixed; width: 100%; min-width: 1060px; }
.pr-slim.pr-tall { max-height: 70vh; overflow-y: auto; }
.pr-table .fdr-row { flex-wrap: nowrap; gap: 3px; }
.pr-table .fdr { min-width: 0; padding-inline: 5px; font-size: 10.5px; }
.pr-table td { overflow: hidden; }
.pr-table td:first-child .player-cell { min-width: 0; }

/* Prices: compact one-line lists (projected movers, rose / fell): no inner scrolling, no sideways scroll */
.pr-slim { max-height: none; overflow-y: visible; }
.pr-slim table { width: 100%; }
.pr-slim th, .pr-slim td { padding: 5px 7px; font-size: 12.5px; white-space: nowrap; }
.pr-slim .prog { gap: 6px; }
.pr-slim .bar-track { width: 44px !important; }
.pr-slim th, .pr-slim td { padding-inline: 5px; }
/* in a narrow panel the percentage carries the message and the bar gives way, so nothing scrolls sideways */
.pr-slim { container-type: inline-size; }
@container (max-width: 610px) { .pr-slim .bar-track { display: none; } }
@container (max-width: 470px) { .pr-slim .prog .tag { display: none; } }
.pr-slim .prog .tag { font-size: 9.5px; padding: 0 5px; }
.pr-pl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pr-pl b { font-weight: 700; }
.pr-pl .tag { font-size: 9.5px; padding: 0 5px; }
th[data-prsort] { cursor: pointer; user-select: none; }
th[data-prsort]:hover { color: var(--ink); }
.pr-more { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; }

/* Top picks: sortable headings */
th[data-pksort] { cursor: pointer; user-select: none; }
th[data-pksort]:hover { color: var(--ink); }
.picks-table th { white-space: nowrap; }

/* =====================================================================================================================
   RESPONSIVE SYSTEM
   1261px and up    desktop, as designed above
   1025 to 1260     compact desktop: brand shrinks to its mark, the tab row scrolls (safely centred, faded edges), the
                    simulator and My Team stack pitch over pool
   1024 and below   touch shell: slim top bar, bottom tab bar with a More sheet (a floating dock on tablets)
   820 and below    single-column page heroes, the feature rail becomes a swipe row, glass drops its blur
   640 and below    phone: compact pitch cards (five across at 360px), one-column grids, full-screen player panel
   Touch rules (pointer: coarse / hover: none) ride alongside: 40px targets, no sticky hover states, 16px inputs.
   ===================================================================================================================== */
:root { --tabbar-h: 0px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --bar-bg: rgba(255,255,255,.86); --bar-line: rgba(17,17,19,.10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bar-bg: rgba(14,14,18,.84); --bar-line: rgba(255,255,255,.12); } }
:root[data-theme="dark"] { --bar-bg: rgba(14,14,18,.84); --bar-line: rgba(255,255,255,.12); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
body { overflow-x: clip; }
.topbar { padding-top: var(--safe-t); }

/* ---------- Fixes that hold at every width ---------- */
/* A centred, scrolling row clips its left end out of reach; "safe" falls back to the start once the tabs overflow */
.nav { justify-content: safe center; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; }
/* A scrolling row also clips vertically: room above and below, so a tab that lifts or glows on hover is not cut off */
.nav { padding-block: 8px; margin-block: -8px; }
.nav.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px); }
.nav.fade-r { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 28px); mask-image: linear-gradient(270deg, transparent 0, #000 28px); }
.nav.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
/* Auto-fit grids never ask for more than the screen has */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.sp-grid, .insight-grid, .signals.boxed { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.signals, .signals.flat, .odds-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.feature-grid, .targets-2 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.ai-grid { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.moves-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.cap-heroes, .ai-misses { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.sim-below .list { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.sim-settings { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 320px)); }
/* Grid and stack children may always shrink below their content (a nowrap control row used to push a whole panel to 945px) */
.grid > *, .stack > *, .bento > *, .hero > * { min-width: 0; }
@media (max-width: 900px) { .grid-main { grid-template-columns: minmax(0, 1fr); } }
/* Fixture target cards answer to the room they are given, not to the screen: two panels side by side on a tablet are as
   narrow as one on a phone. Under 540px the club header runs across the top and the rows keep label, position, name, price, xP. */
.pk-panel { container-type: inline-size; }
.pk-club .pk-who { align-self: stretch; } /* the edge fade belongs to the column, not to the name: a short name is never clipped */
@container (max-width: 540px) {
  .pk-head { display: none; }
  .pk-club { grid-template-columns: minmax(0, 1fr); }
  .pk-club-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id val" "bar bar" "sub sub"; align-items: center; gap: 4px 12px; padding: 10px 12px 9px; border-right: 0; border-bottom: 1px solid var(--glass-border); }
  .pk-club-head .pk-id { grid-area: id; }
  .pk-club-head .pk-val { grid-area: val; margin: 0; font-size: 20px; }
  .pk-club-head .pk-bar { grid-area: bar; }
  .pk-club-head .pk-sub { grid-area: sub; }
  .pk-club .pk-row { grid-template-columns: 30px 34px minmax(0, 1fr) 46px 50px; gap: 6px; padding: 9px 12px; }
  .pk-club .pk-row > .pk-num:nth-child(5), .pk-club .pk-row > .pk-num:nth-child(6), .pk-club .pk-row > .pk-num:nth-child(7) { display: none; }
}
/* A table that runs on past the edge fades out there, so the sideways scroll is seen before it is found (classes set by scrollHints in app.js) */
.table-wrap.sx:not(.sx-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
/* Tab bar and sheet exist at every width; only the touch shell shows them */
.tabbar, .sheet, .sheet-backdrop { display: none; }

/* ---------- 1025 to 1260: compact desktop ---------- */
@media (max-width: 1260px) {
  .brand-name { display: none; }
  .topbar-inner { gap: 12px; }
  /* Pitch over pool. Earlier blocks re-declare these columns after their own media queries, so the stack is restated here, last. */
  .grid-sim, .grid-sim.tr-cols { grid-template-columns: minmax(0, 1fr); }
  .pool-cell, .tr-cols .pool-cell { position: static; min-height: 0; }
  .pool-cell .pool-sticky { position: static; inset: auto; max-height: min(86vh, 900px); }
  .pool-cell .pool-wrap { max-height: none; }
}

/* ---------- 1024 and below: touch shell ---------- */
@media (max-width: 1024px) {
  :root { --tabbar-h: 64px; }
  .nav { display: none; }
  .brand-name { display: inline; font-size: 19px; }
  .brand-mark { width: 38px; height: 38px; }
  .topbar-inner { padding: 8px max(16px, var(--safe-r)) 8px max(16px, var(--safe-l)); justify-content: space-between; gap: 12px; }
  .theme-toggle { width: 40px; height: 40px; }
  main { padding-inline: max(20px, var(--safe-l)) max(20px, var(--safe-r)); padding-block: 28px calc(var(--tabbar-h) + var(--safe-b) + 48px); }

  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 76; left: 0; right: 0; bottom: 0; padding: 6px max(6px, var(--safe-l)) calc(6px + var(--safe-b)) max(6px, var(--safe-r)); background: var(--bar-bg); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border-top: 1px solid var(--bar-line); box-shadow: 0 -10px 30px rgba(8,8,11,.10); }
  .tabbar::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--gold-2) 18%, var(--green) 50%, var(--gold-3) 72%, transparent 100%); opacity: .7; }
  .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 2px; border: 0; background: none; color: var(--ink-3); font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .01em; border-radius: 14px; touch-action: manipulation; }
  .tabbar .tb-ico { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background .2s ease, color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
  .tabbar .tb-ico .ico { width: 21px; height: 21px; }
  .tabbar .tb-lbl { line-height: 1.1; white-space: nowrap; }
  .tabbar button.active { color: var(--ink); }
  .tabbar button.active .tb-ico { background: linear-gradient(135deg, var(--gold-3) 0%, var(--green) 55%, #D9A63A 100%); color: #111113; box-shadow: 0 4px 14px rgba(242,193,78,.35); }
  .tabbar button:active .tb-ico { transform: scale(.92); }
  .tabbar button:focus-visible { outline-offset: -2px; }

  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(8,8,11,.52); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
  .sheet-backdrop.open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
  .sheet { display: block; position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px max(16px, var(--safe-l)) calc(18px + var(--safe-b)) max(16px, var(--safe-r)); background: var(--bg); border: 1px solid var(--glass-border); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -24px 60px rgba(0,0,0,.35); transform: translateY(calc(104% + var(--drag, 0px))); visibility: hidden; transition: transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s .34s; }
  .sheet.open { transform: translateY(var(--drag, 0px)); visibility: visible; transition: transform .34s cubic-bezier(.2,.8,.2,1); }
  .sheet-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--glass-border); margin: 4px auto 10px; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 12px; }
  .sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .sheet-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 104px; padding: 12px 12px 11px; text-align: left; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); touch-action: manipulation; }
  .sheet-grid button .feat-ico { margin-bottom: 6px; }
  .sheet-grid button b { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
  .sheet-grid button small { font-size: 11.5px; line-height: 1.3; color: var(--ink-3); }
  .sheet-grid button.active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: rgba(242,193,78,.10); }
  .sheet-grid button.active .feat-ico { background: var(--green); color: #111113; border-color: transparent; }
  .sheet-grid button.spark b::before { content: '✦ '; color: var(--accent-2); font-size: .8em; }
  .sheet-grid button:active { transform: scale(.98); }
  .sheet-row { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 10px 14px 10px 12px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink); text-align: left; }
  .sheet-row b { font-family: var(--font-display); font-size: 14px; flex: 1; }
  .sheet-val { font-size: 13px; font-weight: 700; color: var(--ink-3); }
  html.sheet-open, html.sheet-open body { overflow: hidden; }

  /* Everything pinned to the bottom edge clears the tab bar */
  .toast { bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); }
  .ov-float { bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); }
  /* Sticky offsets follow the slimmer top bar */
  .pk-head { top: calc(56px + var(--safe-t)); }
  /* Tables always scroll inside their own frame, never the page */
  .table-wrap, .table-wrap.full, .dc-wrap, .tc-wrap, .picks-wrap, .hist-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .table-wrap.full th { top: 0; }
  /* Side-by-side layouts whose columns were re-declared after their own breakpoints */
  #view-captain .grid-main, #view-chips .grid-main { grid-template-columns: minmax(0, 1fr); }
  #view-captain .grid-main > :first-child, #view-chips .grid-main > :first-child { order: 0; }
  #view-captain .grid-main > .panel:first-child > .table-wrap { flex: none; max-height: 70vh; }
  .picks-grid { grid-template-columns: minmax(0, 1fr); }
  .sim-below .gw-explorer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tabs" "text" "pitch" "ideas"; }
  .bench-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Tablets: the tab bar floats as a dock, the sheet as a centred card */
@media (min-width: 641px) and (max-width: 1024px) {
  :root { --tabbar-h: 84px; }
  .tabbar { left: 50%; right: auto; bottom: calc(14px + var(--safe-b)); width: min(560px, calc(100vw - 40px)); transform: translateX(-50%); padding: 7px 8px; border: 1px solid var(--bar-line); border-radius: 26px; box-shadow: 0 18px 44px rgba(8,8,11,.22), inset 0 1px 0 rgba(255,255,255,.18); }
  .tabbar::before { display: none; }
  .tabbar button { font-size: 11px; min-height: 54px; }
  .sheet { left: 50%; right: auto; width: min(600px, calc(100vw - 40px)); bottom: calc(14px + var(--safe-b)); border-bottom: 1px solid var(--glass-border); border-radius: 26px; transform: translate(-50%, calc(110% + var(--drag, 0px))); }
  .sheet.open { transform: translate(-50%, var(--drag, 0px)); }
  .sheet-grab { display: none; }
  .sheet-head { padding-top: 8px; }
}
/* Landscape phones: the bar gives the height back */
@media (max-height: 480px) and (max-width: 1024px) and (orientation: landscape) {
  :root { --tabbar-h: 46px; }
  .tabbar { left: 0; right: 0; bottom: 0; width: auto; transform: none; border-radius: 0; border: 0; border-top: 1px solid var(--bar-line); padding: 3px max(6px, var(--safe-l)) calc(3px + var(--safe-b)) max(6px, var(--safe-r)); }
  .tabbar button { flex-direction: row; gap: 7px; min-height: 40px; font-size: 11.5px; }
  .tabbar .tb-ico { width: 38px; height: 28px; }
  .topbar { position: static; }
}

/* ---------- 820 and below: single-column heroes, swipe rows, lighter surfaces ---------- */
@media (max-width: 820px) {
  /* Blur over a near-flat ground buys nothing and costs frames on a phone GPU; bars and sheets keep theirs */
  .glass, .feat-rail, .pipe, .pitch-bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  body { background-attachment: scroll, scroll; }
  body::before, body::after { filter: blur(56px); animation: none; }
  .view-head { margin-bottom: 18px; padding-top: 0; }
  .view-head > div:first-child:has(> p) > h1 { font-size: 1.85rem; }
  .view-head > div:first-child:has(> p) > p { font-size: 14.5px; -webkit-line-clamp: 5; margin-top: 0; }
  .view-head > div:first-child:has(> p) > p.lead-more { font-size: 13px; line-height: 1.55; color: var(--ink-3); -webkit-line-clamp: 4; margin-top: 2px; }
  .hero-end { margin: 4px 0 22px; }
  .page-note, .mode-note { margin: 0 0 18px; }
  /* Feature rail: one swipeable row of cards instead of a tall stack */
  .feat-rail { padding: 12px 0 12px; margin: 0 0 16px; }
  .feat-rail::before { display: none; }
  .feat-rail-h { padding: 0 16px; margin-bottom: 8px; }
  .feat-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 16px; padding: 2px 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .feat-grid::-webkit-scrollbar { display: none; }
  .feat, .feat + .feat { flex: 0 0 min(76%, 250px); scroll-snap-align: start; min-height: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass); }
  .feat p { -webkit-line-clamp: 3; }
  .feat-ico { width: 30px; height: 30px; }
  /* Tabs and toggles scroll sideways inside their pill rather than pushing the page wide */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; flex-shrink: 1; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: 0 0 auto; }
  .view-tools { gap: 10px; margin-bottom: 18px; }
  .view-tools > * { max-width: 100%; }
  .pitch-tools { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
  .pitch-tools .eyebrow { flex-shrink: 0; }
  .sim-toolbar { justify-content: flex-start; }
  .sim-toolbar > * { min-width: 0; max-width: 100%; }
  /* Overview */
  .ov-sec { margin-top: 34px; }
  .ov-sec-head { margin-inline: 0; padding-top: 24px; padding-bottom: 16px; gap: 14px; }
  .ov-sec-head > div:first-child { flex: 1 1 100%; }
  .ov-sec-head h2 { font-size: 1.7rem; }
  .ov-sec-head p { font-size: 14.5px; }
  .ov-horizon { width: 100%; flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; border-radius: 18px; padding: 10px 12px 10px 16px; }
  .ov-horizon .muted { display: none; }
  .bento > .panel { padding: 18px 16px; }
  .pipe { width: 100%; }
  .hero-main { padding: 20px 18px; }
  .hero-main::after { opacity: .28; }
  .hero-import input { min-width: 0; flex: 1 1 160px; }
  .fsim-text { padding: 22px 18px 6px; }
  .fsim-text h2 { font-size: 1.4rem; }
  .fsim-pitch { margin: 0 12px 12px; }
  .fsim-badge { top: auto; bottom: 10px; right: 10px; padding: 6px 10px; } /* the keeper's row always leaves the bottom corners free; a front three fills the top ones */
  /* Club page */
  .club-hero { padding: 20px 16px 16px; }
  .clh-main { gap: 16px; }
  .clh-actions { margin-left: 0; width: 100%; }
  .clh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-chips { max-width: none; min-width: 150px; }
  /* Menus */
  .dd-menu, .colpick-menu { max-width: calc(100vw - 16px); }
  .cmp-head .colpick-menu, .club-pick .colpick-menu { columns: 1; }
  .tpl-menu { min-width: 0; width: min(300px, calc(100vw - 32px)); }
  .chips-soon-foot .muted { flex-basis: 100%; }
}

/* ---------- 640 and below: phone ---------- */
@media (max-width: 640px) {
  :root { --radius: 16px; }
  body { font-size: 14.5px; }
  main { padding-inline: max(16px, var(--safe-l)) max(16px, var(--safe-r)); padding-top: 20px; }
  .brand-name { font-size: 18px; }
  .brand-mark { width: 34px; height: 34px; }
  .panel { padding: 16px 14px; }
  .panel-head { gap: 6px 12px; margin-bottom: 12px; }
  .panel-head h2 { font-size: 1.08rem; }
  .grid, .stack, .bento { gap: 14px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 12px 14px; }
  .tile .value { font-size: 21px; flex-wrap: wrap; }
  .hero .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero .tile { padding: 14px 14px; }
  .hero .tile .value { font-size: 19px; }
  .hero .tile .sub { font-size: 12px; }
  .hero-main h1 { font-size: 1.35rem; }
  .countdown { gap: 6px; }
  .countdown div { min-width: 48px; }
  .team-tiles, .ov-team-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  th, td { padding: 8px 8px; }
  table { font-size: 13px; }
  .table-wrap { max-height: 72vh; }
  .controls { gap: 8px; }
  .controls input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .controls label { flex-wrap: wrap; }
  .picks-ctl select { max-width: 100%; }
  .status-strip { gap: 6px; }
  .empty { padding: 24px 12px; }
  .view-head > div:first-child:has(> p) > h1 { font-size: 1.7rem; }
  .ov-sec-head h2 { font-size: 1.5rem; }
  .sheet-grid { gap: 8px; }
  .sheet-grid button { min-height: 96px; padding: 10px 10px 9px; }
  .sheet-grid button small { font-size: 11px; }

  /* Pitch: five cards across on a 360px screen. Width comes from the viewport, so rows never wrap and never overflow. */
  .pitch { --pc: min(112px, calc((100vw - 32px - 16px - 20px) / 5)); padding: 18px 8px 8px; border-radius: 14px; }
  .pitch .marks { inset: 6px; }
  .pitch .marks .box { height: 64px; }
  .pitch .marks .six { height: 24px; }
  .pitch .marks .circle { width: 84px; height: 84px; }
  .pitch-row { gap: 5px; margin-bottom: 12px; }
  .bench { padding: 8px 4px 2px; border-radius: 10px; }
  .bench .pitch-row { gap: 5px; row-gap: 12px; }
  .pcard, .pitch-row > .pcard, .bench .pcard, .bench-slot .pcard.slot.empty { width: var(--pc); border-radius: 10px; border-width: 1.5px; }
  .pcard .ph { height: calc(var(--pc) * .62); border-radius: 8px 8px 0 0; }
  .pcard .ph.kit img { padding: 4px 0 1px; }
  .pcard .ph .xp-pill { left: 3px; top: 3px; font-size: 9.5px; padding: 0 4px; border-radius: 5px; }
  .pcard .ph .crest-corner { right: 2px; top: 2px; padding: 1px; }
  .pcard .ph .crest-corner .crest { width: 13px !important; height: 13px !important; }
  .pcard .nm-row { padding: 3px 3px 2px; justify-content: center; }
  .pcard .nm { font-size: 10px; text-align: center; letter-spacing: -.01em; }
  .pcard .pr, .pcard .info-btn, .pcard.slot .info-btn { display: none; } /* price has its own card mode; a tap opens the player */
  .pcard .body { gap: 1px; padding: 0 2px 2px; }
  .pcard .body.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .pcard .body.cols-5 > .cell:nth-child(n+4) { display: none; } /* three weeks fit a phone card; five are on the player panel */
  .pcard .cell { padding: 2px 0 1px; border-radius: 4px; }
  .pcard .cell b { font-size: 9.5px; letter-spacing: -.02em; }
  .pcard .cell small { font-size: 6.5px; }
  .pcard .cell small.badges .crest { width: 9px !important; height: 9px !important; }
  .pcard .cell small.badges i { font-size: 6.5px; }
  .pcard .badge { top: -7px; right: -4px; width: 18px; height: 18px; font-size: 10px; }
  .pcard .badge.setvc { top: 13px; right: -4px; width: 18px; height: 18px; font-size: 9px; }
  .pcard .flag { top: -7px; left: -4px; width: 18px; height: 18px; font-size: 10px; }
  .pcard .sub-lbl { font-size: 7.5px; padding: 1px 5px; top: -7px; }
  .bench-lbl { font-size: 9px; }
  .pcard.slot.empty, .bench-slot .pcard.slot.empty, .pcard.tr-card.slot.empty { min-height: calc(var(--pc) * 1.32); padding-inline: 2px; }
  .pcard.slot.empty .empty-mark { font-size: 18px; }
  .pcard.slot.empty .nm { font-size: 10px; }
  .pcard.slot.empty .ai-pill, .bench .pcard.slot.empty .ai-pill { font-size: 7px; padding: 2px 4px; max-width: 100%; }
  .pcard.slot.empty .ai-ico { display: none; }
  .pcard.tr-card.slot.empty .tr-putback { font-size: 8px; padding: 2px 5px; }
  /* Card controls wait for a tap on the card: three always-on buttons would bury a 64px card */
  .pcard .flag.rm, .pcard .badge.setcap, .pcard .badge.setvc { opacity: 0 !important; pointer-events: none; }
  .pcard.selected .flag.rm, .pcard.selected .badge.setcap, .pcard.selected .badge.setvc, .pcard.tr-sel .flag.rm, .pcard.tr-sel .badge.setcap, .pcard.tr-sel .badge.setvc { opacity: 1 !important; pointer-events: auto; width: 24px; height: 24px; font-size: 12px; }
  .pcard.selected .flag.rm, .pcard.tr-sel .flag.rm { top: -10px; left: -8px; }
  .pcard.selected .badge.setcap, .pcard.tr-sel .badge.setcap { top: -10px; right: -8px; }
  .pcard.selected .badge.setvc, .pcard.tr-sel .badge.setvc { top: 18px; right: -8px; }
  .pitch-row:has(.pcard.selected), .pitch-row:has(.pcard.tr-sel) { z-index: 6; }
  /* Scout's picks open under the row at the pitch's full width: the open slot stops being the anchor, its row takes over */
  .pcard.slot.empty.open { position: static; }
  .slot-pop { position: absolute; top: calc(100% + 8px); bottom: auto; left: 0; right: 0; width: auto; max-width: none; transform: none; max-height: 62vh; overflow-y: auto; }
  .slot-pop { background: var(--bg); }
  .slot-pop::before { display: none; }
  .slot-pop-row { padding: 9px 6px; }
  .pitch-score { margin: 0 auto 12px; padding: 8px 14px; }
  .ps-main b { font-size: 26px; }
  .pitch-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  .pitch-bar .dd-like { display: block; min-width: 0; }
  .pitch-bar .btn { width: 100%; justify-content: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pitch-bar .colpick-menu { min-width: 0; width: min(300px, calc(100vw - 32px)); }
  #cardN { display: none; }
  .pitch-tools { width: 100%; }
  .sim-summary { width: 100%; padding: 12px 14px; gap: 10px 18px; }
  .sim-summary > .sim-deck { width: 100%; }
  .sim-sep { display: none; }
  /* Mini pitches (week explorer, benchmark, elite template) */
  .pitch.mini { padding: 12px 6px 6px; min-height: 0; }
  .pitch.mini .pitch-row { gap: 4px; margin-bottom: 8px; }
  .pitch.mini .mcard, .mcard { width: min(96px, calc((100vw - 32px - 28px - 12px - 16px) / 5)); padding: 4px 2px 14px; border-width: 1.5px; }
  .mcard .mnm { font-size: 9.5px; }
  .mcard b { font-size: 10.5px; }
  .mcard .crest { width: 18px !important; height: 18px !important; }
  .mrole { font-size: 7px; letter-spacing: .04em; }
  .gw-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .gw-tabs::-webkit-scrollbar { display: none; }
  .gw-tab { flex: 0 0 auto; }
  /* Player pool: name, price, xP, haul chance and ease; the season tallies are a tap away on the player panel */
  #poolTable th:nth-child(4), #poolTable td:nth-child(4), #poolTable th:nth-child(5), #poolTable td:nth-child(5), #poolTable th:nth-child(6), #poolTable td:nth-child(6), #poolTable th:nth-child(8), #poolTable td:nth-child(8) { display: none; }
  #poolTable th:not(:first-child), #poolTable td:not(:first-child) { width: 40px; }
  #poolTable th:last-child, #poolTable td:last-child { width: 50px; padding-right: 4px; }
  #poolTable thead th:first-child { padding-left: 6px; }
  .pool-name { gap: 6px; }
  .pool-name b, .pool-name span, .pool-meta { max-width: 100%; }
  .pool-id { min-width: 0; flex: 1; }
  /* The five-week strip runs on under the numbers (they sit on the row's first line), so it is never cut short */
  #poolTable td:first-child, .pool-name, .pool-id, .pool-fx { overflow: visible; }
  .pool-fx { width: max-content; position: relative; z-index: 1; }
  .pool-name .pool-fx, .pool-name .fxs { overflow: visible; max-width: none; }
  .pool-cell .pool-wrap, .pool-wrap { padding-right: 2px; overflow-x: hidden; }
  .pool-cell .pool-sticky { max-height: 82vh; }
  /* Overview featured simulator */
  .fsim-tok { width: 62px; }
  .fsim-tok .crest { width: 26px !important; height: 26px !important; }
  .fsim-tok span { font-size: 9px; padding: 1px 5px; max-width: 62px; }
  .fsim-tok em { font-size: 9px; }
  .fsim-stats { gap: 8px; }
  .fsim-stat { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .fsim-cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero-import .btn { flex: 1 1 auto; justify-content: center; }
  /* Lists and rows */
  .ticker-row { gap: 8px; }
  .odds-row .val { min-width: 52px; font-size: 15px; }
  .sig-num { font-size: 18px; }
  .ai-row { grid-template-columns: 34px minmax(0, 1fr) 40px; }
  .ai-row .ai-fx { display: none; }
  .ai-spread { grid-template-columns: repeat(2, auto); }
  .ai-head { flex-wrap: wrap; }
  .ch-name b { font-size: 18px; }
  .score-part, .rb-score .score-part { grid-template-columns: 74px 1fr 44px; }
  .ov-who { flex: 1 1 140px; }
  .tr-summary { gap: 8px 16px; }
  .tr-summary .grow { display: none; }
  .tr-cols .pool-cell { min-height: 0; }
  /* Club page hero */
  .clh-title { font-size: 1.9rem; }
  .clh-form .pip { width: 26px; height: 26px; font-size: 12px; }
  .ka-stats { max-width: none; }
  /* Chips page */
  #view-chips .chips-soon { min-height: 0; padding: 26px 18px; gap: 24px; }
  #view-chips .chips-soon h1 { font-size: clamp(2.6rem, 14vw, 3.4rem); }
  /* Player panel: a full-screen sheet with the close button always in reach */
  .drawer { width: 100vw; border-left: 0; padding: calc(18px + var(--safe-t)) max(16px, var(--safe-r)) calc(28px + var(--safe-b)) max(16px, var(--safe-l)); }
  .drawer.open .close { position: fixed; top: calc(10px + var(--safe-t)); right: 12px; z-index: 5; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; background: var(--bg); box-shadow: 0 6px 18px rgba(0,0,0,.25); font-size: 0; }
  .drawer.open .close::before { content: '✕'; font-size: 15px; }
  .dr-head { padding-right: 48px; gap: 12px; }
  .dr-tiles { gap: 10px; }
  .dr-key .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dr-key .kv > div { padding: 7px 8px; }
  .dr-key .kv .v { font-size: 15px; }
  .hist-table th, .hist-table td { padding: 6px 5px; }
  .tipbox { max-width: min(320px, calc(100vw - 16px)); }
}
@media (max-width: 380px) {
  .tabbar .tb-ico { width: 48px; }
  .tabbar button { font-size: 10px; }
  .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-grid button { min-height: 0; }
}

/* ---------- Touch: targets a thumb can hit, no hover states left stuck after a tap ---------- */
@media (pointer: coarse) {
  .btn { min-height: 40px; padding-inline: 16px; }
  .btn.sm { min-height: 36px; padding: 6px 13px; font-size: 12.5px; }
  .theme-toggle { min-height: 0; padding: 0; }
  .seg button, .view-tools .seg button { min-height: 36px; }
  .seg.sm button { min-height: 32px; padding-inline: 12px; }
  .dd-btn { min-height: 40px; padding-inline: 14px; }
  .sim-ctl .dd-btn, .slot-pop-range .dd-btn, .slot-pop-search .dd-btn { min-height: 36px; }
  .dd-menu button, .menu-item, .colpick-menu label { padding-block: 10px; font-size: 14px; }
  .controls select, .controls input[type="text"], .controls input[type="number"], .controls input[type="search"], .squad-tools input[type="search"], .slot-pop-search input { min-height: 40px; padding-inline: 14px; }
  .controls label { min-height: 36px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
  .cmp { width: 34px; height: 34px; }
  .gw-tab { min-height: 56px; }
  .nw { padding-right: 2px; }
  .nw-btns { flex-direction: row-reverse; }
  .nw-btn { width: 32px; height: 36px; font-size: 12px; padding: 0; }
  .menu-x, .menu-close, .cmp-chip button { min-width: 36px; min-height: 36px; }
  .linkish { padding-block: 8px; }
  .sp-taker, .el-chip, .hard-chip { min-height: 32px; }
  /* Small round buttons keep their look and grow an invisible 40px hit area */
  .info-btn, .pool-name .add { position: relative; }
  .info-btn::after, .pool-name .add::after { content: ''; position: absolute; inset: -11px; }
  /* iOS zooms the page when a focused field is under 16px */
  input, select, textarea, .tpl-edit, .dd-search { font-size: 16px !important; }
}
@media (hover: none) {
  .btn:hover, .nav button:not(.active):hover, .tile.clickable:hover, .bento > .panel:hover, .pcard:hover, .feature:hover, .fdr[data-team]:hover, .ticker .fdr.clickable:hover, .brand:hover .brand-mark { transform: none; }
  .bento > .panel:hover, .tile.clickable:hover { box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.10); border-color: var(--glass-border); }
  .list-row.clickable:hover { margin: 0; padding-left: 0; padding-right: 0; background: transparent; }
  .list-row.clickable.mine:hover { padding-left: 8px; margin-left: -8px; padding-right: 6px; margin-right: -6px; background: var(--mine-bg); }
  .list-row.clickable:active, .ticker-row:active, tr.clickable:active, .sig-item.player:active, .sig-item.team:active, .ai-row:active, .pool-row:active td { background: var(--row-hover); }
  .pool-row { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-backdrop, .tabbar .tb-ico { transition: none; } .nav { scroll-behavior: auto; } }

/* ---------- Site footer (static in index.html): what the numbers rest on, the same under every page ---------- */
.site-foot { margin-top: 72px; padding-top: 28px; border-top: 2px solid var(--art-fill); color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.sf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr); gap: 28px 48px; }
.sf-brand { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; }
.sf-about p { margin: 0 0 10px; max-width: 42ch; }
.sf-h { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.sf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf-list li { padding-left: 14px; position: relative; }
.sf-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--art-fill); }
.sf-list b { display: block; color: var(--ink); font-weight: 700; }
.sf-link { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--art-fill); padding-bottom: 1px; }
.sf-link::after { content: ' \2192'; }
.sf-link:hover { color: var(--art-fill); }
.sf-legal { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--glass-border); font-size: 11.5px; line-height: 1.6; color: var(--ink-3); max-width: 110ch; }
.site-noscript { padding: 24px; border: 1px solid var(--glass-border); border-radius: 16px; }
@media (max-width: 900px) { .site-foot { margin-top: 48px; } .sf-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .sf-about p { max-width: none; } }

/* ---------- Overview proof strip: what the projections rest on, in four figures ---------- */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 18px; border: 1px solid var(--glass-border); border-top: 2px solid var(--art-fill); border-radius: 18px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); overflow: hidden; }
.proof-item { padding: 16px 20px; border-left: 1px solid var(--glass-border); min-width: 0; }
.proof-item:first-child { border-left: 0; }
.proof-item b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.proof-item span { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.proof-item p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.proof-foot { margin: 10px 2px 0; font-size: 12.5px; color: var(--ink-3); }
.proof-foot a, .trust-link { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--art-fill); }
@media (max-width: 1100px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof-item:nth-child(3) { border-left: 0; } .proof-item:nth-child(n+3) { border-top: 1px solid var(--glass-border); } }
@media (max-width: 560px) { .proof { grid-template-columns: minmax(0, 1fr); } .proof-item { border-left: 0; } .proof-item:nth-child(n+2) { border-top: 1px solid var(--glass-border); } .proof-item b { font-size: 20px; } }

/* ---------- Help: the glossary fills its panel (the panel is as tall as the long column beside it) and filters in place ---------- */
#view-help .grid-main { align-items: stretch; }
.gloss-panel { display: flex; flex-direction: column; min-height: 0; scroll-margin-top: 96px; }
.gloss-tools { margin-bottom: 10px; }
.gloss-tools input[type="search"] { flex: 1 1 100%; }
.gloss-wrap { flex: 1 1 0; min-height: 320px; max-height: none; }
.gloss-table td { vertical-align: top; }
.gloss-table td:first-child { white-space: nowrap; padding-right: 14px; }
.gloss-table td:last-child { white-space: normal; line-height: 1.5; color: var(--ink-2); }
.gloss-table tr[hidden] { display: none; }
@media (max-width: 900px) { .gloss-wrap { flex: none; min-height: 0; max-height: none; overflow-y: visible; } .gloss-table td:first-child { white-space: normal; } }

/* ---------- Site search: header button and the search box over the page ---------- */
.search-btn { gap: 8px; padding: 8px 10px 8px 12px; color: var(--ink-2); flex-shrink: 0; }
.search-btn:hover { color: var(--ink); }
.search-btn-lbl { font-size: 13px; font-weight: 600; }
.search-kbd, .cmd kbd { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--glass-border); background: var(--chip-bg); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 1560px) { .search-btn-lbl { display: none; } .search-btn { padding: 8px 10px; } }
@media (max-width: 1400px) { .search-kbd { display: none; } .search-btn { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; } }
@media (max-width: 1024px) { .topbar-inner > .search-btn { margin-left: auto; width: 40px; height: 40px; } }
.cmd-backdrop { position: fixed; inset: 0; z-index: 108; background: rgba(8,8,11,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s .18s; }
.cmd-backdrop.open { opacity: 1; visibility: visible; transition: opacity .18s ease; }
.cmd { position: fixed; z-index: 110; left: 50%; top: min(14vh, 120px); width: min(640px, calc(100vw - 32px)); max-height: min(72vh, 640px); display: flex; flex-direction: column; overflow: hidden; background: var(--bg); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 2px 0 var(--green); opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.985); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s .22s; }
.cmd.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); }
.cmd-bar { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--glass-border); color: var(--ink-3); flex-shrink: 0; }
.cmd-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 17px; font-weight: 600; }
.cmd-bar input::placeholder { color: var(--ink-3); font-weight: 500; }
.cmd-bar input::-webkit-search-cancel-button { display: none; }
.cmd-bar input:focus-visible { outline: 0; }
.cmd-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.cmd-h { padding: 10px 10px 4px; font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.cmd-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.cmd-row.on { background: var(--chip-bg); box-shadow: inset 3px 0 0 var(--green); }
.cmd-row .crest { flex-shrink: 0; }
.cmd-row .feat-ico { width: 28px; height: 28px; }
.cmd-row .feat-ico .ico { width: 15px; height: 15px; }
.cmd-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmd-t b { font-family: var(--font-display); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-t small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-v { flex-shrink: 0; font-family: var(--font-display); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmd-v small { margin-left: 3px; font-size: 10px; font-weight: 700; color: var(--ink-3); }
.cmd-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 9px 16px; border-top: 1px solid var(--glass-border); font-size: 11.5px; color: var(--ink-3); flex-shrink: 0; }
.cmd-foot kbd + kbd { margin-left: 3px; }
@media (max-width: 640px) { .cmd { top: calc(8px + env(safe-area-inset-top, 0px)); width: calc(100vw - 16px); max-height: min(70vh, 70dvh); border-radius: 18px; } .cmd-row { padding: 10px; } }
@media (hover: none) { .cmd-foot { display: none; } }
@media (prefers-reduced-motion: reduce) { .cmd, .cmd-backdrop { transition: none; } }
.sf-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* ---------- Link tiles to the public pages (Help header): guide.html and how-it-works.html ---------- */
.doc-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 28px; }
.doc-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; color: var(--ink); border-top: 2px solid var(--art-fill); transition: transform .15s ease, border-color .15s ease; }
.doc-link:hover { transform: translateY(-2px); }
.doc-link:focus-visible { outline: 2px solid var(--art-fill); outline-offset: 3px; }
.doc-ico { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--chip-bg); color: var(--art-fill); }
.doc-ico .ico { width: 22px; height: 22px; }
.doc-txt { display: block; min-width: 0; flex: 1; }
.doc-txt b { display: block; font-family: var(--font-display); font-size: 16px; letter-spacing: -.01em; }
.doc-txt span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.doc-go { flex-shrink: 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--art-fill); }
@media (max-width: 720px) { .doc-links { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 20px; } }
@media (hover: none) { .doc-link:hover { transform: none; } }

/* ---------- Live fixtures: an open match is a match sheet, not more fixture rows ----------
   Closed fixtures stay flat rows (crest, bold club name, big score). An open one lifts into a bordered card with a gold
   edge on its header, and what happened sits in a recessed sheet underneath: smaller, lighter type, a label column with a
   ground of its own and dotted rules, so the eye never reads an event line as another fixture. */
:root { --sheet-bg: rgba(17,17,19,.04); --sheet-mid: rgba(17,17,19,.05); --sheet-rule: rgba(17,17,19,.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sheet-bg: rgba(0,0,0,.30); --sheet-mid: rgba(255,255,255,.05); --sheet-rule: rgba(255,255,255,.14); } }
:root[data-theme="dark"] { --sheet-bg: rgba(0,0,0,.30); --sheet-mid: rgba(255,255,255,.05); --sheet-rule: rgba(255,255,255,.14); }
.lv-fx.open { margin: 8px 0 12px; border: 1px solid var(--glass-border); border-radius: 14px; overflow: hidden; background: var(--glass); box-shadow: var(--glass-shadow); }
.lv-fx.open:last-child { border-bottom: 1px solid var(--glass-border); }
.lv-fx:has(+ .lv-fx.open) { border-bottom-color: transparent; }
.lv-fx.open > .lv-fx-top { border-radius: 0; padding: 12px 10px 12px 8px; background: var(--glass-strong); box-shadow: inset 3px 0 0 var(--art-fill); }
.lv-fx.open.can-open > .lv-fx-top:hover { background: var(--glass-strong); }
.lv-fx.open .lv-fx-lines { margin: 0; padding: 2px 0 4px; gap: 0; border-top: 1px solid var(--glass-border); background: var(--sheet-bg); }
.lv-fx.open .lv-evrow { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0; padding: 0; align-items: stretch; border-bottom: 1px dotted var(--sheet-rule); background: none; }
.lv-fx.open .lv-evrow:last-child { border-bottom: 0; }
.lv-fx.open .lv-evmid { align-content: center; padding: 6px 0; background: var(--sheet-mid); }
.lv-fx.open .lv-evmid .lvi { width: 18px; height: 18px; }
.lv-fx.open .lv-evmid .lvi svg { width: 11px; height: 11px; }
.lv-fx.open .lv-evmid small { font-size: 8px; }
.lv-fx.open .lv-evside { align-self: center; padding: 6px 12px; font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--ink-2); }
.lv-fx.open .lv-evside b, .lv-fx.open .lv-evside em { font-weight: 700; }

/* ---------- Overview: who it is for (three ways in, shown until a team is loaded) ---------- */
.aud { display: grid; grid-template-columns: minmax(200px, .9fr) repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; align-items: stretch; }
.aud-head { align-self: center; padding-right: 10px; }
.aud-head .eyebrow { color: var(--label); }
.aud-head p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.aud-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.aud-top { display: flex; align-items: center; gap: 9px; }
.aud-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--chip-bg); color: var(--art-fill); }
.aud-ico .ico { width: 17px; height: 17px; }
.aud-card > b { font-family: var(--font-display); font-size: 17px; letter-spacing: -.015em; line-height: 1.25; }
.aud-card > p { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.aud-go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
@media (max-width: 1100px) { .aud { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aud-head { grid-column: 1 / -1; padding-right: 0; } }
@media (max-width: 760px) { .aud { grid-template-columns: minmax(0, 1fr); } }