/* JayDees Space – eigenes Layout, mobile-first */

@font-face {
	font-family: "Blue Highway";
	src: url("../fonts/blue-highway-rg.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Blue Highway";
	src: url("../fonts/blue-highway-bd.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	--neon: #f0ff00;
	--ink: #f3f4fa;
	--muted: #b9bdd3;
	--glass: rgba(12, 14, 36, 0.58);
	--glass-hover: rgba(20, 22, 52, 0.72);
	--line: rgba(255, 255, 255, 0.13);
	--radius: 18px;

	--twitch: #9146ff;
	--discord: #5865f2;
	--kofi: #ff5e5b;
	--youtube: #ff0033;
	--instagram: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);

	--font-display: "Blue Highway", "Arial Narrow", system-ui, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: #0b0d22;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--neon);
	outline-offset: 3px;
}

.sprite {
	display: none;
}

/* Hintergrund: eigene fixierte Ebene statt background-attachment, damit nichts verzerrt */

.bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: #0b0d22;
}

.bg::before {
	content: "";
	position: absolute;
	inset: -4%;
	background-image: url("../img/bg-1920.webp");
	background-size: cover;
	background-position: 52% 50%;
	animation: drift 60s ease-in-out infinite alternate;
}

/* Querformat-Bildschirme bis Full-HD brauchen nicht die volle Auflösung */
@media (orientation: landscape) and (max-width: 1280px) {
	.bg::before {
		background-image: url("../img/bg-1280.webp");
	}
}

.bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 35%, rgba(11, 13, 34, 0.15) 0%, rgba(11, 13, 34, 0.6) 70%),
		linear-gradient(to bottom, rgba(11, 13, 34, 0.25) 0%, rgba(11, 13, 34, 0.55) 100%);
}

@keyframes drift {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.06) translate3d(-1.5%, 1%, 0); }
}

/* Layout */

.page {
	flex: 1;
	width: 100%;
	max-width: 34rem;
	margin: 0 auto;
	padding: max(2.5rem, env(safe-area-inset-top)) 1rem 2rem;
}

/* Profil */

.profile {
	text-align: center;
	margin-bottom: 1.75rem;
}

.avatar {
	position: relative;
	width: 8.5rem;
	height: 8.5rem;
	margin: 0 auto;
}

.avatar__photo {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--neon);
	box-shadow: 0 0 0 6px rgba(240, 255, 0, 0.12), 0 12px 40px rgba(0, 0, 0, 0.5);
}

.avatar__muffin {
	position: absolute;
	right: -1.1rem;
	bottom: -0.6rem;
	width: 3.6rem;
	height: 3.6rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
	transition: transform 0.2s ease;
}

.avatar__muffin:hover {
	transform: rotate(-8deg) scale(1.08);
}

.avatar__muffin img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.avatar__muffin.is-popping img {
	animation: pop 0.35s ease;
}

@keyframes pop {
	0%   { transform: scale(0.6) rotate(-12deg); }
	60%  { transform: scale(1.15) rotate(6deg); }
	100% { transform: scale(1) rotate(0); }
}

.profile__logo {
	margin: 0.75rem auto 0;
	width: min(20rem, 92%);
	line-height: 0;
}

/* Das Video hat schwarzen Hintergrund; "screen" blendet Schwarz aus und lässt nur das Logo stehen */
.profile__logo-video {
	width: 100%;
	height: auto;
	mix-blend-mode: screen;
	pointer-events: none;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.profile__tagline {
	margin: 0.1rem 0 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.04em;
	color: var(--ink);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.profile__tags {
	margin: 0.15rem 0 0;
	font-family: var(--font-display);
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	color: var(--neon);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Haupt-Links */

.links {
	display: grid;
	gap: 0.85rem;
}

.card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.75rem;
	padding: 0.85rem 1.1rem 0.85rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--glass);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	text-decoration: none;
	transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
	transform: translateY(-2px);
	background: var(--glass-hover);
	border-color: var(--accent, var(--neon));
	box-shadow: 0 10px 30px -10px var(--accent, var(--neon));
}

.card:active {
	transform: translateY(0) scale(0.99);
}

.card__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 3.1rem;
	height: 3.1rem;
	border-radius: 13px;
	background: var(--accent-bg, var(--accent));
	color: #fff;
}

.card__icon svg {
	width: 1.6rem;
	height: 1.6rem;
	fill: currentColor;
}

.card__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
}

.card__sub {
	font-size: 0.875rem;
	color: var(--muted);
}

.card__arrow {
	flex: none;
	font-size: 1.25rem;
	color: var(--muted);
	transition: transform 0.18s ease, color 0.18s ease;
}

.card:hover .card__arrow {
	transform: translateX(3px);
	color: var(--ink);
}

.card--twitch    { --accent: var(--twitch); }
.card--discord   { --accent: var(--discord); }
.card--instagram { --accent: #d62976; --accent-bg: var(--instagram); }
.card--kofi      { --accent: var(--kofi); }
.card--youtube   { --accent: var(--youtube); }

/* Ko-fi leicht hervorgehoben: Ko-fi-Farbton und Muffin-Sticker */

.card--featured {
	border-color: rgba(255, 94, 91, 0.45);
	background:
		linear-gradient(120deg, rgba(255, 94, 91, 0.16), transparent 65%),
		var(--glass);
	padding-right: 5rem;
}

.card__sticker {
	position: absolute;
	right: 0.4rem;
	bottom: -0.35rem;
	width: 4.6rem;
	height: auto;
	transform: rotate(8deg);
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
	transition: transform 0.25s ease;
	pointer-events: none;
}

.card--featured:hover .card__sticker {
	transform: rotate(-4deg) scale(1.08);
}

/* Weitere Profile */

.more {
	margin-top: 2rem;
	text-align: center;
}

.more__title {
	margin: 0 0 0.75rem;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.more__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.chip:hover {
	background: var(--glass-hover);
	border-color: rgba(255, 255, 255, 0.35);
}

.chip svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

/* Footer */

.footer {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	padding: 1.25rem 1rem max(1.25rem, env(safe-area-inset-bottom));
	font-size: 0.85rem;
	color: var(--muted);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.footer a {
	text-underline-offset: 3px;
}

.footer a:hover {
	color: var(--ink);
}

/* Unterseiten (Impressum) */

.page--text {
	max-width: 46rem;
}

.back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 0.95rem;
	text-decoration: none;
}

.back:hover {
	background: var(--glass-hover);
}

.panel {
	position: relative;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(12, 14, 36, 0.82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: #d9dbe8;
	line-height: 1.65;
}

.panel h1,
.panel h2,
.panel h3 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink);
	line-height: 1.15;
	letter-spacing: 0.02em;
}

.panel h1 {
	margin: 0 0 1rem;
	font-size: 2.2rem;
}

.panel h2 {
	margin: 2rem 0 0.5rem;
	font-size: 1.5rem;
}

.panel h3 {
	margin: 1.5rem 0 0.4rem;
	font-size: 1.2rem;
}

.panel p {
	margin: 0 0 1rem;
}

.panel ul {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

.panel li {
	margin-bottom: 0.25rem;
}

.panel a {
	color: var(--neon);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.panel .seal {
	margin: 2rem 0 0;
	font-size: 0.8rem;
}

.panel .seal a {
	color: var(--muted);
}

.panel--center {
	text-align: center;
}

	.panel--center .back {
		margin: 0.5rem 0 0;
		color: var(--ink);
	}

.panel__hero {
	width: 7rem;
	height: auto;
	margin: 0 auto 1rem;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

.panel__muffin {
	position: absolute;
	top: -1.9rem;
	right: 0.75rem;
	width: 3.75rem;
	height: auto;
	transform: rotate(8deg);
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

@media (min-width: 600px) {
	.avatar {
		width: 9.5rem;
		height: 9.5rem;
	}

	.profile__logo {
		width: 18rem;
		margin-top: 0.5rem;
	}

	.links {
		gap: 0.75rem;
	}

	.card {
		min-height: 4.4rem;
	}

	.more {
		margin-top: 1.5rem;
	}

	.panel {
		padding: 2.25rem 2.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}