/* ==========================================================================
       🚀 專屬擴充：隨機任務「橫式收放小卡片」專用 CSS (相容白天黑夜模式)
       ========================================================================== */

      /* 隨機任務大外殼卡片 (基礎黑夜模式) */
      .random-quest-card {
        background: var(--glass-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        margin-bottom: 15px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .random-quest-card:hover {
        transform: translateY(-2px);
        border-color: var(--primary-blue);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
      }

      /* 橫式卡片頭部佈局 */
      .quest-card-header {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        gap: 16px;
      }

      /* 左側縮圖框 */
      .quest-main-pic {
        width: 52px;
        height: 52px;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid var(--glass-border);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .quest-img-thumb {
        width: 40px;
        height: 40px;
        object-fit: contain;
        border-radius: 6px;
      }

      /* 標題與基礎資料區 */
      .quest-main-info {
        flex-grow: 1;
      }

      .quest-title-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
      }

      .quest-title {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--text-main);
      }

      .quest-lv-tag {
        color: var(--highlight-yellow);
        font-weight: bold;
        font-size: 14px;
      }

      .quest-sub-row {
        font-size: 13px;
        color: var(--text-muted);
      }

      /* 右側下拉箭頭動畫 */
      .quest-arrow {
        color: var(--text-muted);
        transition: transform 0.3s ease;
        font-size: 16px;
      }

      /* === 展開折疊核心控制 === */
      .quest-card-body {
        max-height: 0;
        overflow: hidden;
        /* ⚙️ 調整：將貝茲曲線改回經典的 ease，讓速度最自然 */
        transition:
          max-height 0.3s ease,
          padding 0.3s ease;
        padding: 0 20px;
      }

      /* 激活展開狀態 */
      .random-quest-card.active {
        border-color: var(--primary-blue);
      }

      .random-quest-card.active .quest-card-body {
        padding-bottom: 20px;
      }

      .random-quest-card.active .quest-arrow {
        transform: rotate(180deg);
        color: var(--primary-blue);
      }

      /* 分隔線 */
      .quest-divider {
        height: 1px;
        background: var(--glass-border);
        margin-bottom: 15px;
      }

      /* 展開後的網格排版 */
      .quest-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      @media (max-width: 600px) {
        .quest-detail-grid {
          grid-template-columns: 1fr;
        }
      }

      /* 內部詳細資料面板 */
      .quest-target-box,
      .quest-reward-box {
        background: rgba(0, 0, 0, 0.15);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        padding: 14px;
      }

      .target-item {
        margin-bottom: 8px;
        font-size: 14px;
        display: flex;
        align-items: center;
      }
      .target-item:last-child {
        margin-bottom: 0;
      }
      .target-label {
        color: var(--text-muted);
        width: 85px;
        flex-shrink: 0;
      }
      .target-value {
        color: var(--text-main);
      }
      .target-value-num {
        color: #338a52;
        font-weight: bold;
      }

      /* 獎勵區排版 */
      .reward-title {
        font-size: 14px;
        color: var(--highlight-yellow);
        font-weight: bold;
        margin-bottom: 10px;
      }

      .reward-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .reward-exp,
      .reward-items {
        font-size: 14px;
        color: var(--text-main);
      }
      .reward-exp span {
        color: var(--primary-blue);
        font-weight: bold;
      }

      .reward-item-tag {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 14px;
        color: var(--text-main);
      }

      #filterContainer .filter-btns {
        display: flex;
        flex-wrap: wrap; /* 按鈕寬度不夠時，讓「按鈕們」自己往下一行掉，而不是擠文字 */
        gap: 8px;
      }
      /* 🎯 徹底解決隨機任務卡片內小標題跳行的設定 */
      .quest-target-box .target-item {
        display: flex;
        align-items: center; /* 讓圖標、文字、與後面的數值完美在同一條水平線上 */
        margin-bottom: 8px; /* 讓每一項保持一點舒適的上下間距 */
      }

      .quest-target-box .target-label {
        white-space: nowrap; /* 🔥 核心：強制「目標怪物：」、「蒐集道具：」絕對不準斷行 */
        min-width: 105px; /* ⚙️ 重點：給予足夠展開 4 個字 + 圖標 + 冒號的黃金寬度 */
        display: inline-flex;
        align-items: center;
        gap: 6px; /* 讓 FontAwesome 圖標與文字之間有一點小空隙，比較美觀 */
        color: var(--text-muted); /* 維持你原本的文字顏色 */
      }

      .quest-target-box .target-value,
      .quest-target-box .target-value-num {
        flex: 1; /* 讓後面的真實內容（如：虎頭金鷹）把剩下的空間撐滿 */
        text-align: left;
      }
      #filterContainer .filter-row {
        display: flex;
        /* ⚙️ 調整：改為對齊頂部，這樣按鈕變多行時，標題依然會釘在第一行 */
        align-items: flex-start;
        flex-wrap: nowrap;
      }

      #filterContainer .filter-label {
        white-space: nowrap;
        min-width: 80px;
        display: inline-block;
        /* ⚙️ 調整：加上一點點上方推距，讓標題字的高度完美對齊按鈕文字 */
        padding-top: 6px;
      }
      /* ==========================================================================
       ☀️ 白天模式完美調校相容 (Light Mode Override)
       ========================================================================== */
      body.light-mode .random-quest-card {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      }
      body.light-mode .quest-main-pic {
        background: rgba(255, 255, 255, 0.911);
      }
      body.light-mode .quest-target-box,
      body.light-mode .quest-reward-box {
        background: rgba(0, 0, 0, 0.03);
      }
      body.light-mode .reward-item-tag {
        background: #ffffff;
      }

/* ==========================================================================
   ☀️ 萬能白天模式適配（Light Mode Override）
   ========================================================================== */

/* 1. 卡片展開後的底色與毛玻璃質感 */
body.light-mode .random-quest-card .quest-card-body,
[data-theme="light"] .random-quest-card .quest-card-body,
.light-theme .random-quest-card .quest-card-body {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  /* 加入分隔線，解決收合與顯示問題 */
  border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* 2. 內部小方框 (目標與獎勵) 的透亮白設計 */
body.light-mode .random-quest-card .quest-target-box,
body.light-mode .random-quest-card .quest-reward-box,
[data-theme="light"] .random-quest-card .quest-target-box,
[data-theme="light"] .random-quest-card .quest-reward-box,
.light-theme .random-quest-card .quest-target-box,
.light-theme .random-quest-card .quest-reward-box {
  background: rgba(255, 255, 255, 0.85) !important; 
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* 3. 讓「目標怪物：」、「蒐集道具：」、「所需數量：」小標題在白天清晰好讀 */
body.light-mode .random-quest-card .target-label,
[data-theme="light"] .random-quest-card .target-label,
.light-theme .random-quest-card .target-label {
  color: #3b5e82 !important; /* 精緻的深鋼藍色 */
  font-weight: bold !important;
}

/* 4. 讓右側的「🎁 任務獎勵」標題也對比度更完美 */
body.light-mode .random-quest-card .reward-title,
[data-theme="light"] .random-quest-card .reward-title,
.light-theme .random-quest-card .reward-title {
  color: #c2410c !important; /* 質感的深暖橘色 */
  font-weight: bold !important;
}

/* 5. 讓真實任務內容（如：虎頭金鷹、經驗值文字）在白天白底下也能清晰呈現 */
body.light-mode .random-quest-card .target-value,
body.light-mode .random-quest-card .reward-exp,
[data-theme="light"] .random-quest-card .target-value,
[data-theme="light"] .random-quest-card .reward-exp,
.light-theme .random-quest-card .target-value,
.light-theme .random-quest-card .reward-exp {
  color: #1f2937 !important; /* 深邃灰黑字，絕對好讀 */
}

/* 6. 讓獎勵物品的小標籤在白天也更加明顯 */
body.light-mode .random-quest-card .reward-item-tag,
[data-theme="light"] .random-quest-card .reward-item-tag,
.light-theme .random-quest-card .reward-item-tag {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  color: #1f2937 !important;
}

/* 白天模式：補齊卡片外框、縮圖與展開區域的層次 */
[data-theme="light"] .random-quest-card {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .random-quest-card:hover,
[data-theme="light"] .random-quest-card.active {
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .quest-main-pic {
  background: #f8fafc;
}
/* 🗺️ 地圖定位按鈕基礎樣式（黑夜） */
.map-location-btn {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff !important;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(3, 105, 161, 0.3);
}

.map-location-btn:hover {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(3, 105, 161, 0.4);
}

/* ☀️ 萬能白天模式適配（確保按鈕字體在白底下依然是白色、好讀） */
body.light-mode .map-location-btn,
[data-theme="light"] .map-location-btn,
.light-theme .map-location-btn {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.2);
}

/* 任務標籤顏色階級 */
.quest-type-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

/* 一般任務：改為舒適的綠色系 */
.tag-common { 
  background: rgba(16, 185, 129, 0.15) !important; 
  color: #059669 !important; 
  border: 1px solid rgba(16, 185, 129, 0.3) !important; 
}
/* 稀有任務：藍 */
.tag-rare { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); }

/* 菁英任務：紫/橘 */
.tag-elite { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }

/* 標題行容器 */
.quest-title-row {
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 10px;
}

/* 道具圖片 40px */
.quest-type-icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
    border-radius: 4px; /* 加個圓角更像遊戲 UI */
}

/* 綠色分隔線 */
.vertical-divider {
    width: 2px;
    height: 28px;
    background-color: #94cfbc; /* 綠色 */
    margin: 0 4px;
    border-radius: 2px;
}