/* =========================================================
   v9.4 儲藏庫爆改：Minecraft 物品欄（左邊分類分頁、中間灰色格子、右邊詳細）
   ========================================================= */
.sto2{flex:1;min-height:0;display:flex;gap:12px;padding:12px 14px 14px}
.sto2-tabs{flex:0 0 150px;display:flex;flex-direction:column;gap:5px;overflow-y:auto;padding:2px 8px 2px 0}
.sto2-tab{position:relative;display:flex;align-items:center;gap:6px;padding:6px 7px;cursor:pointer;font-family:inherit;font-size:12.5px;white-space:nowrap;font-weight:900;color:#1c1c1c;text-align:left;
  background:linear-gradient(#d8d8d8,#b4b4b4);border:3px solid #000;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #6a6a6a,0 3px 0 #0006;transition:transform .12s}
.sto2-tab .pxi{width:22px;height:22px;flex:0 0 auto;filter:drop-shadow(0 1px 0 #0005)}
.sto2-tab:hover{filter:brightness(1.05)}
.sto2-tab.on{background:linear-gradient(#fff3c4,#f0b429);box-shadow:inset 2px 2px 0 #fff3c4,inset -2px -2px 0 #a9761a,0 3px 0 #0006;transform:translateX(7px)}
.sto2-tab em{margin-left:auto;padding:0 5px;font-style:normal;font-size:10.5px;line-height:15px;color:#fff;background:#3d2308;border:2px solid #000}
.sto2-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.sto2-cap{display:flex;align-items:baseline;gap:10px}
.sto2-cap>b{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:18px;font-weight:900;letter-spacing:3px;color:#fff6dd;
  text-shadow:2px 2px 0 #1d4a41,-2px 2px 0 #1d4a41,2px -2px 0 #1d4a41,-2px -2px 0 #1d4a41}
.sto2-cap>b .pxi{width:24px;height:24px}
.sto2-cap>span{flex:1;min-width:0;font-size:11.5px;font-weight:800;color:#d8efe8}
.sto2-cap>span b{color:#ffd75e}
.sto2-cap>small{flex:0 0 auto;font-size:11px;font-weight:900;color:#ffd75e}
.sto2-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(var(--cols,8),1fr);gap:4px;align-content:start;padding:8px;
  background:#c6c6c6;border:4px solid #000;box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #555,0 5px 0 #00000059}
.sto2-slot{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:0;cursor:pointer;font-family:inherit;background:#8b8b8b;border:0;
  box-shadow:inset 3px 3px 0 #373737,inset -3px -3px 0 #fff;animation:sto2-in .35s cubic-bezier(.2,1.3,.4,1) var(--d,0s) both}
@keyframes sto2-in{from{opacity:0;transform:scale(.7)}}
.sto2-slot.empty{cursor:default;animation:none}
.sto2-slot .pxi{width:60%;height:60%;filter:drop-shadow(0 2px 0 #0006)}
.sto2-slot>b{position:absolute;right:4px;bottom:1px;font-size:14px;font-weight:900;color:#fff;text-shadow:2px 2px 0 #3f3f3f;font-variant-numeric:tabular-nums}
.sto2-slot:not(.empty):hover{background:#a8a8a8}
.sto2-slot.sel{background:#b9b9b9;outline:3px solid #fff;outline-offset:-3px;z-index:1}
.sto2-slot.zero .pxi{opacity:.32;filter:grayscale(1)}
.sto2-slot.zero>b{color:#e0e0e0;opacity:.7}
.sto2-slot.t1::after,.sto2-slot.t2::after{content:"";position:absolute;inset:3px;pointer-events:none;box-shadow:inset 0 0 10px var(--glow)}
.sto2-slot.t1{--glow:#72ccffaa}
.sto2-slot.t2{--glow:#c08bffcc}
.sto2-slot.zero::after{display:none}
.sto2-slot.on{background:#8fbf7e}
.sto2-slot>em{position:absolute;left:3px;top:3px;width:17px;height:17px;display:grid;place-items:center;background:#3f9c48;border:2px solid #000}
.sto2-slot>em .pxi{width:11px;height:11px;filter:none}
.sto2-co{position:absolute;left:3px;top:3px;padding:0 2px;font-style:normal;font-size:8px;font-weight:900;line-height:12px;color:#fff;background:var(--cc);border:1.5px solid #000;letter-spacing:-.3px}
.sto2-slot.pop{animation:sto2-pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes sto2-pop{40%{transform:scale(1.2)}}
.sto2-side{flex:0 0 300px;min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px;overflow-y:auto;border:4px solid #000;color:#3d2308;
  background:linear-gradient(#fffaea,#f3e3bb);box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #d8c18a,0 5px 0 #00000059}
.sto2-dt{display:flex;gap:10px;align-items:center}
.sto2-big{flex:0 0 auto;width:78px;height:78px;display:grid;place-items:center;background:#8b8b8b;border:3px solid #000;box-shadow:inset 3px 3px 0 #373737,inset -3px -3px 0 #fff}
.sto2-big .pxi{width:54px;height:54px;filter:drop-shadow(0 3px 0 #0006)}
.sto2-dt.t1 .sto2-big{box-shadow:inset 3px 3px 0 #373737,inset -3px -3px 0 #fff,0 0 12px #72ccff}
.sto2-dt.t2 .sto2-big{box-shadow:inset 3px 3px 0 #373737,inset -3px -3px 0 #fff,0 0 14px #c08bff}
.sto2-hd{min-width:0;display:flex;flex-direction:column;gap:2px}
.sto2-hd small{font-size:10.5px;font-weight:900;letter-spacing:1px;color:#8a5a12}
.sto2-hd b{font-size:17px;font-weight:900;line-height:1.25}
.sto2-hd span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800}
.sto2-hd strong{font-size:17px;color:#b4530a;font-variant-numeric:tabular-nums}
.sto2-desc{margin:0;font-size:12.5px;font-weight:700;line-height:1.6;color:#5a3512}
.sto2-rows{display:flex;flex-direction:column;gap:5px}
.sto2-rows div{display:flex;gap:6px;font-size:11.5px;font-weight:700;line-height:1.5}
.sto2-rows em{flex:0 0 auto;height:17px;padding:0 5px;font-style:normal;font-size:10.5px;font-weight:900;line-height:13px;color:#fff;background:#6b4a1e;border:2px solid #000}
.sto2-slabs{display:flex;justify-content:center;gap:6px;zoom:.72}
.sto2-btns{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.sto2-btns .px-btn{padding:8px 6px;font-size:14px}
.sto2-btns .pxi{width:18px;height:18px;vertical-align:-4px}
.sto2-none{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:800;color:#6b4a1e}
.sto2-none .pxi{width:48px;height:48px;opacity:.7}
