/* ============================================================
   PusztaPlay Theme — PusztaPedia hub (page-pusztapedia.php)
   ============================================================ */

/* ── Szekciók + anchor-offset (fix fejléc alá ne csússzon) ── */

.pp-pedia-section {
	max-width: var(--pp-container, 1200px);
	margin: 0 auto 56px;
	scroll-margin-top: calc(var(--pp-header-clear, 24px) + 90px);
}

.pp-pedia-lead {
	text-align: center;
	color: var(--pp-text-muted, #b0b0b0);
	max-width: 760px;
	margin: -6px auto 26px;
	font-size: 15px;
	line-height: 1.7;
}

.pp-pedia-note {
	text-align: center;
	color: var(--pp-text-muted, #b0b0b0);
	font-size: 13px;
	margin-top: 18px;
}

.pp-pedia-note a {
	color: var(--pp-cyan, #00d4ff);
	text-decoration: none;
}

.pp-pedia-note a:hover {
	text-decoration: underline;
}

.pp-pedia-code {
	display: inline-block;
	background: #0a0a0a;
	border: 2px solid #000;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
	color: var(--pp-gold, #ffd700);
	word-break: break-all;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

/* ── Gyorsnavigáció (matrica-chipek) ─────────────────── */

.pp-pedia-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 auto 40px;
}

.pp-pedia-nav a {
	display: inline-block;
	padding: 8px 16px;
	background: var(--pp-bg-card, #1a1a2e);
	color: var(--pp-text, #ffffff);
	border: 2px solid #000;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
	transition: var(--pp-transition, all 0.2s ease);
}

.pp-pedia-nav a:hover {
	background: var(--pp-cyan, #00d4ff);
	color: #0a0a0a;
	transform: translateY(-2px) rotate(-1deg);
}

/* ── Lejátszó-kártyák ────────────────────────────────── */

.pp-pd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.pp-pd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 26px 20px 20px;
	background: var(--pp-bg-card, #1a1a2e);
	border: 2px solid #000;
	border-radius: var(--pp-radius, 12px);
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
	transition: var(--pp-transition, all 0.2s ease);
}

.pp-pd-card:hover {
	transform: translateY(-3px) rotate(-0.5deg);
	box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55), 0 0 22px rgba(0, 212, 255, 0.18);
}

.pp-pd-ico {
	color: var(--pp-cyan, #00d4ff);
	line-height: 0;
}

.pp-pd-ico svg {
	width: 48px;
	height: 48px;
	display: block;
}

.pp-pd-name {
	font-family: var(--pp-font-heading, 'Bangers', cursive);
	font-size: 21px;
	letter-spacing: 1px;
	color: var(--pp-gold, #ffd700);
	text-shadow: 2px 2px 0 #000;
	margin: 0;
	line-height: 1.15;
}

.pp-pd-tag {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--pp-cyan, #00d4ff);
	font-weight: 600;
}

.pp-pd-feats {
	list-style: none;
	margin: 8px 0 14px;
	padding: 0;
	text-align: left;
	width: 100%;
}

.pp-pd-feats li {
	position: relative;
	padding: 4px 0 4px 20px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--pp-text, #ffffff);
}

.pp-pd-feats li::before {
	content: "★";
	position: absolute;
	left: 0;
	color: var(--pp-gold, #ffd700);
	font-size: 12px;
}

.pp-pd-btn {
	margin-top: auto;
}

.pp-pd-install-link {
	font-size: 12px;
	color: var(--pp-text-muted, #b0b0b0);
	text-decoration: none;
}

.pp-pd-install-link:hover {
	color: var(--pp-cyan, #00d4ff);
}

/* Közös tudáslista (minden platformon) */

.pp-pd-common {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	font-size: 13px;
	color: var(--pp-text, #ffffff);
}

.pp-pd-common li {
	background: rgba(0, 212, 255, 0.08);
	border: 1px solid var(--pp-border, rgba(0, 212, 255, 0.2));
	border-radius: 999px;
	padding: 6px 14px;
}

.pp-pedia-net {
	margin: 0 0 22px;
}

/* A [pp_speedtest] kártya saját címe rejtve a hubon — a szekció-cím már mondja */
#pp-pedia-sebesseg .pp-st-title {
	display: none;
}

/* ── Liquid glass a PusztaPedia teljes felületén ──────────
   A fekete képregény-keretek és a kemény árnyékok maradnak,
   csak a „test” lesz üveg (mint a főoldali kártyáknál). */

.pp-pedia-nav a,
.pp-pedia-links a,
.pp-pd-card,
.pp-pedia-step,
.pp-pedia-cta,
#pp-pedia-letoltesek .pp-dl-card,
#pp-pedia-telepites .pp-setup-device-btn,
#pp-pedia-telepites .pp-setup-step,
#pp-pedia-sebesseg .pp-st-card {
	background:
		radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 70%),
		linear-gradient(135deg, rgba(8, 10, 16, 0.42) 0%, rgba(8, 10, 16, 0.18) 100%);
	backdrop-filter: blur(26px) saturate(130%);
	-webkit-backdrop-filter: blur(26px) saturate(130%);
}

/* Hover / aktív állapotok az üveg fölött (a kiemelések ne vesszenek el) */
#pp-pedia-letoltesek .pp-dl-card:hover {
	background:
		radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 70%),
		linear-gradient(135deg, rgba(20, 26, 40, 0.50) 0%, rgba(8, 10, 16, 0.20) 100%);
}

#pp-pedia-telepites .pp-setup-device-btn:hover,
#pp-pedia-telepites .pp-setup-device-btn.active {
	background:
		radial-gradient(circle at 30% 0%, rgba(0, 212, 255, 0.18) 0%, rgba(0, 212, 255, 0.05) 45%, transparent 70%),
		linear-gradient(135deg, rgba(8, 10, 16, 0.42) 0%, rgba(8, 10, 16, 0.18) 100%);
}

/* Mobilon gyengébb blur (teljesítmény) */
@media (max-width: 768px) {
	.pp-pd-card,
	.pp-pedia-step,
	.pp-pedia-cta,
	#pp-pedia-letoltesek .pp-dl-card,
	#pp-pedia-telepites .pp-setup-device-btn,
	#pp-pedia-telepites .pp-setup-step,
	#pp-pedia-sebesseg .pp-st-card {
		backdrop-filter: blur(10px) saturate(120%);
		-webkit-backdrop-filter: blur(10px) saturate(120%);
	}
}

/* ── Telepítés (eszközválasztó) ──────────────────────── */

.pp-pedia-device-selector {
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 30px;
}

.pp-pedia-device-selector .pp-setup-device-btn {
	border: 2px solid #000;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

.pp-pedia-device-selector .pp-setup-device-btn svg {
	width: 42px;
	height: 42px;
	margin-bottom: 10px;
	color: var(--pp-cyan, #00d4ff);
}

.pp-setup-instructions .pp-setup-step {
	border: 2px solid #000;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}

.pp-setup-instructions .pp-setup-step p {
	line-height: 1.65;
}

.pp-setup-instructions .pp-setup-step .pp-btn {
	display: inline-block;
	margin-top: 6px;
}

/* ── Első lépések ────────────────────────────────────── */

.pp-pedia-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 26px;
}

.pp-pedia-step {
	position: relative;
	background: var(--pp-bg-card, #1a1a2e);
	border: 2px solid #000;
	border-radius: var(--pp-radius, 12px);
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
	padding: 24px 20px 20px;
	text-align: center;
}

.pp-pedia-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 10px;
	background: var(--pp-gradient-gold, linear-gradient(135deg, #ffd700, #ffaa00));
	color: #1a1a1a;
	font-family: var(--pp-font-heading, 'Bangers', cursive);
	font-size: 22px;
	border: 2px solid #000;
	border-radius: 50%;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.pp-pedia-step h3 {
	font-family: var(--pp-font-heading, 'Bangers', cursive);
	font-size: 20px;
	letter-spacing: 1px;
	color: var(--pp-cyan, #00d4ff);
	margin: 0 0 8px;
}

.pp-pedia-step p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--pp-text, #ffffff);
}

/* Link-chipek */

.pp-pedia-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 30px;
}

.pp-pedia-links a {
	padding: 9px 16px;
	background: var(--pp-bg-card, #1a1a2e);
	border: 2px solid #000;
	border-radius: 10px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
	color: var(--pp-text, #ffffff);
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	transition: var(--pp-transition, all 0.2s ease);
}

.pp-pedia-links a:hover {
	color: #0a0a0a;
	background: var(--pp-gold, #ffd700);
	transform: translateY(-2px) rotate(1deg);
}

/* CTA panel */

.pp-pedia-cta {
	position: relative;
	text-align: center;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)), rgba(18, 18, 26, 0.85);
	border: 3px solid #000;
	border-radius: var(--pp-radius, 14px);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 204, 0, 0.08);
	padding: 30px 22px;
}

.pp-pedia-cta-title {
	font-family: var(--pp-font-heading, 'Bangers', cursive);
	font-size: 24px;
	letter-spacing: 1.5px;
	color: #ffffff;
	text-shadow: 2px 2px 0 #000;
	margin: 0 0 16px;
}

.pp-pedia-cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ── Mobil ───────────────────────────────────────────── */

@media (max-width: 900px) {
	.pp-pedia-steps {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.pp-pedia-section {
		margin-bottom: 40px;
	}

	.pp-pedia-nav {
		gap: 8px;
		margin-bottom: 28px;
	}

	.pp-pedia-nav a {
		padding: 7px 12px;
		font-size: 12px;
	}

	.pp-pedia-device-selector {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.pp-pd-grid {
		grid-template-columns: 1fr;
	}

	.pp-pedia-cta-title {
		font-size: 20px;
	}
}