/* 첫 화면 = 스토리보드 한 컷. 5~10세 손가락 규격 — 터치 대상 64px 이상 */

:root {
  --bg: #0b1020;
  --ink: #f4f7ff;
  --dim: #93a0c4;
  --go: #3ddc97;
  --star: #ffd166;
  --bead: #ffb4a2;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 20px/1.5 system-ui, -apple-system, "Noto Sans KR", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden;          /* 앱처럼 보이려면 본문이 스크롤되면 안 된다 */
  user-select: none;
}

#home {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-right));
}

/* ── 2.5D 층 ─────────────────────────────────────────────
   배경 자산이 아직 0장이라 층을 CSS 로 그린다. 그림이 오면 이 두 층만 갈아 끼운다.
   층마다 움직이는 거리가 달라야 깊이가 생긴다 — 값은 web/home.js 의 parallax() 다. */

.sky, .glow {
  position: fixed;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.sky {
  background:
    radial-gradient(60% 40% at 20% 12%, #2a3570 0%, transparent 60%),
    radial-gradient(50% 35% at 82% 8%, #3b2a63 0%, transparent 60%),
    linear-gradient(180deg, #141c3e 0%, var(--bg) 68%);
}

/* 인물 뒤에 깔리는 바닥빛. 무대에 선 것처럼 보이게 하는 층이다 */
.glow {
  background: radial-gradient(46% 26% at 50% 76%, rgba(120, 150, 255, 0.22) 0%, transparent 70%);
}

/* ── HUD — 레벨·경험치·별조각 ────────────────────────────
   누적층은 100% 확정이다. 「얼마나 더 하면 되는지」가 보여야 계획할 수 있다. */

.hud {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.lv {
  font-size: 17px;
  font-weight: 800;
  color: var(--star);
  white-space: nowrap;
}

.xpbar {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: #232c52;
  overflow: hidden;
}

.xpbar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--go), var(--star));
  transition: width 600ms ease;
}

.stars { color: var(--star); font-size: 16px; white-space: nowrap; }
.stars b { font-size: 20px; }

/* 변동층 히트 연출 — 1.2초. 못 받아도 진도에 차이가 없다 */
.stars.pop { animation: pop 1.2s ease-out; }

@keyframes pop {
  0% { transform: scale(1); }
  25% { transform: scale(1.35); filter: brightness(1.5); }
  100% { transform: scale(1); }
}

.icon {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--dim);
  font-size: 24px;
}

/* ── 무대 ───────────────────────────────────────────────── */

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 180px;   /* 퀘스트·도구가 들어와도 무대가 뭉개지지 않게 */
}

.bubble {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  max-width: 88%;
  margin: 0;
  padding: 13px 20px;
  border-radius: 22px;
  background: #fff;
  color: #16204a;
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* 말꼬리가 말하는 쪽을 가리킨다. 둘이 서 있으니 누가 말했는지가 보여야 한다 */
.bubble::after {
  content: '';
  position: absolute;
  bottom: -9px;
  border: 10px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

.bubble[data-who="byeol"]::after { right: 26%; }
.bubble[data-who="pita"]::after { left: 26%; }

.cast {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  will-change: transform;
}

.who {
  border: 0;
  padding: 0;
  background: transparent;
}

.who img { height: 100%; width: auto; display: block; }

/* 깊이 — 피타가 뒤에 있으니 작고 어둡다. 코치는 앞에 나오지 않는다 */
.pita {
  height: min(30dvh, 270px);
  filter: brightness(0.82) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
  transform: translateX(14%);
  animation: breathe 4.2s ease-in-out infinite 0.7s;
}

.byeol {
  height: min(36dvh, 320px);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
  transform: translateX(-8%);
  animation: breathe 3.4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

.who:active { scale: 0.97; }

/* ── 무대 안의 수학 — 구슬 ──────────────────────────────── */

.beads {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.bead {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* 5~10세 손가락. 64px 아래로 내리지 않는다 */
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(30% 30% at 35% 30%, #fff 0%, var(--bead) 45%, #c96a5a 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  transition: transform 120ms ease, opacity 200ms ease;
}

.bead:active { transform: scale(0.9); }

/* 센 구슬은 사라지지 않고 «표시»된다. 사라지면 몇 개였는지 되짚을 수 없다 */
.bead.on {
  background: radial-gradient(30% 30% at 35% 30%, #fff 0%, var(--star) 45%, #d9a13a 100%);
  transform: scale(1.06);
}

/* ── 이어하기 ───────────────────────────────────────────── */

.go {
  position: relative;
  z-index: 2;
  display: block;
  width: 88%;
  min-height: 96px;
  margin: 0 auto;
  padding: 16px 20px;
  border-radius: 26px;
  background: var(--go);
  color: #05240f;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 0 #29a874;
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.go:active { transform: translateY(6px); box-shadow: 0 4px 0 #29a874; }

/* 구슬을 다 세면 버튼이 한 번 뛴다 — 다음으로 갈 때가 됐다는 신호다 */
.go.ready { animation: nudge 1.6s ease-in-out 2; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

.goTitle { display: block; font-size: 28px; font-weight: 800; }
.goKicker { display: block; font-size: 16px; font-weight: 700; opacity: 0.75; }

/* ── 오늘의 퀘스트 — 읽는 것이지 고르는 것이 아니다 ────────
   종류를 날마다 바꾸지 않는다. 계획 가능성이 이 층의 존재 이유다. */

.quests {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
}

.qTitle {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: 0.02em;
}

.quest {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(35, 44, 82, 0.55);
  font-size: 16px;
  margin-bottom: 5px;
}

.quest b { color: var(--dim); font-size: 15px; }
.quest span { flex: 1; }
.quest i { color: var(--star); font-style: normal; font-weight: 700; font-size: 14px; }

.quest.done { opacity: 0.55; }
.quest.done b { color: var(--go); }
.quest.done span { text-decoration: line-through; }

/* ── 도구 — 사는 것이 아니라 열리는 것 ─────────────────────
   잠긴 것도 조건을 보여 준다. 안 보이면 뽑기처럼 느껴진다. */

.tools {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.tool {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border-radius: 12px;
  background: rgba(35, 44, 82, 0.55);
  font-size: 13px;
}

.tool b { font-size: 19px; font-style: normal; }
.tool i { font-style: normal; color: var(--dim); }
.tool.off { opacity: 0.5; }
.tool.off b { filter: grayscale(1); }

.ghost {
  position: relative;
  z-index: 2;
  min-height: 44px;
  margin: 8px auto 0;
  padding: 0 18px;
  border: 1px solid #2b3557;
  border-radius: 14px;
  background: transparent;
  color: var(--dim);
  font-size: 15px;
}

/* 5~7세 화면에서는 연속 일수를 감춘다 */
body.noStreak .streak { display: none; }

/* 전정기관이 민감한 아이가 있다. 움직임을 요구하지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .byeol, .pita, .go.ready, .stars.pop { animation: none; }
  .xpbar i { transition: none; }
  .go, .bead { transition: none; }
  .sky, .glow, .cast { transform: none !important; }
}