/* === Shared Base Scroll Styles === */
.gold-scroll,
.silver-scroll,
.bronze-scroll,
.ink-scroll {
  overflow-y: auto;
  padding: 10px;
  outline-offset: 2px;
  border-radius: 8px;
  background-color: #eee1c4;
  line-height: 1.2;
  text-align: justify;
  font-size: 15px;
  max-width: 225px;
  height: 300px;
}

/* === Unique Borders/Outlines === */
.gold-scroll {
  border: 4px solid #b9ab73;
  outline: 4px solid #978c63;
}

.silver-scroll {
  border: 4px solid #a0a0a0;
  outline: 4px solid #838383;
}

.bronze-scroll {
  border: 4px solid #cc9970;
  outline: 4px solid #a97e5c;
}

.ink-scroll {
  border: 4px solid #b089ab;
  outline: 4px solid #8e6d89;
}

/* === WebKit Scrollbar Styles === */
.gold-scroll::-webkit-scrollbar,
.silver-scroll::-webkit-scrollbar,
.bronze-scroll::-webkit-scrollbar,
.ink-scroll::-webkit-scrollbar {
  width: 14px;
}

.gold-scroll::-webkit-scrollbar {
  width: 16px; /* slightly wider */
}

.gold-scroll::-webkit-scrollbar-track,
.silver-scroll::-webkit-scrollbar-track,
.bronze-scroll::-webkit-scrollbar-track,
.ink-scroll::-webkit-scrollbar-track {
  background: #dbcfb1;
  border-radius: 10px;
}

.gold-scroll::-webkit-scrollbar-thumb {
  background-color: #b9ab73;
  box-shadow: inset 0 0 3px #978c63;
}

.silver-scroll::-webkit-scrollbar-thumb {
  background-color: #a0a0a0;
  box-shadow: inset 0 0 3px #838383;
}

.bronze-scroll::-webkit-scrollbar-thumb {
  background-color: #cc9970;
  box-shadow: inset 0 0 3px #a97e5c;
}

.ink-scroll::-webkit-scrollbar-thumb {
  background-color: #b089ab;
  box-shadow: inset 0 0 3px #8e6d89;
}

.gold-scroll::-webkit-scrollbar-thumb,
.silver-scroll::-webkit-scrollbar-thumb,
.bronze-scroll::-webkit-scrollbar-thumb,
.ink-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}