/* Styles généraux */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: white;
  color: black;
  height: 100%;
}


/* Style des écrans */
/* .screen {
  display: none; 
  flex-direction: column;
  align-items: center;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #FCF6BD;
  transition: opacity 0.3s ease;
  opacity: 0;
} */

/* Quand une écran est actif, on l'affiche et on rend opaque */
.screen.active {
  display: flex;
  opacity: 1;
  z-index: 10;
}

.screen.amnesia {
  background-color: #425179;
}

.screenHeader {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: 30px 0 30px 0;
}

.screenTitle {
  display:flex;
  justify-content: center;
  text-align: center;
  color: #5f02e2;
  font-weight: bold;
  font-size: 1.5em;
  margin: 0 0 18px 0;
}

.screenSubTitle {
  display:flex;
  justify-content: center;
  text-align: center;
  color: #4E4187;
  font-size: 1.3em;
  margin: 10px 0 0px 10px;
}

.screenTitle.amnesia {
  color: rgb(151, 242, 249);
  /* z-index: 12; */
}

.screenSubTitle.amnesia {
  font-weight: bold;
  color: white;
  /* z-index: 12; */
}

.unveilScreenTitle {
  font-weight: bold;
  font-size: 1.4em;
  justify-content: center;
  text-align: center;
  color: rgb(255, 198, 198);
}

button {
  display:flex;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  font-size: 1.5em;
  width: 90%;
  height: 40px;
  border: none;
  border-radius: 8px;
  background-color: #E4C1F9;
  color: black;
  cursor: pointer;
  margin-top: 13px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}

button:hover {
  background-color: #D0F4DE;
}

button:disabled {
  opacity: 0.5;           /* Rends le bouton moins opaque, donc "visuellement" désactivé */
  cursor: not-allowed;    /* Change le curseur pour indiquer que c'est inactif */
  /* Optionnel : tu peux aussi changer la couleur de fond ou la couleur du texte */
}

.okButton {
  background-color: #FF99C8;
  color: black;
  border-radius: 12px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}

.okButton:hover {
  background-color: #A9DEF9;
  
}

.cardsOrButtonsContainer {
  display: flex;
  align-items: center;
  width: 90%;
  flex-direction: column;
  height: 100%;
}

.card .unavailable {
  opacity: 0.5; 
  cursor: not-allowed;
}

/* .overlayContainer {
  display: none;
  position:fixed;
  justify-content: center;
  top:30%; 
  left:0%; 
  width: 100%;
  height: 100%
} */

.overlayContainer{
  position: fixed; inset: 0;
  z-index: 40;                 /* tu peux garder 1000 !important si tu veux */
  display: flex;
  justify-content: center; align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

.overlayContainer.active{
  pointer-events: auto;
  opacity: 1;
}


@property --oy { syntax: '<number>'; inherits: false; initial-value: 1; }

.overlay{
  display: flex; 
  flex-direction: column;
  width:80%; 
  height: max-content;
  padding: 30px 30px;
  border-radius: 20px;
  background: rgba(39, 140, 177, 1); 
  justify-content: center; 
  align-items: center;

  transform: translateY(calc(var(--oy) * 120%));
  --oy: 1;
  transition: transform 320ms cubic-bezier(.22,.95,.24,.99);
}
.overlayContainer.active .overlay{ --oy: 0; }


#eliminationConfirmationText, #backConfirmationText, #unavailableNameChoiceText {
  color: black;
  font-size: 1.3em;
}

#bottomButtonsContainer {
  display: none;
  position: absolute;
  top: 83%;                 
  /* left:10%; */
  width: 100%;
  justify-content: space-evenly;
  /* align-items: center; */
  align-items: flex-end;
}

#remaingInfiltratorsCartouch {
    display: none;
    opacity: 0;
    background-color: #588a01; /* Fond semi-transparent noir */
    border-radius: 12px;           /* Arrondi des angles */
    padding: 12px 12px;            /* Espacement intérieur */
    color: white;                  /* Couleur du texte */
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Ombre portée */
    z-index: 9999;                 /* Toujours au-dessus */
    height: auto;
    /* max-width: 200px;    */
    opacity: 0.9; 
    width: max-content;
}

#remaingInfiltratorsCartouch.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

#remaingInfiltratorsCartouchTitle {
  font-size: 0.9em;
  color: white;
}

#remaingInfiltratorsCartouchInfo {
  display: flex;
  font-size: 0.8em;
  justify-content: space-between;
  flex-direction: column;
  /* width: auto; */
}

#backButtonOverlay, #amnesiaButtonOverlay {
  display: none;
  opacity: 0.4;
  justify-content: center;
}


#backButton, #amnesiaButton {
  font-size: 0.9em;
  margin-top: 0px;
  padding: 8px 10px;
  margin-top: Opx;
  width:max-content;
}

#backButtonOverlay.active, #amnesiaButtonOverlay.active, #bottomButtonsContainer.active {
  display:flex;
  flex-direction: row;
  opacity: 1;
  z-index: 10;
  white-space: nowrap;
}

/* Mets-les au-dessus, sans forcer position */
.overlayContainer { z-index: 1000 !important; }
#amnesiaModeHeader,
#backButtonOverlay,
#amnesiaButtonOverlay,
#bottomButtonsContainer,
#remaingInfiltratorsCartouch {
  z-index: 1001 !important;               /* > .screen (10) */
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Remets le contenu net (évite opacity qui ternit le texte) */
#backButtonOverlay, #amnesiaButtonOverlay {
  opacity: 1 !important;
  /* Si tu veux un léger fond : background: rgba(255,255,255,.88); */
}


#amnesiaModeHeader {
  display: none;
  flex-direction: column;
  position:absolute;
  background-color: #39393A;
  padding: 20px 12px;
  top: 0px;
  width: 100%;
 
  box-shadow: 1px 1px 10px black;
}

#amnesiaModeHeader.active {
  display: flex;
  z-index: 11;
}

#unveiledSecretCard {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 2em;
  font-weight: bolder;
  margin: 0px 0px 40px 0px;
  color: #efd3be;
}

/* **************************************************** */

/* Style général pour la section réglages */

/* Slider styling */
.sliderContainer {
  margin-bottom: 30px;
}

#playerCount {
  width: 100%;
}

#playerCountValue {
  font-weight: bold;
  margin-left: 10px;
}

/* Cartouche styles */
.cartouche {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  padding: 10px;
  height: 34px;
  width: 95%;
  background-color: #E4C1F9;
  border-radius: 8px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}

/* Label de la cartouche */
.cartoucheLabel {
  flex: 1;
  font-size: 1.2em;
  font-weight: bold;
}

/* Boutons '-' et '+' */
.cartoucheBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D0F4DE;
  border: none;
  color: black;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 1.2em;
  cursor: pointer;
  margin: 0 7px;
  width: auto;
  height: 30px;
  text-align: center;
}

.cartoucheBtn:hover {
  background-color: #0052cc;
}

/* Valeur numérique */
.cartoucheValue {
  min-width: 30px;
  text-align: center;
  font-size: 1.2em;
  margin: 0 5px;
}


/* ************************************************* */


  /* Responsiveness : ajustements pour petits écrans */
  @media (max-width: 600px) {
    body {
      font-size: 14px;
    }

    /* .screenHeader {
      width: 90%;
    } */

    button {
      width: 90%;
      font-size: 1.2rem;
    }

    .textInput {
      font-size: 16px;
    }

    .cardsOrButtonsContainer {
      display: flex;
      align-items: center;
      width: 90%;
      flex-direction: column;
      height: 100%;
    }

  }




/* ************************************************ */

/* rend --k animable/interpolable */
/* ➊ Enregistrer les variables pour qu'elles s'animent (WebKit/Safari) */
@property --k-interact { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --k-pulse    { syntax: '<number>'; inherits: false; initial-value: 1; }



/* *****************************************************
Screens                               ******************
***************************************************** */

/* ---------- PAGES (écrans) : slide horizontal ---------- */
@property --sx { syntax: '<number>'; inherits: false; initial-value: 0; } /* 0 = à l’écran */

.screen{
  /* position: relative;  */
  position: fixed; inset: 0;
  z-index: 30; 
  background: transparent !important;
  border-radius: 16px;
  /* z-index: 2; */
  display: flex; flex-direction: column; align-items: center;
  /* état initial: hors-écran à droite */
  --sx: 1;                                       /* 1 => +100% */
  transform: translateX(calc(var(--sx) * 100%));
  opacity: 0;
  pointer-events: none;

  transition:
    transform 600ms cubic-bezier(.22,.95,.24,.99);
    /* opacity   420ms ease; */
  will-change: transform, opacity;
  height: 100%;
}

/* Entrée depuis la gauche (au lieu de droite) */
.screen.from-left{ --sx: -1; }                   /* -1 => -100% */

/* Actif = à l’écran */
.screen.active{
  --sx: 0;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Sortant (léger glissement opposé + fade) */
.screen.leaving.to-left  { --sx: -0.15; opacity: 0; }
.screen.leaving.to-right { --sx:  0.15; opacity: 0; }

/* Pas d’anim (mode amnésie) */
.screen.no-anim{ transition: none !important; }




/* *****************************************************
Fonds (backgrounds)                   ******************
***************************************************** */


:root{
  --glass-alpha: .50;   /* essaye .30 puis .25 si tu veux encore plus de fond */
  --blob-alpha: .55; /* avant ~.25 */
  /* largeur réelle de l’image (en CSS px) */
  --bg-w: 1600px;    /* largeur réelle */
  --bg-h: 1000px;    /* hauteur réelle (facultatif) */
}

/* Fond */
/* le fond plein écran */
/* calque plein écran, pas de transform ici */
#appBg{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: #e9ecef;   /* remplit les zones non couvertes */
}

/* image NON redimensionnée (1:1), ancrée en HAUT, centrée horizontalement */
#appBg > img{
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: var(--bg-w);              /* taille fixe */
  height: auto;
  max-width: none;                 /* neutralise img{max-width:100%} globaux */
  max-height: none;
  image-rendering: auto;
}

/* Overlay d’images */
#bgOverlay{
  position: fixed; inset: 0; z-index: 20;
  /* pointer-events: none; toute l’appli reste cliquable par-dessus */
  pointer-events: auto; /* toute l’appli reste cliquable par-dessus */
}

.off{
  display: none;
}

/* Le bouton .shape gère TOUT: position + rotation + scale (la hitbox suit) */
.shape{
  position:absolute;
  left: var(--x, 50vw);
  top:  var(--y, 50vh);
  width: clamp(60px, var(--w, 12vw), 90vw);
  height:auto;

  /* variables d’échelle */
  --k-base: 1;
  --k-pulse: 1;
  /* seront recalculées en JS: */
  --k-hover: 1.06;   
  --k-active: 0.97;
  --k-interact: var(--k-base);

  transform: 
    translate(-50%, -50%) 
    rotate(var(--rot,0deg)) 
    scale(var(--k-interact))
    scale(var(--k-pulse));
  transform-origin: 50% 50%;
  transition:
    transform 160ms cubic-bezier(.2,.7,.2,1),
    --k-interact       160ms cubic-bezier(.2,.7,.2,1); /* ← important pour Safari */
  will-change: transform --k-interact, --k-pulse;
  pointer-events: none; /* déco par défaut */
}

.shape.play{
  pointer-events: auto; cursor: pointer;
  background: none; border: 0; padding: 0;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

/* l'image ne scale plus : elle suit le bouton visuellement ET en hit-test */
.shape .sprite{ display:block; width:100%; height:auto; pointer-events:none; }

/* états : on commute la variable --k, pas le transform en dur */
.shape.play:hover  { --k-interact: var(--k-hover);  }
.shape.play:active { --k-interact: var(--k-active); }


/* ➍ Animation “pulse” sur --k-pulse (0.5s) */
@keyframes attractPulse {
  0%, 100% { --k-pulse: 1; }
  50%      { --k-pulse: 1.10; } /* +10% */
}

.shape.play.pulsing {
  animation: attractPulse 0.3s ease-in-out both;
}

/* (optionnel) Respecte prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .shape.play.pulsing { animation: none; }
}


/* Le titre au-dessus des autres (mais toujours sous l’UI de jeu) */
.shape.top{ z-index: 3; }
.shape{ z-index: 2; }

/* ---------- PRÉRÉGLAGES 16:9 par défaut ---------- */
#shape-title     { --x: 44vw; --y: 28vh; --w: 60vw; --rot:  0deg;  }
#shape-balloon   { --x: 88vw; --y: 20vh; --w: 20vw; --rot:  -7deg;  }
#shape-airplane  { --x: 12vw; --y: 16vh; --w: 12vw; --rot:  0deg;  }
#shape-dancer    { --x: 88vw; --y: 62vh; --w: 19vw; --rot:  0deg;  }
#shape-lizard    { --x: 16vw; --y: 64vh; --w: 14vw; --rot:  0deg;  }
#shape-mushroom  { --x: 38vw; --y: 75vh; --w: 25vw; --rot:  0deg;  }
#shape-fish      { --x: 76vw; --y: 88vh; --w: 16vw; --rot:  -3deg;  }
/* bouton play */
#shape-play      { --x: 66vw; --y: 65vh; --w: 16vw; --rot: 0deg;}


/* image à l’intérieur : prend toute la largeur de la shape */
#shape-play > img{
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none; /* l’img ne capte pas, c’est le bouton qui clique */
}

/* Focus correct (note le . au début) */
.shape.play:focus,
.shape.play:focus-visible{
  outline: none;
  filter: none !important;
  box-shadow: none !important;
}


/* ---------- Ultra-wide (≥ 21:9) ---------- */
@media (min-aspect-ratio: 21/9){
  #shape-title    { --x: 45vw; --y: 30vh; --w: 50vw; }
  #shape-airplane { --x: 10vw; --y: 18vh; }
  #shape-balloon  { --x: 92vw; --y: 16vh; }
  #shape-dancer   { --x: 92vw; --y: 60vh; }
  #shape-lizard   { --x: 12vw; --y: 62vh; }
  #shape-play     { --x: 66vw; --y: 65vh; --w: 16vw; --rot: 0deg;}
}

/* ---------- 4:3 / écrans “tall” ---------- */
@media (max-aspect-ratio: 4/3){
  #shape-title    { --x: 44vw; --y: 28vh; --w: 70vw; }
  #shape-airplane { --x: 13vw; --y: 13vh; --w: 18vw; }
  #shape-balloon  { --x: 86vw; --y: 20vh; --w: 14vw; }
  #shape-dancer   { --x: 86vw; --y: 50vh; --w: 16vw; }
  #shape-lizard   { --x: 45vw; --y: 55vh; --w: 23vw; }
  #shape-mushroom { --x: 26vw; --y: 85vh; --w: 20vw; }
  #shape-fish     { --x: 76vw; --y: 90vh; --w: 16vw; }
  #shape-play     { --x: 66vw; --y: 65vh; --w: 36vw; --rot: 0deg;}
}

/* ---------- Téléphones (largeur ≤ 480px) ---------- */
@media (max-width: 480px){
  #shape-title    { --x: 50vw; --y: 25vh; --w: 90vw; }
  #shape-airplane { --x: 20vw; --y: 9vh; --w: 20vw; }
  #shape-balloon  { --x: 87vw; --y: 38vh; --w: 30vw; }
  #shape-dancer   { --x: 60vw; --y: 50vh; --w: 23vw; }
  #shape-lizard   { --x: 27vw; --y: 60vh; --w: 35vw; }
  #shape-mushroom { --x: 80vw; --y: 90vh; --w: 30vw; }
  #shape-fish     { --x: 34vw; --y: 80vh; --w: 25vw; }
  #shape-play     { --x: 66vw; --y: 65vh; --w: 44vw; --rot: 0deg;}
}


/* Calque “verre” derrière le contenu, ne capte pas la souris */
.screen::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;                /* sous le contenu => texte/boutons nets */
  pointer-events: none;       /* ne bloque aucun clic */
  background: rgba(255,255,255,var(--glass-alpha));

  /* Si le flou gêne, laisse ces lignes commentées. Sinon, décommente-les. */
  /* backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px); */

  border: 1px solid rgba(0,0,0,.06);
  border-radius: inherit;
}

/* Variante amnésie : teinte le calque, pas le contenu */
.screen.amnesia { background: transparent !important; }
.screen.amnesia::before { background: rgba(66,81,121,0.85); }