.wgf-placement {
	--cream: #fff8ed;
	--paper: #fffdf8;
	--ink: #172a54;
	--blue: #2850e8;
	--coral: #f45151;
	--teal: #3894aa;
	--yellow: #f7bd3d;
	--green: #75ad39;
	background: linear-gradient(145deg, var(--cream), #fff2df);
	border: 3px solid var(--ink);
	border-radius: 34px;
	box-shadow: 10px 12px 0 rgba(40, 80, 232, .18);
	color: var(--ink);
	font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
	margin: 28px auto;
	max-width: 980px;
	padding: clamp(22px, 4vw, 44px);
}

.wgf-placement-header { margin: 0 auto 30px; max-width: 760px; text-align: center; }
.wgf-placement-header > span {
	background: var(--coral);
	border: 2px solid var(--ink);
	border-radius: 999px;
	box-shadow: 3px 4px 0 var(--ink);
	color: #fff;
	display: inline-block;
	font-size: 16px;
	font-weight: 900;
	padding: 7px 16px;
	text-transform: uppercase;
}
.wgf-placement-header h2 { color: #1535b5; font-size: clamp(30px, 5vw, 48px); font-weight: 900; line-height: 1.05; margin: 18px 0 12px; text-transform: uppercase; }
.wgf-placement-header p { font-size: 17px; line-height: 1.55; margin: 0; }
.wgf-level-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.wgf-level-card {
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: 24px;
	box-shadow: 6px 7px 0 rgba(23, 42, 84, .2);
	color: var(--ink) !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 190px;
	padding: 24px;
	text-decoration: none !important;
	transition: transform .16s ease, box-shadow .16s ease;
}
.wgf-level-card:hover { box-shadow: 9px 10px 0 rgba(23, 42, 84, .22); transform: translateY(-4px) rotate(-1deg); }
.wgf-level-code { font-size: 48px; font-weight: 900; line-height: 1; }
.wgf-level-card strong { margin-top: auto; }
.wgf-level-card small { font-weight: 900; }
.wgf-level-card-1 { background: #e8f3d5; }
.wgf-level-card-2 { background: #dfe9ff; }
.wgf-level-card-3 { background: #fff0bd; }
.wgf-level-card-4 { background: #d9eff2; }
.wgf-level-card-5 { background: #ffe0dc; }
.wgf-placement-question {
	background: var(--paper);
	border: 2px solid var(--ink);
	border-left: 9px solid var(--blue);
	border-radius: 20px;
	box-shadow: 5px 6px 0 rgba(23, 42, 84, .13);
	margin: 0 0 22px;
	padding: 20px;
}
.wgf-placement-question:nth-child(4n+2) { border-left-color: var(--coral); }
.wgf-placement-question:nth-child(4n+3) { border-left-color: var(--yellow); }
.wgf-placement-question:nth-child(4n) { border-left-color: var(--teal); }
.wgf-placement-question legend { color: #1535b5; font-size: 19px; font-weight: 900; line-height: 1.45; padding: 0 8px; width: calc(100% - 16px); }
.wgf-placement-question legend span { align-items: center; background: var(--blue); border: 2px solid var(--ink); border-radius: 50%; color: #fff; display: inline-flex; height: 34px; justify-content: center; margin-right: 10px; width: 34px; }
.wgf-placement-options { display: grid; gap: 10px; margin-top: 15px; }
.wgf-placement-options label { align-items: center; background: #fff; border: 2px solid #ccd3df; border-radius: 14px; cursor: pointer; display: flex; gap: 11px; padding: 12px 14px; }
.wgf-placement-options label:hover { border-color: var(--blue); }
.wgf-placement-options input { accent-color: var(--blue); height: 20px; margin: 0; width: 20px; }
.wgf-placement-question.is-correct { border-color: var(--green); }
.wgf-placement-question.is-wrong { border-color: var(--coral); }
.wgf-placement-options label.is-answer { background: #e8f3d5; border-color: var(--green); }
.wgf-placement-options label.is-selected-wrong { background: #ffe0dc; border-color: var(--coral); }
.wgf-placement-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 30px 0; }
.wgf-placement-check {
	background: var(--blue);
	border: 2px solid var(--ink);
	border-radius: 999px;
	box-shadow: 3px 4px 0 var(--ink);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 18px;
	font-weight: 900;
	padding: 13px 24px;
}
.wgf-placement-actions a { color: #1535b5; font-weight: 900; }
.wgf-placement-summary { background: var(--yellow); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 7px 8px 0 var(--ink); padding: 22px; text-align: center; }
.wgf-placement-summary h3 { color: var(--ink); font-size: 27px; margin: 0 0 16px; text-transform: uppercase; }
.wgf-placement-summary > div { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.wgf-placement-summary p { background: #fff; border: 2px solid var(--ink); border-radius: 16px; margin: 0; min-width: 110px; padding: 12px 20px; }
.wgf-placement-summary strong, .wgf-placement-summary span { display: block; }
.wgf-placement-summary strong { font-size: 30px; }
.wgf-placement-summary span { font-size: 13px; font-weight: 900; text-transform: uppercase; }
[hidden].wgf-placement-summary { display: none; }
@media (max-width: 600px) {
	.wgf-placement { border-radius: 22px; padding: 18px; }
	.wgf-level-grid { grid-template-columns: 1fr; }
	.wgf-level-card { min-height: 140px; }
	.wgf-placement-question { padding: 14px; }
}