/* npcs-missoes-lojas.css — depende de codex.css, pals-list.css e habilidade.css
   Usado por: npcs.php, npc.php, missoes.php, missao.php, lojas.php, loja.php
   (e por item.php, nas seções novas de loja/missão que referenciam este item) */

/* ---------- Cabeçalho de detalhe (ícone + título), mesmo padrão de
   item-detalhe.css mas sem depender dele ---------- */
.detail-header{
  display:flex;
  align-items:flex-start;
  gap: 1.25rem;
  flex-wrap:wrap;
}
.detail-icon-wrap{
  width:84px; height:84px;
  border-radius:50%;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-family: var(--font-display);
  font-weight:700;
  font-size:2.1rem;
  color: var(--text-dim);
}
.detail-icon-wrap i{ font-size:2.1rem; }
.detail-icon-wrap.is-accent{ color: var(--accent); border-color: var(--accent-line); box-shadow: 0 0 0 5px var(--accent-soft); }
.detail-text{ flex:1; min-width:220px; }

/* ---------- Grid genérico de cards (hubs) ---------- */
.entity-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.entity-card{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:1.1rem;
  text-decoration:none;
  color:inherit;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.entity-card:hover{
  border-color: var(--accent-line);
  background: var(--panel-2);
  transform: translateY(-2px);
  color:inherit;
}
.entity-card-head{
  display:flex;
  align-items:center;
  gap:.85rem;
}
.entity-card-icon{
  width:52px; height:52px;
  border-radius:50%;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:1.3rem;
  color: var(--accent);
}
.entity-card-title{ flex:1; min-width:0; }
.entity-card-name{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color: var(--text-bright);
  margin:0 0 .2rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.entity-card-sub{
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  color: var(--text-dim);
  display:flex;
  align-items:center;
  gap:.35rem;
}
.entity-card-desc{
  font-size:.85rem;
  color: var(--text);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
}
.entity-card-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:auto;
}
.entity-badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.72rem;
  font-family: var(--font-mono);
  padding:.25em .6em;
  border-radius:999px;
  border:1px solid var(--badge-color, var(--hairline));
  color: var(--badge-color, var(--text-dim));
  background: color-mix(in srgb, var(--badge-color, var(--text-dim)) 14%, transparent);
}
/* Badge clicável (ex.: link pro NPC-chefe em tecnologia.php) */
a.entity-badge{
  text-decoration:none;
  transition: background .15s ease, border-color .15s ease;
}
a.entity-badge:hover{
  background: color-mix(in srgb, var(--badge-color, var(--text-dim)) 26%, transparent);
  border-color: var(--badge-color, var(--text-dim));
}

/* ---------- Coordenadas ---------- */
.coord-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:.75rem;
}
.coord-card{
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:.9rem 1rem;
}
.coord-card-label{
  font-family: var(--font-mono);
  font-size:.7rem;
  color: var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.4rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.coord-card-values{
  display:flex;
  gap:1rem;
  font-family: var(--font-mono);
  font-size:.92rem;
}
.coord-card-values span b{ color: var(--accent); display:block; font-size:.65rem; font-weight:600; text-transform:uppercase; }
.coord-empty{
  color: var(--text-dim);
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}

/* ---------- Lista de itens de loja / recompensas ---------- */
.shop-item-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.shop-item-row{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.6rem .75rem;
  border-radius:10px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  text-decoration:none;
  color:inherit;
  transition: border-color .15s ease, background .15s ease;
}
.shop-item-row:hover{ border-color: var(--accent-line); background: var(--panel); color:inherit; }
.shop-item-icon{
  width:40px; height:40px;
  border-radius:8px;
  object-fit:contain;
  background: var(--panel);
  border:1px solid var(--hairline);
  flex-shrink:0;
  padding:4px;
}
.shop-item-icon.is-round{ border-radius:50%; }
.shop-item-name{ flex:1; min-width:0; font-size:.92rem; }
.shop-item-price{
  font-family: var(--font-mono);
  font-size:.82rem;
  color: var(--gold);
  display:flex;
  align-items:center;
  gap:.3rem;
  white-space:nowrap;
}
.shop-item-stock{
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--text-dim);
  white-space:nowrap;
}

/* ---------- Objetivos de missão ---------- */
.quest-objective-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.quest-objective{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.75rem .9rem;
  border-radius:10px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
}
.quest-objective-num{
  font-family: var(--font-mono);
  font-size:.78rem;
  color: var(--accent);
  border:1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius:50%;
  width:24px; height:24px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.quest-objective-body{ flex:1; min-width:0; }
.quest-objective-text{ font-size:.92rem; color: var(--text); margin:0 0 .35rem; }
.quest-objective-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  font-size:.78rem;
}
.quest-objective-meta a{ color: var(--accent); text-decoration:none; }
.quest-objective-meta a:hover{ text-decoration:underline; }
.quest-objective-tag{
  font-family: var(--font-mono);
  color: var(--text-dim);
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:.15em .5em;
}

.quest-reward-list{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.quest-reward-card{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .75rem;
  border-radius:10px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  text-decoration:none;
  color:inherit;
  transition: border-color .15s ease;
}
.quest-reward-card:hover{ border-color: var(--accent-line); color:inherit; }
.quest-reward-qty{
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--gold);
  font-weight:600;
}

/* ---------- Chip "disponível na loja" / "recompensa de missão" no item.php ---------- */
.cross-link-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.cross-link-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.6rem .85rem;
  border-radius:10px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  text-decoration:none;
  color:inherit;
  transition: border-color .15s ease, background .15s ease;
}
.cross-link-row:hover{ border-color: var(--accent-line); background: var(--panel); color:inherit; }
.cross-link-row-label{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; min-width:0; }
.cross-link-row-label i{ color: var(--accent); font-size:1.1rem; flex-shrink:0; }
.cross-link-row-extra{
  font-family: var(--font-mono);
  font-size:.78rem;
  color: var(--text-dim);
  white-space:nowrap;
}