/* Cores so por variavel, de css/base.css. */
.coracoes { color: var(--coracao); display: inline-flex; align-items: center; gap: 1px; }
.coracao { display: block; }
.coracao-meio { position: relative; display: inline-block; }
.coracao-metade { position: absolute; inset: 0; overflow: hidden; display: block; }
.coracao-especial { color: var(--especial); display: inline-flex; opacity: 0.45; }
.coracao-especial--marcado { opacity: 1; }

.entrar { max-width: 360px; margin: 12vh auto 0; }
.entrar__linha { color: var(--texto-fraco); margin-top: -6px; }
.entrar__form { margin-top: 26px; display: grid; gap: 16px; }

.campo { display: grid; gap: 5px; }
.campo__rotulo { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco); }
.campo__caixa {
  background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  color: var(--texto); font: inherit; padding: 11px 12px; width: 100%;
}
.campo__caixa:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
.campo__dica { font-size: 13px; color: var(--texto-fraquissimo); }

.botao {
  background: var(--marca); color: var(--marca-texto); border: 0; border-radius: var(--raio);
  font: inherit; font-weight: 600; padding: 12px; width: 100%; cursor: pointer;
}
.botao[disabled] { opacity: .6; cursor: default; }
.botao--fraco { background: transparent; color: var(--texto-fraco); border: 1px solid var(--borda); }

.aviso { color: var(--erro); font-size: 14px; margin: 0; }

.texto-fraco { color: var(--texto-fraco); }

.avatar {
  border-radius: 999px; display: grid; place-items: center; overflow: hidden;
  background: hsl(var(--matiz, 260) var(--avatar-saturacao) var(--avatar-luz));
  color: var(--marca-texto); font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--grande { width: 96px; height: 96px; font-size: 38px; }
.avatar--pequeno { width: 38px; height: 38px; font-size: 16px; }

.eu__foto { display: flex; justify-content: center; margin: 18px 0 20px; }
.eu__enviar { display: block; text-align: center; margin-top: 10px; cursor: pointer; }
.eu__sair { margin-top: 28px; }

.sugestoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sugestao {
  padding: 0; border: 2px solid transparent; border-radius: var(--raio);
  background: var(--fundo-cartao); overflow: hidden; cursor: pointer; aspect-ratio: 3 / 4;
}
.sugestao img { width: 100%; height: 100%; object-fit: cover; }
.sugestao--escolhida { border-color: var(--marca); }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex;
  background: var(--fundo-cartao); border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav__item {
  flex: 1; display: grid; justify-items: center; gap: 3px;
  padding: 9px 2px 10px; font-size: 12px; color: var(--texto-fraco);
  position: relative;
}
/* Separador entre os quatro destinos: sem ele os itens viram uma faixa de
   texto continua e fica dificil saber onde um termina e o outro comeca. */
.nav__item + .nav__item::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px;
  border-left: 1px solid var(--borda);
}
.nav__icone { width: 23px; height: 23px; display: block; }
.nav__texto { line-height: 1.1; }
.nav__item--atual { color: var(--texto); font-weight: 600; }
/* Faixa em cima do item atual: diz onde voce esta sem depender so da cor. */
.nav__item--atual::after {
  content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 2px;
  background: var(--marca); border-radius: 0 0 2px 2px;
}

.coracoes-toque { cursor: pointer; display: inline-block; touch-action: manipulation; }
.nota { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nota__especial { display: grid; justify-items: center; gap: 2px; }
.nota__rotulo { font-size: 12.5px; color: var(--texto-fraco); }

.resultados { display: grid; gap: 6px; margin-top: 8px; }
.resultado {
  display: flex; gap: 9px; align-items: center; text-align: left; width: 100%;
  background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  color: var(--texto); font: inherit; padding: 7px; cursor: pointer;
}
.resultado small { display: block; font-size: 12.5px; }

.capa { border-radius: 6px; background: var(--borda); object-fit: cover; flex: none; }
.capa--pequena { width: 40px; height: 53px; }
.capa--media { width: 56px; height: 75px; }
.capa--grande { width: 140px; height: 186px; }
.capa--vazia { background: var(--borda); }

.escolhido {
  display: flex; gap: 11px; align-items: center; margin-top: 10px;
  background: var(--fundo-cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 9px;
}
.ligacao {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px;
  color: var(--marca); cursor: pointer; text-decoration: underline;
}

.pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.pilula {
  background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: 999px;
  color: var(--texto); font: inherit; font-size: 14px; padding: 7px 13px; cursor: pointer;
}
.pilula--marcada { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.campo__caixa--curto { width: 110px; }
textarea.campo__caixa { resize: vertical; font-family: inherit; }

.registro {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 0;
  border-bottom: 1px solid var(--borda-fraca);
}
.registro__corpo { flex: 1; min-width: 0; }
.registro__nota { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 13px; }
.registro__comentario { margin: 4px 0 0; font-size: 14px; color: var(--texto-fraco); }
.registro__acoes { display: grid; gap: 4px; text-align: right; }
.registro__acoes--largas { display: flex; gap: 8px; margin-top: 10px; }

.carrossel {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; margin: 0 calc(var(--espaco) * -1); padding-inline: var(--espaco);
}
.carrossel::-webkit-scrollbar { display: none; }
.carro { flex: none; width: 140px; scroll-snap-align: start; }
.carro:first-child { width: 172px; }
.carro:first-child .capa--grande { width: 172px; height: 229px; }
.carro__capa { position: relative; }
.carro__tarja {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 8px; border-radius: 0 0 6px 6px;
  /* Preto literal de proposito: e um veu de escurecimento sobre a foto da
     capa, nao uma cor de marca, entao nao ha variavel de css/base.css que
     faca sentido aqui. */
  background: linear-gradient(transparent, rgb(0 0 0 / .85));
}
.carro__posicao { font-size: 22px; font-weight: 800; line-height: 1; }
.carro__nome { font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.carro__comentario { font-size: 13.5px; color: var(--texto-fraco); font-style: italic; margin: 5px 0 0; }
.carro__quem { font-size: 12.5px; color: var(--texto-fraquissimo); margin: 2px 0 0; }

.resto-top { margin-top: 10px; }
.mini {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-top: 1px solid var(--borda-fraca); font-size: 14.5px;
}
.mini__posicao { color: var(--texto-fraquissimo); width: 13px; }
.mini__nome { flex: 1; min-width: 0; font-weight: 600; }

/* Separacao entre o top 5 e a lista da galera. Sao duas coisas diferentes —
   um ranking de jogos e um resumo por pessoa — e antes elas se encostavam,
   parecendo continuacao uma da outra. A linha atravessa a largura toda e o
   traco roxo marca onde a secao nova comeca. */
.secao {
  position: relative;
  margin: 34px calc(var(--espaco) * -1) 14px;
  padding: 24px var(--espaco) 0;
  border-top: 1px solid var(--borda);
}
.secao::before {
  content: ''; position: absolute; top: -2px; left: var(--espaco);
  width: 44px; height: 3px; border-radius: 2px; background: var(--marca);
}
.bloco { padding: 12px 0; border-top: 1px solid var(--borda-fraca); }
.bloco__cabeca { display: flex; align-items: center; gap: 9px; }
.bloco__cabeca small { display: block; font-size: 12.5px; }
.bloco__jogo { display: flex; gap: 9px; margin-top: 9px; align-items: flex-start; }
.bloco__nota { display: block; margin-top: 2px; }
.bloco__comentario { font-size: 13.5px; color: var(--texto-fraco); font-style: italic; margin: 3px 0 0; }
.defasado { color: var(--aviso); }

.voltar { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--texto-fraco); }
.perfil { display: flex; align-items: center; gap: 14px; margin: 10px 0 6px; }
.perfil h1 { margin: 0; }
.jogo-cabeca { display: flex; gap: 14px; align-items: flex-start; margin: 12px 0 4px; }
.jogo-cabeca h1 { margin: 0 0 6px; }
.opiniao { padding: 12px 0; border-bottom: 1px solid var(--borda-fraca); }
.opiniao__quem { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.opiniao__texto { margin: 6px 0 0; font-size: 15px; color: var(--texto-fraco); }

/* --- fundo da tela de entrar ------------------------------------------
   Um mosaico de capas de jogo, desfocado e escurecido. As capas sao um
   extra: se a internet falhar, .fundo__capas fica vazio e sobra o
   gradiente, que ja e um fundo decente. A tela de entrar nunca pode
   depender da internet para aparecer. */
.fundo {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--marca) 22%, transparent), transparent 70%),
    var(--fundo);
}
.fundo__capas {
  position: absolute; inset: -8%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  opacity: 0; transition: opacity .9s ease;
  filter: blur(2.5px) saturate(.9);
  transform: rotate(-8deg) scale(1.25);
}
.fundo__capas--visivel { opacity: .75; }
.fundo__capas img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
/* O veu escurece o mosaico inteiro e fecha nas bordas, para o texto do
   formulario ter contraste em cima de qualquer capa. */
.fundo__veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--veu-entrar-borda), var(--veu-entrar) 26%, var(--veu-entrar) 70%, var(--veu-entrar-borda)),
    radial-gradient(70% 50% at 50% 42%, transparent, var(--veu-entrar-borda));
}
.entrar { position: relative; }
.entrar h1 { font-size: 30px; letter-spacing: -.02em; }

/* --- o ano gruda no topo -----------------------------------------------
   Um amigo pode ter 35 jogos num ano so. Sem isto, o cabecalho do ano sai
   da tela na primeira rolagem e a lista inteira parece ser do mesmo ano —
   foi exatamente a duvida que apareceu no primeiro uso. */
.ano {
  position: sticky; top: 0; z-index: 2;
  background: var(--fundo);
  margin: 0; padding: 12px 0 7px;
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: baseline; gap: 8px;
}
.ano__quantos { font-size: 13px; font-weight: 400; color: var(--texto-fraco); }