body {
    font-family: Arial, sans-serif;
   }

.rarity {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 20px;
    text-indent: 0px;
}

.italic {
  font-style: italic;
}

.output-line {
  margin: 5px 0; /* Uniform vertical margin */
  line-height: 1.2; /* Optional: Adjust line height */
}

input[type="number"] {
    width: 50px;
}

.Common { color: black; }
.Uncommon { color: green; }
.Rare { color: blue; }
.Very.Rare { color: purple; }
.Legendary { color: orange; }

.input-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.input-container label {
  margin-right: 10px;
}

.item-result {
  background-color: #fff5e6; /* light parchment */
  border-left: 5px solid #8d4b00;
  padding: 0px 0px 0px 10px; /* top, right, bottom, left */
  margin-top: 10px;
  text-align: left;
}

.parchment-bg {
  background:
    #f4ecd8 url('https://cdn.pixabay.com/photo/2015/06/19/21/24/old-814651_960_720.jpg') center center / cover no-repeat;
  color: #2e2b20; /* Dark text for contrast */
  font-family: 'Georgia', serif;
  border: 1px solid #a68b5b;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#placeholder-text {
  color: #3f29008f; /* Tailwind's gray-500 */
  font-style: italic;
  font-size: 2rem; /* roughly text-xl */
  align-items: center;         /* vertical centering */
  justify-content: center;     /* horizontal centering */
  text-align: center;
  padding: 220px 0px 10px 10px; /* top, right, bottom, left */
}

.add-button {
  font-size: 1.25rem;
  font-weight: bold;
}

.mastery-tooltip-container {
  position: relative;
  display: inline-block;
  cursor: help;
  color: #065be4; /* Tailwind's blue-500 */
  font-weight: 500;
}

.mastery-tooltip-container .tooltip-text {
  visibility: hidden;
  background-color: #1f2937; /* Dark background */
  color: #fff;
  text-align: left;
  border-radius: 8px;
  padding: 12px 16px;
  position: absolute;
  z-index: 9999;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 600px;       /* ⬅️ Wide enough for paragraphs */
  width: max-content;     /* Stretch as wide as needed */
  min-width: 280px;       /* Prevent tiny tooltips */
  white-space: normal;    /* Allow wrapping */
  word-wrap: break-word;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.mastery-tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.property-tooltip-container {
  position: relative;
  display: inline-block;
  cursor: help;
  color: #3b82f6; /* Tailwind blue-500 */
  font-weight: 500;
}

.property-tooltip-container .tooltip-text {
  visibility: hidden;
  background-color: #1f2937; /* Dark background */
  color: #fff;
  text-align: left;
  border-radius: 8px;
  padding: 12px 16px;
  position: absolute;
  z-index: 9999;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 600px;       /* ⬅️ Wide enough for paragraphs */
  width: max-content;     /* Stretch as wide as needed */
  min-width: 280px;       /* Prevent tiny tooltips */
  white-space: normal;    /* Allow wrapping */
  word-wrap: break-word;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.property-tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 500px) {
  .tooltip-text {
    max-width: 90vw; /* Use 90% of viewport width on small screens */
    left: 0;
    right: 0;
    transform: none;
  }
}