/* Mobile-first. Type scale: 13 (smallest, tags/meta) · 14 (secondary) · 16 (body) · 18+ (headings/numbers). Nothing below 13px. */
:root{
  --turf:#0E3A2C; --chalk:#EEF2EA; --light:#FFCF33; --signal:#E8352B;
  /* night (default) */
  --bg:#0E3A2C; --card:#174A39; --card-2:#1F5944; --ink:#EEF2EA; --sub:#A3BAAD; --hi:#FFCF33; --line:rgba(238,242,234,.12);
  --now:#FFCF33; --now-glow:rgba(255,207,51,.6); --pitch:linear-gradient(#1b5a43,#0f3d2e); --shadow:0 10px 30px rgba(0,0,0,.18);
  --display:"ZCOOL QingKe HuangYou","Noto Sans SC",sans-serif;
  --num:"Barlow Condensed","Noto Sans SC",sans-serif;
  --radius:12px;
}
@media (prefers-color-scheme:light){:root{
  --bg:#E6EEDF; --card:#F6F9F3; --card-2:#E6EEDF; --ink:#0E3A2C; --sub:#4A6155; --hi:#0E3A2C; --line:rgba(14,58,44,.13);
  --now:#0E3A2C; --now-glow:transparent; --pitch:linear-gradient(#4a9a63,#2f7a4c); --shadow:0 6px 20px rgba(14,58,44,.07);}}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{color:var(--ink);background:var(--bg);font:16px/1.6 "Noto Sans SC",-apple-system,"PingFang SC",sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
[hidden]{display:none!important}
button:disabled{cursor:default;opacity:.55}
.wrap{max-width:1280px;margin:auto;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.num{font-family:var(--num);font-style:italic;font-variant-numeric:tabular-nums}
.muted{color:var(--sub);font-size:14px}

/* header */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;height:56px}
.logo{flex:none;font-family:var(--display);font-size:26px;line-height:1;color:var(--hi);letter-spacing:.04em}
nav{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;align-self:stretch}
nav::-webkit-scrollbar{display:none}
nav button{position:relative;flex:none;padding:0 10px;font-size:16px;color:var(--sub);white-space:nowrap}
nav button[aria-pressed=true]{color:var(--ink);font-weight:700}
nav button[aria-pressed=true]::after{content:"";position:absolute;left:8px;right:8px;bottom:8px;height:4px;border-radius:2px;background:var(--light)}
.back{flex:1;display:flex;align-items:center;min-height:44px;font-size:16px;color:var(--sub)}
@media (hover:hover){nav button:hover{color:var(--ink)}.back:hover{color:var(--hi)}}

/* home: schedule */
.sched{margin:8px 0 16px}
.sched #sourceState{text-align:right;font-size:13px;margin-bottom:4px}
.group-title{display:flex;align-items:baseline;gap:8px;margin:20px 0 4px;font-family:var(--display);font-weight:400;font-size:22px;color:var(--hi);scroll-margin-top:72px}
.group-title:first-child{margin-top:0}
.group-title small{font-size:16px;color:var(--sub)}
.group-title.is-live,.group-title.is-live small{color:var(--signal)}
.rows{display:grid;gap:6px}
.row.day{display:flex;align-items:baseline;gap:8px;margin:10px 0 6px;color:var(--sub)}
.row.day .t{font-family:var(--display);font-size:16px}
.row.day .rail{display:none}
.row.day .who{font-size:14px}

.row.match-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:center;gap:10px 8px;padding:10px 14px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;transition:background .15s}
.row.match-row:active{background:var(--card-2)}
.match-meta{grid-column:1/3;grid-row:1;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.match-row .t{flex:none;font-size:18px;font-weight:800;line-height:1;white-space:nowrap}
.match-info{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;color:var(--sub);font-size:13px;line-height:1.4;white-space:nowrap}
.match-info>*+*::before{content:"·";margin-right:6px;color:var(--sub);font-weight:400}
.tag{display:inline-block;color:var(--ink);font-size:13px;font-weight:500}
.tag.hot{color:var(--signal)}
.match-row .act{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;min-width:0;align-self:center}
.match-row .team{grid-row:2;display:flex;align-items:center;gap:6px;min-width:0;font-size:16px;font-weight:700;line-height:1.35}
.match-row .team span{min-width:0;overflow-wrap:anywhere;text-wrap:balance}
.match-row .team.home{grid-column:1;justify-content:flex-end;text-align:right}
.match-row .team.away{grid-column:3;justify-content:flex-start;text-align:left}
.match-score{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;line-height:1.2;white-space:nowrap;font-size:13px;font-weight:500;color:var(--sub)}
.match-score small{margin-top:2px;font-size:13px;color:var(--signal)}
.match-score .num{font-size:22px;font-weight:800;color:var(--hi)}
.match-row.is-live .t{color:var(--hi)}
.match-row.is-live{box-shadow:inset 3px 0 0 var(--signal)}
.team-logo{width:22px;height:22px;object-fit:contain;flex:none}

/* a quiet text link; ::after stretches it over the whole card so the card is the tap target */
.watch{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;color:var(--hi);font-size:14px;font-weight:700;white-space:nowrap}
.watch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.match-row.is-live .watch{color:var(--signal)}
.match-row.is-soon .watch{color:var(--sub);font-weight:500}
@media (hover:hover){.row.match-row:hover{background:var(--card-2)}}

/* now line */
.now{display:flex;align-items:center;gap:10px;margin:8px 0}
.now .t{flex:none;text-align:right;font-size:18px;font-weight:800;line-height:1.1;color:var(--now)}
.now .t small{display:block;font:500 13px/1.4 "Noto Sans SC",sans-serif}
.now .ln{flex:1;height:3px;border-radius:2px;background:var(--now);box-shadow:0 0 12px var(--now-glow);animation:breathe 3s ease-in-out infinite;position:relative}
.now .ln::before{content:"";position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--now)}
@keyframes breathe{50%{box-shadow:0 0 22px var(--now-glow)}}
.empty{padding:48px 0;text-align:center;color:var(--sub)}

/* match page */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.match-title{margin-top:20px;font-family:var(--display);font-size:clamp(22px,5vw,30px);font-weight:400;line-height:1.3}
main > #sourceState{margin-top:8px;text-align:right;font-size:13px}
.live{display:grid;gap:16px;align-items:start;margin-top:4px}
.stage,.side{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stage{display:flex;flex-direction:column}

.screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(255,240,190,.2),transparent 70%),var(--pitch)}
.screen::before{content:"";position:absolute;inset:7% 5%;border:2px solid rgba(238,242,234,.2);pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 0 calc(12% - 1px),rgba(238,242,234,.2) calc(12% - 1px) 12%,transparent 12%),
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(238,242,234,.2) 0 calc(50% + 1px),transparent 0)}
.screen video,.screen iframe{position:absolute;inset:0;width:100%;height:100%;background:#000;display:none;border:0}
.screen.on video,.screen.embedded iframe{display:block}
.screen.on .cover,.screen.embedded .cover,.screen.on::before,.screen.embedded::before{display:none}
.screen.empty-screen{aspect-ratio:auto;min-height:270px}
.cover{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding:0 4%;color:var(--chalk)}
.cover .team{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;width:100%;text-align:center;font-family:var(--display);font-size:clamp(20px,5vw,48px);line-height:1.15;overflow-wrap:anywhere;text-shadow:0 3px 18px rgba(0,0,0,.35)}
.cover .team img{width:clamp(40px,7vw,68px);height:clamp(40px,7vw,68px);object-fit:contain;filter:drop-shadow(0 4px 9px rgba(0,0,0,.2))}
.cover.solo{grid-template-columns:1fr;justify-items:center;gap:16px}
.cover.solo .team{font-size:clamp(30px,8vw,72px)}
.cover.empty-cover{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:24px 6%}
.play{width:clamp(60px,9vw,80px);aspect-ratio:1;border-radius:50%;background:var(--light);color:var(--turf);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(255,207,51,.18),0 8px 24px rgba(0,0,0,.3);transition:transform .15s}
.play:active{transform:scale(.95)}
@media (hover:hover){.play:hover{transform:scale(1.06)}}
.play svg{width:32%;margin-left:8%}
.cover .note{max-width:11em;padding:10px 12px;border-radius:10px;background:rgba(6,32,22,.75);border:1px solid rgba(255,255,255,.2);color:var(--chalk);font-size:14px;line-height:1.5;text-align:center}
.cover button.note,.cover a.note{color:var(--light);font-weight:700}

/* fixture card above the screen, laid out like a homepage match card */
.bug{order:-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:12px 16px 14px}
.bug .lg{grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sub);font-size:13px;font-weight:500}
.bug .min{grid-row:1;display:flex;align-items:center;gap:6px;color:var(--signal);font-size:16px;font-weight:700}
.bug .tm{grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px 14px;text-align:center;font-size:18px;font-weight:700;line-height:1.35}
.bug .tm:has(i){display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.bug .tm>span{min-width:0;overflow-wrap:anywhere;text-wrap:balance}
.bug .tm>span:first-child{text-align:right}
.bug .tm>span:last-child{text-align:left}
.bug .tm i{font-style:normal;color:var(--sub);font-size:14px;font-weight:500}
.bug .tm i.score{color:var(--hi);font-size:24px;font-weight:800;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none}
.dot.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,53,43,.5)}100%{box-shadow:0 0 0 7px transparent}}

/* source picker */
.source-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 16px 0;font-size:14px;font-weight:700;color:var(--sub)}
.source-heading>span:last-child{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:0 16px;font-weight:500}
.source-heading button,.source-heading a{display:inline-flex;align-items:center;min-height:44px;color:var(--hi);font-size:14px}
.sources{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 16px 14px;color:var(--sub);font-size:14px;line-height:1.6}
.sources button{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:48px;padding:6px 14px;border:1px solid transparent;border-radius:10px;background:var(--card-2);color:var(--ink);font-size:15px;font-weight:600;line-height:1.35;text-align:left}
.sources button small{font-size:13px;font-weight:400;color:var(--sub)}
.sources button[aria-pressed=true]{border-color:var(--signal);color:var(--signal)}
.sources button.unavailable{opacity:.6}
.sources button.commentary{min-height:44px;font-size:14px;font-weight:500;background:transparent;border-color:var(--line)}
.sources details{flex-basis:100%;min-width:0}
.sources summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:14px;color:var(--sub)}
.source-backups{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
@media (hover:hover){.sources button:hover{border-color:var(--sub)}}
.player-state{padding:10px 16px 12px;border-top:1px solid var(--line);font-size:14px;color:var(--sub);line-height:1.6}
.player-state a{color:var(--hi);text-decoration:underline;text-underline-offset:3px;margin-left:8px;white-space:nowrap}
.alternative{display:flex;align-items:center;min-height:44px;color:var(--hi);font-weight:700;text-align:left}
.stage.is-empty .bug,.stage.is-empty .source-heading,.stage.is-empty .sources,.stage.is-empty .player-state{display:none}

/* other live matches (desktop sidebar; the schedule covers this on phones) */
.side{display:none;padding:16px;flex-direction:column}
.side h2{flex:none;display:flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:400;font-size:22px;color:var(--signal)}
.side h2 small{margin-left:auto;font:14px/1.5 "Noto Sans SC",sans-serif;color:var(--sub)}
.side-note{font-size:13px;color:var(--sub);margin:2px 0 10px}
.side #side{min-height:0;overflow-y:auto;scrollbar-width:thin}
.side button{position:relative;width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:12px 8px 12px 14px;border-top:1px solid var(--line);text-align:left}
.side button::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:transparent}
.side button[aria-current=true]{background:color-mix(in srgb,var(--hi) 8%,transparent)}
.side button[aria-current=true]::before{background:var(--signal)}
.side b{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:15px;line-height:1.4}
.side b i{font-style:normal;color:var(--sub);font-weight:400}
.side b i.score{color:var(--hi);font-weight:800;font-family:var(--num);font-size:1.15em}
.side .team-logo{display:none}
.side small{grid-column:1;color:var(--sub);font-size:13px}
.side small .tag{margin-right:6px;color:var(--sub)}
.side .health{grid-column:2;grid-row:1/3;align-self:center;color:var(--sub);font-size:13px;white-space:nowrap}
.live-item[data-state=playable] .health{color:var(--hi);font-weight:700}
.live-item[data-state=unavailable]{opacity:.65}
.side details{border-top:1px solid var(--line);margin-top:8px}
.side summary{cursor:pointer;padding:12px 0;color:var(--sub);font-size:14px}
@media (hover:hover){.side button:hover b{color:var(--hi)}}

/* ads & footer */
.ad{margin:16px 0;border-radius:var(--radius);overflow:hidden;text-align:center;line-height:0}
.ad:empty{display:none}
.ad img,.ad iframe{max-width:100%;height:auto;border:0}
main.wrap{padding-bottom:32px}
footer{padding:24px 16px calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--sub);font-size:14px}
.site-addresses{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:8px}
.site-addresses a{display:inline-flex;align-items:center;min-height:36px;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.site-addresses a:hover{color:var(--hi)}}

/* small phones */
@media (max-width:359px){
  .bar{gap:8px}
  nav button{padding:0 8px;font-size:15px}
  .row.match-row{grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);padding:12px 10px}
  .match-row .team{font-size:15px;gap:6px}
  .match-row .team-logo{width:20px;height:20px}
}

/* tablet & desktop */
@media (min-width:801px){
  .wrap{padding:0 32px}
  .bar{gap:28px;height:64px}
  .logo{font-size:30px}
  nav{gap:12px}
  .row.match-row{grid-template-columns:minmax(220px,1fr) minmax(0,1fr) 90px minmax(0,1fr) minmax(220px,1fr);gap:12px;padding:10px 16px;min-height:60px}
  .match-meta{grid-column:1;flex-wrap:nowrap;gap:12px}
  .match-row .t{font-size:24px}
  .match-info{flex-wrap:nowrap;white-space:nowrap}
  .match-row .team{grid-row:1;font-size:17px;gap:8px}
  .match-row .team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .match-row .team.home{grid-column:2}
  .match-score{grid-row:1;grid-column:3}
  .match-row .team.away{grid-column:4}
  .match-row .act{grid-column:5;grid-row:1}
  .match-score .num{font-size:24px}
  .team-logo{width:26px;height:26px}
  .now .t{width:220px;font-size:24px}
}
@media (min-width:920px){
  .live{grid-template-columns:minmax(0,1fr) 340px;align-items:stretch}
  .side{display:flex;contain:size}
  .side #side{flex:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}