/* 裝備蒐藏（js/collect.js；第 457 項（站長 2026-10-29 55.xlsx；「收藏介面換厲害一點的」→ 天堂M 收藏的樣子））：
   上方進度環＋加成小格、頁籤、一組一張卡（圖示格＋階梯）。配色同狩獵圖鑑 huntdex.css（金褐） */
#collect-dex .box { position: relative; }
#collect-dex .bd { gap: 8px; }
#collect-dex .cx-none { padding: 22px 8px; text-align: center; color: #a8997a; font-size: 14px; }
#collect-dex .cx-msg { flex: none; padding: 6px 10px; border: 1px solid #b4483a; border-radius: 6px; background: rgba(58,20,16,.92); color: #ffd8cf; font-size: 13px; }

/* ── 總覽：完成幾組（進度環）＋所有加成 ── */
#collect-dex .cx-hero { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 8px; border: 1px solid rgba(214,170,80,.7); border-radius: 10px;
  background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(214,170,80,.2), transparent 70%), linear-gradient(180deg, rgba(44,34,20,.97), rgba(18,13,8,.97)); }
#collect-dex .cx-ring { flex: none; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#collect-dex .cx-ring > div { position: relative; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; padding-top: 19px; box-sizing: border-box;
  background: conic-gradient(from -90deg, #f8e3a0 0, #d7ae55 calc(var(--p) * 1%), rgba(255,255,255,.1) 0); box-shadow: 0 0 14px rgba(242,215,127,.28); }
#collect-dex .cx-ring > div::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #33281a, #110c07); box-shadow: inset 0 0 8px rgba(0,0,0,.85); }
#collect-dex .cx-ring b, #collect-dex .cx-ring small { position: relative; font-variant-numeric: tabular-nums; }
#collect-dex .cx-ring b { color: #ffe9a8; font-size: 22px; line-height: 1; }
#collect-dex .cx-ring small { color: #a8997a; font-size: 12px; }
#collect-dex .cx-ring em { font-style: normal; color: #e2bd6b; font-size: 12px; letter-spacing: .2em; }
#collect-dex .cx-stats { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
#collect-dex .cx-stat { min-width: 0; display: grid; grid-template-columns: 13px 1fr; align-items: center; column-gap: 3px; row-gap: 1px; padding: 3px 5px 2px;
  border: 1px solid rgba(120,100,70,.35); border-radius: 6px; background: rgba(0,0,0,.35); color: #6f6556; }
#collect-dex .cx-stat i { grid-row: 1; grid-column: 1; display: grid; }
#collect-dex .cx-stat svg { width: 13px; height: 13px; fill: currentColor; }
#collect-dex .cx-stat svg .k { fill: #0f0b07; }
#collect-dex .cx-stat b { grid-row: 1; grid-column: 2; min-width: 0; text-align: right; font-size: 13px; line-height: 16px; font-variant-numeric: tabular-nums; }
#collect-dex .cx-stat span { grid-row: 2; grid-column: 1 / -1; font-size: 10px; line-height: 12px; white-space: nowrap; }
#collect-dex .cx-stat.on { color: #e9c56c; border-color: rgba(226,189,107,.8); background: linear-gradient(180deg, rgba(120,90,34,.6), rgba(40,30,14,.7)); box-shadow: 0 0 7px rgba(242,215,127,.2), inset 0 1px 0 rgba(255,235,170,.18); }
#collect-dex .cx-stat.on b { color: #fff0b8; }
#collect-dex .cx-stat.on span { color: #f2d77f; }

/* ── 頁籤（捲動時黏在上面） ── */
#collect-dex .cx-tabs { position: sticky; top: -8px; z-index: 3; flex: none; display: flex; gap: 4px; margin: 0 -8px; padding: 6px 8px; background: linear-gradient(180deg, rgba(20,15,10,.98), rgba(20,15,10,.92)); }
#collect-dex .cx-tabs button { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 2px; border: 1px solid #5a4630; border-radius: 7px;
  background: #17120c; color: #b9ad98; font: inherit; font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer; }
#collect-dex .cx-tabs button.on { background: linear-gradient(180deg, #4a3a1e, #2a2012); color: #fde68a; border-color: #c9a25a; box-shadow: inset 0 1px 0 rgba(255,230,160,.2); }
#collect-dex .cx-tabs i { font-style: normal; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #b8913f; color: #1c1306; font-size: 11px; line-height: 16px; box-sizing: border-box; }

/* ── 一組一張卡 ── */
#collect-dex .cx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; align-items: start; }
#collect-dex .cx-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 9px 10px 10px; border: 1px solid rgba(150,120,75,.5); border-radius: 10px;
  background: linear-gradient(180deg, rgba(36,28,18,.97), rgba(14,11,8,.97)); }
#collect-dex .cx-card.lit { border-color: rgba(226,189,107,.85); }
#collect-dex .cx-card.full { border-color: #f2d77f; box-shadow: 0 0 0 1px rgba(242,215,127,.35), 0 0 16px rgba(242,215,127,.4), inset 0 0 18px rgba(242,215,127,.12);
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(242,215,127,.16), transparent 70%), linear-gradient(180deg, rgba(46,36,20,.97), rgba(16,12,8,.97)); }
#collect-dex .cx-card.up { animation: cx-flash 1.5s ease-out; }
@keyframes cx-flash { 0% { box-shadow: 0 0 0 0 rgba(255,225,140,0); } 22% { box-shadow: 0 0 28px 6px rgba(255,225,140,.9), inset 0 0 30px rgba(255,225,140,.45); } 100% { box-shadow: 0 0 16px rgba(242,215,127,.4), inset 0 0 18px rgba(242,215,127,.12); } }
#collect-dex .cx-ch { display: flex; align-items: center; gap: 7px; min-height: 22px; }
#collect-dex .cx-gn { color: #d6c7a6; font-size: 15px; letter-spacing: .04em; }
#collect-dex .cx-card.lit .cx-gn { color: #f6dc8c; }
#collect-dex .cx-badge { flex: none; width: 21px; height: 23px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%);
  background: linear-gradient(180deg, #fbe7a6, #b8913f); color: #2a1c05; font-size: 12px; font-weight: 800; }
#collect-dex .cx-frac { margin-left: auto; color: #8d8270; font-size: 13px; font-variant-numeric: tabular-nums; }
#collect-dex .cx-frac b { color: #e8dcc0; }
#collect-dex .cx-card.full .cx-frac b { color: #ffe9a8; }

/* 裝備圖示格（像背包格子）：登錄了＝亮＋強化值角標；缺＝灰；背包裡有能登錄的＝金框閃、點了就登錄 */
#collect-dex .cx-cells { display: flex; flex-wrap: wrap; gap: 6px; }
#collect-dex .cx-cell { position: relative; flex: none; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border: 1px solid #3d3326; border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, #241d15, #0d0a07); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#collect-dex .cx-cell img { max-width: 34px; max-height: 34px; object-fit: contain; image-rendering: pixelated; filter: grayscale(1) brightness(.6); opacity: .45; pointer-events: none; }
#collect-dex .cx-cell.has { border-color: rgba(226,189,107,.75); background: radial-gradient(circle at 50% 38%, #54421f, #17110a 75%); box-shadow: inset 0 0 8px rgba(242,215,127,.18); }
#collect-dex .cx-cell.has img { filter: none; opacity: 1; }
#collect-dex .cx-en { position: absolute; right: 1px; bottom: 1px; padding: 0 3px; border-radius: 4px; background: rgba(0,0,0,.78); color: #f1ead9; font-style: normal; font-weight: 800; font-size: 11px; line-height: 14px; pointer-events: none; }
#collect-dex .cx-en.top { color: #ffd970; }
#collect-dex .cx-cell.can { border-color: #f2d77f; animation: cx-pulse 1.6s ease-in-out infinite; }
#collect-dex .cx-cell.can:not(.has) img { filter: grayscale(.3) brightness(.85); opacity: .85; }
#collect-dex .cx-plus { position: absolute; top: -6px; left: -6px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #e2bd6b 60%, #8a6420); box-shadow: 0 0 6px rgba(255,215,120,.9); pointer-events: none; }
#collect-dex .cx-plus::before, #collect-dex .cx-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; margin: -1px 0 0 -4px; background: #2a1c05; border-radius: 1px; }
#collect-dex .cx-plus::after { transform: rotate(90deg); }
@keyframes cx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,215,127,.5), inset 0 0 6px rgba(242,215,127,.3); } 50% { box-shadow: 0 0 11px 2px rgba(242,215,127,.8), inset 0 0 10px rgba(242,215,127,.45); } }
#collect-dex .cx-cell.sel { outline: 2px solid rgba(255,240,200,.55); outline-offset: 1px; }
#collect-dex .cx-cell.busy { opacity: .55; cursor: default; }
#collect-dex .cx-cell.just { animation: cx-just 1.7s ease-out; }
#collect-dex .cx-cell.just .cx-en { animation: cx-pop .9s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes cx-just { 0% { box-shadow: 0 0 0 0 rgba(255,230,150,.95); background: #b88f3a; } 30% { box-shadow: 0 0 20px 7px rgba(255,225,140,.85); } 100% { box-shadow: inset 0 0 8px rgba(242,215,127,.18); } }
@keyframes cx-pop { 0% { transform: scale(.2) translateY(8px); opacity: 0; } 55% { transform: scale(1.6) translateY(-6px); opacity: 1; } 100% { transform: none; } }
#collect-dex .cx-note { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.35); font-size: 13px; }
#collect-dex .cx-note b { color: #e8dcc0; font-weight: 700; }
#collect-dex .cx-note span { color: #c9b98f; }

/* 各階加成：橫向階梯（達成的亮、正在生效的最亮、下一階寫還差幾件） */
#collect-dex .cx-steps { list-style: none; margin: 0; padding: 0; display: flex; }
#collect-dex .cx-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; margin-left: -6px; padding: 5px 15px 5px 16px; background: #221b13; color: #8d8270;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%); }
#collect-dex .cx-step:first-child { margin-left: 0; padding-left: 9px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); border-radius: 6px 0 0 6px; }
#collect-dex .cx-step:last-child { padding-right: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%); border-radius: 0 6px 6px 0; }
#collect-dex .cx-step:only-child { clip-path: none; border-radius: 6px; padding: 5px 9px; }
#collect-dex .cx-sh { display: flex; align-items: baseline; gap: 5px; }
#collect-dex .cx-sh i { font-style: normal; font-size: 11px; opacity: .8; }
#collect-dex .cx-sh em { font-style: normal; font-weight: 800; font-size: 14px; }
#collect-dex .cx-step b { font-weight: 400; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
#collect-dex .cx-step small { font-size: 11px; color: #f0b35a; }
#collect-dex .cx-step.past { background: linear-gradient(180deg, #5a4318, #33260e); color: #d9be7a; }
#collect-dex .cx-step.cur { background: linear-gradient(180deg, #f6dc8c, #b8913f); color: #2a1c05; }
#collect-dex .cx-step.cur b { font-weight: 700; }
#collect-dex .cx-step.next { background: #30271b; color: #d6c7a6; }

/* 剛整組完成：上面跳一條 */
#collect-dex .cx-banner { position: absolute; left: 50%; top: 44px; z-index: 6; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 40px); padding: 8px 18px;
  border: 1px solid #f2d77f; border-radius: 22px; background: linear-gradient(180deg, #6a5216, #2a1f08); color: #ffe7a0; font-size: 16px; white-space: nowrap;
  box-shadow: 0 0 22px rgba(255,200,90,.75); transform: translateX(-50%); animation: cx-ban 2.8s ease-out forwards; pointer-events: none; }
#collect-dex .cx-banner i { width: 14px; height: 14px; flex: none; background: #ffe7a0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
#collect-dex .cx-banner b { overflow: hidden; text-overflow: ellipsis; letter-spacing: .06em; }
@keyframes cx-ban { 0% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.8); } 12% { opacity: 1; transform: translateX(-50%) scale(1.06); } 20% { transform: translateX(-50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  #collect-dex .cx-cell.can, #collect-dex .cx-cell.just, #collect-dex .cx-cell.just .cx-en, #collect-dex .cx-card.up, #collect-dex .cx-banner { animation: none; }
  #collect-dex .cx-cell.can { box-shadow: 0 0 9px rgba(242,215,127,.75); }
}

/* 電腦版面（body.pcui）：小視窗原本 --pc-ww 寬，卡片要兩欄 → 放寬到 760（同交易所 market.css 的做法） */
body.pcui #collect-dex.pc-ov { width: min(760px, calc(var(--vw1, 1vw) * 100 - 16px)); height: max(var(--pc-oh), min(calc(var(--dvh1, 1dvh) * 100 - var(--orig-bar-h, 0px) - 12px), 520px)); }
body.pcui #collect-dex .box { width: 100%; max-width: 100%; height: 100%; }
body.pcui #collect-dex .cx-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body.pcui #collect-dex .cx-stat { padding: 4px 7px 3px; }
body.pcui #collect-dex .cx-stat span { font-size: 11px; line-height: 13px; }
body.pcui #collect-dex .cx-stat b { font-size: 14px; }

/* 挑一件、確認登錄（小視窗外框 .cl-ov） */
.cx-pop .cx-cands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-pop .cx-cands li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 6px; border-radius: 6px; background: rgba(0,0,0,.3); font-size: 14px; }
.cx-pop .cx-cands li.no { opacity: .7; }
.cx-pop .cx-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; }
.cx-pop .cx-ic img { max-width: 32px; max-height: 32px; object-fit: contain; image-rendering: pixelated; }
.cx-pop .cx-ic.big { width: 44px; height: 44px; border: 1px solid rgba(226,189,107,.75); border-radius: 8px; background: radial-gradient(circle at 50% 38%, #54421f, #17110a 75%); }
.cx-pop .cx-sn { flex: 1; min-width: 0; color: #e8dcc0; overflow-wrap: anywhere; }
.cx-pop .cx-cands em { font-style: normal; flex: none; color: #ef8f84; font-size: 12px; }
.cx-pop .cx-go { flex: none; padding: 6px 14px; border: 1px solid rgba(200,160,80,.8); border-radius: 6px; background: linear-gradient(180deg, #d9b25e, #7a5a22); color: #1c1306; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.cx-pop .cx-ask { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0 2px; font-size: 16px; color: #f6dc8c; }
.cx-pop .cx-warn { margin: 8px 0 2px; text-align: center; color: #ffd8cf; font-size: 14px; }
/* 標題列「說明」鈕與說明內容（站長 2026-10-31「新手會看不懂」） */
#collect-dex .hd { position: relative; }
#collect-dex .hd .cx-help { position: absolute; left: 8px; top: 50%; transform: translateY(-58%); padding: 3px 10px; border: 1px solid #c9a463; border-radius: 12px; background: rgba(120,90,40,.35); color: #f3d48a; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cx-pop .cx-helpl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; font-size: 14px; line-height: 1.55; }
.cx-pop .cx-helpl dt { color: #f3d48a; font-weight: 700; white-space: nowrap; }
.cx-pop .cx-helpl dd { margin: 0; color: #e8dcc0; }
.cx-pop .cx-helpl b { color: #fff; }
.cx-pop .cx-helpl b.g { color: #f3d48a; }
.cx-pop .cx-helpl b.r { color: #ff8a7a; }
.cx-pop .cx-helpl b.d { color: #9a8f7c; }
/* 總覽下面的三步驟小說明（站長 2026-10-31「介面裡面小說明」） */
#collect-dex .cx-steps { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#collect-dex .cx-steps span { display: flex; align-items: center; gap: 5px; padding: 5px 6px; border: 1px solid rgba(160,120,60,.45); border-radius: 8px; background: rgba(40,28,14,.7); font-size: 12px; line-height: 1.3; color: #e8dcc0; }
#collect-dex .cx-steps i { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(#e0bd72, #9a7230); color: #1c1306; font-style: normal; font-weight: 800; font-size: 11px; }
#collect-dex .cx-steps em { font-style: normal; min-width: 0; }
#collect-dex .cx-steps b { color: #f3d48a; }
#collect-dex .cx-tip { flex: none; margin-top: -2px; font-size: 12px; color: #c98a6b; text-align: center; }