/* ===== ABC Play — 키드-프루프 스타일 ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 더블탭 줌 / 롱프레스 콜아웃 / 텍스트 선택 차단 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  height: 100%;
}

body {
  /* iOS 러버밴드 + 100vh URL바 버그 차단 */
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: linear-gradient(160deg, #fef6e4 0%, #ffe0ec 55%, #d8f3ff 100%);
}

#app {
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ===== 화면 전환 ===== */
.screen {
  display: none;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
  padding: 4vmin;
  position: relative;
}
.screen.active { display: flex; }

.screen-title { font-size: 10vmin; }

/* ===== 타이틀 ===== */
.logo-emoji { font-size: 16vmin; }
.logo-text {
  font-size: 11vmin;
  color: #ff6392;
  text-shadow: 0.6vmin 0.6vmin 0 #ffd6e0;
  letter-spacing: 0.5vmin;
}

.huge-btn {
  width: 34vmin;
  height: 34vmin;
  min-width: 88px;
  min-height: 88px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1.4vmin 0 #ffb3c6, 0 2vmin 4vmin rgba(0,0,0,.12);
  font-size: 15vmin;
  cursor: pointer;
}
.huge-btn:active { transform: translateY(0.8vmin); box-shadow: 0 0.6vmin 0 #ffb3c6; }

/* ===== 공용 카드 ===== */
.choice-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4vmin;
  width: 100%;
}

.big-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vmin;
  min-width: 88px;
  min-height: 88px;
  width: 26vmin;
  height: 26vmin;
  border: none;
  border-radius: 5vmin;
  background: #fff;
  box-shadow: 0 1vmin 0 rgba(0,0,0,.08), 0 1.6vmin 3vmin rgba(0,0,0,.10);
  cursor: pointer;
  transition: transform .1s;
}
.big-card:active { transform: scale(.94); }
.card-emoji { font-size: 13vmin; line-height: 1; }
.card-label { font-size: 4.5vmin; font-weight: 700; color: #555; }

/* ===== 코너 버튼 ===== */
.corner-btn {
  position: absolute;
  top: max(2.5vmin, env(safe-area-inset-top));
  width: 13vmin;
  height: 13vmin;
  min-width: 60px;
  min-height: 60px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0.6vmin 1.6vmin rgba(0,0,0,.12);
  font-size: 6.5vmin;
  cursor: pointer;
  z-index: 5;
}
.corner-left { left: 3vmin; }
.corner-right { right: 3vmin; }
.corner-btn:active { transform: scale(.9); }

/* ===== 플레이 화면 ===== */
.play-head {
  position: relative;
  width: 100%;
  height: 15vmin;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#screen-play { justify-content: flex-start; }

.star-row { display: flex; gap: 1.5vmin; font-size: 6vmin; }
.star-row .star { opacity: .25; transition: opacity .3s, transform .3s; }
.star-row .star.on { opacity: 1; transform: scale(1.25); }

.play-area {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
}

/* 게임 프롬프트 (🔊 + 큰 이모지/글자) */
.prompt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
}
.prompt-main { font-size: 18vmin; line-height: 1; }
.prompt-main.letter { font-weight: 800; color: #4a4e69; }
.speak-btn {
  width: 14vmin;
  height: 14vmin;
  min-width: 60px;
  min-height: 60px;
  border: none;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0.8vmin 0 #e8b64c;
  font-size: 7vmin;
  cursor: pointer;
}
.speak-btn:active { transform: translateY(0.5vmin); box-shadow: 0 0.3vmin 0 #e8b64c; }

/* 선택지 카드 (글자/이모지/단어) */
.choice-card {
  border: none;
  border-radius: 5vmin;
  background: #fff;
  box-shadow: 0 1vmin 0 rgba(0,0,0,.08), 0 1.6vmin 3vmin rgba(0,0,0,.10);
  cursor: pointer;
  min-width: 88px;
  min-height: 88px;
  width: 28vmin;
  height: 28vmin;
  font-size: 15vmin;
  font-weight: 800;
  color: #4a4e69;
  transition: transform .1s;
}
.choice-card:active { transform: scale(.94); }
.choice-card.word-card { font-size: 6.5vmin; width: auto; padding: 0 6vmin; height: 20vmin; letter-spacing: 0.6vmin; }
.choice-card.correct { background: #b9fbc0; }

/* ===== 스펠링 게임 ===== */
.spell-slots { display: flex; gap: 2.5vmin; }
.spell-slot {
  width: 16vmin;
  height: 18vmin;
  min-width: 56px;
  min-height: 64px;
  border: 0.8vmin dashed #bbb;
  border-radius: 3vmin;
  background: rgba(255,255,255,.6);
  font-size: 10vmin;
  font-weight: 800;
  color: #4a4e69;
  cursor: pointer;
}
.spell-slot.filled { border-style: solid; border-color: #90dbf4; background: #fff; }
.spell-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5vmin; }
.spell-tile {
  width: 15vmin;
  height: 15vmin;
  min-width: 60px;
  min-height: 60px;
  border: none;
  border-radius: 3vmin;
  background: #ffd166;
  box-shadow: 0 0.8vmin 0 #e8b64c;
  font-size: 8.5vmin;
  font-weight: 800;
  color: #4a4e69;
  cursor: pointer;
}
.spell-tile:active { transform: translateY(0.5vmin); }
.spell-tile.used { visibility: hidden; }

/* ===== 보상 / 스티커 ===== */
.reward-sticker { font-size: 30vmin; line-height: 1; }
.reward-msg { font-size: 8vmin; }

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3vmin;
  width: min(90vmin, 92%);
  max-height: 60%;
  overflow: hidden;
}
.sticker-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9vmin;
  background: rgba(255,255,255,.7);
  border-radius: 3vmin;
}
.sticker-cell.locked { filter: grayscale(1); opacity: .3; }

/* ===== 애니메이션 ===== */
.bounce { animation: bounce 2s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5vmin); }
}

.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.pop { animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.wiggle { animation: wiggle .45s ease-in-out; }
@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2vmin) rotate(-3deg); }
  40% { transform: translateX(2vmin) rotate(3deg); }
  60% { transform: translateX(-1.4vmin); }
  80% { transform: translateX(1.4vmin); }
}

/* 컨페티 파티클 (이모지 div, ui.js 에서 생성) */
.confetti {
  position: fixed;
  top: -8vmin;
  font-size: 5vmin;
  pointer-events: none;
  z-index: 99;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(115dvh) rotate(720deg); opacity: .8; }
}

/* ===== color-play 추가 ===== */
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3vmin;
  padding: 2vmin 4vmin;
  width: 100%;
  max-width: 640px;
}
.sheet-card {
  background: #fff;
  border: 3px solid #e2d9ce;
  border-radius: 18px;
  padding: 2vmin;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vmin;
}
.sheet-card:active { transform: scale(0.96); }
.sheet-thumb svg { width: 100%; height: auto; max-height: 24vmin; }
.canvas-holder {
  width: min(92vw, 60vh);
  margin: 0 auto;
  background: #fff;
  border: 3px solid #e2d9ce;
  border-radius: 18px;
  padding: 1.5vmin;
}
.canvas-holder svg { width: 100%; height: auto; display: block; }
.canvas-holder .part { cursor: pointer; }
.palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vmin;
  padding: 2.5vmin 3vmin calc(3vmin + env(safe-area-inset-bottom));
}
.swatch {
  width: 10.5vmin; height: 10.5vmin;
  max-width: 56px; max-height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.15);
  cursor: pointer;
  font-size: 5vmin;
  display: flex; align-items: center; justify-content: center;
}
.swatch.sel {
  border: 4px solid #333;
  transform: scale(1.15);
}

.sheet-thumb img { width: 100%; height: auto; max-height: 24vmin; object-fit: contain; }