/* Mercado (mercado.js, 04/10/2026): página com rolagem; cada personagem com a arte da carta (3D) e, ao lado, as cópias à venda.
   Reaproveita as classes da carta das Novas Cartas (.newCard, .newArt, .newPlate, .newAbs, .newBar) em tamanho de lista. */
.mkView{--gold:#e8c98b;--line:#e8c98b33;--ink:#120d18;position:relative;min-height:calc(100vh - 90px);padding:clamp(14px,2.4vh,26px) max(clamp(14px,4vw,64px),env(safe-area-inset-right)) 56px max(clamp(14px,4vw,64px),env(safe-area-inset-left));max-width:1500px;margin:0 auto;
 background:radial-gradient(ellipse 50% 40% at 15% 0,#e8c98b14,transparent 70%),radial-gradient(ellipse 40% 50% at 90% 20%,#6fb6f010,transparent 70%)}
.mkView[hidden]{display:none}
.mkHead{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mkTitles{flex:1;min-width:160px}
.mkTitles small{display:block;font-size:12px;letter-spacing:3px;color:var(--gold)}
.mkTitles h2{margin:2px 0 0;font:700 clamp(28px,3vw,44px)/1.05 Georgia,serif;background:linear-gradient(90deg,#fff6e3,#ffd98a 45%,#fff6e3);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkWallet{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:#120d18cc;font:700 18px/1 system-ui,sans-serif;color:#fff}
.mkWallet .coin{font-size:1em}
.mkTabs{display:flex;gap:6px;margin:16px 0 6px;padding:4px;width:max-content;max-width:100%;overflow-x:auto;border-radius:999px;border:1px solid var(--line);background:#120d18}
.mkTabs button{flex:none;padding:10px 20px;border-radius:999px;border:0;background:transparent;color:#d9cfe3;font:700 14px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.mkTabs button:hover{background:#ffffff14}
.mkTabs button[aria-selected=true]{background:linear-gradient(180deg,#ffe9b0,#e3b861);color:#1b1320}
.mkTabs b{font-weight:800}
/* Barra de filtros */
.mkBar{position:sticky;top:var(--mkTop,66px);z-index:30;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin:10px calc(-1 * clamp(8px,1.5vw,20px)) 18px;padding:12px clamp(8px,1.5vw,20px);border-radius:0 0 16px 16px;border-bottom:1px solid #e8c98b22;background:linear-gradient(180deg,#09070df5,#09070dd9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mkBar[hidden]{display:none}
.mkSearch{flex:1 1 260px;min-width:200px;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--ink)}
.mkSearch svg{width:18px;height:18px;flex:none;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round}
.mkSearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:500 15px system-ui,sans-serif}
.mkSearch:focus-within{border-color:var(--gold)}
.mkSel{display:grid;gap:3px}
.mkSel>span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#aaa3b5;padding-left:6px}
.mkSel select,.mkSel input{height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:#fff;font:600 14px system-ui,sans-serif;width:auto;min-width:0}
.mkSel select:focus,.mkSel input:focus{outline:2px solid var(--gold);outline-offset:1px}
.mkNum input{width:120px}
.mkChk{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 8px;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:#e9e0f2;font:600 13.5px system-ui,sans-serif;cursor:pointer;user-select:none}
.mkChk input{position:absolute;opacity:0;width:1px;height:1px}
.mkChk i{position:relative;flex:none;width:34px;height:20px;border-radius:10px;background:#0e0a14;border:1px solid #e8c98b55;transition:background .2s}
.mkChk i::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#9a8ca6;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s}
.mkChk input:checked+i{background:linear-gradient(180deg,#6b5226,#4a3818);border-color:var(--gold)}
.mkChk input:checked+i::after{transform:translateX(14px);background:linear-gradient(180deg,#ffe9b0,#e3b861)}
.mkChk input:focus-visible+i{outline:2px solid #fff3d6;outline-offset:2px}
.mkRefresh,.mkClear{height:40px;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:#e9e0f2;font:700 14px system-ui,sans-serif;cursor:pointer;padding:0 14px}
.mkRefresh{width:40px;padding:0;font-size:20px}
.mkRefresh:hover,.mkClear:hover{background:#2a2034}
.mkCount{font-size:13px;color:#aaa3b5;white-space:nowrap}
.mkBody{display:grid;gap:clamp(18px,3vh,30px)}
.mkNote{margin:4px 0 8px;color:#cfc5da;font-size:14px}
/* Carta em tamanho de lista */
.mkCardWrap{--mkw:clamp(190px,16vw,250px);width:var(--mkw);perspective:900px}
.mkCardWrap.sm{--mkw:150px}
.mkCardWrap .proFrame{--w:100%;width:100%}
.mkCardWrap.bought .mkFrame{animation:mkBought 1.1s ease-out}
@keyframes mkBought{0%{box-shadow:0 0 0 0 #ffe9b0}35%{box-shadow:0 0 0 6px #ffe9b0cc,0 0 60px #ffe9b0}100%{box-shadow:0 18px 40px #000a}}
/* Linha: carta à esquerda, cópias à venda à direita */
.mkRow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.6vw,40px);align-items:start;padding:clamp(14px,2vw,24px);border-radius:20px;border:1px solid color-mix(in srgb,var(--rar) 30%,#ffffff12);
 background:linear-gradient(135deg,color-mix(in srgb,var(--clan) 9%,#150f1c),#110c18 55%);box-shadow:0 10px 30px #0006}
.mkStage{display:grid;justify-items:center;gap:10px}
.mkEvo{display:grid;justify-items:center;gap:4px}
.mkEvo small{font-size:10px;letter-spacing:.2em;color:#aaa3b5}
.mkStars{display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:#0b0812d9;border:1px solid #ffffff14}
.mkStars button{width:28px;height:28px;padding:0;border-radius:50%;border:0;background:transparent;color:#5a4f66;font:700 17px/1 system-ui,sans-serif;cursor:pointer;transition:transform .15s,color .15s}
.mkStars button.on{color:#ffd36b;text-shadow:0 0 8px #ffb52e66}
.mkStars button.now{background:#ffffff1c;transform:scale(1.12)}
.mkStars button:hover{transform:scale(1.2)}
.mkInfo{min-width:0;display:grid;gap:10px}
.mkTags{display:flex;gap:8px;flex-wrap:wrap}
.mkRar{padding:3px 12px;border-radius:999px;background:color-mix(in srgb,var(--rar) 80%,#000);color:#101018;font:800 11.5px/1.6 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.mkClan{display:inline-flex;align-items:center;gap:7px;padding:3px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--clan) 60%,transparent);color:var(--clan);font:700 11.5px/1.6 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.mkClan i{width:8px;height:8px;border-radius:50%;background:var(--clan)}
.mkInfo h3{margin:0;font:700 clamp(22px,2.2vw,32px)/1.1 Georgia,serif;color:#fff}
.mkMeta{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:#cfc5da}
.mkMeta b{color:#fff}
.mkTotal{margin-left:auto;color:var(--rar);font-weight:700}
.mkOffers{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;max-height:min(440px,60vh);overflow:auto;scrollbar-width:thin;padding-right:4px}
.mkOffer{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;align-items:center;gap:6px 14px;padding:10px 14px;border-radius:14px;border:1px solid #ffffff14;background:#0d0912cc;transition:border-color .2s,background .2s}
.mkOffer:hover{border-color:color-mix(in srgb,var(--rar) 55%,transparent);background:#150f1ccc}
.mkOffer.mine{border-color:#6fb6f066}
.mkOffer.poor .mkPrice b{color:#ef8e9c}
.mkNone{padding:14px;border-radius:14px;border:1px dashed #ffffff22;color:#9a8ca6;font-size:14px}
.mkSeller{display:flex;align-items:center;gap:10px;min-width:0}
.mkSeller>i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,color-mix(in srgb,var(--clan) 70%,#000),#1b1522);border:1px solid #ffffff2a;font:800 15px system-ui,sans-serif;font-style:normal;color:#fff}
.mkSeller>span{display:grid;min-width:0}
.mkSeller b{font:700 15px system-ui,sans-serif;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkSeller small{font-size:12px;color:#9a8ca6}
.mkSeller em{font-style:normal;color:#ffd36b}
.mkEvoChip{padding:3px 9px;border-radius:999px;background:#ffd36b1f;color:#ffd36b;font:800 12.5px/1.4 system-ui,sans-serif;white-space:nowrap}
.mkQty{min-width:34px;text-align:center;font:800 14px system-ui,sans-serif;color:#cfc5da}
.mkPrice{display:inline-flex;align-items:center;gap:6px;font:800 18px/1 system-ui,sans-serif;color:#fff;white-space:nowrap}
.mkPrice .coin{font-size:.95em}
.mkPrice.big{font-size:24px;flex-wrap:wrap}.mkPrice small{font:500 12.5px system-ui,sans-serif;color:#9a8ca6;margin-left:8px}
.mkBtn{min-width:104px;padding:10px 16px;border-radius:12px;border:1px solid transparent;font:800 13.5px/1 system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;transition:transform .15s,filter .15s}
.mkBtn.buy{background:linear-gradient(180deg,#ffe9b0,#e3b861);color:#1b1320}
.mkBtn.buy:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07)}
.mkBtn.buy:disabled{background:#2a2230;color:#a89cb3;cursor:not-allowed}
.mkBtn.ghost{background:transparent;color:#e9e0f2;border-color:#e8c98b66}
.mkBtn.ghost:hover:not(:disabled){background:#ffffff14}
.mkBtn:disabled{opacity:.7}
.mkBtn:focus-visible,.mkStars button:focus-visible{outline:2px solid #fff3d6;outline-offset:2px}
/* Meus anúncios e Vender */
.mkMine{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px}
.mkMineRow{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:16px;border-radius:18px;border:1px solid color-mix(in srgb,var(--rar) 30%,#ffffff12);background:#130e19}
.mkMineRow h3{margin:0 0 6px;font:700 22px Georgia,serif;color:#fff}
.mkMineRow .mkPrice{margin:8px 0 12px}
.mkSell{display:grid;grid-template-columns:auto minmax(280px,520px);gap:clamp(20px,4vw,56px);justify-content:center;align-items:start;padding:clamp(8px,2vw,24px)}
.mkSellCard{--rar:#e8c98b}
.mkSellCard .mkCardWrap{--mkw:clamp(220px,20vw,300px)}
.mkForm{display:grid;gap:14px;padding:clamp(16px,2.4vw,28px);border-radius:20px;border:1px solid var(--line);background:#130e19}
.mkForm h3{margin:0;font:700 26px Georgia,serif;color:#fff}
.mkForm label{display:grid;gap:5px;font:600 13px system-ui,sans-serif;color:#cfc5da}
.mkForm input,.mkForm select{height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:#fff;font:600 15px system-ui,sans-serif;width:100%}
.mkForm input:focus,.mkForm select:focus{outline:2px solid var(--gold);outline-offset:1px}
.mkTwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mkFee{margin:0;min-height:1.4em;font-size:14px;color:#e9e0f2}
.mkFee .coin{font-size:.9em;vertical-align:-.2em}
.mkErr{margin:0;min-height:1.2em;color:#ef8e9c;font-size:14px}
.mkHint{color:#9a8ca6;line-height:1.5}
.mkEmpty{display:grid;justify-items:center;gap:10px;padding:clamp(30px,8vh,80px) 20px;text-align:center;border-radius:20px;border:1px dashed #ffffff22;background:#110c18aa}
.mkEmpty h3{margin:0;font:700 26px Georgia,serif;color:#fff}.mkEmpty p{margin:0;max-width:46ch;color:#cfc5da}
@media (max-width:860px){
 .mkBar{position:static;margin-top:6px}
 .mkView:not([hidden])::before{display:none}
 .mkRow{grid-template-columns:1fr;justify-items:center}
 .mkInfo{width:100%}
 .mkOffer{grid-template-columns:minmax(0,1fr) auto auto}
 .mkOffer .mkEvoChip,.mkOffer .mkQty:empty{display:none}
 .mkOffer .mkBtn{grid-column:1/-1}
 .mkSell{grid-template-columns:1fr;justify-items:center}
 .mkSel select,.mkSel input{max-width:46vw}
 .mkCount{width:100%;order:3}
 .mkTwo{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.mkStars button,.mkBtn,.mkChk i::after{transition:none}.mkCardWrap.bought .mkFrame{animation:none}}
.reduced .mkCardWrap.bought .mkFrame{animation:none}
html.lite .mkBar{background:#09070df5}

/* O logo do Eclipse fica fixo no topo: uma faixa escura atrás dele evita que as cartas passem por baixo da marca ao rolar. */
.mkView:not([hidden])::before{content:'';position:fixed;left:0;right:0;top:0;height:var(--mkTop,66px);z-index:2;pointer-events:none;background:linear-gradient(180deg,#09070d 55%,#09070d00)}
.mkRow,.mkOffer,.mkMineRow{scroll-margin-top:210px}

/* Evolução de cada cópia à venda (estrelas cheias = evolução da cópia; apagadas = o que falta até o máximo). */
.mkEvoChip{display:inline-flex;align-items:center;gap:0;border:0;cursor:pointer;letter-spacing:1px}
.mkEvoChip i{font-style:normal;color:#ffd36b44}
.mkEvoChip.max{background:linear-gradient(90deg,#ffd36b,#ffefb0);color:#2a1a00}.mkEvoChip.max i{display:none}
.mkEvoChip:hover{filter:brightness(1.25)}
@media (min-width:861px){.mkOffer .mkEvoChip{display:inline-flex}}
@media (max-width:860px){.mkOffer .mkEvoChip{display:none}}

/* a carta do mercado é a carta de verdade do combate (ver cardHtml em mercado.js) */
.mkFrame{perspective:900px}