/* 플레이 화면 — 다섯 영역이 1366×768 에서 스크롤 없이 모두 보인다 (PLAN.md 8.6)
   연령별 영역 차등은 맨 아래 data-tier 규칙이 맡는다 (8.5). */

.play {
  height: 100%;
  display: grid;
  grid-template-rows: var(--h-hud) minmax(0, 1fr) var(--h-input) var(--h-keyboard) var(--h-shelf);
  gap: 0;
}

/* 다섯 영역의 줄 번호를 못 박는다.
   연령별로 영역을 display:none 으로 감추면 그리드 자동 배치가 한 칸씩 밀리기 때문이다. */
.play > .hud { grid-row: 1; }
.play > .window { grid-row: 2; }
.play > .inputline { grid-row: 3; }
.play > .kbwrap { grid-row: 4; }
.play > .shelfwrap { grid-row: 5; }
.play.is-shake { animation: play-shake .22s ease; }
@keyframes play-shake {
  0%, 100% { transform: none; }
  30% { transform: translateX(-7px); }
  70% { transform: translateX(7px); }
}

/* ── 1. HUD ─────────────────────────────────────────────────────────── */
.hud {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(10px, 2vw, 26px);
  font-size: clamp(12px, 1.7vh, 16px);
}
.hud__back { background: var(--night-3); color: var(--window); padding: .4em .9em; font-size: inherit; }
.hud__stage { color: var(--accent); }
.hud__stats { display: flex; gap: 18px; margin-left: auto; }
.hud__item { display: flex; align-items: baseline; gap: 6px; }
.hud__key { color: var(--again); font-size: .85em; }
.hud__value { font-size: 1.5em; color: var(--window); font-variant-numeric: tabular-nums; }
.hud__left { color: var(--again); min-width: 5.5em; text-align: right; }

/* ── 2. 낙하 영역 = 창문 (밝은 패널) ────────────────────────────────── */
.window {
  position: relative;
  margin: 0 clamp(10px, 2.4vw, 34px);
  border-radius: 22px;
  background: var(--window);
  box-shadow: 0 18px 60px rgb(0 0 0 / .5), inset 0 0 0 6px rgb(255 255 255 / .5);
  overflow: hidden;
}
.window::after { /* 창틀 */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 3px rgb(26 26 46 / .12);
  pointer-events: none;
}

.field { position: relative; height: 100%; }

.card {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}

/* 낱말 연습·자리 익히기 — 가운데 큰 글자 하나 */
.field > .card.is-target:not(.card--falling) {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: clamp(46px, 13vh, 120px);
}

/* 산성비 — transform 으로만 움직인다 (top 애니메이션 금지) */
.card--falling {
  position: absolute;
  top: 0;
  left: calc(6% + var(--lane) * 18%);
  height: 76px;                 /* play.js 의 CARD_HEIGHT_PX 와 같은 값 */
  display: flex;
  align-items: center;
  font-size: clamp(22px, 4.4vh, 40px);
  padding: 0 .4em;
  border-radius: 12px;
  background: rgb(26 26 46 / .05);
  will-change: transform;
}
.card--falling.is-target {
  background: rgb(255 179 0 / .22);
  box-shadow: 0 0 0 3px var(--accent);
}
/* 성공 연출 (PLAN.md 8.7 "치면 성공 연출이 터진다") */
.card.is-cleared {
  animation: card-pop .5s cubic-bezier(.2, .9, .3, 1) forwards;
  pointer-events: none;
  z-index: 3;
}
@keyframes card-pop {
  30% { transform: scale(1.22); }
  to { transform: scale(1.85); opacity: 0; }
}
.card.is-cleared .card__typed { color: var(--accent); }

/* 정타 한 번마다 글자가 살짝 뛴다 — 눌렸다는 걸 몸으로 알려 준다 */
.card.is-hit { animation: card-hit .13s ease; }
@keyframes card-hit {
  50% { transform: scale(1.05); }
}

/* 반짝이 — 이미지 없이 CSS 로만 만든다 (네트워크 요청 0건, R8) */
.burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  pointer-events: none;
  z-index: 4;
}
.burst__bit {
  grid-area: 1 / 1;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--accent);
  animation: burst-fly .52s cubic-bezier(.15, .8, .3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}
.burst__bit:nth-child(3n) { background: var(--left); border-radius: 50%; }
.burst__bit:nth-child(3n+1) { background: var(--right); }
@keyframes burst-fly {
  from { transform: rotate(var(--angle)) translateY(0) scale(.4); opacity: 1; }
  to { transform: rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(1.1) ; opacity: 0; }
}
/* 6세는 더 크게 터뜨린다 */
.play[data-tier='sprout'] .burst__bit { width: 18px; height: 18px; }
.card.is-missed { animation: card-drop .3s ease forwards; }
@keyframes card-drop {
  to { opacity: 0; filter: grayscale(1); }
}

/* 자리 익히기 — 낱자를 그 키와 똑같은 손·손가락 색으로 (PLAN.md 8.2 "분홍 글자는 왼손") */
.card.is-left .card__rest, .card.is-right .card__rest { opacity: 1; }
.card.is-left.is-f1 .card__rest  { color: var(--left-f1); }
.card.is-left.is-f2 .card__rest  { color: var(--left-f2); }
.card.is-left.is-f3 .card__rest  { color: var(--left-f3); }
.card.is-left.is-f4 .card__rest  { color: var(--left-f4); }
.card.is-right.is-f1 .card__rest { color: var(--right-f1); }
.card.is-right.is-f2 .card__rest { color: var(--right-f2); }
.card.is-right.is-f3 .card__rest { color: var(--right-f3); }
.card.is-right.is-f4 .card__rest { color: var(--right-f4); }

/* 다음에 칠 자모를 손 색 칩으로. 키보드 하이라이트와 같은 색이라 눈이 이어진다 */
.handchip {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  min-width: 2.1em;
  padding: .18em .45em;
  border-radius: 10px;
  font-size: clamp(20px, 3.4vh, 34px);
  color: #fff;
  background: var(--again);
  text-align: center;
  pointer-events: none;
}
.handchip.is-left.is-f1  { background: var(--left-f1); }
.handchip.is-left.is-f2  { background: var(--left-f2); color: var(--ink); }
.handchip.is-left.is-f3  { background: var(--left-f3); color: var(--ink); }
.handchip.is-left.is-f4  { background: var(--left-f4); color: var(--ink); }
.handchip.is-right.is-f1 { background: var(--right-f1); }
.handchip.is-right.is-f2 { background: var(--right-f2); }
.handchip.is-right.is-f3 { background: var(--right-f3); color: var(--ink); }
.handchip.is-right.is-f4 { background: var(--right-f4); color: var(--ink); }
.handchip[hidden] { display: none; }

.card__typed { color: var(--right); }
/* 아직 안 친 부분. 너무 흐리면 아이가 읽지 못한다 — 친 부분과는 색으로 구분한다 */
.card__rest { color: var(--ink); opacity: .82; }
.card--falling:not(.is-target) .card__rest { opacity: .45; }
.card.is-error .card__typed { color: var(--wrong); }
/* 저연령은 오답을 빨강으로 두지 않는다. 중립 회색이다 (PLAN.md 8.8) */
.play[data-tier='sprout'] .card.is-error .card__typed,
.play[data-tier='leaf'] .card.is-error .card__typed { color: var(--again); }

/* ── 3. 입력줄 ──────────────────────────────────────────────────────── */
.inputline {
  display: grid;
  place-items: center;
  font-size: clamp(20px, 3.6vh, 36px);
  color: var(--accent);
  letter-spacing: .04em;
}
.inputline__text::after {
  content: '';
  display: inline-block;
  width: .07em;
  height: 1em;
  margin-left: .08em;
  background: var(--accent);
  vertical-align: -.12em;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ── 5. 진열대 ──────────────────────────────────────────────────────── */
.shelfwrap { display: grid; place-items: center; padding: 0 var(--gap) var(--gap); }

/* 진열대는 담기는 자리를 그대로 채운다.
   여기에 고정 폭을 주면 아바타 카드처럼 좁은 자리에서 밖으로 삐져나간다. */
.shelf { width: 100%; min-width: 0; }
.shelfwrap .shelf { width: min(760px, 92vw); }
.shelf__rack {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: var(--night-2);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .3);
}
.shelf__slot {
  position: relative;
  overflow: hidden;
  flex: 1;
  aspect-ratio: 1;
  max-height: 6vh;
  border-radius: 8px;
  background: rgb(255 255 255 / .05);
  display: grid;
  place-items: center;
  font-size: clamp(14px, 3vh, 26px);
}
.shelf__slot.is-filled {
  background: var(--accent);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .15), inset 0 -3px 0 rgb(0 0 0 / .14);
}
/* 오늘 새로 찬 칸 — 하나씩 차례로 톡 하고 들어온다 (PLAN.md 8.9) */
.shelf__slot.is-new {
  animation: shelf-drop .55s cubic-bezier(.2, 1.5, .4, 1) backwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes shelf-drop {
  0% { transform: translateY(-30px) scale(.3) rotate(-12deg); opacity: 0; }
  60% { transform: translateY(0) scale(1.25) rotate(4deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
/* 새로 찬 칸에는 잠깐 빛이 지나간다 — 이 게임에서 유일하게 화려한 자리다 (PLAN.md 8.4) */
.shelf__slot.is-new::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .85) 50%, transparent 65%);
  background-size: 300% 100%;
  animation: shelf-shine .8s ease-out backwards;
  animation-delay: calc(var(--delay, 0ms) + 220ms);
}
@keyframes shelf-shine {
  from { background-position: 120% 0; opacity: 1; }
  to { background-position: -60% 0; opacity: 0; }
}
.shelf__bar { height: 6px; border-radius: 3px; background: var(--night-2); margin-top: 5px; overflow: hidden; }
.shelf__fill { height: 100%; background: var(--accent); transition: width .4s ease; }
.shelf__fill.is-growing { transition: width 1.1s cubic-bezier(.2, .8, .3, 1) .25s; }
.shelf__empty { margin: 7px 0 0; font-size: 12px; color: var(--again); text-align: center; }
.shelf--compact .shelf__slot { max-height: 22px; font-size: 14px; }

/* ── 연령별 영역 차등 (PLAN.md 8.5) ─────────────────────────────────── */

/* 소유(6) — 2영역. HUD·입력줄·진열대를 아예 두지 않는다.
   "정확도 82%"는 6세에게 의미가 없고 압박만 준다. */
.play[data-tier='sprout'] { grid-template-rows: 0 minmax(0, 1fr) 0 38vh 0; }
.play[data-tier='sprout'] .hud,
.play[data-tier='sprout'] .inputline,
.play[data-tier='sprout'] .shelfwrap { display: none; }
.play[data-tier='sprout'] .window { margin: var(--gap) clamp(14px, 4vw, 60px); }
/* 6세는 글자가 커야 읽는다 */
.play[data-tier='sprout'] .field > .card.is-target:not(.card--falling) { font-size: clamp(90px, 26vh, 220px); }
.play[data-tier='sprout'] .card--falling { font-size: clamp(34px, 6vh, 56px); height: 76px; }

/* 시유(7) — 4영역. 타수만 보이고 입력은 글자 위에 겹친다 */
.play[data-tier='leaf'] { grid-template-rows: var(--h-hud) minmax(0, 1fr) 0 var(--h-keyboard) var(--h-shelf); }
.play[data-tier='leaf'] .inputline { display: none; }
.play[data-tier='leaf'] .hud__item--acc,
.play[data-tier='leaf'] .hud__item--combo { display: none; }

/* 선유(10) — 5영역 전부 */
.play[data-tier='tree'] .inputline { display: grid; }

/* 소유·시유는 HUD 뒤로 가기 버튼이 없어도 ESC 로 나갈 수 있다.
   대신 작은 나가기 단추를 창문 모서리에 둔다 */
.play[data-tier='sprout'] .window::before {
  content: 'ESC';
  position: absolute;
  top: 8px; right: 12px;
  font-size: 12px;
  color: var(--ink-soft);
  opacity: .5;
  z-index: 2;
}