/* Comic-paper quiz. All rules belong to this section. */
.asf-ak-quiz { color: var(--asf-ak-ink); }
.asf-ak-quiz__panel {
	max-width: 880px;
	min-width: 0;
	margin: 36px auto 12px;
	padding: clamp(20px, 4vw, 48px);
	background: var(--asf-ak-paper-lt);
	border: 4px solid var(--asf-ak-ink);
	border-radius: 8px;
	box-shadow: var(--asf-ak-shadow-lg);
	transform: rotate(-0.6deg);
	overflow-wrap: anywhere;
}
.asf-ak-quiz [hidden] { display: none !important; }
.asf-ak-quiz__questions,
.asf-ak-quiz__answers { margin: 0; padding: 0; list-style: none; }
.asf-ak-quiz__question + .asf-ak-quiz__question { margin-top: 36px; }
.asf-ak-quiz__panel[data-quiz-ready] .asf-ak-quiz__question { margin-top: 0; }
.asf-ak-quiz__progress {
	display: inline-block;
	margin: 0 0 20px;
	padding: 4px 14px;
	border: var(--asf-ak-line) solid var(--asf-ak-ink);
	border-radius: 999px;
	background: var(--asf-ak-eerie);
	font-family: var(--asf-ak-round);
	font-weight: 600;
	font-size: 1rem;
}
.asf-ak-quiz__heading {
	font-family: var(--asf-ak-display);
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
	font-weight: 800;
	line-height: 1.12;
	scroll-margin-top: 100px;
}
.asf-ak-quiz__answers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 22px;
	margin-top: 28px;
	padding-bottom: 18px;
}
.asf-ak-quiz__answer-item { min-width: 0; display: flex; }
.asf-ak-quiz__answer {
	width: 100%;
	min-height: 100px;
	padding: 18px;
	font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
	font-weight: 600;
	box-shadow: var(--asf-ak-shadow);
	cursor: pointer;
	transition: background-color .18s var(--asf-ak-ease), box-shadow .18s var(--asf-ak-ease);
}
.asf-ak-quiz__answer:disabled { cursor: default; opacity: 1; }
.asf-ak-quiz__answer:not(:disabled):hover,
.asf-ak-quiz__answer:focus-visible { background: var(--asf-ak-eerie); box-shadow: 3px 3px 0 var(--asf-ak-ink); }
.asf-ak-quiz__answer:focus-visible,
.asf-ak-quiz__action:focus-visible,
.asf-ak-quiz__heading:focus,
.asf-ak-quiz__copy:focus { outline: 3px solid var(--asf-ak-ink); outline-offset: 5px; }
.asf-ak-quiz__result { text-align: center; }
.asf-ak-quiz__letter {
	width: fit-content;
	margin: 16px auto 24px;
	font-family: var(--asf-ak-round);
	font-weight: 700;
	font-size: clamp(5rem, 3rem + 6vw, 9rem);
	line-height: .85;
	-webkit-text-stroke: 4px var(--asf-ak-ink);
	paint-order: stroke fill;
	text-shadow: 6px 6px 0 var(--asf-ak-ink);
}
.asf-ak-quiz__result-label { display: block; margin-bottom: 8px; font-family: var(--asf-ak-round); font-size: 1.1rem; font-weight: 500; }
.asf-ak-quiz__line { margin: 16px auto 0; max-width: 36em; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); }
.asf-ak-quiz__picture { margin: 24px auto; max-width: 360px; }
.asf-ak-quiz__img { width: auto; max-width: 100%; max-height: 340px; height: auto; object-fit: contain; margin-inline: auto; }
.asf-ak-quiz__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 28px; }
.asf-ak-quiz__action {
	max-width: 100%;
	min-height: 48px;
	padding: 12px 22px;
	border: var(--asf-ak-line) solid var(--asf-ak-ink);
	border-radius: 999px;
	background: var(--asf-ak-white);
	box-shadow: var(--asf-ak-shadow);
	font-family: var(--asf-ak-round);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .18s var(--asf-ak-ease);
}
.asf-ak-quiz__action--share { background: var(--asf-ak-cranky); }
.asf-ak-quiz__action:hover { background: var(--asf-ak-eerie); }
.asf-ak-quiz__action:disabled { cursor: wait; opacity: .7; }
.asf-ak-quiz__status { margin: 24px 0 0; font-family: var(--asf-ak-round); text-align: center; }
.asf-ak-quiz__status:empty { margin: 0; }
.asf-ak-quiz__manual { display: block; margin-top: 24px; text-align: left; }
.asf-ak-quiz__copy { display: block; width: 100%; margin-top: 8px; padding: 12px; font: inherit; color: var(--asf-ak-ink); background: var(--asf-ak-white); border: var(--asf-ak-line) solid var(--asf-ak-ink); resize: vertical; }
@media (max-width: 599px) {
	.asf-ak-quiz__panel { margin-inline: 0; padding: 20px 16px; transform: none; box-shadow: var(--asf-ak-shadow); }
	.asf-ak-quiz__answers { grid-template-columns: minmax(0, 1fr); }
	.asf-ak-quiz__answer { min-height: 76px; }
	.asf-ak-quiz__actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	.asf-ak-quiz__answer,
	.asf-ak-quiz__action { transition: none; }
	.asf-ak-quiz__letter,
	.asf-ak-quiz__answer { animation: none; }
	.asf-ak-quiz__heading { scroll-behavior: auto; }
}