/* ==========================================================================
   Deadline FPL — design system
   One stylesheet for the whole site. No framework, no build step.

   The visual language is matchday: condensed broadcast typography, a floodlit
   pitch ground rather than flat black, white pitch markings used structurally,
   and each club's own colours carried on its players as a scannable stripe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Floodlit pitch at night: a near-black carrying a green bias, so the
     accent sits in the same world as the ground rather than on top of it. */
  --bg:          #071310;
  --bg-raised:   #0d1c17;
  --bg-card:     #0f221c;
  --bg-hover:    #163026;
  --border:      #1c3a2f;
  --border-soft: #14291f;

  /* Pitch markings — white lines, always low opacity, never pure white. */
  --line:        rgba(226, 245, 234, 0.10);
  --line-strong: rgba(226, 245, 234, 0.20);

  --text:        #e8f5ee;
  --text-muted:  #8aa89a;
  --text-faint:  #5d7a6c;

  /* Turf green under lights, warmer and deeper than a neon mint. */
  --accent:      #3fd07c;
  --accent-dim:  #2a9e5c;
  --accent-glow: rgba(63, 208, 124, 0.13);
  /* Floodlight warm-white, used only for emphasis on a very few numbers. */
  --flood:       #ffd88a;
  --violet:      #8b7cff;
  --amber:       #ffb340;

  /* Fixture difficulty (1 easiest .. 5 hardest) */
  --fdr-1: #157a4b;
  --fdr-2: #2fa36a;
  --fdr-3: #3f5a4e;
  --fdr-4: #b8452f;
  --fdr-5: #8c1f16;

  /* Club colours default to neutral until a card sets its own. */
  --club-a: var(--border);
  --club-b: var(--border);

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

  /* Barlow Condensed is broadcast-graphics type: scoreboards, lower thirds,
     team sheets. Barlow carries the reading text in the same voice. */
  /* The condensed fallbacks matter: if the font host is slow or blocked the
     page must still read as a scoreboard rather than collapsing to a default
     grotesque at display sizes. */
  --display: "Barlow Condensed", "Archivo Narrow", "Roboto Condensed",
             "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --font: Barlow, "Helvetica Neue", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --max: 1240px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.02;
  margin: 0 0 .4em;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); text-transform: uppercase; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); text-transform: uppercase; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

code, kbd, samp { overflow-wrap: anywhere; word-break: break-word; }

/* Every figure that sits in a column lines up. */
.num, .pcard-xp b, .countdown .unit b, .gw-val, .breakdown-row .val,
table td, table th { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: 18px;
}

.section { margin-block: 46px; }

/* Section heads read as team-sheet headings: condensed caps over a pitch
   line that runs the full width, the way a pitch marking does. */
.section > h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line-strong);
  margin-bottom: .6em;
}

.section-note {
  color: var(--text-muted);
  font-size: .9rem;
  margin: 0 0 1.2em;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 19, 16, 0.93);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: linear-gradient(150deg, var(--accent), var(--accent-dim));
  display: grid; place-items: center;
  color: #04140d;
  font-family: var(--display);
  font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
}

.nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  color: var(--text-muted);
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav a.active { color: var(--accent); background: var(--accent-glow); }

/* The deadline pill, beside the wordmark on every page. It is the one number
   a manager checks without being asked, so it sits where the eye already is
   and stays quiet until it has a reason not to be. */
.hdr-deadline {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised, rgba(255,255,255,.03));
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .2s, background .2s;
}
.hdr-deadline:hover { text-decoration: none; border-color: var(--accent-dim); }
.hdr-dl-gw {
  font-size: .76rem;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hdr-dl-time {
  font-size: .95rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Under three hours to the deadline. */
.hdr-deadline.urgent { border-color: rgba(255,176,32,.45); background: rgba(255,176,32,.08); }
.hdr-deadline.urgent .hdr-dl-time { color: #ffb020; }
/* Deadline passed, gameweek in play. */
.hdr-deadline.live .hdr-dl-time { color: var(--text-muted); }

@media (max-width: 760px) {
  .site-header .wrap { height: auto; flex-wrap: wrap; padding-block: 10px; gap: 10px; }
  .nav { margin-left: 0; width: 100%; overflow-x: visible; flex-wrap: wrap; gap: 4px; }
  .nav a { padding: 5px 10px; font-size: .98rem; }
  /* The pill belongs on the first row beside the wordmark, not on a row of its
     own — so the lockup gives back just enough width to keep them together. */
  .hdr-deadline { margin-left: auto; padding: 3px 9px; gap: 6px; }
  .hdr-dl-gw { font-size: .72rem; }
  .hdr-dl-time { font-size: .9rem; }
  .brand { font-size: 1.28rem; gap: 8px; }
  .brand-mark { width: 26px; height: 26px; font-size: .88rem; }
  .brand-tag { font-size: .68rem; padding: 1px 5px; }
}

/* --------------------------------------------------------------------------
   Hero — pitch markings behind the headline
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: 46px 14px;
  border-bottom: 2px solid var(--line-strong);
  overflow: hidden;
}
.hero > * { position: relative; z-index: 1; }

/* The centre circle and halfway line, drawn once, low and wide on the right.
   Structural rather than decorative: it is the only illustration on the page. */
.pitch-motif {
  position: absolute;
  inset: -18% -8% -18% 52%;
  z-index: 0;
  pointer-events: none;
  /* Fade in from the left so no line ever crosses the headline. The markings
     should sit behind the page like a pitch seen past the technical area,
     not like a watermark stamped over the type. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 34%, #000 88%, transparent 100%);
}
.pitch-motif svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1100px) { .pitch-motif { display: none; } }

.hero .lede {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 54ch;
}

/* --------------------------------------------------------------------------
   Deadline — a stadium scoreboard
   -------------------------------------------------------------------------- */

.deadline-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background:
    linear-gradient(180deg, rgba(63, 208, 124, .06), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 15px 20px;
  margin-top: 24px;
}
.deadline-bar .dl-label {
  font-family: var(--display);
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-faint);
  font-weight: 600;
}
.deadline-bar .dl-gw {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.7rem;
  text-transform: uppercase;
  line-height: 1.05;
}
.countdown { display: flex; gap: 8px; margin-left: auto; }
.countdown .unit {
  background: #050e0b;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  text-align: center;
  min-width: 58px;
}
.countdown .unit b {
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.countdown .unit span {
  font-family: var(--display);
  font-size: .72rem;
  text-transform: uppercase;
  color: var(--text-faint);
  letter-spacing: .12em;
  font-weight: 600;
}
@media (max-width: 660px) { .countdown { margin-left: 0; width: 100%; } .countdown .unit { flex: 1; min-width: 0; } }

/* --------------------------------------------------------------------------
   Cards and grids
   -------------------------------------------------------------------------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* Player card. The left edge carries the club's two colours — the fastest way
   to scan a grid for "who plays for whom" without a crest in sight. */
.pcard {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  overflow: hidden;
}
.pcard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 7px;
  background: linear-gradient(
    to right,
    var(--club-a) 0, var(--club-a) 50%,
    var(--club-b) 50%, var(--club-b) 100%
  );
}
.pcard:hover { border-color: var(--accent-dim); background: var(--bg-hover); transform: translateY(-2px); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pcard-top { display: flex; align-items: flex-start; gap: 10px; }
.pcard-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.pcard-meta { color: var(--text-muted); font-size: .82rem; margin-top: 2px; }
.pcard-xp { margin-left: auto; text-align: right; flex-shrink: 0; }
.pcard-xp b {
  display: block;
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--accent);
  line-height: .95;
}
.pcard-xp span {
  font-family: var(--display);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-faint);
  font-weight: 600;
}

.pcard-body {
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Labelled facts. Someone scanning twelve cards is comparing the same thing
   across all of them, so each fact keeps its own line and the labels line up
   in a fixed column — far easier than parsing a run-on sentence. */
.facts {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: .84rem;
  line-height: 1.4;
}
.facts dt {
  font-family: var(--display);
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-faint);
  font-weight: 600;
  white-space: nowrap;
}
.facts dd { margin: 0; color: var(--text-muted); }

/* The upcoming run, drawn as difficulty chips rather than listed as text. */
.run { display: flex; gap: 3px; flex-wrap: wrap; }
.run .fdr-cell { min-width: 0; padding: 3px 7px; font-size: .82rem; margin: 0; }

@media (max-width: 420px) {
  .facts { grid-template-columns: 68px 1fr; gap: 4px 9px; }
}

/* Club colour chip, for use in tables where a full stripe would be too loud. */
.club-chip {
  display: inline-block;
  width: 4px;
  height: 1.05em;
  border-radius: 1px;
  margin-right: 7px;
  vertical-align: -2px;
  background: linear-gradient(to right, var(--club-a) 0 50%, var(--club-b) 50% 100%);
}

/* --------------------------------------------------------------------------
   Badges — squad-number lettering
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.45;
}
.badge.pos-1 { background: rgba(255,179,64,.13); color: #ffc76b; border-color: rgba(255,179,64,.32); }
.badge.pos-2 { background: rgba(139,124,255,.15); color: #aea3ff; border-color: rgba(139,124,255,.34); }
.badge.pos-3 { background: rgba(63,208,124,.13); color: #6ce6a4; border-color: rgba(63,208,124,.32); }
.badge.pos-4 { background: rgba(255,90,120,.14); color: #ff8ba3; border-color: rgba(255,90,120,.32); }
.badge.warn { background: rgba(255,179,64,.15); color: var(--amber); border-color: rgba(255,179,64,.36); }
.badge.danger { background: rgba(255,74,74,.15); color: #ff8080; border-color: rgba(255,74,74,.36); }
.badge.ok { background: rgba(63,208,124,.13); color: var(--accent); border-color: rgba(63,208,124,.32); }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: var(--accent-dim); color: var(--text); }
.chip.active { background: var(--accent-glow); border-color: var(--accent-dim); color: var(--accent); }

/* --------------------------------------------------------------------------
   Tables — team sheets
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  -webkit-overflow-scrolling: touch;
}

table { border-collapse: collapse; width: 100%; font-size: .88rem; }

thead th {
  position: sticky;
  top: 0;
  background: var(--bg-raised);
  text-align: left;
  padding: 10px 12px;
  font-family: var(--display);
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid var(--line-strong);
  z-index: 2;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text); }
thead th .arrow { opacity: .45; margin-left: 3px; font-size: .8em; }
thead th.sorted { color: var(--accent); }
thead th.sorted .arrow { opacity: 1; }

tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--bg-hover); }
tbody tr.clickable { cursor: pointer; }

.num { text-align: right; font-family: var(--mono); font-size: .84em; }
.strong-num { color: var(--accent); font-weight: 600; font-size: .95em; }

.pname { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.psub { color: var(--text-faint); font-size: .76rem; font-weight: 400; }

/* --------------------------------------------------------------------------
   Fixture difficulty grid
   -------------------------------------------------------------------------- */

.fdr-cell {
  display: inline-block;
  min-width: 64px;
  padding: 4px 7px;
  border-radius: 4px;
  text-align: center;
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #fff;
  margin: 1px;
}
.fdr-1 { background: var(--fdr-1); }
.fdr-2 { background: var(--fdr-2); }
.fdr-3 { background: var(--fdr-3); }
.fdr-4 { background: var(--fdr-4); }
.fdr-5 { background: var(--fdr-5); }
.fdr-blank {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-faint);
}

.fdr-legend {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: .8rem; color: var(--text-muted);
}
.fdr-legend .swatch { width: 24px; height: 14px; border-radius: 3px; display: inline-block; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

input[type="text"], input[type="number"], input[type="search"], select {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-family: inherit;
  min-width: 0;
}
input:focus, select:focus { outline: none; border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-glow); }
input::placeholder { color: var(--text-faint); }

.btn {
  background: var(--accent);
  color: #04140d;
  border: none;
  padding: 9px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent-dim); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .grow { flex: 1 1 220px; }

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */

.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius);
  min-height: 96px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  * { transition: none !important; }
}

.state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.state h3 { color: var(--text); }
.state.error { border-color: rgba(255,74,74,.35); }

.stale-note {
  background: rgba(255,179,64,.09);
  border: 1px solid rgba(255,179,64,.3);
  color: var(--amber);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: .86rem;
  margin-bottom: 16px;
}

.freshness {
  font-family: var(--display);
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 9, 7, 0.82);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
}
.modal h2 { font-size: 2rem; text-transform: uppercase; }
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: grid; place-items: center;
}
.modal-close:hover { color: var(--text); border-color: var(--accent-dim); }

.breakdown { display: grid; gap: 7px; margin-top: 6px; }
.breakdown-row { display: grid; grid-template-columns: 116px 1fr 56px; gap: 10px; align-items: center; font-size: .85rem; }
.breakdown-row .label { color: var(--text-muted); }
.breakdown-row .bar { background: #050e0b; border-radius: 3px; height: 9px; overflow: hidden; }
.breakdown-row .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.breakdown-row .bar i.neg { background: #ff5a78; }
.breakdown-row .val { text-align: right; font-family: var(--mono); font-size: .8rem; }

/* Gameweek strip — a run of fixtures, read left to right like a results line */
.gw-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.gw-box {
  min-width: 58px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 5px 6px;
  text-align: center;
  background: var(--bg-raised);
}
.gw-box .gw-label {
  font-family: var(--display); font-size: .7rem; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.gw-box .gw-val { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--accent); line-height: 1.1; }
.gw-box .gw-opp { font-size: .66rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Ad slots
   -------------------------------------------------------------------------- */

.ad-slot {
  margin-block: 28px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-faint);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  overflow: hidden;
}
.ad-slot.filled { border: none; min-height: 0; display: block; }
.ad-slot ins { display: block; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 2px solid var(--line-strong);
  margin-top: 64px;
  padding-block: 32px 44px;
  color: var(--text-muted);
  font-size: .86rem;
}
.footer-grid { display: flex; gap: 32px; flex-wrap: wrap; justify-content: space-between; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a {
  color: var(--text-muted);
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.footer-links a:hover { color: var(--accent); }
.disclaimer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-faint);
  font-size: .78rem;
  max-width: 82ch;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Consent banner
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-raised);
  border-top: 2px solid var(--accent-dim);
  padding: 16px;
  z-index: 200;
  box-shadow: 0 -6px 24px rgba(0,0,0,.5);
}
.consent-inner { max-width: var(--max); margin: 0 auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.consent p { margin: 0; font-size: .86rem; color: var(--text-muted); flex: 1 1 360px; }
.consent .actions { display: flex; gap: 8px; margin-left: auto; }

/* --------------------------------------------------------------------------
   Prose pages
   -------------------------------------------------------------------------- */

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.6em; padding-bottom: 8px; border-bottom: 2px solid var(--line-strong); }
.prose h3 { margin-top: 1.5em; color: var(--text); text-transform: uppercase; letter-spacing: .02em; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1em; }
.prose li { margin-bottom: .45em; }
.prose code {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .87em;
}
.prose blockquote {
  border-left: 3px solid var(--accent-dim);
  margin: 1.4em 0;
  padding: 2px 0 2px 16px;
  color: var(--text-muted);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Recent form — the last few gameweek scores
   An average hides everything about its shape, so the actual run is shown.
   -------------------------------------------------------------------------- */

.form-run { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.form-pip {
  min-width: 26px;
  padding: 2px 5px;
  border-radius: 4px;
  text-align: center;
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 600;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.form-pip.haul { background: rgba(63,208,124,.16); border-color: var(--accent-dim); color: var(--accent); }
.form-pip.blank { color: var(--text-faint); opacity: .75; }

/* --------------------------------------------------------------------------
   Category signals
   "Deadline" is an FPL word, but the tag and kicker still do the work of
   saying what the site is on a page someone lands on cold.
   -------------------------------------------------------------------------- */

/* The FPL tag in the brand lockup. */
.brand-tag {
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 1px;
  align-self: center;
  line-height: 1.5;
}
.site-footer .brand-tag { color: var(--text-muted); background: none; border-color: var(--border); }

/* A broadcast kicker above the headline: what this is, and which gameweek. */
.kicker {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
  margin: 0 0 .35em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::after {
  content: "";
  flex: 0 1 90px;
  height: 1px;
  background: linear-gradient(to right, var(--accent-dim), transparent);
}
@media (max-width: 560px) { .kicker { font-size: .9rem; letter-spacing: .14em; } }

/* --------------------------------------------------------------------------
   Notes — the weekly record
   The only long-form writing on the site, so it gets a reading measure and
   nothing else: no cards inside cards, no decoration competing with the text.
   -------------------------------------------------------------------------- */

.note-list { display: grid; gap: 14px; }

.note-card {
  display: block;
  padding: 18px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  transition: border-color .15s, background .15s;
}
.note-card:hover {
  text-decoration: none;
  border-left-color: var(--accent);
  background: var(--bg-hover);
}
.note-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.note-tag {
  color: var(--accent);
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  padding: 1px 7px;
}
.note-card h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
  letter-spacing: -.01em;
}
.note-card p { margin: 0; color: var(--text-muted); max-width: 68ch; }

/* An article itself. Narrower than a data page — prose wants a shorter line. */
.article { max-width: 44rem; }
.article-head { margin-block: 8px 28px; }
.article-head h1 { margin-bottom: 10px; }
.article-date {
  font-family: var(--display);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
}
.article .prose h2 { margin-top: 1.8em; }
.article .verdict {
  border-left: 3px solid var(--accent);
  background: var(--accent-glow);
  padding: 14px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-block: 22px;
}
.article .verdict p { margin: 0; color: var(--text); }
.article .verdict p + p { margin-top: 8px; }

/* Scored results table. Tabular numerals so the columns line up. */
.scoretable { width: 100%; border-collapse: collapse; margin-block: 18px; font-size: .94rem; }
.scoretable th, .scoretable td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.scoretable th {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--text-faint);
  border-bottom-color: var(--line-strong);
}
.scoretable th:nth-child(2), .scoretable td:nth-child(2) { text-align: left; }
.scoretable td:nth-child(1) { color: var(--text-faint); }
.scoretable .hit { color: var(--accent); font-weight: 600; }
.scoretable .miss { color: #e5734f; }
.scoretable tfoot td { border-bottom: none; border-top: 2px solid var(--line-strong); font-weight: 600; }

/* --------------------------------------------------------------------------
   Recent form — labelled pips with the fixture behind each score
   -------------------------------------------------------------------------- */

.form-block { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.form-label {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  white-space: nowrap;
}

/* The pip carries its own tooltip. A native title= would do, but it appears
   after a browser-controlled delay and cannot be styled to match, and the two
   together would show the same text twice. */
.form-pip {
  position: relative;
  cursor: default;
}
.form-pip[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.form-pip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: #061a12;
  color: var(--text);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px 10px;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 40;
}
/* The little arrow. */
.form-pip[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  width: 7px; height: 7px;
  transform: translateX(-50%) rotate(45deg) translateY(3px);
  background: #061a12;
  border-right: 1px solid var(--accent-dim);
  border-bottom: 1px solid var(--accent-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 41;
}
.form-pip[data-tip]:hover::after,
.form-pip[data-tip]:focus-visible::after,
.form-pip[data-tip]:hover::before,
.form-pip[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.form-pip[data-tip]:hover::before,
.form-pip[data-tip]:focus-visible::before {
  transform: translateX(-50%) rotate(45deg) translateY(0);
}

/* The leftmost pips would push their tooltip off a narrow card, so on small
   screens it anchors to the card edge instead of the pip. */
@media (max-width: 560px) {
  .form-pip[data-tip]::after {
    left: 0;
    transform: translateX(0) translateY(3px);
    max-width: 72vw;
    white-space: normal;
  }
  .form-pip[data-tip]:hover::after,
  .form-pip[data-tip]:focus-visible::after { transform: translateX(0) translateY(0); }
}

/* --------------------------------------------------------------------------
   The deadline answer
   Someone arriving from a search for "fpl deadline" wants one number. It is
   set larger than anything else on the page and put above every other block,
   because making them hunt for it is the only way this page can fail.
   -------------------------------------------------------------------------- */

.dl-answer {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 26px;
  margin-block: 8px 34px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-raised));
  border: 1px solid var(--accent-dim);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.dl-answer-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-answer-gw {
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
}
.dl-answer-when {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
  text-wrap: balance;
}
.dl-answer-local { font-size: .88rem; color: var(--text-muted); }
.dl-answer .countdown { margin-left: auto; }

@media (max-width: 720px) {
  .dl-answer { gap: 16px; padding: 18px; }
  .dl-answer .countdown { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   Latest review, on the dashboard
   -------------------------------------------------------------------------- */

.latest-note {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s;
}
.latest-note:hover { text-decoration: none; background: var(--bg-hover); }
.latest-note-body { min-width: 0; }
.latest-note-kicker {
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
}
.latest-note h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  margin: 3px 0 4px;
  color: var(--text);
}
.latest-note p { margin: 0; color: var(--text-muted); font-size: .92rem; max-width: 70ch; }
.latest-note-go {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 660px) {
  .latest-note { gap: 12px; }
  .latest-note-go { display: none; }
}