@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root { --pitch-950: #0B1F17; --pitch-900: #102A1F; --pitch-800: #16362A; --pitch-700: #1F4536; --pitch-600: #2C5A46; --line: #2A4A3B; --ink-0: #F4F7F3; --ink-1: #CFDCD2; --ink-2: #97AC9D; --amber: #D9A441; --amber-soft: #E8C57C; --win: #3FA66B; --draw: #97AC9D; --loss: #C1503D; --surface: var(--pitch-900); --surface-raised: var(--pitch-800); --bg: var(--pitch-950); --text: var(--ink-0); --text-muted: var(--ink-2); --border: var(--line); --accent: var(--amber); --match-sat: 55%; --match-light: 22%; --match-alpha: 0.55; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #F4F7F3; --surface: #FFFFFF; --surface-raised: #FBFBF8; --border: #DCE5DD; --text: #10241A; --text-muted: #56685C; --pitch-950: #0B1F17; --amber: #B87F1F; --amber-soft: #DDA84B; --win: #23824F; --draw: #6B7D70; --loss: #A93E2C; --match-sat: 60%; --match-light: 92%; --match-alpha: 0.65; } } :root[data-theme="light"] { --bg: #F4F7F3; --surface: #FFFFFF; --surface-raised: #FBFBF8; --border: #DCE5DD; --text: #10241A; --text-muted: #56685C; --amber: #B87F1F; --amber-soft: #DDA84B; --win: #23824F; --draw: #6B7D70; --loss: #A93E2C; --match-sat: 60%; --match-light: 92%; --match-alpha: 0.65; } :root[data-theme="dark"] { --bg: #0B1F17; --surface: #102A1F; --surface-raised: #16362A; --border: #2A4A3B; --text: #F4F7F3; --text-muted: #97AC9D; --amber: #D9A441; --amber-soft: #E8C57C; --win: #3FA66B; --draw: #97AC9D; --loss: #C1503D; --match-sat: 55%; --match-light: 22%; --match-alpha: 0.55; } * { box-sizing: border-box; } /* Mobile Safari (and some Android browsers) reveal the element's background during rubber-band/overscroll bounce, not 's - an unpainted defaults to white and shows as a flash of white at the top/bottom edge while scrolling, even though the page itself is fully dark-themed. Paint it explicitly from the same token. */ html { background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } .display { font-family: 'Oswald', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; } /* ---------- shell ---------- */ .shell { max-width: 1400px; margin: 0 auto; padding: 0 24px 80px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .brand { display: flex; align-items: baseline; gap: 10px; } .brand-mark { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: 0.01em; color: var(--text); } .brand-sub { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; } /* Gameweek status: one dot per fixture, ordered by kickoff time, filled as each match finishes - shows real progress through the gameweek instead of collapsing a mix of finished/live/upcoming fixtures into a single misleading Live/Finished/Upcoming label. */ .status-line { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px 6px 10px; font-size: 0.8rem; } .status-dots { display: flex; gap: 4px; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); } .status-dot.finished { background: var(--text-muted); } .status-dot.live { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); } .status-line b { font-weight: 600; } .status-line .muted { color: var(--text-muted); } /* ---------- section headings ---------- */ .section { margin-top: 44px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; } .section-title { font-family: 'Oswald', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); display: flex; align-items: center; gap: 10px; } .section-title .rule { width: 22px; height: 3px; background: var(--amber); border-radius: 2px; display: inline-block; } .section-note { font-size: 0.78rem; color: var(--text-muted); } /* ---------- hero row ---------- */ .hero { display: grid; grid-template-columns: 3fr 1fr; gap: 20px; } .hero .card { display: flex; flex-direction: column; } /* Two even columns instead of .hero's 3fr:1fr split. */ .hero-even { grid-template-columns: 1fr 1fr; } @media (max-width: 920px) { .hero, .hero-even { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 14px; border-bottom: 1px solid var(--border); } .card-title { font-family: 'Oswald', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .card-title .accent { color: var(--amber); } /* ---------- tables ---------- */ table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } /* Tables that mix free-text columns (e.g. "Players left") with fixed columns must not be allowed to size themselves wider than their card - table-layout:fixed forces columns to share the 100% width instead of growing to fit the longest cell content. */ table.fit { table-layout: fixed; } table.fit .rank { width: 44px; } table.fit .num { width: 72px; } /* Match/Manager/Score/Diff are all fixed to their content's natural width; Players Left is the only unconstrained column, so under table-layout:fixed it absorbs all remaining table width - the more room Live Score has, the more that goes straight to Players Left. */ table.live-score .rank, table.live-score thead th:first-child { width: 64px; padding-left: 12px; padding-right: 4px; } table.live-score td:nth-child(2), table.live-score th:nth-child(2) { width: 180px; white-space: normal; padding-left: 4px; } table.live-score .num { width: 64px; } /* Cap the table to its content width instead of stretching to 100% of the (now much narrower) card - otherwise the Manager column expands to fill leftover space and Points ends up stranded far to the right. */ table.h2h-standings { width: auto; max-width: 100%; } table.h2h-standings .rank { padding-right: 4px; } table.h2h-standings td:nth-child(2), table.h2h-standings th:nth-child(2) { padding-left: 4px; padding-right: 28px; } /* Each H2H match is exactly 2 consecutive rows, marked with an inline --match-color hue (computed server-side per match index using a golden-angle step, so it scales to any number of matches without a fixed palette) and a .match-start class on the first row of the pair. A light full-row tint built from that hue ties the pair together and tells matches apart at a glance; the divider within a pair is dropped so the two rows read as one unit. */ table.live-score tbody tr:not(.match-start) td { border-bottom: none; } table.live-score tbody tr td { background: hsl(var(--match-color) var(--match-sat) var(--match-light) / var(--match-alpha)); } table.live-score tbody tr:hover td { background: hsl(var(--match-color) var(--match-sat) var(--match-light) / calc(var(--match-alpha) + 0.15)); } /* Mobile: a 5-column table has no room to fit Match/Manager/Score/Diff AND give Players Left real space. Below 680px we swap the table for a priority accordion instead of squeezing columns further - each match collapses to one compact line (both managers' scores, visible without a tap) and Players Left/details expand on demand. Same data, restructured for scanability at phone width rather than density. */ .acc-list { display: none; } @media (max-width: 680px) { table.live-score { display: none; } .acc-list { display: block; } } .acc-match { border-bottom: 1px solid var(--border); } .acc-match:last-child { border-bottom: none; } .acc-match summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; background: hsl(var(--match-color) var(--match-sat) var(--match-light) / var(--match-alpha)); } .acc-match summary::-webkit-details-marker { display: none; } .acc-match summary:hover { background: hsl(var(--match-color) var(--match-sat) var(--match-light) / calc(var(--match-alpha) + 0.15)); } .acc-match-num { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); width: 16px; flex-shrink: 0; } .acc-summary-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .acc-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.85rem; } .acc-summary-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-summary-numbers { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; } /* Diff follows FPL's own H2H convention: 0 if you're ahead or tied, negative if you're behind. The "0" case is dropped entirely rather than shown - it doesn't tell you anything a viewer can't already see from the score itself, and showing it in every row just adds noise. Only the trailing manager gets a diff number, in the loss color, at normal weight - not bold, so it doesn't compete with the match row's own background tint (which is the page's one color signal for grouping the pair, not for win/loss). */ .acc-summary-margin { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 0.85rem; text-align: right; } .acc-summary-margin.margin-neg { color: var(--loss); } .acc-summary-score { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0; } .acc-chevron { color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s ease; } @media (prefers-reduced-motion: reduce) { .acc-chevron { transition: none; } } .acc-match[open] .acc-chevron { transform: rotate(180deg); } .acc-body { padding: 4px 14px 14px; } .acc-side { display: flex; align-items: baseline; gap: 10px; padding-top: 10px; } .acc-side .acc-manager { flex: 1; font-weight: 600; font-size: 0.85rem; } .acc-side .acc-score { font-family: 'Oswald', sans-serif; font-weight: 600; } .acc-side .acc-diff { font-size: 0.78rem; width: 32px; text-align: right; } .acc-left { padding: 2px 0 4px; } .acc-left-label { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; } .acc-left-names { font-size: 0.78rem; color: var(--text-muted); } table.gw-points td:nth-child(1), table.gw-points th:nth-child(1) { width: 18%; overflow: hidden; text-overflow: ellipsis; } table.gw-points td:nth-child(2), table.gw-points th:nth-child(2) { width: 16%; overflow: hidden; text-overflow: ellipsis; } /* Below 680px, both Gameweek Player Points and Gameweek Transfers swap their table for a mobile-native layout, same reasoning as Live Score: a 5-column table with an "Owned by" list, or a 3-column table with long In/Out lists, has no room on a phone. */ .gwp-list, .tm-list { display: none; } @media (max-width: 680px) { table.gw-points, table.fit:not(.live-score):not(.gw-points) { display: none; } .gwp-list, .tm-list { display: block; } } .gwp-item { border-bottom: 1px solid var(--border); } .gwp-item:last-child { border-bottom: none; } .gwp-item summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; } .gwp-item summary::-webkit-details-marker { display: none; } .gwp-item summary:hover { background: var(--surface-raised); } .gwp-item[open] .acc-chevron { transform: rotate(180deg); } .gwp-player { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; } .gwp-player b { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gwp-team { font-size: 0.72rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; } .gwp-pts { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.9rem; width: 24px; text-align: right; flex-shrink: 0; } .gwp-pts.zero { color: var(--text-muted); } .gwp-owners { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; width: 60px; text-align: right; } .gwp-body { padding: 0 14px 12px 14px; font-size: 0.78rem; color: var(--text-muted); } .tm-item { border-bottom: 1px solid var(--border); } .tm-item:last-child { border-bottom: none; } .tm-item summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; } .tm-item summary::-webkit-details-marker { display: none; } .tm-item summary:hover { background: var(--surface-raised); } .tm-item[open] .acc-chevron { transform: rotate(180deg); } .tm-summary-name { flex: 1; font-weight: 600; font-size: 0.85rem; min-width: 0; } .tm-summary-count { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; } .tm-body { padding: 0 14px 12px 14px; } .tm-row { display: flex; gap: 8px; font-size: 0.8rem; padding: 2px 0; } .tm-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); width: 30px; flex-shrink: 0; padding-top: 2px; } .tm-empty { font-size: 0.8rem; color: var(--text-muted); } thead th { text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); padding: 8px 14px; background: var(--surface-raised); border-bottom: 1px solid var(--border); white-space: nowrap; } thead th.num, td.num { text-align: right; } tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--surface-raised); } .rank { font-family: 'Oswald', sans-serif; font-weight: 600; color: var(--text-muted); width: 28px; } .rank.top3 { color: var(--amber); } .pts { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.95rem; } .diff-neg { color: var(--loss); } .diff-zero { color: var(--text-muted); } .players-left { color: var(--text-muted); font-size: 0.78rem; white-space: normal; word-break: break-word; } /* ---------- stat grid ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .stat-grid { grid-template-columns: 1fr; } } .stat-grid .card.wide { grid-column: span 2; } @media (max-width: 640px) { .stat-grid .card.wide { grid-column: span 1; } } .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-raised); color: var(--text-muted); border: 1px solid var(--border); } .bar-track { height: 6px; background: var(--surface-raised); border-radius: 999px; overflow: hidden; margin-top: 5px; } .bar-fill { height: 100%; background: var(--amber); border-radius: 999px; } .owned-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--border); gap: 12px; } .owned-row:last-child { border-bottom: none; } .owned-name { font-weight: 600; font-size: 0.88rem; flex: 0 0 120px; } .owned-bar { flex: 1; } .owned-count { font-family: 'Oswald', sans-serif; font-weight: 600; color: var(--amber); font-size: 0.85rem; width: 20px; text-align: right; } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; } .chip { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-muted); } .chip.wildcard { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); } /* Remaining Chips grid: FPL splits the season into two chip halves, each of the 4 chip types has one independent use per half - so each cell shows two dots (half 1, half 2), filled when that half's chip is already used. Far more scannable than a comma-joined sentence per manager, and the two-dot shape mirrors the real two-half rule instead of hiding it. */ table.chips-grid { width: auto; max-width: 100%; } table.chips-grid .chip-manager { font-weight: 600; white-space: nowrap; } table.chips-grid th:not(:first-child), table.chips-grid .chip-cell { text-align: center; width: 108px; } .chip-pair { display: inline-flex; gap: 6px; align-items: center; } .chip-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-muted); background: transparent; display: inline-block; } .chip-dot.used { background: var(--text-muted); border-color: var(--text-muted); } /* Below 680px the 5-column chips grid (manager + 4 chip types) can't fit a phone width without horizontal scroll, same as the other dense tables - swap for one compact card per manager instead. */ .cm-list { display: none; } @media (max-width: 680px) { table.chips-grid { display: none; } .cm-list { display: block; } } .cm-item { border-bottom: 1px solid var(--border); } .cm-item:last-child { border-bottom: none; } .cm-item summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; } .cm-item summary::-webkit-details-marker { display: none; } .cm-item summary:hover { background: var(--surface-raised); } .cm-item[open] .acc-chevron { transform: rotate(180deg); } .cm-summary-name { flex: 1; font-weight: 600; font-size: 0.85rem; min-width: 0; } .cm-summary-count { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; } .cm-body { padding: 0 14px 12px 14px; } .cm-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 0.8rem; color: var(--text-muted); } .cm-chip-name { color: var(--text); } .transfer-cell { font-size: 0.82rem; white-space: normal; } .transfer-in { color: var(--win); } .transfer-out { color: var(--loss); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--loss) 50%, transparent); } /* ---------- charts ---------- */ /* Real SVG (viewBox + width:100%), not a scaled raster image - text and bars stay crisp and correctly sized at any screen width, from desktop down to a phone, instead of shrinking a fixed-size PNG. Horizontal bars (label left, value right) read cleanly regardless of manager-name length or count, and need no axis-label rotation - the failure mode that made the old vertical bar charts illegible on narrow screens. */ .chart-body { padding: 18px; } .chart-svg { width: 100%; height: auto; display: block; } .chart-caption { font-size: 0.75rem; color: var(--text-muted); padding: 0 18px 16px; } .hbar-label { font-size: 12px; fill: var(--text); font-family: 'Inter', sans-serif; } .hbar-track { fill: var(--surface-raised); } .hbar-value { font-size: 12px; font-weight: 600; fill: var(--text); font-family: 'Oswald', sans-serif; } @media (max-width: 480px) { .hbar-label, .hbar-value { font-size: 13px; } } /* ---------- details page mock ---------- */ .details-shell { margin-top: 44px; } .manager-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .manager-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } /* manager-head is a

- collapsed by default, same priority- accordion pattern as the other dense sections, so the page opens with 10 compact rows (name + live total) instead of 10 full XIs. */ .manager-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-raised); cursor: pointer; list-style: none; } .manager-head::-webkit-details-marker { display: none; } .manager-head:hover { background: color-mix(in srgb, var(--surface-raised) 80%, var(--text) 6%); } .manager-card[open] .acc-chevron { transform: rotate(180deg); } .manager-body { padding-bottom: 2px; } .manager-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, var(--amber), var(--amber-soft)); color: var(--pitch-950); font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .manager-name-block { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; } .manager-head .acc-chevron { flex-shrink: 0; color: var(--text-muted); } .manager-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .manager-total { font-size: 0.72rem; color: var(--text-muted); } .manager-total b { color: var(--amber); font-family: 'Oswald', sans-serif; } .player-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; padding: 7px 16px; border-bottom: 1px solid var(--border); font-size: 0.8rem; } .player-row:last-child { border-bottom: none; } .player-row.bench { opacity: 0.45; } .player-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-mins { color: var(--text-muted); font-size: 0.72rem; width: 30px; text-align: right; } .player-bonus { font-size: 0.68rem; font-weight: 700; color: var(--amber); width: 20px; text-align: right; } .player-pts { font-family: 'Oswald', sans-serif; font-weight: 600; width: 24px; text-align: right; } .player-pts.zero { color: var(--text-muted); } h1, h2, h3 { text-wrap: balance; } .table-scroll { max-height: 420px; overflow-y: auto; } .table-scroll table thead th { position: sticky; top: 0; z-index: 1; } .row-count { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }