/* Stand-ins for Big Shoulders Display while it loads, scaled to the same width so headings don't jump in size.
   Each family is skipped if its local font isn't installed. */
@font-face{font-family:"BSD narrow";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Arial Narrow");font-weight:100 900;size-adjust:82%}
@font-face{font-family:"BSD impact";src:local("Impact");font-weight:100 900;size-adjust:91%}
@font-face{font-family:"BSD sans";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Arial"),local("Roboto");font-weight:100 900;size-adjust:66%}
/* Layout: "Matchday pitch". The header is the stand under floodlights with an LED scoreboard, then two rows of
   perimeter hoardings: a scrolling LED board fed from the data, and the view tabs as boards. Below the chalk
   touchline the page is mown grass; tables and cards sit on it like team sheets. */
:root{
  --red:#d7192a; --amber:#ffc23d; --chalk:#f4f7f2; --stand:#0c1310; --board:#0a0d0b;
  --grass1:#2a7433; --grass2:#2f7f39; --on-grass:#ffffff; --on-grass-2:#e4f0e2;
  --surface:#ffffff; --line:#dfe6de; --ink:#10261a; --muted:#536457;
  --accent:#b8121f; --accent-soft:#fde9ea; --thead:#0c1310; --thead-ink:#ffffff; --row-alt:#f4f8f3;
  --pitch:#127a3e; --fill:#2a7433; --on-wl:#fff;
  --w:#127a3e; --d:#c99a12; --l:#d1242c;
  --f1:#127a3e; --f2:#63b57f; --f3:#e1e7e0; --f4:#ef8f80; --f5:#c4232b;
  --f1t:#fff; --f2t:#082a16; --f3t:#26332a; --f4t:#3d0c08; --f5t:#fff;
  --shadow:0 0 0 2px rgba(244,247,242,.9),0 10px 22px rgba(0,0,0,.28);
  --num:"Big Shoulders Display","BSD narrow","BSD impact","BSD sans",sans-serif;
  --body:"Barlow","Segoe UI",system-ui,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --grass1:#143b1f; --grass2:#18452a; --on-grass-2:#cfe3d3;
  --surface:#0f1b14; --line:#25382c; --ink:#e9f3eb; --muted:#9db3a3;
  --accent:#ff5a63; --accent-soft:#3a1a1f; --thead:#060a08; --row-alt:#122019;
  --pitch:#3fbf72; --fill:#5fae74; --on-wl:#0c1310;
  --w:#3fbf72; --d:#f0c03a; --l:#ff5a5f;
  --f1:#1f9a52; --f2:#256b43; --f3:#24352b; --f4:#7d3833; --f5:#d6343b;
  --f1t:#fff; --f2t:#def5e6; --f3t:#c8d6cc; --f4t:#ffe2dc; --f5t:#fff;
  --shadow:0 0 0 2px rgba(244,247,242,.55),0 10px 26px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --grass1:#143b1f; --grass2:#18452a; --on-grass-2:#cfe3d3;
  --surface:#0f1b14; --line:#25382c; --ink:#e9f3eb; --muted:#9db3a3;
  --accent:#ff5a63; --accent-soft:#3a1a1f; --thead:#060a08; --row-alt:#122019;
  --pitch:#3fbf72; --fill:#5fae74; --on-wl:#0c1310;
  --w:#3fbf72; --d:#f0c03a; --l:#ff5a5f;
  --f1:#1f9a52; --f2:#256b43; --f3:#24352b; --f4:#7d3833; --f5:#d6343b;
  --f1t:#fff; --f2t:#def5e6; --f3t:#c8d6cc; --f4t:#ffe2dc; --f5t:#fff;
  --shadow:0 0 0 2px rgba(244,247,242,.55),0 10px 26px rgba(0,0,0,.5); color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--grass1);background-image:repeating-linear-gradient(180deg,var(--grass1) 0 90px,var(--grass2) 90px 180px);color:var(--on-grass);font-family:var(--body);font-size:15px;line-height:1.45}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--accent)}

/* Stand: floodlit terrace with seat rows */
.stand{color:#fff;padding-top:env(safe-area-inset-top,0px);background:
  radial-gradient(ellipse 40% 140% at 6% -40%,rgba(255,250,225,.24),transparent 70%),
  radial-gradient(ellipse 40% 140% at 94% -40%,rgba(255,250,225,.24),transparent 70%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 3px,transparent 3px 11px),
  var(--stand)}
.yoke{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center;padding-block:16px}
.brand{min-width:0}
.eyebrow{font:600 13px var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-top:5px}
.tl-short{display:none}
.brand-name{display:block;font-family:var(--num);font-weight:900;font-size:clamp(28px,5vw,44px);line-height:.9;margin:0;text-transform:uppercase;letter-spacing:.01em;color:#fff;text-decoration:none}
.brand-name em{font-style:normal;color:var(--amber)}
/* Right of the header: the gameweek scoreboard with the deadline and time left beneath it */
.gwbox{display:flex;flex-direction:column;align-items:center;gap:6px}
.countdown{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:20px;font:600 13px var(--cond);letter-spacing:.04em;color:#e4ebe6;text-align:center;white-space:nowrap}
.countdown b{color:var(--amber);font-weight:700}
.countdown .live{padding:1px 7px;border-radius:3px;background:#1f9a52;color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.countdown .left{padding:1px 7px;border-radius:3px;background:var(--red);color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.meta{color:#b9c6bd;font:500 13px var(--cond);letter-spacing:.04em;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.dot{width:8px;height:8px;border-radius:50%;background:#3fbf72;display:inline-block;box-shadow:0 0 0 3px rgba(63,191,114,.25)}
.dot.stale{background:var(--amber);box-shadow:0 0 0 3px rgba(255,194,61,.25)}
/* LED pixel grid: laid over the big scoreboard digits, but kept behind smaller text so it stays readable */
.scoreboard b{position:relative;display:block}
.scoreboard b::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 0 1px,rgba(0,0,0,.45) 1.6px) 0 0/4px 4px}
nav.boards a{background-image:radial-gradient(circle,rgba(255,255,255,.07) 0 1px,transparent 1.5px);background-size:4px 4px}
.scoreboard{display:flex;flex-direction:column;align-items:center;line-height:1;background:var(--board);border:3px solid #2a322d;border-radius:4px;padding:6px 16px 4px;box-shadow:0 0 0 1px #000,0 6px 16px rgba(0,0,0,.5)}
.scoreboard small{font:700 12px var(--cond);letter-spacing:.14em;color:#e4ebe6;text-transform:uppercase;margin-bottom:2px}
.scoreboard b{font-family:var(--num);font-weight:900;font-size:clamp(40px,7vw,64px);color:var(--amber);text-shadow:0 0 12px rgba(255,194,61,.55);letter-spacing:.04em}

/* Hoarding 1: the LED "teleprompter". Amber dot-matrix text scrolling slowly, each item led by an outlined tag:
   PL (white), FPL (red) or the gameweek (white), so it reads as both a Premier League and an FPL board. */
.led{overflow:hidden;height:38px;background:#070a08;border-top:2px solid #262d29;border-bottom:1px solid #000}
.led .run{display:flex;width:max-content;height:100%}
.led .seq{display:flex}
.led .seq>*{display:flex;align-items:center;gap:10px;height:100%;padding:0 22px;font:400 23px/1 "VT323","Consolas","Lucida Console","Courier New",monospace;letter-spacing:.03em;white-space:nowrap;text-decoration:none;color:var(--amber);text-shadow:0 0 6px rgba(255,194,61,.55)}
.led .seq>*{background-image:radial-gradient(circle,transparent 0 1px,rgba(0,0,0,.35) 1.5px);background-size:3px 3px}
.led a:hover,.led a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.led a:focus-visible{outline:2px solid var(--amber);outline-offset:-4px}
.led .t{font:700 11px/1 var(--cond);letter-spacing:.08em;padding:3px 5px 2px;border:1.5px solid #e9efeb;border-radius:2px;color:#e9efeb;text-shadow:none;font-style:normal}
.led .t.fpl{border-color:#ff4b57;color:#ff6b74}
@media (prefers-reduced-motion:no-preference){.led .run{animation:led 90s linear infinite}.led:hover .run,.led:has(:focus-visible) .run{animation-play-state:paused}}
@keyframes led{to{transform:translateX(-50%)}}

/* Hoarding 2: view tabs as boards, with the touchline beneath */
nav.boards{position:sticky;top:0;z-index:5;background:#1b211e;border-bottom:4px solid var(--chalk);box-shadow:0 8px 14px rgba(0,0,0,.3)}
nav.boards .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:5px}
nav.boards a{flex:1 0 auto;text-align:center;font:700 16px var(--cond);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#d3dcd6;background-color:var(--board);padding:9px 16px;border-radius:2px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.6)}
nav.boards a:hover{color:#fff}
nav.boards a[aria-current="page"]{color:var(--amber);background-color:#1a2420;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -3px 0 var(--amber)}
nav a:focus-visible,button:focus-visible,select:focus-visible,th[data-k]:focus-visible,a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* Pitch: centre circle chalked just below the touchline */
main{padding-block:28px 56px;background:radial-gradient(circle at 50% -70px,transparent 0 150px,rgba(244,247,242,.2) 151px 154px,transparent 155px) no-repeat}
h1.pg,h2{font-family:var(--num);font-weight:800;font-size:30px;text-transform:uppercase;letter-spacing:.01em;margin:0;line-height:1;text-wrap:balance;display:flex;align-items:center;gap:10px;color:var(--on-grass);text-shadow:0 1px 0 rgba(0,0,0,.25)}
h1.pg::before,h2::before{content:"";width:18px;height:18px;flex:none;border:2px solid var(--chalk);border-radius:50%;background:radial-gradient(circle,var(--chalk) 0 2.5px,transparent 3px)}
h3{font:700 15px var(--cond);text-transform:uppercase;letter-spacing:.12em;margin:0 0 10px;color:var(--muted)}
.lede{color:var(--on-grass-2);max-width:70ch;margin:6px 0 0}
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.ctrls{display:flex;gap:8px;flex-wrap:wrap}
/* form table: Teams or Players */
.ft-head{align-items:center}
#v-players{margin-top:0}
/* Players: the headline changes length with each filter, so it gets its own full-width line with room kept for two
   lines (three on phones), and the controls stay put below it */
#v-players>.bar{flex-direction:column;align-items:stretch}
#pf-lede{min-height:3.2em;min-height:2lh}
@media (max-width:600px){#pf-lede{min-height:4.8em;min-height:3lh}}
.view-sw button{font-size:16px;padding:8px 22px}
.seg{display:inline-flex;background:var(--surface);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap;box-shadow:var(--shadow)}
.seg button{font:700 14px var(--cond);letter-spacing:.06em;text-transform:uppercase;border:0;background:transparent;color:var(--muted);padding:6px 14px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--amber);color:var(--stand)}
select{font:700 14px var(--cond);letter-spacing:.04em;padding:8px 12px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* Tables: team sheets on the grass */
.panel{background:var(--surface);color:var(--ink);border-radius:4px;box-shadow:var(--shadow)}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font:700 12px var(--cond);text-transform:uppercase;letter-spacing:.1em;color:var(--thead-ink);background:var(--thead);border-bottom:3px solid var(--amber)}
th[data-k]{cursor:pointer;user-select:none}
th[aria-sort]::after{content:" \25BE";color:var(--amber)}
th[aria-sort="ascending"]::after{content:" \25B4"}
td.l,th.l{text-align:left}
td.wrapc{white-space:normal;min-width:220px}
tbody tr:nth-child(even) td{background:var(--row-alt)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--accent-soft)}
td.pos{font-family:var(--num);font-weight:800;font-size:20px;width:36px;color:var(--ink);text-align:center}
/* Form table rows open a club panel. Striping and the top/bottom markers use classes, since detail rows break nth-child */
#ftable tbody tr.row{cursor:pointer}
#ftable tbody tr.row td{background:var(--surface)}
#ftable tbody tr.row.alt td{background:var(--row-alt)}
#ftable tbody tr.row:hover td,#ftable tbody tr.row.open td{background:var(--accent-soft)}
#ftable tbody tr.top td.pos{color:var(--pitch);box-shadow:inset 4px 0 0 var(--pitch)}
#ftable tbody tr.bot td.pos{color:var(--l);box-shadow:inset 4px 0 0 var(--l)}
#ftable tr.open td{border-bottom-color:transparent}
#ftable tr.detail td{background:var(--surface);text-align:left;white-space:normal;padding:12px 16px 14px;border-bottom:3px solid var(--amber)}
.detail .inner{position:sticky;left:16px;max-width:calc(100vw - 64px)}
.cd{display:grid;gap:14px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.cd h3{margin-bottom:6px}
.cd-lines{margin:0;padding:0;list-style:none;font-size:13px}
.cd-lines li{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.cd-lines li:last-child{border-bottom:0}
.cd-lines .r{flex:none;width:18px;height:18px;font-size:10px}
.cd-lines .gw{width:34px;color:var(--muted);font:600 12px var(--cond)}
.cd-lines .opp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cd-lines small{color:var(--muted);font-size:11px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:13px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}
button.exp{all:unset;cursor:pointer;display:inline-flex;align-items:center;font-weight:700}
button.exp::after{content:"";flex:none;width:6px;height:6px;margin:-3px 0 0 10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
button.exp[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}
button.exp:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}
/* Wide tables: sticky first column, and a shaded edge while more is off to the right */
.stick{position:sticky;left:0;z-index:1}
td.stick{background:var(--surface)}
th.stick{z-index:2}
.scrollwrap{position:relative}
.scrollwrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;pointer-events:none;border-radius:0 4px 4px 0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.22));opacity:0;transition:opacity .2s}
.scrollwrap.more-r::after{opacity:1}
/* a line of text above wide tables, kept in place (just faded) so the page doesn't jump when you reach the end */
.swipe-hint{margin:0 2px 6px;text-align:right;font:600 13px var(--cond);letter-spacing:.04em;color:var(--on-grass-2);transition:opacity .2s}
.swipe-hint.done{opacity:0}
.scrollwrap.more-l .stick{box-shadow:6px 0 8px -6px rgba(0,0,0,.4)}
td .chips{flex-wrap:nowrap}
.team .short{display:none}
.team{font-weight:700}
.team small,td.back small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.ptsc{font-family:var(--num);font-weight:800;font-size:20px}
.form{display:inline-flex;gap:3px}
.r{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;font:700 11px var(--cond);color:#fff}
.r.W{background:var(--w)}.r.D{background:var(--d);color:#1c1500}.r.L{background:var(--l)}
.r.last{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.good{color:var(--w);font-weight:600}.bad{color:var(--l);font-weight:600}
.chip{display:inline-block;min-width:56px;text-align:center;padding:3px 6px;border-radius:3px;font:700 12px var(--cond);letter-spacing:.05em;text-transform:uppercase}
.f1{background:var(--f1);color:var(--f1t)}.f2{background:var(--f2);color:var(--f2t)}.f3{background:var(--f3);color:var(--f3t)}.f4{background:var(--f4);color:var(--f4t)}.f5{background:var(--f5);color:var(--f5t)}
.chip.blank{background:transparent;border:1px dashed var(--muted);color:var(--muted)}
.chip.dif,.tk .chip.dif{display:inline-block;width:auto;min-width:44px;padding:3px 6px;font-size:13px}
.chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font:600 13px var(--cond);letter-spacing:.04em;color:var(--on-grass-2);margin-top:14px}
.legend .chip{min-width:30px}
.note{font-size:13px;color:var(--on-grass-2);margin-top:10px;max-width:90ch}
.card .note{color:var(--muted)}
.tk td{padding:6px 4px;vertical-align:middle}
.tk .cell{display:flex;flex-direction:column;gap:3px}
/* ticker chip: crest on a small white disc, then code over home/away, all on one line */
.tk .chip{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:84px;padding:5px 8px}
.tk .ct{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;min-width:30px}
.tk .chip b{font-size:14px}
.tk .chip i{font-style:normal;font-weight:500;font-size:11px;opacity:.85}
.gw-h small{display:block;font-weight:500;text-transform:none;letter-spacing:0;font-size:11px;color:#b9c6bd}
.num{font-family:var(--num);font-weight:800;font-size:19px;font-variant-numeric:tabular-nums}

/* FPL */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.card{background:var(--surface);color:var(--ink);border-radius:4px;padding:16px;min-width:0;box-shadow:var(--shadow)}
section+section,details.fplbox+section{margin-top:44px}
.sec-head{margin-bottom:16px}
.cap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.capc{position:relative;background:var(--surface);color:var(--ink);border-radius:4px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0;box-shadow:var(--shadow);overflow:hidden}
.capc.main{background:var(--board);color:#fff;box-shadow:0 0 0 2px var(--amber),0 10px 22px rgba(0,0,0,.4)}
.capc.main .xp{color:var(--amber);text-shadow:0 0 10px rgba(255,194,61,.45)}
.capc.main .why{color:#c5d2c9}
.capc.main .tag{background:rgba(255,255,255,.12);color:#fff}
.capc .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.badge{display:inline-grid;place-items:center;height:26px;padding:0 12px;border-radius:4px;background:var(--amber);color:var(--stand);font:900 16px var(--num);letter-spacing:.06em;box-shadow:inset 0 3px 0 rgba(0,0,0,.12),inset 0 -3px 0 rgba(0,0,0,.12)}
.badge.vc{background:var(--surface);color:var(--ink);border:2px solid var(--ink)}
.capc .nm{font-family:var(--num);font-weight:900;font-size:30px;line-height:.95;text-transform:uppercase;letter-spacing:.01em}
.capc .why{font-size:13px;color:var(--muted)}
/* close-call marker, chance of 10+ and the safe pick card */
.capc .top .tag.close{margin-left:auto;margin-right:8px;background:var(--amber);color:var(--stand)}
.capc.main .top .tag.close{background:var(--amber);color:var(--stand)}
.capc .p10{font:600 13px var(--cond);letter-spacing:.03em;color:var(--muted)}
.capc .p10 b{font:900 18px var(--num);color:var(--ink)}
.capc.main .p10,.capc.main .p10 b{color:#e4ebe6}
.cap-safe{margin-top:18px;max-width:720px}
.cap-safe .safe{display:flex;flex-direction:column;gap:6px;border-left:6px solid #1747a6}
.cap-safe .head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cap-safe .nm{font:900 26px/1 var(--num);text-transform:uppercase;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cap-safe .nm .crest{width:22px;height:22px;margin-right:2px}
.cap-safe .xp{margin-left:auto;font-size:24px}
.cap-safe .card-sub{margin:0;font-size:14px;color:var(--ink)}
.xp{font-family:var(--num);font-weight:900;font-size:28px;line-height:1}
.xp small{font:600 12px var(--cond);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
ol.rank,ul.plain{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
ol.rank li,ul.plain li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
ol.rank li:last-child,ul.plain li:last-child{border-bottom:0}
.pp{flex:1;min-width:0}
.buys-bar{margin-top:28px}
#buys .rk{font:800 18px var(--num);color:var(--muted);width:22px;text-align:center;flex:none}
@media (min-width:760px){#buys{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:32px}#buys li:nth-child(5){border-bottom:0}}
.card-sub{color:var(--muted);font-size:13px;margin:-4px 0 10px}
.sw-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sw-run{display:grid;gap:4px;margin-top:6px}
.sw-run>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sw-run .chip{min-width:0;padding:3px 2px;font-size:11px}
.sw-gw{margin:0;font:700 11px var(--cond);letter-spacing:.06em;color:var(--muted);text-align:center}
.pp b{font-weight:700}
.pp small{display:block;color:var(--muted);font-size:12px;white-space:normal}
.tag{font:700 11px var(--cond);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:var(--f3);color:var(--f3t);white-space:nowrap}
/* Predicted line-up: a chalked pitch with one disc per player */
.lu{display:grid;gap:18px;grid-template-columns:minmax(0,440px) minmax(0,1fr);align-items:start}
/* never taller than the window under the sticky navigation, so the whole pitch fits on a laptop or 1080p screen */
.pitch{position:relative;aspect-ratio:68/80;width:min(100%,calc((100vh - 90px)*68/80));margin-inline:auto;border-radius:4px;color:rgba(244,247,242,.8);background:repeating-linear-gradient(180deg,#33913f 0 10%,#2c8238 10% 20%);box-shadow:var(--shadow);overflow:hidden}
.pitch .lines{position:absolute;inset:0;width:100%;height:100%}
.tok{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;width:96px}
.tok .pct{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:800 14px var(--cond);color:var(--stand);background:#fff;border:3px solid #1f9a52;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.tok.mid .pct{background:var(--amber);border-color:#a8790c}
.tok.lo .pct{background:#fff3f3;border:3px dashed var(--red)}
.tok .nm{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 6px;border-radius:3px;background:rgba(6,10,8,.8);color:#fff;font:700 14px/1.25 var(--cond);letter-spacing:.02em}
.tok .xp{font:600 12px/1.1 var(--cond);color:#f1f8f0;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.lu-side h3 .crest{width:20px;height:20px;vertical-align:-5px;margin-right:6px}
.lu-side h3.gap{margin-top:16px}
#lineups select{align-self:flex-end}
@media (max-width:860px){.lu{grid-template-columns:1fr}}
@media (max-width:560px){.tok{width:68px}.tok .nm{max-width:68px;font-size:12px;padding:1px 4px}.tok .pct{width:30px;height:30px;font-size:12px}.tok .xp{font-size:11px}}
#market .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* plain tags are neutral labels (units, positions, percentages); colour only where it means something */
.tag.hot{background:var(--amber);color:var(--stand)}
.tag.cold{background:var(--l);color:var(--on-wl)}
.tag.up{background:var(--w);color:var(--on-wl)}
.tag.down{background:var(--l);color:var(--on-wl)}
.chips .tag{align-self:center}
.crest{width:20px;height:20px;object-fit:contain;vertical-align:-5px;margin-right:8px}
.pp b .crest,ul.plain .crest{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.capc .nm .crest{width:26px;height:26px;vertical-align:-2px;margin-right:8px}
.tk .chip .crest{display:block;flex:none;width:22px;height:22px;margin:0;padding:2px;background:#fff;border-radius:50%}
.flag{font:700 11px var(--cond);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;white-space:nowrap}
.flag.out{background:var(--l);color:#fff}.flag.doubt{background:var(--d);color:#1c1500}.flag.ok{background:var(--w);color:#fff}.flag.unk{background:var(--f3);color:var(--f3t)}
.chipcard{display:flex;flex-direction:column;gap:10px}
.chipcard .head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.chipcard .best{font-family:var(--num);font-weight:900;font-size:40px;line-height:.9}
.chipcard .best.edge{font-size:26px;color:var(--muted)}
.chipcard .best small{font:600 13px var(--cond);letter-spacing:.04em;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:6px}
.barrow{display:grid;grid-template-columns:44px 1fr 44px minmax(0,auto);gap:8px;align-items:center;font:600 13px var(--cond)}
.barrow .mk{display:flex;gap:3px}
.barrow .mk .tag{font-size:10px;padding:1px 5px}
/* weeks more than five ahead: lighter, because projections are rougher that far out */
.barrow.far{opacity:.55}
.barsep{margin:6px 0 0;padding-top:6px;border-top:1px dashed var(--line);font:700 11px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* the play-or-hold call for each chip */
.call{margin:0;padding:8px 10px;border-radius:4px;font:700 15px var(--cond);letter-spacing:.02em;line-height:1.3}
.call.now{background:var(--amber);color:var(--stand)}
.call.hold{background:#1747a6;color:#fff}
.call.last{background:var(--red);color:#fff}
.call.flat,.call.close{background:var(--f3);color:var(--f3t)}
.barrow .track{height:10px;background:var(--f3);border-radius:2px;overflow:hidden}
.barrow .fill{height:100%;background:var(--fill);border-radius:2px}
.barrow.top .fill{background:var(--red)}
.status{padding:40px 0;color:var(--on-grass-2)}
footer{color:#b9c6bd;font-size:13px;border-top:4px solid var(--chalk);background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 3px,transparent 3px 11px),var(--stand)}
footer .wrap{padding-block:20px 28px}
footer a{color:var(--amber)}
footer p{margin:0 0 6px;max-width:110ch}
footer .footlinks{font-weight:600;margin-bottom:10px}
footer .tzswitch{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
footer .tzswitch .seg{box-shadow:none;background:#1b211e}
footer .tzswitch .seg button{color:#c9d3cd;padding:4px 12px;font-size:13px}
footer .tzswitch .seg button[aria-pressed="true"]{background:var(--amber);color:var(--stand)}
@media (max-width:560px){.gwdone{display:none}.tl-long{display:none}.tl-short{display:inline}.eyebrow{font-size:12px}.team .full{display:none}.team .short{display:inline}.yoke{gap:8px 12px}.countdown{font-size:12px}.scoreboard{padding:4px 10px 3px}.scoreboard b{font-size:36px}h2{font-size:26px}.led .seq>*{font-size:19px;padding:0 16px}}
@media (prefers-reduced-motion:no-preference){tbody tr td{transition:background .12s}}

/* Page headings: each page's H1 matches the section headings, a size up */
h1.pg{font-size:36px}
/* Navigation: one row of boards on every screen. Premier League boards, a red divider, then FPL boards tagged "FPL";
   How it works sits small at the end. The current page's board is lit. On phones the row swipes sideways. */
nav.boards{background:var(--board) radial-gradient(circle,rgba(255,255,255,.07) 0 1px,transparent 1.5px) 0 0/4px 4px;border-top:2px solid #000}
nav.boards .wrap{align-items:stretch;gap:0;padding-block:0;-webkit-overflow-scrolling:touch}
/* one continuous hoarding: boards at natural width, split by black seams */
nav.boards a{flex:0 0 auto;display:flex;align-items:center;gap:7px;min-height:50px;font-size:15px;padding:0 16px;letter-spacing:.06em;color:#fff;
  background-color:var(--board);border-radius:0;box-shadow:none;border-right:2px solid #000}
nav.boards a:first-child{border-left:2px solid #000}
nav.boards a[aria-current="page"]{color:var(--stand);background-color:var(--amber);background-image:none;box-shadow:none}
nav.boards .fpl{font:700 10px/1 var(--cond);font-style:normal;letter-spacing:.08em;padding:3px 4px 2px;border:1.5px solid #ff4b57;border-radius:2px;color:#ff6b74}
nav.boards a[aria-current="page"] .fpl{border-color:var(--stand);color:var(--stand)}
nav.boards .divider{flex:0 0 4px;margin:0 6px;background:var(--red)}
nav.boards .divider+a{border-left:2px solid #000}
nav.boards a.aux{margin-left:auto;font-size:12px;color:#aab7b0;background:transparent;border:0}
nav.boards a.aux:hover{color:#fff}
nav.boards a.aux[aria-current="page"]{color:var(--amber);background:transparent}
/* page titles: a suffix such as "GW10 to GW19" follows a dot on wide screens and sits on its own line on phones */
h1.pg .sub::before{content:" \B7  "}
@media (max-width:760px){
  /* swipe hint: a soft fade at the right edge of the row */
  nav.boards .wrap{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  nav.boards a{min-height:46px;font-size:14px;padding:0 13px}
  nav.boards a.aux{margin-left:0;padding-right:28px}
  h1.pg{font-size:30px}
  h1.pg .sub{display:block;font-size:.6em;letter-spacing:.04em;margin-top:4px;opacity:.85}
  h1.pg .sub::before{content:none}
}
/* Hub cards: one per tool, each leading to its page */
.hub{margin-top:4px}
.hubc{display:flex;flex-direction:column}
.hubc .hub-h{font:700 15px var(--cond);text-transform:uppercase;letter-spacing:.12em;margin:0 0 10px;color:var(--muted);text-shadow:none;display:block}
.hubc .hub-h::before{display:none}
.hubc .hub-h a{color:inherit;text-decoration:none}
.hubc .hub-h a:hover{color:var(--ink)}
.hubc ul{flex:1}
.hubc .more{align-self:flex-start;margin-top:10px;font:700 14px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.hubc .more:hover{text-decoration:underline}
.hubc .badge{height:22px;padding:0 8px;font-size:14px}
.badge.alt{visibility:hidden}
.hubc .pp .chips,.hubc .pp .form{display:flex;margin-top:5px}
/* Explanations and FAQs under each tool: plain reading text on a card */
.explain{margin-top:44px}
.explain .prose{background:var(--surface);color:var(--ink);border-radius:4px;padding:20px 24px;box-shadow:var(--shadow);max-width:80ch}
.explain .prose h2{color:var(--ink);text-shadow:none;font-size:24px;margin:0 0 10px}
.explain .prose h2:not(:first-child){margin-top:28px}
.explain .prose h2::before{border-color:var(--ink);background:radial-gradient(circle,var(--ink) 0 2.5px,transparent 3px)}
.explain .prose h3{margin:22px 0 6px;color:var(--ink);letter-spacing:.08em}
.explain .prose p{margin:0 0 12px;line-height:1.6}
.explain .prose dl{margin:0}
.explain .prose dt{font-weight:700;margin-top:14px}
.explain .prose dd{margin:4px 0 0;line-height:1.6;color:var(--muted)}
.explain .prose a{color:var(--accent)}

/* Homepage in two halves: Premier League for every fan, then FPL */
.half+.half{margin-top:44px}
.half .who{display:inline-block;margin:8px 0 0;font:700 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1.5px solid var(--chalk);color:var(--chalk)}
.half.fplhalf .who{border-color:#ff4b57;color:#fff;background:rgba(215,25,42,.35)}
.hubc .answer{margin:0 0 10px;font:700 17px/1.3 var(--body);color:var(--ink)}
.hubc .fx{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.hubc .fx:last-child{border-bottom:0}
.hubc .fx small{color:var(--muted);white-space:nowrap}

/* homepage: a link from the top down to the FPL half, so FPL players know it's there */
.jump{display:table;margin-top:10px;font:600 15px var(--cond);letter-spacing:.03em;color:var(--on-grass);text-decoration:underline;text-underline-offset:3px}
.jump:hover{color:var(--amber)}
#hub-fpl{scroll-margin-top:70px}

/* Terms with a dotted underline show their meaning in a tooltip (app.js) */
.term{border-bottom:1px dotted currentColor;cursor:help}
.term:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#tip{position:fixed;z-index:60;max-width:min(300px,calc(100vw - 16px));padding:8px 11px;border-radius:4px;background:var(--stand);color:var(--chalk);
  font:500 14px/1.45 var(--body);box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none}
/* "For FPL players": FPL-only detail on Premier League pages, closed until the visitor opens it */
i.fpl{font:700 10px/1 var(--cond);font-style:normal;letter-spacing:.08em;padding:3px 4px 2px;border:1.5px solid var(--accent);border-radius:2px;color:var(--accent)}
details.fplbox{margin-top:16px}
details.fplbox>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--surface);color:var(--ink);
  border-radius:4px;border-left:4px solid var(--accent);box-shadow:var(--shadow);font:700 16px/1.2 var(--cond);letter-spacing:.04em;text-transform:uppercase}
details.fplbox>summary::-webkit-details-marker{display:none}
details.fplbox>summary::after{content:"Show";margin-left:auto;font-size:12px;letter-spacing:.08em;color:var(--muted)}
details.fplbox[open]>summary::after{content:"Hide"}
details.fplbox>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.fplbody{padding-top:14px}
.fplbody>.note:first-child{margin-top:0}
/* inside a white panel or text box: a flatter version */
.prose details.fplbox>summary,.panel details.fplbox>summary,.card details.fplbox>summary{box-shadow:none;border:1px solid var(--line);border-left:4px solid var(--accent);padding:9px 12px;font-size:14px}
.prose .fplbody,.panel .fplbody,.card .fplbody{padding-top:10px}
.cd details.fplbox{margin-top:0}
/* FPL-only detail elsewhere (line-up points) shows only in FPL mode */
html:not(.fpl-on) .fplonly{display:none!important}
.fplsw i.fpl{margin-right:6px}
html.fpl-on .fplsw-hint{display:none}
.fplbody>.card>p{margin:0}
/* Top 100 tracker */
.t100-bench{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:10px;padding:10px 12px;border-radius:4px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-size:14px}
.t100-bench b{font:700 13px var(--cond);letter-spacing:.08em;text-transform:uppercase}
.t100-bench small{color:var(--muted)}
.t100-grid{margin-top:22px}
.t100-own{margin-top:18px}
.t100-trend{width:100%;border-collapse:collapse;font-size:14px}
.t100-trend th,.t100-trend td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right}
.t100-trend .l{text-align:left}
.t100-ctx{margin:12px 0 0;font-size:13px;color:var(--muted)}
.t100-ctx a{color:var(--accent)}
/* "Show more": detail tucked away until asked for */
details.more{margin-top:20px}
details.more>summary{cursor:pointer;display:inline-block;padding:8px 16px;border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font:700 14px var(--cond);letter-spacing:.06em;text-transform:uppercase;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:" \25BE"}
details.more[open]>summary::after{content:" \25B4"}
details.more>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* a gap below the pill and between whatever it reveals (cards, grids, table panels) */
details.more>*+*{margin-top:18px}
/* Weekly page */
.gw-dl{margin:8px 0 0;color:var(--amber);font:600 17px var(--cond);letter-spacing:.03em}
.gw-dl b{color:var(--on-grass)}
.gw-sum{font-size:17px;line-height:1.55;max-width:75ch}
.gw-grid{margin-top:4px}
.gw-grid .card,.gw-fx{display:flex;flex-direction:column}
.gw-grid .card>.more,.gw-fx>.more{margin-top:auto;padding-top:12px}
.gw-fx{margin-top:18px}
.gw-fx .chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.gw-res{margin-bottom:18px;border-left:4px solid var(--amber)}
.gw-frozen{margin:0 0 14px;padding:10px 14px;border-radius:4px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-size:14px}
.gw-frozen a,.gw-list a{color:var(--accent)}
.gw-grid .more,.gw-fx .more{align-self:flex-start;font:700 14px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.gw-grid .more:hover,.gw-fx .more:hover{text-decoration:underline}
/* eleven boards: tighter between phone and wide desktop, with the fade showing there's more when the row scrolls */
@media (min-width:761px){nav.boards a{padding:0 11px;font-size:14px;gap:5px}nav.boards a.aux{padding-right:4px}}
@media (min-width:761px) and (max-width:1240px){nav.boards a.aux{padding-right:24px}nav.boards .wrap{mask-image:linear-gradient(90deg,#000 92%,transparent)}}

/* My team */
.mt-who{margin:0;color:var(--on-grass);font-size:15px}
.mt-who a{color:var(--amber)}
.mt-form{max-width:640px}
.mt-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.mt-row input,.mt-row select{flex:1 1 180px;min-width:0;font:500 16px var(--body);padding:9px 11px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink)}
.btn{font:700 15px var(--cond);letter-spacing:.06em;text-transform:uppercase;border:0;border-radius:4px;padding:9px 16px;background:var(--amber);color:var(--stand);cursor:pointer}
.btn:disabled{opacity:.6;cursor:wait}
.btn.sm{padding:5px 10px;font-size:13px;background:var(--f3);color:var(--f3t)}
.mt-err{margin:8px 0 0;color:var(--accent);font-weight:600}
.mt-answer{font-size:18px;line-height:1.5;color:var(--on-grass);max-width:80ch;margin:0 0 16px}
.mt-tr,.mt-chips{margin-top:18px}
.mt-tr .head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mt-tr .head h3{margin:0}
.mt-tr h4{margin:4px 0 6px;font:700 14px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mt-tr .seg{box-shadow:none;border:1px solid var(--line)}
.mt-ftb button{width:26px;height:24px;margin-left:4px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);cursor:pointer;font-weight:700}
.mt-cost{justify-content:flex-end}
#mt-squad{width:100%}
#mt-side .card-sub{margin-top:12px}

/* My team: Your season (rank by gameweek) */
:root{--chart-line:#127a3e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--chart-line:#2fa862}}
:root[data-theme="dark"]{--chart-line:#2fa862}
.mt-season{margin-top:18px}
.mt-season-lead{margin:0 0 8px;font-weight:600}
.mt-chart{position:relative}
.mt-chart svg{display:block;max-width:100%;overflow:visible}
.mt-chart .g{stroke:var(--line);stroke-width:1}
.mt-chart .ax{fill:var(--muted);font:500 11px var(--body)}
.mt-chart .ln{fill:none;stroke:var(--chart-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mt-chart .dt{fill:var(--chart-line);stroke:var(--surface);stroke-width:2}
.mt-chart .ch{fill:var(--ink);font:700 10px var(--cond);letter-spacing:.06em}
.mt-chart .xh{stroke:var(--muted);stroke-width:1}
.mt-chart .hit{fill:transparent;cursor:crosshair}
.mt-tip{position:absolute;pointer-events:none;padding:6px 9px;border-radius:4px;background:var(--stand);color:var(--chalk);font:500 13px/1.35 var(--body);white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* How we did */
.hwd-grid .answer{font:700 22px/1.2 var(--cond);margin:4px 0 8px}
.hwd-table{margin-top:18px}
.cap-last a{color:var(--amber)}