/* Shared find-object layout. Coordinates always share the image's own wrapper. */
.find-object-game {width:100%;text-align:center;padding:16px 0;}
.find-object-game .eyebrow {margin-bottom:10px;}
.find-object-game h1 {font-size:clamp(25px,4.5vw,38px);line-height:1.2;}
.find-object-count {color:var(--muted);font-size:16px;margin:10px 0 14px;}
.find-object-scene {
  position:relative;width:min(100%,var(--scene-max));margin:0 auto;
  border-radius:var(--radius);isolation:isolate;
  box-shadow:0 12px 32px rgba(33,62,56,.12);
}
.find-object-scene>img {display:block;width:100%;height:auto;object-fit:contain;border-radius:inherit;}
.find-object-hotspot {
  position:absolute;z-index:1;min-width:44px;min-height:44px;
  transform:translate(-50%,-50%);padding:0;border:3px solid transparent;
  border-radius:18px;background:transparent;touch-action:manipulation;
}
.find-object-hotspot:not(:disabled):active {transform:translate(-50%,-50%);}
.find-object-hotspot:disabled {visibility:hidden;}
.find-object-hotspot:focus-visible {outline:4px solid var(--purple);outline-offset:1px;background:rgba(255,255,255,.12);}
.find-object-hotspot.is-found {border-color:var(--green);background:rgba(223,244,231,.22);box-shadow:0 0 0 3px rgba(223,244,231,.8);}
.find-object-hotspot.just-found {animation:find-object-found .4s ease-out;}
.hotspot-check {display:none;position:absolute;right:-5px;top:-8px;width:24px;height:24px;border-radius:50%;background:var(--green);color:white;font-size:17px;font-weight:800;}
.is-found .hotspot-check {display:grid;place-items:center;}
.find-object-hotspot.is-hint {border-color:var(--yellow);animation:find-object-hint 1.4s ease-in-out infinite;}
.hotspot-debug {display:none;pointer-events:none;font-size:11px;font-weight:800;background:var(--paper);color:var(--ink);padding:2px;}
.debug-hotspots .find-object-hotspot {border-color:var(--purple);background:rgba(121,97,189,.2);}
.debug-hotspots .hotspot-debug {display:block;}
.find-object-controls {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:12px auto 0;max-width:560px;}
.find-object-feedback {flex-basis:100%;min-height:24px;color:var(--green);font-weight:700;}
.find-object-controls .repeat {margin:0;}
.find-object-controls [hidden],.find-object-load-error[hidden] {display:none;}
.find-object-load-error {margin:12px auto;color:var(--muted);}
.find-object-completed .completion-sticker {width:clamp(120px,32vw,170px);height:auto;max-height:none;margin:0 auto 12px;}
.find-object-completed .text-button {margin-top:14px;}
@media(min-width:701px) and (min-height:650px) {
  .find-object-scene {width:min(100%,var(--scene-max),calc(76svh * var(--scene-ratio)));}
}
@media(max-width:650px) {
  .find-object-game {padding:8px 0;}
  .find-object-scene {border-radius:20px;}
}
/* Keep adjacent letter targets separate on exceptionally narrow screens. */
@media(max-width:300px) {.find-object-hotspot{min-width:40px;min-height:40px;}}
@keyframes find-object-found {from{box-shadow:0 0 0 10px rgba(223,244,231,.9);}to{box-shadow:0 0 0 3px rgba(223,244,231,.8);}}
@keyframes find-object-hint {0%,100%{box-shadow:0 0 0 2px rgba(255,204,84,.3);}50%{box-shadow:0 0 0 7px rgba(255,204,84,.7);}}
@media(prefers-reduced-motion:reduce) {
  .find-object-hotspot {animation:none!important;transition:none!important;}
}