#scratch-card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  margin: 0;
  background: #1a1a1a;
  background-image: url("../img/background.jpg");
  background-position: center;
  font-family: sans-serif;
  overflow: hidden;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

/* 1. Le conteneur définit la taille VISUELLE */
.scratch-container {
  position: relative;
  width: 90%;
  max-width: 600px;
  aspect-ratio: 2 / 1;
  background: #fff;
  border: 0px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}
#scratch-instructions {
  padding: 1em 0;
}
#scratch-action-text {
  display: none;
  text-align: center;
  font-size: 1.3em;
  margin: 1em;
  font-weight: bold;
}
#scratch-action-btn {
  display: none;
  margin: 1em auto;
  padding: 1em;
  max-width: 600px;
  background-image: linear-gradient(45deg, #092094, #2A74DB, #48ABD9);
  font-size: 1.3em;
  white-space:normal;
}

#copy-tooltip {
  display: none;
  margin: auto;
  font-size: 1.25em;
  text-align: center;
}

#scratchCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  z-index: 2;
}

.promo-code {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  background: #fff;
  visibility: hidden;
}
.promo-code.is-ready  {
    visibility: visible;
}
#promo-description {
  font-size: 1.25em;
}

.promo-code strong {
  font-size: 4.5rem;
  color: #D4AF37;

  background-image: linear-gradient(45deg, #BF953F, #B38728, #AA771C, #B38728);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.promo-code p {
  margin: 0;
}

/* Les morceaux qui tombent */
.fragment {
  position: absolute;
  pointer-events: none;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #D4AF37, #FCF6BA);
  z-index: 10;
  animation: fall 0.8s ease-out forwards;
}

@keyframes fall {
  to {
    transform: translate(var(--dx), var(--dy)) rotate(var(--dr));
    opacity: 0;
  }
}