:root {
  --cola-clr: #6b1b1b;
  --cafe-clr: #0b0704;
  --seven-clr: #14a651;
  --citron-clr: #f1c40f;
}
/* =========================
   Reset léger
========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #222;
  color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 5px;
}

div {
    /*border: 1px solid #444;*/
}

button {
  padding: 2px;
  border-radius: 10px;
  min-width: 30px;
}
button:disabled {
  opacity: .5;  
  cursor: not-allowed;
}



fieldset {
  border: 2px solid #999;
  padding: 2px 2px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width:90%;
}

legend {
  font-weight: bold;
  padding: 0 5px;
}
/*
canvas {
  height: 500px;
  width: 100%;
}
*/

#progressClients {
    width: 40px;
    border: 2px solid white;
}

.metal {
   background: linear-gradient(110deg, #d4d6db 0%, #cfd2d6 8%, #e8e8e8 20%, #a7aab1 38%, #f4f6f7 50%, #b2b2b2 62%, #d6d9df 70%, #b1b1b1 100%);
   box-shadow: 0 0 0 4px #d8dadc inset, 0 4px 24px #5555 inset, 0 2px 24px #e7e7e9 inset;
   border-radius: 12px;
}
.metalpattern2 {  
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.5) 1px,
    transparent 1px,
    transparent 6px
  );
  background-size: 4px 4px;
}

.metalpattern {	
	--u: .2vmin;
	--r1: calc(var(--u) * 3);
	--r2: calc(var(--u) * 3.1);
	--r3: calc(var(--u) / 10);
  --r4: calc(var(--u) / 1.1);
	--r5: calc(var(--u) * 1.5);
  --r6: calc(var(--u) * 2.75);
	--c0: #050505;
	--c1: #4a4a4a;
	--c2: #838383;
	--c3: #cbcbcb;
	--c4: #ffffff;
	--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 16.8);
	background: 
		conic-gradient(from 225deg at 30% 50%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from 45deg at 70% 50%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from -45deg at 50% 17%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
		conic-gradient(from 135deg at 50% 83%, var(--c0) 0 25%, #fff0 0 100%) var(--gp),
		radial-gradient(circle at 100% 50%, var(--c0) var(--r1), #fff0 var(--r2) 100%) var(--gp),
		radial-gradient(circle at 105% 55%, var(--c4) var(--r5), #fff0 var(--r6) 100%) var(--gp),
		radial-gradient(circle at 103% 52%, var(--c1) var(--r1), #fff0 var(--r2) 100%) var(--gp),
		radial-gradient(circle at 0% 50%, var(--c0) var(--r1), #fff0 var(--r2) 100%) var(--gp),
		radial-gradient(circle at 15% 65%, var(--c4) var(--r3), #fff0 var(--r4) 100%) var(--gp),
		radial-gradient(circle at 5% 55%, var(--c4) var(--r5), #fff0 var(--r6) 100%) var(--gp),
		radial-gradient(circle at 3% 52%, var(--c1) var(--r1), #fff0 var(--r2) 100%) var(--gp),
		radial-gradient(circle at 50% 100%, var(--c0) var(--r1), #fff0 var(--r2) 100%) var(--gp),
		radial-gradient(circle at 53% 102%, var(--c1) var(--r1), #fff0 var(--r2) 100%) var(--gp),
		radial-gradient(circle at 50% 0%, var(--c0) var(--r1), #fff0 var(--r2) 100%) var(--gp),
		radial-gradient(circle at 65% 15%, var(--c4) var(--r3), #fff0 var(--r4) 100%) var(--gp),
		radial-gradient(circle at 55% 5%, var(--c4) var(--r5), #fff0 var(--r6) 100%) var(--gp),
		radial-gradient(circle at 53% 2%, var(--c1) var(--r1), #fff0 var(--r2) 100%) var(--gp),
		linear-gradient(65deg, var(--c3) 40%, #ffffffdd 48% 52%, var(--c3) 60%) !important;
  background-color: var(--c0);
}

/* =========================
   Zone de jeu
========================= */
#game {
  width: 100%;
  height: auto;
  /*background: #333;*/
  border-radius: 16px;
  border: 2px solid #555;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;


}




/* =========================
   Zones principales
========================= */

#machines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;



  /*position: absolute;*/
  border-radius: 15px;
  /*transform:scale(0.6);*/
  /*overflow: hidden;*/
  background-color: rgba(0,0,0,0.8);
    background-image: url();
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;

}




#queue {
  
  border-radius: 12px;
  border: 1px solid #444;
  padding: 2px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  
    background-image: url();
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;

}

#counter {
  border-radius: 12px;
  padding: 2px;
  display: flex;
  justify-content: space-between;
  height: 20px;
}



.tray {  
    height: 170px;
    width: 30%;
    position: absolute;
    top: 60px;
    /*border: 1px solid white;*/
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.zone {
  /*outline: 2px dashed rgb(162, 162, 162);*/
  border-radius: 2px;
  margin: 2px;
  background: linear-gradient(#797979, #dadada);

  display: flex;
  justify-content: space-around;
  align-items: flex-end;

  min-width: 35px;
  min-height: 35px;
 
  transition: all 0.3s ease;

}
/* État : en cours de remplissage - */
.zone.filling {
  background: linear-gradient(
    #777 30%,
    #fff 50%,
    #fff 52%,
    #777 70%
  );
  background-size: 100% 200%;
  animation: fillAnim var(--fillAnim-flash, .6s) linear infinite;
}
@keyframes fillAnim {
  0%   { background-position: 0% -100%; } /* start en bas */
  100% { background-position: 0% 100%;   } /* finit en haut */
}

/* État : rempli  */
.zone.filled {
  animation: brightnessFlash 1.5s ease-in-out infinite;
}

@keyframes brightnessFlash {
  0%, 100% { filter: brightness(1.2); }
  50% { filter: brightness(1.4); }
}


.sodaStock {
  height: 50px;

}


/* Style pour indiquer qu'une zone est activable */
.classAction {
  /*background: linear-gradient( rgb(51, 104, 148),rgb(146, 198, 241)) !important;*/
  /*background-color: rgb(29, 138, 228) !important;*/
  animation: lightOpacity 2s ease infinite;
}
@keyframes lightOpacity {
  0% { opacity: 1; }  
  50% { opacity: .9; }
  100% { opacity: 1; }  
}


/* Style pour indiquer qu'une zone peut recevoir le drop */
.classTarget {
  /*outline: 2px dashed rgb(0, 255, 0);*/
  outline: none;
  
  /*transition: all 0.2s ease;*/
}


.drop-active {
  outline: none;
  /*filter: brightness(1.5);*/
}




#poubelle {
  outline: none;
  font-size: 40px;
  color: black;
  padding-left: 3px;
}



.dropZone {
  min-width: 30px;
  min-height: 30px;
}

/*

███╗   ███╗ █████╗  ██████╗██╗  ██╗██╗███╗   ██╗███████╗
████╗ ████║██╔══██╗██╔════╝██║  ██║██║████╗  ██║██╔════╝
██╔████╔██║███████║██║     ███████║██║██╔██╗ ██║█████╗  
██║╚██╔╝██║██╔══██║██║     ██╔══██║██║██║╚██╗██║██╔══╝  
██║ ╚═╝ ██║██║  ██║╚██████╗██║  ██║██║██║ ╚████║███████╗
╚═╝     ╚═╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝╚═╝  ╚═══╝╚══════╝
                                                        

*/



.MachineTitle {
  font-size: .8em;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px black;
  line-height: 1em;
}



/*
██████╗  ██████╗ ██╗███████╗███████╗ ██████╗ ███╗   ██╗
██╔══██╗██╔═══██╗██║██╔════╝██╔════╝██╔═══██╗████╗  ██║
██████╔╝██║   ██║██║███████╗███████╗██║   ██║██╔██╗ ██║
██╔══██╗██║   ██║██║╚════██║╚════██║██║   ██║██║╚██╗██║
██████╔╝╚██████╔╝██║███████║███████║╚██████╔╝██║ ╚████║
╚═════╝  ╚═════╝ ╚═╝╚══════╝╚══════╝ ╚═════╝ ╚═╝  ╚═══╝
                                                       
*/
.machineBoisson {
  border: 2px solid grey;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.machineLeft {
  display:flex;
  flex-direction: column;
  align-items: center;
}

.machineRight {
  display: flex;
}

.machineBoissonVerse {
    border: 2px solid #0005;
    border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Forme du bec */
.becVerseur {
  width: 18px;
  height: 6px;
  margin-bottom: -6px;
  position: relative;
  border: 1px solid #0e0e0e;
    border-radius: 2px 2px 30px 30px / 40% 40%;
    box-shadow: inset 0px 0px 5px 2px black;
    background: linear-gradient(to right, #0e0e0e, #333232, white, #333030, #5a5252, white, white, #636262, #292727, white, grey);
}

.becVerseur::after {
  content: "";
  position: absolute;
  left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 6px;
    height: 10px;
    box-shadow: inset 0px 0px 5px 2px black;
    background: linear-gradient(to right, #0e0e0e, #333232, white, #333030, #5a5252, white, white, #636262, #292727, white, grey);

}

/* variantes de couleur éventuelles */
.becCola   { background: #6b1b1b; }
.becCola::after { border-top-color: #6b1b1b; }

.becCafe   { background: #4c4730; }
.becCafe::after { border-top-color: #4c4730; }







.gobeletVide {
  
  cursor: not-allowed !important;
}


/*
 ██████╗ █████╗ ███████╗███████╗
██╔════╝██╔══██╗██╔════╝██╔════╝
██║     ███████║█████╗  █████╗  
██║     ██╔══██║██╔══╝  ██╔══╝  
╚██████╗██║  ██║██║     ███████╗
 ╚═════╝╚═╝  ╚═╝╚═╝     ╚══════╝
                                
 */



/* Enregistrer la propriété custom pour l'animer */
@property --fill-level {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

.cafeGob, .colaGob, .sevenGob, .citronGob {
  width: 20px;
  height: 30px;
  position: relative;
  overflow: visible;
  
  /* Forme trapèze - large en haut, étroit en bas */
  clip-path: polygon(
    0% 0,      /* haut gauche - large */
    100% 0,    /* haut droit - large */
    85% 100%,  /* bas droit - étroit */
    15% 100%   /* bas gauche - étroit */
  );

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 0 7px 7px;
  
  --fill-color: transparent;
  --fill-level: 0%;
  
  background: 
    linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 85%, transparent 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3) calc(100% - var(--fill-level)), transparent calc(102% - var(--fill-level))),
    linear-gradient(to bottom, transparent calc(100% - var(--fill-level)), var(--fill-color) calc(100% - var(--fill-level)));
  
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 0 7px 7px;
  
  /* ✅ Transition pour animer le changement */
  transition: --fill-level linear;
  transition-duration: var(--fill-duration, 5000ms); 

}

.cafeGob.filling,
.colaGob.filling,
.sevenGob.filling,
.citronGob.filling {
  animation: fillUp var(--fill-duration) linear forwards;
}
@keyframes fillUp {
  from { --fill-level: 0%; }
  to { --fill-level: 90%; }
}


/* Bourelet en haut */
.cafeGob::before,
.colaGob::before,
.sevenGob::before,
.citronGob::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px 2px 0 0;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 15px 5px rgba(0, 0, 0, 1);
}

.colaGob::before {  
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 20px 5px rgba(255, 0, 0, 1);
}

.sevenGob::before {  
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 20px 5px rgba(0, 255, 0, 1);
}
.citronGob::before {  
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 20px 5px rgba(255, 255, 0, 1);
}

/* Reflet */
.cafeGob::after,
.colaGob::after,
.sevenGob::after,
.citronGob::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 2px;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  border-radius: 1px;
}

.cafeGob.filled {
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 85%, transparent 100%),
   linear-gradient(rgba(255, 255, 255, 0.3) 10%, transparent 12%),
   linear-gradient(transparent 10%, var(--cafe-clr) 10%);
}
.colaGob.filled {
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 85%, transparent 100%),
   linear-gradient(rgba(255, 255, 255, 0.3) 10%, transparent 12%),
   linear-gradient(transparent 10%, var(--cola-clr) 10%);
}
.sevenGob.filled {
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 85%, transparent 100%),
   linear-gradient(rgba(255, 255, 255, 0.3) 10%, transparent 12%),
   linear-gradient(transparent 10%, var(--seven-clr) 10%);
}
.citronGob.filled {
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 85%, transparent 100%),
   linear-gradient(rgba(255, 255, 255, 0.3) 10%, transparent 12%),
   linear-gradient(transparent 10%, var(--citron-clr) 10%);
}

.cafeGob.filled,
.colaGob.filled,
.sevenGob.filled,
.citronGob.filled {
  --fill-level: 90%;
}



.cafeVerseZone {
  width: 35px;
  height: 40px;
}

/*
 ██████╗ ██████╗ ██╗      █████╗ 
██╔════╝██╔═══██╗██║     ██╔══██╗
██║     ██║   ██║██║     ███████║
██║     ██║   ██║██║     ██╔══██║
╚██████╗╚██████╔╝███████╗██║  ██║
 ╚═════╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝  */

.colaVerseZone, .sevenVerseZone, .citronVerseZone {
  width: 35px;
  height: 50px;
}

.colaGob, .sevenGob, .citronGob {
  height: 40px;
}

   




/*
██╗   ██╗██╗    ██████╗ ██████╗  █████╗  ██████╗ 
██║   ██║██║    ██╔══██╗██╔══██╗██╔══██╗██╔════╝ 
██║   ██║██║    ██║  ██║██████╔╝███████║██║  ███╗
██║   ██║██║    ██║  ██║██╔══██╗██╔══██║██║   ██║
╚██████╔╝██║    ██████╔╝██║  ██║██║  ██║╚██████╔╝
 ╚═════╝ ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ 
                                                 
                    */



.ui-draggable {
  outline: none;
  cursor: grab;
  animation: dragFlash 1.5s ease-in-out infinite;
}
@keyframes dragFlash {
  0%, 100% { filter: brightness(.9); }
  50% { filter: brightness(1.1); }
}

/* Pendant qu'un élément est en train d'être déplacé par jQuery UI */
.ui-draggable-dragging {
  outline: none;
  transition: none !important;
  animation: none !important;
}


 




/*
███████╗██████╗ ██╗████████╗███████╗███████╗
██╔════╝██╔══██╗██║╚══██╔══╝██╔════╝██╔════╝
█████╗  ██████╔╝██║   ██║   █████╗  ███████╗
██╔══╝  ██╔══██╗██║   ██║   ██╔══╝  ╚════██║
██║     ██║  ██║██║   ██║   ███████╗███████║
╚═╝     ╚═╝  ╚═╝╚═╝   ╚═╝   ╚══════╝╚══════╝
*/                                          


#friteMachine {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  border: 2px solid grey;
  border-radius: 10px;
      align-items: flex-end;
}

#fritePaquet {
  width: 40px;
  height: 40px;
  /*border-radius:
    100% 50% 60% 70% /
    50% 40% 70% 70%;*/
  position: relative;
  overflow: hidden;
  font-size: .8em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /*border: 2px solid #fff;
  background: linear-gradient(45deg, #FF0000, #FFFF00);*/
  margin: 2px;  
}


#friteCookContainer {
  display: flex;
}

.fritePaquet {
  position: relative;
  width: 40px;
  height: 40px;
}

.fritePile {
  position: relative;
  width: 25px;
  height: 40px;
}
.fritePileGrill {
  position: relative;
  width: 50px;
  height: 50px;
}

.friteCookZone {
  width: 50px;
  height: 50px;
  
  --s: 10px;  /* control the size of the grid */
  --t: 2px;   /* the thickness */

  background:  
    /* Grille par-dessus */
    conic-gradient(from 90deg at var(--t) var(--t), #0000 25%, #cdcdcd 0)
      0 0/var(--s) var(--s),
    /* Gradient radial en dessous */
    radial-gradient(circle at 30% 40%, 
      #d4a017 0%,
      #b8860b 30%,
      #9a7310 60%,
      #7d5e08 100%
    );
}

/* ========================================
   TAS DE FRITES EMPILÉES
   ======================================== */


.fry {
  position: absolute;
  width: 5px;
  height: 60px;
  background: linear-gradient(90deg, 
    #fffae6 0%, 
    #ffe8c3 50%, 
    #eebf96 100%
  );
  border-radius: 1px;
  box-shadow: 
    inset -2px 0 3px rgba(0,0,0,0.2),
    2px 2px 5px rgba(0,0,0,0.3);
  transition: all 0.4s ease;
}

/* Positionnement de chaque frite */
/*  Zone de recharge */
.fry-0  { bottom: 0px; left: 20px; transform: rotate(+17deg); height: 37px; }
.fry-1  { bottom: 2px; left: 20px; transform: rotate(-15deg); height: 36px; }
.fry-2  { bottom: 2px;  left: 22px; transform: rotate(6deg);  height: 35px; }
.fry-3  { bottom: 1px; left: 15px; transform: rotate(-5deg);  height: 35px; }
.fry-4  { bottom: 0px;  left: 8px; transform: rotate(+12deg); height: 30px; }
.fry-5  { bottom: 5px; left: 5px; transform: rotate(-8deg);  height: 30px; }
.fry-6  { bottom: 0px; left: 22px; transform: rotate(+26deg); height: 35px; }
/* frites dans sachet */
.fry-7  { bottom: 0px; left: 14px; transform: rotate(+17deg); height: 26px; }
.fry-8  { bottom: 2px; left: 14px; transform: rotate(8deg); height: 23px; }
.fry-9  { bottom: 2px;  left: 11px; transform: rotate(6deg);  height: 25px; }
.fry-10  { bottom: 1px; left: 8px; transform: rotate(-5deg);  height: 26px; }
.fry-11  { bottom: 12px;  left: 9px; transform: rotate(+9deg); height: 11px; }
.fry-12  { bottom: 0px; left: 5px; transform: rotate(-20deg);  height: 26px; }
.fry-13  { bottom: 0px; left: 15px; transform: rotate(+26deg); height: 25px; }

/* non utilisé */
.fry-14 { bottom: 16px; left: 55px; transform: rotate(+7deg);  height: 65px; }
.fry-15 { bottom: 23px; left: 72px; transform: rotate(-60deg); height: 52px; }

.fry-16 { bottom: 11px; left: 26px; transform: rotate(+9deg);  height: 53px; }
.fry-17 { bottom: 27px; left: 48px; transform: rotate(-13deg); height: 45px; }
.fry-18 { bottom: 6px;  left: 59px; transform: rotate(+18deg); height: 68px; }
.fry-19 { bottom: 19px; left: 77px; transform: rotate(-4deg);  height: 55px; }
.fry-20 { bottom: 12px; left: 36px; transform: rotate(+6deg);  height: 61px; }
.fry-21 { bottom: 21px; left: 42px; transform: rotate(-20deg); height: 50px; }
.fry-22 { bottom: 8px;  left: 67px; transform: rotate(+13deg); height: 57px; }
.fry-23 { bottom: 30px; left: 85px; transform: rotate(-10deg); height: 48px; }

.fry-24 { bottom: 17px; left: 24px; transform: rotate(+15deg); height: 63px; }
.fry-25 { bottom: 10px; left: 44px; transform: rotate(-7deg);  height: 52px; }
.fry-26 { bottom: 28px; left: 58px; transform: rotate(+11deg); height: 47px; }
.fry-27 { bottom: 13px; left: 73px; transform: rotate(-14deg); height: 60px; }
.fry-28 { bottom: 9px;  left: 90px; transform: rotate(+4deg);  height: 66px; }
.fry-29 { bottom: 26px; left: 32px; transform: rotate(-18deg); height: 49px; }



/* élément frite */

@property --pr {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.tofry {
  --pr: 0; /* progression cuisson 0..1 */

  /* calculs dérivés */
  --h: calc(55 - 55 * var(--pr));       /* jaune → rouge → noir */
  --l: calc(78% - 66% * var(--pr));     /* clair → sombre */

  background: linear-gradient(
    90deg,
    hsl(var(--h), 90%, calc(var(--l) - 6%)) 0%,
    hsl(var(--h), 90%, var(--l)) 50%,
    hsl(var(--h), 90%, calc(var(--l) + 6%)) 100%
  );
}

/* animation cuisson */
.tofry.cooking {
  animation:
    fryCook var(--cookDur, 20s) linear forwards,
    fryJitter 1.1s steps(2,end) infinite;
}

@keyframes fryCook {
  from { --pr: 0; }
  to   { --pr: 1; }
}
@keyframes fryJitter {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(0.97); }
}

.tofry::after{
  content: var(--pr);
}


#friteReady {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  min-width: 80px;
  min-height: 80px;
  font-size: 1.2em;
}
.friteSachet {
  position: relative;
  overflow: hidden;
  height: 40px;
}


.friteSachet-front {
  position: relative;
  top: -20px;
  left: 3px;
  height: 20px;
  width: 20px;
  clip-path: polygon(0 0%, 100% 0, 90% 100%, 10% 100%);

background:
  linear-gradient(to right,
    transparent 0%,
    rgba(255,255,255,0.5) 15%,
    rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.1) 85%,
    transparent 100%),
  radial-gradient(circle 50px at 10px 49px,
    #000000 20px,
    #8e0d1c 21px,
    #e21129 46px);

mask:
  radial-gradient(circle 25px at 10px -15px,
    transparent 20px,
    black 21px);


}




/*
██████╗ ██╗   ██╗██████╗  ██████╗ ███████╗██████╗ 
██╔══██╗██║   ██║██╔══██╗██╔════╝ ██╔════╝██╔══██╗
██████╔╝██║   ██║██████╔╝██║  ███╗█████╗  ██████╔╝
██╔══██╗██║   ██║██╔══██╗██║   ██║██╔══╝  ██╔══██╗
██████╔╝╚██████╔╝██║  ██║╚██████╔╝███████╗██║  ██║
╚═════╝  ╚═════╝ ╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝
                                                  
*/
#burgerMachine {
  position: relative;
  display: flex;
  align-items: flex-end;
}

#burgerStockZone {
  width: 40px;
  /*height: 40px;*/
}

#burgerCookZone {
  width: 70px;
  height: 70px;

  --c: #525e6b;
  aspect-ratio: 1;
  background:  
   linear-gradient(90deg, var(--c) 50%, #0000 0) left / 8% 100% repeat-x,
   radial-gradient(circle at 45% 40%, #e43905 0%, #b33c05 30%, #63110b 60%, #000000 100%);

    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
}
#burgerIngredients {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#burgerBuildZones {
  display: flex;
  justify-content: space-around;
}



.burgerBuildZone {
  width: 50px;
  height: 55px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: center;
}
.burgerFini {  
  width: 40px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}





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

.burgerReady {
    display: flex;
    flex-direction: column;
    align-items: center;
}



.burgerPainHaut{
  position: relative;
	background-image: linear-gradient(#F9C82E, #F19A2B);
		width: 40px;
    height: 12px;
    border-radius: 120px 120px 0 0;
      overflow: visible; /* pour laisser dépasser si besoin */
}
/* Graines */
.burgerPainHaut::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 8px;
  background-repeat: no-repeat;

  background-image:
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%);

  background-position:
    5px 2px,    
    12px 3px,
    16px 1px,
    24px 4px,
    30px 2px;

  background-size: 3px 3px;
}

.burgerTopPainHaut{
  position: relative;
	  background: radial-gradient(circle at 30% 40%, #F9C82E 0%,#593508 100%);
		width: 40px;
    height: 40px;
    border-radius: 50%;

}
/* Graines */
.burgerTopPainHaut::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;

  background-image:
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%),
    radial-gradient(circle 1px, #fff 90%, transparent 100%);
  background-position:
  18px 12px,
  22px 11px,
  16px 15px,
  24px 16px,
  20px 18px,
  14px 20px,
  26px 19px,
  18px 22px,
  22px 23px,
  16px 26px,
  24px 27px,
  20px 28px,
  12px 18px,
  28px 21px,
  19px 14px,
  23px 17px;
  background-size: 3px 3px;
}


.burgerSalade {
  position: relative;
		width: 43px;
		height: 4px;
		background-color: #85BA42;
		border-radius: 5px;
		border-top: 3px solid #78A83A;
	}
.burgerSalade::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-80%);
  border-width: 6px 16px 0 3px;
    border-style: solid;
    border-color: #85BA42 transparent transparent transparent;
}

.burgerTopSalade {
  height: 40px;
  aspect-ratio: 1;
  position: relative;
  
  clip-path: polygon(
    50% 0%, 65% 8%, 80% 5%, 92% 15%, 98% 30%, 
    100% 50%, 95% 68%, 85% 82%, 70% 92%, 50% 95%, 
    30% 92%, 15% 82%, 5% 68%, 0% 50%, 
    2% 30%, 8% 15%, 20% 5%, 35% 8%
  );
  
  background: linear-gradient(135deg, #8BC772 0%, #6BA84E 100%);
}

/* Nervures avec pseudo-élément */
.burgerTopSalade::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  
  background: 
    /* Nervure centrale */
    linear-gradient(135deg, 
      transparent 48%, 
      rgba(255, 255, 255, 0.4) 49%, 
      rgba(255, 255, 255, 0.5) 50%, 
      rgba(255, 255, 255, 0.4) 51%, 
      transparent 52%),
    /* Nervures latérales */
    linear-gradient(90deg, 
      transparent 30%, 
      rgba(255, 255, 255, 0.2) 31%, 
      transparent 32%),
    linear-gradient(90deg, 
      transparent 68%, 
      rgba(255, 255, 255, 0.2) 69%, 
      transparent 70%),
    /* Nervures diagonales */
    linear-gradient(120deg, 
      transparent 35%, 
      rgba(255, 255, 255, 0.15) 36%, 
      transparent 37%),
    linear-gradient(60deg, 
      transparent 60%, 
      rgba(255, 255, 255, 0.15) 61%, 
      transparent 62%);
}

.burgerTomate {
  position: relative;
  width: 35px;
  height: 5px;
  background-color: #E5512E;
  border-radius: 3px;
  border-top: 5px solid #bb3b21;
}
.burgerTomate::after {
    content: "";
    position: absolute;
    left: 39%;
    top: -1px;
    border-width: 10px;
    border-style: solid;
    border-color: #E5512E;
    clip-path: ellipse(47% 29% at 50% 0%);
}


.burgerTopTomate {
  height: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  
  /* Peau de tomate avec texture */
  background: 
    /* Variation de couleur naturelle */
    radial-gradient(ellipse at 25% 25%, rgba(255, 107, 107, 0.8) 0%, transparent 30%),
    radial-gradient(ellipse at 75% 30%, rgba(232, 93, 93, 0.6) 0%, transparent 25%),
    radial-gradient(ellipse at 60% 75%, rgba(211, 47, 47, 0.5) 0%, transparent 30%),
    /* Base rouge */
    radial-gradient(circle at 40% 40%, #FF5252 0%, #D32F2F 100%);
  
  /* Bordure de peau */
  border: 1px solid rgba(180, 30, 30, 0.4);
  
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.4),
    inset 0 -2px 5px rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Intérieur juteux */
.burgerTopTomate::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  
  background: 
    /* Chambres de pépins (4 sections) */
    radial-gradient(ellipse 8px 6px at 30% 35%, rgba(255, 180, 160, 0.6) 0%, transparent 100%),
    radial-gradient(ellipse 7px 6px at 70% 35%, rgba(255, 180, 160, 0.6) 0%, transparent 100%),
    radial-gradient(ellipse 8px 7px at 30% 70%, rgba(255, 180, 160, 0.6) 0%, transparent 100%),
    radial-gradient(ellipse 7px 6px at 70% 70%, rgba(255, 180, 160, 0.6) 0%, transparent 100%),
    /* Chair centrale */
    radial-gradient(circle at center, rgba(255, 140, 120, 0.5) 0%, transparent 60%);
  
  border: 1px solid rgba(255, 100, 80, 0.3);
}

/* Pépins individuels */
.burgerTopTomate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  
  background: 
    /* Groupe de pépins haut-gauche */
    radial-gradient(circle 1.5px at 28% 32%, #FFC8B4, transparent),
    radial-gradient(circle 1px at 32% 35%, #FFC8B4, transparent),
    radial-gradient(circle 1.5px at 30% 38%, #FFC8B4, transparent),
    /* Groupe haut-droit */
    radial-gradient(circle 1px at 68% 33%, #FFC8B4, transparent),
    radial-gradient(circle 1.5px at 71% 36%, #FFC8B4, transparent),
    radial-gradient(circle 1px at 69% 39%, #FFC8B4, transparent),
    /* Groupe bas-gauche */
    radial-gradient(circle 1.5px at 29% 67%, #FFC8B4, transparent),
    radial-gradient(circle 1px at 32% 70%, #FFC8B4, transparent),
    radial-gradient(circle 1.5px at 31% 73%, #FFC8B4, transparent),
    /* Groupe bas-droit */
    radial-gradient(circle 1px at 69% 66%, #FFC8B4, transparent),
    radial-gradient(circle 1.5px at 72% 69%, #FFC8B4, transparent),
    radial-gradient(circle 1px at 70% 72%, #FFC8B4, transparent),
    /* Pépins centraux */
    radial-gradient(circle 1px at 48% 50%, #FFC8B4, transparent),
    radial-gradient(circle 1.5px at 52% 52%, #FFC8B4, transparent);
}



.burgerSteak {
  width: 38px;
  height: 9px;
  background-color: #7F441C;
  border-radius: 30px;
  border-top: 3px solid #6D4020;
}

/* Steak de base (cru/surgelé) */
.burgerTopSteak {
  position: relative;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 30% 40%, 
    #ff0000 0%,
    #f69f9f 100%
  );
  border-radius: 50%;

}

/* Steak en cours de cuisson */
.burgerTopSteak.cooking {
  animation: steakCook var(--cookDur, 30s) linear forwards;
}

@keyframes steakCook {
  0%   { background: radial-gradient(circle at 30% 40%, #ff0000, #f69f9f); }
  10%  { background: radial-gradient(circle at 30% 40%, #e8552b, #e1a29a); }
  20%  { background: radial-gradient(circle at 30% 40%, #d46a2c, #c97c6d); }
  33%  { background: radial-gradient(circle at 30% 40%, #b14a10, #b86a55); }
  42%  { background: radial-gradient(circle at 30% 40%, #9b4f1b, #a25a3d); }
  50%  { background: radial-gradient(circle at 30% 40%, #8b4513, #a0522d); }
  58%  { background: radial-gradient(circle at 30% 40%, #5c2e17, #6d3b26); }
  66%  { background: radial-gradient(circle at 30% 40%, #3a1f0f, #4a2a1a); }
  80%  { background: radial-gradient(circle at 30% 40%, #1a0e07, #26150c); }
  100% { background: radial-gradient(circle at 30% 40%, #000000, #1a1a1a); }
}

.burgerTopSteak.cooked {
  background: radial-gradient(circle at 30% 40%, #8b4513, #a0522d);
}




.burgerFromage {
  position: relative;
  width: 42px;
  height: 4px;
  background-color: #F6CD30;
  border-top: 3px solid #EAB82D;
}
.burgerFromage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-80%);
  border-width: 7px 8px 0 8px;   /* hauteur de la pointe = 10px */
  border-style: solid;
  border-color: #F6CD30 transparent transparent transparent;
}

.burgerTopFromage {
  height: 40px;
  aspect-ratio: 1;
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);

  background:
    /* trou 1 (tache sombre) */
    radial-gradient(circle 6px at 30% 45%,
      #cdcdcd 0,
      #878787 60%,
      transparent 70%),
    /* trou 2 (tache sombre) */
    radial-gradient(circle 6px at 70% 55%,
      #cdcdcd 0,
      #878787 60%,
      transparent 70%),
    /* dégradé du pain */
    radial-gradient(circle at 30% 40%, #F6CD30 0%, #EAB82D 100%);
}

	.burgerPainBas {
		background-color: #F19A2B;
		width: 40px;
    height: 10px;
    border-radius: 25px 25px 120px 120px;
	}

.burgerTopPainBas {
	  background: radial-gradient(circle at 30% 40%, #784e18 0%,#F19A2B 100%);
		width: 40px;
    height: 40px;
    border-radius: 50%;
}





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


/* Conteneur de la jauge (vertical, à droite du gobelet) */
.age-indicator {
  position: absolute;
  right: 0px;
  top: 5px;
  bottom: 0px;
  width: 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Barre de remplissage (monte du bas) */
.age-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: #51cf66; /* Vert au départ */
  transition: height 0.1s linear, background-color 0.3s ease;
  border-radius: 3px;
}

/* Style quand le gobelet est périmé */
.expired {
  opacity: 0.6;
  filter: grayscale(50%);
}

.expired .age-fill {
  animation: expiredBlink 0.5s ease-in-out infinite;
}

@keyframes expiredBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}


/* =========================
   Éléments draggables
========================= */
.draggable {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.draggable:active {
  cursor: grabbing;
}



/* =========================
   Clients
========================= */


#queueAngryClient {
  position: absolute;
  top: 30px;
  font-size: 20px;
  display: none; /*au début*/
}


#queueLine {
  height: 4px;
  display: flex;
  justify-content: center;
  flex-direction: row;
}

/* QUEUE */
.clientIcon {
  display: flex;
  align-items: flex-end;
  justify-content: center;/* horizontal */
  width: 20px;
  height: 4px;
  font-size: 20px;
  text-align: center;
  border-left: 1px solid #fffa;
  border-right: 1px solid #fffa;
  border-top: 1px solid #fffa;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}


.file {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
  width: 100%;
  height: 150px;
}

.clientContainer {
      display: flex;
    width: 100%;
    text-align: center;
    flex-direction: column;
    align-items: center;
}


.order {
  color: #006f88;
  font-size: .6em;
  min-width: 80px;
  text-align: center;

  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */
  --c: #fff;

  padding: .5em;
  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2) min(var(--r),var(--p) - var(--b)/2)/var(--r);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    min(100%,var(--p) + var(--b)/2) 100%,
    var(--p) calc(100% + var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 100%);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    var(--r) calc(100% - var(--p) - var(--b)/2) 0 calc(var(--p) - var(--b)/2)/
    0 0 var(--h) 0;
}

.avisContainer {
    width: 80px;
    height: 10px;
    border-radius: 5px;
    background-color: #aaa;
}
.avisBarre {
    width: 70%;
    height: 10px;
    border-radius: 5px;
    background-color: blue;
    display: flex;
    align-items: flex-end;
}

.emoji{
  font-size: 3em;  
  text-align: center;
  margin-bottom: 0px;
  height: 58px;
  width: 70px;
  background-color: transparent;  
  border-radius: 50%;
  transition: all 0.4s ease;
}
.emoji.impatient {
  animation: impatient-shake 1s infinite alternate;
}
/* petite animation de tremblement */
@keyframes impatient-shake {
  0%   { transform: scale(.95) translateX(0); }
  20%  { transform: scale(1.05) translateX(-3px); }
  40%  { transform: scale(1.05) translateX(3px); }
  60%  { transform: scale(1.05) translateX(-2px); }
  80%  { transform: scale(1.05) translateX(2px); }
  100% { transform: scale(.95) translateX(0); }
}
.emoji.angry {
  animation: angry-shake 0.5s infinite alternate;
}
/* petite animation de tremblement */
@keyframes angry-shake {
  from {
    transform: scale(1.1) translateX(-5px);
  }
  to {
    transform: scale(.9) translateX(5px);
  }
}

.client {
  padding: 0px;
  text-align: center;
  font-size: .8em;
  width: 100%;
  border-left: 2px solid #fffa;
  border-right: 2px solid #fffa;
  border-top: 2px solid #fffa;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background: #2a2a2a77;
  transition: color 0.3s, transform 0.3s, border-color 0.3s, background 0.3s;
}




.waitBar {
  width: 10px;
  border-radius: 15px;
  height: 60px;
  background-color: #4caf50;
  transform-origin: bottom;
  transform: scaleY(1);
  will-change: transform;
}








#dayMchnUpgrade {
    display: flex;
    flex-direction: column;
    gap: 5px;
}






#dayPanel {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 10px;
  border-radius: 20px;
  width: 100%;
  /*max-width: 600px;*/
  margin: 10px auto;
  position: fixed;
  overflow-x: auto;
  overflow-y: auto;
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#dayPanel h1 {
  margin: 0 0 10px 0;
  font-size: 1.5em;
}

#dayPanel h2 {
  margin: 0 0 5px 0;
  font-size: 1.2em;
}

#dayPanel h3 {
  margin: 20px 0 10px 0;
  border-bottom: 2px solid rgba(255,255,255,0.3);
  padding-bottom: 5px;
}

#dayPanel progress {
  width: 100px;
  height: 10px;
  margin: 2px 0;
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}

#dayPanel progress::-webkit-progress-value {
  background: linear-gradient(to right, #4fd1c5, #2fb5a9);
  border-radius: 10px;
  transition: width 0.35s ease;
}

#dayPanel progress::-webkit-progress-bar {
  background: transparent;
}

#dayPanel button {
  background: white;
  color: #667eea;
  border: none;
  padding: 2px 5px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  margin: 5px 0;
      font-size: 1.2em;
}

#dayPanel button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

#dayPanel button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#dayPnl, #dayClients {
  font-size: 1em;
  margin: 10px 0;
}

.money-change {
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
  animation: moneyPop 0.5s ease-out;
}

@keyframes moneyPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}








/*********************    STATS     *******************/

.stats-container {
  padding: 0px;
  background: #f8f9fa;
  border-radius: 8px;
  color: #000;
  font-size: .9em;
  text-align: center;
}

.stats-jour {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stats-jour th {
  background: #343a40;
  color: white;
  padding: 2px;
  text-align: right;
  font-weight: bold;
}

.stats-jour td {
  padding: 2px 4px;
  border-bottom: 1px solid #dee2e6;
  text-align: right;
}

.stats-jour tbody tr:hover {
  background: #f1f3f5;
}

.stats-jour .positif {
  color: #28a745;
  font-weight: bold;
}

.stats-jour .negatif {
  color: #dc3545;
  font-weight: bold;
}

.stats-jour .total-row {
  background: #e9ecef;
  font-size: 1.1em;
}

.stats-jour .total-row td {
  padding: 5px 2px;
  border-top: 2px solid #343a40;
}





















/*

              Réputation SCORE Jour

*/
.gelatine {
  animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}


.fixed {
  position: fixed;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 4px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  text-align: center;
  font-size: .8em;
  color: white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  z-index: 99;
}

#moneyPanel {
  top: 0px;
  left: 5px;  
  font-size: 16px;
  line-height: 16px;
}

#dayFixed {
  text-align: center;
}


#reputationWait {
  top: 0px;
  right: 50px;
  font-size: .5em;
}

#reputationQuality {
  top: 0px;
  right: 5px;
  font-size: .5em;
}




/* Animation quand la réputation change */
.reputation-display.updated {
  animation: repPulse 0.5s ease-in-out;
}

@keyframes repPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}







/*************************** MODAL ERROR */


.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal-overlay.show {
  display: flex;
}

.modal-box {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  padding: 30px 50px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}





















/* Smoke container */

.smoke {
	position: relative;
	z-index: 3;
	width: 0px; height: 0px;
	left: 50%;
  top: 50%;
  pointer-events: none; /* Pour ne pas bloquer les clics */
}

/* smoke balls */

.smoke span { 
  display: block;
	position: absolute;
	bottom: -50px;
  left: 50%;
  margin-left:-35px;
	height: 100px; width: 100px;
	/*border: 35px solid #4b4b4b;
  border-color: var(--smoke-color, #fff);*/
  background: radial-gradient(
    var(--smoke-color, #fff),  
    transparent 70%
  );
	border-radius: 50%;
	left: -14px; opacity: 0;
	transform: scale(0.2);
}

/* Smoke animation */

@keyframes smokeL {
	0%   { opacity: .1;transform: scale(0.2) translate(0, 0) }
	10%  { opacity: 1; transform: scale(0.3) translate(-10, -5px) }
	100% { opacity: 0; transform: scale(1) translate(-30px, -30px) }
}

@keyframes smokeR {
	0%   { opacity: .1;transform: scale(0.2) translate(0, 0) }
	10%  { opacity: .1; transform: scale(0.3) translate(10, -5px) }
	100% { opacity: 0; transform: scale(1) translate(30px, -30px) }
}

.smoke .s0 { animation: smokeL 10s 0s infinite }
.smoke .s1 { animation: smokeR 10s 1s infinite }
.smoke .s2 { animation: smokeL 10s 2s infinite }
.smoke .s3 { animation: smokeR 10s 3s infinite }
.smoke .s4 { animation: smokeL 10s 4s infinite }
.smoke .s5 { animation: smokeR 10s 5s infinite }
.smoke .s6 { animation: smokeL 10s 6s infinite }
.smoke .s7 { animation: smokeR 10s 7s infinite }
.smoke .s8 { animation: smokeL 10s 8s infinite }
.smoke .s9 { animation: smokeR 10s 9s infinite }








.lieuDetailsCard {
  padding: 2px 4px;
  border-radius: 10px;
  background-color: rgba(0,0,0,0.5);
  background-image: url(https://…);
  background-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 0.9rem;
  width: 350px;
}



.lieuHeader {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  font-size: 1.2rem;
}

.lieuEmoji {
  font-size: 1.4rem;
}

.lieuName {
  font-weight: 700;
}

.lieuInfos > div {
  margin-bottom: 2px;
}





#chooseLieu {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}

.lieuOption {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin: 4px;
  cursor: pointer;

  border: 2px solid transparent;
  border-radius: 10px;

  background: rgba(255,255,255,0.08);

  transition: border-color 0.2s ease, background 0.2s ease;
}

/* Cache le vrai radio */
.lieuOption input[type="radio"] {
  display: none;
}

/* Hover */
.lieuOption:hover {
  background: rgba(255,255,255,0.15);
}

/* ★ Option sélectionnée : bordure colorée */
.lieuOption input[type="radio"]:checked + * {
  /* Ceci ne marche PAS car le label entoure tout.
     Il faut cibler le label via :has() */

}

/* Correct : bordure du label SI son input interne est checked */
.lieuOption:has(input[type="radio"]:checked) {
  border-color: #4fd1c5;    /* couleur de sélection */
  background: rgba(79, 209, 197, 0.15);
  box-shadow: 0 0 6px rgba(79, 209, 197, 0.4);
}




/* =========================
   Helpers pour debugging
========================= */

/* Pour voir les limites des zones facilement au début 
#queue-area, #counter-area, .machine {
  outline: 1px dashed red;
}
*/

/* =========================
   Responsive simple
========================= */
@media (max-width: 960px) {
  #game {
    width: 100%;
    /*height: 600px;*/
    grid-template-columns: 1fr;
    grid-template-rows: 0.8fr 0.8fr 1fr;
  }
}