/*
 * 7세 대상 · 태블릿 가로 우선.
 *
 * 지켜야 할 수치 (PLAN.md 1-7):
 *  - 탭 타겟 최소 75px (NN/g: 어린이 2cm, 성인 1cm)
 *  - 문제 숫자 60~120px, 본문 18pt 이상
 *  - 탭만 사용 — 드래그/핀치줌 없음
 */

:root {
  --blue: #4a7dff;
  --blue-dark: #2f5ede;
  --green: #35c47a;
  --amber: #ffab3d;
  --ink: #24304a;
  --ink-soft: #6b7794;
  --bg: #f4f7ff;
  --card: #ffffff;
  --line: #dde5f7;

  /* 힌트 구슬 색 */
  --dot-base: #4a7dff;
  --dot-fill: #35c47a;
  --dot-extra: var(--amber);

  --tap-min: 76px;
  --radius: 20px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic',
    'Noto Sans KR', sans-serif;
  font-size: 20px;
  /* 아이가 실수로 화면을 끌어 스크롤/확대하지 않도록 */
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.screen[hidden] {
  display: none;
}

/* --- 티어 고르기 --- */

/*
 * 게임이 6개라 태블릿 높이를 넘는다.
 * justify-content:center 로 두면 넘칠 때 위아래가 잘려서 아예 닿을 수 없다
 * (실제로 도감 버튼이 화면 밖으로 나가 눌리지 않았다).
 * flex-start + 스크롤이라야 항상 닿는다.
 */
.screen--home {
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 20px 24px 28px;
  overflow-y: auto;
}

.home-title {
  margin: 0;
  font-size: clamp(36px, 6vw, 64px);
  letter-spacing: -0.02em;
}

.tier-list {
  display: grid;
  gap: 16px;
  width: min(760px, 100%);
}

.tier-btn {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--tap-min);
  /* 게임 6개가 한 화면에 들어가도록 여백을 조였다. min-height는 그대로라 탭 타겟은 유지된다 */
  padding: 12px 24px;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tier-btn:active {
  transform: scale(0.98);
  border-color: var(--blue);
}

.tier-btn-index {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
}

.tier-btn-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tier-btn-label {
  font-size: 24px;
  font-weight: 700;
}

.tier-btn-example {
  color: var(--ink-soft);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.tier-btn-index--mastered {
  background: var(--amber);
}

/* 추천 티어: 아이가 어디부터 할지 고민하지 않게 */
.tier-btn--recommended {
  border-color: var(--blue);
  box-shadow: 0 0 0 5px rgb(74 125 255 / 14%);
}

.tier-flag {
  margin-left: auto;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

/* 진행 막대는 아이용, 옆 숫자는 부모용 */
.tier-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.tier-bar {
  width: 140px;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.tier-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--green);
}

.tier-progress-text {
  color: var(--ink-soft);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* --- 프로필 (누가 할까요) --- */

.screen--profiles {
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 24px;
  overflow-y: auto;
}

.profile-list {
  display: grid;
  gap: 14px;
  width: min(640px, 100%);
}

.profile-btn {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--tap-min);
  padding: 16px 22px;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-btn--active {
  border-color: var(--blue);
}

.profile-btn:active {
  transform: scale(0.98);
}

/* 이름 첫 글자 + 고정 색 — 글을 다 못 읽어도 자기를 찾을 수 있게 */
.profile-avatar,
.who-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
}

.profile-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-name {
  font-size: 26px;
  font-weight: 700;
}

.profile-stars {
  display: flex;
  gap: 5px;
}

.mini-star {
  width: 22px;
  height: 22px;
  fill: var(--line);
}

.mini-star--on {
  fill: var(--amber);
}

.profile-delete {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  border-radius: 50%;
  background: #ffe9e9;
  color: #c0392b;
  cursor: pointer;
}

.profile-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: min(640px, 100%);
}

.profile-form[hidden] {
  display: none;
}

.profile-input {
  flex: 1 1 220px;
  min-height: var(--tap-min);
  padding: 12px 22px;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  font-family: inherit;
  font-size: 28px;
}

.profile-input:focus {
  border-color: var(--blue);
  outline: none;
}

.profile-error {
  margin: 0;
  color: #c0392b;
  font-size: 20px;
}

.profile-error[hidden] {
  display: none;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.profile-actions[hidden] {
  display: none;
}

/* --- 홈 상단 '지금 누구' --- */

.home-head {
  display: flex;
  justify-content: center;
}

.who-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--tap-min);
  padding: 10px 24px 10px 10px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.who-btn:active {
  transform: scale(0.97);
}

.who-name {
  font-size: 26px;
  font-weight: 700;
}

/* --- 문제 풀기 --- */

.play-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}

.icon-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.icon-btn:active {
  transform: scale(0.94);
}

/*
 * 아이콘은 이모지가 아니라 인라인 SVG로 그린다.
 * 이모지는 플랫폼마다 모양·색이 다르고, 글리프가 없는 기기에서는
 * 버튼이 아예 안 보인다 — 글자를 못 읽는 아이에게는 치명적이다.
 */
.ico {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico--thick {
  stroke-width: 3.2;
}

/* 수정자는 반드시 .ico 뒤에 와야 한다 — 같은 특이도라 순서가 승자를 정한다 */
.ico--filled {
  fill: currentColor;
  stroke: none;
}

.ico--small {
  width: 26px;
  height: 26px;
}

/* 소리 켜짐/꺼짐은 같은 버튼에서 아이콘만 바꾼다 */
.ico--sound-off,
.icon-btn--muted .ico--sound-on {
  display: none;
}

.icon-btn--muted .ico--sound-off {
  display: block;
}

.icon-btn--muted {
  color: var(--ink-soft);
  opacity: 0.55;
}

/* 진행률: 숫자가 아니라 점으로 — 남은 개수가 한눈에 보이게 */
.progress {
  display: flex;
  flex: 1;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.pip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--line);
}

.pip--done {
  background: var(--green);
}

.pip--current {
  background: var(--blue);
  box-shadow: 0 0 0 5px rgb(74 125 255 / 22%);
}

.play-body {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr auto;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  padding: 0 clamp(16px, 3vw, 48px) clamp(16px, 3vh, 32px);
  min-height: 0;
}

.problem-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.problem {
  font-size: clamp(56px, 11vw, 132px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
}

.problem .op {
  margin: 0 0.12em;
  color: var(--blue);
}

.answer-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 220px;
  min-height: 108px;
  padding: 8px 28px;
  border: 5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.answer-box--filled {
  border-style: solid;
  border-color: var(--blue);
}

.answer-value {
  font-size: clamp(48px, 9vw, 92px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.answer-caret {
  width: 4px;
  height: 56px;
  border-radius: 2px;
  background: var(--blue);
  animation: blink 1.1s steps(2, start) infinite;
}

.answer-box--filled .answer-caret {
  display: none;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* --- 키패드 --- */

.keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--tap-min), 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  width: min(46vw, 420px);
}

.key {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  aspect-ratio: 1;
  border: none;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 4px 0 var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.key:active {
  transform: translateY(4px);
  box-shadow: none;
}

.key--erase {
  background: #fff3e0;
  box-shadow: 0 4px 0 #f0d9b5;
  color: #b4750f;
}

.key--submit {
  background: var(--green);
  box-shadow: 0 4px 0 #24a563;
  color: #fff;
}

.key .ico {
  width: clamp(34px, 4.6vw, 48px);
  height: clamp(34px, 4.6vw, 48px);
}

/* --- 피드백 --- */

.feedback {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(36 48 74 / 55%);
  backdrop-filter: blur(3px);
}

.feedback[hidden] {
  display: none;
}

.feedback-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(680px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  padding: 28px 32px 32px;
  border-radius: 28px;
  background: var(--card);
  text-align: center;
  animation: pop 0.22s ease-out;
}

@keyframes pop {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
}

.feedback-mark,
.done-mark {
  display: grid;
  place-items: center;
  height: 92px;
}

.mark {
  width: 88px;
  height: 88px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark--star {
  fill: var(--amber);
  stroke: none;
}

.mark--bulb {
  color: var(--blue);
}

/* 정답이면 별, 오답이면 전구('이렇게 하는 거야'). 둘 중 하나만 보인다 */
.feedback-mark .mark {
  display: none;
}

.feedback-card--correct .mark--star,
.feedback-card--wrong .mark--bulb {
  display: block;
}

/* 오답은 '틀렸다'가 아니라 '이렇게 하는 거야'로 보여준다 */
.feedback-answer {
  font-size: clamp(40px, 7vw, 68px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.feedback-card--correct .feedback-answer {
  color: var(--green);
}

.feedback-card--wrong .feedback-answer {
  color: var(--blue);
}

.feedback-hint {
  width: 100%;
}

/* --- 힌트 --- */

.hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: var(--bg);
}

.ten-frame {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--card);
}

.dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.dot--base {
  background: var(--dot-base);
}

.dot--fill {
  background: var(--dot-fill);
}

.dot--extra {
  background: var(--dot-extra);
}

.split {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.split-term {
  color: var(--ink);
}

.split-arrow {
  color: var(--ink-soft);
}

.split-part {
  padding: 2px 14px;
  border-radius: 12px;
  background: var(--dot-fill);
  color: #fff;
}

.split-part:last-child {
  background: var(--dot-extra);
}

.split-plus {
  color: var(--ink-soft);
}

.eq-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eq-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.eq-row--total {
  padding-top: 10px;
  border-top: 3px solid var(--line);
}

.eq-label {
  min-width: 42px;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--line);
  color: var(--ink-soft);
  font-size: 22px;
}

.eq-op {
  color: var(--ink-soft);
}

.eq-num--fill {
  color: var(--dot-fill);
}

.eq-num--extra {
  color: #d98613;
}

.eq-num--result {
  color: var(--blue);
}

.make-ten-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--dot-fill);
  color: #fff;
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.badge-ten {
  font-size: 1.15em;
}

/* --- 큰 버튼 / 완료 화면 --- */

.big-btn {
  min-width: 200px;
  min-height: var(--tap-min);
  padding: 16px 40px;
  border: none;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 5px 0 var(--blue-dark);
  color: #fff;
  font-family: inherit;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
}

.big-btn:active {
  transform: translateY(5px);
  box-shadow: none;
}

.big-btn--ghost {
  background: var(--card);
  box-shadow: 0 5px 0 var(--line);
  color: var(--ink);
}

.screen--done {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.done-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: min(620px, 100%);
  padding: 40px 32px;
  border-radius: 28px;
  background: var(--card);
  text-align: center;
}

.done-score {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.done-detail {
  color: var(--ink-soft);
  font-size: 24px;
}

/* 승급은 축하하고, 물러남은 '못했다'가 아니라 '연습해 보자'로 말한다 */
.done-mastery {
  padding: 14px 26px;
  border-radius: 18px;
  font-size: 25px;
  font-weight: 700;
}

.done-mastery[hidden] {
  display: none;
}

.done-mastery--good {
  background: #e6f8ef;
  color: #1c8f57;
}

.done-mastery--calm {
  background: var(--bg);
  color: var(--ink-soft);
}

.done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* 세로 모드에서는 키패드를 아래로 */
@media (orientation: portrait) {
  .play-body {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
  }

  .keypad {
    width: min(92vw, 380px);
  }
}

/* --- 몬스터 합성 --- */

/*
 * 파츠 PNG는 각자 크롭되어 있어 공통 좌표계가 없다.
 * .monster가 바디 이미지 크기를 그대로 갖고(= 기준 박스),
 * 얼굴 파츠는 그 박스에 대한 %로 배치된다.
 */
/*
 * aspect-ratio는 JS가 바디 크기에서 인라인으로 넣는다.
 *
 * 높이를 100%가 아니라 한참 작게 잡는 이유:
 * 파츠가 바디 박스 밖으로 크게 나간다 — 다리는 아래로 최대 30%,
 * 머리 장식(뿔·안테나)은 위로 최대 30%, 팔은 옆으로 8%씩.
 * 박스를 꽉 채우면 팔다리·뿔이 칸 밖으로 잘린다.
 */
.monster {
  --monster-fit: 62%;

  position: relative;
  height: var(--monster-fit);
  max-width: 100%;
}

.monster-body {
  display: block;
  width: 100%;
  height: 100%;
}

/* 얼굴 파츠: 중심을 (x,y)에 놓는다 */
.monster-part {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/*
 * 팔·다리는 왼쪽 위, 머리 장식은 왼쪽 아래를 기준점으로 쓴다.
 * translate를 쓰지 않아 좌우 반전(scaleX)이 위치를 흔들지 않는다.
 * (반전은 JS가 인라인 transform으로 걸어 이 규칙을 덮는다)
 */
.monster-part--corner,
.monster-part--base {
  transform: none;
}

/*
 * 아직 못 받은 칸: 윤곽만 — '뭔가 있다'는 건 보이되 정체는 아낀다.
 * 컨테이너에 필터를 걸어 팔·다리까지 함께 실루엣이 되게 한다.
 */
.monster--silhouette {
  filter: brightness(0);
  opacity: 0.13;
}

/* --- 홈의 도감 열기 버튼 --- */

.album-open {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(760px, 100%);
  min-height: var(--tap-min);
  padding: 14px 26px;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.album-open:active {
  transform: scale(0.98);
  border-color: var(--amber);
}

/* 최근에 받은 스티커 몇 개를 미리 보여준다 */
.album-open-stickers {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  height: 70px;
}

.album-open-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.album-open-title {
  font-size: 24px;
  font-weight: 700;
}

.album-open-count {
  color: var(--ink-soft);
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

/* --- 도감 화면 --- */

.screen--album {
  padding: 12px 16px 16px;
}

.album-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.album-head {
  display: flex;
  flex-direction: column;
}

.album-count {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.album-hint {
  color: var(--ink-soft);
  font-size: 20px;
}

.album-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  align-content: start;
  margin-top: 14px;
  overflow-y: auto;
  padding: 4px;
}

/* 장식은 위로, 다리는 아래로 뻗는다 — 위아래로 퍼지므로 가운데 정렬이 맞다 */
.sticker {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1;
  padding: 8px;
  border: none;
  border-radius: 18px;
  background: var(--card);
  cursor: pointer;
}

.sticker:active {
  transform: scale(0.94);
}

.sticker--empty {
  background: #eaf0fd;
  cursor: default;
}

.sticker--empty:active {
  transform: none;
}

/* 빈 칸 번호 — 아이가 "몇 번이 없다"를 말할 수 있게 */
.sticker-number {
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: var(--ink-soft);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.album-credit {
  flex: 0 0 auto;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  text-align: center;
}

/* --- 스티커 크게 보기 --- */

.sticker-zoom {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background: rgb(36 48 74 / 62%);
  backdrop-filter: blur(3px);
  z-index: 10;
}

.sticker-zoom[hidden] {
  display: none;
}

.sticker-zoom-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(62vh, 460px);
  animation: pop 0.24s ease-out;
}

.sticker-zoom-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

/* --- 완료 화면의 보상 --- */

.done-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px;
  border-radius: 20px;
  background: #fff8ec;
}

.done-reward[hidden] {
  display: none;
}

.done-reward-title {
  margin: 0;
  color: #b4750f;
  font-size: 25px;
  font-weight: 700;
}

.new-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.new-sticker {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  animation: pop-in 0.42s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes pop-in {
  from {
    transform: scale(0.2) rotate(-14deg);
    opacity: 0;
  }
}

.done-sticker-progress {
  color: var(--ink-soft);
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}