/* gerador-de-builds.css -- Gerador de Builds (página standalone e modal do Montador de Times).
   Usa as variáveis de codex.css (ametista, dourado, painéis escuros) e as classes .skill-badge. */

/* ---------- Hero ---------- */
.gb-hero{
  position:relative; text-align:center; overflow:hidden;
  padding:2.2rem 1.2rem 2rem; margin-bottom:1.6rem;
  border:1px solid var(--hairline); border-radius:18px;
  background:
    radial-gradient(ellipse 70% 120% at 50% -30%, rgba(157,124,240,.28), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}
.gb-hero::after{
  content:''; position:absolute; inset:auto 15% 0 15%; height:1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.gb-hero h1{ margin:.5rem 0 .6rem; font-family: var(--font-display); font-size:clamp(2rem, 5vw, 3rem); color: var(--text-bright); }
.gb-hero h1 em{ color: var(--accent); font-style:italic; }
.gb-hero p{ max-width:640px; margin:0 auto; color: var(--text-dim); }
.gb-hero-selo{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold); background: var(--gold-soft); border:1px solid rgba(203,168,106,.35);
  border-radius:999px; padding:.25rem .8rem;
}

/* ---------- Estrutura ---------- */
.gb{ display:flex; flex-direction:column; gap:1rem; }
.gb-secao{
  background: var(--panel); border:1px solid var(--hairline); border-radius:14px;
  padding:1rem 1.15rem; min-width:0;
}
.gb-rotulo{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  margin-bottom:.7rem;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim);
}
.gb-rotulo small{ text-transform:none; letter-spacing:normal; font-weight:400; }
.gb-rotulo--sep{ margin-top:1.4rem; }
.gb-vazio{ color: var(--text-dim); font-size:.85rem; }

.gb-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--panel-2); border:1px solid var(--hairline); color: var(--text-bright);
  border-radius:8px; font-size:.8rem; font-weight:600; padding:.4rem .75rem; cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.gb-btn:hover{ border-color: var(--accent-line); background: var(--accent-soft); }
.gb-btn--mini{ padding:.15rem .55rem; font-size:.7rem; margin-left:auto; text-transform:none; letter-spacing:normal; }

/* ---------- Pal ---------- */
.gb-pal{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.gb-pal-img{ width:64px; height:64px; object-fit:contain; filter: drop-shadow(0 6px 14px rgba(157,124,240,.35)); }
.gb-pal-info{ flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.gb-pal-info strong{ color: var(--text-bright); font-family: var(--font-display); font-size:1.35rem; }
.gb-pal-info span{ display:flex; align-items:center; gap:.35rem; color: var(--text-dim); font-size:.82rem; }
.gb-fixo{ color: var(--text-dim); font-size:.78rem; display:inline-flex; gap:.35rem; align-items:center; }

.gb-seletor{ margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--hairline); }
.gb-busca{
  width:100%; margin-bottom:.7rem;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:8px;
  color: var(--text-bright); padding:.5rem .7rem; font-size:.9rem;
}
.gb-busca:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gb-pal-grade{ display:grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap:.5rem; max-height:320px; overflow-y:auto; padding-right:.2rem; }
.gb-pal-item{
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  background: var(--panel-2); border:1px solid var(--hairline); border-bottom:3px solid var(--rarity-color, var(--hairline));
  border-radius:10px; padding:.5rem .3rem; color: var(--text); font-size:.72rem; cursor:pointer; min-width:0;
}
.gb-pal-item img{ width:48px; height:48px; object-fit:contain; }
.gb-pal-item span{ text-align:center; overflow-wrap:anywhere; }
.gb-pal-item:hover, .gb-pal-item.is-on{ border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Objetivos ---------- */
.gb-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.gb-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background: linear-gradient(180deg, var(--accent-soft), rgba(157,124,240,.06));
  border:1px solid var(--accent-line); border-radius:999px;
  padding:.3rem .4rem .3rem .8rem; color: var(--text-bright); font-size:.85rem; font-weight:600;
}
.gb-chip > i{ color: var(--accent); }
.gb-chip button{ background:none; border:0; color: var(--text-dim); padding:0 .35rem; cursor:pointer; }
.gb-chip button:hover{ color:#ff6b6b; }
.gb-chip--passiva{ background:transparent; border-color:transparent; padding:.1rem .2rem .1rem .1rem; }
.gb-chip--excluida .skill-badge{ opacity:.7; text-decoration:line-through; }
.gb-prio{
  background: var(--panel); border:1px solid var(--accent-line); border-radius:999px;
  color: var(--accent); font-size:.72rem; padding:.1rem .4rem; cursor:pointer;
}
.gb-objs{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:.6rem; margin-top:.9rem; }
.gb-obj{
  display:flex; align-items:flex-start; gap:.7rem; text-align:left;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:10px;
  padding:.65rem .8rem; color: var(--text); cursor:pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.gb-obj:hover{ border-color: var(--accent); transform: translateY(-1px); }
.gb-obj > i{ color: var(--accent); font-size:1.15rem; margin-top:.1rem; }
.gb-obj b{ display:block; color: var(--text-bright); font-size:.88rem; }
.gb-obj small{ color: var(--text-dim); font-size:.74rem; line-height:1.3; }

/* ---------- Lista de passivas (seletor) ---------- */
.gb-lista{ display:flex; flex-direction:column; gap:.35rem; max-height:340px; overflow-y:auto; padding-right:.2rem; }
.gb-lista-item{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; width:100%; text-align:left;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:8px;
  padding:.45rem .65rem; color: var(--text); cursor:pointer;
}
.gb-lista-item:hover{ border-color: var(--accent-line); }
.gb-lista-item.is-on{ border-color: var(--accent); background: var(--accent-soft); }
.gb-lista-item.is-bloqueada{ opacity:.45; cursor:not-allowed; }
.gb-lista-item small{ flex:1 1 220px; color: var(--text-dim); white-space:pre-line; }
.gb-lista-item i.bi-check-lg{ margin-left:auto; color: var(--accent); }

/* ---------- Resultados ---------- */
.gb-aviso{
  display:flex; align-items:center; gap:.7rem; padding:1.6rem 1rem; justify-content:center;
  color: var(--text-dim); border:1px dashed var(--hairline); border-radius:12px;
}
.gb-aviso i{ font-size:1.3rem; color: var(--accent); }
.gb-grade{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:1rem; }
.gb-card{
  position:relative; display:flex; flex-direction:column; gap:.7rem; min-width:0;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--hairline); border-radius:14px; padding:1rem 1.1rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gb-card--destaque{ border-color: var(--accent-line); box-shadow: 0 10px 30px -18px rgba(157,124,240,.55); }
.gb-card--destaque::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px; border-radius:14px 14px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
.gb-card.is-clicavel{ cursor:pointer; }
.gb-card:hover{ border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 34px -16px rgba(157,124,240,.6); }
.gb-card-topo{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.gb-card-titulo{ font-family: var(--font-display); font-size:1.3rem; color: var(--text-bright); }
.gb-card--destaque .gb-card-titulo{ color: var(--gold); }
.gb-selo{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.68rem; font-weight:600;
  color: var(--text-green-bright); background: rgba(80,200,120,.1); border:1px solid rgba(80,200,120,.3);
  border-radius:999px; padding:.1rem .5rem;
}
.gb-card-nota{ margin:0; font-size:.78rem; color: var(--text-dim); }
.gb-skills{ display:flex; flex-wrap:wrap; gap:.4rem; }
.gb-totais{ display:flex; flex-wrap:wrap; gap:.35rem; }
.gb-total{
  font-size:.74rem; padding:.15rem .5rem; border-radius:6px;
  background: var(--panel); border:1px solid var(--hairline); color: var(--text);
}
.gb-total b{ font-variant-numeric: tabular-nums; }
.gb-total.is-bom b{ color: var(--text-green-bright); }
.gb-total.is-ruim b{ color: var(--text-red-bright); }
.gb-previa{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:.4rem;
  padding-top:.7rem; border-top:1px solid var(--hairline);
  font-size:.82rem; color: var(--text-bright); font-variant-numeric: tabular-nums;
}
.gb-previa i{ color: var(--accent); margin-right:.25rem; }
.gb-usar{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: linear-gradient(180deg, var(--accent), #7f5fd6);
  border:0; border-radius:10px; color:#0a0d14; font-weight:700; font-size:.88rem;
  padding:.6rem 1rem; cursor:pointer;
  transition: filter .15s ease, transform .15s ease;
}
.gb-usar:hover{ filter: brightness(1.12); transform: translateY(-1px); }

/* ---------- Modal do Montador ---------- */
.gb-modal .modal-body{ padding-top:.5rem; }
.gb-modal .gb-secao{ background: var(--panel-2); }
.gb-modal .gb-grade{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 560px){
  .gb-hero{ padding:1.6rem 1rem; }
  .gb-grade{ grid-template-columns:1fr; }
  .gb-objs{ grid-template-columns:1fr; }
  .gb-previa{ grid-template-columns: repeat(2, 1fr); }
}