/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/** colors generator */
.game-field.color-1 {
  background-color: #eb7361;
}
.color-1 .color-1 {
  background-size: 10px 10px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
}
.game-field.color-2 {
  background-color: #3b9bd9;
}
.color-2 .color-2 {
  background-size: 10px 10px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
}
.game-field.color-3 {
  background-color: #e19e2a;
}
.color-3 .color-3 {
  background-size: 10px 10px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
}
.game-field.color-4 {
  background-color: #5cb130;
}
.color-4 .color-4 {
  background-size: 10px 10px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
}
.game-field.color-5 {
  background-color: #364559;
}
.color-5 .color-5 {
  background-size: 10px 10px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
}
.game-field.color-6 {
  background-color: #e9e0d6;
}
.color-6 .color-6 {
  background-size: 10px 10px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
}
/** colors generator ENDE */
/** game-field generator */
.game-area-2 .game-field {
  width: 50%;
  height: 50%;
}
.game-area-3 .game-field {
  width: 33.33333333%;
  height: 33.33333333%;
}
.game-area-4 .game-field {
  width: 25%;
  height: 25%;
}
.game-area-5 .game-field {
  width: 20%;
  height: 20%;
}
.game-area-6 .game-field {
  width: 16.66666667%;
  height: 16.66666667%;
}
.game-area-7 .game-field {
  width: 14.28571429%;
  height: 14.28571429%;
}
.game-area-8 .game-field {
  width: 12.5%;
  height: 12.5%;
}
/** game-field generator ENDE */
.game-area {
  width: 400px;
  height: 400px;
  background: #cccccc;
}
.game-field {
  transition: border-radius 200ms;
  display: inline-block;
  text-align: center;
  border: 5px solid #cccccc;
  border-radius: 10%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  /* for text
    &::before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }*/
}
.game-field:hover {
  transition: border-radius 200ms;
  border-radius: 15%;
}
.attacked {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 47.5%, rgba(0, 0, 0, 0.4) 47.5%, rgba(0, 0, 0, 0.4) 52.5%, rgba(0, 0, 0, 0.2) 52.5%);
}
.active.active {
  background-size: 10px 10px;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2));
  border-radius: 20%;
}