/* Market (market.js, docs/MARKET.md): the client's Market. What is traded on the left (one icon per species or item
   with how many offers), the chosen one on the right with its offers in tables and its Details; client modals with the
   buy bar always in view and ba-outcome for confirmations. On a phone the list and the chosen one take turns. */
.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}
.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,.mk-otools button.on{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.mk-chips button.x::after,.mk-otools button.x::after{content:' ×';color:#a9a9a9}
.mk-side{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mk-side button{min-height:26px}
.mk-side button.active,.mk-tabs button.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.mk-big{min-height:34px}
.mk-row .ba-slot.lock{opacity:.45}
.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}}
/* 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}
.mk-spark{display:block;width:100%;height:46px;margin:2px 0 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}
/* The window: balances in the title, the goods (Criaturas | Itens | Bestiary Coins) and My offers / Box. */
.mk-win{max-width:1280px;margin:0 auto}
.mk-frame{display:flex;flex-direction:column;gap:6px;padding:6px}
.mk-bal{display:flex;align-items:center;gap:8px;white-space:nowrap}
.mk-bal>span{display:inline-flex;align-items:center;gap:3px;color:#fff}
.mk-bal img{width:16px;height:16px;image-rendering:pixelated}
.mk-topbar{display:flex;flex-wrap:wrap;gap:4px;justify-content:space-between}
.mk-kinds,.mk-mine{display:flex;gap:2px;min-width:0}
.mk-kinds{flex:1 1 300px}.mk-kinds button{flex:1 1 0}
.mk-mine{flex:0 1 auto}
.mk-kinds button,.mk-mine button{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;height:28px;min-height:28px;padding:0 8px;white-space:nowrap}
.mk-mine button img{width:16px;height:16px;image-rendering:pixelated}
.mk-kinds button.active,.mk-mine button.active,.mk-dtabs button.active,.mk-type.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.mk-mine b{min-width:15px;padding:0 3px;font:bold 10px/14px 'Tibia Pixel',Verdana,sans-serif;text-align:center;color:#1c1c1c;background:#e8c547;border:1px solid #111}
.mk-feat{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:6px;align-items:center;width:100%;min-height:0;padding:3px 8px 3px 3px;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}
.mk-feat-txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0}
.mk-feat-tag{display:inline-flex;align-items:center;gap:3px;color:#e8c547}
.mk-feat-tag img{width:16px;height:16px;image-rendering:pixelated}
.mk-feat b{color:#fff;font-weight:normal}
.mk-feat small{color:#a9a9a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* One client tile: the sprite at 1x (32 px), never stretched. */
.mk-ic{position:relative;display:block;width:36px;height:36px;flex:0 0 36px;overflow:hidden;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000}
/* List and chosen: side by side on a desktop, taking turns on a phone. */
.mk-split{display:grid;gap:6px;min-width:0}
.mk-split>*{min-width:0}
.mk-split.show-detail>.mk-list{display:none}
.mk-split:not(.show-detail):not(.is-single)>.mk-detail{display:none}
.mk-list,.mk-detail{display:flex;flex-direction:column;gap:5px;padding:5px;background:#3d3d3d url('/assets/ui/classic/panel-texture.png');border:1px solid #111;box-shadow:1px 1px #6a6a6a,inset 1px 1px #6a6a6a}
.mk-ltools{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.mk-ltools select,.mk-ltools input{min-width:0}
.mk-ltools input{grid-column:1/-1}
.mk-types{display:grid;grid-template-columns:repeat(auto-fill,40px);gap:2px;justify-content:start;align-content:start;padding:3px;min-height:84px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.mk-types>p{grid-column:1/-1;margin:6px}
.mk-type{position:relative;width:40px;height:40px;min-width:0;min-height:0;padding:1px;border:1px solid #111;border-image:none;background:#2b2b2b;box-shadow:none}
.mk-type .mk-ic{width:36px;height:36px;border:0;box-shadow:none;background:transparent}
.mk-type.is-none .mk-ic{opacity:.55}
.mk-type b{position:absolute;right:1px;bottom:0;z-index:2;font:11px/12px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;pointer-events:none}
.mk-lcount{color:#a9a9a9}
.mk-dhead{display:flex;align-items:center;gap:6px;padding:4px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.mk-dhead>span{min-width:0}
.mk-dhead b{display:block;color:#fff;font-weight:normal}
.mk-dhead small{display:block;color:#a9a9a9}
.mk-back{flex:0 0 auto;width:28px;min-width:28px;height:36px;min-height:36px;padding:0;font-size:16px}
.mk-dtabs{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mk-dtabs button{min-height:26px}
.mk-otools{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.mk-otools button{min-height:24px;padding:1px 8px}
.mk-own{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:#c0c0c0}
.mk-th{margin:2px 0 0;font:11px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0}
.mk-th small{color:#a9a9a9}
.mk-tbl{overflow-x:auto;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.mk-table{width:100%;border-collapse:collapse;font:11px 'Tibia Pixel',Verdana,sans-serif;font-variant-numeric:tabular-nums;color:#c0c0c0}
.mk-table th{padding:2px 4px;text-align:left;font-weight:normal;color:#a9a9a9;background:#2f2f2f;border-bottom:1px solid #111;white-space:nowrap}
.mk-table th button{min-height:0;height:auto;padding:0;border:0;border-image:none;background:none;box-shadow:none;color:inherit;font:inherit}
.mk-table th button.on{color:#fff}
.mk-table td{padding:2px 4px;border-top:1px solid #262626;white-space:nowrap}
.mk-table tbody tr:nth-child(even) td{background:#262626}
.mk-table tbody tr[data-mk-offer]{cursor:pointer}
.mk-table tbody tr[data-mk-offer]:hover td,.mk-table tbody tr[data-mk-offer]:focus-visible td{background:#3a3a3a;color:#fff}
.mk-table tr.is-mine td{color:#e4ca78}
.mk-table tr.hit td{box-shadow:inset 0 1px #c5b47c,inset 0 -1px #c5b47c;color:#fff}
.mk-table .num{text-align:right}
.mk-table b{color:#fff;font-weight:normal}
.mk-table small{color:#a9a9a9}
.mk-table td.mk-tc{width:38px;padding:1px 2px}
.mk-table .mk-p{color:#f4d35e}
.mk-table .ask{color:#e8756c}.mk-table .bid{color:#7cf08a}
.mk-table .mk-none{padding:8px;text-align:center;color:#a9a9a9;white-space:normal}
.mk-table td button{min-height:24px;padding:1px 8px}
.mk-create{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px;margin-top:auto;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;color:#c0c0c0}
.mk-create button{min-height:28px;padding:0 18px}
.mk-pick{margin:24px 8px}
.mk-kv td:last-child{text-align:right}
.mk-book2{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mk-book2>div{min-width:0}
.mk-bcform{display:grid;gap:5px;padding:5px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.mk-bcgo{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.mk-bcgo button{min-height:30px}
@media(max-width:420px){.mk-who{display:none}.mk-bal{gap:5px}.mk-kinds button,.mk-mine button{padding:0 4px}}
/* Desktop: the list beside the chosen one, as in the client. */
@media(min-width:900px){
 .mk-split{grid-template-columns:300px minmax(0,1fr);align-items:stretch}
 .mk-split.is-single{grid-template-columns:1fr}
 .mk-split.show-detail>.mk-list{display:flex}
 .mk-split:not(.show-detail):not(.is-single)>.mk-detail{display:flex}
 .mk-back{display:none}
 .mk-types{max-height:calc(100dvh - 280px);overflow-y:auto;min-height:300px}
 .mk-bcform{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mk-bcform>.mk-side,.mk-bcform>.mk-note,.mk-bcform>.mk-bcgo{grid-column:1/-1}
}