:root {
	--bg: #0c0b0a;
	--bg-soft: #161311;
	--ink: #f3eadc;
	--muted: #9c9080;
	--gold: #c6a36a;
	--gold-dim: rgba(198, 163, 106, 0.28);
	--line: rgba(243, 234, 220, 0.1);
	--card: #171411;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	min-height: 100%;
}

body {
	font-family: Outfit, 'Segoe UI', sans-serif;
	background: var(--bg);
	color: var(--ink);
	line-height: 1.5;
}

.korn {
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: 2;
	opacity: 0.09;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

img {
	border-radius: 18px;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(
			ellipse 80% 55% at 50% -10%,
			rgba(198, 163, 106, 0.14),
			transparent 55%
		),
		radial-gradient(
			ellipse 50% 40% at 80% 110%,
			rgba(90, 60, 30, 0.25),
			transparent 60%
		);
	z-index: 0;
}

.ramme {
	position: relative;
	z-index: 1;
	width: min(720px, calc(100% - 32px));
	margin: 0 auto;
	padding: 24px 0 96px;
}

.sticky-hode {
	position: sticky;
	top: 0;
	z-index: 5;
	margin: 0 -16px;
	padding: 8px 16px 20px;
}

body.has-avslorte .sticky-hode {
	/* background: linear-gradient(180deg, #0c0b0a 78%, rgba(12, 11, 10, 0)); */
}

.topp {
	text-align: center;
	margin-bottom: 12px;
	padding-top: 32px;
}

.merke {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.82rem;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--gold);
}

.undertittel {
	margin-top: 14px;
	color: var(--muted);
	font-weight: 300;
	font-size: 1rem;
}

.nedtelling {
	text-align: center;
	padding: 28px 16px 8px;
}

.nedtelling-etikett {
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 22px;
}

.tid {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 8px;
}

.tid-enhet {
	min-width: 72px;
}

.tid-tall {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: clamp(2rem, 8vw, 3.4rem);
	font-weight: 500;
	line-height: 1;
	color: var(--gold);
	letter-spacing: 0.04em;
}

.tid-navn {
	display: block;
	margin-top: 10px;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.tid-skille {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: clamp(1.6rem, 6vw, 2.6rem);
	color: var(--gold-dim);
	padding-top: 4px;
}

.tid-enhet[hidden],
.tid-skille[hidden] {
	display: none;
}

.avslorte {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 48px;
}

.kort {
	background: #1c1814;
	border: 1px solid rgba(198, 163, 106, 0.22);
	border-left: 3px solid var(--gold);
	border-radius: 18px;
	padding: 28px 26px;
	animation: vis 700ms ease both;
}

.kort-meta {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--gold);
	margin-bottom: 12px;
}

.kort-innhold {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(1.35rem, 4vw, 1.85rem);
	font-weight: 500;
	line-height: 1.35;
}

.kort-innhold a {
	color: var(--gold);
	text-underline-offset: 0.22em;
}

.kort-spill-igjen {
	margin-top: 16px;
	font-family: Outfit, 'Segoe UI', sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
}

.stor-dato {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(4.2rem, 18vw, 8rem);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--ink);
	text-align: center;
}

.ferdig {
	margin-top: 48px;
	text-align: center;
	color: var(--muted);
	font-weight: 300;
}

@keyframes vis {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 520px) {
	.ramme {
		padding-top: 36px;
	}

	.tid {
		gap: 4px;
	}

	.tid-enhet {
		min-width: 58px;
	}
}

.forhandsvisning-merke {
	text-align: center;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	border: 1px solid var(--gold-dim);
	border-radius: 999px;
	padding: 8px 14px;
	margin: 8px auto 0;
	width: fit-content;
	max-width: 100%;
}

.matrix-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 32px 20px 48px;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.8s ease;
}

.matrix-overlay.synlig {
	opacity: 1;
	pointer-events: auto;
}

body:has(.matrix-overlay.synlig) {
	overflow: hidden;
}

.matrix-overlay .matrix {
	width: min(640px, 100%);
	color: #6aff6a;
	font-family: 'Courier New', Courier, ui-monospace, monospace;
	font-size: clamp(1.15rem, 3.6vw, 1.55rem);
	line-height: 1.9;
	letter-spacing: 0.02em;
	text-shadow: 0 0 8px rgba(80, 255, 80, 0.55);
	visibility: hidden;
}

.matrix-overlay .matrix.skriver {
	visibility: visible;
}

.matrix-overlay .matrix span {
	display: block;
	min-height: 1.9em;
	white-space: pre-wrap;
}

.matrix-overlay .matrix span.matrix-siste {
	margin-top: 1.9em;
}

.matrix-kursor {
	display: inline-block;
	width: 0.65em;
	height: 1.05em;
	margin-left: 1px;
	background: #6aff6a;
	box-shadow: 0 0 8px rgba(80, 255, 80, 0.8);
	vertical-align: -0.15em;
	animation: matrix-blink 1.05s step-end infinite;
}

@keyframes matrix-blink {
	50% {
		background: transparent;
		box-shadow: none;
	}
}

.matrix-kanin {
	display: block;
	width: min(420px, 100%);
	border-radius: 0;
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 1.2s ease,
		transform 1.2s ease;
}

.matrix-kanin.synlig {
	opacity: 1;
	transform: none;
}

.matrix-hold {
	font-family: 'Courier New', Courier, ui-monospace, monospace;
	font-size: clamp(1.6rem, 6vw, 2.6rem);
	letter-spacing: 0.12em;
	color: #6aff6a;
	text-shadow: 0 0 10px rgba(80, 255, 80, 0.6);
}

.matrix-hold[hidden],
.matrix-kanin[hidden] {
	display: none;
}