/* 2026-10-18（使用者：直式頁面按鈕以及顯示跟橫式的要調整）：衣櫥預覽及分類依容器寬度排列，觸控按鈕保留點擊空間。 */
.costume-shop{box-sizing:border-box;width:100%;min-width:0;max-width:100%;container-type:inline-size}
.costume-shop .costume-top{display:grid!important;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:12px;min-width:0}
.costume-shop .costume-top>.costume-stage-box{display:flex;flex:none!important;flex-direction:column;align-items:center;gap:8px;width:120px;min-width:0}
.costume-shop .costume-top>.costume-summary{min-width:0;max-width:100%;overflow-wrap:anywhere}
.costume-shop .costume-summary p{margin:0 0 8px;line-height:1.5}
.costume-shop .costume-summary .panel-note{margin:0 0 10px;font-size:12px;line-height:1.5}
.costume-shop .costume-stage{box-sizing:content-box;width:120px!important;height:150px!important;margin:0!important}
.costume-shop .costume-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-width:0;max-width:100%;align-items:stretch}
.costume-shop .costume-tabs label{grid-column:1/-1;margin:2px 0;white-space:normal}
.costume-shop .costume-tabs button,.costume-shop .costume-btn{box-sizing:border-box;display:flex!important;align-items:center;justify-content:center;text-align:center;min-width:0!important;width:100%!important;height:auto!important;min-height:36px!important;padding:6px 7px!important;border-radius:6px!important;font-size:12px!important;line-height:1.3!important;white-space:normal;word-break:keep-all;touch-action:manipulation}
.costume-shop .costume-actions{display:flex;gap:6px;max-width:100%;margin:0}
.costume-shop .costume-actions .costume-btn{flex:1 1 0!important}
.costume-shop .costume-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;min-width:0;max-width:100%}
.costume-shop .costume-card{box-sizing:border-box;min-width:0;max-width:100%;padding:6px 4px 8px;overflow:hidden}
.costume-shop .costume-card canvas[data-costume-preview]{display:block;width:112px!important;height:128px!important;max-width:none;margin:0 auto;image-rendering:pixelated}
.costume-shop .costume-card b{white-space:normal;overflow-wrap:anywhere;line-height:1.4;font-size:12px}
.costume-shop .costume-card small{line-height:1.4}
.costume-shop .costume-pages{flex-wrap:wrap;gap:8px}
.costume-shop .costume-pages button{min-height:36px}
#window-wardrobe .window-body{min-width:0;min-height:0;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-gutter:stable}
@container (max-width:480px){.costume-shop .costume-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (pointer:coarse){.costume-shop .costume-tabs button,.costume-shop .costume-btn,.costume-shop .costume-pages button{min-height:44px!important}.costume-shop .costume-card{min-height:170px}}
html[data-portrait="true"] .costume-shop .costume-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-portrait="true"] .costume-shop .costume-top{gap:10px}
@media (max-width:360px){.costume-shop .costume-top{grid-template-columns:120px minmax(0,1fr);gap:8px}.costume-shop .costume-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.costume-shop .costume-tabs button{padding:5px 2px!important;font-size:11px!important}}

/* 衣櫥固定保留預覽及分類，只有物品清單捲動；橫式把清單放在預覽右側。 */
#window-wardrobe .window-body{display:flex;flex-direction:column;overflow:hidden!important}
#window-wardrobe .costume-wardrobe{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px 12px;flex:1 1 auto;min-height:0}
#window-wardrobe .costume-top{grid-column:1/-1;grid-row:1;margin-bottom:0}
#window-wardrobe .costume-grid{grid-column:1/-1;grid-row:2;min-height:0;overflow-y:auto;overflow-x:hidden;align-content:start;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable;padding:1px 2px 2px 1px}
#window-wardrobe .costume-pages{grid-column:1/-1;grid-row:3;margin-top:0}
@media (orientation:landscape){
 html:not([data-portrait="true"]) #window-wardrobe .costume-top{display:contents!important}
 html:not([data-portrait="true"]) #window-wardrobe .costume-stage-box{grid-column:1;grid-row:1/3}
 html:not([data-portrait="true"]) #window-wardrobe .costume-summary{grid-column:2;grid-row:1}
 html:not([data-portrait="true"]) #window-wardrobe .costume-grid{grid-column:2;grid-row:2}
 html:not([data-portrait="true"]) #window-wardrobe .costume-pages{grid-column:2;grid-row:3}
}

#window-wardrobe .window-body{padding:8px 10px!important}
@media (orientation:landscape) and (max-height:500px){
 html:not([data-portrait="true"]) #window-wardrobe .costume-summary .panel-note{display:none}
 html:not([data-portrait="true"]) #window-wardrobe .costume-pages{grid-column:1;grid-row:2;align-self:end;font-size:11px;gap:3px}
 html:not([data-portrait="true"]) #window-wardrobe .costume-pages button{padding:4px;font-size:11px;flex:1 1 auto;min-width:0}
}

#window-wardrobe .costume-grid{grid-auto-rows:max-content}
.costume-shop .costume-card>canvas,.costume-shop .costume-card>b,.costume-shop .costume-card>small{flex-shrink:0}
@media (orientation:landscape) and (max-height:500px){#window-wardrobe .costume-card{min-height:0;padding:3px 4px;gap:1px}}

/* 2026-10-19（使用者：時裝購買用完整圖片，不放大）：商品畫布與CSS顯示維持112×128原比例；衣櫥主預覽回復120×150。 */

/* 2026-11-05（使用者：時裝兌換換頁按鈕更快、點擊後取消 NPC 對話框；手機橫版左邊人物和穿脫要完整、右邊一排四件置中、
   分類在上換頁在下、結束對話改右上角 X）：阿巴坦兌換時隱藏對話框與「結束對話」（用視窗右上角 X 關閉），兌換視窗佔滿。 */
#panel .native-npc-layout.costume-focus{grid-template-columns:minmax(0,1fr)!important;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
#panel .native-npc-layout.costume-focus>.native-npc-wrap{display:none!important}
#panel .native-npc-layout.costume-focus>.native-npc-service-pane{min-width:0;max-width:100%;box-sizing:border-box;height:var(--costume-pane-height,var(--npc-pane-height,336px))!important}
#panel .native-npc-layout.costume-focus .native-npc-footer{display:none!important}
/* 直式與一般：上方人物＋鑽石＋穿著，接著分類、換頁（黏在上緣），再來清單。 */
.costume-npc-shop:not(.costume-guardian-shop):not(.costume-dye){display:flex;flex-direction:column}
.costume-npc-shop>.costume-top{order:1}
.costume-npc-shop>.costume-tabs{order:2;margin:0 0 8px}
.costume-npc-shop>.costume-pages{order:3;display:flex;justify-content:center;align-items:center;gap:8px;margin:0 0 8px;padding:4px 0;background:#121611;position:sticky;top:0;z-index:2}
.costume-npc-shop>.costume-grid{order:4}
.costume-npc-shop .costume-pages button{flex:0 1 110px;min-height:36px}
.costume-npc-shop .costume-worn{display:flex;flex-direction:column;gap:4px}
.costume-npc-shop .costume-worn span{display:flex;align-items:center;justify-content:space-between;gap:6px}
/* 橫式：左欄人物、鑽石、穿著（可脫下）；右欄上方分類、中間清單、下方換頁。 */
@media (orientation:landscape){
 html:not([data-portrait="true"]) #panel .native-npc-layout.costume-focus .native-npc-services:has(>.costume-npc-shop:not(.costume-guardian-shop):not(.costume-dye)){display:flex!important;flex-direction:column;overflow:hidden!important}
 html:not([data-portrait="true"]) .costume-npc-shop:not(.costume-guardian-shop):not(.costume-dye){flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(160px,210px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px 12px}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-top{grid-column:1;grid-row:1/4;display:flex!important;flex-direction:column;align-items:center;gap:6px;margin:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-top>.costume-summary{width:100%}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-tabs{grid-column:2;grid-row:1;margin:0;grid-template-columns:repeat(4,minmax(0,1fr))}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-grid{grid-column:2;grid-row:2;min-height:0;overflow-y:auto;overscroll-behavior:contain;align-content:start;grid-auto-rows:max-content;scrollbar-width:thin}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-pages{grid-column:2;grid-row:3;margin:0;position:static}
}
/* 手機橫式（矮螢幕）：一排四件置中，分類一列排完，人物縮小讓穿著清單完整。 */
@media (orientation:landscape) and (max-height:500px){
 html:not([data-portrait="true"]) #panel .native-npc-layout.costume-focus .native-npc-services>p:not([data-npc-feedback]):has(~.costume-npc-shop){display:none}
 html:not([data-portrait="true"]) #panel .native-npc-layout.costume-focus .native-npc-services{padding-top:4px!important;padding-bottom:4px!important}
 html:not([data-portrait="true"]) .costume-npc-shop:not(.costume-guardian-shop):not(.costume-dye){grid-template-columns:minmax(160px,200px) minmax(0,1fr);gap:5px 10px}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-top .panel-note{display:none}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-top .costume-stage{width:84px!important;height:105px!important}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-top .costume-summary p{margin:0 0 4px;font-size:12px}
 html:not([data-portrait="true"]) .costume-npc-shop .costume-worn span{font-size:11px}
 html:not([data-portrait="true"]) .costume-npc-shop .costume-worn button{min-height:28px!important;padding:2px 8px!important;font-size:11px!important;flex:none}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-tabs{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-tabs label{grid-column:auto;font-size:11px;line-height:1.2;display:flex;align-items:center;gap:2px}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-tabs button{min-height:32px!important;padding:2px 3px!important;font-size:11px!important}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-grid{grid-template-columns:repeat(4,minmax(0,150px));justify-content:center;align-content:center;gap:8px}
 html:not([data-portrait="true"]) .costume-npc-shop .costume-card{min-height:0;padding:3px 3px 5px}
 html:not([data-portrait="true"]) .costume-npc-shop .costume-card canvas[data-costume-preview]{width:96px!important;height:110px!important}
 html:not([data-portrait="true"]) .costume-npc-shop>.costume-pages button{min-height:30px!important;padding:2px 6px}
 html:not([data-portrait="true"]) .costume-npc-shop .costume-btn{min-height:30px!important;padding:2px 4px!important}
}
@media (orientation:landscape){html:not([data-portrait="true"]) .costume-npc-shop:not(.costume-guardian-shop):not(.costume-dye)>.costume-top{contain:size}}
@media (orientation:landscape) and (max-height:500px){html:not([data-portrait="true"]) .costume-npc-shop>.costume-top .costume-stage{width:72px!important;height:90px!important}html:not([data-portrait="true"]) .costume-npc-shop>.costume-top{gap:4px}}
@media (orientation:landscape){html:not([data-portrait="true"]) #panel .native-npc-layout.costume-focus .native-npc-services>.costume-npc-shop:not(.costume-guardian-shop):not(.costume-dye){flex:1 1 0!important;min-height:0!important}}
@media (orientation:landscape) and (max-height:420px){html:not([data-portrait="true"]) .costume-npc-shop .costume-card canvas[data-costume-preview]{width:80px!important;height:92px!important}html:not([data-portrait="true"]) .costume-npc-shop .costume-card{padding:2px 3px 4px;gap:0}html:not([data-portrait="true"]) .costume-npc-shop .costume-card b{font-size:11px;line-height:1.25}html:not([data-portrait="true"]) .costume-npc-shop .costume-card small{line-height:1.2}html:not([data-portrait="true"]) .costume-npc-shop>.costume-tabs button{min-height:30px!important}html:not([data-portrait="true"]) .costume-npc-shop:not(.costume-guardian-shop):not(.costume-dye){gap:4px 10px}}
html[data-portrait="true"] .costume-npc-shop>.costume-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}

/* 2026-11-05（使用者：時裝對話框使用背包的 X）：時裝兌換／染色／守護外觀的關閉鈕改成背包同款（bag-wide.css 的 bag-wide-close：金框圓鈕）。 */
body.desktop-client:is(.touch-client,:not(.touch-client)) #panel[data-native-panel=npc]:has(.native-npc-layout.costume-focus) .dialog-head #close-panel{position:absolute!important;left:auto!important;right:-4px!important;top:-8px!important;z-index:30!important;display:grid!important;place-items:center;box-sizing:border-box!important;width:44px!important;height:44px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:3px solid #c9a24a!important;border-image:none!important;border-radius:50%!important;background:#3a2716!important;background-image:none!important;color:#ffe9b0!important;font:700 30px/36px sans-serif!important;text-align:center;text-indent:0!important;text-shadow:none;box-shadow:0 2px 6px #000a!important;transform:none!important;filter:none!important}
body.desktop-client:is(.touch-client,:not(.touch-client)) #panel[data-native-panel=npc]:has(.native-npc-layout.costume-focus) .dialog-head #close-panel::before,body.desktop-client:is(.touch-client,:not(.touch-client)) #panel[data-native-panel=npc]:has(.native-npc-layout.costume-focus) .dialog-head #close-panel::after{content:none!important}

/* 2026-11-06（使用者：手機橫板時裝裡面染色異常顯示）：衣櫥的染色頁沒有 .costume-wardrobe 版面，橫式時 .costume-top 被攤平、window-body overflow:hidden 把顏色格與按鈕切掉。改成左邊預覽、右邊摘要＋染色面板（面板可捲動）。 */
#window-wardrobe .costume-dye{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px 12px;flex:1 1 auto;min-height:0}
#window-wardrobe .costume-dye>.costume-top{grid-column:1/-1;grid-row:1;margin-bottom:0}
#window-wardrobe .costume-dye>.dye-panel{grid-column:1/-1;grid-row:2;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
#window-wardrobe .costume-dye .dye-panel>.costume-tabs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px}
#window-wardrobe .costume-dye .dye-panel>p{margin:6px 0}
html:not([data-portrait="true"]) #window-wardrobe .costume-dye>.costume-top{display:contents!important}
html:not([data-portrait="true"]) #window-wardrobe .costume-dye .costume-stage-box{grid-column:1;grid-row:1/3;align-self:start}
html:not([data-portrait="true"]) #window-wardrobe .costume-dye .costume-summary{grid-column:2;grid-row:1;min-width:0;position:relative;z-index:1}
html:not([data-portrait="true"]) #window-wardrobe .costume-dye .costume-stage-box{box-sizing:border-box;max-width:none;justify-self:start}
html:not([data-portrait="true"]) #window-wardrobe .costume-dye .costume-summary>.costume-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}
html:not([data-portrait="true"]) #window-wardrobe .costume-dye>.dye-panel{grid-column:2;grid-row:2}
@media (orientation:landscape) and (max-height:500px){
 html:not([data-portrait="true"]) #window-wardrobe .costume-dye{grid-template-columns:auto minmax(0,1fr);gap:6px 12px}
 html:not([data-portrait="true"]) #window-wardrobe .costume-dye .costume-stage-box canvas{width:100px;height:125px}
 html:not([data-portrait="true"]) #window-wardrobe .costume-dye .costume-summary>p{margin:0 0 4px;font-size:13px;line-height:1.3}
 html:not([data-portrait="true"]) #window-wardrobe .costume-dye .costume-tabs button{min-height:30px!important;padding:3px 4px!important;font-size:12px!important}
 html:not([data-portrait="true"]) #window-wardrobe .costume-dye .dye-panel>p{margin:4px 0;font-size:12px;line-height:1.35}
 html:not([data-portrait="true"]) #window-wardrobe .costume-dye .dye-swatches{grid-template-columns:repeat(12,minmax(0,1fr));max-width:420px;gap:4px;margin:4px 0}
 html:not([data-portrait="true"]) #window-wardrobe .costume-dye .dye-swatch{min-height:22px}
 html:not([data-portrait="true"]) #window-wardrobe .costume-dye .costume-actions .costume-btn{min-height:32px!important}
}

/* 2026-11-08：保留上一頁／下一頁，中間頁碼可直接選取；使用原生選單，不多開視窗。 */
.costume-shop .costume-pages .costume-page-select{box-sizing:border-box;min-width:82px;max-width:140px;min-height:36px;padding:5px 8px;border:1px solid #ae9360;border-radius:6px;background:#292617;color:#f8e6bd;font:inherit;font-size:14px;text-align:center;cursor:pointer;touch-action:manipulation;color-scheme:dark}
.costume-shop .costume-pages .costume-page-select:focus-visible{outline:2px solid #f5d77c;outline-offset:2px}
.touch-client .costume-shop .costume-pages .costume-page-select{min-height:44px;font-size:16px}
@media(pointer:coarse){.costume-shop .costume-pages .costume-page-select{min-height:44px;font-size:16px}}
@media(orientation:landscape) and (max-height:500px){
 html:not([data-portrait="true"]) #window-wardrobe .costume-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
 html:not([data-portrait="true"]) #window-wardrobe .costume-pages .costume-page-select{grid-column:1/-1;grid-row:1;width:100%;max-width:100%;min-width:0;padding:4px}
 html:not([data-portrait="true"]) #window-wardrobe .costume-pages button{grid-row:2}
}
/* 2026-11-08 衣櫥「守護外觀」分頁沒有人物預覽欄（.costume-top）：說明與分類按鈕、外觀清單都佔滿整列（原本說明被塞進左邊 120px 欄，右邊空白）。 */
html #window-wardrobe .costume-guardian-wardrobe>.costume-summary{grid-column:1/-1!important;grid-row:1!important;min-width:0}
html #window-wardrobe .costume-guardian-wardrobe>.costume-grid{grid-column:1/-1!important;grid-row:2!important}