/* =========================================================
   Deadlockownia - profil gracza (/gracz/)
   Klocki z systemu (dl-system/system.css), tu tylko dl-gr-.
   ========================================================= */

.dl-gr-hero { padding: 96px 0 84px; }
.dl-gr-uklad { align-items: center; }
.dl-gr-uklad-sam { grid-template-columns: minmax(0, 860px); }

.dl-gr-kto { display: flex; align-items: center; gap: 22px; }
.dl-gr-avatar {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border: 2px solid var(--z);
	clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.dl-gr-h1 { font-size: clamp(36px, 5vw, 64px); overflow-wrap: anywhere; text-transform: none; }

/* ---------- formularz ---------- */
.dl-gr-form { display: flex; gap: 10px; max-width: 660px; margin-top: 32px; }
.dl-gr-form-maly { margin-top: 26px; }
.dl-g-hero .dl-gr-form input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 54px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	color: #fff;
	background: rgba(10, 10, 12, .78) !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	transition: border-color .16s;
}
.dl-g-hero .dl-gr-form input[type="search"]:focus { border-color: var(--z) !important; }
.dl-gr-form input::placeholder { color: #7a7a86; font-weight: 500; }
.dl-gr-form .dl-g-btn { flex: 0 0 auto; height: 54px; padding: 0 30px; border: 0; cursor: pointer; }
.dl-gr-blad {
	max-width: 660px;
	margin: 14px 0 0;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.5;
	color: #ffd4d4;
	background: rgba(255, 123, 123, .08);
	border-left: 2px solid var(--slaby);
}

/* ---------- karta rangi ---------- */
.dl-gr-ranga {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 18px 20px;
	align-items: center;
	padding: 24px;
	background: rgba(15, 15, 19, .76);
	backdrop-filter: blur(8px);
	border: 1px solid var(--linia);
	border-left: 2px solid var(--z);
}
.dl-gr-ranga > img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }
.dl-gr-ranga .dl-g-karta-etykieta { display: block; margin-bottom: 4px; }
.dl-gr-ranga-nazwa { display: block; font-size: 30px; font-weight: 700; line-height: 1.05; text-transform: uppercase; color: #fff; }
.dl-gr-punkty { display: block; margin-top: 6px; font-size: 20px; font-weight: 700; color: var(--z); }
.dl-gr-punkty i { margin-left: 8px; font-style: normal; font-size: 15px; }
.dl-gr-punkty-brak { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.dl-gr-wykres-box { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--linia); }
.dl-gr-wykres { display: block; width: 100%; height: auto; }
.dl-gr-wykres .pole { fill: rgba(238, 187, 96, .1); }
.dl-gr-wykres .linia { fill: none; stroke: var(--z); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dl-gr-wykres .kropka { fill: var(--z-hi); }
.dl-gr-wykres-box span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted2); }

/* ---------- liczby ---------- */
.dl-gr-liczby { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dl-gr-liczby li { padding: 20px 22px; background: linear-gradient(180deg, var(--karta-a), var(--karta-b)); border: 1px solid var(--linia); border-left: 2px solid var(--z); }
.dl-gr-liczby b { display: block; font-size: 34px; font-weight: 700; line-height: 1; color: var(--z); }
.dl-gr-liczby span { display: block; margin-top: 7px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); }

/* ---------- bohaterowie ---------- */
.dl-gr-bohaterowie { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.dl-gr-boh { padding: 0 0 14px; }
.dl-gr-boh img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; background: #0d0d11; margin-bottom: 12px; }
.dl-gr-boh b { padding: 0 14px; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #fff; }
.dl-gr-boh span { padding: 2px 14px 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.dl-gr-boh i { font-style: normal; font-weight: 700; color: var(--txt); }

/* ---------- ostatnie mecze ---------- */
.dl-gr-mecze { display: grid; gap: 6px; }
.dl-gr-mecz {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .9fr);
	align-items: center;
	gap: 12px;
	padding: 8px 16px 8px 10px;
	font-size: 15px;
	color: var(--txt);
	background: rgba(255, 255, 255, .025);
	border: 1px solid var(--linia);
	border-left: 3px solid var(--linia);
}
.dl-gr-mecz.wygrana { border-left-color: var(--dobry); }
.dl-gr-mecz.przegrana { border-left-color: var(--slaby); }
.dl-gr-mecz-glowka {
	padding-top: 4px;
	padding-bottom: 8px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--muted);
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(238, 187, 96, .22);
}
.dl-gr-mecz-boh { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dl-gr-mecz-boh img { flex: 0 0 36px; width: 36px; height: 36px; object-fit: cover; object-position: center 15%; background: #0d0d11; }
.dl-gr-mecz-boh b { font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-gr-wynik { font-weight: 700; }
.wygrana .dl-gr-wynik { color: var(--dobry); }
.przegrana .dl-gr-wynik { color: var(--slaby); }
.dl-gr-wynik i { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dl-gr-kiedy { font-size: 14px; color: var(--muted); }

/* ---------- wyniki szukania ---------- */
.dl-gr-wyniki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dl-gr-wynik-karta { flex-direction: row; align-items: center; gap: 16px; padding: 16px 20px; }
.dl-gr-wynik-karta img { flex: 0 0 56px; width: 56px; height: 56px; object-fit: cover; }
.dl-gr-wynik-karta > span:not(.dl-g-strzalka) { display: flex; flex-direction: column; min-width: 0; }
.dl-gr-wynik-karta b { font-size: 18px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-gr-wynik-karta i { font-style: normal; font-size: 13.5px; color: var(--muted); }
.dl-gr-wynik-karta .dl-g-strzalka { position: static; margin-left: auto; }

/* ---------- informacje ---------- */
.dl-gr-info p { margin: 6px 0 0; max-width: 60ch; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.dl-gr-info a { color: var(--z) !important; font-weight: 700; }

@media (max-width: 1080px) {
	.dl-gr-uklad-sam { grid-template-columns: 1fr; }
	.dl-gr-ranga { max-width: 560px; }
	.dl-gr-bohaterowie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dl-gr-wyniki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.dl-gr-hero { padding: 64px 0 56px; }
	.dl-gr-kto { gap: 14px; }
	.dl-gr-avatar { flex-basis: 60px; width: 60px; height: 60px; }
	.dl-gr-form { flex-direction: column; }
	/* w kolumnie flex: 1 zjadal wysokosc pola */
	.dl-g-hero .dl-gr-form input[type="search"] { flex: 0 0 auto; }
	.dl-gr-form .dl-g-btn { width: 100%; }
	.dl-gr-ranga { grid-template-columns: 72px minmax(0, 1fr); padding: 18px; }
	.dl-gr-ranga > img { width: 72px; height: 72px; }
	.dl-gr-ranga-nazwa { font-size: 24px; }
	.dl-gr-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-gr-liczby b { font-size: 26px; }
	.dl-gr-bohaterowie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-gr-mecz { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, .9fr); padding: 8px 10px 8px 8px; font-size: 14px; }
	.dl-gr-mecz .dl-gr-ukryj, .dl-gr-mecz .dl-gr-kiedy { display: none; }
	.dl-gr-mecz-boh { gap: 8px; }
	.dl-gr-mecz-boh img { flex-basis: 30px; width: 30px; height: 30px; }
	.dl-gr-wyniki { grid-template-columns: 1fr; }
}