@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}

:root{
  --pl-purple:#37003c;
  --pl-green:#00ff85;
  --pl-cyan:#04f5ff;
  --pl-pink:#ff2882;
  --pl-gradient:linear-gradient(90deg,#04f5ff 0%,#00ff85 100%);
  --accent:#00ff85;
  --accent-bright:#00ff85;
  --on-accent:#37003c;
  --bg:#1f0024;
  --panel:#2b0031;
  --panel-2:#37003c;
  --line:#521a5b;
  --ink:#ffffff;
  --muted:#d0b6d6;
  --z-ucl:#04f5ff;
  --z-uel:#ff9f1c;
  --z-rel:#ff2882;
  --max:980px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;background:var(--bg);scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
a{color:var(--accent-bright);text-decoration:none}
a:hover{text-decoration:underline}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;gap:20px;min-height:62px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;flex:0 0 auto;line-height:0}
.brand img{width:auto;height:26px;display:block}
.site-nav{display:flex;gap:20px;flex-wrap:wrap}
.site-nav a{color:var(--muted);font-weight:600;font-size:14.5px}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--ink);text-decoration:none}

/* type */
h1{font-size:29px;line-height:1.2;letter-spacing:-.6px;margin:0 0 10px}
h2{font-size:18.5px;letter-spacing:-.3px;margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
h3{font-size:16.5px;margin:22px 0 8px}
p{margin:0 0 12px;color:var(--ink);max-width:68ch}
.lede{font-size:16.5px;color:var(--muted);margin-bottom:4px;max-width:66ch}
main{padding:28px 0 10px}
.updated{font-size:13px;color:var(--muted);margin-bottom:24px}

/* tables */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 14px;
  border:1px solid var(--line);border-radius:10px;
  scrollbar-width:thin
}
.table-scroll table{min-width:560px}
.table-scroll table td:first-child,.table-scroll table th:first-child{padding-left:14px}
.table-scroll table td:last-child,.table-scroll table th:last-child{padding-right:14px}
.table-scroll::-webkit-scrollbar{height:8px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
tbody tr:last-child td{border-bottom:0}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px;table-layout:auto}
caption{text-align:left;font-size:13px;color:var(--muted);padding-bottom:9px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
thead th{
  background:var(--panel-2);color:var(--muted);font-size:12px;
  text-transform:uppercase;letter-spacing:.6px;font-weight:700;
  white-space:nowrap;vertical-align:middle;
  border-bottom:2px solid var(--line)
}
tbody tr:nth-child(even){background:rgba(255,255,255,.022)}
tbody tr:hover{background:var(--panel-2)}
tbody td{vertical-align:middle}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pos{color:var(--muted);width:40px;text-align:center;font-variant-numeric:tabular-nums}
.club{font-weight:600;white-space:nowrap;min-width:130px}
.pts{font-weight:800;color:var(--accent-bright)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:13px;margin:16px 0}
.card{
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:16px 17px
}
.card h3{margin:0 0 5px;font-size:16px}
.card p{margin:0;font-size:14px;color:var(--muted)}
.card a{font-weight:700}

.channels{list-style:none;padding:0;margin:0 0 14px}
.channels li{
  padding:11px 0;border-bottom:1px solid var(--line);
  font-size:15px;color:var(--muted)
}
.channels li:last-child{border-bottom:0}
.channels a{font-weight:700}

/* faq */
details{border-bottom:1px solid var(--line);padding:13px 0}
summary{cursor:pointer;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ ";color:var(--accent)}
details[open] summary::before{content:"– "}
details p{margin:10px 0 2px;color:var(--muted);font-size:15px}

/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:52px;padding:26px 0 40px;background:var(--panel)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.site-foot p,.site-foot li{font-size:13.5px;color:var(--muted)}
.foot-links{list-style:none;display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-weight:600}

@media(max-width:620px){
  h1{font-size:25px}
  .site-head .wrap{height:auto;padding-top:11px;padding-bottom:11px;flex-direction:column;align-items:flex-start;gap:9px}
}

/* ---------- a11y ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--accent);color:var(--on-accent);font-weight:700;
  padding:10px 16px;border-radius:0 0 8px 0
}
.skip:focus{left:0;text-decoration:none}
:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:3px}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- error page ---------- */
.error-page{text-align:center;padding:64px 0 40px}
.error-page .code{
  font-size:64px;font-weight:800;color:var(--accent);
  line-height:1;letter-spacing:-2px;margin-bottom:10px
}
.error-page h1{font-size:24px}
.error-page p{color:var(--muted);max-width:460px;margin:0 auto 16px}

/* ---------- print ---------- */
@media print{
  .site-head,.site-foot,.skip,.cards,.cta-dock,.nav-toggle{display:none}
  body{background:#fff;color:#000;font-size:12pt}
  p,td,th,details p{color:#000}
  h2{border-color:#999}
  table{min-width:0}
  thead th{background:#eee;color:#000}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  details{border-color:#bbb}
  summary::before,details[open] summary::before{content:""}
}

/* ---------- floating CTA dock ---------- */
.cta-dock{
  position:fixed;z-index:40;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  animation:ctaIn .35s ease both .4s;
}
@keyframes ctaIn{
  from{opacity:0;transform:translate(-50%,14px)}
  to{opacity:1;transform:translateX(-50%)}
}

.watch-cta{
  display:inline-flex;align-items:center;gap:11px;
  height:54px;padding:0 28px;
  background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  color:var(--on-accent);
  font-weight:800;font-size:16.5px;letter-spacing:-.2px;white-space:nowrap;
  border-radius:999px;text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 2px rgba(0,255,133,.35),
             inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.watch-cta:hover,.watch-cta:focus-visible{
  text-decoration:none;filter:brightness(1.06);
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 38px rgba(0,0,0,.6),0 0 0 2px rgba(0,255,133,.7),
             inset 0 1px 0 rgba(255,255,255,.4)
}
.watch-cta .play{
  width:0;height:0;flex:0 0 auto;
  border-left:11px solid var(--on-accent);
  border-top:7px solid transparent;border-bottom:7px solid transparent
}

.cta-mini{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;flex:0 0 auto;
  background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:50%;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.cta-mini:hover,.cta-mini:focus-visible{
  background:var(--panel);border-color:var(--accent);
  transform:translateY(-3px)
}
.cta-mini svg{width:22px;height:22px;display:block}

.site-foot{padding-bottom:104px}

@media(max-width:620px){
  .watch-cta{
    height:50px;padding:0 22px;font-size:15.5px;
    max-width:calc(100vw - 104px);overflow:hidden;text-overflow:ellipsis
  }
  .cta-mini{width:50px;height:50px}
  .cta-dock{gap:8px}
}

/* ---------- mobile nav ---------- */
.nav-toggle{
  display:none;margin-left:auto;
  width:42px;height:42px;padding:0;
  background:transparent;border:1px solid var(--line);border-radius:9px;
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px
}
.nav-toggle span{
  display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:760px){
  .nav-toggle{display:flex}
  .site-head .wrap{
    flex-direction:row;align-items:center;gap:12px;
    height:auto;padding-top:11px;padding-bottom:11px;flex-wrap:wrap
  }
  .site-nav{
    display:none;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--line);margin-top:4px;padding-top:4px
  }
  .site-nav.is-open{display:flex}
  .site-nav a{padding:11px 2px;font-size:15px;border-bottom:1px solid var(--line)}
  .site-nav a:last-child{border-bottom:0}
}

@media(prefers-reduced-motion:reduce){
  .cta-dock{animation:none}
  .watch-cta,.cta-mini{transition:none}
  .watch-cta:hover,.watch-cta:focus-visible,
  .cta-mini:hover,.cta-mini:focus-visible{transform:none}
  .nav-toggle span{transition:none}
}

/* ---------- key facts panel ---------- */
.keyfacts{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;background:var(--panel);
  padding:14px 18px;margin:18px 0 6px
}
.keyfacts dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0}
.keyfacts dt{color:var(--muted);font-size:13.5px;font-weight:600;white-space:nowrap}
.keyfacts dd{margin:0;font-size:14.5px;font-weight:700;color:var(--ink)}

/* ---------- compact fact list ---------- */
ul.facts{list-style:none;padding:0;margin:0 0 12px}
ul.facts li{
  position:relative;padding:6px 0 6px 20px;
  font-size:14.8px;color:var(--ink);max-width:68ch
}
ul.facts li::before{
  content:"";position:absolute;left:4px;top:14px;
  width:6px;height:6px;border-radius:50%;background:var(--accent)
}
ul.facts strong{color:var(--ink)}

/* ---------- two-column prose on wide screens ---------- */
@media(min-width:900px){
  .split{display:grid;grid-template-columns:1fr 1fr;gap:8px 34px}
  .split p{margin-bottom:10px}
}

/* ---------- section rhythm ---------- */
main h2:first-of-type{margin-top:26px}
main > p + h2,main > .split + h2,main > ul.facts + h2,
main > .table-scroll + h2,main > figure + h2{margin-top:34px}

/* ---------- table of contents ---------- */
.toc{
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:13px 16px;margin:18px 0 8px
}
.toc p{
  margin:0 0 8px;font-size:12.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.7px
}
.toc ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;counter-reset:t}
.toc li{counter-increment:t;font-size:14.2px}
.toc li::before{content:counter(t) ". ";color:var(--muted)}
.toc a{font-weight:600}

/* anchored headings */
h2[id]{scroll-margin-top:86px}

/* ---------- figures / diagrams ---------- */
figure{margin:16px 0 18px}
figure svg{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:10px;background:var(--panel)
}
figcaption{
  margin-top:8px;font-size:13px;color:var(--muted);
  max-width:68ch;line-height:1.5
}
.dg-label{fill:var(--muted);font-size:11px;font-weight:600}
.dg-value{fill:var(--ink);font-size:13px;font-weight:700}
.dg-head{fill:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.6px}
.dg-line{stroke:var(--line);stroke-width:1}
.dg-accent{fill:var(--accent-bright)}

/* ---------- faq polish ---------- */
details{border-bottom:1px solid var(--line);padding:12px 0;transition:none}
summary{
  cursor:pointer;font-weight:600;list-style:none;
  display:flex;align-items:flex-start;gap:9px;font-size:15.2px
}
summary::-webkit-details-marker{display:none}
summary::before{
  content:"+";color:var(--accent);font-weight:800;
  width:14px;flex:0 0 auto;line-height:1.5
}
details[open] summary::before{content:"\2013"}
details[open] summary{color:var(--ink)}
details p{margin:9px 0 2px 23px;color:var(--muted);font-size:14.6px}

/* ---------- card polish ---------- */
.card{transition:border-color .16s ease,background .16s ease}
.card:hover{border-color:var(--accent);background:var(--panel-2)}
.cards{gap:12px}

/* ---------- match rows ---------- */
.match{
  display:flex;align-items:center;gap:14px;
  padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);margin-bottom:9px;flex-wrap:wrap
}
.match .time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent-bright);min-width:58px;font-size:15px}
.match .teams{flex:1;min-width:190px;font-weight:600}
.match .comp{font-size:12.5px;color:var(--muted)}
.match.is-live{border-color:rgba(255,40,130,.6);background:#3d0038}
.match.is-live .time{color:#ff6b6b}
.live-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:#d92b2b;color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.5px;padding:3px 9px;border-radius:999px;flex:0 0 auto
}
.live-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.live-badge::before{animation:none}}

.empty{
  border:1px dashed var(--line);border-radius:10px;background:var(--panel);
  padding:16px 17px;color:var(--muted);font-size:14.5px;margin-bottom:9px
}
.updated{font-size:13px;color:var(--muted);margin-bottom:20px}
.credit{margin:6px 0 0;font-size:12.5px;opacity:.85}
.watch-note{
  border-left:3px solid var(--accent);background:var(--panel);
  border-radius:0 8px 8px 0;padding:11px 15px;margin:14px 0 18px;
  font-size:14.5px;max-width:68ch
}

tr.zone-ucl td.pos{box-shadow:inset 3px 0 0 var(--z-ucl)}
tr.zone-uel td.pos{box-shadow:inset 3px 0 0 var(--z-uel)}
tr.zone-acl td.pos{box-shadow:inset 3px 0 0 var(--z-acl)}
tr.zone-rel td.pos{box-shadow:inset 3px 0 0 var(--z-rel)}

/* ---------- table polish ---------- */
th,td{padding:11px 12px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pts{font-weight:800;color:var(--accent-bright)}

/* two-column comparison tables read better centred on the data */
.table-scroll table th:not(.num):not(.pos),
.table-scroll table td:not(.num):not(.pos){text-align:left}

/* ---------- keyfacts on small screens ---------- */
@media(max-width:560px){
  .keyfacts dl{grid-template-columns:1fr;gap:2px 0}
  .keyfacts dt{margin-top:8px}
  .keyfacts dd{margin-bottom:4px}
}

/* ---------- legend wraps cleanly ---------- */
.legend{gap:10px 18px}
@media(max-width:560px){
  .legend{flex-direction:column;gap:7px}
}

/* ---------- match rows on narrow screens ---------- */
@media(max-width:560px){
  .match{gap:9px;padding:11px 13px}
  .match .time{min-width:52px;font-size:14.5px}
  .match .teams{min-width:0;flex:1 1 100%;order:2}
  .match .comp{order:3;font-size:12px}
  .live-badge{order:4}
}

/* ---------- tighter tables on phones ---------- */
@media(max-width:620px){
  table{font-size:13.6px;min-width:0}
  .table-scroll table{min-width:0}
  th,td{padding:9px 7px}
  .club{min-width:0;white-space:normal}
  .pos{width:26px}
  thead th{font-size:11px;letter-spacing:.4px}
}

/* ---------- long words never break layout ---------- */
h1,h2,h3,p,li,td,dd{overflow-wrap:break-word}

/* ---------- consistent focus ring on interactive rows ---------- */
.card:focus-within{border-color:var(--accent)}

/* ---------- accessible CTA text on this league's accent ---------- */
.watch-cta{color:var(--on-accent)}
.watch-cta .play{border-left-color:var(--on-accent)}

/* ---------- collapsible sections ---------- */
details.acc{
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
  margin:0 0 10px;padding:0;overflow:hidden
}
details.acc>summary{
  padding:13px 16px;font-size:16px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none
}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::before{
  content:"";width:0;height:0;flex:0 0 auto;
  border-left:7px solid var(--accent);
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  transition:transform .18s ease
}
details.acc[open]>summary::before{transform:rotate(90deg)}
details.acc>summary:hover{background:var(--panel-2)}
details.acc .table-scroll{margin:0;border:0;border-top:1px solid var(--line);border-radius:0}
details.acc>p{padding:0 16px 14px;margin:0}
details.acc>p:first-of-type{padding-top:2px}
@media(prefers-reduced-motion:reduce){details.acc>summary::before{transition:none}}

/* ---------- league badge in the header ---------- */
.brand{gap:10px}
.brand-liga{
  font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--accent-bright);border:1px solid var(--line);border-radius:999px;
  padding:3px 9px;white-space:nowrap;line-height:1.4
}
@media(max-width:760px){.brand-liga{display:none}}

/* ---------- Premier League identity: purple bar, cyan-green gradient, pink live ---------- */
.site-head{
  background:var(--pl-purple);
  border-bottom:3px solid transparent;border-image:var(--pl-gradient) 1
}
.brand-liga{color:var(--pl-purple);background:var(--pl-gradient);border:0}
.watch-cta{background:var(--pl-gradient)}
.live-badge{background:#e90052}
.match.is-live .time{color:var(--pl-pink)}
.error-page .code{background:var(--pl-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- standings legend ---------- */
.legend{list-style:none;display:flex;flex-wrap:wrap;padding:0;margin:4px 0 16px;font-size:13.5px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.legend .l-ucl{background:var(--z-ucl)}
.legend .l-uel{background:var(--z-uel)}
.legend .l-rel{background:var(--z-rel)}

/* ---------- updater match rows ---------- */
.match-day{
  font-size:12.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;margin:22px 0 9px
}
.match-day:first-child{margin-top:4px}
.match .vs{color:var(--muted);font-weight:500;margin:0 5px}
.match .teams strong{
  display:inline-block;margin:0 7px;padding:1px 8px;border-radius:6px;
  background:var(--panel-2);color:var(--accent-bright);font-variant-numeric:tabular-nums
}