/* A tela "Sobre" — tudo escopado sob #sobre.
 *
 * Ela reusa a casca do pré-jogo (.pre-screen + .pre-panel), que é papel claro
 * sobre feltro. A folha antiga vivia em foto.css e pintava o texto de
 * `var(--paper)` — creme sobre creme, invisível dentro do painel. Foi corrigido
 * aqui junto com a mudança, e não em separado, porque o bloco inteiro foi
 * reescrito.
 *
 * O painel do Sobre é o único do pré-jogo que pode ser mais largo e rolar: os
 * outros são formulários curtos, este é texto de leitura. A regra 5 — jogo sem
 * rolagem — vale para a partida; uma página de informação que não rola só pode
 * existir cortando informação. */

#sobre .pre-panel {
  max-width: 560px;
  /* A altura do painel, e não a da tela, é quem rola. Deixar a `.pre-screen`
     rolar levaria o botão Voltar junto, para fora do alcance do polegar — e o
     dock inferior é regra (regra 4: o dedo nunca viaja). */
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
}

#sobre .sobre-corpo {
  flex: 1 1 auto;
  min-height: 0;          /* sem isto o filho elástico empurra o botão para fora */
  overflow-y: auto;
  text-align: left;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

#sobre .sobre-corpo section { margin-bottom: 18px; }
#sobre .sobre-corpo section:last-child { margin-bottom: 0; }

#sobre .sobre-corpo h3 {
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}

#sobre .sobre-corpo p { margin: 0 0 8px; }
#sobre .sobre-corpo p:last-child { margin-bottom: 0; }
#sobre .sobre-corpo strong { color: var(--ink); }

#sobre .sobre-corpo ul { margin: 0 0 8px; padding-left: 18px; }
#sobre .sobre-corpo li { margin-bottom: 4px; }

#sobre .sobre-corpo a {
  color: var(--red-rosa);
  font-weight: 700;
  /* Sublinhado explícito: o vermelho sozinho não distingue link de ênfase para
     quem não separa bem as duas cores. */
  text-decoration: underline;
  word-break: break-word;
}

/* O índice: atalhos para as sete seções, na mesma linguagem dos botões do v17 —
   contorno de tinta, sem preenchimento, para não competir com o CTA do dock. */
#sobre .sobre-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

#sobre .sobre-indice button {
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 9px;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  cursor: pointer;
}

#sobre .sobre-indice button:hover { background: var(--gold); }

#sobre .sobre-tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 8px;
  font-size: 0.72rem;
}

#sobre .sobre-tabela th,
#sobre .sobre-tabela td {
  text-align: left;
  vertical-align: top;
  padding: 4px 6px;
  border-bottom: 1px solid var(--paper-line);
}

#sobre .sobre-tabela th { color: var(--ink); white-space: nowrap; }

#sobre .sobre-versao {
  border-top: 2px solid var(--ink);
  padding-top: 10px;
  font-size: 0.7rem;
}

/* ============ OS ATALHOS DA ABERTURA ============
 * Sobre feltro, e não sobre papel: aqui o texto é claro. */

.splash-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  max-width: 340px;
  margin: 0 auto 24px;
  font-size: 0.74rem;
}

.splash-links a {
  color: var(--gold-bright);
  text-decoration: underline;
  white-space: nowrap;
}