/* Market (market.js): the Store's window and balances, collection slots for listings, client modals with the
   buy bar always in view, ba-outcome for confirmations. Phone first: every listing opens in a modal. */
.mk-win .window-body{display:flex;flex-direction:column;gap:6px;padding:6px}
.mk-top{display:flex;gap:4px;align-items:stretch}
.mk-top .st-bal{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}
.mk-top .st-bal img{width:22px;height:22px}
.mk-box{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:0 14px 0 6px}
.mk-box img{width:24px;height:24px;image-rendering:pixelated}
.mk-box b{position:absolute;right:-2px;top:-4px;min-width:16px;padding:0 3px;background:#e8c547;color:#1c1c1c;border:1px solid #111;font:bold 10px/14px 'Tibia Pixel',Verdana,sans-serif;text-align:center}
.mk-vip{display:inline-flex;align-items:center;gap:2px;color:#e8c547}
.mk-vip img{width:14px;height:14px;image-rendering:pixelated}
.mk-banner{padding:4px 6px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.mk-away{display:flex;align-items:center;gap:6px;padding:4px 6px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;color:#e4ca78;line-height:15px}
.mk-away img{width:20px;height:20px;flex:0 0 auto;image-rendering:pixelated}
.mk-away span{flex:1;min-width:0}.mk-away b{color:#f4d35e;font-weight:normal}
.mk-away button{flex:0 0 auto;min-height:22px;padding:1px 6px}
/* Sections: a 3×2 grid of icon buttons on phones, the Store's left column on wide screens. */
.mk-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.mk-cats button{position:relative;display:flex;align-items:center;gap:5px;min-width:0;min-height:32px;padding:2px 5px}
.mk-cats button>img{width:24px;height:24px;flex:0 0 auto;object-fit:contain;image-rendering:pixelated}
.mk-cat-ic{position:relative;flex:0 0 auto;width:24px;height:24px;overflow:hidden}
.mk-cats button span:not(.mk-cat-ic){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-cats button.active,.mk-side button.active,.mk-tabs button.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.mk-cats .st-badge{position:static;margin-left:auto;min-width:14px;padding:0 3px;font:bold 10px/15px 'Tibia Pixel',Verdana,sans-serif;text-align:center;color:#1c1c1c;background:#e8c547;border:1px solid #111}
.mk-layout{display:flex;flex-direction:column;gap:6px}
.mk-main{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Search */
.mk-search{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px}
.mk-search input,.mk-search select{min-width:0}
.mk-chips{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.mk-chips::-webkit-scrollbar{display:none}
.mk-chips button{flex:0 0 auto;min-height:22px;padding:1px 6px;white-space:nowrap}
.mk-chips button.on,.mk-wrap button.on{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.mk-chips button.x::after{content:' ×';color:#a9a9a9}
.mk-side{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mk-side.mk-side-3{grid-template-columns:repeat(3,1fr)}
.mk-side button{min-height:26px}
.mk-count{color:#a9a9a9;padding:0 2px}
.mk-big{min-height:34px}
/* Listings: the collection slot with the price under it */
.mk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.mk-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0;min-height:0;padding:3px 3px 4px;border:1px solid #111;border-image:none;background:#2b2b2b;box-shadow:inset 1px 1px #3d3d3d;color:#c0c0c0;text-align:center;cursor:pointer}
.mk-card:hover{border-color:#5e5e5e}
.mk-card.is-mine{border-color:#c5b47c}
.mk-card[aria-disabled=true]{cursor:not-allowed}
.mk-card .ba-slot{pointer-events:none}
.mk-card .ba-slot.lock{opacity:.45}
.mk-card .nm{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-card .sub{color:#a9a9a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-card .st-price{justify-content:center}
.mk-card .qty{position:absolute;right:5px;top:5px;z-index:2;color:#fff;text-shadow:1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000}
.mk-card .st-flag{z-index:2;width:30px;height:auto;max-height:34px;object-fit:contain}
.mk-tag{display:inline-block;align-self:center;padding:0 3px;background:#1c1c1c;border:1px solid #111;color:#a9a9a9;white-space:nowrap}
.mk-tag.ok{color:#7cf08a}.mk-tag.warn{color:#e4ca78}.mk-tag.bad{color:#e8756c}
.mk-up{color:#7cf08a}.mk-down{color:#e8756c}.mk-shiny{color:#f4d35e}.mk-gold{color:#f4d35e;font-weight:normal}
/* Sprites (market.js fit()): sized in whole device pixels per sprite pixel, never stretched. */
.mk-px{position:absolute;right:0;bottom:0;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none}
.mk-px.is-centered{right:auto;bottom:auto}
.mk-walk{animation:mk-walk var(--mk-ms,.8s) steps(var(--mk-steps,8),jump-none) infinite}
.mk-anim{animation:mk-anim var(--mk-ms,1s) steps(var(--mk-steps,2),jump-none) infinite}
@keyframes mk-walk{from{background-position-y:0%}to{background-position-y:100%}}
@keyframes mk-anim{from{background-position-x:0%}to{background-position-x:100%}}
@media(prefers-reduced-motion:reduce){.mk-walk,.mk-anim{animation:none}}
/* VIP highlight on top: one listing, drawn among the highlighted ones */
.mk-feat{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;min-height:0;padding:5px 8px 5px 6px;text-align:left;border:1px solid #111;border-image:none;background:#1c1c1c;box-shadow:inset 0 0 0 1px #c5b47c,1px 1px #6a6a6a;color:#c0c0c0;cursor:pointer}
.mk-feat .ba-slot{width:56px}
.mk-feat-txt{min-width:0}
.mk-feat-tag{display:flex;align-items:center;gap:4px;color:#e8c547}
.mk-feat-tag img{width:16px;height:16px;image-rendering:pixelated}
.mk-feat strong{display:block;color:#fff;font:22px/24px 'Tibia Pixel',Verdana,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-feat small{display:block;color:#a9a9a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-feat .go{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.mk-feat .go b{color:#e4ca78;font-weight:normal}
/* Modal: client window, its own scroll, the price bar always visible */
dialog.window.mk-modal{width:min(440px,calc(100vw - 12px));max-height:calc(100dvh - 24px)}
dialog.mk-modal::backdrop{background:#000a}
.mk-modal>#market-body{display:flex;flex-direction:column;gap:6px;padding:6px}
.mk-modal>#market-footer{position:static;margin:0;border-width:1px 0 0}
.mk-modal>#market-footer[hidden]{display:none}
.mk-foot-price{display:flex;flex-direction:column;min-width:0;line-height:15px}
.mk-foot-price small{color:#a9a9a9}
.mk-foot-price .st-price{font-size:22px;line-height:24px}
.mk-modal .sl-foot button{flex:0 1 auto;min-height:32px;padding:4px 12px}
.mk-modal .ba-outcome-window{width:min(320px,100%)}
.mk-head{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:center}
.mk-head>.gene-portrait,.mk-head>.ba-slot{width:72px;height:72px}
.mk-head h2{margin:0;font:22px/24px 'Tibia Pixel',Verdana,sans-serif;color:#fff;overflow-wrap:anywhere}
.mk-head p{margin:2px 0 0;line-height:15px;color:#c0c0c0}
.mk-head p small{color:#a9a9a9}
.mk-head .ti{vertical-align:-2px}
.mk-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.mk-modal .gene-card{margin:0;padding:6px 8px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.mk-modal .gene-row b small{font-weight:normal}
.mk-two{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mk-two>div{padding:4px 6px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;line-height:15px}
.mk-two b{display:block;color:#a9a9a9;font-weight:normal}.mk-two span{color:#fff}
.mk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.mk-stats div{padding:4px 6px;background:#3d3d3d url('/assets/ui/classic/panel-texture.png');border:1px solid #111;box-shadow:inset 1px 1px #6a6a6a;line-height:15px;color:#c0c0c0}
.mk-stats b{display:block;color:#f4d35e;font-weight:normal}
.mk-band{display:grid;gap:3px;padding:6px 8px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.mk-bar{position:relative;height:10px;background:#1c1c1c;border:1px solid #000}
.mk-bar i{position:absolute;top:0;bottom:0;background:#4a7a3a}
.mk-bar b{position:absolute;top:-3px;bottom:-3px;width:3px;background:#f4d35e;box-shadow:0 0 0 1px #000}
.mk-scale{display:flex;justify-content:space-between;color:#a9a9a9}
.mk-modal .st-kv{margin:0}
.mk-note{margin:0;color:#a9a9a9;line-height:15px}
.mk-warn{margin:0;color:#e4ca78;line-height:15px}
.mk-warn:empty{display:none}
/* Steppers and choices */
.mk-field{display:grid;gap:3px;color:#c0c0c0}
.mk-step{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:3px}
.mk-step input{min-width:0;height:32px;text-align:center;font-size:16px}
.mk-step button{min-height:32px;padding:0;font-size:16px}
.mk-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.mk-presets button{min-height:26px;padding:1px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-wrap{display:flex;flex-wrap:wrap;gap:3px}
.mk-wrap button{min-height:26px;padding:1px 8px}
.mk-fgrid{display:grid;gap:8px}
.mk-fgrid h4{margin:0 0 3px;color:#a9a9a9;font:11px 'Tibia Pixel',Verdana,sans-serif}
.mk-range{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:6px;align-items:center}
.mk-range input{width:100%;accent-color:#c5b47c}
.mk-range b{color:#fff;font-weight:normal;text-align:right}
.mk-hl{display:grid;gap:4px;padding:6px 8px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;color:#c0c0c0}
.mk-hl label{display:flex;gap:6px;align-items:flex-start;line-height:15px}
.mk-hl b{font-weight:normal;color:#e8c547}
.mk-check{display:flex;gap:6px;align-items:flex-start;color:#e4ca78;line-height:15px}
.mk-perks{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px}
.mk-perks div{padding:3px 6px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;line-height:15px;color:#a9a9a9}
.mk-perks small{display:block}.mk-perks span{color:#fff}
/* BC */
.mk-bc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.mk-bc-tiles div{display:flex;flex-direction:column;align-items:center;min-width:0;padding:4px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;color:#fff;text-align:center}
.mk-bc-tiles small{color:#a9a9a9}
.mk-bc-tiles b{font:22px/24px 'Tibia Pixel',Verdana,sans-serif}
.mk-book{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px}
.mk-book table{width:100%;border-collapse:collapse;background:#2b2b2b;border:1px solid #111;font:11px 'Tibia Pixel',Verdana,sans-serif;font-variant-numeric:tabular-nums;color:#c0c0c0}
.mk-book th{padding:2px 4px;color:#a9a9a9;background:#2f2f2f;text-align:left;font-weight:normal}
.mk-book td{padding:2px 4px;border-top:1px solid #1c1c1c}
.mk-book tr:nth-child(even) td{background:#323232}
.mk-book td:last-child,.mk-book th:last-child{text-align:right}
.mk-book tr.hit td{box-shadow:inset 0 1px #c5b47c,inset 0 -1px #c5b47c;color:#fff}
.mk-book .ask{color:#e8756c}.mk-book .bid{color:#7cf08a}
.mk-bc-tiles .ask{color:#e8756c}.mk-bc-tiles .bid{color:#7cf08a}
.mk-spark{display:block;width:calc(100% - 8px);height:46px;margin:0 4px 4px}
/* Own offers, Box and receipts */
.mk-rows{display:flex;flex-direction:column;gap:2px;padding:2px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.mk-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:6px;align-items:center;min-height:0;padding:3px 5px 3px 3px;border:1px solid #111;border-image:none;background:#2b2b2b;color:#c0c0c0;text-align:left;cursor:pointer}
.mk-row.is-static{cursor:default}
.mk-row:nth-child(even){background:#323232}
.mk-row>.ba-slot{width:40px}
.mk-row strong{display:block;color:#fff;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-row small{display:block;color:#a9a9a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-row .end{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.mk-link{color:#e4ca78;text-decoration:underline;cursor:pointer}
.mk-receipts td:last-child{text-align:right;white-space:nowrap}
.mk-receipts td:first-child{white-space:nowrap}
/* Wide screens: sections as the Store's left column, more cards per row */
@media(min-width:900px){
 .mk-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:start}
 .mk-cats{grid-template-columns:1fr}
 .mk-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
}
@media(max-width:360px){.mk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-top .st-bal{font-size:10px}}