/*---------------------------------------------------------------------------------------------*/
/* FIGHT SCREEN
/*---------------------------------------------------------------------------------------------*/
.FightScreen-background {
  display: block;
}
.FightScreen-logo {
  width:430px;
}
.FightScreen-title {
  display: block;
  background-color: black;
  padding: 20px;
  font-size: 20px;
  text-wrap: nowrap;
  color: orange;
}

/*---------------------------------------------------------------------------------------------*/
/* CHARACTER SCREEN
/*---------------------------------------------------------------------------------------------*/
.CharacterScreen-background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px);
  opacity: 0.5;
}
.CharacterScreen-title {
  display: block;
  text-align: center;
  font-size: 25px;
  color: orange;
  text-shadow: 2px 2px 0px black;
}
.CharacterScreen-avatar {
  display: block;
  width: 55px;
  height: 55px;
}
.CharacterScreen-label {
  display: block;
  font-size: 12px;
}

/*---------------------------------------------------------------------------------------------*/
/* MAP SCREEN
/*---------------------------------------------------------------------------------------------*/
.MapScreen-background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px);
  transform: scale(1.1);
  opacity: 0.5;
}
.MapScreen-title {
  display: block;
  text-align: center;
  font-size: 25px;
  color: orange;
  text-shadow: 2px 2px 0px black;
}

/*---------------------------------------------------------------------------------------------*/
/* UI HEALTH BAR WIDGET
/*---------------------------------------------------------------------------------------------*/
.UIHealthBar {
  display:flex;
  width:200px;
  padding:10px;
}
.UIHealthBar-content {
  margin-left: 10px;
  margin-right: 10px;
  display: block;
  flex: 1;
}
.UIHealthBar-picture {
  width:95px;
  height: 95px;
  image-rendering: pixelated;
}
.UIHealthBar-name {
  margin-bottom: 10px;
  font-size: 14px;
  text-shadow: 2px 2px 0px black;
}
.UIHealthBar-bar {
  position: relative;
  display: block;
  background-image: url(/examples/fight/ui/sprites.png);
  background-position: -8px -332px;
  width: 120px;
  height: 50px;
  margin-bottom: 10px;
  image-rendering: pixelated;
}
.UIHealthBar-bar-progress {
  position: absolute;
  top: 23px;
  left: 29px;
  width: 85px;
  height: 10px;
  transition: width 500ms ease-in-out;
}
.UIHealthBar-bar-progress-life {
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  width: 100%;
  background-image: url(/examples/fight/ui/sprites.png);
  background-position: -599px -336px;
  transition: width 500ms ease-in-out;
}

/*---------------------------------------------------------------------------------------------*/
/* UI CHARACTER MENU
/*---------------------------------------------------------------------------------------------*/
.UICharacter-menu, .UIMap-menu {
  border: 10px solid;
  border-image: url(/textures/ui_border.png) 3 fill;
  width: 400px;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  grid-gap: 10px;
  padding:20px 30px;
}
.UICharacter-container {
  width:  80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #00e7ff;
}
.UICharacter-container-char-icon {
  width: 100%;
  object-fit: cover;
  cursor:pointer;
  transition: 50ms;
}
.UICharacter.u-focused .UICharacter-container {
  border-color: #4bff00;
}
.UICharacter.u-focused .UICharacter-container-char-icon {
  transform: scale(1.23);
}
.UICharacter.u-selected .UICharacter-container {
  border-color: #ff0000;
}

/**
 * UI_MAP_MENU
 */
.UIMap-menu {
  border: 10px solid;
  border-image: url(/textures/ui_border.png) 3 fill;
  width: 400px;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  grid-gap: 10px;
  padding:20px 30px;
}
.UIMap-menu .UIMap-container {
  width:  140px;
  height: 100px;
  border-radius: 4%;
  overflow : hidden;
  display: block;
  border: 2px solid #00e7ff;
}
.UIMap-menu .UIMap-container-char-icon {
  width: 140px;
  height: 100px;
  margin-left: 0px;
  margin-top: 0px;
  border-style: none;
  border-radius: 4%;
  cursor:pointer;
  transition: 50ms;
  align-items : center ;
  justify-content :center;
  max-width:100%;
}
.UIMap.u-focused .UIMap-container {
  border-color: #4bff00;
}
.UIMap.u-focused .UIMap-container-char-icon {
  transform: scale(1.23);
}