/* Destruitor Idle — janela do Altar das Oferendas (public/altar.js) e o passo "Oferecer no altar" do Selecionar do depot. Usa as cores e as janelas do app.css. */
.modal.al { width: min(940px, calc(100vw - 16px)); height: min(680px, calc(100vh - 80px)); display: flex; flex-direction: column; }
.modal.al .modal-b.al-b { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
.al-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.al-dir { overflow: hidden; }
.al-card { padding: 10px 12px; border-radius: 8px; background: #151a29; border: 1px solid #2c3346; }
.al-h { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); }
.al-h small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; margin-left: 4px; }
.al-grande { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 30px; font-weight: 800; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.al-grande small { font-size: 12px; font-weight: 600; color: var(--dim); }
.al-barra { height: 12px; margin: 6px 0; border-radius: 6px; overflow: hidden; background: #0c0e14; border: 1px solid #2c3346; }
.al-barra i { display: block; height: 100%; background: linear-gradient(90deg, #a06a1e, #f0c46a); transition: width .4s; }
.al-barra.meta i { background: linear-gradient(90deg, #b5451f, #ff9f4a); }
.al-nums { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.al-nums b { color: var(--txt); }
.al-ok { margin: 6px 0 0; color: var(--ok); }
.al-card p.muted { margin: 6px 0 0; }
.al-ativo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 8px 0 0; padding: 6px 10px; border-radius: 6px; background: #2a1a0c; border: 1px solid #a8682a; color: #ffc98a; font-size: 13px; }
.al-ativo small { color: #e4b98a; font-variant-numeric: tabular-nums; }
.al-ic { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.al-oferta { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.al-oferta li { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 4px; border-radius: 6px; background: #19160e; border: 1px solid #6b5626; }
.al-oferta li span { flex: 1; min-width: 0; font-size: 13px; }
.al-oferta li small { display: block; font-size: 11px; }
.al-oferta em, .al-x2 { font-style: normal; font-weight: 800; color: #ffb45a; font-variant-numeric: tabular-nums; }
.al-x2 { margin-left: 6px; font-size: 12px; }

/* abas e a coluna da direita */
.al-abas { display: flex; gap: 4px; flex: none; }
.g .al-abas button { flex: 1; padding: 7px 8px; font-size: 13px; border-radius: 6px; border: 1px solid #2c3346; background: #121624; color: var(--dim); }
.g .al-abas button:hover { border-color: #4a5470; }
.g .al-abas button.on { border-color: var(--gold); color: var(--gold-2); background: #19160e; }
.al-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 2px; }
.al-busca input { width: 100%; padding: 7px 10px; font-size: 14px; border-radius: 8px; border: 1px solid var(--line); background: #0c0e14; color: var(--txt); }
.al-lista { display: grid; gap: 4px; align-content: start; }
.al-vazio { padding: 20px 8px; text-align: center; }
.al-it { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 4px; border-radius: 6px; background: #151a29; border: 1px solid #2c3346; }
.al-it-m { flex: 1; min-width: 0; font-size: 13px; }
.al-it-m small { font-size: 11px; }
.al-it-p { display: flex; align-items: center; gap: 8px; margin: 3px 0 1px; }
.al-r { margin-left: 6px; padding: 0 5px; border-radius: 4px; border: 1px solid #3a4258; color: var(--dim); }
.al-r.r1 { border-color: #3f7a4f; color: #8fdc9f; }
.al-r.r2 { border-color: #8a5fc0; color: #cfa8ff; }
.al-pips { display: inline-flex; gap: 3px; flex: none; }
.al-pips i { width: 10px; height: 10px; transform: rotate(45deg); background: #0c0e14; border: 1px solid #4a5470; }
.al-pips i.on { background: var(--gold-2); border-color: var(--gold); }
.al-mini { flex: 1; height: 4px; min-width: 40px; border-radius: 2px; overflow: hidden; background: #0c0e14; }
.al-mini i { display: block; height: 100%; background: var(--gold); }
.al-it-b { flex: none; font-weight: 700; color: var(--gold-2); font-variant-numeric: tabular-nums; font-size: 13px; }

/* colecionadores */
.al-top { display: grid; gap: 3px; }
.al-tr { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; background: #151a29; border: 1px solid #2c3346; }
.al-tr.eu { border-color: var(--gold); }
.al-tr.m1 .al-pos { color: #ffd447; }
.al-tr.m2 .al-pos { color: #e3e8ef; }
.al-tr.m3 .al-pos { color: #e79a5a; }
.al-pos { width: 24px; text-align: center; font-variant-numeric: tabular-nums; color: var(--dim); }
.al-nm { flex: 1; min-width: 0; font-size: 13px; }
.al-nm small, .al-pt small { display: block; font-size: 11px; color: var(--dim); font-weight: 400; }
.al-pt { text-align: right; font-variant-numeric: tabular-nums; }

/* como funciona */
.al-como p { margin: 0 0 8px; }
.al-tab-w { overflow-x: auto; margin-bottom: 8px; }
.al-tab { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.al-tab th, .al-tab td { padding: 5px 6px; border: 1px solid #2c3346; text-align: right; }
.al-tab th:first-child { text-align: left; color: var(--gold-2); }
.al-tab thead th { color: var(--dim); font-weight: 600; }
.al-b5 { color: var(--gold-2); font-weight: 700; }

.al-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid #2c3346; flex-wrap: wrap; }
.al-pe-b { display: flex; gap: 6px; }

/* o passo do Selecionar do depot: uma linha por item, com o gold e o nivel */
.dp-al-txt { margin: 0 0 6px; }
.dp-al-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.dp-al-lista li { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 6px; background: #19160e; border: 1px solid #6b5626; }
.dp-al-nome { flex: 1; min-width: 0; }
.dp-al-nome small { display: block; font-size: 11px; color: var(--dim); }
.dp-al-niv { flex: none; width: 180px; text-align: right; font-size: 12px; font-weight: 700; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.dp-al-niv small { display: block; font-size: 11px; font-weight: 400; color: var(--dim); }
.dp-al-ouro { flex: none; width: 92px; text-align: right; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-al-tot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: #151a29; border: 1px solid #2c3346; font-size: 13px; }
.dp-al-tot b { color: var(--gold-2); font-variant-numeric: tabular-nums; }

@media (max-width: 759px) {
  .modal.al .modal-b.al-b { display: flex; flex-direction: column; overflow-y: auto; }
  .al-col, .al-dir, .al-corpo { overflow: visible; flex: none; }
  .dp-al-ouro { width: auto; }
  .dp-al-niv { width: auto; max-width: 130px; }
  .dp-al-lista { flex: none; max-height: 44vh; }
}