html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #000;
    }

	@font-face {
	  font-family: 'Carnivalee';
	  src: url('img/CarnivaleeFreakshow-DLrm.ttf') format('truetype');
	}

	#title-overlay {
	  position: absolute;
	  top: 5%; /* move near top */
	  left: 50%;
	  transform: translateX(-50%);
	  background: rgba(0,0,0,0.6);
	  color: #f5deb3; /* warm western beige */
	  padding: 20px 40px;
	  border-radius: 12px;
	  font-family: 'Carnivalee', serif;
	  font-size: 2.5rem;
	  letter-spacing: 2px;
	  text-align: center;
	  z-index: 1000;
	  opacity: 0; /* start invisible */
	  transition: opacity 2s ease; /* smooth fade */
	  border: 2px solid #c19a6b;
	  text-shadow: 2px 2px 4px #000;
	}

	#title-overlay.show {
	  opacity: 1; /* fade in */
	}

	#title-overlay.hidden {
	  opacity: 0; /* fade out */
	  pointer-events: none;
	}
	
	
	
	
    @keyframes vibrate {
      10%, 90% { transform: translate(-5px, 0); }
      20%, 80% { transform: translate(5px, 3px); }
      30%, 50%, 70% { transform: translate(-6px, 0); }
      40%, 60% { transform: translate(4px, -5px); }
    }

    .vibrate {
      animation: vibrate 0.2s 25;
    }

	.magical-overlay {
	  position: fixed;
	  top: 0; left: 0;
	  width: 100vw;
	  height: 100vh;
	  background: radial-gradient(circle at center, #fff0ff 0%, #cc99ff 30%, #66ffff 60%, #ffffff 100%);
	  opacity: 0;
	  z-index: 9999;
	  pointer-events: none;
	  transition: opacity 4s ease-in-out;
	  animation: shimmer 6s ease-in-out infinite;
	  background-size: 200% 200%;
	  /* REMOVE blend mode */
	  mix-blend-mode: normal; /* or just remove this line entirely */
	}

    .magical-overlay.show {
      opacity: 1;
    }

    @keyframes shimmer {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    #content {
      color: white;
      font-family: sans-serif;
      text-align: center;
      margin-top: 40vh;
      font-size: 2em;
      z-index: 10;
      position: relative;
    }

		
	/* Inventory Container */
	#inventory-container {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  z-index: 9999; /* Ensure the inventory is on top */
	  width: 200px; /* Width of the inventory container */
	  height: 50px; /* Initial collapsed height */
	  transition: height 0.3s ease-in-out;
	  overflow: hidden;
	  border-radius: 10px 10px 0 0; /* Optional: rounded top corners */
	  background-color: rgba(0, 0, 0, 0.7); /* Background color for the container */
	  display: block;
	}
			
	#inventory-container.active .inventory-item,
	#inventory-container:hover .inventory-item {
	  display: block;
	}
			
	/* Inventory Title */
	#inventory-title {
	  color: white;
	  font-size: 16px;
	  text-align: center;
	  padding: 5px 0;
	  font-weight: bold;
	  background-color: rgba(0, 0, 0, 0.8); /* Slightly darker background for the title */
	  width: 100%;
	  border-radius: 10px 10px 0 0; /* Round top corners */
	  position: absolute;
	  top: 0;
	}

	/* The Inventory List (Flexbox) */
	#inventory {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around; /* Space items evenly vertically */
	  align-items: center; /* Center items horizontally */
	  width: 100%;
	  height: calc(100% - 30px); /* Adjust height of inventory to leave space for title */
	  color: white;
	  padding: 0;
	  box-sizing: border-box;
	  position: absolute;
	  top: 30px; /* Make space for the title */
	}

	/* Inventory items styling */
	.inventory-item {
	  width: 80%; /* Set a fixed width for the items */
	  height: 45%; /* Set height for the two items (so they fit in the container) */
	  background-color: #444;
	  margin: 5px 0; /* Small margin between items */
	  border-radius: 5px;
	  cursor: pointer;
	  display: none; /* Hidden by default */
	  background-size: contain; /* Make sure the image fits without being stretched or cut off */
	  background-position: center; /* Center the image inside the slot */
	  background-repeat: no-repeat; /* Prevent the image from repeating */
	}

	/* The bracelet slot (first item) 
	#bracelet-slot {
	  background-image: url('img/bracelet.png'); 
	} */

	/* Image inside the inventory item */
	.draggable-item {
	  width: 100%; /* Make the image take up the whole slot */
	  height: 100%; /* Make the image take up the whole slot */
	  object-fit: contain; /* Ensure the image maintains its aspect ratio */
	}
			
	/* During drag (applied dynamically) */
	.dragging {
	  width: 200px !important;
	  height: 200px !important;

	}		

	/* Hover effect to expand the inventory */
	#inventory-container:hover {
	  height: 200px; /* Increased height when hovered, now enough for two items */
	}

	/* Make inventory items visible when expanded */
	#inventory-container:hover .inventory-item {
	  display: block;
	}
		
/* Custom Wild West theme */
.iziToast-theme-wildwest {
  background: linear-gradient(145deg, #5a3e1b, #3a2610); /* wood-brown gradient */
  border: 2px solid #c8a062; /* brass edge */
  color: #f4e1b3;
  font-family: "IM Fell English SC", "Georgia", serif; /* old-timey serif */
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

.iziToast-theme-wildwest .iziToast-title {
  color: #ffd57e;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.iziToast-theme-wildwest .iziToast-message {
  color: #ffeebc;
}