/* =========================================================
   逼翰大戰爭 v8.3 質感層（載在 revamp.css 之後，是最後一層）
   地圖上會走路的夥伴／升級工坊／編成隊伍／夥伴養成機（V-Pet）／其他打磨
   ========================================================= */

/* =========================================================
   關卡地圖：會走路的夥伴 ＋ 下一關的 NEXT! 小旗子（MapWalker，ui.js）
   ========================================================= */
.stx-walker{position:absolute;left:0;top:0;z-index:4;pointer-events:none;will-change:transform}
.stw-body{position:absolute;left:0;top:0;transform-origin:50% 100%}
.stw-body canvas{display:block;filter:drop-shadow(0 3px 0 #0009) drop-shadow(0 0 1px #000)}
/* 待機的上下晃動掛在最裡面的 canvas（外面兩層的 transform 是 JS 在控制） */
.stx-walker.idle .stw-body canvas{animation:stw-bob 1.1s ease-in-out infinite}
@keyframes stw-bob{50%{transform:translateY(-5px)}}
.stw-shadow{position:absolute;left:0;top:0;width:34px;height:9px;border-radius:50%;background:#000;opacity:.5;transform:translate(-50%,-50%)}
.stw-dust{position:absolute;z-index:3;width:6px;height:6px;margin:-3px 0 0 -3px;background:#f3ead0;border:1px solid #0006;pointer-events:none;
  animation:stw-dust .45s ease-out forwards}
@keyframes stw-dust{from{opacity:.95;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),-12px) scale(.4)}}
/* 旗子插在頭像右上角「外面」：夥伴站在這一關上時不會把它擋住 */
.stn-next{position:absolute;left:100%;top:2px;margin-left:-8px;z-index:3;padding:1px 5px 2px;font-size:10px;font-weight:900;letter-spacing:1px;line-height:1.2;
  color:#3d2308;background:linear-gradient(#fff3c4,#ffca4a);border:2px solid #000;box-shadow:0 2px 0 #0008;transform:rotate(8deg);
  animation:stn-next 1.1s ease-in-out infinite}
@keyframes stn-next{50%{transform:rotate(8deg) translateY(-3px)}}

/* =========================================================
   升級（v8.3 重做）：角色升級／基地強化兩個分頁、左邊格子、右邊詳細卡、經驗球升級演出
   ========================================================= */
#scr-upgrade .scr-head{padding-top:8px;padding-bottom:8px}
.upx-tabs{display:flex;gap:8px}
.upx-tab{--f1:#d4d4d4; --f2:#b8b8b8; --hi:#efefef; --lo:#8a8a8a;
  display:flex;align-items:center;gap:6px;padding:6px 16px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:900;letter-spacing:2px;color:#1c1c1c;
  background:linear-gradient(var(--f1),var(--f2));border:4px solid #000;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 4px 0 #00000055}
.upx-tab:hover{filter:brightness(1.07)}
.upx-tab.on{--f1:#ffd98a; --f2:#f0b429; --hi:#fff3c4; --lo:#a9761a; transform:translateY(2px);
  box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 2px 0 #00000055,0 0 12px #ffd75e99}
.upx-tab .pxi{width:20px;height:20px}
.upx-xp{display:flex;align-items:center;gap:6px;padding:5px 14px;font-size:15px}
.upx-xp .pxi{width:18px;height:18px}
.upx-body{flex:1;min-height:0;display:flex;gap:12px;padding:10px 14px 14px}
.upx-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.upx-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:31px}
.upx-f{--f1:#fdf2d8; --f2:#ecd6a6; --hi:#fff; --lo:#c9ab72;
  display:flex;align-items:center;gap:4px;padding:3px 8px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:900;color:#3d2308;
  background:linear-gradient(var(--f1),var(--f2));border:3px solid #000;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 3px 0 #0006}
.upx-f[style]{box-shadow:inset 0 -4px 0 var(--fc),inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 3px 0 #0006}
.upx-f em{font-style:normal;font-size:10.5px;font-weight:900;padding:0 4px;color:#fff;background:#1c1206;border:1.5px solid #000}
.upx-f.on{--f1:#ffd98a; --f2:#f0b429; --hi:#fff3c4; --lo:#a9761a}
.upx-f:disabled{opacity:.45;cursor:not-allowed}
.upx-f.can{margin-left:auto}
.upx-f.can.on{--f1:#c3f293; --f2:#77c72e; --hi:#e3ffcb; --lo:#4c8a15}
.upx-f .pxi{width:15px;height:15px}
.upx-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px 8px;
  align-content:start;padding:9px 6px 8px 4px;scrollbar-width:thin;scrollbar-color:#8a5423 #0003}
/* 格子：跟圖鑑同一套物品欄凹槽，上緣一條稀有度色 */
/* 出陣中：頭像左下角一顆黑底金字的快捷鍵 */
/* 經驗值夠升級：右上角一顆會跳的綠色箭頭（可以進化時換成星星） */
.upx-empty{grid-column:1/-1;padding:46px 0;text-align:center;font-size:15px;font-weight:900;line-height:1.8;color:#fff6dd;text-shadow:0 2px 0 #000a}
/* 基地強化分頁：兩欄寬格子 */
#scr-upgrade[data-tab="fnd"] .upx-grid{grid-template-columns:1fr 1fr;gap:10px}
.upx-fnote{flex:1;display:flex;align-items:center;gap:8px;padding:4px 10px;font-size:12.5px;font-weight:800;color:#4a2a08;
  background:linear-gradient(#fffaea,#f3e3bb);border:3px solid #000;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #d8c18a,0 3px 0 #0006}
.upx-fnote b{color:#b4530a}
.upx-fnote .pxi{width:20px;height:20px;flex:0 0 auto}

/* ---- 右邊：詳細卡 ---- */
.upx-detail{flex:0 0 372px;display:flex;flex-direction:column;overflow:hidden;border:4px solid #000;background:linear-gradient(#fdf2d8,#ecd6a6);
  box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #c9ab72,0 5px 0 #00000059}
.upx-lvbig{position:absolute;left:10px;bottom:8px;z-index:2;display:flex;align-items:baseline;gap:2px;line-height:1;
  filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)}
.upx-lvbig small{font-size:12px;font-weight:900;letter-spacing:1px;color:#ffe27a}
.upx-lvbig b{display:inline-block;font-size:40px;font-weight:900;color:#fff}
.upx-lvbig em{font-style:normal;font-size:16px;font-weight:900;color:#ffb84a;margin-left:3px}
.upx-lvbig em.of{color:#ffe9a8}
.upx-plate{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 12px;border-bottom:3px solid #00000026}
.upx-plate>b{font-size:18px;font-weight:900;letter-spacing:1px;color:#3d2308;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 30 格等級條：三段成長率三種顏色 */
.upx-lvbar{flex:0 0 auto;display:grid;grid-template-columns:repeat(30,1fr);gap:2px;margin:8px 12px 0;padding:3px;background:#1c1206;border:2px solid #000}
.upx-lvbar.f{grid-template-columns:repeat(var(--n),1fr)}
.upx-lvbar i{height:10px;background:#3a3020}
.upx-lvbar i.t1.on{background:linear-gradient(#d8ff8a,#6fc23a)}
.upx-lvbar i.t2.on{background:linear-gradient(#bfe8ff,#3f9ad8)}
.upx-lvbar i.t3.on{background:linear-gradient(#f0d0ff,#9b4ae0)}
.upx-lvbar i.nx{animation:upx-nx .7s ease-in-out infinite alternate}
@keyframes upx-nx{to{background:#ffffff80}}
.upx-stats{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;margin:7px 12px 0;padding:5px 10px;background:#fffdf5;border:2px solid #000}
.upx-row{display:grid;grid-template-columns:40px 1fr 18px 1fr 58px;align-items:center;font-size:13px;line-height:1.28}
.upx-row span{font-size:11.5px;font-weight:900;color:#8a5a12}
.upx-row b{font-weight:900;color:#3d2308;text-align:right}
.upx-row b.nx{color:#1f7a2c}
.upx-row i{font-style:normal;text-align:center;font-size:9px;color:#8a5a12}
.upx-row em{font-style:normal;font-size:11px;font-weight:900;color:#2f9a3c;text-align:right}
.upx-row em.mx{grid-column:3/-1;color:#b06a00;text-align:left;padding-left:10px}
.upx-mini{display:flex;justify-content:space-between;margin-top:2px;padding-top:3px;border-top:2px dashed #0000001f;font-size:11px;font-weight:800;color:#6b4a1e}
.upx-mini b{color:#3d2308}
.upx-fdesc{flex:0 0 auto;margin:7px 12px 0;font-size:12.5px;font-weight:800;line-height:1.6;color:#5a3512}
.upx-acts{flex:0 0 auto;display:flex;gap:8px;margin:8px 12px 0}
.upx-acts .px-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;padding:5px 6px;min-height:48px}
.upx-acts small{font-size:11px;letter-spacing:1px}
.upx-acts span{font-size:15px;white-space:nowrap}
.upx-evo{flex:0 0 auto;display:flex;align-items:center;gap:6px;margin:8px 12px 0;padding:5px 8px;background:linear-gradient(#3a2a52,#241a36);
  border:2px solid #000;box-shadow:inset 0 0 0 1px #ffffff1c}
.upx-evo.done{background:linear-gradient(#5a4210,#2e2008)}
.upx-evoimg{flex:0 0 auto;line-height:0;padding:1px;background:#fdf2d8;border:2px solid #000}
.upx-evoimg.sil{background:#3a3650}
.upx-evoimg.got{background:linear-gradient(#fff6c9,#ffd98a);box-shadow:0 0 8px #ffd75e}
.upx-evoarr{font-style:normal;font-size:11px;color:#ffd75e}
.upx-evotxt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.upx-evotxt b{font-size:12.5px;font-weight:900;color:#ffe9a8}
.upx-evotxt small{font-size:10.5px;font-weight:800;color:#d7c8f0}
.upx-evobtn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;line-height:1.1;padding:3px 9px}
.upx-evobtn small{font-size:11px}
.upx-evobtn span{font-size:12px;white-space:nowrap}
.upx-evostar{width:26px;height:26px;flex:0 0 auto}
.upx-none{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:900;color:#6b4a1e}
.upx-none .pxi{width:42px;height:42px}
/* ---- 升級演出 ---- */
.upx-pop{position:absolute;left:50%;top:34%;z-index:4;white-space:nowrap;pointer-events:none;font-size:30px;font-weight:900;letter-spacing:3px;color:#d8ff8a;
  filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) drop-shadow(0 0 10px #8ef07a);
  animation:upx-pop 1.3s ease-out forwards}
@keyframes upx-pop{0%{opacity:0;transform:translate(-50%,10px) scale(.5)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}
  30%{transform:translate(-50%,0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}
.upx-stats.lvup{animation:upx-stat .7s ease-out}
@keyframes upx-stat{20%{background:#e8ffd9;box-shadow:0 0 12px #8ef07a}}
/* Minecraft 經驗球：外層管水平（ease-in）、內層管垂直（先往上彈再落下），合起來是一道弧線 */
.upx-orb{position:absolute;z-index:30;width:0;height:0;pointer-events:none;animation:upx-ox .52s cubic-bezier(.55,0,.9,.6) var(--dl,0ms) both}
.upx-orb b{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fbffd0 0 25%,#c8f55a 45%,#5fae1f 80%);box-shadow:0 0 8px 2px #b8f04a,0 0 2px #000;
  animation:upx-oy .52s cubic-bezier(.1,.5,.4,1) var(--dl,0ms) both}
@keyframes upx-ox{from{transform:translateX(0)}to{transform:translateX(var(--dx))}}
@keyframes upx-oy{0%{transform:translateY(0) scale(.4)}22%{transform:translateY(-30px) scale(1.05)}100%{transform:translateY(var(--dy)) scale(.7)}}
.upx-row.wide{grid-template-columns:auto 1fr 18px 1fr;gap:6px}
.upx-row.wide span{white-space:nowrap}
/* 基地強化：右下角的「基地現況」一覽（五項目前的效果） */
.upx-fsum{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin:8px 12px 0;padding:5px 9px;background:#0000000d;border:2px dashed #0000002e}
.upx-fsum b{grid-column:1/-1;font-size:11px;letter-spacing:2px;color:#8a5a12}
.upx-fsum span{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#6b4a1e}
.upx-fsum span.on{color:#3d2308}
.upx-fsum span .pxi{width:15px;height:15px}
.upx-fsum span em{margin-left:auto;font-style:normal;font-weight:900;color:#3d2308}

/* =========================================================
   編成隊伍（v8.3 重做）：三組隊伍、拖曳換位、右邊角色情報／屬性對策／合體技
   ========================================================= */
#scr-lineup .scr-head{padding-top:8px;padding-bottom:8px}
.lnx-body{flex:1;min-height:0;display:flex;gap:12px;padding:10px 14px 10px}
.lnx-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.lnx-top{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.lnx-sets{display:flex;gap:6px}
.lnx-set{--f1:#d4d4d4; --f2:#b8b8b8; --hi:#efefef; --lo:#8a8a8a;
  display:flex;align-items:center;gap:6px;padding:4px 12px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:900;letter-spacing:1px;color:#1c1c1c;
  background:linear-gradient(var(--f1),var(--f2));border:3px solid #000;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 3px 0 #00000055}
.lnx-set:hover{filter:brightness(1.07)}
.lnx-set.on{--f1:#ffd98a; --f2:#f0b429; --hi:#fff3c4; --lo:#a9761a; transform:translateY(2px);box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 1px 0 #00000055,0 0 10px #ffd75e99}
.lnx-set em{font-style:normal;font-size:10.5px;font-weight:900;padding:0 4px;color:#fff;background:#1c1206;border:1.5px solid #000}
.lnx-tools{margin-left:auto;display:flex;gap:6px}
.lnx-tools .px-btn{padding:4px 9px;font-size:12.5px;border-width:3px}
.lnx-tools .px-btn .pxi{width:15px;height:15px}
/* 出陣列表 */
.lnx-deploy{flex:0 0 auto;position:relative;padding:20px 8px 8px;background:#0000003a;border:3px solid #000;box-shadow:inset 0 0 0 2px #ffffff14}
.lnx-cost{position:absolute;left:10px;right:10px;top:2px;display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:900;letter-spacing:2px;color:#ffe9a8;
  text-shadow:1px 1px 0 #3d2308,-1px 1px 0 #3d2308,1px -1px 0 #3d2308,-1px -1px 0 #3d2308}
.lnx-cost em{font-style:normal;letter-spacing:1px}
.lnx-cost span i{font-style:normal;margin-left:10px;letter-spacing:0;font-size:10.5px;color:#f2e2bb;opacity:.85}
.lnx-cost b{color:#ffd75c}
.lnx-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.lnx-slot{position:relative;height:68px;display:flex;flex-direction:column;align-items:center;padding:3px 3px 0;cursor:grab;touch-action:none;user-select:none;
  background:linear-gradient(#fdf2d8,#ecd6a6);border:3px solid #000;box-shadow:inset 0 4px 0 var(--rc,#0000),0 3px 0 #0006;transition:transform .08s}
.lnx-slot canvas{display:block;margin-top:4px}
.lnx-slot.empty{cursor:default;justify-content:center;border-style:dashed;
  background:repeating-linear-gradient(45deg,#00000026 0 6px,#0000 6px 12px),#3a3020;box-shadow:inset 0 2px 6px #000a}
.lnx-plus{font-size:24px;font-weight:900;color:#ffffff40}
.lnx-slot:not(.empty):hover{box-shadow:inset 0 4px 0 var(--rc),0 0 0 2px #ff8b8b,0 3px 0 #0006}
.lnx-slot.pop{animation:lnx-pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes lnx-pop{40%{transform:scale(1.09)}}
.lnx-slot.drop-over{transform:scale(1.05);box-shadow:0 0 0 3px #fff,0 0 16px #ffd75e!important;z-index:2}
.lnx-slot.drag-src{opacity:.35}
#scr-lineup.dragging .lnx-slot.empty{background:repeating-linear-gradient(45deg,#ffd75e40 0 6px,#0000 6px 12px),#3a3020}
#scr-lineup.dragging.from-slot .lnx-lower{outline:3px dashed #ff8b8b;outline-offset:-2px}
.lnx-lower.drop-over{background:#ff6b6b26}
/* 下面：分類＋角色卡 */
.lnx-lower{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.lnx-filters{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.lnx-filters .upx-f{padding:2px 7px;font-size:12px}
.lnx-sortbtn{margin-left:auto}
.lnx-pool{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:9px 7px;align-content:start;
  padding:6px 5px 6px 3px;scrollbar-width:thin;scrollbar-color:#8a5423 #0003}
/* 拖曳中跟著滑鼠的那張卡 */
.lnx-ghost{position:absolute;left:0;top:0;z-index:60;pointer-events:none;line-height:0;padding:2px;
  background:linear-gradient(#fff6c9,#ffd98a);border:3px solid #000;box-shadow:0 10px 18px #000a}
/* 右邊 */
.lnx-side{flex:0 0 292px;min-height:0;display:flex;flex-direction:column;gap:6px;padding:9px 10px 10px;border:4px solid #000;
  background:linear-gradient(#fdf2d8,#ecd6a6);box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #c9ab72,0 5px 0 #00000059}
.lnx-info{flex:0 0 auto;min-height:148px}
.lnx-ihead{display:flex;gap:8px;align-items:center}
.lnx-ihead.r-legend{--hc:#c93fb0}.lnx-ihead.r-uber{--hc:#e0932b}.lnx-ihead.r-sr{--hc:#3fbf4a}.lnx-ihead.r-rare{--hc:#3a9ad8}.lnx-ihead.basic{--hc:#3f9c6a}
.lnx-iname{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.lnx-iname b{font-size:17px;font-weight:900;color:#3d2308;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnx-iname .dxx-badges{flex-wrap:wrap}
.lnx-istats{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:6px}
.lnx-istats span{display:flex;flex-direction:column;align-items:center;padding:1px 0 2px;background:#1c1206;border:2px solid #000;box-shadow:inset 0 2px 3px #000a;
  font-size:9.5px;font-weight:800;color:#e8cf98;line-height:1.25}
.lnx-istats b{font-size:12.5px;font-weight:900;color:#ffd75c}
.lnx-itags{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px;max-height:38px;overflow:hidden}
.lnx-iempty{height:140px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12.5px;font-weight:800;color:#8a7a5a}
.lnx-sec{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding-bottom:2px;font-size:11.5px;font-weight:900;letter-spacing:2px;color:#8a5a12;border-bottom:2px solid #00000026}
.lnx-sec .pxi{width:16px;height:16px}
.lnx-sec em{margin-left:auto;font-style:normal;font-size:10.5px;letter-spacing:0;color:#9a7a4a}
.lnx-cover{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:5px 4px;padding-top:4px}
.lnx-tr{position:relative;font-style:normal;font-size:11px;font-weight:900;padding:2px 7px;color:#9a96a8;background:#3a3650;border:2px solid #000;cursor:help}
.lnx-tr.on{color:var(--c);background:#1c1206;box-shadow:0 0 6px var(--c)}
.lnx-tr b{position:absolute;right:-6px;top:-8px;min-width:14px;text-align:center;font-size:9px;line-height:12px;color:#fff;background:#2f9a3c;border:1.5px solid #000}
.lnx-combos{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:2px 2px 2px 0;scrollbar-width:thin;scrollbar-color:#8a5423 #0000}
.lnx-cb{flex:0 0 auto;padding:3px 7px;background:#fffdf5;border:2px solid #0000003d;opacity:.62}
.lnx-cb.s0{opacity:1;border-color:#2f9a3c;background:linear-gradient(#e6ffd9,#c9f0b4)}
.lnx-cb.s1{opacity:1;border-color:#c98a10;border-style:dashed}
.lnx-cbh{display:flex;align-items:baseline;gap:6px;min-width:0}
.lnx-cbh b{flex:0 0 auto;font-size:12px;font-weight:900;color:#3d2308}
.lnx-cbh span{font-size:10.5px;font-weight:800;color:#8a4a12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnx-cbu{display:flex;align-items:center;gap:1px;font-size:10.5px;font-weight:800;color:#8a7a5a}
.lnx-cbu i{font-style:normal}
.lnx-cbu i.got{color:#1f6a2c;font-weight:900}
.lnx-cbu em{margin-left:auto;font-style:normal;font-size:10px;font-weight:900;color:#fff;background:#c98a10;border:1.5px solid #000;padding:0 4px;white-space:nowrap}
.lnx-cbu em.on{background:#2f9a3c}
.lnx-links{flex:0 0 auto;display:flex;gap:6px}
.lnx-links .px-btn{flex:1;padding:5px 0;font-size:13px;border-width:3px}
.lnx-links .px-btn .pxi{width:16px;height:16px}

/* =========================================================
   夥伴養成機（v8.3，vpet.js）：Minecraft 石磚外殼的 V-Pet ＋ 右邊的狀態面板；基地上的小機器與腳邊的便便
   ========================================================= */
:root{
  --vp-brick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'%3E%3Crect width='48' height='48' fill='%238c8c8c'/%3E%3Crect y='0' width='48' height='3' fill='%23555'/%3E%3Crect y='24' width='48' height='3' fill='%23555'/%3E%3Crect x='0' y='3' width='3' height='21' fill='%23555'/%3E%3Crect x='24' y='27' width='3' height='21' fill='%23555'/%3E%3Crect x='3' y='3' width='45' height='3' fill='%23a6a6a6'/%3E%3Crect x='3' y='21' width='45' height='3' fill='%23747474'/%3E%3Crect x='0' y='27' width='24' height='3' fill='%23a6a6a6'/%3E%3Crect x='27' y='27' width='21' height='3' fill='%23a6a6a6'/%3E%3Crect x='0' y='45' width='24' height='3' fill='%23747474'/%3E%3Crect x='27' y='45' width='21' height='3' fill='%23747474'/%3E%3Crect x='9' y='9' width='3' height='3' fill='%239b9b9b'/%3E%3Crect x='36' y='12' width='3' height='3' fill='%23808080'/%3E%3Crect x='12' y='33' width='3' height='3' fill='%23808080'/%3E%3Crect x='39' y='36' width='3' height='3' fill='%239b9b9b'/%3E%3C/svg%3E");
}
#vpet-overlay{position:absolute;inset:0;z-index:74;display:flex;align-items:center;justify-content:center;background:#05060cc4;backdrop-filter:blur(2px)}
#vpet-overlay.hidden{display:none}
.vp-wrap{display:flex;gap:16px;align-items:stretch;animation:vp-in .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes vp-in{from{opacity:0;transform:translateY(18px) scale(.94)}}
/* ---- 機器本體：階梯狀的像素圓角（clip-path）＋外層用 drop-shadow 描黑邊（黑邊會跟著階梯形狀走） ---- */
.vp-device-o{filter:drop-shadow(4px 0 0 #000) drop-shadow(-4px 0 0 #000) drop-shadow(0 4px 0 #000) drop-shadow(0 -4px 0 #000) drop-shadow(0 10px 0 #000a)}
.vp-device{position:relative;width:420px;height:100%;padding:14px 22px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--vp-brick) 0 0/48px 48px,#8c8c8c;
  clip-path:polygon(24px 0,calc(100% - 24px) 0,calc(100% - 24px) 12px,calc(100% - 12px) 12px,calc(100% - 12px) 24px,100% 24px,100% calc(100% - 36px),
    calc(100% - 12px) calc(100% - 36px),calc(100% - 12px) calc(100% - 20px),calc(100% - 28px) calc(100% - 20px),calc(100% - 28px) calc(100% - 8px),
    calc(100% - 48px) calc(100% - 8px),calc(100% - 48px) 100%,48px 100%,48px calc(100% - 8px),28px calc(100% - 8px),28px calc(100% - 20px),
    12px calc(100% - 20px),12px calc(100% - 36px),0 calc(100% - 36px),0 24px,12px 24px,12px 12px,24px 12px)}
.vp-device::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 5px 5px 0 #ffffff33,inset -5px -5px 0 #00000040}
.vp-brand{display:flex;align-items:center;gap:6px;padding:3px 12px;font-size:13px;font-weight:900;letter-spacing:3px;color:#ffe27a;
  background:#1c1206;border:3px solid #000;box-shadow:inset 0 0 0 2px #7a5a1a,0 3px 0 #0007;text-shadow:0 0 6px #ffae2a88}
.vp-brand b{font-size:9.5px;letter-spacing:2px;color:#e8cf98}
.vp-brand .pxi{width:18px;height:18px}
/* 臉：深灰內框，上下各四個圖示、中間液晶 */
.vp-face{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 12px 10px;background:linear-gradient(#3a3d44,#2a2c31);
  border:4px solid #000;box-shadow:inset 3px 3px 0 #ffffff1c,inset -3px -3px 0 #0008,0 4px 0 #0007}
.vp-icons{display:flex;gap:6px}
.vp-ic{position:relative;width:74px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 0 2px;cursor:pointer;font-family:inherit;
  background:#23252a;border:2px solid #0000;color:#c9cdd6;transition:background .1s}
.vp-ic .pxi{width:24px;height:24px;filter:grayscale(.35) brightness(.9)}
.vp-ic span{font-size:11px;font-weight:900;letter-spacing:1px}
.vp-ic:hover{background:#30333a}
.vp-ic:hover .pxi{filter:none}
/* 選到的圖示：原作是液晶邊緣亮起一個黑色三角形，這裡是白框＋上面一顆小三角 */
.vp-ic.sel{border-color:#e8ecef;background:#3a3e46}
.vp-ic.sel .pxi{filter:none}
.vp-ic.sel::before{content:"";position:absolute;left:50%;top:-8px;margin-left:-5px;border:5px solid #0000;border-top-color:#ffe27a;filter:drop-shadow(0 1px 0 #000)}
.vp-icons:last-child .vp-ic.sel::before{top:auto;bottom:-8px;border-top-color:#0000;border-bottom-color:#ffe27a}
.vp-ic.alert{animation:vp-alert .7s steps(2) infinite}
.vp-ic.alert .pxi{filter:none}
@keyframes vp-alert{50%{background:#8a2a22;color:#fff}}
.vp-ic.on{color:#ffe27a}
.vp-screen{line-height:0;padding:6px;background:#1a1d16;border:3px solid #000;box-shadow:inset 0 0 0 2px #4a5238,inset 0 6px 10px #000c}
.vp-screen canvas{display:block;cursor:pointer}
/* A B C 三顆鍵 */
.vp-keys{display:flex;gap:26px;margin-top:2px}
.vp-key{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;border:0;background:none;cursor:pointer;font-family:inherit}
.vp-key b{width:42px;height:42px;display:grid;place-items:center;font-size:18px;font-weight:900;color:#fff;
  background:linear-gradient(#e0493b,#9e1f16);border:4px solid #000;box-shadow:inset 3px 3px 0 #ff9a8a,inset -3px -3px 0 #6a120c,0 4px 0 #0008;
  text-shadow:0 2px 0 #0008}
.vp-key:nth-child(2) b{background:linear-gradient(#f0c040,#b88610);box-shadow:inset 3px 3px 0 #fff0a0,inset -3px -3px 0 #7a5608,0 4px 0 #0008}
.vp-key:nth-child(3) b{background:linear-gradient(#5f8cc4,#2d5588);box-shadow:inset 3px 3px 0 #bcd8f5,inset -3px -3px 0 #1c3658,0 4px 0 #0008}
.vp-key:active b{transform:translateY(3px);box-shadow:inset 3px 3px 0 #0003,0 1px 0 #0008}
.vp-key small{font-size:10.5px;font-weight:900;color:#1c1c1c;text-shadow:0 1px 0 #fff8}

/* ---- 右邊：狀態面板 ---- */
.vp-panel{width:392px;height:494px;display:flex;flex-direction:column;gap:6px;padding:0 12px 12px;overflow:hidden;border:4px solid #000;
  background:linear-gradient(#fdf2d8,#ecd6a6);box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #c9ab72,0 6px 0 #00000080;animation:vp-in .4s cubic-bezier(.2,1.4,.4,1)}
.vp-ph{display:flex;align-items:center;gap:8px;margin:0 -12px;padding:8px 10px 8px 14px;border-bottom:4px solid #000;
  background:repeating-linear-gradient(92deg,var(--wood) 0 7px,var(--wood-d) 7px 11px,var(--wood-l) 11px 15px)}
.vp-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.vp-title small{font-size:11px;font-weight:900;letter-spacing:3px;color:#ffe9a8;text-shadow:0 1px 0 #000}
.vp-title b{font-size:23px;font-weight:900;letter-spacing:2px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)}
#vp-close{width:34px;height:34px;padding:0;font-size:15px}
.vp-say{min-height:34px;padding:5px 10px;font-size:12.5px;font-weight:800;line-height:1.5;color:#1f2a14;white-space:pre-line;
  background:linear-gradient(#e7f0cf,#cfdcae);border:3px solid #000;box-shadow:inset 0 2px 0 #fff8}
.vp-say.pop{animation:vp-say .3s ease}
@keyframes vp-say{from{opacity:.2;transform:translateY(-3px)}}
.vp-stats{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}
.vp-row{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:#6b4a1e}
.vp-row.half{grid-column:auto}
.vp-row span{flex:0 0 auto;min-width:48px;font-size:11.5px;font-weight:900;color:#8a5a12}
.vp-row b{font-weight:900;color:#3d2308;white-space:nowrap}
.vp-row b small{font-size:10.5px;font-weight:800;color:#8a7a5a}
.vp-row b.bad{color:#c2372f}
.vp-hearts{display:flex;gap:3px}
.vp-hearts .pxi{width:17px;height:17px;opacity:.25;filter:grayscale(1)}
.vp-hearts .pxi.on{opacity:1;filter:drop-shadow(0 1px 0 #0006)}
.vp-hearts .pxi.str.on{filter:hue-rotate(200deg) saturate(1.3) drop-shadow(0 1px 0 #0006)}
.vp-hearts .pxi.eff.on{filter:hue-rotate(60deg) saturate(1.4) brightness(1.1) drop-shadow(0 1px 0 #0006)}
.vp-egg-note{grid-column:1/-1;display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:800;line-height:1.6;color:#5a3512}
.vp-egg-note .pxi{width:30px;height:30px;flex:0 0 auto}
.vp-needs{display:flex;flex-direction:column;gap:3px}
.vp-need-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.vp-need{display:inline-flex;align-items:center;gap:3px;padding:1px 6px 1px 3px;font-size:11.5px;background:#ffe3dc;border:2px solid #c2372f;cursor:help;
  animation:vp-need 1s ease-in-out infinite alternate}
@keyframes vp-need{to{background:#fff3ef}}
.vp-need .pxi{width:16px;height:16px;flex:0 0 auto}
.vp-need b{font-weight:900;color:#a02018;white-space:nowrap}
.vp-need.ok{background:#e6ffd9;border-color:#3f9c48;animation:none;cursor:default}
.vp-need.ok b{color:#1f6a2c}
.vp-need-note{font-style:normal;font-size:11px;font-weight:800;color:#3d5a2a}
.vp-need-tip{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:800;color:#8a3a2a}
.vp-need-tip .pxi{width:14px;height:14px}
.vp-sec{font-size:11px;font-weight:900;letter-spacing:2px;color:#8a5a12;border-bottom:2px solid #00000026;padding-bottom:1px}
.vp-evo{flex:0 1 auto;min-height:60px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin}
.vp-panel>*{flex-shrink:0}
.vp-panel>.vp-evo{flex-shrink:1}
.vp-evo-to{font-size:12px;font-weight:800;color:#6b4a1e}
.vp-evo-to b{color:#3d2308}
.vp-evo-to em{margin-left:8px;font-style:normal;font-weight:900;color:#fff;background:#c93fb0;border:2px solid #000;padding:0 6px;animation:vp-alert .8s steps(2) infinite}
.vp-cond{display:grid;grid-template-columns:62px 1fr 104px;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:#6b4a1e}
.vp-cond>i{position:relative;display:block;height:9px;background:#1c1206;border:2px solid #000}
.vp-cond>i>i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#ffe08a,#f0b429)}
.vp-cond.ok>i>i{background:linear-gradient(#d8ff8a,#6fc23a)}
.vp-cond b{text-align:right;font-weight:900;color:#3d2308;white-space:nowrap}
.vp-cond.ok b{color:#1f7a2c}
.vp-evo-hint{font-size:10.5px;font-weight:800;line-height:1.5;color:#8a4a12}
.vp-evo-done{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:900;color:#6b4a1e}
.vp-evo-done .pxi{width:20px;height:20px}
.vp-perk{margin-top:auto;display:flex;align-items:center;gap:6px;padding:5px 9px;font-size:12px;font-weight:800;color:#e8cf98;background:#1c1206;border:2px solid #000}
.vp-perk .pxi{width:18px;height:18px}
.vp-perk b{color:#ffd75c}
.vp-dev{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.vp-dev.hidden{display:none}
.vp-dev .px-btn{padding:2px 0;font-size:10.5px;border-width:3px;white-space:nowrap}

/* ---- 基地：左下角的小養成機 ---- */
.base-vpet{position:absolute;left:22px;top:118px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;
  cursor:pointer;font-family:inherit;transform:rotate(-5deg);transition:transform .15s}
.base-vpet:hover{transform:rotate(0) translateY(-3px)}
.bv-shell{position:relative;display:block;line-height:0;padding:9px 9px 20px;background:var(--vp-brick) 0 0/32px 32px,#8c8c8c;border:3px solid #000;
  box-shadow:inset 3px 3px 0 #ffffff33,inset -3px -3px 0 #00000040,0 5px 0 #0008,0 10px 18px #0006}
.bv-lcd{display:block;border:3px solid #1a1d16;box-shadow:0 0 0 2px #2a2c31}
.bv-keys{position:absolute;left:0;right:0;bottom:5px;display:flex;justify-content:center;gap:10px}
.bv-keys b{width:9px;height:9px;background:#c2372f;border:2px solid #000}
.bv-keys b:nth-child(2){background:#e0a820}
.bv-keys b:nth-child(3){background:#3f6fa8}
.bv-tag{padding:1px 9px;font-size:12px;font-weight:900;letter-spacing:1px;color:#3d2308;white-space:nowrap;
  background:linear-gradient(#fff3c4,#ffca4a);border:2px solid #000;box-shadow:0 2px 0 #0007}
.base-vpet.alert .bv-tag{color:#fff;background:linear-gradient(#f0605a,#b8322a);animation:bv-tag .9s steps(2) infinite}
@keyframes bv-tag{50%{background:linear-gradient(#ff8a80,#d8443a)}}
.base-vpet.alert .bv-shell::after{content:"!";position:absolute;right:-13px;top:-15px;width:24px;height:24px;display:grid;place-items:center;
  font-size:17px;font-weight:900;line-height:1;color:#fff;background:#e0392b;border:3px solid #000;box-shadow:0 2px 0 #0008;animation:bv-bang 1s ease-in-out infinite}
@keyframes bv-bang{50%{transform:translateY(-4px) rotate(8deg)}}
/* 腳邊的便便 */
.base-poops{position:absolute;left:0;right:0;bottom:0;height:0;z-index:3}
.bp-poop{position:absolute;bottom:14px;left:calc(300px + var(--i) * 52px);width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;
  animation:bp-in .35s cubic-bezier(.2,1.6,.4,1) both}
.bp-poop:nth-child(even){bottom:6px}
.bp-poop .pxi{width:34px;height:34px;filter:drop-shadow(0 3px 0 #0007)}
.bp-poop::after{content:"";position:absolute;left:8px;top:-12px;width:4px;height:10px;border-left:2px solid #6a8a3a;border-right:2px solid #6a8a3a;opacity:.7;
  animation:bp-stink 1.2s ease-in-out infinite}
@keyframes bp-stink{50%{transform:translate(3px,-4px) skewX(12deg);opacity:.3}}
@keyframes bp-in{from{transform:scale(.3) translateY(10px);opacity:0}}
.bp-poop:hover{transform:translateY(-3px)}
.bp-poop.gone{animation:bp-gone .3s ease-in forwards}
@keyframes bp-gone{to{transform:translateX(40px) scale(.3);opacity:0}}
/* 夥伴本人的狀態：生病偏綠、睡覺變暗＋Zzz、完全體以上有光環、究極體金光 */
#scr-base .base-cat-btn.vp-sick .base-cat{filter:drop-shadow(0 6px 10px #0006) sepia(.35) hue-rotate(50deg) saturate(1.3) brightness(.95)}
#scr-base .base-cat-btn.vp-sleep .base-cat{filter:drop-shadow(0 6px 10px #0006) brightness(.55) saturate(.7);animation-duration:6s}
#scr-base.vp-night .base-scene{filter:brightness(.42) saturate(.7) hue-rotate(10deg)}
#scr-base .base-cat-btn.vp-sleep::after{content:"Z z z";position:absolute;right:26%;top:12%;font-size:22px;font-weight:900;letter-spacing:4px;line-height:1;color:#dfe8ff;
  text-shadow:0 2px 0 #0008;animation:vp-zzz 2.4s ease-in-out infinite;z-index:3}
@keyframes vp-zzz{0%{opacity:0;transform:translate(0,10px) scale(.8)}30%{opacity:1}100%{opacity:0;transform:translate(18px,-22px) scale(1.1)}}
#scr-base .base-cat-btn.vp-aura:not(.vp-sleep)::after{content:"";position:absolute;left:12%;right:12%;top:8%;bottom:6%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,#9fe8ff99,#9fe8ff00);animation:vp-aura 2.2s ease-in-out infinite}
#scr-base .base-cat-btn.vp-ult:not(.vp-sleep)::after{background:radial-gradient(closest-side,#ffe27acc,#ffb84a55 60%,#ffb84a00)}
@keyframes vp-aura{50%{transform:scale(1.08);opacity:.75}}
.cat-status{position:absolute;left:50%;top:6%;width:30px;height:30px;margin-left:-15px;z-index:3;pointer-events:none;
  filter:drop-shadow(0 2px 0 #000a);animation:bv-bang 1.2s ease-in-out infinite}
/* 名牌上的養成階段 */
.bp-stage{font-style:normal;font-size:10.5px;font-weight:900;padding:0 5px;color:#fff;background:#3f9c48;border:2px solid #000;white-space:nowrap}
.bp-stage.s0{background:#8a7a5a}.bp-stage.s1{background:#4aa8e0}.bp-stage.s2{background:#3f9c48}
.bp-stage.s3{background:#e0932b}.bp-stage.s4{background:#c93fb0}.bp-stage.s5{background:linear-gradient(#ffd75e,#e0951e);color:#3d2308}
/* 基地對話框：整句包在一個 span 裡（見 refreshBaseBubble 的註解） */
.bb-text{display:block;text-align:center}
.bb-text small{font-size:12.5px;font-weight:800;color:#4a6a60}

/* =========================================================
   v8.4 夥伴羈絆（養成機養大的角色出擊時的加成）：徽章、出擊鈕的小愛心／皇冠、換夥伴選單的階段
   ========================================================= */
.bond-chip{display:inline-flex;align-items:center;gap:3px;font-style:normal;padding:0 6px 0 3px;font-size:11px;font-weight:900;line-height:18px;white-space:nowrap;
  color:#fff;background:linear-gradient(#ff8fc8,#d8468e);border:2px solid #000;box-shadow:0 2px 0 #0006}
.bond-chip .pxi{width:14px;height:14px;filter:drop-shadow(0 1px 0 #0008)}
.bond-chip.s5{color:#3d2308;background:linear-gradient(#fff3c4,#ffca4a 45%,#ff9ad0);box-shadow:0 2px 0 #0006,0 0 10px #ffd75e99}
.upx-bond{position:absolute;right:8px;top:30px;z-index:2}
.dx-bond{display:flex;margin-bottom:6px;padding:2px 8px 2px 4px;font-size:11.5px;line-height:1.5;white-space:normal}
#unit-tip .tip-bond{display:flex;align-items:center;gap:4px;color:#c2307a;font-weight:900}
#unit-tip .tip-bond .pxi{width:14px;height:14px}
/* 出擊鈕右上角（快捷鍵在右上，所以放左上） */
.ubtn .u-bond{position:absolute;left:2px;top:2px;z-index:3;width:17px;height:17px;display:grid;place-items:center;
  background:#d8468e;border:1.5px solid #000;border-radius:50%;box-shadow:0 1px 0 #0008}
.ubtn .u-bond .pxi{width:11px;height:11px}
.ubtn .u-bond.s5{background:linear-gradient(#fff3c4,#ffca4a);box-shadow:0 0 6px #ffd75e}
/* 換夥伴選單：改成全站一致的奶油色像素面板，每一格標上養成階段 */
#mascot-overlay .mascot-card{border-radius:0;border:4px solid #000;background:linear-gradient(#fdf2d8,#ecd6a6);
  box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #c9ab72,0 6px 0 #0008,0 18px 40px #000a}
#mascot-overlay .mascot-head b{display:flex;align-items:baseline;gap:12px;color:#3d2308;text-shadow:none}
#mascot-overlay .mascot-head small{font-size:12px;letter-spacing:1px;color:#8a5a12}
#mascot-overlay .mascot-head small em{font-style:normal;color:#c2307a;font-size:14px}
#mascot-overlay .mascot-grid{border-radius:0;background:#00000014;border:2px solid #0000002e}
#mascot-overlay .mascot-note{color:#6b4a1e;opacity:1}
#mascot-overlay .mascot-note b{color:#b4530a}
.mi-stage{display:inline-flex;align-items:center;gap:2px;margin-top:1px;padding:0 5px;font-style:normal;font-size:10px;font-weight:900;line-height:15px;
  color:#fff;background:#8a7a5a;border:1.5px solid #000}
.mi-stage .pxi{width:11px;height:11px}
.mi-stage.sn{background:#a79c86;color:#f5efe0}
.mi-stage.s0{background:#8a7a5a}.mi-stage.s1{background:#4aa8e0}.mi-stage.s2{background:#3f9c48}
.mi-stage.s3{background:#e0932b}.mi-stage.s4{background:#c93fb0}.mi-stage.s5{background:linear-gradient(#ffd75e,#e0951e);color:#3d2308}
/* 養成機面板：兩種加成各一行，下面一行小字寫「養滿能拿到什麼」 */
.vp-perk{flex-direction:column;align-items:stretch;gap:3px}
.vp-perk>div{display:flex;align-items:center;gap:6px}
.vp-perk>div>span{min-width:0}
.vp-perk .vp-perk-max{display:block;padding-left:24px;font-size:10.5px;font-weight:800;line-height:1.45;color:#c9b27a}
.vp-perk .vp-perk-max.ok{color:#ffd75c}
/* 格子右下角的羈絆小徽章（升級、編成、圖鑑共用） */
/* 小養成機：只有想睡的時候是藍色標籤（不閃紅燈） */
.base-vpet.sleepy .bv-tag{color:#fff;background:linear-gradient(#7fa8e0,#3f6fa8)}
/* =========================================================
   v9.0 卡槽面板（養成機右邊，取代原本「下一次進化」的條件清單）、死亡的樣子
   ========================================================= */
.vp-sec small{margin-left:8px;font-size:10px;letter-spacing:0;font-weight:800;color:#a07a3a}
.vp-slot{gap:4px}
.vps-cur,.vps-saved,.vps-stock{display:flex;align-items:center;gap:6px;min-height:28px;padding:2px 6px;font-size:12px;font-weight:900;color:#3d2308;
  background:#fff8e6;border:2px solid #000;box-shadow:inset 0 -2px 0 #0000001f}
.vps-cur{background:linear-gradient(#e6ffd9,#c9f0b0)}
.vps-cur.empty{background:#f0e6d0;color:#8a7a5a}
.vps-cur.dead{background:linear-gradient(#ece4ec,#c9bcc9);color:#5a4a5a}
.vps-cur .pxi,.vps-saved .pxi,.vps-stock .pxi{width:20px;height:20px;flex:0 0 auto}
.vps-cur b,.vps-saved span{white-space:nowrap}
.vps-cur em,.vps-saved em{flex:1;min-width:0;font-style:normal;font-size:11.5px;color:#6b4a1e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vps-stock span{flex:1;white-space:nowrap}
.vps-stock b{color:#b4530a}
.vps-stock small{font-size:10.5px;font-weight:800;color:#8a5a12;white-space:nowrap}
.vps-btn{flex:0 0 auto;padding:1px 8px;font-size:11px;border-width:2px;white-space:nowrap}
.vps-btn.danger{color:#fff;--f1:#f0605a;--f2:#b8322a;--hi:#ff9a8a;--lo:#7a1a14}
.vps-btn.go{--f1:#8ef07a;--f2:#3f9c48;--hi:#d8ffc9;--lo:#1f6a2c}
.vps-btn[disabled]{filter:grayscale(1) brightness(.85);cursor:not-allowed}
.vps-note{font-size:10.5px;font-weight:800;line-height:1.4;color:#a02018}
.base-vpet.dead .bv-tag{color:#fff;background:linear-gradient(#8a8a9a,#4a4a5a)}
.bp-stage.dead{background:#4a4a5a}

/* =========================================================
   v9.1 養成機左邊的實體卡槽插孔（使用者：「夥伴養成機，我希望可以設計就是有個插槽在機器的下方或左方，讓玩家插入卡槽的時候有畫面感」）
   石磚讀卡座 ＋ 卡匣（跟 pxi-slot 同一個樣子：灰色塑膠殼、白色標籤、金色接點；標籤上緣的色條＝目前的階段）。
   卡匣排在讀卡座「後面」（z-index），所以推進去的那一段會被讀卡座的正面蓋住，看起來就是插進了側面的插孔；
   外層 .vp-device-o 的 drop-shadow 會順便幫讀卡座、卡匣、碎片描上黑邊，跟機器是同一種像素外框。
   ========================================================= */
.vp-device-o{position:relative}
.vp-wrap{padding-left:98px}                /* 左邊留給插孔＋露出來的卡匣，不然會被畫面左緣切掉 */
.vp-port{position:absolute;left:-48px;top:176px;width:58px;height:112px;z-index:3}
.vp-port-body{position:absolute;inset:0;z-index:2;background:var(--vp-brick) -4px -8px/48px 48px,#8c8c8c;
  box-shadow:inset 4px 4px 0 #ffffff38,inset -4px -4px 0 #00000045}
.vp-port-slit{position:absolute;left:6px;top:14px;width:9px;height:84px;background:#08090b;box-shadow:inset 3px 0 0 #000,inset -2px 0 0 #2b2e35,2px 0 0 #ffffff2a}
.vp-port-led{position:absolute;right:10px;top:15px;width:9px;height:9px;background:#2a2d33;border:2px solid #000;box-shadow:inset 1px 1px 0 #ffffff22}
.vp-port.has .vp-port-led{background:#5cff6a;box-shadow:0 0 7px #5cff6a,inset 1px 1px 0 #e0ffe0}
.vp-port.dead .vp-port-led{background:#ff4a3a;box-shadow:0 0 7px #ff4a3a,inset 1px 1px 0 #ffd0c8}
.vp-port-txt{position:absolute;right:10px;top:36px;writing-mode:vertical-rl;font-size:10px;font-weight:900;letter-spacing:2px;color:#34363c;text-shadow:1px 1px 0 #ffffff50}
.vp-port-hint{position:absolute;z-index:3;left:-26px;top:46px;display:none;font-size:18px;line-height:1;color:#ffe27a;animation:vp-hint .8s steps(2) infinite}
.vp-port.can{cursor:pointer}
.vp-port.can .vp-port-hint{display:block}
@keyframes vp-hint{50%{transform:translateX(7px)}}
/* 卡匣：插到底時露出左邊 60px（握把＋標籤），右邊的接點藏在讀卡座裡 */
.vp-cart{position:absolute;z-index:1;left:-54px;top:26px;width:92px;height:60px;display:none;
  background:linear-gradient(90deg,#eef1f8,#c7ccd6 34%,#aab1bd);border:3px solid #1d1a2e;box-shadow:inset 2px 2px 0 #fffa,inset -3px -3px 0 #6f7784}
.vp-cart::before{content:"";position:absolute;left:3px;top:8px;bottom:8px;width:7px;background:repeating-linear-gradient(90deg,#6f7784 0 2px,#0000 2px 4px)}
.vp-cart::after{content:"";position:absolute;right:1px;top:9px;bottom:9px;width:12px;border-left:2px solid #1d1a2e;background:repeating-linear-gradient(#ffd75e 0 3px,#c98a1e 3px 5px)}
.vp-cart-lbl{position:absolute;left:12px;top:3px;width:44px;height:48px;line-height:0;background:#fbf8ef;border:2px solid #1d1a2e;border-top:7px solid var(--sc,#8a7a5a)}
.vp-cart-lbl canvas{display:block}
.vp-cart-crk{position:absolute;inset:0;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 60' shape-rendering='crispEdges'%3E%3Cpath d='M38 -2 L46 14 L35 28 L48 40 L40 62' fill='none' stroke='%231d1a2e' stroke-width='3'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.vp-port.has .vp-cart,.vp-cart.anim{display:block}
.vp-cart.dead{filter:grayscale(1) brightness(.78)}
.vp-cart.in{animation:vp-cart-in .72s cubic-bezier(.3,.7,.4,1) both}
@keyframes vp-cart-in{0%{transform:translate(-46px,74px) rotate(-16deg);opacity:0}     /* 從左下方飛上來（左邊只剩 13px，不能從更左邊來） */
  30%{transform:translate(-36px,0) rotate(0);opacity:1}
  60%{transform:translate(-34px,0)}
  84%{transform:translate(4px,0)}
  100%{transform:none}}
.vp-cart.out{animation:vp-cart-out .48s ease-in both}
@keyframes vp-cart-out{0%{transform:none}24%{transform:translate(-42px,0)}40%{transform:translate(-48px,-6px) rotate(-4deg)}
  100%{transform:translate(-96px,84px) rotate(-38deg);opacity:0}}
.vp-cart.crack{animation:vp-cart-crack .56s linear both}
.vp-cart.crack .vp-cart-crk{animation:vp-crk .56s steps(1) forwards}
@keyframes vp-cart-crack{0%{transform:none}28%{transform:translate(-40px,0)}40%{transform:translate(-37px,0) rotate(2deg)}52%{transform:translate(-43px,0) rotate(-2deg)}
  64%{transform:translate(-38px,0) rotate(1deg)}76%,100%{transform:translate(-40px,0)}}
@keyframes vp-crk{0%{opacity:0}48%{opacity:1}}
/* 銷毀的碎片：先往外噴、再往下掉 */
.vp-shard{position:absolute;z-index:4;left:-44px;top:52px;width:8px;height:8px;background:var(--c);animation:vp-shard .8s cubic-bezier(.3,.5,.6,1) forwards}
@keyframes vp-shard{45%{transform:translate(calc(var(--dx) * .6),var(--up)) rotate(calc(var(--r) * .5))}
  100%{transform:translate(var(--dx),var(--dn)) rotate(var(--r));opacity:0}}
/* 推到底：機器震一下、液晶「開機」閃一下（掃描線從中間展開再淡掉） */
.vp-device-o.thunk{animation:vp-thunk .22s steps(3)}
@keyframes vp-thunk{33%{transform:translateX(4px)}66%{transform:translateX(-2px)}}
.vp-screen{position:relative}
.vp-screen.boot::after{content:"";position:absolute;inset:6px;pointer-events:none;
  background:repeating-linear-gradient(0deg,#0000 0 3px,#1a1d1640 3px 5px),#b9c98f;animation:vp-boot .85s steps(10) forwards}
@keyframes vp-boot{0%{clip-path:inset(48% 0 48% 0)}18%{clip-path:inset(0)}55%{opacity:.85}100%{clip-path:inset(0);opacity:0}}
/* 基地上的小養成機：插著卡槽時左邊也露出一小截卡匣 */
.bv-shell::before{content:"";position:absolute;left:-12px;top:50%;width:10px;height:18px;margin-top:-11px;display:none;
  background:linear-gradient(90deg,#eef1f8,#c7ccd6);border:2px solid #000;border-right:0;box-shadow:inset 0 4px 0 var(--sc,#8a7a5a)}
.base-vpet.cart .bv-shell::before{display:block}
.base-vpet.dead .bv-shell::before{filter:grayscale(1) brightness(.78)}
body.fx-lite .vp-device-o.thunk{animation:none}