/* ============================================================================
   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 #c79a4a;
  background:linear-gradient(180deg,#c9913f,#7d5410);color:#fff3cd;font-weight:900;
  font-size:calc(9px*var(--text-scale,1));letter-spacing:1px;cursor:pointer}
.zodiac-buy:disabled{opacity:.4;background:rgba(40,38,44,.8);border-color:rgba(120,110,100,.3);
  color:#8a8078;cursor: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: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: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}
.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}
.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: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: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: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: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: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}
}