.flashcard {

  width: min(100%, 520px);

  height: 390px;

  border: none;

  background: transparent;

  padding: 0;

  perspective: 1200px;

  cursor: pointer;

}



.flashcard-inner {

  position: relative;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transition: transform 0.65s ease;

}



.flashcard.flipped .flashcard-inner {

  transform: rotateY(180deg);

}



.flashcard-face {

  position: absolute;

  inset: 0;

  border-radius: 36px;

  backface-visibility: hidden;

  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);

  border: 3px solid #dbe7f8;

  box-shadow: 0 24px 40px rgba(83, 128, 186, 0.14);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 16px;

  padding: 28px;

}



.flashcard-front {

  background:

    radial-gradient(circle at top right, rgba(118, 174, 248, 0.22), transparent 28%),

    linear-gradient(180deg, #ffffff 0%, #f5faff 100%);

}



.flashcard-back {

  transform: rotateY(180deg);

  background:

    radial-gradient(circle at top left, rgba(246, 141, 191, 0.22), transparent 26%),

    linear-gradient(180deg, #ffffff 0%, #fff7fb 100%);

}



.flashcard-label {

  font-size: 1rem;

  color: #7c94b8;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}



.flashcard-value {

  font-size: 2rem;

  color: #315f9f;

  font-weight: 900;

  text-align: center;

}



.big-value {

  font-size: clamp(4.6rem, 12vw, 7rem);

  line-height: 1;

}



.flashcard-visual {

  font-size: clamp(4rem, 10vw, 5.5rem);

  font-weight: 900;

  color: #4c86de;

  line-height: 1;

}



.emoji-visual {

  font-size: clamp(5rem, 12vw, 6.5rem);

}



.flashcard-phrase {

  font-size: 1.4rem;

  font-weight: 800;

  color: #6d78b6;

  text-align: center;

}



@media (max-width: 640px) {

  .flashcard {

    height: 330px;

  }



  .flashcard-face {

    border-radius: 28px;

    padding: 20px;

  }



  .flashcard-phrase {

    font-size: 1.15rem;

  }

}