/* GENERAL */
body {
  background: var(--app-bg);
}

#app {
  background: linear-gradient(to right, #fbd6e3, #a9ede9);
}


/* ANIMATION DE CHARGEMENT */
.loading {
  position: absolute;
  border: 4px solid #fff;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  animation: tile-rotate 4s linear infinite;
}

.loading:before,
.loading:after {
  position: absolute;
  background-color: #fff;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  content: '';
  animation: sliding-tile 2s infinite linear;
}

.loading:after {
  animation: sliding-tile-2 2s infinite linear;
}

@keyframes sliding-tile {
  0% {
    transform: translate(-50%, -50%) translate(-50%, -50%);
  }

  10% {
    transform: translate(-50%, -50%) translate(50%, -50%);
  }

  20%,
  80% {
    transform: translate(-50%, -50%) translate(50%, 50%);
  }

  90% {
    transform: translate(-50%, -50%) translate(-50%, 50%);
  }

  100% {
    transform: translate(-50%, -50%) translate(-50%, -50%);
  }
}

@keyframes sliding-tile-2 {
  0% {
    transform: translate(-50%, -50%) translate(50%, 50%);
  }

  10% {
    transform: translate(-50%, -50%) translate(-50%, 50%);
  }

  20%,
  80% {
    transform: translate(-50%, -50%) translate(-50%, -50%);
  }

  90% {
    transform: translate(-50%, -50%) translate(50%, -50%);
  }

  100% {
    transform: translate(-50%, -50%) translate(50%, 50%);
  }
}

@keyframes tile-rotate {
  0%,
  20% {
    transform: perspective(50px) rotateY(0deg);
  }

  30%,
  70% {
    transform: perspective(50px) rotateY(180deg);
  }

  80%,
  100% {
    transform: perspective(50px) rotate(360deg);
  }
}


/* THEME */
/* --- Clair --- */
body.light {
  background: var(--wth-app);
}

body.light #app {
  background: var(--wth-gamapp)
}

/* --- Sombre --- */
body.dark {
  background: var(--blk-app);
}

body.dark #app {
  background: var(--blk-gamapp)
}

/* POLICE */
/* --- Moderne --- */
body.modern #toggle-instructions-btn,
body.modern #toggle-sound-settings-btn {
  font-family: var(--mdn-font);
}

/* --- Classique --- */
body.tradi #toggle-instructions-btn,
body.tradi #toggle-sound-settings-btn {
  font-family: var(--trd-font);
}

/* TAILLE */ /* --- Pas disponible --- */