/* Floralia — ตลาดกลาง as LORDNINE's exchange (2026-10-18: js/marketui.js, G.overlay 'market', the user's picture
   ref/feedback/lordnine_market.png). Full screen, charcoal rows with a thin gold line like Lordnine's; the HUD's obsidian +
   gold for the bars and buttons. Laid out at 1440 x 860 and scaled (a phone: its own one-column layout at 420 wide).
   Numbers crisp: no soft glow round text (a 1px dark ring at most). */
#market { position: fixed; inset: 0; z-index: 900; pointer-events: auto; overflow: hidden; user-select: none; font-family: 'Mali', sans-serif; color: #e9e4d8;
  background: #141414 radial-gradient(ellipse 90% 70% at 50% 0%, #22201c 0%, #151515 60%, #0e0e0e 100%); animation: mk2In 0.18s ease-out both; }
@keyframes mk2In { from { opacity: 0; } to { opacity: 1; } }
#market[hidden], #market [hidden] { display: none !important; }
#market button { font-family: 'Mali', sans-serif; color: inherit; }
#market .mk2-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; }

/* ---- top: HP / MP · the title · the money · exit */
#market .mk2-top { flex: none; height: 48px; display: flex; align-items: center; gap: 16px; padding: 0 10px 0 12px; background: linear-gradient(#0c0c0c, #171614); border-bottom: 1px solid #2c2a26; }
#market .mk2-bars { display: flex; flex-direction: column; gap: 3px; width: 200px; }
#market .mk2-bars i { position: relative; display: block; height: 14px; border-radius: 2px; background: #2a1414; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); transform: skewX(-14deg); }
#market .mk2-bars .mk2-mp { background: #10222a; }
#market .mk2-bars b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#e0484d, #a3262c); }
#market .mk2-bars .mk2-mp b { background: linear-gradient(#3fb6d4, #1d7896); }
#market .mk2-bars em { position: relative; display: block; padding-left: 8px; font: 700 11px/14px Fredoka, sans-serif; font-style: normal; color: #fff; transform: skewX(14deg); text-shadow: 0 0 1px #000, 0 1px 0 #000; }
#market .mk2-title { display: flex; align-items: center; gap: 8px; }
#market .mk2-title img { width: 32px; height: 32px; object-fit: contain; }
#market .mk2-title b { font: 800 20px/1 Mali, sans-serif; color: #f1dca2; }
#market .mk2-cur { margin-left: auto; display: flex; align-items: center; gap: 6px; }
#market .mk2-chip { display: flex; align-items: center; gap: 6px; height: 28px; min-width: 120px; padding: 0 10px 0 4px; background: #0a0a0a; box-shadow: inset 0 0 0 1px #3a352b; cursor: pointer; }
#market .mk2-chip:hover, #market .mk2-chip:focus-visible { box-shadow: inset 0 0 0 1px #d9a443; }
#market .mk2-chip img { width: 22px; height: 22px; object-fit: contain; }
#market .mk2-chip em { margin-left: auto; font: 700 15px Fredoka, Mali, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }
#market .mk2-dia em { color: #a8ecff; }
#market .mk2-gold em { color: #f6dc8a; }
#market .mk2-tplus { width: 24px; height: 24px; margin: 0 6px 0 -3px; padding: 0; border-radius: 50%; border: 1px solid #f4cf75; background: linear-gradient(#5cc25a, #24742a); color: #fff; font: 800 17px/1 Fredoka, sans-serif; cursor: pointer; }
#market .mk2-exit { flex: none; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
#market .mk2-exit i { width: 34px; height: 34px; background: var(--uib-btn_close, url(../assets/ui_book/btn_close.png)) center / contain no-repeat; transition: transform 0.12s, filter 0.12s; }
#market .mk2-exit:hover i, #market .mk2-exit:focus-visible i { transform: scale(1.1); filter: brightness(1.2); }

/* ---- the tabs: ซื้อขาย · ส่วนตัว · ประวัติการขาย · ประวัติการซื้อขาย · จองซื้อ */
#market .mk2-tabs { flex: none; height: 46px; display: flex; align-items: stretch; padding-left: 8px; background: #121212; border-bottom: 1px solid #2c2a26; }
#market .mk2-tabs button { position: relative; min-width: 150px; padding: 0 18px; border: 0; background: none; cursor: pointer; font: 700 17px/1 Mali, sans-serif; color: #a9a397; white-space: nowrap; }
#market .mk2-tabs button em { font: 600 12px Fredoka, sans-serif; font-style: normal; color: #807a6c; }
#market .mk2-tabs button:hover, #market .mk2-tabs button:focus-visible { color: #ece2c8; }
#market .mk2-tabs button.on { color: #f3d27e; background: linear-gradient(transparent 55%, rgba(217, 164, 67, 0.12)); }
#market .mk2-tabs button.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, #e8b552, transparent); }
#market .mk2-tabs button.soon { color: #6e695f; }

/* ---- the tree down the left */
#market .mk2-main { flex: 1; min-height: 0; display: flex; }
#market .mk2-tree { flex: none; width: 250px; overflow-y: auto; background: #171717; border-right: 1px solid #2a2824; scrollbar-width: thin; scrollbar-color: #4a4334 transparent; }
#market.mk2-wide .mk2-tree { display: none; }
#market .mk2-tree button { position: relative; display: flex; align-items: center; width: 100%; min-height: 46px; padding: 0 14px; border: 0; border-bottom: 1px solid #262421; background: none; cursor: pointer; text-align: left; font: 600 15.5px/1.2 Mali, sans-serif; color: #d6d0c3; }
#market .mk2-tree button span { flex: 1; min-width: 0; }
#market .mk2-tree button:hover, #market .mk2-tree button:focus-visible { background: rgba(255, 255, 255, 0.04); color: #fff; }
#market .mk2-tree .mk2-g.on { color: #fff3cf; background: linear-gradient(90deg, #5a4520, #3a2d16 70%, #2a2216); box-shadow: inset 0 0 0 1px rgba(232, 181, 82, 0.55); }
#market .mk2-tree .mk2-car { width: 10px; height: 10px; margin-left: 8px; border: solid #c9b58a; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
#market .mk2-tree .mk2-g.open .mk2-car { transform: rotate(-135deg) translate(-2px, -2px); border-color: #fff0c4; }
#market .mk2-tree .mk2-subs { background: #131313; }
#market .mk2-tree .mk2-subs button { min-height: 40px; padding-left: 30px; font-size: 14.5px; color: #a8a295; }
#market .mk2-tree .mk2-subs button.on { color: #fff; font-weight: 800; }
#market .mk2-tree .mk2-sep { display: block; padding: 8px 14px 4px 30px; font: 600 12px Mali, sans-serif; font-style: normal; color: #8c8574; border-top: 1px solid #2a2824; }
#market .mk2-tree .mk2-subs button.on::before { content: '+'; position: absolute; left: 14px; color: #f3d27e; font-weight: 800; }
#market .mk2-tree .mk2-n { flex: none; min-width: 22px; padding: 1px 6px; border-radius: 9px; background: rgba(255, 255, 255, 0.07); font: 600 11.5px Fredoka, sans-serif; font-style: normal; color: #b9b2a2; text-align: center; }
#market .mk2-tree .mk2-n:empty { display: none; }
#market .mk2-tree .mk2-fav span::before { content: '★ '; color: #f3d27e; }

/* ---- the middle: breadcrumb, header row, the rows */
#market .mk2-body { flex: 1; min-width: 0; overflow-y: auto; padding: 0 14px 16px; scrollbar-width: thin; scrollbar-color: #4a4334 transparent; }
#market .mk2-crumb { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; height: 46px; background: #151515; }
#market .mk2-crumb b { font: 700 16px Mali, sans-serif; color: #efe8d6; }
#market .mk2-crumb b i { font-style: normal; color: #8c8574; margin: 0 4px; }
#market .mk2-back { flex: none; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid #6b6252; background: radial-gradient(#2c2924, #161513); cursor: pointer; display: grid; place-items: center; }
#market .mk2-back i { width: 9px; height: 9px; border: solid #d8cfb9; border-width: 0 0 2px 2px; transform: translateX(2px) rotate(45deg); }
#market .mk2-back.off { opacity: 0.45; }
#market button.mk2-back:hover, #market button.mk2-back:focus-visible { border-color: #e8b552; }
#market .mk2-head { position: sticky; top: 46px; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 22px 0 12px; background: #1d1c1a; font: 600 13px Mali, sans-serif; color: #8f8878; }
#market .mk2-rows { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
#market .mk2-row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 8px 22px 8px 12px; background: #222120; border: 1px solid #2f2d29; cursor: pointer; }
#market .mk2-row:hover, #market .mk2-row:focus-visible { border-color: #5d5443; background: #262523; }
#market .mk2-row.sel { border-color: #e8b552; background: #2b2721; box-shadow: inset 0 0 0 1px rgba(232, 181, 82, 0.35); }
#market .mk2-row.none { opacity: 0.6; }
#market .mk2-star { flex: none; width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; font: 400 27px/1 sans-serif; color: #77716a; }
#market .mk2-star:hover, #market .mk2-star:focus-visible { color: #d8cfba; }
#market .mk2-star.on { color: #f3c95c; }
#market .mk2-icw { flex: none; display: grid; place-items: center; cursor: pointer; }
#market .mk2-icw > img { width: 40px; height: 40px; object-fit: contain; }
#market .tslot.mk2-ic { width: 58px; height: 58px; }
#market .mk2-icw:hover .tslot, #market .mk2-icw:focus-visible .tslot { filter: brightness(1.15); }
#market .mk2-plus, #market .mk2-qty { position: absolute; z-index: 3; font: 800 13px/1 Fredoka, sans-serif; color: #fff; text-shadow: 0 0 1px #000, 0 1px 1px #000; }
#market .mk2-plus { left: 6px; top: 5px; color: #ffe08a; }
#market .mk2-qty { right: 6px; bottom: 5px; }
#market .mk2-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#market .mk2-nm b { font: 700 16.5px/1.25 Mali, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#market .mk2-nm small { font: 500 12.5px/1.3 Mali, sans-serif; color: #9b9483; }
#market .mk2-nm small em { font-style: normal; color: #f3d27e; }
#market .mk2-kind { margin-left: 6px; font: 600 12px Mali, sans-serif; font-style: normal; color: #9b9483; vertical-align: 1px; }
#market .mk2-pvp { font: 800 11px Fredoka, sans-serif; font-style: normal; padding: 0 5px; border-radius: 3px; background: #6d1c1c; color: #ffc9c0; vertical-align: 2px; }
#market .mk2-pl { display: flex; align-items: center; gap: 8px; }
#market .mk2-pl small { font: 500 12px Mali, sans-serif; color: #8e8778; }
#market .mk2-p { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#market .mk2-p img { width: 20px; height: 20px; object-fit: contain; }
#market .mk2-p b { font: 700 15.5px Fredoka, Mali, sans-serif; color: #f1ede3; font-variant-numeric: tabular-nums; }
#market .mk2-p.short b { color: #ff8a7a; }
#market .mk2-unit b i { font-style: normal; color: #8f897c; }   /* (a price a piece: the decimals in grey, like Lordnine) */
#market .mk2-nm small .mk2-unit img { width: 15px; height: 15px; }
#market .mk2-nm small .mk2-unit b { font-size: 12.5px; color: #cfc8b8; }
#market .mk2-dim { color: #7c766a !important; }
#market .mk2-cnt { flex: none; min-width: 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 700 17px Fredoka, sans-serif; color: #eae4d6; }
#market .mk2-cnt small { font: 500 11.5px Mali, sans-serif; color: #8e8778; }
#market .mk2-empty { padding: 60px 20px; text-align: center; font: 600 16px/1.6 Mali, sans-serif; color: #8e8778; }
#market .mk2-empty.small { padding: 22px 10px; font-size: 14px; }
#market .mk2-empty small { font-size: 13px; }
/* a listing: its tick box, the price big on the right (2026-10-19: tick many, เลือก 10 ชิ้น, ราคาต่ำสุดก่อน) */
#market .mk2-l { min-height: 70px; }
#market .mk2-tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; border: 2px solid #6f685a; background: #151412; }
#market .mk2-l:hover .mk2-tick { border-color: #b8914a; }
#market .mk2-l.sel .mk2-tick { border-color: #f3d27e; background: #f3d27e; }
#market .mk2-l.sel .mk2-tick::after { content: ''; width: 6px; height: 12px; margin-top: -3px; border: solid #20180a; border-width: 0 3px 3px 0; transform: rotate(45deg); }
#market .mk2-l.mine { cursor: default; opacity: 0.72; }
#market .mk2-l.mine .mk2-tick { opacity: 0.35; border-style: dashed; }
#market .mk2-lp { flex: none; min-width: 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#market .mk2-lp > .mk2-p img { width: 24px; height: 24px; }
#market .mk2-lp > .mk2-p b { font-size: 21px; color: #a8ecff; }
#market .mk2-lp small { display: inline-flex; align-items: center; gap: 4px; font: 500 12px Mali, sans-serif; color: #8e8778; }
#market .mk2-lp small .mk2-unit img { width: 14px; height: 14px; }
#market .mk2-lp small .mk2-unit b { font-size: 12.5px; color: #cfc8b8; }
/* the bar over the listings: how many · the order · เลือก 10 ชิ้น · ล้างที่เลือก */
#market .mk2-lbar { position: sticky; top: 46px; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: #1d1c1a; }
#market .mk2-lnote { flex: 1; min-width: 0; font: 600 13.5px Mali, sans-serif; color: #a39b89; }
#market .mk2-lnote b { font: 700 14px Fredoka, sans-serif; color: #efe8d6; }
#market .mk2-seg { display: flex; margin-right: 6px; border: 1px solid #4a4335; border-radius: 3px; overflow: hidden; }
#market .mk2-seg button { height: 32px; padding: 0 12px; border: 0; background: #23211e; cursor: pointer; font: 600 13.5px Mali, sans-serif; color: #bdb5a3; white-space: nowrap; }
#market .mk2-seg button + button { border-left: 1px solid #4a4335; }
#market .mk2-seg button.on { background: #3a2f1b; color: #fff0c8; box-shadow: inset 0 -2px 0 #e8b552; }
#market .mk2-seg button:hover:not(.on), #market .mk2-seg button:focus-visible { color: #fff; }
#market .mk2-p10:not(:disabled) { border-color: #8a7140; color: #f3d27e; }

/* ---- ส่วนตัว / history: sections, columns */
#market .mk2-sec { padding-top: 10px; }
#market .mk2-mail { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 12px; background: rgba(232, 181, 82, 0.1); border: 1px solid rgba(232, 181, 82, 0.45); font: 700 14.5px Mali, sans-serif; color: #f3e2b6; }
#market .mk2-mail span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#market .mk2-sec h4 { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 8px; font: 800 17px Mali, sans-serif; color: #f1dca2; }
#market .mk2-sec h4 em { font: 700 13px Fredoka, sans-serif; font-style: normal; color: #a49c88; }
#market .mk2-sec h4 small { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 13px Mali, sans-serif; color: #a9a291; }
#market .mk2-sec .mk2-head { position: static; }
#market .mk2-mh, #market .mk2-m { display: grid; grid-template-columns: 58px minmax(0, 1fr) 110px 110px 90px 90px; column-gap: 12px; }
#market .mk2-mh { padding-left: 12px; }
#market .mk2-mh span:first-child { grid-column: 1 / 3; }
#market .mk2-m { min-height: 70px; cursor: default; }
#market .mk2-net .mk2-p b { color: #8fe08a; }
#market .mk2-net.out .mk2-p b { color: #ff9b8e; }
#market .mk2-fee { font: 700 14px Fredoka, sans-serif; color: #d88f84; }
#market .mk2-hh, #market .mk2-h { display: grid; grid-template-columns: 58px minmax(0, 1fr) 120px 130px 120px; column-gap: 12px; }
#market .mk2-hh span:first-child { grid-column: 1 / 3; }
#market .mk2-h { min-height: 64px; cursor: default; }
#market .mk2-h > .mk2-icw > img { width: 34px; height: 34px; }
#market .mk2-ago { font: 500 12.5px Mali, sans-serif; color: #8e8778; text-align: right; }
#market .mk2-tag { justify-self: start; padding: 2px 10px; border-radius: 4px; font: 700 13px Mali, sans-serif; }
#market .mk2-tag.buy { background: rgba(255, 120, 100, 0.14); color: #ffab9e; }
#market .mk2-tag.sell { background: rgba(130, 220, 120, 0.14); color: #9fe892; }
#market .mk2-bag { display: grid; grid-template-columns: repeat(auto-fill, 64px); gap: 8px; padding: 6px 0 4px; }
#market .mk2-cell { position: relative; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
#market .mk2-cell .tslot.mk2-ic { width: 62px; height: 62px; }
#market .mk2-cell:hover .tslot, #market .mk2-cell:focus-visible .tslot { filter: brightness(1.18); }
#market .mk2-cell.sel { outline: 2px solid #f3d27e; outline-offset: -1px; border-radius: 6px; }
#market .mk2-soon { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 90px 20px; text-align: center; color: #b7af9c; }
#market .mk2-soon img { width: 90px; height: 90px; object-fit: contain; opacity: 0.7; filter: grayscale(0.4); }
#market .mk2-soon b { font: 800 24px Mali, sans-serif; color: #f1dca2; }
#market .mk2-soon p { margin: 0; font: 600 15px/1.6 Mali, sans-serif; }
#market .mk2-soon small { padding: 3px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font: 700 13px Mali, sans-serif; color: #f3d27e; }

/* ---- the bottom bar: ออปชันค้นหา · ค้นหาไอเทม · อัตราภาษี · refresh · ซื้อ */
#market .mk2-foot { flex: none; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: linear-gradient(#141414, #0c0c0c); border-top: 1px solid #2c2a26; }
#market .mk2-gap { flex: 1; }
#market .mk2-optb, #market .mk2-btn { height: 40px; padding: 0 22px; border: 1px solid #4a4335; border-radius: 2px; background: linear-gradient(#3a3631, #24221f); cursor: pointer; font: 700 15px Mali, sans-serif; color: #e7dfcc; white-space: nowrap; }
#market .mk2-optb { min-width: 180px; }
#market .mk2-optb.set { color: #f3d27e; }
#market .mk2-optb.on { border-color: #e8b552; }
#market .mk2-btn.small { height: 32px; padding: 0 12px; font-size: 13.5px; }
#market .mk2-optb:hover, #market .mk2-btn:hover:not(:disabled), #market .mk2-optb:focus-visible, #market .mk2-btn:focus-visible { border-color: #b8914a; filter: brightness(1.12); }
#market .mk2-btn:disabled { opacity: 0.45; cursor: default; }
#market .mk2-search { position: relative; display: flex; align-items: center; width: 330px; height: 40px; padding: 0 8px 0 34px; background: #050505; border: 1px solid #3a352b; }
#market .mk2-search > i { position: absolute; left: 11px; top: 12px; width: 12px; height: 12px; border: 2px solid #b9b2a1; border-radius: 50%; }
#market .mk2-search > i::after { content: ''; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 2px; background: #b9b2a1; transform: rotate(45deg); }
#market .mk2-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #f2ecdd; font: 600 15px Mali, sans-serif; user-select: text; }
#market .mk2-search input::-webkit-search-cancel-button { display: none; }
#market .mk2-search button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; font: 700 17px sans-serif; color: #b9b2a1; }
#market .mk2-tax { font: 600 15px Mali, sans-serif; color: #c9c2b2; white-space: nowrap; }
#market .mk2-ref { width: 40px; height: 40px; padding: 0; border: 1px solid #6d5a33; background: radial-gradient(#3b3222, #1c1810); cursor: pointer; display: grid; place-items: center; }
#market .mk2-ref i { width: 18px; height: 18px; border: 3px solid #e8b552; border-right-color: transparent; border-radius: 50%; position: relative; }
#market .mk2-ref i::after { content: ''; position: absolute; right: -6px; top: -3px; border: 5px solid transparent; border-left-color: #e8b552; transform: rotate(35deg); }
#market .mk2-ref:hover i, #market .mk2-ref:focus-visible i { filter: brightness(1.25); }
#market .mk2-buy { min-width: 150px; height: 44px; padding: 0 24px; border: 1px solid #c79a46; border-radius: 2px; background: linear-gradient(#7a6033, #4a3a1d); cursor: pointer; font: 800 18px Mali, sans-serif; color: #fff4d4; }
#market .mk2-buy:hover:not(:disabled), #market .mk2-buy:focus-visible { filter: brightness(1.15); }
#market .mk2-buy:disabled { border-color: #4a463f; background: linear-gradient(#3b3936, #2a2826); color: #8c877d; cursor: default; }
/* what is ticked: เลือก n รายการ · รวม x ชิ้น · รวม 💎y (มี z) · ขาดอีก */
#market .mk2-bsum { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 15px Mali, sans-serif; color: #d6cfbf; white-space: nowrap; }
#market .mk2-bsum b { font-family: Fredoka, Mali, sans-serif; color: #fff0c8; }
#market .mk2-bsum > .mk2-p b { font-size: 18px; color: #a8ecff; }
#market .mk2-bsum > .mk2-p.short b { color: #ff8a7a; }
#market .mk2-bsum small { font: 600 13.5px Mali, sans-serif; color: #9b9483; }
#market .mk2-bsum .mk2-bad { font-size: 14.5px; }
#market .mk2-bsum.dim { color: #8e8778; }

/* ---- ออปชันค้นหา: a panel over the bottom bar */
#market .mk2-opt { position: absolute; left: 10px; bottom: 62px; z-index: 6; width: 640px; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: #1b1a18; border: 1px solid #5a4f39; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
#market .mk2-opt > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#market .mk2-opt b { width: 70px; font: 700 14px Mali, sans-serif; color: #c9b58a; }
#market .mk2-opt button { height: 32px; padding: 0 12px; border: 1px solid #3b372f; border-radius: 16px; background: #23211e; cursor: pointer; font: 600 13.5px Mali, sans-serif; color: #d6cfbf; }
#market .mk2-opt button i { font-style: normal; margin-right: 4px; }
#market .mk2-opt button.on { border-color: #e8b552; background: #3a2f1b; color: #fff0c8; }
#market .mk2-opt .mk2-optf { justify-content: flex-end; }
#market .mk2-opt .mk2-optf button { border-radius: 2px; }

/* ---- pop-ups: a piece's card, buying, listing */
#market .mk2-pop { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(0, 0, 0, 0.62); }
#market .mk2-pin { position: relative; width: 480px; max-height: 92%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 16px; background: linear-gradient(#22201d, #181715); border: 1px solid #8a7140; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7); scrollbar-width: thin; }
#market .mk2-pin h3 { margin: 0; font: 800 19px Mali, sans-serif; color: #f1dca2; }
#market .mk2-px { position: absolute; right: 8px; top: 6px; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; font: 700 18px sans-serif; color: #b9b2a1; }
#market .mk2-card { max-height: 420px; overflow-y: auto; }
/* (a piece's card is economy.js's details: its tag chips as in the book) */
#market .eco-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
#market .eco-chips i { font: 500 12px/1 'Mali', sans-serif; font-style: normal; padding: 4px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.45); color: #e9e2cf; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); }
#market .eco-chips i.gr { color: #1a1714; font-weight: 700; background: rgb(var(--gl, 200, 190, 170)); box-shadow: none; }
#market .eco-chips i.cls { color: #f6dc98; }
#market .eco-chips i.lk { color: #ffb3a8; }
#market .eco-chips i.ln.ln-e { color: #a6f2bb; box-shadow: inset 0 0 0 1px #3f8f55; }
#market .eco-chips i.ln.ln-p { color: #ffb4aa; box-shadow: inset 0 0 0 1px #a5463c; }
#market .mk2-thing { display: flex; align-items: center; gap: 12px; }
#market .mk2-thing span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#market .mk2-thing b { font: 700 17px Mali, sans-serif; }
#market .mk2-thing small { font: 500 12.5px/1.45 Mali, sans-serif; color: #a59e8d; }
/* (listing / buying: the piece in brief, its whole card folded - js/marketui.js brief, 2026-10-19 "บอกแต่สิ่งจำเป็น") */
#market .mk2-brief { padding: 4px 0 2px; }
#market .mk2-brief small + small { color: #e8dcb8; font-weight: 600; }
#market .mk2-more { margin: 2px 0 4px; }
#market .mk2-more > summary { cursor: pointer; width: max-content; padding: 2px 10px; border-radius: 999px; font: 600 12px Mali, sans-serif; color: #d9c79a; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); list-style: none; }
#market .mk2-more > summary::-webkit-details-marker { display: none; }
#market .mk2-more[open] > summary { margin-bottom: 6px; }
#market .mk2-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 12px; background: rgba(255, 255, 255, 0.035); font: 600 14.5px Mali, sans-serif; color: #cfc8b8; }
#market .mk2-sum.big { background: rgba(232, 181, 82, 0.08); }
#market .mk2-sum.big .mk2-p b { font-size: 19px; color: #8fe08a; }
#market .mk2-sum.bad span:first-child, #market .mk2-bad { color: #ff8a7a; font-weight: 700; }
#market .mk2-cut { font: 700 15px Fredoka, sans-serif; color: #d88f84; }
#market .mk2-pin-p { display: flex; align-items: center; gap: 6px; }
#market .mk2-pin-p img { width: 22px; height: 22px; }
#market .mk2-pin input { width: 120px; height: 32px; padding: 0 8px; border: 1px solid #5a4f39; background: #0b0b0b; color: #fff; font: 700 16px Fredoka, sans-serif; text-align: right; user-select: text; }
#market .mk2-step { display: flex; align-items: center; gap: 4px; }
#market .mk2-step > button:not(.mk2-btn) { width: 30px; height: 30px; padding: 0; border: 1px solid #5a4f39; background: #23211e; cursor: pointer; font: 800 17px/1 Fredoka, sans-serif; }
#market .mk2-step input { width: 70px; text-align: center; }
#market .mk2-hint { font: 500 12.5px/1.5 Mali, sans-serif; color: #a39b89; }
#market .mk2-min.low { color: #ff8a7a; font-weight: 700; }
#market .mk2-pbtn { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
/* buying the ticked ones: the bar fills; then the summary with what came (each icon opens its card) */
#market .mk2-prog { height: 8px; border-radius: 4px; background: #0b0b0b; box-shadow: inset 0 0 0 1px #3a352b; overflow: hidden; }
#market .mk2-prog i { display: block; height: 100%; background: linear-gradient(90deg, #b8914a, #f3d27e); transition: width 0.2s; }
#market .mk2-got { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#market .mk2-got .tslot.mk2-ic { width: 48px; height: 48px; }
#market .mk2-got > i { font: 700 14px Fredoka, sans-serif; font-style: normal; color: #a39b89; }
#market .mk2-good { font: 700 15px Mali, sans-serif; color: #8fe08a; }
#market .mk2-sum small { font: 500 12.5px Mali, sans-serif; color: #c9a59b; text-align: right; }
#market .mk2-pbtn .mk2-btn { height: 44px; }
#market .mk2-say { position: absolute; left: 50%; bottom: 72px; z-index: 12; transform: translateX(-50%); padding: 10px 22px; background: rgba(12, 12, 12, 0.95); border: 1px solid #8a7140; font: 700 15px Mali, sans-serif; color: #f6ead0; white-space: nowrap; }
#market .mk2-say.in { animation: mk2Say 0.2s ease-out both; }
@keyframes mk2Say { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- a phone (stage 420 wide): chips for the tree, one column, the bottom bar in two rows */
#market.mk2-narrow .mk2-top { height: 52px; gap: 8px; padding: 0 4px 0 8px; }
#market.mk2-narrow .mk2-bars { display: none; }
#market.mk2-narrow .mk2-title img { width: 28px; height: 28px; }
#market.mk2-narrow .mk2-title b { font-size: 17px; }
#market.mk2-narrow .mk2-chip { min-width: 0; height: 26px; padding-right: 7px; }
#market.mk2-narrow .mk2-chip em { font-size: 13px; }
#market.mk2-narrow .mk2-chip img { width: 18px; height: 18px; }
#market.mk2-narrow .mk2-tabs { height: 42px; padding-left: 0; overflow-x: auto; scrollbar-width: none; }
#market.mk2-narrow .mk2-tabs button { flex: none; min-width: 0; padding: 0 9px; font-size: 13.5px; }
#market.mk2-narrow .mk2-main { flex-direction: column; }
#market.mk2-narrow .mk2-tree { width: auto; overflow: visible; border-right: 0; border-bottom: 1px solid #2a2824; background: #151515; }
#market.mk2-narrow .mk2-chips { display: flex; gap: 6px; padding: 7px 8px; overflow-x: auto; scrollbar-width: none; }
#market.mk2-narrow .mk2-chips.sub { padding-top: 0; }
#market.mk2-narrow .mk2-chips button { flex: none; width: auto; min-height: 32px; padding: 0 12px; border: 1px solid #36322b; border-radius: 16px; background: #1f1e1c; font-size: 13.5px; white-space: nowrap; }
#market.mk2-narrow .mk2-chips button.on { border-color: #e8b552; background: #3a2f1b; color: #fff0c8; }
#market.mk2-narrow .mk2-chips.sub button { min-height: 28px; font-size: 12.5px; }
#market.mk2-narrow .mk2-body { padding: 0 8px 12px; }
#market.mk2-narrow .mk2-crumb { height: 40px; }
#market.mk2-narrow .mk2-crumb b { font-size: 14.5px; }
#market.mk2-narrow .mk2-head { top: 40px; padding: 0 10px; font-size: 12px; }
#market.mk2-narrow .mk2-row { gap: 8px; min-height: 64px; padding: 6px 10px 6px 4px; }
#market.mk2-narrow .mk2-star { width: 26px; font-size: 22px; }
#market.mk2-narrow .tslot.mk2-ic { width: 50px; height: 50px; }
#market.mk2-narrow .mk2-nm b { font-size: 14.5px; }
#market.mk2-narrow .mk2-cnt { min-width: 44px; font-size: 15px; }
#market.mk2-narrow .mk2-cnt small { display: none; }
#market.mk2-narrow .mk2-mh { display: none; }
#market.mk2-narrow .mk2-m { grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 4px; }
#market.mk2-narrow .mk2-m > .mk2-icw { grid-row: 1 / 3; }
#market.mk2-narrow .mk2-m > .mk2-p { grid-column: 3; grid-row: 1; justify-self: end; }
#market.mk2-narrow .mk2-m > .mk2-net { grid-column: 2; grid-row: 2; }
#market.mk2-narrow .mk2-m > .mk2-fee { display: none; }
#market.mk2-narrow .mk2-m > .mk2-btn { grid-column: 3; grid-row: 2; justify-self: end; }
#market.mk2-narrow .mk2-hh { display: none; }
#market.mk2-narrow .mk2-h { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; }
#market.mk2-narrow .mk2-h > .mk2-icw { grid-row: 1 / 3; }
#market.mk2-narrow .mk2-h > .mk2-nm { grid-column: 2; }
#market.mk2-narrow .mk2-h > .mk2-tag, #market.mk2-narrow .mk2-h > .mk2-p { grid-column: 2; grid-row: 2; justify-self: start; }
#market.mk2-narrow .mk2-h > .mk2-net { grid-column: 3; grid-row: 1; justify-self: end; }
#market.mk2-narrow .mk2-h > .mk2-ago { grid-column: 3; grid-row: 2; }
#market.mk2-narrow .mk2-sec h4 { flex-wrap: wrap; font-size: 15.5px; }
#market.mk2-narrow .mk2-sec h4 small { margin-left: 0; width: 100%; }
#market.mk2-narrow .mk2-bag { grid-template-columns: repeat(auto-fill, 58px); gap: 6px; }
#market.mk2-narrow .mk2-cell { width: 58px; height: 58px; }
#market.mk2-narrow .mk2-cell .tslot.mk2-ic { width: 56px; height: 56px; }
#market.mk2-narrow .mk2-foot { height: auto; flex-wrap: wrap; gap: 6px; padding: 6px 8px 8px; }
#market.mk2-narrow .mk2-search { order: -1; width: 100%; height: 36px; }
#market.mk2-narrow .mk2-optb { min-width: 0; height: 38px; padding: 0 10px; font-size: 13.5px; }
#market.mk2-narrow .mk2-btn { height: 38px; padding: 0 10px; font-size: 13px; }
#market.mk2-narrow .mk2-tax { font-size: 12.5px; }
#market.mk2-narrow .mk2-ref { width: 36px; height: 36px; }
#market.mk2-narrow .mk2-buy { min-width: 92px; height: 40px; padding: 0 12px; font-size: 16px; }
#market.mk2-narrow .mk2-opt { left: 6px; right: 6px; width: auto; bottom: 100px; }
#market.mk2-narrow .mk2-lbar { top: 40px; flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
#market.mk2-narrow .mk2-lnote { flex-basis: 100%; font-size: 12.5px; }
#market.mk2-narrow .mk2-seg { margin-right: auto; }
#market.mk2-narrow .mk2-seg button { padding: 0 8px; font-size: 12.5px; }
#market.mk2-narrow .mk2-lbar .mk2-btn.small { height: 32px; padding: 0 9px; font-size: 12.5px; }
#market.mk2-narrow .mk2-lp { min-width: 0; }
#market.mk2-narrow .mk2-lp > .mk2-p b { font-size: 17px; }
#market.mk2-narrow .mk2-tick { width: 22px; height: 22px; }
#market.mk2-narrow .mk2-bsum { order: -1; width: 100%; flex-wrap: wrap; row-gap: 2px; font-size: 13.5px; white-space: normal; }
#market.mk2-narrow .mk2-opt b { width: 100%; }
#market.mk2-narrow .mk2-pin { width: 400px; padding: 14px 12px 12px; }
#market.mk2-narrow .mk2-say { bottom: 110px; white-space: normal; width: 90%; text-align: center; }