/* Spot the Difference — scoped to #spot */
#spot .spot-pics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 0}
#spot .spot-pics canvas{max-width:none;width:100%;height:auto;aspect-ratio:600/450;margin:0;border-radius:14px;background:#b9e3fa;touch-action:manipulation;cursor:crosshair;box-shadow:0 0 0 3px rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.28);-webkit-tap-highlight-color:transparent}
#spot .spot-msg{text-align:center;min-height:1.6em;font-weight:800;margin:12px 0 0;color:var(--ink-2)}
#spot .spot-msg.win{color:var(--primary);font-family:'Lilita One',cursive;font-weight:400;font-size:1.3rem;letter-spacing:.01em}
#spot .gstats b{display:inline-block}
#spot .gstats b.pop{animation:spot-pop .45s ease}
#spot #spot-hint[disabled]{opacity:.55;cursor:default}
@keyframes spot-pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
@media (max-width:760px){#spot .spot-pics{grid-template-columns:1fr;gap:8px;justify-items:center}
  /* stacked: size both pictures so they fit on screen together — no scrolling to compare */
  #spot .spot-pics canvas{width:auto;max-width:100%;height:min(43vh,calc((100vw - 40px) * .75));height:min(43svh,calc((100vw - 40px) * .75))}}
@media (prefers-reduced-motion:reduce){#spot .gstats b.pop{animation:none}}