/* breeding-calc.css — depende de codex.css e pals-list.css.
   Estilos compartilhados pelas 3 calculadoras de reprodução:
   calculadora-simples.php, calculadora-inversa.php, caminho-de-breeding.php */

/* ---------- Links de navegação entre as 3 calculadoras ---------- */
.breeding-calc-actions{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.breeding-calc-action-btn{
  display:flex;
  align-items:center;
  gap:1rem;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  text-decoration:none;
  color: var(--text);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.breeding-calc-action-btn:hover{
  border-color: var(--accent-line);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.5);
  color: inherit;
}
.breeding-calc-action-btn-icon{
  width:48px; height:48px;
  border-radius:12px;
  background: var(--accent-soft);
  border:1px solid var(--accent-line);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.breeding-calc-action-btn-icon i{
  font-size:1.35rem;
  color: var(--accent);
}
.breeding-calc-action-btn-text{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  min-width:0;
}
.breeding-calc-action-btn-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color: var(--text-bright);
  line-height:1.2;
}
.breeding-calc-action-btn-desc{
  font-weight:400;
  color: var(--text-dim);
  font-size:.8rem;
  line-height:1.4;
}

/* ---------- Slots de Genitor + Genitor = Resultado (calculadora simples) ---------- */
.breeding-slots{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap: 1.25rem;
  flex-wrap:wrap;
  margin-bottom: 1.75rem;
}
/* ---------- Sticky: os slots grudam abaixo da navbar ao rolar para
   baixo, e voltam ao estado normal ao rolar de volta para cima (ver
   .is-stuck / calculadora-simples.js). --site-nav-height é a mesma
   altura usada em .site-nav-spacer (codex.css) -- se a navbar mudar de
   altura, só essa variável precisa ser ajustada. */
:root{ --site-nav-height: 78px; }
.breeding-slots-sticky-wrap{
  position: sticky;
  top: var(--site-nav-height);
  z-index: 40; /* abaixo do .site-nav (z-index:50), acima do grid de Pals */
  background: var(--bg);
  padding-top: 1.5rem;
  margin-top: -1.5rem; /* compensa o padding-top, mantém o espaçamento visual original quando não-stuck */
  transition: padding .18s ease, box-shadow .18s ease;
}
.breeding-slots-sticky-wrap.is-stuck{
  padding-top: .6rem;
  padding-bottom: .6rem;
  box-shadow: 0 12px 24px -18px rgba(0,0,0,.65);
  border-bottom: 1px solid var(--hairline);
}
/* Estado compacto: encolhe os slots (150px é grande demais colado na
   navbar) e comprime as margens internas, sem remover nenhum elemento —
   só reduz tamanho/gap, então nada de JS extra é necessário para isso. */
.breeding-slots-sticky-wrap.is-stuck .breeding-slots{
  gap:.6rem;
  margin-bottom: 0;
}
.breeding-slots-sticky-wrap.is-stuck .breeding-slot{
  width:64px; height:64px;
  border-radius:12px;
  padding:.35rem;
  gap:.15rem;
}
.breeding-slots-sticky-wrap.is-stuck .breeding-slot-portrait{
  width:32px; height:32px;
}
.breeding-slots-sticky-wrap.is-stuck .breeding-slot-name{
  font-size:.68rem;
  line-height:1.15;
}
.breeding-slots-sticky-wrap.is-stuck .breeding-slot-empty{
  font-size:.62rem;
}
.breeding-slots-sticky-wrap.is-stuck .breeding-slot-op{
  font-size:1.1rem;
}
/* Badge "Seleção atual" e botão "x" ficam grandes demais no modo
   compacto -- somem ali, mas continuam funcionando normalmente (clique
   na área do slot ainda funciona; só o visual de destaque/limpeza some
   temporariamente enquanto grudado). */
.breeding-slots-sticky-wrap.is-stuck .breeding-slot-active-badge,
.breeding-slots-sticky-wrap.is-stuck .breeding-slot-clear-one{
  display:none !important;
}
.breeding-slots-sticky-wrap.is-stuck .breeding-slots-actions{
  margin-bottom:0;
  margin-top:.4rem;
}
.breeding-slots--single{
  justify-content:flex-start;
}
.breeding-slot-wrap{
  position:relative;
}
.breeding-slot{
  width:150px; height:150px;
  border-radius:16px;
  border:2px dashed var(--hairline);
  background: var(--panel);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:1rem;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  text-align:center;
}
.breeding-slot:hover{ border-color: var(--accent-line); }
.breeding-slot.is-filled{
  border-style:solid;
  border-color: var(--accent-line);
  background: var(--panel-2);
}
/* Destaca com borda violeta + selo o slot (Genitor 1 / Genitor 2) que
   está recebendo a seleção no momento -- mesmo padrão visual usado no
   Path Finder para "PAL ALVO" / "PALS QUE VOCÊ POSSUI". */
.breeding-slot.is-active-mode{
  border-style:solid;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.breeding-slot-active-badge{
  position:absolute;
  top:-.65rem;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background: var(--accent);
  color:#0a0d14;
  font-family: var(--font-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius: 6px;
  padding:.2rem .5rem;
  box-shadow: 0 2px 8px rgba(157,124,240,.35);
  white-space:nowrap;
}
.breeding-slot-active-badge i{ font-size:.62rem; }
/* Na Calculadora Inversa, uma vez que o Pal já foi escolhido, o convite
   "Seleção atual" deixou de fazer sentido -- some junto com a borda
   violeta, sobra só o dourado de "preenchido". Não afeta os slots de
   Genitor 1/2 da calculadora simples, que não têm a classe is-filled
   nesse elemento irmão específico com esse seletor. */
.breeding-slot-result.is-filled + .breeding-slot-active-badge{
  display:none;
}
.breeding-slot-result{
  border-color: var(--gold);
  cursor:default;
}
.breeding-slot-result.is-filled{
  border-style:solid;
  background: var(--gold-soft);
}
/* Na Calculadora Inversa, o único slot também é um breeding-slot-result
   (visualmente "dourado" por padrão) -- mas antes de qualquer Pal ser
   escolhido queremos o destaque violeta de "seleção atual" (mesmo
   convite visual usado nos outros slots), então essa regra mais
   específica vence sobre a cor dourada enquanto ainda está vazio. */
.breeding-slot-result.is-active-mode:not(.is-filled){
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.breeding-slot-empty{
  color: var(--text-dim);
  font-size:.85rem;
  line-height:1.4;
}
.breeding-slot-portrait{
  width:64px; height:64px;
  border-radius:50%;
  object-fit:cover;
  background: var(--panel-2);
  border:2px solid var(--panel);
}
.breeding-slot-name{
  font-family: var(--font-display);
  font-weight:700;
  font-size:.95rem;
  color: var(--text-bright);
}
.breeding-slot-op{
  font-family: var(--font-display);
  font-size:1.8rem;
  color: var(--text-dim);
  flex-shrink:0;
  align-self:center;
}

/* "x" pequeno pra limpar um único slot -- só aparece (via JS,
   removendo d-none) quando aquele slot já tem um Pal selecionado. */
.breeding-slot-clear-one{
  position:absolute;
  top:-.5rem;
  right:-.5rem;
  width:24px; height:24px;
  border-radius:50%;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  color: var(--text-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.65rem;
  cursor:pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.breeding-slot-clear-one:hover{
  color:#fff;
  border-color:#ff6a6a;
  background:#ff6a6a;
}

/* Botão "Limpar seleção" geral, abaixo dos slots -- só aparece quando
   pelo menos um genitor está selecionado. */
.breeding-slots-actions{
  display:flex;
  justify-content:center;
  margin-bottom: 1.75rem;
}
.breeding-clear-all{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:transparent;
  border:1px solid var(--hairline);
  color: var(--text-dim);
  border-radius: 20px;
  padding: .4rem 1rem;
  font-size:.8rem;
  cursor:pointer;
  transition: color .15s ease, border-color .15s ease;
}
.breeding-clear-all:hover{
  color: var(--text-bright);
  border-color: var(--accent-line);
}

/* ---------- Grid compacto (usado nas colunas laterais das calc. 2 e 3) ---------- */
.pal-grid--compact{
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap:.75rem;
  max-height: 640px;
  overflow-y:auto;
  padding-right:.25rem;
}
.pal-card--compact{
  padding: .8rem .7rem .9rem;
}
.pal-card--compact .pal-card-portrait-wrap{ width:52px; height:52px; margin:.2rem 0 .55rem; }
.pal-card--compact .pal-card-name{ font-size:.88rem; }
.pal-card--compact .pal-card-rarity{ font-size:.62rem; }
.pal-card.is-selected-alvo{
  outline: 2px solid var(--gold);
  outline-offset:2px;
}
.pal-card.is-selected-owned{
  outline: 2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- Calculadora Inversa: abas + linhas de resultado ---------- */
.reverse-results{
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius: 12px;
  padding: 1.25rem;
  min-height: 300px;
}
.reverse-results-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--text-dim);
  padding: 3rem 1rem;
  gap:.75rem;
}
.reverse-results-empty i{ font-size:1.8rem; color: var(--accent); }

.reverse-tabs{
  display:flex;
  gap:.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
.reverse-tab{
  background:transparent;
  border:none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size:.9rem;
  font-weight:600;
  padding: .6rem .3rem;
  cursor:pointer;
  transition: color .15s ease, border-color .15s ease;
}
.reverse-tab span{ font-weight:400; color: var(--text-dim); font-size:.8rem; }
.reverse-tab:hover{ color: var(--text-bright); }
.reverse-tab.active{
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.reverse-result-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  max-height: 560px;
  overflow-y:auto;
}
.reverse-result-row{
  display:grid;
  /* Pal A | + | Pal B | = | Pal resultado -- larguras fixas pros
     separadores e coluna flexível pros Pals, assim tudo alinha
     verticalmente como numa tabela mesmo com nomes de tamanhos
     diferentes entre linhas. */
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:.6rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius: 10px;
  padding: .6rem .85rem;
}
.reverse-op{
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size:1.1rem;
  text-align:center;
}
.reverse-mini-pal{
  display:flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  color: var(--text);
  font-size:.85rem;
  min-width:0;
}
.reverse-mini-pal span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reverse-mini-pal:hover{ color: var(--text-bright); }
.reverse-mini-pal.is-highlighted{ color: var(--gold); }
.reverse-mini-portrait{
  width:34px; height:34px;
  border-radius:50%;
  object-fit:cover;
  background: var(--panel);
  border:2px solid var(--hairline);
  flex-shrink:0;
}
.reverse-mini-pal.is-highlighted .reverse-mini-portrait{ border-color: var(--gold); }
.reverse-mini-portrait--unknown{
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--text-dim);
  font-size:.85rem;
}

/* ---------- Path Finder (Caminho de Breeding) ---------- */
.path-finder-box{
  position:relative;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Destaca com borda violeta a seção (Pal Alvo / Pals que Possuo) pra
   onde o próximo clique na lista de Pals vai -- mesma cor de --accent
   usada nos chips ativos e no botão "Pals que Possuo" já selecionado. */
.path-finder-box.is-active-mode{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Selo "SELEÇÃO ATUAL" ancorado na borda superior da caixa ativa --
   mesmo estilo mono/uppercase dos demais labels do site, cor --accent.
   Só existe (via JS adicionando/removendo o elemento) na caixa que
   está recebendo a seleção no momento. */
.path-finder-box-active-badge{
  position:absolute;
  top:-.65rem;
  left:1rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background: var(--accent);
  color:#0a0d14;
  font-family: var(--font-mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius: 6px;
  padding:.2rem .55rem;
  box-shadow: 0 2px 8px rgba(157,124,240,.35);
}
.path-finder-box-active-badge i{ font-size:.65rem; }
.path-finder-box-label{
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--text-dim);
  margin-bottom:.75rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.path-finder-box-count{
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 20px;
  padding:.05rem .5rem;
  font-size:.72rem;
}
.path-finder-box-clear{
  margin-left:auto;
  background:transparent;
  border:1px solid var(--hairline);
  color: var(--text-dim);
  border-radius:8px;
  font-size:.7rem;
  padding:.2rem .55rem;
  text-transform:none;
  letter-spacing:normal;
  cursor:pointer;
}
.path-finder-box-clear:hover{ color: var(--text-bright); border-color: var(--accent-line); }

/* Botão "Compartilhar" -- vive dentro de PLANO DE REPRODUÇÃO, mesmo
   padrão visual do botão "Limpar" mas com destaque em --accent (é uma
   ação positiva, não destrutiva). */
.path-finder-share-btn{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background: var(--accent-soft);
  border:1px solid var(--accent-line);
  color: var(--accent);
  border-radius:8px;
  font-size:.72rem;
  font-weight:600;
  padding:.3rem .65rem;
  text-transform:none;
  letter-spacing:normal;
  cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.path-finder-share-btn:hover{
  background: var(--accent);
  color:#0a0d14;
}
.path-finder-share-btn:disabled{
  opacity:.6;
  cursor:default;
}

/* Campo de link compartilhável + botão de copiar, exibidos depois de
   clicar em "Compartilhar" -- mesmo padrão visual dos outros inputs do
   site (fundo --panel-2, borda --hairline). */
.path-finder-share-box{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin: -.5rem 0 1.25rem;
}
.path-finder-share-input{
  flex:1;
  min-width:0;
  background: var(--panel-2);
  border:1px solid var(--accent-line);
  color: var(--text-bright);
  border-radius: 8px;
  padding: .5rem .75rem;
  font-family: var(--font-mono);
  font-size:.8rem;
}
.path-finder-share-input:focus{
  outline:none;
  box-shadow: 0 0 0 .2rem var(--accent-soft);
}
.path-finder-share-copy-btn{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:8px;
  border:1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.path-finder-share-copy-btn:hover{
  background: var(--accent);
  color:#0a0d14;
}

.path-finder-target{
  width:100%;
  height:110px;
  margin:0;
}
.path-finder-owned{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  min-height: 46px;
  align-items:center;
  max-height: 640px;
  overflow-y:auto;
}
.path-finder-owned-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius: 20px;
  padding:.3rem .5rem .3rem .3rem;
  font-size:.8rem;
  color: var(--text);
  cursor:pointer;
  transition: border-color .15s ease;
}
.path-finder-owned-chip:hover{ border-color: #ff6a6a; color: var(--text-bright); }
.path-finder-owned-chip img{
  width:24px; height:24px;
  border-radius:50%;
  object-fit:cover;
  background: var(--panel);
}
.path-finder-owned-chip i{ font-size:.65rem; color: var(--text-dim); }

.path-finder-adding-to{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top:1px solid var(--hairline);
  font-size:.78rem;
  color: var(--text-dim);
  flex-wrap:wrap;
}
.path-finder-mode-btn{
  background: var(--panel-2);
  border:1px solid var(--hairline);
  color: var(--text);
  border-radius: 20px;
  padding:.3rem .8rem;
  font-size:.78rem;
  cursor:pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.path-finder-mode-btn:hover{ border-color: var(--accent-line); }
.path-finder-mode-btn.active{
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight:600;
}

.path-finder-plan{
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius: 12px;
  padding: 1.25rem;
  min-height: 300px;
}
.path-finder-plan-summary{
  color: var(--text);
  font-size:.9rem;
  margin-bottom: 1.25rem;
}
.path-finder-plan-summary strong{ color: var(--text-bright); }
.path-finder-warning{
  display:flex;
  align-items:center;
  gap:.6rem;
  background: rgba(240,208,74,.1);
  border:1px solid rgba(240,208,74,.35);
  color: #f0d84a;
  border-radius: 10px;
  padding: .7rem .9rem;
  font-size:.85rem;
  margin-bottom: 1.1rem;
}
.path-finder-steps{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.path-finder-step{
  display:grid;
  /* Nº do passo | Pal A | + | Pal B | = | Pal resultado */
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:.6rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius: 10px;
  padding: .65rem .9rem;
}
.path-finder-step-num{
  width:26px; height:26px;
  border-radius:50%;
  background: var(--accent-soft);
  border:1px solid var(--accent-line);
  color: var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-mono);
  font-size:.75rem;
  font-weight:700;
  flex-shrink:0;
}
.path-finder-plan-note{
  color: var(--text-dim);
  font-size:.75rem;
  margin-top: 1rem;
  margin-bottom:0;
}

/* ---------- Sugestões de rotas alternativas (Path Finder) ---------- */
.path-finder-suggestions{
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}
.path-finder-suggestions-label{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family: var(--font-mono);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--text-dim);
  margin-bottom:.75rem;
}
.path-finder-suggestions-label i{ color: var(--gold); }

.path-finder-suggestion{
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius: 10px;
  margin-bottom:.6rem;
  overflow:hidden;
}
.path-finder-suggestion.is-expanded{ border-color: var(--accent-line); }

.path-finder-suggestion-toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:.65rem;
  background:transparent;
  border:none;
  padding: .65rem .9rem;
  cursor:pointer;
  text-align:left;
}
.path-finder-suggestion-portrait{
  width:32px; height:32px;
  border-radius:50%;
  object-fit:cover;
  background: var(--panel);
  border:2px solid var(--hairline);
  flex-shrink:0;
}
.path-finder-suggestion-text{
  flex:1;
  min-width:0;
  color: var(--text);
  font-size:.85rem;
}
.path-finder-suggestion-count{
  color: var(--text-dim);
  font-size:.78rem;
}
.path-finder-suggestion-chevron{
  color: var(--text-dim);
  font-size:.8rem;
  transition: transform .15s ease;
  flex-shrink:0;
}
.path-finder-suggestion.is-expanded .path-finder-suggestion-chevron{
  transform: rotate(180deg);
}
.path-finder-suggestion-steps{
  padding: 0 .9rem .8rem;
}
.path-finder-suggestion-steps .path-finder-steps{
  gap:.4rem;
}
.path-finder-suggestion-steps .path-finder-step{
  padding: .5rem .7rem;
}

@media (max-width: 767.98px){
  .breeding-slots{ gap:.75rem; }
  .breeding-slot{ width:110px; height:110px; }
  .breeding-slots-sticky-wrap.is-stuck .breeding-slot{ width:52px; height:52px; }
  .breeding-slots-sticky-wrap.is-stuck .breeding-slot-portrait{ width:26px; height:26px; }
  .pal-grid--compact{ max-height: 420px; }

  /* Em telas estreitas, 5-6 colunas lado a lado ficam apertadas demais --
     empilha cada linha verticalmente, mas mantém os pares Pal+operador
     juntos (grid interno de 2 colunas: ícone/nome | operador). */
  .reverse-result-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "pal-a pal-a"
      "op1 op1"
      "pal-b pal-b"
      "op2 op2"
      "pal-c pal-c";
  }
  .reverse-result-row > .reverse-mini-pal:nth-child(1){ grid-area: pal-a; }
  .reverse-result-row > .reverse-op:nth-child(2){ grid-area: op1; }
  .reverse-result-row > .reverse-mini-pal:nth-child(3){ grid-area: pal-b; }
  .reverse-result-row > .reverse-op:nth-child(4){ grid-area: op2; }
  .reverse-result-row > .reverse-mini-pal:nth-child(5){ grid-area: pal-c; }

  .path-finder-step{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "num num"
      "pal-a pal-a"
      "op1 op1"
      "pal-b pal-b"
      "op2 op2"
      "pal-c pal-c";
  }
  .path-finder-step > .path-finder-step-num{ grid-area: num; justify-self:start; }
  .path-finder-step > .reverse-mini-pal:nth-child(2){ grid-area: pal-a; }
  .path-finder-step > .reverse-op:nth-child(3){ grid-area: op1; }
  .path-finder-step > .reverse-mini-pal:nth-child(4){ grid-area: pal-b; }
  .path-finder-step > .reverse-op:nth-child(5){ grid-area: op2; }
  .path-finder-step > .reverse-mini-pal:nth-child(6){ grid-area: pal-c; }
}