/* =====================================================================
   MERCADO SECRETO (19/10, SQL 1934–1935) — src/ui/mercado-secreto-ui.js
   O mercador fica no canto direito da arena da horda, com a placa acima
   ("Mercado Secreto <Descoberto por Fulano>", o tempo e o ✕). Posição em
   % da arena, medida na auditoria: PC right 9% / altura 27% / bottom 12%;
   celular em pé right 1% / 16% / 14% (abaixo do Dourado); celular deitado
   right 13% / 20% / 8% (ao lado do Dourado). Quem calcula: posicionar().
   ===================================================================== */
/* O corpo pinta ATRÁS da arena (z 0 < .fighters 1): monstros e herói passam na frente dele. A placa fica por cima
   (z 8). .ms-npc sem z-index não cria camada própria, então cada filho vai para a sua. */
.ms-npc{position:absolute;z-index:auto;display:block;padding:0;margin:0;border:0;background:none;cursor:var(--cur-mao,pointer);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ms-npc.hidden,body:not(.swarm-pve-active) .ms-npc{display:none}
.ms-npc:focus-visible{outline:2px solid #d9b8ff;outline-offset:3px;border-radius:8px}
.ms-npc-corpo{position:absolute;inset:0;z-index:0;background:no-repeat 0 0/300% 200%;filter:drop-shadow(0 0 6px rgba(168,116,255,.55)) drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.ms-npc-corpo.parado{background-size:100% 100%;background-position:0 0}
/* Sombra no chão (pedido do autor 22/10: "mercador ta sem sombra"), a mesma luz dos corpos da arena
   (src/combat/v2/renderer.js LUZ_PADRAO: achata .48, inclina -.32, contato .7, cor rgb(6,10,20)): a silhueta do
   próprio quadro, deitada a partir do pé (51% 97% da folha), escura no pé e sumindo na ponta, mais a mancha de
   contato debaixo do pé. Pinta antes do corpo (mesma camada 0, vem antes no HTML): nunca cobre o mercador. */
.ms-npc::before{content:"";position:absolute;z-index:0;left:51%;top:97%;width:44%;height:9%;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(6,10,20,.6) 0%,rgba(6,10,20,.32) 42%,transparent 72%)}
.ms-npc-sombra{position:absolute;inset:0;z-index:0;pointer-events:none;background:no-repeat 0 0/300% 200%;
  transform-origin:51% 97%;transform:matrix(1,0,-.32,-.48,0,0);filter:brightness(0) blur(1px);opacity:.8;
  -webkit-mask-image:linear-gradient(to top,transparent 0,transparent 2%,#000 3%,#000 30%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.15) 100%);
  mask-image:linear-gradient(to top,transparent 0,transparent 2%,#000 3%,#000 30%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.15) 100%)}
.ms-npc-sombra.parado{background-size:100% 100%;background-position:0 0}
.ms-npc:hover .ms-npc-corpo{filter:drop-shadow(0 0 10px rgba(200,150,255,.85)) drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.ms-placa{position:absolute;z-index:8;cursor:var(--cur-mao,pointer);left:50%;bottom:100%;translate:-50% 0;margin-bottom:2px;white-space:nowrap;text-align:center;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;gap:1px;font:600 12px/1.25 Cinzel,Georgia,serif;text-shadow:0 1px 2px #000,0 0 5px #000}
.ms-placa b{color:#d9b8ff;font-weight:700}
.ms-placa i{font-style:normal;color:#e6b65a;font-family:Arial,sans-serif;font-size:11px}
.ms-placa .ms-tempo{display:inline-flex;align-items:center;gap:5px;font:11px Arial,sans-serif;color:#ece6f3;background:rgba(30,16,50,.88);
  border:1px solid #e6b65a;border-radius:999px;padding:1px 2px 1px 8px;font-variant-numeric:tabular-nums}
.ms-placa .ms-x{width:18px;height:18px;min-width:18px;padding:0;border-radius:50%;background:#2a1c40;border:1px solid #6b5a85;color:#b3a7c4;
  display:grid;place-items:center;font-size:10px;line-height:1;cursor:var(--cur-mao,pointer)}
.ms-placa .ms-x:hover{color:#fff;border-color:#d9b8ff}
/* 22/10 (relato do autor: "não consigo clicar nos itens atrás dele"): o nome e a frase da placa deixam o clique passar
   para o chão; só o tempo e o ✕ são botões. O corpo continua abrindo a vitrine. */
.ms-placa{pointer-events:none}.ms-placa .ms-tempo,.ms-placa .ms-x{pointer-events:auto}
@media (max-width:640px){
  .ms-placa{left:auto;right:0;translate:none;align-items:flex-end;font-size:9px}
  .ms-placa i,.ms-placa .ms-tempo{font-size:9px}
  .ms-placa .ms-lg{display:none}
  .ms-placa .ms-x{width:22px;height:22px;min-width:22px}
}
.ms-placa.ms-placa-lado{left:auto;right:100%;bottom:auto;top:50%;translate:0 -50%;margin:0 4px 0 0;align-items:flex-end}
@media (prefers-reduced-motion:reduce){.ms-npc-corpo,.ms-npc-sombra{background-size:100% 100%!important;background-position:0 0!important}}

/* ------------------------------------------------------------- o menu (22/10, SQL 1760): 3 abas, nada de rolar.
   Cabeçalho, abas e rodapé fixos; o corpo ocupa o resto. Leilão em linhas, Balcão/Tesouro em grade de cartas.
   A confirmação e o painel de lance cobrem só o corpo (as abas e os saldos continuam à vista). */
.ms-veu{--ms-ouro:#e2b85c;--ms-ouro2:#f6dc9a;--ms-txt:#efe8f7;--ms-txt2:#c9bedb;--ms-linha:#5a4685;--ms-bom:#7fd49a;--ms-ruim:#ef7a7a;--ms-lend:#ff9f43;--ms-anc:#5fd0ff;--ms-asa:#c99bff;
  position:fixed;inset:0;z-index:1160;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,4,10,.82);backdrop-filter:blur(3px)}
.ms-veu.hidden{display:none}
.ms-cartao{position:relative;width:min(720px,100%);height:min(700px,92vh);height:min(700px,92dvh);display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #6b4fa0;border-radius:16px;background:linear-gradient(180deg,#22183a,#150f24);color:var(--ms-txt);
  box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(226,184,92,.12);font-family:Arial,sans-serif}
.ms-cab{flex:none;display:flex;gap:10px;align-items:center;padding:10px 12px 8px;background:linear-gradient(180deg,#3a275c,#22183a);border-bottom:1px solid #6b4fa0}
.ms-cab .ms-rosto{width:52px;height:52px;flex:none;background:no-repeat 50% 0/cover;border-radius:50%;border:2px solid var(--ms-ouro);background-color:#120c1a;box-shadow:0 0 12px rgba(168,116,255,.55)}
.ms-cab .ms-tit{flex:1;min-width:0}
.ms-cab .ms-tit h2{margin:0;font:700 19px/1.2 Cinzel,Georgia,serif;color:var(--ms-ouro2);letter-spacing:.02em}
.ms-cab .ms-relogio{display:block;color:var(--ms-txt2);font-size:12.5px;font-variant-numeric:tabular-nums;margin-top:2px}
.ms-cab .ms-onde{display:inline-block;margin-top:3px;padding:2px 8px;border:1px solid var(--ms-linha);border-radius:999px;background:transparent;color:var(--ms-txt2);font-size:11.5px;cursor:var(--cur-mao,pointer)}
.ms-cab .ms-onde:hover,.ms-cab .ms-onde:focus-visible{color:var(--ms-ouro2);border-color:var(--ms-ouro)}
.ms-cab .ms-fechar{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid #6b4fa0;background:#2a1c40;color:var(--ms-txt);font-size:15px;cursor:var(--cur-mao,pointer)}
.ms-abas{flex:none;display:flex;gap:4px;padding:8px 10px 0}
.ms-abas button{flex:1;min-height:38px;border:1px solid var(--ms-linha);border-bottom:0;border-radius:10px 10px 0 0;background:#1c1530;color:var(--ms-txt2);
  font:700 13.5px/1 Cinzel,Georgia,serif;cursor:var(--cur-mao,pointer);display:flex;align-items:center;justify-content:center;gap:6px}
.ms-abas button[aria-selected="true"]{background:linear-gradient(180deg,#4a3375,#2c2048);color:var(--ms-ouro2);border-color:var(--ms-ouro)}
.ms-aba-n{min-width:18px;height:18px;border-radius:9px;background:var(--ms-ouro);color:#1a1208;font:700 11px/18px Arial,sans-serif;padding:0 4px}
.ms-corpo{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px;border-top:2px solid var(--ms-ouro);display:flex;flex-direction:column;gap:8px}
.ms-aviso{margin:0;padding:7px 10px;border-radius:8px;background:rgba(127,212,154,.12);border:1px solid rgba(127,212,154,.45);color:#cdf0d8;font-size:13px}
.ms-aviso.ruim{background:rgba(239,122,122,.12);border-color:rgba(239,122,122,.5);color:#f5c0c0}
.ms-nota,.ms-vazio{margin:0;font-size:12px;color:var(--ms-txt2);text-align:center}
.ms-link{all:unset;cursor:var(--cur-mao,pointer);color:var(--ms-ouro2);text-decoration:underline;text-underline-offset:2px;font-size:12px}
.ms-link:focus-visible{outline:2px solid var(--ms-ouro);outline-offset:2px;border-radius:3px}
.ms-painel-tit{font-size:15px;color:var(--ms-ouro2)}
.ms-regras{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;line-height:1.4;color:var(--ms-txt)}
.ms-venc{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ms-venc li{display:flex;gap:8px;align-items:center}
.ms-venc img{width:34px;height:34px;object-fit:contain;flex:none}
.ms-venc span{display:flex;flex-direction:column;min-width:0}
.ms-venc b{font-size:13px;overflow-wrap:anywhere}.ms-venc small{font-size:12px;color:var(--ms-txt2)}
.ms-vazio{margin:auto 0;font-size:14px}
/* Leilão */
.ms-lotes{display:flex;flex-direction:column;gap:7px}
.ms-lote{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:4px 10px;align-items:center;border-radius:12px;padding:6px 10px;
  background:linear-gradient(180deg,#30234d,#1c1530);border:1px solid var(--ms-linha)}
.ms-lote>img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 8px #000b)}
.ms-lote.lend{border-color:var(--ms-lend);box-shadow:inset 0 0 18px #ff9f4326}
.ms-lote.anc{border-color:var(--ms-anc);box-shadow:inset 0 0 18px #5fd0ff33}
.ms-lote.anc>img{animation:ms-brilho 2.4s ease-in-out infinite}
/* 2020: a Asa do leilão ganha um círculo próprio (a arte fica inteira dentro dele) */
.ms-lote.asa{border-color:var(--ms-asa);box-shadow:inset 0 0 18px #c99bff2e}
.ms-lote.asa>img{box-sizing:border-box;padding:2px;border-radius:50%;filter:none;
  background:radial-gradient(circle at 50% 45%,#8a64cf 0,#4a2f86 55%,#22143f 100%);
  box-shadow:0 0 0 2px var(--ms-asa),0 0 10px 1px #c99bff99;animation:ms-asa-anel 2.8s ease-in-out infinite}
@keyframes ms-asa-anel{50%{box-shadow:0 0 0 2px #e6d2ff,0 0 16px 3px #c99bffcc}}
.ms-lote.asa .ms-lote-txt b{color:var(--ms-asa)}
.ms-lote.meu{outline:1px solid var(--ms-bom);outline-offset:-3px}
.ms-lote.fechado{opacity:.65}
.ms-lote-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.ms-lote-txt b{font-size:13.5px;line-height:1.2;overflow-wrap:anywhere}
.ms-lote.lend .ms-lote-txt b{color:var(--ms-lend)}.ms-lote.anc .ms-lote-txt b{color:var(--ms-anc)}
.ms-lote-txt small{font-size:12px;color:var(--ms-txt2);line-height:1.25}
.ms-lote-txt .bom{color:var(--ms-bom);font-weight:700}.ms-lote-txt .ruim{color:var(--ms-ruim);font-weight:700}
.ms-lote-v{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.ms-lote-v small{font-size:10.5px;color:var(--ms-txt2);white-space:nowrap}
.ms-lote-v span{display:flex;align-items:center;gap:3px;font-weight:800;color:var(--ms-ouro2);font-size:15px;font-variant-numeric:tabular-nums}
.ms-lote-v img{width:17px;height:17px}
.ms-lote .ms-btn{min-width:96px}
.ms-fim{font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-fim.perto{color:var(--ms-ouro2);font-weight:700}
/* 27/10 (autor, A+C): a raridade de cada lote (borda, título, etiqueta no canto e brilho no ícone), o detalhe ao tocar
   (o que vem dentro e o valor de mercado), quem está ganhando como no chat e o relógio vermelho nos 5 minutos finais.
   Ancient, Lendária e Asa continuam com as cores próprias (regras acima). */
.ms-lote{position:relative;cursor:var(--cur-mao,pointer);--ms-rar:var(--ms-linha)}
.ms-lote.r-raro{--ms-rar:#5fa8ff}.ms-lote.r-epico{--ms-rar:var(--ms-asa)}.ms-lote.r-lend{--ms-rar:var(--ms-lend)}.ms-lote.r-anc{--ms-rar:var(--ms-anc)}.ms-lote.r-comum{--ms-rar:#b9b0c9}
.ms-lote.r-raro,.ms-lote.r-epico{border-color:color-mix(in srgb,var(--ms-rar) 70%,transparent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--ms-rar) 20%,transparent)}
.ms-lote.r-raro .ms-lote-txt b,.ms-lote.r-epico .ms-lote-txt b{color:var(--ms-rar)}
.ms-lote.r-epico>img,.ms-lote.r-lend>img{animation:ms-rar-brilho 2.4s ease-in-out infinite}
.ms-lote.asa>img{animation:ms-asa-anel 2.8s ease-in-out infinite}
@keyframes ms-rar-brilho{50%{filter:drop-shadow(0 0 9px var(--ms-rar)) drop-shadow(0 3px 8px #000b)}}
.ms-rar{position:absolute;left:8px;top:-5px;padding:2px 5px;border-radius:4px;background:var(--ms-rar);color:#14101e;font:800 8.5px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.ms-lote.r-comum .ms-rar{background:#3a3150;color:var(--ms-txt2)}
.ms-lote.aberto{border-color:var(--ms-rar);box-shadow:0 0 0 1px var(--ms-rar),inset 0 0 22px color-mix(in srgb,var(--ms-rar) 26%,transparent)}
/* 30/10 (SQL 2436, opção A do autor): o lote MÍTICO das Asas Raras do Leilão. Borda de prisma girando (nenhum outro lote
   tem), selo e nome no arco-íris. Fica acima do "aberto" para não perder a borda ao tocar. */
.ms-lote.r-mitico{--ms-rar:#b07bff;border:2px solid transparent;background:linear-gradient(180deg,#30234d,#1c1530) padding-box,conic-gradient(from var(--ms-mit-g,0deg),#ff5fa2,#ffb35f,#fff36b,#6bffb0,#5fd0ff,#b07bff,#ff5fa2) border-box;animation:ms-mit-gira 4s linear infinite}
.ms-lote.r-mitico .ms-rar{background:linear-gradient(90deg,#ff5fa2,#ffb35f,#6bffb0,#5fd0ff,#b07bff);color:#14101e}
.ms-lote.r-mitico .ms-lote-txt b{background:linear-gradient(90deg,#ff9fc8,#ffe29f,#9fffd2,#9fe4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ms-lote.r-mitico>img{object-fit:contain;filter:drop-shadow(0 3px 8px #000b)}
.ms-lote.r-mitico.aberto{box-shadow:0 0 14px #b07bff66}
@property --ms-mit-g{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ms-mit-gira{to{--ms-mit-g:360deg}}
@media (prefers-reduced-motion:reduce){.ms-lote.r-mitico{animation:none}}
.ms-lote-mais{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;border-top:1px dashed #ffffff26;padding-top:7px;margin-top:2px;cursor:var(--cur-seta,default)}
.ms-lote-mais p{margin:0;font-size:12.5px;line-height:1.3;color:var(--ms-txt2)}
.ms-chips{display:flex;flex-wrap:wrap;gap:5px}
.ms-chip{display:inline-flex;align-items:center;gap:4px;background:#0007;border:1px solid #ffffff1f;border-radius:999px;padding:2px 8px 2px 3px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.ms-chip img{width:20px;height:20px;object-fit:contain}
.ms-lote-info{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;font-size:12px;color:var(--ms-txt2)}
.ms-lote-info b{color:var(--ms-ouro2);font-variant-numeric:tabular-nums}
.ms-barato{font-style:normal;font-weight:800;font-size:11px;color:#0d2416;background:var(--ms-bom);border-radius:5px;padding:1px 6px;white-space:nowrap}
.ms-nome{display:inline-flex;align-items:center;gap:3px;vertical-align:-2px;max-width:100%}
.ms-nome>span:last-child:not(.ms-nome-txt){flex:none;transform:scale(.85)}
.ms-nome-ficha{all:unset;cursor:var(--cur-mao,pointer);font-weight:800;text-decoration:underline dotted 1px;text-underline-offset:2px}
.ms-nome-ficha:focus-visible{outline:2px solid var(--ms-ouro2);outline-offset:2px;border-radius:3px}
.ms-nome-txt{font-weight:800;overflow-wrap:anywhere}
.ms-lote:not(.fechado) .ms-fim.perto{color:var(--ms-ruim);font-weight:800;animation:ms-pisca 1s steps(2) infinite}
@keyframes ms-pisca{50%{opacity:.45}}
/* 27/10 (autor): a tela final destaca quem levou cada prêmio (taça, borda dourada, nome como no chat); lote sem lance apaga. */
.ms-lote.fechado{cursor:var(--cur-seta,default)}
.ms-lote.fechado.venceu{opacity:1;border-color:color-mix(in srgb,var(--ms-ouro) 75%,transparent);box-shadow:inset 0 0 20px #e2b85c2b}
.ms-lote.fechado.venceu.meu{outline:2px solid var(--ms-bom);outline-offset:-3px;box-shadow:inset 0 0 22px #7fd49a33}
.ms-lote.fechado.vazio{opacity:.5}
.ms-lote.fechado .ms-lote-txt small{font-size:13px}
.ms-ganhador{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;color:var(--ms-txt);font-weight:600}
.ms-ganhador>img{width:20px;height:20px;flex:none;filter:drop-shadow(0 0 5px #e2b85caa)}
.ms-lote.meu .ms-ganhador{color:var(--ms-bom);font-weight:800}
.ms-encerrado{display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px;border-radius:12px;border:1px solid var(--ms-ouro);
  background:radial-gradient(120% 140% at 0 50%,#e2b85c38,transparent 60%),linear-gradient(180deg,#30234d,#1c1530)}
.ms-encerrado img{width:40px;height:40px;flex:none;filter:drop-shadow(0 0 8px #e2b85caa)}
.ms-encerrado span{display:flex;flex-direction:column;line-height:1.25;font-size:12.5px;color:var(--ms-txt2)}
.ms-encerrado b{font:700 16px Cinzel,Georgia,serif;color:var(--ms-ouro2)}
@media (prefers-reduced-motion:reduce){.ms-lote>img,.ms-fim.perto{animation:none!important}}
@keyframes ms-brilho{50%{filter:drop-shadow(0 0 10px #5fd0ff) drop-shadow(0 3px 8px #000b)}}
/* Balcão e Tesouro */
.ms-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ms-cart{position:relative;border-radius:12px;padding:10px 6px 8px;background:linear-gradient(180deg,#2e2248,#1c1530);border:1px solid var(--ms-linha);
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0;color:var(--ms-txt);cursor:var(--cur-mao,pointer);font:inherit}
.ms-cart:hover:not(:disabled){border-color:var(--ms-ouro);box-shadow:0 0 14px rgba(226,184,92,.25)}
.ms-cart:disabled{cursor:var(--cur-seta,default)}
.ms-cart.zero,.ms-cart.feito{opacity:.55}
.ms-cart.ess{border-color:#a874ff;background:radial-gradient(circle at 50% 0%,#3b2563,#1c1530 75%)}
.ms-it{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 8px #000b)}
.ms-cart-nome{font-size:12.5px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.ms-cart-preco{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;align-items:center}
.ms-cart-preco s{color:#9d93ad;font-size:11.5px}
.ms-cart-est{font-size:11px;color:var(--ms-ouro)}
.ms-cart.zero .ms-cart-est{color:var(--ms-ruim)}
.ms-fita{position:absolute;top:6px;left:-4px;background:var(--ms-bom);color:#0d2214;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:0 6px 6px 0}
.ms-chip{display:inline-flex;align-items:center;gap:3px;background:#0e0a14;border:1px solid #3e2f57;border-radius:99px;padding:1px 7px 1px 3px;font-size:12.5px;font-weight:700;color:var(--ms-ouro2);font-variant-numeric:tabular-nums}
.ms-chip img{width:16px;height:16px;object-fit:contain}
.ms-btn{min-height:38px;border-radius:9px;padding:7px 10px;font-weight:700;font-size:13px;cursor:var(--cur-mao,pointer);color:#fff;
  background:linear-gradient(180deg,#7d4fd6,#5a32a8);border:1px solid #9c74ee}
.ms-btn.dourado{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);border-color:var(--botao-ouro-borda)}
.ms-btn.sec{background:transparent;color:var(--ms-txt2);border-color:var(--ms-linha)}
.ms-btn:disabled{opacity:.55;cursor:var(--cur-seta,default)}
/* Confirmação e lance (cobrem o corpo) */
/* 24/10: balão "para que serve" do item (mouse no PC, toque no lote no celular). Não pega clique. */
.ms-dica{position:absolute;z-index:3;left:0;top:0;width:max-content;max-width:min(270px,calc(100% - 12px));padding:6px 10px;border-radius:9px;
  background:rgba(14,10,24,.97);border:1px solid var(--ms-ouro);color:var(--ms-txt);font-size:12.5px;line-height:1.3;text-align:center;
  pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.55);overflow-wrap:anywhere}
.ms-dica[hidden]{display:none}
.ms-sobre{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:10px;background:rgba(12,8,20,.86)}
.ms-painel{width:min(420px,100%);max-height:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--ms-ouro);border-radius:12px;background:linear-gradient(180deg,#2e2248,#1a1329)}
.ms-painel-topo{display:flex;gap:10px;align-items:center}
.ms-painel-topo img{width:52px;height:52px;object-fit:contain;flex:none}
.ms-painel-topo b{display:block;font-size:15px;color:var(--ms-ouro2)}
.ms-painel-topo small{display:block;font-size:12.5px;color:var(--ms-txt2);margin-top:2px}
.ms-painel-rot{font-size:12.5px;color:var(--ms-txt2)}
.ms-painel-valor{display:flex;gap:8px;align-items:center}
.ms-mais{width:44px;height:44px;flex:none;border-radius:10px;border:1px solid var(--ms-linha);background:#1c1530;color:var(--ms-txt);font-size:22px;cursor:var(--cur-mao,pointer)}
.ms-campo{flex:1;min-width:0;display:flex;align-items:center;gap:6px;border:1px solid var(--ms-ouro);border-radius:10px;background:#0e0a14;padding:0 10px;min-height:44px}
.ms-campo img{width:22px;height:22px}
.ms-campo input{flex:1;min-width:0;width:100%;background:none;border:0;color:var(--ms-ouro2);font:800 20px Arial,sans-serif;font-variant-numeric:tabular-nums;outline:none}
.ms-painel-linha{margin:0;font-size:12.5px;color:var(--ms-txt)}
.ms-painel-exp{margin:0;font-size:12.5px;line-height:1.4;color:var(--ms-txt2)}
.ms-painel-falta{margin:0;min-height:1em;font-size:12.5px;color:var(--ms-ruim)}
.ms-linha{display:flex;gap:8px}.ms-linha .ms-btn{flex:1}
/* Rodapé com os saldos */
.ms-rod{flex:none;display:flex;justify-content:space-around;gap:4px;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));background:#0f0b19;border-top:1px solid #4b3a6e;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ms-rod span{display:flex;align-items:center;gap:4px}
.ms-rod img{width:18px;height:18px;object-fit:contain}
@media (max-width:640px){
  .ms-veu{padding:6px;align-items:flex-end}
  .ms-cartao{height:min(680px,94vh);height:min(680px,94dvh)}
  .ms-lotes{gap:5px}   /* 1764: até 6 lotes (Coração do Caos) sem rolar */
  .ms-cab .ms-rosto{width:44px;height:44px}.ms-cab .ms-tit h2{font-size:17px}
  .ms-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .ms-cart{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:7px 5px 6px;gap:2px 6px}
  .ms-it{width:36px;height:36px}
  .ms-cart-nome{flex:1 1 60%;text-align:left}
  .ms-cart-preco,.ms-cart-est{flex-basis:100%}
  .ms-lote{grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:auto auto;padding:5px 8px;gap:2px 8px}
  .ms-lote>img{width:36px;height:36px;grid-row:span 2}
  .ms-lote.asa>img{padding:2px}
  .ms-lote-txt{grid-row:span 2}
  .ms-lote-txt b{font-size:13px}
  .ms-lote-v{flex-direction:row;align-items:center;gap:4px}.ms-lote-v small{display:none}
  .ms-lote .ms-btn{grid-column:3;min-width:0;min-height:32px;padding:4px 10px;font-size:12.5px}
  .ms-fita{left:auto;right:6px;top:-7px;border-radius:6px;font-size:10px;line-height:14px}   /* acima do card: não cobre o nome */
}
@media (orientation:landscape) and (max-height:500px){
  .ms-veu{padding:4px}
  .ms-cartao{height:calc(100vh - 8px);height:calc(100dvh - 8px);width:min(860px,100%)}
  .ms-cab{padding:5px 10px}.ms-cab .ms-rosto{width:34px;height:34px}.ms-cab .ms-tit h2{font-size:15px}.ms-cab .ms-relogio{display:inline;margin-left:8px}
  .ms-cab .ms-tit{display:flex;align-items:baseline;flex-wrap:wrap}
  .ms-abas{padding:4px 8px 0}.ms-abas button{min-height:30px}
  .ms-corpo{padding:6px 8px;gap:5px}
  .ms-lotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .ms-lote{padding:4px 8px;grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:1px 6px}
  .ms-lote>img{width:32px;height:32px;grid-row:span 2}
  .ms-lote.asa>img{padding:1px}
  .ms-lote-txt{grid-row:span 2}.ms-lote-txt b{font-size:12.5px}
  .ms-lote-v{flex-direction:row;align-items:center;gap:4px}.ms-lote-v small{display:none}
  .ms-lote .ms-btn{grid-column:3;min-width:0;min-height:28px;padding:3px 8px;font-size:12px}
  .ms-grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .ms-grade.muitas{grid-template-columns:repeat(4,minmax(0,1fr))}   /* 1777: 7 cartas (Pergaminho de Migração) em 2 linhas */
  .ms-grade.muitas{row-gap:9px}.ms-grade.muitas .ms-fita{left:auto;right:6px;top:-7px;border-radius:6px;font-size:10px;line-height:14px}   /* a fita acima do card: não cobre o nome */
  .ms-cart{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:5px;gap:2px 6px}
  .ms-it{width:30px;height:30px}
  .ms-cart-nome{flex:1 1 55%;text-align:left}
  .ms-cart-preco,.ms-cart-est{flex-basis:100%}
  .ms-rod{padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px))}
  /* deitado o corpo é baixo: a confirmação e o lance cobrem o menu inteiro */
  .ms-corpo{position:static}
  .ms-sobre{border-radius:16px;padding:6px}
  .ms-painel{gap:5px;padding:8px 10px}
  .ms-painel-topo img{width:36px;height:36px}
  .ms-mais,.ms-campo{height:36px;min-height:36px}
  .ms-fita{left:auto;right:-4px;border-radius:6px 0 0 6px}
}
@media (prefers-reduced-motion:reduce){.ms-lote.anc>img,.ms-lote.asa>img,.ms-pilula{animation:none!important}}

/* ------------------------------------------------------------- selo no canto de baixo da arena (sem o mercador à vista) */
.ms-pilula{position:absolute;z-index:7;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;
  padding:2px 10px 2px 2px;border-radius:999px;border:1px solid var(--ms-ouro,#e2b85c);background:rgba(30,16,50,.92);color:#f6dc9a;
  font:700 12px/1 Arial,sans-serif;font-variant-numeric:tabular-nums;cursor:var(--cur-mao,pointer);animation:ms-pulso 2.2s ease-in-out infinite}
.ms-pilula.hidden{display:none}
.ms-pilula img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 0;background:#120c1a}
/* 26/10 (auditoria Android): no celular (em pé ou deitado) o mercador é só este selo de 34 px, no canto de cima à direita
   da arena (abaixo do quadro do Inimigo; quem calcula é encaixarPilula). O 1º toque abre a placa ao lado; o 2º, o menu. */
.ms-pilula-placa{display:none}
@media (max-width:640px),(orientation:landscape) and (max-height:500px){
  .ms-pilula{width:34px;height:34px;padding:1px;gap:0;justify-content:center;box-sizing:border-box;z-index:13}
  .ms-pilula img{width:30px;height:30px}
  .ms-pilula .ms-pilula-t{display:none}
  .ms-pilula.ms-pilula-aberta .ms-pilula-placa{display:flex;position:absolute;right:calc(100% + 6px);top:50%;translate:0 -50%;flex-direction:column;align-items:flex-end;gap:2px;
    padding:4px 8px;border-radius:10px;border:1px solid var(--ms-ouro,#e2b85c);background:rgba(30,16,50,.94);white-space:nowrap;text-align:right;
    font:600 calc(11px * var(--text-scale,1))/1.2 Cinzel,Georgia,serif;box-shadow:0 2px 10px rgba(0,0,0,.5)}
  .ms-pilula-placa b{color:#d9b8ff;font-weight:700}
  .ms-pilula-placa i{font-style:normal;color:#e6b65a;font:calc(10px * var(--text-scale,1))/1.2 Arial,sans-serif}
  .ms-pilula-placa i:empty{display:none}
  .ms-pilula-tempo{color:#ece6f3;font:calc(10px * var(--text-scale,1))/1.2 Arial,sans-serif;font-variant-numeric:tabular-nums}
}
@keyframes ms-pulso{0%,100%{box-shadow:0 0 6px rgba(168,116,255,.5)}50%{box-shadow:0 0 16px rgba(226,184,92,.9)}}

/* ------------------------------------------------------------- Essência ativa (selo no topo da arena) */
.ms-essencias{position:absolute;z-index:8;top:6px;left:50%;translate:-50% 0;display:flex;gap:6px;pointer-events:none}
.ms-essencias.hidden,body:not(.swarm-pve-active) .ms-essencias{display:none}
.ms-ess{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border-radius:999px;background:rgba(30,16,50,.88);border:1px solid #a874ff;
  color:#ece6f3;font:11px Arial,sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 0 10px rgba(168,116,255,.45)}
.ms-ess img{width:18px;height:18px;object-fit:contain}
@media (max-width:640px){.ms-essencias{top:auto;bottom:calc(100% + 2px)}}

/* 24/10 (autor, opção A): a Essência diz o que faz no cartão — fita "x2 PARA TODOS", frase curta e um brilho leve */
.ms-cart-ess{font-size:11px;line-height:1.25;color:#e6d6ff;font-weight:700}
.ms-fita-ess{left:auto;right:-4px;background:linear-gradient(90deg,#b98bff,#ffd36a);color:#1d0f33;border-radius:6px 0 0 6px}
@media (max-width:640px),(orientation:landscape) and (max-height:500px){.ms-cart-ess{flex-basis:100%}}
.ms-cart.ess{animation:ms-ess-brilho 2.4s ease-in-out infinite}
@keyframes ms-ess-brilho{50%{box-shadow:0 0 14px rgba(168,116,255,.55)}}
@media (prefers-reduced-motion:reduce){.ms-cart.ess{animation:none}}
@media (max-width:640px),(orientation:landscape) and (max-height:500px){.ms-encerrado{padding:4px 10px;gap:8px}.ms-encerrado img{width:26px;height:26px}.ms-encerrado b{font-size:14px}}

/* 2458 (31/10): Meta da Comunidade — a Essência liga quando a galera junta a JoD. Barra no cartão e no painel de doar. */
.ms-meta-barra{position:relative;display:block;width:100%;height:20px;border-radius:99px;background:#0e0a14;border:1px solid #6b4fa0;overflow:hidden}
.ms-meta-barra i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#8a5cf0,#ffd36a);transition:width .4s}
.ms-meta-barra b{position:relative;display:flex;align-items:center;justify-content:center;gap:3px;height:100%;font-size:11.5px;font-weight:800;color:#fff;
  text-shadow:0 1px 2px #000,0 0 4px #000;font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-meta-barra img{width:14px;height:14px;object-fit:contain}
.ms-cart.meta.batida,.ms-cart.meta.batida:disabled{opacity:1;color:var(--ms-txt);border-color:#ffd36a;box-shadow:0 0 14px rgba(255,211,106,.35)}
.ms-painel.ms-painel-meta{width:min(620px,100%)}
.ms-meta-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.ms-meta-cols>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.ms-meta-top{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.ms-meta-top li{display:flex;justify-content:space-between;gap:6px;font-size:12.5px;padding:2px 6px;border-radius:6px;background:#0e0a1488}
.ms-meta-top li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ms-meta-top li b{color:var(--ms-ouro2);flex:none;font-variant-numeric:tabular-nums}
.ms-meta-top li.eu{outline:1px solid var(--ms-ouro)}
@media (max-width:640px){.ms-meta-cols{grid-template-columns:minmax(0,1fr);gap:6px}.ms-meta-cols>div:first-child{order:2}}
@media (orientation:landscape) and (max-height:500px){.ms-meta-barra{height:16px}.ms-meta-top li{font-size:11.5px;padding:1px 6px}}

/* 2522 (01/11, ideia do autor; tela opção A): META DA GUILDA — a aba "Guildas" com a lista das guildas */
.ms-mg-eu,.ms-mg-info{margin:0;font-size:12.5px;color:var(--ms-txt2);text-align:center}
.ms-mg-info{color:#cdf0d8}
.ms-mg-abrir{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;font-size:12.5px;color:var(--ms-txt2)}
.ms-mg-abrir .ms-btn{display:inline-flex;align-items:center;gap:4px}
.ms-mg-abrir .ms-btn img{width:20px;height:20px;object-fit:contain}
.ms-mg-lista{display:grid;gap:5px}
.ms-mg-linha{display:grid;grid-template-columns:36px minmax(70px,1fr) auto minmax(120px,1.5fr) 74px;align-items:center;gap:8px;padding:5px 8px;
  border:1px solid var(--ms-linha);border-radius:9px;background:#170f24;min-width:0}
.ms-mg-linha.minha{border-color:var(--ms-ouro);background:linear-gradient(90deg,rgba(74,51,117,.55),#170f24);box-shadow:0 0 10px rgba(255,211,106,.18)}
.ms-mg-linha.batida{opacity:.85}
.ms-mg-brasao{display:flex;align-items:center;justify-content:center;width:36px;min-height:34px}
.ms-mg-brasao svg{max-width:36px;height:auto}
.ms-mg-nome{display:flex;flex-direction:column;min-width:0}
.ms-mg-nome b{color:var(--ms-ouro2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-mg-nome small,.ms-mg-barra small{font-size:11px;color:var(--ms-txt2)}
.ms-mg-tipo{display:flex;align-items:center;gap:4px;font-size:12.5px;white-space:nowrap}
.ms-mg-tipo img{width:24px;height:24px;object-fit:contain}
.ms-mg-barra{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:center}
.ms-mg-doar{min-height:32px;padding:5px 8px}
@media (max-width:640px){
  .ms-mg-linha{grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"b n t" "x x d";row-gap:4px;padding:5px 6px}
  .ms-mg-brasao{grid-area:b;width:32px}.ms-mg-nome{grid-area:n}.ms-mg-tipo{grid-area:t}.ms-mg-barra{grid-area:x}.ms-mg-doar,.ms-mg-doar-vazio{grid-area:d}
  .ms-mg-linha{grid-template-columns:32px minmax(0,1fr) auto}
  .ms-mg-linha .ms-mg-barra{grid-column:1 / 3}
}
@media (orientation:landscape) and (max-height:500px){.ms-mg-linha{padding:3px 6px;gap:6px}.ms-mg-brasao svg{max-width:28px}}
/* 2117 (06/11, opção A do autor): as guildas SEM meta, em pastilhas apagadas abaixo da lista */
.ms-mg-sub{margin:4px 0 0;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ms-txt2);text-align:center}
.ms-mg-sem{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px}
.ms-mg-sem-item{display:flex;align-items:center;gap:6px;min-width:0;padding:3px 7px;border:1px dashed var(--ms-linha);border-radius:8px;background:rgba(23,15,36,.6);opacity:.78}
.ms-mg-sem-item.minha{opacity:1;border-style:solid;border-color:var(--ms-ouro)}
.ms-mg-sem-item .ms-mg-brasao{width:26px;min-height:24px;flex:0 0 26px}
.ms-mg-sem-item .ms-mg-brasao svg{max-width:24px}
.ms-mg-sem-item .ms-mg-nome b{font-size:12px}
@media (max-width:640px){.ms-mg-sem{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 2522: com a 4ª aba (Guildas) as abas dividem a largura sem vazar no celular */
.ms-abas button{min-width:0;padding:0 4px;white-space:nowrap}
@media (max-width:640px){.ms-abas{gap:3px}.ms-abas button{font-size:12px;gap:3px;letter-spacing:0}.ms-abas .ms-aba-n{min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 3px}}
@media (max-width:370px){.ms-abas button{font-size:11px}}