/* GK and GS questions: hub and exam quiz pages. */

.ifja-gk-tone-1 { --gk-tone: #4f46e5; --gk-tone-soft: #eef2ff; }
.ifja-gk-tone-2 { --gk-tone: #db2777; --gk-tone-soft: #fdf2f8; }
.ifja-gk-tone-3 { --gk-tone: #0d9488; --gk-tone-soft: #f0fdfa; }
.ifja-gk-tone-4 { --gk-tone: #ea580c; --gk-tone-soft: #fff7ed; }
.ifja-gk-tone-5 { --gk-tone: #7c3aed; --gk-tone-soft: #f5f3ff; }
.ifja-gk-tone-6 { --gk-tone: #0284c7; --gk-tone-soft: #f0f9ff; }

/* Hero */
.ifja-gk-hero {
	margin: var(--ifja-space-4) 0 var(--ifja-space-6);
	padding: var(--ifja-space-6) var(--ifja-space-5);
	border-radius: 20px;
	color: #fff;
	background:
		radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18), transparent 40%),
		linear-gradient(135deg, #4338ca 0%, #7c3aed 55%, #db2777 100%);
	box-shadow: 0 18px 40px -20px rgba(67, 56, 202, 0.6);
}
.ifja-gk-hero__eyebrow {
	display: inline-block;
	margin: 0 0 var(--ifja-space-3);
	padding: 4px 12px;
	border-radius: var(--ifja-radius-pill);
	background: rgba(255, 255, 255, 0.18);
	font-size: var(--ifja-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ifja-gk-hero__title {
	margin: 0 0 var(--ifja-space-3);
	color: #fff;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	line-height: 1.15;
}
.ifja-gk-hero__text {
	max-width: 60ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--ifja-text-lg);
}
.ifja-gk-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ifja-space-3);
	margin: var(--ifja-space-5) 0 0;
	padding: 0;
	list-style: none;
}
.ifja-gk-stats li {
	min-width: 110px;
	padding: var(--ifja-space-3) var(--ifja-space-4);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(4px);
}
.ifja-gk-stats strong {
	display: block;
	font-size: 1.6rem;
	line-height: 1.1;
}
.ifja-gk-stats span {
	font-size: var(--ifja-text-sm);
	opacity: 0.85;
}

/* Hub: exam cards */
.ifja-gk-exams {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ifja-space-5);
	margin-bottom: var(--ifja-space-7);
}
.ifja-gk-exam {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ifja-border);
	border-radius: 18px;
	background: var(--ifja-bg);
	box-shadow: 0 6px 20px -12px rgba(15, 23, 42, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ifja-gk-exam:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px -18px rgba(15, 23, 42, 0.35);
}
.ifja-gk-exam__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ifja-space-5) var(--ifja-space-4);
	background: linear-gradient(135deg, var(--gk-tone), color-mix(in srgb, var(--gk-tone) 60%, #fff));
	color: #fff;
}
.ifja-gk-exam__badge {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.22);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
}
.ifja-gk-exam__count {
	padding: 4px 12px;
	border-radius: var(--ifja-radius-pill);
	background: rgba(255, 255, 255, 0.22);
	font-size: var(--ifja-text-sm);
	font-weight: 600;
}
.ifja-gk-exam__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ifja-space-3);
	padding: var(--ifja-space-4);
}
.ifja-gk-exam__name {
	margin: 0;
	font-size: var(--ifja-text-xl);
}
.ifja-gk-exam__name a {
	color: var(--ifja-text);
	text-decoration: none;
}
.ifja-gk-exam__text {
	margin: 0;
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-sm);
}
.ifja-gk-exam__subjects {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ifja-gk-exam__subjects li {
	padding: 3px 10px;
	border-radius: var(--ifja-radius-pill);
	background: var(--gk-tone-soft);
	color: var(--gk-tone);
	font-size: var(--ifja-text-xs);
	font-weight: 600;
}
.ifja-gk-btn {
	align-self: flex-start;
	margin-top: auto;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--ifja-radius-pill);
	background: var(--gk-tone, var(--ifja-accent));
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}
.ifja-gk-btn:hover,
.ifja-gk-btn:focus-visible {
	color: #fff;
	filter: brightness(1.1);
}

/* Exam page layout: questions left, progress panel right */
.ifja-gk-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--ifja-space-5);
	align-items: start;
}
.ifja-gk-quiz:not(.is-interactive) .ifja-gk-layout {
	grid-template-columns: minmax(0, 1fr);
}

/* Subject filter chips */
.ifja-gk-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ifja-space-2);
	margin-bottom: var(--ifja-space-5);
}
.ifja-gk-chip {
	padding: 7px 14px;
	border: 1px solid var(--ifja-border);
	border-radius: var(--ifja-radius-pill);
	background: var(--ifja-bg);
	color: var(--gk-tone, var(--ifja-text));
	font: inherit;
	font-size: var(--ifja-text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ifja-gk-chip span {
	margin-left: 4px;
	opacity: 0.7;
}
.ifja-gk-chip:hover {
	border-color: var(--gk-tone, var(--ifja-accent));
}
.ifja-gk-chip.is-active {
	border-color: var(--gk-tone, var(--ifja-accent));
	background: var(--gk-tone, var(--ifja-accent));
	color: #fff;
}

/* Subject sections and question cards */
.ifja-gk-subject {
	margin-bottom: var(--ifja-space-6);
}
.ifja-gk-subject__title {
	display: flex;
	align-items: center;
	gap: var(--ifja-space-2);
	margin: 0 0 var(--ifja-space-4);
	padding-left: var(--ifja-space-3);
	border-left: 5px solid var(--gk-tone);
	font-size: var(--ifja-text-xl);
}
.ifja-gk-subject__title span {
	padding: 2px 10px;
	border-radius: var(--ifja-radius-pill);
	background: var(--gk-tone-soft);
	color: var(--gk-tone);
	font-size: var(--ifja-text-sm);
}
.ifja-gk-list {
	display: grid;
	gap: var(--ifja-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ifja-gk-q {
	scroll-margin: 100px;
	padding: var(--ifja-space-4);
	border: 1px solid var(--ifja-border);
	border-radius: 16px;
	background: var(--ifja-bg);
	box-shadow: 0 4px 14px -10px rgba(15, 23, 42, 0.25);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ifja-gk-q.is-right { border-color: var(--ifja-success); }
.ifja-gk-q.is-wrong { border-color: var(--ifja-error); }
.ifja-gk-q.is-skipped { border-color: var(--ifja-warning); border-style: dashed; }
.ifja-gk-q.is-flash { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gk-tone, var(--ifja-accent)) 35%, transparent); }
.ifja-gk-q__head {
	display: flex;
	align-items: center;
	gap: var(--ifja-space-2);
	margin-bottom: var(--ifja-space-2);
}
.ifja-gk-q__num {
	display: grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--gk-tone);
	color: #fff;
	font-weight: 700;
	font-size: var(--ifja-text-sm);
}
.ifja-gk-q__tag {
	color: var(--gk-tone);
	font-size: var(--ifja-text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ifja-gk-q__text {
	margin: 0 0 var(--ifja-space-3);
	font-size: var(--ifja-text-lg);
	font-weight: 600;
	line-height: 1.45;
}

/* Options */
.ifja-gk-q__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ifja-space-2);
}
.ifja-gk-opt {
	display: flex;
	align-items: center;
	gap: var(--ifja-space-3);
	min-height: 48px;
	padding: 10px 12px;
	border: 2px solid var(--ifja-border);
	border-radius: 12px;
	background: var(--ifja-surface);
	color: var(--ifja-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.ifja-gk-opt:disabled {
	cursor: default;
}
.ifja-gk-quiz.is-interactive .ifja-gk-opt:not(:disabled):hover {
	border-color: var(--gk-tone, var(--ifja-accent));
	background: var(--gk-tone-soft, var(--ifja-accent-soft));
}
.ifja-gk-opt:not(:disabled):active {
	transform: scale(0.98);
}
.ifja-gk-opt__letter {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ifja-bg);
	border: 1px solid var(--ifja-border);
	font-weight: 700;
	font-size: var(--ifja-text-sm);
}
.ifja-gk-opt.is-correct {
	border-color: var(--ifja-success);
	background: var(--ifja-success-soft);
	animation: ifja-gk-pop 0.3s ease;
}
.ifja-gk-opt.is-correct .ifja-gk-opt__letter {
	border-color: var(--ifja-success);
	background: var(--ifja-success);
	color: #fff;
}
.ifja-gk-opt.is-chosen-wrong {
	border-color: var(--ifja-error);
	background: var(--ifja-error-soft);
	animation: ifja-gk-shake 0.35s ease;
}
.ifja-gk-opt.is-chosen-wrong .ifja-gk-opt__letter {
	border-color: var(--ifja-error);
	background: var(--ifja-error);
	color: #fff;
}
/* Without JavaScript the options are a plain list and the answer opens below. */
.ifja-gk-quiz:not(.is-interactive) .ifja-gk-opt {
	opacity: 1;
	background: var(--ifja-bg);
}

.ifja-gk-skip {
	margin-top: var(--ifja-space-3);
	padding: 6px 14px;
	border: 1px dashed var(--ifja-warning);
	border-radius: var(--ifja-radius-pill);
	background: transparent;
	color: var(--ifja-warning-strong);
	font: inherit;
	font-size: var(--ifja-text-sm);
	font-weight: 600;
	cursor: pointer;
}
.ifja-gk-q.is-skipped .ifja-gk-skip {
	display: none;
}

/* Answer and explanation */
.ifja-gk-q__answer {
	margin-top: var(--ifja-space-3);
	padding: var(--ifja-space-3) var(--ifja-space-4);
	border-radius: 12px;
	background: var(--ifja-surface);
}
.ifja-gk-q__answer summary {
	color: var(--ifja-accent);
	font-weight: 600;
	cursor: pointer;
}
.ifja-gk-quiz.is-interactive .ifja-gk-q__answer summary {
	display: none;
}
.ifja-gk-quiz.is-interactive .ifja-gk-q__answer:not([open]) {
	display: none;
}
.ifja-gk-quiz.is-interactive .ifja-gk-q__answer {
	animation: ifja-gk-in 0.25s ease;
}
.ifja-gk-q__answer p {
	margin: var(--ifja-space-1) 0;
}
.ifja-gk-q__result {
	font-weight: 700;
}
.ifja-gk-q__result:empty {
	display: none;
}
.ifja-gk-q__result.is-right { color: var(--ifja-success-strong); }
.ifja-gk-q__result.is-wrong { color: var(--ifja-error-strong); }
.ifja-gk-q__explain {
	color: var(--ifja-neutral-strong);
}

/* Right-side progress panel */
.ifja-gk-panel {
	position: sticky;
	top: 90px;
	padding: var(--ifja-space-4);
	border: 1px solid var(--ifja-border);
	border-radius: 18px;
	background: var(--ifja-bg);
	box-shadow: 0 12px 30px -18px rgba(15, 23, 42, 0.35);
}
.ifja-gk-panel__title {
	margin: 0 0 var(--ifja-space-3);
	font-size: var(--ifja-text-lg);
	font-weight: 700;
}
.ifja-gk-panel__track {
	height: 10px;
	overflow: hidden;
	border-radius: var(--ifja-radius-pill);
	background: var(--ifja-neutral-soft);
}
.ifja-gk-bar__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #4f46e5, #db2777);
	transition: width 0.3s ease;
}
.ifja-gk-panel__sub {
	margin: var(--ifja-space-2) 0 var(--ifja-space-4);
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-sm);
}
.ifja-gk-counts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ifja-space-2);
	margin: 0 0 var(--ifja-space-4);
	padding: 0;
	list-style: none;
}
.ifja-gk-counts li {
	padding: var(--ifja-space-2) var(--ifja-space-3);
	border-radius: 12px;
	background: var(--ifja-neutral-soft);
}
.ifja-gk-counts strong {
	display: block;
	font-size: 1.35rem;
	line-height: 1.1;
}
.ifja-gk-counts span {
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-xs);
	font-weight: 600;
}
.ifja-gk-counts .is-right { background: var(--ifja-success-soft); color: var(--ifja-success-strong); }
.ifja-gk-counts .is-wrong { background: var(--ifja-error-soft); color: var(--ifja-error-strong); }
.ifja-gk-counts .is-skipped { background: var(--ifja-warning-soft); color: var(--ifja-warning-strong); }
.ifja-gk-panel__label {
	margin: 0 0 var(--ifja-space-2);
	font-size: var(--ifja-text-sm);
	font-weight: 700;
}
.ifja-gk-palette {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
	gap: 6px;
	max-height: 260px;
	overflow-y: auto;
}
.ifja-gk-pal {
	height: 34px;
	border: 1px solid var(--ifja-border);
	border-radius: 8px;
	background: var(--ifja-bg);
	color: var(--ifja-text);
	font: inherit;
	font-size: var(--ifja-text-sm);
	font-weight: 600;
	cursor: pointer;
}
.ifja-gk-pal:hover { border-color: var(--ifja-accent); }
.ifja-gk-pal.is-right { border-color: var(--ifja-success); background: var(--ifja-success); color: #fff; }
.ifja-gk-pal.is-wrong { border-color: var(--ifja-error); background: var(--ifja-error); color: #fff; }
.ifja-gk-pal.is-skipped { border-color: var(--ifja-warning); background: var(--ifja-warning-soft); color: var(--ifja-warning-strong); }
.ifja-gk-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ifja-space-2) var(--ifja-space-3);
	margin: var(--ifja-space-3) 0;
	padding: 0;
	list-style: none;
	color: var(--ifja-text-muted);
	font-size: var(--ifja-text-xs);
}
.ifja-gk-legend li::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 5px;
	border: 1px solid var(--ifja-border);
	border-radius: 3px;
	vertical-align: -1px;
}
.ifja-gk-legend .is-right::before { border-color: var(--ifja-success); background: var(--ifja-success); }
.ifja-gk-legend .is-wrong::before { border-color: var(--ifja-error); background: var(--ifja-error); }
.ifja-gk-legend .is-skipped::before { border-color: var(--ifja-warning); background: var(--ifja-warning-soft); }
.ifja-gk-panel__reset {
	width: 100%;
	padding: 9px;
	border: 1px solid var(--ifja-border);
	border-radius: 10px;
	background: var(--ifja-surface);
	color: var(--ifja-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ifja-gk-panel__reset:hover { border-color: var(--ifja-error); color: var(--ifja-error-strong); }

/* Finished set */
.ifja-gk-done {
	margin: var(--ifja-space-5) 0;
	padding: var(--ifja-space-6) var(--ifja-space-5);
	border-radius: 20px;
	color: #fff;
	text-align: center;
	background: linear-gradient(135deg, #059669, #0d9488 60%, #0284c7);
	animation: ifja-gk-in 0.4s ease;
}
.ifja-gk-done__title { margin: 0; font-size: var(--ifja-text-xl); font-weight: 800; }
.ifja-gk-done__score { margin: var(--ifja-space-2) 0 var(--ifja-space-4); font-size: var(--ifja-text-lg); }
.ifja-gk-done .ifja-gk-btn { align-self: center; background: #fff; color: #047857; }

.ifja-gk-back { margin: var(--ifja-space-5) 0 var(--ifja-space-7); }
.ifja-gk-empty { margin-bottom: var(--ifja-space-7); }
.ifja-gk-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@keyframes ifja-gk-pop { 50% { transform: scale(1.03); } }
@keyframes ifja-gk-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes ifja-gk-in { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
	.ifja-gk-exam, .ifja-gk-opt, .ifja-gk-bar__fill { transition: none; }
	.ifja-gk-opt.is-correct, .ifja-gk-opt.is-chosen-wrong, .ifja-gk-q__answer, .ifja-gk-done { animation: none; }
}

/* Tablet and phone: the panel becomes a compact strip above the questions. */
@media (max-width: 1023px) {
	.ifja-gk-layout { grid-template-columns: minmax(0, 1fr); }
	.ifja-gk-panel {
		position: sticky;
		top: 64px;
		z-index: 5;
		order: -1;
		padding: var(--ifja-space-3);
	}
	.ifja-gk-panel__title,
	.ifja-gk-panel__label,
	.ifja-gk-palette,
	.ifja-gk-legend,
	.ifja-gk-panel__reset { display: none; }
	.ifja-gk-panel__sub { margin: var(--ifja-space-2) 0; }
	.ifja-gk-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
	.ifja-gk-counts li { padding: 6px; text-align: center; }
	.ifja-gk-counts strong { font-size: 1.05rem; }
}
@media (max-width: 600px) {
	.ifja-gk-hero { padding: var(--ifja-space-5) var(--ifja-space-4); border-radius: 16px; }
	.ifja-gk-q__options { grid-template-columns: minmax(0, 1fr); }
	.ifja-gk-stats li { min-width: 0; flex: 1; }
}