/* VIP 养殖晋升面板：固定 390×844 设计坐标，由游戏壳统一等比缩放。 */
.vip-route-overlay{--vip-panel-scale:.92;position:absolute;z-index:3400;inset:0;width:390px;height:844px;overflow:hidden;background:rgba(8,7,4,.78);pointer-events:auto}
.vip-route-dialog{position:absolute;left:0;top:2px;width:390px;height:844px;margin:0;padding:0;overflow:hidden;background:url('assets/ui/vip/vip-route-panel-v3.png') 0 0/390px 844px no-repeat;color:#543316;font:12px/1.2 "Noto Sans SC",system-ui,sans-serif;transform:translateZ(0) scale(var(--vip-panel-scale));transform-origin:50% 0}
.vip-route-dialog,.vip-route-dialog *{box-sizing:border-box}

/* 顶部木牌 */
.vip-route-dialog>header{position:absolute;left:0;top:0;width:390px;height:90px;margin:0;padding:0;color:#fff2bf;text-align:center;text-shadow:0 2px 1px #3e1c08}
.vip-route-dialog>header>div:not(.vip-route-title-mark){position:absolute;left:50%;top:23px;width:210px;transform:translateX(-50%);text-align:center}
.vip-route-title-mark{display:none}.vip-route-dialog h2{margin:0;font-size:21px;line-height:25px;letter-spacing:2px;white-space:nowrap}.vip-route-dialog header p{margin:2px 0 0;color:#ffd879;font-size:9px;line-height:12px;letter-spacing:.4px;white-space:nowrap}
.vip-route-dialog header button{position:absolute;right:26px;top:28px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;font:900 28px/1 system-ui,sans-serif;display:grid;place-items:center;text-shadow:0 2px 2px #8d2118;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* 当前等级金色横条，对应底图 y=92~130。 */
.vip-route-ribbon{position:absolute;left:18px;top:92px;width:354px;height:38px;margin:0;padding:0 30px;display:flex;align-items:center;justify-content:center;gap:8px;color:#673709;text-shadow:0 1px #fff1a2;white-space:nowrap}
.vip-route-ribbon span{font-size:9px}.vip-route-ribbon b{font-size:12px}.vip-route-ribbon>i{width:22px;height:1px;flex:0 0 22px;background:linear-gradient(90deg,transparent,#9a5d1b)}.vip-route-ribbon>i:last-child{transform:scaleX(-1)}

/* 五行卡片固定在底图槽位：不使用 flex/grid 分配高度。 */
.vip-route-list{position:absolute;left:0;top:137px;width:390px;height:564px;margin:0;padding:0;overflow:visible}
.vip-route-tier{--tier:#b67524;position:absolute;left:0;width:390px;height:105px;margin:0;padding:0;border:0;background:transparent;overflow:visible}
.vip-route-tier:nth-child(1){top:0}.vip-route-tier:nth-child(2){top:115px}.vip-route-tier:nth-child(3){top:229px}.vip-route-tier:nth-child(4){top:344px}.vip-route-tier:nth-child(5){top:458px}
.vip-route-tier.is-complete{opacity:.9}.vip-route-tier.is-current{z-index:2}.vip-route-tier.is-current:before{content:"";position:absolute;left:14px;top:1px;width:362px;height:103px;border:2px solid var(--tier);border-radius:16px;box-shadow:inset 0 0 0 2px #fff7d2,0 0 10px var(--tier);pointer-events:none}.vip-route-tier.is-locked{filter:saturate(.58)}
.vip-tier-1{--tier:#c48228}.vip-tier-2{--tier:#64a833}.vip-tier-3{--tier:#2e8ed3}.vip-tier-4{--tier:#9349b8}.vip-tier-5{--tier:#d74634}

/* 左侧 VIP 立体勋章固定覆盖底图盾牌槽。 */
.vip-route-medal{position:absolute;z-index:3;left:17px;top:2px;width:96px;height:101px;display:grid;place-items:center;color:#fff8cf;font-weight:900;text-shadow:0 2px 2px #562708}
.vip-route-medal:before{display:none}.vip-route-medal>img{position:absolute;z-index:0;left:50%;top:50%;width:101px;height:101px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 3px #4c250c88)}
.vip-route-medal>span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform:translateY(-1px);font-family:Impact,"Arial Black",sans-serif}.vip-route-medal>span small,.vip-route-medal>span b{color:#fff0a0;-webkit-text-stroke:1px #6d3009;text-shadow:0 2px 0 #7c380a,0 3px 3px #2d140b}.vip-route-medal>span small{font-size:11px}.vip-route-medal>span b{font-size:25px;line-height:1}

/* 动物与名称使用独立固定坐标，不被勋章尺寸推挤。 */
.vip-route-animal-art{position:absolute;left:93px;top:0;width:109px;height:104px;display:grid;place-items:center;overflow:visible}.vip-route-animal-art>i{position:absolute;left:13px;right:10px;bottom:12px;height:14px;border-radius:50%;background:#7b4f2630;filter:blur(2px)}
.vip-route-animal-art img{position:relative;z-index:1;width:114px;height:108px;object-fit:contain;transform:scale(1.08);filter:drop-shadow(0 5px 3px #63361648)}.vip-route-tier.is-current .vip-route-animal-art img{transform:scale(1.16);filter:drop-shadow(0 0 6px #fff5bb) drop-shadow(0 5px 3px #63361655)}.vip-route-tier.is-locked .vip-route-animal-art img{filter:grayscale(.25) opacity(.75) drop-shadow(0 4px 2px #63361638)}
.vip-route-animal{position:absolute;left:202px;top:27px;width:98px;height:58px;padding:0;overflow:visible;white-space:nowrap}.vip-route-animal small{display:block;color:#a77b42;font-size:8px;line-height:10px}.vip-route-animal b{display:block;margin:1px 0 2px;color:var(--tier);font-size:24px;line-height:25px;text-shadow:0 1px #fff}.vip-route-animal span{display:block;color:#97734a;font-size:8px;line-height:10px;white-space:nowrap}

/* 右侧完成/当前/锁定图标固定覆盖底图圆槽。 */
.vip-route-tier>em,.vip-route-tier.is-complete>em,.vip-route-tier.is-current>em,.vip-route-tier.is-locked>em{position:absolute;z-index:3;right:28px;top:26px;width:50px;height:50px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:#fff;font-style:normal;font-weight:900;text-align:center;text-shadow:none}
.vip-route-tier>em>img{position:absolute;left:0;top:0;width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 3px 2px #4b260a77)}.vip-route-tier>em>span{position:absolute;z-index:1;inset:0;display:none;place-items:center;padding-top:8px;color:#fff;font-size:7px;line-height:9px;font-weight:900;text-shadow:0 1px 2px #064f9d}.vip-route-tier.is-current>em>span{display:grid}.vip-route-tier.is-current>em>img{filter:drop-shadow(0 0 6px #ffe889) drop-shadow(0 3px 2px #194d7177)}
/*
 * 后三行状态槽按底图原始像素中心单独定位，不再用统一行距推算：
 * 羊 (334.4,417.7)、牛 (333.5,535.2)、马 (334.0,650.0)。
 */
.vip-route-tier:nth-child(3)>em{right:31px;top:27px}
.vip-route-tier:nth-child(4)>em{right:32px;top:29px}
.vip-route-tier:nth-child(5)>em{right:31px;top:30px}
/* 立体 PNG 的非透明内容在画布中略偏上，单独补偿可见图案中心。 */
.vip-route-tier:nth-child(3)>em>img,.vip-route-tier:nth-child(4)>em>img{transform:translateY(1.3px)}
.vip-route-tier:nth-child(5)>em>img,.vip-route-tier:nth-child(5)>em>span{transform:translateY(.9px)}

/* 底部进度板固定在底图 y=704~844，不随上方内容移动。 */
.vip-route-dialog>footer{position:absolute;left:13px;top:704px;width:364px;height:140px;margin:0;padding:17px 30px 8px;overflow:hidden;background:transparent}
.vip-route-progress-title{height:38px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 5px}.vip-route-progress-title small{display:block;color:#a27234;font-size:8px}.vip-route-progress-title b{display:block;margin-top:1px;color:#663c16;font-size:14px}.vip-route-progress-title>strong{color:#4b952d;font-size:23px}.vip-route-progress-title>strong i{color:#9b7849;font-size:10px;font-style:normal}
.vip-route-progress{position:relative;height:15px;margin:4px 8px 0;border:0;border-radius:10px;overflow:hidden;background:#6c481d55;box-shadow:inset 0 2px 4px #3f280f88}.vip-route-progress>i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#9be24f,#4fa82f 78%,#d5f774);box-shadow:inset 0 2px #e9ffb5,0 0 8px #7bd241}.vip-route-progress>em{position:absolute;inset:0;color:#fff;font-size:9px;line-height:15px;font-style:normal;font-weight:900;text-align:center;text-shadow:0 1px 2px #315d1c}
.vip-route-next{height:31px;display:flex;align-items:center;gap:6px;padding:4px 10px 0;color:#83582b}.vip-route-next span{font-size:8px}.vip-route-next b{color:#673a13;font-size:12px}.vip-route-next em{margin-left:auto;color:#559534;font-style:normal;font-weight:900}
.vip-route-max{position:absolute;left:50px;top:24px;width:264px;height:68px;display:flex;align-items:center;justify-content:center;gap:13px;margin:0}.vip-route-max-crown{display:grid;place-items:center;width:47px;height:47px;flex:0 0 47px;border-radius:50%;color:#9a5519;font-size:28px;text-shadow:0 1px #fff1a0}.vip-route-max small,.vip-route-max b,.vip-route-max span{display:block}.vip-route-max small{color:#a16c31;font-size:8px}.vip-route-max b{color:#693a13;font-size:17px}.vip-route-max span{color:#5b9639;font-size:9px}

/* 顶部玩家栏使用独立小尺寸数字勋章；详情页立体勋章不复用到 HUD。 */
#vipBadge{cursor:pointer;transition:.18s transform,.18s filter}#vipBadge:hover{transform:scale(1.08)}.player-name{padding-right:1px}.player-name strong{max-width:60px}
.player-name #vipBadge{position:relative;display:grid;place-items:center;width:28px;height:23px;margin:-5px 0 -4px auto;padding:0;flex:0 0 28px;overflow:visible;isolation:isolate;border:0;border-radius:0;background:transparent!important;box-shadow:none!important}
.player-name #vipBadge>img{position:absolute;z-index:-1;left:50%;top:50%;width:31px;height:31px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 1px #35180488)}.player-name #vipBadge>b{position:relative;top:0;color:#fff5b2;font:900 12px/1 Impact,"Arial Black",sans-serif;-webkit-text-stroke:.55px #652b08;text-shadow:0 1px 0 #8b3f0c,0 2px 2px #251007}.player-name #vipBadge.vip-badge--level-5>img{filter:drop-shadow(0 0 3px #ffd86e) drop-shadow(0 1px 1px #35180488)}
.game-screen.is-tutorial #vipBadge,
.game-screen.is-tutorial .exp-bar,
.game-screen.is-tutorial .player-panel{display:none!important}
.game-screen.is-tutorial .player-card{width:58px;flex:0 0 58px}

/* 禁止为短屏/窄屏重排；390×844 游戏壳统一负责整体缩放。 */