/* Vlaamse plaatsnamen: the question above, the map, the answer below. */
.pn { max-width: 860px; margin: 0 auto; }
.pn-loading { margin: 40px 0; text-align: center; font-size: 18px; color: #4b5563; }
.pn-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 4px; }
.pn-where { margin: 0; font: 700 14px/1.3 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #2f5d45; }
.pn-count { margin: 0; font-size: 16px; color: #4b5563; }
.pn-ask { margin: 0 0 12px; font: 400 23px/1.35 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.pn-ask strong { font-weight: 700; color: #2f5d45; }

.pn-map { position: relative; border-radius: 12px; background: #f3f7fa; overflow: hidden; border: 1px solid #e3e8e5; }
.pn-svg { display: block; width: 100%; height: auto; max-height: 62vh; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pn-svg path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pn-rest { fill: #e7e5df; stroke: #fff; stroke-width: .8; pointer-events: none; }
.pn-rests { pointer-events: none; }
.pn-area { fill: #eef4f0; stroke: #8fb9a1; stroke-width: 1; }
.pn-area--antwerpen { fill: #e2eddc; }
.pn-area--limburg { fill: #f1e8d2; }
.pn-area--oost-vlaanderen { fill: #dce8ef; }
.pn-area--vlaams-brabant { fill: #e8e3f0; }
.pn-area--west-vlaanderen { fill: #f1e0e3; }
.pn-area.is-picked { fill: #f6d56b; }
.pn-area.is-right { fill: #3f8f5a; }
.pn-area.is-wrong { fill: #d9776e; }
.pn-lines { fill: none; stroke: #4f7160; stroke-width: 1.6; pointer-events: none; }
.pn-lines--thin { stroke: #fff; stroke-width: .6; opacity: .8; }
.pn-target path { fill: #1f4d33; stroke: #fff; stroke-width: 1; pointer-events: none; }
.pn-labels { pointer-events: none; }
.pn-labels text, .pn-region-name { font: 700 var(--pn-label, 16px) Inter, system-ui, sans-serif; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: var(--pn-halo, 4px); stroke-linejoin: round; fill: #1a1a1a; }
.pn-region-name { font-weight: 600; fill: #3d4f45; }
.pn-region-name--rest { fill: #7a766c; font-weight: 500; font-size: calc(var(--pn-label, 16px) * .8); }
.pn-labels--regions { display: none; }
.pn-svg--names .pn-labels--regions { display: inline; }
.pn-dot { fill: #1a1a1a; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pn-label--right text { fill: #1f4d33; }
.pn-label--wrong text { fill: #9c2a22; }
.pn-label--wrong .pn-dot { fill: #9c2a22; }

.pn-zoom { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0 0; }
.pn-zoom__button { min-width: 48px; height: 44px; padding: 0 12px; border: 1.5px solid #cfe2d6; border-radius: 999px; background: #fff; color: #2f5d45; font: 700 22px/1 Inter, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pn-zoom__button--fit { font-size: 16px; }
.pn-zoom__button:disabled { opacity: .4; cursor: default; }
.pn-zoom__button:focus-visible, .pn-chip:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.pn-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border: 1.5px solid #cfe2d6; border-radius: 999px; background: #fff; color: #1f2937; font: 600 16px/1 Inter, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pn-chip__swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #8fb9a1; background: var(--pn-swatch); }
.pn-chip--antwerpen { --pn-swatch: #e2eddc; }
.pn-chip--limburg { --pn-swatch: #f1e8d2; }
.pn-chip--oost-vlaanderen { --pn-swatch: #dce8ef; }
.pn-chip--vlaams-brabant { --pn-swatch: #e8e3f0; }
.pn-chip--west-vlaanderen { --pn-swatch: #f1e0e3; }
.pn-chip[aria-pressed="true"] { border-color: #b88a00; background: #fbeab0; }
.pn-chip:disabled { cursor: default; opacity: .6; }
.pn-chip.is-right { opacity: 1; border-color: #2f7a4a; background: #3f8f5a; color: #fff; }
.pn-chip.is-wrong { opacity: 1; border-color: #b0453c; background: #f3d3cf; color: #8f2a22; }

.pn-answer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 12px 0 0; }
.pn-feedback { flex: 1 1 280px; margin: 0; font-size: 18px; line-height: 1.45; color: #374151; }
.pn-feedback.is-right { color: #1f5c38; font-weight: 600; }
.pn-feedback.is-wrong { color: #8f2a22; font-weight: 600; }
.pn-go { min-width: 200px; }
.pn-credit { margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: #6b7280; }

@media (max-width: 520px) {
  .pn-ask { font-size: 21px; }
  .pn-go { flex: 1 1 100%; }
  .pn-chip { flex: 1 1 40%; }
}

/* A tip's area: what lies outside it greyed out and not tappable. */
.pn-area.is-out { fill: #dedbd3; stroke: #fff; pointer-events: none; }
.pn-svg:has(.pn-area.is-out) .pn-area:not(.is-out) { stroke: #2f5d45; stroke-width: 2; }
.pn-chip:disabled:not(.is-right):not(.is-wrong) { opacity: .45; }
.pn-feedback.is-shown { color: #1f5c38; font-weight: 600; }

/* "Grotere letters": the question, the answer line, the names on the map and the buttons a size up. */
.sp--large .pn-ask { font-size: 27px; }
.sp--large .pn-count { font-size: 18px; }
.sp--large .pn-feedback { font-size: 21px; }
.sp--large .pn-chip { min-height: 50px; font-size: 18px; }
.sp--large .pn-zoom__button { min-width: 54px; height: 50px; font-size: 25px; }
.sp--large .pn-zoom__button--fit { font-size: 18px; }
.sp--large .pn-labels text, .sp--large .pn-region-name { font-size: calc(var(--pn-label, 16px) * 1.25); }
@media (max-width: 520px) { .sp--large .pn-ask { font-size: 24px; } }

/* "Meer contrast": dark borders and text. */
.sp--contrast .pn-ask, .sp--contrast .pn-count, .sp--contrast .pn-feedback, .sp--contrast .pn-loading { color: #000; }
.sp--contrast .pn-ask strong, .sp--contrast .pn-where { color: #133a26; }
.sp--contrast .pn-area { stroke: #1f2937; }
.sp--contrast .pn-lines { stroke: #000; stroke-width: 2.2; }
.sp--contrast .pn-area.is-picked { fill: #f2c200; }
.sp--contrast .pn-area.is-right { fill: #1f6b3d; }
.sp--contrast .pn-area.is-wrong { fill: #c0392b; }
.sp--contrast .pn-area.is-out { fill: #c9c5bb; }
.sp--contrast .pn-map { border-color: #1f2937; }
.sp--contrast .pn-chip, .sp--contrast .pn-zoom__button { border-color: #1f2937; color: #000; }
.sp--contrast .pn-feedback.is-right, .sp--contrast .pn-feedback.is-shown { color: #133a26; }
.sp--contrast .pn-feedback.is-wrong { color: #7a1f18; }
.sp--contrast .pn-credit { color: #374151; }