.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);
}

/* Monsters page result box */
.monster-result-box {
  line-height: 1.35;
  text-indent: 0;
  min-height: 930px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: normal;
  padding: 1.25rem;
}

/* Placeholder text inside the empty monster result box */
#placeholder-text.monster-placeholder {
  color: #3f29008f;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 2rem;
  line-height: 1.2;
  text-align: center;
  padding: 0 1rem;
  margin: 0;

  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Generated monster output */
.monster-result-box p,
.monster-result-box div,
.monster-result-box li {
  line-height: 1.35;
}

/* Keep generated monster text readable */
.monster-result-box {
  font-size: 1rem;
}

/* Monster names / headings inside generated output */
.monster-result-box h1,
.monster-result-box h2,
.monster-result-box h3,
.monster-result-box strong {
  line-height: 1.15;
}

/* Prevent long traits/actions from forcing horizontal overflow */
.monster-result-box,
.monster-result-box * {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/* iPad vertical / tablet portrait */
@media (max-width: 1100px) and (orientation: portrait) {
  .monster-result-box {
    min-height: 1130px;
  }
}

/* phones */
@media (max-width: 640px) {
  .monster-result-box {
    min-height: 360px;
    padding: 1rem;
  }

  #placeholder-text.monster-placeholder {
    font-size: 1.7rem;
  }
}