/* Para Football World — an archive of para football, timed to the second.
   The identity is a scrub bar, not a crest: every moment here is a point on a
   stream. Ink ground, teal for the played part and anything live, amber for a
   marker. The masthead stays ink in both themes so the brand holds steady. */
:root{
  /* the shell is the same in both themes: the masthead is the constant */
  --shell:#0a0f14; --shell-ink:#f2f7fa;
  /* The masthead's measured height, republished by mountChrome whenever it
     changes. Declared here so anything sticking below it has a real value
     before the script runs, rather than a dropped declaration. */
  --chrome-h:0px;
  --bg:#ffffff; --surface:#f3f6f9; --fg:#0c1116; --muted:#5a6b7c; --line:#dde5ec;
  --accent:#0a8f78; --accent-ink:#ffffff; --flag:#a9690a; --flag-ink:#1a1206;
  --display:"Barlow Condensed","Arial Narrow",Haettenschweiler,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  /* older rules still speak the first palette's names */
  --navy:var(--shell); --navy-ink:var(--shell-ink);
  --red:var(--accent); --red-ink:var(--accent-ink); --sky:var(--flag);
}
/* On ink, the teal and amber can run at full strength; on white they are
   darkened above so body text and small badges still carry their contrast. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0e141b; --surface:#151c24; --fg:#e6edf3; --muted:#8ca0b3; --line:#223040;
  --accent:#0fd6b0; --accent-ink:#04221b; --flag:#ffb020; color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0e141b; --surface:#151c24; --fg:#e6edf3; --muted:#8ca0b3; --line:#223040;
  --accent:#0fd6b0; --accent-ink:#04221b; --flag:#ffb020; color-scheme:dark; }

*{box-sizing:border-box}
html,body{margin:0;padding:0;overscroll-behavior-x:none}
body{overflow-x:clip}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--display);line-height:1.04;margin:0;text-wrap:balance}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.82rem}
.tag{display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;padding:3px 8px;border-radius:3px;background:var(--navy);color:var(--navy-ink)}
.tag.red{background:var(--red)}
.tag.sky{background:var(--sky);color:#0b1a2e}
.tag.ghost{background:transparent;color:var(--muted);border:1px dashed var(--muted)}

header{background:var(--shell);color:var(--shell-ink);border-bottom:1px solid #1b242e;
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;padding-block:13px;flex-wrap:wrap}
.brand{display:block;text-decoration:none;color:inherit;min-width:0}
.brand b{font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:.012em;
  text-transform:uppercase;display:block;position:relative;padding-bottom:10px;
  font-size:clamp(1.9rem, 1.15rem + 1.9vw, 2.45rem)}
/* the scrub bar: played part solid, the rest dim, a marker at the playhead */
.brand b::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:2px;
  background:
    radial-gradient(circle at 64% 50%, var(--flag) 0 3.1px, transparent 3.6px),
    linear-gradient(90deg, var(--accent) 0 64%, #27323e 64% 100%)}
.brand small{display:block;margin-top:7px;font-size:.7rem;color:#9fb1c2;letter-spacing:.07em;text-transform:uppercase}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav a{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding:6px 11px;border-radius:4px;font-size:1.02rem}
nav a:hover{background:rgba(255,255,255,.1)}
nav a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
nav a:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--shell)}

section{padding-block:44px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sec-head h2{font-size:2.3rem;font-weight:800;text-transform:uppercase}
.sec-head h2::before{content:"";display:inline-block;width:9px;height:.78em;background:var(--red);margin-inline-end:11px;vertical-align:-.03em}
.sec-head p{margin:0;color:var(--muted);max-width:42rem}

.btn{display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;padding:10px 18px;border-radius:4px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-red{background:var(--red);color:var(--red-ink)}
.btn-ghost{border-color:currentColor;background:transparent}

/* clip grid */
.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:14px}
/* the teams list has one box, not three, so let it run the full width */
.filters.teamfind{grid-template-columns:1fr}
.filters input,.filters select{width:100%;font:inherit;font-size:.95rem;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--fg);min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.chip{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.86rem;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--navy-ink);border-color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:18px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:7px;overflow:hidden;display:flex;flex-direction:column;text-align:start;padding:0;color:inherit;cursor:pointer;font:inherit;min-width:0}
.card:hover{border-color:var(--red)}
.shot{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--navy) center/cover no-repeat;display:flex;align-items:flex-end;padding:10px}
.shot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,20,0) 45%,rgba(10,15,20,.85) 100%)}
.shot::after{content:"";position:absolute;inset-inline-end:10px;top:10px;width:38px;height:38px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/20px no-repeat}
.stamp{position:relative;z-index:1;color:#fff;font-family:var(--display);font-weight:800;font-size:1.55rem;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.stamp small{display:block;font-family:var(--body);font-weight:500;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;opacity:.92}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.card h3{font-size:1.22rem;font-weight:700}
.card .who{font-weight:600}
.card .meta{font-size:.82rem;color:var(--muted)}
.card .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.empty{padding:30px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:6px;grid-column:1/-1}

/* overlay player */
.ovl{position:fixed;inset:0;z-index:100;background:rgba(5,12,24,.9);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-left,0px))}
.ovl[hidden]{display:none!important}
.ovl .panel{width:min(980px,100%);background:#06182e;border-radius:8px;overflow:hidden;color:#fff}
.ovl .frame{position:relative;aspect-ratio:16/9;background:#000}
.ovl iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ovl .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;flex-wrap:wrap}
.ovl .bar h3{font-size:1.3rem}
.ovl .bar p{margin:2px 0 0;font-size:.85rem;color:var(--sky)}
.ovl .acts{display:flex;gap:8px;flex-wrap:wrap}
.ovl .acts a,.ovl .acts button{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;padding:8px 14px;border-radius:4px;text-decoration:none;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer}
.ovl .acts .go{background:var(--red);border-color:var(--red)}

/* matches */
.matches{border-top:1px solid var(--line)}
.match{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);min-width:0}
.match .date{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.9rem;color:var(--muted);line-height:1.1}
.match .date b{display:block;color:var(--fg);font-size:1.35rem;font-variant-numeric:tabular-nums}
.match h3{font-size:1.25rem;font-weight:700}
.match p{margin:2px 0 0;font-size:.84rem;color:var(--muted)}

/* news */
.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.news article{display:flex;flex-direction:column;gap:8px;border-top:3px solid var(--navy);padding-top:12px;min-width:0}
.news article.lead{grid-column:1/-1;border-top-color:var(--red)}
.news h3{font-size:1.45rem;font-weight:700}
.news .lead h3{font-size:2.1rem}
.news p{margin:0;color:var(--muted)}
.news .src{font-size:.8rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.news .src a{font-weight:600;color:var(--fg)}

/* teams */
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.team{border:1px solid var(--line);border-inline-start:6px solid var(--navy);padding:14px 16px;border-radius:4px;min-width:0}
.team h3{font-size:1.3rem;font-weight:700;text-transform:uppercase}
.team p{margin:5px 0 0;font-size:.88rem;color:var(--muted)}
.team .fmt{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--red)}

footer{background:var(--navy);color:var(--navy-ink);padding-block:26px;font-size:.85rem;margin-top:20px}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer a{color:var(--sky)}

@media (max-width:720px){
  .filters{grid-template-columns:1fr 1fr}
  .filters input{grid-column:1/-1}
  .match{grid-template-columns:72px 1fr}
  .match .act{grid-column:2}
  .news .lead h3{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* jump-to-moment strip inside the match player */
.ovl .jump{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 16px;border-top:1px solid rgba(255,255,255,.14);padding-top:14px}
.ovl .jump[hidden]{display:none!important}
.ovl .jump button{font:inherit;font-size:.86rem;padding:7px 12px;border-radius:4px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;text-align:start}
.ovl .jump button:hover{border-color:var(--red);background:rgba(207,17,38,.22)}
.ovl .jump button span{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;color:var(--sky);margin-inline-end:6px}

/* --- match rows with a frame from the game --- */
.match{grid-template-columns:76px 132px 1fr auto}
.mshot{width:132px;aspect-ratio:16/9;border-radius:4px;background:var(--navy) center/cover no-repeat;background-size:150%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.minfo{min-width:0}
@media (max-width:860px){
  .match{grid-template-columns:64px 100px 1fr}
  .mshot{width:100px}
  .match .act{grid-column:2 / -1}
}
@media (max-width:520px){
  .match{grid-template-columns:1fr}
  .mshot{width:100%;max-width:220px}
  .match .act{grid-column:1}
}
/* clip covers: lean in a little so it reads as action, not a wide empty pitch */
.shot{background-size:132%;background-position:center 42%}
.crest{width:36px;height:42px}

/* the .btn rule would otherwise beat the hidden attribute */
[hidden]{display:none!important}

/* --- matches as tournament shelves --- */
.tour{padding:0;margin:0 0 34px}
.tour-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:2px solid var(--navy);padding-bottom:8px;margin-bottom:16px}
.tour-head h3{font-family:var(--display);font-size:1.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.tour-head span{font-size:.82rem;color:var(--muted);font-weight:600;white-space:nowrap}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px}
.mcard{display:flex;flex-direction:column;text-align:start;padding:0;border:1px solid var(--line);border-radius:7px;
  overflow:hidden;background:var(--bg);color:inherit;font:inherit;cursor:pointer;min-width:0}
.mcard:hover{border-color:var(--red)}
.mcard:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.mcard.ko{border-inline-start:4px solid var(--red)}
.mthumb{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--navy) center/cover no-repeat;background-size:148%;display:block}
.mthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,40,.46) 0 28%,rgba(6,20,40,0) 55%,rgba(6,20,40,.55) 100%)}
.mstage{position:absolute;top:8px;inset-inline-start:8px;z-index:1;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.7rem;padding:3px 8px;border-radius:3px;background:var(--navy);color:#fff}
.mstage.red{background:var(--red)}
.mcount{position:absolute;bottom:8px;inset-inline-end:8px;z-index:1;font-size:.72rem;font-weight:600;color:#fff;
  background:rgba(6,20,40,.72);padding:3px 8px;border-radius:3px}
.mbody{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px;min-width:0}
.mteams{font-family:var(--display);font-size:1.3rem;font-weight:700;line-height:1.1}
.mmeta{font-size:.78rem;color:var(--muted)}
@media (max-width:520px){ .mgrid{grid-template-columns:1fr 1fr;gap:12px} .mteams{font-size:1.08rem} }

/* nation headings on the teams page */
.natline{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
  font-size:1.5rem;margin:30px 0 14px;padding-bottom:7px;border-bottom:2px solid var(--line)}
.natline:first-of-type{margin-top:6px}
.natline .count{font-family:var(--body);font-size:.8rem;letter-spacing:.06em;color:var(--muted);
  font-weight:600;margin-inline-start:10px;text-transform:uppercase}

/* ---- provenance, flagging and the tagging queue ---- */
.tag.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.tag.ok{background:transparent;border:1px solid var(--navy);color:var(--navy)}
.tag.unk{background:transparent;border:1px dashed var(--red);color:var(--red)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tag.ok{border-color:var(--sky);color:var(--sky)}
}
.ovl .more{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px 14px;
  border-top:1px solid rgba(255,255,255,.14)}
.ovl .more button,.ovl .more a{font:inherit;font-size:.84rem;padding:6px 11px;border-radius:4px;
  border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;text-decoration:none}
.ovl .more input{font:inherit;font-size:.86rem;padding:6px 10px;border-radius:4px;flex:1 1 15rem;min-width:0;
  border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.3);color:#fff}
.ovl .more span{font-size:.84rem;color:rgba(255,255,255,.75)}

.queue{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.qrow{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:6px;
  padding:9px 12px;background:var(--bg);min-width:0}
.qrow .qthumb{width:74px;aspect-ratio:16/9;border-radius:3px;background:var(--line) center/cover;flex:none}
.qrow .qmain{min-width:0;flex:1 1 auto}
.qrow b{font-family:var(--display);font-size:1.02rem;letter-spacing:.01em;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow small{color:var(--muted);font-size:.82rem;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .fix{flex:none}
.qfilter{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}

/* language picker, and a visually-hidden label for screen readers */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.langpick select{font:inherit;font-size:.84rem;font-weight:600;padding:5px 8px;border-radius:4px;
  border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
header .wrap{gap:12px}
/* Persian reads right to left; the picker should not drag the nav around */
:root[dir="rtl"] .sec-head h2::before{transform:scaleX(-1)}
:root[dir="rtl"] .shot::after{transform:scaleX(-1)}
:root[dir="rtl"] .ovl .jump button span{font-variant-numeric:tabular-nums}
.fix.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
/* an approximate date sits where the day number would, in words not numerals */
.match .date .approx{font-family:var(--body);font-size:.72rem;font-weight:600;line-height:1.2;
  display:block;text-transform:none;letter-spacing:0}

/* Tap-for-sound. Phones only allow autoplay when muted, so the video starts
   silent and this is how the viewer gets the sound. */
.ovl .sound{position:absolute;z-index:3;top:12px;inset-inline-end:12px;font:inherit;font-size:.82rem;
  font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.66);color:#fff;cursor:pointer;backdrop-filter:blur(3px)}
.ovl .sound:disabled{opacity:.5;cursor:default}
.card .body h3{overflow-wrap:anywhere}

/* ---- the sport funnel ---- */
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.fbox{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px;
  overflow:hidden;background:var(--bg);color:inherit;text-decoration:none;min-width:0;
  transition:border-color .12s,transform .12s}
.fbox:hover,.fbox:focus-visible{border-color:var(--red);transform:translateY(-2px)}
.fbox .fshot{display:block;aspect-ratio:16/9;background:#0a0f14 var(--shot) center/cover;
  position:relative}
.fbox .fshot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,15,20,0),rgba(10,15,20,.28))}
.fbox .fbody{display:flex;flex-direction:column;gap:5px;padding:15px 17px 17px;min-width:0}
.fbox b{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.015em;
  font-size:1.4rem;line-height:1.05}
.fbox small{color:var(--muted);font-size:.9rem;line-height:1.45}
.fbox .fnums{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:.78rem;color:var(--red);margin-top:3px;font-variant-numeric:tabular-nums}
.fbox.all .fshot::after{background:linear-gradient(180deg,rgba(15,214,176,.06),rgba(10,15,20,.34))}

/* ---- the sport hub ---- */
.sporthead{padding-block:26px 0}
.crumb{margin:0 0 8px;font-size:.86rem;font-weight:600}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--red)}
.sporthead h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.015em;
  font-size:clamp(1.8rem,4.6vw,2.9rem);margin:0;line-height:1.02}
.sblurb{color:var(--muted);max-width:46rem;margin:8px 0 0}
/* How much is in here, said quietly. These used to be set at heading size and
   ran to five figures, which pushed the actual football below the fold on a
   phone - a lot of room for numbers nobody came to read. One line now. */
.stats{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:12px 0 0;padding:0;
  font-size:.86rem;color:var(--muted);align-items:baseline}
.stats li{display:flex;gap:5px;align-items:baseline}
.stats b{font-family:var(--display);font-size:1.02rem;line-height:1;color:var(--fg);
  font-variant-numeric:tabular-nums}
.stats span{font-size:.86rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--muted)}

/* Sticky below the masthead, not behind it. top:0 put the tab strip underneath
   a sticky header that is 173px tall on a phone, so it scrolled out of reach
   exactly when somebody wanted to switch sections. --chrome-h is the header's
   measured height, republished whenever it changes. */
.tabs{border-bottom:1px solid var(--line);margin-top:18px;
  position:sticky;top:var(--chrome-h,0px);z-index:5;background:var(--bg)}
/* the tab strip scrolls sideways on a phone; contain it so the drag does not
   chain into the page and read as the whole page sliding about */
.tabrow{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.tabrow::-webkit-scrollbar{display:none}
.tabrow button{font:inherit;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:1rem;padding:13px 15px;border:0;background:none;color:var(--muted);
  cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent}
.tabrow button:hover{color:var(--fg)}
.tabrow button[aria-current="page"]{color:var(--fg);border-bottom-color:var(--red)}

/* ---- tournament cards ---- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.tcard{display:flex;gap:12px;align-items:center;text-align:start;padding:10px;border:1px solid var(--line);
  border-radius:7px;background:var(--bg);color:inherit;font:inherit;cursor:pointer;min-width:0}
.tcard:hover{border-color:var(--red)}
.tthumb{width:82px;aspect-ratio:16/9;border-radius:4px;background:var(--line) center/cover;flex:none}
.tbody{min-width:0}
.tcard b{display:block;font-family:var(--display);font-size:1.05rem;letter-spacing:.01em;line-height:1.15}
.tcard small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}

/* ---- players table ---- */
.tscroll{overflow-x:auto}
.ptable{border-collapse:collapse;width:100%;min-width:30rem;font-size:.94rem}
.ptable th{text-align:start;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:0 12px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.ptable td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.ptable .rank{color:var(--muted);font-variant-numeric:tabular-nums;width:2.4rem}
.ptable .num{text-align:end;font-family:var(--display);font-weight:700;font-size:1.05rem;
  font-variant-numeric:tabular-nums;padding-inline-end:0}
.ptable tbody tr:hover{background:var(--surface)}
.ptable .dim{color:var(--muted);font-size:.86rem}
.ptable .plink{font:inherit;font-weight:600;border:0;background:none;padding:0;color:inherit;
  cursor:pointer;text-align:start;text-decoration:underline;text-decoration-color:var(--line)}
.ptable .plink:hover{color:var(--red)}
.ptable .empty{color:var(--muted);padding:18px 0}

.sportpick select{font:inherit;font-size:.84rem;font-weight:600;padding:5px 8px;border-radius:4px;
  border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;max-width:11rem}
.team h4{font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;margin:3px 0 5px}
.team .dim{color:var(--muted);font-size:.84rem;margin:7px 0 0}

/* The header gained a sport switcher alongside the language picker, which is
   two selects too many for a 390px screen. Let it wrap, and let the nav take
   the full width underneath rather than squeezing. */
header .wrap{flex-wrap:wrap;row-gap:8px}
header nav{min-width:0;flex-wrap:wrap}
.sportpick,.langpick{min-width:0}
.sportpick select,.langpick select{max-width:100%}
@media (max-width:620px){
  header .wrap{align-items:flex-start}
  header .brand{flex:1 1 100%}
  header nav{order:3;flex:1 1 100%}
  .sportpick select,.langpick select{font-size:.8rem;padding:4px 6px}
  .sportpick select{max-width:8.5rem}
}
/* The tab strip scrolls sideways on its own rather than widening the page.
   It is both the padded wrapper and the scroll container: nesting one inside
   the other let the inner element size itself to the buttons. */
.tabs{overflow:hidden}
.tabrow{max-width:1140px;margin:0 auto;min-width:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px))}

/* clubs, where a sport has club competitions as well as international ones */
.clubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px;margin-bottom:8px}
/* One shape, declared once. There used to be a second .clubrow rule further
   down that turned this into a centred row, so the two fought and the grid came
   out ragged - cards centred, text wandering, nothing lining up down the page.
   A crest sits to the left where there is one; the text column is the same
   either way, so a club with a crest and one without still line up. */
.clubrow{display:flex;flex-direction:row;align-items:center;gap:11px;text-align:start;
  padding:10px 13px;min-width:0;
  border:1px solid var(--line);border-radius:6px;background:var(--bg);color:inherit;font:inherit;cursor:pointer}
.clubrow .clubtext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.clubrow:hover{border-color:var(--red)}
.clubrow b{font-family:var(--display);font-size:1.02rem;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clubrow small{color:var(--muted);font-size:.8rem}

/* screenshot upload on the tagging form */
.shotdrop{border:1px dashed var(--line);border-radius:6px;padding:14px 16px;gap:8px}
.shotdrop input[type=file]{font:inherit;font-size:.92rem;padding:0;border:0;background:none}
.shotdrop small{color:var(--muted);font-weight:400;font-size:.86rem;line-height:1.45}
.ptable .plink{color:inherit}
/* a moment that is known but not yet pinned to a second: still openable */
.card.needstime .stamp{background:rgba(207,17,38,.9)}
.card.needstime{border-style:dashed}

/* The tagging form's read-back: one sentence, then at most one thing to fix.
   It replaced a grid of labels and dashes that read like a broken table. */
.read{display:flex;flex-direction:column;gap:7px;margin:0;padding:14px 16px;border-radius:6px;
  background:var(--bg);border:1px solid var(--line)}
.read strong{font-family:var(--display);font-size:1.2rem;letter-spacing:.01em;line-height:1.25}
.read .warn{color:var(--red);font-weight:600;font-size:.92rem}
.read .hint{color:var(--muted);font-size:.92rem;font-weight:400}
.read .fix{align-self:flex-start;margin-top:2px}
.shotdrop{margin-top:2px}
#shotbtn{font-weight:600}

/* players clipped for a team, on the team cards */
.plist{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 0}
.plist a,.plist span{display:inline-flex;align-items:center;gap:5px;
  font-size:.8rem;line-height:1;padding:5px 8px;border:1px solid var(--line);
  border-radius:999px;text-decoration:none;color:inherit;background:var(--bg)}
.plist a:hover{border-color:var(--red);color:var(--red)}
.plist .pn{font-weight:700;color:var(--muted);font-size:.72rem}
.clubrow .plist{margin-top:8px}

/* hub cards that are now links through to a team or tournament page */
a.tcard,a.clubrow{text-decoration:none;color:inherit;display:flex}
.team h4 a{text-decoration:none;color:inherit}
.team h4 a:hover{color:var(--red)}

/* inline tagging, under the player */
.tagbox{margin:14px 0 0;border:1px solid var(--line);border-radius:5px;max-width:44rem}
.tagbox summary{cursor:pointer;padding:10px 13px;font-weight:600;font-size:.92rem}
.tagbox summary::marker{color:var(--muted)}
.tagform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 13px 13px}
.tagform .tstamp{font-family:var(--display);font-size:1rem;color:var(--muted);flex:none}
.tagform input[name=raw]{flex:1 1 16rem;min-width:0;font:inherit;padding:9px 11px;
  border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--fg)}
.tagform button{font:inherit;font-weight:600;padding:9px 15px;border:0;border-radius:4px;
  background:var(--red);color:#fff;cursor:pointer}
.tagform button[disabled]{opacity:.55;cursor:default}
.tagform .tagmsg{flex:1 1 100%;font-style:normal;font-size:.9rem;color:var(--red);font-weight:600}
.tagform small{flex:1 1 100%;font-size:.8rem;color:var(--muted)}

/* ---- date order ---- */
.sortbar{display:flex;justify-content:flex-end;margin:0 0 12px}
.sortbtn{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:.82rem;padding:6px 12px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--muted);border:1px solid var(--line)}
.sortbtn:hover{color:var(--fg);border-color:var(--accent)}

/* ---- the highlights reel ---- */
.reel{position:fixed;inset:0;z-index:90;background:rgba(6,10,14,.93);
  display:flex;align-items:center;justify-content:center;padding:16px}
.reelbox{width:min(1040px,100%);max-height:100%;display:flex;flex-direction:column;gap:10px}
.reelframe{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.reelframe iframe,.reelframe>div{position:absolute;inset:0;width:100%;height:100%;border:0}
.reelbar{display:flex;align-items:center;gap:10px;color:#e6edf3;flex-wrap:wrap}
.reelnow{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:1px}
.reelnow b{font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reelnow small{color:#9fb1c2;font-size:.8rem}
.reelnav,.reelclose{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  cursor:pointer;border-radius:6px;padding:8px 14px;font-size:1rem;
  background:transparent;color:#e6edf3;border:1px solid #2b3a4a}
.reelnav:hover,.reelclose:hover{border-color:var(--accent);color:#fff}
.reelclose{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn-reel{margin-bottom:14px}

/* ---- likes (only drawn when the vote API is deployed) ---- */
#votebox{display:flex;align-items:center;gap:10px;margin:12px 0 0;min-height:0}
#votebox:empty{display:none}
.votebtn{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:.9rem;padding:8px 15px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--fg);border:1px solid var(--line)}
.votebtn:hover{border-color:var(--accent)}
.votebtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.votecount{color:var(--muted);font-size:.86rem}

/* a match row's own caveat: a stream that does not cover the whole game */
.mnote{margin:10px 0 0;padding:9px 13px;border-inline-start:3px solid var(--flag);
  background:var(--surface);border-radius:0 5px 5px 0;color:var(--muted);font-size:.92rem;max-width:44rem}

/* ---- share row (player, team and tournament pages) ----
   The moment pages carry their own copy of these rules in their inline style,
   because they are built to stand alone; these are for the generated pages that
   load this stylesheet. */
.share{display:flex;gap:9px;flex-wrap:wrap;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.share button,.share a{font:inherit;font-size:.9rem;font-weight:600;padding:9px 14px;border-radius:4px;
  border:1px solid var(--line);background:var(--bg);color:inherit;text-decoration:none;cursor:pointer}
.share button:hover,.share a:hover{border-color:var(--accent)}
.share .primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.share .msg{align-self:center;font-size:.9rem;color:var(--muted);border:0;background:none;padding:0}

/* ---- flags ---- */
.flag{font-size:1.05em;line-height:1;margin-inline-end:.42em;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.flagcode{display:inline-block;font-family:var(--display);font-weight:700;font-size:.62em;
  letter-spacing:.06em;padding:.18em .36em;border-radius:3px;line-height:1.25;vertical-align:.12em;
  background:var(--surface);color:var(--muted);border:1px solid var(--line);margin-inline-end:.45em}

/* ---- a competition's champion ---- */
.champ{display:flex;align-items:center;gap:14px;margin:22px 0 0;padding:16px 18px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--flag)}
.champ .trophy{width:34px;height:34px;flex:none;fill:var(--flag)}
.champtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.champtext small{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:.7rem;color:var(--muted)}
.champtext b{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.015em;
  font-size:1.5rem;line-height:1.05}
.champtext a{text-decoration:none}
.champtext a:hover{color:var(--accent)}
/* matches grouped by round rather than run together as one date list */
/* The plain row list. These rules lived inside the team page's own <style>,
   scoped to .tm, so the same markup on a player page (.pl) fell back to
   browser defaults and rendered as a bulleted list. They belong here. */
ul.rows{list-style:none;padding:0;margin:0;display:grid;gap:6px}
ul.rows > li > a{display:flex;gap:11px;align-items:baseline;border:1px solid var(--line);
  border-radius:4px;padding:9px 12px;text-decoration:none;color:inherit;min-width:0}
ul.rows > li > a:hover{border-color:var(--red)}
ul.rows .tmstamp{font-family:var(--display);color:var(--muted);flex:none;min-width:3.6rem}
ul.rows b{display:block;font-weight:600}
ul.rows small{display:block;color:var(--muted);font-size:.82rem}

/* The count row under a compilation. These rules lived inside the player
   page's own <style>, so the same markup on a country page fell back to
   browser defaults: a bulleted list with the number jammed against the word. */
.pstats{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:14px 0 0;padding:0;
  font-size:.86rem;color:var(--muted);align-items:baseline}
.pstats li{display:flex;gap:5px;align-items:baseline}
.pstats b{font-family:var(--display);font-size:1.02rem;line-height:1;color:var(--fg);
  font-variant-numeric:tabular-nums}
.pstats span{font-size:.86rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}

.rows.byround .roundhead{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:.74rem;color:var(--muted);margin:14px 0 2px;list-style:none}
.rows.byround .roundhead:first-child{margin-top:4px}
.champtext em{font-style:normal;font-size:.88rem;color:var(--muted)}
.champ + .champ{margin-top:10px}
/* --- the rest of a competition, on a match page ---
   This list is read sideways: round, then who played, then whether there is
   anything tagged. It needs its own rules because the match page is not inside
   .tm and so never picked up the tournament page's row styles. */
.sibs{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.sibs h2{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;margin:0}
.sibs .sibtour{margin:4px 0 14px;color:var(--muted);font-size:.9rem}
.sibs .sibtour a{color:var(--muted)}
.sibs .sibmore{margin:14px 0 0}
.rows.byround{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.rows.byround > li > a{display:flex;gap:14px;align-items:center;border:1px solid var(--line);
  border-radius:6px;padding:12px 14px;text-decoration:none;color:inherit;min-width:0}
.rows.byround > li > a:hover{border-color:var(--red)}
.rows.byround .rlabel{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.7rem;color:var(--muted);flex:none;min-width:7.5rem;line-height:1.3}
.rows.byround .rfix{min-width:0;flex:1}
.rows.byround .rfix b{display:block;font-weight:600}
.rows.byround .rfix small,.rows.byround small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.rows .nmoments{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:4px 9px;white-space:nowrap}
@media (max-width:560px){
  .rows.byround > li > a{flex-wrap:wrap;gap:4px 10px}
  .rows.byround .rlabel{min-width:0;width:100%}
}

/* --- page headers ---
   One banner shape for every kind of page, told apart by the art behind it: a
   nation wears its flag, a club a stand full of people and its own initials, a
   person a running figure, a competition its bracket, a moment a crowd. All of
   it is drawn by us and masked, so a single flat SVG takes the page's colour.
   Nothing here is a photograph: the archive uses no picture of a real player,
   and a blurred photograph is still a photograph of someone. */
.phead{position:relative;overflow:hidden;padding-block:22px 26px;margin-bottom:-14px;
  background:linear-gradient(105deg,
    color-mix(in srgb, var(--tint, var(--accent)) 16%, var(--bg)) 0%,
    var(--bg) 62%);
  border-bottom:1px solid var(--line)}
.phead .wrap{position:relative;z-index:2}
/* Not a flex row: flex puts its gap between every item, including the two
   text nodes either side of a flag, so "GABON 0-5 ENGLAND" came out with
   uneven holes in it. Inline flow with the flags carrying their own margins
   keeps the fixture reading as one line. */
.phead h1{margin:0;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.015em;
  font-size:clamp(1.9rem,5.2vw,3.1rem);line-height:1.1;text-wrap:balance}
.phead h1 .flag,.phead h1 .flagcode{font-size:.74em;vertical-align:baseline}
.phead h1 .flag-home{margin-inline-end:.3em}
.phead h1 .flag-away{margin-inline-start:.3em}
.phead h1 .h1flag{margin-inline-end:.34em}
.phead h1 .phead-pic{vertical-align:middle;margin-inline-end:.36em}
.phead h1 .flagcode{font-size:.44em;letter-spacing:.04em;padding:.12em .3em;border-radius:3px;
  background:color-mix(in srgb, var(--tint, var(--accent)) 20%, transparent)}
.phead .for{color:var(--muted);margin:3px 0 0}
.phead .fmts{color:var(--muted);margin:2px 0 0;font-size:.94rem}

/* the drawn art, held well back and faded out towards the text */
.phead-art{position:absolute;z-index:0;inset-block:0;inset-inline-end:0;width:62%;
  pointer-events:none;background-color:var(--tint, var(--accent));opacity:.3;
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-position:center right;mask-position:center right;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.phead-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to left, transparent 30%, var(--bg) 96%)}

/* a nation's flag, blown up and blurred behind the title */
.phead-flag{position:absolute;z-index:1;inset-block:-28%;inset-inline-end:-2%;width:46%;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-size:19rem;line-height:1;filter:blur(13px) saturate(1.15);opacity:.34;
  -webkit-mask-image:linear-gradient(to left, #000 8%, transparent 92%);
          mask-image:linear-gradient(to left, #000 8%, transparent 92%)}
.phead-flag .flagcode{font-size:.18em;font-weight:800;letter-spacing:.06em;opacity:.5}

/* a club's or a person's initials, standing in for a badge we are not
   entitled to copy */
.phead-mono{position:absolute;z-index:1;inset-block-start:50%;inset-inline-end:4%;
  transform:translateY(-50%);pointer-events:none;
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(5rem,15vw,10rem);line-height:1;color:var(--tint, var(--accent));
  opacity:.17;filter:blur(1.5px)}

@media (max-width:640px){
  .phead-art{width:86%;opacity:.2}
  .phead-mono{font-size:7rem;opacity:.12}
  .phead-flag{width:70%;font-size:13rem;opacity:.26}
}

/* honours: the medals first as a count, then the finals themselves */
.honours{margin-top:18px}
.medals{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.medals .hon{display:flex;align-items:baseline;gap:7px;border-radius:999px;padding:7px 14px;
  border:1px solid var(--line);background:var(--bg)}
.medals .hon b{font-family:var(--display);font-size:1.25rem;line-height:1}
.medals .hon span{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.medals .hon.g{border-color:#c9a227;box-shadow:inset 0 0 0 1px rgba(201,162,39,.35)}
.medals .hon.g b{color:#b4901f}
.medals .hon.s b{color:#8d949c}
.medals .hon.b b{color:#a9702f}
.honlist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:5px;max-width:46rem}
.honrow{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line)}
.honrow .hyear{font-family:var(--display);font-weight:700;flex:none;min-width:3rem;
  font-variant-numeric:tabular-nums}
.honrow.g .hyear{color:#b4901f}
.honrow.b .hyear{color:#a9702f}
.honrow.s .hyear{color:var(--muted)}
.honrow .hwhat{flex:1;min-width:0}
.honrow .hwhat b{display:block;font-weight:600;font-size:.95rem}
.honrow .hwhat b a{color:inherit;text-decoration:none}
.honrow .hwhat b a:hover{color:var(--accent)}
.honrow .hwhat small{display:block;color:var(--muted);font-size:.82rem}
.honrow .hlink{flex:none;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--accent)}
/* The note closes the honours block, so it needs room before whatever comes
   next - otherwise it reads as a caption for the panel below it. */
.honnote{margin:12px 0 26px;font-size:.78rem;color:var(--muted)}
/* how often the whole stream has been watched - a match-level number, which is
   why it sits on the match card and never on a moment */
.mviews{position:absolute;inset-block-end:8px;inset-inline-start:8px;font-size:.66rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;background:rgba(0,0,0,.72);color:#fff;
  border-radius:3px;padding:3px 7px}

/* --- up next ---
   Four related moments under the player, and for a visitor who has watched
   nothing else, a countdown onto the first of them. The countdown always
   carries its own way out: being moved on without a cancel is infuriating. */
.upnext:empty{display:none}
.upnext{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
/* sitting right under the player it has to be compact, or it pushes the
   fixture and the detail off the screen entirely */
.upnext h2{font-size:1rem;letter-spacing:.04em;color:var(--muted)}
.upnext h2{font-family:var(--display);text-transform:uppercase;font-size:1.25rem;margin:0 0 12px}
.unrow{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.unx{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:7px;
  overflow:hidden;background:var(--surface)}
.unx:hover{border-color:var(--accent)}
.unthumb{display:block;aspect-ratio:16/9;background-size:cover;background-position:center;
  background-color:#0a0f14}
.unbody{display:block;padding:9px 11px 11px}
.unbody b{display:block;font-weight:600;font-size:.92rem;line-height:1.25}
.unbody small{display:block;color:var(--muted);font-size:.78rem;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unauto{position:absolute;z-index:3;inset-inline:10px;inset-block-end:10px;display:flex;
  align-items:center;gap:9px;flex-wrap:wrap;padding:10px 13px;border-radius:7px;
  background:rgba(0,0,0,.82);color:#fff;font-size:.88rem}
.unauto .unlabel{opacity:.75}
.unauto b{font-family:var(--display);font-size:1.25rem;line-height:1;min-width:1ch}
.unauto .unname{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unauto .ungo{font:inherit;font-size:.86rem;font-weight:700;padding:7px 15px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.unauto .ungo:hover{filter:brightness(1.1)}
.unauto .ungo b{font-variant-numeric:tabular-nums;font-weight:700}
.unauto .unstop{font:inherit;font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;cursor:pointer}
.unauto .unstop:hover{background:rgba(255,255,255,.14)}
/* the competition heading is a link, but it is a heading first: underlining it
   turned the whole page into a list of links */
.tour-head h3 a{color:inherit;text-decoration:none}
.tour-head h3 a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* the most-watched strip sits above the sort control, so it needs to read as a
   recommendation rather than as the first competition in the list */
.topwatch{padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.topwatch .tour-head h3{color:var(--accent)}

/* The mask url must be written here, in the stylesheet, not passed in from the
   page: a url() inside a custom property is resolved against the stylesheet's
   own address, so "../img/..." set on a page in p/ pointed one folder too high
   and the art silently never loaded. style.css sits at the root, so these
   resolve correctly for every page at every depth. */
.art-crowd{-webkit-mask-image:url(img/art-crowd.svg);mask-image:url(img/art-crowd.svg)}
.art-bracket{-webkit-mask-image:url(img/art-bracket.svg);mask-image:url(img/art-bracket.svg)}
.art-avatar{-webkit-mask-image:url(img/art-avatar.svg);mask-image:url(img/art-avatar.svg)}
.art-avatar-w{-webkit-mask-image:url(img/art-avatar-w.svg);mask-image:url(img/art-avatar-w.svg)}

/* A player page carries both: the avatar is the subject, the flag is who they
   play for, so the flag narrows to a band at the very edge and lets the bust
   read rather than the two sitting on top of each other. */
.phead-player .phead-flag{width:24%;inset-inline-end:-1%;font-size:12rem;opacity:.3}
.phead-player .phead-art{width:50%;inset-inline-end:14%}
.phead-player .phead-mono{inset-inline-end:2%;opacity:.13}
@media (max-width:640px){
  .phead-player .phead-art{width:66%;inset-inline-end:4%}
  .phead-player .phead-flag{width:34%;font-size:9rem}
}

/* A hashed tint is a flat mid colour, so it needs a touch more of itself in
   the wash than a nation's own ink, which is usually vivid already. */
.phead-tour,.phead-club{
  background:linear-gradient(105deg,
    color-mix(in srgb, var(--tint, var(--accent)) 24%, var(--bg)) 0%,
    var(--bg) 66%)}
/* the bracket is thin strokes rather than solid shapes and disappears at .3 */
.phead-tour .phead-art{opacity:.5}
.phead-moment{padding-block:20px 16px;margin-bottom:0}
.phead-moment .phead-art{width:52%}
.phead-moment h1{font-size:clamp(1.6rem,4.4vw,2.5rem)}
.phead-moment .sub{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--accent);margin:6px 0 0}

/* a year rule down the tournaments list, so sixty-odd competitions can be
   scanned by eye instead of read end to end */
.yearhead{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.02em;
  margin:26px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--line);
  display:flex;align-items:baseline;gap:10px}
.yearhead:first-child{margin-top:8px}

/* A submitted crest or photograph: the same banner, with the real image doing
   the work the drawn art does elsewhere - blurred behind, crisp beside the
   title, and always carrying the line saying who gave it to us. */
.phead-wash{position:absolute;z-index:0;inset:-12%;background-size:cover;background-position:center;
  filter:blur(26px) saturate(1.1);opacity:.42;pointer-events:none}
.phead.haspic::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(100deg, var(--bg) 22%, color-mix(in srgb, var(--bg) 55%, transparent) 70%)}
.phead-pic{width:clamp(3rem,7vw,4.6rem);height:clamp(3rem,7vw,4.6rem);object-fit:contain;
  border-radius:10px;background:#fff;padding:5px;flex:none;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.phead-player .phead-pic{object-fit:cover;padding:0;border-radius:50%}
.piccredit{margin:12px 0 0;font-size:.74rem;color:var(--muted)}
/* the permission tickbox has to read as a statement, not as another field */
.form .declare{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;
  border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.form .declare input{margin-top:3px;flex:none;width:18px;height:18px}
.form .declare span{font-size:.9rem;line-height:1.45}
.form .hint{font-size:.86rem;color:var(--muted);margin:0}
/* the invitation only appears on a page still using a placeholder */
.askpic{margin:14px 0 0;font-size:.84rem}
.askpic a{color:var(--muted);text-decoration:none;border-bottom:1px dotted currentColor;padding-bottom:1px}
.askpic a:hover{color:var(--accent)}
/* the source line is a link wherever the archive holds one, because a claim
   nobody can check is worth very little */
.mo dd a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
.mo dd a:hover{color:var(--fg)}
.srcnote{font-family:var(--body);font-size:.74rem;color:var(--muted);letter-spacing:.02em}
.kofrom{margin:8px 0 0;font-size:.84rem;color:var(--muted)}
.kofrom a{color:var(--accent)}
/* a championship holding two competitions needs them told apart at a glance,
   or it reads as one bracket with two finals in it */
.tm h2.comphead{margin-top:34px;padding-bottom:7px;border-bottom:2px solid var(--accent);
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  font-size:1.25rem}
.tm h2.comphead + .rows.byround .roundhead:first-child{margin-top:8px}
/* the team page's own match rows need the same three-column shape as the
   tournament page's, so the moment count sits out on the right */
.tm ul.rows a{align-items:center}
.tm ul.rows .rfix{flex:1;min-width:0}
/* flag spacing is a property of the flag, not of the heading it happens to be
   in: these rows had "Germany🇩🇪" with nothing between them */
.flag-home,.flagcode.flag-home{margin-inline-end:.34em}
.flag-away,.flagcode.flag-away{margin-inline-start:.34em}
/* the most-watched heading is a control, so it has to look like one */
.topwatch .tour-head h3{margin:0}
.topwatch .tour-head h3 .towatch{font:inherit;font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;font-size:inherit;color:var(--accent);
  background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.4em}
.topwatch .towatch:hover{text-decoration:underline;text-underline-offset:4px}
.topwatch .towatch span[aria-hidden]{transition:transform .15s}
.topwatch .towatch:hover span[aria-hidden]{transform:translateX(3px)}

/* --- the frame around the day's picks ---
   It groups four cards into one offer rather than the first of several lists.
   The first attempt put a bright gradient on the border itself and sat the
   cards on a wash: against four video thumbnails that read as decoration
   fighting the content. This one is almost flat - a calm tinted surface, one
   soft diagonal, and the colour kept to a rule along the top where it does the
   grouping without competing. */
.todbox{position:relative;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  padding:20px 18px 20px;
  background:linear-gradient(170deg,
    color-mix(in srgb, var(--accent) 6%, var(--surface)) 0%,
    var(--surface) 55%)}
.todbox::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--flag) 70%, var(--accent)))}
.todbox .sec-head{margin:0 0 14px;padding:0;border:0}
.todbox .sec-head h2{margin:0}
/* the cards keep the page background so they lift off the tinted surface */
.todbox .tod{background:var(--bg)}
@media (max-width:560px){ .todbox{padding:15px 13px 16px;border-radius:10px} }

/* --- the day's picks ---
   One large card and three small ones beside it. The SMALL cards set the row
   height: when they were stretched to match a tall neighbour, their 16:9
   thumbnails cropped to a portrait sliver, which is what looked wrong. So the
   thumbnail is a fixed box with its own shape and everything else sizes from
   it outwards. */
/* Three explicit rows, so the small cards size the column and the big one
   spans them. Without them "grid-row:1/-1" resolves to a single row and the
   first small card inherits the big card's whole height. */
.todgrid{display:grid;gap:11px;grid-template-columns:1.55fr 1fr;
  grid-template-rows:repeat(3, auto);align-items:stretch}
.tod{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--bg);
  min-width:0;transition:border-color .15s,transform .15s}
.tod:hover{border-color:var(--accent);transform:translateY(-1px)}
.tod-big{grid-column:1;grid-row:1 / span 3;flex-direction:column;gap:0;align-items:stretch}
.todshot{display:block;background-size:cover;background-position:center;background-color:#0a0f14;
  flex:none;position:relative}
/* capped, or the big card alone is taller than the three beside it */
.tod-big .todshot{aspect-ratio:16/9;width:100%;max-height:286px}
.todshot.sm{width:38%;max-width:158px;aspect-ratio:16/9;border-radius:7px;margin:9px 0 9px 9px}
.todplay{position:absolute;inset-block-end:11px;inset-inline-start:11px;width:40px;height:40px;
  border-radius:50%;background:rgba(0,0,0,.72);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:.95rem;padding-inline-start:3px}
.todbody{display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:10px 13px 10px 3px;min-width:0}
.tod-big .todbody{padding:13px 16px 15px}
.todlabel{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:.64rem;color:var(--accent)}
.todbody b{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  font-size:.95rem;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tod-big .todbody b{font-size:clamp(1.15rem,2.2vw,1.6rem)}
.todmeta{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todnote{font-size:.86rem;color:var(--muted);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:760px){
  .todgrid{grid-template-columns:1fr;grid-template-rows:none}
  .tod-big{grid-row:auto}
  .tod-big .todshot{max-height:none}
  .todshot.sm{width:34%}
}

/* --- the teams panel ---
   A nation wears its flag, a club its crest where one has been given. The
   format cards carry counts only: listing every player made the countries with
   most in the archive four times taller than the rest, so the page could not
   be scanned at all. */
.natline .flag,.natline .flagcode{font-size:.86em}
.crest{flex:none;width:38px;height:38px;background-size:contain;background-repeat:no-repeat;
  background-position:center;border-radius:6px;background-color:#fff}
.teams .team p.dim{margin:6px 0 0}


/* --- the ask ---
   The page used to open on a form. A form is a thing you fill in once you have
   decided to; it does not tell anybody why they should. */
.askwrap{padding-block:34px 28px;border-bottom:1px solid var(--line);
  background:radial-gradient(85% 130% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 60%), var(--bg)}
.askwrap h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.015em;
  font-size:clamp(1.7rem,4.2vw,2.8rem);line-height:1.04;margin:0;max-width:20ch}
.asklede{font-size:1.06rem;max-width:46rem;margin:12px 0 0;color:var(--muted)}
.steps{list-style:none;counter-reset:s;display:grid;gap:12px;padding:0;margin:24px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps li{counter-increment:s;position:relative;padding:14px 16px 15px 52px;
  border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:15px;inset-block-start:14px;
  width:25px;height:25px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-family:var(--display);font-weight:800;font-size:.9rem;display:flex;align-items:center;
  justify-content:center}
.steps b{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
  font-size:.95rem;margin-bottom:4px}
.steps span{font-size:.9rem;color:var(--muted);line-height:1.45}
.askfoot{margin:16px 0 0;font-size:.88rem;color:var(--muted)}

/* --- where the help is needed ---
   The numbers are the argument. A sport with two hundred untagged matches is
   a better thing to point somebody at than a general plea. */
.gapwrap{padding-block:26px 10px}
.gapgrid{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}
.gapcard{font:inherit;text-align:start;cursor:pointer;display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--line);border-radius:10px;padding:14px 15px 15px;background:var(--bg);
  color:inherit;transition:border-color .15s,transform .15s}
.gapcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.gapcard.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.gapname{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:.74rem;color:var(--muted)}
.gapbig{font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;
  font-variant-numeric:tabular-nums}
.gapsub{font-size:.78rem;color:var(--muted)}
.gapbar{display:block;height:5px;border-radius:99px;background:var(--line);margin:9px 0 6px;overflow:hidden}
.gapbar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.gapmeta{font-size:.74rem;color:var(--muted)}

/* --- previous and next within a match ---
   A moment belongs to a sequence. Reading one and then having to go back out
   to the match to find the one after it is the kind of friction that ends a
   visit. */
.stepper{display:flex;align-items:stretch;gap:9px;margin:14px 0 0}
.steplink{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:9px 12px;
  border:1px solid var(--line);border-radius:8px;text-decoration:none;color:inherit;
  transition:border-color .15s}
.steplink:hover{border-color:var(--accent)}
.steplink.off{border-color:transparent;pointer-events:none}
.steplink.next{justify-content:flex-end;text-align:end}
.steparrow{font-size:1.1rem;color:var(--accent);flex:none}
.steptext{min-width:0}
.steptext small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.steptext b{display:block;font-weight:600;font-size:.9rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.stepcount{align-self:center;flex:none;font-family:var(--display);font-weight:700;
  font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;padding:0 2px}
@media (max-width:520px){ .steptext b{display:none} .stepper{gap:6px} }

/* the band already sets the moment up; the note does not need a second
   breath of air under it */
.mo .note:first-child{margin-top:0}

/* A moment timed from a match report rather than from the stream. The archive's
   one real claim is the timestamp, so where it is an estimate it says so. */
.approx{font-size:.78rem;color:var(--muted);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:1px;cursor:help}
/* Already watched: still offered once the fresh queue runs out, but faded, so a
   row that has stopped moving explains itself. */
.unx.seen{opacity:.5}
.unx.seen:hover{opacity:1}

/* Amend this moment. Sits directly under the player, folded away, because most
   people are here to watch - but it is the one action that actually mends the
   archive, so it is on every moment rather than buried on a form page. */
.fixtime{margin:10px 0 0}
.ftopen{background:none;border:1px dashed var(--line);color:var(--muted);
  border-radius:6px;padding:5px 10px;font:inherit;font-size:.82rem;cursor:pointer}
.ftopen:hover,.ftopen.on{border-style:solid;border-color:var(--accent);color:var(--fg)}
.ftbody{margin-top:9px;padding:12px 13px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface)}
.ftlede{margin:0 0 9px;font-size:.88rem;color:var(--muted)}
.ftnow{font-size:.9rem;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.ftnow .ftclock{font-variant-numeric:tabular-nums;font-size:1.15rem}
.ftnow small{color:var(--muted)}
.ftnow code{font-variant-numeric:tabular-nums}
.ftmark{margin-top:10px;background:var(--accent);color:#fff;border:0;border-radius:6px;
  padding:8px 14px;font:inherit;font-weight:600;cursor:pointer}
.ftmark:hover{filter:brightness(1.08)}
.ftmsg{display:block;margin-top:7px;font-size:.85rem;color:var(--muted);font-style:normal}

/* A national side that has sent its crest. The flag stays as the header - it is
   how the side is recognised in fixtures, lists and player headers across the
   whole site, so the team page must not break that thread - and the crest sits
   beside the title instead, lifted off the flag with its own backing so it
   reads as a badge rather than as part of the artwork. */
.phead.hasbadge h1 .phead-pic{position:relative;z-index:2}
.phead.hasbadge .piccredit{position:relative;z-index:2}

/* What is playing, directly under the player. Deliberately quiet - the title
   band further down is the page's proper heading, and this is only here so the
   video is never unlabelled on a small screen. */
.nowtitle{margin:11px 0 0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.nowtitle b{font-size:1.02rem}
.nowtitle span{color:var(--muted);font-size:.87rem}
.nowtitle .flag{vertical-align:-2px}

/* Find anything. Sits under the hero on the front page and under the stats on
   a sport page, where somebody who already knows a name can use it before
   being asked to choose a sport. */
/* Lifted above whatever follows it. The results list is positioned, but the
   band underneath carries positioned artwork of its own, so without a stacking
   context of its own here the dropdown ended up behind the day's picks - the
   list and a blurred crowd shot sharing the same pixels. */
/* Below the masthead, not above it. z-index:60 against a header at 40 meant
   the search box slid over the top of the masthead on the way up the page.
   It only needs to outrank the band beneath it, and the results list raises
   itself while it is open. */
/* No stacking context of its own while it sits there: the masthead and the
   sticky tab bar are allowed to pass over it as the page scrolls, which is
   what stopped the box appearing to fly up over the page. It only lifts
   once somebody is actually typing in it and the results need to be on top. */
.find{margin:18px 0 0;max-width:34rem}
.find:focus-within{position:relative;z-index:30}
.findwrap{position:relative}
.findin{width:100%;font:inherit;font-size:1rem;padding:11px 14px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--fg);
  -webkit-appearance:none;appearance:none}
.findin:focus{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.findout{position:absolute;z-index:31;inset-inline:0;top:calc(100% + 5px);
  background:var(--surface);border:1px solid var(--line);border-radius:9px;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.17)}
.findhit{display:flex;gap:10px;align-items:baseline;padding:9px 13px;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--line)}
.findhit:last-child{border-bottom:0}
.findhit:hover,.findhit.on{background:color-mix(in srgb, var(--red) 10%, transparent)}
.findkind{flex:none;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);min-width:5.4rem}
.findtext{min-width:0}
.findtext b{display:block;font-weight:600;line-height:1.25}
.findtext small{display:block;color:var(--muted);font-size:.8rem}
.sporthead .find{margin-top:14px}

/* "Hit this when the goal goes in", inside the reel player. Full width under
   the picture: the viewer is already watching the goal, so this is the cheapest
   moment there will ever be to ask them when it happened - but it must not sit
   over the video, because the thing being timed is the thing it would cover. */
.reelmark{display:block;width:100%;margin-top:10px;background:var(--red);color:#fff;
  border:0;border-radius:8px;padding:13px 16px;font:inherit;font-weight:700;
  font-size:1rem;cursor:pointer;letter-spacing:.01em}
.reelmark:hover{filter:brightness(1.08)}
.reelmark:active{transform:translateY(1px)}
.reelmarkmsg{margin:7px 0 0;min-height:1.1em;text-align:center;font-size:.85rem;
  color:rgba(255,255,255,.82)}
/* Liking the moment and getting out to the player's own page. Side by side
   under the timing button: both are things somebody wants to do about what is
   on screen, and autoplay has by then carried them away from wherever they
   started, so this is the only way back. */
.reelside{display:flex;gap:8px;margin-top:8px;align-items:stretch}
.reellike,.reelwho{flex:1 1 0;min-width:0;border-radius:8px;padding:11px 12px;
  font:inherit;font-weight:600;font-size:.94rem;text-align:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;
  text-decoration:none;display:flex;align-items:center;justify-content:center}
.reellike:hover,.reelwho:hover{background:rgba(255,255,255,.14)}
.reellike[aria-pressed="true"]{background:rgba(255,255,255,.22);border-color:#fff}
.reellike:disabled{opacity:.45;cursor:default}
.reelwho[hidden]{display:none}
.reelwho-ask{margin-top:9px;display:grid;gap:6px}
.reelwho-ask[hidden]{display:none}
.reelwho-ask label{font-size:.9rem;color:rgba(255,255,255,.88)}
.reelwho-ask input{font:inherit;font-size:1rem;padding:10px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.25);color:#fff}
.reelwho-ask button{font:inherit;font-weight:700;padding:10px 12px;border-radius:8px;
  border:0;background:#fff;color:#111;cursor:pointer}

/* Tags saved on this device that have not reached the site yet. Deliberately
   hard to miss: the whole failure this guards against is somebody believing a
   tag arrived when it did not. */
.outbox{position:fixed;inset-inline:10px;bottom:10px;z-index:80;display:flex;gap:10px;
  align-items:center;justify-content:space-between;background:var(--fg);color:var(--bg);
  border-radius:10px;padding:11px 14px;font-size:.92rem;
  box-shadow:0 6px 24px rgba(0,0,0,.25)}
.outbox .obsend{font:inherit;font-weight:700;border:1px solid currentColor;background:transparent;
  color:inherit;border-radius:7px;padding:7px 11px;cursor:pointer;flex:none}
.outbox .obsend:disabled{opacity:.5;cursor:default}

/* Two dozen channels is a paragraph, not a line, so the credits wrap and sit
   quietly rather than trying to stay on one row. */
footer .credits{display:block;margin-top:6px;line-height:1.7;max-width:none}
footer .credits b{font-weight:600;opacity:.8}
footer .credits a{white-space:nowrap}
/* On a small phone the longest channel name ("International Blind Sports
   Federation (IBSA)") is wider than the screen, and as an unbreakable flex
   item it stretched the whole page to 385px - so every page was zoomed out
   and wobbled sideways. Let the credits shrink, and the names wrap there. */
footer .credits{min-width:0;flex:1 1 100%}
@media (max-width:480px){ footer .credits a{white-space:normal} }

/* Medals beside a name in a list. Small enough not to shout over the name,
   big enough to pick a champion out of a table at a glance. */
.pmarks{margin-inline-start:6px;white-space:nowrap}
.pmark{font-size:.95em;line-height:1}
.pmark i{font-style:normal;font-size:.72em;font-weight:700;vertical-align:super;
  margin-inline-start:1px;color:var(--muted)}
.psort{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--muted)}
.psort select{font:inherit;font-size:.9rem;padding:6px 8px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface);color:var(--fg)}

/* Naming an unnamed moment from inside the overlay. */
.ovl .nameit{border-color:rgba(255,255,255,.6)!important;font-weight:700}
.ovl .nameform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:0 16px 14px;border-top:0}
.ovl .nameform[hidden]{display:none}
.ovl .nameform strong{flex:1 1 100%;font-size:.9rem;color:#fff;font-weight:700}
.ovl .nameform input{font:inherit;font-size:.9rem;padding:8px 11px;border-radius:5px;
  flex:1 1 11rem;min-width:0;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.3);color:#fff}
.ovl .nameform input[hidden]{display:none}
.ovl .nameform button{font:inherit;font-weight:700;font-size:.9rem;padding:8px 14px;
  border-radius:5px;border:0;background:#fff;color:#111;cursor:pointer;flex:none}
.ovl .nameform em{flex:1 1 100%;font-style:normal;font-size:.85rem;
  color:rgba(255,255,255,.85)}

/* Watch and tag. The old route out of the queue was a link, a trip to YouTube,
   a pause, a Share dialog and a paste - which is why the queue barely moved.
   This is the same job without leaving the page. */
#watch{scroll-margin-top:12px}
.watchnow{margin:0 0 10px;display:flex;flex-direction:column;gap:2px}
.watchnow b{font-size:1.06rem}
.watchnow small{color:var(--muted)}
.watchframe{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;
  overflow:hidden;max-height:72vh;margin-inline:auto}
.watchframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Big, and directly under the picture: it is pressed in a hurry, often with a
   thumb, by somebody whose eyes are still on the match. */
.wmark{display:block;width:100%;margin-top:12px;background:var(--red);color:#fff;border:0;
  border-radius:10px;padding:17px 18px;font:inherit;font-weight:700;font-size:1.06rem;
  cursor:pointer}
.wmark:hover{filter:brightness(1.08)}
.wmark:active{transform:translateY(1px)}
.wask{margin-top:12px;padding:15px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface)}
.waskhead{margin:0 0 11px;font-size:1rem}
.waskhead b{font-variant-numeric:tabular-nums}
.wkinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.wkind{background:none;border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  font:inherit;font-size:.92rem;cursor:pointer;color:inherit}
.wkind:hover{border-color:var(--red)}
.wkind.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.wwho{display:block;font-size:.9rem;color:var(--muted);margin-bottom:12px}
.wwho input{display:block;width:100%;max-width:26rem;margin-top:5px;font:inherit;
  padding:9px 12px;border-radius:7px;border:1px solid var(--line);
  background:var(--bg);color:var(--fg)}
.wactions{display:flex;flex-wrap:wrap;gap:9px}
.wsave{background:var(--red);color:#fff;border:0;border-radius:7px;padding:11px 18px;
  font:inherit;font-weight:600;cursor:pointer}
.wskip{background:none;border:1px solid var(--line);border-radius:7px;padding:11px 16px;
  font:inherit;cursor:pointer;color:var(--muted)}
.wmsg{display:block;margin-top:9px;font-size:.86rem;color:var(--muted);font-style:normal}
.wlist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:5px}
.wlist li{font-size:.92rem;padding:7px 11px;border:1px solid var(--line);border-radius:6px}
.wlist b{font-variant-numeric:tabular-nums;margin-inline-end:7px}
.wclose{margin-top:14px;background:none;border:1px solid var(--line);border-radius:7px;
  padding:9px 15px;font:inherit;cursor:pointer;color:var(--muted)}

/* Up next, trimmed. The full row is eight cards; on arrival only the first is
   shown and the rest are a line of text away. On a phone the stack of
   thumbnails was taller than the video, and it sat between the viewer and
   everything below it. */
.unrow.trimmed .unx:not(:first-child){display:none}
@media (min-width:760px){
  /* On a wide screen the row is a row, so three fit beside each other without
     pushing anything down - the reason to hide them does not apply. */
  .unrow.trimmed .unx:nth-child(-n+3){display:block}
}
.unmore{margin-top:10px;background:none;border:0;padding:4px 0;font:inherit;
  font-size:.9rem;color:var(--muted);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.unmore:hover{color:var(--red)}
.unmore b{font-variant-numeric:tabular-nums;font-weight:600}

/* The route out of a moment page. Quiet, but present: the sport you are in and
   the match this came from, both one tap away. */
.mocrumb{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;margin:0 0 12px;
  font-size:.88rem}
.mocrumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.mocrumb a:hover{color:var(--red);border-bottom-color:currentColor}
.crumbsep{color:var(--line)}

/* "Use this frame as the thumbnail" — only ever rendered for Andy, so it is
   plain on purpose: it is a working control, not part of the site's face. */
.ftthumb{display:block;margin-top:10px;background:none;border:1px solid var(--line);
  border-radius:7px;padding:9px 14px;font:inherit;font-size:.88rem;cursor:pointer;
  color:var(--fg)}
.ftthumb:hover{border-color:var(--accent)}

/* The tagging window, opened from under any video. It borrows the reel
   overlay's shell so there is one full-screen treatment on the site rather
   than two that nearly match. */
.tagovl .reelbox{max-width:900px;width:100%}
.tagwhat{margin:0 0 10px;color:#fff;font-size:.95rem}
.tagwhat b{font-weight:600}
.tagovl .wask{background:var(--surface);color:var(--fg)}
.tagovl .wlist{max-height:9rem;overflow:auto;color:#fff}
.tagovl .wlist li{border-color:rgba(255,255,255,.25)}
.tagovl .reelbar{margin-top:10px}
.tagcount{color:rgba(255,255,255,.75)}
/* The way in, under the small free-text box. */
.tagfull{display:block;margin-top:10px;background:none;border:1px solid var(--line);
  border-radius:7px;padding:9px 14px;font:inherit;font-size:.88rem;cursor:pointer;
  color:var(--fg)}
.tagfull:hover{border-color:var(--accent);color:var(--accent)}

/* Won, not contested. One star per title, under the name, the way a shirt
   carries them — readable at a glance without reading anything. Gold only:
   a star for finishing second would be claiming something that did not happen. */
.stars{margin:6px 0 0;line-height:1;letter-spacing:.12em;
  font-size:clamp(1.05rem,2.2vw,1.45rem);
  color:#d9a526;text-shadow:0 1px 2px rgba(0,0,0,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stars{color:#f0bd3a}}

/* What a player can be SHOWN to have won. One disc per final, gold for a win
   and silver for a runner-up, and only where this archive holds a moment in
   that final credited to them by name. Narrower than the truth on purpose:
   better to miss a medal somebody earned than to award one they did not. */
.pmedals{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:7px 16px}
.pmedal{display:flex;align-items:center;gap:7px;min-width:0}
.pmi{font-size:1.5rem;line-height:1;flex:none}
.pmwhat{display:flex;flex-direction:column;min-width:0}
.pmwhat b{font-size:.92rem;font-weight:600;line-height:1.2}
.pmwhat small{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* Folder tabs. The counts and the navigation used to be two separate rows -
   boxes saying how much was here, then a strip of words for getting at it. They
   are one thing now: each box says how many and opens them.

   Drawn as a folder because that is what it is. The tabs overlap slightly and
   each casts a small shadow, so they read as card behind card; the open one is
   the page's own background and sits a pixel over the panel's top edge, which
   joins it to the content and breaks the line under it. Each tab carries its
   own hue so the row is scannable by colour as well as by word - the colours
   are the site's accents at low strength, not decoration for its own sake. */
.ftabs{display:flex;flex-wrap:wrap;gap:0;align-items:flex-end;margin:16px 0 0;
  padding-inline-start:2px;border-bottom:1px solid var(--line);
  position:sticky;top:var(--chrome-h,0px);z-index:5;background:var(--bg)}
.ftab{position:relative;margin-inline-end:-6px;margin-bottom:-1px;
  display:flex;flex-direction:column;gap:1px;align-items:flex-start;
  border:1px solid var(--line);border-bottom-color:transparent;
  border-radius:10px 10px 0 0;padding:9px 16px 8px;
  background:var(--tabtint,var(--surface));color:var(--muted);
  font:inherit;text-align:start;cursor:pointer;
  box-shadow:1px -1px 3px rgba(0,0,0,.07)}
.ftab:hover{color:var(--fg)}
.ftab b{font-family:var(--display);font-size:1.25rem;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.ftab span{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* The open one: lifted above its neighbours, on the page's own background, and
   overlapping the panel edge so the folder is visibly open at that tab. */
.ftab[aria-current="page"]{z-index:2;background:var(--bg);color:var(--fg);
  border-color:var(--line);border-bottom-color:var(--bg);
  box-shadow:0 -2px 6px rgba(0,0,0,.09);padding-bottom:10px}
.ftab:nth-child(1){--tabtint:color-mix(in srgb,var(--accent) 11%,var(--surface))}
.ftab:nth-child(2){--tabtint:color-mix(in srgb,var(--flag) 11%,var(--surface))}
.ftab:nth-child(3){--tabtint:color-mix(in srgb,#5b7fd4 11%,var(--surface))}
.ftab:nth-child(4){--tabtint:color-mix(in srgb,#8a6bb5 11%,var(--surface))}
.ftab:nth-child(5){--tabtint:color-mix(in srgb,#2f9e8f 11%,var(--surface))}
@media (max-width:520px){
  .ftab{padding:8px 11px 7px;margin-inline-end:-4px}
  .ftab b{font-size:1.05rem}
  .ftab span{font-size:.62rem;letter-spacing:.05em}
}

/* Tabs on a team or player page. The same idea as the sport hub's tabs, at a
   smaller scale: the page stops being a scroll and becomes a folder. */
.ttabs{border-bottom:1px solid var(--line);margin:16px 0 0;
  position:sticky;top:var(--chrome-h,0px);z-index:5;background:var(--bg)}
.ttabrow{display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none}
.ttabrow::-webkit-scrollbar{display:none}
.ttabrow button{flex:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:10px 13px;font:inherit;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;
  color:var(--muted);cursor:pointer;white-space:nowrap}
.ttabrow button:hover{color:var(--fg)}
.ttabrow button[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}
.tpanel{padding-block:18px 0}
.tpanel > h2:first-child{margin-top:0}
.tabhint{color:var(--muted);font-size:.86rem;margin:16px 0 0}

/* ---- the menu ----
   Below a tablet the masthead is a brand and a button; everything else lives
   in a panel. Above it nothing changes, because the row fits there and hiding
   things behind a button that has room to be visible is just friction. */
.navtoggle{display:none;margin-inline-start:auto;background:none;border:1px solid rgba(255,255,255,.3);
  border-radius:8px;padding:9px 11px;cursor:pointer;align-items:center;justify-content:center}
.navbars{display:block;width:20px;height:2px;background:var(--shell-ink);position:relative}
.navbars::before,.navbars::after{content:"";position:absolute;inset-inline:0;height:2px;
  background:var(--shell-ink);transition:transform .16s ease, top .16s ease}
.navbars::before{top:-6px}.navbars::after{top:6px}
.navtoggle.on .navbars{background:transparent}
.navtoggle.on .navbars::before{top:0;transform:rotate(45deg)}
.navtoggle.on .navbars::after{top:0;transform:rotate(-45deg)}
.navmenu{background:var(--shell);color:var(--shell-ink);
  border-top:1px solid rgba(255,255,255,.14);padding-block:14px 20px;
  overflow-y:auto;overscroll-behavior:contain;
  /* Pinned to the screen under the bar, wherever the page is scrolled to, and
     filling the rest of it - so there is no strip of page left to swipe, and
     closing it puts you back exactly where you were. As part of the header's
     flow it opened wherever the top of the page happened to be. */
  position:fixed;inset-inline:0;top:calc(var(--chrome-h,46px) + env(safe-area-inset-top,0px));
  height:calc(100vh - var(--chrome-h,46px) - env(safe-area-inset-top,0px));z-index:41}
/* dvh where the browser has it: on a phone 100vh includes the address bar, so
   the bottom of the menu sat underneath it and could not be reached */
@supports (height:100dvh){ .navmenu{height:calc(100dvh - var(--chrome-h,46px) - env(safe-area-inset-top,0px))} }
/* The panel sits inside the header, so the header's own one-row flex rules
   ("header .wrap") reached into it too and laid search, sports and links side
   by side, off the edge of the screen. The panel is a plain column. */
header .navmenu .wrap{display:block;flex-wrap:wrap;padding-block:0}
.navmenu h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  font-size:.78rem;color:rgba(255,255,255,.6);margin:16px 0 8px}
.navfind .find{margin:0;max-width:none}
.navfind .findin{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:var(--shell-ink)}
.navfind .findin::placeholder{color:rgba(255,255,255,.55)}
.navsports{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.navsports a,.navrest a{display:block;text-decoration:none;color:var(--shell-ink);
  border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:11px 13px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:.92rem}
.navsports a:hover,.navrest a:hover{border-color:var(--accent);background:rgba(255,255,255,.07)}
.navsports a[aria-current="page"]{border-color:var(--accent);background:rgba(255,255,255,.12)}
.navrest{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px;margin-top:14px}
.navlang{display:flex;flex-direction:column;gap:5px;margin-top:18px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  font-size:.78rem;color:rgba(255,255,255,.6)}
.navlang select{font:inherit;font-size:.95rem;text-transform:none;letter-spacing:0;
  padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);color:var(--shell-ink)}
@media (max-width:759px){
  .navtoggle{display:flex}
  /* All of it moves into the panel, so the masthead is a brand and a button -
     roughly a third of the height it was, and the football starts that much
     further up the page. */
  header nav,header .sportpick,header .langpick{display:none}
}
@media (min-width:760px){ .navmenu{display:none} }

/* The masthead on a phone: one row, brand and button. The brand is set at up
   to 2.45rem with a scrub-bar underline and a strapline, which is a fine piece
   of identity on a desktop and a third of the first screen on a phone. It
   keeps the mark and loses the bulk. */
@media (max-width:759px){
  header .wrap{flex-wrap:nowrap;padding-block:9px;gap:12px}
  .brand b{font-size:1.45rem;padding-bottom:7px}
  .brand small{display:none}
  .navtoggle{flex:none}
}

/* ---- reserving the masthead's space ----
   The header is built by JavaScript and prepended, so every page used to jump
   down by the height of it the moment the script ran — the whole of the
   archive's layout shift, and the worst of it on a phone. The fix is to keep
   the space from the first paint: a slot in the HTML with the header's own
   height, which mountChrome replaces in place rather than pushing past.
   Both read the same number, so the swap moves nothing. */
:root{--chrome-reserve:47px}
@media (min-width:760px){ :root{--chrome-reserve:73px} }
header{min-height:var(--chrome-reserve)}
.chromeslot{min-height:var(--chrome-reserve);background:var(--shell)}
@media (min-width:760px){
  /* One row above a phone too, so the reserved height is a number that holds
     rather than a guess that breaks when the controls wrap. */
  header .wrap{flex-wrap:nowrap}
  .brand small{display:none}
  .brand b{font-size:1.7rem;padding-bottom:7px}
}

/* The day's picks are injected by script, so the tab strip and everything
   under it used to drop by the height of them the moment they arrived. The
   grid holds roughly its own height from the first paint instead. The number
   is deliberately a little short of the real thing: under-reserving leaves a
   small settle, over-reserving leaves a hole on the pages where the picks come
   up empty, and a hole is the worse of the two. */
.todgrid:empty{min-height:650px}
@media (min-width:760px){ .todgrid:empty{min-height:370px} }
@media (min-width:1100px){ .todgrid:empty{min-height:410px} }

/* On the narrowest phones (320px) the wordmark wrapped to two lines, making
   the bar 68px against the 47px held for it, so every page jumped as it
   loaded. A touch smaller there keeps it on one line. */
@media (max-width:359px){ .brand b{font-size:1.2rem;white-space:nowrap} }

/* ---- filters on a Moments tab (mountMomentFilters) ----
   Type as chips, because there are few of them and one tap beats a select;
   year and who as selects, because there can be dozens. On a phone the chips
   scroll sideways rather than wrapping into a wall above the list. */
.mfilters{margin:0 0 16px;display:grid;gap:10px}
.mfilters .chips{margin:0}
.mfilters .chip small{font-family:var(--body,inherit);font-weight:500;opacity:.7;letter-spacing:0}
.mfsel{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;max-width:560px}
.mfsel select{width:100%;font:inherit;font-size:.95rem;padding:9px 11px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);color:var(--fg);min-width:0}
.mfcount{margin:0;color:var(--muted);font-size:.88rem;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mfclear{background:none;border:0;padding:0;font:inherit;color:var(--accent-ink,var(--fg));
  text-decoration:underline;cursor:pointer}
.mfempty{margin-top:4px}
@media (max-width:620px){
  .mfilters .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    margin-inline:-16px;padding-inline:16px}
  .mfilters .chips::-webkit-scrollbar{display:none}
  .mfilters .chip{flex:none}
  .mfsel{grid-template-columns:1fr 1fr;max-width:none}
}