/* ══════════════════════════════════════════════════════════════════
   A ESCOLHA DO ISEKAI — a janela que abre quando o Rei Demônio cai.

   Ela usa `dialog` + as classes `dialog__*` do jogo, então herda moldura,
   fundo e tipografia. Aqui entra só o que é dela: a NPC e os dois cartões
   de escolha.
   ══════════════════════════════════════════════════════════════════ */

.isk .isk__caixa {
  position: relative;
  max-width: 460px;
}

/*
 * 🚨 A NPC mora DENTRO da caixa, ao lado do título.
 *
 * A primeira versão a pendurava acima da borda com `position: absolute` e
 * `top: -104px`. Não funciona: o `dialog` do jogo RECORTA o que sai dele, então
 * ela aparecia cortada e ainda por cima do título. Visto na foto duas vezes —
 * a segunda tentativa só a subiu para ser cortada mais alto.
 */
.isk__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.isk__topo .dialog__title {
  margin: 0;
  text-align: left;
}

.isk__npc {
  flex: 0 0 auto;
  width: 52px;
  height: auto;
  filter: drop-shadow(0 3px 8px rgb(0 0 0 / 0.55));
  animation: isk-npc 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes isk-npc {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

.isk__fala {
  margin: 0 0 12px;
  color: var(--muted, #9fb0c4);
  font-size: var(--fs-300, 12px);
  line-height: 1.5;
}

.isk__opcoes {
  display: grid;
  gap: 8px;
}

.isk__op {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid rgb(255 255 255 / 0.09);
  border-radius: var(--r-md, 8px);
  background: rgb(0 0 0 / 0.3);
  color: var(--text, #e8eef6);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.isk__op strong {
  font-size: var(--fs-400, 14px);
}

.isk__op span {
  color: var(--muted, #9fb0c4);
  font-size: 11px;
  line-height: 1.45;
}

.isk__op:hover:not(:disabled) {
  border-color: rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.05);
}

.isk__op:focus-visible {
  outline: 2px solid var(--gold-300, #f0c44a);
  outline-offset: 2px;
}

.isk__op:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* A opção que muda o jogo de verdade fica dourada — e é a de baixo, longe do
   dedo que vai fechar a janela. */
.isk__op--forte {
  border-color: rgb(240 196 74 / 0.45);
  background: linear-gradient(180deg, rgb(240 196 74 / 0.12), rgb(0 0 0 / 0.3));
}

.isk__op--forte strong {
  color: var(--gold-300, #f0c44a);
}

.isk__op--forte:hover:not(:disabled) {
  border-color: rgb(240 196 74 / 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .isk__npc {
    animation: none;
  }
  .isk__op {
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════════
   O BOTÃO QUE FICA (#147) — atalho de renascer, sempre visível
   enquanto a era estiver concluída.

   Fixo na janela e no topo: o palco muda de posicionamento conforme
   a aba, e um filho dele mudaria de lugar sozinho.
   ══════════════════════════════════════════════════════════════════ */

/*
 * ── O ORBE DE ISEKAI (#973) ──────────────────────────────────────
 *
 * Substitui o botão grande escrito "Fazer Isekai / ir para a Era N", que ele
 * mandou tirar: *"a ideia é deixar mais minimalista e menos poluído"*.
 */
.orb--isekai {
  /* 8: o lugar que era do Baú de Nível, logo depois do mapa (7). */
  order: 8;
  display: grid;
  cursor: pointer;
  place-items: center;
  /* Um pulso discreto: o orbe só existe quando dá para renascer, e ele precisa
     ser notado sem gritar — é a única coisa nova na barra naquele momento. */
  animation: isk-pulsa 2.4s ease-in-out infinite;
}

@keyframes isk-pulsa {
  0%, 100% { filter: drop-shadow(0 0 2px rgb(168 85 247 / 0.5)); }
  50% { filter: drop-shadow(0 0 9px rgb(168 85 247 / 0.95)); }
}

.orb--isekai[data-indo='1'] {
  cursor: progress;
  opacity: 0.6;
}

/*
 * 🚨 O Baú de Nível sai da barra (#973): ele agora é aberto pelo cartão
 * RECURSOS, e o lugar dele aqui foi pedido para o Isekai.
 */
.panel.skillbar .orb--seed-nivel {
  display: none;
}
}

/*
 * 🚨 SEM A MOLDURA DO ORBE (#975).
 *
 * *"Você está colocando um fundo cinza redondo e um círculo amarelo em volta,
 * o que está deixando a imagem menor e feia; deixe apenas as imagens em PNG em
 * tamanhos iguais… e não coloque um círculo por cima"*.
 *
 * O fundo cinza e o anel dourado vinham da classe `.orb` do jogo, que eu tinha
 * herdado para o ícone "parecer irmão" dos orbes de habilidade. Para uma arte
 * própria isso é o contrário do que se quer: a moldura come uns 20% do
 * diâmetro e esconde justamente o desenho.
 *
 * Continuo usando `.orb` para o TAMANHO e o alinhamento — é o que mantém os
 * ícones do mesmo tamanho dos vizinhos —, e apago só a casca.
 */
.orb--mapa,
.orb--isekai {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.orb--mapa::before,
.orb--mapa::after,
.orb--isekai::before,
.orb--isekai::after {
  display: none !important;
}

/* Sem moldura, a arte pode ocupar o quadro inteiro. */
.orb--mapa img,
.orb--isekai img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── "tem certeza?" antes de renascer (#993) ────────────────────── */

/*
 * A janela de confirmação usa a mesma caixa da janela da vitória — mesma voz,
 * mesmo NPC, mesmos dois botões. O que muda é o peso: ela é mais estreita,
 * porque tem uma pergunta só.
 */
.isk--confirma .isk__caixa {
  max-width: 420px;
}

/* 🚨 Aqui o botão FORTE é o de renascer, e ele é o irreversível. Uma tarja
   avisa disso sem precisar de mais texto. */
.isk--confirma .isk__op--forte span {
  opacity: 0.85;
  font-weight: 700;
}