.wba-live {
	/* odstępy */
	--wba-s1: var(--wp--preset--spacing--s-1);
	--wba-s2: var(--wp--preset--spacing--s-2);
	--wba-s3: var(--wp--preset--spacing--s-3);
	--wba-s4: var(--wp--preset--spacing--s-4);
	--wba-s5: var(--wp--preset--spacing--s-5);
	--wba-s6: var(--wp--preset--spacing--s-6);
	/* kolory */
	--wba-paper: var(--wp--preset--color--paper);
	--wba-line: var(--wp--preset--color--hairline);
	--wba-ink: var(--wp--preset--color--ink);
	--wba-muted: var(--wp--preset--color--muted);
	--wba-card: var(--wp--preset--color--card);
	--wba-red: var(--wp--preset--color--red);
	--wba-yt: var(--wp--preset--color--yt);
	--wba-onyt: var(--wp--preset--color--on-yt);
	/* Czerwień stanu „na żywo” NA CIEMNYM TLE. Nie jest to `--wba-yt`, i to
	   nie jest kwestia gustu: #E60000 na najjaśniejszym końcu gradientu
	   kafelka (#30343C) daje 2,59:1 — poniżej progu dla tekstu i poniżej
	   progu 3:1 dla kropki. Na zrzucie wygląda mocno, bo oko porównuje
	   nasycenie, nie jasność. Ta wartość daje 4,90:1, zmierzone.
	   Na jasnym tle listy meczów zostaje `--wba-yt` (4,81:1 na bieli). */
	--wba-yt-jasny: #FF7A6B;
	/* promienie, pismo */
	--wba-rmd: var(--wp--custom--radius--md);
	--wba-pill: var(--wp--custom--radius--pill);
	--wba-fmicro: var(--wp--preset--font-size--micro);
	/* siatka strony */
	--wba-maxw: var(--wp--style--global--content-size);
	--wba-padl: var(--wp--style--root--padding-left);
	--wba-padr: var(--wp--style--root--padding-right);

	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wba-line);
}

.wba-live__in {
	display: flex;
	flex-direction: column;
	gap: var(--wba-s6);
	padding-bottom: var(--wba-s6);
}

/* `stretch` zamiast `start` — powód: sekcja PRAWA KOLUMNA w pliku PHP */
.wba-live__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--wba-s6);
	align-items: stretch;
	width: 100%;
	max-width: var(--wba-maxw);
	margin-inline: auto;
	padding: var(--wba-s6) var(--wba-padr) 0 var(--wba-padl);
}

.wba-live__player,
.wba-live__info {
	min-width: 0;
}

/* plansza playera — fasada; iframe powstaje po kliknięciu, w view.js */

/* `min-height: max-content` to NAPRAWA ucinanej pigułki — sekcja PLANSZA w PHP */
.wba-live__stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: max-content;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wba-rmd);
	overflow: hidden;
	background-color: var(--wba-ink);
	background-image: linear-gradient(135deg,
		color-mix(in srgb, var(--wba-ink) 88%, #fff),
		color-mix(in srgb, var(--wba-ink) 88%, #000));
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wba-paper);
	font: inherit;
	text-align: center;
	appearance: none;
}

/* okrąg boiska */
.wba-live__stage::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 46%;
	aspect-ratio: 1;
	border: 2px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.wba-live__stage--play {
	cursor: pointer;
}

.wba-live__stage--play:focus-visible,
.wba-live__yt:focus-visible,
.wba-live__gs:focus-visible,
.wba-live__ls:focus-visible,
.wba-live__fix:focus-visible,
.wba-live__more:focus-visible {
	outline: 3px solid var(--wba-red);
	outline-offset: 2px;
}

.wba-live__poster {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wba-s2);
	padding: var(--wba-s5);
}

.wba-live__pl-when {
	font-size: var(--wba-fmicro);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.wba-live__pl-team {
	font-size: clamp(1.05rem, 2.6vw, 1.35rem);
	font-weight: 800;
	line-height: 1.2;
}

.wba-live__pl-vs {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	color: #9BA3B2;
}

.wba-live__pl-day {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	color: #9BA3B2;
}

.wba-live__pl-big {
	font-size: clamp(1.7rem, 4vw, 2.2rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* nieklikalne = zwykłe zdanie, nie kształt przycisku (#9BA3B2 = 4,92 PASS) */
.wba-live__pl-cta {
	margin-top: var(--wba-s2);
	font-size: var(--wba-fmicro);
	font-weight: 700;
	line-height: 1.2;
	color: #9BA3B2;
}

/* czerwona pigułka = jedyny sygnał „tu jest wideo”; miniatur nie pobieramy */
.wba-live__stage--play .wba-live__pl-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--wba-s2);
	padding: var(--wba-s2) var(--wba-s4);
	border-radius: var(--wba-pill);
	background-color: var(--wba-yt);
	color: var(--wba-onyt);
	font-weight: 800;
}

/* trójkąt CSS-em, nie glifem `▶` — punkt 5 w nagłówku PHP */
.wba-live__stage--play .wba-live__pl-cta::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.wba-live__stage--play:hover .wba-live__pl-cta,
.wba-live__yt:hover,
.wba-live__yt:focus {
	background-color: #c80000;
}

.wba-live__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--wba-rmd);
	box-shadow: var(--wp--preset--shadow--md);
}

/* plakietki stanu */

.wba-live__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wba-s1);
	padding: var(--wba-s1) var(--wba-s3);
	border-radius: var(--wba-pill);
	font-size: var(--wba-fmicro);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
}

.wba-live__stage > .wba-live__badge {
	position: absolute;
	top: var(--wba-s3);
	left: var(--wba-s3);
	z-index: 2;
}

.wba-live__badge.is-live {
	background-color: var(--wba-yt);
	color: var(--wba-onyt);
}

.wba-live__badge.is-done,
.wba-live__badge.is-up {
	background-color: var(--wp--preset--color--slate);
	color: var(--wba-paper);
}

.wba-live__blip,
.wba-live__dot {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background-color: currentColor;
	animation: wba-live-blip 1.2s infinite;
}

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

/* ==========================================================================
   TABLICA WYNIKÓW — kafelek opisu meczu

   Jedyny ciemny kafelek w serwisie i jedyny, który ma prawo taki być: stoi
   bezpośrednio przy czarnej planszy odtwarzacza, a dwa pudełka o tym samym
   tle czytają się jak jedna tablica nad boiskiem. Uzasadnienie w całości —
   w nagłówku `wba_kafelek_meczu()` w PHP.

   Tło jest DOKŁADNIE takie jak planszy (`.wba-live__stage`), z tym samym
   gradientem i tym samym kierunkiem. Gdyby się rozjechały, para wyglądałaby
   na pomyłkę, a nie na zamiar.
   ========================================================================== */

.wba-live__info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wba-s5);
	padding: var(--wba-s5);
	border: 0;
	border-radius: var(--wba-rmd);
	background-color: var(--wba-ink);
	background-image: linear-gradient(135deg,
		color-mix(in srgb, var(--wba-ink) 88%, #fff),
		color-mix(in srgb, var(--wba-ink) 88%, #000));
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wba-paper);
}

/* górna linia: rozgrywki ⟷ stan */

.wba-live__gora {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wba-s1) var(--wba-s3);
	margin: 0;
}

/* Złoto to ten sam sygnał co `.wba-live__pl-when` na planszy — nazwa
   rozgrywek. Żaden inny napis w tym kafelku nie ma prawa być złoty. */
.wba-live__liga {
	font-size: var(--wba-fmicro);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* `margin-left: auto` zamiast polegania na `space-between`: przy meczu bez
   przypisanych rozgrywek lewy element w ogóle nie powstaje i bez tego stan
   skoczyłby na lewą krawędź. */
.wba-live__stan {
	display: inline-flex;
	align-items: center;
	gap: var(--wba-s2);
	margin-left: auto;
	font-size: var(--wba-fmicro);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
	color: #C7CEDA;
}

.wba-live__stan::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background-color: #6B7484;
}

/* Mecz trwający: czerwień i pulsowanie zamiast pigułki. Pigułka dokładałaby
   drugi kształt do rzędu, w którym stoi już nazwa rozgrywek.

   Odcień jest ROZJAŚNIONY względem czerwieni YouTube'a — powód i pomiar przy
   `--wba-yt-jasny` wyżej. Kropka `.wba-live__blip` bierze kolor z
   `currentColor`, więc rozjaśnia się razem z napisem. */
.wba-live__stan.is-live {
	color: var(--wba-yt-jasny);
}

.wba-live__stan.is-live::before {
	display: none;
}

.wba-live__hala {
	margin: var(--wba-s2) 0 0;
	font-size: var(--wba-fmicro);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9BA3B2;
}

/* tabela wyniku */

.wba-live__tab {
	margin-top: var(--wba-s4);
}

/* Siatka „herb | nazwa | punkty”. Herb trzyma lewą krawędź, nazwa rośnie
   w prawo, punkty stoją przy prawej — dzięki temu nie ma tej ~150 px dziury,
   którą zostawiała poprzednia siatka „nazwa | punkty” przy krótkiej nazwie. */
.wba-live__w {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--wba-s3);
	padding: var(--wba-s2) 0;
	font-variant-numeric: tabular-nums;
}

.wba-live__w + .wba-live__w {
	border-top: 1px solid rgba(255, 255, 255, .10);
}

.wba-live__w .wba-live__crest-i,
.wba-live__crest-z {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--wp--custom--radius--sm);
}

.wba-live__w .wba-live__crest-i {
	padding: 1px;
	border-color: rgba(255, 255, 255, .18);
}

/* Miejsce po brakującym herbie — patrz `wba_wiersz_wyniku()` w PHP. */
.wba-live__crest-z {
	display: block;
	border: 1px solid rgba(255, 255, 255, .12);
	background-color: rgba(255, 255, 255, .04);
}

.wba-live__nazwa {
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	overflow-wrap: break-word;
	color: #AEB6C4;
}

.wba-live__pkt {
	justify-self: end;
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
	color: #AEB6C4;
}

/* Mecz bez wyniku: w kolumnie punktów stoi rola, więc musi zejść do wielkości
   napisu pomocniczego — cyfrowy stopień wyglądałby jak wynik. */
.wba-live__pkt.is-rola {
	font-size: var(--wba-fmicro);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #9BA3B2;
}

.wba-live__w.is-win .wba-live__nazwa,
.wba-live__w.is-win .wba-live__pkt {
	color: var(--wba-paper);
}

/* Krecha pod liczbą zwycięzcy jest OZDOBĄ. Nośnikiem dostępnym jest ukryty
   wzrokowo wyraz „wygrana” w nazwie drużyny — patrz `wba_wiersz_wyniku()`. */
.wba-live__w.is-win .wba-live__pkt::after {
	content: "";
	display: block;
	height: 3px;
	margin-top: 5px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--gold);
}

/* przyciski: jeden główny na całą szerokość, pod nim dwa ciche pół na pół */

.wba-live__cta {
	display: grid;
	gap: var(--wba-s2);
	margin: 0;
}

/* `auto-fit` zamiast `1fr 1fr`: przy meczu z nagraniem, ale bez karty Geniusa
   (albo odwrotnie) jedyny przycisk ma zająć całą szerokość, a nie połowę
   i zostawić pustą drugą. */
.wba-live__cta2 {
	display: grid;
	/* 96 px minimum: tyle potrzebuje „Genius Stats” ze strzałką przy 8 px
	   wcięcia. Węższy rząd zawija trzeci przycisk do nowej linii zamiast
	   ściskać napis poza obramowanie (320 px: 2 + 1). */
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: var(--wba-s2);
}

.wba-live__karta,
.wba-live__yt,
.wba-live__gs,
.wba-live__ls {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wba-s2);
	min-height: 44px;
	padding: 0 var(--wba-s4);
	border: 1px solid transparent;
	border-radius: var(--wba-rmd);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

/* Trzy przyciski w rzędzie (YouTube, Genius Stats, LiveStats): przy 16 px
   wcięcia „Genius Stats” wystawało poza przycisk o 1 px przy 390 px i o 6 px
   przy 360 px (scrollWidth > clientWidth, zmierzone 03.10.2026). */
.wba-live__cta2 > a:first-child:nth-last-child(3),
.wba-live__cta2 > a:first-child:nth-last-child(3) ~ a {
	gap: 6px;
	padding: 0 var(--wba-s2);
}

.wba-live__karta {
	background-color: var(--wba-paper);
	color: var(--wba-ink);
	font-weight: 800;
}

.wba-live__karta:hover,
.wba-live__karta:focus {
	color: var(--wba-ink);
}

/* Obramowanie 0,40 biel, nie 0,24: przy 0,24 krawędź przycisku daje 2,14:1
   wobec tła, czyli poniżej progu 3:1 dla elementu sterującego — przycisk
   rozpoznaje się wtedy wyłącznie po napisie. Przy 0,40 jest 3,35:1. */
.wba-live__yt,
.wba-live__gs,
.wba-live__ls {
	border-color: rgba(255, 255, 255, .40);
	background-color: transparent;
	color: #E7EAF0;
	font-weight: 700;
}

.wba-live__yt:hover,
.wba-live__yt:focus,
.wba-live__gs:hover,
.wba-live__gs:focus,
.wba-live__ls:hover,
.wba-live__ls:focus {
	border-color: var(--wba-paper);
	color: var(--wba-paper);
}

/* Na ciemnym tle znaczek odwraca się: czerwone pudełko z białym trójkątem.
   Odwrotnie niż na planszy, gdzie tło pod znaczkiem jest białe. */
.wba-live__yt-ic {
	width: 20px;
	height: 14px;
	flex: none;
	display: inline-grid;
	place-items: center;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wba-yt);
}

.wba-live__yt-ic::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 1px;
	border-left: 7px solid var(--wba-paper);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}

.wba-live__gs-ic {
	width: 9px;
	height: 9px;
	flex: none;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* lista meczów */

.wba-live__fixtures {
	background-color: var(--wba-card);
	border-top: 1px solid var(--wba-line);
}

.wba-live__fixtures-h {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--wba-s3);
	max-width: var(--wba-maxw);
	margin-inline: auto;
	padding: var(--wba-s3) var(--wba-padr) var(--wba-s1) var(--wba-padl);
}

.wba-live__ttl {
	margin: 0;
	font-size: var(--wba-fmicro);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wba-red);
}

/* --faint przechodzi AA tylko na bieli (4,71); tłem jest --card */
.wba-live__day {
	margin: 0;
	font-size: var(--wba-fmicro);
	font-weight: 600;
	color: var(--wp--preset--color--faint);
}

.wba-live__hint {
	margin: 0 0 0 auto;
	font-size: var(--wba-fmicro);
	font-weight: 700;
	color: var(--wba-muted);
}

.wba-live__note {
	margin: 0;
	font-size: var(--wba-fmicro);
	font-weight: 700;
	color: var(--wba-red);
}

.wba-live__hint[hidden],
.wba-live__note[hidden] {
	display: none;
}

.wba-live__list {
	display: flex;
	gap: var(--wba-s3);
	max-width: var(--wba-maxw);
	margin-inline: auto;
	padding: var(--wba-s2) var(--wba-padr) var(--wba-s5) var(--wba-padl);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
}

.wba-live__list::-webkit-scrollbar {
	height: 8px;
}

.wba-live__list::-webkit-scrollbar-thumb {
	background-color: var(--wba-muted);
	border-radius: var(--wba-pill);
}

.wba-live__fix {
	flex: 0 0 auto;
	width: 156px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wba-s1);
	padding: var(--wba-s3) var(--wba-s2);
	border: 1px solid var(--wba-line);
	border-radius: var(--wba-rmd);
	background-color: var(--wba-card);
	color: var(--wp--preset--color--body-text);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.wba-live__fix:hover {
	border-color: var(--wba-muted);
}

.wba-live__fix.is-selected {
	border-color: var(--wba-red);
	box-shadow: 0 0 0 1px var(--wba-red), var(--wp--preset--shadow--sm);
}

/* tłem, nie `opacity` — opacity zabija zmierzony kontrast */
.wba-live__list.has-live .wba-live__fix.is-done {
	background-color: var(--wp--preset--color--card-2);
}

.wba-live__hh {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	white-space: nowrap;
	color: var(--wba-muted);
}

/* data jaśniejsza od godziny o wagę, nie o kolor — ten sam zmierzony muted */
.wba-live__dd {
	font-weight: 500;
}

/* „Nadchodzący” w miejscu znacznika wideo — patrz wba_karta_meczu() */
.wba-live__upc {
	font-size: var(--wba-fmicro);
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.4;
}

.wba-live__fx-score {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	white-space: nowrap;
}

.wba-live__tag {
	padding: 2px var(--wba-s2);
	border-radius: var(--wba-pill);
	background-color: var(--wp--preset--color--slate);
	color: var(--wba-paper);
	font-size: var(--wba-fmicro);
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.5;
	white-space: nowrap;
}

.wba-live__fix.is-live .wba-live__fx-score,
.wba-live__fix.is-live .wba-live__st {
	color: var(--wba-yt);
}

.wba-live__st {
	display: flex;
	align-items: center;
	gap: var(--wba-s2);
	margin-top: auto;
	padding-top: var(--wba-s1);
	color: var(--wba-muted);
}

/* Period and clock of a live card, next to the pulsing dot. Colour comes
   from `.wba-live__st` (live red, selected red). Tabular digits so the
   label does not jump in width between two refreshes of the page. */
.wba-live__faza {
	font-size: var(--wba-fmicro);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	line-height: 1.4;
	white-space: nowrap;
}

.wba-live__tri {
	width: 0;
	height: 0;
	flex: none;
	border-left: 8px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.wba-live__fix.is-live .wba-live__st {
	color: var(--wba-yt);
}

.wba-live__fix.is-selected .wba-live__st {
	color: var(--wba-red);
}

/* znacznik nowego dnia — lista obejmuje więcej niż jeden dzień */
.wba-live__dsep {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	padding-inline: var(--wba-s2);
	border-left: 1px dashed var(--wba-line);
}

.wba-live__dsep-t {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: var(--wba-fmicro);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wba-muted);
}

.wba-live__more {
	flex: 0 0 auto;
	width: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wba-s2);
	padding: var(--wba-s3) 0;
	border: 1px dashed var(--wba-muted);
	border-radius: var(--wba-rmd);
	background-color: var(--wba-card);
	color: var(--wba-muted);
	font: inherit;
	cursor: pointer;
}

.wba-live__more[hidden] {
	display: none;
}

.wba-live__more:hover {
	border-style: solid;
	border-color: var(--wba-red);
	color: var(--wba-red);
}

.wba-live__more[aria-busy="true"] {
	cursor: progress;
}

.wba-live__more-ic {
	width: 0;
	height: 0;
	flex: none;
	border-right: 6px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}

.wba-live__more-t {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: var(--wba-fmicro);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 820px) {
	.wba-live__top {
		grid-template-columns: 1fr;
		gap: var(--wba-s5);
	}

	/* KOLEJNOŚĆ NA WĄSKIM EKRANIE: panel z wynikiem, potem wideo.
	   Odwrotnie niż w kodzie strony i odwrotnie niż na szerokim ekranie.

	   Powód jest w pasku meczów niżej: na telefonie przeklikiwanie kart
	   paska podmienia i planszę, i panel, a oglądać chce się WIDEO. Gdy
	   wideo stoi tuż nad paskiem, kolejne kliknięcie zostawia film
	   w polu widzenia. W układzie zastanym między paskiem a filmem stał
	   panel wysokości pół ekranu i po każdym przekliku trzeba było
	   przewijać w górę, żeby zobaczyć, co się załadowało.

	   Na szerokim ekranie problem nie istnieje — plansza i panel stoją
	   obok siebie, oba nad paskiem — więc tam kolejność zostaje.

	   Świadomy koszt: `order` przestawia OBRAZ, nie kod strony, więc
	   klawiszem Tab wchodzi się najpierw w przycisk odtwarzania (niżej),
	   a dopiero potem w odnośniki panelu (wyżej). Oba bloki opisują ten
	   sam mecz i stoją obok siebie, więc sens czytania się nie psuje;
	   przestawienie w kodzie strony przerzuciłoby tę samą niezgodność
	   na szeroki ekran, gdzie nikt o nią nie prosił. */
	.wba-live__info {
		order: 1;
	}

	.wba-live__player {
		order: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wba-live__blip,
	.wba-live__dot {
		animation: none;
	}

	.wba-live__fix {
		transition: none;
	}
}

/* Podstawa herbu, wspólna dla tablicy wyniku i kart listy. Biała podkładka
   i obramowanie są tu, bo herby bywają przezroczyste i na ciemnym tle bez
   podkładki znikają całkiem; rozmiar i promień ustawia miejsce użycia. */
.wba-live__crest-i {
	flex: none;
	object-fit: contain;
	background-color: var(--wba-paper);
	border: 1px solid var(--wba-line);
}

/* Karta listy: 50×50 i promień 11 px — wartości z makiety, wiersz 214. */
.wba-live__fx-crests {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

.wba-live__fx-crests .wba-live__crest-i {
	width: 60px;
	height: 60px;
	padding: 2px;
	border-radius: 11px;
}