/* EJAC — GBJ, Sequência dos Livros. Carregado depois do ../../styles.css
   e do ../gbj.css, então herda cores, fontes, cabeçalho/rodapé e o visual
   do painel GBJ — aqui só o que é só desta modalidade. */

.gbj-sl {
  padding: 40px 20px 60px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.gbj-sl h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  margin: 0 0 8px;
}

.gbj-sl-sub {
  color: var(--cinza-texto);
  font-size: .9rem;
  margin: 0 0 28px;
  line-height: 1.5;
}

.gbj-sl-config {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* [hidden] sozinho perde pra ".gbj-sl-config" em especificidade — sem
   isso, mostrarTela() marca "hidden" mas o flex continua desenhando a
   seção na tela (mesmo bug que já apareceu no mural e no modal do
   ranking do Termo) */
.gbj-sl-config[hidden] {
  display: none;
}

.gbj-sl-config select {
  max-width: 340px;
}

.gbj-sl-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: #ccc;
  cursor: pointer;
}

.gbj-sl-checkbox input {
  width: 17px;
  height: 17px;
  accent-color: var(--rosa);
  cursor: pointer;
}

/* ------------------------------------------------------------
   HUD (vidas, rodada, acertos, tempo)
   ------------------------------------------------------------ */
.gbj-sl-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin-bottom: 24px;
  font-size: .85rem;
  font-weight: 600;
  color: #ccc;
}

.gbj-sl-hud-item {
  background: #161616;
  border: 1px solid var(--cinza);
  border-radius: 999px;
  padding: 6px 14px;
}

.gbj-sl-tempo {
  border-color: var(--rosa);
  color: var(--rosa);
  min-width: 46px;
}

.gbj-sl-tempo:empty {
  display: none;
}

/* ------------------------------------------------------------
   Livro anunciado
   ------------------------------------------------------------ */
.gbj-sl-anuncio {
  font-family: var(--font-scribble);
  color: var(--rosa);
  font-size: 1rem;
  transform: rotate(-2deg);
  margin: 0 0 4px;
}

.gbj-sl-livro {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  color: var(--branco);
  margin: 0 0 28px;
}

/* ------------------------------------------------------------
   Formulário de resposta
   ------------------------------------------------------------ */
.gbj-sl-form {
  text-align: left;
}

.gbj-sl-campo {
  position: relative;
}

/* Lista de livros que batem com o que já foi digitado — a resposta só
   pode ser um dos 73 livros da lista, então em vez de digitar tudo (ou
   depender de reconhecimento de voz, que não deu certo aqui), a pessoa
   digita 2-3 letras e toca no livro certo. */
.gbj-sl-sugestoes {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #161616;
  border: 2px solid var(--rosa);
  border-radius: 12px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

.gbj-sl-sugestoes[hidden] {
  display: none;
}

.gbj-sl-sugestoes li {
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--branco);
  cursor: pointer;
}

.gbj-sl-sugestoes li:hover,
.gbj-sl-sugestoes li.gbj-sl-sugestao-ativa {
  background: rgba(228, 86, 143, .22);
  color: var(--rosa);
}

/* ------------------------------------------------------------
   Feedback e ações pós-rodada
   ------------------------------------------------------------ */
.gbj-sl-feedback {
  min-height: 1.4em;
  margin: 18px 0 0;
  font-weight: 600;
  line-height: 1.5;
}

.gbj-sl-feedback-certo {
  color: #6fcf8f;
}

.gbj-sl-feedback-errado {
  color: #ff9d6a;
}

.gbj-sl-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.gbj-sl-fim-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}

/* mesmo motivo do .gbj-sl-config[hidden] acima: display:flex no mesmo
   elemento precisa de override explícito pro [hidden] esconder de verdade */
.gbj-sl-fim-acoes[hidden] {
  display: none;
}