/* 재헌(5살) 놀이 화면: 글을 몰라도 누를 수 있게 큰 그림 버튼과 큰 글씨 */

/* 홈 */
.lil-home { gap: 22px; }
.lil-board-btn {
  background: var(--surface); border: 2px solid var(--line); border-radius: 999px; padding: 10px 22px;
  font-family: var(--display); font-size: 22px;
}
.lil-board-btn b { color: var(--kid); font-weight: 400; }
.lil-today { font-family: var(--display); font-size: 22px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; }
.lil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.lil-tile {
  position: relative; min-height: 230px; background: var(--surface); border: 4px solid transparent; border-radius: 34px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 0 var(--line);
}
.lil-tile:active { transform: scale(.97); border-color: var(--kid); }
.lil-tile.done { border-color: var(--kid-soft); }
.lil-icon { font-size: 100px; line-height: 1.1; }
.lil-label { font-family: var(--display); font-size: 34px; }
.lil-check { position: absolute; top: 14px; right: 18px; font-size: 40px; }

/* 스티커 */
.stk-row { display: flex; flex-wrap: wrap; gap: 6px; }
.stk { font-size: 36px; line-height: 1.1; }
.stk-row.big { justify-content: center; gap: 10px; }
.stk-row.big .stk { font-size: 60px; }
.lil-board { gap: 18px; }
.stk-day { background: var(--surface); border-radius: 24px; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.stk-day h2 { font-size: 24px; color: var(--muted); }
.stk-day .stk-row.big { justify-content: flex-start; }
.reward-stk { font-size: 170px; line-height: 1.1; animation: lil-pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes lil-pop { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* 놀이 공통 */
.lil-act { gap: 14px; padding-top: 16px; padding-bottom: 16px; max-width: 1800px; }
.lil-dots { display: flex; gap: 8px; flex: none; }
.lil-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--line); }
.lil-dot.on { background: var(--kid); }
.lil-dot.now { background: var(--surface); box-shadow: inset 0 0 0 4px var(--kid); }
.btn.big { min-height: 78px; font-size: 28px; padding: 0 36px; border-radius: 20px; }
.lil-bottom { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lil-stars {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: clamp(70px, 9vw, 120px); background: rgba(255, 255, 255, .72); border-radius: 24px;
  animation: lil-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; pointer-events: none;
}
.lil-stars .dim { opacity: .2; filter: grayscale(1); }
.lil-canvas-wrap { position: relative; }
.lil-canvas-wrap canvas {
  display: block; width: 100%; height: 100%; background: #fff; border-radius: 24px;
  box-shadow: 0 0 0 3px var(--line); touch-action: none; cursor: crosshair;
}

/* 한글 따라쓰기 */
.lil-trace-body { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; min-height: 0; }
.lil-canvas-wrap.square { height: min(calc(100vh - 150px), 62vw); aspect-ratio: 1; max-width: 100%; }
.lil-side { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.lil-pic { font-size: 120px; line-height: 1.1; }
.lil-word { font-family: var(--display); font-size: 46px; }
.lil-name { font-family: var(--display); font-size: 28px; color: var(--kid); }

/* 선 따라가기 */
.lil-canvas-wrap.wide { width: 100%; max-width: calc((100vh - 230px) * 12 / 7); aspect-ratio: 12 / 7; margin: 0 auto; }

/* 색칠하기 */
.lil-color-body { flex: 1; display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: center; min-height: 0; }
.lil-svg-wrap { position: relative; height: min(calc(100vh - 150px), 70vw); aspect-ratio: 1; max-width: 100%; margin: 0 auto; background: #fff; border-radius: 24px; box-shadow: 0 0 0 3px var(--line); }
.lil-svg { width: 100%; height: 100%; display: block; }
.lil-svg [data-action] { cursor: pointer; }
.lil-palette { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.lil-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lil-swatches .swatch { border-width: 5px; }
.swatch.eraser { background: repeating-linear-gradient(45deg, #fff 0 8px, #E6EBF2 8px 16px); }

/* 숫자 놀이 */
.lil-count-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.cnt-field { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 900px; }
.cnt-obj {
  position: relative; width: 112px; height: 112px; font-size: 70px; line-height: 1; background: var(--surface);
  border: 5px solid transparent; border-radius: 26px; box-shadow: 0 3px 0 var(--line);
}
.cnt-obj.on { border-color: var(--kid); background: var(--kid-soft); }
.cnt-num {
  position: absolute; top: -12px; right: -12px; width: 44px; height: 44px; border-radius: 50%; background: var(--kid); color: #fff;
  font-family: var(--display); font-size: 26px; display: grid; place-items: center;
}
.cnt-answer { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cnt-answer p { font-family: var(--display); font-size: 30px; }
.cnt-answer.wait .cnt-opts { opacity: .45; }
.cnt-opts { display: flex; gap: 20px; }
.cnt-opt {
  width: 128px; height: 128px; border-radius: 30px; background: var(--surface); border: 4px solid var(--line);
  font-family: var(--display); font-size: 70px; box-shadow: 0 4px 0 var(--line);
}
.cnt-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.cnt-opt:disabled { opacity: .5; }
.seq-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.seq-box { width: 132px; height: 132px; border-radius: 28px; background: var(--surface); display: grid; place-items: center; font-family: var(--display); font-size: 76px; }
.seq-box.hole { border: 6px dashed var(--kid); color: var(--kid); background: var(--kid-soft); }
.seq-arrow { color: var(--muted); font-size: 30px; }
.more-row { display: flex; gap: 34px; flex-wrap: wrap; justify-content: center; }
.more-group {
  min-width: 320px; min-height: 300px; max-width: 420px; padding: 24px; background: var(--surface); border: 5px solid var(--line);
  border-radius: 34px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; box-shadow: 0 4px 0 var(--line);
}
.more-group span { font-size: 58px; line-height: 1.1; }
.more-group:active:not(:disabled) { border-color: var(--kid); }

/* 영어 소리 */
.ph-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.ph-card {
  background: var(--surface); border-radius: 44px; padding: 34px 64px; display: flex; align-items: center; gap: 50px; flex-wrap: wrap; justify-content: center;
  box-shadow: 0 5px 0 var(--line);
}
.ph-letter { font-family: var(--en-font, 'Nunito', sans-serif); font-weight: 800; font-size: 170px; line-height: 1; color: var(--kid); }
.ph-letter small { font-size: 110px; color: var(--muted); margin-left: 14px; }
.ph-pic { font-size: 160px; line-height: 1; }
.ph-word { font-family: var(--en-font, 'Nunito', sans-serif); font-weight: 800; font-size: 72px; }
.ph-guide { font-family: var(--display); font-size: 30px; color: var(--muted); }
.ph-body .lil-stars { border-radius: 44px; }
.ph-card.echo { box-shadow: 0 0 0 8px var(--kid-soft), 0 5px 0 var(--line); animation: ph-bounce .9s ease-in-out infinite; }
@keyframes ph-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ABC 노래 (노래방처럼 글자가 반짝인다) */
.abc-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.abc-lyric { font-family: var(--en-font, 'Nunito', sans-serif); font-weight: 800; font-size: 64px; color: var(--kid); min-height: 80px; }
.abc-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; width: min(100%, 1100px); }
.abc-cell {
  aspect-ratio: 1; display: grid; place-items: center; background: var(--surface); border-radius: 20px;
  font-family: var(--en-font, 'Nunito', sans-serif); font-weight: 800; font-size: clamp(32px, 4vw, 58px); color: var(--muted);
  box-shadow: 0 3px 0 var(--line); transition: transform .12s ease, background .12s ease;
}
.abc-cell.sung { color: var(--ink); }
.abc-cell.now { background: var(--kid); color: #fff; transform: scale(1.18); box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
@media (max-width: 860px) { .abc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .abc-lyric { font-size: 44px; } }

@media (max-width: 860px) {
  .lil-trace-body, .lil-color-body { grid-template-columns: 1fr; }
  .lil-canvas-wrap.square, .lil-svg-wrap { height: auto; width: 100%; }
  .lil-icon { font-size: 72px; }
  .lil-tile { min-height: 170px; }
  .ph-letter { font-size: 110px; }
  .ph-pic { font-size: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .reward-stk, .lil-stars { animation: none; }
}