/* -------------------------------------------------------------------------
 * Mapa rzutów meczu — zakładka „Mapa rzutów” na karcie /mecz/<id>/.
 *
 * Arkusz wchodzi PO `komponenty.css` i tylko na karcie meczu, więc reguły
 * stąd mają pierwszeństwo przy tej samej specyficzności. Podstawowy wygląd
 * planszy i znaczników nadal stoi w `komponenty.css` (blok „przebieg meczu”)
 * — tutaj idą zmiany i to, co dojdzie nowego.
 *
 * Kolory bierz z zmiennych `theme.json` (`--wp--preset--color--*`), nigdy
 * wprost. Znacznik niecelny musi różnić się KSZTAŁTEM, nie tylko barwą.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Znacznik niecelny: krzyżyk, nie obwódka.
 *
 * Dotąd niecelny był tym samym kółkiem bez wypełnienia. To JEST różnica
 * kształtu, ale słaba: przy 10 px obwódka i krążek różnią się na ekranie
 * jasnością środka, a nie konturem, więc czyta się je jak dwa odcienie tego
 * samego znacznika. Krzyżyk różni się konturem i pokrywa się z legendą,
 * o którą prosi klient („trafione ● / niecelne ✗”).
 *
 * Kolor bierzemy z `currentColor`, żeby jeden zestaw reguł obsłużył obie
 * drużyny — dlatego `color` jest ustawiony na wariantach drużynowych.
 * ---------------------------------------------------------------------- */

.wba-rzut--gospodarz {
	color: var(--wp--preset--color--slate);
}

.wba-rzut--gosc {
	color: var(--wp--preset--color--red-700);
}

.wba-rzut--niecelny {
	background: transparent;
	border: 0;
	border-radius: 0;
}

.wba-rzut--niecelny::before,
.wba-rzut--niecelny::after {
	background: currentColor;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	top: calc(50% - 1px);
}

.wba-rzut--niecelny::before {
	transform: rotate(45deg);
}

.wba-rzut--niecelny::after {
	transform: rotate(-45deg);
}

/* Kreski krzyżyka są ustawiane WZGLĘDEM znacznika, więc znacznik musi być
   elementem pozycjonowanym także tam, gdzie stoi w tekście. `komponenty.css`
   daje legendzie `position: static` — wtedy krzyżyk uciekał do najbliższego
   pozycjonowanego przodka i lądował w rogu listy. `relative` bez przesunięć
   zachowuje się w układzie tak samo jak `static`. */
.wba-rzuty__legenda .wba-rzut,
.wba-rzuty__druzyna .wba-rzut {
	flex: 0 0 auto;
	margin: 0;
	position: relative;
}

/* -------------------------------------------------------------------------
 * Układ: składy po bokach boiska.
 *
 * Bez skryptu kolumny mają `hidden`, więc siatka zostaje jednokolumnowa
 * i panel wygląda dokładnie jak przed zmianą: samo boisko na pełną szerokość.
 * Trzy kolumny włącza dopiero klasa `wba-rzuty--wlaczone`, którą dokłada
 * skrypt — nie `:has()`, bo ten sam wzorzec (`wba-zakladki--wlaczone`) jest
 * już w tym motywie.
 * ---------------------------------------------------------------------- */

.wba-rzuty__uklad {
	display: grid;
	gap: var(--wp--preset--spacing--s-4);
}

/* Na wąskim ekranie boisko idzie na górę, składy pod nie. Kolumny po bokach
   przy 375 px dałyby boisku niecałe 60 px szerokości albo przewijanie
   w poziomie — jedno i drugie jest gorsze niż przewinięcie o ekran w dół. */
.wba-rzuty__plansza {
	order: -1;
}

.wba-rzuty__sklad {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s-1);
	min-width: 0;
}

.wba-rzuty__sklad[hidden],
.wba-rzuty__narzedzia[hidden] {
	display: none;
}

@media (min-width: 900px) {
	.wba-rzuty--wlaczone .wba-rzuty__uklad {
		align-items: start;
		grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr) minmax(0, 11.5rem);
	}

	.wba-rzuty--wlaczone .wba-rzuty__plansza {
		order: 0;
	}
}

/* -------------------------------------------------------------------------
 * Pasek narzędzi: powrót do „wszystkich” i licznik widocznych rzutów.
 * ---------------------------------------------------------------------- */

.wba-rzuty__narzedzia {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-4);
	margin-bottom: var(--wp--preset--spacing--s-4);
}

.wba-rzuty__b {
	align-items: center;
	display: inline-flex;
	/* 44 px to cel dotknięcia, nie ozdoba: to przycisk, który trafia się
	   kciukiem, żeby wyjść z zawężonego widoku. */
	min-height: 44px;
}

.wba-rzuty__stan,
.wba-rzuty__podpowiedz {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.wba-rzuty__stan {
	font-variant-numeric: tabular-nums;
}

.wba-rzuty__podpowiedz {
	flex: 1 0 100%;
}

/* -------------------------------------------------------------------------
 * Kolumna składu: nagłówek drużyny i przyciski zawodników.
 * ---------------------------------------------------------------------- */

.wba-rzuty__druzyna,
.wba-rzuty__z {
	appearance: none;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 8px;
	color: var(--wp--preset--color--body-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.8125rem;
	min-height: 44px;
	text-align: left;
	width: 100%;
}

.wba-rzuty__druzyna {
	align-items: center;
	background: var(--wp--preset--color--card-2);
	display: flex;
	font-weight: 700;
	gap: var(--wp--preset--spacing--s-2);
	padding: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-3);
}

.wba-rzuty__nazwa {
	min-width: 0;
}

.wba-rzuty__lista {
	display: grid;
	gap: var(--wp--preset--spacing--s-1);
	/* Na telefonie jedna kolumna, od ok. 600 px dwie — lista szesnastu
	   nazwisk pod boiskiem inaczej robi się dłuższa niż samo boisko. */
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.wba-rzuty--wlaczone .wba-rzuty__lista {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wba-rzuty__z {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--s-2);
	grid-template-columns: 1.5rem minmax(0, 1fr) auto;
	padding: var(--wp--preset--spacing--s-1) var(--wp--preset--spacing--s-2);
}

.wba-rzuty__nr,
.wba-rzuty__ile {
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* Plakietka numeru zostaje na swoim miejscu także pusta: źródło pomija numer,
   gdy zawodnik gra z „0”, a rwana kolumna nazwisk czytałaby się jak błąd. */
.wba-rzuty__nr {
	font-weight: 700;
	text-align: right;
}

.wba-rzuty__ile {
	font-size: 0.75rem;
}

.wba-rzuty__kto {
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Zaznaczenie: barwa drużyny, ta sama co znacznik na boisku.
 * ---------------------------------------------------------------------- */

.wba-rzuty__sklad--gospodarz .wba-rzuty__z.is-wybrany,
.wba-rzuty__sklad--gospodarz .wba-rzuty__druzyna.is-wybrany {
	background: var(--wp--preset--color--slate);
	border-color: var(--wp--preset--color--slate);
	color: var(--wp--preset--color--paper);
}

.wba-rzuty__sklad--gosc .wba-rzuty__z.is-wybrany,
.wba-rzuty__sklad--gosc .wba-rzuty__druzyna.is-wybrany {
	background: var(--wp--preset--color--red-700);
	border-color: var(--wp--preset--color--red-700);
	color: var(--wp--preset--color--on-red);
}

.wba-rzuty__z.is-wybrany .wba-rzuty__nr,
.wba-rzuty__z.is-wybrany .wba-rzuty__ile {
	color: inherit;
}

/* Kropka w nagłówku ma trzymać barwę drużyny także wtedy, gdy cały skład jest
   zaznaczony — na tle w tej samej barwie zniknęłaby, więc robi się jasna. */
.wba-rzuty__druzyna.is-wybrany .wba-rzut {
	background: currentColor;
	border-color: currentColor;
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Klawiatura.
 * ---------------------------------------------------------------------- */

.wba-rzuty__b:focus-visible,
.wba-rzuty__druzyna:focus-visible,
.wba-rzuty__z:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Skuteczność ze stref — kafle NA planszy i rzuty wolne POD nią.
 *
 * Kafel strefy nie ma własnego kształtu: jego tło to ta sama zmienna, co tło
 * planszy (`card-2`), tyle że przepuszczalna. Dzięki temu liczba czyta się
 * jak napis na boisku, a znaczniki pod nią zostają widoczne — przygaszone,
 * ale policzalne. `pointer-events: none` zostawia znacznikom ich dymki
 * z opisem rzutu; kafel nie przejmuje ani kliknięcia, ani najechania.
 * ---------------------------------------------------------------------- */

.wba-rzuty__strefa {
	align-items: center;
	background: var(--wp--preset--color--card-2);
	background: color-mix(in srgb, var(--wp--preset--color--card-2) 74%, transparent);
	border-radius: 6px;
	color: var(--wp--preset--color--body-text);
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	padding: 2px 5px;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.wba-rzuty__proc {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.wba-rzuty__ulamek {
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
}

/* NA PLANSZY DRUGI PLAN ROBIMY ROZMIAREM, NIE BARWĄ. Kafel leży na znacznikach,
   więc jego tło nie jest stałe: pod napisem bywa czyste tło planszy (#EEF0F3),
   ale bywa i znacznik. Zmierzone przy przepuszczalności 74 %: `muted` daje
   5,47:1 na czystym tle, ale tylko 3,39:1 nad znacznikiem gospodarza i 3,47:1
   nad znacznikiem gościa — poniżej progu AA. `body-text` trzyma 9,8:1 nawet
   w najgorszym punkcie. Hierarchię niesie więc rozmiar i grubość pisma.
   Pasek rzutów wolnych stoi POD planszą, na jednolitym tle, i zostaje przy
   `muted`. */
.wba-rzuty__strefa .wba-rzuty__ulamek,
.wba-rzuty__strefa.is-pusta .wba-rzuty__proc {
	color: var(--wp--preset--color--body-text);
}

/* Strefa bez ani jednej próby: kreska, nie „0%”. Wyciszona wagą pisma, NIE
   barwą: `faint` (#6B7484) na tle planszy (#EEF0F3) daje 4,13:1 — zmierzone,
   czyli poniżej progu AA. `muted` na tym samym tle daje 5,47:1. Kreska niesie
   informację („nie było prób”), więc musi być czytelna jak każdy inny napis. */
.wba-rzuty__strefa.is-pusta {
	background: none;
}

.wba-rzuty__strefa.is-pusta .wba-rzuty__proc {
	font-weight: 400;
}

/* -------------------------------------------------------------------------
 * Rzuty wolne: osobny pasek pod planszą.
 *
 * Rzut wolny nie ma miejsca na boisku, więc nie może być strefą na rysunku —
 * inaczej mapa skłamałaby o położeniu. Pasek jest wyraźnie inny od kafli:
 * ma ramkę, podpis i nazwę drużyny.
 * ---------------------------------------------------------------------- */

.wba-rzuty__wolne {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-3);
	margin-top: var(--wp--preset--spacing--s-4);
}

.wba-rzuty__wolne-e {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wba-rzuty__w {
	align-items: baseline;
	background: var(--wp--preset--color--card-2);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 999px;
	display: inline-flex;
	gap: var(--wp--preset--spacing--s-2);
	padding: var(--wp--preset--spacing--s-1) var(--wp--preset--spacing--s-3);
}

.wba-rzuty__w-d {
	font-size: 0.8125rem;
	font-weight: 700;
}

.wba-rzuty__w--gospodarz {
	border-left: 4px solid var(--wp--preset--color--slate);
}

.wba-rzuty__w--gosc {
	border-left: 4px solid var(--wp--preset--color--red-700);
}

.wba-rzuty__w.is-pusta .wba-rzuty__proc {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

@media (max-width: 599px) {
	/* Przy 375 px na połowę boiska zostaje ok. 146 px, a kotwice stref stoją
	   od siebie o 41–52 px. Procent (trzy–cztery znaki) tam wchodzi, ułamek
	   już nie — więc ułamek NA PLANSZY znika, a nie zmniejsza się do
	   nieczytelnego. Czytnik ekranu dostaje jedno i drugie tak samo jak na
	   dużym ekranie, bo zdanie opisowe jest osobnym elementem.
	   Pasek rzutów wolnych zostaje pełny: stoi pod planszą i miejsca ma dość. */
	.wba-rzuty__strefa {
		padding: 1px 3px;
	}

	.wba-rzuty__strefa .wba-rzuty__ulamek {
		display: none;
	}

	.wba-rzuty__strefa .wba-rzuty__proc {
		font-size: 0.625rem;
	}
}