body[data-decor="jeu"] {
  background-color: #09080f;
  background-image: url("/images/a1.webp");
}

.cadre-jeu {
  
  container-type: normal;
  font-size: 1rem;
  background-color: transparent;
  background-image: none;
  border-radius: 0;
}

#hud {
  position: absolute;
  top: 1.6%;
  left: 1.2%;
  right: 1.2%;
  z-index: 700;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(6px, 1.5cqw, 24px);
  container-type: inline-size;
  box-sizing: border-box;
  color: #fff;
  
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 700;
  min-height: 0;
}

#calcul,
#hud-etat {
  padding: clamp(4px, 1.1cqh, 12px) clamp(8px, 1.4cqw, 22px);
  box-sizing: border-box;
  background: rgba(12, 14, 22, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
}

#hud-etat {
  flex: 0 0 auto;
  
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5cqw, 24px);
}

#cadre {
  
  --taille-oeuf: 17.5%;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  container-type: size;
  font-size: 0.85cqw;
  
  touch-action: none;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  
  background-color: #3e736b;
  background-image: url("/images/background-1.jpg");
  background-size: cover;
  background-position: center;
  border: 0px solid rgb(0, 0, 0);
  border-radius: 25px;
}

#image1 {
  display: block;
  
  z-index: 600;
  top: 71%;
}

#image2,
#image3,
#image4,
#image5,
#image6,
#image7 {
  height: var(--taille-oeuf);
  width: auto;
  
  transition: top var(--pas-oeuf, 0ms) linear;
}

#image2 {
  display: block;
  z-index: 1;
}
#image3 {
  display: block;
  z-index: 1;
}
#image4 {
  display: block;
  z-index: 1;
}
#image5 {
  display: block;
  z-index: 1;
}
#image6 {
  display: block;
  z-index: 1;
}

#image7 {
  display: block;
  visibility: hidden;
  z-index: 1;
  
  transition: top var(--pas-mystere, 0ms) linear;
}

#texte2,
#texte3,
#texte4,
#texte5,
#texte6 {
  z-index: 500;
  
  font-family: "Nunito", Verdana, sans-serif;
  
  font-size: max(11px, 250%);
  
  
  height: var(--taille-oeuf);
  aspect-ratio: 1;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  transition: top var(--pas-oeuf, 0ms) linear;
  
  transform: translateY(2%);
  color: #101a33;
  font-weight: 800;
  
  text-shadow:
    0.06em 0 0.02em #ffffff,
    -0.06em 0 0.02em #ffffff,
    0 0.06em 0.02em #ffffff,
    0 -0.06em 0.02em #ffffff,
    0.045em 0.045em 0.02em #ffffff,
    -0.045em 0.045em 0.02em #ffffff,
    0.045em -0.045em 0.02em #ffffff,
    -0.045em -0.045em 0.02em #ffffff,
    0 0 0.25em rgba(255, 255, 255, 0.85);
}

#texte2.nombre-long,
#texte3.nombre-long,
#texte4.nombre-long,
#texte5.nombre-long,
#texte6.nombre-long {
  font-size: max(9px, 215%);
}

#hud p {
  margin: 0;
  white-space: nowrap;
  color: #fff;
}

#calcul {
  flex: 0 1 auto;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  
  font-size: max(13px, 4cqw);
  
  line-height: 1.25;
  padding-top: clamp(2px, 1.1cqh, 12px);
  padding-bottom: clamp(2px, 1.1cqh, 12px);
  font-weight: bold;
  letter-spacing: 0.02em;
}

#palier,
#points,
#etoiles {
  flex: 0 0 auto;
  
  font-size: max(11px, 2.2cqw);
  color: #e8dcd4;
}

.swal2-html-container .monnaie {
  margin-right: 0.35em;
}

#hud p#etoiles {
  color: #ffd76a;
  font-weight: bold;
}

#vie {
  display: none;
}

#vies {
  flex: 0 0 auto;
  display: flex;
  gap: 0.2em;
  
  font-size: max(10px, 2.5cqw);
  line-height: 1;
}

#pause-tactile {
  display: none;
  flex: 0 0 auto;
  pointer-events: auto;
  
  width: max(32px, 6cqh);
  height: max(32px, 6cqh);
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: max(3px, 0.8cqh);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(12, 14, 22, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#pause-tactile::before,
#pause-tactile::after {
  content: "";
  display: block;
  width: max(3px, 0.9cqh);
  height: max(12px, 2.6cqh);
  border-radius: 1px;
  background: #ffffff;
}

@media (pointer: coarse) {
  #pause-tactile {
    display: flex;
    
    width: max(44px, 6cqh);
    height: max(44px, 6cqh);
  }
}

.coeur {
  
  width: 1em;
  
  height: 1em;
  display: inline-block;
  color: #d8443c;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.coeur-plein {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C12 21 3 14.5 3 8.6C3 5.5 5.4 3 8.4 3C10.2 3 11.4 4 12 5.1C12.6 4 13.8 3 15.6 3C18.6 3 21 5.5 21 8.6C21 14.5 12 21 12 21Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C12 21 3 14.5 3 8.6C3 5.5 5.4 3 8.4 3C10.2 3 11.4 4 12 5.1C12.6 4 13.8 3 15.6 3C18.6 3 21 5.5 21 8.6C21 14.5 12 21 12 21Z' fill='%23000'/%3E%3C/svg%3E");
}

.coeur-vide {
  color: rgba(255, 255, 255, 0.55);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C12 21 3 14.5 3 8.6C3 5.5 5.4 3 8.4 3C10.2 3 11.4 4 12 5.1C12.6 4 13.8 3 15.6 3C18.6 3 21 5.5 21 8.6C21 14.5 12 21 12 21Z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C12 21 3 14.5 3 8.6C3 5.5 5.4 3 8.4 3C10.2 3 11.4 4 12 5.1C12.6 4 13.8 3 15.6 3C18.6 3 21 5.5 21 8.6C21 14.5 12 21 12 21Z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#pause-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  
  z-index: 100000;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 4vw;
}

#pause-message {
  color: #fff;
}

#pause-title {
  font-size: clamp(2rem, 9vw, 5rem);
  font-weight: bold;
  letter-spacing: 0.2em;
  margin: 0 0 0.3em 0;
  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.8);
}

#pause-subtitle,
#pause-subtitle-tactile {
  font-size: clamp(0.9rem, 3vw, 1.5rem);
  margin: 0;
  color: #ddd;
}

.pause-consigne-tactile {
  display: none;
}

@media (pointer: coarse) {
  .pause-consigne-clavier {
    display: none;
  }

  .pause-consigne-tactile {
    display: block;
  }
}

.plein-ecran-pause {
  top: max(8px, 2vh);
  right: max(8px, 2vw);
  z-index: 1;
}

#pause-menu {
  margin-top: clamp(18px, 4vh, 36px);
  padding: clamp(8px, 1.4vh, 14px) clamp(16px, 3vw, 30px);
  font-family: Verdana, sans-serif;
  font-size: clamp(0.8rem, 2.2vw, 1.05rem);
  font-weight: bold;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
  #pause-menu:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #ffffff;
  }
}

#pause-menu:focus-visible {
  outline: 2px solid #79bbff;
  outline-offset: 3px;
}

.lien-menu {
  max-width: 100%;
  padding: 0.35em 0.9em;
  font-family: inherit;
  font-size: 0.9em;
  color: #5a6570;
  background: transparent;
  border: 1px solid #d4d8dd;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .lien-menu:hover:not(:disabled) {
    color: #2d3339;
    background: #f1f3f5;
    border-color: #aeb5bd;
  }
}

.lien-menu:focus-visible {
  outline: 2px solid #79bbff;
  outline-offset: 2px;
}

.lien-menu:disabled {
  color: #9aa1a9;
  cursor: progress;
}

body.swal2-shown #image1 {
  visibility: hidden;
}

body.swal2-shown #pause-message {
  visibility: hidden;
}

#cadre::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  top: 91%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38) 18%,
    rgba(255, 255, 255, 0.38) 82%, transparent);
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.14);
  pointer-events: none;
  z-index: -1;
}

#eclat {
  position: absolute;
  height: var(--taille-oeuf);
  aspect-ratio: 1;
  width: auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 224, 130, 0.75) 35%, rgba(255, 200, 80, 0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 550;
}
#eclat.actif {
  animation: eclat 380ms ease-out forwards;
}
@keyframes eclat {
  0%   { opacity: 0.95; transform: scale(0.55); }
  100% { opacity: 0;    transform: scale(1.7); }
}

#image1.bond {
  transform-origin: 50% 100%;
  animation: bond 220ms ease-out;
}
@keyframes bond {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.1, 0.88); }
  70%  { transform: scale(0.96, 1.06); }
  100% { transform: scale(1, 1); }
}

#cadre::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 550;
  opacity: 0;
  box-shadow: inset 0 0 70px 14px rgba(255, 70, 70, 0.6);
}
#cadre.rate::before {
  animation: rate 420ms ease-out;
}
@keyframes rate {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
#vies.perdue {
  animation: perdue 450ms ease-out;
}
@keyframes perdue {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.28); filter: drop-shadow(0 0 6px rgba(255, 80, 80, 0.9)); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #eclat.actif,
  #image1.bond,
  #vies.perdue {
    animation: none;
  }
}