/* Markets (client/panels-market.js) */
.mk-root { min-height: 100%; display: flex; flex-direction: column; margin: -12px -12px 0; background: radial-gradient(ellipse at 50% 20%, #5a4a2e, #2a2014 70%); }
#panel .pn-wrap.mk-root { padding-bottom: 0; min-height: calc(100% + 12px); } /* tab bar sits flush at the bottom even on short tabs (as in the Clan Duel) */
.mk-awning { position: relative; height: 54px; background:
  radial-gradient(circle at 50% 100%, transparent 14px, transparent 0) , repeating-linear-gradient(90deg, #f3d9b0 0 34px, #c8573c 34px 68px);
  -webkit-mask: radial-gradient(circle 17px at 17px 54px, transparent 16px, #000 17px) 0 0 / 34px 100% repeat-x;
          mask: radial-gradient(circle 17px at 17px 54px, transparent 16px, #000 17px) 0 0 / 34px 100% repeat-x;
  box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.mk-rubies { position: absolute; right: 10px; top: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 800 14px/1 system-ui; }
.mk-res { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px 4px; }
.mk-res span { padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font: 700 12px/1.2 system-ui; } .mk-res b { font-weight: 900; }
.mk-body { flex: 1; padding: 8px 12px 16px; }
.mk-merchant { position: relative; height: 150px; margin: 6px 0 12px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 25% 40%, var(--c-amber-hi), #e3902c 45%, #8a3a1a 100%); border: 3px solid var(--c-amber); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.mk-dealer { position: absolute; left: 8px; bottom: -8px; width: 120px; height: 150px; display: grid; justify-items: center; align-content: end; }
.mk-dealer .hat { font-size: 54px; line-height: .8; margin-bottom: -16px; position: relative; z-index: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
.mk-dealer .face { font-size: 90px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.45)); }
.mk-bubble { position: absolute; left: 130px; right: 10px; top: 12px; padding: 8px 12px; border-radius: 12px; background: #fff8ec; color: #4a3a2a; font: 600 14px/1.3 system-ui; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.mk-bubble::before { content: ''; position: absolute; left: -10px; top: 18px; border: 6px solid transparent; border-right: 10px solid #fff8ec; }
.mk-refresh { position: absolute; left: 10px; bottom: 8px; display: grid; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,.45); }
.mk-refresh small { font: 700 11px/1 system-ui; color: #f3e6cf; } .mk-refresh b { font: 900 18px/1.1 ui-monospace, Menlo, monospace; color: #fff; }
.mk-refresh-btn { position: absolute; right: 10px; bottom: 10px; min-width: 120px; height: 44px; border-radius: 10px; border: 0; font: 900 20px/1 system-ui; color: #fff;
  background: linear-gradient(#ffcf5a, #d9901f); box-shadow: 0 4px 0 #8a5a10; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.mk-refresh-btn.free { background: linear-gradient(var(--c-good-hi), #4fa52b); box-shadow: 0 4px 0 #2e6b18; }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mk-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 6px 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(#ffe7b8, #f5cf8a); box-shadow: 0 0 0 2px #c8913a, 0 5px 0 #a8742a, 0 8px 12px rgba(0,0,0,.35); }
.mk-card:active { transform: translateY(2px); }
.mk-qty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 28px; color: #3a2a14; font: 900 14px/1 system-ui; }
.mk-qty button { width: 25px; height: 25px; padding: 0; border: 1px solid #b18442; border-radius: 7px; background: linear-gradient(#fff1cf,#e7bf73); color: #3a2a14; font: 900 18px/1 system-ui; }
.mk-card.sold, .mk-card.locked { filter: grayscale(.7) brightness(.8); cursor: default; }
.mk-tile { position: relative; width: 72px; height: 72px; border-radius: 10px; display: grid; place-items: center; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 0 2px rgba(0,0,0,.25); }
.mk-tile.blue { background: linear-gradient(#5fb8ef, #2f7fc4); } .mk-tile.grey { background: linear-gradient(#a4aab2, #5e6670); }
.mk-tile.orange { background: linear-gradient(#ffb15a, #e0782a); } .mk-tile.purple { background: linear-gradient(#c48cf0, #7a3fb0); }
.mk-tile .ic { font-size: 36px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.mk-tile b { position: absolute; right: 4px; bottom: 2px; font: 900 13px/1 system-ui; color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.mk-sub { font: 700 10px/1.2 system-ui; color: #6b4a1e; text-align: center; min-height: 24px; }
.mk-price { align-self: end; width: calc(100% + 12px); margin-top: 4px; padding: 7px 0 8px; border-radius: 0 0 10px 10px; text-align: center; background: #fbe9c4; border-top: 1px solid #e3bd7a; font: 700 15px/1 system-ui; color: #4a3a2a; }
.mk-price b { font-weight: 900; color: #3a2a14; }
.mk-free { color: #3fae2b; font-weight: 900; font-size: 18px; text-shadow: 0 1px 0 #fff; }
.mk-sold { color: #8a6a4a; font-weight: 800; } .mk-lock { color: #7a5a3a; font-size: 12px; font-weight: 800; }
.mk-disc { position: absolute; left: -8px; top: -10px; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; transform: rotate(-20deg);
  background: radial-gradient(circle at 40% 35%, var(--c-good-hi), #3a9a2a); color: #fff; font: 900 12px/1 system-ui; text-shadow: 0 1px 0 rgba(0,0,0,.4); box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.mk-disc.red { background: radial-gradient(circle at 40% 35%, #ff8a5a, #d6402a); }
.mk-banner { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 6px 0 12px; border-radius: 12px; background: linear-gradient(135deg, #f5cf8a, #e3a64a); color: #3a2a14; box-shadow: 0 0 0 2px #c8913a; }
.mk-banner.vip { background: linear-gradient(135deg, var(--c-amber-pale), var(--c-amber)); } .mk-banner.ally { background: linear-gradient(135deg, #b9d8f5, #6fa6dc); }
.mk-banner .big { font-size: 40px; } .mk-banner b { display: block; font: 900 17px/1.2 system-ui; } .mk-banner small { font-size: 12px; opacity: .85; }
.mk-x { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #fbe9c4; box-shadow: 0 0 0 2px #c8913a; }
.mk-x select, .mk-x input { background: #fff; color: #3a2a14; border-color: #c8913a; }
.mk-x-out { font: 800 15px/1.2 system-ui; color: #3a2a14; text-align: center; }
.mk-x-go { height: 48px; border-radius: 10px; border: 0; font: 900 18px/1 system-ui; color: #fff; background: linear-gradient(var(--c-good-hi), #4fa52b); box-shadow: 0 4px 0 #2e6b18; }
.mk-tabs { position: sticky; bottom: 0; display: flex; gap: 2px; align-items: stretch; padding: 6px 6px calc(8px + var(--safe-bottom)); overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(#5a3c20, #3a2614); border-top: 3px solid #8a6038; box-shadow: 0 -6px 14px rgba(0,0,0,.45); }
.mk-back { flex: 0 0 48px; height: 48px; align-self: center; border-radius: 50%; border: 0; font-size: 24px; color: #fff; background: radial-gradient(circle at 50% 35%, #a4785a, #6b4a2e); box-shadow: 0 0 0 2px #e8c79a; }
.mk-tab { position: relative; flex: 1 0 72px; padding: 6px 4px; border: 0; border-radius: 10px 10px 4px 4px; background: none; display: grid; justify-items: center; gap: 2px; color: #fff; }
.mk-tab .ic { font-size: 30px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.mk-tab b { font: 900 12px/1.1 system-ui; text-align: center; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.mk-tab.on { background: linear-gradient(var(--c-amber-hi), #e3a03a); box-shadow: 0 -2px 0 #fff3c8 inset; }
.mk-tab .hud-bdg { top: 2px; right: 6px; }
/* tap = what it is, double-tap = buy; Quick buy switch makes one tap buy */
.mk-quick { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.28); color: #f3e6c8; font-weight: 700; font-size: 13px; cursor: pointer; user-select: none; }
.mk-quick input { display: none; }
.mk-quick .sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #5a4a3a; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); transition: background .15s; }
.mk-quick .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.mk-quick.on .sw { background: #3fae55; }
.mk-quick.on .sw::after { transform: translateX(16px); }
.mk-info { display: grid; gap: 8px; }
.mk-info-line { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.06); font-weight: 700; }
.mk-info-price { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px 0; font-weight: 800; }