/* League page v2 (design handoff "League page v2", October 2026): the
   designer's stylesheet as delivered, over base.css. Fonts come from core.css. */
.p { --blue: #2340F5; --blue-deep: #1529B8; --blue-soft: #EEF1FF; --ink: #0D1330; --ink-2: #161E45; --ink-3: #060A1F; --amber: #FFB81C; --paper: #F2F3F6; --steel: #535C78; --line: #D7DBE4; --line-dark: rgba(255,255,255,0.14);
  --win: #127A4B; --draw: #5D6680; --loss: #C2283B; --live: #D6203A;
  --z-cl: #2340F5; --z-el: #C25E00; --z-ecl: #0B8A7A; --z-rel: #C2283B; --z-pro: #2340F5; --z-rpo: #C25E00;
  font-family: "Archivo SS", "Helvetica Neue", Helvetica, sans-serif; font-stretch: 100%; font-size: 17px; line-height: 1.6; color: var(--ink); background: #FFFFFF; -webkit-font-smoothing: antialiased; }
.p *, .p *::before, .p *::after { box-sizing: border-box; }
.p :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.p .on-dark :focus-visible { outline-color: var(--amber); }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.wide { font-stretch: 125%; font-weight: 800; letter-spacing: -0.03em; }
.cond { font-stretch: 72%; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-sm { width: 16px; height: 16px; }
.cr { width: 22px; height: 24px; object-fit: contain; flex: none; }
.cr-s { width: 18px; height: 20px; object-fit: contain; flex: none; }
.cr-l { width: 30px; height: 34px; object-fit: contain; flex: none; }
.flag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(13,19,48,0.14); flex: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 8px; border: 1.5px solid transparent; font-family: inherit; font-size: 16px; font-weight: 700; font-stretch: 108%; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 150ms, border-color 150ms; }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { background: #FFC94D; color: var(--ink); }
.btn-line { border-color: rgba(255,255,255,0.6); color: #FFFFFF; background: transparent; }
.btn-line:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; }
.btn-ink { border-color: #7F889F; color: var(--ink); background: transparent; }
.btn-ink:hover { border-color: var(--ink); color: var(--ink); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.lnk { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }

/* Header */
.hd { position: relative; z-index: 3; display: flex; align-items: center; gap: 24px; height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; }
.logo:hover { color: #FFFFFF; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--amber); color: var(--ink); display: grid; place-items: center; }
.logo-word { font-size: 20px; font-stretch: 118%; font-weight: 800; letter-spacing: -0.03em; }
.logo-api { font-size: 12px; font-stretch: 80%; font-weight: 800; letter-spacing: 0.04em; padding: 1px 6px; border: 1.5px solid currentColor; border-radius: 5px; opacity: 0.85; }
.nav { display: none; gap: 4px; margin-left: 16px; }
.nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 8px; color: rgba(255,255,255,0.9); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav a:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; }
@media (min-width: 1040px) and (max-width: 1199px) { .hd { gap: 16px; } .nav { margin-left: 4px; gap: 2px; } .nav a { padding: 0 9px; font-size: 14px; } .hd-login { padding: 0 8px; } }
.hd-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hd-login { display: none; color: #FFFFFF; font-weight: 600; font-size: 15px; text-decoration: none; padding: 0 12px; }
.hd-login:hover { color: #FFFFFF; text-decoration: underline; }
.menu-btn { width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.5); background: transparent; color: #FFFFFF; display: grid; place-items: center; cursor: pointer; }
@media (max-width: 479px) { .hd-actions .btn-sm { display: none; } }
.sheet { position: relative; z-index: 3; display: grid; padding: 8px 0 20px; border-top: 1px solid rgba(255,255,255,0.2); }
.sheet a { padding: 14px 0; color: #FFFFFF; font-size: 18px; font-weight: 650; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.14); }

/* Hero */
.hero { position: relative; background: var(--blue); color: #FFFFFF; overflow: hidden; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; mix-blend-mode: luminosity; opacity: 0.16; filter: grayscale(1) contrast(1.2); z-index: -1; }
.hero-body { padding: 20px 0 48px; display: grid; gap: 32px; align-items: start; }
.crumbs { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; font-weight: 650; color: rgba(255,255,255,0.84); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid rgba(255,255,255,0.6); border-top: 1.6px solid rgba(255,255,255,0.6); transform: rotate(45deg); margin-right: 4px; }
.crumbs a { color: #FFFFFF; }
.ttl { display: flex; align-items: center; gap: 18px; }
.ttl-mark { width: 64px; height: 64px; border-radius: 14px; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
.hero-h { margin: 0; font-size: 36px; line-height: 1.02; text-wrap: balance; }
.hero-season { display: block; font-size: 15px; font-weight: 700; font-stretch: 100%; letter-spacing: 0; color: rgba(255,255,255,0.84); margin-top: 6px; }
.hero-lead { margin: 20px 0 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.92); }
.facts-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fchip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(13,19,48,0.35); font-size: 14px; font-weight: 650; }
.fchip .ic { width: 18px; height: 18px; color: var(--amber); }
.fchip-live { background: #FFFFFF; color: var(--live); font-weight: 800; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(214,32,58,0.18); flex: none; }
.tag-demo { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--paper); color: var(--steel); white-space: nowrap; }
.hero .tag-demo-x { background: rgba(13,19,48,0.35); color: #FFFFFF; height: 34px; display: inline-flex; align-items: center; border-radius: 999px; padding: 0 12px; font-size: 13px; }
.cov { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,0.18); border-radius: 14px; overflow: hidden; max-width: 640px; }
.cov li { background: rgba(13,19,48,0.55); padding: 12px 14px; display: grid; gap: 2px; }
.cov li > span { font-size: 13px; font-weight: 650; color: rgba(255,255,255,0.75); }
.cov b { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; font-stretch: 108%; }
.cov b .ic { color: var(--amber); }
.cov b.muted { color: rgba(255,255,255,0.8); font-weight: 700; }

/* Live card */
.lc { background: #FFFFFF; color: var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(4,8,36,0.7); }
.lc-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.lc-top b { font-size: 16px; font-weight: 800; font-stretch: 108%; }
.lc-top small { margin-left: auto; font-size: 13px; color: var(--steel); }
.lc-sub { padding: 10px 18px 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel); background: var(--paper); }
.lm { list-style: none; margin: 0; padding: 0; }
.lm li { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); }
.lm li:first-child { border-top: 0; }
.lm .side { display: grid; gap: 4px; min-width: 0; }
.lm .tm { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; min-width: 0; }
.lm .tm > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm .tm.win span { font-weight: 800; }
.lm .sc { display: grid; gap: 4px; text-align: right; font-stretch: 72%; font-weight: 800; font-size: 19px; line-height: 24px; font-variant-numeric: tabular-nums; }
.lm .sc > span { display: block; height: 24px; }
.min { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 7px; border-radius: 6px; background: rgba(214,32,58,0.1); color: var(--live); font-size: 13px; font-weight: 800; white-space: nowrap; }
.ftl { font-size: 13px; font-weight: 800; color: var(--steel); }
.ko { font-size: 14px; font-weight: 750; color: var(--ink); }
.lc-foot a { font-weight: 700; }
.lc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 12px 18px; background: var(--paper); font-size: 13px; color: var(--steel); }

.hero-ctas { margin-top: 24px; }
.hero-fine { margin: 12px 0 0; font-size: 14px; color: rgba(255,255,255,0.86); }

/* Section nav */
.sn { position: sticky; top: 0; z-index: 20; background: #FFFFFF; border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px -20px rgba(13,19,48,0.5); }
.sn-in { display: flex; align-items: center; gap: 12px; }
.sn-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.only-m { display: none; }
.sn a { display: inline-flex; align-items: center; height: 52px; padding: 0 12px; color: var(--steel); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.sn a:hover { color: var(--ink); border-bottom-color: var(--line); }
.sn a.on { color: var(--ink); border-bottom-color: var(--blue); }
.sn a.sn-btn { flex: none; margin: 6px 0; height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--amber); color: var(--ink); font-weight: 800; }
.sn a.sn-btn:hover { background: #FFC94D; color: var(--ink); }

/* Sections and blocks */
.sec { padding: 56px 0; scroll-margin-top: 56px; }
.sec-paper { background: var(--paper); }
.duo { display: grid; gap: 24px; align-items: start; }
.duo > * { min-width: 0; }
.card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.bh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.bh h2 { margin: 0; font-size: 28px; line-height: 1.08; }
.bh-sub { margin: 6px 0 0; font-size: 15px; color: var(--steel); line-height: 1.45; }
.bh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fresh { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--steel); white-space: nowrap; }
.fresh .ic { width: 15px; height: 15px; }
.api { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 8px; background: #F4F6FB; border: 1px solid var(--line); color: var(--ink); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.api b { color: #0B7A55; font-weight: 800; }
.api:hover { border-color: var(--blue); color: var(--blue); }
.src { margin: 14px 0 0; font-size: 13px; color: var(--steel); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button { height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #FFFFFF; color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tabs button:hover { border-color: #7F889F; }
.tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.tabs button.na { color: var(--steel); border-style: dashed; }
.tabs button.na[aria-selected="true"] { background: var(--steel); border-color: var(--steel); color: #FFFFFF; border-style: solid; }

/* Not available */
.na-box { border: 1.5px dashed #AEB5C6; border-radius: 16px; padding: 22px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; background: #FFFFFF; }
.na-box .ib { width: 40px; height: 40px; border-radius: 10px; background: var(--paper); color: var(--steel); display: grid; place-items: center; }
.na-box b { display: block; font-size: 16.5px; font-weight: 800; font-stretch: 105%; line-height: 1.3; }
.na-box p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--steel); }
.na-box a { font-size: 14px; font-weight: 700; }
.na-grid { display: grid; gap: 12px; }

/* Standings */
.tbl-box { overflow-x: auto; }
.st { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.st th { text-align: right; font-size: 12px; font-weight: 750; color: var(--steel); padding: 12px 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.st th.l { text-align: left; }
.st td { padding: 8px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; height: 46px; }
.st tr:first-child td { border-top: 0; }
.st td.pos { width: 44px; text-align: center; font-weight: 800; color: var(--steel); }
.st td.team { text-align: left; font-weight: 650; }
.st td.team a, .st td.team .tn { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.st td.team a:hover span { text-decoration: underline; }
.st td.pts { font-weight: 800; font-size: 16px; }
.st td.dim { color: var(--steel); }
.st tr.z-cl td.pos { box-shadow: inset 4px 0 0 var(--z-cl); color: var(--z-cl); }
.st tr.z-el td.pos { box-shadow: inset 4px 0 0 var(--z-el); color: var(--z-el); }
.st tr.z-ecl td.pos { box-shadow: inset 4px 0 0 var(--z-ecl); color: var(--z-ecl); }
.st tr.z-rel td.pos { box-shadow: inset 4px 0 0 var(--z-rel); color: var(--z-rel); }
.st tr.z-pro td.pos { box-shadow: inset 4px 0 0 var(--z-pro); color: var(--z-pro); }
.st tr.z-rpo td.pos { box-shadow: inset 4px 0 0 var(--z-rpo); color: var(--z-rpo); }
.form { display: inline-flex; gap: 3px; }
.fm { width: 22px; height: 22px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 800; color: #FFFFFF; }
.fm.fw { background: var(--win); } .fm.fd { background: var(--draw); } .fm.fl { background: var(--loss); }
.nx { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ha { font-size: 12px; font-weight: 750; color: var(--steel); min-width: 14px; text-align: left; }
.ha.live { color: var(--live); }
.zl { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--steel); background: #FBFBFD; }
.zl > span { display: inline-flex; align-items: center; gap: 8px; }
.zl i { width: 12px; height: 12px; border-radius: 3px; }
.zl i.z-cl { background: var(--z-cl); } .zl i.z-el { background: var(--z-el); } .zl i.z-ecl { background: var(--z-ecl); } .zl i.z-rel { background: var(--z-rel); } .zl i.z-pro { background: var(--z-pro); } .zl i.z-rpo { background: var(--z-rpo); }
.hide-sm { display: none; }

/* Fixtures rail */
.rs { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rs b { flex: 1; text-align: center; font-size: 16px; font-weight: 800; font-stretch: 108%; }
.rs button { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--line); background: #FFFFFF; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.rs button:hover { border-color: #7F889F; }
.rs button:disabled { opacity: 0.35; cursor: default; }
.dg { padding: 8px 14px 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel); background: var(--paper); }
.rail .lm li { padding: 9px 14px; grid-template-columns: 46px minmax(0, 1fr) auto; }

/* About */
.about h2 { margin: 0 0 18px; font-size: 32px; line-height: 1.08; }
.about p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; max-width: 720px; }
.about p:first-of-type { font-size: 19px; line-height: 1.55; }
.kf { margin: 0; }
.kf > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.kf > div:first-child { border-top: 0; }
.kf dt { color: var(--steel); font-weight: 650; }
.kf dd { margin: 0; font-weight: 700; }

/* Buy strip */
.strip { background: var(--blue); color: #FFFFFF; padding: 40px 0; }
.strip-in { display: grid; gap: 24px; align-items: center; }
.strip h2 { margin: 0; font-size: 30px; line-height: 1.1; text-wrap: balance; }
.strip p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,0.88); max-width: 600px; }
.strip-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.strip-price { display: flex; align-items: baseline; gap: 10px; }
.strip-price > b { font-size: 56px; line-height: 0.9; }
.strip-price > span { font-size: 14px; line-height: 1.35; color: rgba(255,255,255,0.88); }

/* Position chart */
.pc-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 8px; border-radius: 999px; border: 1.5px solid var(--line); background: #FFFFFF; color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.chip:hover { border-color: #7F889F; }
.chip[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-deep); }
.sel { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; font-weight: 650; color: var(--steel); }
.sel select { height: 38px; border-radius: 10px; border: 1.5px solid var(--line); padding: 0 10px; font-family: inherit; font-size: 14px; font-weight: 650; color: var(--ink); background: #FFFFFF; }
.pc { padding: 18px 18px 14px; }
.pc-frame { position: relative; padding: 4px 64px 30px 30px; }
.pc-plot { position: relative; aspect-ratio: 640 / 380; }
.pc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pc-grid { stroke: #E6E9F0; stroke-width: 1; }
.pc-l { fill: none; stroke: #CDD2DD; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pc-l.hov { stroke: var(--ink); stroke-width: 2.5; }
.pc-plot { cursor: pointer; }
.pc-hl { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pc-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #FFFFFF; pointer-events: none; }
.pc-y { position: absolute; left: -30px; width: 22px; margin-top: -9px; text-align: right; font-size: 12px; font-weight: 700; color: var(--steel); }
.pc-x { position: absolute; bottom: -26px; width: 30px; margin-left: -15px; text-align: center; font-size: 12px; font-weight: 700; color: var(--steel); }
.pc-end { position: absolute; left: 100%; margin: -11px 0 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--blue-deep); white-space: nowrap; }
.pc-col { position: absolute; top: 0; bottom: 0; }
.pc-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: #7F889F; pointer-events: none; }
.pc-tip { position: absolute; z-index: 2; transform: translate(12px, -50%); background: var(--ink); color: #FFFFFF; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; white-space: nowrap; pointer-events: none; box-shadow: 0 12px 28px -14px rgba(4,8,36,0.7); }
.pc-tip.flip { transform: translate(calc(-100% - 12px), -50%); }
.pc-tip b { display: block; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.pc-axis { margin: 0; font-size: 12.5px; color: var(--steel); text-align: center; }

/* Elo */
.elo { list-style: none; margin: 0; padding: 0; }
.elo li { display: grid; grid-template-columns: 26px 24px minmax(0, 1fr) 56px 54px; gap: 10px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 15px; }
.elo li:first-child { border-top: 0; }
.elo .rk { font-weight: 800; color: var(--steel); text-align: center; }
.elo .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elo svg { width: 84px; height: 24px; display: none; }
.elo .sp { fill: none; stroke: #7F889F; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.elo .rt { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.elo .dl { font-size: 13px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.dl.up { color: var(--win); } .dl.down { color: var(--loss); } .dl.flat { color: var(--steel); }
.more-btn { width: 100%; height: 48px; border: 0; border-top: 1px solid var(--line); background: #FBFBFD; color: var(--blue); font-family: inherit; font-size: 15px; font-weight: 750; cursor: pointer; }
.more-btn:hover { background: var(--blue-soft); }

/* Top players */
.pl-cols { display: grid; gap: 0 24px; }
.plist { list-style: none; margin: 0; padding: 0; }
.plist li { display: grid; grid-template-columns: 28px 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.plist .rk { font-weight: 800; color: var(--steel); text-align: center; font-size: 15px; }
.av { width: 48px; height: 48px; border-radius: 50%; border: 3px solid; object-fit: cover; background: #E4E7EE; }
.pn b { display: block; font-size: 16.5px; font-weight: 800; font-stretch: 104%; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13.5px; color: var(--steel); white-space: nowrap; overflow: hidden; }
.pv { text-align: right; }
.pv b { display: block; font-size: 26px; line-height: 1; }
.pv small { display: block; font-size: 12.5px; color: var(--steel); margin-top: 4px; white-space: nowrap; }
.plist li.first .pv b { color: var(--blue); }

/* Team stats */
.tiles { display: grid; gap: 14px; }
.tile { background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.tile h3 { margin: 0; font-size: 17px; font-weight: 800; font-stretch: 108%; }
.tile p { margin: 0 0 8px; font-size: 13px; color: var(--steel); }
.tile ol { list-style: none; margin: 0; padding: 0; }
.tile li { display: grid; grid-template-columns: 18px 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.tile li:first-child { border-top: 0; }
.tile li i { font-style: normal; font-weight: 800; color: var(--steel); font-size: 13px; }
.tile li > span { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile li b { font-weight: 800; font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tile-na { border-style: dashed; border-width: 1.5px; border-color: #AEB5C6; }
.tile-na .nat { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--steel); padding-top: 6px; }

/* Facts */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.facts li { border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: grid; gap: 12px; align-content: start; background: #FFFFFF; }
.facts .ft-top { display: flex; align-items: center; gap: 10px; }
.facts .fi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.facts .tg { font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel); }
.facts p { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 600; }

/* Squad tables */
.dt { width: 100%; border-collapse: collapse; font-size: 15px; }
.dt th { text-align: left; font-size: 12px; font-weight: 750; color: var(--steel); padding: 12px 14px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.dt tr:first-child td { border-top: 0; }
.dt .who { display: flex; align-items: center; gap: 10px; font-weight: 700; white-space: nowrap; }
.dt .clb { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dt .r { text-align: right; }
.dt .muted { color: var(--steel); }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.pill-out { background: rgba(194,40,59,0.1); color: var(--loss); }
.pill-doubt { background: rgba(194,94,0,0.12); color: #9A4A00; }
.pill-loan { background: var(--blue-soft); color: var(--blue-deep); }
.yc { display: inline-flex; gap: 3px; }
.yc i { width: 10px; height: 14px; border-radius: 2px; background: #F2C300; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.yc i.off { background: #E6E9F0; box-shadow: inset 0 0 0 1px #C9CEDA; }
.rule { padding: 12px 14px; font-size: 13.5px; color: var(--steel); background: #FBFBFD; border-top: 1px solid var(--line); }
.coach { list-style: none; margin: 0; padding: 0; }
.coach li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); }
.coach li:first-child { border-top: 0; }
.coach b { display: block; font-size: 16px; font-weight: 800; }
.coach .cw { display: block; font-size: 14.5px; color: var(--steel); }
.bar { height: 8px; border-radius: 4px; background: #E6E9F0; overflow: hidden; min-width: 80px; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--amber); }
.stack { display: grid; gap: 24px; }

/* News */
.news { display: grid; gap: 18px; }
.nl { display: grid; gap: 0; border-radius: 18px; overflow: hidden; background: var(--ink); color: #FFFFFF; text-decoration: none; }
.nl:hover { color: #FFFFFF; }
.nl img { width: 100%; height: 280px; object-fit: cover; display: block; }
.nl div { padding: 22px 24px 26px; display: grid; gap: 10px; }
.nl h3 { margin: 0; font-size: 26px; line-height: 1.15; }
.nl p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.84); }
.ntag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--amber); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; justify-self: start; }
.nmeta { font-size: 13px; color: var(--steel); }
.nl .nmeta { color: rgba(255,255,255,0.7); }
.ncards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ncards a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--ink); text-decoration: none; }
.ncards img { width: 120px; height: 84px; border-radius: 12px; object-fit: cover; }
.ncards b { display: block; font-size: 16.5px; line-height: 1.3; font-weight: 800; margin: 6px 0 4px; }
.ncards a:hover b { text-decoration: underline; }
.ncards .ntag { background: var(--paper); color: var(--steel); }
.nmore { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.nmore a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15.5px; }
.nmore a:hover { text-decoration: underline; }
.nmore small { display: block; font-weight: 500; font-size: 13px; color: var(--steel); }
.nfoot { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }

/* Grounds */
.map { position: relative; background: #E9F0FB; padding: 18px; }
.map-in { position: relative; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.land { fill: #FFFFFF; stroke: #B9C3D8; stroke-width: 1.4; stroke-linejoin: round; }
.mk { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 28px; height: 30px; }
.mk img { width: 22px; height: 25px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(13,19,48,0.35)); }
.clus { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 3px; padding: 4px 8px 4px 6px; border-radius: 999px; background: var(--ink); color: #FFFFFF; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(4,8,36,0.7); }
.clus img { width: 14px; height: 16px; object-fit: contain; }
.clus > span { margin-left: 4px; }
.map-cap { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; font-size: 13px; color: var(--steel); border-top: 1px solid var(--line); background: #FFFFFF; }
.kpis { display: grid; gap: 12px; margin-bottom: 18px; }
.kpi { background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 4px; min-width: 0; }
.kpi > span { font-size: 13px; font-weight: 700; color: var(--steel); }
.kpi b { font-size: 34px; line-height: 1; }
.kpi small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.trav { list-style: none; margin: 0; padding: 0; }
.trav li { display: grid; grid-template-columns: 22px 120px minmax(0, 1fr) 70px; gap: 12px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--line); font-size: 14.5px; }
.trav li:first-child { border-top: 0; }
.trav .tn { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trav .bar i { background: var(--blue); }
.trav b { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.sub-h { margin: 0; padding: 14px 18px 10px; font-size: 15px; font-weight: 800; font-stretch: 105%; border-bottom: 1px solid var(--line); }

/* History */
.pyr { display: grid; gap: 0; }
.tier { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #FFFFFF; }
.tier.cur { border-color: var(--blue); background: var(--blue-soft); }
.tier .tn { width: 44px; height: 44px; border-radius: 10px; background: var(--paper); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--steel); line-height: 1.05; text-align: center; }
.tier.cur .tn { background: var(--blue); color: #FFFFFF; }
.tier b { display: block; font-size: 17px; font-weight: 800; font-stretch: 105%; }
.tier small { display: block; font-size: 13.5px; color: var(--steel); }
.tier .here { display: inline-flex; margin-left: 8px; height: 22px; padding: 0 8px; align-items: center; border-radius: 999px; background: var(--blue); color: #FFFFFF; font-size: 11.5px; font-weight: 800; vertical-align: 2px; }
.split { display: flex; flex-wrap: wrap; gap: 8px; }
.split > * { flex: 1 1 150px; min-width: 0; }
.split .here { display: table; margin: 4px 0 0; }
.mv { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 8px 0; font-size: 13px; font-weight: 750; }
.mv > span { display: inline-flex; align-items: center; gap: 4px; }
.mv .dn { color: var(--loss); } .mv .upw { color: var(--win); }
.mv .ic { width: 15px; height: 15px; }
.champs { list-style: none; margin: 0; padding: 0; }
.champs li { display: grid; grid-template-columns: 74px 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 15px; }
.champs li:first-child { border-top: 0; }
.champs .ssn { font-weight: 800; color: var(--steel); font-variant-numeric: tabular-nums; }
.champs .cn { font-weight: 800; }
.champs .ru { font-size: 13px; color: var(--steel); text-align: right; white-space: nowrap; }
.titles { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); background: #FBFBFD; }
.titles > span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; }
.titles b { color: var(--blue); }

/* Buy box */
.buy { background: var(--ink); color: #FFFFFF; padding: 72px 0; scroll-margin-top: 56px; }
.buy-grid { display: grid; gap: 28px; align-items: start; }
.buy-grid > * { min-width: 0; }
.prop { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255,184,28,0.16); color: var(--amber); font-size: 13px; font-weight: 800; }
.buy h2 { margin: 14px 0 0; font-size: 34px; line-height: 1.06; text-wrap: balance; }
.buy-lead { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.84); max-width: 520px; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.price b { font-size: 64px; line-height: 0.9; }
.price > span { font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.4; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.45; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .ic { color: var(--amber); margin-top: 2px; }
.buy .ctas { margin-top: 24px; }
.buy-fine { margin: 14px 0 0; font-size: 13.5px; color: rgba(255,255,255,0.7); }
.wg { --wtx: #0D1330; --wmut: #5D6680; --wln: #E3E6ED; background: #FFFFFF; color: var(--wtx); border-radius: 14px; overflow: hidden; font-size: 14px; line-height: 1.4; box-shadow: 0 24px 48px -28px rgba(0,0,0,0.6); }
.wg-hd { display: flex; align-items: center; gap: 8px; padding: 11px 14px; color: #FFFFFF; }
.wg-title { font-weight: 800; font-stretch: 110%; font-size: 14px; }
.wg-comp { margin-left: auto; font-size: 12px; font-weight: 650; opacity: 0.9; }
.wg-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wg-tbl th { text-align: left; font-size: 11px; font-weight: 700; color: var(--wmut); padding: 8px 14px 6px; }
.wg-tbl td { padding: 8px 14px; border-top: 1px solid var(--wln); }
.wg-tbl .n { text-align: right; width: 44px; }
.wg-tbl .pos { width: 30px; color: var(--wmut); font-weight: 700; }
.wg-tbl .t { font-weight: 650; }
.wg-tbl .t > span { display: inline-flex; align-items: center; gap: 8px; }
.wg-ft { padding: 8px 14px; border-top: 1px solid var(--wln); font-size: 11px; color: var(--wmut); text-align: right; }
.wg-cap { margin: 12px 0 0; font-size: 13.5px; color: rgba(255,255,255,0.7); }
.code-panel { background: var(--ink-3); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; overflow: hidden; min-width: 0; }
.cp-top { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line-dark); font-size: 13px; color: rgba(255,255,255,0.72); }
.get-pill { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: rgba(126,226,196,0.14); color: #7EE2C4; }
.code { margin: 0; padding: 16px 18px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.75; color: #DCE1F5; white-space: pre; overflow-x: auto; }
.code .k { color: var(--amber); } .code .s { color: #A9B7FF; } .code .n { color: #7EE2C4; } .code .c { color: #8A93B5; }

/* FAQ */
.faq-grid { display: grid; gap: 24px; align-items: start; }
.faq-intro h2 { margin: 0; font-size: 32px; line-height: 1.06; }
.faq-intro p { margin: 14px 0 0; font-size: 17px; color: var(--steel); max-width: 420px; }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 750; font-stretch: 108%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #7F889F; display: grid; place-items: center; color: var(--ink); transition: transform 150ms; }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.faq details p { margin: 0 0 20px; max-width: 680px; font-size: 16px; line-height: 1.65; color: var(--steel); }

/* Related */
.rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rel a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); text-decoration: none; }
.rel a:hover { border-color: #7F889F; color: var(--ink); }
.rel .flag { width: 28px; height: 20px; border-radius: 4px; }
.rel b { display: block; font-size: 16.5px; font-weight: 750; font-stretch: 105%; }
.rel small { display: block; font-size: 13px; color: var(--steel); }
.rel .go { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); }
.lvl { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 750; }
.lvl-basic { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px #7F889F; }
.lvl-full { background: var(--ink); color: #FFFFFF; }

/* Footer */
.ftr { background: var(--ink); color: rgba(255,255,255,0.78); padding: 56px 0 32px; font-size: 15px; }
.ft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.ft-brand { grid-column: 1 / -1; max-width: 360px; }
.ftr .logo, .ftr .logo:hover { color: #FFFFFF; text-decoration: none; }
.ft-brand p { margin: 16px 0 0; line-height: 1.6; }
.ftr h4 { margin: 0 0 12px; font-size: 15px; font-weight: 750; color: #FFFFFF; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr a { color: rgba(255,255,255,0.8); text-decoration: none; }
.ftr a:hover { color: #FFFFFF; text-decoration: underline; }
.ft-bottom { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 14px; }
.ft-status { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255,184,28,0.28); flex: none; }

.duo, .news, .buy-grid, .faq-grid, .pl-cols, .kpis, .rel, .na-grid, .strip-in { grid-template-columns: minmax(0, 1fr); }
.due { display: block; font-size: 11px; font-weight: 800; line-height: 1.15; color: #9A4A00; text-transform: uppercase; letter-spacing: 0.02em; }
.crest-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-top: 1px solid var(--line); background: var(--blue-soft); }
.crest-cta > div { flex: 1 1 260px; }
.crest-cta b { display: block; font-size: 15.5px; font-weight: 800; }
.crest-cta p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--steel); }
.show-m { display: none; width: 100%; height: 46px; margin-top: 10px; border-radius: 12px; border: 1.5px solid var(--line); background: #FFFFFF; color: var(--blue); font-family: inherit; font-size: 15px; font-weight: 750; cursor: pointer; }
.na-wide { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 719px) {
  .show-m { display: block; }
  .clip:not(.open) .xr { display: none; }
  .only-d { display: none; }
  .only-m { display: inline; }
  .hero-ctas .btn { white-space: normal; height: auto; min-height: 52px; padding: 12px 20px; text-align: center; }
  .tiles, .facts { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 8px; scroll-padding: 0 20px; }
  .tiles > *, .facts > * { scroll-snap-align: start; }
  .pc-frame { padding: 4px 44px 30px 26px; }
  .pc-y { left: -26px; }
  .bh h2 { font-size: 26px; }
  .about h2 { font-size: 28px; }
  .about p:first-of-type { font-size: 17.5px; }
  .strip h2 { font-size: 26px; }
  .strip-price > b { font-size: 46px; }
  .dt { font-size: 14px; }
  .dt td, .dt th { padding-left: 10px; padding-right: 10px; }
  .sn a { padding: 0 10px; font-size: 14px; }
  .sn a.sn-btn { padding: 0 12px; font-size: 14px; }
  .lc-top small { display: none; }
}
@media (max-width: 559px) { .champs .ru { display: none; } .champs li { grid-template-columns: 64px 24px minmax(0, 1fr); } }
@media (min-width: 560px) { .hide-sm { display: table-cell; } .elo li { grid-template-columns: 26px 24px minmax(0, 1fr) 84px 56px 54px; } .elo svg { display: block; } }
@media (min-width: 720px) {
  .wrap { padding: 0 40px; }
  .hero-h { font-size: 48px; }
  .cov { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh h2 { font-size: 32px; }
  .pl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ncards { grid-template-columns: 1fr; }
  .rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .na-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .na-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buy h2 { font-size: 44px; }
  .faq-intro h2 { font-size: 44px; }
  .ft-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .ft-brand { grid-column: auto; }
}
@media (min-width: 1040px) {
  .nav { display: flex; }
  .hd-login { display: inline-flex; }
  .menu-btn { display: none; }
  .hero-body { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; padding: 24px 0 64px; }
  .hero-h { font-size: 56px; }
  .duo { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px; }
  .duo.d75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .duo.d57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .duo.d66 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .strip-in { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .news { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; }
  .rel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .buy-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3.6fr) minmax(0, 4fr); gap: 36px; }
  .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .na-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .p * { animation: none !important; transition: none !important; } }

/* Build additions: the initials badge (a dashed grey shield) for a club
   without a crest, in the crest's box. */
.cr-i { display: inline-grid; place-items: center; vertical-align: middle; box-sizing: border-box; background: #EEF0F4; border: 1.5px dashed #B7BECD;
  border-radius: 4px 4px 50% 50% / 4px 4px 40% 40%; color: #535C78; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800;
  font-size: 7px; letter-spacing: 0; line-height: 1; overflow: hidden; white-space: nowrap; }
.cr-l.cr-i { font-size: 10px; }
.mk .cr-i { width: 22px; height: 25px; }
/* A squads block without a second column: its wide tables scroll in their box. */
.stack > * { min-width: 0; }
.facts p { overflow-wrap: anywhere; }
.buy-grid > * { min-width: 0; }
.code-panel, .wg { min-width: 0; max-width: 100%; overflow: hidden; }
pre.code { max-width: 100%; overflow-x: auto; }
.wg-tbl { table-layout: fixed; width: 100%; }
.wg-tbl th:first-child, .wg-tbl td.pos { width: 34px; }
.wg-tbl .n { width: 44px; }
.wg-tbl .t > span { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Long league names ("2. Landesliga West (Niederösterreich)") break inside words on phones. */
.hero-h, h2.wide, .strip h2 { overflow-wrap: break-word; hyphens: auto; }
/* Awarded, or no result from the feed: small grey caps like "Result due". */
.nr { display: block; font-size: 11px; font-weight: 800; line-height: 1.15; color: var(--steel); text-transform: uppercase; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }