.kqg-game {
	--kqg-navy: #17324d;
	--kqg-blue: #11b4d4;
	--kqg-red: #e4495e;
	--kqg-green: #16865a;
	--kqg-soft: #eef7f6;
	--kqg-sticky-top: 8px;
	--kqg-prompt-height: 0px;
	--kqg-prompt-max-height: 460px;
	max-width: 780px;
	margin: 2rem auto;
	color: var(--kqg-navy);
	font-family: inherit;
}

.kqg-card {
	padding: clamp(22px, 5vw, 50px);
	border: 1px solid rgba(23, 50, 77, .15);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(23, 50, 77, .1);
	text-align: center;
}

.kqg-eyebrow { margin: 0 0 8px; color: var(--kqg-blue); font-weight: 800; letter-spacing: .14em; }
.kqg-card h2 { margin: .25em 0 .65em; line-height: 1.25; }
.kqg-button,
.kqg-choice { appearance: none; border: 1px solid rgba(23, 50, 77, .22); border-radius: 12px; background: #fff; color: var(--kqg-navy); font: inherit; font-weight: 700; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.kqg-button { padding: 12px 22px; }
.kqg-button-primary { border-color: var(--kqg-blue); background: var(--kqg-blue); color: #fff; }
.kqg-button:hover,
.kqg-button:focus-visible,
.kqg-choice:hover,
.kqg-choice:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(23, 50, 77, .14); outline: 3px solid rgba(17, 180, 212, .2); outline-offset: 2px; }
.kqg-button:disabled,
.is-submitting button,
.is-submitting input { pointer-events: none; opacity: .55; }
.kqg-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: .95rem; font-weight: 700; }
.kqg-timer { position: relative; height: 10px; margin-bottom: 26px; overflow: visible; border-radius: 999px; background: #dce8e7; }
.kqg-timer-bar { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--kqg-red), #ffbd4a, var(--kqg-blue)); transform-origin: left center; transition: transform .1s linear; }
.kqg-timer-text { position: absolute; top: 14px; right: 0; font-size: .9rem; }
.kqg-question-image { display: block; width: auto; max-width: 100%; max-height: 440px; margin: 22px auto; border-radius: 14px; object-fit: contain; }
.kqg-game .kqg-question-text { font-size: clamp(1.08rem, 2.4vw, 1.6rem); }
.kqg-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.kqg-choice { min-height: 64px; padding: 14px; text-align: left; }
.kqg-answer-form { display: flex; gap: 10px; margin-top: 24px; }
.kqg-answer-input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(23, 50, 77, .3); border-radius: 12px; font: inherit; }
.kqg-answer-input:focus { border-color: var(--kqg-blue); outline: 3px solid rgba(17, 180, 212, .2); }
.kqg-start-form { display: grid; gap: 14px; max-width: 420px; margin: 24px auto 0; text-align: left; }
.kqg-start-form label { display: grid; gap: 7px; font-weight: 700; }
.kqg-result-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 14px; place-items: center; border-radius: 50%; background: var(--kqg-green); color: #fff; font-size: 2.5rem; font-weight: 800; }
.kqg-feedback.is-wrong .kqg-result-icon { background: var(--kqg-red); }
.kqg-points,
.kqg-final-score { font-size: 1.3rem; font-weight: 800; }
.kqg-inline-results { margin-top: 32px; }
.kqg-results-table-wrap { overflow-x: auto; }
.kqg-results-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .95rem; text-align: left; }
.kqg-results-table th,
.kqg-results-table td { padding: 9px 10px; border-bottom: 1px solid rgba(23, 50, 77, .14); }
.kqg-results-table th { background: var(--kqg-soft); font-weight: 800; }
.kqg-results-error { color: var(--kqg-red); }
.kqg-screen-reader { 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: 620px) {
	.kqg-card { border-radius: 14px; }
	.kqg-question-card { overflow: visible; }
	.kqg-question-prompt {
		position: sticky;
		top: var(--kqg-sticky-top);
		z-index: 20;
		max-height: var(--kqg-prompt-max-height);
		padding: 14px;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 1px solid rgba(23, 50, 77, .16);
		border-radius: 12px;
		background: rgba(255, 255, 255, .98);
		box-shadow: 0 10px 28px rgba(23, 50, 77, .14);
		scrollbar-width: thin;
		text-align: left;
		-webkit-overflow-scrolling: touch;
	}
	.kqg-question-prompt .kqg-head { margin-bottom: 10px; }
	.kqg-question-prompt .kqg-timer { margin-bottom: 22px; }
	.kqg-question-prompt .kqg-question-image { max-height: min(26dvh, 220px); margin-block: 16px; }
	.kqg-question-prompt .kqg-question-text { margin-bottom: 0; }
	.kqg-question-card .kqg-answer-area {
		scroll-margin-top: calc(var(--kqg-sticky-top) + var(--kqg-prompt-height) + 12px);
	}
	.kqg-game.has-keyboard-focus .kqg-question-prompt {
		padding: 12px;
		border-color: rgba(17, 180, 212, .45);
		box-shadow: 0 12px 32px rgba(23, 50, 77, .2);
	}
	.kqg-game.has-keyboard-focus .kqg-question-prompt .kqg-question-image { max-height: min(18dvh, 120px); }
	.kqg-game.has-keyboard-focus .kqg-question-prompt .kqg-question-text { font-size: 1rem; line-height: 1.35; }
	.kqg-choices { grid-template-columns: 1fr; }
	.kqg-answer-form { flex-direction: column; }
	.kqg-head { font-size: .85rem; }
}