/* 11footy v3, "Matchday at night": the social identity on the site (design/site-v3).
   Loaded after site.css: new tokens for both themes, the shared pieces restyled, and the new
   blocks (prefix v-). Bricolage Grotesque for headlines and big numbers, Schibsted for text. */

/* -- tokens ---------------------------------------------------------------------------------- */
:root {
  --paper: #F4F4F1; --surface: #FFFFFF; --sunken: #EFEFEB; --raised: #EFEFEB;
  --ink: #0B0B0C; --text: #0B0B0C; --muted: #5C5E65; --faint: #6E7077;
  --mist: #C9CBD1; --line: #E2E2DD; --line-2: #D0D0CA; --track: #E9E9E5;
  --cobalt: #2A50FF; --cobalt-2: #2A50FF; --cobalt-text: #2442D9; --cobalt-soft: #E8EDFF;
  --home: #0B0B0C; --draw: #C9CBD1; --away: #2A50FF; --focus: #2A50FF;
  --bar: var(--surface); --on-bar: var(--text); --on-bar-muted: var(--muted);
  --display: "Bricolage Grotesque", "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --r: 22px; --r-sm: 14px; --r-xs: 10px; --r-pill: 999px;
  --wrap: 1280px;
  --shadow-2: 0 1px 2px rgba(11, 11, 12, .04);
}
@media (min-width: 1100px) { :root { --gutter: 40px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B0B0C; --surface: #151619; --sunken: #1C1D21; --raised: #1C1D21;
    --ink: #F2F2F0; --text: #F2F2F0; --muted: #A0A2A9; --faint: #8E9099;
    --mist: #4A4C53; --line: #24252A; --line-2: #2E3036; --track: #25262B;
    --cobalt: #3D63FF; --cobalt-2: #3D63FF; --cobalt-text: #8FA6FF; --cobalt-soft: rgba(61, 99, 255, .14);
    --home: #F2F2F0; --draw: #4A4C53; --away: #3D63FF; --focus: #8FA6FF;
    --shadow-2: none;
  }
}
:root[data-theme="dark"] {
  --paper: #0B0B0C; --surface: #151619; --sunken: #1C1D21; --raised: #1C1D21;
  --ink: #F2F2F0; --text: #F2F2F0; --muted: #A0A2A9; --faint: #8E9099;
  --mist: #4A4C53; --line: #24252A; --line-2: #2E3036; --track: #25262B;
  --cobalt: #3D63FF; --cobalt-2: #3D63FF; --cobalt-text: #8FA6FF; --cobalt-soft: rgba(61, 99, 255, .14);
  --home: #F2F2F0; --draw: #4A4C53; --away: #3D63FF; --focus: #8FA6FF;
  --shadow-2: none;
}

/* -- type ------------------------------------------------------------------------------------ */
body { font-size: 15px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.012em; }
.v-d { font-family: var(--display); font-weight: 800; letter-spacing: -.015em; line-height: .98; font-optical-sizing: auto; }
.v-n { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: .9; font-variant-numeric: lining-nums tabular-nums; }
.pc { font-size: .5em; font-weight: 700; margin-left: .06em; letter-spacing: 0; }
.v-kicker { font: 600 14px/1.3 var(--font); color: var(--muted); }
.v-kicker b { color: var(--text); font-weight: 700; }
.v-xl { font-size: clamp(46px, 7vw, 104px); }
.v-l { font-size: clamp(34px, 4.4vw, 60px); }
.v-m { font-size: clamp(26px, 2.8vw, 38px); }
.v-s { font-size: clamp(20px, 1.8vw, 24px); }
.v-away { color: var(--cobalt-text); }
.v-muted { color: var(--muted); } .v-faint { color: var(--faint); }

/* -- top bar, ticker ---------------------------------------------------------------------- */
.topbar { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.topbar .wrap { height: 68px; gap: 24px; }
.wordmark { font-size: 26px; letter-spacing: -.05em; }
.topsearch input { height: 42px; border-radius: var(--r-pill); background: var(--surface); }
@media (min-width: 1100px) {
  .nav { gap: 2px; }
  .nav a { padding: 9px 13px; margin: 0; border: 0; border-radius: var(--r-pill); }
  .nav a[aria-current="page"] { background: var(--sunken); color: var(--text); }
}
.icon-btn { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); width: 42px; height: 42px; }
.ticker { background: var(--paper); }
.tick { gap: 8px; width: 200px; padding: 12px 16px; }
.tick-teams { font-size: 15px; }
.tick-bar { gap: 3px; height: 6px; }
.tick-bar span { border-radius: 99px; }
.tick-pcts { font: 700 12px/1 var(--display); letter-spacing: 0; }

/* -- shared pieces ------------------------------------------------------------------------- */
.card, .phead { border-radius: var(--r); }
.card-head { padding: 22px 24px 14px; }
.card-head h2, .card-head h3 { font-size: 22px; letter-spacing: -.01em; }
.card-head .more, .league-head .more { font-size: 15px; font-weight: 700; }
.card-body { padding: 0 24px 22px; }
.note { padding: 0 24px 16px; }
.list li a, .list li > div { padding: 12px 24px; }
.btn { border-radius: var(--r-pill); min-height: 44px; padding: 10px 20px; font-size: 15px; }
.btn-lg { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.chip { border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 9px 16px; }
.chip[aria-current="page"] { background: var(--text); color: var(--paper); box-shadow: none; }
.select { border-radius: var(--r-pill); height: 40px; }
.input, select.input { border-radius: var(--r-sm); }
.kpi .v { font-family: var(--display); font-weight: 800; letter-spacing: -.015em; font-size: 34px; }
.kpi .v small { font-family: var(--font); font-weight: 600; }
.pbar { gap: 3px; } .pbar span { border-radius: 99px; }
.pbar.lg { height: 16px; gap: 5px; } .pbar.xl { height: 22px; gap: 6px; } .pbar.xl span { border-radius: 99px; }
.mrow { padding: 14px 24px; }
.mrow-prob .pcts { font: 800 14px/1 var(--display); }
.mteam .goals { font: 800 18px var(--display); }
.league-head { padding: 16px 24px; }
.league-head h2, .league-head h3 { font-size: 18px; }
table.t th:first-child, table.t td:first-child { padding-left: 24px; }
table.t th:last-child, table.t td:last-child { padding-right: 24px; }
table.t td.strong { font: 800 17px var(--display); }
.dots i { width: 16px; height: 16px; }
.tabs { padding: 0 20px; }
.tabs a { font-size: 15px; }
.phead-title h1 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.015em; }
.shirt { flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .28)); }

/* bottom bar on phones */
.bottombar { background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bottombar a[aria-current="page"] { color: var(--text); }
.bottombar a[aria-current="page"] svg { color: var(--cobalt-2); }

/* -- v3 blocks ------------------------------------------------------------------------------- */
.v-sec { padding: 52px 0 4px; }
.v-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.v-head h2 { margin: 8px 0 0; }
.v-head .more { font: 700 15px var(--font); color: var(--cobalt-text); white-space: nowrap; }
.v-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); min-width: 0; }
.v-pad { padding: 28px; }
@media (max-width: 560px) { .v-pad { padding: 20px; } .v-sec { padding-top: 40px; } }

/* the 1X2 bar of the posts */
.v-bar { display: flex; gap: 6px; height: 14px; }
.v-bar i { display: block; border-radius: 99px; min-width: 6px; }
.v-bar .h { background: var(--home); } .v-bar .x { background: var(--draw); } .v-bar .a { background: var(--away); }
.v-bar.lg { height: 22px; gap: 8px; } .v-bar.sm { height: 8px; gap: 4px; }
.v-three { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.v-three > :nth-child(2) { text-align: center; } .v-three > :nth-child(3) { text-align: right; }
.v-three .lab { font: 600 14px var(--font); color: var(--muted); margin-top: 6px; }

/* hero: a cobalt field with the stadium in duotone (home) */
.v-hero { position: relative; overflow: hidden; background: #2A50FF; color: #fff; }
.v-hero .ph { position: absolute; inset: 0; background: var(--img) center 20% / cover no-repeat; mix-blend-mode: luminosity; opacity: .5; }
.v-hero .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 56, 200, .85) 0%, rgba(42, 80, 255, .35) 55%, rgba(28, 56, 200, .55) 100%), linear-gradient(180deg, transparent 60%, rgba(20, 40, 160, .55) 100%); }
.v-hero > .wrap { position: relative; }
.v-hero .v-kicker { color: rgba(255, 255, 255, .8); } .v-hero .v-kicker b { color: #fff; }
.v-hero .btn { background: #fff; color: #0B0B0C; }
.v-hero .btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.v-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 72px; }
@media (max-width: 960px) { .v-hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; padding-bottom: 36px; } }
.v-hero h1 { margin: 14px 0 16px; color: #fff; }
.v-hero .lead { font: 500 19px/1.5 var(--font); color: rgba(255, 255, 255, .88); max-width: 540px; margin: 0 0 26px; }
.v-hero .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.v-mcard { background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--text); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: var(--r); padding: 30px; }
.v-mcard .v-kicker { color: var(--muted); } .v-mcard .v-kicker b { color: var(--text); }
.v-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 10px; }
.v-vs .tm { display: grid; justify-items: center; gap: 12px; min-width: 0; }
.v-vs .tm .v-d { font-size: clamp(20px, 2.2vw, 28px); }
.v-vs .ko .v-n { font-size: clamp(36px, 4vw, 52px); }
.v-mcard .v-three .v-n { font-size: clamp(40px, 5vw, 64px); }
.v-mcard .more-facts { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font: 500 14px var(--font); color: var(--faint); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.v-mcard .more-facts b { color: var(--text); }
.v-mcard .mark, .v-vs .mark { margin: 0 auto; }

/* the night hero (match, team, player): dark on night, pale cobalt in light */
.v-night { position: relative; overflow: hidden; background: var(--paper); }
.v-night .ph { position: absolute; inset: 0; background: var(--img) 60% 25% / cover no-repeat; filter: grayscale(1); opacity: .13; }
.v-night .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(232, 237, 255, .6) 0%, rgba(232, 237, 255, .35) 40%, color-mix(in srgb, var(--paper) 92%, transparent) 82%, var(--paper) 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v-night { background: #090A0D; } :root:not([data-theme="light"]) .v-night .ph { opacity: .5; filter: none; } :root:not([data-theme="light"]) .v-night .shade { background: linear-gradient(180deg, rgba(11, 11, 12, .45) 0%, rgba(11, 11, 12, .15) 35%, rgba(11, 11, 12, .85) 80%, var(--paper) 100%), linear-gradient(rgba(42, 80, 255, .28), rgba(42, 80, 255, .28)); } }
:root[data-theme="dark"] .v-night { background: #090A0D; } :root[data-theme="dark"] .v-night .ph { opacity: .5; filter: none; }
:root[data-theme="dark"] .v-night .shade { background: linear-gradient(180deg, rgba(11, 11, 12, .45) 0%, rgba(11, 11, 12, .15) 35%, rgba(11, 11, 12, .85) 80%, var(--paper) 100%), linear-gradient(rgba(42, 80, 255, .28), rgba(42, 80, 255, .28)); }
.v-night > .wrap { position: relative; }

/* match tiles */
.v-days { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.v-days::-webkit-scrollbar, .v-chips::-webkit-scrollbar { display: none; }
.v-day { flex: none; display: grid; gap: 2px; padding: 10px 16px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); min-width: 104px; }
.v-day .w { font: 600 12px var(--font); color: var(--faint); } .v-day .dd { font: 800 21px var(--display); } .v-day .c { font: 600 12px var(--font); color: var(--faint); }
.v-day[aria-current="page"] { background: var(--text); color: var(--paper); border-color: var(--text); } .v-day[aria-current="page"] .w, .v-day[aria-current="page"] .c { color: var(--mist); }
.v-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
.v-chips .chip { cursor: pointer; border: 0; font: 600 14px var(--font); }
.v-chips .chip .c { font-weight: 700; color: var(--faint); margin-left: 4px; }
.v-chips .chip[aria-pressed="true"] { background: var(--text); color: var(--paper); box-shadow: none; } .v-chips .chip[aria-pressed="true"] .c { color: var(--mist); }
.v-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) { .v-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .v-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v-tiles { grid-template-columns: 1fr; gap: 10px; } }
.v-tile { display: grid; gap: 12px; padding: 16px 18px 15px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); transition: border-color .15s, transform .15s; min-width: 0; }
.v-tile:hover { border-color: var(--line-2); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .v-tile:hover { transform: none; } }
.v-tile .meta { display: flex; justify-content: space-between; gap: 8px; font: 600 13px var(--font); color: var(--faint); }
.v-tile .meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-tile .meta b { color: var(--muted); flex: none; } .v-tile .meta b.live { color: #E5484D; }
.v-tile .tr { display: flex; align-items: center; gap: 10px; font: 700 16px/1.2 var(--font); min-width: 0; }
.v-tile .tr .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-tile .tr .p { margin-left: auto; font: 800 23px/1 var(--display); letter-spacing: -.02em; flex: none; }
.v-tile .tr.a .nm, .v-tile .tr.a .p { color: var(--cobalt-text); }
.v-tile .tr .g { margin-left: auto; font: 800 23px/1 var(--display); }
.v-tile .dr { display: flex; justify-content: space-between; font: 600 13px var(--font); color: var(--faint); margin-top: -2px; }
.v-tile .dr b { font: 800 16px var(--display); color: var(--muted); }
.v-tile .mark, .v-tile .shirt { flex: none; }
.v-tile[hidden] { display: none; }

/* number tiles */
.v-grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
@media (max-width: 960px) { .v-grid-2 { grid-template-columns: 1fr; } }
.v-nums { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.v-nums > a, .v-nums > div { padding: 22px 24px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.v-nums > :nth-child(3n) { border-right: 0; } .v-nums > :nth-last-child(-n+3) { border-bottom: 0; }
.v-nums > a:hover { background: var(--sunken); }
.v-nums .v-n { font-size: clamp(38px, 4.2vw, 58px); }
.v-nums .k { font: 600 14px/1.4 var(--font); color: var(--muted); margin-top: 10px; }
.v-nums .k b { color: var(--text); }
@media (max-width: 560px) { .v-nums { grid-template-columns: 1fr 1fr; } .v-nums > :nth-child(3n) { border-right: 1px solid var(--line); } .v-nums > :nth-child(2n) { border-right: 0; } .v-nums > :nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .v-nums > :nth-last-child(-n+2) { border-bottom: 0; } .v-nums > a, .v-nums > div { padding: 18px 16px; } }
.v-rec { display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; }
.v-rec .big { font-size: 96px; white-space: nowrap; } .v-rec .mid { font-size: 64px; }
@media (max-width: 560px) { .v-rec .big { font-size: 72px; } .v-rec .mid { font-size: 52px; } }
.v-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.v-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--home); }
.v-dots i.miss { background: transparent; box-shadow: inset 0 0 0 2px var(--cobalt-2); }

/* players */
.v-watch { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .v-watch { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v-watch { grid-template-columns: 1fr 1fr; gap: 10px; } }
.v-pl { padding: 20px 18px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); display: grid; gap: 10px; align-content: start; min-width: 0; }
.v-pl:hover { border-color: var(--line-2); }
.v-pl .v-n { font-size: 44px; } .v-pl .nm { font: 700 16px/1.2 var(--font); } .v-pl .mt { font: 500 13px/1.35 var(--font); color: var(--faint); }

/* lists inside v-cards */
.v-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 860px) { .v-lists { grid-template-columns: 1fr; } }
.v-lists > .card { margin: 0; }
.v-rank { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font: 600 15px var(--font); }
.v-rank .rk { width: 22px; color: var(--faint); font-weight: 700; } .v-rank .cl { color: var(--faint); font-size: 13px; } .v-rank .g { margin-left: auto; font: 800 24px var(--display); }
.v-rank .grow { min-width: 0; flex: 1; } .v-rank .grow > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-card table.t th:first-child, .v-card table.t td:first-child { padding-left: 0; }
.v-card table.t th:last-child, .v-card table.t td:last-child { padding-right: 0; }
.v-card table.t thead th { background: none; }

/* stories */
.v-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .v-stories { grid-template-columns: 1fr; } }
.v-story { position: relative; overflow: hidden; min-height: 280px; border-radius: var(--r); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; background: #0B0B0C; color: #F2F2F0; }
.v-story .ph { position: absolute; inset: 0; background: var(--img) center / cover; opacity: .55; }
.v-story .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 80, 255, .25), rgba(11, 11, 12, .2) 30%, rgba(11, 11, 12, .95) 85%); }
.v-story > * { position: relative; }
.v-story h3 { font-size: 22px; line-height: 1.12; margin: 0; }
.v-story .v-kicker { color: rgba(242, 242, 240, .7); margin-top: 8px; }
.v-story:hover .ph { opacity: .7; }

/* the live strip and small fixes on the home */
.v-home .live-strip { margin-bottom: 16px; }

/* -- match header ---------------------------------------------------------------------------- */
.v-mhero > .wrap { padding-top: 34px; padding-bottom: 44px; }
.v-crumbs { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.v-crumbs .crumbs { margin: 0; font-size: 14px; }
.v-mvs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin: 38px 0 34px; }
.v-mvs .tm { display: flex; align-items: center; gap: 22px; min-width: 0; }
.v-mvs .tm.a { justify-content: flex-end; text-align: right; }
.v-mvs .tm > span { display: grid; gap: 6px; min-width: 0; }
.v-mvs .nm { font-size: clamp(30px, 4.6vw, 64px); overflow-wrap: anywhere; }
.v-mvs .sub { font: 600 14px var(--font); color: var(--muted); }
.v-mvs .ko { text-align: center; display: grid; justify-items: center; gap: 6px; }
.v-mvs .ko .v-n { font-size: clamp(42px, 5vw, 72px); }
.v-mvs .ko .v-n.score { font-size: clamp(54px, 7vw, 96px); }
.v-mvs .ko .v-n.score.live { color: #E5484D; }
.v-mvs .ko .when { font: 600 14px var(--font); color: var(--muted); }
.v-mvs .mark.big, .v-mvs .shirt { flex: none; }
.v-mthree { margin-top: 18px; }
.v-mthree .v-n { font-size: clamp(50px, 6.6vw, 96px); }
.v-verdict { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.v-verdict h2 { margin: 0; }
.v-verdict p { font: 500 18px/1.5 var(--font); color: var(--muted); margin: 12px 0 0; max-width: 680px; }
@media (max-width: 700px) {
  .v-mvs { grid-template-columns: 1fr 1fr; gap: 18px 12px; margin: 26px 0 24px; }
  .v-mvs .ko { grid-column: 1 / -1; grid-row: 2; }
  .v-mvs .tm { flex-direction: column; align-items: flex-start; gap: 12px; }
  .v-mvs .tm.a { flex-direction: column-reverse; align-items: flex-end; justify-content: flex-end; }
  .v-mvs .mark.big { width: 72px !important; height: 72px !important; }
  .v-verdict { grid-template-columns: 1fr; }
}
.v-mhero.club-band::before { height: 6px; z-index: 1; }
/* the subnav sticks under the top bar */
.subnav.tabs { position: sticky; top: 68px; z-index: 40; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 0; border-bottom: 1px solid var(--line); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.match-nav { margin-top: 16px; }

/* -- forecast cards ------------------------------------------------------------------------- */
.v-ntiles { display: grid; grid-template-columns: repeat(4, 1fr); }
.v-ntiles > div { padding: 22px 24px; border-right: 1px solid var(--line); min-width: 0; }
.v-ntiles > div:last-child { border-right: 0; }
.v-ntiles .k { font: 600 14px var(--font); color: var(--muted); margin-bottom: 12px; }
.v-ntiles .v-n { font-size: clamp(30px, 3vw, 46px); white-space: nowrap; }
.v-ntiles .s { font: 600 13px var(--font); color: var(--faint); margin-top: 8px; }
@media (max-width: 700px) { .v-ntiles { grid-template-columns: 1fr 1fr; } .v-ntiles > div:nth-child(2) { border-right: 0; } .v-ntiles > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .v-ntiles > div { padding: 18px; } }
.prob-list .prob-track { height: 10px; border-radius: 99px; }
.prob-list .prob-track span { border-radius: 99px; }
.prob-list .prob-value { font: 800 17px var(--display); }
.score-grid td { border-radius: 10px; font: 800 14px var(--display); }

/* -- player ----------------------------------------------------------------------------------- */
.v-phero > .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; padding-top: 44px; padding-bottom: 52px; }
.v-phero .shirtbox { width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--club, var(--cobalt-2)) 40%, transparent), transparent 70%); }
.v-phero .crumbs { margin: 0 0 10px; font-size: 14px; }
.v-phero h1 { margin: 0 0 16px; overflow-wrap: anywhere; }
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; }
.v-phero .big { text-align: right; } .v-phero .big .v-n { font-size: clamp(84px, 10vw, 156px); } .v-phero .big .v-kicker { margin-top: 8px; max-width: 280px; margin-left: auto; }
@media (max-width: 900px) { .v-phero > .wrap { grid-template-columns: 1fr; gap: 18px; padding-top: 24px; padding-bottom: 32px; } .v-phero .shirtbox { width: 128px; height: 128px; } .v-phero .shirtbox .shirt { width: 104px; height: 104px; } .v-phero .big { text-align: left; } .v-phero .big .v-kicker { margin-left: 0; } }
.v-career { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; align-items: end; margin-top: 18px; }
.v-career .c { display: grid; align-content: end; gap: 6px; text-align: center; min-width: 0; }
.v-career .b { display: block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); height: calc(var(--h) * 220px); min-height: 3px; border-radius: 8px 8px 3px 3px; }
.v-career .c.best .b { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.v-career .v { font: 800 15px var(--display); } .v-career .c.best .v { font-size: 24px; }
.v-career .l { font: 600 11px var(--font); color: var(--faint); white-space: nowrap; }
@media (max-width: 700px) { .v-career { gap: 3px; } .v-career .b { height: calc(var(--h) * 150px); } .v-career .v { font-size: 10px; } .v-career .c.best .v { font-size: 15px; } .v-career .l { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; font-size: 9px; } }

/* -- team ------------------------------------------------------------------------------------- */
.v-thero > .wrap { padding-top: 26px; padding-bottom: 48px; }
.v-thero .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.v-thero .top .crumbs { margin: 0; font-size: 14px; }
.v-thero .main { display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center; margin-top: 30px; }
.v-thero .shirtbox { width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--club, var(--cobalt-2)) 42%, transparent), transparent 70%); }
.v-thero h1 { margin: 0 0 12px; overflow-wrap: anywhere; }
.v-thero .big { text-align: right; } .v-thero .big .v-n { font-size: clamp(72px, 9vw, 140px); } .v-thero .big .v-kicker { margin-top: 8px; }
@media (max-width: 900px) { .v-thero .main { grid-template-columns: auto 1fr; gap: 18px; margin-top: 20px; } .v-thero .shirtbox { width: 96px; height: 96px; } .v-thero .shirtbox > * { width: 76px !important; height: 76px !important; } .v-thero .big { grid-column: 1 / -1; text-align: left; } }
.v-ntiles.v5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .v-ntiles.v5 { grid-template-columns: 1fr 1fr; } .v-ntiles.v5 > div { border-right: 0; border-bottom: 1px solid var(--line); } .v-ntiles.v5 > div:nth-child(odd) { border-right: 1px solid var(--line); } .v-ntiles.v5 > div:last-child { border-bottom: 0; grid-column: 1 / -1; } }
.form span, .form i { border-radius: 8px; }

/* -- competition ---------------------------------------------------------------------------- */
.v-chero > .wrap { padding-top: 26px; padding-bottom: 44px; }
.v-chero .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.v-chero .top .crumbs { margin: 0; font-size: 14px; }
.v-chero .main { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; margin-top: 28px; }
.v-chero h1 { margin: 0 0 12px; }
.v-chero .markbox .mark { width: 96px; height: 96px; }
.v-chero .big { text-align: right; } .v-chero .big .v-n { font-size: clamp(64px, 8vw, 120px); } .v-chero .big .v-kicker { margin-top: 8px; }
@media (max-width: 900px) { .v-chero .main { grid-template-columns: auto 1fr; gap: 16px; margin-top: 18px; } .v-chero .markbox .mark { width: 56px; height: 56px; } .v-chero .big { display: none; } }

/* -- folding cards and long lists -------------------------------------------------------------- */
.foldable > .card-head, .foldable > .v-fold-head { position: relative; padding-right: 56px; cursor: pointer; user-select: none; }
.foldable > .card-head::after, .foldable > .v-fold-head::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-50%) rotate(-135deg); transition: transform .2s ease; }
.foldable.folded > .card-head::after, .foldable.folded > .v-fold-head::after { transform: translateY(-75%) rotate(45deg); }
.foldable.folded > .card-head { padding-bottom: 22px; }
.foldable > .card-head:hover { background: var(--sunken); }
.folded > :not(:first-child) { display: revert; }
.folded > :not(.card-head):not(.v-fold-head) { display: none !important; }
.more-btn { border-radius: 0 0 var(--r) var(--r); min-height: 50px; font-size: 15px; }
.v-card > .more-btn, .v-pad > .more-btn { border-radius: var(--r-pill); border: 1px solid var(--line); margin-top: 14px; }
.is-more { display: none !important; }
/* rows of cards that scroll sideways on phones instead of piling up */
@media (max-width: 760px) {
  .v-scroll-sm { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
  .v-scroll-sm::-webkit-scrollbar { display: none; }
  .v-scroll-sm > * { flex: 0 0 72%; scroll-snap-align: start; }
  .v-watch.v-scroll-sm > * { flex-basis: 44%; }
  .v-nums .v-n { font-size: 34px; } .v-nums .k { font-size: 13px; margin-top: 6px; }
  .v-head { margin-bottom: 14px; }
  .v-head h2.v-l { font-size: 32px; }
}
.gtabs { top: 68px; padding: 10px 0; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.gtabs button { min-height: 40px; font-size: 15px; padding: 0 18px; }
.gtabs button[aria-current] { background: var(--text); border-color: var(--text); color: var(--paper); }
.app > .gtabs { margin-bottom: -4px; }
.grid > .folded, .grid > .foldable { align-self: start; }

/* -- secondary pages: no side column; a row of league chips; titles without a box ----------- */
@media (min-width: 1024px) {
  .app.with-side { grid-template-columns: minmax(0, 1fr); }
  .app.three { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .app.three .rail { grid-column: auto; } }
.v-leaguebar { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 2px; }
.v-leaguebar::-webkit-scrollbar { display: none; }
.v-leaguebar .chip { display: inline-flex; align-items: center; gap: 8px; }
.v-leaguebar .chip .mark { flex: none; }
.app .v-leaguebar { display: flex; }
.phead { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.phead-top { padding: 22px 0 16px; }
.phead-title h1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -.02em; }
.phead-title .card-sub { font-size: 16px; margin-top: 8px; }
.phead > .kpis, .phead > .card-body + .kpis { background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--r); overflow: hidden; }
.phead > .tabs { border-top: 0; border-bottom: 1px solid var(--line); padding: 0; }
.phead .search-row { padding-left: 0 !important; padding-right: 0 !important; }
.prose { max-width: 720px; }
.prose h2 { font-size: 28px; margin-top: 40px; }
@media (max-width: 560px) { .v-rec { flex-wrap: nowrap; gap: 24px; } .v-rec .big { font-size: 60px; } .v-rec .mid { font-size: 44px; } }

/* ===== polish pass (audit 3 Oct): one measure for every inset, quieter heroes, no stray widths ===== */
/* page gutters: one value on phones too (the old 12px made bars stick out by 4px) */
@media (max-width: 719px) { .wrap { padding: 0 var(--gutter); } }

/* text pages: a reading column, a real card padding, calmer headings */
.prose-card { padding: 36px 40px; }
@media (max-width: 560px) { .prose-card { padding: 22px 20px; } }
.app.reading > .col { max-width: 820px; }
.prose { max-width: none; }
.prose h2 { font-size: 22px; margin: 34px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li::marker { color: var(--faint); font-weight: 700; }
.prose p.lede { font-size: 19px; line-height: 1.55; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.phead-title h1 { text-wrap: balance; }
.system h1 { font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -.02em; }
.system .code { font-family: var(--font); font-weight: 700; }
@media (max-width: 560px) { .phead-title h1 { font-size: 34px; } .phead-top { padding: 16px 0 12px; } }
/* the legal and nations tab strips: no box, no sticky band, no fade */
.phead > .tabs { background: transparent; position: static; box-shadow: none; -webkit-mask-image: none; mask-image: none; }

/* footer: the phone bar's room goes inside the footer, so no grey band under it */
@media (max-width: 719px) {
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
}
.footer-col h2 { font: 700 12px var(--font); letter-spacing: 0; color: var(--muted); }

/* ticker: the text face, room for the arrow */
.tick-top, .tick-pcts { font-family: var(--font); font-weight: 600; font-size: 12px; }
.tick-pcts { font-weight: 700; }
.ticker-track { padding-right: 48px; scroll-padding-right: 48px; }

/* inner rows line up with the card titles (24px) */
.day-head { padding: 14px 24px 4px; }
.group-name { padding: 12px 24px 4px; }
.stat-rows { padding: 4px 24px 20px; }
@media (max-width: 719px) {
  .card-head { padding: 16px 16px 10px; }
  .note { padding: 0 16px 14px; }
  .day-head, .group-name { padding-left: 16px; padding-right: 16px; }
  .stat-rows { padding: 4px 16px 16px; }
  .mrow { padding-left: 16px; padding-right: 16px; }
  .list li a, .list li > div { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 559px) { table.t th:first-child, table.t td:first-child { padding-left: 16px; } table.t th:last-child, table.t td:last-child { padding-right: 16px; } table.t td.n, table.t th.n { padding-left: 8px; } }

/* folding cards: the chevron in the middle of the head */
.foldable > .card-head, .foldable > .v-fold-head { min-height: 64px; }
.foldable > .card-head::after, .foldable > .v-fold-head::after { top: 50%; margin-top: 0; transform: translateY(-30%) rotate(-135deg); }
.foldable.folded > .card-head::after, .foldable.folded > .v-fold-head::after { top: 50%; transform: translateY(-70%) rotate(45deg); }
.foldable.folded > .card-head { padding-top: 20px; padding-bottom: 20px; }
.card-head .card-sub { min-width: 0; }
.rail .card-head { flex-wrap: wrap; row-gap: 2px; }
.rail .card-head h2 { white-space: nowrap; }

/* match rows: the score sits next to the bars, rows a touch tighter */
.mrow-teams { max-width: none; gap: 5px; }
@media (min-width: 720px) {
  .mrow { grid-template-columns: 58px minmax(0, 1fr) 220px 14px; column-gap: 28px; padding-top: 12px; padding-bottom: 12px; }
  .rail .mrow { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 11px 24px; }
}

/* tables: names at the numbers' height, lighter names */
table.t td.team a { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
table.t td.team .nm { line-height: 1.25; }
table.t td.team { font-weight: 600; }
.heat.hot { color: var(--text); }
.heat.hot.deep { color: #fff; }
td.actual { color: var(--text); font-weight: 800; box-shadow: inset 0 -2px 0 var(--cobalt-2); }
.pill-ok { background: var(--cobalt-soft); color: var(--cobalt-text); }

/* fact rows: one number column */
.facts-list .fact-n { flex: none; width: 76px; min-width: 76px; }
@media (max-width: 559px) { .facts-list .fact-n { width: 60px; min-width: 60px; } }

/* numbers to expect: the display face like every other number */
.stat-row .v { font: 800 17px/1 var(--display); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }

/* line-ups on the pitch: names never collide */
@media (max-width: 560px) { .pl-name { max-width: 60px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; } }
/* match events: icon and name on one line */
.ev-line .g-name { flex-wrap: nowrap; }
.ev-line li.ga .g-name { color: var(--cobalt-text); }

/* the date strip and the league chips fade at the edge instead of cutting a chip in half */
.v-days, .day-chips { scroll-padding-inline: 40px; }
.v-leaguebar { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.v-days { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }

/* sticky subnav of the league pages: a full-width band, no box */
.subnav.tabs { border-left: 0; border-right: 0; border-radius: 0; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--paper) 90%, transparent); clip-path: inset(0 -100vmax); margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 719px) { .subnav.tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); } }

/* the night hero: the stadium dimmer and off the middle, so nothing smears behind the numbers */
.v-night .ph { -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .25) 35%, rgba(0, 0, 0, .25) 65%, #000 100%); mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .25) 35%, rgba(0, 0, 0, .25) 65%, #000 100%); }
.v-night .ph { opacity: .2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v-night .ph { opacity: .4; } }
:root[data-theme="dark"] .v-night .ph { opacity: .4; }

/* match hero: smaller names, the numbers lead */
.v-mhero > .wrap { padding-top: 28px; padding-bottom: 36px; }
.v-mvs { margin: 28px 0 24px; }
.v-mvs .nm { font-size: clamp(26px, 3vw, 44px); overflow-wrap: normal; text-wrap: balance; }
.v-mvs .ko .v-n { font-size: clamp(38px, 4vw, 60px); }
.v-mvs .ko .v-n.score { font-size: clamp(52px, 6vw, 84px); }
.v-mthree .v-n { font-size: clamp(44px, 5vw, 72px); }
.v-verdict { margin-top: 28px; padding-top: 24px; }
.v-verdict h2 { font-size: clamp(24px, 2.4vw, 32px); }
.v-verdict p { font-size: 17px; }
@media (max-width: 700px) { .v-mvs .mark.big { width: 48px !important; height: 48px !important; } .v-mvs .shirt { width: 56px; height: 56px; } }

/* team and player heroes: half the bulk */
.v-thero > .wrap { padding-bottom: 32px; }
.v-thero .main { margin-top: 22px; gap: 28px; }
.v-thero .shirtbox, .v-phero .shirtbox { width: 120px; height: 120px; background: none; }
.v-thero .shirtbox > *, .v-phero .shirtbox .shirt { max-width: 104px; max-height: 104px; }
.v-thero h1, .v-phero h1 { font-size: clamp(36px, 4.2vw, 56px); }
.v-thero .big .v-n { font-size: clamp(56px, 6vw, 88px); }
.v-phero > .wrap { padding-top: 30px; padding-bottom: 34px; gap: 32px; }
.v-phero .big .v-n { font-size: clamp(64px, 7vw, 104px); }
.v-phero .big .v-kicker { max-width: 320px; }
@media (max-width: 900px) { .v-thero .shirtbox, .v-phero .shirtbox { width: 72px; height: 72px; } .v-thero .shirtbox > *, .v-phero .shirtbox .shirt { width: 64px !important; height: 64px !important; } }

/* competition hero: the title leads */
.v-chero > .wrap { padding-bottom: 32px; }
.v-chero h1 { font-size: clamp(36px, 4.2vw, 56px); }
.progress { display: block; height: 10px; border-radius: 99px; background: var(--track); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: var(--cobalt-2); }

/* career chart: shorter, dark club colours keep an edge */
.v-career .b { height: calc(var(--h) * 150px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
@media (max-width: 700px) { .v-career .b { height: calc(var(--h) * 110px); } .v-career .l { writing-mode: horizontal-tb; transform: none; font-size: 9px; } .v-career .c:nth-child(even) .l { visibility: hidden; } }

/* phone section titles */
@media (max-width: 560px) { .v-head h2.v-l { font-size: 28px; } }

/* the selected state: cobalt, so the data stays the brightest thing */
.gtabs button[aria-current], .chip[aria-current="page"], .v-chips .chip[aria-pressed="true"] { background: var(--cobalt-2); border-color: var(--cobalt-2); color: #fff; box-shadow: none; }
.v-chips .chip[aria-pressed="true"] .c { color: rgba(255, 255, 255, .75); }

/* charts stay legible on phones */

/* international groups: a gutter and fixed columns */
.groups { column-gap: 24px; padding: 0 24px; }
.group-table table { table-layout: fixed; }
.groups .group-name { padding-left: 0; }
@media (max-width: 719px) { .groups { padding: 0 16px; } }

/* forms: inputs and buttons the same pill; the primary action in cobalt */
.input, select.input { border-radius: var(--r-pill); min-height: 44px; padding-left: 18px; }
textarea.input { border-radius: var(--r-sm); }
.btn.btn-dark { background: var(--cobalt-2); color: #fff; border-color: var(--cobalt-2); }

/* grids: cards keep their own height */
.grid { align-items: start; }
.v-cprog { max-width: 320px; height: 6px; margin-top: 14px; }
/* leagues index: three even columns, aligned mini tables */
@media (min-width: 1100px) { .v-leagues.grid-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
table.v-mini { table-layout: fixed; }
table.v-mini th.pos, table.v-mini td.pos { width: 52px; }
table.v-mini th.n, table.v-mini td.n { width: 52px; }
table.v-mini th.n:last-child, table.v-mini td.n:last-child { width: 72px; }
table.v-mini thead th { font-size: 12px; padding-top: 4px; padding-bottom: 6px; }
.v-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; }
.v-foot .progress { flex: 0 1 120px; height: 6px; }
.card-foot { padding: 14px 24px; } @media (max-width: 719px) { .card-foot { padding: 12px 16px; } }
.pbar.empty { display: block; height: 6px; min-height: 0; background: var(--track); border-radius: 99px; }
.v-folds { display: grid; gap: 10px; } .v-folds > .card { margin: 0; }
table.t tr.gap td { padding: 0 24px; height: 18px; line-height: 12px; color: var(--faint); font-weight: 800; letter-spacing: .2em; border-bottom: 1px solid var(--line); }
/* match events: the side tells the team; substitutions in a quieter, shorter row */
.goal-line li { padding: 10px 24px; }
.ev-line .g-team { display: none; }
.ev-line li { padding-top: 8px; padding-bottom: 8px; }
.ev-line li.ev-sub { padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
.ev-line li.ev-sub .g-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.ev-line li.ga.ev-sub .g-who { justify-content: flex-end; }
.ev-line li.ev-sub .g-assist { font-size: 12px; }
.ev-ico.sub path:first-child { stroke: var(--cobalt-2); } .ev-ico.sub path:last-child { stroke: var(--muted); }
@media (max-width: 560px) { .goal-line li { padding: 8px 16px; } }
.list.kv .grow { display: grid; gap: 2px; } .list.kv .meta { font-size: 12px; } .list.kv .title { white-space: normal; }
/* inside a card body, the inner rows start at the title's edge */
.card-body > .kpis .kpi:first-child { padding-left: 0; }
.card-body > .note { padding-left: 0; padding-right: 0; }
@media (min-width: 1024px) { .app.rail-empty { grid-template-columns: minmax(0, 1fr) !important; } .app.rail-empty > .rail { grid-column: 1 / -1; } }
.facts-list.ages .fact-n { width: 96px; min-width: 96px; font-size: 17px; }
@media (max-width: 559px) { .facts-list.ages .fact-n { width: 78px; min-width: 78px; font-size: 15px; } }
.tt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tt-text { min-width: 0; }
/* a page head over both columns; sub-page chips under the title */
.app > .v-span { grid-column: 1 / -1; }
.v-subtabs { margin: 2px 0 6px; }
.rail .mrow:not(.cup) .mrow-prob .lbl { display: none; }
.mrow.cup .mrow-prob .lbl { font-size: 12px; }
.v-form { padding-top: 6px; }
.v-form .form i, .kpi .form i { width: 26px; height: 26px; font-size: 12px; }
.v-datepick .input { width: auto; min-height: 42px; color: var(--muted); font-weight: 600; }
@media (max-width: 719px) { .v-datepick { display: none; } }
/* peers: one header style, one colour */
.rank-head, .rank-head .v, .rank-head .p { font: 600 12px var(--font); color: var(--muted); }
.rank-row .bar i, .rank-row .bar i.hi { background: var(--cobalt-2); }
.rank-row .p { font: 800 16px var(--display); }
.rank-head .p { font: 600 12px var(--font); color: var(--muted); }
.v-story .fig { font-size: 60px; margin-bottom: 10px; }
/* date strip: the chosen day in cobalt, the strip fades at both ends */
.dates .days a[aria-current="page"] { background: var(--cobalt-2); color: #fff; box-shadow: none; }
.dates .days a[aria-current="page"] .dw { color: rgba(255, 255, 255, .8); }
.dates .days { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); padding: 0 12px; }
/* numbers in tables: the display face, aligned digits */
table.t td.n { font-family: var(--display); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
table.t td.n.strong, table.t td.strong { font-weight: 800; }
/* player hero on phones: the shirt beside the name, the big number under both */
@media (max-width: 900px) {
  .v-phero > .wrap { grid-template-columns: 72px minmax(0, 1fr); gap: 14px 16px; align-items: start; }
  .v-phero .big { grid-column: 1 / -1; }
  .v-phero .chips-row .chip { padding: 6px 12px; font-size: 13px; }
  .v-chero .main { align-items: start; }
}
.more-head.v-d { font-size: 28px; margin: 18px 0 2px; }
/* ===== second review pass ===== */
/* international group tables: the team takes the room, the numbers fixed */
.group-table th:first-child, .group-table td.pos { width: 30px; }
.group-table th.n, .group-table td.n { width: 36px; }
.group-table td.team .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 719px) { .groups { padding: 0; } .groups .group-name { padding-left: 16px; } }
/* charts drawn in a wide box: legible labels on phones */
@media (max-width: 559px) { .chart-wrap { overflow-x: auto; } .chart-wrap svg { min-width: 560px; } }
/* story cards stay dark in both themes: the light-theme cobalt is too dark on them */
.v-story .v-n { color: #8FA6FF; white-space: nowrap; }
.v-story .fig { font-size: clamp(40px, 4.2vw, 60px); }
@media (max-width: 560px) { .v-story { min-height: 170px; padding: 20px; } .v-story .fig { font-size: 40px; } .v-story h3 { font-size: 19px; } }
/* text pages: the reading column in the middle of the page */
.app.reading > .col { margin-inline: auto; width: 100%; }
.prose-card { padding: 28px 32px; }
@media (max-width: 560px) { .prose-card { padding: 20px 16px; } }
.story-card { padding: 24px; } @media (max-width: 719px) { .story-card { padding: 16px; } }
.story-teams { padding: 16px 0 0; margin-top: 18px; }
/* method: one marker for the levels, plain list numbers */
.prose ul:has(.level) { list-style: none; padding-left: 0; }
.prose .level { font-size: 13px; }
.prose ol li::marker { font-variant-numeric: normal; }
/* tabs over the main column: the side column starts with the first card */
@media (min-width: 1024px) { .app:has(> .col > .gtabs:first-child) > .rail { padding-top: 60px; } }
/* intl index on phones: the winner's year on its own line */
@media (max-width: 560px) { .intl-main td .muted { display: block; font-size: 12px; } }
/* nation and team heroes on phones: compact */
@media (max-width: 719px) {
  .v-thero .top .phead-actions { flex: 0 1 auto; margin-left: auto; }
  .v-thero .big .v-n { font-size: 44px; }
  .v-thero .main { gap: 10px 16px; }
  .app.rail-first-sm > .rail { order: -1; }
}
.v-crumb-row { margin: 22px 0 -8px; font-size: 14px; }
.v-status-kpis .kpi .v { font-size: 24px; }
.v-status { display: inline-flex; align-items: center; gap: 8px; }
.v-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #2FB36B; }
.v-status.warn::before { background: #E5A93B; }
.sm-only { display: none; } @media (max-width: 719px) { .sm-only { display: block; } }
.facts-list .fact-n.v-edkey { width: 84px; min-width: 84px; font-size: 15px; }
@media (min-width: 861px) { .v-stories-index > :first-child { grid-column: span 2; min-height: 360px; } .v-stories-index > :first-child h3 { font-size: 30px; max-width: 560px; } .v-stories-index > :first-child .fig { font-size: 88px; } }
.v-slot { flex: none; width: 26px; display: inline-grid; place-items: center; }
/* ===== second review, league pages ===== */
/* card insets: 24px, 16px on phones */
.team-tiles { padding: 0 24px 24px; }
.kpi { padding: 16px 24px; }
/* phones: the visible edge cells of a table keep the 16px inset, whichever columns are hidden */
@media (max-width: 719px) {
  table.t tr > :nth-child(1 of :not(.hide-sm, .hide-md, .hide-xs)) { padding-left: 16px; }
  table.t tr > :nth-last-child(1 of :not(.hide-sm, .hide-md, .hide-xs)) { padding-right: 16px; }
  .league-head { padding: 14px 16px; }
  .card-body { padding: 0 16px 16px; }
  .team-tiles { padding: 0 16px 16px; }
  .tt-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
  .kpi { padding: 12px 16px; }
}
/* the season picker ends at the content edge */
.nav-arrow[data-off] { display: none; }
/* scrolling bars fade on the side that has more */
.gtabs.scrolls:not(.at-start), .tabs.scrolls:not(.at-start) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.gtabs.scrolls.at-end:not(.at-start), .tabs.scrolls.at-end:not(.at-start) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.gtabs.scrolls.at-start:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
/* the xG difference chip: the number face of the table */
.heat { font-family: var(--display); font-weight: 700; letter-spacing: 0; }
/* fact rows: one spec everywhere */
.facts-list li > a, .facts-list li > div, .facts-list.compact li > a, .facts-list.compact li > div { padding: 12px 24px; }
.facts-list .fact-n, .facts-list.compact .fact-n { width: 76px; min-width: 76px; font-size: 20px; }
@media (max-width: 719px) { .facts-list li > a, .facts-list li > div, .facts-list.compact li > a, .facts-list.compact li > div { padding: 11px 16px; } .facts-list .fact-n, .facts-list.compact .fact-n { width: 60px; min-width: 60px; font-size: 18px; } }
/* leagues index: cards of one height, footers at the bottom */
.v-leagues.grid { align-items: stretch; }
.v-leagues > .card { display: flex; flex-direction: column; }
.v-leagues > .card > .card-foot { margin-top: auto; }
.v-leagues .list li a { padding-top: 10px; padding-bottom: 10px; }
/* rank columns */
table.t td.pos, table.t th:first-child:empty { width: 48px; }
/* search buttons: the primary cobalt */
.search-row .btn { background: var(--cobalt-2); color: #fff; }
/* team stats on phones: one-line names */
@media (max-width: 719px) { table.t td.team .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } }
/* insights and records: cards in two columns, no side column */
@media (min-width: 1024px) { .app.v-masonry { grid-template-columns: minmax(0, 1fr) !important; } .app.v-masonry > .col { display: block; columns: 2 420px; column-gap: 16px; } .app.v-masonry > .col > * { break-inside: avoid; margin: 0 0 16px; } .app.v-masonry > .col > .gtabs { display: none; } }
td.actual { box-shadow: none; }
td.actual .hit { display: inline-block; padding: 3px 7px; border-radius: 7px; background: color-mix(in srgb, var(--cobalt-2) 20%, transparent); color: var(--text); }
.group-table td.team { max-width: 0; overflow: hidden; }
.group-table td.team a { display: flex; min-width: 0; max-width: 100%; }
.group-table td.team .nm { min-width: 0; }
.v-streak { display: flex; gap: 10px; align-items: baseline; } .v-streak .big-n { flex: none; min-width: 18px; }
.team-tiles { padding: 16px 24px 24px; }
@media (max-width: 719px) {
  .team-tiles { padding: 12px 16px 16px; }
  .v-thero .shirtbox .mark, .v-thero .shirtbox .mark > *, .v-thero .shirtbox .logomark img { width: 60px !important; height: 60px !important; }
  .v-thero .shirtbox { width: 64px; height: 64px; overflow: hidden; }
}
@media (max-width: 560px) { .v-ntiles .v-n { font-size: 28px; } }
/* ===== second review, core pages ===== */
@media (max-width: 700px) { .v-mvs .mark.big { --s: 48px !important; } .v-mvs .mark.big img { width: 100%; height: 100%; } }
.pbar.empty { padding: 0; }
.v-scroll-sm { scroll-padding-inline: var(--gutter); }
/* inner blocks on the 24px card inset, 16px on phones */
.prob-list, .cmp, .bench-side, .watch-creators, .next-watch, .chart-box .legend { padding-left: 24px; padding-right: 24px; }
.rank-row { padding-left: 24px; padding-right: 24px; }
.v-pad { padding: 24px; }
@media (max-width: 719px) { .prob-list, .cmp, .bench-side, .watch-creators, .next-watch, .chart-box .legend, .rank-row { padding-left: 16px; padding-right: 16px; } .v-pad { padding: 20px 16px; } }
/* win labels under the big numbers: one line */
.v-mthree .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* long market labels get more room */
.prob { grid-template-columns: minmax(0, 1fr) 30% 48px; }
/* a losing away team is muted too */
.mteam.lost .away-text { color: color-mix(in srgb, var(--cobalt-text) 55%, var(--muted)); }
/* nested links in lists */
.list .title a { display: inline; padding: 0; border: 0; }
/* three numbers stay in a row on phones */
@media (max-width: 559px) { .kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis.three .kpi .v { font-size: 26px; } }
.card .form i { width: 24px; height: 24px; font-size: 11px; }
.day-chips a[aria-current="page"] { background: var(--cobalt-2); border-color: var(--cobalt-2); color: #fff; }
.day-chips a[aria-current="page"] .dw, .day-chips a[aria-current="page"] .dn { color: rgba(255, 255, 255, .8); }
.bench-no:empty { display: none; }
@media (max-width: 700px) { .v-career .c.best .b { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text); } .v-career .v { position: relative; z-index: 1; } }
.card-head-sub h3 { font: 700 13px var(--font); color: var(--muted); letter-spacing: .02em; padding-top: 6px; }
.v-n .v-faint { margin: 0 .08em; letter-spacing: 0; }
.v-phero .big .v-kicker { max-width: 340px; }
@media (max-width: 560px) { .pl-name { font-size: 9.5px; max-width: 62px; } }
#h2h .mrow-prob { display: none; } @media (min-width: 720px) { #h2h .mrow { grid-template-columns: 58px minmax(0, 1fr) 14px; } }
/* open forecast cards flow in two columns: no holes beside short cards */
.v-cols { columns: 2 340px; column-gap: 16px; margin-bottom: -16px; }
.v-cols > .card { break-inside: avoid; margin: 0 0 16px; display: block; }
.v-match-nav { margin: 8px 0 40px; } .goal-line .g-team { display: none; }
/* wider number columns where the value is long (after the shared fact-row spec) */
.facts-list.ages .fact-n { width: 96px; min-width: 96px; font-size: 17px; white-space: nowrap; }
.facts-list .fact-n.v-edkey { width: 84px; min-width: 84px; font-size: 15px; }
@media (max-width: 559px) { .facts-list.ages .fact-n { width: 80px; min-width: 80px; font-size: 15px; } }
/* ===== one line of matches (team "Matches" card, calendar) ===== */
.v-tl-sec { padding: 16px 24px 2px; font: 700 12px var(--font); color: var(--muted); letter-spacing: .02em; border-top: 1px solid var(--line); }
.v-tl-sec:first-of-type, .card-head + .v-tl-sec { border-top: 0; padding-top: 4px; }
.v-tl-sec.today { color: var(--cobalt-text); }
.v-tl-day { display: flex; gap: 8px; align-items: baseline; padding-top: 10px; }
.v-tl-day span { color: var(--faint); font-weight: 600; }
.v-tl-day span::before { content: "·"; margin-right: 8px; }
.v-cal-link { display: block; text-align: center; font-weight: 700; }
.v-cal { columns: 2 460px; column-gap: 16px; }
.v-cal > .card { break-inside: avoid; margin: 0 0 16px; }
.v-cal-item.is-next { background: color-mix(in srgb, var(--cobalt-2) 7%, transparent); box-shadow: inset 3px 0 0 var(--cobalt-2); scroll-margin-top: 140px; }
@media (max-width: 719px) { .v-tl-sec { padding-left: 16px; padding-right: 16px; } }
/* open all / close all over the markets */
.v-foldall { display: flex; align-items: center; gap: 8px; }
.v-foldall span { margin-right: auto; font: 700 13px var(--font); color: var(--muted); }
.v-foldall button { border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 700 13px var(--font); border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; }
.v-foldall button:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
/* a folded card is one quiet line */
.foldable.folded > .card-head { border-bottom: 0; }
.foldable > .card-head:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r); }
.v-more-results { border-top: 1px solid var(--line); }
.v-more-results > summary { list-style: none; cursor: pointer; text-align: center; padding: 14px 24px; font: 700 15px var(--font); color: var(--cobalt-text); }
.v-more-results > summary::-webkit-details-marker { display: none; }
.v-more-results[open] > summary { border-bottom: 1px solid var(--line); }
.v-tl-day span:empty { display: none; }
.foldable > .card-head:hover { background: transparent; }
.foldable > .card-head:hover::after { border-color: var(--text); }
.foldable > .card-head { cursor: pointer; }
/* the player's own line in the Matches card */
.v-pm { display: grid; gap: 6px; padding: 8px 24px 12px; border-bottom: 1px solid var(--line); }
.v-pm:hover { background: var(--sunken); }
.v-pm-m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.v-pm-m b { font: 800 16px var(--display); margin: 0 4px; }
.v-pm-s { display: flex; gap: 6px; flex-wrap: wrap; }
.v-pm-s > span { font: 600 12px var(--font); color: var(--muted); background: var(--sunken); border-radius: var(--r-pill); padding: 3px 9px; }
.v-pm-s > span.hl { background: var(--cobalt-soft); color: var(--cobalt-text); }
.v-pchance { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 24px 14px; font: 600 13px var(--font); color: var(--muted); border-bottom: 1px solid var(--line); }
.v-pchance b { font: 800 18px var(--display); color: var(--text); margin-right: 3px; }
.v-cal-wide { columns: auto; display: grid; gap: 16px; }
@media (max-width: 719px) { .v-pm, .v-pchance { padding-left: 16px; padding-right: 16px; } }
.v-pchance { align-items: baseline; }
/* league blocks of the matches page: a card head that folds, the league name links */
.v-lhead h2 a { display: inline-flex; align-items: center; gap: 10px; }
.v-lhead h2 a:hover { color: var(--cobalt-text); }
.v-lhead h2 { font-size: 18px; }
/* form: each team opens on its last five matches */
.v-form-row { border-top: 1px solid var(--line); }
.v-form-row > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; cursor: pointer; font-weight: 700; }
.v-form-row > summary::-webkit-details-marker { display: none; }
.v-form-row > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px 2px 0 0; flex: none; }
.v-form-row[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.v-form-row > summary .title { margin-right: auto; }
.v-form-row[open] { background: color-mix(in srgb, var(--sunken) 50%, transparent); }
.v-form-row .mrow { grid-template-columns: 44px minmax(0, 1fr) 14px; }
.v-form-row .mrow-prob { display: none; }
@media (max-width: 719px) { .v-form-row > summary { padding: 12px 16px; } }
/* table: the next opponent */
.v-next { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 8px; font: 700 11px var(--font); color: var(--faint); }
.v-next:hover { background: var(--sunken); color: var(--text); }
/* home sections that fold: the chevron button beside the "more" link */
.v-fold-btn { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; align-self: flex-end; }
.v-fold-btn::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(2px) rotate(-135deg); }
.folded > .v-head .v-fold-btn::before { transform: translateY(-2px) rotate(45deg); }
.v-fold-btn:hover::before { border-color: var(--text); }
.v-foldsec.folded > :not(.v-head) { display: none !important; }
.v-foldsec.folded > .v-head { margin-bottom: 0; }
.v-head { gap: 12px; }
.v-head > .more { margin-left: auto; }
.v-head:has(> .v-fold-btn) { align-items: flex-end; } .v-head > .more + .v-fold-btn { margin-left: 4px; } .v-pad > .v-head .v-fold-btn, .v-card > .v-head .v-fold-btn { align-self: center; width: 30px; height: 30px; }
/* search: results in two columns, a line for the next match */
.v-search-grid { columns: 2 440px; column-gap: 16px; }
.v-search-grid > .card { break-inside: avoid; margin: 0 0 16px; }
.list .meta.v-next-line { color: var(--cobalt-text); font-weight: 600; }
.v-search-start { flex-wrap: wrap; padding: 0 24px 22px; -webkit-mask-image: none; mask-image: none; }
.v-day[aria-current="page"] { background: var(--cobalt-2); border-color: var(--cobalt-2); color: #fff; }
.v-day[aria-current="page"] .w, .v-day[aria-current="page"] .c { color: rgba(255, 255, 255, .8); }
.v-rowfilter { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 24px 14px; }
.v-rowfilter .chip { border: 0; cursor: pointer; font: 600 13px var(--font); padding: 7px 13px; }
.v-rowfilter .chip .c { color: var(--faint); margin-left: 3px; font-weight: 700; }
.v-rowfilter .chip[aria-pressed="true"] { background: var(--cobalt-2); color: #fff; box-shadow: none; }
.v-rowfilter .chip[aria-pressed="true"] .c { color: rgba(255, 255, 255, .75); }
@media (max-width: 719px) { .v-rowfilter { padding: 0 16px 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }
/* ===== phone pass ===== */
.v-now .mrow.is-played .mrow-prob, .v-cal .mrow.is-played .mrow-prob { display: none; }
@media (min-width: 720px) { .v-now .mrow.is-played, .v-cal .mrow.is-played { grid-template-columns: 58px minmax(0, 1fr) 14px; } }
body:has(.subnav.tabs) .gtabs { top: 121px; }
@media (max-width: 719px) {
  body:not([data-section="/"]):not([data-section="/matches"]) .ticker { display: none; }
  .footer-col a { display: block; padding: 8px 0; }
  .footer-col ul { gap: 0; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 36px; }
  .v-fold-btn { width: 40px; height: 40px; }
  .chip, .follow, .nav-arrow, .dates .nav-arrow { min-height: 40px; }
  .nav-arrow, .dates .nav-arrow { min-width: 40px; }
  .v-rowfilter .chip { min-height: 40px; }
  .chips-row .chip { min-height: 36px; }
}
[data-fold-all] { white-space: nowrap; }
.kpis.three .kpi:last-child { grid-column: auto; }
html.nav-open { overflow: hidden; }
html.nav-open body::after { background: rgba(11, 11, 12, .55); }
@media (max-width: 559px) {
  table.t.fc td.n, table.t.fc th.n { padding-left: 4px; padding-right: 4px; font-size: 13px; }
  table.t.fc td.team .nm { max-width: 150px; }
}