/* Pixio Pets · 玩家面板页面布局 */
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--night); color: var(--fg); font-family: var(--f-body); font-size: 14px; line-height: 1.5;
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 6px 6px; -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(12px, env(safe-area-inset-left, 0px));
}
.app { max-width: 1320px; margin: 0 auto; display: grid; gap: 14px; padding: 10px 0 28px; }

/* 顶栏：返回官网 + 网络 + 钱包 */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.top a.back { display: flex; align-items: center; gap: 8px; color: var(--mute); text-decoration: none; font-family: var(--f-px); font-size: 12px; -webkit-font-smoothing: none; }
.top a.back:hover { color: var(--gold); }
.top a.back img { width: 20px; height: 20px; }
.top .net { margin-left: auto; font-family: var(--f-px); font-size: 12px; line-height: 12px; padding: 6px 8px 7px; color: var(--mute); background: var(--panel); box-shadow: 0 0 0 2px var(--ink); -webkit-font-smoothing: none; }
.top .net.on { color: var(--ink); background: var(--jade); }
.top .who { font-size: 12px; color: var(--dim); }

/* 宠物页：左边列表 */
.pet-row { --cols: 48px minmax(0, 1fr) auto; }
.pet-row .ic { width: 44px; height: 44px; }
.pet-row .st { font-family: var(--f-px); font-size: 12px; color: var(--gold); text-align: right; -webkit-font-smoothing: none; line-height: 1.4; }
.pet-row .st span { display: block; color: var(--dim); font-family: var(--f-body); font-size: 11px; }

/* 宠物详情头部 */
.pet-head { display: flex; align-items: center; gap: 18px; }
.pet-head h3 { margin: 0 0 6px; font-family: var(--f-px); font-weight: 400; font-size: 24px; line-height: 28px; color: var(--fg); text-shadow: 3px 3px 0 var(--ink); -webkit-font-smoothing: none; }
.pet-head .streak { margin-left: auto; text-align: right; }
.pet-head .streak b { display: block; font-family: var(--f-px); font-weight: 400; font-size: 24px; line-height: 28px; color: var(--gold); text-shadow: 3px 3px 0 var(--ink); -webkit-font-smoothing: none; }
.pet-head .streak span { font-size: 12px; color: var(--dim); }
.ghost img { filter: grayscale(1) brightness(.8); }

/* 领养页 */
.mint { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.mint .egg { aspect-ratio: 1; display: grid; place-items: center; background: var(--well); box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold-d), 0 0 0 9px var(--ink); }
.mint .egg img { width: 78%; height: 78%; }
.check div { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
.check div b { margin-left: auto; }

/* 列表列宽 */
.shop-row { --cols: 48px minmax(0, 1fr) 140px 110px; }
.mk-row { --cols: 48px minmax(0, 1fr) 90px 90px 150px; }
.pool-row { --cols: 48px minmax(0, 1fr) 150px 150px; }

@media (max-width: 1000px) {
  .tabs { gap: 8px; padding: 12px 10px 14px; }
  .tab { height: 44px; font-size: 12px; line-height: 12px; padding: 0 8px 2px; gap: 6px; }
  .tab img { width: 22px; height: 22px; }
  .main { grid-template-columns: minmax(0, 1fr); }
  .side { box-shadow: inset 0 -4px 0 var(--ink); max-height: 300px; }
  .mint { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .top #walletBtns { width: 100%; }
  .top #walletBtns .btn { flex: 1; }
  .title { grid-template-columns: minmax(0, 1fr) auto; }
  .title b { font-size: 12px; line-height: 16px; order: -1; }
  .title .l { text-align: right; }
  .title .r { display: none; }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; padding: 12px 10px 14px; overflow: visible; }
  .tab { max-width: none; height: 40px; }
  .toolbar .acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .toolbar .acts .btn { width: calc(100% - 6px); }
  .detail { padding: 16px 14px 18px; }
  .pick { gap: 8px; }
  .opt { min-height: 84px; }
  .stats { --cols: 2 !important; }
  .actionbar .acts { margin-left: 0; width: 100%; }
  .actionbar .acts .btn.big { flex: 1; font-size: 12px; line-height: 12px; height: 44px; }
  .actionbar .acts .btn { flex: 1; }
  .pet-head h3, .pet-head .streak b { font-size: 12px; line-height: 16px; }
  .mint { grid-template-columns: minmax(0, 1fr); }
  .mint .egg { max-width: 160px; }
  .shop-row { --cols: 44px minmax(0, 1fr) auto; }
  .shop-row .hide-m, .mk-row .hide-m, .pool-row .hide-m { display: none; }
  .mk-row { --cols: 44px minmax(0, 1fr) auto; }
  .pool-row { --cols: 44px minmax(0, 1fr) auto; }
  .thead { display: none; }
}