/* 게임 학습 화면 — 파스텔 라이트 · 패럴랙스 디오라마 · 애니풍 캐릭터
 *
 * ## 왜 다크를 버렸나
 *
 * ver1.7 §2.1 이 요구한 것은 「부드러운 파스텔톤 컬러 테라피와 서정적 애니메이션
 * 루프를 통해 알파파(8~12Hz) 우세를 유도」다. 종전 화면은 #0b1020 짙은 남색이었다.
 * 어두운 화면은 «집중»에는 맞지만 «진정»에는 맞지 않는다 — 편도체를 달래는 것이
 * 이 층의 목적인데, 대비가 센 다크는 각성 쪽으로 민다.
 *
 * ## 파스텔이 «흐릿함»이 아니다
 *
 * 배경만 부드럽게 하고 **글자는 충분히 진하게** 둔다. 파스텔 배경에 파스텔 글자를
 * 얹으면 그건 테라피가 아니라 가독성 사고다. 본문 대비는 4.5:1 위로 유지한다.
 *
 * ## 세 겹 규칙
 *
 *   하늘(가장 느림) · 언덕(중간) · 앞풀(가장 빠름)
 *   ver1.3 §2 「전경·중경·배경이 각각 다른 속도로 반응」을 CSS 로 옮긴 것이다.
 */

/* ══ 화면 공통 ════════════════════════════════════════════ */

.screen {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 0;
  overflow-y: auto;
}

.title {
  margin: 8px 2px 14px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.sub { margin: 0 2px 14px; color: var(--dim); font-size: 14px; }

.card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: transform 140ms ease;
}
.card:active { transform: scale(.985); }
.card .t { font-weight: 700; }
.card .s { display: block; margin-top: 5px; color: var(--dim); font-size: 13px; }

/* 감정 체크인(.checkin · .moods · .mood)의 스타일은 `tokens.css` 로 옮겼다 — 26.09.01.
   /talk 만 game.css 를 물고 /make·/review 는 play.css 를 무는데, 체크인은 셋 다 쓴다.
   판 토큰 때와 **똑같은 함정**이라 같은 방법으로 푼다 (26.09.01 두 번째). */

/* ══ 인정하기 — 코칭 3단계 ════════════════════════════════
   이 화면은 «잠깐 머문다». 버튼 하나뿐이고 그 버튼도 재촉하지 않는다.       */

.accept { justify-content: center; text-align: center; gap: 6px; }
.accept-msg {
  margin: 0 auto;
  max-width: 320px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  animation: rise 520ms cubic-bezier(.2, .7, .3, 1) both;
}
.accept-step {
  margin: 12px auto 20px;
  max-width: 300px;
  color: var(--dim);
  font-size: 15px;
  animation: rise 520ms cubic-bezier(.2, .7, .3, 1) 260ms both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ══ 대사창 — 애니/ADV 방식 ══════════════════════════════
   말풍선을 컷 «안»에 띄우면 그림을 가린다. 애니 자막처럼 컷 «아래»에 고정된
   판을 두고, 이름표를 왼쪽 위로 물려 올린다. 이름표가 판에 걸쳐 있어야
   «누가 말하는지»가 글을 읽기 전에 보인다. */

.bubble {
  position: relative;
  margin: 14px 2px 0;
  padding: 16px 18px 15px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow);
  animation: rise 300ms ease both;
  min-height: 84px;
}
.bubble .who {
  position: absolute;
  top: -13px;
  left: 16px;
  padding: 3px 13px;
  border-radius: 999px;
  /* 별이 이름표가 «두른 머리끈» 색이다. 상점에서 고른 것이 여기서 보인다 */
  background: var(--ribbon);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(200, 120, 145, .35);
}
.bubble.right .who { left: auto; right: 16px; background: var(--accent-2); box-shadow: 0 3px 8px rgba(120, 145, 210, .35); }
.bubble .line { margin: 4px 0 0; font-size: 17px; line-height: 1.65; font-weight: 500; }
/* 한 글자씩 — 애니 대사가 «읽히는» 속도를 만든다. 다 뜬 뒤엔 커서가 사라진다 */
.bubble .line::after {
  content: '▾';
  margin-left: 6px;
  color: var(--dim);
  animation: blink 1.1s steps(1) infinite;
}
.bubble.typing .line::after { content: ''; }
@keyframes blink { 0%, 55% { opacity: .9; } 56%, 100% { opacity: 0; } }

/* ══ 퍼즐 (종전 «문항») ═══════════════════════════════════ */

.quiz {
  margin-top: 10px;
  padding: 15px 15px 16px;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.quiz-tag {
  display: inline-block;
  padding: 3px 11px;
  margin-bottom: 9px;
  border-radius: 999px;
  background: #fff2f5;
  color: #d4738b;
  font-size: 12px;
  font-weight: 700;
}
.q { margin: 0 0 12px; font-size: 17px; font-weight: 700; line-height: 1.55; }

.opts { display: grid; gap: 9px; }
.opt {
  padding: 14px 14px;
  min-height: 52px;
  border: 1.5px solid var(--paper-edge);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, border-color 160ms ease, background 160ms ease;
}
.opt:active { transform: scale(.98); }
/* 열림/못열림. **빨강을 안 쓴다** — 빨강은 «위험»의 색이라 편도체를 깨운다 */
.opt.hit { background: #e8f8f0; border-color: var(--open); }
.opt.miss { background: #fdf1e6; border-color: var(--found); }

.hint {
  margin: 11px 0 0;
  padding: 11px 13px;
  border-radius: 13px;
  background: #fff8e8;
  border: 1px dashed #f0d49a;
  font-size: 15px;
  line-height: 1.55;
}
/* 실마리와 앵커를 «나란히» 둔다. 앵커가 작거나 구석에 있으면
   「마음이 힘든 건 곁가지」라고 화면이 말하는 셈이다 */
.acts { display: flex; gap: 8px; margin-top: 11px; }
.acts .ghost { flex: 1; }
.anchorBtn { border-color: #f3dcc4; background: #fffaf0; color: #a8763f; }

/* 앵커 문구는 «머문다». 3초 뒤에 사라진다 — 지우려면 다시 누르면 된다 */
.anchor-line {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff8ea;
  border: 1px solid #f3dcc4;
  color: #8a6534;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  animation: rise 420ms ease both;
}
.hintBtn { margin-top: 0; }
.hintBtn[disabled] { opacity: .45; }

/* 정서 문구 — 설명보다 «앞이고 위». 먼저 닿는 것이 안심이어야 한다 */
.care {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f2f7ff;
  border: 1px solid #d9e6fb;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
}
.care.show { animation: rise 340ms ease both; }

.why { margin: 9px 2px 0; min-height: 22px; color: var(--dim); font-size: 14px; line-height: 1.55; }

/* 전략 고르기 — 코칭 4단계. 셋을 같은 무게로 */
.strats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.strat {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 11px 13px;
  border: 1.5px solid var(--paper-edge);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.strat:active { transform: scale(.97); }

.explain { margin-top: 12px; }
.explain-q { margin: 0 0 9px; font-size: 15px; font-weight: 700; }
.explain-opts { display: grid; gap: 8px; }
.explain-opts .strat { flex: none; text-align: left; }

/* ══ 아래 바 ══════════════════════════════════════════════ */

.bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 253, 249, .92);
  border-top: 1px solid var(--paper-edge);
  backdrop-filter: blur(8px);
}
.stars {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: #c8912f;
  font-variant-numeric: tabular-nums;
}
.stars.pop { animation: pop 1.2s ease; }
@keyframes pop {
  0% { transform: scale(1); }
  25% { transform: scale(1.4) rotate(-6deg); }
  100% { transform: scale(1); }
}
.pos { font-size: 12px; color: var(--dim); }

.dots { display: flex; gap: 5px; justify-content: center; padding: 9px 0 3px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #d8e2ec; }
.dot.on { background: var(--accent); transform: scale(1.35); }

.fail {
  margin: 14px 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff3f3;
  color: #b4566a;
  font-size: 14px;
}


/* ══ 마무리 — 척도화 + 미래 페이싱 (ver1.7 §3.3) ══════════
   **숫자가 없다.** 「7점」이 뜨는 순간 좋은 감정과 나쁜 감정이 생기고,
   그러면 마지막 칸도 거짓말이 된다. 들어올 때와 지금을 나란히 놓기만 한다. */

.done { justify-content: center; text-align: center; }
.done .title { font-size: 26px; margin-bottom: 4px; }
.done-stat { margin: 0 0 18px; color: var(--dim); font-size: 15px; }
.done-ask { margin: 0 0 10px; font-size: 17px; font-weight: 700; }

.done-arc {
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow);
  animation: rise 460ms cubic-bezier(.2, .7, .3, 1) both;
}
.done-move { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; }
.done-pacing { margin: 8px 0 0; color: var(--dim); font-size: 15px; line-height: 1.5; }

/* 컨페티 — 자산 없이 CSS 로. 색은 파스텔이고 «위에서 아래로» 천천히 내린다.
   튀어 오르는 폭죽은 각성 쪽이라 이 화면과 안 맞는다 */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.confetti i {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: fall 2600ms cubic-bezier(.3, .1, .5, 1) forwards;
}
@keyframes fall {
  0% { transform: translateY(-20px) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(88vh) rotate(420deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .done-arc { animation-duration: 1ms; }
}

/* ══ 필드 화면 ════════════════════════════════════════════ */
/* **필드가 화면을 채운다.** 카드로 두면 그 뒤에 body 의 하늘이 또 보여서
   배경이 둘로 읽힌다 — 26.09.01 지적 「배경이 이중으로 겹친다」 */
.fieldwrap { padding: 0; }
.fieldbox { flex: 1; min-height: 60dvh; }
.field-hint {
  margin: 10px 2px 12px;
  text-align: center;
  color: var(--dim);
  font-size: 14px;
}

/* ══ 풀이 구간 정지 ═══════════════════════════════════════
   문항이 떠 있는 동안 무대의 움직임을 멈춘다. 유혹적 세부 연구가 말하는 자리다 —
   학습과 무관한 흥미 요소는 외재적 부하를 늘리고, 그 방해는 **부하가 높은
   구간에서만** 일어난다. 이 앱에서 부하가 가장 높은 순간이 문항이다.

   「덜 화려하게」가 아니라 영화가 클로즈업에서 배경을 흐리는 것과 같은 일이다.
   푸는 동안 살아 있는 움직임은 **아이 손가락과 그 손가락이 옮기는 수학 대상**뿐이다. */
.solving .viewport,
.solving .viewport * { animation-play-state: paused; }
.solving .viewport { filter: saturate(.82); }
.solving .art { transform: none; }

/* 만지는 판(.board · .slot · .tok)의 스타일은 `tokens.css` 로 옮겼다 — 26.09.01.
   /talk 만 game.css 를 물고 /make 는 play.css 를 무는데, 판은 둘 다 쓴다.
   여기 두었더니 만들기 화면에서 토큰이 전부 검게 나왔다. 두 곳에 적으면 갈라지고,
   한 곳에만 적으면 다른 화면이 못 본다 — 그래서 공용 파일로 올린다. */

/* 날아가는 동안은 자석 판정에서 뺀다. 손을 뗀 뒤의 그림이지 잡을 것이 아니다 */
.tok.flying { pointer-events: none; }