/* reset */


body {
  margin: 0;
  overflow: hidden;
  background: black;
}

/* jeu global */

#game {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* images */

#sceneImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* zones */

#choicesContainer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* zones clicable avec delimitation rouge */

.choice {
  position: absolute;
  cursor: pointer;


  background: rgba(255,0,0,0.3);
  border: 2px solid red;
  z-index: 999;
pointer-events: auto;
  
}
/*animation scène 3*/
.shake {

  animation: shake 0.3s infinite;

}

@keyframes shake {

  0% { transform: translateX(0px); }

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

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

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

  100% { transform: translateX(0px); }

}

/*animation scène 4*/

#scene4Game {

  display: none;

  position: absolute;
  inset: 0;

  z-index: 10;


}

/* Images mini jeu */

#scene4Game img {

  position: absolute;

  animation: movearound 1500ms infinite alternate;

  mix-blend-mode: multiply;

  cursor: crosshair;
  

}

/* positions */

#scene4Game img:nth-child(1) {

  height: 30vh;
  top: 20%;

}

#scene4Game img:nth-child(2) {

  height: 50vh;
  bottom: 10%;

}

#scene4Game img:nth-child(3) {

  height: 32vh;
  top: 40%;

}

#scene4Game img:nth-child(4) {

  height: 30vh;
  top: 25%;

}

#scene4Game img:nth-child(5) {

  height: 15vh;
  bottom: 10%;

}

@keyframes movearound {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(500px);
  }

}

/* score */

#score {

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 5vw;

  color: rgb(0, 0, 0);

}

/*--------------------*/
/* Scène C Huberta au RH
/* ------------------- */

#sceneCOverlay {

  display: none;

  position: absolute;
  inset: 0;

  z-index: 990;

  pointer-events: none;

}

/* juste Huberta */

.huber img {

  width: 920px;

  position: absolute;

  top: 297px;
  left: 500px;

  z-index: 999;
cursor: pointer;
pointer-events: auto;
}

/* animation fumée */

.smoke {

  position: absolute;

  top: 30%;
  left: 55%;

  transform: translate(-50%, 50%);

}

/* text fumée */

.smoke ul {

  margin: 0;
  padding: 0;

}

.smoke ul li {

  list-style: none;

  color: #00fffb;

  font-size: 2em;

  font-weight: bold;

  letter-spacing: 5px;

  filter: blur(0.5px);

  animation: popopop 2s linear infinite;

}

/* délais de l'apparition de la fumée */

.smoke ul li:nth-child(1) { animation-delay: 0s; }
.smoke ul li:nth-child(2) { animation-delay: .4s; }
.smoke ul li:nth-child(3) { animation-delay: .8s; }
.smoke ul li:nth-child(4) { animation-delay: 1.2s; }
.smoke ul li:nth-child(5) { animation-delay: 1.6s; }
.smoke ul li:nth-child(6) { animation-delay: 2s; }
.smoke ul li:nth-child(7) { animation-delay: 2.2s; }

/* animation fumée */

@keyframes popopop {

  0% {

    transform: rotate(0deg) translateY(0px);

    opacity: 1;

    filter: blur(1px);

  }

  100% {

    transform: rotate(45deg) translateY(-200px);

    opacity: 0;

    filter: blur(20px);

  }

}

/*--------------------*/
/* Scène C Huberta au RH Boite de dialogue
/* ------------------- */

#dialogueBox {

  display: none;

  position: absolute;

  bottom: 0;
  left: 0;

  width: 500px;

  padding: 30px;

  background: rgba(0,0,0,0.8);

  color: white;

  z-index: 990;

  font-family: monospace;

}

/* texte */

#dialogueText {

  font-size: 2em;

  margin-bottom: 20px;

}

/* input */

#nameInput {

  padding: 10px;

  font-size: 1.2em;

}

/* bouton pour le nom */

#validateName {

  padding: 10px 20px;

  font-size: 1.2em;

  cursor: pointer;

}

/* choix */

#choices {

  display: none;

  margin-top: 20px;

}

#choices button {

  margin-right: 20px;

  padding: 15px;

  font-size: 1em;

  cursor: pointer;

}

/* ========================= */
/* SCÈNE X */
/* ========================= */

#sceneXOverlay {

  display: none;

  position: absolute;

  inset: 0;

  z-index: 80;

}

/* Olliver */

#olliver {

  position: absolute;

  width: 500px;

  left: 700px;
  top: 150px;

  cursor: pointer;

}

/* dilogue avec code */

#codeBox {

  display: none;

  position: absolute;

  bottom: 30px;
  left: 30px;

  width: 40%;

  padding: 20px;

  background: rgba(0,0,0,0.8);

  color: white;

  border-radius: 20px;

  z-index: 100;

}

#codeInput {

  padding: 10px;

  font-size: 1.2em;

}

#validateCode {

  padding: 10px;

  margin-left: 10px;

}

/* ----------------------*/
/* animation glitch pour olliver */
/* ------------------------- */

.glitch {

  animation: glitch 0.15s infinite;

}

@keyframes glitch {

  0% {

    transform: translate(0px, 0px);

    filter: hue-rotate(0deg);

  }

  20% {

    transform: translate(-5px, 5px);

  }

  40% {

    transform: translate(5px, -5px);

    filter: hue-rotate(90deg);

  }

  60% {

    transform: translate(-5px, -5px);

  }

  80% {

    transform: translate(5px, 5px);

    filter: hue-rotate(180deg);

  }

  100% {

    transform: translate(0px, 0px);

    filter: hue-rotate(360deg);

  }

}

/* juste crane */

#crane {

  width: 920px;

  position: absolute;

  top: 297px;
  left: 500px;

  z-index: 999;
cursor: pointer;
pointer-events: auto;
}