:root{
  color-scheme:light;                     /* never flip to the phone's dark mode */
  --bg:#eef1f6;                           /* page */
  --card:#ffffff;                         /* panels, rows, result cards */
  --card-2:#f6f8fb;                       /* zebra striping */
  --ink:#0d1f33;                          /* primary text */
  --ink-soft:#5b6b7d;                     /* secondary text */
  --line:#dde3ec;                         /* borders */
  --win:#18c37d; --loss:#f5205f; --draw:#f0b429;
  --yellow:#f2c200; --blue:#2f7ff0;
  --pad:clamp(12px,3.5vw,22px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Barlow Condensed",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.35; overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
img{max-width:100%;display:block}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:20; background:var(--card);
  border-bottom:1px solid var(--line); box-shadow:0 2px 10px rgba(13,31,51,.06);
  padding:calc(var(--pad)*.7) var(--pad) 0;
  padding-top:calc(env(safe-area-inset-top) + var(--pad)*.7);
}
.brand{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.brand h1{
  font-size:clamp(1.35rem,6vw,2rem); font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--blue); line-height:1;
}
.brand span{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.gw-pill{
  margin-left:auto; background:var(--ink); color:#fff;
  font-weight:800; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.28em .7em; border-radius:99px; white-space:nowrap;
}
nav{display:flex;gap:.15rem;margin-top:calc(var(--pad)*.7);overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{
  flex:1 1 0; min-width:0; background:none; border:0; color:var(--ink-soft);
  font:inherit; font-weight:700; font-size:clamp(.56rem,2.4vw,.82rem);
  letter-spacing:0; white-space:nowrap;
  text-transform:uppercase; padding:.85em .15em; cursor:pointer;
  border-bottom:3px solid transparent; transition:color .15s,border-color .15s;
}
nav button[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue)}
@media(min-width:520px){nav button{letter-spacing:.12em;padding-left:.5em;padding-right:.5em}}

main{padding:var(--pad);max-width:900px;margin:0 auto}
.demo-note{
  background:#fff8dd; border:1px solid #e8cf6a; color:#7a5c00;
  font-size:.78rem; letter-spacing:.04em;
  padding:.6em .8em; border-radius:8px; margin-bottom:var(--pad);
}

/* ---------- gameweek switcher ---------- */
.gw-nav{display:flex;align-items:center;gap:.5rem;margin-bottom:var(--pad)}
.gw-nav button{
  width:2.6rem;height:2.6rem;flex:none;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:1.1rem;font-weight:700;
  border-radius:8px;cursor:pointer
}
.gw-nav button:disabled{opacity:.35;cursor:default}
.gw-nav select{
  flex:1;background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.7em;font:inherit;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;-webkit-appearance:none;appearance:none;
}

/* ---------- fixtures ---------- */
.fixture{
  background:var(--card);border-radius:10px;margin-bottom:.65rem;overflow:hidden;
  display:grid;grid-template-columns:40px 1fr auto 1fr 40px;align-items:center;
  gap:.4rem;padding:.6rem .5rem;
  border:1px solid var(--line);border-left:4px solid var(--blue);
  box-shadow:0 1px 3px rgba(13,31,51,.06);
}
.fixture .crest{width:40px;height:40px;object-fit:contain;border-radius:6px;background:#fff}
.fixture .side{min-width:0}
.fixture .tname{
  font-weight:800;font-size:clamp(.7rem,2.9vw,1rem);letter-spacing:.01em;
  text-transform:uppercase;line-height:1.15;color:var(--ink);
  overflow-wrap:break-word;hyphens:auto;
}
.fixture .side.away{text-align:right}
.fixture .rank{
  display:flex;flex-wrap:wrap;gap:.15rem .45rem;margin-top:.2rem;
  font-size:.56rem;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase;
}
.fixture .rank span{white-space:nowrap}
.fixture .side.away .rank{justify-content:flex-end}
.fixture .rank b{color:var(--ink);font-weight:800;font-size:.66rem}
.fixture .v{font-weight:800;color:var(--blue);font-size:.9rem;padding:0}

/* ---------- results ---------- */
.result{
  background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:.65rem;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:.5rem;padding:.7rem .5rem;color:var(--ink);
  box-shadow:0 1px 3px rgba(13,31,51,.06);
}
/* badge sits centred directly above the team name */
.result .side{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:0}
.result .crest{width:52px;height:52px;object-fit:contain}
.result .tname{
  font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;line-height:1.2;
  overflow-wrap:break-word;hyphens:auto;
}
.result .score{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-weight:800;font-size:clamp(1.5rem,7vw,2.1rem);letter-spacing:.02em;
}
.result .score .dot{color:#b6c1cf;font-size:.7em}
.result .score .w{color:var(--win)}
.result .score .d{color:var(--draw)}
.result .score .l{color:#a9b5c3}

/* ---------- log ---------- */
.log-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;border:1px solid var(--line);background:var(--card)}
table{border-collapse:collapse;width:100%;background:var(--card);font-variant-numeric:tabular-nums}
thead th{
  background:var(--blue);color:#fff;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.7em .35em;font-weight:800;position:sticky;top:0;
}
tbody td{padding:.55em .35em;text-align:center;border-top:1px solid var(--line);font-size:.85rem}
/* faint rules between column groups so the numbers stay scannable */
td.sep,th.sep{border-left:1px solid var(--line)}
thead th.sep{border-left-color:rgba(255,255,255,.28)}
tbody tr:nth-child(even){background:var(--card-2)}
td.pos{font-weight:800;font-size:1rem;width:2.2rem}
td.team{text-align:left;white-space:nowrap}
.team-cell{display:flex;align-items:center;gap:.5rem}
.team-cell img{width:26px;height:26px;object-fit:contain;border-radius:4px;background:#fff;flex:none}
.team-cell b{font-weight:700;font-size:.86rem}
.team-cell small{display:block;color:var(--ink-soft);font-size:.62rem;font-weight:400}
td.pts{font-weight:800;font-size:1.05rem;background:#e9eef7}
.mv{font-size:.66rem;font-weight:800;display:inline-block;min-width:1.6rem}
.mv.up{color:#0a9e63} .mv.down{color:var(--loss)} .mv.same{color:#9aa8b8}
.form{display:flex;gap:2px;justify-content:center}
/* the form strip scrolls sideways on narrow screens so the badges can breathe */
td.formcell{padding-left:.25em;padding-right:.25em}
.form::-webkit-scrollbar{display:none}
.form i{
  font-style:normal;width:1.35rem;height:1.35rem;line-height:1.35rem;
  font-size:.68rem;font-weight:800;border-radius:3px;color:#fff;
}
.form i.W{background:var(--win)} .form i.L{background:var(--loss)} .form i.D{background:var(--draw);color:#4a3600}
.empty{text-align:center;color:var(--ink-soft);padding:3rem 1rem;font-size:.9rem;letter-spacing:.05em}
footer{padding:var(--pad);text-align:center;color:var(--ink-soft);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}

/* On phones, drop the columns you can live without so Pts and Form stay visible. */
.inpos{display:none}
/* Phones: every column stays on screen — shrink, don't hide. */
@media(max-width:639px){
  thead th{padding:.6em .1em;letter-spacing:0;font-size:.57rem}
  tbody td{padding:.48em .1em;font-size:.75rem}
  td.pos{width:1.4rem;font-size:.85rem}
  .mvcol{display:none}                 /* arrow moves inside the position cell */
  .inpos{display:block}
  .inpos .mv{min-width:0;font-size:.5rem;line-height:1}
  td.team{white-space:normal}
  .team-cell{gap:.3rem}
  .team-cell img{width:36px;height:36px;border-radius:5px}
  td.formcell{width:4.2rem;max-width:4.2rem}
  .formcell .form{
    overflow-x:auto;scrollbar-width:none;justify-content:flex-start;
    flex-wrap:nowrap;scroll-snap-type:x proximity;
    /* soft fade on the right edge to show there is more to swipe to */
    -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 78%,transparent 100%);
  }
  .formcell .form.at-end{-webkit-mask-image:none;mask-image:none}
  .formcell .form i{flex:none;scroll-snap-align:start}
  .team-cell b{font-size:.74rem;line-height:1.15;display:block}
  .team-cell small{font-size:.58rem;line-height:1.15}
  td.pts{font-size:.92rem}
  .form{gap:1px}
  .form i{width:1.15rem;height:1.15rem;line-height:1.15rem;font-size:.6rem;border-radius:3px}
  tbody td.wdl,tbody td.pts{min-width:1.1rem}
}
@media(min-width:640px){
  .fixture{grid-template-columns:56px 1fr auto 1fr 56px;padding:.75rem}
  .fixture .crest{width:56px;height:56px}
  .result{padding:.9rem .7rem}
  .result .crest{width:64px;height:64px}
  .result .tname{font-size:.7rem}
  .results-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 .65rem}
}

/* ---------- scorecard ---------- */
.sc-pick{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--pad)}
.sc-pick label{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sc-pick select{
  flex:1;background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.7em;font:inherit;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;-webkit-appearance:none;appearance:none;
}
.sc-hero{
  display:flex;align-items:center;gap:.9rem;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:10px;padding:.9rem;margin-bottom:.65rem;
  box-shadow:0 1px 3px rgba(13,31,51,.06);
}
.sc-hero img{width:76px;height:76px;object-fit:contain;flex:none;border-radius:8px}
.sc-hero h2{font-size:clamp(1.05rem,4.6vw,1.5rem);font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.sc-hero p{font-size:.78rem;color:var(--ink-soft);margin-top:.15rem}

.sc-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.65rem;
}
.sc-stat{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:.55rem .3rem;text-align:center;
}
.sc-stat span{
  display:block;font-size:.52rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.2;min-height:2.1em;
}
.sc-stat b{display:block;font-size:1.15rem;font-weight:800;margin-top:.15rem}

.sc-table{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;margin-bottom:.65rem;
}
.sc-table table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sc-table thead th{
  background:var(--blue);color:#fff;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.6em .4em;font-weight:800;text-align:center;
}
.sc-table thead th:first-child{text-align:left}
.sc-table td,.sc-table th[scope="row"]{border-top:1px solid var(--line);padding:.35em .4em;font-size:.78rem}
.sc-opp{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:.72rem;text-align:left}
.sc-opp img{width:24px;height:24px;object-fit:contain;flex:none;border-radius:4px}
.sc-cell{text-align:center;width:5.4rem}
.sc-cell span{display:block;font-weight:800;font-size:.85rem}
.sc-cell small{display:block;font-size:.52rem;letter-spacing:.06em;opacity:.65;text-transform:uppercase}
.sc-w{background:#d4f5e4;color:#0a6b44}
.sc-l{background:#ffd9e4;color:#a3113f}
.sc-d{background:#fdeec2;color:#7a5c00}
.sc-none{background:var(--card-2);color:var(--ink-soft)}

.sc-summary th[scope="row"]{
  text-align:left;font-size:.72rem;font-weight:700;background:var(--card-2);
}
.sc-summary th[scope="row"] small{display:block;font-weight:400;font-size:.56rem;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase}
.sc-summary td{text-align:center;font-weight:800;width:5.4rem}

@media(max-width:479px){
  .sc-stats{grid-template-columns:repeat(3,1fr)}
  .sc-hero img{width:62px;height:62px}
  .sc-cell{width:4.6rem}
  .sc-summary td{width:4.6rem}
}
@media(min-width:640px){
  .sc-hero img{width:96px;height:96px}
  .sc-stats{grid-template-columns:repeat(8,1fr)}
  .sc-opp{font-size:.82rem}
  .sc-table td,.sc-table th[scope="row"]{padding:.45em .55em}
}

/* ---------- awards ---------- */
.aw-head{margin:0 0 .6rem}
.aw-head h2{font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.aw-head p{font-size:.72rem;color:var(--ink-soft);margin-top:.25rem;line-height:1.4}
.aw-head:not(:first-child){margin-top:1.4rem}

.aw-team{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:.76rem}
.aw-team img{width:26px;height:26px;object-fit:contain;flex:none;border-radius:4px}
.aw-n{text-align:center;font-weight:800;font-size:1rem;width:3.4rem}
.aw-mvp{color:#0a6b44;background:#eafaf2}
.aw-bob{color:#a3113f;background:#fff0f4}

.aw-week{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin-bottom:.7rem;box-shadow:0 1px 3px rgba(13,31,51,.07);
}
.aw-gw{
  background:var(--ink);color:#fff;text-align:center;
  font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  padding:.6em .9em;
}
.aw-body{display:grid;grid-template-columns:1fr 1fr}
.aw-award{padding:.8rem .6rem 1rem;text-align:center}
.aw-award.mvp{background:linear-gradient(180deg,#eafaf2,#fff 70%)}
.aw-award.bob{background:linear-gradient(180deg,#fff0f4,#fff 70%);border-left:1px solid var(--line)}

.aw-label{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;margin-bottom:.7rem;
}
.aw-label span{font-size:.95rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.aw-label b{font-size:2.1rem;font-weight:800;line-height:1}
.aw-award.mvp .aw-label span{color:#0a6b44}
.aw-award.mvp .aw-label b{color:#0a6b44}
.aw-award.bob .aw-label span{color:#a3113f}
.aw-award.bob .aw-label b{color:#a3113f}

.aw-wins{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.aw-win{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:6rem}
.aw-win img{
  width:78px;height:78px;object-fit:contain;background:#fff;border-radius:14px;
  padding:3px;box-shadow:0 2px 6px rgba(13,31,51,.14);
}
.aw-award.mvp .aw-win img{border:2px solid var(--win)}
.aw-award.bob .aw-win img{border:2px solid var(--loss)}
.aw-win figcaption{
  font-size:.6rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  line-height:1.15;color:var(--ink);overflow-wrap:break-word;hyphens:auto;
}

@media(min-width:640px){
  .aw-win{width:7.2rem}
  .aw-win img{width:100px;height:100px}
  .aw-win figcaption{font-size:.72rem}
  .aw-label span{font-size:1.1rem}
  .aw-label b{font-size:2.7rem}
  .aw-gw{font-size:.82rem}
}

/* season records panel — same card as a week, but the label wraps to two lines */
.aw-records{margin-bottom:1rem}
.aw-records .aw-label{flex-direction:column;align-items:center;gap:.15rem}
.aw-records .aw-label span{font-size:.72rem;letter-spacing:.12em;line-height:1.2}
.aw-records .aw-label b{font-size:2.4rem}
.aw-win figcaption small{
  display:block;font-size:.54rem;font-weight:700;letter-spacing:.08em;
  color:var(--ink-soft);margin-top:.1rem;
}
@media(min-width:640px){
  .aw-records .aw-label span{font-size:.86rem}
  .aw-records .aw-label b{font-size:3rem}
}

/* ---------- season stats ---------- */
.graph-pick{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.graph-pick label{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.graph-pick select{
  flex:1;background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.6em;font:inherit;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;-webkit-appearance:none;appearance:none;
}
.graph-wrap{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.5rem .3rem;box-shadow:0 1px 3px rgba(13,31,51,.06);
}
.graph-wrap svg{width:100%;height:300px;display:block;overflow:visible}
.g-grid{stroke:var(--line);stroke-width:1}
.g-axis{fill:var(--ink-soft);font-size:13px;font-weight:700}

/* every team is drawn; identity comes from the badge at the line's end,
   not from colour — 14 distinguishable hues do not exist. */
.g-line{
  fill:none;stroke:#b9c6d6;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  cursor:pointer;transition:stroke .15s,stroke-width .15s,opacity .15s;
}
.g-line:hover{stroke:#7d90a6}
.g-end{cursor:pointer;transition:opacity .15s}
.g-chip{cursor:pointer}

/* when one team is singled out, everything else recedes */
.graph-wrap:has(.g-line.on) .g-line:not(.on){stroke:#dfe6ee}
.graph-wrap:has(.g-end.on) .g-end:not(.on){opacity:.35}
.g-line.on{stroke:var(--blue);stroke-width:3.5}
.g-end.on{opacity:1}

.graph-legend{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem;margin-top:.6rem;
}
.g-chip{
  display:flex;align-items:center;gap:.4rem;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:.3rem .45rem;font:inherit;color:var(--ink);min-width:0;
}
.g-chip img{width:24px;height:24px;object-fit:contain;border-radius:4px;flex:none}
.g-chip span{
  font-size:.62rem;font-weight:700;line-height:1.15;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.g-chip em{font-style:normal;font-size:.7rem;font-weight:800;color:var(--ink-soft)}
.g-chip.on{border-color:var(--blue);background:#eef5ff}
.g-chip.on em{color:var(--blue)}

.graph-note,.graph-wait{font-size:.66rem;color:var(--ink-soft);margin:.5rem 0 0;letter-spacing:.03em}
.graph-note b{color:var(--ink)}

.ss-grid{display:grid;gap:.6rem;margin-top:1rem}
.ss-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1.1rem .9rem 1rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 1px 3px rgba(13,31,51,.06);
}
.ss-title{
  font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.3;
}
.ss-big{
  display:flex;flex-direction:column;align-items:center;gap:.05rem;
  font-size:2.6rem;font-weight:800;line-height:1;margin:.5rem 0 .9rem;
}
.ss-big small{
  font-size:.58rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.ss-big.win{color:#0a6b44}
.ss-big.loss{color:#a3113f}

/* the winning-run / losing-run holders */
.ss-holders{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.ss-holders figure{display:flex;flex-direction:column;align-items:center;gap:.45rem;width:6rem}
.ss-holders img{
  width:60px;height:60px;object-fit:contain;background:#fff;border-radius:12px;
  padding:3px;box-shadow:0 2px 6px rgba(13,31,51,.14);border:2px solid var(--line);
}
.ss-holders figcaption{
  font-size:.66rem;font-weight:800;text-transform:uppercase;line-height:1.2;
  overflow-wrap:break-word;hyphens:auto;
}
.ss-holders figcaption small{
  display:block;font-size:.56rem;font-weight:700;letter-spacing:.06em;
  color:var(--ink-soft);margin-top:.2rem;
}

/* the biggest-margin match-up */
.ss-match{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  gap:.7rem;width:100%;
}
.ss-match figure{display:flex;flex-direction:column;align-items:center;gap:.45rem;min-width:0}
.ss-match img{
  width:60px;height:60px;object-fit:contain;background:#fff;border-radius:12px;
  padding:3px;box-shadow:0 2px 6px rgba(13,31,51,.14);
}
.ss-match figure:first-child img{border:2px solid var(--win)}
.ss-match figure:last-child img{border:2px solid var(--line)}
.ss-match figcaption{
  font-size:.64rem;font-weight:800;text-transform:uppercase;line-height:1.2;
  overflow-wrap:break-word;hyphens:auto;
}
.ss-match b{
  display:flex;align-items:center;gap:.3rem;align-self:center;
  font-size:1.25rem;font-weight:800;white-space:nowrap;margin-top:.6rem;
}
.ss-match b .hi{color:#0a6b44}
.ss-match b .lo{color:var(--ink-soft)}
.ss-match b i{font-style:normal;color:#b6c1cf}
.ss-meta{
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.85rem;
}

@media(min-width:640px){
  .ss-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .ss-card{height:100%}
  .ss-holders img,.ss-match img{width:68px;height:68px}
  .graph-wrap svg{height:380px}
  .graph-legend{grid-template-columns:repeat(4,1fr)}
  .g-chip span{font-size:.7rem}
}