/* Each page family uses its own supplied Darkest Dungeon artwork. */
body.page-background {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  background: #100d10;
}

/* A separate fixed layer keeps the artwork still on long and mobile pages. */
.page-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(180deg, #100d101a, #100d1033 50%, #100d1099), var(--page-artwork);
  background-position: center, var(--artwork-position, center);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-home { --page-artwork: url("backgrounds/home.png"); }
.background-projects {
  --page-artwork: url("backgrounds/projects.png");
  --artwork-position: 65% center;
}
.background-boards { --page-artwork: url("backgrounds/boards.png"); }
.background-profile { --page-artwork: url("backgrounds/profile.png"); }
.background-public-profile {
  --page-artwork: url("backgrounds/public-profile.png");
  --artwork-position: 70% center;
}
.background-reviews {
  --page-artwork: url("backgrounds/reviews.png");
  --artwork-position: 75% center;
}

/* Keep the scene visible around panels without sacrificing text contrast. */
.page-background .bar { background: #1b1115f2; }
.page-background .card { background: #211519ed; }
.page-background .profile-hero {
  background: linear-gradient(125deg, #3c2732ed, #2a2736ed 60%, #272222ed);
}
.page-background .profile-section { background: #180f12ed; }
.page-background .page-heading,
.page-background .workshop-heading,
.page-background .profile-links,
.page-background .profile-public-intro,
.page-background .pagination {
  text-shadow: 0 2px 6px #000, 0 0 16px #000;
}
.page-background .empty-state { background: #180f12e6; }