/* =========================================================
   Deadlockownia - strona bohatera
   Wszystkie klocki z systemu (dl-system/system.css). Tutaj tylko
   modyfikatory dla tej strony, z prefiksem dl-bh-.
   ========================================================= */

/* ---------- HERO ---------- */
.dl-bh-hero { padding: 96px 0 88px; }
/* grafika bohatera ma ciemna lewa strone i akcent po prawej - przesuwamy ja w prawo */
.dl-bh-hero .dl-g-hero-tlo { object-position: 72% 30%; opacity: .9; }
/* delikatna poswiata w kolorze postaci, pod trescia, nad tlem */
.dl-bh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(55% 70% at 80% 45%, rgba(var(--kolor-boh), .16), transparent 70%);
	pointer-events: none;
}
.dl-bh-uklad { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 380px); align-items: center; }

.dl-bh-nad-h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 14px; }
.dl-bh-nad-h1 .dl-g-etykieta { margin-bottom: 0; }
.dl-bh-ang { font-size: 14px; font-weight: 600; color: var(--muted); }
.dl-bh-ang b { color: var(--txt); font-weight: 700; }
.dl-bh-chipy { margin-top: 26px; }

.dl-bh-karta {
	background: rgba(15, 15, 19, .74);
	backdrop-filter: blur(8px);
	border: 1px solid var(--linia);
	border-left: 2px solid var(--z);
	clip-path: polygon(var(--rog) 0, 100% 0, 100% calc(100% - var(--rog)), calc(100% - var(--rog)) 100%, 0 100%, 0 var(--rog));
}
.dl-bh-portret {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: center 22%;
	background: #101014;
	border-bottom: 1px solid var(--linia);
}
.dl-bh-liczby { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.dl-bh-liczby li { padding: 16px 20px; border-bottom: 1px solid var(--linia); }
.dl-bh-liczby li:nth-child(odd) { border-right: 1px solid var(--linia); }
.dl-bh-liczby b { display: block; font-size: 30px; font-weight: 700; line-height: 1; color: var(--z); }
.dl-bh-liczby span { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: var(--muted); }
/* trudnosc: slupki + slowo w kolorze poziomu (ten sam wskaznik co na liscie bohaterow) */
.dl-bh-liczby b.dl-bh-trud { display: flex; align-items: center; gap: 10px; height: 30px; font-size: 22px; }
.dl-bh-trud.t1 { color: #a3f0cb; }
.dl-bh-trud.t2 { color: #f3cf8a; }
.dl-bh-trud.t3 { color: #ffb88c; }
.dl-bh-trud.t4 { color: #ff9a9a; }
.dl-bh-proba { margin: 0; padding: 12px 20px 14px; font-size: 13px; line-height: 1.45; color: var(--muted2); }

/* ---------- UMIEJETNOSCI ---------- */
.dl-bh-um { padding: 28px; }
.dl-bh-um-glowka { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.dl-bh-um-glowka .dl-g-karta-etykieta { display: block; margin-bottom: 4px; }
.dl-bh-um-ikona {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 50% 35%, #25252d, #111115);
	border: 1px solid rgba(255, 255, 255, .1);
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.dl-bh-um-ikona img { width: 44px; height: 44px; object-fit: contain; }
.dl-bh-ult { border-color: rgba(238, 187, 96, .55); background: radial-gradient(circle at 50% 35%, rgba(238, 187, 96, .24), #111115); }
.dl-bh-um-nazwa { margin: 0; font-size: 25px; font-weight: 700; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.dl-bh-um-quip { margin: 0 0 10px; font-size: 16.5px; font-weight: 600; line-height: 1.45; color: var(--txt); }
.dl-bh-um-opis { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: var(--muted); }

/* wyroznienia z opisow gry */
.dl-bh-wyr { font-weight: 700; color: var(--z); }
.dl-bh-atr { font-weight: 700; }
.dl-bh-atr-duch { color: var(--duch); }
.dl-bh-atr-bron { color: var(--bron); }
.dl-bh-atr-leczenie { color: var(--dobry); }
.dl-bh-atr-efekt { color: #fff; }
.dl-bh-drobne { display: block; margin-top: 10px; font-size: 14px; font-style: italic; color: var(--muted2); }

.dl-bh-wartosci { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 20px; }
.dl-bh-wartosci div { padding: 9px 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--linia); }
.dl-bh-wartosci dt { margin: 0 0 3px; font-size: 11.5px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 1px; color: var(--muted2); }
.dl-bh-wartosci dd { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }
.dl-bh-wartosci dd i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--duch); white-space: nowrap; }

.dl-bh-ulepszenia { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid var(--linia); display: grid; gap: 11px; }
.dl-bh-ulepszenia li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.5; color: #c8c8d2; }
/* koszt w punktach umiejetnosci - fioletowy romb jak w grze */
.dl-bh-koszt {
	position: relative;
	isolation: isolate;
	flex: 0 0 24px;
	height: 24px;
	margin-top: 0;
	display: grid;
	place-items: center;
	font-size: 12.5px;
	font-weight: 800;
	color: #fff;
}
.dl-bh-koszt::before {
	content: "";
	position: absolute;
	inset: 3px;
	z-index: -1;
	transform: rotate(45deg);
	background: rgba(198, 140, 255, .22);
	border: 1px solid rgba(198, 140, 255, .7);
}

.dl-bh-historia { margin-top: 24px; background: rgba(255, 255, 255, .02); border: 1px solid var(--linia); }
.dl-bh-historia summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 17px 22px;
	cursor: pointer;
	list-style: none;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: var(--z);
}
.dl-bh-historia summary::-webkit-details-marker { display: none; }
.dl-bh-historia summary::after { content: "+"; margin-left: auto; font-size: 22px; line-height: 1; }
.dl-bh-historia[open] summary::after { content: "−"; }
.dl-bh-historia p { margin: 0; padding: 0 22px 22px; max-width: 80ch; font-size: 15.5px; line-height: 1.7; color: var(--muted); }

/* ---------- KONTRY I TEMPO ---------- */
.dl-bh-kol { padding: 22px; }
.dl-bh-kol-zle { color: var(--slaby); }
.dl-bh-kol-dobre { color: var(--dobry); }
.dl-bh-lista { display: grid; gap: 6px; margin-top: 4px; }
.dl-bh-poz {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 12px 6px 6px;
	background: rgba(255, 255, 255, .025);
	border: 1px solid var(--linia);
	transition: border-color .16s, background .16s;
}
a.dl-bh-poz:hover { border-color: rgba(238, 187, 96, .45); background: rgba(238, 187, 96, .05); }
.dl-bh-poz img { flex: 0 0 40px; width: 40px; height: 40px; object-fit: cover; object-position: center 15%; background: #0d0d11; }
.dl-bh-poz b { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-bh-poz span { font-size: 16px; font-weight: 800; color: var(--txt); }

.dl-bh-tempo { margin-top: 56px; }
.dl-bh-skala { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dl-bh-skala-poz {
	padding: 18px 12px 16px;
	text-align: center;
	background: linear-gradient(180deg, var(--karta-a), var(--karta-b));
	border: 1px solid var(--linia);
	border-bottom: 3px solid var(--linia);
}
.dl-bh-skala-poz.naj { border-bottom-color: var(--dobry); background: linear-gradient(180deg, rgba(111, 224, 163, .09), var(--karta-b)); }
.dl-bh-skala-poz.gorsz { border-bottom-color: var(--slaby); }
.dl-bh-skala-poz b { display: block; margin-bottom: 5px; font-size: 27px; font-weight: 700; line-height: 1; color: #fff; }
.dl-bh-skala-poz.naj b { color: var(--dobry); }
.dl-bh-skala-poz.gorsz b { color: var(--slaby); }
.dl-bh-skala-poz em { display: block; margin-bottom: 2px; font-style: normal; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; color: var(--txt); }
.dl-bh-skala-poz i { font-style: normal; font-size: 12.5px; color: var(--muted2); }
.dl-bh-werdykt { margin: 14px 0 0; padding: 14px 18px; font-size: 15.5px; line-height: 1.6; color: var(--muted); background: rgba(255, 255, 255, .025); border-left: 2px solid var(--z); }
.dl-bh-werdykt b { color: var(--z); }
.dl-bh-werdykt span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted2); }

/* ---------- BRON I STATYSTYKI ---------- */
.dl-bh-bron-obraz { display: block; width: 100%; max-width: 440px; height: auto; margin: 6px auto 16px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .6)); }
.dl-bh-cechy { margin-bottom: 14px; }
.dl-bh-tabela { display: grid; margin: 0; }
.dl-bh-tabela div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linia); }
.dl-bh-tabela div:last-child { border-bottom: 0; }
.dl-bh-tabela dt { font-size: 15px; font-weight: 500; color: var(--muted); }
.dl-bh-tabela dd { margin: 0; font-size: 16.5px; font-weight: 700; color: #fff; text-align: right; }
.dl-bh-poziom-tytul { margin: 22px 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; color: var(--z) !important; }
.dl-bh-poziom { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dl-bh-poziom li { padding: 9px 12px; font-size: 14px; line-height: 1.4; color: var(--muted); background: rgba(255, 255, 255, .03); border: 1px solid var(--linia); }
.dl-bh-poziom b { font-size: 16px; color: #fff; }

/* ---------- PATCH I BUILDY ---------- */
.dl-bh-caly { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--z) !important; }
.dl-bh-caly:hover { color: var(--z-hi) !important; }
.dl-bh-historia-zmian { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--linia); }
.dl-bh-historia-zmian .dl-bh-poziom-tytul { margin-top: 18px; }
.dl-bh-zmiana { border-bottom: 1px solid var(--linia); }
.dl-bh-zmiana summary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
}
.dl-bh-zmiana summary::-webkit-details-marker { display: none; }
.dl-bh-zmiana summary::after { content: "+"; margin-left: auto; font-size: 20px; line-height: 1; color: var(--z); }
.dl-bh-zmiana[open] summary::after { content: "−"; }
.dl-bh-zmiana time { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--z); white-space: nowrap; }
.dl-bh-zmiana b { font-size: 15px; font-weight: 700; color: #fff; }
.dl-bh-zmiana i { font-style: normal; font-size: 13px; color: var(--muted2); }
.dl-bh-zmiana summary:hover b { color: var(--z-hi); }
.dl-bh-zmiana .dl-bh-patch-lista { margin: 0 0 6px; }
.dl-bh-zmiana .dl-bh-caly { margin: 4px 0 14px; }
.dl-bh-zmiany { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dl-bh-zmiany-jedna { grid-template-columns: minmax(0, 1fr); }
.dl-bh-patch-lista { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; }
.dl-bh-patch-lista li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: #cdcdd6; }
.dl-bh-patch-lista li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--z2); transform: rotate(45deg); }
.dl-bh-przypis { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted2); }
.dl-bh-przypis a { margin-left: 6px; font-weight: 700; color: var(--z) !important; white-space: nowrap; }
.dl-bh-przypis a:hover { color: var(--z-hi) !important; }
.dl-bh-buildy { display: grid; gap: 12px; }
.dl-bh-buildy .dl-bh-przypis { margin-top: 4px; }
.dl-bh-build { padding: 20px 22px; }
.dl-bh-build-nazwa { font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; }
.dl-bh-build p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- PODOBNI ---------- */
.dl-bh-podobni { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.dl-bh-podobny { padding: 0; }
.dl-bh-podobny img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 14 / 15;
	object-fit: cover;
	object-position: center 15%;
	background: #0d0d11;
	filter: grayscale(.25) brightness(.88);
	transition: filter .2s;
}
a.dl-bh-podobny:hover img { filter: none; }
.dl-bh-podobny b { padding: 11px 12px 0; font-size: 16px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .5px; color: #fff; }
.dl-bh-podobny span { padding: 3px 12px 13px; font-size: 14px; font-weight: 700; color: var(--muted); }

/* ---------- MNIEJSZE EKRANY ---------- */
@media (max-width: 1080px) {
	.dl-bh-uklad { grid-template-columns: 1fr; }
	.dl-bh-karta { display: grid; grid-template-columns: 200px minmax(0, 1fr); max-width: 640px; }
	.dl-bh-portret { height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--linia); }
	.dl-bh-proba { grid-column: 1 / -1; border-top: 1px solid var(--linia); }
	.dl-bh-liczby li:nth-last-child(-n+2) { border-bottom: 0; }
	.dl-bh-zmiany { grid-template-columns: minmax(0, 1fr); }
	.dl-bh-podobni { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* trzy waskie listy mieszcza sie obok siebie dluzej niz zwykle karty -
	   przy 2 kolumnach trzecia zostawala sama w drugim rzedzie */
	.dl-bh-kontry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.dl-bh-hero { padding: 64px 0 56px; }
	.dl-bh-karta { grid-template-columns: 116px minmax(0, 1fr); }
	.dl-bh-liczby li { padding: 13px 14px; }
	.dl-bh-liczby b { font-size: 24px; }
	.dl-bh-liczby span { font-size: 11.5px; letter-spacing: 1px; }
	.dl-bh-liczby b.dl-bh-trud { height: 24px; gap: 8px; font-size: 18px; }
	.dl-bh-um { padding: 22px 18px; }
	.dl-bh-um-nazwa { font-size: 21px; }
	.dl-bh-um-ikona { flex-basis: 56px; width: 56px; height: 56px; }
	.dl-bh-um-ikona img { width: 38px; height: 38px; }
	.dl-bh-wartosci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-bh-skala { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-bh-skala-poz b { font-size: 23px; }
	.dl-bh-tempo { margin-top: 44px; }
	.dl-bh-podobni { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
	.dl-bh-kontry { grid-template-columns: minmax(0, 1fr); }
	.dl-bh-podobny b { font-size: 14px; padding: 9px 9px 0; }
	.dl-bh-podobny span { font-size: 13px; padding: 2px 9px 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.dl-bh-poz, .dl-bh-podobny img { transition: none; }
}