/* 2026-10-20 測試版（使用者：橫式背包左邊裝備欄、右邊物品欄，兩邊都放大、一樣高一樣寬；先給我測試不要直接換）。
   背包標題列的「新版面（測試）」按鈕切換（bag-fit.js 設 html[data-bag-wide="1"]，並把裝備區包進 .bag-wide-left）。
   10/21 美化（使用者：新版很醜）：左右兩塊同一種木框、同高同寬（各 600×500）；分頁、格子、整理列放大；
   關閉鈕與切換鈕放在右塊右上角。 */
html[data-bag-wide="1"] body.touch-client #window-bag.client-window{max-width:none!important}
html[data-bag-wide="1"] body.touch-client #window-bag .window-header{width:auto!important;left:0!important;right:0!important}
html[data-bag-wide="1"] body.touch-client #window-bag .native-board.inventory-extended{width:1200px!important;height:500px!important}
html[data-bag-wide="1"] body.touch-client #window-bag .native-board.inventory-extended::before,
html[data-bag-wide="1"] body.touch-client #window-bag .native-board.inventory-extended::after{content:"";position:absolute;top:0;width:600px;height:500px;pointer-events:none;box-sizing:border-box;
 border:6px solid #5a3c22;border-radius:18px;box-shadow:inset 0 0 0 2px #a07a44,inset 0 0 24px #000c,0 4px 14px #0008}
html[data-bag-wide="1"] body.touch-client #window-bag .native-board.inventory-extended::before{left:600px;z-index:0;background:#2b2118 url('/assets/ui/native-detail-wood.png') center/auto repeat}
html[data-bag-wide="1"] body.touch-client #window-bag .native-board.inventory-extended::after{left:0;z-index:4;background:none}
/* 左塊：原本上方 369×307 的裝備區放大 1.626 倍（≈600×500），裁切處用木紋與外框收邊 */
html[data-bag-wide="1"] body.touch-client #window-bag .bag-wide-left{position:absolute;left:0;top:0;width:369px;height:307px;overflow:hidden;transform:scale(1.626);transform-origin:0 0;z-index:1;border-radius:11px;
 background:#2b2118 url('/assets/ui/native-detail-wood.png') center/auto repeat}
html[data-bag-wide="1"] body.touch-client #window-bag .bag-wide-left .inventory-continuous-frame .inventory-frame-footer{display:none!important}
/* 右塊 */
html[data-bag-wide="1"] body.touch-client #window-bag .native-board .bag-tabs{left:624px!important;top:22px!important;gap:6px!important;z-index:3}
html[data-bag-wide="1"] body.touch-client #window-bag .native-board .bag-tabs button{height:38px!important;line-height:36px!important;font-size:18px!important;padding:0 16px!important;border-radius:8px 8px 0 0!important}
html[data-bag-wide="1"] body.touch-client #window-bag .native-board .bag-tabs button small{font-size:14px!important}
html[data-bag-wide="1"] body.touch-client #window-bag .native-bag{left:624px!important;top:62px!important;width:552px!important;height:376px!important;grid-template-columns:repeat(6,92px)!important;grid-auto-rows:94px!important;z-index:3;
 padding:0!important;background:#120d09cc!important;border-radius:6px;box-shadow:inset 0 0 0 2px #6b4f30}
html[data-bag-wide="1"] body.touch-client #window-bag .native-bag .inventory-cell{width:92px!important;height:94px!important;min-height:94px!important;box-shadow:inset 0 0 0 1px #4a3826,inset 0 0 12px #0009;background:none!important}
html[data-bag-wide="1"] body.touch-client #window-bag .native-bag .inventory-cell>.native-item-icon{scale:2.3}
html[data-bag-wide="1"] body.touch-client #window-bag .native-bag .inventory-cell b{font-size:18px!important;bottom:4px!important;right:7px!important}
html[data-bag-wide="1"] body.touch-client #window-bag .inventory-extended .native-context-toolbar{left:624px!important;top:448px!important;width:552px!important;height:38px!important;z-index:3;justify-content:center;gap:10px}
html[data-bag-wide="1"] body.touch-client #window-bag .inventory-extended .native-context-toolbar button{font-size:16px!important;min-height:34px!important}
html[data-bag-wide="1"] body.touch-client #window-bag .window-header [data-close]{position:absolute!important;left:auto!important;right:14px!important;top:calc(100% + 8px)!important;z-index:6}
body.touch-client #window-bag .window-header{position:relative}
/* 10/21 新版面自己的關閉鈕（bag-fit.js 加在板子裡）：右塊右上角 */
html[data-bag-wide="1"] body.touch-client #window-bag .bag-wide-close{position:absolute;left:1132px;top:14px;width:52px;height:52px;min-height:0;padding:0;z-index:7;border:3px solid #c9a24a;border-radius:50%;background:#3a2716;color:#ffe9b0;font:700 34px/44px sans-serif;text-align:center;box-shadow:0 2px 6px #000a}
html[data-bag-wide="1"] body.touch-client #window-bag .window-header [data-close]{display:none!important}
/* 10/21 舊版面也用板子裡的關閉鈕（框內右上），標題列 X 在手機橫拿時藏起來 */
html:not([data-bag-wide="1"]) body.touch-client #window-bag .bag-wide-close{position:absolute;left:336px;top:-10px;width:44px;height:44px;min-height:0;padding:0;z-index:7;border:3px solid #c9a24a;border-radius:50%;background:#3a2716;color:#ffe9b0;font:700 30px/36px sans-serif;text-align:center;box-shadow:0 2px 6px #000a}
body.touch-client #window-bag[data-bag-fit] .window-header [data-close]{display:none!important}
/* 10/21 背包下方按鈕列（使用者：上頁下頁整理新版面併成一個小框、按鈕設計融合一點）：一整條木框分段按鈕，
   按鈕之間只用細分隔線；舊版面與新版面同一種樣式，新版面放大。 */
.desktop-client.touch-client #window-bag .inventory-extended .native-context-toolbar{display:flex!important;align-items:stretch!important;justify-content:stretch!important;gap:0!important;padding:0!important;box-sizing:border-box;overflow:hidden;
 border:1px solid #c9a24a!important;border-radius:7px!important;background:linear-gradient(#5e442a,#2d1f13)!important;box-shadow:inset 0 1px #ffe9b03a,inset 0 -1px #0008,0 1px 4px #000b!important}
.desktop-client.touch-client #window-bag .inventory-extended .native-context-toolbar>*{flex:1 1 0!important;min-width:0!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0 2px!important;
 border:0!important;border-left:1px solid #1a1009!important;border-radius:0!important;box-shadow:inset 1px 0 #ffe9b026!important;background:none!important;color:#ffe9b0!important;font:600 11px/21px sans-serif!important;text-align:center;white-space:nowrap;display:block!important;text-shadow:0 1px 1px #000}
.desktop-client.touch-client #window-bag .inventory-extended .native-context-toolbar>:first-child{border-left:0!important;box-shadow:none!important}
.desktop-client.touch-client #window-bag .inventory-extended .native-context-toolbar>[hidden]{display:none!important}
.desktop-client.touch-client #window-bag .inventory-extended .native-context-toolbar>.native-bag-page{flex:0 0 34px!important;background:#120c0766!important;color:#e9d49a!important;font-weight:700!important}
.desktop-client.touch-client #window-bag .inventory-extended .native-context-toolbar>button:disabled{color:#ffe9b04d!important}
.desktop-client.touch-client #window-bag .inventory-extended .native-context-toolbar>button:active:not(:disabled){background:#ffe9b026!important}
.desktop-client.touch-client #window-bag .inventory-extended .native-context-toolbar>[data-bag-wide-toggle]{color:#9fe0ff!important}
html:not([data-bag-wide="1"]) .desktop-client.touch-client #window-bag .native-bag{overflow:hidden!important}
html[data-bag-wide="1"] body.touch-client #window-bag .inventory-extended .native-context-toolbar>*{font-size:18px!important;line-height:40px!important}
html[data-bag-wide="1"] body.touch-client #window-bag .inventory-extended .native-context-toolbar>.native-bag-page{flex-basis:70px!important}
html[data-bag-wide="1"] body.touch-client #window-bag .inventory-extended .native-context-toolbar{height:42px!important;border-width:2px!important;border-radius:10px!important}
/* 10/21（使用者：新版面還是跑出畫面右邊）：視窗寬度改由 CSS 決定（遊戲重畫背包會改掉 JS 設的寬度），
   跟著 app 的 --native-board-scale；touch.css 的 left:50% + translateX(-50%) 會自動置中。 */
html[data-bag-wide="1"] body.touch-client #window-bag.client-window{width:calc(1200px * var(--native-board-scale, .5))!important;min-width:0!important}