/* Individual market UI (public/shop_ui.js). Art: /ui/soc_trade_frame.webp (window frame rebuilt from the Inspect art), /ui/soc_slot.webp, /ui/status/ok.webp + blank.webp (buttons). Scoped by id. */

/* ── art buttons (Status window sheets: OK / Cancel rows, blank for a text label; 4 states = normal, hover, disabled, pressed) ── */
.shb { position:relative; box-sizing:border-box; width:54px; height:28px; flex:none; padding:0; border:0; background:url(/ui/status/ok.webp) 0 0 / 256px 64px no-repeat; font:700 11px/28px Verdana, Tahoma, sans-serif; color:#ea9207; text-shadow:0 1px 1px #000; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* native size: the 64x32 cells of status/ok.webp 1:1 (the plate is 54x28); it used to be stretched x1.42 */
.shb::after { content:""; position:absolute; inset:-8px -6px; }
.shb.no { background-position:0 -32px; }
.shb.blank { display:flex; align-items:center; justify-content:center; line-height:12px; background:none; border:solid transparent; border-width:8px; border-image:url(/ui/status/blank_0.webp) 8 fill / 8px stretch; } /* text plate: 9-slice (crisp rim, plain middle stretches to any width) */
@media (hover:hover) { .shb:hover:not(:disabled) { background-position-x:-64px; } .shb.blank:hover:not(:disabled) { border-image-source:url(/ui/status/blank_1.webp); } }
.shb:disabled { background-position-x:-128px; cursor:default; color:#6d5a3a; } .shb.blank:disabled { border-image-source:url(/ui/status/blank_2.webp); } .shb:active:not(:disabled) { background-position-x:-192px; } .shb.blank:active:not(:disabled) { border-image-source:url(/ui/status/blank_3.webp); }
.shb.blank.wide { width:110px; }

/* ── windows ── */
.shWin { position:fixed; display:none; transform-origin:0 0; background:url(/ui/soc_trade_frame.webp) 0 0 / 610px 306px no-repeat; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; font-family:system-ui, 'Segoe UI', Arial, sans-serif; z-index:336; }
.shWin.on { display:block; }
.shWin .st { position:absolute; left:70px; top:5px; width:470px; height:30px; text-align:center; cursor:move; }
.shWin .st b { font:700 15px/30px system-ui, 'Segoe UI', Arial, sans-serif; color:#fff; text-shadow:0 0 2px #000, 0 1px 2px #000, 1px 0 0 #000, -1px 0 0 #000; }
.shWin .hx { position:absolute; right:12px; top:7px; width:26px; height:26px; padding:0; border:0; background:none; font:400 22px/24px system-ui; color:#d8cfb8; text-shadow:0 1px 2px #000; cursor:pointer; touch-action:manipulation; }
.shWin .hx::after { content:""; position:absolute; inset:-8px; } .shWin .hx:hover { color:#ffe08a; }
.shWin .sl { position:relative; width:34px; height:34px; flex:none; background:url(/ui/soc_slot.webp) 0 0 / 100% 100% no-repeat; }
.shWin .sl img { position:absolute; left:3px; top:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:contain; pointer-events:none; filter:drop-shadow(0 1px 1px #000); }
.shWin .sl svg { position:absolute; inset:4px; width:calc(100% - 8px); height:calc(100% - 8px); pointer-events:none; }
.shWin .sl .n { position:absolute; right:3px; bottom:0; font:800 10px/11px system-ui; color:#fff; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; pointer-events:none; }
.shWin .btns { position:absolute; display:flex; justify-content:center; gap:14px; }

/* setup window: left = name + list of what is on sale, right = the bag (tap to register) */
#shSetup .pane { position:absolute; top:42px; } #shSetup .L { left:26px; width:286px; } #shSetup .R { left:330px; width:254px; }
#shSetup .ph { height:17px; font:700 11px/17px system-ui; color:#f0cf7a; text-shadow:0 1px 2px #000; }
#shSetup .ph.two { display:flex; justify-content:space-between; margin-top:5px; } #shSetup .ph u { text-decoration:none; color:#9c9482; font-weight:600; }
#shSetup .nm { display:block; width:100%; box-sizing:border-box; height:26px; padding:0 8px; border:1px solid #8f7336; border-radius:2px; background:#070605; box-shadow:inset 0 2px 5px #000; color:#ffe9a8; font:600 13px system-ui; outline:none; user-select:text; -webkit-user-select:text; touch-action:manipulation; }
#shSetup .nm:focus { border-color:#e8c777; } #shSetup .nm::placeholder { color:#6d6450; }
#shSetup .list { height:140px; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; border:1px solid #2e2616; border-radius:2px; background:rgba(0,0,0,.35); scrollbar-width:thin; scrollbar-color:#6a5530 transparent; }
#shSetup .row, #shShop .row { display:flex; align-items:center; gap:5px; height:38px; padding:2px 4px; border-bottom:1px solid #1d170d; }
#shSetup .nm2, #shShop .nm2 { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
#shSetup .nm2 b, #shShop .nm2 b { font:600 11.5px/13px system-ui; color:#e9dcc0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shSetup .nm2 small, #shShop .nm2 small { font:600 10px/11px system-ui; color:#9c9482; }
#shSetup .price { flex:none; min-width:62px; height:30px; padding:0 8px; border:1px solid #8f7336; border-radius:2px; background:#070605; color:#ffd54a; font:700 12px/14px system-ui; text-align:right; cursor:pointer; touch-action:manipulation; box-shadow:inset 0 2px 5px #000; }
#shSetup .price small, #shShop .price small { display:block; font:600 8px/8px system-ui; color:#9c9482; } #shSetup .price:active { background:#1a1408; }
#shSetup .qty { flex:none; height:22px; padding:0 5px; border:1px solid #4a3c22; border-radius:2px; background:#14100a; color:#cfc5aa; font:700 10.5px system-ui; cursor:pointer; touch-action:manipulation; }
#shSetup .rm { flex:none; width:24px; height:30px; padding:0; border:0; background:none; color:#b86a5a; font:400 20px/28px system-ui; cursor:pointer; touch-action:manipulation; } #shSetup .rm:hover { color:#ff8a78; }
#shSetup .empty, #shShop .empty { padding:18px 10px; text-align:center; font:600 11.5px/1.4 system-ui; color:#7d745f; }
#shSetup .tabs { display:flex; gap:2px; height:22px; }
#shSetup .tb { flex:1; padding:0; border:1px solid #6a5530; border-bottom:0; border-radius:5px 5px 0 0; background:linear-gradient(#26231d,#0e0c09); color:#8d836d; font:700 12px/20px Cinzel, Georgia, serif; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#shSetup .tb.sel { color:#fff3cf; border-color:#d6b46a; background:linear-gradient(#4a4030,#17120c); box-shadow:inset 0 0 8px rgba(215,170,90,.28); } #shSetup .tb.off { opacity:.45; cursor:default; }
#shSetup .grid { display:grid; grid-template-columns:repeat(6, 34px); gap:3px; justify-content:center; margin-top:4px; }
#shSetup .grid .sl.full { cursor:pointer; } #shSetup .grid .sl.used { box-shadow:inset 0 0 0 2px rgba(224,184,90,.9); } #shSetup .grid .sl.used img, #shSetup .grid .sl.used svg { opacity:.35; }
#shSetup .tot { display:flex; align-items:center; gap:6px; height:24px; margin-top:7px; padding:0 8px; border:1px solid #4a3c22; border-radius:2px; background:#070605; box-shadow:inset 0 2px 5px #000; }
#shSetup .tot span { font:600 10px system-ui; color:#9c9482; margin-right:auto; } #shSetup .tot b { font:700 12px/22px system-ui; color:#ffd54a; }
.shWin .tot s, #shShop .mg s, #shShop .bt s { width:12px; height:12px; flex:none; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffe9a0, #c58a1c 70%, #6a4608); box-shadow:0 0 0 1px #2a1a04; order:1; }
#shSetup .tot b { order:2; }
#shSetup .hint, #shShop .hint { position:absolute; left:30px; top:258px; width:280px; height:30px; font:600 11px/14px system-ui; color:#b9ae92; text-shadow:0 1px 2px #000; display:flex; align-items:center; }
#shSetup .btns { left:330px; top:252px; width:254px; }
#shSetup .nm2 b { max-width:100%; }

/* shop window */
#shShop .who { position:absolute; left:26px; top:40px; width:360px; height:30px; display:flex; flex-direction:column; justify-content:center; }
#shShop .who i { font:700 13px/15px system-ui; font-style:normal; color:#f0cf7a; text-shadow:0 1px 2px #000; } #shShop .who small { font:600 10.5px/12px system-ui; color:#9c9482; }
#shShop .mg { position:absolute; right:26px; top:44px; width:150px; display:flex; align-items:center; gap:6px; height:24px; padding:0 8px; border:1px solid #4a3c22; border-radius:2px; background:#070605; box-shadow:inset 0 2px 5px #000; }
#shShop .mg::before { content:"Your gold"; font:600 10px system-ui; color:#9c9482; margin-right:auto; } #shShop .mg span { font:700 12px/22px system-ui; color:#ffd54a; order:2; }
#shShop .items { position:absolute; left:26px; top:76px; width:558px; height:182px; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:38px; column-gap:10px; align-content:start; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:#6a5530 transparent; }
#shShop .items .empty { grid-column:1 / 3; }
#shShop .row { border:1px solid #2e2616; border-radius:2px; background:rgba(0,0,0,.35); margin-bottom:2px; box-sizing:border-box; cursor:pointer; -webkit-tap-highlight-color:transparent; } #shShop .row.own { cursor:default; }
#shShop .row:not(.own):active { background:rgba(215,170,80,.22); border-color:#d6b46a; } @media (hover:hover) { #shShop .row:not(.own):hover { border-color:#8f7336; background:rgba(215,170,80,.12); } }
#shShop .price { flex:none; text-align:right; min-width:58px; font:700 12px/13px system-ui; color:#ffd54a; padding-right:2px; } #shShop .price.lack { color:#e0705e; }
#shShop .hint { top:262px; width:390px; height:26px; }
#shShop .btns { right:64px; top:254px; } #shShop .btns .shb { width:110px; } /* 9-slice plate: any width, no stretched sheet */ #shShop .clb.danger { color:#ff8a78; }
/* the buy dialog sits over the list */
#shShop .buy { position:absolute; inset:36px 12px 12px; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:3; }
#shShop .buy.on { display:flex; }
#shShop .bb { width:300px; padding:10px 14px 8px; border:1px solid #5a4a30; border-radius:3px; background:linear-gradient(#1c1710,#0d0b08); box-shadow:0 0 0 2px #000, 0 8px 30px #000; }
#shShop .bh { display:flex; align-items:center; gap:10px; } #shShop .bn { font:700 13px/15px system-ui; color:#f0cf7a; }
#shShop .bq { display:flex; align-items:center; gap:6px; margin:10px 0 6px; justify-content:center; }
#shShop .bq button:not(.shb) { width:38px; height:34px; border:1px solid #6a5530; border-radius:3px; background:linear-gradient(#2c2518,#120e08); color:#f0e6c8; font:700 18px system-ui; cursor:pointer; touch-action:manipulation; }
#shShop .bq .qv { width:86px; color:#ffd54a; font-size:15px; background:#070605; }
#shShop .bt { display:flex; align-items:center; gap:6px; height:26px; padding:0 8px; border:1px solid #4a3c22; border-radius:2px; background:#070605; box-shadow:inset 0 2px 5px #000; }
#shShop .bt span { margin-right:auto; font:600 10px system-ui; color:#9c9482; } #shShop .bt b { order:2; font:700 13px/24px system-ui; color:#ffd54a; } #shShop .bt.lack b { color:#e0705e; }
#shShop .bbtn { display:flex; justify-content:center; gap:14px; margin-top:6px; }

/* number pad, yes / no box, item card */
#shPad { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); display:none; z-index:358; user-select:none; -webkit-user-select:none; touch-action:none; }
#shPad.on { display:block; }
#shPad .pdB { width:236px; padding:10px 12px 10px; border:1px solid #5a4a30; border-radius:3px; background:linear-gradient(#1c1710,#0d0b08); box-shadow:0 0 0 2px #000, 0 8px 30px #000, 0 0 0 100vmax rgba(0,0,0,.35); }
#shPad .pdT { font:600 13px system-ui; color:#e9dcc0; text-align:center; margin-bottom:6px; text-shadow:0 1px 3px #000; }
#shPad .pdV { height:34px; padding:0 8px; font:700 18px/34px system-ui; text-align:right; color:#ffd54a; background:#070605; border:1px solid #4a3c22; box-shadow:inset 0 2px 5px #000; }
#shPad .pdV.max { color:#ff9d4a; } #shPad .pdI { height:16px; margin:2px 0 3px; font:600 11px/16px system-ui; text-align:right; color:#9c9482; }
#shPad .pdK { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
#shPad .pdKey { height:36px; border:1px solid #6a5530; border-radius:3px; background:linear-gradient(#2c2518,#120e08); color:#f0e6c8; font:700 16px system-ui; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #shPad .pdKey:active { background:#4a3c22; }
#shPad .pdR { display:flex; justify-content:space-between; margin-top:7px; }
#shAsk { position:fixed; left:50%; top:max(70px, 18vh); transform:translateX(-50%); display:none; z-index:359; } #shAsk.on { display:block; }
#shAsk .delBox { width:min(86vw, 330px); padding:12px 14px 10px; } #shAsk .delT { font-size:14px; } #shAsk .delN { margin:5px 0 8px; font-size:12.5px; }
#shAsk .delB { display:flex; justify-content:center; gap:14px; }
#shTip { position:fixed; display:none; z-index:362; width:268px; box-sizing:border-box; padding:10px 12px; background:rgba(10,8,6,.97); border:1px solid #b79553; border-radius:3px; box-shadow:0 0 0 1px #000, 0 10px 34px #000; font:12.5px/1.38 system-ui, 'Segoe UI', Arial, sans-serif; color:#eee; pointer-events:none; }
#shTip.on { display:block; }
#shTip .tpH { display:flex; align-items:center; gap:8px; margin-bottom:5px; padding-bottom:6px; border-bottom:1px solid #3a3020; } #shTip .tpH img { width:42px; height:42px; object-fit:contain; flex:none; } #shTip .tpH b { font-size:14px; }
#shTip .g { color:#7be36a; } #shTip .w { color:#ececec; } #shTip .o { color:#ff9b2f; font-weight:600; } #shTip .r { color:#ff5a4a; } #shTip .tgap { margin-top:6px; }
#shTip .gems { display:flex; gap:8px; margin-top:8px; } #shTip .gems i { width:24px; height:24px; border-radius:2px; border:2px solid #8d6c34; background:linear-gradient(135deg,#17140f,#050403); box-shadow:inset 0 2px 4px #000, 0 0 0 2px #2a2013; }
#shTip .gems i.on { border-color:#e0b85a; background:radial-gradient(circle at 40% 35%,#6fb8e0,#123a52); } #shTip .gems i.on img { width:100%; height:100%; object-fit:contain; display:block; } #shTip .gems i.cont { border-color:#6a5530; background:radial-gradient(circle at 40% 35%,#35546a,#0d2230); }

/* the sign over a seller's head (the label of the entity): a small wooden board, tappable */
.lbl .mkt { display:inline-block; max-width:130px; margin-bottom:2px; padding:1px 7px 2px; border:1px solid #2a1706; border-radius:3px; background:linear-gradient(#a8763a, #6f4720); box-shadow:0 1px 3px #000a, inset 0 1px 0 rgba(255,225,170,.45); font:700 6.6px/8px system-ui; color:#fff2cf; text-shadow:0 1px 1px #000; pointer-events:auto; cursor:pointer; touch-action:manipulation; }
.lbl .mkt span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lbl .mkt::before { content:""; display:inline-block; width:6px; height:6px; margin-right:3px; vertical-align:-1px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffe9a0, #c58a1c 70%, #6a4608); }
.lbl .mkt { position:relative; } .lbl .mkt::after { content:""; position:absolute; inset:-10px -6px; } /* a bigger tap area */

.shWin .sl, .shWin img { image-rendering:auto; }
html.dint .shb { image-rendering:pixelated; }