/* 가상 키보드 — 좌우 손 색 구분은 교육 장치다 (PLAN.md 8.2)
   손가락은 같은 색의 명도 4단계로 나눈다. 검지(f1)가 가장 진하다. */

.kbwrap {
  height: var(--h-keyboard);
  display: grid;
  place-items: center;
  padding: 0 var(--gap);
}

.kb {
  --key: min(6.2vh, 4.6vw);
  display: flex;
  flex-direction: column;
  gap: calc(var(--key) * .11);
  transition: opacity .2s ease;
}

.kb__row {
  display: flex;
  gap: calc(var(--key) * .11);
  justify-content: center;
}
/* 실제 자판처럼 줄마다 어긋나게 둔다 — 손이 자리를 몸으로 외우게 하려면 모양이 같아야 한다 */
.kb__row--1 { padding-left: calc(var(--key) * .5); }
.kb__row--2 { padding-left: calc(var(--key) * 1.2); }
.kb__row--space { margin-top: calc(var(--key) * .12); }

.kb__key {
  position: relative;
  width: var(--key);
  height: var(--key);
  border-radius: calc(var(--key) * .2);
  display: grid;
  place-items: center;
  font-size: calc(var(--key) * .46);
  color: #fff;
  background: var(--k, #444);
  box-shadow: inset 0 calc(var(--key) * -.07) 0 rgb(0 0 0 / .22);
  transition: transform .07s ease, box-shadow .07s ease, filter .12s ease;
}

/* 왼손 = 딸기, 오른손 = 민트. 명도 4단계로 손가락을 나눈다 */
.kb__key--left  { --k: var(--left); }
.kb__key--right { --k: var(--right); }
.kb__key--left.kb__key--f1  { --k: var(--left-f1); }
.kb__key--left.kb__key--f2  { --k: var(--left-f2); }
.kb__key--left.kb__key--f3  { --k: var(--left-f3); }
.kb__key--left.kb__key--f4  { --k: var(--left-f4); }
.kb__key--right.kb__key--f1 { --k: var(--right-f1); }
.kb__key--right.kb__key--f2 { --k: var(--right-f2); }
.kb__key--right.kb__key--f3 { --k: var(--right-f3); }
.kb__key--right.kb__key--f4 { --k: var(--right-f4); }
.kb__key--left.kb__key--f3,
.kb__key--left.kb__key--f4,
.kb__key--right.kb__key--f3,
.kb__key--right.kb__key--f4 { color: var(--ink); }

/* 홈 포지션 8키에는 손가락을 얹는 자리 표시 */
.kb__key--home::after {
  content: '';
  position: absolute;
  bottom: calc(var(--key) * .13);
  width: calc(var(--key) * .34);
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
}

.kb__shifted {
  position: absolute;
  top: calc(var(--key) * .06);
  right: calc(var(--key) * .12);
  font-size: calc(var(--key) * .26);
  opacity: .55;
}
.kb--shift .kb__shifted { opacity: 1; color: var(--accent); }

.kb__key--space {
  width: calc(var(--key) * 6.4);
  font-size: calc(var(--key) * .27);
  --k: var(--night-3);
  color: #fff;
}

/* 다음에 눌러야 할 키 */
.kb__key.is-next {
  transform: translateY(calc(var(--key) * -.08)) scale(1.06);
  box-shadow: 0 0 0 3px var(--accent), 0 8px 18px rgb(0 0 0 / .4);
  z-index: 2;
}
/* 소유는 색 + 움직임까지 (PLAN.md 2절 손가락 안내) */
.play[data-tier='sprout'] .kb__key.is-next { animation: kb-pulse .9s ease-in-out infinite; }
@keyframes kb-pulse {
  50% { transform: translateY(calc(var(--key) * -.16)) scale(1.12); }
}

.kb__key.is-down { transform: translateY(2px) scale(.97); filter: brightness(.9); }
.kb__key.is-wrong { animation: kb-wrong .26s ease; }
@keyframes kb-wrong {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* 힌트 끄기 — 자리를 외우게 하는 단계 */
.kb--nohint .kb__key.is-next { box-shadow: inset 0 calc(var(--key) * -.07) 0 rgb(0 0 0 / .22); transform: none; animation: none; }
/* 힌트 줄이기 — 갑자기 없애면 아이가 멈춘다. 한 단계 흐리게 거쳐 간다 (PLAN.md 2절 "진행 시 감소") */
.kb--dimhint .kb__key.is-next {
  box-shadow: 0 0 0 2px rgb(255 179 0 / .35);
  transform: none;
  animation: none;
}

/* 눈 감고 도전 — 키보드를 통째로 감춘다 */
.kb--hidden { opacity: 0; pointer-events: none; }

/* ── IME 가드 오버레이 (PLAN.md 3.2) ───────────────────────────────── */
.ime {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgb(12 14 34 / .93);
  backdrop-filter: blur(3px);
}
.ime__panel {
  background: var(--window);
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(18px, 3vh, 34px) clamp(22px, 4vw, 48px);
  text-align: center;
  max-width: 640px;
}
.ime__title { font-size: clamp(22px, 3.4vh, 34px); margin: 0 0 .6em; }
.ime__hint { color: var(--ink-soft); font-size: 15px; margin: .8em 0 0; }
.ime__count { color: var(--right); font-size: 18px; margin: .5em 0 0; }
.ime__kb { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ime__row { display: flex; gap: 6px; align-items: center; }
.ime__k {
  min-width: 40px; height: 40px;
  border-radius: 8px;
  background: #E4E1D6;
  display: grid; place-items: center;
  font-size: 14px; color: var(--ink-soft);
}
.ime__k--space { width: 150px; }
.ime__k--ctrl, .ime__k--alt { min-width: 52px; }
/* 한/영 키만 크게 키우고 점멸시킨다. 6세는 텍스트로도 정지 그림으로도 키를 못 찾는다 */
.ime__k--hangul {
  min-width: 92px; height: 52px;
  font-size: 19px; font-weight: 900;
  color: #fff;
  background: var(--left);
  animation: ime-blink .8s ease-in-out infinite;
}
@keyframes ime-blink {
  50% { background: var(--accent); color: var(--ink); transform: scale(1.12); }
}
.ime__arrow {
  color: var(--left);
  font-size: 26px;
  animation: ime-bounce .8s ease-in-out infinite;
}
@keyframes ime-bounce { 50% { transform: translateY(5px); } }

body.is-ime-paused .play { filter: grayscale(.7) blur(1px); }