/* Estilos principais para o Gerador de Personagem Shadowdark
 *
 * Este arquivo contém todas as regras de estilo anteriormente
 * embutidas no HTML. As variáveis CSS e classes seguem o padrão
 * original para manter a aparência visual do gerador.
 */

:root{
  --bg:#0a0a0a;
  --fg:#f2f2f2;
  --muted:#bdbdbd;
  --accent:#ffffff;
  --border:#3a3a3a;
  --danger:#ff4d4d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{ max-width:900px; margin:0 auto; padding:32px 20px 80px; }
header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; border-bottom:1px solid var(--border); padding-bottom:16px; }
h1{ font-size:clamp(22px,3.5vw,34px); margin:0; letter-spacing:0.5px; }
.sub{ color:var(--muted); font-size:14px; }

section{ border:1px solid var(--border); border-radius:12px; padding:20px; margin:18px 0; background: rgba(255,255,255,0.02); }
section h2{ margin:0 0 12px 0; font-size:20px; }
.row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.field{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
input[type="text"], select{
  background:#111; color:var(--fg); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px; outline:none; min-width:260px; font:inherit;
}
button{
  appearance:none; border:1px solid var(--border); background:var(--fg); color:#000;
  padding:12px 16px; border-radius:999px; cursor:pointer; font-weight:600;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease; user-select:none;
}
button.ghost{ background:transparent; color:var(--fg); border-color:var(--fg); }
button:disabled{ opacity:.55; cursor:not-allowed; }
button:hover:not(:disabled){ transform:translateY(-1px); }
button:active:not(:disabled){ transform:translateY(0); }

.hint{color:var(--muted); font-size:13px; margin-top:8px}
.danger{color:var(--danger)}
.ok{color:#6de36d}

.attrs{ width:100%; border-collapse:collapse; margin-top:6px; }
.attrs th,.attrs td{ border-bottom:1px solid var(--border); padding:10px 8px; text-align:left; }
.attrs th{font-weight:600}
.attrs td.score{font-weight:800}
.attrs .mod{opacity:.95}

.progress{ width:100%; height:10px; background:#111; border:1px solid var(--border);
  border-radius:999px; overflow:hidden; margin-top:10px; }
.bar{height:100%; width:0%; background:var(--accent); transition:width .1s linear}

.grid{display:grid; gap:10px}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); padding:10px 12px; border-radius:999px; background:#121212;
}

.final{ border:2px dashed var(--border); padding:16px; border-radius:12px; background:rgba(255,255,255,.02); }
/*
 * Adiciona um espaçamento superior às descrições de Origem e Divindade
 * para evitar que fiquem coladas no seletor e botões. As caixas de
 * descrição utilizam a classe `.final`. Ao aplicar esta margem
 * específica para as áreas de origem e divindade, garantimos que
 * outras caixas (como o resumo final) não sejam afetadas.
 */
#originArea .final,
#deityArea  .final {
  margin-top: 12px;
}
code.inline{background:#111; padding:2px 6px; border-radius:6px; border:1px solid var(--border)}
a.link{color:var(--fg); text-decoration:underline dotted}
.muted{color:var(--muted)}

/* Alinhamento consistente para as marcas de confirmação (🗸) inseridas após botões */
.check-mark {
  display: inline-block;
  margin-left: 6px;
  color: white;
  font-size: 1.2em;
  vertical-align: middle;
}

/* Cabeçalho do bloco de Línguas: badge Concedidas à esquerda, botões à direita */
#stepLang .lang-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

/* Grupo de botões à direita, lado a lado */
#stepLang .lang-head .lang-actions {
  margin-left: flex-start;            /* empurra para a direita */
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;              /* quebra bonitinho em telas menores */
}

/* Responsivo: em telas estreitas, põe em duas linhas mantendo ordem */
@media (max-width: 640px) {
  #stepLang .lang-head {
    flex-wrap: wrap;
  }
  #stepLang .lang-head .lang-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;  /* em telas pequenas, voltam para a esquerda */
    gap: 8px;
  }
}

/* Flexbox para alinhar os botões na mesma linha */
/*
 * A classe `.row` já foi declarada anteriormente com `display: flex` e
 * propriedades de layout apropriadas. A declaração duplicada abaixo
 * inadvertidamente definia `display: flex-start`, que não é um valor
 * válido para a propriedade `display` e, por isso, quebrava o layout
 * em dispositivos móveis. Essa regra foi removida e substituída por
 * comentários para evitar conflitos. Se for necessário ajustar a
 * disposição de elementos numa linha específica, utilize classes ou
 * seletores mais específicos em vez de sobrepor `.row`.
 */

/* Garantir que "Rolar Novamente" fique à esquerda */
#btnRerollAttrs {
  order: 1;
}

/* Garantir que "Continuar Atributos" fique à direita */
#btnConfirmAttrs {
  order: 2;
}

/* Layout da etapa NOME: input + botões na mesma linha */
#stepNameEntry .name-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Responsividade para a etapa de NOME
 * Em telas estreitas, como smartphones, os elementos de entrada e os
 * botões de geração de nome (masculino e feminino) precisam se
 * reorganizar verticalmente para evitar que ultrapassem a largura
 * disponível. Esta media query ajusta a `.name-row` para uma
 * direção em coluna e faz com que cada item ocupe 100% da largura
 * disponível. Também remove quaisquer larguras mínimas definidas pelo
 * input para que ele possa encolher corretamente em telas pequenas.
 */
@media (max-width: 640px) {
  #stepNameEntry .name-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #stepNameEntry .name-row > * {
    width: 100%;
    min-width: 0;
  }
}

/* Mantém o check à direita na linha de ações dos ATRIBUTOS */
#stepAttrs #attrsResult .row {
  display: flex;            /* por garantia */
  align-items: center;
  gap: 12px;
}

#stepAttrs #attrsResult .row .check-mark {
  order: 99;                /* empurra o check para o final da linha */
  margin-left: 6px;         /* espacinho padrão */
}