/*
Theme Name: PM Network Theme
Theme URI: https://example.com
Author: PM
Description: Ultra-minimales Theme für Casino-Toplisten. Topliste wird automatisch vom PM Network Plugin auf der Startseite eingebunden.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pm-network-theme
*/

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

body.pm-network-theme {
	margin: 0;
	font-family: 'Inter', system-ui, sans-serif;
	background: #0a0f0d;
	color: #f0fdf4;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.ptl-skin-gold-luxury { background: #0d0b08; color: #faf5eb; }
body.ptl-skin-cyber-purple { background: #0a0812; color: #f3e8ff; }

a { color: inherit; }

.container {
	width: min(1140px, 100%);
	margin: 0 auto;
	padding-left: clamp(16px, 4vw, 24px);
	padding-right: clamp(16px, 4vw, 24px);
}

/* ── Animated Background ── */
.site-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 80% 60% at 50% -20%, rgba(0,255,136,0.12), transparent),
		radial-gradient(ellipse 50% 40% at 100% 50%, rgba(0,255,136,0.05), transparent),
		#0a0f0d;
}

body.ptl-skin-gold-luxury .site-bg {
	background:
		radial-gradient(ellipse 80% 60% at 50% -20%, rgba(212,175,55,0.1), transparent),
		radial-gradient(ellipse 50% 40% at 0% 80%, rgba(212,175,55,0.05), transparent),
		#0d0b08;
}

body.ptl-skin-cyber-purple .site-bg {
	background:
		radial-gradient(ellipse 80% 60% at 50% -20%, rgba(168,85,247,0.15), transparent),
		radial-gradient(ellipse 50% 40% at 100% 100%, rgba(34,211,238,0.06), transparent),
		#0a0812;
}

/* ── Header ── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(16px);
	background: rgba(10,15,13,0.8);
	border-bottom: 1px solid rgba(0,255,136,0.1);
}

body.ptl-skin-gold-luxury .site-header {
	background: rgba(13,11,8,0.85);
	border-bottom-color: rgba(212,175,55,0.12);
}

body.ptl-skin-cyber-purple .site-header {
	background: rgba(10,8,18,0.85);
	border-bottom-color: rgba(168,85,247,0.15);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	gap: 24px;
}

.site-logo__text {
	font-size: 1.25rem;
	font-weight: 800;
	text-decoration: none;
	background: linear-gradient(135deg, #00ff88, #00cc6a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

body.ptl-skin-gold-luxury .site-logo__text {
	background: linear-gradient(135deg, #ffd700, #d4af37);
	-webkit-background-clip: text;
	background-clip: text;
}

body.ptl-skin-cyber-purple .site-logo__text {
	background: linear-gradient(135deg, #c084fc, #22d3ee);
	-webkit-background-clip: text;
	background-clip: text;
}

.site-nav__list {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	display: block;
	padding: 8px 16px;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	color: #86efac;
	border-radius: 8px;
	transition: 0.2s;
}

body.ptl-skin-gold-luxury .site-nav__list a { color: #a89f8a; }
body.ptl-skin-cyber-purple .site-nav__list a { color: #c4b5fd; }

.site-nav__list a:hover {
	color: #fff;
	background: rgba(255,255,255,0.06);
}

.site-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.site-nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

/* ── Hero ── */
.hero {
	padding: clamp(48px, 10vw, 72px) 0 clamp(32px, 6vw, 52px);
	text-align: center;
}

.hero__badge {
	display: inline-block;
	padding: 6px 16px;
	margin-bottom: 20px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #00ff88;
	background: rgba(0,255,136,0.1);
	border: 1px solid rgba(0,255,136,0.25);
	border-radius: 999px;
}

body.ptl-skin-gold-luxury .hero__badge {
	color: #d4af37;
	background: rgba(212,175,55,0.1);
	border-color: rgba(212,175,55,0.25);
}

body.ptl-skin-cyber-purple .hero__badge {
	color: #a855f7;
	background: rgba(168,85,247,0.12);
	border-color: rgba(168,85,247,0.3);
}

.hero__title {
	margin: 0 0 16px;
	font-size: clamp(2.2rem, 6vw, 3.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.hero__highlight {
	background: linear-gradient(135deg, #00ff88, #34d399);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

body.ptl-skin-gold-luxury .hero__highlight {
	background: linear-gradient(135deg, #ffd700, #d4af37);
	-webkit-background-clip: text;
	background-clip: text;
}

body.ptl-skin-cyber-purple .hero__highlight {
	background: linear-gradient(135deg, #c084fc, #22d3ee);
	-webkit-background-clip: text;
	background-clip: text;
}

.hero__subtitle {
	margin: 0 auto;
	max-width: 580px;
	font-size: clamp(0.95rem, 2.5vw, 1.08rem);
	color: #86efac;
	opacity: 0.9;
	line-height: 1.65;
	padding: 0 8px;
}

body.ptl-skin-gold-luxury .hero__subtitle { color: #a89f8a; }
body.ptl-skin-cyber-purple .hero__subtitle { color: #c4b5fd; }

/* ── Toplist Section ── */
.toplist-section {
	padding: 0 0 clamp(48px, 8vw, 80px);
}

.toplist-section .ptl-wrap {
	padding-top: 0;
	padding-bottom: 0;
	max-width: 100%;
}

@media (max-width: 767px) {
	.toplist-section {
		padding-bottom: clamp(40px, 8vw, 64px);
	}

	.toplist-section .container {
		padding-left: 12px;
		padding-right: 12px;
	}
}
.content-area,
.page-content,
.toplist-page {
	padding: 0 0 64px;
}

.toplist-page__header {
	text-align: center;
	padding: 48px 0 32px;
}

.toplist-page__title {
	margin: 0 0 12px;
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	font-weight: 800;
}

.toplist-page__excerpt {
	margin: 0;
	color: #86efac;
	font-size: 1.05rem;
}

/* ── Footer ── */
.site-footer {
	margin-top: auto;
	padding: 40px 0;
	border-top: 1px solid rgba(255,255,255,0.06);
}

.site-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}

.site-footer__brand strong {
	font-size: 1rem;
}

.site-footer__brand p,
.site-footer__legal p {
	margin: 4px 0 0;
	font-size: 0.8rem;
	color: #6b7280;
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.site-header__inner {
		padding: 14px 0;
	}

	.hero {
		padding-bottom: 28px;
	}

	.hero__badge {
		margin-bottom: 16px;
	}

	.hero__title {
		margin-bottom: 14px;
		padding: 0 4px;
	}

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: inherit;
		border-bottom: 1px solid rgba(255,255,255,0.08);
		padding: 16px;
	}

	.site-nav.is-open { display: block; }

	.site-nav__list {
		flex-direction: column;
	}

	.site-nav-toggle { display: flex; }
}