/* fazenda-de-criacao-drops.css -- página /estrutura/fazenda-de-criacao/drops. Depende de codex.css,
   pals-list.css (cabeçalho, busca, vazio) e elemento-badge.css. Tom da página: verde de pasto e trigo. */
.fz-pagina{
  --fz-campo: #8fcf7c;
  --fz-campo-soft: rgba(143,207,124,.13);
  --fz-campo-line: rgba(143,207,124,.38);
  --fz-trigo: #e2c27c;
}

/* ---------- Trilha e topo ---------- */
.fz-trilha{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:1rem; font-size:.8rem; color: var(--text-dim); }
.fz-trilha a{ color: var(--text-dim); text-decoration:none; }
.fz-trilha a:hover{ color: var(--fz-campo); }
.fz-trilha i{ font-size:.65rem; opacity:.6; }
.fz-trilha span{ color: var(--text); }

.fz-hero{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem 2rem;
  margin-bottom:1.5rem; padding:1.6rem 1.8rem;
  border:1px solid var(--fz-campo-line); border-radius:20px;
  background:
    radial-gradient(90% 140% at 0% 0%, var(--fz-campo-soft), transparent 60%),
    radial-gradient(70% 120% at 100% 100%, rgba(226,194,124,.09), transparent 60%),
    var(--panel);
}
.fz-hero-texto{ text-align:left; margin:0; flex:1 1 380px; }
.fz-hero-texto h1 em{ color: var(--fz-campo); }
.fz-hero-texto p{ max-width:60ch; }
.fz-resumo{ display:flex; gap:.6rem; margin:0; }
.fz-resumo div{
  min-width:5.2rem; padding:.6rem .9rem; text-align:center;
  background: rgba(10,13,20,.45); border:1px solid var(--hairline); border-radius:14px;
}
.fz-resumo dt, .fz-rotulo, .fz-card-numero, .fz-card-aptidao small, .fz-tabela thead th{
  font-family: var(--font-mono); font-size:.64rem; font-weight:500; text-transform:uppercase; letter-spacing:.07em; color: var(--text-dim);
}
.fz-resumo dd{ margin:.15rem 0 0; font-family: var(--font-display); font-weight:700; font-size:1.7rem; line-height:1; color: var(--fz-trigo); font-variant-numeric: tabular-nums; }

/* ---------- Ferramentas ---------- */
.fz-ferramentas{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:1.25rem; }
.fz-botao{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid var(--fz-campo-line); border-radius:999px;
  background: linear-gradient(135deg, rgba(143,207,124,.18), rgba(143,207,124,.04));
  color: var(--fz-campo); padding:.55rem 1.1rem; font-size:.85rem; font-weight:600;
  transition: background .15s, border-color .15s;
}
.fz-botao:hover{ background: var(--fz-campo-soft); border-color: var(--fz-campo); }
.fz-botao:focus-visible, .fz-chip:focus-visible{ outline:2px solid var(--fz-campo); outline-offset:2px; }
.fz-busca{ margin-left:auto; max-width:380px; }
.fz-busca input:focus{ border-color: var(--fz-campo-line); box-shadow: 0 0 0 .2rem var(--fz-campo-soft); }

/* ---------- Índice de itens ---------- */
.fz-indice{ margin-bottom:1.5rem; }
.fz-rotulo{ margin:0 0 .6rem; }
.fz-rotulo small{ text-transform:none; letter-spacing:0; opacity:.7; margin-left:.35rem; }
.fz-indice-lista{ display:flex; flex-wrap:wrap; gap:.4rem; }
.fz-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.3rem .65rem .3rem .35rem; border-radius:999px;
  background: var(--panel-2); border:1px solid var(--hairline); color: var(--text);
  font-size:.8rem; transition: border-color .15s, background .15s, color .15s;
}
.fz-chip img{ width:24px; height:24px; object-fit:contain; border-radius:50%; background: rgba(10,13,20,.5); padding:2px; }
.fz-chip b{ font-family: var(--font-mono); font-size:.68rem; font-weight:500; color: var(--text-dim); }
.fz-chip:hover{ border-color: color-mix(in srgb, var(--item-cor) 60%, transparent); color: var(--text-bright); }
.fz-chip.is-active{ border-color: var(--fz-campo); background: var(--fz-campo-soft); color: var(--text-bright); }
.fz-chip.is-active b{ color: var(--fz-campo); }

.fz-contagem{ margin:0 0 .75rem; font-size:.82rem; color: var(--fz-campo); min-height:1em; }
.fz-contagem:empty{ display:none; }

/* ---------- Cards ---------- */
.fz-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1rem; }
.fz-card{
  display:flex; flex-direction:column; gap:.85rem; min-width:0;
  padding:1.1rem 1.2rem 1.2rem;
  background: var(--panel); border:1px solid var(--hairline); border-radius:18px;
  transition: border-color .2s, box-shadow .2s;
}
.fz-card:hover{ border-color: var(--fz-campo-line); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.fz-card[hidden]{ display:none; }

.fz-card-topo{ display:flex; align-items:center; gap:.85rem; }
.fz-card-retrato{ line-height:0; flex-shrink:0; }
.fz-card-retrato img{
  width:60px; height:60px; border-radius:14px; object-fit:cover; background: var(--panel-2);
  border:1px solid var(--rarity-color, var(--hairline));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rarity-color) 14%, transparent);
}
.fz-card-id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.fz-card-nome{ margin:0; font-family: var(--font-display); font-weight:700; font-size:1.3rem; line-height:1.1; }
.fz-card-nome a{ color: var(--text-bright); text-decoration:none; }
.fz-card-nome a:hover{ color: var(--fz-campo); }
.fz-card-elementos{ display:flex; flex-wrap:wrap; gap:.3rem; }
.fz-card-aptidao{
  display:flex; align-items:center; gap:.45rem; flex-shrink:0; cursor:help;
  padding:.35rem .7rem .35rem .45rem; border-radius:12px;
  background: var(--fz-campo-soft); border:1px solid var(--fz-campo-line);
}
.fz-card-aptidao img{ width:22px; height:22px; }
.fz-card-aptidao span{ display:flex; flex-direction:column; line-height:1.15; }
.fz-card-aptidao b{ font-size:.95rem; color: var(--fz-campo); font-variant-numeric: tabular-nums; }

.fz-card-pool{ margin:0; font-size:.82rem; color: var(--text-dim); }
.fz-card-pool i{ color: var(--fz-trigo); margin-right:.2rem; }
.fz-card-pool b{ color: var(--text); font-weight:600; }

/* ---------- Tabela por nível ---------- */
.fz-tabela-wrap{ overflow-x:auto; border:1px solid var(--hairline); border-radius:12px; background: var(--panel-2); }
.fz-tabela{ width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric: tabular-nums; }
.fz-tabela th, .fz-tabela td{ padding:.45rem .12rem; text-align:center; border-bottom:1px solid var(--hairline); }
.fz-tabela tbody tr:last-child > *{ border-bottom:0; }
.fz-tabela thead th{ padding-top:.55rem; padding-bottom:.5rem; background: rgba(10,13,20,.35); }
.fz-tabela .fz-col-item{
  position:sticky; left:0; z-index:1; text-align:left; min-width:6.5rem; max-width:9rem; padding-left:.6rem;
  background: var(--panel-2); border-right:1px solid var(--hairline);
}
.fz-tabela thead .fz-col-item{ background: #12161f; }
.fz-col-item a{ display:flex; align-items:center; gap:.5rem; color: var(--text-bright); text-decoration:none; font-size:.84rem; font-weight:600; line-height:1.2; }
.fz-col-item a:hover span{ color: var(--fz-campo); }
.fz-col-item img{
  width:28px; height:28px; flex-shrink:0; object-fit:contain; padding:2px; border-radius:8px;
  background: rgba(10,13,20,.55); border:1px solid color-mix(in srgb, var(--item-cor) 45%, transparent);
}
.fz-tabela td{ min-width:2.1rem; font-size:.8rem; color: var(--text-bright); cursor:default; }
.fz-tabela td b{ display:block; font-weight:600; }
.fz-tabela td small{ display:block; font-size:.63rem; color: var(--fz-trigo); margin-top:.1rem; }
.fz-tabela td.fz-vazio{ color: var(--text-dim); opacity:.45; }
/* Listras verticais: níveis pares com faixa clara. Vai em background-image para somar com o hover e o destaque
   da busca (background-color); a coluna do nível base mantém a própria cor. */
.fz-tabela tr > :nth-child(odd):not(.fz-col-item):not(.is-base){
  background-image: linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045));
}
.fz-tabela tbody tr:hover > *{ background-color: rgba(143,207,124,.05); }
.fz-tabela tbody tr:hover > .fz-col-item{ background-color: #1a2029; }

/* Nível base da espécie: coluna com faixa verde. */
.fz-tabela .is-base{ background: var(--fz-campo-soft); }
.fz-tabela thead th.is-base{ color: var(--fz-campo); box-shadow: inset 0 2px 0 var(--fz-campo); }

/* Linha do item buscado. */
.fz-tabela tr.is-match > *{ background-color: rgba(226,194,124,.1); }
.fz-tabela tr.is-match > .fz-col-item{ background-color: #231f18; box-shadow: inset 3px 0 0 var(--fz-trigo); }

/* ---------- Modal ---------- */
.fz-modal{ background: var(--panel); color: var(--text); border:1px solid var(--hairline); }
.fz-modal .modal-header{ border-bottom-color: var(--hairline); }
.fz-modal .modal-title{ font-family: var(--font-display); font-weight:700; color: var(--text-bright); }
.fz-modal .modal-title i{ margin-right:.35rem; color: var(--fz-campo); }
.fz-modal .modal-body{ font-size:.9rem; line-height:1.6; }
.fz-modal h6{ margin:1.4rem 0 .5rem; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--fz-campo); }
.fz-modal a{ color: var(--fz-campo); }
.fz-modal ul, .fz-modal ol{ padding-left:1.2rem; display:flex; flex-direction:column; gap:.35rem; }
.fz-modal-lead{ color: var(--text-bright); }

/* ---------- Responsivo ---------- */
@media (max-width: 1199px){
  .fz-grid{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px){
  .fz-hero{ padding:1.2rem; }
  .fz-hero-texto h1{ font-size:1.9rem; }
  .fz-resumo{ width:100%; }
  .fz-resumo div{ flex:1; min-width:0; }
  .fz-busca{ margin-left:0; max-width:none; }
  .fz-card{ padding:.95rem; }
  .fz-card-topo{ flex-wrap:wrap; }
  .fz-card-aptidao{ order:3; }
  .fz-tabela .fz-col-item{ min-width:7.5rem; }
  .fz-col-item a{ font-size:.78rem; }
}