@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

/* 套用到全域內文 (中英文混雜) */
:root {
  --md-text-font: "Ubuntu", "Noto Sans TC", sans-serif !important;
}

/* --- 2. 亮色模式設定 (荒野地衣風格) --- */
[data-md-color-scheme="default"] {
  /* 配色參考: https://coolors.co/palette/b8b42d-697a21-fffce8-3e363f-dd403a */
  --md-primary-fg-color:        #697a21; /* 橄欖綠 (地衣主色) */
  --md-primary-fg-color--light: #b8b42d; /* 芥末綠 (菌絲生長) */
  --md-primary-fg-color--dark:  #3e363f; /* 深炭紫 */
  
  --md-accent-fg-color:         #dd403a; /* 鏽紅 (乾燥孢子) */
  --fluffy-bg:                  #fffce8; /* 米白 (岩石表面) */
  
  --text-main:                  #3e363f;
  --glow-color:                 rgba(184, 180, 45, 0.3);
}

/* --- 3. 暗色模式設定  --- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #3f3a6e;
  --md-primary-fg-color--light: #7447af;
  --md-primary-fg-color--dark:  #242038;
  
  --md-accent-fg-color:         #615768; /* 淺灰 */
  --fluffy-bg:                  #3d2207;
  
  --text-main:                  #f7ece1;
  --glow-color:                 rgba(144, 103, 198, 0.5);
}

/* 套用到特定的大標題與導航 */
/* 標題與導航欄：強制最粗以對齊 Zilla Slab */
h1, h2, h3, .md-header__title, .md-nav__link {
  font-family: "Audiowide", "Noto Sans TC", sans-serif !important;
  font-weight: 700;
  -webkit-text-stroke: 0.15px currentColor; /* 物理增粗中文字 */
}

/* 套用到導航欄項目 */
.md-nav__link {
  font-family: "Audiowide", "Noto Sans TC", sans-serif !important;
  font-weight: 400;
  font-style: normal;
}

/* 針對上方導覽列 (Tabs) */
.md-tabs__link {
  font-family: "Audiowide", "Noto Sans TC", sans-serif !important;
}

/* 針對麵包屑導覽 (Breadcrumbs) */
.md-breadcrumbs__link {
  font-family: "Audiowide", "Noto Sans TC", sans-serif !important;
}

/* 針對麵包屑中間的箭頭隔開符號 (如果有需要同步字體) */
.md-path__link {
  font-family: "Audiowide", "Noto Sans TC", sans-serif !important;
}

/* 針對左側側邊欄標題 (如有需要) */
.md-nav__link {
  font-family: "Audiowide", "Noto Sans TC", sans-serif !important;
}

.md-nav__title {
  font-family: "Audiowide", "Noto Sans TC", sans-serif !important;
}

.md-copyright {
  font-family: "Audiowide", "Noto Sans TC", sans-serif !important;
}

/* logo start ...*/

/* --- 2. 暗色模式： --- */
[data-md-color-scheme="slate"] .md-logo img {
  /* 關鍵：增加強烈的「外發光」與「白光核心」感，讓紫色菌絲跳出來 */
  filter: 
    drop-shadow(0 0 2px #ffffff) /* 核心發光，確保 icon 邊緣清晰 */
    drop-shadow(0 0 8px var(--md-primary-fg-color)) 
    drop-shadow(0 0 20px var(--md-primary-fg-color)); /* 廣域發光，模擬孢子擴散 */
  
  opacity: 0.95;
  /* 讓暗色 Logo 稍微動起來，像是在黑暗中呼吸 */
  animation: logo-glow-pulse 3s infinite ease-in-out;
}

/* --- 3. 呼吸動畫：讓暗色模式的地衣更有生命力 --- */
@keyframes logo-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 8px var(--md-primary-fg-color));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 15px var(--md-primary-fg-color)) drop-shadow(0 0 25px var(--md-primary-fg-color));
    transform: scale(1.05);
  }
}

/* logo end ...*/

/* donate start ...*/

.support-text{
  color: var(--md-primary-fg-color);
}

.user-highlight{
  opacity: 0.8; 
  color: var(--md-primary-fg-color--light);
}


.donate-btn {
  font-family: "Audiowide", "Noto Sans TC", sans-serif !important;
  margin-top: 10px;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  /* background-color: var(--md-primary-fg-color); */
  color: white;
  transition: background 0.3s, transform 0.2s;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* 按鈕內的主愛心 SVG */
.base-heart {
  width: 35px;             /* 必須設定寬度 */
  margin: 0 auto;
  opacity: 0.8;
  /* fill: var(--md-primary-fg-color--light); */
}

.base-boba {
  width: 8%;             /* 必須設定寬度 */
  margin: 0 auto;
  opacity: 0.8;
  /* fill: var(--md-primary-fg-color--light); */
}

/* 漂浮愛心的樣式 */
.floating-svg {
  position: absolute;
  width: 30px;
  height: 30px;
  fill: var(--md-primary-fg-color--light);
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  /* 動畫：向上移動並放大消失 */
  animation: floatUp 5s ease-out forwards;
}

@keyframes floatUp {
  0% {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  100% {
    transform: translate(calc(-50% + var(--random-x)), -80px) scale(2);
    opacity: 0;
  }
}

/* 平板裝置 (Tablets) - 螢幕寬度小於 1024px */
@media (max-width: 1024px) {
  .base-boba {
    width: 10%; /* 平板上稍微放大 */
  }
}

/* 手機裝置 (Mobile) - 螢幕寬度小於 768px */
@media (max-width: 768px) {
  .base-boba {
    width: 15%; /* 手機上顯著放大，方便閱讀/點擊 */
  }
}

/* 極小螢幕 (Small Mobile) - 螢幕寬度小於 480px */
@media (max-width: 480px) {
  .base-boba {
    width: 20%; 
  }
}

/* donate end ...*/


.__comments {
  margin-top: 10px;
}