.quiz-hub-page,
.quiz-page {
	min-height: calc(100vh - 80px);
	padding: clamp(42px, 7vw, 88px) 20px 100px;
	background:
		radial-gradient(circle at 50% -10%, rgba(168, 148, 244, .42), transparent 38%),
		radial-gradient(circle at 8% 38%, rgba(117, 87, 232, .22), transparent 34%),
		linear-gradient(180deg, #2b205a 0%, #17122f 52%, #090b19 100%);
	color: #f7f5ff;
}

.quiz-hero,
.quiz-hub,
.quiz-shell {
	width: min(1080px, 100%);
	margin-inline: auto;
}

.quiz-hero {
	text-align: center;
	margin-bottom: clamp(34px, 6vw, 64px);
}

.quiz-hero--game {
	position: relative;
	margin-bottom: 30px;
}

.quiz-hero__eyebrow {
	color: #b8a9ff;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.quiz-page .quiz-hero h1,
.quiz-hub-page .quiz-hero h1,
.quiz-hub__intro h2,
.quiz-question h2,
.quiz-results h2 {
	color: #ffffff !important;
}

.quiz-hero h1 {
	margin: 12px 0 12px;
	font-size: clamp(2.8rem, 8vw, 6rem);
	line-height: .94;
	letter-spacing: -.055em;
}

.quiz-hero p {
	max-width: 620px;
	margin: 0 auto;
	color: #b9b8ca;
	font-size: clamp(1rem, 2vw, 1.18rem);
	line-height: 1.65;
}

.quiz-back-link {
	display: inline-flex;
	margin-bottom: 28px;
	color: #c5baff;
	font-weight: 700;
	text-decoration: none;
}

.quiz-hub__intro {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 22px;
}

.quiz-hub__intro h2 {
	margin: 8px 0 0;
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	letter-spacing: -.04em;
}

.quiz-hub__intro p {
	max-width: 460px;
	margin: 0;
	color: #a9a8bb;
	line-height: 1.6;
}

.quiz-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.quiz-hub-card {
	position: relative;
	display: flex;
	min-height: 360px;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 24px;
	background: rgba(26, 27, 54, .82);
	box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
	color: inherit;
	text-decoration: none;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.quiz-hub-card:hover,
.quiz-hub-card:focus-visible {
	transform: translateY(-5px);
	border-color: rgba(191, 176, 255, .58);
	box-shadow: 0 22px 52px rgba(0, 0, 0, .3);
}

.quiz-hub-card__preview {
	position: relative;
	height: 188px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(112, 88, 223, .38), rgba(31, 36, 79, .12));
}

.quiz-hub-card--kpop .quiz-hub-card__preview { background: linear-gradient(135deg, #5a2f78, #1d2347); }
.quiz-hub-card--soccer .quiz-hub-card__preview { background: linear-gradient(135deg, #164f58, #202249); }
.quiz-hub-card--basketball .quiz-hub-card__preview { background: linear-gradient(135deg, #703d31, #27234f); }
.quiz-hub-card--football .quiz-hub-card__preview { background: linear-gradient(135deg, #19524d, #182448); }
.quiz-hub-card--gaming .quiz-hub-card__preview { background: linear-gradient(135deg, #423a78, #172942); }
.quiz-hub-card--actors .quiz-hub-card__preview { background: linear-gradient(135deg, #704262, #24204a); }

.quiz-hub-card__glow {
	position: absolute;
	inset: 15% 16%;
	border-radius: 50%;
	background: #ba9dff;
	filter: blur(42px);
	opacity: .23;
}

.quiz-hub-card__people {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: end;
	justify-content: center;
	gap: 18px;
	padding: 14px 30px 0;
}

.quiz-hub-card__people img {
	position: relative;
	z-index: 1;
	width: 42%;
	max-width: 130px;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .26));
	opacity: .9;
}

.quiz-hub-card__loading {
	align-self: center;
	color: rgba(255,255,255,.62);
	font-size: .8rem;
}

.quiz-hub-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 21px 22px;
}

.quiz-hub-card__kicker {
	color: #a99bf5;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.quiz-hub-card h3 {
	margin: 8px 0 7px;
	color: #ffffff !important;
	font-size: 1.32rem;
	letter-spacing: -.03em;
}

.quiz-hub-card p {
	margin: 0;
	color: #aaa9bd;
	font-size: .9rem;
	line-height: 1.5;
}

.quiz-hub-card__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 20px;
	color: #e8e2ff;
	font-size: .85rem;
	font-weight: 800;
}

.quiz-shell {
	max-width: 900px;
	padding: clamp(20px, 4vw, 42px);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 30px;
	background: rgba(20, 22, 48, .75);
	box-shadow: 0 25px 75px rgba(0,0,0,.25);
}

.quiz-loading {
	display: grid;
	min-height: 420px;
	place-content: center;
	justify-items: center;
	gap: 16px;
	color: #b5b3c8;
}

.quiz-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(255,255,255,.14);
	border-top-color: #bdaaff;
	border-radius: 50%;
	animation: quiz-spin .8s linear infinite;
}

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

.quiz-progress {
	display: flex;
	align-items: end;
	justify-content: space-between;
	color: #a9a6bd;
}

.quiz-progress__label {
	display: block;
	margin-bottom: 4px;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.quiz-progress strong,
.quiz-score strong {
	color: #f7f5ff;
}

.quiz-progress__track {
	height: 6px;
	margin-top: 13px;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(255,255,255,.1);
}

.quiz-progress__track span {
	display: block;
	width: 10%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #9d87ff, #ddacff);
	transition: width .35s ease;
}

.quiz-question {
	margin: clamp(34px, 5vw, 54px) 0 20px;
	text-align: center;
}

.quiz-question h2 {
	margin: 8px 0 7px;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	letter-spacing: -.04em;
}

.quiz-question p {
	max-width: 580px;
	margin: auto;
	color: #a9a8bb;
	line-height: 1.55;
}

.quiz-battle-stage {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 3vw, 32px);
	padding: 18px 0 8px;
}

.quiz-battle-stage::after {
	display: none;
}

.quiz-competitor {
	position: relative;
	display: flex;
	min-height: 380px;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	padding: 18px 12px 20px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 24px;
	background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
	color: #fff;
	cursor: pointer;
	transition: transform .24s ease, border-color .24s ease, background .24s ease, opacity .24s ease;
}

.quiz-competitor:hover,
.quiz-competitor:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(198,181,255,.7);
}

.quiz-competitor.is-selected {
	border-color: #c4afff;
	background: linear-gradient(180deg, rgba(154,126,255,.25), rgba(255,255,255,.04));
	box-shadow: 0 0 0 3px rgba(165,137,255,.13);
}

.quiz-competitor.is-correct {
	border-color: #73dbb0;
	background: linear-gradient(180deg, rgba(57,174,128,.24), rgba(255,255,255,.04));
}

.quiz-competitor.is-wrong {
	border-color: #f58f9c;
	background: linear-gradient(180deg, rgba(202,70,99,.2), rgba(255,255,255,.04));
}

.quiz-competitor:disabled {
	cursor: default;
	opacity: 1;
}

.quiz-competitor__name {
	position: absolute;
	top: 18px;
	z-index: 2;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
	max-width: 90%;
	font-size: clamp(1rem, 2.4vw, 1.35rem);
	font-weight: 800;
	letter-spacing: -.03em;
}

.quiz-figure-stage {
	display: flex;
	align-items: end;
	justify-content: center;
	width: 100%;
	height: 272px;
	margin-top: 36px;
	overflow: hidden;
}

.quiz-figure-stage img {
	width: min(100%, 230px);
	height: 238px;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 14px 12px rgba(0,0,0,.28));
	transform-origin: bottom center;
	transition: height .75s cubic-bezier(.2,.75,.2,1), transform .75s cubic-bezier(.2,.75,.2,1), filter .4s ease;
}

.quiz-competitor__meta {
	margin-top: 12px;
	color: #aaa8bd;
	font-size: .76rem;
}

.quiz-competitor__height {
	margin-top: 5px;
	color: #d4c8ff;
	font-size: .95rem;
}

.quiz-actions [data-quiz-lock] {
	min-width: 190px;
	min-height: 52px;
	padding: 14px 24px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 14px;
	background: linear-gradient(135deg, #7557e8 0%, #9278f2 100%);
	box-shadow: 0 12px 26px rgba(117, 87, 232, .32);
	color: #ffffff;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 800;
	letter-spacing: -.01em;
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.quiz-actions [data-quiz-lock]:not(:disabled):hover,
.quiz-actions [data-quiz-lock]:not(:disabled):focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(117, 87, 232, .45);
}

.quiz-actions [data-quiz-lock]:disabled {
	cursor: not-allowed;
	opacity: .42;
	box-shadow: none;
}

.quiz-actions [data-quiz-next] {
	min-width: 190px;
	min-height: 52px;
	padding: 14px 24px;
	border: 1px solid rgba(238, 234, 254, .28);
	border-radius: 14px;
	background: rgba(238, 234, 254, .12);
	box-shadow: 0 10px 22px rgba(3, 6, 20, .18);
	color: #ffffff;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 800;
	transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.quiz-actions [data-quiz-next]:hover,
.quiz-actions [data-quiz-next]:focus-visible {
	transform: translateY(-2px);
	background: #eeeafe;
	box-shadow: 0 14px 28px rgba(3, 6, 20, .28);
	color: #17122f;
}

.quiz-actions {
	display: flex;
	min-height: 56px;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.quiz-feedback {
	width: 100%;
	color: #b8b5c7;
	font-size: .95rem;
	text-align: center;
}

.quiz-feedback.is-correct { color: #82e5bc; }
.quiz-feedback.is-wrong { color: #ffadb7; }

.quiz-results {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(20px, 4vw, 42px) 0 8px;
	text-align: center;
}

.quiz-results h2 {
	margin: 10px 0 22px;
	font-size: clamp(2rem, 5vw, 3.2rem);
	letter-spacing: -.05em;
}

.quiz-results__score-card {
	width: min(100%, 500px);
	margin: 0 auto;
	padding: 22px 26px 24px;
	border: 1px solid rgba(238, 234, 254, .2);
	border-radius: 24px;
	background:
		radial-gradient(circle at 50% 0%, rgba(168, 148, 244, .22), transparent 58%),
		rgba(8, 20, 38, .42);
	box-shadow: 0 18px 40px rgba(3, 6, 20, .2);
}

.quiz-results__score-label {
	color: #bcaeff;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.quiz-results__score-line {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
	white-space: nowrap;
}

.quiz-results__score-line strong {
	color: #ffffff;
	font-size: clamp(4rem, 12vw, 6.4rem);
	font-weight: 900;
	line-height: .92;
	letter-spacing: -.08em;
}

.quiz-results__score-total {
	color: #d9d0ff;
	font-size: clamp(1.45rem, 4vw, 2rem);
	font-weight: 800;
}

.quiz-results__percent {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin-top: 14px;
	padding: 5px 13px;
	border: 1px solid rgba(168, 148, 244, .35);
	border-radius: 999px;
	background: rgba(117, 87, 232, .24);
	color: #eeeafe;
	font-size: .85rem;
	font-weight: 800;
}

.quiz-results__message {
	max-width: 500px;
	margin: 20px auto 24px;
	color: #c4c1d2;
	line-height: 1.55;
}

.quiz-results__graphic {
	display: block;
	width: min(100%, 420px);
	aspect-ratio: 1;
	margin: 26px auto 24px;
	border: 1px solid rgba(238, 234, 254, .18);
	border-radius: 22px;
	box-shadow: 0 22px 48px rgba(3, 6, 20, .34);
}

.quiz-results__actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.quiz-results__actions .button {
	min-width: 160px;
	min-height: 50px;
	padding: 13px 22px;
	border-radius: 14px;
	font-family: inherit;
	font-size: .9rem;
	font-weight: 800;
	transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.quiz-results__actions [data-quiz-share] {
	border: 1px solid rgba(255, 255, 255, .18);
	background: linear-gradient(135deg, #7557e8 0%, #9278f2 100%);
	box-shadow: 0 12px 26px rgba(117, 87, 232, .3);
	color: #ffffff;
}

.quiz-results__actions [data-quiz-share]:hover,
.quiz-results__actions [data-quiz-share]:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(117, 87, 232, .44);
}

.quiz-results__actions [data-quiz-again] {
	border: 1px solid rgba(238, 234, 254, .28);
	background: rgba(238, 234, 254, .12);
	box-shadow: 0 10px 22px rgba(3, 6, 20, .16);
	color: #ffffff;
}

.quiz-results__actions [data-quiz-again]:hover,
.quiz-results__actions [data-quiz-again]:focus-visible {
	transform: translateY(-2px);
	background: #eeeafe;
	color: #17122f;
}

.quiz-results__back {
	display: inline-block;
	margin-top: 22px;
	color: #c5baff;
	font-weight: 700;
	text-decoration: none;
}

.quiz-page [hidden],
.quiz-hub-page [hidden] { display: none !important; }

@media (max-width: 840px) {
	.quiz-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.quiz-hub__intro { display: block; }
	.quiz-hub__intro p { margin-top: 13px; }
	.quiz-hub-grid { grid-template-columns: 1fr; }
	.quiz-hub-card { min-height: 330px; }
	.quiz-battle-stage { gap: 9px; }
	.quiz-competitor { min-height: 320px; padding-inline: 6px; border-radius: 18px; }
	.quiz-figure-stage { height: 230px; }
	.quiz-figure-stage img { height: 205px; }
	.quiz-competitor__name { top: 14px; font-size: .93rem; }
	.quiz-competitor__meta { font-size: .68rem; }
	.quiz-shell { border-radius: 22px; padding: 17px; }
	.quiz-results__actions .button { width: 100%; }
}


/* Group logo badge centered between the two quiz competitors. */
.quiz-battle-logo{position:absolute;z-index:4;top:50%;left:50%;display:grid;width:72px;height:72px;place-items:center;transform:translate(-50%,-50%);border:5px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(14,20,52,.94);box-shadow:0 12px 30px rgba(0,0,0,.36);pointer-events:none}.quiz-battle-logo img{width:100%;height:100%;padding:8px;border-radius:50%;object-fit:contain}@media(max-width:620px){.quiz-battle-logo{width:58px;height:58px;border-width:4px}.quiz-battle-logo img{padding:6px}}

/* Custom quiz logo badges */
.quiz-hub-card__logo{position:absolute;z-index:3;top:50%;left:50%;display:grid;width:116px;height:116px;place-items:center;transform:translate(-50%,-50%);pointer-events:none}.quiz-hub-card__logo img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.58))}.quiz-hub-card__people img{z-index:1}@media(max-width:650px){.quiz-hub-card__logo{width:92px;height:92px}}

/* Public quiz search */
.quiz-hub__search{display:flex;align-items:center;gap:12px;margin:0 0 20px}.quiz-hub-search{display:flex;align-items:center;gap:10px;width:min(420px,100%);padding:11px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(18,19,44,.7);color:#b8a9ff}.quiz-hub-search:focus-within{border-color:#a894f4;box-shadow:0 0 0 3px rgba(168,148,244,.16)}.quiz-hub-search svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.quiz-hub-search input{width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:.9rem}.quiz-hub-search input::placeholder{color:#aaa9bd}.quiz-hub__search-count{color:#aaa9bd;font-size:.8rem}.quiz-hub-card[hidden]{display:none}.quiz-hub__empty{margin:0 0 20px;padding:28px;border:1px dashed rgba(255,255,255,.2);border-radius:18px;color:#b9b8ca;text-align:center}.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){.quiz-hub__search{align-items:flex-start;flex-direction:column}.quiz-hub-search{width:100%}}