body {
/* ----- Fond rétro avec effet bounce + cycle ----- */
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

/* Le fond animé est isolé sur ::before */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../image/fond.webp") center/100% 100% no-repeat, MidnightBlue;
  z-index: -1;
  animation: bgPulse 2s ease-in-out infinite alternate, bgCycle 30s linear infinite;
}

/* Effets du fond */
@keyframes bgPulse {
  0% { background-size: 100% 100%; }
  100% { background-size: 115% 115%; }
}

@keyframes bgCycle {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}


#clickerContainer, #shopContainer {
  display: inline-block;
  margin: 20px;
}

button {
  margin-top: 10px;
  padding: 5px 10px;
  cursor: pointer;
}

    .retro-button {
      display: inline-block;
      padding: 15px 25px;
      margin: 10px;
      background: #0000ff;
      border: 3px outset #000;
      color: white;
      text-decoration: none;
      font-size: 1.2em;
      text-shadow: 1px 1px #000;
      transition: transform 0.2s;
    }
    .retro-button:hover {
      animation: bounce 0.3s ease;
      background: #6060ff;
      box-shadow: 0 0 10px #fff;
    }
    @keyframes bounce {0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

#cookie {
  width: 200px;
  cursor: pointer;
  transition: transform 0.1s;
}

/* Bounce du cookie */
.cookie-bounce {
  animation: cookieBounce 0.2s ease;
}

@keyframes cookieBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* optionnel: style pour le bouton mute quand activé */
#muteBtn.muted {
  background: #444;
  color: #bbb;
  box-shadow: none;
}