/* petview.css v3 — 像素级还原（layout.xml 坐标 + Flash AS 颜色）
   左面板 TradePetPanel：295×500 绝对定位（坐标来自 layout.xml TradePetPanel_*）
   右面板 ViewPetInfo：保持流式（坐标偏移复杂，按需展开）
   颜色源码（十进制→hex 已验算）：标签0=#000 / 数值10365710=#9E2B0E / 额外模块标签5625789=#55D7BD / 外框6702875=#66471B */

.pv-container { display:flex; gap:0; align-items:flex-start; }

/* 详情信息卡（renderPetMeta）：名/服 + 全区名次/本类名次/持有者/收录时间。移动端优先，2×2 网格。 */
.pet-meta { background:#2e2016; border:1px solid #66471B; border-radius:6px; padding:12px 14px; margin-top:12px; }
.pet-meta-hd { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.pet-meta-hd .pm-name { color:#F59E0B; font-size:17px; font-weight:700; }
.pet-meta-hd .pm-srv { color:#ccc; font-size:12px; border:1px solid #66471B; border-radius:3px; padding:1px 7px; }
.pet-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; }
.pet-meta-grid .pm-cell { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pet-meta-grid .pm-k { color:#8a7a63; font-size:11px; }
.pet-meta-grid .pm-v { color:#ddd; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pet-meta-grid .pm-rank { color:#F59E0B; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; }
.pv-left, .pv-right { flex-shrink:0; }

/* ═══ 左面板 TradePetPanel 295×500 绝对定位 ═══ */
.pv-left > .pv-panel {
    position:relative;
    width:295px; height:500px;
    background:#d9c4a0 url('/static/petinfomini.png') left top / calc(133px / 8) auto repeat;
    border:1px solid #66471B;
    font-size:12px; color:#000;
    overflow:hidden;
}
/* logo (100,70) — 源码 panel_logo 图，用文字近似 */
.pv-logo { position:absolute; left:100px; top:70px; font-weight:bold; color:#000; }
/* 宠物形象 header(156,135)；名字/等级源码无坐标，放形象左侧 */
.pv-portrait-wrap { position:absolute; left:82px; top:35px; width:130px; text-align:center; }
.pv-portrait-img { width:110px; height:110px; object-fit:contain; image-rendering:pixelated; }
.pv-body-anim { max-width:110px; max-height:110px; object-fit:contain; image-rendering:pixelated; position:relative; z-index:1; }
/* 已觉醒宠物脚底光圈：绝对定位于形象容器(.pv-portrait-wrap)内，层叠在形象【下方】(z-index:0)、居中贴脚底。
   游戏里 ring 相对形象锚点 y-64；Web 侧 bottom/width 为首版近似，拿到真机觉醒宠物+真素材后再微调。 */
.pv-awake-ring { position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); width:120px; height:auto; z-index:0; pointer-events:none; image-rendering:pixelated; }
.pv-name { position:absolute; left:0; top:15px; width:295px; font-size:14px; font-weight:bold; color:#000; text-align:center; }
.pv-level { position:absolute; left:15px; top:120px; width:130px; font-size:12px; color:#5a4a2a; }
.pv-owner { position:absolute; left:82px; top:150px; width:130px; font-size:12px; color:#5a4a2a; text-align:center; }
/* 查看详情按钮 button(110,170) w75 — 源码 panel_btn_bg1 图 */
.pv-adv-btn { position:absolute; left:110px; top:170px; width:75px; z-index:2; background:#3a2818; border:1px solid #66471B; color:#ccc; padding:2px 0; font-size:12px; cursor:pointer; text-align:center; }
.pv-adv-btn:hover { background:#4a3828; }

/* frame 边框（layout frame1/2/3/4，色 6702875=#66471B）*/
.pv-frame { position:absolute; border:1px solid #66471B; pointer-events:none; box-sizing:border-box; }
.pv-frame1 { left:10px;  top:200px; width:134px; height:150px; }   /* 左属性框 */
.pv-frame2 { left:150px; top:200px; width:134px; height:150px; }   /* 右属性框 */
.pv-frame3 { left:10px;  top:365px; width:134px; height:95px;  }   /* 额外模块框 */
.pv-frame4 { left:150px; top:365px; width:134px; height:95px;  }   /* ARM 下拉框 */

/* 属性行：行高16（layout TradePetPanel_prop.height=16）*/
.pv-prop-row { display:flex; justify-content:flex-start; align-items:center; height:16px; line-height:16px; padding:0 4px; font-size:12px; white-space:nowrap; gap:2px; }
.pv-prop-label { color:#000; }
.pv-prop-value { color:#9E2B0E; text-align:left; }

/* 左列 leftProp(15,205) / 右列 rightProp(155,205) — 9项×16=144 容于 frame1 高150 */
.pv-left-col  { position:absolute; left:15px;  top:205px; width:124px; }
.pv-right-col { position:absolute; left:155px; top:205px; width:124px; }

/* 额外模块 ViewPetInfo_prop(15,357)：标签#55D7BD 值白，每行 TextBg 深底 */
.pv-extra { position:absolute; left:15px; top:365px; width:129px; }
.pv-extra .pv-prop-row { background:#3a2a1a; }
.pv-extra .pv-prop-label { color:#55D7BD; }
.pv-extra .pv-prop-value { color:#FFFFFF; }

/* ARM combo magicCB(150,365) + magicList：对齐 frame4，select+5属性紧凑容于 95px */
.pv-arm { position:absolute; left:150px; top:365px; width:134px; }
.pv-arm-select { display:block; width:100%; height:16px; background:#b89a6a; border:1px solid #66471B; color:#000; padding:0 4px; font-size:11px; line-height:14px; box-sizing:border-box; margin:0; -webkit-appearance:none; appearance:none; }
.pv-arm-props { margin-top:0; }
.pv-arm-props .pv-prop-row { padding:0 2px; height:13px; line-height:13px; }

/* ═══ 右面板 ViewPetInfo（流式）═══ */
.pv-right > .pv-panel {
    width:295px;
    height:500px;
    background:#d9c4a0 url('/static/petinfomini.png') left top / calc(133px / 8) auto repeat;
    border:1px solid #66471B;
    font-size:12px; color:#000;
    overflow:hidden;
}
.pv-header { background:#b89a6a; padding:5px 8px; font-size:13px; font-weight:bold; color:#000; border-bottom:1px solid #66471B; }
.pv-adv-section { padding:6px; border-bottom:1px solid #66471B; }
.pv-adv-section:last-child { border-bottom:none; }
.pv-adv-label { font-size:12px; color:#5a4a2a; margin-bottom:4px; }

/* 技能网格（12槽/6列/42px，ViewPetSkill_new_skillItem(5,13) 间距42）*/
.pv-skill-grid { display:grid; grid-template-columns:repeat(6,42px); gap:0; }
.pv-skill-slot { width:42px; height:42px; background:#2e2016; border:1px solid #D4C490; display:flex; align-items:center; justify-content:center; position:relative; box-sizing:border-box; }
.pv-skill-has { background:#4a3828; cursor:pointer; }
.pv-skill-has:hover { border-color:#F59E0B; box-shadow:0 0 6px rgba(245,158,11,0.4); z-index:2; }
.pv-skill-empty { background:#3a2a1a; }
.pv-skill-locked { background:#4a5568; opacity:1; }
.pv-skill-icon { width:30px; height:30px; object-fit:contain; image-rendering:pixelated; }

/* 资质纵向长条（ViewPetInfo_point1~5 纵向 y=206/245/284/323/362；PetElixierGrid_frame 222×36）*/
.pv-bp-grid { display:flex; flex-direction:column; gap:4px; }
.pv-bp-cell { background:#D4C490; border:1px solid #66471B; padding:3px 6px; font-size:12px; }
.pv-bp-row1 { display:flex; justify-content:space-between; align-items:center; }
.pv-bp-cell .pv-bp-label { color:#000; font-weight:bold; }
.pv-bp-cell .pv-bp-text { color:#9E2B0E; font-weight:bold; }
.pv-bp-bar { height:8px; background:#1a0e06; border:1px solid #66471B; margin-top:3px; }
.pv-bp-bar-fill { height:100%; background:linear-gradient(to bottom, #7AB87A, #5A9A5A 50%, #4A8A4A); }