body {
      background-color: var(--wx-bg);
      color: #fff;
      transition: background-color 0.3s, color 0.3s;
  }
  body.dark-mode {
    background-color: var(--wx-bg);
    color: #fff;
    /* 網點（halftone）動漫紋理 */
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
  }
  .mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--wx-accent2);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }
  .mode-toggle:hover {
    background-color: var(--wx-accent2-d);
  }
    h1 {
      color: #333;
      margin: 20px 0;
    }

    .menu-buttons {
      position: sticky;
      top: var(--wx-nav-h, 54px); /* 吸附在全域導覽列正下方，捲動時固定 */
      z-index: 999;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      margin: 0 0 12px;
      background: rgba(13, 15, 26, 0.92);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid var(--wx-border, #1e2540);
    }

    .menu-button {
      background: var(--wx-accent2);
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 10px 15px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.3s ease;
    }

    .menu-button:hover {
      background: var(--wx-accent2-d);
    }
    
    /* 側邊選單 */
    .side-menu {
      position: fixed;
      top: var(--wx-nav-h, 54px); /* 從全域導覽列下方開始，避免被頁首擋住關閉鈕 */
      left: -450px; /* 初始位置在視窗外 */
      width: 450px;
      height: calc(100% - var(--wx-nav-h, 54px));
      max-width: 450px; /* 限制最大寬度 */
      max-height: calc(100vh - var(--wx-nav-h, 54px)); /* 限制最大高度 */
      overflow-y: auto;
      background: #fff;
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
      transition: left 0.3s ease; /* 添加滑動動畫 */
      padding: 20px;
      box-sizing: border-box;
      z-index: 999;
    }
    
    .side-menu.open {
      left: 0; /* 滑動進入視窗 */
    }
    
    /* 主內容 */
    .main-content {
      transition: transform 0.3s ease; /* 添加滑動動畫 */
    }
    
    .main-content.shifted {
      transform: translateX(450px); /* 向右移動 300px */
    }
    body.dark-mode .side-menu {
      background: var(--wx-surface); /* 深色背景 */
      color: #fff; /* 白色文字 */
    }

    body.dark-mode .side-menu h2,
    body.dark-mode .side-menu p {
      color: #fff; /* 白色文字 */
    }

    body.dark-mode .side-menu button {
      background: #444; /* 深色按鈕背景 */
      color: #fff; /* 白色文字 */
    }

    body.dark-mode .side-menu button:hover {
      background: #555; /* 更深的背景顏色 */
    }
    .deck-container {
      display: flex;
      flex-wrap: wrap; /* 允許換行 */
      gap: 20px; /* 卡片之間的間距 */
      max-height: 400px; /* 限制最大高度 */
      margin-top: 10px;
      height: calc(80% - 100px); /* 自動填滿側邊選單的高度，減去標題和按鈕的空間 */
      overflow-y: auto; /* 如果內容超出容器，允許垂直滾動 */
      box-sizing: border-box; /* 確保內邊距計算在內 */
      padding-bottom: 150px; /* 新增這行 */
    }

    .deck-card {
      position: relative;
      width: 70px; /* 固定卡片寬度 */
      height: 120px; /* 固定卡片高度 */
      margin: 5px; /* 卡片之間的間距 */
    }

    .deck-card img {
      width: 50px;
      height: 70px;
      object-fit: cover;
      border-radius: 5px;
    }

    .deck-card .remove-btn {
      margin-left: auto;
      background: var(--wx-accent);
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 5px 10px;
      cursor: pointer;
    }

    .close-menu {
      margin-top: 20px;
      background: var(--wx-accent2);
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 10px 15px;
      cursor: pointer;
    }
    .filter-container {
      position: fixed; /* 固定在視窗內 */
      top: var(--wx-nav-h, 54px); /* 從全域導覽列下方開始，避免被頁首擋住關閉鈕 */
      left: -350px; /* 初始位置在視窗外 */
      width: 350px;
      height: calc(100% - var(--wx-nav-h, 54px));
      background: #fff;
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
      transition: left 0.3s ease; /* 添加滑動動畫 */
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto;
      z-index: 999; /* 確保在其他元素上方 */
    }
    .filter-container.open {
      left: 0; /* 滑動進入視窗 */
    }
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 998; /* 在篩選欄下方 */
      display: none; /* 預設隱藏 */
    }
    #overlay.active {
      display: block; /* 顯示遮罩 */
    }
    
    .filter-container label {
      margin-right: 10px;
      font-size: 16px;
    }
    .filter-container select {
      margin-right: 20px;
      padding: 5px;
      font-size: 16px;
    }
    .filter-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
    }
    /* 篩選工具列：已套用數 + 重置 */
    .filter-toolbar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; margin: 8px 0 14px;
    }
    .filter-applied-count { font-size: 13px; color: var(--wx-gold); font-weight: 700; }
    .filter-reset-btn {
      padding: 5px 12px; font-size: 13px; border-radius: 6px; cursor: pointer;
      background: transparent; border: 1px solid var(--wx-accent); color: var(--wx-accent);
    }
    .filter-reset-btn:hover { background: var(--wx-accent); color: #fff; }
    /* 分組標題可折疊：加箭頭指示 */
    #filter-container h3 { user-select: none; }
    #filter-container h3::before { content: '▾ '; font-size: 11px; color: #94a3b8; }
    #filter-container h3.collapsed::before { content: '▸ '; }

    .filter-buttons button {
      background: var(--wx-accent2);
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 10px 15px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease;
    }
    
    .filter-buttons button:hover {
      background: var(--wx-accent2-d);
    }
    .filter-buttons button.selected {
      background: var(--wx-gold); /* 選中後的顏色，金黃色 */
      color: #333; /* 黑色文字 */
      border: 2px solid var(--wx-gold); /* 添加橙色邊框以突出顯示 */
    }
    body.dark-mode .filter-container {
      background: var(--wx-surface); /* 深色背景 */
      color: #fff; /* 白色文字 */
    }
    
    body.dark-mode .filter-buttons button {
      background: #444; /* 深色按鈕背景 */
      color: #fff; /* 白色文字 */
    }
    
    body.dark-mode .filter-buttons button:hover {
      background: #555; /* 更深的背景顏色 */
    }
/* 卡片容器 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  transition: transform 0.3s ease, width 0.3s ease; /* 添加動畫效果 */
}

/* 卡片 */
.card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: calc(25% - 15px); /* 每行五張卡片，減去間距 */
  max-width: 180px; /* 設置最大寬度 */
  padding: 15px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s, color 0.3s;
  cursor: pointer;
}
.card-container.shifted {
  width: calc(100% - 400px); /* 減去側邊選單的寬度 */
}
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    /* 缺貨標（左上角，避開右上角的數量圈） */
    .card-soldout-badge {
      position: absolute;
      top: 6px;
      left: 6px;
      background-color: var(--wx-accent);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      z-index: 5;
    }
    .card img {
      max-width: 100%;
      border-radius: 8px;
    }
    .card h2 {
      font-size: 20px;
      margin: 10px 0;
    }
    .card p {
      font-size: 16px;
      margin: 5px 0;
    }
    /* modal 內第二價格（悠悠亭與 Hobby 同一行，綠色強調） */
    .hobby-price {
      color: var(--wx-green);
      font-weight: 600;
      white-space: nowrap;
    }
    body.dark-mode .hobby-price {
      color: var(--wx-green);
    }
    .price-soldout {
      color: var(--wx-accent);
      font-weight: 700;
      font-size: 12px;
      margin-left: 3px;
    }
    /* 列表卡片價格：無外框雙欄，店名小灰字在上、價格粗體在下，左右兩家對等並排。 */
    .price-row {
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
      gap: 4px;
      margin-bottom: 10px;
    }
    .price-chip {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .price-shop {
      font-size: 11px;
      line-height: 16px;
      height: 16px;
      color: #8b90a0;
      letter-spacing: 0.5px;
      margin-bottom: 1px;
    }
    .price-val {
      font-size: 16px;
      line-height: 24px;
      font-weight: 700;
      white-space: nowrap;
    }
    .price-hobby .price-val { color: var(--wx-green); }
    body.dark-mode .price-hobby .price-val { color: var(--wx-green); }
    /* 夜間模式卡片樣式 */
    body.dark-mode .card {
      background: var(--wx-surface);
      color: #fff;
      box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    }
    body.dark-mode .card:hover {
      box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
    }
    .modal {
    display: none; /* 預設隱藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 背景遮罩 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    z-index: 10000; /* 確保彈出框在最上層 */
  }
  .modal-content {
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    width: fit-content;
    max-width: 95vw;
    height: min(78vh, 560px); /* 固定高度：每張卡同一尺寸；右側文字過長時在框內捲動，不再撐高彈窗 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    gap: 14px;
    position: relative; /* 為關閉按鈕提供定位基準 */
    transition: background-color 0.3s, color 0.3s;
  }
  body.dark-mode .modal-content {
    background: var(--wx-surface); /* 深色背景 */
    color: #fff; /* 白色文字 */
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.3); /* 夜间模式的阴影 */
  }
  body.dark-mode .modal-left {
    background: #444; /* 深色背景 */
  }
    body.dark-mode .modal-right {
    background: var(--wx-surface); /* 深色背景 */
    color: #fff; /* 白色文字 */
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2); /* 夜間模式的陰影 */
  }
  .modal-left {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    border-radius: 12px;
    padding: 8px;
    perspective: 800px;
  }
  .modal-left img {
    height: auto;
    width: auto;
    aspect-ratio: 600 / 837; /* 卡圖固定比例：設定高度當下就能算出寬度，不必等圖片載入完才撐寬（避免橫向閃動） */
    max-width: none;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    cursor: pointer;
    will-change: transform;
  }
  .modal-right {
    flex: none;
    width: 410px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 內容由上往下排，短內容不要被 space-between 撐開大間隙 */
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* 文字過長時在右框內捲動，維持彈窗固定高度 */
    min-height: 0;
  }
  .modal-right h3 {
    font-size: 20px;
    margin-bottom: 8px;
  }
  .modal-right p {
    font-size: 14px;
    margin: 4px 0;
  }
  /* 稀有度/特徵、顏色/產生 兩兩並排，省下兩行高度 */
  .modal-right .modal-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 0;
  }
  .modal-right .modal-grid2 p {
    min-width: 0; /* 允許在格內換行，長特徵不會把欄位撐爆 */
    overflow-wrap: anywhere;
  }
  .modal-right hr {
    margin: 12px 0;
    border: none;
    border-top: 1px solid #ddd;
  }
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--wx-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 35px; /* 確保寬度和高度相等 */
    height: 35px; /* 確保寬度和高度相等 */
    display: flex; /* 使用 flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 20px; /* 調整文字大小 */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: background 0.3s ease;
  }
  .close-btn:hover {
    background: var(--wx-accent-d);
  }
  body.dark-mode .close-btn {
  background-color: var(--wx-accent); /* 保持紅色背景 */
  color: #fff; /* 保持白色文字 */
}
  .deck-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}
  /* 組牌側欄控制項（原本散在 HTML 的 inline style 收進來，方便維護＋深色模式統一） */
  .deck-sort-row { display: flex; gap: 10px; margin-bottom: 10px; }
  .deck-sort-btn { padding: 5px 10px; border-radius: 5px; color: #fff; border: none; cursor: pointer; }
  #sort-energy-btn { background: var(--wx-accent2); }
  #sort-original-btn { background: #444; }
  .deck-controls-row { display: flex; align-items: flex-start; gap: 10px; }
  .deck-controls-btns { display: flex; flex-direction: column; gap: 10px; }
  #deck-name-input,
  #deck-idea-input {
    padding: 5px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
  }
  #deck-idea-input { height: 100px; flex: 1; }
  #save-deck-btn, #clear-deck-btn { width: 100px; }
  #clear-deck-btn { background: var(--wx-accent); }
  #clear-deck-btn:hover { background: var(--wx-accent-d); }
  /* 側欄摘要：張數 N/50 顏色 + 兩家總價 */
  .deck-count-ok { color: var(--wx-green); font-weight: 800; }
  .deck-count-over { color: #ef4444; font-weight: 800; }
  .deck-count-under { color: var(--wx-gold); font-weight: 800; }
  /* 從側欄縮圖跳過來時，主列表那張卡閃一下高亮 */
  .card.card-flash {
    animation: cardFlash 1.6s ease;
  }
  @keyframes cardFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    15% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.9); }
    60% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.5); }
  }
  /* 頂部「牌組製作」按鈕上的張數徽章（隨時可見） */
  .deck-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.9em;
    font-weight: 800;
    line-height: 1.5;
  }
  .deck-price-yuyu { color: var(--wx-gold); font-weight: 700; }
  .deck-price-hobby { color: var(--wx-green); font-weight: 700; }
  .deck-soldout-note { color: #ef4444; font-size: 0.85em; }
  .deck-controls button {
    background: var(--wx-accent2);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  .deck-controls button:hover {
    background: var(--wx-accent2-d);
  }
  .deck-card {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 150px;
  margin: 10px;
}

.deck-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.deck-card .card-count {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgb(255, 254, 254);
  color: #0c0c0c;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-weight: bold;
}
  .deck-card .remove-btn {
    margin-left: auto;
    background: var(--wx-accent);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
  }
  .hidden {
    display: none;
  }
.add-to-deck-btn,
.remove-from-deck-btn {
  background: var(--wx-accent2);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 30px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  margin: 5px;
  transition: background 0.3s ease;
}

.add-to-deck-btn:hover {
  background: var(--wx-accent2-d);
}

.remove-from-deck-btn {
  background: var(--wx-accent);
}

.remove-from-deck-btn:hover {
  background: var(--wx-accent-d);
}
.card-count-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: var(--wx-accent);
  color: #fff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
  visibility: visible; /* 確保圈圈始終可見 */
}
@keyframes scale-up-down {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5); /* 放大到 1.5 倍 */
  }
  100% {
    transform: scale(1); /* 恢復原大小 */
  }
}

.card-count-indicator.animate {
  animation: scale-up-down 0.3s ease-in-out; /* 動畫持續 0.3 秒 */
}
/* 小螢幕樣式 */
@media (max-width: 768px) {
  body {
    font-size: 14px; /* 調整文字大小 */
  }

  h1 {
    font-size: 18px; /* 調整標題大小 */
    margin: 10px 0; /* 減少間距 */
    text-align: center; /* 居中標題 */
  }

  .menu-buttons {
    /* 沿用桌機的 sticky 工具列，手機僅縮小間距/內距 */
    gap: 5px;
    padding: 6px 10px;
  }

  .menu-button {
    font-size: 14px; /* 調整按鈕文字大小 */
    padding: 5px 10px; /* 減少內邊距 */
    border-radius: 3px; /* 減少圓角 */
  }

  .side-menu {
    width: 100%; /* 側邊選單寬度改為 100% */
    max-width: 360px; /* 限制最大寬度 */
    left: -100%; /* 初始位置在視窗外 */
    padding: 10px; /* 減少內邊距 */
    max-height: 100vh; /* 限制最大高度為視窗高度 */
  }

  .side-menu.open {
    left: 0; /* 滑動進入視窗 */
  }
  /* 牌組控制項：手機上只在側欄開啟時才固定在視窗底部；側欄關閉時隱藏，
     避免 position:fixed escape 出來、浮在卡片列表上。 */
  .deck-controls {
      display: none;
  }
  .side-menu.open .deck-controls {
      display: flex;
      position: fixed; /* 開啟時固定在視窗底部 */
      bottom: 10px;
      left: -10px;
      width: calc(100% - 20px);
      max-width: 100%;
      padding: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  #deck-name-input,
  #deck-idea-input {
      width: 100%; /* 確保寬度填滿父容器 */
      box-sizing: border-box; /* 包括內邊距和邊框 */
  }
  .deck-container {
    max-height: 400px; /* 限制最大高度 */
    max-width: 100%; /* 限制最大寬度 */
    gap: 30px; /* 減少卡片之間的間距 */
    padding: 10px; /* 減少內邊距 */
    height: calc(70% - 30px); /* 調整高度 */
  }

  .deck-card {
    width: 50px; /* 縮小卡片寬度 */
    height: 70px; /* 縮小卡片高度 */
    margin: 5px; /* 減少卡片間距 */
  }

  .deck-card img {
    width: 100%; /* 圖片寬度改為 100% */
    height: auto; /* 自動調整高度 */
  }

  .filter-container {
    width: 100%; /* 篩選欄寬度改為 100% */
    left: -100%; /* 初始位置在視窗外 */
    padding: 10px; /* 減少內邊距 */
  }

  .filter-container.open {
    left: 0; /* 滑動進入視窗 */
  }

  .filter-buttons button {
    font-size: 12px; /* 調整按鈕文字大小 */
    padding: 5px 10px; /* 減少內邊距 */
    border-radius: 3px; /* 減少圓角 */
  }

  .card-container {
    gap: 10px; /* 減少卡片之間的間距 */
    padding: 10px; /* 減少內邊距 */
  }

  .card {
    width: calc(50% - 10px); /* 每行兩張卡片 */
    max-width: 90px; /* 限制最大寬度 */
    padding: 6px; /* 減少內邊距 */
  }

  .card h2 {
    font-size: 13px; /* 調整文字大小 */
    margin: 4px 0; /* 減少間距 */
  }

  .card p {
    font-size: 10px; /* 調整文字大小 */
    margin: 3px 0; /* 減少間距 */
  }

.modal-content {
  display: flex;
  flex-direction: column; /* 改為垂直排列 */
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 800px;
  height: auto; /* 手機維持可變高度（不套桌機的固定高度） */
  max-height: 80%; /* 限制最大高度，避免超出螢幕 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  gap: 20px;
  position: relative; /* 為關閉按鈕提供定位基準 */
  overflow-y: auto; /* 添加垂直滾動功能 */
  transition: background-color 0.3s, color 0.3s;
}
/* 手機：右框不要獨立捲動（整個彈窗已可捲動），避免雙層捲軸 */
.modal-right {
  overflow-y: visible;
}

  .modal-left img {
    max-width: 100%; /* 圖片寬度改為 100% */
    height: auto; /* 自動調整高度 */
  }

  .modal-right {
    padding: 10px; /* 減少內邊距 */
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--wx-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 35px; /* 確保寬度和高度相等 */
    height: 35px; /* 確保寬度和高度相等 */
    display: flex; /* 使用 flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 20px; /* 調整文字大小 */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: background 0.3s ease;
  }

  .add-to-deck-btn,
  .remove-from-deck-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
    margin: 2px;
    align-items: center;        /* 垂直置中 */
    justify-content: center; 
    line-height: 1;             /* 行高設為 1，避免偏移 */
    padding: 0;                 /* 無內邊距 */
  }
  .card-count-indicator {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
    .hidden {
    display: none;
  }

  /* 手機開啟側邊欄/篩選欄時不位移主內容（面板改為全寬覆蓋，避免內容被推出畫面） */
  .main-content.shifted { transform: none; }
  .card-container.shifted { width: 100%; }
}

/* 平板：卡片每行三張，銜接桌機(4-5 張)與手機(2 張)的斷層 */
@media (min-width: 769px) and (max-width: 1024px) {
  .card {
    width: calc(33.333% - 12px);
  }
}

/* ============================================================
   卡表卡片重設計（2026-06-28）：卡框質感 / 顏色柔色 pill
   / 價格區內凹 / +− 左右分。數字徽章維持原位（右上角）。
   ============================================================ */

/* 卡框：微漸層底 + 質感邊框 + 14px 圓角 */
body.dark-mode .card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0)), var(--wx-surface);
  border: 1px solid var(--wx-border);
  border-radius: 14px;
  padding: 16px 14px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* hover：上浮 + 稀有度色光暈 + 卡圖微放大 */
body.dark-mode .card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
}
.card[data-rarity^="SR"]:hover { box-shadow: 0 12px 30px rgba(245,158,11,.28); }
.card[data-rarity^="R"]:not([data-rarity^="SR"]):hover { box-shadow: 0 12px 30px rgba(59,130,246,.28); }
.card img { transition: transform .18s ease; }
.card:hover img { transform: scale(1.03); }

/* 顏色標示 → 柔色 pill（淡底 + 細框 + 彩字，不刺眼） */
.card h2 { font-size: 17px; margin: 12px 0 6px; letter-spacing: .3px; }
/* 稀有度/顏色那行維持單行不換行（pill 變寬後別讓長稀有度 SR★★★ 折行） */
.card p { white-space: nowrap; }
.card .color-text {
  display: inline-block;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  background: rgba(148,163,184,.14);
  border: 1px solid rgba(148,163,184,.4);
  color: #cbd5e1;
}
.color-text[data-color="黃"], .color-text[data-color="黄"] { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.45); color: #fcd34d; }
.color-text[data-color="紅"], .color-text[data-color="赤"] { background: rgba(239,68,68,.14);  border-color: rgba(239,68,68,.45);  color: #fca5a5; }
.color-text[data-color="藍"], .color-text[data-color="青"] { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.45); color: #93c5fd; }
.color-text[data-color="綠"], .color-text[data-color="緑"] { background: rgba(34,197,94,.14);  border-color: rgba(34,197,94,.45);  color: #86efac; }
.color-text[data-color="紫"] { background: rgba(168,85,247,.14); border-color: rgba(168,85,247,.45); color: #c4b5fd; }

/* 價格區：內凹卡片 + 中間分隔線 + 店名小灰大寫 */
.price-row {
  background: rgba(0,0,0,.22);
  border: 1px solid var(--wx-border);
  border-radius: 10px;
  padding: 8px 4px;
  margin: 10px 0 12px;
}
.price-chip + .price-chip { border-left: 1px solid var(--wx-border); }
.price-shop { color: var(--wx-muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.price-val { font-size: 17px; }

/* +/− 按鈕：維持 45px，+ 靠左 / − 靠右（同一排） */
.add-to-deck-btn, .remove-from-deck-btn { box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.add-to-deck-btn      { float: left;  margin: 6px 0 0 18px; }
.remove-from-deck-btn { float: right; margin: 6px 18px 0 0; }
.add-to-deck-btn:hover, .remove-from-deck-btn:hover { transform: translateY(-1px); }

/* 手機：窄欄不適用 float 左右分（會錯位）→ 還原置中小鈕、收窄卡片內距 */
@media (max-width: 768px) {
  body.dark-mode .card { padding: 8px; border-radius: 12px; }
  .add-to-deck-btn, .remove-from-deck-btn { float: none; margin: 2px; }
}

/* 組牌側欄：牌組縮圖左上角「封面星號」（☆ 點擊設封面 / ★ 目前封面） */
.deck-card .deck-cover-star {
  position: absolute; top: 3px; left: 3px; z-index: 6;
  width: 22px; height: 22px; padding: 0; line-height: 1;
  border: none; border-radius: 6px; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #cbd5e1; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.deck-card .deck-cover-star:hover { background: rgba(0, 0, 0, .82); color: var(--wx-gold); transform: scale(1.12); }
.deck-card .deck-cover-star.is-cover { background: var(--wx-gold); color: #1e293b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .4); }