@import url("/fontes.css");

/* O rankeamento, na "october light" do calendário: fundo branco, tinta preta,
   Archivo e Source Serif 4, cantos retos, um vermelho só.

   Os retratos são os mesmos arquivos em cinza que o calendário serve, então
   dois artistas de séculos diferentes chegam ao duelo com o mesmo material e a
   escolha é pela pessoa, não pela qualidade do scan.

   O vermelho aqui marca uma coisa só: onde a mão está. O que o mouse toca, o
   que o teclado selecionou, o primeiro lugar da lista. */

:root {
  --ground: #ffffff;
  --surface: #f4f2ed;
  --ink: #101010;
  --muted: #6e6e68;
  --rule: #dad9d4;
  --red: #d3291a;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Cambria, Georgia, serif;

  --u: 5.2px;
  --retrato: 340px; /* o lado do duelo; o resto se acomoda em volta */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* um `display: flex` numa classe ganha do [hidden] do navegador; aqui não */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-text-size-adjust: 100%;
}

button,
select {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}
button:focus-visible,
select:focus-visible,
.retrato:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.folha {
  width: min(calc(210 * var(--u)), calc(100vw - 6 * var(--u)));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  margin: calc(5 * var(--u)) auto;
  background: var(--ground);
  border: 1px solid var(--rule);
}

/* ---- cabeçalho -------------------------------------------------------- */

.cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(3 * var(--u));
  border-bottom: calc(0.5 * var(--u)) solid var(--ink);
  padding-bottom: calc(1.6 * var(--u));
}
.cabecalho h1 {
  font-family: var(--sans);
  font-weight: 300;
  font-size: calc(9 * var(--u));
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
}
.escolha select {
  font-family: var(--sans);
  font-size: calc(2.6 * var(--u));
  letter-spacing: 0.02em;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 2px 0;
  cursor: pointer;
}
.escolha select:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.cabecalho-direita {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(4 * var(--u));
}
.nav {
  display: flex;
  align-items: baseline;
  gap: calc(3 * var(--u));
}
.link {
  font-family: var(--sans);
  font-size: calc(2.6 * var(--u));
  letter-spacing: 0.02em;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 2px 0;
  cursor: pointer;
}
.link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
/* a lista é a saída principal da arena, então o link dela é o de tinta */
.link--forte {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---- a capa ------------------------------------------------------------ */

.capa {
  padding-top: calc(5 * var(--u));
}
.capa-intro {
  font-family: var(--serif);
  font-size: calc(3.4 * var(--u));
  line-height: 1.5;
  max-width: 64ch;
  margin: 0;
}
.capa h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(2.6 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: calc(6 * var(--u)) 0 0;
}

/* As sete disciplinas e os dois elencos são botões, e o marcado leva o
   vermelho: é onde a mão está. */
.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(1.5 * var(--u));
  padding-top: calc(2 * var(--u));
}
.opcoes button {
  font-family: var(--sans);
  font-size: calc(2.8 * var(--u));
  letter-spacing: 0.02em;
  padding: calc(1.4 * var(--u)) calc(3 * var(--u));
  background: var(--ground);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.opcoes button:hover {
  border-color: var(--ink);
}
.opcao--marcada {
  border-color: var(--red) !important;
  box-shadow: inset 0 0 0 1px var(--red);
}

.cartoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(3 * var(--u));
  padding-top: calc(2 * var(--u));
}
.cartao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0.8 * var(--u));
  text-align: left;
  padding: calc(3 * var(--u));
  background: var(--ground);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.cartao:hover {
  border-color: var(--ink);
}
.cartao--marcado {
  border-color: var(--red) !important;
  box-shadow: inset 0 0 0 1px var(--red);
}
.cartao-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(4.2 * var(--u));
  line-height: 1.1;
  padding-bottom: calc(0.8 * var(--u));
}
.cartao-n,
.cartao-duelos {
  font-family: var(--sans);
  font-size: calc(2.7 * var(--u));
  font-variant-numeric: tabular-nums;
}
.cartao-duelos:empty {
  display: none;
}

.regras {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: calc(1.4 * var(--u)) calc(4 * var(--u));
  margin: calc(2.5 * var(--u)) 0 0;
  max-width: 72ch;
}
.regras dt {
  font-family: var(--sans);
  font-size: calc(2.3 * var(--u));
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.45em;
}
.regras dd {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(3.1 * var(--u));
  line-height: 1.45;
}
.regras i {
  font-style: normal;
  border-bottom: 1px solid var(--rule);
} /* nomes de botões */
.botoes.capa-botoes {
  justify-content: flex-start;
}

/* O medidor. Fica logo abaixo da régua do cabeçalho e é a única coisa na
   página que cresce sozinha: cheio quando cada pessoa tiver seis duelos, que é
   onde a lista para de se mexer muito. */
.medidor {
  height: 3px;
  background: var(--rule);
  margin-top: -1px;
}
.medidor i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 240ms ease-out;
}

.conta {
  font-family: var(--sans);
  font-size: calc(2.5 * var(--u));
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: calc(2 * var(--u)) 0 0;
  min-height: 1.4em;
}

/* ---- o duelo ---------------------------------------------------------- */

.arena {
  padding-top: calc(5 * var(--u));
}

.duelo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(9 * var(--u));
}
.lado {
  margin: 0;
  width: min(var(--retrato), calc((100% - 9 * var(--u)) / 2));
  display: flex;
  flex-direction: column;
  transition: opacity 130ms ease-out;
}
.arena--trocando .lado {
  opacity: 0.25;
}

/* O retrato é o botão: a coisa clicável é a cara da pessoa, não uma palavra
   embaixo dela. */
.retrato {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: var(--surface);
  cursor: pointer;
  position: relative;
}
.retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.retrato--sem::after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  color: var(--rule);
  font-size: 54px;
  line-height: 1;
}
/* Só onde existe mouse: no iPad o :hover gruda depois do toque e o vermelho
   fica marcando quem não foi escolhido. */
@media (hover: hover) {
  .retrato:hover {
    outline: 3px solid var(--red);
  }
}
.lado--vence .retrato {
  outline: 3px solid var(--red);
}
.lado--perde {
  opacity: 0.3;
}

figcaption {
  display: block;
  padding-top: calc(1.8 * var(--u));
}
.nome {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(5.4 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.005em;
  hyphens: auto;
}
.anos {
  display: block;
  font-family: var(--sans);
  font-size: calc(2.9 * var(--u));
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: calc(0.6 * var(--u));
}
.disc {
  display: block;
  font-family: var(--sans);
  font-size: calc(2.2 * var(--u));
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: calc(0.4 * var(--u));
}

/* "não conheço" e "empate" são os dois botões vermelhos da página: contorno e
   texto em vermelho, fundo branco, um pouco maiores que os outros, para
   ficarem à vista ao lado de dois retratos em cinza. */
.recusa {
  align-self: flex-start;
  margin-top: calc(1.8 * var(--u));
  padding: calc(1.1 * var(--u)) calc(2.6 * var(--u));
  border: 1px solid var(--red);
  background: var(--ground);
  font-family: var(--sans);
  font-size: calc(2.8 * var(--u));
  letter-spacing: 0.02em;
  color: var(--red);
  cursor: pointer;
}
#empate {
  font-size: calc(3.2 * var(--u));
  padding: calc(1.8 * var(--u)) calc(5 * var(--u));
  border-color: var(--red);
  color: var(--red);
}
/* só com mouse: no iPad o :hover gruda depois do toque */
@media (hover: hover) {
  .recusa:hover,
  #empate:hover:not(:disabled) {
    background: var(--red);
    border-color: var(--red);
    color: var(--ground);
  }
}

/* ---- botões ----------------------------------------------------------- */

.botoes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(2 * var(--u));
  padding-top: calc(7 * var(--u));
}
.botoes button {
  font-family: var(--sans);
  font-size: calc(2.8 * var(--u));
  letter-spacing: 0.02em;
  padding: calc(1.6 * var(--u)) calc(4 * var(--u));
  background: var(--ground);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.botoes button:hover:not(:disabled) {
  border-color: var(--ink);
}
.botoes button:disabled {
  color: var(--rule);
  cursor: default;
}
.botao--forte {
  border-color: var(--ink) !important;
}
.botao--forte:hover:not(:disabled) {
  background: var(--ink);
  color: var(--ground);
}
.botao--perigo:hover:not(:disabled) {
  border-color: var(--red) !important;
  color: var(--red);
}

.teclas {
  font-family: var(--sans);
  font-size: calc(2.3 * var(--u));
  color: var(--muted);
  text-align: center;
  margin: calc(3 * var(--u)) 0 0;
}

/* A faixa "lista firme": uma vez por torneio, quando o medidor enche. */
.firme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(2 * var(--u)) calc(4 * var(--u));
  margin-top: calc(3 * var(--u));
  padding: calc(2.4 * var(--u)) calc(3 * var(--u));
  border: 1px solid var(--ink);
}
.firme p {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(3.1 * var(--u));
  line-height: 1.4;
}
.botoes.firme-botoes {
  padding-top: 0;
  justify-content: flex-start;
}

/* ---- a lista ---------------------------------------------------------- */

.painel-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(3 * var(--u));
  padding-top: calc(4 * var(--u));
}
.painel-topo .botoes {
  padding-top: 0;
}
.painel h2,
.painel h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(3 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.lista {
  list-style: none;
  margin: calc(4 * var(--u)) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.lista li {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  padding: calc(1.6 * var(--u)) 0;
  border-bottom: 1px solid var(--rule);
}
/* o fim de um bloco: dentro dele a ordem não está resolvida; deste traço
   para baixo ninguém pode estar acima dele */
.lista li.corte {
  border-bottom: 2px solid var(--ink);
}
.lista .pos {
  flex: none;
  width: calc(9 * var(--u));
  text-align: right;
  font-family: var(--sans);
  font-size: calc(3.4 * var(--u));
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.lista li:first-child .pos {
  color: var(--red);
}
.lista img,
.lista .semrosto {
  flex: none;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  object-fit: cover;
  background: var(--surface);
}
.lista .semrosto {
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  color: var(--rule);
  font-size: calc(4 * var(--u));
  line-height: 1;
}
.lista .quem {
  flex: 1 1 auto;
  min-width: 0;
}
.lista .quem .nome {
  font-size: calc(4 * var(--u));
}
/* no elenco inteiro, quem não é negrito na planilha */
.lista .quem .nome--comum {
  font-weight: 400;
}
.lista .quem .anos,
.lista .quem .disc {
  display: inline;
  font-size: calc(2.3 * var(--u));
}
.lista .quem .disc::before {
  content: " · ";
}
.lista .pontos {
  flex: none;
  text-align: right;
  font-family: var(--sans);
  font-size: calc(3 * var(--u));
  font-variant-numeric: tabular-nums;
}
.lista .pontos small {
  display: block;
  font-size: calc(2.2 * var(--u));
  color: var(--muted);
}

.restos {
  padding-top: calc(6 * var(--u));
}
.restos section {
  padding-top: calc(4 * var(--u));
}
.restos p {
  font-family: var(--serif);
  font-size: calc(3.2 * var(--u));
  line-height: 1.5;
  margin: calc(1.5 * var(--u)) 0 0;
}
.restos button {
  font-family: var(--sans);
  font-size: calc(2.2 * var(--u));
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0;
  margin-left: calc(1 * var(--u));
  cursor: pointer;
}
.restos button:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* ---- a lista ao lado da de outro jogador ------------------------------ */

.comparar-com {
  font-family: var(--sans);
  font-size: calc(2.6 * var(--u));
  color: var(--muted);
  margin: calc(3 * var(--u)) 0 0;
}
.comparacao-frase {
  font-family: var(--serif);
  font-size: calc(3.6 * var(--u));
  line-height: 1.4;
  max-width: 60ch;
  margin: calc(3 * var(--u)) 0 0;
}
/* as duas colunas dividem as linhas: um título que quebra em duas, com um
   nome comprido, não desce a lista dele em relação à do lado */
.colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: calc(6 * var(--u));
  padding-top: calc(5 * var(--u));
}
.coluna {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
}
.coluna h3 {
  align-self: end;
}
.lista.lista--dupla {
  margin-top: calc(2 * var(--u));
}
/* um respiro nas pontas, para o contorno do gêmeo não passar por cima */
.lista--dupla li {
  gap: calc(2 * var(--u));
  padding-left: calc(1 * var(--u));
  padding-right: calc(1 * var(--u));
  cursor: default;
}
.lista--dupla .pos {
  width: calc(6 * var(--u));
  font-size: calc(3 * var(--u));
}
.lista--dupla img,
.lista--dupla .semrosto {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
}
.lista--dupla .quem .nome {
  font-size: calc(3.2 * var(--u));
}
.lista--dupla .quem .disc {
  display: none;
}
.lista--dupla .faixas {
  flex: none;
  text-align: right;
  font-family: var(--sans);
  font-size: calc(2.6 * var(--u));
  font-variant-numeric: tabular-nums;
}
.lista--dupla .faixas small {
  display: block;
  font-size: calc(2.2 * var(--u));
  color: var(--muted);
}
/* as duas faixas não se tocam: é onde as listas discordam de verdade */
.lista--dupla .faixas small.longe {
  color: var(--ink);
  font-weight: 500;
}
/* o mesmo nome na outra coluna, de quem o mouse (ou o dedo) está em cima */
.lista--dupla li.gemeo {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

/* "imagem: 10 · 20 · todos", um grupo de botões colados, no mesmo tamanho dos
   botões ao lado. */
.imagem-grupo {
  display: inline-flex;
  align-items: stretch;
}
.imagem-rotulo {
  font-family: var(--sans);
  font-size: calc(2.8 * var(--u));
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: calc(1.6 * var(--u)) calc(2 * var(--u)) calc(1.6 * var(--u)) 0;
}
.botoes .imagem-grupo button {
  padding-left: calc(2.6 * var(--u));
  padding-right: calc(2.6 * var(--u));
}
.botoes .imagem-grupo button + button {
  margin-left: -1px;
}
.botoes .imagem-grupo button:hover:not(:disabled) {
  position: relative; /* a borda de tinta por cima da do vizinho */
}

/* A imagem pronta, acima da lista: no iPad é segurar e salvar; no PC, o link. */
.imagem-caixa {
  margin: calc(4 * var(--u)) 0 0;
}
.imagem-caixa img {
  display: block;
  width: 100%;
  max-width: calc(120 * var(--u));
  border: 1px solid var(--rule);
}
.imagem-caixa figcaption {
  display: flex;
  gap: calc(3 * var(--u));
  padding-top: calc(1.5 * var(--u));
}

.area-copia {
  width: 100%;
  height: calc(40 * var(--u));
  margin-top: calc(3 * var(--u));
  font-family: ui-monospace, Consolas, monospace;
  font-size: calc(2.4 * var(--u));
  border: 1px solid var(--rule);
  padding: calc(2 * var(--u));
}

.aviso {
  font-family: var(--sans);
  font-size: calc(2.6 * var(--u));
  color: var(--red);
  border-top: 1px solid var(--red);
  padding-top: calc(1.5 * var(--u));
  margin-top: calc(6 * var(--u));
}

/* ---- telas estreitas --------------------------------------------------- */

@media (max-width: 700px) {
  .folha {
    padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u));
    border: 0;
    margin: 0 auto;
  }
  .cabecalho h1 {
    font-size: calc(7 * var(--u));
  }
  .duelo {
    gap: calc(3 * var(--u));
  }
  .lado {
    width: calc((100% - 3 * var(--u)) / 2);
  }
  .nome {
    font-size: calc(4 * var(--u));
  }
  .anos {
    font-size: calc(2.6 * var(--u));
  }
  .disc {
    font-size: calc(2 * var(--u));
  }
  .lista .pontos small {
    display: none;
  }
  .colunas {
    column-gap: calc(3 * var(--u));
  }
  /* a faixa desce para baixo do nome: lado a lado, os dois não cabem */
  .lista--dupla li {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .lista--dupla .quem {
    flex-basis: calc(100% - 8 * var(--u));
  }
  .lista--dupla .faixas {
    flex-basis: 100%;
    text-align: left;
    padding-left: calc(8 * var(--u));
  }
  .lista--dupla .faixas small {
    display: inline;
    margin-left: calc(1.5 * var(--u));
  }
  .lista--dupla img,
  .lista--dupla .semrosto,
  .lista--dupla .quem .anos {
    display: none;
  }
  .lista--dupla .quem .nome {
    font-size: calc(2.8 * var(--u));
  }
  .cartoes {
    grid-template-columns: minmax(0, 1fr);
  }
  .regras {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3em;
  }
  .regras dd {
    padding-bottom: calc(1.5 * var(--u));
  }
}

/* Sem teclado à vista, a legenda das teclas não serve para nada. */
@media (hover: none) {
  .teclas,
  .tecla {
    display: none;
  }
}