.correlacionar-traducao-error { border-color: #E63946; color:#E63946; }
.correlacionar-traducao-speech-bubble {
            position: relative;
            display: inline-block;
            width:100%;
            background: #f9f9f9;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;
            font-weight:bold;
            font-size: 24px;
            margin: 20px auto;
        }
        .correlacionar-traducao-speech-bubble::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: #ccc;
            border-bottom: 0;
            margin-left: -10px;
        }

        .correlacionar-traducao-translation {
            font-size: 14px;
            color: gray;
        }
        .correlacionar-traducao-audio-button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        

  .correlacionar-traducao-game-board {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
  }
  .correlacionar-traducao-card {
    width: 100px;
    height: 60px;
    margin: 10px;
    background: #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    border-radius: 8px;
    user-select: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  .correlacionar-traducao-card.correlacionar-traducao-active {
    background-color: #93C5FD;
    transform: scale(1.05);
  }
  .correlacionar-traducao-card.correlacionar-traducao-matched {
    background: #34D399;
    color: white;
    cursor: default;
    transform: scale(0);
    transition: transform 0.4s ease-out;
  }
  .correlacionar-traducao-card {
  cursor: pointer;
  padding: 12px;
  border: 1px solid #ccc;
  margin: 6px;
  display: inline-block;
  user-select: none;
  transition: transform .2s;
}

.correlacionar-traducao-card.correlacionar-traducao-selected {
  transform: scale(1.05);
  border-color: #5b8;
}

.correlacionar-traducao-card.correlacionar-traducao-error {
  border-color: #d33;
  background: #f8dada;
}

.correlacionar-traducao-card.correlacionar-traducao-hidden {
  visibility: hidden;
}

.correlacionar-traducao-retry-btn {
    display: block;
    margin: 20px auto;
    padding: 15px 25px;
    border: none;
    background: #4CAF50;
    color: white;
    font-size: 1.2rem;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}