/* ── CASAS (22/10/2026): painel, leilão, minha casa e Loja de Móveis (casasPainel.ts) ── */
#casas {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(760px, 96vw); max-height: min(86vh, 760px);
  padding: 13px; display: flex; flex-direction: column; gap: 9px; z-index: 26;
  font-family: var(--ui);
}
#casas[hidden] { display: none !important; }
#casas > header { display: flex; align-items: center; gap: 10px; }
#casas > header .lead { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
#casas > header .close { margin-left: auto; }
.cs-dock { font-size: 26px; line-height: 1; display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.cs-abas { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-aba { padding: 7px 14px; border-radius: 10px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); color: inherit; font-weight: 700; cursor: pointer; }
.cs-aba.on { background: linear-gradient(180deg, rgba(255, 196, 80, .28), rgba(255, 196, 80, .08)); border-color: rgba(255, 196, 80, .6); }
.cs-corpo { overflow: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.cs-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-regras { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.45; }
.cs-vazio { margin: 6px 0; font-size: 13px; color: var(--dim); }
.cs-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; }
.cs-casa { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .03); }
.cs-casa.leilao { border-color: rgba(255, 196, 80, .45); }
.cs-casa.minha { border-color: rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .07); }
.cs-casa.ocupada { opacity: .75; }
.cs-topo b { display: block; font-size: 14px; }
.cs-topo small { color: var(--dim); font-size: 11.5px; }
.cs-status { font-size: 12.5px; line-height: 1.4; }
.cs-eu { color: #4ade80; }
.cs-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cs-acoes button, .cs-linha button, .cs-movel button { padding: 6px 11px; border-radius: 9px; font-weight: 700; }
.cs-lance { width: 120px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--edge); background: rgba(0, 0, 0, .25); color: inherit; }
.cs-minha h3 { margin: 0 0 4px; }
.cs-minha p { margin: 3px 0; font-size: 13px; line-height: 1.45; }
.cs-conv { display: flex; flex-direction: column; gap: 6px; }
.cs-conv h4, .cs-menu h4 { margin: 6px 0 2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.cs-conv input { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--edge); background: rgba(0, 0, 0, .25); color: inherit; max-width: 240px; }
.cs-linha { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.cs-linha b { flex: 1; font-size: 13px; }
.cs-linha img, .cs-linha canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.cs-perigo { align-self: flex-start; margin-top: 8px; padding: 7px 12px; border-radius: 9px; border: 1px solid rgba(255, 90, 90, .5); background: rgba(255, 90, 90, .1); color: #ffb4b4; font-weight: 700; }
.cs-loja { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.cs-movel { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .03); text-align: center; }
.cs-movel img, .cs-movel canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.cs-movel b { font-size: 12px; line-height: 1.2; min-height: 2.4em; }
.cs-movel.diamante { border-color: rgba(96, 200, 255, .45); }
.cs-movel.raro { border-color: rgba(232, 121, 249, .45); }
.cs-origem { font-size: 10.5px; color: var(--dim); line-height: 1.3; }
.cs-sem { font-size: 32px; }
.cs-faixa { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px;
  background: rgba(20, 16, 36, .92); border: 1px solid rgba(255, 196, 80, .55); color: #ffe7a3; font-weight: 700; font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.cs-faixa[hidden] { display: none; }
.cs-faixa button { padding: 6px 12px; border-radius: 9px; }
.cs-menu { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 560px) {
  .cs-grade { grid-template-columns: 1fr; }
  .cs-loja { grid-template-columns: repeat(2, 1fr); }
}
.cs-sec { margin: 10px 0 2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }

/* Decorar arrastando (casasDecorar.ts, 23/10/2026). */
.cs-faixa.cs-decor { flex-direction: column; align-items: stretch; gap: 8px; width: min(720px, calc(100vw - 24px)); }
.cs-dtopo { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.cs-dtopo span { flex: 1; }
.cs-bandeja { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.cs-bandeja .cs-vazio { font-size: 12px; color: var(--dim); }
.cs-bmovel { position: relative; flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); cursor: grab; touch-action: none; user-select: none; }
.cs-bmovel:hover { border-color: rgba(255, 214, 107, .6); background: rgba(255, 214, 107, .1); }
.cs-bmovel img, .cs-bmovel canvas { image-rendering: pixelated; pointer-events: none; }
.cs-bmovel small { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-weight: 800; color: #ffd66b; text-shadow: 0 1px 0 #000; }
.cs-fantasma { position: fixed; z-index: 80; transform: translate(-50%, -60%); pointer-events: none; padding: 4px; border-radius: 10px; border: 2px solid rgba(255, 107, 107, .8); background: rgba(40, 10, 14, .55); }
.cs-fantasma.ok { border-color: rgba(95, 216, 138, .9); background: rgba(10, 40, 20, .55); }
.cs-fantasma img, .cs-fantasma canvas { image-rendering: pixelated; display: block; }

/* Quem mora aqui (casasPorta.ts): etiqueta do mouse e cartão do clique. */
.cs-dica { position: fixed; z-index: 55; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 10px; background: rgba(16, 18, 26, .94); border: 1px solid rgba(255, 255, 255, .16); font-size: 12px; color: var(--ink, #fff); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.cs-dica[hidden] { display: none; }
.cs-dica.livre span, .cs-porta.livre span { color: #5fd88a; }
.cs-dica.leilao span, .cs-porta.leilao span { color: #ffd66b; }
.cs-dica.minha span, .cs-porta.minha span { color: #8fc1ff; }

/* Admin no cartão da casa. */
.cs-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255, 210, 122, .35); }
.cs-admin-tag { font-size: 11px; font-weight: 800; color: #ffd27a; }
.cs-admin input { flex: 1; min-width: 120px; }
.cs-ic { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: -5px; }

/* Atalhos do teclado no dock (atalhosDock.ts, 23/10/2026). */
.atalho-tecla { position: absolute; top: 2px; left: 3px; min-width: 15px; padding: 0 4px; border-radius: 5px; background: rgba(255, 214, 107, .92); color: #2a1a00; font: 800 10px/14px var(--ui, system-ui); text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); pointer-events: none; }
.atalho-menu { position: fixed; z-index: 70; display: flex; flex-direction: column; gap: 6px; min-width: 200px; padding: 10px; border-radius: 12px; background: rgba(16, 18, 26, .97); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); color: var(--ink, #fff); font-size: 12px; }
.atalho-menu b { font-size: 13px; }
.atalho-menu small { color: var(--dim, #aab); }
.atalho-bt { padding: 7px 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: inherit; font: inherit; font-weight: 700; cursor: pointer; text-align: left; box-shadow: none; }
.atalho-bt:hover { border-color: rgba(255, 214, 107, .6); }
.atalho-bt.primary { background: rgba(255, 214, 107, .14); border-color: rgba(255, 214, 107, .5); }
.atalho-bt.esperando { animation: atalho-pisca 1s ease-in-out infinite; }
.atalho-bt.perigo { color: #ff9a8f; }
@keyframes atalho-pisca { 50% { background: rgba(255, 214, 107, .3); } }