:root {
  /* Your existing color vars… */
  --g1: #161718;
  --ge: #eeeeee; /* We'll use a light grey “blank” color for face‐down/back */
  --b1: #1189d1; /* We’ll make the icon come up in this blue */
  /* (… other vars stay the same) */
}

body {
  background: var(--g1);
}

.container {
  height: 120px;
  width: 600px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.flip-container {
  perspective: 1000px;
  margin: 10px;
  float: left;
  cursor: pointer;
}

.flip-container .flippable {
  transition: 0.5s;
  transform-style: preserve-3d;
  position: relative;
}

/* When “.flipme” is added, rotate to show .back */
.flip-container .flipme {
  transform: rotateY(180deg);
}

/* All three share the same width/height/border‐radius */
.flip-container,
.front,
.back {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 40px;
  border-radius: 5px;
}

/* Both .front and .back must hide their “back face” */
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* 1) FACE‐DOWN (blank) */
.front {
  background: var(--ge); /* solid light grey */
  /* no children inside .front—completely blank */
}

/* 2) FACE‐UP (also same “blank” background so the icon pops) */
.back {
  background: var(--ge); /* match the front, so it’s uniform */
  transform: rotateY(180deg); /* hide until flipped */
  font-family: Verdana, sans-serif;
  /* No text—only the <i> will show */
}

/* 3) Style the icon inside .back */
.back i {
  color: var(--b1); /* blue icon */
  /* font-size is inherited from .flip-container (40px) */
}

/* Remove any old “.back .front { … }” rule—you don’t need it */