/* ============================================================
   月光下的歸途（浪貓追思）月光森林主題覆蓋層
   載在 rainbow.css 之後，.ml-theme 開頭的規則覆蓋狗頁樣式。
   遵守：連結去底線、alert 無左邊線、按鈕 hover 只加深背景、rem 單位
   ============================================================ */

/* ── 月光色票（覆蓋 :root 變數）── */
.ml-theme {
  --rb-bg-top:      #0d1f1c;         /* 墨綠夜 */
  --rb-bg-bottom:   #12132a;         /* 深夜靛 */
  --rb-gold:        #b8a6e8;         /* 霧紫（強調色） */
  --rb-gold-soft:   #d4c8f5;         /* 柔紫白 */
  --rb-text:        #e9ecff;         /* 月白 */
  --rb-text-dim:    #9d97c0;         /* 霧銀 */
  --rb-card:        rgba(18, 22, 48, 0.88);
  --rb-card-line:   rgba(184, 166, 232, 0.18);

  /* 月光專屬 */
  --ml-moon-white:  #e9ecff;
  --ml-purple:      #b8a6e8;
  --ml-forest:      #0d1f1c;
  --ml-lantern-red: #e0643a;
  --ml-lantern-glow: rgba(230, 140, 60, 0.28);
  --ml-lantern-gold: #f7c45e;
}

/* ── 頁面背景（墨綠夜漸層）── */
.ml-theme {
  background: linear-gradient(
    180deg,
    #0d1f1c 0%,
    #111628 45%,
    #0c1824 100%
  );
}

/* ── 貓咪背景 canvas（z-index 固定在底部）── */
/* 注意：rainbow.css 的 .rainbow-body > *:not(#bgDogs) 選擇器特異性 (1,1,0)
   高於 #bgCats 的 (1,0,0)，會強迫套用 position:relative。
   必須用 !important 才能確保 fixed 定位不被覆蓋。 */
#bgCats {
  position: fixed !important;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0 !important;
  pointer-events: none;
}
.ml-theme > *:not(#bgCats) {
  position: relative;
  z-index: 1;
}

/* ── Header 月光漸層 ── */
.ml-theme .rainbow-header {
  background: linear-gradient(
    180deg,
    rgba(13, 31, 28, 0.98) 0%,
    rgba(13, 31, 28, 0) 100%
  );
}

/* ── 月光英雄區 ── */
#moonCanvas {
  display: block;
  width: 100%;
  height: clamp(22rem, 62vh, 46rem);
  touch-action: manipulation;
}

/* overlay：hint 頂部、bubble 底部，月亮在中間不被遮蓋
   dog 頁預設 flex-end（全部靠底），貓頁用 space-between 差異化 */
.ml-overlay-top {
  justify-content: space-between !important;
  padding-top: 1.2rem !important;
  padding-bottom: 1.8rem !important;
}

/* 月光提示泡泡（覆蓋狗頁深藍底色）*/
.ml-hint {
  background: rgba(13, 31, 28, 0.62) !important;
  color: var(--rb-text-dim) !important;
  border: 1px solid rgba(184, 166, 232, 0.2);
}

/* 撫慰語泡泡月光風 */
.ml-bubble {
  background: rgba(18, 22, 48, 0.88) !important;
  color: var(--ml-moon-white) !important;
  border: 1px solid rgba(184, 166, 232, 0.25);
  box-shadow: 0 0 1.5rem rgba(184, 166, 232, 0.12);
}

/* 貓頁泡泡移到月亮下方：rainbow.css 用 position:absolute;top:1.2rem，
   直接覆蓋 top→auto、bottom 定位，讓泡泡顯示在英雄區底部 */
.ml-theme .rainbow-blessing-bubble {
  top: auto !important;
  bottom: 1.8rem !important;
  transform: translateX(-50%) translateY(0.5rem) !important;
}
.ml-theme .rainbow-blessing-bubble.is-show {
  transform: translateX(-50%) translateY(0) !important;
}

/* ── 空狀態月亮 icon ── */
.ml-moon-icon {
  display: block;
  font-size: 3rem;
  margin-bottom: 0.75rem;
  text-align: center;
}

/* ── 數據看板 月光銀調 ── */
.ml-theme .rainbow-board-card.is-angel .material-icons {
  color: var(--ml-moon-white);
  text-shadow: 0 0 0.8rem rgba(184, 166, 232, 0.7);
}
.ml-theme .rainbow-board-card.is-hope .material-icons {
  color: #a0d4b4;
}

/* ── 縣市地圖 月光銀調 ── */
.ml-theme .rb-county-path:hover,
.ml-theme .rb-county-path:focus {
  stroke: var(--ml-purple);
}
.ml-theme .rb-county-path.is-active {
  stroke: var(--ml-purple);
  filter: drop-shadow(0 0 4px rgba(184, 166, 232, 0.8));
}

/* ── Section title 月光風（覆蓋金色）── */
.ml-theme .rainbow-section-title {
  color: var(--rb-gold-soft);
}

/* ── 月份切換條月光風 ── */
.ml-theme .rainbow-month-select,
.ml-theme .rainbow-month-arrow {
  background: rgba(18, 22, 48, 0.75);
  border-color: rgba(184, 166, 232, 0.25);
  color: var(--rb-text);
}
.ml-theme .rainbow-month-arrow:hover {
  background: rgba(184, 166, 232, 0.12);
}

/* ── 按鈕月光風 ── */
.ml-theme .rainbow-btn.is-primary {
  background: linear-gradient(135deg, #7a60c8 0%, #9d86e0 100%);
  color: #fff;
}
.ml-theme .rainbow-btn.is-primary:hover {
  background: linear-gradient(135deg, #6a51b8 0%, #8d76d0 100%);
  color: #fff;
}
.ml-theme .rainbow-btn {
  border-color: rgba(184, 166, 232, 0.3);
  color: var(--rb-text);
}
.ml-theme .rainbow-btn:hover {
  background: rgba(184, 166, 232, 0.12);
}

/* ── 輸入框月光風 ── */
.ml-theme .rainbow-input {
  background: rgba(18, 22, 48, 0.65);
  border-color: rgba(184, 166, 232, 0.25);
  color: var(--rb-text);
}
.ml-theme .rainbow-input::placeholder {
  color: var(--rb-text-dim);
}
.ml-theme .rainbow-input:focus {
  border-color: rgba(184, 166, 232, 0.6);
  box-shadow: 0 0 0 3px rgba(184, 166, 232, 0.1);
}

/* ── 留言 item 月光風 ── */
.ml-theme .rainbow-light-item {
  background: rgba(18, 22, 48, 0.72);
  border-color: rgba(184, 166, 232, 0.15);
}
.ml-theme .rainbow-light-head .material-icons {
  color: var(--ml-lantern-gold);
}

/* ── 認養牆 dog card 月光風 ── */
.ml-theme .rainbow-dog-card {
  background: rgba(18, 22, 48, 0.82);
  border-color: rgba(184, 166, 232, 0.15);
}

/* ── CTA 文字月光風 ── */
.ml-theme .rainbow-cta {
  color: var(--rb-text-dim);
}

/* ======================================================
   紙燈籠點燈區（完整覆蓋蠟燭樣式）
   ml-lanterns 容器 + .rb-candle → 紙燈籠外形
   ceremony.js 沿用不動，只換 CSS
   ====================================================== */

/* 容器：天燈橫排，對齊底部 */
.ml-theme .rainbow-candles-visual.ml-lanterns {
  align-items: flex-end;
  gap: 0 0.6rem;
  padding-top: 2rem;
  min-height: 5rem;
}

/* 天燈本體（覆蓋蠟燭樣式）
   ceremony.js 設 --h 為 3.3~4.1rem，不改 JS，透過加寬 + 收高 + 球形比例
   讓外形接近孔明燈：圓頂、微鼓腰、底部收口 */
.ml-theme .rb-candle {
  width: 2.1rem;
  height: var(--h, 2.6rem);
  min-height: 2.2rem;
  max-height: 2.9rem;    /* 壓低最大高度，讓比例更接近真實天燈 */
  margin-top: 0;
  /* 圓頂（上端更圓，下端略收窄） */
  border-radius: 50% 50% 38% 38% / 54% 54% 34% 34%;
  background:
    /* 兩條橫向竹骨紋（增加天燈質感） */
    linear-gradient(
      0deg,
      transparent 30%, rgba(170, 70, 25, 0.22) 30%, rgba(170, 70, 25, 0.22) 32%, transparent 32%,
      transparent 64%, rgba(170, 70, 25, 0.18) 64%, rgba(170, 70, 25, 0.18) 66%, transparent 66%
    ),
    /* 主橘紅光暈（模擬內部火光照亮紙面） */
    radial-gradient(
      ellipse at 40% 30%,
      rgba(255, 230, 105, 0.96) 0%,
      rgba(238, 118, 46, 0.90) 50%,
      rgba(162, 50, 28, 0.93) 100%
    );
  box-shadow:
    0 0 1rem var(--ml-lantern-glow),
    0 0 2rem rgba(230, 120, 50, 0.14),
    inset 0 0.5rem 0.7rem rgba(255, 218, 75, 0.22),
    inset 0 -0.3rem 0.5rem rgba(100, 28, 14, 0.28);
  opacity: var(--op, 1);
  transform: scale(var(--sc, 1));
  transform-origin: 50% 100%;
  animation: ml-lantern-sway 3.5s ease-in-out infinite;
  animation-delay: calc(var(--sc, 1) * -1.2s);
}

/* 頂部吊繩 */
.ml-theme .rb-candle::before {
  content: '';
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 0.55rem;
  background: linear-gradient(to top, rgba(240, 185, 60, 0.9), rgba(180, 120, 40, 0.45));
  border-radius: 1px;
}

/* 底部鐵絲環（天燈特徵：收口處的環形竹框）*/
.ml-theme .rb-candle::after {
  content: '';
  position: absolute;
  bottom: 12%;
  left: 14%;
  right: 14%;
  height: 2.5px;
  background: rgba(195, 108, 38, 0.72);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 天燈內光（覆蓋火焰元素，模擬底部火源照亮紙面）*/
.ml-theme .rb-flame {
  position: absolute;
  top: auto;
  left: auto;
  inset: 20% 16%;
  width: auto;
  height: auto;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(255, 250, 185, 0.90) 0%,
    rgba(255, 225, 100, 0.55) 45%,
    transparent 100%
  );
  border-radius: 50%;
  filter: none;
  transform: none;
  transform-origin: center;
  animation: ml-lantern-glow 1.8s ease-in-out infinite alternate;
}

/* 新放一盞天燈：從小淡入 */
.ml-theme .rb-candle-new {
  animation: ml-lantern-in 0.65s ease both, ml-lantern-sway 3.5s ease-in-out 0.65s infinite;
}

@keyframes ml-lantern-sway {
  /* 天燈飄移感：幅度略比蠟燭大、含上下浮動 */
  0%   { transform: scale(var(--sc, 1)) rotate(-4deg) translateY(0px); }
  25%  { transform: scale(var(--sc, 1)) rotate(3deg)  translateY(-6px); }
  55%  { transform: scale(var(--sc, 1)) rotate(-2deg) translateY(-3px); }
  78%  { transform: scale(var(--sc, 1)) rotate(5deg)  translateY(-7px); }
  100% { transform: scale(var(--sc, 1)) rotate(-4deg) translateY(0px); }
}

@keyframes ml-lantern-glow {
  0%   { opacity: 0.52; transform: scale(0.88); }
  100% { opacity: 1;    transform: scale(1.10); }
}

@keyframes ml-lantern-in {
  0% {
    opacity: 0;
    transform: scale(calc(var(--sc, 1) * 0.35)) translateY(14px);
  }
  65% {
    opacity: var(--op, 1);
  }
  100% {
    opacity: var(--op, 1);
    transform: scale(var(--sc, 1)) translateY(0);
  }
}

/* 點燈計數文字月光風 */
.ml-theme .rainbow-candle-count {
  color: var(--rb-gold-soft);
}

/* 已放燈按鈕月光風（維持 is-lit 狀態）*/
.ml-theme .rainbow-candle-btn.is-lit {
  background: rgba(184, 166, 232, 0.16);
  color: var(--rb-text);
}
.ml-theme .rainbow-candle-btn.is-lit:hover {
  background: rgba(184, 166, 232, 0.16);
}

/* 燈籠 icon（emoji）*/
.ml-lantern-icon {
  font-style: normal;
  font-size: 1.1em;
  vertical-align: middle;
}

/* ── Footer 月光風 ── */
.ml-theme .rainbow-footer {
  border-top-color: rgba(184, 166, 232, 0.15);
}

/* ── 完成儀式 emoji 雨（ceremony.js 動態生成，沿用即可）── */
/* ceremony overlay 已在 rainbow.css 定義，色調相容，無需覆蓋 */

/* ======================================================
   RWD：手機優化
   ====================================================== */
@media (max-width: 640px) {
  #moonCanvas {
    height: clamp(18rem, 60vw, 26rem);
  }
  .ml-theme .rb-candle {
    width: 1.75rem;
    max-height: 2.5rem;
  }
}