:root {
	--spiller-purple-dark: #220c2e;
	--spiller-purple: #7423ad;
	--spiller-purple-light: #b665e8;
	--spiller-ink: #211b25;
	--spiller-muted: #746c79;
	--spiller-surface: #f8f3fc;
}

.spiller-page {
	background: var(--spiller-surface);
	color: var(--spiller-ink);
}

.spiller-page .body,
.spiller-page .main {
	background: var(--spiller-surface);
}

/* =========================================================
   FULLSCREEN HERO
========================================================= */

.spiller-hero {
	position: relative;
	height: 100svh;
	min-height: 680px;
	overflow: hidden;
	isolation: isolate;
	background: var(--spiller-purple-dark);
}

.spiller-hero__background {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(circle at 76% 36%, rgba(187, 79, 255, 0.5) 0%, rgba(129, 35, 181, 0.2) 27%, transparent 51%),
		radial-gradient(circle at 8% 88%, rgba(125, 36, 166, 0.26), transparent 39%),
		linear-gradient(135deg, #180820 0%, #2a0d37 41%, #4b1169 72%, #210a2e 100%);
}

.spiller-hero__splash {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
}

.spiller-hero__splash--back {
	z-index: 2;
	opacity: 0.42;
	mix-blend-mode: screen;
}

.spiller-hero__splash--front {
	z-index: 6;
	opacity: 0.32;
	mix-blend-mode: screen;
}

.spiller-hero__noise {
	position: absolute;
	inset: 0;
	z-index: 8;
	background: url("../img/stavanger/profil/noise_zindex14.webp") center / cover no-repeat;
	mix-blend-mode: soft-light;
	opacity: 0.13;
	pointer-events: none;
}

.spiller-hero__container {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	height: 100%;
}

.spiller-hero__copy {
	position: relative;
	z-index: 10;
	width: 58%;
	padding-top: clamp(90px, 12vh, 145px);
}

.spiller-hero__kicker,
.spiller-detail__kicker {
	display: block;
	margin-bottom: 13px;
	color: #d7a7f6;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.spiller-hero h1 {
	max-width: 720px;
	margin: 0;
	color: #fff;
	font-size: clamp(4.2rem, 8.4vw, 8.8rem);
	font-weight: 800;
	line-height: 0.84;
	letter-spacing: -0.065em;
	text-wrap: balance;
	text-shadow: 0 16px 38px rgba(12, 2, 18, 0.28);
}

.spiller-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 34px;
}

.spiller-hero__facts span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 13px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.67rem;
	font-weight: 700;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
}

.spiller-hero__facts strong {
	color: #fff;
}

.spiller-hero__team-link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-top: 23px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
}

.spiller-hero__team-link i {
	font-size: 0.72rem;
	transition: transform 180ms ease;
}

.spiller-hero__team-link:hover,
.spiller-hero__team-link:focus-visible {
	color: #fff;
	text-decoration: none;
}

.spiller-hero__team-link:hover i,
.spiller-hero__team-link:focus-visible i {
	transform: translateX(4px);
}

.spiller-hero__visual {
	position: absolute;
	z-index: 4;
	top: clamp(88px, 11vh, 135px);
	right: -6%;
	bottom: -1%;
	width: 62%;
	pointer-events: none;
}

.spiller-hero__glow {
	position: absolute;
	top: 5%;
	right: 8%;
	bottom: 5%;
	left: 17%;
	border-radius: 50%;
	background: rgba(210, 130, 255, 0.23);
	filter: blur(58px);
}

.spiller-hero__person {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 0;
	display: block;
	width: 112%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center bottom;
	transform: translateX(-50%);
	filter: drop-shadow(0 27px 30px rgba(12, 2, 18, 0.38));
}

.spiller-hero__number {
	position: absolute;
	z-index: 3;
	right: 1%;
	bottom: -5%;
	color: rgba(255, 255, 255, 0.065);
	font-size: clamp(20rem, 39vw, 40rem);
	font-weight: 900;
	line-height: 0.72;
	letter-spacing: -0.1em;
	pointer-events: none;
}

.spiller-hero__scroll {
	position: absolute;
	z-index: 12;
	left: 50%;
	bottom: 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transform: translateX(-50%);
}

.spiller-hero__scroll:hover,
.spiller-hero__scroll:focus-visible {
	color: #fff;
	text-decoration: none;
}

/* =========================================================
   OM SPILLEREN
========================================================= */

.spiller-detail {
	padding: 86px 0 88px;
	background:
		linear-gradient(180deg, #fff 0%, #fbf8fd 150px, var(--spiller-surface) 100%);
	scroll-margin-top: 20px;
}

.spiller-detail__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 34px;
}

.spiller-detail__heading h2 {
	margin: 0;
	color: var(--spiller-ink);
	font-size: clamp(2.7rem, 5vw, 4.8rem);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.055em;
}

.spiller-detail__kicker {
	color: #7d2ab4;
}

.spiller-detail__team {
	display: inline-flex;
	padding: 9px 13px;
	border-radius: 999px;
	background: #eee2f8;
	color: #7626a9;
	font-size: 0.7rem;
	font-weight: 800;
}

.spiller-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(380px, 0.72fr);
	align-items: stretch;
	gap: clamp(34px, 6vw, 88px);
}

.spiller-detail__copy {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: clamp(12px, 1.7vw, 26px) 0 0;
}

.spiller-detail__copy h3 {
	margin: 0 0 24px;
	color: var(--spiller-ink);
	font-size: clamp(2.2rem, 4vw, 4rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.05em;
}

.spiller-detail__description,
.spiller-detail__empty {
	max-width: 660px;
	margin: 0;
	color: var(--spiller-muted);
	font-size: clamp(1rem, 1.35vw, 1.16rem);
	line-height: 1.78;
}

.spiller-detail__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	max-width: 600px;
	margin-top: 34px;
}

.spiller-detail__facts div {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 17px 18px;
	border: 1px solid #e6d9ec;
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 12px 28px rgba(53, 22, 69, 0.06);
}

.spiller-detail__facts span {
	color: #8a7f90;
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.spiller-detail__facts strong {
	color: #4b1d61;
	font-size: 1rem;
	font-weight: 800;
}

.spiller-detail__back {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	margin-top: 30px;
	color: #7626a9;
	font-size: 0.82rem;
	font-weight: 800;
	text-decoration: none;
}

.spiller-detail__back i {
	font-size: 0.72rem;
	transition: transform 180ms ease;
}

.spiller-detail__back:hover,
.spiller-detail__back:focus-visible {
	color: #4d126c;
	text-decoration: none;
}

.spiller-detail__back:hover i,
.spiller-detail__back:focus-visible i {
	transform: translateX(-4px);
}

/* Full spillerfigur under heroen. */
.spiller-showcase {
	--spiller-person-width: 118%;
	--spiller-person-height: 106%;
	--spiller-person-bottom: -1%;
	--spiller-mask-number-right: 6.78%;
	--spiller-mask-number-bottom: -2.83%;
	position: relative;
	min-height: 680px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 27px;
	isolation: isolate;
	background:
		radial-gradient(circle at 50% 30%, rgba(211, 143, 255, 0.42), transparent 38%),
		linear-gradient(150deg, #2b0e39 0%, #6a1b94 60%, #2b0d3c 100%);
	box-shadow: 0 30px 65px rgba(56, 20, 75, 0.2);
}

.spiller-showcase-column {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 22px;
}

.spiller-showcase__glow {
	position: absolute;
	top: 13%;
	right: 8%;
	bottom: 8%;
	left: 8%;
	border-radius: 50%;
	background: rgba(218, 151, 255, 0.22);
	filter: blur(52px);
}

.spiller-showcase__person {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: var(--spiller-person-bottom);
	display: block;
	width: var(--spiller-person-width);
	height: var(--spiller-person-height);
	max-width: none;
	object-fit: contain;
	object-position: center bottom;
	transform: translateX(-50%);
	filter: drop-shadow(0 23px 28px rgba(18, 3, 28, 0.35));
}

.spiller-download {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 9px 13px;
	text-align: center;
}

.spiller-download__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 18px;
	border: 0;
	border-radius: 12px;
	background: #7626a9;
	box-shadow: 0 12px 28px rgba(85, 24, 117, 0.18);
	color: #fff;
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 800;
	cursor: pointer;
	transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.spiller-download__button:hover,
.spiller-download__button:focus-visible {
	background: #581878;
	box-shadow: 0 15px 32px rgba(85, 24, 117, 0.24);
	color: #fff;
	transform: translateY(-2px);
}

.spiller-download__button:disabled {
	opacity: 0.7;
	cursor: wait;
	transform: none;
}

.spiller-download__meta,
.spiller-download__status {
	color: #8a7f90;
	font-size: 0.67rem;
	font-weight: 700;
}

.spiller-download__status {
	flex-basis: 100%;
	min-height: 1em;
}

.spiller-showcase__number {
	position: absolute;
	right: -1%;
	bottom: -4%;
	font-size: clamp(13rem, 23vw, 22rem);
	font-weight: 900;
	line-height: 0.72;
	letter-spacing: -0.1em;
	pointer-events: none;
}

.spiller-showcase__number--back {
	z-index: 2;
	color: rgba(255, 255, 255, 0.08);
}

.spiller-showcase__number--front {
	right: var(--spiller-mask-number-right);
	bottom: var(--spiller-mask-number-bottom);
	color: rgba(255, 255, 255, 0.05);
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.10);
	text-stroke: 2px rgba(255, 255, 255, 0.10);
}

.spiller-showcase__number-mask {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: var(--spiller-person-bottom);
	width: var(--spiller-person-width);
	height: var(--spiller-person-height);
	transform: translateX(-50%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-composite: source-over;
	-webkit-mask-type: alpha;
	mask-type: alpha;
	pointer-events: none;
}

.spiller-showcase__noise {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: url("../img/stavanger/profil/noise_zindex14.webp") center / cover no-repeat;
	mix-blend-mode: soft-light;
	opacity: 0.12;
	pointer-events: none;
}

/* =========================================================
   IKKE FUNNET / SPONSOR
========================================================= */

.spiller-not-found {
	display: flex;
	align-items: center;
	min-height: 72vh;
	padding: 140px 0 80px;
	background: linear-gradient(180deg, #fff, #f8f3fc);
}

.spiller-not-found__card {
	max-width: 720px;
	margin: 0 auto;
	padding: 50px;
	border: 1px solid #e9dfed;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(46, 22, 57, 0.1);
	text-align: center;
}

.spiller-not-found__card h1 {
	margin: 0;
	font-size: clamp(2.3rem, 5vw, 4.6rem);
	font-weight: 800;
	letter-spacing: -0.05em;
}

.spiller-not-found__card p {
	margin: 20px 0 28px;
	color: var(--spiller-muted);
}

.spiller-not-found__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 17px;
	border-radius: 11px;
	background: #7626a9;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 800;
	text-decoration: none;
}

.spiller-not-found__link:hover,
.spiller-not-found__link:focus-visible {
	background: #571677;
	color: #fff;
	text-decoration: none;
}

.spiller-sponsors {
	background: #f8f3fc;
}

.spiller-page #footer {
	margin-top: 0;
}

/* =========================================================
   RESPONSIVT
========================================================= */

@media (max-width: 1199px) {
	.spiller-hero__copy {
		width: 62%;
	}

	.spiller-hero__visual {
		right: -10%;
		width: 67%;
	}

	.spiller-detail__grid {
		grid-template-columns: minmax(0, 1fr) minmax(350px, 0.78fr);
		gap: 36px;
	}

	.spiller-detail__copy {
		padding-top: 4px;
	}

	.spiller-showcase {
		--spiller-person-width: 124%;
		--spiller-person-height: 109%;
		--spiller-mask-number-right: 8.87%;
		--spiller-mask-number-bottom: -2.75%;
		min-height: 590px;
	}

	.spiller-showcase__person {
		width: var(--spiller-person-width);
		height: var(--spiller-person-height);
	}
}

@media (max-width: 991px) {
	.spiller-hero {
		min-height: 720px;
	}

	.spiller-hero__copy {
		width: 65%;
	}

	.spiller-hero h1 {
		font-size: clamp(3.8rem, 9vw, 6.5rem);
	}

	.spiller-hero__visual {
		top: 115px;
		right: -16%;
		width: 76%;
	}

	.spiller-detail__grid {
		grid-template-columns: 1fr;
	}

	.spiller-detail__copy {
		max-width: 760px;
		padding: 0;
	}

	.spiller-showcase {
		width: min(100%, 590px);
		min-height: 720px;
		margin: 0 auto;
	}

	.spiller-showcase-column {
		width: min(100%, 590px);
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	.spiller-hero {
		height: 100svh;
		min-height: 700px;
	}

	.spiller-hero__container {
		align-items: flex-start;
	}

	.spiller-hero__copy {
		width: 100%;
		padding-top: clamp(120px, 17vh, 160px);
	}

	.spiller-hero h1 {
		max-width: 92%;
		font-size: clamp(3.25rem, 15vw, 5.4rem);
		line-height: 0.86;
	}

	.spiller-hero__facts {
		gap: 7px;
		margin-top: 22px;
	}

	.spiller-hero__facts span {
		padding: 7px 10px;
		font-size: 0.6rem;
	}

	.spiller-hero__team-link {
		margin-top: 15px;
	}

	.spiller-hero__visual {
		top: 34%;
		right: -15%;
		bottom: -1%;
		width: 130%;
	}

	.spiller-hero__person {
		width: 108%;
		height: 100%;
	}

	.spiller-hero__number {
		right: -5%;
		bottom: -2%;
		font-size: clamp(15rem, 82vw, 25rem);
	}

	.spiller-hero__scroll {
		display: none;
	}

	.spiller-detail {
		padding: 64px 0 72px;
	}

	.spiller-detail__heading {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: 32px;
	}

	.spiller-detail__heading h2 {
		font-size: clamp(2.65rem, 13vw, 4rem);
	}

	.spiller-detail__copy h3 {
		font-size: clamp(2.1rem, 10vw, 3.2rem);
	}

	.spiller-detail__facts {
		grid-template-columns: 1fr;
		margin-top: 27px;
	}

	.spiller-detail__back {
		margin-top: 26px;
	}

	.spiller-showcase {
		--spiller-person-width: 122%;
		--spiller-person-height: 104%;
		--spiller-mask-number-right: 8.20%;
		--spiller-mask-number-bottom: -2.88%;
		min-height: 590px;
		border-radius: 20px;
	}

	.spiller-showcase__person {
		width: var(--spiller-person-width);
		height: var(--spiller-person-height);
	}

	.spiller-download {
		align-items: stretch;
		flex-direction: column;
	}

	.spiller-download__button {
		width: 100%;
	}

	.spiller-showcase__number {
		font-size: clamp(10rem, 55vw, 16rem);
	}

	.spiller-not-found {
		padding: 120px 0 60px;
	}

	.spiller-not-found__card {
		padding: 34px 24px;
	}
}

@media (max-width: 420px) {
	.spiller-hero {
		min-height: 680px;
	}

	.spiller-hero__copy {
		padding-top: 116px;
	}

	.spiller-hero__visual {
		top: 36%;
		right: -20%;
		width: 140%;
	}

	.spiller-showcase {
		min-height: 535px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spiller-hero__team-link i,
	.spiller-detail__back i,
	.spiller-download__button {
		transition: none;
	}
}