/* Mercado (systems/market.js): a header with your gold and the tabs; filters on the side; cards
   lit in their rarity's color, with the price in the footer. */

/* one rarity ladder for pokémon and items: the item colors (css/rarity.css) plus épica */
.mk-rar-comum { --mk-rar: var(--rar-comum); }
.mk-rar-incomum { --mk-rar: var(--rar-incomum); }
.mk-rar-rara { --mk-rar: var(--rar-rara); }
.mk-rar-epica { --mk-rar: #ff6bb5; }
.mk-rar-mitica { --mk-rar: var(--rar-mitica); }
.mk-rar-lendaria { --mk-rar: var(--rar-lendaria); }

/* ---------------------------------------------------------------- header */
.mk-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 12px; }
.mk-wallet {
  display: grid; gap: 1px; padding: 6px 12px; border-radius: 10px; min-width: 96px;
  background: linear-gradient(180deg, #13213d, #0b1424); border: 1px solid #22355c;
}
.mk-wallet b { font-family: var(--pixel); font-size: 1rem; }
.mk-tabs { display: flex; gap: 4px; margin-left: auto; padding: 4px; border-radius: 12px; background: #070e1b; border: 1px solid #22355c; flex-wrap: wrap; }
.mk-tabs button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 0;
  background: none; color: var(--muted); font-family: var(--pixel); font-size: 0.78rem; cursor: pointer;
}
.mk-tabs button img { width: 18px; height: 18px; image-rendering: pixelated; opacity: 0.7; }
.mk-tabs button:hover { color: var(--text, #e8eefc); }
.mk-tabs button.on { background: linear-gradient(180deg, #2a4170, #1b2c50); color: #ffd75e; box-shadow: inset 0 0 0 1px #3d5d9e; }
.mk-tabs button.on img { opacity: 1; }

.mk-gold { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #ffd75e; white-space: nowrap; }
.mk-gold img { width: 14px; height: 14px; image-rendering: pixelated; }
.mk-gold.big { font-family: var(--pixel); font-size: 1.05rem; }
.mk-gold.big img { width: 18px; height: 18px; }
.mk-gold.pos { color: #6be39a; }
.mk-gold.mk-dia { color: #8fe3ff; }
.mk-gold.mk-dia.pos { color: #6be39a; }
.mk-dur .mk-coin { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.mk-totals > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mk-totals > div > .muted { flex-basis: 100%; }
.mk-coin { width: 16px; height: 16px; image-rendering: pixelated; flex: none; }
.small { font-size: 0.78rem; }

/* ---------------------------------------------------------------- buy: side filters + results */
.mk-shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; align-items: start; }
.mk-side {
  display: grid; gap: 12px; padding: 12px; border-radius: 14px; position: sticky; top: 0; min-width: 0; overflow: hidden;
  background: linear-gradient(180deg, #0f1b33, #0a1222); border: 1px solid #22355c;
}
.mk-fsec h4 { font-family: var(--pixel); font-size: 0.72rem; letter-spacing: 0.04em; color: #8fa3c9; text-transform: uppercase; margin: 0 0 6px; }
.mk-groups, .mk-sources { display: grid; gap: 4px; }
.mk-sources { grid-auto-flow: column; grid-auto-columns: max-content; }
.mk-group {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; min-width: 0;
  border-radius: 8px; border: 1px solid transparent; background: none; color: inherit; font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer;
}
.mk-sources .mk-group { grid-template-columns: 22px auto; border-color: #22355c; background: #0b1424; }
.mk-group span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-group img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.mk-group em { font-style: normal; font-size: 0.72rem; color: var(--muted); padding: 0 6px; border-radius: 999px; background: #060c18; }
.mk-group:hover { background: #13213d; }
.mk-group.on { background: linear-gradient(90deg, #2b1830, #1b2c50); border-color: #d93a52; }
.mk-group.on em { color: #fff; background: #d93a52; }

.mk-rars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mk-rar {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.78rem; min-width: 0; overflow: hidden; white-space: nowrap;
  color: var(--mk-rar); background: #0b1424; border: 1px solid color-mix(in srgb, var(--mk-rar) 30%, transparent);
}
.mk-rar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-rar); box-shadow: 0 0 6px var(--mk-rar); }
.mk-rar.on { color: #fff; background: color-mix(in srgb, var(--mk-rar) 30%, #0b1424); border-color: var(--mk-rar); }

.mk-types { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-type { display: inline-flex; padding: 1px; border: 2px solid transparent; border-radius: 7px; background: none; cursor: pointer; opacity: 0.55; line-height: 1.2; transition: opacity 0.15s; }
.mk-type .tag { display: inline-block; pointer-events: none; font-size: 0.62rem; padding: 3px 6px; line-height: 1.2; text-decoration: none; }
.mk-type:hover { opacity: 0.85; }
.mk-type.on { opacity: 1; border-color: #fff; box-shadow: 0 0 8px #ffffff55; }

.mk-pair { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6px; margin-bottom: 6px; font-size: 0.8rem; color: var(--muted); }
.mk-fields .mk-pair { grid-template-columns: auto minmax(0, 1fr); }
.mk-num { width: 100%; min-width: 0; }
.mk-side .input { width: 100%; }
.mk-switch { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; cursor: pointer; margin-top: 6px; }
.mk-clear { width: 100%; }

.mk-main { display: grid; gap: 10px; min-width: 0; }
.mk-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-search { flex: 1 1 200px; min-width: 0; }
.mk-sort { width: auto; }
.mk-ftoggle.on { border-color: #d93a52; color: #ffb3c0; }
.mk-more { justify-self: center; }

/* ---------------------------------------------------------------- cards */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mk-grid.small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mk-card {
  --mk-rar: #3d5d9e;
  position: relative; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: 14px; text-align: left;
  color: inherit; font: inherit; padding: 0;
  background: linear-gradient(180deg, #111e38, #0a1222);
  border: 1px solid color-mix(in srgb, var(--mk-rar) 40%, #22355c);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.mk-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px #0008, 0 0 0 1px color-mix(in srgb, var(--mk-rar) 60%, transparent); }
.mk-card.mine { opacity: 0.85; }
.mk-stage {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 6px;
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--mk-rar, #3d5d9e) 35%, transparent), transparent 70%), #081021;
  border-bottom: 1px solid #1b2a48;
}
.mk-stage.big { min-height: 150px; border-radius: 14px; border: 1px solid #22355c; }
.mk-stage.shiny, .mk-card.shiny .mk-stage {
  background: radial-gradient(circle at 50% 70%, #ffd75e44, transparent 70%), #081021;
}
.mk-card.shiny { border-color: #c9a227; }
.mk-pill {
  position: absolute; top: 6px; left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em;
  color: var(--mk-rar); background: #050b16cc; border: 1px solid color-mix(in srgb, var(--mk-rar) 55%, transparent); text-transform: uppercase;
}
.mk-count { position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 6px; font-family: var(--pixel); font-size: 0.72rem; background: #050b16cc; border: 1px solid #2a3f6b; }
.mk-shine { position: absolute; bottom: 6px; right: 8px; animation: mk-twinkle 1.6s ease-in-out infinite; }
@keyframes mk-twinkle { 50% { opacity: 0.35; transform: scale(0.85); } }
.mk-stage > img, .mk-stage > canvas, .mk-stage > div:not(.mk-pill) { margin: 0 auto; }
.mk-icon { width: 44px; height: 44px; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 3px 4px #000a); }
.mk-noart { width: 40px; height: 40px; border-radius: 50%; background: #1b2a48; display: inline-block; }
.mk-body { display: grid; gap: 4px; padding: 8px 10px; align-content: start; min-width: 0; }
.mk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--mk-rar) 55%, #ffffff); }
.mk-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mk-tags .tag { font-size: 0.58rem; padding: 1px 5px; }
.mk-up { font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; color: #c8b6ff; background: #2a1d55; border: 1px solid #4a36a0; }
.mk-seller { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; padding: 8px 10px;
  background: #070e1b; border-top: 1px solid #1b2a48;
}
.mk-buy { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.mk-buy .mk-qty { width: 58px; min-width: 0; padding: 4px 6px; flex: none; }
.mk-buy .btn { flex: none; }
.mk-buybtn { background: linear-gradient(180deg, #2f7d4a, #1f5a34); border-color: #3c9a5c; color: #fff; }
.mk-confirm { animation: mk-pulse 1s ease-in-out infinite; }
@keyframes mk-pulse { 50% { box-shadow: 0 0 0 3px #d93a5255; } }
.mk-yours { font-size: 0.72rem; font-weight: 700; color: var(--muted); padding: 2px 8px; border-radius: 6px; border: 1px dashed #3d5d9e; }
.mk-pick { cursor: pointer; }
.mk-pick:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.mk-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 12px; text-align: center; border-radius: 14px; border: 1px dashed #22355c; color: var(--muted); }
.mk-empty img { width: 48px; height: 48px; image-rendering: pixelated; opacity: 0.8; }
.mk-empty b { color: var(--text, #e8eefc); }

/* ---------------------------------------------------------------- sell form */
.mk-sell { display: grid; gap: 10px; }
.mk-form { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.mk-formbody { display: grid; gap: 10px; }
.mk-formbody h3 { font-family: var(--pixel); font-size: 1.1rem; margin: 0; }
.mk-hint { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mk-hint > div { display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; background: #0b1424; border: 1px solid #22355c; }
.mk-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.mk-fields label { display: grid; gap: 4px; }
.mk-pricein { width: 160px; font-size: 1.05rem; font-weight: 700; }
.mk-sum { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #070e1b; border: 1px solid #22355c; max-width: 360px; }
.mk-sum > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-get { padding-top: 6px; border-top: 1px dashed #2a3f6b; font-weight: 700; }
.mk-actions { display: flex; gap: 8px; }
.neg { color: #ff7a8a; }

/* ---------------------------------------------------------------- my listings / history */
.mk-progress { position: relative; height: 16px; border-radius: 6px; background: #050b16; border: 1px solid #22355c; overflow: hidden; }
.mk-progress i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2a5c3a, #4a8a5c); }
.mk-progress span { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 0.65rem; font-weight: 700; text-shadow: 0 1px 2px #000; }
.mk-totals { display: flex; gap: 8px; margin-bottom: 10px; }
.mk-totals > div { display: grid; gap: 2px; padding: 8px 14px; border-radius: 10px; background: #0b1424; border: 1px solid #22355c; }
.mk-history { display: grid; gap: 6px; }
.mk-hrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: #0b1424; border: 1px solid #1b2a48; }
.mk-hart { display: flex; align-items: center; justify-content: center; height: 44px; }
.mk-hart .mk-icon { width: 32px; height: 32px; }
.mk-hwhat { display: grid; min-width: 0; }
.mk-hwhat b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-badge { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.mk-badge.sold { background: #1f4a2e; color: #9be3b0; }
.mk-badge.bought { background: #1d2f55; color: #a9c3ff; }
.mk-hgold { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }

/* ---------------------------------------------------------------- phone */
html.mobile .mk-shop { grid-template-columns: 1fr; }
html.mobile .mk-side { display: none; position: static; }
html.mobile .mk-side.open { display: grid; }
html.mobile .mk-tabs { margin-left: 0; width: 100%; }
html.mobile .mk-tabs button { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
html.mobile .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.mobile .mk-form { grid-template-columns: 1fr; }
html.mobile .mk-hint { grid-template-columns: 1fr; }
html.mobile .mk-hrow { grid-template-columns: 40px minmax(0, 1fr) auto; }
html.mobile .mk-hrow .mk-badge { display: none; }
html.mobile .mk-sources { grid-auto-flow: row; }

/* the game's inputs have a 240px minimum; here they fit their place */
#panel-market .input { min-width: 0; }
#panel-market .mk-sort { flex: 0 0 auto; }

/* a fixed height: switching tabs (or a short list) doesn't resize the window */
.win[data-panel="market"] { height: calc(calc(100vh / var(--ui-zoom, 1)) - var(--win-top) - var(--win-bottom) - 2 * var(--win-pad, 22px)); }

/* how long a listing stays up (8 h, 24 h; 48 h for VIP) */
.mk-durfield { display: grid; gap: 4px; }
.mk-durs { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-dur {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  font-family: var(--pixel); font-size: 0.85rem; color: var(--muted); background: #0b1424; border: 1px solid #2a3f6b;
}
.mk-dur.on { color: #fff; background: linear-gradient(180deg, #2a4170, #1b2c50); border-color: #ffd75e; box-shadow: 0 0 0 1px #ffd75e44; }
.mk-dur.locked { opacity: 0.55; cursor: not-allowed; }
.mk-vip { font-family: inherit; font-size: 0.6rem; font-weight: 800; padding: 1px 5px; border-radius: 4px; color: #1a1205; background: linear-gradient(180deg, #ffe08a, #e3a72f); }
.mk-held-what { font-size: 0.78rem; color: var(--accent); }