/*
 * KARTA MECZU — NAGŁÓWEK W PERSPEKTYWIE, WYNIK PO KWARTACH, PASEK SEKCJI
 *
 * DLACZEGO OSOBNY ARKUSZ, A NIE `komponenty.css`. Wygląd nagłówka karty meczu
 * siedzi dziś w `komponenty.css` (l. 2553–2884), czyli w pliku wspólnym dla
 * całego motywu, który jest jednocześnie największym miejscem konfliktów przy
 * pracy równoległej. Ten arkusz wchodzi PO `komponenty.css` (kolejność w pętli
 * `wba_enqueue_assets()`), więc nadpisuje jego reguły bez wchodzenia w niego —
 * ta sama zasada, którą już stosują `mecz-zapis.css` i `mecz-mapa.css`.
 *
 * CO TU NADPISUJĘ ŚWIADOMIE:
 *   - `.wba-mecz__head::after` — okrąg w prawym górnym rogu. Zastępuje go
 *     rysunek boiska, a dwa okręgi naraz to jeden za dużo.
 *
 * ŻELAZNA REGUŁA KARTY MECZU OBOWIĄZUJE I TUTAJ: strona nigdy nie przewija
 * się w poziomie. Rząd kwart i pasek sekcji ZAWIJAJĄ SIĘ, a nie przewijają.
 *
 * @package wba
 */

/* ==========================================================================
   1. BOISKO W PERSPEKTYWIE

   Rysunek jest w treści strony (inline SVG w `wba_mecz_boisko()`), a nie
   plikiem ani tłem `background-image`, z trzech powodów: barwi się zmiennymi
   motywu (`--wp--preset--color--gold` i `--paper` niżej), nie kosztuje
   osobnego żądania i daje się wyłączyć w `forced-colors`.

   DLACZEGO `preserveAspectRatio="xMidYMid slice"`, A NIE `none` JAK W MAKIECIE.
   To jest DECYZJA Z POMIAREM, nie skutek uboczny. Zmierzone proporcje pudełka
   rysunku: **4,23** przy oknie 1440 px (1160 × 274,25) i **1,20** przy 375 px
   (335 × 278,69 — telefon zawija nazwy drużyn, więc nagłówek rośnie) —
   rozpiętość ponad 3×. Przy `none` rysunek rozciąga się razem z pudełkiem,
   więc koło rzutów wolnych na telefonie robi się z płaskiej elipsy niemal
   okręgiem, a linie zbiegu tracą kąt. `slice` to odpowiednik `object-fit:
   cover`: proporcja rysunku jest zachowana ZAWSZE, zmienia się wyłącznie kadr.

   ILE REALNIE UCINA (zmierzone `getScreenCTM()`, karta 2827019 z rzędem kwart;
   viewBox 1160 × 226, czyli wysokość równa najniższemu nagłówkowi):

     okno     pudełko rysunku   skala    widoczny viewBox x   ucięte na bok
     375 px   335 × 278,69      1,2331   444,2 … 715,8        38,3 % z każdej
     760 px   720 × 274,25      1,2135   283,3 … 876,7        24,4 % z każdej
     1200 px  1160 × 274,25     1,2135   102,0 … 1058,0        8,8 % z każdej
     1440 px  1160 × 274,25     1,2135   102,0 … 1058,0        8,8 % z każdej
     1920 px  1160 × 274,25     1,2135   102,0 … 1058,0        8,8 % z każdej

   W PIONIE NIE UCINA NIGDY — i to jest powód, dla którego viewBox ma 226,
   a nie 300 jak makieta: 226 to wysokość nagłówka BEZ rzędu kwart, czyli
   najniższego, jaki karta produkuje. Każdy wyższy nagłówek tylko powiększa
   rysunek i przycina skrzydła, a skrzydła to zbiegające się linie boczne —
   tracimy ich zewnętrzne końce, a nie kosz, pole ani koło.

   Skutek uboczny, który wyszedł na dobre: przy nagłówku z kwartami skala 1,2135
   przesuwa linię rzutów wolnych z 184 px na **223,3 px**, czyli dokładnie
   w rząd kwart (214,25–250,25 px). Bez kwart skala wynosi 1,0 i linia stoi na
   182,1 px, nadal pod wynikiem. Jeden rysunek obsługuje oba nagłówki.
   ========================================================================== */

/* Rysunek zastępuje okrąg z `komponenty.css`. */
.wba-mecz__head::after {
	content: none;
}

/* `isolation` domyka kontekst nakładania w nagłówku: cień pod wynikiem i łuna
   pod rysunkiem nie mają prawa wyjść poza tę kartę. */
.wba-mecz__head {
	isolation: isolate;
}

.wba-mecz__boisko {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.wba-boisko__linie {
	fill: none;
	stroke: var(--wp--preset--color--paper);
	stroke-opacity: .2;
	stroke-width: 1.25;
}

/* Łuk za trzy jest bledszy od reszty: biegnie przez całą szerokość kadru
   i przy kryciu linii bocznych rozbijał kompozycję na dwie połowy. */
.wba-boisko__luk {
	stroke-opacity: .13;
}

/* Kosz. Tablica jest najmocniejszą kreską zespołu, bo to ona niesie kształt;
   kwadrat celowniczy jest słabszy, żeby nie rozbijał tablicy na dwie figury.
   Obręcz świeci najmocniej i jako jedyna jest złota — to ona ma od razu
   powiedzieć „kosz", a złoto jest już w palecie nagłówka (dwukropek wyniku). */
.wba-boisko__tablica {
	stroke-width: 1.6;
	stroke-opacity: .32;
}

.wba-boisko__cel {
	stroke-width: 1.1;
	stroke-opacity: .22;
}

.wba-boisko__obrecz {
	stroke: var(--wp--preset--color--gold);
	stroke-opacity: .58;
	stroke-width: 1.9;
}

.wba-boisko__siatka {
	stroke-linecap: round;
	stroke-opacity: .22;
	stroke-width: .8;
}

.wba-boisko__pole {
	fill: url(#wba-boisko-pole);
}

.wba-boisko__luna {
	fill: url(#wba-boisko-luna);
}

/* Jedyne ciepłe miejsce w całym nagłówku jest za obręczą. Kolor bierze się
   ze zmiennej motywu, więc zmiana palety zmienia też boisko. */
.wba-boisko__luna-0 {
	stop-color: var(--wp--preset--color--gold);
	stop-opacity: .26;
}

.wba-boisko__luna-1 {
	stop-color: var(--wp--preset--color--gold);
	stop-opacity: 0;
}

.wba-boisko__pole-0 {
	stop-color: var(--wp--preset--color--gold);
	stop-opacity: .085;
}

.wba-boisko__pole-1 {
	stop-color: var(--wp--preset--color--gold);
	stop-opacity: 0;
}

/* Wynik leży na parkiecie, a nie unosi się nad nim. `rotateX` nie zmienia
   rozmiaru elementu w siatce, więc kolumna `auto` nagłówka zostaje ta sama —
   sprawdzone pomiarem `gridTemplateColumns` przed zmianą i po.

   GODZINA NIE DOSTAJE POCHYLENIA (`:not(.is-godzina)`). Na karcie bez wyniku
   w tym miejscu stoi etykieta „POCZĄTEK" nad godziną; pochylony dwuwierszowy
   blok czyta się jak przekrzywiony, a nie jak namalowany na podłodze. */
.wba-mecz__wynik:not(.is-godzina) {
	transform: perspective(620px) rotateX(17deg);
	transform-origin: 50% 100%;
	text-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   2. WYNIK PO KWARTACH

   DLACZEGO RZĄD JEST RODZEŃSTWEM `<h1>`, A NIE SIEDZI W ŚRODKOWEJ KOMÓRCE
   SIATKI (tak, jak robi to makieta). Siatka starcia to `1fr auto 1fr`, więc
   kolumna środkowa ma szerokość swojej treści. Pięć kafli kwart to ok. 296 px
   — przy 1440 px zmieściłoby się (kolumny drużyn zeszłyby z 472 na ok. 392 px),
   ale przy 375 px na całą treść nagłówka zostaje 303 px, więc na drużyny
   zostałoby po ok. 37 px przy herbie 56 px. Nagłówek rozjechałby się w poziomie.

   Wyśrodkowanie jest od tego niezależne i to jest POMIAR, nie założenie:
   przy `1fr auto 1fr` kolumna środkowa stoi dokładnie na osi pudełka
   (zmierzone `getBoundingClientRect`: środek wyniku 720,00 px, środek nagłówka
   720,00 px przy oknie 1440). Rząd wyśrodkowany w nagłówku jest więc tym samym
   wyśrodkowany względem osi wyniku.

   RZĘDU NIE MA WCALE, gdy meczu nie ma w `wba_pbp` — nie ma pustych kresek,
   zer ani rezerwy miejsca. Zmierzone: kwarty da się policzyć dla 336 z 2 937
   meczów, więc 2 601 kart nie ma tu dokładnie nic i nagłówek zostaje na
   dzisiejszej wysokości.
   ========================================================================== */
/* PODKŁAD POD METRYKĘ — nie ozdoba, tylko warunek czytelności.
   Przy wąskim kadrze `preserveAspectRatio="slice"` zostawia na ekranie sam
   środek rysunku, a metryka biegnie dokładnie po jego najjaśniejszym miejscu:
   po krawędzi tablicy, boku trapezu i jądrze łuny. Zmierzone przy 375 px na
   pikselach W PEŁNI zakrytych pismem: 3,25:1 na tle rgb(121,117,101) (krawędź
   tablicy) i 3,62:1 na tle rgb(119,107,70) (bok trapezu z łuną) — oba poniżej
   progu 4,5. Wzmocnienie samego napisu tu nie pomoże: nawet czysta biel na
   tle rgb(121,117,101) daje 4,47:1, więc ściemnić trzeba TŁO.
   Podkład jest atramentowy, więc nad samą plamą nagłówka jest niewidoczny
   (atrament na atramencie), a nad jasną kreską ściemnia dokładnie tyle, ile
   trzeba. Tło i cień nie zmieniają układu — metryka jest siatką elastyczną
   i żaden `padding` tu nie wchodzi, więc wysokość nagłówka zostaje ta sama. */
.wba-mecz__metryka > span {
	border-radius: 5px;
	background: rgba(20, 24, 33, .62);
	box-shadow: 0 0 10px 5px rgba(20, 24, 33, .62);
}

/* UKŁAD ŚRODKOWEJ KOLUMNY — dwa warianty, próg dobrany pomiarem.

   SZEROKO (>= PROG): wynik i kwarty stoją w jednym pudełku `.wba-mecz__srodek`
   w środkowej kolumnie siatki `1fr auto 1fr`, jedno pod drugim, z odstępem
   **10 px**. Dziesiątki nie ma w siatce odstępów motywu (4, 8, 12, 16, 20…),
   a kryterium odbioru brzmi „10 px ± 1", więc ani `s-2` (8), ani `s-3` (12)
   w nie nie wchodzi — stoi tu więc liczba wprost, z tym komentarzem zamiast
   zmiennej. Wyśrodkowanie poziome bierze się stąd, co dotąd: kolumna `auto`
   siedzi na osi pudełka, więc oś kafli i oś wyniku to ta sama oś.

   WĄSKO (< 940 px): pudełko rozpuszcza się (`display: contents`) i kwarty
   wracają pod całe starcie, na pełną szerokość. Powód jest zmierzony: pięć
   kafli ma 296 px, a przy 375 px cała treść nagłówka ma 303 px — drużyny
   dostałyby po ~37 px przy herbie 56 px.

   PRÓG 940 px JEST POLICZONY Z POMIARÓW, NIE OKRĄGŁY Z GUSTU:
       296 px  pięć kafli (najszerszy rząd, jaki baza produkuje)
     +  24 px  dwie przerwy siatki (`s-3`)
     + 526 px  dwie nazwy po 262,9 px — „TRYBANSKI BASKETBALL ACADEMY",
               najdłuższa nazwa drużyny WŚRÓD KART Z KWARTAMI (zapytanie
               w dzienniku), zmierzona w przeglądarce, nie policzona ze znaków
     +  88 px  marginesy strony w tym zakresie szerokości
     = 934 px  najwęższe okno, w którym nic się nie zawija — sprawdzone: przy
               934 px obie nazwy mają po jednym wierszu, przy 831 px nazwa
               gościa łamie się na dwa.
   Próg stoi 6 px wyżej, żeby zaokrąglenia i pasek przewijania nie trafiały
   w samą granicę. Przy czterech kaflach (328 z 338 kart) wystarczyłoby 880 px,
   ale drugi próg to druga gałąź do utrzymania — jedna mierzona granica jest
   warta więcej niż 60 px zysku na wąskim paśmie szerokości.

   `display: contents` jest tu bezpieczne, bo `.wba-mecz__srodek` to zwykły
   `<span>` bez własnej semantyki — nie ma czego zgubić w drzewie dostępności. */
.wba-mecz__srodek {
	display: contents;
}

.wba-mecz__starcie > .wba-mecz__druzyna.is-gosp {
	grid-area: 1 / 1;
}

.wba-mecz__wynik {
	grid-area: 1 / 2;
}

.wba-mecz__starcie > .wba-mecz__druzyna.is-gosc {
	grid-area: 1 / 3;
}

.wba-mecz__kwarty {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	grid-area: 2 / 1 / auto / -1;
	justify-content: center;
	gap: var(--wp--preset--spacing--s-1);
	margin: 0;
	padding: 0;
}

/* LIVE PERIOD AND CLOCK (since 2026-10-04, `wba_faza_meczu()`).
   Narrow: the middle box dissolves, so the label takes row 2 across the
   whole header and the period tiles, when present, move to row 3. Wide: it
   sits in the column between the score and the tiles (rules below).
   Own dark ground for the same reason as `.wba-mecz__nota`: the court lines
   behind it are the lightest part of the drawing. */
.wba-mecz__faza {
	position: relative;
	z-index: 1;
	display: inline-flex;
	grid-area: 2 / 1 / auto / -1;
	justify-self: center;
	align-items: center;
	gap: 7px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(20, 24, 33, .8);
	color: var(--wp--preset--color--paper);
	font-size: .6875rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

.wba-mecz__faza ~ .wba-mecz__kwarty {
	grid-area: 3 / 1 / auto / -1;
}

.wba-mecz__faza-kropka {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background-color: #FF7A6B;
	animation: wba-mecz-faza 1.2s infinite;
}

@keyframes wba-mecz-faza {
	0%, 100% { opacity: 1; }
	50% { opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
	.wba-mecz__faza-kropka {
		animation: none;
	}
}

@media (min-width: 940px) {
	.wba-mecz__srodek > .wba-mecz__faza {
		grid-area: auto;
		align-self: center;
	}

	.wba-mecz__srodek {
		display: flex;
		flex-direction: column;
		align-self: start;
		align-items: center;
		gap: 10px;
		grid-area: 1 / 2;
	}

	/* W kolumnie elastycznej `align-self` rządzi osią POZIOMĄ, a wynik ma
	   z `komponenty.css` `align-self: start` — bez tego przykleiłby się do
	   lewej krawędzi pudełka zamiast stanąć na osi. */
	.wba-mecz__srodek > .wba-mecz__wynik {
		grid-area: auto;
		align-self: center;
	}

	.wba-mecz__srodek > .wba-mecz__kwarty {
		grid-area: auto;
	}
}

.wba-mecz__kw {
	display: grid;
	min-width: 56px;
	justify-items: center;
	gap: 3px;
	padding: 5px var(--wp--preset--spacing--s-2) 6px;
	background: rgba(255, 255, 255, .07);
	border-radius: var(--wp--custom--radius--sm);
}

/* Dogrywka jest innym zwierzęciem niż kwarta i ma tak wyglądać: dziesięć
   meczów w bazie ma dogrywkę, a bez wyróżnienia piąty kafel czytałby się jak
   piąta kwarta, której w koszykówce nie ma. */
.wba-mecz__kw.is-dogrywka {
	background: rgba(248, 184, 0, .16);
}

/* `.82`, A NIE `.72` JAK „GOSPODARZ"/„GOŚĆ" I METRYKA W TYM SAMYM NAGŁÓWKU —
   i to jest wynik pomiaru, nie niekonsekwencja. Kontrast liczony z PIKSELI
   zrzutu (tekst schowany `visibility: hidden`, więc próbki są czystym tłem;
   brane najjaśniejsze tło pod każdym napisem, czyli przypadek najgorszy):

     metryka .72            tło rgb(88, 81, 59)   → 5,03:1
     „gospodarz"/„gość" .72 tło rgb(50, 54, 62)   → 7,16:1
     numer kwarty .72       tło rgb(96, 88, 65)   → **4,59:1**

   Numer kwarty leży nad polem rzutów wolnych, czyli nad najjaśniejszym
   miejscem rysunku, a ma 9 px — próg WCAG to dla niego 4,5:1, więc 4,59
   przechodziło o 0,09. Za mało zapasu jak na wartość, którą ktoś kiedyś
   podkręci przy zmianie łuny. `.82` daje na tym samym tle **5,40:1**. */
.wba-mecz__kw-n {
	color: rgba(255, 255, 255, .82);
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
}

.wba-mecz__kw-w {
	color: var(--wp--preset--color--paper);
	font-size: .8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* NOTA O STANIE WYNIKU DOSTAJE WŁASNY GRUNT — i to jest naprawa skutku ubocznego
   MOJEJ zmiany, nie cudza usterka. W `komponenty.css` nota ma tło
   `rgba(255, 255, 255, .09)`, czyli film, przez który do niedawna prześwitywał
   jednolity `ink` (biały tekst na nim to ok. 13:1). Po położeniu boiska pod
   spodem przez ten sam film prześwitują linie parkietu i łuna.
   Zmierzone z pikseli na karcie 1849483 (walkower, nota pełnej szerokości,
   tekst schowany, brane najjaśniejsze tło): biel na tle rgb(110, 112, 118)
   daje **4,95:1** — jeszcze przechodzi, ale po zmianie z 13:1.
   Warstwa `ink` pod filmem odcina rysunek i wraca do **10,6:1** obliczeniowo
   (tło składa się wtedy do rgb(59, 63, 70)), a nota zaczyna czytać się jak
   tabliczka LEŻĄCA na parkiecie, nie jak napis wtopiony w linie. */
.wba-mecz__nota {
	background:
		linear-gradient(rgba(255, 255, 255, .11), rgba(255, 255, 255, .11)),
		rgba(20, 24, 33, .8);
}

/* ==========================================================================
   3. PASEK SEKCJI

   Pasek powstaje z sekcji, które NAPRAWDĘ się wyrenderowały (patrz
   `wba_render_strona_meczu()`), więc bywa trzy-, cztero- i pięcioelementowy.
   Dlatego `flex-wrap`, a nie `overflow-x: auto`: przy 375 px pięć odsyłaczy
   ma razem ok. 530 px i musi się gdzieś podziać, a ukryty pasek przewijania
   chowałby ostatnie pozycje bez śladu, że tam są.
   ========================================================================== */
.wba-mecz__sekcje {
	display: flex;
	flex-wrap: wrap;
	margin: var(--wp--preset--spacing--s-3) 0 0;
	padding: 0 var(--wp--preset--spacing--s-2);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.wba-mecz__sek-a {
	position: relative;
	padding: var(--wp--preset--spacing--s-4) var(--wp--preset--spacing--s-4) 13px;
	color: var(--wp--preset--color--muted);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.wba-mecz__sek-a:hover {
	color: var(--wp--preset--color--body-text);
}

/* Ognisko widoczne, bo pasek jest pierwszą rzeczą pod nagłówkiem i pierwszym
   przystankiem klawiatury na tej stronie. */
.wba-mecz__sek-a:focus-visible {
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--body-text);
	outline: 2px solid var(--wp--preset--color--red-700);
	outline-offset: -2px;
}

/* Stan bieżący tą samą zasadą, co w sterowaniu odtwarzacza: kreska pod
   pozycją, nie zmiana tła. Kreska stoi na linii `border-bottom` paska
   (`bottom: -1px`), żeby ją przykryć, a nie stanąć nad nią. */
.wba-mecz__sek-a.is-teraz {
	color: var(--wp--preset--color--body-text);
	font-weight: 700;
}

.wba-mecz__sek-a.is-teraz::after {
	content: "";
	position: absolute;
	right: var(--wp--preset--spacing--s-4);
	bottom: -1px;
	left: var(--wp--preset--spacing--s-4);
	height: 2px;
	background: var(--wp--preset--color--red-700);
}

/* KOTWICA SEKCJI. Pusty element o zerowej wysokości PRZED sekcją, a nie `id`
   na samej sekcji — bo trzy z czterech sekcji karty składa `wba_sekcja_statystyk()`
   ze wspólnego pliku, a jedna („Przebieg meczu") mieszka w `mecz-zdarzenia.php`,
   poza terenem tego zadania. Kotwica z zewnątrz działa dla wszystkich czterech
   tak samo i nie zależy od tego, co sekcja renderuje w środku.

   `scroll-margin-top` JEST WARUNKIEM DZIAŁANIA, NIE OZDOBĄ: pasek strony jest
   przyklejony (`--wba-pasek-gorny: 77px`, `z-index: 30`), więc kotwica bez
   zapasu wjeżdża pod niego razem z nagłówkiem sekcji. `+ s-4` daje 16 px
   powietrza między paskiem a nagłówkiem. */
.wba-mecz__kotwica {
	display: block;
	height: 0;
	scroll-margin-top: calc(var(--wba-pasek-gorny, 77px) + var(--wp--preset--spacing--s-4));
}

/* ==========================================================================
   4. WĘŻSZE EKRANY
   ========================================================================== */
@media (max-width: 600px) {
	/* Kafle kwart schodzą z 56 na 46 px, bo przy 375 px pięć kafli po 56 px
	   z odstępami ma 296 px wobec 303 px treści nagłówka — mieści się, ale bez
	   zapasu na trzycyfrowe wyniki kwart (te istnieją: przy 40 pkt w kwarcie
	   napis ma cztery znaki po każdej stronie dwukropka). */
	.wba-mecz__kw {
		min-width: 46px;
		padding: 4px 6px 5px;
	}

	.wba-mecz__kw-w {
		font-size: .75rem;
	}

	/* Mniejszy odstęp w pasku sekcji: przy 375 px pięć odsyłaczy z odstępem
	   16 px zajmuje trzy wiersze, z 10 px — dwa. */
	.wba-mecz__sek-a {
		padding: var(--wp--preset--spacing--s-3) 10px 11px;
	}

	.wba-mecz__sek-a.is-teraz::after {
		right: 10px;
		left: 10px;
	}
}

/* ==========================================================================
   5. TRYB WYMUSZONYCH KOLORÓW

   Rysunek boiska jest DEKORACJĄ (`aria-hidden`), a w `forced-colors` nie ma
   sposobu, żeby został dekoracją: krycie obrysu nie jest wymuszane, więc
   linie 20 % zamieniają się w pełne `CanvasText` i nagłówek robi się siatką
   kresek pod wynikiem. Znika więc w całości, a nagłówek zostaje przy swoim
   jednolitym tle — czyli dokładnie przy tym, po co ten tryb jest włączany.
   ========================================================================== */
@media (forced-colors: active) {
	.wba-mecz__boisko {
		display: none;
	}

	.wba-mecz__wynik:not(.is-godzina) {
		text-shadow: none;
	}

	.wba-mecz__kw,
	.wba-mecz__faza {
		border: 1px solid CanvasText;
	}

	.wba-mecz__sek-a.is-teraz::after {
		background: CanvasText;
	}
}