/* 숨은 곤충 찾기 — 배경 위에 앞가림을 흩고 그 뒤에 곤충을 숨긴다. */
.hunt{position:fixed;inset:0;z-index:12;overflow:hidden;
  background:var(--bg) center/cover no-repeat,#2e3d24;
  animation:huntIn .35s ease-out;
  /* 아이가 곤충을 누르다 화면을 끌면 안 된다 */
  touch-action:manipulation;user-select:none;-webkit-user-select:none}
@media (orientation:landscape){.hunt{background-image:var(--bg-land)}}
@keyframes huntIn{from{opacity:0}to{opacity:1}}
.hunt.hunt-out{animation:huntOut .38s ease-in forwards}
@keyframes huntOut{to{opacity:0}}

.hunt-yard{position:absolute;inset:0}

/* 앞가림은 곤충보다 **앞에** 온다. 이게 이 미니게임의 전부다. */
.hunt-piece{position:absolute;z-index:2;pointer-events:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 .6vmin .8vmin rgba(0,0,0,.28))}

/* 곤충은 뒤에. 누를 수는 있어야 하므로 조각에 pointer-events 를 껐다. */
.hunt-bug{position:absolute;z-index:1;aspect-ratio:1;
  background:none;border:0;padding:0;cursor:pointer}
/*
 * 네 살 손가락에 맞는 누름 자리 — **그림은 안 키운다.**
 * 처음엔 min-width:var(--touch) 를 걸었다가 10단계 곤충(화면 폭 7%)이
 * 강제로 커져서 **크기 손잡이가 통째로 죽었다**(설계 58px → 실제 76px).
 * 덤으로 곤충이 아래로 삐져나와 가림도 0.20 대신 0.39가 됐다.
 * 그래서 **보이지 않는 판**만 가운데에 깔아 넓힌다.
 */
.hunt-bug::after{content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:max(100%,var(--touch));height:max(100%,var(--touch))}
.hunt-pic{width:100%;height:100%;object-fit:contain;pointer-events:none}

/* 막히지 않게 20초마다 한 마리가 살짝 흔들린다 */
.hunt-bug.nudge{animation:huntNudge 1.1s ease-in-out 2}
@keyframes huntNudge{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6%) rotate(-3deg)}
  75%{transform:translateX(6%) rotate(3deg)}}

/* 찾으면 뿅 */
.hunt-bug.got{animation:huntPop .38s ease-out forwards;pointer-events:none;z-index:3}
@keyframes huntPop{
  40%{transform:scale(1.35) translateY(-8%)}
  100%{transform:scale(.2) translateY(-40%);opacity:0}}

/* 시간이 끝나면 못 찾은 것을 보여 준다 — 배우는 게 남는다 */
.hunt-bug.reveal{z-index:4;animation:huntReveal 1s ease-in-out infinite}
@keyframes huntReveal{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,236,150,0))}
  50%{filter:drop-shadow(0 0 1.6vmin rgba(255,236,150,.95)) brightness(1.25)}}

/* 남은 시간 막대 */
.hunt-bar{position:absolute;left:0;right:0;top:0;height:1.1vmin;min-height:6px;
  z-index:5;background:rgba(0,0,0,.28)}
.hunt-bar i{display:block;height:100%;transform-origin:left center;
  background:linear-gradient(90deg,#8fd14f,#f6d34a);transition:transform .1s linear}

/* 몇 마리 찾았나 */
.hunt-count{position:absolute;z-index:5;top:2.4vmin;right:2.8vmin;
  padding:.7vmin 2vmin;border-radius:99px;
  background:rgba(20,26,16,.62);color:#fff;
  font-size:min(4.6vmin,26px);font-weight:800;letter-spacing:.02em}
.hunt-count b{color:#ffe98a}

/* 끝났을 때 — 벌점은 없다. 0마리여도 나무라지 않는다. */
.hunt-end{position:absolute;z-index:6;left:50%;bottom:9vmin;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.6vmin;
  padding:2vmin 4.2vmin;border-radius:3vmin;
  background:rgba(20,26,16,.78);color:#fff;text-align:center;
  animation:huntEnd .4s ease-out}
.hunt-end b{font-size:min(5.6vmin,32px)}
.hunt-end span{font-size:min(4.2vmin,24px);color:#ffe98a}
@keyframes huntEnd{from{opacity:0;transform:translate(-50%,30%)}
  to{opacity:1;transform:translate(-50%,0)}}