/* 곤충 달리기 — 프레임 셋을 빨리 돌려 달리고, 두드리면 빨라진다. */
.race{position:fixed;inset:0;z-index:12;overflow:hidden;
  background:var(--bg) center/cover no-repeat,#2e3d24;
  animation:raceIn .35s ease-out;cursor:pointer;
  touch-action:manipulation;user-select:none;-webkit-user-select:none}
@media (orientation:landscape){.race{background-image:var(--bg-land)}}
@keyframes raceIn{from{opacity:0}to{opacity:1}}
.race.race-out{animation:raceOut .38s ease-in forwards}
@keyframes raceOut{to{opacity:0}}

/* 달리는 자리 — 배경을 살짝 어둡게 깔아 곤충이 잘 보이게 */
.race-track{position:absolute;inset:0;background:rgba(20,26,16,.22)}
.race-lane{position:absolute;left:0;right:0;height:0}

.race-bug{position:absolute;left:0;transform:translateY(-50%);
  width:min(22vmin,140px);aspect-ratio:1;transition:left .06s linear}
.race-bug.me{filter:drop-shadow(0 0 1.2vmin rgba(255,233,138,.9))}

/*
 * 프레임 셋을 겹쳐 놓고 `--frame` 으로 하나만 보여 준다.
 * 걸음은 0.22초, **달리기는 0.10초**로 돈다(§4-1) — 그러면 달리는 것으로 읽힌다.
 */
.race-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;pointer-events:none}
.race[data-frame="0"] .f-side{opacity:1}
.race[data-frame="1"] .f-walk{opacity:1}
.race[data-frame="2"] .f-run{opacity:1}
/* 아직 한 프레임도 안 돌았을 때는 서 있는 그림을 보여 준다 */
.race:not([data-frame]) .f-side{opacity:1}

/* 결승선 — 오른쪽 끝에 선다 */
.race-finish{position:absolute;right:2vmin;top:0;height:100%;
  width:auto;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 0 1vmin rgba(0,0,0,.4))}

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

/* 두드리라는 말 — 두드리면 잠깐 커진다 */
.race-tapme{position:absolute;z-index:5;left:50%;bottom:5vmin;transform:translateX(-50%);
  padding:1.2vmin 3.4vmin;border-radius:99px;
  background:rgba(20,26,16,.62);color:#ffe98a;
  font-size:min(5vmin,28px);font-weight:800;pointer-events:none;
  animation:raceCallout 1.2s ease-in-out infinite}
@keyframes raceCallout{0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.07)}}
.race.tapped .race-tapme{animation:raceTapped .18s ease-out}
@keyframes raceTapped{from{transform:translateX(-50%) scale(1.22)}
  to{transform:translateX(-50%) scale(1)}}

/* 끝났을 때 — **꼴찌도 리본을 받는다** */
.race-end{position:absolute;z-index:6;inset:0;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:1vmin;
  background:rgba(16,20,12,.72);color:#fff;text-align:center;
  animation:raceEnd .4s ease-out}
.race-end img{width:min(38vmin,220px);height:auto;
  filter:drop-shadow(0 1vmin 1.6vmin rgba(0,0,0,.45));
  animation:raceRibbon .5s cubic-bezier(.2,1.4,.4,1)}
.race-end b{font-size:min(6.4vmin,38px)}
.race-end span{font-size:min(4.4vmin,26px);color:#ffe98a}
@keyframes raceEnd{from{opacity:0}to{opacity:1}}
@keyframes raceRibbon{from{transform:scale(.4) rotate(-12deg)}to{transform:none}}