/* Destruitor Idle — Bestiario como no Huntera (bestiario.js): resumo, lista com progresso, pagina da criatura com o
   carrossel das fases, e o painel de acompanhamento na caçada. Tema escuro do jogo (app.css: --gold, --dim...). */

/* janela */
.bst-modal .modal-b { flex-direction: column; }
.bt { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; width: 100%; }
.bt-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bt-topo { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; flex: 1; padding: 8px 12px; border-radius: 8px; background: #121624; border: 1px solid #262c3e; }
.bt-prog { display: flex; align-items: center; gap: 8px; flex: 1 1 300px; min-width: 0; }
.bt-pl { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.bt-prog b { font-size: 14px; color: var(--gold-2); white-space: nowrap; }
.bt-prog em { font-style: normal; font-size: 12px; color: var(--dim); }
.bt-bar { position: relative; display: block; flex: 1; min-width: 60px; height: 7px; border-radius: 4px; background: #0a0d16; border: 1px solid #262c3e; overflow: hidden; }
.bt-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #5d9a3c, #8fc163); border-radius: 4px; }
.bt-bonus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.bt-bonus span { color: var(--dim); }
.bt-bx { color: #8fc163; }
.bt-bd { color: #f0a070; }
.bt-dest { white-space: nowrap; }
.bt-corpo { flex: 1; min-height: 0; }
.bt-foot { margin: 0; font-size: 12px; color: var(--dim); text-align: right; }

/* lista */
.g .bt-row.pronta { border-color: #6a5420; background: #1d1a12; }
.bt-rk { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; width: 92px; flex: none; }
.bt-rk small { font-size: 11px; color: #c3c8d4; white-space: nowrap; }
.bt-row.pronta .bt-rk small { color: var(--gold-2); font-weight: 700; }
.bt-mini { position: relative; display: block; width: 100%; height: 4px; border-radius: 2px; background: #0a0d16; overflow: hidden; }
.bt-mini > i { position: absolute; left: 0; top: 0; bottom: 0; background: #8fc163; border-radius: 2px; }
.pronta .bt-mini > i { background: var(--gold); }

/* pagina da criatura */
.bt-hero { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; padding: 8px; border-radius: 8px; background: #121624; border: 1px solid #262c3e; }
.bt-hero.pronta { border-color: #6a5420; box-shadow: 0 0 10px #d8a64a33 inset; }
.bt-frame { flex: none; }
.bt-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bt-id h3 { margin: 0; font-size: 20px; color: var(--gold-2); display: flex; align-items: center; gap: 8px; }
.bt-star { font-style: normal; font-size: 13px; padding: 1px 7px; border-radius: 10px; background: #3a2e12; color: var(--gold-2); }
.bt-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.g .bt-acts .btn.on { border-color: var(--gold); color: var(--gold-2); }
.bt-kv2 { display: grid; grid-template-columns: 150px 1fr; gap: 8px; margin-bottom: 10px; }
.bt-kv2 > div { padding: 8px 10px; border-radius: 6px; background: #151a29; border: 1px solid #232838; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bt-kv2 span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.bt-tot b { font-size: 22px; }
.bt-pb { display: flex; align-items: center; gap: 8px; }
.bt-pb b { font-size: 15px; white-space: nowrap; }
.bt-pb em { font-style: normal; font-size: 12px; color: var(--dim); }
.bt-st { margin: 0; font-size: 13px; color: #c3c8d4; }
.bt-ok { color: var(--gold-2); }
.bt-sobra { font-size: 12px; color: var(--dim); }

/* carrossel das fases */
.bt-fases { display: flex; align-items: stretch; gap: 6px; margin: 4px 0 6px; }
.g .bt-seta { flex: none; width: 26px; border-radius: 6px; background: #151a29; border: 1px solid #2c3346; color: var(--txt); font-size: 18px; }
.g .bt-seta:disabled { opacity: .35; cursor: default; }
.bt-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px; background: #141927; border: 1px solid #2a3044; }
.bt-card.vazio { background: transparent; border-color: transparent; }
.bt-card.centro { border-width: 2px; }
.bt-card.concluida { border-color: #3b6a3a; }
.bt-card.atual { border-color: #6b7a99; }
.bt-card.pronta { border-color: var(--gold); background: #1f1a10; box-shadow: 0 0 12px #d8a64a40; }
.bt-card.bloqueada { opacity: .72; }
.bt-ch { display: flex; align-items: center; gap: 6px; }
.bt-num { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800; background: #262c3e; color: var(--txt); flex: none; }
.concluida .bt-num { background: #2e5a2d; color: #c9f0bf; }
.pronta .bt-num { background: var(--gold); color: #1d1606; }
.bt-ch strong { font-size: 13px; }
.bt-chip { margin-left: auto; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 8px; background: #232838; color: var(--dim); white-space: nowrap; }
.concluida .bt-chip { background: #213a20; color: #a6db9d; }
.atual .bt-chip { background: #22304a; color: #a9c4f5; }
.pronta .bt-chip { background: #4a3a14; color: var(--gold-2); }
.bt-cb { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.bt-ck i, .bt-cfl i { font-style: normal; margin-right: 4px; }
.bt-rw { display: flex; align-items: center; gap: 6px; color: #a6db9d; }
.bt-rw i { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 4px; background: #213a20; }
.bt-rw.dano { color: #f0b48a; }
.bt-rw.dano i { background: #3a2a1a; }
.bt-cf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; min-height: 26px; }
.bt-cfl { font-style: normal; font-size: 11px; color: var(--dim); }
.bt-cfl.ok { color: #a6db9d; }
.bt-cost { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gold-2); }
.bt-cost .gp-ic { width: 14px; height: 14px; }

/* resistencias e loot */
.bt-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.bt-re { display: flex; flex-direction: column; align-items: center; padding: 5px 4px; border-radius: 6px; background: #161a2a; border: 1px solid #262c3e; color: #c9c3e8; }
.bt-re small { font-size: 11px; color: var(--dim); }
.bt-re b { font-size: 14px; }
.bt-re.im { color: #7fb2ff; border-color: #2b4570; }
.bt-re.fr { color: #a6db9d; }
.bt-re.rs { color: #f0c48a; }
.bt-loot { display: flex; flex-direction: column; gap: 5px; }
.bt-lb { display: flex; align-items: center; gap: 8px; }
.bt-ln { width: 92px; flex: none; font-size: 12px; color: var(--dim); }
.bt-ln i { font-style: normal; margin-right: 5px; color: #7f879e; }
.bt-lb.incomum .bt-ln i { color: #6fc07a; }
.bt-lb.semi-raro .bt-ln i { color: #5b9be6; }
.bt-lb.raro .bt-ln i { color: #b066e0; }
.bt-lb.muito-raro .bt-ln i { color: #e0a030; }
.bt-lcs { display: flex; flex-wrap: wrap; gap: 4px; }
.bt-lc { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 5px; background: #0f121c; border: 1px solid #262c3e; }
.bt-li { width: 32px; height: 32px; image-rendering: pixelated; }

/* painel de acompanhamento (flutuante, como as janelas do jogo) */
.bt-trk { position: absolute; z-index: 6; width: 260px; max-height: calc(100vh - 170px); display: flex; flex-direction: column; background: #10131df0; border: 1px solid #2c3346; border-radius: 6px; box-shadow: 0 6px 20px #0008; }
.bt-thd { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: #171b29; border-bottom: 1px solid #2c3346; border-radius: 6px 6px 0 0; cursor: move; user-select: none; touch-action: none; }
.bt-thd b { font-size: 12px; color: #c9cfdd; letter-spacing: .02em; }
.bt-tc { margin-left: auto; font-size: 11px; color: var(--dim); }
.g .bt-thd button { width: 22px; height: 22px; border-radius: 4px; color: var(--dim); font-size: 14px; }
.g .bt-thd button:hover { background: #262b3c; color: var(--txt); }
.bt-tsc { overflow: auto; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.bt-th { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid #232838; }
.g .bt-thh { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; text-align: left; }
.bt-thh span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-thh em, .bt-thh i { font-style: normal; }
.bt-tr { display: flex; align-items: center; gap: 4px; border-radius: 5px; background: #151a29; border: 1px solid transparent; }
.bt-tr.pronta { border-color: #6a5420; }
.g .bt-tb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 3px 4px; text-align: left; }
.bt-tp { width: 32px; height: 32px; flex: none; border-radius: 4px; background: #0a0c13; image-rendering: pixelated; }
.bt-tn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bt-tl { display: flex; justify-content: space-between; gap: 6px; }
.bt-tl b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-tl small { font-size: 11px; color: var(--dim); white-space: nowrap; }
.pronta .bt-tl small { color: var(--gold-2); }
.g .bt-tpin, .g .bt-tx { flex: none; width: 24px; height: 24px; border-radius: 4px; color: #5a6178; font-size: 14px; }
.g .bt-tpin.on { color: var(--gold); }
.g .bt-tpin:hover, .g .bt-tx:hover { background: #262b3c; color: var(--txt); }
.bt-tv { margin: 4px; font-size: 12px; color: var(--dim); }
.bt-tk { padding: 4px; border-top: 1px solid #232838; display: flex; flex-direction: column; gap: 4px; }
.bt-tk input { padding: 6px 8px; font-size: 13px; }
.bt-tres { display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow: auto; }
.g .bt-tres button { display: flex; justify-content: space-between; gap: 6px; padding: 4px 6px; border-radius: 4px; font-size: 12px; text-align: left; color: var(--txt); }
.g .bt-tres button:hover { background: #1e2436; }
.g .bt-tres button:disabled { opacity: .45; }
.bt-tres em { font-style: normal; color: var(--dim); }
.g .bt-tadd { margin: 4px; padding: 6px; border-radius: 5px; border: 1px dashed #3a4258; color: var(--dim); font-size: 12px; }
.g .bt-tadd:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-2); }
.g .bt-tadd:disabled { opacity: .5; cursor: default; }

@media (max-width: 760px) {
  .bt { gap: 6px; }
  .bt-topo { gap: 4px 8px; padding: 6px 8px; }
  .bt-prog { flex-basis: 100%; }
  .bt-pl { font-size: 10px; }
  .bt-bonus { font-size: 12px; gap: 6px; flex: 1; }
  .bt-dest { padding: 4px 8px; font-size: 12px; }
  .bt-foot { display: none; }
  .bt-corpo.bst { grid-template-rows: 40% 60%; }
  .bt-kv2 { grid-template-columns: 1fr; }
  .bt-fases { gap: 4px; }
  .bt-card { padding: 8px; }
  .bt-card:not(.centro) { display: none; } /* no celular, uma fase por vez (as setas trocam) */
  .bt-res { grid-template-columns: repeat(2, 1fr); }
  .bt-ln { width: 74px; }
  .bt-trk { position: fixed; left: 4px; right: 4px; top: auto; bottom: calc(150px + env(safe-area-inset-bottom)); width: auto; max-height: 40vh; }
  .bt-thd { cursor: default; }
}