/* mutacao.css: calculadoras de Mutação e Mutação Inversa, o bloco "Como funciona"
   e o selo de Pal mutante usado nas demais calculadoras. */

.mutacao-icone{ width:22px; height:22px; object-fit:contain; vertical-align:-5px; }
.mutacao-icone--grande{ width:56px; height:56px; }
.breeding-calc-action-btn-icon .mutacao-icone{ width:26px; height:26px; vertical-align:middle; }

/* Selo no canto do retrato de um Pal mutante. */
.mutacao-selo{
  position:absolute; right:-6px; top:-6px; width:22px; height:22px; object-fit:contain;
  background: rgba(10,13,20,.85); border:1px solid #ff3a3a; border-radius:50%; padding:2px;
}
.mutacao-selo--inline{ position:static; display:inline-block; vertical-align:-6px; margin-right:.35rem; }

/* ---------- Calculadora de Mutação ---------- */
.mutacao-resultado{ margin:1.25rem 0 1.5rem; }
.mutacao-resultado-topo h2{ font-family: var(--font-display); font-size:1.4rem; color: var(--text-bright); margin:0 0 .35rem; }
.mutacao-resultado-topo p{ color: var(--text-dim); font-size:.85rem; margin:0 0 1rem; max-width:820px; }
.mutacao-vazio{ color: var(--text-dim); font-size:.88rem; }

.mutacao-lista{ display:flex; flex-direction:column; gap:.45rem; }
.mutacao-item{
  display:grid; grid-template-columns: 56px minmax(120px, 1.4fr) repeat(3, minmax(96px, 1fr)); gap:.9rem; align-items:center;
  background: var(--panel); border:1px solid var(--hairline); border-left:3px solid var(--rarity-color, var(--hairline));
  border-radius:12px; padding:.5rem .9rem;
}
.mutacao-item-retrato{ position:relative; width:48px; height:48px; }
.mutacao-item-retrato > img:first-child{ width:48px; height:48px; object-fit:contain; }
.mutacao-item-info{ display:flex; flex-direction:column; min-width:0; }
.mutacao-item-info b{ color: var(--text-bright); font-size:.95rem; overflow-wrap:anywhere; }
.mutacao-item-info small, .mutacao-item-num small{ color: var(--text-dim); font-size:.7rem; }
.mutacao-item-num{ display:flex; flex-direction:column; font-variant-numeric: tabular-nums; }
.mutacao-item-num b{ color: var(--gold); font-family: var(--font-mono); font-size:1rem; }

@media (max-width: 700px){
  .mutacao-item{ grid-template-columns: 56px 1fr 1fr; }
  .mutacao-item-info{ grid-column: 2 / 4; }
}

/* ---------- Calculadora de Mutação Inversa ---------- */
.mutacao-inversa-topo h2{ font-family: var(--font-display); font-size:1.4rem; color: var(--text-bright); margin:0 0 .35rem; }
.mutacao-inversa-topo p{ color: var(--text-dim); font-size:.85rem; }
.mutacao-subtitulo{ font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-dim); margin:1.25rem 0 .6rem; }
.mutacao-subtitulo small{ text-transform:none; letter-spacing:0; font-weight:500; }

.mutacao-mini{
  display:inline-flex; align-items:center; gap:.45rem; padding:.25rem .55rem .25rem .3rem; cursor:pointer;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:10px; font-size:.82rem; color: var(--text);
}
.mutacao-mini:hover, .mutacao-mini.is-ativo{ border-color: var(--accent-line); background: var(--accent-soft); color: var(--text-bright); }
.mutacao-mini-retrato{ width:34px; height:34px; object-fit:contain; }
.mutacao-parentes{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }

.mutacao-pares{ display:flex; flex-direction:column; gap:.4rem; }
.mutacao-par{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem;
  background: var(--panel); border:1px solid var(--hairline); border-radius:12px; padding:.5rem .8rem;
}
.mutacao-par .mutacao-mini{ cursor:default; background:transparent; border:0; padding:0; }
.mutacao-par-alvo{ font-weight:600; color: var(--text-bright); }
.mutacao-par-num{ display:flex; flex-direction:column; min-width:90px; font-variant-numeric: tabular-nums; }
.mutacao-par-alvo + .mutacao-par-num{ margin-left:auto; }
.mutacao-par-num small{ color: var(--text-dim); font-size:.68rem; }
.mutacao-par-num b{ color: var(--gold); font-family: var(--font-mono); font-size:.95rem; }

/* ---------- Bloco "Como funciona" ---------- */
.mutacao-info{ margin-top:2rem; }
.mutacao-info-corpo{ color: var(--text); font-size:.9rem; padding-top:.5rem; }
.mutacao-info-corpo ul{ padding-left:1.2rem; }
.mutacao-aviso{ background: var(--panel-2); border:1px solid var(--hairline); border-radius:10px; padding:.6rem .8rem; color: var(--text-dim); font-size:.82rem; }
.mutacao-aviso i{ color: var(--gold); margin-right:.3rem; }
.mutacao-passivas{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:.6rem; margin-bottom:1rem; }
.mutacao-passiva{ display:flex; flex-direction:column; gap:.3rem; background: var(--panel-2); border:1px solid var(--hairline); border-radius:10px; padding:.6rem .75rem; }
.mutacao-passiva-nome{ font-weight:700; color: var(--text-bright); }
.mutacao-passiva-desc{ color: var(--text-dim); font-size:.8rem; }
.mutacao-passiva-item{ font-size:.78rem; }
.mutacao-bolos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:.5rem; }
.mutacao-bolo{
  display:grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap:.6rem; align-items:center; text-decoration:none; color: var(--text);
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:10px; padding:.4rem .6rem;
}
.mutacao-bolo img{ grid-row: 1 / 3; width:40px; height:40px; object-fit:contain; }
.mutacao-bolo-nome{ color: var(--text-bright); font-size:.86rem; font-weight:600; }
.mutacao-bolo-bonus{ color: var(--text-dim); font-size:.74rem; }

/* Bloco de alternativa por mutação nas demais calculadoras. */
.mutacao-bloco{ background: var(--panel); border:1px solid #ff3a3a55; border-radius:14px; padding:1rem 1.1rem; margin:1.25rem 0; }
.mutacao-bloco h3{ font-family: var(--font-display); font-size:1.15rem; color: var(--text-bright); margin:0 0 .3rem; }
.mutacao-bloco > p{ color: var(--text-dim); font-size:.84rem; }

/* ---------- Guia das colunas de chance (details no topo das calculadoras) ---------- */
.mutacao-guia{
  margin:0 0 1.5rem; border-radius:16px; overflow:hidden; border:1px solid #ff3a3a55;
  background: linear-gradient(135deg, rgba(255,58,58,.10) 0%, var(--panel) 55%);
}
.mutacao-guia summary{
  display:flex; align-items:center; gap:.9rem; padding:.85rem 1.1rem; cursor:pointer; list-style:none;
}
.mutacao-guia summary::-webkit-details-marker{ display:none; }
.mutacao-guia summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.mutacao-guia-icone{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: rgba(10,13,20,.6); border:1px solid #ff3a3a88;
}
.mutacao-guia-icone img{ width:26px; height:26px; object-fit:contain; }
.mutacao-guia-titulo{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.mutacao-guia-titulo b{ font-family: var(--font-display); font-size:1.1rem; color: var(--text-bright); }
.mutacao-guia-titulo small{ color: var(--text-dim); font-size:.8rem; }
.mutacao-guia-seta{ flex:0 0 auto; color: var(--text-dim); transition: transform .2s ease; }
.mutacao-guia[open] .mutacao-guia-seta{ transform: rotate(180deg); }
.mutacao-guia[open] summary{ border-bottom:1px solid var(--hairline); }

.mutacao-guia-corpo{ padding:1rem 1.1rem 1.2rem; color: var(--text); font-size:.9rem; }
.mutacao-guia-intro{ margin:0 0 1rem; color: var(--text-dim); }
.mutacao-guia-grade{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:.8rem; }
.mutacao-guia-card{ background: var(--panel-2); border:1px solid var(--hairline); border-radius:12px; padding:.8rem .9rem; }
.mutacao-guia-card header{
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; margin-bottom:.55rem; padding-bottom:.5rem;
  border-bottom:1px solid var(--hairline);
}
.mutacao-guia-rotulo{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); }
.mutacao-guia-valor{ font-family: var(--font-mono); font-size:1.25rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.mutacao-guia-card ul, .mutacao-guia-notas ul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.35rem; }
.mutacao-guia-notas{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; margin-top:1rem; }
.mutacao-guia-notas h4{ font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); margin:0 0 .4rem; }
.mutacao-guia-notas p{ margin:0; }

@media (prefers-reduced-motion: reduce){ .mutacao-guia-seta{ transition:none; } }