/* «Бүгінгі сұрақ» (спека игр, §15). Цвета, радиусы и шрифты — токены сайта
   (static/styles/styles.scss): белая карточка 14px на кремовом фоне, золото
   для акцента, мақал — Georgia, как в словаре и на главной. */

.quiz-wrap[hidden] { display: none; }

.quiz {
	background: #fff;
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	.quiz { padding: 24px 32px; }
}

.quiz-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 8px;
}

.quiz-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #777;
}

/* На главной подписи нет — название игры прижимается влево. */
.quiz-game { font-size: 13px; color: #8A7040; margin-right: auto; }
.quiz-label + .quiz-game { margin-right: 0; }

.quiz-ask {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: #111;
	margin-bottom: 14px;
}

.quiz-proverb {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	line-height: 1.5;
	color: #1F1F1F;
	margin-bottom: 18px;
}

@media (min-width: 768px) {
	.quiz-proverb { font-size: 24px; }
}

/* Пустое место в мақале: золотая черта, как подчёркивание в тетради. */
.quiz-blank {
	display: inline-block;
	width: 4.2em;
	height: .9em;
	vertical-align: -.08em;
	border-radius: 4px;
	background: #F6EEDC;
	box-shadow: inset 0 -2px 0 #E8B84B;
}

.quiz-filled {
	font-weight: 700;
	box-shadow: inset 0 -.18em 0 rgba(232, 184, 75, .55);
}

.quiz-thought {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 19px;
	line-height: 1.55;
	color: #1F1F1F;
	border-left: 3px solid #E8B84B;
	padding: 2px 0 2px 16px;
	margin-bottom: 18px;
}

.quiz-options { display: grid; gap: 10px; }

@media (min-width: 640px) {
	.quiz-options { grid-template-columns: 1fr 1fr; }
}

.quiz-option {
	font: inherit;
	font-size: 16px;
	line-height: 1.35;
	text-align: left;
	padding: 13px 16px;
	border-radius: 10px;
	border: 1px solid #EDE9E0;
	background: #F7F4EF;
	color: #111;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, opacity .2s;
}

.quiz-options.is-quote .quiz-option {
	font-family: Georgia, "Times New Roman", serif;
}

.quiz-option:hover:not(:disabled) { border-color: #E8B84B; background: #FFF8E6; }
.quiz-option:focus-visible { outline: 2px solid #E8B84B; outline-offset: 2px; }
.quiz-option:disabled { cursor: default; }
.quiz-option.is-picked { border-color: #E8B84B; }

.quiz-options.is-revealed .quiz-option { opacity: .5; }
.quiz-options.is-revealed .quiz-option.is-right,
.quiz-options.is-revealed .quiz-option.is-wrong { opacity: 1; }
.quiz-option.is-right { background: #E9F6EC; border-color: #9BCFA6; color: #1F5A2B; }
.quiz-option.is-wrong { background: #FBECEA; border-color: #EDB3AA; color: #8A2A1F; }

.quiz-after { margin-top: 18px; }

.quiz-verdict { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.quiz-verdict.is-right { color: #2E6B3A; }
.quiz-verdict.is-wrong { color: #B03A2E; }

.quiz-explanation {
	font-size: 15px;
	line-height: 1.6;
	color: #444;
	margin-bottom: 10px;
}

.quiz-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #8A7040;
	text-decoration: none;
}

.quiz-more:hover { text-decoration: underline; }
.quiz-more svg { width: 14px; height: 14px; }

.quiz .tg-cta { margin: 18px 0 0; }

@media (prefers-reduced-motion: reduce) {
	.quiz-option { transition: none; }
}