07Falling dodge

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <defs>
    <symbol id="ico-game" viewBox="0 0 256 256" fill="currentColor"><g><path d="M216.86 207.57a28 28 0 0 1-24.66-7.77L150.09 152H172a51.94 51.94 0 0 0 51.2-61l16.36 84.17a28 28 0 0 1-22.7 32.4" opacity=".2"/><path d="M176 112h-24a8 8 0 0 1 0-16h24a8 8 0 0 1 0 16m-72-16h-8v-8a8 8 0 0 0-16 0v8h-8a8 8 0 0 0 0 16h8v8a8 8 0 0 0 16 0v-8h8a8 8 0 0 0 0-16m137.48 104.65a36 36 0 0 1-54.94 4.81c-.12-.12-.24-.24-.35-.37L146.48 160h-37l-39.67 45.09l-.35.37A36.08 36.08 0 0 1 44 216a36 36 0 0 1-35.44-42.25a.7.7 0 0 1 0-.14l16.37-84.09A59.88 59.88 0 0 1 83.89 40H172a60.08 60.08 0 0 1 59 49.25v.18l16.37 84.17a.7.7 0 0 1 0 .14a35.74 35.74 0 0 1-5.89 26.91M172 144a44 44 0 0 0 0-88H83.89a43.9 43.9 0 0 0-43.21 36.37v.13L24.3 176.59A20 20 0 0 0 58 194.3l41.92-47.59a8 8 0 0 1 6-2.71Zm59.7 32.59l-8.74-45A60 60 0 0 1 172 160h-4.2l30.2 34.31a20.09 20.09 0 0 0 17.46 5.39a20 20 0 0 0 16.23-23.11Z"/></g></symbol>
    <symbol id="ico-trophy" viewBox="0 0 256 256" fill="currentColor"><g><path d="M200 48v63.1c0 39.7-31.75 72.6-71.45 72.9A72 72 0 0 1 56 112V48Z" opacity=".2"/><path d="M232 64h-24V48a8 8 0 0 0-8-8H56a8 8 0 0 0-8 8v16H24A16 16 0 0 0 8 80v16a40 40 0 0 0 40 40h3.65A80.13 80.13 0 0 0 120 191.61V216H96a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16h-24v-24.42c31.94-3.23 58.44-25.64 68.08-55.58H208a40 40 0 0 0 40-40V80a16 16 0 0 0-16-16M48 120a24 24 0 0 1-24-24V80h24v32q0 4 .39 8Zm144-8.9c0 35.52-29 64.64-64 64.9a64 64 0 0 1-64-64V56h128ZM232 96a24 24 0 0 1-24 24h-.5a82 82 0 0 0 .5-8.9V80h24Z"/></g></symbol>
    <symbol id="ico-restart" viewBox="0 0 256 256" fill="currentColor"><g><path d="M216 128a88 88 0 1 1-88-88a88 88 0 0 1 88 88" opacity=".2"/><path d="M240 56v48a8 8 0 0 1-8 8h-48a8 8 0 0 1 0-16h27.4l-26.59-24.36l-.25-.24a80 80 0 1 0-1.67 114.78a8 8 0 0 1 11 11.63A95.44 95.44 0 0 1 128 224h-1.32a96 96 0 1 1 69.07-164L224 85.8V56a8 8 0 1 1 16 0"/></g></symbol>
    <symbol id="ico-heart" viewBox="0 0 256 256" fill="currentColor"><g><path d="M232 102c0 66-104 122-104 122S24 168 24 102a54 54 0 0 1 54-54c22.59 0 41.94 12.31 50 32c8.06-19.69 27.41-32 50-32a54 54 0 0 1 54 54" opacity=".2"/><path d="M178 40c-20.65 0-38.73 8.88-50 23.89C116.73 48.88 98.65 40 78 40a62.07 62.07 0 0 0-62 62c0 70 103.79 126.66 108.21 129a8 8 0 0 0 7.58 0C136.21 228.66 240 172 240 102a62.07 62.07 0 0 0-62-62m-50 174.8c-18.26-10.64-96-59.11-96-112.8a46.06 46.06 0 0 1 46-46c19.45 0 35.78 10.36 42.6 27a8 8 0 0 0 14.8 0c6.82-16.67 23.15-27 42.6-27a46.06 46.06 0 0 1 46 46c0 53.61-77.76 102.15-96 112.8"/></g></symbol>
    <symbol id="ico-rocket" viewBox="0 0 256 256" fill="currentColor"><g><path d="m94.81 192l-29.45 22.24a8 8 0 0 1-12.81-4.51L40.19 154.1a8 8 0 0 1 1.66-6.86l30.31-36.33C71 134.25 76.7 161.43 94.81 192m119.34-44.76l-30.31-36.33c1.21 23.34-4.54 50.52-22.65 81.09l29.45 22.24a8 8 0 0 0 12.81-4.51l12.36-55.63a8 8 0 0 0-1.66-6.86" opacity=".2"/><path d="M152 224a8 8 0 0 1-8 8h-32a8 8 0 0 1 0-16h32a8 8 0 0 1 8 8m-24-112a12 12 0 1 0-12-12a12 12 0 0 0 12 12m95.62 43.83l-12.36 55.63a16 16 0 0 1-25.51 9.11L158.51 200h-61l-27.26 20.57a16 16 0 0 1-25.51-9.11l-12.36-55.63a16.09 16.09 0 0 1 3.32-13.71l28.56-34.26a123 123 0 0 1 8.57-36.67c12.9-32.34 36-52.63 45.37-59.85a16 16 0 0 1 19.6 0c9.34 7.22 32.47 27.51 45.37 59.85a123 123 0 0 1 8.57 36.67l28.56 34.26a16.09 16.09 0 0 1 3.32 13.71M99.43 184h57.14c21.12-37.54 25.07-73.48 11.74-106.88C156.55 47.64 134.49 29 128 24c-6.51 5-28.57 23.64-40.33 53.12c-13.31 33.4-9.36 69.34 11.76 106.88m-15 5.85q-16.15-29.35-19.6-57.69L48 152.36L60.36 208l.18-.13ZM208 152.36l-16.83-20.2q-3.42 28.28-19.56 57.69l23.85 18l.18.13Z"/></g></symbol>
  </defs>
</svg>
<main class="stage">
<div class="df is-demo" id="df">
  <header class="df__hud">
    <p class="df__stat">
      <svg class="df__ico" aria-hidden="true"><use href="#ico-game"/></svg>
      <span class="df__label">Score</span><b class="df__num" id="dfScore" aria-live="polite">0</b>
    </p>
    <p class="df__lives" id="dfLives" aria-label="Lives left: 3">
      <i class="df__life is-on"><svg aria-hidden="true"><use href="#ico-heart"/></svg></i>
      <i class="df__life is-on"><svg aria-hidden="true"><use href="#ico-heart"/></svg></i>
      <i class="df__life is-on"><svg aria-hidden="true"><use href="#ico-heart"/></svg></i>
    </p>
    <p class="df__stat">
      <svg class="df__ico" aria-hidden="true"><use href="#ico-trophy"/></svg>
      <span class="df__label">Best</span><b class="df__num" id="dfBest">0</b>
    </p>
  </header>
  <div class="df__field" id="dfField" tabindex="0" role="application" aria-label="Falling obstacle dodge playfield">
    <i class="df__rock df__rock--demo" style="--x0: 16%; --y0: 22%; --d0: 0ms"></i>
    <i class="df__rock df__rock--demo" style="--x0: 40%; --y0: 34%; --d0: -500ms"></i>
    <i class="df__rock df__rock--demo" style="--x0: 62%; --y0: 58%; --d0: -1000ms"></i>
    <i class="df__rock df__rock--demo" style="--x0: 84%; --y0: 70%; --d0: -1500ms"></i>
    <span class="df__player" id="dfPlayer">
      <svg class="df__rocket" aria-hidden="true"><use href="#ico-rocket"/></svg>
    </span>
    <p class="df__hint" id="dfHint">Use arrow keys or A and D to dodge the obstacles</p>
    <div class="df__over" id="dfOver" hidden>
      <div class="df__overPanel">
        <p class="df__overTitle">Game over</p>
        <p class="df__overScore"><b id="dfOverScore">Dodged 0</b></p>
        <button class="df__restart" id="dfRestart" type="button">
          <svg class="df__ico" aria-hidden="true"><use href="#ico-restart"/></svg><span>Restart</span>
        </button>
      </div>
    </div>
  </div>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 떨어지는 것 피하기 — 바닥의 로켓을 좌우(방향키 · A/D · 포인터)로 움직여 낙하 장애물을 피한다.
// 장애물 낙하는 CSS animation(transform: translateY), 로켓 이동은 requestAnimationFrame 의
// transform: translateX, 충돌은 getBoundingClientRect 겹침 검사. 목숨은 3, 점수는 피한 장애물 수.
// .is-demo 는 사람이 조작하기 전의 미리보기(장애물 낙하 + 로켓 회피 스윙)를 CSS keyframes 로만
// 재생하고 손이 닿는 순간 JS 가 .is-demo 를 뗀다. 미리보기를 뗀 정적 화면도 완결된 상태다.

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-ink;

@include stage($stage-orange);

// 주황 무대 위 글자는 전부 잉크 — 크림 글자는 3.11:1 로 AA 미달이다 (blog-design 대비 표)
.df { display: flex; flex-direction: column; gap: $sp-2; width: 100%; max-width: 440px; }

.df__hud { display: flex; align-items: center; justify-content: space-between; gap: $sp-2; }
.df__hud > p { display: flex; align-items: center; gap: $sp-1; margin: 0; }
.df__ico { width: 15px; height: 15px; flex: 0 0 auto; color: $color; }
.df__label { font-weight: 700; font-size: clamp(9px, 2.4vw, 11px); line-height: 1.4; color: $color; }
.df__num {
  font-weight: 800; font-size: clamp(13px, 3.6vw, 17px); line-height: 1;
  color: $color; font-variant-numeric: tabular-nums;
}
.df__lives { display: flex; align-items: center; gap: $sp-1; }
.df__life {
  width: 13px; height: 13px; color: $color; opacity: .18;
  transition: opacity $dur-quick $ease-out;
}
.df__life svg { display: block; width: 100%; height: 100%; }
.df__life.is-on { opacity: 1; }

.df__field {
  position: relative; overflow: hidden; // 낙하 장애물이 문서 scrollHeight 를 늘리지 않게 가둔다 (BD9)
  height: clamp(96px, 56vh, 188px);
  border: 2px solid rgba($color, .30);
  border-radius: $r-card;
  background: rgba($color, .07);
  touch-action: none;
  cursor: pointer;
}
.df__field:focus-visible { outline: 2px solid $color; outline-offset: 2px; }
// 바닥선 — 로켓이 서는 지면
.df__field::after {
  content: ""; position: absolute; left: $sp-2; right: $sp-2; bottom: $sp-1; height: 2px;
  border-radius: $r-pill; background: rgba($color, .30);
}

.df__player {
  position: absolute; left: 0; bottom: 9px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba($subject-cream, .16);
  border-radius: 50%;
  will-change: transform;
}
.df__rocket { width: 26px; height: 26px; color: $subject-cream; transform: rotate(-45deg); }

.df__rock {
  position: absolute; top: -34px;
  width: 24px; height: 24px;
  border-radius: $r-xs;
  background: $color;
  will-change: transform;
  animation-name: dfFall;
  animation-duration: var(--t, 1200ms);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes dfFall {
  from { transform: translateY(0); }
  to { transform: translateY(340px); }
}
.df__player.is-hit {
  animation-name: dfHit;
  animation-duration: 160ms;
  animation-iteration-count: 4;
  animation-timing-function: $ease-out;
}
@keyframes dfHit {
  0%, 100% { opacity: 1; }
  50% { opacity: .12; }
}

.df__hint {
  position: absolute; left: 50%; top: $sp-2; transform: translateX(-50%);
  margin: 0; padding: $sp-1 $sp-2;
  border-radius: $r-pill;
  background: $stage-paper; color: $color;
  font-weight: 700; font-size: clamp(9px, 2.4vw, 11px); line-height: 1.4;
  white-space: nowrap;
}
.df__hint[hidden] { display: none; }

.df__over {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba($stage-ink, .60);
}
.df__over[hidden] { display: none; }
.df__overPanel {
  display: grid; justify-items: center; gap: $sp-2;
  padding: $sp-4 $sp-5;
  border-radius: $r-card;
  background: $subject-cream;
  box-shadow: $shadow-raised;
}
.df__overTitle {
  margin: 0; font-weight: 800; font-size: clamp(14px, 4vw, 18px); line-height: 1.2; color: $subject-ink;
}
.df__overScore {
  margin: 0;
  font-weight: 800; font-size: clamp(15px, 4.4vw, 20px); line-height: 1.2;
  color: $subject-orange-deep; // 크림 면 위 주황 글자는 진한 계열토큰만 통과 (5.04:1)
}
.df__restart {
  display: inline-flex; align-items: center; gap: $sp-1;
  border: 0; border-radius: $r-pill;
  padding: $sp-1 $sp-3;
  background: $subject-blue-deep; color: $subject-cream; // 파란 면에 크림 글자는 deep 토큰 (5.98:1)
  cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: clamp(10px, 2.6vw, 12px); line-height: 1.6;
  transition: transform $dur-quick $ease-pop;
}
.df__restart .df__ico { color: $subject-cream; }
.df__restart:hover { transform: translateY(-2px) scale(1.04); }
.df__restart:active { transform: translateY(0) scale(.97); }
.df__restart:focus-visible { outline: 2px solid $subject-ink; outline-offset: 2px; }

// ── 미리보기(.is-demo): 장애물 낙하 + 로켓 회피 스윙 ──────────────
// 장애물 네 개는 서로 다른 위상(음수 delay)으로 떨어져 2초 내내 움직임이 고루 분포한다.
.df.is-demo .df__rock--demo {
  left: var(--x0, 20%);
  animation-name: dfFallDemo;
  animation-duration: $duration;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--d0, 0ms);
  animation-fill-mode: both;
}
@keyframes dfFallDemo {
  from { transform: translateY(0); }
  to { transform: translateY(320px); }
}
.df.is-demo .df__player {
  animation-name: dfSway;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
}
// --cx 는 JS 가 놓는 로켓 중심 위치. 장애물을 옆으로 비껴가는 회피 동작으로 보인다.
@keyframes dfSway {
  0% { transform: translateX(var(--cx, 150px)); }
  24% { transform: translateX(calc(var(--cx, 150px) - 92px)); }
  52% { transform: translateX(calc(var(--cx, 150px) + 12px)); }
  78% { transform: translateX(calc(var(--cx, 150px) + 86px)); }
  100% { transform: translateX(var(--cx, 150px)); }
}

@media (max-width: 340px) {
  .df { gap: $sp-1; }
  .df__field { height: clamp(88px, 48vh, 140px); }
  .df__player { width: 30px; height: 30px; }
  .df__rocket { width: 22px; height: 22px; }
  .df__rock { width: 20px; height: 20px; }
  .df__overPanel { padding: $sp-2 $sp-3; gap: $sp-1; }
}

// reduce 에서는 연속 모션을 끈다 — 미리보기 장애물은 제자리에 점등식으로 보이고,
// 실제 게임의 낙하는 8단계 점등식(steps)으로 떨어진다. 피격 깜빡임도 끄고 반투명 고정으로 알린다.
@media (prefers-reduced-motion: reduce) {
  .df.is-demo .df__rock--demo { animation: none !important; top: var(--y0, 40%) !important; }
  .df.is-demo .df__player { animation: none !important; }
  .df__rock { animation-timing-function: steps(8, end) !important; }
  .df__player.is-hit { animation: none !important; opacity: .35 !important; }
  .df__life, .df__restart { transition: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.df {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 440px;
}

.df__hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.df__hud > p {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.df__ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #17141a;
}

.df__label {
  font-weight: 700;
  font-size: clamp(9px, 2.4vw, 11px);
  line-height: 1.4;
  color: #17141a;
}

.df__num {
  font-weight: 800;
  font-size: clamp(13px, 3.6vw, 17px);
  line-height: 1;
  color: #17141a;
  font-variant-numeric: tabular-nums;
}

.df__lives {
  display: flex;
  align-items: center;
  gap: 4px;
}

.df__life {
  width: 13px;
  height: 13px;
  color: #17141a;
  opacity: 0.18;
  transition: opacity 220ms ease-out;
}

.df__life svg {
  display: block;
  width: 100%;
  height: 100%;
}

.df__life.is-on {
  opacity: 1;
}

.df__field {
  position: relative;
  overflow: hidden;
  height: clamp(96px, 56vh, 188px);
  border: 2px solid rgba(23, 20, 26, 0.3);
  border-radius: 16px;
  background: rgba(23, 20, 26, 0.07);
  touch-action: none;
  cursor: pointer;
}

.df__field:focus-visible {
  outline: 2px solid #17141a;
  outline-offset: 2px;
}

.df__field::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.3);
}

.df__player {
  position: absolute;
  left: 0;
  bottom: 9px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(255, 247, 230, 0.16);
  border-radius: 50%;
  will-change: transform;
}

.df__rocket {
  width: 26px;
  height: 26px;
  color: #fff7e6;
  transform: rotate(-45deg);
}

.df__rock {
  position: absolute;
  top: -34px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: #17141a;
  will-change: transform;
  animation-name: dfFall;
  animation-duration: var(--t, 1200ms);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes dfFall {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(340px);
  }
}
.df__player.is-hit {
  animation-name: dfHit;
  animation-duration: 160ms;
  animation-iteration-count: 4;
  animation-timing-function: ease-out;
}

@keyframes dfHit {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.12;
  }
}
.df__hint {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: #17141a;
  font-weight: 700;
  font-size: clamp(9px, 2.4vw, 11px);
  line-height: 1.4;
  white-space: nowrap;
}

.df__hint[hidden] {
  display: none;
}

.df__over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(23, 20, 26, 0.6);
}

.df__over[hidden] {
  display: none;
}

.df__overPanel {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #fff7e6;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}

.df__overTitle {
  margin: 0;
  font-weight: 800;
  font-size: clamp(14px, 4vw, 18px);
  line-height: 1.2;
  color: #17141a;
}

.df__overScore {
  margin: 0;
  font-weight: 800;
  font-size: clamp(15px, 4.4vw, 20px);
  line-height: 1.2;
  color: #c93000;
}

.df__restart {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  background: #0a4fe8;
  color: #fff7e6;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(10px, 2.6vw, 12px);
  line-height: 1.6;
  transition: transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.df__restart .df__ico {
  color: #fff7e6;
}

.df__restart:hover {
  transform: translateY(-2px) scale(1.04);
}

.df__restart:active {
  transform: translateY(0) scale(0.97);
}

.df__restart:focus-visible {
  outline: 2px solid #17141a;
  outline-offset: 2px;
}

.df.is-demo .df__rock--demo {
  left: var(--x0, 20%);
  animation-name: dfFallDemo;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--d0, 0ms);
  animation-fill-mode: both;
}

@keyframes dfFallDemo {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(320px);
  }
}
.df.is-demo .df__player {
  animation-name: dfSway;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes dfSway {
  0% {
    transform: translateX(var(--cx, 150px));
  }
  24% {
    transform: translateX(calc(var(--cx, 150px) - 92px));
  }
  52% {
    transform: translateX(calc(var(--cx, 150px) + 12px));
  }
  78% {
    transform: translateX(calc(var(--cx, 150px) + 86px));
  }
  100% {
    transform: translateX(var(--cx, 150px));
  }
}
@media (max-width: 340px) {
  .df {
    gap: 4px;
  }
  .df__field {
    height: clamp(88px, 48vh, 140px);
  }
  .df__player {
    width: 30px;
    height: 30px;
  }
  .df__rocket {
    width: 22px;
    height: 22px;
  }
  .df__rock {
    width: 20px;
    height: 20px;
  }
  .df__overPanel {
    padding: 8px 12px;
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .df.is-demo .df__rock--demo {
    animation: none !important;
    top: var(--y0, 40%) !important;
  }
  .df.is-demo .df__player {
    animation: none !important;
  }
  .df__rock {
    animation-timing-function: steps(8, end) !important;
  }
  .df__player.is-hit {
    animation: none !important;
    opacity: 0.35 !important;
  }
  .df__life, .df__restart {
    transition: none !important;
  }
}

// 떨어지는 것 피하기 — 장애물 낙하는 CSS animation(transform: translateY),
// 로켓 이동은 requestAnimationFrame 의 transform: translateX,
// 충돌은 getBoundingClientRect 겹침 검사. 목숨 3, 점수는 피한 장애물 수.
var BEST_KEY = 'p301-07-best';
var OVER_SCORE_TEXT = 'Dodged {n}';
var LIVES_ARIA = 'Lives left: {n}';

var root = document.getElementById('df');
var field = document.getElementById('dfField');
var player = document.getElementById('dfPlayer');
var scoreEl = document.getElementById('dfScore');
var bestEl = document.getElementById('dfBest');
var livesWrap = document.getElementById('dfLives');
var hintEl = document.getElementById('dfHint');
var overEl = document.getElementById('dfOver');
var overScoreEl = document.getElementById('dfOverScore');
var restartBtn = document.getElementById('dfRestart');

var PLAYER_SPEED = 250; // 초당 픽셀
var START_LIVES = 3;

var running = false;
var lives = START_LIVES;
var score = 0;
var best = loadBest();
var px = 0;        // 로켓 왼쪽 끝 위치
var pointerX = null; // 포인터 조작의 목표 x
var keys = { left: false, right: false };
var rocks = [];
var spawnTimer = 0;
var invulnUntil = 0;
var rafId = 0;
var lastT = 0;

function loadBest() {
  try { return Number(localStorage.getItem(BEST_KEY)) || 0; } catch (e) { return 0; }
}
function saveBest(n) {
  try { localStorage.setItem(BEST_KEY, String(n)); } catch (e) { /* 시크릿 창에서는 저장만 건너뛴다 */ }
}
function clampPx(v) {
  var w = field.clientWidth - player.offsetWidth;
  return Math.max(0, Math.min(w, v));
}
function centerPx() {
  return Math.max(0, (field.clientWidth - player.offsetWidth) / 2);
}
function paintLives() {
  var hearts = livesWrap.children;
  for (var i = 0; i < hearts.length; i++) { hearts[i].classList.toggle('is-on', i < lives); }
  livesWrap.setAttribute('aria-label', LIVES_ARIA.replace('{n}', String(lives)));
}
function paintHud() {
  scoreEl.textContent = String(score);
  bestEl.textContent = String(best);
}
function placePlayer() {
  px = clampPx(px);
  player.style.transform = 'translateX(' + Math.round(px) + 'px)';
}
function spawnRock() {
  if (!running) { return; }
  var rock = document.createElement('i');
  rock.className = 'df__rock';
  var size = 20 + Math.floor(Math.random() * 11);
  rock.style.width = size + 'px';
  rock.style.height = size + 'px';
  rock.style.left = (4 + Math.random() * 84) + '%';
  rock.style.setProperty('--t', Math.max(820, 1500 - score * 14) + 'ms');
  rock.addEventListener('animationend', function () { dodge(rock); });
  field.appendChild(rock);
  rocks.push(rock);
  spawnTimer = setTimeout(spawnRock, Math.max(320, 720 - score * 9));
}
function dodge(rock) {
  rock.remove();
  var i = rocks.indexOf(rock);
  if (i >= 0) { rocks.splice(i, 1); }
  if (!running) { return; }
  score += 1;
  if (score > best) { best = score; saveBest(best); }
  paintHud();
}
function hitRock(rock) {
  rock.remove();
  var i = rocks.indexOf(rock);
  if (i >= 0) { rocks.splice(i, 1); }
  lives -= 1;
  paintLives();
  invulnUntil = performance.now() + 900;
  player.classList.remove('is-hit');
  void player.offsetWidth; // 피격 깜빡임 애니메이션을 처음부터 Again 트는 재정렬 트릭
  player.classList.add('is-hit');
  if (lives <= 0) { gameOver(); }
}
function rectsOverlap(a, b) {
  return a.left < b.right - 2 && a.right > b.left + 2 && a.top < b.bottom - 4 && a.bottom > b.top + 4;
}
function tick(now) {
  if (!running) { return; }
  var dt = Math.min(64, now - lastT) / 1000;
  lastT = now;
  var dir = (keys.right ? 1 : 0) - (keys.left ? 1 : 0);
  if (dir !== 0) {
    pointerX = null;
    px += dir * PLAYER_SPEED * dt;
  } else if (pointerX !== null) {
    var d = pointerX - px;
    var step = PLAYER_SPEED * dt;
    px += Math.abs(d) <= step ? d : Math.sign(d) * step;
  }
  placePlayer();
  if (now >= invulnUntil) {
    var pr = player.getBoundingClientRect();
    var hit = { left: pr.left + 5, right: pr.right - 5, top: pr.top + 6, bottom: pr.bottom - 4 };
    for (var i = rocks.length - 1; i >= 0; i--) {
      if (rectsOverlap(hit, rocks[i].getBoundingClientRect())) { hitRock(rocks[i]); break; }
    }
  }
  rafId = requestAnimationFrame(tick);
}
function startRun() {
  if (running) { return; }
  running = true;
  root.classList.remove('is-demo');
  var demoRocks = field.querySelectorAll('.df__rock--demo');
  for (var i = 0; i < demoRocks.length; i++) { demoRocks[i].remove(); }
  hintEl.hidden = true;
  overEl.hidden = true;
  lastT = performance.now();
  rafId = requestAnimationFrame(tick);
  spawnTimer = setTimeout(spawnRock, 350);
  field.focus({ preventScroll: true });
}
function gameOver() {
  running = false;
  clearTimeout(spawnTimer);
  cancelAnimationFrame(rafId);
  for (var i = 0; i < rocks.length; i++) { rocks[i].remove(); }
  rocks = [];
  saveBest(best);
  overScoreEl.textContent = OVER_SCORE_TEXT.replace('{n}', String(score));
  overEl.hidden = false;
  restartBtn.focus({ preventScroll: true });
}
restartBtn.addEventListener('click', function () {
  lives = START_LIVES;
  score = 0;
  paintLives();
  paintHud();
  px = centerPx();
  placePlayer();
  startRun();
});
window.addEventListener('keydown', function (e) {
  var k = e.key;
  if (k === 'ArrowLeft' || k === 'a' || k === 'A') {
    keys.left = true;
    e.preventDefault();
  } else if (k === 'ArrowRight' || k === 'd' || k === 'D') {
    keys.right = true;
    e.preventDefault();
  } else {
    return;
  }
  if (!running && overEl.hidden) { startRun(); }
});
window.addEventListener('keyup', function (e) {
  var k = e.key;
  if (k === 'ArrowLeft' || k === 'a' || k === 'A') { keys.left = false; }
  else if (k === 'ArrowRight' || k === 'd' || k === 'D') { keys.right = false; }
});
function pointerTarget(e) {
  var r = field.getBoundingClientRect();
  pointerX = clampPx(e.clientX - r.left - player.offsetWidth / 2);
}
field.addEventListener('pointerdown', function (e) {
  if (!overEl.hidden || running) { return; }
  startRun();
  pointerTarget(e);
});
field.addEventListener('pointermove', function (e) {
  if (!running) { return; }
  pointerTarget(e);
});
window.addEventListener('resize', function () {
  px = clampPx(px);
  placePlayer();
});
paintLives();
paintHud();
px = centerPx();
placePlayer();
player.style.setProperty('--cx', Math.round(centerPx()) + 'px');

// DodgeFallingRun — vanilla 판(run/301/demo/07-dodge-falling-run/index.html) 의 React 포트.
// 장애물 낙하는 CSS animation(translateY), 로켓 이동은 requestAnimationFrame 의 translateX,
// 충돌은 getBoundingClientRect 겹침 검사. 값·규칙은 vanilla 와 같다.
import { useEffect, useRef, useState } from "react";
import type { PointerEvent as ReactPointerEvent } from "react";
import styles from "./DodgeFallingRun.module.scss";

export type DodgeFallingRunProps = {
  duration?: number;
  easing?: string;
  accentColor?: string;
};

type Rock = { id: number; leftPct: number; size: number; fallMs: number };
type Vars = { [k: string]: string | undefined };
// ambient.d.ts 의 useRef 는 { current: T | null } 을 돌려주므로 값 보관용 참조는 null 없는 상자로 단언한다
type Box<T> = { current: T };

const BEST_KEY = "p301-07-best";
const OVER_SCORE_TEXT = "{n}개 피했습니다";
const LIVES_ARIA = "남은 목숨 {n}";
const HINT = "방향키 또는 A 와 D 로 움직여 장애물을 피하세요";
const FIELD_ARIA = "떨어지는 장애물 피하기 놀이판";
const LABEL_SCORE = "점수";
const LABEL_BEST = "최고기록";
const OVER_TITLE = "게임 끝";
const RESTART = "다시 시작";
const PLAYER_SPEED = 250; // 초당 픽셀
const START_LIVES = 3;

function loadBest(): number {
  try { return Number(window.localStorage.getItem(BEST_KEY)) || 0; } catch (e) { return 0; }
}
function saveBest(n: number) {
  try { window.localStorage.setItem(BEST_KEY, String(n)); } catch (e) { /* 시크릿 창에서는 저장만 건너뛴다 */ }
}

export default function DodgeFallingRun({
  duration = 2000,
  easing = "ease-out",
  accentColor = "#17141a",
}: DodgeFallingRunProps) {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const fieldRef = useRef<HTMLDivElement | null>(null);
  const playerRef = useRef<HTMLSpanElement | null>(null);
  const restartRef = useRef<HTMLButtonElement | null>(null);
  const keys = useRef({ left: false, right: false }) as Box<{ left: boolean; right: boolean }>;
  const pointerX = useRef(null) as Box<number | null>;
  const px = useRef(0) as Box<number>;
  const invulnUntil = useRef(0) as Box<number>;
  const rockId = useRef(0) as Box<number>;
  const g = useRef({ score: 0, best: 0, lives: START_LIVES, running: false, over: false }) as Box<{
    score: number; best: number; lives: number; running: boolean; over: boolean;
  }>;

  const [rocks, setRocks] = useState<Rock[]>([]);
  const [score, setScore] = useState(0);
  const [best, setBest] = useState(0);
  const [lives, setLives] = useState(START_LIVES);
  const [running, setRunning] = useState(false);
  const [over, setOver] = useState(false);
  const [demo, setDemo] = useState(true);

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--accent": accentColor };
  const demoVars = (x0: string, y0: string, d0: string): Vars => ({ "--x0": x0, "--y0": y0, "--d0": d0 });

  function place() {
    const field = fieldRef.current, player = playerRef.current;
    if (!field || !player) { return; }
    const w = field.clientWidth - player.offsetWidth;
    px.current = Math.max(0, Math.min(w, px.current));
    player.style.transform = "translateX(" + Math.round(px.current) + "px)";
  }
  function setPointerFrom(e: ReactPointerEvent<HTMLDivElement>) {
    const field = fieldRef.current, player = playerRef.current;
    if (!field || !player) { return; }
    const r = field.getBoundingClientRect();
    const w = field.clientWidth - player.offsetWidth;
    pointerX.current = Math.max(0, Math.min(w, e.clientX - r.left - player.offsetWidth / 2));
  }
  function removeRock(id: number) {
    setRocks(rs => rs.filter(r => r.id !== id));
  }
  function dodge(id: number) {
    removeRock(id);
    if (!g.current.running) { return; }
    g.current.score += 1;
    setScore(g.current.score);
    if (g.current.score > g.current.best) {
      g.current.best = g.current.score;
      setBest(g.current.best);
      saveBest(g.current.best);
    }
  }
  function damage(now: number) {
    g.current.lives -= 1;
    setLives(g.current.lives);
    invulnUntil.current = now + 900;
    const player = playerRef.current;
    if (player) {
      player.classList.remove("is-hit");
      void player.offsetWidth; // 피격 깜빡임 애니메이션을 처음부터 다시 트는 재정렬 트릭
      player.classList.add("is-hit");
    }
    if (g.current.lives <= 0) { endGame(); }
  }
  function endGame() {
    g.current.running = false;
    g.current.over = true;
    setRunning(false);
    setRocks([]);
    saveBest(g.current.best);
    setOver(true);
  }
  function startRun() {
    if (g.current.running) { return; }
    g.current.running = true;
    g.current.over = false;
    setDemo(false);
    setOver(false);
    setRunning(true);
    const field = fieldRef.current;
    if (field) { field.focus({ preventScroll: true }); }
  }
  function restart() {
    g.current.score = 0;
    g.current.lives = START_LIVES;
    setScore(0);
    setLives(START_LIVES);
    const field = fieldRef.current;
    if (field) { px.current = Math.max(0, (field.clientWidth - 36) / 2); }
    place();
    startRun();
  }

  // 최초 배치 + 키보드·리사이즈
  useEffect(() => {
    g.current.best = loadBest();
    setBest(g.current.best);
    const field = fieldRef.current, player = playerRef.current;
    if (field && player) {
      px.current = Math.max(0, (field.clientWidth - player.offsetWidth) / 2);
      place();
      player.style.setProperty("--cx", Math.round(px.current) + "px");
    }
    const down = (e: KeyboardEvent) => {
      const k = e.key;
      if (k === "ArrowLeft" || k === "a" || k === "A") { keys.current.left = true; e.preventDefault(); }
      else if (k === "ArrowRight" || k === "d" || k === "D") { keys.current.right = true; e.preventDefault(); }
      else { return; }
      if (!g.current.running && !g.current.over) { startRun(); }
    };
    const up = (e: KeyboardEvent) => {
      const k = e.key;
      if (k === "ArrowLeft" || k === "a" || k === "A") { keys.current.left = false; }
      else if (k === "ArrowRight" || k === "d" || k === "D") { keys.current.right = false; }
    };
    const onResize = () => place();
    window.addEventListener("keydown", down);
    window.addEventListener("keyup", up);
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("keydown", down);
      window.removeEventListener("keyup", up);
      window.removeEventListener("resize", onResize);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 장애물 스폰 (점수가 오를수록 촘촘하게)
  useEffect(() => {
    if (!running) { return; }
    let alive = true;
    let t = 0;
    const spawn = () => {
      if (!alive) { return; }
      const id = rockId.current + 1;
      rockId.current = id;
      const size = 20 + Math.floor(Math.random() * 11);
      const fallMs = Math.max(820, 1500 - g.current.score * 14);
      setRocks(rs => [...rs, { id, leftPct: 4 + Math.random() * 84, size, fallMs }]);
      t = window.setTimeout(spawn, Math.max(320, 720 - g.current.score * 9));
    };
    t = window.setTimeout(spawn, 350);
    return () => { alive = false; window.clearTimeout(t); };
  }, [running]);

  // 이동 + 충돌 검사 루프
  useEffect(() => {
    if (!running) { return; }
    let raf = 0;
    let last = performance.now();
    const overlap = (a: DOMRect, b: DOMRect) =>
      a.left < b.right - 2 && a.right > b.left + 2 && a.top < b.bottom - 4 && a.bottom > b.top + 4;
    const tick = (now: number) => {
      const dt = Math.min(64, now - last) / 1000;
      last = now;
      const field = fieldRef.current, player = playerRef.current;
      if (!field || !player) { return; }
      const dir = (keys.current.right ? 1 : 0) - (keys.current.left ? 1 : 0);
      if (dir !== 0) {
        pointerX.current = null;
        px.current += dir * PLAYER_SPEED * dt;
      } else if (pointerX.current !== null) {
        const d = pointerX.current - px.current;
        const step = PLAYER_SPEED * dt;
        px.current += Math.abs(d) <= step ? d : Math.sign(d) * step;
      }
      place();
      if (now >= invulnUntil.current) {
        const pr = player.getBoundingClientRect();
        const hit = new DOMRect(pr.left + 5, pr.top + 6, pr.width - 10, pr.height - 10);
        const els = field.querySelectorAll("[data-rock]");
        for (let i = 0; i < els.length; i++) {
          const el = els[i];
          if (overlap(hit, el.getBoundingClientRect())) {
            const id = Number(el.getAttribute("data-rock"));
            removeRock(id);
            damage(now);
            break;
          }
        }
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [running]);

  // 게임 끝 오버레이가 열리면 다시 시작 버튼으로 포커스를 옮긴다
  useEffect(() => {
    if (over && restartRef.current) { restartRef.current.focus({ preventScroll: true }); }
  }, [over]);

  function onFieldPointerDown(e: ReactPointerEvent<HTMLDivElement>) {
    if (!g.current.running && !g.current.over) { startRun(); setPointerFrom(e); }
  }
  function onFieldPointerMove(e: ReactPointerEvent<HTMLDivElement>) {
    if (g.current.running) { setPointerFrom(e); }
  }

  const rootCls = [styles.root, demo ? styles.isDemo : ""].filter(Boolean).join(" ");
  const rockVars = (r: Rock): Vars => ({ "--t": `${r.fallMs}ms` });
  const hearts = [0, 1, 2];

  return (
    <main className={styles.stage}>
      <svg width="0" height="0" style={{ position: "absolute" }} aria-hidden="true">
        <defs>
          <symbol id="ico-game" viewBox="0 0 256 256" fill="currentColor"><g><path d="M216.86 207.57a28 28 0 0 1-24.66-7.77L150.09 152H172a51.94 51.94 0 0 0 51.2-61l16.36 84.17a28 28 0 0 1-22.7 32.4" opacity=".2"/><path d="M176 112h-24a8 8 0 0 1 0-16h24a8 8 0 0 1 0 16m-72-16h-8v-8a8 8 0 0 0-16 0v8h-8a8 8 0 0 0 0 16h8v8a8 8 0 0 0 16 0v-8h8a8 8 0 0 0 0-16m137.48 104.65a36 36 0 0 1-54.94 4.81c-.12-.12-.24-.24-.35-.37L146.48 160h-37l-39.67 45.09l-.35.37A36.08 36.08 0 0 1 44 216a36 36 0 0 1-35.44-42.25a.7.7 0 0 1 0-.14l16.37-84.09A59.88 59.88 0 0 1 83.89 40H172a60.08 60.08 0 0 1 59 49.25v.18l16.37 84.17a.7.7 0 0 1 0 .14a35.74 35.74 0 0 1-5.89 26.91M172 144a44 44 0 0 0 0-88H83.89a43.9 43.9 0 0 0-43.21 36.37v.13L24.3 176.59A20 20 0 0 0 58 194.3l41.92-47.59a8 8 0 0 1 6-2.71Zm59.7 32.59l-8.74-45A60 60 0 0 1 172 160h-4.2l30.2 34.31a20.09 20.09 0 0 0 17.46 5.39a20 20 0 0 0 16.23-23.11Z"/></g></symbol>
          <symbol id="ico-trophy" viewBox="0 0 256 256" fill="currentColor"><g><path d="M200 48v63.1c0 39.7-31.75 72.6-71.45 72.9A72 72 0 0 1 56 112V48Z" opacity=".2"/><path d="M232 64h-24V48a8 8 0 0 0-8-8H56a8 8 0 0 0-8 8v16H24A16 16 0 0 0 8 80v16a40 40 0 0 0 40 40h3.65A80.13 80.13 0 0 0 120 191.61V216H96a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16h-24v-24.42c31.94-3.23 58.44-25.64 68.08-55.58H208a40 40 0 0 0 40-40V80a16 16 0 0 0-16-16M48 120a24 24 0 0 1-24-24V80h24v32q0 4 .39 8Zm144-8.9c0 35.52-29 64.64-64 64.9a64 64 0 0 1-64-64V56h128ZM232 96a24 24 0 0 1-24 24h-.5a82 82 0 0 0 .5-8.9V80h24Z"/></g></symbol>
          <symbol id="ico-restart" viewBox="0 0 256 256" fill="currentColor"><g><path d="M216 128a88 88 0 1 1-88-88a88 88 0 0 1 88 88" opacity=".2"/><path d="M240 56v48a8 8 0 0 1-8 8h-48a8 8 0 0 1 0-16h27.4l-26.59-24.36l-.25-.24a80 80 0 1 0-1.67 114.78a8 8 0 0 1 11 11.63A95.44 95.44 0 0 1 128 224h-1.32a96 96 0 1 1 69.07-164L224 85.8V56a8 8 0 1 1 16 0"/></g></symbol>
          <symbol id="ico-heart" viewBox="0 0 256 256" fill="currentColor"><g><path d="M232 102c0 66-104 122-104 122S24 168 24 102a54 54 0 0 1 54-54c22.59 0 41.94 12.31 50 32c8.06-19.69 27.41-32 50-32a54 54 0 0 1 54 54" opacity=".2"/><path d="M178 40c-20.65 0-38.73 8.88-50 23.89C116.73 48.88 98.65 40 78 40a62.07 62.07 0 0 0-62 62c0 70 103.79 126.66 108.21 129a8 8 0 0 0 7.58 0C136.21 228.66 240 172 240 102a62.07 62.07 0 0 0-62-62m-50 174.8c-18.26-10.64-96-59.11-96-112.8a46.06 46.06 0 0 1 46-46c19.45 0 35.78 10.36 42.6 27a8 8 0 0 0 14.8 0c6.82-16.67 23.15-27 42.6-27a46.06 46.06 0 0 1 46 46c0 53.61-77.76 102.15-96 112.8"/></g></symbol>
          <symbol id="ico-rocket" viewBox="0 0 256 256" fill="currentColor"><g><path d="m94.81 192l-29.45 22.24a8 8 0 0 1-12.81-4.51L40.19 154.1a8 8 0 0 1 1.66-6.86l30.31-36.33C71 134.25 76.7 161.43 94.81 192m119.34-44.76l-30.31-36.33c1.21 23.34-4.54 50.52-22.65 81.09l29.45 22.24a8 8 0 0 0 12.81-4.51l12.36-55.63a8 8 0 0 0-1.66-6.86" opacity=".2"/><path d="M152 224a8 8 0 0 1-8 8h-32a8 8 0 0 1 0-16h32a8 8 0 0 1 8 8m-24-112a12 12 0 1 0-12-12a12 12 0 0 0 12 12m95.62 43.83l-12.36 55.63a16 16 0 0 1-25.51 9.11L158.51 200h-61l-27.26 20.57a16 16 0 0 1-25.51-9.11l-12.36-55.63a16.09 16.09 0 0 1 3.32-13.71l28.56-34.26a123 123 0 0 1 8.57-36.67c12.9-32.34 36-52.63 45.37-59.85a16 16 0 0 1 19.6 0c9.34 7.22 32.47 27.51 45.37 59.85a123 123 0 0 1 8.57 36.67l28.56 34.26a16.09 16.09 0 0 1 3.32 13.71M99.43 184h57.14c21.12-37.54 25.07-73.48 11.74-106.88C156.55 47.64 134.49 29 128 24c-6.51 5-28.57 23.64-40.33 53.12c-13.31 33.4-9.36 69.34 11.76 106.88m-15 5.85q-16.15-29.35-19.6-57.69L48 152.36L60.36 208l.18-.13ZM208 152.36l-16.83-20.2q-3.42 28.28-19.56 57.69l23.85 18l.18.13Z"/></g></symbol>
        </defs>
      </svg>
      <div className={rootCls} style={vars}>
        <header className={styles.hud}>
          <p className={styles.stat}>
            <svg className={styles.ico} aria-hidden="true"><use href="#ico-game" /></svg>
            <span className={styles.label}>{LABEL_SCORE}</span>
            <b className={styles.num} aria-live="polite">{score}</b>
          </p>
          <p className={styles.livesBox} aria-label={LIVES_ARIA.replace("{n}", String(lives))}>
            {hearts.map(i => (
              <i key={i} className={[styles.life, i < lives ? styles.lifeOn : ""].filter(Boolean).join(" ")}>
                <svg aria-hidden="true"><use href="#ico-heart" /></svg>
              </i>
            ))}
          </p>
          <p className={styles.stat}>
            <svg className={styles.ico} aria-hidden="true"><use href="#ico-trophy" /></svg>
            <span className={styles.label}>{LABEL_BEST}</span>
            <b className={styles.num}>{best}</b>
          </p>
        </header>
        <div
          className={styles.field}
          ref={fieldRef}
          tabIndex={0}
          role="application"
          aria-label={FIELD_ARIA}
          onPointerDown={onFieldPointerDown}
          onPointerMove={onFieldPointerMove}
        >
          {demo && (
            <>
              <i className={styles.rockDemo} style={demoVars("16%", "22%", "0ms")} />
              <i className={styles.rockDemo} style={demoVars("40%", "34%", "-500ms")} />
              <i className={styles.rockDemo} style={demoVars("62%", "58%", "-1000ms")} />
              <i className={styles.rockDemo} style={demoVars("84%", "70%", "-1500ms")} />
            </>
          )}
          {rocks.map(r => (
            <i
              key={r.id}
              className={styles.rock}
              data-rock={r.id}
              style={{ left: `${r.leftPct}%`, width: r.size, height: r.size, ...rockVars(r) }}
              onAnimationEnd={() => dodge(r.id)}
            />
          ))}
          <span className={styles.player} ref={playerRef}>
            <svg className={styles.rocket} aria-hidden="true"><use href="#ico-rocket" /></svg>
          </span>
          {!running && !over && <p className={styles.hint}>{HINT}</p>}
          {over && (
            <div className={styles.over}>
              <div className={styles.overPanel}>
                <p className={styles.overTitle}>{OVER_TITLE}</p>
                <p className={styles.overScore}>{OVER_SCORE_TEXT.replace("{n}", String(score))}</p>
                <button className={styles.restart} ref={restartRef} type="button" onClick={restart}>
                  <svg className={styles.ico} aria-hidden="true"><use href="#ico-restart" /></svg>
                  <span>{RESTART}</span>
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </main>
  );
}