
:root {
  --ink: #1c1915;
  --muted: #6d6458;
  --paper: #f3ecdf;
  --card: #f7f1e4;
  --line: #e4d7bc;
  --club: #0c3d2e;
  --focus: #14663a;
  --brass: #8a6a32;
  --gold: #d7c08a;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background:
    radial-gradient(900px 420px at 50% -180px, rgb(13 94 175 / 0.08), transparent 70%),
    var(--paper);
  color: var(--ink);
  font-family: "Source Sans 3", "DejaVu Sans", "Noto Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  scrollbar-color: var(--brass) var(--paper);
}
::selection { background: #d7c08a; color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip {
  position: absolute;
  left: 12px;
  top: 12px;
  transform: translateY(-140%);
  background: var(--club);
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { transform: none; }
.top, main, footer { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.top { padding: 28px 0 8px; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1, h2, .rank { font-family: Literata, "Iowan Old Style", Palatino, serif; font-weight: 640; }
h1 { margin: 0; font-size: 1.7rem; line-height: 1.05; letter-spacing: -0.03em; }
h2 { margin: 0; font-size: 1.15rem; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: break-word; }
.lede { max-width: 68ch; margin: 12px 0 0; }
.lang {
  display: grid;
  place-items: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--club);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.tonight, .country, footer {
  position: relative;
  margin-top: 28px;
}
.tonight {
  background: var(--card);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 12px 28px rgb(28 22 12 / 0.05);
}
.tonight-head p, .stats, .credit, footer p { color: var(--muted); }
.kicks, .clubs, .jumps ol { list-style: none; margin: 0; padding: 0; }
.kicks {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y;
}
.kick {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 220px;
  min-height: 72px;
  padding: 12px 14px;
  scroll-snap-align: start;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.kick-time, .kick-comp, .club-comp, .flag-names { color: var(--muted); font-size: 0.875rem; }
.kick-time { font-variant-numeric: tabular-nums; }
.kick-teams, .club-name { font-weight: 700; }
.credit { margin: 12px 0 0; }
.jumps { margin-top: 22px; }
.jumps ol { display: flex; flex-wrap: wrap; gap: 8px; }
.jumps a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.jump-rank { color: var(--club); font-variant-numeric: tabular-nums; }
.country {
  overflow: hidden;
  border-radius: 22px;
  background: var(--paper);
  scroll-margin-top: 16px;
}
.flag {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
}
.flag svg { width: 100%; height: 100%; display: block; }
.country-body {
  position: relative;
  padding: 18px;
}
.country-head, .club {
  background: rgb(247 241 228 / 0.94);
  border-radius: 16px;
}
.country-head {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
}
.country-copy { min-width: 0; flex: 1; }
.rank {
  margin: 0;
  min-width: 2.4ch;
  font-size: 1.7rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stats, .flag-names { margin: 4px 0 0; }
.clubs {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.club {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  padding: 12px 14px;
  color: var(--ink);
  text-decoration: none;
}
.club:hover, .kick:hover, .jumps a:hover { box-shadow: inset 0 0 0 1px var(--brass); }
.club:active, .kick:active, .jumps a:active { box-shadow: inset 0 0 0 2px var(--club); }
footer { margin-bottom: 32px; }
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 720px) {
  .clubs { grid-template-columns: 1fr 1fr; }
  .country-body { padding: 16px; }
}
@media (min-width: 1100px) {
  .clubs { grid-template-columns: 1fr 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* country flag chips 2026-10-12 */
.jumps a{position:relative;background-size:cover;background-position:center;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.6);overflow:hidden;isolation:isolate}
.jumps a::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.52));z-index:-1}
.jumps a .jump-rank{color:#fff!important}
.jumps a[href="#albania"]{background-image:url("/europe/flags/albania.png")}
.jumps a[href="#andorra"]{background-image:url("/europe/flags/andorra.png")}
.jumps a[href="#armenia"]{background-image:url("/europe/flags/armenia.png")}
.jumps a[href="#austria"]{background-image:url("/europe/flags/austria.png")}
.jumps a[href="#azerbaijan"]{background-image:url("/europe/flags/azerbaijan.png")}
.jumps a[href="#belgium"]{background-image:url("/europe/flags/belgium.png")}
.jumps a[href="#bosnia-and-herzegovina"]{background-image:url("/europe/flags/bosnia-and-herzegovina.png")}
.jumps a[href="#bulgaria"]{background-image:url("/europe/flags/bulgaria.png")}
.jumps a[href="#croatia"]{background-image:url("/europe/flags/croatia.png")}
.jumps a[href="#cyprus"]{background-image:url("/europe/flags/cyprus.png")}
.jumps a[href="#czechia"]{background-image:url("/europe/flags/czechia.png")}
.jumps a[href="#denmark"]{background-image:url("/europe/flags/denmark.png")}
.jumps a[href="#england"]{background-image:url("/europe/flags/england.png")}
.jumps a[href="#finland"]{background-image:url("/europe/flags/finland.png")}
.jumps a[href="#france"]{background-image:url("/europe/flags/france.png")}
.jumps a[href="#georgia"]{background-image:url("/europe/flags/georgia.png")}
.jumps a[href="#germany"]{background-image:url("/europe/flags/germany.png")}
.jumps a[href="#gibraltar"]{background-image:url("/europe/flags/gibraltar.png")}
.jumps a[href="#greece"]{background-image:url("/europe/flags/greece.png")}
.jumps a[href="#hungary"]{background-image:url("/europe/flags/hungary.png")}
.jumps a[href="#israel"]{background-image:url("/europe/flags/israel.png")}
.jumps a[href="#italy"]{background-image:url("/europe/flags/italy.png")}
.jumps a[href="#kazakhstan"]{background-image:url("/europe/flags/kazakhstan.png")}
.jumps a[href="#latvia"]{background-image:url("/europe/flags/latvia.png")}
.jumps a[href="#lithuania"]{background-image:url("/europe/flags/lithuania.png")}
.jumps a[href="#netherlands"]{background-image:url("/europe/flags/netherlands.png")}
.jumps a[href="#norway"]{background-image:url("/europe/flags/norway.png")}
.jumps a[href="#poland"]{background-image:url("/europe/flags/poland.png")}
.jumps a[href="#portugal"]{background-image:url("/europe/flags/portugal.png")}
.jumps a[href="#romania"]{background-image:url("/europe/flags/romania.png")}
.jumps a[href="#scotland"]{background-image:url("/europe/flags/scotland.png")}
.jumps a[href="#serbia"]{background-image:url("/europe/flags/serbia.png")}
.jumps a[href="#slovakia"]{background-image:url("/europe/flags/slovakia.png")}
.jumps a[href="#slovenia"]{background-image:url("/europe/flags/slovenia.png")}
.jumps a[href="#spain"]{background-image:url("/europe/flags/spain.png")}
.jumps a[href="#sweden"]{background-image:url("/europe/flags/sweden.png")}
.jumps a[href="#switzerland"]{background-image:url("/europe/flags/switzerland.png")}
.jumps a[href="#turkiye"]{background-image:url("/europe/flags/turkiye.png")}
.jumps a[href="#ukraine"]{background-image:url("/europe/flags/ukraine.png")}

/* leagues + quick links 2026-10-12 */
.quick{margin:18px 0 0}.quick a{background:var(--club,#1c3);color:#fff!important;text-shadow:none}.quick a::before{display:none}
.leagues{margin-top:18px}.leagues h3{margin:18px 0 8px;font-size:1.05rem}
.lg-comp,.lg-list,.lg-clubs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lg-chip{position:relative;display:inline-flex;align-items:baseline;gap:6px;padding:8px 12px;border-radius:999px;background-size:cover;background-position:center;color:#fff;font-weight:700;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.6);overflow:hidden;isolation:isolate;min-height:40px;box-sizing:border-box}
.lg-chip::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.55));z-index:-1}
.lg-chip small{font-weight:400;opacity:.95}.lg-chip .jump-rank{color:#fff}
span.lg-chip{opacity:.85}a.lg-chip:hover{box-shadow:inset 0 0 0 2px var(--brass,#c9a)}
.lg-uefa{background:#0b1f4d;text-shadow:none}.lg-uefa::before{display:none}
.lg-clubs a{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.05);text-decoration:none;color:inherit}
@media (max-width:600px){.lg-chip{font-size:.92rem;padding:7px 10px}.lg-chip small{display:block;width:100%}.lg-list li{flex:1 1 100%}.lg-list .lg-chip{display:flex;flex-wrap:wrap;border-radius:14px}}
/* all-clubs v1: club colour tiles */
.flag-img{background-size:cover;background-position:center}
.club.club-col{background:var(--cb);color:var(--cf)}
.club.club-col .club-name,.club.club-col .club-comp{color:var(--cf)}
.club .club-app{display:inline-block;padding:1px 7px;border-radius:999px;font-size:.75rem;font-weight:700;border:1px solid currentColor}
.club.no-app .club-comp{font-style:italic}
.club-name{overflow-wrap:anywhere}
@media (max-width:600px){.clubs{grid-template-columns:1fr 1fr}.club{padding:10px}}
@media (max-width:360px){.clubs{grid-template-columns:1fr}}
.lg-clubs a.club-col{background:var(--cb);color:var(--cf)}

/* impeccable-polish 2026-10-13 — modern premium layer (override-only; match-block untouched) */
:root{--ink:#0d1620;--muted:#4a5562;--paper:#f3f5f7;--card:#fff;--line:#e1e6eb;--ease:cubic-bezier(.2,.7,.2,1)}
body{background:radial-gradient(1100px 480px at 50% -220px,rgb(12 61 46 / .10),transparent 70%),var(--paper);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1{font-size:clamp(1.9rem,1.2rem + 3vw,3.1rem);font-weight:760;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
h2{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);letter-spacing:-.02em;text-wrap:balance}
.lede{font-size:clamp(1.02rem,.98rem + .3vw,1.15rem);color:var(--muted)}
.tonight{border-radius:24px;padding:clamp(18px,3vw,32px);background:var(--card);box-shadow:0 1px 2px rgb(13 22 32/.05),0 24px 48px -28px rgb(13 22 32/.25)}
.kick{border-radius:18px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.kick:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line),0 14px 30px -16px rgb(13 22 32/.35)}
.jumps a,.lang{transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.jumps a:hover,.lang:hover{transform:translateY(-1px)}
.country,footer{margin-top:clamp(32px,5vw,56px)}
.gi-hero{background-size:cover;background-position:center;position:relative;overflow:hidden;border-radius:24px;margin:20px 0 4px;background:#06111c;aspect-ratio:16/7}
.gi-hero video,.gi-hero img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:719px){.gi-hero{aspect-ratio:16/9;border-radius:18px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.gi-hero video{display:none}}

/* gi-fx 2026-10-13: emblems, team backdrops, reveals, derby (match pill .mb-mid untouched) */
.gi-t{display:flex;align-items:center;gap:8px;position:relative;isolation:isolate;padding:6px 8px;border-radius:12px;color:#0d1620}
.mb-h.gi-t{justify-content:flex-end}.mb-a.gi-t{justify-content:flex-start}
.gi-bg::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,rgb(255 255 255/.86),rgb(255 255 255/.86)),linear-gradient(90deg,color-mix(in srgb,var(--club,#888) 55%,transparent),transparent),var(--flag) center/cover no-repeat;opacity:.95}
.mb-a.gi-bg::before{background:linear-gradient(270deg,rgb(255 255 255/.86),rgb(255 255 255/.86)),linear-gradient(270deg,color-mix(in srgb,var(--club,#888) 55%,transparent),transparent),var(--flag) center/cover no-repeat}
.gi-t a{color:#0d1620}
.gi-em{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgb(0 0 0/.12)}
.gi-em img{width:24px;height:24px;object-fit:contain}
.gi-ini{font:800 .7rem/1 ui-sans-serif,system-ui,sans-serif;color:#fff;background:var(--c,#3a4652);text-shadow:0 1px 1px rgb(0 0 0/.6)}
@media (max-width:600px){.gi-em{width:22px;height:22px}.gi-em img{width:18px;height:18px}.gi-t{gap:5px;padding:4px 5px}}
.gi-rv{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.gi-rv.gi-in{opacity:1;transform:none}
.mb.live .mb-score{animation:gi-pulse 1.6s ease-in-out infinite}
@keyframes gi-pulse{50%{box-shadow:0 0 0 6px rgb(198 22 29/0)}0%,100%{box-shadow:0 0 0 0 rgb(198 22 29/.45)}}
.gi-derby{position:relative;isolation:isolate;border-radius:16px;overflow:hidden;padding-top:18px}
.gi-derby::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,var(--c1) 0 46%,var(--c2) 54% 100%);opacity:.22;transform:translateX(0)}
.gi-derby::after{content:"DERBY";position:absolute;top:2px;left:50%;transform:translateX(-50%);font:800 .62rem/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.3em;color:#fff;background:#0d1620;padding:3px 8px;border-radius:999px}
html[lang^=el] .gi-derby::after{content:"ΝΤΕΡΜΠΙ"}
.gi-derby.gi-on::before{animation:gi-clash 3.2s cubic-bezier(.6,0,.4,1) infinite alternate}
@keyframes gi-clash{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.gi-derby.gi-on::after{animation:gi-glow 2.4s ease-in-out infinite}
@keyframes gi-glow{50%{box-shadow:0 0 14px 2px color-mix(in srgb,var(--c1) 70%,transparent)}}
.gi-rm .gi-rv{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.gi-rv{opacity:1!important;transform:none!important}.gi-derby::before,.gi-derby::after,.mb.live .mb-score{animation:none!important}}

@media print{.gi-hero,.gi-derby::after{display:none}.gi-rv{opacity:1;transform:none}.gi-bg::before,.gi-derby::before{display:none}body{background:#fff}}

/* gi-fx fit */
.gi-t{min-width:0;overflow:hidden;padding:4px 5px;gap:6px}.gi-t>a,.gi-t>span:not(.gi-em){min-width:0;overflow-wrap:anywhere}.gi-em{width:24px;height:24px}.gi-em img{width:20px;height:20px}

/* gi-fx fit2 */
.mb-h.gi-t,.mb-a.gi-t{flex-direction:column;justify-content:center;text-align:center;gap:4px;padding:6px 4px}
.mb-h.gi-t .gi-em{order:-1}
.gi-t>a,.gi-t>span:not(.gi-em){overflow-wrap:normal;word-break:normal;hyphens:auto;font-size:.88rem;line-height:1.2}
.mb-h.gi-bg::before,.mb-a.gi-bg::before{background:linear-gradient(180deg,rgb(255 255 255/.8),rgb(255 255 255/.92)),linear-gradient(180deg,color-mix(in srgb,var(--club,#888) 50%,transparent),transparent),var(--flag) center/cover no-repeat}
.top-row h1{font-size:clamp(1.7rem,1.1rem + 2.6vw,3.1rem);min-width:0}.top-row .lang{flex:none}
