* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #0a1410;
  font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  touch-action: manipulation;
}

#app {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #142720 0%, #0d1c16 60%, #081410 100%);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
}

/* ===== 상단 스탯바 ===== */
#statbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px 7px;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(120,255,180,0.15);
  z-index: 20;
}

/* 1줄: 레벨 옆에 [칭호(위) + 경험치바(아래)] */
#statbarTop {
  display: flex;
  align-items: center;
}

.stat-level {
  align-items: center;
  gap: 8px;
  flex: 1; /* 경험치바가 오른쪽 끝까지 차게 */
}

.level-line {
  display: flex;
  align-items: baseline;
  gap: 5px;
}


/* 2줄: 공격력 · 명중률 · 초당타격 */
#statbarStats {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-block {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d8f5e3;
  font-size: 14px;
  font-weight: 600;
}

/* 상단바 스탯 아이콘 (재료 칩 아이콘과 같은 원형 배지 톤) */
.stat-block .stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(120,255,180,0.12);
  overflow: hidden;
  flex-shrink: 0;
}
.stat-block .stat-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stat-icon { font-size: 15px; }

.exp-bar-wrap {
  position: relative; /* 내부 칭호·퍼센트 텍스트 기준 */
  flex: 1;
  height: 22px;
  background: rgba(255,255,255,0.12);
  border-radius: 11px;
  overflow: hidden;
}

#expBar {
  height: 100%;
  width: 0%;
  /* 색은 renderTitleBanner가 진행 칭호 고유색으로 입힌다 */
  background: linear-gradient(90deg, #59d98e, #9dffc0);
  transition: width 0.25s ease;
}

#expPctText {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  /* 밝은 칭호색 채움 위에서도 읽히게 — 어두운 알약 배경 + 진한 외곽 */
  background: rgba(0, 0, 0, 0.32);
  border-radius: 7px;
  padding: 1px 6px;
  text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.8);
  letter-spacing: 0.5px;
  pointer-events: none;
}

#powerText { color: #ff9d6c; }

/* ===== 보유 재료 요약 바 ===== */
#materialBar {
  display: flex;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(120,255,180,0.1);
  z-index: 20;
}

.mat-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #cdeedd;
  font-size: 12px;
  font-weight: 600;
}

.mat-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(120,255,180,0.12);
  color: #7fffb0;
  font-size: 9px;
  font-weight: 700;
  overflow: hidden;
}

.mat-chip-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== 단약 버프 표시: 게임 화면 우측 상단, 스킬 쿨타임처럼 링이 도는 원형 배지 ===== */
#potionBuffBar {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  flex-direction: row; /* 가로로 나열 */
  gap: 8px;
  z-index: 40;
  pointer-events: none;
}

.potion-badge {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(180,120,255,0.5);
  background: rgba(30,24,40,0.35);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.potion-badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.potion-badge img {
  filter: brightness(1.15); /* 아이콘이 어두운 톤이라 살짝 밝혀서 잘 보이게 */
}

.potion-badge .skill-cooldown-ring {
  display: block; /* 남은 지속시간 오버레이 항상 표시 */
}

.potion-badge .skill-cooldown-ring-fg {
  stroke: rgba(0,0,0,0.28); /* 아이콘이 비쳐 보이게 약한 오버레이 */
  transition: none; /* 매 프레임 갱신이라 트랜지션 불필요 */
}

/* ===== 칭호 (경험치바 바로 위) ===== */
/* 칭호·경지는 경험치 게이지 안 왼쪽에 얹힌다 — 채움색 위에서도 읽히게 진한 외곽 */
#titleBanner {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #7fffb0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.8);
  pointer-events: none;
}

#titleBanner .stage-word {
  color: #e4d290; /* 경지(초입/소성/대성)는 선계 금빛으로 구분 */
}

/* ===== 메인 스테이지 ===== */
#stage {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* 상단 HUD(어두움)와 밝은 하늘 사이가 뚝 끊겨 빈 흰 띠처럼 보이는 것을 잇는 스크림 */
#stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  background: linear-gradient(180deg, rgba(10, 20, 16, 0.5), rgba(10, 20, 16, 0));
  pointer-events: none;
  z-index: 2;
}

#comboWrap {
  position: absolute;
  top: 64px; /* 단약 배지 줄(top 12, 높이 44) 바로 아래 — 좁은 화면에서 겹치지 않게 */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 15;
  pointer-events: none;
  /* 먹글씨 종이빛 후광은 여기(애니메이션 안 하는 부모)에 둔다 — 데미지 bump(transform)가 도는 자식에
     filter가 있으면 매 타격 레이어 재합성으로 후광이 깜빡였다. 부모로 옮겨 깜빡임 제거. */
  filter: drop-shadow(0 0 2px rgba(243,239,228,0.9)) drop-shadow(0 1px 3px rgba(20,18,14,0.4));
}

/* 지금 치는 대나무에 누적된 데미지 — 붓으로 친 먹글씨: 위는 진하고 아래로 옅어지는 먹 그라데이션.
   글자 자체에 세로 먹농담을 입히고(background-clip:text), 뒤에 종이빛 후광을 드리워 화선지에 스민 느낌. */
#hitDamageText {
  position: relative;
  display: inline-block;
  font-family: "AppleMyungjo", "Nanum Myeongjo", "Songti SC", "Noto Serif KR", serif;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.1;
  /* 세로 먹농담: 상단 진한 먹(#0d0b08) → 하단 옅은 먹(#4a443a) */
  background: linear-gradient(180deg, #0d0b08 0%, #221f18 55%, #4a443a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* 후광(filter)은 부모 #comboWrap에 있다. 여기선 transform 애니메이션만 — 레이어 고정으로 깜빡임 방지 */
  will-change: transform;
  backface-visibility: hidden;
  opacity: 0;
}
#hitDamageText.show { opacity: 1; }
#hitDamageText.bump { animation: comboBump 0.18s ease; }

/* 그 아래: 이 대나무에 누적된 재료 — 기존 재료 플로터와 똑같이 동그란 아이콘 + "+개수" */
#hitMaterialText {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  opacity: 0;
}
#hitMaterialText.show { opacity: 1; }
.hit-mat-chip {
  font-family: "AppleMyungjo", "Nanum Myeongjo", "Songti SC", "Noto Serif KR", serif;
  font-weight: 900;
  font-size: 17px;
  color: #14120e;                 /* 짙은 먹색 (데미지·연격과 동일) */
  letter-spacing: 0.5px;
  text-shadow:
    0 0 3px rgba(243,239,228,0.95),
    0 0 5px rgba(243,239,228,0.85),
    0 1px 3px rgba(20,18,14,0.35);
  white-space: nowrap;
}
.hit-mat-chip img {
  width: 16px;
  height: 16px;
  border-radius: 50%;             /* 동그란 아이콘 배지 */
  vertical-align: -3px;
  margin-right: 2px;
}

#comboText {
  display: inline-block;
  margin-top: 3px;
  font-family: "AppleMyungjo", "Nanum Myeongjo", "Songti SC", "Noto Serif KR", serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
  /* 데미지와 같은 세로 먹농담 그라데이션 */
  background: linear-gradient(180deg, #0d0b08 0%, #221f18 55%, #4a443a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* 후광은 부모 #comboWrap에. 자체 filter 제거로 bump 시 깜빡임 방지 */
  will-change: transform;
  backface-visibility: hidden;
  opacity: 0;
}

#comboText.show {
  opacity: 1;
}

#comboText.bump {
  animation: comboBump 0.18s ease;
}

@keyframes comboBump {
  0% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

#pixiRoot {
  position: absolute;
  inset: 0;
}
#pixiRoot canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ===== 플로팅 텍스트 (데미지/골드) ===== */
#floatingTextLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.floater {
  position: absolute;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,0.7);
  white-space: nowrap;
  animation: floatUp 0.75s ease-out forwards;
}

/* 재료 드랍 플로터의 아이콘 (텍스트 대신 이미지 배지) */
.floater .floater-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  vertical-align: -3px;
  margin-right: 2px;
}

.floater.crit {
  font-size: 22px;
  color: #ffce3d;
  text-shadow: 0 0 8px rgba(255,180,0,0.9), 0 2px 3px rgba(0,0,0,0.7);
}

.floater.gold {
  color: #7fffb0;
  font-size: 14px;
}

.floater.miss {
  font-size: 18px;
  font-style: italic;
  color: #9fb3ab;
  text-shadow: 0 2px 3px rgba(0,0,0,0.7);
}

.floater.material {
  color: #c9e6a8;
  font-size: 13px;
}

@keyframes floatUp {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  15% { opacity: 1; transform: translateY(-8px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-60px) scale(1); }
}

/* ===== 우하단 플로팅 버튼 ===== */
#floatingTabs {
  position: absolute;
  right: 14px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 45;
}

.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(120,255,180,0.25);
  background: rgba(10, 22, 17, 0.82);
  backdrop-filter: blur(4px);
  color: #cdeedd;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.08s ease, background 0.15s ease;
}

.tab-btn .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 20px;
  line-height: 1;
}

.tab-btn .tab-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tab-btn .tab-label {
  font-size: 9px;
  line-height: 1;
}

/* ===== 하단 상시 스킬 바: 텍스트 없이 큼직한 원형 아이콘만 ===== */
#skillBar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(120,255,180,0.15);
  z-index: 20;
}

/* 스킬 버튼들을 담는 내부 래퍼 — 원래 스킬바가 갖던 가로 배치를 여기서 한다
   (미니게임 중 #leafSeqGrid로 교체하기 위해 한 겹 감쌌다) */
#skillBarInner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}

/* 자동 수련 토글 (광고 30분) — 스킬바 맨 앞 상하 스위치.
   스킬 슬롯(.skill-slot)이 aspect-ratio로 화면폭에 따라 줄어드는 만큼, 이쪽도 같은 비율로
   줄어들도록 고정 height 대신 aspect-ratio + max-height로 맞춘다(안 그러면 이 토글만 커서
   스킬바 전체 높이가 못 줄어든다). */
#autoSkillToggle {
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 30px; /* 트랙(18px)+남은시간 텍스트가 들어가는 최소 폭 — 넓으면 스킬칸과 벌어져 보인다 */
  aspect-ratio: 30 / 64;
  height: auto;
  max-height: 64px;
  padding: 0;
  border: none;
  background: none;
  color: #8fb8a0;
  cursor: pointer;
  font-size: 10px;
}

.auto-toggle-track {
  position: relative;
  width: 18px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(120,255,180,0.25);
  transition: background 0.2s;
}

.auto-toggle-knob {
  position: absolute;
  left: 2px;
  top: 18px; /* OFF: 아래 */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8fb8a0;
  transition: top 0.2s, background 0.2s;
}

#autoSkillToggle.on .auto-toggle-track { background: rgba(120,255,180,0.25); }
#autoSkillToggle.on .auto-toggle-knob { top: 2px; background: #7fffb0; } /* ON: 위 */
#autoSkillToggle.on { color: #7fffb0; }

/* 자동 발동 대상 스킬이 아직 하나도 안 해금됐을 때: 흐리게·클릭 불가 */
#autoSkillToggle:disabled,
#autoSkillToggle.locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.auto-toggle-text {
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ===== 오프닝 (타이틀 화면) ===== */
/* 게임 장면은 그대로 보이고 타이틀·안내문만 얹는다. 탭하면 오프닝이 걷히고 HUD가 페이드인. */
#openingOverlay {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12% 0 3.5%; /* 안내문은 캐릭터와 안 겹치게 바닥 잔디선까지 내린다 */
  cursor: pointer;
  transition: opacity 0.7s ease;
}

/* 로딩 표지 — 처음엔 아무것도 안 보이고(배경색 어둠, 타이틀·장면·안내문 전부 아래 깔림),
   렌더러가 준비되면(.ready) 족자를 펼치듯 위에서부터 타이틀 → 장면 → 안내문 순서로 드러난다 */
#openingOverlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2; /* 타이틀·안내문보다 위 — 전부 덮는다 */
  background: #0a1410; /* 기본 배경과 같은 어둠 — 흰 종이도 안 보이게 */
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.5s cubic-bezier(0.45, 0, 0.25, 1);
  pointer-events: none; /* 탭은 표지가 걷히는 중에도 오버레이가 받는다 */
}

#openingOverlay.ready::before {
  clip-path: inset(100% 0 0 0); /* 위 여백이 커지며 표지가 아래로 말려 내려가는 와이프 */
}

#openingOverlay.closing {
  opacity: 0;
  pointer-events: none;
}

#openingTitle {
  font-size: clamp(40px, 9vw, 64px);
  font-weight: 900;
  letter-spacing: 14px;
  text-indent: 14px; /* letter-spacing이 마지막 글자 뒤에도 붙어 중심이 틀어지는 것 보정 */
  color: #241f16;
  /* 뒤에 대나무 줄기가 지나가도 읽히도록 종이빛 글로우를 겹겹이 */
  text-shadow:
    0 0 10px rgba(243, 239, 228, 1),
    0 0 22px rgba(243, 239, 228, 0.95),
    0 0 44px rgba(243, 239, 228, 0.85);
  font-family: 'AppleMyungjo', 'Songti SC', 'Noto Serif KR', serif;
}

#openingTap {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 6px;
  text-indent: 6px;
  color: #2e2a22;
  text-shadow:
    0 0 8px rgba(243, 239, 228, 1),
    0 0 18px rgba(243, 239, 228, 0.9);
  animation: openingTapPulse 1.6s ease-in-out infinite;
}

@keyframes openingTapPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.95; }
}

/* 오프닝 동안 HUD 숨김 — 클래스가 걷히면 opacity 트랜지션으로 페이드인 */
#statbar, #materialBar, #skillBar, #floatingTabs, #bgmToggle, #potionBuffBar {
  transition: opacity 0.9s ease;
}

#app.opening #statbar,
#app.opening #materialBar,
#app.opening #skillBar,
#app.opening #floatingTabs,
#app.opening #bgmToggle,
#app.opening #potionBuffBar {
  opacity: 0;
  pointer-events: none;
}

/* ===== 테마 모달 (confirm 대체) ===== */
#modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
}

.modal-box {
  width: min(320px, calc(100vw - 48px));
  padding: 20px 18px 16px;
  border-radius: 14px;
  background: #121d16;
  border: 1px solid rgba(120, 255, 180, 0.25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.modal-title {
  color: #7fffb0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.modal-msg {
  color: #cdeedd;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
  margin-bottom: 16px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.modal-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.modal-cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #9db8a8;
}

.modal-ok {
  background: rgba(120, 255, 180, 0.18);
  border: 1px solid rgba(120, 255, 180, 0.45);
  color: #7fffb0;
}

/* 광고 목업 오버레이 */
#mockAdOverlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0,0,0,0.78);
  color: #f0e8d8;
  font-size: 15px;
  font-weight: 700;
}

#mockAdOverlay .ad-count {
  font-size: 34px;
  color: #7fffb0;
}

/* ===== 붉은 잎 베기 미니게임 (프로토타입) ===== */
#leafGame {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: none;
}
#leafGame.show { display: block; }

#leafGameHud {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  color: #f0e8d8;
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
}
#leafGameScore { color: #ffd9a0; }
#leafGameCombo { color: #ff9a86; min-width: 60px; }

#leafGameField {
  position: absolute;
  inset: 0;
}

.leaf-target {
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  cursor: pointer;
  will-change: transform;
}
.leaf-target::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50% 8% 50% 8%;
  transform: rotate(38deg);
  background: var(--leaf-color, #9c2418);
  box-shadow: 0 0 8px var(--leaf-glow, rgba(180,40,20,0.45));
}
.leaf-target.sliced { pointer-events: none; }

/* 벤 잎의 반쪽 조각 — 검격선 각도로 갈라져 떨어진다 */
.leaf-half {
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  pointer-events: none;
  will-change: transform, opacity;
}
.leaf-half::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50% 8% 50% 8%;
  transform: rotate(38deg);
  background: var(--leaf-color, #9c2418);
}

/* ===== 순서표: 스킬바 자리에 20색(10열 2행)이 확정 공개 ===== */
/* 미니게임 중에는 스킬 버튼(#skillBarInner)을 숨기고 그리드를 보인다 */
#leafSeqGrid { display: none; }
#skillBar.leafmode #skillBarInner { display: none; }
#skillBar.leafmode #leafSeqGrid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px 5px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

/* 잎 모양 칸 — 화면의 잎(.leaf-target::before)과 같은 실루엣 */
.seq-slot {
  position: relative;
  width: 22px;
  height: 22px;
  justify-self: center;
  border-radius: 50% 8% 50% 8%;
  transform: rotate(38deg);
  background: var(--leaf-color, #888);
  box-shadow: 0 0 4px var(--leaf-glow, rgba(0,0,0,0.3));
  transition: transform 0.15s, opacity 0.2s, box-shadow 0.15s;
}
.seq-slot.current {
  transform: rotate(38deg) scale(1.3);
  box-shadow: 0 0 0 2px #f3efe4, 0 0 8px var(--leaf-glow, rgba(255,255,255,0.4));
  z-index: 1;
}
.seq-slot.done { opacity: 0.32; }
.seq-slot.done::after {
  position: absolute;
  inset: 0;
  transform: rotate(-38deg); /* 잎 회전 상쇄해서 표식은 똑바로 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.seq-slot.done.ok::after { content: "✓"; color: #eafff2; }
.seq-slot.done.bad::after { content: "✕"; color: #ffdcd4; }

#leafGameResult {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(10,20,16,0.72);
  color: #f0e8d8;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
}
#leafGameResult.show { display: flex; }

/* ===== 신목 레이드: 게이지 발도 (프로토타입) ===== */
#raidGame {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: none;
}
#raidGame.show { display: block; }

#raidGameHud {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  display: flex;
  gap: 16px;
  justify-content: center;
  color: #f0e8d8;
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
#raidGameTitle { color: #b9e6c8; }
#raidGameHp { color: #ff9a86; }

#raidGaugeWrap {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  width: min(320px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#raidGaugeTrack {
  position: relative;
  width: 100%;
  height: 26px;
  border-radius: 13px;
  background: linear-gradient(90deg, #3a2e20 0%, #6e5a3a 50%, #b98a2a 78%, #d94f2a 100%);
  border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
}
#raidGaugeMarks {
  position: absolute;
  inset: 0;
}
#raidGaugeMarks span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0,0,0,0.28);
}
#raidGaugeNeedle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: #f3efe4;
  box-shadow: 0 0 6px rgba(255,255,255,0.7);
  will-change: left;
}
#raidGaugeValue {
  font-size: 26px;
  font-weight: 800;
  color: #f3efe4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

#raidStrikeBtn {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  padding: 12px 42px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  color: #14120e;
  background: linear-gradient(180deg, #f3efe4, #d8cfb8);
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
#raidStrikeBtn:active { transform: translateX(-50%) translateY(2px); }

#raidGameResult {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(10,20,16,0.72);
  color: #f0e8d8;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
}
#raidGameResult.show { display: flex; }

.skill-slot {
  position: relative;
  flex-shrink: 1;
  flex-basis: 64px;
  width: 64px;
  max-width: 64px;
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(120,255,180,0.3);
  background: rgba(255,255,255,0.04);
  color: #cdeedd;
  cursor: pointer;
  overflow: hidden; /* 쿨게이지 파이(굵은 stroke)가 사각 viewBox 모서리째 원 밖으로 비어져 나오는 것을 잘라냄 */
}

.skill-slot-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}

.skill-slot-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 쿨타임 진행 표시: 시계처럼 도는 원형 링(남은 시간이 줄어들수록 링이 채워짐) */
.skill-cooldown-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  display: none;
}

.skill-cooldown-ring-fg {
  fill: none;
  stroke: rgba(0,0,0,0.72);
  stroke-width: 36;
  stroke-dasharray: 100.5;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.2s linear;
}

.skill-slot-lock {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  filter: grayscale(1) brightness(1.6);
}

.skill-slot-status {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
}

/* 잠김: 아이콘 흐리게 + 자물쇠 + 가운데 해금 레벨 */
.skill-slot.locked {
  cursor: not-allowed;
}

.skill-slot.locked .skill-slot-icon {
  filter: grayscale(1) brightness(0.5);
}

.skill-slot.locked .skill-slot-lock {
  display: flex;
}

/* 잠금 상태: 해금 레벨을 자물쇠 아래가 아니라 원 중앙(자물쇠 위)에 겹쳐 표시 */
.skill-slot.locked .skill-slot-lock {
  opacity: 0.5; /* 중앙 레벨 텍스트가 잘 읽히게 자물쇠는 은은하게 */
}

.skill-slot.locked .skill-slot-status {
  display: flex;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7);
}

/* 쿨타임 중: 링 표시 + 가운데 남은 초 */
.skill-slot.on-cooldown .skill-cooldown-ring {
  display: block;
}

.skill-slot.on-cooldown .skill-slot-status {
  display: flex;
}

.skill-slot.on-cooldown .skill-slot-icon {
  filter: brightness(0.75);
}

/* 사용 가능: 은은하게 빛나는 테두리 */
.skill-slot.ready {
  border-color: rgba(255,180,60,0.8);
  box-shadow: 0 0 10px rgba(255,180,60,0.5);
  /* 무한 펄스 애니메이션은 깜빡이는 느낌이라 제거 — 정적인 금빛 테두리로만 표시 */
}

/* 발동 중(지속형 스킬): 초록빛 테두리 + 남은 지속시간 링/숫자 */
.skill-slot.active {
  border-color: rgba(120,255,180,0.9);
  box-shadow: 0 0 12px rgba(120,255,180,0.55);
}
.skill-slot.active .skill-cooldown-ring { display: block; }
.skill-slot.active .skill-slot-status { display: flex; color: #9dffc8; }

@keyframes skillReadyPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

.tab-btn:active {
  transform: scale(0.92);
}

.tab-btn.active {
  color: #7fffb0;
  border-color: rgba(127,255,176,0.7);
  background: rgba(30, 70, 50, 0.9);
  box-shadow: 0 4px 14px rgba(80,255,160,0.25);
}

/* ===== 바텀시트 오버레이 ===== */
#sheetDim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 49;
}
#sheetDim.show { display: block; }

#sheetOverlay {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 480px;
  max-height: 62%;
  overflow-y: auto;
  background: rgba(8, 18, 14, 0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(120,255,180,0.25);
  border-radius: 18px 18px 0 0;
  /* 상단 패딩 없음 — 스크롤 컨테이너의 패딩 영역으로 내용이 비쳐 지나가서,
     고정 헤더 위로 얇은 띠처럼 보이는 문제가 있었다. 상단 여백은 핸들바 높이가 담당. */
  padding: 0 12px 16px;
  z-index: 50;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
  transition: transform 0.28s cubic-bezier(.2,.9,.3,1);
}

#sheetOverlay.show {
  transform: translate(-50%, 0);
}

#sheetHandleBar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px; /* 고정 높이 헤더 — ✕(30px)가 안에 딱 들어와 어느 패널에서든 같은 자리 */
  cursor: pointer;
  /* 시트 내용이 스크롤돼도 닫기(✕)가 항상 보이게 상단에 고정.
     좌우/상단 패딩까지 배경을 채워 스크롤 시 가장자리로 내용이 비치지 않게 한다. */
  position: sticky;
  top: -1px; /* 서브픽셀 반올림으로 헤더 위에 1px 미만 이음새가 비치는 것 방지 — 1px 위로 당겨 붙인다 */
  z-index: 5;
  background: rgb(9, 19, 15); /* 완전 불투명 — 밑을 지나가는 내용이 3%짜리 틈으로도 안 비치게 */
  margin: 0 -12px 8px;
  padding: 1px 12px 0; /* top:-1px 보정 */
  border-radius: 18px 18px 0 0; /* 시트 맨 위 둥근 모서리까지 헤더가 채운다 */
  box-shadow: 0 -6px 0 rgb(9, 19, 15); /* 위쪽 솔리드 커버 — 어떤 배율/스크롤 위치에서도 틈 차단 */
}
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.25);
}
#sheetCloseBtn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(120,255,180,0.25);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
#sheetCloseBtn:active {
  background: rgba(255,255,255,0.12);
}

/* ===== 테스트: 시간대/날씨 고정 ===== */
#testDayGrid, #testWeatherGrid {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  flex-wrap: wrap;
}
#testDayGrid .test-day-label, #testWeatherGrid .test-day-label { font-size: 12px; color: rgba(255,255,255,0.6); }
#testDayGrid button, #testWeatherGrid button {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid rgba(120,255,180,0.2);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.82);
  cursor: pointer;
}
#testDayGrid button.active, #testWeatherGrid button.active {
  border-color: #3fbf6f;
  background: rgba(63,191,111,0.18);
  color: #fff;
}

/* ===== 칭호 선택 그리드 ===== */
#titleChangeBtn {
  margin-left: 8px;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid rgba(120,255,180,0.35);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
}
#titleChangeBtn:active { background: rgba(255,255,255,0.14); }
#titleSelectGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 8px 0 12px;
}
#titleSelectGrid button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid rgba(120,255,180,0.2);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.82);
  cursor: pointer;
  text-align: left;
}
#titleSelectGrid button.active {
  border-color: #3fbf6f;
  background: rgba(63,191,111,0.18);
  color: #fff;
}
#titleSelectGrid button:disabled { opacity: 0.35; cursor: default; }
#titleSelectGrid .title-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.35);
}
#titleSelectGrid .title-lv { margin-left: auto; font-size: 11px; color: rgba(255,255,255,0.45); }

/* ===== 도움말 패널 ===== */
#helpBtn {
  display: block;
  width: 100%;
  margin: 4px 0 12px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #3fbf6f, #268a4d);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 0 #1c6b3c;
  transition: transform 0.06s ease;
}
#helpBtn:active { transform: translateY(2px); box-shadow: none; }
#helpBackBtn {
  margin: 4px 0 10px;
  padding: 8px 14px;
  border: 1px solid rgba(120,255,180,0.35);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
#helpBackBtn:active { background: rgba(255,255,255,0.12); }
.help-text {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  margin: 6px 2px 14px;
}
.help-list {
  margin: 4px 0 14px;
  padding-left: 18px;
}
.help-list li {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
}
.help-list b { color: rgba(255,255,255,0.92); }

/* ===== 패널 공통 ===== */
.panel {
  display: none;
}

.panel.active { display: block; }

.upgrade-item, .sword-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,255,180,0.1);
  border-radius: 10px;
}

/* B안 카드: 위(정보+버튼) 한 줄 + 아래(재료 비용) 분리 줄. card-item은 세로 배치. */
.upgrade-item, .sword-item.card-item {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.up-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

/* 카드 하단 재료 비용 줄 — 아이콘+개수 칩, "필요 재료" 문구 없이 바로 나열 */
.cost-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(120,255,180,0.1);
}
.cost-row:empty { display: none; }
.cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 13px;
  color: #c9e6a8;              /* 충분: 상단 재료바 톤 */
  white-space: nowrap;
}
.cost-chip img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(120,255,180,0.12);
}
/* 부족한 재료: 붉게·흐리게 비활성 느낌 (모자란 게 한눈에) */
.cost-chip.lack {
  color: #e06a5a;
  opacity: 0.6;
}
.cost-chip.lack img {
  filter: grayscale(0.7) brightness(0.75);
}

.sword-item.locked {
  opacity: 0.45;
}

.sword-item.equipped {
  border-color: rgba(255,206,61,0.6);
  background: rgba(255,206,61,0.08);
}

.equipped-tag {
  color: #ffce3d;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid rgba(255,206,61,0.5);
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 4px;
}

.sword-btn {
  flex-shrink: 0;
  min-width: 64px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #3fbf6f, #268a4d);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: 0 2px 0 #1c6b3c;
  white-space: nowrap;
}

.sword-btn:disabled {
  background: #3a4a42;
  color: #6e8578;
  box-shadow: 0 2px 0 #263129;
  cursor: not-allowed;
}

/* ===== 상점 섹션 헤더 ===== */
.shop-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #7fffb0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 2px 8px;
}

.sword-btn.equip-btn {
  background: linear-gradient(180deg, #4a9fff, #1f6fd6);
  box-shadow: 0 2px 0 #164e99;
}

.sword-btn.equipped-btn {
  background: rgba(255,206,61,0.2);
  color: #ffce3d;
  box-shadow: none;
}

/* 조합 패널: 조합 버튼(재료 소모)은 기존 초록색 그대로, 사용 버튼(즉시 버프)만 폭을 줄이고 보라색으로 구분 */
.sword-btn.use-btn {
  width: 56px;
  background: linear-gradient(180deg, #b478ff, #7a3fd6);
  box-shadow: 0 2px 0 #5a2ba3;
}

.sword-btn.use-btn:disabled {
  background: #3a4a42;
  color: #6e8578;
  box-shadow: 0 2px 0 #263129;
}

.up-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(120,255,180,0.1);
  border: 1px solid rgba(120,255,180,0.25);
  color: #7fffb0;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.up-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.up-body { flex: 1; min-width: 0; }

.up-title {
  color: #eafff0;
  font-size: 14px;
  font-weight: 700;
}

.up-desc {
  color: #8fae9d;
  font-size: 11px;
  margin-top: 2px;
}

.up-level {
  color: #59d98e;
  font-size: 11px;
  margin-top: 2px;
  font-weight: 700;
}

.up-buy-btn {
  flex-shrink: 0;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #3fbf6f, #268a4d);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: 0 2px 0 #1c6b3c;
  transition: transform 0.06s ease;
  white-space: nowrap;
}

.up-buy-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #1c6b3c;
}

.up-buy-btn:disabled {
  background: #3a4a42;
  color: #6e8578;
  box-shadow: 0 2px 0 #263129;
  cursor: not-allowed;
}

/* ===== 정보 패널 ===== */
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #cdeedd;
  font-size: 13px;
}

/* 정보 패널: 스킬 안내 섹션 */
.info-section-title {
  margin: 16px 0 8px;
  color: #7fffb0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.skill-info-meta {
  font-size: 11px;
  color: #8fb8a0;
  font-weight: 500;
  margin-left: 4px;
}

/* ===== 무림 고수 대결 HUD ===== */
#duelHud {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  display: none;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 41;
  pointer-events: none;
}

#duelHud.show { display: flex; }

.duel-side {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f0e8d8;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.duel-wounds {
  letter-spacing: 3px;
  color: #ffd9a0;
}

#resetBtn {
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  background: rgba(255,80,80,0.15);
  border: 1px solid rgba(255,80,80,0.4);
  color: #ff8a8a;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

/* 테스트: 레벨·강화 프리셋 그리드 (50렙 단위) */
#testLvGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 14px;
}

#testLvGrid button {
  padding: 9px 0;
  background: rgba(120,180,255,0.12);
  border: 1px dashed rgba(120,180,255,0.45);
  color: #9cc4ff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

/* 스크롤바 최소화 */
.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-thumb { background: rgba(120,255,180,0.3); border-radius: 4px; }

/* 레벨업 플래시 */
#app.levelup-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.5), transparent 70%);
  pointer-events: none;
  animation: flashOut 0.5s ease-out forwards;
  z-index: 40;
}
@keyframes flashOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* 레벨업 배너 */
#levelupBanner {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  z-index: 50;
  color: #fff3b0;
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 0 16px rgba(255,200,60,0.9), 0 3px 6px rgba(0,0,0,0.7);
  opacity: 0;
  pointer-events: none;
  text-align: center;
}
#levelupBanner.show {
  animation: levelupPop 1.1s ease forwards;
}
@keyframes levelupPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-6deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(2deg); }
  35% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1) translateY(-20px); }
}

/* ===== 배경음악 토글 ===== */
#bgmToggle {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 30;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(120,255,180,0.25);
  background: rgba(10, 22, 17, 0.82);
  backdrop-filter: blur(4px);
  color: #cdeedd;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#bgmToggle:active {
  transform: scale(0.92);
}
#bgmToggle.muted {
  opacity: 0.35;
  color: #7a9a8a;
  text-decoration: line-through;
}

/* 산중 재배 헤더 옆 공용 예약 카운트 */
#plantQueueHeader {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: #9dc7a8;
  letter-spacing: 0.5px;
}

/* 예약 곁대나무 스폰 표시 — 콤보 바로 아래 "+N그루" (1초 후 사라짐) */
#plantSpawnText {
  display: block;
  margin-top: 3px;
  font-family: "AppleMyungjo", "Nanum Myeongjo", "Songti SC", "Noto Serif KR", serif;
  font-size: 24px;
  font-weight: 900;
  color: #8fe6a0; /* 밝은 새싹 연두 — 어두운 외곽선으로 낮밤 모두 대비 확보 */
  letter-spacing: 1px;
  text-shadow: 0 0 4px rgba(10, 26, 16, 0.95), 0 1px 3px rgba(10, 26, 16, 0.9), 0 0 10px rgba(90, 200, 120, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
#plantSpawnText.show { opacity: 1; }
#plantSpawnText.bump { animation: comboBump 0.22s ease; }

/* ===== 무공 수련 (정보 패널 상단) ===== */
#artList { margin-bottom: 12px; }

.art-stage {
  margin-left: 6px;
  font-size: 12px;
  color: #e4d290; /* 경지 금빛과 동일 톤 */
  font-weight: 700;
}

/* 성 진행 점 10개 — 채워진 성은 금빛 */
.art-pips { display: flex; gap: 4px; margin: 5px 0 4px; }
.art-pips i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(228,210,144,0.25);
}
.art-pips i.on {
  background: #e4d290;
  border-color: #e4d290;
  box-shadow: 0 0 4px rgba(228,210,144,0.5);
}

#artTrainBtn { line-height: 1.25; }

/* 완성 비급 — 한 줄 요약 목록 */
.art-done-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  margin-top: 6px;
  border-radius: 8px;
  background: rgba(120,255,180,0.06);
  border: 1px solid rgba(120,255,180,0.12);
  font-size: 12px;
}
.art-done-name { color: #e4d290; font-weight: 700; white-space: nowrap; }
.art-done-eff { color: #b9d8c4; text-align: right; }

/* 다음 비급 잠김 안내 */
.art-next-row {
  margin-top: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #8fa596;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
}

/* 승단 성공/실패 피드백 */
@keyframes artSuccessGlow {
  0% { box-shadow: 0 0 0 rgba(228,210,144,0); }
  30% { box-shadow: 0 0 18px rgba(228,210,144,0.85); }
  100% { box-shadow: 0 0 0 rgba(228,210,144,0); }
}
@keyframes artFailShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
#artCurrent.art-success, #honeCard.art-success { animation: artSuccessGlow 0.9s ease; }
#artCurrent.art-fail, #honeCard.art-fail { animation: artFailShake 0.4s ease; }

/* 승단 뜸들이기 — 다음 성 핍이 금빛으로 두근거린다 */
@keyframes artPipRoll {
  0%, 100% { background: rgba(255,255,255,0.14); box-shadow: none; }
  50% { background: #e4d290; box-shadow: 0 0 6px rgba(228,210,144,0.8); }
}
.art-pips i.rolling { animation: artPipRoll 0.45s ease infinite; }

/* 판정 도장 — 무협 낙관처럼 비스듬히 쾅 */
.art-stamp {
  position: absolute;
  right: 84px;
  top: 50%;
  transform: translateY(-50%) rotate(-12deg) scale(1);
  font-family: "AppleMyungjo", "Nanum Myeongjo", "Songti SC", "Noto Serif KR", serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 4px;
  padding: 4px 10px;
  border: 3px solid currentColor;
  border-radius: 6px;
  pointer-events: none;
  animation: artStampIn 2.4s ease forwards;
}
.art-stamp.ok { color: #e4d290; text-shadow: 0 0 8px rgba(228,210,144,0.6); }
.art-stamp.no { color: #b0503f; }
@keyframes artStampIn {
  0% { opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(2.2); }
  10% { opacity: 1; transform: translateY(-50%) rotate(-12deg) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(1); }
}
#artCurrent, #honeCard { position: relative; overflow: visible; }

/* 실패 시 카드가 잠깐 어두워진다 */
#artCurrent.art-fail, #honeCard.art-fail { animation: artFailShake 0.4s ease; filter: brightness(0.8); transition: filter 0.15s; }
#artCurrent:not(.art-fail), #honeCard:not(.art-fail) { filter: none; transition: filter 0.6s ease; }


/* 무기 연마 +N — 상점 검 이름 옆 금빛 표기 */
.hone-plus { color: #e4d290; font-weight: 700; font-size: 12px; }

/* 연마 티어색 — 검 아이콘 배경이 강화도 따라 물든다 (상점·연마 카드 공용) */
.up-icon.hone-t1 { background: rgba(96,150,210,0.22); border-color: rgba(96,150,210,0.55); }
.up-icon.hone-t2 { background: rgba(70,190,160,0.24); border-color: rgba(70,190,160,0.6); }
.up-icon.hone-t3 { background: rgba(160,110,220,0.26); border-color: rgba(160,110,220,0.62); }
.up-icon.hone-t4 { background: rgba(216,80,60,0.28); border-color: rgba(216,80,60,0.65); }
.up-icon.hone-t5 {
  background: rgba(228,210,144,0.3);
  border-color: #e4d290;
  box-shadow: 0 0 8px rgba(228,210,144,0.55);
  animation: honeMaxGlow 2.2s ease-in-out infinite;
}
@keyframes honeMaxGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(228,210,144,0.35); }
  50% { box-shadow: 0 0 11px rgba(228,210,144,0.75); }
}

/* 연마 +N 숫자·카드 타이틀도 티어색 */
.hone-plus.hone-t1, #honeTitle.hone-t1 { color: #7fb0e0; }
.hone-plus.hone-t2, #honeTitle.hone-t2 { color: #5fd0b4; }
.hone-plus.hone-t3, #honeTitle.hone-t3 { color: #b98ae6; }
.hone-plus.hone-t4, #honeTitle.hone-t4 { color: #e0705c; }
.hone-plus.hone-t5, #honeTitle.hone-t5 { color: #e4d290; text-shadow: 0 0 6px rgba(228,210,144,0.5); }

/* 무공 발동 로그 — 좌측 하단, 세로 먹글씨 기둥이 가로로 최대 3열 (최신이 왼쪽, 옛것이 오른쪽으로 밀린다) */
#procLog {
  position: absolute;
  left: 12px;
  bottom: 118px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 7px;
  pointer-events: none;
  z-index: 15;
}
.proc-log-item {
  writing-mode: vertical-rl;
  font-family: "AppleMyungjo", "Nanum Myeongjo", "Songti SC", "Noto Serif KR", serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 5px;
  color: #14120e;
  text-shadow: 0 0 3px rgba(243,239,228,0.95), 0 0 6px rgba(243,239,228,0.8), 0 1px 3px rgba(20,18,14,0.35);
  opacity: 0;
  transform: translateX(16px);
  animation: procLogIn 0.28s ease forwards;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
/* 캐릭터 쪽(오른쪽)에서 미끄러져 들어와, 스러질 땐 왼쪽으로 흘러가며 사라진다 */
.proc-log-item.fade { opacity: 0 !important; transform: translateX(-16px) !important; }
@keyframes procLogIn {
  to { opacity: 0.92; transform: translateX(0); }
}

/* 상점 검 카드의 연마 능력치 줄 — 금빛으로 따로 명시 */
.hone-stat { color: #e4d290 !important; }

/* 연마 게이지 — 숫돌질이 차오르고, 다 차면 판정 */
#honeGauge {
  margin-top: 6px;
  height: 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(228,210,144,0.25);
  overflow: hidden;
}
#honeGauge i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b8912f, #e4d290);
}

/* 회심 플로터 — 누적 데미지 위로 황금 먹물이 떠올랐다 스민다 */
#critFloat {
  position: absolute;
  left: 50%;
  top: -10px;
  z-index: 6; /* 본 데미지 숫자 위로 — 겹쳐도 회심이 앞에 선다 */
  transform: translateX(-50%);
  font-family: "AppleMyungjo", "Nanum Myeongjo", "Songti SC", "Noto Serif KR", serif;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #8f6a10; /* 진한 황금먹 — 밝은 종이 위에서도 읽힌다 */
  -webkit-text-stroke: 0.4px rgba(60,42,6,0.5);
  text-shadow:
    0 0 3px rgba(255,240,200,0.9),
    0 0 8px rgba(223,174,74,0.55),
    0 1px 2px rgba(60,40,5,0.5);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
#critFloat.show { animation: critFloatRise 0.95s ease forwards; }
@keyframes critFloatRise {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.9); }
  22% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.06); }
  62% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.98); }
}