/* ==========================================================
   MineTheBlock – forside
   Layoutet følger logoet: himmel → græs → jord → sten → dyb sten
   ========================================================== */

:root {
	/* Himmel */
	--sky-top: #4aa8ea;
	--sky-bottom: #c9ecff;

	/* Logo-farver (tekst) */
	--gold-light: #ffe45c;
	--gold: #ffb81c;
	--orange: #ff8a00;
	--orange-dark: #c24f00;
	--outline: #5a1f00;

	/* Ø / blokke */
	--grass: #6cc644;
	--grass-dark: #3f8f23;
	--dirt: #8a5a34;
	--dirt-dark: #5e3a1f;
	--stone: #4a4f57;
	--stone-dark: #2f333a;
	--deep: #1c1f26;
	--diamond: #5ce1e6;
	--diamond-dark: #1fa3b5;

	--text: #fff;
	--text-soft: rgb(255 255 255 / .78);

	--radius: 18px;
	--shadow-block: 0 6px 0 rgb(0 0 0 / .28), 0 14px 28px rgb(0 0 0 / .25);

	--font-display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
	--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

	--wrap: min(1120px, 100% - 2rem);
	--nav-h: 64px;
}

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

html {
	/* verdens-canvas kan stikke op til en blok ud til højre (den har sin rigtige bredde) – ingen vandret scroll */
	overflow-x: clip;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100dvh;
	font-family: var(--font-body);
	font-size: clamp(1rem, .95rem + .2vw, 1.075rem);
	line-height: 1.5;
	color: var(--text);
	background: var(--deep);
	overflow-x: hidden;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, p {
	margin: 0;
}

:focus-visible {
	outline: 3px solid var(--gold-light);
	outline-offset: 3px;
	border-radius: 8px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 100;
	padding: .6rem 1rem;
	background: var(--gold);
	color: var(--outline);
	font-weight: 800;
	border-radius: 10px;
}

.skip-link:focus {
	top: 1rem;
}

.wrap {
	width: var(--wrap);
	margin-inline: auto;
}

/* ---------- Logo-tekst stil (tyk orange/gul med kant) ---------- */
.section__title {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: .02em;
	color: var(--gold);
	background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 45%, var(--orange) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1.5px var(--outline);
	paint-order: stroke fill;
	filter: drop-shadow(0 4px 0 var(--orange-dark)) drop-shadow(0 6px 6px rgb(0 0 0 / .35));
}

/* ==========================================================
   NAVIGATION
   ========================================================== */
.nav {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	height: var(--nav-h);
	transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}

.nav.is-scrolled,
.nav.is-open {
	background: rgb(28 31 38 / .82);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	box-shadow: 0 4px 20px rgb(0 0 0 / .25);
}

.nav__inner {
	width: var(--wrap);
	height: 100%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
}

/* Menupunkter til venstre, Discord-knappen skubbes helt til højre */
.nav__menu {
	flex: 1;
	display: flex;
	align-items: center;
	gap: .35rem;
}

.nav__menu a {
	padding: .5rem .85rem;
	border-radius: 999px;
	font-weight: 800;
	text-shadow: 0 1px 2px rgb(0 0 0 / .45);
	transition: background .2s;
}

.nav__menu a:hover {
	background: rgb(255 255 255 / .16);
}

.nav__menu .nav__cta {
	background: #5865f2;
	text-shadow: none;
	box-shadow: 0 3px 0 #3c45a5;
	margin-left: auto;
}

.nav__menu .nav__cta:hover {
	background: #6a76ff;
}

/* grøn lampe på Discord-knappen (lige efter teksten): der sidder folk i voice lige nu */
.nav__live {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: .4rem;
	border-radius: 50%;
	vertical-align: .08em;
	background: #4ade80;
	box-shadow: 0 0 0 0 rgb(74 222 128 / .7);
	animation: nav-live 2s infinite;
}

.nav__live[hidden],
.status--discord[hidden] {
	display: none;
}

@keyframes nav-live {
	70%  { box-shadow: 0 0 0 6px rgb(74 222 128 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0); }
}

@media (prefers-reduced-motion: reduce) {
	.nav__live { animation: none; }
}

/* Log ud-knappen ved siden af Admin (kun når man er logget ind som admin) */
.nav__menu .nav__cta--logout {
	margin-left: 0;
	background: #c0392b;
	box-shadow: 0 3px 0 #842519;
}

.nav__menu .nav__cta--logout:hover {
	background: #d9473a;
}

.nav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	background: rgb(0 0 0 / .25);
	color: #fff;
	font-size: 1.25rem;
	cursor: pointer;
}

/* Tema-knap (Oververden / Nether) */
.nav__theme {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	background: rgb(0 0 0 / .25);
	color: #ffb347;
	font-size: 1.15rem;
	cursor: pointer;
	transition: background .2s, transform .15s;
}

.nav__theme:hover {
	background: rgb(255 255 255 / .16);
}

.nav__theme:active {
	transform: scale(.92);
}

/* "Se verdenen": sidens indhold skjules, så kun verdenen (og menuen) er tilbage.
   visibility – ikke display – så siden beholder sin højde og verdenen ikke bygges om. */
html.is-watching :is(.hero__content, .page-hero__content, main, .footer) {
	visibility: hidden;
}

.nav__watch[aria-pressed="true"] {
	background: rgb(255 255 255 / .28);
	color: #fff;
}

html[data-theme="nether"] .nav__theme {
	color: #ffe45c;
}

@media (max-width: 820px) {
	.nav__inner {
		justify-content: flex-end;
		gap: .5rem;
	}

	.nav__theme {
		order: -1; /* til venstre for menu-knappen */
	}

	.nav__toggle {
		display: grid;
		place-items: center;
	}

	.nav__menu {
		position: fixed;
		inset: var(--nav-h) 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
		padding: .75rem 1rem 1.25rem;
		background: rgb(28 31 38 / .95);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		box-shadow: 0 12px 24px rgb(0 0 0 / .3);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s, transform .2s, visibility .2s;
	}

	.nav.is-open .nav__menu {
		transform: none;
		opacity: 1;
		visibility: visible;
	}

	.nav__menu a {
		padding: .85rem 1rem;
		border-radius: 12px;
		font-size: 1.05rem;
	}

	.nav__menu .nav__cta {
		margin: .5rem 0 0;
		text-align: center;
	}
}

/* ==========================================================
   HERO – himlen
   ========================================================== */
.hero {
	position: relative;
	/* Himlen fylder højst 40 % af skærmhøjden */
	height: 40vh;
	height: 40svh;
	min-height: 250px; /* ellers er der ikke plads på meget lave skærme (mobil på tværs) */
	display: grid;
	place-items: center;
	padding: calc(var(--nav-h) + .5rem) 1rem calc(56px + .75rem);
	background:
		radial-gradient(ellipse at 50% 40%, rgb(255 255 255 / .55), transparent 55%),
		linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
}

/* Logo og serverkort side om side, så det hele kan være i den lave himmel */
.hero__content {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.75rem, 4vw, 3rem);
	text-align: center;
}

.hero__logo {
	height: 100%;
	max-height: 340px;
	width: auto;
	min-width: 0;
	aspect-ratio: 1;
	object-fit: contain;
	filter: drop-shadow(0 12px 16px rgb(20 60 100 / .35));
	animation: float 6s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0) rotate(-.5deg); }
	50%      { transform: translateY(-6px) rotate(.5deg); }
}

/* Skyer (blok-agtige som i Minecraft) */
.clouds {
	position: absolute;
	inset: var(--nav-h) 0 0; /* holder skyerne væk fra menuteksten */
	overflow: hidden;
	pointer-events: none;
}

.cloud {
	position: absolute;
	width: 180px;
	height: 44px;
	background: rgb(255 255 255 / .9);
	border-radius: 6px;
	box-shadow:
		40px -24px 0 -2px rgb(255 255 255 / .9),
		90px -18px 0 0 rgb(255 255 255 / .9);
	animation: drift linear infinite;
}

.cloud--1 { top: 16%; left: -220px; animation-duration: 70s; }
.cloud--2 { top: 34%; left: -220px; animation-duration: 95s; animation-delay: -40s; transform: scale(.7); opacity: .8; }
.cloud--3 { top: 58%; left: -220px; animation-duration: 85s; animation-delay: -20s; transform: scale(1.2); }
.cloud--4 { top: 8%;  left: -220px; animation-duration: 110s; animation-delay: -75s; transform: scale(.55); opacity: .7; }

@keyframes drift {
	from { translate: 0 0; }
	to   { translate: calc(100vw + 440px) 0; }
}

/* Server-kort med status og IP */
.server-card {
	display: grid;
	justify-items: center;
	gap: .7rem;
	padding: 1.1rem 1.25rem 1rem;
	width: 100%;
	max-width: 440px;
	min-width: 0;
	background: rgb(255 255 255 / .28);
	border: 2px solid rgb(255 255 255 / .6);
	border-radius: var(--radius);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px rgb(20 60 100 / .2);
}

.status {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem .85rem;
	border-radius: 999px;
	background: rgb(20 40 60 / .55);
	font-weight: 800;
	font-size: .95rem;
}

.status__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #aab2bd;
}

.status.is-online .status__dot {
	background: #4ade80;
	box-shadow: 0 0 0 0 rgb(74 222 128 / .7);
	animation: pulse 2s infinite;
}

.status.is-offline .status__dot {
	background: #f87171;
}

@keyframes pulse {
	70%  { box-shadow: 0 0 0 10px rgb(74 222 128 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0); }
}

.ip-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	width: 100%;
	min-height: 60px;
	padding: .8rem 1.25rem;
	border: 3px solid var(--outline);
	border-radius: 14px;
	background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--orange));
	box-shadow: 0 6px 0 var(--orange-dark), 0 12px 20px rgb(0 0 0 / .2);
	color: var(--outline);
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 1rem + 1.4vw, 1.6rem);
	letter-spacing: .02em;
	cursor: pointer;
	transition: transform .12s, box-shadow .12s;
}

.ip-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 0 var(--orange-dark), 0 16px 24px rgb(0 0 0 / .22);
}

.ip-button:active {
	transform: translateY(4px);
	box-shadow: 0 2px 0 var(--orange-dark), 0 6px 10px rgb(0 0 0 / .2);
}

.ip-button__text {
	white-space: nowrap;
}

@media (max-width: 420px) {
	.ip-button {
		gap: .5rem;
		padding-inline: .75rem;
	}

	.ip-button__hint {
		display: none;
	}
}

.ip-button__hint {
	font-family: var(--font-body);
	font-size: .75rem;
	font-weight: 800;
	padding: .2rem .5rem;
	border-radius: 999px;
	background: rgb(90 31 0 / .14);
	white-space: nowrap;
}

.server-card__sub {
	font-size: .85rem;
	font-weight: 700;
	color: #16405e;
}

.hero .server-card {
	flex: 0 1 auto;
	width: auto;
}

/* Mobil (portræt): logo øverst og serverkortet under.
   Her må himlen være højere end 40 %, ellers er der ikke plads. */
@media (max-width: 640px) {
	.hero {
		height: auto;
		min-height: 0;
		padding-top: calc(var(--nav-h) + .25rem);
		padding-bottom: calc(56px + 1.25rem);
	}

	.hero__content {
		height: auto;
		flex-direction: column;
		gap: .75rem;
	}

	.hero__logo {
		height: auto;
		width: clamp(170px, 55vw, 240px);
		max-height: none;
	}

	.hero .server-card {
		flex: none;
		width: 100%;
		max-width: 360px;
		gap: .55rem;
		padding: .8rem .9rem;
	}

	.hero .ip-button {
		min-height: 52px;
		font-size: clamp(1.1rem, 1rem + 1.5vw, 1.3rem);
	}
}

@media (max-width: 380px) {
	.hero .ip-button__hint {
		display: none;
	}
}

/* Lave skærme (fx mobil på tværs): kompakt kort ved siden af logoet */
@media (min-width: 641px) and (max-height: 560px) {
	.hero .server-card {
		gap: .45rem;
		padding: .6rem;
		border-radius: 14px;
	}

	.hero .status {
		padding: .2rem .6rem;
		font-size: .78rem;
	}

	.hero .ip-button {
		min-height: 44px;
		padding: .45rem .6rem;
		border-width: 2px;
		border-radius: 10px;
		box-shadow: 0 4px 0 var(--orange-dark);
		font-size: 1.05rem;
	}

	.hero .ip-button .fa-cube,
	.hero .ip-button__hint {
		display: none;
	}

	.hero .server-card__sub {
		font-size: .72rem;
	}
}

/* Græskanten nederst i hero */
.grass-edge {
	position: absolute;
	inset: auto 0 0;
	height: 56px;
	background:
		/* græs-"pixels" der hænger ned */
		linear-gradient(90deg, transparent 50%, var(--grass-dark) 0) 0 22px / 32px 12px repeat-x,
		linear-gradient(180deg, var(--grass) 0 24px, var(--grass-dark) 24px 34px, var(--dirt) 34px);
	box-shadow: inset 0 4px 0 rgb(255 255 255 / .25);
}

/* ==========================================================
   SEKTIONER – jord, sten, dyb sten
   ========================================================== */
.section {
	position: relative;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.section__title {
	font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
	text-align: center;
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
	line-height: 1.1;
}

/* Pixel-tekstur lavet med gradients (ingen billeder nødvendige) */
.section--dirt {
	background:
		conic-gradient(from 90deg at 50% 50%, rgb(0 0 0 / .08) 25%, transparent 0 50%, rgb(0 0 0 / .08) 0 75%, transparent 0) 0 0 / 48px 48px,
		conic-gradient(from 0deg, rgb(255 255 255 / .04) 25%, transparent 0 50%, rgb(255 255 255 / .04) 0 75%, transparent 0) 12px 12px / 24px 24px,
		linear-gradient(180deg, var(--dirt), var(--dirt-dark));
}

.section--stone {
	background:
		conic-gradient(rgb(0 0 0 / .1) 25%, transparent 0 50%, rgb(0 0 0 / .1) 0 75%, transparent 0) 0 0 / 40px 40px,
		linear-gradient(180deg, var(--stone), var(--stone-dark));
	border-top: 6px solid rgb(0 0 0 / .25);
}

.section--deep {
	background:
		linear-gradient(180deg, var(--stone-dark), var(--deep));
	border-top: 6px solid rgb(0 0 0 / .3);
}

/* ---------- Store link-kort ---------- */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

.tile {
	--accent: var(--grass);
	--accent-dark: var(--grass-dark);
	position: relative;
	display: grid;
	justify-items: center;
	gap: .35rem;
	padding: 1.5rem 1.25rem 1.4rem;
	text-align: center;
	background: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / .04));
	border: 2px solid rgb(255 255 255 / .12);
	border-top: 10px solid var(--accent);
	border-radius: var(--radius);
	box-shadow: var(--shadow-block);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.tile--discord { --accent: #5865f2; --accent-dark: #3c45a5; }
.tile--shop    { --accent: var(--gold); --accent-dark: var(--orange-dark); }
.tile--vote    { --accent: var(--grass); --accent-dark: var(--grass-dark); }
.tile--map     { --accent: var(--diamond); --accent-dark: var(--diamond-dark); }

.tile:hover {
	transform: translateY(-6px);
	box-shadow: 0 10px 0 rgb(0 0 0 / .28), 0 22px 36px rgb(0 0 0 / .3);
	border-color: rgb(255 255 255 / .25);
	border-top-color: var(--accent);
}

.tile__icon {
	display: grid;
	place-items: center;
	width: 100%;
	height: 120px;
	margin-bottom: .4rem;
}

.tile__icon img {
	max-height: 110px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35));
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.tile:hover .tile__icon img {
	transform: scale(1.1) rotate(-3deg);
}

.tile h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.7rem;
	letter-spacing: .02em;
	text-shadow: 0 3px 0 var(--accent-dark), 0 5px 8px rgb(0 0 0 / .35);
}

.tile p {
	color: var(--text-soft);
	font-weight: 700;
}

.tile__arrow {
	position: absolute;
	top: .85rem;
	right: .85rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: .85rem;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .2s, transform .2s;
}

.tile:hover .tile__arrow,
.tile:focus-visible .tile__arrow {
	opacity: 1;
	transform: none;
}

/* Mobil: kompakte vandrette kort */
@media (max-width: 520px) {
	.tiles {
		grid-template-columns: 1fr 1fr;
		gap: .8rem;
	}

	.tile {
		padding: 1rem .75rem;
		border-top-width: 8px;
	}

	.tile__icon {
		height: 72px;
	}

	.tile__icon img {
		max-height: 68px;
	}

	.tile h3 {
		font-size: 1.35rem;
	}

	.tile p {
		font-size: .85rem;
		line-height: 1.3;
	}

	.tile__arrow {
		display: none;
	}
}

/* ---------- Små link-kort ---------- */
.links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 1rem;
}

.link-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.15rem;
	min-height: 76px;
	background: rgb(255 255 255 / .07);
	border: 2px solid rgb(255 255 255 / .1);
	border-radius: 14px;
	box-shadow: 0 5px 0 rgb(0 0 0 / .3);
	transition: transform .15s, background .15s, border-color .15s;
}

.link-card:hover {
	transform: translateY(-3px);
	background: rgb(255 255 255 / .12);
	border-color: var(--diamond);
}

.link-card > i {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: linear-gradient(180deg, var(--diamond), var(--diamond-dark));
	color: #0b3b44;
	font-size: 1.2rem;
	box-shadow: 0 3px 0 #0f6d7a;
}

.link-card span {
	display: grid;
}

.link-card strong {
	font-weight: 800;
}

.link-card small {
	color: var(--text-soft);
	font-size: .88rem;
}

/* ---------- Partnere ---------- */
.partners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 1.25rem;
	max-width: 820px;
	margin-inline: auto;
}

.partner {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 1rem;
	padding: 1.5rem;
	text-align: center;
	background: rgb(255 255 255 / .05);
	border: 2px solid rgb(92 225 230 / .2);
	border-radius: var(--radius);
	transition: transform .2s, border-color .2s, box-shadow .2s;
}

.partner:hover {
	transform: translateY(-4px);
	border-color: var(--diamond);
	box-shadow: 0 0 30px rgb(92 225 230 / .2);
}

.partner img {
	height: 80px;
	width: auto;
	object-fit: contain;
}

.partner .partner__wide {
	height: auto;
	width: min(100%, 240px);
}

.partner p {
	color: var(--text-soft);
	font-size: .95rem;
	max-width: 32ch;
}

.partner strong {
	color: #fff;
}

/* ==========================================================
   UNDERSIDER
   ========================================================== */
.nav__menu a[aria-current="page"] {
	background: rgb(255 255 255 / .2);
}

.page-hero {
	position: relative;
	padding: calc(var(--nav-h) + clamp(1.5rem, 5vw, 3rem)) 1rem calc(56px + clamp(1.5rem, 4vw, 2.5rem));
	background:
		radial-gradient(ellipse at 50% 60%, rgb(255 255 255 / .5), transparent 60%),
		linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
}

.page-hero .cloud--1 { top: 22%; }
.page-hero .cloud--2 { top: 48%; }
.page-hero .cloud--3 { top: 12%; transform: scale(.8); }

.page-hero__content {
	position: relative;
	width: var(--wrap);
	max-width: 820px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
}

.page-hero__logo {
	flex: none;
	width: clamp(96px, 20vw, 150px);
	filter: drop-shadow(0 12px 14px rgb(20 60 100 / .35));
	animation: float 6s ease-in-out infinite;
}

.page-hero__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2rem, 1.2rem + 4vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: .02em;
	color: var(--gold);
	background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 45%, var(--orange) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 2px var(--outline);
	paint-order: stroke fill;
	filter: drop-shadow(0 4px 0 var(--orange-dark)) drop-shadow(0 8px 8px rgb(0 0 0 / .3));
}

.page-hero__intro {
	margin-top: .6rem;
	max-width: 48ch;
	font-weight: 800;
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	color: #16405e;
}

@media (max-width: 520px) {
	.page-hero__content {
		flex-direction: column;
		text-align: center;
	}

	.page-hero__intro {
		margin-inline: auto;
	}
}

/* Indholdsområde med jord-tekstur der går over i sten */
.page {
	display: block;
	min-height: 50vh;
	padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem);
	background:
		conic-gradient(from 90deg at 50% 50%, rgb(0 0 0 / .08) 25%, transparent 0 50%, rgb(0 0 0 / .08) 0 75%, transparent 0) 0 0 / 48px 48px,
		linear-gradient(180deg, var(--dirt) 0, var(--dirt-dark) 320px, var(--stone-dark) 900px, var(--deep));
}

.wrap--narrow {
	width: min(820px, 100% - 2rem);
}

.page .wrap > * + * {
	margin-top: 1.25rem;
}

.panel {
	padding: clamp(1.25rem, 4vw, 2.25rem);
	background: rgb(20 22 28 / .72);
	border: 2px solid rgb(255 255 255 / .1);
	border-radius: var(--radius);
	box-shadow: var(--shadow-block);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.panel > * + * {
	margin-top: 1rem;
}

.panel--center {
	display: grid;
	justify-items: center;
	text-align: center;
}

.panel--light {
	background: #fff;
	color: #1c1f26;
}

.panel__title {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	letter-spacing: .02em;
	color: var(--gold-light);
	text-shadow: 0 3px 0 var(--orange-dark);
}

.panel__title i {
	font-size: .8em;
	color: var(--diamond);
	text-shadow: none;
}

.panel * + .panel__title {
	margin-top: 2rem;
}

.lead {
	font-size: 1.1rem;
	font-weight: 700;
}

.panel p,
.faq p {
	color: var(--text-soft);
}

.panel a:not(.btn),
.faq a,
.notice a {
	color: var(--diamond);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Nummererede regler som små blokke */
.rules {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rule;
	display: grid;
	gap: .6rem;
}

.rules li {
	counter-increment: rule;
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: .75rem .9rem;
	background: rgb(255 255 255 / .05);
	border-radius: 12px;
	border-left: 4px solid var(--grass);
}

.rules li::before {
	content: counter(rule);
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: linear-gradient(180deg, var(--gold-light), var(--orange));
	color: var(--outline);
	font-family: var(--font-display);
	font-size: 1.05rem;
	box-shadow: 0 3px 0 var(--orange-dark);
}

.checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.checklist li {
	position: relative;
	padding-left: 1.9rem;
}

.checklist li::before {
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: .1rem;
	color: var(--grass);
}

/* FAQ */
.faq {
	display: grid;
	gap: .75rem;
}

.faq__item {
	background: rgb(20 22 28 / .72);
	border: 2px solid rgb(255 255 255 / .1);
	border-radius: 14px;
	box-shadow: 0 5px 0 rgb(0 0 0 / .3);
	transition: border-color .2s;
}

.faq__item[open] {
	border-color: var(--diamond);
}

.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	font-weight: 800;
	font-size: 1.05rem;
	cursor: pointer;
	list-style: none;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::after {
	content: "\f067";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgb(92 225 230 / .15);
	color: var(--diamond);
	font-size: .85rem;
	transition: transform .2s;
}

.faq__item[open] summary::after {
	transform: rotate(45deg);
}

.faq__item p {
	padding: 0 1.25rem 1.2rem;
}

/* Beskeder */
.notice {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: 1rem 1.15rem;
	border-radius: 14px;
	border: 2px solid;
	font-weight: 700;
}

.notice > i {
	flex: none;
	margin-top: .2rem;
	font-size: 1.15rem;
}

.notice--danger  { background: rgb(248 113 113 / .15); border-color: rgb(248 113 113 / .5); color: #ffd4d4; }
.notice--danger > i { color: #f87171; }
.notice--warning { background: rgb(255 184 28 / .14); border-color: rgb(255 184 28 / .5); color: #ffeab8; }
.notice--warning > i { color: var(--gold); }
.notice--info    { background: rgb(88 101 242 / .18); border-color: rgb(88 101 242 / .55); color: #dfe2ff; }
.notice--info > i { color: #8e98ff; }

/* Knapper */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 52px;
	padding: .75rem 1.5rem;
	border: 3px solid var(--outline);
	border-radius: 14px;
	background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--orange));
	box-shadow: 0 5px 0 var(--orange-dark);
	color: var(--outline);
	font-family: var(--font-display);
	font-size: 1.25rem;
	letter-spacing: .02em;
	cursor: pointer;
	transition: transform .12s, box-shadow .12s;
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 var(--orange-dark);
}

.btn:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 var(--orange-dark);
}

.btn--block {
	width: 100%;
}

.success-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background: linear-gradient(180deg, var(--grass), var(--grass-dark));
	box-shadow: 0 5px 0 #2a6517;
	font-size: 2rem;
}

/* Formularer */
.form > * + * {
	margin-top: 1.5rem;
}

.form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1rem;
}

.field {
	display: grid;
	gap: .4rem;
	align-content: start;
}

.field--full {
	grid-column: 1 / -1;
}

@media (max-width: 560px) {
	.form__grid {
		grid-template-columns: 1fr;
	}
}

.field label {
	font-weight: 800;
	font-size: .95rem;
}

.field input:not([type="checkbox"]),
.field textarea {
	width: 100%;
	min-height: 50px;
	padding: .75rem .95rem;
	border: 2px solid rgb(255 255 255 / .14);
	border-radius: 12px;
	background: rgb(0 0 0 / .3);
	color: #fff;
	font: inherit;
	font-size: 1rem; /* 16px forhindrer zoom på iOS */
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.field textarea {
	resize: vertical;
	min-height: 160px;
}

.field input::placeholder,
.field textarea::placeholder {
	color: rgb(255 255 255 / .38);
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--diamond);
	background: rgb(0 0 0 / .4);
	box-shadow: 0 0 0 4px rgb(92 225 230 / .2);
}

.field--check {
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: .75rem;
	align-self: end;
	min-height: 50px;
}

.field--check input {
	width: 24px;
	height: 24px;
	accent-color: var(--grass);
	cursor: pointer;
}

.field--check label {
	font-weight: 700;
	cursor: pointer;
}

.field__hint {
	justify-self: end;
	color: rgb(255 255 255 / .5);
	font-weight: 700;
}

.field__hint.is-near-limit {
	color: var(--gold);
}

.g-recaptcha {
	max-width: 100%;
	overflow: hidden;
}

.footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem 1.25rem;
	font-weight: 800;
	font-size: .95rem;
}

.footer__links a {
	color: rgb(255 255 255 / .8);
	padding: .35rem 0;
}

.footer__links a:hover {
	color: var(--gold);
}

/* ==========================================================
   FOOTER + TOAST
   ========================================================== */
.footer {
	display: grid;
	gap: 1rem;
	padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
	background: #111318;
	text-align: center;
	font-size: .85rem;
	color: rgb(255 255 255 / .55);
}

.toast {
	position: fixed;
	left: 50%;
	bottom: calc(1.25rem + env(safe-area-inset-bottom));
	z-index: 60;
	padding: .75rem 1.25rem;
	border-radius: 999px;
	background: var(--grass-dark);
	color: #fff;
	font-weight: 800;
	box-shadow: 0 8px 24px rgb(0 0 0 / .35);
	translate: -50% 150%;
	opacity: 0;
	transition: translate .3s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
	pointer-events: none;
}

.toast.is-visible {
	translate: -50% 0;
	opacity: 1;
}

/* ==========================================================
   Scroll-animationer (kun hvis browseren understøtter det)
   ========================================================== */
@supports (animation-timeline: view()) {
	.tile,
	.link-card,
	.partner,
	.rules li,
	.faq__item {
		animation: rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 40%;
	}

	@keyframes rise {
		from { opacity: 0; translate: 0 30px; }
		to   { opacity: 1; translate: 0 0; }
	}
}

/* Respektér brugere der ikke ønsker animationer */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.cloud--1 { left: 8%; }
	.cloud--2 { left: 65%; }
	.cloud--3 { left: 75%; }
	.cloud--4 { left: 30%; }
}

/* ==========================================================
   GENERERET 2D-VERDEN (js/world.js)
   Når verdenen er tegnet, får <html> klassen .has-world, og de
   faste baggrunde bliver gennemsigtige. Uden JS vises de som før.
   ========================================================== */
body {
	position: relative;
}

.world {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 0;
	pointer-events: none;
	image-rendering: pixelated;
	/* canvas er højere end siden (hele blokke) – det der stikker ud forneden, skæres fra (js/world.js) */
	object-fit: none;
	object-position: 0 0;
}

/* Indholdet skal ligge over canvas */
.hero,
.page-hero,
main,
.footer {
	position: relative;
	z-index: 1;
}

.has-world .hero,
.has-world .page-hero,
.has-world .section--dirt,
.has-world .section--stone,
.has-world .section--deep,
.has-world .page {
	background: transparent;
	border-top: 0;
}

.has-world .footer {
	background: rgb(10 8 12 / .72);
}

.has-world .grass-edge {
	display: none;
}

/* Kortene får en mørkere, sløret baggrund så de kan læses oven på verdenen */
.has-world .tile,
.has-world .link-card {
	background: rgb(24 18 14 / .72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* Seed-formular i footeren */
.seed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}

.seed label {
	font-weight: 800;
	color: rgb(255 255 255 / .8);
}

.seed input {
	width: 11rem;
	min-height: 40px;
	padding: .4rem .7rem;
	border: 2px solid rgb(255 255 255 / .2);
	border-radius: 10px;
	background: rgb(0 0 0 / .35);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

.seed input:focus {
	outline: none;
	border-color: var(--diamond);
}

.seed button {
	min-height: 40px;
	padding: .4rem .9rem;
	border: 0;
	border-radius: 10px;
	background: var(--grass-dark);
	box-shadow: 0 3px 0 #2a6517;
	color: #fff;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.seed button:hover {
	background: var(--grass);
}

.seed button:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 #2a6517;
}

/* Introteksten på undersider kan stå oven på træer – giv den en lys baggrund */
.has-world .page-hero__intro {
	display: inline-block;
	padding: .35rem .7rem;
	border-radius: 10px;
	background: rgb(255 255 255 / .78);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ==========================================================
   DEBUG-MENU (bunden af skærmen)
   ========================================================== */
.debug {
	position: fixed;
	left: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 55;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: .5rem;
	font-size: .9rem;
}

/* Debug-menuen er skjult, indtil man skriver "debug" (eller Debug() i konsollen) */
.debug[hidden] {
	display: none;
}

.debug__toggle {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 40px;
	padding: .4rem .85rem;
	border: 2px solid rgb(255 95 191 / .6);
	border-radius: 999px;
	background: rgb(16 12 20 / .85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #ff9fd6;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.debug__toggle:hover,
.debug.is-open .debug__toggle {
	border-color: #ff5fbf;
	color: #fff;
}

.debug__panel {
	display: none;
	padding: .8rem 1rem;
	border: 2px solid rgb(255 95 191 / .6);
	border-radius: 14px;
	background: rgb(16 12 20 / .9);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 8px 24px rgb(0 0 0 / .4);
}

.debug.is-open .debug__panel {
	display: grid;
	gap: .7rem;
	max-width: min(320px, calc(100vw - 2rem));
}

.debug__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 36px;
	padding: .35rem .8rem;
	border: 2px solid rgb(255 95 191 / .6);
	border-radius: 10px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.debug__btn:hover {
	background: rgb(255 95 191 / .2);
}

.debug__row {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.debug__row .debug__btn:first-child {
	flex: 1;
}

.debug__count {
	font-size: .8rem;
	font-weight: 800;
	color: #ff9fd6;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.debug__group {
	display: grid;
	gap: .55rem;
	padding-top: .6rem;
	border-top: 1px solid rgb(255 95 191 / .3);
}

.debug__group summary {
	font-weight: 800;
	cursor: pointer;
	margin-bottom: .2rem;
}

.debug__group[open] {
	max-height: 45vh;
	overflow-y: auto;
	padding-right: .25rem;
}

.slider {
	display: grid;
	gap: .15rem;
	font-size: .82rem;
	font-weight: 700;
}

.slider span {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
}

.slider output {
	color: #ff9fd6;
	font-variant-numeric: tabular-nums;
}

.slider input {
	width: 100%;
	accent-color: #ff5fbf;
	cursor: pointer;
}

.debug__status {
	font-size: .8rem;
	line-height: 1.4;
	color: rgb(255 255 255 / .75);
}

/* ==========================================================
   AI-SPILLEREN (js/player.js)
   ========================================================== */
.player {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	image-rendering: pixelated;
	will-change: transform;
}

/* 🔦 Spotlight på en spiller ("hvor er / hvem er Holger" – js/player.js): skærmen bliver mørk, og et
   lys-hul zoomer ind om spilleren som i en tegnefilm. Guld-skilt med navnet, en hoppende pil og (hvem er) et kort */
.player-spot {
	position: absolute;
	z-index: 40;
	width: 110px;
	height: 110px;
	margin: -55px 0 0 -55px;
	border-radius: 50%;
	pointer-events: none;
	box-shadow:
		0 0 0 200vmax rgb(4 6 14 / .6),
		inset 0 0 24px 8px rgb(4 6 14 / .6),
		0 0 0 3px rgb(255 224 102 / .55);
	animation: spot-in .6s cubic-bezier(.2, .9, .3, 1) both;
	transition: opacity .45s ease;
}

.player-spot.is-out {
	opacity: 0;
}

@keyframes spot-in {
	from {
		opacity: 0;
		transform: scale(7);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.player-spot__tag {
	position: absolute;
	bottom: calc(100% + 26px);
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: .3rem .8rem .35rem;
	white-space: nowrap;
	color: #3a1d00;
	border: 3px solid var(--outline);
	border-radius: 10px;
	background: linear-gradient(var(--gold-light), var(--gold));
	box-shadow: 0 4px 0 var(--orange-dark), 0 8px 18px rgb(0 0 0 / .45);
	transform: translateX(-50%);
	animation: spot-pop .5s .35s cubic-bezier(.2, 1.6, .4, 1) both;
}

.player-spot__tag b {
	font: 1.35rem/1 "Lilita One", system-ui, sans-serif;
	letter-spacing: .02em;
}

.player-spot__tag small {
	font-size: .75rem;
	font-weight: 800;
}

.player-spot__tag small:empty {
	display: none;
}

.player-spot__arrow {
	position: absolute;
	bottom: calc(100% - 4px);
	left: 50%;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--gold-light);
	text-shadow: 0 2px 0 var(--orange-dark), 0 0 8px rgb(255 224 102 / .8);
	transform: translateX(-50%);
	animation: spot-bounce .6s .6s ease-in-out infinite alternate both;
}

.player-spot__card {
	position: absolute;
	top: 50%;
	left: calc(100% + 14px);
	width: max-content;
	max-width: min(15rem, 45vw);
	padding: .55rem .75rem;
	font-size: .85rem;
	line-height: 1.4;
	color: #fff;
	border: 2px solid rgb(255 224 102 / .6);
	border-radius: 12px;
	background: rgb(16 14 22 / .9);
	box-shadow: 0 8px 24px rgb(0 0 0 / .45);
	transform: translateY(-50%);
	animation: spot-card .45s .55s ease-out both;
}

@keyframes spot-pop {
	from {
		opacity: 0;
		transform: translateX(-50%) scale(.3);
	}
}

@keyframes spot-bounce {
	from {
		transform: translate(-50%, -6px);
	}
	to {
		transform: translate(-50%, 2px);
	}
}

@keyframes spot-card {
	from {
		opacity: 0;
		transform: translate(-12px, -50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.player-spot,
	.player-spot__tag,
	.player-spot__arrow,
	.player-spot__card {
		animation: none;
	}
}

/* 🎣 Fiskeri (js/player.js): linen fra stangen og flåddet i vandet */
.fishing-line {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	height: 1px;
	transform-origin: 0 50%;
	pointer-events: none;
	background: rgb(240 240 240 / .8);
}

.fishing-bobber {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 6px;
	height: 6px;
	pointer-events: none;
	background: linear-gradient(#e53935 50%, #f4f4f4 50%);
	border-radius: 2px;
}

/* ⚡ Guardianens laser (js/mobs.js): en stråle fra øjet til spilleren – lilla, der bliver gul, når den er ladet op */
.guardian-beam {
	--k: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	height: 3px;
	transform-origin: 0 50%;
	pointer-events: none;
	background: color-mix(in srgb, #ffe066 calc(var(--k) * 100%), #b44cff);
	box-shadow: 0 0 6px color-mix(in srgb, #ffe066 calc(var(--k) * 100%), #b44cff);
	opacity: calc(.5 + var(--k) * .5);
}

.guardian-beam[hidden] {
	display: none;
}

/* ✨ Trylle-støv når en spiller spawner (js/player.js) */
.spawn-dust {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.spawn-dust span {
	position: absolute;
	width: 2px;
	height: 2px;
	background: var(--c);
	box-shadow: 0 0 4px var(--c);
	animation: spawn-dust 1.1s ease-out both;
}

/* små pixel-stjerner: et "+" af tre pixels på hver led */
.spawn-dust span.is-big {
	width: 2px;
	height: 6px;
	margin: -2px 0 0;
}

.spawn-dust span.is-big::after {
	content: "";
	position: absolute;
	top: 2px;
	left: -2px;
	width: 6px;
	height: 2px;
	background: inherit;
}

@keyframes spawn-dust {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(.5);
	}
	15% {
		opacity: 1;
	}
	60% {
		opacity: 1;
		transform: translate(var(--dx), var(--dy)) scale(1);
	}
	75% {
		opacity: .3;
	}
	85% {
		opacity: 1; /* (et sidste glimt) */
	}
	100% {
		opacity: 0;
		transform: translate(var(--dx), calc(var(--dy) + 6px)) scale(.6);
	}
}

.player[hidden] {
	display: none;
}

/* Monstre (js/mobs.js) */
.mob {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	image-rendering: pixelated;
	will-change: transform;
}

.mob[hidden],
.arrow[hidden] {
	display: none;
}

/* Skelettets pil: skaft + spids */
.arrow {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 14px;
	height: 2px;
	background: linear-gradient(90deg, #eeeeee 0 3px, #8a5a32 3px 11px, #c9c9c9 11px);
	transform-origin: 7px 1px;
	pointer-events: none;
}

/* Creeper-eksplosion */
.explosion {
	--size: 120px;
	position: absolute;
	z-index: 2;
	width: var(--size);
	height: var(--size);
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 15%, #ffd54f 30%, #ff8a00 50%, rgb(120 120 120 / .6) 70%, transparent 72%);
	pointer-events: none;
	animation: boom .7s ease-out forwards;
}

@keyframes boom {
	from { transform: scale(.2); opacity: 1; }
	to   { transform: scale(1.2); opacity: 0; }
}

/* Hvidt glimt lige når creeperen springer */
.explosion-flash {
	--size: 200px;
	position: absolute;
	z-index: 2;
	width: var(--size);
	height: var(--size);
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(255 255 255 / .95) 0 20%, rgb(255 255 220 / .5) 45%, transparent 70%);
	pointer-events: none;
	animation: flash .35s ease-out forwards;
}

@keyframes flash {
	from { opacity: 1; transform: scale(.6); }
	to   { opacity: 0; transform: scale(1.1); }
}

/* Blokstumper der flyver ud og falder ned (farven er den sprængte bloks) */
.debris {
	--dx: 0px;
	--dy: 0px;
	--rot: 0deg;
	--c: #8a6a4a;
	--s: 6px;
	position: absolute;
	z-index: 2;
	width: var(--s);
	height: var(--s);
	background: var(--c);
	box-shadow: inset -1px -1px 0 rgb(0 0 0 / .35);
	pointer-events: none;
	animation: debris 1.1s cubic-bezier(.2, .6, .4, 1) forwards;
}

@keyframes debris {
	0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
	55%  { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) * .6)); opacity: 1; }
	100% { transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) + 90px)) rotate(var(--rot)); opacity: 0; }
}

/* Røgskyer der stiger op */
.smoke {
	--size: 30px;
	--rise: -50px;
	--delay: 0s;
	position: absolute;
	z-index: 2;
	width: var(--size);
	height: var(--size);
	translate: -50% -50%;
	border-radius: 30%;
	background: rgb(90 90 90 / .7);
	pointer-events: none;
	opacity: 0;
	animation: smoke 1.4s ease-out var(--delay) forwards;
}

@keyframes smoke {
	0%   { opacity: .85; transform: translateY(0) scale(.5); }
	100% { opacity: 0; transform: translateY(var(--rise)) scale(1.6); }
}

/* Verden ryster kort ved en eksplosion */
.world.shake {
	animation: shake .45s ease-out;
}

@keyframes shake {
	0%, 100% { translate: 0 0; }
	15% { translate: -5px 3px; }
	30% { translate: 5px -3px; }
	45% { translate: -4px 2px; }
	60% { translate: 3px -2px; }
	80% { translate: -2px 1px; }
}

/* Ray casts (debug): spillernes sigtelinjer oven på verdenen */
.ray-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
	pointer-events: none;
	object-fit: none; /* (samme højde som verdenen – se .world) */
	object-position: 0 0;
}

.ray-canvas[hidden] {
	display: none;
}

/* ✈️ Flyv sidelæns til X (js/world.js – "flyv 300" i terminalen): X vises øverst, og figurerne er væk,
   mens baggrunden flyver (de spawner igen, når den lander) */
.fly-hud {
	position: fixed;
	top: calc(var(--nav-h, 4rem) + .75rem);
	left: 50%;
	z-index: 57;
	padding: .35rem .9rem;
	font: 800 .95rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
	color: #fff;
	border: 2px solid rgb(255 224 102 / .6);
	border-radius: 999px;
	background: rgb(16 14 22 / .8);
	transform: translateX(-50%);
	pointer-events: none;
}

.fly-hud[hidden] {
	display: none;
}

/* ✨ warp på lange flyveture: et hvidt glimt hen over verdenen */
html.is-warping body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 30;
	pointer-events: none;
	background: radial-gradient(ellipse at center, rgb(255 255 255 / .95), rgb(200 230 255 / .6) 45%, rgb(255 255 255 / 0) 75%);
	animation: warp-flash .45s ease-out both;
}

@keyframes warp-flash {
	from {
		opacity: 1;
		transform: scaleX(1.6);
	}
	to {
		opacity: 0;
		transform: scaleX(1);
	}
}

html.is-flying body > :is(canvas:not(.world), .arrow, .player-pop, .fireball, .wind-charge, .sonic-boom,
	.dragon-breath, .shulker-bullet, .debris, .tombstone, .spawn-dust, .player-spot, .mine-cursor, .clouds) {
	visibility: hidden;
}

/* Terminalen nederst til venstre (js/terminal.js) – skjult, indtil man skriver "debug" */
.terminal {
	position: fixed;
	left: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 56;
	display: flex;
	flex-direction: column;
	width: min(30rem, calc(100vw - 2rem));
	font: 500 .85rem/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
	color: #d6f5d6;
	border: 1px solid rgb(255 255 255 / .14);
	border-radius: 10px;
	background: rgb(8 10 12 / .82);
	box-shadow: 0 6px 24px rgb(0 0 0 / .35);
	backdrop-filter: blur(4px);
}

.terminal[hidden] {
	display: none;
}

/* ✖ øverst til højre – skjuler terminalen (som "exit") */
.terminal__close {
	position: absolute;
	top: .3rem;
	right: .35rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	font-size: .75rem;
	line-height: 1;
	color: rgb(255 255 255 / .55);
	border: 0;
	border-radius: 6px;
	background: none;
	cursor: pointer;
}

.terminal__close:hover,
.terminal__close:focus-visible {
	color: #fff;
	background: rgb(255 255 255 / .12);
}

.terminal__log {
	max-height: min(24rem, 55vh); /* (plads til mange linjer – men aldrig mere end godt halvdelen af skærmen) */
	margin: 0;
	padding: .5rem 2rem 0 .7rem; /* (plads til ✖ til højre) */
	overflow-y: auto;
	list-style: none;
}

/* minimalistisk scrollbar: tynd og halvgennemsigtig (Firefox: scrollbar-*, Chrome/Safari/Edge: ::-webkit-scrollbar) */
.terminal__log {
	scrollbar-width: thin;
	scrollbar-color: rgb(255 255 255 / .25) transparent;
}

.terminal__log::-webkit-scrollbar {
	width: 6px;
}

.terminal__log::-webkit-scrollbar-track {
	background: transparent;
}

.terminal__log::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: rgb(255 255 255 / .25);
}

.terminal__log::-webkit-scrollbar-thumb:hover {
	background: rgb(255 255 255 / .45);
}

.terminal__log:empty {
	display: none;
}

.terminal__msg {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.terminal__msg--cmd {
	color: #fff;
}

.terminal__msg--info {
	color: #9fd3ff;
}

.terminal__line {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem 2rem .45rem .7rem; /* (plads til ✖, når loggen er tom) */
}

/* pilene nederst: flyv baggrunden til siden */
.terminal__nav {
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: 0 .7rem .5rem;
}

.terminal__nav button {
	min-width: 2.2rem;
	padding: .25rem .4rem;
	font: inherit;
	color: #fff;
	border: 1px solid rgb(255 255 255 / .18);
	border-radius: 6px;
	background: rgb(255 255 255 / .06);
	cursor: pointer;
}

.terminal__nav button:hover,
.terminal__nav button:focus-visible {
	background: rgb(255 255 255 / .16);
}

.terminal__x {
	flex: 1; /* (skubber pilene over i højre side) */
	color: var(--gold-light);
}

.terminal__prompt {
	color: var(--grass);
	font-weight: 800;
}

.terminal__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	font: inherit;
	color: #fff;
	border: 0;
	background: none;
	outline: none;
}

.terminal__input::placeholder {
	color: rgb(255 255 255 / .35);
}

/* debug-menuen flytter til højre, når terminalen står nederst til venstre */
html.has-terminal .debug {
	left: auto;
	right: 1rem;
	align-items: flex-end;
}

html.is-playing .terminal {
	visibility: hidden;
}

/* "ui af" i terminalen: kun verdenen, terminalen og debug-menuen (indholdet skjules via is-watching) */
html.ui-off :is(.nav, .cookie-banner, .skip-link) {
	visibility: hidden;
}

/* Leg med den levende baggrund (js/game.js, templates/partials/_game.html.twig) */
.nav__game[aria-pressed="true"] {
	background: rgb(255 255 255 / .28);
	color: #fff;
}

.game {
	position: fixed;
	left: 50%;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 50;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	width: max-content;
	max-width: calc(100vw - 2rem);
	font-size: .9rem;
	color: var(--text);
}

.game[hidden],
.game [hidden] {
	display: none;
}

.game__bar {
	animation: game-zoom-in .35s cubic-bezier(.2, 1.4, .4, 1) both; /* zoomer ind, når legen åbnes */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .5rem .6rem;
	border-radius: 14px;
	background: rgb(16 14 22 / .82);
	box-shadow: 0 6px 24px rgb(0 0 0 / .35);
	backdrop-filter: blur(6px);
}

/* 4 store ringe (i logoets farver) der zoomer ind og lukker sig om menuen, én efter én */
.game__stage {
	position: relative;
}

.game__rings {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.game__rings span {
	position: absolute;
	inset: -8px;
	border: 5px solid var(--gold);
	border-radius: 999px;
	opacity: 0;
	animation: game-ring .75s cubic-bezier(.25, .8, .35, 1) both;
}

.game__rings span:nth-child(2) { border-color: var(--diamond); animation-delay: .1s; }
.game__rings span:nth-child(3) { border-color: var(--grass); animation-delay: .2s; }
.game__rings span:nth-child(4) { border-color: var(--orange); animation-delay: .3s; }

@keyframes game-ring {
	0% {
		opacity: 0;
		transform: scale(3.5);
	}
	25% {
		opacity: .95;
	}
	100% {
		opacity: 0;
		transform: scale(1);
	}
}

@keyframes game-zoom-in {
	from {
		opacity: 0;
		transform: scale(.4);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.game__bar {
		animation: none;
	}

	.game__rings {
		display: none;
	}
}

.game__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}

.game__title {
	font-weight: 800;
	padding-inline: .3rem;
}

.game__btn,
.game__select,
.game__slot {
	font: inherit;
	color: inherit;
	border: 2px solid rgb(255 255 255 / .18);
	border-radius: 10px;
	background: rgb(255 255 255 / .08);
	cursor: pointer;
}

.game__btn {
	padding: .4rem .8rem;
	font-weight: 700;
}

.game__btn:hover,
.game__slot:hover {
	background: rgb(255 255 255 / .18);
}

.game__btn[aria-pressed="true"],
.game__slot[aria-pressed="true"] {
	border-color: var(--gold);
	background: rgb(255 184 28 / .22);
}

.game__btn--stop {
	padding-inline: .65rem;
}

.game__select {
	padding: .4rem .5rem;
}

.game__select option {
	color: #111;
}

.game__hotbar {
	display: flex;
	gap: .3rem;
}

.game__slot {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.15rem;
}

.game__slot small {
	position: absolute;
	right: .2rem;
	bottom: .05rem;
	font-size: .7rem;
	font-weight: 800;
	text-shadow: 0 1px 2px #000;
}

.game__inv {
	font-weight: 700;
	color: var(--gold-light);
}

.game__inv:empty {
	display: none;
}

.game__hint {
	color: var(--text-soft);
	font-size: .8rem;
}

@media (pointer: coarse) {
	.game__hint {
		display: none;
	}
}

.game__touch {
	display: flex;
	gap: .6rem;
}

.game__touch button {
	width: 3.4rem;
	height: 3.4rem;
	font-size: 1.3rem;
	color: #fff;
	border: 2px solid rgb(255 255 255 / .25);
	border-radius: 14px;
	background: rgb(16 14 22 / .7);
	touch-action: none;
	user-select: none;
}

/* mens man leger: kun verdenen og legens bar – menuen, debug-menuen og cookie-banneret skjules
   (de kommer igen, når legen lukkes) */
html.is-playing :is(.nav, .debug, .debug-window, .cookie-banner, .skip-link) {
	visibility: hidden;
}

/* Dødsskærm (Spil): rød hinde med "Du døde!" og en Respawn-knap – som i Minecraft */
.game-death {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1rem;
	text-align: center;
	background: rgb(120 0 0 / .45);
	animation: game-death-in .6s ease-out both;
}

.game-death[hidden] {
	display: none;
}

.game-death__title {
	margin: 0;
	font-family: "Lilita One", system-ui, sans-serif;
	font-size: clamp(2.5rem, 8vw, 4.5rem);
	color: #fff;
	text-shadow: 4px 4px 0 #3a0000;
}

.game-death__cause,
.game-death__lost {
	margin: 0;
	font-weight: 700;
	color: #fff;
	text-shadow: 2px 2px 0 rgb(0 0 0 / .5);
}

.game-death__lost {
	font-size: .9rem;
	color: rgb(255 255 255 / .8);
}

.game-death__buttons {
	display: grid;
	gap: .5rem;
	width: min(18rem, 100%);
	margin-top: 1rem;
}

.game-death__btn {
	padding: .7rem 1rem;
	font-size: 1.05rem;
	background: rgb(16 14 22 / .85);
}

.game-death__btn:disabled {
	opacity: .45;
	cursor: default;
}

@keyframes game-death-in {
	from {
		background: rgb(120 0 0 / 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.game-death {
		animation: none;
	}
}

/* ℹ️ info om Kreativ-værktøjerne */
.game__btn--info {
	padding-inline: .65rem;
}

.game-info {
	width: min(32rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 1rem 1.2rem 1.1rem;
	border: 2px solid rgb(255 255 255 / .18);
	border-radius: 16px;
	background: rgb(16 14 22 / .94);
	color: var(--text);
	box-shadow: 0 10px 40px rgb(0 0 0 / .5);
	user-select: text;
}

.game-info[open] {
	animation: game-zoom-in .3s cubic-bezier(.2, 1.4, .4, 1) both;
}

.game-info::backdrop {
	background: rgb(0 0 0 / .45);
}

.game-info__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .6rem;
}

.game-info__title {
	margin: 0;
	font-size: 1.15rem;
}

.game-info__list {
	display: grid;
	gap: .7rem;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.45;
	color: var(--text-soft);
}

.game-info__list strong {
	display: block;
	color: var(--text);
}

.game-info__tip {
	margin: .9rem 0 0;
	font-size: .85rem;
	color: var(--gold-light);
}

@media (prefers-reduced-motion: reduce) {
	.game-info[open] {
		animation: none;
	}
}

/* mens man spiller: siden må ikke markere tekst, når man klikker hurtigt */
html.is-playing body {
	user-select: none;
}

/* Vejret i årstiden (js/weather.js): sne, blade og blomsterblade over himlen – bag indholdet */
.weather {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	image-rendering: pixelated;
}

.weather[hidden] {
	display: none;
}

/* Grå-hvide vinterskyer */
html[data-season="winter"] .cloud {
	background: rgb(236 241 246 / .92);
	box-shadow:
		40px -24px 0 -2px rgb(236 241 246 / .92),
		90px -18px 0 0 rgb(236 241 246 / .92);
}

/* Markering af den klods en spiller er motiveret af (fx guld/diamant) */
.target-marker {
	--c: #ffe066;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0; /* under sidens indhold */
	width: 16px;
	height: 16px;
	pointer-events: none;
}

.target-marker[hidden] {
	display: none;
}

.target-marker__box {
	position: absolute;
	inset: -2px;
	border: 2px solid var(--c);
	box-shadow: 0 0 8px var(--c);
	animation: target-blink 1s ease-in-out infinite;
}

.target-marker::after {
	content: attr(data-icon);
	position: absolute;
	left: 50%;
	top: -18px;
	translate: -50% 0;
	font-size: 13px;
}

/* stiplet linje fra klodsen hen til spilleren */
.target-marker__line {
	position: absolute;
	left: 8px;
	top: 8px;
	height: 0;
	border-top: 2px dashed var(--c);
	opacity: .7;
	transform-origin: 0 0;
}

@keyframes target-blink {
	50% { opacity: .35; }
}

/* Grise og køer (js/animals.js) */
.animal {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	image-rendering: pixelated;
	will-change: transform;
}

.animal[hidden] {
	display: none;
}

/* "+1 Diamant" der svæver op og forsvinder */
.player-pop {
	position: absolute;
	z-index: 0; /* under sidens indhold */
	translate: -50% 0;
	font-weight: 800;
	font-size: .85rem;
	white-space: nowrap;
	text-shadow: 0 1px 0 #000, 0 0 4px rgb(0 0 0 / .8);
	pointer-events: none;
	animation: pop-up 1.3s ease-out forwards;
}

/* Markør når musen kan mine: firkant om blokken + "revner" der vokser */
.mine-cursor {
	--progress: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 16px;
	height: 16px;
	border: 2px solid rgb(255 255 255 / .9);
	box-shadow: 0 0 0 1px rgb(0 0 0 / .6);
	pointer-events: none;
	background:
		/* revner der bliver tydeligere */
		linear-gradient(135deg, transparent 45%, rgb(0 0 0 / calc(var(--progress) * .9)) 45% 55%, transparent 55%),
		linear-gradient(45deg, transparent 60%, rgb(0 0 0 / calc(var(--progress) * .8)) 60% 68%, transparent 68%),
		rgb(0 0 0 / calc(var(--progress) * .45));
}

.mine-cursor[hidden] {
	display: none;
}

.debug__status:empty {
	display: none;
}

/* Taleboble med figurens replik */
.player-say {
	position: absolute;
	z-index: 0; /* under sidens indhold */
	translate: -50% -100%;
	max-width: 220px;
	padding: .35rem .6rem;
	border-radius: 10px;
	background: #fff;
	color: #1c1f26;
	font-size: .78rem;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	box-shadow: 0 3px 0 rgb(0 0 0 / .25);
	pointer-events: none;
	animation: say 3.2s ease-out forwards;
}

.player-say::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	translate: -50% 0;
	border: 6px solid transparent;
	border-bottom: 0;
	border-top-color: #fff;
}

@keyframes say {
	0%   { opacity: 0; transform: translateY(6px) scale(.9); }
	8%   { opacity: 1; transform: none; }
	85%  { opacity: 1; }
	100% { opacity: 0; }
}

/* Spillerliste i debug-menuen */
.roster {
	display: grid;
	gap: .3rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .8rem;
}

.roster li {
	display: flex;
	align-items: center;
	gap: .45rem;
	min-width: 0;
}

.roster__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgb(255 255 255 / .4);
}

.roster__info {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: rgb(255 255 255 / .7);
}

@keyframes pop-up {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-36px); }
}

/* Tænd/sluk-kontakt */
.switch {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
}

.switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.switch__track {
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: #555;
	transition: background .2s;
}

.switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: translate .2s;
}

.switch input:checked + .switch__track {
	background: #ff5fbf;
}

.switch input:checked + .switch__track::after {
	translate: 20px 0;
}

.switch input:focus-visible + .switch__track {
	outline: 3px solid var(--gold-light);
	outline-offset: 2px;
}

/* ==========================================================
   NETHER – temaet i dark mode (<html data-theme="nether">)
   Verdenen (js/world.js) bliver til Nether; her følger UI'et med.
   ========================================================== */
html[data-theme="nether"] {
	color-scheme: dark;
	--sky-top: #1e0404;
	--sky-bottom: #7a2414;
	--grass: #b82a30;
	--grass-dark: #7a1418;
	--dirt: #6f2323;
	--dirt-dark: #4a1414;
	--stone: #3a1a1a;
	--stone-dark: #241012;
	--deep: #140708;
}

html[data-theme="nether"] body {
	background: var(--deep);
}

/* Ingen skyer i Nether – i stedet svævende gløder */
html[data-theme="nether"] .cloud {
	width: 6px;
	height: 6px;
	border-radius: 0;
	background: #ffb347;
	box-shadow: 0 0 8px 2px rgb(255 120 30 / .7);
	animation-name: ember;
}

@keyframes ember {
	from { translate: 0 0; opacity: 0; }
	15%  { opacity: 1; }
	to   { translate: calc(100vw + 440px) -60px; opacity: .2; }
}

/* (kun før verdenen er tegnet – derefter ses Nether-himlen fra canvas) */
html[data-theme="nether"]:not(.has-world) .hero,
html[data-theme="nether"]:not(.has-world) .page-hero {
	background:
		radial-gradient(ellipse at 50% 40%, rgb(255 120 40 / .25), transparent 55%),
		linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
}

html[data-theme="nether"] .server-card {
	background: rgb(40 8 8 / .55);
	border-color: rgb(255 120 60 / .45);
	box-shadow: 0 10px 30px rgb(0 0 0 / .45), 0 0 24px rgb(255 90 30 / .18);
}

html[data-theme="nether"] .server-card__sub {
	color: rgb(255 220 200 / .8);
}

html[data-theme="nether"] .status {
	background: rgb(20 4 4 / .7);
}

html[data-theme="nether"] .page-hero__intro {
	color: #ffd9c2;
}

html[data-theme="nether"].has-world .page-hero__intro {
	background: rgb(30 6 6 / .78);
}

html[data-theme="nether"] .nav.is-scrolled,
html[data-theme="nether"] .nav.is-open {
	background: rgb(30 8 8 / .85);
}

@media (max-width: 820px) {
	html[data-theme="nether"] .nav__menu {
		background: rgb(30 8 8 / .95);
	}
}

html[data-theme="nether"] .panel,
html[data-theme="nether"] .faq__item,
html[data-theme="nether"].has-world .tile,
html[data-theme="nether"].has-world .link-card {
	background: rgb(28 8 8 / .76);
	border-color: rgb(255 110 60 / .16);
}

html[data-theme="nether"] .footer,
html[data-theme="nether"].has-world .footer {
	background: rgb(18 4 4 / .82);
}

html[data-theme="nether"] :focus-visible {
	outline-color: #ffb347;
}

/* Tema-vælger i debug-menuen */
.debug__select {
	display: grid;
	gap: .3rem;
	font-weight: 700;
}

.debug__select select {
	padding: .35rem .5rem;
	border: 2px solid rgb(255 255 255 / .2);
	border-radius: 8px;
	background: rgb(0 0 0 / .4);
	color: inherit;
	font: inherit;
	font-weight: 600;
}

/* Spawn-knapper for dyr/monstre der ikke findes i den aktuelle verden skjules (js/mobs.js, js/animals.js) */
.debug__btn[hidden] {
	display: none;
}

/* Blazens ildkugle */
.fireball {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: radial-gradient(circle, #fff4b0 0 25%, #ffb347 45%, #ff5a1a 75%, transparent 78%);
	box-shadow: 0 0 10px 3px rgb(255 120 30 / .6);
	pointer-events: none;
	animation: fireball-flicker .15s steps(2) infinite;
}

.fireball[hidden] {
	display: none;
}

@keyframes fireball-flicker {
	to { filter: brightness(1.3); }
}

/* ==========================================================
   THE END – <html data-theme="end"> (se js/dimensions.js)
   ========================================================== */
html[data-theme="end"] {
	color-scheme: dark;
	--sky-top: #05030a;
	--sky-bottom: #2a1840;
	--grass: #e9e9b8;
	--grass-dark: #bdbd82;
	--dirt: #6e6e4c;
	--dirt-dark: #46442e;
	--stone: #2a2038;
	--stone-dark: #181222;
	--deep: #0a0710;
}

html[data-theme="end"] body {
	background: var(--deep);
}

/* ingen skyer – i stedet små lilla partikler der svæver */
html[data-theme="end"] .cloud {
	width: 4px;
	height: 4px;
	border-radius: 0;
	background: #e6c8ff;
	box-shadow: 0 0 6px 2px rgb(200 140 255 / .6);
	animation-name: ember;
}

html[data-theme="end"]:not(.has-world) .hero,
html[data-theme="end"]:not(.has-world) .page-hero {
	background:
		radial-gradient(ellipse at 50% 40%, rgb(180 120 255 / .18), transparent 55%),
		linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
}

html[data-theme="end"] .server-card {
	background: rgb(24 14 36 / .6);
	border-color: rgb(200 150 255 / .45);
	box-shadow: 0 10px 30px rgb(0 0 0 / .45), 0 0 24px rgb(170 110 255 / .18);
}

html[data-theme="end"] .server-card__sub,
html[data-theme="end"] .page-hero__intro {
	color: rgb(235 220 255 / .85);
}

html[data-theme="end"] .status {
	background: rgb(10 6 16 / .7);
}

html[data-theme="end"].has-world .page-hero__intro {
	background: rgb(20 12 32 / .8);
}

html[data-theme="end"] .nav.is-scrolled,
html[data-theme="end"] .nav.is-open {
	background: rgb(18 10 28 / .88);
}

@media (max-width: 820px) {
	html[data-theme="end"] .nav__menu {
		background: rgb(18 10 28 / .95);
	}
}

html[data-theme="end"] .panel,
html[data-theme="end"] .faq__item,
html[data-theme="end"].has-world .tile,
html[data-theme="end"].has-world .link-card {
	background: rgb(20 12 32 / .78);
	border-color: rgb(200 150 255 / .16);
}

html[data-theme="end"] .footer,
html[data-theme="end"].has-world .footer {
	background: rgb(10 6 16 / .85);
}

html[data-theme="end"] .nav__theme {
	color: #e6c8ff;
}

/* Spillerlisten i debug-menuen: mål og behov (js/player.js) */
.roster li:has(.roster__needs) {
	flex-wrap: wrap;
}

.roster__goal {
	flex-basis: 100%;
	padding-left: 1rem;
	font-size: .72rem;
	opacity: .85;
}

.roster__needs {
	flex-basis: 100%;
	padding-left: 1rem;
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
}

.need {
	--v: 0;
	position: relative;
	width: 30px;
	height: 16px;
	padding-left: 2px;
	border-radius: 3px;
	background: rgb(255 255 255 / .08);
	font-size: 10px;
	line-height: 16px;
	overflow: hidden;
	isolation: isolate; /* (søjlen ligger bag ikonet) */
}

/* søjlen: grøn (tilfreds) → gul → rød (presserende) */
.need::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--v) * 1%);
	background: hsl(calc(120 - var(--v) * 1.2) 70% 45% / .75);
	z-index: -1;
}

/* Livsmålet i spillerlisten: tekst med en fremskridts-bjælke bagved */
.roster__life {
	--v: 0;
	position: relative;
	flex-basis: 100%;
	margin-left: 1rem;
	padding: 1px 6px;
	border-radius: 4px;
	background: rgb(255 255 255 / .08);
	font-size: .74rem;
	font-weight: 700;
	isolation: isolate;
	overflow: hidden;
}

.roster__life::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--v) * 1%);
	background: linear-gradient(90deg, #b8860b, #ffd24a);
	opacity: .55;
	z-index: -1;
}

/* Motivationskortet: klik på en spiller i listen (js/player.js – motivationCard) */
.roster li[data-player] {
	cursor: pointer;
	flex-wrap: wrap;
	border-radius: 6px;
}

.roster li[data-player]:hover,
.roster li.is-open {
	background: rgb(255 255 255 / .05);
}

.roster__card {
	flex-basis: 100%;
	margin: .2rem 0 .4rem 1rem;
	padding: .55rem .7rem;
	border-left: 3px solid var(--gold-light, #ffd24a);
	border-radius: 0 6px 6px 0;
	background: rgb(0 0 0 / .28);
	font-size: .74rem;
	line-height: 1.4;
	cursor: default;
}

.roster__card p {
	margin: 0 0 .45rem;
}

.roster__card-h {
	display: block;
	margin: .35rem 0 .2rem;
	color: var(--gold-light, #ffd24a);
	font-size: .66rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.roster__card-h:first-child {
	margin-top: 0;
}

/* kæden fra det spilleren gør nu og op til det den egentlig vil (nederst) */
.roster__chain {
	margin: .25rem 0 0;
	padding-left: 1.1rem;
	color: rgb(255 255 255 / .75);
}

.roster__chain li::marker {
	content: "↳ ";
}

.roster__wishes,
.roster__needlist {
	display: grid;
	gap: .25rem;
	margin: 0 0 .45rem;
	padding: 0;
	list-style: none;
}

.roster__wishes li {
	display: grid;
	grid-template-columns: 1.3rem 1fr;
	align-items: start;
}

.roster__wishes b,
.roster__wishes small {
	display: block;
}

.roster__wishes small {
	color: rgb(255 255 255 / .7);
	overflow-wrap: anywhere;
}

/* behovene som bjælker: grøn (tilfreds) → rød (presserende) */
.roster__needlist {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.roster__needlist li {
	--v: 0;
	position: relative;
	padding: 1px 6px;
	border-radius: 4px;
	background: rgb(255 255 255 / .08);
	isolation: isolate;
	overflow: hidden;
	white-space: nowrap;
}

.roster__needlist li::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--v) * 1%);
	background: hsl(calc(120 - var(--v) * 1.2) 70% 45% / .7);
	z-index: -1;
}

/* Breezens vindladning (js/mobs.js) */
.wind-charge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle, #ffffff 0 20%, #bfe9ff 45%, rgb(143 202 240 / .6) 70%, transparent 72%);
	box-shadow: 0 0 8px 2px rgb(191 233 255 / .6);
	pointer-events: none;
}

.wind-charge[hidden] {
	display: none;
}

/* Wardens sonic boom (js/mobs.js): cyan ringe fra Warden hen til spilleren */
.sonic-boom {
	position: absolute;
	z-index: 0;
	width: 18px;
	height: 18px;
	border: 3px solid rgb(127 246 255 / .9);
	border-radius: 50%;
	box-shadow: 0 0 8px 2px rgb(41 223 235 / .6);
	pointer-events: none;
	opacity: 0;
	animation: sonic-boom .6s ease-out forwards;
}

@keyframes sonic-boom {
	0% { opacity: 1; transform: scale(.3); }
	100% { opacity: 0; transform: scale(1.6); }
}

/* Byggeværktøjet (js/mouse.js): grøn ramme = her sættes en klods, rød = klodsen slettes */
.mine-cursor.is-build {
	border-color: #7cff7c;
}

.mine-cursor.is-delete {
	border-color: #ff6b6b;
	background: rgb(255 80 80 / .25);
}

/* Tændt TNT: blinker hvidt (hurtigere lige før den springer) */
.tnt-lit {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 16px;
	height: 16px;
	/* TNT-klodsen: rød med et hvidt bånd og "TNT" */
	background:
		linear-gradient(90deg, transparent 12%, #1b1b1b 12% 25%, transparent 25% 37%, #1b1b1b 37% 63%, transparent 63% 75%, #1b1b1b 75% 88%, transparent 88%) 0 40% / 100% 20% no-repeat,
		linear-gradient(#e8e8e8 0 12%, #d63131 12% 37%, #f2f2f2 37% 63%, #d63131 63%);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25);
	pointer-events: none;
}

/* den blinker hvidt */
.tnt-lit::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	animation: tnt-blink .5s steps(1) infinite;
}

.tnt-lit.is-fast::after {
	animation-duration: .16s;
}

@keyframes tnt-blink {
	0% { opacity: .75; }
	50% { opacity: 0; }
}

/* Lys lægges på med blend mode (som lyset i verdenen, js/world.js): det lysner det bagved i sin
   egen farve i stedet for at dække det */
.explosion,
.explosion-flash,
.fireball,
.wind-charge,
.sonic-boom {
	mix-blend-mode: screen;
}

/* Gravsten hvor en spiller døde (js/player.js) – med navnet over */
.tombstone {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 14px;
	height: 16px;
	pointer-events: none;
}

.tombstone canvas {
	display: block;
	image-rendering: pixelated;
}

.tombstone span {
	position: absolute;
	bottom: 100%;
	left: 50%;
	translate: -50% -2px;
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	color: #e8e8e8;
	text-shadow: 0 1px 2px rgb(0 0 0 / .8);
	opacity: .85;
}

/* ==========================================================
   DEBUG-MENU: faner og vinduer der kan trækkes ud og flyttes (js/debug-ui.js)
   ========================================================== */
.debug.is-open .debug__panel {
	max-width: min(360px, calc(100vw - 2rem));
	max-height: calc(100vh - 6rem);
	overflow-y: auto;
}

.debug__head,
.debug-window__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin: -.8rem -1rem 0;
	padding: .45rem .6rem .45rem 1rem;
	border-bottom: 1px solid rgb(255 95 191 / .3);
	font-weight: 800;
	color: #ff9fd6;
	cursor: grab;
	user-select: none;
	touch-action: none;
}

.is-dragging .debug__head,
.debug-window.is-dragging .debug-window__head {
	cursor: grabbing;
}

.debug__icon-btn {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid rgb(255 95 191 / .5);
	border-radius: 8px;
	background: transparent;
	color: #ff9fd6;
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.debug__icon-btn:hover {
	background: rgb(255 95 191 / .2);
	color: #fff;
}

.debug__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}

.debug__tab {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .55rem;
	border: 1px solid rgb(255 95 191 / .35);
	border-radius: 8px;
	background: transparent;
	color: rgb(255 255 255 / .8);
	font: inherit;
	font-size: .8rem;
	font-weight: 700;
	cursor: pointer;
}

.debug__tab:hover {
	background: rgb(255 95 191 / .15);
}

.debug__tab.is-active {
	border-color: #ff5fbf;
	background: rgb(255 95 191 / .25);
	color: #fff;
}

/* fanen er trukket ud i et vindue */
.debug__tab.is-out {
	border-style: dashed;
	opacity: .6;
}

.debug__tab.is-out::after {
	content: "⧉";
	font-size: .75rem;
}

.debug__section {
	display: grid;
	gap: .7rem;
}

.debug__section[hidden] {
	display: none;
}

.debug__section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.debug__section-head h3 {
	margin: 0;
	font-size: .95rem;
	font-weight: 800;
}

/* i et vindue står titlen allerede i vinduets top */
.debug-window .debug__section-head {
	display: none;
}

.debug-window {
	position: fixed;
	z-index: 60;
	display: grid;
	gap: .7rem;
	width: min(320px, calc(100vw - 1rem));
	max-height: calc(100vh - 1rem);
	overflow-y: auto;
	padding: .8rem 1rem;
	border: 2px solid rgb(255 95 191 / .6);
	border-radius: 14px;
	background: rgb(16 12 20 / .92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 10px 28px rgb(0 0 0 / .45);
	color: #fff;
	font-size: .9rem;
}

.debug-window[hidden] {
	display: none;
}

.debug-window.is-dragging {
	opacity: .85;
	box-shadow: 0 16px 40px rgb(0 0 0 / .55);
}

.debug-window__body {
	display: grid;
	gap: .7rem;
}

/* vinduet blinker, når man klikker på dets fane i menuen */
.debug-window.is-flash {
	animation: debug-flash .5s ease-out;
}

@keyframes debug-flash {
	0% { border-color: #fff; box-shadow: 0 0 0 4px rgb(255 95 191 / .6); }
	100% { border-color: rgb(255 95 191 / .6); }
}

/* Ghastens store ildkugle (js/mobs.js) – eksploderer, hvor den rammer */
.fireball--ghast {
	width: 16px;
	height: 16px;
	margin: -3px 0 0 -3px;
	box-shadow: 0 0 12px 4px rgb(255 140 40 / .7);
}

/* Kommandofeltet i debug-menuen (js/player.js) */
.command {
	display: flex;
	gap: .4rem;
}

.command input {
	flex: 1;
	min-width: 0;
	padding: .45rem .6rem;
	border: 2px solid rgb(255 255 255 / .2);
	border-radius: 8px;
	background: rgb(0 0 0 / .4);
	color: inherit;
	font: inherit;
}

.command input:focus {
	outline: none;
	border-color: #ff5fbf;
}

.command__log {
	display: grid;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .8rem;
}

.command__log li {
	display: grid;
	gap: .1rem;
	padding: .35rem .5rem;
	border-radius: 8px;
	background: rgb(255 255 255 / .06);
}

.command__log b {
	color: #ff9fd6;
}

/* Fyrværkeri (MrTexass – js/player.js): raketten, gnisterne og et lysglimt (glimtet med blend mode – gnisterne
   i fuld farve, så de også ses på den lyse himmel) */
.firework-rocket {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 4px;
	height: 12px;
	border-radius: 2px;
	background: linear-gradient(var(--c) 0 35%, #c8a070 35%);
	box-shadow: 0 8px 6px 1px rgb(255 200 120 / .8), 0 14px 10px 2px rgb(255 140 60 / .45);
	pointer-events: none;
}

.firework-spark {
	position: absolute;
	z-index: 0;
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 6px 2px var(--c);
	pointer-events: none;
	opacity: 0;
	animation: firework-spark 1.3s cubic-bezier(.15, .7, .3, 1) both;
}

@keyframes firework-spark {
	0% { opacity: 1; transform: translate(0, 0) scale(1.3); }
	70% { opacity: .9; }
	100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5); }
}

.firework-flash {
	position: absolute;
	z-index: 0;
	width: 120px;
	height: 120px;
	margin: -60px 0 0 -60px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--c), transparent 65%);
	mix-blend-mode: screen;
	pointer-events: none;
	opacity: 0;
	animation: firework-flash .5s ease-out both;
}

@keyframes firework-flash {
	0% { opacity: .7; transform: scale(.4); }
	100% { opacity: 0; transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
	.firework-spark,
	.firework-flash {
		display: none;
	}
}

/* Shulkerens målsøgende kugle (js/mobs.js) */
.shulker-bullet {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: #fff6c9;
	box-shadow: 0 0 6px 2px rgb(199 155 255 / .8), inset 0 0 0 2px #c79bff;
	pointer-events: none;
}

/* Ender Dragen (js/mobs.js): dragekugle, dragens ånde og boss-bjælken */
.fireball--dragon {
	background: radial-gradient(circle, #fff 0 20%, #e07bff 45%, rgb(180 60 230 / .6) 70%, transparent 72%);
	box-shadow: 0 0 10px 3px rgb(214 92 255 / .7);
}

.dragon-breath {
	position: absolute;
	z-index: 0;
	width: 48px;
	height: 22px;
	border-radius: 50% 50% 4px 4px;
	background: radial-gradient(ellipse at 50% 80%, rgb(214 92 255 / .75), rgb(150 50 200 / .35) 60%, transparent 75%);
	mix-blend-mode: screen;
	pointer-events: none;
	animation: dragon-breath 1.2s ease-in-out infinite alternate;
}

@keyframes dragon-breath {
	from { transform: scaleY(.85); }
	to { transform: scaleY(1.15); }
}

.boss-bar {
	position: fixed;
	top: calc(var(--nav-h, 60px) + .4rem);
	left: 50%;
	z-index: 50;
	display: grid;
	gap: .2rem;
	justify-items: center;
	translate: -50% 0;
	pointer-events: none;
	color: #fff;
	font-size: .85rem;
	font-weight: 800;
	text-shadow: 0 1px 3px rgb(0 0 0 / .9);
}

.boss-bar[hidden] {
	display: none;
}

.boss-bar__track {
	display: block;
	width: min(320px, 70vw);
	height: 8px;
	border: 1px solid rgb(0 0 0 / .7);
	background: rgb(60 20 70 / .7);
}

.boss-bar__fill {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(#f08bff, #b03be0);
	transition: width .3s;
}

/* ==========================================================
   "Kom i gang"-kortene: en kraftig hover (og tastaturfokus) – kortet popper op med et fjedrende hop,
   lyser i sin egen farve, et lysglimt fejer hen over det, ikonet hopper og svæver med en glorie bagved,
   og kortet trykkes ned som en knap, når man klikker
   ========================================================== */
.tile {
	isolation: isolate;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s, border-color .3s, background .3s;
}

/* lysglimtet der fejer hen over kortet */
.tile::before {
	content: "";
	position: absolute;
	inset: -40% auto -40% -60%;
	z-index: -1;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / .28), transparent);
	transform: translateX(-120%) skewX(-18deg);
	pointer-events: none;
}

/* glorien bag ikonet */
.tile__icon {
	position: relative;
}

.tile__icon::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	z-index: -1;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
	opacity: 0;
	transform: scale(.3);
	transition: opacity .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1);
	pointer-events: none;
}

.tile:hover,
.tile:focus-visible {
	transform: translateY(-12px) scale(1.04) rotate(-1deg);
	border-color: var(--accent);
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), rgb(255 255 255 / .05));
	box-shadow:
		0 12px 0 var(--accent-dark),
		0 0 0 3px color-mix(in srgb, var(--accent) 75%, transparent),
		0 0 50px 12px color-mix(in srgb, var(--accent) 65%, transparent),
		0 28px 44px rgb(0 0 0 / .4);
	outline: none;
}

.tile:hover::before,
.tile:focus-visible::before {
	animation: tile-shine .9s ease-out;
}

.tile:hover .tile__icon::before,
.tile:focus-visible .tile__icon::before {
	opacity: .55;
	transform: scale(1);
}

.tile:hover .tile__icon img,
.tile:focus-visible .tile__icon img {
	transform: none;
	filter: drop-shadow(0 10px 14px rgb(0 0 0 / .45)) drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 70%, transparent));
	animation: tile-hop .55s cubic-bezier(.34, 1.56, .64, 1), tile-float 2.4s ease-in-out .55s infinite;
}

.tile h3 {
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), text-shadow .3s;
}

.tile:hover h3,
.tile:focus-visible h3 {
	transform: scale(1.12);
	text-shadow: 0 4px 0 var(--accent-dark), 0 0 18px color-mix(in srgb, var(--accent) 80%, transparent), 0 6px 10px rgb(0 0 0 / .4);
}

.tile:hover .tile__arrow,
.tile:focus-visible .tile__arrow {
	box-shadow: 0 0 0 0 var(--accent);
	animation: tile-arrow 1s ease-out infinite;
}

/* klik: trykkes ned som en knap */
.tile:active {
	transform: translateY(-2px) scale(.97);
	box-shadow: 0 3px 0 var(--accent-dark), 0 0 22px 2px color-mix(in srgb, var(--accent) 55%, transparent);
	transition-duration: .08s;
}

@keyframes tile-shine {
	to { transform: translateX(420%) skewX(-18deg); }
}

@keyframes tile-hop {
	0% { transform: scale(1); }
	40% { transform: translateY(-14px) scale(1.18) rotate(-6deg); }
	70% { transform: translateY(2px) scale(1.12) rotate(2deg); }
	100% { transform: translateY(-4px) scale(1.14) rotate(-3deg); }
}

@keyframes tile-float {
	0%, 100% { transform: translateY(-4px) scale(1.14) rotate(-3deg); }
	50% { transform: translateY(-10px) scale(1.14) rotate(2deg); }
}

@keyframes tile-arrow {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
	100% { box-shadow: 0 0 0 12px transparent; }
}

/* reducer bevægelse: kun farver og glød – ingen hop, glimt eller svæv */
@media (prefers-reduced-motion: reduce) {
	.tile:hover,
	.tile:focus-visible,
	.tile:active {
		transform: none;
	}

	.tile:hover::before,
	.tile:focus-visible::before,
	.tile:hover .tile__icon img,
	.tile:focus-visible .tile__icon img,
	.tile:hover .tile__arrow,
	.tile:focus-visible .tile__arrow {
		animation: none;
	}

	.tile:hover h3,
	.tile:focus-visible h3 {
		transform: none;
	}
}

/* ==========================================================
   COOKIE-SAMTYKKE (inc/footer.php, js/site.js)
   ========================================================== */
.cookie-banner {
	position: fixed;
	left: 50%;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 70; /* over verdenen og debug-menuen */
	display: grid;
	gap: .6rem;
	width: min(520px, calc(100vw - 2rem));
	padding: 1rem 1.15rem;
	translate: -50% 0;
	border: 2px solid rgb(255 255 255 / .18);
	border-top: 8px solid var(--grass, #5fae3d);
	border-radius: 14px;
	background: rgb(20 18 26 / .95);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 8px 0 rgb(0 0 0 / .3), 0 18px 40px rgb(0 0 0 / .45);
	color: #fff;
}

.cookie-banner[hidden] {
	display: none;
}

.cookie-banner__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 800;
}

.cookie-banner__text {
	margin: 0;
	font-size: .88rem;
	line-height: 1.45;
	color: rgb(255 255 255 / .85);
}

.cookie-banner__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.cookie-banner__btn {
	flex: 1 1 140px;
	min-height: 42px;
	padding: .5rem 1rem;
	border: 2px solid rgb(255 255 255 / .3);
	border-radius: 10px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.cookie-banner__btn:hover,
.cookie-banner__btn:focus-visible {
	background: rgb(255 255 255 / .12);
}

.cookie-banner__btn--accept {
	border-color: var(--grass-dark, #3f7f25);
	background: var(--grass, #5fae3d);
	box-shadow: 0 4px 0 var(--grass-dark, #3f7f25);
}

.cookie-banner__btn--accept:hover,
.cookie-banner__btn--accept:focus-visible {
	background: color-mix(in srgb, var(--grass, #5fae3d) 85%, #fff);
}

/* "🍪 Cookies" i footeren ligner de andre footer-links */
.footer__cookie-link {
	padding: .35rem 0;
	border: 0;
	background: none;
	color: rgb(255 255 255 / .8);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.footer__cookie-link:hover {
	color: var(--gold);
}

/* ==========================================================
   EVENTS – kalender (/events)
   ========================================================== */
.calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.calendar__title {
	justify-content: center;
	margin: 0;
	text-align: center;
}

.calendar__nav {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgb(255 255 255 / .1);
	color: var(--text) !important;
	text-decoration: none !important;
	transition: background .15s, transform .15s;
}

.calendar__nav:hover,
.calendar__nav:focus-visible {
	background: rgb(255 255 255 / .2);
	transform: scale(1.08);
}

.calendar__today {
	margin-top: .25rem !important;
	text-align: center;
	font-size: .9rem;
}

.calendar__grid {
	display: grid;
	gap: 4px;
}

.calendar__row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.calendar__weekday {
	padding: .25rem 0;
	text-align: center;
	font-weight: 800;
	font-size: .85rem;
	color: var(--text-soft);
}

.calendar__weekday abbr {
	text-decoration: none;
}

.calendar__day {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 96px;
	padding: 6px;
	border-radius: 10px;
	background: rgb(255 255 255 / .06);
	border: 2px solid transparent;
	overflow: hidden;
}

.calendar__day--other {
	opacity: .4;
}

.calendar__day--today {
	border-color: var(--gold);
	background: rgb(255 184 28 / .12);
}

.calendar__num {
	font-weight: 800;
	font-size: .9rem;
	line-height: 1;
}

.calendar__day--today .calendar__num {
	color: var(--gold-light);
}

.calendar__event {
	display: block;
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--grass-dark);
	box-shadow: 0 2px 0 rgb(0 0 0 / .3);
	color: #fff !important;
	font-size: .75rem;
	font-weight: 700 !important;
	line-height: 1.3;
	text-decoration: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: filter .15s;
}

.calendar__event:hover,
.calendar__event:focus-visible {
	filter: brightness(1.15);
}

.calendar__event--past {
	background: var(--stone);
}

.calendar__time {
	font-weight: 900;
	opacity: .85;
}

/* Event-kort i listen */
.event {
	display: flex;
	gap: 1rem;
	padding: 1rem;
	border-radius: 14px;
	background: rgb(255 255 255 / .06);
	scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.event:target {
	outline: 3px solid var(--gold);
	animation: event-flash 1.2s ease-out;
}

@keyframes event-flash {
	from { background: rgb(255 184 28 / .3); }
}

.event__date {
	display: grid;
	place-content: center;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	border: 3px solid var(--outline);
	background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--orange));
	box-shadow: 0 4px 0 var(--orange-dark);
	color: var(--outline);
	text-align: center;
	line-height: 1;
}

.event__day {
	font-family: var(--font-display);
	font-size: 1.6rem;
}

.event__month {
	font-weight: 900;
	font-size: .75rem;
	text-transform: uppercase;
}

.event__body {
	min-width: 0;
}

.event__body > * + * {
	margin-top: .35rem;
}

.event__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.35rem;
	letter-spacing: .02em;
}

.event__badge {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--grass);
	color: #10200a;
	font-family: var(--font-body);
	font-size: .75rem;
	font-weight: 900;
}

.event__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.1rem;
	margin: 0;
	font-weight: 700;
	font-size: .95rem;
}

.event__meta i {
	color: var(--diamond);
	margin-right: .2rem;
}

.event__text {
	margin: 0;
	overflow-wrap: anywhere;
}

/* Mobil: kalenderen viser kun prikker for events */
@media (max-width: 640px) {
	.calendar__day {
		min-height: 52px;
		padding: 4px;
		align-items: center;
	}

	.calendar__event {
		width: 8px;
		height: 8px;
		padding: 0;
		border-radius: 50%;
		font-size: 0;
		box-shadow: none;
	}

	.calendar__day--has-events .calendar__num {
		color: var(--grass);
	}

	.event {
		padding: .75rem;
		gap: .75rem;
	}

	.event__date {
		width: 52px;
		height: 52px;
	}
}

/* ==========================================================
   SERVER LIVE – nedtælling i serverkortet (sættes i admin)
   ========================================================== */
.status[hidden] {
	display: none;
}

.countdown {
	display: grid;
	justify-items: center;
	gap: .4rem;
	text-align: center;
}

.countdown__label {
	margin: 0;
	padding: .3rem .85rem;
	border-radius: 999px;
	background: rgb(20 40 60 / .55);
	color: #fff;
	font-weight: 800;
	font-size: .95rem;
}

.countdown__label i {
	color: var(--gold-light);
	margin-right: .2rem;
}

.countdown__units {
	display: flex;
	gap: .45rem;
}

.countdown__unit {
	display: grid;
	justify-items: center;
	min-width: 3.6rem;
	padding: .35rem .4rem .3rem;
	border: 3px solid var(--outline);
	border-radius: 12px;
	background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--orange));
	box-shadow: 0 4px 0 var(--orange-dark);
	color: var(--outline);
	line-height: 1;
}

.countdown__unit b {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.7rem;
	font-variant-numeric: tabular-nums;
}

.countdown__unit small {
	margin-top: .15rem;
	font-weight: 900;
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.countdown__date {
	margin: 0;
}

@media (max-width: 420px) {
	.countdown__unit {
		min-width: 3rem;
	}

	.countdown__unit b {
		font-size: 1.4rem;
	}
}

/* ==========================================================
   LOG IND MED DISCORD – profilknap i menuen og /profil
   ========================================================== */
.nav__user {
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}

.nav__user img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #5865f2;
}

.profile {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.profile__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 4px solid #5865f2;
	box-shadow: var(--shadow-block);
}

.profile__name {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.8rem;
	letter-spacing: .02em;
}

.profile__handle {
	margin: .1rem 0 0;
	color: var(--text-soft);
	font-weight: 700;
}

.profile__facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .4rem 1.25rem;
	margin: 0;
}

.profile__facts dt {
	font-weight: 800;
	color: var(--text-soft);
}

.profile__facts dd {
	margin: 0;
	font-weight: 700;
}

.profile__actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
}

.btn--discord {
	border-color: #2b3190;
	background: linear-gradient(180deg, #7983ff, #5865f2);
	box-shadow: 0 5px 0 #3c45a5;
	color: #fff;
	text-shadow: none;
}

.btn--discord:hover {
	box-shadow: 0 7px 0 #3c45a5;
}

.btn--ghost {
	border-color: rgb(255 255 255 / .35);
	background: rgb(255 255 255 / .08);
	box-shadow: none;
	color: #fff;
	text-shadow: none;
}

.btn--ghost:hover {
	box-shadow: none;
	background: rgb(255 255 255 / .16);
}

/* Discord-roller som små farvede mærker */
.role-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 2px 4px 2px 0;
	padding: 2px 9px 2px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--role) 18%, rgb(0 0 0 / .35));
	border: 1px solid color-mix(in srgb, var(--role) 55%, transparent);
	color: #fff;
	font-size: .8rem;
	font-weight: 800;
	line-height: 1.5;
	white-space: nowrap;
}

.role-chip::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--role);
}

/* ==========================================================
   NYHEDER (/nyheder) og kort ved events
   ========================================================== */
.news-card__date {
	margin: 0;
	color: var(--text-soft);
	font-weight: 800;
	font-size: .9rem;
}

.news-card__title {
	margin-top: .25rem !important;
}

.news-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}

.news-card__title a:hover {
	text-decoration: underline !important;
}

.news-card__events {
	display: grid;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
	font-size: .95rem;
}

.news-card__events li {
	padding: .45rem .75rem;
	border-radius: 10px;
	background: rgb(255 255 255 / .06);
}

.news-card__events i {
	color: var(--diamond);
}

.news-card__more {
	min-height: 44px;
	padding: .5rem 1.1rem;
}

.news-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 800;
}

/* Selve nyheden (HTML fra Quill) */
.news-article > * + * {
	margin-top: 1rem;
}

.news-article h2,
.news-article h3 {
	margin-bottom: 0;
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: .02em;
	color: var(--gold-light);
}

.news-article h2 { font-size: 1.6rem; }
.news-article h3 { font-size: 1.3rem; }

.news-article p,
.news-article li {
	color: var(--text-soft);
}

.news-article ul,
.news-article ol {
	padding-left: 1.4rem;
}

.news-article li + li {
	margin-top: .3rem;
}

.news-article blockquote {
	margin-inline: 0;
	padding: .75rem 1rem;
	border-left: 4px solid var(--gold);
	border-radius: 0 10px 10px 0;
	background: rgb(255 255 255 / .06);
	font-style: italic;
}

.news-article a {
	color: var(--diamond);
	font-weight: 800;
}

/* "Vis på kort" ved events med GPS-position */
.event__badge--past {
	background: var(--stone);
	color: #fff;
}

.event__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .6rem !important;
}

.event__map-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .8rem;
	border: 2px solid rgb(255 255 255 / .2);
	border-radius: 999px;
	background: rgb(255 255 255 / .08);
	color: #fff !important;
	font: 800 .85rem var(--font-body);
	text-decoration: none !important;
	cursor: pointer;
}

.event__map-btn:hover {
	background: rgb(255 255 255 / .16);
}

.event__map-btn i {
	color: var(--diamond);
}

.event__map {
	height: 260px;
	margin-top: .75rem;
	border-radius: 12px;
	overflow: hidden;
	border: 2px solid rgb(255 255 255 / .15);
}

.event__map[hidden] {
	display: none;
}

/* Kortnål (Leaflet) */
.map-pin {
	color: #e53935;
	font-size: 36px;
	line-height: 1;
	text-align: center;
	text-shadow: 0 2px 4px rgb(0 0 0 / .5);
}

/* Billeder på nyheder */
.news-card--image {
	padding-top: 0;
	overflow: hidden;
}

.news-card__image {
	display: block;
	margin: 0 calc(-1 * clamp(1.25rem, 4vw, 2.25rem)) 1rem;
}

.news-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	transition: transform .4s ease;
}

.news-card__image:hover img {
	transform: scale(1.03);
}

.news-article__image {
	display: block;
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: var(--shadow-block);
}

/* Partner uden logo: navnet vises i stedet */
.partner__name {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.8rem;
	letter-spacing: .02em;
}

/* ==========================================================
   PROFIL: Minecraft-konti (primær + smurf) og skin
   ========================================================== */
.profile__who {
	flex: 1;
	min-width: 0;
}

.profile__skin {
	flex: none;
	height: 150px;
	width: auto;
	image-rendering: pixelated;
	filter: drop-shadow(0 8px 10px rgb(0 0 0 / .45));
}

.mc-accounts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 1rem;
}

.mc-account {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: .5rem;
	padding: 1.25rem 1rem;
	border-radius: 14px;
	border: 2px solid rgb(92 225 230 / .25);
	background: rgb(255 255 255 / .05);
	text-align: center;
}

.mc-account--empty {
	border-style: dashed;
	border-color: rgb(255 255 255 / .18);
}

.mc-account > * {
	margin: 0 !important;
}

.mc-account__type {
	font-weight: 900;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--diamond) !important;
}

.mc-account__head {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	image-rendering: pixelated;
	box-shadow: 0 4px 0 rgb(0 0 0 / .35);
}

.mc-account__head--empty {
	display: grid;
	place-items: center;
	background: rgb(255 255 255 / .06);
	color: var(--text-soft);
	font-size: 1.4rem;
	box-shadow: none;
}

.mc-account__name {
	font-family: var(--font-display);
	font-size: 1.4rem;
	letter-spacing: .02em;
	color: #fff !important;
}

.mc-account__badge {
	font-size: .82rem;
	font-weight: 800;
	color: #4ade80 !important; /* altid grøn – også i Nether-temaet */
}

.mc-account__badge--new {
	color: var(--text-soft) !important;
}

.mc-account__remove {
	padding: .3rem .75rem;
	border: 2px solid rgb(255 255 255 / .2);
	border-radius: 999px;
	background: transparent;
	color: var(--text-soft);
	font: 800 .8rem var(--font-body);
	cursor: pointer;
}

.mc-account__remove:hover {
	border-color: #f87171;
	color: #ffd4d4;
}

.mc-account__form {
	display: grid;
	gap: .5rem;
	width: 100%;
}

.mc-account__form input {
	width: 100%;
	padding: .6rem .75rem;
	border: 2px solid rgb(255 255 255 / .2);
	border-radius: 10px;
	background: rgb(0 0 0 / .3);
	color: #fff;
	font: 700 1rem var(--font-body);
	text-align: center;
}

.mc-account__form input:focus {
	outline: none;
	border-color: var(--diamond);
}

.mc-account__btn {
	min-height: 44px;
	padding: .45rem 1rem;
}

.mc-swap {
	text-align: center;
}

.mc-note {
	color: var(--text-soft);
	text-align: center;
}

/* ==========================================================
   MINEDRIFT (/minedrift) – toplister fra Ore Tracker
   ========================================================== */
.mining-gem {
	display: inline-block;
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--ore);
	box-shadow: inset 0 0 0 2px rgb(0 0 0 / .25), 0 0 10px color-mix(in srgb, var(--ore) 60%, transparent);
	transform: rotate(45deg);
}

.mining-gem--big {
	width: 22px;
	height: 22px;
	margin-right: .35rem;
}

.mining-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}

.mining-tab {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .85rem;
	border-radius: 999px;
	border: 2px solid rgb(255 255 255 / .12);
	background: rgb(20 22 28 / .72);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	backdrop-filter: blur(6px);
	transition: border-color .15s, transform .15s;
}

.mining-tab small {
	padding: 0 .45rem;
	border-radius: 999px;
	background: rgb(255 255 255 / .1);
	color: var(--text-soft);
	font-size: .75rem;
}

.mining-tab:hover,
.mining-tab:focus-visible {
	border-color: var(--ore);
	transform: translateY(-2px);
}

.mining-tab.is-active {
	border-color: var(--ore);
	background: color-mix(in srgb, var(--ore) 22%, rgb(20 22 28 / .85));
}

.mining__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.mining__head .panel__title {
	margin: 0;
}

.mining-periods {
	display: flex;
	gap: 3px;
	padding: 3px;
	border-radius: 12px;
	background: rgb(0 0 0 / .3);
}

.mining-periods a {
	padding: .35rem .8rem;
	border-radius: 9px;
	color: var(--text-soft) !important;
	font-weight: 800 !important;
	font-size: .9rem;
	text-decoration: none !important;
}

.mining-periods a[aria-current="true"] {
	background: var(--ore);
	color: #10141a !important;
}

.mining__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1rem;
}

.mining__stat {
	display: grid;
	padding: 1rem 1.25rem;
	border-radius: 14px;
	background: rgb(255 255 255 / .06);
	border: 2px solid color-mix(in srgb, var(--ore) 35%, transparent);
}

.mining__stat strong {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
	line-height: 1.1;
	color: var(--ore);
	text-shadow: 0 3px 0 rgb(0 0 0 / .35);
}

.mining__stat span {
	color: var(--text-soft);
	font-weight: 700;
}

.mining__subtitle {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 1.5rem 0 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.4rem;
	letter-spacing: .02em;
}

.mining__subtitle i {
	color: var(--gold);
}

.mining-top {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mining-top__row {
	display: grid;
	grid-template-columns: 2rem 40px minmax(6rem, 12rem) 1fr auto;
	align-items: center;
	gap: .75rem;
	padding: .5rem .75rem;
	border-radius: 12px;
	background: rgb(255 255 255 / .05);
}

.mining-top__place {
	font-family: var(--font-display);
	font-size: 1.3rem;
	text-align: center;
	color: var(--text-soft);
}

.mining-top__row--1 .mining-top__place { color: #ffd23f; }
.mining-top__row--2 .mining-top__place { color: #d8dee6; }
.mining-top__row--3 .mining-top__place { color: #e09a5a; }
.mining-top__row--1 { background: rgb(255 210 63 / .1); }

.mining-top__head {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	image-rendering: pixelated;
}

.mining-top__name {
	overflow: hidden;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mining-top__bar {
	height: 10px;
	border-radius: 5px;
	background: rgb(0 0 0 / .3);
	overflow: hidden;
}

.mining-top__bar span {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: var(--ore);
}

.mining-top__num {
	min-width: 3.5rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.mining__note {
	color: var(--text-soft);
	font-size: .85rem;
}

@media (max-width: 560px) {
	.mining-top__row {
		grid-template-columns: 1.6rem 32px 1fr auto;
	}

	.mining-top__head {
		width: 32px;
		height: 32px;
	}

	.mining-top__bar {
		display: none;
	}
}

/* Periode-knapperne holder sig på én linje på mobil */
.mining-periods a {
	white-space: nowrap;
}

@media (max-width: 560px) {
	.mining-periods {
		width: 100%;
	}

	.mining-periods a {
		flex: 1;
		padding: .35rem .4rem;
		font-size: .8rem;
		text-align: center;
	}
}

/* "Hjemmeside bygget af …" nederst i footeren */
.footer__credit {
	margin-top: -.5rem;
	color: rgb(255 255 255 / .55);
	font-size: .8rem;
}

.footer__credit i {
	color: var(--diamond);
	margin-right: .25rem;
}

.footer__credit strong {
	color: #fff;
}

/* ==========================================================
   FEJLSIDER (404 og andre fejl) – templates/bundles/TwigBundle/Exception/
   ========================================================== */
.error-page code {
	padding: .1rem .4rem;
	border-radius: 6px;
	background: rgb(0 0 0 / .35);
	color: #fff;
	word-break: break-all;
}

.error-page__block {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	font-family: var(--font-display);
	font-size: clamp(4rem, 3rem + 6vw, 7rem);
	line-height: 1;
	color: var(--gold-light);
	text-shadow: 0 6px 0 var(--orange-dark);
}

/* "0" er en diamant-malmblok */
.error-page__ore {
	width: .9em;
	height: .9em;
	border-radius: 6px;
	border: 4px solid rgb(0 0 0 / .4);
	background:
		radial-gradient(circle at 30% 30%, #5ce1e6 0 12%, transparent 13%),
		radial-gradient(circle at 70% 40%, #5ce1e6 0 10%, transparent 11%),
		radial-gradient(circle at 45% 72%, #5ce1e6 0 11%, transparent 12%),
		#6b7078;
	box-shadow: 0 6px 0 rgb(0 0 0 / .35), 0 0 30px rgb(92 225 230 / .35);
	animation: error-bob 2.4s ease-in-out infinite;
}

.error-page__tnt {
	display: grid;
	place-items: center;
	width: 1.6em;
	height: 1.1em;
	border-radius: 8px;
	border: 4px solid rgb(0 0 0 / .4);
	background: repeating-linear-gradient(90deg, #d9372b 0 22%, #f2f2f2 22% 28%);
	color: #1a1a1a;
	font-size: .45em;
	text-shadow: none;
	animation: error-bob 1.2s ease-in-out infinite;
}

@keyframes error-bob {
	50% { transform: translateY(-8px) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
	.error-page__ore,
	.error-page__tnt {
		animation: none;
	}
}

.error-page__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}

.error-page__help {
	font-size: .9rem;
}

/* Online på Discord (forsiden – under serverens IP) */
.status--discord {
	margin-top: .6rem;
	background: rgb(88 101 242 / .85);
	color: #fff;
	font-size: .85rem;
	text-decoration: none;
	transition: background .15s;
}

.status--discord:hover {
	background: #5865f2;
}

.status--discord .status__dot {
	background: #4ade80;
}

/* Voice på Discord (nederst på forsiden) – kanalerne og hvem der er i dem */
.voice__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: .8rem;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Kolonnerne (DiscordOnline::columns): kanalerne i en kolonne står under hinanden. Hygge og Hoppeborgen fylder hele
   kolonnens højde – og de sidste (Streaming og AFK) deler højden mellem sig */
.voice__col {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.voice__col > .voice__channel--full,
.voice__col > .voice__channel:not([style]),
.voice__col > .voice__channel:last-child {
	flex: 1; /* (den nederste i hver kolonne fylder resten – så alle kolonner er lige høje) */
}

/* pladser der holdes fri (--slots: Hygge 13, "4 Øjne" 4 …): en række = avataren (24px) + mellemrummet */
.voice__channel[style] .voice__members,
.voice__channel[style] .voice__empty {
	min-height: calc(var(--slots) * 24px + (var(--slots) - 1) * .2rem);
}

.voice__members {
	align-content: start; /* (navnene står øverst – ikke spredt ud over de fri pladser) */
}

/* flere end der er pladser til: rul inde i kanalen (så listen – og siden – ikke bliver højere) */
.voice__channel[style] .voice__members {
	max-height: calc(var(--slots) * 24px + (var(--slots) - 1) * .2rem + 4px);
	overflow-y: auto;
	padding-bottom: 4px; /* (statusprikken på den nederste avatar skæres ikke af) */
	scrollbar-width: thin;
	scrollbar-color: rgb(88 101 242 / .7) transparent;
}

.voice__channel {
	padding: .75rem .9rem;
	border-radius: 12px;
	background: rgb(0 0 0 / .35);
	border: 2px solid rgb(255 255 255 / .06);
}

.voice__channel.is-active {
	border-color: rgb(88 101 242 / .7);
	background: rgb(30 33 70 / .6);
}

.voice__name {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	margin: 0 0 .35rem;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.voice__name small {
	flex: none; /* (tallet brydes ikke, når kanalens navn er langt) */
	color: #4ade80;
}

.voice__members {
	display: grid;
	gap: .2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}

.voice__member {
	--status: #23a55a;
	display: flex;
	align-items: center;
	gap: .45rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.voice__member--idle { --status: #f0b232; }
.voice__member--dnd { --status: #f23f43; }

/* avatar med statusprik i hjørnet (grøn = online, gul = væk, rød = forstyr ikke) */
.voice__avatar {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #5865f2;
	color: #fff;
	font-size: .7rem;
	font-weight: 800;
}

.voice__avatar img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

.voice__avatar::after {
	content: "";
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--status);
	box-shadow: 0 0 0 2px #1e2146;
}

.voice__member .fa-microphone-slash {
	margin-left: auto;
	color: #f87171;
	font-size: .75rem;
}

.voice__empty {
	margin: 0;
	color: rgb(255 255 255 / .5);
	font-size: .85rem;
}

.voice__join {
	display: table;
	margin: 1.4rem auto 0;
	padding: .65rem 1.3rem;
	border-radius: 999px;
	background: #5865f2;
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 4px 0 #3c45a5;
}

.voice__join:hover {
	background: #4752c4;
}

/* Profil: "Vis mig i baggrunden" (til/fra) */
.world-toggle {
	margin: .8rem 0 .4rem;
}

/* Kommentarer på nyhederne (templates/pages/news_show.html.twig) */
.comments__list { display: grid; gap: .9rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.comment { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 12px; background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .06); }
.comment__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.comment__main { flex: 1; min-width: 0; }
.comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin: 0 0 .2rem; }
.comment__head time { color: rgb(255 255 255 / .55); font-size: .85rem; }
.comment__body { margin: 0; overflow-wrap: anywhere; white-space: normal; }
.comment__delete { margin: 0; }
.comment__delete button { padding: .35rem .5rem; border: 0; border-radius: 8px; background: transparent; color: rgb(255 255 255 / .5); cursor: pointer; }
.comment__delete button:hover, .comment__delete button:focus-visible { color: #ff8a86; background: rgb(217 83 79 / .15); }
.comments__empty { color: rgb(255 255 255 / .6); }
.comments__write { display: flex; gap: .8rem; align-items: flex-start; }
.comments__write textarea { flex: 1; min-width: 0; min-height: 5.5rem; padding: .75rem .9rem; border-radius: 12px; border: 2px solid rgb(255 255 255 / .12); background: rgb(0 0 0 / .35); color: inherit; font: inherit; resize: vertical; }
.comments__write textarea:focus { outline: none; border-color: #5865f2; }
.comments__actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .6rem 0 0 calc(40px + .8rem); flex-wrap: wrap; }
.comments__actions small { color: rgb(255 255 255 / .55); }
.comments__login { margin: 0; }
.panel__title small { font-size: .7em; opacity: .7; }

/* Seneste nyt på forsiden (templates/partials/_home_news.html.twig) – øverst, når den er højst et døgn gammel */
.home-news { padding: clamp(1.75rem, 4vw, 2.75rem) 0; }
.home-news .section__title { margin-bottom: 1rem; }
.home-news__card { position: relative; display: grid; gap: 1rem; margin: 0; align-content: start; }
/* billedet i venstre side af kortet – helt ud til kanterne (på mobil øverst) */
.home-news__card--image { grid-template-columns: minmax(0, 42%) 1fr; align-items: stretch; column-gap: clamp(1rem, 3vw, 1.75rem); }
.home-news__image { display: block; margin: calc(-1 * clamp(1.25rem, 4vw, 2.25rem)) 0 calc(-1 * clamp(1.25rem, 4vw, 2.25rem)) calc(-1 * clamp(1.25rem, 4vw, 2.25rem)); border-radius: var(--radius) 0 0 var(--radius); overflow: hidden; min-height: 200px; }
.home-news__card--image .home-news__text { align-self: center; padding-right: 3.5rem; } /* (plads til datofanen) */
@media (max-width: 640px) {
	.home-news__card--image { grid-template-columns: 1fr; }
	.home-news__image { margin: calc(-1 * clamp(1.25rem, 4vw, 2.25rem)) calc(-1 * clamp(1.25rem, 4vw, 2.25rem)) 0; border-radius: var(--radius) var(--radius) 0 0; min-height: 0; }
	.home-news__card--image .home-news__text { padding-right: 0; }
}
.home-news__image img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease; }
.home-news__new { margin: 0 0 .35rem; }
.home-news__card:not(.home-news__card--image) .home-news__text { padding-right: 4.5rem; } /* (plads til datofanen) */
.home-news__text > p:last-child { margin-bottom: 0; }
.home-news__badge { display: inline-block; margin-right: .4rem; padding: .1rem .55rem; border-radius: 999px; background: #ffcc33; color: #3b2a00; font-weight: 900; text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; animation: home-news-pulse 2s ease-in-out infinite; }
.home-news--fresh .home-news__card { border-color: rgb(255 204 51 / .55); box-shadow: 0 0 0 1px rgb(255 204 51 / .25), 0 12px 30px rgb(0 0 0 / .35); }
@keyframes home-news-pulse { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .home-news__badge { animation: none; } }
.home-news__list { display: grid; gap: 1rem; }
.home-news__list .home-news__card { align-content: start; }
.home-news__all { margin: 1rem 0 0; text-align: center; font-weight: 800; }

/* Nyheden (templates/pages/news_show.html.twig): billedet øverst i artiklen – helt (ikke beskåret) – og teksten under */
.wrap--news { width: min(960px, 100% - 2rem); }
.news-article { position: relative; overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
.news-article__body img, .news-article__body iframe, .news-article__body video { max-width: 100%; height: auto; }
.news-article__body pre, .news-article__body code { white-space: pre-wrap; }
.news-article__body > :first-child { margin-top: 0; }
.news-article__body > :last-child { margin-bottom: 0; }
/* billedet går helt ud til artiklens kanter foroven */
.news-article__hero {
	display: block;
	margin: calc(-1 * clamp(1.25rem, 4vw, 2.25rem)) calc(-1 * clamp(1.25rem, 4vw, 2.25rem)) clamp(1rem, 3vw, 1.75rem);
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
	background: rgb(0 0 0 / .35);
}
.news-article__hero img { display: block; width: 100%; height: auto; max-height: min(75vh, 720px); object-fit: contain; }
/* uden billede: plads til datofanen i højre side */
.news-article:not(.news-article--image) .news-article__body { padding-right: 4.75rem; }

/* Datoen som en fane (bogmærke) i højre side af nyheden – på billedet, ellers på teksten */
.news-date-tab {
	position: absolute;
	top: -8px;
	right: clamp(1rem, 3vw, 1.75rem);
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: .05rem;
	min-width: 4.25rem;
	padding: .7rem .6rem 1.35rem;
	background: linear-gradient(180deg, #ffd34d, #f5a623);
	color: #3b2a00;
	line-height: 1;
	text-align: center;
	/* (V-hak forneden som et bogmærke) */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - .7rem), 0 100%);
	filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45));
}
/* den lille fold øverst, hvor fanen går ind bag kanten */
.news-date-tab::before {
	content: "";
	position: absolute;
	top: 0;
	left: -8px;
	border: 4px solid transparent;
	border-bottom-color: #a86b00;
	border-right-color: #a86b00;
}
.news-date-tab b { font: 2rem/1 "Lilita One", sans-serif; }
.news-date-tab span { font-weight: 900; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }
.news-date-tab small { font-weight: 800; font-size: .7rem; opacity: .75; }

/* Quill-formateringen i nyheden – som i editoren i admin: afsnit lige under hinanden, tomme linjer bevares,
   overskrifter (H2/H3), fed, kursiv, understreget, gennemstreget, lister, citater og links */
.news-article__body p { margin: 0; }
.news-article__body p:empty,
.news-article__body p:has(> br:only-child) { min-height: 1.5em; } /* (en tom linje fra Quill: <p></p>) */
.news-article__body h2, .news-article__body h3 { margin: .9em 0 .35em; line-height: 1.2; }
.news-article__body > h2:first-child, .news-article__body > h3:first-child { margin-top: 0; }
.news-article__body strong, .news-article__body b { font-weight: 900; color: var(--text); }
.news-article__body em, .news-article__body i { font-style: italic; }
.news-article__body u { text-decoration: underline; text-underline-offset: .15em; }
.news-article__body s { text-decoration: line-through; opacity: .8; }
.news-article__body ul, .news-article__body ol { margin: .4em 0; }
.news-article__body ul { list-style: disc; }
.news-article__body ol { list-style: decimal; }
.news-article__body blockquote { margin: .6em 0; }
.news-article__body a { overflow-wrap: anywhere; }
/* den lille datofane på forsidens kort (når der er flere nyheder) */
.news-date-tab--small { min-width: 3.4rem; padding: .5rem .45rem 1.1rem; }
.news-date-tab--small b { font-size: 1.5rem; }
.news-date-tab--small span { font-size: .7rem; }
.news-date-tab--small small { font-size: .62rem; }

/* Overskriften på forsidens nyhedskort: hvid (ikke guld) – roligere ved siden af den gule datofane og "Nyt!" */
.home-news .news-card__title {
	margin: 0 0 .45rem;
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem);
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 2px 0 rgb(0 0 0 / .45);
}
.home-news .news-card__title a { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 3px no-repeat; transition: background-size .25s ease, color .25s ease; }
.home-news .news-card__title a:hover, .home-news .news-card__title a:focus-visible { color: var(--gold-light) !important; text-decoration: none !important; background-size: 100% 3px; }
.home-news .home-news__text > p:not([class]) { color: var(--text-soft); margin: 0 0 .9rem; }

/* Nyhedens titel over kortet – samme skrift som sidens overskrift ("Nyheder" i toppen) */
.news-article__title {
	margin: 0 0 1rem;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem);
	line-height: 1.08;
	letter-spacing: .02em;
	color: var(--gold);
	background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 45%, var(--orange) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 2px var(--outline);
	paint-order: stroke fill;
	filter: drop-shadow(0 4px 0 var(--orange-dark)) drop-shadow(0 8px 8px rgb(0 0 0 / .3));
	overflow-wrap: anywhere;
}
.news-article:not(.news-article--image) .news-article__body { padding-right: 4.75rem; }

/* Hele nyhedskortet på forsiden kan klikkes: titlens link dækker kortet. "Læs mere" er bare tekst */
.home-news__card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.home-news__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.home-news__link:focus-visible { outline: none; }
.home-news__card:has(.home-news__link:focus-visible) { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.home-news__card:hover { transform: translateY(-3px); border-color: rgb(255 204 51 / .55); box-shadow: 0 14px 30px rgb(0 0 0 / .4); }
.home-news__card:hover .home-news__image img { transform: scale(1.03); }
.home-news__card:hover .home-news__more i { transform: translateX(4px); }
.home-news .news-date-tab { z-index: 2; pointer-events: none; }
.home-news__more { margin: 0; color: var(--gold-light); font-weight: 900; }
.home-news__more i { margin-left: .3rem; transition: transform .2s ease; }
@media (prefers-reduced-motion: reduce) { .home-news__card, .home-news__card:hover { transform: none; } }
.home-news__card:hover .news-card__title a { color: var(--gold-light) !important; background-size: 100% 3px; }

/* "Nyt"-fanen på forsidens kort (højst et døgn gamle) – samme form som datofanen, rød, i venstre hjørne */
.news-new-tab {
	right: auto;
	left: clamp(1rem, 3vw, 1.75rem);
	margin: 0; /* (ikke den almindelige afstand mellem kortets dele) */
	align-content: center;
	min-height: 4.6rem;
	background: linear-gradient(180deg, #ff5a52, #c9221b);
	color: #fff;
	font: 1.35rem/1 "Lilita One", sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-shadow: 0 2px 0 rgb(0 0 0 / .3);
	animation: news-new-swing 2.4s ease-in-out infinite;
	transform-origin: 50% 0;
}
/* (folden øverst – i venstre hjørne vender den den anden vej) */
.news-new-tab::before { left: auto; right: -8px; border-bottom-color: #7a1410; border-right-color: transparent; border-left-color: #7a1410; }
@keyframes news-new-swing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .news-new-tab { animation: none; } }
/* (titlen skal holde sig fri af begge faner) */
.home-news--fresh .home-news__card:not(.home-news__card--image) .home-news__text { padding-left: 4.75rem; }