/* Retrato do personagem (templates/componentes/_retrato.html): a foto quadrada, de cantos arredondados,
   ou as iniciais sobre o verde suave. A foto em análise ganha um contorno tracejado dourado. */

.retrato {
  --lado-do-retrato: 48px;
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--lado-do-retrato);
  height: var(--lado-do-retrato);
  overflow: hidden;
  border-radius: var(--raio-3);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
}

.retrato--pequeno {
  --lado-do-retrato: 32px;
  border-radius: var(--raio-2);
}

.retrato--grande {
  --lado-do-retrato: 88px;
  border-radius: var(--raio-4);
}

.retrato--enorme {
  --lado-do-retrato: 168px;
  border-radius: var(--raio-4);
}

.retrato__imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.retrato__iniciais {
  font-family: var(--fonte-titulo);
  font-size: calc(var(--lado-do-retrato) * 0.36);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.retrato--em-analise::after {
  position: absolute;
  inset: 0;
  border: 2px dashed var(--cor-ouro);
  border-radius: inherit;
  content: "";
}