/* Destruitor Idle — municao do arco/besta (municao.js): o lugar da municao do inventario, o espaco do dock, a escolha
   ("Escolha suas arrows") com a barra de prioridade, a ficha e o aviso de municao nova */

/* imagem do item; sem ela (itens/ fora do git), a flecha ou o virote desenhado */
.mun-ic { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; }
.mun-ic img { width: 100%; height: 100%; image-rendering: pixelated; }
.mun-ic.sem-img::before { content: '➶'; color: #d8c49a; font-size: 20px; line-height: 1; }
.mun-ic.k-bolt.sem-img::before { content: '➹'; color: #c7d2e6; }
.mun-ic.eq-ic { width: 32px; height: 32px; }
.mun-ic.as-ic { width: 26px; height: 26px; }
.mun-ic.ic-ic { width: 32px; height: 32px; }
.mun-ic.nm-img { width: 56px; height: 56px; }
.mun-ic.mun-gp { width: 18px; height: 18px; }

/* o lugar da municao: virtual (nada se carrega), clique abre a escolha */
.eq.mun-eq { cursor: pointer; border-color: #4a3d22; background: radial-gradient(circle at 50% 55%, #241d10 0%, #0a0c13 75%); }
.eq.mun-eq:hover, .eq.mun-eq:focus-visible { border-color: var(--gold); outline: none; }
.eq.mun-eq.vazio { border-style: dashed; }
.eq.mun-eq.sem-gold { border-color: #8a2f2a; }
.eq.mun-eq em { right: 1px; bottom: 0; font-size: 8.5px; color: #ffe08a; }
.eq.mun-eq em.gratis { color: #9be3a6; }
.mun-mais { color: #8a7a55; font-size: 18px; font-weight: 800; line-height: 1; }

/* o espaco do dock: ao lado das pocoes, da altura das duas */
.g-pots:has(.mun-dock) { grid-template-columns: 34px 34px; grid-template-rows: 34px 34px; grid-auto-flow: column; }
.g .as.mun-dock { grid-column: 2; grid-row: 1 / span 2; border-color: #5a4a2a; background: radial-gradient(circle at 50% 45%, #2a2110 0%, #0a0c13 75%); }
.g .as.mun-dock:hover { border-color: var(--gold); }
.g .as.mun-dock.vazio { border-style: dashed; }
.g .as.mun-dock.sem-gold { border-color: #8a2f2a; }
.g .as.mun-dock em { font-size: 7px; }
.g .as.mun-dock em.gratis { color: #9be3a6; }
@media (max-width: 759px) {
  /* celular: o dock nao tem altura para mais um; a municao fica no inventario */
  .g .as.mun-dock { display: none; }
  .g-pots:has(.mun-dock) { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}

/* ---- a escolha ---- */
.mun-fundo { position: fixed; inset: 0; z-index: 60; background: #0008; display: grid; place-items: center; padding: 12px; }
.mun-pop { width: min(720px, 100%); max-height: calc(100vh - 24px); overflow: auto; display: flex; flex-direction: column; gap: 10px;
  background: #10131d; border: 1px solid #3a4258; border-top: 2px solid #c8902e; border-radius: 10px; box-shadow: 0 18px 50px #000c;
  color: var(--txt); font-size: 13px; padding: 12px 14px; animation: bpEntra .18s ease-out; }
.mun-h { display: flex; align-items: flex-start; gap: 10px; }
.mun-lanc { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #2f3650; border-radius: 6px; background: #0a0c13; flex: none; }
.mun-lanc img { width: 36px; height: 36px; image-rendering: pixelated; }
.mun-t { flex: 1; min-width: 0; }
.mun-t h2 { margin: 0; font-size: 17px; color: var(--gold-2); }
.mun-t p { margin: 3px 0 0; color: #c9cfdc; font-size: 12.5px; line-height: 1.4; }
.mun-x { background: none; border: 0; color: var(--dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.mun-x:hover { color: #fff; }
.mun-barra h3 { margin: 0; font-size: 14px; color: #fff3c4; }
.mun-barra p { margin: 2px 0 6px; color: var(--dim); font-size: 12px; line-height: 1.4; }
.mun-rot { display: block; margin: 0 0 4px; color: #e0af68; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mun-strip { display: flex; flex-wrap: wrap; gap: 6px; min-height: 52px; padding: 6px; border: 1px dashed #2f3650; border-radius: 8px; background: #0b0e16; touch-action: none; }
.mun-vazio { color: var(--dim); font-size: 12px; align-self: center; padding: 0 4px; }
.mun-slot { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #3a4258; border-radius: 6px; background: #0a0c13; cursor: grab; user-select: none; }
.mun-slot.on { border-color: var(--gold); box-shadow: 0 0 0 1px #c8902e66; }
.mun-slot.cond::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #8fb0ff; }
.mun-slot.arrasto { opacity: .55; cursor: grabbing; }
.mun-slot:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.mun-n { position: absolute; top: 1px; left: 3px; font-size: 9px; color: var(--dim); font-weight: 700; }
.mun-c { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 8.5px; font-weight: 800; color: #ffe08a; background: #000a; line-height: 10px; border-radius: 0 0 5px 5px; }
.mun-slot.caro .mun-c { color: #ff7b72; }
body.mun-arrasta, body.mun-arrasta * { cursor: grabbing !important; }
.mun-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; min-height: 0; }
.mun-lista { display: flex; flex-direction: column; gap: 3px; max-height: 330px; overflow: auto; padding-right: 2px; }
.mun-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid #222838; border-radius: 6px; background: #0c0f17; cursor: pointer; }
.mun-row:hover, .mun-row:focus-visible { border-color: #4a5372; outline: none; }
.mun-row.on { border-color: var(--gold); background: #17140c; }
.mun-row.trava { opacity: .5; }
.mun-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mun-rt b { color: #e8e6df; font-size: 12.5px; font-weight: 600; }
.mun-rt small { color: #ffe08a; font-size: 11px; }
.mun-row.caro .mun-rt small { color: #ff7b72; }
.mun-row.trava .mun-rt small { color: var(--dim); }
.mun-sw { position: relative; width: 34px; height: 18px; border-radius: 10px; border: 1px solid #3a4258; background: #1a1f2c; cursor: pointer; padding: 0; flex: none; }
.mun-sw i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #6b7388; transition: left .15s, background .15s; }
.mun-sw[aria-checked="true"] { background: #2b4a26; border-color: #4f8a45; }
.mun-sw[aria-checked="true"] i { left: 18px; background: #9be3a6; }
.mun-sw:disabled { cursor: default; opacity: .5; }
.mun-det { border: 1px solid #262c3e; border-radius: 8px; padding: 8px 10px; background: #0c0f17; min-width: 0; }
.mun-dh { display: flex; flex-direction: column; gap: 3px; }
.mun-dh strong { color: #fff3c4; font-size: 14px; }
.mun-dano { display: flex; flex-wrap: wrap; gap: 4px; }
.mun-dano span { padding: 1px 6px; border-radius: 9px; background: #0d1018; border: 1px solid #2f3650; color: #c9cfdc; font-size: 11px; }
.mun-el.el-earth { color: #9be37a; border-color: #3c5a2a; }
.mun-el.el-fire { color: #ff9a62; border-color: #6a3a22; }
.mun-el.el-energy { color: #d6a6ff; border-color: #4e3470; }
.mun-el.el-ice { color: #9ad8ff; border-color: #2a4e6a; }
.mun-meta { font-size: 12px; color: var(--dim); }
.mun-meta.mun-custo { color: #ffe08a; }
.mun-meta.mun-custo.caro { color: #ff7b72; }
.mun-meta.mun-gratis { color: #9be3a6; }
.mun-off { color: #ffb4aa; font-size: 11.5px; }
.mun-sec { margin-top: 9px; padding-top: 7px; border-top: 1px solid #222838; }
.mun-sempre { display: inline-block; color: #c9cfdc; font-size: 12px; margin-bottom: 4px; }
.mun-conds { display: flex; flex-direction: column; gap: 4px; margin-bottom: 5px; }
.mun-cond { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; gap: 4px; align-items: center; }
.mun-cond select { background: #0a0c13; color: var(--txt); border: 1px solid #2f3650; border-radius: 4px; font-size: 11.5px; padding: 2px 3px; min-width: 0; }
.mun-step { display: inline-flex; align-items: center; }
.mun-step button { width: 20px; height: 22px; border: 1px solid #2f3650; background: #151a26; color: var(--txt); cursor: pointer; padding: 0; }
.mun-step input { width: 46px; height: 22px; border: 1px solid #2f3650; border-left: 0; border-right: 0; background: #0a0c13; color: var(--txt); text-align: center; font-size: 12px; padding: 0; }
.mun-pct { font-size: 11px; color: var(--dim); display: inline-flex; align-items: center; gap: 2px; }
.mun-del { background: none; border: 0; color: #ff9f94; font-size: 15px; cursor: pointer; padding: 0 3px; }
.mun-bt { background: #151a26; border: 1px solid #2f3650; border-radius: 5px; color: #d8c49a; font-size: 11.5px; padding: 3px 8px; cursor: pointer; }
.mun-bt:hover:not(:disabled) { border-color: var(--gold); }
.mun-bt:disabled { opacity: .5; cursor: default; }
.mun-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mun-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 3px 1px 7px; border-radius: 9px; background: #1b1414; border: 1px solid #5a2e2a; color: #ffcfc8; font-size: 11px; }
.mun-chip button { background: none; border: 0; color: #ff9f94; cursor: pointer; font-size: 12px; padding: 0 2px; }
.mun-busca { margin-top: 6px; border: 1px solid #3a4258; border-radius: 6px; background: #0a0c13; padding: 5px; }
.mun-busca input { width: 100%; box-sizing: border-box; background: #10131d; color: var(--txt); border: 1px solid #2f3650; border-radius: 4px; padding: 4px 6px; font-size: 12px; }
.mun-achou { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; max-height: 140px; overflow: auto; }
.mun-achou button { background: #151a26; border: 1px solid #2f3650; border-radius: 9px; color: #c9cfdc; font-size: 11px; padding: 1px 7px; cursor: pointer; }
.mun-achou button:hover { border-color: var(--gold); }
.mun-nada { color: var(--dim); font-size: 11.5px; }
.mun-f { display: flex; align-items: center; gap: 10px; border-top: 1px solid #222838; padding-top: 8px; }
.mun-bolsa { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mun-bolsa b { color: #ffe08a; font-size: 13px; }
.mun-dica { color: var(--dim); font-size: 11.5px; }
.mun-dica.vermelho, .mun-dica.semgold, .mun-dica.nada { color: #ff9f94; }
.mun-pronto { flex: none; }
@media (max-width: 759px) {
  .mun-fundo { padding: 0; align-items: end; }
  .mun-pop { max-height: 92vh; border-radius: 12px 12px 0 0; padding: 10px; }
  .mun-corpo { grid-template-columns: 1fr; }
  .mun-lista { max-height: 210px; }
  .mun-cond { grid-template-columns: 1fr 1fr 1fr; }
}

/* a ficha da municao (o mesmo cartao da ficha das magias, app.js) */
.ic-mun .ic-h .mun-ic { width: 32px; height: 32px; }