/*....................................................................................................................*/

#vignette
{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  display: none;
  opacity: 0;
  z-index: 1;
}

#centralWindow
{
  background: var(--white);
  width: calc(var(--cellSize) * 10);
  height: calc(var(--cellSize) * 8);
  font-size: calc(var(--unit) * 40);
  flex-direction: column;
  transform: translateY(calc(0px - var(--cellSize)));
  box-shadow: 0 calc(var(--unit) * 10) calc(var(--unit) * 20) var(--borderDouble) rgba(0, 0, 0, 0.5);
}

/*....................................................................................................................*/

#goalGreen
{
  border-radius: 0 calc(var(--cellSize) / 2) calc(var(--cellSize) / 2) 0;
  border: var(--borderHalf) solid var(--white);
  border-left-width: 0;
}

#goalBlue
{
  border-radius: calc(var(--cellSize) / 2) 0 0 calc(var(--cellSize) / 2);
  border: var(--borderHalf) solid var(--white);
  border-right-width: 0;
}

/*....................................................................................................................*/

#aim, #ball
{
  cursor: pointer;
  width: var(--athleteSize);
  height: var(--athleteSize);
  border: var(--borderFull) solid var(--white);
  border-radius: 50%;
  box-sizing: border-box;
  position: absolute;
}

#aim{background: rgba(255, 255, 255, 0.3)}

#aim:hover
{
  cursor: pointer;
  border-width: var(--borderDouble);
  box-shadow:

    0 0 var(--borderDouble) 0 var(--white),
    0 0 var(--borderDouble) 0 var(--white) inset;
}

#ball{background: rgba(0, 0, 0, 0.7)}

#ball:hover{background: rgba(111, 95, 63, 0.7)}

/*....................................................................................................................*/

#board
{
  width: var(--boardW);
  height: var(--boardH);
  background: var(--white);
  border: var(--borderHalf) solid var(--white);
  border-radius: 0 0 var(--boardRadius) var(--boardRadius);
}

/*....................................................................................................................*/

#boardConsole
{
  width: 50%;
  height: var(--cellSize);
  color: #222;
  background: #999;
  border-radius: calc(var(--cellSize) / 2);
  font-size: calc(var(--boardW) / 60);
  cursor: help;
}

/*....................................................................................................................*/

#middle
{
  width: calc(var(--cellSize) * 0.2);
  height: calc(var(--cellSize) * 0.2);
  background: var(--white);
  border-radius: 50%;
  position: absolute;
  transform:

    translateX(calc(var(--fieldMiddleW) - var(--cellSize) * 0.1))
    translateY(calc(var(--fieldMiddleH) - var(--cellSize) * 0.1));
}