.bot-kh {
	--kleur: #7B4FD0; --donker: #5B34B8; --licht: #EEE6FB;
	--inkt: #1F2233; --grijs: #444A5E; --lijn: #ECEAF3;
	display: flex; flex-direction: column; gap: 28px;
	color: var(--inkt);
}
.bot-kh h2 { margin: 0; }
.bot-kh p { margin: 0; }

.bot-kh__balk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.bot-kh__groet { font-size: 22px; color: var(--grijs); }
.bot-kh__tijd { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--licht); font-weight: 700; }

.bot-kh__spelers { display: flex; flex-wrap: wrap; gap: 16px; }
.bot-kh__speler {
	font: inherit; cursor: pointer;
	display: flex; align-items: center; gap: 16px;
	padding: 14px 28px 14px 14px; min-height: 72px;
	border-radius: 24px; background: #fff; color: var(--inkt);
	border: 3px solid var(--lijn);
}
.bot-kh__speler[aria-pressed="true"] { background: var(--licht); border-color: var(--donker); }
.bot-kh__letter {
	width: 52px; height: 52px; border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	background: var(--donker); color: #fff;
	font-family: Fredoka, sans-serif; font-weight: 700; font-size: 26px;
}
.bot-kh__naam { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 26px; }

.bot-kh__spellen { display: flex; flex-wrap: wrap; gap: 24px; }
.bot-kh__kaart {
	flex: 1 1 260px; min-width: 0;
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
	padding: 28px; border-radius: 28px; background: #fff; border: 3px solid var(--inkt);
}
.bot-kh__kaart--groot { flex: 2 1 420px; border-color: var(--kleur); }
.bot-kh__blokjes { display: flex; gap: 4px; }
.bot-kh__blokjes span { width: 22px; height: 22px; border-radius: 4px; }
.bot-kh__best { color: var(--grijs); font-size: 15px; }

.bot-kh__knop {
	font: inherit; cursor: pointer; text-decoration: none;
	display: inline-block; padding: 16px 28px; min-height: 56px; box-sizing: border-box;
	border-radius: 18px; border: none;
	background: var(--donker); color: #fff !important;
	font-family: Fredoka, sans-serif; font-weight: 600; font-size: 22px;
}
.bot-kh__knop[disabled] { background: #B9B4C9; cursor: not-allowed; }
.bot-kh__knop--rand { background: #fff; color: var(--inkt) !important; border: 2px solid var(--inkt); font-size: 18px; }
.bot-kh__klein {
	font: inherit; cursor: pointer; padding: 10px 16px; min-height: 44px;
	border-radius: 14px; border: 2px solid var(--inkt); background: #fff; color: var(--inkt); font-weight: 700;
}

/* Het spel */
.bot-kh__spel {
	display: flex; flex-direction: column; align-items: center; gap: 20px;
	padding: 32px 20px; border-radius: 32px; background: var(--licht); border: 3px solid var(--kleur);
	position: relative;
}
.bot-kh__spel[hidden], .bot-kh__klaar[hidden], .bot-kh__op[hidden], .bot-kh__tijd[hidden] { display: none; }
.bot-kh__spelkop { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.bot-kh__spelknoppen { display: flex; gap: 10px; }
.bot-kh__voortgang { font-weight: 700; }
.bot-kh__woord { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bot-kh__vak {
	width: 76px; height: 88px; border-radius: 18px;
	display: flex; align-items: center; justify-content: center;
	font-family: Fredoka, sans-serif; font-weight: 700; font-size: 48px;
	background: #fff; color: #8A8FA3; border: 3px solid #D4CFE3;
}
.bot-kh__vak--goed { background: var(--donker); color: #fff; border-color: var(--donker); }
.bot-kh__vak--nu { color: var(--inkt); border-color: var(--inkt); box-shadow: 0 6px 0 var(--inkt); }
.bot-kh__vak--fout { animation: bot-schud .3s; border-color: #C2292E; }
@keyframes bot-schud { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.bot-kh__hint { font-size: 18px; color: var(--grijs); min-height: 1.6em; }

.bot-kh__invoer {
	font: inherit; font-size: 20px; text-align: center; text-transform: uppercase;
	width: 200px; max-width: 100%; padding: 12px; border-radius: 14px; border: 2px solid var(--inkt);
}
.bot-kh__onzichtbaar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bot-kh__klaar {
	position: absolute; inset: 0; border-radius: 29px; background: var(--licht);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 20px;
}
.bot-kh__sterren { font-size: 48px; letter-spacing: 6px; color: #E0A800; }

.bot-kh__op { padding: 28px; border-radius: 28px; background: #2A1D52; color: #fff; display: flex; flex-direction: column; gap: 8px; }
.bot-kh__op h2 { color: #fff; }

@media (max-width: 560px) {
	.bot-kh__vak { width: 56px; height: 66px; font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	.bot-kh__vak--fout { animation: none; }
}

/* Minecraft-pagina */
.bot-mc { display: flex; flex-direction: column; gap: 24px; color: #1F2233; }
.bot-mc h2 { margin: 0; }
.bot-mc__stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bot-mc__stappen li { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 20px; font-weight: 700; }
.bot-mc__stappen li span { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: Fredoka, sans-serif; font-size: 22px; }
.bot-mc__stappen li:nth-child(1) { background: #FFF4CC; } .bot-mc__stappen li:nth-child(1) span { background: #FFC93C; }
.bot-mc__stappen li:nth-child(2) { background: #EEE6FB; } .bot-mc__stappen li:nth-child(2) span { background: #7B4FD0; color: #fff; }
.bot-mc__stappen li:nth-child(3) { background: #DDF3E6; } .bot-mc__stappen li:nth-child(3) span { background: #18794A; color: #fff; }
.bot-mc__form { padding: 28px; border-radius: 28px; background: #fff; border: 2px solid #ECEAF3; display: flex; flex-direction: column; gap: 16px; }
.bot-mc__form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.bot-mc__form legend { font-weight: 700; margin-bottom: 10px; }
.bot-mc__keuze { display: flex; align-items: center; gap: 10px; padding: 14px 20px; min-height: 56px; box-sizing: border-box; border-radius: 18px; border: 3px solid #ECEAF3; cursor: pointer; }
.bot-mc__keuze:has(input:checked) { border-color: #18794A; background: #DDF3E6; }
.bot-mc__form input[type="text"] { font: inherit; font-size: 20px; padding: 14px 16px; min-height: 56px; border-radius: 16px; border: 2px solid #1F2233; width: 100%; max-width: 420px; box-sizing: border-box; }
.bot-mc__form .bot-kh__knop { background: #18794A; }
.bot-mc__melding { padding: 14px 18px; border-radius: 14px; font-weight: 700; }
.bot-mc__melding--ok { background: #DDF3E6; color: #155E3B; }
.bot-mc__melding--fout { background: #FDE2E2; color: #7A1518; }
.bot-mc__lijst { margin: 0; padding-left: 20px; }
.bot-mc__item--ok { color: #155E3B; }
.bot-mc__adres code { font-size: 20px; padding: 6px 12px; border-radius: 10px; background: #F3F1F8; }
.bot-mc__afspraken { padding: 28px; border-radius: 28px; background: #2A1D52; color: #fff; }
.bot-mc__afspraken h2 { color: #fff; margin-bottom: 12px; }