.wzh-puzzel,
.wzh-maker {
	--wzh-accent: #0f766e;
	--wzh-accent-licht: #ccfbf1;
	--wzh-rand: #d6d3d1;
	--wzh-bg: #ffffff;
	--wzh-tekst: #1c1917;
	--wzh-zacht: #78716c;
}
.wzh-puzzel {
	margin: 1.5rem 0 2rem;
	padding: 1rem;
	border: 1px solid var(--wzh-rand);
	border-radius: 12px;
	background: #fafaf9;
	color: var(--wzh-tekst);
}
.wzh-kop { margin: 0 0 .75rem; font-size: 1.1rem; }
.wzh-niveau {
	display: inline-block; margin-left: .4rem; padding: .1rem .55rem; border-radius: 99px;
	font-size: .78rem; font-weight: 600; vertical-align: middle; background: #e7e5e4;
}
.wzh-niveau-makkelijk { background: #dcfce7; color: #166534; }
.wzh-niveau-gemiddeld { background: #fef3c7; color: #92400e; }
.wzh-niveau-moeilijk { background: #fee2e2; color: #991b1b; }

.wzh-speelveld { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.wzh-rooster {
	--wzh-n: 12;
	--wzh-breed: min(560px, calc(100vw - 64px));
	display: grid;
	grid-template-columns: repeat(var(--wzh-n), 1fr);
	width: var(--wzh-breed);
	aspect-ratio: 1 / 1;
	background: var(--wzh-bg);
	border: 2px solid var(--wzh-tekst);
	border-radius: 6px;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
}
.wzh-cel {
	display: flex; align-items: center; justify-content: center;
	font: 700 calc(var(--wzh-breed) / var(--wzh-n) * .55) / 1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	border-radius: 50%;
	transition: background-color .1s;
}
.wzh-cel.wzh-opl { background: #fde68a; }
.wzh-cel.wzh-vond { color: #fff; border-radius: 4px; }
.wzh-k0 { background: #0f766e; } .wzh-k1 { background: #2563eb; } .wzh-k2 { background: #c2410c; }
.wzh-k3 { background: #7c3aed; } .wzh-k4 { background: #be185d; } .wzh-k5 { background: #15803d; }
.wzh-cel.wzh-sel { background: var(--wzh-accent-licht); color: var(--wzh-tekst); outline: 2px solid var(--wzh-accent); outline-offset: -2px; }

.wzh-zijkant { flex: 1 1 180px; min-width: 160px; }
.wzh-status { margin: 0 0 .5rem; font-size: .9rem; color: var(--wzh-zacht); }
.wzh-woorden {
	list-style: none; margin: 0; padding: 0; font-size: .95rem;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem 1rem;
}
.wzh-woorden li { text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.wzh-woorden li.wzh-af { text-decoration: line-through; color: var(--wzh-zacht); }

.wzh-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.wzh-knop {
	appearance: none; border: 1px solid var(--wzh-accent); background: #fff; color: var(--wzh-accent);
	padding: .5rem .9rem; border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.wzh-knop:hover, .wzh-knop:focus-visible { background: var(--wzh-accent-licht); }
.wzh-knop-print, .wzh-knop-groot { background: var(--wzh-accent); color: #fff; }
.wzh-knop-print:hover, .wzh-knop-groot:hover { background: #115e59; }
.wzh-knop-groot { padding: .75rem 1.4rem; font-size: 1rem; }
.wzh-klaar {
	margin: 1rem 0 0; padding: .75rem 1rem; border-radius: 8px;
	background: #dcfce7; color: #166534; font-weight: 600;
}

.wzh-maker {
	margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--wzh-rand); border-radius: 12px; background: #fafaf9;
}
.wzh-maker label { display: block; font-weight: 600; margin-bottom: .3rem; }
.wzh-maker small { font-weight: 400; color: var(--wzh-zacht); }
.wzh-maker input, .wzh-maker textarea, .wzh-maker select {
	width: 100%; box-sizing: border-box; padding: .55rem .7rem; border: 1px solid #a8a29e; border-radius: 8px;
	font: inherit; background: #fff; color: var(--wzh-tekst);
}
.wzh-maker-rij { display: flex; flex-wrap: wrap; gap: 1rem; }
.wzh-maker-rij p { flex: 1 1 200px; margin: 0 0 1rem; }
.wzh-maker-fout { color: #b91c1c; font-weight: 600; }

.wzh-letters .wzh-l-invoer { font-size: 1.4rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.wzh-l-uitvoer { --wzh-accent: #0f766e; --wzh-accent-licht: #ccfbf1; margin: 1rem 0 2rem; }
.wzh-l-samenvatting { font-weight: 600; }
.wzh-l-leeg { color: #78716c; }
.wzh-l-groep { margin: 1.25rem 0; }
.wzh-l-groep h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.wzh-l-woorden {
	list-style: none; margin: 0 0 .75rem; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: .35rem;
}
.wzh-l-woorden li {
	display: flex; justify-content: space-between; align-items: center; gap: .5rem;
	padding: .3rem .6rem; border: 1px solid #d6d3d1; border-radius: 6px; background: #fff;
}
.wzh-l-woord { font-size: .95rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wzh-letters .wzh-maker-rij p { flex-basis: 100px; }
.wzh-l-punten {
	flex: none; min-width: 1.8rem; text-align: center; padding: .05rem .35rem; border-radius: 99px;
	font-size: .8rem; font-weight: 700; background: #ccfbf1; color: #115e59;
}

@media (max-width: 600px) {
	.wzh-puzzel { padding: .6rem; }
	.wzh-rooster { --wzh-breed: calc(100vw - 48px); }
	.wzh-woorden { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); font-size: .82rem; }
}
@media print {
	.wzh-knoppen, .wzh-status { display: none; }
}