/* 몽이 잉글리시 — 360~430px 세로 화면 전용 (§2) */

:root {
  --bg: #FFF8F0;
  --card: #FFFFFF;
  --ink: #4A3B32;
  --ink-soft: #8A7B70;
  --peach: #FFC7A8;
  --sky: #A8D8FF;
  --melon: #C4EBA9;
  --accent: #FF9E7D;
  --radius: 20px;
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jua', sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#app {
  height: 100%;
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- 화면 공통 ---------- */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  gap: 14px;
  animation: fadein 0.35s ease;
}
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.title { font-size: 26px; text-align: center; margin: 0; }
.subtitle { font-size: 15px; color: var(--ink-soft); text-align: center; margin: 0; }

/* 큰 버튼 (아이 동선 — 최대 2개, §1) */
.big-btn {
  width: 100%;
  max-width: 340px;
  padding: 20px;
  font-size: 22px;
  font-family: inherit;
  color: var(--ink);
  background: var(--peach);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.1s;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
.big-btn.secondary { background: var(--sky); }

/* 카드 선택 (온보딩) */
.card-row { display: flex; gap: 10px; width: 100%; max-width: 380px; justify-content: center; }
.pick-card {
  flex: 1;
  background: var(--card);
  border: 3px solid transparent;
  border-radius: var(--radius);
  padding: 14px 6px;
  text-align: center;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06);
}
.pick-card:active { transform: scale(0.96); }
.pick-card .pet { width: 84px; height: 84px; margin: 0 auto 6px; }
.pick-card small { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- 펫 ---------- */
.pet { width: 200px; height: 200px; position: relative; }
.pet svg { width: 100%; height: 100%; display: block; }
.pet-lg { width: 220px; height: 220px; }
.pet-sm { width: 120px; height: 120px; }

/* pet-design-v2.html 원본 애니메이션 그대로 이식 (§6) */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes munch { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.92); } }
.anim-idle .pet-body { animation: bob 2.2s ease-in-out infinite; transform-origin: 100px 150px; }
.anim-egg .pet-body { animation: wob 1.6s ease-in-out infinite; transform-origin: 100px 165px; }
.anim-eat .pet-body { animation: munch 0.5s ease-in-out infinite; transform-origin: 100px 165px; }
@media (prefers-reduced-motion: reduce) { .pet-body { animation: none !important; } }

/* 말풍선 */
.bubble {
  background: var(--card);
  border-radius: 16px;
  padding: 12px 20px;
  font-size: 18px;
  position: relative;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06);
}
.bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--card);
  border-bottom: 0;
}

/* ---------- 홈 상단/하단 아이콘 ---------- */
.corner-btn {
  position: absolute;
  top: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
}
.corner-btn.left { left: 14px; }
.corner-btn.right { right: 14px; }
.corner-btn svg { width: 100%; height: 100%; }

.dots {
  position: absolute;
  bottom: 12px;
  left: 16px;
  display: flex;
  gap: 6px;
}
.dots span { width: 10px; height: 10px; border-radius: 50%; background: #E4D9CF; }
.dots span.on { background: var(--accent); }

/* ---------- 학습 화면 ---------- */
.progress-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  justify-content: center;
  font-size: 17px;
  filter: grayscale(1) opacity(0.35);
}
.progress-row span { filter: grayscale(1) opacity(0.35); }
.progress-row span.fill { filter: grayscale(0) opacity(1); }
.progress-row span svg { width: 18px; height: 18px; display: block; }

.sentence-en { font-size: 30px; text-align: center; margin: 0; line-height: 1.3; }
.sentence-ko { font-size: 15px; color: var(--ink-soft); text-align: center; margin: 0; }

.speaker-btn {
  width: 64px;
  height: 64px;
  font-size: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--sky);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
}
.speaker-btn:active { transform: translateY(2px); }
/* P2-1: 재탭 감속 피드백 펄스 1회 */
.speaker-btn.pulse-once { animation: spkpulse 0.35s ease; }
@keyframes spkpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* P2-2: 집중 단어 하이라이트 — 노랑 형광 힌트 프레임 (경고색 금지) */
.focus-word {
  background: #FFF3B0;
  border-radius: 8px;
  padding: 0 6px;
  font-size: 1.15em;
}
.focus-ment {
  font-size: 14px;
  color: var(--ink-soft);
  background: #FFFBEA;
  border-radius: 12px;
  padding: 6px 14px;
  margin: 0;
}

.mic-btn {
  width: 108px;
  height: 108px;
  font-size: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1);
}
.mic-btn:active { transform: translateY(3px); }
.mic-btn.listening { animation: micpulse 0.8s ease-in-out infinite alternate; }
@keyframes micpulse {
  from { transform: scale(1); box-shadow: 0 5px 0 rgba(0,0,0,0.1), 0 0 0 0 rgba(255,158,125,0.5); }
  to { transform: scale(1.08); box-shadow: 0 5px 0 rgba(0,0,0,0.1), 0 0 0 16px rgba(255,158,125,0); }
}

.hint-box {
  background: var(--card);
  border-radius: 14px;
  padding: 12px 16px;
  text-align: center;
  font-size: 17px;
  max-width: 340px;
}
.hint-box .ko { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- D. 냠냠 오버레이 ---------- */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 248, 240, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 20;
  animation: fadein 0.25s ease;
}
.overlay .msg { font-size: 24px; }
.apple-fly { font-size: 44px; animation: applefly 0.9s ease forwards; }
.apple-fly svg { width: 46px; height: 46px; display: block; }
@keyframes applefly {
  0% { transform: translateY(40px) scale(0.6); opacity: 0; }
  50% { transform: translateY(-6px) scale(1.15); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 격려 이펙트 차등 (§7): 아빠=과장 바운스, 엄마=하트, 선생님=도장 */
.fx-bounce .pet { animation: bigbounce 0.5s ease 2; }
@keyframes bigbounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-24px) scale(1.12); }
}
.heart-particle {
  position: absolute;
  font-size: 22px;
  animation: heartup 1.2s ease forwards;
  pointer-events: none;
}
@keyframes heartup {
  from { transform: translateY(0) scale(0.7); opacity: 1; }
  to { transform: translateY(-90px) scale(1.3); opacity: 0; }
}
.stamp {
  position: absolute;
  font-size: 64px;
  animation: stampin 0.4s cubic-bezier(0.2, 2.2, 0.4, 1) forwards;
}
@keyframes stampin {
  from { transform: scale(2.4) rotate(-18deg); opacity: 0; }
  to { transform: scale(1) rotate(-12deg); opacity: 1; }
}

/* ---------- E. 성장 게이지 (숫자 미노출) ---------- */
.gauge {
  width: 220px;
  height: 16px;
  background: #F0E4D4;
  border-radius: 10px;
  position: relative;
}
.gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--peach), var(--accent));
  border-radius: 10px;
  transition: width 1.4s ease;
}
.gauge-heart {
  position: absolute;
  right: -8px;
  top: -6px;
  font-size: 22px;
}
.gauge-fruit {
  position: absolute;
  left: -10px;
  top: -7px;
  z-index: 1;
}
.gauge-fruit svg { width: 28px; height: 28px; display: block; }

/* ---------- P1-C. 비밀 버릇 (홈 화면 한정, 3색 동일 스펙) ---------- */
/* peach: 하트 뿅 — 살짝 기울임 */
.habit-love .pet-body { animation: habitlove 1.7s ease-in-out; }
@keyframes habitlove {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-7deg) translateY(-4px); }
  60% { transform: rotate(-7deg) translateY(-4px); }
}
/* sky: 꾸벅 졸기 — 천천히 기울다 번쩍 */
.habit-doze .pet-body { animation: habitdoze 1.8s ease-in-out; }
@keyframes habitdoze {
  0% { transform: rotate(0); }
  55% { transform: rotate(11deg) translateY(5px); }
  70% { transform: rotate(11deg) translateY(5px); }
  80% { transform: rotate(-4deg) translateY(-6px); }
  100% { transform: rotate(0); }
}
/* melon: 재채기 — 움츠렸다 통통 튕김 */
.habit-sneeze .pet-body { animation: habitsneeze 1.6s ease-in-out; }
@keyframes habitsneeze {
  0%, 100% { transform: scale(1) translateY(0); }
  35% { transform: scale(0.94, 0.9) translateY(4px); }
  50% { transform: scale(0.92, 0.88) translateY(5px); }
  62% { transform: scale(1.08, 1.05) translateY(-12px); }
  78% { transform: scale(0.98) translateY(2px); }
}
/* 탭 반응 3종 */
.tap-giggle .pet-body { animation: tapgiggle 0.8s ease-in-out; }
@keyframes tapgiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-4deg); }
}
.tap-startle .pet-body { animation: tapstartle 0.8s ease; }
@keyframes tapstartle {
  0% { transform: scale(1); }
  25% { transform: scale(1.1) translateY(-6px); }
  55% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.tap-spin .pet-body { animation: tapspin 0.8s ease-in-out; transform-origin: 100px 120px; }
@keyframes tapspin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
/* 버릇 부가 요소 (색별 1개씩 동일) */
.habit-particle {
  position: absolute;
  top: 4px;
  left: 50%;
  font-size: 24px;
  animation: heartup 1.5s ease forwards;
  pointer-events: none;
}
.habit-bubble {
  position: absolute;
  top: 2px;
  right: -14px;
  background: var(--card);
  border-radius: 12px;
  padding: 5px 11px;
  font-size: 15px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
  animation: fadein 0.25s ease;
  pointer-events: none;
}

/* 진화 반짝이 연출 */
.sparkle { animation: sparklepop 0.8s ease; }
@keyframes sparklepop {
  0% { transform: scale(0.7); filter: brightness(2); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); filter: none; }
}

.hint-box.story { background: #FFF3E2; font-size: 16px; }

/* ---------- E2. 포켓몬 뽑기 (§13-3) ---------- */
.gacha-card {
  width: 230px;
  height: 300px;
  perspective: 900px;
  position: relative;
  cursor: pointer;
}
.gacha-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.65s cubic-bezier(0.3, 1.4, 0.5, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.gacha-back {
  background: linear-gradient(135deg, var(--accent), var(--peach));
  color: #fff;
  font-size: 80px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
}
.gacha-front {
  background: var(--card);
  transform: rotateY(180deg);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08);
}
.gacha-card.flipped .gacha-back { transform: rotateY(180deg); }
.gacha-card.flipped .gacha-front { transform: rotateY(360deg); }
.gacha-front img { width: 170px; height: 170px; object-fit: contain; }
.gacha-nameko { font-size: 27px; }
.gacha-nameen { font-size: 15px; color: var(--ink-soft); }

/* 등급별 이펙트 차등: common 기본 / uncommon 별 / rare 광선 / legendary 무지개+진동 */
.tier-uncommon .gacha-front { box-shadow: 0 0 0 3px #FFD34D, 0 6px 0 rgba(0, 0, 0, 0.08); }
.tier-uncommon .gacha-front::before { content: '✨'; position: absolute; top: 10px; right: 12px; font-size: 20px; }
.tier-uncommon .gacha-front::after { content: '⭐'; position: absolute; top: 26px; left: 12px; font-size: 15px; }
.tier-rare .gacha-front {
  background: radial-gradient(circle at 50% 32%, #FFF6CF 0%, #fff 68%);
  box-shadow: 0 0 26px 7px rgba(255, 211, 77, 0.85), 0 6px 0 rgba(0, 0, 0, 0.08);
}
.tier-legendary .gacha-front {
  background: linear-gradient(135deg, #FFE9EC, #E9F1FF, #EAFFE9, #FFF6DC);
  box-shadow: 0 0 32px 9px rgba(255, 170, 255, 0.8), 0 6px 0 rgba(0, 0, 0, 0.08);
  animation: rainbowpulse 1.1s ease-in-out infinite;
}
@keyframes rainbowpulse {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(40deg) brightness(1.06); }
}
.screen.shake { animation: shake 0.55s ease; }
@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.dex-got { width: 150px; height: 150px; object-fit: contain; }

/* ---------- F. 도감 화면 (§13-4) ---------- */
.dex-screen {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 20px;
  animation: fadein 0.35s ease;
}
.dex-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  background: var(--bg);
}
.dex-back {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}
.dex-count { font-size: 20px; }
.dex-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dex-cell {
  background: var(--card);
  border: 0;
  border-radius: 12px;
  padding: 6px 2px 5px;
  text-align: center;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}
.dex-cell.owned { cursor: pointer; }
.dex-cell.owned:active { transform: scale(0.94); }
.dex-cell img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.dex-cell .sil { filter: brightness(0); opacity: 0.72; }
.dex-cell span { display: block; margin-top: 2px; }
.dex-zoom { cursor: pointer; }
.dex-zoom img { width: 230px; height: 230px; object-fit: contain; }

/* ---------- 안내(마이크 권한/오프라인) ---------- */
.notice { text-align: center; font-size: 17px; line-height: 1.5; max-width: 320px; }