/* ============================================================
   PET.CSS — 宠物仓库、图鉴、抽卡面板、抽卡结果
   ============================================================ */

/* ===== 宠物页工具栏 ===== */
.pet-toolbar { background: rgba(255,255,255,.04); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.pet-stats-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pet-stat-chip { padding: 5px 12px; border-radius: 20px; font-size: .78rem; border: 1px solid rgba(255,255,255,.12); }
.pet-stat-chip.tickets { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); color: #fbbf24; }
.pet-stat-chip.pity { background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.3); color: #a78bfa; }
.pet-stat-chip.owned { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.3); color: #60a5fa; }
.pet-action-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pet-gacha-entry-btn { flex: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(135deg, #7c3aed, #db2777); border: none; border-radius: 12px; color: white; cursor: pointer; font-size: .9rem; font-weight: 700; transition: opacity .2s; }
.pet-gacha-entry-btn:hover { opacity: .85; }
.gacha-btn-icon { font-size: 1.4rem; }
.gacha-btn-sub { font-size: .7rem; opacity: .8; margin-left: auto; }
.pet-dex-btn { flex: 1; padding: 12px 14px; background: rgba(96,165,250,.15); border: 1px solid rgba(96,165,250,.35); border-radius: 12px; color: #60a5fa; cursor: pointer; font-size: .88rem; font-weight: 600; transition: all .2s; }
.pet-dex-btn:hover { background: rgba(96,165,250,.25); }

/* ===== 激活槽 ===== */
.pet-active-section { margin-bottom: 16px; }
.pet-owned-section {}
.pet-section-title { font-size: .9rem; font-weight: 700; margin-bottom: 10px; color: white; }
.pet-active-list { display: flex; gap: 10px; flex-wrap: wrap; }
.pet-active-slot { width: 90px; min-height: 90px; border-radius: 12px; border: 2px dashed rgba(255,255,255,.15); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: all .2s; padding: 8px; }
.pet-active-slot.filled { border-style: solid; border-color: rgba(124,58,237,.5); background: rgba(124,58,237,.1); }
.pet-active-slot.empty { background: rgba(255,255,255,.03); }
.rarity-border-SSR { border-color: rgba(251,191,36,.6) !important; background: rgba(251,191,36,.08) !important; }
.rarity-border-SR  { border-color: rgba(139,92,246,.6) !important; background: rgba(139,92,246,.1)  !important; }
.rarity-border-R   { border-color: rgba(96,165,250,.6)  !important; }
.active-slot-emoji { font-size: 1.8rem; }
.active-slot-name { font-size: .6rem; color: #ddd; margin-top: 2px; text-align: center; }
.active-slot-lv { font-size: .58rem; color: var(--gold); }
.active-slot-remove { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: #db2777; border: none; border-radius: 50%; color: white; font-size: .75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }

/* ===== 宠物仓库 ===== */
.pet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pet-card { position: relative; background: rgba(255,255,255,.05); border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,.08); transition: all .2s; }
.pet-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.pet-card.pet-active { border-color: rgba(219,39,119,.5); box-shadow: 0 0 12px rgba(219,39,119,.2); }
.pet-active-badge { position: absolute; top: 6px; right: 6px; background: #db2777; color: white; font-size: .55rem; font-weight: 700; padding: 2px 6px; border-radius: 8px; }
.pet-emoji { font-size: 2rem; }
.pet-name { font-size: .75rem; font-weight: 700; color: white; text-align: center; }
.pet-rarity { font-size: .65rem; font-weight: 800; padding: 1px 7px; border-radius: 8px; }
.pet-rarity.N { background: rgba(148,163,184,.15); color: #94a3b8; }
.pet-rarity.R { background: rgba(59,130,246,.15); color: #60a5fa; }
.pet-rarity.SR { background: rgba(139,92,246,.15); color: #a78bfa; }
.pet-rarity.SSR { background: rgba(251,191,36,.15); color: #fbbf24; }
.pet-level { font-size: .65rem; color: var(--gold); }
.pet-effect { font-size: .62rem; color: var(--text-gray); text-align: center; line-height: 1.4; }
.pet-shards { font-size: .62rem; color: #60a5fa; }
.pet-upgrade-btn { width: 100%; padding: 5px; font-size: .65rem; border-radius: 7px; border: 1px solid rgba(124,58,237,.4); background: rgba(124,58,237,.15); color: white; cursor: pointer; transition: all .2s; margin-top: 2px; }
.pet-upgrade-btn:not(:disabled):hover { background: rgba(124,58,237,.35); }
.pet-upgrade-btn:disabled { opacity: .45; cursor: not-allowed; }
.pet-toggle-btn { width: 100%; padding: 5px; font-size: .65rem; border-radius: 7px; border: 1px solid rgba(219,39,119,.3); background: rgba(219,39,119,.1); color: #f9a8d4; cursor: pointer; transition: all .2s; }
.pet-toggle-btn.active { background: rgba(219,39,119,.25); border-color: rgba(219,39,119,.6); color: white; }
.pet-empty { grid-column: 1/-1; text-align: center; color: var(--text-gray); padding: 40px; font-size: .9rem; }
.rarity-N { border-color: rgba(148,163,184,.2); }
.rarity-R { border-color: rgba(59,130,246,.25); }
.rarity-SR { border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.04); }
.rarity-SSR { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.05); }

/* ===== 独立抽卡面板 ===== */
.gacha-panel-hero { position: relative; border-radius: 14px; overflow: hidden; padding: 20px; margin-bottom: 14px; text-align: center; background: linear-gradient(135deg, #1a0533 0%, #2d1f6e 50%, #3a0e2e 100%); border: 1px solid rgba(139,92,246,.3); }
.gacha-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(124,58,237,.4) 0%, transparent 70%); pointer-events: none; }
.gacha-hero-pets { font-size: 1.4rem; letter-spacing: 4px; margin-bottom: 8px; }
.gacha-hero-title { font-size: 1.3rem; font-weight: 900; background: linear-gradient(90deg, #fbbf24, #a78bfa, #f9a8d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; }
.gacha-hero-sub { font-size: .72rem; color: rgba(255,255,255,.5); }
.gacha-panel-stats { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; flex-wrap: wrap; }
.gp-stat { text-align: center; font-size: .78rem; color: var(--text-gray); line-height: 1.6; }
.gp-stat strong { display: block; font-size: 1.2rem; color: white; font-weight: 800; }
.gacha-rates-bar { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.rate-chip { padding: 4px 12px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.rate-chip.N { background: rgba(148,163,184,.12); color: #94a3b8; border: 1px solid rgba(148,163,184,.2); }
.rate-chip.R { background: rgba(59,130,246,.12); color: #60a5fa; border: 1px solid rgba(59,130,246,.25); }
.rate-chip.SR { background: rgba(139,92,246,.15); color: #a78bfa; border: 1px solid rgba(139,92,246,.35); }
.rate-chip.SSR { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.gacha-panel-btns { display: flex; gap: 12px; }
.gp-btn { flex: 1; padding: 16px 12px; border: none; border-radius: 14px; cursor: pointer; transition: all .2s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gp-btn:disabled { opacity: .4; cursor: not-allowed; }
.gp-btn-single { background: linear-gradient(135deg, rgba(124,58,237,.3), rgba(124,58,237,.5)); border: 1px solid rgba(124,58,237,.5); color: white; }
.gp-btn-single:not(:disabled):hover { background: linear-gradient(135deg, rgba(124,58,237,.5), rgba(124,58,237,.7)); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,.3); }
.gp-btn-ten { background: linear-gradient(135deg, rgba(219,39,119,.3), rgba(219,39,119,.5)); border: 1px solid rgba(219,39,119,.5); color: white; }
.gp-btn-ten:not(:disabled):hover { background: linear-gradient(135deg, rgba(219,39,119,.5), rgba(219,39,119,.7)); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(219,39,119,.3); }
.gp-btn-icon { font-size: 2rem; }
.gp-btn-label { font-size: 1rem; font-weight: 800; }
.gp-btn-cost { font-size: .72rem; opacity: .8; }

/* ===== 抽卡结果弹窗 ===== */
.gacha-result-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.gacha-pet-item { animation: gachaCardIn .4s ease both; }
@keyframes gachaCardIn { from { transform: scale(.5) rotateY(90deg); opacity: 0; } to { transform: scale(1) rotateY(0); opacity: 1; } }
.gacha-card-inner { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid rgba(255,255,255,.1); transition: all .3s; }
.gacha-card-inner:hover { transform: scale(1.05); }
.gacha-pet-item.rarity-SSR .gacha-card-inner { border-color: rgba(251,191,36,.5); background: rgba(251,191,36,.08); animation: gachaSSRGlow 2s ease-in-out infinite; }
.gacha-pet-item.rarity-SR .gacha-card-inner { border-color: rgba(139,92,246,.5); background: rgba(139,92,246,.08); }
.gacha-pet-item.rarity-R .gacha-card-inner { border-color: rgba(59,130,246,.4); }
@keyframes gachaSSRGlow { 0%,100% { box-shadow: 0 0 10px rgba(251,191,36,.4); } 50% { box-shadow: 0 0 24px rgba(251,191,36,.8); } }
.gacha-pet-emoji { font-size: 1.8rem; }
.gacha-pet-rarity { font-size: .62rem; font-weight: 800; }
.gacha-pet-name { font-size: .62rem; color: #ddd; text-align: center; }
.gacha-new-tag { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a2e; font-size: .58rem; font-weight: 800; padding: 2px 7px; border-radius: 8px; }
.gacha-shard-tag { color: #60a5fa; font-size: .6rem; font-weight: 600; }

/* ===== 宠物图鉴 ===== */
.dex-filter-bar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.dex-filter-tab { padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: var(--text-gray); font-size: .8rem; cursor: pointer; transition: all .2s; font-weight: 600; }
.dex-filter-tab.active { background: rgba(124,58,237,.3); border-color: rgba(124,58,237,.6); color: white; }
.dex-filter-tab.ssr.active { background: rgba(251,191,36,.2); border-color: rgba(251,191,36,.5); color: #fbbf24; }
.dex-filter-tab.sr.active  { background: rgba(139,92,246,.2); border-color: rgba(139,92,246,.5); color: #a78bfa; }
.dex-filter-tab.r.active   { background: rgba(59,130,246,.2); border-color: rgba(59,130,246,.5); color: #60a5fa; }
.dex-filter-tab.n.active   { background: rgba(148,163,184,.15); border-color: rgba(148,163,184,.3); color: #94a3b8; }
.dex-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; overflow-y: auto; flex: 1; padding: 2px; min-height: 0; }
.dex-card { position: relative; background: rgba(255,255,255,.04); border-radius: 12px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid rgba(255,255,255,.08); transition: all .2s; overflow: hidden; }
.dex-card:hover { transform: translateY(-2px); }
.dex-card.dex-locked { opacity: .65; filter: grayscale(.6); }
.dex-rarity-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px 3px 0 0; }
.dex-emoji { font-size: 1.8rem; margin-top: 6px; }
.dex-emoji.locked { filter: grayscale(1); opacity: .4; }
.dex-name { font-size: .7rem; font-weight: 700; color: white; text-align: center; }
.dex-rarity-tag { font-size: .6rem; font-weight: 800; padding: 1px 7px; border-radius: 8px; background: rgba(255,255,255,.08); }
.dex-level { font-size: .62rem; color: var(--gold); }
.dex-shards { font-size: .6rem; color: #60a5fa; }
.dex-effect { font-size: .6rem; color: var(--text-gray); text-align: center; line-height: 1.4; }
.dex-active-tag { background: #db2777; color: white; font-size: .55rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; margin-top: 2px; }
.locked-text { color: rgba(255,255,255,.3) !important; font-style: italic; }

/* ===== 响应式（宠物部分）===== */
@media (max-width: 640px) {
  .pet-grid { grid-template-columns: repeat(3, 1fr); }
  .gacha-result-grid { grid-template-columns: repeat(3, 1fr); }
  .dex-grid { grid-template-columns: repeat(3, 1fr); }
  .gacha-panel-btns { gap: 8px; }
  .pet-active-slot { width: 75px; min-height: 75px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .pet-grid { grid-template-columns: repeat(3, 1fr); }
}