/* Bloque "Cómo se juega" de la portada de cada juego.
 *
 * Es HTML fijo en el index.html del juego (para que lo lean los buscadores y
 * quien entra por primera vez) y se ve SOLO en la portada: /js/info-juego.js
 * lo oculta en cuanto el juego pasa a la sala o a la partida.
 * Los colores salen de las variables de cada juego (todos comparten --bg2,
 * --border, --text, --text2 y --ff-head); los valores de respaldo son los
 * del tema oscuro común.
 */
.tj-info {
  position: relative; z-index: 1;
  max-width: 880px; margin: 8px auto 56px; padding: 0 16px;
  color: var(--text, #e2e8f0); line-height: 1.6; font-size: 15px;
}
.tj-info[hidden] { display: none; }
.tj-info h2 {
  font-family: var(--ff-head, inherit); font-size: 22px; line-height: 1.25;
  margin: 0 0 10px; letter-spacing: .3px;
}
.tj-info h3 {
  font-family: var(--ff-head, inherit); font-size: 16px;
  margin: 26px 0 10px; letter-spacing: .5px;
}
.tj-info p { color: var(--text2, #94a3b8); margin: 0 0 10px; }
.tj-info strong { color: var(--text, #e2e8f0); }
.tj-info-card {
  background: var(--bg2, #13132a); border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 16px; padding: 22px 22px 14px;
}
.tj-info ol, .tj-info ul { margin: 0 0 10px; padding-left: 22px; color: var(--text2, #94a3b8); }
.tj-info li { margin: 0 0 6px; }
.tj-info li::marker { color: var(--text, #e2e8f0); font-weight: 700; }
.tj-info details {
  border-top: 1px solid var(--border, rgba(255,255,255,.08)); padding: 10px 0;
}
.tj-info details:last-of-type { border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.tj-info summary {
  cursor: pointer; font-weight: 600; color: var(--text, #e2e8f0);
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.tj-info summary::-webkit-details-marker { display: none; }
.tj-info summary::after { content: '+'; color: var(--text2, #94a3b8); font-weight: 400; }
.tj-info details[open] summary::after { content: '−'; }
.tj-info details p { margin: 8px 0 2px; }
.tj-info a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .tj-info { margin-bottom: 40px; font-size: 14.5px; }
  .tj-info h2 { font-size: 19px; }
  .tj-info-card { padding: 18px 16px 10px; }
}