/* Informator meczowy FanPulse — wygląd stron (wzór: prototyp Górnik – Legia, 30.10.2026).
   Barwy rywala: --legia (ustawiana z dokumentu), sponsor: --sponsor-bg / --sponsor-accent. */
/* Kierunek: drukowany program meczowy Górnika. Każda strona ma jeden kolor (granat, biel, czerwień, czerń ze zdjęciem),
   ostre krawędzie, cienkie linie podziału zamiast kafli, plakatowe nagłówki. Skos jak na gornikzabrze.pl. */
:root {
  --navy: #12235A;
  --red: #E40728;
  --legia: #2FA66A;
  --draw: #8C95AC;
  --gold: #D6A329;
  --ink: #0E0F12;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --sans: "Hubot Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tricolor: linear-gradient(90deg, #fff 0 33.34%, #1F3C98 33.34% 66.67%, #E40728 66.67%);
  --bar-h: 52px;
  --dock-h: 60px;
  --page-h: calc(100svh - var(--bar-h) - var(--dock-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  --page-w: min(calc(100vw - 32px), calc(var(--page-h) * 9 / 16));
  --press-scale: 0.96;
  --press-in: 90ms cubic-bezier(0.3, 0, 0.5, 1);
  --press-out: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --chrome-fg: #FFFFFF;
  --chrome-muted: rgba(255, 255, 255, 0.55);
  --chrome-line: rgba(255, 255, 255, 0.16);
  /* Pyrlik i żelazko 1:1 z herbu (ścieżka z oficjalnego SVG na gornikzabrze.pl) — raz na stronę. */
  --emblem-light: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='11.8945%2030.8148%205.2911%204.3597'%3E%3Cpath%20fill='%23FFFFFF'%20fill-opacity='.075'%20d='M12.741%2033.1428L11.8945%2032.2116L13.3759%2030.8148L14.2226%2031.6613L13.757%2032.1692L14.7305%2033.1428L15.6618%2032.1692L15.1538%2031.7036L16.0004%2030.8571L17.1856%2031.9153L16.8893%2033.4391L16.085%2032.6349L15.1538%2033.5661L16.2543%2034.6666L15.8734%2035.1322L14.7305%2033.9894L13.5029%2035.1745L13.122%2034.7089L14.2649%2033.5661L13.3336%2032.5925L12.741%2033.1428Z'/%3E%3C/svg%3E");
  --emblem-dark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='11.8945%2030.8148%205.2911%204.3597'%3E%3Cpath%20fill='%2312235A'%20fill-opacity='.06'%20d='M12.741%2033.1428L11.8945%2032.2116L13.3759%2030.8148L14.2226%2031.6613L13.757%2032.1692L14.7305%2033.1428L15.6618%2032.1692L15.1538%2031.7036L16.0004%2030.8571L17.1856%2031.9153L16.8893%2033.4391L16.085%2032.6349L15.1538%2033.5661L16.2543%2034.6666L15.8734%2035.1322L14.7305%2033.9894L13.5029%2035.1745L13.122%2034.7089L14.2649%2033.5661L13.3336%2032.5925L12.741%2033.1428Z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { height: 100%; color-scheme: dark; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { height: 100%; margin: 0; overflow: hidden; background: #060709; color: var(--chrome-fg); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.nojs { position: fixed; left: 12px; right: 12px; bottom: calc(var(--dock-h) + 12px); z-index: 80; padding: 12px 14px; background: #FFE209; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.4; text-align: center; }
.js .nojs { display: none; }

/* ---------- Mikrointerakcje (standard press.css) ---------- */
.tap { -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; transition: transform var(--press-out), opacity var(--press-out), background-color var(--press-out), color var(--press-out), box-shadow var(--press-out); }
.tap:active { transform: scale(var(--press-scale)); transition: transform var(--press-in), opacity var(--press-in); }
@media (hover: hover) and (pointer: fine) {
  .tap[data-lift]:hover { transform: translateY(-2px); }
  .tap:hover [data-nudge] { transform: translateX(3px); }
}
.tap [data-nudge] { transition: transform var(--press-out); }
.tap:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.is-tweening { transition: none !important; }

/* ---------- Ramka czytnika ---------- */
.app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.bar { height: var(--bar-h); padding: 8px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.progress { display: flex; gap: 2px; }
.progress button { flex: 1; height: 14px; padding: 0; border: 0; background: none; position: relative; }
.progress button::before, .progress button::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; }
.progress button::before { background: rgba(255, 255, 255, 0.2); }
.progress button::after { background: rgba(255, 255, 255, 0.7); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--reveal), background-color 0.2s ease-out; }
.progress button.is-done::after { transform: scaleX(1); }
.progress button.is-current::after { transform: scaleX(1); background: var(--red); }
.bar__meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--chrome-muted); text-transform: uppercase; font-stretch: 75%; font-weight: 600; letter-spacing: 0.02em; }
.bar__meta strong { color: var(--chrome-fg); font-weight: 800; }
/* Informator osadzony na innej stronie: otwarcie w pełnym oknie (na własnej stronie — ukryte). */
.bar__full { display: none; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; color: var(--chrome-fg); text-decoration: none; }
.bar__full svg { width: 12px; height: 12px; }
.is-embedded .bar__full { display: inline-flex; }
/* Lektor domyślnie wyłączony — dostępny tylko z `?narrator=on` (ustawienie udostępniania)
   i tylko w językach z nagraniem (`no-narrator-lang` ustawia renderer i narrator.js). */
.no-narrator [data-narrator], .no-narrator [data-narrate-start], .no-narrator .narr,
.no-narrator-lang [data-narrator], .no-narrator-lang [data-narrate-start], .no-narrator-lang .narr { display: none !important; }
/* Wybór języka: na okładce i w pasku, więc da się go zmienić na każdej stronie. */
.lang { display: inline-flex; border: 1px solid currentColor; }
.lang button { border: 0; background: none; color: inherit; font-family: var(--sans); font-weight: 800; font-stretch: 75%; letter-spacing: 0.04em; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.lang button[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); }
.lang--bar button { min-width: 32px; height: 24px; padding: 0 6px; font-size: 11px; }
.lang--cover { color: #FFFFFF; }
.lang--cover button { min-width: 10cqw; height: 7.4cqw; padding: 0 2cqw; font-size: 3.2cqw; }
.track { display: flex; align-items: center; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: calc((100vw - var(--page-w)) / 2); outline: none; }
.track::-webkit-scrollbar { display: none; }
.dock { height: var(--dock-h); display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 4px; padding: 0 16px; }
/* Lektor: dock dostaje drugi rząd na pasek odtwarzania — wszystkie przyciski zostają, strona nie jest zasłonięta. */
:root.is-narrating { --dock-h: 104px; }
.dock button { height: 44px; min-width: 44px; padding: 0 12px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; font-stretch: 80%; }
.dock button[disabled] { opacity: 0.3; cursor: default; }
.dock button[aria-pressed="true"] { background: var(--red); color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
  [data-narrator][aria-pressed="true"] .wave { animation: narrator-wave 1.1s ease-in-out infinite; }
  [data-narrator][aria-pressed="true"] .wave--far { animation-delay: 0.25s; }
}
@keyframes narrator-wave { 50% { opacity: 0.2; } }
/* Lektor: pasek odtwarzania nad dolną nawigacją, szerokości strony — oś postępu bieżącego slajdu. */
.narr { order: -1; flex: 0 0 100%; padding-inline: max(0px, (100% - var(--page-w)) / 2); min-width: 0; display: flex; align-items: center; gap: 2px; font-size: 12px; font-variant-numeric: tabular-nums; animation: narr-in 0.3s var(--reveal); }
.dock .narr button { min-width: 38px; padding: 0 7px; }
.narr svg { width: 18px; height: 18px; }
[data-narr-toggle][data-state="playing"] .narr__play, [data-narr-toggle]:not([data-state="playing"]) .narr__pause { display: none; }
.narr__time { flex: none; min-width: 30px; text-align: center; color: var(--chrome-muted); }
.narr__track { position: relative; flex: 1; min-width: 48px; height: 32px; margin: 0 4px; cursor: pointer; touch-action: none; }
.narr__track::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: rgba(255, 255, 255, 0.25); }
.narr__track i { position: absolute; left: 0; top: 14px; width: 100%; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; }
.narr__voice span { display: none; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 560px) { .narr__voice span { display: inline; } }
/* W trakcie czytania odcinek bieżącej strony w górnym pasku pokazuje postęp nagrania. */
.progress.is-narrating button.is-current::after { transform: scaleX(var(--narr, 0)); transition: none; }
@keyframes narr-in { from { opacity: 0; } }
.voices { display: grid; padding: 34px 20px 4px; }
.voices h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 28px; text-transform: uppercase; }
.voice { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border: 0; border-top: 1px solid var(--chrome-line); background: none; font-size: 15px; font-weight: 700; text-align: left; }
.voice[aria-pressed="true"]::after { content: ""; width: 10px; height: 10px; background: var(--red); }
.voices__note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--chrome-muted); }
.dock svg { width: 20px; height: 20px; }
.dock__count { min-width: 64px; text-align: center; font-family: var(--display); font-size: 17px; color: var(--chrome-fg); font-variant-numeric: tabular-nums; }
.dock__label { display: none; }
@media (min-width: 560px) { .dock__label { display: inline; } }

/* ---------- Strona 9:16 i motywy stron ---------- */
.pg {
  --bg: var(--ink); --fg: #FFFFFF; --fg-2: rgba(255, 255, 255, 0.84); --muted: rgba(255, 255, 255, 0.62);
  --line: rgba(255, 255, 255, 0.22); --accent: var(--red); --btn-bg: #FFFFFF; --btn-fg: var(--ink);
  flex: 0 0 var(--page-w); width: var(--page-w); aspect-ratio: 9 / 16; scroll-snap-align: center; scroll-snap-stop: always;
  position: relative; overflow: hidden; container-type: inline-size; background: var(--bg); color: var(--fg);
  opacity: 0.5; transform: scale(0.95); transition: opacity 0.35s ease-out, transform 0.45s var(--reveal);
}
.pg--navy { --bg: var(--navy); --fg: #FFFFFF; --fg-2: rgba(255, 255, 255, 0.88); --muted: rgba(255, 255, 255, 0.7); --line: rgba(255, 255, 255, 0.3); --accent: #FFFFFF; --btn-bg: #FFFFFF; --btn-fg: var(--navy); }
.pg--white { --bg: #FFFFFF; --fg: #0B1640; --fg-2: #2B3558; --muted: #5E6785; --line: rgba(11, 22, 64, 0.16); --accent: var(--red); --btn-bg: var(--navy); --btn-fg: #FFFFFF; }
.pg--red { --bg: var(--red); --fg: #FFFFFF; --fg-2: rgba(255, 255, 255, 0.92); --muted: rgba(255, 255, 255, 0.78); --line: rgba(255, 255, 255, 0.4); --accent: #FFFFFF; --btn-bg: #FFFFFF; --btn-fg: var(--red); }
.pg--navy { background: linear-gradient(170deg, #050A1F 0%, #0B163F 40%, #12235A 100%); }
.pg--red { background: linear-gradient(170deg, #14030A 0%, #4D0614 30%, #A1051D 66%, #E40728 100%); }
.pg--white { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #E6EAF4 100%); }
.pg--navy::before, .pg--red::before, .pg--white::before {
  content: ""; position: absolute; right: -18cqw; bottom: 14cqw; width: 82cqw; aspect-ratio: 5.2911 / 4.3597; background: var(--emblem-light) center / contain no-repeat; pointer-events: none;
}
.pg--white::before { background-image: var(--emblem-dark); }
.pg.is-current { opacity: 1; transform: none; }
.pg__in { position: absolute; inset: 0; padding: 8cqw 7cqw 13cqw; display: flex; flex-direction: column; }
.pg__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg__shade { position: absolute; inset: 0; pointer-events: none; }
.pg__foot { position: absolute; left: 7cqw; right: 7cqw; bottom: 5cqw; display: flex; align-items: baseline; gap: 2cqw; font-size: 2.6cqw; font-weight: 700; text-transform: uppercase; font-stretch: 75%; letter-spacing: 0.02em; color: var(--muted); }
.pg__foot b { margin-left: auto; font-family: var(--display); font-weight: 400; font-size: 3.6cqw; letter-spacing: 0; color: var(--fg); }
.burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.burst i { position: absolute; width: 1.8cqw; height: 3cqw; }
/* Przed animacją chowamy tylko slajdy bieżący i sąsiednie (`is-near`) — reszta treści
   zostaje widoczna, także dla wyszukiwarki renderującej stronę. */
.js-animations .pg.is-near:not(.is-played) [data-a] { opacity: 0; }

/* ---------- Typografia ---------- */
.kicker { font-size: 3cqw; line-height: 1.2; font-weight: 800; font-stretch: 75%; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.kicker--red { color: var(--accent); }
.h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 16cqw; line-height: 0.98; text-transform: uppercase; }
.h2 { margin: 2cqw 0 0; font-family: var(--display); font-weight: 400; font-size: 12cqw; line-height: 1.1; text-transform: uppercase; text-wrap: balance; }
.h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 6cqw; line-height: 1; text-transform: uppercase; }
.lead { margin: 0; font-size: 3.8cqw; line-height: 1.45; color: var(--fg-2); }
.lead + .lead { margin-top: 3cqw; }
.lead strong { color: var(--fg); font-weight: 700; }
.small { margin: 0; font-size: 2.9cqw; line-height: 1.45; color: var(--muted); }
.tri { height: 1.4cqw; width: 100%; background: var(--tricolor); transform-origin: left; }
.pill { display: inline-block; align-self: flex-start; padding: 1.2cqw 2.4cqw; background: var(--red); color: #FFFFFF; font-size: 3cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.02em; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 3.8cqw 4.4cqw; border: 0; background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; text-align: left; font-size: 3.6cqw; font-weight: 800; font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.02em; }
.cta svg { width: 4.6cqw; height: 4.6cqw; flex: none; }
.cta--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 0.5cqw var(--fg); }
.crest { --crest: 13cqw; width: var(--crest); height: var(--crest); object-fit: contain; flex: none; }
/* Herb Górnika ma nad tarczą gwiazdkę: tarcza to 84,8% wysokości obrazka (plik z CMS — gwiazdka
   0–61 px, tarcza 78–511 px z 512). Obok herbu rywala równamy tarcze: obrazek wyższy o gwiazdkę
   i wysunięty w górę ujemnym marginesem — tarcza ma wysokość ramki, układ się nie przesuwa.
   Bez transform/scale: GSAP (pop, Flip) nadpisałby skalę. */
:is(.crest, .duo-crest, .standings .team img, .ms__score img).crest--star { height: calc(var(--crest) / 0.848); margin-top: calc(var(--crest) - var(--crest) / 0.848); }
.spacer { flex: 1; }
.card { border-top: 1px solid var(--line); padding: 3cqw 0 0; }
.chev { width: 3.6cqw; height: 3.6cqw; flex: none; opacity: 0.55; }

/* ---------- Okładka ---------- */
.cover .pg__bg { object-position: 58% 30%; }
/* Od zdjęcia do ciemnego granatu: tytuł i dane meczu leżą na gradiencie, bez osobnego bloku. */
.cover .pg__shade { background: linear-gradient(180deg, rgba(5, 10, 32, 0.55) 0%, rgba(5, 10, 32, 0) 22%, rgba(11, 22, 63, 0) 34%, rgba(11, 22, 63, 0.82) 54%, #0B163F 68%, #081130 100%); }
.cover__top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.cover__league { width: 44cqw; height: auto; }
.cover__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 3cqw; }
.cover__round { font-family: var(--display); font-size: 6cqw; line-height: 1; text-align: right; }
.cover__round small { display: block; margin-top: 0.6cqw; font-family: var(--sans); font-size: 2.6cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.cover__title { margin: 3cqw 0 4cqw; text-shadow: 0 0.6cqw 3cqw rgba(0, 0, 0, 0.45); }
.cover__panel { position: relative; margin: 0 -7cqw -13cqw; padding: 2cqw 7cqw 6cqw; }
.vs { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 1.6cqw; }
.vs .crest { --crest: 15cqw; }
.vs__name { font-family: var(--display); font-size: 5.3cqw; line-height: 1; text-transform: uppercase; }
.vs__name--right { text-align: right; }
.vs__name small { display: block; margin-top: 0.8cqw; font-family: var(--sans); font-size: 2.5cqw; font-weight: 700; font-stretch: 75%; color: rgba(255, 255, 255, 0.72); }
.vs__x { font-size: 2.8cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.kick { margin-top: 3.6cqw; font-family: var(--display); font-size: 5.6cqw; line-height: 1; text-transform: uppercase; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 3cqw; border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.countdown div { padding: 1.8cqw 0 1.8cqw 2.6cqw; border-left: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden; }
.countdown div:first-child { border-left: 0; padding-left: 0; }
.countdown b { display: block; font-family: var(--display); font-weight: 400; font-size: 7.4cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { display: block; margin-top: 0.6cqw; font-size: 2.5cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.countdown[data-state="live"] div, .countdown[data-state="over"] div { display: none; }
.countdown__state { grid-column: 1 / -1; display: none; margin: 0; padding: 2.6cqw 0; font-family: var(--display); font-size: 5.4cqw; text-transform: uppercase; }
.countdown[data-state="live"] .countdown__state, .countdown[data-state="over"] .countdown__state { display: block; }
.cover__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 3.6cqw; }
.sponsor { display: flex; align-items: center; gap: 3.4cqw; }
.sponsor img { height: 6.6cqw; width: auto; }
.sponsor .sponsor__mw { height: 9cqw; }
.cover__start { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-top: 3.6cqw; }
.cover__start .cta { padding: 3cqw 3.6cqw; font-size: 3.4cqw; }

/* ---------- Dzień meczowy: rozkład jak na plakacie ---------- */
.times { margin-top: 5cqw; border-top: 0.6cqw solid var(--fg); }
.time { display: grid; grid-template-columns: 22cqw 1fr; align-items: baseline; gap: 2cqw; padding: 2.4cqw 0; border-bottom: 1px solid var(--line); }
.time b { font-family: var(--display); font-weight: 400; font-size: 8cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.time span { font-size: 3.4cqw; font-weight: 800; font-stretch: 80%; text-transform: uppercase; line-height: 1.15; }
.time--kick { margin: 0 -3cqw; padding: 2.4cqw 3cqw; background: #FFFFFF; color: var(--red); border-bottom: 0; }
.facts { list-style: none; margin: 4cqw 0 0; padding: 0; display: grid; gap: 2.4cqw; }
.facts li { display: grid; grid-template-columns: 3cqw 1fr; gap: 2.2cqw; font-size: 3.2cqw; line-height: 1.4; color: var(--fg-2); }
.facts li::before { content: ""; width: 1.8cqw; height: 1.8cqw; margin-top: 1.3cqw; background: var(--fg); }
.facts strong { color: var(--fg); }

/* ---------- Tabela: najpierw Górnik i Legia, potem cała liga ---------- */
.seg { display: flex; gap: 5cqw; margin-top: 4cqw; border-bottom: 1px solid var(--line); }
.seg button { position: relative; padding: 2cqw 0; border: 0; background: none; color: var(--muted); font-size: 3.2cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.seg button[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -0.7cqw 0 var(--fg); }
.seg__fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 0.7cqw; background: var(--red); transform: scaleX(0); transform-origin: left; }
.duo-view { margin-top: 5cqw; display: flex; flex-direction: column; }
.duo-row { display: grid; grid-template-columns: 8cqw 12cqw 1fr auto; align-items: center; gap: 3cqw; padding: 4cqw; color: #FFFFFF; }
.duo-row.is-us { background: var(--red); }
.duo-row.is-rival { background: var(--legia); }
.duo-pos { font-family: var(--display); font-size: 10cqw; line-height: 1; }
.duo-crest { --crest: 12cqw; width: var(--crest); height: var(--crest); object-fit: contain; }
.duo-name { display: block; font-weight: 700; font-size: 4.4cqw; font-stretch: 88%; line-height: 1.1; white-space: nowrap; }
.duo-team small { display: block; margin-top: 1cqw; font-size: 2.7cqw; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.duo-pts { text-align: right; font-size: 2.6cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.duo-pts b { display: block; font-family: var(--display); font-weight: 400; font-size: 13cqw; line-height: 0.9; font-variant-numeric: tabular-nums; }
.duo-gap { display: flex; align-items: center; gap: 3cqw; height: 13cqw; margin-left: 7.6cqw; }
.duo-gap::before { content: ""; align-self: stretch; width: 0.7cqw; background: var(--fg); }
.duo-gap__pill { font-size: 3.2cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.duo-gap__pill b { font-family: var(--display); font-weight: 400; font-size: 7cqw; }
.duo-lead { margin-top: 5cqw; font-size: 3.4cqw; }
.scen { margin-top: 5cqw; }
.scen__tiles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2.6cqw; border-top: 1px solid var(--line); }
.scen__tiles div { padding: 2.6cqw 0 0 2.6cqw; border-left: 1px solid var(--line); }
.scen__tiles div:first-child { border-left: 0; padding-left: 0; }
.scen__tiles div::before { content: ""; display: block; width: 7cqw; height: 1cqw; margin-bottom: 2cqw; }
.scen__tiles .w::before { background: var(--red); }
.scen__tiles .d::before { background: var(--draw); }
.scen__tiles .l::before { background: var(--legia); }
.scen__tiles b { display: block; font-family: var(--display); font-weight: 400; font-size: 8.4cqw; line-height: 1; }
.scen__tiles span { display: block; margin-top: 1cqw; font-size: 2.6cqw; line-height: 1.35; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.standings { list-style: none; margin: 4cqw 0 0; padding: 0; position: relative; }
.standings li { display: grid; grid-template-columns: 7cqw 1fr repeat(4, 6.4cqw) 9cqw; align-items: center; padding: 0.7cqw 0; border-top: 1px solid var(--line); font-size: 2.8cqw; line-height: 1; font-variant-numeric: tabular-nums; text-align: center; }
.standings li.is-head { border-top: 0; padding: 0 0 1.6cqw; font-size: 2.5cqw; font-weight: 800; font-stretch: 75%; color: var(--muted); }
.standings .pos { font-family: var(--display); font-size: 3.2cqw; color: var(--muted); }
.standings .team { display: flex; align-items: center; gap: 2.2cqw; text-align: left; font-weight: 600; min-width: 0; }
.standings .team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-stretch: 88%; }
.standings .team img { --crest: 4cqw; width: var(--crest); height: var(--crest); object-fit: contain; flex: none; }
.standings .pts { font-family: var(--display); font-size: 3.5cqw; }
.standings li.is-us { background: var(--red); border-top-color: transparent; }
.standings li.is-rival { background: var(--legia); border-top-color: transparent; }
.standings li.is-us .pos, .standings li.is-rival .pos { color: #FFFFFF; }

/* ---------- Liczby: wykres motylkowy ---------- */
.duel-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 3cqw; padding-bottom: 2.2cqw; border-bottom: 0.6cqw solid var(--fg); }
.duel-head div { display: flex; align-items: center; gap: 2.4cqw; font-family: var(--display); font-size: 5.4cqw; text-transform: uppercase; }
.duel-head div:last-child { justify-content: flex-end; }
.duel-head .crest { --crest: 8cqw; }
.duel-head span.vs-dot { font-size: 3cqw; font-weight: 800; font-stretch: 75%; color: var(--muted); }
.duel { display: grid; margin-top: 1cqw; }
.duel__row { display: grid; grid-template-columns: 1fr 22cqw 1fr; align-items: center; padding: 0.5cqw 0; border-bottom: 1px solid var(--line); }
.duel__label { text-align: center; font-size: 2.8cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--muted); }
.duel__side { display: flex; align-items: center; gap: 2cqw; }
.duel__side--us { flex-direction: row-reverse; }
.duel__bar { height: 4.6cqw; }
.duel__side--us .duel__bar { background: var(--red); transform-origin: right; }
.duel__side--them .duel__bar { background: var(--legia); transform-origin: left; }
.duel__val { font-family: var(--display); font-size: 5.4cqw; min-width: 6cqw; text-align: center; font-variant-numeric: tabular-nums; }
.forms { display: grid; gap: 2.8cqw; }
/* Forma: każda drużyna w swoim bloku — pasek w barwie klubu, herb, punkty z 5 meczów, wyniki od najstarszego. */
.formteam { --team: var(--red); padding-left: 2.6cqw; border-left: 1cqw solid var(--team); }
.formteam--them { --team: var(--legia); }
.formteam__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2cqw; }
.formteam__head .crest { --crest: 7cqw; }
.formteam__head b { display: block; font-family: var(--display); font-weight: 400; font-size: 5.2cqw; line-height: 1; text-transform: uppercase; }
.formteam__head small { display: block; margin-top: 0.6cqw; font-size: 2.5cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--muted); }
.formteam__pts { margin: 0; text-align: right; }
.formteam__pts b { font-size: 7.4cqw; color: var(--team); font-variant-numeric: tabular-nums; }
.formteam__pts span { display: block; font-size: 2.4cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--muted); }
.form { list-style: none; margin: 2cqw 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2cqw; }
.form__chip { display: flex; align-items: baseline; justify-content: space-between; padding: 1.3cqw 1.4cqw; background: var(--draw); color: var(--ink); }
.form .w .form__chip { background: var(--team); color: #FFFFFF; }
.form .l .form__chip { background: var(--ink); color: #FFFFFF; }
.form__chip i { font-style: normal; font-size: 2.4cqw; font-weight: 800; font-stretch: 75%; }
.form__chip b { font-family: var(--display); font-weight: 400; font-size: 4.6cqw; line-height: 1; }
.form li > span:last-child { display: block; margin-top: 1cqw; font-size: 2.4cqw; line-height: 1.3; color: var(--fg-2); }

/* ---------- Historia ---------- */
.history .pg__bg { height: 46%; object-position: 50% 30%; }
.history .pg__shade { background: linear-gradient(180deg, rgba(14, 15, 18, 0) 0%, rgba(14, 15, 18, 0.35) 22%, rgba(14, 15, 18, 0.92) 36%, var(--ink) 46%); }
.split { display: flex; gap: 2px; height: 6cqw; margin-top: 4.4cqw; }
.split div { height: 100%; transform-origin: left; }
.split .w { background: var(--red); }
.split .d { background: var(--draw); }
.split .l { background: var(--legia); }
.split-legend { display: flex; justify-content: space-between; margin-top: 2.4cqw; font-size: 2.8cqw; color: var(--fg-2); }
.split-legend b { display: block; font-family: var(--display); font-weight: 400; font-size: 6.4cqw; line-height: 1; color: var(--fg); }
.split-legend div:nth-child(2) { text-align: center; }
.split-legend div:last-child { text-align: right; }
.meetings { list-style: none; margin: 3.6cqw 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.meetings button { width: 100%; display: grid; grid-template-columns: 17cqw 1fr auto 6cqw 3.6cqw; align-items: center; gap: 2.2cqw; padding: 2cqw 0; border: 0; border-top: 1px solid var(--line); background: none; font-size: 3.2cqw; text-align: left; }
.meetings time { font-size: 2.7cqw; color: var(--muted); font-variant-numeric: tabular-nums; }
.meetings .score { font-family: var(--display); font-size: 4.6cqw; }
.res { display: grid; place-items: center; width: 6cqw; height: 6cqw; font-family: var(--display); font-size: 3.2cqw; color: #FFFFFF; justify-self: end; }
.res.w { background: var(--red); }
.res.d { background: var(--draw); color: var(--ink); }
.res.l { background: var(--legia); }

/* ---------- Pamiętny mecz ---------- */
.memory .pg__bg { height: 60%; object-position: 40% 25%; }
.memory .pg__shade { background: linear-gradient(180deg, rgba(14, 15, 18, 0.4) 0%, rgba(14, 15, 18, 0) 16%, rgba(14, 15, 18, 0) 36%, var(--ink) 60%); }
.scoreline { display: flex; align-items: baseline; gap: 3cqw; font-family: var(--display); text-transform: uppercase; }
.scoreline span { font-size: 7cqw; }
.scoreline b { font-weight: 400; font-size: 19cqw; line-height: 0.88; }
.scorers { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin: 3cqw 0 4cqw; padding-top: 2.4cqw; border-top: 1px solid var(--line); font-size: 3cqw; color: var(--fg-2); }
.scorers > div { display: flex; align-items: flex-start; gap: 1.6cqw; }
.scorers > div:last-child { justify-content: flex-end; text-align: right; }
.scorers .ico { width: 4.6cqw; height: 4.6cqw; }

/* ---------- Quiz ---------- */
.quiz__dots { display: flex; gap: 1.4cqw; margin-top: 2.4cqw; }
.quiz__dots i { flex: 1; height: 1cqw; background: rgba(255, 255, 255, 0.35); }
.quiz__dots i.is-ok { background: #FFFFFF; }
.quiz__dots i.is-bad { background: var(--ink); }
.quiz__dots i.is-now { background: rgba(255, 255, 255, 0.75); }
.quiz__q { margin: 4cqw 0 0; min-height: 24cqw; font-family: var(--display); font-size: 6.6cqw; line-height: 1.1; text-transform: uppercase; }
.quiz__opts { display: grid; gap: 2cqw; margin-top: 3cqw; }
.quiz__opts button { display: flex; align-items: center; padding: 3.4cqw 4.4cqw; border: 0; background: #FFFFFF; color: var(--ink); font-size: 3.9cqw; font-weight: 700; text-align: left; }
.quiz__opts button.is-ok { background: var(--legia); color: #FFFFFF; }
.quiz__opts button.is-bad { background: var(--ink); color: #FFFFFF; }
.quiz__opts button[disabled] { cursor: default; }
.quiz__opts button[disabled]:not(.is-ok):not(.is-bad) { opacity: 0.55; }
.quiz__note { margin: 3.6cqw 0 0; min-height: 10cqw; font-size: 3.2cqw; line-height: 1.45; color: var(--fg-2); }
.quiz__result { margin-top: 8cqw; }
.quiz__score { font-family: var(--display); font-size: 40cqw; line-height: 0.86; }
.quiz__score small { font-size: 14cqw; color: var(--muted); }

/* ---------- Bohater: jedno zdjęcie u góry, pod nim numer, nazwisko i liczby ---------- */
.hero::before { display: none; }
.hero .pg__bg { height: 62%; object-position: 32% 30%; }
.hero .pg__shade { background: linear-gradient(180deg, rgba(5, 10, 31, 0.55) 0%, rgba(5, 10, 31, 0) 18%, rgba(14, 28, 77, 0) 38%, rgba(14, 28, 77, 0.9) 54%, #0F1E50 62%); }
.hero__name { display: flex; align-items: center; gap: 3cqw; }
.hero__name b { font-family: var(--display); font-weight: 400; font-size: 12cqw; line-height: 1; color: var(--red); }
.hero__name span { font-size: 2.8cqw; line-height: 1.3; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--fg-2); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4cqw; border-top: 1px solid var(--line); }
.stats > div { padding: 2.6cqw 0 0 3cqw; border-left: 1px solid var(--line); }
.stats > div:first-child { border-left: 0; padding-left: 0; }
.stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 9cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 0.8cqw; font-size: 2.6cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--muted); }
/* Ikony statystyk: paczka „45 Soccer Line Icons” (ta sama co w Gwarku), kolor z currentColor; kartki z wypełnieniem. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { display: block; flex: none; width: 1em; height: 1em; }
.ico__card { fill: var(--card, none); }
.ico--yellow { --card: #F2C230; }
.ico--red { --card: var(--red); }
.stats > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1.4cqw; }
.stats > div > span { grid-column: 1 / -1; }
.stats .ico { width: 7cqw; height: 7cqw; }
.hero__row { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; margin-top: 4cqw; }

/* ---------- Klasyfikacja kanadyjska ---------- */
.rank { list-style: none; margin: 6cqw 0 0; padding: 0; border-top: 0.6cqw solid var(--fg); }
.rank button { width: 100%; display: grid; grid-template-columns: 6cqw 14cqw 1fr 3.6cqw; align-items: center; gap: 3cqw; padding: 2cqw 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.rank__pos { font-family: var(--display); font-size: 6.4cqw; color: var(--fg); }
.rank__face { width: 14cqw; height: 14cqw; overflow: hidden; background: var(--navy); }
.rank__face img { width: 100%; height: 160%; object-fit: cover; object-position: 50% 4%; }
.rank__name { font-weight: 700; font-size: 3.7cqw; }
.rank__bar { display: flex; align-items: center; gap: 2cqw; margin-top: 1.4cqw; }
.rank__bar i { display: block; height: 2.6cqw; background: var(--red); transform-origin: left; }
.rank__bar span { font-size: 2.8cqw; color: var(--fg-2); white-space: nowrap; }
.rank__bar > span { display: inline-flex; align-items: center; }
.rank__bar em { display: inline-flex; align-items: center; gap: 0.6cqw; margin-right: 1.6cqw; font-style: normal; }
.rank__bar em .ico { width: 3.8cqw; height: 3.8cqw; }
.rank__bar b { margin-right: 2cqw; font-family: var(--display); font-weight: 400; font-size: 5cqw; color: var(--fg); }

/* ---------- Kadra ---------- */
.squad { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5cqw; margin-top: 3.4cqw; }
.squad h4 { margin: 2.6cqw 0 0.8cqw; padding-bottom: 0.8cqw; border-bottom: 1px solid var(--line); font-size: 2.8cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--fg); }
.squad h4:first-child { margin-top: 0; }
.squad ul { list-style: none; margin: 0; padding: 0; }
.squad button { width: 100%; display: grid; grid-template-columns: 7cqw 1fr; gap: 1.6cqw; align-items: baseline; padding: 0.55cqw 0; border: 0; background: none; font-size: 3cqw; line-height: 1.25; text-align: left; }
.squad button b { font-family: var(--display); font-weight: 400; font-size: 3.8cqw; color: var(--muted); text-align: right; }
@media (hover: hover) and (pointer: fine) { .squad button:hover span { text-decoration: underline; text-underline-offset: 0.6cqw; } }
.live { display: flex; align-items: center; gap: 3cqw; width: 100%; margin-top: auto; padding: 3cqw 4cqw; border: 0; background: var(--red); color: #FFFFFF; text-align: left; }
.live__dot { width: 2.4cqw; height: 2.4cqw; background: #FFFFFF; flex: none; animation: live 1.4s ease-in-out infinite; }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.live p { flex: 1; margin: 0; font-size: 3cqw; line-height: 1.4; }
.live .chev { opacity: 0.9; }

/* ---------- Skład na boisku ---------- */
.pitch { position: relative; width: 64cqw; aspect-ratio: 68 / 105; margin: 4cqw auto 0; overflow: hidden; background: repeating-linear-gradient(180deg, #0E3B2C 0 12.5%, #0B3325 12.5% 25%); }
.pitch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pitch svg * { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.35; }
.pitch svg .spot { fill: rgba(255, 255, 255, 0.55); stroke: none; }
.dot { position: absolute; width: 16cqw; margin-left: -8cqw; margin-top: -6.4cqw; display: flex; flex-direction: column; align-items: center; gap: 0.8cqw; padding: 0; border: 0; background: none; }
.dot__pic { position: relative; }
.dot__face { display: block; width: 11.4cqw; height: 11.4cqw; border-radius: 50%; overflow: hidden; background: var(--navy); box-shadow: 0 0 0 0.6cqw #FFFFFF, 0 1.4cqw 3cqw rgba(0, 0, 0, 0.5); }
.dot__face img { width: 100%; height: 165%; object-fit: cover; object-position: 50% 3%; }
.dot__no { position: absolute; right: -1.6cqw; bottom: -0.8cqw; min-width: 5cqw; height: 5cqw; padding: 0 0.8cqw; display: grid; place-items: center; border-radius: 2.5cqw; background: var(--red); color: #FFFFFF; font-family: var(--display); font-weight: 400; font-size: 3cqw; line-height: 1; }
.dot__name { font-size: 2.4cqw; font-weight: 700; text-shadow: 0 0.3cqw 1cqw rgba(0, 0, 0, 0.85); white-space: nowrap; }
.dot--gk .dot__face { box-shadow: 0 0 0 0.6cqw var(--gold), 0 1.4cqw 3cqw rgba(0, 0, 0, 0.5); }
.dot--gk .dot__no { background: var(--gold); color: var(--ink); }

/* ---------- Typer ---------- */
.bet { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; margin-top: 7cqw; padding: 5cqw 0; border-top: 0.6cqw solid var(--fg); border-bottom: 1px solid var(--line); }
.bet__team { display: flex; flex-direction: column; align-items: center; gap: 2cqw; text-align: center; font-family: var(--display); font-size: 4.6cqw; text-transform: uppercase; }
.bet__team .crest { --crest: 15cqw; }
.bet__digit { display: block; height: 26cqw; overflow: hidden; font-family: var(--display); font-size: 26cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.bet__digit span { display: block; }
.bet__colon { align-self: start; margin-top: 21cqw; font-family: var(--display); font-size: 14cqw; color: var(--muted); }
.stepper { display: flex; gap: 2cqw; }
.stepper button { width: 11cqw; height: 11cqw; display: grid; place-items: center; border: 0; background: var(--fg); color: var(--bg); font-size: 6cqw; line-height: 1; }
.stepper button[disabled] { opacity: 0.25; cursor: default; }
.typer__saved { margin: 4cqw 0 0; min-height: 5cqw; text-align: center; font-size: 3.2cqw; color: var(--fg-2); }
.typer__saved strong { color: var(--fg); }

/* ---------- Strefa Kibica ---------- */
.map { position: relative; display: block; width: calc(100% + 14cqw); margin: 5cqw -7cqw 0; aspect-ratio: 16 / 7; overflow: hidden; border: 0; padding: 0; background: #0B1022; }
.map img { position: absolute; left: -15%; bottom: 0; width: 130%; max-width: none; height: auto; }
.map span { position: absolute; right: 3cqw; bottom: 3cqw; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 2.4cqw; background: #FFFFFF; color: var(--navy); font-size: 2.8cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.map span svg { width: 3.2cqw; height: 3.2cqw; }
.attractions { list-style: none; margin: 4.4cqw 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw 4cqw; }
.attractions li { position: relative; padding-left: 3.4cqw; font-size: 3cqw; line-height: 1.35; color: var(--fg-2); }
.attractions li::before { content: ""; position: absolute; left: 0; top: 1.2cqw; width: 1.6cqw; height: 1.6cqw; background: var(--fg); }
.attractions strong { display: block; color: var(--fg); }

/* ---------- Trójkolorowe Spotkanie ---------- */
.legend__when { margin-top: 4cqw; padding-bottom: 2.4cqw; border-bottom: 0.6cqw solid var(--fg); font-family: var(--display); font-size: 7cqw; line-height: 1; text-transform: uppercase; color: var(--red); }
.legend__hero { display: grid; grid-template-columns: 1fr 28cqw; gap: 3cqw; align-items: end; margin-top: 3cqw; }
.legend__photo { width: 100%; aspect-ratio: 194 / 259; object-fit: cover; box-shadow: 0 0 0 0.8cqw #FFFFFF, 0 1.4cqw 3.4cqw rgba(11, 22, 64, 0.3); }
/* „Nazwisko nad zdjęciem” (pole `hero_layout`): nazwisko na całą szerokość, zdjęcie pod nim. */
.legend__hero--stacked { grid-template-columns: 1fr; align-items: start; }
.legend__hero--stacked .legend__photo { width: 44cqw; }
.legend__name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 14cqw; line-height: 0.98; text-transform: uppercase; }
.legend__lead { margin-top: 5cqw; }
.legend .stats { margin-top: 6cqw; }

/* ---------- ROGUE: reklama nowej kolekcji Sklepu Kibica ---------- */
.rogue__slides { position: absolute; inset: 0; overflow: hidden; }
.rogue__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; }
.rogue__slide:first-child { opacity: 1; }
.rogue .pg__shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.82) 74%, #000 100%); }
.rogue__bars { display: flex; gap: 1cqw; }
.rogue__bars i { flex: 1; height: 0.6cqw; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.rogue__bars b { display: block; height: 100%; background: #FFFFFF; transform: scaleX(0); transform-origin: left; }
.rogue__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 36cqw; line-height: 0.82; text-transform: uppercase; letter-spacing: -0.01em; }
.rogue__cta { display: grid; grid-template-columns: 1fr auto; gap: 2cqw; margin-top: 5cqw; }
.looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-top: 5cqw; }
.look { position: relative; aspect-ratio: 2 / 3; padding: 0; border: 0; overflow: hidden; background: #E8EAF0; }
.look img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-out; }
.look span { position: absolute; left: 0; bottom: 0; padding: 0.8cqw 1.8cqw; background: var(--navy); color: #FFFFFF; font-size: 2.4cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .look:hover img { transform: scale(1.04); } }

/* ---------- Dojazd ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0 4.4cqw; margin-top: 4cqw; border-bottom: 1px solid var(--line); }
.chips button { padding: 2cqw 0; border: 0; background: none; color: var(--muted); font-size: 3.2cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.chips button[aria-pressed="true"] { color: var(--fg); box-shadow: inset 0 -0.7cqw 0 var(--fg); }
.route { margin-top: 4.4cqw; min-height: 46cqw; }
.route__step { display: grid; grid-template-columns: 8cqw 1fr; gap: 3cqw; align-items: start; }
.route__step + .route__step { margin-top: 3.6cqw; }
.route__icon { width: 8cqw; height: 8cqw; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-family: var(--display); font-size: 4cqw; }
.route__step:last-child .route__icon { background: var(--red); color: #FFFFFF; }
.route__step p { margin: 0; font-size: 3.2cqw; line-height: 1.4; color: var(--fg-2); }
.route__step strong { color: var(--fg); }
.badges { display: flex; flex-wrap: wrap; gap: 1.4cqw; margin-top: 1.6cqw; }
.badges b { min-width: 10cqw; padding: 1cqw 2cqw; background: #FFFFFF; color: var(--navy); text-align: center; font-family: var(--display); font-weight: 400; font-size: 4.8cqw; line-height: 1.1; }

/* ---------- Kibice w liczbach ---------- */
.fans .pg__bg { height: 42%; object-position: 50% 60%; }
.fans .pg__shade { background: linear-gradient(180deg, rgba(14, 15, 18, 0.2), rgba(14, 15, 18, 0) 20%, var(--ink) 42%); }
.big { margin-top: 2cqw; font-family: var(--display); font-weight: 400; font-size: 23cqw; line-height: 0.86; font-variant-numeric: tabular-nums; }
.ages { display: grid; gap: 1.4cqw; margin-top: 3cqw; }
.ages div { display: grid; grid-template-columns: 10cqw 1fr 8cqw; align-items: center; gap: 2cqw; font-size: 2.8cqw; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ages i { display: block; height: 2.6cqw; background: #FFFFFF; transform-origin: left; }
.ages b { text-align: right; color: var(--fg); }
.duo { display: grid; grid-template-columns: 1fr 1fr; margin-top: 3.6cqw; border-top: 1px solid var(--line); }
.duo > div { padding: 2.6cqw 0 0 3cqw; border-left: 1px solid var(--line); font-size: 2.8cqw; line-height: 1.35; color: var(--fg-2); }
.duo > div:first-child { border-left: 0; padding-left: 0; }
.duo b { display: block; margin-bottom: 0.8cqw; font-family: var(--display); font-weight: 400; font-size: 8cqw; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---------- Następny mecz ---------- */
.next__match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3cqw; margin-top: 7cqw; text-align: center; }
.next__match .crest { --crest: 20cqw; margin: 0 auto 2.4cqw; }
.next__match > div { font-family: var(--display); font-size: 5.4cqw; line-height: 1; text-transform: uppercase; }
.next__match > span { font-family: var(--display); font-size: 6cqw; color: rgba(255, 255, 255, 0.75); }
.next__when { margin-top: 6cqw; padding: 3cqw 0; border-top: 0.6cqw solid var(--fg); border-bottom: 1px solid var(--line); text-align: center; font-family: var(--display); font-size: 9cqw; line-height: 1; text-transform: uppercase; }
.offers { display: grid; gap: 3cqw; margin-top: 6cqw; }
.offers .card p { margin: 1.2cqw 0 0; font-size: 3cqw; line-height: 1.4; color: var(--fg-2); }

/* ---------- Górnik z Klasą ---------- */
.school__img { margin: 5cqw -7cqw 0; height: 50cqw; overflow: hidden; }
.school__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ticks { list-style: none; margin: 4cqw 0 0; padding: 0; display: grid; gap: 2.2cqw; }
.ticks li { display: grid; grid-template-columns: 4.6cqw 1fr; gap: 2cqw; font-size: 3.2cqw; line-height: 1.4; color: var(--fg-2); }
.ticks li::before { content: ""; width: 3.6cqw; height: 3.6cqw; margin-top: 0.4cqw; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.ticks strong { color: var(--fg); }
.tour { margin-top: 4cqw; padding-left: 3cqw; border-left: 0.8cqw solid var(--navy); font-size: 3cqw; line-height: 1.45; color: var(--fg-2); }
.tour b { color: var(--fg); }

/* ---------- Do zobaczenia ---------- */
.outro { text-align: center; }
.outro .pg__in { align-items: center; justify-content: center; }
.outro .crest { --crest: 34cqw; }
.outro .h1 { margin-top: 7cqw; font-size: 13cqw; }
.socials { display: grid; gap: 1.6cqw; margin-top: 6cqw; font-size: 3cqw; color: var(--fg-2); }

/* ---------- Zdjęcia w tle i nowe elementy ---------- */
.welcome__media { position: absolute; top: 0; left: 0; width: 100%; height: 56cqw; overflow: hidden; }
.welcome__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.seg__timer { margin: 2.4cqw 0 0; min-height: 4cqw; font-size: 3cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--muted); }
.seg__timer b { font-family: var(--display); font-weight: 400; font-size: 4.6cqw; color: var(--fg); font-variant-numeric: tabular-nums; }
.quiz__bg { position: absolute; top: 0; left: 0; right: 0; height: 70cqw; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
.quiz__bg img { width: 100%; height: 100%; object-fit: cover; }
.quiz__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 24%); }
.quiz__credit { position: absolute; left: 7cqw; right: 7cqw; top: 55cqw; margin: 0; font-size: 2.5cqw; font-weight: 600; color: #FFFFFF; text-align: right; text-shadow: 0 0.3cqw 1.2cqw rgba(0, 0, 0, 0.7); }
.canadian .pg__bg { height: 30%; object-position: 50% 100%; }
.canadian .pg__shade { background: linear-gradient(180deg, rgba(14, 15, 18, 0.35) 0%, rgba(14, 15, 18, 0) 12%, rgba(14, 15, 18, 0) 18%, rgba(14, 15, 18, 0.75) 26%, var(--ink) 30%); }
/* Nadtytuł leży jeszcze na zdjęciu (cień zaczyna się niżej), więc dostaje ciemne tło. */
.canadian .kicker { align-self: flex-start; padding: 0.8cqw 1.6cqw; background: var(--ink); }
.canadian .h2 { font-size: 10.4cqw; }
.canadian .rank { margin-top: 4cqw; }
.canadian .rank button { grid-template-columns: 6cqw 11cqw 1fr 3.6cqw; padding: 1.5cqw 0; }
.canadian .rank__face { width: 11cqw; height: 11cqw; }
.lineup__names { margin: 3cqw 0 0; font-size: 3.1cqw; line-height: 1.45; font-weight: 600; color: var(--fg-2); }
.zone__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; }
.zone__head .h2 { font-size: 10.4cqw; }
.zone__logo { width: 17cqw; height: 17cqw; flex: none; }
.legend__archive { display: grid; grid-template-columns: 14cqw 14cqw 1fr; gap: 2.4cqw; align-items: end; margin-top: 4cqw; }
.legend__archive img { width: 100%; aspect-ratio: 566 / 800; object-fit: cover; box-shadow: 0 1cqw 3cqw rgba(11, 22, 64, 0.25); }
.legend__archive .small { font-size: 2.5cqw; }
.legend .stats { margin-top: 4.4cqw; }
.tickets { margin-top: 5cqw; }
.tickets__head { display: flex; align-items: center; justify-content: space-between; }
.tickets__tag { padding: 0.8cqw 1.8cqw; background: rgba(0, 0, 0, 0.28); font-size: 2.3cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.tickets__num { display: block; margin-top: 1.4cqw; font-family: var(--display); font-weight: 400; font-size: 13cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.tickets__bar { height: 2.2cqw; margin: 2cqw 0; background: rgba(255, 255, 255, 0.28); }
.tickets__bar i { display: block; height: 100%; background: #FFFFFF; transform-origin: left; }
.next__match .crest { --crest: 17cqw; }
.zarys { background: var(--sponsor-bg, #000C31); }
.zarys__link { position: absolute; inset: 0; display: block; color: #FFFFFF; text-decoration: none; }
.zarys__link.tap:active { transform: scale(0.99); }
.zarys__photo { position: absolute; top: 0; left: 0; width: 100%; height: 60%; object-fit: cover; }
.zarys__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 12, 49, 0.15) 0%, rgba(0, 12, 49, 0.45) 36%, var(--sponsor-bg, #000C31) 60%); }
.zarys__arc { position: absolute; right: -30cqw; top: 30cqw; width: 90cqw; height: 90cqw; border-radius: 50%; border: 1.2cqw solid var(--sponsor-accent, #3B72A4); border-left-color: transparent; border-bottom-color: transparent; opacity: 0.55; }
.zarys__body { position: absolute; left: 8cqw; right: 8cqw; bottom: 11cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 4cqw; }
.zarys__badge { position: absolute; top: 9cqw; left: 0; display: flex; flex-direction: column; gap: 1.2cqw; padding: 3.4cqw 6cqw 3.4cqw 8cqw; background: #FFFFFF; color: var(--sponsor-bg, #000C31); }
.zarys__badge b { font-family: var(--display); font-weight: 400; font-size: 10cqw; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; }
.zarys__badge small { font-size: 2.7cqw; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--sponsor-accent, #3B72A4); }
.zarys__logo { width: 34cqw; height: auto; }
.zarys__slogan { width: 84cqw; height: auto; }
.zarys__lead { font-size: 3.9cqw; line-height: 1.4; color: rgba(255, 255, 255, 0.88); }
.zarys__cta { display: inline-flex; align-items: center; gap: 3cqw; padding: 3.4cqw 4.6cqw; background: #FFFFFF; color: var(--sponsor-bg, #000C31); font-size: 3.6cqw; font-weight: 800; font-stretch: 80%; text-transform: uppercase; }
.zarys__cta svg { width: 4.6cqw; height: 4.6cqw; }
.ms__video { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding: 14px 16px; background: #FFFFFF; color: var(--ink); font-weight: 800; text-transform: uppercase; font-stretch: 80%; text-decoration: none; }
.ms__video svg { width: 18px; height: 18px; }


/* ---------- Okna ---------- */
dialog { color: #FFFFFF; }
dialog::backdrop { background: rgba(3, 5, 12, 0.75); }
dialog.toc { width: min(92vw, 420px); max-height: 80svh; padding: 0; border: 0; background: #12141A; overflow: hidden; }
dialog.toc[open] { animation: pop-in 0.26s var(--reveal); }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.dlg__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--chrome-line); }
.dlg__head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; text-transform: uppercase; }
.dlg__close { width: 44px; height: 44px; border: 0; background: none; font-size: 18px; flex: none; }
.toc ol { list-style: none; margin: 0; padding: 0; max-height: calc(80svh - 72px); overflow: auto; }
.toc ol button { width: 100%; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 8px; padding: 13px 18px; border: 0; border-bottom: 1px solid var(--chrome-line); background: none; text-align: left; font-size: 15px; }
.toc ol button span:first-child { font-family: var(--display); font-size: 16px; color: var(--chrome-muted); }
.toc ol button[aria-current="true"] { background: var(--red); }
.toc ol button[aria-current="true"] span:first-child { color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { .toc ol button:hover { background: rgba(255, 255, 255, 0.06); } }

dialog.sheet { width: min(100vw, 520px); max-width: 100vw; max-height: 90svh; margin: auto auto 0; padding: 0; border: 0; background: #12141A; overflow: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
dialog.sheet[open] { animation: sheet-in 0.42s var(--reveal); }
dialog.sheet[open]::backdrop { animation: fade-in 0.3s ease-out; }
dialog.sheet.is-closing { animation: sheet-out 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }
dialog.sheet.is-closing::backdrop { animation: fade-out 0.22s ease-in forwards; }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (min-width: 720px) {
  dialog.sheet { margin: auto; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes sheet-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(24px); } }
}
.sheet__grab { width: 40px; height: 4px; background: rgba(255, 255, 255, 0.3); margin: 10px auto 0; }
.sheet__close { position: absolute; top: 8px; right: 8px; z-index: 2; }
.sheet__body { padding: 0 0 24px; }
.ps__hero { position: relative; height: min(78vw, 360px); overflow: hidden; background: var(--navy); }
.ps__hero > b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 400; font-size: min(70vw, 320px); line-height: 1; color: rgba(255, 255, 255, 0.1); }
.ps__hero img { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; height: 104%; width: auto; max-width: none; }
.ps__hero::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(180deg, transparent, #12141A); }
.ps__main { position: relative; margin-top: -22px; padding: 0 20px; }
.ps__name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1; text-transform: uppercase; }
.ps__meta { margin-top: 6px; font-size: 13px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--chrome-muted); }
.ps__stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border-top: 1px solid var(--chrome-line); border-bottom: 1px solid var(--chrome-line); }
.ps__stats div { padding: 12px 0 12px 12px; border-left: 1px solid var(--chrome-line); }
.ps__stats div:first-child { border-left: 0; padding-left: 0; }
.ps__stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.ps__stats div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; }
.ps__stats .ico { width: 22px; height: 22px; }
.ps__stats span { grid-column: 1 / -1; display: block; margin-top: 4px; font-size: 11px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--chrome-muted); }
.ps__facts { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; }
.ps__facts dt { color: var(--chrome-muted); }
.ps__facts dd { margin: 0; font-weight: 600; }
.ps__src { margin: 16px 0 0; font-size: 11px; color: var(--chrome-muted); }
.ms { padding: 34px 20px 0; }
.ms__when { font-size: 12px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; color: var(--chrome-muted); }
.ms__score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 18px; text-align: center; }
.ms__score img { --crest: 64px; width: var(--crest); height: var(--crest); object-fit: contain; margin: 0 auto 8px; }
.ms__score div { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.ms__score > b { font-family: var(--display); font-weight: 400; font-size: 58px; line-height: 1; }
.ms__goals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--chrome-line); font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.ms__goals div:last-child { text-align: right; }
.ms__goals .ico { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
.ms__note { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--chrome-muted); }
.ms__res { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; font-weight: 700; }
.cal { display: grid; padding: 34px 20px 4px; }
.cal h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 28px; text-transform: uppercase; }
.cal a, .cal button { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border: 0; border-top: 1px solid var(--chrome-line); background: none; font-size: 15px; font-weight: 700; text-decoration: none; text-align: left; }
.cal svg { width: 18px; height: 18px; }
dialog.mapview { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; margin: 0; padding: 0; border: 0; background: #060709; }
dialog.mapview[open] { display: flex; flex-direction: column; animation: fade-in 0.25s ease-out; }
.mapview__scroll { flex: 1; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mapview__scroll img { width: 2200px; max-width: none; height: auto; }
.mapview__hint { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 12px; color: var(--chrome-muted); text-align: center; border-top: 1px solid var(--chrome-line); }
/* Strefa kibica: stoiska na mapie (obszary w % mapy), przeglądarka atrakcji, szczegóły. */
[data-cat="food"] { --cat: #E8891C; } [data-cat="sweets"] { --cat: #E0457B; } [data-cat="kids"] { --cat: #1BA6C9; }
[data-cat="partners"] { --cat: #8B5CF6; } [data-cat="cars"] { --cat: #94A3B8; } [data-cat="fans"] { --cat: #E4002B; }
[data-cat="shops"] { --cat: #3B6BE0; } [data-cat="services"] { --cat: #12A37A; } [data-cat=""] { --cat: #8A90A2; }
.mapview__canvas { position: relative; display: inline-block; vertical-align: top; }
.mapview__canvas img { display: block; }
.mapview__areas { position: absolute; inset: 0; width: 100%; height: 100%; }
.zarea { fill: rgba(255, 255, 255, 0); stroke: transparent; stroke-width: 2; cursor: pointer; outline: none; transition: fill 0.15s, stroke 0.15s; }
@media (hover: hover) and (pointer: fine) { .zarea:hover { fill: rgba(255, 183, 3, 0.28); stroke: #FFB703; } }
.zarea.is-picked, .zarea:focus-visible { fill: rgba(255, 183, 3, 0.4); stroke: #FFB703; stroke-width: 4; }
.zarea.is-picked { animation: zone-pulse 1.4s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .zarea.is-picked { animation: none; } }
@keyframes zone-pulse { 50% { fill: rgba(255, 183, 3, 0.15); } }
.mapview__pins { position: absolute; inset: 0; pointer-events: none; }
.zpin { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid #FFFFFF; border-radius: 50%; background: var(--cat); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); pointer-events: auto; cursor: pointer; }
.zpin.is-picked { border-color: #FFB703; box-shadow: 0 0 0 6px rgba(255, 183, 3, 0.45); }
.attractions li.is-more { display: none; }
.attractions li[data-zone-item] { cursor: pointer; }
html[data-edit-mode] .attractions li[data-zone-item] { cursor: text; }
.zone__all { display: flex; align-items: center; justify-content: center; gap: 0.3em; width: 100%; margin-top: 4.4cqw; padding: 3cqw 4cqw; border: 0; background: #FFFFFF; color: var(--navy); font-family: var(--display); font-size: 4.2cqw; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; }
dialog.zonebrowser { width: min(100vw, 560px); max-width: 100vw; height: 100svh; max-height: 100svh; margin: 0 auto; padding: 0; border: 0; background: #12141A; color: #FFFFFF; }
dialog.zonebrowser[open] { display: flex; flex-direction: column; animation: fade-in 0.25s ease-out; }
.zb__tools { padding: 12px 16px 8px; border-bottom: 1px solid var(--chrome-line); }
.zb__search { width: 100%; padding: 12px 14px; border: 1px solid var(--chrome-line); background: #1C1F28; color: #FFFFFF; font: inherit; font-size: 16px; }
.zb__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.zb__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--chrome-line); background: none; color: #FFFFFF; font-size: 13px; font-weight: 700; cursor: pointer; }
.zb__chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cat); }
.zb__chip[aria-pressed="true"] { background: var(--cat); border-color: var(--cat); }
.zb__chip[aria-pressed="true"]::before { background: #FFFFFF; }
.zb__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--chrome-muted); }
.zb__sort { padding: 6px 8px; border: 1px solid var(--chrome-line); background: #1C1F28; color: #FFFFFF; font: inherit; font-size: 13px; }
.zb__list { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 4px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.zb__list h3 { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; font-family: var(--display); font-weight: 400; font-size: 20px; text-transform: uppercase; }
.zb__list h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cat); }
.zb__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.zb__item { display: block; width: 100%; padding: 10px 12px; border: 0; border-left: 4px solid var(--cat); background: #1C1F28; color: #FFFFFF; text-align: left; cursor: pointer; }
.zb__item b { display: block; font-size: 15px; }
.zb__item small { display: block; margin-top: 1px; font-size: 12px; color: var(--chrome-muted); }
.zb__item span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.zb__none { padding: 24px 0; text-align: center; color: var(--chrome-muted); }
.zd { padding: 34px 20px 8px; }
.zd__cat { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--chrome-muted); }
.zd__cat::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cat); }
.zd h3 { margin: 6px 0 2px; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; }
.zd__op { margin: 4px 0 0; font-size: 13px; color: var(--chrome-muted); }
.zd__text { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.zd__map { margin-top: 18px; width: 100%; padding: 14px; border: 0; background: #FFFFFF; color: #12141A; font-weight: 800; cursor: pointer; }
/* Skrót meczu: odtwarzacz 16:9 w oknie na cały ekran, jak najwięcej obrazu. */
dialog.videoview { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: #000; }
dialog.videoview[open] { display: flex; flex-direction: column; animation: fade-in 0.25s ease-out; }
.videoview__stage { flex: 1; min-height: 0; display: grid; place-items: center; padding-bottom: env(safe-area-inset-bottom, 0px); }
.videoview__stage iframe { display: block; width: min(100%, calc((100svh - 73px) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; border: 0; }
dialog.lightbox { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: #000; }
dialog.lightbox[open] { display: flex; flex-direction: column; animation: fade-in 0.25s ease-out; }
.lightbox__stage { flex: 1; min-height: 0; margin: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lightbox__bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--chrome-line); }
.lightbox__bar p { margin: 0; text-align: center; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.85); }
.lightbox__bar p a { display: inline-block; margin-top: 4px; color: #FFFFFF; font-weight: 700; }
.lightbox__count { font-family: var(--display); font-size: 18px; color: var(--chrome-muted); font-variant-numeric: tabular-nums; }
.toast { position: fixed; left: 50%; z-index: 70; bottom: calc(var(--dock-h) + 16px + env(safe-area-inset-bottom, 0px)); max-width: min(92vw, 420px); padding: 11px 16px; background: #FFFFFF; color: var(--ink); font-size: 14px; font-weight: 700; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: transform 0.2s ease-out, opacity 0.2s ease-out; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tap, .pg, .toast, .tap [data-nudge], .progress button::after { transition: none; }
  .tap:active, .tap[data-lift]:hover, .tap:hover [data-nudge] { transform: none; }
  .live__dot, .narr, dialog[open], dialog[open]::backdrop, dialog.sheet.is-closing { animation: none; }
  .toast { transform: translate(-50%, 0); }
}

/* ---------- Druk / PDF: każda strona 1080×1920 ---------- */
@media print {
  @page { size: 1080px 1920px; margin: 0; }
  html, body { height: auto; overflow: visible; background: #060709; padding: 0; }
  .app { display: block; height: auto; }
  .bar, .dock, .narr, .toast, dialog, .cover__start, .burst, .nojs, .lang { display: none !important; }
  .track { display: block; overflow: visible; padding: 0; }
  .pg { width: 1080px; height: 1920px; opacity: 1; transform: none; break-after: page; }
  [data-a] { opacity: 1 !important; transform: none !important; }
  .live__dot { animation: none; }
}