/* ==========================================================================
 * Quiz — race hero, leaderboard, podium
 * ========================================================================== */
.-quiz-leaderboard-page {
	width: 100%;
	min-height: 100%;
	display: flex;
	gap: 3.125vw;
	flex-flow: column;
	padding: 3.125vw 0 9.375vw;
}

.-quiz-leaderboard-head {
	display: flex;
	gap: 1.25vw;
	margin: 0 4.6875vw 1.5625vw;
	flex-flow: column;
}

.-quiz-leaderboard-head span,
.-quiz-leaderboard-head small {
	color: var(--app-muted);
	font-size: 3.125vw;
	font-weight: 800;
}

.-quiz-leaderboard-head span {
	color: var(--app-accent);
	text-transform: uppercase;
	letter-spacing: .3125vw;
}

.-quiz-leaderboard-head b {
	color: var(--app-color);
	font-family: var(--font-editorial);
	font-size: 6.25vw;
	line-height: 1.05;
}

.-quiz-who {
	width: 100%;
	display: flex;
	gap: 3.125vw;
	flex-flow: column;
	padding-bottom: 6.25vw;
}

/* Quiz: Hero introduces the race; Tray is only the game surface. */

.-quiz-game {
	width: 100%;
	display: flex;
	gap: 3.125vw;
	flex-flow: column;
	align-items: center;
	padding: 3.125vw 0 9.375vw;
}

.-quiz-question-count {
	width: 93.75vw;
	color: var(--app-accent);
	font-size: 3.125vw;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .3125vw;
}

.-quiz-question {
	width: 93.75vw;
	font-family: var(--font-editorial);
	font-size: 6.25vw;
	line-height: 1.15;
}

.-quiz-answers {
	width: 93.75vw;
	display: flex;
	gap: 2.5vw;
	flex-flow: column;
}

.-quiz-answer {
	min-height: 14.0625vw;
	display: flex;
	gap: 3.125vw;
	align-items: center;
	padding: 0 3.125vw;
	clip-path: var(--squircle);
	background: #fff;
	font-size: 3.4375vw;
	font-weight: 800;
}

.-quiz-answer-code {
	width: 8.75vw;
	height: 8.75vw;
	display: grid;
	place-items: center;
	flex: none;
	border-radius: 50%;
	background: var(--dimmer);
}

.-quiz-answer.---correct {
	background: #EAF1E9;
	color: #3F7044;
}

.-quiz-answer.---wrong {
	background: #FDECE6;
	color: #9B4F39;
}

.-quiz-progress {
	width: 93.75vw;
	height: 2.1875vw;
	border-radius: 6.25vw;
	overflow: hidden;
	background: var(--dimmer);
}

.-quiz-progress i {
	width: var(--quiz-progress,20%);
	height: 100%;
	display: block;
	border-radius: inherit;
	background: var(--app-accent);
}

.-quiz-score {
	width: 93.75vw;
	color: var(--app-muted);
	font-size: 3.125vw;
	font-weight: 850;
	text-align: right;
}

.-quiz-standby,
.-quiz-complete {
	width: 93.75vw;
	min-height: 62.5vw;
	display: flex;
	gap: 2.5vw;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	padding: 6.25vw;
	text-align: center;
	clip-path: var(--squircle);
	background: #fff;
}

.-quiz-standby .material-symbols-rounded,
.-quiz-complete .material-symbols-rounded {
	font-size: 15.625vw;
	color: var(--app-accent);
}

.-quiz-standby b,
.-quiz-complete b {
	font-family: var(--font-editorial);
	font-size: 6.25vw;
}

.-quiz-standby p,
.-quiz-complete p {
	margin: 0;
	color: var(--app-muted);
	font-size: 3.125vw;
	font-weight: 650;
	line-height: 1.5;
}

.-quiz-race-overlay {
	inset: 0;
	z-index: 80;
	display: grid;
	position: absolute;
	place-items: center;
	pointer-events: auto;
	backdrop-filter: blur(3.125vw);
	background: rgb(255 255 255 / 48%);
}

.-quiz-race-box {
	width: 62.5vw;
	aspect-ratio: 1/1;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	clip-path: var(--squircle);
	background: rgb(255 255 255 / 88%);
}

.-quiz-race-number {
	color: var(--app-accent);
	font-family: Clock,var(--font-rounded);
	font-size: 25vw;
	font-weight: 900;
	line-height: 1;
}

.-quiz-race-copy {
	margin-top: 1.5625vw;
	color: #4E3E38;
	font-size: 3.125vw;
	font-weight: 900;
	letter-spacing: .3125vw;
	text-transform: uppercase;
}

.-quiz-race-lights {
	margin-top: 4.6875vw;
	display: flex;
	gap: 1.5625vw;
}

.-quiz-race-light {
	width: 6.25vw;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: color-mix(in srgb,var(--app-theme) 65%,#fff);
}

.-quiz-race-light.---on {
	background: var(--app-accent);
}

.-quiz-midnight {
	color: #fff;
	font-family: Clock,var(--font-rounded);
	font-size: 4.0625vw;
	font-weight: 900;
	letter-spacing: .15625vw;
}

.-podium-fellowship {
	width: 93.75vw;
	display: grid;
	grid-template-columns: 1fr 1.15fr 1fr;
	gap: 2.5vw;
	align-items: end;
}

.-podium-rank {
	min-height: 34.375vw;
	display: flex;
	gap: 1.25vw;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	padding: 3.125vw;
	clip-path: var(--squircle);
	background: #fff;
	text-align: center;
}

.-podium-rank:nth-child(2) {
	min-height: 42.5vw;
}

.-podium-rank .material-symbols-rounded {
	width: 10vw;
	height: 10vw;
	font-size: 7.5vw;
	color: var(--rank-color,var(--app-accent));
}

.-podium-rank b {
	font-size: 3.125vw;
}

.-podium-rank small {
	color: var(--app-muted);
	font-size: 3.125vw;
}

.-leader-row {
	width: 93.75vw;
	min-height: 14.0625vw;
	display: flex;
	gap: 3.125vw;
	align-items: center;
	padding: 0 3.125vw;
	clip-path: var(--squircle);
	background: #fff;
}

.-leader-rank {
	width: 8.75vw;
	font-size: 4.375vw;
	font-weight: 900;
	color: var(--app-accent);
	text-align: center;
}

.-leader-copy {
	flex: 1;
	min-width: 0;
}

.-leader-copy b {
	display: block;
	font-size: 3.4375vw;
}

.-leader-copy small {
	color: var(--app-muted);
	font-size: 3.125vw;
}

.-leader-score {
	font-size: 3.4375vw;
	font-weight: 900;
	color: #3F7044;
}