/* Como jogar: a explicação de um jogo, na coluna de leitura dos documentos
   (termos.css). Aqui só o que essa página tem de próprio. */

/* o corpo do painel é uma coluna flex: sem isto o logo estica até a largura
   toda e a tabela (que rola de lado) encolhe até sumir */
.guia__logo,
.guia__tabela { flex: none; }

.guia__logo {
  display: block;
  align-self: flex-start;
  max-width: 100%;
  object-fit: contain;
  height: max(84px, calc(132 * var(--u)));
  width: auto;
  margin: 0 0 max(14px, calc(20 * var(--u)));
}

/* a frase que resume o jogo: a mesma do destaque da Home */
.guia__lead {
  font-size: 1.25em;
  line-height: 1.4;
  color: var(--ink-0);
}

.doc__body ol { margin: 0 0 0.9em; padding-left: 1.4em; }

.guia__tabela { overflow-x: auto; margin: 0 0 0.9em; }

.guia__tabela table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}

.guia__tabela th,
.guia__tabela td {
  padding: 0.45em 1.4em 0.45em 0;
  border-bottom: 1px solid rgb(170 195 255 / 0.16);
  text-align: left;
  font-weight: 400;
}

.guia__tabela thead th {
  font-size: 0.8em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.guia__tabela td,
.guia__tabela tbody th { color: var(--ink-0); }

/* o fechar, no cabeçalho do painel: o mesmo xis do diálogo de retomar */
.guia__fechar {
  flex: none;
  display: grid;
  place-items: center;
  width: max(30px, calc(38 * var(--u)));
  height: max(30px, calc(38 * var(--u)));
  border: 1px solid rgb(150 180 255 / 0.35);
  border-radius: max(7px, calc(9 * var(--u)));
  color: var(--ink-1);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}

.guia__fechar svg { width: 46%; height: 46%; }

.guia__fechar:hover,
.guia__fechar:focus-visible { border-color: rgb(180 205 255 / 0.9); color: var(--ink-0); }

.guia__jogar { margin: 1.8em 0 0; }

/* o Jogar da Home em tamanho de texto: mesma moldura, sem o brilho de destaque */
.guia__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max(180px, calc(240 * var(--u)));
  height: max(46px, calc(58 * var(--u)));
  padding: 0 1.6em;
  border: 1px solid rgb(125 155 255 / 0.9);
  border-radius: max(7px, calc(10 * var(--u)));
  background: linear-gradient(180deg, rgb(38 56 122 / 0.70), rgb(16 24 60 / 0.82));
  color: var(--ink-0);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: border-color .18s var(--ease);
}

.doc__body a.guia__botao { color: var(--ink-0); text-decoration: none; }
.guia__botao:hover,
.guia__botao:focus-visible { border-color: rgb(165 190 255); }

.guia__nota {
  margin-top: 1.8em;
  font-size: 0.85em;
  color: var(--ink-3);
}