/* Destruitor Idle — ITENS NA CASA (casa_itens.js): o botao Decorar, a faixa da escolha, a janela e o menu do item posto */
/* o botao Decorar e um .cb da barra de baixo (app.js), logo depois do Templo */
.g .cb.ci-cb { display: inline-flex; align-items: center; gap: 5px; color: #f0c46a; }
.g .cb.ci-cb .ci-ic { width: 14px; height: 14px; }
.g .cb.ci-cb.on { background: #2a2414; border-color: var(--gold, #c9a14a); }
#ciJanela .ci-cel[data-ci="esc"] { cursor: grab; user-select: none; }
#ciJanela .ci-cel img { -webkit-user-drag: none; user-select: none; }

#ciFaixa .ci-faixa {
  position: fixed; z-index: 17; left: 50%; top: 64px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 8px; background: #121624f2; border: 1px solid #5a4a28;
  color: #e8e2d0; font-size: 13px; box-shadow: 0 6px 18px #000a;
}
#ciFaixa .ci-faixa img { width: 28px; height: 28px; flex: none; }
#ciFaixa .ci-faixa b { color: var(--gold-2, #f0c46a); }
#ciFaixa .ci-faixa .btn { flex: none; }

#ciJanela .ci-jan {
  position: fixed; z-index: 16; left: 12px; bottom: 136px; width: min(360px, calc(100vw - 32px)); max-height: min(60vh, 520px);
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: #121624f5; border: 1px solid #5a4a28;
  box-shadow: 0 8px 24px #000a; overflow: hidden;
}
#ciJanela .ci-cab { display: flex; align-items: center; gap: 8px; }
#ciJanela .ci-cab b { color: var(--gold-2, #f0c46a); font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ciJanela .ci-x { margin-left: auto; width: 28px; height: 28px; border-radius: 5px; color: var(--dim, #8e96aa); background: none; border: 0; cursor: pointer; flex: none; }
#ciJanela .ci-x:hover { background: #262b3c; color: var(--txt, #e8e2d0); }
#ciJanela .ci-ajuda { margin: 0; font-size: 12.5px; color: #b9b4a6; }
#ciJanela .ci-abas { display: flex; gap: 4px; }
#ciJanela .ci-abas button { flex: 1; height: 30px; border-radius: 5px; border: 1px solid var(--line, #2c3346); background: var(--panel-2, #1a1f2e); color: #c9cfdd; font-size: 12.5px; cursor: pointer; }
#ciJanela .ci-abas button.on { border-color: #5a4a28; color: #f0c46a; background: #221d12; }
#ciJanela .ci-corpo { overflow-y: auto; min-height: 60px; }
#ciJanela .ci-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
#ciJanela .ci-cel { position: relative; width: 100%; aspect-ratio: 1; border-radius: 5px; border: 1px solid #2c3346; background: #0d1018; cursor: pointer; padding: 2px; }
#ciJanela .ci-cel:hover, #ciJanela .ci-cel:focus-visible { border-color: #c9a14a; }
#ciJanela .ci-cel img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
#ciJanela .ci-cel em { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 10px; font-weight: 700; color: #f3ead2; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#ciJanela .ci-lista { display: flex; flex-direction: column; gap: 4px; }
#ciJanela .ci-linha { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; background: #0d1018; border: 1px solid #2c3346; flex-wrap: wrap; }
#ciJanela .ci-linha > img { width: 32px; height: 32px; flex: none; }
#ciJanela .ci-linha > span:first-of-type { display: flex; flex-direction: column; flex: 1 1 110px; min-width: 0; }
#ciJanela .ci-linha small { color: var(--dim, #8e96aa); }
#ciJanela .ci-acts { display: flex; gap: 4px; flex-wrap: wrap; }
#ciJanela .ci-outro { font-style: italic; }
#ciJanela .ci-vazio { margin: 6px 0; color: #b9b4a6; font-size: 13px; }
#ciJanela .ci-rodape { display: flex; justify-content: flex-end; margin-top: 6px; }
#ciJanela .btn.small { min-height: 28px; }
#ciJanela .ci-recolocar { align-self: flex-start; }

.ci-menu {
  position: fixed; z-index: 40; width: 180px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 7px;
  background: #121624f8; border: 1px solid #5a4a28; box-shadow: 0 8px 20px #000b;
}
.ci-menu b { color: var(--gold-2, #f0c46a); font-size: 13px; padding: 2px 4px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-menu button { text-align: left; min-height: 32px; padding: 0 8px; border: 0; border-radius: 5px; background: none; color: #e8e2d0; font-size: 13px; cursor: pointer; }
.ci-menu button:hover, .ci-menu button:focus-visible { background: #262b3c; }

.ci-fantasma { position: fixed; left: 0; top: 0; width: 44px; height: 44px; z-index: 60; pointer-events: none; opacity: .85; image-rendering: pixelated; }
body.ci-arrastando, body.ci-arrastando * { cursor: grabbing !important; }

@media (max-width: 600px) {
  #ciJanela .ci-jan { left: 16px; right: 16px; width: auto; max-height: 55vh; }
  #ciFaixa .ci-faixa { top: 58px; font-size: 12.5px; }
}

/* a janela arrasta pelo cabecalho para qualquer lugar (no celular tambem: o dedo no cabecalho nao rola a pagina) */
#ciJanela .ci-cab { cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; }
#ciJanela .ci-cab .ci-x { cursor: pointer; }
/* no celular, escolhido um item: so o cabecalho (o chao da casa aparece para o toque; a faixa diz o que fazer) */
#ciJanela .ci-jan.ci-min > :not(.ci-cab) { display: none; }
/* arrastando um item da janela: ela fica transparente e deixa passar o soltar (o chao que esta embaixo recebe) */
#ciJanela .ci-jan.ci-solta { opacity: .3; pointer-events: none; }
/* segurar o dedo num item: sem o menu do navegador (copiar imagem, selecionar) */
#ciJanela .ci-cel { -webkit-touch-callout: none; -webkit-user-select: none; }