.tarot-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.tarot-wrapper .deck-title {
  text-align: center;
  font-size: 1.5rem;
  margin-top: 30px;
  margin-bottom: 30px;
  color: #ccc;
}

.tarot-wrapper .deck-welcome {
  position: relative;
  z-index: 1;
  padding: 20px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 30px auto;
  color: #567b7d;
  background-color: #567b7d;
  overflow: visible;
  width: auto;
  max-width: 50%;
  /* width: 35%; */
  opacity: 0.75;
  border: 3px solid #67a3a7;
}

/* Contour iridescent animé */
.tarot-wrapper .deck-welcome::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

  /* halo autour de l'élément */
  background: linear-gradient(135deg, #ff00cc, #00ffff, #ffcc00, #ff00cc);
  background-size: 300% 300%;
  animation: iridescentGlow 16s linear infinite;
  filter: blur(25px);
  opacity: 1;

  /* n'affiche que les contours */
  mask-image:
    linear-gradient(to top, transparent 0px, black 20px),
    linear-gradient(to bottom, transparent 0px, black 20px),
    linear-gradient(to left, transparent 0px, black 20px),
    linear-gradient(to right, transparent 0px, black 20px);
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;

  pointer-events: none;
}

/* Animation du dégradé iridescent */
@keyframes iridescentGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.tarot-wrapper .deck {
  position: relative;
  height: 300px;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  user-select: none;
}

.tarot-wrapper .card {
  background: none !important;
  border: none;
  width: 120px;
  height: 180px;
  position: absolute;
  top: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  perspective: 1000px;
  border-radius: 8px;
  box-sizing: border-box;
  transition: transform 0.5s ease, left 0.5s ease, top 0.5s ease;
}

.tarot-wrapper .card .inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
}

.tarot-wrapper .card .front,
.tarot-wrapper .card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #ffcc66;
  border-radius: 8px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.tarot-wrapper .card .front {
  background: #4d002f url('https://www.2054games.net/wp-content/themes/moonlit-dark-custom/assets/images/cards-background.png') center/cover no-repeat;
  color: #ffcc66;
  font-weight: bold;
}

.tarot-wrapper .card .back {
  position: relative;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffcc66;
  transform: rotateY(180deg);
  font-weight: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  text-shadow: 1px 1px 3px #000;
  border-radius: 8px;
}

.tarot-wrapper .card .text-phrase {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  font-size: 14px;
  background-color: rgba(250, 128, 18, 0.5);
  padding: 6px 10px;
  border-radius: 6px;
}

.tarot-wrapper .card.flipped .inner {
  transform: rotateY(180deg);
  border-radius: 8px;
  background-color: black;
  box-shadow:
    0 0 4px orange,
    0 0 8px gold,
    0 0 12px red;
}

.tarot-wrapper #resetContainer {
  text-align: center;
  margin-top: 20px;
  display: none;
  z-index: 2000;
  position: relative;
}

.tarot-wrapper .restart-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ffcc66;
  color: #0c0c0c;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.tarot-wrapper #tarotResult {
  color: #ccc;
  text-align: center;
  margin-top: 60px;
}

.tarot-wrapper #tarotTitle {
  font-size: 50px;
}

.tarot-wrapper #yesNoAnswer {
  position: relative;
  top: -410px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 160px;
  font-weight: bold;
  color: white;
  /* width: 1200px; */
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,      /* transparent en haut */
    rgba(0, 0, 0, 0.5) 30%,   /* noir semi-transparent au milieu */
    rgba(0, 0, 0, 0.5) 70%,   /* noir semi-transparent au milieu */
    rgba(0, 0, 0, 0) 100%     /* transparent en bas */
  );

  opacity: 0;
  transition: opacity 4s ease;
  z-index: 500;
  pointer-events: none;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

.tarot-wrapper #tarotResult {
  margin-top: 80px;
}

.tarot-wrapper #emotion-response {
  width: 400px;
  margin: 20px auto 0 auto; /* marge au-dessus et centré horizontalement */
  color: #ccc;
  text-align: left;
}

@media (max-width: 768px) {

  .tarot-wrapper .deck-welcome {
    /* width: auto; */
    width: 90%;
    font-size: 1.2rem;
  }

  .tarot-wrapper .deck {
    /* height: auto; */
    max-width: 100%;
  }

  .tarot-wrapper #emotion-response {
    width: 90%; /* occupe 90% de la largeur de l’écran */
  }

  .tarot-wrapper #yesNoAnswer {
    width: 100%;
    max-width: 100%;
    /* font-size: 8vw; */
  }
}

.tarot-wrapper .color-indicator {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: black; /* ou white pour plus de contraste */
  text-align: center;
  padding: 4px;
  line-height: 1.1;
  text-shadow: 0 0 3px rgba(255,255,255,0.7); /* améliore lisibilité */
  border: 2px dotted orange;
  background-color: var(--color, red);
  mix-blend-mode: lighten;
  box-shadow:
    0 0 4px orange,
    0 0 8px gold,
    0 0 12px red;
}

.tarot-wrapper .color-indicator.center-bottom {
  bottom: -75px;
  left: 50%;
  transform: translateX(-50%);
}

.tarot-wrapper .color-indicator.bottom-right {
  bottom: -135px;
  right: -80px;
  text-align: center;
}

.tarot-wrapper .color-indicator.bottom-left {
  bottom: -135px;
  left: -80px;
  text-align: center;
}

.tarot-wrapper .circle-center-title {
  font-size: 19px;
  font-weight: bold;
}

.tarot-wrapper .circle-right-title {
  margin-left: -10px;
}

.tarot-wrapper .circle-left-title {
  margin-left: 10px;
}

.main-seye {
  font-size: 19px;
}