/* General Body Style */
body {
  background-color: #1b1b1b;
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  color: #e0e0e0;
}

h1 {
  color: #e0e0e0;
  margin-top: 20px;
}

/* Money and Potential Money Labels */
.label {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin: 10px;
  padding: 8px;
  border-radius: 5px;
  display: inline-block;
  background-color: #333333;
}

/* Roll Button Style */
button {
  background-color: #5a5aff; /* Darker blue */
  border: none;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #4d4dff; /* Slightly lighter blue on hover */
}

button:active {
  background-color: #4040e0; /* Darker shade on click */
}

/* Inventory Container */
#inventory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-width: 90%;
  margin: 20px auto;
  padding: 10px;
  border: 2px solid #444444;
  background-color: #2a2a2a;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  max-height: 60vh;
}

/* Inventory Item Style */
.item {
  background-color: #333333;
  border: 1px solid #555555;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  color: #e0e0e0;
  text-align: center;
  transition: transform 0.2s ease;
}

.item:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

/* Item Text */
.item p {
  margin: 5px 0;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  border: 1px solid #555555;
  border-radius: 8px;
  padding: 5px;
}

/* Sell Button in Each Item */
.item button {
  background-color: #ff5252; /* Red */
  border: none;
  color: white;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 5px;
}

.item button:hover {
  background-color: #ff3333; /* Darker red on hover */
}

.item button:active {
  background-color: #e60000; /* Even darker red on click */
}

.upgrade {
  background-color: #333333;
  border: 1px solid #555555;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  color: #e0e0e0;
  text-align: center;
  transition: transform 0.2s ease;
}

.upgrade:hover {
  transform: scale(1.05);
}

.upgrade p {
  margin: 5px 0;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  border: 1px solid #555555;
  border-radius: 8px;
}

/* Sell All Popup */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    0,
    0,
    0,
    0.8
  ); /* Darker background for better visibility */
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #2a2a2a; /* Match with inventory background */
  padding: 20px;
  border-radius: 10px; /* Match the border radius style of other elements */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
  color: #e0e0e0; /* Light text color for readability */
}

/* Popup Title */
.popup-content h2 {
  color: #ffffff; /* Keep the title bright for contrast */
  margin-bottom: 10px;
}

/* Checkbox Style */
.popup-content input[type="checkbox"] {
  margin-right: 10px;
  accent-color: #5a5aff; /* Custom accent color for checkboxes */
}

/* Checkbox Label Style */
.popup-content label {
  color: #e0e0e0; /* Match text color with the rest of the app */
  font-size: 16px; /* Consistent font size */
}

/* Done Button in Popup */
.popup-content button {
  background-color: #5a5aff; /* Darker blue */
  border: none;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 10px; /* Add spacing above the button */
}

.popup-content button:hover {
  background-color: #4d4dff; /* Slightly lighter blue on hover */
}

.popup-content button:active {
  background-color: #4040e0; /* Darker shade on click */
}

.fullscreen-notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it covers everything */
}

.notification-content {
  background-color: rgba(
    76,
    175,
    80,
    0.9
  ); /* Semi-transparent green background */
  color: white;
  padding: 20px;
  border-radius: 10px; /* Rounded corners */
  text-align: center; /* Center the text */
}

.close-button {
  background-color: white; /* Button background */
  color: black; /* Button text color */
  border: none; /* Remove default border */
  padding: 10px 20px; /* Button padding */
  margin-top: 15px; /* Space above the button */
  border-radius: 5px; /* Rounded button corners */
  cursor: pointer; /* Pointer cursor on hover */
}

.close-button:hover {
  background-color: #ccc; /* Button hover effect */
}

#rarityText {
  font-weight: bold;
  margin-bottom: 10px;
}

/* Quest Item Style */
.quest {
  background-color: #333333;
  border: 1px solid #555555;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  color: #e0e0e0;
  text-align: center;
  transition: transform 0.2s ease;
  margin: 5px;
}

.quest:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

/* Quest Item Text */
.quest p {
  margin: 5px 0;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  border: 1px solid #555555;
  border-radius: 8px;
  padding: 5px;
}

p:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

#rarityCheckboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  border: 1px solid #444444;
  background-color: #2a2a2a;
  border-radius: 10px;
  max-width: 90vw;
  max-height: 70vh;
  padding: 10px;
  overflow-y: auto;
}

/* Checkbox Style */
#rarityCheckboxes input {
  margin: 10px auto;
  accent-color: #5a5aff; /* Custom accent color for checkboxes */
  cursor: pointer;
}

/* Checkbox Label Style */

.checkboxdiv:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

.checkboxdiv {
  display: grid;
  border: 1px solid #444444;
  background-color: #2a2a2a;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
  max-width: 90vw;
  margin: 2px;
  padding: 3px;
}

/* Notifications Container */
#notifications {
  position: fixed; /* Keep notifications fixed on the screen */
  top: 10px; /* Adjust position as needed */
  right: 10px; /* Adjust position as needed */
  width: 20vw; /* Set desired width */
  max-height: 25vh; /* Set maximum height for overflow */
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  color: white; /* Text color */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow */
  overflow-y: auto; /* Enable scrolling if notifications exceed height */
  z-index: 1000; /* Ensure notifications are displayed on top */
}

/* Notification Box */
.notification {
  background-color: #333333; /* Notification background color */
  padding: 10px;
  border-radius: 5px; /* Rounded corners */
  margin-bottom: 5px; /* Spacing between notifications */
  display: flex; /* Allow side-by-side content */
  justify-content: space-between; /* Align content horizontally */
}

.notification:hover {
  background-color: #444444; /* Slightly lighter background on hover */
}

/* Notification Text */
.notification p {
  margin: 10px auto; /* Remove default margin */
  line-height: 1.2; /* Line spacing for better readability */
}

.notification button:hover {
  color: #ccc; /* Lighter color on hover */
}

.page {
  margin: 20px auto;
  padding: 10px;
  border: 2px solid #444444;
  background-color: #2a2a2a;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
  max-width: 90vw;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 15vw));
  gap: 10px;
  overflow-y: auto;
  max-height: 60vh;
  padding: 10px;
}

.page h2 {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin: 10px;
  padding: 8px;
  border-radius: 5px;
  display: inline-block;
  background-color: #333333;
}

#leveling {
  width: 60vw;
}

#levelBarI, #rebirthBarI {
  width: 100%; /* Set the width to 100% of the container */
  height: 20px; /* Set the height of the progress bar */
  border-radius: 5px; /* Set the border radius of the progress bar */
  overflow: hidden; /* Hide any overflow of the progress bar */
  background-color: #5a5aff; /* Set the background color of the progress bar */
}

.stat {
  border: 1px solid #555555;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  color: #e0e0e0;
  text-align: center;
  transition: transform 0.2s ease;
  margin: 5px;
  gap: 8px;
}

.stat p {
  margin: 5px 0;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
}

#stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 80vw));
  justify-content: center;
  gap: 10px;
  overflow-y: auto;
  max-height: 60vh;
  padding: 10px;
}

.achivement {
  border: 1px solid #555555;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  color: #e0e0e0;
  text-align: center;
  transition: transform 0.2s ease;
  margin: 5px;
  gap: 8px;
}

.achivement p {
  margin: 5px 0;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
}

.achivement #done {
  border: 1px solid #555555;
  color: green;
}

.achivement #name {
  border: 1px solid white;
  color: #e0e0e0;
}

.setting {
  border: 1px solid #555555;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
  color: #e0e0e0;
  text-align: center;
  transition: transform 0.2s ease;
  margin: 5px;
  gap: 8px;
}

.setting p {
  border: 1px solid #555555;
  margin: 5px 0;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
}

#settingsContainer {
  grid-template-columns: repeat(auto-fill);
}

/* Mobile styling */
@media (max-width: 600px) {
  /* Inventory, upgrades, and quests grid */
  #inventory,
  #upgrades,
  #quests,
  #rarityCheckboxes {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px; /* Reduce gap between items for mobile */
  }

  /* Adjust button and font sizes for smaller screens */
  button,
  .item button,
  .popup-content button {
    padding: 10px 20px;
    font-size: 14px;
  }

  /* Adjust notification width */
  #notifications {
    width: 90vw;
  }

  .popup-content {
    max-width: 90%;
  }

  /* Adjust text for better readability on smaller screens */
  .item p,
  .upgrade p,
  .quest p {
    font-size: 12px; /* Smaller text for mobile */
  }

  /* Adjust padding and margins for containers */
  #shop,
  #questsContainer,
  #rarityCheckboxes {
    padding: 8px;
    margin: 10px auto;
  }

  /* Make popup content fit better on mobile */
  .popup-content {
    padding: 15px;
    width: 80%;
  }

  /* Reduce size of the quest container */
  #questsContainer {
    max-width: 90%;
    padding: 8px;
  }
}