/* =====================================================
   BOTÓN IR ARRIBA
   (no usado por el script Emparejar)
===================================================== */

#irarriba {
  position: fixed;
  right: 7px;
  bottom: 50px;

  width: 46px;
  height: 50px;

  padding: 3px;
  overflow: hidden;

  border-radius: 60%;
  box-shadow: 1px 1px 2px 1px #ec661f;

  opacity: 0.7;
  z-index: 3000;
}



/* =====================================================
   CONTENEDORES DE CARTAS
   Usado por:
   - randomizePositions()
   - startFloating()
===================================================== */

#colWords,
#colTranslations {
  position: relative;
  min-height: 320px;
}



/* =====================================================
   CARTAS DEL JUEGO (.item)
   Usado intensivamente en el script
===================================================== */

.item {

  position: absolute;

  width: fit-content;

  padding: 8px 14px;
  margin: 2px;

  font-size: 0.7em;
  font-weight: bold;

  background-color: #f2f2f2;

  border-radius: 6px;

  cursor: pointer;

  transition:
    left .35s ease,
    top .35s ease,
    transform .2s ease;
}



/* =====================================================
   BORDES DIFERENTES POR COLUMNA
===================================================== */

#colWords .item {
  border: 1px solid #e90707;
}

#colTranslations .item {
  border: 1px solid #423ed8;
}



/* =====================================================
   HOVER CARTAS
===================================================== */

.item:hover {
  transform: scale(1.08);
  z-index: 10;
}



/* =====================================================
   ESTADOS DE CARTAS
   Usados por el script:
   - selected
   - matched
   - wrong
===================================================== */

.selected {
  color: #f02f04 !important;
}

.item.matched {
  background-color: #6fdc8c;
  opacity: .6;
  pointer-events: none;
}



/* =====================================================
   CARTA INCORRECTA
   (usado por handleWrong)
===================================================== */

.card.item.wrong {
  background-color: #f14668;
  color: white;
  animation: shake 0.3s;
}



/* =====================================================
   CARTAS CON CLASE "card"
   ⚠ Posible CSS heredado de Bulma
===================================================== */

.card.item {
  cursor: pointer;
  margin-top: 2px;
}

.card.item:hover {
  transform: scale(1.002);
}

.card.item.selected {
  background-color: #ffe08a;
  transform: scale(1.08);
}

.card.item.matched {
  background-color: #48c78e;
  color: white;
  transform: scale(1.05);
}



/* =====================================================
   ANIMACIÓN SHAKE
   ⚠ ERROR:
   el keyframe se llama rshake pero la clase usa shake
===================================================== */

@keyframes rshake {

  0% { transform: translateX(0); }

  25% { transform: translateX(-4px); }

  50% { transform: translateX(4px); }

  75% { transform: translateX(-4px); }

  100% { transform: translateX(0); }

}



/* =====================================================
   ESTILOS GRID
   ⚠ Posiblemente no usados por Emparejar
===================================================== */

.grid .card {
  border: 2px solid #ffffff;
}

.grid.card1 .card {
  border-left-color:#98e3ff;
}

.grid.card2 .card {
  border-left-color:#eeaaff;
}

.grid.card3 .card {
  border-left-color: #423ed8;
}

.grid.card4 .card {
  border-left-color: #ffc38c;
}



/* =====================================================
   ANIMACIONES DE CELEBRACIÓN
   Usado por celebrate()
===================================================== */

@keyframes pulse {

  0% { transform: scale(1); }

  50% { transform: scale(1.15); }

  100% { transform: scale(1); }

}

@keyframes glow {

  0%, 100% { box-shadow: 0 0 10px rgb(210, 209, 204); }

  50% { box-shadow: 0 0 25px rgb(243, 242, 238); }

}



/* =====================================================
   CARTAS EN CELEBRACIÓN
   Activado por:
   celebrate()
===================================================== */

.item.celebrate {

  animation:
    pulse 0.6s ease-in-out 3,
    glow 0.6s ease-in-out 3;

  background: #ffffff;

}



/* =====================================================
   CONFETTI
   Usado por shootConfetti()
===================================================== */

#confetti-container {

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  overflow: hidden;

  z-index: 1000;
}



.confetti-piece {

  position: absolute;

  width: 6px;
  height: 12px;

  background-color: red;

  opacity: 0.8;

  transform: rotate(0deg);

  animation: fall 3s linear forwards;

}



/* =====================================================
   ANIMACIÓN CAÍDA CONFETTI
===================================================== */

@keyframes fall {

  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(500px) rotate(360deg);
    opacity: 0;
  }

}