/* Phone and tablet NPC service window (js/windows/mobile-shop.js, sections in mobile-services.js): the Gear & Bag frame
   with a shop's stock, Improve, Socket, Compose, Enchant or the warehouse in place of the gear.
   Cards, bag grid, popover and buttons come from mobile-sheet.css and mobile-hud.css. */
body.mobile-ui :is(#npc-shop,#npc-improve,#npc-warehouse,#game > .npc-compose){display:none!important}
body.mobile-ui #npc-service:is([data-panel="beautician"],[data-panel="socket"],[data-panel="weapon_socket"]){display:none!important}
/* VIP Warehouse, Repair and Compose use the mobile service window; City Teleport keeps its city picker. */
body.mobile-ui #vip-service-layer:has(> :is(.vip-warehouse-dialog,.vip-repair-dialog,.npc-compose):not([hidden])){display:none!important}
.m-shop{position:absolute;inset:0;display:flex;flex-direction:column;background:#101215 url(/ui/mobile/sheetbg.png?v=f16b55896a7aa2db) center/cover;padding:8px calc(var(--safe-r) + 10px) 8px calc(var(--safe-l) + 8px);box-shadow:0 10px 40px #000d;z-index:8}
body.tablet-ui .m-shop{left:30px;right:30px;top:40px;bottom:40px;border-radius:6px;border:1px solid #a8894a88}
.m-shop .m-sheet-head .m-mute{font-size:12px}
.m-shop-cols{position:relative}
.m-shop-stock{width:300px;flex:none;display:flex;flex-direction:column;min-height:0}
.m-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,52px);gap:6px 3px;overflow:auto;align-content:start;justify-content:start;min-height:0;padding-top:2px}
.m-shop-offer{display:flex;flex-direction:column;align-items:center;gap:1px}
.m-shop-offer .m-bs{width:48px;height:48px}
.m-shop-price{font:600 10px/12px system-ui;color:#ffe07a;white-space:nowrap}
.m-shop-price.short{color:#ff8a80}
.m-pop .m-kv.m-pop-price>b{color:#ffe07a}
/* Nothing of the HUD sits over an open shop. */
.m-root:has(.m-shop:not([hidden])) :is(.m-bar,.m-strip,.m-chatbox,.m-plate,.m-menu,.m-vip,.m-mall,.m-pkmenu,.m-actions,.m-picker,.m-exp,.m-xpbar,.m-dm-btn,.m-sys){visibility:hidden}
/* World overlays (NPC and monster tap targets, names) stack above the mobile layer; a full-screen phone window hides them
   so a tap can't reach an NPC or monster behind it. */
body.mobile-ui:has(:is(.m-shop,.m-sheet,.m-trade):not([hidden])) :is(#npc-actors,#mob-actors,#names,#team-leader-markers){visibility:hidden}

.m-shop-foot{flex:none;min-height:16px;margin-top:5px;font-size:11.5px;color:#cfc6b0}
/* Improve, Compose and Enchant: two labelled slots, what the request does, and the button. */
.m-craft{width:300px;flex:none;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto}
.m-craft-slots{display:flex;justify-content:center;align-items:flex-start;gap:10px;margin:2px 0 4px}
.m-craft-slot{display:flex;flex-direction:column;align-items:center;gap:5px;width:104px}
.m-craft-slot .m-bs{width:62px;height:62px}
.m-craft-slot small{font:600 10.5px/1.2 var(--serif);color:var(--mute);text-align:center}
.m-craft-sockets{display:flex;gap:4px}
.m-craft-sockets .m-craft-slot{width:76px}
.m-craft-join{font:700 20px/62px var(--serif);color:var(--gold)}
.m-craft-bar{margin-top:2px}
.m-craft-progress{font:600 10.5px system-ui;color:var(--mute);text-align:right}
.m-craft-note{margin:0;font-size:11.5px;line-height:1.35;color:#cfc6b0}
.m-craft-note.bad{color:#ff8a80}
.m-craft-go{align-self:center;margin-top:auto;height:34px;min-width:150px;flex:none}
.m-craft-cancel{align-self:center;height:34px;min-width:150px;flex:none}
/* Warehouse: 20 stored items, the savings and a silver amount to deposit or withdraw. */
.m-store{width:300px;flex:none;display:flex;flex-direction:column;min-height:0}
.m-store-grid{display:grid;grid-template-columns:repeat(5,46px);gap:5px 8px;justify-content:start;align-content:start;flex:none}
.m-store .m-bs{width:46px;height:46px}
.m-store-money{display:flex;gap:6px;align-items:center;margin-top:auto;padding-top:6px;flex:none}
.m-store-money .m-tin{flex:1;width:auto;min-width:0}
.m-store-count{display:flex;align-items:center;gap:6px;margin:8px 0 2px;font-size:12px;color:#cfc6b0}
.m-store-count .m-tin{width:64px;text-align:center}
.m-store-money .m-btn{min-width:0;padding:0 10px;height:28px;font-size:11px}
/* Remote Warehouse: a choice of the seven VIP warehouses in the header, and the password form when it is locked. */
.m-store-which{display:flex;align-items:center;gap:8px}
.m-store{position:relative}
.m-bank-drop{height:28px;min-width:132px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:url(/ui/mobile/dropbox.png?v=01898d346dbdb8ce) 0 0/100% 100%;font:600 12px var(--serif);color:var(--gold)}
.m-bank-drop .m-tri{width:10px;height:7px;transform:rotate(180deg)}
.m-bank-drop[aria-expanded=true] .m-tri{transform:none}
.m-bank-drop:disabled{opacity:.5}
.m-bank-list{position:absolute;left:11px;top:48px;width:170px;padding:6px;display:flex;flex-direction:column;gap:2px;background:#0d0e10 url(/ui/mobile/droplist.png?v=513e82954a2beb8a) 0 0/100% 100%;border:1px solid #a8894a88;border-radius:4px;box-shadow:0 8px 20px #000c;z-index:4}
.m-bank-opt{padding:6px 8px;border-radius:4px;font:600 12px var(--serif);color:#cfc6b0;text-align:left}
.m-bank-opt.on{background:#e2c47c1f;box-shadow:inset 2px 0 0 var(--gold);color:#f6e7b8}
.m-bank-opt:disabled{opacity:.4;cursor:not-allowed}
.m-store-lock{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.m-store-lock .m-tin{width:100%}
.m-store-lock .m-btn{align-self:center;min-width:130px}
/* Beautician: the chosen portrait with Change, then every portrait. */
.m-pic-card{width:300px;flex:none;display:flex;flex-direction:column;min-height:0}
.m-pic-pick{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex:none}
.m-pic-big{width:54px;height:54px;flex:none;border-radius:50%;overflow:hidden;background:#111;box-shadow:0 0 0 2px var(--gold2),0 2px 6px #000}
.m-pic-big img{width:100%;height:100%;object-fit:cover;display:block}
.m-pic-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12px}
.m-pic-pick .m-btn{min-width:0;padding:0 12px;height:30px;font-size:11px}
.m-pics{display:grid;grid-template-columns:repeat(5,48px);gap:6px 8px;overflow:auto;min-height:0;align-content:start;padding:2px}
.m-pic{width:48px;height:48px;border-radius:6px;overflow:hidden;background:#111;box-shadow:0 0 0 1px #ffffff1a;position:relative}
.m-pic img{width:100%;height:100%;object-fit:cover;display:block}
.m-pic.current{box-shadow:0 0 0 2px #8fd18f}
.m-pic.on{box-shadow:0 0 0 2px var(--gold)}

/* Remote repair: equipped-item rows and a stable invoice, using the shared original mobile cards and buttons. */
.m-repair-equipment{flex:1;min-width:0;display:flex;flex-direction:column}
.m-repair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:auto;align-content:start;min-height:0}
.m-repair-entry{display:flex;align-items:center;gap:8px;padding:6px;text-align:left;min-width:0;border-bottom:1px solid #ffffff14;color:var(--ink)}
.m-repair-entry:disabled{opacity:.65}
.m-repair-entry>.m-bs{width:44px;height:44px;flex:none;pointer-events:none}
.m-repair-copy{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:11px;line-height:1.25}
.m-repair-copy>b{font-size:12px;overflow-wrap:anywhere}
.m-repair-summary{width:248px;flex:none;display:flex;flex-direction:column;gap:3px;overflow:auto}
.m-repair-total>b{color:#ffe07a}.m-repair-short>b{color:#ff8a80}
.m-repair-note{font-size:12px;line-height:1.4;margin:7px 0}
.m-repair-review{margin-top:auto;min-height:36px;flex:none}
.m-repair-confirm-layer{position:absolute;inset:0;z-index:7;display:grid;place-items:center;background:#0009}
.m-pop.m-repair-confirm{position:relative;inset:auto;width:min(340px,calc(100% - 24px));max-height:calc(100% - 12px);padding:18px}
.m-repair-confirm .m-pop-actions{gap:10px}.m-repair-confirm .m-btn{min-height:36px;font-size:12px}
@media(orientation:portrait) and (max-width:600px){
.m-shop[data-panel="repair"] .m-shop-cols{flex-direction:column}
.m-repair-summary{width:auto;flex:none;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}
.m-repair-summary>.m-h5,.m-repair-summary>.m-repair-note,.m-repair-review{grid-column:1/-1}
.m-shop[data-panel="repair"] .m-sheet-head .m-mute{display:none}
.m-repair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.m-repair-entry{gap:5px;padding:4px}
.m-repair-copy>b{font-size:11px}.m-repair-copy{font-size:10px}
}