/**
 * Lebensgefühl-Finder — game front end.
 *
 * Everything is scoped to .eh-lgf so the game cannot be knocked over by a
 * theme, and no colour appears outside the token block below.
 */

/*
 * Design tokens. Declared on the game container AND on a page that carries the
 * game, so the full screen background can be painted from the same tokens —
 * there is still no colour value outside this block.
 */
.eh-lgf,
body.eh-lgf-page,
html.eh-lgf-embed-root {
	/* Elbe-Haus CI */
	--lgf-green: #76b729;
	--lgf-blue: #012549;
	--lgf-cream: #faf7f0;
	--lgf-border: #e2ddd2;
	--lgf-ink: #2e3440;
	--lgf-white: #ffffff;
	--lgf-green-soft: rgba(118, 183, 41, 0.12);
	--lgf-shadow: rgba(1, 37, 73, 0.08);
	--lgf-shadow-strong: rgba(1, 37, 73, 0.14);

	--lgf-radius: 12px;
	--lgf-radius-sm: 8px;

	/* Spacing scale */
	--lgf-space-1: 4px;
	--lgf-space-2: 8px;
	--lgf-space-3: 12px;
	--lgf-space-4: 16px;
	--lgf-space-6: 24px;
	--lgf-space-8: 32px;
	--lgf-space-12: 48px;
	--lgf-space-16: 64px;

	/* Type scale */
	--lgf-font-display: "Raleway", Arial, Helvetica, sans-serif;
	/* Raleway is a geometric sans and sets wider than the former serif. */
	--lgf-display-weight: 500;
	--lgf-display-tracking: -0.005em;
	--lgf-font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--lgf-font-accent: "Caveat", "Segoe Script", cursive;
	--lgf-text-xs: 13px;
	--lgf-text-sm: 15px;
	--lgf-text-base: 17px;
	--lgf-text-lg: 20px;
	--lgf-text-xl: clamp(1.35rem, 5.2vw, 1.875rem);
	--lgf-text-2xl: clamp(1.7rem, 7vw, 2.8rem);

	--lgf-tap: 44px;
	--lgf-ease: 180ms ease;

	/*
	 * Width of the stage. The rounds set it, the result view reuses it — that
	 * is the whole point of the token: the result must not be narrower than the
	 * three picture cards the visitor was just looking at.
	 */
	--lgf-stage-max: 1120px;

	/*
	 * Result background: the whole Lebenswelt board in one image. 10 px of blur
	 * at 1600 px — columns and picture row stay readable as a board, the texts
	 * do not. Agreed with Sven from three rendered variants, the middle one.
	 */
	--lgf-bg-blur: 3px;
	--lgf-bg-veil: 0.5;
	--lgf-bg-max: 1600px;

	/* The result card floats on that background instead of hiding it. */
	--lgf-card-glass: rgba(255, 255, 255, 0.78);

	/* Every bar but the main world's. */
	--lgf-bar-muted: rgba(118, 183, 41, 0.45);
}

/*
 * The whole screen is cream, not just a box inside the theme layout.
 *
 * On a page carrying the game the body background also propagates to the canvas
 * (html), so the colour fills the viewport in the iframe and on a normal page
 * alike. overflow-x: clip catches the full bleed below without creating a
 * scroll container — unlike overflow: hidden it leaves position: sticky intact.
 */
body.eh-lgf-page {
	background: var(--lgf-cream);
	overflow-x: clip;
}

/*
 * Embed mode (?lgf_embed=1): the document is entirely ours, so html and body are
 * stripped of whatever a theme stylesheet from wp_head might still impose. The
 * reset is scoped to the embed classes and never touches a normal page.
 */
html.eh-lgf-embed-root,
html.eh-lgf-embed-root body.eh-lgf-embed {
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--lgf-cream);
}

html.eh-lgf-embed-root body.eh-lgf-embed::before,
html.eh-lgf-embed-root body.eh-lgf-embed::after {
	content: none;
}

/*
 * Vertical centring inside the frame.
 *
 * The carrier page gives the frame a min-height on desktop, so it is often
 * taller than the game. A percentage height chain (never vh — that would refer
 * to the frame height we report ourselves and feed back) plus auto block
 * margins centres the game when there is room and starts it at the top when it
 * is longer than the frame, so nothing is ever cut off.
 */
html.eh-lgf-embed-root {
	height: 100%;
}

html.eh-lgf-embed-root body.eh-lgf-embed {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

html.eh-lgf-embed-root .eh-lgf {
	/* The embed document is ours alone — no breaking out of a theme width. */
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	margin-block: auto;
}

/*
 * Breathing room at the bottom on phones.
 *
 * It sits inside the padding box of the game root, so it is part of the height
 * we report — the carrier page therefore leaves exactly this much space between
 * the last line and whatever follows the frame. Padding, not margin, on purpose:
 * a margin would fall outside the reported box and buy nothing.
 */
@media (max-width: 767px) {
	html.eh-lgf-embed-root .eh-lgf {
		padding-bottom: var(--lgf-space-12);
	}
}

.eh-lgf {
	box-sizing: border-box;
	/* Anchor for the absolutely positioned result background. */
	position: relative;
	/* Break out of the theme's content width; the content inside stays centred. */
	width: 100vw;
	max-width: 100vw;
	margin: 0;
	margin-inline: calc(50% - 50vw);
	padding: var(--lgf-space-4);
	background: var(--lgf-cream);
	color: var(--lgf-blue);
	font-family: var(--lgf-font-text);
	font-size: var(--lgf-text-base);
	line-height: 1.55;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

/*
 * Scoped mini reset — the game must look identical in every theme.
 *
 * Every selector here is wrapped in :where() so the reset carries zero
 * specificity: it neutralises theme styles but never beats the component rules
 * further down, no matter how flat those selectors are.
 */
:where(.eh-lgf) *,
:where(.eh-lgf) *::before,
:where(.eh-lgf) *::after {
	box-sizing: inherit;
}

:where(.eh-lgf) :where(p, h2, h3, figure, ul, li) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Form controls, same discipline: zero specificity, so the component rules of
 * the lead form always win over this reset and over the theme.
 */
:where(.eh-lgf) :where(input, select, textarea, label, fieldset, legend) {
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
}

:where(.eh-lgf) :where(img, svg) {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}

:where(.eh-lgf) :where(button) {
	/*
	 * manipulation only: it drops the double tap delay but leaves panning and
	 * zooming alone, so a swipe that starts on a card still scrolls the page.
	 */
	touch-action: manipulation;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.eh-lgf [hidden] {
	display: none !important;
}

.eh-lgf :focus-visible,
.eh-lgf :focus-visible:hover {
	outline: 2px solid var(--lgf-blue);
	outline-offset: 3px;
	border-radius: var(--lgf-radius-sm);
}

/* ---------- Screens ---------- */

.eh-lgf-screen {
	position: relative;
	z-index: 1;
	max-width: var(--lgf-stage-max);
	margin: 0 auto;
}

/*
 * More ground height for the intro on phones, so the carrier page does not look
 * squat. Pixels, never vh: inside the iframe vh refers to the frame height we
 * report ourselves.
 */
@media (max-width: 767px) {
	.eh-lgf[data-state="intro"] {
		min-height: 560px;
	}

	.eh-lgf[data-state="intro"] .eh-lgf-screen--intro {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: inherit;
	}
}

/* ---------- Cards (intro / done) ---------- */

.eh-lgf-card {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--lgf-space-8) var(--lgf-space-6);
	border: 1px solid var(--lgf-border);
	border-radius: var(--lgf-radius);
	background: var(--lgf-white);
	text-align: center;
}

.eh-lgf-kicker {
	margin-bottom: var(--lgf-space-2);
	color: var(--lgf-green);
	font-family: var(--lgf-font-display);
	font-size: var(--lgf-text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.eh-lgf-title {
	margin-bottom: var(--lgf-space-4);
	font-family: var(--lgf-font-display);
	font-size: var(--lgf-text-2xl);
	font-weight: var(--lgf-display-weight);
	letter-spacing: var(--lgf-display-tracking);
	line-height: 1.2;
}

/*
 * Long compounds such as "Lebensgefühl-Finder" must wrap instead of pushing the
 * card out of a 320 px viewport. hyphens needs the lang attribute on the
 * container, text-wrap: balance is progressive enhancement.
 */
.eh-lgf-title,
.eh-lgf-question,
.eh-lgf-choice-label,
.eh-lgf-interstitial-title {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	text-wrap: balance;
}

/* Loading spinner — the bridge reads as a short loading moment. */
.eh-lgf-spinner {
	width: 36px;
	height: 36px;
	margin-top: var(--lgf-space-6);
	color: var(--lgf-green);
}

.eh-lgf-spinner svg {
	width: 100%;
	height: 100%;
	animation: eh-lgf-spin 900ms linear infinite;
}

.eh-lgf-spinner circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	/* Three quarters of the circumference of r=14 leaves an open arc. */
	stroke-dasharray: 66 22;
}

@keyframes eh-lgf-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes eh-lgf-pulse {
	50% {
		opacity: 0.35;
	}
}

.eh-lgf-lead {
	margin-bottom: var(--lgf-space-6);
	font-size: var(--lgf-text-base);
	color: var(--lgf-ink);
}

.eh-lgf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--lgf-tap);
	padding: var(--lgf-space-3) var(--lgf-space-8);
	border-radius: 999px;
	background: var(--lgf-green);
	color: var(--lgf-white);
	font-size: var(--lgf-text-base);
	font-weight: 600;
	transition: transform var(--lgf-ease), box-shadow var(--lgf-ease);
}

.eh-lgf-button:hover {
	box-shadow: 0 6px 18px var(--lgf-shadow-strong);
	transform: translateY(-1px);
}

/* ---------- Interstitial between two rounds ---------- */

.eh-lgf-screen--interstitial {
	display: flex;
	/*
	 * Top aligned, not centred: while the bridge is up its height is frozen to
	 * the height of the round it replaces, so a centred text would sit halfway
	 * down a very tall box — off screen on a phone.
	 *
	 * No viewport units here: inside the iframe vh refers to the frame height,
	 * which we set ourselves from the reported height — that would feed back on
	 * itself. A fixed min-height keeps the bridge calm in both modes.
	 */
	align-items: flex-start;
	justify-content: center;
	min-height: 13rem;
	padding: var(--lgf-space-12) var(--lgf-space-4);
	text-align: center;
}

/*
 * The text stands still for the full duration — no fade in or out, which would
 * eat into the time the player has to read it.
 */
.eh-lgf-interstitial {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.eh-lgf-interstitial-title {
	margin-top: var(--lgf-space-3);
	font-family: var(--lgf-font-display);
	font-size: var(--lgf-text-2xl);
	font-weight: var(--lgf-display-weight);
	letter-spacing: var(--lgf-display-tracking);
	line-height: 1.2;
}

/* ---------- Round head ---------- */

.eh-lgf-roundhead {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: calc(var(--lgf-space-4) * -1) calc(var(--lgf-space-4) * -1) var(--lgf-space-4);
	padding: var(--lgf-space-4);
	border-bottom: 1px solid var(--lgf-border);
	background: var(--lgf-cream);
}

.eh-lgf-progress-label {
	margin-bottom: var(--lgf-space-3);
	color: var(--lgf-ink);
	font-size: var(--lgf-text-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.eh-lgf-progress-track {
	height: 3px;
	margin-bottom: var(--lgf-space-4);
	border-radius: 999px;
	background: var(--lgf-border);
}

.eh-lgf-progress-bar {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--lgf-green);
	transition: width var(--lgf-ease);
}

.eh-lgf-question {
	font-family: var(--lgf-font-display);
	font-size: var(--lgf-text-xl);
	font-weight: var(--lgf-display-weight);
	letter-spacing: var(--lgf-display-tracking);
	line-height: 1.25;
	text-wrap: balance;
}

/* ---------- Trio ---------- */

.eh-lgf-trio {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lgf-space-4);
}

.eh-lgf-choice {
	display: flex;
	flex-direction: column;
	min-height: var(--lgf-tap);
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--lgf-radius);
	background: var(--lgf-white);
	box-shadow: 0 1px 3px var(--lgf-shadow);
	transition: transform var(--lgf-ease), box-shadow var(--lgf-ease), border-color var(--lgf-ease);
}

/*
 * Hairline for tiles whose own light areas would merge into the white card.
 * It has to be an overlay: the image is absolutely positioned and would paint
 * over an inset box-shadow on the media box itself.
 */
.eh-lgf-choice--bordered .eh-lgf-choice-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	box-shadow: inset 0 0 0 1px var(--lgf-border);
	pointer-events: none;
}

.eh-lgf-choice-media {
	position: relative;
	display: block;
	width: 100%;
	padding-top: var(--lgf-ratio, 125%);
	background: var(--lgf-cream);
}

.eh-lgf-choice-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eh-lgf-choice-check {
	position: absolute;
	top: var(--lgf-space-3);
	right: var(--lgf-space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--lgf-green);
	color: var(--lgf-white);
	opacity: 0;
	transform: scale(0.7);
	transition: opacity var(--lgf-ease), transform var(--lgf-ease);
}

.eh-lgf-choice-check svg {
	width: 18px;
	height: 18px;
}

.eh-lgf-choice-text {
	display: block;
	padding: var(--lgf-space-3) var(--lgf-space-4) var(--lgf-space-4);
}

.eh-lgf-choice-label {
	display: block;
	font-size: var(--lgf-text-lg);
	font-weight: 600;
	line-height: 1.25;
}

.eh-lgf-choice-caption {
	display: block;
	margin-top: var(--lgf-space-1);
	color: var(--lgf-ink);
	font-size: var(--lgf-text-sm);
	line-height: 1.45;
}

.eh-lgf-choice:hover {
	border-color: var(--lgf-border);
	box-shadow: 0 8px 22px var(--lgf-shadow);
	transform: translateY(-2px);
}

.eh-lgf-choice[aria-pressed="true"] {
	border-color: var(--lgf-green);
	background: var(--lgf-green-soft);
}

.eh-lgf-choice[aria-pressed="true"] .eh-lgf-choice-check {
	opacity: 1;
	transform: scale(1);
}

/* ---------- Back link ---------- */

.eh-lgf-back-wrap {
	margin-top: var(--lgf-space-6);
	text-align: center;
}

.eh-lgf-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lgf-space-2);
	min-height: var(--lgf-tap);
	padding: var(--lgf-space-2) var(--lgf-space-4);
	color: var(--lgf-ink);
	font-size: var(--lgf-text-sm);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eh-lgf-back:hover {
	color: var(--lgf-blue);
}

/* ---------- Debug / status ---------- */

/* Shown only when the result could not be submitted. */
.eh-lgf-note {
	margin-bottom: var(--lgf-space-6);
	color: var(--lgf-ink);
	font-size: var(--lgf-text-sm);
}

.eh-lgf-retry {
	min-height: var(--lgf-tap);
	padding: var(--lgf-space-2) var(--lgf-space-3);
	color: var(--lgf-blue);
	font-size: var(--lgf-text-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eh-lgf-debug-row {
	display: block;
	word-break: break-all;
}

.eh-lgf-debug {
	margin-bottom: var(--lgf-space-6);
	padding: var(--lgf-space-3) var(--lgf-space-4);
	border: 1px dashed var(--lgf-border);
	border-radius: var(--lgf-radius-sm);
	font-size: var(--lgf-text-sm);
}

.eh-lgf-debug-label {
	display: block;
	margin-bottom: var(--lgf-space-1);
	color: var(--lgf-ink);
	font-family: var(--lgf-font-accent);
	font-size: var(--lgf-text-lg);
}

.eh-lgf-debug code {
	font-size: var(--lgf-text-base);
	letter-spacing: 0.06em;
}

/*
 * The AI transparency notice under the game. Quiet but permanent: it stands on
 * every screen, so it must not shout — and it must stay readable, which is why
 * the colour is the ink tone of the body text, not a light grey (contrast
 * measured against the cream background, AA for small text).
 */
.eh-lgf-ai-notice {
	max-width: var(--lgf-stage-max);
	margin: var(--lgf-space-6) auto 0;
	color: var(--lgf-ink);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	opacity: 0.85;
}

/*
 * Not on the intro screen: there is no AI generated picture on it yet, and a
 * notice belongs next to what it is about. From round 1 on it stays visible
 * through every state — rounds, the bridge between them, the result, the form
 * and the thank you view. The state lives on the container, so one element and
 * one rule do it: no second notice, no JavaScript. Specificity 0,2,0 beats the
 * base rule above whatever the order of the two.
 */
.eh-lgf[data-state="intro"] .eh-lgf-ai-notice {
	display: none;
}

.eh-lgf-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Result background (package 5 view, v1.6.1) ---------- */

/*
 * The visitor's own Lebenswelt board, blurred, behind the whole result.
 * Absolutely positioned inside the game root and growing with it: no viewport
 * units, because inside the iframe vh refers to the frame height we report
 * ourselves.
 */
.eh-lgf-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 400ms ease;
}

.eh-lgf-bg.is-visible {
	opacity: 1;
}

/* The cream veil that carries the whole thing back into the CI. */
.eh-lgf-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--lgf-cream);
	opacity: var(--lgf-bg-veil);
}

/*
 * The board keeps its own aspect ratio and sits at the top of the container —
 * NO object-fit: cover and no height taken from the container. The container is
 * as tall as the whole result view (well over two thousand pixels); cover would
 * blow one corner of the board up until nothing of it was recognisable. Below
 * the image the container simply shows cream.
 */
.eh-lgf-bg-img {
	display: block;
	width: 100%;
	max-width: var(--lgf-bg-max);
	height: auto;
	margin: 0 auto;
	/* scale against the bright fringe a blur leaves at the edges. */
	transform: scale(1.04);
	filter: blur(var(--lgf-bg-blur));

	/*
	 * Feather the edges on the image itself, so its lower edge fades into the
	 * cream below it instead of ending on a hard line — and so the sides melt
	 * into the cream of the carrier page. Progressive: without mask support the
	 * veil still keeps the edge quiet.
	 */
	-webkit-mask-image:
		linear-gradient(to bottom, transparent 0, #000 6%, #000 75%, transparent 100%),
		linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image:
		linear-gradient(to bottom, transparent 0, #000 6%, #000 75%, transparent 100%),
		linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* ---------- Short result view (package 4, restaged in v1.6.1) ---------- */

/*
 * The result uses the full stage — the same width as the three picture cards
 * of a round — and floats on the background instead of covering it.
 */
.eh-lgf-card--result {
	max-width: 100%;
	background: var(--lgf-card-glass);
	text-align: left;
}

/* Progressive: without support the card is simply opaque enough to read. */
@supports (backdrop-filter: blur(6px)) {
	.eh-lgf-card--result {
		backdrop-filter: blur(6px);
	}
}

.eh-lgf-result-head {
	margin-bottom: var(--lgf-space-8);
	text-align: center;
}

.eh-lgf-nuance {
	margin: calc(-1 * var(--lgf-space-2)) 0 var(--lgf-space-4);
	color: var(--lgf-ink);
	font-family: var(--lgf-font-accent);
	font-size: var(--lgf-text-lg);
}

.eh-lgf-resulttext {
	margin-bottom: var(--lgf-space-8);
}

.eh-lgf-subtitle {
	margin-bottom: var(--lgf-space-3);
	font-family: var(--lgf-font-display);
	font-size: var(--lgf-text-xl);
	font-weight: var(--lgf-display-weight);
	letter-spacing: var(--lgf-display-tracking);
	line-height: 1.25;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ---------- The stage: graph left, answers right ---------- */

.eh-lgf-stage {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lgf-space-8);
	margin-bottom: var(--lgf-space-8);
	padding-top: var(--lgf-space-6);
	border-top: 1px solid var(--lgf-border);
}

/*
 * Two columns from 960 px. The game is full bleed outside the iframe and fills
 * the frame inside it, so the stage is always about the viewport width minus
 * the padding — roughly 900 px of usable width at this breakpoint, which is
 * where two columns start to earn their place. Below it they stack, graph
 * first: the graph carries the result, the recap is the look back.
 */
@media (min-width: 960px) {
	.eh-lgf-stage {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.eh-lgf-bars-title {
	margin-bottom: var(--lgf-space-4);
	color: var(--lgf-blue);
	font-family: var(--lgf-font-display);
	font-size: var(--lgf-text-lg);
	font-weight: 600;
}

/*
 * Label above the bar on a phone, beside it from 560 px: a five world label
 * such as "Verspielt & Familiär" needs the full width on a 320 px screen.
 */
.eh-lgf-bar {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"label value"
		"track track";
	gap: var(--lgf-space-1) var(--lgf-space-3);
	align-items: center;
	margin-bottom: var(--lgf-space-3);
}

/*
 * Explicit areas, not auto placement: the markup order is label, track, value
 * so the bar sits next to its label on the desktop grid, and auto placement
 * would push the value onto a third line on a phone.
 */
.eh-lgf-bar-label {
	grid-area: label;
	font-size: var(--lgf-text-sm);
}

.eh-lgf-bar-value {
	grid-area: value;
	font-size: var(--lgf-text-sm);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.eh-lgf-bar-track {
	grid-area: track;
	display: block;
	height: 10px;
	border-radius: 999px;
	background: var(--lgf-green-soft);
	overflow: hidden;
}

.eh-lgf-bar-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	/* Dimmed by default; the main world gets the full colour below. */
	background: var(--lgf-bar-muted);
	transition: width 420ms ease;
}

/*
 * The main world carries the result, so it is the only bar at full strength.
 * Colour alone would not be enough — the label and the value go bold with it.
 */
.eh-lgf-bar.is-main .eh-lgf-bar-fill {
	background: var(--lgf-green);
}

.eh-lgf-bar.is-main .eh-lgf-bar-label,
.eh-lgf-bar.is-main .eh-lgf-bar-value {
	font-weight: 700;
}

@media (min-width: 560px) {
	.eh-lgf-bar {
		grid-template-columns: 11rem 1fr 3.5rem;
		grid-template-areas: "label track value";
	}
}

/* ---------- Answer recap ---------- */

/*
 * min-width: 0 on the stage columns: a grid item defaults to min-width: auto,
 * and a long world name would then push its column wider than its share.
 */
.eh-lgf-stage-col {
	min-width: 0;
}

/*
 * Anchor for the in place zoom. It wraps exactly the grid, so the panel covers
 * the pictures and nothing else — no pixel guess about how tall the heading is.
 */
.eh-lgf-recap-body {
	position: relative;
}

.eh-lgf-recap-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--lgf-space-3);
}

.eh-lgf-recap-button {
	display: block;
	width: 100%;
	cursor: zoom-in;
}

.eh-lgf-recap-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--lgf-border);
	border-radius: var(--lgf-radius-sm);
	background: var(--lgf-white);
}

.eh-lgf-recap-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--lgf-ease);
}

.eh-lgf-recap-button:hover .eh-lgf-recap-media img {
	transform: scale(1.03);
}

.eh-lgf-recap-text {
	display: block;
	margin-top: var(--lgf-space-2);
}

.eh-lgf-recap-round {
	display: block;
	color: var(--lgf-green);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.eh-lgf-recap-label {
	display: block;
	font-size: var(--lgf-text-sm);
	overflow-wrap: break-word;
	hyphens: auto;
}

/*
 * The large view sits ON the grid, not over the page: inside an iframe that is
 * as tall as the whole game, a position: fixed dialog would land in the middle
 * of that frame and quite possibly outside what the visitor can see. Covering
 * the grid they just tapped keeps it on screen by definition — and because the
 * panel takes exactly the grid's box, nothing below it moves.
 */
.eh-lgf-recap-zoom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--lgf-space-4);
	border: 1px solid var(--lgf-border);
	border-radius: var(--lgf-radius);
	background: var(--lgf-white);
	box-shadow: 0 10px 30px var(--lgf-shadow);
}

/*
 * The panel carries tabindex="-1" so a click on the picture leaves the focus
 * inside it and Esc keeps working. It is never reachable by tabbing, so there
 * is no focus indicator to take away here.
 */
.eh-lgf-recap-zoom:focus {
	outline: none;
}

.eh-lgf-recap-zoom[hidden] {
	display: none;
}

.eh-lgf-recap-zoom-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
}

.eh-lgf-recap-zoom-figure img {
	flex: 1 1 auto;
	min-height: 0;
	max-width: 100%;
	object-fit: contain;
}

.eh-lgf-recap-zoom-figure figcaption {
	flex: 0 0 auto;
	margin-top: var(--lgf-space-3);
	color: var(--lgf-ink);
	font-size: var(--lgf-text-sm);
	text-align: center;
}

.eh-lgf-recap-zoom-close,
.eh-lgf-recap-zoom-nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lgf-tap);
	height: var(--lgf-tap);
	border-radius: 999px;
	background: var(--lgf-white);
	box-shadow: 0 2px 10px var(--lgf-shadow);
	color: var(--lgf-blue);
}

.eh-lgf-recap-zoom-close svg,
.eh-lgf-recap-zoom-nav svg {
	width: 22px;
	height: 22px;
}

.eh-lgf-recap-zoom-close {
	top: var(--lgf-space-2);
	right: var(--lgf-space-2);
}

.eh-lgf-recap-zoom-nav {
	top: 50%;
	transform: translateY(-50%);
}

.eh-lgf-recap-zoom-prev {
	left: var(--lgf-space-2);
}

.eh-lgf-recap-zoom-next {
	right: var(--lgf-space-2);
}

/* ---------- Lead form ---------- */

.eh-lgf-leadbox {
	padding-top: var(--lgf-space-6);
	border-top: 1px solid var(--lgf-border);
}

.eh-lgf-leadintro {
	max-width: 44rem;
	margin: 0 auto;
	text-align: center;
}

/*
 * The form stays a readable column even on the wide stage — a 1120 px wide
 * input row reads as a database mask, not as an invitation.
 */
.eh-lgf-form {
	max-width: 720px;
	margin: var(--lgf-space-6) auto 0;
}

.eh-lgf-field {
	margin-bottom: var(--lgf-space-4);
}

.eh-lgf-field label {
	display: block;
	margin-bottom: var(--lgf-space-1);
	font-size: var(--lgf-text-sm);
	font-weight: 600;
}

.eh-lgf-req {
	color: var(--lgf-green);
}

.eh-lgf-input {
	display: block;
	width: 100%;
	min-height: var(--lgf-tap);
	padding: var(--lgf-space-3);
	border: 1px solid var(--lgf-border);
	border-radius: var(--lgf-radius-sm);
	background: var(--lgf-white);
	color: var(--lgf-ink);
	font-size: var(--lgf-text-base);
	-webkit-appearance: none;
	appearance: none;
}

/* Native arrow is gone with appearance: none, so the select gets its own. */
.eh-lgf-form select.eh-lgf-input {
	padding-right: var(--lgf-space-8);
	background-image: linear-gradient(45deg, transparent 50%, var(--lgf-blue) 50%), linear-gradient(135deg, var(--lgf-blue) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.eh-lgf-input:focus-visible {
	outline: 2px solid var(--lgf-green);
	outline-offset: 1px;
}

.eh-lgf-input[aria-invalid="true"] {
	border-color: var(--lgf-blue);
}

.eh-lgf-textarea {
	min-height: 6.5rem;
	resize: vertical;
}

.eh-lgf-fielderror {
	display: block;
	margin-top: var(--lgf-space-1);
	color: var(--lgf-blue);
	font-size: var(--lgf-text-sm);
	font-weight: 600;
}

/*
 * Honeypot. Taken out of the layout and out of the accessibility tree without
 * display: none — a field that is display: none is the first thing a serious
 * bot skips, while this one still looks like an ordinary input to it.
 */
.eh-lgf-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.eh-lgf-consent {
	margin-bottom: var(--lgf-space-6);
}

/*
 * The whole label is the tap target, so it carries the 44 px minimum itself —
 * the 22 px checkbox alone would be too small, and growing the box would look
 * wrong next to 15 px text.
 */
.eh-lgf-consent label {
	display: flex;
	gap: var(--lgf-space-3);
	align-items: flex-start;
	min-height: var(--lgf-tap);
	padding-block: var(--lgf-space-3);
	font-size: var(--lgf-text-sm);
	line-height: 1.5;
	cursor: pointer;
}

.eh-lgf-consent input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	/* Sits on the first text line, not centred over a wrapped paragraph. */
	margin: 0;
	accent-color: var(--lgf-green);
}

.eh-lgf-consent a {
	color: var(--lgf-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eh-lgf-formfoot {
	text-align: center;
}

.eh-lgf-form .eh-lgf-note {
	margin: var(--lgf-space-4) 0 0;
	text-align: center;
}

.eh-lgf-button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.eh-lgf-thanks {
	max-width: 44rem;
	margin: 0 auto;
	padding-top: var(--lgf-space-6);
	border-top: 1px solid var(--lgf-border);
	text-align: center;
}

/* A discreet text link under the lead area, never a second button. */
/* Sits inside the thank you block since v1.6.4, hence the extra room above. */
.eh-lgf-replay {
	margin-top: var(--lgf-space-8);
	text-align: center;
}

/*
 * Room below the result, so the replay link does not sit on the carrier page's
 * footer. Padding on the screen, NOT a margin on the last child: a margin can
 * collapse out of the container and would then be missing from the height we
 * measure and report to Contao.
 */
.eh-lgf-screen--done {
	padding-bottom: var(--lgf-space-16);
}

.eh-lgf-thanks .eh-lgf-lead {
	margin-bottom: 0;
}

@media (min-width: 560px) {
	.eh-lgf-fieldrow {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--lgf-space-4);
	}

	/* A single field that should still be half a row wide — the salutation. */
	.eh-lgf-fieldrow--half > .eh-lgf-field {
		grid-column: span 1;
	}

	/* Postcode stays narrow, the town takes the rest. */
	.eh-lgf-fieldrow--plzort {
		grid-template-columns: minmax(7rem, 1fr) 2fr;
	}
}

/* ---------- Desktop ---------- */

@media (min-width: 768px) {
	.eh-lgf {
		padding: var(--lgf-space-8);
	}

	.eh-lgf-roundhead {
		position: static;
		margin: 0 0 var(--lgf-space-8);
		padding: 0;
		border-bottom: 0;
		text-align: center;
	}

	.eh-lgf-progress {
		max-width: 420px;
		margin: 0 auto var(--lgf-space-6);
	}

	.eh-lgf-trio {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--lgf-space-6);
		align-items: stretch;
	}

	.eh-lgf-choice-text {
		flex: 1 1 auto;
		padding: var(--lgf-space-4);
	}

	.eh-lgf-card {
		padding: var(--lgf-space-12) var(--lgf-space-8);
	}

	/* Four across, two rows — the eight answers read as one block. */
	.eh-lgf-recap-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--lgf-space-4);
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.eh-lgf *,
	.eh-lgf *::before,
	.eh-lgf *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	.eh-lgf-choice:hover,
	.eh-lgf-button:hover {
		transform: none;
	}

	/* The bars take their final width right away instead of growing into it. */
	.eh-lgf-bar-fill {
		transition: none !important;
	}

	/* The background is there at once; it carries mood, not motion. */
	.eh-lgf-bg {
		transition: none !important;
	}

	.eh-lgf-recap-button:hover .eh-lgf-recap-media img {
		transform: none;
	}

	/*
	 * The spinner stops turning but stays readable as a waiting sign: a slow
	 * opacity pulse instead of rotation. The bridge keeps its full duration.
	 */
	.eh-lgf-spinner svg {
		animation: eh-lgf-pulse 1.6s ease-in-out infinite !important;
	}
}