/* ============================================================================
   ENDGAME ZODIACAL + CHAT — ESTILO
   ----------------------------------------------------------------------------
   Duas telas novas, uma folha. Regras de UX que valem para as duas:
     - nada maior que a viewport (o painel do Editor ja ensinou essa licao);
     - toda area rolavel tem overscroll-behavior:contain, para o scroll do chat
       nao arrastar a pagina atras dele;
     - tamanhos respondem a --text-scale, porque o jogo tem opcao de ate 130%.
   ============================================================================ */

/* ---------------------------------------------------------------- LOJAS */
.zodiac-shop{display:flex;flex-direction:column;gap:14px}
.zodiac-balance{display:flex;flex-direction:column;gap:7px;padding:12px 14px;border:1px solid rgba(199,154,99,.35);
  border-radius:6px;background:linear-gradient(180deg,rgba(48,38,24,.42),rgba(18,16,20,.5))}
.zodiac-balance>div:first-child{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.zodiac-balance span{color:#e7c07a;font-size:calc(9px*var(--text-scale,1));font-weight:900;letter-spacing:1.4px}
.zodiac-balance strong{color:#fff3cd;font-size:calc(21px*var(--text-scale,1));font-family:Georgia,serif}
.zodiac-balance small{color:#a99c88;font-size:calc(9px*var(--text-scale,1))}
.zodiac-bar{height:7px;border-radius:4px;background:rgba(0,0,0,.5);overflow:hidden}
.zodiac-bar i{display:block;height:100%;background:linear-gradient(90deg,#c9913f,#f0d089);transition:width .3s ease}

.zodiac-counters{display:flex;gap:16px;flex-wrap:wrap;color:#c3b8a6;font-size:calc(10px*var(--text-scale,1))}
.zodiac-counters b{color:#f0e2cc}
.zodiac-h{margin:6px 0 2px;color:#e7c07a;font-size:calc(10px*var(--text-scale,1));letter-spacing:2px}
.zodiac-subh{margin:10px 0 0;color:#bda98a;font-size:calc(9.5px*var(--text-scale,1));letter-spacing:1.2px}
/* A nota da secao de ASAS: elas nao sao equipamento, e o jogador precisa saber
   disso ANTES de gastar 40.000 -- senao ele espera um item e recebe uma skin. */
.zodiac-nota{margin:4px 0 8px;color:#9c8f7d;font-size:calc(9px*var(--text-scale,1));line-height:1.5}

.zodiac-sets{display:flex;flex-direction:column;gap:5px}
.zodiac-set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 11px;
  border:1px solid rgba(120,110,100,.28);border-radius:5px;background:rgba(12,11,15,.5)}
.zodiac-set-row.complete{border-color:rgba(216,163,74,.6);background:rgba(48,38,24,.4)}
.zodiac-set-row strong{display:block;color:#f0e6da;font-size:calc(11px*var(--text-scale,1))}
.zodiac-set-row small{display:block;color:#8f857a;font-size:calc(8.5px*var(--text-scale,1));line-height:1.4}
.zodiac-set-progress{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.zodiac-slot{color:#5d554c;font-size:14px}
.zodiac-slot.has{color:#d8a34a}
.zodiac-set-progress b{color:#cfc3ae;font-size:calc(9px*var(--text-scale,1))}
.zodiac-complete{color:#8fd88f;font-size:calc(8.5px*var(--text-scale,1));font-weight:900;letter-spacing:1px}

.zodiac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.zodiac-card{display:flex;flex-direction:column;gap:7px;padding:9px;border:1px solid rgba(120,110,100,.3);
  border-radius:6px;background:rgba(14,13,18,.62)}
.zodiac-card.is-owned{border-color:rgba(143,216,143,.4);background:rgba(20,32,20,.4)}
.zodiac-card-art{position:relative;display:grid;place-items:center;height:72px;border-radius:4px;background:rgba(0,0,0,.32)}
.zodiac-card-art img{max-width:64px;max-height:64px;object-fit:contain}
.zodiac-art-fallback{display:none;font-size:26px;opacity:.5}
.zodiac-card-art.no-art .zodiac-art-fallback{display:block}
.zodiac-card-body{display:flex;flex-direction:column;gap:3px}
.zodiac-card-body strong{color:#f0e6da;font-size:calc(10px*var(--text-scale,1));line-height:1.3}
.zodiac-sign,.zodiac-class{color:#9b917f;font-size:calc(8px*var(--text-scale,1));letter-spacing:.8px}
.zodiac-price{color:#e7c07a;font-size:calc(11px*var(--text-scale,1));font-weight:900}
.zodiac-owned{color:#8fd88f}
.zodiac-ready{color:#cfc3ae}
.zodiac-missing{color:#d99a6a}
.zodiac-locked{color:#8a8078}
.zodiac-card em{font-size:calc(8.5px*var(--text-scale,1));font-style:normal}
.zodiac-buy{min-height:30px;border-radius:4px;border:1px solid var(--botao-ouro-borda);
  background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);font-weight:900;
  font-size:calc(9px*var(--text-scale,1));letter-spacing:1px;cursor:var(--cur-mao,pointer)}
.zodiac-buy:disabled{opacity:.4;background:rgba(40,38,44,.8);border-color:rgba(120,110,100,.3);
  color:#8a8078;cursor:var(--cur-seta,default)}

/* ---------------------------------------------------------------- CHAT */
.col-chat{position:fixed;right:14px;bottom:14px;z-index:1150;display:flex;flex-direction:column;
  align-items:flex-end;gap:6px;max-width:min(340px,calc(100vw - 24px));pointer-events:none}
.col-chat>*{pointer-events:auto}
.col-chat-toggle{min-height:34px;padding:6px 13px;border-radius:5px;border:1px solid rgba(168,146,110,.45);
  background:rgba(12,11,16,.9);color:#e0d6c6;font-weight:900;letter-spacing:1.2px;cursor:var(--cur-mao,pointer);
  font-size:calc(9px*var(--text-scale,1));backdrop-filter:blur(4px)}
.col-chat-body{display:flex;flex-direction:column;width:min(340px,calc(100vw - 24px));
  height:min(380px,50dvh);border:1px solid rgba(168,146,110,.4);border-radius:7px;overflow:hidden;
  background:rgba(9,9,13,.94);backdrop-filter:blur(6px);box-shadow:0 18px 50px rgba(0,0,0,.6)}
.col-chat.is-collapsed .col-chat-body{display:none}
.col-chat-tabs{display:flex;gap:4px;padding:7px;border-bottom:1px solid rgba(255,255,255,.07)}
.col-chat-tabs button{flex:1;min-height:26px;border-radius:4px;border:1px solid rgba(120,110,100,.3);
  background:rgba(20,19,25,.8);color:#a99e92;cursor:var(--cur-mao,pointer);
  font-size:calc(8.5px*var(--text-scale,1));font-weight:900;letter-spacing:1px}
.col-chat-tabs button.active{border-color:#c79a4a;background:rgba(60,45,25,.7);color:#f0e2cc}
.col-chat-min{flex:0 0 30px!important}
/* Canal por região (24/09): a sala do idioma, só na aba REGIÃO. */
.col-chat-region{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.07);
  color:#a99e92;font-size:calc(9px*var(--text-scale,1));font-weight:800;letter-spacing:.5px}
.col-chat-region.hidden{display:none}
.col-chat-region select{flex:1;min-height:24px;border-radius:4px;border:1px solid rgba(120,110,100,.35);
  background:rgba(20,19,25,.9);color:#f0e2cc;font-size:calc(10px*var(--text-scale,1))}
.col-chat-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px;
  display:flex;flex-direction:column;gap:8px}
.col-chat-msg{display:flex;flex-direction:column;gap:3px}
.col-chat-msg-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.col-chat-msg-head b{color:#d8c39c;font-size:calc(9px*var(--text-scale,1))}
.col-chat-msg-head time{color:#6f675e;font-size:calc(8px*var(--text-scale,1))}
.col-chat-text{margin:0;color:#ddd5ca;font-size:calc(10px*var(--text-scale,1));line-height:1.45;word-break:break-word}
.col-chat-empty{margin:auto;color:#7d746a;font-size:calc(9.5px*var(--text-scale,1));text-align:center}
/* Chat online (P7): denunciar, e o aviso de chat desligado (menor sem autorização). */
.col-chat-denunciar{flex:0 0 auto;border:0;background:none;padding:0 2px;color:#6f675e;cursor:var(--cur-mao,pointer);
  font-size:calc(9px*var(--text-scale,1));line-height:1;opacity:.55}
.col-chat-denunciar:hover,.col-chat-denunciar:focus-visible{color:#e07a5f;opacity:1}
.col-chat-msg-head:has(.col-chat-denunciar){justify-content:flex-start}
.col-chat-msg-head:has(.col-chat-denunciar) time{margin-left:auto}
.col-chat-denuncia p{margin:6px 0;color:#a99e92;font-size:calc(10px*var(--text-scale,1))}
.col-chat-aviso{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 6px;line-height:1.45}
.col-chat-aviso p{margin:0}
.col-chat-autorizar{padding:6px 10px;border-radius:4px;border:1px solid rgba(216,163,74,.55);background:rgba(48,38,24,.55);
  color:#f0d089;font-size:calc(9px*var(--text-scale,1));font-weight:900;letter-spacing:.5px;cursor:var(--cur-mao,pointer)}
.col-chat-denuncia-texto{margin:6px 0;padding:6px 8px;border-left:2px solid rgba(216,163,74,.5);color:#ddd5ca;
  font-size:calc(10px*var(--text-scale,1));word-break:break-word}
.col-chat-item-link{align-self:flex-start;padding:4px 9px;border-radius:4px;
  border:1px solid rgba(216,163,74,.55);background:rgba(48,38,24,.55);color:#f0d089;
  font-size:calc(9.5px*var(--text-scale,1));font-weight:900;cursor:var(--cur-mao,pointer);text-align:left}
.col-chat-item-link:hover{background:rgba(64,50,30,.75)}
.col-chat-attach{display:flex;align-items:center;gap:7px;padding:6px 9px;
  border-top:1px solid rgba(255,255,255,.06);color:#f0d089;font-size:calc(9px*var(--text-scale,1))}
.col-chat-attach.hidden{display:none}
.col-chat-attach button{border:0;background:none;color:#c08a6a;cursor:var(--cur-mao,pointer);font-size:12px}
.col-chat-form{display:flex;gap:5px;padding:7px;border-top:1px solid rgba(255,255,255,.07)}
.col-chat-form input{flex:1;min-width:0;padding:7px 9px;border-radius:4px;border:1px solid rgba(120,110,100,.35);
  background:rgba(6,6,9,.8);color:#efe7dc;font-size:calc(10px*var(--text-scale,1))}
.col-chat-form input:focus{outline:none;border-color:#c79a4a}
.col-chat-form button{flex:0 0 32px;border-radius:4px;border:1px solid rgba(168,146,110,.4);
  background:rgba(24,22,28,.9);color:#e0d6c6;cursor:var(--cur-mao,pointer)}

/* Seletor de item e tooltip: modais curtos, sempre dentro da viewport. */
.col-chat-picker{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  padding:16px;background:rgba(3,4,8,.72);backdrop-filter:blur(3px)}
.col-chat-picker-card,.col-chat-tooltip-card{position:relative;width:min(380px,100%);
  max-height:min(70dvh,540px);overflow-y:auto;overscroll-behavior:contain;padding:16px;
  border:1px solid rgba(168,146,110,.45);border-radius:8px;background:#12111a;
  box-shadow:0 24px 70px rgba(0,0,0,.7)}
.col-chat-picker-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:4px;
  border:1px solid rgba(120,110,100,.35);background:rgba(30,28,36,.9);color:#cfc3ae;cursor:var(--cur-mao,pointer)}
.col-chat-picker-card h4,.col-chat-tooltip-card h4{margin:0 26px 10px 0;color:#f0e2cc;
  font-size:calc(13px*var(--text-scale,1))}
.col-chat-picker-list{display:flex;flex-direction:column;gap:4px}
.col-chat-picker-item{padding:8px 10px;border-radius:4px;border:1px solid rgba(120,110,100,.28);
  background:rgba(20,19,25,.8);color:#ded5c8;text-align:left;cursor:var(--cur-mao,pointer);
  font-size:calc(9.5px*var(--text-scale,1))}
.col-chat-picker-item:hover{border-color:#c79a4a;background:rgba(45,36,24,.8)}
.col-chat-tooltip-icon{display:block;width:72px;height:72px;object-fit:contain;margin:0 auto 8px}
.col-chat-badges{margin-bottom:8px;color:#d8a34a;font-size:calc(9px*var(--text-scale,1));
  font-weight:900;letter-spacing:1.2px;text-align:center}
.col-chat-tooltip-rows{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0 0 10px}
.col-chat-tooltip-rows dt{color:#8f857a;font-size:calc(8.5px*var(--text-scale,1))}
.col-chat-tooltip-rows dd{margin:0;color:#ded5c8;font-size:calc(9px*var(--text-scale,1))}
.col-chat-tooltip-card h5{margin:8px 0 4px;color:#bda98a;font-size:calc(9px*var(--text-scale,1));letter-spacing:1px}
.col-chat-tooltip-stats{margin:0;padding-left:16px;color:#9fd8a8;
  font-size:calc(9px*var(--text-scale,1));line-height:1.6}
.col-chat-owner{margin:8px 0 0;color:#8f857a;font-size:calc(8.5px*var(--text-scale,1));font-style:italic}
.col-chat-readonly{margin:10px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.07);
  color:#6f675e;font-size:calc(8px*var(--text-scale,1));line-height:1.4}

/* Mobile: o chat nao pode cobrir a batalha de forma permanente. */
@media(max-width:620px){
  .col-chat{right:8px;bottom:8px;left:8px;max-width:none;align-items:stretch}
  .col-chat-body{width:auto;height:min(300px,44dvh)}
  .col-chat-toggle{align-self:flex-end}
}
/* Link do chat com a ficha padrao (28/09): o X fica acima da ficha e o cartao
   cresce ate quase a tela antes de rolar. */
.col-chat-tooltip-card.col-chat-tooltip-ficha{padding:40px 12px 12px;max-height:min(88dvh,760px);width:min(372px,100%)}

/* LINK DE ITEM NO CHAT MAIOR, COM O ÍCONE (01/10, print do autor: "o item tá
   muito pequeno no chat"). O ícone é a arte da mochila, calculada pelo jogo. */
.col-chat-item-link{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:4px 10px 4px 4px;
  font-size:calc(10.5px*var(--text-scale,1))}
.col-chat-item-link>span{min-width:0;overflow-wrap:anywhere}
.col-chat-item-link-icone{flex:none;width:34px;height:34px;object-fit:contain;border-radius:4px;
  background:rgba(0,0,0,.35);border:1px solid rgba(216,163,74,.25)}
/* O X DA FICHA DO ITEM ALINHADO (01/10): ficava 4 px para fora da ficha e o "✕"
   saía do meio do quadrado (o estilo geral de botão empurrava o texto). Agora a
   borda direita bate com a da ficha (12 px) e o ✕ fica centrado. */
.col-chat-picker-close{display:grid;place-items:center;padding:0!important;line-height:1;font-size:calc(13px*var(--text-scale,1));min-height:0!important}
.col-chat-tooltip-card.col-chat-tooltip-ficha .col-chat-picker-close{top:8px;right:12px}

/* ---------------------------------------------- VITRINE DO SIGNO (10/10)
   Pedido do autor: "ninguém sabe que dá pontos, ninguém sabe porque comprar".
   Escolha do signo, herói vestido, escada do bônus e peças com atributos e a
   comparação com o que o jogador usa. Android é a régua: tudo quebra linha,
   nada rola de lado. */
.zl-loja{gap:12px}
.zl-topo small{display:inline-flex;flex-wrap:wrap;gap:4px;min-width:0}
.zl-signos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.zl-signo{display:grid;justify-items:center;gap:2px;min-width:0;padding:6px 3px;border-radius:7px;cursor:var(--cur-mao,pointer);
  border:1px solid rgba(199,154,99,.28);background:rgba(14,12,10,.65);color:#d9c9a4}
.zl-signo img{width:40px;height:40px;object-fit:contain}
.zl-signo strong{font-size:calc(10px*var(--text-scale,1));color:#f0e2cc;max-width:100%;overflow-wrap:anywhere}
.zl-signo small{font-size:calc(8.5px*var(--text-scale,1));color:#9b917f}
.zl-signo.on{border-color:#f0c35a;box-shadow:0 0 10px rgba(240,195,90,.35);background:rgba(48,38,24,.6)}
.zl-signo.completo small{color:#8fd88f}
.zl-vitrine{display:grid;grid-template-columns:minmax(170px,250px) minmax(0,1fr);gap:12px;padding:12px;border-radius:8px;
  border:1px solid rgba(199,154,99,.35);background:linear-gradient(180deg,rgba(40,31,19,.55),rgba(14,12,10,.6))}
.zl-palco{position:relative;min-height:280px;border-radius:8px;overflow:hidden;background:radial-gradient(circle at 50% 72%,rgba(120,88,34,.55),rgba(10,8,6,.9) 70%)}
.zl-palco .loja-lutador-palco{position:absolute;inset:0}
.zl-info{display:flex;flex-direction:column;gap:7px;min-width:0}
.zl-nome{margin:0;color:#fff3cd;font:700 calc(15px*var(--text-scale,1)) Georgia,serif;letter-spacing:.5px}
.zl-lore{margin:0;color:#a99c88;font-size:calc(9.5px*var(--text-scale,1));line-height:1.45}
.zl-ganha{margin:4px 0 0;color:#e7c07a;font-size:calc(10px*var(--text-scale,1));letter-spacing:1.4px}
.zl-escada{display:flex;flex-direction:column;gap:5px}
.zl-degrau{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:center;padding:6px 8px;border-radius:6px;
  border:1px solid rgba(120,110,100,.28);background:rgba(12,11,15,.5)}
.zl-degrau>b{color:#e7c07a;font-size:calc(9.5px*var(--text-scale,1))}
.zl-degrau>div{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.zl-degrau.ativo{border-color:rgba(143,216,143,.5);background:rgba(20,32,20,.45)}
.zl-degrau>i{position:absolute;right:7px;top:5px;color:#8fd88f;font-style:normal;font-weight:900}
.zl-chip{display:inline-flex;flex-wrap:wrap;gap:3px;align-items:baseline;max-width:100%;padding:2px 8px;border-radius:999px;
  border:1px solid rgba(143,216,143,.4);background:rgba(18,38,26,.6);color:#a8eab4;font-size:calc(9.5px*var(--text-scale,1));line-height:1.35}
.zl-chip b{color:#c9f5d0}
.zl-tudo{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.zl-tudo small{color:#cfc3ae;font-size:calc(9.5px*var(--text-scale,1));font-weight:700;margin-right:2px}
.zl-tudo .zl-chip{border-color:rgba(231,192,122,.55);background:rgba(58,42,18,.6);color:#ffd77a}
.zl-tudo .zl-chip b{color:#fff0c4}
.zl-pecas{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.zl-atrib{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px;color:#a8eab4;font-size:calc(9px*var(--text-scale,1))}
.zl-atrib b{color:#c9f5d0}
.zl-cmp{display:flex;flex-wrap:wrap;gap:2px 7px;margin-top:3px;padding-top:4px;border-top:1px dashed rgba(199,154,99,.25);font-size:calc(8.5px*var(--text-scale,1))}
.zl-cmp small{flex-basis:100%;color:#9b917f;font-size:inherit}
.zl-up{color:#8ff0a4}.zl-dn{color:#ff9a8a}
.zl-poder{flex-basis:100%;font-weight:700}
.zl-asa-bonus{display:flex;flex-wrap:wrap;gap:4px}
.zl-nota{color:#9b917f;font-size:calc(8.5px*var(--text-scale,1));line-height:1.4}
.zodiac-missing b{font-weight:900}
.zl-info .zodiac-nota{margin:0}
.zl-regra{color:#e7c07a!important}
.zl-ganhar{padding:10px 12px;border-radius:7px;border:1px solid rgba(199,154,99,.3);background:rgba(20,16,12,.55)}
.zl-ganhar h5{margin:0 0 3px;color:#e7c07a;font-size:calc(10px*var(--text-scale,1));letter-spacing:1.4px}
.zl-ganhar p{margin:0;color:#c3b8a6;font-size:calc(9.5px*var(--text-scale,1));line-height:1.45}
@media (max-width:640px){
  .zl-vitrine{grid-template-columns:minmax(0,1fr)}
  .zl-palco{min-height:230px}
  .zl-signos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zl-pecas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-height:500px) and (orientation:landscape){
  .zl-signos{grid-template-columns:repeat(6,minmax(0,1fr))}
  .zl-signo img{width:30px;height:30px}
}
/* "USAR ESTA SKIN" (10/10): o set do signo por cima das outras skins; 1 clique tira. */
.zl-skin{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 2px}
.zl-skin small{color:#a99c88;font-size:calc(9px*var(--text-scale,1));line-height:1.4;flex:1 1 140px}
.zl-skin-btn{min-height:34px;padding:0 14px;border-radius:5px;border:1px solid #c79a4a;cursor:var(--cur-mao,pointer);
  background:linear-gradient(180deg,#5b4220,#2e2210);color:#ffe7b0;font-weight:900;
  font-size:calc(9.5px*var(--text-scale,1));letter-spacing:1.2px}
.zl-skin-btn.on,.zodiac-buy.zl-em-uso{border-color:#8fd88f;background:linear-gradient(180deg,#1f3a22,#122214);color:#c9f5c9}
.zl-skin-btn:disabled{opacity:.45;cursor:var(--cur-seta,default);background:rgba(40,38,44,.8);border-color:rgba(120,110,100,.3);color:#a99e92}
@media (max-width:520px){.zl-skin-btn{flex:1 1 100%}}
/* 2712 (06/11): juntar aos poucos */
.zl-parte{display:flex;flex-direction:column;gap:3px}
.zl-parte small{color:#cbb98f;font-size:calc(10px*var(--text-scale,1))}
.zl-parte small b{color:#ffe2a0}
.zodiac-buy.zl-juntar{margin-top:4px;background:#2a2010;border-color:#7a5a24;color:#e7c07a}