/* Woordzoeker: a square letter grid with soft marks over the words found, the word list beside it (below on a phone). */
.sp-board--woordzoeker { padding: 22px; }
.wz { display: grid; grid-template-columns: minmax(0, 580px) minmax(220px, 300px); gap: 32px; justify-content: center; align-items: start; }

.wz-field { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; background: #fbf9f4; box-shadow: inset 0 0 0 1.5px #e7e2d6; touch-action: none; cursor: pointer; container-type: inline-size; }
.wz-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wz-grid { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(var(--size), minmax(0, 1fr)); }
.wz-row { display: grid; grid-template-columns: repeat(var(--size), minmax(0, 1fr)); }
.wz-cell { display: grid; place-items: center; font: 700 20px/1 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: min(34px, calc(100cqi / var(--size) * .64)); color: #1f2937; }

.wz-side { min-width: 0; }
.wz-theme { margin: 0 0 14px; font: 700 26px/1.2 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.wz-theme__label { display: block; margin-bottom: 4px; font: 700 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #2f5d45; }
.wz-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.wz-word { position: relative; padding: 7px 12px 7px 34px; border-radius: 8px; background: #eef4f0; font-size: 19px; line-height: 1.3; color: #1f2937; overflow-wrap: break-word; }
.wz-word::before { content: ''; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 2px solid #8fc1a4; box-sizing: border-box; }
.wz-word.is-found { background: #f4f3ef; color: #6b7280; text-decoration: line-through; text-decoration-thickness: 2px; }
.wz-word.is-found::before { content: '✓'; border: 0; width: auto; height: auto; margin-top: -.65em; line-height: 1.3; font-weight: 700; color: #2f5d45; }

@media (max-width: 900px) {
  .wz { grid-template-columns: minmax(0, 1fr) minmax(200px, 240px); gap: 20px; }
}
@media (max-width: 760px) {
  .sp-board--woordzoeker { padding: 8px; }
  .wz { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wz-field { max-width: 560px; margin: 0 auto; }
  .wz-side { padding: 0 4px 6px; }
  .wz-theme { font-size: 22px; margin-bottom: 10px; }
  .wz-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wz-word { font-size: 18px; padding: 7px 6px 7px 28px; }
  .wz-word::before { left: 9px; }
}
@media (max-width: 400px) {
  .wz-list { gap: 5px; }
  .wz-word { font-size: 17px; padding: 7px 4px 7px 24px; }
  .wz-word::before { left: 7px; }
}

/* The tip: a pulsing yellow ring around the first letter of a word. */
.wz-tip { fill: rgba(242, 183, 5, .25); stroke: #d99a00; stroke-width: .09; animation: wz-tip 1.6s ease-in-out 3; }
@keyframes wz-tip { 50% { stroke-width: .16; fill: rgba(242, 183, 5, .45); } }
@media (prefers-reduced-motion: reduce) { .wz-tip { animation: none; } }

/* Larger text: the grid takes the whole width sooner, the letters and the list grow. */
.sp--large .wz { grid-template-columns: minmax(0, 620px) minmax(240px, 320px); }
.sp--large .wz-cell { font-size: min(38px, calc(100cqi / var(--size) * .72)); }
.sp--large .wz-theme { font-size: 29px; }
.sp--large .wz-word { font-size: 21px; }
@media (max-width: 760px) {
  .sp--large.sp-board--woordzoeker, .sp--large .sp-board--woordzoeker { padding: 4px; }
  .sp--large .wz { grid-template-columns: minmax(0, 1fr); }
  .sp--large .wz-word { font-size: 20px; }
}

/* More contrast: black letters on white, darker marks and a firm frame. */
.sp--contrast .wz-field { background: #fff; box-shadow: inset 0 0 0 2px #1f2937; }
.sp--contrast .wz-cell { color: #000; }
.sp--contrast .wz-mark--0 { stroke: #8fd1a8; }
.sp--contrast .wz-mark--1 { stroke: #f6c453; }
.sp--contrast .wz-mark--2 { stroke: #93bff0; }
.sp--contrast .wz-mark--3 { stroke: #f0a3b1; }
.sp--contrast .wz-mark--4 { stroke: #c2adf0; }
.sp--contrast .wz-mark--5 { stroke: #b6dc8c; }
.sp--contrast .wz-word { background: #fff; box-shadow: inset 0 0 0 1.5px #1f2937; color: #000; }
.sp--contrast .wz-word.is-found { color: #374151; background: #e5e7eb; }
.sp--contrast .wz-theme__label { color: #14532d; }