/* 벌꿀오소리 마스코트 — 배치 · 말풍선 · 아주 가벼운 CSS 애니메이션만.
   애니메이션 라이브러리는 쓰지 않는다 (게임 성능이 우선). */

/* 레이어 순서: 배경 < 테이블 < 플레이어 < 게임UI < 마스코트 < 모달 < 토스트 */
:root{
  --z-mascot: 60;
  --z-mascot-react: 70;
}

.mascot{
  position:relative;
  width:var(--mw,150px);
  line-height:0;
  pointer-events:none;               /* 게임 조작을 절대 가로막지 않는다 */
  user-select:none;
  -webkit-user-select:none;
}
.mascot img{
  width:100%;height:auto;display:block;
  border-radius:14px;
  -webkit-user-drag:none;user-drag:none;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.45));
}
.mascot.m-tap{pointer-events:auto;cursor:pointer}
.mascot.plain img{border-radius:0;filter:none}
.mascot.round img{border-radius:50%}

/* 말풍선 — 이미지와 분리된 HTML/CSS 텍스트 */
.mascotBubble{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);
  /* 절대위치라 그냥 두면 부모(캐릭터) 폭에 눌려 글자가 세로로 쪼개진다.
     max-content 로 잡아야 한 줄로 옆으로 이어진다. */
  width:max-content;max-width:min(280px,86vw);
  padding:8px 13px;border-radius:14px;
  background:var(--panel-2,#161E2A);border:1px solid var(--line,#232D3C);
  color:var(--ink,#E7EEF7);
  font-family:var(--f-body,system-ui),sans-serif;font-size:13px;font-weight:600;line-height:1.5;
  white-space:normal;text-align:center;word-break:keep-all;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.mascotBubble::after{
  content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--panel-2,#161E2A);
}

/* 리액션 레이어 — 화면 구석에만 뜬다 (카드·칩·버튼·타이머 위 금지) */
#mascotLayer{
  position:fixed;inset:0;z-index:var(--z-mascot-react);
  pointer-events:none;
}
.mascotReact{
  position:absolute;right:16px;bottom:16px;
}
.mascotReact.m-bl{left:16px;right:auto;bottom:16px}
.mascotReact.m-tr{right:16px;left:auto;top:76px;bottom:auto}
.mascotReact.m-tl{left:16px;right:auto;top:76px;bottom:auto}
.mascotReact.m-out{animation:mascotOut .3s ease forwards}

/* ── 애니메이션 (아주 가볍게) ── */
@keyframes mascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes mascotBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
@keyframes mascotBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}60%{transform:translateY(-3px)}}
@keyframes mascotPop{0%{transform:scale(.7) translateY(14px);opacity:0}60%{transform:scale(1.05) translateY(0);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes mascotOut{to{transform:scale(.9) translateY(10px);opacity:0}}
@keyframes mascotSpin{to{transform:rotate(360deg)}}

.mascot.m-float{animation:mascotFloat 4.5s ease-in-out infinite}
.mascot.m-breath{animation:mascotBreath 3.6s ease-in-out infinite}
.mascot.m-bounce{animation:mascotBounce 2.4s ease-in-out infinite}
.mascot.m-pop{animation:mascotPop .34s cubic-bezier(.2,1.5,.4,1)}
.mascot.m-none{animation:none}

/* 로딩용 칩 스피너 (마스코트 옆에 쓴다) */
.mascotChip{width:22px;height:22px;border-radius:50%;
  border:3px solid var(--line,#232D3C);border-top-color:var(--cyan,#2BF0D4);
  animation:mascotSpin .9s linear infinite;display:inline-block}

/* 사용자가 '끄기'로 두면 전부 숨긴다 */
html[data-mascot-level="off"] .mascot,
html[data-mascot-level="off"] #mascotLayer{display:none!important}
/* '최소'는 움직임과 말풍선을 끈다 */
html[data-mascot-level="min"] .mascot{animation:none!important}
html[data-mascot-level="min"] .mascotBubble{display:none}

@media (prefers-reduced-motion:reduce){
  .mascot,.mascotChip{animation:none!important}
}

/* 좁은 화면에서는 리액션을 작게 (게임 화면을 가리지 않게) */
@media (max-width:760px){
  .mascotReact{right:10px;bottom:10px;--mw:104px!important}
  .mascotReact .mascot{width:104px}
  .mascotBubble{font-size:12px;padding:6px 10px}
}
/* 가로로 누운 모바일: 테이블이 좁아지므로 더 작게 */
@media (max-height:520px) and (orientation:landscape){
  .mascotReact{--mw:84px!important}
  .mascotReact .mascot{width:84px}
}