/* ==========================================================================
   Witch Botanical Vine & Thorn Digits (0~9) Stylesheet
   마녀서버 (MANYUE 2.0) 심연의 마법 덩굴 · 가시 줄기 · 야광 약초 숫자(0~9) 스타일시트
   ========================================================================== */

/* 고전 세리프(나눔명조) 로드 — 유아틱한 둥근 손글씨 배제, 무게감 있는 다크 판타지 명조체 적용 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700;800&display=swap');

/* 1. 마법 덩굴 숫자 행 컨테이너 */
.wood-digit-row,
.witch-vine-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  vertical-align: middle;
  line-height: 1;
}

/* 2. 개별 자릿수 슬롯 */
.wood-digit-slot,
.witch-digit-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform-origin: 50% 85%;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 매초 숫자가 바뀔 때 대지에서 마법 덩굴이 돋아나며 수액이 빛나는 발아(Sprout) 애니메이션 */
.witch-digit-slot.is-vine-sprout {
  animation: witchVineSprout 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes witchVineSprout {
  0% {
    transform: translateY(4px) scaleY(0.82) scaleX(0.92);
    filter: brightness(1.65) saturate(1.35);
  }
  65% {
    transform: translateY(-1px) scaleY(1.04) scaleX(1.02);
    filter: brightness(1.2);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* 3. 마법 가시 덩굴 & 약초 잎사귀 0~9 SVG 글리프 */
.wood-digit-svg,
.witch-vine-svg {
  display: block;
  width: 35px;
  height: 50px;
  overflow: visible;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 8px rgba(16, 185, 129, 0.55))
          drop-shadow(0 0 16px rgba(121, 40, 202, 0.4));
  transition: filter 0.25s ease, transform 0.25s ease;
  user-select: none;
  pointer-events: none;
}

/* 덩굴 주변 야광 마법 포자(Spore) 은은한 호흡 */
.witch-vine-spore {
  animation: witchSporePulse 2.4s ease-in-out infinite alternate;
}

@keyframes witchSporePulse {
  0% { opacity: 0.45; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.25); }
}

/* 마우스 호버 시 약초 수액과 잎사귀 야광 증폭 */
.home-count-cell:hover .witch-vine-svg {
  transform: translateY(-2px) scale(1.05);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.98))
          drop-shadow(0 0 13px rgba(52, 211, 153, 0.88))
          drop-shadow(0 0 22px rgba(168, 85, 247, 0.65));
}

/* 4. 초(Secs) 단위 전용: 황금 가시 덩굴 & 핏빛 맨드레이크 글로우 */
.wood-digit-svg.is-accent,
.witch-vine-svg.is-accent {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 10px rgba(245, 158, 11, 0.78))
          drop-shadow(0 0 18px rgba(220, 38, 38, 0.45));
}

.home-count-cell.is-accent:hover .witch-vine-svg.is-accent {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.98))
          drop-shadow(0 0 15px rgba(254, 240, 138, 0.95))
          drop-shadow(0 0 25px rgba(220, 38, 38, 0.75));
}

/* 5. 카운트다운 셀(마녀의 약초학 온실 & 고대 석판) 테마 연출 */
.home-count-cell {
  position: relative;
  overflow: hidden;
  border-radius: 8px !important;
  padding: 10px 6px 8px !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(16, 185, 129, 0.16) 0%, rgba(121, 40, 202, 0.14) 52%, transparent 75%),
    linear-gradient(180deg, rgba(16, 24, 22, 0.96) 0%, rgba(9, 7, 18, 0.98) 100%) !important;
  border: 1px solid rgba(52, 211, 153, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(167, 243, 208, 0.16),
    inset 0 0 16px rgba(6, 78, 59, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(16, 185, 129, 0.18) !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* 셀 모서리 미세 덩굴 각인 포인트 */
.home-count-cell::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.45), transparent);
  pointer-events: none;
}

.home-count-cell.is-accent {
  background:
    radial-gradient(circle at 50% 28%, rgba(245, 158, 11, 0.22) 0%, rgba(185, 28, 28, 0.14) 55%, transparent 78%),
    linear-gradient(180deg, rgba(32, 18, 14, 0.96) 0%, rgba(14, 7, 14, 0.98) 100%) !important;
  border-color: rgba(245, 158, 11, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.25),
    inset 0 0 18px rgba(180, 83, 9, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.85),
    0 0 16px rgba(245, 158, 11, 0.28) !important;
}

.home-count-cell.is-accent::before {
  background: linear-gradient(90deg, transparent, rgba(253, 224, 71, 0.65), transparent);
}

/* 카운트다운 숫자 래퍼 (.n.is-wood) */
.home-count-cell .n.is-wood {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  font-size: 0;
  line-height: 1;
}

/* 6. 일 · 시간 · 분 · 초 단위 텍스트(.u) — 중후한 고전 세리프(Nanum Myeongjo) & 약초 잎사귀 프레임 */
.home-count-cell .u {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px !important;
  font-family: 'Nanum Myeongjo', 'Batang', 'Georgia', serif !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  color: #a7f3d0 !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(16, 185, 129, 0.65) !important;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* 단위 양옆에 마법 풀잎/가시 마름모 장식 */
.home-count-cell .u::before,
.home-count-cell .u::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 2px;
  border-radius: 50% 0 50% 0;
  background: #34d399;
  box-shadow: 0 0 5px rgba(52, 211, 153, 0.8);
}

.home-count-cell .u::before {
  transform: rotate(-25deg);
}

.home-count-cell .u::after {
  transform: rotate(25deg);
}

.home-count-cell:hover .u {
  color: #ecfdf5 !important;
}

.home-count-cell.is-accent .u {
  color: #fde047 !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(245, 158, 11, 0.85) !important;
}

.home-count-cell.is-accent .u::before,
.home-count-cell.is-accent .u::after {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.9);
}

/* 7. 모바일 화면 반응형 최적화 */
@media (max-width: 640px) {
  .wood-digit-svg,
  .witch-vine-svg {
    width: 27px;
    height: 39px;
  }
  .wood-digit-row,
  .witch-vine-row {
    gap: 2px;
  }
  .home-count-cell .n.is-wood {
    min-height: 39px;
  }
  .home-count-cell .u {
    font-size: 0.7rem !important;
  }
}

@media (max-width: 380px) {
  .wood-digit-svg,
  .witch-vine-svg {
    width: 22px;
    height: 32px;
  }
  .wood-digit-row,
  .witch-vine-row {
    gap: 1px;
  }
  .home-count-cell .n.is-wood {
    min-height: 32px;
  }
  .home-count-cell .u {
    font-size: 0.65rem !important;
  }
}