/* ===========================================================
   똘뱅이 — 똘켓몬의 안내자
   -----------------------------------------------------------
   4개 서비스가 함께 쓰는 스타일. /shared/ddolbeng.css 로 링크한다.
   표정 SVG 는 /shared/ddolbeng/{normal,happy,sad,surprised,thinking,wink}.svg

   원칙:
     - 아무 때나 나타나지 않는다. 의미 있는 순간에만 등장한다.
     - 말풍선은 장식이 아니라 "다음에 뭘 하면 되는지"를 알려준다.
     - 움직임은 작고 은은하게. 크게 뛰면 시선을 뺏고 촌스러워진다.
   =========================================================== */

.ddol-beng {
  width: 72px;
  height: 72px;
  /* 픽셀 아트라 보간이 들어가면 뭉개진다 */
  image-rendering: pixelated;
  flex-shrink: 0;
  animation: ddol-bob 2.6s ease-in-out infinite;
}

.ddol-beng--sm { width: 44px; height: 44px; }
.ddol-beng--lg { width: 104px; height: 104px; }

/* 숨 쉬듯 아주 조금만 */
@keyframes ddol-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* 등장 — 톡 튀어나오는 느낌 */
@keyframes ddol-pop {
  0% { transform: scale(0.6) translateY(8px); opacity: 0; }
  70% { transform: scale(1.06) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.ddol-pop { animation: ddol-pop 0.32s steps(6) both; }

/* ── 말풍선 ──────────────────────────────────────────── */

.ddol-speech {
  position: relative;
  max-width: 22rem;
  padding: 0.7rem 0.95rem;
  border: var(--ddol-border-w, 3px) solid var(--ddol-border, #0f0043);
  border-radius: var(--ddol-radius, 10px);
  background: var(--ddol-surface, #fff);
  box-shadow: var(--ddol-shadow, 4px 4px 0 #0f0043);
  color: var(--ddol-text, #1a1e21);
  font-family: var(--ddol-font-body, sans-serif);
  font-size: 0.9rem;
  line-height: 1.55;
  word-break: keep-all;
}

/* 꼬리 — 말풍선 '바깥으로' 나가고, 테두리를 그 폭만큼 뚫는다.
   ------------------------------------------------------------------
   좌표 기준이 함정이다. 절대 위치의 left/top 은 부모의 *패딩 박스* 기준인데,
   말풍선에는 3px 테두리가 있어서 보더 박스의 왼쪽 모서리는 left: -3px 이다.

   그리고 border-right 로 만든 삼각형은 '밑변이 오른쪽 끝'에 온다.
   즉 실제로 보이는 x 구간은 [left + 두께, left + 두께 × 2] 다.

     어두운 꼬리: 밑변을 보더 박스 모서리(-3px)에 맞춘다 → left = -3 - 12 = -15px
     흰 꼬리    : 밑변을 패딩 박스 모서리(0)에 맞춘다   → left = 0 - 12 = -12px

   둘의 3px 차이가 그대로 꼬리의 테두리 굵기로 보인다.

   예전 값(-10px / -6px)은 이 계산이 어긋나 있었다. 어두운 꼬리는 1px 만
   삐져나오고 나머지 5px 이 말풍선의 테두리와 안쪽을 덮었고, 흰 꼬리는
   아예 통째로 말풍선 안(0~6px)에 들어앉아 글자 자리를 침범했다.
   그래서 꼬리가 아니라 왼쪽 모서리에 찍힌 얼룩처럼 보였다. */
.ddol-speech::before,
.ddol-speech::after {
  content: '';
  position: absolute;
  left: -15px;
  /* 말풍선 높이와 무관하게 똘뱅이(세로 가운데 정렬)를 가리키게 한다 */
  top: 50%;
  margin-top: -6px;
  border: 6px solid transparent;
  border-right-color: var(--ddol-border, #0f0043);
}
.ddol-speech::after {
  left: -12px;
  border-right-color: var(--ddol-surface, #fff);
}

.ddol-speech strong { color: var(--ddol-navy, #0f0043); }

/* ── 한마디 — 캐릭터 + 말풍선 한 줄 ──────────────────
   4개 서비스가 같은 마크업을 쓴다. 프레임워크가 달라도(Next/React/Preact/바닐라)
   구조는 <div class="ddol-say"><img class="ddol-beng"><p class="ddol-speech"> 로 같다.
   ==================================================== */

.ddol-say {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
}

/* 좁은 곳(다이얼로그, 카드 안)에서는 캐릭터를 줄인다 */
.ddol-say--sm .ddol-beng { width: 48px; height: 48px; }
.ddol-say--sm .ddol-speech { padding: 0.5rem 0.7rem; font-size: 0.82rem; }

/* 캐릭터를 위에 두고 말풍선을 아래로 — 폭이 아주 좁을 때 */
.ddol-say--stack {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* 위로 향하는 꼬리. 계산은 위와 같고 축만 세로로 바뀐다 —
   border-bottom 삼각형은 밑변이 아래쪽 끝(top + 두께 × 2)에 온다. */
.ddol-say--stack .ddol-speech::before,
.ddol-say--stack .ddol-speech::after {
  left: 50%;
  top: -15px;
  margin-top: 0;
  margin-left: -6px;
  border-right-color: transparent;
  border-bottom-color: var(--ddol-border, #0f0043);
}
.ddol-say--stack .ddol-speech::after {
  top: -12px;
  border-bottom-color: var(--ddol-surface, #fff);
}

/* ── 잔디밭 — 잡은 포켓몬이 노는 곳 ──────────────────── */

.ddol-field {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  min-height: 62px;
  padding: 0 0.5rem 0.35rem;
  border-bottom: 4px solid var(--ddol-green, #198754);
  border-radius: 0 0 var(--ddol-radius, 10px) var(--ddol-radius, 10px);
  background: linear-gradient(180deg, transparent 55%, rgba(25, 135, 84, 0.22) 100%);
}

.ddol-field__mon {
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
  /* 개체마다 리듬이 달라야 살아 있는 것처럼 보인다.
     같은 주기로 함께 뛰면 기계처럼 느껴진다. */
  animation: ddol-bob 2.4s ease-in-out infinite;
}

.ddol-field__mon:nth-child(2) { animation-duration: 2.9s; animation-delay: -0.4s; }
.ddol-field__mon:nth-child(3) { animation-duration: 2.2s; animation-delay: -1.1s; }
.ddol-field__mon:nth-child(4) { animation-duration: 3.2s; animation-delay: -0.7s; }
.ddol-field__mon:nth-child(5) { animation-duration: 2.6s; animation-delay: -1.6s; }
.ddol-field__mon:nth-child(6) { animation-duration: 3.0s; animation-delay: -2.1s; }

/* 아직 아무것도 못 잡았을 때 — 실루엣만 흐릿하게 */
.ddol-field__empty {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(15, 0, 67, 0.12);
}

/* ── 야생 인카운터 ────────────────────────────────────
   가끔 풀숲에서 한 마리가 나타난다. 잡히는 게 아니라 "발견"된다 —
   포획은 퀴즈·뒤집기의 몫이고, 홈에서 그냥 주면 그 재미가 사라진다.
   그래서 처음에는 실루엣이고, 눌러야 정체가 드러난다.
   ==================================================== */

.ddol-wild {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* 흔들흔들 — 풀숲이 부스럭거리는 느낌 */
  animation: ddol-rustle 0.9s ease-in-out infinite;
}

.ddol-wild__mon {
  display: block;
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
  /* 실루엣. 무엇인지 모르게 해야 눌러볼 마음이 생긴다 */
  filter: brightness(0) opacity(0.75);
  transition: filter 0.25s steps(4);
}

/* 느낌표 — 여기를 누르라는 신호 */
.ddol-wild::after {
  content: '!';
  position: absolute;
  top: -6px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ddol-yellow, #ffcb05);
  color: var(--ddol-navy, #0f0043);
  font-family: var(--ddol-font-display, sans-serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.ddol-wild--revealed {
  animation: ddol-pop 0.32s steps(6) both;
  cursor: default;
}
.ddol-wild--revealed .ddol-wild__mon { filter: none; }
.ddol-wild--revealed::after { content: none; }

@keyframes ddol-rustle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-4deg); }
  75% { transform: translateX(2px) rotate(4deg); }
}

/* ── 기다리는 동안 ────────────────────────────────────
   도는 원 하나만 있으면 "멈춘 건가?" 싶어진다. 실제 대기 시간은
   그대로여도, 똘뱅이가 말을 걸면 같은 시간이 '기다림'이 아니라
   '준비 중'으로 읽힌다. 말풍선은 흰 바탕이라 어떤 배경 위에서도 읽힌다.
   ==================================================== */

.ddol-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
}

/* 기다림은 평소보다 조금 빠르게 — 뭔가 일어나고 있다는 신호 */
.ddol-loading .ddol-beng { animation-duration: 1.3s; }

/* 말줄임 세 점이 차례로 켜진다. 진행 표시를 따로 두지 않아도
   화면이 살아 있다는 게 보인다. */
.ddol-dots::after {
  content: '…';
  animation: ddol-dots 1.2s steps(4) infinite;
}

@keyframes ddol-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75%, 100% { content: '…'; }
}

/* ── 부팅 스플래시 ────────────────────────────────────
   퀴즈·뒤집기는 번들을 받아 실행할 때까지 #root 가 비어 있어,
   느린 회선에서는 몇 초 동안 아무것도 없는 화면이 뜬다. 그 자리를 메운다.
   앱이 마운트되면 스스로 걷어낸다(각 앱 진입점의 useEffect).
   ==================================================== */

.ddol-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--ddol-boot-bg, var(--ddol-navy, #0f0043));
  transition: opacity 0.25s ease;
}

/* 걷어낼 때 툭 사라지면 화면이 튄 것처럼 보인다 */
.ddol-boot--gone { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .ddol-beng,
  .ddol-field__mon,
  .ddol-wild,
  .ddol-pop,
  .ddol-dots::after {
    animation: none;
  }
  .ddol-boot { transition: none; }
}