/* Grimoire - Willowdale lore page styling.
   Reuses the global palette from gomud.css and layers on serif body type,
   wider measure, and ornamental flourishes for long-form reading. */

.lore-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  color: var(--text-primary-color);
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  line-height: 1.7;
}

.lore-shell .lore-page-header {
  background-color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(201, 168, 96, 0.18);
  border-radius: 10px;
  padding: 28px 36px 30px;
  margin-bottom: 28px;
}

.lore-shell .lore-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  margin-bottom: 8px;
}

.lore-shell h1.lore-page-title {
  font-family: "Amarante", cursive;
  font-size: 2rem;
  font-weight: 400;
  color: var(--text-primary-color);
  margin: 0 0 6px 0;
  line-height: 1.15;
}

.lore-shell .lore-page-subtitle {
  font-style: italic;
  color: var(--text-secondary-color);
  font-size: 1rem;
  margin: 0;
}

.lore-shell .lore-intro-text {
  margin: 18px 0 0 0;
  font-style: italic;
  color: var(--text-primary-color);
  font-size: 1rem;
  line-height: 1.6;
}

.lore-shell .lore-rule {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--text-secondary-color) 30%,
    var(--text-secondary-color) 70%,
    transparent
  );
  opacity: 0.5;
  margin: 36px 0;
}

/* Lore index - table of contents */

.lore-intro {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 640px;
}

.lore-intro p {
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.9;
}

.lore-toc {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lore-card {
  display: block;
  padding: 22px 26px;
  background-color: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease,
    background-color 0.2s ease;
}

.lore-card:hover {
  border-color: var(--text-secondary-color);
  background-color: rgba(0, 0, 0, 0.88);
  transform: translateY(-1px);
}

.lore-card-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  margin-bottom: 4px;
}

.lore-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary-color);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.lore-card-summary {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary-color);
  line-height: 1.55;
}

/* Chapter body - rendered markdown */

.lore-body {
  background-color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(201, 168, 96, 0.18);
  border-radius: 10px;
  padding: 40px 48px;
}

.lore-body h1,
.lore-body h2,
.lore-body h3,
.lore-body h4 {
  color: var(--text-primary-color);
  line-height: 1.3;
}

.lore-body h1 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0.4em 0 0.4em;
  color: var(--text-secondary-color);
  text-align: center;
  letter-spacing: 0.04em;
}

.lore-body h1:first-child {
  margin-top: 0;
}

.lore-body h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.6em 0 0.4em;
  text-align: center;
  font-style: italic;
}

.lore-body h3 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 2em 0 0.6em;
  color: var(--text-secondary-color);
  border-bottom: 1px solid rgba(201, 168, 96, 0.25);
  padding-bottom: 0.35em;
}

.lore-body h4 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.6em 0 0.4em;
  color: var(--text-secondary-color);
}

.lore-body p {
  margin: 0 0 1.1em;
}

.lore-body hr {
  border: none;
  text-align: center;
  margin: 2.4em 0;
  height: 1em;
  position: relative;
}

.lore-body hr::after {
  content: "\2766"; /* floral heart, evokes leaf */
  color: var(--text-secondary-color);
  font-size: 1.35rem;
  letter-spacing: 0.6em;
  opacity: 0.7;
}

.lore-body blockquote {
  margin: 1.4em 0;
  padding: 0.6em 1.4em;
  border-left: 3px solid var(--text-secondary-color);
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.92;
}

.lore-body em {
  color: var(--text-primary-color);
}

.lore-body strong {
  color: var(--text-secondary-color);
}

.lore-body a {
  color: var(--text-secondary-color);
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 96, 0.4);
}

.lore-body a:hover {
  text-decoration-color: var(--text-secondary-color);
}

.lore-body ul,
.lore-body ol {
  margin: 0 0 1.1em 1.4em;
  padding: 0;
}

.lore-body li {
  margin-bottom: 0.4em;
}

.lore-body code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  padding: 1px 6px;
  background-color: rgba(201, 168, 96, 0.12);
  border-radius: 3px;
}

/* Cross-link from a lore chapter to its matching Atlas anchor. */

.lore-atlas-link {
  display: block;
  margin-top: 24px;
  padding: 16px 20px;
  background-color: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lore-atlas-link:hover {
  border-color: var(--text-secondary-color);
  background-color: rgba(0, 0, 0, 0.88);
}

.lore-atlas-link-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  margin-bottom: 4px;
}

.lore-atlas-link-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary-color);
}

/* Atlas - per-area cards live below the framing essay. */

.atlas-areas {
  margin-top: 32px;
}

.atlas-areas .lore-eyebrow {
  margin-bottom: 14px;
}

.atlas-areas-placeholder {
  padding: 22px 26px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px dashed rgba(201, 168, 96, 0.35);
  border-radius: 8px;
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.85;
  line-height: 1.55;
}

/* Chapter footer - prev/next navigation */

.lore-pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

.lore-pagination a {
  flex: 1 1 0;
  padding: 14px 18px;
  background-color: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lore-pagination a:hover {
  border-color: var(--text-secondary-color);
  background-color: rgba(0, 0, 0, 0.88);
}

.lore-pagination .lore-pagination-prev {
  text-align: left;
}

.lore-pagination .lore-pagination-next {
  text-align: right;
}

.lore-pagination-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  margin-bottom: 4px;
}

.lore-pagination-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary-color);
}

.lore-back {
  display: inline-block;
  margin-top: 24px;
  padding: 8px 14px;
  background-color: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 6px;
  color: var(--text-secondary-color);
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  letter-spacing: 0.1em;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lore-back:hover {
  border-color: var(--text-secondary-color);
  color: var(--text-primary-color);
}

@media (max-width: 768px) {
  .lore-shell {
    padding: 24px 14px 48px;
  }

  .lore-body {
    padding: 24px 20px;
  }

  .lore-shell h1.lore-page-title {
    font-size: 2rem;
  }

  .lore-pagination {
    flex-direction: column;
  }
}

/* Lore index sections - each section is one large card containing the
   section header and its items as rows. This unifies the visual block,
   keeps the section headers legible against the busy background, and
   removes the per-card-on-card clutter. */

.lore-section-card {
  background-color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 10px;
  margin-top: 28px;
  overflow: hidden;
}

.lore-section-header {
  padding: 22px 28px 18px;
  background-color: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(201, 168, 96, 0.22);
}

.lore-section-title {
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary-color);
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.lore-section-subtitle {
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.85;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.lore-section-rows {
  display: flex;
  flex-direction: column;
}

.lore-row {
  display: block;
  padding: 18px 28px;
  text-decoration: none;
  color: var(--text-primary-color);
  border-bottom: 1px solid rgba(201, 168, 96, 0.15);
  transition: background-color 0.2s ease;
}

.lore-row:last-child {
  border-bottom: none;
}

.lore-row:hover {
  background-color: rgba(0, 0, 0, 0.4);
  color: var(--text-primary-color);
}

.lore-row-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  margin-bottom: 4px;
}

.lore-row-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary-color);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.lore-row-author {
  font-style: italic;
  color: var(--text-secondary-color);
  font-size: 1rem;
  margin-bottom: 6px;
}

.lore-row-summary {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary-color);
  line-height: 1.55;
}

.lore-body-intro-label {
  font-style: italic;
  font-size: 1rem;
  color: var(--text-secondary-color);
  margin-bottom: 14px;
}

/* Atlas dropdown selector - sits between the page header and the body, lets
   the reader switch between the framing essay and any published area without
   navigating away. */

.atlas-selector {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  margin-bottom: 24px;
  background-color: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 10px;
}

.atlas-selector-label {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary-color);
  white-space: nowrap;
}

.atlas-selector-select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%23c9a860' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  border: 1px solid rgba(201, 168, 96, 0.35);
  border-radius: 6px;
  color: var(--text-primary-color);
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  padding: 8px 36px 8px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.atlas-selector-select:hover {
  border-color: var(--text-secondary-color);
}

.atlas-selector-select:focus {
  outline: none;
  border-color: var(--text-secondary-color);
  box-shadow: 0 0 0 2px rgba(201, 168, 96, 0.18);
}

/* Native option styling is browser-limited, but most browsers honor
   background-color and color on these elements in the open dropdown. */
.atlas-selector-select option {
  background-color: #2a2015;
  color: var(--text-primary-color);
}

.atlas-area-summary {
  font-style: italic;
  color: var(--text-secondary-color);
  margin: 0 0 18px 0;
  opacity: 0.85;
}

/* Sub-heading inside a section card - used to divide the Library card into
   "Public Shelf" and "Your Library" without spawning two separate cards. */
.lore-shelf-heading {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--text-secondary-color);
  padding: 16px 28px 6px;
  border-top: 1px solid rgba(201, 168, 96, 0.15);
}

.lore-section-rows + .lore-shelf-heading,
.lore-section-empty + .lore-shelf-heading,
.lore-shelf-empty + .lore-shelf-heading,
.lore-book-grid + .lore-shelf-heading {
  margin-top: 4px;
}

.lore-section-header + .lore-shelf-heading {
  border-top: none;
  padding-top: 18px;
}

.lore-section-card > .lore-shelf-heading:first-child {
  border-top: none;
  padding-top: 22px;
}

.lore-shelf-subtitle {
  padding: 0 28px 14px;
  margin: 0;
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.85;
  font-size: 1rem;
  line-height: 1.5;
}

.lore-shelf-empty {
  padding: 18px 28px;
  font-style: italic;
  color: var(--text-primary-color);
  font-size: 1rem;
  line-height: 1.55;
}

/* Book grid - clickable cards laid out three across inside a shelf section. */
.lore-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 14px 28px 22px;
}

.lore-book-card {
  display: block;
  padding: 16px 16px 18px;
  background-color: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(201, 168, 96, 0.2);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary-color);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.lore-book-card:hover {
  border-color: rgba(201, 168, 96, 0.5);
  background-color: rgba(0, 0, 0, 0.65);
  color: var(--text-primary-color);
  transform: translateY(-1px);
}

.lore-book-card-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--text-secondary-color);
  margin-bottom: 6px;
}

.lore-book-card-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
  line-height: 1.3;
  color: var(--text-primary-color);
}

.lore-book-card-author {
  font-style: italic;
  color: var(--text-secondary-color);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.lore-book-card-summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-primary-color);
}

.lore-section-footer-link {
  display: block;
  padding: 14px 28px;
  border-top: 1px solid rgba(201, 168, 96, 0.15);
  color: var(--text-secondary-color);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.lore-section-footer-link:hover {
  background-color: rgba(0, 0, 0, 0.4);
  color: var(--text-secondary-color);
}

.lore-book-locked {
  background-color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(201, 168, 96, 0.25);
  border-radius: 10px;
  padding: 36px 40px;
  text-align: center;
  color: var(--text-primary-color);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 18px;
}

.lore-book-locked p {
  margin: 0 0 0.8em;
}

.lore-book-locked p:last-child {
  margin-bottom: 0;
}

.lore-section-empty {
  padding: 22px 28px;
  font-style: italic;
  color: var(--text-primary-color);
  opacity: 0.85;
  line-height: 1.55;
}

/* Top variant of the back-to-index link. The bottom one already has its
   panel-style; the top sits above the page header and uses the same look. */

.lore-back-top {
  margin-top: 0;
  margin-bottom: 18px;
}

.lore-pagination-top {
  margin-top: 0;
  margin-bottom: 24px;
}

/* Book reader - paginated readable items rendered from item JSON content */

.book-body .book-page p {
  margin: 0 0 1.1em;
}

.book-body .book-page p:last-child {
  margin-bottom: 0;
}

.book-page-break {
  border: none;
  text-align: center;
  margin: 2.4em 0 2.2em;
  height: 1em;
  position: relative;
}

.book-page-break::after {
  content: "\2042"; /* asterism-like flourish */
  color: var(--text-secondary-color);
  font-size: 1.35rem;
  letter-spacing: 0.6em;
  opacity: 0.6;
}