:root {
	color-scheme: dark;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: #10142b;
	color: #f7f5ff;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	--muted: #a5a8c4;
	--purple: #8c7cff;
	--card: rgba(27, 32, 62, 0.94);
	--line: rgba(255, 255, 255, 0.12);
}

* {
	box-sizing: border-box;
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(ellipse at 15% 10%, rgba(95, 78, 196, 0.3), transparent 35rem),
		radial-gradient(ellipse at 90% 80%, rgba(22, 120, 151, 0.18), transparent 32rem),
		#10142b;
}

button,
select {
	font: inherit;
}

button {
	cursor: pointer;
}

button:focus-visible,
select:focus-visible,
a:focus-visible {
	outline: 3px solid #c1b8ff;
	outline-offset: 3px;
}

.shell {
	width: min(100% - 32px, 760px);
	margin: 0 auto;
	padding: 28px 0 20px;
}

.site-header,
.brand,
.game-topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-header {
	margin-bottom: 64px;
}

.brand {
	justify-content: flex-start;
	gap: 11px;
	color: #f7f5ff;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-decoration: none;
}

.brand-mark {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border: 1px solid rgba(193, 184, 255, 0.5);
	border-radius: 12px;
	background: rgba(140, 124, 255, 0.2);
	color: #c1b8ff;
	font-size: 1.25rem;
}

.attempts,
.intro,
.availability,
footer {
	color: var(--muted);
}

.attempts {
	margin: 0;
	font-size: 0.9rem;
}

.attempts strong {
	color: #fff;
}

.card {
	padding: clamp(24px, 6vw, 52px);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--card);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.eyebrow {
	margin: 0 0 12px;
	color: #b7adff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
}

h1 {
	margin: 0;
	font-size: clamp(2.3rem, 7vw, 4.2rem);
	letter-spacing: -0.055em;
	line-height: 1.05;
}

.intro {
	max-width: 430px;
	margin: 16px 0 32px;
	line-height: 1.65;
}

label {
	display: block;
	margin-bottom: 9px;
	font-size: 0.85rem;
	font-weight: 700;
}

select {
	width: 100%;
	min-height: 52px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #171c38;
	color: #fff;
}

.availability {
	min-height: 20px;
	margin: 9px 0 20px;
	font-size: 0.8rem;
}

.primary-button,
.secondary-button {
	min-height: 50px;
	padding: 0 22px;
	border: 0;
	border-radius: 12px;
	font-weight: 800;
	transition: transform 150ms ease, opacity 150ms ease;
}

.primary-button {
	width: 100%;
	background: linear-gradient(115deg, #9a8cff, #7465ec);
	color: #fff;
	box-shadow: 0 9px 24px rgba(118, 101, 236, 0.25);
}

.secondary-button {
	width: 100%;
	margin-top: 10px;
	border: 1px solid var(--line);
	background: transparent;
	color: #e5e2ff;
}

.primary-button:not(:disabled):hover,
.secondary-button:hover {
	transform: translateY(-2px);
}

.primary-button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.error-message,
.game-message {
	min-height: 1.4em;
	margin: 16px 0 0;
	color: #ffb7c0;
}

.game-card {
	padding: clamp(22px, 5vw, 42px);
}

.game-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 28px;
	align-items: start;
}

.game-content {
	min-width: 0;
}

.ladder-panel {
	padding: 16px 12px 12px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(12, 15, 34, 0.5);
}

.ladder-panel .eyebrow {
	margin: 0 0 5px;
	text-align: center;
}

.current-title {
	margin: 0 0 12px;
	color: #c1b8ff;
	font-size: 0.9rem;
	font-weight: 850;
	text-align: center;
}

.title-ladder {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.title-step {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 29px;
	padding: 3px 7px;
	border: 1px solid transparent;
	border-radius: 8px;
	color: #767b9b;
	font-size: 0.73rem;
}

.step-number {
	display: grid;
	width: 21px;
	height: 21px;
	flex: 0 0 21px;
	place-items: center;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.66rem;
	font-weight: 800;
}

.step-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.title-step.completed {
	color: #91dfbf;
}

.title-step.completed .step-number {
	background: rgba(42, 174, 122, 0.17);
}

.title-step.current {
	border-color: rgba(193, 184, 255, 0.38);
	background: rgba(140, 124, 255, 0.15);
	color: #f7f5ff;
	font-weight: 800;
}

.title-step.current .step-number {
	background: var(--purple);
	color: #fff;
}

.title-step.failed {
	border-color: rgba(255, 126, 138, 0.42);
	background: rgba(202, 65, 86, 0.15);
	color: #ffabb4;
}

.title-step.failed .step-number {
	background: #c84f64;
	color: #fff;
}

.game-topline {
	gap: 16px;
	margin-bottom: 18px;
}

.game-topline .eyebrow,
.question-count {
	margin: 0;
}

.question-count {
	color: var(--muted);
	font-size: 0.88rem;
	white-space: nowrap;
}

.progress-track {
	height: 5px;
	margin-bottom: 34px;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
}

.progress-track span {
	display: block;
	width: 10%;
	height: 100%;
	border-radius: inherit;
	background: var(--purple);
	transition: width 180ms ease;
}

.question {
	min-height: 2.4em;
	margin-bottom: 27px;
	font-size: clamp(1.7rem, 5vw, 2.5rem);
	letter-spacing: -0.035em;
	line-height: 1.2;
}

.question-attribution {
	margin: -14px 0 18px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 0.7rem;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}

.attribution-dialog {
	width: min(520px, calc(100% - 32px));
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #1b203e;
	color: #f7f5ff;
	line-height: 1.6;
}

.attribution-dialog::backdrop {
	background: rgba(5, 7, 18, 0.72);
}

.attribution-dialog-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.attribution-dialog-heading h2 {
	margin: 0;
	font-size: 1.1rem;
}

.attribution-dialog p {
	margin: 0;
	color: var(--muted);
	font-size: 0.85rem;
}

.attribution-close {
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.06);
	color: #f7f5ff;
	cursor: pointer;
}

.lifelines {
	display: grid;
	grid-template-columns: repeat(4, 54px);
	justify-content: center;
	gap: 10px;
	margin-bottom: 18px;
}

.lifeline-button {
	position: relative;
	display: grid;
	width: 54px;
	height: 54px;
	min-width: 54px;
	min-height: 54px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid;
	border-radius: 15px;
	cursor: pointer;
	transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
}

.lifeline-fifty {
	border-color: rgba(255, 194, 91, 0.34);
	background: linear-gradient(115deg, rgba(168, 102, 24, 0.27), rgba(111, 70, 20, 0.15));
	color: #ffe0a3;
}

.lifeline-change {
	border-color: rgba(71, 212, 208, 0.32);
	background: linear-gradient(115deg, rgba(22, 132, 138, 0.25), rgba(18, 89, 112, 0.16));
	color: #a8f2ed;
}

.lifeline-audience {
	border-color: rgba(193, 184, 255, 0.32);
	background: linear-gradient(115deg, rgba(100, 83, 180, 0.28), rgba(65, 53, 124, 0.16));
	color: #d3cbff;
}

.lifeline-button:not(:disabled):hover,
.lifeline-button:not(:disabled):focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.18);
}

.lifeline-button::after,
.lifeline-heart::after {
	position: absolute;
	z-index: 10;
	top: calc(100% + 8px);
	left: 50%;
	width: max-content;
	max-width: 220px;
	padding: 7px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #171b35;
	color: #f7f5ff;
	content: attr(aria-label);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -3px);
	transition: opacity 120ms ease, transform 120ms ease;
	visibility: hidden;
}

.lifeline-button:hover::after,
.lifeline-button:focus-visible::after,
.lifeline-heart:hover::after {
	opacity: 1;
	transform: translate(-50%, 0);
	visibility: visible;
}

.lifeline-icon {
	display: grid;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	place-items: center;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-weight: 900;
}

.lifeline-icon svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.lifeline-count {
	display: grid;
	position: absolute;
	top: -5px;
	right: -5px;
	width: 18px;
	height: 18px;
	place-items: center;
	border: 1px solid #1c203c;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	font-size: 0.65rem;
}

.lifeline-heart {
	position: relative;
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;
	border: 1px solid rgba(255, 104, 131, 0.38);
	border-radius: 15px;
	background: linear-gradient(115deg, rgba(155, 44, 75, 0.28), rgba(96, 35, 65, 0.16));
	color: #ff8299;
	cursor: help;
	transition: filter 150ms ease, opacity 150ms ease;
}

.lifeline-heart:hover,
.lifeline-heart:focus-visible {
	filter: brightness(1.18);
}

.heart-icon {
	width: 29px;
	height: 29px;
	overflow: visible;
}

.heart-active {
	fill: currentColor;
	stroke: currentColor;
	stroke-linejoin: round;
	stroke-width: 1.3;
}

.heart-spent,
.heart-mark {
	display: none;
}

.lifeline-heart.spent {
	border-color: rgba(165, 170, 192, 0.24);
	background: rgba(255, 255, 255, 0.035);
	color: #737990;
	opacity: 0.55;
}

.lifeline-heart.spent .heart-active {
	display: none;
}

.lifeline-heart.spent .heart-spent {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.lifeline-heart.spent .heart-mark {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.8;
}

.game-summary {
	margin: 8px 0 16px;
	color: var(--muted);
	font-size: 0.9rem;
	font-weight: 700;
}

.lifeline-button:disabled {
	cursor: default;
	filter: saturate(0.45);
	opacity: 0.45;
}

.choices {
	display: grid;
	gap: 10px;
}

.choice-button {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.035);
	color: #f7f5ff;
	text-align: left;
	transition: border-color 150ms ease, background 150ms ease;
}

.choice-content {
	display: grid;
	flex: 1;
	gap: 7px;
	min-width: 0;
}

.choice-label {
	display: block;
}

.audience-result {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 38px;
	gap: 8px;
	align-items: center;
	font-size: 0.72rem;
}

.audience-track {
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}

.audience-bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: #a99bff;
	transition: width 250ms ease;
}

.audience-percent {
	color: var(--muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.choice-button:not(:disabled):hover {
	border-color: rgba(193, 184, 255, 0.8);
	background: rgba(140, 124, 255, 0.12);
}

.choice-button.selected {
	border-color: #b7adff;
	background: rgba(140, 124, 255, 0.24);
	box-shadow: inset 0 0 0 1px rgba(193, 184, 255, 0.3);
}

.choice-button:disabled {
	cursor: default;
}

.choice-key {
	display: grid;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	place-items: center;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.08);
	color: #c1b8ff;
	font-size: 0.76rem;
	font-weight: 800;
}

.choice-button.correct {
	border-color: #54d6a2;
	background: rgba(42, 174, 122, 0.15);
}

.choice-button.incorrect {
	border-color: #ff7e8a;
	background: rgba(202, 65, 86, 0.17);
}

.game-message {
	margin: 16px 0;
}

.game-message.success {
	color: #72e4b7;
}

footer {
	padding: 24px 0 0;
	font-size: 0.75rem;
	text-align: center;
}

[hidden] {
	display: none !important;
}

@media (min-width: 521px) {
	.game-card {
		padding: clamp(18px, 3vw, 30px);
	}

	.game-layout {
		gap: 22px;
	}

	.game-topline {
		margin-bottom: 12px;
	}

	.progress-track {
		margin-bottom: 22px;
	}

	.question {
		min-height: 1.8em;
		margin-bottom: 14px;
		font-size: clamp(1.5rem, 3vw, 2rem);
	}

	.lifelines {
		margin-bottom: 12px;
	}

	.lifeline-button {
		min-height: 48px;
	}

	.choices {
		gap: 8px;
	}

	.choice-button {
		min-height: 50px;
		padding-block: 8px;
	}

	.game-message {
		margin-block: 10px;
	}
}

@media (max-width: 520px) {
	body {
		min-height: 100svh;
	}

	.site-header {
		margin-bottom: 10px;
	}

	.shell {
		width: min(100% - 20px, 460px);
		min-height: 100svh;
		padding: 12px 0 8px;
		display: flex;
		flex-direction: column;
	}

	.card {
		padding: 16px;
		border-radius: 18px;
	}

	.game-card {
		flex: 1;
		padding: 14px;
		min-height: 0;
	}

	.lifelines {
		display: grid;
		grid-template-columns: repeat(4, 46px);
		gap: 8px;
		margin-bottom: 12px;
	}

	.lifeline-button {
		width: 46px;
		height: 46px;
		min-width: 46px;
		min-height: 46px;
	}

	.lifeline-icon {
		width: 27px;
		height: 27px;
	}

	.lifeline-heart {
		width: 46px;
		height: 46px;
	}

	.lifeline-count {
		width: 18px;
		height: 18px;
		flex-basis: 18px;
		font-size: 0.62rem;
	}

	.question {
		min-height: 2.4em;
		margin-bottom: 16px;
		font-size: clamp(1.25rem, 5vw, 1.65rem);
		line-height: 1.2;
	}

	.progress-track {
		margin-bottom: 18px;
	}

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

	.choice-button {
		min-height: 42px;
		gap: 7px;
		padding: 6px 7px;
		font-size: 0.8rem;
	}

	.choice-key {
		width: 23px;
		height: 23px;
		flex-basis: 23px;
	}

	.game-message {
		margin: 9px 0;
		font-size: 0.85rem;
	}

	.primary-button,
	.secondary-button {
		min-height: 44px;
	}

	.game-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		min-width: 0;
	}

	.game-content,
	.ladder-panel {
		width: 100%;
		min-width: 0;
	}

	.ladder-panel {
		padding: 6px 8px;
	}

	.current-title {
		display: none;
	}

	.ladder-panel .eyebrow {
		display: none;
	}

	.title-ladder {
		flex-direction: row;
		gap: 6px;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		overflow-x: auto;
		padding: 3px 0 5px;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
	}

	.title-ladder::-webkit-scrollbar {
		display: none;
	}

	.title-step {
		flex: 0 0 calc((100% - 12px) / 3);
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		min-width: 0;
		min-height: 66px;
		padding: 6px 4px;
		border-color: var(--line);
		background: rgba(255, 255, 255, 0.035);
		font-size: 0.7rem;
		text-align: center;
		scroll-snap-align: center;
	}

	.step-number {
		width: 22px;
		height: 22px;
		flex: 0 0 22px;
		font-size: 0.68rem;
	}

	.step-title {
		max-width: 100%;
		overflow: visible;
		font-size: inherit;
		line-height: 1.15;
		text-overflow: clip;
		white-space: normal;
	}

	footer {
		display: none;
	}
}

@media (max-width: 380px) {
	.shell {
		width: min(100% - 14px, 460px);
		padding-top: 8px;
	}

	.game-card {
		padding: 10px;
	}

	.question {
		font-size: 1.2rem;
	}

	.title-step {
		gap: 3px;
		padding-inline: 4px;
		font-size: 0.65rem;
	}

	.choice-button {
		font-size: 0.74rem;
	}

}