/* 精灵详情页（独立页面）样式 —— 与图鉴页同一套 Pop/街机风设计语言 */
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--text)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:22px 18px 48px}
.empty{padding:40px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-weight:800;line-height:1.9}

/* 面包屑 */
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;color:var(--muted);font-size:13px;font-weight:800}
.crumb a{color:var(--brand)}
.crumb .sep{opacity:.6}

/* 详情卡片容器 */
.pet-detail-page{background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
.back-btn{margin:16px 16px 14px;height:38px;border:2px solid var(--stroke);border-radius:18px;background:var(--bg);color:var(--text);font-weight:900;padding:0 16px;cursor:pointer;box-shadow:var(--shadow)}

/* 主视觉 */
.detail-hero{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;padding:26px;background:radial-gradient(circle at 18% 42%,var(--detail-soft,rgba(179,157,219,.18)),transparent 35%),#fff;border-bottom:2px solid #F0E8D8}
.detail-cover{height:280px;display:grid;place-items:center;border:2px solid var(--stroke);border-radius:28px;background:var(--bg);box-shadow:var(--shadow)}
.detail-cover img{width:230px;height:230px;object-fit:contain;filter:drop-shadow(0 16px 12px rgba(30,50,80,.18))}
.no-img{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:#e8f0fa;color:#8da0ba;font-weight:900}
.detail-copy h2{font-size:34px;margin:0 0 8px;font-weight:900}
.detail-id{color:var(--muted);font-size:12px;font-weight:900;margin-bottom:6px}
.badges{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.badge{padding:5px 10px;border:2px solid var(--stroke);border-radius:99px;background:var(--bg);color:var(--muted);font-size:12px;font-weight:900}
.type{display:inline-flex;align-items:center;gap:5px;min-height:24px;border:2px solid var(--stroke);border-radius:99px;padding:3px 9px;color:#fff;font-size:12px;font-weight:900;background:var(--type-color,#7b8aa3)}
.type .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.85)}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.detail-actions .navlink{margin:0;display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:var(--muted);padding:8px 14px;border:2px solid var(--stroke);border-radius:18px;background:var(--bg)}
.detail-actions .chip{height:38px;border:2px solid var(--stroke);border-radius:18px;background:var(--bg);color:var(--text);font-weight:900;padding:0 16px;cursor:pointer;box-shadow:var(--shadow)}

/* 基本信息 */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:18px 26px 22px}
.detail-field{border:2px solid var(--stroke);border-radius:18px;background:var(--bg);padding:12px}
.detail-field span{display:block;color:var(--muted);font-size:12px;font-weight:900;margin-bottom:6px}
.detail-field strong{font-size:15px;font-weight:900}

/* 区块标题与内容 */
.detail-section-wide{padding:0 26px 22px}
.section-title{margin:0 0 10px;color:var(--muted);font-size:13px;font-weight:900}
.pet-desc{margin:0;padding:14px 18px;border:2px dashed var(--stroke);border-radius:18px;background:var(--bg-soft,#f7f4ee);color:var(--text);font-size:14px;line-height:1.9;font-weight:600}

/* 种族值条形图 */
.stat-total{font-style:normal;color:var(--text);font-weight:900;font-size:13px;margin-left:8px}
.stat-bars{display:grid;gap:9px;border:2px solid var(--stroke);border-radius:18px;background:#fff;padding:16px 18px;box-shadow:var(--shadow)}
.stat-row{display:grid;grid-template-columns:52px 1fr 44px;align-items:center;gap:10px}
.stat-name{font-size:13px;font-weight:900;color:var(--muted)}
.stat-bar{height:14px;border:2px solid var(--stroke);border-radius:99px;background:var(--bg);overflow:hidden}
.stat-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2,#f39b23))}
.stat-val{font-size:14px;font-weight:900;text-align:right}

/* 技能表 */
.skill-scroll{overflow-x:auto;border:2px solid var(--stroke);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.skill-table{width:100%;border-collapse:collapse;min-width:560px}
.skill-table th{background:var(--bg-soft,#f7f4ee);color:var(--muted);font-size:12px;font-weight:900;text-align:left;padding:10px 12px;border-bottom:2px solid var(--stroke);white-space:nowrap}
.skill-table td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top;font-weight:600}
.skill-table tr:last-child td{border-bottom:none}
.skill-table .sk-name{font-weight:900;white-space:nowrap}
.skill-table .sk-desc{color:var(--muted);min-width:180px}
.skill-table .type{min-height:22px;padding:2px 9px;color:var(--type-color);background:var(--bg)}
.skill-table .type .dot{background:var(--type-color)}

/* 同编号形态切换 */
.form-switch{display:flex;gap:9px;flex-wrap:wrap}
.form-switch a{border:2px solid var(--stroke);border-radius:18px;background:var(--bg);padding:8px 14px;font-size:13px;font-weight:900;color:var(--text);box-shadow:var(--shadow)}
.form-switch a.on{background:var(--brand);border-color:transparent;color:#fff}

/* 进化链 */
.evo-chain{display:flex;gap:8px;overflow:auto;padding-bottom:3px}
.evo-node{min-width:92px;text-align:center;border:2px solid var(--stroke);border-radius:18px;background:var(--bg);padding:8px;cursor:pointer;box-shadow:var(--shadow)}
.evo-node img{width:52px;height:52px;object-fit:contain;display:block;margin:0 auto 4px}
.evo-node div{font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evo-node.self{background:var(--brand);border-color:transparent;color:#fff}

/* 上一只 / 下一只 */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 26px 26px}
.pager a{display:block;border:2px solid var(--stroke);border-radius:18px;background:#fff;padding:12px 16px;box-shadow:var(--shadow)}
.pager a span{display:block;font-size:12px;font-weight:900;color:var(--muted);margin-bottom:4px}
.pager a strong{font-size:15px;font-weight:900}
.pager a.next{text-align:right}
.pager a.disabled{opacity:.45;pointer-events:none}

@media(max-width:980px){
  .detail-hero{grid-template-columns:1fr}
  .detail-cover{height:220px}
  .detail-cover img{width:190px;height:190px}
}
@media(max-width:768px){
  .wrap{padding:16px 12px 36px}
  .detail-hero{padding:18px}
  .detail-grid,.detail-section-wide,.pager{padding-left:16px;padding-right:16px}
  .detail-copy h2{font-size:26px}
  .pager{grid-template-columns:1fr}
  .pager a.next{text-align:left}
}