/* 寵物小屋（#/pets，2026-10-04.4）：戰鬥寵物、天外神晶；鐵匠鋪的神翼進化（.forge-ew）也在這裡
   顏色：每一種寵物一個顏色（--pc：龍＝火橘、狐＝紫、龜＝青綠、鹿＝月光藍），階越高光越亮；展示台是深色的夜空（白天、夜晚都一樣，像素圖才看得清楚） */
.pets-page { display: grid; gap: 14px; }
.pets-page .card { min-width: 0; }
.pet-pic, .pet-big { image-rendering: pixelated; image-rendering: crisp-edges; }
.pk-drake { --pc: 255, 122, 42; }
.pk-kitsune { --pc: 190, 120, 255; }
.pk-tortoise { --pc: 58, 196, 160; }
.pk-stag { --pc: 138, 200, 255; }

/* ── 上面一大塊：選到的那一隻 ── */
.pet-show { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .pet-show { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.15fr); align-items: stretch; } }
.pet-pedestal { position: relative; display: grid; place-items: end center; min-height: 230px; padding: 18px 10px 14px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse 55% 50% at 50% 58%, rgba(var(--pc, 255, 214, 90), 0.42), transparent 72%), linear-gradient(180deg, #1b1830 0%, #241d36 55%, #2c2238 100%);
  border: 1px solid rgba(var(--pc, 255, 214, 90), 0.45); }
.pet-pedestal::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff8, transparent), radial-gradient(1px 1px at 28% 42%, #fff6, transparent), radial-gradient(1.5px 1.5px at 72% 14%, #fff9, transparent),
    radial-gradient(1px 1px at 86% 36%, #fff6, transparent), radial-gradient(1px 1px at 52% 10%, #fff7, transparent), radial-gradient(1.5px 1.5px at 92% 70%, #fff5, transparent); }
.pet-pedestal::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: min(78%, 300px); height: 22px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(var(--pc, 255, 214, 90), 0.38), rgba(var(--pc, 255, 214, 90), 0.08) 60%, transparent 72%); }
.ps-3 .pet-pedestal { box-shadow: inset 0 0 40px rgba(var(--pc), 0.25); }
.ps-4 .pet-pedestal { box-shadow: inset 0 0 60px rgba(var(--pc), 0.35), 0 0 0 1px rgba(255, 214, 90, 0.55); }
.pet-big { position: relative; z-index: 1; max-width: 100%; height: auto; }

.pet-card { display: grid; align-content: start; gap: 8px; min-width: 0; }
.pc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pc-name { font: 900 22px/1.2 var(--serif); color: var(--text); overflow-wrap: anywhere; }
.pc-stage { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid var(--line-2); background: var(--field); color: var(--text-2); white-space: nowrap; }
.pc-stage.st-2 { border-color: #4a86c8; color: #2a5a9a; background: rgba(74, 134, 200, 0.1); }
.pc-stage.st-3 { border-color: #8a4ad0; color: #6a2ab0; background: rgba(138, 74, 208, 0.1); }
.pc-stage.st-4 { border-color: #b8801a; color: #5a3a04; background: linear-gradient(180deg, #fff4d2, #f1d27e); }
.pc-carry { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--win); color: #fff; white-space: nowrap; }
.pet-card > p { margin: 0; }
.pc-lv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pc-lv > b { font: 900 20px/1 var(--serif); font-variant-numeric: tabular-nums; }
.pc-bar { position: relative; flex: 1 1 140px; height: 12px; border-radius: 6px; background: var(--field); border: 1px solid var(--line-2); overflow: hidden; }
.pc-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(var(--pc, 107, 196, 107), 0.75), rgba(var(--pc, 184, 226, 122), 1)); }
.pc-lv .small { font-variant-numeric: tabular-nums; }
.pc-fx { margin: 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.5; }
.pc-max { align-self: center; font-weight: 800; color: var(--gold-ink); }
.pet-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pet-acts .btn { white-space: normal; text-align: left; }
.pet-ev { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--line-2); background: var(--field); line-height: 1.6; }

.pet-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px 4px; }
.pet-empty p { margin: 0; }
.pe-pics { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px; border-radius: 12px; background: linear-gradient(180deg, #1b1830, #2c2238); }
.pe-locked { filter: brightness(0) opacity(0.35); }
[data-theme="night"] .pe-locked { filter: brightness(0) invert(1) opacity(0.18); }

/* ── 我的寵物 ── */
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.pet-cell { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--text); font: inherit; cursor: pointer; min-width: 0; text-align: center; }
.pet-cell:hover { border-color: var(--line-3); }
.pet-cell:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.pet-cell.on { border-color: rgba(var(--pc), 0.9); box-shadow: inset 0 0 0 1px rgba(var(--pc), 0.9), 0 0 12px rgba(var(--pc), 0.25); }
.pcell-pic { display: grid; place-items: end center; width: 100%; height: 84px; border-radius: 9px; background: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(var(--pc), 0.35), transparent 75%), #221c33; }
.pcell-pic canvas { max-width: 100%; max-height: 80px; width: auto !important; height: auto !important; }
.pcell-name { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.pcell-carry { position: absolute; top: 4px; right: 6px; font-size: 14px; }

/* ── 圖鑑 ── */
.pet-dex-grid { display: grid; gap: 10px; }
.pd-row { display: grid; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.pd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pd-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pd-st { display: grid; justify-items: center; align-content: end; gap: 2px; padding: 6px 2px; border-radius: 10px; background: #221c33; color: #cfc6e6; text-align: center; min-width: 0; }
.pd-st canvas { max-width: 100%; height: auto !important; width: auto !important; max-height: 60px; }
@media (min-width: 720px) { .pd-st canvas { max-height: 104px; } }
.pd-st .small { font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.pd-st.got { background: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(255, 214, 90, 0.28), transparent 75%), #2a2140; color: #fff3cf; }
.pd-bonus { margin: 0; color: var(--muted); }

/* ── 別的頁面：遠征那一行、掉寶、神晶 ── */
.pet-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0; }
.pl-pic { display: inline-grid; place-items: end center; width: 40px; height: 32px; border-radius: 8px; background: #221c33; overflow: hidden; }
.pl-pic canvas { max-width: 38px; max-height: 30px; width: auto !important; height: auto !important; }
.pet-loot { display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid #b8801a; background: linear-gradient(180deg, rgba(255, 236, 160, 0.35), rgba(255, 214, 90, 0.08)); }
[data-theme="night"] .pet-loot { border-color: #d9a02a; background: linear-gradient(180deg, rgba(232, 181, 74, 0.16), rgba(232, 181, 74, 0.04)); }
.pet-loot p { margin: 0; }
.pl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pl-row > span { display: grid; gap: 2px; }
.pl-row .pet-pic { background: #221c33; border-radius: 10px; padding: 4px; }
.astral-amt { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: #2f5fc0; font-variant-numeric: tabular-nums; }
[data-theme="night"] .astral-amt { color: #8ab8ff; }
.pet-evo { display: grid; justify-items: center; gap: 10px; text-align: center; }
.pe-row { display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 14px; border-radius: 12px; background: linear-gradient(180deg, #1b1830, #2c2238); max-width: 100%; overflow: hidden; }
.pe-row canvas { max-width: 42vw; height: auto !important; }
.pe-arrow { align-self: center; font-size: 24px; color: #ffd24a; }

/* ── 按鈕：可以進化的時候發光；放生（不顯眼） ── */
.btn-glow { box-shadow: 0 0 0 2px rgba(255, 214, 90, 0.55), 0 0 14px rgba(255, 196, 60, 0.55); animation: pet-glow 1.8s ease-in-out infinite; }
@keyframes pet-glow { 50% { box-shadow: 0 0 0 2px rgba(255, 214, 90, 0.9), 0 0 22px rgba(255, 196, 60, 0.85); } }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { border-color: var(--line-2); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .btn-glow { animation: none; } }

/* ── 鐵匠鋪：🪽 神翼進化（js/forge.js 的 ewBox）、裝備卡片上的神翼那一行 ── */
.forge-ew { border-color: #b8801a; background: linear-gradient(180deg, rgba(255, 244, 210, 0.7), var(--surface-2)); }
[data-theme="night"] .forge-ew { border-color: #8a6a2a; background: linear-gradient(180deg, rgba(232, 181, 74, 0.1), var(--surface-2)); }
.few-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.few-st { display: grid; justify-items: center; align-content: end; gap: 2px; padding: 8px 2px 6px; border-radius: 10px; background: #221c33; color: #e6def6; text-align: center; min-width: 0; border: 1px solid transparent; }
.few-st .gear-ico { min-height: 54px; display: grid; place-items: end center; }
.few-st b { font-size: 12px; color: #fff3cf; overflow-wrap: anywhere; }
.few-st .muted { color: #b9b0d0; font-size: 11px; }
.few-st.on { border-color: #ffd24a; box-shadow: 0 0 12px rgba(255, 210, 74, 0.35); background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(255, 214, 90, 0.3), transparent 75%), #2a2140; }
.few-st.done { opacity: 0.8; }
.few-dim { filter: grayscale(0.5) brightness(0.75); opacity: 0.7; }
.few-diff { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.forge-c.fx-astral b { color: #2f5fc0; }
[data-theme="night"] .forge-c.fx-astral b { color: #8ab8ff; }
.xg-ew { border-color: #b8801a; }
.ew-ico.ew-st3 svg { filter: drop-shadow(0 0 3px rgba(255, 214, 90, 0.55)); }
.ew-ico.ew-st4 svg { filter: drop-shadow(0 0 4px rgba(255, 214, 90, 0.85)); }

/* ── 物品欄「✨ 特殊」：天外神晶、戰鬥寵物那兩行（css/bag.css 的 .bag-xrow） ── */
.bag-card .x-astral .bx-card { --c1: #7ab8ff; --c2: #22408a; --c3: #0a1430; --hi: rgba(200, 230, 255, 0.45); }
.bag-card .x-pet .bx-card { --c1: #ffb070; --c2: #6a3a1a; --c3: #1e1008; --hi: rgba(255, 220, 190, 0.4); }
.bx-pet { display: grid; place-items: center; }
.bx-pet canvas { max-width: 50px; max-height: 46px; width: auto !important; height: auto !important; }
.astral-ico { display: inline-flex; vertical-align: middle; }