/* Horda em 7 dias: LOJA NOVA e CASAS À MOSTRA (teste de 2026-11-06).
   Loja: os itens separados (Armas · Roupas e escudos; de perto · de longe; leves · pesadas), cada um em cartão com a Força ou a Defesa,
   o dano, a rapidez, o alcance, o especial e o que ganha sobre o que a pessoa já tem. Pacotes de ouro em cartões.
   Casas: as próximas aparecem coloridas (antes eram silhueta preta); tocar numa troca a casa grande por ela.
   Tudo proporcional: cabe de 320 px de largura para cima, sem nada sair do quadro. */

/* ---------- cabeçalho da loja ---------- */
.j-cartao.lj { max-width: 480px; }   /* o padding fica o de sempre (18): a barra do Voltar conta com ele */
.lj-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lj-saldo { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding-top: 2px; }
.lj-saldo span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--borda); font-size: clamp(13px, 3.8vw, 15px); }
.lj-meu { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06); font-size: clamp(11.5px, 3.4vw, 13px); color: var(--apagado); }
.lj-meu b { color: var(--texto); }
.lj-moeda button { font-size: clamp(12px, 3.6vw, 14px); padding: 9px 4px; }
.lj-moeda button span::before { width: 0.8em; height: 0.8em; }
.lj-ajuda { display: block; margin: -2px 0 6px; line-height: 1.4; }
.j-cartao.lj .j-ouro-chamada { margin-top: 2px; }
.j-cartao.lj .j-ouro-chamada b { display: block; }

/* ---------- Armas · Roupas e escudos ---------- */
.lj-tipos { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 2px; border-bottom: 2px solid rgba(255, 255, 255, 0.1); }
.lj-tipos button { margin-bottom: -2px; padding: 10px 4px 9px; border: 0; border-bottom: 3px solid transparent; border-radius: 12px 12px 0 0; background: transparent;
  color: var(--apagado); font: 900 clamp(12.5px, 3.8vw, 15px) var(--fonte); box-shadow: none; translate: none; }
.lj-tipos button.on { color: var(--texto); border-bottom-color: var(--luz); background: linear-gradient(rgba(255, 211, 107, 0), rgba(255, 211, 107, 0.12)); }
.lj-tipos small { display: block; margin-top: 1px; font-size: 0.78em; font-weight: 800; color: var(--apagado); }
.lj-grupo { margin: 16px 0 8px; }

/* ---------- o cartão de cada item ---------- */
.lj-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lj-item { --t: 154, 163, 184; padding: clamp(9px, 2.6vw, 12px); border-radius: 16px; border: 1px solid rgba(var(--t), 0.28);
  background: linear-gradient(180deg, rgba(var(--t), 0.1), rgba(255, 255, 255, 0.015) 70%); }
.lj-item.t2 { --t: 90, 170, 255; }
.lj-item.t3 { --t: 200, 110, 255; }
.lj-item.t-ouro { --t: 255, 178, 30; }
.lj-item.tem { border-color: rgba(139, 211, 74, 0.5); }
.lj-item.trancado { filter: saturate(0.7); }
.lj-item.trancado .lj-ic img { opacity: 0.75; }
.lj-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(8px, 2.6vw, 12px); align-items: center; }
.lj-ic { width: clamp(52px, 15vw, 64px); height: clamp(46px, 13vw, 56px); border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, rgba(var(--t), 0.35), rgba(var(--t), 0.06) 72%); border: 1px solid rgba(var(--t), 0.4); }
.lj-ic img { max-width: 88%; max-height: 86%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.lj-ic[data-emoji]:empty::before { content: attr(data-emoji); font-size: clamp(22px, 6.6vw, 28px); line-height: 1; }
.lj-nome { min-width: 0; }
.lj-nome b { display: block; font-size: clamp(14px, 4.2vw, 16px); font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.lj-nome small { display: block; margin-top: 2px; font-size: clamp(11px, 3.3vw, 12.5px); font-weight: 700; color: var(--apagado); }
.lj-nome .lj-pede { color: #ffb3b4; }
.lj-so-ouro { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: #ffb84d; color: #2a1600; font: 900 clamp(10px, 3vw, 11px) var(--fonte); font-style: normal; }
.lj-preco { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.lj-preco button { min-width: clamp(66px, 19vw, 82px); padding: 9px 10px; border-radius: 12px; border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.07);
  font: 900 clamp(13px, 3.8vw, 15px) var(--fonte); white-space: nowrap; }
.lj-preco button.compra { background: var(--luz); border-color: var(--luz); color: #1a1405; }
.lj-preco button.compra .moedas { color: #1a1405; }
.lj-preco button.compra-ouro { background: linear-gradient(#ffd27a, #ff9f1c); border-color: #ffb84d; color: #2a1600; }
.lj-preco button.compra-ouro .ouro { color: #2a1600; }
.lj-preco button:disabled { opacity: 0.6; cursor: default; }
.lj-preco button.trancado { display: flex; flex-direction: column; align-items: center; line-height: 1.15; font-size: clamp(12px, 3.5vw, 13.5px); }
.lj-preco button.trancado small { margin-top: 2px; font-size: 11px; }
.lj-preco button.lj-tem { opacity: 1; color: #8bd34a; border-color: rgba(139, 211, 74, 0.5); background: rgba(139, 211, 74, 0.1); }
.lj-falta { font-size: 11px; font-weight: 700; color: var(--apagado); white-space: nowrap; }

/* Força (barra que esquenta do amarelo ao vermelho) e Defesa (5 escudinhos) */
.lj-medidor { display: grid; grid-template-columns: clamp(50px, 15vw, 60px) 1fr; align-items: center; gap: 8px; margin: 10px 0 7px;
  font-size: clamp(10.5px, 3.1vw, 11.5px); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--apagado); }
.lj-medidor i { position: relative; height: 9px; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, #ffe08a, #ff9a3d 55%, #e5383b); }
.lj-medidor i b { position: absolute; top: 0; right: 0; bottom: 0; background: #1b2236; }
.lj-medidor em { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font-style: normal; }
.lj-medidor em span { height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); }
.lj-medidor em span.on { background: linear-gradient(#a8dcff, #4ea8ff); box-shadow: 0 0 6px rgba(78, 168, 255, 0.5); }
.lj-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lj-ch { padding: 3px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: clamp(11px, 3.3vw, 12.5px); font-weight: 700; line-height: 1.35; color: #d8dcea; }
.lj-ch b { color: #fff; }
.lj-ch.forte { background: rgba(255, 211, 107, 0.12); border-color: rgba(255, 211, 107, 0.38); color: #ffe3a1; }
.lj-ch.ruim { background: rgba(229, 56, 59, 0.1); border-color: rgba(229, 56, 59, 0.35); color: #ffb3b4; }
.lj-ch.bom { background: rgba(139, 211, 74, 0.1); border-color: rgba(139, 211, 74, 0.35); color: #c5ee9f; }
.lj-ganha { margin: 8px 0 0; font-size: clamp(11.5px, 3.4vw, 13px); font-weight: 900; color: #8bd34a; }
.lj-nota { margin: 14px 0 0; font-size: clamp(11px, 3.3vw, 12.5px); line-height: 1.45; color: var(--apagado); }

/* ---------- pacotes de ouro ---------- */
.lj-pacotes { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
.lj-pacotes li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 6px 8px; border-radius: 14px; text-align: center;
  border: 1px solid rgba(255, 184, 77, 0.35); background: radial-gradient(ellipse at 50% 28%, rgba(255, 178, 30, 0.2), rgba(255, 255, 255, 0.03) 72%); }
.lj-pacotes li.melhor { border-color: #ffb84d; box-shadow: 0 0 0 1px #ffb84d, 0 0 18px rgba(255, 178, 30, 0.25); }
.lj-pacotes em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); max-width: 96%; padding: 2px 8px; border-radius: 999px;
  background: #ffb84d; color: #2a1600; font: 900 clamp(9px, 2.7vw, 10.5px) var(--fonte); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-pacotes b { display: flex; align-items: center; justify-content: center; min-height: 2.4em; font-size: clamp(11.5px, 3.4vw, 13px); font-weight: 900; line-height: 1.2; }
.lj-pacotes .ouro { font-size: clamp(16px, 4.8vw, 19px); }
.lj-pacotes small { font-size: clamp(10.5px, 3.1vw, 11.5px); font-weight: 800; color: #8bd34a; }
.lj-pacotes button { width: 100%; margin-top: 4px; padding: 8px 2px; border-radius: 10px; border: 1px solid var(--luz); background: var(--luz); color: #1a1405;
  font: 900 clamp(12px, 3.6vw, 14px) var(--fonte); white-space: nowrap; }
.lj-pilha { position: relative; width: 64px; height: 40px; }
.lj-pilha i { position: absolute; bottom: 3px; width: 32px; height: 18px; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  background: linear-gradient(#fff1b8, #ffb21e 55%, #b86e00); }
.lj-pilha.p1 i { left: 16px; }
.lj-pilha.p2 i:nth-child(1) { left: 2px; } .lj-pilha.p2 i:nth-child(2) { left: 30px; }
.lj-pilha.p3 i:nth-child(1) { left: 2px; } .lj-pilha.p3 i:nth-child(2) { left: 30px; } .lj-pilha.p3 i:nth-child(3) { left: 16px; bottom: 20px; }

/* ---------- casas: as próximas coloridas, com cadeado; tocar numa troca a casa grande ---------- */
.r-caminho .falta { position: relative; background: rgba(255, 255, 255, 0.03); }
.r-caminho .falta img { filter: saturate(0.85) brightness(0.8); }
.r-caminho .falta::after { content: "🔒"; position: absolute; top: 2px; right: 2px; font-size: 9px; line-height: 1; }
.r-caminho span[data-casa-nv] { cursor: pointer; }
.r-caminho .vendo { border-color: #fff; background: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 1px #fff; }
.r-caminho .vendo img { filter: none; }
/* a casa grande cabe inteira no quadro, até as largas (Alto padrão, Mansão), com o boneco do lado */
#r-cartao .r-vitrine img:not(.dono) { max-width: 76%; object-fit: contain; object-position: 50% 100%; }

/* ---------- com um quadro aberto por cima do mapa das hordas (login, loja, ranking, missões…), a coluna do lado (Profissão) some;
   ela só aparece no mapa das hordas, sem quadro aberto (pedido do usuário, 2026-11-06) ---------- */
#jogo:has(#j-painel:not(:empty)) #j-mapa-lado { visibility: hidden; }