@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

/* ---------------------------------- */
/* Flip card CSS                      */
/* ---------------------------------- */

/* Parent class of playing card */
.flip-card {

  /* Flip card position */
  position: relative;

  /* Flip card size */
  width: 200px;
  height: 250px;

  /* Flip card styling */
  margin: 15px 0px 20px 0px;
  background-color: transparent;
  perspective: 1000px; /* enables 3d effect */

}

/* This container is needed to position the face-down side */
.flip-card-inner {

  /* Inner position */
  position: relative;

  /* Inner size */
  width: 100%;
  height: 100%;

  /* Inner styling */
  transform-style: preserve-3d;
  border-radius: 12px;

}
.flip-card[face="up"] .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card[face="down"] .flip-card-inner {
  transform: rotateY(0deg);
}

/* Make card flip over on key press */
.flip-card[status="feedback"] .flip-card-inner {
  transform: rotateY(180deg);
  transition: transform 0.2s;
}

.flip-card-down, .flip-card-up {

  /* Card face position */
  position: absolute;

  /* Card face size */
  width: 100%;
  height: 100%;

  /* Card face layout */
  display: grid;
  justify-content: center;
  align-items: center;

  /* Card face styling */
  background: #EEE;
  border-radius: 6px;
  border: 2px solid #101010;
  box-shadow: 0 8px 12px 1px rgba( 0, 0, 0, 0.2 );

  /* Card face visibility */
  -webkit-backface-visibility: visible;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;

}

/* Card suit (face-down) */
.flip-card-down img {

  /* Suit position */
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  /* Suit size */
  width: 60%;

  /* Suit parameters */
  object-fit: contain;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* Suit styling */
  -webkit-filter: invert(90%);
  filter: invert(90%);

}

/* Error-catching: hide suit when card flips */
.flip-card[status="feedback"] .flip-card-inner .flip-card-down img {
  display: none;
}

/* Face-up card */
.flip-card-up {

  /* Card position */
  transform: rotateY(180deg);

  /* Card layout */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;

  /* Card styling */
  background-color: #F8F8F8;

}

.flip-card-up p {
  color: black;
  font-size: 46px;
}

/* Card corners */
.flip-card-up .bottom-right-corner, .flip-card-up .top-left-corner {

  /* Corner positions */
  position: absolute;

  /* Corner sizes */
  width: calc(1.33 * 15%);
  height: 15%;

}
.flip-card-up .top-left-corner {
  left: 2.5%;
  top: 2.5%;
  border-top: 3px solid #EEE;
  border-left: 3px solid #EEE;
  border-top-left-radius: 12px;
}
.flip-card-up .bottom-right-corner {
  right: 2.5%;
  bottom: 2.5%;
  border-bottom: 3px solid #EEE;
  border-right: 3px solid #EEE;
  border-bottom-right-radius: 12px;
}

.flip-card .choice-indicator {

  /* Indicator position */
  position: absolute;
  top: calc(20px + 100%);
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);

  /* Indicator size */
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-bottom-color: #D3D3D3;

  /* Indicator styling */
  visibility: hidden;

}

.flip-card .choice-indicator[status="select"] {
  visibility: visible;
}