/* =========================================================
   Deadlockownia - wspolny system stron pisanych kodem
   Te same tokeny, jedna szerokosc, jeden naglowek sekcji, jeden
   styl karty. Jesli cos ma wygladac inaczej, to przez modyfikator
   w arkuszu danej strony, a nie przez osobny styl od zera.
   Wzorzec: strona glowna v2 (2026-09-28). Opis zasad i DLACZEGO:
   pamiec projektu "Deadlockownia: system wizualny".
   ========================================================= */

.dl-g, .dl-g-hero, .dl-g-sekcja {
	--z: #eebb60;
	--z-hi: #ffd07a;
	--z2: #c4963b;
	--txt: #f0f0f5;
	--muted: #a0a0ac;
	--muted2: #74747f;
	--linia: rgba(255, 255, 255, .07);
	--karta-a: #15151b;
	--karta-b: #0f0f13;
	--rog: 16px;
	--dobry: #6fe0a3;
	--slaby: #ff7b7b;
	--duch: #c68cff;
	--bron: #f4a64a;
	font-family: 'Rajdhani', system-ui, sans-serif;
	color: var(--txt);
	box-sizing: border-box;
}
.dl-g *, .dl-g-hero *, .dl-g-sekcja * { box-sizing: border-box; }
.dl-g a, .dl-g-hero a, .dl-g-sekcja a { text-decoration: none !important; }
.dl-g [hidden], .dl-g-hero [hidden], .dl-g-sekcja [hidden] { display: none !important; }

/* Strona z sekcji systemu (klasa z dl-system.php): motyw nie wypisuje tytulu,
   a .site-main nie ma limitu 500-1140 px - sekcje same trzymaja szerokosc. */
body.dl-pelna:not(.dl-x) .site-main {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
body.dl-pelna .page-content > p:empty { display: none; }
/* motyw podkresla linki w .page-content - strony przeniesione z Elementora
   nie mialy tego wrappera i ich przyciski dostawaly podkreslenie */
body.dl-pelna .page-content a { text-decoration: none; }

/* ---------- szkielet ---------- */
.dl-g-kontener { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.dl-g-sekcja { padding: 96px 0; border-top: 1px solid var(--linia); scroll-margin-top: 80px; }
.dl-g-sekcja-mala { padding: 64px 0 80px; }

/* ---------- naglowek sekcji (jeden dla wszystkich) ---------- */
.dl-g-naglowek {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}
.dl-g-etykieta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.4px;
	color: var(--z);
	margin-bottom: 12px;
}
.dl-g-etykieta::before { content: ""; width: 22px; height: 2px; background: var(--z); }
.dl-g-h2 {
	margin: 0;
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #fff;
}
.dl-g-wstep { margin: 14px 0 0; max-width: 62ch; font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.dl-g-wiecej {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--z) !important;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(238, 187, 96, .35);
	transition: border-color .16s, color .16s;
}
.dl-g-wiecej:hover { color: var(--z-hi) !important; border-color: var(--z); }

/* podtytul wewnatrz sekcji (np. drugi blok w tej samej sekcji) */
.dl-g-h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #fff;
}

/* ---------- karta (jedna dla wszystkich) ---------- */
.dl-g-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px;
	background: linear-gradient(180deg, var(--karta-a), var(--karta-b));
	border: 1px solid var(--linia);
	clip-path: polygon(var(--rog) 0, 100% 0, 100% calc(100% - var(--rog)), calc(100% - var(--rog)) 100%, 0 100%, 0 var(--rog));
	transition: border-color .2s, transform .2s, background .2s;
	overflow: hidden;
}
a.dl-g-karta:hover { border-color: rgba(238, 187, 96, .55); transform: translateY(-3px); }
.dl-g-karta-etykieta {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: var(--z);
	margin-bottom: 8px;
}
.dl-g-karta-tytul {
	display: block;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #fff;
	margin-bottom: 8px;
}
.dl-g-karta-opis { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 44ch; }
.dl-g-strzalka {
	position: absolute;
	right: 24px;
	bottom: 20px;
	font-size: 20px;
	color: var(--z);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .2s, transform .2s;
}
a.dl-g-karta:hover .dl-g-strzalka { opacity: 1; transform: translateX(0); }

/* ---------- siatki ---------- */
.dl-g-siatka-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dl-g-siatka-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* ---------- drobne klocki ---------- */
/* plakietki (tagi, cechy) */
.dl-g-chipy { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.dl-g-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .3px;
	color: #d6d6de;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
}
.dl-g-chip-zloty { color: var(--z); background: rgba(238, 187, 96, .08); border-color: rgba(238, 187, 96, .3); }

/* okruszki nad H1 */
.dl-g-okruszki { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--muted2); }
.dl-g-okruszki a { color: var(--muted) !important; transition: color .16s; }
.dl-g-okruszki a:hover { color: var(--z) !important; }
.dl-g-okruszki [aria-current] { color: var(--txt); }

/* skoki do sekcji tej samej strony */
.dl-g-kotwice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.dl-g-kotwice a {
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--txt) !important;
	background: rgba(15, 15, 19, .55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	transition: background .16s, color .16s;
}
.dl-g-kotwice a:hover { background: rgba(238, 187, 96, .14); color: #fff !important; }

/* wskaznik trudnosci bohatera (dl_g_miernik) - wszedzie ten sam */
.dl-g-miernik { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: 0 0 auto; vertical-align: -1px; }
.dl-g-miernik i { display: block; width: 4px; background: rgba(255, 255, 255, .16); }
.dl-g-miernik i:nth-child(1) { height: 35%; }
.dl-g-miernik i:nth-child(2) { height: 57%; }
.dl-g-miernik i:nth-child(3) { height: 79%; }
.dl-g-miernik i:nth-child(4) { height: 100%; }
.dl-g-miernik.m1 i.on { background: #6fe0a3; }
.dl-g-miernik.m2 i.on { background: #eebb60; }
.dl-g-miernik.m3 i.on { background: #ff9a5c; }
.dl-g-miernik.m4 i.on { background: #ff6b6b; }
.dl-g-miernik-duzy { height: 24px; gap: 3px; }
.dl-g-miernik-duzy i { width: 6px; }

/* kolory liczb */
.dl-g-dobry { color: var(--dobry) !important; }
.dl-g-slaby { color: var(--slaby) !important; }

/* =========================================================
   HERO (jedno na strone, z H1)
   ========================================================= */
.dl-g-hero {
	position: relative;
	overflow: hidden;
	/* pelna szerokosc mimo kontenera motywu */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 110px 0 96px;
	background: #0a0a0c;
}
.dl-g-hero-tlo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	opacity: .85;
}
.dl-g-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(10, 10, 12, .97) 0%, rgba(10, 10, 12, .8) 38%, rgba(10, 10, 12, .25) 72%, rgba(10, 10, 12, .35) 100%),
		linear-gradient(0deg, #0a0a0c 0%, transparent 30%),
		linear-gradient(180deg, rgba(10, 10, 12, .6) 0%, transparent 25%);
	pointer-events: none;
}
.dl-g-hero-uklad {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(260px, .8fr);
	gap: 56px;
	align-items: end;
}

.dl-g-h1 {
	margin: 0;
	font-size: clamp(46px, 6.4vw, 82px);
	font-weight: 700;
	line-height: .95;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}
.dl-g-h1 span {
	display: block;
	margin-top: 14px;
	font-size: clamp(19px, 2.2vw, 27px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .6px;
	color: var(--z);
}
.dl-g-hero-lead { margin: 24px 0 0; max-width: 56ch; font-size: 17.5px; line-height: 1.6; color: #c4c4ce; }
/* linki w tekstach systemu (inaczej biora rozowy #CC3366 z motywu nadrzednego) */
.dl-g-hero-lead a, .dl-g-wstep a { color: var(--z) !important; font-weight: 700; border-bottom: 1px solid rgba(238, 187, 96, .4); transition: color .16s, border-color .16s; }
.dl-g-hero-lead a:hover, .dl-g-wstep a:hover { color: var(--z-hi) !important; border-color: var(--z); }

.dl-g-przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.dl-g-btn {
	display: inline-flex;
	align-items: center;
	padding: 15px 28px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	transition: background .18s, color .18s, transform .18s;
}
.dl-g-btn-glowny { background: linear-gradient(135deg, var(--z), var(--z2)); color: #0a0a0c !important; }
.dl-g-btn-glowny:hover { background: linear-gradient(135deg, var(--z-hi), #d8a845); transform: translateY(-2px); }
/* Guzik Discorda w kolorach Discorda - ten sam fiolet co w naglowku, stopce
   i menu na telefonie, zeby "fioletowy = Discord" dzialalo na calej stronie. */
.dl-g-btn-discord { gap: 10px; background: #5865f2; color: #fff !important; }
.dl-g-btn-discord svg { width: 22px; height: 22px; flex: 0 0 auto; }
.dl-g-btn-discord:hover { background: #4752c4; transform: translateY(-2px); }
.dl-g-btn-drugi { background: rgba(255, 255, 255, .06); color: var(--txt) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.dl-g-btn-drugi:hover { background: rgba(238, 187, 96, .12); color: #fff !important; }

.dl-g-hero-liczby {
	list-style: none;
	margin: 0;
	padding: 6px 26px;
	background: rgba(15, 15, 19, .72);
	backdrop-filter: blur(8px);
	border: 1px solid var(--linia);
	border-left: 2px solid var(--z);
}
.dl-g-hero-liczby li { padding: 18px 0; border-bottom: 1px solid var(--linia); }
.dl-g-hero-liczby li:last-child { border-bottom: 0; }
.dl-g-hero-liczby b { display: block; font-size: 38px; font-weight: 700; line-height: 1; color: var(--z); }
.dl-g-hero-liczby span { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }

/* maly naglowek strony (archiwa, podstrony) - to samo hero, bez duzego obrazu.
   Bez wlasnego tla i nakladki, zeby tlo strony (poswiaty, wzor) plynelo dalej. */
.dl-g-hero-maly { padding: 76px 0 60px; background: transparent; }
.dl-g-hero-maly::after { display: none; }
.dl-g-hero-maly .dl-g-h1 { font-size: clamp(40px, 5.2vw, 66px); }
.dl-g-hero-maly .dl-g-hero-uklad { grid-template-columns: minmax(0, 880px); }

/* =========================================================
   WPISY (karty artykulow) - glowna, aktualnosci
   ========================================================= */
.dl-g-wpisy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dl-g-wpis { padding: 0; }
.dl-g-wpis-obraz { display: block; aspect-ratio: 16 / 9; background: #0b0b0e; overflow: hidden; }
.dl-g-wpis-obraz img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s, filter .25s; filter: brightness(.9); }
a.dl-g-wpis:hover .dl-g-wpis-obraz img { transform: scale(1.04); filter: none; }
.dl-g-wpis-tresc { display: flex; flex-direction: column; padding: 20px 22px 24px; }
.dl-g-wpis-tytul { font-size: 19px; font-weight: 700; line-height: 1.3; color: #fff; }
.dl-g-wpis-opis { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* filtry jako zwykle linki (dzialaja bez JS i sa widoczne dla Google) */
.dl-g-filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.dl-g-filtry a {
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--muted) !important;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--linia);
	transition: color .16s, border-color .16s, background .16s;
}
.dl-g-filtry a:hover { color: #fff !important; border-color: rgba(238, 187, 96, .45); }
.dl-g-filtry a[aria-current] { color: var(--z) !important; background: rgba(238, 187, 96, .1); border-color: rgba(238, 187, 96, .5); }
.dl-g-filtry a i { margin-left: 6px; font-style: normal; font-weight: 600; color: var(--muted2); }

.dl-g-stronicowanie { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 44px; }
.dl-g-stronicowanie a, .dl-g-stronicowanie span {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--txt) !important;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--linia);
}
.dl-g-stronicowanie a:hover { border-color: rgba(238, 187, 96, .5); }
.dl-g-stronicowanie [aria-current] { color: #0a0a0c !important; background: var(--z); border-color: var(--z); }
.dl-g-stronicowanie .kropki, .dl-g-stronicowanie .dots { min-width: 0; padding: 0 4px; background: none; border: 0; color: var(--muted2) !important; }

/* sekcja zaraz pod malym naglowkiem - bez podwojnego odstepu */
.dl-g-hero-maly + .dl-g-sekcja { padding-top: 56px; }

/* Narzedzia pisane przed systemem (lista bohaterow, rangi, ranking) same
   wychodzily poza waski kontener motywu, kazde na inna szerokosc
   (1340 / 1180 / 1100 px). W sekcji systemu trzymaja jego 1240 px. */
.dl-g-sekcja .dl-g-kontener .dl-lb,
.dl-g-sekcja .dl-g-kontener .dl-rg { width: auto; margin-left: 0; margin-right: 0; padding-bottom: 0; }

/* =========================================================
   STRONY PRZENIESIONE Z ELEMENTORA (liga, sklep, rekrutacja...)
   Maja wlasny HTML i CSS. Tu tylko wyrownanie do zasad systemu.
   ========================================================= */
/* "fioletowy = Discord" takze na stronie ligi */
.dl-liga a.dl-btn-primary[href*="discord"] { color: #fff; background: #5865f2; box-shadow: none; }
.dl-liga a.dl-btn-primary[href*="discord"]:hover { color: #fff; background: #4752c4; box-shadow: none; }
/* tabela rankingu ligi na telefonie byla o ok. 26 px szersza od ekranu i ucinala
   ostatnia kolumne - teraz przewija sie w poziomie */
.dl-liga .liga-rank { overflow-x: auto; }

/* =========================================================
   MNIEJSZE EKRANY
   ========================================================= */
@media (max-width: 1080px) {
	.dl-g-hero-uklad { grid-template-columns: 1fr; gap: 40px; }
	.dl-g-hero-liczby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; }
	.dl-g-hero-liczby li { padding: 20px 18px; border-bottom: 0; border-right: 1px solid var(--linia); }
	.dl-g-hero-liczby li:last-child { border-right: 0; }
	.dl-g-siatka-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-g-wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.dl-g-kontener { padding: 0 16px; }
	.dl-g-sekcja { padding: 64px 0; }
	.dl-g-sekcja-mala { padding: 48px 0 56px; }
	.dl-g-naglowek { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }

	.dl-g-hero { padding: 72px 0 60px; }
	.dl-g-hero-lead { font-size: 16px; }
	.dl-g-przyciski { flex-direction: column; }
	.dl-g-btn { justify-content: center; }
	.dl-g-hero-liczby { grid-template-columns: 1fr; }
	.dl-g-hero-liczby li { border-right: 0; border-bottom: 1px solid var(--linia); padding: 16px 18px; }
	.dl-g-hero-liczby b { font-size: 30px; }

	.dl-g-siatka-2, .dl-g-siatka-3, .dl-g-wpisy { grid-template-columns: 1fr; }
	.dl-g-hero-maly { padding: 56px 0 44px; }
	.dl-g-hero-maly + .dl-g-sekcja { padding-top: 40px; }
	.dl-g-strzalka { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.dl-g-karta, .dl-g-btn, .dl-g-kotwice a, .dl-g-filtry a, .dl-g-wpis-obraz img { transition: none; }
	html { scroll-behavior: auto; }
}