:root {
  --shimeji-bubble-bg: var(--card-bg-color, #fffdf7);
  --shimeji-bubble-fg: var(--content-font-color, #2b2620);
  --shimeji-bubble-border: var(--card-border-color, #e7ddc7);
  --shimeji-bubble-shadow: rgba(40, 32, 20, 0.18);
  --shimeji-panel-bg: var(--container-bg-color, #1c1a17);
  --shimeji-panel-fg: var(--content-font-color, #f3ede0);
  --shimeji-panel-accent: var(--accent-color, #d98b4a);     /* 따뜻한 호박빛 — 마스코트 톤 */
  --shimeji-panel-muted: var(--text-muted, #8a8275);
  --shimeji-panel-line: var(--card-border-color, #34302a);
  --shimeji-z: 99999;
}

/* 무대: 화면 전체를 덮되 클릭은 통과 (캐릭터만 잡힘) */
.shimeji-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;          /* 빈 공간 클릭 통과 */
  z-index: var(--shimeji-z);
  overflow: hidden;
}

/* 캐릭터: 바닥 기준 배치, transform 으로 이동 */
.shimeji-char {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: auto;          /* 캐릭터 자신은 클릭 가능 */
  cursor: grab;
  will-change: transform;
  transform-origin: bottom center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.shimeji-char:active { cursor: grabbing; }

/* 머리 위 이모티콘 이펙트: 위로 살짝 떠오르며 사라짐 */
.shimeji-emote {
  position: absolute;
  bottom: 100%;
  left: 50%;                       /* JS가 left를 캐릭터 중앙 px로 덮어씀 */
  transform: translate(-50%, 0);
  margin-bottom: 4px;
  font-size: 26px;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(40,32,20,0.25);
  animation: shimeji-emote-pop 1.3s ease-out forwards;
  z-index: 1;
}
@keyframes shimeji-emote-pop {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  18%  { opacity: 1; transform: translate(-50%, -2px) scale(1.12); }
  32%  { transform: translate(-50%, -6px) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .shimeji-emote { animation-duration: 0.01s; }
}

.shimeji-img {
  display: block;
  image-rendering: auto;
  pointer-events: none;          /* 드래그는 부모가 처리 */
  -webkit-user-drag: none;
}

/* 말풍선 */
.shimeji-bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  /* 캐릭터 컨테이너의 scaleX(facing)을 상쇄하기 위해 JS가 --face 를 -1/1 로 셋 */
  transform: translateX(-50%) scaleX(var(--face, 1));
  margin-bottom: 8px;
  max-width: min(70vw, 420px);   /* 가로로 길게 */
  width: max-content;            /* 내용만큼만, 짧으면 짧게 */
  padding: 6px 11px;
  font-size: 11.5px;             /* 약간 작게 */
  line-height: 1.4;
  white-space: pre-line;         /* 명시적 개행(\n)만 줄바꿈, 자동 줄바꿈은 단어 단위 */
  word-break: keep-all;          /* 한글이 글자 단위로 끊기지 않게 */
  overflow-wrap: anywhere;       /* 아주 긴 단어만 강제 줄바꿈 */
  text-align: center;
  color: var(--shimeji-bubble-fg);
  background: var(--shimeji-bubble-bg);
  border: 1.5px solid var(--shimeji-bubble-border);
  border-radius: 12px;
  box-shadow: 0 4px 14px var(--shimeji-bubble-shadow);
  pointer-events: none;
}
/* 말풍선 꼬리 */
.shimeji-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--shimeji-bubble-bg);
}

@media (prefers-reduced-motion: reduce) {
  .shimeji-char { transition: none !important; }
}

/* =========================== 사용자 패널 =========================== */
.shimeji-panel {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Pretendard", "Noto Sans KR", sans-serif;
  color: var(--shimeji-panel-fg);
  background: var(--shimeji-panel-bg);
  border-radius: 14px;
  padding: 18px 18px 16px;
  width: 320px;
  max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  font-size: 13.5px;
}
.shimeji-panel h2 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.shimeji-panel .sub {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--shimeji-panel-muted);
}
.shimeji-panel .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--shimeji-panel-line);
}
.shimeji-panel .row:first-of-type { border-top: none; }
.shimeji-panel label { cursor: pointer; }
.shimeji-panel .group-title {
  margin: 12px 0 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shimeji-panel-accent);
}
.shimeji-panel select,
.shimeji-panel input[type="number"] {
  background: var(--form-bg-color, #26231f);
  color: var(--shimeji-panel-fg);
  border: 1px solid var(--shimeji-panel-line);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 13px;
}
.shimeji-panel input[type="range"] { accent-color: var(--shimeji-panel-accent); }
/* 토글 스위치 */
.shimeji-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; cursor: pointer; }
.shimeji-switch input { opacity: 0; width: 0; height: 0; }
.shimeji-switch .track {
  position: absolute; inset: 0;
  background: var(--shimeji-panel-line); border-radius: 999px; transition: background .15s;
}
.shimeji-switch .track::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; background: var(--text-secondary, #cfc6b6); border-radius: 50%;
  transition: transform .15s;
}
.shimeji-switch input:checked + .track { background: var(--shimeji-panel-accent); }
.shimeji-switch input:checked + .track::before { transform: translateX(18px); background: #fff; }

.shimeji-panel .charlist { display: flex; flex-direction: column; gap: 2px; }
.shimeji-panel .char-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0;
}
.shimeji-panel .char-item .name { display: flex; align-items: center; gap: 8px; }
.shimeji-panel .char-item .swatch {
  width: 22px; height: 22px; border-radius: 6px; background: var(--shimeji-panel-line); flex: none;
  object-fit: contain;
}
.shimeji-panel .footer {
  display: flex; gap: 8px; margin-top: 14px;
}
.shimeji-panel button.act {
  flex: 1;
  background: var(--shimeji-panel-accent);
  color: var(--shimeji-panel-bg);
  border: none; border-radius: 8px;
  padding: 9px 0; font-weight: 700; font-size: 13px; cursor: pointer;
}
.shimeji-panel button.ghost {
  background: transparent; color: var(--shimeji-panel-muted);
  border: 1px solid var(--shimeji-panel-line); border-radius: 8px;
  padding: 9px 12px; cursor: pointer; font-size: 13px;
}
.shimeji-panel .count-note { font-size: 11px; color: var(--shimeji-panel-muted); }


/* 설정 패널 컨테이너 (좌하단 위젯 툴바 근처에 표시) */
.shimeji-panel-host{
  position:fixed; left:16px; bottom:70px; z-index:100001;
}
.shimeji-panel-host[hidden]{ display:none; }
@media (max-width:768px){
  .shimeji-panel-host{ left:8px; right:8px; bottom:64px; }
}

/* 패널 헤더 + 닫기 버튼 */
.sm-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.sm-panel-head h2{ margin:0; }
.sm-panel-close{
  flex:none; width:28px; height:28px; border-radius:8px; cursor:pointer;
  border:1px solid var(--shimeji-panel-line); background:transparent;
  color:var(--shimeji-panel-muted); font-size:14px; line-height:1;
}
.sm-panel-close:hover{ color:var(--shimeji-panel-fg); border-color:var(--shimeji-panel-accent); }

/* 천장 걷기 시 말풍선: 부모의 scaleY(-1)을 상쇄해 글자를 똑바로 */
.shimeji-bubble.on-ceiling {
  transform: translateX(-50%) scaleX(var(--face, 1)) scaleY(-1);
}
/* 천장 말풍선 꼬리도 위쪽으로 (부모 뒤집힘 보정) */
.shimeji-bubble.on-ceiling::after {
  top: auto; bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--shimeji-bubble-bg);
}