/* Destruitor Idle — CASAS (casas.js): a casinha da barra de baixo, o quadro da porta e as janelas */
/* o botao Casa (entre o Templo e o Chat), como o Templo (templo.css): o icone, o nome e a contagem da espera */
.g .cb.cs-btn { display: inline-flex; align-items: center; gap: 5px; }
.g .cb.cs-btn .cs-ic { width: 15px; height: 15px; flex: none; color: #c9b98f; }
.g .cb.cs-btn.cs-tem .cs-ic { color: var(--gold-2); }
.g .cb.cs-btn em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0; color: #c9cfdd; background: #0008; border-radius: 4px; padding: 0 4px; }
.g .cb.cs-btn.cs-espera { color: #9aa3b8; }
.g .cb.cs-btn.cs-espera .cs-ic { color: #6c7894; }
@media (max-width: 420px) {
  .g .cb.cs-btn { padding: 0 6px; gap: 2px; }
  .g .cb.cs-btn .cs-l { display: none; }
  .g .cb.cs-btn .cs-ic { width: 14px; height: 14px; }
  .g .cb.cs-btn em { font-size: 8.5px; line-height: 13px; }
}
#csPorta .cs-tag { color: #f0c46a; border: 1px solid #5a4a28; border-radius: 4px; padding: 0 5px; }
.cs-cofre h4 b { color: var(--gold-2); }
/* a aba Casa da ficha do Personagem */
.cs-ficha { display: flex; flex-direction: column; gap: 8px; }
.cs-ficha-c { padding: 10px; border-radius: 6px; background: #121624; border: 1px solid #2c3346; display: flex; flex-direction: column; gap: 2px; }
.cs-ficha-c > b { color: var(--gold-2); font-size: 15px; }
.cs-ficha-c small { color: var(--dim); }
.cs-ficha-c p { margin: 2px 0; }
.cs-sit.cs-premium { color: #ffb4aa; }

/* o quadro da porta: em cima da barra de baixo, no meio */
#csPorta .cs-porta {
  position: fixed; z-index: 15; left: 50%; bottom: 86px; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  background: #121624f2; border: 1px solid #5a4a28; border-radius: 8px; box-shadow: 0 8px 24px #000a;
}
#csPorta .cs-pc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#csPorta .cs-pc > b { color: var(--gold-2); font-size: 15px; }
#csPorta .cs-pc small { color: var(--dim); }
#csPorta .cs-info { display: flex; gap: 10px; flex-wrap: wrap; }
#csPorta .cs-precos { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
#csPorta .cs-precos b { color: #f3ead2; }
#csPorta .cs-motivo { color: #f0a090 !important; }
#csPorta .cs-trav { font-style: normal; color: #ffb4aa; border: 1px solid #6a2e2a; border-radius: 4px; padding: 0 4px; }
#csPorta .cs-pb { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#csPorta .cs-pb .btn { border: 1px solid var(--line); background: var(--panel-2); }
#csPorta .cs-pb .btn.primary { background: var(--gold); border-color: var(--gold); color: #1d1606; }
#csPorta .cs-x { margin-left: auto; width: 28px; height: 28px; border-radius: 5px; color: var(--dim); background: none; border: 0; cursor: pointer; }
#csPorta .cs-x:hover { background: #262b3c; color: var(--txt); }

/* janelas */
.modal.cs-modal { width: min(720px, calc(100vw - 16px)); }
.cs-intro { margin: 0 0 8px; color: #c9c4b6; font-size: 13.5px; }
.cs-aviso { margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; background: #1b2033; border: 1px solid #3a4258; font-size: 13.5px; }
.cs-filtros { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: var(--dim); }
.cs-filtros select { margin-left: 4px; background: #0d1018; border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; }
.cs-lista { display: flex; flex-direction: column; gap: 6px; }
.cs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 9px; border-radius: 6px; background: #121624; border: 1px solid #2c3346; }
.cs-row.dona { opacity: .75; }
.cs-nome { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.cs-nome small { color: var(--dim); }
.cs-nome .cs-de { color: #d9b3e6; }
.cs-val { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; color: var(--dim); min-width: 110px; }
.cs-val b { color: #f3ead2; }
.cs-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-minha, .cs-gere { padding: 10px; border-radius: 6px; background: #121624; border: 1px solid #2c3346; margin-bottom: 10px; }
.cs-mh { display: flex; flex-direction: column; }
.cs-mh b { color: var(--gold-2); font-size: 16px; }
.cs-mh small { color: var(--dim); }
.cs-sit { margin: 8px 0; }
.cs-sit.cs-carencia { color: #f0c46a; }
.cs-sit.cs-travada, .cs-sit.cs-liberando { color: #ffb4aa; }
.cs-sit.cs-em_dia, .cs-sit.cs-comprada { color: #a8d8a0; }
.cs-bts, .cs-pagar, .cs-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.cs-pagar select, .cs-add input { background: #0d1018; border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; }
.cs-add input { flex: 1 1 160px; min-width: 0; }
.cs-gere h4 { margin: 0 0 4px; color: #f3ead2; font-size: 14px; }
.cs-pessoas { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cs-pes { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 6px; border-radius: 5px; background: #0f1320; }
.cs-pes small { color: var(--dim); }
.cs-pes > span:last-child { display: flex; gap: 5px; }
.cs-visita { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; font-size: 13px; }
.cs-sair { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; }
.cs-mapa-t { margin-bottom: 6px; }
.cs-mapa-t b { color: var(--gold-2); }
.cs-mapa-t small { color: var(--dim); }
canvas.cs-mapa { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border: 1px solid #2c3346; border-radius: 6px; background: #0b0e16; }
.cs-leg { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--dim); }
.cs-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.cs-leg .l-sel { background: #f0c46a; }
.cs-leg .l-livre { background: #2f3a52; }
.cs-leg .l-dona { background: #4a3b4f; }
.cs-leg .l-porta { background: #e06a5a; border-radius: 50%; }
.cs-leg .l-eu { background: #4a86e8; border-radius: 50%; }
.cs-conf .lj-err { color: #ffb4aa; margin: 0; }
/* Fase 2 (03/11/2026): o mercado na casa (sugerido, no leilao, alugada), o Deixar com a conta e a aba Casas do leilao (casas_mercado.js) */
.cs-merc { margin: 6px 0 2px; font-size: 13px; }
.cs-merc b { color: var(--gold-2); }
.cs-merc small { color: var(--dim); }
.cs-cl { margin: 4px 0 0; font-size: 14px; }
.cs-cl-bom, .cs-cl-volta { color: #9fe0a8; }
.cs-cl-perde { color: #ffb4aa; font-weight: 600; }
.cs-cl-tempo { color: var(--gold-2); }
.cs-melhor { margin: 10px 0 0; padding: 8px 10px; border: 1px solid #3d4a2f; border-radius: 6px; background: #141a10; }
.cs-melhor p { margin: 0 0 6px; }
.cs-entendo { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; font-size: 13px; cursor: pointer; }
.cm-tabs { margin-bottom: 8px; }
.cm-f { margin-bottom: 8px; }
.cm-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.cm-c { padding: 8px 10px; border: 1px solid #2c3346; border-radius: 6px; background: #0f1320; }
.cm-c-meu { border-color: #6a5a2a; }
.cm-ch b { color: var(--gold-2); }
.cm-ch small { display: block; color: var(--dim); }
.cm-c p { margin: 4px 0; }
.cm-lance { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.cm-lance input { width: 120px; }
.cm-meu { color: #9fe0a8; font-size: 13px; }
.cm-an { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.cm-an label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cm-an .cm-tipo { display: flex; gap: 14px; }
.cm-an .cm-tipo label { flex-direction: row; align-items: center; gap: 5px; }
.cm-sug b { color: var(--gold-2); }
.cm-l { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 6px; border-bottom: 1px solid #1e2433; }
.cm-l small { color: var(--dim); }
.cm-conf { margin: 0 0 10px; }
@media (max-width: 640px) {
  .cm-lista { grid-template-columns: 1fr; }
  .cm-lance input { width: 100%; }
}

@media (max-width: 640px) {
  #csPorta .cs-porta { bottom: 64px; padding: 8px 10px; }
  .cs-val { align-items: flex-start; flex-direction: row; gap: 10px; min-width: 0; }
  .cs-acts { width: 100%; }
  .cs-acts .btn { flex: 1 1 0; }
}