/* Zoek de verschillen: two pictures side by side (one above the other on a
   phone), a counter with dots, circles on what was found. */
.zdv-loading { margin: 40px 0; text-align: center; font-size: 18px; color: #4b5563; }
.zdv-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.zdv-count { margin: 0; font-size: 18px; font-weight: 700; color: #1f2937; }
.zdv-dots { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
.zdv-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #8fc1a4; background: #fff; }
.zdv-dot.is-found { background: #2f5d45; border-color: #2f5d45; }
.zdv-pictures { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.zdv-pic { position: relative; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px #e1ded6; background: #fbf9f4; }
.zdv-pic svg { display: block; width: 100%; height: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.zdv-found__halo, .zdv-found__line { fill: none; vector-effect: non-scaling-stroke; }
.zdv-found__halo { stroke: #fff; stroke-width: 8px; opacity: .9; }
.zdv-found__line { stroke: #1f7a45; stroke-width: 4px; }
.zdv-found.is-new { transform-box: fill-box; transform-origin: center; animation: zdv-pop .35s ease-out; }
@keyframes zdv-pop { from { transform: scale(1.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.zdv-miss { fill: rgba(255, 255, 255, .55); stroke: #b0473a; animation: zdv-fade 1.4s ease-in forwards; }
.zdv-miss path { fill: none; }
@keyframes zdv-fade { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }

.zdv-hinted { fill: rgba(242, 183, 5, .12); stroke: #f2b705; stroke-width: 5px; stroke-dasharray: 14 10; vector-effect: non-scaling-stroke; animation: zdv-hint 4s ease-in-out forwards; }
@keyframes zdv-hint { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 700px) {
  .zdv-pictures { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .zdv-found.is-new { animation: none; }
}

/* "Vergroot": each picture twice as wide inside a window of its own size that scrolls. */
.zdv-zoom { margin-left: auto; }
.zdv-pictures.is-zoomed .zdv-pic { aspect-ratio: 800 / 560; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.zdv-pictures.is-zoomed .zdv-pic svg { width: 200%; max-width: none; }

/* Larger text. */
.sp--large .zdv-count { font-size: 21px; }
.sp--large .zdv-dot { width: 17px; height: 17px; }

/* More contrast: firmer frames and rings. */
.sp--contrast .zdv-pic { box-shadow: 0 0 0 3px #1f2937; }
.sp--contrast .zdv-found__line { stroke: #0b5d1e; stroke-width: 6px; }
.sp--contrast .zdv-hinted { stroke: #b45309; stroke-width: 7px; }
.sp--contrast .zdv-dot { border-color: #1f2937; }
.sp--contrast .zdv-count { color: #000; }