.floating-word {

  position: absolute;

  background: rgba(255, 255, 255, 0.9);

  border: 1px solid #ccc;

  padding: 4px 8px;

  border-radius: 10px;

  font-weight: bold;

  box-shadow: 0 2px 8px rgba(0,0,0,0.2);

  z-index: 9999;

  animation: floatUp 1s ease-out forwards;

  pointer-events: none;

  color: #000;

}



@keyframes floatUp {

  0% {

    opacity: 1;

    transform: translateY(0px);

  }

  100% {

    opacity: 0;

    transform: translateY(-50px);

  }

}



    .word-btn {

      margin: 3px;

      cursor: pointer;

    }

    .word-slot {

      border-bottom: 2px solid #ccc;

      min-width: 50px;

      margin: 0 5px 10px 5px;

      display: inline-block;

      cursor: pointer;

      text-align: center;

      font-weight: bold;

      padding: 3px 6px;

      user-select: none;

      vertical-align: middle;

    }

    .word-slot.filled {

      border-color: green;

      color: green;

    }

    .word-slot.empty {

      color: #888;

    }

    .card-img-top {

    

 

      object-fit: cover;

    }

    .feedback-icon {

      font-size: 1.2rem;

      vertical-align: middle;

      margin-left: 10px;

    }

    .feedback-icon.correct {

      color: green;

    }

    .feedback-icon.incorrect {

      color: red;

    }



    /* Responsive adjustments */

    @media (max-width: 576px) {

      .word-btn {

        font-size: 0.9rem;

        padding: 4px 8px;

        margin: 2px 2px;

      }



      .word-slot {

        min-width: 40px;

        font-size: 0.9rem;

        margin: 0 3px 8px 3px;

        padding: 2px 5px;

      }



      .d-flex.justify-content-center {

        flex-wrap: wrap;

      }

    }

    .signoPregunta {
    position: absolute;
    padding-left: 20px;
    color: blue;
}